* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f5f5; color: #333; }

/* Login */
#login-screen { display: flex; justify-content: center; align-items: center; height: 100vh; background: #1a1a2e; }
.login-box { background: #fff; padding: 2rem; border-radius: 8px; width: 320px; }
.login-box h1 { font-size: 1.2rem; margin-bottom: 1.5rem; color: #1a1a2e; text-align: center; }
.login-box input { width: 100%; padding: 0.6rem; margin-bottom: 0.8rem; border: 1px solid #ddd; border-radius: 4px; font-size: 0.95rem; }
.login-box button { width: 100%; padding: 0.7rem; background: #2d5a27; color: #fff; border: none; border-radius: 4px; font-size: 1rem; cursor: pointer; }
.login-box button:hover { background: #3d7a37; }
#login-error { color: #c00; margin-top: 0.5rem; font-size: 0.85rem; text-align: center; }

/* Header */
header { background: #1a1a2e; color: #fff; padding: 0.8rem 1.5rem; display: flex; align-items: center; gap: 2rem; }
header h1 { font-size: 1.1rem; white-space: nowrap; }
nav { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.tab { padding: 0.4rem 0.9rem; background: transparent; color: #aaa; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.tab.active, .tab:hover { color: #fff; border-color: #4a7; background: rgba(74,170,100,0.15); }
.user-info { margin-left: auto; display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.user-info button { padding: 0.3rem 0.7rem; background: #444; color: #fff; border: none; border-radius: 4px; cursor: pointer; }

/* Main */
main { padding: 1.5rem; max-width: 1400px; margin: 0 auto; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Dashboard Cards */
#dashboard-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.card { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.card .label { font-size: 0.8rem; color: #888; margin-bottom: 0.3rem; }
.card .value { font-size: 1.5rem; font-weight: 700; }
.card.warn .value { color: #c60; }
.card.error .value { color: #c00; }
.card.ok .value { color: #2d5a27; }

.dashboard-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-row > div { background: #fff; padding: 1rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Toolbar */
.toolbar { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; align-items: center; }
.toolbar select, .toolbar input { padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.85rem; }
.toolbar button { padding: 0.4rem 0.8rem; background: #2d5a27; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 0.85rem; }
.toolbar button:hover { background: #3d7a37; }

/* Tables */
table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
th { background: #1a1a2e; color: #fff; padding: 0.6rem 0.5rem; text-align: left; font-size: 0.8rem; font-weight: 600; }
td { padding: 0.5rem; border-bottom: 1px solid #eee; font-size: 0.85rem; }
tr:hover { background: #f8f9fa; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.diff-error { color: #c00; font-weight: 700; }

/* Status badges */
.badge { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; }
.badge-neu { background: #ffeeba; color: #856404; }
.badge-geprueft { background: #b8daff; color: #004085; }
.badge-freigegeben { background: #c3e6cb; color: #155724; }

/* Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.8rem; background: #fff; padding: 1.2rem; border-radius: 8px; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.form-grid label { display: flex; flex-direction: column; font-size: 0.8rem; color: #666; }
.form-grid input, .form-grid select, .form-grid textarea { margin-top: 0.2rem; padding: 0.4rem; border: 1px solid #ccc; border-radius: 4px; font-size: 0.9rem; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; justify-content: flex-end; }
.form-actions button { padding: 0.5rem 1.2rem; border: none; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
.btn-primary { background: #2d5a27; color: #fff; }
.btn-cancel { background: #ddd; color: #333; }

h2 { margin: 1.5rem 0 0.8rem; font-size: 1.1rem; color: #1a1a2e; }

/* Modal */
#modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: flex-start; padding-top: 5vh; z-index: 300; }
#modal-content { background: #fff; border-radius: 8px; padding: 1.5rem; max-width: 1200px; width: 95%; max-height: 85vh; overflow-y: auto; }

/* Fällig-Warnung */
.faellig { background: #fff3cd; }

@media (max-width: 768px) {
  .form-grid { grid-template-columns: 1fr; }
  .dashboard-row { grid-template-columns: 1fr; }
  header { flex-wrap: wrap; }
}

/* Upload Zone */
.upload-zone {
  border: 2px dashed #aaa; border-radius: 12px; padding: 2rem;
  text-align: center; cursor: pointer; transition: all 0.2s;
  background: #fafbfc; margin-bottom: 1rem;
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: #2d5a27; background: #f0f7ef;
}
.upload-icon { font-size: 2.5rem; margin-bottom: 0.5rem; }
.upload-text { font-size: 1.1rem; font-weight: 600; color: #333; }
.upload-sub { font-size: 0.85rem; color: #888; margin-top: 0.3rem; }
.upload-camera {
  margin-top: 1rem; padding: 0.6rem 1.2rem; font-size: 1rem;
  background: #2d5a27; color: #fff; border: none; border-radius: 6px; cursor: pointer;
}
.upload-camera:hover { background: #3d7a37; }

/* Mobile Form */
@media (max-width: 768px) {
  .upload-zone { padding: 1.5rem; }
  .upload-icon { font-size: 2rem; }
  .upload-camera { width: 100%; font-size: 1.1rem; padding: 0.8rem; }
  .form-grid { grid-template-columns: 1fr !important; }
  .toolbar { flex-direction: column; }
  .toolbar select, .toolbar input, .toolbar button { width: 100%; }
  table { font-size: 0.75rem; }
  th, td { padding: 0.3rem; }
  header { padding: 0.5rem; gap: 0.5rem; }
  header h1 { font-size: 0.95rem; }
  nav { width: 100%; }
  .tab { flex: 1; text-align: center; padding: 0.5rem; }
}
.card[onclick] { cursor: pointer; transition: transform 0.1s; }
.card[onclick]:hover { transform: translateY(-2px); box-shadow: 0 3px 8px rgba(0,0,0,0.15); }

.hilfe-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;border:1px solid #8aa;background:#e8eef7;color:#345;font-size:11px;line-height:1;cursor:pointer;padding:0;vertical-align:middle;font-weight:700;}
.hilfe-btn:hover{background:#d7e2f2;}
.feld-hilfe-pop{position:absolute;z-index:500;max-width:300px;background:#fff;border:1px solid #bbb;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.22);padding:10px 12px;font-size:0.82rem;line-height:1.45;color:#222;}
.feld-hilfe-pop .fh-titel{font-weight:700;margin-bottom:4px;}
.feld-hilfe-pop .fh-bsp{margin-top:6px;color:#555;font-size:0.78rem;border-top:1px solid #eee;padding-top:5px;}
.feld-hilfe-pop .fh-close{margin-top:8px;font-size:0.78rem;padding:2px 10px;}

/* stepper-fit */
.form-grid label { min-width: 0; }
.form-grid input, .form-grid select, .form-grid textarea { width: 100%; box-sizing: border-box; min-width: 0; }

.belege-uebersicht{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0;}
.ub-block{background:#f4f7fb;border:1px solid #dbe3ec;border-radius:10px;padding:10px 14px;min-width:150px;flex:1;}
.ub-titel{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:#5a6b7d;margin-bottom:6px;font-weight:700;}
.ub-zeile{display:flex;justify-content:space-between;gap:12px;font-size:.85rem;padding:2px 0;}
.ub-zeile b{font-weight:600;white-space:nowrap;}
.ub-n{color:#8a9aab;font-weight:400;font-size:.78rem;}
.ub-btn{font-size:.72rem;padding:1px 8px;margin-left:6px;background:#2d5a27;color:#fff;border:none;border-radius:5px;cursor:pointer;}
.pdf-link{display:inline-block;font-size:.8rem;color:#2d5a27;text-decoration:none;margin-right:4px;}
.pdf-link:hover{text-decoration:underline;}
.pdf-fehlt{color:#bbb;margin-right:4px;}

/* === Tags (v73) === */
.tag-chip { display:inline-block; padding:0.15rem 0.55rem; margin:0.15rem 0.25rem 0.15rem 0; border:1px solid #bbb; border-radius:12px; font-size:0.8rem; cursor:pointer; background:#f5f5f5; color:#333; user-select:none; }
.tag-chip:hover { border-color:#2d5a27; }
.tag-chip.sel { background:#2d5a27; border-color:#2d5a27; color:#fff; }
.tag-chip.mini { font-size:0.7rem; padding:0.05rem 0.4rem; cursor:default; background:#eef4ee; border-color:#cde0cd; color:#2d5a27; }

/* === Sortierbare Spalten (v74) === */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { text-decoration: underline; }
th.sortable.asc::after { content: " \25B2"; font-size: 0.7em; }
th.sortable.desc::after { content: " \25BC"; font-size: 0.7em; }

/* === Steuerkanzlei-Ansicht ============================================
   Optik bewusst nah an einem Kanzleiausdruck: schmale Linien, Zahlen in
   Tabellenziffern rechtsbuendig, Kontonummern in Schreibmaschinenschrift.
   Nichts blinkt, nichts ist bunt — das ist hier ein Vorzug.            */
.stk { background:#fff; color:#1a1a1a; }
.stk-kopf { border:1px solid #9aa5b1; border-top:3px solid #2c3e50; padding:0.7rem 0.9rem;
  margin-bottom:0.8rem; background:#fbfcfd; }
.stk-kopf h3 { margin:0 0 0.5rem 0; font-size:1.05rem; letter-spacing:0.02em; }
.stk-kopf dl { display:grid; grid-template-columns:auto 1fr auto 1fr; gap:0.15rem 0.8rem;
  margin:0; font-size:0.82rem; }
.stk-kopf dt { color:#5a6673; }
.stk-kopf dd { margin:0; font-weight:600; }
.stk-kopf dd.leer { font-weight:400; color:#b04a4a; }

.stk-blaetter { display:flex; flex-wrap:wrap; gap:0.25rem; margin:0.6rem 0 0.9rem 0;
  border-bottom:2px solid #2c3e50; }
.stk-blaetter button { border:1px solid #c3ccd5; border-bottom:none; background:#eef2f6;
  padding:0.32rem 0.7rem; font-size:0.82rem; cursor:pointer; border-radius:3px 3px 0 0; }
.stk-blaetter button.aktiv { background:#2c3e50; color:#fff; border-color:#2c3e50; font-weight:600; }

.stk-blatt { display:none; }
.stk-blatt.aktiv { display:block; }
.stk-blatt h4 { margin:1.1rem 0 0.35rem 0; font-size:0.92rem; text-transform:uppercase;
  letter-spacing:0.06em; color:#2c3e50; border-bottom:1px solid #2c3e50; padding-bottom:0.15rem; }
.stk-blatt h5 { margin:0.8rem 0 0.25rem 0; font-size:0.85rem; color:#33414f; }

table.stk-t { width:100%; border-collapse:collapse; font-size:0.82rem; margin-bottom:0.5rem; }
table.stk-t th { text-align:left; padding:0.28rem 0.4rem; font-weight:600; white-space:nowrap;
  /* Ohne eigene Farbe erbt die Zeile das dunkle th aus dem Grundstil — dann steht
     grauer Text auf dunklem Grund und die Spaltenkoepfe sind kaum zu lesen. */
  background:#2c3e50; color:#fff; border-bottom:1px solid #2c3e50; }
table.stk-t th.num { text-align:right; }
table.stk-t td { border-bottom:1px solid #e6eaee; padding:0.22rem 0.4rem; vertical-align:top; }
table.stk-t tr:hover td { background:#f4f7fa; }
table.stk-t .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.stk-t .konto { font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace; }
table.stk-t tr.summe td { border-top:1px solid #2c3e50; border-bottom:2px solid #2c3e50;
  font-weight:700; background:#f7f9fb; }
table.stk-t tr.zwischen td { font-weight:600; background:#fafbfc; }
table.stk-t td.weich { color:#6b7783; }

.stk-hin { border-left:4px solid #9aa5b1; padding:0.45rem 0.7rem; margin:0.45rem 0;
  background:#fafbfc; font-size:0.84rem; }
.stk-hin.wichtig { border-left-color:#c0392b; background:#fdf6f5; }
.stk-hin.offen { border-left-color:#d68910; background:#fdfaf3; }
.stk-hin.grundsatz { border-left-color:#2c3e50; }
.stk-hin.hinweis { border-left-color:#7f8c8d; }
.stk-hin b { display:block; margin-bottom:0.15rem; }
.stk-hin .ids { color:#6b7783; font-size:0.78rem; margin-top:0.2rem; }

.stk-fuss { margin-top:1.2rem; padding-top:0.5rem; border-top:1px solid #c3ccd5;
  font-size:0.76rem; color:#5a6673; line-height:1.45; }
.stk-ampel { display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.6rem; }
.stk-ampel span { padding:0.22rem 0.6rem; border-radius:3px; font-size:0.8rem; font-weight:600; }
.stk-ampel .gut { background:#e8f5e9; color:#1e6b2c; }
.stk-ampel .warn { background:#fdf3e3; color:#8a5a10; }
.stk-ampel .rot { background:#fdecea; color:#96271b; }
.stk-nachweis summary { cursor:pointer; font-size:0.84rem; padding:0.2rem 0;
  color:#2c3e50; font-weight:600; }
.stk-nachweis[open] summary { border-bottom:1px solid #e6eaee; margin-bottom:0.25rem; }
@media (max-width:760px) {
  .stk-kopf dl { grid-template-columns:auto 1fr; }
  table.stk-t { font-size:0.75rem; }
}

/* Ausdruck: die Kanzlei bekommt es womoeglich auf Papier. Dann sollen ALLE
   Blaetter erscheinen, nicht nur das gerade gewaehlte, und keine Tabelle darf
   mitten in einer Zeile umbrechen. */
@media print {
  .toolbar, .stk-blaetter, nav, header { display:none !important; }
  .stk-blatt { display:block !important; page-break-before:always; }
  .stk-blatt:first-of-type { page-break-before:auto; }
  .stk-nachweis > summary { display:none; }
  .stk-nachweis > table { display:table !important; }
  table.stk-t { font-size:8pt; }
  table.stk-t th { background:#fff !important; color:#000 !important;
    border-bottom:1px solid #000; }
  table.stk-t tr { page-break-inside:avoid; }
  .stk-kopf { break-inside:avoid; }
  body { background:#fff; }
}