/* CityEL Werkstatt – styles of all viewers.
 * Sections: Teilekatalog (ctk-), Schaltpläne (csp-), shared and new parts (cew-).
 * */

/* Theme rules set a font on every DIV, P, TD … – inside the viewers the font comes from the frame.
   First in the file, so every class rule of the viewers (e.g. monospace codes) still wins. */
.cew-frame :where(div, p, span, table, td, th, tr, li, ol, ul, dl, dt, dd, a, label, small, strong, em, h1, h2, h3, h4, h5, h6, button, input, select, textarea, figcaption, nav, aside, section, header) { font-family: inherit; }

/* CityEL Teilekatalog
 * Layout: tab strip of assembly groups, then drawing (paper) beside a side pane
 * that shows either the parts list or the part detail; stacks in narrow containers.
 * Type and text colour come from the theme; surfaces use the theme's base colour.
 */
.ctk-app,
.ctk-cards,
.ctk-dl,
.ctk-lic {
	--ctk-accent: #0d5a75;
	--ctk-accent-ink: #fff;
	--ctk-surface: var(--wp--preset--color--base, #fff);
	--ctk-line: color-mix(in srgb, currentColor 16%, transparent);
	--ctk-soft: color-mix(in srgb, currentColor 5%, transparent);
	--ctk-muted: color-mix(in srgb, currentColor 62%, transparent);
	--ctk-hi: #ffc61a;
	--ctk-hi-soft: rgba(255, 198, 26, .3);
	--ctk-low: #c2410c;
	--ctk-ok: #15803d;
	--ctk-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--ctk-radius: 8px;
	--ctk-h: min(84vh, 920px);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.ctk-app *, .ctk-app *::before, .ctk-app *::after, .ctk-cards * { box-sizing: border-box; }
.ctk-app.alignfull { padding-inline: max(16px, var(--wp--style--root--padding-left, 16px)); }
.ctk-app { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; margin-block: 1.5em; }
.ctk-app [hidden] { display: none !important; }
.ctk-app button { font: inherit; color: inherit; }
.ctk-app h2, .ctk-app h3, .ctk-app h4, .ctk-app p, .ctk-app ul, .ctk-app dl, .ctk-app figure { margin: 0; }
.ctk-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ctk-loading { color: var(--ctk-muted); }
.ctk-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
.ctk-app :focus-visible { outline: 2px solid var(--ctk-accent); outline-offset: 2px; }

/* --- top: tabs ------------------------------------------------------ */
.ctk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ctk-tabs { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 520px; min-width: 0; padding-bottom: 3px; scrollbar-width: thin; }
.ctk-tab { flex: none; display: flex; align-items: baseline; gap: 6px; padding: 6px 11px 7px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; text-align: left; }
.ctk-tab:hover { border-color: var(--ctk-accent); }
.ctk-tab__code { font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.ctk-tab__name { font-size: .84em; color: var(--ctk-muted); white-space: nowrap; }
.ctk-tab[aria-current="true"] { background: var(--ctk-accent); border-color: var(--ctk-accent); color: var(--ctk-accent-ink); }
.ctk-tab[aria-current="true"] .ctk-tab__name { color: inherit; opacity: .85; }
.ctk-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .86em; color: var(--ctk-muted); cursor: pointer; }

/* --- main panes ----------------------------------------------------- */
.ctk-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); gap: 10px; height: var(--ctk-h); }
.ctk-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ctk-surface); border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); overflow: hidden; }
.ctk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--ctk-line); }
.ctk-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ctk-code { font-weight: 800; font-size: 2em; line-height: 1; color: var(--ctk-accent); min-width: 1.3em; letter-spacing: -.02em; }
.ctk-title { font-size: 1.2em; line-height: 1.15; font-weight: 650; text-wrap: balance; }
.ctk-subtitle { font-size: .8em; color: var(--ctk-muted); margin-top: 2px !important; }
.ctk-zoom { display: flex; gap: 4px; }
.ctk-zoom button { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.ctk-zoom button:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-paper { flex: 1; min-height: 0; overflow: auto; background: var(--ctk-soft); padding: 12px; }
.ctk-stage { position: relative; margin: 0 auto; width: max-content; background: #fff; box-shadow: 0 0 0 1px var(--ctk-line); }
.ctk-stage img { display: block; max-width: none !important; height: auto !important; margin: 0; }
.ctk-marks { position: absolute; inset: 0; pointer-events: none; }
.ctk-mk { position: absolute; border-radius: 4px; background: var(--ctk-hi-soft); transition: background .12s, box-shadow .12s; }
.hide-marks .ctk-mk { background: transparent; }
.ctk-mk.is-hover { background: rgba(255, 198, 26, .55); box-shadow: 0 0 0 2px #16232c; }
.ctk-mk.is-sel { background: rgba(255, 198, 26, .75); box-shadow: 0 0 0 2px #16232c, 0 0 0 6px rgba(255, 198, 26, .5); }

/* --- list ----------------------------------------------------------- */
.ctk-listview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ctk-listbar { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--ctk-line); }
.ctk-search, .ctk-input { width: 100%; font: inherit; font-size: .95em; padding: 7px 10px; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); color: inherit; margin: 0; }
.ctk-stat { font-size: .78em; color: var(--ctk-muted); }
.ctk-tablewrap { flex: 1; min-height: 0; overflow: auto; }
.ctk-table { width: 100%; border-collapse: collapse; font-size: .86em; margin: 0; border: 0; }
.ctk-table th { position: sticky; top: 0; z-index: 1; background: var(--ctk-surface); text-align: left; font-size: .72em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); padding: 8px 6px; border: 0; border-bottom: 1px solid var(--ctk-line); }
.ctk-table td { padding: 6px; border: 0; border-bottom: 1px solid var(--ctk-line); vertical-align: top; }
.ctk-table tbody tr { cursor: pointer; }
.ctk-table tbody tr:hover { background: var(--ctk-hi-soft); }
.ctk-table tbody tr.is-sel { background: color-mix(in srgb, var(--ctk-hi) 30%, var(--ctk-surface)); }
.ctk-table tbody tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--ctk-accent); }
.ctk-table .c-pos { width: 3em; font-family: var(--ctk-mono); font-variant-numeric: tabular-nums; }
.ctk-table .c-art { width: 5.8em; font-family: var(--ctk-mono); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ctk-table .c-qty, .ctk-table .c-stock { width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }
.ctk-table .c-stock { font-weight: 650; }
.ctk-table .c-stock.is-empty { font-weight: 400; color: var(--ctk-muted); }
.ctk-table .c-stock.is-low { color: var(--ctk-low); }
.ctk-table .c-ico { width: 1px; white-space: nowrap; color: var(--ctk-accent); }
.ctk-table .c-ico .ctk-ico-wrap { margin-left: 2px; }
.ctk-table .is-nodraw .c-pos { color: var(--ctk-muted); }
.ctk-table .is-nodraw .c-pos::after { content: "·"; margin-left: 2px; }
.ctk-table .is-sub td { color: var(--ctk-muted); }
.ctk-de { display: block; }
.ctk-en { display: block; color: var(--ctk-muted); font-size: .9em; }

/* --- detail --------------------------------------------------------- */
.ctk-detail { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.ctk-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--ctk-surface); border-bottom: 1px solid var(--ctk-line); }
.ctk-dhead__pos { font-size: .8em; color: var(--ctk-muted); font-variant-numeric: tabular-nums; }
.ctk-dbody { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.ctk-dart { font-family: var(--ctk-mono); font-size: .85em; color: var(--ctk-accent); letter-spacing: .02em; }
.ctk-dtitle h3 { font-size: 1.35em; line-height: 1.2; font-weight: 700; text-wrap: balance; }
.ctk-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .88em; }
.ctk-facts dt { color: var(--ctk-muted); }
.ctk-facts dd { margin: 0; }
.ctk-also { display: flex; flex-wrap: wrap; gap: 4px; }
.ctk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border: 1px solid var(--ctk-line); border-radius: 99px; background: var(--ctk-surface); font-size: .85em; cursor: pointer; text-decoration: none; color: inherit; line-height: 1.6; }
.ctk-chip:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-photo { border-radius: 6px; overflow: hidden; border: 1px solid var(--ctk-line); background: #fff; }
.ctk-photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.ctk-sec h4 { display: flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); margin-bottom: 6px; }
.ctk-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ctk-links li { margin: 0; }
.ctk-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t i" "h i"; align-items: center; column-gap: 8px; padding: 8px 10px; border: 1px solid var(--ctk-line); border-radius: 6px; text-decoration: none !important; color: inherit !important; }
.ctk-link:hover { border-color: var(--ctk-accent); background: var(--ctk-soft); }
.ctk-link__t { grid-area: t; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ctk-link__h { grid-area: h; font-size: .8em; color: var(--ctk-muted); overflow-wrap: anywhere; }
.ctk-link .ctk-ico, .ctk-link .ctk-badge { grid-area: i; color: var(--ctk-accent); }
.ctk-link__n { display: block; font-size: .8em; color: var(--ctk-muted); padding: 2px 10px 0; }
.ctk-badge { font-size: .72em; padding: 1px 6px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-note { white-space: pre-line; font-size: .92em; }
.ctk-empty { font-size: .9em; color: var(--ctk-muted); padding: 10px 12px; border: 1px dashed var(--ctk-line); border-radius: 6px; }
.ctk-hint { font-size: .8em; color: var(--ctk-muted); }

.ctk-stockbox { border: 1px solid var(--ctk-line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.ctk-stockbox.is-low { border-color: var(--ctk-low); background: color-mix(in srgb, var(--ctk-low) 7%, var(--ctk-surface)); }
.ctk-stock__main { display: flex; align-items: center; gap: 10px; }
.ctk-stock__main > .ctk-ico { width: 1.6em; height: 1.6em; color: var(--ctk-accent); }
.ctk-stock__label { display: block; font-size: .75em; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); }
.ctk-stock__qty { display: block; font-size: 1.7em; font-weight: 750; line-height: 1.05; font-variant-numeric: tabular-nums; }
.is-low .ctk-stock__qty { color: var(--ctk-low); }
.ctk-stock__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .84em; color: var(--ctk-muted); }
.ctk-stepper { margin-left: auto; display: flex; gap: 4px; }
.ctk-stepper button { width: 38px; height: 38px; border-radius: 6px; border: 1px solid var(--ctk-line); background: var(--ctk-surface); cursor: pointer; display: grid; place-items: center; }
.ctk-stepper button:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-stepper button:disabled { opacity: .5; cursor: progress; }

/* --- buttons -------------------------------------------------------- */
.ctk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctk-actions--sticky { position: sticky; bottom: -18px; padding: 10px 0 4px; background: var(--ctk-surface); border-top: 1px solid var(--ctk-line); }
.ctk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--ctk-line); background: var(--ctk-surface); cursor: pointer; font-size: .9em; text-decoration: none !important; color: inherit !important; line-height: 1.3; }
.ctk-btn:hover { border-color: var(--ctk-accent); }
.ctk-btn--primary { background: var(--ctk-accent); border-color: var(--ctk-accent); color: var(--ctk-accent-ink) !important; font-weight: 600; }
.ctk-btn--primary:hover { filter: brightness(1.08); }
.ctk-btn--ghost { background: transparent; }
.ctk-btn:disabled { opacity: .6; cursor: progress; }
.ctk-iconbtn { width: 32px; height: 32px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; display: grid; place-items: center; color: var(--ctk-muted); align-self: end; }
.ctk-iconbtn:hover { border-color: var(--ctk-low); color: var(--ctk-low); }

/* --- editor --------------------------------------------------------- */
.ctk-form { display: flex; flex-direction: column; gap: 14px; }
.ctk-fs { border: 1px solid var(--ctk-line); border-radius: 6px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ctk-fs legend { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--ctk-muted); }
.ctk-rows { display: flex; flex-direction: column; gap: 10px; }
.ctk-rows:empty { display: none; }
.ctk-rowedit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; padding-bottom: 10px; border-bottom: 1px dashed var(--ctk-line); }
.ctk-rowedit > .ctk-field:nth-child(3):not(:last-child) { grid-column: 1 / 3; }
.ctk-rowedit > .ctk-iconbtn { grid-column: 3; grid-row: 1; }
.ctk-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctk-field__l { font-size: .75em; color: var(--ctk-muted); }
.ctk-file { font-family: var(--ctk-mono); font-size: .85em; padding: 7px 0; overflow-wrap: anywhere; }
.ctk-pagelink { padding: 7px 0; font-weight: 600; overflow-wrap: anywhere; }
.ctk-row-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.ctk-photo-edit { display: flex; flex-direction: column; gap: 8px; }
.ctk-photo-edit img { max-width: 100%; max-height: 180px; object-fit: contain; align-self: flex-start; border-radius: 4px; border: 1px solid var(--ctk-line); background: #fff; }
.ctk-grid3 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ctk-grid3 > :last-child { grid-column: 1 / -1; }
.ctk-searchbox { position: relative; }
.ctk-sugg { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: 4px; background: var(--ctk-surface); border: 1px solid var(--ctk-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 260px; overflow: auto; }
.ctk-sugg li { margin: 0; }
.ctk-sugg button { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 4px; }
.ctk-sugg button:hover, .ctk-sugg button:focus { background: var(--ctk-soft); }
.ctk-sugg small { color: var(--ctk-muted); }
.ctk-sugg__none { padding: 7px 8px; color: var(--ctk-muted); font-size: .9em; }

/* --- toast ---------------------------------------------------------- */
.ctk-toast { position: fixed; z-index: 100000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #16232c; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.ctk-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ctk-toast.is-err { background: #9f1d1d; }

/* --- narrow containers ---------------------------------------------- */
@container (max-width: 860px) {
	.ctk-main { grid-template-columns: minmax(0, 1fr); height: auto; }
	.ctk-pane--draw .ctk-paper { height: 62vh; }
	.ctk-pane--side { max-height: 80vh; }
	.ctk-listview, .ctk-detail { min-height: 50vh; }
}
@container (max-width: 480px) {
	.ctk-rowedit { grid-template-columns: 1fr auto; }
	.ctk-rowedit > .ctk-field { grid-column: 1; }
	.ctk-rowedit > .ctk-iconbtn { grid-column: 2; grid-row: 1; }
	.ctk-grid3 { grid-template-columns: 1fr; }
	.ctk-tab__name { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ctk-mk, .ctk-toast { transition: none; } }

/* --- in wp-admin ---------------------------------------------------- */
.ctk-in-admin { --ctk-h: calc(100vh - 210px); --ctk-surface: #fff; font-size: 14px; }

/* --- part cards (shortcode / chapter box) ---------------------------- */
.ctk-cards { margin-block: 2em; }
.ctk-cards__h { font-size: 1.15em; margin: 0 0 .6em; }
.ctk-cards__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.ctk-card { margin: 0; display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); background: var(--ctk-surface); align-items: start; }
.ctk-card__img { width: 84px; height: 84px; border-radius: 6px; overflow: hidden; background: var(--ctk-soft); }
.ctk-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ctk-card__body { min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: .92em; }
.ctk-card__body p { margin: 0; }
.ctk-card__title { font-weight: 650; }
.ctk-mono { font-family: var(--ctk-mono); font-weight: 500; color: var(--ctk-accent); font-size: .9em; margin-right: 4px; }
.ctk-card__meta { font-size: .82em; color: var(--ctk-muted); }
.ctk-card__links { display: flex; flex-wrap: wrap; gap: 4px; }
.ctk-card__cat { font-size: .85em; }
.ctk-stock { font-size: .82em; font-weight: 600; color: var(--ctk-ok); }
.ctk-stock.is-low { color: var(--ctk-low); }

/* --- v1.1: type designation, guides, 3D pages ------------------------ */
.ctk-rowedit > :nth-child(n+4):not(.ctk-iconbtn) { grid-column: 1 / 3; }
.ctk-rowedit--wide2 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; }
.ctk-rowedit > .ctk-pageline { grid-column: 1 / -1; }
.ctk-type { display: inline-block; margin-top: 2px; font-family: var(--ctk-mono); font-size: .82em; padding: 0 5px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-typedd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ctk-typeval { font-family: var(--ctk-mono); font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--ctk-soft); border: 1px solid var(--ctk-line); }
.ctk-copy { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--ctk-line); border-radius: 6px; background: var(--ctk-surface); cursor: pointer; }
.ctk-copy:hover { border-color: var(--ctk-accent); color: var(--ctk-accent); }
.ctk-input--mono { font-family: var(--ctk-mono); }
.ctk-model { display: flex; flex-direction: column; }
.ctk-model .ctk-link { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ctk-model__acts { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; border: 1px solid var(--ctk-line); border-top: 0; border-radius: 0 0 6px 6px; font-size: .82em; }
.ctk-model__acts a { display: inline-flex; align-items: center; gap: 4px; color: var(--ctk-accent); text-decoration: none; }
.ctk-model__acts a:hover { text-decoration: underline; }
.ctk-pageline { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .82em; color: var(--ctk-muted); margin: 0; }
.ctk-pageline a { color: var(--ctk-accent); font-weight: 600; }
.ctk-check { cursor: pointer; color: inherit; }
.ctk-card__type { font-size: .82em; }

/* download box on a 3D page */
.ctk-dl { display: flex; flex-direction: column; gap: 0; padding: 0 14px; margin-block: 0 1.5em; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); background: var(--ctk-soft); }
.ctk-dl__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 0; }
.ctk-dl__row + .ctk-dl__row { border-top: 1px solid var(--ctk-line); }
.ctk-dl .ctk-dl__ext--link { background: transparent; color: var(--ctk-accent); border: 2px solid var(--ctk-accent); font-size: 1.4em; }
.ctk-dl__file { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ctk-dl__file strong { display: block; overflow-wrap: anywhere; }
.ctk-dl__file small { display: block; color: var(--ctk-muted); }
.ctk-dl__ext { flex: none; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 8px; background: var(--ctk-accent); color: var(--ctk-accent-ink); font-weight: 800; font-size: .85em; letter-spacing: .03em; }
.ctk-dl .ctk-btn--primary { font-size: 1em; }

/* 3D overview grid */
.ctk-mgrid { display: flex; flex-direction: column; gap: 12px; }
.ctk-mgrid__search { max-width: 420px; }
.ctk-mgrid__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.ctk-mcard { margin: 0; }
.ctk-mcard[hidden] { display: none; }
.ctk-mcard__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); overflow: hidden; background: var(--ctk-surface); color: inherit !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.ctk-mcard__link:hover { border-color: var(--ctk-accent); box-shadow: 0 4px 18px rgba(0, 0, 0, .08); }
.ctk-mcard__img { aspect-ratio: 4 / 3; background: var(--ctk-soft); overflow: hidden; max-width: 100%; }
.ctk-mcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ctk-mcard__ph { width: 100%; height: 100%; display: grid; place-items: center; font-weight: 800; font-size: 1.6em; letter-spacing: .04em; color: var(--ctk-accent); }
.ctk-mcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.ctk-mcard__t { font-size: 1.05em; line-height: 1.25; margin: 0; text-wrap: balance; }
.ctk-mcard__ex { font-size: .88em; margin: 0; color: var(--ctk-muted); }
.ctk-mcard__meta { margin: auto 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8em; }
.ctk-mcard__parts { color: var(--ctk-muted); }
@media (prefers-reduced-motion: reduce) { .ctk-mcard__link { transition: none; } }

/* featured image on a 3D page (when the theme does not show it) */
.ctk-hero { margin: 0 0 1.25em; border-radius: var(--ctk-radius, 8px); overflow: hidden; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); background: #fff; }
.ctk-hero a { display: block; }
.ctk-hero img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; margin: 0; }

/* narrow side pane: name + remove in one row, everything else full width */
@container (max-width: 480px) {
	.ctk-rowedit, .ctk-rowedit--wide2 { grid-template-columns: minmax(0, 1fr) auto; }
	.ctk-rowedit > .ctk-field:not(:first-child), .ctk-rowedit > .ctk-pageline { grid-column: 1 / -1; }
}

/* variants */
.ctk-app .ctk-linkbtn, .ctk-linkbtn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--ctk-accent); cursor: pointer; font-size: inherit; font-weight: 600; }
.ctk-app .ctk-linkbtn:hover, .ctk-linkbtn:hover { text-decoration: underline; }
.ctk-newvar { flex-basis: 100%; color: var(--ctk-ok); }
.ctk-dl__row--all { background: transparent; }

/* preview images (1.3) */
.ctk-link.has-thumb { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "img t i" "img h i"; }
.ctk-link__img { grid-area: img; width: 56px; height: 56px; object-fit: cover; border-radius: 4px; background: var(--ctk-soft); margin: 0; }
.ctk-dl__ext.has-img { position: relative; padding: 0; overflow: hidden; background: #f2f4f6; text-decoration: none; }
.ctk-dl .ctk-dl__ext.has-img { width: 72px; height: 72px; }
.ctk-dl__ext.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; }
.ctk-dl__ext.has-img em { position: absolute; left: 0; bottom: 0; padding: 1px 5px; font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; background: var(--ctk-accent); color: var(--ctk-accent-ink); border-top-right-radius: 4px; }

/* link preview control in the editor (1.3.1) */
.ctk-rowedit > .ctk-lp { grid-column: 1 / -1; }
.ctk-lp { display: flex; gap: 10px; align-items: center; font-size: .8em; color: var(--ctk-muted); }
.ctk-lp img, .ctk-lp__ph { flex: none; width: 44px; height: 44px; border-radius: 4px; object-fit: cover; background: var(--ctk-soft); border: 1px solid var(--ctk-line); display: grid; place-items: center; margin: 0; }
.ctk-lp__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ctk-lp__err { color: var(--ctk-low); overflow-wrap: anywhere; }
.ctk-lp__acts { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.ctk-app .ctk-linkbtn:disabled { opacity: .5; cursor: progress; }

/* licence block on a 3D page (1.4) */
.ctk-lic { margin-block: 0 1.5em; padding: 12px 14px; border: 1px solid var(--ctk-line); border-radius: var(--ctk-radius); }
.ctk-lic p { margin: 0; }
.ctk-lic__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: 4px !important; }
.ctk-lic__head strong { font-size: 1.05em; }
.ctk-lic__short { font-weight: 700; letter-spacing: .02em; font-size: .9em; }
.ctk-lic__icons { display: inline-flex; gap: 4px; color: var(--ctk-accent); }
.ctk-lic__ico { width: 26px; height: 26px; }
.ctk-lic__text { font-size: .92em; }
.ctk-lic__text a { color: var(--ctk-accent); }
.ctk-badge--lic { font-weight: 600; }

/* one 3D model for several parts (1.5) */
.ctk-model__also { padding: 6px 10px; border: 1px solid var(--ctk-line); border-top: 0; border-radius: 0 0 6px 6px; margin-top: -1px; font-size: .82em; color: var(--ctk-muted); }
.ctk-model__acts:has(+ .ctk-model__also) { border-radius: 0; }
.ctk-pageline__also { flex-basis: 100%; }
.ctk-sugg__main { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ctk-sugg__main img { width: 32px; height: 32px; object-fit: cover; border-radius: 3px; flex: none; margin: 0; }
.ctk-sugg button { align-items: center; }
.ctk-sugg button:disabled { opacity: .55; cursor: default; }
.ctk-sugg small { text-align: right; max-width: 45%; }

/* CityEL Schaltpläne
 * Same look as the "CityEL Teilekatalog": tab strip of plans, drawing (paper) beside a side pane
 * with component list / detail, fault finding and legend; stacks in narrow containers.
 * Type and text colour come from the theme; surfaces use the theme's base colour.
 */
.csp-app,
.csp-ctk {
	--csp-accent: #0d5a75;
	--csp-accent-ink: #fff;
	--csp-surface: var(--wp--preset--color--base, #fff);
	--csp-line: color-mix(in srgb, currentColor 16%, transparent);
	--csp-soft: color-mix(in srgb, currentColor 5%, transparent);
	--csp-muted: color-mix(in srgb, currentColor 62%, transparent);
	--csp-hi: #ffc61a;
	--csp-hi-soft: rgba(255, 198, 26, .28);
	--csp-link: #1f6fd1;
	--csp-low: #c2410c;
	--csp-ok: #15803d;
	--csp-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--csp-radius: 8px;
	--csp-h: min(84vh, 940px);
	font-size: 15px;
	line-height: 1.45;
	box-sizing: border-box;
}
.csp-app *, .csp-app *::before, .csp-app *::after { box-sizing: border-box; }
.csp-app.alignfull { padding-inline: max(16px, var(--wp--style--root--padding-left, 16px)); }
.csp-app { container-type: inline-size; display: flex; flex-direction: column; gap: 10px; margin-block: 1.5em; position: relative; }
.csp-app [hidden] { display: none !important; }
.csp-app button { font: inherit; color: inherit; }
.csp-app h2, .csp-app h3, .csp-app h4, .csp-app p, .csp-app ul, .csp-app ol, .csp-app dl, .csp-app figure { margin: 0; }
.csp-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.csp-loading { color: var(--csp-muted); }
.csp-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
.csp-app :focus-visible { outline: 2px solid var(--csp-accent); outline-offset: 2px; }
.csp-mono { font-family: var(--csp-mono); font-weight: 600; color: var(--csp-accent); }

/* --- note ------------------------------------------------------------ */
.csp-note { font-size: .84em; padding: 8px 12px; border-left: 3px solid var(--csp-low); background: color-mix(in srgb, var(--csp-low) 6%, var(--csp-surface)); border-radius: 0 6px 6px 0; }

/* --- top: vehicle, search, toggles ----------------------------------- */
.csp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.csp-vehwrap { position: relative; }
.csp-veh { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--csp-line); border-radius: 6px; background: var(--csp-surface); cursor: pointer; font-weight: 600; }
.csp-veh:hover { border-color: var(--csp-accent); }
.csp-veh.is-set { border-color: var(--csp-accent); background: color-mix(in srgb, var(--csp-accent) 8%, var(--csp-surface)); color: var(--csp-accent); }
.csp-vehpanel { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); padding: 14px; background: var(--csp-surface); border: 1px solid var(--csp-line); border-radius: var(--csp-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); }
.csp-vehform { display: flex; flex-direction: column; gap: 10px; }
.csp-searchbox { position: relative; display: flex; align-items: center; }
.csp-top .csp-searchbox { flex: 1 1 260px; max-width: 460px; }
.csp-searchbox > .csp-ico { position: absolute; left: 10px; color: var(--csp-muted); pointer-events: none; }
.csp-gsearch { padding-left: 34px !important; }
.csp-toggles { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.csp-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: .86em; color: var(--csp-muted); cursor: pointer; }

/* --- tabs ------------------------------------------------------------ */
.csp-tabrow { display: flex; align-items: center; gap: 10px; min-width: 0; }
.csp-tabs { display: flex; gap: 14px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 3px; scrollbar-width: thin; }
.csp-tabgrp { flex: none; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; align-items: stretch; column-gap: 4px; row-gap: 3px; }
.csp-tabgrp__l { grid-column: 1 / span 9; font-size: .68em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--csp-muted); white-space: nowrap; padding-left: 2px; }
.csp-tab { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 5px 10px 6px; border: 1px solid var(--csp-line); border-radius: 6px; background: var(--csp-surface); cursor: pointer; text-align: left; line-height: 1.2; }
.csp-tab:hover { border-color: var(--csp-accent); }
.csp-tab__code { font-weight: 700; font-size: 1.1em; letter-spacing: -.01em; }
.csp-tab__name { font-size: .74em; color: var(--csp-muted); white-space: nowrap; }
.csp-tab.is-other { opacity: .55; border-style: dashed; }
.csp-tab[aria-current="true"] { background: var(--csp-accent); border-color: var(--csp-accent); color: var(--csp-accent-ink); opacity: 1; }
.csp-tab[aria-current="true"] .csp-tab__name { color: inherit; opacity: .85; }
.csp-tabs__more { flex: none; font-size: .84em; }

/* --- main panes ------------------------------------------------------ */
.csp-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 410px); gap: 10px; height: var(--csp-h); }
.csp-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--csp-surface); border: 1px solid var(--csp-line); border-radius: var(--csp-radius); overflow: hidden; }
.csp-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 12px; border-bottom: 1px solid var(--csp-line); }
.csp-head { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 300px; }
.csp-code { font-weight: 800; font-size: 2em; line-height: 1; color: var(--csp-accent); min-width: 1.6em; letter-spacing: -.02em; }
.csp-title { font-size: 1.2em; line-height: 1.15; font-weight: 650; text-wrap: balance; }
.csp-subtitle { font-size: .78em; color: var(--csp-muted); margin-top: 2px !important; }
.csp-barbtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.csp-zoom { display: flex; gap: 4px; }
.csp-zoom button { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--csp-line); border-radius: 6px; background: var(--csp-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.csp-zoom button:hover { border-color: var(--csp-accent); color: var(--csp-accent); }
.csp-paper { flex: 1; min-height: 0; overflow: auto; background: var(--csp-soft); padding: 12px; cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.csp-paper.is-panning { cursor: grabbing; user-select: none; }
.csp-stage { position: relative; margin: 0 auto; width: max-content; background: #fff; box-shadow: 0 0 0 1px var(--csp-line); }
.csp-stage img { display: block; max-width: none !important; height: auto !important; margin: 0; user-select: none; -webkit-user-drag: none; image-rendering: auto; }
.csp-marks { position: absolute; inset: 0; pointer-events: none; }
.csp-mk { pointer-events: auto; }

/* --- marks ----------------------------------------------------------- */
.csp-mk { position: absolute; padding: 0; margin: 0; border: 0; border-radius: 4px; background: transparent; cursor: pointer; transition: background .12s, box-shadow .12s; min-width: 6px; min-height: 6px; }
.show-marks .csp-mk { background: var(--csp-hi-soft); }
.show-marks .csp-mk--verweis { background: rgba(31, 111, 209, .14); box-shadow: inset 0 0 0 1px rgba(31, 111, 209, .55); }
.show-marks .csp-mk--legende { background: rgba(120, 120, 120, .08); box-shadow: inset 0 0 0 1px rgba(120, 120, 120, .35); }
.show-marks .csp-mk.is-off { background: repeating-linear-gradient(45deg, rgba(120, 120, 120, .18) 0 4px, transparent 4px 8px); }
.csp-mk:hover, .csp-mk:focus-visible { background: rgba(255, 198, 26, .5) !important; box-shadow: 0 0 0 2px #16232c; outline: none; }
.csp-mk.is-sel { background: rgba(255, 198, 26, .62) !important; box-shadow: 0 0 0 2px #16232c, 0 0 0 6px rgba(255, 198, 26, .5); }
.csp-mk.is-ping { animation: csp-ping 1.1s ease-out 1; }
@keyframes csp-ping { 0% { box-shadow: 0 0 0 2px #16232c, 0 0 0 0 rgba(255, 198, 26, .9); } 100% { box-shadow: 0 0 0 2px #16232c, 0 0 0 26px rgba(255, 198, 26, 0); } }
.csp-mk__t { display: none; position: absolute; left: -1px; bottom: 100%; margin-bottom: 2px; padding: 1px 5px; border-radius: 3px; background: #16232c; color: #fff; font: 600 11px/1.35 var(--csp-mono); white-space: nowrap; pointer-events: none; }
.csp-mk:hover .csp-mk__t, .csp-mk:focus-visible .csp-mk__t, .csp-mk.is-sel .csp-mk__t { display: block; }
.show-labels.is-zoomed .csp-mk__t { display: block; background: color-mix(in srgb, #16232c 82%, transparent); }
.show-labels.is-zoomed .csp-mk--legende .csp-mk__t { display: none; }
.csp-mk__h { display: none; }

/* --- side pane ------------------------------------------------------- */
.csp-sidetabs { display: flex; border-bottom: 1px solid var(--csp-line); }
.csp-sidetab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 6px 9px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; font-size: .88em; color: var(--csp-muted); }
.csp-sidetab:hover { color: inherit; }
.csp-sidetab[aria-selected="true"] { color: var(--csp-accent); border-bottom-color: var(--csp-accent); font-weight: 600; }
.csp-listview { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.csp-listbar { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--csp-line); }
.csp-input { width: 100%; font: inherit; font-size: .95em; padding: 7px 10px; border: 1px solid var(--csp-line); border-radius: 6px; background: var(--csp-surface); color: inherit; margin: 0; min-height: 36px; }
.csp-input--mono { font-family: var(--csp-mono); }
textarea.csp-input { resize: vertical; }
.csp-stat { font-size: .78em; color: var(--csp-muted); }
.csp-tablewrap, .csp-scroll { flex: 1; min-height: 0; overflow: auto; }
.csp-scroll { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 16px; }
.csp-table { width: 100%; border-collapse: collapse; font-size: .86em; margin: 0; border: 0; }
.csp-table thead th { position: sticky; top: 0; z-index: 2; background: var(--csp-surface); text-align: left; font-size: .72em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--csp-muted); padding: 8px 6px; border: 0; border-bottom: 1px solid var(--csp-line); }
.csp-table td { padding: 6px; border: 0; border-bottom: 1px solid var(--csp-line); vertical-align: top; }
.csp-table tr.csp-grp th { position: sticky; top: 30px; z-index: 1; text-align: left; font-size: .72em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--csp-accent); background: color-mix(in srgb, var(--csp-accent) 6%, var(--csp-surface)); padding: 5px 6px; border: 0; border-bottom: 1px solid var(--csp-line); }
.csp-table tbody tr[data-id] { cursor: pointer; }
.csp-table tbody tr[data-id]:hover, .csp-table tbody tr.is-hover { background: var(--csp-hi-soft); }
.csp-table tbody tr.is-sel { background: color-mix(in srgb, var(--csp-hi) 30%, var(--csp-surface)); }
.csp-table tbody tr.is-open td:first-child { box-shadow: inset 3px 0 0 var(--csp-accent); }
.csp-table tbody tr.is-off { color: var(--csp-muted); }
.csp-table .c-ref { width: 4.8em; font-family: var(--csp-mono); font-weight: 600; white-space: nowrap; color: var(--csp-accent); }
.csp-table .c-val { width: 4.6em; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.csp-name { display: block; }
.csp-sub { display: block; color: var(--csp-muted); font-size: .86em; }
.csp-sub--art { font-family: var(--csp-mono); font-size: .8em; }

/* --- detail ---------------------------------------------------------- */
.csp-detail { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.csp-dhead { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--csp-surface); border-bottom: 1px solid var(--csp-line); }
.csp-dhead__pos { font-size: .8em; color: var(--csp-muted); }
.csp-dbody { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.csp-dref { font-family: var(--csp-mono); font-size: 1.05em; font-weight: 700; color: var(--csp-accent); letter-spacing: .02em; }
.csp-dtitle h3, .csp-chkhead h3 { font-size: 1.3em; line-height: 1.2; font-weight: 700; text-wrap: balance; display: flex; align-items: center; gap: 8px; }
.csp-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: .88em; }
.csp-facts dt { color: var(--csp-muted); }
.csp-facts dd { margin: 0; }
.csp-info { font-size: .94em; white-space: pre-line; }
.csp-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.csp-badge { display: inline-block; font-size: .74em; padding: 1px 7px; border-radius: 4px; background: var(--csp-soft); border: 1px solid var(--csp-line); margin-left: 4px; vertical-align: 1px; }
.csp-badges .csp-badge { margin: 0; }
.csp-badge--off { border-color: var(--csp-low); color: var(--csp-low); background: color-mix(in srgb, var(--csp-low) 7%, var(--csp-surface)); }
.csp-sec h4, .csp-h4 { display: flex; align-items: center; gap: 6px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--csp-muted); margin-bottom: 6px; }
.csp-h4btn { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 1.1em; }
.csp-also { display: flex; flex-wrap: wrap; gap: 4px; }
.csp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border: 1px solid var(--csp-line); border-radius: 99px; background: var(--csp-surface); font-size: .85em; cursor: pointer; text-decoration: none; color: inherit; line-height: 1.6; }
.csp-chip:hover { border-color: var(--csp-accent); color: var(--csp-accent); }
.csp-chip.is-other { border-style: dashed; color: var(--csp-muted); }
.csp-chip__x { border: 0; background: none; padding: 0; margin-left: 2px; cursor: pointer; color: var(--csp-muted); display: inline-grid; place-items: center; }
.csp-chip__x:hover { color: var(--csp-low); }
.csp-artchips { display: flex; flex-wrap: wrap; gap: 4px; }
.csp-mini { width: 100%; border-collapse: collapse; font-size: .84em; margin: 0; border: 0; }
.csp-mini th { text-align: left; font-size: .8em; font-weight: 650; color: var(--csp-muted); padding: 4px 6px; border: 0; border-bottom: 1px solid var(--csp-line); }
.csp-mini td { padding: 4px 6px; border: 0; border-bottom: 1px solid var(--csp-line); vertical-align: top; }
.csp-wire { display: inline-flex; align-items: center; gap: 2px; }
.csp-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.csp-sw--lg { width: 16px; height: 16px; border-radius: 3px; }
.csp-wire .csp-mono { margin-left: 4px; font-weight: 500; }
.csp-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.csp-links li { margin: 0; }
.csp-link { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "t i" "h i"; align-items: center; column-gap: 8px; padding: 8px 10px; border: 1px solid var(--csp-line); border-radius: 6px; text-decoration: none !important; color: inherit !important; }
a.csp-link:hover { border-color: var(--csp-accent); background: var(--csp-soft); }
.csp-link.has-thumb { grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "img t i" "img h i"; }
.csp-link__img { grid-area: img; width: 48px; height: 48px; object-fit: cover; border-radius: 4px; background: var(--csp-soft); margin: 0; display: grid; place-items: center; color: var(--csp-muted); }
.csp-link__t { grid-area: t; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.csp-link__h { grid-area: h; font-size: .8em; color: var(--csp-muted); overflow-wrap: anywhere; }
.csp-link > .csp-ico { grid-area: i; color: var(--csp-accent); }
.csp-empty { font-size: .9em; color: var(--csp-muted); padding: 10px 12px; border: 1px dashed var(--csp-line); border-radius: 6px; }
.csp-hint { font-size: .8em; color: var(--csp-muted); }

/* --- buttons --------------------------------------------------------- */
.csp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.csp-actions--sticky { position: sticky; bottom: -18px; padding: 10px 0 4px; background: var(--csp-surface); border-top: 1px solid var(--csp-line); z-index: 2; }
.csp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--csp-line); background: var(--csp-surface); cursor: pointer; font-size: .9em; text-decoration: none !important; color: inherit !important; line-height: 1.3; }
.csp-btn:hover { border-color: var(--csp-accent); }
.csp-btn--primary { background: var(--csp-accent); border-color: var(--csp-accent); color: var(--csp-accent-ink) !important; font-weight: 600; }
.csp-btn--primary:hover { filter: brightness(1.08); }
.csp-btn--ghost { background: transparent; }
.csp-editbtn[aria-pressed="true"] { background: var(--csp-hi); border-color: #16232c; color: #16232c !important; font-weight: 600; }
.csp-iconbtn { width: 34px; height: 34px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--csp-muted); margin-left: auto; }
.csp-iconbtn:hover { border-color: var(--csp-line); color: inherit; }
.csp-iconbtn--del:hover { border-color: var(--csp-low); color: var(--csp-low); }
.csp-app .csp-linkbtn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--csp-accent); cursor: pointer; font-weight: 600; text-align: left; }
.csp-app .csp-linkbtn:hover { text-decoration: underline; }
.csp-app .csp-linkbtn:disabled { color: inherit; cursor: default; text-decoration: none; }

/* --- search suggestions --------------------------------------------- */
.csp-sugg { position: absolute; z-index: 25; left: 0; right: 0; top: calc(100% + 2px); list-style: none; margin: 0; padding: 4px; background: var(--csp-surface); border: 1px solid var(--csp-line); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); max-height: 360px; overflow: auto; }
.csp-gresults { min-width: min(460px, calc(100vw - 32px)); }
.csp-sugg li { margin: 0; }
.csp-sugg button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 8px; border: 0; background: none; cursor: pointer; text-align: left; border-radius: 4px; }
.csp-sugg button:hover, .csp-sugg button:focus { background: var(--csp-soft); outline: none; }
.csp-sugg button.is-other { opacity: .6; }
.csp-sugg button:disabled { opacity: .5; cursor: default; }
.csp-sugg__main { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.csp-sugg small { color: var(--csp-muted); text-align: right; max-width: 48%; }
.csp-sugg__none { padding: 7px 8px; color: var(--csp-muted); font-size: .9em; }

/* --- fault finding --------------------------------------------------- */
.csp-chkhead { display: flex; flex-direction: column; gap: 6px; }
.csp-chkhead h3 .csp-ico { color: var(--csp-accent); }
.csp-steps { list-style: none; padding: 0; counter-reset: s; display: flex; flex-direction: column; gap: 6px; }
.csp-step { counter-increment: s; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--csp-line); border-radius: 6px; margin: 0; }
.csp-step::before { content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: .8em; font-weight: 700; background: var(--csp-soft); border: 1px solid var(--csp-line); }
.csp-step__tip { font-size: .82em; color: var(--csp-muted); margin-top: 2px !important; }
.csp-step__btns { display: flex; gap: 4px; }
.csp-step__btns button { width: 34px; height: 34px; border-radius: 6px; border: 1px solid var(--csp-line); background: var(--csp-surface); cursor: pointer; display: grid; place-items: center; color: var(--csp-muted); }
.csp-okbtn[aria-pressed="true"] { background: var(--csp-ok); border-color: var(--csp-ok); color: #fff !important; }
.csp-badbtn[aria-pressed="true"] { background: var(--csp-low); border-color: var(--csp-low); color: #fff !important; }
.csp-okbtn:hover { border-color: var(--csp-ok); color: var(--csp-ok); }
.csp-badbtn:hover { border-color: var(--csp-low); color: var(--csp-low); }
.csp-step.is-ok { background: color-mix(in srgb, var(--csp-ok) 6%, var(--csp-surface)); }
.csp-step.is-ok::before { content: "✓"; background: var(--csp-ok); color: #fff; border-color: var(--csp-ok); }
.csp-step.is-bad { border-color: var(--csp-low); background: color-mix(in srgb, var(--csp-low) 7%, var(--csp-surface)); }
.csp-step.is-skip { opacity: .55; }
.csp-result { padding: 10px 12px; border-radius: 6px; display: flex; flex-direction: column; gap: 6px; font-size: .92em; }
.csp-result.is-bad { border: 1px solid var(--csp-low); background: color-mix(in srgb, var(--csp-low) 8%, var(--csp-surface)); }
.csp-result.is-ok { border: 1px solid var(--csp-ok); background: color-mix(in srgb, var(--csp-ok) 8%, var(--csp-surface)); }

/* --- legend ---------------------------------------------------------- */
.csp-colors { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: .9em; }
.csp-colors li { display: flex; align-items: center; gap: 6px; margin: 0; }
.csp-calc { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px; align-items: end; }
.csp-calc__out { grid-column: 1 / -1; font-size: 1.6em; font-weight: 750; font-variant-numeric: tabular-nums; color: var(--csp-accent); }
.csp-keys { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .88em; }
.csp-keys li { display: flex; align-items: center; gap: 8px; margin: 0; }
.csp-key { width: 28px; height: 16px; border-radius: 3px; background: var(--csp-hi-soft); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.csp-key--verweis { background: rgba(31, 111, 209, .14); box-shadow: inset 0 0 0 1px rgba(31, 111, 209, .55); }
.csp-key--legende { background: rgba(120, 120, 120, .08); box-shadow: inset 0 0 0 1px rgba(120, 120, 120, .35); }
.csp-key--off { background: repeating-linear-gradient(45deg, rgba(120, 120, 120, .3) 0 4px, transparent 4px 8px); }

/* --- forms ----------------------------------------------------------- */
.csp-form { display: flex; flex-direction: column; gap: 12px; }
.csp-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.csp-field__l { font-size: .75em; color: var(--csp-muted); }
.csp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.csp-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.csp-fs { border: 1px solid var(--csp-line); border-radius: 6px; padding: 10px 12px 12px; margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.csp-fs legend { padding: 0 4px; font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--csp-muted); }
.csp-check { display: inline-flex; align-items: center; gap: 6px; font-size: .9em; cursor: pointer; }

/* --- editor ---------------------------------------------------------- */
.csp-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; background: color-mix(in srgb, var(--csp-hi) 22%, var(--csp-surface)); border-bottom: 1px solid var(--csp-line); font-size: .88em; }
.csp-savebar__btns { display: flex; flex-wrap: wrap; gap: 6px; }
.is-editing .csp-paper { cursor: crosshair; }
.is-editing .csp-mk { background: rgba(255, 198, 26, .35) !important; box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .7); cursor: move; }
.is-editing .csp-mk.is-sel { box-shadow: 0 0 0 2px #16232c, 0 0 0 5px rgba(255, 198, 26, .6); }
.is-editing .csp-mk__h { display: block; position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border-radius: 2px; background: #16232c; border: 2px solid #fff; cursor: nwse-resize; }
.csp-draft { position: absolute; border: 2px dashed #16232c; background: rgba(255, 198, 26, .3); border-radius: 4px; pointer-events: none; }

/* --- toast ----------------------------------------------------------- */
.csp-toast { position: fixed; z-index: 100000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #16232c; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.csp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.csp-toast.is-err { background: #9f1d1d; }

/* --- narrow containers ----------------------------------------------- */
@container (max-width: 900px) {
	.csp-main { grid-template-columns: minmax(0, 1fr); height: auto; }
	.csp-pane--draw .csp-paper { height: 62vh; }
	.csp-pane--side { max-height: 85vh; }
	.csp-listview, .csp-detail, .csp-scroll { min-height: 50vh; }
	.csp-toggles { order: 3; }
}
@container (max-width: 520px) {
	.csp-top .csp-searchbox { max-width: none; flex-basis: 100%; }
	.csp-tabgrp__l { display: none; }
	.csp-tab__name { display: none; }
	.csp-code { font-size: 1.6em; }
	.csp-grid2 { grid-template-columns: 1fr; }
	.csp-calc { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .csp-mk, .csp-toast { transition: none; } .csp-mk.is-ping { animation: none; } }

/* --- in wp-admin ----------------------------------------------------- */
.csp-in-admin { --csp-h: calc(100vh - 250px); --csp-surface: #fff; font-size: 14px; }
.csp-admin-wrap .notice.inline { margin: 10px 0; }

/* --- section in the parts catalog (ctk-bridge.js) -------------------- */
.csp-ctk .ctk-link__t { color: inherit; }

/* =====================================================================
 * Shared (cew-): icons, inputs, vehicle choice, links, picker, overlay
 * ===================================================================== */
.cew, .cew-admin, .csp-app, .ctk-app, .cew-app {
	--cew-accent: #0d5a75;
	--cew-accent-ink: #fff;
	--cew-surface: var(--wp--preset--color--base, #fff);
	--cew-line: color-mix(in srgb, currentColor 16%, transparent);
	--cew-soft: color-mix(in srgb, currentColor 5%, transparent);
	--cew-muted: color-mix(in srgb, currentColor 62%, transparent);
	--cew-hi: #ffc61a;
	--cew-hi-soft: rgba(255, 198, 26, .28);
	--cew-low: #c2410c;
	--cew-ok: #15803d;
	--cew-live: #e11d48;
	--cew-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--cew-radius: 8px;
}
.cew-ico { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -0.2em; }
.cew-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cew [hidden], .cew-app [hidden] { display: none !important; }
.cew-input { width: 100%; font: inherit; font-size: .95em; padding: 7px 10px; border: 1px solid var(--cew-line); border-radius: 6px; background: var(--cew-surface); color: inherit; margin: 0; min-height: 36px; box-sizing: border-box; }
.cew-hint { font-size: .8em; color: var(--cew-muted); margin: 0; }
.cew-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cew-field__l { font-size: .75em; color: var(--cew-muted); }
.cew-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cew-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: 6px; border: 1px solid var(--cew-line); background: var(--cew-surface); cursor: pointer; font: inherit; font-size: .9em; text-decoration: none !important; color: inherit !important; line-height: 1.3; }
.cew-btn:hover { border-color: var(--cew-accent); }
.cew-btn--primary { background: var(--cew-accent); border-color: var(--cew-accent); color: var(--cew-accent-ink) !important; font-weight: 600; }
.cew-btn--ghost { background: transparent; }
.cew-btn--sm { padding: 3px 9px; font-size: .8em; }
.cew-iconbtn { width: 34px; height: 34px; border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer; display: inline-grid; place-items: center; color: var(--cew-muted); margin-left: auto; }
.cew-iconbtn:hover { border-color: var(--cew-line); color: inherit; }
.cew-linkbtn { display: inline-flex; align-items: center; gap: 3px; padding: 0; border: 0; background: none; color: var(--cew-accent); cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
.cew-linkbtn:hover { text-decoration: underline; }
.cew-badge { display: inline-block; font-size: .74em; padding: 1px 7px; border-radius: 4px; background: var(--cew-soft); border: 1px solid var(--cew-line); }
.cew-badge--off { border-color: var(--cew-low); color: var(--cew-low); }

/* vehicle choice (shared by all viewers) */
.cew-vehwrap { position: relative; }
.cew-veh { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--cew-line); border-radius: 6px; background: var(--cew-surface); cursor: pointer; font: inherit; font-weight: 600; color: inherit; }
.cew-veh:hover { border-color: var(--cew-accent); }
.cew-veh.is-set { border-color: var(--cew-accent); background: color-mix(in srgb, var(--cew-accent) 8%, var(--cew-surface)); color: var(--cew-accent); }
.cew-vehpanel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(380px, calc(100vw - 32px)); padding: 14px; background: var(--cew-surface); border: 1px solid var(--cew-line); border-radius: var(--cew-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .14); display: flex; flex-direction: column; gap: 8px; }
.cew-vehpanel__h { margin: 0; font-size: .72em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--cew-muted); }
.cew-vehform { display: flex; flex-direction: column; gap: 10px; }
.cew-fleet { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cew-fleet li { margin: 0; }
.cew-fleet__btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--cew-line); border-radius: 6px; background: var(--cew-surface); cursor: pointer; text-align: left; font: inherit; color: inherit; }
.cew-fleet__btn:hover, .cew-fleet__btn.is-on { border-color: var(--cew-accent); }
.cew-fleet__btn.is-on { background: color-mix(in srgb, var(--cew-accent) 8%, var(--cew-surface)); }
.cew-fleet__img { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; flex: none; margin: 0; }
.cew-fleet__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.cew-fleet__t small { color: var(--cew-muted); }

/* links to other targets */
.cew-refsec .csp-link > .cew-ico:first-child, .csp-link__t .cew-ico { color: var(--cew-accent); margin-right: 2px; }
.csp-link.is-missing, .ctk-link.is-missing { opacity: .6; border-style: dashed; }
.cew-alts { margin: 3px 0 0 10px; font-size: .8em; color: var(--cew-muted); }
.cew-alts a { color: inherit; }
.cew-alts a.is-other { opacity: .65; }
.cew-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.cew-chip small { color: var(--cew-muted); }
.cew-chip.is-missing { border-style: dashed; color: var(--cew-low); }
.cew-picker { display: flex; flex-direction: column; gap: 6px; }
.cew-searchbox { position: relative; }
.cew-sugg { max-height: 300px; }

/* inline references in content and the box below wiki pages / reports */
a.cew-ref { text-decoration-style: dotted; }
.cew-ref.is-missing { color: var(--cew-low); border-bottom: 1px dashed currentColor; cursor: help; }
.cew-refbox { margin-block: 2em 1em; padding: 12px 16px 14px; border: 1px solid var(--cew-line); border-radius: var(--cew-radius); font-size: .95em; }
.cew-refbox__h { font-size: .78em !important; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--cew-muted); margin: 10px 0 6px !important; }
.cew-refbox__h:first-child { margin-top: 0 !important; }
.cew-refbox__list { margin: 0; padding-left: 1.1em; }
.cew-refbox__sub { color: var(--cew-muted); font-size: .85em; }

/* stage overlay (wires, flow) */
.cew-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.cew-draft { position: absolute; border: 2px dashed #16232c; background: rgba(255, 198, 26, .3); border-radius: 4px; pointer-events: none; }

.cew-toast { position: fixed; z-index: 100000; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; background: #16232c; color: #fff; padding: 9px 16px; border-radius: 6px; font-size: 14px; transition: opacity .2s, transform .2s; max-width: calc(100vw - 32px); }
.cew-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.cew-toast.is-err { background: #9f1d1d; }


/* ==================================================================
 * Frame around every viewer: "Vollbild" button (core.js) and alignment
 * ================================================================== */
.cew-frame { margin-block: 1.5em; box-sizing: border-box; min-width: 0; }
.cew-frame > .ctk-app, .cew-frame > .csp-app, .cew-frame > .cew-app { margin-block: 0; }
.cew-frame.alignfull { padding-inline: max(16px, var(--wp--style--root--padding-left, 16px)); box-sizing: border-box; }
.cew-frame__bar { display: flex; justify-content: flex-end; margin-bottom: 6px; }
.cew-fs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; margin: 0; font: inherit; font-size: 13px; line-height: 1.3; color: inherit; background: transparent; border: 1px solid color-mix(in srgb, currentColor 24%, transparent); border-radius: 6px; cursor: pointer; }
.cew-fs-btn:hover, .cew-fs-btn:focus-visible { border-color: currentColor; }
.cew-fs-btn[hidden] { display: none; }
.cew-fs-btn .cew-ico { width: 1.05em; height: 1.05em; }

/* full screen (Fullscreen API) and the overlay fallback (.is-fs-pseudo, e.g. iPhone) */
.cew-frame.is-fs { margin: 0; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); width: 100%; height: 100%; max-width: none; box-sizing: border-box; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; background: var(--cew-fs-bg, #fff); }
.cew-frame.is-fs-pseudo { position: fixed; inset: 0; z-index: 100001; height: 100dvh; }
html.cew-fs-open, html.cew-fs-open body { overflow: hidden; }
.cew-frame.is-fs > .cew-frame__bar { flex: none; }
.cew-frame.is-fs > .ctk-app, .cew-frame.is-fs > .csp-app { flex: 1 1 auto; min-height: 0; }
.cew-frame.is-fs .ctk-main, .cew-frame.is-fs .csp-main { flex: 1 1 0; height: auto; min-height: 380px; }
.cew-frame.is-fs > .cew-app { --cew-h: max(420px, calc(100dvh - 170px)) !important; }
@container (max-width: 860px) { .cew-frame.is-fs .ctk-main { flex: none; min-height: 0; } }
@container (max-width: 900px) { .cew-frame.is-fs .csp-main { flex: none; min-height: 0; } }

/* =====================================================================
 * Schaltpläne: stacking of marks, wires, Stromlauf
 * ===================================================================== */
.csp-app { --csp-live: #e11d48; }
.csp-sidetabs { overflow-x: auto; scrollbar-width: none; }
.csp-sidetab { white-space: nowrap; }
@container (max-width: 1180px) { .csp-sidetab__t { display: none; } .csp-sidetab[aria-selected="true"] .csp-sidetab__t { display: inline; } }
/* a group (board, box) with components inside stays behind them and is drawn lighter */
.show-marks .csp-mk.is-group { background: rgba(255, 198, 26, .09); box-shadow: inset 0 0 0 1.5px rgba(196, 140, 0, .55); }
.csp-mk.is-group:hover { background: rgba(255, 198, 26, .16) !important; box-shadow: inset 0 0 0 2px #16232c !important; }
.csp-mk.is-group.is-sel { background: rgba(255, 198, 26, .2) !important; }
.csp-mk:hover .csp-mk__t, .csp-mk:focus-visible .csp-mk__t { z-index: 1; }
/* selection ring above everything, does not take clicks */
.csp-selring { position: absolute; z-index: 100000; pointer-events: none; border-radius: 4px; box-shadow: 0 0 0 2px #16232c, 0 0 0 6px rgba(255, 198, 26, .55); }
.csp-selring.is-ping { animation: csp-ping 1.1s ease-out 1; }
.csp-key--group { background: rgba(255, 198, 26, .09); box-shadow: inset 0 0 0 1.5px rgba(196, 140, 0, .55); }
.csp-mk.is-sel { box-shadow: none; }
.is-editing .csp-mk.is-group { background: rgba(255, 198, 26, .12) !important; }

/* wires */
.csp-w-under { fill: none; stroke: rgba(22, 35, 44, .55); stroke-width: 11; stroke-linecap: round; }
.csp-w-c { fill: none; stroke-width: 7; stroke-linecap: round; opacity: .92; }
.csp-w-stripe { fill: none; stroke-width: 7; stroke-dasharray: 14 14; stroke-linecap: butt; }
.csp-w-none { fill: none; stroke: rgba(120, 120, 120, .55); stroke-width: 6; stroke-dasharray: 10 8; }
.csp-w-none.is-hidden { stroke: rgba(200, 60, 60, .35); }
.csp-w-under.is-sel { stroke: #ffc61a; stroke-width: 19; }
.csp-w-c.is-sel, .csp-w-none.is-sel { stroke-width: 9; }
.csp-w-hit { fill: none; stroke: transparent; stroke-width: 18; pointer-events: stroke; cursor: pointer; }
.csp-w-hit:hover { stroke: rgba(255, 198, 26, .35); }
.csp-app:not(.show-wires):not(.is-wiremode) .csp-w-colors, .csp-app:not(.show-wires):not(.is-wiremode) .csp-w-hits { display: none; }
.is-wiremode .csp-mk { pointer-events: none; }
.is-wiremode.show-marks .csp-mk { background: rgba(255, 198, 26, .1); }
.csp-wirelist { display: flex; flex-wrap: wrap; gap: 4px; }
.csp-netbox { border: 1px solid var(--csp-line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.csp-netbox h4 { margin: 0 !important; }

/* Stromlauf */
.csp-w-live { fill: none; stroke: var(--csp-live); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 18 10; animation: csp-flow 1.2s linear infinite; }
.csp-w-dead { fill: none; stroke: #9aa3ab; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 6 8; }
.csp-w-strom .csp-w-under { stroke: rgba(255, 255, 255, .75); }
@keyframes csp-flow { to { stroke-dashoffset: -28; } }
.is-strom .csp-mk.in-circ { box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .6); }
.is-strom .csp-mk.is-closed { background: rgba(21, 128, 61, .28) !important; }
.is-strom .csp-mk.is-open { background: rgba(194, 65, 12, .25) !important; }
.is-strom .csp-mk.is-live { background: rgba(225, 29, 72, .3) !important; }
.is-strom .csp-mk.is-dead { background: rgba(120, 120, 120, .2) !important; }
.is-strom .csp-mk.is-stop { box-shadow: 0 0 0 3px var(--csp-low) !important; }
.csp-circ { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.csp-circ__el { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--csp-line); border-radius: 6px; margin: 0; }
.csp-circ__dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa3ab; }
.csp-circ__el.is-closed .csp-circ__dot { background: var(--csp-ok); }
.csp-circ__el.is-open .csp-circ__dot { background: var(--csp-low); }
.csp-circ__el.is-live .csp-circ__dot { background: var(--csp-live); box-shadow: 0 0 0 3px rgba(225, 29, 72, .2); }
.csp-circ__el.is-stop { border-color: var(--csp-low); background: color-mix(in srgb, var(--csp-low) 6%, var(--csp-surface)); }
.csp-circ__el.is-off { opacity: .6; }
.csp-circ__main { display: flex; flex-direction: column; min-width: 0; }
.csp-switch { position: relative; width: 42px; height: 24px; border-radius: 99px; border: 1px solid var(--csp-line); background: var(--csp-soft); cursor: pointer; padding: 0; flex: none; }
.csp-switch__k { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: left .15s; }
.csp-switch[aria-checked="true"] { background: var(--csp-ok); border-color: var(--csp-ok); }
.csp-switch[aria-checked="true"] .csp-switch__k { left: 20px; }
.csp-btn--sm { padding: 3px 9px; font-size: .8em; }
.csp-btn--sm[aria-pressed="true"] { border-color: var(--csp-low); color: var(--csp-low) !important; }
.csp-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.csp-seg__b { padding: 5px 10px; border: 1px solid var(--csp-line); border-radius: 99px; background: var(--csp-surface); cursor: pointer; font-size: .84em; }
.csp-seg__b[aria-pressed="true"] { background: var(--csp-accent); border-color: var(--csp-accent); color: var(--csp-accent-ink) !important; }
.csp-result p { margin: 0; }
.csp-locked { padding: 16px 18px; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: 8px; }
.csp-locked p { margin: 0 0 .6em; }
.csp-linkbox { display: flex; flex-direction: column; gap: 14px; }
.csp-linkbox:empty { display: none; }
@media (prefers-reduced-motion: reduce) { .csp-w-live { animation: none; } .csp-switch__k { transition: none; } .csp-selring.is-ping { animation: none; } }

/* =====================================================================
 * Teilekatalog: number marks as buttons, hotspot editor, schematics links
 * ===================================================================== */
.ctk-marks { pointer-events: none; }
.ctk-mk { pointer-events: auto; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; color: inherit; }
.ctk-mk:hover, .ctk-mk:focus-visible { background: rgba(255, 198, 26, .55); box-shadow: 0 0 0 2px #16232c; outline: none; }
.ctk-mk.is-orphan { background: repeating-linear-gradient(45deg, rgba(120, 120, 120, .25) 0 4px, transparent 4px 8px); }
.ctk-paper { cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.ctk-paper.is-panning { cursor: grabbing; user-select: none; }
.ctk-table tbody tr.is-hover { background: var(--ctk-hi-soft); }
.ctk-topr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ctk-topr .cew-veh { font-size: .92em; padding: 5px 10px; }
.ctk-banner { margin: 0; font-size: .84em; padding: 8px 12px; border-left: 3px solid var(--ctk-low); background: color-mix(in srgb, var(--ctk-low) 6%, var(--ctk-surface)); border-radius: 0 6px 6px 0; }
.ctk-barbtns { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ctk-hotbtn[aria-pressed="true"] { background: var(--ctk-hi); border-color: #16232c; color: #16232c !important; font-weight: 600; }
.ctk-savebar { border-bottom: 1px solid var(--ctk-line); }
.is-hotedit .ctk-paper { cursor: crosshair; }
.is-hotedit .ctk-mk { background: rgba(255, 198, 26, .4) !important; box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .7); cursor: move; }
.is-hotedit .ctk-mk.is-edit { box-shadow: 0 0 0 2px #16232c, 0 0 0 5px rgba(255, 198, 26, .6); }
.ctk-mk__n { position: absolute; left: 100%; top: -2px; margin-left: 2px; padding: 0 4px; border-radius: 3px; background: #16232c; color: #fff; font: 600 10px/1.5 var(--ctk-mono); pointer-events: none; white-space: nowrap; }
.ctk-mk__h { display: none; }
.is-hotedit .ctk-mk__h { display: block; position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border-radius: 2px; background: #16232c; border: 2px solid #fff; cursor: nwse-resize; }
.ctk-links li.has-x { display: flex; align-items: center; gap: 4px; }
.ctk-links li.has-x > :first-child { flex: 1; min-width: 0; }
.ctk-links li.is-other { opacity: .6; }
.ctk-linkx { align-self: center; }
.csp-ctk .ctk-searchbox { margin-top: 6px; }
.ctk-backlinks:empty { display: none; }
.ctk-sec .csp-links { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* =====================================================================
 * Fehlersuche (cew-fsp) and shared app frame (cew-app)
 * ===================================================================== */
.cew-app { --cew-h: min(84vh, 940px); container-type: inline-size; display: flex; flex-direction: column; gap: 10px; margin-block: 1.5em; font-size: 15px; line-height: 1.45; box-sizing: border-box; }
.cew-app *, .cew-app *::before, .cew-app *::after { box-sizing: border-box; }
.cew-app.alignfull { padding-inline: max(16px, var(--wp--style--root--padding-left, 16px)); }
.cew-app button { font: inherit; color: inherit; }
.cew-app h2, .cew-app h3, .cew-app p, .cew-app ul, .cew-app ol, .cew-app figure { margin: 0; }
.cew-app :focus-visible { outline: 2px solid var(--cew-accent); outline-offset: 2px; }
.cew-loading { color: var(--cew-muted); }
.cew-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.cew-top .cew-searchbox { flex: 1 1 260px; max-width: 520px; display: flex; align-items: center; }
.cew-searchbox > .cew-ico { position: absolute; left: 10px; color: var(--cew-muted); pointer-events: none; }
.cew-top .cew-searchbox .cew-input { padding-left: 34px; }
.cew-sub { font-size: .8em; color: var(--cew-muted); margin-top: 2px !important; }
.cew-note { font-size: .86em; padding: 8px 12px; border-left: 3px solid var(--cew-accent); background: color-mix(in srgb, var(--cew-accent) 6%, var(--cew-surface)); border-radius: 0 6px 6px 0; }
.cew-note.is-warn { border-left-color: var(--cew-low); background: color-mix(in srgb, var(--cew-low) 6%, var(--cew-surface)); }
.cew-empty { font-size: .9em; color: var(--cew-muted); padding: 10px 12px; border: 1px dashed var(--cew-line); border-radius: 6px; }
.cew-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.cew-seg__b { padding: 4px 10px; border: 1px solid var(--cew-line); border-radius: 99px; background: var(--cew-surface); cursor: pointer; font-size: .82em; }
.cew-seg__b[aria-pressed="true"] { background: var(--cew-accent); border-color: var(--cew-accent); color: var(--cew-accent-ink) !important; }
.cew-zoom { display: flex; gap: 4px; }
.cew-zoom button { min-width: 34px; height: 32px; padding: 0 10px; border: 1px solid var(--cew-line); border-radius: 6px; background: var(--cew-surface); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .85em; }
.cew-zoom button:hover { border-color: var(--cew-accent); color: var(--cew-accent); }
.cew-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cew-form { display: flex; flex-direction: column; gap: 10px; }
.cew-savebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 12px; background: color-mix(in srgb, var(--cew-hi) 22%, var(--cew-surface)); border: 1px solid var(--cew-line); border-radius: 6px; font-size: .88em; }
.cew-paper { flex: 1; min-height: 0; overflow: auto; background: var(--cew-soft); padding: 12px; cursor: grab; touch-action: pan-x pan-y; overscroll-behavior: contain; }
.cew-paper.is-panning { cursor: grabbing; user-select: none; }
.cew-stage { position: relative; margin: 0 auto; width: max-content; background: #fff; box-shadow: 0 0 0 1px var(--cew-line); }
.cew-stage img { display: block; max-width: none !important; height: auto !important; margin: 0; user-select: none; -webkit-user-drag: none; }
.cew-marks { position: absolute; inset: 0; pointer-events: none; }
.cew-marks > * { pointer-events: auto; }
.cew-handle { display: none; }
.is-editing .cew-handle { display: block; position: absolute; right: -6px; bottom: -6px; width: 11px; height: 11px; border-radius: 2px; background: #16232c; border: 2px solid #fff; cursor: nwse-resize; }
.cew-btn--yes { background: var(--cew-ok); border-color: var(--cew-ok); color: #fff !important; font-weight: 600; min-width: 7em; justify-content: center; }
.cew-btn--no { background: var(--cew-low); border-color: var(--cew-low); color: #fff !important; font-weight: 600; min-width: 7em; justify-content: center; }
.cew-btn--yes:hover, .cew-btn--no:hover { filter: brightness(1.08); }

.cew-fsp__sel { max-width: 420px; }
.cew-fsp__main.is-home { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; align-items: start; }
.cew-fsp__main.is-home > .cew-note { grid-column: 1 / -1; }
.cew-fsp__card { border: 1px solid var(--cew-line); border-radius: var(--cew-radius); background: var(--cew-surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cew-fsp__h { display: flex; align-items: center; gap: 8px; font-size: 1.08em; }
.cew-fsp__h .cew-ico { color: var(--cew-accent); }
.cew-fsp__symptoms, .cew-fsp__charts { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.cew-fsp__symptoms li, .cew-fsp__charts li { margin: 0; }
.cew-fsp__sym, .cew-fsp__chart { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 7px 10px; border: 1px solid var(--cew-line); border-radius: 6px; background: var(--cew-surface); cursor: pointer; text-align: left; }
.cew-fsp__sym:hover, .cew-fsp__chart:hover { border-color: var(--cew-accent); }
.cew-fsp__sym small, .cew-fsp__chart small { grid-column: 1; color: var(--cew-muted); font-size: .8em; }
.cew-fsp__sym .cew-ico { grid-row: 1 / span 2; grid-column: 2; color: var(--cew-accent); }
.cew-fsp__sym.is-node .cew-fsp__symt { font-size: .88em; }
.cew-fsp__chart { grid-template-columns: 3em minmax(0, 1fr); }
.cew-fsp__chart small { grid-column: 2; }
.cew-fsp__cid { grid-row: 1 / span 2; font-weight: 800; font-size: 1.2em; color: var(--cew-accent); }
.cew-fsp__ct { font-weight: 600; }
.is-other { opacity: .55; }
.cew-fsp__first ul { padding-left: 1.2em; font-size: .92em; }
.cew-fsp__main.is-chart { display: flex; flex-direction: column; gap: 10px; }
.cew-fsp__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.cew-fsp__head > .cew-note { flex-basis: 100%; }
.cew-fsp__title { display: flex; align-items: center; gap: 12px; }
.cew-fsp__title h2 { font-size: 1.25em; line-height: 1.2; }
.cew-fsp__code { font-weight: 800; font-size: 2em; line-height: 1; color: var(--cew-accent); }
.cew-fsp__grid { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 12px; align-items: start; }
.no-scan .cew-fsp__grid { grid-template-columns: minmax(0, 760px); }
.cew-fsp__side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.cew-fsp__run { border: 2px solid var(--cew-accent); border-radius: var(--cew-radius); background: var(--cew-surface); padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cew-fsp__run.is-ergebnis { border-color: var(--cew-ok); }
.cew-fsp__run.is-verweis { border-style: dashed; }
.cew-fsp__type { display: flex; justify-content: space-between; font-size: .74em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--cew-muted); }
.cew-fsp__text { font-size: 1.08em; line-height: 1.5; }
.cew-tok { font-weight: 650; text-decoration: underline dotted; text-underline-offset: 3px; }
.cew-fsp__acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cew-fsp__end { font-weight: 650; color: var(--cew-ok); }
.cew-fsp__table { font-size: .82em; }
.cew-fsp__links:empty { display: none; }
.cew-fsp__h3 { font-size: .78em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--cew-muted); margin-bottom: 6px !important; }
.cew-fsp__hist { padding-left: 1.4em; font-size: .86em; display: flex; flex-direction: column; gap: 3px; }
.cew-fsp__ans { font-weight: 650; }
.cew-fsp__hist .is-ja .cew-fsp__ans { color: var(--cew-ok); }
.cew-fsp__hist .is-nein .cew-fsp__ans { color: var(--cew-low); }
.cew-fsp__htext { color: var(--cew-muted); }
.cew-fsp__scan { border: 1px solid var(--cew-line); border-radius: var(--cew-radius); background: var(--cew-surface); overflow: hidden; display: flex; flex-direction: column; height: var(--cew-h); }
.cew-fsp__scanbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--cew-line); }
.cew-fspbox { position: absolute; border: 0; padding: 0; margin: 0; background: transparent; border-radius: 4px; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: background .12s; }
.cew-fspbox:hover { background: rgba(255, 198, 26, .25); box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .5); }
.cew-fspbox.is-done.is-ja { background: rgba(21, 128, 61, .14); box-shadow: inset 0 0 0 2px rgba(21, 128, 61, .6); }
.cew-fspbox.is-done.is-nein { background: rgba(194, 65, 12, .14); box-shadow: inset 0 0 0 2px rgba(194, 65, 12, .6); }
.cew-fspbox.is-done.is-weiter { background: rgba(13, 90, 117, .1); box-shadow: inset 0 0 0 2px rgba(13, 90, 117, .45); }
.cew-fspbox.is-cur { background: rgba(255, 198, 26, .4); box-shadow: 0 0 0 3px #16232c, 0 0 0 7px rgba(255, 198, 26, .55); }
.is-editing .cew-fspbox { box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .6); cursor: move; }
.cew-fsp__form { border-top: 1px dashed var(--cew-line); padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
@container (max-width: 860px) {
	.cew-fsp__grid { grid-template-columns: minmax(0, 1fr); }
	.cew-fsp__side { position: static; max-height: none; }
	.cew-fsp__scan { height: 70vh; }
	.cew-grid3 { grid-template-columns: 1fr; }
}

/* =====================================================================
 * Werkstatthandbuch (cew-hb, cew-hbdoc)
 * ===================================================================== */
.cew-hb__main { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cew-hb__left { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--cew-line); border-radius: var(--cew-radius); background: var(--cew-surface); padding: 10px; }
.cew-hb__results { border-bottom: 1px solid var(--cew-line); padding-bottom: 10px; font-size: .88em; }
.cew-hb__results ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cew-hb__results a { display: block; text-decoration: none; color: inherit; padding: 4px 6px; border-radius: 4px; }
.cew-hb__results a:hover { background: var(--cew-soft); }
.cew-hb__rh { font-size: .74em; font-weight: 650; text-transform: uppercase; letter-spacing: .06em; color: var(--cew-muted); margin: 6px 0 4px !important; }
.cew-hb__snip { display: block; color: var(--cew-muted); font-size: .9em; }
.cew-hb__toc { font-size: .9em; }
.cew-hb__chap { border-bottom: 1px solid var(--cew-line); padding: 4px 0; }
.cew-hb__chap summary { cursor: pointer; font-weight: 650; padding: 4px 2px; list-style-position: outside; }
.cew-hb__chap summary small { color: var(--cew-muted); font-weight: 400; }
.cew-hb__cnr { display: inline-block; min-width: 1.6em; color: var(--cew-accent); }
.cew-hb__sec { font-size: .74em; font-weight: 650; color: var(--cew-muted); margin: 6px 0 2px 4px !important; }
.cew-hb__chap ul { list-style: none; padding: 0 0 0 4px; margin: 0; }
.cew-hb__chap li { margin: 0; }
.cew-hb__item { display: grid; grid-template-columns: 3.6em minmax(0, 1fr) auto; gap: 6px; padding: 3px 6px; border-radius: 4px; text-decoration: none !important; color: inherit !important; }
.cew-hb__item:hover { background: var(--cew-soft); }
.cew-hb__item.is-cur { background: color-mix(in srgb, var(--cew-accent) 12%, var(--cew-surface)); font-weight: 600; }
.cew-hb__item.is-fsp .cew-hb__inr::after { content: " ⟳"; color: var(--cew-accent); }
.cew-hb__inr { font-family: var(--cew-mono); font-size: .85em; color: var(--cew-accent); }
.cew-hb__item small { color: var(--cew-muted); font-size: .78em; white-space: nowrap; }
.cew-hb__start { border: 1px dashed var(--cew-line); border-radius: var(--cew-radius); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.cew-hbdoc { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cew-hbdoc.cew-app { margin-block: 1em; }
.cew-hbdoc__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; }
.cew-hbdoc__title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cew-hbdoc__title h2 { font-size: 1.25em; line-height: 1.2; }
.cew-hbdoc__nr { font-family: var(--cew-mono); font-weight: 700; color: var(--cew-accent); font-size: .9em; }
.cew-hbdoc__acts { align-items: center; }
.cew-hbdoc__find { width: 220px; }
.cew-hbdoc__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 14px; align-items: start; }
.cew-hbdoc__pages { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cew-hbdoc__side { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; display: flex; flex-direction: column; gap: 14px; font-size: .92em; }
.cew-hbpage { border: 1px solid var(--cew-line); border-radius: var(--cew-radius); overflow: hidden; background: var(--cew-surface); }
.cew-hbpage__paper { overflow: auto hidden !important; cursor: default; padding: 0; background: #fff; }
.cew-hbpage__cap { font-size: .76em; color: var(--cew-muted); padding: 4px 10px; border-top: 1px solid var(--cew-line); text-align: right; }
.cew-hblink { position: absolute; border-radius: 3px; background: rgba(31, 111, 209, .12); box-shadow: inset 0 -2px 0 rgba(31, 111, 209, .7); transition: background .12s; }
.cew-hblink:hover, .cew-hblink:focus-visible { background: rgba(31, 111, 209, .28); outline: none; }
.cew-hblink.is-teil, .cew-hblink.is-zeichnung { background: rgba(21, 128, 61, .12); box-shadow: inset 0 -2px 0 rgba(21, 128, 61, .7); }
.cew-hblink.is-bt, .cew-hblink.is-plan { background: rgba(255, 198, 26, .22); box-shadow: inset 0 -2px 0 rgba(196, 140, 0, .9); }
.cew-hblink.is-fsp { background: rgba(142, 68, 173, .12); box-shadow: inset 0 -2px 0 rgba(142, 68, 173, .7); }
.cew-hblink.is-other { opacity: .5; }
.cew-hblink.is-missing { background: repeating-linear-gradient(45deg, rgba(194, 65, 12, .2) 0 3px, transparent 3px 6px); }
.is-editing .cew-hblink { box-shadow: inset 0 0 0 2px rgba(22, 35, 44, .7); cursor: move; }
.is-editing .cew-hblink.is-sel { box-shadow: 0 0 0 2px #16232c, 0 0 0 5px rgba(255, 198, 26, .6); }
.is-editing .cew-hbpage__paper { cursor: crosshair; }
.cew-hbhl { position: absolute; inset: 0; pointer-events: none !important; }
.cew-hbhl__m { position: absolute; background: rgba(255, 230, 0, .45); mix-blend-mode: multiply; border-radius: 2px; }
.cew-hbedit__list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: .86em; max-height: 50vh; overflow: auto; }
.cew-pop { position: absolute; z-index: 100001; min-width: 240px; max-width: min(380px, calc(100vw - 16px)); background: var(--cew-surface, #fff); border: 1px solid rgba(0, 0, 0, .15); border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); padding: 8px; font-size: 14px; }
.cew-pop__h { font-weight: 650; margin: 2px 6px 6px !important; }
.cew-pop ul { list-style: none; margin: 0; padding: 0; }
.cew-pop a { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 5px; text-decoration: none; color: inherit; }
.cew-pop a:hover, .cew-pop a:focus { background: rgba(0, 0, 0, .05); outline: none; }
.cew-pop a small { color: rgba(0, 0, 0, .55); }
.cew-pop a.is-other { opacity: .6; }
@container (max-width: 980px) { .cew-hbdoc__body { grid-template-columns: minmax(0, 1fr); } .cew-hbdoc__side { position: static; max-height: none; } }
@container (max-width: 760px) { .cew-hb__main { grid-template-columns: minmax(0, 1fr); } .cew-hb__left { position: static; max-height: 50vh; } }

/* =====================================================================
 * Umbauanleitungen and vehicle profile
 * ===================================================================== */
.cew-wikibc { font-size: .88em; margin: 0 0 1em; color: var(--cew-muted); }
.cew-wikibc a { color: inherit; }
.cew-wikikids, .cew-wikimeta { margin-top: 1.5em; }
.cew-wikimeta { font-size: .82em; color: var(--cew-muted); }
.cew-wiki { display: flex; flex-direction: column; gap: 12px; margin-block: 1em; }
.cew-wiki__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cew-wiki__search { max-width: 420px; }
.cew-wiki__topics { display: flex; flex-wrap: wrap; gap: 6px; }
.cew-wikitree ul { list-style: none; margin: 0; padding: 0; }
.cew-wikitree__l.is-sub { padding-left: 1.2em; border-left: 2px solid var(--cew-line); margin: 4px 0 4px .3em; }
.cew-wikitree li { margin: 4px 0; }
.cew-wikitree li > a { font-weight: 600; }
.cew-wikitree__t { font-size: .78em; color: var(--cew-muted); }
.cew-wikitree__x { display: block; font-size: .86em; color: var(--cew-muted); }
.cew-vehicle { display: flex; flex-direction: column; gap: 1.5em; margin-block: 2em; }
.cew-vehicle__h { font-size: 1.25em; margin: 0 0 .5em; }
.cew-vehicle__lab { font-weight: 600; margin: .8em 0 .2em; }
.cew-vrec { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 0; }
.cew-vrec dt { color: var(--cew-muted); }
.cew-vrec dd { margin: 0; }
.cew-vrec__vin { font-family: var(--cew-mono); }
.cew-vstatus { display: inline-block; padding: 0 8px; border-radius: 99px; font-size: .85em; background: #d4edda; color: #155724; }
.cew-vstatus.is-inaktiv { background: #f1f1f1; color: #555; }
.cew-vchron { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--cew-line); }
.cew-vchron li { position: relative; padding: 2px 0 10px 16px; }
.cew-vchron li::before { content: ""; position: absolute; left: -6px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--cew-accent); }
.cew-vchron__d { font-weight: 600; margin-right: 6px; }
.cew-vchron__r { font-size: .9em; }
.cew-vehicle__links { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) { .cew-vrec { grid-template-columns: minmax(0, 1fr); } .cew-vrec dd { margin-bottom: 6px; } }

/* =====================================================================
 * Admin: links table, editor panel
 * ===================================================================== */
.cew-lt__bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }
.cew-lt__bar .cew-input { width: auto; min-width: 200px; }
.cew-lt td { vertical-align: top; }
.cew-lt__art { min-width: 280px; }
.cew-lt__art .cew-chips { margin-bottom: 4px; }
.cew-lt__refs { min-width: 260px; }
.cew-lt .csp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border: 1px solid #dcdcde; border-radius: 99px; background: #fff; font-size: 12px; }
.cew-lt .csp-chip__x, .cew-picker .csp-chip__x { border: 0; background: none; cursor: pointer; padding: 0; display: inline-grid; place-items: center; color: #8c8f94; }
.cew-lt .csp-sugg, .cew-admin .csp-sugg { position: absolute; z-index: 30; left: 0; right: 0; list-style: none; margin: 2px 0 0; padding: 4px; background: #fff; border: 1px solid #c3c4c7; border-radius: 4px; max-height: 260px; overflow: auto; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.cew-lt .csp-sugg button, .cew-admin .csp-sugg button { width: 100%; display: flex; justify-content: space-between; gap: 8px; text-align: left; border: 0; background: none; padding: 5px 6px; cursor: pointer; }
.cew-lt .csp-sugg button:hover { background: #f0f6fc; }
.cew-lt .csp-sugg small { color: #646970; }
.cew-ed-results { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow: auto; }
.cew-ed-results .components-button { height: auto; display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; padding: 4px 6px; white-space: normal; }
.cew-ed-results small { color: #757575; }
.cew-ed-list { list-style: none; margin: 0 0 8px; padding: 0; }
.cew-ed-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 4px; border-bottom: 1px solid #f0f0f0; padding: 4px 0; }
.cew-ed-list small { color: #757575; }
.cew-ok { color: #15803d; font-weight: 600; }


/* ==================================================================
 * Shell: the common layout of all workshop views (core.js shell())
 * A head · hint · B navigator · C card + D panel · E edit bar
 * ================================================================== */
.cew-frame {
	--cs-accent: #0d5a75;
	--cs-accent-soft: #e3eff3;
	--cs-hi: #ffc61a;
	--cs-ink: #18242b;
	--cs-muted: #56626b;
	--cs-line: #d9dde0;
	--cs-line2: #c9ced2;
	--cs-surface: #ffffff;
	--cs-soft: #f4f6f7;
	--cs-ok-bg: #dcf1e2; --cs-ok-ink: #145c2a;
	--cs-other-bg: #fde9d4; --cs-other-ink: #7a3a06;
	--cs-warn-bg: #fff4e0; --cs-warn-line: #f0c68a; --cs-warn-ink: #7a3a06; --cs-warn-ico: #b4530a;
	--cs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cs-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--cs-tap: 36px;
	--cs-panel: 400px;
	font-family: var(--cs-font);
}
.cew-frame button, .cew-frame input, .cew-frame select, .cew-frame textarea { font-family: inherit; }
.cew-frame:has(> .ctk-app .cew-shell, > .csp-app .cew-shell, > .cew-app .cew-shell) > .cew-frame__bar { display: none; }
.cew-frame__bar:empty { display: none; }
.cew-frame .ctk-app:has(> .cew-shell), .cew-frame .csp-app:has(> .cew-shell), .cew-frame .cew-app:has(> .cew-shell) { display: block; gap: 0; }

.cew-shell { position: relative; container: cewshell / inline-size; display: flex; flex-direction: column; gap: 10px; color: var(--cs-ink); font-size: 15px; line-height: 1.45; }
.cew-shell [hidden] { display: none !important; }
.cew-shell .cew-ico { width: 1.1em; height: 1.1em; flex: none; }
.cew-shell button { cursor: pointer; }
.cew-shell :focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }

/* ---------- A head ---------- */
.cew-shell .cew-shell__head { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 8px 6px 14px; box-sizing: border-box; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: 8px; flex-wrap: wrap; }
.cew-shell .cew-shell__mod { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.cew-shell .cew-shell__modi { color: var(--cs-accent); width: 18px; height: 18px; }
.cew-shell .cew-shell__veh { position: relative; }
.cew-shell .cew-shell__veh .cew-veh { min-height: var(--cs-tap); padding: 0 14px; border-radius: 999px; border: 1px solid var(--cs-line2); background: var(--cs-surface); color: var(--cs-ink); font-size: 14px; font-weight: 500; white-space: nowrap; max-width: 320px; }
.cew-shell .cew-shell__veh .cew-veh__t { overflow: hidden; text-overflow: ellipsis; }
.cew-shell .cew-shell__veh .cew-veh.is-set { background: var(--cs-accent); border-color: var(--cs-accent); color: #fff; font-weight: 600; }
.cew-shell .cew-shell__veh .cew-veh .cew-ico { color: inherit; }
.cew-shell .cew-shell__grow { flex: 1; }
.cew-shell .cew-shell__search { position: relative; flex: 1 1 280px; min-width: 200px; display: flex; align-items: center; gap: 8px; min-height: var(--cs-tap); padding: 0 6px 0 12px; box-sizing: border-box; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); max-width: none !important; }
.cew-shell .cew-shell__search:focus-within { border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-accent-soft); }
.cew-shell .cew-shell__qico { color: var(--cs-muted); position: static !important; }
.cew-shell .cew-shell__q { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; font-size: 14px; color: var(--cs-ink); padding: 6px 0 !important; box-shadow: none !important; margin: 0; }
.cew-shell .cew-shell__qcount { font-size: 12px; color: var(--cs-muted); white-space: nowrap; }
.cew-shell .cew-shell__qcount button { border: 0; background: none; padding: 2px 4px; color: var(--cs-accent); font: inherit; font-weight: 600; }
.cew-shell .cew-shell__qres { position: absolute; left: -1px !important; right: -1px !important; top: calc(100% + 4px) !important; max-height: min(60vh, 420px) !important; z-index: 40 !important; list-style: none; margin: 0; padding: 4px; overflow: auto; background: var(--cs-surface) !important; color: var(--cs-ink); border: 1px solid var(--cs-line2); border-radius: 8px; box-shadow: 0 18px 40px rgba(24, 36, 43, .22); opacity: 1; }
.cew-shell .cew-shell__qres li { margin: 0; padding: 0; list-style: none; background: none; }
.cew-shell .cew-shell__qres button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 40px; padding: 7px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--cs-ink); font: inherit; font-size: 14px; text-align: left; cursor: pointer; opacity: 1; }
.cew-shell .cew-shell__qres button:hover, .cew-shell .cew-shell__qres button:focus-visible { background: var(--cs-soft); outline: none; }
.cew-shell .cew-shell__qres button.is-other, .cew-shell .cew-shell__qres .is-other button { opacity: 1; color: var(--cs-muted); }
.cew-shell .cew-shell__qres button:disabled { opacity: 1; color: var(--cs-muted); cursor: default; }
.cew-shell .cew-shell__qres small { color: var(--cs-muted); font-size: 12px; text-align: right; max-width: 48%; flex: none; }
.cew-shell .cew-shell__qres li + li:not(.cew-shell__qh) { border-top: 1px solid var(--cs-soft); }
.cew-shell .cew-shell__qres .csp-sugg__none { padding: 8px; color: var(--cs-muted); font-size: 13px; }
.cew-shell.is-touch .cew-shell__qres button { min-height: var(--cs-tap); }
.cew-shell .cew-shell__qres .cew-shell__qh { padding: 6px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); }
.cew-shell .cew-shell__scope { display: inline-flex; background: var(--cs-soft); border-radius: 5px; padding: 2px; flex: none; }
.cew-shell .cew-shell__scope button { border: 0; background: transparent; padding: 3px 8px; border-radius: 4px; font-size: 12px; color: var(--cs-muted); white-space: nowrap; }
.cew-shell .cew-shell__scope button[aria-pressed="true"] { background: var(--cs-surface); color: var(--cs-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.cew-shell .cew-shell__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.cew-shell .cew-shell__acts > button, .cew-shell .cew-shell__acts > a, .cew-shell .cew-fs-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cs-tap); padding: 0 12px; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap; margin: 0; }
.cew-shell .cew-shell__acts > button:hover, .cew-shell .cew-fs-btn:hover { border-color: var(--cs-accent); }
.cew-shell .cew-shell__acts > button[aria-pressed="true"] { background: var(--cs-hi); border-color: var(--cs-ink); color: var(--cs-ink); font-weight: 600; }
.cew-shell .cew-shell__hintchip { min-height: 30px !important; padding: 0 12px !important; border-radius: 999px !important; border-color: var(--cs-warn-line) !important; background: var(--cs-warn-bg) !important; color: var(--cs-warn-ink) !important; font-size: 12px !important; font-weight: 600 !important; }
.cew-shell .cew-shell__hintchip .cew-ico { color: var(--cs-warn-ico); }

/* hint strip */
.cew-shell .cew-shell__hint { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--cs-warn-line); background: var(--cs-warn-bg); font-size: 13px; line-height: 1.45; }
.cew-shell .cew-shell__hinti { color: var(--cs-warn-ico); margin-top: 1px; }
.cew-shell .cew-shell__hintt { flex: 1; }
.cew-shell .cew-shell__hintt ul { margin: 2px 0 0; padding-left: 18px; }
.cew-shell .cew-shell__hintx { border: 0; background: none; padding: 2px 4px; font-size: 12px; font-weight: 600; color: var(--cs-warn-ink); white-space: nowrap; }

/* ---------- B navigator ---------- */
.cew-shell .cew-shell__nav { position: relative; display: flex; align-items: center; gap: 8px; min-height: 44px; }
.cew-shell .cew-shell__dir, .cew-shell .cew-shell__cur { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cs-tap); padding: 0 12px; border: 1px solid var(--cs-ink); border-radius: 6px; background: var(--cs-ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; margin: 0; }
.cew-shell .cew-shell__cur { display: none; flex: 1; min-width: 0; justify-content: flex-start; }
.cew-shell .cew-shell__curc { font-family: var(--cs-mono); }
.cew-shell .cew-shell__curt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cew-shell .cew-shell__navmid { flex: 1; min-width: 0; display: flex; align-items: center; }
.cew-shell .cew-shell__quick { display: flex; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); padding-right: 24px; }
.cew-shell .cew-shell__qg { display: flex; align-items: center; gap: 6px; flex: none; }
.cew-shell .cew-shell__qg + .cew-shell__qg { padding-left: 10px; margin-left: 4px; border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.cew-shell .cew-shell__qgl { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.cew-shell .cew-shell__chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; min-width: 42px; padding: 0 10px; justify-content: center; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); font-size: 13px; white-space: nowrap; margin: 0; flex: none; }
.cew-shell .cew-shell__chip:hover { border-color: var(--cs-accent); }
.cew-shell .cew-shell__chipc { font-family: var(--cs-mono); font-weight: 700; }
.cew-shell .cew-shell__chipt, .cew-shell .cew-shell__chips { display: none; font-weight: 500; }
.cew-shell .cew-shell__chip.is-current { background: var(--cs-accent); border-color: var(--cs-accent); color: #fff; }
.cew-shell .cew-shell__chip.is-current .cew-shell__chipt { display: inline; }
.cew-shell .cew-shell__chip.is-other { border-style: dashed; background: color-mix(in srgb, var(--cs-surface) 55%, transparent); color: color-mix(in srgb, var(--cs-ink) 62%, transparent); }
.cew-shell .cew-shell__chip.is-other.is-current { color: #fff; background: color-mix(in srgb, var(--cs-accent) 70%, #fff); }
.cew-shell .cew-shell__path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; min-width: 0; padding-left: 4px; }
.cew-shell .cew-shell__crumb { border: 0; background: none; padding: 4px 2px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font: inherit; }
.cew-shell .cew-shell__crumb.is-cur { text-decoration: none; font-weight: 700; }
.cew-shell .cew-shell__sep { opacity: .6; }
.cew-shell .cew-shell__navx { display: flex; align-items: center; gap: 6px; }
.cew-shell .cew-shell__navx > button { display: inline-flex; align-items: center; gap: 6px; min-height: var(--cs-tap); padding: 0 12px; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); font-size: 13px; white-space: nowrap; margin: 0; }
.cew-shell .cew-shell__step { width: var(--cs-tap); height: var(--cs-tap); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); padding: 0; margin: 0; flex: none; }
.cew-shell .cew-shell__step:hover { border-color: var(--cs-accent); }

/* directory */
.cew-shell .cew-shell__dirpanel { position: absolute; z-index: 45; left: 0; top: calc(100% + 4px); width: min(560px, 100%); max-height: min(70vh, 640px); display: flex; flex-direction: column; background: var(--cs-surface); color: var(--cs-ink); border: 1px solid var(--cs-line); border-radius: 8px; box-shadow: 0 18px 40px rgba(24, 36, 43, .22); overflow: hidden; }
.cew-shell .cew-shell__dirhead { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--cs-line); }
.cew-shell .cew-shell__dirhead strong { flex: 1; font-size: 15px; }
.cew-shell .cew-shell__dirx { width: 32px; height: 32px; }
.cew-shell .cew-shell__dirq { margin: 10px 12px 4px !important; width: auto !important; }
.cew-shell .cew-shell__dirlist { overflow: auto; padding: 4px 8px 10px; }
.cew-shell .cew-shell__dirg { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.cew-shell .cew-shell__dirgl { margin: 4px 8px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cs-muted); }
.cew-shell .cew-shell__diri { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: 6px; background: none; text-align: left; color: var(--cs-ink); font-size: 14px; margin: 0; }
.cew-shell .cew-shell__diri:hover, .cew-shell .cew-shell__diri:focus-visible { background: var(--cs-soft); }
.cew-shell .cew-shell__diri.is-current { background: var(--cs-accent-soft); color: var(--cs-accent); font-weight: 600; }
.cew-shell .cew-shell__diri.is-other { opacity: .55; }
.cew-shell .cew-shell__diri.is-l1 { font-weight: 700; }
.cew-shell .cew-shell__diri.is-l2 { padding-left: 22px; font-size: 13px; color: var(--cs-muted); }
.cew-shell .cew-shell__diri.is-l3 { padding-left: 34px; }
.cew-shell .cew-shell__diric { font-family: var(--cs-mono); font-weight: 700; min-width: 44px; color: var(--cs-accent); }
.cew-shell .cew-shell__dirit { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.cew-shell .cew-shell__dirit small { font-size: 12px; color: var(--cs-muted); font-weight: 400; }
.cew-shell .cew-shell__dirn { font-size: 12px; color: var(--cs-muted); }

/* ---------- C card + D panel ---------- */
.cew-shell .cew-shell__main { display: grid; grid-template-columns: minmax(0, 1fr) var(--cs-panel); gap: 10px; height: var(--cs-h, min(84vh, 940px)); min-height: 420px; }
.csp-app .cew-shell__main { height: var(--csp-h); }
.ctk-app .cew-shell__main { height: var(--ctk-h); }
.cew-app .cew-shell__main { height: var(--cew-h); }
.cew-shell--free .cew-shell__main { height: auto; min-height: 0; align-items: start; }
.cew-shell .cew-shell__card, .cew-shell .cew-shell__panel { min-width: 0; min-height: 0; background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; }
.cew-shell .cew-shell__chead { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e6e9eb; flex: none; }
.cew-shell .cew-shell__code { font-family: var(--cs-mono); font-weight: 700; font-size: 18px; color: var(--cs-accent); background: var(--cs-accent-soft); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.cew-shell .cew-shell__ctitle { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cew-shell .cew-shell__title { margin: 0 !important; padding: 0 !important; font-size: 18px !important; line-height: 1.25 !important; font-weight: 600 !important; font-family: inherit !important; color: var(--cs-ink) !important; letter-spacing: 0 !important; }
.cew-shell .cew-shell__meta { margin: 0 !important; font-size: 12px; color: var(--cs-muted); }
.cew-shell .cew-shell__fit { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.cew-shell .cew-shell__fit.is-fit { background: var(--cs-ok-bg); color: var(--cs-ok-ink); }
.cew-shell .cew-shell__fit.is-other { background: var(--cs-other-bg); color: var(--cs-other-ink); }
.cew-shell .cew-shell__fit.is-all { background: #eceeef; color: #3f4b54; }
.cew-shell .cew-shell__tools { display: flex; align-items: center; gap: 8px; padding: 7px 14px; border-bottom: 1px solid #e6e9eb; flex: none; flex-wrap: wrap; }
.cew-shell .cew-shell__tools:not(:has(> div > *)) { display: none; }
.cew-shell .cew-shell__toolsl, .cew-shell .cew-shell__toolsr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cew-shell .cew-shell__toolsr { margin-left: auto; }
.cew-shell .cew-shell__tog { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cs-line2); background: var(--cs-surface); color: #3f4b54; font-size: 13px; font-weight: 500; margin: 0; white-space: nowrap; }
.cew-shell .cew-shell__tog[aria-pressed="true"] { border-color: var(--cs-accent); background: var(--cs-accent-soft); color: var(--cs-accent); font-weight: 600; }
.cew-shell .cew-shell__toolsr > button:not([class*="zoom"]), .cew-shell .cew-shell__toolsr > a { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid var(--cs-line2); border-radius: 6px; background: var(--cs-surface); color: var(--cs-ink); font-size: 13px; text-decoration: none; margin: 0; }
/* one zoom control for all viewers */
.cew-shell [class$="-zoom"], .cew-shell .cew-zoom { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-line2); border-radius: 6px; overflow: hidden; background: var(--cs-surface); gap: 0 !important; padding: 0 !important; }
.cew-shell [class$="-zoom"] > button, .cew-shell .cew-zoom > button { min-width: 34px; min-height: 30px; padding: 0 10px; border: 0 !important; border-radius: 0 !important; border-right: 1px solid var(--cs-line2) !important; background: var(--cs-surface) !important; color: var(--cs-ink) !important; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; margin: 0; box-shadow: none !important; }
.cew-shell [class$="-zoom"] > button:last-child, .cew-shell .cew-zoom > button:last-child { border-right: 0 !important; }
.cew-shell [class$="-zoom"] > button:hover, .cew-shell .cew-zoom > button:hover { background: var(--cs-soft) !important; }
.cew-shell .cew-shell__card > [class$="-paper"], .cew-shell .cew-shell__card > .cew-shell__body { flex: 1 1 auto; min-height: 0; }
.cew-shell .cew-shell__card > [class$="-paper"] { border: 0 !important; border-radius: 0 !important; }

.cew-shell .cew-shell__ptabs { display: flex; gap: 2px 16px; padding: 0 14px; border-bottom: 1px solid var(--cs-line); flex: none; overflow-x: auto; scrollbar-width: none; }
.cew-shell .cew-shell__ptabs:empty { display: none; }
.cew-shell .cew-shell__ptabs > [role="tab"] { display: inline-flex; align-items: center; gap: 6px; padding: 11px 0 9px !important; margin: 0 0 -1px !important; border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important; background: none !important; color: #3f4b54 !important; font-size: 14px !important; font-weight: 500; white-space: nowrap; min-height: 0; box-shadow: none !important; }
.cew-shell .cew-shell__ptabs > [role="tab"] .cew-ico, .cew-shell .cew-shell__ptabs > [role="tab"] svg { width: 16px; height: 16px; }
.cew-shell .cew-shell__ptabs > [role="tab"][aria-selected="true"] { color: var(--cs-accent) !important; border-bottom-color: var(--cs-accent) !important; font-weight: 600; }
.cew-shell .cew-shell__ptabs > [role="tab"] [class$="sidetab__t"] { display: inline !important; }
.cew-shell .cew-shell__panel > :not(.cew-shell__ptabs) { flex: 1 1 auto; min-height: 0; overflow: auto; }
.cew-shell .cew-shell__panel > [hidden] { display: none !important; }

/* ---------- E edit bar ---------- */
.cew-shell .cew-shell__edit { display: none; position: sticky; bottom: 8px; z-index: 30; }
.cew-shell .cew-shell__edit.is-on { display: block; }
.cew-shell .cew-shell__edit > * { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 10px 14px !important; margin: 0 !important; border: 0 !important; border-radius: 8px !important; background: var(--cs-ink) !important; color: #fff !important; box-shadow: 0 8px 24px rgba(24, 36, 43, .25); font-size: 14px !important; }
.cew-shell .cew-shell__edit [class$="savebar__t"] { flex: 1; min-width: 200px; }
.cew-shell .cew-shell__edit [class$="savebar__btns"] { display: flex; flex-wrap: wrap; gap: 8px; }
.cew-shell .cew-shell__edit button, .cew-shell .cew-shell__edit a { min-height: 34px; padding: 0 14px !important; border-radius: 6px !important; border: 1px solid #6b7780 !important; background: transparent !important; color: #fff !important; font-size: 14px !important; display: inline-flex; align-items: center; gap: 6px; }
.cew-shell .cew-shell__edit button[class*="--primary"] { background: var(--cs-hi) !important; border-color: var(--cs-hi) !important; color: var(--cs-ink) !important; font-weight: 700; }
.cew-shell .cew-shell__edit button[class*="--ghost"] { border-color: transparent !important; color: #c3cbd0 !important; }

/* ---------- links block (Passt dazu · Auch in · Erwähnt in) ---------- */
.cew-lb { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; margin-top: 4px; border-top: 1px solid #e6e9eb; }
.cew-lb__h { margin: 0 !important; font-size: 15px !important; font-weight: 600 !important; font-family: inherit !important; }
.cew-lb__g { display: flex; flex-direction: column; gap: 6px; }
.cew-lb__gl { margin: 4px 0 0 !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted, #56626b); }
.cew-lb__rows { display: flex; flex-direction: column; gap: 6px; }
.cew-lrow { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 44px; padding: 7px 10px; border: 1px solid var(--cs-line, #d9dde0); border-radius: 6px; background: var(--cs-surface, #fff); color: var(--cs-ink, #18242b) !important; text-decoration: none !important; text-align: left; font: inherit; margin: 0; }
.cew-lrow:hover { border-color: var(--cs-accent, #0d5a75); }
.cew-lrow__i { color: var(--cs-accent, #0d5a75); width: 17px; height: 17px; }
.cew-lrow__t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cew-lrow__l { font-size: 13px; font-weight: 600; line-height: 1.3; }
.cew-lrow__m { font-size: 11.5px; color: var(--cs-muted, #56626b); line-height: 1.3; }
.cew-lrow__b { font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; background: var(--cs-other-bg, #fde9d4); color: var(--cs-other-ink, #7a3a06); white-space: nowrap; }
.cew-lrow__a { color: var(--cs-muted, #56626b); width: 15px; height: 15px; }
.cew-lrow.is-other { opacity: .6; }
.cew-lrow.is-missing { opacity: .5; pointer-events: none; }
.cew-lb .cew-lrow__thumb { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; flex: none; }

/* ---------- touch: bigger targets, short titles on the chips ---------- */
.cew-shell.is-touch { --cs-tap: 44px; }
.cew-shell.is-touch .cew-shell__chip { min-height: 44px; }
.cew-shell.is-touch .cew-shell__chip:not(.is-current) .cew-shell__chips { display: inline; font-size: 12px; opacity: .85; }
.cew-shell.is-touch .cew-shell__tog { min-height: 40px; }
.cew-shell.is-touch [class$="-zoom"] > button { min-height: 40px; min-width: 44px; }
.cew-shell.is-touch .cew-shell__ptabs > [role="tab"] { padding: 14px 0 12px !important; }

/* ---------- medium width ---------- */
.cew-shell.is-mid { --cs-panel: 340px; }
.cew-shell.is-mid .cew-shell__mod .cew-shell__modt { display: none; }

/* ---------- narrow: everything below each other ---------- */
.cew-shell.is-narrow .cew-shell__head { padding: 5px 5px 5px 10px; gap: 6px; }
.cew-shell.is-narrow .cew-shell__mod { flex: 1; }
.cew-shell.is-narrow .cew-shell__search { order: 9; flex-basis: 100%; }
.cew-shell.is-narrow .cew-shell__acts { margin-left: 0; }
.cew-shell.is-narrow .cew-shell__acts > button > span, .cew-shell.is-narrow .cew-fs-btn .cew-fs-btn__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cew-shell.is-narrow .cew-shell__acts > button { padding: 0; width: var(--cs-tap); justify-content: center; border-color: transparent; }
.cew-shell.is-narrow .cew-shell__hintchip { width: auto !important; padding: 0 10px !important; }
.cew-shell.is-narrow .cew-shell__veh .cew-veh { max-width: 150px; padding: 0 10px; }
.cew-shell.is-narrow .cew-shell__dir, .cew-shell.is-narrow .cew-shell__navmid { display: none; }
.cew-shell.is-narrow .cew-shell__cur { display: inline-flex; min-height: 44px; }
.cew-shell.is-narrow .cew-shell__step { width: 44px; height: 44px; }
.cew-shell.is-narrow .cew-shell__dirpanel { position: fixed; inset: auto 0 0 0; top: 10vh; width: auto; max-height: none; border-radius: 12px 12px 0 0; }
.cew-frame.is-fs .cew-shell.is-narrow .cew-shell__dirpanel { position: absolute; top: 56px; bottom: 0; }
.cew-shell.is-narrow .cew-shell__main { display: flex; flex-direction: column; height: auto; min-height: 0; }
.cew-shell.is-narrow .cew-shell__card { height: min(68vh, 560px); flex: none; }
.cew-shell--free.is-narrow .cew-shell__card { height: auto; }
.cew-shell.is-narrow .cew-shell__panel { overflow: visible; }
.cew-shell.is-narrow .cew-shell__panel > :not(.cew-shell__ptabs) { overflow: visible; }
.cew-shell.is-narrow .cew-shell__ptabs { position: sticky; top: 0; z-index: 5; background: var(--cs-surface); border-radius: 8px 8px 0 0; }
.cew-shell--panel-first.is-narrow .cew-shell__panel { order: -1; }
.cew-shell.is-narrow .cew-shell__chead { flex-wrap: wrap; padding: 10px 12px; }
.cew-shell.is-narrow .cew-shell__code { font-size: 15px; }
.cew-shell.is-narrow .cew-shell__title { font-size: 16px !important; }

/* ---------- full screen ---------- */
.cew-frame.is-fs .cew-shell { flex: 1 1 auto; min-height: 0; }
.cew-frame.is-fs .cew-shell:not(.is-narrow) .cew-shell__main { flex: 1 1 0; height: auto; min-height: 380px; }
.cew-frame.is-fs .ctk-app:has(> .cew-shell), .cew-frame.is-fs .csp-app:has(> .cew-shell), .cew-frame.is-fs .cew-app:has(> .cew-shell) { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

/* ---------- module details inside the shell ---------- */
.cew-shell .csp-planlinks { padding: 2px 14px 16px; }
.cew-shell .csp-listview { display: block; overflow: auto; }
.cew-shell .csp-tablewrap { overflow: visible; max-height: none; }
.cew-shell .csp-back { margin-bottom: 8px; }
.cew-shell.is-mid .cew-shell__ptabs > [role="tab"]:not([aria-selected="true"]) [class$="sidetab__t"], .cew-shell.is-mid .cew-shell__ptabs > [role="tab"]:not([aria-selected="true"]) .cew-ptab__t { display: none !important; }
.cew-shell.is-narrow .cew-shell__mod { flex: none; }
.cew-shell.is-narrow .cew-shell__veh { flex: 1; min-width: 0; }
.cew-shell .cew-shell__main { position: relative; z-index: 0; isolation: isolate; }
.cew-shell.is-narrow .cew-shell__veh .cew-veh { max-width: 100%; }
.cew-shell.is-narrow .cew-shell__chead { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 10px; }
.cew-shell.is-narrow .cew-shell__fit { grid-column: 1 / -1; justify-self: start; }
.cew-shell.is-narrow .cew-shell__meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cew-shell.is-narrow .cew-shell__tools { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px 12px; }
.cew-shell.is-narrow .cew-shell__toolsl, .cew-shell.is-narrow .cew-shell__toolsr { flex-wrap: nowrap; flex: none; }
.cew-shell.is-narrow .cew-shell__toolsr { margin-left: 8px; }
.cew-shell .cew-shell__nav { z-index: 20; }
.cew-shell .cew-shell__head { position: relative; z-index: 25; }
body:has(.cew-shell__edit.is-on) .cew-toast, .cew-frame:has(.cew-shell__edit.is-on) .cew-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
.cew-shell .ctk-listview { display: block; overflow: auto; }
.cew-shell .ctk-tablewrap { overflow: visible; max-height: none; }
.cew-shell .cew-shell__hint.is-info { border-color: #9cc3d1; background: var(--cs-accent-soft); }
.cew-shell .ctk-banner { margin: 0; }
.cew-shell.cew-shell--home .cew-shell__main { grid-template-columns: minmax(0, 1fr); }
.cew-shell .cew-fsp__home { padding: 14px; overflow: auto; }
.cew-shell .cew-fsp__homegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 18px; align-items: start; }
.cew-shell .cew-fsp__homecol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cew-shell .cew-fsp__scanwrap { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cew-shell .cew-fsp__scanwrap > .cew-paper { flex: 1 1 auto; min-height: 0; }
.cew-shell .cew-fsp__side { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.cew-shell .cew-fsp__histwrap { padding: 14px 16px; }
.cew-shell .cew-fsp__noscan { padding: 20px; }
.cew-shell .cew-fsp__run { border: 0; padding: 0; box-shadow: none; background: none; }
.cew-shell.is-narrow .cew-fsp__scanwrap { min-height: 420px; }
.cew-shell .cew-hbdoc__scroll { overflow: auto; padding: 14px; background: var(--cs-soft); }
.cew-shell .cew-hbdoc__side { position: static; max-height: none; padding: 14px 16px; font-size: 14px; }
.cew-shell .cew-hbdoc__plist { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.cew-shell .cew-hb__startwrap { padding: 14px; overflow: auto; }
.cew-shell .cew-hb__chapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 8px; }
.cew-shell .cew-hbdoc__pdf { min-height: 30px; }
.cew-shell.hide-hblinks .cew-hblink { background: transparent !important; box-shadow: none !important; }
.cew-shell .cew-hbedit { display: flex; flex-direction: column; gap: 10px; }
.cew-shell.is-narrow .cew-hbdoc__scroll { padding: 8px; }
.cew-shell .cew-shell__scs { display: none; }
.cew-shell.is-narrow .cew-shell__scl { display: none; }
.cew-shell.is-narrow .cew-shell__scs { display: inline; }
.cew-shell.is-narrow .cew-shell__modt { display: none; }


/* ==================================================================
 * Content pages (vehicles, wiki, workshop reports): the same cards and rows as the workshop views
 * ================================================================== */
.cew-card, .cew-vgrid, .cew-vehicle, .cew-lb--page, .cew-wikibc, .cew-wikimeta {
	--cs-accent: #0d5a75; --cs-accent-soft: #e3eff3; --cs-ink: #18242b; --cs-muted: #56626b; --cs-line: #d9dde0; --cs-surface: #fff;
	--cs-other-bg: #fde9d4; --cs-other-ink: #7a3a06;
	--cs-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cs-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}
.cew-card { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: 8px; padding: 14px 16px; box-sizing: border-box; color: var(--cs-ink); font-family: var(--cs-font); font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 10px; }
.cew-card :where(div, p, span, dl, dt, dd, ol, ul, li, a, h2, h3, h4, small, strong) { font-family: inherit; }
.cew-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cew-card__h, .cew-card .cew-lb__h { margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.3 !important; flex: 1; color: var(--cs-ink) !important; font-family: inherit !important; }
.cew-code-badge { font-family: var(--cs-mono); font-weight: 700; font-size: 13px; color: var(--cs-accent); background: var(--cs-accent-soft); padding: 3px 8px; border-radius: 5px; }
.cew-vis { font-size: 10.5px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
.cew-vis.is-public { background: #eceeef; color: #3f4b54; }
.cew-vis.is-login { background: var(--cs-accent-soft); color: var(--cs-accent); }
.cew-vis.is-team { background: var(--cs-other-bg); color: var(--cs-other-ink); }
.cew-vehicle { display: flex; flex-direction: column; gap: 14px; margin-block: 1.5em; font-family: var(--cs-font); }
.cew-vehicle .cew-vstatus { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; }
.cew-vrec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 18px; margin: 0 -16px -14px; }
.cew-vrec-g { padding: 10px 16px 12px; border-top: 1px solid #eef0f1; display: flex; flex-direction: column; gap: 6px; }
.cew-card .cew-lb__gl { display: flex; align-items: center; gap: 6px; }
.cew-card .cew-vrec { grid-template-columns: 130px minmax(0, 1fr); gap: 4px 10px; font-size: 13.5px; }
.cew-card .cew-vrec dt { color: var(--cs-muted); }
.cew-vehicle__history p { margin: 0; }
.cew-vehicle__history .cew-vehicle__lab { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); margin-top: 4px; }
.cew-card .cew-vchron { border-left: 0; display: flex; flex-direction: column; gap: 10px; }
.cew-card .cew-vchron li { display: grid; grid-template-columns: 136px 14px minmax(0, 1fr); gap: 10px; padding: 0; align-items: start; }
.cew-card .cew-vchron li::before { position: static; grid-column: 2; grid-row: 1; margin-top: 5px; }
.cew-card .cew-vchron__d { grid-column: 1; grid-row: 1; font-family: var(--cs-mono); font-weight: 500; font-size: 12.5px; color: var(--cs-muted); margin: 0; }
.cew-card .cew-vchron__b { grid-column: 3; grid-row: 1; display: flex; flex-direction: column; gap: 2px; }
.cew-card .cew-vchron__r { font-size: 12.5px; font-weight: 600; color: var(--cs-accent); }
.cew-rows2 { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px; }
.cew-lrow.is-plain { cursor: default; }
.cew-lb--page { margin-block: 1.5em; padding-top: 14px; border-top: 1px solid var(--cs-line); }
.cew-card.cew-lb--page { border-top: 1px solid var(--cs-line); }
.cew-card .cew-hint { margin: 0; font-size: 12px; color: var(--cs-muted); }
/* wiki */
.cew-wiki.cew-card { gap: 12px; }
.cew-wiki .cew-wiki__bar .cew-input { flex: 1 1 260px; min-height: 36px; border: 1px solid #c9ced2; border-radius: 6px; padding: 0 10px; font: inherit; }
.cew-wiki .cew-wikitree li { margin: 0 0 6px; }
.cew-wiki .cew-wikitree__l.is-sub { margin: 6px 0 0 14px; padding-left: 12px; }
.cew-wikibc, .cew-wikimeta { font-family: var(--cs-font); font-size: 13px; }
.cew-wikikids.cew-card { margin-top: 1.5em; }
@media (max-width: 560px) { .cew-card .cew-vrec { grid-template-columns: minmax(0, 1fr); } .cew-card .cew-vchron li { grid-template-columns: 14px minmax(0, 1fr); } .cew-card .cew-vchron__d { grid-column: 2; } .cew-card .cew-vchron__b { grid-column: 2; grid-row: 2; } }

/* vehicle overview (block "CityEL Fahrzeuge", [cityel_fahrzeuge]) */
.cew-vgrid { display: flex; flex-direction: column; gap: 12px; margin-block: 1.5em; font-family: var(--cs-font); color: var(--cs-ink); }
.cew-vgrid *, .cew-vgrid *::before, .cew-vgrid *::after { box-sizing: border-box; }
.cew-vgrid :where(div, p, span, ul, li, a, h3, label, input) { font-family: inherit; }
.cew-vgrid__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cew-vgrid__search { flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid #c9ced2; border-radius: 6px; background: var(--cs-surface); color: var(--cs-muted); margin: 0; cursor: text; }
.cew-vgrid__search:focus-within { border-color: var(--cs-accent); box-shadow: 0 0 0 3px var(--cs-accent-soft); }
.cew-vgrid__search .cew-ico { width: 17px; height: 17px; flex: none; }
.cew-vgrid__search input { flex: 1; min-width: 0; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 8px 0 !important; margin: 0; font-size: 15px; color: var(--cs-ink); }
.cew-vgrid__count { font-size: 13px; color: var(--cs-muted); }
.cew-vgrid__none { margin: 0; padding: 14px 16px; border: 1px dashed var(--cs-line); border-radius: 8px; background: var(--cs-surface); color: var(--cs-muted); font-size: 14px; }
.cew-vgrid__list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.cew-vcard { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.cew-vcard::before, .cew-vcard::marker { content: none; }
.cew-vcard[hidden] { display: none; }
.cew-vcard__link { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--cs-line); border-radius: 8px; overflow: hidden; background: var(--cs-surface); color: var(--cs-ink) !important; text-decoration: none !important; transition: border-color .15s, box-shadow .15s; }
.cew-vcard__link:hover, .cew-vcard__link:focus-visible { border-color: var(--cs-accent); box-shadow: 0 4px 18px rgba(24, 36, 43, .1); outline: none; }
.cew-vcard__link:focus-visible { box-shadow: 0 0 0 3px var(--cs-accent-soft); }
.cew-vcard__img { position: relative; aspect-ratio: 4 / 3; background: #f4f6f7; overflow: hidden; }
.cew-vcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0; max-width: none; }
.cew-vcard__ph { width: 100%; height: 100%; display: grid; place-items: center; color: #a9b3ba; }
.cew-vcard__ph .cew-ico { width: 64px; height: 64px; stroke-width: 1.2; }
.cew-vcard__top { position: absolute; left: 8px; top: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.cew-vcard__top .cew-code-badge { background: rgba(255, 255, 255, .94); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cew-vcard__top .cew-vstatus { font-size: 12px; font-weight: 600; padding: 3px 9px; background: rgba(255, 255, 255, .94); color: #3f4b54; box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.cew-vcard.is-inactive .cew-vcard__img img { filter: grayscale(.85); }
.cew-vcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.cew-vcard__t { margin: 0 !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.25 !important; color: var(--cs-ink) !important; text-wrap: balance; font-family: inherit !important; }
.cew-vcard__line { margin: 0; font-size: 13.5px; color: var(--cs-accent); font-weight: 500; }
.cew-vcard__ex { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--cs-muted); }
.cew-vcard__meta { margin: auto 0 0; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.cew-vchip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 1.3; padding: 3px 8px; border-radius: 999px; background: #eceeef; color: #3f4b54; }
.cew-vchip.is-rep { background: var(--cs-accent-soft); color: var(--cs-accent); font-weight: 600; }
.cew-vchip .cew-ico { width: 13px; height: 13px; }
.cew-vgrid__empty { color: #56626b; }
@media (prefers-reduced-motion: reduce) { .cew-vcard__link { transition: none; } }

/* vehicle head card (part "kopf" of the vehicle profile / block "CityEL Fahrzeug-Steckbrief") */
.cew-card.cew-vhead { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0; padding: 0; overflow: hidden; }
.cew-card.cew-vhead.no-img { grid-template-columns: minmax(0, 1fr); }
.cew-vhead__img { background: #f4f6f7; min-height: 100%; }
.cew-vhead__img a { display: block; height: 100%; }
.cew-vhead__img img { display: block; width: 100%; height: 100%; min-height: 200px; max-height: 300px; object-fit: cover; margin: 0; max-width: none; }
.cew-vhead.is-inactive .cew-vhead__img img { filter: grayscale(.85); }
.cew-vhead__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cew-vhead .cew-card__h a { color: inherit !important; text-decoration: none !important; }
.cew-vhead .cew-card__h a:hover { color: var(--cs-accent) !important; }
.cew-vhead .cew-vcard__meta { margin-top: 4px; }
.cew-vhead__eyebrow { margin: 0 !important; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cs-muted); }
.cew-vhead__more { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--cs-accent); border-radius: 6px; color: var(--cs-accent) !important; font-weight: 600; font-size: 14px; text-decoration: none !important; }
.cew-vhead__more:hover, .cew-vhead__more:focus-visible { background: var(--cs-accent); color: #fff !important; }
.cew-vhead__more .cew-ico { width: 16px; height: 16px; }
@media (max-width: 640px) {
	.cew-card.cew-vhead { grid-template-columns: minmax(0, 1fr); }
	.cew-vhead__img img { aspect-ratio: 4 / 3; height: auto; min-height: 0; }
}
.cew-vreports__n { font-size: 12px; font-weight: 600; min-width: 24px; text-align: center; padding: 2px 8px; border-radius: 999px; background: var(--cs-accent-soft); color: var(--cs-accent); }
.cew-vreports__more { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--cs-accent) !important; text-decoration: none !important; }
.cew-vreports__more:hover { text-decoration: underline !important; }
/* sample picture for vehicles without a photo */
.cew-vph { display: block; width: 100%; height: 100%; }
.cew-vhead__img .cew-vph { min-height: 200px; max-height: 300px; height: 100%; }
.cew-vcard.is-inactive .cew-vcard__img .cew-vph, .cew-vhead.is-inactive .cew-vhead__img .cew-vph { filter: grayscale(.85); }
@media (max-width: 640px) { .cew-vhead__img .cew-vph { aspect-ratio: 4 / 3; height: auto; min-height: 0; } }