/* Rechnungsverwaltung – Web-Oberfläche (angelehnt an das Fluent-Design der Desktop-Version) */
:root {
  --hg: #f3f3f3; --leiste: #ebebeb; --karte: #ffffff; --karte2: #f9f9f9; --rand: #e1e1e1; --rand2: #d0d0d0;
  --text: #1b1b1b; --text2: #5c5c5c; --text3: #8a8a8a;
  --akzent: #005fb8; --akzent-text: #ffffff; --akzent-hell: #cce4f7; --auswahl: #d6e9f8;
  --gruen: #0f7b0f; --orange: #c25a00; --rot: #c42b1c; --grau: #6b6b6b;
  --schatten: 0 1px 3px rgba(0,0,0,.08);
  color-scheme: light;
}
:root[data-modus="dunkel"] {
  --hg: #202020; --leiste: #1c1c1c; --karte: #2b2b2b; --karte2: #323232; --rand: #3a3a3a; --rand2: #4a4a4a;
  --text: #ffffff; --text2: #c5c5c5; --text3: #9a9a9a;
  --akzent: #60cdff; --akzent-text: #000000; --akzent-hell: #1f3d52; --auswahl: #2f4a5e;
  --gruen: #2e8b2e; --orange: #d46a00; --rot: #d13438; --grau: #6b6b6b;
  --schatten: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-modus="hell"]) {
    --hg: #202020; --leiste: #1c1c1c; --karte: #2b2b2b; --karte2: #323232; --rand: #3a3a3a; --rand2: #4a4a4a;
    --text: #ffffff; --text2: #c5c5c5; --text3: #9a9a9a;
    --akzent: #60cdff; --akzent-text: #000000; --akzent-hell: #1f3d52; --auswahl: #2f4a5e;
    --gruen: #2e8b2e; --orange: #d46a00; --rot: #d13438; --grau: #6b6b6b;
    --schatten: none;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--hg); color: var(--text); display: flex; overflow: hidden;
}

/* Seitenleiste */
.seitenleiste { width: 240px; flex: 0 0 240px; background: var(--leiste); display: flex; flex-direction: column; padding: 16px 10px; border-right: 1px solid var(--rand); }
.marke { display: flex; gap: 10px; align-items: center; padding: 4px 8px 18px; }
.markenlogo { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #000; }
.markenname { font-weight: 600; font-size: 15px; }
.markenzeile { font-size: 12px; color: var(--text2); }
nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; margin: 2px 0; border-radius: 6px; color: var(--text); text-decoration: none; position: relative; }
nav a:hover { background: var(--karte2); }
nav a.aktiv { background: var(--karte); font-weight: 600; }
nav a.aktiv::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--akzent); }
nav .sym { width: 20px; text-align: center; opacity: .85; }
.fuss { margin-top: auto; padding: 8px; }
.darstellung { display: flex; background: var(--karte); border-radius: 6px; padding: 3px; gap: 3px; margin-bottom: 10px; }
.darstellung button { flex: 1; border: 0; background: transparent; color: var(--text); padding: 5px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.darstellung button.aktiv { background: var(--akzent); color: var(--akzent-text); }
.klein { font-size: 12px; color: var(--text2); }
.benutzerinfo { background: var(--karte); border-radius: 6px; padding: 8px 10px; margin-bottom: 10px; }
.bi-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-knoepfe { display: flex; gap: 6px; margin-top: 6px; }
.bi-test { margin-top: 6px; padding: 4px 8px; border-radius: 5px; font-size: 12px; background: var(--akzent-hell); }
.bi-test.warnung { background: var(--orange); color: #fff; }
.bi-test.letzter { background: var(--rot); color: #fff; }
.bi-knoepfe button { flex: 1; padding: 4px 6px; font-size: 12px; }
[hidden] { display: none !important; }

/* Rechte: bei »Nur Lesen« ändernde Schaltflächen ausblenden */
body.nur-lesen [data-aendert] { display: none !important; }
.leserechte { background: var(--akzent-hell); border-radius: 6px; padding: 8px 12px; margin: -6px 0 14px; font-size: 13px; }
.modul-wahl { display: flex; gap: 8px; flex-wrap: wrap; }
.modul-wahl label { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rand); border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.modul-wahl input { width: auto; }

/* Zeiterfassung */
.zeit-tabelle td { vertical-align: top; }
.zeit-tabelle tr.tag { cursor: pointer; }
.zeit-tabelle tr.tag:hover td { background: var(--karte2); }
.zeit-tabelle tr.frei td { color: var(--text3); }
.zeit-tabelle tr.fremd td { opacity: .45; }
.zeit-tabelle tr.heute td:first-child { box-shadow: inset 3px 0 0 var(--akzent); font-weight: 600; }
.zeit-tabelle tr.woche td { background: var(--karte2); font-weight: 600; border-bottom: 2px solid var(--rand2); }
.zeit-tabelle .zeiten { white-space: normal; min-width: 180px; }
.plus { color: var(--gruen); } .minus { color: var(--rot); }
.zeit-saldo { font-size: 30px; font-weight: 600; line-height: 1.2; }
.stempel-knopf { font-size: 16px; padding: 10px 18px; margin-top: 8px; }
.laeuft { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--gruen); margin-right: 6px; animation: blinken 1.4s infinite; }
@keyframes blinken { 50% { opacity: .25; } }
.tage-wahl { display: flex; gap: 4px; flex-wrap: wrap; }
.tage-wahl label { display: flex; align-items: center; gap: 3px; border: 1px solid var(--rand); border-radius: 5px; padding: 3px 6px; cursor: pointer; }
.tage-wahl input { width: auto; }
.regel-tabelle td { vertical-align: middle; }
.regel-tabelle input[type=number] { width: 90px; }

/* Anmeldung */
.anmeldung-hg { position: fixed; inset: 0; z-index: 50; background: var(--hg); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: auto; }
.anmeldung { width: 100%; max-width: 400px; }
.anmeldung .marke { justify-content: center; padding-bottom: 8px; }
.anmeldung h1 { font-size: 22px; text-align: center; margin: 4px 0 6px; }
.anmeldung .hinweis { text-align: center; }
.anmeldung button.akzent { width: 100%; margin-top: 8px; padding: 9px; justify-content: center; }
.bi-knoepfe button { justify-content: center; }
.anmeldung .fehlertext { margin: 8px 0 0; }

/* Inhalt */
main { flex: 1; overflow: auto; padding: 24px 32px 40px; outline: none; }
h1 { font-size: 28px; font-weight: 600; margin: 4px 0 18px; }
h2 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.kopf h1 { margin: 0 auto 0 0; }
.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: 18px 20px; box-shadow: var(--schatten); }
.karte + .karte { margin-top: 16px; }
.raster { display: grid; gap: 16px; }
.raster-2 { grid-template-columns: 1fr 1fr; }
.raster-3 { grid-template-columns: repeat(3, 1fr); }
.raster-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .raster-2, .raster-3, .raster-5 { grid-template-columns: 1fr 1fr; } }
.kennzahl { font-size: 26px; font-weight: 600; margin: 6px 0 2px; white-space: nowrap; }
.feldname { font-size: 12px; color: var(--text2); margin-bottom: 4px; display: block; }
.hinweis { font-size: 12.5px; color: var(--text2); }
.warnung { color: var(--orange); }
.fehlertext { color: var(--rot); }
.klickbar { cursor: pointer; }
.klickbar:hover { border-color: var(--rand2); }

/* Schaltflächen */
button, .knopf { font: inherit; border: 1px solid var(--rand2); background: var(--karte); color: var(--text); padding: 6px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; text-decoration: none; white-space: nowrap; }
button:hover:not(:disabled), .knopf:hover { background: var(--karte2); }
button:disabled { opacity: .45; cursor: default; }
button.akzent { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
button.akzent:hover:not(:disabled) { filter: brightness(1.08); background: var(--akzent); }
button.gefahr { color: var(--rot); }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.werkzeuge .trenner { width: 8px; }

/* Formulare */
input, select, textarea { font: inherit; color: var(--text); background: var(--karte2); border: 1px solid var(--rand); border-bottom-color: var(--rand2); border-radius: 5px; padding: 6px 9px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--akzent); padding-bottom: 5px; }
textarea { resize: vertical; min-height: 64px; }
input[type=checkbox] { width: auto; accent-color: var(--akzent); }
input[type=color] { padding: 2px; height: 34px; width: 54px; }
.feld { margin-bottom: 12px; min-width: 0; }
.felder { display: grid; gap: 0 14px; }
.zeile { display: flex; gap: 14px; align-items: flex-end; }
.zeile > * { flex: 1; min-width: 0; }
label.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.zahl { text-align: right; }

/* Tabellen */
.tabelle-huelle { overflow: auto; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); }
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-weight: 600; padding: 9px 10px; background: var(--karte2); border-bottom: 1px solid var(--rand); position: sticky; top: 0; white-space: nowrap; cursor: default; }
th.sortierbar { cursor: pointer; }
td { padding: 8px 10px; border-bottom: 1px solid var(--rand); vertical-align: middle; white-space: nowrap; }
.positionen td { white-space: normal; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.waehlbar { cursor: pointer; }
tbody tr.waehlbar:hover { background: var(--karte2); }
tbody tr.gewaehlt, tbody tr.gewaehlt:hover { background: var(--auswahl); box-shadow: inset 3px 0 0 var(--akzent); }
td.r, th.r { text-align: right; }
td.fett { font-weight: 600; }
.leer { padding: 30px; text-align: center; color: var(--text2); }
.abzeichen { display: inline-block; padding: 1px 10px; border-radius: 10px; font-size: 12px; color: #fff; white-space: nowrap; }
.st-Entwurf { background: var(--grau); } .st-Offen { background: #0067c0; } .st-Bezahlt { background: var(--gruen); }
.st-Storniert { background: var(--rot); } .st-Überfällig, .st-Abgelaufen { background: var(--orange); }
.st-Angenommen { background: var(--gruen); } .st-Abgelehnt { background: var(--rot); } .st-Abgerechnet { background: #5c2d91; }
.filter { display: flex; gap: 10px; margin-bottom: 12px; }
.filter input { max-width: 420px; }
.filter select { max-width: 180px; }
.summenfuss { display: flex; justify-content: space-between; margin-top: 10px; padding: 0 4px; }

/* Editor */
.positionen td { padding: 4px 4px; }
.positionen input, .positionen select { padding: 5px 6px; background: transparent; border-color: transparent; }
.positionen input:hover, .positionen select:hover { border-color: var(--rand); }
.positionen tr.gewaehlt input, .positionen tr.gewaehlt select { background: var(--karte); }
.summen div { display: flex; justify-content: space-between; margin-bottom: 6px; }
.summen .neben { color: var(--text2); }
.summen .gesamt { border-top: 1px solid var(--rand); padding-top: 10px; margin-top: 8px; font-size: 16px; font-weight: 600; }
.summen .gesamt span:last-child { font-size: 22px; }
.aktionsleiste { position: sticky; bottom: -40px; margin: 20px -32px -40px; padding: 12px 32px; background: var(--leiste); border-top: 1px solid var(--rand); display: flex; gap: 8px; flex-wrap: wrap; z-index: 5; }
.aktionsleiste .rechts { margin-left: auto; display: flex; gap: 8px; }

/* Dialoge und Meldungen */
.dialog-hg { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 50; }
.dialog { background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; width: min(560px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.dialog .dkopf { padding: 18px 22px 6px; font-weight: 600; font-size: 17px; }
.dialog .dinhalt { padding: 6px 22px 16px; white-space: pre-wrap; }
.dialog .dinhalt ul { margin: 6px 0; padding-left: 20px; white-space: normal; }
.dialog .dfuss { padding: 14px 22px; background: var(--karte2); display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--rand); }
#meldungen { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.meldung { background: var(--karte); border: 1px solid var(--rand); border-left: 4px solid var(--gruen); border-radius: 6px; padding: 10px 14px; box-shadow: 0 4px 16px rgba(0,0,0,.2); max-width: 420px; }
.meldung.fehler { border-left-color: var(--rot); }
.dialog.breit { width: min(1180px, 96vw); }
.dialog.breit .dinhalt { white-space: normal; }
.pdf-rahmen { width: 100%; height: 68vh; border: 1px solid var(--rand); border-radius: 6px; background: #fff; }
.mahnsymbol { color: #e0a100; font-weight: 600; margin-left: 6px; font-size: 12px; cursor: help; }
.zweispaltig { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .zweispaltig { grid-template-columns: 1fr; } }
.detailliste div { display: flex; gap: 10px; padding: 3px 0; border-bottom: 1px dashed var(--rand); }
.detailliste div span:first-child { color: var(--text2); min-width: 150px; }
details > summary { cursor: pointer; padding: 6px 0; font-weight: 600; }
.radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--rand); border-radius: 6px; margin-bottom: 8px; cursor: pointer; }
.radio:hover { background: var(--karte2); }
.radio input { width: auto; margin-top: 3px; accent-color: var(--akzent); }
.logo-vorschau { max-width: 260px; max-height: 110px; background: #fff; padding: 6px; border: 1px solid var(--rand); border-radius: 6px; }