:root {
  --blau: #1d3b7a; --blau-hell: #e3e9f4; --blau-mittel: #3a5ba0; --rot: #c8102e;
  --grund: #f3f5f9; --karte: #ffffff; --text: #16191f; --text2: #545b66; --linie: #d6dbe4;
  --ok: #157f3b; --ok-hell: #e3f4e8; --warn: #9a5b00; --warn-hell: #fff4dc; --fehler: #b42318; --fehler-hell: #fde8e6;
  --s-m: #2a78d6; --s-w: #eb6834; --s-d: #1baf7a;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--grund); color: var(--text); }
a { color: var(--blau); }
h1 { font-size: 22px; margin: 0 0 4px; color: var(--blau); }
h2 { font-size: 17px; margin: 0 0 10px; color: var(--blau); }
h3 { font-size: 15px; margin: 14px 0 6px; }
.versteckt { display: none !important; }
.laden { padding: 40px; text-align: center; color: var(--text2); }
.klein-text { font-size: 13px; color: var(--text2); }
.zahl { font-variant-numeric: tabular-nums; }

/* Kopfzeile */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--blau); color: #fff; padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top)); }
.marke { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 16px; }
.marke img { height: 34px; width: 34px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
#nav { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
#nav a { color: #dfe6f5; text-decoration: none; padding: 7px 12px; border-radius: 8px; font-weight: 600; }
#nav a.aktiv, #nav a:hover { background: rgba(255,255,255,.16); color: #fff; }
.nutzer { display: flex; align-items: center; gap: 8px; font-size: 14px; }

main { max-width: 1180px; margin: 0 auto; padding: 18px 14px 120px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.karte.eng { padding: 0; overflow: hidden; }
.karte.eng > h2 { padding: 14px 16px 0; }
.zeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.zeile.ende { justify-content: flex-end; }
.zeile.zwischen { justify-content: space-between; }
.raster { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kacheln { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 14px 0; }
.raster2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
@media (max-width: 520px) { .kacheln { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin: 14px 0; }
.raster2 { grid-template-columns: 1fr; } }

/* Knöpfe & Felder */
.knopf { -webkit-appearance: none; appearance: none; border: 1px solid var(--blau); background: var(--blau); color: #fff; border-radius: 8px;
  padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.knopf:hover { background: var(--blau-mittel); }
.knopf.zweit { background: #fff; color: var(--blau); }
.knopf.zweit:hover { background: var(--blau-hell); }
.knopf.gruen { background: var(--ok); border-color: var(--ok); }
.knopf.rot { background: #fff; color: var(--fehler); border-color: var(--fehler); }
.knopf.rot:hover { background: var(--fehler-hell); }
.knopf.klein { padding: 5px 10px; min-height: 32px; font-size: 13px; }
.knopf.hell { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.knopf.hell:hover { background: rgba(255,255,255,.15); }
.knopf[disabled] { opacity: .5; cursor: default; }
label.feld { display: block; font-size: 13px; font-weight: 600; color: var(--text2); }
label.feld > input, label.feld > select, label.feld > textarea { display: block; width: 100%; margin-top: 4px; }
input[type=text], input[type=password], input[type=email], input[type=date], select, textarea {
  font: inherit; font-size: 16px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 8px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau-mittel); outline-offset: 0; border-color: var(--blau-mittel); }
textarea { min-height: 80px; resize: vertical; }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.check input { width: 20px; height: 20px; }

/* Anmeldung */
.login { max-width: 420px; margin: 8vh auto; text-align: center; }
.login img { width: 96px; height: 96px; object-fit: contain; }
.login form { text-align: left; display: grid; gap: 14px; margin-top: 18px; }

/* Status */
.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.status.entwurf { background: #eef0f4; color: #3c4350; }
.status.abgegeben { background: #e2ecfb; color: #1c4f9c; }
.status.angenommen { background: var(--ok-hell); color: var(--ok); }
.status.zurueckgegeben { background: var(--warn-hell); color: var(--warn); }
.status.leer { background: #fff; color: var(--text2); border: 1px dashed var(--linie); }
.banner { border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; border: 1px solid; }
.banner.warn { background: var(--warn-hell); border-color: #f0d08a; color: #5c3b00; }
.banner.fehler { background: var(--fehler-hell); border-color: #f3b1aa; color: #7a1a12; }
.banner.ok { background: var(--ok-hell); border-color: #a9dbb8; color: #0d5227; }
.banner.info { background: var(--blau-hell); border-color: #b9c8e6; color: #19315f; }
.banner ul { margin: 6px 0 0; padding-left: 20px; }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { background: var(--blau); color: #fff; text-align: left; font-weight: 700; padding: 7px 8px; white-space: nowrap; }
table.t td { padding: 5px 8px; border-bottom: 1px solid #edf0f5; vertical-align: middle; }
table.t tbody tr:nth-child(odd) td { background: #f6f8fc; }
table.t td.r, table.t th.r { text-align: right; }
table.t td.c, table.t th.c { text-align: center; }
table.t tr.summe td { font-weight: 700; background: #eef2f9 !important; border-top: 2px solid var(--blau); }
table.t tr.einr td:first-child { padding-left: 24px; color: var(--text2); }
table.t td.gesamt { font-weight: 700; text-align: right; }
table.t td.vj { color: var(--text2); font-size: 12.5px; text-align: right; }
table.t tr.klickbar { cursor: pointer; }
table.t tr.klickbar:hover td { background: var(--blau-hell); }
td.abw { color: var(--warn); font-weight: 700; }
input.n { width: 72px; text-align: right; font-size: 16px; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 7px; font-variant-numeric: tabular-nums; }
input.n.breit { width: 96px; }
.null-knopf { padding: 10px 16px 14px; text-align: right; }
input.n.leer { background: #fff6dc; border-color: #e3b341; }
input.n:disabled, input[type=text]:disabled, textarea:disabled { background: #f4f5f8; color: #222; border-color: #e3e6ec; -webkit-text-fill-color: #222; opacity: 1; }

/* Ja/Nein */
.jn { display: inline-flex; border: 1px solid var(--linie); border-radius: 8px; overflow: hidden; }
.jn button { -webkit-appearance: none; border: 0; background: #fff; font: inherit; font-weight: 600; padding: 6px 16px; cursor: pointer; color: var(--text2); min-height: 36px; }
.jn button + button { border-left: 1px solid var(--linie); }
.jn button.an.ja { background: var(--ok); color: #fff; }
.jn button.an.nein { background: #5b6372; color: #fff; }
.jn.offen { border-color: var(--fehler); }
.jn button:disabled { cursor: default; }

/* Formular */
.formkopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; background: #fff; border-top: 1px solid var(--linie);
  box-shadow: 0 -4px 14px rgba(20,30,60,.08); padding: 10px 16px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.leiste-innen { max-width: 1180px; margin: 0 auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.leiste .info { flex: 1; font-size: 13.5px; color: var(--text2); min-width: 160px; }
.pruef { font-size: 14px; }
.pruef li { margin: 3px 0; }
.abschnitt-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.abschnitt-nav a { font-size: 13px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--linie); text-decoration: none; }

/* Kennzahlen */
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 12px 14px; }
.kachel .wert { font-size: 26px; font-weight: 700; color: var(--blau); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kachel .titel { font-size: 13px; color: var(--text2); }
.kachel .unter { font-size: 12.5px; color: var(--text2); margin-top: 2px; }

/* Diagramme */
.diagramm svg { width: 100%; height: auto; display: block; overflow: visible; }
.diagramm .achse { stroke: #c9ced8; stroke-width: 1; }
.diagramm .gitter { stroke: #edf0f4; stroke-width: 1; }
.diagramm text { font-size: 11px; fill: #545b66; font-family: inherit; }
.diagramm text.wert { fill: #16191f; font-weight: 600; }
.diagramm rect.balken:hover { opacity: .8; }
.legende { display: flex; gap: 14px; font-size: 13px; color: var(--text2); margin: 4px 0 8px; flex-wrap: wrap; }
.legende i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
details.tab-ansicht { margin-top: 6px; font-size: 13px; }
details.tab-ansicht summary { cursor: pointer; color: var(--blau); }
.tip { position: fixed; z-index: 50; pointer-events: none; background: #16191f; color: #fff; font-size: 12.5px; padding: 6px 9px; border-radius: 6px; max-width: 260px; }

/* Verwaltung */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--linie); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; text-decoration: none; font-weight: 600; color: var(--text2); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.aktiv { color: var(--blau); border-bottom-color: var(--blau); }
.pw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 15px; background: #f2f4f8; padding: 2px 6px; border-radius: 5px; user-select: all; -webkit-user-select: all; }

/* Dialog & Meldungen */
.dialog { position: fixed; inset: 0; z-index: 40; background: rgba(15,22,40,.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog-box { background: #fff; border-radius: 12px; max-width: 560px; width: 100%; max-height: 90vh; overflow: auto; padding: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.dialog-box .zeile.ende { margin-top: 16px; }
.meldung { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: 90px; background: #16191f; color: #fff; padding: 10px 16px; border-radius: 10px; max-width: 92vw; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.meldung.fehler { background: var(--fehler); }
.meldung.ok { background: var(--ok); }

.nur-druck { display: none; }
@media print {
  body > *:not(#druck) { display: none !important; }
  #druck { display: block !important; font-size: 12pt; }
  #druck table { border-collapse: collapse; width: 100%; }
  #druck td, #druck th { border: 1px solid #999; padding: 6px 8px; text-align: left; }
}
@media (max-width: 640px) {
  .kopf { gap: 8px; }
  .nutzer #nutzerName { display: none; }
  input.n { width: 58px; }
  table.t { font-size: 13px; }
  table.t td, table.t th { padding: 4px 5px; }
}

/* Passwort anzeigen */
.pw-feld { display: flex; gap: 6px; margin-top: 4px; }
.pw-feld input { flex: 1; min-width: 0; }
.pw-zeigen { -webkit-appearance: none; border: 1px solid var(--linie); background: #fff; color: var(--blau); border-radius: 8px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-width: 92px; }
.pw-zeigen:hover { background: var(--blau-hell); }

/* Berichtsarten */
.art { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; vertical-align: 2px; color: #fff; }
.art.jf { background: var(--blau); }
.art.kfw { background: #b45309; }
h1 .art, h2 .art { font-size: 13px; vertical-align: 3px; }
.bericht-karte.kfw { border-left: 4px solid #b45309; }
.bericht-karte.jf { border-left: 4px solid var(--blau); }
.art-tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.art-tabs a { padding: 8px 14px; border-radius: 10px; border: 1px solid var(--linie); background: #fff; text-decoration: none; font-weight: 700; color: var(--text2); }
.art-tabs a.aktiv { border-color: var(--blau); color: var(--blau); box-shadow: inset 0 -3px 0 var(--blau); }