:root {
  --bg: #f5f6f8; --karte: #fff; --text: #1d2330; --leise: #5f6b7a; --rand: #d9dde3;
  --akzent: #c2410c; --akzent-text: #fff; --ok: #e7f6ec; --ok-rand: #2f9e55; --warn: #fff6e0; --warn-rand: #d99a00;
  --fehler: #fdecec; --fehler-rand: #d33; --info: #eaf2fd; --info-rand: #3b7dd8; --plus: #1c7c3c; --minus: #c0262d;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171c; --karte: #1d2229; --text: #e6e9ee; --leise: #9aa4b1; --rand: #343b45;
    --akzent: #f97316; --akzent-text: #14171c; --ok: #15301f; --warn: #33290f; --fehler: #3a1818; --info: #16253a;
    --plus: #5fd08a; --minus: #ff8a8f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.1rem; margin: 1.4rem 0 .5rem; }
h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
small { color: var(--leise); display: block; margin-top: .3rem; }

.leiste { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .6rem 1rem; background: var(--karte); border-bottom: 1px solid var(--rand); position: sticky; top: 0; z-index: 5; }
.marke { font-weight: 700; text-decoration: none; color: var(--text); }
.leiste nav { display: flex; flex-wrap: wrap; gap: .2rem; flex: 1; }
.leiste nav a { padding: .35rem .6rem; border-radius: 6px; text-decoration: none; color: var(--text); }
.leiste nav a.aktiv, .leiste nav a:hover { background: var(--bg); color: var(--akzent); }
.abmelden { display: flex; align-items: center; gap: .5rem; color: var(--leise); }
.inhalt { max-width: 1150px; margin: 0 auto; padding: 1rem; }

.karte { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 1rem; margin: 0 0 1rem; }
.karte.schmal { max-width: 380px; }
.karte.zeile, form.zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-end; }
.karte.zeile label { flex: 1 1 260px; }
details.karte summary { cursor: pointer; font-weight: 600; }
form.beleg { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 1rem; }

label { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; color: var(--leise); margin-bottom: .6rem; }
label.haken { flex-direction: row; align-items: center; gap: .5rem; color: var(--text); }
input, select, textarea, button, .knopf { font: inherit; color: var(--text); }
input, select, textarea { width: 100%; padding: .45rem .55rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--karte); }
input[type=checkbox], input[type=radio] { width: auto; }
input[readonly], textarea[readonly] { background: var(--bg); }
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--akzent); outline-offset: -1px; }
button, .knopf { display: inline-block; padding: .5rem .9rem; border: 1px solid var(--rand); border-radius: 6px; background: var(--karte); cursor: pointer; text-decoration: none; }
button:hover, .knopf:hover { border-color: var(--akzent); }
.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); font-weight: 600; }
.knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .8rem 0; }
.knoepfe .tabellen-suche { flex: 1 1 260px; width: auto; }

.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 1rem; }
.raster.zwei { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.raster.vier { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.raster > label { justify-content: flex-end; } /* unterschiedlich lange Beschriftungen: Felder bleiben auf einer Linie */
fieldset.zeitraum { border: 1px solid var(--rand); border-radius: 8px; padding: .4rem .8rem .7rem; margin: .4rem 0 0; }
fieldset.zeitraum legend { color: var(--leise); font-size: .9rem; padding: 0 .3rem; }
fieldset.zeitraum small { margin-top: 0; }

.meldung { padding: .7rem .9rem; border-radius: 8px; border-left: 4px solid; margin: 0 0 1rem; }
.meldung.ok { background: var(--ok); border-color: var(--ok-rand); }
.meldung.warnung { background: var(--warn); border-color: var(--warn-rand); }
.meldung.fehler { background: var(--fehler); border-color: var(--fehler-rand); }
.meldung.info { background: var(--info); border-color: var(--info-rand); }
.meldung .knoepfe { margin-bottom: 0; }

.reiter { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rand); }
.reiter a { padding: .5rem .8rem; text-decoration: none; color: var(--leise); border-bottom: 3px solid transparent; }
.reiter a.aktiv { color: var(--text); border-color: var(--akzent); font-weight: 600; }

.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.kachel { display: flex; flex-direction: column; gap: .3rem; padding: 1.3rem; min-height: 140px; background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; text-decoration: none; color: var(--text); box-shadow: 0 3px 10px rgba(0,0,0,.04); }
.kachel:hover { border-color: var(--akzent); }
.kachel .icon { font-size: 1.8rem; }
.kachel small { margin: 0; }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin: 1rem 0; }
.kennzahlen div, .summen div { display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--rand); border-radius: 8px; padding: .7rem .9rem; }
.kennzahlen span, .summen span { color: var(--leise); font-size: .85rem; }
.kennzahlen b { font-size: 1.3rem; }
.summen { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin: 1rem 0; }
.summen .end { border-color: var(--akzent); }
.summen .end b { font-size: 1.35rem; }

.tabelle-rahmen { overflow-x: auto; margin-bottom: .5rem; }
table { border-collapse: collapse; width: 100%; background: var(--karte); }
th, td { padding: .4rem .5rem; border-bottom: 1px solid var(--rand); text-align: left; vertical-align: top; }
th { font-size: .8rem; color: var(--leise); font-weight: 600; white-space: nowrap; }
table.liste td { font-size: .92rem; }
table.positionen td, table.stamm td { padding: .25rem; }
table.positionen td:nth-child(1) { min-width: 220px; }
table.positionen td:nth-child(2) { min-width: 180px; }
table.stamm td { min-width: 120px; }
input.kurz { min-width: 90px; }
.zahl { text-align: right; white-space: nowrap; }
td.plus { color: var(--plus); font-weight: 600; }
td.minus { color: var(--minus); font-weight: 600; }
.mitte { text-align: center; }
.zeile-weg { padding: .35rem .6rem; }

dialog.willkommen { border: 1px solid var(--rand); border-radius: 14px; background: var(--karte); color: var(--text); max-width: 440px; padding: 1.5rem; box-shadow: 0 20px 60px rgba(0,0,0,.3); z-index: 10; }

/* Kopfzeile: Abmelden rechts im Menü, Menü-Knopf nur auf schmalen Bildschirmen */
.leiste nav .abmelden { margin-left: auto; }
.menue-knopf { display: none; margin-left: auto; }
.vertretung { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: center; padding: .5rem 1rem;
  background: var(--warn); border-bottom: 2px solid var(--warn-rand); }
fieldset.rechte { border: 1px solid var(--rand); border-radius: 8px; padding: .4rem .8rem; margin: .4rem 0; }
fieldset.rechte legend { color: var(--leise); font-size: .9rem; }
fieldset.rechte label.haken { margin-bottom: .3rem; }
fieldset.wahl { display: flex; flex-wrap: wrap; gap: 0 1.5rem; } /* Auswahl nebeneinander (z. B. Art der Quittung) */
.nur-mobil { display: none; }
.reiter { flex-wrap: nowrap; overflow-x: auto; }
.reiter a { white-space: nowrap; }

/* Tablet & Handy */
@media (max-width: 900px) {
  .js .menue-knopf { display: inline-block; }
  .js .leiste nav { display: none; }
  .js .leiste.offen nav { display: flex; }
  .leiste nav { order: 3; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .15rem; }
  .leiste nav a { padding: .65rem .8rem; font-size: 1.05rem; }
  .leiste nav .abmelden { margin: .4rem 0 0; padding-top: .5rem; border-top: 1px solid var(--rand); justify-content: space-between; }
}
@media (max-width: 700px) {
  .inhalt { padding: .7rem; }
  h1 { font-size: 1.3rem; }
  input, select, textarea { font-size: 16px; } /* verhindert das automatische Hineinzoomen auf dem iPhone */
  form.beleg, .karte { padding: .8rem; }
  .knoepfe > button, .knoepfe > .knopf, .knoepfe > select { flex: 1 1 100%; text-align: center; }
  .summen div { flex: 1 1 45%; }
  .kachel { min-height: 0; padding: 1rem; }
  /* Positionen als Karten statt breiter Tabelle */
  table.positionen thead { display: none; }
  table.positionen, table.positionen tbody { display: block; background: none; }
  table.positionen tr { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem .6rem; border: 1px solid var(--rand);
    border-radius: 8px; padding: .6rem; margin-bottom: .6rem; background: var(--karte); }
  table.positionen td { display: block; border: 0; padding: 0; min-width: 0 !important; }
  table.positionen td:nth-child(1), table.positionen td:nth-child(2), table.positionen td:last-child { grid-column: 1 / -1; }
  table.positionen td[data-label]::before { content: attr(data-label); display: block; font-size: .78rem; color: var(--leise); margin-bottom: .15rem; }
  table.positionen .zeile-weg { width: 100%; }
  .nur-mobil { display: inline; }
}

[hidden] { display: none !important; }
.js .ohne-js { display: none; }
html:not(.js) .nur-js { display: none; }
.quittung:not(:has(input[name="art"][value="gage"]:checked)) .nur-gage { display: none; } /* Freigrenze-Hinweis nur bei Gagen */
dialog.popup { border: 1px solid var(--rand); border-radius: 12px; background: var(--karte); color: var(--text); width: min(520px, calc(100vw - 32px)); padding: 1.2rem; }
dialog.popup::backdrop { background: rgba(0,0,0,.45); }
dialog.popup h2 { margin-top: 0; }
.unterschrift { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; color: var(--leise); font-size: .9rem; }
.unterschrift canvas { width: 100%; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--rand); border-radius: 6px; touch-action: none; cursor: crosshair; }
.unterschrift button { align-self: flex-start; padding: .25rem .6rem; }
.geaendert { color: var(--akzent); font-weight: 600; }
form.zeile { margin-bottom: .6rem; }
form.zeile label { flex: 1 1 260px; }
code { background: var(--bg); padding: 0 .25rem; border-radius: 4px; }

.als-form { margin-top: .35rem; }
.als-form button { padding: .3rem .6rem; font-size: .85rem; white-space: nowrap; }

.termin-pruefung .meldung { margin: .5rem 0 0; }
.termin-pruefung a { margin-left: .3rem; }
ul.termine { padding-left: 1.2rem; margin: .3rem 0; }

/* Kalender */
ul.kalender-liste { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.termin { display: flex; gap: .8rem; align-items: center; background: var(--karte); border: 1px solid var(--rand);
  border-left: 4px solid var(--akzent); border-radius: 8px; padding: .6rem .8rem; }
.termin.probe { border-left-color: var(--info-rand); }
.termin.vorbei { opacity: .55; }
.termin .tag { display: flex; flex-direction: column; align-items: center; min-width: 2.6rem; }
.termin .tag b { font-size: 1.3rem; line-height: 1.1; }
.termin .tag span { font-size: .8rem; color: var(--leise); }
.termin .was { flex: 1; min-width: 0; }
.termin .was small { margin: 0; }
.termin .aktionen { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: flex-end; }
.termin .aktionen .knopf { padding: .35rem .6rem; font-size: .88rem; }
@media (max-width: 700px) {
  .termin { flex-wrap: wrap; }
  .termin .aktionen { flex-basis: 100%; justify-content: flex-start; }
}

.gesperrt { color: var(--minus); font-size: .85rem; }

/* Vorschau-Fenster */
dialog.vorschau { width: min(920px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 0; border-radius: 0; }
.vorschau-kopf { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .6rem .9rem; background: var(--karte); border-bottom: 1px solid var(--rand); z-index: 1; }
.vorschau-seiten { padding: .6rem; display: flex; flex-direction: column; gap: .6rem; }
.vorschau-seiten canvas { width: 100%; height: auto; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* Passwort anzeigen */
.pw-feld { position: relative; display: block; }
.pw-feld input { padding-right: 2.8rem; }
.pw-auge { position: absolute; right: .25rem; top: 50%; transform: translateY(-50%); padding: .2rem .45rem; border: 0; background: none; font-size: 1.1rem; line-height: 1; }

/* Unterschrift im Vollbild */
.unterschrift canvas { cursor: pointer; }
dialog.unterschrift-vollbild { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; border-radius: 0;
  display: none; flex-direction: column; }
dialog.unterschrift-vollbild[open] { display: block; overflow: hidden; }
.sig-quer { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--karte); }
.sig-dreh { display: none; }
@media (orientation: portrait) and (pointer: coarse) { .sig-dreh { display: inline; font-weight: 600; } }
dialog.unterschrift-vollbild .vorschau-kopf { flex-wrap: wrap; gap: .4rem; }
dialog.unterschrift-vollbild .knoepfe { margin: 0 0 0 auto; flex-wrap: nowrap; gap: .35rem; }
dialog.unterschrift-vollbild canvas { flex: 1; width: 100%; min-height: 0; background: #fff; touch-action: none; cursor: crosshair; }
.sig-hinweis { text-align: center; padding: .3rem; }
dialog.unterschrift-vollbild .knoepfe > button { flex: 0 0 auto; padding: .45rem .6rem; }
.sig-titel { font-size: .9rem; }
dialog.unterschrift-vollbild:fullscreen { width: 100vw; height: 100vh; max-height: none; }

dialog.rueckfrage { max-width: 440px; }
dialog.rueckfrage h2 { margin-top: 0; }
dialog.rueckfrage .knoepfe { justify-content: flex-end; margin-bottom: 0; }
.zeile-knoepfe { margin: 0; flex-wrap: nowrap; }
/* Auswertung auf der Startseite */
.auswertung h2 { margin-top: 0; }
.auswertung .kennzahlen small { margin-top: .2rem; }
.balken { display: block; width: 100%; height: 8px; background: var(--bg); border: 1px solid var(--rand); border-radius: 4px; overflow: hidden; margin-top: .4rem; }
.balken rect { fill: var(--ok-rand); }
.balken rect.knapp { fill: var(--warn-rand); }
.balken rect.voll { fill: var(--fehler-rand); }
.monate { display: grid; grid-template-columns: repeat(12, 1fr); gap: .3rem; align-items: end; height: 150px; margin: 1rem 0 .3rem; }
.monat { display: flex; flex-direction: column; height: 100%; min-width: 0; }
.saeulen { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; border-bottom: 1px solid var(--rand); }
.saeulen { position: relative; min-height: 0; }
.saeulen svg { position: absolute; inset: 0; margin: 0 auto; width: 100%; max-width: 34px; height: 100%; } /* absolut: sonst gibt die viewBox die Höhe vor */
.saeulen rect { fill: var(--akzent); }
.saeulen rect.vj { fill: var(--leise); opacity: .45; }
.legende { display: inline-block; background: var(--akzent); }
.legende.vj { background: var(--leise); opacity: .45; }
.monat span { text-align: center; font-size: .72rem; color: var(--leise); margin-top: .2rem; }
.legende { width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; }
/* Anleitung / Neuigkeiten-Pop-up */
dialog.hilfe { max-width: 640px; width: calc(100% - 32px); max-height: 85vh; overflow: auto; position: fixed; inset: 0; margin: auto; }
dialog.hilfe .knoepfe form { margin: 0; }
.anleitung dt { font-weight: 600; margin-top: .6rem; }
.anleitung dd { margin: .15rem 0 0; color: var(--leise); }
.auswertung { margin: 1.5rem 0; }