/* Prüfmittelverwaltung – Oberfläche */
:root{
  --bg:#eef1f5; --karte:#fff; --rand:#d3dae3; --text:#16202c; --grau:#5d6b7c;
  --primaer:#12508c; --primaer-dunkel:#0d3c6b;
  --gruen:#1a7f43; --gruen-hell:#e6f5ec;
  --gelb:#a86a00; --gelb-hell:#fdf3e0;
  --rot:#b3261e;   --rot-hell:#fdeceb;
  --grau-hell:#eceff3;
  --radius:8px; --schatten:0 1px 3px rgba(16,32,48,.12);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:15px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--text);
}
h1,h2,h3{margin:0 0 .5rem; line-height:1.25}
h2{font-size:1.05rem; letter-spacing:.01em}
kbd{font:11px/1 "Segoe UI",sans-serif; background:#00000014; border:1px solid #00000022;
    border-radius:4px; padding:2px 4px; color:inherit}
.versteckt{display:none !important}
.wachsen{flex:1}
.unter{color:var(--grau); font-size:.87rem; margin:.15rem 0 .6rem}
.opt{color:var(--grau); font-weight:400; font-size:.78rem}
.fehler{color:var(--rot); font-weight:600; min-height:1.2em; margin:.4rem 0 0}
.hinweis{background:var(--gelb-hell); border-left:4px solid var(--gelb); padding:.5rem .7rem;
         border-radius:4px; font-size:.87rem}
.hinweis-klein{font-size:.8rem; color:var(--grau); text-align:center; margin-top:1rem}

/* ---------- Anmeldung ---------- */
.anmelde-schirm{position:fixed; inset:0; display:grid; place-items:center;
  background:linear-gradient(160deg,#12508c,#0a2a49); z-index:60}
.anmelde-box{background:#fff; padding:2rem 2.2rem; border-radius:12px; width:340px;
  box-shadow:0 18px 50px rgba(0,0,0,.35)}
.anmelde-box h1{font-size:1.3rem; text-align:center}
.anmelde-box .unter{text-align:center}
.anmelde-box label{display:block; margin:.9rem 0}
.anmelde-box input{width:100%}

/* ---------- Kopf ---------- */
.kopf{display:flex; align-items:center; gap:1rem; background:var(--primaer); color:#fff;
  padding:.5rem 1rem; position:sticky; top:0; z-index:30}
.kopf-links{display:flex; align-items:center; gap:.6rem}
.logo{font-size:1.5rem}
.kopf-titel{font-weight:700; font-size:1.02rem}
.kopf-firma{font-size:.78rem; opacity:.8}
.haupt-nav{display:flex; gap:.25rem; margin-left:auto}
.nav-btn{background:#ffffff1a; border:0; color:#fff; padding:.55rem .85rem; border-radius:6px;
  cursor:pointer; font-size:.9rem; font-family:inherit}
.nav-btn:hover{background:#ffffff30}
.nav-btn.aktiv{background:#fff; color:var(--primaer); font-weight:600}
.nav-btn.aktiv kbd{background:#12508c1a; border-color:#12508c33}
.kopf-rechts{display:flex; align-items:center; gap:.5rem; margin-left:1rem}
.benutzer-chip{font-size:.82rem; background:#ffffff22; padding:.3rem .6rem; border-radius:20px}

main{max-width:1500px; margin:0 auto; padding:1rem}
.ansicht{display:none}
.ansicht.aktiv{display:block}

/* ---------- Karten / Formulare ---------- */
.karte{background:var(--karte); border:1px solid var(--rand); border-radius:var(--radius);
  padding:1rem 1.1rem; margin-bottom:1rem; box-shadow:var(--schatten)}
.spalten-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
@media(max-width:900px){.spalten-2{grid-template-columns:1fr}}

input,select,textarea{font:inherit; padding:.5rem .6rem; border:1px solid #b9c4d0;
  border-radius:6px; background:#fff; color:inherit; width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primaer); outline-offset:0; border-color:var(--primaer)}
label{display:block; font-size:.82rem; font-weight:600; color:#33414f}
label input,label select,label textarea{margin-top:.2rem; font-weight:400; color:var(--text)}
label.pflicht>span.opt{display:none}
label.pflicht::after{content:" *"; color:var(--rot)}
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:.8rem}
.raster .breit{grid-column:1/-1}
.knopf-zeile{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.9rem; align-items:center}

.btn{font:inherit; padding:.5rem .9rem; border:1px solid #b9c4d0; background:#fff; color:var(--text);
  border-radius:6px; cursor:pointer}
.btn:hover{background:#f3f6f9}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn-primaer{background:var(--primaer); border-color:var(--primaer); color:#fff; font-weight:600}
.btn-primaer:hover{background:var(--primaer-dunkel)}
.btn-gross{padding:.7rem 1.3rem; font-size:1rem}
.btn-klein{padding:.3rem .6rem; font-size:.82rem}
.btn-gruen{background:var(--gruen); border-color:var(--gruen); color:#fff; font-weight:700}
.btn-gruen:hover{filter:brightness(1.08)}
.btn-gelb{background:var(--gelb); border-color:var(--gelb); color:#fff; font-weight:600}
.btn-rot{background:var(--rot); border-color:var(--rot); color:#fff; font-weight:600}

/* ---------- Kacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-bottom:1rem}
.kachel{background:#fff; border:1px solid var(--rand); border-left:5px solid var(--grau);
  border-radius:var(--radius); padding:.8rem 1rem; cursor:pointer; box-shadow:var(--schatten)}
.kachel:hover{background:#f8fafc}
.kachel .zahl{font-size:1.9rem; font-weight:700; line-height:1.1}
.kachel .bez{font-size:.82rem; color:var(--grau)}
.kachel.rot{border-left-color:var(--rot)} .kachel.rot .zahl{color:var(--rot)}
.kachel.gelb{border-left-color:var(--gelb)} .kachel.gelb .zahl{color:var(--gelb)}
.kachel.gruen{border-left-color:var(--gruen)} .kachel.gruen .zahl{color:var(--gruen)}
.kachel.blau{border-left-color:var(--primaer)} .kachel.blau .zahl{color:var(--primaer)}

/* ---------- Tabellen ---------- */
.tabelle-huelle{overflow:auto; border:1px solid var(--rand); border-radius:6px; max-height:65vh}
.tabelle-huelle.hoch{max-height:40vh}
.tabelle{width:100%; border-collapse:collapse; font-size:.88rem}
.tabelle th{position:sticky; top:0; background:var(--grau-hell); text-align:left;
  padding:.5rem .6rem; border-bottom:1px solid var(--rand); font-size:.78rem;
  text-transform:uppercase; letter-spacing:.03em; color:#44525f; white-space:nowrap; z-index:2}
.tabelle td{padding:.42rem .6rem; border-bottom:1px solid #eef1f4; vertical-align:middle}
.tabelle tbody tr:hover{background:#f5f9fd; cursor:pointer}
.tabelle tr.gewaehlt{background:#e8f1fa}
.sp-check{width:32px}
.nowrap{white-space:nowrap}
.mono{font-family:Consolas,"Courier New",monospace; font-weight:600}

/* ---------- Ampel / Marken ---------- */
.marke{display:inline-block; padding:.13rem .5rem; border-radius:20px; font-size:.75rem;
  font-weight:700; white-space:nowrap; border:1px solid transparent}
.m-gruen{background:var(--gruen-hell); color:var(--gruen); border-color:#b7e0c6}
.m-gelb{background:var(--gelb-hell); color:var(--gelb); border-color:#f0d9a8}
.m-rot{background:var(--rot-hell); color:var(--rot); border-color:#f2c0bc}
.m-grau{background:var(--grau-hell); color:var(--grau); border-color:#d5dbe2}

.mini-liste{display:flex; flex-direction:column; gap:.3rem; max-height:34vh; overflow:auto}
.mini-zeile{display:flex; align-items:center; gap:.6rem; padding:.45rem .6rem; border:1px solid var(--rand);
  border-radius:6px; cursor:pointer; background:#fff}
.mini-zeile:hover{background:#f5f9fd}
.mini-zeile .nr{font-family:Consolas,monospace; font-weight:700; min-width:82px}
.mini-zeile .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.leer{color:var(--grau); font-style:italic; padding:.6rem}

/* ---------- Schnellprüfung ---------- */
.pruef-karte{max-width:none}
.scan-feld{font-size:1.5rem; padding:.8rem 1rem; font-family:Consolas,monospace; font-weight:700;
  border:2px solid var(--primaer); letter-spacing:.05em}
.vorschlaege{display:flex; flex-direction:column; gap:.25rem; margin-top:.5rem}
.pruef-ziel{margin-top:1rem; border:2px solid var(--primaer); border-radius:var(--radius); overflow:hidden}
.pruef-kopf{background:#f2f7fc; padding:.8rem 1rem; display:flex; gap:1rem; align-items:flex-start;
  flex-wrap:wrap; border-bottom:1px solid var(--rand)}
.pruef-kopf .gross{font-size:1.35rem; font-weight:700}
.pruef-kopf .nr-gross{font-family:Consolas,monospace; font-size:1.5rem; font-weight:700; color:var(--primaer)}
.pruef-daten{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.5rem 1rem;
  padding:.8rem 1rem; font-size:.88rem}
.pruef-daten div span{display:block; color:var(--grau); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.03em}
.pruef-aktionen{display:flex; gap:.6rem; padding:.9rem 1rem; background:#fafcfe;
  border-top:1px solid var(--rand); flex-wrap:wrap; align-items:center}
.check-liste{padding:.2rem 1rem .8rem}
.check-liste label{display:flex; gap:.5rem; align-items:flex-start; font-weight:400; font-size:.87rem;
  padding:.2rem 0}
.check-liste input{width:auto; margin-top:.15rem}

/* ---------- Typenauswahl ---------- */
.typ-tabs{display:flex; gap:.3rem; margin-bottom:.7rem}
.tab{font:inherit; padding:.5rem 1rem; border:1px solid var(--rand); background:#fff; cursor:pointer;
  border-radius:6px}
.tab.aktiv{background:var(--primaer); color:#fff; border-color:var(--primaer); font-weight:600}
.typ-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.45rem}
.typ-knopf{text-align:left; font:inherit; padding:.55rem .7rem; border:1px solid var(--rand);
  background:#fff; border-radius:6px; cursor:pointer; line-height:1.25}
.typ-knopf:hover{background:#f3f8fd; border-color:var(--primaer)}
.typ-knopf.aktiv{background:var(--primaer); color:#fff; border-color:var(--primaer)}
.typ-knopf b{display:block; font-size:.88rem}
.typ-knopf small{font-size:.74rem; opacity:.75}
.norm-hinweis{background:#f2f7fc; border-left:4px solid var(--primaer); padding:.55rem .8rem;
  border-radius:4px; font-size:.83rem; margin-bottom:.9rem}

/* ---------- Detail ---------- */
.detail-kopf{display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap}
.detail-kopf .titel{font-size:1.35rem; font-weight:700}
.stamm-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.6rem 1.2rem;
  font-size:.9rem; margin-top:.8rem}
.stamm-raster div span{display:block; color:var(--grau); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.03em}
.zeitstrahl{border-left:2px solid var(--rand); margin-left:.5rem; padding-left:1rem}
.zeit-eintrag{position:relative; padding:.6rem 0; border-bottom:1px solid #eef1f4}
.zeit-eintrag::before{content:""; position:absolute; left:-1.32rem; top:1rem; width:10px; height:10px;
  border-radius:50%; background:var(--grau)}
.zeit-eintrag.io::before{background:var(--gruen)}
.zeit-eintrag.bedingt::before{background:var(--gelb)}
.zeit-eintrag.nio::before{background:var(--rot)}
.zeit-eintrag.storniert{opacity:.5; text-decoration:line-through}

/* ---------- Filter ---------- */
.filter-zeile{display:flex; gap:.5rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:.7rem}
.filter-zeile select,.filter-zeile input{width:auto; min-width:150px}
.filter-zeile .feld-suche{min-width:280px; flex:1}
.filter-zeile label.klein{font-size:.78rem}
.aktions-zeile{display:flex; gap:.5rem; align-items:center; margin-bottom:.6rem; flex-wrap:wrap}

/* ---------- Berichte ---------- */
.bericht-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:.5rem;
  margin-bottom:1rem}
.bericht-kachel{text-align:left; font:inherit; padding:.7rem .9rem; border:1px solid var(--rand);
  background:#fff; border-radius:6px; cursor:pointer}
.bericht-kachel:hover{border-color:var(--primaer); background:#f3f8fd}
.bericht-kachel b{display:block}
.bericht-kachel span{font-size:.78rem; color:var(--grau)}

/* ---------- Modal ---------- */
.modal-huelle{position:fixed; inset:0; background:#0d1b2acc; display:grid; place-items:center;
  z-index:50; padding:1rem; overflow:auto}
.modal{background:#fff; border-radius:10px; padding:1.2rem 1.4rem; width:min(760px,100%);
  max-height:92vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.4)}
.modal h2{margin-bottom:.2rem}

/* ---------- Toast ---------- */
#toast-bereich{position:fixed; right:1rem; bottom:1rem; display:flex; flex-direction:column;
  gap:.5rem; z-index:70}
.toast{background:#16202c; color:#fff; padding:.7rem 1rem; border-radius:8px; font-size:.9rem;
  box-shadow:0 6px 20px rgba(0,0,0,.3); display:flex; gap:.8rem; align-items:center;
  animation:auftauchen .18s ease-out}
.toast.gut{background:var(--gruen)} .toast.schlecht{background:var(--rot)}
@keyframes auftauchen{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------- Etiketten / Druck ---------- */
#druckbereich{display:none}
.etiketten{display:flex; flex-wrap:wrap; gap:4mm}
.etikett{width:70mm; border:1px solid #000; padding:2mm 2.5mm; font-size:8pt; line-height:1.25;
  break-inside:avoid; display:flex; gap:2mm; align-items:center}
.etikett .et-links{flex:1; min-width:0}
.etikett .et-titel{font-weight:700; font-size:8.5pt; text-transform:uppercase; letter-spacing:.04em}
.etikett .et-nr{font-family:Consolas,monospace; font-weight:700; font-size:11pt}
.etikett .et-name{font-size:7.5pt; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.etikett .et-faellig{font-size:13pt; font-weight:700}
.etikett .et-klein{font-size:6.5pt}
.etikett svg{display:block}

.druck-kopf{display:flex; justify-content:space-between; align-items:flex-start;
  border-bottom:2px solid #000; padding-bottom:3mm; margin-bottom:4mm}
.druck-kopf h1{font-size:14pt; margin:0}
.druck-meta{font-size:8pt; text-align:right; line-height:1.5}
.druck-tabelle{width:100%; border-collapse:collapse; font-size:8pt}
.druck-tabelle th,.druck-tabelle td{border:1px solid #666; padding:1.2mm 1.5mm; text-align:left;
  vertical-align:top}
.druck-tabelle th{background:#e8e8e8; font-size:7.5pt; text-transform:uppercase}
.druck-fuss{margin-top:6mm; font-size:8pt; border-top:1px solid #000; padding-top:2mm}
.unterschriften{display:flex; gap:14mm; margin-top:14mm; font-size:8pt}
.unterschrift{flex:1; border-top:1px solid #000; padding-top:1.5mm}
.rechtsgrundlagen{font-size:7.5pt; line-height:1.5; margin-top:4mm}

/* ---------- Tarifleiste (nur Mietbetrieb) ---------- */
.tarif-leiste{
  border-radius:var(--radius); padding:.6rem .9rem; margin-bottom:1rem;
  font-size:.88rem; border:1px solid; line-height:1.5;
}
.tarif-leiste.info{background:#f2f7fc; border-color:#bcd6ec; color:#12508c}
.tarif-leiste.warnung{background:var(--gelb-hell); border-color:#e8cb96; color:var(--gelb)}
.tarif-leiste.sperre{background:var(--rot-hell); border-color:#eeb4af; color:var(--rot)}
.tarif-leiste b{font-weight:700}

/* ---------- Hilfsklassen ----------
   Ersetzen die früheren style-Attribute: die Inhaltssicherheitsrichtlinie
   des Servers lässt keine eingebetteten Formatierungen zu. */
.m0{margin:0}
.mt-2{margin:.2rem 0 0}
.mt-3{margin:.3rem 0 0}
.mt-35{margin-top:.35rem}
.mt-8{margin-top:.8rem}
.mt-8-klein{margin-top:.8rem; font-size:.9rem}
.voll{grid-column:1/-1}
.fs-78{font-size:.78rem}
.fs-95{font-size:.95rem}
.txt-rot{color:var(--rot)}
.nr-titel{font-size:1.5rem; color:var(--primaer)}
.rechts-block{margin-left:auto; text-align:right}
.zeile-flex{display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap}
.erfasst-zeile{margin:.15rem 0 0; font-size:.75rem}
.scroll-auto{overflow:auto}
.h24{max-height:24vh}
.et-rechts{text-align:center; border-left:1px solid #000; padding-left:2mm; min-width:22mm}

/* Druckhilfsklassen */
.storniert-zeile{text-decoration:line-through; color:#777}
.dp-7{font-size:7pt} .dp-8{font-size:8pt} .dp-85{font-size:8.5pt}
.dp-9{font-size:9pt} .dp-10{font-size:10pt}
.dp-h3{font-size:10pt; margin:4mm 0 1mm}
.dp-h3b{font-size:10pt; margin-top:4mm}
.dp-mb4{margin-bottom:4mm} .dp-mb5{margin-bottom:5mm}
.w18{width:18%} .w28{width:28%} .w38{width:38%}

@media print{
  @page{size:A4; margin:12mm}
  body{background:#fff}
  .kopf,.nicht-drucken,.ansicht,#toast-bereich,.modal-huelle{display:none !important}
  main{padding:0; max-width:none}
  #druckbereich{display:block !important}
  .etikett{break-inside:avoid}
  .druck-tabelle tr{break-inside:avoid}
  .druck-abschnitt{break-after:page}
  .druck-abschnitt:last-child{break-after:auto}
}

/* ---------- Übernahme vorhandener Listen ---------- */
.schritt{border-top:1px solid var(--rand); padding-top:.9rem; margin-top:1rem}
.schritt:first-of-type{border-top:0; margin-top:.5rem}
.schritt-kopf{font-weight:700; font-size:.95rem; margin-bottom:.6rem;
  display:flex; align-items:center; gap:.5rem}
.schritt-nr{display:inline-grid; place-items:center; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--primaer); color:#fff; font-size:.8rem}
.bilanz{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:.6rem; margin-bottom:.9rem}
.bilanz-kachel{border:1px solid var(--rand); border-left:4px solid var(--grau);
  border-radius:6px; padding:.6rem .8rem; background:#fff}
.bilanz-kachel b{display:block; font-size:1.6rem; line-height:1.15}
.bilanz-kachel span{font-size:.78rem; color:var(--grau)}
.bilanz-kachel.gut{border-left-color:var(--gruen)} .bilanz-kachel.gut b{color:var(--gruen)}
.bilanz-kachel.warn{border-left-color:var(--gelb)} .bilanz-kachel.warn b{color:var(--gelb)}
.bilanz-kachel.schlecht{border-left-color:var(--rot)} .bilanz-kachel.schlecht b{color:var(--rot)}
tr.zeile-fehler{background:var(--rot-hell)}
#u-vorschau-tab select{min-width:170px; font-size:.82rem; padding:.25rem}
#u-datei{max-width:420px}
label.klein.m0{display:flex; align-items:center; gap:.4rem; font-weight:400}
label.klein.m0 input{width:auto}

/* ---------- Tarifauswahl ---------- */
.tarif-gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.6rem; margin:1rem 0}
.tarif-wahl{display:block; border:1px solid var(--rand); border-radius:8px;
  padding:.8rem .9rem; cursor:pointer; background:#fff; font-weight:400}
.tarif-wahl:hover{border-color:var(--primaer)}
.tarif-wahl.empfohlen{border-color:var(--primaer); border-width:2px; background:#f5f9fd}
.tarif-wahl input{width:auto; margin:0 0 .4rem}
.tw-name{display:block; font-weight:700; font-size:.98rem}
.tw-preis{display:block; font-size:1.15rem; font-weight:700; color:var(--primaer);
  margin:.2rem 0}
.tw-grenze{display:block; font-size:.8rem; color:var(--grau)}
.tarif-leiste{display:flex; align-items:center; gap:.8rem; flex-wrap:wrap}
.tarif-leiste span{flex:1; min-width:16rem}