/* MIRI AG Rechnungssystem */
:root {
  /* Farbwelt ans MIRI-Logo angelehnt (tiefes Indigo + Graugrün) */
  --blau: #3b3a8f;
  --blau-dunkel: #29285e;
  --akzent: #a9bab8;
  --tinte: #232538;
  --grau: #667085;
  --linie: #e4e7ee;
  --flaeche: #f3f4f8;
  --weiss: #ffffff;
  --gruen: #15803d;
  --gruen-bg: #dcfce7;
  --gelb: #a16207;
  --gelb-bg: #fef9c3;
  --rot: #b91c1c;
  --rot-bg: #fee2e2;
  --radius: 12px;
  --schatten: 0 1px 2px rgba(35, 37, 56, 0.05), 0 4px 16px rgba(35, 37, 56, 0.06);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--flaeche);
  color: var(--tinte);
  font-size: 15px;
  line-height: 1.5;
}

/* Einheitliche Darstellung von Bedienelementen in allen Browsern */
button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2364748b'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px !important;
}
input[type="date"] { min-height: 38px; }
textarea { resize: vertical; }

a { color: var(--blau); text-decoration: none; transition: color 0.15s ease; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Kopfleiste mit gruppierter Navigation
   (Desktop: Dropdown-Gruppen · Smartphone: Hamburger-Menü)
   ------------------------------------------------------------ */
.kopfleiste {
  background: linear-gradient(135deg, var(--blau-dunkel) 0%, #383677 100%);
  color: var(--weiss);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  height: 56px;
  box-shadow: 0 2px 12px rgba(41, 40, 94, 0.25);
  position: relative;
  z-index: 50;
}
.kopfleiste .logo {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: var(--weiss);
  white-space: nowrap;
}
.kopfleiste .logo:hover { text-decoration: none; }
.kopfleiste .logo span { opacity: 0.65; font-weight: 400; }

.hauptmenue { display: flex; align-items: center; gap: 4px; flex: 1; }
.hauptmenue .nav-punkt,
.nav-gruppenknopf {
  color: rgba(255, 255, 255, 0.85);
  padding: 7px 13px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14.5px;
  background: none;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.hauptmenue .nav-punkt:hover,
.nav-gruppenknopf:hover { background: rgba(255, 255, 255, 0.12); color: #fff; text-decoration: none; }
.hauptmenue .nav-punkt.aktiv,
.nav-gruppenknopf.aktiv {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--akzent);
}
.nav-gruppenknopf .pfeil {
  display: inline-block;
  font-size: 10px;
  opacity: 0.7;
  margin-left: 2px;
  transition: transform 0.15s ease;
}
.nav-gruppe { position: relative; }
.nav-gruppe.offen .pfeil { transform: rotate(180deg); }
.nav-menue {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 210px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 10px 32px rgba(20, 20, 50, 0.22);
  padding: 6px;
  z-index: 60;
}
.nav-gruppe.offen .nav-menue { display: block; }
.nav-menue a {
  display: block;
  padding: 10px 14px;
  border-radius: 7px;
  color: var(--tinte);
  font-weight: 500;
  font-size: 14px;
}
.nav-menue a:hover { background: var(--flaeche); text-decoration: none; }
.nav-menue a.aktiv { background: #eceafb; color: var(--blau-dunkel); font-weight: 700; }

/* Hamburger-Knopf (erst im Smartphone-/Tablet-Modus sichtbar) */
.nav-umschalter {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.10);
  cursor: pointer;
  padding: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-umschalter:active { background: rgba(255, 255, 255, 0.22); }
.nav-umschalter .nav-balken {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-umschalter.offen .nav-balken:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-umschalter.offen .nav-balken:nth-child(2) { opacity: 0; }
.nav-umschalter.offen .nav-balken:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Benutzerinfo rechts (im Menü-Panel wird die Kopie .menue-benutzer genutzt) */
.kopfleiste .benutzer { font-size: 13px; opacity: 0.85; white-space: nowrap; }
.kopfleiste .benutzer a { color: #fff; margin-left: 10px; }
.hauptmenue .menue-benutzer { display: none; }

.inhalt { max-width: 1200px; margin: 28px auto; padding: 0 24px; }

h1 { font-size: 22px; margin: 0 0 18px; }

/* Karten */
.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 22px;
  box-shadow: var(--schatten);
}

/* Login */
.login-seite {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1e1d47 0%, var(--blau-dunkel) 45%, #3b3a8f 100%);
}
.login-box {
  background: var(--weiss);
  border-radius: 16px;
  padding: 36px;
  width: 380px;
  box-shadow: 0 24px 60px rgba(10, 10, 35, 0.45);
  text-align: left;
}
.login-box .logo-bild {
  display: block;
  margin: 0 auto 18px;
  width: 120px;
}
.login-box h1 { font-size: 20px; margin-bottom: 4px; }
.login-box .untertitel { color: var(--grau); font-size: 14px; margin-bottom: 22px; }
.login-box label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 4px; }
.login-box input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 15px;
}
.login-box input:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.login-box button {
  margin-top: 22px;
  width: 100%;
  padding: 11px;
  background: var(--blau);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-box button:hover { background: var(--blau-dunkel); }
.fehler {
  background: var(--rot-bg);
  color: var(--rot);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 6px;
}

/* Filterzeile */
.filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.filter .feld { display: flex; flex-direction: column; gap: 4px; }
.filter label { font-size: 12px; font-weight: 600; color: var(--grau); text-transform: uppercase; letter-spacing: 0.4px; }
.filter select, .filter input {
  padding: 8px 10px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 14px;
  background: var(--weiss);
  min-width: 140px;
}
.filter input[type="search"] { min-width: 240px; }
.filter button, .knopf {
  padding: 9px 18px;
  background: var(--blau);
  color: #fff;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(41, 40, 94, 0.3);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
.filter button:hover, .knopf:hover {
  background: var(--blau-dunkel);
  box-shadow: 0 3px 8px rgba(41, 40, 94, 0.35);
  transform: translateY(-1px);
  text-decoration: none;
}
.filter button:active, .knopf:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(41, 40, 94, 0.3); }
.filter a.zuruecksetzen { font-size: 13px; padding: 9px 4px; color: var(--grau); }

/* Kennzahlen */
.kennzahlen { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.kennzahl {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 20px;
  min-width: 170px;
}
.kennzahl .wert { font-size: 20px; font-weight: 700; }
.kennzahl .beschriftung { font-size: 12px; color: var(--grau); text-transform: uppercase; letter-spacing: 0.4px; }

/* Tabelle */
table.liste { width: 100%; border-collapse: collapse; background: var(--weiss); }
table.liste th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--grau);
  padding: 11px 12px;
  border-bottom: 2px solid var(--linie);
  background: #fafbfd;
  white-space: nowrap;
}
table.liste td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
  transition: background 0.1s ease;
}
table.liste tbody tr:last-child td { border-bottom: 0; }
table.liste tr:hover td { background: #f6f7fb; }
table.liste td.betrag, table.liste th.betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.liste .beschreibung { color: var(--grau); font-size: 13px; }
table.liste a.nummer { font-weight: 600; }

.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.status.bezahlt { background: var(--gruen-bg); color: var(--gruen); }
.status.gestellt { background: var(--gelb-bg); color: var(--gelb); }
.status.entwurf { background: var(--flaeche); color: var(--grau); }
.status.storniert { background: var(--rot-bg); color: var(--rot); }
.status.offen { background: var(--gelb-bg); color: var(--gelb); }
.status.angenommen { background: var(--gruen-bg); color: var(--gruen); }
.status.abgelehnt { background: var(--rot-bg); color: var(--rot); }

.leer { padding: 40px; text-align: center; color: var(--grau); }

/* Formulare */
.kartentitel { font-size: 16px; margin: 0 0 14px; }
.formular-gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px 18px;
  margin-bottom: 18px;
}
.formular-gitter .feld { display: flex; flex-direction: column; gap: 4px; }
.formular-gitter .feld.breit { grid-column: 1 / -1; }
.formular label { font-size: 12px; font-weight: 600; color: var(--grau); text-transform: uppercase; letter-spacing: 0.4px; }
.formular input, .formular textarea, .formular select {
  padding: 9px 11px;
  border: 1px solid var(--linie);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  background: var(--weiss);
  width: 100%;
}
.formular input:focus, .formular textarea:focus, .formular select:focus {
  outline: 2px solid var(--blau);
  border-color: var(--blau);
}
.knopf-klein {
  padding: 4px 10px;
  background: var(--blau);
  color: #fff;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.knopf-klein.grau { background: var(--grau); }
.knopf-klein:hover { opacity: 0.85; }
.hinweis {
  background: var(--gruen-bg);
  color: var(--gruen);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

/* Positionszeilen im Rechnungsformular */
table.positionen { width: 100%; border-collapse: collapse; }
table.positionen th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--grau); padding: 6px 8px; border-bottom: 2px solid var(--linie);
}
table.positionen td { padding: 6px 8px; vertical-align: top; }
table.positionen .pos-nr { width: 40px; padding-top: 16px; color: var(--grau); }
table.positionen .pos-betrag { width: 150px; }
table.positionen .pos-entfernen { width: 40px; padding-top: 12px; }
table.positionen .pos-entfernen button {
  background: none; border: 0; color: var(--rot); font-size: 18px; cursor: pointer; line-height: 1;
}
.summenblock { margin-top: 14px; margin-left: auto; max-width: 360px; font-size: 14px; }
.summenblock .zeile { display: flex; justify-content: space-between; padding: 4px 8px; }
.summenblock .zeile.gesamt { font-weight: 700; border-top: 2px solid var(--linie); font-size: 16px; }

.seitenkopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.seitenkopf h1 { margin: 0; }

/* Schnellerfassung Geldeingang in der Übersicht */
.geldeingang-schnell { display: flex; gap: 6px; align-items: center; }
.geldeingang-schnell input[type="date"] {
  padding: 4px 6px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  font-size: 13px;
  min-height: 0;
}

/* Detailansicht */
.detail-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.detail-kopf h1 { margin-bottom: 6px; }
.eigenschaften { display: grid; grid-template-columns: 180px 1fr; gap: 6px 16px; font-size: 14px; }
.eigenschaften dt { color: var(--grau); }
.eigenschaften dd { margin: 0; }
.zurueck { font-size: 14px; display: inline-block; margin-bottom: 14px; }

.gruppentitel {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--blau-dunkel);
  margin: 18px 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--linie);
}
.gruppentitel:first-of-type { margin-top: 0; }

/* Scrollbare Tabellenbereiche (Touch-freundlich) */
.tabellenrand { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabellenrand table { min-width: 560px; }

/* Journal: Buchungsspalte – Info links, Aktionsknöpfe rechtsbündig in
   einheitlicher Breite; „▾ mehr“ klappt als Panel über die volle Zelle auf */
.buchung-zelle { min-width: 360px; }   /* feste, vom Panel unabhängige Breite */
.buchung-zeile {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}
.buchung-info { flex: 1 1 auto; min-width: 0; }
.buchung-aktionen {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
}
.buchung-aktionen .aktion {
  min-width: 108px;
  text-align: center;
  white-space: nowrap;
}
.buchung-mehr summary { list-style: none; cursor: pointer; }
.buchung-mehr summary::-webkit-details-marker { display: none; }
.mehr-pfeil {
  display: inline-block;
  color: var(--blau);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 7px;
  border: 1px solid var(--linie);
  border-radius: 6px;
  background: var(--weiss);
  transition: transform 0.15s ease;
}
.buchung-mehr[open] > summary .mehr-pfeil { transform: rotate(180deg); }
/* width:0 + min-width:100% hält das Panel AUS der Breitenberechnung der
   Tabellenspalte heraus. Ohne das verbreitert jedes Aufklappen die letzte
   Spalte, der Text aller anderen Zeilen bricht anders um, die Zeilen
   darüber ändern ihre Höhe – und die Seite springt weg (Fehler 15.09.2026). */
.buchung-panel {
  width: 0;
  min-width: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* Journal: Geldkonto-Spalte – schmal, einzeilig, ruhige Farbe (der volle
   Kontoname steht als Hinweistext am Feld) */
.geldkonto-zelle {
  white-space: nowrap;
  font-size: 11.5px;
  color: var(--grau);
  font-variant-numeric: tabular-nums;
  cursor: help;
}

/* Buchungs-Panel: Kopfzeile mit dem Geldkonto der Bewegung, darunter die
   Buchungsarten als getrennte, beschriftete Formulare mit Speichern-Knopf */
.panel-kopf {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: baseline;
  font-size: 12px;
  color: var(--tinte);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linie);
}
.panel-marke {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--blau);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 5px;
  padding: 1px 6px;
}
.panel-grau { color: var(--grau); }
.buchung-form {
  flex: 0 0 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding-top: 8px;
  margin: 0;
}
.buchung-form + .buchung-form { border-top: 1px solid var(--linie); }
.form-titel {
  flex: 0 0 100%;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tinte);
  margin-bottom: -3px;
}
.feldchen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 200px;
  min-width: 0;
  max-width: 100%;
}
.feldchen > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--grau);
}
.feldchen select {
  padding: 4px 6px;
  font-size: 12px;
  width: 100%;
  max-width: 100%;
}
.buchung-form > .knopf-klein { padding: 5px 14px; }

/* Beleg-Upload in der Journalzeile: Dateifeld und Ablagefläche */
.feldchen input[type="file"] {
  font-size: 11.5px;
  width: 100%;
  max-width: 100%;
  padding: 3px 0;
}
.beleg-form {
  border-radius: 6px;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.beleg-form.ablage-aktiv {
  background: var(--gruen-bg);
  box-shadow: inset 0 0 0 2px var(--gruen);
}
.beleg-form .ablage-wink { color: var(--grau); }
.beleg-hinweis { display: block; }

/* Monatsmittelkurse: 12 Monate in einer Reihe */
.kurs-gitter {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 8px;
}
.kurs-gitter label {
  font-size: 10.5px;
  letter-spacing: 0.3px;
}
.kurs-gitter input {
  padding: 6px 7px;
  font-size: 13px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1100px) {
  .kurs-gitter { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .kurs-gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Kompakte Zahlentabelle (z. B. MWST-Abrechnung) */
table.liste.kompakt th {
  padding: 7px 9px;
  font-size: 10.5px;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
table.liste.kompakt th small {
  display: block;
  font-weight: 500;
  color: #9aa3b5;
  text-transform: none;
  letter-spacing: 0;
}
table.liste.kompakt td {
  padding: 6px 9px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
table.liste.kompakt .beschreibung { font-size: 12px; }

/* Aufklappbare Karten (z. B. Hinweise, Lizenzübersicht) */
details.klappbereich summary {
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}
details.klappbereich summary::-webkit-details-marker { display: none; }
details.klappbereich summary::before {
  content: '▸';
  color: var(--grau);
  font-size: 13px;
  transition: transform 0.15s ease;
}
details.klappbereich[open] summary::before { transform: rotate(90deg); }
details.klappbereich summary:hover { color: var(--blau); }
details.klappbereich summary .anzahl {
  font-size: 12px;
  font-weight: 600;
  color: var(--grau);
}
details.klappbereich[open] summary { margin-bottom: 12px; }

/* Aufklappbare Rechnungsliste in den Projektgruppen */
details.gruppe-detail { margin-top: 4px; }
details.gruppe-detail summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--blau);
  user-select: none;
}
details.gruppe-detail summary:hover { text-decoration: underline; }
details.gruppe-detail .detail-tabelle {
  margin: 6px 0 4px;
  border-left: 3px solid var(--linie);
  font-size: 13px;
  border-collapse: collapse;
}
details.gruppe-detail .detail-tabelle td {
  padding: 3px 12px 3px 10px;
  border-bottom: 0;
  color: var(--grau);
}
details.gruppe-detail .detail-tabelle td.betrag { text-align: right; white-space: nowrap; }

/* Hinweis in der Kopfleiste, wenn ein Arbeitsjahr abweichend vom
   Kalenderjahr eingestellt ist (Übersicht -> Arbeitsjahr) */
.arbeitsjahr-hinweis {
  background: var(--gelb-bg);
  color: var(--gelb);
  font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}
.arbeitsjahr-hinweis:hover { filter: brightness(0.96); }

/* ------------------------------------------------------------
   Responsive Darstellung (Tablet und Smartphone)
   ------------------------------------------------------------ */
/* Schmale Desktops: Benutzerinfo kompakt, Navigation enger */
@media (max-width: 1250px) {
  .kopfleiste .benutzer .anmeldung { display: none; }
  .hauptmenue .nav-punkt, .nav-gruppenknopf { padding: 7px 10px; }
}

/* Tablet & Smartphone: Hamburger-Menü statt Leiste */
@media (max-width: 1100px) {
  .nav-umschalter { display: flex; }
  .kopfleiste .benutzer { display: none; }

  .hauptmenue {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: linear-gradient(180deg, #383677 0%, var(--blau-dunkel) 100%);
    box-shadow: 0 14px 30px rgba(20, 20, 50, 0.35);
    padding: 6px 10px 12px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
  }
  .hauptmenue.offen { display: flex; }

  .hauptmenue .nav-punkt {
    padding: 13px 14px;          /* große Touch-Ziele (≥44px) */
    border-radius: 10px;
    font-size: 15px;
  }
  .hauptmenue .nav-punkt.aktiv { box-shadow: inset 3px 0 0 var(--akzent); }

  /* Gruppen werden zu beschrifteten Abschnitten, immer aufgeklappt */
  .nav-gruppe { position: static; }
  .nav-gruppenknopf {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px 4px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--akzent);
    cursor: default;
    pointer-events: none;        /* nur Beschriftung, kein Umschalter */
  }
  .nav-gruppenknopf.aktiv { background: none; box-shadow: none; }
  .nav-gruppenknopf .pfeil { display: none; }
  .nav-menue {
    display: block;
    position: static;
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .nav-menue a {
    color: rgba(255, 255, 255, 0.88);
    padding: 13px 22px;
    border-radius: 10px;
    font-size: 15px;
  }
  .nav-menue a:hover { background: rgba(255, 255, 255, 0.10); }
  .nav-menue a.aktiv {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    box-shadow: inset 3px 0 0 var(--akzent);
  }

  .hauptmenue .menue-benutzer {
    display: block;
    margin-top: 10px;
    padding: 12px 14px 4px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
  }
  .hauptmenue .menue-benutzer a { color: #fff; margin-left: 10px; font-weight: 600; }
}

@media (max-width: 900px) {
  .inhalt { margin: 18px auto; padding: 0 14px; }
  .kopfleiste { padding: 0 14px; gap: 12px; }
  table.liste th, table.liste td { padding: 8px 8px; }
}

@media (max-width: 640px) {
  body { font-size: 14px; }
  .kopfleiste .logo { font-size: 15px; }

  h1 { font-size: 19px; }
  .karte { padding: 14px; }
  .seitenkopf { flex-wrap: wrap; gap: 10px; }

  /* Filter untereinander, volle Breite */
  .filter { flex-direction: column; align-items: stretch; }
  .filter .feld { width: 100%; }
  .filter select, .filter input, .filter input[type="search"] { width: 100%; min-width: 0; }
  .filter button { width: 100%; }
  .filter a.zuruecksetzen { text-align: center; }

  /* Formulare einspaltig – minmax(240px, …) wäre breiter als der Bildschirm */
  .formular-gitter { grid-template-columns: 1fr; }

  /* iPhones zoomen bei Eingabefeldern unter 16px in die Seite hinein –
     deshalb auf Mobilgeräten ausnahmslos 16px Eingabeschrift. !important
     mit Absicht: etliche Felder tragen kompakte INLINE-Schriftgrößen für
     den Desktop (Journal-Panels, Geldkonten-Kennungen …) – unter 640px
     hat die Zoombremse Vorrang. */
  input, select, textarea {
    font-size: 16px !important;
  }

  /* Detailansicht: Beschriftung über dem Wert */
  .eigenschaften { grid-template-columns: 1fr; gap: 2px; }
  .eigenschaften dt { margin-top: 10px; }
  .eigenschaften dt:first-child { margin-top: 0; }
  .detail-kopf > div[style*="text-align"] { text-align: left !important; }
  .detail-kopf > * { min-width: 0; }

  .summenblock { max-width: none; }

  /* Positionszeilen der Rechnung: Nummernspalte weglassen, Betrag kompakt */
  table.positionen .pos-nr { display: none; }
  table.positionen .pos-betrag { width: 104px; }
  table.positionen textarea, table.positionen input { min-width: 0; }

  /* Tabellen scrollen im Rand-Behälter; schmale füllen nur den Bildschirm */
  .tabellenrand table { min-width: 100%; }

  /* Fingergerechte Links in Listen (Aktions-Symbole ✎ ✉ 👁 ⇄ 📎+) */
  table.liste td a { display: inline-block; padding: 5px 4px; margin: -3px 0; }

  /* Kennzahlen zu zweit nebeneinander statt fester 170px */
  .kennzahl { min-width: calc(50% - 8px); flex: 1 1 auto; }

  .login-box { width: min(380px, 100%); padding: 26px; }
}

/* Große Bildschirme: etwas mehr Luft */
@media (min-width: 1400px) {
  .inhalt { max-width: 1320px; }
}

/* Aufteilung einer Geldbewegung auf mehrere Sachkonten (Migration 028) */
.teile-block { margin-top: 8px; }
.teile-block > summary { cursor: pointer; font-size: 12px; color: var(--ton); }
.teile-liste { margin-top: 8px; padding: 8px; background: var(--flaeche); border-radius: 6px; }
.teile-tabelle { width: 0; min-width: 100%; border-collapse: collapse; font-size: 12px; }
.teile-tabelle td, .teile-tabelle th { padding: 3px 8px 3px 0; text-align: left; vertical-align: top; }
.teile-tabelle th { font-weight: 600; font-size: 11px; color: var(--ton); }
.teile-eingabe input[type="text"] { padding: 3px 5px; font-size: 12px; }
.teile-eingabe select { padding: 3px 5px; font-size: 12px; max-width: 220px; }
.teile-rest { margin: 6px 0; font-size: 12px; }
.teile-rest-wert { font-variant-numeric: tabular-nums; font-weight: 600; }
.teile-rest-wert.stimmt { color: #1a7f37; }
.teile-rest-wert.offen  { color: #b54708; }

/* Dokumentenübersicht (dokumente.php) */
.dok-datum, .dok-typ { white-space: nowrap; }
.dok-name { font-size: 11px; color: var(--grau); }
.dok-hinweis { font-size: 11px; color: var(--rot); }
.dok-hinweis.leise { color: var(--grau); }
.dok-verk { font-size: 13px; }
.dok-verk .keine { color: var(--grau); }
.dok-herkunft { font-size: 12px; color: var(--grau); }
.dok-aktion { white-space: nowrap; text-align: right; }
.dok-aktion form { display: inline; }
.dok-kacheln { margin: 16px 0 0; gap: 10px; }
.dok-kacheln .kennzahl { text-decoration: none; min-width: 120px; padding: 10px 14px; }
.dok-kacheln .kennzahl.aktiv { border-left: 4px solid var(--blau); }
.dok-kacheln .kennzahl .wert { font-size: 18px; }