/* Prüfprotokolle – Oberfläche (für Smartphone, Tablet und PC) */
:root {
  --primaer: #0b5cad; --primaer-d: #084785;
  --gut: #17803d; --gut-h: #e3f5e9;
  --schlecht: #c62828; --schlecht-h: #fdeaea;
  --warn: #b26a00; --warn-h: #fff4e0;
  --info-h: #e8f1fb;
  --text: #1d2430; --grau: #5d6878; --linie: #d9dee5; --hg: #f3f5f8; --karte: #fff;
  --radius: 10px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; color: var(--text); background: var(--hg); line-height: 1.45; }
a { color: var(--primaer); }
h1 { font-size: 1.6rem; margin: .2em 0 .4em; }
h2 { font-size: 1.15rem; margin: 0 0 .6em; }
h3 { font-size: 1rem; margin: 0 0 .3em; }
small, .hinweis { color: var(--grau); }
.hinweis { font-size: .9rem; }
.mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
.nowrap { white-space: nowrap; }
.r { text-align: right; }
[hidden] { display: none !important; }

/* Kopfzeile */
.kopf { background: #13233a; color: #fff; display: flex; align-items: center; gap: 1rem; padding: .5rem 1rem; position: sticky; top: 0; z-index: 10; }
.kopf .logo { color: #fff; text-decoration: none; font-weight: 700; white-space: nowrap; }
.kopf nav { display: flex; gap: .25rem; align-items: center; flex: 1; flex-wrap: wrap; }
.kopf nav a { color: #cfd8e6; text-decoration: none; padding: .45rem .7rem; border-radius: 6px; }
.kopf nav a:hover, .kopf nav a.aktiv { background: rgba(255,255,255,.12); color: #fff; }
.nav-trenner { flex: 1; }
.menu-btn { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.6rem; }
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .kopf { flex-wrap: wrap; }
  .kopf nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .menu-offen .kopf nav { display: flex; }
  .nav-trenner { display: none; }
}

.inhalt { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
details.karte summary { cursor: pointer; font-weight: 600; }
details.karte[open] summary { margin-bottom: .8rem; }
.titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.titelzeile.klein { align-items: center; }
.untertitel { color: var(--grau); margin: 0; }
.brotkrumen { color: var(--grau); font-size: .9rem; margin: 0; }
.knopfgruppe { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .55rem 1rem; border: 1px solid var(--linie); border-radius: 8px;
       background: #fff; color: var(--text); font: inherit; text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn:hover { background: #f0f3f7; }
.btn.primaer { background: var(--primaer); color: #fff; border-color: var(--primaer); }
.btn.primaer:hover { background: var(--primaer-d); }
.btn.gefahr { color: var(--schlecht); }
.btn.gross { padding: .8rem 1.3rem; font-size: 1.05rem; font-weight: 600; }
.btn.klein { padding: .25rem .6rem; font-size: .85rem; }
.btn.voll { width: 100%; }
.btn:disabled { opacity: .6; cursor: wait; }

/* Meldungen */
.meldung { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; border-left: 5px solid; transition: opacity .5s; }
.meldung.ok { background: var(--gut-h); border-color: var(--gut); }
.meldung.fehler { background: var(--schlecht-h); border-color: var(--schlecht); }
.meldung.warn { background: var(--warn-h); border-color: var(--warn); }
.meldung.info { background: var(--info-h); border-color: var(--primaer); }
.meldung.klein { padding: .4rem .7rem; margin: .5rem 0 0; font-size: .9rem; }
.meldung.weg { opacity: 0; }

/* Badges */
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .8rem; font-weight: 600; background: #e8ebef; color: var(--grau); white-space: nowrap; }
.badge.ok { background: var(--gut-h); color: var(--gut); }
.badge.bald { background: var(--warn-h); color: var(--warn); }
.badge.ueberfaellig, .badge.gesperrt { background: var(--schlecht-h); color: var(--schlecht); }
.badge.neu { background: var(--info-h); color: var(--primaer); }

/* Formulare */
.formular label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .92rem; margin-bottom: .8rem; }
.formular label small { font-weight: 400; }
input, select, textarea { font: inherit; padding: .6rem .7rem; border: 1px solid #c3cad4; border-radius: 8px; background: #fff; color: var(--text); width: 100%; font-weight: 400; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(11,92,173,.25); border-color: var(--primaer); }
.formular label.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
.formular label.check input { width: auto; transform: scale(1.3); }
.raster2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.raster2 .span2 { grid-column: 1 / -1; }
@media (max-width: 640px) { .raster2 { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--linie); border-radius: 8px; margin: 0 0 1rem; }
.aktionen { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.feldgruppe { margin-bottom: .8rem; }
.feldlabel { font-weight: 600; font-size: .92rem; display: block; margin-bottom: .3rem; }
.schmal { max-width: 360px; }

/* Segment-Buttons (Radio) */
.segment { display: flex; flex-wrap: wrap; gap: .4rem; }
.formular .segment label { margin: 0; flex-direction: row; font-weight: 600; }
.segment input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segment span { display: block; padding: .65rem 1rem; border: 2px solid var(--linie); border-radius: 8px; cursor: pointer; background: #fff; user-select: none; }
.segment input:checked + span { border-color: var(--primaer); background: var(--info-h); color: var(--primaer-d); }
.segment input:focus-visible + span { outline: 3px solid rgba(11,92,173,.3); }
.ok-nok label:first-child input:checked + span { border-color: var(--gut); background: var(--gut-h); color: var(--gut); }
.ok-nok label:last-child input:checked + span { border-color: var(--schlecht); background: var(--schlecht-h); color: var(--schlecht); }
.ok-zeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.ok-zeile .feldlabel { font-size: 1.05rem; margin: 0; }

/* Tabellen */
.tabelle-wrap { overflow-x: auto; }
.tabelle { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabelle th, .tabelle td { padding: .5rem .6rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
.tabelle th { background: #f7f9fb; font-size: .82rem; text-transform: none; color: var(--grau); white-space: nowrap; }
.tabelle tbody tr:hover { background: #f8fafc; }
.tabelle tr.inaktiv { opacity: .55; }
.tabelle.kompakt td, .tabelle.kompakt th { padding: .35rem .45rem; }
.tabelle .r { text-align: right; }
.filter { margin-bottom: .6rem; max-width: 360px; }
.suchzeile { display: flex; gap: .5rem; flex-wrap: wrap; }
.suchzeile input, .suchzeile select { flex: 1; min-width: 180px; width: auto; }

/* Kacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .8rem 1rem; color: var(--grau); text-decoration: none; font-size: .9rem; }
.kachel .zahl { display: block; font-size: 1.8rem; font-weight: 700; color: var(--text); }
.kachel.warn { border-color: var(--schlecht); } .kachel.warn .zahl { color: var(--schlecht); }
.kachel.hinweis-k .zahl { color: var(--warn); }

/* Scan */
.scan-karte { background: var(--karte); border: 2px solid var(--primaer); border-radius: 14px; padding: 1.2rem; margin-bottom: 1rem; }
.scan-label { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .5rem; }
.scan-zeile { display: flex; gap: .5rem; }
.scan-feld { font-size: 1.5rem; padding: .7rem 1rem; font-family: ui-monospace, Consolas, monospace; letter-spacing: 1px; flex: 1; min-width: 0; }
.kamera { margin-top: 1rem; text-align: center; }
.kamera video { width: 100%; max-width: 520px; border-radius: 10px; background: #000; display: block; margin: 0 auto .5rem; }

/* Gerät */
.raster-geraet { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
@media (max-width: 760px) { .raster-geraet { grid-template-columns: 1fr; } }
.daten { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; }
.daten dt { color: var(--grau); }
.daten dd { margin: 0; }
.barcode-vorschau { text-align: center; }
.barcode-vorschau svg { width: 100%; max-width: 260px; height: 70px; }

/* Prüfformular */
.pruef-kopf { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.pruef-kopf h1 { margin: 0; }
.gross-text { font-size: 1.1rem; color: var(--primaer); font-weight: 700; }
.pruef-kopf .letzte { text-align: right; font-size: .9rem; color: var(--grau); }
.messwerte { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin-bottom: .8rem; }
.formular .messfeld { border: 2px solid var(--linie); border-radius: 10px; padding: .6rem .7rem; margin: 0; gap: .15rem; transition: border-color .15s, background .15s; }
.mess-sym { font-size: 1.05rem; }
.mess-beschr { font-weight: 400; font-size: .8rem; color: var(--grau); min-height: 2.1em; }
.messfeld input { font-size: 1.35rem; padding: .45rem .6rem; text-align: right; font-family: ui-monospace, Consolas, monospace; }
.mess-grenze { font-weight: 400; font-size: .8rem; color: var(--grau); text-align: right; }
.messfeld.gut { border-color: var(--gut); background: var(--gut-h); }
.messfeld.schlecht, .messfeld.ungueltig { border-color: var(--schlecht); background: var(--schlecht-h); }
.messfeld.schlecht .mess-grenze { color: var(--schlecht); font-weight: 700; }

.ergebnis-leiste { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap;
                   padding: .8rem 1rem; border-radius: 12px 12px 0 0; background: #fff; border: 2px solid var(--linie); box-shadow: 0 -4px 14px rgba(0,0,0,.08); }
.ergebnis-leiste.gut { border-color: var(--gut); }
.ergebnis-leiste.schlecht { border-color: var(--schlecht); background: var(--schlecht-h); }
.ergebnis-text { font-weight: 700; font-size: 1.1rem; }
.ergebnis-leiste.gut .ergebnis-text { color: var(--gut); }
.ergebnis-leiste.schlecht .ergebnis-text { color: var(--schlecht); }
@media (max-width: 640px) {
  .ergebnis-leiste .knopfgruppe { width: 100%; }
  .ergebnis-leiste .btn.gross { flex: 1; }
  .pruef-kopf .letzte { text-align: left; }
}

/* Login */
.login-seite { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1rem; }
.login-box { background: #fff; border-radius: 14px; padding: 2rem; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.login-box.breit { max-width: 720px; }
.login-box h1 { margin-top: 0; }
.code { background: #f3f5f8; padding: 1rem; overflow-x: auto; font-size: .85rem; }

@media print { .no-print { display: none !important; } }