/* ===========================================================================
   Kalibrat – Oberfläche
   Gestaltung: Präzisionsinstrument.
   Zurückhaltung wie bei einem gut gemachten Messgerät: viel Luft, feine
   Linien statt Kästen, exakte Ausrichtung, Ziffern in gleicher Breite. Farbe
   trägt Bedeutung – grün, gelb und rot sind die Farben der Prüfplakette und
   werden für nichts anderes verwendet.
   Was gedruckt wird, bleibt nüchtern: es landet in einer Auditakte.
   =========================================================================== */

:root{
  /* Grundflächen – kühl gebrochenes Weiß */
  --grund:#f7f9fa;
  --flaeche:#ffffff;
  --flaeche-2:#f0f4f6;

  /* Schrift */
  --tinte:#0f1519;
  --tinte-2:#55636d;
  --tinte-3:#8797a1;

  /* Haarlinien statt Rahmen */
  --linie:#e2e8ec;
  --linie-stark:#c8d3d9;

  /* Akzent: eloxiertes Instrumentengehäuse */
  --akzent:#0e5a6e;
  --akzent-tief:#0a4353;
  --akzent-hell:#e6f0f3;
  --akzent-rand:#b9d3db;

  /* Prüfplakette – ausschließlich für Prüfzustände */
  --gruen:#1f7a4c;  --gruen-hell:#e8f4ed;  --gruen-rand:#bcdfcb;
  --gelb:#a8741a;   --gelb-hell:#fbf2e2;   --gelb-rand:#ecd6a6;
  --rot:#b23b32;    --rot-hell:#fbecea;    --rot-rand:#eebfba;
  --neutral-hell:#eef2f4; --neutral-rand:#d7dfe3;

  /* Altnamen, damit vorhandene Regeln weiter greifen */
  --bg:#f7f9fa; --karte:#ffffff; --rand:#e2e8ec; --text:#0f1519; --grau:#8797a1;
  --primaer:#0e5a6e; --primaer-dunkel:#0a4353; --grau-hell:#eef2f4;

  --radius:12px;
  --radius-klein:8px;
  --schatten:0 1px 2px rgba(15,25,35,.05), 0 4px 14px rgba(15,25,35,.05);
  --schatten-hoch:0 8px 32px rgba(15,25,35,.14);

  --schrift: ui-sans-serif, "Segoe UI Variable Text", "Segoe UI",
             -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --schrift-eng: ui-sans-serif, "Segoe UI Variable Display", "Segoe UI",
             -apple-system, BlinkMacSystemFont, sans-serif;
  --schrift-daten: ui-monospace, "Cascadia Mono", "SF Mono", "Segoe UI Mono",
             Consolas, "Liberation Mono", monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--schrift); font-size:15px; line-height:1.55;
  background:var(--grund); color:var(--tinte);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3{margin:0 0 .45rem; line-height:1.2; letter-spacing:-.012em; text-wrap:balance}
h1{font-family:var(--schrift-eng); font-weight:600}
h2{font-family:var(--schrift-eng); font-size:1.06rem; font-weight:600}
h3{font-size:.98rem; font-weight:600}

.unter{color:var(--tinte-2); font-size:.87rem; margin:.15rem 0 .7rem; max-width:74ch}
.opt{color:var(--tinte-3); font-weight:400; font-size:.76rem}
kbd{
  font:500 10.5px/1 var(--schrift-daten); background:var(--flaeche-2);
  border:1px solid var(--linie); border-bottom-width:2px; border-radius:5px;
  padding:2px 5px; color:var(--tinte-2);
}
.versteckt{display:none !important}
.wachsen{flex:1}
.fehler{color:var(--rot); font-weight:500; min-height:1.2em; margin:.45rem 0 0; font-size:.88rem}
.hinweis{
  background:var(--gelb-hell); border:1px solid var(--gelb-rand);
  border-radius:var(--radius-klein); padding:.6rem .85rem; font-size:.87rem; color:#6f4c10;
}
.hinweis-klein{font-size:.8rem; color:var(--tinte-3); text-align:center; margin-top:1rem}
.hinweis-klein a{color:var(--akzent)}

/* ---------- Anmeldung ---------- */
.anmelde-schirm{
  position:fixed; inset:0; display:grid; place-items:center; z-index:60; padding:1.5rem;
  background:radial-gradient(120% 80% at 50% -10%, #12697f 0%, #0b3f4e 55%, #072b36 100%);
}
/* Feine Skalenteilung im Hintergrund – die einzige Zier im ganzen Programm */
.anmelde-schirm::before{
  content:""; position:absolute; inset:0; opacity:.13; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,
    rgba(255,255,255,.9) 0 1px, transparent 1px 14px);
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 47%, transparent 54%);
  mask-image:linear-gradient(180deg, transparent 0, #000 42%, #000 47%, transparent 54%);
}
.anmelde-box{
  position:relative; background:var(--flaeche); padding:2.1rem 2.2rem 1.8rem;
  border-radius:18px; width:372px; max-width:100%;
  box-shadow:0 24px 70px rgba(4,25,32,.42);
}
.anmelde-box h1{font-size:1.32rem; text-align:center; margin-bottom:.2rem}
.anmelde-box .unter{text-align:center; margin:0 auto 1.4rem}
.anmelde-box label{display:block; margin:0 0 .9rem}
.anmelde-box input{width:100%}
.anmelde-box .btn{width:100%; justify-content:center}

/* ---------- Kopf ---------- */
.kopf{
  display:flex; align-items:center; gap:1.1rem; height:58px; padding:0 1.4rem;
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:saturate(180%) blur(16px);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--linie); position:sticky; top:0; z-index:30;
}
.kopf-links{display:flex; align-items:center; gap:.65rem}
.logo{
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:linear-gradient(160deg,#14748c,var(--akzent-tief)); color:#fff;
  font-size:15px; box-shadow:0 1px 3px rgba(10,60,75,.35);
}
.kopf-titel{font-family:var(--schrift-eng); font-weight:600; font-size:.98rem;
  letter-spacing:-.01em; color:var(--tinte)}
.kopf-firma{font-size:.75rem; color:var(--tinte-3)}
.haupt-nav{display:flex; gap:.15rem; margin-left:auto}
.nav-btn{
  background:transparent; border:0; color:var(--tinte-2); font:inherit; font-size:.885rem;
  padding:.45rem .8rem; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; gap:.4rem;
  transition:background .13s ease, color .13s ease;
}
.nav-btn:hover{background:var(--flaeche-2); color:var(--tinte)}
.nav-btn.aktiv{background:var(--akzent-hell); color:var(--akzent-tief); font-weight:600}
.nav-btn.aktiv kbd{background:#fff; border-color:var(--akzent-rand); color:var(--akzent)}
.kopf-rechts{display:flex; align-items:center; gap:.55rem; margin-left:.9rem}
.benutzer-chip{font-size:.78rem; color:var(--tinte-2); background:var(--flaeche-2);
  padding:.3rem .7rem; border-radius:20px; white-space:nowrap}

main{max-width:1480px; margin:0 auto; padding:1.5rem 1.4rem 6.5rem}
.ansicht{display:none}
.ansicht.aktiv{display:block; animation:auftritt .22s ease-out}
@keyframes auftritt{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}

/* ---------- Flächen ---------- */
.karte{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.25rem 1.35rem; margin-bottom:1.1rem; box-shadow:var(--schatten);
}
.spalten-2{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media(max-width:920px){.spalten-2{grid-template-columns:1fr}}

/* ---------- Eingaben ---------- */
input,select,textarea{
  font:inherit; font-size:.92rem; width:100%; padding:.55rem .7rem; color:var(--tinte);
  background:var(--flaeche); border:1px solid var(--linie-stark); border-radius:9px;
  transition:border-color .13s ease, box-shadow .13s ease;
}
input::placeholder,textarea::placeholder{color:var(--tinte-3)}
input:hover,select:hover,textarea:hover{border-color:#adbdc6}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--akzent); box-shadow:0 0 0 3.5px rgba(14,90,110,.14);
}
label{display:block; font-size:.735rem; font-weight:600; color:var(--tinte-2);
  letter-spacing:.055em; text-transform:uppercase}
label input,label select,label textarea{margin-top:.32rem; font-weight:400;
  text-transform:none; letter-spacing:0; color:var(--tinte); font-size:.92rem}
label.pflicht::after{content:" ·"; color:var(--rot); font-weight:700}
label.pflicht>span.opt{display:none}
.raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:.95rem}
.raster .breit{grid-column:1/-1}
.knopf-zeile{display:flex; gap:.55rem; flex-wrap:wrap; margin-top:1.05rem; align-items:center}

/* ---------- Knöpfe ---------- */
.btn{
  font:inherit; font-size:.88rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.5rem .95rem; border-radius:9px; cursor:pointer;
  background:var(--flaeche); color:var(--tinte); border:1px solid var(--linie-stark);
  transition:background .13s ease, border-color .13s ease, transform .08s ease;
}
.btn:hover{background:var(--flaeche-2)}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none}
.btn-primaer{background:var(--akzent); border-color:var(--akzent); color:#fff;
  font-weight:600; box-shadow:0 1px 2px rgba(10,67,83,.28)}
.btn-primaer:hover{background:var(--akzent-tief); border-color:var(--akzent-tief)}
.btn-gross{padding:.7rem 1.35rem; font-size:.96rem; border-radius:10px}
.btn-klein{padding:.3rem .62rem; font-size:.79rem; border-radius:7px}
.btn-gruen{background:var(--gruen); border-color:var(--gruen); color:#fff; font-weight:600}
.btn-gruen:hover{filter:brightness(1.07)}
.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}

/* ---------- Schwebender Hauptknopf ----------
   Auf der Fertigungsebene wird mit Handschuhen und oft am Tablet bedient.
   Die wichtigste Handlung der Ansicht ist deshalb immer sichtbar, gross und
   an derselben Stelle. */
.schwebe{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:25;
  display:flex; flex-direction:column-reverse; align-items:flex-end; gap:.55rem;
}
.schwebe-knopf{
  font:inherit; font-size:.95rem; font-weight:600;
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.35rem; border:0; border-radius:999px; cursor:pointer;
  background:var(--akzent); color:#fff;
  box-shadow:0 6px 20px rgba(10,67,83,.34), 0 1px 2px rgba(10,67,83,.24);
  transition:transform .13s cubic-bezier(.2,.8,.3,1), box-shadow .13s ease, background .13s ease;
}
.schwebe-knopf:hover{background:var(--akzent-tief); transform:translateY(-1.5px);
  box-shadow:0 10px 26px rgba(10,67,83,.4)}
.schwebe-knopf:active{transform:translateY(0) scale(.97)}
.schwebe-knopf .sk-symbol{font-size:1.1rem; line-height:1}
.schwebe-knopf.neben{
  background:var(--flaeche); color:var(--tinte); font-weight:500;
  padding:.62rem 1.05rem; font-size:.87rem;
  border:1px solid var(--linie-stark); box-shadow:var(--schatten);
}
.schwebe-knopf.neben:hover{background:var(--flaeche-2)}
@media(max-width:640px){
  .schwebe{right:1rem; bottom:1rem}
  .schwebe-knopf .sk-text{display:none}
  .schwebe-knopf{padding:.95rem; border-radius:50%}
  .schwebe-knopf.neben{padding:.75rem}
}
@media(prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important}}

/* ---------- Kennzahlen ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:.8rem; margin-bottom:1.1rem}
.kachel{
  background:var(--flaeche); border:1px solid var(--linie); border-radius:var(--radius);
  padding:.95rem 1.05rem; cursor:pointer; position:relative; overflow:hidden;
  box-shadow:var(--schatten); transition:transform .13s ease, box-shadow .13s ease;
}
.kachel:hover{transform:translateY(-1.5px); box-shadow:0 6px 20px rgba(15,25,35,.09)}
.kachel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--tinte-3)}
.kachel .zahl{font-family:var(--schrift-eng); font-size:2rem; font-weight:650;
  line-height:1.05; letter-spacing:-.03em}
.kachel .bez{font-size:.755rem; color:var(--tinte-3); text-transform:uppercase;
  letter-spacing:.06em; margin-top:.15rem}
.kachel.rot::before{background:var(--rot)}     .kachel.rot .zahl{color:var(--rot)}
.kachel.gelb::before{background:var(--gelb)}   .kachel.gelb .zahl{color:var(--gelb)}
.kachel.gruen::before{background:var(--gruen)} .kachel.gruen .zahl{color:var(--gruen)}
.kachel.blau::before{background:var(--akzent)} .kachel.blau .zahl{color:var(--akzent)}

/* ---------- Tabellen ---------- */
.tabelle-huelle{overflow:auto; border:1px solid var(--linie); border-radius:var(--radius);
  max-height:66vh; background:var(--flaeche)}
.tabelle-huelle.hoch{max-height:40vh}
.tabelle{width:100%; border-collapse:collapse; font-size:.875rem}
.tabelle th{
  position:sticky; top:0; z-index:2; text-align:left; white-space:nowrap;
  background:rgba(247,249,250,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:.6rem .75rem; border-bottom:1px solid var(--linie);
  font-size:.7rem; font-weight:600; letter-spacing:.075em; text-transform:uppercase;
  color:var(--tinte-3);
}
.tabelle td{padding:.55rem .75rem; border-bottom:1px solid var(--linie); vertical-align:middle}
.tabelle tbody tr:last-child td{border-bottom:0}
.tabelle tbody tr{cursor:pointer; transition:background .1s ease}
.tabelle tbody tr:hover{background:var(--flaeche-2)}
.tabelle tr.gewaehlt{background:var(--akzent-hell)}
.sp-check{width:34px}
.nowrap{white-space:nowrap}
.mono,.num{font-family:var(--schrift-daten); font-size:.845rem; font-variant-numeric:tabular-nums}
.mono{font-weight:500; letter-spacing:-.01em}

/* ---------- Prüfzustand ---------- */
.marke{
  display:inline-flex; align-items:center; gap:.3rem; padding:.17rem .55rem;
  border-radius:6px; white-space:nowrap; font-size:.735rem; font-weight:600;
  border:1px solid transparent;
}
.marke::before{content:""; width:5px; height:5px; border-radius:50%; background:currentColor}
.m-gruen{background:var(--gruen-hell); color:var(--gruen); border-color:var(--gruen-rand)}
.m-gelb {background:var(--gelb-hell);  color:var(--gelb);  border-color:var(--gelb-rand)}
.m-rot  {background:var(--rot-hell);   color:var(--rot);   border-color:var(--rot-rand)}
.m-grau {background:var(--neutral-hell); color:var(--tinte-3); border-color:var(--neutral-rand)}

.mini-liste{display:flex; flex-direction:column; gap:.3rem; max-height:34vh; overflow:auto}
.mini-zeile{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .75rem;
  border:1px solid var(--linie); border-radius:var(--radius-klein);
  background:var(--flaeche); cursor:pointer; text-decoration:none; color:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.mini-zeile:hover{background:var(--flaeche-2); border-color:var(--linie-stark)}
.mini-zeile .nr{font-family:var(--schrift-daten); font-weight:500; font-size:.83rem; min-width:84px}
.mini-zeile .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.9rem}
.leer{color:var(--tinte-3); padding:1.1rem .3rem; font-size:.88rem; text-align:center}

/* ---------- Schnellprüfung ---------- */
.pruef-karte{max-width:none}
.scan-feld{
  font-family:var(--schrift-daten); font-size:1.45rem; font-weight:500; letter-spacing:.06em;
  padding:.95rem 1.1rem; border-radius:11px; border:1.5px solid var(--linie-stark);
}
.scan-feld:focus{border-color:var(--akzent); box-shadow:0 0 0 4px rgba(14,90,110,.13)}
.vorschlaege{display:flex; flex-direction:column; gap:.3rem; margin-top:.65rem}
.pruef-ziel{margin-top:1.15rem; border:1px solid var(--akzent-rand);
  border-radius:var(--radius); overflow:hidden; box-shadow:0 4px 20px rgba(14,90,110,.09)}
.pruef-kopf{
  background:linear-gradient(180deg,var(--akzent-hell),#f2f8fa);
  padding:1rem 1.2rem; display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap;
  border-bottom:1px solid var(--akzent-rand);
}
.pruef-kopf .gross{font-family:var(--schrift-eng); font-size:1.28rem; font-weight:600;
  letter-spacing:-.015em}
.pruef-kopf .nr-gross{font-family:var(--schrift-daten); font-size:1.28rem; font-weight:500;
  color:var(--akzent); letter-spacing:.02em}
.pruef-daten{display:grid; grid-template-columns:repeat(auto-fill,minmax(192px,1fr));
  gap:.85rem 1.3rem; padding:1.05rem 1.2rem; font-size:.89rem}
.pruef-daten div span{display:block; color:var(--tinte-3); font-size:.685rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.075em; margin-bottom:.1rem}
.pruef-aktionen{display:flex; gap:.6rem; padding:1rem 1.2rem; background:var(--flaeche-2);
  border-top:1px solid var(--linie); flex-wrap:wrap; align-items:center}
.check-liste{padding:.15rem 1.2rem 1rem}
.check-liste label{display:flex; gap:.6rem; align-items:flex-start; padding:.3rem 0;
  font-weight:400; font-size:.885rem; text-transform:none; letter-spacing:0; color:var(--tinte)}
.check-liste input{width:auto; margin-top:.2rem; accent-color:var(--gruen)}

/* ---------- Typenauswahl ---------- */
.typ-tabs{display:inline-flex; gap:.2rem; margin-bottom:.9rem; padding:.22rem;
  background:var(--flaeche-2); border-radius:10px}
.tab{font:inherit; font-size:.875rem; font-weight:500; padding:.44rem 1rem; border:0;
  background:transparent; color:var(--tinte-2); border-radius:8px; cursor:pointer;
  transition:background .13s ease, color .13s ease}
.tab.aktiv{background:var(--flaeche); color:var(--tinte); font-weight:600; box-shadow:var(--schatten)}
.typ-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:.5rem}
.typ-knopf{
  text-align:left; font:inherit; padding:.7rem .8rem; cursor:pointer; line-height:1.3;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:10px;
  display:flex; align-items:center; gap:.65rem;
  transition:border-color .12s ease, background .12s ease;
}
.typ-knopf:hover{border-color:var(--akzent-rand); background:var(--akzent-hell)}
.typ-knopf.aktiv{border-color:var(--akzent); background:var(--akzent-hell);
  box-shadow:0 0 0 1px var(--akzent)}
.typ-knopf b{display:block; font-size:.855rem; font-weight:600}
.typ-knopf small{font-size:.72rem; color:var(--tinte-3)}
.typ-knopf.aktiv small{color:var(--akzent)}
.typ-bild{width:34px; height:34px; flex:none; opacity:.8}
.typ-knopf.aktiv .typ-bild{opacity:1}
.norm-hinweis{background:var(--akzent-hell); border:1px solid var(--akzent-rand);
  border-radius:var(--radius-klein); padding:.7rem .95rem; font-size:.845rem;
  margin-bottom:1rem; color:var(--akzent-tief)}

/* ---------- Detail ---------- */
.detail-kopf{display:flex; gap:1.1rem; align-items:flex-start; flex-wrap:wrap}
.detail-kopf .titel{font-family:var(--schrift-eng); font-size:1.35rem; font-weight:600;
  letter-spacing:-.018em}
.stamm-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:.9rem 1.5rem; font-size:.9rem; margin-top:1rem}
.stamm-raster div span{display:block; color:var(--tinte-3); font-size:.685rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.075em; margin-bottom:.08rem}
.zeitstrahl{border-left:1.5px solid var(--linie); margin-left:.45rem; padding-left:1.15rem}
.zeit-eintrag{position:relative; padding:.75rem 0; border-bottom:1px solid var(--linie)}
.zeit-eintrag:last-child{border-bottom:0}
.zeit-eintrag::before{content:""; position:absolute; left:-1.53rem; top:1.05rem;
  width:9px; height:9px; border-radius:50%; background:var(--tinte-3);
  box-shadow:0 0 0 3px var(--grund)}
.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:.45; text-decoration:line-through}

/* ---------- Filter ---------- */
.filter-zeile{display:flex; gap:.55rem; flex-wrap:wrap; align-items:flex-end; margin-bottom:.85rem}
.filter-zeile select,.filter-zeile input{width:auto; min-width:146px; font-size:.87rem}
.filter-zeile .feld-suche{min-width:290px; flex:1}
.filter-zeile label.klein{font-size:.7rem}
.aktions-zeile{display:flex; gap:.5rem; align-items:center; margin-bottom:.75rem; flex-wrap:wrap}

/* ---------- Berichte ---------- */
.bericht-gitter{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:.6rem; margin-bottom:1.1rem}
.bericht-kachel{text-align:left; font:inherit; padding:.85rem 1rem; cursor:pointer;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:10px;
  transition:border-color .12s ease, background .12s ease, transform .1s ease}
.bericht-kachel:hover{border-color:var(--akzent-rand); background:var(--akzent-hell);
  transform:translateY(-1px)}
.bericht-kachel b{display:block; font-size:.9rem; font-weight:600; margin-bottom:.12rem}
.bericht-kachel span{font-size:.775rem; color:var(--tinte-3); line-height:1.35}

/* ---------- Modal ---------- */
.modal-huelle{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  padding:1.5rem; overflow:auto; background:rgba(10,25,32,.42);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  animation:einblenden .16s ease-out;
}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
.modal{background:var(--flaeche); border-radius:16px; padding:1.4rem 1.55rem;
  width:min(760px,100%); max-height:92vh; overflow:auto; box-shadow:var(--schatten-hoch);
  animation:aufsteigen .19s cubic-bezier(.2,.8,.3,1)}
@keyframes aufsteigen{from{opacity:0; transform:translateY(10px) scale(.99)}to{opacity:1; transform:none}}
.modal h2{margin-bottom:.15rem}

/* ---------- Meldung ---------- */
#toast-bereich{position:fixed; right:1.5rem; bottom:1.5rem; z-index:70;
  display:flex; flex-direction:column; gap:.5rem; pointer-events:none}
.toast{background:rgba(15,25,35,.94); -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px); color:#fff; padding:.75rem 1.1rem; border-radius:11px;
  font-size:.885rem; font-weight:500; box-shadow:0 8px 28px rgba(10,20,28,.34);
  animation:auftauchen .2s cubic-bezier(.2,.8,.3,1)}
.toast.gut{background:rgba(31,122,76,.96)}
.toast.schlecht{background:rgba(178,59,50,.96)}
@keyframes auftauchen{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}

/* ---------- Tarif ---------- */
.tarif-leiste{display:flex; align-items:center; gap:.85rem; flex-wrap:wrap;
  border-radius:var(--radius); padding:.7rem 1rem; margin-bottom:1.1rem;
  font-size:.875rem; border:1px solid; line-height:1.5}
.tarif-leiste span{flex:1; min-width:16rem}
.tarif-leiste.info{background:var(--akzent-hell); border-color:var(--akzent-rand);
  color:var(--akzent-tief)}
.tarif-leiste.warnung{background:var(--gelb-hell); border-color:var(--gelb-rand); color:#6f4c10}
.tarif-leiste.sperre{background:var(--rot-hell); border-color:var(--rot-rand); color:#7d281f}
.tarif-gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:.6rem; margin:1rem 0}
.tarif-wahl{display:block; padding:.85rem .95rem; cursor:pointer; font-weight:400;
  text-transform:none; letter-spacing:0; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:11px;
  transition:border-color .12s ease, background .12s ease}
.tarif-wahl:hover{border-color:var(--akzent-rand)}
.tarif-wahl.empfohlen{border-color:var(--akzent); background:var(--akzent-hell);
  box-shadow:0 0 0 1px var(--akzent)}
.tarif-wahl input{width:auto; margin:0 0 .45rem; accent-color:var(--akzent)}
.tw-name{display:block; font-weight:600; font-size:.94rem}
.tw-preis{display:block; font-family:var(--schrift-eng); font-size:1.18rem; font-weight:650;
  color:var(--akzent); margin:.2rem 0; letter-spacing:-.02em}
.tw-grenze{display:block; font-size:.775rem; color:var(--tinte-3)}

/* ---------- Übernahme ---------- */
.schritt{border-top:1px solid var(--linie); padding-top:1.05rem; margin-top:1.2rem}
.schritt:first-of-type{border-top:0; margin-top:.6rem}
.schritt-kopf{display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem;
  font-weight:600; font-size:.95rem}
.schritt-nr{display:inline-grid; place-items:center; width:1.5rem; height:1.5rem;
  border-radius:50%; background:var(--akzent); color:#fff; font-size:.76rem;
  font-weight:600; flex:none}
.bilanz{display:grid; grid-template-columns:repeat(auto-fit,minmax(138px,1fr));
  gap:.6rem; margin-bottom:1rem}
.bilanz-kachel{border:1px solid var(--linie); border-radius:10px; padding:.7rem .85rem;
  background:var(--flaeche); position:relative; overflow:hidden}
.bilanz-kachel::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--tinte-3)}
.bilanz-kachel b{display:block; font-family:var(--schrift-eng); font-size:1.5rem;
  font-weight:650; line-height:1.1; letter-spacing:-.025em}
.bilanz-kachel span{font-size:.745rem; color:var(--tinte-3); text-transform:uppercase;
  letter-spacing:.055em}
.bilanz-kachel.gut::before{background:var(--gruen)}     .bilanz-kachel.gut b{color:var(--gruen)}
.bilanz-kachel.warn::before{background:var(--gelb)}     .bilanz-kachel.warn b{color:var(--gelb)}
.bilanz-kachel.schlecht::before{background:var(--rot)}  .bilanz-kachel.schlecht b{color:var(--rot)}
tr.zeile-fehler{background:var(--rot-hell)}
tr.zeile-fehler:hover{background:#f7e2df}
#u-vorschau-tab select{min-width:168px; font-size:.82rem; padding:.28rem .45rem}
#u-datei{max-width:430px}
label.klein.m0{display:flex; align-items:center; gap:.45rem; font-weight:400;
  text-transform:none; letter-spacing:0; font-size:.85rem}
label.klein.m0 input{width:auto; margin:0; accent-color:var(--akzent)}

/* ---------- Hilfsklassen ----------
   Ersetzen die frueheren style-Attribute: die Inhaltssicherheitsrichtlinie
   des Servers laesst 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-family:var(--schrift-daten); font-size:1.3rem; font-weight:500;
  color:var(--akzent); letter-spacing:.01em}
.rechts-block{margin-left:auto; text-align:right}
.zeile-flex{display:flex; gap:.7rem; align-items:baseline; flex-wrap:wrap}
.erfasst-zeile{margin:.2rem 0 0; font-size:.735rem; color:var(--tinte-3)}
.scroll-auto{overflow:auto}
.h24{max-height:24vh}
.et-rechts{text-align:center; border-left:1px solid #000; padding-left:2mm; min-width:22mm}

/* ---------- Etiketten und Druck ----------
   Bleibt bewusst nüchtern: was gedruckt wird, landet in einer Auditakte. */
#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;
  font-family:Arial,Helvetica,sans-serif; color:#000; background:#fff}
.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; font-family:Arial,Helvetica,sans-serif}
.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}
.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; color:#000; font-family:Arial,Helvetica,sans-serif}
  .kopf,.nicht-drucken,.ansicht,#toast-bereich,.modal-huelle,.schwebe{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}
}

/* ---------- Geräteerkennung aus einem Foto ---------- */
.foto-leiste{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  background:var(--akzent-hell); border:1px solid var(--akzent-rand);
  border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1rem;
}
.foto-text{flex:1; min-width:15rem; line-height:1.4}
.foto-text b{display:block; font-size:.94rem; color:var(--akzent-tief)}
.foto-text span{font-size:.83rem; color:var(--tinte-2)}
.foto-rest{font-size:.78rem; color:var(--tinte-3); white-space:nowrap}
.foto-ergebnis{
  border-radius:var(--radius); padding:.85rem 1.1rem; margin-bottom:1rem;
  border:1px solid; display:flex; flex-direction:column; gap:.3rem; font-size:.87rem;
}
.foto-ergebnis b{font-size:.94rem; display:flex; align-items:center; gap:.5rem;
  flex-wrap:wrap}
.foto-ergebnis.sicher{background:var(--gruen-hell); border-color:var(--gruen-rand)}
.foto-ergebnis.sicher b{color:var(--gruen)}
.foto-ergebnis.unsicher{background:var(--gelb-hell); border-color:var(--gelb-rand)}
.foto-ergebnis.unsicher b{color:var(--gelb)}
.foto-ergebnis.fehlgeschlagen{background:var(--rot-hell); border-color:var(--rot-rand)}
.foto-ergebnis.fehlgeschlagen b{color:var(--rot)}
.foto-hinweis{font-size:.8rem; color:var(--tinte-2)}

/* ---------- Prüfplakette ---------- */
.plakette{flex:none; display:block; filter:drop-shadow(0 1px 2px rgba(15,25,35,.18))}
.mit-plakette{display:flex; align-items:center; gap:.5rem}
.rechts-plakette{justify-content:flex-end; text-align:left}
.farbwahl{display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 .9rem}
.farbknopf{
  display:inline-flex; align-items:center; gap:.45rem; position:relative;
  font:inherit; font-size:.85rem; padding:.42rem .8rem .42rem .55rem; cursor:pointer;
  background:var(--flaeche); border:1px solid var(--linie); border-radius:999px;
  transition:border-color .12s ease, background .12s ease;
}
.farbknopf:hover{border-color:var(--linie-stark)}
.farbknopf.gewaehlt{border-color:var(--akzent); background:var(--akzent-hell); font-weight:600}
.fk-punkt{width:16px; height:16px; border-radius:50%; background:var(--fk);
  border:1.5px solid var(--fkr); flex:none}
.fk-platz{
  display:inline-grid; place-items:center; width:17px; height:17px; border-radius:50%;
  background:var(--akzent); color:#fff; font-size:.66rem; font-weight:700;
}
.plaketten-vorschau{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap}
.vorschau-jahr{display:flex; flex-direction:column; align-items:center; gap:.2rem}
.vorschau-jahr span{font-size:.72rem; color:var(--tinte-3); font-family:var(--schrift-daten)}
.vorschau-hinweis{max-width:24rem; margin-left:.4rem !important}

/* ---------- Einführung ---------- */
.fuehrung{
  position:fixed; right:1.5rem; bottom:1.5rem; z-index:45; width:min(370px, calc(100vw - 3rem));
  background:var(--flaeche); border:1px solid var(--linie); border-radius:16px;
  padding:1.1rem 1.25rem 1rem; box-shadow:var(--schatten-hoch);
  animation:aufsteigen .22s cubic-bezier(.2,.8,.3,1);
}
.fuehrung-kopf{display:flex; align-items:center; margin-bottom:.5rem}
.fuehrung-zaehler{font-size:.7rem; font-weight:600; letter-spacing:.075em;
  text-transform:uppercase; color:var(--akzent)}
.fuehrung-schliessen{
  margin-left:auto; background:transparent; border:0; cursor:pointer; line-height:1;
  font-size:1.3rem; color:var(--tinte-3); padding:0 .2rem; border-radius:6px;
}
.fuehrung-schliessen:hover{color:var(--tinte); background:var(--flaeche-2)}
.fuehrung b{display:block; font-family:var(--schrift-eng); font-size:1.05rem;
  font-weight:600; margin-bottom:.25rem}
.fuehrung p{margin:0 0 .85rem; font-size:.885rem; color:var(--tinte-2); line-height:1.5}
.fuehrung-punkte{display:flex; gap:.3rem; margin-bottom:.75rem}
.fuehrung-punkte span{width:6px; height:6px; border-radius:50%; background:var(--linie-stark)}
.fuehrung-punkte span.aktiv{background:var(--akzent); width:18px; border-radius:3px}
.fuehrung-knoepfe{display:flex; align-items:center; gap:.5rem}
.fuehrung-ziel{
  position:relative; z-index:26; border-radius:var(--radius);
  box-shadow:0 0 0 3px var(--akzent), 0 0 0 9px rgba(14,90,110,.16);
  animation:puls 2.1s ease-in-out infinite;
}
@keyframes puls{
  0%,100%{box-shadow:0 0 0 3px var(--akzent), 0 0 0 9px rgba(14,90,110,.16)}
  50%    {box-shadow:0 0 0 3px var(--akzent), 0 0 0 14px rgba(14,90,110,.05)}
}
@media(max-width:640px){.fuehrung{right:.75rem; left:.75rem; bottom:.75rem; width:auto}}
.tabelle-huelle.h38{max-height:38vh}
.tabelle-huelle.h45{max-height:45vh}

/* ---- Übernahme: Quellen und Bildhinweis ---- */
.quellen{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.quelle{display:flex;flex-direction:column;gap:1px;padding:6px 10px;
  border:1px solid var(--linie);border-radius:8px;background:var(--flaeche-2);
  font-size:12px;color:var(--tinte-2)}
.quelle b{font-size:12px;color:var(--tinte);letter-spacing:.02em}
.lade{display:flex;align-items:center;gap:8px;margin-top:10px;
  font-size:13px;color:var(--tinte-2)}
.lade::before{content:"";width:13px;height:13px;flex:0 0 13px;border-radius:50%;
  border:2px solid var(--linie);border-top-color:var(--akzent);
  animation:dreh .8s linear infinite}
@keyframes dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.lade::before{animation-duration:3s}}

.bild-warnung{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;
  padding:11px 13px;border-radius:9px;background:var(--gelb-hell);
  border:1px solid var(--gelb-rand);border-left-width:3px}
.bild-warnung b{font-size:13px;color:var(--tinte)}
.bild-warnung span{font-size:12.5px;line-height:1.5;color:var(--tinte-2)}
.warn-detail{font-family:var(--schrift-daten);font-size:11.5px}

/* ---- Neu-Formular: übernommene Angaben ---- */
.uebernommen{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  margin:12px 0 0;padding:9px 12px;border-radius:9px;
  background:var(--flaeche-2);border:1px solid var(--linie);
  font-size:12.5px;color:var(--tinte-2);line-height:1.5}
.uebernommen b{color:var(--tinte)}
.btn-klein{padding:3px 10px;font-size:12px;border-radius:6px}
.feld-fussnote:empty{display:none}
.feld-fussnote{display:block;margin-top:3px;font-size:11.5px;
  font-weight:400;color:var(--tinte-3);line-height:1.4}

/* Zurückhaltender Knopf: steht neben der eigentlichen Handlung, nicht auf
   gleicher Höhe mit ihr. */
.btn-still{color:var(--tinte-2);border-color:transparent;background:transparent}
.btn-still:hover{background:var(--flaeche-2);border-color:var(--linie);color:var(--tinte)}