/* Oberfläche für zwei Orte: iPad am Tresen (stehend, eine Hand) und Mac im
   Büro. Die Gestaltung folgt drei Regeln:

   1. Eine Größenleiter, keine zufälligen Werte. Schrift 13/14/16/20/28,
      Abstände in Vielfachen von 4. Vorher lagen die Schriftgrößen zwischen
      12,5 und 17 px dicht beieinander — dadurch gab es keine Hierarchie,
      alles wirkte gleich wichtig, und genau das liest sich als „unfertig".
   2. Eine Hauptaktion je Bildschirm. Vorher war jeder Knopf gefüllt und
      braun, auch „Suchen" neben einer Suche, die ohnehin beim Tippen sucht.
   3. Ruhige Werkzeugleisten. Filter sind Werkzeug, nicht Inhalt: kleiner,
      leiser, in einer Zeile.                                              */

:root {
  --grund: #f7f6f3;
  --karte: #ffffff;
  --linie: #e6e1d9;
  --linie-zart: #f0ece5;
  --text: #26221e;
  --leise: #787067;
  --leiser: #9a9188;
  --holz: #8a4b2a;
  --holz-tief: #6f3a1e;
  --holz-hell: #f4e9e1;
  --gut: #2f6b46;
  --gut-hell: #e6f1ea;
  --warn: #94600f;
  --warn-hell: #fbf1de;
  --rot: #8d2f26;

  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px;
  --r5: 24px; --r6: 32px; --r7: 48px;
  /* Die eine begründete Ausnahme: Abstand zwischen einem Symbol und seiner
     Beschriftung. 4px klebt, 8px trennt sie zu zwei Dingen. Als Variable,
     damit es eine Entscheidung bleibt und nicht dreimal dieselbe krumme
     Zahl. */
  --r-symbol: 6px;
  --rund: 9px;
  --rund-karte: 12px;
  --schatten: 0 1px 2px rgba(38,34,30,.05), 0 1px 1px rgba(38,34,30,.04);
  --leiste: 236px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background: var(--grund);
  -webkit-font-smoothing: antialiased;
}

.ueberspringen {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--karte); padding: var(--r3) var(--r4); border-radius: var(--rund);
}
.ueberspringen:focus { left: var(--r3); top: var(--r3); }

/* --------------------------------------------------------------------------
   Gerüst: Leiste links, Inhalt rechts
   -------------------------------------------------------------------------- */
.huelle { display: flex; min-height: 100vh; align-items: stretch; }

.seitenleiste {
  flex: 0 0 var(--leiste); width: var(--leiste);
  background: var(--karte); border-right: 1px solid var(--linie);
  padding: var(--r5) var(--r4);
  display: flex; flex-direction: column; gap: var(--r5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.seitenleiste .marke { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.seitenleiste .marke a { color: var(--text); text-decoration: none; }
.seitenleiste .marke span { color: var(--holz); }

.seitenleiste nav { display: flex; flex-direction: column; gap: var(--r1); }
.seitenleiste .gruppe {
  margin: var(--r4) 0 var(--r1); padding: 0 var(--r3);
  font-size: 11.5px; font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--leise);
}
.seitenleiste nav .gruppe:first-child { margin-top: 0; }
.seitenleiste ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--r1); }
.seitenleiste nav a {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r2) var(--r3); border-radius: var(--rund);
  color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500;
  min-height: 40px;
}
.seitenleiste nav a:hover { background: var(--grund); }
.seitenleiste nav a.aktiv {
  background: var(--holz-hell); color: var(--holz-tief); font-weight: 620;
}
.seitenleiste .abmelden {
  margin-top: auto; padding-top: var(--r4); border-top: 1px solid var(--linie-zart);
  display: flex; align-items: center; justify-content: space-between; gap: var(--r2);
}
.seitenleiste .wer { font-size: 13.5px; color: var(--leise); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

main { flex: 1 1 auto; min-width: 0; padding: var(--r6) var(--r6) var(--r7);
  max-width: 1240px; }

/* --------------------------------------------------------------------------
   Typografie
   -------------------------------------------------------------------------- */
h1 { font-size: 28px; font-weight: 650; letter-spacing: -.025em; margin: 0 0 var(--r1); }
h2 { font-size: 20px; font-weight: 620; letter-spacing: -.015em; margin: var(--r6) 0 var(--r3); }
h3 { font-size: 16px; font-weight: 620; margin: 0 0 var(--r2); }
.unterzeile { color: var(--leise); margin: 0 0 var(--r5); font-size: 15px; max-width: 68ch; }
.fussnote { color: var(--leise); font-size: 13.5px; margin: var(--r2) 0 0; max-width: 72ch; }
.zusatz { color: var(--leise); font-size: 13px; }

/* Seitenkopf: Titel links, Hauptaktion rechts — eine Zeile, nie umbrechend. */
.seitenkopf { display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--r4); flex-wrap: wrap; }
.seitenkopf .taten { display: flex; gap: var(--r2); align-items: center; flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Bedienelemente
   -------------------------------------------------------------------------- */
/* Kein width:100% an der Stelle: Das ist eine Frage des Formularaufbaus, nicht
   des Bedienelements. Vorher gewann diese Regel wegen ihrer vier :not() über
   jede Werkzeugleisten-Regel — deshalb spannte sich das Monatsfeld des
   Monatslaufs über die gesamte Kartenbreite. Volle Breite gibt es jetzt dort,
   wo sie gemeint ist: in Formularen. */
:where(input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea, select) {
  font: inherit; font-size: 15px;
  padding: var(--r2) var(--r4); border: 1px solid var(--linie);
  border-radius: var(--rund);
  background: var(--karte); color: var(--text); min-height: 40px; max-width: 100%;
}
.formular input, .formular textarea, .formular select,
.feld input, .feld textarea, .feld select { width: 100%; }
/* Keine Mindesthöhe: Das rows-Attribut sagt, wie viele Zeilen gemeint sind.
   Mit min-height 76px blieben unter der zweiten Zeile 13px leer, während oben
   8px polsterten — das Feld sah aus, als sei es unten dreimal so weit. */
textarea { resize: vertical; line-height: 1.5; }
select {
  appearance: none; padding-right: var(--r5); cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23787067' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat; background-position: right var(--r2) center;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--holz); outline-offset: -1px; border-color: transparent;
}
label { font-size: 13px; font-weight: 600; color: var(--leise); }

button, .knopf {
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1;
  padding: var(--r2) var(--r4); border-radius: var(--rund);
  border: 1px solid transparent;
  min-height: 40px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--r-symbol);
  background: var(--karte); color: var(--text); border-color: var(--linie);
}
button:hover, .knopf:hover { background: var(--grund); }
/* Genau eine gefüllte Aktion je Bildschirm. */
button[type=submit].haupt, .knopf.haupt, .formular > button[type=submit],
.seitenkopf .knopf.haupt {
  background: var(--holz); color: #fff; border-color: var(--holz);
}
button[type=submit].haupt:hover, .knopf.haupt:hover,
.formular > button[type=submit]:hover { background: var(--holz-tief); border-color: var(--holz-tief); }
.knopf.breit { width: 100%; }
.knopf.still, button.still {
  background: transparent; border-color: transparent; color: var(--leise);
  font-weight: 500; font-size: 13.5px; padding: var(--r1) var(--r2); min-height: 32px;
}
.knopf.still:hover, button.still:hover { color: var(--text); background: var(--grund); }
.knopf-leise { background: var(--karte); border: 1px solid var(--linie); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: var(--r2) var(--r4); border-radius: var(--rund);
  text-decoration: none; font-weight: 600; font-size: 15px; }
.knopf-leise:hover { background: var(--grund); }
.knopf-weg { background: transparent; color: var(--leise); border: 1px solid var(--linie); }
.knopf-weg:hover { color: var(--rot); border-color: #e6b8b3; background: var(--karte); }
button:disabled { opacity: .5; cursor: default; }

/* --------------------------------------------------------------------------
   Werkzeugleiste — Filter sind Werkzeug, nicht Inhalt
   -------------------------------------------------------------------------- */
form.suche {
  display: flex; gap: var(--r2); margin: 0 0 var(--r4);
  flex-wrap: wrap; align-items: center;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-karte); padding: var(--r3);
}
/* Eine Höhe für die ganze Zeile. Vorher rechneten drei Elemente sie
   verschieden aus: Der Knopf hat line-height 1 und wurde 38px, die Felder
   haben 1,55 und wurden 39,7 bzw. 41,25px. Die Kanten liefen sichtbar
   auseinander — auf „Offene Posten" um über 5px. */
form.suche { --h: 40px; }
form.suche input, form.suche select, form.suche button {
  height: var(--h); min-height: var(--h);
}
/* Das Suchfeld nimmt allen freien Platz, die Filter stehen als Block am
   rechten Rand. Beides zusammen geht nur, wenn genau ein Element wächst —
   deshalb hier flex-grow und bei der Filtergruppe keins. */
.suchfeld { position: relative; flex: 1 1 320px; min-width: 200px;
  display: flex; align-items: center; }
.suchfeld input[type=search] { width: 100%; min-width: 0; }
form.suche .filter { display: flex; flex: 0 0 auto; flex-wrap: wrap;
  gap: var(--r2); align-items: center; margin-left: auto; }
/* Auswahlfelder so breit wie ihr Inhalt, nicht 180 px jedes. Fünf Filter
   passen dadurch in eine Zeile, statt in die zweite zu rutschen. */
form.suche select { flex: 0 0 auto; width: auto; min-width: 0; font-size: 14px;
  padding: var(--r2) var(--r5) var(--r2) var(--r3); }
/* Auch das Suchfeld folgt der Polsterung der Filter daneben — sonst beginnt
   der eingetippte Text 4px weiter innen als deren Beschriftung. */
form.suche input { padding: var(--r2) var(--r3); }
form.suche input[type=month], form.suche input[type=date] { flex: 0 0 auto; width: auto; }
form.suche button { font-size: 14px; padding: var(--r2) var(--r3); }
form.suche .rechts { margin-left: auto; }
form.suche label:not(.nur-lesbar) { flex: 0 0 auto; font-size: 13px; }
/* Gesucht wird beim Tippen. Der Knopf bleibt im Markup — ohne JavaScript ist
   das Formular ein gewöhnliches GET und braucht ihn. Mit JavaScript wäre er
   ein Knopf, der nichts tut, was nicht ohnehin schon geschehen ist. */
html.js .ohne-js { display: none; }
/* Die Ladeanzeige sitzt im Suchfeld statt daneben: Sonst rückt sie beim
   Erscheinen die ganze Filtergruppe um ihre Breite nach rechts. */
.suchfeld .laeuft { position: absolute; right: var(--r3); pointer-events: none;
  background: var(--karte); padding-left: var(--r2); }
.laeuft { opacity: 0; color: var(--leise); font-size: 13.5px; align-self: center;
  transition: opacity .12s; }
.htmx-request .laeuft, .htmx-request.laeuft { opacity: 1; }

/* --------------------------------------------------------------------------
   Karten, Kacheln, Tabellen
   -------------------------------------------------------------------------- */
.karte { background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-karte); overflow: hidden; box-shadow: var(--schatten); }
.karte.polster { padding: var(--r5); }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: var(--r3); margin-bottom: var(--r5); }
.kachel { background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-karte); padding: var(--r5);
  box-shadow: var(--schatten); }
.kachel .titel { color: var(--leise); font-size: 12px; font-weight: 620;
  text-transform: uppercase; letter-spacing: .06em; }
.kachel .wert { font-size: 28px; font-weight: 650; letter-spacing: -.03em;
  margin-top: var(--r1); font-variant-numeric: tabular-nums; }
.kachel .zusatz { margin-top: var(--r1); }
a.kachel { display: block; text-decoration: none; color: inherit; }
a.kachel:hover { border-color: var(--holz); }

table { width: 100%; border-collapse: collapse; }
th {
  text-align: left; font-size: 12.5px; font-weight: 620; letter-spacing: .02em;
  color: var(--leise); padding: var(--r3) var(--r4);
  border-bottom: 1px solid var(--linie); background: var(--karte);
}
td { padding: var(--r3) var(--r4); border-bottom: 1px solid var(--linie-zart);
  font-size: 15px; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--grund); }
tr[data-ziel] { cursor: pointer; }
tr[data-ziel]:focus-within td { background: var(--grund); }

/* Sortierbare Spaltenköpfe. */
th.sortierbar { padding: 0; }
th.sortierbar a {
  display: flex; align-items: center; gap: var(--r-symbol); justify-content: inherit;
  padding: var(--r3) var(--r4); color: inherit; text-decoration: none;
  font: inherit; white-space: nowrap;
}
th.sortierbar.zahl a { justify-content: flex-end; }
th.sortierbar a:hover { color: var(--text); background: var(--grund); }
th.sortierbar .pfeil { opacity: 0; font-size: 10px; }
th.sortierbar a:hover .pfeil { opacity: .45; }
th.sortierbar.an a { color: var(--text); }
th.sortierbar.an .pfeil { opacity: 1; color: var(--holz); }
/* Ein Betrag bricht nicht um. „2.400,00" in einer Zeile und „€" in der
   nächsten liest sich wie zwei Zahlen. */
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.inv { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }

.marke-status { display: inline-block; padding: var(--r1) var(--r2);
  border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  line-height: 1.15; }
.verliehen { background: var(--holz-hell); color: var(--holz-tief); }
.verfuegbar { background: var(--gut-hell); color: var(--gut); }
.offen { background: var(--warn-hell); color: var(--warn); }

.balken { height: 6px; background: var(--linie-zart); border-radius: 3px;
  overflow: hidden; min-width: 90px; }
.balken i { display: block; height: 100%; background: var(--holz); }
.mit-balken { display: flex; align-items: center; gap: var(--r2); }

.hinweis { background: var(--warn-hell); border: 1px solid #f0dcb8;
  border-radius: var(--rund-karte); padding: var(--r3) var(--r4);
  margin-bottom: var(--r5); font-size: 15px; }
.hinweis.gut { background: var(--gut-hell); border-color: #bcdcc9; color: var(--gut); }
.hinweis.fehler { background: #fbeceb; border-color: #f0c4c0; color: var(--rot); }
.leer { padding: var(--r6) var(--r5); text-align: center; color: var(--leise);
  display: grid; justify-items: center; gap: var(--r3); }
.leer a { margin-left: 0; }

.blaettern { display: flex; gap: var(--r2); align-items: center; justify-content: center;
  margin-top: var(--r4); color: var(--leise); font-size: 14px; }
.blaettern a { color: var(--text); text-decoration: none;
  padding: var(--r2) var(--r3); border: 1px solid var(--linie);
  border-radius: var(--rund); background: var(--karte); }
.blaettern a:hover { background: var(--grund); }

.nur-schmal { display: none; }
.nur-lesbar { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.anzahl { font-size: 12.5px; font-weight: 620; color: var(--leise);
  background: var(--grund); padding: var(--r1) var(--r2); border-radius: 999px;
  margin-left: var(--r2); border: 1px solid var(--linie-zart); }
h2 .anzahl { position: relative; top: -2px; }
a { color: var(--holz); }
a:hover { text-decoration: underline; }
nav a, .knopf, .knopf-leise, .marke-status, .blaettern a { text-decoration: none; }

/* Reiter über den Listen. */
.reiter { display: flex; flex-wrap: wrap; gap: var(--r2); margin: 0 0 var(--r4); }
.reiter a {
  display: inline-flex; align-items: center; gap: var(--r-symbol);
  padding: var(--r2) var(--r3); border: 1px solid var(--linie); border-radius: 999px;
  background: var(--karte); font-size: 14px; font-weight: 600;
  text-decoration: none; color: var(--text);
}
.reiter a:hover { background: var(--grund); }
.reiter a.aktiv { background: var(--holz); border-color: var(--holz); color: #fff; }
.reiter a .anzahl { background: transparent; border: 0; color: inherit;
  opacity: .75; padding: 0; margin-left: var(--r1); }

.marke-zahl { display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; margin-left: auto; padding: 0 var(--r1);
  border-radius: 999px; background: var(--rot); color: #fff;
  font-size: 12px; font-weight: 650; }

/* Bedienelemente in Tabellenzellen sind kompakt. Sonst addiert sich ihre Höhe
   auf die Zellenpolsterung: Eine Zeile mit „Tauschen" wird 64 px hoch, die
   Zeile darüber ist 46 px — die Tabelle bekommt einen Rhythmus, den nichts im
   Inhalt rechtfertigt. Auf Zeigegeräten ohne Maus hebt der Block darunter das
   wieder auf; dort geht die Trefferfläche vor.  */
td button, td .knopf, td .knopf-leise, td .knopf-weg, td .knopf.still {
  min-height: 34px; padding: var(--r1) var(--r3); font-size: 14px;
}

/* --------------------------------------------------------------------------
   Touch: auf Zeigegeräten ohne Maus alles auf 44 px
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Auch die Navigation: Ein Verweis, der 35 px hoch ist, wird am Tresen mit
     dem Daumen danebengetroffen. */
  .seitenleiste nav a { min-height: 44px; display: flex; align-items: center; }
  button, .knopf, .knopf-leise, .knopf.still, button.still,
  .blaettern a, .reiter a, form.inline button,
  td button, td .knopf, td .knopf-leise, td .knopf-weg,
  input:not([type=checkbox]):not([type=radio]), select, textarea { min-height: 44px; }
  .knopf.still, button.still { padding: var(--r2) var(--r3); }
  form.suche { --h: 44px; }
  .seitenleiste nav a { min-height: 44px; }
}

/* --------------------------------------------------------------------------
   Schmale Schirme: Leiste wird Kopfzeile, Tabellen werden Karten
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .huelle { flex-direction: column; }
  .seitenleiste {
    flex: 0 0 auto; width: 100%; height: auto; position: sticky; top: 0; z-index: 10;
    border-right: 0; border-bottom: 1px solid var(--linie);
    flex-direction: row; align-items: center; gap: var(--r3);
    padding: var(--r2) var(--r4); overflow: visible;
  }
  .seitenleiste .marke { flex: 0 0 auto; font-size: 15px; }
  .seitenleiste .knopf.haupt.breit { width: auto; order: 3; flex: 0 0 auto; }
  .seitenleiste nav { flex: 1 1 auto; flex-direction: row; align-items: center;
    gap: var(--r1); min-width: 0; overflow-x: auto; scrollbar-width: none;
    padding-right: var(--r4);
    /* Weicher Abriss am rechten Rand: Sonst bricht der letzte Eintrag hart
       mitten im Wort ab und sieht aus wie ein Darstellungsfehler. */
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent); }
  .seitenleiste nav::-webkit-scrollbar { display: none; }
  .seitenleiste .gruppe { display: none; }
  .seitenleiste ul { flex-direction: row; gap: var(--r1); }
  .seitenleiste nav a { white-space: nowrap; padding: var(--r2) var(--r3); }
  .seitenleiste .abmelden { margin: 0; padding: 0; border: 0; order: 4; flex: 0 0 auto; }
  .seitenleiste .wer { display: none; }
  main { padding: var(--r5) var(--r4) var(--r7); }
}

@media (max-width: 760px) {
  /* Zwei Zeilen statt einer: Marke und Abmelden oben, darunter die
     Navigation zum Wischen. In einer Zeile drängten sich Marke, Hauptknopf,
     acht Verweise und Abmelden — sichtbar waren am Ende drei davon. */
  .seitenleiste { flex-wrap: wrap; padding: var(--r2) var(--r3); gap: var(--r2); }
  .seitenleiste .marke { order: 1; }
  .seitenleiste .abmelden { order: 2; margin-left: auto; }
  .seitenleiste .knopf.haupt.breit { display: none; }
  /* Umbrechen statt wischen. Gemessen war die Leiste am Telefon 1124 px
     breit in einem 351 px schmalen Fenster: „Werkstatt" begann bei 1028 px,
     man hätte 773 px weit wischen müssen — auf einer Leiste, deren Gruppen-
     überschriften hier ohnehin ausgeblendet sind. Erreichbar war es, findbar
     nicht.

     Dafür klebt die Leiste am Telefon nicht mehr oben fest: Drei Zeilen
     Navigation, die dauerhaft ein Viertel des Bildschirms belegen, sind
     teurer als der Weg nach oben zurück. */
  .seitenleiste { position: static; }
  .seitenleiste nav { order: 3; flex: 1 1 100%; flex-wrap: wrap;
    overflow-x: visible; mask-image: none; padding-right: 0; }
  .seitenleiste nav ul { flex-wrap: wrap; }
  .nur-schmal { display: block; }

  main { padding: var(--r4) var(--r3) var(--r6); }
  h1 { font-size: 23px; }
  h2 { font-size: 18px; margin-top: var(--r5); }
  .kachel { padding: var(--r3) var(--r4); }
  .kachel .wert { font-size: 24px; }
  form.suche { padding: var(--r2); }
  form.suche input[type=search] { flex: 1 1 100%; }
  form.suche select { flex: 1 1 calc(50% - 4px); }

  /* Auf schmalen Schirmen ist jede Zeile eine Karte. Die Hülle darum darf
     dann keine zweite zeichnen — sonst sitzt ein Rahmen im Rahmen, mit zwei
     Radien und zwei Schatten. */
  .karte { border: 0; background: transparent; box-shadow: none;
    border-radius: 0; overflow: visible; }
  .karte.polster { border: 1px solid var(--linie); background: var(--karte);
    border-radius: var(--rund-karte); }
  table, tbody, tr, td { display: block; width: 100%; }
  thead { display: none; }
  tr { border: 1px solid var(--linie); border-radius: var(--rund-karte);
    margin: 0 0 var(--r2); padding: var(--r3); background: var(--karte); }
  tbody tr:hover td { background: transparent; }
  td { display: flex; justify-content: space-between; align-items: baseline;
    gap: var(--r3); padding: var(--r1) 0; border: 0; text-align: right; }
  td::before { content: attr(data-label); font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--leise); font-weight: 620;
    text-align: left; flex: 0 0 auto; }
  td[data-label="Bezeichnung"], td[data-label="Wert"] { display: none; }
  td[data-label="Instrument"] { font-size: 17px; padding-bottom: var(--r1);
    justify-content: flex-start; text-align: left; }
  td[data-label="Instrument"]::before { display: none; }
  td[data-label="Inv.-Nr."] { order: -1; }
  .mit-balken { justify-content: flex-end; }
  .balken { min-width: 60px; }
  .blaettern a { flex: 1; justify-content: center; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #16140f; --karte: #1e1b15; --linie: #322d24; --linie-zart: #272219;
    --text: #f0ebe2; --leise: #a1978b; --holz: #d99b6c; --holz-tief: #eab98f;
    --holz-hell: #3a2a1d; --gut: #7fc79b; --gut-hell: #1e3327;
    --warn: #e0b05a; --warn-hell: #37301c; --rot: #e08b80;
    --schatten: none;
  }
  th { background: var(--karte); }
  .hinweis.fehler { background: #3a201d; border-color: #5c2f29; }
  .hinweis.gut { background: #1e3327; border-color: #2f5540; }
  .marke-zahl { background: #8d2f26; color: #fff; }
  .reiter a.aktiv { color: #1e1b15; }
  .knopf.haupt, button[type=submit].haupt, .formular > button[type=submit] { color: #1e1b15; }
}

/* --- Detailansichten und Formulare ------------------------------------- */
.zurueck { margin: 0 0 var(--r3); }
.zurueck a { color: var(--leise); text-decoration: none; font-size: 14.5px; }
.zurueck a:hover { color: var(--holz); }

.spalten { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--r5); align-items: start; }
.spalten section > h2:first-child { margin-top: 0; }

/* Ein Formular ist kein Datenblatt: Es bekommt eine lesbare Breite, statt sich
   über 1900 px zu spannen. Sonst steht die Beschriftung links außen und das
   Feld endet am anderen Bildschirmrand — und der erklärende Text darunter
   bricht bei 72 Zeichen um, während die Karte weiterläuft. */
.formular { background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--rund-karte); padding: var(--r5); display: grid; gap: var(--r4);
  max-width: 860px; }
.karte.polster { max-width: 900px; }
.karte.polster.weit, .karte.weit { max-width: none; }
.karte.polster .formular { border: 0; padding: 0; background: transparent; box-shadow: none; }
.feld { display: grid; gap: var(--r1); align-content: start; }
/* Felder bekommen die Breite, die ihr Inhalt braucht — nicht alle dieselbe.
   Ein Fälligkeitstag ist zweistellig, eine Straße nicht. */
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: var(--r4); }
.feld.kurz { max-width: 160px; }
.feld.mittel { max-width: 280px; }
.formular button { justify-self: start; }

tr.beendet td { opacity: .55; }
tr.zusatzposten td { background: var(--grund); }
tfoot td { border-top: 2px solid var(--linie); border-bottom: 0;
  padding-top: var(--r3); padding-bottom: var(--r3); font-size: 16px; }
.vertragstext {
  margin: var(--r4) 0 0; padding: var(--r3) var(--r4);
  border-left: 3px solid var(--holz);
  background: var(--grund); border-radius: 0 var(--rund-karte) var(--rund-karte) 0;
  font-size: 14.5px;
}
.protokoll { list-style: none; margin: 0; padding: 0; }
.protokoll li { padding: var(--r3) var(--r4); border-bottom: 1px solid var(--linie-zart);
  display: grid; gap: var(--r1); }
.protokoll li:last-child { border-bottom: 0; }
.protokoll time { font-size: 12.5px; color: var(--leise); font-variant-numeric: tabular-nums; }
.protokoll .wer { font-size: 12.5px; color: var(--holz); font-weight: 600; }
.protokoll .was { font-size: 14px; }

@media (max-width: 900px) { .spalten { grid-template-columns: 1fr; gap: var(--r6); } }

/* --- Vertragsabschluss -------------------------------------------------- */
form.inline { display: inline; margin: 0; }
form.inline button { padding: var(--r2) var(--r3); font-size: 14px; }

.summe { display: flex; gap: var(--r6); flex-wrap: wrap; margin-bottom: var(--r2); }
.summe .titel { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); }
.summe strong { font-size: 22px; }
.summe .gross { font-size: 30px; color: var(--holz); }
.summe { padding-bottom: var(--r3); border-bottom: 1px solid var(--linie-zart); }

.unterschriftfeld { display: grid; gap: var(--r2); justify-items: start; }
#feld-unterschrift {
  width: 100%; height: 200px; background: var(--karte);
  border: 2px dashed var(--linie); border-radius: var(--rund-karte);
  touch-action: none; cursor: crosshair;
}
#abschliessen:disabled { background: var(--linie); color: var(--leise); cursor: not-allowed; }

.unterschrift-anzeige { max-height: 90px; }


/* --- Anmeldung ---------------------------------------------------------- */
body.anmeldeseite { display: grid; place-items: center; min-height: 100vh; }
main.anmeldung { width: min(380px, 92vw); display: grid; gap: var(--r4); }
main.anmeldung .marke { font-size: 20px; text-align: center; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--r5); }
.zweispaltig h3 { font-size: 16px; margin: 0 0 var(--r2); }
fieldset.stueck { border: 1px solid var(--linie); border-radius: var(--rund-karte);
  padding: var(--r4); margin: 0 0 var(--r3); display: grid; gap: var(--r3); }
fieldset.stueck legend { font-weight: 600; padding: 0 var(--r2); }
label.wahl { display: flex; align-items: center; gap: var(--r2); font-weight: 500;
  color: var(--text); }
label.wahl input { width: 20px; height: 20px; flex: none; }
/* Eine Wahlmöglichkeit mit Erläuterung: Der Knopf gehört an die erste Zeile,
   nicht in die Mitte des Blocks — sonst zeigt er auf nichts. */
label.wahl.mehrzeilig { align-items: flex-start; }
label.wahl.mehrzeilig > span { display: grid; gap: var(--r1); }
label.wahl.mehrzeilig .fussnote { margin: 0; font-weight: 400; }

/* Datei auswählen.
   Der eingebaute Wähler beschriftet sich selbst — „Choose File", „No file
   chosen", in der Sprache des Browsers und nicht der Seite. Ändern lässt sich
   dieser Text nicht; ersetzen schon. Läuft JavaScript, wird das Feld
   unsichtbar, bleibt aber im Tabulatorlauf und behält seinen Fokusring über
   die eigene Beschriftung. Ohne JavaScript bleibt der eingebaute Wähler
   stehen — dann ist englische Beschriftung immer noch besser als keine. */
.einlesen { display: grid; gap: var(--r4); }
.beschriftung { font-weight: 500; color: var(--text); }
.nur-js { display: none; }
html.js .nur-js { display: flex; align-items: center; gap: var(--r3);
  flex-wrap: wrap; }
/* Der Bezugsrahmen für das ausgeblendete Feld. Ohne ihn richtete es sich am
   nächsten positionierten Vorfahren aus — und der Browser scrollte beim
   Fokussieren an eine ganz andere Stelle der Seite. */
.dateiwahl { position: relative; }
html.js .dateiwahl > input[type=file] { position: absolute; width: 1px;
  height: 1px; opacity: 0; pointer-events: none; }
.dateiwahl label.knopf { margin: 0; cursor: pointer; }
.dateiwahl input[type=file]:focus-visible + .nur-js label.knopf {
  outline: 2px solid var(--holz); outline-offset: 2px; }
.dateiname { color: var(--leise); overflow-wrap: anywhere; }
.dateiname.gewaehlt { color: var(--text); font-weight: 500; }

/* Ohne JavaScript: der eingebaute Wähler, wenigstens in der Form des Hauses. */
.einlesen input[type=file] { padding: var(--r2); cursor: pointer; }
.einlesen input[type=file]::file-selector-button {
  font: inherit; margin-right: var(--r3); padding: var(--r2) var(--r3);
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--grund); color: var(--text); cursor: pointer; }
.einlesen input[type=file]:hover::file-selector-button { background: var(--linie-zart); }
@media (max-width: 760px) { .zweispaltig { grid-template-columns: 1fr; gap: var(--r5); } }

/* htmx: Rückmeldung während der Suche. Ohne Anzeige wirkt eine Verzögerung
   wie ein Fehler — mit ihr wie Arbeit. */
#ergebnis, #treffer { transition: opacity .12s; }
.htmx-swapping #ergebnis { opacity: .5; }

/* Warteschlange: Zähler in der Navigation und die zwei Handgriffe je Zeile.
   Der Zähler steht nur dort, wo er stört — eine Arbeitsliste, die man
   aufsuchen muss, sieht niemand. */
/* Die Zelle polstert schon; die Handgriffe darin brauchen senkrecht weniger,
   sonst wird die Zeile doppelt so hoch wie die daneben. */
td.taten { display: flex; flex-wrap: wrap; gap: var(--r2); align-items: center;
  padding-top: var(--r2); padding-bottom: var(--r2); }
td.taten form.inline { display: flex; gap: var(--r2); align-items: center; }
td.taten button { white-space: nowrap; }
td.taten input[type=text] { min-width: 11rem; }
@media (max-width: 640px) {
  td.taten { flex-direction: column; align-items: stretch; }
  td.taten form.inline { flex-direction: column; align-items: stretch; }
}



/* --------------------------------------------------------------------------
   Nachträge aus der Oberflächenprüfung
   -------------------------------------------------------------------------- */

/* Statusmarken für alle sechs Zustände, die die Datenbank kennt. Vorher gab es
   zwei, und „Werkstatt", „Reserviert", „Verkauft" und „Ausgemustert" wurden
   allesamt als „Verfügbar" angezeigt — die Liste sagte dem Kunden ein
   Instrument zu, das in der Werkstatt lag. */
.marke-status.verfuegbar   { background: var(--gut-hell); color: var(--gut); }
.marke-status.verliehen    { background: var(--holz-hell); color: var(--holz-tief); }
.marke-status.werkstatt    { background: #efe6d8; color: #7a5320; }
.marke-status.reserviert   { background: #e6ecf5; color: #35507d; }
.marke-status.verkauft     { background: #ecebea; color: var(--leise); }
.marke-status.ausgemustert { background: #ecebea; color: var(--leise); }


@media (prefers-color-scheme: dark) {
  .marke-status.werkstatt  { background: #3b3020; color: #e2c48d; }
  .marke-status.reserviert { background: #26303f; color: #adc4e6; }
  .marke-status.verkauft, .marke-status.ausgemustert { background: #2a2724; color: #a29b91; }
}

/* Stand einer Sendung in der Warteschlange. Dieselbe Form wie die
   Artikelzustände, eigene Farben — „braucht Hilfe" muss auffallen. */
.marke-status.bereit { background: var(--holz-hell); color: var(--holz-tief); }
.marke-status.laeuft { background: var(--warn-hell); color: var(--warn); }
.marke-status.erledigt { background: var(--gut-hell); color: var(--gut); }
.marke-status.fehlgeschlagen { background: var(--warn-hell); color: var(--warn); }
.marke-status.braucht_mensch { background: #fbeceb; color: var(--rot); }

/* Eine Zwischenüberschrift, die auf ein Formular folgt, braucht Luft nach
   oben — sonst liest sie sich wie eine Beschriftung des Knopfes darüber. */
h3.abgesetzt { margin-top: var(--r5); padding-top: var(--r4);
  border-top: 1px solid var(--linie-zart); }

/* Werkstatteinstellungen. Das Sternchen an den Feldern, die im Vertrag
   stehen — bei den übrigen ist Leerlassen eine gültige Antwort. */
.pflicht { color: var(--rot); font-weight: 600; }
.platzhalter { margin: 0 0 var(--r4); }
.platzhalter summary { cursor: pointer; font-weight: 500; padding: var(--r2) 0; }
.platzhalter table { margin: var(--r2) 0; }
.platzhalter td { padding: var(--r1) var(--r3) var(--r1) 0; border: 0; }
.platzhalter code { background: var(--grund); padding: 1px var(--r-symbol);
  border-radius: var(--r1); }
.logo-vorschau { max-height: 64px; max-width: 100%; display: block;
  border: 1px solid var(--linie); border-radius: var(--rund);
  padding: var(--r2); background: #fff; }

/* Ein Formular, das selbst Karten enthält, darf keine Karte sein — sonst
   steht eine Karte in einer Karte und der Blick findet keinen Rand mehr.
   Der Name ist mit Bedacht nicht „offen": Das gibt es schon als Statusmarke
   für unbezahlte Posten, und die Farbe färbte prompt die Überschriften. */
.formular.rahmenlos { background: transparent; border: 0; padding: 0;
  box-shadow: none; display: grid; gap: 0; max-width: none; }
/* Eine IBAN steht in Vierergruppen: 27 Zeichen, die nicht abreißen dürfen. */
.feld.breit { max-width: 420px; }
/* Vier kurze Beträge nebeneinander statt drei plus einer. */
.feld-paar.schmal { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }

/* Zweiter Faktor. Der Code wird abgetippt, während man ihn vom Telefon
   abliest — große Ziffern mit Abstand sind hier kein Zierrat. */
.codefeld { font-size: 24px; letter-spacing: .18em; text-align: center;
  font-variant-numeric: tabular-nums; }
label.wahl.bleiben { align-items: flex-start; font-weight: 500; }
label.wahl.bleiben > span { display: grid; gap: var(--r1); }
label.wahl.bleiben .fussnote { margin: 0; font-weight: 400; }

/* Eigener Zugang. Die Notfallcodes werden abgeschrieben, nicht angeklickt.
   Darum nummeriert — man muss sagen können „den dritten habe ich benutzt" —
   und mit fester Zeichenbreite. Vor allem aber nie ein Umbruch mitten im
   Code: ein Bindestrich am Zeilenende ist beim Abschreiben nicht von einer
   Silbentrennung zu unterscheiden. Da alle Codes gleich lang sind, umschließt
   die Fläche den Code, statt die Rasterzelle zu füllen — das ergibt gleiche
   Kästchen ohne eine einzige Breitenangabe. */
.notfallcodes { list-style: none; counter-reset: nfc; padding: 0;
  margin: var(--r4) 0; display: grid; gap: var(--r2) var(--r4);
  grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
  justify-items: start; }
.notfallcodes li { counter-increment: nfc; display: flex;
  align-items: baseline; gap: var(--r-symbol); }
.notfallcodes li::before { content: counter(nfc) "."; flex: none;
  min-width: 1.4em; text-align: right; color: var(--leiser);
  font-size: 12.5px; font-variant-numeric: tabular-nums; }
.notfallcodes code { flex: none; white-space: nowrap; user-select: all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px;
  background: var(--grund); border: 1px solid var(--linie-zart);
  padding: var(--r2) var(--r3); border-radius: var(--rund); }

/* Der TOTP-Schlüssel wird abgetippt, wenn das Antippen nicht geht. Er darf
   umbrechen — aber nur zwischen den Vierergruppen, und die trennt ein
   Leerzeichen. */
.geheimnis { display: inline-block; user-select: all;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 16px;
  letter-spacing: .04em; background: var(--grund);
  padding: var(--r2) var(--r3); border-radius: var(--rund); }

/* Auf Papier druckt der Browser die Flächen nicht mit — ohne Rahmen stünden
   die Codes konturlos auf dem Blatt. */
@media print {
  .notfallcodes code { background: #fff; border-color: #999; }
}
.schritte { margin: 0; padding-left: var(--r5); display: grid; gap: var(--r5); }
.schritte > li { padding-left: var(--r1); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: var(--r3); }
button.gefahr { color: var(--rot); border-color: var(--linie); }
button.gefahr:hover { background: var(--holz-hell); }