/* ==========================================================================
   app.css - Oberflaeche und Druckbild
   ========================================================================== */

:root {
  --grund:      #f4f5f7;
  --flaeche:    #ffffff;
  --linie:      #d8dce3;
  --linie-fein: #eceef2;
  --text:       #1c2027;
  --text-leise: #626b7a;
  --akzent:     #14508c;
  --akzent-hell:#e8f0f9;
  --gut:        #1a7a4c;
  --warn:       #a8620a;
  --fehler:     #b3261e;
  --radius:     6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 14px/1.5 "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------ Kopfzeile */

/* Aufbau wie EasyExpert: Titelzeile, Menüband-Reiter, Band mit Gruppen. */
.kopf {
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.titelzeile {
  display: flex; align-items: center; gap: 10px; padding: 4px 12px;
  font-size: 12px; color: var(--text-leise); background: #fbfbfc;
  border-bottom: 1px solid var(--linie-fein); min-height: 30px;
}
.titelzeile .marke { color: var(--text); }
.titel-mitte { flex: 1; text-align: center; color: var(--text); font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.titelzeile .ich { margin-left: auto; }
.marke { font-size: 15px; white-space: nowrap; }

/* Menüband-Reiter */
.bandreiter { display: flex; gap: 0; padding: 0 8px; background: #fbfbfc; overflow-x: auto; }
.bandreiter button {
  border: 1px solid transparent; border-bottom: 0; background: none; padding: 5px 14px 6px;
  font: inherit; font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap;
  border-radius: 4px 4px 0 0; margin-top: 2px;
}
.bandreiter button:hover { background: var(--linie-fein); }
.bandreiter button.aktiv { background: var(--flaeche); border-color: var(--linie);
  color: var(--akzent); position: relative; top: 1px; }
.bandreiter button.info { background: var(--akzent); color: #fff; border-radius: 0; margin-right: 6px; }
.bandreiter button.info.aktiv { background: #0f3f70; color: #fff; }

/* Band mit Gruppen */
.band { border-top: 1px solid var(--linie); background: var(--flaeche); }
/* Kein overflow: es würde die aufklappenden Menüs abschneiden. Bei wenig
   Platz brechen die Gruppen um. */
.bandinhalt { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; padding: 4px 6px;
  min-height: 72px; }
.bandinhalt .gruppe { display: flex; align-items: stretch; gap: 2px; padding: 0 8px;
  border-right: 1px solid var(--linie-fein); }
.bandinhalt .gruppe.rechts { margin-left: auto; border-right: 0; border-left: 1px solid var(--linie-fein); }
.band-hinweis { margin: auto 12px; font-size: 12px; color: var(--text-leise); }
.bknopf {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px;
  min-width: 64px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px;
  background: none; font: inherit; font-size: 12px; line-height: 1.2; text-align: center;
  color: var(--text); cursor: pointer;
}
.bknopf:hover:not(:disabled) { background: var(--akzent-hell); border-color: #c5d8ee; }
.bknopf:disabled { color: #9aa1ad; cursor: default; }
.bknopf:disabled::before { opacity: .35; }
.bknopf.stark { font-weight: 700; }
.bknopf::before { content: ''; width: 28px; height: 28px; flex: none;
  background: center / contain no-repeat; }
/* Eigene Linien-Symbole (keine Grafiken von EasyExpert). */
.bknopf[data-icon="neu"]::before      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.6'%3E%3Cpath d='M3 6h7l2 2h9v11H3z'/%3E%3Cpath stroke='%231a7a4c' d='M17 11v6M14 14h6'/%3E%3C/svg%3E"); }
.bknopf[data-icon="online"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c3 3 3 13 0 16M12 4c-3 3-3 13 0 16'/%3E%3C/svg%3E"); }
.bknopf[data-icon="import"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 4h16v16H4z'/%3E%3Cpath d='M12 7v9M8 12l4 4 4-4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="aendern"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.6'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath stroke='%2314508c' d='M9 10h7M9 13h7M9 16h4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="dokument"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M6 3h8l4 4v14H6z'/%3E%3Cpath d='M14 3v4h4'/%3E%3Cpath stroke='%231a7a4c' d='M15 15v5M12.5 17.5h5'/%3E%3C/svg%3E"); }
.bknopf[data-icon="werkzeug"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b7a' stroke-width='1.6'%3E%3Cpath d='M14 4a4 4 0 0 0-4 5L4 15l3 3 6-6a4 4 0 0 0 5-4l-2 2-2-1-1-2z'/%3E%3C/svg%3E"); }
.bknopf[data-icon="boerse"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b7a' stroke-width='1.6'%3E%3Cpath d='M4 20h16M6 20V10h12v10M9 10V6h6v4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="notiz"]::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8860b' stroke-width='1.6'%3E%3Cpath d='M5 4h14v16H5z'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E"); }
.bknopf[data-icon="gehezu"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5'/%3E%3C/svg%3E"); }
.bknopf[data-icon="adressen"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b7a' stroke-width='1.6'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Ccircle cx='9' cy='11' r='2.5'/%3E%3Cpath d='M5 17c1-3 7-3 8 0M15 9h4M15 13h4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="kopf"]::before     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626b7a' stroke-width='1.6'%3E%3Cpath d='M5 3h14v18H5z'/%3E%3Cpath d='M8 7h8M8 9.5h5'/%3E%3C/svg%3E"); }
.bknopf[data-icon="sichern"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 4h13l3 3v13H4z'/%3E%3Cpath d='M8 4v5h8V4M7 20v-6h10v6'/%3E%3C/svg%3E"); }
.bknopf[data-icon="drucken"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M7 8V3h10v5M5 8h14v8H5zM7 14h10v7H7z'/%3E%3C/svg%3E"); }
.bknopf[data-icon="hilfe"]::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.5a2.5 2.5 0 1 1 3.5 2.3c-.7.3-1 1-1 1.7v.5M12 17v.5'/%3E%3C/svg%3E"); }
.bknopf[data-icon="scannen"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 7V4h4M20 7V4h-4M4 17v3h4M20 17v3h-4'/%3E%3Cpath stroke='%231a7a4c' d='M3 12h18'/%3E%3C/svg%3E"); }
.bknopf[data-icon="liste"]::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 4h16v16H4zM4 9h16M4 14h16M9 4v16'/%3E%3C/svg%3E"); }
.bknopf[data-icon="euro"]::before     { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a4c' stroke-width='1.6'%3E%3Cpath d='M17 6a7 7 0 1 0 0 12M4 10h9M4 14h9'/%3E%3C/svg%3E"); }
.bknopf[data-icon="export"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v6H4V6h6'/%3E%3C/svg%3E"); }
.bknopf[data-icon="zurueck"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a4c' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M17 12H8M11 8l-4 4 4 4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="vor"]::before      { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a7a4c' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M7 12h9M13 8l4 4-4 4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="heute"]::before, .bknopf[data-icon="tag"]::before, .bknopf[data-icon="woche"]::before,
.bknopf[data-icon="monat"]::before    { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 5h16v15H4zM4 9h16M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
.bknopf[data-icon="person"]::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1-5 15-5 16 0'/%3E%3C/svg%3E"); }
.bknopf[data-icon="tabelle"]::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314508c' stroke-width='1.6'%3E%3Cpath d='M4 4h16v16H4zM4 9h16M4 14h16M10 4v16'/%3E%3C/svg%3E"); }

/* Aufklappende Menüs am Menüband */
.mit-menue { position: relative; display: flex; }
.menue {
  position: absolute; top: 100%; left: 0; z-index: 30; min-width: 320px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 4px 0;
}
.menue button {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%;
  border: 0; background: none; padding: 6px 14px; font: inherit; font-size: 13px;
  text-align: left; cursor: pointer; color: var(--text);
}
.menue button:hover { background: var(--akzent-hell); }
.menue button small { color: var(--text-leise); font-size: 11px; }
.menue-titel { padding: 6px 14px 4px; font-size: 12px; font-weight: 700; color: var(--text);
  background: var(--linie-fein); margin-top: 4px; }

/* Abschnitte des geöffneten Auftrags (bis zur Auftragsmaske, U3) */
#reiter { padding: 3px 10px; border-top: 1px solid var(--linie-fein); background: #fbfbfc;
  align-items: center; }
.reiter-titel { font-weight: 700; font-size: 13px; margin-right: 10px; white-space: nowrap; }
.reiter-fortschritt { display: flex; align-items: center; gap: 6px; margin-right: 12px; white-space: nowrap; }
.rf-balken { width: 90px; height: 7px; border-radius: 4px; background: var(--linie-fein); overflow: hidden; }
.rf-fuell { height: 100%; width: 0; background: var(--akzent); transition: width .2s; }
.reiter-fortschritt.voll .rf-fuell { background: #3c9a3c; }
.rf-text { font-size: 11px; color: var(--text-leise); }
.reiter .reiter-zu { margin-left: auto; color: var(--text-leise); }
.speicherzustand {
  font-size: 11px; margin-left: 10px; padding: 2px 8px;
  border-radius: 10px; white-space: nowrap;
  /* Lange Datenpfade duerfen die Reiter nicht aus der Kopfzeile schieben. */
  display: inline-block; max-width: 260px; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
  background: var(--linie-fein); color: var(--text-leise);
}
.speicherzustand.server  { background: #e9f5ee; color: var(--gut); }
.speicherzustand.browser { background: #fdf6e8; color: var(--warn); }

/* 940 px = alle zwoelf Reiter nebeneinander. Fehlt der Platz, weichen die
   Werkzeuge in die zweite Zeile aus, statt dass Reiter verschwinden. */
.reiter { display: flex; gap: 2px; flex: 1 1 940px; overflow-x: auto; }
.reiter button {
  border: 0; background: none; padding: 8px 12px;
  font: inherit; color: var(--text-leise);
  border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.reiter button:hover { background: var(--linie-fein); color: var(--text); }
.reiter button.aktiv { background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }

.werkzeuge { display: flex; gap: 6px; margin-left: auto; }

.knopf {
  border: 1px solid var(--linie); background: var(--flaeche);
  padding: 7px 13px; border-radius: var(--radius);
  font: inherit; cursor: pointer; color: var(--text);
}
.knopf:hover { border-color: var(--akzent); color: var(--akzent); }
.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.haupt:hover { background: #0f3f70; color: #fff; }

/* --------------------------------------------------------------- Rahmen */

.rahmen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px; padding: 18px;
  align-items: start;
  max-width: 1500px; margin: 0 auto;
}
@media (max-width: 1000px) { .rahmen { grid-template-columns: 1fr; } }

/* Auftragsliste: volle Breite, keine Ergebnisspalte. */
.rahmen.voll { grid-template-columns: minmax(0, 1fr); max-width: none; padding: 8px 10px; }
/* Manager-Liste wie EasyExpert: randlos über die volle Breite. */
.rahmen.voll .formular { border-radius: 0; padding: 8px 10px; }
.rahmen.voll .ergebnis { display: none; }

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

/* Die allgemeine Regel "label { display: flex }" wuerde das hidden-Attribut
   ueberstimmen - ausgeblendete Felder (z. B. abweichender Halter) blieben sichtbar. */
[hidden] { display: none !important; }

.lackmessung { margin-top: 8px; }
.lackmessung .klein { margin-top: 8px; }

/* ===================================================== Auftragsverwaltung */

.ich { margin-left: 12px; font-size: 12px; color: var(--text-leise);
       display: inline-flex; flex-direction: row; align-items: center; gap: 4px; }
.ich select { font: inherit; padding: 2px 4px; border: 1px solid var(--linie);
              border-radius: 4px; background: var(--flaeche); width: auto; }

.mit-knopf { display: flex; gap: 6px; align-items: center; }
.mit-knopf input { flex: 1; min-width: 0; }

.liste-kopf { display: flex; align-items: center; justify-content: space-between;
              gap: 12px; margin-bottom: 12px; }
.liste-kopf h2 { margin: 0; }
.liste-knoepfe { display: flex; gap: 8px; }
.liste-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
/* width: auto hebt die allgemeine Regel "alle Eingabefelder 100 %" auf -
   die Filter sollen nebeneinander in einer Zeile stehen. */
.liste-filter select, .liste-suche {
  font: inherit; font-size: 13px; padding: 6px 8px; width: auto;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche);
}
.liste-suche { flex: 1; min-width: 240px; }
.liste-haken { flex-direction: row; align-items: center; gap: 6px; font-size: 13px;
               color: var(--text); white-space: nowrap; }
.liste-haken input { width: auto; }
.liste-info { font-size: 12px; color: var(--text-leise); margin: 4px 0 10px; }
.liste-info a { color: var(--warn); font-weight: 600; }

.liste-tabelle { overflow-x: auto; background: var(--flaeche);
                 border: 1px solid var(--linie); border-radius: var(--radius); }
.liste-tabelle table { width: 100%; border-collapse: collapse; font-size: 13px; }
.liste-tabelle th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--text-leise);
  padding: 8px 8px; border-bottom: 1px solid var(--linie); white-space: nowrap;
  cursor: pointer; user-select: none; position: sticky; top: 0; background: var(--flaeche);
}
.liste-tabelle th:hover { color: var(--akzent); }
.liste-tabelle td { padding: 7px 8px; border-bottom: 1px solid var(--linie-fein); white-space: nowrap; }
.liste-tabelle tbody tr { cursor: pointer; }
.liste-tabelle tbody tr:hover { background: var(--akzent-hell); }
.liste-tabelle tbody tr.aktuell { box-shadow: inset 3px 0 0 var(--akzent); }
/* Auftragsliste dicht wie EasyExpert: kleine Zeilen, grauer Spaltenkopf mit Trennern */
.tafel[data-tafel="liste"] .liste-tabelle { border-radius: 0; }
.tafel[data-tafel="liste"] .liste-tabelle table { font-size: 12px; }
.tafel[data-tafel="liste"] .liste-tabelle th { background: #f3f4f6; padding: 3px 6px; font-weight: 400;
  color: var(--text); border-right: 1px solid var(--linie-fein); font-size: 12px; }
.tafel[data-tafel="liste"] .liste-tabelle td { padding: 2px 6px; }
/* Status als Punkt mit Text wie EasyExpert (Farbe trägt die Bedeutung) */
.tafel[data-tafel="liste"] .st { background: none; padding: 0; font-weight: 400; font-size: 12px;
  color: var(--text); border-radius: 0; }
.tafel[data-tafel="liste"] .st::before { content: ''; display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; margin-right: 5px; vertical-align: -1px; background: #b9bec7; }
.tafel[data-tafel="liste"] .st-neu::before        { background: #cf222e; }
.tafel[data-tafel="liste"] .st-bearbeitet::before { background: #e3a008; }
.tafel[data-tafel="liste"] .st-fertig::before     { background: #1a7a4c; }
.tafel[data-tafel="liste"] .st-versendet::before  { background: #3b47a3; }
.tafel[data-tafel="liste"] .st-teilzahlung::before, .tafel[data-tafel="liste"] .st-bezahlt::before { background: #d4a017; }
.tafel[data-tafel="liste"] .st-mahnung::before    { background: #f0b400; box-shadow: 0 0 0 2px #fff3c4; }
.tafel[data-tafel="liste"] .st-storniert::before  { background: #626b7a; }
.tafel[data-tafel="liste"] .st-akzeptiert::before { background: #3b47a3; }
.tafel[data-tafel="liste"] .st-nurgutschrift::before { background: #9a7b4f; }
.tafel[data-tafel="liste"] .st-uneinbringlich::before { background: #7a1f1f; }
.liste-leiste .ich { margin-left: auto; color: var(--akzent); font-weight: 600; }
/* Markierte Zeile wie die gelbe Auswahl in EasyExpert */
.liste-tabelle tbody tr.markiert, .liste-tabelle tbody tr.markiert:hover { background: #fff6a8; }
/* Marke für eigenständige Freie Kalkulationen (ohne Auftrag) */
.fk-marke { display: inline-block; font-size: 10px; font-weight: 600; line-height: 1;
  padding: 2px 5px; border-radius: 3px; background: var(--akzent); color: #fff; vertical-align: middle; }
.liste-tabelle .l-typ { font-size: 11px; color: var(--text-leise); }
.liste-tabelle .l-betreff { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }

/* Listenkopf wie EasyExpert: Ansicht, Suche, Filter löschen, Aktualisieren */
.liste-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.liste-leiste select { font: inherit; font-size: 13px; padding: 5px 8px; width: auto;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); }
.liste-leiste .liste-suche { flex: 0 1 420px; }
.ansicht-wahl { font-size: 13px; color: var(--text); white-space: nowrap; }
.leiste-trenner { width: 1px; align-self: stretch; background: var(--linie); margin: 0 4px; }
.liste-leiste .liste-datum { font: inherit; font-size: 13px; padding: 4px 6px; width: auto;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); }
.liste-leiste .leiste-bis { color: var(--text); opacity: .6; }
.buero-umschalter { display: inline-flex; align-items: center; gap: 4px; }
.buero-umschalter .bu-label { font-size: 12px; color: var(--text-leise); }
.bu-knopf { font: inherit; font-size: 12px; padding: 3px 8px; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--text); }
.bu-knopf.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
/* Büro-Zugriff-Haken im Bearbeiter-Editor */
.buero-rechte { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; }
.buero-rechte .haken { display: inline-flex; align-items: center; gap: 4px; margin: 0; }
.liste-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.liste-tabelle .l-kz { font-variant-numeric: tabular-nums; }
.liste-tabelle .l-offen { color: var(--fehler); }
.liste-tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--linie);
                          border-bottom: 0; background: var(--grund); }
.liste-tabelle tr.gruppe td { background: var(--linie-fein); cursor: default; }
.liste-tabelle tbody tr.gruppe:hover { background: var(--linie-fein); }
/* Altbestand-Auswertung: anklickbare Zeile (Drill-down zu offenen Posten) */
tr.drillbar { cursor: pointer; }
tr.drillbar:hover td { background: var(--linie-fein); }
.ab-warn { cursor: pointer; margin-bottom: 10px; padding: 8px 12px;
  border: 1px solid var(--fehler); border-radius: var(--radius); color: var(--fehler); }
.ab-warn:hover { background: var(--linie-fein); }
/* Neutraler Hinweis-Banner (z. B. Rechnungen ohne USt-Ausweis): kein Fehler,
   nur ein Hinweis - daher gedeckte Linie/Farbe statt der Fehlerfarbe. */
.ab-info { cursor: pointer; margin-bottom: 10px; padding: 8px 12px;
  border: 1px solid var(--linie); border-radius: var(--radius); color: var(--text-leise); }
.ab-info:hover { background: var(--linie-fein); }
/* Hinweis mit Warnton (kein Banner): z. B. „vor dem Umschalten migrieren". */
.warnhinweis { padding: 8px 12px; border: 1px solid var(--fehler); border-radius: var(--radius);
  color: var(--fehler); font-size: 13px; }
/* Adressverwaltung: Filterleiste + kompakte, editierbare Tabelle. */
.adr-leiste { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.adr-leiste .kleinknopf.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.adr-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.adr-tabelle th { text-align: left; padding: 6px 6px; background: var(--kopf-bg, #f4f6f9);
  position: sticky; top: 0; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.adr-tabelle td { padding: 2px 4px; border-bottom: 1px solid var(--linie-fein); }
.adr-tabelle input, .adr-tabelle select { width: 100%; min-width: 60px; box-sizing: border-box;
  border: 1px solid transparent; background: transparent; padding: 4px 5px; border-radius: 4px; }
.adr-tabelle input:focus, .adr-tabelle select:focus { border-color: var(--akzent); background: #fff; }
.adr-tabelle td .weg { color: var(--fehler); border: 0; background: transparent; cursor: pointer; font-size: 16px; }
.liste-filter .ab-umschalter button { white-space: nowrap; }

/* Statusmarken - Farbe traegt die Bedeutung, der Text bleibt lesbar. */
.st { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px;
      border-radius: 10px; background: var(--linie-fein); color: var(--text-leise); }
.st-neu         { background: #e8f0f9; color: var(--akzent); }
.st-bearbeitet  { background: #fdf6e8; color: #6b4408; }
.st-fertig      { background: #e9f5ee; color: var(--gut); }
.st-versendet   { background: #eef0fb; color: #3b47a3; }
.st-teilzahlung { background: #fff2dc; color: #8a5300; }
.st-bezahlt     { background: #d9f0e3; color: #11583a; }
.st-mahnung     { background: #fdeceb; color: var(--fehler); }
.st-storniert   { background: var(--linie-fein); color: var(--text-leise); text-decoration: line-through; }
.st-akzeptiert  { background: #e8f0f9; color: #1f3a8a; }
.st-nurgutschrift { background: #f1ece6; color: #6b4408; }
.st-uneinbringlich { background: #f6e9e9; color: #7a1f1f; text-decoration: line-through; }

/* Marken und Mahn-Knopf: deutlich, aber augenschonend (Nutzer 03.11.2026 – „schärfer, in allen Listen“). Farben als Werte,
   damit die dunkle Ansicht eigene, ebenso gut lesbare Töne bekommt (siehe unten). */
:root { --marke-alt-grund: #dce2ff; --marke-alt-text: #1f2a85; --marke-alt-rand: #8d9bea;
        --marke-faellig-grund: #ffeccc; --marke-faellig-text: #7a3e00; --marke-faellig-rand: #e3a64a;
        --mahn-grund: #fff0dc; --mahn-text: #8a2d06; --mahn-rand: #e08a1e; --mahn-grund-hover: #ffe0b8; }
.l-marke { display: inline-block; font-size: 11px; line-height: 1.35; padding: 1px 7px; margin-right: 4px;
           border-radius: 4px; background: var(--linie-fein); color: var(--text-leise); vertical-align: 1px; }
.l-marke.faellig { background: var(--marke-faellig-grund); color: var(--marke-faellig-text);
                   border: 1px solid var(--marke-faellig-rand); font-weight: 700; }
.l-marke.alt { background: var(--marke-alt-grund); color: var(--marke-alt-text); border: 1px solid var(--marke-alt-rand); font-weight: 700; }
/* „📨 mahnen“ an überfälligen Rechnungen */
button.mahn-knopf { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 1px 8px; font: inherit;
  font-size: 12px; font-weight: 700; line-height: 1.4; border-radius: 4px; cursor: pointer; vertical-align: 1px;
  background: var(--mahn-grund); color: var(--mahn-text); border: 1px solid var(--mahn-rand); }
button.mahn-knopf:hover, button.mahn-knopf:focus-visible { background: var(--mahn-grund-hover); outline: 2px solid var(--mahn-rand); outline-offset: 1px; }
/* Altbestand-Zeilen in Auftrags- und Rechnungsliste: nur lesend, etwas zurückgenommen */
#listeTabelle tr.alt-zeile td { color: var(--text-leise); }
#listeTabelle tr.alt-zeile.markiert td { color: var(--text); }

/* Protokoll im Reiter Auftrag */
.protokoll table { width: 100%; border-collapse: collapse; font-size: 12px; }
.protokoll td { padding: 5px 6px; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
.protokoll .p-zeit { white-space: nowrap; color: var(--text-leise); font-variant-numeric: tabular-nums; }
.protokoll .p-von { white-space: nowrap; color: var(--text-leise); }
.p-art { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
         background: var(--linie-fein); color: var(--text-leise); white-space: nowrap; }
.p-status, .p-uebernahme { background: #e8f0f9; color: var(--akzent); }
.p-druck, .p-anschreiben { background: #eef0fb; color: #3b47a3; }
.p-rechnung, .p-zahlung  { background: #e9f5ee; color: var(--gut); }
.p-mahnung               { background: #fdeceb; color: var(--fehler); }
.p-anruf, .p-notiz       { background: #fdf6e8; color: #6b4408; }

/* Bearbeiter und Standorte im Reiter Stammdaten */
fieldset.bearbeiter { border: 1px solid var(--linie); border-radius: var(--radius);
                      padding: 10px 14px 12px; margin: 0 0 12px; }
fieldset.bearbeiter legend { font-weight: 600; padding: 0 6px; font-size: 13px; }
fieldset.bearbeiter .klein { margin-top: 10px; }

.formular {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 22px 24px 30px;
}

.tafel { display: none; }
.tafel.aktiv { display: block; }

h2 { font-size: 18px; margin: 0 0 18px; }
h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise); margin: 26px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--linie-fein);
}
h3 button { margin-left: 10px; }
.tafel h4 { font-size: 12px; font-weight: 600; margin: 16px 0 8px; color: var(--akzent); }

/* Kalkulation nach Positionen: breite Tabelle scrollt waagerecht */
.tabellenrahmen { overflow-x: auto; }
table.positionen { min-width: 1150px; }
table.positionen td { padding: 2px 3px; }
table.positionen input.zahl { width: 4.2em; }
table.positionen td:nth-child(1) select { width: 4.5em; }
table.positionen td:nth-child(2) input { width: 4.5em; }
table.positionen td:nth-child(3) input { min-width: 14em; }
table.positionen td:nth-child(9) select { width: 8em; }
.kalkergebnis table { max-width: 640px; margin: 8px 0 4px; }
.kalkergebnis td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalkergebnis tr.summe td { font-weight: 600; border-top: 1px solid var(--linie); }
table.lohnfaktoren { max-width: 640px; }
table.lohnfaktoren input.zahl { width: 6em; }

/* Minderwert-Rechner: Haken-Zeilen und Ergebnistabelle */
label.haken { display: flex; flex-direction: row; align-items: center; gap: 6px; }
label.haken input { width: auto; margin: 0; }
.mwtabelle td { vertical-align: middle; }
.mwtabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mwtabelle tr.hervor td { background: var(--linie-fein); font-weight: 600; }

.lies { color: var(--text-leise); margin: -8px 0 16px; }

/* ------------------------------------------------------------- Formular */

.raster {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 14px;
}
@media (max-width: 780px) { .raster { grid-template-columns: repeat(2, 1fr); } }

label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-leise);
}
label.breit { grid-column: span 2; }
label.hoch  { grid-column: 1 / -1; }
label.inline { flex-direction: row; align-items: center; gap: 8px; }

input, select, textarea {
  font: 14px/1.4 inherit; color: var(--text);
  border: 1px solid var(--linie); border-radius: 4px;
  padding: 7px 9px; background: #fff; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--akzent-hell); border-color: var(--akzent);
}
textarea { resize: vertical; font-family: inherit; }

/* Adressvorschläge unter dem Eingabefeld */
.vorschlaege {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 0 0 5px 5px; box-shadow: 0 6px 18px rgba(0,0,0,.14);
  max-height: 260px; overflow-y: auto;
}
.vorschlag {
  padding: 6px 10px; cursor: pointer; font-size: 12px;
  border-bottom: 1px solid var(--linie-fein);
}
.vorschlag:last-child { border-bottom: 0; }
.vorschlag:hover { background: var(--akzent-hell); }
.vorschlag strong { display: block; color: var(--text); font-weight: 600; }
.vorschlag span { color: var(--text-leise); }

.hinweis { font-size: 11px; min-height: 14px; }
.hinweis.ok     { color: var(--gut); }
.hinweis.fehler { color: var(--fehler); }

.merk {
  background: var(--akzent-hell); border-left: 3px solid var(--akzent);
  padding: 10px 12px; border-radius: 0 4px 4px 0;
  font-size: 12px; color: var(--text); line-height: 1.5;
}
.warnung {
  background: #fdf6e8; border-left: 3px solid var(--warn);
  padding: 10px 12px; margin-top: 20px;
  font-size: 12px; color: #6b4408;
}
.warnung code { background: #fff; padding: 1px 4px; border-radius: 3px; }
.restwert-hinweis { margin-top: 8px; font-size: 13px; }
.restwert-hinweis .warnung { margin-top: 8px; }
.datei-liste { max-height: 48vh; overflow: auto; border: 1px solid var(--linie, #ddd); border-radius: 4px; }
.datei-zeile { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid var(--linie, #eee); }
.datei-zeile:last-child { border-bottom: 0; }
.datei-zeile:hover { background: var(--akzent-hell, #eef3fb); }
.datei-zeile.datei-db { font-weight: 600; }
.dv-gruppe { margin-bottom: 10px; }
.dv-gruppe-titel { font-weight: 600; font-size: 12px; color: #555; margin: 8px 0 2px; text-transform: uppercase; letter-spacing: .03em; }
.dv-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 5px 8px; border-bottom: 1px solid var(--linie, #eee); }
.dv-zeile:hover { background: var(--akzent-hell, #eef3fb); }
.dv-form { border: 1px solid var(--linie, #ddd); border-radius: 4px; padding: 10px 12px; margin: 10px 0; background: #fafbfc; }

.meldung { margin-left: 12px; font-size: 12px; color: var(--gut); }

/* -------------------------------------------------------- Postentabelle */

table.posten { width: 100%; border-collapse: collapse; font-size: 13px; }
table.posten th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-leise);
  padding: 4px 6px; border-bottom: 1px solid var(--linie);
}
table.posten th.w-num, table.posten th.w-sum { text-align: right; }
table.posten td { padding: 2px; border-bottom: 1px solid var(--linie-fein); }
table.posten input, table.posten select {
  border-color: transparent; background: transparent; padding: 6px;
}
table.posten input:hover, table.posten select:hover { border-color: var(--linie); }
table.posten input:focus { background: #fff; }
table.posten input.zahl { text-align: right; }
table.posten td.summe {
  text-align: right; padding-right: 8px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
th.w-num, th.w-sum { width: 96px; }
th.w-bez { width: 34%; }
th.w-einheit { width: 80px; }
th.w-aktiv { width: 70px; text-align: center; }

/* Abgewaehlte Rechnungsposition: sichtbar bleiben, aber erkennbar inaktiv. */
table.posten tr.inaktiv td { color: #9aa2ae; }
table.posten tr.inaktiv input:not([type="checkbox"]),
table.posten tr.inaktiv select { color: #9aa2ae; text-decoration: line-through; }
table.posten tr.inaktiv td.summe { text-decoration: line-through; }

.klein {
  border: 1px solid var(--linie); background: var(--flaeche);
  font: 11px inherit; padding: 3px 8px; border-radius: 4px; cursor: pointer;
  text-transform: none; letter-spacing: 0; color: var(--akzent);
}
.klein:hover { border-color: var(--akzent); }
.weg {
  border: 0; background: none; color: var(--text-leise);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 6px;
}
.weg:hover { color: var(--fehler); }

/* ------------------------------------------------------- Textbausteine */

/* Anstoßgrafik */
.skizzeflaeche {
  margin-top: 14px; border: 1px solid var(--linie);
  border-radius: var(--radius); background: #fbfbfc;
  max-width: 560px; overflow: hidden;
}
.skizzeflaeche svg { display: block; cursor: crosshair; user-select: none; }

/* Vor- und Nachtexte */
.textblock {
  border: 1px solid var(--linie); border-left: 3px solid var(--linie);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
  background: var(--flaeche);
}
.textblock.gefuellt { border-left-color: var(--gut); }
.textkopf { font-size: 13px; margin-bottom: 8px; }
.textblock .chips { margin: 0 0 8px; }
.textblock textarea { font-size: 13px; }

.bausteine { margin-top: 28px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  border: 1px solid var(--linie); background: var(--flaeche);
  padding: 5px 10px; border-radius: 14px;
  font: 12px inherit; cursor: pointer; color: var(--text);
}
.chip:hover { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }

/* ---------------------------------------------------------------- Fotos */

.fotogitter {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px; margin-top: 16px;
}
.foto {
  border: 1px solid var(--linie); border-radius: var(--radius);
  overflow: hidden; background: var(--flaeche);
}
.foto img { width: 100%; height: 130px; object-fit: cover; display: block; }
.foto input {
  border: 0; border-top: 1px solid var(--linie-fein);
  border-radius: 0; font-size: 12px;
}
.foto .fuss {
  display: flex; justify-content: space-between; align-items: center;
  padding: 3px 6px; font-size: 11px; color: var(--text-leise);
}

/* ------------------------------------------------------------- Ergebnis */

.ergebnis {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 18px 18px 22px;
  position: sticky; top: 70px;
  max-height: calc(100vh - 90px); overflow-y: auto;
}
.ergebnis h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-leise); margin-bottom: 14px; }

.zeile {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; font-size: 13px;
}
.zeile span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.zeile.stark { font-weight: 600; border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 7px; }
.zeile.leise { color: var(--text-leise); font-size: 12px; }
.block { margin-bottom: 18px; }
.block > h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-leise); margin: 0 0 6px;
}

.fazit { padding: 11px 12px; border-radius: 4px; margin-bottom: 18px; font-size: 13px; }
.fazit strong { display: block; margin-bottom: 3px; }
.fazit.reparatur { background: #e9f5ee; border-left: 3px solid var(--gut); }
.fazit.grenze    { background: #fdf6e8; border-left: 3px solid var(--warn); }
.fazit.total     { background: #fdeceb; border-left: 3px solid var(--fehler); }
.fazit.unklar    { background: var(--linie-fein); border-left: 3px solid var(--linie); }

.aufstellung .zeile { border-bottom: 1px solid var(--linie-fein); }

/* ======================================================== Altbestand */

.dlg-reiter { display: flex; gap: 4px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; }
.dlg-reiter button {
  border: 1px solid transparent; border-bottom: 0; background: none;
  padding: 7px 14px; font: inherit; color: var(--text-leise); cursor: pointer;
  border-radius: var(--radius) var(--radius) 0 0; margin-bottom: -1px;
}
.dlg-reiter button:hover { color: var(--akzent); }
.dlg-reiter button.aktiv {
  border-color: var(--linie); background: var(--flaeche); color: var(--text); font-weight: 600;
}

.ab-quellen { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 12px; font-size: 13px; }
.ab-quellen label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ab-quellen .ab-alle { font-weight: 600; padding-right: 14px; border-right: 1px solid var(--linie); }
.ab-quellen .ab-fehlt { color: var(--text-leise); cursor: not-allowed; }

.ab-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.ab-umschalter { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.ab-umschalter button {
  border: 0; background: var(--flaeche); padding: 6px 12px; font: inherit;
  font-size: 13px; color: var(--text-leise); cursor: pointer;
}
.ab-umschalter button + button { border-left: 1px solid var(--linie); }
.ab-umschalter button.aktiv { background: var(--akzent); color: #fff; }
/* Auswahlfelder in der Reiterzeile (Zahlungen ▾ / Offene Posten ▾) sehen aus wie Reiter */
.ab-umschalter select { border: 0; border-left: 1px solid var(--linie); border-radius: 0; background: var(--flaeche);
  font: inherit; font-size: 13px; padding: 6px 8px; cursor: pointer; color: var(--text-leise); }
.ab-umschalter select + button { border-left: 1px solid var(--linie); }
.ab-umschalter select.aktiv { background: var(--akzent); color: #fff; }
.ab-umschalter select option { color: var(--text, #111); background: var(--flaeche, #fff); }
.ab-suche {
  flex: 1; min-width: 220px; padding: 7px 10px; font: inherit; font-size: 13px;
  border: 1px solid var(--linie); border-radius: var(--radius);
}
.ab-suche:focus { outline: none; border-color: var(--akzent); }
.ab-nur-offen { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

.ab-info { font-size: 12px; color: var(--text-leise); margin-bottom: 8px; min-height: 16px; }
.ab-info .warnung { margin-top: 8px; }
.ab-leise { color: var(--text-leise); font-size: 12px; }

.ab-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.ab-tabelle th {
  text-align: left; font-size: 11px; font-weight: 600; color: var(--text-leise);
  padding: 6px 6px; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
.ab-tabelle td { padding: 7px 6px; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
.ab-tabelle tbody tr:hover { background: var(--akzent-hell); }
.ab-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ab-tabelle.ab-klein { font-size: 12px; margin-top: 8px; }
.ab-knoepfe { text-align: right; white-space: nowrap; }
.ab-offen { color: var(--fehler); font-size: 12px; }
.ab-bezahlt { color: var(--gut); font-size: 12px; }

/* Die Auftragsnummer ist ein Titel, keine Rubrik wie die uebrigen h3. */
.ab-titel {
  margin: 4px 0 14px; font-size: 16px; text-transform: none; letter-spacing: 0;
  border: 0; padding: 0;
}
/* min(...) verhindert, dass die Bloecke in schmalen Fenstern ueber den Rand laufen. */
.ab-bloecke { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; }
.ab-block { border: 1px solid var(--linie-fein); border-radius: var(--radius); padding: 10px 12px; }
.ab-block h4 { margin: 0 0 8px; font-size: 12px; color: var(--akzent); }
.ab-block dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; font-size: 13px; }
.ab-block dt { color: var(--text-leise); }
.ab-block dd { margin: 0; overflow-wrap: anywhere; }
.ab-zwischen { margin: 20px 0 8px; }
.ab-rechnung { border: 1px solid var(--linie-fein); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; }
.ab-rechnung-kopf { margin-bottom: 6px; }
.ab-status {
  display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 10px;
  background: var(--linie-fein); color: var(--text-leise); margin-left: 6px;
}
.ab-summen { border-collapse: collapse; font-size: 13px; min-width: 260px; }
.ab-summen td { padding: 2px 0; }
.ab-summen .zahl { text-align: right; padding-left: 24px; font-variant-numeric: tabular-nums; }
.ab-merk { margin-top: 16px; font-size: 12px; }
.ab-fuss { margin-top: 16px; text-align: right; }

/* ================================================================ Druck */

/* ToDo-Liste im Reiter Auftrag */
.todo { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; }
.todo label.haken { font-weight: 400; }

/* ---------------------------------------------------- EÜR-Kacheln (A1c) */
.euer-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 6px 0 14px; }
.euer-kachel { border: 1px solid var(--linie); border-radius: 8px; padding: 10px 14px; background: var(--flaeche); }
.euer-k-titel { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #7b8494; }
.euer-k-wert { font-size: 22px; font-weight: 700; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.euer-k-unten { font-size: 11px; color: #7b8494; }
.euer-kachel.plus .euer-k-wert { color: #0f8a6a; }
.euer-kachel.minus .euer-k-wert { color: #cf222e; }
.umsatz-svg { width: 100%; max-width: 760px; height: auto; display: block; margin: 4px 0; }
.umsatz-gitter { stroke: var(--linie-fein); stroke-width: 1; }
.umsatz-achse { font-size: 10px; fill: #7b8494; }
.umsatz-legende { display: flex; gap: 16px; font-size: 12px; color: #57606a; margin: 2px 0 8px; }
.umsatz-legende span { display: inline-flex; align-items: center; gap: 6px; }
.umsatz-legende i { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }

/* ---------------------------------- Offene Posten nach Anwalt (Chips) */
.op-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.op-chip-titel { font-size: 12px; color: #7b8494; margin-right: 4px; }
.op-chip { font-size: 12px; padding: 3px 10px; border: 1px solid var(--linie); border-radius: 14px;
  background: var(--flaeche); cursor: pointer; }
.op-chip:hover { background: var(--akzent-hell); }
.op-chip.aktiv { background: var(--akzent); color: #fff; border-color: var(--akzent); }
.op-notiz { width: 100%; min-width: 8em; box-sizing: border-box; padding: 3px 6px; }

/* -------------------------------------------------------------- Aufgaben */
.aufgabe-neu { margin-bottom: 10px; }
.aufgabe-neu input[type="text"], .aufgabe-neu input[type="date"], .aufgabe-neu select {
  width: 100%; box-sizing: border-box; padding: 4px 6px; }
.aufgabe-info { width: 100%; box-sizing: border-box; padding: 3px 6px; }
tr.aufgabe-erledigt { color: #9aa2ad; }
tr.aufgabe-erledigt td:nth-child(2) { text-decoration: line-through; }
tr.aufgabe-faellig td:first-child { color: #c0392b; font-weight: 600; }
.leer-hinweis { color: #7b8494; text-align: center; padding: 14px; }
.aufgabe-mahn-knoepfe { margin-bottom: 8px; }

/* ------------------------------------------------------- Datenbanken (A3) */
#dbSuche { padding: 3px 8px; min-width: 14em; }
.db-blaettern { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.db-blaettern .knopf { padding: 2px 10px; }
#dbSeiteInfo { font-size: 12px; color: var(--text-leise); white-space: nowrap; }
.db-scroll { overflow-x: auto; }
.db-tabelle { font-size: 12px; width: 100%; }
.db-tabelle th, .db-tabelle td { padding: 3px 8px; white-space: nowrap; }
.db-tabelle th { position: sticky; top: 0; background: #f3f4f6; }

/* --------------------------------------------------- Konten/Büros (B1) */
.b1-stamm { margin: 8px 0; }
.b1-stamm h4 { margin: 6px 0 2px; }
.konto-zeile, .buero-zeile { align-items: end; gap: 8px; margin: 4px 0; }
.konto-zeile label, .buero-zeile label { margin: 0; }

/* -------------------------------------------------------------- Rechner */
.rechner { position: fixed; top: 90px; right: 28px; z-index: 60; width: 236px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 8px 28px rgba(20, 30, 45, .22); user-select: none; }
.rechner-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; font-weight: 600; font-size: 13px; cursor: move;
  background: linear-gradient(#fbfbfc, #eef1f5); border-bottom: 1px solid var(--linie); border-radius: 8px 8px 0 0; }
.rechner-zu { border: none; background: none; font-size: 18px; line-height: 1; cursor: pointer; color: #57606a; padding: 0 2px; }
.rechner-anzeige { width: calc(100% - 20px); margin: 10px; text-align: right; font-size: 20px;
  font-variant-numeric: tabular-nums; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 5px; background: #fff; }
.rechner-tasten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 0 10px 12px; }
.rechner-tasten button { padding: 11px 0; font-size: 15px; border: 1px solid var(--linie);
  border-radius: 5px; background: #fff; cursor: pointer; }
.rechner-tasten button:hover { background: var(--akzent-hell); }
.rechner-tasten .r-op { background: #eef1f5; font-weight: 600; }
.rechner-tasten .r-fkt { background: #f3f5f8; color: #57606a; }
.rechner-tasten .r-gleich { background: var(--akzent); color: #fff; font-weight: 600; }
.rechner-tasten .r-mwst { grid-column: span 2; background: #fffdf4; font-size: 13px; font-weight: 600; }
.rechner-tasten [data-r-aktion="kopieren"] { grid-column: span 4; font-size: 13px; }

/* ------------------------------------------------------------- Kalender */
.kal-woche { display: grid; border: 1px solid var(--linie); background: var(--flaeche); }
.kal-kopf { padding: 6px; font-size: 12px; font-weight: 600; text-align: center;
  border-bottom: 1px solid var(--linie); border-left: 1px solid var(--linie-fein); }
.kal-kopf.heute { color: var(--akzent); background: var(--akzent-hell); }
.kal-ganztags-l { font-size: 10px; color: #7b8494; padding: 4px; border-bottom: 1px solid var(--linie); }
.kal-ganztags { min-height: 26px; padding: 2px; border-bottom: 1px solid var(--linie);
  border-left: 1px solid var(--linie-fein); }
.kal-zeiten { position: relative; }
.kal-zeiten div { position: absolute; right: 6px; font-size: 10px; color: #7b8494; transform: translateY(-1px); }
.kal-spalte { position: relative; border-left: 1px solid var(--linie-fein);
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, var(--linie-fein) 43px, var(--linie-fein) 44px); }
.kal-spalte.heute { background-color: #fbfcfe; }
.kal-arbeit { position: absolute; left: 0; right: 0; background: var(--akzent-hell, #eef4fb);
  pointer-events: none; }
/* Zeitleiste: je Tag eine waagerechte Spur, Uhrzeit laeuft nach rechts. */
.kal-zeitleiste { border: 1px solid var(--linie); background: var(--flaeche); }
.kal-zl-achse, .kal-zl-zeile { display: grid; grid-template-columns: 112px 1fr; }
.kal-zl-eck { border-bottom: 1px solid var(--linie); }
.kal-zl-stunden { position: relative; height: 20px; border-bottom: 1px solid var(--linie); }
.kal-zl-stunden span { position: absolute; top: 4px; font-size: 10px; color: #7b8494; transform: translateX(-50%); }
.kal-zl-tag { font-size: 12px; padding: 3px 6px; border-top: 1px solid var(--linie-fein);
  border-right: 1px solid var(--linie); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.kal-zl-ganz { font-size: 10px; color: #57606a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kal-zl-lane { position: relative; height: 34px; border-top: 1px solid var(--linie-fein); }
.kal-zl-arbeit { position: absolute; top: 0; bottom: 0; background: var(--akzent-hell, #eef4fb); pointer-events: none; }
.kal-zl-termin { position: absolute; top: 3px; bottom: 3px; min-width: 3px; overflow: hidden;
  border-left: 3px solid; border-radius: 3px; font-size: 11px; line-height: 28px; padding: 0 4px;
  cursor: pointer; white-space: nowrap; }
.kal-zl-termin span { pointer-events: none; }
.kal-termin { position: absolute; left: 2px; right: 2px; overflow: hidden; font-size: 11px; line-height: 1.3;
  padding: 2px 4px; border-left: 4px solid; border-radius: 3px; cursor: pointer; }
.kal-termin span { color: #57606a; }
.kal-monat { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--linie);
  background: var(--flaeche); }
.kal-tag { min-height: 96px; padding: 3px; border-left: 1px solid var(--linie-fein);
  border-top: 1px solid var(--linie-fein); overflow: hidden; }
.kal-tag.fremd { background: #f7f8fa; color: #9aa1ad; }
.kal-tag.heute .kal-nr { background: var(--akzent); color: #fff; border-radius: 10px; padding: 0 6px; display: inline-block; }
.kal-nr { font-size: 11px; font-weight: 600; margin-bottom: 2px; }
.tchip { font-size: 11px; padding: 1px 4px; margin: 1px 0; border-left: 4px solid; background: #f3f5f8;
  border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tchip span { color: #57606a; }
.tchip.tlesen { font-style: italic; }
.tchip[draggable="true"], .kal-zl-termin[draggable="true"] { cursor: grab; }
.tzieh { opacity: .45; }
.kal-ziel { outline: 2px dashed var(--akzent); outline-offset: -2px; background: var(--akzent-hell); }
/* Rechtsklick-Menü im Kalender */
.kal-kontext { position: fixed; z-index: 90; background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: 6px; box-shadow: 0 8px 28px rgba(20, 30, 45, .22); padding: 4px; min-width: 150px; }
.kal-kontext button { display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; padding: 6px 12px; border-radius: 4px; cursor: pointer; color: var(--text); }
.kal-kontext button:hover { background: var(--akzent-hell); }
.kal-liste { max-width: 760px; }
.kal-liste h4 { margin: 14px 0 4px; }
.kal-liste .tchip { white-space: normal; font-size: 13px; padding: 5px 8px; }

/* Dialog (Termin) */
.dlg-hg { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: flex;
  align-items: center; justify-content: center; z-index: 100; }
.dlg { background: #fff; border-radius: 6px; padding: 22px; width: 620px; max-width: 94vw;
  max-height: 88vh; overflow: auto; box-shadow: 0 8px 30px rgba(0,0,0,.25); }
.dlg-knoepfe { display: flex; gap: 8px; margin-top: 16px; }

/* Termin-Erinnerung oben rechts, bleibt bis zur Bestaetigung */
.erinnerung { position: fixed; top: 14px; right: 14px; z-index: 150; background: #fff8e1;
  border: 1px solid #e0b84f; border-radius: 6px; padding: 12px 14px; max-width: 360px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2); font-size: 13px; }
.erinnerung div { margin: 4px 0; }

/* Vorschau von Unterschrift und Stempel (Stammdaten, Bearbeiter) */
.bildvorschau { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.bildvorschau img { max-height: 60px; max-width: 200px; border: 1px dashed #bbb;
  background: #fff; padding: 2px; }
.foto .drehen { display: flex; gap: 4px; }

.druck { display: none; }

/* Briefkopf-Editor: ziehbares + skalierbares Logo in der Vorschau (nur Bildschirm). */
.bk-kopf-flaeche { position: relative; border-bottom: 2px solid #000; padding-bottom: 6px; min-height: 52px; }
.bk-logo-drag { position: absolute; cursor: move; user-select: none; box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
.bk-logo-drag:hover { box-shadow: 0 0 0 1px #2f9e57; }
.bk-griff { position: absolute; right: -6px; bottom: -6px; width: 13px; height: 13px;
  background: #2f9e57; border: 2px solid #fff; border-radius: 2px; cursor: nwse-resize; }
/* Frei ziehbarer Kopf-/Fußtext in der Vorschau; Griff unten = Höhe (nicht Breite). */
.bk-text-box { box-sizing: border-box; cursor: move; user-select: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12); padding: 1px 3px; }
.bk-text-box:hover { box-shadow: 0 0 0 1px #2f9e57; }
.bk-griff-h { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  width: 26px; height: 11px; background: #2f9e57; border: 2px solid #fff;
  border-radius: 2px; cursor: ns-resize; }
.bk-fuss-flaeche { position: relative; border-top: 1px solid #000; margin-top: 16px;
  padding-top: 6px; min-height: 40px; }
/* Schriftzeile (Art/Größe/Farbe/Zurücksetzen) im Briefkopf-Editor. */
.bk-stilzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
/* Bildablage (Logo oben/unten): Bild hineinziehen oder mit Strg+V einfügen. */
.bk-bildablage { min-height: 40px; border: 1.5px dashed var(--linie); border-radius: 6px;
  padding: 6px 8px; cursor: pointer; outline: none; transition: border-color .12s, background .12s; }
.bk-bildablage:hover, .bk-bildablage:focus { border-color: var(--akzent); background: var(--akzent-hell); }
.bk-bildablage.ueber { border-color: var(--akzent); background: var(--akzent-hell); }
/* Liste der weiteren Logos: Vorschaubild, Bereich, Maße, Entfernen je Zeile. */
.bk-zusatz-liste { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px; }
.bk-zusatz-zeile { display: flex; align-items: center; gap: 10px; padding: 3px 6px;
  border: 1px solid var(--linie); border-radius: 5px; font-size: 12px; }
.bk-zusatz-zeile img { height: 26px; max-width: 90px; object-fit: contain; background: #fff; }
/* Id-Bezug, damit „.na-koerper select { width: 100% }" (steht später) nicht gewinnt. */
#bkZusatzListe .bk-zusatz-zeile select { width: auto; flex: 0 0 auto; }
.bk-zusatz-zeile .leise { flex: 1; min-width: 0; }
/* Briefkopf-Editor breiter als die übrigen Dialoge: mehrere Logos frei platzieren
   braucht Fläche. Die Vorschau rechnet über die Flächenbreite in mm um (WYSIWYG
   bleibt bei jeder Breite erhalten). */
#bueroKopfDialog .na-dialog { max-width: 980px; }
.bk-stilzeile input[type=number] { width: 70px; }
.bk-stilzeile input[type=color] { width: 42px; height: 28px; padding: 0; }

@media print {
  @page { size: A4; margin: 18mm 16mm 16mm; }

  .kopf, .rahmen { display: none !important; }
  body { background: #fff; font-size: 10.5pt; }

  .druck { display: block; }

  .druck .briefkopf {
    border-bottom: 2px solid #000; padding-bottom: 8pt; margin-bottom: 18pt;
    display: flex; justify-content: space-between; align-items: flex-end;
    position: relative; min-height: 16mm;
  }
  .druck .briefkopf .buero { font-size: 13pt; font-weight: 700; }
  .druck .briefkopf .klein { font-size: 8.5pt; text-align: right; line-height: 1.4;
    border: 0; padding: 0; color: #333; }
  /* Logo oben rechts im Briefkopf (nur wenn beim Bearbeiter/Büro hinterlegt). */
  .druck .briefkopf-logo { position: absolute; top: 0; right: 0;
    max-height: 15mm; max-width: 45mm; }

  .druck h1 { font-size: 16pt; margin: 0 0 4pt; }
  .druck .untertitel { color: #444; margin-bottom: 18pt; font-size: 10pt; }

  .druck h2 {
    font-size: 11pt; margin: 16pt 0 6pt; padding-bottom: 3pt;
    border-bottom: 1px solid #000; page-break-after: avoid;
  }

  .druck .paare { display: grid; grid-template-columns: 38% 62%; gap: 2pt 0; }
  .druck .paare dt { color: #444; }
  .druck .paare dd { margin: 0; }

  .druck table { width: 100%; border-collapse: collapse; font-size: 9.5pt;
    margin-bottom: 6pt; }
  .druck th { text-align: left; border-bottom: 1px solid #000; padding: 3pt 4pt;
    font-size: 8.5pt; text-transform: uppercase; }
  .druck td { padding: 2.5pt 4pt; border-bottom: 1px solid #ddd;
    vertical-align: top; }
  .druck td.r, .druck th.r, .druck td.zahl, .druck th.zahl {
    text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .druck tfoot td { border-top: 1px solid #000; border-bottom: 0; font-weight: 700; }
  .druck tr.gruppe td { background: #eee; font-weight: 700; }
  .druck tr.summe td { border-top: 1px solid #000; border-bottom: 0;
    font-weight: 700; }
  .druck tr.zwischen td { border-bottom: 0; }

  .druck .absatz { white-space: pre-wrap; margin: 0 0 8pt; }
  .druck .vm-liste { margin: 2pt 0 8pt; padding-left: 18pt; }
  .druck .vm-liste li { margin: 0 0 3pt; }
  .druck .kasten { border: 1px solid #000; padding: 8pt 10pt; margin: 10pt 0; }
  /* Kopftabelle wie EasyExpert (Kasko, D1): kleine Beschriftung ueber dem Wert */
  .druck table.kopftabelle td { border: 1px solid #999; width: 50%; padding: 3pt 5pt; }
  .druck table.kopftabelle small { display: block; font-size: 7pt; color: #555; }
  .druck .kopf-bild { text-align: center; margin: 8pt 0; page-break-inside: avoid; }
  .druck .kopf-bild img { max-width: 100%; max-height: 95mm; border: 1px solid #999; }
  .druck .kasten .gross { font-size: 12pt; font-weight: 700; }
  .druck .hervor { border: 1.5pt solid #000; padding: 5pt 8pt; }

  .druck .skizze { max-width: 120mm; margin: 6pt auto 10pt;
    page-break-inside: avoid; }
  .druck .skizze svg { width: 100%; height: auto; }

  .druck .fotos { display: grid; grid-template-columns: 1fr 1fr; gap: 10pt; }
  .druck .fotos figure { margin: 0; page-break-inside: avoid; }
  .druck .fotos img { width: 100%; border: 1px solid #999; }
  .druck .fotos figcaption { font-size: 8.5pt; padding-top: 2pt; }
  /* Fotodokumentation wie EasyExpert (D6): eine Spalte, zwei grosse Bilder je Seite */
  .druck .fotos.fotodoku { display: block; }
  .druck .fotodoku figure { margin: 0 0 10pt; text-align: center; }
  .druck .fotodoku img { width: auto; max-width: 100%; max-height: 105mm; }
  .druck .fotodoku figcaption { text-align: left; }

  .druck .unterschrift { margin-top: 34pt; page-break-inside: avoid; }
  .druck .unterschrift .strich { border-top: 1px solid #000; width: 60mm;
    margin-top: 26pt; padding-top: 3pt; font-size: 9pt; }
  /* Unterschrift und Stempel als Bild - der Strich rueckt dann heran */
  .druck .unterschrift .bilder { display: flex; align-items: flex-end; gap: 12pt;
    margin-top: 6pt; height: 24mm; }
  .druck .unterschrift .bilder img { max-height: 24mm; max-width: 60mm; }
  .druck .unterschrift .bilder + .strich { margin-top: 2pt; }
  /* Frei auf dem Blatt platzierter Stempel (Overlay, je Seite). left/top = % der
     Seite, Breite in mm aus den Stammdaten. transform-origin links oben, damit
     eine Drehung die gesetzte Position nicht verschiebt. */
  .druck .stempel-frei { position: fixed; z-index: 5; transform-origin: left top; }
  .druck .stempel-frei img { width: 100%; height: auto; display: block; }
  /* Erfassungsformular: Schreiblinien und Ankreuzfelder */
  .druck .erfassung td { height: 15pt; }
  .druck .erfassung td.leer { border-bottom: 1px solid #000; }
  .druck .erfassung th { width: 38%; text-transform: none; font-size: 9pt;
    font-weight: 400; color: #444; border-bottom: 1px solid #ddd; }
  .druck .ankreuz { letter-spacing: .5pt; }
  .druck .paare dd.leer { border-bottom: 1px solid #000; margin-bottom: 4pt; }

  .druck .seitenumbruch { page-break-before: always; }
  .druck .fussnote { font-size: 8pt; color: #555; margin-top: 12pt; }

  .druck .anschrift { margin: 14pt 0 20pt; line-height: 1.45; }
  .druck .fusszeile {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10pt;
    border-top: 1px solid #000; margin-top: 26pt; padding-top: 5pt;
    font-size: 8pt; color: #333;
  }
  /* Frei editierbarer Briefkopf/Fußzeile je Büro (1:1-Text). */
  .druck .briefkopf-frei .bk-frei { font-size: 9.5pt; line-height: 1.45; }
  .druck .fusszeile-frei { display: block; text-align: center; font-size: 8pt; }
}

/* ---------------------------------------- Auftragsübersicht (Manager, U2) */
/* Liste oben begrenzt, darunter die Übersicht zum aktuellen Auftrag wie in
   EasyExpert (Vorlagen 01-05). */
.tafel[data-tafel="liste"] .liste-tabelle { max-height: 42vh; overflow: auto; }
.uebersicht { margin-top: 8px; background: var(--flaeche); border: 1px solid var(--linie); }
.ue-reiter { display: flex; align-items: flex-end; gap: 2px; background: #eef0f3;
  border-bottom: 1px solid var(--linie); padding: 3px 4px 0; flex-wrap: wrap; }
.ue-reiter button { font: inherit; font-size: 12px; padding: 4px 12px; border: 1px solid transparent;
  border-bottom: 0; background: none; cursor: pointer; color: var(--text); }
.ue-reiter button.aktiv { background: var(--flaeche); border-color: var(--linie); margin-bottom: -1px; }
.ue-reiter .ue-titel { margin-left: auto; padding: 4px 8px; font-size: 12px; color: var(--akzent);
  font-weight: 600; }
.ue-leer { margin: 6px 10px; }
.ue-inhalt { padding: 6px 8px; font-size: 12px; }
.ue-leiste { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 6px; }

.kleinknopf { font: inherit; font-size: 12px; padding: 3px 9px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 3px; cursor: pointer; color: var(--text); }
.kleinknopf:hover:not(:disabled) { border-color: var(--akzent); color: var(--akzent); }
.kleinknopf:disabled { color: #a0a6b0; cursor: default; }
/* Navigations-Pfeile (← zurück / → vor): kräftiges Kästchen, nicht zu dünn. */
.kleinknopf.pfeil { font-size: 17px; font-weight: 700; line-height: 1; padding: 2px 11px;
  min-width: 36px; text-align: center; border-width: 2px; border-color: var(--akzent); color: var(--akzent); }
.kleinknopf.pfeil:hover:not(:disabled) { background: var(--akzent); color: #fff; }
.ue-raster { display: grid; grid-template-columns: minmax(240px, 1fr) 3fr; gap: 6px; }
.ue-raster > .ue-leiste { margin-bottom: 0; }
/* Eingabereiter kompakt links wie EasyExpert, nicht über die volle Breite */
.ue-inhalt:not([data-ue-inhalt="uebersicht"]) { max-width: 1150px; }
.ue-baum, .ue-bilder { border: 1px solid var(--linie); min-height: 180px; max-height: 300px;
  overflow: auto; padding: 4px 6px; }
.ue-baum ul { list-style: none; margin: 0; padding-left: 14px; }
.ue-baum > ul { padding-left: 0; }
.ue-baum li { padding: 1px 0; white-space: nowrap; }
.ue-baum li.ordner { font-weight: 600; }
.ue-baum li.ordner li { font-weight: 400; }
.ue-baum li[data-ue-auf] { cursor: pointer; }
.ue-baum li[data-ue-auf]:hover { color: var(--akzent); }
.ue-baum li.ordner::before { content: '▸ '; color: var(--text-leise); }
.ue-baum small { color: var(--text-leise); }
.ue-bilder { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; }
.ue-bilder figure { margin: 0; width: 130px; cursor: pointer; }
.ue-bilder img { width: 130px; height: 98px; object-fit: cover; display: block; border: 1px solid var(--linie); }
.ue-bilder figcaption { font-size: 11px; color: var(--text-leise); overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; }
.ue-tabelle { width: 100%; border-collapse: collapse; font-size: 12px; }
.ue-tabelle th { background: #f3f4f6; font-weight: 400; text-align: left; padding: 2px 6px;
  border-right: 1px solid var(--linie-fein); border-bottom: 1px solid var(--linie); }
.ue-tabelle td { padding: 2px 6px; border-bottom: 1px solid var(--linie-fein); }
.ue-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.ue-tabelle tr.stark td { font-weight: 600; }
.ue-rechnung { border: 1px solid var(--linie); min-height: 60px; }
.ue-rechnung tr[data-ue-auf] { cursor: pointer; }
.ue-notiz { background: #fff6a8; border: 1px solid #e6d96a; padding: 4px 8px; min-height: 60px; cursor: pointer; }
.ue-notiztext { white-space: pre-wrap; max-height: 80px; overflow: auto; }
.ue-zeile { display: grid; grid-template-columns: repeat(4, minmax(120px, 220px)); gap: 4px 10px;
  margin-bottom: 6px; }
.ue-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.ue-spalten.drei { grid-template-columns: 1fr 1fr 1fr; }
.ue-block { border: 1px solid var(--linie); margin-bottom: 6px; }
.ue-kopf { background: #eef0f3; padding: 2px 8px; font-weight: 600; border-bottom: 1px solid var(--linie);
  display: flex; gap: 6px; align-items: center; }
.ue-felder { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 8px; padding: 4px 8px;
  align-content: start; }
.ue-felder .breit2 { grid-column: span 2; }
.ue-felder .breit3 { grid-column: span 3; }
.uebersicht label { display: flex; flex-direction: column; font-size: 11px; color: var(--text-leise); gap: 1px; }
.uebersicht input, .uebersicht select, .uebersicht textarea { font: inherit; font-size: 12px; color: var(--text);
  padding: 2px 5px; border: 1px solid var(--linie); border-radius: 2px; width: 100%; background: #fff; }
.uebersicht input[readonly] { background: #f6f7f9; }
.ue-text { margin: 4px 8px; }
.ue-summen { padding: 4px 8px; }
@media (max-width: 900px) {
  .ue-raster, .ue-spalten, .ue-spalten.drei { grid-template-columns: 1fr; }
}

/* Rückfrage mit eigenen Knöpfen (Sichern / Verwerfen / Zurück) */
.frage-hg { position: fixed; inset: 0; background: rgba(20, 30, 45, .35); z-index: 1000;
  display: flex; align-items: center; justify-content: center; }
.frage { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 16px 18px; max-width: 460px; }
.frage p { margin: 0 0 14px; white-space: pre-wrap; }
.frage-knoepfe { display: flex; gap: 8px; justify-content: flex-end; }
.frage-eingabe { width: 100%; box-sizing: border-box; margin: 0 0 14px;
  padding: 8px 10px; border: 1px solid var(--linie); border-radius: var(--radius);
  font: inherit; background: var(--flaeche); color: inherit; }
.skizze-menue { position: fixed; z-index: 1100; min-width: 170px;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .22); padding: 4px; display: flex; flex-direction: column; }
.skizze-menue-punkt { text-align: left; background: none; border: 0; color: inherit;
  font: inherit; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.skizze-menue-punkt:hover { background: var(--akzent); color: #fff; }
.frage.mail-lese { max-width: 760px; width: 90vw; }
.mail-lese-kopf { margin: 0 0 8px; }
.mail-betreff { font-size: 16px; }
.mail-meta { margin-top: 2px; }
.mail-anhaenge { margin: 6px 0; display: flex; gap: 8px; flex-wrap: wrap; }
.mail-anh { font-size: 13px; text-decoration: none; border: 1px solid var(--linie);
  border-radius: 6px; padding: 3px 8px; color: inherit; }
.mail-bildhinweis { margin: 6px 0; }
.mail-koerper { max-height: 60vh; overflow: auto; border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 10px; background: #fff; color: #222; }
.mail-koerper img { max-width: 100%; height: auto; }
.mail-iframe { width: 100%; height: 55vh; border: 0; background: #fff; display: block; }
@media print { .frage-hg, .skizze-menue { display: none !important; } }

/* Prüfung vor dem Druck (W1): Liste fehlender Angaben, Klick springt zum Feld */
.frage.pruef { max-width: 600px; width: 92vw; }
.frage.pruef .leise { color: var(--leise, #667); font-size: 13px; }
.pruef-liste { list-style: none; margin: 0 0 14px; padding: 0; max-height: 50vh; overflow: auto;
  border: 1px solid var(--linie); border-radius: var(--radius); }
.pruef-liste li + li { border-top: 1px solid var(--linie); }
.pruef-punkt { display: grid; grid-template-columns: 62px 96px 1fr; gap: 8px; align-items: baseline;
  width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit;
  padding: 7px 10px; cursor: pointer; }
.pruef-punkt:hover, .pruef-punkt:focus-visible { background: rgba(127, 127, 127, .12); }
.pruef-marke { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pruef-fehlt .pruef-marke { color: var(--fehler); }
.pruef-pruefen .pruef-marke { color: var(--warn); }
.pruef-abschnitt { color: var(--leise, #667); font-size: 13px; }
.pruef-ziel { outline: 3px solid var(--warn) !important; outline-offset: 2px; }

/* Anhänge im Sende-Dialog (W2): Größe und ✕ zum Entfernen */
.mail-anh-eintrag { display: inline-flex; align-items: center; gap: 4px; margin: 2px 6px 2px 0;
  padding: 1px 4px 1px 8px; border: 1px solid var(--linie); border-radius: 6px; }
.mail-anh-weg { background: none; border: 0; color: var(--fehler); cursor: pointer; font: inherit; padding: 0 4px; }
.mail-anh-warnung { color: var(--fehler); }

/* ------------------------------------------ Auftragsmaske (U3) */
/* Wie das EasyExpert-Fenster „Aktueller Auftrag“: Kopf mit Werkzeugen und
   Abbruch/Sichern, Navigation rechts über dem Ergebnis, Fußzeile. */
.maske-kopf { background: linear-gradient(#fbfbfc, #f1f3f6); }
.maske-werkzeuge { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: 1 1 0; }
.maske-titel { flex: 0 1 auto; text-align: center; font-size: 13px; color: var(--text-leise); }
.maske-titel strong { color: var(--text); margin-left: 4px; }
.maske-knoepfe { display: flex; gap: 10px; flex: 1 1 0; justify-content: flex-end; }
.maske-knopf { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0;
  background: none; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); padding: 2px 4px; }
.maske-knopf .mk-symbol { display: flex; align-items: center; justify-content: center; width: 34px;
  height: 34px; border-radius: 3px; color: #fff; font-size: 20px; font-weight: 700; }
.maske-knopf.abbruch .mk-symbol { background: #d9534f; }
.maske-knopf.sichern .mk-symbol { background: #4caf50; }
.maske-knopf:hover .mk-symbol { filter: brightness(.92); }

/* Navigation rechts (ersetzt die frühere Abschnittsleiste) */
.ergebnis #reiter { display: flex; flex-direction: column; align-items: stretch; gap: 1px; flex: none; overflow: visible;
  padding: 0; border: 0; background: none; margin: -8px -8px 16px; }
/* Titel steht schon im Maskenkopf */
.ergebnis #reiter .reiter-titel { display: none; font-size: 12px; color: var(--text-leise); font-weight: 600;
  padding: 2px 10px 6px; white-space: normal; }
.ergebnis #reiter button { text-align: left; padding: 6px 10px; border: 1px solid transparent;
  border-radius: 2px; color: var(--text); font-weight: 600; font-size: 13px; }
.ergebnis #reiter button:hover { background: var(--akzent-hell); }
.ergebnis #reiter button.aktiv { background: #dce8f6; border-color: #9cbbe0; color: var(--text); }
.ergebnis #reiter button[data-nav-icon]::before { display: inline-block; width: 22px; color: var(--akzent);
  font-weight: 400; text-align: center; margin-right: 6px; }
#reiter [data-nav-icon="auftrag"]::before { content: '✎'; }
#reiter [data-nav-icon="schein"]::before { content: '▤'; }
#reiter [data-nav-icon="beteiligte"]::before { content: '☰'; }
#reiter [data-nav-icon="versicherung"]::before { content: '▦'; }
#reiter [data-nav-icon="werkstatt"]::before { content: '⚙'; }
#reiter [data-nav-icon="anwalt"]::before { content: '§'; }
#reiter [data-nav-icon="unfall"]::before { content: '◉'; }
#reiter [data-nav-icon="fahrzeug"]::before { content: '▭'; }
#reiter [data-nav-icon="ausstattung"]::before { content: '☑'; }
#reiter [data-nav-icon="werte"]::before { content: '±'; }
#reiter [data-nav-icon="bilder"]::before { content: '▣'; }
#reiter [data-nav-icon="restwert"]::before { content: '⚖'; }
#reiter [data-nav-icon="dokumente"]::before { content: '▯'; }
#reiter [data-nav-icon="vermittlung"]::before { content: '⇄'; }
#reiter [data-nav-icon="protokoll"]::before { content: '≡'; }
.ergebnis #reiter .reiter-trenner { font-size: 11px; color: var(--text-leise); text-transform: uppercase;
  letter-spacing: .06em; padding: 10px 10px 2px; border-top: 1px solid var(--linie-fein); margin-top: 6px; }
.ergebnis #reiter .reiter-trenner ~ button { font-weight: 400; padding-left: 38px; }

.maske-fuss { background: #2d4f8e;
  color: #fff; font-size: 12px; padding: 5px 12px; }
#versHinweise .vh { font-size: 13px; }
@media print { .maske-kopf, .maske-fuss { display: none !important; } }

/* ------------------------------- Auftragsmaske als Fenster (nach U3) */
/* Wie das EasyExpert-Fenster „Aktueller Auftrag“: eigenes Fenster mit Rahmen
   und Titelzeile über dem Hauptfenster; volle Höhe, Breite wie dort (ca.
   1390 px), mittig. Dahinter bleiben Menüband und ein Abbild der Liste. */
body.maske-offen { overflow: hidden; }
.masken-hintergrund { padding: 8px 10px; opacity: .55; pointer-events: none; overflow: hidden;
  height: calc(100vh - 140px); }
body.maske-offen #rahmen { position: fixed; z-index: 30; top: 6px; bottom: 6px; left: 50%;
  transform: translateX(-50%); width: min(1390px, calc(100vw - 12px)); max-width: none; margin: 0;
  padding: 0; gap: 0; grid-template-columns: minmax(0, 1fr) 290px; grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: stretch; background: #eef0f3; border: 1px solid #7d8da8;
  box-shadow: 0 14px 44px rgba(10, 25, 50, .38); overflow: hidden; }
body.maske-offen #rahmen > .maske-kopf { grid-column: 1 / -1; grid-row: 1; }
body.maske-offen #rahmen > .formular { grid-column: 1; grid-row: 2; overflow: auto; border: 0;
  border-radius: 0; padding: 8px 12px 24px; }
body.maske-offen #rahmen > .ergebnis { grid-column: 2; grid-row: 2; position: static; max-height: none;
  overflow: auto; border: 0; border-left: 1px solid var(--linie); border-radius: 0; padding: 12px 10px; }
body.maske-offen #rahmen > .maske-fuss { grid-column: 1 / -1; grid-row: 3; position: static; }
@media (max-width: 1000px) {
  body.maske-offen #rahmen { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; }
  body.maske-offen #rahmen > .ergebnis { grid-column: 1; grid-row: 3; max-height: 30vh; border-left: 0; }
  body.maske-offen #rahmen > .maske-fuss { grid-row: 4; }
}
.maske-kopf { border-bottom: 1px solid var(--linie); }
.fenster-titel { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font-size: 12px;
  color: #555; background: linear-gradient(#f7f8fa, #e9ecf1); border-bottom: 1px solid var(--linie-fein); }
.fenster-titel > span:nth-child(2) { flex: 1; text-align: center; }
.fenster-symbol { color: var(--akzent); }
.fenster-zu { color: #999; padding: 0 4px; }
.maske-leiste { display: flex; align-items: center; gap: 12px; padding: 6px 12px; }

/* Formulare in der Maske: Beschriftung links, Feld rechts, zwei Paare je Zeile */
body.maske-offen .formular .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; }
body.maske-offen .formular .raster > label:not(.haken) { display: grid; align-items: center;
  grid-template-columns: 128px minmax(0, 1fr); column-gap: 8px; font-size: 12.5px; color: #333; }
body.maske-offen .formular .raster > label.breit, body.maske-offen .formular .raster > label.hoch { grid-column: 1 / -1; }
body.maske-offen .formular .raster > label.hoch { align-items: start; }
body.maske-offen .formular .raster > label > :not(input):not(select):not(textarea):not(.mit-knopf):not(.vorschlaege) { grid-column: 2; }
body.maske-offen .formular input, body.maske-offen .formular select, body.maske-offen .formular textarea {
  font-size: 13px; padding: 3px 6px; border-radius: 2px; }
body.maske-offen .formular h2 { font-size: 15px; background: #dfe3e9; margin: 0 -12px 8px; padding: 5px 12px;
  border-bottom: 1px solid #c9cfd8; }
body.maske-offen .formular h3 { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: #222;
  font-weight: 700; background: #e7eaef; margin: 14px 0 6px; padding: 4px 8px; border-bottom: 0; }
/* EasyExpert-Felder, die es bei uns (noch) nicht gibt: ausgegraut an ihrer
   Stelle, ohne Datenfeld - kommen mit U11. */
label.ee-fehlt, .ee-fehlt { color: #a2a8b1 !important; }
.ee-fehlt input, .ee-fehlt select, .ee-fehlt textarea { background: #f1f2f4; border-color: #e1e4e8; color: #a2a8b1; }
.raster > .leer { display: block; }
/* Schreibschutz (U11e): gesperrte Gutachtendaten erkennbar */
body.schreibschutz .fenster-titel::after { content: '  🔒 schreibgeschützt'; color: #b45309; font-weight: 600; }
#schreibschutzInfo { margin-left: 8px; }
/* Bisheriges Feld neben den getrennten (U11): so steht es im Gutachten. */
label.bisherig { color: #5a6270; font-style: italic; }
h3 .kopf-wahl { float: right; display: inline-flex; gap: 4px; }
h3 .kopf-wahl .klein { margin-left: 0; font-weight: 400; }
/* Unterpunkte einer Seite (Fahrzeug, Ermittelte Werte) nur bei dieser Seite */
#reiter .unterpunkt { display: none; }
#reiter[data-aktiv="fahrzeug"] .unterpunkt[data-gruppe="fahrzeug"],
#reiter[data-aktiv="bewertung"] .unterpunkt[data-gruppe="bewertung"] { display: block; }
.ergebnis #reiter button.unterpunkt { font-weight: 400; font-size: 12px; padding: 3px 10px 3px 40px; }
.ergebnis #reiter button.unterpunkt::before { content: '↳ '; color: var(--gut); }
.seiten-knoepfe { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 0 0 8px; }
.seiten-knoepfe .suche { display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  font-size: 12.5px; color: #333; margin-right: 8px; }
.seiten-knoepfe .suche input { width: 240px; padding: 3px 6px; }
.maske-werkzeuge { flex-wrap: nowrap; flex: 0 0 auto; }
.maske-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.maske-knoepfe { flex: 0 0 auto; }
/* Ermittelte Werte (U5) */
input.anzeige { background: #f6f7f9; color: #333; text-align: right; }
h3 .kopf-haken { display: inline-flex; vertical-align: middle; margin-right: 4px; }
.ew-rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ew-rep .raster { grid-template-columns: minmax(0, 1fr) !important; }
.dok-baum { max-height: none; min-height: 120px; margin-bottom: 10px; background: #fff; }
/* Feld-Unterschriften (Scheibe 3): je Rolle eine Zeile Beschriftung | Vorschau | Knöpfe */
.us-liste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.us-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 8px; border: 1px solid var(--rahmen, #d9dce1); border-radius: 5px; background: #fff; }
.us-zeile .us-label { flex: 0 0 180px; font-size: 13px; }
.us-zeile .us-vorschau { flex: 1 1 160px; min-height: 24px; }
.us-zeile .us-knoepfe { flex: 0 0 auto; display: flex; gap: 4px; }
.protokoll thead th { text-align: left; font-size: 12px; font-weight: 400; background: #f3f4f6;
  padding: 3px 6px; border-bottom: 1px solid var(--linie); }
body.maske-offen .formular .raster > label:not(.haken) { grid-template-columns: 140px minmax(0, 1fr);
  hyphens: auto; overflow-wrap: break-word; }
body.maske-offen .formular .raster > .breit:not(label) { grid-column: 1 / -1; }

/* Kalkulation wie "Freie Kalkulation" (U6): Spaltengruppen farbig, Hinweis- und Summenzeile */
.kalk-hinweis { background: #c9f2c3; color: #1e4d1a; font-weight: 600; padding: 4px 8px; margin: 6px 0; font-size: 12.5px; }
#tabPositionen td:nth-child(n+5):nth-child(-n+9) { background: #fde3cc; }
#tabPositionen td:nth-child(n+10):nth-child(-n+11) { background: #fdf7c3; }
#tabPositionen td:nth-child(n+12):nth-child(-n+14) { background: #c9f4f4; }
#tabPositionen td:nth-child(15) { background: #d9f2d0; }
#tabPositionen td input, #tabPositionen td select { background: transparent; }
.kalk-status { position: sticky; bottom: -24px; display: flex; flex-wrap: wrap; gap: 18px; background: #2d4f8e;
  color: #fff; font-size: 12.5px; padding: 5px 10px; margin: 14px -12px -24px; }
.kalk-leiste .suche { margin-left: auto; }
body.maske-offen .tafel[data-tafel="kalkulation"].aktiv { display: flex; flex-direction: column; min-height: 100%; }
body.maske-offen .tafel[data-tafel="kalkulation"].aktiv > .kalk-status { margin-top: auto; }

/* Rechnungen (U7): markierte Zeile, Zahlungsbereich unten */
#buchTabelle tbody tr.markiert, #buchTabelle tbody tr.markiert:hover { background: #fff6a8; }
#tabWeitereRechnungen tbody tr.markiert { background: #fff6a8; }
#kalkListeTabelle tbody tr.markiert, #kalkListeTabelle tbody tr.markiert:hover { background: #fff6a8; }
/* Kalkulation: markierte Position fuer die Zeilenwerkzeuge */
table.posten tbody tr.markiert td { background: #fff6a8; }
.zeilenwerkzeuge { margin-left: 12px; white-space: nowrap; }
.wr-bearbeiten { border-left: 3px solid #fff6a8; padding-left: 10px; margin-bottom: 14px; }
#buchTabelle table { font-size: 12px; }
#buchTabelle td, #buchTabelle th { padding: 2px 6px; white-space: nowrap; }
.buch-zahlungen { display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr); gap: 10px;
  margin-top: 8px; border-top: 1px solid var(--linie); padding-top: 6px; }
.buch-zahlungen-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start; }
.buch-zahlungen-knoepfe button:first-child { grid-column: 1 / -1; }

/* Auswertung: Berichte rechts wie EasyExpert */
.berichte { display: none; }
body[data-aktiv-band="auswertung"] .tafel[data-tafel="buchhaltung"].aktiv { display: grid;
  grid-template-columns: minmax(0, 1fr) 270px; column-gap: 14px; align-items: start; }
body[data-aktiv-band="auswertung"] .tafel[data-tafel="buchhaltung"].aktiv > * { grid-column: 1; }
body[data-aktiv-band="auswertung"] .tafel[data-tafel="buchhaltung"].aktiv > .berichte { display: flex; flex-direction: column;
  grid-column: 2; grid-row: 1 / span 20; border: 1px solid var(--linie); background: #fff; }
.berichte-titel { color: #1b39c9; font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--linie-fein); }
.berichte-gruppe { font-weight: 700; font-size: 12.5px; background: #eef0f3; padding: 4px 10px; }
.berichte button { text-align: left; border: 0; border-bottom: 1px solid var(--linie-fein); background: none;
  padding: 7px 10px 7px 14px; font: inherit; font-size: 12.5px; cursor: pointer; }
.berichte button::before { content: '▤ '; color: var(--akzent); }
.berichte button:hover:not(:disabled) { background: var(--akzent-hell); }
.berichte button:disabled { color: #a2a8b1; cursor: default; }
/* Solange die Maske offen ist, ist das Hauptfenster dahinter gesperrt (wie ein modales Fenster). */
body.maske-offen::after { content: ''; position: fixed; inset: 0; z-index: 29; background: rgba(20, 30, 45, .08); }

/* Termine wie EasyExpert (U8) */
.kal-kopf { font-weight: 400; background: #e1effa; border-bottom: 1px solid #b9cfe4; }
.kal-kopf.heute { background: #1b4c8f; color: #fff; }
.kal-zeiten div { font-size: 19px; color: #6f7785; right: 4px; }
.kal-zeiten sup { font-size: 9px; vertical-align: super; }
.kal-spalte.wochenende { background-color: #f0f1f3; }
.kal-arbeit { background: #fffdf4; box-shadow: inset 1px 0 0 #f0e6c8, inset -1px 0 0 #f0e6c8; }
.kal-zl-stunden, .kal-zl-eck { background: #e1effa; border-bottom: 1px solid #b9cfe4; }
.kal-zl-arbeit { background: #fffdf4; }
.kal-zl-zeile.wochenende .kal-zl-lane { background-color: #f0f1f3; }
.kal-zl-zeile.heute .kal-zl-tag { color: #1b4c8f; font-weight: 600; }
.dlg-termin { padding: 0; width: 760px; }
.dlg-termin .fenster-titel { border-radius: 6px 6px 0 0; }
.dlg-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px;
  background: linear-gradient(#fbfbfc, #f1f3f6); border-bottom: 1px solid var(--linie); }
.dlg-leiste label.inline { font-size: 12.5px; color: #333; }
.dlg-leiste select { width: auto; padding: 3px 6px; }
.dlg-inhalt { padding: 10px 12px 14px; }
.dlg-inhalt .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; }
.dlg-inhalt .raster > label:not(.haken) { display: grid; grid-template-columns: 80px minmax(0, 1fr);
  align-items: center; column-gap: 8px; font-size: 12.5px; color: #333; }
.dlg-inhalt .raster > label.breit, .dlg-inhalt .raster > label.hoch { grid-column: 1 / -1; }
.dlg-inhalt .raster > label.hoch { align-items: start; }
.dlg-inhalt input, .dlg-inhalt select, .dlg-inhalt textarea { padding: 3px 6px; font-size: 13px; }
.dlg-termin { width: 860px; }
.dlg-leiste { flex-wrap: nowrap; }
.dlg-leiste .knopf, .dlg-inhalt .mit-knopf button { white-space: nowrap; }
.dlg-inhalt .mit-knopf input#tAuftrag { flex: 1 1 auto; min-width: 120px; }

/* Optionen (U9): Seitenleiste links wie EasyExpert */
.optionen-nav { display: none; }
body[data-aktiv-band="optionen"] .tafel[data-tafel="stammdaten"].aktiv,
body[data-aktiv-band="optionen"] .tafel[data-tafel="tarife"].aktiv,
body[data-aktiv-band="optionen"] .tafel[data-tafel="dieserpc"].aktiv,
body[data-aktiv-band="optionen"] .tafel[data-tafel="dokumentvorlagen"].aktiv { display: grid;
  grid-template-columns: 190px minmax(0, 1fr); column-gap: 16px; align-items: start; }
body[data-aktiv-band="optionen"] .tafel.aktiv > * { grid-column: 2; }
body[data-aktiv-band="optionen"] .tafel.aktiv > .optionen-nav { display: flex; flex-direction: column;
  grid-column: 1; grid-row: 1 / span 60; position: sticky; top: 8px; border: 1px solid var(--linie); background: #f6f7f9; }
.optionen-nav button { text-align: left; border: 0; border-bottom: 1px solid var(--linie); background: none;
  padding: 10px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.optionen-nav button:hover:not(:disabled) { background: var(--akzent-hell); }
.optionen-nav button:disabled { color: #a2a8b1; cursor: default; }
/* Optionen: Beschriftung links, Wert rechts wie die EasyExpert-Eigenschaftenliste */
body[data-aktiv-band="optionen"] .formular .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; max-width: 1100px; }
body[data-aktiv-band="optionen"] .formular .raster > label:not(.haken) { display: grid; align-items: center;
  grid-template-columns: 170px minmax(0, 1fr); column-gap: 8px; font-size: 12.5px; color: #333; hyphens: auto; }
body[data-aktiv-band="optionen"] .formular .raster > label.breit,
body[data-aktiv-band="optionen"] .formular .raster > label.hoch,
body[data-aktiv-band="optionen"] .formular .raster > .breit:not(label) { grid-column: 1 / -1; }
body[data-aktiv-band="optionen"] .formular .raster > label > :not(input):not(select):not(textarea):not(.mit-knopf) { grid-column: 2; }
body[data-aktiv-band="optionen"] .formular input, body[data-aktiv-band="optionen"] .formular select,
body[data-aktiv-band="optionen"] .formular textarea { font-size: 13px; padding: 3px 6px; border-radius: 2px; }
body[data-aktiv-band="optionen"] .formular h3 { font-size: 12.5px; text-transform: none; letter-spacing: 0; color: #1b39c9;
  font-weight: 700; background: #eef0f3; margin: 14px 0 6px; padding: 4px 8px; border-bottom: 0; }

/* Bereich Gutachten (U10) */
.ga-bereich { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; }
.ga-baum { max-height: none; background: #fff; }
.ga-baum li[data-ga] { cursor: pointer; padding: 2px 0; }
.ga-baum li[data-ga]:hover { color: var(--akzent); }
.ga-baum li.ga-haupt, .ga-baum li.ga-ordner { font-weight: 600; }
.ga-baum li.ga-ordner li { font-weight: 400; }
.ga-baum li.ga-grau { color: #a2a8b1; }
.ga-baum .ga-bearbeiten { padding: 0 5px; font-size: 11px; margin-left: 4px; }
.ga-vorschau { width: 100%; height: 75vh; border: 1px solid var(--linie); background: #fff; }
body.maske-offen .ga-vorschau { height: calc(100vh - 260px); }
@media print {
  .druck .deckblatt { text-align: center; }
  .druck .deckblatt .deck-titel { font-size: 24pt; font-weight: 700; margin: 60pt 0 8pt; }
  .druck .deckblatt .deck-nr { font-size: 14pt; margin-bottom: 4pt; }
  .druck .deckblatt .deck-zeile { font-size: 12pt; margin-bottom: 18pt; }
  .druck .deckblatt .paare { text-align: left; max-width: 120mm; margin: 0 auto 18pt; }
  .druck .deckblatt .deck-bild img { max-width: 150mm; max-height: 110mm; border: 1px solid #999; }
  .druck .inhaltsverzeichnis ul { list-style: none; padding: 0; line-height: 1.9; font-size: 11pt; }
}
/* Druck aus der geöffneten Maske: Hintergrund-Abbild und Sperrfläche gehören nicht aufs Papier */
@media print {
  .masken-hintergrund, #maskeHintergrund { display: none !important; }
  body.maske-offen::after { display: none !important; content: none; }
  body.maske-offen { overflow: visible !important; }
}

/* DAT-Datei einlesen (AEXPFI): Leiste und Anzeige der Übernahme */
.dat-leiste { margin: 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dat-block { border: 1px solid #c9c9c9; border-left: 3px solid #2f6fb0; border-radius: 4px;
  padding: 8px 12px; margin: 6px 0 14px; background: #f6f9fc; }
.dat-kopf { font-weight: 600; margin-bottom: 6px; }
.dat-block table.ue-tabelle { max-width: 520px; }

/* ==========================================================================
   Dunkle Ansicht (D1) - NUR Bildschirm. Der Druck bleibt immer hell, weil
   dieser Block in @media screen steht und @media print ihn nie sieht.
   "Automatisch" wird in app.js zu data-theme="dark"/"light" aufgeloest.
   Status-Pillen behalten absichtlich ihre hellen Akzentfarben (gut lesbar).
   ========================================================================== */
@media screen {
  :root[data-theme="dark"] {
    --grund:      #15181d;
    --flaeche:    #1e232b;
    --linie:      #3a424e;
    --linie-fein: #2a303a;
    --text:       #e6e9ee;
    --text-leise: #9aa4b2;
    --akzent:     #5a9be0;
    --akzent-hell:#233349;
    --gut:        #46b883;
    --warn:       #d99a3f;
    --fehler:     #ef6b63;
    /* Marken/Mahn-Knopf dunkel: gedämpfter Grund, heller Text – gleich gut lesbar, ohne zu blenden */
    --marke-alt-grund: #2a3366; --marke-alt-text: #dfe4ff; --marke-alt-rand: #6573c9;
    --marke-faellig-grund: #4a3110; --marke-faellig-text: #ffd9a0; --marke-faellig-rand: #b9822e;
    --mahn-grund: #4a2a0e; --mahn-text: #ffd2a1; --mahn-rand: #d0802a; --mahn-grund-hover: #5e3613;
  }
  /* Chrome-Flaechen, die hart kodiert sind */
  :root[data-theme="dark"] .titelzeile,
  :root[data-theme="dark"] .bandreiter,
  :root[data-theme="dark"] #reiter { background: #1a1f27; }
  :root[data-theme="dark"] .titelzeile { border-bottom-color: var(--linie-fein); }
  /* Tabellenkoepfe */
  :root[data-theme="dark"] .liste-tabelle th,
  :root[data-theme="dark"] .ue-tabelle th,
  :root[data-theme="dark"] .protokoll thead th,
  :root[data-theme="dark"] .tafel[data-tafel="liste"] .liste-tabelle th {
    background: #272d36; color: var(--text-leise); }
  /* Formularfelder */
  :root[data-theme="dark"] input,
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea {
    background: #242a33; color: var(--text); border-color: var(--linie); }
  :root[data-theme="dark"] input:focus,
  :root[data-theme="dark"] select:focus,
  :root[data-theme="dark"] textarea:focus,
  :root[data-theme="dark"] table.posten input,
  :root[data-theme="dark"] table.posten input:focus { background: #2b323c; color: var(--text); }
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder { color: #71798a; }
  /* Dialoge und schwebende Flaechen */
  :root[data-theme="dark"] .dlg,
  :root[data-theme="dark"] .frage,
  :root[data-theme="dark"] .kal-kontext,
  :root[data-theme="dark"] .menue,
  :root[data-theme="dark"] .dok-baum,
  :root[data-theme="dark"] .ga-baum { background: #1e232b; color: var(--text); }
  /* Kalender */
  :root[data-theme="dark"] .kal-spalte.heute { background-color: #1b2430; }
  :root[data-theme="dark"] .kal-tag.fremd { background: #181c22; color: #6b7280; }
  :root[data-theme="dark"] .kal-spalte.wochenende,
  :root[data-theme="dark"] .kal-zl-zeile.wochenende .kal-zl-lane { background-color: #171b21; }
  :root[data-theme="dark"] .tchip { background: #272d36; }
  :root[data-theme="dark"] .tchip span { color: #aab2bf; }
  :root[data-theme="dark"] .kal-grid,
  :root[data-theme="dark"] .ga-vorschau { background: #1e232b; }
  /* Verlaeufe (Masken-/Listenkoepfe) flach dunkel statt hell */
  :root[data-theme="dark"] .maske-kopf,
  :root[data-theme="dark"] .ab-kopf,
  :root[data-theme="dark"] .rechner-kopf { background: #222832; }
  :root[data-theme="dark"] .rechner { background: var(--flaeche); }
  /* Zebra/Hover in Listen etwas kraeftiger */
  :root[data-theme="dark"] .liste-tabelle tbody tr:hover { background: #232a33; }
  /* DAT-Block */
  :root[data-theme="dark"] .dat-block { background: #20262f; border-color: var(--linie); }
  /* Markierte Zeile dunkel statt grellgelb */
  :root[data-theme="dark"] .liste-tabelle tbody tr.markiert,
  :root[data-theme="dark"] .liste-tabelle tbody tr.markiert:hover { background: #3a3618; }
}
/* Umschalter in der Titelzeile */
/* Blättern in der Titelzeile (jedes Fenster): kräftige Pfeile wie im Maskenkopf */
.titelzeile .blaettern { display: inline-flex; align-items: center; gap: 4px; margin-left: 12px; }
.titelzeile .blaettern .kleinknopf.pfeil:disabled { opacity: .35; cursor: default; }
.ansicht-wahl { margin-left: 12px; display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: var(--text-leise); white-space: nowrap; }
.ansicht-wahl select { font: inherit; font-size: 12px; padding: 1px 4px; }

/* ------------------------------------------------- Sammelrechnung */
.sr-neu-kopf { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.sr-neu-kopf input { padding: 3px 8px; min-width: 16em; }

/* ------------------------------------------------- Druck-Wasserzeichen (C1) */
#druck[data-wasserzeichen]:not([data-wasserzeichen=""]) { position: relative; }
#druck[data-wasserzeichen]:not([data-wasserzeichen=""])::before {
  content: attr(data-wasserzeichen);
  position: fixed; top: 45%; left: 50%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 110px; font-weight: 700; letter-spacing: .08em;
  color: rgba(120, 120, 120, .14); white-space: nowrap;
  pointer-events: none; z-index: 0;
}

/* ------------------------------------------------- Auto-Speichern-Status */
.auto-status { font-size: 11px; color: var(--gut); white-space: nowrap; margin-left: 10px; }
.auto-status.offen { color: var(--warn); }
@media print { .auto-status { display: none !important; } }

/* ------------------------------------------------- DAT-Simulation (Hinweis) */
#druck[data-simulation="1"]::after {
  content: "SIMULATION — keine echten DAT-Werte, nicht als Rechnung verwenden";
  position: fixed; top: 6mm; left: 0; right: 0; text-align: center;
  color: #b3261e; font-weight: 700; font-size: 12px; letter-spacing: .02em; z-index: 1;
}

/* ------------------------------------------------- Zeittabelle (D3) */
.zeit-neu { margin-bottom: 10px; }
.zeit-neu input, .zeit-neu select { width: 100%; box-sizing: border-box; padding: 4px 6px; }

/* ------------------------------------- Fahrzeugschein-Import + Neu-Dialog */
.schein-drop { border: 2px dashed var(--linie); border-radius: 8px; background: var(--grund);
  padding: 22px 16px; text-align: center; cursor: pointer; margin: 6px 0 10px;
  transition: border-color .12s, background .12s; }
.schein-drop:hover, .schein-drop:focus { border-color: var(--akzent); outline: none; }
.schein-drop.ueber { border-color: var(--akzent); background: var(--akzent-hell); }
.schein-drop-gross { font-size: 16px; font-weight: 600; color: var(--akzent); margin-bottom: 4px; }
.schein-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.kleinknopf.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.kleinknopf.haupt:hover { background: #10406f; }
.schein-hinweis:empty { display: none; }
.schein-hinweis { background: var(--akzent-hell); border-radius: 6px; padding: 8px 10px; }

.na-hintergrund { position: fixed; inset: 0; background: rgba(20, 30, 45, .4); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow: auto; }
.na-dialog { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3); width: 100%; max-width: 560px; }
.na-kopf { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--linie-fein); font-size: 17px; }
.na-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--text-leise); }
.na-x:hover { color: var(--fehler); }
.na-koerper { padding: 16px 18px; }
.na-koerper label.breit { display: block; margin-bottom: 10px; }
.na-koerper select { width: 100%; padding: 6px 8px; }
.na-info { background: var(--akzent-hell); border-radius: 6px; padding: 10px 12px; margin: 0 0 12px; }
.na-nummer { margin: 8px 0 0; }
.na-fuss { display: flex; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--linie-fein); }
/* Datenbanken: Auftragszeile mit Fotos ist klickbar (öffnet die Bildergalerie). */
.db-tabelle tr.db-klickbar { cursor: pointer; }
.db-tabelle tr.db-klickbar:hover td { background: var(--akzent-hell); }
.db-tabelle tr.hat-bilder td:first-child::before { content: "📷 "; }

/* Fotogalerie der Altbestand-Fotos je Gutachten */
.bild-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.bild-kachel { padding: 0; border: 1px solid var(--linie); border-radius: 6px; overflow: hidden;
  background: #000; cursor: pointer; aspect-ratio: 4 / 3; }
.bild-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-kachel:hover { outline: 2px solid var(--akzent); }
.bild-lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(0, 0, 0, .85);
  display: flex; align-items: center; justify-content: center; }
.bild-lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; box-shadow: 0 8px 40px rgba(0, 0, 0, .6); }
.bild-lightbox .lb-x { position: absolute; top: 14px; right: 18px; font-size: 32px; line-height: 1;
  background: none; border: none; color: #fff; cursor: pointer; }
.bild-lightbox .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px;
  line-height: 1; background: none; border: none; color: #fff; cursor: pointer; padding: 0 14px; opacity: .8; }
.bild-lightbox .lb-nav:hover { opacity: 1; }
.bild-lightbox .lb-vor { left: 8px; } .bild-lightbox .lb-nach { right: 8px; }
.bild-lightbox .lb-name { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; }

@media print { .na-hintergrund { display: none !important; } }

/* --------------------------------- Freigaben Rechnungswesen (Admin) */
.rw-badge { font-size: 13px; font-weight: normal; color: #b03030; background: #fbeaea;
  border: 1px solid #e3b4b4; border-radius: 10px; padding: 1px 9px; margin-left: 8px; white-space: nowrap; }
.frg-liste { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 10px; }
.frg-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border: 1px solid var(--linie-fein); border-radius: 6px; }
.frg-zeile input { width: auto; }
.frg-bez { flex: 1; }
.frg-stand { font-size: 12px; border-radius: 10px; padding: 1px 9px; white-space: nowrap; }
.frg-stand.frei { color: #1f7a1f; background: #e7f5e7; border: 1px solid #b7dcb7; }
.frg-stand.zu { color: #b03030; background: #fbeaea; border: 1px solid #e3b4b4; }
/* Gesperrte (nicht freigegebene) Rechnungswesen-Bedienelemente sichtbar machen. */
[data-rwschutz] { opacity: .5; cursor: not-allowed !important; }

/* --------------------------------- Anmeldung (Terminal-Nr. + PIN) */
.anmelde-stand { font-size: 12px; color: var(--text-leise); margin-right: 6px; white-space: nowrap; }
.anmelde-fehler { color: #b03030; min-height: 1.2em; margin: 4px 0 0; }
/* Anmeldung: als Fenster wie bisher; beim Start ohne Sitzung als ganze Seite (Entwurf „Anmeldung“) */
.anmelde-seite, .anmelde-hilfe { display: none; }
.anmelde-form, .anmelde-karte { display: contents; }
#anmeldeDialog.anmelde-ganz { background: var(--grund); padding: 0; }
#anmeldeDialog.anmelde-ganz .anmelde-dialog { display: flex; width: 100%; max-width: none; height: 100%; max-height: none; box-shadow: none;
  border: 0; border-radius: 0; background: var(--grund); overflow: auto; }
#anmeldeDialog.anmelde-ganz .anmelde-seite { display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  flex: 1 1 50%; padding: 48px 56px; background: var(--akzent); color: #fff; }
.anmelde-marke { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; }
.anmelde-logo { width: 40px; height: 40px; border-radius: 8px; background: rgba(255,255,255,.16);
  display: flex; align-items: center; justify-content: center; }
.anmelde-claim { max-width: 460px; }
.anmelde-claim h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.2; }
.anmelde-claim p { margin: 0; font-size: 16px; color: rgba(255,255,255,.85); }
#anmeldeDialog.anmelde-ganz .anmelde-form { display: flex; align-items: center; justify-content: center; flex: 1 1 50%; padding: 48px 24px; }
#anmeldeDialog.anmelde-ganz .anmelde-karte { display: block; width: 100%; max-width: 400px; background: var(--flaeche);
  border: 1px solid var(--linie); border-radius: 10px; overflow: hidden; }
#anmeldeDialog.anmelde-ganz .na-kopf strong { font-size: 18px; }
#anmeldeDialog.anmelde-ganz #anmeldeSchliessen { display: none; }   /* „Abbrechen“ bleibt unten */
#anmeldeDialog.anmelde-ganz .na-koerper input { font-size: 16px; padding: 10px 12px; }
#anmeldeDialog.anmelde-ganz #anmeldeSenden { padding: 9px 22px; font-size: 15px; }
#anmeldeDialog.anmelde-ganz .anmelde-hilfe { display: block; margin: 0; padding: 0 18px 14px; font-size: 12px;
  color: var(--text-leise); text-align: center; }
@media (max-width: 760px) {
  #anmeldeDialog.anmelde-ganz .anmelde-dialog { flex-direction: column; }
  #anmeldeDialog.anmelde-ganz .anmelde-seite { flex: 0 0 auto; padding: 20px 16px; }
  .anmelde-claim h1 { font-size: 20px; margin-bottom: 6px; }
  .anmelde-claim p { font-size: 14px; }
  #anmeldeDialog.anmelde-ganz .anmelde-form { padding: 20px 16px; align-items: flex-start; }
}
#ichBereich { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------------- E-Mail-Sende-Dialog */
.mail-dialog { max-width: 640px; width: 92vw; }
.mail-dialog textarea { width: 100%; font-family: inherit; resize: vertical; }
.mail-dialog input, .mail-dialog select { width: 100%; }
/* Kontoauszüge buchen: links Umsätze nach Tag, rechts die Rechnung zum angeklickten Eingang (wie EasyExpert „Auszüge“) */
#bankDialog .bank-dialog { max-width: 1500px; width: 97vw; height: 92vh; display: flex; flex-direction: column; }
#bankDialog .bank-dialog .bank-koerper { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.bank-werkzeug, .bank-filterzeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bank-werkzeug { background: var(--grund); border: 1px solid var(--linie); border-radius: 6px; padding: 4px 6px; }
.bank-zeitraum input { width: auto; }
.bank-summen { margin-left: auto; font-size: 13px; white-space: nowrap; }
.bank-summen .haben { color: var(--gut); font-weight: 600; } .bank-summen .soll { color: var(--fehler); font-weight: 600; }
.bank-statusleiste { background: var(--akzent); color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 13px; min-height: 1.4em; }
.bank-tabelle .bank-ungeb { width: 95px; text-align: right; white-space: nowrap; background: rgba(220, 53, 69, .14); color: var(--fehler); }
.bank-tabelle .bank-tag td { cursor: pointer; } .bank-tabelle .bank-tag .pfeil { display: inline-block; width: 1.2em; }
.buch-zahl-vorlage { flex-basis: 100%; background: var(--akzent-hell); border: 1px solid var(--akzent); border-radius: 4px; padding: 4px 8px; font-size: 13px; }
.buch-zahlungen-liste .zahl-weg { border: 0; background: none; color: var(--fehler); cursor: pointer; font-weight: 700; }
.bank-dialog .bank-filterzeile select { width: auto; flex: 0 0 auto; }
.bank-dialog .bank-filterzeile #bankSuche { width: auto; flex: 1; min-width: 180px; }
.bank-zwei { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: 10px; }
.bank-links, .bank-rechts { overflow: auto; border: 1px solid var(--linie); border-radius: 6px; background: var(--flaeche); }
.bank-rechts { padding: 10px 12px; }
.bank-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.bank-tabelle td { padding: 3px 6px; border-bottom: 1px solid var(--linie-fein, #e5e5e5); vertical-align: top; }
.bank-tabelle tr[data-bank-u] { cursor: pointer; }
.bank-tabelle .bank-tag td { background: var(--grund); font-weight: 600; position: sticky; top: 0; }
.bank-tabelle .bank-ok { width: 18px; text-align: center; color: var(--gut); font-weight: 700; }
.bank-tabelle .bank-betrag { white-space: nowrap; text-align: right; width: 95px; }
.bank-tabelle .bank-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bank-tabelle .bank-re { white-space: nowrap; width: 120px; }
.bank-tabelle tr.bank-gebucht, .bank-tabelle tr.bank-erledigt { background: rgba(46, 160, 67, .2); }
.bank-tabelle tr.bank-unsicher .bank-re, .bank-tabelle tr.bank-mehrere .bank-re { background: rgba(212, 160, 23, .22); }
.bank-tabelle tr.bank-ausgang .bank-betrag { color: var(--fehler); }
.bank-tabelle tr.aktiv { outline: 2px solid var(--akzent); outline-offset: -2px; background: var(--akzent-hell); }
.bank-umsatz-betrag { font-size: 22px; font-weight: 700; }
.bank-umsatz-betrag.haben { color: var(--gut); } .bank-umsatz-betrag.soll { color: var(--fehler); }
.bank-werte { border-collapse: collapse; font-size: 13px; margin: 4px 0; }
.bank-werte th { text-align: left; font-weight: normal; color: var(--text-leise); padding: 1px 12px 1px 0; vertical-align: top; }
.bank-zweck { font-size: 13px; background: var(--grund); padding: 6px 8px; border-radius: 4px; margin: 6px 0; word-break: break-word; }
.bank-h { margin: 12px 0 6px; font-size: 14px; }
.bank-karte { border: 1px solid var(--linie); border-left: 4px solid var(--gut); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.bank-karte.alt { border-left-color: var(--warn); }
.bank-marke { font-size: 12px; color: var(--text-leise); }
.bank-karte-knoepfe { display: flex; gap: 8px; margin-top: 6px; }
.bank-gebucht-info { border: 1px solid var(--gut); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }
#bankSucheRe { width: 100%; box-sizing: border-box; margin-bottom: 8px; }
.bank-notiz-feld { display: block; margin: 6px 0 4px; font-size: 13px; }
.bank-notiz-feld textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; }
.bank-tabelle .bank-notiz { color: var(--akzent); font-size: 12px; }
.bank-tabelle .bank-ok { width: 26px; }
.bank-tabelle .bank-ok input { width: 16px; height: 16px; margin: 2px 0 0; cursor: pointer; }
/* Eigenes Fenster (…/?fenster=bank): das Bank-Fenster füllt das ganze Browserfenster, ohne Abdunklung */
body.bank-fenster #bankDialog { background: var(--grund); padding: 0; }
body.bank-fenster #bankDialog .bank-dialog { max-width: none; width: 100vw; height: 100vh; border-radius: 0; border: 0; }
@media (max-width: 900px) { .bank-zwei { grid-template-columns: 1fr; } .bank-dialog { height: auto; } }
/* Postfächer (Mehr-Konten) */
fieldset.mailkonto { border: 1px solid var(--linie-fein); border-radius: 6px; margin: 8px 0; padding: 8px 12px; }
fieldset.mailkonto legend { font-weight: 600; padding: 0 6px; }
/* Posteingang */
#peTabelle table { width: 100%; border-collapse: collapse; }
#peTabelle th, #peTabelle td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
#peTabelle tr.pe-erledigt { opacity: .7; }
.pe-zu { color: #1f7a1f; font-weight: 600; }
.pe-tr { color: var(--akzent); font-weight: 600; }
.pe-hinweis { display: inline-block; white-space: nowrap; font-size: .82em; font-weight: 600;
  padding: 1px 7px; border-radius: 10px; border: 1px solid transparent; }
.pe-hinweis-abgeschlossen { color: #1f7a1f; background: #e7f4e7; border-color: #bfe0bf; }
.pe-hinweis-zahlung { color: #0a5aa0; background: #e6f0fa; border-color: #bcd6ef; }
.pe-hinweis-kuerzung { color: #a05a00; background: #fbf0e0; border-color: #efd9b8; }
.pe-kat { display: inline-block; white-space: nowrap; font-size: .82em; font-weight: 600;
  padding: 1px 7px; border-radius: 10px; border: 1px solid transparent; }
.pe-kat-reklame { color: #a04000; background: #fbe9e0; border-color: #f0c9b2; }
.pe-kat-newsletter { color: #5a3a9a; background: #eee7fb; border-color: #d4c6ef; }
.pe-kat-bewerbung { color: #0a5aa0; background: #e6f0fa; border-color: #bcd6ef; }
.pe-abmelden { font-size: .82em; white-space: nowrap; }
.pe-triage-summe { margin: 0 0 6px; }

/* --------------------------------- Altbestand: gezielte Kriterien */
.db-kriterien { flex-wrap: wrap; gap: 6px; align-items: center; }
/* width: auto hebt "alle Eingabefelder 100 %" auf – sonst steht jedes Suchfeld in einer eigenen Zeile
   und schiebt die Tabelle aus dem Bild. */
.db-kriterien input { padding: 4px 6px; border: 1px solid var(--linie); border-radius: 4px;
  background: var(--flaeche); color: var(--text); width: auto; flex: 1 1 130px; min-width: 110px; max-width: 220px; }
#dbSuche { width: auto; flex: 1 1 260px; min-width: 180px; }
/* Detailansicht „alle Felder“ */
.db-detail [data-filter] { margin-bottom: 8px; }
.db-detail .na-koerper { max-height: 70vh; overflow: auto; }
.db-detail-ueber { font-size: 13px; margin: 12px 0 4px; }
.db-felder th { width: 34%; text-align: left; font-weight: 600; color: var(--text-leise); word-break: break-all; vertical-align: top; }
.db-felder td { white-space: pre-wrap; word-break: break-word; }
/* Altbestand-Akte: Reiter und Rechnungsblöcke */
.db-akte-reiter { margin-bottom: 10px; flex-wrap: wrap; }
.db-akte-rechnung { border: 1px solid var(--linie-fein); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 10px; }
.db-akte-rechnung table { margin-top: 6px; }
.db-kriterien input:focus { border-color: var(--akzent); outline: none; }

/* ------------------------------------- HU-Prüfplakette (Fahrzeugschein) */
.hu-info { display: flex; align-items: center; gap: 8px; min-height: 22px;
  color: var(--text-leise); font-size: 13px; }
.hu-info:empty { display: none; }
.hu-plakette { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700;
  font-size: 13px; border: 2px solid rgba(0,0,0,.25); text-shadow: 0 1px 1px rgba(0,0,0,.35);
  flex: 0 0 auto; }

/* Festgeschriebene Rechnung (GoBD, W3) */
.fest-info { border-left: 4px solid var(--warn); padding: 6px 10px; margin: 6px 0 10px; }
@media print { .fest-info { display: none !important; } }

/* ---------------------------------------------- W5: Oberfläche aufgeräumt */
/* A: Büro als Auswahl, kurzer Speicherort */
.bu-label { display: inline-flex; flex-direction: row; align-items: center; gap: 4px; font-size: 12px; color: var(--text-leise); }
.bu-wahl { font: inherit; padding: 2px 4px; border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--flaeche); color: var(--text); }
/* B: beschriftete Gruppen im Menüband, nicht verfügbare Knöpfe ausgeblendet */
.bandinhalt .gruppe[data-titel] { position: relative; padding-bottom: 14px; }
.bandinhalt .gruppe[data-titel]::after { content: attr(data-titel); position: absolute; left: 0; right: 0;
  bottom: 0; text-align: center; font-size: 10.5px; color: var(--text-leise); white-space: nowrap; }
body:not(.nv-zeigen) .nicht-verfuegbar { display: none !important; }
/* C: Zeile „Weitere Filter“ */
.liste-mehr { background: var(--grund); border-top: 0; }
#btnListeMehr.aktiv { border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
/* D: Spalte „Stand“ */
.l-stand { display: inline-block; min-width: 46px; text-align: center; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px; white-space: nowrap; }
.l-stand.rot { color: var(--fehler); background: #fbe6e3; }
.l-stand.gelb { color: #8a5200; background: #fbf0dc; }
.l-stand.gruen { color: var(--gut); background: #e6f3ec; }
.l-stand.leer { color: var(--text-leise); font-weight: 400; }
/* F: auf breiten Bildschirmen steht die Auftragsübersicht neben der Liste */
@media (min-width: 1600px) {
  .tafel[data-tafel="liste"].aktiv { display: grid; grid-template-columns: minmax(0, 1fr) 560px;
    column-gap: 12px; align-items: start; }
  .tafel[data-tafel="liste"] > * { grid-column: 1; }
  .tafel[data-tafel="liste"] > .uebersicht { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; }
  .tafel[data-tafel="liste"] .ue-raster { grid-template-columns: 1fr; }
}
/* W5: Kopfzeile niedrig halten – Beschriftung neben der Auswahl statt darüber */
.titelzeile label { flex-direction: row; align-items: center; gap: 4px; }
/* W5: Suchzeile passt bei 1.366 px in eine Zeile */
.liste-leiste #listeSuchfeld { max-width: 150px; }
.liste-leiste #listeStatus { max-width: 170px; }
.liste-leiste .liste-suche { flex: 1 1 220px; min-width: 200px; max-width: 360px; }
/* W5: „Programm-Hilfe“ im Menüband erst ab breiten Bildschirmen – sonst „?“ oben bzw. F1 */
@media (max-width: 1499px) { .bandinhalt[data-band-inhalt="manager"] .gruppe.rechts { display: none; } }
.titelzeile #ichWahl { max-width: 200px; }

/* ---------------------------------------------- W5 G–K: Auftragsmaske */
.maske-titel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.maske-titel strong { font-size: 15px; margin-left: 0; }
.maske-untertitel { color: var(--text-leise); font-size: 12px; }
.ergebnis #reiter .reiter-gruppe { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-leise); padding: 10px 10px 2px; }
.ergebnis #reiter button[data-tab]:not(.unterpunkt) { display: flex; align-items: center; gap: 4px; }
.nav-stand { margin-left: auto; font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 8px; line-height: 16px; }
.nav-stand.rot { color: var(--fehler); background: #fbe6e3; }
.nav-stand.gelb { color: #8a5200; background: #fbf0dc; }
.nav-stand.gruen { color: var(--gut); }
label.pflicht { position: relative; }
label.pflicht::before { content: '*'; position: absolute; left: -8px; top: 1px; color: var(--fehler); font-weight: 700; }
.feld-fehlt { border-color: var(--fehler) !important; box-shadow: 0 0 0 1px var(--fehler) inset; background: #fff7f6; }
.seite-fehlt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 12px 6px; padding: 6px 10px;
  background: #fbe6e3; border: 1px solid #efc2bc; border-radius: var(--radius); color: #6b2620; font-size: 12px; }
.seite-fehlt strong { color: var(--fehler); }
.seite-fehlt-ziel { font: inherit; background: #fff; border: 1px solid #efc2bc; border-radius: 10px; padding: 1px 8px;
  color: #6b2620; cursor: pointer; }
.maske-fuss { display: flex; align-items: center; gap: 10px; }
.maske-fuss .fuss-pfeil { background: #fff; color: #2d4f8e; font-weight: 700; }

/* W6: Kontoregeln */
.kontoregeln select, .kontoregeln input { font: inherit; padding: 3px 6px; }

/* W7: Import und Einrichtungsassistent */
#importDialog .na-dialog { max-width: 980px; width: 94vw; }
#einrichtDialog .na-dialog { max-width: 640px; width: 94vw; }
.import-rahmen { max-height: 52vh; overflow: auto; border: 1px solid var(--linie); border-radius: var(--radius); }
.import-rahmen table { margin: 0; }
.import-rahmen select { font: inherit; padding: 2px 4px; }
.fehler-text { color: var(--fehler); }
.ea-liste { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.ea-liste li.ok { color: var(--gut); }
.ea-liste li.offen { color: var(--text); }
.na-kopf .leise { margin-left: 8px; font-size: 12px; }

/* KI-Schadenvorschlag: Fotoauswahl und Vorschlagsliste */
.ki-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin: 10px 0; }
.ki-foto { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--linie); border-radius: 6px;
           padding: 6px; cursor: pointer; font-size: 12px; position: relative; }
.ki-foto img { width: 100%; height: 90px; object-fit: cover; border-radius: 4px; }
.ki-foto input { position: absolute; top: 10px; left: 10px; }
.ki-foto:has(input:checked) { outline: 2px solid var(--akzent, #2b6cb0); }
.ki-tabelle select { max-width: 190px; }
.ki-tabelle td { vertical-align: top; }

/* Geheimfelder (DAT-Passwort, Signatur): bewusst type="text" mit Punkt-Maske statt type="password" -
   nur so füllen Chrome/Edge ihr gespeichertes Kennwort nicht von selbst ein. */
.verdeckt { -webkit-text-security: disc; text-security: disc; }
.verdeckt::placeholder { -webkit-text-security: none; }

/* Tagesübersicht („Heute“) */
/* Zahlungsabgleich mit Kontoauszügen (Auswertung › Forderungen) */
.abgleich-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.abgleich-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.abgleich-filter select { width: auto; padding: 4px 8px; }
/* Auftragsliste: Status-Chips und Knöpfe rechts in der Suchzeile (Entwurf „Auftragsliste“) */
.liste-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.liste-chips button { font: inherit; font-size: 12px; padding: 4px 10px; border: 1px solid var(--linie); border-radius: 999px;
  background: var(--flaeche); color: var(--text); cursor: pointer; white-space: nowrap; }
.liste-chips button:hover { border-color: var(--akzent); }
.liste-chips button.aktiv { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); font-weight: 600; }
.liste-rechts { display: inline-flex; gap: 6px; margin-left: auto; }
/* Startseite „Heute“ nach dem Entwurf aus Claude Design: Begrüßung, Schnellknöpfe, Kennzahl-Kacheln */
.heute-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.heute-kopf h2 { margin: 2px 0 0; font-size: 24px; }
.heute-schnell { display: flex; flex-wrap: wrap; gap: 8px; }
.heute-schnell .kleinknopf { padding: 8px 14px; font-size: 14px; }
.heute-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.heute-kachel { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 8px; padding: 14px 16px; }
.heute-kachel:hover { border-color: var(--akzent); }
.heute-kachel .titel { font-size: 13px; color: var(--text-leise); }
.heute-kachel .wert { font-size: 30px; font-weight: 700; line-height: 1.2; }
.heute-kachel .fuss { font-size: 12px; color: var(--text-leise); }
.heute-kachel.warn .wert { color: var(--warnung, #a8620a); }
.heute-kachel.fehler .wert { color: var(--fehler, #b3261e); }
.heute-gut { color: var(--gut, #1a7a4c); font-weight: 600; margin: 0 0 4px; }
.heute-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.heute-karte { border: 1px solid var(--linie); border-radius: var(--radius); padding: 10px 12px; background: var(--flaeche, #fff); }
.heute-karte h3 { margin: 0 0 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.heute-karte h3 .zahl { font-size: 1.4em; }
.heute-karte ul { list-style: none; margin: 0; padding: 0; }
.heute-karte li { padding: 3px 0; border-top: 1px solid var(--linie); }
.heute-karte li[data-heute-auftrag] { cursor: pointer; }
.heute-karte li[data-heute-auftrag]:hover { background: var(--hover, rgba(0,0,0,.04)); }
.heute-karte .ueber { color: #b45309; font-weight: 600; }

/* Benutzer und Rechte: Rechte je Standort als Tabelle (sehen / Gutachten / Buchhaltung) */
.rechte-tabelle { border-collapse: collapse; margin-top: 4px; }
.rechte-tabelle th, .rechte-tabelle td { padding: 2px 12px; text-align: center; font-weight: normal; }
.rechte-tabelle th:first-child, .rechte-tabelle td:first-child { text-align: left; }
.rechte-tabelle tbody tr:nth-child(odd) { background: var(--linie-fein); }
details.aeltere-eintraege > summary { cursor: pointer; font-weight: 600; margin: 18px 0 6px; }