/* Layout: Seitenleiste am PC, Reiterleiste unten am Handy; Inhalt als ruhige Arbeitsfläche, Kupfer nur für Handlungen. */
:root{
  --bg:#f6f8fb; --flaeche:#ffffff; --flaeche2:#eff3f8; --linie:#e2e8f0; --text:#14212e; --leise:#4c5c6b;
  --kupfer:#d34100; --kupfer-text:#ffffff; --kupfer-hell:#fde8dc; --tinte:#0b2440; --blau:#0058a8; --gelb:#eee204;
  --gut:#2d7a4f; --gut-hell:#e1f1e7; --warn:#a86a00; --warn-hell:#fbefd6; --fehler:#b3372f; --fehler-hell:#f8e1df;
  --schrift:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --zahl:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#07172a; --flaeche:#0e2239; --flaeche2:#132b47; --linie:#22405f; --text:#e8eef5; --leise:#a3b4c6;
  --kupfer:#ff6a1f; --kupfer-text:#1a0900; --kupfer-hell:#3d1f0e; --tinte:#051120; --blau:#6fb0ff; --gelb:#eee204;
  --gut:#5cc58a; --gut-hell:#16301f; --warn:#e3a43a; --warn-hell:#33270f; --fehler:#ef7d73; --fehler-hell:#3a1a17; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#07172a; --flaeche:#0e2239; --flaeche2:#132b47; --linie:#22405f; --text:#e8eef5; --leise:#a3b4c6;
  --kupfer:#ff6a1f; --kupfer-text:#1a0900; --kupfer-hell:#3d1f0e; --tinte:#051120; --blau:#6fb0ff; --gelb:#eee204;
  --gut:#5cc58a; --gut-hell:#16301f; --warn:#e3a43a; --warn-hell:#33270f; --fehler:#ef7d73; --fehler-hell:#3a1a17; color-scheme:dark}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--schrift);font-size:15px;line-height:1.45}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
.app{display:grid;grid-template-columns:220px 1fr;min-height:100%}
.seite{background:var(--tinte);color:#dfe7ef;border-top:3px solid #f74c00;padding-block:20px;padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:14px;display:flex;flex-direction:column;gap:4px;position:sticky;top:0;height:100vh;height:calc(100vh / var(--gr,1));overflow-y:auto}
/* Schriftgröße (A− / A+): ganze Oberfläche gleichmäßig, je Gerät gemerkt; 100vh der Seitenleiste ausgleichen */
html{zoom:var(--gr,1)}
.schrift-zeile{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 12px;font-size:12px;color:#8ea3ba}
.schriftwahl{display:inline-flex;gap:4px;flex:none}
.schriftwahl button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#dfe7ef;border-radius:6px;padding:3px 7px;font-size:13px;line-height:1.2;cursor:pointer;min-width:30px}
.schriftwahl button:hover:not(:disabled){background:rgba(255,255,255,.14);color:#fff}
.schriftwahl button:disabled{opacity:.4;cursor:default}
.mehr-schrift .schriftwahl button{border-color:var(--linie);background:var(--flaeche);color:var(--text);padding:6px 9px;font-size:14px}
.mehr-schrift .schriftwahl button:hover:not(:disabled){background:var(--flaeche2);color:var(--text)}
.marke{font-weight:700;font-size:18px;letter-spacing:.01em;padding:0 10px 18px;display:flex;align-items:baseline;gap:6px;color:#fff}
.marke small{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.nav{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;border:0;background:none;color:#b9c8d8;text-align:left;cursor:pointer;width:100%}
.nav:hover{background:rgba(255,255,255,.06);color:#fff}
.nav.an{background:rgba(0,88,168,.55);color:#fff;box-shadow:inset 3px 0 0 #f74c00}
.nav svg{width:18px;height:18px;flex:none}
.nav-gruppe{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#8ea3ba;padding:14px 10px 4px}
.seite .fuss{margin-top:auto;font-size:12px;color:#8ea3ba;padding:0 10px}
main{min-width:0;padding-block:24px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.innen{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
h1{font-size:24px;margin:0;text-wrap:balance}
h2{font-size:16px;margin:0}
h3{font-size:14px;margin:0}
.leise{color:var(--leise)}
.klein{font-size:13px}
.zahl{font-family:var(--zahl);font-variant-numeric:tabular-nums}
.sim{background:var(--kupfer-hell);border:1px solid color-mix(in srgb,var(--kupfer) 30%,transparent);border-radius:var(--r);padding:8px 12px;font-size:13px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.knopf{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--linie);background:var(--flaeche);border-radius:6px;padding:8px 13px;cursor:pointer;font-weight:500;white-space:nowrap}
.knopf:hover{border-color:var(--leise)}
.knopf.haupt{background:var(--kupfer);border-color:var(--kupfer);color:var(--kupfer-text)}
.knopf.haupt:hover{filter:brightness(1.07)}
.knopf.klein{padding:5px 10px;font-size:13px}
.knopf.gefahr{color:var(--fehler)}
.knopf svg{width:16px;height:16px}
.knopf:focus-visible,.nav:focus-visible,.zeile:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.reiter button:focus-visible,.raum-name:focus-visible,.komp-text:focus-visible,.bild:focus-visible,.mangel:focus-visible{outline:2px solid var(--kupfer);outline-offset:2px}
.block{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r)}
.block-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linie);flex-wrap:wrap}
.block-innen{padding:14px 16px}
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kachel{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.kachel .wert{font-family:var(--zahl);font-size:20px;font-weight:500;font-variant-numeric:tabular-nums}
.etikett{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.liste{display:flex;flex-direction:column}
.zeile{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1px solid var(--linie);background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left;cursor:pointer}
.liste .zeile:first-child{border-top:0}
.zeile:hover{background:var(--flaeche2)}
.zeile .haupt{flex:1;min-width:0}
.zeile .titel{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile .unter{font-size:13px;color:var(--leise);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zeile .rechts{text-align:right;flex:none}
.pfeil{color:var(--leise);font-size:22px;line-height:1;flex:none}
.pille{display:inline-block;font-size:12px;font-weight:500;padding:2px 8px;border-radius:99px;white-space:nowrap}
.p-gut{background:var(--gut-hell);color:var(--gut)}
.p-warn{background:var(--warn-hell);color:var(--warn)}
.p-fehler{background:var(--fehler-hell);color:var(--fehler)}
.p-leise{background:var(--flaeche2);color:var(--leise);border:1px solid var(--linie)}
.p-art{background:var(--kupfer-hell);color:var(--kupfer)}
.innen>*,.zwei>*,.kacheln>*,.block,.liste>*{min-width:0}
.aktionen{display:flex;gap:8px;flex-wrap:wrap}
.meta{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-top:5px;font-size:13px;color:var(--leise)}
.leer{padding:24px 16px;color:var(--leise);text-align:center}
.zwei{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:18px;align-items:start}
.reiter{display:flex;gap:2px;border-bottom:1px solid var(--linie);overflow-x:auto}
.reiter button{border:0;background:none;padding:10px 14px;cursor:pointer;color:var(--leise);border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
.reiter button.an{color:var(--text);border-bottom-color:var(--kupfer)}
.suche{padding:9px 12px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);width:100%;max-width:280px}
.filter{display:flex;gap:6px;flex-wrap:wrap}
.filter button{border:1px solid var(--linie);background:var(--flaeche);border-radius:99px;padding:5px 12px;cursor:pointer;font-size:13px}
.filter button.an{background:var(--text);color:var(--bg);border-color:var(--text)}
.strahl{display:flex;flex-direction:column}
.eintrag{display:grid;grid-template-columns:92px 1fr;gap:14px;padding:12px 16px;border-top:1px solid var(--linie)}
.eintrag:first-child{border-top:0}
.eintrag .datum{font-family:var(--zahl);font-size:13px;color:var(--leise)}
.eintrag p{margin:0;white-space:pre-wrap}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.galerie.klein{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.bild{border:1px solid var(--linie);border-radius:6px;overflow:hidden;background:var(--flaeche2);display:flex;flex-direction:column;cursor:pointer;padding:0;text-align:left;position:relative}
.bild .vorschau{aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;background:var(--flaeche2);color:var(--leise)}
.bild .vorschau img{width:100%;height:100%;object-fit:cover}
.bild .vorschau svg{width:34px;height:34px}
.bild .cap{padding:6px 8px;font-size:12px;border-top:1px solid var(--linie);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--flaeche)}
.bild .weg{position:absolute;top:4px;right:4px;background:var(--flaeche);border:1px solid var(--linie);border-radius:4px;width:24px;height:24px;display:grid;place-items:center;cursor:pointer}
.pbgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pbgitter .breit{grid-column:1/-1}
.haken{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-top:1px solid var(--linie);cursor:pointer}
.haken:first-child{border-top:0}
.haken input{margin-top:3px;flex:none}
.ga-teil{padding:14px 16px;border-top:1px solid var(--linie)}
.ga-teil:first-of-type{border-top:0}
.ga-teil h3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.ga-text{white-space:pre-line}
.ga-frage{display:block;width:100%;text-align:left;background:var(--flaeche2);border:1px solid var(--linie);border-radius:6px;padding:10px 12px;margin-top:8px;cursor:pointer;color:inherit}
.ga-frage:disabled{cursor:default}
.normzeile{display:flex;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--linie)}
.normzeile .abschnitt-nr{font-family:var(--zahl);font-size:13px;min-width:86px}
[hidden]{display:none!important}
.plan-svg{display:block;width:100%;height:auto;background:#fff;font-family:var(--schrift)}
.plan-svg .iec-linie{fill:none;stroke:#1a1a1a;stroke-linecap:round}
.plan-svg .iec-wirklinie{fill:none;stroke:#1a1a1a}
.plan-svg .iec-klemme{fill:#555;font-weight:500}
.plan-svg .iec-name{fill:#1a1a1a;font-weight:700}
.plan-svg .iec-flaeche{fill:#fff}
.plan-svg .iec-pfeil{fill:#1a1a1a;stroke:#1a1a1a}
.plan-svg text{fill:#1a1a1a}
.plan-svg .t-leise{fill:#666}
.plan-svg .t-fehler{fill:#b3372f}
.plan-rahmen{border:1px solid var(--linie);border-radius:6px;overflow:auto;background:#fff}
.plan-svg.blatt .sl-geraet .iec-linie{stroke-width:.7}.plan-svg.blatt .sl-geraet .iec-wirklinie{stroke-width:.6}
.blaetter{display:flex;flex-direction:column;gap:14px;padding:10px;background:#e9edf2}.blaetter .plan-svg{box-shadow:0 1px 4px rgba(0,0,0,.18)}
#druckBereich{display:none}
@media print{@page{size:A4 landscape;margin:0}html{zoom:1!important}body>*:not(#druckBereich){display:none!important}#druckBereich{display:block!important}#druckBereich svg{display:block;width:297mm;height:210mm;break-after:page;page-break-after:always;box-shadow:none}#druckBereich svg:last-child{break-after:auto;page-break-after:auto}}
.tel{color:var(--blau);font-weight:500;text-decoration:none;border-bottom:1px dashed currentColor}
.hinweisbox{background:var(--flaeche2);border:1px solid var(--linie);border-radius:6px;padding:8px 10px}
.termin{display:flex;align-items:center;gap:8px;border-top:1px solid var(--linie);padding-right:12px}
.termin:first-child{border-top:0}
.termin .zeile{border-top:0;flex:1;min-width:0}
.termin-tag{min-width:86px;font-size:13px;line-height:1.35}
.verbindungen{border-top:1px solid var(--linie);background:var(--flaeche2)}
.verbindungen .block-kopf{border-bottom:0;padding-bottom:4px}
.verbindung{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 16px 10px}
.pruefpunkt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--linie)}
.pruefpunkt:first-child{border-top:0}
.pruefpunkt select{padding:6px 8px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);flex:none}
a.knopf{text-decoration:none;color:inherit}
a.knopf.haupt{color:var(--kupfer-text)}
.marke-k.neu{background:var(--gut-hell);color:var(--gut);border-color:transparent}
.umbruch{white-space:normal;text-align:left;max-width:100%}
.anlage-auftrag{border-top:1px solid var(--linie)}
.anlage-auftrag:first-of-type{border-top:0}
.anlage-auftrag>.zeile{background:var(--kupfer-hell)}
.raum{border-top:1px solid var(--linie)}
.raum:first-of-type{border-top:0}
.raum-kopf{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--flaeche2);flex-wrap:wrap}
.raum-name{border:0;background:none;font-weight:600;font-size:15px;cursor:pointer;padding:0;margin-right:auto;text-align:left}
.raum-name:hover{text-decoration:underline}
.komp{display:flex;align-items:center;gap:8px;padding-block:6px;padding-right:12px;padding-left:calc(16px + var(--t,0) * 22px);border-top:1px solid color-mix(in srgb,var(--linie) 55%,transparent);min-width:0}
.ast{width:10px;height:12px;border-left:1.5px solid var(--linie);border-bottom:1.5px solid var(--linie);margin-top:-10px;flex:none}
.kuerzel{font-family:var(--zahl);font-size:11px;font-weight:500;min-width:28px;text-align:center;padding:2px 4px;border-radius:4px;background:var(--kupfer-hell);color:var(--kupfer);flex:none;display:inline-block}
.bmk{font-family:var(--zahl);font-size:12px;color:var(--leise);flex:none}
.komp-text{border:0;background:none;text-align:left;cursor:pointer;flex:1;min-width:0;padding:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.komp-text .titel{font-weight:500}
.komp-text .unter{color:var(--leise);font-size:13px}
.komp-text:hover .titel{text-decoration:underline}
.marken{display:flex;gap:4px;flex:none;align-items:center}
.marke-k{font-size:11px;font-weight:500;padding:1px 6px;border-radius:4px;background:var(--flaeche2);border:1px solid var(--linie);color:var(--leise);white-space:nowrap}
.marke-k.m{background:var(--fehler-hell);color:var(--fehler);border-color:transparent}
.komp-plus{padding:2px 9px;flex:none}
.mangel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 16px;border-top:1px solid var(--linie);cursor:pointer;background:none;border-left:0;border-right:0;border-bottom:0;width:100%;text-align:left}
.liste .mangel:first-child{border-top:0}
.mangel:hover{background:var(--flaeche2)}
.mnr{font-family:var(--zahl);font-weight:500;font-size:13px;padding-top:1px}
.mstreifen{width:4px;align-self:stretch;border-radius:2px}
.daumen{display:flex;gap:4px;margin-top:6px}
.daumen span{width:44px;height:33px;border-radius:4px;background:var(--flaeche2);border:1px solid var(--linie);overflow:hidden;display:grid;place-items:center;color:var(--leise)}
.daumen img{width:100%;height:100%;object-fit:cover}
.daumen svg{width:16px;height:16px}
.pfad{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;color:var(--leise)}
.pfad button{border:0;background:none;padding:2px 0;color:var(--kupfer);cursor:pointer;text-decoration:underline;text-underline-offset:2px;font:inherit}
.pfad b{color:var(--text);font-weight:500}
.pfad button:focus-visible{outline:2px solid var(--kupfer);outline-offset:2px}
.kabel{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:start}
.kabel .etikett{padding-top:6px}
.betr-bild{background:var(--flaeche2);border:1px solid var(--linie);border-radius:6px;display:grid;place-items:center;min-height:240px;overflow:hidden;color:var(--leise)}
.betr-bild img{max-width:100%;max-height:70vh;object-fit:contain;display:block}
.betr-luecke{flex:1}
.betr-zahl{align-self:center;min-width:44px;text-align:center}
.betr-pfeil{font-size:20px;padding:4px 14px}
.mess{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px}
.kv{display:flex;flex-direction:column;gap:1px;min-width:0}
.kv b{font-weight:500}
.balken{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:150px;padding-top:8px}
.monat{display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end;min-width:0}
.saeulen{display:flex;gap:2px;align-items:end;height:120px;width:100%;justify-content:center}
.saeulen span{width:42%;max-width:14px;border-radius:2px 2px 0 0;min-height:1px}
.s-ein{background:var(--gut)}
.s-aus{background:var(--kupfer)}
.monat em{font-style:normal;font-size:11px;color:var(--leise)}
.legende{display:flex;gap:14px;font-size:12px;color:var(--leise)}
.legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.grenze{height:10px;background:var(--flaeche2);border:1px solid var(--linie);border-radius:99px;overflow:hidden}
.grenze span{display:block;height:100%;background:var(--gut)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise);text-align:left;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--linie)}
td{padding:8px 10px;border-bottom:1px solid var(--linie);vertical-align:top}
td.r,th.r{text-align:right}
.tabhuelle{overflow-x:auto}
.dialog-grund{position:fixed;inset:0;background:rgba(10,16,22,.5);display:flex;align-items:flex-start;justify-content:center;padding:max(24px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 24px max(12px,env(safe-area-inset-left,0px));overflow-y:auto;z-index:50}
.dialog{background:var(--flaeche);border:1px solid var(--linie);border-radius:10px;width:100%;max-width:620px;display:flex;flex-direction:column}
.dialog.breit{max-width:820px}
.dialog-kopf{padding:14px 18px;border-bottom:1px solid var(--linie);display:flex;justify-content:space-between;align-items:center;gap:10px}
.dialog-innen{padding:16px 18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.dialog-fuss{padding:12px 18px;border-top:1px solid var(--linie);display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.abschnitt{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--linie);padding-top:12px}
.abschnitt-kopf{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.feld{display:flex;flex-direction:column;gap:4px;min-width:0}
.feld label{font-size:13px;font-weight:500}
.feld input,.feld select,.feld textarea{padding:9px 11px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);width:100%}
.feld textarea{min-height:90px;resize:vertical}
.reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.reihe.eng{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.pos{display:grid;grid-template-columns:minmax(0,1fr) 70px 70px 96px 34px;gap:6px;align-items:center}
.pos input,.pos select{padding:7px 8px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);width:100%;min-width:0}
.vorschlag{display:grid;grid-template-columns:28px 70px minmax(0,1fr) 150px 52px;gap:6px;align-items:center;padding:4px 0;border-top:1px solid var(--linie)}
.vorschlag input[type=text],.vorschlag select{padding:6px 8px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);width:100%;min-width:0}
.x{border:0;background:none;cursor:pointer;color:var(--leise);font-size:18px;padding:4px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));background:var(--text);color:var(--bg);padding:10px 16px;border-radius:6px;font-size:14px;z-index:60;max-width:calc(100% - 32px)}
.qr{background:#fff;padding:14px;border-radius:6px;display:inline-block;align-self:center}
.blatt{background:#fff;color:#1a1a1a;border:1px solid var(--linie);padding:32px 34px;font-size:13px;line-height:1.5;min-width:0}
.blatt h2{font-size:20px;margin:22px 0 4px;color:#1a1a1a}
.blatt h3{font-size:13px;margin:22px 0 6px;padding-bottom:3px;border-bottom:2px solid #1d3348;color:#1d3348;text-transform:uppercase;letter-spacing:.06em}
.blatt table td,.blatt table th{border-color:#ddd;color:#1a1a1a}
.blatt table th{color:#555}
.blatt .absender{font-size:11px;color:#666;border-bottom:1px solid #ccc;padding-bottom:2px;display:inline-block}
.blatt .oben{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.blatt .summe td{font-weight:700;border-bottom:0}
.blatt .hinweis{margin-top:18px;padding:8px 10px;background:#f4f4f4}
.blatt .mblock{border:1px solid #ddd;border-left-width:5px;padding:10px 12px;margin-top:10px;break-inside:avoid}
.blatt .mfotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.blatt .mfotos figure{margin:0;border:1px solid #ddd}
.blatt .mfotos .ph{aspect-ratio:4/3;background:#eef1f4;display:grid;place-items:center;color:#889}
.blatt .mfotos img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.blatt .mfotos figcaption{font-size:11px;padding:3px 6px;color:#555}
.blatt .baum{font-size:12.5px}
.blatt .baum div{padding:2px 0;border-bottom:1px dotted #e3e3e3}
.blatt .sig{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
.blatt .sig div{border-top:1px solid #888;padding-top:4px;min-width:200px;font-size:12px;color:#555}
.ader-marken{display:inline-flex;gap:4px;vertical-align:middle;font-style:normal}
.ader-marke{display:inline-flex;align-items:center;gap:3px;font-family:var(--zahl);font-size:11px;color:var(--leise)}
.ader-marke i{display:inline-block;width:12px;height:8px;border-radius:2px;border:1px solid rgba(0,0,0,.35)}
.bbtab input{width:100%;min-width:70px;padding:6px 7px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche)}
.bbtab td{padding:4px}
.vl-leiste{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--linie);padding-top:12px}
.vl-zurueck{display:flex;gap:6px}
.knopf:disabled{opacity:.45;cursor:default}
.vl-werkzeuge{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.vl-fi{display:inline-flex;gap:6px;align-items:center}
.vl-fi input{width:56px;padding:6px 8px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche)}
.vl-liste{border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
.vl-teil{border-top:1px solid var(--linie)}
.vl-teil:first-child{border-top:0}
.vl-teil.auf{background:var(--flaeche2)}
.vl-zeile{display:flex;align-items:center;gap:8px;padding:6px 10px 6px calc(10px + var(--t,0) * 22px);min-width:0}
.vl-teil[style*="--t:1"] .vl-zeile,.vl-teil[style*="--t:2"] .vl-zeile,.vl-teil[style*="--t:3"] .vl-zeile{background-image:linear-gradient(var(--linie),var(--linie));background-size:2px 100%;background-repeat:no-repeat;background-position:calc(var(--t,0) * 22px - 6px) 0}
.vl-text{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px;border:0;background:none;text-align:left;cursor:pointer;padding:4px 0;flex-wrap:wrap}
.vl-text .bmk{min-width:42px}
.vl-name{font-weight:600}
.vl-info{color:var(--leise);font-size:13px}
.vl-doppelt{color:var(--fehler)!important;font-weight:600}
.vl-knoepfe{display:flex;gap:4px;flex:none}
.vl-knoepfe .knopf{padding:4px 9px}
.vl-frage{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 10px 10px calc(10px + var(--t,0) * 22px);font-size:13px}
.vl-editor{padding:4px 12px 12px calc(12px + var(--t,0) * 22px);display:flex;flex-direction:column;gap:8px}
.vl-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
@media (max-width:760px){.vl-zeile{flex-wrap:wrap;padding-left:calc(10px + var(--t,0) * 12px)}.vl-knoepfe{width:100%;justify-content:flex-end}.vl-editor,.vl-frage{padding-left:calc(10px + var(--t,0) * 12px)}
  .vl-teil[style*="--t:1"] .vl-zeile,.vl-teil[style*="--t:2"] .vl-zeile,.vl-teil[style*="--t:3"] .vl-zeile{background-position:calc(var(--t,0) * 12px - 4px) 0}.vl-fi input{font-size:16px}}
.vl-seite{display:flex;flex-direction:column;gap:14px}
.vl-fuss{position:sticky;bottom:0;z-index:4;background:var(--bg);border-top:1px solid var(--linie);padding:12px 0;display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media (max-width:760px){.vl-fuss{bottom:calc(64px + env(safe-area-inset-bottom,0px));padding:10px 0}.vl-fuss .knopf{flex:1 1 auto;justify-content:center}.vl-fuss .knopf[style*="margin-right:auto"]{flex:0 0 auto;margin-right:0!important}}
.unten-nav{display:none}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .seite{display:none}
  .nur-gross{display:none}
  main{padding-block:12px calc(84px + env(safe-area-inset-bottom,0px))}
  .innen{gap:14px}
  h1{font-size:20px}
  .sim{flex-wrap:nowrap;padding:6px 10px;font-size:12px}
  .kopf{gap:10px}
  .kopf>div{min-width:0}
  .aktionen{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .aktionen .knopf{flex:1 1 0;min-width:max-content;justify-content:center;padding:10px 8px}
  .aktionen:has(.knopf:nth-child(3)) .knopf.haupt{flex-basis:100%}
  .kacheln{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kachel{padding:10px 12px}
  .kachel .wert{font-size:17px}
  .zwei{grid-template-columns:1fr;gap:14px}
  .block-kopf{padding:10px 12px}
  .block-innen{padding:12px}
  .zeile{padding:12px;min-height:52px}
  .zeile .titel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .suche{max-width:none}
  .reiter{position:sticky;top:env(safe-area-inset-top,0px);background:var(--flaeche);z-index:5;border-radius:var(--r) var(--r) 0 0}
  .reiter{flex-wrap:wrap;row-gap:0}
  .reiter button{padding:10px 10px;flex:1 1 auto}
  /* 16 px in Eingabefeldern: sonst vergrößert das iPhone beim Antippen die ganze Seite */
  .feld input,.feld select,.feld textarea,.suche,.pos input,.pos select{font-size:16px}
  .etikett{overflow-wrap:anywhere}
  .hinweisbox{overflow-wrap:anywhere}
  .eintrag{grid-template-columns:1fr;gap:2px;padding:12px}
  /* Komponentenbaum: Raster aus Kürzel, Text und Plus; schmal eingerückt */
  .raum-kopf{padding:10px 12px}
  .komp{display:grid;grid-template-columns:34px minmax(0,1fr) auto;column-gap:10px;row-gap:3px;align-items:start;padding:9px 10px 9px calc(10px + var(--t,0) * 14px);background-image:linear-gradient(var(--linie),var(--linie));background-size:2px 100%;background-repeat:no-repeat;background-position:calc(var(--t,0) * 14px - 2px) 0}
  .komp[style*="--t:0"]{background-image:none}
  .ast{display:none}
  .komp .kuerzel{grid-column:1;grid-row:1;margin-top:1px}
  .komp .bmk{grid-column:1;grid-row:2;font-size:11px;text-align:center}
  .komp-text{grid-column:2;grid-row:1 / span 2;white-space:normal;padding:0}
  .marken{grid-column:2;grid-row:3;flex-wrap:wrap}
  .marken:empty{display:none}
  .komp-plus{grid-column:3;grid-row:1 / span 3;align-self:center;padding:7px 13px}

  .planzeile{flex-wrap:wrap}
  .plan-knoepfe{width:100%;justify-content:stretch!important}
  .plan-knoepfe .knopf{flex:1;justify-content:center}
  .mangel{grid-template-columns:auto minmax(0,1fr)}
  .mangel>span:last-child{grid-column:2;flex-direction:row!important;align-items:center!important;text-align:left!important}
  .mangel{padding:12px;gap:10px}
  .galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .galerie.klein{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* Dialoge als Vollbild */
  .dialog-grund{padding:0;align-items:stretch}
  .dialog,.dialog.breit{max-width:none;border-radius:0;border:0;min-height:100%}
  .dialog-kopf{position:sticky;top:0;background:var(--flaeche);z-index:2;padding:calc(10px + env(safe-area-inset-top,0px)) max(14px,env(safe-area-inset-right,0px)) 10px max(14px,env(safe-area-inset-left,0px))}
  .dialog-kopf .x{font-size:26px;padding:4px 8px}
  .dialog-innen{padding:14px max(14px,env(safe-area-inset-right,0px)) 14px max(14px,env(safe-area-inset-left,0px));flex:1}
  .dialog-fuss{position:sticky;bottom:0;background:var(--flaeche);z-index:2;padding:10px max(14px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));box-shadow:0 -1px 0 var(--linie)}
  .dialog-fuss .knopf{flex:1 1 auto;justify-content:center;padding:11px 10px}
  .dialog-fuss .knopf[style*="margin-right:auto"]{flex:0 0 auto;margin-right:0!important}
  .dialog-fuss .betr-pfeil{flex:0 0 auto}
  .betr-luecke{display:none}
  .betr-bild img{max-height:60vh}
  .kabel{grid-template-columns:1fr;gap:2px}
  .kabel .etikett{padding-top:0}
  .feld input,.feld select,.feld textarea,.pos input,.pos select,.vorschlag input[type=text],.suche{font-size:16px}
  .reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reihe.eng{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pos{grid-template-columns:minmax(0,1fr) 56px 80px 28px}
  .pos .einheit{display:none}
  .vorschlag{grid-template-columns:26px 58px minmax(0,1fr) 40px}
  .vorschlag select{display:none}
  .blatt{padding:16px;font-size:12px}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .unten-nav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--flaeche);border-top:1px solid var(--linie);padding:4px max(4px,env(safe-area-inset-right,0px)) calc(4px + env(safe-area-inset-bottom,0px)) max(4px,env(safe-area-inset-left,0px));z-index:40}
  .unten-nav button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--leise);padding:6px 0;cursor:pointer;min-height:52px}
  .unten-nav button.an{color:var(--kupfer)}
  .unten-nav svg{width:22px;height:22px}
}
@media (max-width:380px){.reihe{grid-template-columns:1fr}.kacheln .kachel .wert{font-size:15px}}
@media (max-width:760px){.termin{flex-wrap:wrap;padding:0 12px 10px 0}.termin .zeile{flex-basis:100%}.termin>a.knopf{margin-left:12px}.pruefpunkt{align-items:flex-start}}
/* Beleg: Ablegen, Einfügen; Positionen einer Ausgabe; Kategorien */
.beleg-zone{display:flex;gap:10px;align-items:center;flex-wrap:wrap;border:1.5px dashed transparent;border-radius:8px;padding:6px;margin:-6px}
.beleg-zone.drueber{border-color:var(--kupfer);background:var(--kupfer-hell)}
.beleg-vor{width:96px;height:72px;border:1px dashed var(--linie);border-radius:6px;display:grid;place-items:center;overflow:hidden;color:var(--leise);flex:none}
.apos{display:grid;grid-template-columns:minmax(0,1fr) 160px 76px 104px 28px;gap:6px;align-items:center}
.apos input,.apos select{padding:7px 8px;border:1px solid var(--linie);border-radius:6px;background:var(--flaeche);width:100%;min-width:0}
.apos.kopfzeile{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--leise)}
.apos.kopfzeile span:nth-child(4){text-align:right}
.ap-betrag{text-align:right;font-family:var(--zahl)}
.steuerzeile{display:flex;gap:4px 16px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--leise)}
.steuerzeile b{color:var(--text);font-weight:500}
.kat{border-top:1px solid var(--linie)}
.kat:first-child{border-top:0}
.kat summary{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 112px 100px;gap:10px;align-items:center;padding:9px 16px;cursor:pointer;list-style:none}
.kat summary::-webkit-details-marker{display:none}
.kat summary:hover{background:var(--flaeche2)}
.kat summary:focus-visible{outline:2px solid var(--kupfer);outline-offset:-2px}
.kat-balken{height:8px;background:var(--flaeche2);border-radius:99px;overflow:hidden}
.kat-balken span{display:block;height:100%;background:var(--kupfer)}
.kat-teile{padding:2px 16px 10px;font-size:13px}
.kat-teile button{display:flex;width:100%;gap:10px;justify-content:space-between;align-items:baseline;padding:5px 0;border:0;border-top:1px dashed var(--linie);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.kat-teile button:hover{color:var(--kupfer)}
@media (max-width:760px){
  .apos{grid-template-columns:minmax(0,1fr) 72px 96px 28px;padding-top:8px;border-top:1px solid var(--linie)}
  .apos.kopfzeile{display:none}
  .apos .ap-text{grid-column:1/4;grid-row:1}.apos .ap-x{grid-column:4;grid-row:1}
  .apos .ap-kat{grid-column:1;grid-row:2}.apos .ap-ust{grid-column:2;grid-row:2}.apos .ap-betrag{grid-column:3/5;grid-row:2}
  .apos input,.apos select{font-size:16px}
  .kat summary{grid-template-columns:minmax(0,1fr) 96px;padding:10px 12px}
  .kat summary .kat-balken{grid-column:1/3;grid-row:2}
  .kat summary .kat-netto{display:none}
  .kat-teile{padding:2px 12px 10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}