:root { --pico-font-size: 95%; }
table td.betrag, table th.betrag { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.meldung { padding: .6rem 1rem; margin-bottom: 1rem; }
.meldung-success { border-left: 4px solid #2e7d32; }
.meldung-warning { border-left: 4px solid #ed6c02; }
.meldung-error { border-left: 4px solid #c62828; }
.storniert td { text-decoration: line-through; opacity: .6; }
.klein { font-size: .85em; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.kacheln article { margin: 0; }
.kacheln .zahl { font-size: 2rem; font-weight: 600; }
.filter { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; margin-bottom: 1rem; }
.filter > *, .filter input:not([type=checkbox]), .filter select, .filter button { margin-bottom: 0; }
/* Häkchen und Links stehen auf Höhe der Eingabefelder */
.filter > label:has(> input[type=checkbox]), .filter > a, .filter > span { display: flex; align-items: center;
  min-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); }
.filter > span:empty { display: none; }
.positionen td { vertical-align: top; }
.positionen input, .positionen select { margin-bottom: 0; }
tr.inline-bearbeiten input, tr.inline-bearbeiten select { margin: 0; padding: .25rem .5rem; height: auto; }
button.link { background: none; border: none; padding: 0; color: var(--pico-primary); }
.fehler { color: #c62828; }
.reiter { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; }
.reiter a[aria-current] { font-weight: 600; text-decoration: underline; text-underline-offset: .3em; }
.status { display: inline-block; padding: .05rem .5rem; border-radius: .75rem; font-size: .8em; white-space: nowrap; }
.status-ok { background: #e3f1e4; color: #1b5e20; }
.status-teil { background: #fff3e0; color: #8a4b00; }
.status-offen { background: #fdecea; color: #8e1c1c; }
.status-ignoriert { background: #eceff1; color: #455a64; }
form.inline { display: inline; margin: 0; }
form.inline button { margin: 0; padding: .1rem .5rem; font-size: .85em; width: auto; }
.status-kategorie { background: #e3f2fd; color: #0d47a1; }
.regel-aus td { opacity: .55; }
.regel-gruppe { display: none; }
.regel-gruppe.sichtbar { display: block; }
#vorschau table { font-size: .85em; }
tr.unbezahlt td:first-child { box-shadow: inset 4px 0 0 #c62828; }
tr.storniert td:first-child { box-shadow: inset 4px 0 0 #90a4ae; }
button.kopieren { display: inline; width: auto; margin: 0 0 0 .25rem; padding: 0 .35rem; font-size: .85em; background: none; color: var(--pico-primary); border: 1px solid var(--pico-muted-border-color); }
button.kopieren.kopiert { color: #2e7d32; border-color: #2e7d32; }
table.positionen textarea { margin: .25rem 0 0; min-height: 2.5rem; }
.positionen .aktionen { white-space: nowrap; }
.positionen .aktionen button { display: inline; width: auto; margin: 0 .2rem 0 0; padding: .15rem .45rem; font-size: .85em; }
table.positionen td input[inputmode=decimal] { padding-left: .5rem; padding-right: .5rem; }
table.positionen td select { padding-left: .6rem; }
.eingang-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; align-items: start; }
.eingang-pdf { position: sticky; top: 5rem; }
.eingang-pdf iframe { width: 100%; height: calc(100vh - 6rem); border: 1px solid var(--pico-muted-border-color); }
.eingang-layout .positionen { display: block; overflow-x: auto; }
.eingang-layout .positionen input:not([type=checkbox]) { min-width: 4.75rem; padding-left: .5rem; padding-right: .5rem; }
.eingang-layout .positionen select { min-width: 7.5rem; }
.ablage { position: relative; display: block; padding: 2.5rem 1rem; text-align: center; border: 2px dashed var(--pico-muted-border-color); border-radius: .5rem; margin-bottom: 1rem; }
.ablage input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
details.euer-gruppe { margin: 0; border-bottom: 1px solid var(--pico-muted-border-color); padding: .35rem 0; }
details.euer-gruppe > summary { display: flex; gap: .75rem; align-items: baseline; margin: 0; }
details.euer-gruppe > summary::after { display: none; }
details.euer-gruppe > summary .zeile { width: 2rem; color: var(--pico-muted-color); }
details.euer-gruppe > summary .name { flex: 1; }
details.euer-gruppe > summary .wert { white-space: nowrap; font-variant-numeric: tabular-nums; }
details.euer-gruppe table { font-size: .85em; margin: .5rem 0; }
details.euer-gruppe td { white-space: nowrap; }
details.euer-gruppe td.text { white-space: normal; }
.euer-summe { display: flex; justify-content: space-between; font-weight: 600; padding: .5rem 0 1.25rem; }

/* Titelleiste: dunkles Band, bleibt beim Scrollen sichtbar */
.kopfleiste { position: sticky; top: 0; z-index: 30; background: #1f3a5f; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); margin-bottom: 1.5rem; }
.kopfleiste nav { --pico-nav-element-spacing-vertical: .15rem; }
.kopfleiste nav > ul > li > a { color: #fff; text-decoration: none; }
.kopfleiste nav > ul > li > a:hover { color: #cfe0f2; }
.kopfleiste details.dropdown > summary,
.kopfleiste details.dropdown > summary:hover,
.kopfleiste details.dropdown > summary:focus,
.kopfleiste details.dropdown[open] > summary {
  --pico-background-color: transparent; --pico-border-color: transparent; --pico-color: #fff;
  --pico-box-shadow: none; --pico-outline-width: 0;
  background: none; border: 0; box-shadow: none; color: #fff; height: auto; padding: 0 1.1rem 0 0; }
.kopfleiste details.dropdown > summary::after { filter: brightness(0) invert(1); }
.kopfleiste details.dropdown > summary:hover, .kopfleiste details.dropdown[open] > summary { color: #cfe0f2; --pico-color: #cfe0f2; }
.kopfleiste details.dropdown li a, .kopfleiste details.dropdown li button { color: var(--pico-dropdown-color); }

/* Hauptaktionen: fest unten rechts, immer sichtbar */
main { padding-bottom: 6rem; }
.aktionsleiste { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 20; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem;
  padding: .5rem; background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: .6rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.aktionsleiste button, .aktionsleiste a[role=button], .knopfzeile button, .knopfzeile a[role=button] { width: auto; margin: 0; padding: .45rem .9rem; }
/* Seitenaktionen: einheitliche Leiste unter der Überschrift */
.knopfzeile { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.knopfzeile form:not(.knopfzeile) { display: contents; }
/* Buttons sind nie automatisch seitenbreit, nur beim Anmelden */
button[type=submit], button[type=button], button:not([type]) { width: auto; }
.anmeldung button[type=submit] { width: 100%; }

/* Farben und Grundfläche */
:root { --pico-primary: #1f5f99; --pico-primary-background: #1f5f99; --pico-primary-border: #1f5f99; --pico-primary-hover: #174a78;
  --pico-primary-hover-background: #174a78; --pico-primary-hover-border: #174a78; --pico-primary-underline: rgba(31, 95, 153, .4);
  --pico-primary-focus: rgba(31, 95, 153, .25); }
body { background: #f3f5f8; }
h2 { margin-bottom: 1rem; }

/* Titelleiste: Marke und aktiver Bereich */
.marke { display: inline-flex; align-items: center; gap: .6rem; }
.kuerzel { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .45rem; background: #fff; color: #1f3a5f; font-weight: 700; font-size: .85rem; }
.kopfleiste nav [aria-current="page"], .kopfleiste details.dropdown[open] > summary[aria-current="page"] { color: #fff; font-weight: 600; box-shadow: inset 0 -2px 0 #8fc1ec; border-radius: 0; }

/* Abschnitte und Felder */
.abschnitt { background: #fff; border: 1px solid #e3e8ee; border-radius: .6rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.abschnitt > h3 { font-size: 1rem; margin-bottom: .75rem; color: #1f3a5f; }
.abschnitt > details { margin: 0; }
/* Aufklappbereich, der wie ein Button aussieht */
details.aufklappen > summary:not([role]) { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; margin: 0; padding: .4rem .9rem;
  font-weight: 600; color: var(--pico-primary); background: #fff; border: 1px solid var(--pico-primary); border-radius: var(--pico-border-radius); }
details.aufklappen > summary:not([role]):hover { color: #fff; background: var(--pico-primary); }
details.aufklappen > summary:not([role]):hover::after { filter: brightness(0) invert(1); }
details.aufklappen > summary::after { order: -1; float: none; margin: 0; }
details.aufklappen[open] > summary:not([role]):not(:hover) { color: var(--pico-primary); }
details.aufklappen[open] > summary { margin-bottom: .75rem; }
.abschnitt > details.aufklappen { margin-bottom: 1rem; }
.feldraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 1rem; }

/* Tabellen */
table { --pico-table-border-color: #e6eaf0; background: transparent; }
th, td { padding: .4rem .6rem; }
th { font-size: .8em; color: #5b6878; font-weight: 600; }
tbody tr:hover > td { background: #eef3f9; }
table.positionen tbody tr:hover > td { background: none; }
main > table, main > figure { background: #fff; border-radius: .6rem; }

/* Übersicht */
.kachel { background: #fff; border: 1px solid #e3e8ee; box-shadow: none; padding: .9rem 1.1rem; }
.kachel > span { color: #5b6878; font-size: .85em; }
.kachel .zahl { font-size: 1.6rem; line-height: 1.3; font-variant-numeric: tabular-nums; }
.kachel-betont { background: #1f3a5f; border-color: #1f3a5f; color: #fff; }
.kachel-betont > span, .kachel-betont a { color: #cfe0f2; }
.kachel-betont .zahl { color: #fff; }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.aufgaben { list-style: none; padding: 0; margin: 0; }
.aufgaben li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid #eef1f5; margin: 0; }
.aufgaben li:last-child { border-bottom: 0; }
.zaehler { min-width: 1.8rem; text-align: center; padding: 0 .45rem; border-radius: .75rem; background: #e9edf2; font-size: .85em; font-variant-numeric: tabular-nums; }
.zaehler-warnung { background: #fff3e0; color: #8a4b00; font-weight: 600; }

/* Meldungen */
.toasts { position: fixed; top: 5.5rem; right: 1.25rem; z-index: 40; display: flex; flex-direction: column; gap: .5rem; max-width: 26rem; }
.toast { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .6rem .8rem; background: #fff; border-radius: .5rem;
  border-left: 4px solid #1f5f99; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); transition: opacity .25s; }
.toast-success { border-left-color: #2e7d32; }
.toast-warning { border-left-color: #ed6c02; }
.toast-error { border-left-color: #c62828; }
.toast-weg { opacity: 0; }
.toast-zu { all: unset; cursor: pointer; font-size: 1.2rem; line-height: 1; color: #5b6878; }

/* Anmeldung */
.anmeldung { max-width: 26rem; margin: 3rem auto; background: #fff; }
.anmeldung-marke { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.anmeldung-marke .kuerzel { background: #1f3a5f; color: #fff; }
.aktionsleiste { background: #fff; }
.kopfleiste details.dropdown li form { margin: 0; }
.kopfleiste details.dropdown li button.link { display: block; width: 100%; margin: 0; text-align: left; }

/* Alle Menüpunkte gleich aufbauen: gleiche Höhe, kein Versatz bei Hover oder geöffnetem Menü */
.kopfleiste nav ul { align-items: center; }
.kopfleiste nav > ul > li { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.kopfleiste nav > ul > li > details.dropdown { margin: 0; }
.kopfleiste nav > ul > li > a,
.kopfleiste nav > ul > li > a:hover,
.kopfleiste nav > ul > li > details.dropdown > summary,
.kopfleiste nav > ul > li > details.dropdown > summary:hover,
.kopfleiste nav > ul > li > details.dropdown > summary:focus,
.kopfleiste nav > ul > li > details.dropdown > summary:active,
.kopfleiste nav > ul > li > details.dropdown[open] > summary {
  display: inline-flex; align-items: center; gap: .3rem; box-sizing: border-box; height: 2.25rem; margin: 0; padding: 0 .5rem;
  border: 0; line-height: 1; transition: none; transform: none; }
.kopfleiste nav > ul > li > details.dropdown > summary::after {
  position: static; float: none; display: inline-block; width: .8rem; height: .8rem; margin: 0; background-size: .8rem auto; transform: none; }
.kopfleiste nav > ul > li > details.dropdown[open] > summary::after { transform: none; }
.kopfleiste .marke { height: 2.25rem; }