/* Ergänzungen zum Entwurfs-CSS (app.css = unveränderter Entwurf): Navigation als Links, Quellenzeile, Fehler, Konflikt. */
body{margin:0}img{max-width:100%}
.seg a{display:inline-block;border:0;background:transparent;padding:7px 14px;border-radius:999px;font-weight:600;font-size:14px;color:var(--muted);text-decoration:none}
.seg a[aria-current="page"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgb(0 0 0 / .12)}
.seg button:disabled{opacity:.5;cursor:not-allowed}
form.inline{display:inline;margin:0}
a{color:var(--accent)}
.src{font-size:12px;color:var(--muted);padding:6px 16px 10px;border-top:1px dashed var(--line)}
.src.alone{border-top:0;padding:4px 0 0}
.errbox{border-left:3px solid var(--crit);background:var(--crit-soft);border-radius:4px;padding:10px 12px;font-size:13.5px;margin:10px 16px}
.errbox b{display:block;color:var(--crit)}
.warnbox{border-left:3px solid var(--warn);background:var(--warn-soft);border-radius:4px;padding:8px 12px;font-size:13.5px;margin:10px 16px}
.kpi .err{color:var(--crit);font-weight:600;font-size:14px;margin-top:6px}
.unknown{color:var(--muted);font-style:italic}
.ev .tag.conf{color:var(--crit);border-color:var(--crit)}
.ev.Beratung{border-left-color:var(--muted)}
.ev.Termin,.ev.Lieferung{border-left-color:var(--muted)}
.ev.dash{border-style:dashed}
.ev .ts{color:var(--muted);font-weight:400}
.wxnone{font-weight:500;font-size:12px;color:var(--muted)}
.pstep{width:100%;cursor:pointer;font:inherit;color:inherit}
a.pstep{display:block;text-decoration:none}
.pend li.x .pt{text-decoration:line-through;color:var(--muted)}
.contra{border-left:3px solid var(--crit);background:var(--crit-soft);border-radius:4px;padding:8px 10px;font-size:13.5px}
.contra b{display:block;color:var(--crit)}
.rowlink{color:inherit;text-decoration:none}
tr.row td a.tn{color:var(--fg);text-decoration:none;font-weight:600}
.pend-tabs a{border:0;background:transparent;color:var(--muted);font-size:13px;font-weight:600;padding:4px 8px;border-radius:5px;text-decoration:none}
.pend-tabs a[aria-current="true"]{background:var(--sunk);color:var(--fg)}
.note-readonly{font-size:13px;color:var(--muted);padding:10px 16px}
.msg.err{align-self:flex-start;background:var(--crit-soft);color:var(--crit);border-bottom-left-radius:3px}
.chatwrap select{width:100%}
.hnew{margin-top:10px}
.convs{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.convs a{display:block;padding:6px 8px;border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--fg);font-size:13.5px;background:var(--surface)}
.convs a[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.qr{background:#fff;padding:10px;border-radius:8px;align-self:center}
.qr svg{display:block;width:200px;height:200px}
.mono-s{font-family:var(--mono);font-size:12.5px;word-break:break-all}
.ro-note{border:1px dashed var(--line);border-radius:var(--r);padding:8px 12px;font-size:13px;color:var(--muted);margin-top:12px}
@media (max-width:980px){.top .whonote{display:none}}
/* Echte Texte sind länger als die Beispiele im Entwurf: Anzeige kürzen, voller Text im Tooltip und im Ticketdetail. */
.clamp{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;max-width:300px}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nxt{min-width:200px}
.cust{min-width:170px}
/* Lange Hinweise (z. B. «Widerspruch Stage und Fachstatus») müssen in schmalen Spalten umbrechen statt überzulaufen. */
.tri .pill{white-space:normal;display:inline-block;max-width:100%;border-radius:12px;line-height:1.3}
.tri>div{overflow-wrap:anywhere}
td .pill{white-space:normal;max-width:240px;border-radius:12px;line-height:1.3}
/* Wetter: Zeile im Wochenkopf, Hinweis pro Montage, Warnstufen */
.dh .wx{align-items:center}.dh .wx .wx-icon{flex:none}
.dh.meh{box-shadow:inset 0 -3px 0 var(--warn)}
.ev .wxline{margin-top:3px;overflow-wrap:anywhere}
.wx-list li .pill{white-space:nowrap}
.wx-now .txt .pill{margin-left:4px}
.pill.unk{background:var(--sunk);color:var(--muted);border:1px dashed var(--line)}
/* Sicherheitshinweis (Enzian) und Gründe: eigener Kasten, lange Texte brechen um */
.sich{margin-top:6px;padding:6px 8px;border-radius:6px;border:1px solid currentColor;font-size:12px;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.sich.warn{color:var(--warn);background:var(--warn-soft)}.sich.crit{color:var(--crit);background:var(--crit-soft)}
.sich b{display:block;margin-bottom:2px}.sich .ts{color:inherit;opacity:.85}
.why{font-size:12px;color:var(--muted);margin:2px 16px 0;overflow-wrap:anywhere}
.why.wide{grid-column:1/-1;margin:0 0 2px}
.wx-list li{overflow-wrap:anywhere}
.errbox,.warnbox,.note-readonly{overflow-wrap:anywhere;word-break:break-word}
.dh .wx{min-width:0;overflow-wrap:anywhere}
@media (max-width:640px){.wx-list li{grid-template-columns:48px 24px minmax(0,1fr) auto;gap:6px}.wx-now .big{font-size:30px}}

/* Dateien und Kundenzugang im Ticketdetail */
.stack{display:flex;flex-direction:column;gap:10px}
.muted-s{color:var(--muted);font-size:13px;margin:0}
.btnlink{display:inline-block;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:5px 10px;font-size:13px;color:var(--fg);text-decoration:none;cursor:pointer;font-family:inherit}
.btnlink:hover{border-color:var(--accent)}
.filebtns{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.flash{border-radius:8px;padding:8px 12px;font-size:13.5px;overflow-wrap:anywhere;border:1px solid var(--line);background:var(--sunk);margin:6px 0}
.flash.ok{border-color:var(--ok);color:var(--ok)}.flash.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-soft)}.flash.err{border-color:var(--crit);color:var(--crit);background:var(--crit-soft)}
.flash.link{word-break:break-all;color:var(--fg)}
.picked{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.nodoc{display:block!important;color:var(--muted)}
#dateien .docs li{grid-template-columns:36px minmax(0,1fr) auto}
#dateien .dn,#dateien .dm{overflow-wrap:anywhere}
@media (max-width:640px){#dateien .docs li{grid-template-columns:36px minmax(0,1fr)}.filebtns{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:flex-start}}
/* Lange deutsche Wörter in schmalen Wochenspalten: nach Silben trennen, mitten im Wort nur als letzter Ausweg */
.ev .sich,.ev .wxline,.why,.sich{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.ev .sich{font-size:11.5px;padding:5px 6px}
.ev .wxline{overflow-wrap:break-word}
.sich details.mehr{margin-top:3px}.sich details.mehr summary{cursor:pointer;font-weight:600;font-size:11.5px;padding:2px 0;min-height:24px}
.sich details.mehr[open] summary{margin-bottom:2px}
@media (pointer:coarse){.sich details.mehr summary{min-height:36px;display:flex;align-items:center}}
.tight{margin-top:4px}
.subj{color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.dh-title{min-width:0}

/* Etappe 5: Schritt-Panel im Cockpit. Nur Variablen des Themes (hell/dunkel), keine festen Farben, Touch-Ziele mindestens 40 px. */
.schritte{margin-top:14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.schritte details.step{border:1px solid var(--line, rgba(128,128,128,.28));border-radius:8px;padding:8px 12px;background:var(--surface);min-width:0}
.schritte details.step>summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;min-height:40px;overflow-wrap:anywhere}
.schritte .ev-ok{color:var(--ok);list-style:none;margin-left:-14px;overflow-wrap:anywhere}
.schritte .ev-miss{color:var(--crit);list-style:none;margin-left:-14px;overflow-wrap:anywhere}
.schritte ul.tight{padding-left:18px;margin:6px 0}
.schritte .aktion{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line, rgba(128,128,128,.28));min-width:0}
.schritte .aktion-gesperrt{opacity:.85;overflow-wrap:anywhere}
.schritte .aktionsform{display:flex;flex-direction:column;gap:8px;max-width:520px}
.schritte .aktionsform label{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.schritte .aktionsform label.switch{flex-direction:row;align-items:flex-start;gap:8px}
.schritte .aktionsform input:not([type=checkbox]),.schritte .aktionsform select{min-height:40px;font:inherit;padding:6px 8px;max-width:100%;box-sizing:border-box}
.schritte .aktionsform button{min-height:44px;align-self:flex-start}
.schritte .aktionsform button[disabled]{opacity:.6;cursor:progress}
.schritte .src{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
@media (max-width:520px){.schritte .aktionsform{max-width:100%}.schritte .aktionsform button{align-self:stretch}}
.okbox{border-left:3px solid var(--ok);background:var(--ok-soft);border-radius:4px;padding:8px 12px;font-size:13.5px;margin:10px 0;overflow-wrap:anywhere}
.askbox{border-left:3px solid var(--accent);background:var(--accent-soft);border-radius:4px;padding:8px 12px;font-size:13.5px;margin:10px 0;overflow-wrap:anywhere;white-space:pre-wrap}

/* Touch (Handy, iPad): Knöpfe und Beschriftungen von Kästchen sind mindestens 44 px hoch. Das Kundenportal hat dieselbe Regel in kunde.css. Gemessen mit scripts/mobil_messung.py. */
@media (pointer:coarse){.btnlink{display:inline-flex;align-items:center;min-height:44px}.switch{min-height:44px;align-items:center}.switch input{min-width:24px;min-height:24px}}