:root {
  --grund: #f4f5f7; --flaeche: #fff; --text: #1b2430; --leise: #5f6b7a; --linie: #dfe3e8;
  --akzent: #0b6bcb; --akzent-text: #fff; --warn: #8a5a00; --warn-grund: #fff6e0; --fehler: #b3261e; --gut: #1a7f45;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #14181e; --flaeche: #1e242c; --text: #e7ebf0; --leise: #9aa6b4; --linie: #333c47;
    --akzent: #5aa9f0; --akzent-text: #0c1a28; --warn: #f0c56b; --warn-grund: #3a2f14; --fehler: #ff8a80; --gut: #5fd08f;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.5 system-ui, "Segoe UI", sans-serif; }
header, main { max-width: 860px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
h1 { margin: 0; font-size: 1.6rem; }
h2 { margin: 0 0 12px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.nr { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-size: .85rem; }
.leise { color: var(--leise); font-size: .88rem; margin: 4px 0; font-weight: 400; }
section { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; padding: 16px; margin: 16px 0; }
label { display: block; margin: 10px 0; font-weight: 600; font-size: .88rem; }
input:not([type=file]), select, textarea {
  display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: 400 15px/1.4 inherit; font-family: inherit;
  color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 6px;
}
textarea { resize: vertical; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 12px; }
.ablage { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 24px 12px; border: 2px dashed var(--linie); border-radius: 8px; cursor: pointer; text-align: center; }
.ablage.ueber, .ablage:hover { border-color: var(--akzent); }
.ablage input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ablage:focus-within { outline: 2px solid var(--akzent); }
.vorschau { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vorschau div { position: relative; }
.vorschau img { display: block; width: 92px; height: 92px; object-fit: cover; border-radius: 6px; }
.vorschau button { position: absolute; top: 2px; right: 2px; width: 26px; height: 26px; padding: 0; border-radius: 50%; line-height: 1; }
button { padding: 9px 14px; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 6px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--akzent); }
button:disabled { opacity: .55; cursor: default; }
button.haupt { background: var(--akzent); color: var(--akzent-text); border-color: var(--akzent); font-weight: 600; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
a.knopf { padding: 9px 14px; border: 1px solid var(--linie); border-radius: 6px; color: var(--text); text-decoration: none; }
a.knopf:hover { border-color: var(--akzent); }
a { color: var(--akzent); }
.fehler { color: var(--fehler); font-weight: 600; }
.warnung { list-style: none; padding: 0; margin: 8px 0; }
.warnung li { background: var(--warn-grund); color: var(--warn); padding: 6px 10px; border-radius: 6px; margin: 4px 0; font-size: .9rem; }
.marke { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--linie); color: var(--leise); }
.marke.hoch, .marke.exakt { color: var(--gut); border-color: var(--gut); }
.marke.niedrig { color: var(--fehler); border-color: var(--fehler); }
.daten { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 10px 0; font-size: .9rem; }
.daten dt { color: var(--leise); }
.daten dd { margin: 0; }
.tabelle { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; color: var(--leise); font-weight: 600; font-size: .8rem; }
th, td { padding: 7px 8px 7px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.rechts { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.passend td { background: color-mix(in srgb, var(--gut) 10%, transparent); }
tr.gedimmt { opacity: .6; }
.klein { display: block; color: var(--leise); font-size: .8rem; }
.preise { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.preise div { background: var(--grund); border-radius: 8px; padding: 10px; }
.preise strong { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.preise .vorschlag { outline: 2px solid var(--akzent); }
.preise span { color: var(--leise); font-size: .8rem; }