/* myWerkzeug.de · Beschriftung für Verteiler und Schaltschrank. Baut auf /helfer/helfer.css (Kopf, Schrift) und /assets/thema.css (Hell/Dunkel).
   Frontansicht, Etiketten und Druckseiten sind Fachgrafiken auf heller Karte (.papier), auch im Dunkelmodus; gedruckt wird schwarz auf weiß. */
:root{--zebra:rgba(10,21,64,.035);--kopfzeile:var(--raised-2,#f9fafe);--el-akz:#2c47d8;--el-akz-bg:#e8edff}
:root[data-theme="dark"]{--zebra:rgba(255,255,255,.035);--kopfzeile:#18203a;--el-akz:#8ea3ff;--el-akz-bg:#1c2754}

.bs{flex:1;width:100%;max-width:1480px;margin:0 auto;padding:24px clamp(16px,3vw,36px) 64px}
.bs h1{font-size:clamp(26px,3.4vw,38px);line-height:1.1;margin:6px 0 8px;font-stretch:115%;letter-spacing:-.02em}
.bs h2{font-size:17px;margin:0 0 14px;font-stretch:108%}
.bs-kopf{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:18px}
.bs-titel{max-width:660px}
.bs-titel p{margin:0;color:var(--muted);font-size:16px}
.bs-marke{display:inline-flex;padding:2px 10px;border-radius:999px;background:var(--el-akz-bg);color:var(--el-akz);font-size:12px;font-weight:700}
.bs-datei{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.konto-stand{display:block;min-height:20px;color:var(--muted);font-size:13.5px;line-height:1.45;text-align:right;max-width:440px}
.konto-stand .i{width:16px;height:16px;stroke:var(--ok);fill:none;stroke-width:2.4;vertical-align:-3px;margin-right:5px}
.konto-stand[data-art="ok"]{color:var(--ink)}
.konto-stand[data-art="warn"]{color:var(--warn)}
.konto-stand[data-art="laeuft"]::before{content:"";display:inline-block;width:8px;height:8px;margin-right:7px;vertical-align:1px;border-radius:50%;background:var(--blue);animation:bs-puls 1s ease-in-out infinite alternate}
@keyframes bs-puls{from{opacity:.25}to{opacity:1}}
.konto-stand a{color:var(--blue);font-weight:650}
button.link{border:0;background:none;padding:0;font:inherit;font-weight:650;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
/* Projektleiste: Name und Verteiler als Reiter */
.projekt-leiste{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:0 0 12px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--raised)}
.pl-name{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:200px;flex:0 1 260px;padding:0 4px}
.pl-name span{font-size:11.5px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.pl-name input{border:1px solid transparent;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:16px;font-weight:750;padding:4px 6px;margin-left:-6px;width:100%}
.pl-name input:hover{border-color:var(--line)}
.pl-name input:focus{border-color:var(--blue);background:var(--paper);outline:none}
.vt-leiste{display:flex;align-items:center;gap:10px;flex:1 1 420px;min-width:0;flex-wrap:wrap}
.vt-reiterliste{position:relative;display:flex;gap:6px;overflow-x:auto;min-width:0;max-width:100%;padding:2px;scrollbar-width:thin}
.vt-reiter{display:flex;flex-direction:column;align-items:flex-start;gap:1px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:6px 12px 7px;cursor:pointer;text-align:left;min-width:120px;max-width:220px;flex:none}
.vt-reiter b{font-size:14px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-reiter small{font-size:12px;color:var(--soft);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vt-reiter:hover{border-color:var(--blue)}
.vt-reiter[aria-selected="true"]{background:var(--blue-soft);border-color:var(--blue);box-shadow:inset 0 -3px 0 var(--blue)}
.vt-knoepfe{display:flex;align-items:center;gap:2px}
.vt-knoepfe .knopf{margin-right:4px;border-style:dashed}
/* Dialog: Meine Projekte */
.bs-dialog.schmal{width:min(620px,calc(100vw - 24px))}
.pj-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:min(56vh,520px);overflow:auto}
.pj-liste li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.pj-liste li.offen{border-color:var(--blue);background:var(--blue-soft)}
.pj-symbol{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--el-akz-bg);color:var(--el-akz);flex:none}
.pj-symbol .i{width:20px;height:20px}
.pj-text{display:flex;flex-direction:column;min-width:0;flex:1}
.pj-text b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pj-text small{color:var(--soft);font-size:12.5px}
.pj-text em{font-style:normal;color:var(--blue);font-weight:650}
.druck-umfang{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 12px;margin:0 0 12px;border-radius:10px;background:var(--blue-soft)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:8px}
.karte .knopfreihe{margin-top:12px}
.knopf{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--raised);color:var(--ink);padding:7px 12px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;min-height:36px}
.knopf[hidden]{display:none}
.knopf:hover{border-color:var(--blue);color:var(--blue)}
.knopf .i{width:17px;height:17px}
.knopf.klein{padding:5px 10px;min-height:32px;font-size:13.5px}
.knopf.haupt{background:var(--blue);border-color:var(--blue);color:var(--auf-blau,#fff)}
.knopf.haupt:hover{filter:brightness(1.08);color:var(--auf-blau,#fff)}
.knopf-icon{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:none;color:var(--soft);cursor:pointer;flex:none}
.knopf-icon:hover:not(:disabled){color:var(--blue);border-color:var(--line)}
.knopf-icon.rot:hover{color:var(--err)}
.knopf-icon:disabled{opacity:.3;cursor:default}
.knopf-icon .i{width:18px;height:18px}
.leise{color:var(--soft);font-size:13px}
.leer{color:var(--muted);margin:6px 0}
.neu-reihe{border-style:dashed;width:100%;justify-content:center;margin-bottom:16px}
.neu-knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:640px){.neu-knoepfe{grid-template-columns:1fr}.neu-knoepfe .neu-reihe{margin-bottom:0}.neu-knoepfe{margin-bottom:16px}}
/* Dialog: Liste aus Excel einfügen */
.bs-dialog{border:1px solid var(--line);border-radius:16px;background:var(--raised);color:var(--ink);padding:0;width:min(880px,calc(100vw - 24px));max-height:calc(100vh - 32px);box-shadow:0 24px 60px rgba(10,21,64,.3)}
.bs-dialog::backdrop{background:rgba(10,21,64,.45)}
.ef{padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.ef-kopf{display:flex;justify-content:space-between;align-items:center}
.ef-kopf h2{margin:0;font-size:20px}
.ef p{margin:0}
.ef textarea{width:100%;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;padding:10px;border:1px solid var(--line-2);border-radius:10px;background:var(--paper);color:var(--ink);resize:vertical;tab-size:16}
.ef-vorschau{display:flex;flex-direction:column;gap:10px}
.ef-tab th{padding:6px!important}
.ef-tab th select{min-width:120px;font-size:13px;padding:5px 6px}
.ef-tab td{font-size:13px;padding:6px 10px!important;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.ef-tab td.ef-aus{opacity:.38;text-decoration:line-through}
.ef-tab tr.ef-ueber td{font-weight:700;color:var(--soft);font-style:italic}
.ef-schalter,.ef-fuss label{display:inline-flex;align-items:center;gap:7px;font-size:14px}
.ef-fuss{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.ef-fuss .knopf{margin-left:auto}
.ef-ergebnis{font-weight:600;font-size:14px}
@media (max-width:640px){.ef{padding:16px}.ef-tab thead{display:table-header-group!important}.ef-tab,.ef-tab tbody,.ef-tab tr,.ef-tab td{display:revert!important;width:auto!important}.ef-tab td::before{content:none!important}.ef-fuss .knopf{margin-left:0;width:100%;justify-content:center}}

.schritte{position:sticky;top:0;z-index:3;display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--raised);border:1px solid var(--line);overflow-x:auto;max-width:100%;width:max-content;margin:0 0 16px;box-shadow:0 4px 14px rgba(10,21,64,.06)}
.schritte button{display:inline-flex;align-items:center;gap:8px;border:0;background:none;border-radius:9px;padding:8px 14px;font-weight:650;font-size:14.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.schritte button span{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper);font-size:12px;font-weight:800;color:var(--muted)}
.schritte button[aria-selected="true"]{background:var(--blue-soft);color:var(--ink)}
.schritte button[aria-selected="true"] span{background:var(--blue);color:var(--auf-blau,#fff)}

.karte{background:var(--raised);border:1px solid var(--line);border-radius:16px;padding:18px clamp(14px,2.2vw,22px);margin:0 0 16px;box-shadow:0 1px 2px rgba(10,21,64,.04)}
.karte-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.karte-kopf h2{margin:0}
.felder{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px 18px}
.bs-feld{display:flex;flex-direction:column;gap:5px;min-width:0}
.bs-feld.breit{grid-column:span 2}
.bs-feld>span{font-size:13px;font-weight:650;color:var(--muted)}
.bs-feld small{font-size:12.5px;color:var(--soft)}
.bs input,.bs select{width:100%;min-width:0;border:1px solid var(--line-2);border-radius:9px;background:var(--raised);padding:7px 10px;min-height:38px;font-size:15px;outline:none}
.bs select{cursor:pointer}
.bs select option{background:var(--raised);color:var(--ink)}
.bs input:focus,.bs select:focus{border-color:var(--blue);box-shadow:var(--focus)}
.bs input.sr{position:absolute;width:1px;height:1px;min-height:0;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
.bs input[type=checkbox]{width:18px;height:18px;min-height:0;padding:0;accent-color:var(--blue)}

/* Frontansicht (Fachgrafik) */
.front-huelle{border-radius:12px;padding:12px;overflow-x:auto;background:var(--papier-karte,#fff);border:1px solid var(--line)}
.front{display:block;width:100%;height:auto;min-width:520px;font-family:"Archivo","Segoe UI",system-ui,sans-serif}
.front .f-gehaeuse{fill:#e9ecf2;stroke:#b8c0cf;stroke-width:.6}
.front .f-innen{fill:#f7f8fb;stroke:#d3d8e3;stroke-width:.4}
.front .f-schiene{fill:#c7cdd8}
.front .f-reihe{fill:#5e6a77;font-weight:800}.front .f-reihe.ueber{fill:#a3621c}
.front .f-frei{fill:none;stroke:#b8c0cf;stroke-width:.5;stroke-dasharray:2 1.6}
.front .geraet{cursor:pointer;outline:none}
.front .g-koerper{fill:#fbfbfc;stroke:#8f99a8;stroke-width:.45}
.front .geraet.leer .g-koerper{fill:#eef0f4;stroke:#b8c0cf}
.front .g-leer{stroke:#c7cdd8;stroke-width:.6}
.front .g-kappe{fill:#f1f3f6}
.front .g-schlitz{fill:#d5dae2}
.front .g-hebel{fill:#364452}.front .g-hebel.dick{fill:#364452}
.front .g-taste{fill:#e4e7ec;stroke:#8f99a8;stroke-width:.4}
.front .g-taste-r{fill:#d5dae2;stroke:#8f99a8;stroke-width:.4}
.front .g-patrone{fill:#eef0f4;stroke:#8f99a8;stroke-width:.4}
.front .g-fenster{fill:#9aa3b0}
.front .g-anzeige{fill:#d9e2e4;stroke:#8f99a8;stroke-width:.4}
.front .g-linie{fill:none;stroke:#5e6a77;stroke-width:.6}
.front .g-schraube{fill:#c7cdd8;stroke:#8f99a8;stroke-width:.3}
.front .g-klein{fill:#364452;font-weight:700}
.front .geraet:hover .g-koerper{stroke:#1f3fe0;stroke-width:.7}
.front .geraet.an .g-koerper{stroke:#1f3fe0;stroke-width:1;fill:#eef2ff}
.front .geraet:focus-visible .g-koerper{stroke:#1f3fe0;stroke-width:1.2}

/* Etiketten: gemeinsame Klassen für Vorschau und Druck */
.st-grund{fill:#fff}
.st-rand{fill:none;stroke:#0a1540;stroke-width:.25}
.st-trenn{stroke:#0a1540;stroke-width:.2}
.st-falz{stroke:#5e6a77;stroke-width:.2;stroke-dasharray:1 .8}
.st-angabe{fill:#364452}
svg text{fill:#0a1540;font-family:"Archivo","Segoe UI",system-ui,sans-serif}
svg text.ueber{fill:#5e6a77}
.sch-grund{fill:#fff}
.sch-dreieck{fill:#f5c400;stroke:#0a1540}
.sch-blitz{fill:#0a1540}

/* Arbeitsfläche: Frontansicht links mitlaufend, Reihen rechts */
.arbeit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);gap:16px;align-items:start}
.arbeit .front-karte{position:sticky;top:64px;margin:0}
.arbeit .front-huelle{max-height:calc(100vh - 150px);overflow:auto}
.arbeit .front{min-width:0}
/* Reihen-Editor */
.reihe .karte-kopf{flex-wrap:nowrap}
.reihe .karte-kopf h2{flex:none}
.te-anzeige{display:flex;align-items:center;gap:10px;flex:1;font-size:13px;color:var(--muted)}
.te-balken{flex:1;max-width:220px;height:7px;border-radius:4px;background:var(--paper);overflow:hidden}
.te-balken i{display:block;height:100%;border-radius:4px;background:var(--el-akz)}
.te-anzeige.ueber .te-balken i{background:var(--warn)}
.warn-t{color:var(--warn);font-weight:700}
.reihe-knoepfe{display:flex;gap:2px}
.geraete-liste{display:flex;flex-direction:column;gap:6px}
.g-kopfzeile,.g-zeile{display:grid;grid-template-columns:minmax(110px,1.2fr) 52px 66px minmax(130px,2fr) 84px 116px;gap:6px;align-items:center}
.g-zeile input,.g-zeile select{padding:6px 8px;font-size:14px}
.g-knoepfe .knopf-icon{width:29px;height:29px}
.g-kopfzeile{font-size:12px;font-weight:700;color:var(--soft);padding:0 6px}
.g-zeile{padding:6px;border-radius:10px;border:1px solid transparent}
.g-zeile.an{border-color:var(--blue);background:var(--blue-soft)}
.g-knoepfe{display:flex;gap:0}
.g-ort{grid-column:1/-1;order:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-left:2px}
.g-ort input{flex:0 1 150px;min-width:0;padding:4px 8px!important;font-size:13px!important;background:var(--paper)}
.ort-punkt{display:inline-block;flex:none;width:14px;height:11px;border-radius:3px;border:1.5px solid var(--line-2);background:transparent;vertical-align:-1px;margin-right:4px;border-top-width:3px}
.last-zeile{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:center}
.last-balken{display:flex;flex-direction:column;gap:8px}
.lb{display:grid;grid-template-columns:28px 1fr 78px 70px;gap:10px;align-items:center;font-size:14px}
.lb-spur{height:10px;border-radius:5px;background:var(--paper);overflow:hidden}
.lb-spur i{display:block;height:100%;border-radius:5px;background:var(--c-leistung,#6c489a)}
.lb .num{text-align:right;font-weight:700}
.last-info p{margin:0 0 6px}
.last-info .knopf{margin-top:6px}
.phase-3{font-weight:600;font-size:13.5px}
.liste-tab select[data-p$=".phase"]{width:70px}
.kw-feld{display:flex;align-items:center;gap:5px}
.kw-feld input{width:64px}
.liste-last{margin:8px 0 0;font-size:11.5px}
@media (max-width:700px){.last-zeile{grid-template-columns:1fr}.lb{grid-template-columns:24px 1fr 70px}.lb .leise{display:none}}
.liste-sym{width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:5px}
.g-symbol{display:inline-flex;align-items:center;gap:6px;margin-right:8px;flex:none}
.g-symbol svg{width:20px;height:20px;flex:none;color:var(--ink)}
.g-zeile .g-symbol select{padding:4px 8px!important;font-size:13px!important;width:178px;background:var(--paper)}
.g-ort .ort-punkt{margin:0 2px 0 0}
/* Farben je Stockwerk und Raum */
.farb-zeile{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:18px;align-items:start}
.farb-legende{display:flex;flex-direction:column;gap:10px}
.legende-gruppe>b{display:block;font-size:12px;font-weight:700;color:var(--soft);text-transform:uppercase;letter-spacing:.05em;margin-bottom:5px}
.legende-gruppe.blass{opacity:.5}
.legende-chips{display:flex;flex-wrap:wrap;gap:6px}
.farb-chip{position:relative;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;border:1px solid var(--line);background:var(--raised);font-size:13.5px;font-weight:600;cursor:pointer}
.farb-chip:hover{border-color:var(--blue)}
.farb-chip:focus-within{box-shadow:var(--focus)}
.farb-chip input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.farb-chip i{width:20px;height:16px;border-radius:5px;border:1.5px solid;border-top-width:4px}
.bs-hinweis{position:fixed;left:50%;bottom:18px;z-index:60;display:flex;align-items:center;gap:14px;background:var(--ink);color:var(--bg,#fff);padding:8px 8px 8px 16px;border-radius:12px;box-shadow:0 8px 28px rgba(10,21,64,.28);font-size:14px;font-weight:600;transform:translate(-50%,140%);opacity:0;transition:transform .22s ease,opacity .22s ease;pointer-events:none;max-width:calc(100vw - 32px)}
.bs-hinweis.an{transform:translate(-50%,0);opacity:1;pointer-events:auto}
.bs-hinweis .knopf{min-height:32px}
.bs-hinweis>span{white-space:nowrap}
@media (prefers-reduced-motion:reduce){.bs-hinweis{transition:none}}
.knopf.nur-symbol{padding:7px 9px}
.knopf:disabled{opacity:.42;cursor:default}
.farb-legende>.knopf{align-self:flex-start}
.liste-blatt td.ort{white-space:nowrap}
.liste-blatt .ort-punkt{border-color:#9aa3b0}
.liste-legende{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:8px;font-size:8.5pt;color:#364452}
.liste-legende b{color:#0a1540}
.front,.druckseite,.liste-blatt,.ort-punkt,.farb-chip i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
@media (max-width:700px){.farb-zeile{grid-template-columns:1fr}}

/* Stromkreisliste */
.tab-huelle{border:1px solid var(--line);border-radius:12px;overflow:auto hidden;max-width:100%}
table.tb{border-collapse:separate;border-spacing:0;width:100%;font-size:14.5px}
table.tb th{background:var(--kopfzeile);text-align:left;font-weight:700;font-size:12.5px;color:var(--muted);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tb td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.tb tr:last-child td{border-bottom:0}
table.tb td input,table.tb td select{min-width:110px}
.liste-vorschau{overflow-x:auto}
.liste-blatt{background:#fff;color:#0a1540;border:1px solid var(--line);border-radius:6px;padding:14mm 12mm;width:210mm;max-width:100%;font-size:10pt;box-shadow:0 6px 18px rgba(10,21,64,.08)}
.liste-blatt header{display:flex;justify-content:space-between;gap:16px;border-bottom:2px solid #0a1540;padding-bottom:6px;margin-bottom:10px}
.liste-blatt h3{margin:0;font-size:15pt}
.liste-blatt header p{margin:2px 0 0;color:#4f5a7d}
.liste-blatt dl{display:grid;grid-template-columns:auto auto;gap:1px 8px;margin:0;font-size:9pt}
.liste-blatt dt{color:#5d6788}.liste-blatt dd{margin:0;font-weight:600}
.liste-blatt table{width:100%;border-collapse:collapse}
.liste-blatt th,.liste-blatt td{border:1px solid #9aa3b0;padding:4px 6px;text-align:left;vertical-align:top}
.liste-blatt th{background:#eef1f8;font-size:9pt}
.liste-blatt tr.neben td{color:#4f5a7d}
.liste-fuss{font-size:8pt;color:#5d6788;margin:10px 0 0}

/* Klemmen, Kabel, Schilder */
.eintrag-zeile{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr)) ;gap:12px 14px;align-items:end;padding:14px;border-radius:12px;background:var(--paper);margin-bottom:12px;position:relative}
.eintrag-zeile>.knopf-icon{position:absolute;top:8px;right:8px}
.eintrag-zeile .mini{grid-column:1/-1;padding:10px;border-radius:10px;background:var(--papier-karte,#fff);border:1px solid var(--line);overflow-x:auto}
.mini svg{display:block;max-width:100%;height:auto}

/* Drucken */
.haken-reihe{display:flex;flex-wrap:wrap;gap:10px 20px;margin-bottom:10px}
.haken{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;cursor:pointer}
.seitenzahl{margin-left:12px}
.druck-bereich{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.blatt{background:#fff;box-shadow:0 6px 22px rgba(10,21,64,.12);border-radius:4px;max-width:100%}
.blatt.quer{width:100%;max-width:1000px}
.blatt.quer svg{display:block;width:100%;height:auto}
.blatt.hoch .liste-blatt{border:0;box-shadow:none}
.blatt.etiketten{width:100%;max-width:640px}
.blatt.etiketten svg{display:block;width:100%;height:auto}
.bogen-rand{fill:none;stroke:#9aa5b4;stroke-width:.25;stroke-dasharray:1.2 .8}
.druck-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px;align-items:start;margin:10px 0 12px}
.bogen-eigen{margin-bottom:12px}
.seite-grund{fill:#fff}
svg text.seite-kopf{fill:#5e6a77}
.mass path{stroke:#0a1540;stroke-width:.3;fill:none}
.mass text{fill:#5e6a77}

/* Tablet und Handy */
@media (max-width:1100px){
  .arbeit{grid-template-columns:1fr}
  .arbeit .front-karte{position:static}
  .arbeit .front-huelle{max-height:none}
  .front{max-width:760px;margin:0 auto}
}
@media (max-width:900px){
  .g-kopfzeile{display:none}
  .g-zeile{grid-template-columns:minmax(0,1fr) 52px 70px;background:var(--paper);padding:8px}
  .g-zeile [data-p$=".angabe"]{grid-column:2/4}
  .g-zeile .g-knoepfe{grid-column:1/-1;justify-content:flex-end;margin:-4px 0 -6px}
  .g-zeile .g-knoepfe{order:3}.g-ort{padding-left:0}.g-ort input{flex:1 1 0}
  .bs-datei{align-items:flex-start}
}
@media (max-width:640px){
  .bs{padding-top:16px}
  .projekt-leiste{padding:8px;gap:8px}.pl-name{flex:1 1 100%}.vt-leiste{flex-basis:100%}.vt-reiter{min-width:104px}
  .konto-stand{text-align:left}
  .schritte{width:100%}
  .schritte button{padding:8px 10px}
  .felder{grid-template-columns:1fr 1fr;gap:12px}
  .bs-feld.breit{grid-column:1/-1}
  .reihe .karte-kopf{flex-wrap:wrap}
  .te-anzeige{order:3;flex-basis:100%}
  .g-symbol{flex:1 1 100%;margin-right:0}
  .g-zeile .g-symbol select{width:auto;flex:1;min-width:0}
  .g-ort input{flex:1 1 0}
  .front{min-width:440px}
  .liste-blatt{padding:16px;font-size:12px}
  table.tb thead{display:none}
  table.tb,table.tb tbody,table.tb tr,table.tb td{display:block;width:100%}
  table.tb tr{padding:8px 4px;border-bottom:1px solid var(--line)}
  table.tb td{border:0;padding:4px 6px;display:grid;grid-template-columns:100px 1fr;align-items:center;gap:8px}
  table.tb td::before{content:attr(data-l);font-size:12px;color:var(--soft);font-weight:600}
  table.tb td input,table.tb td select{min-width:0}
}
@media (max-width:400px){.felder{grid-template-columns:1fr}}

/* Druck: nur die Blätter, in Originalgröße */
@page quer{size:A4 landscape;margin:0}
@page hoch{size:A4 portrait;margin:0}
@media print{
  html,body{background:#fff!important}
  .kopf,.fuss,.bs-kopf,.schritte,.no-print{display:none!important}
  .bs{padding:0;max-width:none;margin:0}
  .druck-bereich{display:block}
  .blatt{box-shadow:none;border-radius:0;max-width:none;break-after:page}
  .blatt:last-child{break-after:auto}
  .blatt.quer{page:quer;width:297mm;height:210mm}
  .blatt.quer svg{width:297mm;height:210mm}
  .blatt.hoch{page:hoch;width:210mm}
  .blatt.etiketten{max-width:none;height:297mm}
  .blatt.etiketten svg{width:210mm;height:297mm}
  .bogen-rand:not(.drucken){display:none}
  .blatt.hoch .liste-blatt{width:210mm;border:0;border-radius:0;padding:14mm 12mm}
}
@media (prefers-reduced-motion:no-preference){.knopf,.schritte button,.g-zeile{transition:border-color .15s,background-color .15s,color .15s}}
@media screen{.blatt{overflow-x:auto}.blatt.hoch{width:100%;max-width:820px}}