/* WebCockpit Master – Grundgestaltung aus dem Promundius-Cockpit; Designs liegen darüber (assets/themen/*.css) */
:root{
  --ink:#16212F; --ink-2:#48556A; --bg:#F2F4F6; --surface:#FFFFFF;
  --line:#DDE3EA; --line-2:#EDF0F4;
  --ok:#0E7C66; --ok-bg:#E4F2EE;
  --warn:#C0561B; --warn-bg:#FBEDE3;
  --akzent:#1F3A5F;
  --k1:#0E7C66; --k2:#2C5F8A; --k3:#7A5FA0; --k4:#B0813B;
  --intern:#8A94A3; --fahrt:#C2C9D3;
  --radius:8px;
  font-size:16px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{min-height:100%}
body{
  font-family:"Segoe UI", system-ui, -apple-system, sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.45;
  font-variant-numeric:tabular-nums;
}
button{font:inherit; cursor:pointer}
input,select,textarea{font:inherit; color:var(--ink)}
input:not([type=checkbox]):not([type=color]),select,textarea{border:1px solid var(--line); border-radius:6px; padding:.4rem .5rem; background:#fff}
a{color:var(--akzent)}
code{font-size:.85em; background:var(--line-2); padding:.05rem .3rem; border-radius:4px}
form.inline{display:inline}
.nowrap{white-space:nowrap}
.grow{flex:1}

/* ---------- Rahmen ---------- */
.top{display:flex; align-items:center; gap:1rem; flex-wrap:wrap; background:var(--kopf,#008391);   /* Farbe wählt der Kunde: Einstellungen → Darstellung */ color:#fff; padding:.55rem 1rem}
.brand{font-weight:700; letter-spacing:.14em; font-size:.95rem}
.brand small{display:block; font-weight:400; letter-spacing:.02em; font-size:.72rem; opacity:.75}
.brand.dunkel{color:var(--akzent); margin-bottom:1.2rem}
.top .spacer{flex:1}
.userchip{font-size:.85rem; background:var(--kopf-2,#006B77); border-radius:999px; padding:.28rem .8rem}
.mock-hint{font-size:.72rem; background:#C0561B; color:#fff; border-radius:4px; padding:.1rem .5rem}   /* Schrift immer weiß: in „Rot & Weiß“ erbte sie --ink, 2,5:1 (Audit 11.11.2026); weiß 4,6:1 */
.menuknopf{display:none; background:none; border:none; color:#fff; font-size:1.3rem}
.top .btn.ghost.hell{color:#fff; border-color:var(--kopf-3,#4FA9B3)}
.top .btn.ghost.hell:hover{background:var(--kopf-2,#006B77)}

.layout{display:flex; min-height:calc(100vh - 56px)}
nav.side{width:215px; flex:none; background:var(--surface); border-right:1px solid var(--line); padding:.6rem 0 1rem; display:flex; flex-direction:column}
nav.side a{display:block; text-decoration:none; padding:.5rem 1.1rem; color:var(--ink-2); font-size:.92rem; border-left:3px solid transparent}
nav.side a:hover{background:var(--line-2)}
nav.side a.active{color:var(--ink); font-weight:600; border-left-color:var(--akzent); background:var(--line-2)}
nav.side .navcap{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); font-weight:700; padding:1rem 1.1rem .3rem}   /* Gruppen fetter, damit sie auffallen (Christian, 26.10.2026) */
nav.side .release{margin-top:auto; padding:1.2rem 1.1rem 0; font-size:.7rem; color:var(--ink-2)}
nav.side .release.warnung{color:var(--warn); margin-top:.3rem; padding-top:0}
/* Versionsnummer führt zur Historie (wie MzW, Christian 02.11.2026) – sieht aus wie bisher, nur anklickbar */
nav.side .release a{display:inline; padding:0; border:0; font-size:inherit; color:inherit}
nav.side .release a:hover{background:none; text-decoration:underline}
.badge{display:inline-block; background:var(--warn); color:#fff; border-radius:999px; font-size:.7rem; padding:0 .45rem; margin-left:.3rem; font-weight:600}
main{flex:1; padding:1.4rem clamp(1rem,3vw,2.2rem); max-width:1180px; min-width:0}
h1{font-size:1.35rem; margin-bottom:.2rem}
.sub{color:var(--ink-2); font-size:.9rem; margin-bottom:1.2rem}
.sub.inline{display:inline; margin:0 0 0 .6rem; font-weight:400; font-size:.85rem}
h2{font-size:1.02rem; margin:1.4rem 0 .6rem}
.kopfzeile{display:flex; justify-content:space-between; align-items:center; gap:.8rem; flex-wrap:wrap; margin-bottom:.4rem}
.blaettern{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.knopfzeile{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; margin-bottom:1rem}
.zweispaltig{display:grid; grid-template-columns:1fr 1fr; gap:1rem}

.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; margin-bottom:1rem}
.tabelle-scroll{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:.9rem}
th{text-align:left; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); padding:.45rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:.5rem .6rem; border-bottom:1px solid var(--line-2); vertical-align:middle}
tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right; white-space:nowrap}
td.aktionen{white-space:nowrap; text-align:right}
td.alt{color:var(--ink-2); text-decoration:line-through; text-decoration-color:rgba(0,0,0,.2)}
tr.inaktiv td{opacity:.55}
.btn{display:inline-block; text-decoration:none; background:var(--akzent); color:#fff; border:1px solid var(--akzent); border-radius:6px; padding:.45rem .95rem; font-size:.88rem; line-height:1.3}
.btn:hover{background:var(--akzent-dunkel,#2C4A73)}   /* Token, damit jedes Design seinen Ton für „Zeigen darauf“ hat (Master) */
.btn.ghost{background:none; color:var(--akzent); border:1px solid var(--line)}
.btn.ghost:hover{background:var(--line-2)}
.btn.small{padding:.25rem .6rem; font-size:.8rem}
.btn:disabled{opacity:.45; cursor:default}
.linkknopf{background:none; border:none; color:var(--akzent); text-decoration:underline; font-size:.8rem; padding:0 .2rem}
.pill{display:inline-block; font-size:.74rem; padding:.12rem .55rem; border-radius:999px; white-space:nowrap; border:1px solid transparent}
.pill.ok{background:var(--ok-bg); color:var(--ok)}
.pill.warn{background:var(--warn-bg); color:var(--warn)}
.pill.neutral{background:var(--line-2); color:var(--ink-2)}
.pill.billed{background:#E8EBF2; color:var(--akzent)}
.pillbtn{border:1px dashed transparent; cursor:pointer}
.pillbtn:hover{border-color:currentColor}
input.mini{width:4.4rem; padding:.22rem .35rem !important; text-align:right}
input.mini.wide{width:8.5rem; text-align:left}
input.feld{width:100%; min-width:9rem; padding:.25rem .4rem !important}
.katform{display:flex; gap:.6rem; flex-wrap:wrap; align-items:center}
.katform label,label.schalter,label.klein{font-size:.88rem; display:inline-flex; gap:.35rem; align-items:center}
.counter{font-size:.74rem; color:var(--ink-2)}
.filterbar{display:flex; flex-direction:column; gap:.5rem}
.filterzeile{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center}
.suchfeld{width:100%; padding:.5rem .7rem !important}
.chips{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center}
.chips .cap{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); min-width:6.2rem}
.chip{display:inline-block; text-decoration:none; border:1px solid var(--line); background:var(--surface); border-radius:999px; padding:.22rem .75rem; font-size:.8rem; color:var(--ink-2); cursor:pointer; user-select:none}
.chip:hover{background:var(--line-2)}
.chip.on{background:var(--akzent); border-color:var(--akzent); color:#fff}
.chips input[type=date]{padding:.15rem .35rem !important; font-size:.8rem}

/* ---------- Signatur: Tagesbilanz ---------- */
.bilanz{display:flex; height:14px; border-radius:7px; overflow:hidden; background:var(--line-2); min-width:160px}
.bilanz span{display:block; height:100%}
.bilanz .offen,.legend i.offen{background:repeating-linear-gradient(135deg, var(--warn-bg) 0 5px, #F3CDAF 5px 10px)}
.legend{display:flex; gap:1rem; flex-wrap:wrap; font-size:.76rem; color:var(--ink-2); margin-top:.6rem}
.legend i{display:inline-block; width:.75rem; height:.75rem; border-radius:3px; margin-right:.3rem; vertical-align:-1px}

/* ---------- Monat ---------- */
.dayrow{cursor:pointer}
.dayrow:hover td{background:var(--line-2)}
.daydate{white-space:nowrap; font-weight:600}
.daydate a{color:inherit; text-decoration:none}
.weekrow td{background:var(--line-2); padding:.35rem .6rem}
.kwlabel{font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); font-weight:700; margin-right:.6rem}

/* ---------- Tag ---------- */
.dayhead{display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap}
.bignum{font-size:1.7rem; font-weight:700}
.bignum small{font-size:.85rem; font-weight:400; color:var(--ink-2)}
.stamps{display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.5rem}
.stamp{font-size:.78rem; background:var(--line-2); border-radius:6px; padding:.2rem .55rem; color:var(--ink-2)}
.banner{border-radius:var(--radius); padding:.7rem .9rem; font-size:.88rem; margin-bottom:1rem; display:flex; gap:.8rem; align-items:center; flex-wrap:wrap}
.banner.warn{background:var(--warn-bg); color:#7A3810; border:1px solid #EFCBB2}
.banner.info{background:#E8EBF2; color:var(--akzent); border:1px solid #CBD4E4}
.banner.ok{background:var(--ok-bg); color:#0A5A4A; border:1px solid #BFE0D6}
.posform{display:grid; grid-template-columns:1.4fr 1.4fr .9fr .9fr; gap:.6rem; margin-top:.7rem}
.posform label{display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; color:var(--ink-2)}
.posform input,.posform select{width:100%}
.posform textarea{flex:1; min-width:220px; resize:vertical}
/* Prüfkalender: Abwesenheiten klein am Tag (04.11.2026) */
.kalender .abwesend{display:block; font-size:.72rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* Prüfkalender: Feuerlöschertermine gestrichelt (04.11.2026) */
.kalender a.termin.fl{border-left-style:dashed}
/* Mitarbeiter: kann prüfen (04.11.2026) – „aus“ rot wie bei Teams und Rechte */
.kann-schalter{min-width:250px}
.kann-zeile{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin:.15rem 0}
.kann-titel{font-size:.82rem; white-space:nowrap}
.kann-schalter .modulwahl button.s0.on{background:#FDECEC; color:#B42318}
/* Rückrufe: Verlauf wann und wer (04.11.2026) */
details.rr-verlauf{text-align:left; font-size:.78rem; margin-top:.2rem}
details.rr-verlauf summary{cursor:pointer; color:var(--ink-2); text-decoration:underline}
details.rr-verlauf ol{margin:.3rem 0 0; padding-left:1.1rem; color:var(--ink-2)}
/* Kundenliste: Kontakte mit Telefon zum Wählen (04.11.2026) */
.kontakte-liste div + div{margin-top:.2rem}
.kontakte-liste a{font-size:.85rem}
.wunsch-kunde{margin:.6rem 0}
/* Kundenseite mit Reitern (04.11.2026) */
.kunde-chips{display:flex; flex-wrap:wrap; gap:.35rem; margin:-.3rem 0 .8rem}
.kunde-chips .chip{cursor:default}
.kunde-chips a.chip{cursor:pointer}
/* Fenster (<dialog>) – Rückrufe auf der Kundenseite (04.11.2026) */
dialog.fenster{margin:auto; border:none; border-radius:var(--radius); padding:1.1rem 1.3rem; width:min(760px, calc(100vw - 2rem)); max-height:calc(100vh - 3rem); overflow:auto; background:var(--surface); color:var(--ink); box-shadow:0 12px 40px rgba(0,0,0,.25)}
dialog.fenster::backdrop{background:rgba(20,30,40,.45)}
.fenster-kopf{display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:.6rem}
.fenster-kopf h2{margin:0}
.rr-zeile{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 1rem; padding:.6rem 0; border-top:1px solid var(--line)}
.rr-knoepfe{display:flex; gap:.4rem; align-items:flex-start}
.knopfgruppe{display:flex; flex-wrap:wrap; gap:.4rem}
button.chip{font:inherit; cursor:pointer}
/* Reiterleiste wie im KPNS-Cockpit (04.11.2026) */
.reiterleiste{display:flex; gap:.25rem; background:#EEF1F4; border:1px solid var(--line); border-radius:10px; padding:.25rem; margin:0 0 1rem; overflow-x:auto}
.reiterleiste a{flex:1 1 0; min-width:max-content; text-align:center; padding:.45rem .8rem; border-radius:7px; color:var(--ink-2); text-decoration:none; font-size:.9rem; white-space:nowrap}
.reiterleiste a:hover{background:rgba(255,255,255,.6); color:var(--ink)}
.reiterleiste a.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.reiterleiste .zahl{display:inline-block; min-width:1.3em; padding:0 .35em; border-radius:999px; background:#DDE3E8; color:var(--ink); font-size:.72rem; font-weight:600; line-height:1.5}
ul.termin-liste{margin:.3rem 0 0; padding-left:1.1rem}
ul.termin-liste li{margin:.15rem 0}
/* Kundenseite: Kundenordner aus der Dokumentensuche (04.11.2026) */
.ordner-wahl{margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--line)}
.ordner-treffer{display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; padding:.35rem 0; border-top:1px dashed var(--line)}
.ordner-treffer > span{flex:1; min-width:220px}
/* Kundenhistorie (04.11.2026) */
ul.verlauf{list-style:none; margin:0; padding:0}
ul.verlauf li{display:flex; gap:.7rem; padding:.55rem 0; border-top:1px solid var(--line)}
ul.verlauf li:first-child{border-top:none}
.verlauf-zeichen{flex:none; width:1.8rem; height:1.8rem; border-radius:50%; background:var(--bg); display:inline-flex; align-items:center; justify-content:center; font-size:.95rem}
.verlauf-inhalt{flex:1; min-width:0}
.verlauf-kopf{display:flex; flex-wrap:wrap; gap:.2rem .5rem; align-items:baseline; font-size:.88rem}
.verlauf-kopf form.inline{margin-left:auto}
.verlauf-neu .schalter-wahl{margin-top:0}
.verlauf-form{display:flex; flex-direction:column; gap:.6rem}
.verlauf-form textarea{width:100%; min-height:8rem; resize:vertical}
/* Buchungsseite: Elektro und Feuerlöscher je ein Abschnitt (04.11.2026) */
.buchen-art + .buchen-art{margin-top:2rem; padding-top:1.5rem; border-top:2px solid var(--line)}
/* Kundenseite: letzte Prüfungen aus Terminen – blassgrün, nicht änderbar (04.11.2026) */
.letzte-reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.4rem .8rem; align-items:end}
.letzte-reihe label{display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; color:var(--ink-2)}
.letzte-reihe small{grid-column:1/-1}
input.auto-feld, input.auto-feld:disabled{background:#EAF6EE; border-color:#BFE3CB; color:#1F5F34; opacity:1; cursor:not-allowed}
/* Benutzer im Stil von Teams und Rechte (04.11.2026) */
.benutzer-matrix td.benutzer-zelle{min-width:240px; line-height:1.35}
.benutzer-matrix .modulwahl button{white-space:nowrap}
details.benutzer-bearbeiten summary{cursor:pointer; font-size:.8rem; color:var(--ink-2); text-decoration:underline; margin-top:.2rem}
details.benutzer-bearbeiten[open] summary{margin-bottom:.4rem}
details.benutzer-bearbeiten form.stapel{display:flex; flex-direction:column; gap:.35rem; max-width:320px}
details.benutzer-bearbeiten label{display:flex; flex-direction:column; font-size:.75rem; color:var(--ink-2); gap:.15rem}
/* 🌐 an der Adresse → Google Maps (04.11.2026) */
a.globus{text-decoration:none; font-size:1.05rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; min-width:1.6rem}
a.globus:hover{transform:scale(1.15)}
.mit-globus{display:flex; align-items:center; gap:.35rem}
.mit-globus input{flex:1; min-width:0}
/* Kundenseite (03.11.2026): Feld ohne <label> (Schaltergruppe), Kontakte zum Aufklappen */
.posform .feld{display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; color:var(--ink-2)}
.posform label.full{display:flex; flex-direction:column; align-items:stretch}
.posform .full label.schalter{flex-direction:row; font-size:.85rem; color:var(--ink)}
.posform .full label.schalter input{width:auto; flex:none; min-width:0}
.posform label.full textarea{width:100%}
details.kontakt{border:1px solid var(--line); border-radius:var(--radius); padding:.55rem .8rem; margin-bottom:.5rem}
details.kontakt[open]{background:var(--bg)}
details.kontakt summary{cursor:pointer; display:flex; flex-wrap:wrap; gap:.3rem .6rem; align-items:center; list-style:none}
details.kontakt summary::-webkit-details-marker{display:none}
.kontakt-wege{display:flex; flex-wrap:wrap; gap:.2rem .9rem; font-size:.88rem}
.kontakt-auf{margin-left:auto; font-size:.8rem; color:var(--ink-2); text-decoration:underline}
details.kontakt[open] .kontakt-auf{visibility:hidden}
details.kontakt form.inline{margin-top:.4rem}
/* Kontakte in festen Spalten: Name · Telefon · Mobil · E-Mail · bearbeiten (04.11.2026) */
details.kontakt summary.kontakt-spalten{display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(140px,1fr) minmax(140px,1fr) minmax(180px,1.4fr) auto; gap:.3rem 1rem; align-items:center}
.kontakt-spalten a{white-space:nowrap}
.kontakt-mail{overflow:hidden; text-overflow:ellipsis}
@media (max-width: 820px){ details.kontakt summary.kontakt-spalten{grid-template-columns:1fr 1fr} .kontakt-spalten > span:first-child{grid-column:1/-1} }
.posform .full{grid-column:1 / -1; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.posform .full input{flex:1; min-width:220px}
.mitknopf{display:flex; gap:.3rem}
.dot{display:inline-block; width:.65rem; height:.65rem; border-radius:3px; margin-right:.4rem; vertical-align:-1px}
.linkicon{font-size:.8rem; white-space:nowrap}
.linkzeile{display:flex; gap:.4rem; align-items:center; margin-top:.25rem}
.linkinput{flex:1; width:100%; min-width:150px; padding:.22rem .4rem !important; font-size:.8rem; color:var(--ink-2)}
.linkinput:focus{color:var(--ink)}
table.positionen td{vertical-align:top}
/* Artikel (12.11.2026): Liste zum Lesen, Bearbeiten im Fenster mit Reitern */
.artikeltext-kurz{font-size:.78rem; max-width:34ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.reiterleiste button{flex:1 1 0; min-width:max-content; padding:.45rem .8rem; border:none; border-radius:7px; background:none; color:var(--ink-2); font:inherit; font-size:.9rem; white-space:nowrap; cursor:pointer}
.reiterleiste button:hover{background:rgba(255,255,255,.6); color:var(--ink)}
.reiterleiste button.on{background:var(--surface); color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(0,0,0,.12)}
.artikel-fenster .reiterleiste{margin-bottom:.9rem}
[data-reiter-teil][hidden]{display:none}
.artikel-aktiv{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem}
.artikel-konten table{width:auto; min-width:260px}
.artikel-konten td{padding:.3rem .6rem}
.artikel-konto-an td{font-weight:600; background:var(--line-2)}
.artikel-neu-felder{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:.8rem}
.artikel-neu-felder label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2)}
.artikel-neu-felder .breit{grid-column:span 2}
@media (max-width:600px){.artikel-neu-felder{grid-template-columns:1fr 1fr} .artikel-neu-felder .breit{grid-column:1 / -1}}
.fotozeile{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center; margin-top:.3rem}
.thumbwrap{position:relative; display:inline-block}
.thumb{width:46px; height:46px; object-fit:cover; border-radius:5px; border:1px solid var(--line); cursor:zoom-in; display:block}
.thumbweg button{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:none; background:var(--ink); color:#fff; font-size:.6rem; line-height:18px; padding:0; opacity:0}
.thumbwrap:hover .thumbweg button,.thumbweg button:focus{opacity:1}
.fotoadd{display:inline-flex; align-items:center; gap:.3rem; border:1px dashed var(--line); border-radius:6px; padding:.25rem .6rem; font-size:.8rem; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.fotoadd:hover{background:var(--line-2)}
dialog.lightbox{margin:auto; padding:0; border:0; background:transparent; max-width:92vw; max-height:92vh; overflow:visible; cursor:zoom-out}
dialog.lightbox::backdrop{background:rgba(22,33,47,.85)}
dialog.lightbox:focus-visible{outline:none}
dialog.lightbox img{display:block; max-width:92vw; max-height:92vh; border-radius:8px; background:#fff}
img[data-gross]:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.mailvorschau{background:var(--line-2); border:1px solid var(--line); border-radius:6px; padding:.7rem .9rem; font-size:.82rem; white-space:pre-wrap; color:var(--ink-2); word-break:break-all}

/* ---------- Statistik ---------- */
.quotebar{position:relative; height:12px; background:var(--line-2); border-radius:6px; overflow:hidden; min-width:120px; display:inline-block; width:100%; max-width:220px; vertical-align:middle}
.quotebar span{position:absolute; inset:0 auto 0 0; background:var(--ok); border-radius:6px}
.rank{font-weight:700; color:var(--ink-2); width:2rem}
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:.8rem; margin-bottom:1rem}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.8rem 1rem}
.kpi .v{font-size:1.45rem; font-weight:700}
.kpi .l{font-size:.76rem; color:var(--ink-2)}

/* ---------- Anmeldung ---------- */
body.schlicht{display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; padding:1rem}
.schlicht-kasten{background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--akzent); border-radius:var(--radius); padding:1.6rem; width:100%; max-width:380px}
.schlicht-fuss{font-size:.72rem; color:var(--ink-2); margin-top:1rem}
.stapel{display:flex; flex-direction:column; gap:.8rem}
.stapel label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2)}

/* ---------- Druck / PDF ---------- */
body.druck{background:#fff; padding:1.5rem; max-width:1000px; margin:0 auto}
.druckleiste{display:flex; gap:.6rem; margin-bottom:1.2rem}
.druckkopf{border-bottom:2px solid var(--akzent); padding-bottom:.6rem; margin-bottom:1rem}
.druckkopf .sub{margin:0; font-size:.8rem}
.druckkunde{margin-bottom:1.4rem; break-inside:avoid-page}
.druckkunde h2{margin:0 0 .4rem; font-size:1rem}
.druckkunde table{font-size:.82rem}
tr.summe td{font-weight:700; border-top:1px solid var(--ink)}
@media print{
  .nicht-drucken{display:none}
  body.druck{padding:0}
  @page{margin:15mm}
}

:focus-visible{outline:2px solid var(--akzent); outline-offset:2px}
.js .nurohnejs{display:none}

@media (max-width:820px){
  .menuknopf{display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:-.35rem -.25rem -.35rem -.75rem; border-radius:6px}   /* Tippfläche 44 × 44 (Audit 12.11.2026) */
  .mock-hint,.userchip{display:none}
  .layout{flex-direction:column}
  nav.side{display:none; width:100%; border-right:none; border-bottom:1px solid var(--line)}
  body.menu-offen nav.side{display:flex}
  .posform{grid-template-columns:1fr 1fr}
  .zweispaltig{grid-template-columns:1fr}
  .bignum{font-size:1.35rem}
}
@media (max-width:520px){
  .posform{grid-template-columns:1fr}
}

/* ---------- Einstellungen als Kacheln ---------- */
.kacheln{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.8rem}
.kachel{display:flex; flex-direction:column; gap:.35rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; text-decoration:none; color:var(--ink)}
.kachel:hover{border-color:var(--akzent); box-shadow:0 1px 4px rgba(22,33,47,.08)}
.kachel-titel{font-weight:600; display:flex; justify-content:space-between; gap:.5rem; align-items:center}
.kachel-text{font-size:.85rem; color:var(--ink-2)}
.kachel-demo{border-style:dashed; cursor:default}
.kachel-demo:hover{border-color:var(--line); box-shadow:none}
/* Favoriten-Stern an der Kachel (wie KPNS-Cockpit, Christian 02.11.2026) */
.kachel-feld{position:relative; display:flex}
.kachel-feld .kachel{flex:1}
.kachel-feld .kachel-titel{padding-right:1.6rem}
.fav-form{position:absolute; top:.55rem; right:.55rem; margin:0}
.fav-stern{background:none; border:0; padding:.15rem .3rem; font-size:1.1rem; line-height:1; color:var(--ink-2); opacity:.75; cursor:pointer; border-radius:4px}   /* .75 statt .45: mind. 3:1 für Bedienelemente (Audit 12.11.2026) */
.fav-stern:hover, .fav-stern:focus-visible{opacity:1; background:var(--line-2)}
.fav-stern.an{color:#E0A800; opacity:1}
.stapel.schmal{max-width:520px}
details summary{cursor:pointer; margin:.2rem 0 .5rem}
details label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2); margin-bottom:.6rem}

/* ---------- Anmeldeseite im Auftritt von promundius.com (04.10.2026) ----------
   Nur hier Logo, Petrol #008391 / Grau #575f64 aus dem Logo und Poppins (OFL, selbst gehostet).
   Nach der Anmeldung bleibt die Kopfzeile des Mockups (Christian, 04.10.2026). */
@font-face{font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url(schrift/poppins-400.woff2) format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url(schrift/poppins-500.woff2) format("woff2")}
@font-face{font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url(schrift/poppins-600.woff2) format("woff2")}
body.schlicht{--akzent:#008391; --ink:#2C2D33; --ink-2:#575F64; --bg:#F6F7F7; --line:#E1E5E7;
  font-family:"Poppins", "Segoe UI", system-ui, sans-serif}
body.schlicht .btn:hover{background:#006B77; border-color:#006B77}
body.schlicht .banner.info{background:#E3F2F3; color:#00606B; border-color:#BFE0E4}
.schlicht-kasten{padding:1.8rem; max-width:400px}
.schlicht-logo{display:block; width:100%; max-width:240px; height:auto; margin-bottom:.4rem}
.schlicht-app{font-size:.8rem; color:var(--ink-2); margin-bottom:1.4rem}
.druckkopf{display:flex; justify-content:space-between; align-items:flex-end; gap:1rem}
.druckkopf img{height:48px; width:auto}

/* Logo von Promundius oben links in der Kopfzeile – weiße Fassung, aus dem Original erzeugt */
.kopflogo{display:block; line-height:0; text-decoration:none}
.kopflogo img{height:42px; width:auto}
.kopfname{font-size:.78rem; opacity:.8; border-left:1px solid var(--kopf-3,#4FA9B3); padding-left:1rem}
@media (max-width:820px){ .kopfname{display:none} .kopflogo img{height:34px} }

/* Module: Stufe Test (nur KPNS sieht es) */
.pill.test{background:#FFF4DC; color:#8A5A00; font-size:.66rem; padding:.05rem .4rem; vertical-align:1px}
.modulwahl{display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden}
.modulwahl button{border:none; background:var(--surface); padding:.28rem .8rem; font-size:.8rem; color:var(--ink-2); border-right:1px solid var(--line)}
.modulwahl button:last-child{border-right:none}
.modulwahl button:hover{background:var(--line-2)}
.modulwahl button.s0.on{background:#EEF0F3; color:#4B5563; font-weight:600}
.modulwahl button.s1.on{background:#FFF4DC; color:#8A5A00; font-weight:600}
.modulwahl button.s2.on{background:var(--ok-bg); color:var(--ok); font-weight:600}
.farbwahl{display:flex; gap:.8rem; flex-wrap:wrap}
.farbwahl label{display:flex; flex-direction:column; gap:.4rem; border:2px solid var(--line); border-radius:var(--radius); padding:.6rem; cursor:pointer; font-size:.85rem; min-width:220px}
.farbwahl label:has(input:checked){border-color:var(--akzent)}
.farbwahl .muster{height:34px; border-radius:6px; display:flex; align-items:center; padding:0 .6rem}
.farbwahl .muster img{height:24px}
/* Designwahl (Master): drei Musterfarben je Design – Leiste, Akzent, Fläche */
.farbwahl .thema-muster{padding:0; overflow:hidden; border:1px solid var(--line)}
.farbwahl .thema-muster i{flex:1; height:100%; background:var(--m1)}
.farbwahl .thema-muster i:nth-child(2){background:var(--m2)}
.farbwahl .thema-muster i:nth-child(3){background:var(--m3)}
.farbwahl label .klein{font-size:.8rem; color:var(--ink-2); max-width:240px}
/* Schriftzug statt Logo, solange die Installation keine assets/logo.png hat */
.wortmarke{font-weight:700; letter-spacing:.02em; white-space:nowrap}
.wortmarke.kopf{font-size:1.15rem; color:#fff; line-height:1.2}
.wortmarke.anmeldung{display:block; font-size:1.6rem; color:var(--akzent)}
.wortmarke.druck{font-size:1.1rem}
img.kopf{height:42px; width:auto}
img.druck{height:44px; width:auto}
.versteckt{display:none !important}
.gedimmt{opacity:.5}

/* Rückrufe */
select.prio{padding:.2rem .35rem; font-size:.8rem; border-radius:999px}
select.prio.warn{background:var(--warn-bg); color:var(--warn); border-color:#EFCBB2}
select.prio.gelb{background:#FFF4DC; color:#8A5A00; border-color:#F3DFAE}
details.card > summary{list-style:none; display:inline-block}
details.card > summary::-webkit-details-marker{display:none}
details.card[open] > summary{margin-bottom:.4rem}

/* Schalter aus | an im Stil der Module-Seite (Mitarbeiter „aktiv“, Christian 04.10.2026) */
.schalter-wahl{margin-top:.3rem}
td > .schalter-wahl{margin-top:0}
.schalter-wahl label{position:relative; padding:.22rem .75rem; font-size:.8rem; color:var(--ink-2); border-right:1px solid var(--line); cursor:pointer; background:var(--surface)}
.schalter-wahl label:last-child{border-right:none}
.schalter-wahl label:hover{background:var(--line-2)}
.schalter-wahl input{position:absolute; opacity:0; width:1px; height:1px}   /* bleibt im Label (relative) – sonst schob es breite Tabellen am Handy über den Rand (Artikel 951 px, Audit 11.11.2026) */
.schalter-wahl label:has(input:checked).s0{background:#EEF0F3; color:#4B5563; font-weight:600}
.schalter-wahl label:has(input:checked).s2{background:var(--ok-bg); color:var(--ok); font-weight:600}
.schalter-wahl label:has(input:checked).s1{background:#FFF4DC; color:#8A5A00; font-weight:600}   /* Feuerlöscher: Befund „Mangel“ (04.11.2026) */
/* Teams und Rechte: „aus“ rot statt grau (Christian, 03.11.2026) – nur diese Seite, Module bleiben grau */
.rechte-matrix .modulwahl button.s0.on{background:#FDECEC; color:#B42318}
.schalter-wahl.aus-rot label:has(input:checked).s0{background:#FDECEC; color:#B42318}   /* Kundenseite: Betreuungsvertrag „nein“ und Status „inaktiv“ rot (04.11.2026) */
.schalter-wahl label:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:-2px}

/* „Ansicht als“ in der Kopfzeile – nur Admins (wie im Mockup) */
.ansichtwahl label{font-size:.75rem; opacity:.85; margin-right:.35rem}
.ansichtwahl select{background:var(--kopf-2,#006B77) !important; color:#fff; border:1px solid var(--kopf-3,#4FA9B3) !important; border-radius:6px; padding:.25rem .4rem !important; font-size:.8rem; max-width:170px}
@media (max-width:820px){ .ansichtwahl label{display:none} }

/* Entwicklung: Fehler & Wünsche */
.meldung-text{white-space:pre-wrap; font-size:.9rem; margin-top:.5rem}
details.card > summary.meldung-kopf{display:block; cursor:pointer}
.stapel .katform label{flex-direction:row; color:var(--ink); font-size:.88rem}
textarea.antwort{width:100%; resize:vertical; font:inherit}

/* Elektroprüfung: Prüfkalender (Monat mit KW-Spalte) */
table.kalender{table-layout:fixed; min-width:720px}
table.kalender th{text-align:center}
table.kalender td{vertical-align:top; height:84px; border:1px solid var(--line-2); padding:.25rem .3rem}
table.kalender td.kw,table.kalender th.kw{width:2.6rem; text-align:center; color:var(--ink-2); font-size:.75rem; background:var(--line-2)}
table.kalender td.fremd{background:#FAFBFC; color:#9AA2A6}
table.kalender td.frei{background:#F7F8FA}
table.kalender td.heute{outline:2px solid var(--akzent); outline-offset:-2px}
.tagnr{font-size:.78rem; font-weight:600; margin-bottom:.2rem}
.tagnr small{font-weight:400; color:var(--warn)}
a.termin{display:block; font-size:.74rem; line-height:1.25; padding:.15rem .3rem; margin-bottom:.15rem; border-left:4px solid var(--akzent);
  background:var(--surface); border-radius:3px; box-shadow:0 0 0 1px var(--line); color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
a.termin:hover{background:var(--line-2)}
a.termin.erledigt{opacity:.55; text-decoration:line-through}
.pill.gelb{background:#FFF4DC; color:#8A5A00}

/* Kacheln als Filter (Elektroprüfung → Fällig & ohne Termin) */
a.kpi-link{display:block; text-decoration:none; color:var(--ink); cursor:pointer}
a.kpi-link:hover{border-color:var(--akzent)}
a.kpi-link.on{border-color:var(--akzent); box-shadow:inset 0 0 0 1px var(--akzent); background:var(--akzent-hell,#F4FAFA)}

/* Tagesansicht: Stempelung ↔ Kunde (14.10.2026) */
.stamp.zugeordnet{background:var(--ok-bg); color:var(--ink)}
.stamp .dot{width:.55rem; height:.55rem; margin:0 .2rem 0 .1rem}
select.stempelwahl{font-size:.75rem; padding:.1rem .3rem !important; margin-top:.25rem; max-width:12rem; color:var(--ink-2)}
.posform .stempelzeile{grid-column:1 / -1; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start}
.posform .stempelzeile select{max-width:24rem}

/* Meine Zeiten: Anteil abrechenbar in % (14.10.2026) */
.kpi .v .proz{font-size:.95rem; font-weight:600; margin-left:.35rem}

/* Fahrzeit → Kunde (14.10.2026) */
.posform select.fahrtkunde{margin-top:.3rem}
.posform input[readonly]{background:var(--line-2); color:var(--ink-2)}
td input.mini[readonly]{background:var(--line-2); color:var(--ink-2)}
th.mitte,td.mitte{text-align:center}

/* Seiten mit breiten Tabellen nutzen die volle Bildschirmbreite (Christian, 14.10.2026) – alle anderen bleiben bei 1180 px */
body.seite-kategorien main,body.seite-abrechnung main,body.seite-benutzer main,body.seite-mitarbeiter main{max-width:none}

/* KM bei Fahrzeit (14.10.2026) */
.posform .kmzeile{display:flex; align-items:center; gap:.3rem; margin-top:.3rem; font-size:.85rem; color:var(--ink-2)}
.posform .kmzeile input{width:6rem}
input.kmfeld{margin-top:.25rem; width:4rem}

/* Prüfnachweis (digitaler Tätigkeitsnachweis DGUV V3, 14.10.2026) */
.nw-raster{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem 1rem}
.nw-raster > div,.nw-raster > label{display:flex; flex-direction:column; gap:.2rem; font-size:.9rem}
.nw-raster .l,.nw-unterschriften-eingabe .l{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
table.nw-eingabe input:not([type=checkbox]){width:100%; min-width:6rem}
table.nw-eingabe td.num input{width:4.6rem; min-width:0}
.nw-bestaetigung{font-weight:600; margin:0 0 .8rem}
.nw-unterschriften-eingabe{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1rem}
.nw-unterschriften-eingabe > div{display:flex; flex-direction:column; gap:.35rem; align-items:flex-start}
canvas.unterschrift{width:100%; max-width:420px; height:140px; border:1px dashed var(--ink-2); border-radius:6px; background:#fff; touch-action:none; cursor:crosshair}
.unterschrift-bild{max-width:300px; max-height:110px; border-bottom:1px solid var(--line)}
.heute-karte{border-color:var(--akzent); box-shadow:inset 3px 0 0 var(--akzent)}
/* Druckansicht im Aufbau des Papierformulars */
.nachweis-druck table{width:100%; border-collapse:collapse; font-size:.85rem; margin-bottom:.8rem}
.nachweis-druck .nw-kopf td{border:1px solid var(--ink); padding:.5rem; vertical-align:middle}
.nachweis-druck .nw-firma{width:25%}
.nachweis-druck .nw-titel{text-align:center; font-size:1rem}
.nachweis-druck .nw-logo{width:25%; text-align:center}
.nachweis-druck .nw-logo img{max-width:160px}
.nachweis-druck .nw-felder th{text-align:left; font-weight:600; white-space:nowrap; padding:.3rem .4rem; border-bottom:1px solid var(--line); font-size:.8rem; letter-spacing:0; text-transform:none; color:var(--ink)}
.nachweis-druck .nw-felder td{border-bottom:1px solid var(--line); padding:.3rem .4rem}
.nachweis-druck .nw-zeilen th,.nachweis-druck .nw-zeilen td{border:1px solid var(--ink); padding:.3rem .5rem}
.nachweis-druck .nw-unterschriften td{width:50%; vertical-align:top; padding:.4rem; border-top:1px solid var(--ink)}
.nachweis-druck .nw-bestaetigung{text-align:center; font-size:1rem}

/* Entwicklung: Anhänge (Screenshots, Bilder, PDF – 14.10.2026) */
.anhang-zone{border:1px dashed var(--line); border-radius:var(--radius); padding:.6rem .8rem; display:flex; flex-wrap:wrap; gap:.4rem .6rem; align-items:center; font-size:.85rem; color:var(--ink-2)}
.anhang-zone:focus{outline:2px solid var(--akzent); outline-offset:1px}
.anhang-zone .fotozeile{flex-basis:100%; margin-top:.2rem}
.anhang-pdf{display:inline-block; font-size:.8rem; border:1px solid var(--line); border-radius:5px; padding:.25rem .5rem; color:var(--ink); text-decoration:none; background:var(--surface)}
.anhang-weg{position:absolute; top:-6px; right:-6px; width:18px; height:18px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--warn); font-size:.75rem; line-height:16px; padding:0}
.anhangzeile{margin-top:.5rem}

/* ---------- Buchungsseite für Prüfkunden (Wunschtermine, 14.10.2026) ---------- */
.schlicht-kasten.buchen{max-width:480px}
.buchen-kunde{background:var(--bg); border-radius:var(--radius); padding:.6rem .75rem; margin:0 0 .9rem; font-size:.9rem}
.buchen-kunde .klein,.buchen-auswahl .klein{font-size:.8rem; color:var(--ink-2)}
.buchen-woche{margin:1rem 0 .2rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2); font-weight:600}
label.buchen-tag{display:flex; align-items:center; gap:.6rem; padding:.55rem .2rem; border-bottom:1px solid var(--line); cursor:pointer; font-size:.92rem}
label.buchen-tag input{width:1.1rem; height:1.1rem; accent-color:var(--akzent)}
label.buchen-tag:has(input:checked){background:var(--ok-bg); font-weight:600}
label.buchen-tag:has(input:disabled){color:var(--ink-2); cursor:default}
.buchen-felder{display:flex; flex-direction:column; gap:.45rem; margin-top:1rem}
.buchen-auswahl{position:sticky; bottom:0; background:var(--surface); padding:.75rem 0 .2rem; margin-top:.75rem; border-top:1px solid var(--line)}
.buchen-auswahl .btn{width:100%; margin-bottom:.35rem}
.buchen-fehler{background:var(--warn-bg); border-left:3px solid var(--warn); padding:.5rem .65rem; margin:.6rem 0; font-size:.88rem}
.buchen-ok{background:var(--ok-bg); border-left:3px solid var(--ok); padding:.6rem .75rem; margin:.6rem 0}
.buchen-ok ul{margin:.35rem 0 0 1.1rem}
.buchen-vorschau{max-width:480px; border:1px solid var(--line); border-top:4px solid var(--kopf,#008391); border-radius:var(--radius); padding:1rem; background:var(--surface)}
.buchen-vorschau .buchen-auswahl{position:static}
/* Buchungsseite als Monatskalender (26.10.2026) */
.kal-legende{font-size:.78rem; color:var(--ink-2); margin:.4rem 0 .2rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.kal-legende .kal-tag{width:1.6rem; height:1.4rem; font-size:.7rem; display:inline-flex}
.kal-monat{margin-top:.9rem}
.kal-titel{font-weight:600; font-size:.95rem; margin-bottom:.35rem}
.kal-raster{display:grid; grid-template-columns:2rem repeat(5,1fr); gap:.3rem}
.kal-kopf{font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); text-align:center}
.kal-kw{font-size:.68rem; color:var(--ink-2); display:flex; align-items:center; justify-content:center}
.kal-tag{display:flex; align-items:center; justify-content:center; height:2.6rem; border-radius:8px; font-size:.95rem; position:relative}
.kal-tag.zu{background:var(--bg); color:#B6BDC6}
.kal-tag.zu.heute{outline:1px solid var(--line)}
.kal-tag.frei{background:var(--ok-bg); color:var(--ok); font-weight:600; cursor:pointer; border:1px solid transparent}
.kal-tag.frei:hover{border-color:var(--ok)}
.kal-tag.frei input{position:absolute; opacity:0; width:1px; height:1px}
.kal-tag.frei:has(input:checked),.kal-tag.wahl{background:var(--kopf,#008391); color:#fff}
.kal-tag.frei:has(input:disabled:not(:checked)){opacity:.45; cursor:default}
.kal-tag.frei:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:1px}
.kal-tag.spanne{box-shadow:inset 0 -4px 0 var(--kopf,#008391)}
.kal-tag[data-nr]::after{content:attr(data-nr); position:absolute; top:2px; right:4px; font-size:.62rem; font-weight:700}
.kal-auswahl{margin-top:.9rem; background:var(--bg); border-radius:var(--radius); padding:.55rem .75rem; font-size:.9rem}
.kal-auswahl ol{margin:.25rem 0 0 1.2rem}
.wunsch-zeile{display:grid; grid-template-columns:minmax(220px,1.4fr) minmax(160px,1fr) auto; gap:.6rem; align-items:center; padding:.5rem 0; border-top:1px solid var(--line-2)}
.linkzeile{display:flex; gap:.5rem; align-items:center}
.linkzeile input{flex:1; font-size:.85rem; color:var(--ink-2)}
@media (max-width:760px){ .wunsch-zeile{grid-template-columns:1fr} }

/* ---------- Teams (Benutzer, 14.10.2026) ---------- */
.teamzeile{display:flex; gap:.5rem; align-items:center; padding:.5rem 0; border-bottom:1px solid var(--line-2); margin-bottom:.5rem}
.teamzeile .katform{flex:1}

/* ---------- Prüfnachweise: Liste, Handy-Tabelle, Kundenmodus (14.10.2026) ---------- */
.nw-liste{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:0 1rem}
.nw-liste .nw-karte{margin-bottom:1rem}
[data-kundenmodus]{margin-bottom:.4rem}
@media (max-width:900px){
  table.nw-eingabe, table.nw-eingabe tbody{display:block}
  table.nw-eingabe tr.nw-kopfzeile{display:none}
  table.nw-eingabe tr{display:grid; grid-template-columns:1fr 1fr 1fr; gap:.4rem .5rem; padding:.6rem 0; border-bottom:1px solid var(--line)}
  table.nw-eingabe td{display:flex; flex-direction:column; gap:.15rem; padding:0; border:0; min-width:0}
  table.nw-eingabe input[type=date], table.nw-eingabe input[type=time]{font-size:.85rem; padding:.35rem .3rem}
  table.nw-eingabe td[data-l]::before{content:attr(data-l); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2)}
  table.nw-eingabe td.nw-taetigkeit{grid-column:1 / -1}
  table.nw-eingabe td input:not([type=checkbox]){min-width:0; width:100%}
  table.nw-eingabe td.num{text-align:left}
  table.nw-eingabe td[colspan]{grid-column:1 / 3; align-self:center; text-align:left}
}
.kundenmodus{position:fixed; inset:0; z-index:200; background:var(--bg); overflow-y:auto; padding:1rem}
.kundenmodus[hidden]{display:none}
body.km-offen{overflow:hidden}
.km-kasten{max-width:900px; margin:0 auto; background:var(--surface); border-radius:var(--radius); border-top:4px solid var(--kopf,#008391); padding:1.2rem 1.4rem}
.km-kopf{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; color:var(--ink-2); font-size:.85rem}
.km-kopf img{height:40px}
.km-kasten h2{margin:.8rem 0 .4rem; font-size:1.4rem}
.km-daten{display:grid; grid-template-columns:auto 1fr; gap:.3rem 1rem; margin:0 0 1rem; font-size:1rem}
.km-daten dt{color:var(--ink-2)}
.km-daten dd{margin:0; font-weight:600; white-space:pre-wrap}
.km-feld{position:relative; margin:.5rem 0}
.km-flaeche{display:block; width:100%; height:min(38vh,320px); background:#fff; border:2px dashed var(--ink-2); border-radius:8px; touch-action:none; cursor:crosshair}
.km-linie{position:absolute; left:1.5rem; right:1.5rem; bottom:22%; border-top:1px solid var(--line); font-size:.7rem; color:var(--ink-2); padding-top:.2rem; pointer-events:none}
.km-name{width:100%; font-size:1.1rem; padding:.6rem .7rem !important; margin:.4rem 0 .8rem}
.km-knoepfe{display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap}
.km-knoepfe .btn{font-size:1rem; padding:.65rem 1.1rem}

/* ---------- Suche mit Strg+K (wie KPNS-Cockpit, 14.10.2026) ---------- */
.suche{position:fixed; inset:0; background:rgba(22,33,47,.45); z-index:100; display:flex; justify-content:center; align-items:flex-start; padding:12vh 1rem 1rem}
.suche[hidden]{display:none}
.suche-kasten{background:var(--surface); border-radius:var(--radius); width:100%; max-width:560px; box-shadow:0 12px 40px rgba(0,0,0,.25); overflow:hidden}
#suche-feld{width:100%; border:0; border-bottom:1px solid var(--line); border-radius:0; padding:.85rem 1rem; font-size:1rem; outline:none}
#suche-treffer{list-style:none; max-height:50vh; overflow-y:auto}
#suche-treffer li{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 1rem; cursor:pointer; font-size:.92rem}
#suche-treffer li small{color:var(--ink-2); white-space:nowrap}
#suche-treffer li.aktiv{background:var(--line-2); box-shadow:inset 3px 0 0 var(--kopf,#008391)}
#suche-treffer li.leer{color:var(--ink-2); cursor:default}
.suche-fuss{font-size:.72rem; color:var(--ink-2); padding:.45rem 1rem; border-top:1px solid var(--line-2); background:var(--bg)}
.navsuche{display:block; width:calc(100% - 1rem); margin:.2rem .5rem .6rem; font-size:.85rem; cursor:pointer}
[data-kundenmodus][hidden],.km-name[hidden]{display:none}
/* Akademie → Vorlagen (22.10.2026) */
.vorlagen-liste{list-style:none; margin:0; padding:0}
.vorlagen-liste li{display:flex; gap:.6rem; align-items:baseline; padding:.4rem 0; border-top:1px solid var(--line-2)}
.vorlagen-liste li:first-child{border-top:0}
.vorlagen-liste a{flex:1; min-width:0; overflow-wrap:anywhere}
.vorlagen-liste small{color:var(--ink-2); white-space:nowrap}
.team-recht{background:var(--line-2); border-radius:6px; padding:.1rem .45rem}
.vorlage-tag{font-size:.72rem}
.historie-liste{margin:.5rem 0 0 1.1rem; font-size:.9rem}
.historie-liste li{margin:.25rem 0}
.historie-pruefen{margin:.7rem 0 0; font-size:.85rem}
/* Historie-Dashboard wie MzW (Christian, 02.11.2026): Auslieferungen + Punkte nach Art mit Anteil als Balken */
.hist-zahlen .hist-ausl{background:var(--line-2)} .hist-zahlen .hist-ausl .v{color:var(--akzent)}
.hist-zahlen .hist-ok .v{color:var(--ok)} .hist-zahlen .hist-neutral .v{color:var(--k2)} .hist-zahlen .hist-gelb .v{color:#8A5A00}
/* Version oben rechts in der Kopfzeile, Link zur Historie (wie MzW, Christian 03.11.2026) */
/* Aufbau „Menü oben“ (12.11.2026, wie MzW): Leiste als zweite Zeile der Kopfzeile – so zählt sie zur --kopfhoehe und alles Klebende bleibt richtig */
.obenleiste{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .25rem; margin:.35rem -1rem -.55rem; padding:.3rem 1rem;
  border-top:1px solid rgba(127,127,127,.25); font-size:.9rem}
.obenleiste > a, .obenleiste summary{display:inline-flex; align-items:center; gap:.3rem; color:inherit; text-decoration:none; padding:.4rem .6rem; border-radius:6px; white-space:nowrap; cursor:pointer; font-weight:500}
.obenleiste > a:hover, .obenleiste summary:hover, .oben-gruppe[open] > summary{background:rgba(127,127,127,.14)}
.obenleiste > a.active, .obenleiste summary.on{background:var(--akzent-hell, rgba(127,127,127,.2)); color:var(--akzent); font-weight:700}
.thema-petrol .obenleiste > a.active, .thema-petrol .obenleiste summary.on, .thema-dunkelblau .obenleiste > a.active, .thema-dunkelblau .obenleiste summary.on{background:rgba(255,255,255,.22); color:#fff}
.oben-gruppe{position:relative}
.oben-gruppe > summary{list-style:none}
.oben-gruppe > summary::-webkit-details-marker{display:none}
.oben-gruppe > summary::after{content:"▾"; font-size:.75em; opacity:.7}
.oben-aufklapp{position:absolute; top:calc(100% + .3rem); left:0; z-index:60; min-width:230px; display:flex; flex-direction:column; padding:6px;
  background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 28px rgba(20,30,40,.16)}
.oben-aufklapp a{color:var(--ink); text-decoration:none; padding:.5rem .75rem; border-radius:6px; white-space:nowrap; font-weight:500}
.oben-aufklapp a:hover, .oben-aufklapp a:focus-visible{background:var(--line-2)}
.oben-aufklapp a.active{background:var(--akzent-hell, var(--line-2)); color:var(--akzent); font-weight:700}
.obenleiste .navsuche{margin-left:auto; width:min(220px, 24vw)}
.obenleiste > a .pill.test, .obenleiste summary .pill.test{display:none}   /* Test-Schilder stehen in der Aufklappliste, nicht in der Leiste */
body.aufbau-oben nav.side{display:none}
@media (min-width:821px){ body.aufbau-oben main{margin-inline:auto} }   /* am Handy nicht – in der Spalte würde main sonst nicht mehr gestreckt (1180 px breit) */
@media (max-width:820px){ .obenleiste{display:none} body.aufbau-oben.menu-offen nav.side{display:flex} }
/* Muster auf der Darstellungsseite: Leiste links bzw. oben */
.aufbau-muster{display:grid; width:64px; height:44px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--bg)}
.aufbau-muster i{display:block}
.aufbau-muster-links{grid-template-columns:16px 1fr; grid-template-rows:10px 1fr}
.aufbau-muster-links i:nth-child(1){grid-column:1 / 3; background:var(--akzent)} .aufbau-muster-links i:nth-child(2){background:var(--line)} .aufbau-muster-links i:nth-child(3){background:var(--surface)}
.aufbau-muster-oben{grid-template-rows:10px 7px 1fr}
.aufbau-muster-oben i:nth-child(1){background:var(--akzent)} .aufbau-muster-oben i:nth-child(2){background:var(--line)} .aufbau-muster-oben i:nth-child(3){background:var(--surface)}
/* Rückrufe oben rechts neben dem Demo-Hinweis (12.11.2026) – am Handy nur Symbol und Zahl */
.kopf-rueckruf{display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; text-decoration:none}
/* Stempeln neben den Rückrufen (12.11.2026): Einstempeln → Pause | Ausstempeln */
.kopf-stempel-form{display:inline-flex; margin:0}
.kopf-stempel{display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; text-decoration:none}
.kopf-stempel.stempel-laeuft{border-color:var(--ok) !important; color:var(--ok) !important}
.kopf-stempel.stempel-vergessen{border-color:var(--warn) !important; color:var(--warn) !important}
.kopf-rueckruf .badge{margin-left:.1rem}
@media (max-width:1400px){ .kopf-rueckruf .wort{display:none} .kopf-stempel .wort{display:none} .mock-hint .wort{display:none} }   /* Demo-Hinweis kurz, sonst bricht die Kopfzeile mit „Ansicht als“ um */   /* sonst bricht die Kopfzeile mit „Ansicht als“ bei 1280 px um */
@media (max-width:820px){ .kopf-rueckruf, .kopf-stempel{min-height:40px; min-width:40px; justify-content:center} }
.kopf-release{color:rgba(255,255,255,.75); text-decoration:none; font-size:.75rem; font-variant-numeric:tabular-nums; white-space:nowrap; padding:.25rem .45rem; border-radius:5px}
.kopf-release:not(a):hover{background:none; color:rgba(255,255,255,.75)}
.kopf-release:hover{background:rgba(255,255,255,.14); color:#fff}
@media (max-width:1100px){ .kopf-release{display:none} }
/* Spaltenüberschrift sortiert (Dokumente, 03.11.2026) */
th a.sortkopf{color:inherit; text-decoration:none; white-space:nowrap}
th a.sortkopf:hover{text-decoration:underline}
/* Historie: Kacheln als Filter, Suche (wie MzW, 03.11.2026) */
a.kpi{display:block; text-decoration:none; color:inherit}
.hist-zahlen a.kpi:hover{border-color:var(--akzent)}
.hist-zahlen .kpi.gewaehlt{box-shadow:0 0 0 2px var(--akzent)}
.hist-filter{display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; margin-bottom:.7rem}
.hist-filter input[type=search]{flex:1; min-width:220px}
.historie mark{background:#fff2a8; color:inherit; border-radius:2px; padding:0 1px}
.hist-balken{height:5px; border-radius:3px; background:var(--line-2); margin-top:.5rem; overflow:hidden}
.hist-balken i{display:block; height:100%; border-radius:3px; background:var(--ok)}
.hist-neutral .hist-balken i{background:var(--k2)} .hist-gelb .hist-balken i{background:#C9A13B}
.neu-hinweis[hidden]{display:none}
.vorgabe.aufgehoben .meldung-kopf strong,.vorgabe.aufgehoben .meldung-text{text-decoration:line-through; opacity:.6}
.rechte-matrix td.num,.rechte-matrix th.num{white-space:nowrap; text-align:center}
.rechte-matrix .modulwahl button{padding:.2rem .6rem}
.rechte-matrix tr.grundrecht td{color:var(--ink-2)}
/* Kopf mit den Teams bleibt stehen (Christian, 03.11.2026): Tabelle scrollt in sich, Kopfzeile klebt oben */
.rechte-scroll{overflow:visible}   /* kein eigener Scrollbereich, sonst klebt der Kopf nicht an der Seite */
.rechte-matrix tr:first-child th{position:sticky; top:0; z-index:5; background:var(--surface); box-shadow:0 1px 0 var(--line)}
@media (min-width:821px){ .rechte-matrix tr:first-child th{top:var(--kopfhoehe,56px)} }
/* Rechte-Übersicht (03.11.2026): ✓ grün, ✗ rot wie „aus“ in Teams und Rechte */
.r-ja,.r-nein{display:inline-block; min-width:1.8rem; border-radius:999px; padding:.05rem .5rem; font-weight:700; font-size:.85rem; cursor:default}
.r-ja{background:var(--ok-bg); color:var(--ok)}
.r-nein{background:#FDECEC; color:#B42318}
.rechte-matrix th.inaktiv{opacity:.55}
/* Viele Personen: Tabelle scrollt in sich (quer und hoch), Kopf und erste Spalte bleiben stehen */
.rechte-personen-scroll{overflow:auto; max-height:calc(100vh - var(--kopfhoehe, 56px) - 2rem)}
.rechte-personen tr:first-child th{top:0 !important; text-transform:none; letter-spacing:0; vertical-align:bottom}
.rechte-personen .rp-name{font-size:.9rem; color:var(--ink); font-weight:600}
.rechte-personen tr:first-child th small{font-size:.72rem; font-weight:400}
.rechte-personen td:first-child,.rechte-personen th:first-child{position:sticky; left:0; background:var(--surface); z-index:3; min-width:240px; max-width:320px}
.rechte-personen tr:first-child th:first-child{z-index:6}
.rechte-personen tr.weekrow td:first-child{position:static}
.vorlage-tagform input[name=tags]{font-size:.8rem; padding:.2rem .4rem; min-width:220px; margin:.25rem .3rem 0 0}
.teamspalte{min-width:140px}
.teamchips{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center}
.teamchips .chip.teamchip{background:var(--line-2); color:var(--ink); font-size:.78rem; padding:.15rem .55rem}
.teamchips .chip.teamchip:has(input:not(:checked)){text-decoration:line-through; opacity:.55}
.teamchips .suchwahl{min-width:130px}
.teamchips .suchwahl input{font-size:.8rem; padding:.2rem .45rem}
.teamzeile{flex-wrap:wrap}
.teaminfo{margin:0 0 .2rem; flex-basis:100%}
/* Kundenkarte aus der Suche (21.10.2026, wie KPNS-Cockpit) */
.suche-kasten.kk{max-width:820px; max-height:80vh; overflow-y:auto}
.kk-kopf{display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; padding:1rem 1rem .6rem; border-bottom:1px solid var(--line-2)}
.kk-kopf h2{margin:0; font-size:1.15rem}
.kk-zu{margin-left:auto}
.kk-raster{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; padding:1rem}
.kk-raster section{min-width:0}
.kk-raster h3{margin:0 0 .4rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-2)}
.kk-raster p{margin:.2rem 0; font-size:.9rem; overflow-wrap:anywhere}
.kk-zahl{display:flex; justify-content:space-between; gap:1rem}
.kk-knoepfe{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; padding:.7rem 1rem; border-top:1px solid var(--line-2); background:var(--bg)}

/* ---------- Suchauswahl statt langer Auswahllisten (15.10.2026) ---------- */
.suchwahl{position:relative; display:inline-block; min-width:260px; vertical-align:middle}
.suchwahl input{width:100%}
.suchwahl ul{position:absolute; left:0; right:0; top:calc(100% + 2px); z-index:50; list-style:none; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 8px 24px rgba(0,0,0,.12); max-height:320px; overflow-y:auto}
.suchwahl ul[hidden]{display:none}
dialog.fenster .suchwahl{display:block}
dialog.fenster .suchwahl ul{position:static; margin-top:2px; max-height:240px}
.suchwahl li{padding:.45rem .7rem; cursor:pointer; font-size:.9rem}
.suchwahl li.aktiv{background:var(--line-2); box-shadow:inset 3px 0 0 var(--kopf,#008391)}
.suchwahl li.leer{color:var(--ink-2); cursor:default}
.chips .suchwahl{min-width:220px}

/* ---------- Seitenleiste bleibt stehen, Version immer sichtbar (Christian, 16.10.2026) ----------
   Kopfzeile und Seitenleiste scrollen nicht mit; ein langes Menü scrollt in sich, die Version klebt unten. Nur Desktop. */
@media (min-width:821px){
  .top{position:sticky; top:0; z-index:40}
  nav.side{position:sticky; top:var(--kopfhoehe,56px); height:calc(100vh - var(--kopfhoehe,56px)); overflow-y:auto; padding-bottom:0; scrollbar-width:thin}
  nav.side .release{position:sticky; bottom:0; background:var(--surface); padding-bottom:.8rem}
  nav.side .release.warnung{position:static; padding-bottom:0}
}
.nw-feld{display:flex; flex-direction:column; gap:.35rem; align-items:flex-start; width:100%}
.nw-feld[hidden],.nw-alt[hidden]{display:none}

/* Meine Prüfungen (26.10.2026): heute → demnächst → zuletzt, am Handy große Knöpfe */
.pm-gruppe{font-size:1rem; margin:1.2rem 0 .5rem}
.pm-zeile{margin:.35rem 0}
.pm-hinweis{margin:.45rem 0; padding:.45rem .6rem; background:#FFF4DC; color:#8A5A00; border-radius:6px}
.pm-knoepfe{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.7rem}
@media (max-width:820px){
  .pm-knoepfe .btn{flex:1 1 auto; text-align:center; padding:.75rem .9rem; font-size:1rem}
  .pm-knoepfe .pm-haupt{flex-basis:100%}
}

/* Prüfnachweis (29.10.2026, Durchsicht): Hinweise „nicht gespeicherte Eingaben“ und „Noch offen“ – Text oben, Knöpfe darunter */
.entwurf-hinweis, .nw-offen{flex-wrap:wrap; gap:.5rem; align-items:center}
.nw-offen{margin:.6rem 0}
@media (max-width:820px){ .entwurf-hinweis .grow, .nw-offen .grow{flex-basis:100%} }

/* Prüfnachweis am Handy/Tablet (29.10.2026, Durchsicht P1): Tippflächen mind. 44 px, 16 px Schrift in Feldern
   (sonst zoomt das iPhone bei jedem Feld), Speichern/Abschließen als feste Leiste unten, Datum eigene Zeile */
@media (max-width:820px){
  form#nachweis input:not([type=checkbox]):not([type=radio]), form#nachweis select, form#nachweis textarea,
  .km-name, .navsuche{font-size:16px}
  form#nachweis input:not([type=checkbox]):not([type=radio]), form#nachweis select{min-height:44px}
  table.nw-eingabe input[type=date], table.nw-eingabe input[type=time]{font-size:16px; padding:.45rem .4rem}
  table.nw-eingabe td[data-l="Datum"]{grid-column:1 / -1}
  form#nachweis .schalter-wahl label{display:inline-flex; align-items:center; min-height:44px; padding:0 1rem; font-size:.9rem}
  form#nachweis label.klein{min-height:44px; padding:0 .4rem}
  form#nachweis label.klein input[type=checkbox]{width:22px; height:22px}
  form#nachweis .linkknopf{min-height:44px; padding:0 .6rem; font-size:.9rem}
  form#nachweis .btn, .kopfzeile .btn.small{min-height:44px; display:inline-flex; align-items:center; justify-content:center}
  .nw-aktionen{position:sticky; bottom:0; z-index:20; margin:0 calc(-1 * clamp(1rem,3vw,2.2rem)); padding:.6rem clamp(1rem,3vw,2.2rem) calc(.6rem + env(safe-area-inset-bottom));
               background:var(--surface); border-top:1px solid var(--line); box-shadow:0 -4px 12px rgba(0,0,0,.06)}
  .nw-aktionen .btn{flex:1 1 0; font-size:1rem}
  .km-knoepfe .btn{min-height:48px; font-size:1rem}
}

/* ---------- Wartung (Master, 05.11.2026) ---------- */
/* Bearbeiten klappt unter der Zeile auf – ohne Gestaltung lag das Formular rechtsbündig in der Aktionsspalte */
details.inline-details{display:inline-block; text-align:left}
details.inline-details[open]{display:block; margin-top:.4rem}
details.inline-details[open] > summary{margin-bottom:.5rem}
/* Felder einer Anlage im Raster – am Tablet zwei, am Handy eine Spalte */
.formraster{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.6rem .8rem; align-items:end; margin:.2rem 0 .6rem}
.formraster label{display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; color:var(--ink-2)}
.formraster .breit{grid-column:1 / -1}
.formraster input:not([type=checkbox]), .formraster select{width:100%}
/* Techniker: Termine von heute als große Karten (Brinktrine „Meine Termine“, Handy) */
.meine-heute{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:.8rem; margin-bottom:1rem}
.heute-karte .l{font-size:.8rem; color:var(--ink-2); font-weight:600}
@media (max-width:820px){ .heute-karte .btn{flex:1 1 100%; text-align:center; padding:.7rem 1rem; font-size:1rem} }
/* Mail-Vorschau der Erinnerung: wie sie ankommt, Zeilenumbrüche bleiben */
.mail-vorschau{white-space:pre-wrap; font-family:inherit; font-size:.88rem; background:var(--line-2); border-radius:var(--radius); padding:.8rem 1rem; margin:0}
/* QR-Etiketten: Bogen mit Aufklebern 70 × 37 mm (übliche A4-Bögen 3 × 8) */
.etiketten{display:grid; grid-template-columns:repeat(3, 70mm); gap:0; margin:0 auto}
.etikett{width:70mm; height:37mm; box-sizing:border-box; padding:2.5mm 3mm; display:flex; gap:2.5mm; align-items:center; border:1px dashed #ccd; overflow:hidden; break-inside:avoid}
.etikett-qr svg{width:29mm; height:29mm; display:block}
.etikett-text{display:flex; flex-direction:column; font-size:8pt; line-height:1.25; min-width:0}
.etikett-text b{font-size:9pt}
.etikett-text small{color:#666; margin-top:1mm}
@media print{ .etikett{border-color:transparent} .druckleiste{display:none} }
/* ---------- Cockpit-Konfigurator (Master, 05.11.2026) ---------- */
.konfig{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1rem; align-items:start}
.konfig-summe{position:sticky; top:calc(var(--kopfhoehe, 56px) + 1rem)}
.konfig-summe label{display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--ink-2); margin-top:.6rem}
/* Ohne min-width:0 und volle Feldbreite schiebt das Eingabefeld die Karte am Handy über den Rand */
.konfig > *{min-width:0}
.konfig-summe input, .konfig-summe select, .konfig-summe textarea{width:100%; box-sizing:border-box}
.konfig-summe .kpi{margin-bottom:.5rem}
.konfig-kat{opacity:.75; transition:opacity .15s}
.konfig-kat.an{opacity:1; border-color:var(--akzent)}
.konfig-kopf{display:flex; align-items:center; gap:.5rem; cursor:pointer; flex-wrap:wrap}
.konfig-modul{display:flex; gap:.5rem; align-items:flex-start; font-size:.86rem; padding:.3rem 0 .3rem 1.6rem; border-top:1px solid var(--line-2); cursor:pointer}
.konfig-modul input:disabled + span{color:var(--ink-2)}
/* Paket (ERP): Punkte zur Übersicht mit „anzeigen | ausblenden“ (12.11.2026) */
.konfig-punkte{border-top:1px solid var(--line-2); padding:.4rem 0 0 1.6rem; font-size:.86rem}
.konfig-punkt{display:flex; align-items:center; gap:.8rem; padding:.3rem 0; border-top:1px solid var(--line-2)}
.konfig-punkt > span:first-child{flex:1; min-width:0}
.konfig-punkt .schalter-wahl{flex:none; margin-top:0}
.konfig-punkt .schalter-wahl label:has(input:disabled){opacity:.5; cursor:default}
/* Gesamtpreis-Leiste: klebt unten, solange man in der Liste ist (12.11.2026) */
.konfig-leiste{position:sticky; bottom:0; z-index:5; display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1.2rem; margin-top:.8rem; padding:.7rem 1rem;
  background:var(--surface); border:1px solid var(--akzent); border-radius:var(--radius); box-shadow:0 -4px 16px rgba(0,0,0,.08); font-variant-numeric:tabular-nums}
.konfig-leiste-titel{font-weight:700; color:var(--akzent)}
.konfig-leiste b{font-size:1.1rem}
.konfig-leiste .sub{margin-left:auto}
.konfig-preis{margin-left:auto; font-size:.8rem; color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
@media (max-width:900px){ .konfig{grid-template-columns:1fr} .konfig-summe{position:static; order:-1} }
/* Einstellungen → Module: Preise für den Konfigurator neben dem Schalter (Christian, 05.11.2026) */
.modul-rechts{display:flex; gap:.8rem; align-items:center; justify-content:flex-end; flex-wrap:wrap}
.preise-zeile{display:inline-flex; gap:.5rem; align-items:center; margin:0}
.preisfeld{display:inline-flex; gap:.25rem; align-items:center; font-size:.75rem; color:var(--ink-2); white-space:nowrap}
.preisfeld input{width:5.5rem; text-align:right}
.preise-zeile.gespeichert::after{content:"✓"; color:var(--ok); font-weight:700}
.preise-zeile.fehler::after{content:"nicht gespeichert"; color:var(--warn); font-size:.75rem}
/* Typenschild-Etikett (Geräte): mehr Zeilen auf demselben Aufkleber – kleiner, oben bündig, sonst schneidet der Rand oben ab */
.etikett.typenschild{align-items:flex-start}
.etikett.typenschild .etikett-text{font-size:6.5pt; line-height:1.2}
.etikett.typenschild .etikett-text b{font-size:7.5pt}
.etikett.typenschild .etikett-qr svg{width:26mm; height:26mm}
/* ---------- Touren (Master, 05.11.2026): Skizze ohne fremden Kartendienst ---------- */
.tour-karte{width:100%; height:auto; background:var(--line-2); border-radius:var(--radius)}
.tour-karte polyline{fill:none; stroke-width:2.5; stroke-linejoin:round}
.tour-karte .tour-neu{stroke:var(--akzent)}
.tour-karte .tour-alt{stroke:var(--ink-2); stroke-dasharray:5 5; opacity:.6}
.tour-karte .tour-punkt{fill:#fff; stroke:var(--akzent); stroke-width:2.5}
.tour-karte .tour-nr{font-size:11px; font-weight:700; fill:var(--ink)}
.tour-karte .tour-start{fill:var(--ink)}
.tour-karte text{font-size:11px; fill:var(--ink)}
tr.markiert td{background:var(--akzent-hell, #F4FAFA)}
/* Prüfliste doppelte Kunden (Mobilis) */
.dubletten-gruppe{border:1px solid var(--line); border-radius:var(--radius); padding:.6rem .8rem; margin-bottom:.6rem}
.dubletten-gruppe .dublette{display:flex; gap:.5rem; align-items:center; padding:.2rem 0}
/* To-do als Tafel (Aufgaben-Ablauf aus MEIGRA, 06.11.2026): vier Spalten, auf schmalen Bildschirmen untereinander */
.brett{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.8rem; margin-bottom:1rem; align-items:start}
.brett-spalte{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:.7rem .8rem; min-width:0}
.brett-spalte h2{font-size:1rem; margin:0 0 .6rem}
.aufgabe-karte{border:1px solid var(--line); border-radius:var(--radius); padding:.55rem .65rem; margin-bottom:.55rem; overflow-wrap:anywhere}
.aufgabe-karte.markiert{border-left:4px solid var(--akzent)}
.aufgabe-zeile{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; margin:.35rem 0}
.aufgabe-knoepfe{display:flex; flex-wrap:wrap; gap:.3rem; align-items:flex-start; margin-top:.35rem}
.aufgabe-knoepfe details[open]{flex-basis:100%}
.aufgabe-verlauf{margin-top:.3rem; font-size:.85em}
.aufgabe-verlauf ul{margin:.3rem 0 0; padding-left:1rem}
@media (max-width:1100px){.brett{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.brett{grid-template-columns:1fr}}
/* Kundenportal (aus MEIGRA, 06.11.2026): eigener schlichter Rahmen ohne Cockpit-Menü, Karten wie im Cockpit */
body.portal{margin:0}
.portal-kopf{display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between; padding:.7rem 1.2rem; background:var(--surface); border-bottom:1px solid var(--line)}
.portal-marke{display:flex; flex-direction:column; gap:.1rem; min-width:0}
.portal-marke img{max-height:38px; width:auto}
.portal-nav{display:flex; flex-wrap:wrap; gap:.35rem}
.portal-inhalt{max-width:1100px; margin:0 auto; padding:1rem 1.2rem 2rem}
.portal-band{margin:0; border-radius:0}
.portal-raster{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:1rem; align-items:start}
.portal-weg{display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0 1rem}
.portal-weg span{font-size:.8rem; padding:.2rem .55rem; border:1px solid var(--line); border-radius:999px; color:var(--ink-2)}
.portal-weg span.jetzt{border-color:var(--akzent); color:var(--akzent); font-weight:700}
.portal-nachricht{border:1px solid var(--line); border-radius:var(--radius); padding:.5rem .65rem; margin-bottom:.5rem; overflow-wrap:anywhere}
.portal-nachricht.kunde{background:var(--bg)}
.portal-fortschritt{height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:-.4rem 0 1rem}
.portal-fortschritt div{height:100%; background:var(--ok)}
.portal-daten{display:grid; grid-template-columns:max-content 1fr; gap:.35rem 1rem; margin:0}
.portal-daten dt{color:var(--ink-2)}
.portal-daten dd{margin:0; overflow-wrap:anywhere}
code.portal-link{display:block; overflow-wrap:anywhere; margin-top:.3rem; user-select:all}
.portal-raster .termin-liste li{overflow-wrap:anywhere}   /* lange Dateinamen dürfen die Karte nicht aufziehen */
.nur-lesen .portal-inhalt form{display:none}   /* Kundenansicht: nur lesen – Formulare gar nicht erst zeigen (abgelehnt würden sie ohnehin) */
@media (max-width:760px){.portal-raster{grid-template-columns:minmax(0,1fr)} .portal-inhalt{padding:1rem}}
/* Dashboard & Kalender (MEIGRA, 06.11.2026) */
.dash-raster{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; align-items:start}
.dash-raster .card{margin-bottom:0}
.dash-liste{list-style:none; margin:.6rem 0 0; padding:0}
.dash-liste li{display:flex; gap:.7rem; align-items:flex-start; padding:.45rem 0; border-top:1px solid var(--line-2); overflow-wrap:anywhere}
.dash-liste li:first-child{border-top:0}
.dash-liste li > div{min-width:0; flex:1}
.dash-tag{flex:0 0 2.9rem; text-align:center; font-size:.7rem; color:var(--ink-2); line-height:1.15; border:1px solid var(--line); border-radius:var(--radius); padding:.2rem 0}
.dash-tag b{display:block; font-size:1.05rem; color:var(--ink)}
.dash-liste .termin{display:block; font-weight:600}
.kal-tag{font-size:.95rem; margin:1rem 0 .2rem; padding-bottom:.2rem; border-bottom:1px solid var(--line)}
.kal-tag.heute{color:var(--akzent)}
/* Einträge ohne eigene Seite (Abwesenheiten) wie Termine aussehen lassen, aber nicht als Link */
span.termin{display:block; font-size:.74rem; line-height:1.25; padding:.15rem .3rem; margin-bottom:.15rem; border-left:4px solid var(--intern); background:var(--bg); border-radius:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink-2)}
.dash-liste .termin{white-space:normal}
@media (max-width:900px){.dash-raster{grid-template-columns:minmax(0,1fr)}}
.brett.brett-3{grid-template-columns:repeat(3,minmax(0,1fr))}   /* Rückfragen: drei Spalten */
@media (max-width:900px){.brett.brett-3{grid-template-columns:minmax(0,1fr)}}
/* Kamera-Scan im Wartungsbericht (Brinktrine 21.10.2026) */
.scan-fenster{position:fixed; inset:0; z-index:300; background:rgba(0,0,0,.88); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.8rem; padding:16px}
.scan-fenster[hidden]{display:none}
.scan-fenster video{width:100%; max-width:520px; border-radius:8px; background:#000}
.scan-fenster .sub{color:#fff}

/* 📱 Unterwegs (Master, 06.11.2026): Karten für den Daumen, große Knöpfe, oben eine Zeile zum Netz */
.uw-netz{font-size:.85rem; padding:.45rem .8rem; border-radius:var(--radius); margin:0 0 .8rem; background:var(--line-2); color:var(--ink-2)}
.uw-netz.ok{background:var(--ok-bg); color:var(--ok)}
.uw-netz.gelb{background:#FFF4DC; color:#8A5A00}
.uw-netz.aus{background:var(--warn-bg); color:var(--warn)}
.uw-tag{font-size:1rem; margin:1.1rem 0 .5rem; color:var(--ink-2)}
.uw-karte{margin-bottom:.8rem}
.uw-karte .l{font-size:.8rem; color:var(--ink-2); font-weight:600}
.uw-kunde{margin:.15rem 0 .3rem; font-size:1.1rem}
.uw-zeile{margin:.15rem 0}
.uw-stand{margin:.6rem 0 0; font-weight:600}
.uw-stand.laeuft{color:var(--akzent)}
.uw-wartet{margin:.3rem 0 0; font-size:.82rem; color:#8A5A00}
.uw-knoepfe{margin:.8rem 0 0}
.uw-zu{opacity:.75}
.uw-abgelehnt{align-items:flex-start; gap:.6rem}
.btn.uw-gross{padding:.75rem 1.2rem; font-size:1rem; font-weight:600}
@media (max-width:820px){ .uw-knoepfe .btn{flex:1 1 40%; text-align:center} .uw-knoepfe .btn.uw-gross{flex:1 1 100%; padding:.9rem 1rem; font-size:1.05rem} }

/* 📓 Notizbuch am Einsatz (Mobilis Lift-Service, Master 06.11.2026) */
.notizbuch{list-style:none; margin:0; padding:0}
.notizbuch li{display:flex; gap:.8rem; padding:.4rem 0; border-bottom:1px solid var(--line-2)}
.notizbuch li:last-child{border-bottom:0}
.notizbuch .nb-zeit{flex:0 0 5.6rem; font-size:.8rem; color:var(--ink-2); white-space:nowrap; padding-top:.1rem}
.notizbuch .nb-stand .nb-text, .notizbuch .nb-mail .nb-text{color:var(--ink-2); font-size:.88rem}
@media (max-width:820px){ .notizbuch li{flex-direction:column; gap:.1rem} .notizbuch .nb-zeit{flex:none} }

/* Branchen-Demo (06.11.2026): vier Knöpfe mit Erklärung */
.branchen-wahl{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.8rem; margin:.4rem 0 .8rem}
.branchen-wahl .branche{display:flex; flex-direction:column; gap:.35rem; padding:.7rem; border:1px solid var(--line); border-radius:var(--radius)}
.branchen-wahl .branche.on{border-color:var(--akzent)}

/* ✍️ Bericht & Unterschrift in Unterwegs (06.11.2026): Vollbild, geht ohne Netz */
.uw-bericht{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.45); overflow:auto; padding:16px}
.uw-bericht-innen{max-width:640px; margin:0 auto; background:var(--surface); border-radius:var(--radius); padding:1rem 1.1rem}
.uw-bericht-innen h2{margin:.1rem 0 .2rem}
.uw-bericht-innen h3{margin:1rem 0 .3rem; font-size:1rem}
.uw-bericht-innen canvas.unterschrift{display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:6px; background:#fff; touch-action:none}
.uw-feld{display:block; margin:.6rem 0 0}
.uw-feld textarea, .uw-feld input{display:block; width:100%; margin-top:.25rem}

/* Dashboard (Christian, 11.11.2026): „Für mich“ und „Die nächsten 14 Tage“ gleich hoch – 5 Einträge, die 14 Tage rollen darin */
.dash-raster{--dash-fuenf:19rem}
.dash-raster .dash-breit{grid-column:1/-1}
.dash-raster .dash-paar{align-self:stretch; display:flex; flex-direction:column}
.dash-fuer-mich .dash-liste{min-height:var(--dash-fuenf)}
.dash-scroll{position:relative; flex:1 1 auto; min-height:var(--dash-fuenf); margin-top:.6rem}
.dash-scroll > .dash-liste{position:absolute; inset:0; margin:0; overflow-y:auto; padding-right:.3rem}

/* Konfigurator: Demodaten beim Vorführen (11.11.2026) – die gewählte Vorlage nutzt das vorhandene .chip.on */
.konfig-demo{display:block; margin:.6rem 0}

/* „Von Kunden“ folgt der Höhe von „Letzte Belege“ (11.11.2026) – nur eine kleine Mindesthöhe, falls die Belege fehlen */
.dash-scroll.dash-scroll-folgt{min-height:9rem}

/* Profil oben rechts wie bei MzW (11.11.2026): Avatar mit Kürzel oder Zeichen, Klick öffnet Zeichen und Kennwort */
.profil{position:relative}
.profil > summary{list-style:none; display:flex; align-items:center; gap:.45rem; cursor:pointer; border-radius:999px; padding:.15rem .6rem .15rem .15rem}
.profil > summary::-webkit-details-marker{display:none}
.profil > summary:hover, .profil[open] > summary{background:var(--line-2)}
.avatar{display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:50%; background:var(--akzent); color:#fff; font-weight:700; font-size:.8rem; letter-spacing:.02em; flex:0 0 auto}
.avatar.avatar-zeichen{background:var(--line-2); font-size:1.15rem}
.avatar.gross{width:3rem; height:3rem; font-size:1.1rem}
.avatar.gross.avatar-zeichen{font-size:1.7rem}
.profil-name{font-size:.85rem; font-weight:600; white-space:nowrap}
.profil-fenster{position:absolute; right:0; top:calc(100% + .4rem); z-index:50; width:min(340px, calc(100vw - 32px)); background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 10px 30px rgba(0,0,0,.15); padding:.9rem}
.profil-wer{display:flex; gap:.7rem; align-items:center; margin-bottom:.6rem}
.profil-abschnitt{border-top:1px solid var(--line-2); padding-top:.6rem; margin-top:.6rem}
.profil-abschnitt .l{font-size:.78rem; font-weight:600; color:var(--ink-2); margin-bottom:.35rem}
.profil-zeichen{display:flex; flex-wrap:wrap; gap:.25rem}
.profil-zeichen .zeichen{width:2.1rem; height:2.1rem; border:1px solid var(--line); border-radius:8px; background:var(--surface); font-size:1.1rem; cursor:pointer; padding:0}
.profil-zeichen .zeichen.kuerzel{font-size:.75rem; font-weight:700}
.profil-zeichen .zeichen.an{border-color:var(--akzent); box-shadow:0 0 0 2px var(--akzent) inset}
.profil-links{display:flex; gap:1rem; flex-wrap:wrap}
@media (max-width:820px){ .profil-name{display:none} }

/* Belegmaske wie im KPNS-Cockpit (11.11.2026): Kunde links, Kopf rechts, Einleitung/Schluss als Knöpfe mit Fenster, Artikeltext */
.beleg-kopf-grid{display:grid; grid-template-columns:minmax(260px, 1fr) minmax(300px, 1.5fr); gap:1rem 1.6rem; align-items:start}
.beleg-kopf-grid .posform{margin-top:0; grid-template-columns:1fr 1fr}
@media (max-width:860px){ .beleg-kopf-grid{grid-template-columns:1fr} }
.beleg-feld{display:flex; flex-direction:column; gap:.2rem; font-size:.78rem; color:var(--ink-2); margin-bottom:.55rem}
.beleg-feld textarea{width:100%; resize:vertical}
.beleg-kunde-info{font-size:.82rem; color:var(--ink-2); margin:-.25rem 0 .6rem}
.beleg-texte{flex-direction:column; align-items:stretch; gap:0}
.textknopf{display:flex; gap:.5rem; align-items:baseline; width:100%; margin-top:.4rem; font:inherit; font-size:.85rem; text-align:left; border:1px solid var(--line); border-radius:var(--radius); background:var(--bg); padding:.4rem .65rem; cursor:pointer; color:var(--ink)}
.textknopf:hover,.textknopf:focus-visible{border-color:var(--akzent); background:var(--surface)}
.textknopf b{color:var(--akzent); white-space:nowrap; font-weight:600}
.textknopf span{color:var(--ink-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.linkknopf{background:none; border:none; padding:0; margin-top:.2rem; font:inherit; font-size:.8rem; color:var(--akzent); cursor:pointer; text-align:left}
.linkknopf:hover{text-decoration:underline}
.pos-text{display:block; font-size:.82rem; color:var(--ink-2); white-space:pre-line; margin-top:.15rem}
.standard-knopf{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
/* Fenster „Neue Version“ nach dem Login (11.11.2026, wie KPNS-Cockpit) */
dialog.neue-version{width:min(480px, calc(100vw - 2rem))}
.neue-version-liste{margin:.4rem 0 1rem; padding-left:1.1rem; display:flex; flex-direction:column; gap:.3rem}

/* Schornsteinprüfung (12.11.2026): Formular wie die Vorlage – Kästchen in Reihen, Auswahllisten, eingerückte Mängel; am Tablet groß genug zum Tippen */
.sk-punkt{padding:.7rem 1rem}
.sk-punkt > summary{cursor:pointer; list-style-position:outside; padding:.2rem 0; display:flex; flex-wrap:wrap; gap:.4rem; align-items:center}
.sk-punkt[open] > summary{margin-bottom:.5rem; border-bottom:1px solid var(--line-2); padding-bottom:.5rem}
.sk-stammpunkt{border-top:1px solid var(--line-2); padding:.5rem 0}
.sk-kopf{font-size:1rem; color:var(--akzent); margin:1.4rem 0 .5rem; text-decoration:underline}
.sk-zeile{display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.1rem; margin:.25rem 0}
.sk-zeile.sk-mit-label{flex-wrap:nowrap; align-items:flex-start}
.sk-label{min-width:11rem; padding-top:.45rem; color:var(--ink-2)}
.sk-optionen{display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.1rem}
.sk-zeilen .sk-optionen{flex-direction:column; align-items:flex-start}
.sk-umbruch{flex-basis:100%; height:0}
.sk-zeilen .sk-umbruch{display:none}
details label.sk-wahl,label.sk-wahl{display:inline-flex; flex-direction:row; align-items:center; gap:.45rem; min-height:2.2rem; cursor:pointer; margin:0; font-size:inherit; color:inherit}   /* sonst greift „details label“ (untereinander) */
.sk-wahl input{width:1.25rem; height:1.25rem; flex:none; accent-color:var(--akzent)}
.sk-einzug{margin-left:2rem}
.sk-text{margin:.45rem 0 .2rem}
.sk-fett,.sk-fett .sk-wahl{font-weight:600}
.sk-rot{color:var(--warn); font-weight:600}
.sk-feld{padding:.3rem .4rem !important; max-width:100%}
.sk-auswahl{max-width:100%; min-width:14rem}
.sk-mangel .sk-wahl{min-width:13rem}
.sk-reihe span{white-space:normal}
.sk-stamm{position:relative}
.sk-stamm::before{content:"📌"; position:absolute; left:-1.15rem; top:.6rem; font-size:.7rem; opacity:.7}
.sk-textfeld{width:100%}
.sk-fotos{margin-top:.6rem; padding-top:.5rem; border-top:1px dashed var(--line)}
.sk-fotos .fotozeile{display:flex; flex-wrap:wrap; gap:.5rem; align-items:center}
.thumbweg-knopf{position:absolute; top:-6px; right:-6px; width:22px; height:22px; border-radius:50%; border:none; background:var(--ink); color:#fff; font-size:.65rem; line-height:22px; padding:0}
.sk-sprung{position:sticky; top:0; z-index:5; display:flex; flex-wrap:wrap; gap:.25rem; background:var(--bg); padding:.4rem 0; margin:.5rem 0}
.sk-sprung a{font-size:.78rem; text-decoration:none; border:1px solid var(--line); background:var(--surface); border-radius:6px; padding:.15rem .45rem; color:var(--ink-2)}
.sk-sprung a.sk-sprung-ok{background:var(--ok-bg); color:var(--ok); border-color:transparent}
.sk-sprung a.sk-sprung-mangel{background:#FFF4DC; color:#8A5A00; border-color:transparent}
.sk-sprung a.sk-sprung-sr{background:var(--warn-bg); color:var(--warn); border-color:transparent; font-weight:600}
.sk-sprung a.sk-sprung-nicht,.sk-sprung a.sk-sprung-teil{background:var(--line-2)}
.sk-mess input{width:4.2rem; padding:.25rem .3rem !important; text-align:right}
.sk-mess td:last-child input{width:9rem; text-align:left}
.sk-mess th{font-size:.75rem; text-align:center}
.sk-mess .sk-unter{color:var(--warn); font-weight:700; border-color:var(--warn) !important}
.sk-maengel{margin:.2rem 0 .8rem 1.2rem}
.sk-maengel li{margin:.15rem 0}
.sk-aktionen{position:sticky; bottom:0; background:var(--bg); padding:.6rem 0; z-index:5}
@media (max-width:640px){
  .sk-zeile.sk-mit-label{flex-wrap:wrap}
  .sk-label{min-width:0; flex-basis:100%; padding-top:0}
  .sk-einzug{margin-left:.9rem}
  .sk-auswahl{min-width:0; width:100%}
}
/* Schornsteinprüfung am Tablet (12.11.2026): Finger statt Maus – größere Kästchen und Zeilen; Sprungleiste klebt unter der Kopfzeile */
@media (pointer:coarse){ details label.sk-wahl, label.sk-wahl{min-height:2.75rem} .sk-wahl input{width:1.55rem; height:1.55rem} .sk-sprung a{padding:.35rem .6rem; font-size:.85rem} }
@media (min-width:821px){ .sk-sprung{top:var(--kopfhoehe, 0px)} }
.sk-planen fieldset{border:1px solid var(--line); border-radius:var(--radius); padding:.4rem .8rem .7rem}
/* Dashboard anpassen (12.11.2026, wie KPNS-Cockpit) */
.dash-wahl{list-style:none; margin:0 0 .4rem; padding:0; display:flex; flex-direction:column; gap:.3rem; max-width:420px}
.dash-wahl li{display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:var(--radius); padding:.25rem .5rem; background:var(--surface)}
.dash-wahl .checkzeile{flex:1}
.dash-pfeile{display:inline-flex; gap:.2rem}
.dash-pfeile .btn{min-width:2.2rem}
.dash-bloecke{display:flex; flex-direction:column; gap:.3rem}
/* Betreuung & Anpassung im Konfigurator (12.11.2026) */
.konfig-betreuung .konfig-modul{padding-left:0}
.konfig-einrichtung .konfig-preis{display:inline-flex; align-items:center; gap:.3rem}

/* Artikeltext mit Formatierung (12.11.2026): Knöpfe F K U • über dem Schreibfeld */
.format-box{border:1px solid var(--line); border-radius:8px; background:var(--surface); overflow:hidden}
.format-box:focus-within{border-color:var(--akzent); box-shadow:0 0 0 3px color-mix(in srgb, var(--akzent) 18%, transparent)}
.format-leiste{display:flex; gap:.2rem; padding:.25rem; border-bottom:1px solid var(--line-2); background:var(--line-2)}
.format-leiste button{min-width:2rem; height:1.9rem; padding:0 .5rem; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink); font:inherit; font-size:.9rem; cursor:pointer}
.format-leiste button:hover{background:var(--surface); border-color:var(--line)}
.format-feld{padding:.5rem .65rem; line-height:1.45; outline:none; overflow-wrap:anywhere; color:var(--ink); font-size:.92rem; max-height:50vh; overflow:auto}
.format-feld:empty::before{content:attr(data-platzhalter); color:var(--ink-2)}
.format-feld ul, .artikeltext ul{margin:.15rem 0; padding-left:1.2rem}
.pos-text.artikeltext{white-space:normal}

/* Mailing (aus Promundius, Master 12.11.2026): Mailfenster im Stil des Cockpits */
.mw{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); max-width:1060px}
.mw-leiste{display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; padding:.55rem .7rem; border-bottom:1px solid var(--line); background:var(--bg); border-radius:var(--radius) var(--radius) 0 0}
.mw-split{position:relative; display:inline-flex}
.mw-split > .btn:first-child{border-radius:6px 0 0 6px}
.mw-split .mw-pfeil{border-radius:0 6px 6px 0; border-left:1px solid rgba(255,255,255,.35); padding-left:.55rem; padding-right:.55rem}
.mw-plan{display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:300px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(22,33,47,.14); padding:.9rem}
.mw-plan.offen{display:flex; flex-direction:column; gap:.55rem}
.mw-plan h3{margin:0; font-size:.95rem}
.mw-plan .sub{margin:0; font-size:.8rem}
.mw-schnell{display:flex; flex-wrap:wrap; gap:.35rem}
.mw-trenner{width:1px; height:22px; background:var(--line); margin:0 .2rem}
.mw-zeile{display:flex; align-items:center; gap:.7rem; padding:0 .9rem; min-height:46px; border-bottom:1px solid var(--line-2); flex-wrap:wrap}
.mw-lbl{width:3.6rem; flex:none; font-size:.88rem; color:var(--ink-2)}
.mw-an{width:3.6rem; flex:none}
.mw-chips{display:flex; flex-wrap:wrap; gap:.35rem; flex:1; padding:.45rem 0; align-items:center; cursor:pointer}
.mw-zahl{margin-left:auto; font-size:.82rem; color:var(--ink-2)}
.mw-zahl b{color:var(--ink)}
.mw-panel{display:none; padding:.8rem .9rem 1rem 5.2rem; border-bottom:1px solid var(--line-2); background:#FAFBFC}
.mw-panel.offen{display:block}
.mw-panel h4{margin:0 0 .4rem; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}
.mw-panel h4 a{text-transform:none; letter-spacing:0; margin-left:.5rem}
.mw-gruppe{display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:.9rem; align-items:center}
.mw-pill{position:relative; display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .85rem .3rem .55rem; border:1px solid var(--line); border-radius:999px; background:var(--surface); font-size:.88rem; cursor:pointer; user-select:none}
.mw-pill:hover{background:var(--line-2)}
.mw-pill input{position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none}
.mw-pill .ck{width:18px; height:18px; border-radius:50%; border:1.5px solid #8A94A3; display:grid; place-items:center; background:#fff}
.mw-pill .ck svg{opacity:0}
.mw-pill small{color:var(--ink-2)}
.mw-pill:has(input:checked){background:#E8EBF2; border-color:var(--akzent); color:var(--akzent); font-weight:600}
.mw-pill:has(input:checked) .ck{background:var(--akzent); border-color:var(--akzent)}
.mw-pill:has(input:checked) .ck svg{opacity:1}
.mw-pill:has(input:focus-visible){outline:2px solid var(--akzent); outline-offset:2px}
.mw-einzel button{border:0; background:none; color:inherit; font-size:1rem; line-height:1; padding:0 0 0 .2rem; cursor:pointer}
.mw-dazu{display:flex; flex-wrap:wrap; gap:.45rem; align-items:center}
.mw-dazu .suchwahl{min-width:320px; flex:1}
.mw-dazu input[type=email]{min-width:220px}
.mw-betreff{flex:1; border:0 !important; outline:0; font-size:1rem; padding:.7rem 0 !important; background:transparent !important}
.mw-band{padding:.45rem .9rem; border-bottom:1px solid var(--line); margin:0}
.mw-band select{height:32px; padding:0 .3rem !important; font-size:.85rem}
.mw-farbe{position:relative; display:inline-grid; place-items:center; width:34px; height:32px; border:1px solid var(--line); border-radius:6px; background:var(--surface)}
.mw-farbe span{font-weight:700; border-bottom:3px solid var(--akzent); line-height:16px}
.mw-farbe input{position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%}
.mw-anh{display:flex; flex-wrap:wrap; gap:.5rem; padding:.7rem .9rem 0}
.mw-anh:empty{display:none}
.mw-kachel{display:flex; align-items:center; gap:.6rem; border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem; max-width:300px; background:var(--surface)}
.mw-kachel .n{font-size:.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px}
.mw-kachel .sub{font-size:.75rem}
.mw-kachel button{border:0; background:none; cursor:pointer; color:var(--ink-2); font-size:1.1rem}
.mw-kachel.weg{opacity:.45; text-decoration:line-through}
.mw-text{min-height:340px; padding:1rem 1.1rem 1.5rem; outline:0; font-size:15px; line-height:1.55; overflow-wrap:anywhere}
.mw-text:empty:before{content:attr(data-ph); color:#8A94A3}
.mw-text p{margin:0 0 .7rem}
.mw-fuss{display:flex; flex-wrap:wrap; gap:.4rem 1.2rem; justify-content:space-between; padding:.55rem .9rem; border-top:1px solid var(--line); background:var(--bg); border-radius:0 0 var(--radius) var(--radius); font-size:.8rem; color:var(--ink-2)}
#mwAnhGroesse.zu-viel{color:#B42318; font-weight:600}
.mw-balken{background:var(--line-2); border-radius:6px; height:12px; overflow:hidden}
.mw-balken div{height:12px; background:var(--ok); transition:width .4s}
.mw-vorschau{border:1px solid var(--line); border-radius:var(--radius); padding:1rem 1.1rem; font-size:15px; line-height:1.55; background:#fff}
.mw-vorschau p{margin:0 0 .7rem}
@media (max-width:820px){ .mw-panel{padding-left:.9rem} .mw-lbl,.mw-an{width:auto} .mw-dazu .suchwahl{min-width:0; flex:1 1 100%} .mw-dazu input[type=email]{min-width:0; flex:1} .mw-zahl{margin-left:0; width:100%} }
.mw-band{display:flex; flex-wrap:wrap; align-items:center; gap:4px; background:var(--surface)}
.mw-band .trenner{width:1px; height:20px; background:var(--line); margin:0 4px}
.mw-text ul,.mw-text ol,.mw-vorschau ul,.mw-vorschau ol{margin:.2rem 0 .7rem; padding-left:1.4rem}
.btn.btn-loeschen{background:var(--surface); color:#B42318; border:1px solid #F1B5B0}
.btn.btn-loeschen:hover{background:#FDECEC; color:#912018}

/* Artikelsuche über den Positionen im Beleg (12.11.2026, wie MEIGRA) */
.pos-suche{display:flex; gap:.75rem; align-items:center}
.pos-suche > input{flex:1; min-width:220px; max-width:520px; font-weight:400; text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--ink)}
.pos-treffer{position:fixed; z-index:60; max-height:340px; overflow:auto; text-align:left; font-weight:400; text-transform:none; letter-spacing:0; font-size:.9rem; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.pos-treffer-zeile{display:flex; gap:.6rem; align-items:center; width:100%; padding:.5rem .75rem; border:0; border-top:1px solid var(--line-2); background:none; color:inherit; font:inherit; text-align:left; cursor:pointer}
.pos-treffer-zeile:first-child, .pos-treffer-info + .pos-treffer-zeile{border-top:0}
.pos-treffer-info{padding:.4rem .75rem; border-bottom:1px solid var(--line-2); background:var(--line-2)}
.pos-treffer-zeile:hover{background:var(--line-2)}
.pos-treffer-zeile.aktiv, .pos-treffer-zeile:focus-visible{background:var(--line-2); outline:2px solid var(--akzent); outline-offset:-2px}
.pos-treffer-zeile.genommen{background:var(--ok-bg)}
.pos-treffer-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.pos-treffer-preis{min-width:90px; display:flex; flex-direction:column; text-align:right; font-variant-numeric:tabular-nums}
.pos-treffer-plus{flex:none; width:1.2rem; text-align:center}
tr.pos-neu-genommen td{background:var(--ok-bg); transition:background .6s}
@media (max-width:700px){.pos-suche{flex-wrap:wrap} .pos-suche > input{min-width:160px}}

/* Schornsteinprüfung Schritt für Schritt (12.11.2026): nur der aktuelle Punkt, Fortschritt oben, Zurück | Übersicht | Weiter unten */
.sk-schritt-kopf, .sk-schritt-fuss{display:none}
[data-sk-nur][hidden], .sk-start[hidden], .sk-schritt-knoepfe [hidden]{display:none !important}
body.sk-schrittmodus .kpis, body.sk-schrittmodus .sk-kopf, body.sk-schrittmodus .sk-sprung:not(.sk-offen){display:none}
body.sk-schrittmodus:not(.sk-laeuft) [data-sk-schritt], body.sk-schrittmodus [data-sk-schritt].sk-aus{display:none}
body.sk-schrittmodus .sk-aktionen{display:none}
body.sk-schrittmodus.sk-letzter .sk-aktionen{display:flex}
body.sk-schrittmodus.sk-laeuft .sk-schritt-kopf{display:block; position:sticky; top:var(--kopfhoehe, 56px); z-index:6; background:var(--bg); padding:.5rem 0 .6rem; margin-bottom:.4rem; border-bottom:1px solid var(--line)}
.sk-schritt-zeile{display:flex; flex-direction:column; gap:.1rem; line-height:1.3}
.sk-schritt-zeile strong{font-size:1.05rem}
.sk-fortschritt{height:6px; margin-top:.45rem; border-radius:999px; background:var(--line); overflow:hidden}
.sk-fortschritt span{display:block; height:100%; width:0; background:var(--akzent); transition:width .25s}
body.sk-schrittmodus.sk-laeuft form[data-sk-schritte]{min-height:calc(100vh - var(--kopfhoehe, 56px))}   /* auch kurze Schritte: Leiste kann immer oben anliegen */
.sk-schritt-knoepfe{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:.55rem}   /* Zurück | Übersicht | Weiter immer an derselben Stelle oben */
.sk-schritt-knoepfe [data-weiter]{margin-left:auto; min-width:8rem}
.sk-schritt-stand{flex:1 1 8rem; min-width:0}
body.sk-schrittmodus .sk-sprung.sk-offen{display:flex}
body.sk-schrittmodus.sk-laeuft [data-sk-schritt] > summary{cursor:default}
body.sk-schrittmodus.sk-laeuft [data-sk-schritt] > summary > strong, body.sk-schrittmodus.sk-laeuft [data-sk-schritt] > h2:first-child{display:none}   /* Titel steht oben in der Schrittleiste */
@media (max-width:820px){ body.sk-schrittmodus.sk-laeuft .sk-schritt-kopf{top:0} }   /* am Handy klebt die Kopfzeile nicht */
@media (max-width:600px){
  body.sk-schrittmodus.sk-laeuft .sk-schritt-knoepfe .btn{padding:.55rem .8rem}
  .sk-schritt-knoepfe [data-weiter]{min-width:0; flex:1 1 40%}
  .sk-schritt-knoepfe [data-zurueck]{flex:1 1 30%}
  .sk-schritt-stand{order:5; flex-basis:100%}
}

/* Kachel-Gruppen (ERP: Kunden | Lieferanten, 12.11.2026) */
.kachel-gruppe{margin:1.2rem 0 .5rem; font-size:1rem}
[data-lieferanschrift-feld][hidden]{display:none}