:root {
  --navy: #071F4E; --navy-2: #0B2A63; --navy-line: #2A4070;
  --gold: #D4AF37; --gold-bg: #EDE3C2;
  --tinte: #1A2233; --grau: #5A6478; --hell: #F4F6FA;
  --rand: #D8DEE9; --gruen: #1E7D45; --gruen-bg: #E7F1EA;
  --rot: #A32D2D; --rot-bg: #FCEBEB; --amber: #854F0B; --amber-bg: #FAEEDA;
  --blau: #185FA5; --blau-bg: #E6F1FB;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: Inter, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; color: var(--tinte); background: var(--hell); }
a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Kopf */
.topbar { background: var(--navy); border-bottom: 3px solid var(--gold);
  padding: 10px 22px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: 10px; color: #fff; }
.marke .logo { width: 30px; height: 30px; border-radius: 7px; background: var(--gold);
  color: var(--navy); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.marke .name { font-weight: 600; font-size: 16.5px; letter-spacing: .2px; }
.topbar .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar select { background: rgba(255,255,255,.12); color: #fff; border: 1px solid var(--navy-line);
  border-radius: 6px; padding: 5px 8px; font-size: 12.5px; }
.topbar .user { color: #C9D2E4; font-size: 12.5px; }
.topbar a.aus { color: #C9D2E4; font-size: 12.5px; }

nav.haupt { background: var(--navy-2); padding: 0 22px; display: flex; gap: 2px; flex-wrap: wrap; }
nav.haupt a { color: #B9C3D8; padding: 10px 12px; font-size: 13px; border-bottom: 2px solid transparent; }
nav.haupt a:hover { color: #fff; text-decoration: none; }
nav.haupt a.aktiv { color: #fff; border-bottom-color: var(--gold); }

main { max-width: 1080px; margin: 22px auto; padding: 0 22px; }
h1 { font-size: 23px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--navy); margin: 0 0 4px; }
.untertitel { color: var(--grau); font-size: 13px; margin-bottom: 18px; }
h2 { font-size: 15px; color: var(--navy); margin: 22px 0 8px; }

/* Karten und Kennzahlen */
.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.karte { background: #fff; border: 1px solid var(--rand); border-radius: 10px; padding: 14px 16px; }
.karte .label { font-size: 12px; color: var(--grau); }
.karte .wert { font-size: 22px; font-weight: 600; margin-top: 3px; }
.karte .zusatz { font-size: 11.5px; color: var(--grau); margin-top: 2px; }
.wert.gruen { color: var(--gruen); } .wert.rot { color: var(--rot); }

.panel { background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 16px 18px; margin-top: 14px; }
.panel h2:first-child { margin-top: 0; }

/* Tabellen */
table.daten { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
table.daten th { text-align: left; font-size: 11.5px; font-weight: 500; color: #C9D2E4;
  background: var(--navy); padding: 8px 10px; border-bottom: 2px solid var(--gold); }
table.daten th.r, table.daten td.r { text-align: right; }
table.daten td { padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: top; }
table.daten tr:nth-child(even) td { background: #FAFBFD; }
table.daten tr.total td { background: var(--gold-bg); font-weight: 600; border-top: 2px solid var(--navy); }
table.daten tr.gruppe td { background: var(--hell); font-weight: 600; color: var(--navy); }
.mwstzeile td { color: var(--grau); font-size: 12px; }

/* Badges */
.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 6px; }
.badge.gruen { background: var(--gruen-bg); color: var(--gruen); }
.badge.rot { background: var(--rot-bg); color: var(--rot); }
.badge.amber { background: var(--amber-bg); color: var(--amber); }
.badge.blau { background: var(--blau-bg); color: var(--blau); }
.badge.gold { background: var(--gold-bg); color: #6B5310; }

/* Formulare */
label { font-size: 12px; color: var(--grau); display: block; margin-bottom: 3px; }
input[type=text], input[type=date], input[type=number], input[type=email],
input[type=password], select, textarea {
  border: 1px solid var(--rand); border-radius: 7px; padding: 7px 9px; font-size: 13px;
  font-family: inherit; background: #fff; color: var(--tinte); width: 100%; }
input:focus, select:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.formzeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.formzeile > div { flex: 1; min-width: 130px; }
.btn { display: inline-block; background: var(--navy); color: #fff; border: 0; border-radius: 7px;
  padding: 8px 15px; font-size: 13px; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--navy-2); }
.btn.sekundaer { background: #fff; color: var(--navy); border: 1px solid var(--rand); }
.btn.klein { padding: 4px 10px; font-size: 12px; }
.btn.gefahr { background: #fff; color: var(--rot); border: 1px solid var(--rand); }

.hinweis { font-size: 12px; color: var(--grau); margin-top: 8px; }
.meldung { border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 14px; }
.meldung.ok { background: var(--gruen-bg); color: var(--gruen); }
.meldung.fehler { background: var(--rot-bg); color: var(--rot); }

/* Avatare */
.avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--navy); color: var(--gold);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px;
  font-weight: 600; vertical-align: middle; margin-right: 7px; flex-shrink: 0; }

/* Aktien-Grafik */
.balken { display: flex; height: 22px; border-radius: 5px; overflow: hidden; margin-top: 5px; }
.legende { display: flex; gap: 6px 16px; flex-wrap: wrap; font-size: 12px; color: var(--grau); margin-top: 8px; }
.punkt { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy); }
.login-box { background: #fff; border-radius: 12px; padding: 34px 36px; width: 360px;
  border-top: 4px solid var(--gold); }
.login-box h1 { font-size: 20px; }

/* Druck (Kontoauszug, Bilanz, ER, Aktienbuch) */
@media print {
  .topbar, nav.haupt, .kein-druck { display: none !important; }
  body { background: #fff; font-size: 11.5px; }
  main { max-width: none; margin: 0; padding: 0; }
  .panel { border: 0; padding: 0; }
  table.daten th { color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Datei-Auswahl: eigener kompakter Knopf statt Browser-Standardtext */
.datei { display: inline-flex; align-items: center; gap: 8px; }
.datei input[type=file] { display: none; }
.datei .dateiname { font-size: 11.5px; color: var(--grau); max-width: 150px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Loesch-Bestaetigung (Schritt 2) */
.warnbox { background: var(--rot-bg); border: 1px solid #E6B8B8; border-radius: 10px;
  padding: 14px 18px; margin-bottom: 14px; }
.warnbox .titel { color: var(--rot); font-weight: 600; font-size: 14px; margin-bottom: 6px; }

/* Icon-Knoepfe am Zeilenende (Journal) */
.iknopf { display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:6px; color:#fff !important; vertical-align:middle;
  margin-left:4px; text-decoration:none !important; font-size:13px; line-height:1; }
.iknopf:hover { opacity:.82; text-decoration:none; }
.iknopf.gruen { background: var(--gruen); }
.iknopf.dunkel { background: #23272E; }
.iknopf.rot { background: var(--rot); }
.iknopf svg { display:block; }
.kontolink { color: var(--grau); }
.kontolink:hover { color: var(--blau); }
/* Ablagezone fuer Beleg-Upload */
.dropzone { border:2px dashed var(--rand); border-radius:12px; padding:26px 18px; text-align:center;
  color:var(--grau); cursor:pointer; transition:all .15s ease; background:#fff; }
.dropzone.aktiv { border-color: var(--gold); background: var(--gold-bg); color: var(--tinte); }