/* Editoren (Angebot, Rechnung) – ergänzt style.css, nutzt dieselben Tokens. */
/* Die Seitenspalte bekommt etwas mehr Breite und darf zwischen 320 und 380 px atmen.
   Vorher stand sie hart auf 320 px; darin wurden Tabellen und mehrspaltige Inhalte zu Streifen gepresst. */
.qlayout{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,23vw,350px);gap:var(--s4);align-items:start}
.qmainCol{min-width:0}
/* Erst wenn wirklich kein Platz ist, rutscht die Spalte unter den Inhalt (vorher schon bei 1100 px). */
@media (max-width:900px){.qlayout{grid-template-columns:minmax(0,1fr)}.qside{position:static;max-height:none;overflow:visible}}
.qside{display:grid;gap:var(--s4);position:sticky;top:calc(var(--top-h) + .8rem);max-height:calc(100vh - var(--top-h) - 1.6rem);overflow:auto;padding-right:2px}
.qside .card{margin-bottom:0}
.qside,.qside .card,.qside .qsummary,.qside .qgrid,.qside label{min-width:0;max-width:100%}
/* WARUM KEIN overflow-x:hidden MEHR:
   Diese Regel hat breiten Inhalt NICHT passend gemacht, sondern still abgeschnitten. Zusammen mit
   flex-wrap:nowrap stauchte sie Text zu schmalen Streifen zusammen (Befund aus dem Betrieb:
   KI-Prüfung im Angebots-Editor). Tabellen scrollen jetzt in ihrem eigenen Behälter (.tablewrap). */
.qside{overflow-x:clip;overflow-y:auto;box-sizing:border-box}
/* Tabellen in der Seitenspalte: eigener Scrollbereich, enger gesetzt, damit sie lesbar bleiben. */
.qside .tablewrap{max-width:100%;min-width:0;overflow-x:auto}
.qside .tablewrap table{font-size:.84rem}
.qside .tablewrap th,.qside .tablewrap td{padding:.3rem .35rem}
/* Feste Spaltenbreiten in Zeilen dürfen in der Seitenspalte schrumpfen. */
.qside .ivnums,.qside .posrow,.qside .qmain{min-width:0;flex-wrap:wrap}
.qside input,.qside select,.qside textarea{min-width:0;max-width:100%;box-sizing:border-box}
.qside .card,.qside dd,.qside .qsummary p,.qside .qsummary div{overflow-wrap:anywhere}
.qheadsum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem .8rem;margin:0 0 .7rem;font-size:.86rem}
.qheadsum dt{color:var(--mut)}.qheadsum dd{margin:0;font-weight:600;min-width:0}
.qheadbtn .btn{width:100%;justify-content:center}
dialog.headdlg{max-width:min(720px,calc(100vw - 1.5rem));max-height:calc(100vh - 2rem);overflow:auto}
.headdlg .dlg input,.headdlg .dlg textarea{margin-top:0}
.headdlg .dlg .qgrid{margin:.8rem 0}
.headdlg .dlg textarea{width:100%}
.qed,.qlayout{max-width:100%}
.qcard{overflow:visible}
.qcardhead{display:flex;align-items:center;gap:.6rem;padding:var(--s4) 1.2rem .4rem}
.qcardhead h2{margin:0}
.qpad{padding:.4rem 1.2rem .8rem}
.small{font-size:.82rem}
.qaddbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
/* Spalten der Positionszeile. Gemessen bei 1440 x 900 ergab die alte Aufteilung (13rem/7.5rem/9.5rem
   fest) für die Bezeichnung nur 140 px, obwohl der Text 386 px braucht – das Feld, in dem gearbeitet
   wird, war das kleinste. Jetzt bekommt es den Rest der Breite; die Zahlenspalten sind enger gesetzt
   und die Zeilenaktionen liegen als eigene schmale Spalte rechts außen. */
.qcolhead{display:grid;grid-template-columns:minmax(0,1fr) 9rem 5.5rem 6rem 6.5rem;gap:var(--s2);padding:.45rem 1rem;background:var(--surface-2);border-block:1px solid var(--line);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700}
.qlist{display:block}
.qrow{--depth:0;position:relative;border-bottom:1px solid var(--line);padding:.55rem 1rem .55rem calc(1rem + var(--depth)*1.4rem);background:var(--surface)}
.qrow:hover{background:color-mix(in srgb,var(--pri) 3%,var(--surface))}
.qrow:focus-within{background:var(--pri-soft)}
.qrow.k-group{background:var(--surface-2);border-left:3px solid var(--pri)}
.qrow.k-group .qtitle{font-weight:700}
.qrow.k-alternative,.qrow.k-optional{border-left:3px dashed var(--line-strong)}
.qrow.k-text .qtitle{font-style:italic}
.qmain{display:grid;grid-template-columns:minmax(0,1fr) 9rem 5.5rem 6rem 6.5rem;gap:var(--s2);align-items:center}
/* Lose und Textzeilen haben keine Mengen-/Preisspalten; Summe und Aktionen bleiben trotzdem in denselben
   Spalten wie bei den Positionen – sonst springt die Summenspalte beim Scrollen. */
.qrow.k-group .qmain,.qrow.k-text .qmain{grid-template-columns:minmax(0,1fr) 9rem 5.5rem 6rem 6.5rem}
.qrow.k-group .qs,.qrow.k-text .qs{grid-column:4/5}
.qrow.k-group .qacts,.qrow.k-text .qacts{grid-column:5/6}
.qmain>:first-child{min-width:0}
.qmain .qtitle{width:100%}
.qmain .grip{cursor:grab;margin-left:-.4rem}
.qmain>:nth-child(1){display:flex;align-items:center;gap:.4rem}
.qnr{min-width:1.7rem;color:var(--mut);font-variant-numeric:tabular-nums;font-size:.82rem}
/* Positionsnummer laut Ausschreibung (ÖNORM/LB-H) vor der fortlaufenden Nummer */
.qnr b{font-weight:700;color:var(--fg)}
.qnr small{font-size:.72rem}
/* Bieterlücken: Hinweis an der Zeile und die Eingabefelder in den Details */
.qgap{margin-left:.1rem;font-size:.74rem;white-space:nowrap}
.qgap:empty{display:none}
.qgap.offen{color:var(--warn);font-weight:650}
.qgapfs .qgrid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.qq{display:grid;grid-template-columns:1fr 5rem;gap:.35rem}
.qp input,.qq input{width:100%;text-align:right}
input.num{text-align:right;font-variant-numeric:tabular-nums}
.qs{display:flex;flex-direction:column;align-items:flex-end;min-width:0}
/* Trennlinie im zusammengelegten Schritt „Prüfen & anlegen" (Zusammenfassung über der Kalkulationsübersicht). */
.qsep{margin-top:var(--s4);border-top:1px solid var(--line);padding-top:var(--s4)}
.qsum{font-weight:700;font-variant-numeric:tabular-nums}
.qsum.excluded{color:var(--mut);text-decoration:line-through}
.qsub{text-align:right}
/* Zeilenaktionen stehen fest in der rechten Spalte. Vorher erschienen sie erst beim Überfahren und
   vergrößerten dabei die Zeile um rund 30 px – der Praxistest brauchte dafür einen Warte-Workaround,
   und auf Tastatur/Touch waren sie kaum erreichbar. */
.qacts{display:flex;gap:.1rem;align-items:center;justify-content:flex-end;flex-wrap:nowrap;margin:0;opacity:1;max-height:none;overflow:visible}
/* Knöpfe der Zeile kompakt halten: Die Bezeichnungsspalte soll den Platz bekommen, nicht die Aktionen. */
.qacts .det-btn{padding:.25rem .45rem;font-size:.8rem}
.qacts button.icon-btn{width:22px;min-width:22px;padding:.15rem}
/* Seltene, strukturelle Aktionen (verschieben, ein-/ausrücken, duplizieren) – sichtbar in „Details". */
.qactsmore{margin-top:var(--s2);border-top:1px dashed var(--line);padding-top:var(--s2);align-items:center}
@media (hover:none){.qacts button.icon-btn{width:36px;min-height:36px}}
.qacts .det-btn{margin-left:0}
.qacts .det-btn.on .ic{transform:rotate(180deg)}
.qacts button.del:hover{color:var(--bad)}
.qerr{min-height:0}
.qerr:empty{display:none}
.qdetail{margin-top:.6rem;padding:.8rem;border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);display:grid;gap:.8rem}
.qdetail[hidden]{display:none}
.qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem}
.qgrid label,.qdetail label,.qside label{display:flex;flex-direction:column;gap:.3rem;font-size:.82rem;font-weight:600}
.qgrid label.check,.qdetail label.check{flex-direction:row;align-items:center;gap:var(--s2);font-weight:500}
.qgrid label.wide{grid-column:1/-1}
.qside .qgrid{grid-template-columns:1fr 1fr}
.qside .qgrid label.wide{grid-column:1/-1}
.qfs{border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .8rem;margin:0}
.qfs legend{padding:0 .3rem;font-weight:650;font-size:.84rem}
.qfs summary{cursor:pointer;font-weight:650;font-size:.88rem}
.qfs[open]>summary{margin-bottom:.6rem}
.qep{margin:.3rem 0 0}
.qrow.marked{background:color-mix(in srgb,var(--pri) 10%,var(--surface))}
.qmark{width:1.15rem;height:1.15rem;accent-color:var(--pri);flex:none}
.qfold{flex:none}
.qbar{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.65rem 1rem;background:var(--pri-soft);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3}
.qbar .qbar-n{font-weight:700;margin-right:.35rem}
.qbar button{min-height:2.4rem}
.qfilter{display:flex;flex-direction:row;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600}
.qtree button{display:block;width:100%;text-align:left;background:none;border:0;padding:.28rem .4rem;border-radius:6px;cursor:pointer}
.qtree button:hover,.qtree button:focus{background:var(--pri-soft)}
.qtree [data-depth="1"]{padding-left:1rem}
.qtree [data-depth="2"]{padding-left:1.8rem}
.qtree [data-depth="3"]{padding-left:2.6rem}
.qrow.dragging{opacity:.45}
.qrow.over-before{box-shadow:inset 0 3px 0 var(--pri)}
.qrow.over-after{box-shadow:inset 0 -3px 0 var(--pri)}
.qrow.over-into{outline:2px dashed var(--pri);outline-offset:-3px}
.qempty{padding:2.2rem var(--s4)}
.qsummary{display:grid;gap:.35rem;font-variant-numeric:tabular-nums}
.sumrow{display:flex;justify-content:space-between;gap:var(--s4)}
.sumrow.strong{border-top:1px solid var(--line);padding-top:.35rem;margin-top:.15rem}
.sumrow.total{border-top:2px solid var(--fg);padding-top:.45rem;margin-top:.2rem;font-size:1.2rem}
.costs{margin-top:var(--s2);font-size:.9rem}.costs summary{cursor:pointer;color:var(--mut)}
.qsumcard{border-color:var(--pri-line)}
.qbanner{padding:.6rem .9rem;border:1px solid var(--bad);border-radius:var(--r-sm);background:var(--bad-bg);margin:0 0 var(--s4)}
.qundo{position:fixed;left:50%;transform:translateX(-50%);bottom:1.2rem;z-index:80;display:flex;gap:.8rem;align-items:center;padding:.6rem .9rem;border-radius:var(--r);background:var(--fg);color:var(--bg);box-shadow:var(--shadow-lg)}
.qundo[hidden]{display:none}
.qundo button{background:transparent;color:inherit;border-color:currentColor}
.qcust{display:flex;gap:.6rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.qbadges{display:inline-flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.qlock{display:inline-flex;align-items:center;gap:var(--s1)}
.qmobbar{display:none}
dialog.dlg-wide{max-width:min(760px,calc(100vw - 1.5rem))}
dialog.dlg-wide:has(.pdfdlg){max-width:min(1000px,calc(100vw - 1rem))}
.pdfdlg{padding:var(--s4)}
.pdfhead{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;margin-bottom:.6rem}
.pdfhead h2{margin:0}
.pdfframe{width:100%;height:min(72vh,820px);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper)}
.pdffoot{margin:var(--s2) 0 0}
.catlist{list-style:none;margin:.6rem 0 0;padding:0;max-height:46vh;overflow:auto;display:grid;gap:var(--s1)}
.catitem{all:unset;box-sizing:border-box;display:flex;justify-content:space-between;gap:var(--s4);width:100%;padding:.6rem .7rem;border-radius:var(--r-sm);cursor:pointer;border:1px solid var(--line)}
.catitem:hover,.catitem:focus-visible{background:var(--pri-soft);border-color:var(--pri-line)}
.catitem:focus-visible{outline:2px solid var(--pri)}
.dlg-wide .dlg input[type=search]{width:100%;margin:var(--s2) 0}

/* Rechnungs-Editor */
.iv-source{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem;margin:.6rem 0}
.iv-tile{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:.35rem;padding:var(--s4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow-sm)}
.iv-tile:hover,.iv-tile:focus-visible{border-color:var(--pri-line);background:var(--pri-soft)}
.iv-tile:focus-visible{outline:2px solid var(--pri)}
.iv-tile[aria-pressed=true]{border-color:var(--pri);background:var(--pri-soft)}
.iv-tile[disabled]{opacity:.5;cursor:not-allowed}
.iv-tile b{font-size:1rem}.iv-tile span{color:var(--mut);font-size:.88rem}
.ivwiz .card{margin-bottom:var(--s4)}
.ivpick{max-width:560px;margin-top:.6rem}
.ivopt{margin-top:var(--s4)}
.ivopt .wide{grid-column:1/-1}
.ivq{display:grid;grid-template-columns:1fr 8rem;gap:.6rem;align-items:center;font-weight:500;padding:var(--s1) 0}
.ivprev{min-height:1.2rem}
.ivrow{display:grid;grid-template-columns:2.4rem minmax(0,1fr) 8rem 2.4rem;gap:.4rem .6rem;align-items:start;padding:.65rem 1.2rem;border-bottom:1px solid var(--line);background:var(--surface)}
.ivrow.k-group{background:var(--surface-2);font-weight:700;align-items:center}
.ivrow.k-group .ivt{grid-column:2/-1}
.ivrow.k-text{grid-template-columns:2.4rem minmax(0,1fr) 2.4rem}
.ivrow.k-discount .qtitle,.ivrow.k-deduction .qtitle{color:var(--fg)}
/* Gewählte Rechnungszeile: neue Zeilen entstehen direkt darunter (Position, Rabatt, Textzeile, Katalog). */
.ivrow.iv-sel{box-shadow:inset 3px 0 0 0 var(--pri);background:color-mix(in srgb,var(--pri) 6%,var(--surface))}
.ivt{min-width:0;display:grid;gap:.3rem}
.ivtitle{display:flex;gap:.6rem;align-items:center}
.ivtitle input{flex:1}
.ivtitle small{white-space:nowrap}
.ivdet summary{cursor:pointer;color:var(--mut);font-size:.82rem}
.ivdet textarea{width:100%;margin-top:.3rem}
.ivsum{display:flex;flex-direction:column;align-items:flex-end;padding-top:.15rem}
.ivnet{font-variant-numeric:tabular-nums;font-size:1rem}
.ivl{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);font-weight:700}
.ivnums{grid-column:2/3;display:grid;grid-template-columns:5.5rem 5.5rem 7.5rem 5rem 5rem;gap:var(--s2)}
.ivc{display:flex;flex-direction:column;gap:.2rem;min-width:0}
.ivc input,.ivc select{width:100%}
.ivc input.num{text-align:right}
.ivrow .del:hover{color:var(--bad)}
.ivrow.k-text .ivnums,.ivrow.k-group .ivnums{display:none}
.ivwarn{padding:.6rem .9rem;border:1px solid var(--warn);background:var(--warn-bg);color:var(--warn);border-radius:var(--r-sm);margin:.6rem 0}
.ivlock{padding:.6rem .9rem;border:1px solid var(--info);background:var(--info-bg);color:var(--info);border-radius:var(--r-sm);margin:.6rem 0}

/* Der Umbruch auf eine Spalte steht oben bei .qlayout (900 px) – hier bewusst nicht doppelt. */
@media (max-width:900px){
  .hide-sm{display:none}
  .qrow{padding:.7rem .8rem}
  .qmain{grid-template-columns:1fr 1fr;gap:var(--s2)}
  .qmain>:first-child{grid-column:1/-1}
  .qrow.k-group .qmain,.qrow.k-text .qmain{grid-template-columns:1fr auto}
  .qrow.k-group .qmain>:first-child,.qrow.k-text .qmain>:first-child{grid-column:1/-1}
  .qs{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:baseline}
  .qq{grid-template-columns:1fr 5.4rem}
  .qacts{grid-column:1/-1;justify-content:flex-end;margin-top:var(--s1)}
  .qacts button.icon-btn{width:40px;min-height:40px}
  .qcardhead,.qpad{padding-inline:.8rem}
  .qmobbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:35;padding:.55rem .9rem calc(.55rem + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line-strong);box-shadow:var(--shadow-up);justify-content:space-between;align-items:center;gap:var(--s4)}
  .qmobbar div{display:flex;flex-direction:column;line-height:1.15}
  .qmobbar b{font-size:1.15rem;font-variant-numeric:tabular-nums}
  .qside .qgrid{grid-template-columns:1fr}
  .qundo{bottom:4.6rem;max-width:calc(100vw - 1rem)}
  .ivrow{grid-template-columns:2rem minmax(0,1fr) auto;padding:.7rem .8rem}
  .ivrow>.ivsum{grid-column:2/3;flex-direction:row;justify-content:space-between;align-items:baseline;order:3}
  .ivrow>.del{grid-column:3;grid-row:1}
  .ivnums{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr;order:4}
  .ivrow>.ivsum{grid-column:1/-1}
  .ivrow.k-text{grid-template-columns:2rem minmax(0,1fr) auto}
  .ivrow.k-group .ivt{grid-column:2/-1}
  dialog.dlg-wide{max-width:calc(100vw - .6rem)}
  .pdfframe{height:62vh}
}
@media print{.qside,.qacts,.qaddbar,.qmobbar,.qundo{display:none!important}}
/* Kleine Fenster: zweispaltige Zeilen untereinander legen, statt den Text zu quetschen.
   .ivq = Zeile „Bezeichnung … Wertfeld“ im Rechnungseditor; .qheadsum = Kopfzeilen-Summen; .qq = Menge/Einheit. */
@media (max-width:620px){
  .ivq{grid-template-columns:1fr;gap:.2rem;align-items:start}
  .qheadsum{grid-template-columns:1fr;gap:.1rem}
  .qq{grid-template-columns:1fr 5.4rem}
}
/* Die Spaltenüberschrift der Positionsliste passt auf schmalen Ansichten nicht (vier feste Spalten).
   Sie trug bisher nur die Hilfsklasse hide-sm; hier ausdrücklich, damit die Absicht erkennbar bleibt. */
@media (max-width:900px){.qcolhead{display:none}}
/* Datenübernahme */
.mapt{width:100%;border-collapse:collapse}.mapt th,.mapt td{padding:.3rem var(--s2);text-align:left;vertical-align:top;border-bottom:1px solid var(--line-legacy)}
.mapt select{min-width:12rem;max-width:100%}.small{font-size:.8rem}
progress#di-progress{width:100%;height:1rem}

/* Eingangsrechnung: Positionen */
#si-lines input.si-desc{width:100%}#si-lines input.si-qty{width:5.5rem}#si-lines input.si-price{width:6.5rem}
#si-lines td{padding:.2rem .3rem}

/* KI-Angebotshilfe: Positionen als senkrechte Blöcke.
   In der 320–380 px breiten Seitenspalte ist eine Tabelle mit vier Spalten nicht lesbar
   (der Text wird zu Streifen, dazu ein Schieberegler). Blöcke nutzen die Breite voll aus. */
.aiq-poslist{display:grid;gap:var(--s2);margin-top:.6rem}
.aiq-pos{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--r-sm);padding:.45rem .6rem;background:var(--surface)}
.aiq-pos.k-red{border-left-color:var(--bad)}
.aiq-pos.k-yellow{border-left-color:var(--warn)}
.aiq-pos.k-green{border-left-color:var(--ok)}
.aiq-pos-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.aiq-pos-title{font-weight:600;overflow-wrap:anywhere}
.aiq-find{margin:.35rem 0 0;padding-left:1.05rem;font-size:.85rem}
.aiq-find li{margin:.15rem 0;overflow-wrap:anywhere}

/* Kalkulationsblatt */
dialog.dlg-wide:has(.cs-dlg){max-width:min(1250px,calc(100vw - 1rem));width:100%}
.cs-scroll{overflow-x:auto;max-width:100%}
.cs-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.cs-tbl th,.cs-tbl td{padding:var(--s1) .4rem;border-bottom:1px solid var(--line-legacy);text-align:left;vertical-align:middle;white-space:nowrap}
.cs-tbl th.n,.cs-tbl td.n{text-align:right}
.cs-tbl thead th{font-size:.78rem;color:var(--mut-legacy);font-weight:600}
.cs-tbl tbody th[scope=row]{font-weight:600}
.cs-strong{font-weight:700}
.cs-in{padding:var(--s1) .35rem;min-width:0;font:inherit}
.cs-in.num{text-align:right}
.cs-in.w5{width:4.6rem}.cs-in.w6{width:5.6rem}.cs-in.w16{width:16rem}
.cs-skip td{opacity:.5}.cs-sub td{background:var(--bad-tint)}
.cs-act{white-space:nowrap}.cs-act .icon-btn{padding:.2rem}.cs-flip{display:inline-block;transform:rotate(180deg);line-height:0}
.cs-addbar{display:flex;gap:var(--s2);align-items:center;margin:.3rem 0 var(--s2);flex-wrap:wrap}
.cs-addslot{display:inline-block;min-width:16rem}
.cs-sum{max-width:34rem}
.cs-posbox{display:inline-block;margin:0 .6rem}.cs-poslist{max-height:14rem;overflow:auto;padding:.3rem}.cs-poslist label{display:block}
.cs-scope{align-items:center;flex-wrap:wrap}

/* ---------- Hülle: Navigation nach Bereichen, Filter, Zustände (task-7) ---------- */
/* Seitenleiste: der Navigationsbereich scrollt für sich – bei vielen Bereichen wird nichts abgeschnitten. */
.side nav{min-height:0;overscroll-behavior:contain;scrollbar-gutter:stable;padding-bottom:1.3rem}
.side .navfilter{flex:none;display:flex;align-items:center;gap:var(--s2);padding:.1rem .85rem .45rem;color:var(--mut)}
.side .navfilter .ic{flex:none}
.side .navsearch{width:100%;min-width:0;padding:.4rem .6rem;font-size:.86rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);color:var(--fg)}
.side .navsearch:focus-visible{border-color:var(--pri)}
.navgroup{margin:.15rem 0}
.side .navgroup-head{display:flex;align-items:center;gap:.55rem;width:100%;padding:var(--s2) .65rem;margin:0;border:0;background:transparent;color:var(--fg);font:inherit;font-size:.79rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;cursor:pointer;border-radius:var(--r-sm);text-align:left}
.side .navgroup-head:hover{background:var(--surface-2)}
.side .navgroup-head .navgroup-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .navgroup-head .navgroup-count{font-size:.7rem;font-weight:600;color:var(--mut);background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:0 .38rem;font-variant-numeric:tabular-nums}
.side .navgroup-head .ic:last-child{transition:transform .15s ease;color:var(--mut)}
.side .navgroup-head[aria-expanded="false"] .ic:last-child{transform:rotate(-90deg)}
.side .navgroup-body{padding-bottom:.2rem}
.side .navgroup-body[hidden]{display:none}
.side .navgroup-body a{padding-left:1.05rem}
.side .navgroup-body a .ic{flex:none;color:var(--mut)}
.side .navgroup-body a.active .ic{color:var(--link)}
.side .navnone{margin:.7rem .6rem;color:var(--mut);font-size:.85rem;line-height:1.45}
.side .sidenote{display:flex;gap:var(--s2);align-items:flex-start;margin:.35rem .7rem;padding:var(--s2) .6rem;border:1px solid var(--warn,var(--line-strong));border-radius:var(--r-sm);background:var(--warn-bg,var(--surface-2));font-size:.78rem;line-height:1.35;flex:none}
.side .sidenote .ic{flex:none;margin-top:.1rem;color:var(--warn,var(--fg))}
.side .sidehint{display:flex;gap:.85rem;flex-wrap:wrap;padding:.3rem .95rem .15rem;font-size:.72rem;color:var(--mut);flex:none}
.side .sidehint kbd{font-size:.68rem}
.side nav a:focus-visible,.side .navgroup-head:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}

/* Dashboard: Aufgabenliste und Warnhinweis */
.warnbanner{display:flex;align-items:center;gap:.8rem;border-left:4px solid var(--bad);background:var(--bad-bg)}
.warnbanner .ic{color:var(--bad);flex:none}
.warnbanner>div{min-width:0}.warnbanner b{display:block}
.warnbanner .sp{flex:1}
.tasklist{list-style:none;margin:0;padding:0}
.tasklist .task{display:flex;align-items:center;gap:.8rem;padding:.65rem .1rem;border-top:1px solid var(--line)}
.tasklist .task:first-child{border-top:0}
.task .task-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--pri-soft);color:var(--link);flex:none}
.task.bad .task-ic{background:var(--bad-bg);color:var(--bad)}
.task.warn .task-ic{background:var(--warn-bg);color:var(--warn)}
.task.ok .task-ic{background:var(--ok-bg);color:var(--ok)}
.task .task-txt{min-width:0;display:flex;flex-direction:column;gap:.1rem}
.task .task-txt .muted{font-size:.85rem}
.task .sp{flex:1}
@media (max-width:620px){.tasklist .task{flex-wrap:wrap}.task .task-txt{flex:1 1 100%}}

/* ---------------------------------------------------------------
   Popup-Fenster (task-1): Das Fenster bleibt als Ganzes im Bild.
   Die Überschrift steht oben und die Aktionsknöpfe unten fest,
   dazwischen rollt nur der Inhalt (.dlg-body) – kein doppelter
   Schiebe-Regler am Fensterrand.
   --------------------------------------------------------------- */
dialog[open]{max-height:calc(100vh - 2.5rem);max-height:calc(100dvh - 2.5rem)}
/* Fenster mit erkannter Fläche (.dlg-framed setzt openDialog in components.js) */
dialog[open]:has(>.dlg-framed){display:flex;flex-direction:column;overflow:hidden;padding:0}
dialog[open]>.dlg-framed{flex:1 1 auto;min-height:0;min-width:0;max-height:none;overflow:hidden;display:flex;flex-direction:column;padding:0}
.dlg-framed>*{flex:0 0 auto}
.dlg-framed>.dlg-body{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;padding:1.3rem 1.4rem}
/* Der Inhalt darf waagrecht nicht aus dem Fenster laufen: enge Breiten schrumpfen, statt zu schieben */
.dlg-framed>.dlg-body table{max-width:100%}
.dlg-framed>.dlg-body th,.dlg-framed>.dlg-body td{overflow-wrap:anywhere}
.dlg-framed>.dlg-body input,.dlg-framed>.dlg-body select,.dlg-framed>.dlg-body textarea{max-width:100%}
/* Tabellenköpfe dürfen im Dialog umbrechen (in Listen bleiben sie einzeilig) */
.dlg-tablewrap th{white-space:normal;overflow-wrap:anywhere}
.dlg-tablewrap{max-width:100%;overflow-x:auto}
.dlg-framed>h1,.dlg-framed>h2,.dlg-framed>h3,.dlg-framed>h4,.dlg-framed>.pdfhead{padding:1.25rem 1.4rem .35rem;margin:0}
.dlg-framed>h1~.dlg-body,.dlg-framed>h2~.dlg-body,.dlg-framed>h3~.dlg-body,.dlg-framed>h4~.dlg-body,.dlg-framed>.pdfhead~.dlg-body{padding-top:.4rem}
.dlg-framed>.acts,.dlg-framed>.pdffoot{padding:.9rem 1.4rem 1.25rem;margin:0;border-top:1px solid var(--line);background:var(--surface)}
.dlg-framed>.acts{flex-wrap:wrap}
.dlg-framed>.pdffoot{border-top:0;padding:.55rem 1.4rem var(--s4);color:var(--mut)}
.dlg-framed>.pdfhead{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:var(--s3)}
.dlg-framed>.pdfhead h2{margin:0}
/* PDF-Vorschau: Das Blatt füllt die verfügbare Höhe, statt einen eigenen Regler zu erzeugen */
.dlg-framed.pdfdlg>.dlg-body{display:flex;overflow:hidden;padding:var(--s3) .8rem 0}
.dlg-framed.pdfdlg .pdfframe{flex:1 1 auto;height:min(72vh,820px);min-height:12rem}
dialog.dlg-wide[open]:has(>.dlg-framed.pdfdlg){max-width:min(1000px,calc(100vw - 1rem))}
dialog.dlg-wide[open]:has(>.dlg-framed.cs-dlg){max-width:min(1250px,calc(100vw - 1rem));width:100%}
dialog.dlg-wide[open]:has(>.dlg-framed.tpl-dlg){max-width:min(820px,calc(100vw - 1rem))}
/* Beständiger Kopfdaten-Dialog (editor-kit.js): Kopf bleibt beim Rollen stehen */
dialog.headdlg[open]{display:flex;flex-direction:column;max-height:calc(100dvh - 2rem);overflow:hidden;max-width:min(720px,calc(100vw - 1.5rem))}
dialog.headdlg[open]>.dlg{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding-top:0}
.headdlg .pdfhead{position:sticky;top:0;z-index:2;background:var(--surface);padding:1.2rem 0 .6rem;margin:0;border-bottom:1px solid var(--line)}
/* Handybreite: formatfüllend, nichts wird abgeschnitten */
@media (max-width:620px){
  dialog[open]{max-width:none;width:calc(100vw - .5rem);max-height:calc(100dvh - .5rem);margin:auto}
  .dlg-framed>h1,.dlg-framed>h2,.dlg-framed>h3,.dlg-framed>h4,.dlg-framed>.pdfhead{padding:var(--s4) .9rem .3rem}
  .dlg-framed>.dlg-body{padding:.8rem .7rem}
  .dlg-tablewrap th,.dlg-tablewrap td{padding:.45rem .4rem;font-size:.85rem;letter-spacing:0}
  .dlg-framed>.dlg-body input{min-width:0}
  .dlg-framed .st-lines input.qty{width:4.5rem}
  .dlg-framed>.acts,.dlg-framed>.pdffoot{padding:.8rem .9rem var(--s4)}
  .dlg-framed>.acts button{flex:1 1 auto;justify-content:center}
  dialog.dlg-wide[open]:has(>.dlg-framed.cs-dlg){max-width:calc(100vw - .5rem)}
}
@media (max-height:480px){.dlg-framed>.pdfhead>.sp{display:none}}

/* ---------------------------------------------------------------
   Rechtsklick-Menü auf internen Verweisen (context-menu.js)
   --------------------------------------------------------------- */
.ctxmenu{position:fixed;z-index:130;min-width:15rem;max-width:min(26rem,calc(100vw - 1rem));padding:.3rem;background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.ctxmenu-title{padding:.45rem .6rem .3rem;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctxmenu button{display:flex;width:100%;align-items:center;gap:.6rem;padding:.55rem .6rem;border:0;background:transparent;color:var(--fg);font:inherit;font-size:.93rem;text-align:left;border-radius:var(--r-sm);cursor:pointer}
.ctxmenu button:hover{background:var(--surface-2)}
.ctxmenu button:focus-visible{outline:2px solid var(--pri);outline-offset:-2px;background:var(--pri-soft);color:var(--link)}
.ctxmenu button .ic{flex:none;color:var(--mut)}
.ctxmenu .ctxmeta{padding:.35rem .6rem var(--s1);margin-top:var(--s1);border-top:1px solid var(--line);font-size:.72rem;color:var(--mut);overflow-wrap:anywhere}

/* Seitenzustände und Befehlspalette */
.page-loading{display:block}
.pagehead-main{min-width:0}
.pal-list li.pal-group{position:sticky;top:0;z-index:1;background:var(--surface);margin:.55rem .7rem .15rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);font-weight:700}
.pal-list li.opt:focus-visible{outline:2px solid var(--pri);outline-offset:-2px}
.pal-count{font-variant-numeric:tabular-nums}
.pal-empty b{display:block;color:var(--fg)}
.pal-empty p{margin:.35rem 0 0;max-width:46ch;margin-inline:auto}
#root>.boot{margin:0;padding:var(--s6);color:var(--boot-fg);font:14px/1.5 system-ui,sans-serif}
@media (prefers-color-scheme:dark){#root>.boot{color:var(--boot-fg-dark)}}

/* ---------------------------------------------------------------
   „Angebot aus einem Satz“ (pages-quote-assistant.js, /quotes/assistant)
   Die Seite nutzt die volle Breite (nicht die Seitenspalte). Bewusst
   einspaltige Listen statt mehrspaltiger Raster: in schmalen Fenstern
   gibt es dann nichts zu quetschen und keinen waagerechten Schieberegler.
   Keine Inline-Stile – die Oberfläche läuft unter strikter CSP.
   --------------------------------------------------------------- */
.qas-sentence{width:100%;min-height:4.5rem;font:inherit;box-sizing:border-box;resize:vertical}
.qas-hits{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:.4rem}
.qas-hit{display:flex;gap:.6rem;align-items:flex-start;padding:var(--s2) .6rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer}
.qas-hit:hover{background:var(--surface-2)}
.qas-hit:focus-within{outline:2px solid var(--pri);outline-offset:-2px}
.qas-hit input{flex:none;margin:.15rem 0 0}
.qas-hit-body{min-width:0;display:block;overflow-wrap:anywhere}
.qas-hit-body small{display:block;margin-top:.1rem}
.qas-price{display:block;margin-top:.1rem;font-variant-numeric:tabular-nums}
.qas-pos-qty{width:6.5rem;max-width:100%}
.qas-check{display:inline-flex;align-items:center;gap:.35rem;padding:.1rem var(--s2);border:1px solid var(--warn);border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.78rem;font-weight:600;white-space:normal}
.qas-hint{margin:.45rem 0 0;padding-left:1.05rem}
.qas-hint li{margin:.2rem 0;overflow-wrap:anywhere}
#qa-totals{margin-top:.8rem;max-width:32rem}
#qa-positions .tablewrap{margin-top:var(--s2)}
/* Arbeitszeit in der Positionsvorschau („Angebot aus einem Satz“): die Stunden-Spalte bleibt
   einzeilig lesbar mit Ziffern gleicher Breite und bricht in schmalen Fenstern um;
   der Stundensatz steht in eigener Spalte. Keine Inline-Stile (strikte CSP). */
.qas-hours{display:block;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.qas-hours b{font-weight:600}
/* Summenzeile der Arbeitszeit: gleiche Optik wie die Geldsummen in #qa-totals (.qsummary/.sumrow). */
#qa-hours{margin-top:.8rem;max-width:32rem}