:root {
  --blau: #1f4e79; --blau2: #2e75b6; --hell: #eef3f9; --linie: #d5dde8; --text: #1d2733; --grau: #5d6b7a;
  --gut: #1e7d3a; --gutbg: #e6f4ea; --schlecht: #b3261e; --schlechtbg: #fdecea; --warn: #8a5a00; --warnbg: #fff4dc;
  --bg: #f6f8fb; --karte: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: "DIN", "Segoe UI", system-ui, sans-serif; font-size: 15px; color: var(--text); background: var(--bg); }
#app { display: grid; grid-template-columns: 230px 1fr; grid-template-rows: 54px minmax(0, 1fr); height: 100vh; overflow: hidden; }
.kopf { grid-column: 1 / 3; display: flex; align-items: center; gap: 24px; padding: 0 18px; background: var(--blau); color: #fff; }
.marke { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; min-width: 200px; }
.logo { background: #fff; color: var(--blau); font-weight: 800; padding: 2px 7px; border-radius: 4px; letter-spacing: .5px; }
.mandantwahl { flex: 1; }
.mandantwahl select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 0; min-width: 340px; }
.benutzer { display: flex; gap: 12px; align-items: center; font-size: 13px; }
.benutzer button { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
.menu { background: #fff; border-right: 1px solid var(--linie); overflow-y: auto; padding: 12px 0; }
.menu h4 { margin: 14px 18px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--grau); }
.menu a { display: block; padding: 7px 18px; color: var(--text); text-decoration: none; border-left: 3px solid transparent; }
.menu a:hover { background: var(--hell); }
.menu a.aktiv { background: var(--hell); border-left-color: var(--blau2); font-weight: 600; }
.menu a.aus { color: #a8b3bf; pointer-events: none; }
main { overflow: auto; min-height: 0; min-width: 0; padding: 22px 28px 60px; }
.menu { min-height: 0; }
h1 { font-size: 21px; margin: 0 0 4px; color: var(--blau); }
.unter { color: var(--grau); margin: 0 0 18px; }
.leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.leiste .rechts { margin-left: auto; display: flex; gap: 8px; }
button, .knopf { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--linie); background: #fff; cursor: pointer; color: var(--text); }
button.primaer { background: var(--blau2); color: #fff; border-color: var(--blau2); }
button.gefahr { color: var(--schlecht); border-color: #e7b4b0; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid #bcd3ee; border-color: var(--blau2); }
textarea { min-height: 70px; width: 100%; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: 10px; padding: 18px; margin-bottom: 16px; }
table.liste { width: auto; min-width: min(100%, 900px); max-width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linie); border-radius: 10px; overflow: clip; }
table.liste th { text-align: left; background: var(--hell); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
table.liste td { padding: 7px 14px 7px 10px; border-bottom: 1px solid #edf1f6; vertical-align: top; }
table.liste tr.klick:hover td { background: #f3f7fc; cursor: pointer; }
table.liste td.zahl, table.liste th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.liste tfoot td { font-weight: 700; background: #f8fafc; border-top: 2px solid var(--linie); }
tr.g0 td { font-weight: 700; } tr.g1 td { font-weight: 600; } tr.gruppe td { color: var(--blau); }
.formular { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 14px 22px; max-width: 900px; }
.formular .voll { grid-column: 1 / -1; }
.feld label { display: block; font-size: 13.5px; font-weight: 600; color: #2f3d4c; margin-bottom: 5px; }
.feld .klein, .karte label .klein { font-size: 12.5px; }
.feld input, .feld select { width: 100%; }
.feld .fehler { color: var(--schlecht); font-size: 12px; margin-top: 3px; }
.feld.hatfehler input, .feld.hatfehler select { border-color: var(--schlecht); background: var(--schlechtbg); }
.pflicht::after { content: ' *'; color: var(--schlecht); }
.meldung { position: fixed; right: 22px; bottom: 22px; max-width: 460px; padding: 12px 16px; border-radius: 8px; background: var(--blau); color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18); z-index: 9; }
.meldung.fehler { background: var(--schlecht); }
.meldung.warnung { background: #b26a00; }
.meldung.bleibt { top: 90px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: min(680px, 92vw); max-width: none; font-size: 15px; padding: 16px 44px 16px 20px; border: 3px solid rgba(255,255,255,.6); max-height: 60vh; overflow: auto; box-shadow: 0 8px 28px rgba(0,0,0,.3); }
.meldung .meldung-zu { position: absolute; top: 6px; right: 8px; background: transparent; border: 0; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; }
.badge.gut { background: var(--gutbg); color: var(--gut); } .badge.schlecht { background: var(--schlechtbg); color: var(--schlecht); } .badge.warn { background: var(--warnbg); color: var(--warn); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 10px; padding: 16px; cursor: pointer; }
.kachel:hover { border-color: var(--blau2); }
.kachel .nr { color: var(--grau); font-size: 12px; } .kachel .name { font-weight: 600; font-size: 15px; margin: 2px 0 6px; }
.status { display: flex; gap: 22px; flex-wrap: wrap; }
.status div { min-width: 160px; } .status b { display: block; font-size: 20px; color: var(--blau); }
.hinweis { background: var(--warnbg); color: var(--warn); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; }
.ok { background: var(--gutbg); color: var(--gut); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.nok { background: var(--schlechtbg); color: var(--schlecht); border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-weight: 600; }
.anmeldung { max-width: 380px; margin: 10vh auto; }
.anmeldung .feld { margin-bottom: 12px; }
input.betrag { text-align: right; width: 150px; font-variant-numeric: tabular-nums; }
.klein { font-size: 12px; color: var(--grau); }
code { background: var(--hell); padding: 1px 5px; border-radius: 4px; }
@media print {
  #app { display: block; height: auto; } .kopf, .menu, .leiste, .noprint { display: none !important; }
  main { overflow: visible; padding: 0; } body { background: #fff; font-size: 11pt; }
  table.liste { border: 0; } .karte { border: 0; padding: 0; }
}

/* kompakte Tabellen: Beträge nahe beim Text */
table.liste.kompakt { width: auto; min-width: 640px; max-width: 980px; }
table.liste.kompakt td:first-child, table.liste.kompakt th:first-child { width: 120px; }
table.liste.kompakt td.zahl, table.liste.kompakt th.zahl { width: 160px; }
table.liste.kompakt td.bez { min-width: 300px; }
table.liste td.ref { color: var(--grau); }
table.liste td.marke { width: 36px; text-align: center; }
.stand { position: sticky; top: -22px; z-index: 2; max-width: 980px; }
input.betrag.gleich { background: var(--gutbg); border-color: #9fd3ad; }
input.betrag.anders { background: var(--warnbg); border-color: #e8c27a; }
a.knopf { text-decoration: none; display: inline-block; }

/* Menü in Bereichen, farblich abgesetzt */
.menu { padding: 8px 0 20px; background: #fbfcfe; }
.msek { margin: 6px 8px 10px; border-radius: 8px; background: #fff; border: 1px solid var(--linie); overflow: hidden; }
.msek h4 { margin: 0; padding: 8px 12px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: #fff; cursor: pointer; display: flex; justify-content: space-between; }
.msek.zu .mitems { display: none; }
.suche { position: sticky; top: -8px; z-index: 5; margin-top: -8px; padding: 10px 8px 8px; background: #fbfcfe; box-shadow: 0 4px 6px -4px rgba(0,0,0,.15); }
.suchzeile { display: flex; gap: 4px; }
.suchzeile input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--linie); border-radius: 6px; font-size: 14px; }
.suchzeile button { padding: 0 9px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; cursor: pointer; color: #37474f; }
.suchzeile button.hoert { background: #c62828; color: #fff; border-color: #c62828; animation: hoert 1s infinite; }
@keyframes hoert { 50% { opacity: .55; } }
.suchliste { margin-top: 4px; background: #fff; border: 1px solid var(--linie); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.12); max-height: 60vh; overflow-y: auto; }
.menu .suchliste a { display: block; padding: 6px 10px; border-left: 0; }
.menu .suchliste a span { display: block; font-size: 11px; color: var(--grau); }
.menu .suchliste a.sel, .menu .suchliste a:hover { background: var(--hell); }
.msek .mitems .mgr { padding: 8px 14px 2px; font-size: 11px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: #6b7a8a; border-top: 1px solid var(--linie); }
.msek .mitems .mgr:first-child { border-top: 0; }
.msek .mitems a {padding: 6px 14px; border-left: 4px solid transparent; font-size: 14px; }
.m-start h4 { background: #5d6b7a; }
.m-stamm h4 { background: #2e75b6; } .m-stamm a.aktiv { border-left-color: #2e75b6; background: #e8f1fa; }
.m-verarb h4 { background: #2f8f4e; } .m-verarb a.aktiv { border-left-color: #2f8f4e; background: #e7f5ec; }
.m-ausw h4 { background: #c27a12; } .m-ausw a.aktiv { border-left-color: #c27a12; background: #fdf3e2; }
.m-aus h4 { background: #a8b3bf; }
.m-sys h4 { background: #44505c; } .m-sys a.aktiv { border-left-color: #44505c; background: #eef0f3; }
.m-start a.aktiv { border-left-color: #5d6b7a; }
tr.detail > td { background: #f8fafc; }

/* M6 Erfassungsmaske Kreditorenbeleg */
.zweispalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(420px, 560px); gap: 16px; align-items: start; }
.zweispalt.breit { grid-template-columns: minmax(480px, 1.15fr) minmax(560px, 1fr); } /* Kreditorenbeleg: Beleg links breiter, Erfassung rechts kompakt */
.zweispalt.breit > div:first-child { position: sticky; top: 0; } /* Beleg bleibt beim Scrollen der Erfassung sichtbar */
.zweispalt.breit > div:last-child { font-size: 13px; }
.zweispalt.breit > div:last-child label { font-size: 12px; margin-bottom: 2px; }
.zweispalt.breit > div:last-child input, .zweispalt.breit > div:last-child select, .zweispalt.breit > div:last-child textarea { font-size: 13px; padding: 5px 8px; min-height: 0; height: auto; }
.zweispalt.breit > div:last-child .formular { gap: 6px 14px; }
.zweispalt.breit > div:last-child .feld { margin-bottom: 4px; }
.zweispalt.breit > div:last-child button, .zweispalt.breit > div:last-child .knopf { font-size: 13px; padding: 5px 11px; }
table.kontierung select { min-width: 220px; }
iframe.pdf { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--linie); border-radius: 10px; background: #fff; }
.formular.eng { grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 10px 14px; }
.feld.sicher input, .feld.sicher select { background: var(--gutbg); border-color: #9fd3ad; }
.feld.unsicher input, .feld.unsicher select { background: var(--warnbg); border-color: #e8c27a; }
button.mini, select.mini { padding: 3px 9px; font-size: 13px; }
pre.roh { white-space: pre-wrap; font-size: 12px; max-height: 400px; overflow: auto; background: var(--hell); padding: 10px; border-radius: 6px; }
details.karte summary { cursor: pointer; font-weight: 600; }
a.pdfl { text-decoration: none; background: var(--hell); padding: 0 5px; border-radius: 4px; }
@media (max-width: 1100px) { .zweispalt { grid-template-columns: 1fr; } }

.zeile2 { display: flex; gap: 8px; align-items: center; }
.paar .zeile2 input { width: 160px; }

/* Mandant prominent im Kopf, Farbe je Mandant */
#app { grid-template-rows: 64px minmax(0, 1fr); }
.kopf { background: var(--kopf, var(--blau)); transition: background .2s; }
.logo { color: var(--kopf, var(--blau)); }
.mandantwahl select { font-size: 21px; font-weight: 700; padding: 7px 12px; min-width: 460px; max-width: 100%; color: #fff; background: rgba(255,255,255,.14); border: 2px solid rgba(255,255,255,.75); border-radius: 8px; cursor: pointer; }
.mandantwahl select option { color: #1d2733; background: #fff; font-weight: 400; font-size: 15px; }
main { border-top: 6px solid var(--kopf, var(--blau)); }

/* Jahresablauf */
table.ablauf { border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--linie); border-radius: 8px; }
table.ablauf th, table.ablauf td { padding: 6px 6px; border-bottom: 1px solid var(--linie); text-align: center; font-size: 13px; }
table.ablauf th.phase { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--grau); background: var(--hell); }
table.ablauf th.schr { writing-mode: vertical-rl; transform: rotate(180deg); height: 200px; white-space: nowrap; font-weight: 600; vertical-align: bottom; }
table.ablauf td.mand { text-align: left; white-space: nowrap; font-weight: 600; border-left: 6px solid var(--mfarbe, var(--blau)); cursor: pointer; }
.punkt { display: inline-block; width: 22px; height: 22px; line-height: 22px; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; cursor: default; }
.punkt.erledigt { background: var(--gut); } .punkt.faellig { background: var(--schlecht); } .punkt.laufend { background: var(--blau2); } .punkt.offen { background: #cfd8e3; color: #5d6b7a; }
.ablaufliste .zeile { display: grid; grid-template-columns: 30px 300px 1fr 110px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--linie); }
.legende span { margin-right: 14px; font-size: 13px; }

/* Register A–Z (Personen) */
.register { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 2px; padding: 10px 0 6px; margin-bottom: 8px; background: var(--bg); max-width: 1250px; }
.register a, .register span { display: inline-block; min-width: 26px; padding: 4px 0; text-align: center; border-radius: 5px; font-weight: 700; font-size: 13px; text-decoration: none; }
.register a { background: var(--kopf, var(--blau)); color: #fff; } .register a:hover { filter: brightness(1.2); }
.register span { color: #b8c2cf; background: #eef1f5; }
table.liste tr[id^="reg-"] { scroll-margin-top: 60px; }

/* Fusszeile stwego */
#app { grid-template-rows: 64px minmax(0, 1fr) 24px; }
.fuss { grid-column: 1 / 3; display: flex; align-items: center; justify-content: center; font-size: 11.5px; color: #5d6b7a; background: #fbfcfe; border-top: 1px solid var(--linie); letter-spacing: .3px; }
@media print { .fuss { display: none !important; } }
.marke-icon { height: 46px; width: 46px; background: #fff; border-radius: 8px; padding: 2px; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.anm-logo { display: block; width: 220px; margin: 0 auto 14px; }
.hilfe-logo { height: 70px; margin: 0 0 8px; }

/* Raumreservationen: Tabelle mit Kompaktkalender rechts */
.rr-wrap { display: flex; gap: 16px; align-items: flex-start; }
.rr-tab { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.rr-kal { flex: 0 0 250px; position: sticky; top: 8px; max-height: calc(100vh - 90px); overflow-y: auto; background: #fff; border: 1px solid #dfe5ec; border-radius: 8px; padding: 10px; font-size: 12px; }
.rr-mon { margin-top: 8px; }
.rr-mt { font-weight: 600; color: #1f4e79; margin-bottom: 2px; }
.rr-kal table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.rr-kal th { font-weight: 500; color: #7a8794; font-size: 10px; padding: 1px 0; text-align: center; }
.rr-kal td { text-align: center; padding: 2px 0; border-radius: 4px; color: #333; }
.rr-kal td.we { color: #a0a9b3; }
.rr-kal td.heute { outline: 1px solid #1f4e79; }
.rr-kal td.ok { background: #d6f0dc; color: #1d6b31; font-weight: 600; cursor: pointer; }
.rr-kal td.offen { background: #fde3c4; color: #9a5300; font-weight: 600; cursor: pointer; }
.rr-kal td.mehr { box-shadow: inset 0 0 0 2px #c0392b; }
.rr-kal sup { font-size: 8px; margin-left: 1px; }
.rr-ev { padding: 1px 4px; margin-top: 2px; border-left: 3px solid #e0a050; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-ev.ok { border-left-color: #3c9a55; }
.rr-leg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: middle; }
.rr-leg.ok { background: #d6f0dc; border: 1px solid #3c9a55; } .rr-leg.offen { background: #fde3c4; border: 1px solid #e0a050; }
tr.rr-hl td { background: #fff6d6 !important; }
@media (max-width: 1300px) { .rr-wrap { flex-direction: column; } .rr-kal { position: static; flex-basis: auto; width: 100%; max-height: none; } }

/* Autofilter (Sortieren/Filtern je Spalte) */
th .af-btn { border: none; background: transparent; color: #8a97a5; cursor: pointer; padding: 0 3px; margin-left: 4px; font-size: 11px; line-height: 1; min-height: 0; }
th .af-btn:hover, th .af-btn.aktiv { color: #1f4e79; background: #e3edf7; border-radius: 3px; }
tr.af-aus { display: none; }
.af-pop { position: absolute; z-index: 1000; width: 260px; background: #fff; border: 1px solid #cfd8e2; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 8px; font-size: 13px; }
.af-pop > button { display: block; width: 100%; text-align: left; border: none; background: none; padding: 5px 6px; cursor: pointer; border-radius: 4px; }
.af-pop > button:hover { background: #eef3f8; }
.af-pop hr { border: none; border-top: 1px solid #e3e8ee; margin: 6px 0; }
.af-pop .af-such { width: 100%; margin-bottom: 4px; }
.af-pop label { display: block; padding: 2px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-pop .af-liste { max-height: 220px; overflow-y: auto; border: 1px solid #eef1f4; border-radius: 4px; margin-top: 2px; }
.af-pop .af-knopf { display: flex; gap: 6px; margin-top: 8px; }
@media print { th .af-btn, .af-pop { display: none !important; } }
[hidden] { display: none !important; }
.feld label.chk { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 14px; color: var(--text); margin: 6px 0 0; cursor: pointer; }
.feld label.chk input { width: 18px; height: 18px; }
td.nowrap, th.nowrap { white-space: nowrap; }
td.gwr-diff { color: #b42318; font-weight: 600; background: #fdecea; }
.stichtag { display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; background:#eef4fb; border:1px solid #c9d9ec; border-radius:8px; padding:4px 10px; }
.sz-balken { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.sz-jahr { flex: 1; min-width: 150px; }
.sz-jl { font-size: 12px; font-weight: 600; color: #2f3d4c; margin-bottom: 3px; text-align: center; }
.sz-p { display: flex; gap: 2px; }
.sz-z { flex: 1; text-align: center; font-size: 11.5px; padding: 6px 0; border-radius: 4px; background: #e6e9ee; color: #55606e; cursor: default; }
.sz-z.ok { background: #2e7d32; color: #fff; } .sz-z.teil { background: #f0a020; color: #fff; } .sz-z.fehlt { background: #c62828; color: #fff; }
.sz-z.zukunft { background: #eef1f4; color: #8a94a1; border: 1px dashed #c5ccd5; } .sz-z.leer { background: #f3f4f6; color: #aab2bd; }
.sz-z.akt { outline: 2px solid #1f4b7d; outline-offset: 1px; font-weight: 700; }

/* Budget: Gruppentotale unten */
table.liste tr.gtotal td { border-top: 1.5px solid #37474f; font-weight: 700; padding-top: 6px; padding-bottom: 10px; }
table.liste tr.gtotal + tr td { padding-top: 10px; }
/* Kostenkonten-Matrix */
table.kkmatrix td.mitte, table.kkmatrix th.mitte { text-align: center; }
table.kkmatrix th.mitte { min-width: 70px; white-space: normal; }
table.kkmatrix input[type=checkbox] { width: 18px; height: 18px; cursor: pointer; }
table.kkmatrix tr.fehlt td { background: #fdecea; }
/* Aufbau-Assistent */
.aufbau-s { padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.aufbau-s:hover { background: var(--hell); }
.aufbau-s.sel { background: var(--hell); font-weight: 600; border-left: 3px solid var(--blau2); }
ul.aufbau-p { list-style: none; padding: 0; margin: 8px 0; }
ul.aufbau-p li { padding: 5px 0; border-bottom: 1px solid var(--linie); }
ul.aufbau-p li.fehler { color: #8a1f1f; }

/* Titelzeilen von Tabellen bleiben beim Scrollen sichtbar */
table.liste thead th { position: sticky; top: var(--thtop, 0px); z-index: 4; background: var(--hell); box-shadow: 0 1px 0 var(--linie); }
/* Filter-/Knopfleiste über einer Liste bleibt ebenfalls oben stehen (Höhe → --thtop, per app.js gesetzt) */
main .leiste.fix { position: sticky; top: 0; z-index: 6; background: var(--bg, #f5f7fa); margin-top: -6px; padding: 6px 0 8px; }
@media print { table.liste thead th, main .leiste.fix { position: static; box-shadow: none; } }

/* Sanduhr / Arbeitsanzeige */
.sanduhr { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: drehen 0.9s linear infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
#sanduhr-global { position: fixed; top: 10px; right: 16px; z-index: 9999; background: #fff; color: var(--blau); border: 1px solid #cfd8e3; border-radius: 18px; padding: 6px 14px; font-size: 13px; box-shadow: 0 2px 8px rgba(0,0,0,.12); opacity: 0; pointer-events: none; transition: opacity .2s; }
#sanduhr-global.sichtbar { opacity: 1; }
.arbeitet .balken { height: 6px; background: #f3e3c6; border-radius: 3px; margin: 6px 0 4px; overflow: hidden; }
.arbeitet .balken > div { height: 100%; background: var(--warn); transition: width .5s; }
@media print { #sanduhr-global { display: none !important; } }
/* Kontierung im Kreditorenbeleg (eine oder mehrere Zeilen) */
table.kontierung { width: 100%; border-collapse: collapse; border: 1px solid var(--linie); border-radius: 8px; overflow: clip; background: #fff; }
table.kontierung th { text-align: left; font-weight: 600; background: var(--hell); padding: 6px 8px; border-bottom: 1px solid var(--linie); }
table.kontierung th.zahl, table.kontierung td.zahl { text-align: right; font-variant-numeric: tabular-nums; }
table.kontierung td { padding: 5px 8px; border-bottom: 1px solid #edf1f6; vertical-align: top; }
table.kontierung td input, table.kontierung td select { width: 100%; box-sizing: border-box; }
table.kontierung td input.betrag { width: 100%; }
table.kontierung tfoot td { background: #f8fafc; border-top: 2px solid var(--linie); border-bottom: 0; vertical-align: middle; }
table.kontierung select.wahl { background: #fff6d6; border-color: #e8b400; }
/* Kontosuche direkt im Konto-Feld (Nr. oder Name, alphabetisch, Mikrofon im Feld) */
.kfeld { position: relative; display: inline-block; max-width: 100%; }
td .kfeld, .feld .kfeld { display: block; width: 100%; }
.kfeld > input { padding-right: 30px !important; width: 100%; box-sizing: border-box; }
.kfeld > input.ks_sel { min-width: 340px; }
.kfeld .ks_mik { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 2px 4px; font-size: 14px; opacity: .55; }
.kfeld .ks_mik:hover { opacity: 1; }
.kfeld .ks_mik.hoert { opacity: 1; background: #c62828; color: #fff; border-radius: 4px; }
.kfeld .ks_liste { position: fixed; z-index: 1000; min-width: 380px; max-height: 420px; overflow: auto; background: #fff; border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.kfeld .ks_z { padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.kfeld .ks_z.akt, .kfeld .ks_z:hover { background: #eaf2fc; }
table.liste tr.mitgewaehlt td { background: #fff6d6; }
/* Ankreuzfelder in Formularen nie auf volle Breite ziehen (sonst verschwindet der Text daneben) */
.feld input[type=checkbox], .feld input[type=radio] { width: 18px; height: 18px; flex: none; }
#az_kl label.chk { margin: 2px 0; font-size: 13.5px; }


.kbfilter label.kbchk { display:inline-flex; align-items:center; gap:4px; margin:0 8px 0 4px; font-size:13.5px; cursor:pointer; white-space:nowrap; }
.kbfilter label.kbchk input { width:16px; height:16px; }

.formular.breit { max-width: 1400px; }
.buzeile { display: grid; grid-template-columns: 170px 170px 240px minmax(220px, 1fr) 130px; gap: 0 14px; align-items: start; }
.buzeile .feld { min-width: 0; }
@media (max-width: 1000px) { .buzeile { grid-template-columns: 1fr 1fr; gap: 10px 14px; } }

/* Drucken kompakt (Klasse «druck» wird beim Drucken gesetzt): kleine Schrift, enge Zeilen, Tabellen nur so breit wie nötig */
body.druck #inhalt { font-size: 9pt; }
body.druck #inhalt table.liste { width: auto !important; min-width: 0 !important; font-size: 8.5pt; line-height: 1.25; }
body.druck #inhalt table.liste th { padding: 3px 6px; white-space: nowrap; }
body.druck #inhalt table.liste td { padding: 2px 8px 2px 6px; }
body.druck #inhalt table.liste th .af-btn, body.druck #inhalt table.liste input[type=checkbox] { display: none; }
body.druck #inhalt table.liste thead th { position: static; box-shadow: none; }
body.druck #inhalt h1 { font-size: 14pt; margin: 0 0 4px; }

.mik-knopf { margin-left: 4px; padding: 4px 8px; border: 1px solid var(--linie); border-radius: 6px; background: #fff; cursor: pointer; }
.mik-knopf.hoert { background: #c62828; color: #fff; border-color: #c62828; animation: hoert 1s infinite; }
.gwr-neu-felder { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 6px 0 10px; background: #f6faf6; }
.gwr-neu-felder label { display: flex; flex-direction: column; font-size: 12px; color: var(--grau); }

.kopf .zurueck-knopf { margin-right: 14px; background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 6px; padding: 5px 12px; cursor: pointer; font-weight: 600; }
.kopf .zurueck-knopf:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.kopf .zurueck-knopf:disabled { opacity: .45; cursor: default; }
@media print { .zurueck-knopf { display: none !important; } }

/* Menü nach Arbeitsablauf (Variante A) */
.m-abschl h4 { background: #8a5a12; } .m-abschl a.aktiv { border-left-color: #8a5a12; background: #fbf1e1; }
.m-budget h4 { background: #6a4c93; } .m-budget a.aktiv { border-left-color: #6a4c93; background: #f1ecf8; }
.m-vers h4 { background: #0b6265; } .m-vers a.aktiv { border-left-color: #0b6265; background: #e3f2f2; }
.m-nach h4 { background: #2e7d6b; } .m-nach a.aktiv { border-left-color: #2e7d6b; background: #e6f3ef; }

.formular .p-titel { margin: 14px 0 0; padding-bottom: 4px; border-bottom: 1px solid var(--linie); }
.formular .p-titel h3 { margin: 0; font-size: 15px; color: #1f4e79; }
.formular .p-titel:first-child { margin-top: 0; }
.p-anzahl { display: flex; gap: 18px; padding: 8px 0; }
.p-anzahl label { display: flex; gap: 6px; align-items: center; font-weight: normal; }

/* Druck im Sky-Treuhand-Stil (Variante A «Sky Klassik», wie die Abschlussdokumente): gilt, solange body.druck gesetzt ist */
.druck-kopf, .druck-fuss { display: none; }
body.druck { font-family: 'DIN', 'DIN Next', 'Barlow', 'Lato', Arial, sans-serif; color: #2B2F36; background: #fff; }
body.druck main { border-top: 0 !important; }
body.druck .druck-kopf { display: block; position: relative; margin: 0 0 8px; }
body.druck .druck-kopf img { height: 32px; display: block; }
body.druck .druck-kopf .dk-rechts { position: absolute; right: 0; top: 4px; text-align: right; font-size: 8pt; line-height: 1.4; color: #7A828C; }
body.druck .druck-kopf .dk-linie { border-top: 0.6pt solid #E1E4E8; margin: 8px 0 7px; }
body.druck .druck-kopf .dk-kicker { font-size: 6.5pt; font-weight: 700; letter-spacing: 1.4px; color: #3C95D1; }
body.druck .druck-kopf .dk-unter { font-size: 8pt; color: #7A828C; margin-top: 1px; }
body.druck #inhalt h1 { color: #2B2F36; font-size: 14pt; font-weight: 700; margin: 1px 0 0; }
body.druck #inhalt h1 + .druck-unter { font-size: 8pt; color: #7A828C; }
body.druck #inhalt h2, body.druck #inhalt h3 { color: #2B2F36; font-size: 10pt; border-bottom: 0.8pt solid #3C95D1; padding-bottom: 2px; margin: 10px 0 4px; }
body.druck #inhalt h1 ~ h1, body.druck #inhalt h1 ~ * h1 { font-size: 10pt !important; color: #2B2F36; border-bottom: 0.8pt solid #3C95D1; padding-bottom: 2px; margin: 12px 0 4px !important; }
body.druck #inhalt .unter.druck-aus, body.druck #inhalt .hinweis, body.druck #inhalt .leiste, body.druck #inhalt button, body.druck #inhalt .noprint { display: none !important; }
body.druck #inhalt .klein, body.druck #inhalt .unter { color: #7A828C; }
body.druck #inhalt .unter { font-size: 8pt; margin: 1px 0 8px; }
body.druck #inhalt a { color: inherit !important; text-decoration: none !important; }
body.druck #inhalt .karte { border: 0 !important; box-shadow: none !important; padding: 0 !important; background: none !important; }
/* Eingabefelder wie gedruckter Text */
body.druck #inhalt input:not([type=checkbox]):not([type=radio]), body.druck #inhalt select, body.druck #inhalt textarea { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; font: inherit !important; color: #2B2F36 !important; -webkit-text-fill-color: #2B2F36; opacity: 1 !important; -webkit-appearance: none; appearance: none; outline: 0; }
body.druck #inhalt td input.betrag, body.druck #inhalt td.zahl input { text-align: right; width: 100% !important; }
body.druck #inhalt input::placeholder, body.druck #inhalt textarea::placeholder { color: transparent; }
/* Tabellen wie Abschlussdokumente: Kopf grau hinterlegt, feine Linien, Gruppen fett, keine blauen Hierarchiefarben */
body.druck #inhalt table.liste { border: 0 !important; border-radius: 0; box-shadow: none !important; background: #fff; }
body.druck #inhalt table.liste th { background: #F3F4F6 !important; color: #2B2F36 !important; font-weight: 700; border: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.druck #inhalt table.liste td { color: #2B2F36 !important; background: #fff !important; border: 0 !important; border-bottom: 0.4pt solid #E1E4E8 !important; vertical-align: top; }
body.druck #inhalt table.liste tr.gruppe td, body.druck #inhalt table.liste tr.g0 td, body.druck #inhalt table.liste tr.g1 td { font-weight: 700; }
body.druck #inhalt table.liste tr.g0 td { border-bottom: 0.8pt solid #3C95D1 !important; padding-top: 6px; }
body.druck #inhalt table.liste tfoot td, body.druck #inhalt table.liste tr.summe td { background: #E8F2FA !important; color: #2B2F36 !important; font-weight: 700; border-top: 0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.druck #inhalt .ok, body.druck #inhalt .nok, body.druck #inhalt .stand { background: #F3F4F6 !important; border: 0 !important; border-radius: 0 !important; color: #2B2F36 !important; box-shadow: none !important; font-size: 8.5pt; padding: 4px 6px !important; position: static !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
body.druck #inhalt .badge { background: none !important; color: inherit !important; padding: 0; }
body.druck #inhalt .anders, body.druck #inhalt .gleich { background: transparent !important; }
@media print { body.druck .druck-aus { display: none !important; } }
.formular .p-luecke { visibility: hidden; min-height: 0; }
.p-chk { display: flex; gap: 6px; align-items: center; font-weight: normal; padding: 8px 0; }
table.liste tr.zuletzt td { background: #fff4c2 !important; transition: background .6s; }

.dialog-hg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.dialog { background: #fff; border-radius: 10px; padding: 18px 22px; width: min(640px, 92vw); box-shadow: 0 12px 40px rgba(0,0,0,.3); }