:root{
  --accent:#1F4E79; --accent-light:#DCE6F1; --grey:#595959; --line:#C9C9C9;
  --red:#A4262C; --red-l:#F8E9E9; --amber:#8A5A00; --amber-l:#FBF1DE; --green:#375623; --green-l:#E2EFDA;
}
*{box-sizing:border-box}
html{background:#f2f4f7}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#1a1a1a;background:#f2f4f7}
.topbar{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;position:sticky;top:0;z-index:10;flex-wrap:wrap;gap:8px}
.brand{font-weight:bold;font-size:1.05rem}
.brand span{font-weight:normal;opacity:.8;font-size:.85rem}
.topbar nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.topbar nav a{color:#fff;text-decoration:none;padding:8px 14px;border-radius:8px;font-weight:bold;font-size:.95rem}
.topbar nav a.active,.topbar nav a:hover{background:rgba(255,255,255,.18)}
main{max-width:820px;margin:0 auto;padding:16px}
main.wide{max-width:1180px}
.flash{background:var(--accent-light);border-left:5px solid var(--accent);padding:12px 14px;border-radius:6px;margin-bottom:14px}
.flash a{color:var(--accent);font-weight:bold}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}

/* Capture */
.photo-btn{display:block;background:var(--accent);color:#fff;text-align:center;padding:26px 16px;border-radius:12px;
  font-size:1.25rem;font-weight:bold;cursor:pointer;margin-bottom:12px}
.photo-btn.small{padding:14px;font-size:1rem;background:#eef2f8;color:var(--accent);border:1px dashed var(--accent)}
.photo-btn input{display:none}
.preview{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.preview img{width:88px;height:88px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.fieldlabel{font-weight:bold;color:var(--accent);margin:16px 0 8px}
.fieldlabel .opt{color:var(--grey);font-weight:normal;font-size:.85rem}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{flex:1;min-width:110px}
.chip input{display:none}
.chip span{display:block;text-align:center;padding:14px 10px;border:2px solid var(--line);border-radius:10px;
  font-weight:bold;background:#fff;cursor:pointer;text-transform:capitalize}
.chip input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip.d-hoch input:checked+span{background:var(--red);border-color:var(--red)}
.chip.d-mittel input:checked+span{background:var(--amber);border-color:var(--amber)}
.chip.d-gering input:checked+span{background:#3d6b3d;border-color:#3d6b3d}
.input{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
textarea.input{resize:vertical}
.save{width:100%;margin-top:20px;background:var(--accent);color:#fff;border:none;padding:16px;border-radius:10px;
  font-size:1.1rem;font-weight:bold;cursor:pointer}
.save:hover{background:#173a5c}

/* Filter + list */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}
.filterbar select{padding:9px;border:1px solid var(--line);border-radius:8px;background:#fff;font-family:inherit}
.filterbar .exports{margin-left:auto;display:flex;gap:8px}
.bericht{background:var(--accent);color:#fff;text-decoration:none;padding:9px 14px;border-radius:8px;font-weight:bold}
.csv{background:#fff;border:1px solid var(--accent);color:var(--accent);
  text-decoration:none;padding:9px 14px;border-radius:8px;font-weight:bold}
.count{color:var(--grey);font-size:.9rem;margin-bottom:8px}
.cards{display:flex;flex-direction:column;gap:10px}
.mcard{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);border-left:6px solid var(--grey);
  border-radius:10px;overflow:hidden}
.mcard.s-offen{border-left-color:var(--red)}
.mcard.s-gemeldet,.mcard.s-inbearbeitung{border-left-color:var(--amber)}
.mcard.s-erledigt{border-left-color:#3d6b3d}
.msel{display:flex;align-items:center;padding:0 4px 0 10px}
.msel input{width:20px;height:20px}
.mlink{display:flex;gap:12px;flex:1;min-width:0;padding:10px;text-decoration:none;color:inherit}
.seltoolbar{display:flex;align-items:center;gap:14px;margin:6px 0 10px}
.seltoolbar .selall{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--grey)}
.seltoolbar .selall input{width:18px;height:18px}
.seltoolbar .count{margin:0}
.seltoolbar .selbtn{margin-left:auto;border:none;cursor:pointer;font-size:.9rem}
.thumb{width:76px;height:76px;flex:0 0 76px;border-radius:8px;overflow:hidden;background:#eef1f5;
  display:flex;align-items:center;justify-content:center;color:#9aa4b0;font-size:.72rem;text-align:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.mbody{flex:1;min-width:0}
.mtop{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.badge{font-size:.72rem;padding:2px 8px;border-radius:20px;font-weight:bold;text-transform:capitalize;background:#eef1f5;color:#333}
.badge.k{background:var(--accent-light);color:var(--accent)}
.badge.d-hoch{background:var(--red-l);color:var(--red)}
.badge.d-mittel{background:var(--amber-l);color:var(--amber)}
.badge.d-gering{background:var(--green-l);color:var(--green)}
.mdesc{font-weight:bold;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;line-clamp:2;line-height:1.35;
  /* zwei Zeilen statt einer: ein abgeschnittener Halbsatz sagt nichts */
  max-height:2.7em}
.mmeta{color:var(--grey);font-size:.82rem;margin-top:2px}
.empty{color:var(--grey);text-align:center;padding:30px}

/* Detail */
.dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.dhead h2{margin:0;color:var(--accent)}
.btn{background:var(--accent);color:#fff;text-decoration:none;padding:10px 14px;border-radius:8px;font-weight:bold}
.btn.ghost{background:#fff;border:1px solid var(--line);color:var(--accent)}
.photos{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.photos img{width:120px;height:120px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.editform label{display:block;margin-bottom:12px;font-size:.9rem;color:var(--grey);font-weight:bold}
.editform .input{margin-top:5px;color:#1a1a1a;font-weight:normal}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.editactions{display:flex;gap:10px;align-items:center;margin-top:6px}
.del{margin-top:18px;background:#fff;border:1px solid var(--red);color:var(--red);padding:10px 16px;border-radius:8px;font-weight:bold;cursor:pointer}
@media(max-width:560px){ .grid2{grid-template-columns:1fr} .brand span{display:none} }

/* Protokoll */
.ptitle{color:var(--accent);margin:4px 0 4px}
.phint{color:var(--grey);font-size:.9rem;margin:0 0 14px}
.ptable{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.prow{display:flex;gap:12px;padding:10px 14px;border-bottom:1px solid #eef1f5}
.prow:last-child{border-bottom:none}
.phead{background:var(--accent);color:#fff;font-weight:bold}
.pc-time{flex:0 0 150px}
.pc-act{flex:0 0 90px}
.pc-sum{flex:1;min-width:0}
.pbadge{background:var(--red-l);color:var(--red);font-weight:bold;font-size:.78rem;padding:2px 10px;border-radius:20px}
.phead .pbadge{background:transparent;color:#fff;padding:0}
.psum{font-size:.92rem}
.pgrund{font-size:.9rem;margin-top:2px}
.pmeta{color:var(--grey);font-size:.8rem;margin-top:2px}
@media(max-width:560px){ .prow{flex-direction:column;gap:4px} .pc-time,.pc-act{flex:none} }

/* Login + Auth */
.flash.err{background:var(--red-l);border-left-color:var(--red);color:var(--red)}
.topbar nav a.logout{opacity:.85;font-weight:normal;margin-left:18px;padding-left:16px;border-left:1px solid rgba(255,255,255,.35)}
.loginbody{display:flex;align-items:center;justify-content:center;min-height:100vh;background:var(--accent)}
.logincard{background:#fff;border-radius:14px;padding:28px 26px;width:min(360px,92vw);box-shadow:0 8px 30px rgba(0,0,0,.25)}
.loginbrand{font-size:1.3rem;font-weight:bold;color:var(--accent)}
.loginsub{color:var(--grey);font-size:.85rem;margin-bottom:16px}
.loginlabel{display:block;font-weight:bold;color:var(--accent);margin:6px 0 6px}

/* Protokoll badge colours */
.pbadge.a-del{background:var(--red-l);color:var(--red)}
.pbadge.a-erledigt{background:var(--green-l);color:var(--green)}
.pbadge.a-erstellt{background:var(--accent-light);color:var(--accent)}
.phead .pbadge.a-del,.phead .pbadge.a-erledigt{background:transparent;color:#fff}

.photo-hint{color:var(--grey);font-size:.82rem;margin:-4px 0 6px;text-align:center}

/* Mailversand */
.mailform{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 6px;
  padding-top:14px;border-top:1px solid var(--line)}
.mailinput{max-width:280px}
.seltoolbar.mailrow{margin-top:-4px}
.seltoolbar.mailrow .mailinput{max-width:260px}

/* Empfänger-Auswahl (Mehrfach) */
.mrlabel{font-size:.85rem;color:var(--grey);font-weight:bold}
.mrchips{display:flex;gap:8px;flex-wrap:wrap}
.mrchip input{display:none}
.mrchip span{display:inline-block;padding:8px 12px;border:1px solid var(--line);border-radius:20px;
  font-size:.85rem;cursor:pointer;background:#fff}
.mrchip input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.mrfrei{max-width:220px}

/* Frist / überfällig */
.badge.overdue{background:var(--red);color:#fff}
.fristnote{margin:-4px 0 12px;font-size:.85rem;color:var(--amber);font-weight:bold}

/* Wartung & Revision */
.lawbox{background:#f4f7fb;border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:10px 14px;font-size:.83rem;color:#333;margin-bottom:14px;line-height:1.5}
.wneu{display:flex;gap:8px;margin-bottom:14px}
.wneu .input{flex:1}
.wcard{display:block;background:#fff;border:1px solid var(--line);border-left:6px solid #3d6b3d;
  border-radius:10px;padding:12px;text-decoration:none;color:inherit;margin-bottom:10px}
.wcard.z-mangel{border-left-color:var(--red)}
.wtop{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:4px}
.wname{font-weight:bold}
.wmeta{color:var(--grey);font-size:.85rem}
.wnote{color:var(--amber);font-size:.83rem;margin-top:3px}
.badge.soon{background:var(--amber-l);color:var(--amber)}
.badge.mangel{background:var(--red-l);color:var(--red)}
.geprueftform{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:#eef4ea;
  border:1px solid #cfe0c4;border-radius:8px;padding:12px;margin-bottom:16px}
.gplabel{font-weight:bold;color:var(--green)}
.gphint{font-size:.8rem;color:var(--grey)}
.geprueftform .input{max-width:170px}

/* Wartungsbericht-Leiste */
.wreport{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.wmailform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* Monat/Jahr-Auswahl */
.monwahl{display:inline-flex;gap:6px;margin-top:5px}
.monwahl .input{width:auto;min-width:84px}

/* Protokoll: weitere Badge-Farbe + breitere Aktionsspalte */
.pbadge.a-warn{background:var(--amber-l);color:var(--amber)}
.prow .pc-act{flex:0 0 140px}

/* Suchfeld */
.filterbar .searchbox{flex:1;min-width:150px}
.filterbar .searchbtn{padding:9px 14px}

/* Fotos: max 3, einzeln löschbar */
.photoitem,.previtem{position:relative;display:inline-block}
.photodel{position:absolute;top:-6px;right:-6px;width:24px;height:24px;border-radius:50%;
  border:2px solid #fff;background:var(--red);color:#fff;font-weight:bold;cursor:pointer;line-height:1;padding:0}
.fotocount{color:var(--grey);font-size:.82rem;margin:2px 0 12px}
.fotomax{color:var(--amber);font-size:.85rem;font-weight:bold;margin:8px 0}

/* Wartung: Tabelle (PC) vs. Karten (Handy) */
.wtable{display:none;border-collapse:collapse;width:100%;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.wtable th{background:var(--accent);color:#fff;text-align:left;padding:9px 10px;font-size:.88rem;white-space:nowrap}
.wtable td{padding:8px 10px;border-top:1px solid #eef1f5;font-size:.9rem;vertical-align:top}
.wrow{cursor:pointer}
.wrow:hover td{background:#eef4fb}
.wrow.z-mangel td,.wrow.st-ueberfaellig td{background:#F8E9E9}
.wrow.z-mangel:hover td,.wrow.st-ueberfaellig:hover td{background:#f4dede}
.wg a{color:var(--accent);font-weight:bold;text-decoration:none}
.wg a:hover{text-decoration:underline}
.wbem{color:var(--grey);font-size:.8rem;margin-top:2px}
.wnext{white-space:nowrap}
.st-ueberfaellig .wnext{color:var(--red);font-weight:bold}
.wrow.z-mangel .wz{color:var(--red);font-weight:bold}
.tinybadge{font-size:.7rem;padding:1px 6px;border-radius:10px;vertical-align:middle}
.tinybadge.overdue{background:var(--red);color:#fff}
.tinybadge.soon{background:var(--amber-l);color:var(--amber)}

@media (min-width:760px){
  .wtable{display:table}
  .wcards{display:none}
}

/* Foto-Beschriftung + Sammeldruck/Backup/Status */
.photoitem{width:120px}
.capform{display:flex;gap:3px;margin-top:4px}
.capin{font-size:.72rem;padding:3px 5px;flex:1;min-width:0}
.btn.tiny{padding:3px 8px;font-size:.78rem}
.tinybadge.ok{background:var(--green-l);color:var(--green)}
.wstatus{white-space:nowrap}
.backupbox{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.bkinfo{color:var(--grey);font-size:.85rem}

/* Befunde + Begehungen */
.befblock{margin:18px 0 14px;padding-top:14px;border-top:1px solid var(--line)}
.befh{color:var(--accent);margin:0 0 8px;font-size:1rem}
.beflist{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.befrow{display:flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.beflink{color:var(--accent);font-weight:bold;text-decoration:none}
.beflink:hover{text-decoration:underline}
.befmeta{color:var(--grey);font-size:.83rem;flex:1}
.befdel{position:static;width:22px;height:22px}
.befempty{color:var(--grey);font-size:.88rem}
.befform{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.befform .input{max-width:220px}
.befti{flex:1;min-width:160px}
.bgneu{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px}
.bgneu summary{cursor:pointer;font-weight:bold;color:var(--accent)}
.bgcard{margin-bottom:10px}
.bgpdf{margin-bottom:14px}

/* BS-Dokumente */
.dokkat{color:var(--accent);margin:16px 0 6px;font-size:1rem;border-bottom:1px solid var(--line);padding-bottom:4px}
.doklist{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.dokrow{display:flex;align-items:center;gap:10px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:8px 10px;flex-wrap:wrap}
.dokedit{margin-left:auto}
.dokedit>summary{list-style:none;display:inline-block}
.dokedit>summary::-webkit-details-marker{display:none}
.dokeditform{margin-top:8px;width:100%}
.btn.ghost.tiny{padding:3px 10px;font-size:.78rem}

/* Kategorie-Verwaltung */
.katman{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.katrow{display:flex;align-items:center;gap:8px}
.katrename{display:flex;gap:6px;flex:1;align-items:center}
.katrename .input{max-width:280px}
.katnew{display:flex;gap:8px;align-items:center;margin-top:6px;padding-top:8px;border-top:1px dashed var(--line)}
.katnew .input{max-width:280px}

/* Dokumente: Tabelle (PC) vs. Karten (Handy) */
.dokcount{color:var(--grey);font-weight:normal;font-size:.85rem}
.dtable{display:none;border-collapse:collapse;width:100%;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:6px}
.dtable th{background:var(--accent);color:#fff;text-align:left;padding:8px 10px;font-size:.86rem;white-space:nowrap}
.dtable td{padding:8px 10px;border-top:1px solid #eef1f5;font-size:.9rem;vertical-align:top}
.drow:hover td{background:#eef4fb}
.dtitle a{color:var(--accent);font-weight:bold;text-decoration:none}
.dtitle a:hover{text-decoration:underline}
.dnote{color:var(--grey)}
.dstand{white-space:nowrap;color:var(--grey)}
.dact{white-space:nowrap;text-align:right}
.dacth{text-align:right}
.dact .btn{margin-left:4px}
.deditrow>td{background:#f7f9fc}

@media (min-width:760px){
  .dtable{display:table}
  .dcards{display:none}
}

/* Eigenkontrollen */
.ekchips .chip{cursor:pointer}
.chip.e-ok input:checked+span{background:#3d6b3d;border-color:#3d6b3d;color:#fff}
.chip.e-mangel input:checked+span{background:var(--red);border-color:var(--red);color:#fff}
.ekstat{background:#f7f9fc;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:10px 0;font-size:.9rem}
.ekstat .bericht{margin-left:10px}
.drow.ekmangel td{background:#F8E9E9}
.ekcards{display:none}
@media (max-width:759px){ .ekcards{display:flex} }

/* zweiter Foto-Knopf: Galerie / Datei */
.photo-btn.alt{background:#fff;color:var(--accent);border:1px solid var(--accent);margin-top:6px}
.photo-btn.small.alt{margin-top:6px}

/* Eigenkontrollen: Fälligkeits-Übersicht */
.ekue{display:table;margin-bottom:4px}
.ekue .drow.st-ueberfaellig td,.ekue .drow.st-nie td{background:#F8E9E9}
.ekue .drow.st-bald td{background:#FBF3E2}
.ekhint{color:var(--grey);font-size:.8rem;margin:4px 0 12px}
.ekiv{max-width:90px}

/* Dokumente: durchgehende Tabelle mit Kategorie-Trennzeilen (kompakter) */
.dtable tr.dgroup td{background:#e8eef6;color:var(--accent);font-weight:bold;
  padding:6px 10px;font-size:.86rem;border-top:1px solid var(--line)}
.dtable tr.dgroup:first-child td{border-top:none}
.dtable td{padding:6px 10px}
.dcatlabel{color:var(--accent);font-weight:bold;font-size:.9rem;margin:10px 0 4px}

/* ---- v2.0: Objektleiste, Verwaltung, Zwei-Faktor ---- */
.objektleiste{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:#fff;border-bottom:1px solid var(--line);padding:8px 16px;font-size:.92rem}
.objektleiste label{font-weight:bold;color:var(--accent)}
.objektleiste select{padding:7px 10px;border:1px solid var(--line);border-radius:8px;
  background:#fff;font-family:inherit;font-size:.95rem;font-weight:bold;min-width:200px}
.objektleiste .rolle{margin-left:auto;color:var(--grey)}
.objektleiste.nur-lesen{background:#fff8e6;border-bottom-color:var(--amber)}
.objektleiste.nur-lesen .rolle{color:#8a6100;font-weight:bold}
.kv{border-collapse:collapse;width:100%;margin:10px 0}
.kv th{text-align:left;padding:7px 12px 7px 0;color:var(--grey);font-weight:normal;
  vertical-align:top;white-space:nowrap}
.kv td{padding:7px 0;border-bottom:1px solid var(--line)}
.liste{border-collapse:collapse;width:100%;margin:10px 0;font-size:.94rem}
.liste th{text-align:left;padding:8px 10px 8px 0;border-bottom:2px solid var(--line);color:var(--grey)}
.liste td{padding:8px 10px 8px 0;border-bottom:1px solid var(--line);vertical-align:top}
.liste tr.grau td{color:var(--grey)}
.liste .aktionen{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.liste .aktionen form{display:flex;gap:4px;align-items:center}
.liste select{padding:6px;border:1px solid var(--line);border-radius:6px;font-family:inherit}
.input.klein{width:150px;padding:6px;font-size:.9rem}
.grau{color:var(--grey)}
.hinweis{color:var(--grey);font-size:.92rem;line-height:1.5}
.qr{display:block;margin:14px auto;width:200px;height:200px;image-rendering:pixelated;
  border:1px solid var(--line);border-radius:8px;background:#fff}
.secret{display:block;margin-top:6px;padding:10px;background:#eef1f5;border-radius:8px;
  font-family:monospace;font-size:1.05rem;letter-spacing:1px;word-break:break-all}
.details{margin:10px 0;font-size:.92rem;color:var(--grey)}
.input.code{font-size:1.5rem;letter-spacing:6px;text-align:center;font-family:monospace}
.codeliste{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.codeliste li{background:#eef1f5;border-radius:8px;padding:10px;text-align:center;
  font-family:monospace;font-size:1.05rem;letter-spacing:1px}
.objektliste{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.objektliste li{border:1px solid var(--line);border-radius:10px;padding:12px}
.objektliste a{font-weight:bold;color:var(--accent);text-decoration:none;font-size:1.05rem}
fieldset.blank{border:0;margin:0;padding:0;min-width:0}
fieldset.blank[disabled] .input{background:#f7f8fa;color:#555}
.photoitem .cap{font-size:.82rem;color:var(--grey);margin-top:4px;text-align:center}

/* Knopfreihen: inline-Elemente mit Innenabstand vergrößern die Zeilenhöhe nicht und
   überlappen deshalb beim Umbruch. Flex mit Abstand löst das an einer Stelle für alle. */
.aktionsleiste{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;align-items:center}
.aktionsleiste .bericht,.aktionsleiste .csv{display:inline-flex;align-items:center;
  white-space:nowrap;line-height:1.2}

.mailhinweis{background:#fff8e6;border-left:5px solid var(--amber);padding:11px 14px;
  border-radius:6px;margin:10px 0;font-size:.92rem;line-height:1.5}
.mailhinweis.leicht{background:#eef2f8;border-left-color:var(--accent)}
.mailhinweis code{background:rgba(0,0,0,.06);padding:1px 5px;border-radius:4px;
  font-size:.9em}

/* ===========================================================================
   v2.0 – Handy und großer Bildschirm
   Der Bestand aus v1 schaltet ab 760 px von Karten auf Tabellen. Ergänzt wird
   hier, was in v2 dazugekommen ist (Objektleiste, Verwaltungstabellen, längere
   Navigation) und was auf dem Handy vorher unbequem war.
   =========================================================================== */

/* --- Navigation: aus 9 Einträgen wird auf dem Handy sonst ein Block, der den
   halben Bildschirm frisst. Stattdessen eine wischbare Zeile. --- */
@media (max-width:759px){
  .topbar{flex-wrap:wrap;gap:6px;padding:8px 10px}
  .topbar nav{flex-wrap:nowrap;overflow-x:auto;width:100%;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* angeschnittener letzter Eintrag zeigt, dass es weitergeht */
    mask-image:linear-gradient(to right,#000 88%,transparent);
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent)}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a{white-space:nowrap;padding:8px 11px;font-size:.9rem}
  .topbar nav a.logout{margin-left:8px;padding-left:11px}
}

/* --- Objektleiste: das aktive Objekt ist der Verwechslungsschutz und muss auf
   dem Handy vollständig lesbar sein, nicht abgeschnitten. --- */
@media (max-width:560px){
  .objektleiste{gap:6px;padding:8px 10px}
  .objektleiste select{flex:1 1 100%;min-width:0;width:100%}
  .objektleiste .rolle{margin-left:0;flex:1 1 100%;font-size:.85rem}
}

/* --- Tabellen ohne Kartenvariante (Verwaltung, Fälligkeit je Kategorie):
   waagrecht schiebbar statt aus dem Bildschirm gedrängt. --- */
@media (max-width:759px){
  .liste,.ekue{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
    white-space:nowrap}
  .liste td,.liste th{white-space:normal;min-width:90px}
  .liste .aktionen{flex-direction:column;align-items:stretch;gap:4px}
  .liste .aktionen form{flex-wrap:wrap}
  .input.klein{width:100%}
  .kv th{white-space:normal}
}

/* --- Eingabefelder: unter 16 px zoomt iOS beim Antippen in das Feld hinein und
   die Seite steht danach verschoben. Auf dem Handy also nie kleiner. --- */
@media (max-width:759px){
  .input,.input.klein,.capin,.ekiv,.filterbar select,.objektleiste select,
  textarea.input,select.input{font-size:16px}
  .capin{padding:6px 8px}
  .filterbar{gap:6px}
  .filterbar .searchbox{flex:1 1 100%}
  .filterbar .exports{margin-left:0;width:100%}
  .mrfrei,.mailinput{max-width:none;flex:1 1 100%}
  .befform .input,.katrename .input,.katnew .input{max-width:none}
  .befform,.katrow,.katrename,.katnew{flex-wrap:wrap}
  .befti{flex:1 1 100%}
}

/* --- Fingerfreundliche Ziele: Löschkreuze und Chips sind auf dem Handy sonst
   Millimeterarbeit. --- */
@media (max-width:759px){
  .photodel,.befdel{width:32px;height:32px;font-size:1.1rem}
  .mrchip span{padding:10px 14px}
  .btn.tiny,.btn.ghost.tiny{padding:7px 12px;font-size:.85rem}
  .dokedit{margin-left:0}
  .dokrow{gap:6px}
}

/* --- Foto-Vorschau: drei Bilder nebeneinander statt einer Spalte. --- */
@media (max-width:560px){
  .photos{display:flex;flex-wrap:wrap;gap:8px}
  .photoitem{width:calc(50% - 4px)}
  .photoitem img{width:100%;height:auto}
}

/* --- Großer Bildschirm: die Wartungstabelle hat sieben Spalten, auf einem
   HD-Schirm ist Platz dafür. Fließtextseiten bleiben schmal – lange Zeilen
   liest niemand gern. --- */
@media (min-width:1500px){
  main.wide{max-width:1360px}
  .wtable td,.dtable td{font-size:.95rem}
}
@media (min-width:1900px){
  main.wide{max-width:1560px}
}

/* ===========================================================================
   Brandschutzdokumente am PC – Lesbarkeit
   Vorher: 14,4-px-Schrift in 6-px-Zeilen, Trennlinien in #eef1f5 (praktisch
   unsichtbar), keine Spaltenbreiten. Über 1300 px Breite verliert das Auge
   beim Springen von Titel zu Stand die Zeile – die Ablage wirkt wie ein Block.
   =========================================================================== */
@media (min-width:760px){
  /* Feste Spaltenbreiten: sonst springt das Raster je Kategorie, weil die
     Spaltenbreite aus dem Inhalt entsteht. */
  .dtable{table-layout:fixed}
  .dtable th:nth-child(1),.dtable td:nth-child(1){width:44%}
  .dtable th:nth-child(2),.dtable td:nth-child(2){width:auto}
  .dtable th:nth-child(3),.dtable td:nth-child(3){width:110px}
  .dtable th:nth-child(4),.dtable td:nth-child(4){width:170px}
  .dtable .deditrow>td{width:auto}

  .dtable th{padding:10px 12px;font-size:.9rem;letter-spacing:.02em}
  .dtable td{padding:10px 12px;font-size:.95rem;line-height:1.45;
    border-top:1px solid #dde4ec}

  /* Ruhiges Zebra: die Zeile bleibt beim Wandern nach rechts erkennbar. */
  .dtable tr.drow:nth-of-type(even) td{background:#f7f9fc}
  .dtable tr.drow:hover td{background:#e8f0fa}

  /* Kategoriezeile deutlich als Abschnitt, nicht als weitere Datenzeile. */
  .dtable tr.dgroup td{padding:11px 12px;font-size:.95rem;letter-spacing:.03em;
    text-transform:none;background:var(--accent-light);
    border-top:2px solid var(--accent);border-bottom:1px solid #c3d2e4}

  .dtable .dtitle a{font-size:1rem}
  .dtable .dnote{color:#4a4a4a}          /* vorher fast so hell wie die Linie */
  .dtable .dstand{font-variant-numeric:tabular-nums;color:#4a4a4a}
}

/* Auf großen Schirmen wird die Notizspalte sonst unnötig breit und die
   Zeilen zu lang zum Lesen. */
@media (min-width:1500px){
  .dtable th:nth-child(1),.dtable td:nth-child(1){width:38%}
  .dtable th:nth-child(2),.dtable td:nth-child(2){width:38%}
}

.namensform{display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.namensform .input.klein{width:135px}

/* ---- Übersicht: Kennzahlen als Kacheln ----
   Die drei Zahlen sind das, was man beim Öffnen zuerst sucht. Als Tabellenspalte
   verschwinden sie zwischen den Beschriftungen; als Kachel tragen sie zusätzlich
   eine Aussage: ruhig oder handlungsbedürftig. */
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));
  gap:12px;margin:18px 0 6px}
.kachel{display:flex;flex-direction:column;gap:2px;padding:14px 16px;
  border:1px solid var(--line);border-left:5px solid var(--line);border-radius:12px;
  background:#fff;text-decoration:none;color:inherit;transition:border-color .12s,
  box-shadow .12s,transform .12s}
.kachel:hover{box-shadow:0 3px 10px rgba(31,78,121,.13);transform:translateY(-1px)}
.kachel.ruhig{border-left-color:var(--accent)}
.kachel.ruhig:hover{border-color:var(--accent)}
.kachel.achtung{border-left-color:var(--red);background:#fdf7f7}
.kachel.achtung:hover{border-color:var(--red)}
.kachel .zahl{font-size:2.1rem;line-height:1.05;font-weight:bold;color:var(--accent);
  font-variant-numeric:tabular-nums}
.kachel.achtung .zahl{color:var(--red)}
.kachel .bezeichnung{font-size:.9rem;color:var(--grey)}
.kachel .zusatz{margin-top:5px;font-size:.8rem;color:var(--grey)}
.kachel .zusatz.dringend{color:var(--red);font-weight:bold}

.bereichszeile{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bereichstitel{font-size:.85rem;color:var(--grey);margin-right:4px}
.bereich{font-size:.82rem;background:#eef2f8;color:#33465e;border-radius:20px;
  padding:4px 10px;white-space:nowrap}

/* Warnpunkte in der Navigation: von jeder Seite aus sichtbar, was fällig ist. */
.topbar nav a .warnpunkt{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;
  border-radius:9px;background:var(--red);color:#fff;font-size:.72rem;line-height:18px;
  text-align:center;font-weight:bold;vertical-align:1px}
.topbar nav a.active .warnpunkt{background:#fff;color:var(--red)}

.mfrist{margin-top:3px;font-size:.82rem;color:var(--grey)}
.mfrist.ueberfaellig{color:var(--red);font-weight:bold}
.filterbar select[name=sort]{max-width:230px}

/* ===========================================================================
   Offene Punkte deutlicher – einheitliche Farbsprache über alle Listen
   Grundsatz: nicht alles lauter machen, sondern das Erledigte zurücktreten
   lassen. Sonst ruft jede Zeile gleich stark und keine fällt mehr auf.
   Farbe ist nie das einzige Signal – die Textmarken (offen, überfällig,
   Mangel) stehen weiterhin daneben.
   =========================================================================== */

/* --- Mängelliste: offene Einträge tragen einen Farbton, erledigte treten zurück --- */
.mcard.s-offen{background:#fdf6f6;border-left-width:7px}
.mcard.s-gemeldet,.mcard.s-inbearbeitung{background:#fffdf6;border-left-width:7px}
.mcard.s-erledigt{background:#fafbfc;opacity:.82}
.mcard.s-erledigt .mdesc{font-weight:normal;color:#4a4a4a}
.mcard.s-erledigt:hover{opacity:1}

/* --- Wartungstabelle: „bald fällig" war nur am Datum erkennbar --- */
.wrow.st-bald td{background:#FBF3E2}
.wrow.st-bald:hover td{background:#f7ecd2}
.wrow.st-bald .wnext{color:#8A5A00;font-weight:bold}
/* Farbkante am linken Rand: macht die Zeile am Zeilenanfang scanbar, wie die Karten */
.wtable .wrow td:first-child{border-left:5px solid transparent}
.wtable .wrow.st-ok td:first-child{border-left-color:#3d6b3d}
.wtable .wrow.st-bald td:first-child{border-left-color:var(--amber)}
.wtable .wrow.st-ueberfaellig td:first-child,
.wtable .wrow.z-mangel td:first-child{border-left-color:var(--red)}
.wtable .wrow.st-ok.z-mangel td{background:#F8E9E9}

/* --- Wartungskarten (Handy): Kante nach dem dringlicheren der beiden Zustände --- */
.wcard.st-bald{border-left-color:var(--amber);background:#fffdf6}
.wcard.st-ueberfaellig{border-left-color:var(--red);background:#fdf6f6}
.wcard.z-mangel{border-left-color:var(--red);background:#fdf6f6}

/* --- Eigenkontrollen: fällige Kategorien und Mängel kräftiger --- */
.ekue .drow.st-ueberfaellig td:first-child,
.ekue .drow.st-nie td:first-child{box-shadow:inset 5px 0 0 var(--red)}
.ekue .drow.st-bald td:first-child{box-shadow:inset 5px 0 0 var(--amber)}
.dtable .drow.ekmangel td:first-child{box-shadow:inset 5px 0 0 var(--red)}

/* --- Begehungen ohne hinterlegtes Protokoll sind ein offener Punkt --- */
.wcard.bgcard:has(.badge.overdue){border-left-color:var(--red);background:#fdf6f6}

/* ===========================================================================
   Lange Wörter brechen lassen
   Bis hierher stand `word-break` nur beim 2FA-Geheimnis. Überall sonst hält der
   Browser unteilbare Zeichenketten zusammen – und genau die entstehen im Betrieb
   ständig: Dateinamen mit Unterstrichen, Mailadressen, Gerätebezeichnungen.
   Wo eine Spaltenbreite feststeht, läuft der Text dann aus der Zelle heraus und
   überschreibt die Nachbarspalte; wo sie es nicht tut, wird die ganze Seite
   waagrecht breiter als der Bildschirm.
   =========================================================================== */
.dtable td, .dtable th,
.wtable td, .liste td, .kv td, .ptable td,
.mdesc, .dnote, .dtitle, .wcard, .mcard{
  overflow-wrap:break-word; word-break:break-word}

/* Die Dokumentenablage ist der empfindlichste Fall: table-layout:fixed gibt der
   Titelspalte 44 % und dehnt sie nicht nach – ohne Umbruch ragt ein langer
   Dateiname in die Standspalte hinein. */
@media (min-width:760px){
  .dtable{word-break:break-word}
}

/* Bereichs-Chips: nowrap hält kurze Namen sauber in einer Zeile, sprengt aber
   den Kasten, sobald ein Bereich ausgeschrieben wird („Stiegenhaus Ost, EG bis
   DG“). Innerhalb des Chips umbrechen ist das kleinere Übel als ein Chip, der
   über den Rand hinausragt. */
.bereich{white-space:normal; max-width:100%}

/* Die Sortierauswahl trug 230 px – „Frist zuerst (überfällige oben)“ passt dort
   je nach Schriftgröße gerade nicht mehr hinein und wird vom Browser
   abgeschnitten. Breite jetzt nach Inhalt, nach oben begrenzt. */
.filterbar select[name=sort]{max-width:min(100%, 340px)}

/* ===========================================================================
   Schaltflächen im Fließtext überlagern die Zeile darüber
   Ein <a> ist inline. Senkrechter Innenabstand vergrößert dort zwar das farbige
   Kästchen, nicht aber die Zeilenhöhe – das Kästchen ragt also über die Zeile
   hinaus. In den Flex-Leisten (.aktionsleiste, .filterbar .exports) fällt das
   nicht auf, weil Flex-Kinder ohnehin blockartig gesetzt werden. In der
   Statistikzeile der Eigenkontrollen steht „Bericht PDF“ dagegen mitten im
   Fließtext: Sobald der Satz auf dem Handy umbricht, legt sich die Schaltfläche
   über den Text darüber.
   =========================================================================== */
.bericht, .csv{display:inline-block; vertical-align:middle}

.ekstat{line-height:1.9}

/* Auf dem Handy bricht der Satz ohnehin um – dann die Schaltfläche gleich auf
   eine eigene, volle Zeile stellen. Das ist zugleich die bequemere Trefferfläche. */
@media (max-width:759px){
  .ekstat{line-height:1.55}
  .ekstat .bericht{display:block; margin:10px 0 2px; text-align:center}
}

/* --- Bestand und Ablage je Objekt (Verwaltung) ---------------------------- */
.untertitel{font-size:1rem;margin:18px 0 6px;color:var(--accent)}
/* Zahlenspalten schmal und rechtsbündig: die Namen sollen die Breite bestimmen,
   nicht die Überschriften. .dtable ist ab 760 px table-layout:fixed – hier soll
   die Breite dagegen aus dem Inhalt entstehen. */
@media (min-width:760px){
  .objstat{table-layout:auto}
  .objstat td:not(:first-child), .objstat th:not(:first-child){
    width:auto; text-align:right; white-space:nowrap}
}

/* --- Rückmeldungen am Mangel --------------------------------------------- */
.rmliste{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.rmkarte{border:1px solid var(--line);border-left:4px solid var(--accent);
  border-radius:8px;padding:8px 12px;background:#fbfcfe}
.rmkopf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:.82rem;color:var(--grey);margin-bottom:4px}
.rmdatum{font-weight:bold;color:var(--ink)}
.rmvon{flex:1;min-width:120px}
.rmdatei{padding:3px 10px;font-size:.8rem}
.rmtext{white-space:pre-wrap;overflow-wrap:break-word;word-break:break-word}
.del.klein{padding:3px 10px;font-size:.8rem}
/* Zurückgestellt liegt zwischen „in Bearbeitung“ und „erledigt“: bewusst vertagt,
   also kein Alarm – aber auch nicht abgeschlossen. */
.mcard.s-zurückgestellt{border-left-color:var(--grey)}
.badge.st-zurückgestellt{background:#eef1f5;color:var(--grey)}

/* --- Brücke zwischen Wartung/Eigenkontrolle und Mangel -------------------- */
.herkunft{margin:10px 0;padding:7px 12px;border-left:4px solid var(--accent);
  background:var(--accent-light);border-radius:6px;font-size:.88rem}
.uebernahme{margin:14px 0;padding:10px 12px;border:1px dashed var(--line);
  border-radius:8px;background:#fbfcfe}
.uebernahme form{margin:6px 0}
.ekakt{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.csv.tiny,.btn.tiny{padding:3px 10px;font-size:.8rem}
.inlineform{display:inline-block}
/* Ein Gewerk ohne beurteilte Befundlage ist weder grün noch rot – es fehlt eine
   Entscheidung. Das soll man sehen, statt es für „in Ordnung“ zu halten. */
.wrow.z-unbekannt td:first-child{box-shadow:inset 5px 0 0 var(--grey)}
.wcard.z-unbekannt{border-left-color:var(--grey)}

/* --- Hinweisblock „aus Prüfbefunden offen" über der Mängelliste -----------
   Bewusst deutlich abgesetzt und NICHT in die Tabelle gemischt: Die Mängelliste ist der
   Nachweis dessen, was der Brandschutzbeauftragte gemeldet hat. Ein Prüfbefund einer
   Fachfirma ist etwas anderes – anderer Auftraggeber, anderer Weg, kein Status, keine
   Dringlichkeit, keine Brandschutzbuch-Nummer. Vermischt man beides, enthält der
   Mängelbericht plötzlich zwei Sorten Einträge. */
.befundhinweis{border:1px solid var(--amber);border-left:5px solid var(--amber);
  background:#fffaf0;border-radius:8px;padding:10px 14px;margin:0 0 14px}
.bhkopf{font-weight:bold;color:var(--amber);margin-bottom:4px}
.bhliste{margin:4px 0 6px;padding-left:20px}
.bhliste li{margin:2px 0}
.bhliste a{color:var(--ink);font-weight:bold}
.bhakt{margin:6px 0 4px}
.befundchip{border-color:var(--amber);color:var(--amber)}
.rechtsgrund{margin:8px 0;padding:8px 12px;border-left:4px solid var(--red);
  background:#fdf6f6;border-radius:6px;font-size:.88rem}
.rechtsgrund .grau{display:block;margin-top:4px;font-size:.8rem}
.chip.f-vermutet{border-color:var(--amber);color:var(--amber)}
.chip.f-pruefstelle{border-color:var(--accent);color:var(--accent)}
.begehungshinweis{border-color:var(--accent);border-left-color:var(--accent);
  background:var(--accent-light)}
.begehungshinweis .bhkopf{color:var(--accent)}
.begehungchip{border-color:var(--accent);color:var(--accent)}

/* --- Hilfeseite (Anwenderhandbuch in der Anwendung) ----------------------- */
.hilfeseite{max-width:none}
.hilfetoc{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 18px;padding:10px 12px;
  background:var(--accent-light);border-radius:8px}
.hilfetoc a{font-size:.85rem;padding:3px 10px;border-radius:14px;background:#fff;
  color:var(--accent);text-decoration:none;border:1px solid var(--line)}
.hilfetoc a:hover{border-color:var(--accent)}
.hilfeinhalt{max-width:70ch;line-height:1.55}
.hilfeinhalt h2{margin:26px 0 8px;color:var(--accent);scroll-margin-top:70px}
.hilfeinhalt h3{margin:18px 0 6px;font-size:1.02rem;scroll-margin-top:70px}
.hilfeinhalt h4{margin:14px 0 4px;font-size:.95rem;color:var(--grey)}
.hilfeinhalt p{margin:8px 0}
.hilfeinhalt ul,.hilfeinhalt ol{margin:8px 0;padding-left:22px}
.hilfeinhalt li{margin:3px 0}
.hilfeinhalt hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.hilfeinhalt blockquote{margin:10px 0;padding:8px 14px;border-left:4px solid var(--accent);
  background:var(--accent-light);border-radius:0 6px 6px 0}
.hilfeinhalt pre{background:#f4f6f9;border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;overflow-x:auto;font-size:.85rem}
.hilfeinhalt code{background:#f4f6f9;padding:1px 5px;border-radius:4px;font-size:.88rem}
.hilfeinhalt pre code{background:none;padding:0}
.hilfetabelle{border-collapse:collapse;margin:10px 0;width:100%}
.hilfetabelle th,.hilfetabelle td{border-bottom:1px solid var(--line);padding:5px 10px;
  text-align:left;vertical-align:top;font-size:.9rem;overflow-wrap:break-word}
.hilfetabelle th{color:var(--accent)}

/* --- Eigenkontroll-Einträge: eigene Spaltenbreiten -----------------------
   Die Vorgaben von .dtable (44 % / auto / 110 / 170) sind für die vierspaltige
   Dokumententabelle gemacht. Diese Tabelle hat fünf Spalten – mit den geerbten
   Breiten wird „Datum“ übermäßig breit, „Bemerkung“ bricht auf vier Zeilen um,
   und für die Aktionsspalte bleibt so wenig übrig, dass die Schaltfläche
   abgeschnitten wird. */
@media (min-width:760px){
  /* Übersicht der Kategorien – ebenfalls fünf Spalten. */
  .ekue th:nth-child(1),.ekue td:nth-child(1){width:auto}
  .ekue th:nth-child(2),.ekue td:nth-child(2){width:110px}
  .ekue th:nth-child(3),.ekue td:nth-child(3){width:115px}
  .ekue th:nth-child(4),.ekue td:nth-child(4){width:115px}
  .ekue th:nth-child(5),.ekue td:nth-child(5){width:165px}

  .ekliste th:nth-child(1),.ekliste td:nth-child(1){width:105px}
  .ekliste th:nth-child(2),.ekliste td:nth-child(2){width:26%}
  .ekliste th:nth-child(3),.ekliste td:nth-child(3){width:95px}
  .ekliste th:nth-child(4),.ekliste td:nth-child(4){width:auto}
  .ekliste th:nth-child(5),.ekliste td:nth-child(5){width:150px}
}
/* Die Aktionsspalte trägt bis zu zwei Bedienelemente. nowrap schiebt sie sonst
   über den Rand hinaus, statt sie umbrechen zu lassen. */
.dact{white-space:normal}
.dact form{display:inline-block;margin:0}
.ekliste .dact{display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  justify-content:flex-end}

/* ===========================================================================
   Mängelliste als Arbeitsliste, Bericht als eigener Vorgang
   Vorher standen Filter, Sortierung, drei Exportknöpfe, zwei Anhangschalter und
   die Empfänger-Chips dauerhaft über den Einträgen – auf dem Handy fünf
   Bildschirme, bevor Inhalt kam. Jetzt: sehen und filtern hier, erzeugen und
   versenden in zwei eigenen Schritten.
   =========================================================================== */

/* --- Hinweisblock (offene Befunde/Begehungspunkte): zusammengeklappt eine Zeile --- */
.hinweisblock{background:#fff;border:1px solid var(--line);border-left:5px solid var(--amber);
  border-radius:10px;padding:10px 14px;margin-bottom:12px}
.hinweisblock>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;font-size:.92rem}
.hinweisblock>summary::-webkit-details-marker{display:none}
.hinweisblock>summary::before{content:"▸";color:var(--grey);margin-right:2px}
.hinweisblock[open]>summary::before{content:"▾"}
.hchip{background:#fdf0f0;color:var(--red);border-radius:20px;padding:3px 10px;
  font-size:.85rem;font-weight:bold}
.hblock{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.hblock+.hblock{margin-top:6px}

/* --- Suchzeile: das eine, was täglich gebraucht wird, bleibt sichtbar --- */
.suchzeile{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.suchzeile .searchbox{flex:1 1 auto;min-width:0}

/* --- Filter: eingeklappt, mit den gesetzten Werten in der Kopfzeile --- */
.filterblock{background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:12px}
.filterblock>summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;font-size:.92rem;font-weight:bold;color:var(--accent)}
.filterblock>summary::-webkit-details-marker{display:none}
.filterblock>summary::before{content:"▸";color:var(--grey);margin-right:2px;font-weight:normal}
.filterblock[open]>summary::before{content:"▾"}
.filterblock .filterbar{margin:10px 0 0}
.fchip{background:#eef2f8;color:#33465e;border-radius:20px;padding:3px 10px;
  font-size:.82rem;font-weight:normal}

/* --- Kopfzeile der Liste --- */
.listenkopf{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:10px}
.listenkopf .count{color:var(--grey);font-size:.9rem}
.listenkopf .selbtn{margin-left:auto}

/* --- Zusammenstellung: Schritte statt Knopfleiste --- */
.assistent .schritt{border:1px solid var(--line);border-radius:10px;padding:12px 14px;
  margin:12px 0}
.schrittkopf{font-weight:bold;color:var(--accent);margin-bottom:8px;display:flex;
  align-items:center;gap:8px}
.schrittkopf .nummer{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:.8rem}
.wahl{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;cursor:pointer;
  border-radius:8px;line-height:1.4}
.wahl:hover{background:#f4f7fb}
.wahl.gewaehlt{background:#f4f7fb;cursor:default}
.wahl input{margin-top:3px;flex:none}
.wahlnote{display:block;color:var(--grey);font-size:.85rem}
.filterchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* --- Ergebnisseite --- */
.pdfrahmen{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin:12px 0;
  background:#f4f6f9}
.pdfrahmen iframe{display:block;width:100%;height:70vh;min-height:420px;border:0}
.pdfknopf{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}
.ausgabekasten{border:1px solid var(--line);border-radius:10px;padding:16px;margin:12px 0;
  background:#f7f9fc}
.versandform{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.versandkopf{font-weight:bold;color:var(--accent);margin-bottom:8px}

/* Auf schmalen Schirmen keine eingebettete Vorschau – Android-Browser zeigen dort
   häufig nur einen Ladehinweis statt des Dokuments. */
@media (max-width:759px){
  .pdfrahmen{display:none}
  .listenkopf .selbtn{margin-left:0;width:100%}
  .suchzeile{flex-wrap:wrap}
}

.pdfrahmen[hidden]{display:none}
.pdfhinweis[hidden]{display:none}

/* Überblick „zuletzt gelaufen" in der Verwaltung */
.laufliste{border-collapse:collapse;width:100%;font-size:.92rem}
.laufliste td{padding:3px 10px 3px 0;vertical-align:top;border:0}
.laufliste .lbez{white-space:nowrap;color:var(--grey)}
.laufliste .lzeit{white-space:nowrap;font-variant-numeric:tabular-nums}
.laufliste tr.ueberfaellig td{color:var(--red)}

.laufliste tr.offen td{color:var(--grey)}

/* ===========================================================================
   Verwaltung am Handy: Beschriftung über den Wert statt daneben
   Die Kennzahlentabelle stellt links eine schmale Beschriftungsspalte und
   rechts lange Werte – „Bestand", „Konten" und „Zuletzt gelaufen" brechen
   dadurch auf schmalen Schirmen in vier bis fünf Zeilen um, während links
   Weißraum steht. Gestapelt bekommt der Wert die ganze Breite.
   =========================================================================== */
@media (max-width:640px){
  .kv, .kv tbody, .kv tr, .kv th, .kv td{display:block;width:100%}
  .kv tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .kv tr:last-child{border-bottom:0}
  .kv th{padding:0 0 2px;font-size:.82rem;color:var(--grey);
    text-transform:uppercase;letter-spacing:.03em;white-space:normal}
  .kv td{padding:0;border-bottom:0;line-height:1.45}

  /* „Zuletzt gelaufen": Bezeichnung und Zeitpunkt in einer Zeile, die
     Anmerkung darunter – statt drei gequetschter Spalten. */
  .laufliste, .laufliste tbody, .laufliste tr, .laufliste td{display:block;width:100%}
  .laufliste tr{padding:5px 0;border-bottom:1px solid #eef1f5}
  .laufliste tr:last-child{border-bottom:0}
  .laufliste .lbez{display:inline-block;font-weight:bold;color:inherit;margin-right:8px}
  .laufliste .lzeit{display:inline-block;color:var(--grey)}
  .laufliste .lnote{display:block;padding-top:2px;font-size:.88rem}
  .laufliste tr.offen .lbez{font-weight:normal;color:var(--grey)}
}

/* Bestand als umbrechende Marken statt einer Kommazeile: Zahl und Bezeichnung bleiben
   zusammen, statt mitten im Wort umzubrechen („21\nWartungsgewerke"). */
.bestandsliste{display:flex;flex-wrap:wrap;gap:5px}
.bchip{background:#eef2f8;color:#33465e;border-radius:20px;padding:3px 10px;
  font-size:.85rem;white-space:nowrap}
.bchip b{color:var(--accent)}

/* Dokumentversand: Auswahlspalte und Sendeleiste unter der Tabelle */
.dtable th.dsel,.dtable td.dsel{width:34px;padding-right:0}
.dtable td.dsel input{width:18px;height:18px}
.doksenden{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0 4px;
  padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
@media (max-width:759px){
  .doksenden{flex-direction:column;align-items:stretch}
}

/* Auswahl in der Kartenansicht der Dokumente (Handy) */
.dokrow .doksel{display:flex;align-items:center;gap:8px;width:100%;
  margin:0 0 6px;padding-bottom:6px;border-bottom:1px dashed #e3e8ef;
  font-size:.85rem;color:var(--grey)}
.dokrow .doksel input{width:18px;height:18px;flex:none}
.dokrow .doksel+.beflink{display:block}