:root {
  --bg: #f5f2ec;
  --card: #fffdfa;
  --text: #1f1e1b;
  --muted: #7b766d;
  --line: #d7d0c5;
  --soft: #ded6ca;
  --soft-strong: #cfc4b5;

  /* ── Akzent, Gut, Warnung (28.09.2026) ─────────────────────────────────
     Die Grundpalette hatte bis hierher keinen Akzent, kein Grün und kein
     Rot; wer eines brauchte, griff zu den `--rueck-*`-Werten darunter. Das
     ist falsch: dieser Namensraum ist der VERTRAG der Rückmeldemaske (siehe
     Kopf von `rueckmeldung.js`). Wer ihn von aussen mitbenutzt, macht aus
     einer Umbenennung dort einen Schaden hier – genau die stille Sorte.
     Darum drei eigene Namen mit denselben Werten; die Maske behält ihre.
     Erster Abnehmer: die gemeinsame Kopieranzeige
     `tools/plattensicherung/fortschritt.py`. */
  --akzent: #8a6d3b;                /* gebranntes Ocker */
  --auf-akzent: #fffdfa;
  --gut: #5c7a4a;                   /* gedecktes Grün statt Signalgrün */
  --warn: #a4443a;

  /* ── Rückmeldemaske ────────────────────────────────────────────────────
     Die Maske liegt in `runtime/rueckmeldung/` und gehört keinem Organ. Sie
     trägt die FUNKTION; das Aussehen kommt von hier. Ohne diese neun Werte
     fiele sie auf die Farben des Trader-Cockpits zurück — dunkel, auf
     warmem Papier. Der Namensraum ist der Vertrag, siehe den Kopf von
     `rueckmeldung.js`. */
  --rueck-flaeche: var(--card);
  --rueck-flaeche2: #f2eee6;
  --rueck-linie: var(--line);
  --rueck-schrift: var(--text);
  --rueck-still: var(--muted);
  --rueck-akzent: #8a6d3b;          /* gebranntes Ocker, aus der Haus-Palette */
  --rueck-auf-akzent: #fffdfa;      /* auf dunklem Ocker helle Schrift */
  --rueck-senden: #5c7a4a;          /* gedecktes Grün statt Signalgrün */
  --rueck-auf-senden: #fffdfa;
  --rueck-warn: #a4443a;
  --rueck-schatten: rgba(58, 48, 34, .16);
  --rueck-abdunkler: rgba(58, 48, 34, .34);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* ── Kopfbereich ───────────────────────────────────────────────────────────
   Verdichtet am 10.08.2026 auf Simons Rückmeldung: „Der Kopfbereich kostet
   zu viel. Hier ist eine Verdichtung möglich und auch nötig."

   Gemessen bei 1661x918, Startseite: vom Seitenanfang bis zur ersten
   Kennzahl 185 px, davon 89 px allein der Kopf. Ein Titel mit 40 px ist
   grösser als jede Zahl, die darunter steht – er ruft lauter als das,
   worum es geht.

   Zuerst als Zusatzklasse `.hero-dicht` nur auf der Startseite gebaut, weil
   diese Datei die gemeinsame Handschrift des Hauses trägt (ERP, Cockpit,
   konZENtration, CAD). Simon hat den Ausrollentscheid am selben Tag
   getroffen; damit wurde aus der Ausnahme die Regel und die Zusatzklasse
   ist wieder verschwunden. Nachgemessen: 80 Vorlagen im ERP setzen `.hero`,
   ausserhalb des ERP setzt es niemand – die anderen Organe bringen ihre
   eigenen Kopfbereiche mit.

   Vier Werte, die zusammen ~33 px sparen. Die Geschwisterregel unten hält
   die Augenbraue am Titel, gleich ob sie darüber steht (75 Vorlagen) oder
   darunter (Startseite, wo sie den Mandanten trägt). */

.hero {
  margin-bottom: 14px;
}

.hero h1 {
  font-size: clamp(20px, 2.2vw, 26px);
}

.hero .eyebrow {
  margin: 0;
  font-size: 11px;
}

.hero .eyebrow + h1,
.hero h1 + .eyebrow {
  margin-top: 3px;
}

.hero .context-line {
  margin-top: 6px;
}

.hero .hero-actions {
  margin-top: 8px;
}

/* ── Kopfleiste: Titel links, Handgriffe der Seite rechts ──────────────────
   Simon, 10.08.2026, drei Meldungen zur Offertenseite auf einmal:
   „Kopfbereich verwenden für die Subnavi also ‚neue Offerte', usw.",
   „BE PURE ERP an die Seite nehmen um Platz zu gewinnen" und – zum
   Knopf „+ Offerte" oben in der Menüzeile – „Völlig falsche
   Positionierung. Das hat im Menüband nichts zu suchen."

   Er hat damit recht in der Sache: die Menüzeile führt durch das ganze
   Haus, sie ist kein Ort für den Handgriff EINER Seite. Der gehört an
   die Seite, und zwar dorthin, wo das Auge nach dem Titel hinwandert.

   Die Augenbraue steht hier neben dem Titel auf derselben Grundlinie
   statt darunter – das spart die ganze Zeile, statt sie zu verkleinern. */

.hero-leiste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.hero-titel {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-titel .eyebrow,
.hero-leiste .hero-titel .eyebrow {
  margin: 0;
}

.hero-navi {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── Hausmarke am Blattrand ────────────────────────────────────────────────
   Simon, 11.08.2026, mit einem Pfeil im Bildschirmfoto: „BE PURE ERP an die
   Seite nehmen um Platz zu gewinnen" heisst AN DEN RAND, senkrecht – nicht
   neben den Titel. Das war meine Fehllesung; er hat es dann gezeigt statt
   noch einmal geschrieben.

   Der Unterschied ist nicht Geschmack: neben dem Titel bleibt die Marke ein
   Textbaustein, der auf jeder Seite mitgelesen werden will. Am Rand ist sie
   Briefpapier – sie sagt, wo man ist, ohne sich in die Reihenfolge des
   Lesens zu drängen. Und sie kostet im Satzspiegel null Höhe.

   Liegt im weissen Rand neben dem Satzspiegel (`.shell` ist 1120 px breit).
   Wird der Rand zu schmal, verschwindet sie, statt in den Inhalt zu ragen –
   1240 px ist die Grenze, ab der beidseits 60 px bleiben.

   `pointer-events: none`, weil eine Zierde niemals einen Klick abfangen
   darf, und im Druck ist sie weg: dort trägt das Papier die Marke. */

.hausmarke {
  position: fixed;
  top: 104px;
  /* Am Satzspiegel statt am Fensterrand: `.shell` ist 1120 px breit und
     mittig, also endet sie bei 50 % + 560 px. Simon, 11.08.2026: „auch näher
     an den Contentbereich setzen." Am Fensterrand wandert die Marke bei
     jedem breiteren Bildschirm weiter weg vom Text, zu dem sie gehört. */
  left: calc(50% + 560px + 14px);
  /* Von UNTEN nach OBEN zu lesen. Simon, 11.08.2026: „Europäer lesen solche
     Beschriftungen von unten nach oben, was dem Lesefluss von links nach
     rechts entspricht."

     Er hat recht, und es ist mehr als Gewohnheit: die aufsteigende Zeile
     beginnt unten links und endet oben rechts — dieselbe Richtung, in der
     hier auch die Zeile läuft. `vertical-rl` allein dreht die Buchstaben im
     Uhrzeigersinn und liest sich von oben nach unten; die Drehung um 180°
     kehrt beides um. Das ist auch die Richtung, in der Buchrücken im
     deutschsprachigen Raum gesetzt werden. */
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  /* Grösse nach Simons Handskizze gesetzt, nicht daran gemessen – eine
     Annotation ist keine Massangabe. Wer sie anders will: dieser eine Wert. */
  font-size: 26px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .45;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

@media (max-width: 1240px) {
  .hausmarke { display: none; }
}

@media print {
  .hausmarke { display: none; }
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 0;
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 400;
  /* War -0.045em: bei 40px sind das 1,8px NEGATIV je Abstand — Buchstaben
     schieben sich ineinander, „Geschäftsjahre" wird zum Klumpen. Simon hat
     es mehrfach gemeldet. Jetzt leicht offen statt eng. */
  letter-spacing: 0.01em;
}

h2 {
  margin: 0;
  font-size: 21px;
  font-weight: 400;
}

.action {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.action:hover {
  background: #f0ede8;
}

/* Aufgabe 42: „alle dunkleren grauhintergründe raus" – auch hier. Nach dem
   Entfärben der Knöpfe war dies die letzte graue Fläche im Bild und stach als
   einziger Kasten heraus. Der Vorrang der Hauptaktion trägt sich jetzt über
   Fettung und einen kräftigeren Rahmen statt über Farbe. */
.action.primary {
  background: transparent;
  border-color: var(--text);
  font-weight: 600;
}

.action.secondary {
  color: var(--muted);
}

.action.danger {
  color: #b33;
  border-color: #ecc;
}

.action.danger:hover {
  background: #fef0f0;
}

.metrics {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 22px;
}

.metrics article {
  min-height: 86px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255,255,255,.58);
}

.metrics span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.metrics strong {
  display: block;
  margin-top: 12px;
  font-size: 28px;
  font-weight: 400;
  /* Zahlen brauchen Luft, nicht Enge — hier standen -0.03em. */
  letter-spacing: 0.005em;
}

/* Eine Kennzahl, die in ihre Herleitung führt. Der ganze Kachelinhalt ist
   die Fläche, nicht ein kleines „Details"-Wort daneben. */
.metrics .metric-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Beschriftung und Hinweis auf EINER Zeile, der Hinweis rechts. Erst stand
   der Hinweis als dritte Zeile darunter und kostete 22 px — wovon der
   verdichtete Kopf nur 29 px gespart hatte. Simon: „Diesen Bereich kannst Du
   auch noch schmaler machen, wenn du ‚27 Rechnungen – aufschlüsseln'
   rechtsbündig auf die gleiche Zeile wie ‚Offene Rechnungen' nimmst." */
.metrics .metric-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.metrics .metric-kopf small {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--muted);
}

.metrics .metric-link strong {
  margin-top: 8px;
}

.metrics .metric-link:hover .metric-kopf small {
  color: var(--text);
}

.grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 18px;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  min-height: 260px;
}

/* Die Mindesthöhe von 260 px hält die drei Spalten eines Rasters auf
   gleicher Höhe. Ein Panel, das nur zwei Sätze trägt, bekommt dadurch ein
   leeres Feld von Handbreite untergeschoben – dafür diese Abwahl. */
.panel-notiz {
  min-height: 0;
}

/* Überschrift und Anzahl auf EINER Zeile, die Anzahl rechts. Vorher war
   das ein Block, wodurch die Anzahl als eigene Zeile unter der Überschrift
   stand — Simon, 10.08.2026: „Anzahl der Offerten rechts neben ‚Alle
   Offerten', dann gewinnen wir auch hier Platz." */
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-subhead {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.activity {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.activity:last-child {
  border-bottom: none;
}

.activity strong,
.activity span,
.activity small {
  display: block;
}

.activity span {
  margin-top: 5px;
}

.activity small {
  margin-top: 5px;
  color: var(--muted);
}

.activity-right {
  text-align: right;
  white-space: nowrap;
}

.activity-right em {
  display: inline-block;
  margin-top: 6px;
  font-style: normal;
  font-size: 13px;
}

.ok { color: #526f47; }
.warn { color: #9a6522; }

/* ── Beleg-Karte ───────────────────────────────────────────────────────────
   Löst `.activity` auf dem ERP-Dashboard ab. `.activity` ist ein zweispaltiges
   Raster (1fr auto) und trägt nur in breiten Panels; in der 287 px schmalen
   Dashboard-Spalte blieben der linken Seite 153 px, worauf jede Zeile umbrach
   – auch das Datum mitten hindurch („2026-" / „05-31"). Gemessen am
   10.08.2026 bei 1661x918.

   Die Karte ist deshalb EINSPALTIG und ordnet in Zeilen statt Spalten. Nur
   die Kopfzeile ist zweigeteilt, und nur sie darf es sein: der Betrag steht
   rechts mit `flex: 0 0 auto`, damit im Zweifel die Nummer weicht und nicht
   die Zahl.

   `.activity` bleibt bestehen – Aufträge, Postfach und Scout-Cockpit setzen
   es in breiten Panels ein, dort ist es richtig. */

.beleg-liste {
  display: grid;
  gap: 2px;
  padding-top: 6px;
}

.beleg {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.beleg:last-child {
  border-bottom: none;
}

.beleg-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.beleg-nummer {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.beleg-nummer:hover {
  border-bottom-color: currentColor;
}

.beleg-betrag {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.beleg-kunde,
.beleg-sache,
.beleg-fuss {
  margin: 4px 0 0;
}

.beleg-sache,
.beleg-fuss {
  font-size: 13px;
  color: var(--muted);
}

/* Ein Datum ist EINE Angabe und wird nicht zerrissen. Gilt in der Karte
   ebenso wie in der Tabelle — in der Rechnungsliste stand am 11.08.2026
   „2026-05-" ueber „31", derselbe Bruch wie zuvor auf dem Dashboard. */
.beleg-datum,
.datum-zelle,
.betrag-zelle {
  white-space: nowrap;
}

/* Ein Betrag ist wie ein Datum EINE Angabe, kein Satz: „CHF" gehoert zur
   Zahl. Ziffern zusaetzlich auf gleiche Laufweite, damit die Spalte eine
   Kante bildet statt zu flimmern. */
.betrag-zelle {
  font-variant-numeric: tabular-nums;
}

.beleg-fuss em {
  margin-left: 8px;
  font-style: normal;
}

.beleg-handgriffe {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.empty {
  color: var(--muted);
}

/* Ein Merksatz über einer Liste: woran man ist, in einem Satz, auf der linken
   Achse. Stand bis 02.10.2026 nur lokal in offer_trash.html; seit die
   abgeschlossenen Offerten denselben Satzbau brauchen, steht die Regel hier
   einmal statt zweimal. Rein additiv – keine bestehende Klasse wird berührt. */
.merksatz {
  margin: 0 0 18px;
  padding: 2px 0 2px 12px;
  font-size: 14px;
  line-height: 1.55;
  border-left: 2px solid var(--line);
  color: var(--muted);
  max-width: 70ch;
}

.task-list {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.task-card {
  display: grid;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.task-card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.task-main {
  display: grid;
  gap: 6px;
}

.task-main strong,
.task-main small {
  display: block;
}

.task-main small {
  color: var(--muted);
  line-height: 1.35;
}

.task-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.priority {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 7px;
  border: 1px solid #9aad8d;
  border-radius: 6px;
  color: #526f47;
  font-style: normal;
  font-size: 12px;
  white-space: nowrap;
}

.priority.high {
  border-color: #c79463;
  color: #9a6522;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.compact-task-list .task-card {
  padding-bottom: 12px;
}

@media (max-width: 860px) {
  .actions,
  .metrics,
  .grid {
    grid-template-columns: 1fr;
  }
}

.doc-link {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.52);
  text-decoration: none;
  font-size: 12px;
}

.doc-link:hover {
  border-color: var(--soft-strong);
  background: var(--soft);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.offer-form {
  display: grid;
  gap: 18px;
}

.context-line {
  margin: 12px 0 0;
  color: var(--muted);
}

.small-context {
  margin-top: 6px;
  font-size: 14px;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.compact-grid {
  grid-template-columns: 1fr minmax(180px, .32fr);
}

.field {
  display: grid;
  gap: 8px;
}

.field span {
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea,
button {
  font: inherit;
}

/* Ankreuzfelder und Auswahlknöpfe sind KEINE Eingabefelder — sie wollen ihre
   natürliche Grösse. Ohne diese Ausnahme wird jede Checkbox 100 % breit und
   42 px hoch und drückt den Text neben sich zu einer Buchstabenkolonne
   zusammen. Gefunden am 10.08.2026 beim ersten Gast dieses Bausteinkastens;
   betroffen waren auch fünf ERP-Vorlagen, in denen es bis dahin niemandem
   aufgefallen war. */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffefa;
  color: var(--text);
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid rgba(82, 111, 71, .22);
  border-color: #8fa282;
}

textarea {
  resize: vertical;
}

.mail-grid {
  grid-template-columns: minmax(240px, .55fr) 1fr;
}

.mail-layout {
  grid-template-columns: .95fr 1fr 1fr;
}

.mail-capture {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.proof-upload {
  display: grid;
  gap: 12px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid var(--line);
}

.order-summary strong {
  font-size: 20px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.order-grid {
  grid-template-columns: .9fr 1.15fr .95fr .95fr;
}

.flow-panel {
  margin-bottom: 18px;
}

.next-step {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}

.flow-steps {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding-top: 16px;
}

.flow-step {
  min-height: 78px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.42);
}

.flow-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  font-size: 12px;
}

.flow-step strong {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.25;
}

.flow-step.done {
  border-color: #9aad8d;
  background: #f2f7ee;
}

.flow-step.done span {
  border-color: #9aad8d;
  color: #526f47;
}

.timeline-panel {
  min-height: 360px;
}

.timeline {
  display: grid;
  gap: 14px;
  padding-top: 16px;
}

.timeline-item {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.timeline-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.timeline-item strong,
.timeline-item span,
.timeline-item small {
  display: block;
}

.timeline-item span,
.timeline-item small,
.link-row span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.timeline-item p {
  margin: 0;
  line-height: 1.45;
}

.link-list {
  display: grid;
  gap: 12px;
  padding-top: 16px;
}

.link-row {
  display: grid;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.link-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.attachment-line {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* Der Dateiname ist der Verweis und trägt deshalb das Gewicht; der Pfad
   darunter ist nur Herkunftsangabe und bleibt leise. */
.attachment-line a {
  color: var(--text);
  font-weight: 600;
  text-decoration: underline;
}

.attachment-line .anhang-pfad {
  display: block;
  margin-top: 2px;
  font-size: 12px;
}

.notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #9aad8d;
  border-radius: 9px;
  background: #f2f7ee;
  color: #526f47;
}

.notice p {
  margin: 0;
}

.notice--success {
  border-color: #3a7d4a;
  background: #e6f3e9;
  color: #1f5a2e;
}

.notice--error {
  border-color: #c94a4a;
  background: #fdeaea;
  color: #8a2e2e;
}

/* ── Flash-Meldungen (flash / flash-success / flash-error) ───────────────
   Nachgezogen 27.07.2026: mehrere Templates (discovery_review,
   discovery_job_new, discovery_jobs, Bewerbungen) geben Flash-Meldungen mit
   diesen Klassen aus, im Stylesheet fehlten sie jedoch komplett — die
   Meldungen erschienen als unformatierter Text. Optik bewusst identisch zu
   .notice, damit das ERP einheitlich bleibt. */
.flash {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #9aad8d;
  border-radius: 9px;
  background: #f2f7ee;
  color: #526f47;
  font-size: 14px;
}

.flash-success {
  border-color: #3a7d4a;
  background: #e6f3e9;
  color: #1f5a2e;
}

.flash-error {
  border-color: #c94a4a;
  background: #fdeaea;
  color: #8a2e2e;
}

.safety-notice {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #c79463;
  border-radius: 9px;
  background: #fff6ed;
  color: #784710;
}

.safety-notice p {
  margin: 0;
}

.disabled-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.35);
  font-size: 14px;
  white-space: nowrap;
}

.as-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.items-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.panel-head.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* Simon, Aufgabe 42 (12.07.2026): „nimm alle unterstreichungen und dunkleren
   grauhintergründe (z.b. Scout-Cockpit <Mail versenden>) raus." Der Knopf trug
   bis zum 08.09.2026 var(--soft) = #ded6ca als Fläche; jetzt trägt ihn allein
   der Rahmen, die Tönung kommt erst beim Überfahren als Rückmeldung. Gilt für
   das ganze Haus – diese Datei bedient ERP, Cockpit und konZENtration. */
.small-button,
.submit-button {
  border: 1px solid var(--soft-strong);
  border-radius: 7px;
  color: var(--text);
  background: transparent;
  /* Gemessen am 08.09.2026: als <a> war der Knopf bis hierher UNTERSTRICHEN –
     die Linie kam vom Browser-Standard, nicht aus dieser Datei. Das blosse
     Streichen einer underline-Regel genügt nicht, `none` muss dastehen.
     Genau dieser Knopf war Simons Beispiel in Aufgabe 42. */
  text-decoration: none;
  cursor: pointer;
}

.small-button:hover,
.submit-button:hover {
  background: #f0ede8;
}

.small-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 14px;
}

.item-table {
  display: grid;
  gap: 10px;
  padding-top: 16px;
}

.item-head,
.item-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.1fr) minmax(260px, 1.35fr) minmax(88px, .42fr) minmax(110px, .48fr);
  gap: 10px;
  align-items: center;
}

.item-head.invoice-head,
.item-row.invoice-row {
  grid-template-columns: minmax(210px, 1.1fr) minmax(260px, 1.35fr) minmax(88px, .42fr) minmax(110px, .48fr) minmax(72px, .32fr);
}

.item-head {
  color: var(--muted);
  font-size: 13px;
}

.source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: rgba(255,255,255,.5);
  font-size: 13px;
  white-space: nowrap;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.submit-button {
  min-height: 44px;
  padding: 0 16px;
}

.error-list {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid #c79463;
  border-radius: 9px;
  background: #fff6ed;
  color: #784710;
}

.error-list p {
  margin: 0;
}

@media (max-width: 980px) {
  .form-grid,
  .compact-grid,
  .mail-grid,
  .mail-layout,
  .order-grid,
  .flow-steps,
  .item-head,
  .item-row,
  .item-head.invoice-head,
  .item-row.invoice-row {
    grid-template-columns: 1fr;
  }

  .item-head {
    display: none;
  }

  .item-row {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
  }

  .item-row:last-child {
    border-bottom: none;
  }
}

@media (max-width: 620px) {
  .shell {
    padding: 34px 16px;
  }

  .page-head,
  .form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .back-link,
  .submit-button,
  .small-button,
  .disabled-action,
  .header-actions {
    justify-content: center;
    width: 100%;
  }
}

/* ── Customer Search (AJAX) ─────────────────────────────────── */
.customer-search-wrapper {
  position: relative;
}

#customer-search {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font-size: 14px;
}

#customer-search.is-selected {
  border-color: #4a8a4a;
  background: #f0f8f0;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-height: 320px;
  overflow-y: auto;
}

.search-result-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--soft);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-item:last-child {
  border-bottom: none;
}

.search-result-item:hover {
  background: #f0edf0;
}

.search-result-item strong {
  font-size: 14px;
}

.search-result-item small {
  font-size: 12px;
  color: var(--muted);
}

.search-result-item.empty {
  cursor: default;
  color: var(--muted);
  font-size: 13px;
}

/* Aufgabe 42: „ich mag keine unterstrichenen links." Erkennbar bleibt der Link
   über Gewicht statt Linie – auch im Fliesstext. */
.search-result-item.empty a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* ── Data Table ────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--soft);
  font-size: 14px;
  vertical-align: middle;
}

.data-table tbody tr:hover {
  background: #faf7f3;
}

.cell-actions {
  white-space: nowrap;
  text-align: right;
}

.cell-actions .doc-link {
  margin-left: 8px;
}

/* ── Data List (definition list) ───────────────────────────── */
.data-list {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 4px 12px;
}

.data-list dt {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  padding: 8px 0;
}

.data-list dd {
  margin: 0;
  padding: 8px 0;
  font-size: 14px;
  line-height: 1.5;
}

/* ── Search Form ───────────────────────────────────────────── */
.search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.search-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  background: var(--card);
}

/* ── Tab Bar ────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  background: var(--card);
  border-radius: 8px 8px 0 0;
  padding: 0 4px;
  position: relative;
}

.tab-group {
  display: flex;
  gap: 2px;
}

.tab {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  text-decoration: none;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}

.tab:hover {
  color: var(--text);
}

.tab.active {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.tab-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.tab-action {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  background: var(--soft);
  border: 1px solid var(--soft-strong);
  border-radius: 5px;
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

/* Angemeldete Identität in der Aktionsleiste: dezent, kein Knopf. Führt zum
   Kennwort-Ändern. */
.tab-user {
  display: inline-block;
  padding: 6px 4px 6px 12px;
  font-size: 12px;
  color: var(--muted);
  border-left: 1px solid var(--line);
  margin-left: 4px;
  text-decoration: none;
}
.tab-user:hover { color: var(--text); }

.tab-action:hover {
  background: var(--soft-strong);
}

/* ── Nav Dropdown (Fadeout-Submenü, Menüzeile-Aufräumen) ──────── */
/* Jede .nav-group ist ein Top-Level-Menüpunkt mit optionalem
   Fadeout-Dropdown darunter - rein CSS (:hover/:focus-within), damit
   auch Bereiche wie Scout Tracker/Kanban/Postausgang erreichbar sind,
   ohne die Kopfzeile mit Einzel-Links zu ueberladen. */
.nav-group {
  position: relative;
}

.nav-group.active > .tab {
  color: var(--text);
  border-bottom-color: var(--text);
  font-weight: 600;
}

.nav-group .tab {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-caret {
  font-size: 9px;
  opacity: .6;
  transform: translateY(1px);
}

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
  box-shadow: 0 10px 24px rgba(31,30,27,0.10);
  padding: 6px 0;
  margin-top: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: 60;
}

.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown-item:hover {
  background: #f0ede8;
}

.nav-dropdown-item.active {
  font-weight: 600;
  color: var(--text);
}

/* ── Nav-Link (schlichter Navigations-Link ohne Box/Unterstrich) ──
   Fuer reine Seitenwechsel-Links (z.B. "Mail versenden", "Tracking
   Console", "Details") - im Unterschied zu echten Formular-Aktionen
   (.submit-button/.action als <button>), die weiterhin wie Buttons
   aussehen sollen. */
.nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  padding: 2px 0;
  border: none;
  background: none;
}

.nav-link:hover {
  color: var(--text);
}


/* ── Modal (Task-Termin) ────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.35);
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  min-width: 340px;
  max-width: 480px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.modal-box h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.modal-box label {
  display: block;
  margin-bottom: 12px;
}

.modal-box label span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  color: var(--muted);
}

.modal-box input,
.modal-box textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 14px;
  font-family: inherit;
  background: var(--card);
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ── Task Status Badge ─────────────────────────────────────── */
.task-status-badge {
  display: inline-block;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--soft);
  color: var(--muted);
  margin-left: auto;
  text-transform: lowercase;
}

/* ── Task Done Button ──────────────────────────────────────── */
.task-done-btn {
  display: inline-block;
  padding: 4px 10px;
  font-size: 11px;
  background: #e6f3e9;
  border: 1px solid #b8d9c2;
  border-radius: 4px;
  color: #3a7d4a;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}

.task-done-btn:hover {
  background: #d0ebd6;
  border-color: #8fc8a0;
}

/* ── Task Checklist ─────────────────────────────────────────── */
.task-checklist {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.checklist-item {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.checklist-box {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  line-height: 1;
  color: var(--muted);
  font-family: inherit;
}

.checklist-box.checked {
  color: #4a8a4a;
}

.checklist-text {
  font-size: 12px;
  color: var(--text);
}

.checklist-text.done {
  color: var(--muted);
  text-decoration: line-through;
}

/* ── Inline Form ───────────────────────────────────────────── */
.inline-form {
  display: inline;
}

/* Aufgabe 42: keine Unterstreichung. Das Rot trägt den Lösch-Link allein. */
.link-delete {
  background: none;
  border: none;
  color: #b33;
  cursor: pointer;
  font-size: 13px;
  padding: 0;
  text-decoration: none;
  font-family: inherit;
}

.link-delete:hover {
  color: #d44;
}

/* ── Hero Actions ──────────────────────────────────────────── */
.hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* ── Count badge ───────────────────────────────────────────── */
.count {
  font-size: 13px;
  color: var(--muted);
  background: var(--soft);
  padding: 2px 10px;
  border-radius: 12px;
}

/* ── Locked hint tooltip ───────────────────────────────────── */
.locked-hint {
  position: relative;
}

.locked-hint::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #1f1e1b;
  color: #fffdfa;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 5px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}

.locked-hint:hover::after {
  opacity: 1;
}

/* ── Field hint ────────────────────────────────────────────── */
.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

/* Aufgabe 42: Gewicht statt Linie, auch im Hinweistext. */
.field-hint a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

/* ── Loading Overlay (Chat-Offerte) ────────────────────────── */
.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(31, 30, 27, 0.55);
  align-items: center;
  justify-content: center;
}

.loading-overlay.open {
  display: flex;
}

.loading-box {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 32px 40px;
  min-width: 280px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.18);
  display: grid;
  gap: 12px;
  justify-items: center;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--soft);
  border-top-color: var(--muted);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-box strong {
  font-size: 16px;
  font-weight: 600;
}

.loading-box span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

/* ── Chat-Offerte ──────────────────────────────────────────── */

.chat-form {
  display: grid;
  gap: 18px;
}

.chat-panel {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.chat-label span {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
}

.chat-panel textarea {
  width: 100%;
  min-height: 120px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fffefa;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.5;
  resize: vertical;
}

.chat-panel textarea:focus {
  outline: 2px solid rgba(82, 111, 71, .22);
  border-color: #8fa282;
}

.chat-hint {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.chat-result {
  margin-bottom: 20px;
}

.chat-result h2 {
  margin: 6px 0 14px;
  font-size: 22px;
}

.result-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-bottom: 16px;
}

.result-details span {
  font-size: 14px;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chat-tips {
  margin-top: 20px;
}

.chat-tips .panel h2 {
  font-size: 16px;
  margin-bottom: 12px;
  color: var(--muted);
}

.tip-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tip-example {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,255,255,.42);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.tip-example:hover {
  border-color: var(--soft-strong);
  background: var(--soft);
}

.tip-example pre {
  margin: 0;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  color: var(--text);
}

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

/* ─── Scout Cockpit ──────────────────────────────────────────────────── */

.scout-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 20px;
}


.scout-player-card {
  display: flex;
  flex-direction: column;
}

.scout-player-meta {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
}

.scout-player-meta p {
  margin: 2px 0;
}

.scout-player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
}

.scout-player-actions .submit-button,
.scout-player-actions .back-link {
  font-size: 13px;
  padding: 6px 12px;
}

.scout-campaigns {
  border-top: 1px solid var(--line);
}

.scout-campaigns summary {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
}

.scout-campaigns summary:hover {
  color: var(--text);
}

.scout-campaigns .activity-list {
  padding: 0 16px 12px;
}

.scout-campaigns .activity {
  font-size: 13px;
}

/* ─── Mail-Status-Farben ──────────────────────────────────────────────── */

.status-ok {
  color: #3a7d4a;
  font-weight: 500;
}

.status-warn {
  color: #b8860b;
  font-weight: 500;
}

.success-badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 6px;
  background: #e6f3e9;
  color: #3a7d4a;
  font-size: 14px;
  font-weight: 500;
}

.info-badge {
  display: inline-flex;
  padding: 6px 14px;
  border-radius: 6px;
  background: #e8f0fe;
  color: #1a5bb5;
  font-size: 14px;
  font-weight: 500;
}

.error-text {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #c0392b;
}

.activity-list .activity .ok {
  color: #3a7d4a;
  font-weight: 500;
}

.activity-list .activity .warn {
  color: #b8860b;
  font-weight: 500;
}

.activity-list .activity .error {
  color: #c0392b;
  font-weight: 500;
}

/* Adressbuch: Rollen-Badges (Kunde / Scout-Zielverein) */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  background: #eef3ee;
  color: #3a7d4a;
  border: 1px solid #cfe0cf;
}
/* Zustands-Chips: offen traegt Farbe, abgeschlossen ist zurueckgenommen.
   Simon: „abgeschlossen und offen duerfen nicht die gleiche farbe besitzen.
   abgeschlossen muesste ausgegraut sein. gruen ausgegraut denn es ist ja
   nichts haengig oder fehlerhaft." — also kein Rot, kein Warnton: dasselbe
   Gruen, nur entsaettigt. Gesperrt geht einen Schritt weiter. */
.badge-offen {
  background: #eaf3ea;
  color: #2f6b3c;
  border-color: #c3d9c4;
}
.badge-abgeschlossen {
  background: #f2f1ee;
  color: #7f8a7f;
  border-color: #ddddd6;
}
.badge-gesperrt {
  background: #efedea;
  color: #8a8378;
  border-color: #d8d3c9;
  font-style: italic;
}

.badge-customer {
  background: #eef1f7;
  color: #3a5a8a;
  border-color: #cfd8ea;
}

/* ── Mailansicht ────────────────────────────────────────────────────────
   Eine übernommene HTML-Mail wird in einem abgeriegelten Rahmen gezeigt:
   fremdes HTML darf die Oberfläche nicht verändern und nicht nachladen. */
.mail-view-frame {
  width: 100%;
  min-height: 22rem;
  border: 1px solid var(--line, #d9d3c7);
  border-radius: 4px;
  background: #fff;
}
.mail-view-plain { margin-top: .75rem; }
.mail-view-plain summary { cursor: pointer; color: var(--muted, #7a7266); }
.mail-thread { margin-top: 1.5rem; }
.mail-thread h3 { font-size: .95rem; margin-bottom: .4rem; }
.mail-thread ul { list-style: none; padding: 0; margin: 0; }
.mail-thread li { padding: .3rem 0; border-top: 1px solid var(--line, #ece7dd); }
.small { font-size: .82rem; }
.nowrap { white-space: nowrap; }

/* Anhänge: technische Beilagen leiser, aber nicht versteckt. */
.anhang-liste { list-style: none; padding: 0; margin: .3rem 0 0; }
.anhang-liste li { padding: .25rem 0; }
.anhang-technisch { opacity: .55; }

/* ── Rückmeldungen ──────────────────────────────────────────────────────
   Der Zustand ist links am Rand ablesbar, ohne Text: neu trägt Farbe,
   erledigt tritt zurück. „Abgehakt" heisst gelesen, nicht behoben. */
.meldung { border-left: 3px solid transparent; }
.meldung-neu { border-left-color: #b8860b; }
.meldung-gelesen { border-left-color: #8a8578; }
.meldung-erledigt { border-left-color: #6b8e5a; opacity: .72; }
.meldung-text { white-space: pre-wrap; margin: .5rem 0; }
.anhang-bilder { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.anhang-bilder img { max-height: 190px; border: 1px solid var(--line, #ddd);
                     border-radius: 4px; }
.zusammenhang { display: grid; grid-template-columns: auto 1fr; gap: .1rem .7rem;
                font-size: .84rem; color: var(--muted, #7a7266); margin: .4rem 0; }
.zusammenhang dt { font-weight: 600; }
.spuren pre { font-size: .78rem; overflow-x: auto; background: rgba(0,0,0,.04);
              padding: .5rem; border-radius: 4px; }
.faden { margin-top: .8rem; border-top: 1px solid var(--line, #ece7dd);
         padding-top: .6rem; }
.wortmeldung { margin: .4rem 0; padding-left: .7rem;
               border-left: 2px solid var(--line, #ece7dd); }
.wortmeldung-melder { border-left-color: #b8860b; }
.meldung-aktionen { display: flex; gap: .5rem; align-items: center;
                    margin-top: .7rem; flex-wrap: wrap; }
.filterleiste { display: flex; gap: .4rem; margin: .8rem 0; }
.filter { padding: .25rem .7rem; border-radius: 3px; text-decoration: none;
          color: var(--muted, #7a7266); }
.filter.aktiv { background: rgba(0,0,0,.06); color: inherit; }
.hinweis-leise { font-size: .84rem; color: var(--muted, #7a7266);
                 border-left: 2px solid #b8860b; padding-left: .7rem;
                 margin: .8rem 0; }

/* ── Klappfeld ──────────────────────────────────────────────────────────
   Für Funktionen, die essenziell, aber selten sind — eine Jahreseröffnung
   macht man einmal im Jahr und braucht dafür kein ganzes Feld. Versteckt
   wird nichts: die Zeile steht sichtbar da, ein Klick öffnet sie. */
details.klappfeld {
  padding: 0;
  /* `.panel` erzwingt min-height — zugeklappt blieben trotzdem 260px
     Leerraum stehen, also genau das, was hier weg sollte. */
  min-height: 0;
}
details.klappfeld > summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
details.klappfeld > summary::-webkit-details-marker { display: none; }
details.klappfeld > summary::before {
  content: "+";
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1;
}
details.klappfeld[open] > summary::before { content: "–"; }
details.klappfeld > summary:hover { background: rgba(0, 0, 0, .02); }
details.klappfeld > *:not(summary) { padding: 0 18px; }
details.klappfeld > form { padding-bottom: 16px; }

/* ── Prüfansicht für Buchungsentwürfe ───────────────────────────────────
   Die Hinweise sind der Kern: sie benennen die Annahmen des Imports. Drei
   Grade, damit man sie nicht gleich behandelt — eine Sperre ist etwas
   anderes als eine Information. */
.pruef-stand { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
.pruef-hinweis {
  border-left: 3px solid var(--line);
  padding: .5rem .8rem;
  margin: .5rem 0;
  font-size: .88rem;
  background: rgba(0, 0, 0, .015);
}
.pruef-hinweis strong { display: block; margin-bottom: .15rem; }
.pruef-sperre   { border-left-color: #a4443a; }
.pruef-pruefen  { border-left-color: #b8860b; }
.pruef-annahme  { border-left-color: #8a6d3b; }
.pruef-info     { border-left-color: #8a8578; color: var(--muted); }
.pruef-aktionen {
  display: flex; gap: .6rem; align-items: center;
  flex-wrap: wrap; margin-top: 1rem;
}
.pruef-blaettern { margin-left: auto; display: flex; gap: .5rem; }
.action-primary {
  background: #5c7a4a; color: #fffdfa; border: none;
  border-radius: 4px; padding: .5rem 1.1rem; font-weight: 600; cursor: pointer;
}
.action-primary[disabled] { opacity: .45; cursor: not-allowed; }

/* ── Wer bewirbt sich hier? (05.08.2026) ───────────────────────────────────
   Der Bewerbungs-Assistent bedient seit heute mehrere Personen. Solange es
   nur eine gab, war die Frage „an wessen Lebenslauf arbeite ich gerade?"
   nicht zu stellen — ab der zweiten ist sie die wichtigste auf der Seite.
   Darum steht sie oben, vor allem anderen, und nicht in einer Fusszeile. */
.person-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border: 1px solid var(--soft-strong);
  border-left: 3px solid var(--soft-strong);
  border-radius: 8px;
  background: rgba(255, 255, 255, .55);
}
.person-label { color: var(--muted); font-size: 13px; margin-right: 6px; }
.person-wer strong { font-size: 15px; }
.person-form { display: flex; gap: 8px; align-items: center; margin: 0; }
.person-form select { min-width: 190px; min-height: 36px; }

/* ── Auf dem Telefon lesbar – gemessen auf Oria, nicht geschätzt ────────
 *
 * Simon, 08.10.2026: „Ich brauche auch eine saubere Darstellung auf Oria."
 * Gemessen an diesem Tag im echten Chrome, angemeldet wie er, Fenster
 * 500 px breit: das Dokument war auf /mail, /mail/ordner und /mail/belege
 * jeweils 1185 px breit – 685 px Überhang, er musste also auf jeder Seite
 * seitwärts schieben.
 *
 * Der Überlauf kam NICHT aus der Mailansicht, sondern aus der gemeinsamen
 * Navigationsleiste: `.tab-group` war 932 px breit und brach nicht um,
 * `.tab-actions` endete bei 1185 px. Das traf damit jede ERP-Seite, nicht
 * nur die Mail. Darum steht die Korrektur hier im gemeinsamen Blatt und
 * nicht in einer einzelnen Vorlage.
 *
 * Die zweite Hälfte lag in den Vorlagen: keine einzige der sieben
 * mail*.html trug `<meta name="viewport">`. Ohne diese Zeile rechnet
 * Android mit 980 px Papier und zoomt die Seite heraus – die Breite stimmt
 * dann scheinbar, und alles ist zu klein zum Lesen. Beides zusammen ergibt
 * erst eine Darstellung; eines allein genügt nicht.
 *
 * Die Grenze liegt bei 700 px, nicht bei 412: Oria ist 412 px breit, ein
 * quergehaltenes Telefon und ein schmales Fenster liegen dazwischen, und
 * eine umgebrochene Leiste schadet auf keiner dieser Breiten.
 */
@media (max-width: 700px) {
  .tab-bar {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 4px;
    padding: 4px;
  }
  .tab-group { flex-wrap: wrap; }
  .tab-actions { flex-wrap: wrap; }
  .tab { padding: 8px 10px; }

  /* Ein Auswahlfeld mit fester Mindestbreite sprengt eine schmale Zeile;
   * untereinander bleibt jedes bedienbar. */
  .person-form { flex-wrap: wrap; }
  .person-form select { min-width: 0; width: 100%; }

  /* Querlaufende Tabellen dürfen in SICH schieben, statt die ganze Seite
   * breit zu machen – der Unterschied entscheidet, ob die Navigation
   * erreichbar bleibt. */
  table { display: block; overflow-x: auto; }

  /* Das aufklappende Menü hängt links an seiner Gruppe und ragte dadurch
   * 80 px über den rechten Rand. Rechts verankert bleibt es im Bild, und
   * die Mindestbreite darf sich dem Schirm beugen. */
  .nav-dropdown { left: auto; right: 0; min-width: 0; width: max-content;
                  max-width: calc(100vw - 24px); }

  /* Die Reiter der Mailansicht, der Kopf des Eingangs und die rechte
   * Spalte einer Zeile: drei Reihen, die mit `nowrap` bzw. ohne Umbruch
   * gebaut waren und je für sich die Seite aufzogen. */
  .mail-tabs { flex-wrap: wrap; }
  .eingang-kopf { flex-wrap: wrap; }
  .eingang-kopf .eingang-steuerung { margin-left: 0; flex-wrap: wrap; }
  .activity-right { white-space: normal; text-align: left; }
  .mail-tab-content .activity-right { flex-wrap: wrap; white-space: normal; }

  /* Die Sammelleiste quetschte „Alle auf dieser Seite" auf drei Zeilen in
   * eine 60 px schmale Spalte, weil die Griffe daneben nicht umbrachen.
   * Umgebrochen steht die Beschriftung wieder in einer Zeile. */
  .sammelleiste { flex-wrap: wrap; gap: 8px 14px; }
  .sammelleiste label { flex: 0 0 auto; }
  .vorschlag-kopf { flex-wrap: wrap; }

  /* Der Rückmeldungsknopf und das Meldungs-Abzeichen stehen fest unten
   * rechts (`rueckmeldung.js`, right 18 / bottom 18 und 66). Auf einem
   * breiten Schirm liegen sie über leerem Rand; auf 412 px decken sie
   * eine Schaltfläche der letzten Zeilen zu – gemessen am 08.10.2026 im
   * neuen Sortierbereich, wo sie den Griff «alle N» einer Absenderzeile
   * überlappten.
   *
   * Nicht der Knopf wandert, sondern die Seite bekommt Luft darunter:
   * ein fester Knopf überdeckt immer irgendetwas, erreichbar bleibt alles
   * nur, wenn man unter die letzte Zeile scrollen kann. 132 px sind die
   * gemessene Höhe beider Knöpfe übereinander plus Abstand. */
  body { padding-bottom: 132px; }
}