/* Strauch Buchhaltung – Layout Variante A (dunkle Seitenleiste) */
:root {
  --navy: #12263F; --navy-2: #1F4E79; --blue: #2E6DA4; --ink: #1B2430; --muted: #5B6878;
  --line: #E1E6ED; --line-soft: #EEF1F5; --bg: #F4F6F9; --panel: #FFFFFF;
  --input: #FFFBEB; --ok: #2F7D4F; --ok-bg: #E2F1E6; --warn: #8A4B08; --warn-bg: #FDF0DC;
  --bad: #9B1C1C; --bad-bg: #FBE4E4; --info: #1F4E79; --info-bg: #E3EDF7;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--navy-2); }
.layout { display: flex; flex-wrap: wrap; min-height: 100vh; }
.nav { flex: 1 1 220px; max-width: 240px; background: var(--navy); color: #DCE4EE; padding: 24px 16px; display: flex; flex-direction: column; gap: 4px; }
.nav .marke { display: flex; align-items: center; gap: 10px; padding: 0 8px 20px; }
.nav .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--blue); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.nav .marke b { color: #fff; display: block; }
.nav .marke small { color: #9FB2C8; }
.nav a.punkt { display: block; padding: 10px 12px; border-radius: 8px; color: #DCE4EE; text-decoration: none; }
.nav a.punkt:hover { background: #1B3554; }
.nav a.punkt.aktiv { background: var(--navy-2); color: #fff; font-weight: 600; }
.nav .fuss { margin-top: auto; padding: 16px 8px 0; border-top: 1px solid #2A4260; font-size: 12px; color: #9FB2C8; }
.nav .fuss a { color: #DCE4EE; }
main { flex: 999 1 560px; min-width: 0; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
h1 { margin: 0; font-size: 26px; }
h2 { margin: 0; font-size: 17px; }
.unter { margin: 4px 0 0; color: var(--muted); }
.kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.karte, .panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.karte .label { color: var(--muted); font-size: 13px; }
.karte .zahl { font-size: 28px; font-weight: 700; margin-top: 6px; font-variant-numeric: tabular-nums; }
.karte .hinweis { font-size: 13px; margin-top: 4px; color: var(--muted); }
.reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.reihe > * { min-width: 0; }
.btn { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid #D5DCE5; background: #fff; color: var(--ink); font: inherit; text-decoration: none; cursor: pointer; }
.btn.primaer { background: var(--navy-2); border-color: var(--navy-2); color: #fff; font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 36px; display: inline-flex; align-items: center; padding: 0 14px; border-radius: 999px; border: 1px solid #D5DCE5; background: #fff; color: var(--ink); text-decoration: none; font-size: 13px; }
.chip.aktiv { background: var(--navy-2); border-color: var(--navy-2); color: #fff; font-weight: 600; }
.suche { display: flex; gap: 8px; }
.suche input { height: 44px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 0 12px; font: inherit; min-width: 260px; }
.tabelle { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.tabelle .rollen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #F7F9FB; color: var(--muted); text-align: left; font-weight: 600; padding: 12px 10px; white-space: nowrap; }
td { padding: 10px; border-top: 1px solid var(--line-soft); vertical-align: top; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.d { white-space: nowrap; }
tr.klick:hover { background: #F2F6FB; cursor: pointer; }
.badge { display: inline-block; align-self: flex-start; flex: none; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.badge.ok { color: var(--ok); background: var(--ok-bg); } .badge.warn { color: var(--warn); background: var(--warn-bg); }
.badge.bad { color: var(--bad); background: var(--bad-bg); } .badge.info { color: var(--info); background: var(--info-bg); }
.badge.neutral { color: var(--muted); background: var(--line-soft); }
.leise { color: var(--muted); }
.summe { padding: 12px 16px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: var(--muted); font-size: 13px; }
.aufgaben { list-style: none; margin: 16px 0 0; padding: 0; }
.aufgaben li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--line-soft); }
.aufgaben .t { font-weight: 600; } .aufgaben .x { color: var(--muted); font-size: 13px; }
.balken { height: 10px; background: var(--line-soft); border-radius: 5px; margin-top: 6px; }
.balken div { height: 10px; background: var(--blue); border-radius: 5px; }
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.formular label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.formular .breit { grid-column: 1 / -1; }
.formular input, .formular select, .formular textarea { min-height: 40px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--ink); background: var(--input); }
.formular input:disabled, .formular select:disabled, .formular textarea:disabled { background: #F2F2F2; }
.fehler { color: var(--bad); font-size: 12px; }
.meldung { padding: 12px 16px; border-radius: 8px; background: var(--ok-bg); color: var(--ok); }
.berechnet { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; background: #F7F9FB; border-radius: 8px; padding: 12px; font-size: 13px; }
.berechnet span { color: var(--muted); display: block; font-size: 12px; }
.login { min-height: 100vh; display: grid; place-items: center; }
.login form { width: min(380px, 92vw); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.login input { height: 44px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 0 12px; font: inherit; width: 100%; }
.seiten { display: flex; gap: 8px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 13px; }

/* --- Ergänzungen 10.11.2026 --- */
.nav a.marke { text-decoration: none; color: inherit; }
.nav .fuss-knoepfe { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn.klein { height: 32px; padding: 0 10px; font-size: 13px; }
.knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
a.karte.link { color: inherit; text-decoration: none; transition: border-color .15s; }
a.karte.link:hover { border-color: var(--blue); }
.zahl.neg, .rot { color: var(--bad); }
.gruen { color: var(--ok); }
.klein { font-size: 12px; }
.zwischen { display: flex; justify-content: space-between; font-size: 13px; }
.reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); }
.reiter a { padding: 10px 14px; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.reiter a.aktiv { color: var(--navy-2); border-bottom-color: var(--navy-2); font-weight: 600; }
.reiter .zaehler { font-size: 11px; background: var(--line-soft); color: var(--muted); border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.filterleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filterleiste select, .filterleiste input[type=search] { height: 40px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 0 10px; font: inherit; background: #fff; max-width: 320px; }
.filterleiste input[type=search] { min-width: 240px; }
.tabellenkopf { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 6px; gap: 12px; flex-wrap: wrap; }
table.kompakt td { padding: 8px 6px; }
tr.summenzeile td { background: #F7F9FB; font-weight: 600; }
table.monate td, table.monate th { padding: 8px 6px; font-size: 12px; }
.infogitter { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 20px; font-size: 14px; }
.infogitter span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 2px; }
.infogitter .breit { grid-column: 1 / -1; }
.zeilenform { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.zeilenform .eingabe { flex: 1 1 320px; min-height: 40px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 6px 10px; font: inherit; background: var(--input); }
.monatsleiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 6px; margin-top: 16px; font-size: 13px; font-variant-numeric: tabular-nums; }
.monatsleiste div { background: #F7F9FB; border-radius: 6px; padding: 6px 8px; }
.monatsleiste span { display: block; color: var(--muted); font-size: 11px; }
.fehlermeldung { background: var(--bad-bg); color: var(--bad); }
.haken { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: 14px !important; color: var(--ink) !important; }
.haken input { min-height: 0 !important; }
.diagramm { margin-top: 10px; }
.diagramm svg { display: block; overflow: visible; }
.diagramm .achse { stroke: #C9D2DE; }
.diagramm .lab { font-size: 11px; fill: var(--muted); }
.diagramm .wert { font-size: 11px; fill: var(--ink); font-weight: 600; }
.diagramm .name { font-size: 12px; fill: var(--ink); }
.legende { display: flex; gap: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.legende i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.f-blau { fill: #2E6DA4; background: #2E6DA4; } .f-hell { fill: #A9C4E0; background: #A9C4E0; }
.f-k0 { fill: #2E6DA4; background: #2E6DA4; } .f-k1 { fill: #D9822B; background: #D9822B; } .f-k2 { fill: #5B9A68; background: #5B9A68; }
.f-k3 { fill: #8E6BB8; background: #8E6BB8; } .f-k4 { fill: #C2504F; background: #C2504F; } .f-k5 { fill: #8592A3; background: #8592A3; }
.nav .fuss a.btn, .nav .btn { color: var(--ink); }
.f-k6 { fill: #3F8F8F; background: #3F8F8F; } .f-k7 { fill: #B8952E; background: #B8952E; }
/* feste Spaltenbreiten: Tabelle springt beim Filtern nicht */
table.fest { table-layout: fixed; }
table.fest td.kurz { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filterleiste select.fest-breit { width: 180px; }
.filterleiste select { width: 220px; }
.filterleiste input[type=search] { width: 280px; }
a.karte.gewaehlt { border: 2px solid var(--navy-2); }

/* Ablage (Drag & Drop) auf der Übersicht */
.ablage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px;
  border: 2px dashed var(--line); border-radius: 10px; padding: 18px; text-align: center; cursor: pointer; transition: .15s; }
.ablage:hover, .ablage.ueber { border-color: var(--blue); background: rgba(31, 78, 121, .06); }
.ablage .gross { font-weight: 600; font-size: 15px; }
.ablage input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ablage.laeuft { opacity: .6; pointer-events: none; }
.stand { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.stand td { padding: 5px 0; border-top: 1px solid var(--line-soft); } .stand td:last-child { text-align: right; }
.stand .alt { color: var(--warn); font-weight: 600; }
.hinweisbox { background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 10px 14px; margin: 0; }
.breit-tabelle td, .breit-tabelle th { font-size: 12.5px; padding-left: 6px; padding-right: 6px; }
.breit-tabelle td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
tr.gruppe td { background: var(--line-soft); font-weight: 600; }
/* Menü sortieren */
.nav .menue { display: flex; flex-direction: column; gap: 4px; }
.nav a.punkt { display: flex; align-items: center; gap: 8px; }
.nav .griff, .nav .pfeile { display: none; }
.nav .menue.sortieren a.punkt { cursor: grab; outline: 1px dashed #3A5878; }
.nav .menue.sortieren .griff { display: inline; color: #7F96B0; }
.nav .menue.sortieren .pfeile { display: inline-flex; gap: 2px; margin-left: auto; }
.nav .pfeile button { background: #1B3554; color: #DCE4EE; border: 0; border-radius: 4px; width: 22px; height: 22px; font-size: 10px; cursor: pointer; }
.nav .pfeile button:hover { background: var(--blue); }
.nav a.punkt.zieht { opacity: .5; }
.nav .menue-knoepfe { display: flex; gap: 10px; padding: 8px 12px 0; }
.nav .menue-link { background: none; border: 0; padding: 0; color: #9FB2C8; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; }
.nav .menue-link:hover { color: #fff; }
.nav .menue.sortieren a.punkt { padding: 8px 6px 8px 8px; font-size: 13px; }
.nav .menue.sortieren .pfeile button { width: 20px; }

table.rechte td.mitte, table.rechte th.mitte { text-align: center; }
table.rechte input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--navy-2); cursor: pointer; }
/* Offene Posten: zwei gleich breite Spalten, gleich große Kacheln */
.op-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.op-spalten > section { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.op-titel { margin: 0; padding-left: 12px; border-left: 4px solid; }
.op-titel.aus { border-color: #C2504F; } .op-titel.ein { border-color: var(--blue); }
.op-karten { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 12px; }
.op-karten .karte { display: flex; flex-direction: column; min-height: 118px; }
.op-karten .karte .hinweis { margin-top: auto; }
.op-spalten .panel h3 { margin: 0 0 8px; font-size: 15px; }
.op-monat { margin-top: 10px; }
.balken.aus div { background: #C2504F; }
@media (max-width: 1000px) { .op-spalten { grid-template-columns: 1fr; } }

/* Zeitraum-Auswahl (Controlling) */
.zeitraum { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.segmente { display: inline-flex; flex-wrap: wrap; gap: 2px; background: var(--line-soft); border-radius: 9px; padding: 3px; }
.segmente a { padding: 7px 14px; border-radius: 7px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; }
.segmente a:hover { color: var(--ink); background: rgba(255, 255, 255, .6); }
.segmente a.aktiv { background: #fff; color: var(--navy-2); font-weight: 600; box-shadow: 0 1px 2px rgba(18, 38, 63, .12); }
.datumsfelder { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.datumsfelder label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.datumsfelder input[type=date] { height: 36px; border: 1px solid #D5DCE5; border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px;
  color: var(--ink); background: #fff; }
.datumsfelder input[type=date]:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.datumsfelder .btn.klein { height: 36px; }
/* Datei-Auswahl überall einheitlich */
input[type=file] { font: inherit; font-size: 14px; color: var(--muted); }
input[type=file]::file-selector-button { height: 36px; padding: 0 14px; margin-right: 12px; border: 1px solid #D5DCE5; border-radius: 8px;
  background: #fff; color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
input[type=file]::file-selector-button:hover { border-color: var(--blue); color: var(--navy-2); }
#ablage-form { margin-top: 12px; }
.filterleiste .btn { height: 40px; }

/* ---- Einheitliches Raster (Symmetrie) ---------------------------------------------------------
   Kacheln: immer gleich breit und gleich hoch, 4 je Zeile (bei 2 bzw. 3 Kacheln entsprechend).
   Reihen: zwei gleich breite Spalten, Panels gleich hoch. Detailseiten: Inhalt 2/3, Seitenleiste 1/3. */
.karten:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.karten:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.karte { display: flex; flex-direction: column; min-height: 122px; }
.karte .hinweis { margin-top: auto; padding-top: 6px; }
.reihe.detail { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; }
.reihe > .panel > h2:first-child, .seite-info h2 { margin-bottom: 12px; }
.seite-info p { margin: 0 0 10px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.seite-info ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.kopf h1 + .unter, .kopf .zurueck + h1 { margin-top: 4px; }
.kopf .zurueck { margin: 0 0 2px; font-size: 13px; }
.kopf .zurueck a { color: var(--muted); }
.kopf .zurueck a:hover { color: var(--navy-2); }
@media (max-width: 1100px) {
  .karten, .karten:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe, .reihe.detail { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) { .karten, .karten:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); } }
.badge.gross { font-size: 14px; padding: 6px 14px; }
main > .segmente { align-self: flex-start; }
.formular input[type=checkbox], .formular input[type=radio] { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 10px 0 0; accent-color: var(--navy-2); }
.tabellenfuss { padding: 10px 16px 14px; margin: 0; }
.tabellenfuss.zeilenform { display: flex; gap: 10px; align-items: center; }
.tabellenfuss.zeilenform .eingabe { flex: 1 1 auto; min-height: 36px; }
input.zelle { width: 100%; height: 28px; border: 1px solid #E5DFC0; border-radius: 6px; background: var(--input); text-align: right;
  font: inherit; font-size: 12.5px; padding: 0 6px; font-variant-numeric: tabular-nums; }
input.zelle:focus { outline: 2px solid var(--blue); border-color: var(--blue); }
tr.leise td { color: var(--muted); }
.zeile-form { display: flex; gap: 8px; align-items: center; }
.zeile-form select, .zeile-form input { height: 32px; border: 1px solid #D5DCE5; border-radius: 6px; padding: 0 8px; font: inherit; font-size: 13px; background: var(--input); }
.zeile-form select { width: 190px; } .zeile-form input { width: 100px; }
.breit-tabelle td.n, .breit-tabelle th.n { padding-left: 4px; padding-right: 6px; }
.breit-tabelle { font-size: 12.5px; }