/* Lohn-App — Gestaltung wie die Website babykonzert.ch: Magenta als Marke, Lato,
   helles Grau mit weissen Flächen, Titel kursiv. Tokens zuerst; der Dunkelmodus folgt
   dem System oder wird über data-theme (Einstellungen / Konto) übersteuert. DESIGN.md */
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/lato-400-normal.woff2") format("woff2");}
@font-face{font-family:"Lato";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/lato-400-italic.woff2") format("woff2");}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/lato-700-normal.woff2") format("woff2");}
@font-face{font-family:"Lato";font-style:italic;font-weight:700;font-display:swap;src:url("fonts/lato-700-italic.woff2") format("woff2");}

:root{
  color-scheme: light dark;
  --bg:#eaeaea; --flaeche:#ffffff; --flaeche-2:#f4f4f4;
  --text:#444444; --titel:#222222; --gedaempft:#5f5f5f; --linie:#dcdcdc; --linie-stark:#c4c4c4;
  /* #e80074 ist das Magenta der Website; für Text und Knöpfe eine Spur dunkler (Kontrast ≥ 4,5) */
  --marke:#cc0068; --marke-hover:#a80056; --auf-marke:#ffffff; --marke-rein:#e80074;
  --akzent:#9a5530; --akzent-flaeche:#fbf1ea;
  --ok:#256b47; --ok-flaeche:#e8f4ec;
  --warn:#8a5a00; --warn-flaeche:#fdf3dc;
  --fehler:#a12c2c; --fehler-flaeche:#fbeaea;
  --fokus:#e80074;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --t-klein:.8125rem; --t-basis:1rem; --t-gross:1.3125rem; --t-titel:1.875rem;
  --radius:4px; --schatten:0 1px 3px rgba(0,0,0,.08);
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
:root[data-theme="light"]{color-scheme:light;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#141416; --flaeche:#1d1d20; --flaeche-2:#27272b;
    --text:#ececef; --titel:#ffffff; --gedaempft:#a8a8ad; --linie:#33333a; --linie-stark:#4a4a52;
    --marke:#ff6eb0; --marke-hover:#ff94c4; --auf-marke:#18181b; --marke-rein:#ff6eb0;
    --akzent:#e3a27c; --akzent-flaeche:#2b2019;
    --ok:#7fd1a3; --ok-flaeche:#16291f;
    --warn:#f0c46b; --warn-flaeche:#2d2513;
    --fehler:#f19a9a; --fehler-flaeche:#331b1b;
    --fokus:#ff6eb0;
    --schatten:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
    --bg:#141416; --flaeche:#1d1d20; --flaeche-2:#27272b;
    --text:#ececef; --titel:#ffffff; --gedaempft:#a8a8ad; --linie:#33333a; --linie-stark:#4a4a52;
    --marke:#ff6eb0; --marke-hover:#ff94c4; --auf-marke:#18181b; --marke-rein:#ff6eb0;
    --akzent:#e3a27c; --akzent-flaeche:#2b2019;
    --ok:#7fd1a3; --ok-flaeche:#16291f;
    --warn:#f0c46b; --warn-flaeche:#2d2513;
    --fehler:#f19a9a; --fehler-flaeche:#331b1b;
    --fokus:#ff6eb0;
    --schatten:none;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
html,body{margin:0;padding:0;}
body{
  font-family:"Lato",system-ui,-apple-system,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  font-size:var(--t-basis); line-height:1.5; color:var(--text); background:var(--bg);
  display:flex; flex-direction:column; min-height:100vh;
}
a{color:var(--marke); text-underline-offset:2px;}
a:hover{color:var(--marke-hover);}
:focus-visible{outline:3px solid var(--fokus); outline-offset:2px; border-radius:3px;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ------------------------------------------------------------ Kopf */
header.kopf{background:var(--flaeche); border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:10;
  box-shadow:var(--schatten);}
.kopf-innen{display:flex; align-items:center; gap:var(--s2) var(--s4); width:min(1120px,100%); margin:0 auto;
  padding:var(--s2) var(--s4); flex-wrap:wrap;}
.marke{display:flex; flex-direction:column; line-height:1.2; text-decoration:none; margin-right:var(--s3);}
.marke strong{font-size:1.5rem; font-weight:400; color:var(--titel); letter-spacing:-.01em;}
.marke strong em{font-style:normal; color:var(--marke-rein);}
.marke span{font-size:var(--t-klein); color:var(--text); margin-top:2px;}
.ico{flex:none; display:block;}

/* Hauptnavigation: wenige Punkte, Symbol + Wort */
nav.haupt{display:flex; align-items:center; gap:var(--s1); margin-right:auto;}
nav.haupt a{color:var(--text); text-decoration:none; padding:var(--s2) var(--s3); min-height:44px;
  display:inline-flex; align-items:center; gap:var(--s2); font-size:1rem;}
nav.haupt a .ico{color:var(--gedaempft);}
nav.haupt a:hover{color:var(--marke);}
nav.haupt a:hover .ico, nav.haupt a[aria-current="page"] .ico{color:var(--marke);}
nav.haupt a[aria-current="page"]{color:var(--marke); box-shadow:inset 0 -2px 0 var(--marke-rein);}

/* Werkzeuge rechts: Neuer Einsatz, Einstellungen, Konto, Abmelden */
.werkzeuge{display:flex; align-items:center; gap:var(--s1);}
.neu-knopf{margin-right:var(--s2);}
.neu-knopf .ico{margin-left:-4px;}
.symbol{display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:50%; color:var(--gedaempft); background:none; border:0; cursor:pointer; font:inherit;
  text-decoration:none; list-style:none;}
.symbol::-webkit-details-marker{display:none;}
.symbol:hover, details.menue[open] > .symbol{background:var(--flaeche-2); color:var(--marke);}
.symbol[aria-current="page"], details.menue.aktiv > .symbol{color:var(--marke); box-shadow:inset 0 0 0 2px var(--marke-rein);}
form.inline{display:inline; margin:0;}

details.menue{position:relative;}
.menue-liste{position:absolute; right:0; top:calc(100% + 6px); min-width:250px; z-index:20;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,.14); padding:var(--s1) 0;}
.menue-liste a{display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s4); min-height:44px;
  color:var(--text); text-decoration:none;}
.menue-liste a .ico{color:var(--gedaempft);}
.menue-liste a:hover, .menue-liste a:focus-visible{background:var(--flaeche-2); color:var(--marke);}
.menue-liste a:hover .ico{color:var(--marke);}
.menue-liste a[aria-current="page"]{color:var(--marke); font-weight:700; box-shadow:inset 3px 0 0 var(--marke-rein);}
.menue-liste a[aria-current="page"] .ico{color:var(--marke);}

/* mittlere Breite: der Knopf zeigt nur das Plus, die Beschriftung kommt als Tooltip */
@media (max-width:1060px){
  .neu-knopf span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .neu-knopf{width:44px; padding:0; margin-right:var(--s1);}
  .neu-knopf .ico{margin:0;}
}
@media (max-width:720px){
  .kopf-innen{padding:var(--s2) var(--s3) 0;}
  .marke{margin-right:auto;}
  .werkzeuge{order:2;}
  nav.haupt{order:3; width:100%; margin:0; overflow-x:auto; scrollbar-width:none;}
  nav.haupt::-webkit-scrollbar{display:none;}
  nav.haupt a{white-space:nowrap;}
}
@media (max-width:480px){
  .neu-knopf span{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
  .neu-knopf{width:42px; min-height:42px; padding:0; margin-right:2px;}
  .neu-knopf .ico{margin:0;}
  .werkzeuge{gap:0;}
  .symbol{width:40px; height:44px;}
  .marke{margin-right:auto;}
  .marke strong{font-size:1.2rem;}
  .marke span{font-size:.75rem;}
}
.testband{background:var(--warn-flaeche); color:var(--warn); text-align:center; padding:var(--s2) var(--s4);
  font-size:var(--t-klein); border-bottom:1px solid var(--linie);}

/* ------------------------------------------------------------ Seite */
main{flex:1; width:min(1120px,100%); margin:0 auto; padding:var(--s5) var(--s4) var(--s7);}
main.schmal{width:min(760px,100%);}
h1, h2{font-style:italic; font-weight:700; color:var(--titel);}
h1{font-size:var(--t-titel); line-height:1.2; margin:0; letter-spacing:-.01em;}
h2{font-size:var(--t-gross); margin:var(--s6) 0 var(--s3);}
h3{font-size:var(--t-basis); margin:var(--s4) 0 var(--s2);}
p{margin:0 0 var(--s3);}
.kopfzeile{display:flex; justify-content:space-between; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s4);}
.unterzeile{color:var(--gedaempft); margin:var(--s1) 0 0;}
.hinweis{color:var(--gedaempft); font-size:.9375rem; max-width:70ch;}
.klein{font-size:var(--t-klein);}
.mono{font-variant-numeric:tabular-nums lining-nums; letter-spacing:.01em;}
/* echte Monospace nur dort, wo Zeichen einzeln verglichen werden (Scan-Maske, Rohdaten) */
.num{text-align:right; font-variant-numeric:tabular-nums;}
.rechts{text-align:right;}
.stapel>*+*{margin-top:var(--s3);}

footer.fuss{border-top:1px solid var(--linie); color:var(--gedaempft); font-size:var(--t-klein);}
.fuss-innen{width:min(1120px,100%); margin:0 auto; padding:var(--s4); display:flex; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;}

/* ------------------------------------------------------------ Meldungen */
.meldung{border-radius:var(--radius); padding:var(--s3) var(--s4); margin:0 0 var(--s4); border:1px solid;
  border-left-width:4px;}
.meldung.ok{background:var(--ok-flaeche); border-color:var(--ok); color:var(--text);}
.meldung.fehler{background:var(--fehler-flaeche); border-color:var(--fehler); color:var(--text);}
.meldung.warn{background:var(--warn-flaeche); border-color:var(--warn); color:var(--text);}
.meldung b{margin-right:var(--s1);}

/* ------------------------------------------------------------ Knöpfe */
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:var(--s2) var(--s4); border-radius:var(--radius);
  background:var(--marke); color:var(--auf-marke); border:1px solid var(--marke);
  font:inherit; font-weight:700; text-decoration:none; cursor:pointer; white-space:nowrap;
}
.knopf:hover{background:var(--marke-hover); border-color:var(--marke-hover); color:var(--auf-marke);}
.knopf.leise{background:var(--flaeche); color:var(--marke); border-color:var(--linie-stark); font-weight:500;}
.knopf.leise:hover{background:var(--flaeche-2);}
.knopf.gefahr{background:var(--flaeche); color:var(--fehler); border-color:var(--fehler); font-weight:500;}
.knopf.gefahr:hover{background:var(--fehler-flaeche);}
.knopf.klein{min-height:36px; padding:var(--s1) var(--s3); font-size:.9375rem;}
.knopf[disabled]{opacity:.5; cursor:not-allowed;}
.aktionen{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin-top:var(--s4);}

/* ------------------------------------------------------------ Karten */
.karte{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:var(--s4) var(--s5); box-shadow:var(--schatten);}
.karte+.karte{margin-top:var(--s4);}
.karte h2:first-child, .karte h3:first-child{margin-top:0;}
.karte.akzent{border-left:4px solid var(--akzent);}
.raster-2{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s4);}

/* Kennzahlen */
.zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s3); margin:var(--s4) 0;}
.zahlen>div{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius); padding:var(--s3) var(--s4);}
.zahlen span{display:block; font-size:var(--t-klein); color:var(--gedaempft);}
.zahlen b{font-size:1.375rem; font-variant-numeric:tabular-nums;}
.zahlen .stark{border-color:var(--marke); border-width:2px;}
.zahlen .stark b{color:var(--marke);}

/* ------------------------------------------------------------ Tabellen */
.tabelle-rahmen{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  overflow-x:auto; box-shadow:var(--schatten);}
table.liste{width:100%; border-collapse:collapse;}
table.liste th{text-align:left; font-size:var(--t-klein); font-weight:700; color:var(--gedaempft);
  background:var(--flaeche-2); padding:var(--s2) var(--s3); border-bottom:1px solid var(--linie); white-space:nowrap;}
table.liste td{padding:var(--s3); border-bottom:1px solid var(--linie); vertical-align:top;}
table.liste tr:last-child td{border-bottom:none;}
table.liste tbody tr:hover{background:var(--flaeche-2);}
table.liste small{display:block; color:var(--gedaempft); font-size:var(--t-klein);}
table.liste tfoot td{font-weight:700; background:var(--flaeche-2);}
table.liste tfoot tr:not(.total) td{font-weight:400;}
table.liste tfoot tr.total td{border-top:2px solid var(--linie-stark);}
a.zeilenlink{color:var(--text); text-decoration:none; font-weight:700;}
/* Lohn (unselbständig) und Honorar (selbständig) in der Liste klar getrennt */
.art{display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:2px 8px; border-radius:4px; border:1px solid;}
.art-lohn{color:var(--ok); border-color:var(--ok); background:var(--ok-flaeche);}
.art-honorar{color:var(--akzent); border-color:var(--akzent); background:var(--akzent-flaeche);}
table.liste tbody tr.zeile-lohn td:first-child{box-shadow:inset 4px 0 0 var(--ok);}
table.liste tbody tr.zeile-honorar td:first-child{box-shadow:inset 4px 0 0 var(--akzent);}
table.liste tbody tr.zeile-honorar{background:var(--akzent-flaeche);}
a.zeilenlink:hover{color:var(--marke); text-decoration:underline;}
/* Handy: Tabellen als Karten */
@media (max-width:720px){
  table.karten thead{display:none;}
  table.karten, table.karten tbody, table.karten tfoot, table.karten tr, table.karten td{display:block; width:100%;}
  table.karten tr{padding:var(--s3) var(--s4); border-bottom:1px solid var(--linie);}
  table.karten td{border:0; padding:2px 0; text-align:left;}
  table.karten td[data-label]::before{content:attr(data-label) ": "; color:var(--gedaempft); font-size:var(--t-klein);}
  table.karten td.rechts{text-align:left; padding-top:var(--s2);}
  table.karten tfoot tr{background:var(--flaeche-2);}
  table.karten tbody tr.zeile-lohn{box-shadow:inset 4px 0 0 var(--ok);}
  table.karten tbody tr.zeile-honorar{box-shadow:inset 4px 0 0 var(--akzent);}
  table.karten tbody tr.zeile-lohn td:first-child, table.karten tbody tr.zeile-honorar td:first-child{box-shadow:none;}
  table.karten tfoot tr.total{border-top:2px solid var(--linie-stark);}
  table.karten tfoot tr.total td{border-top:0;}
}

/* Badges */
.badge{display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.04em; padding:1px 7px;
  border-radius:10px; border:1px solid var(--akzent); color:var(--akzent); background:var(--akzent-flaeche);
  vertical-align:middle;}
.badge.ok{border-color:var(--ok); color:var(--ok); background:var(--ok-flaeche);}
.badge.warn{border-color:var(--warn); color:var(--warn); background:var(--warn-flaeche);}
.badge.leise{border-color:var(--linie-stark); color:var(--gedaempft); background:var(--flaeche);}
.chip{display:inline-flex; align-items:center; min-height:32px; font-size:.875rem; padding:2px 10px;
  border:1px solid var(--linie-stark); border-radius:16px; color:var(--marke); background:var(--flaeche);
  text-decoration:none; margin:2px 4px 2px 0;}
.chip:hover{background:var(--flaeche-2);}
.chip.aktiv{background:var(--marke); color:var(--auf-marke); border-color:var(--marke);}

/* Filterleiste */
.filter{display:flex; gap:var(--s2); flex-wrap:wrap; align-items:center; margin-bottom:var(--s4);}
.filter input[type=search]{flex:1 1 220px; max-width:360px;}

/* ------------------------------------------------------------ Formulare */
.formular section{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:var(--s4) var(--s5) var(--s5); margin-bottom:var(--s4); box-shadow:var(--schatten);}
.formular section>h2{margin:0 0 var(--s1); display:flex; align-items:center; gap:var(--s2);}
.formular section>h2 .nr{display:inline-flex; width:28px; height:28px; border-radius:50%; align-items:center;
  justify-content:center; background:var(--marke); color:var(--auf-marke); font-size:.875rem;}
.formular section>.hinweis{margin-bottom:var(--s4);}
.felder{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s3) var(--s4);}
.felder .breit{grid-column:1/-1;}
@media (min-width:721px){ .felder .halb{grid-column:span 2;} }
label{display:block; font-size:.9375rem; font-weight:500;}
label>input, label>select, label>textarea{display:block; margin-top:var(--s1);}
label>.feldhilfe{display:block; margin-top:var(--s1);}
/* Felder einer Zeile bündig, auch wenn eine Beschriftung zweizeilig ist: Beschriftung oben,
   Eingabefeld immer am unteren Rand der Zelle (nur Felder ohne Hilfetext darunter) */
.felder.unten > label{display:flex; flex-direction:column; justify-content:space-between;}
.felder.unten > label > .lbl{display:block; margin-bottom:var(--s1);}
.felder.unten > label > input, .felder.unten > label > select{margin-top:auto;}
label .opt{font-weight:400; color:var(--gedaempft); font-size:var(--t-klein);}
label .pflicht{color:var(--akzent);}
.feldhilfe{font-weight:400; color:var(--gedaempft); font-size:var(--t-klein);}
input, select, textarea{
  font:inherit; font-size:1rem; color:var(--text); background:var(--flaeche);
  border:1px solid var(--linie-stark); border-radius:var(--radius); padding:10px 12px; min-height:44px; width:100%;
}
textarea{min-height:120px; resize:vertical; line-height:1.5;}
input:focus, select:focus, textarea:focus{outline:2px solid var(--fokus); outline-offset:0; border-color:var(--fokus);}
input:user-invalid{border-color:var(--fehler);}
input[type=checkbox], input[type=radio]{width:20px; height:20px; min-height:0; accent-color:var(--marke); margin:0;}
label.kaestchen{display:flex; flex-direction:row; align-items:center; gap:var(--s2); font-weight:400; min-height:44px;}
fieldset{border:0; padding:0; margin:0; min-width:0;}
legend{font-weight:500; font-size:.9375rem; margin-bottom:var(--s2); padding:0;}
.wahl{display:flex; gap:var(--s2); flex-wrap:wrap;}
.wahl label{display:flex; flex-direction:row; align-items:center; gap:var(--s2); border:1px solid var(--linie-stark);
  border-radius:var(--radius); padding:var(--s2) var(--s3); min-height:44px; font-weight:400; cursor:pointer;
  background:var(--flaeche);}
.wahl label:has(input:checked){border-color:var(--marke); background:var(--flaeche-2); font-weight:700;}
.absenden{position:sticky; bottom:0; background:var(--bg); border-top:1px solid var(--linie);
  padding:var(--s3) 0; margin-top:var(--s4); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; z-index:5;}
.absenden .hinweis{margin:0;}
[hidden]{display:none !important;}

/* Aufklapper */
details.karte>summary{cursor:pointer; font-weight:700; list-style:none; display:flex; align-items:center;
  gap:var(--s2); min-height:32px;}
details.karte>summary::-webkit-details-marker{display:none;}
details.karte>summary::before{content:"▸"; color:var(--marke); transition:transform .15s;}
details.karte[open]>summary::before{transform:rotate(90deg);}
details.karte[open]>summary{margin-bottom:var(--s3);}
@media (prefers-reduced-motion:reduce){ details.karte>summary::before{transition:none;} }

/* Prüfliste aus dem PDF */
ul.pruefung{list-style:none; padding:0; margin:0;}
ul.pruefung li{padding:var(--s1) 0 var(--s1) 28px; position:relative;}
ul.pruefung li::before{position:absolute; left:0; font-weight:700; width:20px; text-align:center;}
ul.pruefung li.ok::before{content:"✓"; color:var(--ok);}
ul.pruefung li.warn::before{content:"!"; color:var(--warn);}
ul.pruefung li.fehler::before{content:"✕"; color:var(--fehler);}

/* Dokumente */
ul.dokumente{list-style:none; padding:0; margin:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3);}
ul.dokumente li{background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  display:flex; flex-direction:column;}
ul.dokumente li>a.haupt{display:block; padding:var(--s3) var(--s4); text-decoration:none; color:var(--text); flex:1;}
ul.dokumente li>a.haupt:hover{background:var(--flaeche-2);}
ul.dokumente b{display:block;}
ul.dokumente span{display:block; font-size:var(--t-klein); color:var(--gedaempft); margin-top:2px;}
ul.dokumente .laden{border-top:1px solid var(--linie); padding:var(--s1) var(--s4); font-size:var(--t-klein);}
ul.dokumente li.intern{border-color:var(--akzent); background:var(--akzent-flaeche);}

/* Checkliste */
table.checkliste td:first-child{width:28px; text-align:center;}
.zeichen-ok{color:var(--ok); font-weight:700;}
.zeichen-selbst{color:var(--akzent); font-weight:700;}

/* Definitionslisten */
dl.kv{display:grid; grid-template-columns:minmax(120px,max-content) 1fr; gap:var(--s1) var(--s4); margin:0;}
dl.kv dt{color:var(--gedaempft);}
dl.kv dd{margin:0; overflow-wrap:anywhere;}

/* Leerzustand */
.leer{text-align:center; padding:var(--s7) var(--s4); background:var(--flaeche); border:1px dashed var(--linie-stark);
  border-radius:var(--radius);}
.leer p{color:var(--gedaempft);}

/* Login */
.login{width:min(420px,100%); margin:var(--s6) auto;}
.login .karte{padding:var(--s5);}
.login h1{font-size:var(--t-gross); margin-bottom:var(--s4);}

pre.json{font-family:var(--mono); font-size:var(--t-klein); background:var(--flaeche-2); padding:var(--s3);
  border-radius:var(--radius); overflow:auto; max-height:420px;}
code{font-family:var(--mono); font-size:.9em; background:var(--flaeche-2); padding:1px 5px; border-radius:4px;}
@media (max-width:720px){
  table.checkliste td:first-child{float:left; width:24px; padding-top:2px;}
}

/* ------------------------------------------------------------ Scan-Bestätigung */
.scanliste{display:flex; flex-direction:column;}
.scanzeile{display:grid; grid-template-columns:minmax(140px,180px) minmax(0,1.3fr) minmax(220px,1fr);
  gap:var(--s2) var(--s4); align-items:center; padding:var(--s3) 0; border-bottom:1px solid var(--linie);}
.scanzeile:last-child{border-bottom:0;}
.scanzeile.leer{opacity:.6;}
.scanlabel{font-weight:700; font-size:.9375rem;}
.scanbild{background:#fff; border:1px solid var(--linie); border-radius:var(--radius); padding:4px; overflow:hidden;}
.scanbild img{display:block; max-width:100%; height:auto; max-height:72px; image-rendering:auto;}
.kaestchenbilder{display:flex; gap:var(--s4); background:none; border:0; padding:0;}
.kaestchenbilder figure{margin:0; text-align:center; background:#fff; border:1px solid var(--linie);
  border-radius:var(--radius); padding:4px 8px;}
.kaestchenbilder img{height:36px; width:auto;}
.kaestchenbilder figcaption{font-size:var(--t-klein); color:#4f5f68;}
.scanwert input{font-family:var(--mono); font-size:1.0625rem;}
.scanwert input.ok{border-color:var(--ok);}
.scanwert input.falsch{border-color:var(--fehler); background:var(--fehler-flaeche);}
.scanstatus{display:block; font-size:var(--t-klein); margin-top:var(--s1); min-height:1em;}
.scanstatus.ok{color:var(--ok);} .scanstatus.fehler{color:var(--fehler);} .scanstatus.warn{color:var(--warn);}
@media (max-width:720px){
  .scanzeile{grid-template-columns:1fr;}
}

/* ------------------------------------------------------------ Status */
.status{display:inline-block; font-size:.8125rem; font-weight:700; padding:2px 9px; border-radius:10px;
  border:1px solid; white-space:nowrap; vertical-align:middle;}
.status-entwurf{color:var(--gedaempft); border-color:var(--linie-stark); background:var(--flaeche-2);}
.status-vereinbart{color:var(--warn); border-color:var(--warn); background:var(--warn-flaeche);}
.status-abgerechnet{color:var(--marke); border-color:var(--marke); background:var(--flaeche);}
.status-ausbezahlt{color:var(--ok); border-color:var(--ok); background:var(--ok-flaeche);}
.status-abgesagt{color:var(--gedaempft); border-color:var(--linie); background:none; text-decoration:line-through;}
/* Jahresabschluss */
.status-abschluss-offen{color:var(--warn); border-color:var(--warn); background:var(--warn-flaeche);}
.status-abschluss-geprueft{color:var(--marke); border-color:var(--marke); background:var(--flaeche);}
.status-abschluss-deklariert{color:var(--ok); border-color:var(--ok); background:var(--ok-flaeche);}
ul.tight{margin:4px 0 0; padding-left:1.2em;}
ul.tight li{margin:2px 0;}
.knopf-link{background:none; border:0; cursor:pointer; font:inherit;}
details > summary small{display:inline; cursor:pointer;}
.statusleiste{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2) var(--s3); padding:var(--s3) var(--s4);
  margin-bottom:var(--s4);}
.statusform{display:flex; gap:var(--s2); align-items:center; margin:0 0 0 auto;}
.statusform input{min-height:36px; padding:6px 10px;}
.chip small{color:inherit; opacity:.75; margin-left:4px;}
.chip.fehlt{border-style:dashed; color:var(--gedaempft);}