/* assist.css — the Lotse widget (/ui/v1/assistant.js, <trinsik-lotse>; plan Hilfe + Assistent 14.10.2026, package P5).
   Building blocks a-* from the design draft (Claude Design „Assistent & Hilfe“, P0; Marcel decided 14.10.2026):
   avatar A „Lotse“ (the bracket of the word mark with a square), panel docked right 420 px pushing the page (no
   overlay), phone: own button with the mark in the top bar and the panel as a full-screen sheet, send button dark (Senf
   stays with the page), admins see „n Werkzeuge · Modell · Kosten“.
   Loaded twice by assistant.js: in the page (the side bar group „Hilfe · Fragen · Melden“, the top bar button, the
   push of the page) and inside the component's shadow root (panel, element mode, sheets). Only tokens of tokens.css,
   radius 0, no shadows. Not part of the copied package (platform_web.UI_PACKAGE_CSS), like plan.css. */

/* ── in the page ─────────────────────────────────────────────────────────────────────────────────────────────── */

/* the panel pushes the page instead of covering it (≥ 1024 px; on a phone it is a full-screen sheet) */
@media (min-width: 1024px) {
  html.a-lotse-open body { margin-right: 420px; }
  html.a-lotse-open .s-bottom { right: 420px; }
}

/* side bar: the shared group „Hilfe · Fragen · Melden“ above the account */
.s-help { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s2); display: flex; flex-direction: column; }
.s-help + .s-acct { margin-top: 0; }
.s-help-h { padding: var(--s2) var(--s3) var(--s1); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.s-help-i { display: flex; align-items: center; gap: var(--s3); min-height: var(--target); padding: var(--s1) var(--s3); width: 100%; box-sizing: border-box;
  background: transparent; border: 0; color: var(--ink); font: var(--fs-table) var(--sans); text-align: left; text-decoration: none; cursor: pointer; }
.s-help-i:hover, .s-help-i[aria-expanded="true"], .s-help-i[aria-pressed="true"] { background: var(--line); }
.s-help-i:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.s-help-i .a-ico { color: var(--muted); flex: none; }
.s-help-i .a-mark { --am: 20px; }
.s-help-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.s-help-t small { font-size: var(--fs-label); color: var(--muted); overflow-wrap: break-word; }  /* wraps instead of „…“ (mobile pass 15.10.2026: „kennt diese Seite und deine Rechte“ was cut in the narrow menus) */
.a-kbd { font-family: var(--mono); font-size: var(--fs-caps); color: var(--muted); border: 1px solid var(--line-strong); padding: 0 5px; line-height: 18px; flex: none; }
@media (min-width: 1024px) {
  html.s-rail .s-help-h, html.s-rail .s-help-t, html.s-rail .s-help .a-kbd { display: none; }
  html.s-rail .s-help-i { justify-content: center; padding: 0; }
}
@media (max-width: 1023px) {
  .s-help .a-kbd { display: none; }
  .s-help-i { min-height: 44px; }
}

/* phone: the button with the mark in the top bar, between the word mark and the account */
.a-top { display: none; }
@media (max-width: 1023px) {
  .a-top { display: flex; margin-left: auto; }
  .a-top + .s-me-mini { margin-left: 0; }
}
.a-top-btn { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; }
.a-top-btn .a-mark { --am: 24px; }
.a-top-btn[aria-expanded="true"] { background: var(--line); }

/* ── the mark of the assistant (avatar A „Lotse“) ────────────────────────────────────────────────────────────── */
.a-mark { display: inline-flex; flex: none; width: var(--am, 32px); height: var(--am, 32px); color: var(--ink); }
.a-mark svg { width: 100%; height: 100%; display: block; overflow: visible; }
.a-mark.err { color: var(--alert); }
.a-mark.cap { color: var(--muted); }
@keyframes a-blink { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
@keyframes a-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.a-mark .t1 { animation: a-blink 1.2s var(--ease) infinite; }
.a-mark .t2 { animation: a-blink 1.2s var(--ease) .2s infinite; }
.a-mark .t3 { animation: a-blink 1.2s var(--ease) .4s infinite; }
.a-mark .caret { animation: a-caret 1s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .a-mark *, .a-typing i { animation: none !important; } }

/* ── inside the component (shadow root) ──────────────────────────────────────────────────────────────────────── */
:host { font-family: var(--sans); color: var(--ink); font-size: var(--fs-text); line-height: 1.5; }
:host *, :host *::before, :host *::after { box-sizing: border-box; }
@media print { :host { display: none !important; } }
[hidden] { display: none !important; }
.a-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.a-ico { flex: none; }

/* buttons, links, state pills (the k-btn / k-link / k-badge of components.css, which does not reach a shadow root) */
.a-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: var(--target); padding: 0 var(--s4); border: 1px solid var(--ink);
  background: var(--ink); color: var(--bg); font: 500 var(--fs-table) var(--sans); cursor: pointer; text-decoration: none; }
.a-btn:hover { opacity: .9; }
.a-btn.line { background: transparent; color: var(--ink); border-color: var(--mark); font-weight: 400; }
.a-btn.line:hover { border-color: var(--ink); opacity: 1; }
.a-btn.small { padding: 0 var(--s3); font-size: var(--fs-hint); }
.a-btn[disabled] { opacity: .4; cursor: default; }
.a-btn:focus-visible, .a-x:focus-visible, .a-link:focus-visible, .a-cite:focus-visible, .a-sugg button:focus-visible, .a-big:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; }
.a-link { display: inline-flex; align-items: center; min-height: var(--target); padding: 0; background: none; border: 0; color: var(--ink);
  font: var(--fs-hint) var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.a-link.quiet { color: var(--muted); } .a-link.quiet:hover { color: var(--ink); }
.a-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 var(--s2); border-radius: var(--radius-pill); font-size: var(--fs-caps);
  font-weight: 600; letter-spacing: 0; text-transform: none; background: var(--line); color: var(--ink); white-space: nowrap; }
.a-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mark); flex: none; }
.a-pill.info::before { background: var(--ink); }
.a-pill.good { background: rgb(var(--good-rgb) / .14); color: var(--good); } .a-pill.good::before { background: var(--good); }
.a-pill.act { background: rgb(var(--alert-rgb) / .16); color: var(--alert-ink); } .a-pill.act::before { background: var(--alert); }
.a-pill.off { background: transparent; border: 1px dashed var(--mark); color: var(--muted); }

/* the panel: docked right, full height; on a phone a full-screen sheet */
.a-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-side); width: 420px; display: flex; flex-direction: column;
  background: var(--surface); border-left: 1px solid var(--ink); }
@media (max-width: 1023px) {
  .a-panel { left: 0; width: auto; z-index: var(--z-sheet); border-left: 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.a-ph { display: flex; align-items: center; gap: var(--s3); padding: var(--s4) var(--s4) var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.a-ph .a-mark { --am: 28px; }
.a-ph-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.a-ph-t strong { display: flex; align-items: center; gap: var(--s2); font-family: var(--serif); font-weight: 300; font-size: 22px; }
.a-ph-t span { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-x { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--ink); cursor: pointer; flex: none; }
.a-x:hover { background: var(--line); }
@media (max-width: 1023px) { .a-x { width: 44px; height: 44px; } }
.a-body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
@media (max-width: 1023px) { .a-body { padding: var(--s4); gap: var(--s4); } }
.a-who { margin: 0 0 var(--s1); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: var(--s2); }
.a-who .a-mark { --am: 14px; }
.a-me .a-who { justify-content: flex-end; }
.a-msg { margin: 0; font-size: var(--fs-table); line-height: 1.55; overflow-wrap: anywhere; }
.a-msg p, .a-msg ul, .a-msg ol { margin: 0 0 var(--s2); } .a-msg > :last-child { margin-bottom: 0; }
.a-msg ul, .a-msg ol { padding-left: var(--s5); }
.a-msg strong { font-weight: 500; }
.a-msg code { font-family: var(--mono); font-size: 12px; }
.a-msg a { color: var(--ink); }
.a-me .a-msg { padding-left: var(--s6); text-align: right; white-space: pre-wrap; }
.a-ctx { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); margin-top: var(--s2); font-size: var(--fs-label); color: var(--muted); }
.a-ctx b { font-weight: 500; color: var(--ink); }
.a-sugg { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.a-sugg button { display: flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s1) 0; background: transparent; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: var(--fs-table) var(--sans); text-align: left; cursor: pointer; }
.a-sugg button:hover { background: var(--line); }
.a-sugg .a-ico { color: var(--muted); }
@media (max-width: 1023px) { .a-sugg button { min-height: 44px; } }
.a-cites { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s3); }
.a-cite { display: inline-flex; align-items: center; gap: var(--s1); min-height: 26px; padding: 0 var(--s2); border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); font-size: var(--fs-label); text-decoration: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-cite:hover { border-color: var(--ink); }
.a-cite em { font-style: normal; color: var(--muted); }
.a-tools { display: flex; align-items: center; gap: var(--s1); margin-top: var(--s2); }
.a-tools .a-x { width: 28px; height: 28px; color: var(--muted); }
.a-tools .a-x[aria-pressed="true"] { color: var(--ink); background: var(--line); }
.a-tools small { margin-left: auto; font-size: var(--fs-label); color: var(--muted); font-family: var(--mono); }
/* touch (mobile pass 15.10.2026): sources and the answer tools 44 px; „Auf Element zeigen“ stays on one line */
@media (max-width: 1023px) {
  .a-cite { min-height: 44px; }
  .a-tools .a-x { width: 44px; height: 44px; }
  .a-foot .a-meta .a-link { flex: none; white-space: nowrap; min-height: 44px; }
}
.a-deny { display: flex; gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); font-size: var(--fs-hint); color: var(--muted); }
.a-deny p { margin: 0; }
.a-deny a { color: var(--ink); }
.a-err { margin: 0; font-size: var(--fs-table); color: var(--alert-ink); }
.a-cap { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1px solid var(--line-strong); background: var(--bg); font-size: var(--fs-table); }
.a-cap p { margin: 0; }
.a-cap-acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.a-typing { display: inline-flex; gap: 4px; align-items: center; height: 18px; margin-left: 4px; vertical-align: middle; }
.a-typing i { width: 5px; height: 5px; background: var(--ink); display: block; animation: a-blink 1.2s infinite; }
.a-typing i:nth-child(2) { animation-delay: .2s; } .a-typing i:nth-child(3) { animation-delay: .4s; }
.a-foot { border-top: 1px solid var(--line); padding: var(--s3) var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
@media (max-width: 1023px) { .a-foot { padding: var(--s3) var(--s4) var(--s4); } }
.a-elref { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-label); color: var(--muted); min-width: 0; }
.a-elref code { font-family: var(--mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.a-in { display: flex; align-items: flex-end; gap: var(--s2); border: 1px solid var(--mark); background: var(--bg); padding: var(--s2); }
.a-in:focus-within { border-color: var(--ink); }
.a-in textarea { flex: 1; min-height: 44px; max-height: 120px; resize: none; border: 0; background: transparent; color: var(--ink); font: var(--fs-table) var(--sans); padding: var(--s1); }
.a-in textarea:focus { outline: none; }
.a-in textarea::placeholder { color: var(--muted); }
.a-in .a-btn { min-height: 36px; min-width: 36px; padding: 0 var(--s2); }
@media (max-width: 1023px) { .a-in textarea { font-size: var(--fs-input); } .a-in .a-btn { min-height: 44px; min-width: 44px; } }
.a-in.off { opacity: .6; }
.a-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); font-size: var(--fs-label); color: var(--muted); }
.a-meta .a-link { font-size: var(--fs-label); color: var(--muted); min-height: 0; }

/* element mode: the bar on top, the frame under the pointer, the popover at the chosen element */
.a-pickbar { position: fixed; left: 0; right: 0; top: 0; z-index: var(--z-popover); display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s5);
  background: var(--ink); color: var(--bg); font-size: var(--fs-table); }
.a-pickbar .a-kbd { color: var(--bg); border-color: var(--bg); }
.a-pickbar span.grow { flex: 1; min-width: 0; }
.a-pickbar button { background: transparent; border: 1px solid var(--bg); color: var(--bg); font: var(--fs-hint) var(--sans); min-height: 30px; padding: 0 var(--s3); cursor: pointer; }
@media (max-width: 1023px) { .a-pickbar { padding: 0 var(--s3); font-size: var(--fs-hint); } .a-pickbar .a-kbd, .a-pickbar .hide-sm { display: none; } .a-pickbar button { min-height: 44px; } }
.a-hover { position: fixed; z-index: var(--z-sheet); pointer-events: none; outline: 1px dashed var(--ink); outline-offset: 2px; }
.a-hot { position: fixed; z-index: var(--z-sheet); pointer-events: none; outline: 2px solid var(--ink); outline-offset: 3px; }
.a-hot-tag { position: absolute; left: -5px; bottom: calc(100% + 6px); font-family: var(--mono); font-size: var(--fs-caps); line-height: 22px; padding: 0 var(--s2);
  background: var(--ink); color: var(--bg); white-space: nowrap; max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
.a-pop { position: fixed; z-index: var(--z-popover); width: 288px; max-width: calc(100vw - 16px); background: var(--surface); border: 1px solid var(--ink); padding: var(--s3);
  display: flex; flex-direction: column; gap: var(--s3); }
.a-pop-el { margin: 0; font-size: var(--fs-label); color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.a-pop-el code { font-family: var(--mono); color: var(--ink); font-size: var(--fs-caps); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.a-pop-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.a-pop-acts .a-mark { --am: 16px; }
.a-pop-up { display: flex; justify-content: space-between; }

/* the report form (element „Melden“) */
.a-form { display: flex; flex-direction: column; gap: var(--s4); padding: var(--s5); flex: 1; min-height: 0; overflow-y: auto; }
@media (max-width: 1023px) { .a-form { padding: var(--s4); } }
.a-flabel { font-size: var(--fs-hint); color: var(--muted); margin-bottom: var(--s1); display: block; }
.a-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--mark); }
.a-seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: max(36px, var(--target)); font-size: var(--fs-table); cursor: pointer; }
.a-seg label + label { border-left: 1px solid var(--mark); }
.a-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.a-seg label:has(input:checked) { background: var(--ink); color: var(--bg); font-weight: 500; }
.a-seg label:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.a-elbox { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-hint); }
.a-elbox code { font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.a-elbox q { color: var(--muted); }
.a-elbox .dim { color: var(--muted); }
.a-field { display: flex; flex-direction: column; gap: var(--s1); font-size: var(--fs-hint); color: var(--muted); }
.a-field textarea { min-height: 110px; resize: vertical; padding: var(--s2); border: 1px solid var(--mark); background: var(--bg); color: var(--ink); font: var(--fs-table) var(--sans); }
.a-field textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
@media (max-width: 1023px) { .a-field textarea { font-size: var(--fs-input); } }
.a-warn { margin: 0; font-size: var(--fs-label); color: var(--alert-ink); }
.a-img { display: flex; flex-direction: column; gap: var(--s2); border: 1px dashed var(--line-strong); padding: var(--s2); font-size: var(--fs-label); color: var(--muted); }
.a-img-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.a-thumb { max-width: 100%; max-height: 140px; border: 1px solid var(--line-strong); display: block; }
.a-form-foot { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.a-form-foot .grow { flex: 1; }
.a-msgline { margin: 0; font-size: var(--fs-hint); }
.a-msgline.bad { color: var(--alert-ink); }

/* phone: the sheet of the top bar button (Lotse, Hilfe, Element, Melden) */
.a-scrim { position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--scrim-strong); }
.a-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet); background: var(--surface); border-top: 1px solid var(--ink);
  display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom, 0px); }
.a-grab { width: 36px; height: 4px; background: var(--line-strong); margin: var(--s2) auto 0; }
.a-sheet-h { margin: var(--s2) 0 0; padding: var(--s2) var(--s4); font-size: var(--fs-label); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.a-big { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s4); border: 0; border-top: 1px solid var(--line); color: var(--ink);
  text-decoration: none; background: transparent; width: 100%; font: var(--fs-text) var(--sans); text-align: left; cursor: pointer; }
.a-big .a-ico { color: var(--muted); }
.a-big .a-mark { --am: 24px; }
.a-big .s-help-t small { font-size: var(--fs-hint); }
.a-big.quiet { min-height: 48px; color: var(--muted); font-size: var(--fs-hint); }