:root {
    --hintergrund: #f6f7f9;
    --karte: #ffffff;
    --text: #1d2330;
    --leise: #5d6675;
    --rand: #d9dde4;
    --akzent: #1f5fbf;
    --rot: #c0392b;
    --gelb: #fff4d6;
    --fehler: #fde8e6;
}

@media (prefers-color-scheme: dark) {
    :root {
        --hintergrund: #15181e;
        --karte: #1f242c;
        --text: #e7eaf0;
        --leise: #9aa3b2;
        --rand: #333a45;
        --akzent: #6ea2f0;
        --rot: #e0675a;
        --gelb: #3d3420;
        --fehler: #43221f;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--hintergrund);
    color: var(--text);
}

header, main { max-width: 760px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
h1 { margin: 0 0 4px; font-size: 1.6rem; }
h2 { font-size: 1.15rem; margin-top: 32px; }
.leise { color: var(--leise); }

.karte {
    background: var(--karte);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 16px;
    margin: 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

[hidden] { display: none !important; }

label { font-weight: 600; }
.pflicht { font-weight: 400; font-size: 0.8rem; color: var(--leise); }
.haken { font-weight: 400; display: flex; gap: 8px; align-items: center; }

input:not([type]), input[type="text"], textarea {
    font: inherit;
    padding: 8px 10px;
    border: 1px solid var(--rand);
    border-radius: 6px;
    background: var(--hintergrund);
    color: var(--text);
    width: 100%;
}

button {
    font: inherit;
    padding: 8px 16px;
    border: 0;
    border-radius: 6px;
    background: var(--akzent);
    color: #fff;
    cursor: pointer;
    align-self: flex-start;
}
button:disabled { opacity: 0.5; cursor: default; }
button.rot { background: var(--rot); }

.zeile { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.zeile input { flex: 1 1 200px; width: auto; }

.punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--rot); animation: blinken 1.2s infinite; }
@keyframes blinken { 50% { opacity: 0.3; } }

.hinweis { padding: 8px 12px; border-radius: 6px; background: var(--gelb); margin: 8px 0; }
.hinweis.fehler { background: var(--fehler); }

.kommentare { margin: 0; padding-left: 20px; color: var(--leise); }

.liste { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.liste li { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 12px 16px; }
.liste video { width: 100%; margin-top: 8px; border-radius: 6px; background: #000; }

.marke { font-size: 0.8rem; padding: 2px 8px; border-radius: 10px; background: var(--rand); }
.marke.fertig { background: #d5f0dc; color: #1b5e2b; }
.marke.fehler { background: var(--fehler); }
.marke.auswertung-wartet, .marke.auswertung-laeuft { background: #fff3cd; color: #6b4e00; }
.marke.auswertung-fertig { background: #dbe9fb; color: #17406f; }
.marke.auswertung-fehler { background: var(--fehler); }

#test-anim { width: 100%; max-width: 640px; }

.konto { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.konto h2 { margin: 0 0 4px; }
button.schlicht { background: none; color: var(--akzent); border: none; padding: 0; cursor: pointer; text-align: left; }
#einladung-link { word-break: break-all; }
select { font: inherit; padding: 8px; border: 1px solid var(--rand); border-radius: 6px; background: var(--karte); color: var(--text); }

/* Bericht (V-42): Prüfansicht und Kundenansicht */
.marke.freigegeben { background: #d5f0dc; color: #1b5e2b; }
.marke.gesperrt { background: var(--fehler); }
.marke.offen { background: var(--gelb); }
.bericht { background: var(--karte); border: 1px solid var(--rand); border-radius: 10px; padding: 8px 16px; margin-top: 8px; }
.bericht h2 { font-size: 1.2rem; }
.bericht h3 { font-size: 1.05rem; margin-top: 20px; }
.tabelle { overflow-x: auto; }
.tabelle table { border-collapse: collapse; font-size: 0.9rem; }
.tabelle th, .tabelle td { border: 1px solid var(--rand); padding: 4px 8px; text-align: left; vertical-align: top; }
.ergebnisse { width: 100%; border-collapse: collapse; }
.ergebnisse th, .ergebnisse td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rand); }
.ergebnisse tr[data-id] { cursor: pointer; }
.ergebnisse tr[data-id]:hover { background: var(--karte); }
.empfehlung { border: 1px solid var(--rand); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.empfehlung.gestrichen textarea { text-decoration: line-through; opacity: 0.6; }
.stichproben { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.stichproben img { width: 100%; border-radius: 6px; border: 1px solid var(--rand); }
textarea.bericht-text { font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; min-height: 320px; }
pre.protokoll { white-space: pre-wrap; font-size: 0.8rem; }
main.breit, header.breit { max-width: 1000px; }
.marke.auswertung-freigegeben { background: #d5f0dc; color: #1b5e2b; }
.umsetzen { border-top: 1px solid var(--rand); margin-top: 16px; padding-top: 4px; }
.umsetzen-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 0; }
.umsetzen-zeile p { margin: 0; flex: 1 1 260px; }
.umsetzen-zeile input { flex: 1 1 200px; }

/* Prüfseite vor der ersten Aufnahme (V-13) */
.pruefpunkt h2 { margin: 0; }
.hinweis.ok { background: #d5f0dc; color: #1b5e2b; }
.hinweis.warnung { background: var(--gelb); }
.vorschau { width: 100%; max-width: 480px; border-radius: 6px; background: #000; }
.pegel { height: 8px; max-width: 320px; border-radius: 4px; background: var(--rand); overflow: hidden; }
.pegel div { height: 100%; width: 0; background: var(--akzent); transition: width 50ms linear; }
a.knopf { align-self: flex-start; padding: 8px 16px; border-radius: 6px; background: var(--akzent); color: #fff; text-decoration: none; }
@media (prefers-color-scheme: dark) { .hinweis.ok { background: #1f3a27; color: #b8e6c4; } }