/* Studio host page (/studio): the editor's look — tokens, type and cards as in apps/map-studio. */
:root { color-scheme: light; --accent: #345b89; --accent-soft: #eaf0f7; --ink: #15342c; --muted: #68766f; --paper: #f3f4ef; --surface: #fff; --hair: rgba(21,52,44,.13); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: radial-gradient(circle at 50% 35%, #f6f6f1 0, #e6e7e1 70%, #dfe1da 100%) fixed; color: var(--ink); font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
.host-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 22px; background: rgba(251,252,249,.94); border-bottom: 1px solid var(--hair); backdrop-filter: blur(16px); }
.host-brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.host-brand svg { width: 150px; height: auto; display: block; }
.host-brand span { padding-left: 12px; border-left: 1px solid var(--hair); color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.host-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; }
.host-status { overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.host-main { min-height: calc(100dvh - 64px); display: grid; place-items: center; padding: 32px 20px; }
.host-card { width: min(460px, 100%); padding: 34px 32px; border: 1px solid rgba(255,255,255,.85); border-radius: 21px; background: rgba(251,252,249,.94); box-shadow: 0 28px 70px rgba(23,48,42,.15); text-align: center; animation: host-in .4s cubic-bezier(.2,.8,.2,1); }
@keyframes host-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.host-kicker { color: var(--accent); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.host-card h1 { margin: 10px 0 8px; font-size: clamp(24px, 3vw, 31px); line-height: 1.1; letter-spacing: -.035em; }
.host-card p { margin: 0 auto 20px; max-width: 360px; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.host-card p.host-note { margin: 14px auto 0; font-size: 12px; }
.host-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid var(--hair); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background .15s, box-shadow .15s; }
.host-button:hover:not(:disabled) { background: #eef2ee; }
.host-button:disabled { opacity: .5; cursor: default; }
.host-button.quiet { border-color: transparent; background: transparent; color: var(--muted); }
.host-button.primary { min-height: 44px; padding: 0 20px; border: 0; background: var(--accent); color: #fff; box-shadow: 0 7px 18px rgba(52,91,137,.22); }
.host-button.primary:hover:not(:disabled) { background: #2b4c73; }
.host-button.wide { width: 100%; }
.host-button:focus-visible, .host-tile:focus-visible, .host-input:focus-visible { outline: 3px solid rgba(52,91,137,.3); outline-offset: 2px; }
.host-link { display: block; margin-top: 14px; color: var(--accent); font-size: 13px; font-weight: 600; }
.host-input { width: 100%; height: 42px; margin-bottom: 12px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 10px; background: #fff; font: inherit; }
.host-spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(52,91,137,.2); border-top-color: var(--accent); border-radius: 50%; animation: host-spin .8s linear infinite; }
.host-card > .host-spinner { width: 26px; height: 26px; margin-top: 8px; }
.host-button.primary .host-spinner { border-color: rgba(255,255,255,.35); border-top-color: #fff; }
@keyframes host-spin { to { transform: rotate(1turn); } }
.host-overview { align-self: start; width: min(1040px, 100%); }
.host-overview-head h1 { margin: 0 0 4px; font-size: 26px; letter-spacing: -.03em; }
.host-overview-head p { margin: 0 0 22px; color: var(--muted); }
.host-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.host-tile { height: 100%; display: grid; grid-template-rows: auto 1fr auto; gap: 8px; padding: 16px; border: 1px solid var(--hair); border-radius: 14px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: 0 1px 2px rgba(23,48,42,.05); transition: transform .15s, box-shadow .15s, border-color .15s; }
.host-tile:hover { transform: translateY(-2px); border-color: rgba(52,91,137,.35); box-shadow: 0 10px 26px rgba(23,48,42,.12); }
.host-tile-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23345b89' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 6 6-3 6 3 6-3v15l-6 3-6-3-6 3Z M9 3v15M15 6v15'/%3E%3C/svg%3E") center / 20px no-repeat; }
.host-tile b { font-size: 14.5px; line-height: 1.35; }
.host-tile small { color: var(--muted); font-size: 11.5px; }
.studio-editor { position: fixed; inset: 64px 0 0; width: 100%; height: calc(100dvh - 64px); border: 0; background: #e4e5df; }
.host-main:has(.studio-editor) .host-card { position: relative; z-index: 2; }
.editor-active .host-bar { display: none; }
.editor-active .studio-editor { inset: 0; height: 100dvh; }
@media (max-width: 640px) {
  .host-bar { min-height: 56px; padding: 8px 14px; }
  .host-brand svg { width: 120px; }
  .host-brand span, .host-status { display: none; }
  .host-card { padding: 26px 20px; }
  .studio-editor { inset: 56px 0 0; height: calc(100dvh - 56px); }
}
@media (prefers-reduced-motion: reduce) { .host-card, .host-spinner { animation: none; } .host-tile { transition: none; } }
/* Operator cockpit (/studio/cockpit). */
.cockpit { width: min(1100px, 100%); margin: 0 auto; padding: 28px 20px 60px; display: grid; gap: 16px; }
.cockpit h1 { margin: 0; font-size: 28px; letter-spacing: -.03em; }
.cockpit-card { padding: 20px 22px; border: 1px solid rgba(255,255,255,.85); border-radius: 18px; background: rgba(251,252,249,.94); box-shadow: 0 18px 50px rgba(21,52,44,.08); }
.cockpit-card h2 { margin: 0 0 10px; font-size: 15px; }
.cockpit-status { min-height: 18px; margin: 0; color: var(--muted); font-size: 13px; }
.cockpit-muted { margin: 0; color: var(--muted); }
.cockpit-todo, .cockpit-places { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cockpit-todo li, .cockpit-places li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; background: #fff; }
.cockpit-todo li span { flex: 1; min-width: 0; color: var(--muted); }
.cockpit-places li div { display: grid; flex: 1; min-width: 0; }
.cockpit-places small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cockpit-table { overflow-x: auto; }
.cockpit table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cockpit th { padding: 6px 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-align: left; text-transform: uppercase; }
.cockpit td { padding: 8px; border-top: 1px solid var(--hair); vertical-align: middle; }
.cockpit-actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.cockpit-ok { color: #1f6f4a; font-weight: 600; }
.cockpit-warn { color: #a15c07; font-weight: 700; }
.cockpit-danger { color: #b3261e !important; }
.cockpit-site { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.cockpit-site div { display: grid; }
.cockpit-site a { color: var(--accent); font-weight: 600; }
.cockpit-site small { color: var(--muted); }
.cockpit-swatch { width: 28px; height: 28px; flex: none; border-radius: 8px; background: var(--accent); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.cockpit-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.cockpit-figures div { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background: rgba(251,252,249,.94); box-shadow: 0 10px 30px rgba(21,52,44,.06); }
.cockpit-figures b { font-size: 26px; letter-spacing: -.03em; color: var(--accent); }
.cockpit-figures span { color: var(--muted); font-size: 12px; }
.cockpit-edit { display: grid; gap: 8px; padding: 10px; border: 1px dashed var(--hair); border-radius: 10px; background: #fff; }
.cockpit-edit textarea, .cockpit-edit input { width: 100%; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 8px; font: inherit; }
/* Catalog trips in review (R62): one fieldset per open place, candidates as choices. */
.cockpit-review td { background: #fbfaf6; }
.cockpit-review-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.cockpit-review-form fieldset { flex: 1 1 220px; margin: 0; padding: 8px 10px; border: 1px solid var(--hair); border-radius: 10px; background: #fff; }
.cockpit-review-form legend { padding: 0 4px; font-weight: 700; }
.cockpit-review-form label { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 3px 0; cursor: pointer; }
.cockpit-review-form label small { grid-column: 2; color: var(--muted, #6b7280); font-size: 12px; }
.cockpit-actions .host-button { min-height: 32px; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
@media (max-width: 760px) {
  .cockpit { padding: 18px 12px 48px; }
  .cockpit-card { padding: 16px 14px; }
  .cockpit table, .cockpit tbody, .cockpit tr, .cockpit td { display: block; }
  .cockpit thead { display: none; }
  .cockpit tr { padding: 10px 0; border-top: 1px solid var(--hair); }
  .cockpit td { padding: 2px 0; border: 0; }
  .cockpit td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 12px; }
  .cockpit-actions { justify-content: flex-start; margin-top: 6px; }
  .cockpit-todo li { flex-wrap: wrap; }
}

/* Opened from the cockpit: where one came from, and the way back (UX-STUDIO-COCKPIT §2). */
.host-origin-strip { display: flex; align-items: center; gap: 12px; padding: 6px 16px; background: #eef5f1; border-bottom: 1px solid #d9ddd5; color: #1f5f55; font-size: 13px; }
.host-origin-back { font-weight: 700; color: #1f5f55; text-decoration: none; }
.host-origin-back:hover { text-decoration: underline; }
/* The route sketch of a saved map (map-sketch.ts): a calm field with the way and its stops. */
.host-tile-sketch { display: block; aspect-ratio: 32 / 15; margin: -6px -6px 2px; border-radius: 10px; background: linear-gradient(160deg, #eef3f7, #e4ece8); }
.host-tile-sketch svg { display: block; width: 100%; height: 100%; }
.host-tile-sketch .sketch-route { stroke: #345b89; stroke-width: 2; opacity: .85; }
.host-tile-sketch .sketch-stops { fill: #fff; stroke: #345b89; stroke-width: 1.6; }
.host-tile-sketch:not(.has-sketch) { background: linear-gradient(100deg, #eef3f7 30%, #f5f8fa 50%, #eef3f7 70%) 0 0 / 300% 100%; animation: host-sketch-wait 1.4s ease-in-out infinite; }
@keyframes host-sketch-wait { to { background-position: -150% 0; } }
@media (prefers-reduced-motion: reduce) { .host-tile-sketch:not(.has-sketch) { animation: none; } }

.host-empty { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; }
/* "Neue Karte": a link into the editor with its start dialog, styled as the primary button. */
.host-new-map { display: inline-flex; align-items: center; margin: -8px 0 24px; text-decoration: none; }
/* @assistant-kit/app-controls – the app controls of every .express surface. Bundled by the host as a FILE (strict CSP:
   no inline styles). Colours, radii, spacing, shadows and type only through brainz-theme tokens (--bz-*, catalogue
   docs/platform/catalog/catalog.json); the fallbacks are the catalogue's light values. The accent is the product's
   (.ac-product-crews|trips|maps or the host's own --bz-accent). Rules: UI-REFERENZ.md / reference/ui-reference.json.

   Size rule (Apple): visual height ≠ hit area. Visual: compact 28, regular 34 (default), large 48 only for the ONE
   primary action per phone screen. Hit area: an invisible halo of ≥ 24×24 (fine pointer, WCAG 2.2 2.5.8) and ≥ 44×44
   on touch (pointer: coarse), centred, without layout shift. Neighbours keep ≥ 8 px apart so halos do not overlap. */

.ac {
  --ac-font: Lato, -apple-system, "SF Pro Text", Roboto, system-ui, sans-serif;
  --ac-h-compact: var(--bz-control-h-compact, 1.75rem); --ac-h-regular: var(--bz-control-h-regular, 2.125rem); --ac-h-large: var(--bz-control-h-large, 3rem);
  --ac-hit: 24px;
  --ac-elev-1: 0 1px 2px rgba(25, 28, 40, .06), 0 1px 1px rgba(25, 28, 40, .04);
  --ac-elev-2: var(--bz-shadow-card, 0 8px 24px -18px rgba(0, 0, 0, .40));
  --ac-elev-3: var(--bz-shadow-sheet, 0 30px 70px -34px rgba(0, 0, 0, .40));
  --ac-press: 140ms;
  --ac-ease: var(--bz-spring, cubic-bezier(.2, .9, .3, 1));
  font-family: var(--ac-font); font-weight: 400; color: var(--bz-text, #1b1e27);
  -webkit-font-smoothing: antialiased; font-synthesis: none;
}
@media (pointer: coarse) { .ac { --ac-hit: 44px; } }
.ac *, .ac *::before, .ac *::after { box-sizing: border-box; }
.ac [hidden] { display: none !important; }
.ac-num { font-variant-numeric: tabular-nums; }
.ac-title { font-weight: 700; letter-spacing: -.015em; line-height: var(--bz-lh-tight, 1.3); }

/* One focus ring, keyboard only: 2 px accent, 2 px offset. (.ac-focus-demo shows it on the reference page.) */
/* No system box on tap or click: the mobile tap highlight is off, a mouse/touch focus shows nothing. The keyboard
   still gets the one ring below (WCAG 2.4.7) – in the accent colour, never the system blue. */
.ac { -webkit-tap-highlight-color: transparent; }
.ac :focus:not(:focus-visible) { outline: none; }
.ac :focus { outline: none; }
.ac :focus-visible, .ac .ac-focus-demo { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }

/* The halo: an invisible, centred hit area at least --ac-hit square, never smaller than the control. */
.ac-hit { position: relative; }
.ac-hit::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--ac-hit)); height: max(100%, var(--ac-hit)); transform: translate(-50%, -50%); }

/* ---- Buttons ------------------------------------------------------------------------------------------------- */
.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bz-space-2, 8px);
  min-height: var(--ac-h-regular); padding: 0 14px; border: 1px solid transparent; border-radius: var(--bz-r4, 13px);
  font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27);
  transition: transform var(--ac-press) var(--ac-ease), background-color 160ms, box-shadow 160ms, opacity 160ms;
}
.ac-btn[data-size="compact"] { min-height: var(--ac-h-compact); padding: 0 10px; font-size: 0.8125rem; border-radius: var(--bz-r3, 10px); }
.ac-btn[data-size="large"] { min-height: var(--ac-h-large); padding: 0 22px; font-size: 1rem; border-radius: var(--bz-r5, 14px); }
.ac-btn .ac-icon { width: 1.15em; height: 1.15em; }
/* Large system text: a long label wraps (balanced) instead of leaving the button; the height grows with it. */
.ac-btn { max-width: 100%; min-width: min-content; }
/* Words never split ("Abbreche/n", Florian 05.10.): a button breaks only between words, balanced, and is never narrower
   than its longest word (min-content); where even that does not fit, its row wraps (dialog actions). */
.ac-btn .ac-label { white-space: normal; text-wrap: balance; text-align: center; overflow-wrap: normal; word-break: keep-all; hyphens: manual; }
.ac-btn:has(.ac-label) { padding-block: 4px; }
.ac-btn[data-variant="primary"] { background: var(--bz-accent, #49aecb); color: var(--bz-on-accent, #fff); box-shadow: var(--ac-elev-1); }
.ac-btn[data-variant="secondary"] { background: var(--bz-card, #fff); border-color: var(--bz-hair2, rgba(25, 28, 40, .16)); }
.ac-btn[data-variant="quiet"] { background: transparent; color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-btn[data-variant="danger"] { background: var(--bz-danger, #c0405a); color: #fff; }
/* hero: the one main action on the stage ("Globus ausfahren", Florian 06.10.) – large glass with an accent glow, the icon in
   an accent disc; lifts a little on hover. One per stage; everything else stays glass. */
.ac-btn[data-variant="hero"] { min-height: 3.25rem; padding: 0 22px 0 7px; gap: 12px; border-radius: 999px; font-size: 1rem; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%), color-mix(in srgb, var(--bz-accent, #49aecb) 24%, color-mix(in srgb, var(--bz-stage, #0d1714) 74%, transparent));
  border: 1px solid color-mix(in srgb, var(--bz-accent, #49aecb) 55%, rgba(255, 255, 255, .4));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 12px 32px -12px color-mix(in srgb, var(--bz-accent, #49aecb) 75%, transparent), 0 0 28px -8px color-mix(in srgb, var(--bz-accent, #49aecb) 65%, transparent);
  backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7);
  transition: transform var(--ac-press) var(--ac-ease), box-shadow 220ms ease, background-color 160ms; }
.ac-btn[data-variant="hero"] > .ac-icon { width: 2.375rem; height: 2.375rem; padding: .5rem; border-radius: 50%; background: var(--bz-accent, #49aecb); color: var(--bz-on-accent, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bz-accent, #49aecb) 28%, transparent); transition: transform 600ms var(--ac-ease); }
.ac-btn[data-variant="hero"]:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (hover: hover) { .ac-btn[data-variant="hero"]:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 36px -12px color-mix(in srgb, var(--bz-accent, #49aecb) 85%, transparent), 0 0 36px -6px color-mix(in srgb, var(--bz-accent, #49aecb) 75%, transparent); } .ac-btn[data-variant="hero"]:hover > .ac-icon { transform: rotate(-24deg); } }
.ac-btn[data-variant="hero"]:active { transform: scale(.98); }
:is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-btn[data-variant="hero"] { color: var(--bz-text, #1b1e27); background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .7)); border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, transparent); box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--bz-accent, #49aecb) 70%, transparent), var(--ac-elev-1); }
@media (prefers-reduced-transparency: reduce) { .ac-btn[data-variant="hero"] { backdrop-filter: none; background: color-mix(in srgb, var(--bz-accent, #49aecb) 30%, var(--bz-stage, #0d1714)); } }
@media (prefers-reduced-motion: reduce) { .ac-btn[data-variant="hero"], .ac-btn[data-variant="hero"] > .ac-icon { transition: none; } .ac-btn[data-variant="hero"]:hover { transform: none; } .ac-btn[data-variant="hero"]:hover > .ac-icon { transform: none; } }
/* glass: on the stage/globe (pills, live chip, head tools) – the one glass, white text. */
.ac-btn[data-variant="glass"] { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-btn[data-variant="glass"][aria-pressed="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 72%, #000); color: #fff; }
/* On the stage, badges and chips also turn to glass (pills, day choice); toned badges keep their light tint. */
.ac-surface-stage .ac-chip { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .18); color: #fff; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-surface-stage .ac-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 72%, #000); border-color: transparent; color: #fff; }
.ac-surface-stage .ac-chip-count { background: rgba(255, 255, 255, .16); color: #fff; }
.ac-surface-stage .ac-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.ac-surface-stage .ac-badge[data-tone="ok"] { color: #7ee0a8; } .ac-surface-stage .ac-badge[data-tone="warn"] { color: #f2c77a; }
.ac-surface-stage .ac-badge[data-tone="danger"] { color: #ffb4c0; } .ac-surface-stage .ac-badge[data-tone="info"] { color: #b8cce0; }
.ac-surface-stage .ac-badge[data-tone="accent"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 55%, #000); color: #fff; }
/* The surface decides, not the button: under .ac-surface-stage (globe, hero) secondary/quiet buttons look like glass,
   so the same head tools work on the light page and on the night stage without touching data-variant. */
.ac-surface-stage .ac-btn:is([data-variant="secondary"], [data-variant="quiet"]) { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-surface-stage .ac-btn:is([data-variant="secondary"], [data-variant="quiet"])[aria-pressed="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 72%, #000); color: #fff; }
.ac-btn[data-danger="true"]:not([data-variant="danger"]) { color: var(--bz-danger-ink, #8f2a3e); }
.ac-btn[data-danger="true"][data-variant="secondary"] { border-color: color-mix(in srgb, var(--bz-danger, #c0405a) 35%, transparent); }
.ac-btn[aria-pressed="true"]:not([data-variant="primary"]) { background: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, var(--bz-card, #fff)); border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
@media (max-width: 600px) { .ac-btn[data-collapse="phone"] { min-width: var(--ac-h-regular); padding-inline: 0; } .ac-btn[data-collapse="phone"] .ac-label { display: none; } }
.ac-btn:active:not(:disabled), .ac-btn.ac-press-demo { transform: scale(.97); }
.ac-btn:disabled, .ac-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.ac-btn[aria-busy="true"] { cursor: progress; }
.ac-btn[aria-busy="true"] .ac-label { opacity: .55; }
@media (hover: hover) and (pointer: fine) {
  .ac-btn:hover:not(:disabled), .ac-btn.ac-hover-demo { box-shadow: var(--ac-elev-2); transform: translateY(-1px); }
  .ac-btn[data-variant="quiet"]:hover:not(:disabled), .ac-btn[data-variant="quiet"].ac-hover-demo { box-shadow: none; transform: none; background: color-mix(in srgb, var(--bz-accent, #49aecb) 8%, transparent); }
}
.ac-btn[data-block="true"] { display: flex; width: 100%; }
/* Icon buttons: no side padding at any size (the size rules above would add some and squeeze the icon). */
.ac-btn.ac-icon-btn { width: var(--ac-h-regular); padding: 0; }
.ac-btn > svg { flex: none; }
.ac-icon-btn[data-size="compact"] { width: var(--ac-h-compact); }
.ac-icon-btn[data-size="large"] { width: var(--ac-h-large); }
.ac-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ac-spin .7s linear infinite; }
@keyframes ac-spin { to { transform: rotate(360deg); } }
/* An icon button at work (aria-busy, e.g. "Aktualisieren" while it loads): its icon turns – not with reduced motion. */
.ac-icon-btn[aria-busy="true"] .ac-icon { animation: ac-spin .9s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ac-icon-btn[aria-busy="true"] .ac-icon { animation: none; } }

/* Pane boundary: a quiet hairline and compact handle inside an invisible 44 px pointer/touch target. */
.ac-splitter { position: absolute; inset-block: 0; left: 0; z-index: 2; width: 44px; transform: translateX(-50%); border: 0; background: transparent; cursor: col-resize; touch-action: none; }
.ac-splitter::before { content: ""; position: absolute; inset-block: 0; left: calc(50% - .5px); width: 1px; background: var(--ac-splitter-line, var(--bz-hair2, rgba(25, 28, 40, .16))); }
.ac-splitter::after { content: ""; position: absolute; top: 50%; left: 50%; width: 4px; height: 32px; transform: translate(-50%, -50%); border-radius: 999px; background: var(--ac-splitter-handle, color-mix(in srgb, var(--bz-text, #1b1e27) 35%, var(--bz-card, #fff))); opacity: .7; transition: opacity 160ms, background-color 160ms; }
/* More specific than the shared .ac :focus-visible ring: never outline the full-height hit target. */
.ac .ac-splitter:focus-visible { outline: none; }
.ac-splitter:focus-visible:not([data-pointer-focus="true"])::after { opacity: 1; background: var(--ac-splitter-focus-ink, var(--bz-accent, #49aecb)); box-shadow: 0 0 0 4px var(--ac-splitter-focus-gap, var(--bz-bg, #f4f3ee)), 0 0 0 6px var(--ac-splitter-focus-ink, var(--bz-accent, #49aecb)); }
@media (hover: hover) { .ac-splitter:hover::after { opacity: 1; } }
.ac-splitter[data-dragging="true"]::after { opacity: 1; background: var(--ac-splitter-focus-ink, var(--bz-accent, #49aecb)); }
@media (prefers-reduced-motion: reduce) { .ac-splitter::after { transition: none; } }

/* ---- Icons (Lucide geometry, stroke 2) ---------------------------------------------------------------------- */
.ac-icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Tabs: switch AREAS (different content) ------------------------------------------------------------------ */
.ac-tabs { display: flex; gap: var(--bz-space-4, 16px); border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.ac-tabs::-webkit-scrollbar { display: none; }
.ac-tab { scroll-snap-align: start; flex: none; }
.ac-tab { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 2.5rem; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--bz-muted, #6e7480); cursor: pointer; white-space: nowrap; }
.ac-tab[aria-selected="true"] { color: var(--bz-text, #1b1e27); }
.ac-tab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--bz-accent, #49aecb); }

/* ---- Segmented control: switch the MODE of the same view ----------------------------------------------------- */
.ac-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--bz-r4, 13px); background: color-mix(in srgb, var(--bz-text, #1b1e27) 6%, var(--bz-bg, #f4f3ee)); }
.ac-seg-option { min-height: calc(var(--ac-h-regular) - 4px); padding: 0 12px; border: 0; border-radius: var(--bz-r3, 10px); background: none; font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--bz-muted, #6e7480); cursor: pointer; white-space: nowrap; transition: background-color 160ms, color 160ms, box-shadow 160ms; }
.ac-seg-option { display: inline-flex; align-items: center; gap: 6px; }
.ac-seg-option .ac-icon { width: 1.1em; height: 1.1em; }
.ac-seg-option[aria-checked="true"] { background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-1); }

/* ---- Chips / filters ----------------------------------------------------------------------------------------- */
.ac-chips { display: flex; flex-wrap: wrap; gap: var(--bz-space-2, 8px); }
.ac-chip { min-height: var(--ac-h-compact); padding: 0 12px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-radius-chip, 999px); background: var(--bz-card, #fff); font: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--bz-text, #1b1e27); cursor: pointer; white-space: nowrap; transition: transform var(--ac-press) var(--ac-ease), background-color 160ms; }
.ac-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, var(--bz-card, #fff)); border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-chip:active { transform: scale(.97); }
.ac-chip { display: inline-flex; align-items: center; gap: 6px; }
.ac-chip-count { min-width: 18px; padding: 1px 6px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; background: color-mix(in srgb, var(--bz-text, #1b1e27) 7%, transparent); }
.ac-chip[aria-pressed="true"] .ac-chip-count { background: color-mix(in srgb, var(--bz-accent, #49aecb) 18%, transparent); }
/* File picker as a button: the native input stays (keyboard, screen readers), visually hidden. */
.ac-file { position: relative; }
.ac-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.ac-file:focus-within { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
a.ac-btn { text-decoration: none; }

/* ---- Badges / status pills (text ≥ 11 px) -------------------------------------------------------------------- */
.ac-badge { display: inline-flex; align-items: center; gap: 5px; min-height: 1.5rem; padding: 0 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; background: color-mix(in srgb, var(--bz-text, #1b1e27) 7%, transparent); color: var(--bz-text, #1b1e27); }
.ac-badge[data-icon="true"]::before { display: none; }
.ac-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.ac-badge[data-tone="accent"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-badge[data-tone="ok"] { background: color-mix(in srgb, var(--bz-success, #2e9e6b) 13%, transparent); color: var(--bz-success-ink, #1d6b48); }
.ac-badge[data-tone="warn"] { background: color-mix(in srgb, var(--bz-warn, #c68a12) 16%, transparent); color: var(--bz-warn-ink, #7a5208); }
.ac-badge[data-tone="info"] { background: color-mix(in srgb, var(--bz-info, #5b7590) 14%, transparent); color: var(--bz-info-ink, #3a5068); }
.ac-badge[data-tone="danger"] { background: color-mix(in srgb, var(--bz-danger, #c0405a) 13%, transparent); color: var(--bz-danger-ink, #8f2a3e); }

/* ---- Fields: input, select, checkbox, switch ----------------------------------------------------------------- */
.ac-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-field > .ac-field-label { font-size: 0.8125rem; font-weight: 600; color: var(--bz-text, #1b1e27); }
.ac-field[data-label-visibility="sr-only"] > .ac-field-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ac-input, .ac-select { min-height: var(--ac-h-regular); padding: 0 12px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-radius-input, 13px); background: var(--bz-card, #fff); font: inherit; font-size: 0.9375rem; color: var(--bz-text, #1b1e27); min-width: 0; }
.ac-input::placeholder { color: var(--bz-faint, #9aa0ac); }
.ac-input:focus-visible, .ac-select:focus-visible { outline-offset: 0; }
.ac-field[data-state="error"] .ac-input, .ac-field[data-state="error"] .ac-select { border-color: var(--bz-danger, #c0405a); }
.ac-field-hint { font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
/* Form flow (Florian 06.10.: „solch klemmende UI sollten unsere UI-Tools vermeiden“): fields and the action after them
   keep their distance in any plain container – no page rule needed. Zero specificity (:where), so a host can still set
   its own; containers that space by gap (fieldGrid, section bodies, toolbars) reset it, else the gap would double. */
:where(.ac-field) + :where(.ac-field) { margin-top: 12px; }
:where(.ac-field) + :where(.ac-btn, .ac-actions, .ac-btn-row) { margin-top: 16px; }
:where(.ac-field-grid, .ac-settings-section-body, .ac-toolbar, .ac-field-row) > :where(.ac-field, .ac-btn, .ac-actions, .ac-btn-row) { margin-top: 0; }
.ac-textarea { height: auto; min-height: calc(var(--ac-h-regular) * 2); max-height: 50vh; padding: 8px 12px; line-height: var(--bz-lh-normal, 1.5); resize: vertical; field-sizing: content; }
.ac-field-count { align-self: flex-end; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
.ac-field-count[data-near="true"] { color: var(--bz-warn-ink, #7a5208); }
.ac-field[data-state="error"] .ac-field-hint { color: var(--bz-danger-ink, #8f2a3e); }
.ac-check, .ac-switch { display: inline-flex; align-items: center; gap: 10px; font-size: 0.875rem; cursor: pointer; }
.ac-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--bz-accent, #49aecb); }
.ac-switch input { appearance: none; -webkit-appearance: none; flex: none; width: 2.5rem; height: 1.5rem; margin: 0; border-radius: 999px; background: var(--bz-hair2, rgba(25, 28, 40, .16)); position: relative; cursor: pointer; transition: background-color 180ms var(--ac-ease); }
.ac-switch input::before { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); border-radius: 50%; background: #fff; box-shadow: var(--ac-elev-1); transition: transform 180ms var(--ac-ease); }
.ac-switch input:checked { background: var(--bz-accent, #49aecb); }
.ac-switch input:checked::before { transform: translateX(1rem); }
.ac-check input:disabled, .ac-switch input:disabled { opacity: .4; cursor: default; }

/* ---- Toast: ONE position – bottom centre, above the tab bar -------------------------------------------------- */
.ac-toast-host { position: fixed; left: 0; right: 0; bottom: max(calc(env(safe-area-inset-bottom, 0px) + var(--ac-tabbar-h, 0px) + 16px), var(--ac-toast-offset, 0px)); z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
/* As a manual popover (top layer, above modals): no UA box, the same place. */
.ac-toast-host[popover] { inset: auto 0 max(calc(env(safe-area-inset-bottom, 0px) + var(--ac-tabbar-h, 0px) + 16px), var(--ac-toast-offset, 0px)) 0; width: auto; height: auto; margin: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.ac-toast-host[popover]:not(:popover-open) { display: none; }
.ac-toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: min(30rem, 100%); min-height: 2.75rem; padding: 10px 10px 10px 16px; border-radius: var(--bz-r5, 14px); background: color-mix(in srgb, var(--bz-text, #1b1e27) 92%, transparent); color: #fff; box-shadow: var(--ac-elev-3); font-size: 0.875rem; backdrop-filter: blur(14px) saturate(1.4); }
.ac-toast[data-tone="warn"] { background: #5b3c05; }
.ac-toast[data-tone="error"] { background: #7a1f31; }
.ac-toast .ac-btn[data-variant="quiet"] { color: #fff; }
.ac-toast-enter { animation: ac-rise 220ms var(--ac-ease); }
@keyframes ac-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---- Banner / demo banner: one style ------------------------------------------------------------------------- */
.ac-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--bz-r4, 13px); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); background: var(--bz-sub, #f6f5f1); font-size: 0.875rem; }
.ac-banner > .ac-banner-text { flex: 1; min-width: 0; }
.ac-banner[data-tone="info"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 8%, var(--bz-card, #fff)); border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 25%, transparent); }
.ac-banner[data-tone="warn"] { background: color-mix(in srgb, var(--bz-warn, #c68a12) 10%, var(--bz-card, #fff)); border-color: color-mix(in srgb, var(--bz-warn, #c68a12) 30%, transparent); }
.ac-banner[data-tone="live"] { background: color-mix(in srgb, var(--bz-danger, #c0405a) 7%, var(--bz-card, #fff)); border-color: color-mix(in srgb, var(--bz-danger, #c0405a) 30%, transparent); position: sticky; top: 0; z-index: 5; }
.ac-live-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--bz-rec, #e0556e); box-shadow: 0 0 0 0 color-mix(in srgb, var(--bz-rec, #e0556e) 60%, transparent); animation: ac-live 1.6s ease-out infinite; }
@keyframes ac-live { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ac-banner[data-tone="demo"] { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--bz-accent, #49aecb) 7%, var(--bz-card, #fff)) 0 10px, var(--bz-card, #fff) 10px 20px); border-style: dashed; }

/* ---- Bottom tab bar: one style, icon + short label (never truncated), active indicator ----------------------- */
.ac-tabbar { --ac-tabbar-h: 3.625rem; position: sticky; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: calc(var(--ac-tabbar-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); background: var(--bz-card, #fff); }
@supports (backdrop-filter: blur(1px)) { .ac-tabbar { background: color-mix(in srgb, var(--bz-card, #fff) 82%, transparent); backdrop-filter: blur(20px) saturate(1.6); } }
.ac-tabbar-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 6px 2px; border: 0; background: none; font: inherit; font-size: 0.75rem; font-weight: 600; line-height: 1.15; color: var(--bz-muted, #6e7480); cursor: pointer; text-align: center; }
/* Never truncated: at a large system text size the short label wraps (German hyphenation, lang="de" on the page). */
.ac-tabbar-item > span { max-width: 100%; hyphens: auto; overflow-wrap: anywhere; }
.ac-tabbar-item .ac-icon { width: 1.5rem; height: 1.5rem; }
.ac-tabbar-item[aria-current="page"] { color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-tabbar-item[aria-current="page"]::before { content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--bz-accent, #49aecb); }

/* ---- Empty state, skeleton ----------------------------------------------------------------------------------- */
.ac-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px 16px; text-align: center; color: var(--bz-muted, #6e7480); }
.ac-empty .ac-icon { width: 2rem; height: 2rem; color: var(--bz-faint, #9aa0ac); }
.ac-empty-title { font-size: 1rem; font-weight: 700; color: var(--bz-text, #1b1e27); letter-spacing: -.01em; }
.ac-skeleton { display: flex; flex-direction: column; gap: 8px; }
.ac-skel-line { height: 0.75rem; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent) 25%, color-mix(in srgb, var(--bz-text, #1b1e27) 11%, transparent) 37%, color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent) 63%); background-size: 400% 100%; animation: ac-shimmer 1.4s ease infinite; }
.ac-skel-line:last-child { width: 60%; }
@keyframes ac-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/* ---- List row: one button with icon, title, detail, trailing note -------------------------------------------- */
.ac-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 3rem; padding: 8px 12px; border: 0; border-radius: var(--bz-r4, 13px); background: transparent; font: inherit; color: var(--bz-text, #1b1e27); text-align: left; cursor: pointer; transition: background-color 140ms; }
@media (hover: hover) { .ac-row:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 5%, transparent); } }
.ac-row[aria-current="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); }
.ac-row-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, var(--bz-card, #fff)); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-row-dot { flex: none; width: 0.625rem; height: 0.625rem; margin: 0 4px; border-radius: 50%; background: var(--ac-row-tone, var(--bz-muted, #6e7480)); }
.ac-row[data-tone="danger"] { --ac-row-tone: var(--bz-danger, #c0405a); --ac-row-tone-ink: var(--bz-danger-ink, #8f2a3e); }
.ac-row[data-tone="warn"] { --ac-row-tone: var(--bz-warn, #c68a12); --ac-row-tone-ink: var(--bz-warn-ink, #7a5208); }
.ac-row[data-tone="info"] { --ac-row-tone: var(--bz-info, #5b7590); --ac-row-tone-ink: var(--bz-info-ink, #3a5068); }
.ac-row[data-tone="ok"] { --ac-row-tone: var(--bz-success, #2e9e6b); --ac-row-tone-ink: var(--bz-success-ink, #1d6b48); }
.ac-row[data-tone] .ac-row-icon { background: color-mix(in srgb, var(--ac-row-tone) 14%, var(--bz-card, #fff)); color: var(--ac-row-tone-ink); }
/* Combobox: the suggestion list hangs under the field, above the content. */
.ac-combo-wrap { position: relative; display: flex; flex-direction: column; }
.ac-combo-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; max-height: min(20rem, 50vh); overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); box-shadow: var(--ac-elev-3); overscroll-behavior: contain; }
.ac-combo-list[hidden] { display: none; }
.ac-combo-option { display: flex; align-items: center; gap: 10px; min-height: 2.75rem; padding: 6px 10px; border-radius: var(--bz-r3, 10px); cursor: pointer; }
.ac-combo-option[aria-selected="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); }
@media (hover: hover) { .ac-combo-option:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 5%, transparent); } }
.ac-combo-option .ac-badge { flex: none; }
.ac-combo-note { padding: 10px 12px; font-size: 0.8125rem; color: var(--bz-muted, #6e7480); }
.ac-combo[aria-busy="true"] .ac-input { background-image: linear-gradient(90deg, transparent, color-mix(in srgb, var(--bz-accent, #49aecb) 8%, transparent), transparent); background-size: 200% 100%; animation: ac-shimmer 1.2s linear infinite; }
/* Origin of a value (work order editor): dot in --bz-src-*, the word always beside it (colour is never alone). */
.ac-src-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ac-src, var(--bz-src-missing, #7b828d)); }
[data-origin="source"] { --ac-src: var(--bz-src-source, #3d7bb8); }
[data-origin="manual"] { --ac-src: var(--bz-src-manual, #c27c0e); }
[data-origin="platform"] { --ac-src: var(--bz-src-platform, #6b7685); }
[data-origin="document"] { --ac-src: var(--bz-src-document, #7a52b3); }
[data-origin="missing"] { --ac-src: var(--bz-src-missing, #7b828d); }
[data-origin="missing"] .ac-src-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ac-src); }
.ac-src-mark { display: inline-grid; place-items: center; width: 1rem; height: 1rem; vertical-align: middle; cursor: help; transition: opacity 140ms; }
[data-origin-reveal="hover"] .ac-src-mark { opacity: 0; }
[data-origin-reveal="hover"]:hover .ac-src-mark, [data-origin-reveal="hover"]:focus-within .ac-src-mark { opacity: 1; }
@media (pointer: coarse) { [data-origin-reveal="hover"] .ac-src-mark { opacity: 1; } }
.ac-src-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
.ac-src-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ac-field-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
.ac-field-chip-origin { font-weight: 700; color: var(--bz-text, #1b1e27); }
.ac-field-chip-source::before { content: "·"; margin-right: 6px; }
.ac-field-chip .ac-btn { margin-left: 2px; }
.ac-drift { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--bz-r4, 13px); background: color-mix(in srgb, var(--bz-warn, #c68a12) 10%, var(--bz-card, #fff)); border: 1px solid color-mix(in srgb, var(--bz-warn, #c68a12) 30%, transparent); font-size: 0.8125rem; }
.ac-drift p { margin: 0; }
.ac-drift-text { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--bz-warn-ink, #7a5208); }
.ac-drift-text .ac-icon { width: 1.1em; height: 1.1em; flex: none; }
.ac-drift-value { color: var(--bz-text, #1b1e27); overflow-wrap: anywhere; }
.ac-drift-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Outline (Gliederung): rows with grip, optional caret, label, badge and eye; hidden rows struck through. */
.ac-outline-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1px; }
.ac-outline-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 2.25rem; padding-right: 2px; border-radius: var(--bz-r3, 10px); }
@media (hover: hover) { .ac-outline-row:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 4%, transparent); } }
.ac-outline-row[aria-current="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); }
.ac-outline-row[data-child="true"] { padding-left: 1.25rem; }
.ac-outline-row[data-group="true"] .ac-outline-label { font-weight: 700; }
.ac-outline-row[data-dragging="true"] { opacity: .45; }
.ac-outline-row[data-drop="before"]::before, .ac-outline-row[data-drop="after"]::after { content: ""; position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: var(--bz-accent, #49aecb); }
.ac-outline-row[data-drop="before"]::before { top: -1px; }
.ac-outline-row[data-drop="after"]::after { bottom: -1px; }
.ac-outline-grip { flex: none; display: grid; place-items: center; width: 1.125rem; color: var(--bz-faint, #9aa0ac); cursor: grab; opacity: 0; transition: opacity 120ms; }
.ac-outline-row:hover .ac-outline-grip, .ac-outline-row:focus-within .ac-outline-grip { opacity: 1; }
@media (pointer: coarse) { .ac-outline-grip { opacity: 1; } }
.ac-outline-grip .ac-icon { width: 0.875rem; height: 0.875rem; }
.ac-outline-caret, .ac-outline-hide { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--bz-r2, 8px); background: none; color: var(--bz-muted, #6e7480); cursor: pointer; }
.ac-outline-caret .ac-icon, .ac-outline-hide .ac-icon { width: 1rem; height: 1rem; }
.ac-outline-caret .ac-icon { transition: transform 160ms var(--ac-ease, ease); }
.ac-outline-caret[aria-expanded="false"] .ac-icon { transform: rotate(-90deg); }
.ac-outline-hide { opacity: 0; }
.ac-outline-row:hover .ac-outline-hide, .ac-outline-hide:focus-visible, .ac-outline-hide[aria-pressed="true"] { opacity: 1; }
@media (pointer: coarse) { .ac-outline-hide { opacity: 1; } }
.ac-outline-lock { flex: none; display: grid; place-items: center; width: 1.75rem; color: var(--bz-faint, #9aa0ac); }
.ac-outline-lock .ac-icon { width: 0.875rem; height: 0.875rem; }
.ac-outline-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; min-height: 2.25rem; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 0.875rem; color: var(--bz-text, #1b1e27); text-align: left; cursor: pointer; }
.ac-outline-main > .ac-icon { width: 1rem; height: 1rem; flex: none; color: var(--bz-muted, #6e7480); }
.ac-outline-label { flex: 1; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere; }
.ac-outline-main { padding-block: 4px; }
.ac-outline-row[data-hidden="true"] .ac-outline-label { text-decoration: line-through; color: var(--bz-muted, #6e7480); }
.ac-outline-badge { flex: none; padding: 1px 5px; border-radius: 5px; font-size: 0.75rem; font-weight: 800; letter-spacing: .04em; color: var(--bz-muted, #6e7480); background: color-mix(in srgb, var(--bz-text, #1b1e27) 7%, transparent); }
/* List editor: flex rows (grip, fields, remove); widths by class + data-grow so header and rows line up. */
.ac-list-editor { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ac-list-editor > legend { padding: 0; margin-bottom: 4px; }
.ac-list-head, .ac-list-row { display: flex; align-items: center; gap: 6px; }
.ac-list-cell { flex: 1 1 0; min-width: 0; }
.ac-list-cell[data-grow="2"] { flex-grow: 2; } .ac-list-cell[data-grow="3"] { flex-grow: 3; } .ac-list-cell[data-grow="4"] { flex-grow: 4; }
.ac-list-cell-check { flex: none; width: 3.5rem; text-align: center; }
.ac-list-gripcell { flex: none; width: 1.125rem; }
.ac-list-endcell { flex: none; width: var(--ac-h-compact); }
.ac-list-head { font-size: 0.75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--bz-muted, #6e7480); }
.ac-list-body { display: flex; flex-direction: column; gap: 4px; }
.ac-list-row { position: relative; border-radius: var(--bz-r3, 10px); }
.ac-list-row:hover .ac-list-grip, .ac-list-row:focus-within .ac-list-grip { opacity: 1; }
.ac-list-row[data-dragging="true"] { opacity: .45; }
.ac-list-row[data-drop="before"]::before, .ac-list-row[data-drop="after"]::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--bz-accent, #49aecb); }
.ac-list-row[data-drop="before"]::before { top: -3px; }
.ac-list-row[data-drop="after"]::after { bottom: -3px; }
.ac-list-input { width: 100%; min-height: var(--ac-h-compact); font-size: 0.875rem; }
.ac-list-check { display: grid; place-items: center; }
.ac-list-check input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--bz-accent, #49aecb); }
.ac-list-editor > .ac-btn { align-self: flex-start; }
/* Command palette: a dialog high on the page, search bar on top, the list scrolls. */
.ac-dialog.ac-palette { width: min(620px, calc(100vw - 32px)); margin-top: min(12vh, 120px); max-height: min(70vh, 560px); }
.ac-palette-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); color: var(--bz-muted, #6e7480); }
.ac-palette-bar > .ac-icon { width: 1.125rem; height: 1.125rem; flex: none; }
.ac-palette-input { flex: 1; min-width: 0; min-height: 2.25rem; border: 0; background: none; font: inherit; font-size: 1.0625rem; color: var(--bz-text, #1b1e27); }
.ac-palette-input:focus-visible { outline: none; }
.ac-palette-input::-webkit-search-cancel-button { display: none; }
.ac-palette-kbd { flex: none; padding: 2px 6px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: 6px; font: inherit; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
.ac-palette-list { flex: 1; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.ac-palette-group { padding: 10px 10px 4px; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted, #6e7480); }
.ac-palette-icon { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: var(--bz-r2, 8px); background: color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent); color: var(--bz-muted, #6e7480); }
.ac-palette-icon .ac-icon { width: 1rem; height: 1rem; }
.ac-palette-where { flex: none; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
@media (max-width: 600px) { .ac-dialog.ac-palette { width: calc(100vw - 16px); margin: 8px auto auto; border-radius: var(--bz-radius-sheet, 22px); max-height: calc(100dvh - 16px); } }
.ac-btn .ac-icon-end { margin-left: -2px; margin-right: -4px; }
/* Menu: a popover in the top layer, placed under its trigger by the factory (CSSOM, no style attributes in markup). */
.ac-menu-wrap { display: inline-flex; }
.ac-menu { position: fixed; inset: auto; margin: 0; min-width: 12rem; max-width: min(20rem, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); }
.ac-menu:not(:popover-open):not([data-open="true"]) { display: none; }
.ac-menu:popover-open, .ac-menu[data-open="true"] { display: flex; flex-direction: column; gap: 2px; animation: ac-rise 160ms var(--ac-ease); }
.ac-menu-item { display: flex; align-items: center; gap: 10px; min-height: 2.5rem; padding: 0 12px; border: 0; border-radius: var(--bz-r3, 10px); background: none; font: inherit; font-size: 0.9375rem; color: inherit; text-align: left; cursor: pointer; }
.ac-menu-item .ac-icon { width: 1.1rem; height: 1.1rem; flex: none; color: var(--bz-muted, #6e7480); }
.ac-menu-item:focus-visible { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); outline: none; }
@media (hover: hover) { .ac-menu-item:hover:not(:disabled) { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); outline: none; } }
.ac-menu-item[data-danger="true"] { color: var(--bz-danger-ink, #8f2a3e); }
.ac-menu-item:disabled { opacity: .45; cursor: default; }
/* Sections (role/tenant switch): a quiet heading, a hairline before each new group; checked items show a tick, radios a dot. */
.ac-menu-heading { padding: 8px 12px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--bz-muted, #6e7480); }
.ac-menu-divider { height: 1px; margin: 6px 4px; background: var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-menu-item[aria-checked] .ac-label { flex: 1; }
.ac-menu-item[aria-checked="true"]::after { content: ""; flex: none; width: .4rem; height: .75rem; margin-right: 2px; border: solid var(--bz-accent, #49aecb); border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ac-menu-item[role="menuitemradio"][aria-checked="true"]::after { width: .5rem; height: .5rem; border: 0; border-radius: 50%; background: var(--bz-accent, #49aecb); transform: none; }
/* App header: solid on pages, glass over the map / a hero image; actions fold into "…" below 600 px. */
.ac-appbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 3.5rem; padding: 6px 12px calc(6px) 16px; padding-top: max(6px, env(safe-area-inset-top, 0px)); }
.ac-appbar[data-tone="solid"] { background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-appbar[data-tone="over-media"] { background: linear-gradient(to bottom, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0)); color: #fff; }
.ac-appbar[data-tone="over-media"] .ac-appbar-title { text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.ac-appbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ac-appbar-brand { display: inline-flex; flex: none; max-height: 2rem; }
.ac-appbar-brand img, .ac-appbar-brand svg { max-height: 2rem; width: auto; }
.ac-appbar-title { margin: 0; font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-appbar-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.ac-appbar-more:not([data-always="true"]) { display: none; }
.ac-appbar-action[hidden], .ac-appbar-more[hidden] { display: none !important; }
.ac-appbar-action[data-danger="true"][data-variant="glass"] { background: color-mix(in srgb, var(--bz-danger, #c0405a) 82%, #000); color: #fff; }
.ac-menu-item { text-decoration: none; }
@media (max-width: 600px) {
  .ac-appbar-action:not([data-keep="true"]) { display: none; }
  .ac-appbar-more { display: inline-flex; }
  .ac-appbar-action[data-keep="true"] .ac-label { display: none; }
  .ac-appbar-action[data-keep="true"] { padding-inline: 0; min-width: var(--ac-h-regular); }
}
/* Map info card: light on maps, dark glass on the globe; inside a MapLibre popup its own chrome is switched off. */
.ac-map-popup { display: flex; flex-direction: column; gap: 6px; width: 16.25rem; max-width: calc(100vw - 32px); padding: 12px 12px 10px 14px; border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); font-size: 0.875rem; }
.ac-map-popup[data-width="m"] { width: 18.125rem; }
.ac-map-popup[data-tone="dark"] { background: color-mix(in srgb, var(--bz-stage, #0d1714) 82%, transparent); color: #fff; border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); }
.ac-map-popup-head { display: flex; align-items: flex-start; gap: 6px; }
.ac-map-popup-texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-map-popup-kicker { display: flex; align-items: center; gap: 5px; margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted, #6e7480); }
.ac-map-popup-kicker .ac-icon { width: 0.9rem; height: 0.9rem; }
.ac-map-popup-kicker[data-tone="urgent"] { color: var(--bz-danger-ink, #8f2a3e); }
.ac-map-popup-kicker[data-tone="soon"] { color: var(--bz-warn-ink, #7a5208); }
.ac-map-popup-kicker[data-tone="info"] { color: var(--bz-info-ink, #3a5068); }
.ac-map-popup[data-tone="dark"] .ac-map-popup-kicker { color: rgba(255, 255, 255, .72); }
.ac-map-popup[data-tone="dark"] .ac-map-popup-kicker[data-tone="urgent"] { color: #ffb4c0; }
.ac-map-popup[data-tone="dark"] .ac-map-popup-kicker[data-tone="soon"] { color: #f2c77a; }
.ac-map-popup-title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.ac-map-popup-body { display: flex; flex-direction: column; gap: 4px; color: inherit; }
.ac-map-popup-body p { margin: 0; }
.ac-map-popup-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px -6px 0; }
.ac-map-popup[data-tone="dark"] .ac-btn[data-variant="quiet"] { color: #fff; }
.ac-map-popup-status { margin: 0; font-size: 0.75rem; color: var(--bz-muted, #6e7480); }
.ac-map-popup[data-tone="dark"] .ac-map-popup-status { color: rgba(255, 255, 255, .72); }
.maplibregl-popup-content:has(> .ac-map-popup) { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.maplibregl-popup:has(.ac-map-popup[data-tone="light"]) .maplibregl-popup-tip { border-top-color: var(--bz-card, #fff); border-bottom-color: var(--bz-card, #fff); }
.maplibregl-popup:has(.ac-map-popup[data-tone="dark"]) .maplibregl-popup-tip { display: none; }
/* Colour field: swatch (native picker) + hex input; the contrast note in the status inks. */
.ac-color-row { display: flex; align-items: center; gap: 8px; }
.ac-color-swatch { flex: none; width: var(--ac-h-regular); min-height: var(--ac-h-regular); align-self: stretch; padding: 3px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-r3, 10px); background: var(--bz-card, #fff); cursor: pointer; }
.ac-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.ac-color-swatch::-webkit-color-swatch { border: 0; border-radius: 7px; }
.ac-color-swatch::-moz-color-swatch { border: 0; border-radius: 7px; }
.ac-color-hex { width: 7.5rem; font-variant-numeric: tabular-nums; text-transform: lowercase; }
.ac-color-check[data-state="ok"] { color: var(--bz-success-ink, #1d6b48); }
.ac-color-check[data-state="warn"] { color: var(--bz-warn-ink, #7a5208); }
.ac-color-check[data-state="bad"] { color: var(--bz-danger-ink, #8f2a3e); }
.ac-field[data-state="error"] .ac-color-hex { border-color: var(--bz-danger, #c0405a); }
/* Visually hidden, still read out (the word behind a colour). */
.ac-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.ac-row-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ac-row-text b { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.ac-row-text small { font-size: 0.8125rem; color: var(--bz-muted, #6e7480); overflow-wrap: anywhere; }
.ac-row-trailing { flex: none; font-size: 0.8125rem; color: var(--bz-muted, #6e7480); }

/* ---- Map tool: floating glass button over a map (toggle with aria-pressed) ---------------------------------- */
/* Hover only where a pointer hovers: on phones a tap leaves :hover stuck and a grey slot reads as "on" (Florian 03.10.). */
/* The solid map bar: equal slots, hairlines between, fixed width per slot (no jumping when a slot swaps). */
.ac-map-toolbar { display: flex; align-items: stretch; width: max-content; max-width: 100%; background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: 14px; box-shadow: var(--ac-elev-2); overflow: hidden; }
.ac-map-toolbar-item { flex: 1 1 0; min-width: 0; width: 7.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 2.75rem; padding: 0 12px; border: 0; background: none; color: var(--bz-text, #1b1e27); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color 160ms, color 160ms; }
.ac-map-toolbar-item + .ac-map-toolbar-item { border-left: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-map-toolbar-item .ac-icon { width: 1.25em; height: 1.25em; flex: none; }
.ac-map-toolbar-item .ac-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-map-toolbar-item[aria-pressed="true"] { color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); box-shadow: inset 0 -3px 0 var(--bz-accent, #49aecb); }
@media (hover: hover) { .ac-map-toolbar-item:hover:not(:disabled) { background: color-mix(in srgb, var(--bz-text, #1b1e27) 5%, transparent); } }
.ac-map-toolbar-item:active:not(:disabled) { background: color-mix(in srgb, var(--bz-text, #1b1e27) 9%, transparent); }
.ac-map-toolbar-item:disabled { opacity: .4; cursor: default; }
/* Too narrow for the labels (mapToolbar compact): symbols only, larger, no ellipsis. */
.ac-map-toolbar[data-compact="true"] .ac-label { display: none; }
.ac-map-toolbar[data-compact="true"] .ac-map-toolbar-item { width: 3rem; padding: 0 8px; }
.ac-map-toolbar[data-compact="true"] .ac-icon { width: 1.4em; height: 1.4em; }
@media (max-width: 600px) {
  .ac-map-toolbar { width: 100%; }
  .ac-map-toolbar-item { width: auto; flex-direction: column; gap: 3px; min-height: 3.5rem; padding: 6px 2px; font-size: 0.75rem; }
  .ac-map-toolbar-item .ac-label { white-space: normal; text-align: center; line-height: 1.15; hyphens: auto; }
}
.ac-map-tool { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 2.5rem; min-height: 2.5rem; padding: 0; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: 999px; color: var(--bz-text, #1b1e27); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; box-shadow: var(--ac-elev-2); transition: transform var(--ac-press) var(--ac-ease), background-color 160ms, color 160ms; }
.ac-map-tool[data-labelled="true"] { padding: 0 14px 0 11px; }
.ac-map-tool .ac-icon { width: 1.15em; height: 1.15em; }
.ac-map-tool[data-tone="dark"] { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-map-tool[aria-pressed="true"] { background: var(--bz-accent, #49aecb); color: var(--bz-on-accent, #fff); border-color: transparent; }
.ac-map-tool:active:not(:disabled) { transform: scale(.94); }
.ac-map-tool:disabled { opacity: .4; cursor: default; }

/* ---- Avatar --------------------------------------------------------------------------------------------------- */
.ac-avatar { display: inline-grid; place-items: center; flex: none; width: var(--bz-avatar-size, 2.125rem); height: var(--bz-avatar-size, 2.125rem); border-radius: 50%; overflow: hidden; background: var(--bz-avatar-bg, color-mix(in srgb, var(--bz-accent, #49aecb) 14%, var(--bz-card, #fff))); color: var(--bz-avatar-ink, var(--bz-accent-ink, var(--bz-accent, #49aecb))); font-size: 0.8125rem; font-weight: 700; }
.ac-avatar[data-size="28"] { width: var(--bz-avatar-size-sm, 1.75rem); height: var(--bz-avatar-size-sm, 1.75rem); font-size: 0.75rem; }
.ac-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Dialog: bottom sheet on phones, centred above -------------------------------------------------------------- */
.ac-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(85vh, 760px); padding: 0; border: 0; border-radius: var(--bz-radius-sheet, 22px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); overflow: hidden; }
.ac-dialog[open] { display: flex; flex-direction: column; animation: ac-rise 220ms var(--ac-ease); }
.ac-dialog::backdrop { background: rgba(15, 18, 26, .38); backdrop-filter: blur(2px); }
.ac-dialog-head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 6px 20px; }
.ac-dialog-title { flex: 1; margin: 0; font-size: 1.125rem; }
.ac-dialog-body { padding: 4px 20px 16px; overflow: auto; display: flex; flex-direction: column; gap: 14px; }
.ac-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
@media (max-width: 600px) {
  .ac-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--bz-radius-sheet, 22px) var(--bz-radius-sheet, 22px) 0 0; }
  .ac-dialog-actions > .ac-btn { flex: 1 1 auto; }
}

/* ---- Glass for hero surfaces and dark backgrounds (globe stage, cover images) ------------------------------------
   ONE glass: blur 16 px + saturation, a 1 px light edge, one shadow. Dark glass is opaque enough (68 %) that white text
   stays AA over the bright atmosphere rim of the globe; without backdrop-filter it is solid. */
.ac-glass {
  --ac-glass-bg: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); --ac-glass-edge: rgba(255, 255, 255, .14); --ac-glass-ink: #fff; --ac-glass-muted: rgba(255, 255, 255, .78);
  background: color-mix(in srgb, var(--bz-stage, #0d1714) 88%, #ffffff); color: var(--ac-glass-ink); border: 1px solid var(--ac-glass-edge); border-radius: var(--bz-r5, 14px); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
}
.ac-glass[data-tone="light"] { --ac-glass-bg: color-mix(in srgb, #ffffff 80%, transparent); --ac-glass-edge: rgba(255, 255, 255, .7); --ac-glass-ink: var(--bz-text, #1b1e27); --ac-glass-muted: var(--bz-muted, #6e7480); background: #f7f7f4; box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .28); }
@supports (backdrop-filter: blur(1px)) { .ac-glass { background: var(--ac-glass-bg); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); } }
@media (prefers-reduced-transparency: reduce) { .ac-glass { backdrop-filter: none; background: color-mix(in srgb, var(--bz-stage, #0d1714) 88%, #ffffff); } .ac-glass[data-tone="light"] { background: #f7f7f4; } }
/* Paper stage (cockpit light mode, Florian 06.10.): under .ac-surface-paper – and in a light appShell – glass turns light
   (white veil, ink text, hairline), pressed states take the accent with its own text colour. data-tone="dark" stays dark
   (a map popup over the globe). */
:is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass:not([data-tone="dark"]) { --ac-glass-bg: color-mix(in srgb, #ffffff 82%, transparent); --ac-glass-edge: var(--bz-hair2, rgba(25, 28, 40, .16)); --ac-glass-ink: var(--bz-text, #1b1e27); --ac-glass-muted: var(--bz-muted, #6e7480); background: #f7f7f4; }
:is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass:not([data-tone="dark"]) .ac-btn[data-variant="secondary"], :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass:not([data-tone="dark"]) .ac-chip { background: rgba(255, 255, 255, .6); color: var(--ac-glass-ink); }
:is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-btn[data-variant="glass"] { background: color-mix(in srgb, #ffffff 82%, transparent); border-color: var(--bz-hair2, rgba(25, 28, 40, .16)); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-1); }
:is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-btn[data-variant="glass"][aria-pressed="true"], :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass:not([data-tone="dark"]) .ac-chip[aria-pressed="true"] { background: var(--bz-accent, #49aecb); color: var(--bz-on-accent, #ffffff); border-color: transparent; }
@media (prefers-reduced-transparency: reduce) { :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-btn[data-variant="glass"] { background: var(--bz-card, #ffffff); backdrop-filter: none; } }
.ac-glass-panel { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.ac-glass-title { margin: 0; font-size: 0.9375rem; color: var(--ac-glass-ink); }
.ac-glass .ac-btn[data-variant="secondary"], .ac-glass .ac-chip { background: rgba(255, 255, 255, .1); border-color: var(--ac-glass-edge); color: var(--ac-glass-ink); }
.ac-glass[data-tone="light"] .ac-btn[data-variant="secondary"], .ac-glass[data-tone="light"] .ac-chip { background: rgba(255, 255, 255, .6); color: var(--ac-glass-ink); }
.ac-glass .ac-chip[aria-pressed="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 72%, #000); border-color: transparent; color: #fff; }
.ac-glass .ac-chip[aria-pressed="true"] .ac-chip-count { background: rgba(255, 255, 255, .22); }

/* Callout: glass label with a leader line to its point (--ac-x/--ac-y set by place()). */
.ac-callout { position: absolute; left: var(--ac-x, 0); top: var(--ac-y, 0); display: inline-flex; align-items: center; gap: 8px; max-width: 16rem; padding: 7px 12px 7px 10px; font: inherit; font-size: 0.8125rem; text-align: left; cursor: default; transform: translate(-50%, calc(-100% - 22px)); animation: ac-callout-in 260ms var(--ac-ease); }
button.ac-callout { cursor: pointer; }
.ac-callout::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 22px; background: linear-gradient(var(--ac-glass-edge), currentColor); opacity: .7; }
.ac-callout::before { content: ""; position: absolute; left: calc(50% - 3px); top: calc(100% + 19px); width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.ac-callout[data-side="bottom"] { transform: translate(-50%, 22px); }
/* line: false – a label right at its point (pin tags), no leader line, no dot. */
.ac-callout[data-line="false"] { transform: translate(-50%, calc(-100% - 8px)); }
.ac-callout[data-line="false"]::after, .ac-callout[data-line="false"]::before { display: none; }
.ac-callout[data-side="bottom"]::after { top: auto; bottom: 100%; background: linear-gradient(currentColor, var(--ac-glass-edge)); }
.ac-callout[data-side="bottom"]::before { top: auto; bottom: calc(100% + 19px); }
.ac-callout[data-side="left"] { transform: translate(calc(-100% - 22px), -50%); }
.ac-callout[data-side="left"]::after { left: 100%; top: 50%; width: 22px; height: 1px; }
.ac-callout[data-side="left"]::before { left: calc(100% + 19px); top: calc(50% - 3px); }
.ac-callout[data-side="right"] { transform: translate(22px, -50%); }
.ac-callout[data-side="right"]::after { left: auto; right: 100%; top: 50%; width: 22px; height: 1px; }
.ac-callout[data-side="right"]::before { left: auto; right: calc(100% + 19px); top: calc(50% - 3px); }
/* Inside a map marker: beside the parent (the marker element is the containing block), no leader line. */
.ac-callout[data-anchor="marker"] { left: auto; top: auto; white-space: nowrap; pointer-events: auto; }
.ac-callout[data-anchor="marker"][data-side="right"] { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.ac-callout[data-anchor="marker"][data-side="left"] { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.ac-callout[data-anchor="marker"][data-side="top"] { left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); }
.ac-callout[data-anchor="marker"][data-side="bottom"] { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); }
.ac-callout-text { display: flex; flex-direction: column; min-width: 0; }
.ac-callout-text b { font-weight: 700; }
.ac-callout-text small { color: var(--ac-glass-muted); font-size: 0.75rem; }
@keyframes ac-callout-in { from { opacity: 0; } }

/* Key figure on hero/glass. */
.ac-stat { display: flex; flex-direction: column; gap: 4px; min-width: 7.5rem; padding: 12px 14px; }
.ac-stat-label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; letter-spacing: .02em; color: var(--ac-glass-muted); }
.ac-stat[data-action="true"] { font: inherit; color: inherit; text-align: left; cursor: pointer; transition: transform var(--ac-press) var(--ac-ease), box-shadow 160ms; }
.ac-stat[data-action="true"]:active { transform: scale(.98); }
.ac-stat-hint { font-size: 0.75rem; color: var(--ac-glass-muted); overflow-wrap: anywhere; }
.ac-stat[data-surface="plain"] .ac-stat-hint { color: var(--bz-muted, #6e7480); }
/* Status on glass: icon and value tinted, light enough on the dark stage (the label still names the state). */
.ac-glass.ac-stat[data-status="warn"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: #f2c77a; }
.ac-glass.ac-stat[data-status="danger"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: #ffb4c0; }
.ac-glass.ac-stat[data-status="ok"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: #7ee0a8; }
.ac-glass.ac-stat[data-status="info"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: #b8cce0; }
.ac-glass.ac-stat[data-tone="light"][data-status="warn"] :is(.ac-stat-label .ac-icon, .ac-stat-value), :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass.ac-stat:not([data-tone="dark"])[data-status="warn"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: var(--bz-warn-ink, #7a5208); }
.ac-glass.ac-stat[data-tone="light"][data-status="danger"] :is(.ac-stat-label .ac-icon, .ac-stat-value), :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass.ac-stat:not([data-tone="dark"])[data-status="danger"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: var(--bz-danger-ink, #8f2a3e); }
.ac-glass.ac-stat[data-tone="light"][data-status="ok"] :is(.ac-stat-label .ac-icon, .ac-stat-value), :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass.ac-stat:not([data-tone="dark"])[data-status="ok"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: var(--bz-success-ink, #1d6b48); }
.ac-glass.ac-stat[data-tone="light"][data-status="info"] :is(.ac-stat-label .ac-icon, .ac-stat-value), :is(.ac-surface-paper, .ac-shell[data-surface="light"]) .ac-glass.ac-stat:not([data-tone="dark"])[data-status="info"] :is(.ac-stat-label .ac-icon, .ac-stat-value) { color: var(--bz-info-ink, #3a5068); }
.ac-stat-value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ac-stat-delta { font-size: 0.75rem; font-weight: 700; color: var(--ac-glass-muted); }
.ac-stat-delta[data-trend="up"] { color: #7ee0a8; }
.ac-stat-delta[data-trend="down"] { color: #ffb4a8; }
.ac-glass[data-tone="light"] .ac-stat-delta[data-trend="up"], .ac-stat[data-surface="plain"] .ac-stat-delta[data-trend="up"] { color: var(--bz-success-ink, #1d6b48); }
.ac-glass[data-tone="light"] .ac-stat-delta[data-trend="down"], .ac-stat[data-surface="plain"] .ac-stat-delta[data-trend="down"] { color: var(--bz-danger-ink, #8f2a3e); }
/* Light page (cockpit "Heute"): a solid card, the figure carries the status tone. */
.ac-stat[data-surface="plain"] { background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r5, 14px); box-shadow: var(--ac-elev-1); color: var(--bz-text, #1b1e27); }
.ac-stat[data-surface="plain"] .ac-stat-label, .ac-stat[data-surface="plain"] .ac-stat-delta { color: var(--bz-muted, #6e7480); }
.ac-stat[data-surface="plain"][data-status="ok"] { --ac-stat-ink: var(--bz-success-ink, #1d6b48); }
.ac-stat[data-surface="plain"][data-status="warn"] { --ac-stat-ink: var(--bz-warn-ink, #7a5208); }
.ac-stat[data-surface="plain"][data-status="danger"] { --ac-stat-ink: var(--bz-danger-ink, #8f2a3e); }
.ac-stat[data-surface="plain"][data-status="info"] { --ac-stat-ink: var(--bz-info-ink, #3a5068); }
.ac-stat[data-surface="plain"]:not([data-status="neutral"]) .ac-stat-value { color: var(--ac-stat-ink); }
.ac-stat[data-surface="plain"]:not([data-status="neutral"]) { box-shadow: var(--ac-elev-1), inset 3px 0 0 var(--ac-stat-ink); }

/* Floating segment over a map, beside the map tools. */
.ac-seg-floating { border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); box-shadow: var(--ac-elev-2); border-radius: 999px; }
.ac-seg-floating .ac-seg-option { border-radius: 999px; }
/* On the stage (globe, hero, graph tools): segmented as glass like the stage's chips and buttons – white options, the
   chosen one in the accent (COCKPIT / Florian 07.10.: „Globus | Zusammenhänge“ stood light among the glass buttons). */
.ac-surface-stage .ac-seg { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-surface-stage .ac-seg-option { color: rgba(255, 255, 255, .82); }
.ac-surface-stage .ac-seg-option[aria-checked="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 72%, #000); color: #fff; box-shadow: none; }
@media (hover: hover) { .ac-surface-stage .ac-seg-option[aria-checked="false"]:hover { background: rgba(255, 255, 255, .1); color: #fff; } }

/* Keyboard list for canvas-only things (map pins): hidden until it holds the focus. */
.ac-keyboard-list:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ac-keyboard-list:focus-within { position: absolute; z-index: 20; top: 8px; left: 8px; max-height: 60%; overflow: auto; padding: 6px; border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); box-shadow: var(--ac-elev-3); }
.ac-keyboard-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Translucent materials for bars and sheets (with a solid fallback). */
.ac-material { background: var(--bz-card, #fff); }
@supports (backdrop-filter: blur(1px)) { .ac-material { background: color-mix(in srgb, var(--bz-card, #fff) 78%, transparent); backdrop-filter: blur(20px) saturate(1.6); } }

/* Morphing (morph() / View Transitions): one timing for every surface, scaled by the catalogue's --bz-motion-scale. */
::view-transition-group(*) { animation-duration: calc(280ms * var(--bz-motion-scale, 1)); animation-timing-function: var(--bz-spring, cubic-bezier(.2, .9, .3, 1)); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(180ms * var(--bz-motion-scale, 1)); }

/* ---- Text size: follows the OS / browser text size ---------------------------------------------------------------
   All sizes are rem/em, heights are minimums: a larger system text size (Android, the browser's text size, zoom)
   grows every control. iOS Safari passes Dynamic Type to a page only through `font: -apple-system-body` on the root –
   opt in with <html class="ac-os-text">. An in-app setting ("Textgröße") uses setTextScale(). */
@supports (font: -apple-system-body) { html.ac-os-text { font: -apple-system-body; } }
html.ac-os-text .ac { font-family: var(--ac-font); }
@media (prefers-contrast: more) { .ac { --bz-hair: rgba(25, 28, 40, .35); --bz-hair2: rgba(25, 28, 40, .55); --bz-muted: #4a4f59; } }

/* Everything still with prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  .ac *, .ac *::before, .ac *::after { animation: none !important; transition: none !important; }
  .ac .ac-btn:active, .ac .ac-chip:active, .ac .ac-btn:hover { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .ac-callout { animation: none; }
}

/* cardMenu: one discreet ⋯ in the card's corner (KONZEPT-DATENHERKUNFT-KARTEN §2a). No surface, no shadow, takes no
   room; on desktop it appears while the card is hovered or has focus, on touch it stays, muted, with a 44 px target. */
/* The card is the menu's frame (low specificity: a host's own position, e.g. absolute in a grid, wins). */
:where(.ac-has-card-menu) { position: relative; }
/* The wrapper itself takes no pointer (COCKPIT 05.10.: it covered a strip of chart tiles); only the ⋯ and its menu do. */
.ac-card-menu { position: absolute; top: 4px; right: 4px; z-index: 2; width: auto; height: auto; pointer-events: none; }
.ac-card-menu > .ac-btn, .ac-card-menu > .ac-menu { pointer-events: auto; }
.ac-card-menu > .ac-btn { position: relative; min-width: 24px; min-height: 24px; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--bz-muted, #6e7480); }
.ac-card-menu > .ac-btn svg { width: 18px; height: 18px; }
/* The 44 px target only where fingers tap: on desktop it would swallow the card's own hover (charts). */
@media (hover: none) { .ac-card-menu > .ac-btn::after { content: ""; position: absolute; inset: -10px; } }
@media (hover: hover) {
  .ac-has-card-menu > .ac-card-menu { opacity: 0; transition: opacity .15s ease; }
  .ac-has-card-menu:hover > .ac-card-menu, .ac-has-card-menu:focus-within > .ac-card-menu, .ac-card-menu:has([aria-expanded="true"]) { opacity: 1; }
  .ac-card-menu > .ac-btn:hover { color: var(--bz-text, #1b1e27); }
}
.ac-card-menu > .ac-btn:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
.ac-has-card-menu[data-moving="true"] { outline: 2px dashed var(--bz-accent, #49aecb); outline-offset: 3px; cursor: grab; }
@media (prefers-reduced-motion: reduce) { .ac-has-card-menu > .ac-card-menu { transition: none; } }

/* provenanceDiagram (KONZEPT-DATENHERKUNFT-KARTEN §4): top to bottom, colours only --bz-*; sources, steps and the result
   differ by shape (radius, outline) and their kind line. */
.ac-prov { margin: 0; display: grid; gap: 10px; }
/* At its drawn size (1 unit = 1 px), never scaled up to the container: type stays at the UI's size; narrower containers shrink it. */
.ac-prov-svg { max-width: 100%; height: auto; display: block; margin-inline: auto; }
.ac-prov-box { fill: var(--bz-card, #fff); stroke: var(--bz-hair, rgba(25, 28, 40, .09)); stroke-width: 1.5; }
.ac-prov-node.is-source .ac-prov-box { stroke: var(--bz-accent, #49aecb); }
.ac-prov-node.is-result .ac-prov-box { stroke: var(--bz-text, #1b1e27); stroke-width: 2; }
.ac-prov-node.is-step .ac-prov-box { stroke-dasharray: 4 3; stroke: var(--bz-muted, #6e7480); }
.ac-prov-kind { font-size: .75rem; fill: var(--bz-muted, #6e7480); letter-spacing: .02em; }
.ac-prov-label { font-size: .8125rem; font-weight: 600; fill: var(--bz-text, #1b1e27); }
.ac-prov-edge { fill: none; stroke: var(--bz-muted, #6e7480); stroke-width: 1.4; }
.ac-prov-tip { fill: var(--bz-muted, #6e7480); }
.ac-prov-edge-label { font-size: .75rem; fill: var(--bz-muted, #6e7480); }
.ac-prov-node[role="button"] { cursor: pointer; }
.ac-prov-node[role="button"]:focus-visible { outline: none; }
.ac-prov-node[role="button"]:focus-visible .ac-prov-box { stroke: var(--bz-accent, #49aecb); stroke-width: 3; }
.ac-prov-foot { font-size: .75rem; color: var(--bz-muted, #6e7480); }
.ac-prov-list { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: .8125rem; color: var(--bz-text, #1b1e27); }
.ac-prov-list small { color: var(--bz-muted, #6e7480); font-size: .75rem; }
/* The card turning to its back (showProvenance); a crossfade with reduced motion. */
.ac-card-flipping { animation: ac-card-flip .28s ease-in forwards; transform-origin: center; }
.ac-card-fading { animation: ac-card-fade .16s ease-in forwards; }
@keyframes ac-card-flip { from { transform: perspective(900px) rotateY(0); } to { transform: perspective(900px) rotateY(90deg); opacity: .4; } }
@keyframes ac-card-fade { from { opacity: 1; } to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .ac-card-flipping { animation: ac-card-fade .16s ease-in forwards; } }

/* panelHost (KONZEPT-PANELS): one flexible panel – side on desktop, bottom sheet on the phone; sizes animate, never jump. */
.ac-panel-host { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.ac-panel { position: absolute; display: grid; grid-template-rows: auto 1fr; pointer-events: auto; overflow: hidden; background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-2); transition: background-color .26s ease, color .26s ease; }
.ac-panel[data-layout="side"] { top: 0; bottom: 0; border-left: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); padding-left: 14px; }
.ac-panel[data-layout="sheet"] { left: 0; right: 0; border-radius: 18px 18px 0 0; padding-top: 14px; padding-bottom: env(safe-area-inset-bottom, 0px); }
.ac-panel[data-motion="on"][data-layout="side"] { transition: width .28s cubic-bezier(.2, .8, .2, 1), right .28s cubic-bezier(.2, .8, .2, 1), background-color .26s ease, color .26s ease; }
.ac-panel[data-motion="on"][data-layout="sheet"] { transition: height .28s cubic-bezier(.2, .8, .2, 1), background-color .26s ease, color .26s ease; }
.ac-panel[data-dragging="true"] { transition: none; user-select: none; }
/* Overlay: over the page (which stays), above split panels, a deeper shadow instead of a seam. */
.ac-panel[data-mode="overlay"][data-layout="side"] { z-index: 3; border-left-color: transparent; box-shadow: -18px 0 48px -12px rgba(15, 22, 30, .28), -2px 0 8px rgba(15, 22, 30, .08); }
.ac-panel[data-mode="overlay"][data-layout="side"][data-side="left"] { box-shadow: 18px 0 48px -12px rgba(15, 22, 30, .28), 2px 0 8px rgba(15, 22, 30, .08); }
/* Dark surface: the stage tokens inside, so every control and --bz-* below follows (assistant, simple forms). */
.ac-panel[data-surface="dark"] { --bz-card: rgba(255, 255, 255, .06); --bz-text: #f4f6f5; --bz-muted: rgba(244, 246, 245, .68); --bz-hair: rgba(255, 255, 255, .12); --bz-hair2: rgba(255, 255, 255, .2); background: var(--bz-stage, #0d1714); color: #f4f6f5; }
/* Light surface: the paper tokens again – a light panel inside a dark shell must not inherit the stage tokens. */
.ac-panel[data-surface="light"] { --bz-card: #ffffff; --bz-text: #1b1e27; --bz-muted: #6e7480; --bz-hair: rgba(25, 28, 40, .09); --bz-hair2: rgba(25, 28, 40, .16); color: var(--bz-text); }
.ac-panel-grip { position: absolute; z-index: 2; display: grid; place-items: center; cursor: ew-resize; touch-action: none; }
.ac-panel[data-layout="side"] .ac-panel-grip { left: 0; top: 0; bottom: 0; width: 14px; }
.ac-panel[data-layout="sheet"] .ac-panel-grip { left: 0; right: 0; top: 0; height: 18px; cursor: ns-resize; }
.ac-panel-grip::before { content: ""; border-radius: 999px; background: var(--bz-hair2, rgba(25, 28, 40, .16)); }
.ac-panel[data-layout="side"] .ac-panel-grip::before { width: 4px; height: 40px; }
.ac-panel[data-layout="sheet"] .ac-panel-grip::before { width: 40px; height: 4px; }
.ac-panel-grip:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: -2px; }
.ac-panel-head { display: flex; align-items: center; gap: 4px; min-height: 3rem; padding: 6px 8px 6px 4px; border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-panel-title { flex: 1; min-width: 0; margin: 0; font-size: 1rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-panel-body { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.ac-panel-content { padding: 14px 16px 20px; }
.ac-panel[data-size="edge"] .ac-panel-head, .ac-panel[data-size="edge"] .ac-panel-body { visibility: hidden; }
.ac-panel-frame-wrap { position: relative; display: grid; grid-template-rows: 1fr auto; height: 100%; min-height: 60vh; }
.ac-panel-frame { width: 100%; height: 100%; min-height: 60vh; border: 0; background: var(--bz-card, #fff); }
.ac-panel-frame-wrap.is-loading { background: linear-gradient(90deg, var(--bz-hair, rgba(25, 28, 40, .09)), transparent, var(--bz-hair, rgba(25, 28, 40, .09))); }
.ac-panel-newtab { justify-self: end; padding: 8px 4px; font-size: .8125rem; color: var(--bz-accent, #49aecb); }
.ac-panel-blocked { color: var(--bz-muted, #6e7480); font-size: .875rem; }
@media (hover: hover) { .ac-panel-grip:hover::before { background: var(--bz-accent, #49aecb); } }
@media (prefers-reduced-motion: reduce) { .ac-panel, .ac-panel[data-motion="on"][data-layout="side"], .ac-panel[data-motion="on"][data-layout="sheet"] { transition: none; } }
.ac-panel[data-layout="side"][data-side="left"] { border-left: 0; border-right: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); padding-left: 0; padding-right: 14px; }
.ac-panel[data-layout="side"][data-side="left"] .ac-panel-grip { left: auto; right: 0; }
.ac-panel[data-side="left"] .ac-panel-head { padding-left: 16px; }
.ac-panel[data-motion="on"][data-layout="side"][data-side="left"] { transition: width .28s cubic-bezier(.2, .8, .2, 1), left .28s cubic-bezier(.2, .8, .2, 1), background-color .26s ease, color .26s ease; }

/* The search field's clear ✕ on every platform: in the field's own ink (light and dark), not the browser's blue. Drawn with
   two gradients (no image URL: the stylesheet loads nothing, CSP). */
:where(.ac) input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; flex: none; width: .875rem; height: .875rem; margin: 0 2px 0 8px; cursor: pointer; opacity: .55;
  background: linear-gradient(45deg, transparent calc(50% - 1.2px), currentColor calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)), linear-gradient(-45deg, transparent calc(50% - 1.2px), currentColor calc(50% - 1.2px) calc(50% + 1.2px), transparent calc(50% + 1.2px)); }
@media (hover: hover) { :where(.ac) input[type="search"]::-webkit-search-cancel-button:hover { opacity: .9; } }

/* appShell: one frame for trips/crews/maps/backoffice – header (title, search + assistant pair, extras, account), rail or
   drawer navigation, panels on the right, tile grid, a stage slot behind (globe) and a dark or light surface. */
.ac-shell { position: relative; display: grid; grid-template-rows: auto auto 1fr; min-height: 100vh; background: var(--bz-bg, #f4f3ee); color: var(--bz-text, #1b1e27); }
.ac-shell[data-surface="dark"] { --bz-card: rgba(255, 255, 255, .06); --bz-text: #f4f6f5; --bz-muted: rgba(244, 246, 245, .68); --bz-hair: rgba(255, 255, 255, .12); --bz-hair2: rgba(255, 255, 255, .2); background: var(--bz-stage, #0d1714); color: #f4f6f5; }
/* A light island inside the dark shell or panel (.ac-surface-paper or [data-surface="light"]: the document editor's page, a
   white card) takes the light tokens back – its controls read dark on white again (AUFTRAG-EDITOR 07.10.: white on white). */
:is(.ac-shell, .ac-panel)[data-surface="dark"] :is(.ac-surface-paper, [data-surface="light"]) { --bz-card: #fff; --bz-text: #1b1e27; --bz-muted: #6e7480; --bz-hair: rgba(25, 28, 40, .09); --bz-hair2: rgba(25, 28, 40, .16); color: var(--bz-text, #1b1e27); }
.ac-shell-stage { position: absolute; inset: 0; z-index: 0; }
.ac-shell-head, .ac-shell-notice, .ac-shell-body { position: relative; z-index: 1; }
.ac-shell-head { grid-row: 1; } .ac-shell-notice { grid-row: 2; } .ac-shell-body { grid-row: 3; }
.ac-shell-notice { padding: 6px 16px; font-size: .8125rem; color: var(--bz-muted, #6e7480); border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-shell-notice[hidden] { display: none; }
/* The stage full screen (globe "Vollbild"): over header and navigation until setStageFull(false). */
.ac-shell[data-stage-full="true"] .ac-shell-stage { position: fixed; z-index: 20; }
.ac-shell-skip { position: absolute; left: 8px; top: -40px; z-index: 30; padding: 6px 10px; border-radius: 8px; background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); }
.ac-shell-skip:focus { top: 8px; }
.ac-shell-head { display: flex; align-items: center; gap: 10px; min-height: 3.5rem; padding: 8px 16px; }
.ac-shell-burger { display: none; }
.ac-shell-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-shell-title-mark { display: none; flex: none; }
.ac-shell-title[data-compact] > :not(.ac-shell-title-mark) { display: none; }
.ac-shell-title[data-compact="mark"] > .ac-shell-title-mark { display: inline-flex; align-items: center; }
.ac-shell-center { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; max-width: 40rem; margin-inline: auto; }
.ac-shell-search { flex: 1; min-width: 0; }
.ac-shell-search .ac-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ac-shell-search-reveal { display: none; }
.ac-shell[data-surface="dark"] .ac-shell-search .ac-input { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(16px) saturate(1.6); -webkit-backdrop-filter: blur(16px) saturate(1.6); }
.ac-shell-extras { display: flex; align-items: center; gap: 4px; }
.ac-shell-extras > [data-ac-overflow="true"] { display: none; } /* in the "⋯" instead (shell.ts fitExtras) */
.ac-shell-more[hidden] { display: none; }
.ac-shell-body { display: grid; grid-template-columns: auto 1fr; min-height: 0; }
.ac-shell-nav { display: flex; flex-direction: column; justify-content: space-between; width: 13.5rem; padding: 8px; transition: width .24s cubic-bezier(.2, .8, .2, 1); overflow: hidden; }
.ac-shell-nav[data-collapsed="true"] { width: 4rem; }
.ac-shell-nav[data-collapsed="true"] .ac-label, .ac-shell-nav[data-collapsed="true"] .ac-shell-navbadge { display: none; }
.ac-shell-navhead { margin: 14px 12px 4px; font-size: .75rem; font-weight: 600; letter-spacing: .02em; color: var(--bz-muted, #6e7480); }
.ac-shell-navlist > .ac-shell-navhead:first-child { margin-top: 4px; }
.ac-shell-navslot { min-width: 0; }
.ac-shell-nav[data-collapsed="true"] .ac-shell-navhead, .ac-shell-nav[data-collapsed="true"] .ac-shell-navslot { display: none; }
.ac-shell-navlist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ac-shell-navitem { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 2.75rem; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; font-size: .875rem; font-weight: 600; text-align: left; cursor: pointer; }
.ac-shell-navitem .ac-icon { width: 1.15em; height: 1.15em; flex: none; }
.ac-shell-navitem .ac-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-shell-navitem[aria-current="page"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-shell[data-surface="dark"] .ac-shell-navitem[aria-current="page"] { color: #fff; background: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, transparent); }
@media (hover: hover) { .ac-shell-navitem:hover:not([aria-current="page"]) { background: color-mix(in srgb, currentColor 7%, transparent); } }
.ac-shell-navbadge { min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--bz-accent, #49aecb); color: #fff; font-size: .75rem; text-align: center; }
.ac-shell-collapse { align-self: flex-start; }
.ac-shell-main { min-width: 0; overflow: auto; padding: 16px; padding-right: calc(16px + var(--ac-panel-inset, 0px)); padding-left: calc(16px + var(--ac-panel-inset-left, 0px)); padding-bottom: calc(16px + var(--ac-panel-inset-bottom, 0px)); transition: padding .28s cubic-bezier(.2, .8, .2, 1); }
.ac-shell-main:focus { outline: none; }
/* scroll: "window" – the page scrolls (scroll memory, sticky content); header and navigation stay in place. */
.ac-shell[data-scroll="window"] .ac-shell-main { overflow: visible; }
.ac-shell[data-scroll="window"] .ac-shell-head { position: sticky; top: 0; z-index: 5; background: inherit; }
.ac-shell[data-scroll="window"] .ac-shell-nav { position: sticky; top: 3.5rem; align-self: start; max-height: calc(100vh - 3.5rem); overflow: auto; }
.ac-shell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); grid-auto-flow: row dense; gap: 12px; align-items: start; }
.ac-shell-tile[data-tall="true"] { grid-row: span 2; align-self: stretch; min-height: 17rem; }
.ac-shell-tile[hidden] { display: none; }
.ac-shell-tile { position: relative; padding: 14px 16px; border-radius: 14px; background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.ac-shell[data-surface="dark"] .ac-shell-tile { background: color-mix(in srgb, var(--bz-stage, #0d1714) 62%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.ac-shell-tile[data-size="l"], .ac-shell-tile[data-size="w"] { grid-column: span 2; }
.ac-shell-tile[data-size="s"] .ac-shell-tile-title { font-size: .875rem; }
.ac-shell-tile-title { margin: 0 28px 8px 0; font-size: 1rem; }
@media (max-width: 960px) {
  .ac-shell-nav { display: none; }
  /* Without the rail the main area takes the whole width (else it falls into the auto column, min-content wide). */
  .ac-shell-body { grid-template-columns: minmax(0, 1fr); }
  .ac-shell-burger { display: inline-flex; }
  .ac-shell-tile[data-size="l"], .ac-shell-tile[data-size="w"] { grid-column: auto; }
}
@media (max-width: 760px) {
  /* The shell's one column is the window: as an implicit auto track it took the head's content width (COCKPIT R669 W97,
     413 px at 375 px) and everything below was cut on the right. */
  .ac-shell { grid-template-columns: minmax(0, 1fr); }
  .ac-shell-title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ac-shell-head { gap: 4px; padding: 6px 8px; }
  .ac-shell-assistant .ac-label, .ac-shell-account .ac-label { display: none; }
  .ac-shell-search { display: none; }
  .ac-shell-search-reveal { display: inline-flex; }
  .ac-shell[data-search-open="true"] .ac-shell-search { display: block; }
  .ac-shell[data-search-open="true"] .ac-shell-search-reveal, .ac-shell[data-search-open="true"] .ac-shell-title { display: none; }
  /* The pair search + assistant never shrinks below its content (TESTING R671: with no room it spilled left over the
     logo); the title gives way instead and turns compact (mark or nothing, see shell.ts fitTitle). */
  .ac-shell-center { justify-content: flex-end; flex: 0 0 auto; min-width: max-content; }
  .ac-shell-title { flex: 1 1 0; }
}
/* Phones and touch: the head's controls are 44 px targets as they stand (TESTING R673 W107: burger 22×34, search
   34×34, input 34×28 – a halo alone does not count where the head is the thumb's first stop). */
@media (max-width: 760px), (pointer: coarse) {
  /* .ac-shell first: stronger than the size rules (.ac-btn[data-size="compact"], [data-collapse="phone"]) – a compact
     button in the head is still a thumb target (COCKPIT omnibar „Eingabe“ 34×28). */
  .ac-shell .ac-shell-head :is(button, input, select) { min-height: 44px; }
  .ac-shell .ac-shell-head button { min-width: 44px; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ac-shell-nav, .ac-shell-main { transition: none; } }

/* Picker (pickerDialog – block picker and "Darstellung ändern", Florian 05.10.): search, categories, list with
   "Empfohlen" on top, preview with settings; narrow screens without preview. */
.ac-pick-dialog { width: min(57.5rem, 94vw); max-width: none; }
.ac-pick { display: grid; gap: 12px; }
.ac-pick-cats .ac-chips { flex-wrap: wrap; }
.ac-pick-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; min-height: min(56vh, 28.75rem); }
.ac-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: min(56vh, 28.75rem); overflow: auto; overscroll-behavior: contain; padding: 2px; }
.ac-pick-head { margin: 10px 8px 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bz-muted, #6e7480); }
.ac-pick-head:first-child { margin-top: 2px; }
.ac-pick-reason { text-transform: none; letter-spacing: 0; font-weight: 600; }
.ac-pick-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ac-pick-item[aria-selected="true"] { background: var(--bz-sub, #f6f5f1); box-shadow: inset 0 0 0 1px var(--bz-hair2, rgba(25, 28, 40, .16)); }
.ac-pick-item[aria-disabled="true"] { opacity: .55; cursor: default; }
.ac-pick-icon { display: inline-grid; place-items: center; flex: 0 0 2.125rem; height: 2.125rem; border-radius: 9px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); background: var(--bz-card, #fff); }
.ac-pick-icon .ac-icon { width: 1.125rem; height: 1.125rem; }
.ac-pick-text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.ac-pick-text strong { font-size: .9375rem; }
.ac-pick-text span { font-size: .8125rem; color: var(--bz-muted, #6e7480); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-pick-badge { flex: none; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-pick-preview { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--bz-sub, #f6f5f1); min-width: 0; }
.ac-pick-preview > .ac-btn { align-self: flex-start; }
.ac-pick-prevhead { display: flex; align-items: center; gap: 10px; font-size: .9375rem; }
.ac-pick-detail { margin: 0; font-size: .8125rem; color: var(--bz-muted, #6e7480); }
.ac-pick-card { padding: 14px 16px; border-radius: 12px; background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); pointer-events: none; overflow: hidden; max-height: 16.25rem; }
.ac-pick-card svg { display: block; width: 100%; height: auto; }
.ac-pick-settings { display: grid; gap: 8px; }
.ac-pick-keys { margin: 0; font-size: .75rem; color: var(--bz-muted, #6e7480); }
.ac-pick-keys kbd { font: inherit; font-weight: 600; padding: 1px 6px; margin-right: 2px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: 6px; background: var(--bz-card, #fff); }
@media (max-width: 680px) { .ac-pick-keys, .ac-pick-preview { display: none; } .ac-pick-cols { grid-template-columns: minmax(0, 1fr); } }

/* inlineEdit: a title edited where it stands – a quiet field look while editing, the shared focus ring. */
.ac-inline-edit { border-radius: 4px; }
@media (hover: hover) { .ac-inline-edit:not([data-editing]):hover { background: color-mix(in srgb, var(--bz-accent, #49aecb) 8%, transparent); cursor: text; } }
.ac-inline-edit[data-editing] { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; background: var(--bz-card, #fff); cursor: text; white-space: pre-wrap; }

/* inboxList (Florian 05.10.): severity as a slim bar, unread as a dot, one visible action, the rest on hover / ⋯ / swipe. */
.ac-inbox { display: grid; gap: 16px; container-type: inline-size; }
.ac-inbox-group { display: grid; gap: 6px; }
.ac-inbox-head { display: flex; align-items: center; gap: 6px; }
.ac-inbox-head .ac-btn, .ac-inbox-head .ac-btn .ac-label { white-space: nowrap; }
.ac-inbox-label { flex: 1; margin: 0; font-size: .8125rem; font-weight: 700; color: var(--bz-muted, #6e7480); display: flex; align-items: center; gap: 8px; }
.ac-inbox-count { min-width: 1.4rem; padding: 0 6px; border-radius: 999px; font-size: .75rem; text-align: center; background: color-mix(in srgb, var(--bz-text, #1b1e27) 8%, transparent); color: var(--bz-text, #1b1e27); }
.ac-inbox-group[data-severity="high"] .ac-inbox-count { background: color-mix(in srgb, var(--bz-danger, #c0405a) 16%, transparent); color: var(--bz-danger-ink, #8f2a3e); }
.ac-inbox-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ac-inbox-item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; border-radius: 12px; background: var(--bz-card, #fff); border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); touch-action: pan-y; transition: transform 180ms var(--bz-spring, cubic-bezier(.2, .9, .3, 1)), background-color 160ms; }
.ac-inbox-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bz-muted, #6e7480); opacity: .4; }
.ac-inbox-item[data-severity="high"]::before { background: var(--bz-danger, #c0405a); opacity: 1; }
.ac-inbox-item[data-severity="medium"]::before { background: var(--bz-warn, #c68a12); opacity: 1; }
.ac-inbox-item:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
.ac-inbox-icon { display: inline-grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 10px; background: var(--bz-sub, #f6f5f1); color: var(--bz-muted, #6e7480); }
.ac-inbox-item[data-severity="high"] .ac-inbox-icon { color: var(--bz-danger-ink, #8f2a3e); background: color-mix(in srgb, var(--bz-danger, #c0405a) 12%, transparent); }
.ac-inbox-item[data-severity="medium"] .ac-inbox-icon { color: var(--bz-warn-ink, #7a5208); background: color-mix(in srgb, var(--bz-warn, #c68a12) 14%, transparent); }
.ac-inbox-body { display: grid; gap: 3px; min-width: 0; }
.ac-inbox-title { all: unset; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--bz-muted, #6e7480); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-inbox-item[data-unread="true"] .ac-inbox-title { font-weight: 700; color: var(--bz-text, #1b1e27); }
.ac-inbox-item[data-unread="true"] .ac-inbox-title::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-left: 8px; border-radius: 50%; background: var(--bz-accent, #49aecb); vertical-align: middle; }
.ac-inbox-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: .8125rem; color: var(--bz-muted, #6e7480); min-width: 0; }
.ac-inbox-sender { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 3px; border-radius: 999px; background: var(--bz-sub, #f6f5f1); font-size: .75rem; font-weight: 600; color: var(--bz-text, #1b1e27); }
.ac-inbox-sender .ac-icon { width: 1.25rem; height: 1.25rem; padding: 3px; border-radius: 50%; background: var(--bz-card, #fff); }
.ac-inbox-sender[data-kind="agent"] .ac-icon { color: var(--bz-accent-ai, #6f5ce8); }
.ac-inbox-sender .ac-avatar { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
.ac-inbox-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
.ac-inbox-actions { display: flex; align-items: center; gap: 2px; }
.ac-inbox-actions > .ac-icon-btn, .ac-inbox-actions > .ac-menu-wrap { opacity: .55; transition: opacity 140ms; }
@media (hover: hover) { .ac-inbox-item:hover .ac-inbox-actions > *, .ac-inbox-item:focus-within .ac-inbox-actions > * { opacity: 1; } .ac-inbox-item:hover { background: color-mix(in srgb, var(--bz-accent, #49aecb) 4%, var(--bz-card, #fff)); } }
.ac-inbox-item[data-swipe="done"] { background: color-mix(in srgb, var(--bz-success, #2e9e6b) 12%, var(--bz-card, #fff)); }
.ac-inbox-item[data-swipe="later"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, var(--bz-card, #fff)); }
/* Narrow list (panel, phone, side column): actions under the text, always visible. */
@container (max-width: 30rem) { .ac-inbox-item { grid-template-columns: auto minmax(0, 1fr); } .ac-inbox-actions { grid-column: 2; justify-content: flex-start; margin-left: -6px; } .ac-inbox-actions > .ac-icon-btn, .ac-inbox-actions > .ac-menu-wrap { opacity: 1; } .ac-inbox-label { font-size: .75rem; } }
@media (prefers-reduced-motion: reduce) { .ac-inbox-item { transition: none; } }

/* Styleable select (appearance: base-select – Chromium 135+): our own picker, options with icon and detail, checkmark
   and arrow drawn with borders (no image references), a soft open/close. Elsewhere the native select stays as it was. */
.ac-select-button { display: none; }
@supports (appearance: base-select) {
  .ac-select, .ac-select::picker(select) { appearance: base-select; }
  .ac-select { display: flex; align-items: center; gap: 8px; padding-right: 10px; cursor: pointer; }
  .ac-select-button { all: unset; display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; }
  .ac-select-button selectedcontent { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-select-button selectedcontent .ac-select-detail { display: none; }
  .ac-select::picker-icon { content: ""; width: .45rem; height: .45rem; margin: 0 2px -2px auto; border: solid var(--bz-muted, #6e7480); border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform var(--ac-press) var(--ac-ease); }
  .ac-select:open::picker-icon { transform: translateY(1px) rotate(-135deg); }
  .ac-select::picker(select) { margin-top: 6px; padding: 6px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); max-height: min(22rem, 60vh); overflow: auto;
    opacity: 1; translate: 0 0; transition: opacity 160ms ease, translate 180ms var(--ac-ease), display 180ms allow-discrete, overlay 180ms allow-discrete; }
  .ac-select:not(:open)::picker(select) { opacity: 0; translate: 0 -4px; }
  @starting-style { .ac-select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  .ac-select-option { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 10px; align-items: center; min-height: 2.25rem; padding: 6px 10px; border-radius: var(--bz-r3, 10px); font-size: .9375rem; cursor: pointer; }
  .ac-select-option > .ac-icon { width: 1.1rem; height: 1.1rem; color: var(--bz-muted, #6e7480); }
  .ac-select-option:not(:has(> .ac-icon)) { grid-template-columns: minmax(0, 1fr) auto; }
  .ac-select-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ac-select-detail { grid-column: -2 / -3; grid-row: 2; font-size: .8125rem; color: var(--bz-muted, #6e7480); }
  .ac-select-option:focus-visible { outline: none; background: color-mix(in srgb, var(--bz-accent, #49aecb) 10%, transparent); }
  .ac-select-option:checked { font-weight: 600; color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
  .ac-select-option:checked > .ac-icon { color: inherit; }
  .ac-select-option::checkmark { content: ""; grid-column: -1; grid-row: 1; width: .35rem; height: .7rem; margin: 0 4px 3px 6px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
  .ac-select optgroup { font-weight: 400; }
  .ac-select optgroup legend, .ac-select-group { padding: 8px 10px 4px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bz-muted, #6e7480); }
  @media (hover: hover) { .ac-select-option:hover { background: color-mix(in srgb, var(--bz-accent, #49aecb) 8%, transparent); } }
  @media (prefers-reduced-motion: reduce) { .ac-select::picker(select), .ac-select::picker-icon { transition: none; } }
}

/* Notes (Florian 06.10.): a folded corner says "notes here" – quiet until hovered; inline as a small dot with the count. */
/* Folded corner: the button paints the cut-away corner in the ground colour (--ac-note-cut); ::before is the folded flap
   with a soft shadow that follows the triangle (drop-shadow, not a square box-shadow). Hosts on other grounds set --ac-note-cut. */
.ac-note-mark { --ac-note-cut: var(--bz-bg, #f4f3ee); --ac-note-flap: color-mix(in srgb, var(--bz-accent, #49aecb) 11%, var(--bz-card, #fff)); --ac-note-shadow: rgba(25, 28, 40, .2);
  position: absolute; top: 0; right: 0; z-index: 2; isolation: isolate; display: inline-flex; align-items: flex-end; justify-content: flex-start; gap: 1px; width: 2.125rem; height: 2.125rem; padding: 0 0 6px 7px; border: 0; border-radius: 0 var(--bz-r4, 13px) 0 6px; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 600; line-height: 1; color: color-mix(in srgb, var(--bz-accent-ink, var(--bz-accent, #49aecb)) 78%, transparent);
  /* Without corner-shape (Safari, Firefox): the cut is painted in the ground colour and a hairline along the fold stands in
     for the card's border (--ac-note-edge; hosts with another border colour set it). */
  --ac-note-edge: var(--bz-hair2, rgba(25, 28, 40, .16));
  background: linear-gradient(to bottom left, var(--ac-note-cut) 0 calc(50% - .5px), var(--ac-note-edge) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px));
  }
.ac-note-mark[data-placement="corner"]::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 0 0 0 6px; background: linear-gradient(to bottom left, transparent 0 50%, var(--ac-note-flap) 50%);
  filter: drop-shadow(-1px 1.5px 1.5px var(--ac-note-shadow)); transition: filter 180ms; } /* geometry never changes: the flap's edge stays on the cut */
/* Where the browser can bevel a corner, the card itself is cut along the fold – its border and shadow follow the diagonal –
   and the button no longer paints a cut-out (CSS corner-shape; elsewhere the painted cut above stays). */
@supports (corner-shape: bevel) {
  .ac-has-note.ac-has-note-corner { corner-top-right-shape: bevel; border-top-right-radius: 2.125rem; }
  .ac-note-mark[data-placement="corner"] { background: none; border-radius: 0 0 0 6px; }
}
/* The corner never stretches (Florian 06.10., cockpit „Abholzeiten“): host rules for their children – `.cx-cell > *
   { height: 100% }`, flex/grid stretch, insets – turned the flap into a wedge down the whole card over its buttons.
   .ac-has-note > … is stronger than one class plus a universal child rule; hosts move it with --ac-note-top/-right. */
.ac-has-note > .ac-note-mark[data-placement="corner"] { position: absolute; inset: var(--ac-note-top, 0) var(--ac-note-right, 0) auto auto; box-sizing: border-box; width: 2.125rem; height: 2.125rem; min-width: 0; min-height: 0; max-width: 2.125rem; max-height: 2.125rem; margin: 0; flex: none; align-self: start; justify-self: end; transform: none; }
.ac-note-mark[data-important="true"] { --ac-note-flap: color-mix(in srgb, var(--bz-warn, #c68a12) 13%, var(--bz-card, #fff)); color: color-mix(in srgb, var(--bz-warn-ink, #7a5208) 85%, transparent); }
.ac-note-mark .ac-icon { width: .625rem; height: .625rem; }
.ac-note-mark[data-placement="corner"] .ac-note-links { display: none; } /* the corner stays a number; links are in its name and the preview */
/* position: relative – its enlarged hit area (.ac-hit::after) must hang on the mark itself; static, it grew to the row
   around it and every click on a trip row opened its notes (Florian 07.10., live on #/reisen). */
.ac-note-mark[data-placement="inline"] { position: relative; width: auto; height: 1.25rem; padding: 0 7px 0 6px; align-items: center; gap: 4px; border-radius: 999px; vertical-align: middle; background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, transparent); }
.ac-note-mark[data-placement="inline"]::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; }
.ac-note-mark[data-placement="inline"][data-important="true"] { background: color-mix(in srgb, var(--bz-warn, #c68a12) 18%, transparent); }
.ac-note-mark[data-agent="true"] .ac-icon { width: .8125rem; height: .8125rem; color: var(--bz-accent-ai, #6f5ce8); }
.ac-note-mark[hidden] { display: none; }
.ac-note-mark:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
@media (hover: hover) { .ac-note-mark[data-placement="corner"]:hover::before { filter: drop-shadow(-2px 3px 4px var(--ac-note-shadow)) brightness(1.03); } .ac-note-mark[data-placement="inline"]:hover { background: color-mix(in srgb, var(--bz-accent, #49aecb) 20%, transparent); } }
.ac-surface-stage .ac-note-mark[data-placement="corner"], .ac-shell[data-surface="dark"] .ac-note-mark[data-placement="corner"] { --ac-note-cut: var(--bz-stage, #0d1714); --ac-note-edge: rgba(255, 255, 255, .14); --ac-note-flap: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, #e8eeec); --ac-note-shadow: rgba(0, 0, 0, .55); color: color-mix(in srgb, var(--bz-stage, #0d1714) 85%, transparent); }
.ac-surface-stage .ac-note-mark[data-placement="corner"][data-important="true"], .ac-shell[data-surface="dark"] .ac-note-mark[data-placement="corner"][data-important="true"] { --ac-note-flap: color-mix(in srgb, #f2c77a 55%, #e8eeec); }
.ac-surface-stage .ac-note-mark[data-placement="corner"][data-card="light"], .ac-shell[data-surface="dark"] .ac-note-mark[data-placement="corner"][data-card="light"] { --ac-note-flap: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, #ffffff); --ac-note-shadow: rgba(0, 0, 0, .3); color: color-mix(in srgb, var(--bz-accent-ink, var(--bz-accent, #49aecb)) 80%, transparent); }
.ac-surface-stage .ac-note-mark[data-placement="corner"][data-card="light"][data-important="true"], .ac-shell[data-surface="dark"] .ac-note-mark[data-placement="corner"][data-card="light"][data-important="true"] { --ac-note-flap: color-mix(in srgb, var(--bz-warn, #c68a12) 15%, #ffffff); color: color-mix(in srgb, var(--bz-warn-ink, #7a5208) 85%, transparent); }
/* The tile's ⋯ shares the corner: with a note it moves left beside the folded corner. */
.ac-has-note.ac-has-card-menu > .ac-card-menu { right: 2.25rem; }
.ac-note-preview { position: fixed; inset: auto; margin: 0; max-width: min(18rem, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r3, 10px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); font-size: .8125rem; line-height: 1.4; }
/* Anchor picking: every target dashed, the one under the pointer/keyboard lit; a bar names the mode. */
.ac-anchor-picking .ac-anchor-target { outline: 1px dashed color-mix(in srgb, var(--bz-accent, #49aecb) 70%, transparent); outline-offset: 2px; cursor: crosshair; }
.ac-anchor-picking .ac-anchor-target.ac-anchor-hot { outline: 2px solid var(--bz-accent, #49aecb); box-shadow: 0 0 0 5px color-mix(in srgb, var(--bz-accent, #49aecb) 18%, transparent); }
.ac-anchor-bar { position: fixed; inset: auto auto 16px 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; border: 0; border-radius: 999px; background: var(--bz-text, #1b1e27); color: #fff; font-size: .8125rem; font-weight: 600; box-shadow: var(--ac-elev-3); }
/* @-mentions: a list at the caret, grouped by kind; the chosen one becomes a chip. */
.ac-mention { position: fixed; inset: auto; margin: 0; min-width: 14rem; max-width: min(22rem, calc(100vw - 16px)); max-height: 18rem; overflow: auto; padding: 6px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: var(--ac-elev-3); }
.ac-mention-head { padding: 6px 8px 2px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--bz-muted, #6e7480); }
.ac-mention-item { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--bz-r3, 10px); cursor: pointer; font-size: .875rem; }
.ac-mention-item .ac-icon { width: 1rem; height: 1rem; color: var(--bz-muted, #6e7480); grid-row: span 2; }
.ac-mention-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-mention-detail { grid-column: 2; font-size: .75rem; color: var(--bz-muted, #6e7480); }
.ac-mention-item[aria-selected="true"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, transparent); }
.ac-mention-chip { display: inline-flex; align-items: center; gap: 3px; padding: 0 7px 0 5px; margin: 0 1px; border-radius: 999px; vertical-align: baseline; line-height: 1.5; user-select: all; cursor: default; background: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, transparent); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); font-weight: 600; white-space: nowrap; }
.ac-mention-chip .ac-icon { width: .75rem; height: .75rem; flex: none; }
.ac-mention-field { min-height: 4.5rem; max-height: 16rem; overflow-y: auto; padding: 9px 11px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r3, 10px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); font: inherit; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.ac-mention-field:focus-visible { border-color: var(--bz-accent, #49aecb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bz-accent, #49aecb) 18%, transparent); }
.ac-mention-field[data-empty="true"]::before { content: attr(data-placeholder); color: var(--bz-muted, #6e7480); pointer-events: none; }
.ac-notes-btn { position: relative; }
.ac-notes-btn[data-state="has"] { color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-notes-btn-count { position: absolute; top: 2px; right: 1px; min-width: 1rem; height: 1rem; padding: 0 3px; border-radius: 999px; background: var(--bz-accent, #49aecb); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1rem; text-align: center; box-shadow: 0 0 0 2px var(--bz-card, #fff); }
.ac-notes-btn[data-state="none"] .ac-notes-btn-count { display: none; }
.ac-notes-btn[data-important="true"] .ac-notes-btn-count { background: var(--bz-warn, #c68a12); }
.ac-surface-stage .ac-notes-btn-count, .ac-shell[data-surface="dark"] .ac-notes-btn-count { box-shadow: 0 0 0 2px var(--bz-stage, #0d1714); }
.ac-surface-stage .ac-notes-btn[data-state="has"], .ac-shell[data-surface="dark"] .ac-notes-btn[data-state="has"] { color: color-mix(in srgb, var(--bz-accent, #49aecb), #ffffff 40%); }
.ac-mention-chip[data-mention^="agent:"] { background: color-mix(in srgb, var(--bz-accent-ai, #6f5ce8) 14%, transparent); color: var(--bz-accent-ai, #6f5ce8); }
.ac-mention-item[data-kind="agent"] .ac-icon { color: var(--bz-accent-ai, #6f5ce8); }
@media (prefers-reduced-motion: reduce) { .ac-note-mark::before { transition: none; } }

/* ── toolbar (editor formatting bar): one tab stop, groups with hairline separators, overflow into "Mehr" ── */
.ac-toolbar { display: flex; align-items: center; gap: 2px; min-width: 0; width: fit-content; max-width: 100%; box-sizing: border-box; padding: 3px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r3, 10px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); overflow: hidden; }
.ac-toolbar[data-orientation="vertical"] { flex-direction: column; align-items: stretch; width: max-content; overflow: visible; }
.ac-toolbar-group { display: flex; align-items: center; gap: 2px; flex: none; }
.ac-toolbar[data-orientation="vertical"] .ac-toolbar-group { flex-direction: column; }
.ac-toolbar-group[hidden], .ac-toolbar-item[hidden], .ac-toolbar-sep[hidden] { display: none; }
.ac-toolbar-sep { flex: none; width: 1px; height: 1.25rem; margin: 0 3px; background: var(--bz-hair2, rgba(25, 28, 40, .16)); }
.ac-toolbar[data-orientation="vertical"] .ac-toolbar-sep { width: auto; height: 1px; margin: 3px 0; }
.ac-toolbar-more { margin-left: auto; }
.ac-toolbar .ac-btn.ac-btn[aria-pressed="true"]:not([data-variant="primary"]) { border-color: transparent; background: color-mix(in srgb, var(--bz-accent, #49aecb) 16%, var(--bz-card, #fff)); color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); }
.ac-toolbar .ac-btn[data-variant="quiet"]:not([aria-pressed="true"]) { color: var(--bz-text, #1b1e27); }
/* The dark toolbar only where it stands on the dark chrome: a light island inside the dark shell (.ac-surface-paper or
   [data-surface="light"], e.g. the document editor's page) keeps the light toolbar (AUFTRAG-EDITOR 07.10.: white on white). */
.ac-surface-stage .ac-toolbar .ac-btn[data-variant="quiet"]:not([aria-pressed="true"]), .ac-shell[data-surface="dark"] .ac-toolbar:not(:is(.ac-surface-paper, [data-surface="light"]) .ac-toolbar) .ac-btn[data-variant="quiet"]:not([aria-pressed="true"]) { color: #fff; }
.ac-surface-stage .ac-toolbar, .ac-shell[data-surface="dark"] .ac-toolbar:not(:is(.ac-surface-paper, [data-surface="light"]) .ac-toolbar) { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #fff; }
.ac-surface-stage .ac-toolbar-sep, .ac-shell[data-surface="dark"] .ac-toolbar:not(:is(.ac-surface-paper, [data-surface="light"]) .ac-toolbar) .ac-toolbar-sep { background: rgba(255, 255, 255, .2); }

/* ── Route estimate (KONZEPT-ROUTEN-SCHAETZUNG §4): badge, origin per stop, plan/simulation markers, customer hint ── */
.ac-route-est { display: inline-flex; align-items: center; gap: 5px; min-height: 1.375rem; padding: 0 8px 0 6px; border: 1px dashed color-mix(in srgb, var(--bz-muted, #6e7480) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--bz-card, #fff) 82%, transparent); color: var(--bz-muted, #6e7480); font: inherit; font-size: .75rem; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.ac-route-est .ac-icon { width: .8125rem; height: .8125rem; flex: none; }
button.ac-route-est { cursor: pointer; }
.ac-route-est[data-placement="inline"] { min-height: 1.25rem; padding: 0 4px; border-radius: 6px; }
.ac-route-est[data-status="reviewed"] { border-style: solid; color: var(--bz-success-ink, #1d6b48); border-color: color-mix(in srgb, var(--bz-success, #2e9e6b) 40%, transparent); }
.ac-route-est[data-status="corrected"] { border-style: solid; color: var(--bz-accent-ink, var(--bz-accent, #49aecb)); border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 40%, transparent); }
button.ac-route-est:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
@media (hover: hover) { button.ac-route-est:hover { color: var(--bz-text, #1b1e27); border-color: var(--bz-muted, #6e7480); } }
.ac-surface-stage .ac-route-est, .ac-shell[data-surface="dark"] .ac-route-est { background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .3); }
.ac-surface-stage .ac-route-est[data-status="reviewed"], .ac-shell[data-surface="dark"] .ac-route-est[data-status="reviewed"] { color: #7ee0a8; }

.ac-stop-origins { display: grid; gap: 6px; font-size: .875rem; color: var(--bz-text, #1b1e27); }
.ac-stop-origins-sum { margin: 0 0 4px; color: var(--bz-muted, #6e7480); font-size: .8125rem; }
.ac-stop-origin { border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r3, 10px); background: var(--bz-card, #fff); }
.ac-stop-origin-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.ac-stop-origin-head::-webkit-details-marker { display: none; }
.ac-stop-origin-head:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: -2px; border-radius: var(--bz-r3, 10px); }
.ac-stop-origin-n { display: inline-grid; place-items: center; width: 1.375rem; height: 1.375rem; flex: none; border: 1.5px dashed var(--bz-muted, #6e7480); border-radius: 50%; color: var(--bz-muted, #6e7480); font-size: .75rem; font-weight: 700; }
.ac-stop-origin[data-status="reviewed"] .ac-stop-origin-n, .ac-stop-origin[data-status="corrected"] .ac-stop-origin-n { border-style: solid; }
.ac-stop-origin-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-stop-origin-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; padding: 2px 12px 12px 40px; }
.ac-stop-origin-facts dt { color: var(--bz-muted, #6e7480); font-size: .8125rem; }
.ac-stop-origin-facts dd { margin: 0; overflow-wrap: anywhere; }
.ac-stop-origin-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .75rem; color: var(--bz-muted, #6e7480); }
.ac-stop-origin-raw { font-style: italic; }
.ac-stop-origin-score { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-size: .8125rem; font-weight: 600; }
.ac-stop-origin-score-bar { position: relative; width: 3rem; height: 5px; border-radius: 3px; background: var(--bz-hair, rgba(25, 28, 40, .09)); overflow: hidden; }
.ac-stop-origin-score-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--bz-muted, #6e7480); }
.ac-stop-origin-score-bar[data-step="0"]::before { width: 0%; } .ac-stop-origin-score-bar[data-step="1"]::before { width: 10%; } .ac-stop-origin-score-bar[data-step="2"]::before { width: 20%; } .ac-stop-origin-score-bar[data-step="3"]::before { width: 30%; } .ac-stop-origin-score-bar[data-step="4"]::before { width: 40%; } .ac-stop-origin-score-bar[data-step="5"]::before { width: 50%; } .ac-stop-origin-score-bar[data-step="6"]::before { width: 60%; } .ac-stop-origin-score-bar[data-step="7"]::before { width: 70%; } .ac-stop-origin-score-bar[data-step="8"]::before { width: 80%; } .ac-stop-origin-score-bar[data-step="9"]::before { width: 90%; } .ac-stop-origin-score-bar[data-step="10"]::before { width: 100%; }
.ac-stop-origin-score[data-level="high"] .ac-stop-origin-score-bar::before { background: var(--bz-success, #2e9e6b); }
.ac-stop-origin-score[data-level="low"] .ac-stop-origin-score-bar::before { background: var(--bz-warn, #c68a12); }
.ac-stop-origin-who { display: inline-flex; align-items: center; gap: 4px; }
.ac-stop-origin-who .ac-icon { width: .8125rem; height: .8125rem; }
.ac-stop-origin-who[data-kind="agent"] .ac-icon { color: var(--bz-accent-ai, #6f5ce8); }
@media (max-width: 480px) { .ac-stop-origin-facts { grid-template-columns: minmax(0, 1fr); padding-left: 12px; } .ac-stop-origin-facts dd { margin-bottom: 4px; } }

/* Positions: live = filled accent dot with halo; plan = hollow dashed ring; simulation = dotted ring, hatch and "S". */
.ac-pos-marker { position: relative; display: inline-grid; place-items: center; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; color: var(--bz-text, #1b1e27); }
.ac-pos-marker[data-kind="live"] { background: var(--bz-accent, #49aecb); border: 2px solid var(--bz-card, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--bz-accent, #49aecb) 28%, transparent), 0 1px 3px rgba(25, 28, 40, .35); }
.ac-pos-marker[data-kind="plan"] { border: 2px dashed currentColor; background: color-mix(in srgb, var(--bz-card, #fff) 75%, transparent); }
.ac-pos-marker[data-kind="simulation"] { width: 18px; height: 18px; border: 2px dotted currentColor; background: repeating-linear-gradient(45deg, color-mix(in srgb, currentColor 22%, transparent) 0 2px, color-mix(in srgb, var(--bz-card, #fff) 80%, transparent) 2px 5px); }
.ac-pos-marker-s { font-size: .75rem; font-weight: 800; line-height: 1; transform: scale(.75); }
.ac-surface-stage .ac-pos-marker, .ac-shell[data-surface="dark"] .ac-pos-marker { color: #fff; }
.ac-surface-stage .ac-pos-marker[data-kind="plan"], .ac-shell[data-surface="dark"] .ac-pos-marker[data-kind="plan"] { background: rgba(0, 0, 0, .35); }
.ac-surface-stage .ac-pos-marker[data-kind="simulation"], .ac-shell[data-surface="dark"] .ac-pos-marker[data-kind="simulation"] { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .3) 0 2px, rgba(0, 0, 0, .35) 2px 5px); }
.ac-pos-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: .8125rem; color: var(--bz-muted, #6e7480); }
.ac-pos-legend li { display: inline-flex; align-items: center; gap: 6px; }

.ac-approx-route { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; color: var(--bz-muted, #6e7480); font-size: .8125rem; }
.ac-approx-route-line { width: 1.5rem; flex: none; height: 0; border-top: 1.5px solid currentColor; border-radius: 1px; opacity: .55; } /* solid: dashed is the train in the map legend */

/* Settings and admin pages (settings.ts, Florian 06.10.): one frame for every Verwaltung page. The page declares its
   ground (data-surface) and with it the tokens below it – labels, hints, empty states and inputs read on either; the
   pages set no backgrounds or label colours of their own. Sections are cards with a fixed gap (never touching). */
.ac-settings { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 60rem; margin-inline: auto; padding: 4px 0 32px; box-sizing: border-box; color: var(--bz-text); }
.ac-settings[data-surface="light"] { --bz-card: #ffffff; --bz-text: #1b1e27; --bz-muted: #5b616c; --bz-faint: #8a909b; --bz-hair: rgba(25, 28, 40, .09); --bz-hair2: rgba(25, 28, 40, .18); --ac-input-bg: #ffffff; --bz-danger-ink: #8f2a3e; --bz-warn-ink: #7a5208; --ac-set-glass: none; }
.ac-settings[data-surface="dark"] { --bz-card: rgba(255, 255, 255, .06); --bz-text: #f4f6f5; --bz-muted: rgba(244, 246, 245, .74); --bz-faint: rgba(244, 246, 245, .55); --bz-hair: rgba(255, 255, 255, .12); --bz-hair2: rgba(255, 255, 255, .22); --ac-input-bg: rgba(255, 255, 255, .07); --bz-danger-ink: #ffb4c0; --bz-warn-ink: #f2c77a; --ac-set-glass: blur(16px) saturate(1.4); }
.ac-settings-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: 0 2px; }
.ac-settings-head-text { flex: 1 1 20rem; min-width: 0; }
.ac-settings-eyebrow { margin: 0 0 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted); }
.ac-settings-title { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 750; letter-spacing: -.01em; color: var(--bz-text); }
.ac-settings-intro { margin: 6px 0 0; max-width: 46rem; font-size: .9375rem; line-height: 1.5; color: var(--bz-muted); }
.ac-settings-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ac-settings-section { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px 20px; border: 1px solid var(--bz-hair); border-radius: var(--bz-r5, 16px); background: var(--bz-card); color: var(--bz-text); backdrop-filter: var(--ac-set-glass); -webkit-backdrop-filter: var(--ac-set-glass); box-sizing: border-box; }
.ac-settings-section[data-tone="danger"] { border-color: color-mix(in srgb, var(--bz-danger, #c0405a) 40%, transparent); }
.ac-settings-section-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ac-settings-section-text { flex: 1 1 16rem; min-width: 0; }
.ac-settings-section-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--bz-text); }
.ac-settings-section-intro { margin: 4px 0 0; font-size: .875rem; line-height: 1.45; color: var(--bz-muted); }
.ac-settings-section-body { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ac-settings .ac-input, .ac-settings .ac-select { background: var(--ac-input-bg); color: var(--bz-text); border-color: var(--bz-hair2); }
.ac-settings .ac-input::placeholder { color: var(--bz-faint); }
.ac-settings .ac-field-hint { color: var(--bz-muted); }
.ac-settings .ac-field[data-state="error"] .ac-field-hint { color: var(--bz-danger-ink); }
.ac-settings .ac-empty { padding: 20px 8px; color: var(--bz-muted); }
.ac-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.ac-field-grid[data-columns="1"] { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 640px) { .ac-field-grid { grid-template-columns: minmax(0, 1fr); } .ac-settings-section { padding: 16px 14px; } }
.ac-error-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--bz-danger, #c0405a) 45%, transparent); border-radius: var(--bz-r4, 13px); background: color-mix(in srgb, var(--bz-danger, #c0405a) 10%, var(--bz-card, #fff)); color: var(--bz-text, #1b1e27); font-size: .875rem; line-height: 1.45; }
.ac-error-notice > .ac-icon { flex: none; width: 1.125rem; height: 1.125rem; margin-top: 1px; color: var(--bz-danger-ink, #8f2a3e); }
.ac-error-notice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-error-notice-title { color: var(--bz-danger-ink, #8f2a3e); }
.ac-service-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--bz-hair); }
.ac-service-row:first-child { border-top: 0; padding-top: 2px; }
.ac-service-mark { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 10px; background: color-mix(in srgb, var(--bz-text) 7%, transparent); color: var(--bz-text); }
.ac-service-mark .ac-icon, .ac-service-mark svg { width: 1.125rem; height: 1.125rem; }
.ac-service-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-service-title { font-size: .9375rem; color: var(--bz-text); }
.ac-service-detail { font-size: .8125rem; color: var(--bz-muted); overflow-wrap: anywhere; }
@media (max-width: 520px) { .ac-service-row { grid-template-columns: auto minmax(0, 1fr) auto; } .ac-service-row > :last-child { grid-column: 2 / -1; justify-self: start; } }

/* board (board.ts): columns of items; heads sticky with their count; empty columns fold to a strip; phones show one
   column behind a segmented switch. Drag by the grip, or "Verschieben nach …" in the item's menu. */
.ac-board { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-board-grid { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; }
.ac-board-col { flex: 1 0 15rem; max-width: 22rem; min-width: 0; display: flex; flex-direction: column; border-radius: var(--bz-r5, 16px); background: color-mix(in srgb, var(--bz-text, #1b1e27) 4%, transparent); scroll-snap-align: start; }
.ac-board-col[data-folded="true"] { flex: 0 0 3rem; max-width: 3rem; }
.ac-board-col[data-folded="true"] .ac-board-head { flex-direction: column; gap: 8px; padding: 10px 0; }
.ac-board-col[data-folded="true"] .ac-board-title { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; overflow: visible; max-height: 14rem; color: var(--bz-muted, #6e7480); }
.ac-board-col[data-folded="true"] .ac-board-head { border-radius: var(--bz-r5, 16px); }
.ac-board-col[data-drop="true"] { outline: 2px dashed var(--bz-accent, #49aecb); outline-offset: -2px; }
.ac-board-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--bz-r5, 16px) var(--bz-r5, 16px) 0 0; background: inherit; }
.ac-board-title { flex: 1; min-width: 0; margin: 0; font-size: .875rem; font-weight: 700; color: var(--bz-text, #1b1e27); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-board-col[data-tone="warn"] .ac-board-title::before, .ac-board-col[data-tone="danger"] .ac-board-title::before, .ac-board-col[data-tone="ok"] .ac-board-title::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: 6px; border-radius: 50%; vertical-align: middle; background: var(--bz-warn, #c68a12); }
.ac-board-col[data-tone="danger"] .ac-board-title::before { background: var(--bz-danger, #c0405a); }
.ac-board-col[data-tone="ok"] .ac-board-title::before { background: var(--bz-success, #2e9e6b); }
.ac-board-fold { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: var(--bz-r2, 8px); background: none; color: var(--bz-muted, #6e7480); cursor: pointer; }
.ac-board-fold .ac-icon { width: 1rem; height: 1rem; }
.ac-board-list { list-style: none; margin: 0; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 8px; min-height: 2.5rem; }
.ac-board-col[data-folded="true"] .ac-board-list { display: none; }
.ac-board-item { position: relative; display: flex; align-items: flex-start; gap: 2px; padding: 8px 6px 8px 4px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); }
.ac-board-item[data-dragging="true"] { opacity: .45; }
.ac-board-item-body { flex: 1; min-width: 0; }
.ac-board-grip { flex: none; display: grid; place-items: center; width: 1.125rem; align-self: stretch; color: var(--bz-faint, #9aa0ac); cursor: grab; opacity: 0; transition: opacity 120ms; }
.ac-board-grip .ac-icon { width: .875rem; height: .875rem; }
.ac-board-item:hover .ac-board-grip, .ac-board-item:focus-within .ac-board-grip { opacity: 1; }
@media (pointer: coarse) { .ac-board-grip { display: none; } }
.ac-board-move { flex: none; }
.ac-board-empty { padding: 10px 6px; font-size: .8125rem; color: var(--bz-muted, #6e7480); text-align: center; }
.ac-board[data-layout="tabs"] .ac-board-grid { display: block; overflow: visible; }
.ac-board[data-layout="tabs"] .ac-board-col { max-width: none; background: none; }
.ac-board[data-layout="tabs"] .ac-board-head { display: none; }
.ac-board[data-layout="tabs"] .ac-board-list { padding: 0; }
.ac-board-switch { max-width: 100%; overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .ac-board-grip { transition: none; } }

/* dataTable (data-table.ts): toolbar (search, filter chips, count), a bulk bar with the selection, a plain table with
   sortable heads and openable rows; phones: one card per row (title, detail, meta lines with their label). */
.ac-dt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-dt-toolbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.ac-dt-search { flex: 1 1 14rem; max-width: 22rem; }
.ac-dt-filters { flex: 1 1 auto; min-width: 0; }
.ac-dt-count { margin-left: auto; font-size: .8125rem; color: var(--bz-muted, #6e7480); font-variant-numeric: tabular-nums; }
.ac-dt-bulk { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--bz-accent, #49aecb) 35%, transparent); border-radius: var(--bz-r4, 13px); background: color-mix(in srgb, var(--bz-accent, #49aecb) 9%, var(--bz-card, #fff)); }
.ac-dt-bulk[hidden] { display: none; }
.ac-dt-bulk-count { font-size: .875rem; font-weight: 700; color: var(--bz-text, #1b1e27); margin-right: 4px; }
.ac-dt-scroll { overflow-x: auto; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); }
.ac-dt-scroll[hidden] { display: none; }
.ac-dt-table { width: 100%; border-collapse: collapse; font-size: .875rem; color: var(--bz-text, #1b1e27); }
.ac-dt-table th { position: sticky; top: 0; z-index: 1; padding: 8px 12px; background: var(--bz-card, #fff); border-bottom: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--bz-muted, #6e7480); text-align: left; white-space: nowrap; }
.ac-dt-table td { padding: 10px 12px; border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); vertical-align: middle; }
.ac-dt-table tr:last-child td { border-bottom: 0; }
.ac-dt-table [data-align="end"] { text-align: right; font-variant-numeric: tabular-nums; }
.ac-dt-check { width: 2.5rem; }
.ac-dt-check input { width: 1.125rem; height: 1.125rem; accent-color: var(--bz-accent, #49aecb); }
.ac-dt-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.ac-dt-sort .ac-icon { width: .875rem; height: .875rem; opacity: .7; }
.ac-dt-row[data-open="true"] { cursor: pointer; }
.ac-dt-row[aria-selected="true"] td { background: color-mix(in srgb, var(--bz-accent, #49aecb) 7%, transparent); }
.ac-dt-row:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: -2px; }
@media (hover: hover) { .ac-dt-row[data-open="true"]:hover td { background: color-mix(in srgb, var(--bz-text, #1b1e27) 4%, transparent); } }
@media (max-width: 640px) {
  .ac-dt-scroll { border: 0; overflow: visible; }
  .ac-dt-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ac-dt-table, .ac-dt-table tbody { display: block; }
  .ac-dt-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin-bottom: 8px; padding: 12px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); }
  .ac-dt-table td { display: block; grid-column: 2; padding: 0; border: 0; text-align: left; }
  .ac-dt-table td.ac-dt-check { grid-column: 1; grid-row: 1 / span 4; width: auto; padding-top: 2px; }
  .ac-dt-table td[data-phone="title"] { font-weight: 700; font-size: .9375rem; }
  .ac-dt-table td[data-phone="detail"] { color: var(--bz-muted, #6e7480); font-size: .8125rem; }
  .ac-dt-table td[data-phone="meta"] { font-size: .8125rem; }
  .ac-dt-table td[data-phone="meta"]::before { content: attr(data-label) ": "; color: var(--bz-muted, #6e7480); }
  .ac-dt-table td[data-phone="hide"] { display: none; }
  .ac-dt-table .ac-dt-row[aria-selected="true"] { border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 45%, transparent); background: color-mix(in srgb, var(--bz-accent, #49aecb) 7%, var(--bz-card, #fff)); }
  .ac-dt-table .ac-dt-row[aria-selected="true"] td, .ac-dt-table .ac-dt-row td { background: none; }
  .ac-dt-table [data-align="end"] { text-align: left; }
}
/* previewDialog: the change before it runs – one sentence, then + / – / ! lines. */
.ac-preview-summary { margin: 0 0 10px; font-size: .9375rem; font-weight: 600; color: var(--bz-text, #1b1e27); }
.ac-preview-lines { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 40vh; overflow: auto; font-size: .875rem; }
.ac-preview-line { display: flex; gap: 8px; align-items: baseline; }
.ac-preview-mark { flex: none; width: 1rem; font-weight: 800; text-align: center; color: var(--bz-muted, #6e7480); }
.ac-preview-line[data-kind="add"] .ac-preview-mark { color: var(--bz-success-ink, #1d6b48); }
.ac-preview-line[data-kind="remove"] .ac-preview-mark { color: var(--bz-danger-ink, #8f2a3e); }
.ac-preview-line[data-kind="warn"] .ac-preview-mark { color: var(--bz-warn-ink, #7a5208); }
.ac-preview-more { color: var(--bz-muted, #6e7480); font-size: .8125rem; }

/* countdownBadge (rights.ts): an elevated right's time left – calm, warn under 30 min, danger under 5, then expired. */
.ac-countdown { display: inline-flex; align-items: center; gap: 6px; min-height: 1.75rem; padding: 0 10px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: 999px; background: var(--bz-card, #fff); font: inherit; font-size: .8125rem; font-weight: 700; color: var(--bz-text, #1b1e27); white-space: nowrap; font-variant-numeric: tabular-nums; }
button.ac-countdown { cursor: pointer; }
.ac-countdown .ac-icon { width: .875rem; height: .875rem; }
.ac-countdown[data-tone="warn"] { border-color: color-mix(in srgb, var(--bz-warn, #c68a12) 45%, transparent); background: color-mix(in srgb, var(--bz-warn, #c68a12) 12%, var(--bz-card, #fff)); color: var(--bz-warn-ink, #7a5208); }
.ac-countdown[data-tone="danger"], .ac-countdown[data-tone="expired"] { border-color: color-mix(in srgb, var(--bz-danger, #c0405a) 45%, transparent); background: color-mix(in srgb, var(--bz-danger, #c0405a) 11%, var(--bz-card, #fff)); color: var(--bz-danger-ink, #8f2a3e); }
.ac-surface-stage .ac-countdown { background: color-mix(in srgb, var(--bz-stage, #0d1714) 68%, transparent); border-color: rgba(255, 255, 255, .18); color: #fff; }
.ac-surface-stage .ac-countdown[data-tone="warn"] { color: #f2c77a; } .ac-surface-stage .ac-countdown[data-tone="danger"], .ac-surface-stage .ac-countdown[data-tone="expired"] { color: #ffb4c0; }
/* grantOrigin: where a right comes from – a quiet chip. */
.ac-origin-chip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-height: 1.5rem; padding: 0 8px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: 999px; background: color-mix(in srgb, var(--bz-text, #1b1e27) 4%, transparent); font: inherit; font-size: .75rem; font-weight: 600; color: var(--bz-muted, #6e7480); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.ac-origin-chip { cursor: pointer; }
.ac-origin-chip .ac-icon { flex: none; width: .75rem; height: .75rem; }
.ac-origin-chip[data-via="direct"] { color: var(--bz-text, #1b1e27); }
/* personPicker: the chosen as removable chips under the search. */
.ac-picker { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ac-picker-chosen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ac-picker-chosen[hidden] { display: none; }
.ac-picker-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 1.75rem; padding: 0 2px 0 10px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: 999px; background: var(--bz-card, #fff); font-size: .8125rem; font-weight: 600; color: var(--bz-text, #1b1e27); }
.ac-picker-chip > .ac-icon { width: .875rem; height: .875rem; color: var(--bz-muted, #6e7480); }
.ac-picker-chip[data-kind="agent"] > .ac-icon { color: var(--bz-accent-ai, #6f5ce8); }
.ac-picker-remove { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--bz-muted, #6e7480); cursor: pointer; }
.ac-picker-remove .ac-icon { width: .75rem; height: .75rem; }
@media (hover: hover) { .ac-picker-remove:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 8%, transparent); color: var(--bz-text, #1b1e27); } }

/* targetHead: "Zuordnen zu" – the object something belongs to (type icon, name, summary, optional switch). */
.ac-target-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: color-mix(in srgb, var(--bz-accent, #49aecb) 6%, var(--bz-card, #fff)); }
.ac-target-head[data-off="true"] { background: var(--bz-card, #fff); }
.ac-target-head[data-off="true"] .ac-target-text { opacity: .55; }
.ac-target-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: color-mix(in srgb, var(--bz-accent, #49aecb) 14%, transparent); color: var(--bz-accent-ink, #1e6f86); }
.ac-target-icon .ac-icon { width: 1rem; height: 1rem; }
.ac-target-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-target-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted, #6e7480); }
.ac-target-name { font-size: .875rem; color: var(--bz-text, #1b1e27); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-target-detail { font-size: .75rem; color: var(--bz-muted, #6e7480); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-target-toggle { flex: none; display: inline-flex; align-items: center; }
.ac-target-toggle input { width: 2.25rem; height: 1.25rem; accent-color: var(--bz-accent, #49aecb); }
/* createMenu: a popover under the button (desktop), a sheet from below (phones). */
.ac-create-pop[popover] { position: fixed; inset: auto; margin: 0; box-sizing: border-box; width: 20rem; max-height: min(70vh, 34rem); overflow: auto; padding: 8px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-r5, 16px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: 0 18px 48px -12px rgba(15, 22, 30, .3); display: none; flex-direction: column; gap: 6px; }
.ac-create-pop[popover]:popover-open, .ac-create-pop[data-open="true"] { display: flex; }
.ac-create-pop[data-layout="sheet"] { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 80vh; border-radius: 18px 18px 0 0; padding: 14px 10px calc(14px + env(safe-area-inset-bottom, 0px)); }
.ac-create-pop[data-layout="sheet"]:popover-open { transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s ease; }
@starting-style { .ac-create-pop[data-layout="sheet"]:popover-open { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ac-create-pop[data-layout="sheet"]:popover-open { transition: none; } }
.ac-create-group { display: flex; flex-direction: column; }
.ac-create-group-label { margin: 6px 8px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted, #6e7480); }
.ac-create-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 2.75rem; padding: 6px 8px; border: 0; border-radius: var(--bz-r3, 10px); background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.ac-create-item:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: -2px; }
@media (hover: hover) { .ac-create-item:not([aria-disabled="true"]):hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 5%, transparent); } }
.ac-create-item[aria-disabled="true"] { cursor: default; opacity: .55; }
.ac-create-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent); }
.ac-create-icon .ac-icon { width: 1rem; height: 1rem; }
.ac-create-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ac-create-text b { font-size: .875rem; font-weight: 650; }
.ac-create-text small { font-size: .75rem; color: var(--bz-muted, #6e7480); }

/* matrixTable: rights × roles/groups/people; head and first column sticky, sideways scroll on phones, a print view. */
.ac-matrix { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ac-matrix-bar { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.ac-matrix-legend { display: flex; gap: 14px; margin: 0; font-size: .8125rem; color: var(--bz-muted, #6e7480); }
.ac-matrix-scroll { max-height: 70vh; overflow: auto; border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); border-radius: var(--bz-r4, 13px); background: var(--bz-card, #fff); }
.ac-matrix-scroll:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
.ac-matrix-table { border-collapse: separate; border-spacing: 0; font-size: .875rem; color: var(--bz-text, #1b1e27); }
.ac-matrix-table thead th { position: sticky; top: 0; z-index: 2; padding: 8px 10px; background: var(--bz-card, #fff); border-bottom: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); font-size: .75rem; font-weight: 700; color: var(--bz-muted, #6e7480); white-space: nowrap; text-align: center; }
.ac-matrix-table .ac-matrix-corner { left: 0; z-index: 3; text-align: left; }
.ac-matrix-rowhead { position: sticky; left: 0; z-index: 1; min-width: 12rem; max-width: 18rem; padding: 8px 12px; background: var(--bz-card, #fff); border-right: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); text-align: left; font-weight: 600; }
.ac-matrix-rowhead small { display: block; font-weight: 400; font-size: .75rem; color: var(--bz-muted, #6e7480); }
.ac-matrix-sensitive { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--bz-warn, #c68a12) 14%, transparent); color: var(--bz-warn-ink, #7a5208); font-size: .75rem; font-weight: 700; }
.ac-matrix-group th > span { position: sticky; left: 12px; }
.ac-matrix-group th { padding: 10px 12px 4px; background: color-mix(in srgb, var(--bz-text, #1b1e27) 3%, var(--bz-card, #fff)); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bz-muted, #6e7480); text-align: left; }
.ac-matrix-cell { padding: 6px 10px; border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); text-align: center; }
.ac-matrix-mark { display: inline-grid; place-items: center; min-width: 1.75rem; min-height: 1.75rem; padding: 0; border: 0; border-radius: 999px; background: none; font: inherit; font-size: 1rem; line-height: 1; color: var(--bz-muted, #6e7480); }
button.ac-matrix-mark { cursor: pointer; }
.ac-matrix-cell[data-level="full"] .ac-matrix-mark { color: var(--bz-accent-ink, #1e6f86); }
.ac-matrix-cell[data-level="partial"] .ac-matrix-mark { color: var(--bz-warn-ink, #7a5208); }
@media (hover: hover) { button.ac-matrix-mark:hover { background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, transparent); } }
.ac-matrix-empty { padding: 20px; text-align: center; color: var(--bz-muted, #6e7480); }
@media print {
  .ac-matrix-bar { display: none; }
  .ac-matrix-scroll { max-height: none; overflow: visible; border: 0; }
  .ac-matrix-table thead th, .ac-matrix-rowhead, .ac-matrix-group th { position: static; }
  .ac-matrix-table { font-size: 9pt; }
  .ac-matrix-table tr { break-inside: avoid; }
}

/* heroBackdrop (hero-backdrop.ts): per level a calm darkened picture behind the hero (or the globe), the level chip
   with its tint and the breadcrumb. The parts always stand on the dark stage; the picture is an <img>, never a CSS background. */
.ac-hero-backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--bz-stage, #0d1714); }
.ac-hero-backdrop[hidden] { display: none; }
.ac-hero-fill { position: absolute; inset: 0; background: radial-gradient(120% 90% at 85% 20%, color-mix(in srgb, var(--ac-hero-tone, var(--bz-accent, #49aecb)) 62%, var(--bz-stage, #0d1714)) 0%, color-mix(in srgb, var(--ac-hero-tone, var(--bz-accent, #49aecb)) 22%, var(--bz-stage, #0d1714)) 55%, var(--bz-stage, #0d1714) 100%); }
.ac-hero-fill[hidden] { display: none; }
.ac-hero-pattern { position: absolute; right: 0; bottom: 0; width: 62%; height: 58%; fill: rgba(255, 255, 255, .1); }
.ac-hero-backdrop:has(.ac-hero-fill:not([hidden])) .ac-hero-img { display: none; }
.ac-hero-img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.ac-hero-backdrop[data-loaded="true"] .ac-hero-img { opacity: 1; }
.ac-hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(8, 14, 12, .84) 0%, rgba(8, 14, 12, .52) 48%, rgba(8, 14, 12, .14) 100%), linear-gradient(0deg, rgba(8, 14, 12, .55) 0%, rgba(8, 14, 12, 0) 40%); }
.ac-hero-credit { position: absolute; right: 16px; bottom: 12px; max-width: calc(100% - 32px); display: flex; justify-content: flex-end; }
.ac-hero-credit-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; padding: 4px 10px; border: 0; border-radius: 999px; background: rgba(8, 14, 12, .62); color: rgba(244, 246, 245, .86); font: inherit; font-size: .75rem; }
.ac-hero-credit-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hero-credit-btn .ac-icon { flex: none; width: .875rem; height: .875rem; }
button.ac-hero-credit-btn { cursor: pointer; }
.ac-hero-head { --ac-level: var(--bz-accent, #49aecb); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: #f4f6f5; }
.ac-hero-head[data-level="departure"] { --ac-level: var(--bz-warn, #c68a12); }
.ac-hero-head[data-level="place"] { --ac-level: var(--bz-accent-ai, #6f5ce8); }
.ac-hero-head[data-level="document"], .ac-hero-head[data-level="analysis"] { --ac-level: var(--bz-info, #5b7590); }
.ac-hero-head[data-level="decision"] { --ac-level: var(--bz-danger, #c0405a); }
.ac-hero-head[data-level="site"] { --ac-level: var(--bz-success, #2e9e6b); }
.ac-hero-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8125rem; color: rgba(244, 246, 245, .74); }
.ac-hero-crumbs[hidden] { display: none; }
.ac-hero-crumb { padding: 0; border: 0; background: none; font: inherit; color: inherit; }
button.ac-hero-crumb { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.ac-hero-crumb[aria-current="page"] { font-weight: 700; color: #f4f6f5; }
.ac-hero-sep { opacity: .7; }
/* On a light stage (.ac-surface-paper: the cockpit's day look) the head reads dark – AA on the paper (COCKPIT 07.10.) –
   but only while no picture lies under it ([data-mode="image"]: the darkened picture keeps the light head). */
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) { color: var(--bz-text, #1b1e27); }
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) .ac-hero-crumbs { color: color-mix(in srgb, var(--bz-text, #1b1e27) 75%, transparent); }
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) .ac-hero-crumb[aria-current="page"] { color: var(--bz-text, #1b1e27); }
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) .ac-hero-level { background: color-mix(in srgb, var(--ac-level) 14%, #fff); color: var(--bz-text, #1b1e27); }
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) .ac-hero-level .ac-icon { color: color-mix(in srgb, var(--ac-level) 70%, #000); }
.ac-surface-paper .ac-hero-head:not([data-mode="image"]) button.ac-hero-crumb:focus-visible { outline-color: var(--bz-text, #1b1e27); }
.ac-hero-level { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 8px; border: 1px solid color-mix(in srgb, var(--ac-level) 55%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--ac-level) 24%, rgba(8, 14, 12, .5)); font-size: .8125rem; font-weight: 700; color: #fff; }
.ac-hero-level .ac-icon { width: .875rem; height: .875rem; color: color-mix(in srgb, var(--ac-level) 55%, #fff); }
.ac-hero-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(13, 23, 20, .55); color: #fff; cursor: pointer; }
.ac-hero-toggle[hidden] { display: none; }
.ac-hero-switch { display: inline-flex; }
.ac-hero-switch[hidden] { display: none; }
.ac-hero-toggle[aria-pressed="true"] { border-color: transparent; background: var(--bz-accent, #49aecb); color: var(--bz-on-accent, #fff); }
.ac-hero-toggle .ac-icon { width: 1.25rem; height: 1.25rem; }
.ac-hero-toggle:focus-visible, button.ac-hero-crumb:focus-visible, button.ac-hero-credit-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (hover: hover) {
  button.ac-hero-crumb:hover { color: #fff; text-decoration-color: currentColor; }
  .ac-surface-paper .ac-hero-head:not([data-mode="image"]) button.ac-hero-crumb:hover { color: var(--bz-text, #1b1e27); }
  .ac-hero-toggle:hover { background: rgba(13, 23, 20, .75); }
  .ac-hero-toggle[aria-pressed="true"]:hover { background: var(--bz-accent, #49aecb); }
  button.ac-hero-credit-btn:hover { color: #fff; }
}
@media (prefers-reduced-motion: reduce) { .ac-hero-img { transition: none; } }

/* choiceTiles (choice-tiles.ts): large choice tiles with an icon – one of several, 2 columns on a phone, 3–4 wider. */
.ac-choice-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 640px) { .ac-choice-tiles { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } }
.ac-choice-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 5.25rem; padding: 14px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-r4, 12px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
.ac-choice-icon { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--bz-r3, 10px); background: color-mix(in srgb, var(--bz-accent, #49aecb) 12%, var(--bz-card, #fff)); color: var(--bz-accent-ink, #1e6f86); }
.ac-choice-icon .ac-icon { width: 1.375rem; height: 1.375rem; }
.ac-choice-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ac-choice-label { font-size: .9375rem; font-weight: 700; line-height: 1.25; }
.ac-choice-detail { font-size: .8125rem; line-height: 1.35; color: var(--bz-muted, #6e7480); }
.ac-choice-tile[aria-checked="true"] { border-color: var(--bz-accent, #49aecb); box-shadow: inset 0 0 0 1px var(--bz-accent, #49aecb); background: color-mix(in srgb, var(--bz-accent, #49aecb) 6%, var(--bz-card, #fff)); }
.ac-choice-tile[aria-checked="true"] .ac-choice-icon { background: var(--bz-accent-ink, #1e6f86); color: #fff; }
.ac-choice-tile:disabled { opacity: .5; cursor: default; }
.ac-choice-tile:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
@media (hover: hover) { .ac-choice-tile:not(:disabled):not([aria-checked="true"]):hover { border-color: color-mix(in srgb, var(--bz-accent, #49aecb) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { .ac-choice-tile { transition: none; } }

/* navTrail (nav-trail.ts): the way one came, with its turns – home › … › current; „+N“ folds older steps; a dot with the
   count where a page has several ways on (opens them); the way last left as a pale pill ahead. Tints like the hero chip. */
.ac-trail { --ac-level: var(--bz-accent, #49aecb); display: flex; align-items: center; gap: 4px; min-width: 0; max-width: 100%; font-size: .8125rem; }
.ac-trail-rail { display: flex; align-items: center; gap: 2px; min-width: 0; margin: 0; padding: 2px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.ac-trail-rail::-webkit-scrollbar { display: none; }
.ac-trail-rail > li { display: inline-flex; align-items: center; flex: none; }
.ac-trail-home, .ac-trail-pill, .ac-trail-more, .ac-trail-branch { display: inline-flex; align-items: center; gap: 6px; min-height: 1.75rem; padding: 0 10px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--bz-muted, #6e7480); font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ac-trail-home { padding: 0 6px; color: var(--bz-text, #1b1e27); }
.ac-trail-home .ac-icon, .ac-trail-pill .ac-icon { width: .9375rem; height: .9375rem; }
.ac-trail-pill .ac-icon { color: color-mix(in srgb, var(--ac-level) 70%, var(--bz-text, #1b1e27)); }
.ac-trail-pill[data-level="departure"] { --ac-level: var(--bz-warn, #c68a12); }
.ac-trail-pill[data-level="place"] { --ac-level: var(--bz-accent-ai, #6f5ce8); }
.ac-trail-pill:is([data-level="document"], [data-level="analysis"]) { --ac-level: var(--bz-info, #5b7590); }
.ac-trail-pill[data-level="decision"] { --ac-level: var(--bz-danger, #c0405a); }
.ac-trail-pill[data-level="site"] { --ac-level: var(--bz-success, #2e9e6b); }
.ac-trail-pill[aria-current="page"] { border-color: color-mix(in srgb, var(--ac-level) 45%, transparent); background: color-mix(in srgb, var(--ac-level) 12%, var(--bz-card, #fff)); color: var(--bz-text, #1b1e27); font-weight: 700; }
.ac-trail-pill.is-ahead { opacity: .55; border-style: dashed; border-color: var(--bz-hair2, rgba(25, 28, 40, .16)); font-weight: 600; }
.ac-trail-more { padding: 0 8px; border-color: var(--bz-hair2, rgba(25, 28, 40, .16)); font-variant-numeric: tabular-nums; }
.ac-trail-sep { color: var(--bz-muted, #6e7480); }
.ac-trail-sep > .ac-icon { width: .75rem; height: .75rem; opacity: .7; }
.ac-trail-branch { min-width: 1.5rem; min-height: 1.5rem; padding: 0 6px; justify-content: center; background: color-mix(in srgb, var(--bz-accent-ai, #6f5ce8) 16%, var(--bz-card, #fff)); color: var(--bz-accent-ai, #6f5ce8); font-size: .75rem; font-weight: 700; }
.ac-trail-pop { position: fixed; inset: auto; margin: 0; width: min(20rem, calc(100vw - 16px)); padding: 6px; border: 1px solid var(--bz-hair2, rgba(25, 28, 40, .16)); border-radius: var(--bz-r4, 12px); background: var(--bz-card, #fff); color: var(--bz-text, #1b1e27); box-shadow: 0 10px 30px rgba(25, 28, 40, .18); }
.ac-trail-pop-head { display: flex; align-items: center; gap: 6px; margin: 4px 8px 6px; color: var(--bz-accent-ai, #6f5ce8); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ac-trail-pop-head .ac-icon { width: .875rem; height: .875rem; }
.ac-trail-way { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 2.75rem; padding: 6px 10px; border: 0; border-radius: var(--bz-r3, 10px); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ac-trail-way[aria-current="true"] { background: color-mix(in srgb, var(--bz-accent-ai, #6f5ce8) 10%, var(--bz-card, #fff)); }
.ac-trail-way .ac-icon { flex: none; width: 1rem; height: 1rem; color: var(--bz-muted, #6e7480); }
.ac-trail-way-text { display: grid; min-width: 0; flex: 1; }
.ac-trail-way-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-trail-way-sub, .ac-trail-way-time { color: var(--bz-muted, #6e7480); font-size: .75rem; }
.ac-trail-way-time { flex: none; }
.ac-trail :is(button):focus-visible, .ac-trail-way:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
@media (hover: hover) { .ac-trail-pill:not([aria-current="page"]):hover, .ac-trail-home:hover, .ac-trail-more:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent); color: var(--bz-text, #1b1e27); } .ac-trail-way:hover { background: color-mix(in srgb, var(--bz-text, #1b1e27) 5%, transparent); } }
.ac-surface-stage .ac-trail, :is(.ac-shell, .ac-panel)[data-surface="dark"] .ac-trail { --bz-text: #f4f6f5; --bz-muted: rgba(244, 246, 245, .72); --bz-card: rgba(255, 255, 255, .06); }

/* openInMenu (open-in.ts): „Öffnen in …“ – the source systems' links (new tab) with the host small under the label, then
   „Link zum Cockpit kopieren“; phone: the same rows in a bottom sheet. */
.ac-open-in .ac-menu-item { flex-wrap: wrap; row-gap: 0; }
.ac-open-in-host { flex-basis: 100%; padding-left: calc(1rem + 10px); color: var(--bz-muted, #6e7480); font-size: .75rem; font-weight: 400; }
.ac-open-in-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 3rem; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); background: none; color: var(--bz-text, #1b1e27); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ac-open-in-row:last-child { border-bottom: 0; }
.ac-open-in-row .ac-icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--bz-muted, #6e7480); }
.ac-open-in-text { display: grid; min-width: 0; }
.ac-open-in-text .ac-open-in-host { padding-left: 0; }
.ac-open-in-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-open-in-row:focus-visible { outline: 2px solid var(--bz-accent, #49aecb); outline-offset: 2px; }
/* AI-first cockpit: sidebar · situation · detail panel. After the map studio (apps/map-studio/src/app.css):
   warm paper, petrol accent, hairlines, outline icons; the blocks bring their own styles (trips-cockpit pack). */
/* The frame reads the Brainz theme (brainz-theme tokens, set by the cockpit's theme), with the trips.express look as fallback. */
:root { --cx-ink: var(--bz-text, #15342c); --cx-muted: var(--bz-muted, #68766f); --cx-hair: var(--bz-hair, #e3e6df); --cx-paper: var(--bz-bg, #f5f4ef); --cx-side: var(--bz-sub, #fbfaf7); --cx-card: var(--bz-card, #fff); }
body { background: var(--cx-paper); color: var(--cx-ink); }
/* The shared studio sheet sets html, body { height: 100% }: the body then ends at the window's height and the sticky bar
   scrolls away with it. In the cockpit the body grows with its page, so the bar (and the sidebar) stay. */
body { height: auto; min-height: 100%; }
#app { padding: 0; }
.tx-ico, .cx .tx-ico, .cx-welcome .tx-ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - var(--cx-bar, 64px)); }
.cx.has-panel { grid-template-columns: 252px minmax(0, 1fr) minmax(320px, 400px); }
/* The flexible panel (?panel=1, KONZEPT-PANELS): Schmal / Breit / Groß, the page gives way smoothly; the conversation
   stays beside it. */
.cx.is-panel-flex { transition: grid-template-columns .36s cubic-bezier(.32, .72, 0, 1); }
.cx.is-panel-flex.has-panel { grid-template-columns: 252px minmax(0, 1fr) var(--ac-panel-inset, var(--cx-panel-w, 400px)); }
.cx.is-panel-flex[data-panel-size="custom"] { transition: none; }
/* Sliding open and shut (?panel=1): the panel's column from and to 0, the page follows; the content fades. */
.cx.is-panel-flex.has-panel.is-panel-opening, .cx.is-panel-flex.has-panel.is-panel-closing { grid-template-columns: 252px minmax(0, 1fr) 0px; }
.cx.is-panel-flex.has-panel.has-conversation:not(.conversation-collapsed).is-panel-opening,
.cx.is-panel-flex.has-panel.has-conversation:not(.conversation-collapsed).is-panel-closing { grid-template-columns: 252px minmax(0, 1fr) 0px var(--cx-conversation-width, 420px); }
.cx.is-panel-flex > .cx-panel { transition: opacity .24s ease; }
.cx.is-panel-flex.is-panel-opening > .cx-panel, .cx.is-panel-flex.is-panel-closing > .cx-panel { opacity: 0; overflow: hidden; }
.cx.is-panel-flex.is-panel-opening > .cx-panel { transition: none; }
.cx.is-panel-flex.has-panel.has-conversation:not(.conversation-collapsed) { grid-template-columns: 252px minmax(0, 1fr) var(--ac-panel-inset, var(--cx-panel-w)) var(--cx-conversation-width, 420px); }
.cx.is-panel-flex.has-panel .cx-conversation-dock:not([hidden]) { display: block; }
.cx-panel-sizes { display: flex; gap: 2px; margin-left: auto; }
.cx-panel-sizes .ac-icon-btn[aria-pressed="true"] { color: var(--as-accent, #1f5f55); background: color-mix(in srgb, var(--as-accent, #1f5f55) 10%, transparent); }
/* ?panel=1 in the shared panelHost frame: its grip and sizes, our app sheet inside with its own head (back, title,
   sizes, ✕) – the frame's head would be a second one. */
.ac-panel[data-id^="cx-details"] { grid-template-rows: minmax(0, 1fr); }
.ac-panel[data-id^="cx-details"] > .ac-panel-head { display: none; }
.ac-panel[data-id^="cx-details"] > .ac-panel-body { padding: 0; overflow: hidden; }
.ac-panel[data-id^="cx-details"] .ac-panel-content { height: 100%; }
.ac-panel[data-id^="cx-details"] .cx.cx-panel-scope { display: block; height: 100%; min-height: 0; }
.ac-panel[data-id^="cx-details"] .cx-panel { position: static; height: 100%; width: 100%; border-left: 0; box-shadow: none; animation: none; }
.cx-panel-splitter { position: fixed; z-index: 30; --ac-splitter-line: transparent; } /* the panel's own border is the one line */
@media (prefers-reduced-motion: reduce) { .cx.is-panel-flex { transition: none; } }
@media (max-width: 900px) { .cx-panel-sizes { display: none; } }
.cx.has-conversation:not(.has-panel) { grid-template-columns: 252px minmax(0, 1fr) var(--cx-conversation-width, 420px); }
.cx-conversation-dock { grid-column:3; grid-row:1; position:sticky; top:var(--cx-bar, 64px); align-self:start; height:calc(100dvh - var(--cx-bar, 64px)); min-width:0; overflow:hidden; background:var(--cx-stage, #102b29); border-left:1px solid var(--cx-night-hair, rgba(255,255,255,.12)); }
.cx-conversation-dock[hidden], .cx.has-panel .cx-conversation-dock { display:none; }
.cx-conversation-splitter.ac-splitter { --ac-splitter-line:var(--cx-night-hair, rgba(255,255,255,.09)); --ac-splitter-handle:rgba(255,255,255,.35); --ac-splitter-focus-gap:var(--cx-stage, #102b29); --ac-splitter-focus-ink:rgba(255,255,255,.9); position:fixed; inset:auto; z-index:27; transform:translateX(-50%); }
.cx-conversation-splitter[hidden], .cx.has-panel .cx-conversation-splitter { display:none; }
.cx-conversation-reopen { display:none; }
.cx.conversation-collapsed .cx-conversation-reopen { display:inline-flex; }
/* Sidebar. */
.cx-side { position: sticky; top: var(--cx-bar, 64px); align-self: start; height: calc(100vh - var(--cx-bar, 64px)); box-sizing: border-box; overflow: auto; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px 16px; border-right: 1px solid var(--cx-hair); background: var(--cx-side); }
.cx-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.cx-brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--as-accent); color: #fff; box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--as-accent) 80%, transparent); }
.cx-brand b { display: block; font-size: 15.5px; line-height: 1.2; }
.cx-brand small { color: var(--cx-muted); font-size: 12px; }
.cx-label { display: block; padding: 0 8px 6px; color: var(--cx-muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cx-roles { display: grid; gap: 3px; }
.cx-role-short { display: none; }
.host-button[aria-busy="true"], .tx-btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.cx-role-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #2b3a33; font: 600 13.5px/1.2 inherit; font-family: inherit; text-align: left; cursor: pointer; }
.cx-role-btn .tx-ico { color: var(--cx-muted); }
.cx-role-btn:hover { background: #eff0eb; }
.cx-role-btn.is-active { background: #fff; border-color: var(--cx-hair); box-shadow: 0 1px 2px rgba(21, 52, 44, .06); color: var(--cx-ink); }
.cx-role-btn.is-active .tx-ico { color: var(--as-accent); }
.cx-role-btn.is-active::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: var(--as-accent); }
.cx-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cx-nav button, .cx-nav a { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: #2b3a33; font: 600 14px/1.2 inherit; font-family: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.cx-nav button .tx-ico, .cx-nav a .tx-ico { color: var(--cx-muted); }
.cx-nav button:hover, .cx-nav a:hover { background: #eff0eb; }
.cx-nav button.is-active { background: var(--as-accent); color: #fff; }
.cx-nav button.is-active .tx-ico { color: #fff; }
.cx-nav-more { border-top: 1px solid var(--cx-hair); padding-top: 12px; }
.cx-nav-more a { font-weight: 500; color: #5f6d67; font-size: 13px; }
.cx-side-foot { margin: auto 0 0; display: flex; gap: 8px; padding: 10px; border-radius: 10px; background: #f0f1ec; color: var(--cx-muted); font-size: 12px; line-height: 1.4; }
.cx-side-foot .tx-ico { width: 16px; height: 16px; color: var(--as-accent); }
/* Main. */
.cx-main { padding: 24px 28px 64px; min-width: 0; }
.cx-main > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.cx-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin-bottom: 18px; }
.cx-head-text { display: grid; gap: 4px; min-width: 0; }
.cx-kicker { color: var(--cx-muted); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.cx-head h1 { margin: 0; font-size: 26px; line-height: 1.2; letter-spacing: -.015em; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.cx-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-tools .host-button, .cx-panel-actions .host-button, .cx-error .host-button, .cx-welcome .host-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; border-radius: 10px; text-decoration: none; }
.cx-tools .host-button .tx-ico { width: 17px; height: 17px; }
.cx-tools .host-button.quiet, .cx-panel-actions .host-button.quiet, .cx-error .host-button.quiet, .cx-welcome .host-button.quiet { border: 1px solid #d9ddd5; background: #fff; color: var(--cx-ink); }
.cx-tools .host-button.quiet .tx-ico, .cx-panel-actions .host-button.quiet .tx-ico, .cx-welcome .host-button.quiet .tx-ico { color: var(--as-accent); }
.cx-tools .host-button.quiet:hover, .cx-panel-actions .host-button.quiet:hover { background: #f7f7f3; }
.cx-tools .host-button.is-compact { padding-left: 10px; padding-right: 10px; }
.cx-tools .host-button.is-compact span { display: none; }
/* Day note of the model: the page's lead. */
.cx-note { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; padding: 16px 18px; border-radius: var(--as-radius, 14px); background: linear-gradient(120deg, color-mix(in srgb, var(--as-accent) 10%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--as-accent) 22%, var(--cx-hair)); }
.cx-note.is-success { background: linear-gradient(120deg, #e8f4ec, #fff 70%); border-color: #cfe6d7; }
.cx-note-ico { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--as-accent); color: #fff; }
.cx-note.is-success .cx-note-ico { background: #1e7a4c; }
.cx-note p { margin: 3px 0 0; font-size: 15.5px; line-height: 1.5; }
/* Grid of blocks. */
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 16px; align-items: start; }
/* KONZEPT-KACHELHOEHE: no tile is stretched by a long neighbour; the situation pages lie densely (8-px rows, each tile
   spans its own height – fitTile), a tile beyond its cap fades out above "Alle … anzeigen". */
.cx-grid.is-packed { grid-auto-rows: 8px; row-gap: 0; grid-auto-flow: row dense; }
.cx-cell.is-capped { display: flex; flex-direction: column; }
/* The tile keeps its edge and corners; its content fades into the tile's own colour above the button (a mask made the
   card's bottom see-through – the dark page showed under the button). */
.cx-cell.is-capped > :first-child { height: auto; max-height: var(--tile-cap); overflow: hidden; }
.cx-cell.is-capped::after { content: ""; position: absolute; z-index: 1; left: 1px; right: 1px; top: calc(var(--tile-cap) - 112px); height: 111px; pointer-events: none;
  border-radius: 0 0 16px 16px; background: linear-gradient(to bottom, color-mix(in srgb, var(--as-surface, #fff) 0%, transparent), var(--as-surface, #fff) 72%); }
.cx-more { align-self: center; position: relative; z-index: 2; margin-top: -50px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 16px;
  border: 1px solid var(--cx-hair); border-radius: 999px; background: #fff; color: var(--cx-ink); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .14); transition: transform .15s ease, box-shadow .15s ease; }
.cx-more:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.cx-more:focus-visible { outline: 2px solid var(--as-accent, #1f5f55); outline-offset: 2px; }
.cx-more .tx-ico { width: 14px; height: 14px; }
.is-full-view { max-height: none !important; height: auto !important; }
.cx-tile-search { width: 100%; height: 40px; margin: 0 0 12px; padding: 0 12px; border: 1px solid var(--cx-hair); border-radius: 12px; font: inherit; font-size: 14px; background: #fff; box-sizing: border-box; }
/* Size changes (reflow in cockpit-next.ts): tiles glide to their size and place; their pictures are clipped to the
   moving frame, not stretched, and the page itself does not fade. */
html.cx-resizing::view-transition-group(*) { animation-duration: .38s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); overflow: clip; border-radius: var(--as-radius, 14px); }
html.cx-resizing::view-transition-old(*), html.cx-resizing::view-transition-new(*) { height: auto; width: auto; object-fit: none; object-position: left top; animation-duration: .24s; }
html.cx-resizing::view-transition-old(root), html.cx-resizing::view-transition-new(root) { animation: none; }
::view-transition-group(cx-grow) { animation-duration: .45s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
@media print { .cx-cell.is-capped > :first-child { max-height: none; } .cx-cell.is-capped::after, .cx-more { display: none; } }
.cx-cell { min-width: 0; animation: cx-in .35s ease both; animation-delay: calc(var(--i, 0) * 40ms); }
.cx-cell.is-wide { grid-column: 1 / -1; }
.cx-cell > * { height: 100%; box-sizing: border-box; }
/* The notes corner (34×34, top right, KARTEN-STUDIO @29930dc76) keeps the head's count clear of it. */
.cx-cell.ac-has-note-corner .tx-head { padding-right: 2.25rem; }
@keyframes cx-in { from { opacity: 0; transform: translateY(6px); } }
/* Loading skeleton. */
/* Loading skeleton (Florian 30.09.): the shape the view had last time (skeleton-memory.ts), quiet – barely lighter than
   the ground, a slow sheen, fading in; the page's own grid, so it lands where the cards will stand. */
.cx-skeleton { display: grid; gap: 20px; animation: cx-sk-in .5s ease both .1s; }
@keyframes cx-sk-in { from { opacity: 0; } }
.cx-sk { border-radius: 16px; background: linear-gradient(100deg, #efede7 30%, #f5f4f0 50%, #efede7 70%) 0 0 / 200% 100%; animation: cx-shimmer 1.8s ease-in-out infinite; }
.cx-sk-headline { display: grid; gap: 10px; }
.cx-sk-kicker { width: 180px; height: 12px; border-radius: 6px; }
.cx-sk-title { width: min(360px, 70%); height: 34px; border-radius: 10px; }
.cx-sk-chips { width: 220px; height: 26px; border-radius: 999px; }
.cx-sk-grid .cx-sk-cell.is-wide { grid-column: 1 / -1; }
.cx-sk-grid .cx-sk-cell { animation: cx-shimmer 1.8s ease-in-out infinite, cx-in .35s ease both; animation-delay: 0s, calc(var(--i, 0) * 40ms); }
.cx-sk-block { height: 220px; }
.cx-sk-block.is-short { height: 140px; }
@keyframes cx-shimmer { to { background-position: -200% 0; } }
.cx.is-night .cx-sk { background: linear-gradient(100deg, rgba(255, 255, 255, .035) 30%, rgba(255, 255, 255, .065) 50%, rgba(255, 255, 255, .035) 70%) 0 0 / 200% 100%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04); }
@media (prefers-reduced-motion: reduce) { .cx-sk, .cx-sk-grid .cx-sk-cell { animation: none; } .cx-skeleton { animation: none; } }
.cx-error { display: grid; justify-items: start; gap: 12px; max-width: 560px; margin: 40px auto; padding: 20px; border-radius: 16px; background: #fff; border: 1px solid var(--cx-hair); color: var(--cx-ink); }
.cx-error > .tx-ico { color: #b3261e; width: 24px; height: 24px; }
.cx-error p { margin: 0; }
/* Demo banner. */
.cx-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; padding: 9px 12px 9px 14px; border-radius: 12px; background: #fff4d6; border: 1px solid #f1dfa8; color: #6f4f00; font-size: 13px; font-weight: 600; }
.cx-demo > span { flex: 1; min-width: 200px; }
.cx-demo .tx-ico { color: #9a6b00; }
.cx-demo .host-button { min-height: 32px; padding: 4px 12px; border-radius: 9px; border: 1px solid #e5cf8e; background: #fff; color: #6f4f00; }
/* Detail panel. */
.cx-panel { position: sticky; top: var(--cx-bar, 64px); align-self: start; height: calc(100vh - var(--cx-bar, 64px)); box-sizing: border-box; overflow: auto; padding: 18px 20px 40px; border-left: 1px solid var(--cx-hair); background: #fff; box-shadow: -10px 0 30px rgba(23, 48, 42, .07); animation: cx-panel .22s ease; }
@keyframes cx-panel { from { opacity: 0; transform: translateX(14px); } }
.cx-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.cx-panel-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--as-accent) 10%, #fff); color: var(--as-accent); flex: none; }
.cx-panel-head h2 { flex: 1; margin: 0; font-size: 17px; }
.cx-panel-close { display: grid; place-items: center; border: 0; background: #f0f1ec; border-radius: 9px; width: 34px; height: 34px; color: var(--cx-ink); cursor: pointer; }
.cx-panel-close:hover { background: #e6e8e2; }
.cx-status { margin: 0 0 14px; padding: 8px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 650; background: #e7f4ec; color: #1e7a4c; }
.cx-status.is-never, .cx-status.is-expiring { background: #fcf1dc; color: #9a5b00; }
.cx-status.is-expired { background: #f0f1ec; color: var(--cx-muted); }
.cx-facts { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; margin: 0 0 18px; padding: 14px; border-radius: 12px; background: #f8f8f5; font-size: 14px; }
.cx-facts dt { color: var(--cx-muted); }
.cx-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
/* On the globe's dark glass sheet (a transfer opened from the globe): the facts on a light veil, not on white. */
.sh-sheet.is-glass .cx-facts { background: var(--sh-fill); color: var(--sh-ink); }
.sh-sheet.is-glass .cx-facts dt { color: var(--sh-muted); }
/* The same for the travel link, the provider's booking and the change note (Florian 05.10.: white boxes with white text
   in a booking opened on the globe): a light veil on the glass, its ink and hairlines. */
.sh-sheet.is-glass :is(.cx-link-group, .cx-provider, .cx-changed, .cx-status) { background: var(--sh-fill); border-color: var(--sh-hair); color: var(--sh-ink); }
.sh-sheet.is-glass :is(.cx-link-group, .cx-provider, .cx-changed) :is(.cx-muted, .cx-changed-note, h4) { color: var(--sh-muted); }
.sh-sheet.is-glass .cx-link-group .cx-panel-actions .ac-btn.is-danger { border-top-color: var(--sh-hair); }
/* The booking's journey on the glass (Florian 05.10. "Kontrast"): links in the stage's light accent, icons and small lines
   in the readable night tone – the page's green and grey vanish on the dark veil. */
.sh-sheet.is-glass .cx-provider-list li .tx-ico, .sh-sheet.is-glass .cx-provider .cx-link { color: var(--cx-stage-accent, #7fe0c4); }
.sh-sheet.is-glass .cx-provider-list li small, .sh-sheet.is-glass .cx-provider h4 { color: rgba(236, 243, 240, .78); }
/* Over bright satellite ground (the Alps, R663/R664) a white veil and white-at-65 % help text wash out: these boxes take
   a dark veil instead, their small help texts the night-muted tone at a readable strength. */
.sh-sheet.is-glass :is(.cx-link-group, .cx-provider, .cx-changed) { background: color-mix(in srgb, var(--cx-stage, #0b2a24) 62%, transparent); }
.sh-sheet.is-glass :is(.cx-muted, .cx-link-note, .cx-changed-note, [class*="cx-qr"] p, [class*="cx-qr"] small) { color: rgba(236, 243, 240, .84); }
.cx-panel-actions { display: grid; gap: 8px; }
.cx-changed { display: grid; grid-template-columns: auto 1fr; gap: 8px 10px; align-items: start; margin-bottom: 6px; padding: 12px; border-radius: 12px; background: color-mix(in srgb, var(--as-accent) 8%, #fff); border: 1px solid color-mix(in srgb, var(--as-accent) 22%, var(--cx-hair)); font-size: 13.5px; }
.cx-changed > .tx-ico { color: var(--as-accent); margin-top: 1px; }
.cx-changed .host-button, .cx-changed .ac-btn { grid-column: 1 / -1; }
.cx-changed-note { grid-column: 1 / -1; color: var(--cx-muted); font-size: 12px; }
/* The travel link as its own group under the booking's state (copy, send, look, update, withdraw). */
.cx-link-group { margin: 4px 0 16px; padding: 12px; border-radius: 14px; background: color-mix(in srgb, var(--cx-hair) 35%, #fff); }
.cx-link-group .cx-panel-sub { margin: 0 0 8px; }
/* UX-05: two columns that never outgrow the sheet; a long label wraps inside its button instead of running out. */
.cx-link-group .cx-panel-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-link-group .cx-panel-actions .host-button, .cx-link-group .cx-panel-actions .ac-btn { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; padding-block: 8px; height: auto; min-height: var(--ac-h-regular, 34px); }
.cx-link-group .cx-panel-actions .host-button .tx-ico, .cx-link-group .cx-panel-actions .ac-btn .ac-icon { flex: none; }
.cx-travellers { display: grid; gap: 6px; }
.cx-link-group .cx-panel-actions .host-button.primary, .cx-link-group .cx-panel-actions .ac-btn[data-variant="primary"] { grid-column: 1 / -1; }
.cx-link-group .cx-panel-actions .host-button.is-wide, .cx-link-group .cx-panel-actions .ac-btn.is-wide { grid-column: 1 / -1; }
.cx-link-group > .cx-secret-value { width: 100%; box-sizing: border-box; margin: 8px 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
/* Withdrawing stands apart: quiet red words across the group's width, under a hairline (as destructive rows in iOS). */
.cx-link-group .cx-panel-actions .host-button.is-danger, .cx-link-group .cx-panel-actions .ac-btn.is-danger { grid-column: 1 / -1; margin-top: 4px; border: 0; border-top: 1px solid var(--cx-hair); border-radius: 0; background: transparent; box-shadow: none; padding-top: 12px; }
.cx-link-group .cx-panel-actions .host-button.is-danger:hover, .cx-link-group .cx-panel-actions .ac-btn.is-danger:hover { background: rgba(179, 38, 30, .06); border-radius: 10px; }
.cx-link-note { margin: 8px 0 0; font-size: 12px; }
.cx-panel-actions .host-button.is-danger { color: #b3261e; }
.cx-panel-actions .host-button.is-danger .tx-ico { color: #b3261e; }
.cx-why { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cx-why li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: #f6f5f1; border-left: 3px solid var(--as-accent); }
.cx-muted { color: var(--cx-muted); font-size: 12.5px; }
.cx-warn { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fdecea; color: #8a1c12; font-weight: 600; }
.cx-upload { display: grid; gap: 10px; }
.cx-upload textarea { resize: vertical; }
/* Änderung vorbereiten: labelled fields, the live preview, this tab's drafts. */
.cx-change-form .host-button.primary, .cx-change-form .ac-btn[data-variant="primary"] { justify-self: start; }
.cx-change-form .host-button:disabled { opacity: .55; cursor: not-allowed; }
.cx-change-preview { margin-top: 16px; }
.cx-change-preview .tx-block { box-shadow: none; }
.cx-panel-sub { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cx-muted); }
.cx-drafts { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-drafts li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: #f8f8f5; }
.cx-drafts li small { grid-column: 1; color: var(--cx-muted); }
.cx-drafts li .host-button, .cx-drafts li .ac-btn { grid-row: 1 / 3; grid-column: 2; min-height: 32px; padding: 4px 8px; }
.cx-problems { margin: 6px 0 0; padding-left: 18px; color: #8a1c12; }
/* Toast. */
/* Signed out. */
.cx-welcome { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: 28px; max-width: 1040px !important; margin: 36px auto; padding: 34px; border-radius: 22px; background: #fff; border: 1px solid var(--cx-hair); box-shadow: 0 30px 70px -40px rgba(21, 52, 44, .35); }
.cx-welcome-text { display: grid; gap: 14px; justify-items: start; }
.cx-welcome h1 { margin: 0; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; }
.cx-welcome p { margin: 0; color: #45524c; font-size: 15.5px; }
.cx-points { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 9px; }
.cx-points li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.cx-points .tx-ico { flex: none; width: 30px; height: 30px; padding: 6px; box-sizing: border-box; border-radius: 9px; background: color-mix(in srgb, var(--as-accent) 10%, #fff); color: var(--as-accent); }
.cx-welcome-art { border-radius: 18px; background: #dfeae8; overflow: hidden; }
.cx-art { display: block; width: 100%; height: auto; }
.cx-art-route { fill: none; stroke: color-mix(in srgb, var(--as-accent) 45%, #fff); stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; }
.cx-art-route.is-done { stroke: var(--as-accent); stroke-dasharray: none; }
.cx-art-stop { fill: #fff; stroke: var(--as-accent); stroke-width: 3; }
.cx-art-stop.is-end { fill: var(--as-accent); }
.cx-art-halo { fill: color-mix(in srgb, var(--as-accent) 22%, transparent); }
.cx-art-card { fill: #fff; filter: drop-shadow(0 10px 18px rgba(21, 52, 44, .18)); }
.cx-art-badge { fill: color-mix(in srgb, var(--as-accent) 16%, #fff); }
.cx-art-line { fill: #cfd6d2; } .cx-art-line.is-soft { fill: #e3e8e5; }
.cx-art-bar { fill: color-mix(in srgb, var(--as-accent) 45%, #fff); } .cx-art-bar.is-today { fill: var(--as-accent); }
/* Operator hosts: trips.express accent and mark. */
body.is-trips .host-button.primary { background: var(--as-accent); border-color: var(--as-accent); }
body.is-trips .host-brand svg { height: 26px; width: auto; }
@media (max-width: 1000px) {
  .cx, .cx.has-panel { grid-template-columns: minmax(0, 1fr); }
  .cx-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--cx-hair); }
  .cx-brand, .cx-nav-more, .cx-side-foot, .cx-label { display: none; }
  .cx-roles, .cx-nav { display: flex; flex-wrap: nowrap; gap: 4px; overflow-x: auto; }
  .cx-areas { display: contents; }
  .cx-role-btn, .cx-nav button { width: auto; white-space: nowrap; padding: 7px 10px; }
  .cx-role-btn.is-active::after { display: none; }
  .cx-main { padding: 16px 14px 60px; }
  .cx-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cx-head h1 { font-size: 21px; }
  /* R355 C12: in the grid an absolutely placed panel with align-self:start grows with its content – stretch it to the screen so it scrolls. */
  .cx-panel { position: fixed; inset: 0; height: 100dvh; max-height: 100dvh; align-self: stretch; z-index: 30; border-left: 0; overscroll-behavior: contain; }
  .cx-welcome { grid-template-columns: minmax(0, 1fr); padding: 22px; margin: 16px; }
  .cx-welcome-art { display: none; }
  .cx-welcome h1 { font-size: 25px; }
}
@media (max-width: 560px) {
  .cx-head .cx-tools .host-button span { display: none; }
  .cx-role-btn .cx-role-long { display: none; }
  .cx-role-btn .cx-role-short { display: inline; }
  .cx-role-btn { padding: 7px 9px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .cx-cell, .cx-panel, .cx-sk { animation: none; } }
/* The course of one trip in the panel: the live map, compact. */
.cx-panel .tx-livemap { margin-top: 16px; padding: 12px; box-shadow: none; }
.cx-panel .tx-livemap .tx-map-surface { height: 300px; }
.cx-panel .tx-livemap .tx-layers, .cx-panel .tx-livemap .tx-head-sub { display: none; }
/* Second and third level: breadcrumb, page chips. */
.cx-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cx-muted); }
.cx-crumbs button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--as-accent); cursor: pointer; }
.cx-crumbs button:hover { text-decoration: underline; }
.cx-crumb-sep { opacity: .6; }
.cx-crumb-here { color: var(--cx-muted); }
/* The page head on a dark ground (Florian 05.10.: "jeder Text muss sich korrekt visuell anpassen"): the night look, the
   hero band without the globe – also with a dark brand colour such as Atlas' petrol. Date line and breadcrumb in the night
   tokens, its links in the stage accent; the role and page badges as app-controls draws them on the stage
   (.ac-surface-stage: light glass, light tone colours) – the band without the globe never got that surface, so its badges
   stayed dark green on dark petrol. Long titles wrap instead of running out of the band. */
.cx-head h1 { overflow-wrap: anywhere; }
.cx.is-night .cx-head .cx-kicker, .cx.is-night .cx-head .cx-crumbs, .cx.is-night .cx-head .cx-crumb-here { color: var(--cx-night-muted); }
.cx.is-night .cx-head .cx-crumbs button, .cx-head.cx-hero .cx-crumbs button { color: var(--cx-stage-accent); }
.cx.is-night .cx-head h1 { color: var(--cx-night-ink); }
.cx.is-night .cx-head .cx-chips .ac-badge, .cx-head.cx-hero .cx-chips .ac-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.cx.is-night .cx-head .cx-chips .ac-badge[data-tone="ok"], .cx-head.cx-hero .cx-chips .ac-badge[data-tone="ok"] { color: #7ee0a8; }
.cx.is-night .cx-head .cx-chips .ac-badge[data-tone="warn"], .cx-head.cx-hero .cx-chips .ac-badge[data-tone="warn"] { color: #f2c77a; }
.cx.is-night .cx-head .cx-chips .ac-badge[data-tone="danger"], .cx-head.cx-hero .cx-chips .ac-badge[data-tone="danger"] { color: #ffb4c0; }
.cx.is-night .cx-head .cx-chips .ac-badge[data-tone="info"], .cx-head.cx-hero .cx-chips .ac-badge[data-tone="info"] { color: #b8cce0; }
.cx.is-night .cx-head .cx-chips .ac-badge[data-tone="accent"], .cx-head.cx-hero .cx-chips .ac-badge[data-tone="accent"] { background: color-mix(in srgb, var(--bz-accent, #49aecb) 55%, #000); color: #fff; }
/* Global search in the top bar. */
.cx-search { position: relative; flex: 1 1 320px; max-width: 460px; }
.cx-search-field { display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #dcdfd8; border-radius: 10px; background: #f6f5f0; color: var(--cx-muted); }
.cx-search-field:focus-within { background: #fff; border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 14%, transparent); }
.cx-search-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 8px 0; font: inherit; color: var(--cx-ink); }
.cx-search-field kbd { padding: 0 6px; border: 1px solid #dcdfd8; border-radius: 5px; font: 600 11px/18px ui-monospace, monospace; color: var(--cx-muted); background: #fff; }
.cx-search-hits { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; border-radius: 12px; background: #fff; border: 1px solid var(--cx-hair); box-shadow: 0 18px 40px rgba(21, 52, 44, .18); max-height: 60vh; overflow: auto; }
.cx-hit { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: none; text-align: left; font: inherit; color: var(--cx-ink); cursor: pointer; }
.cx-hit:hover, .cx-hit:focus-visible { background: color-mix(in srgb, var(--as-accent) 7%, #fff); outline: none; }
.cx-hit .tx-ico { color: var(--as-accent); }
.cx-hit-text { display: grid; min-width: 0; } .cx-hit-text small { color: var(--cx-muted); font-size: 12px; }
.cx-hit-kind { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--cx-muted); }
.cx-hit-none { padding: 10px; color: var(--cx-muted); }
.cx-hit-none { display: grid; gap: 6px; }
.cx-hit-more { padding: 6px 12px 8px; color: var(--cx-muted); font-size: 12px; animation: cx-in .3s ease both; }
.cx-hit-globe { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 6px 10px; border-radius: 10px; font-weight: 600; }
.cx-hit-globe:hover, .cx-hit-globe:focus-visible { background: color-mix(in srgb, var(--as-accent) 10%, transparent); }
.host-actions { flex: 1; display: flex; justify-content: flex-end; }
/* The assistant beside the search: one pair, the field's height and corners (Florian 05.10.). */
.host-actions:has(> .cx-ask) { align-items: center; }
.host-actions .cx-ask { flex: none; height: 38px; margin: 0 0 0 8px; border-radius: 10px; border: 1px solid #dcdfd8; background: #f6f5f0; color: var(--cx-ink); box-shadow: none; }
.host-actions .cx-ask .ac-icon { color: var(--as-accent); }
.host-actions .cx-ask:hover { background: #fff; }
@media (max-width: 560px) { .host-actions .cx-ask { width: 40px; height: 40px; padding: 0; } }
@media (max-width: 560px) { .cx-search-field kbd { display: none; } .cx-search { flex-basis: 160px; } }
.cx-search-field input::-webkit-search-cancel-button { display: none; }
.cx-search-clear { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--cx-muted); cursor: pointer; }
.cx-search-clear:hover { background: #eceee8; color: var(--cx-ink); }
.cx-search-clear .tx-ico { width: 15px; height: 15px; }
/* Start page: the hero band (§13 step 4). */
.cx-head.cx-hero { align-items: flex-end; padding: 22px 24px 20px; border-radius: 18px; color: #fff; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--as-accent) 55%, #3f9b7f) 0%, transparent 55%), linear-gradient(120deg, color-mix(in srgb, var(--as-accent) 92%, #000), var(--as-accent)); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--as-accent) 90%, #000); }
.cx-hero .cx-kicker { color: rgba(255, 255, 255, .75); }
.cx-hero h1 { color: #fff; font-size: 28px; }
.cx-hero-summary { margin: 4px 0 2px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, .92); max-width: 70ch; }
@media (max-width: 560px) { .cx-head.cx-hero { padding: 16px; border-radius: 14px; } .cx-hero h1 { font-size: 22px; } .cx-hero-summary { font-size: 14.5px; } }
/* Assistant (§16): question bar, boards built by the assistant above the page. */
.cx-ask { display: flex; align-items: center; gap: 10px; margin: -4px auto 16px; padding: 6px 6px 6px 12px; border: 1px solid var(--cx-hair); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(21, 52, 44, .05); }
.cx-ask:focus-within { border-color: var(--as-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 14%, transparent); }
.cx-ask-mark { color: var(--as-accent); display: grid; }
.cx-ask input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; padding: 8px 0; color: var(--cx-ink); }
.cx-ask .host-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; border-radius: 10px; }
.cx-assist { display: grid; gap: 14px; margin-bottom: 16px; }
.cx-board { padding: 14px; border-radius: 18px; background: color-mix(in srgb, var(--as-accent) 5%, #fff); border: 1px solid color-mix(in srgb, var(--as-accent) 25%, var(--cx-hair)); color: var(--cx-ink); }
/* Only a board that is new fades in (Florian 05.10.: every redraw re-ran it for all boards – the answer twitched). */
.cx-board.is-arriving { animation: cx-board-in .36s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes cx-board-in { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx-board.is-arriving { animation: none; } }
.cx-board-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 12px; }
.cx-board-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--as-accent); color: #fff; flex: none; }
.cx-board-text { flex: 1; min-width: 200px; display: grid; }
.cx-board-text b { font-size: 16px; } .cx-board-text small { color: var(--cx-muted); }
.cx-board-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-board-tools .host-button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border-radius: 9px; border: 1px solid #d9ddd5; background: #fff; color: var(--cx-ink); }
.cx-board-tools .host-button:disabled { opacity: .55; cursor: not-allowed; }
.cx-cell.is-focus > * { box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 45%, transparent); transition: box-shadow .3s; }
@media (max-width: 560px) { .cx-ask .host-button span, .cx-ask .ac-btn .ac-label { display: none; } .cx-board { padding: 10px; } }

/* Cockpit assistant (COCKPIT-AI.md §17): a side panel; visual answers land on the dashboard, the chat stays short. */
.cx-ai-fab { position: fixed; right: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--cx-ink); color: #fff; font: inherit; font-weight: 600; box-shadow: 0 6px 20px rgba(21, 52, 44, .22); cursor: pointer; }
.cx-ai-fab svg { color: var(--as-accent); }
.cx-ai-fab:focus-visible { outline: 3px solid color-mix(in srgb, var(--as-accent) 60%, transparent); outline-offset: 2px; }
.cx-ai-open .cx-ai-fab { display: none; }
/* UX-04: over a button or link of the page the assistant button tucks to the edge (a tab); hover or focus shows it whole. */
.cx-ai-fab { transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s; }
.cx-ai-fab.is-tucked { transform: translateX(calc(100% - 22px)); box-shadow: 0 2px 10px rgba(21, 52, 44, .18); }
.cx-ai-fab.is-tucked:hover, .cx-ai-fab.is-tucked:focus-visible { transform: none; }
@media (prefers-reduced-motion: reduce) { .cx-ai-fab { transition: none; } }
.has-ai-fab .cx-main { padding-bottom: 104px; }
.cx-ai-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 45; display: flex; flex-direction: column; width: min(400px, 100vw); background: var(--cx-card); border-left: 1px solid var(--cx-hair); box-shadow: -12px 0 32px rgba(21, 52, 44, .12); }
.cx-ai-panel[hidden] { display: none; }
.cx-ai-head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid var(--cx-hair); }
.cx-ai-sub { grid-column: 1; font-size: 12.5px; color: var(--cx-muted); }
.cx-ai-close { grid-row: 1 / span 2; grid-column: 3; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--cx-ink); font-size: 22px; line-height: 1; cursor: pointer; }
.cx-ai-close:hover { background: color-mix(in srgb, var(--cx-ink) 6%, transparent); }
/* The widget lays itself out as a flex column (:host); page styles win over :host, so keep that here (R163 C43). */
.cx-ai-widget { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
/* The assistant in the cockpit's own look (Florian 30.09.: no blue bubbles, no foreign greys): its --as-* tokens from
   the cockpit – accent of the operator, ink/muted/hair, the cards' radii. Page rules win over the widget's :host defaults. */
.cx-ai-panel { --cx-ai-accent: var(--as-accent, #1f5f55); }
.cx-ai-widget { --as-accent: var(--cx-ai-accent); --as-on-accent: #fff; --as-bg: var(--cx-card, #fff); --as-fg: var(--cx-ink); --as-muted: var(--cx-muted);
  --as-border: var(--cx-hair); --as-hair: var(--cx-hair); --as-radius: 14px; --as-radius-chip: 999px;
  --as-step-reasoning: var(--cx-muted); --as-step-running: var(--cx-ai-accent); --as-step-done: #1e7a4c; --as-step-error: #b3261e; }
.cx-ai-error { margin: 16px; color: var(--bz-danger, #b3261e); }
@media (min-width: 1200px) { .cx-ai-open .cx-main { margin-right: 400px; } }
/* Pinned boards (§19): calmer than a fresh answer, marked by the pin. */
.cx-board.is-pinned { background: var(--cx-card); border-color: var(--cx-hair); animation: none; }
.cx-board.is-pinned .cx-board-mark { color: var(--as-accent); }
.cx-board-tools .host-button[aria-pressed="true"], .cx-board-tools .ac-btn[aria-pressed="true"] { border-color: color-mix(in srgb, var(--as-accent) 55%, #d9ddd5); background: color-mix(in srgb, var(--as-accent) 10%, #fff); }
.cx-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
/* ── Hero globe: half a globe at the band's right edge, in a night sky; expanded the whole window ── */
.cx-head.cx-hero.has-globe { position: relative; overflow: hidden; isolation: isolate; min-height: 340px; align-items: flex-end;
  background: radial-gradient(90% 120% at 100% 50%, #0d2a2e 0%, #081a1c 45%, #06110f 100%); }
.cx-head.cx-hero.has-globe > :not(.cx-hero-globe) { position: relative; z-index: 2; }
.cx-head.cx-hero.has-globe::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--cx-dither), linear-gradient(90deg in oklab, rgba(6, 17, 15, .92) 0%, rgba(6, 17, 15, .82) 14%, rgba(6, 17, 15, .68) 28%, rgba(6, 17, 15, .45) 38%,
    rgba(6, 17, 15, .22) 47%, rgba(6, 17, 15, .07) 54%, rgba(6, 17, 15, 0) 60%); background-size: 160px 160px, auto; }
.cx-hero-globe, .cx-hero-globe.maplibregl-map { position: absolute; inset: 0; z-index: 0; cursor: zoom-in; overflow: hidden;
  background: radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.7), transparent 60%), radial-gradient(1px 1px at 38% 78%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 64% 14%, rgba(255,255,255,.8), transparent 60%), radial-gradient(1px 1px at 82% 88%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 52% 42%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1.2px 1.2px at 24% 58%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 92% 34%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 72% 62%, rgba(255,255,255,.45), transparent 60%);
  }
/* No entrance animation on the stage box itself (Florian 02.10.: the globe shrank and grew on every expand/collapse):
   the box is moved into the body and back, and every move or class change restarted it. A new stage comes in with
   .is-new (cx-stage-in, below); the band ↔ full screen transition is the script's clip-path morph alone. */
.cx-hero-globe.is-full, .cx-hero-globe.is-full.maplibregl-map { position: fixed; inset: 0; z-index: 80; cursor: default; animation: none;
  background-color: #06110f; }
body.cx-globe-open { overflow: hidden; }
.cx-globe-panel { position: fixed; top: 16px; left: 16px; bottom: 16px; z-index: 81; width: min(340px, calc(100vw - 32px)); overflow: auto; padding: 18px;
  animation: cx-panel-in .4s .1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cx-panel-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.cx-globe-panel h2 { margin: 2px 0 10px; font-size: 22px; color: #fff; }
.cx-globe-panel .cx-kicker { color: rgba(255, 255, 255, .65); }
.cx-globe-panel h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.cx-globe-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-globe-row { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; width: 100%; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; color: #fff; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.cx-globe-row:hover, .cx-globe-row:focus-visible { background: rgba(255, 255, 255, .1); outline: none; }
.cx-globe-row.is-static { cursor: default; }
.cx-globe-row.is-static:hover { background: transparent; }
.cx-globe-row .tx-ico { width: 16px; height: 16px; color: #9fe0cf; margin-top: 1px; }
.cx-globe-row.tone-soon .tx-ico { color: #f0b54a; }
.cx-globe-row.tone-urgent .tx-ico { color: #ff7a6e; }
.cx-globe-row small { grid-column: 2; color: rgba(255, 255, 255, .62); font-size: 12px; }
.cx-globe-detail:not(:empty) { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 13.5px; }
.cx-globe-detail p { margin: 4px 0 0; color: rgba(255, 255, 255, .8); }
.cx-globe-detail .cx-globe-hot { color: #ffb0a8; }
/* The globe's sheet in light (Florian 07.10., phone test: white on paper was invisible): paper (.is-paper, the app
   sheet's own tokens) – ink for titles, rows and fields, muted for kickers and hints, the paper fills for tiles. */
.cx-globe-panel.is-paper h2 { color: var(--cx-ink); }
.cx-globe-panel.is-paper :is(.cx-kicker, h3, .cx-globe-row small, .cx-globe-note, .cx-gs-head, .cx-gs-words small, .cx-gs-credit, .cx-gs-pending, .cx-gs-empty, .cx-globe-group summary, .cx-gs-glass, .cx-gs-badge.is-muted) { color: var(--cx-muted); }
.cx-globe-panel.is-paper :is(.cx-globe-row, .cx-gs-row, .cx-globe-back, .cx-globe-detail p) { color: var(--cx-ink); }
.cx-globe-panel.is-paper :is(.cx-globe-row:hover, .cx-globe-row:focus-visible, .cx-gs-row:hover, .cx-globe-back:hover, .cx-globe-back:focus-visible) { background: var(--sh-fill-hover); }
.cx-globe-panel.is-paper :is(.cx-globe-detail:not(:empty), .cx-gs-tile, .cx-gs-badge:not(.is-live, .is-soon, .is-warn, .is-muted), .cx-gs-clear) { background: var(--sh-fill); color: var(--cx-ink); }
.cx-globe-panel.is-paper .cx-globe-detail .cx-globe-hot, .cx-globe-panel.is-paper .cx-gs-badge.is-warn { color: var(--bz-danger-ink, #8f2a3e); }
.cx-globe-panel.is-paper .cx-gs-badge.is-soon { color: var(--bz-warn-ink, #7a5208); }
.cx-globe-panel.is-paper .cx-gs-badge.is-live { color: var(--as-accent, #1f5f55); }
.cx-globe-panel.is-paper :is(.cx-globe-search, .cx-globe-search-top) { background: var(--cx-card, #fff); border-color: var(--cx-hair); color: var(--cx-ink); }
.cx-globe-panel.is-paper :is(.cx-globe-search, .cx-globe-search-top)::placeholder { color: var(--cx-muted); }
.cx-globe-panel .host-button.primary, .cx-globe-panel .ac-btn[data-variant="primary"] { margin-top: 16px; width: 100%; justify-content: center; }
/* Placement only – the button itself is app-controls mapTool (tone dark). */
.cx-globe-close { position: fixed; top: 16px; right: 16px; z-index: 82; }
.cx-hero-globe.is-full .maplibregl-ctrl-top-right { top: 64px; }
/* The globe's layers (Florian 05.10.): a row of dark map tools at the top right, beside the close (the time machine's
   slider holds the right edge below the zoom). */
.cx-globe-rail { position: fixed; left: 372px; top: 68px; z-index: 82; display: flex; gap: 8px; }
/* One place for the layers (Florian 07.10.): „Ebenen“ and ⋯ at the top left of the map, under the top bar (clear of the
   search); top right only „Globus | Zusammenhänge“ beside the ×. */
.cx-globe-modeslot { position: fixed; top: 16px; right: 72px; z-index: 82; }
.cx-globe-modeslot[hidden] { display: none; }
@media (max-width: 640px) { .cx-globe-modeslot { display: none; } }
.cx-hero-globe.is-full .cx-globe-modeslot { animation: cx-chrome-fade .4s .62s cubic-bezier(.32, .72, 0, 1) both; }
.cx-hero-globe.is-leaving .cx-globe-modeslot, .cx-hero-globe.is-flying .cx-globe-modeslot { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .cx-hero-globe.is-full .cx-globe-modeslot { animation: none; } }
/* „Globus | Zusammenhänge“ (Florian 06.10.): placement only – the switch is app-controls segmented (floating). Top centre
   of the band; full screen fixed at the top centre between the sheet and the layer row. */
/* Centred without transform: the full screen's fade-in animates transform (scale) and would drop a translate. */
.cx-hero-mode[hidden] { display: none; }
/* With the layer row (top right, full screen): right under its tools, right-aligned – the globe's search keeps the top
   centre, the map's zoom its corner. */
.cx-globe-rail { position: fixed; }
.cx-globe-modeslot > .cx-hero-mode { position: static; width: max-content; }
/* heroBackdrop (KARTEN-STUDIO, stage 1): placement only. The picture covers the band's globe (not the page's head over it);
   its globe switch top right of the band; the full screen is always the globe. */
.cx-hero-globe > .ac-hero-backdrop { position: absolute; inset: 0; z-index: 1; }
/* A tool page's hero band (Dokumente, Auswertungen – Hero Etappe 4): placement only; the band's colour and pattern are
   heroBackdrop's (fill), the chip and breadcrumb its head. */
.cx-tool-band { position: relative; display: flex; align-items: flex-end; min-height: 112px; margin: 0 0 16px; padding: 16px 20px; border-radius: var(--bz-r4, 16px); overflow: hidden; }
.cx-tool-band > .ac-hero-backdrop { position: absolute; inset: 0; }
.cx-tool-band > .ac-hero-head { position: relative; z-index: 1; }
/* Light: paper with a breath of the product colour, the pattern faint, dark ink for chip and breadcrumb. */
.cx-tool-band.is-light { border: 1px solid var(--bz-hair, rgba(25, 28, 40, .09)); }
.cx-tool-band.is-light > .ac-hero-backdrop { background: color-mix(in srgb, var(--bz-accent-trips, var(--bz-accent, #1f5f55)) 9%, var(--bz-card, #fff)); }
.cx-tool-band.is-light .ac-hero-fill { opacity: .22; }
.cx-tool-band.is-light .ac-hero-scrim { display: none; }
.cx-tool-band.is-light .ac-hero-head { color: var(--bz-text, #1b1e27); }
.cx-tool-band.is-light .ac-hero-crumbs { color: color-mix(in srgb, var(--bz-text, #1b1e27) 75%, transparent); }
.cx-tool-band.is-light .ac-hero-crumb[aria-current="page"] { color: var(--bz-text, #1b1e27); }
.cx-tool-band.is-light .ac-hero-level { background: color-mix(in srgb, var(--ac-level) 14%, #fff); color: var(--bz-text, #1b1e27); }
.cx-tool-band.is-light .ac-hero-level .ac-icon { color: color-mix(in srgb, var(--ac-level) 70%, #000); }
@media (max-width: 640px) { .cx-tool-band { min-height: 88px; padding: 12px 16px; margin-bottom: 12px; } }
/* The level chip under the band's „Globus | Zusammenhänge“ (TESTING 390 px: chip top 312 under the segment's 335). */
/* Phone: the page's head starts under the band's „Globus | Zusammenhänge“ whenever the segment shows – with the level
   chip or without (Offen, Weltlage …; Florian 07.10.: the segment lay over the date). */
.cx-hero-globe > .cx-hero-picture { position: absolute; top: 12px; right: 16px; z-index: 6; }
.cx-hero-globe.is-full > .ac-hero-backdrop, .cx-hero-globe.is-full > .cx-hero-picture { display: none; }
/* graphStage's parts (KARTEN-STUDIO stage.ts) over the map: tools under the switch (full screen only), legend bottom
   right, status bottom left. Placement only – the parts are app-controls. */
.cx-gx { position: absolute; z-index: 5; }
.cx-gx[hidden] { display: none; }
/* Full screen (desktop): everything in the free room right of the sheet (16 + 340 + 16 px) – switch, tools beneath it,
   status at the bottom; the legend bottom right under the time machine's rail. Phone: switch and tools centred, status
   over the sheet's head. */
.cx-hero-globe.is-full .cx-gx-tools { position: fixed; top: 68px; left: 372px; right: auto; z-index: 82; } /* right: clear of the map's zoom controls */
.cx-hero-globe.is-graph .cx-tm { display: none; }
.cx-hero-globe.is-full .cx-gx-status { position: fixed; left: 372px; right: 140px; bottom: 16px; max-width: 34rem; z-index: 82; }
.cx-hero-globe.is-full .cx-gx-legend { position: fixed; right: 16px; bottom: 16px; z-index: 82; }
@media (max-width: 640px) {
  .cx-hero-globe.is-full .cx-gx-tools { top: 124px; left: 16px; right: 16px; display: flex; justify-content: center; }
  .cx-hero-globe.is-full .cx-gx-status { left: 16px; right: 16px; bottom: calc(var(--sheet-h, 0px) + 12px); max-width: none; }
  /* The legend under the tools, top right – never over the status line (TESTING 07.10.: y 339 vs 358). */
  .cx-hero-globe.is-full .cx-gx-legend { top: 172px; bottom: auto; right: 16px; }
  .cx-hero-globe.is-full .cx-gx-legend .gx-legend { flex-direction: column-reverse; align-items: flex-end; }
}
.cx-hero-mode[aria-busy] { cursor: progress; }
@media (min-width: 641px) { .cx-globe-panel .cx-railed { display: none; } }
/* Phone: the sheet keeps the layer list; in Zusammenhänge the „Ebenen“ menu (the stage's Linien and Ansicht) under the top. */
@media (max-width: 640px) {
  .cx-globe-rail { display: none; }
  .cx-hero-globe.is-graph .cx-globe-rail:not([hidden]) { display: flex; top: 124px; left: 16px; }
  .cx-globe-rail > .ac-menu-wrap + .ac-menu-wrap { display: none; }
}
/* The search on the globe (Florian 05.10.): top centre while the globe is open, its suggestions drop below it. */
.cx-globe-topsearch { position: fixed; top: 16px; left: 372px; right: 380px; z-index: 83; max-width: 520px; margin-inline: auto; }
.cx-hero-globe:not(.is-full) > .cx-globe-topsearch, .cx-hero-globe.is-leaving > .cx-globe-topsearch, .cx-hero-globe.is-flying > .cx-globe-topsearch { display: none; }
.cx-hero-globe.is-full > .cx-globe-topsearch { animation: cx-chrome-fade .4s .62s cubic-bezier(.32, .72, 0, 1) both; }
@media (max-width: 1100px) { .cx-globe-topsearch { display: none; } }
@media (prefers-reduced-motion: reduce) { .cx-hero-globe.is-full > .cx-globe-topsearch { animation: none; } }
.cx-hero-globe.is-full .cx-globe-rail { animation: cx-chrome-fade .4s .62s cubic-bezier(.32, .72, 0, 1) both; }
.cx-hero-globe.is-leaving .cx-globe-rail, .cx-hero-globe.is-flying .cx-globe-rail { opacity: 0; transition: opacity .2s ease; }
@media (prefers-reduced-motion: reduce) { .cx-hero-globe.is-full .cx-globe-rail { animation: none; } }
@media (max-width: 640px) {
  .cx-head.cx-hero.has-globe { min-height: 420px; }
  .cx-head.cx-hero.has-globe::before { background: linear-gradient(200deg, rgba(6, 17, 15, .15) 0%, rgba(6, 17, 15, .6) 40%, rgba(6, 17, 15, .88) 70%); }
  .cx-head.cx-hero.has-globe h1, .cx-head.cx-hero.has-globe .cx-hero-summary { text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
  .cx-globe-panel { top: auto; height: 46vh; left: 8px; right: 8px; bottom: 8px; width: auto; }
  .cx-hero-globe:not(.is-full) .maplibregl-marker { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) { .cx-hero-globe, .cx-hero-globe.is-full, .cx-globe-panel { animation: none; } }
/* Band ↔ full screen (Florian 29.09., in the manner of Apple): the window opens from the band (clip-path, animated in
   the script), the page's parts sink away one after another, the full screen's parts come in after the glide. */
.cx-hero-globe.is-full.is-arriving, .cx-hero-globe.is-full.is-leaving { animation: none; }
/* First the page makes room: the bar goes up, the sidebar left, heading and cards sink (all within ~0.25 s); while it
   does, the globe stays in its band under the page's words (.is-under), then rises and opens. Back: the globe first,
   then the page returns (the cards a little after one another). */
html { scrollbar-gutter: stable; }
.cx-main > :not(.cx-hero-globe), .cx-main .cx-grid > .cx-cell, .cx-side, body > .host-bar, #app > .cx-notice { transition: opacity .26s cubic-bezier(.32, .72, 0, 1), transform .34s cubic-bezier(.32, .72, 0, 1); }
body:not(.cx-globe-open) .cx-main .cx-grid > .cx-cell { transition-delay: calc(.08s + min(var(--i, 0), 8) * 30ms); }
body:not(.cx-globe-open) .cx-side, body:not(.cx-globe-open) > .host-bar { transition-delay: .04s; }
body.cx-globe-open .cx-main > :not(.cx-hero-globe):not(.cx-grid) { opacity: 0; transform: translateY(16px); }
body.cx-globe-open .cx-main .cx-grid > .cx-cell { opacity: 0; transform: translateY(36px) scale(.975); transition-delay: calc(min(var(--i, 0), 8) * 12ms); }
body.cx-globe-open .cx-side { opacity: 0; transform: translateX(-28px); }
body.cx-globe-open > .host-bar, body.cx-globe-open #app > .cx-notice { opacity: 0; transform: translateY(-100%); }
@keyframes cx-chrome-down { from { opacity: 0; transform: translate(var(--tx, 0), -14px); } to { opacity: 1; transform: translate(var(--tx, 0), 0); } }
@keyframes cx-chrome-up { from { opacity: 0; transform: translate(var(--tx, 0), 14px); } to { opacity: 1; transform: translate(var(--tx, 0), 0); } }
@keyframes cx-chrome-side { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes cx-chrome-fade { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.cx-hero-globe.is-full .cx-globe-close { animation: cx-chrome-fade .4s .56s cubic-bezier(.32, .72, 0, 1) both; }
.cx-hero-globe.is-full .maplibregl-ctrl-top-right { animation: cx-chrome-fade .4s .62s cubic-bezier(.32, .72, 0, 1) both; }
.cx-hero-globe.is-full .cx-tm-rail { animation: cx-chrome-side .5s .6s cubic-bezier(.32, .72, 0, 1) both; }
/* A button that leaves the globe carries a quiet mark after its words (the globe glides back first). */
.cx-leave-mark { display: inline-grid; place-items: center; margin-left: 2px; opacity: .55; }
.cx-leave-mark .tx-ico { width: 12px; height: 12px; }
.is-leaving-globe:hover .cx-leave-mark, .is-leaving-globe:focus-visible .cx-leave-mark { opacity: .9; transform: translateX(2px); transition: transform .18s ease, opacity .18s ease; }
.cx-hero-globe.is-leaving .cx-globe-panel, .cx-hero-globe.is-leaving .cx-globe-close, .cx-hero-globe.is-leaving .cx-tm, .cx-hero-globe.is-leaving .maplibregl-ctrl-top-right { opacity: 0; transition: opacity .2s ease; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cx-main > :not(.cx-hero-globe), .cx-main .cx-grid > .cx-cell, .cx-side, body > .host-bar, #app > .cx-notice { transition: none; }
  .cx-hero-globe.is-full .cx-globe-close, .cx-hero-globe.is-full .maplibregl-ctrl-top-right, .cx-hero-globe.is-full .cx-tm-rail { animation: none; }
}
.cx-hero-map, .cx-hero-map.maplibregl-map { position: absolute; inset: 0; }
@media (min-width: 641px) { .cx-hero-globe.is-full .maplibregl-ctrl-bottom-right { max-width: calc(100vw - 390px); } }
.cx-hero-globe .viewer-wind { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cx-globe-layers { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cx-globe-layers h3 { flex-basis: 100%; }
.cx-hero-globe:not(.is-full) .maplibregl-ctrl-bottom-right { max-width: 48%; }
/* A trip in the panel: the way back to the world, the trips of a place to choose from. */
.cx-globe-back { display: inline-block; margin: 0 0 10px; padding: 4px 0; border: 0; background: none; color: rgba(255, 255, 255, .86); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cx-globe-back:hover, .cx-globe-back:focus-visible { color: #fff; text-decoration: underline; }
.cx-globe-trips { display: grid; gap: 2px; margin-top: 10px; }
.cx-globe-trips .cx-globe-note { margin: 0 0 4px; }
.cx-globe-note { margin: 12px 0 0; font-size: 12px; line-height: 1.45; color: rgba(255, 255, 255, .62); }

/* Message preview: a phone with the push notice on top and the companion's Notice (or its simplified stand-in). */
.cx-phone { margin: 18px auto 6px; width: min(300px, 100%); padding: 14px 12px 12px; border-radius: 30px; background: #1d2622; box-shadow: 0 16px 40px -18px rgba(0, 0, 0, .45); }
.cx-phone-push { display: grid; gap: 2px; margin: 0 0 10px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, .92); color: var(--cx-ink); font-size: 12.5px; }
.cx-phone-push small { color: #68766f; font-size: 12px; }
.cx-phone-push span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cx-phone-screen { min-height: 150px; max-height: 360px; overflow: auto; padding: 12px; border-radius: 18px; background: #f6f5f0; color: var(--cx-ink); }
.cx-phone figcaption { margin-top: 8px; color: #c9d1cc; font-size: 12px; text-align: center; }
.cx-notice { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #fff; border-left: 4px solid var(--bz-accent); font-size: 15px; }
.cx-notice.is-change { border-left-color: #c07a17; } .cx-notice.is-urgent { border-left-color: #b3261e; }
.cx-notice small { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 12px; color: #68766f; }
.cx-notice p { margin: 0; white-space: pre-line; }
/* Brand mask: live preview of the app's head, contrast hint, feature switches. */
.cx-brand-preview { margin: 0 0 16px; border-radius: 14px; overflow: hidden; border: 1px solid #e3e6df; background: #fff; }
.cx-brand-bar { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 14px; color: #fff; }
.cx-brand-bar img { max-height: 30px; max-width: 90px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px; }
.cx-brand-body { display: grid; gap: 8px; justify-items: start; padding: 14px; }
.cx-brand-body p { margin: 0; font-weight: 600; }
.cx-brand-button { padding: 8px 14px; border-radius: 10px; color: #fff; font-weight: 700; font-size: 14px; }
.cx-brand-link { font-weight: 600; text-decoration: underline; }
.cx-hint { color: var(--cx-muted); font-weight: 400; }
.cx-hint.is-warn { color: #8a5a00; }
.cx-upload input[type="color"] { width: 64px; height: 38px; padding: 3px; }
.cx-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 12px; margin: 4px 0; padding: 10px 12px; border: 1px solid #e3e6df; border-radius: 10px; }
.cx-features legend { padding: 0 4px; font-size: 13px; font-weight: 600; color: var(--cx-muted); }
/* Panel forms stay inside the panel (R323 C3): long option texts must not widen the grid past its edge. */
.cx-upload, .ac-field { min-width: 0; }
.cx-upload input, .cx-upload select, .cx-upload textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.cx-upload input[type="color"] { width: 64px; }
.cx-upload select { text-overflow: ellipsis; }
.cx-panel > * { max-width: 100%; }
/* On phones the floating assistant button must not cover the panel's last content (R323). */
@media (max-width: 1000px) { .cx-panel { padding-bottom: 104px; } }

/* A secret shown once: monospace, one row with show/copy, the acknowledgement below. */
.cx-secret { display: grid; gap: 12px; }
.cx-secret-row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.cx-secret-value { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid #d9ddd5; border-radius: 10px; font: 500 14px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; background: #f8f8f5; }
.cx-secret .host-button:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 560px) { .cx-secret-row { flex-wrap: wrap; } .cx-secret-value { flex-basis: 100%; } }
.cx-brand-logo-note { padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .85); color: var(--cx-ink); font-size: 12px; }
/* Data source detail: rights by risk, the marked tier-B preview. */
.cx-rights { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 6px; }
.cx-rights li { padding: 7px 10px 7px 12px; border-radius: 9px; background: #f8f8f5; border-left: 3px solid #1e7a4c; font-size: 13.5px; }
.cx-rights li.is-med { border-left-color: #c07a17; } .cx-rights li.is-high { border-left-color: #b3261e; }
.cx-source-preview { display: grid; gap: 8px; padding: 12px; border-radius: 12px; border: 2px dashed #d9a441; background: #fffaf0; }
.cx-source-preview-mark { margin: 0; font-weight: 700; color: #8a5a00; }
.cx-source-preview details { border-top: 1px solid #efe3c8; padding-top: 6px; }
.cx-source-preview summary { cursor: pointer; font-weight: 600; }
.cx-source-preview details p { margin: 2px 0 6px; }
/* Travel advice (AA) as in the travel app: complete, collapsible, with source and date. */
.cx-advice { display: grid; gap: 8px; padding: 12px; border: 1px solid #e3e6df; border-radius: 12px; background: #fff; font-size: 14px; }
.cx-advice details { border-top: 1px solid #eef0eb; padding-top: 6px; }
.cx-advice summary { cursor: pointer; font-weight: 600; }
.cx-advice h4, .cx-advice h5 { margin: 10px 0 4px; font-size: 14px; }
.cx-advice p { margin: 4px 0; }
.cx-advice-level { justify-self: start; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: #eef0eb; }
.cx-advice-level.is-1, .cx-advice-level.is-2 { background: #fff4d6; color: #6f4f00; } .cx-advice-level.is-3 { background: #fbe4e2; color: #8d1d17; }
.cx-advice-disclaimer summary { font-weight: 500; color: var(--cx-muted); }
.cx-contract { margin-bottom: 8px; }
.cx-contract-fields { display: grid; gap: 10px; }
.cx-credits { margin: 18px 2px 0; color: var(--cx-muted); font-size: 12px; }
@media (max-width: 1000px) { body.cx-panel-open { overflow: hidden; } }
.cx-map-panel { position: relative; height: min(62vh, 520px); margin: 10px 0 8px; border-radius: 12px; overflow: hidden; border: 1px solid var(--cx-hair); }
.cx-osm { font-size: 12.5px; color: var(--cx-muted); }
/* Places for the travellers: big kind buttons, a map to set the point, the app preview (phone on the road). */
.cx-field-label { font-size: 13px; font-weight: 600; color: var(--cx-muted); }
.cx-poi-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cx-poi-kind { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border: 1.5px solid #d9ddd5; border-radius: 12px; background: #fff; font: 600 14px/1.2 inherit; text-align: left; cursor: pointer; }
.cx-poi-kind.is-on { border-color: var(--as-accent); background: color-mix(in srgb, var(--as-accent) 8%, #fff); box-shadow: inset 0 0 0 1px var(--as-accent); }
.cx-poi-kind:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
.cx-poi-kind .tc-poi-pin { width: 30px; height: 30px; font-size: 15px; border-width: 2px; flex: none; cursor: inherit; }
.cx-poi-map { position: relative; height: 260px; border-radius: 12px; overflow: hidden; border: 1px solid #e3e6df; }
.cx-poi-where { display: grid; grid-template-columns: auto 1fr; gap: 8px; }
.cx-poi-where .host-button { min-height: 44px; }
.cx-poi-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-poi-hits .host-button { width: 100%; justify-content: flex-start; min-height: 44px; }
.cx-poi-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cx-poi-preview { display: grid; gap: 6px; padding: 10px; border-radius: 14px; background: #f6f5f0; }
.cx-poi-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cx-poi-card p { margin: 4px 0 0; white-space: pre-line; }
.cx-poi-nav { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--as-accent); }
.cx-big { min-height: 48px; font-size: 15px; }
.cx-poi-form input, .cx-poi-form select, .cx-poi-form textarea { min-height: 44px; font-size: 16px; }
.cx-calls { display: grid; gap: 8px; justify-items: start; }
.cx-list { margin: 6px 0 0; padding-left: 18px; }
/* The globe in every page's head: a lower band beside the start page's; the path reads on the night sky. */
.cx-head.cx-hero.has-globe.is-slim { min-height: 230px; }
@media (max-width: 640px) { .cx-head.cx-hero.has-globe.is-slim { min-height: 300px; } }
.cx-main.has-results.has-stage > .cx-head.cx-hero.on-stage.is-slim { min-height: 290px; padding-bottom: 72px; }
.cx-main.has-results .cx-hero-globe.cx-stage:not(.is-full) { height: 390px; }
@media (max-width: 640px) {
  .cx-main.has-results.has-stage > .cx-head.cx-hero.on-stage.is-slim { min-height: 300px; padding-bottom: 24px; }
  .cx-main.has-results .cx-hero-globe.cx-stage:not(.is-full) { height: 420px; }
}
.cx-hero .cx-crumbs, .cx-hero .cx-crumb-here { color: rgba(255, 255, 255, .75); }
.cx-hero .cx-crumbs button { color: #9fe0cf; }
/* ── The globe as the page's stage: behind the head over the page's full width, fading into the paper under the
   cards (Florian's reference: text left, figures right, the cards laid over the globe's lower part). ── */
/* Themed per operator: the night takes the brand's accent (applyBrand sets --as-accent), text and figures stay light. */
:root { --cx-stage: color-mix(in srgb, #44515a 45%, #020605); --cx-space: #000; --cx-stage-ink: #fff; --cx-stage-muted: rgba(255, 255, 255, .72); --cx-stage-accent: #7fe0c4;
  /* The glass on the globe is app-controls .ac-glass, tinted from --bz-stage (set with --cx-stage by the theme). */
  }
.cx-main { position: relative; isolation: isolate; }
.cx-main > .cx-stage { max-width: none; margin: 0; }
/* The space behind the globe is black (Florian 02.10.: the globe stands out, the call to open it with it); the
   operator's stage tone stays in the veil under the words and the page around. */
.cx-hero-globe.cx-stage:not(.is-full) { position: absolute; inset: 0 0 auto 0; height: var(--cx-stage-h, 560px); z-index: 0; cursor: zoom-in; background-color: var(--cx-space); animation: none; }
/* Fades in once, on its first page – never again when a page change moves it (Florian). */
.cx-hero-globe.cx-stage.is-new:not(.is-full) { animation: cx-stage-in .9s ease both; }
@keyframes cx-stage-in { from { opacity: 0; } to { opacity: 1; } }
.cx-hero-globe.cx-stage[hidden] { display: none; }
/* The veil that keeps the words readable over the globe. On the near-black green 8 bits a channel are too few: a plain
   gradient fell into bands 100+ px wide whose edges read as faint vertical shadows (Florian 30.09.). Hence more stops
   on an eased curve, mixed in OKLab, and a barely visible grain (an inline SVG, CSP img-src data:) that dissolves the
   steps' edges – dithering. */
:root { --cx-dither: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cx-stage:not(.is-full)::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--cx-dither), linear-gradient(90deg in oklab, color-mix(in oklab, var(--cx-stage) 88%, transparent) 0%, color-mix(in oklab, var(--cx-stage) 78%, transparent) 12%,
    color-mix(in oklab, var(--cx-stage) 62%, transparent) 24%, color-mix(in oklab, var(--cx-stage) 44%, transparent) 33%, color-mix(in oklab, var(--cx-stage) 26%, transparent) 41%,
    color-mix(in oklab, var(--cx-stage) 11%, transparent) 48%, color-mix(in oklab, var(--cx-stage) 3%, transparent) 54%, color-mix(in oklab, var(--cx-stage) 0%, transparent) 60%);
  background-size: 160px 160px, auto; }
.cx-stage:not(.is-full)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--cx-paper) 92%); }
/* Back in the band the veils come in softly with the page (they appeared at once after the glide – Florian 03.10.:
   the green edges round the band read like a fault). */
@keyframes cx-veil-in { from { opacity: 0; } to { opacity: 1; } }
.cx-stage:not(.is-full)::before, .cx-stage:not(.is-full)::after { animation: cx-veil-in .5s cubic-bezier(.32, .72, 0, 1) both; }
@media (prefers-reduced-motion: reduce) { .cx-stage:not(.is-full)::before, .cx-stage:not(.is-full)::after { animation: none; } }
.cx-main.has-stage > :not(.cx-stage) { position: relative; z-index: 1; }
.cx-main.has-stage > .cx-head.cx-hero.on-stage { background: none; border: 0; box-shadow: none; border-radius: 0; min-height: 400px; padding: 36px 4px 56px; margin-bottom: 0; color: var(--cx-stage-ink);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: start; gap: 14px 24px; pointer-events: none; }
.cx-head.on-stage > * { pointer-events: auto; }
.cx-head.on-stage .cx-head-text { grid-column: 1; grid-row: 1; max-width: 52ch; }
.cx-head.on-stage h1 { font-size: 34px; text-shadow: 0 1px 14px rgba(0, 0, 0, .55); }
/* Erscheinungsbild „Hell“: the words on paper need no shadow (the stage's tones come from the theme, --cx-stage-*). */
/* Every word in the head on the stage from the stage tokens (night or paper), never a fixed white (Florian 07.10.:
   the breadcrumb was white on the light stage). */
.cx-head.cx-hero.on-stage :is(h1, .cx-hero-summary) { color: var(--cx-stage-ink); }
.cx-head.cx-hero.on-stage :is(.cx-kicker, .cx-crumbs, .cx-crumb-here) { color: var(--cx-stage-muted); }
.cx-head.cx-hero.on-stage .cx-crumbs button { color: var(--cx-stage-accent); }
:root[data-appearance="light"] .cx-head.on-stage h1 { text-shadow: none; }
:root[data-appearance="light"] .cx-head.on-stage .cx-chips .ac-badge { background: color-mix(in srgb, var(--bz-accent) 10%, #ffffff); color: var(--bz-accent-ink, var(--cx-stage-ink)); }
.cx-head.on-stage .cx-tools { grid-column: 1; grid-row: 2; align-self: end; }
@media (max-width: 640px) {
  .cx-hero-globe.cx-stage:not(.is-full) { height: var(--cx-stage-h, 520px); }
  .cx-main.has-stage > .cx-head.cx-hero.on-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 380px; padding: 24px 0 56px; }
  .cx-head.on-stage .cx-tools { grid-row: 3; }
  .cx-head.on-stage h1 { font-size: 26px; }
  .cx-stage:not(.is-full)::before { background: linear-gradient(180deg, color-mix(in srgb, var(--cx-stage) 75%, transparent) 0%, color-mix(in srgb, var(--cx-stage) 35%, transparent) 45%, color-mix(in srgb, var(--cx-stage) 0%, transparent) 70%); }
}
@media (prefers-reduced-motion: reduce) { .cx-hero-globe.cx-stage { animation: none; } }
.cx-hero-globe.is-full { background-color: var(--cx-space); }
/* Never a scroll box (Florian 30.09.): with overflow:hidden the browser scrolled the stage to a focused control in the
   sheet – the sheet then stood half-way though it was folded, and the search field jumped. clip cannot scroll. */
.cx-hero-globe, .cx-hero-globe.is-full { overflow: clip; }
/* The imagery's credits stay readable above the fade. */
/* The stage's map is as large as the window all the time (Florian 02.10., COCKPIT 2b): in the band it stands at the
   window's left edge and the band's top (custom properties from the script) and the box clips it to the band; open, the
   same map at the window's corner – no size change, no new tiles. The band's own parts on the map sit at the band's
   edges, not the map's. */
.cx-stage > .cx-hero-map, .cx-stage > .cx-hero-map.maplibregl-map { inset: auto; left: var(--cx-canvas-x, 0px); top: 0; width: var(--cx-canvas-w, 100%); height: var(--cx-canvas-h, 100%); }
.cx-stage.is-full > .cx-hero-map, .cx-stage.is-full > .cx-hero-map.maplibregl-map { left: 0; }
/* Open, the stage is a manual popover in the browser's top layer (above everything, never moved in the page): none
   of the popover's own box. */
.cx-stage[popover] { position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; color: inherit; overflow: clip; }
.cx-stage[popover]::backdrop { display: none; }
/* Soft upper and lower edges (Florian 03.10.: the band's hard edges in the green read like a fault while the page made
   room): a mask fading the band's first and last --cx-edge pixels; opening, the script moves it with the window
   (--cx-mask-top/-bottom: the window's distance from the screen's edges) and lets the edge go to none. Registered so
   the browser can animate them. */
@property --cx-mask-top { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cx-mask-bottom { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cx-mask-left { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cx-mask-right { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cx-edge { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --cx-edge-x { syntax: "<length>"; inherits: false; initial-value: 0px; }
.cx-stage {
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--cx-mask-top), #000 calc(var(--cx-mask-top) + var(--cx-edge)), #000 calc(100% - var(--cx-mask-bottom) - var(--cx-edge)), transparent calc(100% - var(--cx-mask-bottom))),
    linear-gradient(to right, transparent var(--cx-mask-left), #000 calc(var(--cx-mask-left) + var(--cx-edge-x)), #000 calc(100% - var(--cx-mask-right) - var(--cx-edge-x)), transparent calc(100% - var(--cx-mask-right)));
  mask-image: linear-gradient(to bottom, transparent var(--cx-mask-top), #000 calc(var(--cx-mask-top) + var(--cx-edge)), #000 calc(100% - var(--cx-mask-bottom) - var(--cx-edge)), transparent calc(100% - var(--cx-mask-bottom))),
    linear-gradient(to right, transparent var(--cx-mask-left), #000 calc(var(--cx-mask-left) + var(--cx-edge-x)), #000 calc(100% - var(--cx-mask-right) - var(--cx-edge-x)), transparent calc(100% - var(--cx-mask-right)));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
/* In the band only above and below (its sides meet the sidebar and the window's edge). */
.cx-stage:not(.is-full) { --cx-edge: 48px; }
.cx-stage:not(.is-full) .mx-credits.right { right: calc(var(--cx-band-right, 0px) + 8px); }
.cx-stage:not(.is-full) .maplibregl-ctrl-bottom-right { right: var(--cx-band-right, 0px); bottom: calc(var(--cx-band-bottom, 0px) + var(--cx-band-h, 0px) * .4 + 4px); max-width: calc(var(--cx-band-w, 100%) * .48); z-index: 2; }
/* The GlobeStage block in the head: its figures to the right of the title, its pill between globe and cards. */
.cx-head.on-stage > .tx-globe-stage { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
/* "Globus ausfahren" in its own row under the head's tools: ≥ 24 px above it (the head's bottom padding makes room). */
.cx-head.on-stage .tx-stage-tools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); }
.cx-main.has-stage > .cx-head.cx-hero.on-stage:has(.tx-stage-toggle:not([hidden])) { padding-bottom: 96px; }
/* A phone: the head (title, chips, the filter row) fills the band – the globe's pills lay over the filter and its
   buttons (Florian 03.10.). There they stand in the flow under the head's tools, left-aligned. */
@media (max-width: 640px) { .cx-head.on-stage .tx-stage-tools { position: static; transform: none; justify-content: flex-start; margin-top: 24px; }
  .cx-head.on-stage .tx-stage-tools .tx-stage-toggle:not(.is-fly) { width: 100%; }
  .cx-main.has-stage > .cx-head.cx-hero.on-stage:has(.tx-stage-toggle:not([hidden])) { padding-bottom: 24px; grid-template-rows: auto auto auto auto; }
  /* The globe block's parts join the head's rows: figures under the title, the CTA in its own row under the tools. */
  .cx-head.on-stage > .tx-globe-stage { display: contents; }
  .cx-head.on-stage .tx-stage-figures { grid-column: 1; grid-row: 2; }
  .cx-head.on-stage .tx-stage-tools { grid-column: 1; grid-row: 4; margin-top: 12px; } }
@media (max-width: 640px) { .cx-head.on-stage > .tx-globe-stage { grid-column: 1; grid-row: 2; } }
/* ── Night dashboard (GlobeStage look=night, the default; per operator via the block): the stage's night continues as
   the page and the navigation, the cards stay light. The night is mixed from the operator's accent. ── */
.cx.is-night { --cx-paper: var(--cx-stage); --cx-night-ink: #e7eeeb; --cx-night-muted: rgba(231, 238, 235, .62); --cx-night-hair: rgba(255, 255, 255, .09); background: var(--cx-stage); }
body:has(.cx.is-night) { background: var(--cx-stage); }
body:has(.cx.is-night) .host-bar { background: color-mix(in srgb, var(--cx-stage) 88%, transparent); border-bottom-color: rgba(255, 255, 255, .08); color: #e7eeeb; }
.cx.is-night .cx-side { background: color-mix(in srgb, var(--cx-stage) 94%, #fff); border-right-color: var(--cx-night-hair); color: var(--cx-night-ink); }
.cx.is-night .cx-brand small, .cx.is-night .cx-label { color: var(--cx-night-muted); }
.cx.is-night .cx-role-btn, .cx.is-night .cx-nav button, .cx.is-night .cx-nav a { color: var(--cx-night-ink); }
.cx.is-night .cx-role-btn .tx-ico, .cx.is-night .cx-nav button .tx-ico, .cx.is-night .cx-nav a .tx-ico { color: var(--cx-night-muted); }
.cx.is-night .cx-role-btn:hover, .cx.is-night .cx-nav button:hover, .cx.is-night .cx-nav a:hover { background: rgba(255, 255, 255, .06); }
.cx.is-night .cx-role-btn.is-active { background: rgba(255, 255, 255, .1); border-color: var(--cx-night-hair); box-shadow: none; color: #fff; }
.cx.is-night .cx-nav button.is-active .tx-ico, .cx.is-night .cx-role-btn.is-active .tx-ico { color: #fff; }
.cx.is-night .cx-nav-more { border-top-color: var(--cx-night-hair); }
.cx.is-night .cx-nav-more a { color: var(--cx-night-muted); }
.cx.is-night .cx-side-foot { background: rgba(255, 255, 255, .06); color: var(--cx-night-muted); }
.cx.is-night .cx-main { color: var(--cx-night-ink); }
.cx.is-night .cx-main .cx-muted { color: var(--cx-night-muted); }
.cx.is-night .cx-cell, .cx.is-night .cx-panel { color: var(--cx-ink); }
.cx.is-night .cx-cell .cx-muted, .cx.is-night .cx-panel .cx-muted { color: var(--cx-muted); }
/* Admin pages (KI, Datenschutz) are white cards on the night stage: day colours inside, never the night text colours or
   the stage as "paper" (labels, notes and prompt boxes were light on white / dark on dark). */
.cx.is-night .cx-ai-service { --cx-paper: var(--bz-bg, #f5f4ef); color: var(--cx-ink);
  /* Paper on the dark shell: its light tokens again (the shell's dark ones reach in – fields and selects lost their edge). */
  --bz-card: #fff; --bz-text: #1b1e27; --bz-muted: #6e7480; --bz-hair: rgba(25, 28, 40, .09); --bz-hair2: rgba(25, 28, 40, .16); }
.cx.is-night .cx-main .cx-ai-service .cx-muted, .cx.is-night .cx-ai-service .cx-label, .cx.is-night .cx-ai-service .cx-ai-hint { color: var(--cx-muted); }
.cx.is-night .cx-ai-service .cx-ai-prompt summary { color: var(--cx-ink); }
.cx.is-night .tx-block { border-color: transparent; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 40px -22px rgba(0, 0, 0, .55); }
/* The page's own map lives in the stage; its block below would only repeat it. */
.cx-main.has-stage.stage-own .cx-cell[data-block="LiveMap"] { display: none; }
/* Page to page in one piece (Florian 29.09.): the rest of the page cross-fades, the globe stays live (no snapshot of
   it cross-fading), the heading morphs (from the clicked title, or the old heading into the new), each card morphs into
   the one at its place – new ones rise, gone ones sink – a little after one another. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(cx-stage), ::view-transition-old(cx-stage), ::view-transition-new(cx-stage) { animation: none; }
::view-transition-old(cx-stage) { display: none; }
::view-transition-group(cx-title) { animation-duration: .52s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-old(cx-title), ::view-transition-new(cx-title) { height: 100%; width: auto; object-fit: none; object-position: left center; animation-duration: .4s; }
::view-transition-group(cx-head), ::view-transition-group(cx-ask) { animation-duration: .44s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); }
::view-transition-group(cx-c0), ::view-transition-group(cx-c1), ::view-transition-group(cx-c2), ::view-transition-group(cx-c3),
::view-transition-group(cx-c4), ::view-transition-group(cx-c5), ::view-transition-group(cx-c6), ::view-transition-group(cx-c7) { animation-duration: .5s; animation-timing-function: cubic-bezier(.32, .72, 0, 1); animation-fill-mode: both; }
::view-transition-new(cx-c0):only-child, ::view-transition-new(cx-c1):only-child, ::view-transition-new(cx-c2):only-child, ::view-transition-new(cx-c3):only-child,
::view-transition-new(cx-c4):only-child, ::view-transition-new(cx-c5):only-child, ::view-transition-new(cx-c6):only-child, ::view-transition-new(cx-c7):only-child { animation: cx-card-rise .5s cubic-bezier(.32, .72, 0, 1) both; }
::view-transition-old(cx-c0):only-child, ::view-transition-old(cx-c1):only-child, ::view-transition-old(cx-c2):only-child, ::view-transition-old(cx-c3):only-child,
::view-transition-old(cx-c4):only-child, ::view-transition-old(cx-c5):only-child, ::view-transition-old(cx-c6):only-child, ::view-transition-old(cx-c7):only-child { animation: cx-card-sink .28s ease both; }
::view-transition-group(cx-c0), ::view-transition-new(cx-c0):only-child, ::view-transition-old(cx-c0):only-child { animation-delay: 0ms; }
::view-transition-group(cx-c1), ::view-transition-new(cx-c1):only-child, ::view-transition-old(cx-c1):only-child { animation-delay: 30ms; }
::view-transition-group(cx-c2), ::view-transition-new(cx-c2):only-child, ::view-transition-old(cx-c2):only-child { animation-delay: 60ms; }
::view-transition-group(cx-c3), ::view-transition-new(cx-c3):only-child, ::view-transition-old(cx-c3):only-child { animation-delay: 90ms; }
::view-transition-group(cx-c4), ::view-transition-new(cx-c4):only-child, ::view-transition-old(cx-c4):only-child { animation-delay: 120ms; }
::view-transition-group(cx-c5), ::view-transition-new(cx-c5):only-child, ::view-transition-old(cx-c5):only-child { animation-delay: 150ms; }
::view-transition-group(cx-c6), ::view-transition-new(cx-c6):only-child, ::view-transition-old(cx-c6):only-child { animation-delay: 180ms; }
::view-transition-group(cx-c7), ::view-transition-new(cx-c7):only-child, ::view-transition-old(cx-c7):only-child { animation-delay: 210ms; }
/* A card that changes size (three middle → one large) is not stretched: its old and new picture keep their real size,
   anchored top left and cut by the morphing frame, while they cross-fade (as iOS changes a widget's size). */
::view-transition-image-pair(cx-c0), ::view-transition-image-pair(cx-c1), ::view-transition-image-pair(cx-c2), ::view-transition-image-pair(cx-c3), ::view-transition-image-pair(cx-c4), ::view-transition-image-pair(cx-c5), ::view-transition-image-pair(cx-c6), ::view-transition-image-pair(cx-c7) { overflow: clip; border-radius: var(--as-radius, 14px); }
::view-transition-old(cx-c0), ::view-transition-old(cx-c1), ::view-transition-old(cx-c2), ::view-transition-old(cx-c3), ::view-transition-old(cx-c4), ::view-transition-old(cx-c5), ::view-transition-old(cx-c6), ::view-transition-old(cx-c7), ::view-transition-new(cx-c0), ::view-transition-new(cx-c1), ::view-transition-new(cx-c2), ::view-transition-new(cx-c3), ::view-transition-new(cx-c4), ::view-transition-new(cx-c5), ::view-transition-new(cx-c6), ::view-transition-new(cx-c7) { width: auto; height: auto; object-fit: none; object-position: top left; }
@keyframes cx-card-rise { from { opacity: 0; transform: translateY(28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cx-card-sink { to { opacity: 0; transform: translateY(18px) scale(.98); } }
/* Back and forward run the other way (navigator, Florian 05.10.): going back, the cards come down from above and the
   old ones leave upwards – the direction tells where one came from. */
html[data-nav-dir="back"]::view-transition-new(cx-c0):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c1):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c2):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c3):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c4):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c5):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c6):only-child, html[data-nav-dir="back"]::view-transition-new(cx-c7):only-child { animation-name: cx-card-rise-back; }
html[data-nav-dir="back"]::view-transition-old(cx-c0):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c1):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c2):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c3):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c4):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c5):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c6):only-child, html[data-nav-dir="back"]::view-transition-old(cx-c7):only-child { animation-name: cx-card-sink-back; }
@keyframes cx-card-rise-back { from { opacity: 0; transform: translateY(-28px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes cx-card-sink-back { to { opacity: 0; transform: translateY(-18px) scale(.98); } }
/* While the next page loads, this one steps back a little – the click is answered at once. */
.cx-main.is-navigating .cx-grid, .cx-main.is-navigating .cx-ask, .cx-main.is-navigating .cx-credits { opacity: .55; transform: scale(.995); transition: opacity .2s ease, transform .3s cubic-bezier(.32, .72, 0, 1); }
@media (prefers-reduced-motion: reduce) { .cx-main.is-navigating .cx-grid, .cx-main.is-navigating .cx-ask, .cx-main.is-navigating .cx-credits { transform: none; transition: none; } }
body:has(.cx.is-night) .host-bar, body:has(.cx.is-night) .host-bar a { color: #e7eeeb; }
/* The logo inverted to white on the night (Florian). */
body:has(.cx.is-night) .host-brand svg [fill]:not([fill="none"]) { fill: #fff; }
body:has(.cx.is-night) .host-brand svg [stroke]:not([stroke="none"]) { stroke: #fff; }
body:has(.cx.is-night) .host-brand { color: #fff; }
/* On the stage the head's tools are ghost buttons: outline, no fill (Florian). */
/* After the first page the cards do not animate in again: the view transition cross-fades them (no flash over the globe). */
.cx-main.is-settled .cx-cell { animation: none; }
/* R372 C18: the title column keeps clear of the globe; text over the night keeps a shadow for contrast. */
.cx-head.on-stage .cx-head-text { max-width: min(52ch, 56%); }
.cx-head.on-stage .cx-hero-summary, .cx-head.on-stage .cx-kicker { text-shadow: 0 1px 10px var(--cx-stage), 0 0 2px var(--cx-stage); }
@media (max-width: 640px) { .cx-head.on-stage .cx-head-text { max-width: none; } }
/* Contrast on the night (R372): the bar's product name, the imagery credits over the globe. */
body:has(.cx.is-night) .host-brand, body:has(.cx.is-night) .host-brand * { color: rgba(255, 255, 255, .88); }
.cx-stage .mx-credits-text, .cx-stage [class*="credits"] { color: rgba(255, 255, 255, .9); text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
/* The imagery's credits on the stage: just above the cards, readable on the night. */
.cx-stage:not(.is-full) .mx-credits.bottom { bottom: auto; top: 392px; }
@media (max-width: 640px) { .cx-stage:not(.is-full) .mx-credits.bottom { top: 352px; } }
/* The page-wide notes (demo, live-data lock) in one compact line above the cockpit – drawn once, it never shifts the page. */
.cx-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 7px 22px; background: #f6ecc8; color: #5c4700; font-size: 12.5px; line-height: 1.4; border-bottom: 1px solid #e6d9a4; }
.cx-notice[hidden] { display: none; }
.cx-notice-item { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
/* Its buttons keep their words on one line (a phone squeezed „Neu anmelden" letter by letter – Florian 03.10.). */
.cx-notice :is(button, a.ac-btn, .ac-btn) { flex: none; white-space: nowrap; }
.cx-notice .tx-ico { width: 15px; height: 15px; flex: none; }
.cx-notice-end { margin-left: auto; }
body:has(.cx.is-night) .cx-notice { background: color-mix(in srgb, #f0c75a 18%, var(--cx-stage)); color: #f4e3a6; border-bottom-color: rgba(240, 199, 90, .25); }
/* Cards on the night keep their own ink (the welcome and error cards were inheriting the night's light text). */
.cx.is-night .cx-welcome, .cx.is-night .cx-error, .cx.is-night .cx-ask, .cx.is-night .cx-skeleton { color: var(--cx-ink); }
.cx.is-night .cx-main .cx-welcome .cx-muted, .cx.is-night .cx-main .cx-error .cx-muted, .cx.is-night .cx-main .cx-welcome li { color: var(--cx-muted); }
.cx.is-night .cx-main .cx-welcome h1, .cx.is-night .cx-main .cx-welcome h2 { color: var(--cx-ink); }
/* The day note is a light card: its text stays dark on the night page (it inherited the page's light ink – unreadable, Florian 30.09.). */
.cx.is-night .cx-main .cx-note { color: var(--cx-ink); }
/* A provider's booking (Nezasa) in the booking panel: loaded on request, lists of travellers, services and flights. */
.cx-provider { margin: 16px 0; padding: 14px 16px; border: 1px solid var(--cx-hair); border-radius: 14px; background: var(--cx-card); }
.cx-provider .cx-panel-sub { margin-top: 0; }
.cx-provider h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--cx-muted); }
.cx-provider-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-provider-list li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: baseline; font-size: 13.5px; }
.cx-provider-list li .tx-ico { width: 16px; height: 16px; color: var(--as-accent); align-self: center; }
.cx-provider-list li small { grid-column: 2; color: var(--cx-muted); font-size: 12px; }
.cx-provider .host-button, .cx-provider .ac-btn { margin-top: 6px; }
.cx-link { padding: 0; border: 0; background: none; color: var(--as-accent); font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.cx-link:hover, .cx-link:focus-visible { text-decoration: underline; outline: none; }
.cx-still-large { display: block; width: 100%; height: auto; border-radius: 12px; background: #0b1f1c; }
/* Filters: the globe panel's groups and search; the cockpit-wide filter in the head. */
.cx-globe-filter { display: grid; gap: 8px; margin: 4px 0 10px; }
.cx-globe-search, .cx-global-filter input, .cx-globe-search-top { width: 100%; box-sizing: border-box; padding: 7px 10px; border-radius: 10px; font: inherit; font-size: 13.5px; }
.cx-globe-search, .cx-globe-search-top { border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.cx-globe-search::placeholder, .cx-globe-search-top::placeholder { color: rgba(255, 255, 255, .55); }
/* Only for screen readers (status lines, the time band's words). */
.cx-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The globe's search (in the manner of Spotlight): one quiet field, suggestions in the same glass right under it. */
.cx-gs { position: relative; }
.cx-gs-field { position: relative; display: flex; align-items: center; }
.cx-gs-glass { position: absolute; left: 11px; display: grid; place-items: center; color: rgba(255, 255, 255, .55); pointer-events: none; }
.cx-gs-glass .tx-ico { width: 16px; height: 16px; }
.cx-gs .cx-globe-search, .cx-gs .cx-globe-search-top { height: 40px; padding: 0 36px 0 36px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07);
  font-size: 15px; letter-spacing: -.005em; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.cx-gs .cx-globe-search:hover, .cx-gs .cx-globe-search-top:hover { background: rgba(255, 255, 255, .1); }
.cx-gs .cx-globe-search:focus, .cx-gs .cx-globe-search-top:focus { outline: none; background: rgba(255, 255, 255, .12); border-color: color-mix(in srgb, var(--cx-stage-accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-stage-accent) 18%, transparent); }
.cx-gs .cx-globe-search::-webkit-search-cancel-button, .cx-gs .cx-globe-search-top::-webkit-search-cancel-button { display: none; }
.cx-gs-clear { position: absolute; right: 8px; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .22); color: var(--cx-stage); cursor: pointer; }
.cx-gs-clear .tx-ico { width: 12px; height: 12px; }
.cx-gs-clear:hover { background: rgba(255, 255, 255, .4); }
.cx-gs-list { position: absolute; z-index: 6; left: -6px; right: -6px; top: calc(100% + 8px); max-height: min(62vh, 520px); overflow: auto; padding: 6px;
  animation: cx-gs-in .16s cubic-bezier(.2, .8, .2, 1) both; overscroll-behavior: contain; }
@keyframes cx-gs-in { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.cx-gs-head { padding: 10px 10px 4px; font-size: 12px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.cx-gs-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 8px; border-radius: 10px; cursor: pointer; color: #fff; }
.cx-gs-row:hover { background: rgba(255, 255, 255, .06); }
.cx-gs-row[aria-selected="true"] { background: color-mix(in srgb, var(--cx-stage-accent) 20%, transparent); }
.cx-gs-tile { margin-top: 1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); }
.cx-gs-tile .tx-ico { width: 16px; height: 16px; }
.cx-gs-tile.is-people { background: color-mix(in srgb, var(--cx-stage-accent) 22%, transparent); color: var(--cx-stage-accent); }
.cx-gs-row[aria-selected="true"] .cx-gs-tile { background: var(--cx-stage-accent); color: var(--cx-stage); }
.cx-gs-words { display: grid; min-width: 0; }
.cx-gs-words b { font-size: 14px; font-weight: 600; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-gs-words small { font-size: 12px; color: rgba(255, 255, 255, .58); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-gs-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cx-gs-badges.is-card { margin: 6px 0 4px; }
.cx-gs-badge { padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.cx-gs-badge.is-live { background: color-mix(in srgb, var(--cx-stage-accent) 20%, transparent); color: var(--cx-stage-accent); }
.cx-gs-badge.is-soon { background: rgba(240, 199, 90, .16); color: #f4d27a; }
.cx-gs-badge.is-warn { background: rgba(255, 122, 110, .16); color: #ffa198; }
.cx-gs-badge.is-muted { background: transparent; color: rgba(255, 255, 255, .5); padding-inline: 0; }
.cx-gs-pending, .cx-gs-empty { padding: 10px 12px; font-size: 12.5px; color: rgba(255, 255, 255, .55); }
.cx-gs-pending::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .25); border-top-color: var(--cx-stage-accent); animation: cx-spin .8s linear infinite; }
@keyframes cx-spin { to { transform: rotate(360deg); } }
.cx-gs-credit { padding: 8px 12px 4px; font-size: 12px; color: rgba(255, 255, 255, .4); }
/* A place the search found: a pulsing dot and its name, as a pin in Maps. */
.tx-search-pin { display: flex; align-items: center; pointer-events: none; }
.tx-search-pin-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--cx-stage-accent, #7fe0c4); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .35); }
.tx-search-pin-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--cx-stage-accent, #7fe0c4); animation: cx-pin-pulse 1.8s ease-out 3; }
@keyframes cx-pin-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(3); opacity: 0; } }
.tx-search-pin-label { margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cx-stage, #0b2a24) 86%, transparent); color: #fff; font: 600 12.5px/1.2 system-ui, sans-serif;
  letter-spacing: -.005em; white-space: nowrap; box-shadow: 0 6px 18px rgba(0, 0, 0, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: cx-gs-in .3s .15s cubic-bezier(.2, .8, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { .cx-gs-list, .tx-search-pin-label { animation: none; } .tx-search-pin-dot::after, .cx-gs-pending::before { animation: none; } }
.cx-globe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-globe-group summary { margin: 12px 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); cursor: pointer; }
.cx-globe-group .cx-link { color: #9fe0cf; margin: 4px 8px; }
.cx-global-filter { display: inline-flex; align-items: center; gap: 6px; min-width: min(280px, 100%); padding: 0 10px; border-radius: 10px; border: 1px solid var(--cx-hair); background: var(--cx-card); }
.cx-global-filter input { border: 0; background: transparent; padding: 8px 0; color: inherit; outline: none; }
/* Focus on the whole field, never a second ring around the bare input inside (Florian 05.10.). */
.cx-global-filter:focus-within { border-color: color-mix(in srgb, var(--as-accent) 70%, var(--cx-hair)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--as-accent) 22%, transparent); }
.cx-head.on-stage .cx-global-filter:focus-within { border-color: color-mix(in srgb, var(--cx-stage-ink) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cx-stage-ink) 16%, transparent); }
.cx .cx-global-filter input:focus-visible, .cx .cx-global-filter input:focus { outline: none; }
/* The search ✕ in the field's ink comes from app-controls (KARTEN-STUDIO 009ddec9e). */

.cx-global-filter-status { white-space: nowrap; font-size: 12px; color: var(--cx-muted); }
.cx-head.on-stage .cx-global-filter { border-color: color-mix(in srgb, var(--cx-stage-ink) 38%, transparent); background: transparent; color: var(--cx-stage-ink); }
.cx-head.on-stage .cx-global-filter input::placeholder, .cx-head.on-stage .cx-global-filter-status { color: var(--cx-stage-muted); }
.is-filtered-out { display: none !important; }
.cx-main.has-filter .cx-cell.is-filtered-empty { display: none; }
.cx-grid > .cx-filter-empty { grid-column: 1 / -1; margin: 0; }
.cx-filter-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--cx-card); color: var(--cx-ink); font-size: 13.5px; position: relative; z-index: 1; }
.cx-filter-empty .tx-ico { color: var(--as-accent); }
@media (max-width: 640px) { .cx-tools .cx-global-filter { flex: 1 1 100%; min-width: 0; } }
/* Live changes: a quiet chip, bottom centre; a click redraws the page with them. */
  border: 0; border-radius: 999px; background: var(--cx-stage); color: #fff; font: inherit; font-size: 13.5px; font-weight: 650; cursor: pointer; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); }
/* The studio's shared buttons in the operator's colour (studio.css has a fixed blue for hover, focus and shadows). */
.host-button.primary { background: var(--accent); box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 22%, transparent); }
.host-button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 82%, #000); }
.host-button:focus-visible, .host-input:focus-visible { outline-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.host-spinner { border-color: color-mix(in srgb, var(--accent) 20%, transparent); border-top-color: var(--accent); }
/* On the night (expanded globe, stage): the primary action light on dark, not a coloured slab. */
.cx-globe-panel .host-button.primary, .cx-globe-panel .ac-btn[data-variant="primary"] { background: #fff; color: var(--cx-stage); box-shadow: none; }
.cx-globe-panel .host-button.primary:hover:not(:disabled), .cx-globe-panel .ac-btn[data-variant="primary"]:hover:not(:disabled) { background: color-mix(in srgb, #fff 88%, var(--accent)); }
.cx-poi-scope { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; font-size: 13.5px; font-weight: 600; }
.cx-poi-scope .tx-ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--as-accent); }
/* The place search: results with the symbol they will get and where they come from; the chosen place as a card. */
.cx-poi-results { margin: 6px 0 4px; }
.cx-poi-hit { gap: 10px; text-align: left; }
.cx-poi-hit .tx-grow { display: grid; min-width: 0; }
.cx-poi-hit small { color: var(--cx-muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-poi-picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--cx-hair); border-radius: 12px; }
.cx-poi-picked[hidden], .cx-poi-manual[hidden], .cx-poi-mapbox[hidden] { display: none; }
.cx-poi-picked .tx-grow { display: grid; min-width: 0; }
.cx-poi-picked small { color: var(--cx-muted); }
.cx-poi-manual { display: grid; gap: 10px; }
.cx-poi-mapbox { display: grid; gap: 6px; }
.cx-poi-symbol summary { cursor: pointer; color: var(--as-accent); font-weight: 600; font-size: 13px; margin: 4px 0; }
/* Role (account) menu, top right of the bar – where an account menu sits. */
.cx-account { position: relative; margin-left: 8px; }
.cx-account-btn { display: inline-flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border: 1px solid var(--cx-hair); border-radius: 999px; background: var(--cx-card); color: var(--cx-ink); font: inherit; cursor: pointer; }
.cx-account-btn:hover, .cx-account-btn:focus-visible { border-color: color-mix(in srgb, var(--as-accent) 45%, transparent); outline: none; }
.cx-account-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--as-accent); color: #fff; }
.cx-account-mark .tx-ico { width: 16px; height: 16px; }
.cx-account-text { display: grid; text-align: left; line-height: 1.15; }
.cx-account-text b { font-size: 13px; }
.cx-account-text small { font-size: 11px; color: var(--cx-muted); }
.cx-account-caret { width: 14px; height: 14px; transform: rotate(90deg); color: var(--cx-muted); }
.cx-account-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; padding: 8px; border: 1px solid var(--cx-hair); border-radius: 14px; background: var(--cx-card); color: var(--cx-ink); box-shadow: 0 18px 40px rgba(0, 0, 0, .22); display: grid; gap: 2px; }
body:has(.cx-account-menu:not([hidden])) > .host-bar { z-index: 70; }
.cx-account-menu[hidden] { display: none; }
.cx-account-menu .cx-label { padding: 4px 8px 6px; }
.cx-account-note { margin: 0 8px 6px; font-size: 12px; color: var(--cx-muted); }
.cx-account-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cx-account-item:hover, .cx-account-item:focus-visible { background: color-mix(in srgb, var(--as-accent) 8%, transparent); outline: none; }
.cx-account-item[aria-checked="true"] { font-weight: 650; }
/* Every entry left-aligned: a fixed icon column, the words, the check at the right (Florian 07.10., phone). */
/* (stronger than the shell head's own button rule, which centres its icon buttons) */
.cx-account-menu .cx-account-item, .ac-shell .ac-shell-head .cx-account-menu .cx-account-item { justify-content: flex-start; text-align: left; min-width: 0; }
.cx-account-menu .cx-account-item > :first-child { flex: none; width: 20px; }
.cx-account-menu .cx-account-item > span { flex: 1; min-width: 0; }
/* Groups with their heading and a hairline between them – also on a phone (the side bar's rule hides .cx-label there). */
.cx-account-menu .cx-label { display: block; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--cx-hair); }
.cx-account-menu > .cx-label:first-child, .cx-account-menu > :first-child .cx-label { margin-top: 0; padding-top: 4px; border-top: 0; }
.cx-account-current { margin: 0 10px 4px; font-weight: 650; }
/* Phone: a sheet from below, never the full height. */
@media (max-width: 640px) {
  .cx-account-menu { position: fixed; left: 8px; right: 8px; top: auto; bottom: calc(76px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 160px); overflow: auto; border-radius: 18px; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22), 0 0 0 100vmax rgba(8, 20, 17, .32); }
}
.cx-account-on { margin-left: auto; color: var(--as-accent); }
body:has(.cx.is-night) .cx-account-btn { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #fff; }
body:has(.cx.is-night) .cx-account-text small, body:has(.cx.is-night) .cx-account-caret { color: rgba(255, 255, 255, .65); }
@media (max-width: 640px) { .cx-account-text { display: none; } .cx-account-btn { padding: 4px; } }

/* The POI search's source credit (OpenStreetMap, ODbL) under its hits. */
.cx-poi-credit { list-style: none; padding: 4px 8px 0; font-size: 12px; color: var(--cx-muted, #6b7280); }

/* Inbox per person: the bell top right, the list by severity in the panel. */
.cx-bell { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 6px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 999px; background: transparent; color: inherit; cursor: pointer; }
.cx-bell:hover, .cx-bell:focus-visible { background: rgba(255, 255, 255, .1); }
.cx-bell-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent, #1f5f55); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.cx-inbox-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.cx-inbox-group h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.cx-inbox-group.sev-critical h3 { color: #b42318; }
.cx-inbox-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-inbox-item { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; }
.cx-inbox-item.is-read { opacity: .72; }
.cx-inbox-item.is-done .cx-inbox-what b { text-decoration: line-through; }
.cx-inbox-what { display: grid; gap: 2px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; }
button.cx-inbox-what { cursor: pointer; }
button.cx-inbox-what:hover b { text-decoration: underline; }
.cx-inbox-what small { color: var(--cx-muted, #6b7280); }
.cx-inbox-acts { display: flex; flex-wrap: wrap; gap: 6px; }

/* R396 C26: the head's tools over the globe keep a quiet backdrop (pins and labels pass underneath). */
.cx-head.cx-hero.on-stage .cx-tools .cx-global-filter { background: color-mix(in srgb, var(--cx-stage, #0b2a24) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* R398 C27: on a phone the search folds into its magnifier (the logo stays whole); a tap opens it over the bar. */
@media (max-width: 560px) {
  .cx-search { flex: 0 0 40px; max-width: 40px; }
  .cx-search-field { justify-content: center; padding: 0; height: 40px; }
  .cx-search-field input { width: 0; flex: 0 0 0; padding: 0; }
  .cx-search:focus-within { position: absolute; left: 8px; right: 8px; top: 8px; z-index: 60; max-width: none; }
  .cx-search:focus-within .cx-search-field { justify-content: flex-start; padding: 0 10px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
  .cx-search:focus-within .cx-search-field input { width: auto; flex: 1; padding: 8px 0; }
}
/* R398 C28: on a phone the text sits on the globe – a deeper veil from the top, the globe shows below the words. */
@media (max-width: 640px) {
  .cx-stage:not(.is-full)::before { background-size: 160px 160px, auto; background-image: var(--cx-dither), linear-gradient(180deg in oklab, color-mix(in srgb, var(--cx-stage) 90%, transparent) 0%, color-mix(in srgb, var(--cx-stage) 66%, transparent) 40%, color-mix(in srgb, var(--cx-stage) 18%, transparent) 70%, color-mix(in srgb, var(--cx-stage) 0%, transparent) 86%); }
  .cx-head.on-stage .cx-hero-summary, .cx-head.on-stage .cx-chips, .cx-head.on-stage .cx-head-text p { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
}

/* Own roles: symbol choice, block weights, members. */
.cx-role-icons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.cx-role-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #d9ddd5; border-radius: 10px; background: #fff; color: var(--cx-ink); cursor: pointer; }
.cx-role-icon.is-on { border-color: var(--accent, #1f5f55); background: color-mix(in srgb, var(--accent, #1f5f55) 12%, #fff); color: var(--accent, #1f5f55); }
.cx-role-blocks { margin: 8px 0 12px; }
.cx-role-blocks summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.cx-role-block { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.cx-role-members { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-role-member { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; }
.cx-role-picks { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* R401 C29: the stage follows the width of the content, not of the window – an open side panel narrows the page like
   a phone does, so the head goes to one column and the veil comes over the globe. */
.cx-main { container: cx-main / inline-size; }
@container cx-main (max-width: 700px) {
  .cx-hero-globe.cx-stage:not(.is-full) { height: var(--cx-stage-h, 520px); }
  .cx-main.has-stage > .cx-head.cx-hero.on-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; min-height: 380px; padding: 24px 0 56px; }
  .cx-head.on-stage .cx-head-text { max-width: none; }
  .cx-head.on-stage > .tx-globe-stage { grid-column: 1; grid-row: 2; }
  .cx-head.on-stage .cx-tools { grid-row: 3; }
  .cx-head.on-stage h1 { font-size: 26px; }
  .cx-stage:not(.is-full)::before { background-size: 160px 160px, auto; background-image: var(--cx-dither), linear-gradient(180deg in oklab, color-mix(in srgb, var(--cx-stage) 90%, transparent) 0%, color-mix(in srgb, var(--cx-stage) 66%, transparent) 40%, color-mix(in srgb, var(--cx-stage) 18%, transparent) 70%, color-mix(in srgb, var(--cx-stage) 0%, transparent) 86%); }
  .cx-head.on-stage .cx-hero-summary, .cx-head.on-stage .cx-chips, .cx-head.on-stage .cx-head-text p { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
}

/* A level above in the side panel: back to the one below (KONZEPT-OPENENTITY Stufe 1). */
.cx-panel-back { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #f0f1ec; color: var(--cx-ink); cursor: pointer; }
.cx-panel-back:hover, .cx-panel-back:focus-visible { background: #e6e8e2; }
.cx-panel-back .tx-ico { width: 18px; height: 18px; transform: rotate(180deg); }

/* A part that failed (decision 0003): a quiet placeholder with a retry, the page around it stands. */
.cx-fallback { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px dashed #cfd4cc; border-radius: 14px; background: #fafaf7; color: var(--cx-muted, #5b6560); font-size: 14px; }
.cx-fallback p { margin: 0; }

/* Late blocks on their way (fetched by the cockpit after the brief): one quiet row at the end of the grid. */
.cx-late { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: color-mix(in srgb, var(--cx-card, #fff) 70%, transparent); }
.cx-late .cx-sk { flex: 0 0 120px; height: 14px; margin: 0; }

/* CLI approval page (/studio/cli) and the account lists (decision 0010): only text, one column. */
.cx.is-cli, .cx.is-cli.has-panel { grid-template-columns: minmax(0, 1fr); }
.cx.is-cli.has-panel { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); }
.cx-cli { max-width: 620px; margin: 32px auto 16px; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--cx-hair); color: var(--cx-ink); }
.cx-cli h1 { margin: 0 0 8px; font-size: 24px; outline: none; }
.cx-cli-intro { margin: 0 0 18px; color: var(--cx-muted); line-height: 1.5; }
.cx-cli-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.cx-cli-form .cx-label { flex-basis: 100%; padding: 0; }
.cx-cli-code { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--cx-hair); font: 600 22px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.cx-cli-code:focus { outline: 2px solid var(--as-accent); outline-offset: 1px; }
.cx-cli-msg { min-height: 1.4em; margin: 12px 0 0; line-height: 1.5; }
.cx-cli-msg.is-warn { color: #8a1c12; font-weight: 600; }
.cx-cli-msg.is-ok { color: #1e7a4c; font-weight: 600; }
.cx-cli-detail { margin-top: 16px; }
.cx-cli-card { padding: 18px; border-radius: 16px; border: 1px solid var(--cx-hair); background: color-mix(in srgb, var(--as-accent) 4%, #fff); }
.cx-cli-card.is-production { border-color: #e2a39b; background: #fff7f6; }
.cx-cli-card h2 { margin: 0 0 4px; font-size: 19px; overflow-wrap: anywhere; }
.cx-cli-card p { margin: 0 0 10px; overflow-wrap: anywhere; }
.cx-cli-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 14px; margin: 12px 0 16px; }
.cx-cli-facts dt { color: var(--cx-muted); }
.cx-cli-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cx-cli-card .cx-label { padding: 0 0 6px; }
.cx-cli-scopes { margin: 0 0 12px; padding-left: 20px; line-height: 1.6; }
.cx-cli-note { margin: 8px 0; color: var(--cx-muted); font-size: 14px; }
.cx-cli-hint { padding: 10px 12px; border-radius: 10px; background: #fff4d6; color: #6b4a00; font-weight: 600; }
.cx-cli-left { color: var(--cx-muted); font-size: 14px; }
.cx-cli-rows { list-style: none; margin: 0; padding: 0 16px; }
.cx-cli-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cx-hair); }
.cx-cli-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.cx-cli-row-text small { color: var(--cx-muted); }
.cx-cli-list > .cx-cli-note, .cx-cli-list > .cx-cli-msg { padding: 0 16px; }
@media (max-width: 560px) { .cx-cli { margin: 12px 0; padding: 18px 16px; border-radius: 14px; } .cx-cli-facts { grid-template-columns: minmax(0, 1fr); } .cx-cli-facts dd { margin-bottom: 6px; } }

/* B1 (decision 0025): a part of the page still loading holds its place; a stale one says from when it is. */
.cx-pending .cx-late { min-height: 52px; }
.cx-pending-text { font-size: 14px; }
.cx-stale { margin: 6px 6px 0; font-size: 12.5px; opacity: .72; }
/* The globe panel's actions (Abreise öffnen, Reise öffnen …): side by side with room, never touching (Florian 30.09.). */
.cx-globe-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Trip and departure pages: their figures stand on the globe, the row below would repeat them. */
.cx-main.has-stage.stage-figures .cx-cell[data-block="PulseRow"] { display: none; }

/* Verwaltung (KI, Datenschutz): white cards on the night page, text only. */
.cx-admin { max-width: 980px; }
/* The plugin catalogue is a light management surface even when the surrounding cockpit is a night stage.
   Shared app-controls badges and buttons therefore use their standard light-surface tokens. */
.cx-plugin-store { max-width: 1120px; box-sizing: border-box; padding: clamp(18px, 3vw, 34px); border: 1px solid var(--bz-hair); border-radius: var(--bz-radius-sheet, var(--bz-r7, 22px)); background: var(--bz-bg); color: var(--bz-text); box-shadow: var(--bz-shadow-host, none); }
.cx-plugin-head { max-width: 66ch; margin-bottom: 24px; }
.cx-plugin-head .cx-kicker { margin: 0 0 7px; }
.cx-plugin-head h1 { margin: 0; font-size: clamp(28px, 3vw, 36px); line-height: 1.15; letter-spacing: -.025em; }
.cx-plugin-intro { margin: 10px 0 0; color: var(--bz-muted); line-height: 1.5; }
.cx-plugin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.cx-plugin-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 20px; border: 1px solid var(--bz-hair); border-radius: var(--bz-radius-card, var(--bz-r6, 18px)); background: var(--bz-card); color: var(--bz-text); box-shadow: var(--bz-shadow-card, none); }
.cx-plugin-content { display: grid; align-content: start; gap: 10px; min-width: 0; }
.cx-plugin-title { display: grid; gap: 9px; }
.cx-plugin-title h2 { margin: 0; font-size: 19px; line-height: 1.3; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cx-plugin-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-plugin-summary { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.cx-plugin-note { margin: 0; padding: 9px 11px; border-radius: var(--bz-r3, 10px); background: var(--bz-sub); color: var(--bz-text); font-size: 13px; line-height: 1.45; }
.cx-plugin-price { margin: 0; color: var(--bz-muted); font-size: 13px; line-height: 1.4; }
.cx-plugin-details { color: var(--bz-muted); font-size: 12.5px; }
.cx-plugin-details summary { width: fit-content; cursor: pointer; }
.cx-plugin-details summary:focus-visible { outline: 2px solid var(--bz-accent); outline-offset: 3px; border-radius: var(--bz-r1, 4px); }
.cx-plugin-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 9px 0 0; overflow-wrap: anywhere; }
.cx-plugin-meta dt { font-weight: 650; }
.cx-plugin-meta dd { margin: 0; }
.cx-plugin-action { display: flex; justify-content: flex-end; flex: none; margin-top: auto; }
.cx-plugin-empty { padding: 30px; border: 1px dashed var(--bz-hair); border-radius: var(--bz-radius-card, var(--bz-r6, 18px)); color: var(--bz-muted); text-align: center; }
@media (max-width: 640px) {
  .cx-plugin-store { padding: 16px; border-radius: var(--bz-r5, 14px); }
  .cx-plugin-card { padding: 16px; }
  .cx-plugin-details summary { min-height: 44px; box-sizing: border-box; padding-block: 12px; }
}
.cx-admin-head h1 { margin: 8px 0 6px; font-size: 28px; }
.cx-admin-head p { margin: 0 0 18px; max-width: 70ch; }
.cx-admin-body { display: grid; gap: 14px; }
.cx-ai-service { padding: 18px 20px; border-radius: 18px; background: #fff; color: var(--cx-ink); border: 1px solid var(--cx-hair); }
.cx-ai-service h2 { margin: 0 0 8px; font-size: 18px; }
.cx-ai-service .cx-muted { color: var(--cx-muted); }
.cx-ai-prompt { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--cx-hair); background: var(--cx-paper, #f5f4ef); }
.cx-ai-prompt summary { cursor: pointer; font-weight: 600; }
.cx-ai-prompt .cx-label { display: block; margin-top: 10px; padding: 0; }
.cx-ai-text { width: 100%; box-sizing: border-box; font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--cx-hair); }
.cx-ai-model, .cx-ai-reason { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--cx-hair); font: inherit; }
.cx-ai-hint { margin: 4px 0 0; font-size: 12.5px; color: var(--cx-muted); }
.cx-ai-band { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff4d6; color: #6b4a00; font-weight: 600; }
.cx-admin .cx-tools { margin-top: 10px; }
/* The "held back" note: a way out (sign in again, set up the second factor) and a close for this session. */
.cx-notice-link { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }
/* Datenschutz: who, the reference, the preview in two groups, the irreversible button in red. */
.cx-privacy-kind { border: 0; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.cx-privacy-kind .cx-label { padding: 0; margin-bottom: 4px; flex-basis: 100%; }
.cx-privacy-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; }
.cx-privacy-detail { display: grid; gap: 10px; margin-top: 10px; }
.cx-privacy-group h3 { margin: 0 0 4px; padding: 0; }
.cx-privacy-areas { margin: 0; padding-left: 18px; line-height: 1.6; }
.cx-privacy-areas small { color: var(--cx-muted); }
.cx-privacy-audit { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.cx-admin .host-button.danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.cx-admin .host-button.danger:disabled { opacity: .45; cursor: not-allowed; }
.cx-ai-service.is-off { opacity: .8; border-style: dashed; }
.cx-ai-switch .cx-tools { flex-wrap: nowrap; }
.cx-ai-switch .cx-ai-reason { flex: 1; min-width: 0; }
/* Blocks from the Brainz store packs (time, tourdata, core, cards) read --as-* tokens: in the grid they get the
   cockpit's light card look, like its own blocks (their own fallbacks are dark). */
.cx-cell, .sh-sheet.is-paper { --as-surface: #fff; --as-bg: #fff; --as-text: var(--cx-ink); --as-fg: var(--cx-ink); --as-muted: var(--cx-muted); --as-border: var(--cx-hair);
  --as-time-accent: #b7791f; --as-time-rail: rgba(21, 52, 44, .12); --as-time-upcoming: var(--as-accent); --as-time-today: var(--as-accent); color: var(--cx-ink); }
/* Zeitplan (time pack Agenda, Florian 03.10.: grey boxes, text hardly readable in the sheet): a schedule reads as a
   list – the time in its own column, the entry beside it, light rows instead of dark boxes; free slots stay dashed. */
.cx .as-time-ag { gap: 16px; }
.cx .as-time-slot { display: grid; grid-template-columns: 6.6em 1fr; column-gap: 10px; align-items: baseline; margin: 0 0 4px; padding: 8px 10px;
  font: 400 var(--bz-type-body, 14px)/1.4 var(--as-font, system-ui, sans-serif); color: var(--cx-ink); }
.cx .as-time-slot b { white-space: nowrap; font-size: inherit; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--as-accent, #1f5f55); }
.cx .as-time-slot.is-busy { border: 0; background: var(--sh-fill, #f0f1ec); color: var(--cx-ink); }
/* A finger meets a schedule row at 44 px (UX-11). */
@media (pointer: coarse) { .cx button.as-time-slot { min-height: 44px; } }
.cx .as-time-dayh { color: var(--cx-muted); letter-spacing: .04em; }
/* Narrow (a half tile, the sheet): the days one below the other instead of squeezed columns; the sheet already
   carries the title, so the block's own heading goes there. */
.cx .as-time { container-type: inline-size; }
@container (max-width: 560px) {
  .cx .as-time-ag { display: block; }
  .cx .as-time-day + .as-time-day { margin-top: 16px; }
}
.cx .as-time.is-full-view > .as-time-title { display: none; }
/* A block without a surface of its own (bareBlock in cockpit-next.ts – the core Timeline and alike) gets the tile's:
   the same card as the pack's .tx-block, so no render_ui block stands bare on the stage (Florian 30.09.). */
.cx-cell.is-bare > :first-child { background: var(--as-surface, #fff); border: 1px solid var(--cx-hair); border-radius: var(--bz-radius-card, 16px);
  padding: 16px 18px 14px; box-shadow: 0 1px 2px rgba(21, 52, 44, .04), 0 10px 28px -18px rgba(21, 52, 44, .18); color: var(--cx-ink); }
@media (max-width: 640px) { .cx-cell.is-bare > :first-child { padding: 14px 14px 12px; } }
/* Block sizes (S/M/L): a quiet control in the cell's corner on hover or focus, a grip to drag; S shows the gist only. */
.cx-cell { position: relative; }
.cx-cell > .cx-size { height: auto; }
.cx-size { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .18s ease; }
.cx-cell:hover > .cx-size, .cx-cell:focus-within > .cx-size, .cx-cell.is-sizing > .cx-size, .cx-cell.is-sizing-menu > .cx-size { opacity: 1; }
.cx-size-more { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--cx-hair); border-radius: 50%;
  background: color-mix(in srgb, var(--cx-card, #fff) 92%, transparent); color: var(--cx-muted); box-shadow: 0 4px 14px rgba(21, 52, 44, .1); cursor: pointer; transition: background .15s ease, color .15s ease; }
.cx-size-more:hover, .cx-size-more[aria-expanded="true"] { background: var(--cx-card, #fff); color: var(--cx-ink); }
.cx-size-more:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
.cx-size-dots { font: 700 16px/1 inherit; letter-spacing: .02em; transform: translateY(-1px); }
.cx-size-menu { position: fixed; inset: auto; margin: 0; width: 200px; padding: 6px; border: 1px solid var(--cx-hair); border-radius: 14px; background: var(--cx-card, #fff); color: var(--cx-ink);
  box-shadow: 0 18px 44px rgba(21, 52, 44, .18), 0 2px 6px rgba(21, 52, 44, .08); opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .2s cubic-bezier(.32, .72, 0, 1), display .2s allow-discrete, overlay .2s allow-discrete; }
.cx-size-menu:popover-open { opacity: 1; transform: none; }
@starting-style { .cx-size-menu:popover-open { opacity: 0; transform: translateY(-4px) scale(.98); } }
.cx-size-menu:not([popover]), .cx-size-menu:not(:popover-open):not(.is-open) { display: none; }
.cx-size-option { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent;
  color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.cx-size-option small { color: var(--cx-muted); font-size: 12px; font-weight: 700; }
.cx-size-option:hover, .cx-size-option:focus-visible { background: color-mix(in srgb, var(--as-accent) 9%, transparent); outline: none; }
.cx-size-check { color: var(--as-accent); font-weight: 800; visibility: hidden; }
.cx-size-option[aria-checked="true"] .cx-size-check { visibility: visible; }
.cx-size-grip { width: 16px; height: 16px; cursor: ew-resize; touch-action: none; opacity: .7;
  background: linear-gradient(135deg, transparent 50%, var(--cx-muted) 50%, var(--cx-muted) 58%, transparent 58%, transparent 70%, var(--cx-muted) 70%, var(--cx-muted) 78%, transparent 78%); }
.cx-cell.is-sizing { outline: 2px dashed var(--as-accent); outline-offset: 4px; border-radius: 18px; }
/* Moving and tall tiles (Florian 30.09.): the handle ⠿ beside the ⋯; a dragged tile lifts and follows the pointer. */
.cx-move { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--cx-hair); border-radius: 50%;
  background: color-mix(in srgb, var(--cx-card, #fff) 92%, transparent); color: var(--cx-muted); box-shadow: 0 4px 14px rgba(21, 52, 44, .1); cursor: grab; touch-action: none; }
.cx-move:hover { background: var(--cx-card, #fff); color: var(--cx-ink); }
.cx-move:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
.cx-move-dots { font: 700 15px/1 inherit; }
.cx-cell.is-dragging { z-index: 60; cursor: grabbing; transition: none; animation: none; pointer-events: none; }
body.cx-dragging-tile { cursor: grabbing; user-select: none; }
/* Where the dragged tile will land: a dashed gap of its size; the tile under the pointer shows it will make room. */
.cx-drop { display: grid; place-items: center; box-sizing: border-box; border: 2px dashed color-mix(in srgb, var(--as-accent) 55%, transparent); border-radius: 18px;
  background: color-mix(in srgb, var(--as-accent) 8%, transparent); animation: cx-in .2s ease both; }
.cx-drop-label { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cx-card, #fff) 85%, transparent); color: var(--as-accent); font-size: 12px; font-weight: 650; }
.cx-cell.is-drop-target > :first-child { outline: 2px solid color-mix(in srgb, var(--as-accent) 45%, transparent); outline-offset: 3px; transition: outline-color .2s ease; }
/* The grip's preview: the new size as a frame over the tile, named; nothing moves before release. */
.cx-size-frame { position: fixed; z-index: 70; pointer-events: none; box-sizing: border-box; border: 2px dashed var(--as-accent); border-radius: 18px;
  background: color-mix(in srgb, var(--as-accent) 7%, transparent); transition: left .18s cubic-bezier(.32, .72, 0, 1), width .18s cubic-bezier(.32, .72, 0, 1); }
.cx-size-frame.is-same { opacity: .5; }
.cx-size-frame-label { position: absolute; right: 10px; top: 10px; padding: 4px 10px; border-radius: 999px; background: var(--as-accent); color: #fff; font-size: 12px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .cx-size-frame { transition: none; } .cx-drop { animation: none; } }
.cx-cell.is-dragging > :first-child { box-shadow: 0 24px 60px rgba(21, 52, 44, .28), 0 4px 12px rgba(21, 52, 44, .12); }
.cx-cell.is-dragging > .cx-size { opacity: 1; }
.cx-cell.is-tall > :first-child { min-height: 640px; }
@media (max-width: 640px) { .cx-cell.is-tall > :first-child { min-height: 70vh; } }
.cx-size-sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--cx-hair); }
.cx-size-action { grid-template-columns: 18px 1fr; }
.cx-size-action .tx-ico { width: 15px; height: 15px; color: var(--cx-muted); }
.cx-size-action.is-back .tx-ico { transform: rotate(180deg); }
.cx-size-toggle[aria-pressed="true"] { color: var(--as-accent); font-weight: 650; }
.cx-size-toggle[aria-pressed="true"] .tx-ico { color: var(--as-accent); }
.cx-cell[data-size="s"] .tx-radar-scroll, .cx-cell[data-size="s"] .tx-radar-legend, .cx-cell[data-size="s"] .tx-radar-running { display: none; }
.cx-cell[data-size="s"] .tx-list > li:nth-child(n+4) { display: none; }
@media (max-width: 560px) { .cx-size { display: none; } }
/* Without hover (touch): the ⋯ stays, the grip (a mouse gesture) goes. */
@media (hover: none) { .cx-size { opacity: 1; } .cx-size-grip { display: none; } }

/* The assistant in full screen: the panel takes the window (blocks can show in their larger sizes). */
.cx-ai-head { grid-template-columns: 1fr auto auto; }
.cx-ai-wide { grid-row: 1 / span 2; grid-column: 2; width: 36px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--cx-ink); cursor: pointer; display: grid; place-items: center; }
.cx-ai-wide:hover, .cx-ai-wide[aria-pressed="true"] { background: color-mix(in srgb, var(--cx-ink) 6%, transparent); }
.cx-ai-panel.is-full { width: min(1100px, 100vw); }
@media (max-width: 700px) { .cx-ai-wide { display: none; } }
/* Zeitreise (Z3) in the manner of Time Machine (Florian): a floating time card, a vertical rail at the right edge whose
   ticks swell like the Dock, a space vignette while the globe shows the plan, a dive into the globe on every jump. */
.cx-tm { position: fixed; inset: 0; z-index: 82; pointer-events: none; color: #fff; }
.cx-tm[hidden] { display: none; }
.cx-tm > * { pointer-events: auto; }
.cx-tm-space { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  background: radial-gradient(1px 1px at 12% 22%, #fff9 50%, transparent 51%), radial-gradient(1px 1px at 78% 14%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 72%, #fffa 50%, transparent 51%), radial-gradient(1px 1px at 32% 84%, #fff7 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 58%, #fff8 50%, transparent 51%), radial-gradient(1.5px 1.5px at 48% 38%, #fff6 50%, transparent 51%),
    radial-gradient(ellipse at 50% 50%, transparent 38%, rgba(4, 10, 24, .72) 100%); }
.cx-tm.is-plan .cx-tm-space { opacity: 1; }
.cx-tm-card { position: fixed; top: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 18px; }
.cx-tm-words { display: grid; justify-items: center; min-width: 190px; }
.cx-tm-time { font-size: 34px; font-weight: 300; letter-spacing: -.01em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cx-tm-sub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--cx-stage-muted); }
/* Counters (Florian 30.09.): active at the moment under the time, per day on the rail labels and the day buttons. */
.cx-tm-count { margin-top: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--cx-stage-accent) 22%, transparent);
  color: #fff; font: 600 12px/1.2 inherit; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cx-tm-daycount { display: inline-block; min-width: 16px; margin-left: 5px; padding: 1px 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
  color: #fff; font: 700 10px/1.3 inherit; font-variant-numeric: tabular-nums; text-align: center; vertical-align: 1px; }
.cx-tm-daycount[hidden], .cx-tm-count[hidden], .cx-tm-toggle-count[hidden] { display: none; }
.cx-tm-step { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; font-size: 14px; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.cx-tm-step:hover { transform: scale(1.08); background: rgba(255, 255, 255, .14); }
.cx-tm-rail { position: fixed; top: 180px; bottom: 96px; right: 24px; width: 104px; cursor: ns-resize; outline: none; touch-action: none; }
/* The ring only for the keyboard: after a click or a drag the rail keeps focus (for the keys) but shows no frame. */
.cx-tm-rail:focus-visible:not(.by-pointer) { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 4px; border-radius: 12px; }
.ac .cx-tm-rail.by-pointer:focus-visible { outline: none; }
.cx-tm-ticks { position: absolute; inset: 0; }
.cx-tm-tick { position: absolute; right: 0; width: 14px; height: 1px; background: rgba(255, 255, 255, .45); transform-origin: right center; transform: scaleX(var(--mag, 1)); transition: transform .12s ease; }
.cx-tm-tick.is-day { width: 26px; height: 2px; background: rgba(255, 255, 255, .8); }
.cx-tm-tick em { position: absolute; right: calc(100% + 8px); top: -8px; font: 600 12px/1 inherit; font-style: normal; white-space: nowrap; color: rgba(255, 255, 255, .8); transform: scaleX(calc(1 / var(--mag, 1))); transform-origin: right center; }
.cx-tm-tick.is-now { width: 34px; height: 2px; background: var(--cx-stage-accent); }
.cx-tm-tick.is-now em { color: var(--cx-stage-accent); }
.cx-tm-thumb { position: absolute; right: -6px; width: 46px; height: 0; border-top: 2px solid var(--cx-stage-accent); transform: translateY(-1px); pointer-events: none; }
.cx-tm-thumbcount { position: absolute; right: -8px; bottom: 9px; min-width: 20px; padding: 2px 6px; border-radius: 999px; background: var(--cx-stage-accent); color: var(--cx-stage);
  font: 700 12px/1.2 inherit; font-variant-numeric: tabular-nums; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cx-tm-thumbcount[hidden] { display: none; }
.cx-tm-thumb::after { content: ""; position: absolute; right: -4px; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--cx-stage-accent); }
.cx-tm-pill { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  border-radius: 999px; }
.cx-tm .cx-time-play, .cx-tm .cx-time-now, .cx-tm .cx-time-day { min-height: 34px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .06); color: #fff; font: 600 13px/1 inherit; cursor: pointer; }
.cx-tm .cx-time-play { min-width: 38px; }
.cx-tm .cx-time-speed { min-height: 34px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; font: inherit; font-size: 13px; padding: 0 8px; }
.cx-tm .cx-time-speed option { color: var(--cx-ink); }
.cx-time-sample { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .7; padding-right: 6px; }
.cx-tm button:focus-visible, .cx-tm select:focus-visible, .cx-time-slider:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: 2px; }
.cx-tm-lower { display: none; }
/* The way in is always the rail (a phone: its slider) – Florian 29.09.: the time card on top and the pill below come
   only once the globe travels in time (a moment other than now), and go again at "Jetzt". */
.cx-tm-card, .cx-tm-pill { opacity: 0; visibility: hidden; transition: opacity .28s cubic-bezier(.32, .72, 0, 1), transform .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .42s; }
.cx-tm-card { transform: translate(-50%, -10px) scale(.98); }
.cx-tm-pill { transform: translate(-50%, 10px) scale(.98); }
.cx-tm.is-plan .cx-tm-card, .cx-tm.is-plan .cx-tm-pill { opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .cx-tm-card, .cx-tm-pill { transition: none; } }
/* The dive: on a jump the globe falls back a little and rises to the new moment (transform and opacity only). */
.cx-stage.is-warp .cx-hero-map { animation: cx-warp .7s cubic-bezier(.22, 1, .36, 1); }
@keyframes cx-warp { 0% { transform: scale(1); opacity: 1; } 35% { transform: scale(.94); opacity: .55; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cx-stage.is-warp .cx-hero-map { animation: none; } .cx-tm-space, .cx-tm-tick { transition: none; } }
/* Below 768 px (§9a): no playback or speeds; phones (sheet at the bottom): the card on top, a touch slider and day jumps. */
@media (max-width: 767px) { .cx-tm .cx-time-play, .cx-tm .cx-time-speed { display: none; } }
@media (max-width: 640px) {
  .cx-tm-rail { display: none; }
  .cx-tm-card { top: 12px; gap: 8px; padding: 8px 10px; } .cx-tm-time { font-size: 24px; } .cx-tm-words { min-width: 130px; }
  .cx-tm-lower { display: grid; gap: 8px; position: fixed; left: 8px; right: 8px; bottom: calc(var(--sheet-h, 46vh) + 64px); padding: 10px 12px; pointer-events: auto; }
  .cx-tm-lower .cx-time-slider { width: 100%; accent-color: var(--cx-stage-accent); }
  /* Seven days in one even row ("Di" fell onto a line of its own at 375 px). */
  .cx-tm-lower .cx-time-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .cx-tm-lower .cx-time-day { padding: 0 2px; min-width: 0; }
  .cx-tm-pill { bottom: calc(var(--sheet-h, 46vh) + 16px); }
  .cx-tm-lower { transition: bottom .3s cubic-bezier(.32, .72, 0, 1); }
  .cx-hero-globe:has(.sh-sheet.is-dragging) .cx-tm-lower { transition: none; }
  /* Only the clock in the corner until tapped (Florian 30.09.): the controls rise in, and fade out again. */
  .cx-tm-toggle { position: fixed; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 11px; border-radius: 999px;
    color: rgba(255, 255, 255, .82); font: 600 13px/1 inherit; font-variant-numeric: tabular-nums; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
  .cx-tm-toggle .tx-ico { width: 17px; height: 17px; }
  .cx-tm-toggle-text:empty { display: none; }
  .cx-tm-toggle-count { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: var(--cx-stage-accent); color: var(--cx-stage); font: 700 11px/1.2 inherit; text-align: center; }
  .cx-tm-lower .cx-time-day .cx-tm-daycount { margin-left: 3px; padding: 1px 4px; }
  .cx-tm.is-plan .cx-tm-toggle, .cx-tm.is-open .cx-tm-toggle { color: #fff; border-color: color-mix(in srgb, var(--cx-stage-accent) 60%, transparent); background: color-mix(in srgb, var(--cx-stage) 70%, transparent); }
  .cx-tm.is-plan .cx-tm-toggle .tx-ico { color: var(--cx-stage-accent); }
  .cx-tm:not(.is-open) .cx-tm-card, .cx-tm:not(.is-open) .cx-tm-pill, .cx-tm:not(.is-open) .cx-tm-lower { opacity: 0; visibility: hidden; pointer-events: none; }
  .cx-tm:not(.is-open) .cx-tm-lower { transform: translateY(12px) scale(.98); }
  .cx-tm-lower { transition: bottom .3s cubic-bezier(.32, .72, 0, 1), opacity .28s cubic-bezier(.32, .72, 0, 1), transform .42s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .42s; }
  .cx-tm.is-open .cx-tm-lower { transition-delay: 0s; }
  /* The clock carries the moment: no time card over the globe on a phone; the controls say what it shows. */
  .cx-tm-card { display: none; }
  .cx-tm-state { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-stage-muted); }
  .cx-tm.is-plan .cx-tm-state { color: var(--cx-stage-accent); }
}
@media (min-width: 641px) { .cx-tm-toggle, .cx-tm-state { display: none; } }
@media (prefers-reduced-motion: reduce) { .cx-tm-lower, .cx-tm-toggle { transition: none; } }

/* ── Weltuhr: the shared module's look (apps/map-studio/src/world-clock.ts WORLD_CLOCK_CSS, copied verbatim – the test
   cockpit-world-clock checks it stays so), then the cockpit's own: the row of cards on the expanded globe. ── */
.wc-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 14px;border-radius:14px;background:var(--wc-card,#1f2b27);color:var(--wc-text,#eef3f0);min-width:150px;text-align:center;font-variant-numeric:tabular-nums}
.wc-title{font-size:15px;font-weight:600}
.wc-offset,.wc-sun,.wc-note{font-size:13px;color:var(--wc-muted,#a9bab2)}
.wc-face .wc-dial{fill:var(--wc-day,#ffffff);stroke:var(--wc-ring,transparent);stroke-width:1.5}
.wc-face .wc-num,.wc-face .wc-hour,.wc-face .wc-minute{fill:var(--wc-ink,#1d2a25);stroke:var(--wc-ink,#1d2a25)}
.wc-face .wc-num{stroke:none}
.wc-face .wc-tick{stroke:var(--wc-ink,#1d2a25)}
.wc-face.is-night .wc-tick{stroke:var(--wc-night-ink,#eef3f0)}
.wc-face.is-night .wc-dial{fill:var(--wc-night,#0b1210)}
.wc-face.is-night .wc-num{fill:var(--wc-night-ink,#eef3f0)}
.wc-face.is-night .wc-hour,.wc-face.is-night .wc-minute{stroke:var(--wc-night-ink,#eef3f0)}
.wc-face .wc-second,.wc-face .wc-pin{stroke:var(--wc-accent,#e0a030);fill:var(--wc-accent,#e0a030)}
.wc-face.is-unknown .wc-hour,.wc-face.is-unknown .wc-minute,.wc-face.is-unknown .wc-second{visibility:hidden}
.wc-line{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-variant-numeric:tabular-nums}
.wc-line-item{display:flex;align-items:center;gap:6px;font-size:14px}
.cx-wc { --wc-card: var(--ac-glass-bg); --wc-text: #fff; --wc-muted: rgba(255, 255, 255, .62); --wc-day: #f4f6f3; --wc-night: #0b1714; --wc-ink: var(--cx-ink);
  --wc-night-ink: #e7eeeb; --wc-accent: var(--cx-stage-accent); --wc-ring: rgba(255, 255, 255, .22);
  position: fixed; left: 388px; right: 150px; bottom: 82px; display: none; gap: 10px; justify-content: center; overflow-x: auto; padding: 4px; scrollbar-width: none; pointer-events: auto; }
.cx-wc::-webkit-scrollbar { display: none; }
.cx-hero-globe.is-full .cx-wc { display: flex; animation: cx-chrome-up .5s .7s cubic-bezier(.32, .72, 0, 1) both; }
.cx-hero-globe.is-leaving .cx-wc { opacity: 0; transition: opacity .2s ease; animation: none; }
/* The cards are app-controls glass (.ac-glass set in worldClock()); here only size and the lift on hover. */
.cx-wc .wc-card { flex: none; min-width: 132px; padding: 10px 12px; gap: 2px; transition: transform .18s var(--bz-spring, ease), background .18s ease; }
.cx-wc .wc-card[role="button"] { cursor: pointer; }
.cx-wc .wc-card[role="button"]:hover { transform: translateY(-2px); }
.cx-wc .wc-title { font-size: 13.5px; letter-spacing: -.005em; }
.cx-wc .wc-offset, .cx-wc .wc-sun, .cx-wc .wc-note { font-size: 12px; }
.cx-wc .wc-sun { display: grid; gap: 0; }
.cx-wc.is-plan .wc-card { border-color: color-mix(in srgb, var(--cx-stage-accent) 35%, transparent); }
.cx-wc-panel { margin: 0 0 12px; --wc-ink: var(--cx-ink); --wc-night-ink: #e7eeeb; --wc-day: #f4f6f3; --wc-night: #0b1714; --wc-accent: var(--cx-stage-accent); }
.cx-wc-line .wc-line-item { font-size: 12.5px; color: rgba(255, 255, 255, .85); }
.cx-wc-credit { margin: 6px 0 0; font-size: 12px; color: rgba(255, 255, 255, .4); }
/* Wide screens show the row on the globe; the panel's line only where the row has no room. */
@media (min-width: 1100px) { .cx-hero-globe.is-full .cx-wc-line { display: none; } }
@media (max-width: 1099px) { .cx-hero-globe.is-full .cx-wc { display: none; } }
@media (prefers-reduced-motion: reduce) { .cx-hero-globe.is-full .cx-wc { animation: none; } .cx-wc .wc-card { transition: none; } }

/* ── The central app sheet (KONZEPT-APP-SHEET, Florian 29.09.): the globe's panel first. One head (back, compact title
   or search, fold), levels that slide in from the right (wide) or rise as sheets (phone); minimized a slim bar (wide)
   or its head (phone). Moves only by transform/height, curves of iOS. ── */
/* Two looks from one set of tokens: dark glass on the globe, paper on the pages. */
/**
 * @assistant-kit/app-sheet – the sheet's own look (KONZEPT-APP-SHEET). Colours only from tokens: --sh-* default to the
 * design system's --bz-* (studio-chrome uses the same); a host may set --sh-* itself (the cockpit's glass and paper).
 * No inline styles needed (strict CSP): motion runs through the CSSOM (transform) and the Web Animations API.
 */
.sh-sheet { --sh-ink: var(--bz-text, #1b1e27); --sh-muted: var(--bz-muted, #6e7480); --sh-accent: var(--bz-accent, #1f5f55);
  --sh-fill: color-mix(in srgb, var(--bz-text, #1b1e27) 6%, transparent); --sh-fill-hover: color-mix(in srgb, var(--bz-text, #1b1e27) 10%, transparent);
  --sh-hair: var(--bz-hair, rgba(25, 28, 40, .09)); --sh-grip: var(--bz-hair2, rgba(25, 28, 40, .16)); --sh-level: var(--bz-card, #fff); --sh-focus: var(--bz-accent, #1f5f55); }
.sh-sheet { --sh-ease: cubic-bezier(.32, .72, 0, 1); display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.sh-sheet[hidden] { display: none; }
.sh-grip { display: none; }
.sh-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 6px; min-height: 56px; padding: 8px 10px 8px 12px; box-sizing: border-box;
  border-bottom: 1px solid transparent; transition: border-color .2s ease, background .2s ease; }
.sh-sheet.is-scrolled .sh-head, .sh-sheet.is-deep .sh-head { border-bottom-color: var(--sh-hair); }
.sh-back { display: inline-flex; align-items: center; gap: 2px; max-width: 46%; height: 36px; padding: 0 10px 0 4px; border: 0; border-radius: 10px; background: transparent;
  color: var(--sh-accent); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sh-back:hover { background: var(--sh-fill); }
.sh-back:focus-visible, .sh-toggle:focus-visible, .sh-close:focus-visible, .sh-grip:focus-visible { outline: 1px solid var(--sh-focus); outline-offset: 2px; }
.sh-back-text { overflow: hidden; text-overflow: ellipsis; }
.sh-ico { width: 18px; height: 18px; flex: none; transition: transform .3s var(--sh-ease); }
.sh-ico.is-back { transform: rotate(180deg); width: 20px; height: 20px; }
.sh-ico.is-up { transform: rotate(-90deg); }
.sh-ico.is-down { transform: rotate(90deg); }
.sh-compact { flex: 1; min-width: 0; display: flex; align-items: center; }
.sh-compact-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 650; letter-spacing: -.005em; opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .3s var(--sh-ease); }
.sh-sheet.is-scrolled .sh-compact-title, .sh-sheet.is-deep .sh-compact-title, .sh-sheet[data-detent="min"] .sh-compact-title { opacity: 1; transform: none; }
.sh-sheet.is-deep:not(.is-scrolled) .sh-compact-title { opacity: 0; }
.sh-sheet.has-slot .sh-compact-title { display: none; }
.sh-slot { flex: 1; min-width: 0; }
.sh-slot:empty { display: none; }
.sh-toggle, .sh-close { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; border: 0; border-radius: 10px; background: var(--sh-fill); color: var(--sh-ink); cursor: pointer; }
.sh-close { position: relative; border-radius: 50%; width: 2.125rem; height: 2.125rem; }
/* Same close as app-controls: 34 px visible, hit area ≥ 44 px on touch (an invisible halo, no layout shift). */
@media (pointer: coarse) { .sh-close::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } }
.sh-toggle + .sh-close { margin-left: 4px; }
.sh-toggle:hover, .sh-close:hover { background: var(--sh-fill-hover); }
.sh-close .sh-ico { width: 16px; height: 16px; }
.sh-stack { position: relative; flex: 1; min-height: 0; }
.sh-level { position: absolute; inset: 0; display: flex; flex-direction: column; }
.sh-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 18px 28px; scrollbar-width: thin; scrollbar-color: var(--sh-hair) transparent; }
.sh-kicker { display: block; }
.sh-title { margin: 2px 0 12px; font-size: 24px; font-weight: 750; letter-spacing: -.012em; color: var(--sh-ink); }
.sh-sheet.is-paper .sh-kicker:empty { display: none; }
.sh-sheet.is-paper .sh-title { font-size: 21px; margin-top: 4px; }
.sh-sheet:not(.is-phone) .sh-level.is-below { pointer-events: none; }
.sh-sheet:not(.is-phone)[data-detent="min"] .sh-stack { visibility: hidden; }
.sh-sheet[data-detent="min"] .sh-head { border-bottom-color: transparent; }
.sh-sheet.is-phone .sh-grip { display: block; flex: none; width: 100%; height: 20px; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; }
.sh-sheet.is-phone .sh-grip::before { content: ""; display: block; width: 38px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--sh-grip); }
.sh-sheet.is-phone .sh-head { touch-action: none; min-height: 48px; padding-top: 2px; }
.sh-sheet.is-phone.is-dragging { cursor: grabbing; }
.sh-sheet.is-phone .sh-scroll { padding-bottom: calc(28px + env(safe-area-inset-bottom) + var(--sh-hidden, 0px)); }
.sh-sheet.is-phone .sh-level + .sh-level { top: 8px; border-radius: 18px 18px 0 0; background: var(--sh-level); box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
.sh-sheet.is-paper .sh-level { background: var(--sh-level); }
.sh-sheet .sh-level.is-below:not(:has(+ .sh-level.is-leaving)) { pointer-events: none; }
.sh-sheet.is-paper { color: var(--sh-ink); }
/* `hidden` wins inside the sheet, also on pages without a global [hidden] rule (the back button's display:inline-flex
   would otherwise show it on the ground level – AUFTRAG-EDITOR, 01.10.). */
.sh-sheet [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .sh-compact-title, .sh-ico { transition: none; } }
/* Docked (mount: "docked"): wide, a column of the host's layout – in the flow, its column's full height; a phone still
   gets the sheet from the bottom with its grip. */
.sh-sheet.is-docked { background: var(--sh-level); color: var(--sh-ink); }
.sh-sheet.is-docked:not(.is-phone) { position: relative; height: 100%; min-height: 0; border-left: 1px solid var(--sh-hair); }
.sh-sheet.is-docked.is-phone { position: fixed; inset: auto 0 auto 0; top: 8dvh; height: 92dvh; z-index: 30; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); will-change: transform; }
  /* packages/app-sheet/src/app-sheet.css – inserted here by scripts/build.mjs (same place in the cascade as before) */
.sh-sheet.is-glass { --sh-ink: #fff; --sh-muted: rgba(255, 255, 255, .65); --sh-accent: var(--cx-stage-accent); --sh-fill: rgba(255, 255, 255, .08); --sh-fill-hover: rgba(255, 255, 255, .16);
  --sh-hair: rgba(255, 255, 255, .14); --sh-grip: rgba(255, 255, 255, .35); --sh-level: color-mix(in srgb, var(--cx-stage) 92%, #000); --sh-focus: rgba(255, 255, 255, .5); }
.sh-sheet.is-paper { --sh-ink: var(--cx-ink); --sh-muted: var(--cx-muted); --sh-accent: var(--as-accent, #1f5f55); --sh-fill: #f0f1ec; --sh-fill-hover: #e6e8e2;
  --sh-hair: var(--cx-hair); --sh-grip: rgba(23, 48, 42, .22); --sh-level: var(--cx-card, #fff); --sh-focus: var(--as-accent, #1f5f55); color: var(--sh-ink); }
.sh-slot .cx-gs .cx-globe-search { height: 38px; }
/* Wide: a panel at the left edge; minimized a slim bar with the search (or the level's title). */
.cx-globe-panel.sh-sheet:not(.is-phone) { bottom: auto; height: calc(100dvh - 32px); transition: height .44s var(--sh-ease), box-shadow .3s ease; }
.cx-globe-panel.sh-sheet:not(.is-phone)[data-detent="min"] { height: 56px; overflow: visible; }
/* Phone: a sheet from the bottom with a grip, moved by the finger (translateY; app-sheet.ts). */
.cx-globe-panel.sh-sheet.is-phone { top: 8dvh; bottom: auto; left: 0; right: 0; width: auto; height: 92dvh; border-radius: 22px 22px 0 0; will-change: transform; animation: none; }
@media (prefers-reduced-motion: reduce) { .cx-globe-panel.sh-sheet, .sh-compact-title, .sh-ico { transition: none; } }

/* The pages' panel (paper): wide the column at the right as before; 641–1000 px the whole screen; a phone a sheet. */
.cx-panel.sh-sheet { padding: 0; overflow: hidden; }
.cx-panel.sh-sheet .sh-head { padding: 10px 12px 10px 16px; }
.cx-panel.sh-sheet .sh-scroll { padding: 2px 20px 40px; }
/* On a phone the sheet leaves room below for what lies under the screen at its stop (--sh-hidden, app-sheet.css): kept,
   or at half height the lower part of a level (a decision's options, the last rows) could not be scrolled into view. */
.cx-panel.sh-sheet.is-phone .sh-scroll { padding-bottom: calc(40px + env(safe-area-inset-bottom) + var(--sh-hidden, 0px)); }
/* Every level of the paper sheet is opaque: the one below never shows through the one above (Florian 29.09., staging). */
.cx-panel.sh-sheet.is-phone { position: fixed; inset: auto 0 auto 0; top: 8dvh; height: 92dvh; max-height: none; z-index: 30; border-left: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(0, 0, 0, .22); will-change: transform; animation: none; }
/* The dim behind the phone sheet: drawn by the sheet itself (a wide shadow), so it always lies UNDER the sheet. A body
   ::after scrim (z 29) lay over the sheet whenever the shell gave it its own stacking context – the whole sheet looked
   greyed out (Florian 07.10., light mode). */
.cx-panel.sh-sheet.is-phone { box-shadow: 0 -12px 40px rgba(0, 0, 0, .22), 0 0 0 100vmax rgba(8, 20, 17, .32); }
@keyframes cx-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Phone, straightened (Florian 29.09.: "wirkt alles sehr wild und unausgeglichen"; KONZEPT-APP-SHEET §7): one grid –
   16 px edge, 12 px apart, fields and buttons 44 px with radius 14, one look for the tools; the areas one quiet row. ── */
@media (max-width: 1000px) {
  /* The areas and the studio in one row that scrolls sideways, fading at its edge; no stray scroll bar, no second row. */
  .cx-side { flex-wrap: nowrap; gap: 4px; padding: 8px 16px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding: 16px;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
  .cx-side::-webkit-scrollbar { display: none; }
  .cx-roles, .cx-nav { overflow: visible; flex: none; }
  .cx-nav.cx-nav-more { display: flex; }
  .cx-side hr, .cx-side .cx-sep { display: none; }
  .cx-nav button, .cx-nav a { scroll-snap-align: start; min-height: 40px; border-radius: 12px; }
}
@media (max-width: 640px) {
  .cx-main { padding: 12px 16px 104px; }
  .cx-grid { gap: 12px; }
  .cx-head { gap: 12px; }
  /* The note: one line, the rest on a tap. */
  #app > .cx-notice:not(.is-open) { flex-wrap: nowrap; padding: 8px 16px; cursor: pointer; }
  #app > .cx-notice:not(.is-open) .cx-notice-item { min-width: 0; }
  #app > .cx-notice:not(.is-open) .cx-notice-item > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* The tools: the filter takes the row, the actions stand beside it as equal round buttons (their words for screen readers). */
  .cx-head .cx-tools { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: 44px; align-items: center; gap: 8px; width: 100%; }
  .cx-head .cx-tools > .cx-global-filter { order: -1; min-width: 0; }
  .cx-head .cx-tools > .host-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 14px; justify-content: center; }
  .cx-head .cx-tools > .ac-btn { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .cx-head .cx-tools > .ac-btn > .ac-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-head .cx-tools > .host-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-head .cx-tools > .host-button .tx-ico { width: 20px; height: 20px; }
  .cx.is-night .cx-head .cx-tools > .host-button.quiet .tx-ico, .cx.is-night .cx-head .cx-tools > .ac-btn[data-variant="secondary"] .ac-icon { color: #fff; }
  .cx-head .cx-tools > .cx-global-filter { height: 44px; box-sizing: border-box; padding: 0 12px; border-radius: 14px; }
  .cx-head .cx-tools > .cx-global-filter input { height: 100%; border: 0; background: transparent; font-size: 16px; padding: 0; }
  .cx.is-night .cx-head .cx-tools > .host-button.quiet, .cx.is-night .cx-head .cx-tools > .cx-global-filter, .cx.is-night .cx-head .cx-tools > .ac-btn[data-variant="secondary"] { background: color-mix(in srgb, var(--cx-stage) 72%, #fff 6%); border: 1px solid rgba(255, 255, 255, .14); color: #fff; }
  .cx.is-night .cx-head .cx-global-filter input { color: #fff; }
  .cx.is-night .cx-head .cx-global-filter input::placeholder { color: rgba(255, 255, 255, .55); }
  .cx-ask { border-radius: 16px; }
  /* The assistant: a round button that covers no row. */
  .cx-ai-fab { width: 56px; height: 56px; padding: 0; border-radius: 50%; justify-content: center; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cx-ai-fab > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cx-ai-fab .tx-ico { width: 22px; height: 22px; }
  .tx-block { border-radius: 20px; }
}

/* ── Route flight (Florian 30.09.): the player where the sheet was, ▶ at the trip's start, the panel's button. Glass as
   the globe's other parts; the time machine and the clocks step aside while it flies. ── */
.cx-rf { position: fixed; z-index: 83; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  width: min(460px, calc(100vw - 32px)); padding: 10px 12px 10px 10px; }
.cx-rf[hidden] { display: none; }
.cx-rf:not([hidden]) { animation: cx-rf-in .42s cubic-bezier(.32, .72, 0, 1) both; }
@keyframes cx-rf-in { from { opacity: 0; transform: translate(-50%, 16px) scale(.97); } }
.cx-rf-play, .cx-rf-stop { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; color: var(--cx-stage); background: #fff; transition: transform .15s ease; }
.cx-rf-play:active, .cx-rf-stop:active { transform: scale(.94); }
.cx-rf-play .tx-ico { width: 20px; height: 20px; fill: currentColor; }
.cx-rf-stop { width: 36px; height: 36px; background: rgba(255, 255, 255, .12); color: #fff; }
.cx-rf-stop .tx-ico { width: 16px; height: 16px; }
.cx-rf-words { display: grid; min-width: 0; }
.cx-rf-where { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-rf-count { font-size: 12px; color: var(--cx-stage-muted); font-variant-numeric: tabular-nums; }
.cx-rf-dots { grid-column: 1 / -1; display: flex; gap: 4px; padding: 2px 2px 0; }
.cx-rf-dot { flex: 1; min-width: 6px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .22); cursor: pointer; transition: background .3s ease; }
.cx-rf-dot.is-past { background: color-mix(in srgb, var(--cx-stage-accent) 60%, transparent); }
.cx-rf-dot.is-now { background: var(--cx-stage-accent); }
.cx-rf button:focus-visible { outline: 2px solid var(--cx-stage-accent); outline-offset: 2px; }
.cx-hero-globe.is-flying .cx-tm, .cx-hero-globe.is-flying .cx-wc { visibility: hidden; }
@media (max-width: 640px) { .cx-rf { bottom: calc(var(--sheet-h, 72px) + 12px); } }
@media (prefers-reduced-motion: reduce) { .cx-rf:not([hidden]) { animation: none; } .cx-rf-dot { transition: none; } }
.tx-play-pin { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 2px solid #fff; cursor: pointer;
  background: var(--cx-stage-accent, #3fd2a6); color: var(--cx-stage, #06221c); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transition: transform .15s ease; }
.tx-play-pin:hover { transform: scale(1.08); }
.tx-play-pin .tx-ico { width: 16px; height: 16px; fill: currentColor; margin-left: 2px; }

/* The guide's places on the globe (Florian 30.09.): the travel app's pin with its name; only close up (from z11). */
.tx-place-pin { position: relative; display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; transition: opacity .25s ease; }
.tx-place-pin.is-far { opacity: 0; pointer-events: none; }
.tx-place-pin .tc-poi-pin { width: 30px; height: 30px; font-size: 15px; }

/* ── Transit plugin (DESIGN-PLUGIN-OEPNV §2.2/§2.4): a stop's departures in the globe's sheet, the badge at the stop. ── */
.cx-ts-list { list-style: none; margin: 10px 0 12px; padding: 0; display: grid; gap: 2px; }
.cx-ts-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--sh-hair, rgba(255, 255, 255, .08)); }
.cx-ts-row.is-cancelled .cx-ts-dir { text-decoration: line-through; opacity: .6; }
.cx-ts-line { min-width: 38px; padding: 3px 7px; border-radius: 7px; color: #fff; font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }
.cx-ts-what { display: grid; min-width: 0; }
.cx-ts-dir { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-ts-what small { font-size: 12px; color: var(--sh-muted, rgba(255, 255, 255, .65)); }
.cx-ts-what small.is-changed { color: #ffb86b; }
.cx-ts-when { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.cx-ts-when b { font-size: 15px; }
.cx-ts-when .is-late { color: #ff8a80; font-weight: 700; }
.cx-ts-row.is-cancelled .cx-ts-when b { color: #ff8a80; }
.cx-ts-h { margin: 14px 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--sh-muted, rgba(255, 255, 255, .65)); }
.cx-ts-credit { margin: 12px 0 0; font-size: 12px; color: var(--sh-muted, rgba(255, 255, 255, .6)); }
.tx-stop-badge { display: flex; align-items: center; gap: 6px; padding: 4px 9px 4px 4px; border-radius: 999px; background: rgba(255, 255, 255, .96); color: var(--cx-ink); font: 600 12.5px/1.2 inherit; white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); pointer-events: none; }
.tx-stop-badge-line { padding: 2px 7px; border-radius: 999px; color: #fff; font-size: 12px; }
.tx-stop-badge-arrow { display: inline-block; font-weight: 800; transition: transform .2s ease; }
.tx-stop-badge-to { max-width: 160px; overflow: hidden; text-overflow: ellipsis; color: #3a5a50; font-weight: 500; }

/* The stop beside the route flight (Florian 30.09.): as the travel app shows it – photo, day, place, the way there, text. */
.cx-rf-card { position: fixed; z-index: 83; top: 76px; right: 24px; width: min(340px, calc(100vw - 48px)); max-height: calc(100vh - 220px); overflow: auto; display: grid; gap: 6px;
  padding: 0 0 16px; overscroll-behavior: contain; }
.cx-rf-card[hidden] { display: none; }
.cx-rf-card > :not(.cx-rf-photo) { margin-inline: 18px; }
.cx-rf-card > :first-child:not(.cx-rf-photo) { margin-top: 16px; }
.cx-rf-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 20px 20px 0 0; margin-bottom: 8px; }
.cx-rf-kicker { margin-block: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-stage-accent); font-weight: 650; }
.cx-rf-place { margin-block: 0; font-size: 22px; line-height: 1.2; }
.cx-rf-way { margin-block: 0; font-size: 13px; color: var(--cx-stage-muted); }
.cx-rf-note { margin-block: 6px 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .88); white-space: pre-line; }
.cx-rf-credit { font-size: 12px; color: var(--cx-stage-muted); }
.cx-hero-globe.is-flying .maplibregl-ctrl-top-right { visibility: hidden; }
@media (max-width: 640px) {
  .cx-rf-card { top: auto; right: 8px; left: 8px; width: auto; bottom: calc(var(--sheet-h, 72px) + 128px); max-height: 32vh; padding-bottom: 12px; }
  .cx-rf-photo { aspect-ratio: 16 / 6; margin-bottom: 2px; }
  .cx-rf-card > :first-child:not(.cx-rf-photo), .cx-rf-card > .cx-rf-photo + * { margin-top: 10px; }
  .cx-rf-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* The world clocks keep to the view (clock-choice.ts): a hidden card leaves no gap, an empty row none at all. */
.cx-wc > [hidden], .cx-wc[hidden] { display: none; }

/* Lage am Reiseziel – a news item's sheet (KONZEPT-NEWS §15): headline as text, the source always named, "Warum passt das?". */
.cx-news-head .cx-kicker { margin: 0 0 4px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--cx-muted); font-weight: 650; }
.cx-news-title { margin: 0; font-size: 19px; line-height: 1.3; }
.cx-news-summary { margin: 10px 0 0; line-height: 1.5; }
.cx-news-source { margin: 10px 0 6px; color: var(--cx-muted); font-size: 12.5px; }
.cx-news-why { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--as-accent) 7%, transparent); }
.cx-news-why h4 { margin: 0 0 6px; font-size: 14px; }
.cx-news-why ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; }

/* UX-01: the tour guide's phone – the head slim (no tall globe stage), their group right below it. */
@media (max-width: 640px) {
  .cx-main.role-guide .cx-head.cx-hero.has-globe, .cx-main.role-guide .cx-head.cx-hero.has-globe.is-slim,
  .cx-main.role-guide.has-stage > .cx-head.cx-hero.on-stage { min-height: 0; padding-bottom: 48px; }
  .cx-main.role-guide .cx-hero-summary { display: none; }
  /* The company's figures and the question bar are not the guide's first need on the road (they stay on desktop). */
  .cx-main.role-guide .tx-stage-figures, .cx-main.role-guide .cx-ask, .cx-main.role-guide:not(.has-filter) .cx-cell[data-block="PulseRow"] { display: none; }
}

/* C41: the assistant's answer in words above its blocks; a board folds to its head. */
.cx-board-answer { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--cx-ink); }
.cx-board.is-folded > .cx-grid { display: none; }

/* Teilnehmer drucken: only the list, on paper. */
.cx-print-only { display: none; }
@media print {
  body.is-printing-list > :not(#cx-print) { display: none !important; }
  body.is-printing-list #cx-print { display: block; padding: 0; color: #000; background: #fff; }
  body.is-printing-list #cx-print h1 { font-size: 18px; margin: 0 0 12px; }
  body.is-printing-list #cx-print .tx-block { border: 0; box-shadow: none; padding: 0; }
}

/* UX-10: the areas on a phone – a tab bar at the bottom (icon over label, at most five, the rest under "Mehr"). */
.cx-tabbar { display: none; }
@media (max-width: 640px) {
  .cx-nav.cx-nav-areas { display: none; }
  /* Its own layer in a page switch (Florian 01.10.): the morphing tiles (cx-c0 …) are lifted above the page while the
     view transition runs – the bar must ride above them, unanimated, not stay behind in the page's snapshot. */
  .cx-tabbar { view-transition-name: cx-tabbar; }
  ::view-transition-group(cx-tabbar) { z-index: 100; animation: none; }
  ::view-transition-old(cx-tabbar) { display: none; }
  ::view-transition-new(cx-tabbar) { animation: none; }
  .cx-tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 4px 2px calc(4px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, #fff 92%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-top: 1px solid var(--cx-hair); }
  .cx-tabbar-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
  .cx-tabbar-more { position: relative; }
  .cx-tabbar button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; width: 100%; min-height: 52px; padding: 6px 0; border: 0; border-radius: 10px; background: transparent;
    color: #2b3a33; font: 600 12px/1.2 inherit; font-family: inherit; letter-spacing: -.015em; text-align: center; white-space: nowrap; cursor: pointer; }
  .cx-tabbar button > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .cx-tabbar button .tx-ico { color: var(--cx-muted); }
  .cx-tabbar button.is-active, .cx-tabbar button.is-active .tx-ico { color: var(--as-accent); }
  .cx-tabbar-menu:not([hidden]) { display: grid; position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 210px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--cx-hair); border-radius: 14px; box-shadow: 0 10px 30px rgba(21, 52, 44, .18); }
  .cx-tabbar-menu button { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 44px; padding: 8px 12px; font-size: 15px; }
  .cx-main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .has-ai-fab .cx-main { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  .cx-ai-fab { bottom: calc(76px + env(safe-area-inset-bottom)) !important; }
  body:has(.cx.is-night) .cx-tabbar { background: color-mix(in srgb, var(--cx-stage) 92%, transparent); border-top-color: rgba(255, 255, 255, .09); }
  body:has(.cx.is-night) .cx-tabbar button .tx-ico { color: rgba(231, 238, 235, .62); }
  body:has(.cx.is-night) .cx-tabbar-menu:not([hidden]) { background: color-mix(in srgb, var(--cx-stage) 96%, #fff); border-color: rgba(255, 255, 255, .12); }
  body:has(.cx.is-night) .cx-tabbar button { color: #e7eeeb; }
  body:has(.cx.is-night) .cx-tabbar button.is-active, body:has(.cx.is-night) .cx-tabbar button.is-active .tx-ico { color: var(--cx-stage-accent, #7fe0c4); }
}
/* A sheet, the assistant or the open globe covers the tab bar (as on iOS) – nothing of it lies over their buttons. */
@media (max-width: 640px) {
  body:has(.cx.has-panel) .cx-tabbar, body.cx-ai-open .cx-tabbar, body.cx-globe-open .cx-tabbar { display: none; }
}

/* UX-11 (WCAG 2.2 target size): at least 24 px everywhere, 44 px where a finger taps; the bell's count a size up. */
.cx .tx-linklike { min-height: 24px; }
.cx-bell-count { min-width: 20px; height: 20px; font-size: 12px; line-height: 20px; }
@media (pointer: coarse) {
  .cx .tx-btn, .cx .tx-chip-link, .cx .tx-call, .cx .cx-more, .cx .tx-stage-toggle, .cx .tx-linklike, .cx .host-button, .cx-head .cx-tools button { min-height: 44px; }
  .cx .tx-btn, .cx .tx-call, .cx .tx-chip-link { display: inline-flex; align-items: center; }
  .cx .tx-mark-item { min-height: 44px; }
  .cx summary { min-height: 44px; display: flex; align-items: center; }
  .cx-bell, .cx-account-btn { min-width: 44px; min-height: 44px; }
  .host-brand { display: inline-flex; align-items: center; min-height: 44px; }
  .cx input:not([type=checkbox]):not([type=radio]), .cx select { min-height: 44px; }
}
.cx .as-time-dayh { font-size: 12px; }
/* The bar's small words at the cockpit's 12 px floor (chart axes stay the charts pack's: its tick spacing is made for 10 px). */
.host-brand span, .cx-account-text small { font-size: 12px; }
@media (pointer: coarse) { .cx-nav a { min-height: 44px; } }
/* With 44 px targets the link group stays within the sheet's middle detent: new link and withdraw share a row. */
@media (max-width: 640px) {
  .cx-link-group .cx-panel-actions .host-button.is-wide, .cx-link-group .cx-panel-actions .host-button.is-danger, .cx-link-group .cx-panel-actions .ac-btn.is-wide, .cx-link-group .cx-panel-actions .ac-btn.is-danger { grid-column: auto; }
  .cx-link-group .cx-panel-actions .host-button.is-danger, .cx-link-group .cx-panel-actions .ac-btn.is-danger { margin-top: 0; padding-top: 8px; border: 1px solid #ecd2cf; border-radius: 10px; background: #fff; }
}
/* UX-11 rest (TESTING AGENT): the map's zoom and the detail card's close at 44 px on touch. */
@media (pointer: coarse) {
  .cx .maplibregl-ctrl-group button, .cx-hero-map .maplibregl-ctrl-group button { width: 44px; height: 44px; }
  .cx .maplibregl-popup-close-button { min-width: 44px; min-height: 44px; }
  .cx .tx-icon-btn { min-width: 44px; min-height: 44px; }
}
/* The brand's app icon on a home screen (brand form preview). */
.cx-brand-home { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 4px; width: 88px; text-align: center; }
.cx-brand-appicon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 22%; overflow: hidden; color: #fff; font-size: 26px; box-shadow: 0 4px 14px rgba(21, 52, 44, .18), 0 0 0 1px rgba(0, 0, 0, .06); }
.cx-brand-appicon img { width: 100%; height: 100%; object-fit: cover; }
.cx-brand-appicon.is-pending { opacity: .55; }
.cx-brand-home small { font-size: 12px; max-width: 88px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── crews.express Leitstand (cockpit-crews.ts) ─────────────────────────────────────────────────────────────── */
.cx-crews-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.cx-crews-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; background: color-mix(in srgb, #fff 10%, transparent); }
.cx-crews-tabs a { padding: 8px 14px; border-radius: 9px; color: inherit; font-weight: 600; text-decoration: none; min-height: 24px; }
.cx-crews-tabs a.is-active { background: #fff; color: var(--cx-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cx-crews-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cx-crews-bar > b { min-width: 9ch; text-align: center; }
.cx-crews-bar { width: auto; }
.cx-crews-map .cx-crews-hint { margin: 8px 0 0; color: var(--cx-night-muted, rgba(231, 238, 235, .62)); }
.cx-flip .tx-ico { transform: scaleX(-1); }
.cx-crews-card { background: #fff; color: var(--cx-ink); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04); min-width: 0; }
.cx-crews-card > h2 { margin: 0 0 10px; font-size: 15px; letter-spacing: -0.01em; }
.cx-crews-hint { margin: -4px 0 10px; font-size: 12px; }
.cx-crews-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cx-crews-actions { margin-bottom: 14px; }
.cx-crews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 14px; align-items: start; }
.cx-crews-jobs, .cx-crews-conflicts, .cx-crews-plain, .cx-crews-proofs, .cx-crews-issues, .cx-crews-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-crews-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: #f6f7f4; color: inherit; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cx-crews-job:hover { background: #eef1ec; }
.cx-crews-job b { grid-column: 1; } .cx-crews-job small { grid-column: 1; color: var(--cx-muted); font-size: 12px; }
.cx-crews-chips { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.cx-crews-status, .cx-crews-progress { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #e9ece6; color: #3d4a44; white-space: nowrap; }
/* W85: running is not a warning – "begonnen" in the info tone (blue-grey), never the product accent. */
.cx-crews-status.is-started { background: color-mix(in srgb, var(--bz-info) 14%, transparent); color: var(--bz-info-ink); }
.cx-crews-status.is-done { background: #e3f2e7; color: #166534; }
.cx-crews-status.is-blocked, .cx-crews-status.is-late { background: #fde8e7; color: #b42318; }
.cx-crews-status.is-warn { background: #fef3c7; color: #92400e; }
.cx-tb-card .cx-tb-confirmed { position: absolute; top: 4px; right: 4px; width: 12px; height: 12px; color: #166534; }
.cx-crews-conflict { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 9px 12px; border: 0; border-radius: 12px; background: #fff7ed; color: #7c2d12; font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cx-crews-conflicts li.is-high .cx-crews-conflict { background: #fef2f2; color: #991b1b; }
.cx-crews-conflicts li.is-info .cx-crews-conflict { background: #f3f4f6; color: #374151; }
.cx-crews-conflict .tx-ico { flex: none; margin-top: 2px; }
/* The day's plan: rows (teams/people) × hours; cards at their time, stacked where they overlap. */
.cx-crews-planlayout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 14px; align-items: start; }
.cx-crews-plan { overflow-x: auto; }
.cx-crews-map { grid-column: 1 / -1; }
@media (max-width: 1000px) { .cx-crews-planlayout { grid-template-columns: minmax(0, 1fr); } }
.cx-tb { --label: 148px; min-width: calc(var(--label) + var(--hours) * 58px); }
.cx-tb-scale, .cx-tb-row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr); }
.cx-tb-ticks { position: relative; height: 22px; border-bottom: 1px solid var(--cx-hair); }
.cx-tb-ticks span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 12px; color: var(--cx-muted); font-variant-numeric: tabular-nums; }
.cx-tb-row { border-bottom: 1px solid var(--cx-hair); transition: background .12s; }
.cx-tb-row.is-open { background: #fafaf7; }
.cx-tb-row.is-drop { background: color-mix(in srgb, var(--as-accent) 10%, #fff); box-shadow: inset 3px 0 0 var(--as-accent); }
.cx-tb-label { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 0; min-width: 0; }
.cx-tb-label b { display: block; font-size: 14px; } .cx-tb-label small { display: block; color: var(--cx-muted); font-size: 12px; }
.cx-tb-swatch { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.cx-tb-lane { position: relative; min-height: calc(var(--lines, 1) * 52px + 12px); background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--hours) - 1px), var(--cx-hair) calc(100% / var(--hours) - 1px), var(--cx-hair) calc(100% / var(--hours))); }
.cx-tb-empty { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); color: var(--cx-muted); font-size: 12px; }
.cx-tb-card { position: absolute; top: calc(6px + var(--line, 0) * 52px); height: 46px; box-sizing: border-box; display: grid; align-content: center; gap: 1px; padding: 4px 8px; border-radius: 10px;
  background: color-mix(in srgb, var(--as-accent) 12%, #fff); box-shadow: inset 3px 0 0 var(--as-accent), 0 1px 2px rgba(0, 0, 0, .08); color: var(--cx-ink); overflow: hidden; cursor: grab; touch-action: none; user-select: none;
  transition: box-shadow .14s, transform .14s; }
.cx-tb-card b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cx-tb-card small { font-size: 12px; color: var(--cx-muted); white-space: nowrap; }
.cx-tb-card:hover { box-shadow: inset 3px 0 0 var(--as-accent), 0 4px 12px rgba(0, 0, 0, .14); }
.cx-tb-card:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; }
.cx-tb-card.is-done { background: #eef6f0; box-shadow: inset 3px 0 0 #16a34a; }
.cx-tb-card.is-started { background: color-mix(in srgb, var(--as-accent) 22%, #fff); }
.cx-tb-card.is-blocked, .cx-tb-card.has-conflict { box-shadow: inset 3px 0 0 #dc2626, 0 1px 2px rgba(0, 0, 0, .08); }
.cx-tb-card.is-dragging { z-index: 5; cursor: grabbing; box-shadow: 0 12px 28px rgba(0, 0, 0, .22); transition: none; }
.cx-tb-flag { position: absolute; top: 4px; right: 6px; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .cx-tb-card, .cx-tb-row { transition: none; } }
.cx-crews-week { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cx-crews-week th, .cx-crews-week td { padding: 8px 6px; border-bottom: 1px solid var(--cx-hair); text-align: left; }
.cx-crews-week thead a { color: inherit; font-weight: 600; }
.cx-crews-weekcell { position: relative; display: inline-grid; justify-items: start; min-width: 64px; padding: 6px 10px; border-radius: 10px; background: #f3f5f1; color: inherit; text-decoration: none; }
.cx-crews-weekcell.has-conflict { background: #fef2f2; }
.cx-crews-weekcell small { color: var(--cx-muted); font-size: 12px; }
/* The job sheet. */
.cx-crews-sub { margin-top: 14px; }
.cx-crews-checklist li { display: flex; align-items: center; gap: 8px; }
.cx-crews-check { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--cx-hair); color: #fff; font-size: 13px; }
.cx-crews-checklist li.is-done .cx-crews-check { background: var(--bz-success); box-shadow: none; }
.cx-crews-checklist li.is-required:not(.is-done) .cx-crews-check { box-shadow: inset 0 0 0 1.5px #dc2626; }
.cx-crews-checklist small { color: var(--cx-muted); }
.cx-crews-plain li.is-warn { color: #92400e; }
.cx-crews-issues li { padding: 10px 12px; border-radius: 12px; background: #fff7ed; }
.cx-crews-issues li.is-high { background: #fef2f2; } .cx-crews-issues li.is-resolved { background: #f3f4f6; opacity: .75; }
.cx-crews-issues p { margin: 4px 0; white-space: pre-wrap; } .cx-crews-issues small { color: var(--cx-muted); }
.cx-crews-card .cx-muted, .cx-crews-card .cx-crews-hint, #cx-panel .cx-crews-hint { color: #68766f; }
/* On the night page the cards stay white: their quiet text keeps the card's grey (not the night's light one). */
.cx.is-night .cx-main .cx-crews-card .cx-muted { color: #68766f; }
.cx-tb-card.has-conflict { padding-right: 24px; }
/* Zeiten auswerten: veiled when the window loses focus (DESIGN-ZEITEN-LEITSTAND Z6). */
.cx-crews-times { position: relative; }
.cx-crews-times.is-veiled > * { filter: blur(9px); pointer-events: none; user-select: none; }
.cx-crews-times.is-veiled::after { content: "Ausgeblendet – zum Anzeigen klicken"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: var(--cx-ink); cursor: pointer; }
.cx-crews-times-note { color: var(--cx-night-muted, rgba(231, 238, 235, .62)); margin: -6px 0 12px; }
.cx-crews-sheet h2 { margin: 0 0 4px; font-size: 16px; } .cx-crews-sheet-sum { margin: 0 0 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.cx-crews-entries { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cx-crews-entries li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.cx-crews-diff { margin: 4px 0 10px; font-variant-numeric: tabular-nums; color: var(--cx-ink); }
.cx-crews-settings { display: grid; gap: 10px; margin-bottom: 14px; max-width: 760px; }
.cx-crews-contacts { display: grid; gap: 8px; }
.cx-crews-contact { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1fr auto; gap: 6px; align-items: end; }
@media (max-width: 760px) { .cx-crews-contact { grid-template-columns: 1fr 1fr; } }
.cx-crews-errors { color: #fca5a5; min-height: 1em; }
.cx-crews-note { color: #68766f; font-style: italic; }
.cx-crews-team { margin-bottom: 14px; } .cx-crews-teamhead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cx-crews-job.is-inactive { opacity: .6; }
.cx-crews-status.is-link-bound { background: #e3f2e7; color: #166534; } .cx-crews-status.is-link-unbound { background: #fef3c7; color: #92400e; }
.cx-crews-status.is-link-revoked, .cx-crews-status.is-link-expired { background: #f3f4f6; color: #4b5563; }
.cx-crews-linkonce { display: grid; gap: 10px; justify-items: start; }
.cx-crews-qr { width: 200px; height: 200px; border-radius: 12px; box-shadow: 0 0 0 1px var(--cx-hair); }
.cx-crews-linkonce input { width: 100%; font-family: ui-monospace, monospace; }
.cx-crews-group { border: 0; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.cx-crews-group > legend { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.cx-crews-fieldhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cx-crews-prov { padding: 1px 7px; border-radius: 999px; background: #eef1ec; color: #3d4a44; font-size: 12px; }
.cx-crews-prov.is-adapter { background: #e0f2fe; color: #075985; }
.cx-crews-rows { display: grid; gap: 6px; }
.cx-crews-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(auto-fit, minmax(70px, 1fr)); gap: 6px; align-items: center; }
.cx-crews-map { margin-bottom: 14px; } .cx-crews-map .cx-crews-hint { margin: 8px 4px 0; font-size: 13px; color: var(--bz-muted); }
/* crews.express on its own cockpit address: the mark of the brand page, coloured by the theme. */
body.is-crews .host-brand { gap: 8px; }
body.is-crews .host-brand .cx-crews-logo { width: 26px; height: 26px; color: var(--as-accent, var(--bz-accent)); flex: none; }
body.is-crews .host-brand .cx-crews-word { font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: inherit; }
/* crews: the work order editor inside the Leitstand – a bar with back, state and save over the editor's own frame. */
.cx-crews-wo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.cx-crews-wo-bar .cx-crews-wo-state { flex: 1 1 auto; min-width: 0; }
.cx-crews-wo { min-height: 72vh; background: #fff; color: var(--cx-ink); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04); }
/* R621: wide Leitstand content (the week's seven days) scrolls in its own box; on a phone the page itself never gets
   wider than the screen – a wider page let the browser zoom out and pushed the fixed tab bar below the fold. */
.cx-crews-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; max-width: 100%; }
.cx-crews-scroll:focus-visible { outline: 2px solid var(--as-accent); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 640px) { html, body { overflow-x: clip; } .cx-main { min-width: 0; } }
/* The first paint's line before the cockpit draws (was an inline style – strict CSP). */
.cockpit-status.is-boot { padding: 28px; }
/* crews: colleagues' live points (CREWS-1.3) – the toggle under today's map, a strip while visible, who shares. */
.cx-crews-live { display: grid; gap: 8px; margin-top: 10px; }
.cx-crews-live > .host-button, .cx-crews-live > .ac-btn { justify-self: start; }
.cx-crews-live-strip { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff7ed; color: #7c2d12; font-size: 13px; }
.cx-crews-live-list { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--bz-muted); }
.cx-crews-plugins { display: grid; gap: 12px; }
.cx-crews-plugin { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--cx-hair); }
.cx-crews-plugin p { margin: 4px 0 0; }
.cx-crews-plugin .cx-status.is-on { color: #166534; font-weight: 600; }
/* app-controls checkbox in the cockpit's forms: a row of its own, long consent texts wrap beside the box. */
.ac .ac-check { display: flex; align-items: flex-start; margin: 10px 0; }
.ac .ac-check input { flex: none; margin-top: 2px; }
/* crews Rückfragen: the inbox rows and the conversation in the sheet (text only, the office's own on the right). */
.cx-crews-threads { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-crews-thread { display: grid; gap: 6px; width: 100%; padding: 12px 14px; border: 1px solid var(--cx-hair); border-radius: 12px; background: #fff; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cx-crews-thread:hover { border-color: color-mix(in srgb, var(--as-accent) 40%, var(--cx-hair)); }
.cx-crews-thread.is-unread { border-left: 4px solid var(--as-accent); }
.cx-crews-thread-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.cx-crews-thread-preview { margin: 0; color: #3f4b46; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-crews-thread-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-crews-messages { display: grid; gap: 10px; margin: 8px 0 12px; padding: 0; list-style: none; }
.cx-crews-msg { display: grid; gap: 3px; max-width: 88%; padding: 8px 12px; border-radius: 14px; background: #f3f5f1; }
.cx-crews-msg p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cx-crews-msg.is-office { justify-self: end; background: color-mix(in srgb, var(--as-accent) 12%, #fff); }
.cx-crews-msg.is-ai { background: #f5f3ff; }
.cx-crews-msg.is-system { justify-self: center; background: transparent; font-size: 13px; color: #68766f; }
/* crews: the profile photo in the person's sheet (an <img> from an allowlisted type, round). */
.cx-crews-photo-box { display: grid; gap: 8px; }
.cx-crews-photo-frame { display: flex; align-items: center; gap: 12px; }
.cx-crews-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--cx-hair); }
.cx-crews-photo-none { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: #eef2f0; color: #24302b; font-size: 34px; font-weight: 700; }
/* Datenschutz › Fristen: one table per area, a row opens its details (sources, decision, the tenant's value). */
.cx-retention { margin-top: 16px; }
.cx-retention-area h3 { margin: 16px 0 6px; font-size: 15px; }
.cx-retention-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cx-retention-table th, .cx-retention-table td { padding: 8px 6px; border-bottom: 1px solid var(--cx-hair); text-align: left; vertical-align: top; }
.cx-retention-table td small { display: block; }
.cx-retention-table tbody tr { cursor: pointer; }
.cx-retention-table tbody tr:hover, .cx-retention-table tbody tr:focus-visible { background: color-mix(in srgb, var(--as-accent) 7%, transparent); outline: none; }
.cx-retention-sources { margin: 0; padding-left: 18px; font-size: 13px; overflow-wrap: anywhere; }
/* Eingang (thinks classification): rows with their tags, the detail's fields; colours only from the shared controls / --bz-*. */
/* Verwaltung › Dokumente (documents-page.ts): the list on a card like the other pages' rows; the open document uses the
   full width (outline, page, side panel). The editor and its blocks bring their own stylesheet (cockpit-documents.css). */
.cx-docs.is-editing { max-width: none; }
.cx-docs-list { display: grid; gap: 2px; margin-top: 16px; padding: 6px; border-radius: var(--bz-radius-card, 14px); background: var(--bz-card); color: var(--bz-text); box-shadow: 0 0 0 1px var(--bz-hair); }
/* The documents list (Florian 07.10.): search, sort, mine/all, filter chips; per row status, linked trip, people. */
.cx-docs-filters { display: grid; gap: 8px; padding: 6px 6px 10px; border-bottom: 1px solid var(--bz-hair); margin-bottom: 4px; }
.cx-docs-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.cx-docs-filter-row > .ac-field { flex: 1 1 240px; min-width: 0; margin: 0; }
.cx-docs-rows { display: grid; gap: 2px; }
.cx-docs-row { flex-wrap: wrap; }
.cx-docs-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
.cx-docs-meta .ac-badge { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-docs-people { display: inline-flex; align-items: center; }
.cx-docs-people > .ac-avatar + .ac-avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--bz-card); }
.cx-docs-more { margin-left: 4px; font-size: 12px; color: var(--bz-muted); }
@media (max-width: 760px) { .cx-docs-meta { margin-left: 44px; flex-basis: 100%; } }
.cx-docs-bar { margin: 4px 0 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-docs-bar .cx-relations { margin-top: 0; }
.cx-doc-host { min-width: 0; }
/* The page's own ghost before the editor asset loads: lines in the night shell's text colour (no dark-on-dark). */
.ac-shell[data-surface="dark"] .cx-doc-host > .ac-skeleton { --bz-text: #f4f6f5; }
.cx-intake { display: grid; gap: 16px; }
.cx-intake-list { display: grid; gap: 4px; }
.cx-intake-item { display: grid; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--bz-hair); }
.cx-intake-tags { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 4px; }
.cx-intake-fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; font-size: 14px; }
.cx-intake-fields dt { color: var(--bz-muted); }
.cx-intake-fields dd { margin: 0; overflow-wrap: anywhere; }
/* Message and draft: the card's own pair of tokens (Florian 07.10.: light surface with near-white text – the dark rules of
   the surface reached in; same cause as the editor's toolbar 75a178b4f). */
.cx-intake-text { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 14px; margin: 0; padding: 12px; border-radius: var(--bz-radius-card); background: var(--bz-card); color: var(--bz-text); border: 1px solid var(--bz-hair); }
.cx-intake-try.is-drop { outline: 2px dashed var(--bz-accent); outline-offset: 4px; }
.cx-intake-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cx-intake-try { display: grid; gap: 10px; }
@media (max-width: 640px) { .cx-retention-table thead { display: none; } .cx-retention-table tr { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--cx-hair); } .cx-retention-table td { border: 0; padding: 2px 0; } }
/* Geräte & Lager: rows like the inbox, the places as a tree, the fleet in columns. */
.cx-asset-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cx-asset-row { display: grid; gap: 6px; width: 100%; padding: 10px 14px; border: 1px solid var(--cx-hair); border-radius: 12px; background: #fff; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.cx-asset-row.has-conflict { border-left: 4px solid #b91c1c; }
.cx-asset-main { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.cx-asset-tree { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cx-asset-tree.is-nested { margin: 6px 0 0 18px; padding-left: 10px; border-left: 2px solid var(--cx-hair); }
.cx-asset-fleet { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cx-asset-col h2 { margin: 0 0 8px; font-size: 15px; }
.cx-asset-form { display: grid; gap: 8px; margin-top: 8px; }
.cx-asset-form summary { cursor: pointer; font-weight: 600; }
/* The search grows along the bar – on its field, not the input: the field is a column, a flex basis on the input made it
   260 px high (Florian 06.10., Geräte › Inventar). Fields sit on one baseline; their labels read on the night stage. */
.cx-crews-bar > .ac-field:has(input[type="search"]) { flex: 1 1 260px; min-width: 0; }
.cx-crews-bar { align-items: flex-end; flex-wrap: wrap; }
.cx.is-night .cx-main .cx-crews-bar :is(.ac-field-label, .ac-field-count) { color: var(--cx-night-muted, rgba(255, 255, 255, .72)); }
/* Etiketten drucken: nur die Etiketten auf dem Papier, je Etikett die Größe des Bogens (mm). */
.cx-print-labels { display: none; }
@media print {
  html.cx-printing body > :not(.cx-print-labels) { display: none !important; }
  html.cx-printing .cx-print-labels { display: flex; flex-wrap: wrap; gap: 2mm; }
  .cx-print-label { width: var(--lw); height: var(--lh); box-sizing: border-box; display: flex; gap: 2mm; align-items: center; padding: 1.5mm; border: 0.2mm solid #999; break-inside: avoid; overflow: hidden; color: #000; font: 9pt/1.2 system-ui, sans-serif; }
  .cx-print-label svg { height: 100%; width: auto; flex: none; }
  .cx-print-label p { margin: 0; } .cx-print-label .t { font-weight: 700; } .cx-print-label .c { font-family: ui-monospace, monospace; } .cx-print-label .f { font-size: 7pt; }
}
.cx-crews-proof-img { display: block; max-width: 100%; height: auto; margin-top: 6px; border-radius: 10px; box-shadow: 0 0 0 1px var(--cx-hair); }
/* Verwaltung › Plattform (platform team only). */
.cx-platform .cx-card { margin-top: 16px; }
.cx-platform-table td .host-button, .cx-platform-table td .ac-btn { margin: 0 4px 4px 0; }
.cx-platform-table td .ac-badge { margin: 0 4px 4px 0; }
/* Kundenregister im Einsatzformular: Suche mit Treffern (Auftraggeber, Objekt, Kontakt). */
.cx-crews-register { display: grid; gap: 6px; margin-bottom: 8px; }
/* Verwaltung › Agenten (agents-page.ts): layout only – the controls come from app-controls. */
.cx-agents { display: grid; gap: 14px; }
.cx-agents-group { display: grid; gap: 2px; margin-top: 12px; }
.cx-agents-group h2 { margin: 0 0 4px; font-size: 13px; color: var(--cx-muted); font-weight: 600; }
.cx-agents-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 10px 0; font-size: 14px; }
.cx-agents-facts dt { color: var(--cx-muted); }
.cx-agents-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.cx-agents-levels, .cx-agents-scopes { display: grid; gap: 8px; margin: 14px 0; }
.cx-agents-levels h3, .cx-agents-scopes h3 { margin: 0; font-size: 14px; }
.cx-agents-level { display: grid; gap: 4px; }
.cx-agents-decisions { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-agents-decisions li { display: grid; gap: 2px; }

/* „Einbetten erlauben auf“ (embed-origins.ts): layout only. */
.cx-embed { display: grid; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--cx-hair); }
.cx-embed h3 { margin: 0; font-size: 14px; }
.cx-embed-rows { display: grid; gap: 8px; }
.cx-embed-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 6px; }

/* Verwaltung › Plattform › Demos: layout only. */
.cx-platform-demo-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.cx-platform-demo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cx-platform-demo-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-connectors-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.cx-connector { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--cx-hair); }
.cx-connector:first-child { border-top: 0; }
.cx-connector-text { flex: 1 1 220px; display: grid; gap: 2px; min-width: 0; }
.cx-connector-marks, .cx-connector-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cx-connectors-note:empty { display: none; }
.cx-platform-test-qr { display: flex; justify-content: center; padding: 8px 0; }

/* The supervisor's morning briefing (briefing-card.ts): layout only. */
/* "Ansicht als": why a desk role shows counts only (deskRolesNeed). */
.cx-account-item .cx-account-hint { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--bz-muted); white-space: normal; }
.cx-desk-need { flex-wrap: wrap; }
.cx-briefing { margin-bottom: 14px; border-radius: var(--as-radius, 14px); }
.cx-briefing-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cx-briefing-head h2 { margin: 0; font-size: 15px; }
.cx-briefing-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cx-briefing-point { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
/* Entscheidungen & Lage (decisions-view.ts): head and list, layout only. */
.cx-decisions-head { margin-bottom: 6px; }
.cx-decisions-head h2 { margin: 0; font-size: 15px; }
.cx-decisions-head p { margin: 2px 0 0; }
.cx-decisions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* Reiseleitung & Fahrer (KONZEPT-REISELEITUNG-REGISTER R1): "Zuordnen" in the crew tile, the crew in the app sheet, the Leitstand list. */
.cx-crew-tool { display: flex; justify-content: flex-end; padding: 0 12px 10px; }
.cx-crew-assign { display: grid; gap: 14px; }
.cx-crew-entry { display: grid; gap: 8px; padding: 12px; border-radius: var(--bz-radius-card, 14px); background: var(--bz-card); box-shadow: 0 0 0 1px var(--bz-hair); }
.cx-crew-entry h3 { margin: 0; font-size: 14px; }
.cx-crew-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-crew-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.cx-staffing-body { display: grid; gap: 14px; max-width: 880px; }
.cx-staffing-person { display: grid; gap: 4px; padding: 10px; border-radius: var(--bz-radius-card, 14px); background: var(--bz-card); color: var(--bz-text); box-shadow: 0 0 0 1px var(--bz-hair); }
.cx-staffing-person > p { margin: 4px 8px; color: var(--bz-muted); }

/* Conversation and dashboard share one dark cockpit surface. */
.cx-conversation-dock .cx-workspace { display:flex; flex-direction:column; gap:0; width:100%; height:100%; margin:0; color:var(--cx-night-ink, #e7eeeb); }
.cx-conversation-dock .cx-work-head { flex:none; padding:18px 18px 12px; border-bottom:1px solid var(--cx-night-hair, rgba(255,255,255,.12)); }
.cx-conversation-dock .cx-work-chat { flex:1; min-height:0; height:auto; padding:0 10px 10px; border:0; border-radius:0; background:transparent; color:var(--cx-night-ink, #e7eeeb); box-shadow:none; }
.cx-conversation-dock .cx-work-title-row { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:start; }
.cx-conversation-dock .cx-work-title-row h1 { min-width:0; font-size:18px; line-height:1.3; }
.cx-conversation-dock .cx-work-actions { min-width:0; }
.cx-conversation-dock .cx-work-chat assistant-widget { width:100%; }
.cx-board.is-integrated { padding:0; border:0; border-radius:0; background:transparent; color:inherit; box-shadow:none; animation:none; }
.cx-board.is-integrated.ac-glass { --ac-glass-bg:color-mix(in srgb, var(--bz-stage, #0d1714) 18%, transparent); --ac-glass-edge:rgba(255,255,255,.12); padding:12px; border:1px solid var(--ac-glass-edge); border-radius:var(--bz-r5, 14px); background:var(--ac-glass-bg); box-shadow:none; }
.cx-board.is-integrated .cx-board-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:8px; }
.cx-board.is-integrated .cx-board-menu { display:flex; justify-content:flex-end; flex:none; }
.cx-board-query { min-width:0; color:var(--cx-night-ink, #e7eeeb); }
.cx-board-query p, .cx-board-query summary { margin:0; font-family:inherit; font-size:13px; font-weight:500; line-height:1.4; }
.cx-board-query summary { display:block; cursor:pointer; list-style:none; }
.cx-board-query summary::-webkit-details-marker { display:none; }
.cx-board-query-label { display:block; margin-bottom:2px; color:var(--cx-night-muted, #b8c4bf); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.cx-board-query-text { display:block; overflow-wrap:anywhere; }
.cx-board-query.is-long:not([open]) .cx-board-query-text { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.cx-board-query-cue { display:block; width:max-content; margin-top:2px; color:var(--cx-stage-accent, #7fe0c4); font-size:12px; font-weight:650; }
.cx-board-query .cx-board-query-cue.is-open, .cx-board-query[open] .cx-board-query-cue.is-closed { display:none; }
.cx-board-query[open] .cx-board-query-cue.is-open { display:block; }
.cx-board-context { display:flex; flex-wrap:wrap; gap:4px 12px; min-width:0; margin:0; color:var(--cx-night-muted, #b8c4bf); font-size:12px; line-height:1.35; }
.cx-board-context span { overflow-wrap:anywhere; }
.cx-board.is-integrated .cx-board-top { flex-wrap:wrap; }
.cx-board.is-integrated .cx-board-query { flex:1 1 min(320px, 100%); }
.cx-board.is-integrated .cx-board-context { order:2; flex:1 1 100%; }
.cx-board.is-integrated .cx-board-answer { order:3; flex:1 1 100%; margin:0; color:var(--cx-night-ink); }
.cx-board.is-integrated .cx-board-note { order:4; flex:1 1 100%; color:var(--cx-night-muted); font-size:var(--bz-type-small, 0.75rem); line-height:1.4; }
.cx-board-undo { align-self:flex-start; margin:0 0 8px; }
@media (prefers-reduced-transparency: reduce) { .cx-board.is-integrated.ac-glass { background:color-mix(in srgb, var(--bz-stage, #0d1714) 90%, #fff); } }
.cx-conversation-dock .cx-work-results { display:none; }
.cx-conversation-dock .cx-work-actions { gap:4px; }
.cx-conversation-dock .cx-work-head [data-work-picker] { display:none; }
.cx-conversation-dock .cx-work-chat assistant-widget { height:100%; min-height:0; }
.cx-work-head { display:grid; gap:var(--bz-space-2, 8px); }
.cx-work-title-row { display:flex; align-items:center; justify-content:space-between; gap:var(--bz-space-3, 12px); }
.cx-work-head h1 { min-width:0; margin:0; font-size:clamp(20px, 2vw, 25px); line-height:1.25; overflow-wrap:anywhere; }
.cx-work-actions { display:flex; align-items:center; gap:var(--bz-space-2, 8px); flex:none; }
.cx-work-status { margin:0; color:var(--cx-night-muted, #b8c4bf); font-size:var(--bz-type-meta, .875rem); }
.cx-work-status[hidden], .cx-work-head [data-work-views][hidden] { display:none; }
/* What the assistant is looking at (Florian 05.10.): one quiet line; a page change lights it up once. */
.cx-work-seeing { margin:0; display:inline-flex; align-self:flex-start; gap:6px; padding:3px 10px; border-radius:999px; font-size:var(--bz-type-meta, .875rem); color:var(--cx-night-ink, #fff); background:color-mix(in srgb, var(--as-accent) 22%, transparent); }
.cx-work-seeing[hidden] { display:none; }
/* The line can be taken out of the conversation (×, Florian 07.10.): the button sits inside the pill. */
.cx-work-seeing { align-items:center; }
.cx-work-seeing .ac-icon-btn { margin:-4px -8px -4px 0; color:inherit; }
.cx-work-seeing.is-new { animation: cx-seeing-in .6s var(--bz-motion-ease, ease) both; }
@keyframes cx-seeing-in { from { opacity:.35; background:color-mix(in srgb, var(--as-accent) 55%, transparent); } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .cx-work-seeing.is-new { animation:none; } }
.cx-work-head [data-work-picker] { display:none; }
.cx-work-head [data-work-views] { justify-self:start; padding:4px; border-radius:var(--bz-r4, 13px); background:var(--bz-card, #fff); }
.cx-work-chat, .cx-work-results { min-width:0; padding:var(--bz-space-5, 24px); border:1px solid var(--bz-hair, #e3e6df); border-radius:var(--bz-radius-card, var(--bz-r6, 18px)); background:var(--bz-card, #fff); color:var(--bz-text, #1b1e27); box-shadow:var(--bz-shadow-card, none); }
.cx-work-chat { height:clamp(540px, calc(100dvh - 220px), 820px); box-sizing:border-box; }
.cx-work-chat assistant-widget { display:flex; height:100%; --as-accent:var(--bz-accent); --as-font:var(--bz-font, Lato, sans-serif); }
.cx-work-results .cx-grid { grid-template-columns:minmax(0, 1fr); }
.cx-workspace[data-mode="result"] .cx-work-chat, .cx-workspace[data-mode="chat"] .cx-work-results { display:none; }
.cx-work-nav button span { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-work-nav button > .tx-ico { flex:none; }
.cx-work-nav { grid-template-columns:minmax(0, 1fr); min-width:0; }
.cx-work-nav li, .cx-work-nav button { box-sizing:border-box; min-width:0; width:100%; }
.cx-areas > .cx-work-nav.is-areas + .cx-label { margin-top:18px; }
.cx-work-icon-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.cx-work-icon-grid .ac-btn { width:100%; min-width:0; }
@media (max-width: 560px) { .cx-work-icon-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.cx-work-nav-error { margin:4px 10px; color:var(--cx-night-muted, #b8c4bf); font-size:12px; line-height:1.4; }
@media (min-width: 1001px) { .cx-nav-areas .cx-conversation-tab { display:none; } }
@media (max-width: 1000px) { .cx-work-nav { display:none; } .cx-work-head [data-work-picker] { display:block; max-width:360px; } }
@media (max-width: 760px) {
  .cx-workspace { gap:var(--bz-space-3, 12px); }
  .cx-work-chat, .cx-work-results { padding:var(--bz-space-3, 12px); }
  .cx-work-chat { height:var(--cx-work-chat-height, clamp(280px, calc(100dvh - 320px), 620px)); }
}
@media (max-width: 640px) {
  /* Keep the widget composer clear of the fixed phone tab bar when it receives focus. */
  html:has(.cx-workspace, .cx-plugin-store) { scroll-padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}
.cx-conversation-dock .cx-work-chat { flex:1; min-height:0; height:auto; padding:0 10px 10px; border:0; border-radius:0; background:transparent; color:var(--cx-night-ink, #e7eeeb); box-shadow:none; }
.cx-conversation-dock .cx-work-head [data-work-picker] { display:none; }
@media (max-width: 1000px) {
  .cx.has-conversation:not(.has-panel) { grid-template-columns:minmax(0, 1fr); }
  .cx-conversation-dock { position:fixed; z-index:26; top:var(--cx-bar, 64px); right:0; width:min(var(--cx-conversation-width, 420px), 100vw); box-shadow:-20px 0 60px rgba(0,0,0,.3); }
  .cx-conversation-splitter.ac-splitter { display:none; }
  .cx-conversation-dock .cx-work-head [data-work-picker] { display:block; max-width:100%; }
}
/* The tile's ⋯ (cardMenu): its wrapper must never cover the tile's content (it swallowed the charts' hover, 05.10.) –
   only the ⋯ itself and the open menu take the pointer. Reported to KARTEN-STUDIO for app-controls. */
.cx-cell > .ac-card-menu { pointer-events: none;  top: 10px; right: 12px; }  /* off the tile's round corner (Florian 05.10.) */
.cx-cell > .ac-card-menu > .ac-btn, .cx-cell > .ac-card-menu .ac-menu { pointer-events: auto; }

/* ── Burger navigation (Florian 05.10.): ≤1000 px the sidebar opens as a panel from the left instead of a sideways row. */
.cx-burger { display: none; }
.cx-nav-backdrop { display: none; }
@media (max-width: 1000px) {
  .host-bar > .cx-burger { display: inline-flex; margin-right: 4px; }
  .cx:not(.is-nav-open) > .cx-side { display: none; }
  .cx.is-nav-open > .cx-side { display: flex; position: fixed; z-index: 95; top: 0; left: 0; bottom: auto; width: min(320px, 86vw); height: 100dvh; max-height: 100dvh; box-sizing: border-box;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 14px; padding: 18px 14px; overflow: auto; border-right: 0; border-bottom: 0;
    -webkit-mask-image: none; mask-image: none; scroll-snap-type: none; box-shadow: 0 0 40px rgba(8, 20, 17, .35); animation: cx-nav-in .32s cubic-bezier(.32, .72, 0, 1) both; }
  .cx.is-nav-open > .cx-side .cx-brand, .cx.is-nav-open > .cx-side .cx-label, .cx.is-nav-open > .cx-side .cx-side-foot { display: flex; }
  .cx.is-nav-open > .cx-side .cx-label { display: block; }
  .cx.is-nav-open > .cx-side .cx-areas { display: block; }
  .cx.is-nav-open > .cx-side .cx-nav, .cx.is-nav-open > .cx-side .cx-roles { flex-direction: column; overflow: visible; }
  .cx.is-nav-open > .cx-side .cx-nav button, .cx.is-nav-open > .cx-side .cx-nav a { width: 100%; white-space: normal; justify-content: flex-start; }
  .cx.is-nav-open > .cx-side hr, .cx.is-nav-open > .cx-side .cx-sep { display: block; }
  /* Below 640 px the areas are hidden for the bottom bar – in the opened drawer they show (W96: it opened empty). */
  .cx.is-nav-open > .cx-side .cx-nav.cx-nav-areas { display: flex; }
  .cx.is-nav-open > .cx-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(8, 20, 17, .38); animation: cx-fade-in .3s ease both; }
}
@keyframes cx-nav-in { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .cx.is-nav-open > .cx-side, .cx.is-nav-open > .cx-nav-backdrop { animation: none; } }

/* ── appShell Stufe 1 (?shell=1): the shell's head, navigation and panels around the cockpit. The page's own bar, side
   bar and burger stay built (the bridge mirrors them) but are not shown; the cockpit's grid keeps only its page and
   the conversation; a panel moves the page aside by the shell's inset. ── */
body.cx-in-shell > .host-bar { display: none; }
.cx.is-in-shell > .cx-side, .cx.is-in-shell > .cx-nav-backdrop, body.cx-in-shell .cx-burger { display: none !important; }
.cx.is-in-shell { grid-template-columns: minmax(0, 1fr) !important; min-height: 0; }
/* The page scrolls the window as before (scroll memory, sticky parts): the shell's main does not scroll on its own and
   keeps only the panel's inset; its head stays on top, the navigation and the panels stick below it. */
.cx-shell-root .ac-shell-main { padding: 0 min(var(--ac-panel-inset, 0px), max(0px, 100% - 640px)) 0 0; } /* the page keeps 640 px; a larger panel lies over it */ /* scroll: "window" – no padding of its own, only the panel's inset */
.cx-shell-root .ac-shell-head { z-index: 40; background: var(--bz-bg, #f4f3ee); } /* above the page's own menus */
/* Night (the globe pages): the head in the stage's own dark, as the page's bar was. */
.cx-shell-root[data-surface="dark"] .ac-shell-head { background: color-mix(in srgb, var(--cx-stage, #0b2a24) 94%, #000); color: #e7eeeb; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.cx-shell-root[data-surface="dark"] .ac-shell-head .host-brand { color: #e7eeeb; }
.cx-shell-root .ac-shell-head .host-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.cx-shell-root .ac-shell-nav { position: sticky; top: var(--cx-bar, 56px); align-self: start; max-height: calc(100vh - var(--cx-bar, 56px)); overflow: auto; }
.cx-shell-root .ac-panel-host { position: fixed; top: var(--cx-bar, 56px); }
/* The page keeps at least 420 px: the conversation takes its width, but never more than the room leaves (at once, by CSS). */
@media (min-width: 1001px) { .cx.is-in-shell.has-conversation:not(.conversation-collapsed):not(.has-panel) { grid-template-columns: minmax(0, 1fr) min(var(--cx-conversation-width, 420px), max(320px, calc(100% - 420px))) !important; } }
/* In the shell there is no side bar column: the conversation is the second column (its own rule says the third). */
.cx.is-in-shell > .cx-conversation-dock { grid-column: 2; }
/* Our role menu (roles, CLI, sessions, tenant) sits in the shell's extras for now – the shell's own account stays empty. */
.cx-shell-root .ac-shell-account { display: none; }
/* Our search in the shell's place; up to 760 px the shell folds it behind its one magnifier (W97 R668: two magnifiers
   when this rule outranked the shell's display: none). */
.cx-shell-search { flex: 1; min-width: 0; }
@media (min-width: 761px) { .cx-shell-search { display: flex; } }
.ac-shell[data-search-open="true"] .cx-shell-search { display: flex; }
.cx-shell-search > .cx-search { flex: 1; max-width: none; }
.cx-shell-root .ac-shell-main { min-width: 0; }
/* R669 W97 (measured on the live demo, 375 px): the shell's one column was an auto track and took the head's content
   width (413 px: burger, the wordmark, search, assistant, bell, account) – everything below was cut on the right. On a
   phone the column is the window, and the wordmark scales into its box instead of pushing. */
/* At every width, not only on a phone: between 761 and ~1150 px the head's nowrap title widened the one column and so
   the whole page (twg-staging 06.10.: 773 px window, head 1139 px, the radar's right part out of view). The search keeps
   a width of its own while the title gives way. */
.cx-shell-root.ac-shell { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 761px) { .cx-shell-root .ac-shell-center { min-width: min(260px, 28vw); } }
.cx-shell-root .ac-shell-title, .cx-shell-root .ac-shell-title-text, .cx-shell-root .ac-shell-title .host-brand { min-width: 0; }
/* Too narrow for the wordmark the shell shows the brand's symbol (brand.mark, KARTEN-STUDIO @953cab581): its size and,
   on the night stage, the wordmark's white. */
.cx-shell-root .cx-shell-mark { height: 26px; width: auto; }
body:has(.cx.is-night) .cx-shell-mark [fill]:not([fill="none"]) { fill: #fff; }
body:has(.cx.is-night) .cx-shell-mark [stroke]:not([stroke="none"]) { stroke: #fff; }

/* Omnibar (ui/cockpit-omnibar.ts, DESIGN-OMNIBAR.md): one input in the sheet; controls from app-controls, colours --bz-*. */
/* „+ Neu“ (ui/cockpit-create.ts) takes over „+ Notiz“ in the head; anheften stays in the menu and the notes panel. */
.cx-create-on .nx-pin { display: none; }
/* Verknüpfungen (ui/cockpit-relations.ts): the linked objects as chips under the head, each with its „Lösen“. */
.cx-relations { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; min-width: 0; }
.cx-relations[hidden] { display: none; }
.cx-relation { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.cx-relation > .ac-btn:first-child { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-omni { display: grid; gap: 12px; padding: 4px 2px; border-radius: var(--bz-radius-card, 14px); outline: 2px dashed transparent; outline-offset: 4px; transition: outline-color var(--bz-motion-fast, .15s); }
.cx-omni.is-drop { outline-color: var(--bz-accent, currentColor); }
.cx-omni-actions, .cx-omni-steps { display: flex; flex-wrap: wrap; gap: 8px; }
.cx-omni-result:empty { display: none; }
.cx-omni-card { display: grid; gap: 6px; padding: 12px; border-radius: var(--bz-radius-card, 14px); background: var(--bz-card); color: var(--bz-text); box-shadow: 0 0 0 1px var(--bz-hair); }
.cx-omni-head { margin: 0; }
.cx-omni-line, .cx-omni-kind, .cx-omni-warn, .cx-omni-wait { margin: 0; line-height: 1.45; overflow-wrap: anywhere; }
.cx-omni-kind { font-weight: 600; }
.cx-omni-wait { color: var(--bz-muted); }
.cx-omni-warn { color: var(--bz-danger, currentColor); }
.cx-omni-quote { margin: 0; padding: 8px 10px; border-left: 3px solid var(--bz-hair2, var(--bz-hair)); color: var(--bz-muted); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.cx-omni-steps { margin-top: 4px; }
/* „Inhalt erfassen“ (Florian 07.10.): the line under the title, „Zuordnen zu“, what was captured lately and examples. */
.cx-omni-sub { margin: 0; color: var(--bz-muted); line-height: 1.45; }
.cx-omni-target { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cx-omni-target .ac-combo { flex: 1 1 260px; min-width: 0; }
.cx-omni-target-label { font-weight: 600; margin-right: 4px; }
.cx-omni-target > .ac-btn:nth-child(2) { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-omni-history { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--bz-hair); }
.cx-omni-history:empty { display: none; }
.cx-omni-history > .cx-omni-kind { margin: 0; }
.cx-omni-list { display: grid; gap: 2px; }
.cx-omni-list > * { min-width: 0; }
.cx-omni-examples { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cx-omni-examples > .cx-omni-kind { flex-basis: 100%; margin: 0; }
/* Notes (ui/cockpit-notes.ts): the head's notes buttons sit in one slot – shown only in a tenant's own session (W104). */
.cx-notes-slot { display: contents; }
.cx-notes-slot[hidden] { display: none; }
/* Documents: the editor's bar and side columns stick below the shell's head (document-editor --dx-sticky-top). */
.cx-doc-host { --dx-sticky-top: var(--cx-bar, 0px); }
/* Touch targets in the sheet ≥ 44 px on a phone or a touch screen (W107): the system's large control height. */
@media (max-width: 760px), (pointer: coarse) { .cx-omni-actions .ac-btn, .cx-omni-steps .ac-btn { min-height: max(44px, var(--ac-h-large, 3rem)); } }

/* Entscheidungen & Lage (decisions-view.ts, KONZEPT-ENTSCHEIDUNGEN §7): layout only – controls and colours from app-controls/--bz-*. */
.cx-decisions-view { margin-bottom: 16px; display: grid; gap: 12px; }
.cx-decisions-view[hidden] { display: none; }
.cx-decisions-view .cx-decisions-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cx-decisions-view .cx-decisions-head h2 { margin: 0; font-size: 15px; }
.cx-decisions-view .cx-decisions-head p { margin: 0; }
.cx-decisions-group { display: grid; gap: 8px; }
.cx-decisions-group h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cx-stage-muted, var(--bz-muted)); }
.cx-decisions-view .cx-decisions-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cx-decision-card { min-width: 0; }
.cx-decision-open { all: unset; box-sizing: border-box; display: grid; gap: 4px; width: 100%; min-height: 44px; padding: 12px 14px; border-radius: var(--as-radius, 14px);
  background: var(--bz-card); color: var(--bz-text); box-shadow: 0 0 0 1px var(--bz-hair); cursor: pointer; }
.cx-decision-open:hover { box-shadow: 0 0 0 1px var(--bz-hair2, var(--bz-hair)), 0 6px 18px -12px rgba(0, 0, 0, .35); }
.cx-decision-open:focus-visible { outline: 2px solid var(--bz-accent); outline-offset: 2px; }
.cx-decision-card[data-severity="critical"] .cx-decision-open, .cx-decision-card[data-severity="urgent"] .cx-decision-open { box-shadow: inset 3px 0 0 var(--bz-danger, #b3261e), 0 0 0 1px var(--bz-hair); }
.cx-decision-card[data-severity="attention"] .cx-decision-open { box-shadow: inset 3px 0 0 var(--bz-warn, #8a5a00), 0 0 0 1px var(--bz-hair); }
/* Open decisions on the hero globe (E0 §7): the shared glass callout, its severity as the icon colour. */
.tx-decision-pin { max-width: 220px; }
.tx-decision-pin[data-severity="critical"] .ac-icon, .tx-decision-pin[data-severity="urgent"] .ac-icon { color: var(--bz-danger, #b3261e); }
.tx-decision-pin[data-severity="attention"] .ac-icon { color: var(--bz-warn, #8a5a00); }
.cx-decision-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.cx-decision-open strong { overflow-wrap: anywhere; }
/* The card is light on the night stage too: its quiet lines in the card's muted colour (TESTING: „bis Mi.“ unreadable). */
.cx.is-night .cx-main .cx-decision-card .cx-muted { color: var(--cx-muted); }
.cx-decision-about { font-size: 13px; color: var(--bz-text); overflow-wrap: anywhere; }
.cx-situation-subjects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 4px; }
.cx-situation-subjects-label { font-size: 12px; font-weight: 700; color: var(--bz-muted); margin-right: 2px; }
.cx-decision-rec { font-size: 13px; color: var(--bz-accent-ink, var(--bz-accent)); font-weight: 600; margin: 0; }
.cx-situation { display: grid; gap: 14px; }
.cx-situation-head { display: grid; gap: 4px; }
.cx-situation-head p { margin: 0; }
.cx-situation-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.cx-situation-facts > div { padding: 8px 10px; border-radius: var(--as-radius, 14px); background: var(--bz-sub); }
.cx-situation-facts dt { font-size: 12px; color: var(--bz-muted); }
.cx-situation-facts dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; }
.cx-situation-facts dd small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; line-height: 1.3; }
.cx-situation-blocks { display: grid; gap: 12px; }
.cx-situation-why > summary, .cx-situation-evidence > summary { cursor: pointer; font-weight: 600; }
.cx-situation-evidence ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.cx-situation-extra { display: grid; gap: 8px; }
.cx-situation-extra:empty { display: none; }

/* Verwaltungsseiten im Nachtmodus (Notfix Mi 07.10., Florian twg-staging; das zentrale Seiten-Template baut KARTEN-STUDIO):
   a section.cx-card is a light card on the stage – its labels, muted lines and headings read; messages on the stage read too. */
.cx-main section.cx-card { background: var(--bz-card); color: var(--bz-text); border-radius: var(--as-radius, 14px); padding: 16px 18px; box-shadow: 0 0 0 1px var(--bz-hair); }
.cx-main section.cx-card + section.cx-card, .cx-admin.cx-connectors > .cx-crews-card + .cx-crews-card { margin-top: 16px; }
.cx.is-night .cx-main section.cx-card .cx-muted, .cx.is-night .cx-main .cx-crews-card .cx-muted { color: var(--cx-muted); }
.cx.is-night .cx-main section.cx-card :is(h2, h3) { color: var(--bz-text); }
.cx.is-night .cx-main :is(.cx-admin, .cx-intake) > .cx-cli-msg.is-warn { color: #ffb4a8; }
.cx-audit-table:empty, .cx-crews-card:empty { display: none; }
/* Plugins like the other admin pages: the page on the stage, its cards light (no light page body of its own). */
.cx.is-night .cx-main .cx-plugin-store { background: none; border: 0; box-shadow: none; padding: 0; color: var(--cx-stage-ink, #fff); }
.cx.is-night .cx-main .cx-plugin-head :is(.cx-kicker, .cx-plugin-intro) { color: var(--cx-night-muted); }
/* An empty state straight on the night stage (Eingang: „Noch nichts im Eingang“): the stage's ink, not the card's. */
.cx.is-night .cx-main :is(.cx-intake-list, .cx-admin > div, .cx-admin) > .ac-empty { color: var(--cx-stage-ink, #fff); }
.cx.is-night .cx-main :is(.cx-intake-list, .cx-admin > div, .cx-admin) > .ac-empty :is(b, strong, h2, h3, p, .ac-empty-title, .ac-empty-text) { color: inherit; }
/* ≤1000 px the details sheet is fixed over the page – in the shell it starts below the shell's head (Florian 06.10.: at
   this width the sheet's own head with its close button lay under the shell's head). The phone's bottom sheet is its own. */
@media (max-width: 1000px) { .cx-shell-root .cx-panel.sh-sheet:not(.is-phone) { top: var(--cx-bar, 56px); height: calc(100dvh - var(--cx-bar, 56px)); max-height: calc(100dvh - var(--cx-bar, 56px)); } }
/* Meine Rechte: the sections are the page's own (its gap), one row per right with its state. */
.cx-rights-body { display: contents; }
.cx-rights-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cx-rights-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.cx-messaging-body { display: contents; }
.cx-messaging .cx-crews-plugins { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-messaging .cx-crews-plugin { border: 0; padding: 0; }
.cx-rights-origin { display: block; font-size: 12px; color: var(--bz-muted); }
.cx-rights-text { display: grid; gap: 4px; }
.cx-rights-ways { display: flex; flex-wrap: wrap; gap: 4px; }
/* Verwaltung entries without the right (Florian 07.10.): visible, quieter; a click says which right is missing. */
.cx-nav button.is-locked, .ac-shell-navitem.is-locked { opacity: .55; }
.cx-nav button.is-locked:hover { opacity: .75; }
/* A tile's own foot (e.g. „Als Netz öffnen“ under Zusammenhänge): inside the card, right-aligned. */
.cx-tile-foot { display: flex; justify-content: flex-end; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--bz-border, color-mix(in srgb, currentColor 12%, transparent)); }
/* A page tool that is there but not yet possible (e.g. Reise-App ohne Karte): greyed, explains on hover. */
.cx-head button.is-locked[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

/* Section headings over a group of tiles (cockpit-program.ts SectionTitle: „Tagesprogramm“, „Unterkünfte“ …): the full row, on
   the stage itself – no tile surface, no ⋯ (Florian 07.10.). */
.cx-cell.cx-heading-row { grid-column: 1 / -1; padding: 10px 2px 0; }
.cx-cell.cx-heading-row .as-reise-section { margin: 0; font-size: 17px; font-weight: 700; color: var(--cx-ink, inherit); }
.cx.is-night .cx-cell.cx-heading-row .as-reise-section { color: var(--cx-night-ink); }
/* Tile groups (Florian 07.10.): the heading row of a group in the style of „Tagesprogramm“, with its count, fold and ⋯. The
   packed Lage keeps its order across headings (no dense backfill above a heading). */
.cx-grid.is-grouped.is-packed { grid-auto-flow: row; }
/* A group's heading is text on the page in every position, light and dark: no surface, frame, shadow or radius (Florian
   07.10.: „nicht als Card-Design hinterlegen“). The title in the page's ink, the tools quiet ghosts in the same ink. */
.cx-cell.cx-group-head, .cx-cell.cx-group-head > :first-child { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.cx-group-head { --cx-group-ink: var(--cx-ink, var(--bz-text)); }
.cx.is-night .cx-group-head { --cx-group-ink: var(--cx-night-ink); }
.cx-cell.cx-heading-row.cx-group-head .as-reise-section, .cx.is-night .cx-cell.cx-heading-row.cx-group-head .as-reise-section { color: var(--cx-group-ink); font-size: 19px; font-weight: 700; }
.cx-cell.cx-group-head .cx-group-tools button, .cx-cell.cx-group-head .cx-group-tools button:hover { color: var(--cx-group-ink); background: transparent; border-color: transparent; }
.cx-cell.cx-group-head { padding-top: 18px; padding-bottom: 4px; position: relative; z-index: 2; } /* above the next tile's enlarged ⋯ hit area (touch) */
.cx-cell.cx-group-head:first-child { padding-top: 2px; }
.cx-group-row { display: flex; align-items: center; gap: 8px; min-height: 32px; min-width: 0; max-width: 100%; }
.cx-group-row > .as-reise-section { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cx-group-count { flex: none; }
.cx-group-count { font-size: 12px; font-weight: 600; color: var(--cx-group-ink); padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--cx-group-ink) 12%, transparent); }
.cx-group-tools { margin-left: auto; display: flex; align-items: center; gap: 2px; flex: none; }
.cx-group-head.is-folded .as-reise-section { opacity: .75; }
.cx-cell.cx-heading-row.is-sub .as-reise-section { font-size: 15px; font-weight: 600; }
/* A pick in Zusammenhänge in the app sheet (Florian 07.10.): Öffnen, then the connections as rows. */
.cx-graph-pick-actions { display: flex; gap: 8px; margin: 8px 0 12px; }
.cx-graph-pick-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cx-graph-pick-h { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--bz-muted); }

/* The action bar under the hero of a trip or departure (Florian 07.10.: identity in the hero, actions in one row above
   the cards): the main actions left, filter · why · refresh right; one line, sideways on a phone. Same rhythm as the grid. */
.cx-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px; min-width: 0; }
.cx-actionbar-main, .cx-actionbar-side { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cx-actionbar-main { flex: 1 1 auto; flex-wrap: wrap; }
.cx-actionbar-side { flex: 0 1 auto; }
.cx-actionbar .cx-relations { margin-top: 0; }
.cx-actionbar .cx-global-filter { min-width: 160px; }
@media (max-width: 640px) {
  .cx-actionbar { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .cx-actionbar::-webkit-scrollbar { display: none; }
  .cx-actionbar-main { flex-wrap: nowrap; }
  .cx-actionbar > * { flex: none; }
  .cx-actionbar .cx-global-filter { min-width: 140px; }
}
/* With the action bar the hero keeps only who it is; its own controls (Globus ausfahren, Routenflug) sit quietly as an
   icon group in its lower right corner – their words stay their names for screen readers. */
.cx-head.on-stage.has-actionbar .tx-stage-tools { left: auto; right: 16px; bottom: 12px; transform: none; gap: 6px; }
.cx-main.has-stage > .cx-head.cx-hero.on-stage.has-actionbar:has(.tx-stage-toggle:not([hidden])) { padding-bottom: 56px; }
.cx-head.on-stage.has-actionbar .tx-stage-toggle { min-width: 40px; width: 40px; height: 40px; min-height: 40px; padding: 0; justify-content: center; border-radius: 999px; }
.cx-head.on-stage.has-actionbar .tx-stage-toggle .ac-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) {
  .cx-head.on-stage.has-actionbar .tx-stage-tools { position: absolute; right: 12px; bottom: 12px; margin: 0; justify-content: flex-end; }
  .cx-head.on-stage.has-actionbar .tx-stage-tools .tx-stage-toggle:not(.is-fly) { width: 40px; }
  .cx-main.has-stage > .cx-head.cx-hero.on-stage.has-actionbar:has(.tx-stage-toggle:not([hidden])) { padding-bottom: 64px; }
}
/* The 2D graph in the app sheet (Zusammenhänge as a net): the sheet's height, not its minimum (Florian 07.10.: the graph
   stood small at the top of a tall sheet). Its own layout (graph-view) stays KARTEN-STUDIO's. */
#cx-panel .bz-eg-level, .cx-globe-panel .bz-eg-level { display: flex; flex-direction: column; height: max(22rem, calc(100dvh - 190px)); }
#cx-panel .bz-eg-level > .bz-eg, .cx-globe-panel .bz-eg-level > .bz-eg { flex: 1 1 auto; min-height: 0; }
@media (max-width: 640px) { #cx-panel .bz-eg-level, .cx-globe-panel .bz-eg-level { height: max(18rem, calc(100dvh - 240px)); } }

/* „Mit Claude/ChatGPT verbinden“ (KONZEPT-MCP-ADRESSE M4). */
.cx-chat-url-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-chat-url { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, currentColor 7%, transparent); overflow-wrap: anywhere; font-size: 14px; }
.cx-chat-guide { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.cx-chat-steps h3 { margin: 0 0 6px; font-size: 15px; }
.cx-chat-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.cx-chat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.cx-chat-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.cx-chat-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cx-chat-level-row { margin-bottom: 6px; }