/* 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(auto-fit, minmax(220px, 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: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.reihe > * { flex: 1 1 380px; 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; }