:root {
  --bg: #f5f4f4; --fl: #ffffff; --text: #272223; --leise: #66605f; --rand: #d8d3d4; --akzent: #810823; --akzent-hell: #ebe8e9; --akzent-text: #ffffff;
  --fehler: #a32a2a; --fehler-bg: #f1eeee; --warn: #8a5a00; --warn-bg: #fff3d6; --ok: #2e7d32; --ok-bg: #e6f2e7;
  --radius: 6px; --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1718; --fl: #262122; --text: #eae7e8; --leise: #aaa4a5; --rand: #41393b; --akzent: #e2ddde; --akzent-hell: #322c2d; --akzent-text: #1a1718;
    --fehler: #f07a7a; --fehler-bg: #2f2a2b; --warn: #f0c36a; --warn-bg: #3a3118; --ok: #7fc08f; --ok-bg: #1f3527;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Platz für den Scrollbalken immer freihalten: Seiten mit und ohne Scrollbalken sind gleich breit, nichts verspringt beim Seitenwechsel.
   Ältere Browser ohne scrollbar-gutter zeigen dafür den Scrollbalken immer an. */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }
body { margin: 0; font: 15px/1.45 var(--schrift); background: var(--bg); color: var(--text); }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; } h2 { font-size: 1.2rem; margin: 1rem 0 .5rem; } h3 { font-size: 1.02rem; margin: 0 0 .4rem; }
main { max-width: 1280px; margin: 0 auto; padding: 1rem 16px 3rem; }
button, .knopf { font: inherit; padding: .4rem .8rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button:hover, .knopf:hover { border-color: var(--akzent); }
button:disabled { opacity: .5; cursor: not-allowed; }
button.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) button.primaer { color: #141212; } }
button.link { border: 0; background: none; padding: 0; color: var(--akzent); text-decoration: underline; }
input, select { font: inherit; padding: .35rem .5rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); color: var(--text); min-width: 0; width: 100%; }
input[type=checkbox] { width: auto; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.karte { background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.25rem; }
.schmal { max-width: 460px; margin: 2rem auto; }
.stapel { display: grid; gap: .8rem; } .stapel label, .raster label { display: grid; gap: .2rem; }
fieldset { border: 1px solid var(--rand); border-radius: var(--radius); margin: 0 0 1rem; padding: .75rem 1rem; }
.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem 1rem; align-items: start; }
fieldset.raster { display: grid; }
.fehler { color: var(--fehler); background: var(--fehler-bg); border-left: 4px solid var(--fehler); padding: .5rem .75rem; border-radius: var(--radius); }
.warnung { color: var(--warn); background: var(--warn-bg); padding: .5rem .75rem; border-radius: var(--radius); }
.ok { color: var(--ok); } .hinweis { color: var(--leise); font-size: .9rem; margin: .2rem 0 .6rem; } .leer { color: var(--leise); }
.tabelle { width: 100%; border-collapse: collapse; background: var(--fl); border: 1px solid var(--rand); }
.tabelle th, .tabelle td { padding: .45rem .6rem; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
.tabelle .zahl, .zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.filter { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; } .filter input { max-width: 340px; } .filter select { width: auto; }
.marke-status { display: inline-block; min-width: 7.5rem; text-align: center; box-sizing: border-box; padding: .1rem .5rem; border-radius: 99px; font-size: .85rem; background: var(--akzent-hell); }
.s-entwurf { background: var(--warn-bg); color: var(--warn); } .s-gesperrt { background: var(--fehler-bg); color: var(--fehler); }

/* Assistent */
.assistent-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.assistent-kopf h1 { margin: 0; } .knopfleiste { display: flex; gap: .5rem; flex-wrap: wrap; }
.speicherstatus { font-size: .9rem; color: var(--leise); } .speicherstatus.ok { color: var(--ok); } .speicherstatus.fehler { color: var(--fehler); }
.banner { background: var(--fehler-bg); color: var(--fehler); padding: .6rem .9rem; border-radius: var(--radius); margin: .5rem 0; }
.reiter { display: flex; gap: .25rem; flex-wrap: wrap; background: var(--akzent-hell); border: 1px solid var(--rand); border-bottom: 2px solid var(--akzent); border-radius: var(--radius) var(--radius) 0 0; padding: .35rem .35rem 0; margin-bottom: 1rem; }
.reiter-knopf { border: 0; border-bottom: 3px solid transparent; border-radius: var(--radius) var(--radius) 0 0; background: none; padding: .5rem .9rem; color: var(--text); }
.reiter-knopf:hover { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.reiter-knopf.aktiv { background: var(--fl); border-bottom-color: var(--akzent); font-weight: 700; color: var(--akzent); }
.badge { margin-left: .4rem; background: var(--fehler); color: #fff; border-radius: 99px; font-size: .75rem; padding: 0 .45rem; }
.assistent-rumpf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .assistent-rumpf { grid-template-columns: 1fr; } .summen { position: static !important; } }
.block { background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: 1rem; }
.feld { display: grid; gap: .15rem; align-content: end; } .feld.breit { grid-column: span 2; }
.feld .bez { font-size: .88rem; color: var(--leise); } .feld small { color: var(--leise); font-size: .78rem; }
.feld.haken { display: flex; align-items: center; gap: .5rem; } .feld.haken small { margin-left: .25rem; }
.kommbox { display: flex; gap: .3rem; } .kommbox input { min-width: 3.4rem; text-align: right; }
.zeile { border-top: 1px solid var(--rand); padding: .7rem 0; } .zeile:first-of-type { border-top: 0; }
.zeilenkopf { display: flex; gap: 1rem; align-items: baseline; margin-bottom: .4rem; } .zeileninfo { flex: 1; color: var(--leise); }
.add { margin-top: .4rem; }
.zeile-eigen { display: flex; gap: .6rem; align-items: center; padding: .35rem 0; border-bottom: 1px solid var(--rand); } .zeile-eigen .betrag { margin-left: auto; font-variant-numeric: tabular-nums; }
.summen { position: sticky; top: calc(var(--nav-hoehe) + 1rem); background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .9rem 1rem; }
.summen h2 { margin-top: 0; }
.summenliste { display: grid; grid-template-columns: 1fr auto; gap: .2rem .75rem; margin: 0 0 .75rem; } .summenliste dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.summenliste dt.summe, .summenliste dd.summe { border-top: 1px solid var(--rand); padding-top: .25rem; font-weight: 600; }
.ergebnis { display: grid; gap: .1rem; background: var(--akzent-hell); border-radius: var(--radius); padding: .7rem .8rem; margin-bottom: .8rem; }
.ergebnis strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; } .ergebnis.unsicher { background: var(--warn-bg); }
.meldungen { margin-top: .6rem; font-size: .88rem; } .meldungen h3 { font-size: .92rem; } .meldungen ul { margin: 0; padding-left: 1.1rem; }
.meldungsbox { margin-top: .8rem; padding: .65rem .8rem; border-radius: var(--radius); border: 1px solid; border-left-width: 5px; font-size: .9rem; }
.meldungsbox.fehler { background: var(--fehler-bg); border-color: var(--fehler); color: var(--fehler); }
.meldungsbox.warnung { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.meldungsbox h3 { margin: 0 0 .3rem; font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.meldungsicon { display: inline-flex; width: 1.3rem; height: 1.3rem; border-radius: 50%; align-items: center; justify-content: center; font-size: .8rem; font-weight: 700; color: var(--fl); }
.meldungsbox.fehler .meldungsicon { background: var(--fehler); } .meldungsbox.warnung .meldungsicon { background: var(--warn); }
.meldungshinweis { margin: 0 0 .4rem; color: var(--text); }
.meldungsbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.meldungsbox li { display: grid; gap: .1rem; padding-top: .45rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 30%, transparent); }
.meldungsbox li:first-child { border-top: 0; padding-top: 0; }
.meldungstext { color: var(--text); } .meldungsbox .link { justify-self: start; font-size: .85rem; }

/* Druckansicht */
.blatt { background: var(--fl); max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem; border: 1px solid var(--rand); }
.blatt .unter { margin: -.5rem 0 1rem; color: var(--leise); } .aktionen { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; } .inline { display: inline-flex; gap: .4rem; }
.entwurf-hinweis { background: var(--warn-bg); color: var(--warn); padding: .4rem .7rem; font-weight: 700; text-align: center; }
.kv { width: 100%; border-collapse: collapse; margin-bottom: 1rem; } .kv th { text-align: left; color: var(--leise); font-weight: 400; width: 14%; padding: .2rem .5rem .2rem 0; } .kv td { padding: .2rem 1rem .2rem 0; }
.klein { font-size: .88rem; } .summe td { font-weight: 700; border-top: 2px solid var(--text); } .gross td { font-size: 1.15rem; } .fett { font-weight: 600; }
.unterschriften { display: flex; gap: 2rem; flex-wrap: wrap; margin-top: 3rem; } .unterschriften div { flex: 1 1 180px; border-top: 1px solid var(--text); padding-top: .25rem; } .unterschriften small { display: block; color: var(--leise); }
@media print {
  body { background: #fff; color: #000; font-size: 11pt; } .noprint { display: none !important; } main { padding: 0; max-width: none; }
  .blatt { border: 0; padding: 0; max-width: none; } h2 { break-after: avoid; } table { break-inside: auto; } tr { break-inside: avoid; }
}

.flaecheninfo { background: var(--akzent-hell); border-radius: var(--radius); padding: .5rem .8rem; font-weight: 600; margin: 0 0 1rem; }
.paar { display: grid; grid-template-columns: 7rem 1fr; gap: .8rem; }

.feld-paar { display: grid; grid-template-columns: 7rem 1fr; gap: .7rem 1rem; align-items: end; }
.feld-paar .feld.breit { grid-column: auto; }
.radios { display: flex; gap: 1.5rem; padding: .3rem 0; }
.radio { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.radio input { width: 1.1rem; height: 1.1rem; accent-color: var(--akzent); }
textarea { font: inherit; width: 100%; padding: .4rem .5rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); color: var(--text); resize: vertical; }
.zaehler { text-align: right; }
.feld-paar.breit { grid-column: span 2; }

.raster .radio, .stapel .radio { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; }
.feld:has(textarea) { grid-column: 1 / -1; }
.raster .feld.voll { grid-column: 1 / -1; }
.raster.luftig { row-gap: 1.3rem; }
.raster .feld.neuzeile { grid-column-start: 1; }
.raster .feld.haken.neuzeile { grid-column: 1 / -1; } .feld.haken .bez { white-space: nowrap; }
.raster.luftig { column-gap: 2.5rem; }

.ergebnisbox { margin-top: 1rem; background: var(--akzent-hell); border-radius: var(--radius); padding: .7rem .9rem; }
.ergebnisbox-titel { font-size: .85rem; color: var(--leise); margin-bottom: .4rem; }
.ergebnisbox dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem 1rem; margin: 0; }
.ergebnisbox dt { font-size: .82rem; color: var(--leise); } .ergebnisbox dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ergebnisbox .wert dd { color: var(--akzent); }
.flaechenuebersicht { margin: 0 0 1rem; } .flaechenuebersicht dl { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .flaechenuebersicht .fett dt, .flaechenuebersicht .fett dd { font-weight: 700; color: var(--text); }

.raster.unten { align-items: end; }
.raster.weit { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }


/* Katalog-Editor */
.tabellenrahmen { overflow-x: auto; }
.aktionen { white-space: nowrap; } .aktionen form { display: inline; margin: 0; }
.teilreiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.teilreiter a { padding: .35rem .7rem; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; background: var(--fl); }
.teilreiter a[aria-current] { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .teilreiter a[aria-current] { color: #141212; } }
fieldset.ohnerahmen { border: 0; padding: 0; margin: 0; min-width: 0; }
.katalogform details.gruppe { border: 1px solid var(--rand); border-radius: var(--radius); margin: 0 0 .6rem; padding: .4rem .8rem; }
.katalogform details.gruppe summary { cursor: pointer; font-weight: 600; padding: .25rem 0; }
.katalogform .raster.dicht { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); padding: .5rem 0 .3rem; align-items: end; }
.erfolg { color: var(--ok); background: var(--ok-bg); padding: .5rem .75rem; border-radius: var(--radius); }

/* ===== Hauptmenü (neu) ===== */
:root { --nav-bg: #810823; --nav-text: #f6f5f5; --nav-leise: #c9c3c4; --nav-hover: rgba(255,255,255,.12); --nav-aktiv: rgba(255,255,255,.20); --nav-hoehe: 60px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nav-bg: #5e0619; --nav-text: #eae7e8; --nav-leise: #a49b9d; } }
.kopf { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); color: var(--nav-text); border-bottom: 0; padding: 0; padding-top: env(safe-area-inset-top); display: block;
  box-shadow: 0 1px 0 rgba(0,0,0,.2), 0 4px 14px rgba(0,0,0,.08); }
.kopf-innen { max-width: 1280px; margin: 0 auto; padding: 0 16px; min-height: var(--nav-hoehe); display: flex; align-items: center; gap: 1.25rem; }
.kopf a { color: inherit; text-decoration: none; }
.kopf .marke { display: flex; align-items: center; gap: .65rem; font-weight: 400; color: var(--nav-text); margin-right: .5rem; }
.marke-zeichen { color: #fff; flex: none; }
.marke-text { display: grid; line-height: 1.1; } .marke-text strong { font-size: 1.05rem; letter-spacing: .01em; } .marke-text small { font-size: .74rem; color: var(--nav-leise); letter-spacing: .08em; text-transform: uppercase; }
.menuebereich { display: flex; flex: 1; align-items: center; gap: 1rem; min-width: 0; }
.hauptnav { display: flex; align-items: center; gap: .25rem; flex: 1; }
.kopf .menue-eintrag { display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem; border-radius: 8px; color: var(--nav-text); background: none; border: 0; font: inherit; cursor: pointer; width: auto; white-space: nowrap; }
.kopf .menue-eintrag:hover { background: var(--nav-hover); }
.kopf .menue-eintrag[aria-current="page"], .kopf .untermenue.aktiv > summary { background: var(--nav-aktiv); font-weight: 600; }
.ic { flex: none; opacity: .9; }
.pfeil { flex: none; transition: transform .15s; opacity: .8; }
details[open] > summary .pfeil { transform: rotate(180deg); }
.kopf summary { list-style: none; } .kopf summary::-webkit-details-marker { display: none; }
.untermenue, .nutzer { position: relative; }
.untermenue summary::after, .untermenue summary::before { content: none; }
.untermenue-liste, .nutzer-liste { position: absolute; z-index: 60; top: calc(100% + 8px); min-width: 15rem; padding: .4rem; display: grid; gap: 2px;
  background: var(--fl); color: var(--text); border: 1px solid var(--rand); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); }
.untermenue-liste { left: 0; } .nutzer-liste { right: 0; }
.kopf .untermenue-liste .menue-eintrag, .kopf .nutzer-liste .menue-eintrag { color: var(--text); width: 100%; }
.kopf .untermenue-liste .menue-eintrag:hover, .kopf .nutzer-liste .menue-eintrag:hover { background: var(--akzent-hell); }
.kopf .untermenue-liste .menue-eintrag[aria-current="page"] { background: var(--akzent-hell); color: var(--akzent); }
.nutzer-liste form { margin: 0; }
.nutzer summary { display: flex; align-items: center; gap: .55rem; padding: .3rem .5rem .3rem .3rem; border-radius: 999px; cursor: pointer; }
.nutzer summary:hover { background: var(--nav-hover); }
.avatar { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--nav-bg); font-weight: 700; font-size: .85rem; flex: none; }
.nutzer-name { max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nutzer-kopf { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--rand); margin-bottom: .3rem; }
.nutzer-liste .nutzer-kopf { display: grid; gap: 0; } .nutzer-kopf small { display: block; color: var(--leise); font-size: .8rem; }
.mobil-konto { display: none; }
.hamburger { display: none; margin-left: auto; width: 46px; height: 46px; padding: 0; border: 0; background: none; color: var(--nav-text); border-radius: 10px; position: relative; }
.hamburger:hover { background: var(--nav-hover); }
.hamburger span { position: absolute; left: 12px; width: 22px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .2s, opacity .2s, top .2s; }
.hamburger span:nth-child(1) { top: 15px; } .hamburger span:nth-child(2) { top: 22px; } .hamburger span:nth-child(3) { top: 29px; }
.hamburger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }
.menue-schleier { position: fixed; inset: 0; z-index: 40; background: rgba(28,2,8,.5); }
@media (max-width: 860px) {
  .hamburger { display: block; }
  .menuebereich { position: fixed; z-index: 55; top: calc(var(--nav-hoehe) + env(safe-area-inset-top)); right: 0; bottom: 0; width: min(86vw, 360px); margin: 0;
    flex-direction: column; align-items: stretch; gap: 0; padding: .75rem .75rem 1rem; overflow-y: auto; overscroll-behavior: contain;
    background: var(--fl); color: var(--text); box-shadow: -12px 0 32px rgba(0,0,0,.25);
    transform: translateX(105%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s; }
  .menuebereich.offen { transform: none; visibility: visible; transition: transform .22s ease; }
  .hauptnav { flex-direction: column; align-items: stretch; gap: 2px; flex: none; }
  .kopf .menue-eintrag { color: var(--text); padding: .85rem .8rem; font-size: 1.02rem; min-height: 48px; width: 100%; }
  .kopf .menue-eintrag:hover { background: var(--akzent-hell); }
  .kopf .menue-eintrag[aria-current="page"], .kopf .untermenue.aktiv > summary { background: var(--akzent-hell); color: var(--akzent); }
  .kopf .untermenue summary { justify-content: flex-start; } .kopf .untermenue summary .pfeil { margin-left: auto; }
  .untermenue-liste { position: static; box-shadow: none; border: 0; background: none; min-width: 0; padding: 0 0 .3rem 1.2rem; border-left: 2px solid var(--rand); margin-left: 1.3rem; border-radius: 0; }
  .nutzer { display: none; }
  .mobil-konto { display: grid; gap: 2px; margin-top: auto; padding-top: .8rem; border-top: 1px solid var(--rand); }
  .mobil-konto form { margin: 0; }
  .mobil-konto .avatar { background: var(--nav-bg); color: #fff; width: 40px; height: 40px; }
  body.menue-offen { overflow: hidden; }
  .marke-text small { display: none; }
}
@media (min-width: 861px) { .menue-schleier { display: none !important; } }
@media print { .kopf, .menue-schleier { display: none !important; } }
.raster.unten .radios { min-height: 35px; align-items: center; padding: 0; }

/* Safari/iOS: <summary> nicht selbst als Flex-Container verwenden */
.kopf summary.menue-eintrag, .nutzer summary { display: block; }
.summary-zeile { display: flex; align-items: center; gap: .55rem; width: 100%; }
.nutzer summary .summary-zeile { gap: .55rem; }
.kopf summary { -webkit-tap-highlight-color: transparent; }
.hamburger { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 860px) {
  .kopf .untermenue summary .pfeil { margin-left: auto; }
  .menuebereich { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .kopf-innen { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}

dl.status { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
dl.status dt { color: var(--leise); } dl.status dd { margin: 0; word-break: break-word; }
@media (max-width: 520px) { dl.status { grid-template-columns: 1fr; gap: 0; } dl.status dd { margin-bottom: .5rem; } }
.raster.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .raster.drei { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .raster { grid-template-columns: 1fr; } .raster .feld.breit, .raster .feld-paar.breit { grid-column: auto; } }

.hoechstmengen { width: 100%; margin-top: .8rem; border-collapse: collapse; font-size: .88rem; }
.hoechstmengen th, .hoechstmengen td { padding: .25rem .5rem; border-top: 1px solid var(--rand); text-align: left; }
.hoechstmengen th { font-weight: 600; color: var(--leise); border-top: 0; }
.hoechstmengen .zahl { text-align: right; font-variant-numeric: tabular-nums; width: 8rem; }
.hoechstmengen tr.zuviel td { color: var(--fehler); font-weight: 600; }
.zusatztitel { margin: 1.2rem 0 .5rem; font-size: 1rem; }
.zwischentitel { margin: 1.6rem 0 .8rem; font-size: 1.15rem; }

/* Schaltfläche „Nach oben“ */
.nach-oben { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 40; width: 2.8rem; height: 2.8rem; border-radius: 50%;
  border: 1px solid var(--rand); background: var(--akzent); color: var(--akzent-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25); padding: 0; }
.nach-oben[hidden] { display: none; }
.nach-oben:hover { filter: brightness(1.1); }
:root[data-theme="dark"] .nach-oben, .nach-oben { color: var(--fl); }
@media print { .nach-oben { display: none !important; } }

.bepflanzungswert { margin: .2rem 0 .9rem; }

.gesamtstatus { background: #ecebeb; border: 1px solid #c8c3c4; }

.statustabelle { width: 100%; border-collapse: collapse; border-radius: 6px; overflow: hidden; }
.statustabelle th, .statustabelle td { padding: .4rem .7rem; text-align: left; font-weight: normal; }
.statustabelle tr:nth-child(odd) th, .statustabelle tr:nth-child(odd) td { background: #ffffff; }
.statustabelle tr:nth-child(even) th, .statustabelle tr:nth-child(even) td { background: #dedadb; }
.statustabelle td { width: 12rem; text-align: center; }
.statustabelle tr:last-child th, .statustabelle tr:last-child td { font-weight: 700; }
.statuswert { display: inline-block; min-width: 8.5rem; text-align: center; padding: .05rem .7rem; border-radius: 1rem; font-weight: 600; font-size: .9rem; }
.statustabelle tr.io .statuswert { background: #710720; color: #fff; }
.statustabelle tr.offen .statuswert { background: #ffd83d; color: #000; cursor: help; }

.druckkopf { text-align: center; margin-bottom: 1.2rem; } .druckkopf h1 { margin-bottom: .5rem; } .druckkopf p { margin: .1rem 0; } .druckkopf .vereinsname { font-size: 1.1rem; }

.pdfansicht { width: 100%; height: calc(100vh - 11rem); min-height: 38rem; border: 1px solid var(--rand, #ccc); border-radius: 4px; background: #fff; }
.statushinweis { margin: .2rem 0 1rem; color: var(--leise, #555); }

.statustabelle thead th { background: #710720 !important; color: #fff; font-weight: 600; }
.statustabelle .mitte, .statustabelle .nzspalte { text-align: center; }
.statustabelle .nzspalte { width: 9rem; } .statustabelle .nzspalte input { width: 1.2rem; height: 1.2rem; }
.statustabelle td:nth-child(2) { width: 12rem; }

.statustabelle tr.abstand td { background: transparent !important; padding: 0; height: .9rem; border: 0; }
.statustabelle tr.abschluss th, .statustabelle tr.abschluss td { background: #fff !important; border-top: 2px solid #710720; border-bottom: 2px solid #710720; padding-top: .55rem; padding-bottom: .55rem; font-size: 1.02rem; }

.pdfseiten { display: grid; gap: 1rem; justify-items: center; }
.pdfseite { width: 100%; max-width: 1000px; height: auto; background: #fff; border: 1px solid #c9d1ca; box-shadow: 0 1px 4px rgba(0,0,0,.18); }

table.sortierbar th { white-space: nowrap; }
table.sortierbar .sortknopf { border: 0; background: none; padding: 0; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-align: inherit; }
table.sortierbar .sortknopf:hover { text-decoration: underline; }
table.sortierbar .sortpfeil { font-size: .75em; color: var(--akzent, #710720); }

.paar2 { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; } @media (max-width: 520px) { .paar2 { grid-template-columns: 1fr; } }
.raster .feld.teiltitel { grid-column: 1 / -1; font-weight: 600; margin-bottom: -.4rem; }
.raster .feld.breit.einspaltig { grid-column: auto; }
.nowrap { white-space: nowrap; }

#bewertungsliste tbody tr[hidden] { display: none; }

#bewertungsliste .v2::before { content: ' · '; }
/* Smartphone: Liste der Wertermittlungen als Karten (ganze Karte ist der Link) */
@media (max-width: 640px) {
  #bewertungsliste { --karte-bg: #e9e6e7; --karte-rand: #bbb4b6; --karte-text: #000; --karte-leise: #322c2d; }
  #bewertungsliste, #bewertungsliste tbody { display: block; border: 0; background: none; box-shadow: none; }
  #bewertungsliste thead { display: none; }
  #bewertungsliste tbody tr { display: grid; grid-template-columns: 1fr auto auto; gap: .15rem .8rem; align-items: baseline; position: relative;
    padding: .85rem .95rem; margin-bottom: .7rem; border: 1px solid var(--karte-rand); border-radius: 10px; background: var(--karte-bg); color: var(--karte-text); }
  #bewertungsliste tbody tr[hidden] { display: none; }
  #bewertungsliste td { display: block; padding: 0; border: 0; text-align: left; color: var(--karte-text); }
  #bewertungsliste td::before { content: attr(data-label); display: block; font-size: .72rem; color: var(--karte-leise); text-transform: uppercase; letter-spacing: .03em; }
  #bewertungsliste td.c-garten::before { content: none; }
  #bewertungsliste td.c-garten { grid-column: 1 / 3; grid-row: 1; font-size: 1.2rem; font-weight: 700; }
  #bewertungsliste td.c-garten a { color: var(--karte-text); text-decoration: underline; }
  #bewertungsliste td.c-garten a::after { content: ''; position: absolute; inset: 0; border-radius: 10px; }
  #bewertungsliste td.c-status { grid-column: 3; grid-row: 1; text-align: right; }
  #bewertungsliste .marke-status { background: #fff; border: 1px solid var(--karte-rand); color: #000; }
  #bewertungsliste .marke-status.s-entwurf { background: #fff3d6; color: #5c3b00; border-color: #e0c27a; }
  #bewertungsliste td.c-name { grid-column: 1 / -1; grid-row: 2; font-size: 1.1rem; font-weight: 600; margin: .35rem 0 .3rem; }
  #bewertungsliste td.c-verein { grid-column: 1 / -1; grid-row: 3; color: var(--karte-leise); font-size: .92rem; margin-bottom: .5rem; }
  #bewertungsliste td.c-verein span { display: block; }
  #bewertungsliste .v2::before { content: none; }
  #bewertungsliste td.c-datum { grid-column: 1; grid-row: 4; }
  #bewertungsliste td.c-ergebnis { grid-column: 2; grid-row: 4; text-align: left; }
  #bewertungsliste td.c-geaendert { grid-column: 3; grid-row: 4; text-align: right; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #bewertungsliste { --karte-bg: #322c2d; --karte-rand: #52474a; --karte-text: #f5f3f4; --karte-leise: #ccc7c8; }
  :root:not([data-theme="light"]) #bewertungsliste .marke-status { background: #201c1d; color: #f5f3f4; }
}

/* =====================================================================
   Belege – Ergänzungen zu app.css aus „Wertermittlung“
   ===================================================================== */
.leise { color: var(--leise); }
.seitenkopf { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.seitenkopf h1, .seitenkopf h2 { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.seitenkopf .filter { margin: 0; }
a.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) a.knopf.primaer { color: #141212; } }
button.gefahr { border-color: var(--fehler); color: var(--fehler); } button.gefahr:hover { background: var(--fehler-bg); }
kbd { font: .85em/1 var(--schrift); border: 1px solid var(--rand); border-bottom-width: 2px; border-radius: 4px; padding: .1rem .3rem; background: var(--fl); }
.schmal-links { max-width: 640px; }
.unten-abstand { margin: .5rem 0 1rem; align-items: end; } .unten-abstand label { display: grid; gap: .2rem; }

/* Statusmarken */
.s-offen { background: var(--warn-bg); color: var(--warn); }
.s-abgestimmt, .s-abgeschlossen { background: var(--ok-bg); color: var(--ok); }
.s-differenz { background: var(--fehler-bg); color: var(--fehler); font-weight: 600; }
.s-storniert { background: var(--fehler-bg); color: var(--fehler); min-width: 0; }
.seitenkopf .marke-status { min-width: 0; font-size: .8rem; font-weight: 400; }

/* Einnahmen grün, Ausgaben rot */
.c-ein, .ergebnisbox .ein dd, .betrag-ein { color: var(--ok); }
.c-aus, .ergebnisbox .aus dd, .betrag-aus { color: var(--fehler); }
.fehlertext { color: var(--fehler); }

/* Fehler direkt am Feld */
.feldfehler { color: var(--fehler); font-size: .85rem; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--fehler); box-shadow: 0 0 0 1px var(--fehler); }

/* Filterleiste des Journals */
.journalfilter { align-items: end; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .6rem .75rem; }
.filterknoepfe { display: flex; gap: .4rem; }
.journalsummen { margin: 0 0 1rem; }

/* Journal-Tabelle */
.tabelle.journal td { vertical-align: top; }
.journal .c-text { min-width: 18rem; } .journal .partner { display: block; font-weight: 600; }
.journal .zweck { display: block; color: var(--leise); font-size: .88rem; } .journal .art { display: block; color: var(--leise); font-size: .78rem; margin-top: .1rem; }
.journal tbody tr:not(.saldozeile) { cursor: pointer; } .journal tbody tr:not(.saldozeile):hover td { background: var(--akzent-hell); }
.journal tbody tr:target td { background: var(--warn-bg); }
.saldo { font-weight: 700; }
.saldozeile td { background: var(--akzent-hell); font-weight: 700; }
tr.storniert td { color: var(--leise); opacity: .75; } tr.storniert td.zahl, tr.storniert .partner { text-decoration: line-through; }
tr.storniert .c-ein, tr.storniert .c-aus { color: var(--leise); }
.warnmarke { display: inline-block; font-size: .75rem; padding: 0 .35rem; border-radius: 99px; background: var(--warn-bg); color: var(--warn); }
.sammelzuordnung { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.sammelzuordnung label { display: grid; gap: .2rem; } .sammelzuordnung select { width: auto; } .sammelzuordnung .hinweis { flex-basis: 100%; margin: 0; }
.sammelzuordnung .sammel-titel { flex-basis: 100%; } .sammelzuordnung select { max-width: 22rem; }
tr.inaktiv td { color: var(--leise); }

/* Buchungsformular */
.buchungsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buchungsraster .feld.breit { grid-column: span 2; }
.buchungsform textarea { min-height: 4.5rem; }
.buchungsform .betragsfeld { font-size: 1.15rem; font-variant-numeric: tabular-nums; text-align: right; }
.buchungsform .radios { gap: 1rem; flex-wrap: wrap; } .buchungsform .radio { padding: .3rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius); }
.buchungsform.ist-einnahme .radio.ein { border-color: var(--ok); background: var(--akzent-hell); color: var(--ok); font-weight: 600; }
.buchungsform.ist-ausgabe .radio.aus { border-color: var(--fehler); background: var(--fehler-bg); color: var(--fehler); font-weight: 600; }
.buchungsform.ist-einnahme .betragsfeld { border-color: var(--ok); } .buchungsform.ist-ausgabe .betragsfeld { border-color: var(--fehler); }
.formknoepfe { margin-top: 1.2rem; }
.stornobox { margin-top: 1rem; } .stornobox summary { cursor: pointer; font-weight: 600; color: var(--fehler); }
.ohnerahmen legend { padding: 0; }
@media (max-width: 760px) { .buchungsraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .buchungsraster { grid-template-columns: 1fr; } .buchungsraster .feld.breit { grid-column: auto; } }

/* Kontoauszüge */
.auszugform { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.auszugform input[name=saldo] { width: 9rem; text-align: right; } .auszugform input[type=date] { width: 9.5rem; } .auszugform .feldfehler { flex-basis: 100%; }
.auszuege td { vertical-align: middle; }

/* Auswertung / Kassenbericht */
.auswertung .vj { color: var(--leise); } .auswertung th.mitte { text-align: center; } .auswertung tfoot td { font-weight: 700; border-top: 2px solid var(--text); }
.kontostand { max-width: 560px; } .kontostand th { width: auto; } .kontostand td { text-align: right; } .kontostand tr.summe th, .kontostand tr.summe td { font-weight: 700; border-top: 2px solid var(--text); }

/* Einstellungen */
.kategoriezeile { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: end; padding: .4rem 0; border-bottom: 1px solid var(--rand); }
.kategoriezeile:last-child { border-bottom: 0; }
.kategoriezeile .feld { flex: 1 1 180px; } .kategoriezeile .schmal-feld { flex: 0 0 6.5rem; } .kategoriezeile .haken { flex: 0 0 auto; padding-bottom: .4rem; }
.kategoriezeile.inaktiv input[name=bezeichnung] { color: var(--leise); text-decoration: line-through; }
.jahreskarte { margin-bottom: 1rem; } .jahreskarte dl.status { margin-bottom: .8rem; }
.logokarte { display: grid; gap: .6rem; justify-items: start; } .logokarte input[type=file] { width: auto; }
code.details { font-size: .78rem; word-break: break-word; white-space: pre-wrap; }

/* Druckansichten */
.druckkopf-zeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.druckkopf-zeile .vereinsname { font-size: 1.1rem; font-weight: 700; }
.drucklogo { max-height: 70px; max-width: 180px; }
.druck-titel { margin: 1rem 0 .3rem; }
.blatt-quer { max-width: 1200px; }
.druckjournal { font-size: .82rem; } .druckjournal th, .druckjournal td { padding: .25rem .4rem; } .druckjournal tfoot td { font-weight: 700; border-top: 2px solid var(--text); }
@media print {
  @page { margin: 14mm 12mm; }
  .blatt-quer { font-size: 8.5pt; } .druckjournal { font-size: 8pt; }
  .tabelle { border: 0; } .tabelle th, .tabelle td { border-bottom: .5pt solid #999; }
  .c-ein, .c-aus, .saldozeile td { color: #000 !important; background: none !important; }
  tr.storniert td { opacity: 1; color: #555; }
  .entwurf-hinweis { border: 1pt solid #000; }
}

/* Smartphone: Journalzeilen als Karten (wie die Liste in „Wertermittlung“) */
@media (max-width: 640px) {
  #journal { --karte-bg: #e9e6e7; --karte-rand: #bbb4b6; --karte-text: #000; --karte-leise: #322c2d; }
  #journal, #journal tbody { display: block; border: 0; background: none; }
  #journal thead { display: none; }
  #journal tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .7rem .85rem; margin-bottom: .6rem;
    border: 1px solid var(--karte-rand); border-radius: 10px; background: var(--karte-bg); color: var(--karte-text); }
  #journal tbody tr:hover td { background: none; }
  #journal td { display: block; padding: 0; border: 0; text-align: left; color: var(--karte-text); }
  #journal td.c-beleg { grid-column: 1; grid-row: 1; font-weight: 700; } #journal td.c-beleg a { color: var(--karte-text); }
  #journal td.c-datum { grid-column: 2; grid-row: 1; text-align: right; }
  #journal td.c-text { grid-column: 1 / -1; grid-row: 2; min-width: 0; margin: .3rem 0; }
  #journal .zweck, #journal .art { color: var(--karte-leise); }
  #journal td.c-auszug, #journal td.c-sph { font-size: .85rem; color: var(--karte-leise); }
  #journal td.c-auszug { grid-column: 1; grid-row: 3; } #journal td.c-auszug::before { content: 'Auszug '; }
  #journal td.c-sph { grid-column: 1; grid-row: 4; }
  #journal td.c-ein, #journal td.c-aus { grid-column: 2; grid-row: 3; text-align: right; font-size: 1.1rem; font-weight: 700; }
  #journal td.c-ein:empty, #journal td.c-aus:empty { display: none; }
  #journal td.c-ein { color: #710720; } #journal td.c-aus { color: #a32a2a; } #journal td.c-aus:not(:empty)::before { content: '– '; }
  #journal td.c-saldo { grid-column: 2; grid-row: 4; text-align: right; font-size: .85rem; } #journal td.c-saldo::before { content: 'Saldo '; font-weight: 400; color: var(--karte-leise); }
  #journal tr.saldozeile { background: var(--fl); border-color: var(--rand); color: var(--text); }
  #journal tr.saldozeile td { background: none; color: var(--text); grid-row: 1; } #journal tr.saldozeile td.saldo { grid-column: 2; text-align: right; }
  #journal tr.storniert { opacity: .7; }
}
@media (max-width: 640px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #journal { --karte-bg: #322c2d; --karte-rand: #52474a; --karte-text: #f5f3f4; --karte-leise: #ccc7c8; }
  :root:not([data-theme="light"]) #journal td.c-ein { color: #bfb8ba; } :root:not([data-theme="light"]) #journal td.c-aus { color: #ffb0b0; }
}

/* Filterleiste: am Desktop immer offen, am Handy einklappbar */
.filterklappe { margin-bottom: 1rem; } .filterklappe > summary { list-style: none; display: none; margin-bottom: .5rem; }
.filterklappe > summary::-webkit-details-marker { display: none; } .filterklappe .journalfilter { margin-bottom: 0; }
@media (max-width: 640px) { .filterklappe > summary { display: inline-block; } .filterklappe > summary::before { content: '▸ '; } .filterklappe[open] > summary::before { content: '▾ '; } }

/* Seitennavigation im Journal */
.blaettern { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .75rem 0; }
.blaettern .knopf { min-width: 2.4rem; text-align: center; padding: .35rem .65rem; }
.blaettern .aktuell { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 700; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .blaettern .aktuell { color: #141212; } }
.blaettern .aus { opacity: .4; cursor: default; } .blaettern .luecke { color: var(--leise); padding: 0 .2rem; }
.blaettern .seiteninfo { margin-left: auto; color: var(--leise); font-size: .88rem; }
@media (max-width: 640px) { .blaettern .seitenzahl { display: none; } .blaettern .seiteninfo { flex-basis: 100%; margin: 0; text-align: center; } .blaettern { justify-content: center; } }

/* Filterleiste des Journals: am Bildschirm alles in einer Zeile */
.journalfilter label, .journalfilter .f-betrag { display: grid; gap: .15rem; font-size: .8rem; color: var(--leise); min-width: 0; }
.journalfilter .f-betrag { grid-template-columns: 1fr 1fr; column-gap: .25rem; } .journalfilter .f-betrag > span { grid-column: 1 / -1; }
.journalfilter select, .journalfilter input { width: 100%; max-width: none; padding: .3rem .4rem; font-size: .9rem; }
.journalfilter .f-betrag input { text-align: right; }
.journalfilter .filterknoepfe { align-self: end; } .journalfilter .filterknoepfe .knopf, .journalfilter .filterknoepfe button { padding: .3rem .7rem; font-size: .9rem; }
.journalfilter .loeschen { font-weight: 700; }
@media (min-width: 1000px) {
  .journalfilter { flex-wrap: nowrap; gap: .45rem; }
  .journalfilter > * { flex: 0 0 auto; }
  .journalfilter .f-jahr { flex-basis: 5.1rem; } .journalfilter .f-monat { flex: 0 1 6.9rem; min-width: 5.9rem; } .journalfilter .f-auszug { flex-basis: 4.6rem; }
  .journalfilter .f-sphaere { flex: 0 1 8.5rem; min-width: 5.5rem; } .journalfilter .f-konto { flex: 0 1 8.5rem; min-width: 5.5rem; } .journalfilter .f-art { flex: 0 1 6.6rem; min-width: 5.6rem; } .journalfilter .f-reihe { flex-basis: 8.9rem; }
  .journalfilter .f-betrag { flex: 0 1 9.5rem; min-width: 7.5rem; } .journalfilter .f-suche { flex: 1 1 7rem; min-width: 5.5rem; }
}
@media (min-width: 641px) and (max-width: 999px) {
  .journalfilter > * { flex: 1 1 7.5rem; } .journalfilter .f-suche { flex-basis: 14rem; } .journalfilter .f-betrag { flex-basis: 10rem; } .journalfilter .filterknoepfe { flex: none; }
}
@media (max-width: 640px) {
  .journalfilter > * { flex: 1 1 45%; } .journalfilter .f-suche, .journalfilter .f-betrag { flex-basis: 100%; }
}

/* Mittlere Bildschirmbreite (z. B. Tablet quer): Kopfleiste kompakter, damit nichts über den Rand ragt */
@media (min-width: 861px) and (max-width: 1199px) {
  .kopf-innen { gap: .6rem; } .kopf .marke { margin-right: 0; }
  .kopf .menue-eintrag { padding: .5rem .5rem; gap: .4rem; }
  .nutzer-name { display: none; }
}
@media (min-width: 861px) and (max-width: 1023px) { .hauptnav .menue-eintrag > svg.ic, .hauptnav .summary-zeile > svg.ic { display: none; } .marke-text small { display: none; } }
.journalfilter select, .journalfilter input, .journalfilter .filterknoepfe button, .journalfilter .filterknoepfe .knopf { height: 2.05rem; box-sizing: border-box; } .journalfilter .filterknoepfe .knopf { display: inline-flex; align-items: center; }

/* Filter wirken sofort (journal.js): „Anzeigen“ wird nur ohne JavaScript gebraucht */
.journalfilter.sofort .filterknoepfe button[type=submit] { display: none; }

/* Zwei-Faktor-Anmeldung */
.zweifa .schritte { padding-left: 1.2rem; display: grid; gap: 1rem; margin: 0; }
.zweifa .qr { width: 220px; max-width: 70vw; margin: .6rem 0; border: 1px solid var(--rand); border-radius: var(--radius); background: #fff; padding: 0; }
.zweifa .qr svg { display: block; width: 100%; height: auto; }
.zweifa .geheimnis { display: inline-block; margin-top: .3rem; font-size: 1.05rem; letter-spacing: .06em; padding: .3rem .5rem; background: var(--akzent-hell); border-radius: var(--radius); user-select: all; word-break: break-all; }
.codefeld { font-size: 1.3rem; letter-spacing: .25em; text-align: center; max-width: 11rem; font-variant-numeric: tabular-nums; }
.codezeile { align-items: center; margin-top: .5rem; } .codezeile .feldfehler { flex-basis: 100%; }
.ersatzcodes { columns: 2; font-size: 1.1rem; margin: .5rem 0; padding-left: 1.6rem; } .ersatzcodes code { letter-spacing: .05em; color: var(--text); }
@media print { .zweifa .ersatzbox { border: 1pt solid #000; } .zweifa > *:not(.ersatzbox) { display: none !important; } }

/* ---- Sphären (SKR 42): Plaketten S1–S4 in Listen, Auswahlkarten in der Buchungsmaske */
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
th.c-sph { white-space: nowrap; }
.sph-reihe { display: inline-flex; gap: .22rem; white-space: nowrap; vertical-align: middle; }
.sph { display: inline-flex; align-items: center; justify-content: center; gap: .12rem; min-width: 1.75rem; box-sizing: border-box; padding: .06rem .32rem;
  border: 1px dashed var(--rand); border-radius: 99px; font-size: .72rem; font-weight: 700; line-height: 1.25; letter-spacing: .02em;
  color: color-mix(in srgb, var(--leise) 55%, transparent); }
.sph.an { background: var(--akzent); border: 1px solid var(--akzent); color: var(--fl); box-shadow: 0 1px 2px color-mix(in srgb, var(--akzent) 35%, transparent); cursor: help; }
.sph .sph-haken { font-size: .66rem; }
.sph-link { display: inline-flex; align-items: center; gap: .55rem; }
.sph-link .sph { cursor: pointer; }

fieldset.sphaeren { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.sphaeren legend { padding: 0; margin-bottom: .35rem; }
.sph-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; }
.sph-karte { position: relative; display: grid; gap: .55rem; align-content: start; padding: .65rem .75rem; border: 1.5px solid var(--rand); border-radius: 10px;
  background: var(--fl); transition: border-color .15s, background-color .15s, box-shadow .15s; }
.sph-karte:hover { border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand)); }
.sph-karte.an, .sph-karte:has(.sph-wahl input:checked) { border-color: var(--akzent); background: var(--akzent-hell); box-shadow: 0 2px 8px color-mix(in srgb, var(--akzent) 18%, transparent); }
.sph-karte:has(.sph-wahl input:focus-visible) { outline: 2px solid var(--akzent); outline-offset: 2px; }
.raster .sph-wahl, .sph-wahl { display: flex; align-items: center; gap: .7rem; cursor: pointer; }
.sph-wahl input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sph-marke { position: relative; flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 2px solid var(--rand); font-weight: 800; font-size: .95rem; color: var(--leise); background: var(--bg); transition: all .15s; }
.sph-marke .sph-haken { position: absolute; top: -.3rem; right: -.35rem; display: grid; place-items: center; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  background: var(--fl); color: var(--akzent); border: 2px solid var(--akzent); font-size: .68rem; font-weight: 900; transform: scale(0); transition: transform .15s; }
.sph-karte.an .sph-marke, .sph-karte:has(.sph-wahl input:checked) .sph-marke { background: var(--akzent); border-color: var(--akzent); color: var(--fl); }
.sph-karte.an .sph-haken, .sph-karte:has(.sph-wahl input:checked) .sph-haken { transform: scale(1); }
.sph-name { display: grid; line-height: 1.25; font-weight: 600; }
.sph-nr { font-size: .75rem; font-weight: 400; color: var(--leise); }
fieldset.sphaeren:disabled .sph-wahl, .sph-wahl:has(input:disabled) { cursor: default; }
.sph-summe { margin: .45rem 0 0; min-height: 1.2em; font-size: .9rem; color: var(--leise); }
.sph-summe.stimmt { color: var(--ok); font-weight: 600; } .sph-summe.falsch { color: var(--fehler); font-weight: 600; }
@media print {
  .sph { border: .5pt solid #999; color: #999; } .sph.an { background: none !important; border: 1pt solid #000; color: #000; box-shadow: none; }
}

/* ---- Steuersätze: Parameter und Buchungsmaske */
fieldset.steuerparameter { display: grid; gap: .5rem; margin: .25rem 0 0; }
fieldset.steuerparameter legend { font-weight: 600; padding: 0 .3rem; }
.satzfelder { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.satzfelder .bez { flex-basis: 100%; }
.satzfeld { display: inline-flex; align-items: center; gap: .25rem; }
.satzfeld input { width: 4.5rem; text-align: right; }
.stapel .vorgabefelder label, .vorgabefelder label { display: grid; grid-template-columns: 1fr 6.5rem; align-items: center; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--rand); }
.vorgabefelder .sph { margin-right: .3rem; }
.vorgabefelder { display: grid; gap: .1rem; }

.sph-saetze { display: grid; gap: .3rem; padding-top: .45rem; border-top: 1px dashed color-mix(in srgb, var(--akzent) 35%, var(--rand)); }
.satz-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .5rem; }
.raster .satz-chip, .satz-chip { display: inline-flex; cursor: pointer; }
.satz-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.satz-chip span { min-width: 3.4rem; box-sizing: border-box; text-align: center; padding: .18rem .55rem; border: 1px solid var(--rand); border-radius: 99px;
  font-size: .82rem; font-weight: 600; color: var(--leise); background: var(--fl); transition: all .15s; font-variant-numeric: tabular-nums; }
.satz-chip:hover span { border-color: var(--akzent); }
.satz-chip input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--fl); }
.satz-chip input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.satz-chip input:disabled + span { cursor: default; }
.satz-betrag { text-align: right; font-variant-numeric: tabular-nums; }
.satz-steuer { grid-column: 2; font-size: .78rem; color: var(--leise); text-align: right; font-variant-numeric: tabular-nums; }
.satz-steuer:empty { display: none; }
/* mit Skript: Sätze nur bei gewählter Karte, Betragsfelder nur bei mehreren Positionen und nur beim gewählten Satz */
fieldset.sphaeren.mit-js .sph-karte:not(.an) .sph-saetze { display: none; }
fieldset.sphaeren.mit-js .satz-betrag { display: none; }
fieldset.sphaeren.mit-js.mehrere .satz-zeile.an .satz-betrag { display: block; }
fieldset.sphaeren.mit-js .sph-saetze { grid-template-columns: repeat(auto-fill, minmax(3.4rem, max-content)); column-gap: .35rem; }
fieldset.sphaeren.mit-js.mehrere .sph-saetze { grid-template-columns: 1fr; }
fieldset.sphaeren.mit-js:not(.mehrere) .satz-zeile { display: contents; }
fieldset.sphaeren.mit-js:not(.mehrere) .satz-steuer { grid-column: 1 / -1; text-align: left; }
.sph-steuer { display: block; margin-top: .2rem; font-size: .75rem; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }

.satz-chip.fest { cursor: default; pointer-events: none; }
.satz-chip.fest input + span { background: var(--bg); border-style: dashed; color: var(--leise); font-weight: 600; }
.vorgabe-fest { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--rand); }

.bu-tabelle { display: grid; grid-template-columns: 4.5rem repeat(2, minmax(0, 8rem)); gap: .35rem .6rem; align-items: center; }
.bu-tabelle .bez { grid-column: 1 / -1; }
.bu-kopf { font-size: .8rem; color: var(--leise); }
.bu-satz { font-weight: 600; font-variant-numeric: tabular-nums; }
.bu-tabelle input { text-align: center; }

.kontentabelle tr.gruppenzeile th { background: var(--akzent-hell); font-size: .82rem; letter-spacing: .02em; text-transform: uppercase; color: var(--akzent); padding-top: .5rem; }
.kontentabelle td.zahl a { font-variant-numeric: tabular-nums; font-weight: 600; }
.kontenimport { margin-top: 1.25rem; }

/* ---- Kontierung: Positionen mit Sachkonto, Sphäre, Steuersatz, Betrag */
fieldset.positionen { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.positionen legend { padding: 0; margin-bottom: .35rem; }
.pos-liste { display: grid; gap: .5rem; }
.pos-zeile { position: relative; display: grid; grid-template-columns: 1.7rem minmax(13rem, 1fr) auto auto 8.5rem 2rem; gap: .35rem .8rem; align-items: start;
  padding: .6rem .75rem; border: 1.5px solid var(--rand); border-radius: 10px; background: var(--fl); transition: border-color .15s, box-shadow .15s; }
.pos-zeile:focus-within { border-color: var(--akzent); box-shadow: 0 2px 8px color-mix(in srgb, var(--akzent) 15%, transparent); }
.pos-reserve { border-style: dashed; }
.pos-nr { align-self: center; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; font-size: .85rem; }
.pos-bez { display: block; font-size: .74rem; color: var(--leise); margin-bottom: .2rem; }
.raster .pos-konto, .pos-konto, .raster .pos-betrag, .pos-betrag { display: block; min-width: 0; }
.pos-konto select { width: 100%; }
.pos-betrag input { text-align: right; font-variant-numeric: tabular-nums; }
.pille-reihe { display: flex; flex-wrap: wrap; gap: .25rem; }
.raster .pille, .pille { position: relative; display: inline-flex; cursor: pointer; }
.pille input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.pille span, span.pille { display: inline-block; min-width: 2.3rem; box-sizing: border-box; text-align: center; padding: .32rem .5rem; border: 1px solid var(--rand); border-radius: 99px;
  font-size: .82rem; font-weight: 700; color: var(--leise); background: var(--fl); transition: all .12s; font-variant-numeric: tabular-nums; line-height: 1.2; }
.pille:hover span { border-color: var(--akzent); }
.pille input:checked + span { background: var(--akzent); border-color: var(--akzent); color: var(--fl); }
.pille input:focus-visible + span { outline: 2px solid var(--akzent); outline-offset: 2px; }
.pille input:disabled + span { cursor: default; }
.sph-pille input:checked + span::before { content: '✓ '; font-size: .75em; }
span.pille.steuerfrei-hinweis { display: none; border-style: dashed; background: var(--bg); cursor: help; }
.pos-zeile.steuerfrei .satz-pille { display: none; }
.pos-zeile.steuerfrei span.pille.steuerfrei-hinweis { display: inline-block; }
.pos-weg { grid-column: 6; grid-row: 1; }
.pos-info { grid-column: 2 / -1; grid-row: 2; text-align: right; font-size: .78rem; color: var(--leise); font-variant-numeric: tabular-nums; min-height: 0; }
.pos-info:empty { display: none; }
.pos-weg { align-self: center; width: 2rem; height: 2rem; padding: 0; border-radius: 50%; color: var(--leise); }
.pos-weg:hover { color: var(--fehler); border-color: var(--fehler); }
fieldset.positionen.mit-js:not(.mehrere) .pos-betrag { visibility: hidden; }
.pos-aktionen { margin: .5rem 0 0; }
.knopf-klein { font-size: .88rem; padding: .3rem .7rem; border-style: dashed; color: var(--akzent); }
.knopf-klein:hover { background: var(--akzent-hell); }
@media (max-width: 760px) {
  .pos-zeile { grid-template-columns: 1.7rem 1fr 2rem; }
  .pos-konto { grid-column: 2 / 3; }
  .pos-weg { grid-column: 3; grid-row: 1; align-self: end; }
  .pos-nr { grid-row: 1; align-self: end; margin-bottom: .3rem; }
  .pos-info { grid-row: auto; }
  .pos-sph, .pos-satz, .pos-betrag, .pos-info { grid-column: 2 / -1; }
  .pos-info { text-align: left; }
  fieldset.positionen.mit-js:not(.mehrere) .pos-betrag { display: none; }
}
/* Belegliste: Sachkonten unter den Sphären */
.pos-konten { display: block; margin-top: .2rem; font-size: .74rem; color: var(--leise); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; }
.buchungssaetze { margin-top: 1rem; }
.buchungssaetze h2 small { font-weight: 400; font-size: .8rem; }

.pos-kontoname { display: block; min-height: 1.1em; margin-top: .15rem; font-size: .76rem; color: var(--akzent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-kontoname.falsch { color: var(--fehler); }
.pos-konto input { width: 100%; font-variant-numeric: tabular-nums; }
.listensuche { display: grid; gap: .2rem; max-width: 28rem; margin: .5rem 0 .75rem; font-size: .88rem; color: var(--leise); }
.kontentabelle abbr { text-decoration: none; font-size: .78rem; font-weight: 700; color: var(--akzent); cursor: help; }

/* ---- Belege ohne vollständige Kontierung (Sachkonto oder Sphäre fehlt): neongelb markieren */
:root { --pruef-bg: #fff23a; --pruef-zelle: #fff68f; --pruef-rand: #e3c800; --pruef-text: #3d3400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pruef-bg: #5e5800; --pruef-zelle: #3f3b00; --pruef-rand: #c9b400; --pruef-text: #fff6a0; } }
:root[data-theme="dark"] { --pruef-bg: #5e5800; --pruef-zelle: #3f3b00; --pruef-rand: #c9b400; --pruef-text: #fff6a0; }
#journal tr.unvollstaendig td { background: var(--pruef-zelle); }
#journal tr.unvollstaendig td:first-child { box-shadow: inset 5px 0 0 var(--pruef-rand); }
#journal tr.unvollstaendig:hover td { background: var(--pruef-bg); }
.fehlt-marke { display: inline-block; margin-top: .25rem; padding: .05rem .45rem; border-radius: 99px; background: var(--pruef-bg); border: 1px solid var(--pruef-rand);
  color: var(--pruef-text); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.pruefhinweis { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: .75rem 0; padding: .55rem .8rem; border-radius: var(--radius);
  background: var(--pruef-bg); border: 1px solid var(--pruef-rand); color: var(--pruef-text); }
.pruefhinweis > span:nth-child(2) { flex: 1 1 20rem; }
.pruefhinweis .knopf { padding: .3rem .7rem; font-size: .9rem; }
.pruef-icon { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--pruef-text); color: var(--pruef-bg); font-weight: 800; flex: none; }
.pruefok { margin: .6rem 0; font-size: .9rem; color: var(--ok); }
@media (max-width: 640px) {
  #journal tbody tr.unvollstaendig { background: var(--pruef-zelle); border-color: var(--pruef-rand); box-shadow: inset 5px 0 0 var(--pruef-rand); }
  #journal tr.unvollstaendig td { background: none; } #journal tr.unvollstaendig td:first-child { box-shadow: none; }
}
@media print { #journal tr.unvollstaendig td { background: none; box-shadow: none; } .fehlt-marke { border: .5pt solid #000; background: none; } }
.pos-pruefung { margin: .35rem 0 0; padding: .35rem .6rem; border-radius: var(--radius); background: var(--pruef-bg); border: 1px solid var(--pruef-rand); color: var(--pruef-text); font-size: .88rem; font-weight: 600; }

/* ===== SchreberApp: Hauptmenü mit Bereichen und zweite Menüebene ===== */
/* Bereiche ohne Funktion (noch in Vorbereitung) */
.kopf .menue-eintrag.demnaechst { cursor: default; opacity: .62; }
.kopf .menue-eintrag.demnaechst:hover { background: none; }
.bald { font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 99px;
  border: 1px solid currentColor; opacity: .85; line-height: 1.3; }

/* Zweite Ebene: Leiste unter der Kopfzeile (bleibt beim Scrollen mit der Kopfzeile sichtbar) */
.unternav-zeile { background: var(--fl); color: var(--text); border-bottom: 1px solid var(--rand); box-shadow: 0 6px 16px rgba(0,0,0,.05); }
.unternav { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; gap: .9rem; min-height: 52px; }
.unternav-titel { display: flex; align-items: center; gap: .45rem; flex: none; padding-right: .9rem; border-right: 1px solid var(--rand);
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--akzent); }
.unternav-titel .ic { width: 18px; height: 18px; }
.unternav-liste { display: flex; align-items: center; gap: .35rem; min-width: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  padding: .45rem 0; -webkit-overflow-scrolling: touch; }
.unternav-liste::-webkit-scrollbar { display: none; }
.kopf a.unternav-eintrag, .unternav-eintrag { display: inline-flex; align-items: center; gap: .45rem; flex: none; scroll-snap-align: start; padding: .42rem .9rem;
  border-radius: 99px; border: 1px solid transparent; color: var(--text); text-decoration: none; font-size: .93rem; white-space: nowrap; transition: background .12s, border-color .12s, color .12s; }
.unternav-eintrag .ic { width: 18px; height: 18px; color: var(--akzent); }
.unternav-eintrag:hover { background: var(--akzent-hell); }
.kopf a.unternav-eintrag[aria-current="page"] { background: var(--akzent); color: var(--fl); font-weight: 600; box-shadow: 0 2px 6px color-mix(in srgb, var(--akzent) 35%, transparent); }
.unternav-eintrag[aria-current="page"] .ic { color: currentColor; }
.kopf a.unternav-eintrag.hervor:not([aria-current="page"]) { border-color: color-mix(in srgb, var(--akzent) 55%, var(--rand)); border-style: dashed; color: var(--akzent); font-weight: 600; }
:target, tr[id] { scroll-margin-top: 130px; }

/* Handy: Buchhaltung als Tab-Leiste am unteren Rand (Daumenreichweite), Einstellungen als wischbare Chips oben */
.tabbar { display: none; }
@media (max-width: 860px) {
  .unternav-zeile.mit-tabbar { display: none; }
  .unternav { min-height: 46px; gap: .5rem; padding-left: max(16px, env(safe-area-inset-left)); padding-right: 0; }
  .unternav-titel { padding-right: .5rem; } .unternav-titel span { display: none; }
  .unternav-liste { padding-right: 28px; mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .tabbar { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end;
    padding: .35rem max(.5rem, env(safe-area-inset-right)) calc(.35rem + env(safe-area-inset-bottom)) max(.5rem, env(safe-area-inset-left));
    background: color-mix(in srgb, var(--fl) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rand); box-shadow: 0 -6px 18px rgba(0,0,0,.08); }
  .tabbar-eintrag { display: grid; justify-items: center; gap: .15rem; padding: .2rem .1rem; color: var(--leise); text-decoration: none; font-size: .72rem; font-weight: 600;
    -webkit-tap-highlight-color: transparent; min-height: 48px; }
  .tabbar-ic { display: grid; place-items: center; width: 3.4rem; height: 1.9rem; border-radius: 99px; transition: background .15s, color .15s; }
  .tabbar-ic .ic { width: 22px; height: 22px; }
  .tabbar-eintrag[aria-current="page"] { color: var(--akzent); }
  .tabbar-eintrag[aria-current="page"] .tabbar-ic { background: var(--akzent-hell); }
  /* „Neue Buchung“ als hervorgehobener runder Knopf in der Mitte der Leiste */
  .tabbar-eintrag.hervor .tabbar-ic { width: 3.1rem; height: 3.1rem; margin-top: -1.2rem; border-radius: 50%; background: var(--akzent); color: var(--fl);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--akzent) 45%, transparent); border: 3px solid var(--fl); }
  .tabbar-eintrag.hervor[aria-current="page"] .tabbar-ic { background: var(--akzent); filter: brightness(1.1); }
  .tabbar-eintrag.hervor { color: var(--akzent); }
  body:has(.tabbar) main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
  body:has(.tabbar) .nach-oben { bottom: calc(5.2rem + env(safe-area-inset-bottom)); }
  body.menue-offen .tabbar { display: none; }
  :target, tr[id] { scroll-margin-top: 80px; }
}
@media print { .unternav-zeile, .tabbar { display: none !important; } }

.tabbar-menue { background: none; border: 0; font-family: inherit; cursor: pointer; margin: 0; }

/* Bereichs-Links im Hauptmenü (Verwaltung, Buchhaltung): öffnen direkt die erste Seite; Unterseiten nur im Handy-Menü eingerückt */
.bereich-gruppe { display: flex; align-items: center; position: relative; }
.bereich-unterpunkte { display: none; }
.kopf .menue-eintrag.bereich-aktiv { background: var(--nav-aktiv); font-weight: 600; }
/* Pfeil neben Verwaltung/Buchhaltung: Unterseiten als Aufklappmenü (Desktop) */
.kopf .bereich-gruppe .bereich-link { border-radius: 8px 0 0 8px; padding-right: .45rem; }
.bereich-klappe { position: static; }
.kopf .bereich-pfeil { border-radius: 0 8px 8px 0; padding: .5rem .5rem .5rem .25rem; }
.kopf .bereich-gruppe.aktiv .bereich-pfeil { background: var(--nav-aktiv); }
.kopf .bereich-klappe[open] > .bereich-pfeil { background: var(--nav-hover); }
@media (max-width: 860px) {
  .bereich-klappe { display: none; }
  .kopf .bereich-gruppe .bereich-link { border-radius: 8px; padding-right: .8rem; }
  .bereich-gruppe { display: block; }
  .kopf .menue-eintrag.bereich-aktiv { background: var(--akzent-hell); color: var(--akzent); }
  .bereich-gruppe.aktiv .bereich-unterpunkte { display: grid; gap: 2px; padding: 0 0 .3rem 1.2rem; border-left: 2px solid var(--rand); margin-left: 1.3rem; }
}
/* Registerkarten als Links (Seite „Verein“) */
a.reiter-knopf { text-decoration: none; display: inline-block; }
.registerkarten { margin-top: .25rem; }
@media (max-width: 640px) { .registerkarten { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .registerkarten .reiter-knopf { flex: none; } }
.platzhalter h2 { margin-top: 0; }

/* ---- Verein › Übersicht: Abschnitte in zwei Spalten */
.verein-raster { display: grid; gap: 1rem; align-items: start; }
.verein-spalte { display: grid; gap: 1rem; align-content: start; min-width: 0; }
@media (min-width: 900px) { .verein-raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .verein-speichern { grid-column: 1 / -1; } }
.verein-abschnitt { padding: 0; overflow: hidden; }
.abschnitt-kopf { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1.1rem .8rem; background: linear-gradient(180deg, var(--akzent-hell), transparent);
  border-bottom: 1px solid var(--rand); }
.abschnitt-kopf h2 { margin: 0; font-size: 1.05rem; }
.abschnitt-kopf p { margin: .15rem 0 0; font-size: .84rem; color: var(--leise); }
.abschnitt-icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 10px; background: var(--akzent); color: var(--fl);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--akzent) 30%, transparent); }
.abschnitt-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1rem; padding: 1rem 1.1rem 1.1rem; }
.abschnitt-felder .feld.voll { grid-column: 1 / -1; }
.abschnitt-felder .feld .hinweis { margin: .15rem 0 0; font-size: .78rem; }
@media (max-width: 520px) { .abschnitt-felder { grid-template-columns: 1fr; } }
.logobereich { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.logo-vorschau { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--rand); border-radius: 12px; background: var(--bg); padding: .5rem; }
.logo-vorschau img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-vorschau .leer { font-size: .85rem; text-align: center; }
.logo-aktionen form { margin: 0; } .logo-aktionen p { margin: .3rem 0; }
@media (max-width: 520px) { .logobereich { grid-template-columns: 1fr; } .logo-vorschau { max-width: 9rem; } }
.verein-speichern { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; border: 1px solid var(--rand); border-radius: var(--radius);
  background: var(--fl); position: sticky; bottom: .75rem; z-index: 5; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.verein-speichern .hinweis { margin: 0; }

/* ---- Verein › Flächen: Tabelle, am Handy Karten (wie die Belegliste) */
.flaechen-kopf { align-items: center; flex-wrap: nowrap; } .flaechen-kopf .hinweis { margin: 0; flex: 1 1 auto; min-width: 0; }
.flaechen-kopf .knopf { flex: none; }
.flaechentabelle td.c-bez a { font-weight: 600; }
.flaechentabelle td.c-bez .eigen { display: block; font-size: .85rem; color: var(--leise); margin-top: .1rem; }
.flaechentabelle tfoot td { font-weight: 700; border-top: 2px solid var(--text); background: var(--akzent-hell); }
.flaechentabelle tbody tr:hover td { background: var(--akzent-hell); }
/* ganze Zeile anklickbar: der Link der Bezeichnung wird über die Zeile gespannt */
.flaechentabelle tbody tr { position: relative; cursor: pointer; }
.flaechentabelle tbody td.c-bez a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.flaechentabelle tbody td.c-bez a:focus-visible { outline: none; } .flaechentabelle tbody td.c-bez a:focus-visible::after { outline: 2px solid var(--akzent); outline-offset: -2px; }
.anteil { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.anteil-balken { display: inline-block; width: 4.5rem; height: .45rem; border-radius: 99px; background: var(--rand); overflow: hidden; }
.anteil-balken > span { display: block; height: 100%; width: var(--anteil); background: var(--akzent); border-radius: inherit; }
.leerzustand { text-align: center; padding: 2rem 1rem; } .leerzustand h2 { margin-top: 0; } .leerzustand .hinweis { max-width: 34rem; margin-inline: auto; }
.flaeche-form { max-width: 46rem; }
.flaeche-form .abschnitt-felder { align-items: start; } .flaeche-form .feld { align-content: start; } /* Felder einer Zeile oben bündig, egal wie lang Hinweis oder Fehlermeldung sind */
.flaeche-form .formular-fuss { padding: 0 1.1rem 1.1rem; margin: 0; display: flex; gap: .6rem; flex-wrap: wrap; }
.loeschen-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .8rem 1.1rem; border-top: 1px solid var(--rand); background: var(--bg); }
.loeschen-zeile .hinweis { margin: 0; font-size: .8rem; }
.pflicht { color: var(--fehler); }
.mit-einheit { display: flex; align-items: stretch; }
.mit-einheit input { flex: 1 1 auto; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mit-einheit .einheit { display: grid; place-items: center; padding: 0 .6rem; border: 1px solid var(--rand); border-left: 0; border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg); color: var(--leise); font-size: .88rem; white-space: nowrap; }
@media (max-width: 640px) {
  #flaechen, #flaechen tbody, #flaechen tfoot { display: block; border: 0; background: none; }
  #flaechen thead { display: none; }
  #flaechen tr { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .45rem .8rem; padding: .75rem .85rem; margin-bottom: .6rem;
    border: 1px solid var(--rand); border-left: 5px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  #flaechen tbody tr:hover td { background: none; }
  #flaechen tbody td.c-bez a::after { border-radius: 10px; }
  #flaechen td { display: block; padding: 0; border: 0; text-align: left; background: none; }
  #flaechen td.c-bez { grid-column: 1 / -1; grid-row: 1; font-size: 1.05rem; font-weight: 700; }
  #flaechen td.c-bez .eigen { font-size: .88rem; font-weight: 400; }
  #flaechen td[data-bez]::before { content: attr(data-bez); display: block; font-size: .74rem; font-weight: 400; color: var(--leise); }
  #flaechen td.c-flaeche, #flaechen td.c-parz, #flaechen td.c-pacht, #flaechen td.c-pachtmonat { font-weight: 600; }
  #flaechen td.c-flaeche, #flaechen td.c-pachtmonat { grid-column: 1; }
  #flaechen td.c-parz { grid-column: 2; text-align: center; }
  #flaechen td.c-anzahl, #flaechen td.c-pacht { grid-column: 3; text-align: right; }
  #flaechen td.c-flaeche, #flaechen td.c-parz, #flaechen td.c-anzahl { grid-row: 3; font-weight: 600; }
  #flaechen td.c-anteil { grid-column: 1 / -1; grid-row: 4; }
  #flaechen td.c-anteil .anteil { display: flex; } #flaechen td.c-anteil .anteil-balken { flex: 1; height: .5rem; }
  #flaechen td.c-pacht, #flaechen td.c-pachtmonat { grid-row: 5; }
  #flaechen tfoot tr { background: var(--akzent-hell); border-left-color: var(--text); }
  #flaechen tfoot td { border: 0; background: none; }
  .flaechen-kopf { flex-wrap: wrap; } .flaechen-kopf .knopf { width: 100%; text-align: center; }
}
@media print { #flaechen td { background: none !important; } .anteil-balken { display: none; } }

/* ---- Flächen: wiederholbare Zeilen im Formular (Lage im Kataster, Nutzung) */
.wh-bloecke { display: grid; gap: 1rem; padding: 0 1.1rem 1.1rem; }
.wiederholen { margin: 0; padding: .8rem .9rem .7rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--bg); min-width: 0; }
.wiederholen legend { padding: 0 .35rem; }
.wiederholen legend .bez { font-size: .88rem; color: var(--leise); font-weight: 600; }
.wiederholen.ungueltig { border-color: var(--fehler); }
.wh-einleitung { font-size: .78rem; margin: -.2rem 0 .5rem; }
.nutz-raster { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 9rem) 2rem; gap: .5rem; align-items: center; }
.nutz-raster .mit-einheit input { text-align: right; font-variant-numeric: tabular-nums; }
.wh-kopf { font-size: .78rem; color: var(--leise); margin: .2rem 0 .25rem; }
.wh-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.wh-weg { width: 2rem; height: 2rem; border-radius: 50%; text-decoration: none; color: var(--leise); }
.wh-weg:hover { color: var(--fehler); background: var(--fehler-bg); }
.wh-fuss { margin: .5rem 0 0; } .wh-fuss .link { text-decoration: none; font-weight: 600; }
.wh-summe { margin: .45rem 0 0; font-size: .84rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.wh-summe.zu-viel { color: var(--fehler); font-weight: 600; } .wh-summe.stimmt { color: var(--ok); font-weight: 600; }
.wh-hinweis { display: block; margin-top: .45rem; font-size: .78rem; }
.wiederholen .feldfehler { display: block; margin-top: .4rem; }
@media (max-width: 520px) {
  .wh-bloecke { padding: 0 .8rem .9rem; }
  /* Handy: Nutzung über die ganze Breite, Fläche darunter */
  .nutz-raster { grid-template-columns: minmax(0, 1fr) 2rem; }
  .wh-kopf.nutz-raster { display: none; }
  .wh-zeile.nutz-raster select { grid-column: 1; grid-row: 1; } .wh-zeile.nutz-raster .wh-weg { grid-column: 2; grid-row: 1; }
  .wh-zeile.nutz-raster .mit-einheit { grid-column: 1; grid-row: 2; max-width: 11rem; }
  .nutzungen .wh-liste { gap: .6rem; } .wh-zeile.nutz-raster { padding-bottom: .6rem; border-bottom: 1px dashed var(--rand); } .wh-zeile.nutz-raster:last-child { border-bottom: 0; padding-bottom: 0; }
}

/* Handy-Karten der Flächen: Zeilen nach Bezeichnung/Eigentümer */
@media (max-width: 640px) {
  #flaechen td.c-flaeche, #flaechen td.c-parz, #flaechen td.c-anzahl { grid-row: 2; }
  #flaechen td.c-anteil { grid-row: 3; } #flaechen td.c-anteil .anteil-balken { width: auto; }
  #flaechen td.c-pacht, #flaechen td.c-pachtmonat { grid-row: 4; }
}

/* Flächen: Aufteilung (Parzellenfläche + Nutzungen) ergibt nicht die Fläche – Markierung wie unvollständige Belege */
.aufteilung-offen { display: inline-block; margin-top: .2rem; padding: .05rem .4rem; border-radius: 4px; background: var(--pruef-bg); color: var(--pruef-text);
  border: 1px solid var(--pruef-rand); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.flaechentabelle td.c-flaeche .aufteilung-offen { display: table; margin-left: auto; }
@media (max-width: 640px) { #flaechen td.c-flaeche .aufteilung-offen { margin-left: 0; } }

/* ---- Verwaltung › Parzellen */
@media (min-width: 1000px) {
  .parzellenfilter .f-suche { flex: 1 1 14rem; } .parzellenfilter .f-anlage { flex: 0 1 14rem; min-width: 9rem; }
  .parzellenfilter .f-betrag { flex: 0 1 11rem; } .parzellenfilter .f-reihe { flex-basis: 10rem; }
}
.parzellen-kennzahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.parzellen-kennzahlen > div { background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .55rem .8rem; display: grid; gap: .1rem; }
.parzellen-kennzahlen .zahl-gross { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.parzellen-kennzahlen .bez { font-size: .8rem; color: var(--leise); }
.parzellentabelle td.c-nr a { font-weight: 700; font-variant-numeric: tabular-nums; }
.parzellentabelle tbody tr { position: relative; cursor: pointer; }
.parzellentabelle tbody td.c-nr a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.parzellentabelle tbody tr:hover td { background: var(--akzent-hell); }
.parzelle-form .formular-fuss { flex-wrap: wrap; }
.parzelle-ausblick { max-width: 46rem; margin-top: 1rem; border-style: dashed; background: transparent; }
.parzelle-ausblick h2 { margin: 0 0 .3rem; font-size: 1rem; color: var(--leise); } .parzelle-ausblick p { margin: 0; }
@media (max-width: 640px) {
  .parzellen-kennzahlen { gap: .4rem; } .parzellen-kennzahlen > div { padding: .45rem .55rem; } .parzellen-kennzahlen .zahl-gross { font-size: 1.02rem; }
  #parzellen, #parzellen tbody { display: block; border: 0; background: none; }
  #parzellen thead { display: none; }
  #parzellen tbody tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .1rem .8rem; padding: .65rem .85rem; margin-bottom: .5rem;
    border: 1px solid var(--rand); border-left: 5px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  #parzellen tbody tr:hover td { background: none; }
  #parzellen tbody td.c-nr a::after { border-radius: 10px; }
  #parzellen td { display: block; padding: 0; border: 0; background: none; text-align: left; }
  #parzellen td.c-nr { grid-row: 1 / 3; font-size: 1.35rem; min-width: 2.6rem; }
  #parzellen td.c-anlage { grid-column: 2; grid-row: 1; font-size: .88rem; color: var(--leise); }
  #parzellen td.c-groesse { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; }
  #parzellen td.c-anteil { grid-column: 3; grid-row: 2; text-align: right; font-size: .8rem; color: var(--leise); }
  #parzellen td.c-paechter { grid-column: 2; grid-row: 2; font-size: .9rem; }
}

/* ---- Startseite (Dashboard) */
.start-gruss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: .4rem 0 1.4rem; padding: 1.3rem 1.4rem;
  border-radius: 14px; background: linear-gradient(135deg, var(--akzent-hell), var(--fl) 70%); border: 1px solid var(--rand); }
.start-gruss h1 { margin: .15rem 0 .2rem; font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1.2; }
.start-datum { margin: 0; font-size: .85rem; color: var(--leise); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
.start-verein { margin: 0; color: var(--leise); }
.start-titel { font-size: 1.05rem; margin: 0 0 .6rem; } .start-titel small { font-weight: 400; color: var(--leise); font-size: .85rem; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.kachel { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon titel" "icon wert" "icon text"; column-gap: .85rem; row-gap: .1rem; align-items: center;
  padding: .95rem 1rem; border: 1px solid var(--rand); border-radius: 12px; background: var(--fl); color: var(--text); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
a.kachel:hover { border-color: var(--akzent); box-shadow: 0 6px 16px rgba(0,0,0,.07); transform: translateY(-1px); }
a.kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kachel-icon { grid-area: icon; align-self: start; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--akzent); color: var(--fl);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--akzent) 30%, transparent); }
.kachel-titel { grid-area: titel; font-size: .85rem; color: var(--leise); font-weight: 600; }
.kachel-wert { grid-area: wert; font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kachel-wert.negativ { color: var(--fehler); }
.kachel-text { grid-area: text; font-size: .82rem; color: var(--leise); }
.kachel-warnung { display: inline-block; padding: .05rem .4rem; border-radius: 4px; background: var(--pruef-bg); color: var(--pruef-text); border: 1px solid var(--pruef-rand); font-weight: 700; font-size: .76rem; }
.kacheln-bald .kachel { grid-template-areas: "icon titel" "icon text"; align-items: start; border-style: dashed; background: transparent; }
.kacheln-bald .kachel-icon { background: var(--akzent-hell); color: var(--akzent); box-shadow: none; }
.kacheln-bald .kachel-titel { color: var(--text); font-size: .95rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kacheln-bald .bald { color: var(--leise); }
@media (max-width: 640px) {
  .start-gruss { padding: 1rem; margin-top: 0; }
  .kacheln { grid-template-columns: 1fr 1fr; gap: .55rem; } .kachel { grid-template-columns: 1fr; grid-template-areas: "icon" "titel" "wert" "text"; padding: .75rem; row-gap: .2rem; }
  .kachel-icon { width: 2.2rem; height: 2.2rem; margin-bottom: .2rem; } .kachel-wert { font-size: 1.15rem; }
  .kacheln-bald .kachel { grid-template-areas: "icon" "titel" "text"; }
}

.kachel-titel .extern { vertical-align: -1px; margin-left: .15rem; }
.kachel .kachel-wert-text { font-size: .82rem; font-weight: 400; line-height: 1.4; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Startseite: kommende Bereiche als kleine Knöpfe, Beschreibung beim Darüberfahren bzw. Antippen */
.vorschau-knoepfe { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.vorschau-knopf { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .35rem; border: 1px dashed var(--rand);
  border-radius: 999px; background: var(--fl); color: var(--text); font-size: .84rem; cursor: help; }
.vorschau-knopf .kachel-icon { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); box-shadow: none; }
.vorschau-knopf .kachel-icon svg { width: 15px; height: 15px; }
.vorschau-knopf:hover, .vorschau-knopf:focus-visible { border-color: var(--akzent); border-style: solid; outline: none; }
.vorschau-tipp { position: absolute; left: 0; top: calc(100% + .45rem); z-index: 20; width: max-content; max-width: min(15rem, 80vw);
  padding: .45rem .6rem; border-radius: 8px; background: var(--text); color: var(--fl); font-size: .78rem; line-height: 1.35; text-align: left; white-space: normal;
  box-shadow: 0 6px 18px rgba(0,0,0,.18); display: none; pointer-events: none; }
.vorschau-tipp::before { content: ''; position: absolute; bottom: 100%; left: 1rem; border: 5px solid transparent; border-bottom-color: var(--text); }
.vorschau-tipp.rechts { left: auto; right: 0; } .vorschau-tipp.rechts::before { left: auto; right: 1rem; }
.vorschau-knopf:hover .vorschau-tipp, .vorschau-knopf:focus .vorschau-tipp { display: block; }

/* Parzellen: Abgleich je Anlage als kleine Knöpfe (Details beim Darüberfahren), umbrechend statt Scrollbalken */
.anlagen-abgleich { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.anlagen-abgleich li a { display: inline-flex; align-items: center; gap: .35rem; max-width: 15rem; padding: .18rem .6rem .18rem .25rem; border: 1px solid var(--rand); border-radius: 999px;
  background: var(--fl); color: var(--text); font-size: .78rem; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anlagen-abgleich li a:hover, .anlagen-abgleich li a:focus-visible { border-color: var(--akzent); }
.anlagen-abgleich .abgleich-zeichen { flex: none; display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; font-size: .72rem; font-weight: 700; }
.anlagen-abgleich li.ok .abgleich-zeichen { background: var(--akzent-hell); color: var(--ok); }
.anlagen-abgleich li.offen a { background: var(--pruef-zelle); border-color: var(--pruef-rand); color: var(--pruef-text); }
.anlagen-abgleich li.offen .abgleich-zeichen { background: var(--pruef-bg); color: var(--pruef-text); }

/* ---- Registerkarten mit Symbolen (Verein, Parzelle) */
.registerkarten .reiter-knopf { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.registerkarten .reiter-icon { flex: none; opacity: .8; } .registerkarten .reiter-knopf.aktiv .reiter-icon { opacity: 1; }
@media (max-width: 640px) {
  /* kompakt: nur die aktive Karte mit Text, die übrigen als Symbol – passt ohne Wischen */
  .registerkarten.kompakt { overflow: visible; justify-content: space-between; }
  .registerkarten.kompakt { gap: 0; min-width: 0; }
  .registerkarten.kompakt .reiter-knopf { padding: .5rem .45rem; gap: .3rem; min-width: 0; }
  .registerkarten.kompakt .reiter-knopf.aktiv { flex: 0 1 auto; overflow: hidden; } .registerkarten.kompakt .reiter-knopf.aktiv .reiter-text { overflow: hidden; text-overflow: ellipsis; }
  .registerkarten.kompakt .reiter-knopf:not(.aktiv) .reiter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .registerkarten.kompakt .reiter-icon { width: 19px; height: 19px; }
}
.parzelle-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem; margin-bottom: .4rem; }
.parzelle-kopf h1 { margin: 0; } .parzelle-kopf .anlage { color: var(--leise); }
.parzelle-reiter-inhalt { margin-top: 1rem; }
.parzelle-reiter-inhalt .platzhalter-text { padding: 1rem 1.1rem 1.2rem; margin: 0; }

/* Brücke zwischen Menüpunkt und Aufklappliste, damit das Untermenü beim Darüberfahren nicht zuklappt */
.untermenue-liste::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@media (max-width: 860px) { .untermenue-liste::before { content: none; } }
@media (min-width: 861px) { .kopf .bereich-gruppe:not(.aktiv):hover > .bereich-link, .kopf .bereich-gruppe:not(.aktiv):hover .bereich-pfeil { background: var(--nav-hover); } }

/* ---- Verwaltung › Personen */
@media (min-width: 1000px) {
  .personenfilter .f-suche { flex: 1 1 14rem; } .personenfilter .f-parzelle { flex: 0 1 13rem; min-width: 9rem; }
  .personenfilter .f-status, .personenfilter .f-komm { flex: 0 1 8.5rem; min-width: 7rem; } .personenfilter .f-typ { flex: 0 1 11rem; min-width: 8rem; } .personenfilter .f-reihe { flex-basis: 8.5rem; }
}
.personentabelle td.c-name a { font-weight: 700; }
.personentabelle .zweitzeile { display: block; color: var(--leise); font-size: .88rem; }
.personentabelle .kontakt-mail { display: block; overflow-wrap: anywhere; }
.personentabelle .komm-brief { display: inline-block; margin-top: .15rem; font-size: .76rem; padding: 0 .35rem; border: 1px solid var(--rand); border-radius: 4px; color: var(--leise); }
.parzellen-marke { display: inline-block; min-width: 2.6rem; text-align: center; padding: .05rem .45rem; border-radius: 6px; background: var(--akzent-hell); color: var(--akzent); font-weight: 700; font-variant-numeric: tabular-nums; }
.status-marke { display: inline-block; font-size: .72rem; font-weight: 700; padding: 0 .35rem; border-radius: 4px; background: var(--pruef-zelle); color: var(--pruef-text); border: 1px solid var(--pruef-rand); vertical-align: 1px; }
.personentabelle tr.status-ausgetreten td { color: var(--leise); } .personentabelle tr.status-ausgetreten .status-marke { background: var(--bg); color: var(--leise); border-color: var(--rand); }
.personentabelle tbody tr { position: relative; cursor: pointer; }
.personentabelle tbody td.c-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.personentabelle tbody tr:hover td { background: var(--akzent-hell); }
.personen-import { margin-top: 1.5rem; } .personen-import h2 { margin-top: 0; font-size: 1.05rem; }
.import-zeile { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .import-zeile input[type=file] { width: auto; flex: 1 1 16rem; }
.import-ergebnis details { margin-top: .4rem; } .import-ergebnis ul { margin: .3rem 0 0; padding-left: 1.2rem; max-height: 16rem; overflow: auto; font-size: .88rem; }
.abschnitt-felder.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } .abschnitt-felder.drei .feld.voll { grid-column: 1 / -1; }
.person-loeschen { margin-top: 1rem; }
.loeschsperre { font-size: .85rem; color: var(--leise); }
@media (max-width: 520px) { .abschnitt-felder.drei { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  #personen, #personen tbody { display: block; border: 0; background: none; }
  #personen thead { display: none; }
  #personen tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .7rem .85rem; margin-bottom: .5rem;
    border: 1px solid var(--rand); border-left: 5px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  #personen tbody tr.status-ausgetreten { border-left-color: var(--rand); }
  #personen tbody tr:hover td { background: none; }
  #personen tbody td.c-name a::after { border-radius: 10px; }
  #personen td { display: block; padding: 0; border: 0; background: none; }
  #personen td.c-name { grid-column: 1; grid-row: 1; font-size: 1.02rem; }
  #personen td.c-parzelle { grid-column: 2; grid-row: 1; text-align: right; }
  #personen td.c-parzelle .leise { display: none; }
  #personen td.c-anschrift { grid-column: 1 / -1; grid-row: 2; font-size: .88rem; color: var(--leise); }
  #personen td.c-anschrift .zweitzeile { display: inline; } #personen td.c-anschrift .zweitzeile::before { content: ', '; }
  #personen td.c-kontakt { grid-column: 1 / -1; grid-row: 3; font-size: .88rem; }
  #personen td.c-kontakt { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; }
  #personen td.c-kontakt .kontakt-mail, #personen td.c-kontakt .zweitzeile { display: inline; color: inherit; } #personen td.c-kontakt .komm-brief { margin-top: 0; }
  #personen td.c-eintritt { display: none; }
}

/* Parzelle/Person: Karten mit verknüpften Daten */
.parzelle-kopf .anlage a { color: inherit; }
.person-karte + .person-karte { margin-top: 1rem; }
.person-karte h2 a { color: inherit; }
.zuweisen { padding: 1rem 1.1rem 1.1rem; display: grid; gap: .8rem; }
.zuweisen p { margin: 0; }
.zuweisen-zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; } .zuweisen-zeile .feld { flex: 1 1 18rem; }

.typ-marke { display: inline-block; box-sizing: border-box; width: 10.5rem; text-align: center; overflow: hidden; text-overflow: ellipsis; padding: .05rem .5rem; border-radius: 99px; font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid var(--rand); background: var(--fl); }
.typ-marke.typ-mitglied { background: var(--akzent-hell); border-color: transparent; color: var(--akzent); }
.typ-marke.typ-foerder { border-style: dashed; color: var(--leise); }
.typ-marke.typ-bewerber { border-color: var(--akzent); border-style: dashed; color: var(--akzent); background: color-mix(in srgb, var(--akzent) 6%, var(--fl)); }
.typ-marke.typ-bewerber::before { content: ''; display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--akzent); margin-right: .35rem; vertical-align: .05rem; }
.typ-marke.typ-ehren { border-color: #c9a227; color: #8a6d0b; background: color-mix(in srgb, #c9a227 10%, var(--fl)); }
.typ-marke.typ-antrag { border-style: dotted; color: var(--text); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .typ-marke.typ-ehren { color: #e3c25a; } }
@media (max-width: 640px) {
  #personen td.c-typ { grid-column: 1 / -1; grid-row: 3; }
}

.person-bemerkung { grid-column: 1 / -1; }
.person-bemerkung textarea { width: 100%; min-height: 6rem; resize: vertical; font: inherit; padding: .45rem .55rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); color: var(--text); }
.bemerkung-marke { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--akzent-hell); color: var(--akzent); font-size: .75rem; vertical-align: 1px; cursor: help; position: relative; z-index: 2; }

/* Angemeldet bleiben: Häkchen beim Login, Geräteliste im Benutzerformular */
label.radio.merken { flex-wrap: wrap; align-items: flex-start; }
label.radio.merken input { margin-top: .2rem; }
label.radio.merken small { flex-basis: 100%; padding-left: 1.85rem; margin-top: .1rem; }
.geraeteliste { margin: .2rem 0 .6rem; padding-left: 1.2rem; }
.geraeteliste li { margin: .15rem 0; }

/* Benutzerliste: Klick irgendwo in die Zeile öffnet den Benutzer (Link über die ganze Zeile gezogen, wie bei Parzellen/Personen) */
.benutzertabelle tbody tr { position: relative; cursor: pointer; }
.benutzertabelle tbody td.c-name a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.benutzertabelle tbody tr:hover td { background: var(--akzent-hell); }

/* Nur Lesezugriff auf einen Bereich: Hinweis oben, Speichern/Neu/Löschen ausgeblendet, Eingaben gesperrt (nav.js) */
.nurlesen-hinweis { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; padding: .45rem .8rem; border-radius: var(--radius);
  background: var(--akzent-hell); color: var(--text); font-size: .9rem; }
main.nur-lesen form[method="post" i] :is(button, input[type=submit], .knopf.loeschen),
main.nur-lesen :is(button[form], a[href$="/neu"], a[href*="/neu?"], .nur-schreiben, .verein-speichern) { display: none !important; }
main.nur-lesen form[method="post" i] :is(input, select, textarea):disabled { background: var(--fl); color: var(--text); opacity: 1; }

/* Rechte: Matrix im Benutzerformular, Marken in der Benutzerliste */
.rechtetabelle { border-collapse: collapse; width: 100%; margin: .2rem 0 .4rem; }
.rechtetabelle th, .rechtetabelle td { padding: .4rem .5rem; border-bottom: 1px solid var(--rand); text-align: center; font-weight: normal; font-size: .9rem; }
.rechtetabelle th[scope=row] { text-align: left; font-weight: 600; }
.rechtetabelle thead th { color: var(--leise); font-size: .8rem; }
.rechte-wahl { display: inline-flex; padding: .3rem; cursor: pointer; }
.rechte-wahl input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }
.c-rechte { white-space: nowrap; }
.recht-marke { display: inline-flex; align-items: center; gap: .15rem; margin-right: .25rem; padding: .05rem .4rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--rand); }
.recht-marke.r2 { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.recht-marke.r1 { background: var(--akzent-hell); color: var(--text); }
.recht-marke.r0 { color: var(--leise); text-decoration: line-through; }
.recht-zeichen { font-size: .72rem; font-weight: 400; }

/* PDF-Beleg je Buchung */
.belegdatei { margin-top: 1rem; }
.belegdatei h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .6rem; font-size: 1.05rem; }
.beleg-datei { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; }
.beleg-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; margin: 0 0 .5rem; }
.beleg-form label { display: grid; gap: .25rem; flex: 1 1 16rem; }
.beleg-form input[type=file], .beleg-upload input[type=file] { padding: .35rem; border: 1px dashed var(--rand); border-radius: var(--radius); background: var(--fl); max-width: 100%; }
.gefahr-link { border: 0; background: none; padding: 0; color: var(--fehler); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9rem; }
.pdf-marke { display: inline-flex; vertical-align: -2px; margin-left: .15rem; color: var(--akzent); }
.pdf-marke:hover { color: var(--text); }

/* Belegnummer bei neuer Buchung: Vorschau, von Hand änderbar nach Hinweis */
.belegnummer { margin: 0 0 1rem; padding: .6rem .8rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--akzent-hell); }
.belegnummer .bez { display: block; font-size: .85rem; color: var(--leise); margin-bottom: .2rem; }
.belegnummer-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.belegnummer-wert { display: inline-flex; align-items: center; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.belegnummer-wert input { width: 4.2rem; font: inherit; padding: .1rem .3rem; border: 1px solid transparent; background: transparent; color: var(--text); }
.belegnummer-wert input[readonly] { cursor: default; outline: none; padding-left: 0; }
.belegnummer.manuell { background: var(--warn-bg); }
.belegnummer.manuell .belegnummer-wert input { border-color: var(--rand); background: var(--fl); border-radius: 6px; }
.belegnummer-warnung { margin: .6rem 0 0; }

/* Startseite: Parzellen „verpachtet / gesamt“ */
.kachel-von { font-size: .7em; font-weight: 600; color: var(--leise); }

/* Funktionsträger (Verein) */
.funktionstraeger .ft-kopf { margin-bottom: .6rem; }
.funktionstraeger .ft-kopf h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.ft-tabelle select { width: 100%; min-width: 12rem; }
.ft-tabelle td { vertical-align: middle; }
.ft-tabelle .ft-aktion { width: 1%; white-space: nowrap; text-align: right; }
.ft-tabelle .ft-aktion .knopf-klein { margin-left: .25rem; text-decoration: none; }
@media (max-width: 640px) {
  .ft-tabelle thead { display: none; }
  .ft-tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: .35rem .5rem; padding: .5rem 0; border-bottom: 1px solid var(--rand); }
  .ft-tabelle td { border: 0; padding: 0; }
  .ft-tabelle td[data-bez="Person"] { grid-column: 1; }
  .ft-tabelle td[data-bez="Funktion"] { grid-column: 1; grid-row: 2; }
  .ft-tabelle .ft-aktion { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .ft-tabelle select { min-width: 0; }
}
.funktionstraeger .formular-fuss { margin-top: .8rem; }
/* Funktionsträger: Personensuche mit Trefferliste */
.ft-rahmen { border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); }
.ft-tabelle { margin: 0; }
.ft-suche { position: relative; }
.ft-suche-feld { width: 100%; min-width: 12rem; }
.ft-treffer { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none;
  max-height: 16rem; overflow-y: auto; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.ft-treffer li { padding: .4rem .7rem; cursor: pointer; }
.ft-treffer li[aria-selected="true"], .ft-treffer li[role=option]:hover { background: var(--akzent-hell); }
.ft-treffer .ft-keine { color: var(--leise); cursor: default; font-size: .9rem; }
@media (max-width: 640px) { .ft-suche-feld { min-width: 0; } }

/* Parzelle/Person: Kopf mit Rücksprung-Knopf rechts (wie bei den Belegen) */
.kopf-mit-zurueck { align-items: flex-start; }
.kopf-mit-zurueck .parzelle-kopf { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.kopf-mit-zurueck .knopfleiste { flex: 0 0 auto; }
/* Schmale Formulare (Benutzer, Sachkonto): Kopf mit Rücksprung so breit wie die Karte */
.schmal-kopf { max-width: 460px; margin: 1.5rem auto .6rem; }
.schmal-kopf + .karte.schmal { margin-top: 0; }

/* Beleg-Upload (Einstellungen) */
.ablagefeld { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 1.6rem 1rem; border: 2px dashed var(--rand); border-radius: var(--radius);
  background: var(--fl); color: var(--akzent); text-align: center; cursor: pointer; }
.ablagefeld:hover, .ablagefeld.ziehen { border-color: var(--akzent); background: var(--akzent-hell); }
.ablagefeld input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ablage-text { color: var(--text); } .ablage-auswahl { font-size: .88rem; color: var(--leise); }
.nur-js[hidden] { display: none; }
.upload-ergebnis { margin-top: 1rem; } .upload-ergebnis h2 { margin: 0 0 .4rem; font-size: 1.05rem; }
.upload-marke { display: inline-block; padding: .05rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--akzent-hell); }
.upload-verknuepft .upload-marke, .upload-ersetzt .upload-marke { background: var(--akzent); color: var(--akzent-text); }
.upload-uebersprungen .upload-marke { background: var(--warn-bg); color: var(--text); }
.upload-fehler .upload-marke { background: var(--fehler); color: #fff; }

/* Personen: archivieren statt löschen */
.person-loeschen { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
.person-loeschen form { margin: 0; }
.personentabelle tr.status-archiviert td { color: var(--leise); font-style: italic; }
.personentabelle tr.status-archiviert .status-marke { background: var(--bg); color: var(--leise); border-color: var(--rand); }
.archiv-hinweis { margin: 0 0 .8rem; padding: .45rem .8rem; border-radius: var(--radius); background: var(--warn-bg); font-size: .9rem; }

/* Startseite: Kacheln „In Vorbereitung“ genauso groß wie die aktiven Kacheln (gleiches Raster, gleiche Höhe;
   lange Beschreibungen werden gekürzt, vollständig beim Darüberfahren) */
.kacheln .kachel { box-sizing: border-box; height: 6.5rem; overflow: hidden; }
.kacheln-bald .kachel { color: var(--text); cursor: default; }
.kacheln-bald .kachel-text { line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
@media (max-width: 640px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kacheln .kachel { height: 9.8rem; }
  .kacheln-bald .kachel-text { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* „bald“ als Ecke oben rechts (nimmt keine Zeile weg); Titel wie bei den aktiven Kacheln */
.kacheln-bald .kachel { position: relative; }
.kacheln-bald .kachel-titel { font-size: .9rem; padding-right: 2.6rem; }
.kacheln-bald .kachel-titel .bald { position: absolute; top: .55rem; right: .55rem; }
@media (max-width: 640px) {
  .kacheln-bald .kachel-titel { padding-right: 0; font-size: .85rem; line-height: 1.25; }
  .kacheln-bald .kachel-text { -webkit-line-clamp: 2; line-clamp: 2; font-size: .78rem; }
}
.sicherung-nur-db { margin-top: 1rem; } .schmal-links > h2:first-child { margin-top: 0; }

/* Als App vom Home-Bildschirm (Vollbild): Statusleiste liegt über dem farbigen Kopf (#810823), Inhalt bleibt in den sicheren Bereichen */
html { background: linear-gradient(var(--nav-bg) 50%, var(--bg) 50%); }   /* Überscrollen: oben Kopffarbe, unten Seitenfarbe */
body { min-height: 100vh; }
@media (display-mode: standalone) {
  body { -webkit-tap-highlight-color: transparent; }
  main { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
@media print { html { background: #fff; } }

/* Kontoauszüge: Original-PDF je Auszug */
.c-auszugpdf { white-space: nowrap; min-width: 7.5rem; }
.c-auszugpdf .pdf-link { display: flex; align-items: center; gap: .25rem; margin-bottom: .35rem; }
.auszug-pdf-form { display: inline-flex; align-items: center; gap: .3rem; margin: 0; vertical-align: middle; }
.auszug-pdf-wahl { position: relative; overflow: hidden; cursor: pointer; }
.auszug-pdf-wahl input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.auszug-pdf-senden[hidden] { display: none; }

/* Flächen: Pacht pro Jahr (berechnet) im Formular */
.pacht-jahr { display: block; padding: .45rem 0; font-weight: 700; font-variant-numeric: tabular-nums; }

/* =====================================================================
   Tools › Wertermittlung (die übrigen Regeln – Assistent, Summen, Blatt, PDF-Vorschau, #bewertungsliste – stammen aus „Wertermittlung“ und stehen oben)
   ===================================================================== */
.zeilen-link tbody tr { position: relative; cursor: pointer; }
.zeilen-link tbody td a.zeilen-ziel::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.zeilen-link tbody tr:hover td { background: var(--akzent-hell); }
.we-zaehler { display: flex; flex-wrap: wrap; gap: .4rem; margin: .25rem 0 .75rem; }
.we-zaehler a.marke-status { text-decoration: none; color: inherit; min-width: 0; }
.we-zaehler a.marke-status[aria-current] { outline: 2px solid var(--akzent); outline-offset: 1px; }
.we-aktionen { margin-top: -.25rem; }
.we-import pre { white-space: pre-wrap; font-size: .85rem; background: var(--bg); padding: .6rem .8rem; border-radius: var(--radius); border: 1px solid var(--rand); }
.kv-liste { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; margin: 0; grid-column: 1 / -1; }
.kv-liste dt { color: var(--leise); } .kv-liste dd { margin: 0; }

/* Seiten in Arbeit (z. B. Korrespondenz) */
.in-arbeit { max-width: 560px; margin: 2rem auto; text-align: center; padding: 2rem 1.5rem; }
.in-arbeit-symbol { color: var(--akzent); opacity: .8; }
.in-arbeit h2 { margin: .6rem 0 .4rem; }

/* Umschalten Parzelle ↔ Pächter (gleiche Registerkarte in der anderen Sicht) */
.knopf.umschalten { display: inline-flex; align-items: center; gap: .4rem; border-color: var(--akzent); color: var(--akzent); }
.knopf.umschalten svg { flex: 0 0 auto; }

/* Deaktivierte Registerkarte (z. B. Versicherungen ohne Parzelle) */
.reiter-knopf.aus { color: var(--leise); opacity: .5; cursor: not-allowed; }
.registerkarten .reiter-knopf.aus { display: inline-flex; }
.reiter-knopf.aus:hover { background: none; }
/* Pachtvertrag bestätigen, Pächterwechsel */
.bestaetigung { display: flex; gap: .5rem; align-items: flex-start; padding: .6rem .8rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--warn-bg); }
.bestaetigung input { margin-top: .2rem; }
.bestaetigung[aria-invalid="true"] { border-color: var(--fehler); }
.parzelle-fest { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.wechsel-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
/* Pächterwechsel */
.paechterwechsel-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 1.2rem 0 .6rem; }
.schmal-breit { max-width: 760px; }
.zuweisen-zeile .bestaetigung { flex: 1 1 100%; }

/* Interesse an einem Garten (Bewerber & Warteliste) in der Mitgliedschaft */
/* Bewerber: Filter und „Neuen Bewerber anlegen“ */
@media (min-width: 1000px) {
  .bewerberfilter .f-suche { flex: 1 1 14rem; min-width: 8rem; } .bewerberfilter .f-typ { flex: 0 1 11rem; min-width: 8rem; }
  .bewerberfilter .f-wartezeit { flex: 0 1 10rem; min-width: 7.5rem; } .bewerberfilter .f-reihe { flex: 0 1 9rem; min-width: 7rem; }
}
.parzellen-kennzahlen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .parzellen-kennzahlen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bewerber-neu-knopf { margin: 0; padding: 1rem 1.1rem 1.1rem; }
.such-zeile { display: flex; gap: .5rem; } .such-zeile input { flex: 1 1 auto; }
.bewerber-treffer { border: 0; padding: 0; margin: 0; display: grid; gap: .45rem; }
.bewerber-treffer .radio { display: flex; gap: .55rem; align-items: baseline; padding: .45rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius); }
.bewerber-treffer .radio.aus { opacity: .55; }
.bewerber-treffer[aria-invalid="true"] .radio { border-color: var(--fehler); }
.schmal-breit + .schmal-breit { margin-top: 1rem; }

.typ-marke.legende-marke { width: auto; font-size: .72rem; padding: 0 .45rem; }
.voll-zeile { grid-column: 1 / -1; }

/* Datenseiten: Anzeige (main.datenansicht) – Felder wie Text, Speichern/Löschen erst nach „Bearbeiten“ */
.bearbeiten-knopf { display: inline-flex; align-items: center; gap: .4rem; }
main.datenansicht form[method="post" i]:not(.immer-aktiv) :is(button, input[type=submit]),
main.datenansicht :is(button[form], .verein-speichern > .knopf, .verein-speichern > button, .formular-fuss, .loeschen-zeile, .person-loeschen, .nur-schreiben, input[type=file]) { display: none !important; }
main.datenansicht form[method="post" i]:not(.immer-aktiv) :is(input, select, textarea):disabled,
main.datenansicht :is(input, select, textarea)[form]:disabled {
  /* dezente Kontur, damit die Felder auch in der Anzeige erkennbar bleiben */
  background: color-mix(in srgb, var(--bg) 45%, var(--fl)); border-color: var(--rand); border-style: solid; border-width: 1px; color: var(--text); opacity: 1; box-shadow: none; cursor: default;
  -webkit-text-fill-color: var(--text); appearance: none; -webkit-appearance: none; resize: none;
}
main.datenansicht select:disabled { background-image: none; }
main.datenansicht :is(input, textarea):disabled::placeholder { color: var(--leise); opacity: 1; }
main.datenansicht input[type=checkbox]:disabled, main.datenansicht input[type=radio]:disabled { appearance: auto !important; -webkit-appearance: auto !important; opacity: .8; width: auto; }
main.datenansicht .verein-speichern { position: static; box-shadow: none; background: transparent; border-color: transparent; padding-left: 0; }
main.datenansicht .mit-einheit { border-color: var(--rand); background: color-mix(in srgb, var(--bg) 45%, var(--fl)); }
main.datenansicht .mit-einheit :is(input, select):disabled { border-color: transparent; background: transparent; }
main.datenansicht .pflicht, main.datenansicht .feld .hinweis { display: none; }
main.datenbearbeitung .seitenkopf .bearbeiten-ende { border-color: var(--warn); }
/* Passwortfelder ergeben in der Ansicht keinen Sinn */
main.datenansicht .feld:has(input[type=password]) { display: none; }
/* Eingabehilfen, Abbrechen-Links im Formular und Lösch-Hinweise erst im Bearbeiten-Modus */
main.datenansicht form[method="post" i]:not(.immer-aktiv) :is(small.hinweis, a.knopf),
main.datenansicht form[method="post" i]:not(.immer-aktiv):is(:has(.gefahr), :has(.loeschsperre)) { display: none; }
/* Über die App */
.ueber-kopf { display: flex; gap: 1.1rem; align-items: center; max-width: 760px; margin-bottom: 1rem; }
.ueber-kopf img { border-radius: 14px; flex: none; }
.ueber-kopf h2 { margin: 0 0 .2rem; }
.ueber-kopf p { margin: .15rem 0; }
.changelog { max-width: 760px; }
.changelog h2 { margin-top: 0; }
.changelog-version { border-top: 1px solid var(--rand); padding: .8rem 0 .3rem; }
.changelog-version h3 { margin: 0 0 .35rem; font-size: 1rem; display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.changelog-nr { font-variant-numeric: tabular-nums; }
.changelog-datum { color: var(--leise); font-weight: 400; font-size: .92rem; }
.marke-aktuell { font-size: .75rem; font-weight: 600; padding: .1rem .5rem; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); }
.changelog ul { margin: 0; padding-left: 1.2rem; }
.changelog li { margin: .2rem 0; line-height: 1.45; }
.ueber-autor { font-size: .92rem; }
/* Bereiche innerhalb einer Registerkarte (z. B. Tools › Wertermittlung: Grunddaten | Kataloge) */
.unterreiter { display: flex; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.unterreiter a { padding: .3rem .85rem; border: 1px solid var(--rand); border-radius: 999px; text-decoration: none; color: var(--text); background: var(--fl); font-size: .93rem; }
.unterreiter a:hover { border-color: var(--akzent); }
.unterreiter a.aktiv { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); font-weight: 600; }
/* „Speichern“ oben rechts (Bearbeiten-Modus) */
.kopf-speichern { display: inline-flex; align-items: center; gap: .4rem; }
/* Datenseiten: Seitenkopf (Titel + Knöpfe) bleibt beim Scrollen unter der Kopfzeile stehen */
main:is(.datenansicht, .datenbearbeitung) .seitenkopf { position: sticky; top: var(--kopf-hoehe, 0px); z-index: 30; background: var(--bg);
  margin-top: -.6rem; margin-bottom: .45rem; padding: .6rem 0 .35rem; box-shadow: 0 1px 0 transparent; transition: box-shadow .15s; }
main:is(.datenansicht, .datenbearbeitung) .seitenkopf.klebt { box-shadow: 0 6px 10px -8px rgba(0,0,0,.25); }
@media print { main .seitenkopf { position: static !important; box-shadow: none !important; } }
/* Kopf-Knöpfe mit Symbol: Symbol + Text, auf dem Smartphone nur das Symbol (Text als Tooltip/Beschriftung) */
.knopf:has(> svg), button:has(> svg) { display: inline-flex; align-items: center; gap: .4rem; }
.knopf > svg, button > svg { flex: 0 0 auto; }
@media (max-width: 640px) {
  :is(.seitenkopf, .assistent-kopf, .zeilenkopf) .knopfleiste { flex-wrap: wrap; justify-content: flex-end; gap: .4rem; margin-left: auto; }
  :is(.seitenkopf, .assistent-kopf, .zeilenkopf) .knopfleiste :is(a.knopf, button) { white-space: nowrap; }
  .assistent-kopf { flex-wrap: nowrap; align-items: center; gap: .6rem; }
  .assistent-kopf h1 { font-size: 1.2rem; }
  .assistent-kopf .knopfleiste { flex-wrap: nowrap; }
  :is(.seitenkopf, .assistent-kopf, .zeilenkopf) :is(a.knopf, button):has(> svg) > .knopf-text { display: none; }
  :is(.seitenkopf, .assistent-kopf, .zeilenkopf) :is(a.knopf, button):has(> svg) { padding: .5rem .6rem; min-width: 2.4rem; justify-content: center; }
  :is(.seitenkopf, .assistent-kopf, .zeilenkopf) :is(a.knopf, button) > svg { width: 18px; height: 18px; }
}
/* Wertermittlung (Assistent): Leiste mit Speichern, Vorschau, Abschließen bleibt oben angeheftet */
.assistent-kopf { position: sticky; top: var(--kopf-hoehe, 0px); z-index: 30; background: var(--bg); padding: .5rem 0; margin-top: -.5rem; }
.assistent-kopf.klebt { box-shadow: 0 6px 10px -8px rgba(0,0,0,.25); }
@media print { .assistent-kopf { position: static !important; } }
/* Bewerber & Warteliste: auf dem Smartphone als Karten (wie Personen und Parzellen) */
.nur-mobil { display: none; }
@media (max-width: 640px) {
  #warteliste, #warteliste tbody { display: block; border: 0; background: none; }
  #warteliste thead { display: none; }
  #warteliste tbody tr { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .1rem .8rem; padding: .65rem .85rem; margin-bottom: .5rem;
    border: 1px solid var(--rand); border-left: 5px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  #warteliste tbody tr:hover td { background: none; }
  #warteliste tbody td a.zeilen-ziel::after { border-radius: 10px; }
  #warteliste td { display: block; padding: 0; border: 0; background: none; text-align: left; }
  #warteliste td.c-platz { grid-column: 1; grid-row: 1 / 4; align-self: center; font-size: 1.35rem; font-weight: 700; min-width: 2.2rem; text-align: center; color: var(--akzent); }
  #warteliste td.c-name { grid-column: 2; grid-row: 1; font-size: 1.02rem; font-weight: 700; }
  #warteliste td.c-name a { text-decoration: none; }
  #warteliste td.c-wartezeit { grid-column: 3; grid-row: 1; text-align: right; font-weight: 700; white-space: nowrap; }
  #warteliste td.c-anschrift { grid-column: 2 / -1; grid-row: 2; font-size: .88rem; color: var(--leise); }
  #warteliste td.c-anschrift:empty { display: none; }
  #warteliste td.c-seit { grid-column: 2; grid-row: 3; font-size: .85rem; color: var(--leise); }
  #warteliste td.c-notiz { grid-column: 2 / -1; grid-row: 4; font-size: .8rem; color: var(--leise); }
  #warteliste td.c-notiz:has(> .leise:only-child) { display: none; }
  #warteliste .nur-mobil { display: inline; }
  .tabellenrahmen:has(> #warteliste) { overflow: visible; }
}
.changelog-unterversion { font-size: .78rem; font-variant-numeric: tabular-nums; color: var(--leise); padding-top: .12rem; }
.changelog ul.mit-version { list-style: none; padding-left: 0; }
.changelog ul.mit-version li { display: grid; grid-template-columns: 3rem 1fr; gap: .3rem; }
/* Smartphone: Unterleiste nur mit Symbolen, der aktive Punkt zusätzlich mit Namen – kein seitliches Scrollen */
@media (max-width: 640px) {
  .unternav-titel { display: none; }   /* Bereichssymbol entfällt, der aktive Punkt nennt die Seite */
  .unternav-liste { gap: .1rem; padding-right: 4px; mask-image: none; -webkit-mask-image: none; }
  .kopf a.unternav-eintrag:not([aria-current="page"]) { padding: .42rem .36rem; gap: 0; }
  .kopf a.unternav-eintrag[aria-current="page"] { padding: .42rem .75rem; font-size: .92rem; }
  .unternav-eintrag:not([aria-current="page"]) .unternav-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* nur für Vorlesehilfen */
}
/* „Neu“-Einträge der Unterleiste (Neue Buchung, Neue Wertermittlung) ganz rechts */
@media (min-width: 641px) {
  .unternav-liste { flex: 1 1 auto; }
  .kopf a.unternav-eintrag.hervor { margin-left: auto; }
}
.knopfleiste .knopf-zuletzt { order: 99; }
/* Immer bedienbare Formulare (z. B. Beleg-PDF hochladen) auch in der Anzeige mit Dateiauswahl */
main.datenansicht form.immer-aktiv input[type=file] { display: block !important; }
/* Protokoll („Änderungen an dieser Buchung“, Einstellungen › Protokoll): auf dem Smartphone als Karten */
@media (max-width: 640px) {
  .tabelle.protokoll-karten, .tabelle.protokoll-karten tbody { display: block; border: 0; background: none; }
  .tabelle.protokoll-karten thead { display: none; }
  .tabelle.protokoll-karten tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; padding: .6rem .8rem; margin-bottom: .5rem;
    border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
  .tabelle.protokoll-karten td { display: block; padding: 0; border: 0; background: none; min-width: 0; }
  .tabelle.protokoll-karten td.c-zeit { grid-column: 1; grid-row: 1; font-size: .82rem; color: var(--leise); }
  .tabelle.protokoll-karten td.c-beleg { grid-column: 2; grid-row: 1; text-align: right; font-size: .85rem; }
  .tabelle.protokoll-karten td.c-aktion { grid-column: 1 / -1; grid-row: 2; font-weight: 700; }
  .tabelle.protokoll-karten td.c-benutzer { grid-column: 1 / -1; grid-row: 3; font-size: .88rem; color: var(--leise); }
  .tabelle.protokoll-karten td.c-details { grid-column: 1 / -1; grid-row: 4; margin-top: .2rem; }
  .tabelle.protokoll-karten td.c-details code { display: block; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: .78rem;
    background: color-mix(in srgb, var(--bg) 60%, var(--fl)); border-radius: 6px; padding: .35rem .5rem; max-width: 100%; }
  .tabelle.protokoll-karten td.c-details:has(code:empty) { display: none; }
  .tabellenrahmen:has(> .protokoll-karten) { overflow: visible; }
}
/* ================================================================ Debitoren */
.seitenkopf-zusatz { font-weight: 400; color: var(--leise); font-size: .75em; margin-left: .3rem; }
.saldo-offen, .saldo-offen .zahl-gross { color: var(--fehler); }
.saldo-guthaben, .saldo-guthaben .zahl-gross { color: var(--ok); }
td.saldo-null { color: var(--leise); }
.kennzahl-link { display: grid; color: inherit; text-decoration: none; }
.kennzahl-link:hover .bez { text-decoration: underline; }
.parzellen-kennzahlen > div:has(> .kennzahl-link.aktiv) { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.kennzahl-link.aktiv .bez { color: var(--akzent); font-weight: 600; }
.debitorentabelle tr.archiviert td { color: var(--leise); }
.debitor-aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: .8rem; margin: 1rem 0; align-items: start; }
.debitor-aktion { padding: 0; }
.debitor-aktion > summary { cursor: pointer; padding: .8rem 1rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; list-style: none; color: var(--akzent); }
.debitor-aktion > summary::-webkit-details-marker { display: none; }
.debitor-aktion[open] > summary { border-bottom: 1px solid var(--rand); }
.debitor-aktion > form, .debitor-aktion > p { padding: .8rem 1rem; margin: 0; }
.kontoblatt tr.storniert td { color: var(--leise); }
.kontoblatt tr.storniert td.c-soll, .kontoblatt tr.storniert td.c-haben { text-decoration: line-through; }
.kontoblatt tr.zahlung td.c-art { color: var(--ok); }
.kontoblatt tfoot th { border-top: 2px solid var(--rand); }
.kontoblatt td.c-aktion { white-space: nowrap; }
.kontoblatt td.c-aktion form { display: inline; }
.storno-klein summary { list-style: none; cursor: pointer; }
.storno-klein summary::-webkit-details-marker { display: none; }
.storno-klein form { display: flex !important; gap: .3rem; margin-top: .3rem; }
.storno-klein input { width: 9rem; }
.zuordnungsliste { display: grid; gap: .6rem; }
.zuordnung { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: .5rem 1rem; align-items: end; padding: .75rem 1rem; }
.zuordnung.mit-fehler { border-color: var(--fehler); }
.zuordnung-beleg { display: grid; grid-template-columns: auto auto 1fr; gap: .15rem .7rem; align-items: baseline; }
.zuordnung-nr { font-weight: 700; }
.zuordnung-betrag { justify-self: end; font-weight: 700; font-variant-numeric: tabular-nums; }
.zuordnung-betrag.ein { color: var(--ok); }
.zuordnung-betrag.aus { color: var(--fehler); }
.zuordnung-text { grid-column: 1 / -1; font-size: .9rem; color: var(--leise); }
.zuordnung-eingabe { display: grid; grid-template-columns: minmax(0, 1fr) 7rem auto; gap: .5rem; align-items: end; }
.zuordnung > .fehler { grid-column: 1 / -1; margin: 0; }
.debitor-bewegungen, .debitor-zuordnungen { list-style: none; padding: 0; margin: .3rem 0 1rem; }
.debitor-bewegungen li, .debitor-zuordnungen li { display: flex; gap: .6rem; align-items: baseline; padding: .3rem 0; border-bottom: 1px solid var(--rand); }
.debitor-bewegungen li > span:nth-child(2) { flex: 1; min-width: 0; }
.debitor-zuordnungen li a { flex: 1; }
.debitor-bewegungen li.storniert { color: var(--leise); text-decoration: line-through; }
.debitor-bewegungen .zahl.haben { color: var(--ok); }
@media (max-width: 760px) {
  .zuordnung { grid-template-columns: 1fr; }
  .zuordnung-eingabe { grid-template-columns: 1fr 6.5rem; }
  .zuordnung-eingabe button { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  /* Debitorenliste und Kontoblatt als Karten */
  #debitoren, #debitoren tbody, .kontoblatt, .kontoblatt tbody, .kontoblatt tfoot { display: block; border: 0; background: none; }
  #debitoren thead, .kontoblatt thead { display: none; }
  #debitoren tbody tr, .kontoblatt tbody tr, .kontoblatt tfoot tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .6rem .85rem; margin-bottom: .5rem;
    border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
  #debitoren td, .kontoblatt td, .kontoblatt tfoot th { display: block; padding: 0; border: 0; background: none; text-align: left; }
  #debitoren td a.zeilen-ziel::after { border-radius: 10px; }
  #debitoren td.c-name { grid-column: 1; grid-row: 1; font-weight: 700; }
  #debitoren td.c-name a { text-decoration: none; }
  #debitoren td.c-saldo { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  #debitoren td.c-nr { grid-column: 1; grid-row: 2; font-size: .85rem; color: var(--leise); }
  #debitoren td.c-nr::before { content: "Debitor "; }
  #debitoren td.c-parzelle { grid-column: 2; grid-row: 2; text-align: right; font-size: .85rem; color: var(--leise); }
  #debitoren td.c-parzelle:not(:has(.leise))::before { content: "Parzelle "; }
  #debitoren td.c-parzelle:has(.leise) { visibility: hidden; }
  #debitoren td.c-soll, #debitoren td.c-haben { display: none; }
  .kontoblatt td.c-datum { grid-column: 1; grid-row: 1; font-size: .82rem; color: var(--leise); }
  .kontoblatt td.c-beleg { grid-column: 2; grid-row: 1; text-align: right; font-size: .85rem; }
  .kontoblatt td.c-art { grid-column: 1; grid-row: 2; font-weight: 700; }
  .kontoblatt td.c-soll, .kontoblatt td.c-haben { grid-column: 2; grid-row: 2; text-align: right; font-weight: 700; }
  .kontoblatt td.c-soll:empty, .kontoblatt td.c-haben:empty { display: none; }
  .kontoblatt td.c-haben::before { content: "− "; }
  .kontoblatt td.c-text { grid-column: 1 / -1; grid-row: 3; font-size: .9rem; }
  .kontoblatt td.c-saldo { grid-column: 1 / -1; grid-row: 4; font-size: .82rem; color: var(--leise); }
  .kontoblatt td.c-saldo::before { content: "Saldo danach: "; }
  .kontoblatt td.c-aktion { grid-column: 1 / -1; grid-row: 5; }
  .kontoblatt td.c-aktion:empty { display: none; }
  .kontoblatt tfoot tr { grid-template-columns: 1fr auto; }
  .kontoblatt tfoot th:first-child { grid-column: 1 / -1; }
  .kontoblatt tfoot th:empty { display: none; }
  .tabellenrahmen:has(> #debitoren), .tabellenrahmen:has(> .kontoblatt) { overflow: visible; }
}
/* ================================================================ Abrechnung, Rechnungen, Mahnungen, Zähler */
.jahreswahl .knopf { padding-left: .6rem; padding-right: .6rem; }
.lauf-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem; margin: 1rem 0 1.4rem; }
.lauf-karte { display: flex; flex-direction: column; gap: .3rem; }
.lauf-karte h2 { margin: 0; font-size: 1.1rem; }
.lauf-karte > p { margin: 0; }
.lauf-karte > p:last-child { margin-top: auto; padding-top: .5rem; }
.lauf-karte.erledigt { border-left: 5px solid var(--akzent); }
.lauf-status { font-size: .92rem; }
.lauf-status.ok { color: var(--ok); }
.lauf-karte .knopfleiste { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.lauf-karte form { display: inline; }
.lauf-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; padding: .9rem 1rem; margin: .8rem 0 1rem; }
.lauf-form .feld { min-width: 11rem; }
.debitor-aktion > form.lauf-form { margin: 0; }
.lauf-tabelle tbody.lauf-person { border-top: 2px solid var(--rand); }
.lauf-tabelle td.c-name { vertical-align: top; font-weight: 600; }
.lauf-tabelle td.c-nr { vertical-align: top; }
.lauf-tabelle tr.lauf-summe td { font-weight: 700; color: var(--leise); }
.saetze-gruppen { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: .8rem; margin: .8rem 0; align-items: start; }
.saetze-gruppe h2 { margin-top: 0; font-size: 1.05rem; }
.saetze-gruppe .satz-feld { margin-bottom: .7rem; }
.beitraege-karte { margin: .8rem 0; }
.beitraege-tabelle td { vertical-align: top; }
.beitraege-tabelle input, .beitraege-tabelle select { width: 100%; }
.beitraege-tabelle .c-bez { min-width: 14rem; }
.beitraege-tabelle .c-betrag { width: 11rem; }
.beitraege-tabelle .c-weg { width: 2.2rem; text-align: center; }
.beitraege-tabelle .zeile-weg { font-size: 1rem; padding: .35rem .4rem; }
main.datenansicht .beitraege-tabelle .c-weg { display: none; }
.zeile-neu-leiste { margin: .6rem 0 0; }
.beitraege-leer { margin: .4rem 0 0; }
.anfangsbestand-tabelle td { vertical-align: top; }
.anfangsbestand-tabelle .c-betrag { width: 12rem; }
.anfangsbestand-tabelle .c-bem { min-width: 14rem; }
.anfangsbestand-tabelle .c-bem input { width: 100%; }
.anfangsbestand-tabelle tr.mit-fehler input { border-color: var(--fehler); }
@media (max-width: 640px) {
  .anfangsbestand-tabelle thead { display: none; }
  .anfangsbestand-tabelle, .anfangsbestand-tabelle tbody { display: block; }
  .anfangsbestand-tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "nr name" "betrag betrag" "bem bem"; gap: .3rem .6rem; padding: .6rem .2rem; border-bottom: 1px solid var(--rand); }
  .anfangsbestand-tabelle td { display: block; padding: 0; border: 0; width: auto; min-width: 0; }
  .anfangsbestand-tabelle .c-nr { grid-area: nr; } .anfangsbestand-tabelle .c-name { grid-area: name; }
  .anfangsbestand-tabelle .c-betrag { grid-area: betrag; } .anfangsbestand-tabelle .c-bem { grid-area: bem; }
}
.beitraege-tabelle tr.mit-fehler input { border-color: var(--fehler, #b3261e); }
@media (max-width: 640px) {
  .beitraege-tabelle thead { display: none; }
  .beitraege-tabelle, .beitraege-tabelle tbody, .beitraege-tabelle tr, .beitraege-tabelle td { display: block; width: 100%; }
  .beitraege-tabelle tr { display: grid; grid-template-columns: minmax(0, 1fr) 5.2rem 2rem; grid-template-areas: "bez bez weg" "gruppe betrag betrag"; gap: .35rem; padding: .55rem 0; border-bottom: 1px solid var(--rand); }
  main.datenansicht .beitraege-tabelle tr { grid-template-areas: "bez bez bez" "gruppe betrag betrag"; }
  .beitraege-tabelle td { padding: 0; border: 0; }
  .beitraege-tabelle .c-bez { grid-area: bez; min-width: 0; }
  .beitraege-tabelle .c-gruppe { grid-area: gruppe; min-width: 0; }
  .beitraege-tabelle .c-betrag { grid-area: betrag; }
  .beitraege-tabelle .c-weg { grid-area: weg; width: auto; align-self: center; }
  .beitraege-tabelle .c-betrag { width: auto; }
}
.gruppen-badge { display: inline-block; font-size: .75rem; padding: .05rem .45rem; border-radius: 99px; border: 1px solid var(--rand); vertical-align: middle; margin-left: .3rem; }
.gruppen-badge.g-aktiv { background: color-mix(in srgb, #a10a2d 14%, transparent); border-color: color-mix(in srgb, #a10a2d 40%, transparent); }
.gruppen-badge.g-passiv { background: color-mix(in srgb, #1565c0 12%, transparent); border-color: color-mix(in srgb, #1565c0 35%, transparent); }
.gruppen-badge.g-foerder { background: color-mix(in srgb, #8e24aa 12%, transparent); border-color: color-mix(in srgb, #8e24aa 35%, transparent); }
.saetze-gruppe .satz-feld .hinweis { font-size: .8rem; }
.versand-leiste { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0 1rem; }
.versand-leiste form { display: inline; }
.zeilenkopf .versand-leiste { margin: 0; }
@media (max-width: 640px) { .zeilenkopf:has(.versand-leiste) { flex-wrap: wrap; } }
.rechnungstabelle tr.storniert td, .mahntabelle tr.status-frist td, .mahntabelle tr.status-ausgeschoepft td { color: var(--leise); }
.rechnungstabelle td.c-aktion, .mahntabelle td.c-wahl { white-space: nowrap; }
.rechnungstabelle td.c-aktion form { display: inline; margin-right: .4rem; }
.rechnungstabelle td.c-aktion details.storno-klein { display: inline-block; }
.mahntabelle td.c-wahl input { width: 1.1rem; height: 1.1rem; }
.zaehler-liste { display: grid; gap: .8rem; margin-bottom: 1rem; }
.zaehler { border: 1px solid var(--rand); border-radius: 10px; padding: .7rem .9rem; background: var(--fl); }
.zaehler.ausgebaut { opacity: .75; }
.zaehler > header { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; margin-bottom: .4rem; }
.zaehler-art { font-size: .75rem; font-weight: 700; padding: .1rem .55rem; border-radius: 999px; }
.zaehler-art.z-wasser { background: #e3f0fb; color: #1e5a8a; }
.zaehler-art.z-strom { background: #fff3d6; color: #8a5a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .zaehler-art.z-wasser { background: #1d3446; color: #9fcdf2; } :root:not([data-theme="light"]) .zaehler-art.z-strom { background: #3a3118; color: #f0c36a; } }
.zaehlerstaende { margin: .3rem 0 .6rem; }
.zaehlerstaende td.c-aktion form { display: inline; }
.zaehler-aktionen { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: end; }
.zaehler-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.zaehler-form .feld { min-width: 9rem; }
.zaehler-ausbau summary { cursor: pointer; list-style: none; padding: .4rem 0; }
.zaehler-ausbau summary::-webkit-details-marker { display: none; }
.zaehler-loeschen { margin-top: .4rem; }
.zaehler-neu > summary { list-style: none; display: inline-flex; cursor: pointer; }
.zaehler-neu > summary::-webkit-details-marker { display: none; }
.zaehler-neu[open] > form { margin-top: .8rem; }
.rechnungen-kurz li a { text-decoration: none; }
@media (max-width: 640px) {
  /* Vorschau eines Laufs: je Person eine Karte */
  .lauf-tabelle, .lauf-tabelle tbody, .lauf-tabelle tfoot { display: block; border: 0; }
  .lauf-tabelle thead { display: none; }
  .lauf-tabelle tbody.lauf-person { border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); margin-bottom: .5rem; padding: .5rem .8rem; }
  .lauf-tabelle tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .6rem; }
  .lauf-tabelle td, .lauf-tabelle tfoot th { display: block; border: 0; padding: .15rem 0; background: none; }
  .lauf-tabelle td.c-nr { display: none; }
  .lauf-tabelle td.c-name { grid-column: 1 / -1; font-size: 1rem; }
  .lauf-tabelle td.c-text { font-size: .88rem; }
  .lauf-tabelle tfoot tr { padding: .4rem .8rem; }
  /* Rechnungen als Karten */
  #rechnungen, #rechnungen tbody { display: block; border: 0; }
  #rechnungen thead { display: none; }
  #rechnungen tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .6rem .85rem; margin-bottom: .5rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
  #rechnungen td { display: block; border: 0; padding: 0; background: none; text-align: left; }
  #rechnungen td.c-name { grid-column: 1; grid-row: 1; font-weight: 700; }
  #rechnungen td.c-zahl { grid-column: 2; grid-row: 1; text-align: right; }
  #rechnungen td.c-nr { grid-column: 1; grid-row: 2; font-size: .85rem; }
  #rechnungen td.c-summe { display: none; }
  #rechnungen td.c-datum { grid-column: 1 / -1; grid-row: 3; font-size: .82rem; color: var(--leise); }
  #rechnungen td.c-versand { grid-column: 2; grid-row: 2; text-align: right; font-size: .82rem; }
  #rechnungen td.c-aktion { grid-column: 1 / -1; grid-row: 4; }
  #rechnungen td.c-aktion:empty { display: none; }
  /* Mahnvorschläge als Karten */
  #mahnkandidaten, #mahnkandidaten tbody { display: block; border: 0; }
  #mahnkandidaten thead { display: none; }
  #mahnkandidaten tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: .1rem .7rem; padding: .6rem .85rem; margin-bottom: .5rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); align-items: center; }
  #mahnkandidaten td { display: block; border: 0; padding: 0; background: none; text-align: left; }
  #mahnkandidaten td.c-wahl { grid-column: 1; grid-row: 1 / 4; }
  #mahnkandidaten td.c-name { grid-column: 2; grid-row: 1; font-weight: 700; }
  #mahnkandidaten td.c-betrag { grid-column: 3; grid-row: 1; text-align: right; }
  #mahnkandidaten td.c-nr { grid-column: 2; grid-row: 2; font-size: .82rem; }
  #mahnkandidaten td.c-stufe { grid-column: 3; grid-row: 2; text-align: right; font-size: .85rem; }
  #mahnkandidaten td.c-datum { grid-column: 2; grid-row: 3; font-size: .82rem; color: var(--leise); }
  #mahnkandidaten td.c-datum::before { content: "fällig seit "; }
  #mahnkandidaten td.c-letzte { grid-column: 2 / -1; grid-row: 4; font-size: .82rem; }
  .tabellenrahmen:has(> #rechnungen), .tabellenrahmen:has(> #mahnkandidaten), .tabellenrahmen:has(> .lauf-tabelle) { overflow: visible; }
  .zaehlerstaende th:nth-child(4), .zaehlerstaende td:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  #mahnungen, #mahnungen tbody { display: block; border: 0; }
  #mahnungen thead { display: none; }
  #mahnungen tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .1rem .8rem; padding: .55rem .8rem; margin-bottom: .5rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
  #mahnungen td { display: block; border: 0; padding: 0; background: none; text-align: left; }
  #mahnungen td.c-name { grid-column: 1; grid-row: 1; font-weight: 700; }
  #mahnungen td.c-betrag { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; }
  #mahnungen td.c-stufe { grid-column: 1; grid-row: 2; }
  #mahnungen td.c-gebuehr { grid-column: 2; grid-row: 2; text-align: right; font-size: .82rem; }
  #mahnungen td.c-gebuehr::before { content: "Gebühr "; color: var(--leise); }
  #mahnungen td.c-datum { grid-column: 1; grid-row: 3; font-size: .82rem; }
  #mahnungen td.c-frist { grid-column: 2; grid-row: 3; text-align: right; font-size: .82rem; color: var(--leise); }
  #mahnungen td.c-frist::before { content: "Frist "; }
  #mahnungen td.c-versand { grid-column: 1 / -1; grid-row: 4; font-size: .82rem; }
  #mahnungen td.c-aktion { grid-column: 1 / -1; grid-row: 5; }
  #mahnungen td.c-aktion:empty { display: none; }
  .tabellenrahmen:has(> #mahnungen) { overflow: visible; }
}
.saetze-jahr { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 .6rem; }
.saetze-jahr h2 { margin: 0; }
/* Abschnittsüberschrift mit Knöpfen rechts in derselben Zeile */
.zeilenkopf { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; margin: .4rem 0 .7rem; }
.zeilenkopf h2 { margin: 0; }
@media (max-width: 640px) { .zeilenkopf { flex-wrap: nowrap; align-items: flex-start; } .zeilenkopf h2 { font-size: 1.1rem; } }

/* ---- Auswertungen: Listen, Verbrauch; Einstellungen › Benutzer › Rechte */
.nurdruck { display: none; }
@media print {
  .nurdruck { display: block; margin: 0 0 .4rem; }
  .registerkarten, .filterklappe, .tabbar, .unternav-zeile { display: none !important; }
  .verbrauch-tabelle a { color: inherit; text-decoration: none; }
  .gruppen-badge { border: 0; padding: 0; background: none !important; }
}
.knopfleiste > .jahreswahl { display: inline-flex; gap: .4rem; }

.ablesedatum { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1rem; margin: .6rem 0 .8rem; }
.ablesedatum .feld { margin: 0; min-width: 11rem; }
.ablesedatum .hinweis { margin: 0; }
.zaehlerstaende-tabelle td, .muell-tabelle td, .verbrauch-tabelle td { vertical-align: top; }
.zaehlerstaende-tabelle .c-neu { width: 12rem; }
.zaehlerstaende-tabelle tr.mit-fehler input, .muell-tabelle tr.mit-fehler input { border-color: var(--fehler); }
.muell-tabelle .c-gefaess input { width: 100%; min-width: 12rem; }
@media (max-width: 640px) {
  .zaehlerstaende-tabelle thead, .muell-tabelle thead { display: none; }
  .zaehlerstaende-tabelle, .zaehlerstaende-tabelle tbody, .muell-tabelle, .muell-tabelle tbody { display: block; }
  .zaehlerstaende-tabelle tr, .muell-tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem .6rem; padding: .6rem .2rem; border-bottom: 1px solid var(--rand); }
  .zaehlerstaende-tabelle td, .muell-tabelle td { display: block; padding: 0; border: 0; width: auto; }
  .zaehlerstaende-tabelle .c-zaehler { grid-column: 1 / -1; }
  .zaehlerstaende-tabelle .c-letzter { grid-column: 1 / 3; text-align: left; }
  .zaehlerstaende-tabelle .c-neu { grid-column: 1 / -1; width: auto; }
  .muell-tabelle .c-gefaess { grid-column: 1 / -1; } .muell-tabelle .c-gefaess input { min-width: 0; }
  .verbrauch-tabelle thead { display: none; }
  .verbrauch-tabelle, .verbrauch-tabelle tbody, .verbrauch-tabelle tfoot { display: block; }
  .verbrauch-tabelle tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .2rem .5rem; padding: .55rem .2rem; border-bottom: 1px solid var(--rand); }
  .verbrauch-tabelle td, .verbrauch-tabelle th { display: block; padding: 0; border: 0; text-align: left; }
  .verbrauch-tabelle .c-parzelle { font-weight: 700; } .verbrauch-tabelle .c-name, .verbrauch-tabelle .c-fehlt { grid-column: span 2; }
  .verbrauch-tabelle .c-summe { font-weight: 700; }
  .verbrauch-tabelle tfoot tr { grid-template-columns: 1fr auto auto; }
  .verbrauch-tabelle tfoot th[colspan="2"] { display: none; }
}

.rechtebaum th, .rechtebaum td { vertical-align: middle; }
.rechtebaum .bereich-zeile th, .rechtebaum .bereich-zeile td { background: color-mix(in srgb, var(--akzent) 7%, transparent); }
.rechtebaum .bereich-zeile .c-seite { font-weight: 700; }
.rechtebaum .c-seite.t1 { padding-left: 1.4rem; font-weight: 400; }
.rechtebaum .baum-linie { color: var(--leise); }
.rechtebaum select { width: 100%; min-width: 7.5rem; }
.rechtebaum td.geerbt select { color: var(--leise); }
.rechtebaum td.r0:not(.geerbt) select { border-color: color-mix(in srgb, var(--fehler) 45%, var(--rand)); }
.rechtebaum td.r2:not(.geerbt) select { border-color: color-mix(in srgb, var(--ok) 55%, var(--rand)); }
.rechtebaum .c-admin { text-align: center; }
main.datenansicht .rechtebaum select:disabled { color: var(--text); }
main.datenansicht .rechtebaum td.geerbt select:disabled { color: var(--leise); }
@media (max-width: 640px) {
  .rechtebaum thead { display: none; }
  .rechtebaum, .rechtebaum tbody { display: block; }
  .rechtebaum tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .5rem; padding: .6rem .2rem; border-bottom: 1px solid var(--rand); }
  .rechtebaum th, .rechtebaum td { display: block; padding: 0; border: 0; }
  .rechtebaum .c-seite { grid-column: 1 / -1; }
  .rechtebaum td.c-recht::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--leise); }
  .rechtebaum .c-admin { display: none; }
  .rechtebaum select { min-width: 0; }
}
.gruppenwahl label.radio { display: flex; gap: .45rem; align-items: center; margin: .2rem 0; }

/* ---- Abrechnung: Vorschau einer Rechnung */
.rechnung-vorschau { padding-top: .9rem; }
.rv-kopf { display: flex; flex-wrap: wrap; gap: .4rem 2rem; align-items: baseline; margin: 0 0 .7rem; }
.rv-titel { font-size: 1.1rem; }
.rv-person { margin-left: auto; }
.rv-tabelle .rv-gruppe th { background: color-mix(in srgb, var(--rand) 55%, transparent); font-weight: 700; text-align: left; }
.rv-tabelle .c-offen { color: var(--leise); }
.rv-tabelle tr.rv-alt .c-offen { color: var(--fehler); font-weight: 600; }
.rv-tabelle tfoot th, .rv-tabelle tfoot td { border-top: 0; }
.rv-tabelle .rv-summe th { text-align: right; padding-top: .6rem; }
.rv-tabelle .rv-betrag { text-decoration: underline; text-underline-offset: 3px; }
.rv-tabelle .rv-zahlen th { text-align: right; font-size: 1.05rem; }
.hinweis-klappe { margin: 0 0 .8rem; } .hinweis-klappe > summary { cursor: pointer; list-style: none; } .hinweis-klappe > summary::-webkit-details-marker { display: none; }
.hinweisliste { margin: .4rem 0 0 1.2rem; padding: 0; font-size: .9rem; color: var(--leise); }
.rechnungslauf-karte { border-color: color-mix(in srgb, var(--akzent) 45%, var(--rand)); }
.rechnungslauf-karte h2 { margin-top: 0; }
form.inline { display: inline; }
@media (max-width: 640px) {
  .rv-person { margin-left: 0; }
  .rv-tabelle thead { display: none; }
  .rv-tabelle, .rv-tabelle tbody, .rv-tabelle tfoot { display: block; }
  .rv-tabelle tbody tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "text text text text" "menge preis . betrag" "offen offen offen offen"; gap: .1rem .4rem; padding: .45rem .2rem; border-bottom: 1px solid var(--rand); }
  .rv-tabelle tbody td, .rv-tabelle tbody th { display: block; padding: 0; border: 0; }
  .rv-tabelle tbody tr.rv-gruppe { display: block; padding: 0; } .rv-tabelle tbody tr.rv-gruppe th { padding: .35rem .3rem; }
  .rv-tabelle .c-text { grid-area: text; }
  .rv-tabelle .c-menge { grid-area: menge; } .rv-tabelle .c-preis { grid-area: preis; }
  .rv-tabelle .c-menge, .rv-tabelle .c-preis { font-size: .85rem; color: var(--leise); text-align: left; align-self: end; }
  .rv-tabelle .c-preis:not(:empty)::before { content: "× "; }
  .rv-tabelle .c-menge:empty, .rv-tabelle .c-preis:empty, .rv-tabelle .c-offen:empty { display: none; }
  .rv-tabelle .c-betrag { grid-area: betrag; font-weight: 600; }
  .rv-tabelle .c-offen { grid-area: offen; text-align: right; font-size: .85rem; }
  .rv-tabelle .c-offen::before { content: "offen: "; }
  .rv-tabelle tr.rv-alt td:empty { display: none; }
  .rv-tabelle tfoot tr { display: flex; justify-content: space-between; gap: .6rem; padding: .3rem .2rem; }
  .rv-tabelle tfoot th, .rv-tabelle tfoot td { display: block; padding: 0; text-align: left !important; }
  .rv-tabelle tfoot :is(th, td):empty { display: none; }
  .vorschau-tabelle thead { display: none; }
  .vorschau-tabelle, .vorschau-tabelle tbody, .vorschau-tabelle tfoot { display: block; }
  .vorschau-tabelle tbody tr { display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-areas: "name name name zahlen" "nr parz anz alt"; gap: .15rem .5rem; padding: .55rem .2rem; border-bottom: 1px solid var(--rand); }
  .vorschau-tabelle td, .vorschau-tabelle th { display: block; padding: 0; border: 0; text-align: left; }
  .vorschau-tabelle .c-name { grid-area: name; }
  .vorschau-tabelle .c-zahlen { grid-area: zahlen; text-align: right; }
  .vorschau-tabelle :is(.c-nr, .c-parzelle, .c-anzahl, .c-alt) { font-size: .85rem; color: var(--leise); }
  .vorschau-tabelle .c-nr { grid-area: nr; } .vorschau-tabelle .c-nr::before { content: "Debitor "; }
  .vorschau-tabelle .c-parzelle { grid-area: parz; } .vorschau-tabelle .c-parzelle::before { content: "· Parzelle "; } .vorschau-tabelle .c-parzelle:has(.leise) { display: none; }
  .vorschau-tabelle .c-anzahl { grid-area: anz; } .vorschau-tabelle .c-anzahl::before { content: "· "; } .vorschau-tabelle .c-anzahl::after { content: " Pos."; }
  .vorschau-tabelle .c-alt { grid-area: alt; text-align: right; } .vorschau-tabelle .c-alt:has(.leise) { display: none; }
  .vorschau-tabelle tbody .c-summe { display: none; }
  .vorschau-tabelle tfoot tr { display: grid; grid-template-columns: 1fr auto auto auto; gap: .5rem; padding: .5rem .2rem; }
}
.beitraege-tabelle .c-einheit { width: 12rem; }
@media (max-width: 640px) {
  .beitraege-tabelle.mit-einheit-spalte tr { grid-template-areas: "bez bez weg" "gruppe gruppe gruppe" "einheit betrag betrag"; grid-template-columns: minmax(0, 1fr) 5.2rem 2rem; }
  main.datenansicht .beitraege-tabelle.mit-einheit-spalte tr { grid-template-areas: "bez bez bez" "gruppe gruppe gruppe" "einheit betrag betrag"; }
  .beitraege-tabelle .c-einheit { grid-area: einheit; width: auto; min-width: 0; }
}

/* Benutzermenü: Einstellungen (nur Administratoren) */
.nutzer-abschnitt { display: flex; align-items: center; gap: .5rem; padding: .35rem .7rem .2rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); }
.nutzer-abschnitt .ic { width: 15px; height: 15px; }
.nutzer-liste .menue-eintrag.einstellung, .mobil-konto .menue-eintrag.einstellung { padding-left: 1.4rem; }
.nutzer-trenner { height: 1px; background: var(--rand); margin: .3rem 0; }
.nutzer.aktiv > summary { background: var(--nav-hover); }
.nutzer-liste { max-height: calc(100vh - 90px); overflow-y: auto; }
/* Rechnungspositionen: Mitgliedsbeiträge und weitere Positionen in einer Karte */
.positionen-teil + .positionen-teil { border-top: 1px solid var(--rand); margin-top: 1rem; padding-top: .9rem; }
.positionen-teil h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
/* Einstellungen › Benutzer und › Wertermittlung › Kataloge: auf dem Smartphone als Karten */
.marke-inaktiv { display: inline-block; font-size: .78rem; padding: 0 .45rem; border: 1px solid var(--rand); border-radius: 999px; color: var(--leise); }
@media (max-width: 640px) {
  .benutzertabelle, .benutzertabelle tbody, .katalogtabelle, .katalogtabelle tbody { display: block; border: 0; background: none; }
  .benutzertabelle thead, .katalogtabelle thead { display: none; }
  .benutzertabelle tbody tr, .katalogtabelle tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem; align-items: baseline;
    padding: .7rem .85rem; margin-bottom: .55rem; border: 1px solid var(--rand); border-left: 5px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  .benutzertabelle tbody tr.inaktiv { border-left-color: var(--rand); opacity: .8; }
  .benutzertabelle tbody tr:hover td { background: none; }
  .benutzertabelle tbody td.c-name a::after { border-radius: 10px; }
  .benutzertabelle td, .katalogtabelle td { display: block; padding: 0; border: 0; background: none; text-align: left; min-width: 0; }
  .benutzertabelle td[data-label]::before, .katalogtabelle td[data-label]::before { content: attr(data-label) ": "; color: var(--leise); font-size: .85rem; }
  .benutzertabelle td.leer-feld, .katalogtabelle td.leer-feld { display: none; }
  /* Benutzer */
  .benutzertabelle td.c-name { grid-column: 1; grid-row: 1; font-size: 1.05rem; font-weight: 700; }
  .benutzertabelle td.c-aktiv { grid-column: 2; grid-row: 1; text-align: right; }
  .benutzertabelle td.c-aktiv::before { content: none; }
  .benutzertabelle tr:not(.inaktiv) td.c-aktiv { display: none; }
  .benutzertabelle td.c-mail { grid-column: 1 / -1; font-size: .88rem; color: var(--leise); overflow-wrap: anywhere; }
  .benutzertabelle td.c-gruppen { grid-column: 1 / -1; font-size: .92rem; }
  .benutzertabelle td.c-rechte { grid-column: 1 / -1; margin: .15rem 0; }
  .benutzertabelle td.c-position { grid-column: 1 / -1; font-size: .9rem; }
  .benutzertabelle td.c-login { grid-column: 1; font-size: .85rem; }
  .benutzertabelle td.c-2fa { grid-column: 2; text-align: right; font-size: .85rem; }
  /* Kataloge */
  .katalogtabelle td.c-bez { grid-column: 1; grid-row: 1; font-size: 1.05rem; font-weight: 700; }
  .katalogtabelle td.c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .katalogtabelle .marke-katalog { display: inline-block; font-size: .78rem; padding: 0 .45rem; border: 1px solid var(--rand); border-radius: 999px; color: var(--leise); }
  .katalogtabelle .marke-katalog.aktiv { color: var(--ok); border-color: var(--ok); background: var(--akzent-hell); }
  .katalogtabelle td.c-ab, .katalogtabelle td.c-quelle, .katalogtabelle td.c-verwendet { grid-column: 1 / -1; font-size: .9rem; }
  .katalogtabelle td.aktionen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; padding-top: .5rem; border-top: 1px solid var(--rand); }
  .katalogtabelle td.aktionen form { margin: 0; }
}
/* Preise/Sätze des Jahres (Verbrauch › Wasser/Strom/Müllabfuhr, Verein › Versicherungen) */
.preise-karte { margin: .8rem 0; }
.preise-felder { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 1.2rem; }
.preise-karte .satz-feld .hinweis { font-size: .8rem; }
.abschnitt-titel { font-size: 1.05rem; margin: 1rem 0 .4rem; }
/* Inhalt einer Abschnittskarte (unter .abschnitt-kopf) mit dem üblichen Innenabstand */
.abschnitt-inhalt { padding: 1rem 1.1rem 1.1rem; }
.abschnitt-inhalt > :first-child { margin-top: 0; } .abschnitt-inhalt > :last-child { margin-bottom: 0; }
/* Registerkarte „Korrespondenz“ (Person/Parzelle): volle Breite, Unterregister E-Mails/Briefe, „+ Erstellen“ */
.korrespondenz-karte { max-width: none; }
.korr-kopf { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .8rem; border-bottom: 1px solid var(--rand); }
.korr-reiter { display: flex; gap: .2rem; }
.korr-reiter a { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; color: var(--leise); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 600; }
.korr-reiter a:hover { color: var(--text); }
.korr-reiter a.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.korr-zahl { font-size: .75rem; font-weight: 700; min-width: 1.4rem; text-align: center; padding: 0 .4rem; border-radius: 999px; background: var(--akzent-hell); color: var(--akzent); }
.korr-neu { margin: 0 0 1rem; }
.korr-neu > summary { display: inline-flex; align-items: center; gap: .4rem; list-style: none; cursor: pointer; }
.korr-neu > summary::-webkit-details-marker { display: none; }
.korr-neu[open] > summary { margin-bottom: .8rem; }
.korr-form { display: grid; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--rand); border-radius: 10px; background: color-mix(in srgb, var(--akzent-hell) 35%, var(--fl)); }
.korr-form h3 { margin: 0; font-size: 1rem; }
.korr-form textarea { width: 100%; min-height: 12rem; font: inherit; line-height: 1.45; resize: vertical; }
.korr-form .knopfleiste { margin: 0; }
.korr-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.korr-eintrag { border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
.korr-eintrag.s-fehler { border-left: 4px solid var(--fehler, #b3261e); }
.korr-eintrag summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .8rem; padding: .65rem .9rem; cursor: pointer; list-style: none; }
.korr-eintrag summary::-webkit-details-marker { display: none; }
.korr-betreff { font-weight: 600; overflow-wrap: anywhere; }
.korr-meta { grid-column: 1; font-size: .84rem; color: var(--leise); overflow-wrap: anywhere; }
.korr-status { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.korr-status.s-gesendet { background: var(--akzent-hell); color: var(--ok); border-color: var(--ok); }
.korr-status.s-fehler { background: #fde7e5; color: #8c1d18; border-color: #e7a59f; }
.korr-text { padding: .2rem .9rem .9rem; white-space: normal; overflow-wrap: anywhere; border-top: 1px solid var(--rand); padding-top: .7rem; }
.korr-eintrag .fehler { margin: .5rem .9rem 0; }
@media (max-width: 640px) {
  .korr-reiter { width: 100%; } .korr-reiter a { flex: 1; justify-content: center; padding: .5rem .4rem; }
  .korr-neu > summary { width: 100%; justify-content: center; }
}
.in-arbeit.volle-breite { max-width: none; margin: 1rem 0; }
/* Rechnungen › Positionen: eine Tabelle (Bezeichnung, Beschreibung, Aktiv in, Bezug, Einheit, Betrag, Rechnungsabschnitt) */
.positionen-tabelle .c-bez { min-width: 11rem; }
.positionen-tabelle .c-beschr { min-width: 11rem; }
.positionen-tabelle .c-aktiv { width: 10.5rem; }
.positionen-tabelle .c-bezug { width: 6.5rem; }
.positionen-tabelle .c-einheit { width: 9.5rem; }
.positionen-tabelle .c-betrag { width: 8rem; }
.positionen-tabelle .c-abschnitt { width: 11rem; }
.positionen-tabelle .haken { display: flex; align-items: center; gap: .35rem; font-size: .86rem; line-height: 1.25; margin: .05rem 0; white-space: nowrap; cursor: pointer; }
.positionen-tabelle .haken input { width: auto; margin: 0; }
.positionen-tabelle .pos-label { display: none; }
@media (max-width: 1100px) {
  .positionen-tabelle thead { display: none; }
  .positionen-tabelle, .positionen-tabelle tbody { display: block; width: 100%; }
  .positionen-tabelle tr { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2rem; gap: .45rem .7rem;
    grid-template-areas: "bez bez weg" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug einheit einheit" "betrag abschnitt abschnitt";
    padding: .75rem .8rem; margin-bottom: .6rem; border: 1px solid var(--rand); border-left: 4px solid var(--akzent); border-radius: 10px; background: var(--fl); }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez bez" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug einheit einheit" "betrag abschnitt abschnitt"; }
  .positionen-tabelle td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  .positionen-tabelle .c-bez { grid-area: bez; } .positionen-tabelle .c-beschr { grid-area: beschr; }
  .positionen-tabelle .c-aktiv { grid-area: aktiv; display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: center; }
  .positionen-tabelle .c-bezug { grid-area: bezug; display: flex; flex-wrap: wrap; gap: .2rem .9rem; align-items: center; }
  .positionen-tabelle .c-einheit { grid-area: einheit; } .positionen-tabelle .c-betrag { grid-area: betrag; } .positionen-tabelle .c-abschnitt { grid-area: abschnitt; }
  .positionen-tabelle .c-weg { grid-area: weg; align-self: start; }
  .positionen-tabelle .pos-label { display: block; flex-basis: 100%; font-size: .8rem; color: var(--leise); }
  .positionen-tabelle .c-bezug .pos-label { flex-basis: 100%; }
}
@media (max-width: 640px) {
  .positionen-tabelle tr { grid-template-columns: minmax(0, 1fr) 2rem; grid-template-areas: "bez weg" "beschr beschr" "aktiv aktiv" "bezug bezug" "einheit einheit" "betrag betrag" "abschnitt abschnitt"; }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez" "beschr beschr" "aktiv aktiv" "bezug bezug" "einheit einheit" "betrag betrag" "abschnitt abschnitt"; }
}
@media (max-width: 1100px) {
  .positionen-karte .tabellenrahmen { border: 0; background: none; overflow: visible; }
  .positionen-tabelle select, .positionen-tabelle .c-betrag .mit-einheit { width: 100%; }
}
/* Zahlungsziel und Mahnungen: Felder nebeneinander statt über die volle Breite */
.saetze-form .saetze-gruppen .saetze-gruppe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .2rem 1.2rem; align-items: start; }
.saetze-form .saetze-gruppen .saetze-gruppe > h2 { grid-column: 1 / -1; }
@media (max-width: 1100px) {
  .positionen-tabelle { border: 0 !important; background: none !important; box-shadow: none; }
  .positionen-tabelle .c-einheit > *, .positionen-tabelle .c-betrag > *, .positionen-tabelle .c-abschnitt > * { width: 100%; max-width: none; }
}
@media (max-width: 1100px) {
  .positionen-tabelle td.c-bez, .positionen-tabelle td.c-beschr, .positionen-tabelle td.c-aktiv, .positionen-tabelle td.c-bezug,
  .positionen-tabelle td.c-einheit, .positionen-tabelle td.c-betrag, .positionen-tabelle td.c-abschnitt { width: auto; min-width: 0; }
}
/* Zahlungsziel und Mahnungen: Zeile 1 Zahlungsziel + Frist, Zeile 2 die drei Mahngebühren */
.saetze-form .saetze-gruppen .saetze-gruppe.satz-allgemein { display: block; }
.satz-zeile { display: grid; gap: .2rem 1.2rem; align-items: start; }
.satz-zeile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.satz-zeile-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) { .satz-zeile-2, .satz-zeile-3 { grid-template-columns: minmax(0, 1fr); } }
/* Positionen: Abschnitt zwischen Bezug und Einheit (Karten) */
@media (max-width: 1100px) {
  .positionen-tabelle tr, main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez weg" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag"; }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez bez" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag"; }
}
@media (max-width: 640px) {
  .positionen-tabelle tr { grid-template-areas: "bez weg" "beschr beschr" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag"; }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez" "beschr beschr" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag"; }
}
/* Positionen-Übersicht: Beschreibung als Info-Knopf hinter der Bezeichnung (Tooltip bei Hover bzw. Fokus/Tippen) */
.bez-mit-info { display: flex; align-items: center; gap: .45rem; }
.bez-mit-info > input { flex: 1; min-width: 0; }
.info-knopf { position: relative; flex: none; display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1.5px solid var(--akzent); color: var(--akzent); font: 700 .78rem/1 Georgia, 'Times New Roman', serif; font-style: italic; cursor: help; background: var(--fl); }
.info-knopf.info-beispiel { width: 1.1rem; height: 1.1rem; font-size: .68rem; vertical-align: -.15rem; cursor: default; }
.info-knopf:hover, .info-knopf:focus-visible { background: var(--akzent); color: var(--akzent-text); outline: none; }
.info-knopf[data-tipp]:hover::after, .info-knopf[data-tipp]:focus::after {
  content: attr(data-tipp); position: absolute; z-index: 30; left: 50%; bottom: calc(100% + .5rem); transform: translateX(-50%);
  width: max-content; max-width: min(22rem, 80vw); padding: .5rem .7rem; border-radius: 8px; background: #272223; color: #fff;
  font: 400 .85rem/1.4 var(--schrift); font-style: normal; text-align: left; white-space: normal; box-shadow: 0 6px 18px rgba(0,0,0,.18); pointer-events: none; }
.info-knopf[data-tipp]:hover::before, .info-knopf[data-tipp]:focus::before {
  content: ''; position: absolute; z-index: 31; left: 50%; bottom: calc(100% + .1rem); transform: translateX(-50%); border: .4rem solid transparent; border-top-color: #272223; }
.positionen-uebersicht .c-bez { min-width: 17rem; }
@media (max-width: 1100px) {
  .positionen-uebersicht tr, main.datenansicht .positionen-uebersicht tr { grid-template-areas: "bez bez bez" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag"; }
  .info-knopf[data-tipp]:hover::after, .info-knopf[data-tipp]:focus::after { left: auto; right: -.4rem; transform: none; }
}
@media (max-width: 640px) {
  .positionen-uebersicht tr, main.datenansicht .positionen-uebersicht tr { grid-template-areas: "bez bez" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag"; }
}
/* Rechnung für Parzelle bzw. Person (Vorschau, Positionen) */
.bezug-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; vertical-align: .1em; white-space: nowrap; }
.bezug-badge.b-parzelle { background: #ebe8e9; color: #730720; border: 1px solid #cbc5c7; }
.bezug-badge.b-person { background: #e6eef8; color: #24466e; border: 1px solid #bcd0ea; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bezug-badge.b-parzelle { background: #2d2728; color: #cec9ca; border-color: #810824; } :root:not([data-theme="light"]) .bezug-badge.b-person { background: #1e2b3d; color: #b9d0f0; border-color: #33507a; } }
/* Positionen: „Was wird berechnet?“ je Rechnung für Parzelle bzw. Person, farbige Kennzeichnung der Zeilen */
.berechnet-karte h2 { margin-bottom: .6rem; }
.berechnet-spalten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.berechnet-spalte { padding: .75rem .9rem; border: 1px solid var(--rand); border-left: 5px solid #ab0b30; border-radius: 10px; background: var(--fl); }
.berechnet-spalte.b-person { border-left-color: #3d6ea8; }
.berechnet-spalte h3 { margin: 0 0 .5rem; font-size: .95rem; display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.berechnet-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.berechnet-liste li { display: flex; justify-content: space-between; gap: .8rem; padding: .3rem 0; border-bottom: 1px dashed var(--rand); font-size: .92rem; }
.berechnet-liste .bl-preis { white-space: nowrap; font-variant-numeric: tabular-nums; }
.berechnet-summe { margin: .5rem 0 0; font-size: .9rem; }
.berechnet-spalte .hinweis { margin: .4rem 0 0; }
/* Positionen „je Person“: ganze Zeile hellgrün hinterlegt, „je Parzelle“ unverändert */
.positionen-tabelle tr.b-person, .positionen-tabelle tr.b-person td { background: #f2f1f1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .positionen-tabelle tr.b-person, :root:not([data-theme="light"]) .positionen-tabelle tr.b-person td { background: #2a2526; } }
:root[data-theme="dark"] .positionen-tabelle tr.b-person, :root[data-theme="dark"] .positionen-tabelle tr.b-person td { background: #2a2526; }
@media (max-width: 760px) { .berechnet-spalten { grid-template-columns: minmax(0, 1fr); } }
.positionen-tabelle tr[hidden] { display: none !important; }
.berechnet-liste li { flex-wrap: wrap; } .berechnet-liste .bl-bez { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .berechnet-liste li { flex-direction: column; gap: .1rem; } .berechnet-liste .bl-preis { white-space: normal; } .berechnet-spalte { min-width: 0; } }
/* Positionen: Spalte „Optional“ */
.positionen-tabelle .c-optional { width: 6rem; }
.positionen-tabelle .c-optional .haken { white-space: nowrap; }
.positionen-tabelle td.c-optional .optional-text { display: none; }
@media (max-width: 1100px) {
  .positionen-tabelle td.c-optional { grid-area: optional; width: auto; }
  .positionen-tabelle td.c-optional .optional-text { display: inline; }
  .positionen-tabelle tr { grid-template-areas: "bez bez weg" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag" "optional optional optional"; }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez bez" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag" "optional optional optional"; }
  .positionen-uebersicht tr, main.datenansicht .positionen-uebersicht tr { grid-template-areas: "bez bez bez" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag" "optional optional optional"; }
}
@media (max-width: 640px) {
  .positionen-tabelle tr { grid-template-areas: "bez weg" "beschr beschr" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag" "optional optional"; }
  main.datenansicht .positionen-tabelle tr { grid-template-areas: "bez bez" "beschr beschr" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag" "optional optional"; }
  .positionen-uebersicht tr, main.datenansicht .positionen-uebersicht tr { grid-template-areas: "bez bez" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag" "optional optional"; }
}
/* Rechnungsvorschau: optionale Position hinzufügen */
.optional-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.optional-form .feld { margin: 0; min-width: 0; }
.optional-form .feld:first-of-type { flex: 1 1 18rem; }
.optional-form .feld-menge { flex: 0 1 9rem; }
.optional-form select { width: 100%; }

/* ---- Verwaltung › Gemeinschaftsarbeit (Stundenkonten) ---- */
.arbeit-hinweis { margin: 0 0 .8rem; }
.arbeit-erfassen h2, .arbeit-regeln h2, .arbeit-abschluss h2, .arbeit-soll h2 { margin-top: 0; }
.arbeit-form { display: grid; grid-template-columns: minmax(0, 2fr) 10rem minmax(0, 2fr) 8rem minmax(0, 1.5fr) auto; gap: .6rem .8rem; align-items: start; }
/* Fehlermeldungen unter den Feldern verschieben nichts: Felder oben ausgerichtet, Knopf auf Höhe der Eingabefelder */
.arbeit-form p.f-knopf { margin: 1.425rem 0 0; }
.arbeit-form .feld, .arbeit-soll-form .feld { margin: 0; min-width: 0; }
.arbeit-form select, .arbeit-form input { width: 100%; }
.arbeit-form .f-knopf, .arbeit-soll-form .knopfleiste { margin: 0; }
.arbeit-konto-form, .arbeit-soll-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.arbeit-soll-form .feld:first-of-type { flex: 0 1 9rem; } .arbeit-soll-form .f-grund { flex: 1 1 18rem; } .arbeit-soll-form input { width: 100%; }
.arbeit-tabelle .c-offen .marke-status { display: inline-block; min-width: 5.2em; text-align: center; font-variant-numeric: tabular-nums; }
.arbeit-tabelle .c-name .marke-status { margin-left: .3rem; }
.arbeit-unten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-top: 1rem; }
.arbeit-unten > .karte { margin: 0; }
.arbeit-regeln-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem 1rem; }
.arbeit-regeln-form .feld { margin: 0; }
.arbeit-satz { display: flex; flex-direction: column; gap: .2rem; }
.arbeit-satz .wert { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; padding: .45rem 0; }
.arbeit-regeln-form .staffel, .arbeit-regeln-form fieldset, .arbeit-regeln-form .knopfleiste { grid-column: 1 / -1; margin: 0; }
.arbeit-regeln-form .staffel { display: grid; gap: .35rem; }
.arbeit-regeln-form .staffel label { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.arbeit-regeln-form input.kurz { width: 4.5rem; text-align: right; }
.arbeit-regeln-form fieldset { border: 0; padding: 0; }
.arbeit-regeln-form fieldset .auswahl { display: flex; justify-content: flex-start; gap: .5rem; align-items: center; margin: .3rem 0; font-weight: 400; }
.arbeit-regeln-form fieldset .auswahl input { width: auto; flex: 0 0 auto; margin: 0; }
.arbeit-erfassen { margin-bottom: 1rem; }
.arbeit-abschluss-form { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; }
.arbeit-abschluss-form .feld, .arbeit-abschluss-form .knopfleiste { margin: 0; }
@media (max-width: 1100px) {
  .arbeit-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-flow: row dense; }   /* Datum und Stunden nebeneinander */
  .arbeit-form p.f-knopf { margin: 0; }
  .arbeit-form .f-person, .arbeit-form .f-taetigkeit, .arbeit-form .f-bemerkung { grid-column: 1 / -1; }
}
@media (max-width: 900px) { .arbeit-unten { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .arbeit-tabelle thead, .arbeit-eintraege thead { display: none; }
  .arbeit-tabelle, .arbeit-tabelle tbody, .arbeit-tabelle tfoot, .arbeit-eintraege, .arbeit-eintraege tbody, .arbeit-eintraege tfoot { display: block; }
  .arbeit-tabelle tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pz name alter" "soll gel offen" "betrag betrag betrag"; gap: .3rem .7rem; padding: .65rem .3rem; border-bottom: 1px solid var(--rand); }
  .arbeit-tabelle td, .arbeit-tabelle th { display: block; padding: 0; border: 0; width: auto; text-align: left; }
  .arbeit-tabelle .c-parzelle { grid-area: pz; font-weight: 700; } .arbeit-tabelle .c-name { grid-area: name; } .arbeit-tabelle .c-alter { grid-area: alter; }
  .arbeit-tabelle .c-soll { grid-area: soll; } .arbeit-tabelle .c-geleistet { grid-area: gel; } .arbeit-tabelle .c-offen { grid-area: offen; } .arbeit-tabelle .c-betrag { grid-area: betrag; text-align: right; }
  .arbeit-tabelle td.zahl::before, .arbeit-eintraege td.zahl::before { content: attr(data-label) ": "; color: var(--leise, #666); font-size: .85em; }
  .arbeit-tabelle td.c-betrag:empty { display: none; }
  .arbeit-tabelle tfoot { display: none; }   /* Summen stehen in den Kennzahlen oben */
  .arbeit-eintraege tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "datum taet weg" "std bem bem" "erf erf erf"; gap: .25rem .7rem; padding: .6rem .3rem; border-bottom: 1px solid var(--rand); }
  .arbeit-eintraege td, .arbeit-eintraege th { display: block; padding: 0; border: 0; width: auto; text-align: left; }
  .arbeit-eintraege .c-datum { grid-area: datum; } .arbeit-eintraege .c-taetigkeit { grid-area: taet; font-weight: 600; } .arbeit-eintraege .c-weg { grid-area: weg; }
  .arbeit-eintraege .c-stunden { grid-area: std; } .arbeit-eintraege .c-bemerkung { grid-area: bem; } .arbeit-eintraege .c-erfasst { grid-area: erf; }
  .arbeit-eintraege tfoot tr { grid-template-areas: "datum taet weg"; font-weight: 700; }
  .arbeit-form { grid-template-columns: minmax(0, 1fr); } .arbeit-form .feld { grid-column: 1 / -1; }
  .arbeit-regeln-form { grid-template-columns: minmax(0, 1fr); }
}
.arbeit-soll { margin-top: 1rem; }
/* Auswahl mit Filter (Gemeinschaftsarbeit › Mitglied) */
.such-auswahl { position: relative; }
.such-auswahl .bez { display: block; }
.such-auswahl .sa-eingabe { width: 100%; }
.sa-liste { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: .2rem 0 0; padding: .25rem 0; list-style: none; max-height: 18rem; overflow-y: auto;
  background: var(--fl); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); min-width: 16rem; }
.sa-liste li { padding: .45rem .75rem; cursor: pointer; display: flex; justify-content: space-between; gap: .6rem; }
.sa-liste li small { color: var(--warn); white-space: nowrap; }
.sa-liste li.aktiv, .sa-liste li[role=option]:hover { background: var(--akzent-hell); }
.sa-liste li.sa-leer { cursor: default; color: var(--leise, #666); }
.arbeit-erfassen { margin-top: 0; }
.sa-liste li[hidden], .sa-liste[hidden] { display: none; }
/* Gemeinschaftsarbeit: Vorschau geänderter Regeln */
.arbeit-tabelle.vorschau-aktiv td.c-soll, .arbeit-tabelle.vorschau-aktiv td.c-offen, .arbeit-tabelle.vorschau-aktiv td.c-betrag { background: var(--warn-bg); }
.regeln-vorschau { margin: 0 0 .6rem; }
.arbeit-tabelle .sortknopf { text-align: inherit; }
/* Rechnungsvorschau bearbeiten (Einzelfall), Freitext, Änderungsprotokoll */
.rv-bearbeiten-hinweis { margin: 0 0 .8rem; }
.rv-tabelle tr.rv-edit td { vertical-align: top; }
.rv-tabelle tr.rv-edit input { width: 100%; min-width: 0; }
.rv-tabelle tr.rv-edit .c-text input { margin-bottom: .2rem; }
.rv-tabelle tr.rv-edit .c-menge input { width: 6rem; text-align: right; }
.rv-tabelle tr.rv-edit .c-preis input { width: 7rem; text-align: right; }
.rv-tabelle tr.rv-edit .mit-einheit { display: inline-flex; gap: .3rem; align-items: center; justify-content: flex-end; }
.rv-tabelle tr.rv-edit .c-betrag { padding-top: .6rem; }
.rv-tabelle tr.rv-edit .c-aktion { white-space: nowrap; text-align: right; }
.rv-tabelle tr.rv-edit .c-aktion .knopf-klein { margin-left: .2rem; }
.rv-tabelle tr.ist-angepasst, .rv-tabelle tr.ist-angepasst td { background: var(--warn-bg); }
.rv-tabelle tr.rv-edit .c-text .leise { display: block; }
.rv-geloescht { margin-top: 1rem; }
.rv-geloescht h3 { font-size: 1rem; margin: 0 0 .4rem; }
.rv-geloescht ul { list-style: none; margin: 0; padding: 0; }
.rv-geloescht li { display: flex; justify-content: space-between; align-items: center; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid var(--rand); }
.rv-geloescht li span { text-decoration: line-through; color: var(--leise, #666); }
.rv-geloescht form { margin: 0; }
.rv-freitext { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rand); white-space: normal; }
.rv-freitext-form { margin-top: 1rem; }
.rv-freitext-form textarea { width: 100%; }
.rv-freitext-form .knopfleiste { margin: .4rem 0 0; }
.rv-protokoll { margin-top: 1rem; }
.rv-protokoll summary { cursor: pointer; display: flex; align-items: baseline; gap: .6rem; list-style: none; }
.rv-protokoll summary::-webkit-details-marker { display: none; }
.rv-protokoll summary h2 { margin: 0; font-size: 1.1rem; }
.rv-protokoll summary::before { content: "▸"; color: var(--leise, #666); }
.rv-protokoll[open] summary::before { content: "▾"; }
.rv-protokoll-liste { list-style: none; margin: .6rem 0 0; padding: 0; }
.rv-protokoll-liste li { display: grid; grid-template-columns: 8.5rem auto minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: baseline; padding: .4rem 0; border-bottom: 1px solid var(--rand); }
.rv-protokoll-liste .marke-status { min-width: 7rem; font-size: .8rem; }
.rv-p-geloescht { background: var(--fehler-bg, #fbe9e9); } .rv-p-geaendert { background: var(--warn-bg); } .rv-p-hinzugefuegt { background: var(--akzent-hell); }
@media (max-width: 760px) {
  .rv-protokoll-liste li { grid-template-columns: auto minmax(0, 1fr); }
  .rv-protokoll-liste .rv-p-text { grid-column: 1 / -1; }
  .rv-tabelle tr.rv-edit .c-menge input, .rv-tabelle tr.rv-edit .c-preis input { width: 100%; }
}
@media (max-width: 760px) {
  .rv-tabelle tbody tr.rv-edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text text" "menge preis" "betrag betrag" "aktion aktion"; gap: .45rem .6rem; padding: .7rem .2rem; }
  .rv-tabelle tr.rv-edit .c-menge, .rv-tabelle tr.rv-edit .c-preis { font-size: 1rem; color: inherit; align-self: start; }
  .rv-tabelle tr.rv-edit .c-preis::before { content: none; }
  .rv-tabelle tr.rv-edit .c-menge::before, .rv-tabelle tr.rv-edit .c-preis::after { display: none; }
  .rv-tabelle tr.rv-edit .c-preis { display: flex; align-items: center; gap: .3rem; }
  .rv-tabelle tr.rv-edit .c-preis input { flex: 1 1 auto; }
  .rv-tabelle tr.rv-edit .c-preis::after { content: "€"; display: inline; }
  .rv-tabelle tr.rv-edit .mit-einheit { display: flex; width: 100%; }
  .rv-tabelle tr.rv-edit .mit-einheit input { flex: 1 1 auto; }
  .rv-tabelle tr.rv-edit .c-betrag { align-self: center; padding-top: 0; text-align: right; }
  .rv-tabelle tr.rv-edit .c-aktion { grid-area: aktion; display: flex; justify-content: flex-end; gap: .3rem; }
}
/* Rechnungsvorschau › „+ Position“ (freie Position) */
.rv-frei { margin-top: .8rem; }
.rv-frei > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.rv-frei > summary::-webkit-details-marker { display: none; }
.rv-frei[open] > summary { margin-bottom: .6rem; }
.rv-frei-form { display: grid; grid-template-columns: minmax(0, 3fr) 6rem 9rem 8rem 7rem auto; gap: .5rem .7rem; align-items: start; padding: .8rem; border: 1px dashed var(--rand); border-radius: var(--radius); }
.rv-frei-form .feld { margin: 0; min-width: 0; }
.rv-frei-form input, .rv-frei-form select { width: 100%; }
.rv-frei-form .f-menge input, .rv-frei-form .f-preis input { text-align: right; }
.rv-frei-form .rv-frei-summe { display: block; padding: .5rem 0; font-weight: 600; text-align: right; }
.rv-frei-form p.f-knopf { margin: 1.425rem 0 0; }
.rv-frei-form .f-hinweis { grid-column: 1 / -1; margin: 0; }
@media (max-width: 900px) {
  .rv-frei-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rv-frei-form .f-text { grid-column: 1 / -1; }
  .rv-frei-form p.f-knopf { margin: 0; align-self: end; }
}

/* ---- Verbrauch: Wasser/Strom (Hauptzähler, Tarife, Parzellenzähler), Zählerstände, Müllabfuhr ---- */
.verbrauch-abschnitt { margin-top: 1rem; }
.verbrauch-abschnitt > h2 { margin-top: 0; }
.verbrauch-abschnitt .tabellenrahmen { margin: 0; }
.hauptzaehler-form h2, .zaehler-stamm-form h2 { margin-top: 0; }
.hauptzaehler-form .knopfleiste, .zaehler-stamm-form .knopfleiste { margin: 1rem 0 0; }
.feld .wert { padding: .45rem 0; }
.loeschen-form { margin: .4rem 0 0; text-align: right; }
tr.ist-ausgebaut td { color: var(--leise); }
tr.ist-gewaehlt td { background: var(--akzent-hell); }
.tarif-zeit { display: block; white-space: nowrap; font-size: .92em; }
.tarif-tabelle td.c-titel strong { white-space: nowrap; }
.tarif-form { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.tarif-form h3 { margin: 0 0 .6rem; font-size: 1rem; }
.tarif-form .knopfleiste { margin: .8rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tarif-form .raster { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.hauptzaehler-tabelle .c-diff .marke-status, .tarif-tabelle .marke-status { min-width: 0; }
.zwischen-auswahl { display: inline-flex; align-items: flex-start; gap: .45rem; font-weight: 400; }
.zwischen-auswahl input { margin-top: .2rem; }
.ablesedatum { display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; align-items: end; }
.ablesedatum .hinweis { flex-basis: 100%; margin: 0; }
/* Umschalter Zählerart (Symbol Wasser / Strom) im Filter */
.art-umschalter { display: grid; gap: .15rem; }
.umschalter { display: inline-flex; border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; background: var(--fl); }
.umschalter-knopf { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .7rem; color: inherit; text-decoration: none; border-right: 1px solid var(--rand); }
.umschalter-knopf:last-child { border-right: 0; }
.umschalter-knopf.aktiv { background: var(--akzent); color: var(--akzent-text); }
.umschalter-knopf.z-wasser:not(.aktiv) svg { color: #2f6fb0; } .umschalter-knopf.z-strom:not(.aktiv) svg { color: #b8860b; }
.zaehler-art svg { vertical-align: -2px; margin-right: .2rem; }
/* Müll: „+ Gefäß“ */
.muell-neu { margin: 0 0 1rem; padding: .8rem; }
.muell-neu > summary { list-style: none; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; }
.muell-neu > summary::-webkit-details-marker { display: none; }
.muell-neu[open] > summary { margin-bottom: .7rem; }
.muell-neu-form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) 5.5rem minmax(0, 1.3fr) 10rem auto; gap: .5rem .7rem; align-items: start; }
.muell-neu-form .feld { margin: 0; min-width: 0; }
.muell-neu-form input, .muell-neu-form select { width: 100%; }
.muell-neu-form p.f-knopf { margin: 1.425rem 0 0; }
.muell-tabelle.ist-bearbeiten input, .muell-tabelle.ist-bearbeiten select, .muell-arten-tabelle.ist-bearbeiten input:not([type=checkbox]) { width: 100%; min-width: 0; }
.muell-tabelle input.kurz, .muell-arten-tabelle input.kurz { width: 4.5rem; text-align: right; }
.muell-arten-tabelle .mit-einheit { display: inline-flex; align-items: center; gap: .3rem; }
.muell-arten-tabelle .neue-zeile td { background: color-mix(in srgb, var(--akzent-hell) 50%, transparent); }
@media (max-width: 1000px) {
  .muell-neu-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .muell-neu-form .f-parzelle { grid-column: 1 / -1; }
  .muell-neu-form p.f-knopf { margin: 0; align-self: end; }
}
/* Tabellen als Karten auf dem Smartphone (erste Zelle .c-titel als Überschrift, übrige mit Beschriftung) */
@media (max-width: 760px) {
  .karten-mobil thead { display: none; }
  .karten-mobil, .karten-mobil tbody, .karten-mobil tfoot { display: block; width: 100%; }
  .karten-mobil tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .3rem .8rem; padding: .7rem .3rem; border-bottom: 1px solid var(--rand); }
  .karten-mobil td, .karten-mobil th { display: block; padding: 0; border: 0; text-align: left; min-width: 0; }
  .karten-mobil td.c-titel { grid-column: 1 / -1; font-weight: 700; }
  .karten-mobil td.c-aktion { grid-column: 1 / -1; text-align: right; }
  .karten-mobil td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--leise); }
  .karten-mobil td:empty { display: none; }
  .karten-mobil td.zahl, .karten-mobil th.zahl { text-align: left; }
  .karten-mobil .tarif-zeit { white-space: normal; }
  .karten-mobil td .leise.klein { display: inline-block; overflow-wrap: anywhere; }
  .ablesedatum { display: grid; }
  .umschalter-knopf span { display: none; }
  .umschalter-knopf.aktiv span { display: inline; }
  .muell-neu-form { grid-template-columns: minmax(0, 1fr); } .muell-neu-form .feld { grid-column: 1 / -1; }
}
.muell-tabelle .auswahl, .muell-arten-tabelle .auswahl { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; }
.muell-kacheln { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
@media (max-width: 760px) { .muell-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.verbrauch-abschnitt .tabellenrahmen { max-width: 100%; overflow-x: auto; }
.tarif-tabelle td .leise.klein, .hauptzaehler-tabelle td .leise.klein { display: inline-block; white-space: normal; max-width: 13rem; line-height: 1.3; }
.tarif-tabelle td.zahl { white-space: nowrap; }
.tarif-tabelle { font-size: .92rem; }
.tarif-tabelle th { white-space: normal; vertical-align: bottom; }
.tarif-tabelle .tarif-aendern { display: inline-block; margin-top: .35rem; }
.zaehlerstaende-tabelle .c-datum { width: 10.5rem; }
.zaehlerstaende-tabelle .c-datum input { width: 100%; }
@media (max-width: 640px) {
  .zaehlerstaende-tabelle .c-datum { grid-column: 1 / -1; width: auto; }
  .zaehlerstaende-tabelle .c-datum::before { content: "Ablesedatum (leer = oben)"; display: block; font-size: .75rem; color: var(--leise); }
}
/* Zählerstände: Vorjahresstand (Anfangsstand beim Start der Ablesungen) */
.zaehlerstaende-tabelle .c-vorjahr { width: 11rem; }
.vorjahr-hinweis { color: var(--warn); background: var(--warn-bg); border-radius: var(--radius); padding: .55rem .8rem; margin: .4rem 0 .8rem; }
@media (max-width: 640px) {
  .zaehlerstaende-tabelle .c-vorjahr { grid-column: 1 / -1; width: auto; text-align: left; }
  .zaehlerstaende-tabelle .c-vorjahr::before { content: "Vorjahresstand"; display: block; font-size: .75rem; color: var(--leise); }
}
@media (max-width: 640px) {
  .zaehlerstaende-tabelle .c-neu::before { content: "Neuer Stand"; display: block; font-size: .75rem; color: var(--leise); }
}
/* Rechnungsvorschau: Menge, Preis, Betrag mittig zur mehrzeiligen Beschreibung (Zähler: ZNr. / Zählerstände / Typ) */
.rv-tabelle tbody tr:not(.rv-edit) td { vertical-align: middle; }
.rv-tabelle tr.rv-edit .c-text textarea { width: 100%; min-width: 0; resize: vertical; font: inherit; margin-bottom: .2rem; }
/* Zählerstände: Verbrauch im Jahr (statt Ablesedatum je Zähler) */
.zaehlerstaende-tabelle .c-verbrauch { white-space: nowrap; }
@media (max-width: 640px) {
  .zaehlerstaende-tabelle .c-verbrauch { grid-column: 1 / -1; text-align: left; white-space: normal; }
  .zaehlerstaende-tabelle .c-verbrauch::before { content: "Verbrauch"; display: block; font-size: .75rem; color: var(--leise); }
}

/* Zählerstände: Haken „Zähler läuft rückwärts“ unter dem neuen Stand */
.zaehlerstaende-tabelle .rueck-auswahl { display: flex; align-items: center; gap: .35rem; margin-top: .3rem; justify-content: flex-end; white-space: nowrap; font-weight: normal; }
.zaehlerstaende-tabelle .rueck-auswahl input { margin: 0; }

/* Zählerstände: vier Kennzahlen auch auf dem Handy in einer Reihe */
@media (max-width: 640px) {
  .parzellen-kennzahlen.vier.eine-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; }
  .parzellen-kennzahlen.eine-reihe > div { padding: .4rem .4rem; }
  .parzellen-kennzahlen.eine-reihe .bez { font-size: .7rem; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
}

/* Zählerart-Umschalter (alle / Wasser / Strom) im Filter nicht abschneiden – .f-art der Kontobewegungen ist schmaler */
.journalfilter .f-art.art-umschalter { flex: 0 0 auto; min-width: max-content; }

/* Verbrauchsfilter (Zählerstände, Wasser/Strom): Suche breit, Auswahlfelder begrenzt – lange Hauptzähler-/Anlagennamen
   dürfen die Zeile nicht sprengen (sonst ragt der Filter über den Rand) */
@media (min-width: 1000px) {
  .verbrauchsfilter { flex-wrap: wrap; }
  .verbrauchsfilter .f-suche { flex: 3 1 16rem; min-width: 11rem; }
  .verbrauchsfilter .f-anlage, .verbrauchsfilter .f-haupt { flex: 1 1 10rem; min-width: 7rem; max-width: 14rem; }
  .verbrauchsfilter .f-status { flex: 0 1 9rem; min-width: 7rem; }
  .verbrauchsfilter select { text-overflow: ellipsis; }
}
@media (min-width: 641px) and (max-width: 999px) {
  .verbrauchsfilter .f-suche { flex-basis: 100%; }
  .verbrauchsfilter select { min-width: 0; text-overflow: ellipsis; }
}
.verbrauchsfilter label { min-width: 0; }

/* Untermenüs der beiden letzten Bereiche rechtsbündig aufklappen, damit sie bei mittlerer Breite nicht über den Rand ragen */
@media (min-width: 861px) {
  .hauptnav > .bereich-gruppe:nth-last-child(-n+2) .untermenue-liste { left: auto; right: 0; }
}

/* Kopfleiste bei mittlerer Breite: nichts über den Rand (Benutzermenü rechts bleibt sichtbar) */
@media (min-width: 861px) and (max-width: 1279px) {
  .kopf-innen { gap: .5rem; } .kopf .marke { margin-right: 0; }
  .kopf .menue-eintrag { padding: .5rem .45rem; gap: .35rem; }
  .nutzer-name { display: none; }
  .hauptnav .menue-eintrag > svg.ic, .hauptnav .summary-zeile > svg.ic { display: none; }
  .hauptnav { min-width: 0; gap: .1rem; }
}
@media (min-width: 861px) and (max-width: 1023px) {
  .marke-text { display: none; }
  .kopf .menue-eintrag { padding: .45rem .35rem; font-size: .92rem; }
  .kopf .bereich-pfeil { padding-left: .15rem; padding-right: .15rem; }
}

/* Zählerstände: Kacheln mit Anzahl je Zählerart (Wasser/Strom) */
.art-anzahlen { display: flex; flex-wrap: wrap; gap: .25rem .7rem; margin-top: .2rem; font-size: .82rem; font-variant-numeric: tabular-nums; color: var(--text); }
.art-anzahl { display: inline-flex; align-items: center; gap: .25rem; }
.art-anzahl.z-wasser svg { color: #2f6fb0; } .art-anzahl.z-strom svg { color: #b8860b; }
.kennzahl-link .art-anzahlen { color: var(--text); }
@media (max-width: 640px) { .parzellen-kennzahlen.eine-reihe .art-anzahlen { gap: .1rem .4rem; font-size: .72rem; } }

/* Zähler-Stammdaten: Schaltflächen „Zähler tauschen“ / „Zähler archivieren“ (weiß), Formular klappt darunter auf */
.stamm-aktionen { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rand); }
.stamm-aktionen > details > summary.knopf { display: inline-flex; align-items: center; gap: .4rem; background: var(--fl); color: var(--text); padding: .45rem .9rem; }
.stamm-aktionen > details[open] { flex-basis: 100%; }
.stamm-aktionen > details[open] > summary.knopf { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.stamm-aktionen > details[open] > form { margin-top: .7rem; }
.zaehler-stamm .zaehler-stamm-form { margin: 0; }

/* Sammelerfassung (Wasser-/Stromzähler): Datum je Zeile, auf dem Handy mit Beschriftung */
.sammel-tabelle .c-datum input { width: 100%; min-width: 8.5rem; max-width: 11rem; }
.sammel-tabelle .c-neu .mit-einheit { min-width: 9rem; }
@media (max-width: 640px) {
  .sammel-tabelle .c-datum::before { content: "Ablesedatum (optional)"; display: block; font-size: .75rem; color: var(--leise); }
  .sammel-tabelle .c-datum input { max-width: none; }
}

/* Sätze/Preise (z. B. Verein › Versicherungen): Bezugsgröße unter dem Feld („je 500,00 € Versicherungssumme“) auch in der Anzeige */
main.datenansicht .preise-karte .satz-feld small.hinweis { display: block !important; }

/* PDF-Ansicht in der Web-App (Home-Bildschirm): Vollbild über der Seite mit Leiste oben */
html.pdf-ansicht-offen, html.pdf-ansicht-offen body { overflow: hidden; }
.pdf-ansicht { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: #525659; }
.pdf-ansicht-leiste { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; padding-top: calc(.55rem + env(safe-area-inset-top)); padding-left: calc(.8rem + env(safe-area-inset-left)); padding-right: calc(.8rem + env(safe-area-inset-right)); background: var(--fl, #fff); border-bottom: 1px solid var(--rand, #ddd); }
.pdf-ansicht-leiste .knopf { display: inline-flex; align-items: center; gap: .35rem; flex: none; }
.pdf-ansicht-leiste .pdf-titel { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; text-align: center; }
.pdf-ansicht-inhalt { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
.pdf-ansicht-seiten { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.pdf-ansicht-seiten canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.pdf-ansicht .pdf-status { color: #fff; text-align: center; }
@media (max-width: 640px) { .pdf-ansicht-leiste .knopf span { display: none; } .pdf-ansicht-inhalt { padding: .5rem; } }
/* CSV in der Datei-Ansicht: Tabelle auf hellem Grund, waagerecht scrollbar */
.pdf-ansicht.ist-csv { background: var(--grund, #f6f6f6); }
.pdf-ansicht.ist-csv .pdf-ansicht-seiten { max-width: none; }
.csv-rahmen { overflow: auto; background: var(--fl, #fff); border: 1px solid var(--rand, #ddd); border-radius: 8px; }
.csv-tabelle { font-size: .85rem; white-space: nowrap; }
.csv-tabelle th { position: sticky; top: 0; background: var(--fl, #fff); }

/* Einstellungen › Briefvorlagen */
.vorlage-karte { display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: start; }
.vorlage-bilder { display: flex; gap: .5rem; }
.vorlage-bilder img, .vorlage-vorschau img { width: 130px; height: auto; border: 1px solid var(--rand); box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
.vorlage-vorschau { display: flex; gap: .5rem; margin: .4rem 0 .8rem; }
.vorlage-optionen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1rem; margin-top: .6rem; }
.vorlage-optionen .mit-einheit input { width: 5rem; }
.vorlage-haken { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .3rem; }
.vorlage-loeschen { grid-column: 2; margin-top: -.4rem; }
.vorlagen-zuordnung select { min-width: 14rem; max-width: 100%; }
@media (max-width: 760px) {
  .vorlage-karte { grid-template-columns: 1fr; }
  .vorlage-loeschen { grid-column: 1; }
  .vorlage-optionen { grid-template-columns: 1fr; }
  .vorlage-bilder img { width: 110px; }
}
/* Untermenü mit vielen Einträgen (z. B. Einstellungen): ohne Symbole, damit alles in eine Zeile passt */
@media (min-width: 861px) {
  .unternav-liste:has(> :nth-child(8)) .unternav-eintrag .ic { display: none; }
  .unternav-liste:has(> :nth-child(8)) .unternav-eintrag { padding-left: .65rem; padding-right: .65rem; }
}
@media (min-width: 861px) and (max-width: 1100px) {
  .unternav-liste:has(> :nth-child(8)) .unternav-eintrag { padding-left: .45rem; padding-right: .45rem; font-size: .88rem; }
}

/* Korrespondenz: gesperrter Weg (E-Mail-Adresse vorhanden → keine Briefe; keine Adresse → keine E-Mails) */
.korr-reiter a.gesperrt:not(.aktiv) { opacity: .45; }
.korr-reiter a.gesperrt.aktiv { opacity: .7; }
.korr-weg { margin: .6rem 0; }
/* Rundschreiben */
.rs-gruppen { border: 0; padding: 0; margin: 0 0 .8rem; display: grid; gap: .45rem; }
.rs-gruppe { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: .6rem .8rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); cursor: pointer; }
.rs-gruppe:has(input:checked) { border-color: var(--akzent); box-shadow: inset 0 0 0 1px var(--akzent); }
.rs-zahlen { white-space: nowrap; font-variant-numeric: tabular-nums; display: inline-flex; gap: .35rem; align-items: center; }
.rs-zahlen svg { vertical-align: -3px; }
@media (max-width: 640px) { .rs-gruppe { grid-template-columns: auto 1fr; } .rs-zahlen { grid-column: 2; white-space: normal; flex-wrap: wrap; } }

/* Symbol „Zähler lief rückwärts“ (Zählerstände, Sammelerfassung) */
.rueck-icon { display: inline-flex; vertical-align: -2px; color: var(--warn, #9a6700); cursor: help; }

/* Jede Seite: Überschrift mit Knöpfen, Registerkarten und Filter bleiben beim Scrollen unter der Kopfzeile stehen (nav.js legt sie in .anheft-kopf) */
.anheft-kopf { position: sticky; top: var(--kopf-hoehe, 0px); z-index: 30; background: var(--bg); margin-top: -.6rem; margin-bottom: .6rem; padding: .6rem 0 .1rem;
  box-shadow: 0 1px 0 transparent; transition: box-shadow .15s; }
/* Smartphone: aufgeklappter Filter darf nicht den ganzen Bildschirm füllen */
@media (max-width: 640px) { .anheft-kopf:has(details[open]) { max-height: calc(100dvh - var(--kopf-hoehe, 0px) - 4rem); overflow-y: auto; overscroll-behavior: contain; } }
.anheft-kopf.klebt { box-shadow: 0 6px 10px -8px rgba(0,0,0,.25); }
main .anheft-kopf .seitenkopf { position: static; margin-top: 0; box-shadow: none; padding-top: 0; }
.anheft-kopf > * { margin-bottom: .45rem; }
.anheft-kopf > :last-child { margin-bottom: .35rem; }
.anheft-kopf .seitenkopf.klebt { box-shadow: none; }
.anheft-kopf > h1:first-child { margin-top: 0; }
@media print { .anheft-kopf { position: static !important; box-shadow: none !important; max-height: none; overflow: visible; } }

/* Hilfe: Bedienungsanleitung mit Inhaltsverzeichnis und Suche */
.hilfe-suche { display: flex; flex-direction: column; max-width: 34rem; margin-bottom: .8rem; }
.hilfe-raster { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.hilfe-inhalt { position: sticky; top: calc(var(--nav-hoehe) + env(safe-area-inset-top) + 9rem); max-height: calc(100vh - var(--nav-hoehe) - 10rem); overflow-y: auto; padding: .7rem .8rem; }
.hilfe-inhalt summary { font-weight: 600; cursor: pointer; }
.hilfe-inhalt ol { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 1px; font-size: .9rem; }
.hilfe-inhalt li a { display: block; padding: .25rem .4rem; border-radius: 6px; color: var(--text); text-decoration: none; line-height: 1.3; }
.hilfe-inhalt li a:hover { background: var(--akzent-hell); color: var(--akzent); }
.hilfe-text { display: grid; gap: 1rem; min-width: 0; }
.hilfe-abschnitt { scroll-margin-top: calc(var(--nav-hoehe) + env(safe-area-inset-top) + 9rem); line-height: 1.55; }
.hilfe-abschnitt > h2 { margin-top: 0; }
.hilfe-abschnitt h3 { margin: 1.1rem 0 .4rem; font-size: 1.02rem; }
.hilfe-abschnitt ul, .hilfe-abschnitt ol { padding-left: 1.4rem; margin: .4rem 0; }
.hilfe-abschnitt li { margin: .2rem 0; }
.hilfe-abschnitt code { background: var(--akzent-hell); padding: 0 .3rem; border-radius: 4px; font-size: .92em; }
.hilfe-abschnitt:target { outline: 2px solid var(--akzent); outline-offset: 2px; }
.hilfe-neu { border-left: 4px solid var(--akzent); }
mark.hilfe-mark { background: #fff3a3; color: inherit; border-radius: 2px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark.hilfe-mark { background: #6b5d12; } }
@media (max-width: 899px) {
  .hilfe-raster { grid-template-columns: 1fr; }
  .hilfe-inhalt { position: static; max-height: none; }
  .hilfe-abschnitt { scroll-margin-top: calc(var(--nav-hoehe) + env(safe-area-inset-top) + 10.5rem); }
}
@media print { .hilfe-raster { display: block; } .hilfe-abschnitt { break-inside: avoid-page; } }
/* Hilfe: kleine Bildschirmfotos (Klick vergrößert) */
.hilfe-abschnitt { display: flow-root; }
.hilfe-bild { margin: .2rem 0 .9rem; max-width: 100%; }
.hilfe-bild a { display: block; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); cursor: zoom-in; background: #fff; }
.hilfe-bild img { display: block; width: 100%; height: auto; }
.hilfe-bild figcaption { font-size: .8rem; color: var(--leise); margin-top: .3rem; line-height: 1.3; }
@media (min-width: 900px) { .hilfe-bild { float: right; clear: right; width: min(340px, 42%); margin: .2rem 0 .9rem 1.2rem; } }
@media (max-width: 899px) { .hilfe-bild { width: 72%; max-width: 360px; } .hilfe-bild figcaption { font-size: .75rem; } }
.hilfe-lupe { position: fixed; inset: 0; z-index: 200; background: rgba(28,2,8,.82); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top)) 16px 16px; cursor: zoom-out; }
.hilfe-lupe img { max-width: 100%; max-height: calc(100vh - 5rem); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.4); background: #fff; }
.hilfe-lupe p { color: #fff; margin: .6rem 0 0; text-align: center; font-size: .9rem; }
@media print { .hilfe-bild { float: right; width: 40%; } .hilfe-bild a { box-shadow: none; } }

/* Hilfe-„?“ in der Kopfzeile (springt zum Abschnitt der aktuellen Seite) – rechts neben dem Benutzernamen */
.kopf .hilfe-knopf { order: 3; flex: none; margin-left: .2rem; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--nav-text); }
.kopf .hilfe-knopf:hover { background: var(--nav-hover); }
.kopf .hilfe-knopf .ic { width: 22px; height: 22px; }
.kopf .menuebereich { order: 2; }
.kopf details.nutzer { flex: none; }
@media (min-width: 1280px) {
  .kopf-innen { gap: .75rem; }
  .hauptnav .menue-eintrag { padding: .5rem .5rem; gap: .45rem; }
  .hauptnav .bereich-pfeil { padding-left: .3rem; padding-right: .3rem; }
  .nutzer-name { max-width: 8rem; }
}
@media (max-width: 860px) { .kopf .hilfe-knopf { order: 0; margin-left: auto; width: 44px; height: 44px; } .kopf .hilfe-knopf + .hamburger { margin-left: 0; } }

/* Personen: Kacheln je Mitgliedsgruppe (Klick filtert) */
.parzellen-kennzahlen.fuenf { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gefunden-zeile { margin: -.4rem 0 .6rem; }
@media (max-width: 640px) {
  .parzellen-kennzahlen.fuenf { gap: .3rem; }
  .parzellen-kennzahlen.fuenf > div { padding: .4rem .35rem; }
  .parzellen-kennzahlen.fuenf .bez { font-size: .66rem; line-height: 1.2; hyphens: auto; overflow-wrap: anywhere; }
}

/* Erklärung der Mitgliedsgruppen (aufklappbar) */
.gruppen-info { margin: 0 0 .8rem; font-size: .88rem; }
.gruppen-info > summary { cursor: pointer; color: var(--akzent); font-weight: 600; width: fit-content; }
.gruppen-info dl { display: grid; gap: .35rem; margin: .5rem 0 .4rem; padding: .6rem .8rem; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); }
.gruppen-info dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: .6rem; align-items: center; }
.gruppen-info dt { margin: 0; } .gruppen-info dd { margin: 0; }
.gruppen-info .typ-marke { width: 100%; }
.gruppen-info .hinweis { margin: 0; }
.gruppen-info-rahmen { padding: 0 1.1rem .4rem; }
@media (max-width: 640px) { .gruppen-info dl > div { grid-template-columns: 1fr; gap: .15rem; } .gruppen-info .typ-marke { width: auto; } }
.wartetabelle .typ-marke { min-width: 0; width: auto; padding: .05rem .5rem; font-size: .72rem; margin-left: .35rem; vertical-align: .1rem; }

/* Rechnungsabschnitte (Rechnungen › Positionen): sortierbare Liste */
.abschnitte-liste { list-style: none; margin: .4rem 0 .8rem; padding: 0; display: grid; gap: .3rem; max-width: 46rem; }
.abschnitt-zeile { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; padding: .35rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl); }
.abschnitt-titel { font-weight: 600; }
.abschnitt-zeile.zieht { opacity: .7; box-shadow: 0 4px 14px rgba(0,0,0,.15); border-color: var(--akzent); }
.abschnitt-zeile.verschoben { border-color: var(--akzent); }
.abschnitt-zeile.mit-fehler { border-color: var(--fehler, #b3261e); }
.sort-griff { cursor: grab; color: var(--leise); letter-spacing: -2px; touch-action: none; user-select: none; padding: .2rem .15rem; }
.abschnitt-nr { color: var(--leise); min-width: 1.6rem; text-align: right; font-variant-numeric: tabular-nums; }
.abschnitt-titel-eingabe { flex: 1 1 12rem; max-width: 18rem; }
.abschnitt-art { flex: 1 1 auto; }
.sort-knoepfe { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; }
.sort-knoepfe .knopf-link { padding: .15rem .45rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--hg, #fff); line-height: 1.2; }
.abschnitt-weg { font-size: .85rem; }
.abschnitt-neu { max-width: 24rem; }
main.datenansicht .sort-griff { display: none; }
@media (max-width: 640px) { .abschnitt-zeile { row-gap: 0; padding: .3rem .5rem; } .abschnitt-art { flex-basis: 100%; order: 5; padding-left: 2.6rem; line-height: 1.25; } main.datenansicht .abschnitt-art { padding-left: 2.2rem; } }
/* Rechnungsabschnitte: Raster statt Fluss – Pfeile und „löschen“ immer an derselben Stelle */
.abschnitt-zeile { display: grid; grid-template-columns: auto 1.9rem minmax(10rem, 16rem) minmax(0, 1fr) 9.5rem; align-items: center; column-gap: .55rem; }
.abschnitt-zeile > input[type=hidden] { display: none; }
.abschnitt-zeile .abschnitt-titel-eingabe, .abschnitt-zeile .abschnitt-titel { max-width: none; width: 100%; }
.abschnitt-zeile .sort-knoepfe { justify-content: flex-start; margin-left: 0; }
.abschnitt-zeile .fehlertext { grid-column: 3 / -1; }
main.datenansicht .abschnitt-zeile { grid-template-columns: 1.9rem minmax(10rem, 16rem) minmax(0, 1fr); }
@media (max-width: 640px) {
  .abschnitt-zeile { grid-template-columns: auto 1.7rem minmax(0, 1fr); row-gap: .25rem; }
  .abschnitt-zeile .abschnitt-art { grid-column: 3; order: 0; padding-left: 0; }
  .abschnitt-zeile .sort-knoepfe { grid-column: 3; }
  main.datenansicht .abschnitt-zeile { grid-template-columns: 1.7rem minmax(0, 1fr); }
  main.datenansicht .abschnitt-zeile .abschnitt-art { grid-column: 2; padding-left: 0; }
}
main.datenansicht .abschnitt-zeile .sort-knoepfe { display: none; }

/* Startrechnung (Rechnungen › Manuelle Rechnungen) */
.start-positionen td, .start-positionen th { vertical-align: middle; }
.start-positionen .c-wahl { width: 2.2rem; text-align: center; }
.start-positionen .c-wahl input { width: 1.15rem; height: 1.15rem; }
.start-positionen label { cursor: pointer; display: block; }
.start-positionen tr.gewaehlt td { background: color-mix(in srgb, var(--akzent) 7%, transparent); }
.start-positionen .start-menge { width: 4.5rem; text-align: right; }
.start-offene { list-style: none; padding: 0; margin: .3rem 0 .8rem; display: grid; gap: .3rem; }
.start-frei { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: .6rem; max-width: 40rem; }
.start-summe { font-size: 1.15rem; margin: .6rem 0; }
.start-summe strong { font-variant-numeric: tabular-nums; }
.start-person p { margin: 0; }
.rechnung-art { font-size: .7rem; margin-top: .15rem; display: inline-block; }
@media (max-width: 640px) {
  .start-frei { grid-template-columns: 1fr; }
  .start-positionen .c-abschnitt { display: none; }
}
.start-person .typ-marke { width: auto; display: inline-block; padding: .05rem .5rem; vertical-align: middle; }
.start-form h3 { margin: 1.1rem 0 .4rem; }
@media (max-width: 640px) {
  .start-positionen .c-preis { display: none; }
  .start-positionen td, .start-positionen th { padding-left: .35rem; padding-right: .35rem; }
  .start-positionen .start-menge { width: 3.2rem; }
  .start-positionen .start-einheit { display: block; font-size: .8rem; }
  .start-positionen .c-text { font-size: .95rem; }
  .start-positionen .pos-beschreibung { font-size: .78rem; }
}
/* Startrechnung: Positionen über „+ Position hinzufügen“ (mit JavaScript) */
.start-positionen .c-weg { display: none; width: 2.4rem; text-align: right; }
.start-form.mit-js .start-positionen .c-weg { display: table-cell; }
.start-form.mit-js .start-positionen .c-wahl { display: none; }
.start-form.mit-js .start-positionen tr.gewaehlt td { background: none; }
.start-positionen .start-weg { padding: .25rem .4rem; border-style: solid; color: var(--leise); line-height: 0; }
.start-positionen .start-weg:hover { color: var(--gefahr, #b42318); }
.start-frei-zeile .feld { margin: 0; }
.start-frei-zeile .feld .bez { font-size: .8rem; }
.start-freibetrag { width: 7rem; text-align: right; }
.pos-hinzu { position: relative; margin: .7rem 0 .4rem; }
.pos-menue { position: absolute; z-index: 30; left: 0; top: calc(100% + .3rem); min-width: min(26rem, 92vw); max-height: 22rem; overflow: auto; margin: 0; padding: .3rem;
  list-style: none; background: var(--fl, #fff); border: 1px solid var(--rand, #ddd); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); }
.pos-menue button { display: flex; width: 100%; justify-content: space-between; gap: 1rem; align-items: baseline; text-align: left; background: none; border: 0; border-radius: 6px;
  padding: .5rem .6rem; font: inherit; color: inherit; cursor: pointer; }
.pos-menue button:hover:not(:disabled), .pos-menue button:focus-visible { background: var(--akzent-hell); }
.pos-menue button:disabled { opacity: .45; cursor: default; }
.start-nummer { margin: .35rem 0 0; }
.pdf-ansicht .pdf-status.pdf-fehler { background: #fff; color: #8a1c1c; max-width: 40rem; margin: 2rem auto; padding: 1rem 1.2rem; border-radius: 8px; text-align: left; }
@media (max-width: 640px) {
  .start-freibetrag { width: 5.2rem; }
  .pos-menue button { flex-direction: column; gap: .1rem; }
}
/* Zählerstände: Jahr abschließen / abgeschlossen */
.kopf-form { display: contents; }
.jahr-abgeschlossen { border-left: 4px solid var(--akzent); margin-bottom: 1rem; }
.jahr-abgeschlossen p { margin: 0 0 .5rem; }
.jahr-abgeschlossen p svg { vertical-align: -3px; margin-right: .3rem; color: var(--akzent); }
.freischalten-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; margin-top: .4rem; }
.freischalten-form .feld { flex: 1 1 18rem; margin: 0; }
.stand-gesperrt { color: var(--leise); }
/* Gestellte Rechnungen: je Rechnung Senden, Stornieren, Speichern; Zahlungsstand */
.s-bezahlt { background: var(--akzent-hell); color: var(--ok); }
.s-ueberfaellig { background: var(--fehler-bg); color: var(--fehler); }
.rechnung-knoepfe { display: flex; flex-wrap: nowrap; gap: .3rem; align-items: flex-start; }
.rechnungstabelle td.c-aktion .rechnung-knoepfe form { display: inline; margin: 0; }
.rechnung-knoepfe .knopf-klein { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--fl);
  padding: .25rem .55rem; font-size: .85rem; line-height: 1.3; white-space: nowrap; box-shadow: none; outline-offset: 1px; }
.rechnung-knoepfe .knopf-klein.primaer { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); }
.rechnung-knoepfe .knopf-klein.gefahr { color: var(--fehler); border-color: var(--fehler); }
.rechnung-knoepfe .knopf-klein:disabled { opacity: .45; cursor: not-allowed; }
.rechnung-knoepfe details.storno-klein form { position: absolute; right: 0; z-index: 5; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .4rem; box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.rechnung-knoepfe details.storno-klein { position: relative; }
@media (max-width: 760px) { .rechnung-knoepfe { flex-wrap: wrap; } }
.rechnungstabelle td.c-aktion .rechnung-knoepfe details.storno-klein form { display: flex !important; }
/* Startrechnung: Personensuche über die volle Breite, filtert beim Tippen */
.start-suche { margin: .2rem 0 .9rem; }
.start-suche .listensuche { max-width: none; margin: 0; font-size: .9rem; }
.start-suche .listensuche input { width: 100%; box-sizing: border-box; font-size: 1rem; padding: .6rem .8rem; }
.start-personen-tabelle .typ-marke { width: auto; min-width: 0; padding: .05rem .5rem; }
/* Manuelle Rechnungen: Kacheln wachsen mit dem Text; Anzahl „noch nicht versendet“ als eigene Statuszeile */
.kacheln.manuell-kacheln .kachel { height: auto; min-height: 6.5rem; grid-template-areas: "icon titel" "icon wert" "icon text"; grid-template-rows: auto auto 1fr; align-items: start; align-content: start; }
.manuell-kacheln .kachel-titel { color: var(--text); font-size: .95rem; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.manuell-kacheln .kachel-status { grid-area: wert; justify-self: start; margin: .1rem 0 .15rem; }
.manuell-kacheln .kachel-status .marke-status { min-width: 0; font-size: .78rem; padding: .05rem .55rem; white-space: nowrap; }
@media (max-width: 640px) {
  .kacheln.manuell-kacheln .kachel { height: auto; grid-template-areas: "icon" "titel" "wert" "text"; grid-template-rows: auto auto auto 1fr; }
}
@media (max-width: 640px) {
  .start-positionen .start-menge { width: 4.8rem; }
  .start-positionen .start-frei-zeile input[name=frei_text] { width: 100%; min-width: 0; box-sizing: border-box; }
  .start-positionen .start-freibetrag { width: 4.6rem; }
  .start-positionen .c-weg { width: 2rem; padding-left: .1rem; padding-right: .1rem; }
  .start-positionen .start-weg { padding: .2rem .3rem; }
  .start-tabelle { overflow-x: visible; }
  .start-positionen { width: 100%; }
}
/* Start-/Schlussrechnung: Positionen frei anordnen (Griff, ▲/▼) – nur mit JavaScript und ab zwei Positionen */
.start-positionen .c-griff, .start-positionen .start-sort { display: none; }
.start-form.mit-js .start-tabelle.mehrere .start-positionen .c-griff { display: table-cell; width: 1.4rem; padding-right: 0; }
.start-form.mit-js .start-tabelle.mehrere .start-positionen .start-sort { display: inline-flex; gap: .2rem; margin-right: .3rem; }
.start-positionen .c-weg { white-space: nowrap; }
.start-form.mit-js .start-tabelle.mehrere .start-positionen .c-weg { width: auto; }
.start-positionen .start-hoch, .start-positionen .start-runter { padding: .15rem .4rem; border-style: solid; color: var(--leise); line-height: 1.1; font-size: .75rem; }
.start-positionen .start-hoch:disabled, .start-positionen .start-runter:disabled { opacity: .3; cursor: default; }
.start-positionen tr.zieht td { background: var(--akzent-hell); }
.start-positionen tr.zieht { opacity: .85; }
.start-positionen tr.verschoben td { background: var(--akzent-hell); transition: background .6s; }
@media (max-width: 640px) {
  .start-form.mit-js .start-tabelle.mehrere .start-positionen .c-griff { display: none; }
  .start-form.mit-js .start-tabelle.mehrere .start-positionen .start-sort { flex-direction: column; gap: .15rem; }
}
@media (max-width: 640px) {
  .start-form.mit-js .start-positionen .c-weg { white-space: normal; width: 2rem; text-align: center; padding-left: .15rem; padding-right: .15rem; }
  .start-form.mit-js .start-tabelle.mehrere .start-positionen .start-sort { margin: 0 0 .2rem; }
  .start-positionen .start-weg { display: inline-block; }
  .start-positionen .start-hoch, .start-positionen .start-runter { padding: .1rem .3rem; }
}
/* Gestellte Rechnungen: Knöpfe immer an derselben Stelle (drei gleich breite Plätze), Versandweg als Abzeichen */
.rechnungstabelle .rechnung-knoepfe { display: grid; grid-template-columns: repeat(3, 7.4rem); gap: .3rem; align-items: start; flex-wrap: nowrap; }
.rechnungstabelle .rechnung-knoepfe > form, .rechnungstabelle .rechnung-knoepfe > details { display: block !important; margin: 0; }
.rechnungstabelle .rechnung-knoepfe .knopf-klein { width: 100%; justify-content: center; box-sizing: border-box; }
.rechnungstabelle .rechnung-knoepfe details.storno-klein > summary { list-style: none; }
.rechnungstabelle .rechnung-knoepfe details.storno-klein > summary::-webkit-details-marker { display: none; }
.versand-weg { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .5rem; border-radius: 999px; font-size: .82rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.versand-weg.v-email { background: #e6f0fb; color: #1d4f8a; border-color: #c4d9f2; }
.versand-weg.v-brief { background: #fdf1e3; color: #8a4b12; border-color: #f0d5b5; }
.versand-weg.v-gespeichert { background: var(--akzent-hell); color: var(--ok); }
.versand-weg.v-offen { background: transparent; color: var(--leise); border-color: var(--rand); font-weight: 500; }
.rechnungstabelle td.c-versand { line-height: 1.9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .versand-weg.v-email { background: #1d3550; color: #b9d4f3; border-color: #2c4b6e; }
  :root:not([data-theme="light"]) .versand-weg.v-brief { background: #4a3014; color: #f3cfa6; border-color: #6a4520; }
}
:root[data-theme="dark"] .versand-weg.v-email { background: #1d3550; color: #b9d4f3; border-color: #2c4b6e; }
:root[data-theme="dark"] .versand-weg.v-brief { background: #4a3014; color: #f3cfa6; border-color: #6a4520; }
@media (max-width: 760px) {
  .rechnungstabelle .rechnung-knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .rechnungstabelle .rechnung-knoepfe .knopf-klein { padding-left: .3rem; padding-right: .3rem; font-size: .8rem; }
}
.rechnungstabelle td.c-versand { min-width: 13.5rem; }
@media (max-width: 760px) {
  .rechnungstabelle td.c-versand { min-width: 0; }
  .rechnungstabelle td.c-versand .nowrap { white-space: normal; }
}
/* Gestellte Rechnungen: Kacheln als Filter (alle, noch nicht versendet, E-Mail, Post, wartet auf Zahlung, bezahlt) */
.parzellen-kennzahlen.rechnung-kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rechnung-kacheln > div { padding: 0; transition: border-color .15s; }
.rechnung-kacheln > div:hover { border-color: var(--akzent); }
.rechnung-kacheln .kennzahl-link { padding: .55rem .8rem; height: 100%; box-sizing: border-box; align-content: start; gap: .15rem; }
.rechnung-kacheln .bez .versand-weg { font-size: .75rem; padding: 0 .4rem; margin-right: .1rem; }
.rechnung-kacheln .rk-zusatz { font-size: .72rem; }
.rechnung-kacheln .rk-bezahlt .zahl-gross { color: var(--ok); }
@media (max-width: 900px) { .parzellen-kennzahlen.rechnung-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .parzellen-kennzahlen.rechnung-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Vermietung Vereinsheim: Empfänger-Herkunft, Positionen mit Bruttopreis und Steuersatz, Summenblock, vier Knöpfe je Rechnung */
.vh-typ { display: inline-block; padding: .02rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; border: 1px solid var(--rand); white-space: nowrap; }
.vh-typ.vh-extern { background: #f3ecfb; color: #5a2d8a; border-color: #dccbf0; }
.vh-typ.vh-mitglied { background: var(--akzent-hell); color: var(--ok); border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vh-typ.vh-extern { background: #352346; color: #e0cdf5; border-color: #4d3466; } }
:root[data-theme="dark"] .vh-typ.vh-extern { background: #352346; color: #e0cdf5; border-color: #4d3466; }
.vh-neu { margin: 0 0 .8rem; }
.vh-positionen input, .vh-positionen select { box-sizing: border-box; }
.vh-positionen .c-text input { width: 100%; min-width: 12rem; }
.vh-positionen .vh-menge { width: 4.5rem; text-align: right; }
.vh-positionen .vh-einheit { width: 6.5rem; }
.vh-positionen .vh-preis { width: 6.5rem; text-align: right; }
.vh-positionen .vh-satz { width: 5.2rem; }
.vh-positionen .vh-betrag { white-space: nowrap; font-variant-numeric: tabular-nums; min-width: 5.5rem; }
.vh-positionen tr.vh-null .vh-betrag { color: var(--leise); text-decoration: line-through; }
.vh-positionen .fehlertext { display: block; font-size: .8rem; }
.vh-platzhalter { margin-top: .2rem; }
.vh-summen { margin: .8rem 0 .2rem auto; max-width: 22rem; display: grid; gap: .15rem; font-variant-numeric: tabular-nums; }
.vh-summen > div, .vh-steuern > div { display: flex; justify-content: space-between; gap: 1rem; }
.vh-steuern { display: grid; gap: .15rem; }
.vh-steuern:empty { display: none; }
.vh-summen dt { color: var(--leise); }
.vh-summen dd { margin: 0; }
.vh-summen .vh-gesamt { border-top: 1px solid var(--rand); padding-top: .3rem; margin-top: .15rem; font-size: 1.15rem; }
.vh-summen .vh-gesamt dt { color: inherit; font-weight: 600; }
.vh-summen .vh-gesamt dd { font-weight: 700; }
.rechnungstabelle.vh-tabelle .rechnung-knoepfe { grid-template-columns: repeat(4, 7.4rem); }
.vh-knoepfe details.vh-bezahlt input[type=date] { width: auto; }
#vh-nummernkreis > summary { cursor: pointer; }
.vh-nummernkreis { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.vh-nummernkreis .feld { margin: 0; }
.vh-nr-eingabe { display: inline-flex; align-items: center; gap: .3rem; }
.vh-nr-eingabe input { width: 6rem; }
.vh-preisliste input[name$="[bezeichnung]"] { width: 100%; min-width: 14rem; box-sizing: border-box; }
.vh-preisliste .vh-einheit { width: 6.5rem; }
.vh-preisliste .vh-preis { width: 6.5rem; text-align: right; }
.vh-preisliste tr.vh-neu-zeile td { background: color-mix(in srgb, var(--akzent) 5%, transparent); }
.vh-archiv { margin-top: 1rem; }
@media (max-width: 760px) {
  .rechnungstabelle.vh-tabelle .rechnung-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vh-positionen thead { display: none; }
  .vh-positionen, .vh-positionen tbody { display: block; width: 100%; }
  .vh-positionen tr.vh-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: .35rem .5rem; padding: .6rem .2rem; border-bottom: 1px solid var(--rand); }
  .vh-positionen tr.vh-zeile td { display: block; padding: 0; border: 0; text-align: left; }
  .vh-positionen tr.vh-zeile td.c-griff { display: none !important; }
  .vh-positionen tr.vh-zeile td.c-text { grid-column: 1 / -1; }
  .vh-positionen .c-text input { min-width: 0; }
  .vh-positionen tr.vh-zeile td[data-label]::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--leise); }
  .vh-positionen .vh-menge, .vh-positionen .vh-einheit, .vh-positionen .vh-preis, .vh-positionen .vh-satz { width: 100%; }
  .vh-positionen tr.vh-zeile td.c-preis { display: block !important; }
  .vh-positionen tr.vh-zeile td.vh-betrag { align-self: end; font-weight: 600; }
  .start-form.mit-js .vh-positionen tr.vh-zeile td.c-weg { grid-column: 2 / -1; width: auto; display: flex; justify-content: flex-end; align-items: end; gap: .3rem; }
  .start-form.mit-js .start-tabelle.mehrere .vh-positionen .start-sort { flex-direction: row; margin: 0; }
  .vh-preisliste input[name$="[bezeichnung]"] { min-width: 0; }
}
.vh-summen > .vh-steuern { display: grid; }
.vh-tabelle td.c-name { min-width: 12rem; }
@media (max-width: 760px) { .vh-tabelle td.c-name { min-width: 0; } }
@media (max-width: 760px) {
  .vh-positionen tr.vh-zeile { grid-template-columns: minmax(0, .6fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .95fr); }
  .vh-positionen tr.vh-zeile td.vh-betrag { grid-column: 1 / 3; }
  .start-form.mit-js .vh-positionen tr.vh-zeile td.c-weg { grid-column: 3 / -1; }
  .vh-positionen input, .vh-positionen select { font-size: .95rem; padding-left: .35rem; padding-right: .35rem; }
}
@media (max-width: 760px) { .vh-tabelle .versand-weg { white-space: normal; } }
/* Rechnungsübersicht Vereinsheim: ohne waagrechte Scrollleiste – Knöpfe 2 × 2 (schmal untereinander), Status darf umbrechen */
.rechnungstabelle.vh-tabelle .rechnung-knoepfe { grid-template-columns: repeat(2, 7.2rem); }
.vh-tabelle td.c-versand { min-width: 9.5rem; }
.vh-tabelle td.c-versand .nowrap { white-space: normal; }
.vh-tabelle td.c-name { min-width: 9rem; }
@media (min-width: 761px) and (max-width: 1080px) {
  .rechnungstabelle.vh-tabelle .rechnung-knoepfe { grid-template-columns: 7.2rem; }
  .vh-tabelle td.c-name { min-width: 0; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .vh-tabelle th, .vh-tabelle td { padding-left: .4rem; padding-right: .4rem; }
  .vh-tabelle .versand-weg { white-space: normal; }
  .vh-tabelle td.c-versand { min-width: 7.5rem; }
  .vh-tabelle .marke-status { min-width: 0; }
  .vh-tabelle td.c-datum { white-space: normal; }
}
@media (max-width: 760px) {
  .rechnungstabelle.vh-tabelle .rechnung-knoepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .karten-mobil.vh-tabelle td.c-versand { grid-column: 1 / -1; }
  .vh-tabelle .versand-weg { white-space: nowrap; }
}
/* Rechnungsübersicht Vereinsheim: Bezahlt/Stornieren als schwebendes Feld am Knopf (vh_rechnungen.js) */
.vh-popup-js .vh-tabelle .rechnung-knoepfe details.storno-klein form { position: fixed; right: auto; z-index: 60; white-space: nowrap; }
.vh-tabelle details.storno-klein form input[type=date] { width: auto; }
/* Rechnungslauf ausführen: Auswahl der Rechnungen */
.lauf-auswahl { margin: .6rem 0 1rem; flex: 1 1 100%; min-width: 0; }
.lauf-daten { flex: 1 1 100%; min-width: 0; }
@media (max-width: 700px) {
  .lauf-liste .c-fuer { display: none; }
  .lauf-liste table { min-width: 0; }
  .lauf-liste td, .lauf-liste th { padding-left: .35rem; padding-right: .35rem; }
  .lauf-auswahl-kopf input[type=search] { flex-basis: 100%; }
}
.lauf-auswahl-kopf { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; margin-bottom: .5rem; }
.lauf-auswahl-kopf input[type=search] { flex: 1 1 16rem; min-width: 0; }
.lauf-auswahl-kopf .knopfleiste { display: inline-flex; gap: .4rem; }
.lauf-zaehler { font-weight: 600; font-variant-numeric: tabular-nums; }
.lauf-liste { max-height: 22rem; overflow-y: auto; }
.lauf-liste thead th { position: sticky; top: 0; background: var(--fl); z-index: 1; }
.lauf-liste input[type=checkbox] { width: auto; }
.lauf-liste td.c-wahl, .lauf-liste th.c-wahl { width: 2.2rem; text-align: center; }
.lauf-liste tr.abgewaehlt td { color: var(--leise); text-decoration: line-through; }
.lauf-liste tr.abgewaehlt td.c-wahl { text-decoration: none; }
.lauf-liste label { cursor: pointer; }
.lauf-daten { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; }
.lauf-daten .feld { margin: 0; }

/* Positionen: feste Position „Nicht geleistete Pflichtstunden“ */
.positionen-tabelle tr.pflicht-zeile td { background: color-mix(in srgb, var(--akzent) 6%, transparent); }
.positionen-tabelle .pflicht-hinweis { display: block; margin-top: .2rem; font-size: .78rem; }
.positionen-tabelle .fest-wert { display: inline-block; padding: .4rem 0; }
.positionen-tabelle .fest-marke { font-size: .75rem; color: var(--leise); border: 1px solid var(--rand); border-radius: 999px; padding: .05rem .45rem; }

/* Positionen: Reihenfolge (Griff + Pfeile) */
.positionen-tabelle td.c-sort { white-space: nowrap; width: 1%; vertical-align: top; padding-top: .7rem; }
.positionen-tabelle td.c-sort .sort-griff { cursor: grab; color: var(--leise); padding: 0 .25rem; touch-action: none; user-select: none; }
.positionen-tabelle td.c-sort .knopf-link { padding: 0 .15rem; font-size: .8rem; }
.positionen-tabelle tr.zieht td { background: color-mix(in srgb, var(--akzent) 12%, transparent); }
.positionen-tabelle tr.verschoben td { transition: background .6s; background: color-mix(in srgb, var(--akzent) 10%, transparent); }
@media (max-width: 1100px) {
  .positionen-tabelle td.c-sort { grid-area: sort; width: auto; padding: 0; display: flex; gap: .4rem; align-items: center; justify-content: flex-end; }
  .positionen-tabelle td.c-sort .knopf-link { font-size: 1rem; padding: .1rem .5rem; }
  .positionen-tabelle td.c-sort .sort-griff { margin-right: auto; font-size: 1.1rem; }
  .positionen-tabelle tr[data-sort-zeile] { grid-template-areas: "sort sort sort" "bez bez weg" "beschr beschr beschr" "aktiv aktiv aktiv" "bezug abschnitt abschnitt" "einheit betrag betrag" "optional optional optional"; }
}
@media (max-width: 640px) {
  .positionen-tabelle tr[data-sort-zeile] { grid-template-areas: "sort sort" "bez weg" "beschr beschr" "aktiv aktiv" "bezug bezug" "abschnitt abschnitt" "einheit einheit" "betrag betrag" "optional optional"; }
}
main.datenansicht .positionen-tabelle .c-sort { display: none !important; }

/* Start-/Schlussrechnung: Gutschrift (wird abgezogen) */
.start-gut-zeile .c-text .bez { color: var(--akzent); }
.start-gut-zeile td[data-label="Betrag"] .feld { display: flex; align-items: center; gap: .25rem; justify-content: flex-end; }
.start-gut-zeile .gut-minus { font-weight: 600; }
/* Rechnungsvorschau: Gutschrift – gleiches Raster wie „+ Position“ (Text über Anzahl/Einheit, Betrag unter Einzelbetrag, Abzug unter Summe) */
.rv-gutschrift-form .f-text { grid-column: 1 / 4; }
.rv-gutschrift-form .rv-frei-summe { color: var(--akzent); }
@media (max-width: 900px) { .rv-gutschrift-form .f-text { grid-column: 1 / -1; } }

/* Manuelle Rechnungen › Rechnung: Nummernkreise */
.vh-kreise input.vh-kuerzel { width: 6rem; text-transform: uppercase; }
.vh-kreise td { vertical-align: top; }
.vh-kreise td.leise { padding-top: .75rem; white-space: nowrap; }
.vh-kreise .haken { white-space: nowrap; padding-top: .45rem; display: inline-block; }
.vh-kreis-wahl { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; align-items: end; }
.vh-kreis-wahl .feld { margin: 0; min-width: 14rem; }
.vh-kreis-wahl p { margin: 0 0 .5rem; }
@media (max-width: 640px) {
  .vh-kreise thead { display: none; }
  .vh-kreise, .vh-kreise tbody { display: block; }
  .vh-kreise tr { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .35rem .6rem; padding: .6rem 0; border-bottom: 1px solid var(--rand); }
  .vh-kreise td { display: block; padding: 0; border: 0; }
  .vh-kreise td:nth-child(2) { grid-column: 2; }
  .vh-kreise td:nth-child(2) input { width: 100%; }
  .vh-kreise td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; white-space: normal; }
  .vh-kreise td:nth-child(3)::before { content: "Nächste Nummer: "; }
  .vh-kreise td.c-alt { grid-column: 1 / -1; }
  .vh-kreise td.c-alt::before { content: attr(data-label) ": "; color: var(--leise); display: block; font-size: .85rem; }
  .vh-kreise .haken { padding-top: 0; }
  .vh-kreis-wahl .feld { min-width: 0; width: 100%; }
}
.vh-kreise td.c-alt input { width: 6rem; }
/* Gemeinschaftsarbeit: Kacheln als Filter */
.parzellen-kennzahlen.arbeit-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.arbeit-kacheln > div { padding: 0; transition: border-color .15s; }
.arbeit-kacheln > div:hover { border-color: var(--akzent); }
.arbeit-kacheln .kennzahl-link { padding: .55rem .8rem; height: 100%; box-sizing: border-box; align-content: start; gap: .15rem; }
@media (max-width: 900px) { .parzellen-kennzahlen.arbeit-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .parzellen-kennzahlen.arbeit-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Auswertungen › Listen */
.listen-katalog { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .75rem; }
.liste-karte { display: flex; flex-direction: column; gap: .4rem; padding: .85rem 1rem; }
.liste-karte h2 { font-size: 1.05rem; margin: 0; } .liste-karte h2 a { color: inherit; text-decoration: none; } .liste-karte h2 a:hover { color: var(--akzent); text-decoration: underline; }
.liste-karte .hinweis { margin: 0; flex: 1 1 auto; font-size: .9rem; }
.liste-knoepfe { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .3rem; }
.liste-knoepfe .knopf { padding: .32rem .6rem; font-size: .88rem; gap: .3rem; }
.liste-unter { margin: .15rem 0 0; }
.liste-anzahl { margin: -.4rem 0 .5rem; }
.listentabelle tbody tr.markiert td { background: var(--warn-bg); }
.listentabelle tfoot tr.summe td { font-weight: 700; border-top: 2px solid var(--text); }
/* Listen-Ansicht ohne waagerechtes Scrollen: Texte umbrechen (auch lange E-Mail-Adressen), Beträge bleiben einzeilig */
@media (min-width: 641px) {
  .listentabelle { table-layout: auto; }
  .listentabelle th, .listentabelle td { overflow-wrap: break-word; padding: .4rem .45rem; }
  .listentabelle th { hyphens: auto; -webkit-hyphens: auto; }
  .listentabelle td.c-umbruch { overflow-wrap: anywhere; }
  .listentabelle td.c-datum { white-space: nowrap; }
  .listentabelle th .sortknopf { white-space: normal; text-align: inherit; hyphens: auto; -webkit-hyphens: auto; }
  .listentabelle.breit { font-size: .82rem; }
  .listentabelle.breit th, .listentabelle.breit td { padding: .35rem .35rem; }
  /* sehr viele Spalten (z. B. Mitgliederliste individuell): feste Spaltenbreiten, Inhalte brechen notfalls mitten im Wort um – nie waagerecht scrollen */
  .listentabelle.sehr-breit { table-layout: fixed; font-size: .76rem; }
  .listentabelle.sehr-breit th, .listentabelle.sehr-breit td, .listentabelle.sehr-breit td.c-datum, .listentabelle.sehr-breit .zahl { overflow-wrap: anywhere; white-space: normal; padding: .3rem .25rem; }
}
.listenfilter .spaltenwahl { flex: 1 1 100%; order: 10; margin: .2rem 0 0; padding: .5rem .7rem .6rem; border: 1px solid var(--rand); border-radius: var(--radius);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .25rem .8rem; }
.listenfilter .spaltenwahl legend { padding: 0 .3rem; font-size: .9rem; }
.journalfilter.listenfilter .spaltenwahl label.auswahl { display: flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--text); margin: 0; cursor: pointer; }
.journalfilter.listenfilter .spaltenwahl input[type=checkbox] { width: 1rem; height: 1rem; flex: 0 0 auto; margin: 0; padding: 0; }
.listenfilter .filterknoepfe { order: 11; }
.journalfilter.listenfilter:has(.spaltenwahl) { flex-wrap: wrap; }
.journalfilter.listenfilter:has(.spaltenwahl) > .spaltenwahl { flex: 1 1 100%; }
/* mittlere Breite (Tablet, kleines Fenster): Nebenspalten ausblenden – sie stehen weiter in PDF und Excel */
@media (min-width: 641px) and (max-width: 1000px) { .listentabelle .c-neben { display: none; } }
@media (max-width: 640px) {
  .listen-katalog { grid-template-columns: 1fr; }
  .liste-knoepfe .knopf { flex: 1 1 0; justify-content: center; }
  .listentabelle tfoot tr.summe td:not([data-label]) { display: none; }
  .listenfilter .spaltenwahl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Lageplan (Auswertungen › Listen › Lageplan, Verwaltung › Verein › Flächen › Lageplan) */
.lageplan-kopf { display: flex; justify-content: space-between; gap: .6rem 2.5rem; flex-wrap: wrap; align-items: flex-start; margin: 0 0 .8rem;
  background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); padding: .8rem 1.5rem; }
.lageplan-daten { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; margin: 0; }
.lageplan-daten dt { font-size: .78rem; color: var(--leise); } .lageplan-daten dd { margin: 0; font-weight: 600; }
.lageplan-bilanz { border-collapse: collapse; font-size: .88rem; } .lageplan-bilanz td { padding: .1rem 0 .1rem 1.2rem; } .lageplan-bilanz td:first-child { padding-left: 0; }
.lageplan-bilanz tr.summe td { font-weight: 700; border-top: 1px solid var(--text); }
.lp-legende-marke { display: inline-block; width: .9em; height: .9em; margin-right: .3em; vertical-align: -.1em; background: rgb(255, 214, 120); border: 1px solid #555; }
.lageplan-rahmen { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: 1rem 1.5rem; margin-bottom: .6rem; }
.lageplan-svg { display: block; width: 100%; height: auto; max-height: 78vh; font-family: Helvetica, Arial, sans-serif; }
.lageplan-svg text { fill: #111; }
.lageplan-svg .lp-name.frei, .lageplan-svg text.frei { fill: #777; font-style: italic; }
.lageplan-svg .lp-parzelle, .lageplan-svg .lp-gebaeude, .lageplan-svg .lp-flaeche, .lageplan-svg .lp-kasten { stroke: #222; stroke-width: .6; }
.lageplan-svg .lp-weg, .lageplan-svg .lp-el-weg .lp-kasten { stroke: none; }
.lageplan-svg .lp-el-text .lp-kasten { stroke: #999; stroke-dasharray: 2 2; stroke-width: .4; }
.lageplan-svg .lp-aussen { fill: #fff; } .lageplan-svg .lp-kante { stroke: #222; stroke-width: .8; }
.lageplan-svg .lp-parzelle.marke { stroke-width: 1.2; }
.lageplan-svg .lp-parzelle:hover { stroke-width: 1.4; }
/* Editor */
.lp-werkzeuge { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; margin: 0 0 .8rem; }
.lp-vorlage > summary { list-style: none; cursor: pointer; } .lp-vorlage > summary::-webkit-details-marker { display: none; }
.lp-vorlage[open] form { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; }
.lp-leiste { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; margin: 0 0 .5rem; }
.lp-leiste .lp-neu-text { font-size: .88rem; color: var(--leise); }
.lp-leiste .knopf-klein { border-style: solid; }
.lp-raster { margin-left: auto; font-size: .85rem; color: var(--leise); display: flex; gap: .3rem; align-items: center; } .lp-raster select { width: auto; padding: .15rem .3rem; }
.lp-flaeche { background: #fff; border: 1px solid var(--rand); border-radius: var(--radius); padding: .4rem; margin-bottom: .5rem; touch-action: none; overflow: hidden; }
.lp-flaeche:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.lageplan-svg.lp-bearbeiten .lp-raster-hg { fill: #fff; }
.lageplan-svg.lp-bearbeiten .lp-el { cursor: move; }
.lageplan-svg.lp-bearbeiten .lp-griff-flaeche { fill: none; stroke: #bbb; stroke-dasharray: 3 3; stroke-width: .4; pointer-events: none; }
.lageplan-svg.lp-bearbeiten .lp-rahmen { fill: none; stroke: #1f6feb; stroke-width: 1.2; stroke-dasharray: 3 2; pointer-events: none; }
.lageplan-svg.lp-bearbeiten .lp-groesse { fill: #1f6feb; stroke: #fff; stroke-width: .6; cursor: nwse-resize; }
.lp-speichern { margin: .6rem 0; }
.lp-tabelle > summary { cursor: pointer; font-weight: 600; margin: .4rem 0; }
.lp-zeilen td { vertical-align: middle; } .lp-zeilen input.zahl { width: 4.2rem; text-align: right; } .lp-zeilen .lp-was { display: flex; gap: .3rem; flex-wrap: wrap; }
.lp-zeilen .lp-was select, .lp-zeilen .lp-was input { min-width: 10rem; flex: 1 1 10rem; } .lp-zeilen .lp-optionen select { width: auto; }
.lp-zeilen tr.gewaehlt td { background: var(--akzent-hell); }
.lp-zeilen tr.entfernt td { opacity: .45; text-decoration: line-through; }
@media (max-width: 640px) {
  .lageplan-rahmen { padding: .5rem .7rem; }
  .lageplan-kopf { padding: .7rem 1rem; gap: .6rem 1.5rem; }
  .lageplan-rahmen .lageplan-svg { min-width: 0; }
}
/* Vorschau: stornierte Jahresrechnungen (Positionen ohne Rechnung) */
.ohne-rechnung-karte { margin-bottom: 1rem; border-color: var(--warn); }
.ohne-rechnung-karte h2 { font-size: 1.05rem; margin: 0 0 .3rem; }
.ohne-rechnung-liste { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .35rem; }
.ohne-rechnung-liste li { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; padding: .35rem 0; border-top: 1px solid var(--rand); }
.ohne-rechnung-liste form { margin: 0; }
/* Sammelversand per E-Mail: Dialog mit Fortschritt und Sendebericht (sammelversand.js) */
html.sv-gesperrt, html.sv-gesperrt body { overflow: hidden; }
.sv-schleier { position: fixed; inset: 0; z-index: 1000; background: rgba(27,23,24,.55); display: flex; align-items: center; justify-content: center; padding: 1rem; backdrop-filter: blur(2px); }
.sv-dialog { background: var(--fl); color: var(--text); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35); width: min(640px, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.3rem 1.5rem 1.2rem; }
.sv-titel { margin: 0 0 .4rem; font-size: 1.2rem; }
.sv-text { margin: 0 0 .8rem; color: var(--leise); }
.sv-vorschau { margin: 0 0 1rem; padding-left: 1.1rem; font-size: .9rem; } .sv-leise { color: var(--leise); list-style: none; margin-left: -1.1rem; }
.sv-balken { position: relative; height: 18px; border-radius: 99px; background: var(--akzent-hell); overflow: hidden; display: flex; margin: .6rem 0 .4rem; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.sv-balken-fuellung { height: 100%; width: 0; background: linear-gradient(90deg, var(--akzent), #db0e3e); transition: width .35s ease; position: relative; overflow: hidden; }
.sv-balken-fuellung::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); animation: sv-glanz 1.4s linear infinite; }
.sv-balken-fehler { height: 100%; width: 0; background: var(--fehler); transition: width .35s ease; }
@keyframes sv-glanz { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sv-balken-fuellung::after { animation: none; } .sv-balken-fuellung, .sv-balken-fehler { transition: none; } }
.sv-zahlen { display: flex; gap: .5rem 1.2rem; flex-wrap: wrap; font-size: .9rem; font-variant-numeric: tabular-nums; } .sv-prozent { font-weight: 700; } .sv-rest { margin-left: auto; color: var(--leise); }
.sv-aktuell { margin: .6rem 0; min-height: 1.4em; font-size: .92rem; overflow-wrap: anywhere; }
.sv-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0 .8rem; }
.sv-kachel { border: 1px solid var(--rand); border-radius: var(--radius); padding: .45rem .6rem; display: grid; } .sv-kachel strong { font-size: 1.3rem; font-variant-numeric: tabular-nums; } .sv-kachel span { font-size: .8rem; color: var(--leise); }
.sv-kachel.ok strong { color: var(--ok); } .sv-kachel.fehler strong { color: var(--fehler); }
.sv-protokoll { list-style: none; margin: 0 0 .6rem; padding: 0; font-size: .85rem; display: grid; gap: .2rem; }
.sv-protokoll li { display: grid; grid-template-columns: 1.2rem auto 1fr; gap: .1rem .5rem; align-items: baseline; padding: .2rem .4rem; border-radius: 4px; background: var(--bg); }
.sv-protokoll .sv-meldung { grid-column: 3; color: var(--leise); overflow-wrap: anywhere; } .sv-protokoll .sv-name { overflow-wrap: anywhere; }
.sv-protokoll .sv-ok .sv-symbol { color: var(--ok); font-weight: 700; } .sv-protokoll .sv-fehler .sv-symbol, .sv-protokoll .sv-fehler .sv-meldung { color: var(--fehler); font-weight: 600; }
.sv-hinweis { font-size: .82rem; color: var(--leise); margin: .4rem 0 .8rem; }
.sv-knoepfe { display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; position: sticky; bottom: -1.2rem; background: var(--fl); padding: .6rem 0 .2rem; margin-bottom: -.2rem; } .sv-knoepfe form { margin: 0; }
.sv-tabelle { max-height: 40vh; overflow: auto; border: 1px solid var(--rand); border-radius: var(--radius); margin-bottom: .6rem; }
.sv-tabelle table { margin: 0; border: 0; } .sv-tabelle .sv-adresse { overflow-wrap: anywhere; } .sv-tabelle tr.sv-zeile-fehler td { background: var(--fehler-bg); }
@media (max-width: 640px) {
  .sv-schleier { align-items: flex-start; padding: .5rem; }
  .sv-dialog { padding: 1rem; max-height: calc(100vh - 1rem); } .sv-kacheln { gap: .35rem; } .sv-rest { margin-left: 0; }
  .sv-tabelle thead { display: none; }
  .sv-tabelle tr { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .45rem .6rem; border-bottom: 1px solid var(--rand); }
  .sv-tabelle td { display: block; padding: 0; border: 0; white-space: normal; background: none !important; }
  .sv-tabelle tr.sv-zeile-fehler { background: var(--fehler-bg); }
  .sv-knoepfe { bottom: -1rem; }
  .sv-tabelle td:nth-child(3), .sv-tabelle td:nth-child(4) { grid-column: 1 / -1; font-size: .85rem; }
}

/* Ausgangsrechnungen › Herunterladen (angehakte Rechnungen als ein PDF oder ZIP) */
.rechnung-download { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; padding: .55rem .8rem; margin: 0 0 .6rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
.rechnung-download .rd-titel { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; }
.rechnung-download .rd-wahl { font-size: .88rem; color: var(--leise); }
.rechnung-download .rd-wahl .knopf-link { font: inherit; padding: .1rem 0; border: 0; background: none; color: var(--akzent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rechnung-download .knopf-klein { border-style: solid; }
.karte .rechnung-download { background: var(--bg); }
.rechnung-download .rd-zahl { font-size: .88rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.rechnung-download .rd-zahl strong { color: var(--text, inherit); }
.rechnung-download .rd-knoepfe { display: inline-flex; gap: .4rem; margin-left: auto; }
.rechnung-download .rd-knoepfe .knopf-klein[disabled] { opacity: .5; cursor: not-allowed; }
.rechnungstabelle.mit-wahl th.c-wahl, .rechnungstabelle.mit-wahl td.c-wahl { width: 1.6rem; padding-right: 0; cursor: pointer; }
.rechnungstabelle.mit-wahl .c-wahl input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; vertical-align: middle; }
@media (max-width: 760px) {
  .rechnung-download .rd-knoepfe { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .rechnung-download .rd-knoepfe .knopf-klein { justify-content: center; }
  #rechnungen.mit-wahl tbody tr, .karten-mobil.mit-wahl tbody tr { position: relative; padding-left: 2.6rem; }
  #rechnungen.mit-wahl td.c-wahl, .karten-mobil.mit-wahl td.c-wahl { position: absolute; left: 0; top: 0; bottom: 0; width: 2.4rem; display: flex; justify-content: center; padding-top: .75rem; }
  #rechnungen.mit-wahl td.c-wahl input, .karten-mobil.mit-wahl td.c-wahl input { width: 1.3rem; height: 1.3rem; }
}
@media print { .rechnungstabelle .c-wahl { display: none; } }
.rd-schleier[hidden] { display: none; }
.rd-dialog { width: min(520px, 100%); }
.rd-teilung { border: 0; padding: 0; margin: 0 0 .6rem; display: grid; gap: .45rem; }
.rd-teilung label { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem .7rem; border: 1px solid var(--rand); border-radius: 10px; cursor: pointer; }
.rd-teilung label:has(input:checked) { border-color: var(--akzent); background: var(--akzent-hell); }
.rd-teilung label { justify-content: flex-start; text-align: left; font-weight: 400; }
.rd-teilung input { margin: .2rem 0 0; width: auto; min-width: 0; flex: none; accent-color: var(--akzent); }
.rd-teilung label > span { flex: 1; min-width: 0; }
.teilung-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.teilung-karte h2 { margin: 0 0 .3rem; font-size: 1.1rem; }
.teilung-karte .teilung-zahl { margin: 0; font-size: 1.05rem; } .teilung-karte .teilung-zahl strong { font-size: 1.6rem; }
.teilung-karte form { margin: .7rem 0 .5rem; }
.teilung-liste ul { margin: .4rem 0 0; padding-left: 1.1rem; columns: 2; font-size: .9rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .teilung-karten { grid-template-columns: 1fr; } }
/* Jahresabschluss: Kopf mit Jahreswahl (wechselt sofort) und gleich hohen Knöpfen rechts */
.abschluss-kopf { align-items: center; }
.abschluss-kopf .knopfleiste { align-items: center; margin-left: auto; }
.abschluss-kopf .jahrwahl-form { display: inline-flex; gap: .4rem; margin: 0; }
.abschluss-kopf .jahrwahl-form select { width: auto; min-width: 6.5rem; height: 2.4rem; padding-top: 0; padding-bottom: 0; }
.abschluss-kopf .knopfleiste .knopf { height: 2.4rem; box-sizing: border-box; }
/* Druckansichten: Knöpfe rechts, Drucken ganz rechts */
.aktionen.druck-aktionen { justify-content: flex-end; max-width: 900px; margin-left: auto; margin-right: auto; }
/* Formatierter Text (Korrespondenz): Editor und Anzeige – je Zeile ein Absatz ohne Abstand */
.feditor { position: relative; border: 1px solid var(--rand); border-radius: var(--radius, 8px); background: var(--fl); }
.feditor > .fe-leiste { border-radius: var(--radius, 8px) var(--radius, 8px) 0 0; }
.feditor:focus-within { border-color: var(--akzent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 22%, transparent); }
.fe-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .3rem .4rem; border-bottom: 1px solid var(--rand); background: var(--bg); }
.fe-knopf { display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--text); cursor: pointer; }
.fe-knopf:hover { background: var(--fl); border-color: var(--rand); }
.fe-knopf.an { background: var(--akzent-hell); border-color: var(--akzent); color: var(--akzent); }
.fe-trenner { width: 1px; height: 1.4rem; background: var(--rand); margin: 0 .25rem; }
.fe-platzhalter { width: auto; max-width: 100%; min-width: 0; height: 2.1rem; padding-top: 0; padding-bottom: 0; font-size: .88rem; }
.fe-flaeche { min-height: 14rem; max-height: 60vh; overflow: auto; padding: .7rem .85rem; line-height: 1.5; outline: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.fe-flaeche[aria-invalid="true"] { background: color-mix(in srgb, var(--fehler, #b3261e) 6%, var(--fl)); }
.fe-flaeche p, .ftext p { margin: 0; }
.fe-flaeche ul, .fe-flaeche ol, .ftext ul, .ftext ol { margin: 0; padding-left: 1.6rem; }
.ftext { line-height: 1.5; }
@media (max-width: 640px) { .fe-leiste .fe-platzhalter { flex: 1 1 100%; } .fe-flaeche { min-height: 11rem; } }
.fe-format { width: auto; min-width: 0; height: 2.1rem; padding-top: 0; padding-bottom: 0; font-size: .88rem; }
.fe-knopf { position: relative; }
.fe-farbstrich { position: absolute; left: .45rem; right: .45rem; bottom: .3rem; height: 3px; border-radius: 2px; background: var(--text); }
.fe-pop { position: absolute; z-index: 20; background: var(--fl); border: 1px solid var(--rand); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); padding: .45rem; }
.fe-farben { display: grid; grid-template-columns: repeat(7, 1.6rem); gap: .3rem; }
.fe-farbe { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; border: 2px solid var(--fl); box-shadow: 0 0 0 1px var(--rand); cursor: pointer; }
.fe-farbe:hover, .fe-farbe:focus-visible { box-shadow: 0 0 0 2px var(--akzent); }
.fe-farbe.standard { background: linear-gradient(135deg, var(--fl) 45%, #b3261e 46%, #b3261e 54%, var(--fl) 55%) !important; }
.fe-linkpop { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; width: min(26rem, calc(100% - 1rem)); }
.fe-linkpop input { flex: 1 1 12rem; min-width: 0; }
.fe-linkpop .knopf-klein { border-style: solid; }
.fe-meldung { font-size: .85rem; color: var(--leise); padding: 0 .85rem; }
.fe-meldung:empty { display: none; }
.feditor.laedt .fe-flaeche { opacity: .6; }
.fe-flaeche h2, .ftext h2 { font-size: 1.3rem; margin: .5rem 0 .15rem; line-height: 1.3; }
.fe-flaeche h3, .ftext h3 { font-size: 1.08rem; margin: .4rem 0 .1rem; line-height: 1.3; }
.fe-flaeche a, .ftext a { color: #1f5fa8; text-decoration: underline; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.fe-flaeche, .ftext) a { color: #8db8ef; } }
.feld:has(> .feditor) { min-width: 0; }
.feditor { width: 100%; min-width: 0; box-sizing: border-box; }
.fe-leiste { min-width: 0; }
.fe-format { max-width: 10rem; flex: 0 1 auto; }
@media (max-width: 640px) {
  .fe-knopf { width: 2rem; height: 2rem; }
  .fe-trenner { margin: 0 .1rem; }
  .fe-linkpop { left: .4rem !important; right: .4rem; width: auto; }
  .fe-linkpop input { flex-basis: 100%; }
}
/* Anhänge im Editor und in der Übersicht */
.fe-anhaenge, .korr-anhaenge { list-style: none; margin: 0; padding: .45rem .7rem; display: flex; flex-wrap: wrap; gap: .4rem; border-top: 1px solid var(--rand); }
.korr-anhaenge { border-top: 0; padding: .2rem .9rem .6rem; }
.fe-anhang, .korr-anhaenge li { display: inline-flex; align-items: center; gap: .35rem; max-width: 100%; padding: .2rem .35rem .2rem .55rem; border: 1px solid var(--rand); border-radius: 99px; background: var(--bg); font-size: .88rem; }
.korr-anhaenge li { padding-right: .7rem; }
.fe-anhang svg, .korr-anhaenge svg { flex: none; color: var(--leise); }
.fe-anhang-name, .korr-anhaenge a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.korr-anhaenge a { display: inline-flex; align-items: center; gap: .3rem; }
.fe-anhang-groesse { color: var(--leise); font-size: .8rem; white-space: nowrap; }
.fe-anhang-weg { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--leise); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.fe-anhang-weg:hover { background: var(--rand); color: var(--text); }
.zeilen-link tbody td :is(a, button):not(.zeilen-ziel) { position: relative; z-index: 2; }
.korr-eintrag { scroll-margin-top: 8rem; }
.korr-verteiler { display: inline-flex; align-items: center; gap: .25rem; margin-left: .35rem; padding: .05rem .5rem; border-radius: 99px; background: var(--akzent-hell); color: var(--akzent); font-size: .75rem; font-weight: 600; vertical-align: middle; white-space: nowrap; }
.korr-verteiler svg { width: 13px; height: 13px; }
.korr-verteiler-hinweis { margin: 0; padding: .55rem .9rem 0; color: var(--leise); }
/* Rundschreiben › Ausgewählte Mitglieder */
.rs-auswahl { margin: -.1rem 0 .2rem 1.6rem; border: 1px solid var(--rand); border-radius: 10px; background: var(--fl); }
.rs-auswahl[data-zu] { display: none; }
.rs-auswahl[aria-invalid="true"] { border-color: var(--fehler, #b3261e); }
.rs-auswahl-kopf { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; padding: .5rem .6rem; border-bottom: 1px solid var(--rand); }
.rs-suche { flex: 1 1 14rem; min-width: 0; }
.rs-auswahl-knoepfe { font-size: .88rem; color: var(--leise); white-space: nowrap; }
.rs-auswahl-knoepfe .knopf-link { font: inherit; padding: 0; border: 0; background: none; color: var(--akzent); text-decoration: underline; cursor: pointer; }
.rs-liste { list-style: none; margin: 0; padding: .3rem; max-height: 22rem; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .15rem .4rem; }
.rs-liste li[hidden] { display: none; }
.rs-liste label { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .35rem .5rem; border-radius: 8px; cursor: pointer; }
.rs-liste label:hover { background: var(--bg); }
.rs-liste label:has(input:checked) { background: var(--akzent-hell); }
.rs-liste input { grid-row: 1 / 3; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--akzent); }
.rs-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.rs-info { grid-column: 2; min-width: 0; }
.rs-weg { grid-row: 1 / 3; grid-column: 3; color: var(--leise); }
.rs-leer { margin: 0; padding: .5rem .8rem; }
.rs-auswahl .fehler { margin: 0 .6rem .5rem; }
@media (max-width: 640px) { .rs-auswahl { margin-left: 0; } .rs-liste { grid-template-columns: 1fr; max-height: 60vh; } }

/* ===================================================================== Buchhaltung › Checkliste */
.zweispaltig { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .75rem 1rem; }
button.mini { padding: .15rem .3rem; line-height: 0; }
button.mini:disabled { opacity: .3; cursor: default; }
.checkliste-posten .c-reihe { width: 1%; white-space: nowrap; }
.checkliste-stand { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: 0 0 .75rem; }
.checkliste-offen { display: inline-flex; align-items: center; gap: .3rem; color: var(--warn); font-weight: 600; }
.checkliste-rahmen { overflow-x: auto; }
.checkliste-tabelle { border-collapse: separate; border-spacing: 0; min-width: 760px; }
.checkliste-tabelle th, .checkliste-tabelle td { border-bottom: 1px solid var(--rand); }
.checkliste-tabelle .c-posten { position: sticky; left: 0; z-index: 1; background: var(--fl); min-width: 12rem; max-width: 20rem; text-align: left; font-weight: 400; border-right: 1px solid var(--rand); }
.checkliste-tabelle thead .c-posten, .checkliste-tabelle tfoot .c-posten { font-weight: 600; }
.checkliste-tabelle .posten-name { display: block; font-weight: 600; }
.checkliste-tabelle .posten-info { display: block; color: var(--leise); font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.checkliste-tabelle .c-monat { text-align: center; vertical-align: middle; padding: .3rem .15rem; width: 3.4rem; }
.checkliste-tabelle thead .c-monat { font-size: .85rem; color: var(--leise); font-weight: 600; }
.checkliste-tabelle .c-monat.aktuell { background: var(--akzent-hell); }
.checkliste-tabelle thead .c-monat.aktuell { color: var(--akzent); }
.checkliste-tabelle tfoot td, .checkliste-tabelle tfoot th { font-size: .8rem; color: var(--leise); border-bottom: 0; font-variant-numeric: tabular-nums; }
.checkliste-tabelle tfoot td.mit-offen { color: var(--warn); font-weight: 600; }
.checkliste-tabelle tr.archiviert .posten-name { color: var(--leise); }
.checkliste-tabelle tbody tr:hover .c-posten, .checkliste-tabelle tbody tr:hover td { background: color-mix(in srgb, var(--akzent-hell) 55%, var(--fl)); }
.checkliste-tabelle .haken-form { margin: 0; display: inline; }
.haken { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--rand); background: var(--fl); color: var(--leise); vertical-align: middle; }
button.haken { cursor: pointer; }
button.haken:hover { border-color: var(--akzent); }
.haken.z-faellig { border-style: dashed; }
.haken.z-offen { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.haken.z-erledigt { border-color: var(--ok); background: var(--ok); color: #fff; }
.haken.z-entfaellt { border-color: var(--rand); background: var(--akzent-hell); color: var(--leise); }
.haken.laedt { opacity: .5; }
.checkliste-legende .haken { width: 1.35rem; height: 1.35rem; margin: 0 .15rem; }
.checkliste-legende .haken svg { width: 12px; height: 12px; }
@media (max-width: 640px) {
  .checkliste-tabelle .c-posten { min-width: 9rem; max-width: 11rem; }
  .checkliste-tabelle .posten-info { display: none; }
}
@media print {
  .checkliste-tabelle .c-posten { position: static; }
  .haken { width: 1.2rem; height: 1.2rem; }
}
.kachel-warn { color: var(--warn); font-weight: 600; }

/* ===================================================================== Buchhaltung › Belege */
@media (min-width: 641px) {
  .belegfilter { flex-wrap: nowrap; gap: .45rem; }
  .belegfilter > * { flex: 0 0 auto; }
  .belegfilter .f-jahr { flex-basis: 5.4rem; } .belegfilter .f-monat { flex: 0 1 8rem; } .belegfilter .f-bereich { flex: 0 1 15rem; min-width: 8rem; } .belegfilter .f-suche { flex: 1 1 10rem; }
}
.belege-summen { display: flex; flex-wrap: wrap; gap: .3rem 1.25rem; align-items: baseline; margin: 0 0 .6rem; font-variant-numeric: tabular-nums; }
.belegtabelle tbody tr { position: relative; cursor: pointer; }
.belegtabelle tbody td.c-nr a { font-weight: 600; }
.belegtabelle tbody td.c-nr a::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.belegtabelle tbody td.c-datei a { position: relative; z-index: 2; display: inline-flex; padding: .15rem; color: var(--leise); }
.belegtabelle tbody td.c-datei a:hover { color: var(--akzent); }
.belegtabelle tbody tr:hover td { background: var(--akzent-hell); }
.belegtabelle .c-betrag { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.belegtabelle .c-datei { width: 1%; }
.belegtabelle .belege-bem { display: block; font-size: .8rem; }
.bereich-marke { display: inline-block; margin: .05rem .25rem .05rem 0; padding: .02rem .45rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--rand); background: var(--bg); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.bereich-marke.b-einnahme { border-color: color-mix(in srgb, var(--ok) 45%, var(--rand)); }
.bereich-marke .bereich-betrag { color: var(--leise); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  #belege, #belege tbody { display: block; border: 0; background: none; }
  #belege thead { display: none; }
  #belege tr { display: grid; grid-template-columns: auto 1fr auto; gap: .2rem .6rem; padding: .65rem .8rem; margin-bottom: .5rem; background: var(--fl); border: 1px solid var(--rand); border-radius: var(--radius); }
  #belege td { border: 0; padding: 0; }
  #belege td.c-nr { grid-column: 1; grid-row: 1; } #belege td.c-datum { grid-column: 2; grid-row: 1; color: var(--leise); font-size: .85rem; align-self: center; }
  #belege td.c-betrag { grid-column: 3; grid-row: 1; } #belege td.c-text { grid-column: 1 / -1; grid-row: 2; }
  #belege td.c-bereiche { grid-column: 1 / 3; grid-row: 3; } #belege td.c-datei { grid-column: 3; grid-row: 3; text-align: right; width: auto; }
}
.belegform { max-width: 56rem; }
.beleg-kopf { display: grid; grid-template-columns: minmax(10rem, 12rem) minmax(9rem, 11rem) minmax(12rem, 1fr); gap: .75rem 1rem; align-items: start; }
.beleg-kopf .f-nummer { display: grid; gap: .15rem; } .beleg-kopf .f-nummer .bez { font-size: .95rem; }
.beleg-kopf .nummer-wert { font-weight: 700; font-size: 1.1rem; padding: .35rem 0; font-variant-numeric: tabular-nums; }
.beleg-kopf .f-nummer .hinweis, .beleg-kopf .f-betrag .hinweis { font-size: .78rem; margin: .1rem 0 0; }
.beleg-kopf .f-betrag input { font-weight: 700; }
@media (max-width: 640px) { .beleg-kopf { grid-template-columns: 1fr 1fr; } .beleg-kopf .f-betrag { grid-column: 1 / -1; } }
.positionen .pos-liste { display: grid; gap: .45rem; }
.pos-zeile { display: grid; grid-template-columns: minmax(12rem, 2fr) minmax(7.5rem, 9rem) minmax(8rem, 1.5fr) 2rem; gap: .45rem; align-items: center; }
.pos-zeile select { width: 100%; }
.pos-zeile .pos-weg { justify-self: center; }
@media (max-width: 640px) {
  .pos-zeile { grid-template-columns: 1fr 7.5rem 2rem; padding-bottom: .45rem; border-bottom: 1px dashed var(--rand); }
  .pos-zeile .p-bereich { grid-column: 1 / -1; } .pos-zeile .p-text { grid-column: 1 / 2; grid-row: 2; } .pos-zeile .p-betrag { grid-column: 2; grid-row: 2; } .pos-zeile .pos-weg { grid-row: 2; grid-column: 3; }
}
.pos-fuss { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin: .5rem 0 0; font-size: .9rem; }
.beleg-datei .datei-vorhanden { display: flex; gap: .4rem; align-items: center; margin: 0 0 .4rem; }
main.datenansicht .beleg-datei label { display: none; }
main.datenansicht .positionen .hinweis, main.datenansicht #pos-plus { display: none; }
.belegform-aktionen { max-width: 56rem; margin-top: 1rem; display: flex; gap: .75rem; flex-wrap: wrap; }
main.datenansicht .belegform-aktionen { display: none; }
.mit-einheit.kurz { max-width: 9rem; }
.abschnitt-titel { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.bereichtabelle .c-reihe { width: 1%; white-space: nowrap; }

/* ===================================================================== Gewinnermittlung (EÜR) */
.euer { max-width: 48rem; }
.euer-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.euer-kopf p { margin: 0; } .euer-firma { text-align: right; color: var(--leise); font-size: .9rem; }
.euer-tabelle { margin-bottom: 1.25rem; }
.euer-tabelle caption { text-align: left; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem; padding: 0 0 .4rem; color: var(--akzent); }
.euer-tabelle .c-betrag, .euer-tabelle .c-anzahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
.euer-tabelle .c-anzahl { color: var(--leise); }
.euer-tabelle tfoot th, .euer-tabelle tfoot td { font-weight: 700; border-top: 2px solid var(--text); border-bottom: 0; text-align: left; }
.euer-tabelle tfoot td.c-betrag { text-align: right; }
.euer-tabelle tr.leer-zeile td { color: var(--leise); }
.euer-anteil { display: block; font-size: .78rem; }
.euer-gewinn { display: flex; justify-content: space-between; align-items: baseline; padding: .8rem 1rem; border-radius: var(--radius); background: var(--akzent-hell); font-size: 1.1rem; margin: 0 0 .75rem; }
.euer-gewinn strong { font-size: 1.4rem; font-variant-numeric: tabular-nums; color: var(--ok); } .euer-gewinn.verlust strong { color: var(--fehler); }
@media print {
  .euer { max-width: none; border: 0; padding: 0; } .euer-tabelle a { color: inherit; text-decoration: none; }
}

/* Listen Posten / Bereiche: Bearbeiten und Löschen je Zeile */
.checkliste-posten td.c-aktion, .bereichtabelle td.c-aktion { width: 1%; white-space: nowrap; text-align: right; }
.checkliste-posten td.c-aktion form, .bereichtabelle td.c-aktion form { display: inline; }
a.knopf.mini { padding: .15rem .3rem; line-height: 0; min-height: 0; display: inline-flex; vertical-align: middle; }
.mini.loeschen-knopf { color: var(--fehler); }
.mini.loeschen-knopf:hover { border-color: var(--fehler); }
.f-nummer.nummer-neu .nummer-wert { color: var(--akzent); }
.checkliste-posten td.c-aktion :is(a.knopf.mini, button.mini), .bereichtabelle td.c-aktion :is(a.knopf.mini, button.mini) { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.6rem; padding: 0; margin: 0; vertical-align: middle; box-sizing: border-box; }

/* Seitenkopf und angehefteter Block beginnen direkt unter der Kopfzeile: beim Scrollen kein Versatz */
main:is(.datenansicht, .datenbearbeitung) .seitenkopf { margin-top: -1rem; padding-top: 1rem; }
.anheft-kopf { margin-top: -1rem; padding-top: 1rem; }
.assistent-kopf { margin-top: -1rem; padding-top: 1rem; }
/* kein Nachfedern am oberen/unteren Rand (iPhone/iPad, Web-App): Kopfzeile bleibt ruhig stehen */
html, body { overscroll-behavior-y: none; }
/* Seitenkopf: Knopf „Speichern und nächster Beleg“ */
.seitenkopf button.kopf-speichern-weiter { display: inline-flex; align-items: center; gap: .4rem; }
/* Checkliste: Kopfzeile (Posten, Monate) und erste Spalte bleiben beim Scrollen stehen */
/* (kein eigener Scrollbereich: die Seite scrollt, Kopf- und Summenzeile bleiben am Rand des Fensters stehen) */
.checkliste-rahmen.tabellenrahmen { overflow: visible; }
.checkliste-tabelle thead th { position: sticky; top: var(--checkliste-oben, var(--kopf-hoehe, 0px)); z-index: 2; background: var(--fl); box-shadow: inset 0 -1px 0 var(--rand); }
.checkliste-tabelle tfoot th, .checkliste-tabelle tfoot td { position: sticky; bottom: var(--checkliste-unten, 0px); z-index: 2; background: var(--fl); box-shadow: inset 0 1px 0 var(--rand); }
.checkliste-tabelle thead th.c-posten, .checkliste-tabelle tfoot .c-posten { z-index: 3; }
.checkliste-tabelle .m-kurz { display: none; }
/* Smartphone: Tabelle passt in die Breite (kein seitliches Scrollen) */
@media (max-width: 760px) {
  .checkliste-tabelle { min-width: 0; width: 100%; table-layout: fixed; }
  .checkliste-tabelle .c-posten { min-width: 0; max-width: none; width: 6.6rem; padding: .35rem .4rem; font-size: .8rem; overflow-wrap: anywhere; hyphens: auto; }
  .checkliste-tabelle tbody .c-posten { position: static; }
  .checkliste-tabelle thead .c-posten, .checkliste-tabelle tfoot .c-posten { left: auto; }
  .checkliste-tabelle .posten-info { display: none; }
  .checkliste-tabelle .c-monat { width: auto; padding: .3rem 0; }
  .checkliste-tabelle .m-kurz { display: inline; } .checkliste-tabelle .m-lang { display: none; }
  .checkliste-tabelle .haken { width: 1.15rem; height: 1.15rem; border-width: 1.2px; }
  .checkliste-tabelle .haken svg { width: 11px; height: 11px; }
  .checkliste-tabelle tfoot td { font-size: .62rem; line-height: 1.15; }
  .checkliste-tabelle tfoot .von { display: block; }
}
@media print { .checkliste-rahmen { max-height: none !important; overflow: visible !important; } .checkliste-tabelle :is(thead, tfoot) :is(th, td) { position: static !important; } }

/* Löschen oben rechts im Bearbeiten-Modus */
.seitenkopf .knopf.kopf-loeschen { color: var(--fehler); display: inline-flex; align-items: center; gap: .4rem; }
.seitenkopf .knopf.kopf-loeschen:hover { border-color: var(--fehler); background: var(--fehler-bg); }
form.nur-hinweis:not(:has(small, .hinweis, .loeschsperre)) { display: none; }
form.nur-hinweis { border-top: 0; padding-top: .3rem; }
.knopf.gesperrt-marke { cursor: default; color: var(--leise); display: inline-flex; align-items: center; gap: .4rem; }

/* Gewinnermittlung: Jahresabschluss */
.karte.jahresabschluss { padding: .8rem 1.1rem; margin-bottom: 1rem; }
.abschluss-zeile { display: flex; align-items: center; justify-content: space-between; gap: .8rem 1.2rem; flex-wrap: wrap; }
.abschluss-zeile form { margin: 0; }
.abschluss-zeile button { display: inline-flex; align-items: center; gap: .45rem; }
.abschluss-status { display: flex; gap: .55rem; align-items: flex-start; margin: 0; }
.abschluss-status svg { flex: none; margin-top: .15rem; color: var(--akzent); }
.abschluss-status.zu svg { color: var(--ok); }
.abschluss-oeffnen { margin-top: .6rem; } .abschluss-oeffnen summary { cursor: pointer; color: var(--leise); font-size: .9rem; }
.abschluss-oeffnen form { margin-top: .6rem; max-width: 34rem; }
.abschluss-hinweis { margin: 0 0 .6rem; }

/* Checkliste: Bearbeiten-Modus */
.checkliste-tabelle.im-bearbeiten { outline: 2px solid var(--akzent); outline-offset: -1px; }
.bearbeiten-hinweis { margin: 0 0 .6rem; }

/* Belege: Monatsregister wie eine Registerbox – Reiter Jan–Dez oben nebeneinander */
.registerbox { margin-top: .4rem; }
.monatsreiter { display: flex; gap: 3px; align-items: flex-end; overflow-x: auto; scrollbar-width: none; padding: 0 .4rem; position: relative; z-index: 1; }
.monatsreiter::-webkit-scrollbar { display: none; }
.monatsreiter-tab { flex: 1 0 auto; min-width: 3.6rem; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .45rem .35rem .4rem; text-decoration: none; color: var(--text, inherit);
  background: color-mix(in srgb, var(--akzent-hell) 70%, var(--fl)); border: 1px solid var(--rand); border-bottom: 0; border-radius: 9px 9px 0 0; margin-bottom: -1px; transition: background .12s, transform .12s; }
.monatsreiter-tab:hover { background: var(--fl); transform: translateY(-1px); }
.monatsreiter-tab .reiter-monat { font-weight: 600; font-size: .88rem; }
.monatsreiter-tab .reiter-zahl { font-size: .72rem; color: var(--leise); font-variant-numeric: tabular-nums; }
.monatsreiter-tab.leer .reiter-monat { color: var(--leise); font-weight: 500; }
.monatsreiter-tab[aria-selected="true"] { background: var(--fl); border-color: var(--akzent); border-top-width: 3px; padding-top: calc(.45rem - 2px); position: relative; z-index: 2; }
.monatsreiter-tab[aria-selected="true"] .reiter-monat { color: var(--akzent); }
.monatsreiter-tab[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fl); }
.monatsreiter-tab.alle { flex: 0 0 auto; margin-left: .4rem; }
.registerfaecher { background: var(--fl); border: 1px solid var(--akzent); border-radius: 10px; overflow: hidden; }
.registerbox.mit-js .monatsfach:not(.aktiv) { display: none; }
.monatsfach + .monatsfach { border-top: 1px solid var(--rand); }
.registerbox.mit-js:not(.alle-zeigen) .monatsfach { border-top: 0; }
.fach-kopf { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; margin: 0; padding: .7rem .9rem; font-size: 1.02rem; border-bottom: 1px solid var(--rand); }
.monatsfach.leer .fach-kopf { color: var(--leise); }
.registerbox.alle-zeigen .monatsfach.leer { display: none; }
.ordner-name { font-weight: 700; }
.ordner-anzahl { color: var(--leise); font-size: .9rem; font-weight: 400; }
.ordner-summen { margin-left: auto; display: flex; gap: .9rem; font-variant-numeric: tabular-nums; font-size: .92rem; font-weight: 600; }
.monatsfach .tabellenrahmen { border: 0; border-radius: 0; margin: 0; }
.ordner-leer { margin: 0; padding: .9rem; }
.ordner-neu { margin: 0; padding: .5rem .9rem .7rem; border-top: 1px solid var(--rand); }
.knopf.mini-text { font-size: .82rem; padding: .25rem .6rem; min-height: 0; }
@media (max-width: 640px) {
  .monatsreiter { padding: 0 .1rem; }
  .monatsreiter-tab { min-width: 3.1rem; padding: .4rem .25rem .35rem; }
  .ordner-summen { width: 100%; margin-left: 0; font-size: .85rem; }
}
@media print { .monatsreiter { display: none; } .registerbox .monatsfach { display: block !important; } .registerbox .monatsfach.leer { display: none !important; } .registerfaecher { border: 0; } }

/* Link zum Beleg im Dokumentenmanagement-System: PDF-Symbol */
.dms-link { display: inline-flex; align-items: center; gap: .4rem; color: #c62828; text-decoration: none; line-height: 0; border-radius: 6px; padding: 2px; transition: transform .12s, background .12s; }
.dms-link:hover, .dms-link:focus-visible { background: color-mix(in srgb, #c62828 10%, transparent); transform: translateY(-1px); }
.dms-link .pdf-symbol { filter: drop-shadow(0 1px 1px rgb(0 0 0 / .12)); }
.dms-link-gross { line-height: 1.2; padding: .3rem .6rem .3rem .4rem; border: 1px solid var(--rand); background: var(--fl); white-space: nowrap; }
.dms-link-gross span { color: var(--text, inherit); font-weight: 600; font-size: .92rem; }
.link-zeile { display: flex; gap: .5rem; align-items: center; }
.link-zeile input { flex: 1; min-width: 0; }
[data-theme="dark"] .dms-link .pdf-symbol path:first-child { fill: #2a2526; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dms-link .pdf-symbol path:first-child { fill: #2a2526; } }
.belegtabelle .c-datei { width: 2.6rem; text-align: center; }
.belegtabelle .c-datei a.dms-link, .belegtabelle .c-datei a.dms-link:visited { color: #c62828; }
.belegtabelle .c-datei a.dms-link .pdf-symbol { width: 24px; height: 28px; }

/* Startseite: Kachel Unternehmen – Name statt Zahl */
.kachel .kachel-wert.kachel-name, .kachel .kachel-einzeilig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.kachel .kachel-wert.kachel-name { font-size: 1.08rem; }

/* Gewinnermittlung: Buchungslisten je Bereich (Anlagen) */
.euer-listen { margin-top: 1.4rem; }
.euer-listen-titel { font-size: 1.15rem; margin: 0 0 .7rem; }
.euer-liste { padding: 0; margin-bottom: .9rem; overflow: hidden; scroll-margin-top: calc(var(--kopf-hoehe, 0px) + 1rem); }
.euer-liste h3 { margin: 0; padding: .7rem 1rem; font-size: 1rem; border-bottom: 1px solid var(--rand); background: var(--akzent-hell); }
.euer-liste h3 small { font-weight: 400; font-size: .85rem; }
.euer-liste .tabellenrahmen { border: 0; margin: 0; border-radius: 0; }
.euer-buchungen .c-datum { width: 7rem; } .euer-buchungen .c-betrag { width: 8rem; text-align: right; font-variant-numeric: tabular-nums; } .euer-buchungen .c-nr { width: 7rem; }
.euer-buchungen td.negativ { color: var(--fehler); }
.euer-buchungen tfoot th { text-align: left; font-weight: 500; }
.euer-buchungen tfoot tr.summe th, .euer-buchungen tfoot tr.summe td { font-weight: 700; border-top: 2px solid var(--text, #222); }
.euer-liste:target { outline: 2px solid var(--akzent); }
@media print {
  .euer-listen { break-before: page; margin-top: 0; }
  .euer-liste { break-inside: auto; border: 0; box-shadow: none; margin-bottom: 14pt; }
  .euer-liste h3 { background: none; border-bottom: 1pt solid #000; padding: 0 0 3pt; }
  .euer-buchungen thead { display: table-header-group; } .euer-buchungen tr { break-inside: avoid; }
  .euer-buchungen a { color: inherit; text-decoration: none; }
}
.euer-listen { max-width: 48rem; }
@media print { .euer-listen { max-width: none; } }

/* Beleg: Text und Rechnungsnummer nebeneinander */
.beleg-textzeile { display: grid; grid-template-columns: minmax(0, 1fr) 14rem; gap: .8rem; }
@media (max-width: 640px) { .beleg-textzeile { grid-template-columns: 1fr; } }
.rechnungsnr { white-space: nowrap; }
.vorbelegung { border: 1px solid var(--rand); border-radius: 10px; padding: .6rem .9rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.vorbelegung legend { font-weight: 600; padding: 0 .3rem; }
.vorbelegung .hinweis { margin: 0; }

/* Checkliste: Buchungsfenster beim Abhaken */
.buchen-dialog { width: min(34rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--rand); border-radius: 14px; background: var(--fl); color: var(--text, inherit); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.buchen-dialog::backdrop { background: rgba(20, 10, 12, .45); backdrop-filter: blur(2px); }
.buchen-form { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.1rem 1.1rem; }
.buchen-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; border-bottom: 2px solid var(--akzent); padding-bottom: .55rem; }
.buchen-kopf h2 { margin: 0; font-size: 1.15rem; }
.buchen-unter { margin: .1rem 0 0; }
.buchen-zu { border: 0; background: none; font-size: 1.6rem; line-height: 1; padding: 0 .2rem; color: var(--leise); cursor: pointer; }
.buchen-status { background: var(--ok-bg); color: var(--ok); border-radius: 8px; padding: .5rem .7rem; font-weight: 500; }
.buchen-felder { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .6rem; }
.buchen-felder[hidden] { display: none; }
.buchen-felder label { display: flex; flex-direction: column; gap: .2rem; }
.buchen-felder .hinweis { margin: .1rem 0 0; font-size: .78rem; }
.feldfehler { color: var(--fehler); font-size: .82rem; }
.feldfehler:empty { display: none; }
.buchen-fuss { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; border-top: 1px solid var(--rand); padding-top: .8rem; }
.buchen-fuss .link { margin-left: auto; }
.buchen-fuss [hidden] { display: none; }
@media (max-width: 520px) { .buchen-fuss button:not(.link) { flex: 1 1 100%; } .buchen-fuss .link { margin: 0 auto; } }

/* Checkliste › Posten: Spalte Buchungstext (ja/nein) */
.checkliste-posten .c-buchungstext { white-space: nowrap; }
.bt-ja, .bt-nein { display: inline-flex; align-items: center; gap: .3rem; font-size: .88rem; }
.bt-ja { color: var(--ok); font-weight: 600; }
.bt-ja svg { background: var(--ok-bg); border-radius: 50%; padding: 2px; }
.bt-nein { color: var(--leise); }

/* ===================================================================== Auswertungen (Diagramm Einnahmen/Ausgaben nach Bereichen) */
.viz { --surface-1: #fcfcfb; --text-primary: #0b0b0b; --text-secondary: #52514e; --gitter: #e4e2df;
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6; --s8: #e34948; --sx: #a9a7a2; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .viz { --surface-1: #1a1a19; --text-primary: #f0efec; --text-secondary: #c3c2b7; --gitter: #3a3937;
    --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #0ca30c; --s7: #9085e9; --s8: #e66767; --sx: #6d6b66; }
}
:root[data-theme="dark"] .viz { --surface-1: #1a1a19; --text-primary: #f0efec; --text-secondary: #c3c2b7; --gitter: #3a3937;
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #0ca30c; --s7: #9085e9; --s8: #e66767; --sx: #6d6b66; }
.auswertung { background: var(--surface-1); max-width: 60rem; }
.viz-kopf h2 { margin: 0 0 .15rem; font-size: 1.1rem; color: var(--text-primary); }
.viz-kopf p { margin: 0 0 .8rem; }
.viz-figur { margin: 0; }
.viz-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.viz-gitter { stroke: var(--gitter); stroke-width: 1; }
.viz-null { stroke: var(--text-secondary); }
.viz-achse { fill: var(--text-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
.viz-reihe { fill: var(--text-primary); font-size: 13px; font-weight: 600; }
.viz-reihe-wert { fill: var(--text-secondary); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.viz-seg { stroke: var(--surface-1); stroke-width: 2; transition: opacity .12s; }
.viz-svg:has(.viz-seg:hover) .viz-seg:not(:hover) { opacity: .45; }
.viz-wert { fill: #fff; font-size: 12px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.28); stroke-width: 2px; }
.s1 { fill: var(--s1); background: var(--s1); } .s2 { fill: var(--s2); background: var(--s2); } .s3 { fill: var(--s3); background: var(--s3); } .s4 { fill: var(--s4); background: var(--s4); }
.s5 { fill: var(--s5); background: var(--s5); } .s6 { fill: var(--s6); background: var(--s6); } .s7 { fill: var(--s7); background: var(--s7); } .s8 { fill: var(--s8); background: var(--s8); }
.sx { fill: var(--sx); background: var(--sx); }
.viz-ergebnis { margin: .6rem 0 1rem; color: var(--text-secondary); }
.viz-ergebnis strong { color: var(--text-primary); }
.viz-legenden { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem 1.6rem; }
.viz-legende caption { text-align: left; font-weight: 700; color: var(--akzent); letter-spacing: .06em; text-transform: uppercase; font-size: .82rem; padding-bottom: .3rem; }
.viz-legende td, .viz-legende th { font-size: .88rem; }
.viz-legende .c-betrag, .viz-legende .c-anteil { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.viz-legende .c-anteil { width: 4rem; color: var(--text-secondary); }
.viz-farbe { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .5rem; vertical-align: -1px; }
.viz-teil td:first-child { padding-left: 1.9rem; color: var(--text-secondary); font-size: .82rem; }
.viz-teil td { font-size: .82rem; }
@media print { .auswertung { max-width: none; border: 0; } .viz-seg { stroke: #fff; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* Startseite: Kachel Auswertungen – zwei Mini-Balken (Einnahmen / Ausgaben) */
.kachel-auswertung { grid-template-areas: "icon titel" "icon balken" "icon balken"; }
.kachel-balken { grid-area: balken; display: flex; flex-direction: column; gap: .3rem; margin-top: .25rem; min-width: 0; }
.kb-zeile { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; font-size: .78rem; }
.kb-name { color: var(--leise); }
.kb-spur { height: .55rem; border-radius: 3px; background: color-mix(in srgb, var(--rand) 55%, transparent); overflow: hidden; }
.kb-balken { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.kb-ein { background: #2a78d6; } .kb-aus { background: #eb6834; }
.kb-wert { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .kachel-auswertung { grid-template-areas: "icon" "titel" "balken"; } }

/* Buchungsfenster: Datum | Belegnummer | Betrag */
.buchen-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.buchen-nummer { display: flex; flex-direction: column; gap: .2rem; }
.buchen-nummer .bez { font-size: inherit; }
.buchen-nummer strong { font-size: 1.15rem; line-height: 2.3rem; color: var(--akzent); font-variant-numeric: tabular-nums; }
.buchen-nummer .hinweis { margin: 0; font-size: .75rem; line-height: 1.2; }
@media (max-width: 520px) { .buchen-zeile { grid-template-columns: 1fr 1fr; } .buchen-nummer { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .6rem; } .buchen-nummer strong { line-height: 1.4; } }
.viz-legenden { align-items: start; }
.kb-ein { background: var(--akzent); } .kb-aus { background: color-mix(in srgb, var(--akzent) 45%, var(--fl)); }