/* App-Muster: Auth, Shell, Listen, Drawer, Belege.
   Farbe trägt Bedeutung – alles andere bleibt monochrom. */

/* ---------------------------------------------------------------- Auth (Setup + Login) */

.auth-zentriert {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.auth-karte {
  width: 100%;
  max-width: 380px;
  padding: 32px;
}

.wortmarke { font-size: 17px; color: var(--ink); white-space: nowrap; }
.wortmarke strong { font-weight: 600; }
.wortmarke span { color: var(--gray-500); font-weight: 400; }

.auth-karte .claim {
  color: var(--gray-500);
  margin: 4px 0 28px;
  font-size: 13px;
}

.formular-stapel { display: flex; flex-direction: column; gap: 16px; }
.formular-stapel .btn { margin-top: 8px; }

.formular-zeile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
/* Gleiche Höhe für nebeneinanderstehende Felder – siehe .erfassungszeile. */
.formular-zeile .field .input:not(textarea) { height: 40px; }

.formular-fehler {
  background: var(--danger-bg);
  color: var(--danger-text);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}

.formular-hinweis {
  background: var(--success-bg);
  color: var(--success-text);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}

.auth-titel { font-size: 15px; font-weight: 600; margin-bottom: 16px; }
.auth-untertitel { color: var(--gray-500); font-size: 13px; margin: -12px 0 16px; }

/* ---------------------------------------------------------------- Shell */

.shell { display: flex; min-height: 100dvh; }

.seitenleiste {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 224px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 20px 12px 16px;
}

.seitenleiste .wortmarke { font-size: 14px; padding: 0 10px 18px; }
.seitenleiste .wortmarke span { display: block; font-size: 11px; margin-top: 1px; }

/* „Verwaltung"-Etikett neben der Wortmarke — nur im App-Rahmen, nie auf Belegen. */
.wortmarke span.wortmarke-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.5px 6px;
  margin: 0 0 0 6px;
  vertical-align: 2px;
}

.seitenleiste nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.nav-punkt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--gray-600);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
}
.nav-punkt .icon { color: var(--gray-500); flex-shrink: 0; }
.nav-gruppe { font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gray-400); padding: 14px 12px 4px; }
.nav-punkt:hover { background: rgba(0, 0, 0, 0.04); text-decoration: none; color: var(--ink); }
.nav-punkt.aktiv { background: var(--accent-bg); color: var(--accent); }
.nav-punkt.aktiv .icon { color: var(--accent); }

.seitenleiste-fuss {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.seitenleiste-fuss .benutzer {
  font-size: 12.5px;
  color: var(--gray-500);
  padding-left: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-leise {
  background: none;
  border: none;
  color: var(--gray-500);
  padding: 8px;
  border-radius: var(--radius);
  cursor: pointer;
  display: inline-flex;
}
.btn-leise:hover { background: rgba(0, 0, 0, 0.05); color: var(--ink); }

.inhalt { flex: 1; min-width: 0; }
.inhalt-innen {
  max-width: 1320px;
  margin: 0 auto;
  padding: 28px 40px 96px;
}

.seiten-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.seiten-kopf h1 { font-size: 19px; letter-spacing: -0.01em; }
.seiten-kopf .unterzeile,
.beleg-kopf .unterzeile { color: var(--gray-500); font-size: 13px; margin-top: 2px; }
.seiten-kopf .aktionen { display: flex; gap: 8px; }

/* Beleg-Vollseite: Navigation tritt zurück */
.beleg-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.beleg-kopf .zurueck {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--gray-600);
  cursor: pointer;
}
.beleg-kopf .zurueck:hover { border-color: var(--gray-400); text-decoration: none; }
.beleg-kopf h1 { font-size: 19px; flex: 1; }
.beleg-kopf .beleg-titel { flex: 1; min-width: 0; }

/* Telefon: Aktionen rutschen unter den Titel statt ihn zu quetschen. */
@media (max-width: 560px) {
  .seiten-kopf { flex-wrap: wrap; }
  .seiten-kopf .aktionen { flex-wrap: wrap; }
  .beleg-kopf { flex-wrap: wrap; row-gap: 10px; }
  .beleg-kopf h1, .beleg-kopf .beleg-titel { flex-basis: calc(100% - 46px); }
}

/* ---------------------------------------------------------------- Kennzahlen */

.kpi-raster {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.kpi { padding: 16px 20px; }
.kpi .kpi-neben { color: var(--gray-500); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.kpi .kpi-wert {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-top: 6px;
  letter-spacing: -0.01em;
}
.kpi.danger .kpi-wert { color: var(--danger-text); }
/* Fünf Beträge nebeneinander brauchen Platz – darunter steht „Noch nicht abgerechnet"
   in einer eigenen Zeile über den vier Rechnungs- und Umsatzkacheln. */
@media (max-width: 1280px) {
  .kpi-raster { grid-template-columns: repeat(4, 1fr); }
  .kpi-raster .kpi-breit { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Abschnitte & Tabellen */

.abschnitt { margin-bottom: 32px; }
.abschnitt-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 24px;
  margin-bottom: 8px;
}

.tabelle-karte { overflow: hidden; }
.tabelle-scroll { overflow-x: auto; }

table.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th {
  text-align: left;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tabelle td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.tabelle th:first-child, .tabelle td:first-child { padding-left: 20px; }
.tabelle th:last-child, .tabelle td:last-child { padding-right: 20px; }
.tabelle tbody tr:last-child td { border-bottom: none; }
.tabelle tbody tr.klickbar { cursor: pointer; }
.tabelle tbody tr.klickbar:hover { background: rgba(0, 0, 0, 0.02); }
.tabelle tbody tr.klickbar:focus-visible,
.tabelle tbody tr.klickbar:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.tabelle th.num, .tabelle td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabelle .neben { color: var(--gray-500); font-size: 12.5px; margin-top: 1px; white-space: normal; }
.dok-dateiname {
  margin-left: 24px;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Mehrzeilige Tätigkeitsbeschreibungen behalten ihre Absätze. */
.zeile-beschreibung { white-space: pre-line; }
.tabelle .gedimmt { opacity: 0.55; }

/* Sekundärspalten treten auf dem Telefon zurück statt die Tabelle zu quetschen;
   .nur-mobil holt die wichtigste davon als Nebenzeile zurück. */
.nur-mobil { display: none; }
@media (max-width: 560px) {
  .tabelle .mobil-weg { display: none; }
  .tabelle .nur-mobil { display: block; }
  .tabelle th, .tabelle td { padding-left: 8px; padding-right: 8px; }
  .tabelle th:first-child, .tabelle td:first-child { padding-left: 14px; }
  .tabelle th:last-child, .tabelle td:last-child { padding-right: 14px; }
  /* 27 px hohe Knöpfe trifft man mit dem Daumen schlecht. */
  .btn-klein { padding: 9px 14px; }
}

.leer {
  padding: 44px 24px;
  text-align: center;
  color: var(--gray-500);
  font-size: 13.5px;
}
.leer a { font-weight: 500; }

/* ---------------------------------------------------------------- Verlauf (Beleg-Detail) */

.verlauf-zeile {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.verlauf-zeile:last-child { border-bottom: none; }

/* ---------------------------------------------------------------- Zugangsdaten (Einstellungen) */

.zugang-raster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 16px;
  /* Beide Karten gleich hoch, obwohl die Passwort-Karte ein Feld mehr hat. */
  align-items: stretch;
}
.zugang-raster .abschnitt { display: flex; flex-direction: column; }
.zugang-raster .card { flex: 1; }
/* Schiebt den Knopf ans Kartenende – so stehen beide auf einer Linie. */
.zugang-fuss { display: flex; justify-content: flex-end; margin-top: auto; }

/* Testmail links, Speichern rechts – auf schmalen Telefonen untereinander. */
.mail-fuss { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mail-fuss .btn { flex: 1 1 auto; }
@media (min-width: 561px) {
  .mail-fuss .btn { flex: 0 0 auto; }
}
@media (max-width: 820px) {
  .zugang-raster { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- Stammdaten (Kundendetail) */

.stammdaten-zeile {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 16px;
  padding: 6px 0;
}
.stammdaten-zeile .micro-label { padding-top: 2px; }
@media (max-width: 560px) {
  .stammdaten-zeile { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
}

/* ---------------------------------------------------------------- Drawer */

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 29, 31, 0.32);
  z-index: 40;
  animation: einblenden 140ms ease;
}
/* Zentrierter Dialog (Anlegen/Bearbeiten) */
.drawer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 48px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: aufsteigen 160ms cubic-bezier(0.25, 0.8, 0.4, 1);
}
@keyframes aufsteigen { from { transform: translate(-50%, calc(-50% + 12px)); opacity: 0; } }
@keyframes einblenden { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer-overlay { animation: none; }
}
@keyframes aufsteigen-mobil { from { transform: translateY(16px); opacity: 0; } }
@media (max-width: 560px) {
  /* Auf dem Telefon als Bottom-Sheet */
  .drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: auto;
    max-height: calc(100dvh - 40px);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: none;
    animation-name: aufsteigen-mobil;
  }
  /* Der Home-Indicator des iPhones liegt sonst auf den Knöpfen. */
  .drawer-fuss { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

.drawer-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-kopf h2 { font-size: 15px; }
.drawer-koerper { flex: 1; overflow-y: auto; padding: 20px 24px; }
.drawer-fuss {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------------- Formulare */

select.input { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; }
textarea.input { resize: vertical; min-height: 72px; line-height: 1.45; }

.schalter { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; user-select: none; }
.schalter input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }

.segment {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}
.segment button {
  border: none;
  background: none;
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  cursor: pointer;
}
.segment button + button { border-left: 1px solid var(--line); }
.segment button.aktiv { background: var(--accent-bg); color: var(--accent); }

/* Eingabefelder zeigen den Fokus über Rand und Ring (base.css) – eine zusätzliche Kontur
   doppelte den Rahmen nur. */
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- Schnell-Erfassung (Zeiten) */

.erfassungszeile {
  padding: 20px 24px;
  margin-bottom: 40px;
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) 150px 108px 108px 100px 100px;
  grid-template-areas:
    "projekt datum beginn ende pause km"
    "taetigkeit taetigkeit taetigkeit taetigkeit taetigkeit taetigkeit"
    "fuss fuss fuss fuss fuss fuss"
    "meldung meldung meldung meldung meldung meldung";
  gap: 14px 16px;
  /* start + feste Feldhöhe: Safari baut date/time-Felder höher als Text-, Zahlen-
     und Auswahlfelder (46 statt 42 px), auf dem iPhone noch ausgeprägter. Bei
     end-Ausrichtung standen die Beschriftungen einer Zeile dadurch versetzt.
     Eine feste Höhe ist hier bewusst gewählt: Sie hängt an keinem Flex- oder
     Stretch-Verhalten, das native Steuerelemente unterschiedlich auslegen. */
  align-items: start;
}
.erfassungszeile .field .input:not(textarea) { height: 46px; }
.erfassungszeile .field:nth-child(1) { grid-area: projekt; }
.erfassungszeile .field:nth-child(2) { grid-area: datum; }
.erfassungszeile .field:nth-child(3) { grid-area: beginn; }
.erfassungszeile .field:nth-child(4) { grid-area: ende; }
.erfassungszeile .field:nth-child(5) { grid-area: pause; }
.erfassungszeile .field:nth-child(6) { grid-area: km; }
.erfassungszeile .field:nth-child(7) { grid-area: taetigkeit; }
.erfassungszeile .erfassung-fuss {
  grid-area: fuss;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.erfassungszeile .btn { height: 42px; padding: 10px 24px; }
.erfassungszeile [data-meldung] { grid-area: meldung; }
.erfassungszeile [data-meldung]:empty { display: none; }

/* Die Erfassung ist das Hauptwerkzeug der Seite – ihre Felder dürfen größer sein. */
.erfassungszeile .input {
  font-size: 15px;
  padding: 11px 12px;
}
.erfassungszeile textarea.input {
  min-height: 68px;
  resize: none; /* wächst beim Schreiben automatisch mit */
  line-height: 1.5;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .erfassungszeile {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "projekt projekt datum"
      "beginn ende pause"
      "km km km"
      "taetigkeit taetigkeit taetigkeit"
      "fuss fuss fuss"
      "meldung meldung meldung";
  }
}
@media (max-width: 560px) {
  /* Auf dem Telefon steht in jeder Zeile nur EIN Steuerelement-Typ: Beginn und Ende
     sind beide `time` und damit immer gleich hoch, Pause (`number`) bekommt eine
     eigene Zeile. Vorher standen time und number nebeneinander – iOS gibt ihnen
     unterschiedliche Eigenhöhen, wodurch die Beschriftungen versetzt saßen.
     Diese Aufteilung kann das strukturell nicht mehr. */
  .erfassungszeile {
    padding: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "projekt projekt"
      "datum datum"
      "beginn ende"
      "pause km"
      "taetigkeit taetigkeit"
      "fuss fuss"
      "meldung meldung";
  }
  .erfassungszeile .erfassung-fuss .btn { width: 100%; }
}

/* ---------------------------------------------------------------- Beleg-Vollseiten */

.beleg-spalten {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 1100px) {
  .beleg-spalten { grid-template-columns: 1fr; }
}

.beleg-formular { padding: 20px 24px; }

.eintrag-wahl {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  max-height: 320px;
  overflow-y: auto;
}
.eintrag-wahl label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
}
.eintrag-wahl label:last-child { border-bottom: none; }
.eintrag-wahl input { accent-color: var(--accent); flex-shrink: 0; }
.eintrag-wahl .wahl-text { flex: 1; min-width: 0; }
.eintrag-wahl .wahl-text .neben { color: var(--gray-500); font-size: 12px; }
.eintrag-wahl .wahl-zahlen { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gray-600); }

/* Positions-Editor (Angebot / freie Rechnung) */
.positions-editor { display: flex; flex-direction: column; gap: 8px; }
.positions-zeile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px 72px 90px 28px;
  gap: 8px;
  align-items: center;
}
.positions-zeile .input { padding: 7px 10px; font-size: 13px; }

/* ---------------------------------------------------------------- Vorschau (Papier-Anmutung) */

.vorschau {
  padding: 34px 38px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.04);
}
.vorschau .micro-label { font-size: 9.5px; }
.vorschau-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.vorschau-kopf .wortmarke { font-size: 14px; }
.vorschau-claim { color: var(--gray-400); font-size: 10.5px; text-align: right; }
.vorschau-linie-stark { border: none; border-top: 1.5px solid var(--ink); margin: 8px 0 22px; }
.vorschau-linie { border: none; border-top: 1px solid var(--line); margin: 22px 0 10px; }
.vorschau-adressen { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.vorschau-empfaenger { margin-top: 6px; font-size: 13px; }
.vorschau-absender { margin-top: 6px; color: var(--gray-500); font-size: 11.5px; }
.vorschau-titel { font-weight: 600; font-size: 16px; margin-bottom: 12px; }
.vorschau-meta { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 24px; }
.vorschau-meta .micro-label { margin-bottom: 3px; }
.vorschau-nummer { color: var(--accent); font-weight: 600; }
.vorschau-dezent { color: var(--gray-400); font-style: italic; }
.vorschau-intro { margin: 0 0 18px; color: var(--gray-600); }
.vorschau-tabelle { width: 100%; border-collapse: collapse; }
.vorschau-tabelle th { text-align: left; padding-bottom: 5px; border-bottom: 1.5px solid var(--ink); }
.vorschau-tabelle td { padding: 9px 0 3px; vertical-align: top; }
.vorschau-tabelle td.num { text-align: right; font-variant-numeric: tabular-nums; padding-left: 14px; white-space: nowrap; }
.vorschau-zwischensumme td {
  font-weight: 600;
  color: var(--gray-600);
  border-top: 1px solid var(--line);
}
.vorschau-gruppe {
  font-weight: 600;
  color: var(--gray-600);
  padding-top: 10px !important;
}
.vorschau-anmerkung { color: var(--gray-400); font-size: 10.5px; margin-top: 2px; }
.vorschau-tabelle tbody tr:last-child td { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.vorschau-summe {
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  gap: 14px;
  margin: 16px 0 20px;
}
.vorschau-betrag { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vorschau-hinweise { color: var(--gray-500); font-size: 11.5px; display: flex; flex-direction: column; gap: 3px; }
.vorschau-fuss {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  color: var(--gray-400);
  font-size: 10.5px;
}
.vorschau-fuss > div > div { white-space: nowrap; }
.vorschau-fuss .micro-label { margin-bottom: 3px; }

/* Telefon: Das Papier verkleinert sich als Ganzes, damit die vierspaltige
   Positionstabelle nicht aus dem Blatt läuft; falls doch, scrollt das Blatt intern. */
@media (max-width: 560px) {
  .vorschau {
    padding: 22px 18px;
    font-size: 11.5px;
    overflow-x: auto;
  }
}

/* Mehrere Blätter untereinander: Rechnung + Anlage 1 (Leistungsnachweis) */
.vorschau-stapel { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vorschau-anlage-tabelle { font-size: 11.5px; }
.vorschau-anlage-tabelle td { padding: 6px 0 4px; }
.vorschau-anlage-tabelle tbody td { border-bottom: 1px solid var(--line); }
.vorschau-anlage-tabelle tbody tr:last-child td { padding-bottom: 6px; }
.vorschau-anlage-tabelle .vorschau-anlage-taetigkeit {
  color: var(--gray-600);
  padding-left: 14px;
  font-size: 11px;
}
/* Abschnittskopf je Projekt und Zwischensumme – Aufbau wie im PDF. Der Kopf
   der Positionstabelle (.vorschau-gruppe ohne Anlage) bleibt davon unberührt. */
.vorschau-anlage-tabelle .vorschau-gruppe {
  padding: 22px 0 6px !important;
  border-bottom: 1px solid var(--accent);
  color: var(--ink);
}
.vorschau-anlage-tabelle tbody tr:first-child .vorschau-gruppe { padding-top: 6px !important; }
.vorschau-anlage-tabelle .vorschau-gruppe .micro-label { margin-bottom: 4px; }
.vorschau-anlage-tabelle .vorschau-gruppe-name { font-weight: 600; font-size: 12.5px; }
.vorschau-anlage-tabelle .vorschau-zwischensumme td {
  border: 0; /* die Gruppe endet offen; nur vor der Gesamtsumme bleibt die Linie (tr:last-child) */
  padding: 8px 0 4px;
  color: var(--gray-500);
  font-weight: 400;
}
.vorschau-anlage-tabelle .vorschau-zwischensumme td.num { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- Ausgaben & EÜR */

.euer-ergebnis {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 20px;
  margin-top: 8px;
}
.euer-betrag { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; white-space: nowrap; }
.euer-detail td { border-bottom-style: dashed; }

/* ---------------------------------------------------------------- Wiki
   Ein Kapitel pro Seite: gruppierte Kapitelliste mit Suche links, Leseseite
   in der Mitte, die Abschnitte des Kapitels rechts, Weiter/Zurück unten. */

.wiki-seite {
  display: grid;
  grid-template-columns: 208px minmax(0, 720px) 176px;
  gap: 48px;
  align-items: start;
}

/* Kapitelliste (links). Nur die Gruppen scrollen – ein Scroll-Container um die
   ganze Spalte würde das Such-Dropdown auf Spaltenbreite abschneiden. */
.wiki-kapitelliste {
  position: sticky;
  top: 24px;
}
.wiki-gruppen {
  max-height: calc(100dvh - 130px);
  overflow-y: auto;
}

.wiki-suchfeld { position: relative; }
.wiki-suche { padding: 7px 40px 7px 10px; font-size: 13px; }
.wiki-suche-kbd {
  position: absolute;
  right: 8px;
  top: 7px;
  font-family: var(--font);
  font-size: 10.5px;
  color: var(--gray-400);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  background: var(--surface);
  pointer-events: none;
}
.wiki-suchtreffer {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 30;
  box-shadow: 0 12px 32px rgba(29, 29, 31, 0.14);
  padding: 4px;
}
.wiki-treffer {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font);
}
.wiki-treffer:hover, .wiki-treffer.aktiv { background: var(--surface); }
.wiki-treffer strong { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.wiki-treffer span {
  display: block;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
  line-height: 1.45;
}
.wiki-treffer mark {
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 1px;
}

.wiki-kapitel-toggle { display: none; }

.wiki-gruppe { margin-top: 18px; }
.wiki-gruppe .micro-label { padding: 0 10px; margin-bottom: 4px; }
.wiki-kap-punkt {
  display: block;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius) var(--radius) 0;
  text-decoration: none;
}
.wiki-kap-punkt:hover { color: var(--ink); background: rgba(0, 0, 0, 0.03); text-decoration: none; }
.wiki-kap-punkt.aktiv {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
  background: linear-gradient(90deg, var(--accent-bg), rgba(236, 239, 245, 0));
}

/* Leseseite (Mitte): Typografie statt Karte */
.wiki-artikel-kopf {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.wiki-artikel-kopf h1 {
  font-size: 24px;
  letter-spacing: -0.015em;
  margin: 6px 0;
}
.wiki-lead {
  margin: 0;
  color: var(--gray-500);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
}

/* Weiter/Zurück am Kapitelende */
.wiki-blaettern {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 44px;
}
.wiki-blaettern a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  transition: border-color 120ms ease;
}
.wiki-blaettern a:hover { border-color: var(--gray-400); text-decoration: none; }
.wiki-blaettern a .micro-label { margin-bottom: 3px; }
.wiki-blaettern .weiter { text-align: right; }

/* Abschnitte des Kapitels (rechts) */
.wiki-abschnitte {
  position: sticky;
  top: 24px;
  border-left: 1px solid var(--line);
}
.wiki-abschnitte .micro-label { padding-left: 14px; margin-bottom: 6px; }
.wiki-abschnitt-punkt {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-left: 2px solid transparent;
  margin-left: -1px;
  padding: 4px 14px;
  font-family: var(--font);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--gray-500);
  cursor: pointer;
}
.wiki-abschnitt-punkt:hover { color: var(--ink); }
.wiki-abschnitt-punkt.aktiv {
  color: var(--accent);
  font-weight: 600;
  border-left-color: var(--accent);
}

.wiki-prosa { font-size: 14px; line-height: 1.7; }
.wiki-prosa > :first-child { margin-top: 0; }
.wiki-prosa > :last-child { margin-bottom: 0; }
.wiki-prosa p { margin: 0 0 12px; }
.wiki-prosa ul { margin: 0 0 12px; padding-left: 18px; }
.wiki-prosa li { margin: 5px 0; }
.wiki-prosa li::marker { color: var(--gray-400); }
.wiki-prosa h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin: 26px 0 10px;
}
.wiki-prosa code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}
.wiki-prosa .badge { vertical-align: middle; }

/* Begriffs-/Statuszeilen: Term links, Erklärung rechts */
.wiki-begriff {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.wiki-begriff:last-of-type { border-bottom: none; }
p + .wiki-begriff, h3 + .wiki-begriff { border-top: none; }
.wiki-term { font-weight: 600; }

/* Nummerierte Schritte */
.wiki-schritte {
  list-style: none;
  counter-reset: schritt;
  margin: 0 0 12px;
  padding: 0;
}
.wiki-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 0 0 14px 40px;
  margin: 0;
}
.wiki-schritte li:last-child { padding-bottom: 0; }
.wiki-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
/* Verbindungslinie zwischen den Schritten */
.wiki-schritte li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 28px;
  bottom: 2px;
  width: 1px;
  background: var(--line);
}

/* Hinweis-Kasten: Navy für Wissenswertes, Rot nur für Unumkehrbares */
.wiki-hinweis {
  border-left: 3px solid var(--accent);
  background: var(--accent-bg);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 12px 16px;
  margin: 14px 0 12px;
  font-size: 13px;
  line-height: 1.55;
}
.wiki-hinweis.warnung {
  border-left-color: var(--danger-text);
  background: var(--danger-bg);
}

/* Prinzip-Kette */
.wiki-fluss {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}
.wiki-fluss-glied {
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 8px 16px;
  font-weight: 600;
  font-size: 13px;
}
.wiki-fluss-pfeil { color: var(--gray-400); }

/* Schmaler Desktop: die Abschnittsspalte tritt zurück */
@media (max-width: 1180px) {
  .wiki-seite { grid-template-columns: 208px minmax(0, 1fr); }
  .wiki-abschnitte { display: none; }
}

/* Telefon: Suche oben, Kapitelliste als aufklappbares Menü über dem Text */
@media (max-width: 820px) {
  .wiki-seite { grid-template-columns: 1fr; gap: 14px; }
  .wiki-kapitelliste { position: static; max-height: none; overflow: visible; }
  .wiki-suchtreffer { width: 100%; }
  .wiki-suche-kbd { display: none; }
  .wiki-suche { padding-right: 12px; }
  .wiki-kapitel-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
  }
  .wiki-kapitel-toggle svg { color: var(--gray-400); transition: transform 150ms ease; }
  .wiki-kapitelliste.offen .wiki-kapitel-toggle svg { transform: rotate(180deg); }
  .wiki-gruppen {
    display: none;
    max-height: none;
    overflow: visible;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 6px 8px 14px;
    margin-top: 6px;
  }
  .wiki-kapitelliste.offen .wiki-gruppen { display: block; }
  .wiki-gruppe { margin-top: 12px; }
  .wiki-artikel { margin-top: 8px; }
  .wiki-begriff { grid-template-columns: 1fr; gap: 2px; }
  .wiki-blaettern { grid-template-columns: 1fr; }
  .wiki-blaettern .weiter { text-align: left; }
}

/* ---------------------------------------------------------------- Mobile: Kopfleiste + einschiebbare Navigation */

.mobil-kopf { display: none; }
.nav-overlay { display: none; }

/* Beleg-Vollseiten: nur auf dem Desktop tritt die Navigation zurück */
@media (min-width: 821px) {
  body.beleg-modus .seitenleiste { display: none; }
}

@media (max-width: 820px) {
  .mobil-kopf {
    display: flex;
    align-items: center;
    gap: 4px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    padding: calc(4px + env(safe-area-inset-top)) 12px 4px;
  }
  .mobil-kopf .wortmarke { font-size: 14px; }
  .mobil-kopf .btn-leise { padding: 10px; }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 31, 0.32);
    z-index: 58;
    animation: einblenden 140ms ease;
  }
  .nav-overlay[hidden] { display: none; }

  /* Die Seitenleiste wird zum einschiebbaren Menü */
  .seitenleiste {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100dvh;
    width: min(280px, 84vw);
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 200ms cubic-bezier(0.25, 0.8, 0.4, 1);
    padding-top: calc(20px + env(safe-area-inset-top));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .seitenleiste.offen {
    transform: translateX(0);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  }
  body.nav-offen { overflow: hidden; }

  .inhalt-innen { padding: calc(62px + env(safe-area-inset-top)) 16px calc(48px + env(safe-area-inset-bottom)); }
  .kpi-raster { grid-template-columns: 1fr 1fr; }
  .kpi-raster .kpi-breit { grid-column: 1 / -1; }
  .formular-zeile { grid-template-columns: 1fr; }

  /* iOS zoomt bei Eingabefeldern unter 16px automatisch in die Seite –
     auf dem Telefon bekommen Felder deshalb exakt 16px. */
  .input, .erfassungszeile .input, .positions-zeile .input { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .seitenleiste { transition: none; }
  .nav-overlay { animation: none; }
}

/* ---- Archiv */

/* Betrieb (Name oder Logo) unter der Wortmarke */
.seitenleiste .betrieb {
  padding: 0 10px 16px;
  margin-top: -8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gray-600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seitenleiste .betrieb img { max-height: 32px; max-width: 100%; display: block; }

.auth-spalte { width: 100%; max-width: 380px; }
.auth-spalte .auth-karte { max-width: none; }
.auth-betrieb {
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.auth-betrieb img { max-height: 48px; max-width: 100%; display: block; }
.auth-karte .wortmarke { margin-bottom: 24px; }
/* Mit Claim rückt er dicht an die Wortmarke und hält selbst den Abstand zum Formular. */
.auth-karte .wortmarke:has(+ .claim) { margin-bottom: 0; }

/* Formularkarten der Einstellungen */
.karte-formular { padding: 20px 24px 24px; }
.formular-aktionen { display: flex; justify-content: flex-end; gap: 8px; }
.abgesetzt { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }

.logo-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.logo-vorschau {
  width: 120px;
  height: 56px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface);
}
.logo-vorschau img { max-width: 100%; max-height: 52px; display: block; }
.logo-zeile label.btn { cursor: pointer; }
.karte-formular > .neben { color: var(--gray-500); font-size: 12.5px; margin: 12px 0 0; }

.karte-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  color: var(--ink);
}
.karte-link:hover { text-decoration: none; border-color: var(--gray-400); }
.karte-link .neben { color: var(--gray-500); font-size: 12.5px; }

/* Suchleiste über Listen */
.suchleiste {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.suchfeld { position: relative; flex: 1; min-width: 220px; max-width: 420px; }
.suchfeld svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; }
.suchfeld .input { padding-left: 36px; width: 100%; }
.suchfeld .input::-webkit-search-cancel-button { cursor: pointer; }
.tabelle .nummer { color: var(--gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; }

.stammdaten-karte { padding: 16px 20px; }
.stammdaten-karte > .neben { color: var(--gray-500); font-size: 13px; }
.drawer-fuss .btn-gefahr { margin-right: auto; color: var(--danger-text); }

/* CSV-Import */
.import-summe { font-size: 15px; font-weight: 600; margin-bottom: 12px; font-variant-numeric: tabular-nums; }
.import-meldungen { border-radius: var(--radius); padding: 10px 12px; margin-bottom: 12px; font-size: 13px; }
.import-meldungen ul { margin: 6px 0 0; padding-left: 0; list-style: none; max-height: 220px; overflow-y: auto; }
.import-meldungen li { padding: 2px 0; }
.import-meldungen .nummer { color: inherit; opacity: 0.75; margin-right: 6px; font-variant-numeric: tabular-nums; }
.import-fehler { background: var(--danger-bg); color: var(--danger-text); }
.import-warnung { background: var(--muted-bg); color: var(--gray-600); }
.pflicht { font-size: 11px; color: var(--accent); margin-left: 6px; }
.tabelle-kompakt td, .tabelle-kompakt th { white-space: nowrap; }
.karte-formular .neben { color: var(--gray-500); font-size: 12.5px; margin: 0; }
.formular-stapel > .segment { align-self: flex-start; }

/* ---------------------------------------------------------------- Erfassen */

.erfassen-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.gross-knopf {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 112px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  font-weight: 600; font-size: 15px; color: var(--ink); cursor: pointer; text-align: center;
}
.gross-knopf .icon { width: 28px; height: 28px; color: var(--accent); }
.gross-knopf:hover { border-color: var(--gray-400); }
.gross-knopf:active { background: var(--accent-bg); }
.ablage-flaeche {
  border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 22px;
  text-align: center; color: var(--gray-500); font-size: 13px; margin-bottom: 12px;
}
.ablage-flaeche.aktiv { border-color: var(--accent); background: var(--accent-bg); color: var(--accent); }
.stapel-karte { margin-bottom: 12px; }
.stapel-karte .abschnitt-kopf { margin-bottom: 12px; }
.stapel-karte label.btn { cursor: pointer; }
.foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.foto-kachel { position: relative; aspect-ratio: 3 / 4; border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); }
.foto-kachel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-ersatz { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 12px; color: var(--gray-500); }
.foto-weg {
  position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border-radius: 50%;
  border: none; background: rgba(0, 0, 0, 0.55); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.datei-zeile { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.datei-zeile:first-of-type { border-top: none; }
.datei-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei-zeile .neben, .ergebnis-zeile .neben { color: var(--gray-500); font-size: 12.5px; }

.chip-liste { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 34px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.chip:hover { border-color: var(--gray-400); }
.chip.aktiv { background: var(--accent-bg); border-color: var(--accent-bg); color: var(--accent); font-weight: 500; }
.chip-neben { color: var(--gray-500); font-size: 11.5px; }
.chip-titel { margin: 12px 0 6px; }
.titel-feld { margin-top: 16px; }

.zuordnung .segment { margin-bottom: 14px; }
.zuordnung-inhalt { display: flex; flex-direction: column; gap: 10px; }
.zuordnung-inhalt > .neben { color: var(--gray-500); font-size: 13px; }
.gewaehlt { display: flex; align-items: center; gap: 8px; }
.gewaehlt .btn-leise { font-size: 13px; color: var(--accent); }

.erfassen-fuss { display: flex; justify-content: flex-end; margin: -8px 0 24px; }
.btn-gross { min-height: 48px; padding: 0 28px; font-size: 15px; }
.ergebnis-karte { padding: 4px 20px; margin-bottom: 32px; }
.ergebnis-zeile { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.ergebnis-zeile:first-child { border-top: none; }
.ergebnis-status { text-align: right; font-size: 13px; }
.fortschritt { width: 160px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fortschritt div { height: 100%; background: var(--accent); transition: width 0.2s; }
.fehler-text { color: var(--danger-text); }
.hinweis-doppelt { color: var(--gray-600); font-size: 12.5px; margin-top: 2px; }

/* Runder Erfassen-Knopf – nur mobil, nicht auf der Erfassen-Seite selbst */
.erfassen-fab { display: none; }
@media (max-width: 820px) {
  .erfassen-fab {
    display: flex; position: fixed; z-index: 30; left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%;
    background: var(--ink); color: #fff; align-items: center; justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
  }
  .erfassen-fab .icon { width: 26px; height: 26px; color: #fff; }
  .auf-erfassen .erfassen-fab, .nav-offen .erfassen-fab { display: none; }
  .inhalt-innen { padding-bottom: 96px; }
  .nur-desktop { display: none; }
}
@media (max-width: 560px) {
  .erfassen-knoepfe { gap: 8px; }
  .erfassen-fuss .btn-gross { width: 100%; }
}
.ablegen-overlay {
  position: fixed; inset: 0; z-index: 70; background: rgba(44, 62, 107, 0.12);
  border: 3px dashed var(--accent); display: flex; align-items: center; justify-content: center; pointer-events: none;
}
.ablegen-overlay div { background: var(--card); padding: 14px 22px; border-radius: var(--radius); font-weight: 600; color: var(--accent); }
.ablegen-overlay[hidden] { display: none; }

/* ---------------------------------------------------------------- Posteingang & Dokument */

.nav-zahl {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums;
}
.nav-zahl[hidden] { display: none; }
.seiten-hinweis { margin-bottom: 20px; }
.hinweis-neutral { background: var(--muted-bg); color: var(--gray-600); }
.posteingang-titel { font-weight: 500; }
.tabelle td .neben { color: var(--gray-500); font-size: 12.5px; }
.pfeil { color: var(--gray-400); font-size: 20px; }

.dokument-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 24px; align-items: start; }
.vorschau-flaeche { position: sticky; top: 20px; }
.vorschau-rahmen {
  width: 100%; height: 78vh; min-height: 480px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); display: block;
}
.vorschau-oeffnen { display: inline-block; margin-top: 8px; font-size: 13px; }
.pruef-aktionen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.pruef-aktionen .abstand { flex: 1; }
.btn-gefahr-text { color: var(--danger-text); }
.karte-formular > .neben:first-child { margin-top: 0; }
.protokoll-eintrag { padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.protokoll-eintrag:first-child { border-top: none; padding-top: 0; }
.protokoll-eintrag .neben { color: var(--gray-500); margin-left: 6px; }
.protokoll-details { color: var(--gray-600); margin-top: 2px; line-height: 1.6; }
.beleg-kopf .aktionen { display: flex; gap: 8px; }

@media (max-width: 980px) {
  .dokument-raster { grid-template-columns: minmax(0, 1fr); }
  .vorschau-flaeche { position: static; }
  .vorschau-rahmen { height: 55vh; min-height: 320px; }
}
@media (max-width: 560px) {
  .pruef-aktionen .btn { flex: 1; }
  .pruef-aktionen .abstand { display: none; }
  .pruef-aktionen #archivieren { order: -1; flex-basis: 100%; min-height: 46px; }
}
.vorschau-bilder { display: flex; flex-direction: column; gap: 12px; max-height: none; }
.vorschau-bilder img { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); display: block; }
@media (min-width: 981px) {
  .vorschau-bilder { position: static; }
}
.akte-filter { margin-bottom: 12px; }
.mehr-laden { display: flex; justify-content: center; margin-top: 12px; }
.karten-hinweis { color: var(--gray-500); font-size: 12.5px; margin: 8px 2px 0; }
.zuordnung { display: flex; flex-direction: column; gap: 18px; }
.zuordnung-teil { display: flex; flex-direction: column; gap: 8px; }
.zuordnung-teil .chip-titel { margin: 2px 0 0; color: var(--gray-500); font-size: 12px; }

/* ---------------------------------------------------------------- Suche */

.seiten-suche { position: relative; margin: 0 2px 14px; }
.seiten-suche .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray-400); width: 15px; height: 15px; pointer-events: none; }
.seiten-suche .input { width: 100%; padding-left: 32px; height: 34px; font-size: 13px; background: var(--card); }
.mobil-suche { margin-left: auto; }

.start-suche { display: flex; gap: 8px; margin: 8px 0 24px; }
.start-suche .input { flex: 1; height: 52px; font-size: 16px; padding: 0 18px; }
.start-suche .btn { height: 52px; padding: 0 22px; }
.such-kopf { margin-bottom: 12px; }

.such-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.such-filter .input { height: 36px; width: auto; min-width: 0; font-size: 13px; }
.such-datum { display: inline-flex; align-items: center; gap: 6px; }
.such-datum .neben { color: var(--gray-500); font-size: 12.5px; }
.such-zahl { color: var(--gray-500); font-size: 12.5px; margin: 0 2px 10px; min-height: 18px; }

.treffer-karte { padding: 0; overflow: hidden; }
.treffer { display: flex; gap: 14px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--ink); }
.treffer:first-child { border-top: none; }
.treffer:hover { background: var(--surface); text-decoration: none; }
.treffer-bild { width: 56px; height: 72px; flex-shrink: 0; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.treffer-ohne { display: flex; align-items: center; justify-content: center; color: var(--gray-400); }
.treffer-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.treffer-titel { font-weight: 500; }
.treffer-meta { color: var(--gray-500); font-size: 12.5px; }
.treffer-ausschnitt { color: var(--gray-600); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.treffer-ausschnitt mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }
.akte-aktionen { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

.ocr-hinweis { margin-bottom: 16px; padding: 10px 14px; border-radius: var(--radius); background: var(--muted-bg); color: var(--gray-600); font-size: 13px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ocr-fehler { background: var(--danger-bg); color: var(--danger-text); }
.vorschau-seiten img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); }

@media (max-width: 820px) {
  .seiten-suche { display: none; }
  .vorschau-bilder { max-height: 62vh; overflow-y: auto; padding-right: 2px; }
  .start-suche .btn { display: none; }
}
@media (max-width: 560px) {
  .such-filter .input { flex: 1 1 140px; }
  .such-datum { flex: 1 1 140px; }
  .such-datum .input { flex: 1; }
  .treffer { padding: 12px 14px; gap: 12px; }
}
/* iOS vergrößert die Seite, sobald ein Feld unter 16 px angetippt wird. */
@media (max-width: 820px) {
  .such-filter .input, .seiten-suche .input { font-size: 16px; }
  .such-datum { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- Vorschläge */

.vorschlaege { border: 1px solid var(--accent-bg); background: #f7f9fc; border-radius: var(--radius); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.vorschlaege-wartet { color: var(--gray-500); font-size: 13px; border-style: dashed; background: none; }
.vorschlaege-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.vorschlaege-kopf .neben, .vorschlag-wert .neben { color: var(--gray-500); font-size: 12px; }
.vorschlag-zeile { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding-top: 8px; border-top: 1px solid var(--line); }
.vorschlag-wert { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.vorschlag-hinweis { font-size: 12.5px; color: var(--danger-text); background: var(--danger-bg); border-radius: 6px; padding: 6px 10px; }
.vorschlag-neu { align-self: flex-start; font-size: 12.5px; color: var(--accent); padding: 2px 0; }
.btn.uebernommen { color: var(--success-text); border-color: var(--success-bg); background: var(--success-bg); }
@media (max-width: 560px) {
  .vorschlag-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .vorschlag-zeile .micro-label { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- Verknüpfungen, Aufteilen */

.verknuepfungen { padding: 12px 16px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 8px; }
.verknuepfung { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.verknuepfung .micro-label { min-width: 90px; }
.verknuepfung-liste { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.aufteilen-knopf { margin-top: 10px; }
.trenn-liste { display: flex; flex-direction: column; gap: 6px; }
.trenn-seite { width: 100%; border: 1px solid var(--line); border-radius: 6px; display: block; }
.trennstelle { border: 1.5px dashed var(--line); background: none; border-radius: 6px; padding: 8px; color: var(--gray-500); font: inherit; font-size: 12.5px; cursor: pointer; }
.trennstelle:hover { border-color: var(--gray-400); color: var(--ink); }
.trennstelle.aktiv { border-style: solid; border-color: var(--accent); background: var(--accent-bg); color: var(--accent); font-weight: 600; }
.integritaet-liste { margin: 0; padding-left: 18px; font-size: 13px; }
.loeschen-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.loeschen-fuss .neben { color: var(--gray-500); font-size: 12.5px; }

/* ---------------------------------------------------------------- Original | Text, Inhalt */

.ansicht-umschalter { margin-bottom: 10px; }
.ocr-text-karte { padding: 14px 18px; }
.ocr-text-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ocr-text-kopf .neben { color: var(--gray-500); font-size: 12.5px; }
.ocr-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; color: var(--ink); max-height: 75vh; overflow-y: auto; }
.ocr-text mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }
.inhalt-karte .stammdaten-zeile:first-child { padding-top: 0; }
.inhalt-positionen-kopf { margin: 14px 0 6px; }
.positionen-tabelle { font-size: 12.5px; }
.positionen-tabelle th, .positionen-tabelle td { padding: 6px 8px; }
.positionen-tabelle th:first-child, .positionen-tabelle td:first-child { padding-left: 0; }
.positionen-tabelle .zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.positionen-alle { margin-top: 6px; }
.inhalt-fuss { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.inhalt-fuss .neben { color: var(--gray-500); font-size: 12px; flex: 1 1 220px; }
.inhalt-aktionen { display: flex; gap: 10px; align-items: center; }
.positionen-eingabe { display: flex; flex-direction: column; gap: 8px; }
.position-zeile { display: grid; grid-template-columns: 1fr 2.2fr 0.8fr 0.8fr 1fr 1fr auto; gap: 6px; align-items: center; }
.position-zeile .input { padding: 7px 8px; font-size: 13px; min-width: 0; }
@media (max-width: 720px) {
  .position-zeile { grid-template-columns: 1fr 1fr 1fr auto; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
  .position-zeile [data-p=text] { grid-column: 1 / -1; order: -1; }
}

/* ---------------------------------------------------------------- Dashboard */

.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 28px; }
.kachel { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); min-width: 0; }
a.kachel:hover { text-decoration: none; border-color: var(--gray-400); }
.kachel-zahl { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.kachel-warn { color: var(--accent); }
.kachel .neben { color: var(--gray-500); font-size: 12.5px; overflow-wrap: anywhere; }
.dashboard-raster { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 0 24px; align-items: start; }
.dash-zeile { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); color: var(--ink); }
.dash-zeile:last-child { border-bottom: 0; }
a.dash-zeile:hover { text-decoration: none; background: var(--surface); }
.dash-gross { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-gross .neben, .dash-zeile > .neben { color: var(--gray-500); font-size: 12.5px; }
.dash-zeile > .neben { text-align: right; }
.hinweise-leer { padding: 14px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hinweise-leer .neben { color: var(--gray-500); font-size: 13px; }
.kanaele { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; padding: 12px; }
.kanaele > div { background: var(--surface); border-radius: 6px; padding: 10px 8px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.kanaele strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kanaele .neben { color: var(--gray-500); font-size: 12px; }
.diagramm-karte { padding: 14px 16px 12px; }
.diagramm-legende { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--gray-600); margin-bottom: 10px; }
.diagramm-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.diagramm { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding-bottom: 20px; }
.diagramm-raster { display: flex; flex-direction: column; justify-content: space-between; height: 150px; font-size: 11px; line-height: 1; color: var(--gray-400); text-align: right; font-variant-numeric: tabular-nums; margin: -5px 0; }
.diagramm-balken { display: flex; align-items: stretch; gap: 6px; height: 150px; border-bottom: 1px solid var(--line); background: linear-gradient(var(--line), var(--line)) top / 100% 1px no-repeat; }
.balken-spalte { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; position: relative; cursor: default; outline: none; min-width: 0; }
.balken { display: flex; flex-direction: column-reverse; gap: 2px; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 0; }
.balken i { display: block; min-height: 2px; }
.balken-spalte.aktiv .balken, .balken-spalte:focus-visible .balken { filter: brightness(0.92); }
.balken-monat { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--gray-500); }
.abschnitt-neben { color: var(--gray-500); font-size: 12px; }
.diagramm-tipp { position: absolute; top: 0; z-index: 5; background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); padding: 8px 10px; font-size: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 170px; pointer-events: none; }
.diagramm-tipp span { display: flex; justify-content: space-between; gap: 12px; color: var(--gray-600); }
.diagramm-tipp b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.diagramm-karte [data-tabelle] { margin-top: 10px; }
.diagramm-tabelle { font-size: 12.5px; margin-top: 8px; }
.diagramm-tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.seiten-hinweis-text { color: var(--gray-500); font-size: 13.5px; margin: -4px 0 16px; }
@media (max-width: 1100px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .dashboard-raster { grid-template-columns: minmax(0, 1fr); }
  .kachel-zahl { font-size: 24px; }
  .diagramm-balken { gap: 3px; }
  .balken-monat { font-size: 9.5px; }
}
.diagramm-tipp[hidden], .ocr-text-karte[hidden] { display: none; }
@media (max-width: 560px) {
  .kanaele { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- Akten-Kopf, Suche in Akten */

.akte-kopf { margin: -14px 0 22px; display: flex; flex-direction: column; gap: 10px; }
.akte-unterzeile { color: var(--gray-500); font-size: 13px; }
.akte-unterzeile a { color: var(--accent); }
.akte-kontakt { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; color: var(--ink); }
.akte-kontakt a { color: var(--accent); overflow-wrap: anywhere; }
.akte-notiz { background: #fff8e5; border: 1px solid #f3e3b5; border-radius: var(--radius); padding: 10px 14px; font-size: 13.5px; color: var(--ink); white-space: pre-line; }
a.chip { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
a.chip:hover { text-decoration: none; }
.akte-suche { margin-bottom: 10px; }
.akte-filter { margin-bottom: 10px; }
.such-dokumente-kopf { margin-top: 4px; }
.such-dokumente-kopf .such-zahl { margin: 0; min-height: 0; }
.such-arten { margin-bottom: 10px; }
.akten-zeichen { width: 30px; height: 30px; border-radius: 8px; background: var(--accent-bg); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex-shrink: 0; }
.akten-oeffnen { color: var(--accent); font-size: 12.5px; white-space: nowrap; }
.such-akten mark, .dash-zeile mark { background: #fff1b8; color: inherit; padding: 0 1px; border-radius: 2px; }
.vorschau-jahre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 12px; }
.vorschau-jahre > div { background: var(--surface); border-radius: 6px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.vorschau-jahre strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.vorschau-jahre .neben { color: var(--gray-500); font-size: 12px; line-height: 1.35; }
@media (max-width: 560px) { .vorschau-jahre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }