/* ---------------------------------------------------------------------------
PANEL DESIGN SYSTEM
Dark admin dashboard: structure in the style of shadcn/ui, built on
Bootstrap 5.3 (dark mode, loaded before this file) plus this file.
Dark only.
Principles: calm, lots of air, few colours (accent sparingly, colour only
for status), no gradients except in the logo, no shadows, the same rounded
corners everywhere, hierarchy through size and weight instead of colour.
EVERY colour, size and radius is a token in the first block. Components
below only use tokens - change a value there and it changes everywhere.
Page-specific rules live in public/style/seiten/*.css.
--------------------------------------------------------------------------- */
/* Inter, served locally (public/fonts/inter), variable weight 100-900 */
@font-face {
font-family: "Inter Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/fonts/inter/inter-latin-wght-normal.woff2) format("woff2-variations");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Inter Variable";
font-style: normal;
font-display: swap;
font-weight: 100 900;
src: url(/fonts/inter/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ===== 1. Tokens ===== */
:root {
color-scheme: dark;
/* surfaces */
--z-bg: #0f1218; /* page, inputs */
--z-surface: #151a22; /* cards, sidebar */
--z-hover: #1b212b; /* hover and active surfaces */
--z-border: #262e3b; /* lines and borders */
--z-head: rgba(255, 255, 255, .02); /* card header */
--z-backdrop: rgba(5, 7, 10, .72);
/* text */
--z-text: #e6e9ef;
--z-muted: #8a94a6;
--z-strong: #ffffff;
--z-nav: #b3bccb; /* inactive navigation links */
--z-placeholder: #5f697a;
/* accent */
--z-accent: #3d8bfd;
--z-accent-hover: #5c9dfd;
--z-accent-rgb: 61, 139, 253;
/* status */
--z-success: #2fb344; --z-success-rgb: 47, 179, 68;
--z-warning: #ffc107; --z-warning-rgb: 255, 193, 7;
--z-danger: #d63939; --z-danger-rgb: 214, 57, 57;
--z-info: #4c8dfb; --z-info-rgb: 110, 168, 254;
--z-neutral-rgb: 179, 188, 203;
/* soft variants: text on a 15-18 % tint of the same colour */
--z-soft-success: #4cc764;
--z-soft-warning: #ffc107;
--z-soft-danger: #f06a6a;
--z-soft-info: #6ea8fe;
--z-soft-primary: #8bb9fe;
--z-soft-neutral: #b3bccb;
--z-soft-alpha: .16;
/* type */
--z-font: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--z-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
--z-fs-base: .9rem;
--z-fs-title: 1.6rem;
--z-fs-sub: .9rem;
--z-fs-card-title: .95rem;
--z-fs-section: .7rem;
--z-fs-th: .78rem;
--z-fs-small: .8rem;
--z-fs-xs: .72rem;
/* shape and space */
--z-radius: .75rem; /* containers: cards, alerts, dialogs */
--z-radius-sm: .5rem; /* controls: buttons, inputs, nav links */
--z-radius-xs: .4rem; /* badges, menu items */
--z-sidebar-w: 248px;
--z-gutter: clamp(1rem, 3vw, 2.25rem);
--z-gap: 1.25rem;
--z-content-max: 1600px;
}
/* ===== 2. Bootstrap mapped onto the tokens ===== */
:root, [data-bs-theme="dark"] {
--bs-body-bg: var(--z-bg);
--bs-body-bg-rgb: 15, 18, 24;
--bs-body-color: var(--z-text);
--bs-body-color-rgb: 230, 233, 239;
--bs-body-font-family: var(--z-font);
--bs-body-font-size: var(--z-fs-base);
--bs-font-monospace: var(--z-mono);
--bs-emphasis-color: var(--z-strong);
--bs-emphasis-color-rgb: 255, 255, 255;
--bs-heading-color: var(--z-strong);
--bs-secondary-color: var(--z-muted);
--bs-secondary-color-rgb: 138, 148, 166;
--bs-secondary-bg: var(--z-surface);
--bs-secondary-bg-rgb: 21, 26, 34;
--bs-tertiary-bg: var(--z-hover);
--bs-tertiary-bg-rgb: 27, 33, 43;
--bs-tertiary-color: var(--z-muted);
--bs-border-color: var(--z-border);
--bs-border-color-translucent: var(--z-border);
--bs-border-radius: var(--z-radius-sm);
--bs-border-radius-sm: var(--z-radius-xs);
--bs-border-radius-lg: var(--z-radius);
--bs-border-radius-xl: var(--z-radius);
--bs-primary: var(--z-accent);
--bs-primary-rgb: var(--z-accent-rgb);
--bs-primary-text-emphasis: var(--z-soft-primary);
--bs-primary-bg-subtle: rgba(var(--z-accent-rgb), .15);
--bs-primary-border-subtle: rgba(var(--z-accent-rgb), .35);
--bs-success: var(--z-success);
--bs-success-rgb: var(--z-success-rgb);
--bs-success-text-emphasis: var(--z-soft-success);
--bs-warning: var(--z-warning);
--bs-warning-rgb: var(--z-warning-rgb);
--bs-warning-text-emphasis: var(--z-soft-warning);
--bs-danger: var(--z-danger);
--bs-danger-rgb: var(--z-danger-rgb);
--bs-danger-text-emphasis: var(--z-soft-danger);
--bs-info-rgb: var(--z-info-rgb);
--bs-info-text-emphasis: var(--z-soft-info);
--bs-link-color: var(--z-soft-primary);
--bs-link-color-rgb: 139, 185, 254;
--bs-link-hover-color: var(--z-strong);
--bs-link-hover-color-rgb: 255, 255, 255;
--bs-code-color: var(--z-soft-primary);
--bs-highlight-bg: rgba(var(--z-warning-rgb), .25);
--bs-highlight-color: var(--z-strong);
--bs-focus-ring-color: rgba(var(--z-accent-rgb), .35);
--bs-form-valid-color: var(--z-soft-success);
--bs-form-valid-border-color: var(--z-success);
--bs-form-invalid-color: var(--z-soft-danger);
--bs-form-invalid-border-color: var(--z-danger);
--bs-box-shadow: none;
--bs-box-shadow-sm: none;
--bs-box-shadow-lg: none;
--bs-box-shadow-inset: none;
}
/* ===== 3. Base ===== */
html, body { background: var(--z-bg); color: var(--z-text); }
body { font-family: var(--z-font); font-size: var(--z-fs-base); line-height: 1.55; -webkit-font-smoothing: antialiased; font-feature-settings: "cv11"; }
h1, h2, h3, h4, h5, h6 { color: var(--z-strong); font-weight: 600; letter-spacing: -.01em; }
code, kbd, samp, pre, .font-monospace { font-family: var(--z-mono); }
code { font-size: .84em; color: var(--z-soft-primary); overflow-wrap: anywhere; }
pre { background: var(--z-bg); border: 1px solid var(--z-border); border-radius: var(--z-radius-sm); padding: .75rem 1rem; font-size: .82rem; }
kbd { background: var(--z-hover); color: var(--z-text); border: 1px solid var(--z-border); border-radius: var(--z-radius-xs); padding: .1rem .35rem; font-size: .78em; }
hr { border-color: var(--z-border); opacity: 1; }
a { text-underline-offset: .18em; }
::selection { background: rgba(var(--z-accent-rgb), .35); }
:focus-visible { outline: 2px solid var(--z-accent); outline-offset: 2px; }
/* utilities Bootstrap does not have */
.tabular { font-variant-numeric: tabular-nums; }
.min-w-0 { min-width: 0; }
.text-xs { font-size: var(--z-fs-xs) !important; }
.fs-sm { font-size: var(--z-fs-small) !important; }
.text-muted, .text-body-secondary, .text-secondary { color: var(--z-muted) !important; }
.text-strong { color: var(--z-strong) !important; }
.text-soft-success { color: var(--z-soft-success) !important; }
.text-soft-warning { color: var(--z-soft-warning) !important; }
.text-soft-danger { color: var(--z-soft-danger) !important; }
.text-soft-info { color: var(--z-soft-info) !important; }
.text-soft-primary { color: var(--z-soft-primary) !important; }
.text-success { color: var(--z-soft-success) !important; }
.text-warning { color: var(--z-soft-warning) !important; }
.text-danger { color: var(--z-soft-danger) !important; }
.text-info { color: var(--z-soft-info) !important; }
.text-primary { color: var(--z-soft-primary) !important; }
.bg-surface { background: var(--z-surface) !important; }
.bg-hover { background: var(--z-hover) !important; }
.border-dashed { border-style: dashed !important; }
.cursor-pointer { cursor: pointer; }
/* grids that fill their width: KPI tiles, two and three columns */
.raster { display: grid; gap: var(--z-gap); }
.raster > * { min-width: 0; }
.raster-kpi { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); align-items: start; }
.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; }
.stapel { display: flex; flex-direction: column; gap: var(--z-gap); }
.stapel-sm { display: flex; flex-direction: column; gap: .75rem; }
/* ===== 4. App layout ===== */
.app { min-height: 100vh; }
.app-main { min-height: 100vh; display: flex; flex-direction: column; min-width: 0; }
@media (min-width: 992px) { .app-main { margin-left: var(--z-sidebar-w); } }
.app-inhalt { flex: 1; width: 100%; max-width: var(--z-content-max); margin-inline: auto; padding: calc(var(--z-gutter) + .25rem) var(--z-gutter) 2.5rem; display: flex; flex-direction: column; gap: var(--z-gap); }
.app-inhalt > * { min-width: 0; }
.app-fuss { width: 100%; max-width: var(--z-content-max); margin-inline: auto; border-top: 1px solid var(--z-border); color: var(--z-muted); font-size: var(--z-fs-small); padding: 1rem var(--z-gutter); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); display: flex; flex-wrap: wrap; gap: 1rem; font-variant-numeric: tabular-nums; }
.app-fuss a { color: inherit; text-decoration: none; }
.app-fuss a:hover { color: var(--z-text); }
/* sidebar: fixed at lg and up, offcanvas below (Bootstrap .offcanvas-lg) */
.seitenleiste { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: var(--z-surface); --bs-offcanvas-border-color: var(--z-border); }
.seitenleiste-innen { display: flex; flex-direction: column; height: 100%; background: var(--z-surface); }
@media (min-width: 992px) {
.seitenleiste { position: fixed; inset: 0 auto 0 0; width: var(--z-sidebar-w); z-index: 1030; }
.seitenleiste-innen { border-right: 1px solid var(--z-border); }
}
.marke { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.1rem .9rem; color: var(--z-strong); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.marke:hover { color: var(--z-strong); }
.marke img { width: 26px; height: 26px; }
.marke small { display: block; font-weight: 400; color: var(--z-muted); font-size: var(--z-fs-xs); letter-spacing: 0; }
.sl-nav { flex: 1; overflow-y: auto; padding: .25rem .75rem 1rem; display: flex; flex-direction: column; gap: .1rem; }
.sl-link { display: flex; align-items: center; gap: .65rem; padding: .32rem .75rem; border-radius: var(--z-radius-sm); color: var(--z-nav); text-decoration: none; font-size: .875rem; line-height: 1.5; }
.sl-link .bi { font-size: 1rem; width: 1rem; text-align: center; color: var(--z-muted); }
.sl-link:hover { background: var(--z-hover); color: var(--z-strong); }
.sl-link.active { background: var(--z-hover); color: var(--z-strong); box-shadow: inset 2px 0 0 var(--z-accent); }
.sl-link.active .bi { color: var(--z-accent); }
.sl-link .sl-zahl { margin-left: auto; color: var(--z-muted); font-size: var(--z-fs-xs); font-variant-numeric: tabular-nums; }
.sl-gruppe { margin-top: .9rem; }
.sl-gruppe-knopf { display: flex; align-items: center; width: 100%; padding: .3rem .75rem; border: 0; background: none; color: var(--z-muted); font-size: var(--z-fs-section); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--z-radius-sm); }
.sl-gruppe-knopf:hover { color: var(--z-text); }
.sl-gruppe-knopf .bi { margin-left: auto; font-size: .7rem; transition: transform .15s ease; }
.sl-gruppe-knopf[aria-expanded="false"] .bi { transform: rotate(-90deg); }
.sl-gruppe-liste { display: flex; flex-direction: column; gap: .1rem; margin-top: .15rem; }
.sl-fuss { border-top: 1px solid var(--z-border); padding: .75rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px)); }
.sl-nutzer { display: flex; align-items: center; gap: .65rem; width: 100%; padding: .4rem .5rem; border: 0; border-radius: var(--z-radius-sm); background: none; color: var(--z-text); text-align: left; }
.sl-nutzer:hover, .sl-nutzer[aria-expanded="true"] { background: var(--z-hover); }
.avatar { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--z-radius-sm); background: rgba(var(--z-accent-rgb), var(--z-soft-alpha)); color: var(--z-soft-primary); font-weight: 600; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 1.6rem; height: 1.6rem; font-size: .75rem; border-radius: var(--z-radius-xs); }
.sl-nutzer-name { display: block; font-weight: 500; font-size: .85rem; line-height: 1.2; }
.sl-nutzer-rolle { display: block; color: var(--z-muted); font-size: var(--z-fs-xs); }
/* mobile top bar */
.oberleiste { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; min-height: 3.25rem; padding: env(safe-area-inset-top, 0px) var(--z-gutter) 0; background: var(--z-surface); border-bottom: 1px solid var(--z-border); }
.oberleiste .marke { padding: 0; }
/* public pages (logged out) */
.kopfleiste { border-bottom: 1px solid var(--z-border); background: var(--z-surface); }
.kopfleiste-innen { max-width: 72rem; margin: 0 auto; padding: .75rem var(--z-gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; }
.kopfleiste .marke { padding: 0; }
.kopfleiste nav a { color: var(--z-muted); text-decoration: none; font-size: .875rem; }
.kopfleiste nav a:hover, .kopfleiste nav a.active { color: var(--z-strong); }
.seitenfuss { border-top: 1px solid var(--z-border); color: var(--z-muted); font-size: var(--z-fs-small); }
.seitenfuss-innen { max-width: 72rem; margin: 0 auto; padding: 2.5rem var(--z-gutter); }
.seitenfuss a { color: var(--z-muted); text-decoration: none; }
.seitenfuss a:hover { color: var(--z-text); }
.seitenfuss h2 { font-size: .85rem; font-weight: 600; margin-bottom: .6rem; }
/* page head: title, muted line, actions on the right */
.seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.seitenkopf > :first-child { min-width: 0; }
.seitenkopf h1 { margin: 0; font-size: var(--z-fs-title); font-weight: 600; letter-spacing: -.01em; color: var(--z-strong); text-wrap: balance; overflow-wrap: anywhere; }
.seitenkopf p { margin: .25rem 0 0; font-size: var(--z-fs-sub); color: var(--z-muted); }
.seitenkopf-aktionen { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
/* ===== 5. Buttons ===== */
.btn { --bs-btn-font-weight: 500; --bs-btn-border-radius: var(--z-radius-sm); --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: .85rem; --bs-btn-focus-box-shadow: 0 0 0 2px var(--z-bg), 0 0 0 4px rgba(var(--z-accent-rgb), .7); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-sm { --bs-btn-padding-y: .22rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .8rem; --bs-btn-border-radius: var(--z-radius-sm); }
.btn-lg { --bs-btn-padding-y: .55rem; --bs-btn-padding-x: 1.1rem; --bs-btn-font-size: .95rem; --bs-btn-border-radius: var(--z-radius-sm); }
.btn-icon { --bs-btn-padding-x: .5rem; }
.btn-sm.btn-icon { --bs-btn-padding-x: .35rem; }
.btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--z-accent); --bs-btn-border-color: var(--z-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--z-accent-hover); --bs-btn-hover-border-color: var(--z-accent-hover); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--z-accent-hover); --bs-btn-active-border-color: var(--z-accent-hover); --bs-btn-disabled-bg: var(--z-accent); --bs-btn-disabled-border-color: var(--z-accent); }
.btn-outline-secondary, .btn-secondary, .btn-light, .btn-outline-light, .btn-dark, .btn-outline-dark { --bs-btn-color: var(--z-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--z-border); --bs-btn-hover-color: var(--z-strong); --bs-btn-hover-bg: var(--z-hover); --bs-btn-hover-border-color: var(--z-border); --bs-btn-active-color: var(--z-strong); --bs-btn-active-bg: var(--z-hover); --bs-btn-active-border-color: var(--z-border); --bs-btn-disabled-color: var(--z-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--z-border); }
.btn-outline-primary { --bs-btn-color: var(--z-soft-primary); --bs-btn-border-color: rgba(var(--z-accent-rgb), .45); --bs-btn-hover-color: var(--z-strong); --bs-btn-hover-bg: rgba(var(--z-accent-rgb), .15); --bs-btn-hover-border-color: rgba(var(--z-accent-rgb), .6); --bs-btn-active-color: var(--z-strong); --bs-btn-active-bg: rgba(var(--z-accent-rgb), .2); --bs-btn-active-border-color: rgba(var(--z-accent-rgb), .6); }
.btn-outline-danger { --bs-btn-color: var(--z-soft-danger); --bs-btn-border-color: rgba(var(--z-danger-rgb), .45); --bs-btn-hover-color: var(--z-soft-danger); --bs-btn-hover-bg: rgba(var(--z-danger-rgb), .12); --bs-btn-hover-border-color: rgba(var(--z-danger-rgb), .6); --bs-btn-active-color: var(--z-soft-danger); --bs-btn-active-bg: rgba(var(--z-danger-rgb), .18); --bs-btn-active-border-color: rgba(var(--z-danger-rgb), .6); }
.btn-outline-success { --bs-btn-color: var(--z-soft-success); --bs-btn-border-color: rgba(var(--z-success-rgb), .45); --bs-btn-hover-color: var(--z-soft-success); --bs-btn-hover-bg: rgba(var(--z-success-rgb), .12); --bs-btn-hover-border-color: rgba(var(--z-success-rgb), .6); --bs-btn-active-bg: rgba(var(--z-success-rgb), .18); --bs-btn-active-color: var(--z-soft-success); }
.btn-outline-warning { --bs-btn-color: var(--z-soft-warning); --bs-btn-border-color: rgba(var(--z-warning-rgb), .45); --bs-btn-hover-color: var(--z-soft-warning); --bs-btn-hover-bg: rgba(var(--z-warning-rgb), .1); --bs-btn-hover-border-color: rgba(var(--z-warning-rgb), .6); --bs-btn-active-bg: rgba(var(--z-warning-rgb), .16); --bs-btn-active-color: var(--z-soft-warning); }
/* filled danger only for the final confirmation in a dialog */
.btn-danger { --bs-btn-color: #fff; --bs-btn-bg: var(--z-danger); --bs-btn-border-color: var(--z-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #e04a4a; --bs-btn-hover-border-color: #e04a4a; --bs-btn-active-bg: #e04a4a; --bs-btn-active-border-color: #e04a4a; }
.btn-success { --bs-btn-color: #fff; --bs-btn-bg: var(--z-success); --bs-btn-border-color: var(--z-success); --bs-btn-hover-bg: #3cc252; --bs-btn-hover-border-color: #3cc252; --bs-btn-hover-color: #fff; }
.btn-ghost { --bs-btn-color: var(--z-nav); --bs-btn-bg: transparent; --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--z-strong); --bs-btn-hover-bg: var(--z-hover); --bs-btn-hover-border-color: transparent; --bs-btn-active-color: var(--z-strong); --bs-btn-active-bg: var(--z-hover); --bs-btn-active-border-color: transparent; }
.btn-link { --bs-btn-color: var(--z-soft-primary); --bs-btn-hover-color: var(--z-strong); --bs-btn-font-weight: 500; text-decoration: none; }
.btn-group > .btn { gap: .35rem; }
.btn-close { --bs-btn-close-opacity: .6; --bs-btn-close-hover-opacity: 1; --bs-btn-close-focus-shadow: 0 0 0 2px rgba(var(--z-accent-rgb), .6); }
/* ===== 6. Cards ===== */
.card { --bs-card-bg: var(--z-surface); --bs-card-color: var(--z-text); --bs-card-border-color: var(--z-border); --bs-card-border-radius: var(--z-radius); --bs-card-inner-border-radius: calc(var(--z-radius) - 1px); --bs-card-cap-bg: var(--z-head); --bs-card-cap-color: var(--z-strong); --bs-card-cap-padding-y: .8rem; --bs-card-cap-padding-x: 1rem; --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; --bs-card-title-color: var(--z-strong); --bs-card-subtitle-color: var(--z-muted); box-shadow: none; }
.card-header { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; min-height: 3.1rem; font-weight: 600; color: var(--z-strong); }
.card-header > .bi:first-child { color: var(--z-muted); font-weight: 400; }
.card-title { margin: 0; font-size: var(--z-fs-card-title); font-weight: 600; color: var(--z-strong); letter-spacing: -.005em; }
.card-header .card-title { display: flex; align-items: center; gap: .55rem; }
.card-header .card-title > .bi { color: var(--z-muted); font-weight: 400; }
.card-header .card-subtitle, .card-beschreibung { width: 100%; margin: 0; font-weight: 400; font-size: var(--z-fs-small); color: var(--z-muted); }
.card-aktionen { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-weight: 400; }
.card-footer { background: transparent; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: flex-end; }
.card > .table-responsive, .card > .table { margin: 0; }
.card > .list-group { --bs-list-group-border-radius: 0; }
.card-body > :last-child { margin-bottom: 0; }
/* collapsible cards (public/js/panel.js): click on the header, chevron right */
.card-header.klappbar { cursor: pointer; user-select: none; }
.card-header .klapp-pfeil { color: var(--z-muted); font-size: .8rem; transition: transform .15s ease; flex: none; }
.card-header.klappbar:not(:has(.card-aktionen)) .klapp-pfeil { margin-left: auto; }
.card-header.klappbar:hover .klapp-pfeil { color: var(--z-text); }
.card.ist-zu > :not(.card-header) { display: none !important; }
.card.ist-zu > .card-header { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }
.card.ist-zu .klapp-pfeil { transform: rotate(-90deg); }
/* KPI tiles: small muted label, big number, icon top right at 50 % */
.kennzahl { position: relative; padding: 1rem 1.1rem; }
.kennzahl-label { color: var(--z-muted); font-size: var(--z-fs-small); padding-right: 1.75rem; }
.kennzahl-wert { margin-top: .35rem; font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; color: var(--z-strong); line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kennzahl-notiz { margin-top: .45rem; display: flex; align-items: center; gap: .45rem; color: var(--z-muted); font-size: var(--z-fs-small); }
.kennzahl > .bi { position: absolute; top: 1rem; right: 1.1rem; font-size: 1.15rem; opacity: .5; }
/* status dot with a soft ring */
.punkt { display: inline-block; flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--z-soft-neutral); box-shadow: 0 0 0 3px rgba(var(--z-neutral-rgb), .2); vertical-align: middle; }
.punkt-ok { background: var(--z-success); box-shadow: 0 0 0 3px rgba(var(--z-success-rgb), .22); }
.punkt-warn { background: var(--z-warning); box-shadow: 0 0 0 3px rgba(var(--z-warning-rgb), .22); }
.punkt-fehler { background: var(--z-danger); box-shadow: 0 0 0 3px rgba(var(--z-danger-rgb), .24); }
.punkt-info { background: var(--z-accent); box-shadow: 0 0 0 3px rgba(var(--z-accent-rgb), .22); }
/* ===== 7. Badges ("soft") ===== */
.badge { --bs-badge-font-weight: 500; --bs-badge-font-size: .74rem; --bs-badge-padding-y: .28em; --bs-badge-padding-x: .6em; --bs-badge-border-radius: var(--z-radius-xs); --bs-badge-color: var(--z-soft-neutral); display: inline-flex; align-items: center; gap: .35rem; background: rgba(var(--z-neutral-rgb), .14); white-space: nowrap; }
.badge .punkt { width: .4rem; height: .4rem; box-shadow: none; }
.badge-soft-success, .text-bg-success { background: rgba(var(--z-success-rgb), var(--z-soft-alpha)) !important; color: var(--z-soft-success) !important; }
.badge-soft-warning, .text-bg-warning { background: rgba(var(--z-warning-rgb), var(--z-soft-alpha)) !important; color: var(--z-soft-warning) !important; }
.badge-soft-danger, .text-bg-danger { background: rgba(var(--z-danger-rgb), .18) !important; color: var(--z-soft-danger) !important; }
.badge-soft-info, .text-bg-info { background: rgba(var(--z-info-rgb), var(--z-soft-alpha)) !important; color: var(--z-soft-info) !important; }
.badge-soft-primary, .text-bg-primary { background: rgba(var(--z-accent-rgb), .18) !important; color: var(--z-soft-primary) !important; }
.badge-soft-neutral, .text-bg-secondary, .text-bg-dark, .text-bg-light { background: rgba(var(--z-neutral-rgb), .14) !important; color: var(--z-soft-neutral) !important; }
/* ===== 8. Forms ===== */
.form-control, .form-select { --bs-border-radius: var(--z-radius-sm); background-color: var(--z-bg); border-color: var(--z-border); color: var(--z-text); font-size: .875rem; padding: .45rem .75rem; }
.form-select { padding-right: 2.25rem; }
.form-control-sm, .form-select-sm { font-size: .8rem; padding-top: .25rem; padding-bottom: .25rem; }
.form-control::placeholder { color: var(--z-placeholder); }
.form-control:focus, .form-select:focus { background-color: var(--z-bg); border-color: var(--z-accent); color: var(--z-text); box-shadow: 0 0 0 1px var(--z-accent); }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--z-surface); color: var(--z-muted); }
.form-label { font-weight: 500; font-size: .85rem; margin-bottom: .35rem; color: var(--z-text); }
.form-text { color: var(--z-muted); font-size: .78rem; }
.form-check-input { background-color: var(--z-bg); border-color: #3a4456; }
.form-check-input:checked { background-color: var(--z-accent); border-color: var(--z-accent); }
.form-check-input:focus { border-color: var(--z-accent); box-shadow: 0 0 0 1px var(--z-accent); }
.form-switch .form-check-input { width: 2.1em; }
.form-check-label { color: var(--z-text); }
.form-range::-webkit-slider-thumb { background: var(--z-accent); }
.form-range::-moz-range-thumb { background: var(--z-accent); }
.form-range::-webkit-slider-runnable-track { background: var(--z-hover); }
.input-group-text { background: var(--z-hover); border-color: var(--z-border); color: var(--z-muted); font-size: .85rem; }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--z-danger); }
.invalid-feedback { color: var(--z-soft-danger); font-size: .78rem; }
.valid-feedback { color: var(--z-soft-success); font-size: .78rem; }
/* ===== 9. Alerts: tinted to their meaning ===== */
.alert { --bs-alert-border-radius: var(--z-radius); --bs-alert-padding-y: .8rem; --bs-alert-padding-x: 1rem; --bs-alert-margin-bottom: 0; --bs-alert-color: var(--z-text); --bs-alert-bg: rgba(var(--z-neutral-rgb), .06); --bs-alert-border-color: var(--z-border); --bs-alert-link-color: var(--z-strong); font-size: .875rem; }
.alert:has(> .bi:first-child) { display: flex; gap: .7rem; align-items: flex-start; }
.alert > .bi:first-child { font-size: 1rem; line-height: 1.35rem; flex: none; }
.alert strong, .alert .alert-heading { color: var(--z-strong); font-weight: 600; }
.alert-heading { font-size: .9rem; margin-bottom: .2rem; }
.alert-info, .alert-primary, .alert-soft-info { --bs-alert-bg: rgba(var(--z-info-rgb), .08); --bs-alert-border-color: rgba(var(--z-info-rgb), .22); --bs-alert-color: var(--z-text); }
.alert-info > .bi:first-child, .alert-primary > .bi:first-child, .alert-soft-info > .bi:first-child { color: var(--z-soft-info); }
.alert-success, .alert-soft-success { --bs-alert-bg: rgba(var(--z-success-rgb), .08); --bs-alert-border-color: rgba(var(--z-success-rgb), .25); --bs-alert-color: var(--z-text); }
.alert-success > .bi:first-child, .alert-soft-success > .bi:first-child { color: var(--z-soft-success); }
.alert-warning, .alert-soft-warning { --bs-alert-bg: rgba(var(--z-warning-rgb), .07); --bs-alert-border-color: rgba(var(--z-warning-rgb), .22); --bs-alert-color: var(--z-text); }
.alert-warning > .bi:first-child, .alert-soft-warning > .bi:first-child { color: var(--z-soft-warning); }
.alert-danger, .alert-soft-danger { --bs-alert-bg: rgba(var(--z-danger-rgb), .08); --bs-alert-border-color: rgba(var(--z-danger-rgb), .28); --bs-alert-color: var(--z-text); }
.alert-danger > .bi:first-child, .alert-soft-danger > .bi:first-child { color: var(--z-soft-danger); }
.alert-secondary, .alert-light, .alert-dark { --bs-alert-bg: rgba(var(--z-neutral-rgb), .06); --bs-alert-border-color: var(--z-border); --bs-alert-color: var(--z-text); }
/* ===== 10. Tables: no vertical lines, quiet hover, 1rem to the card edge ===== */
.table { --bs-table-bg: transparent; --bs-table-color: var(--z-text); --bs-table-border-color: var(--z-border); --bs-table-hover-bg: rgba(255, 255, 255, .025); --bs-table-hover-color: var(--z-text); --bs-table-striped-bg: rgba(255, 255, 255, .015); --bs-table-active-bg: var(--z-hover); --bs-table-active-color: var(--z-strong); margin-bottom: 0; font-size: .86rem; }
.table > :not(caption) > * > * { padding: .65rem .75rem; vertical-align: middle; }
.table-sm > :not(caption) > * > * { padding: .4rem .6rem; }
.table > thead > tr > th, .table th[scope="col"] { color: var(--z-muted); font-size: var(--z-fs-th); font-weight: 500; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.table > :not(caption) > * > :first-child { padding-left: 1rem; }
.table > :not(caption) > * > :last-child { padding-right: 1rem; }
.table > tbody > tr:last-child > * { border-bottom-width: 0; }
.table-bordered > :not(caption) > * > * { border-width: 0 0 1px; }
.zelle-haupt { color: var(--z-strong); font-weight: 500; }
.zelle-neben { color: var(--z-muted); font-size: .78rem; }
.zeilen-link { color: inherit; text-decoration: none; }
.zeilen-link:hover .zelle-haupt, a.zelle-haupt:hover { color: var(--z-soft-primary); }
/* list groups */
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--z-text); --bs-list-group-border-color: var(--z-border); --bs-list-group-border-radius: var(--z-radius); --bs-list-group-action-hover-bg: var(--z-hover); --bs-list-group-action-hover-color: var(--z-strong); --bs-list-group-action-active-bg: var(--z-hover); --bs-list-group-active-bg: var(--z-hover); --bs-list-group-active-color: var(--z-strong); --bs-list-group-active-border-color: var(--z-border); --bs-list-group-item-padding-x: 1rem; }
/* key/value lists (server details, account data) */
.kv { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; margin: 0; }
.kv > dt, .kv > dd { padding: .55rem 0; border-bottom: 1px solid var(--z-border); margin: 0; }
.kv > dt { color: var(--z-muted); font-weight: 400; }
.kv > dd { color: var(--z-text); min-width: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.kv > dt:nth-last-child(2), .kv > dd:last-child { border-bottom: 0; }
.kv-2 { column-gap: 2rem; }
@media (min-width: 768px) { .kv-2 { grid-template-columns: minmax(7rem, 22%) 1fr minmax(7rem, 22%) 1fr; } .kv-2 > dt:nth-last-child(4), .kv-2 > dd:nth-last-child(3) { border-bottom: 0; } }
/* usage bars: */
.balken { height: 6px; width: 100%; border-radius: 99px; background: var(--z-hover); overflow: hidden; }
.balken > div { height: 100%; border-radius: inherit; background: var(--z-success); transition: width .3s ease; }
.balken.balken-warn > div { background: var(--z-warning); }
.balken.balken-fehler > div { background: var(--z-danger); }
.balken.balken-info > div { background: var(--z-accent); }
.messung { display: grid; grid-template-columns: 3.25rem 1fr 3rem; align-items: center; gap: .65rem; font-size: var(--z-fs-small); }
.messung + .messung { margin-top: .55rem; }
.messung > :first-child { color: var(--z-muted); }
.messung > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.progress { --bs-progress-bg: var(--z-hover); --bs-progress-bar-bg: var(--z-accent); --bs-progress-border-radius: 99px; --bs-progress-height: 6px; }
/* empty state: short, no explanatory essay */
.leer { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2rem 1rem; color: var(--z-muted); text-align: center; font-size: .875rem; }
.leer > .bi { font-size: 1.4rem; color: var(--z-nav); }
/* error pages: centered card, square icon field, code as badge */
.fehlerseite { min-height: calc(100vh - 14rem); display: grid; place-items: center; padding: 2rem var(--z-gutter); }
.fehlerseite .card { width: min(100%, 26rem); text-align: center; }
.fehlerseite .card-body { padding: 2.25rem 1.75rem 1.75rem; display: flex; flex-direction: column; align-items: center; gap: .85rem; }
.fehlerseite-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--z-radius); background: rgba(var(--z-accent-rgb), .15); color: var(--z-soft-primary); font-size: 1.4rem; }
.fehlerseite-icon.ist-warnung { background: rgba(var(--z-warning-rgb), .14); color: var(--z-soft-warning); }
.fehlerseite-icon.ist-fehler { background: rgba(var(--z-danger-rgb), .15); color: var(--z-soft-danger); }
.fehlerseite h1 { margin: 0; font-size: 1.25rem; }
.fehlerseite p { margin: 0; color: var(--z-muted); }
/* ===== 11. Navigation inside pages ===== */
.nav { --bs-nav-link-color: var(--z-muted); --bs-nav-link-hover-color: var(--z-strong); --bs-nav-link-font-size: .875rem; --bs-nav-link-font-weight: 500; --bs-nav-link-padding-y: .35rem; --bs-nav-link-padding-x: .75rem; }
.nav-pills { --bs-nav-pills-border-radius: var(--z-radius-sm); --bs-nav-pills-link-active-bg: var(--z-hover); --bs-nav-pills-link-active-color: var(--z-strong); gap: .25rem; }
.nav-pills .nav-link { display: inline-flex; align-items: center; gap: .5rem; }
.nav-pills .nav-link:hover { background: var(--z-hover); }
.nav-tabs { --bs-nav-tabs-border-color: var(--z-border); --bs-nav-tabs-border-radius: 0; --bs-nav-tabs-link-hover-border-color: transparent; --bs-nav-tabs-link-active-bg: transparent; --bs-nav-tabs-link-active-color: var(--z-strong); --bs-nav-tabs-link-active-border-color: transparent; gap: .25rem; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: .5rem; }
.nav-tabs .nav-link.active { border-bottom-color: var(--z-accent); }
.nav-pills.flex-column .nav-link.active, .bereichsnav > .active { box-shadow: inset 2px 0 0 var(--z-accent); }
/* section menu on detail pages and settings: horizontal on small screens, a column from lg */
.bereichsnav { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; scrollbar-color: var(--z-border) transparent; }
@media (min-width: 992px) { .bereichsnav { flex-direction: column; overflow: visible; padding: 0; } }
.bereichsnav > a, .bereichsnav > button { display: flex; align-items: center; gap: .65rem; white-space: nowrap; padding: .32rem .75rem; border: 0; border-radius: var(--z-radius-sm); background: none; color: var(--z-nav); text-align: left; text-decoration: none; font-size: .875rem; }
.bereichsnav > a .bi, .bereichsnav > button .bi { color: var(--z-muted); width: 1rem; text-align: center; }
.bereichsnav > a:hover, .bereichsnav > button:hover { background: var(--z-hover); color: var(--z-strong); }
.bereichsnav > .active, .bereichsnav > [aria-current="page"] { background: var(--z-hover); color: var(--z-strong); }
.bereichsnav > .active .bi { color: var(--z-accent); }
.bereichsnav-titel { padding: .3rem .75rem; color: var(--z-muted); font-size: var(--z-fs-section); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 991.98px) { .bereichsnav-titel { display: none; } }
/* detail pages: showSection() switches .active on sections and menu entries */
.kvm-section { display: none; }
.kvm-section.active { display: flex; flex-direction: column; gap: var(--z-gap); }
.kvm-section-title { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: 1.1rem; font-weight: 600; color: var(--z-strong); }
.kvm-section-title > .bi { color: var(--z-muted); font-weight: 400; }
.kvm-sidebar-item { display: flex; align-items: center; gap: .65rem; white-space: nowrap; padding: .32rem .75rem; border: 0; border-radius: var(--z-radius-sm); background: none; color: var(--z-nav); text-decoration: none; font-size: .875rem; text-align: left; }
.kvm-sidebar-item .bi { color: var(--z-muted); width: 1rem; text-align: center; }
.kvm-sidebar-item:hover { background: var(--z-hover); color: var(--z-strong); }
.kvm-sidebar-item.active { background: var(--z-hover); color: var(--z-strong); box-shadow: inset 2px 0 0 var(--z-accent); }
.kvm-sidebar-item.active .bi { color: var(--z-accent); }
.detail-raster { display: grid; gap: var(--z-gap); }
@media (min-width: 992px) { .detail-raster { grid-template-columns: 13.5rem minmax(0, 1fr); align-items: start; } .detail-raster > nav { position: sticky; top: 1.5rem; } }
/* ===== 12. Overlays: dropdowns, modals, offcanvas, tooltips, toasts ===== */
.dropdown-menu { --bs-dropdown-bg: var(--z-surface); --bs-dropdown-color: var(--z-text); --bs-dropdown-border-color: var(--z-border); --bs-dropdown-border-radius: var(--z-radius-sm); --bs-dropdown-inner-border-radius: calc(var(--z-radius-sm) - 1px); --bs-dropdown-link-color: var(--z-text); --bs-dropdown-link-hover-bg: var(--z-hover); --bs-dropdown-link-hover-color: var(--z-strong); --bs-dropdown-link-active-bg: var(--z-hover); --bs-dropdown-link-active-color: var(--z-strong); --bs-dropdown-divider-bg: var(--z-border); --bs-dropdown-header-color: var(--z-muted); --bs-dropdown-font-size: .85rem; --bs-dropdown-item-padding-y: .35rem; --bs-dropdown-item-padding-x: .6rem; --bs-dropdown-padding-x: .3rem; --bs-dropdown-padding-y: .3rem; --bs-dropdown-box-shadow: none; }
.dropdown-item { border-radius: var(--z-radius-xs); display: flex; align-items: center; gap: .6rem; }
.dropdown-item .bi { color: var(--z-muted); width: 1rem; text-align: center; }
.dropdown-item.text-danger .bi { color: inherit; }
.dropdown-header { font-size: var(--z-fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.modal { --bs-modal-bg: var(--z-surface); --bs-modal-color: var(--z-text); --bs-modal-border-color: var(--z-border); --bs-modal-border-radius: var(--z-radius); --bs-modal-inner-border-radius: calc(var(--z-radius) - 1px); --bs-modal-box-shadow: none; --bs-modal-header-border-color: var(--z-border); --bs-modal-footer-border-color: var(--z-border); --bs-modal-header-padding: .9rem 1.1rem; --bs-modal-padding: 1.1rem; --bs-modal-title-line-height: 1.4; }
.modal-header { background: var(--z-head); }
.modal-title { font-size: 1rem; font-weight: 600; display: flex; align-items: center; gap: .55rem; }
.modal-footer { gap: .5rem; }
.modal-footer > * { margin: 0; }
.modal-backdrop { --bs-backdrop-bg: #05070a; --bs-backdrop-opacity: .72; }
.offcanvas, .offcanvas-lg { --bs-offcanvas-bg: var(--z-surface); --bs-offcanvas-color: var(--z-text); --bs-offcanvas-border-color: var(--z-border); --bs-offcanvas-box-shadow: none; }
.offcanvas-backdrop { --bs-backdrop-bg: #05070a; --bs-backdrop-opacity: .72; }
.tooltip { --bs-tooltip-bg: var(--z-hover); --bs-tooltip-color: var(--z-text); --bs-tooltip-border-radius: var(--z-radius-xs); --bs-tooltip-font-size: .78rem; --bs-tooltip-opacity: 1; }
.popover { --bs-popover-bg: var(--z-surface); --bs-popover-border-color: var(--z-border); --bs-popover-border-radius: var(--z-radius-sm); --bs-popover-header-bg: var(--z-head); --bs-popover-header-color: var(--z-strong); --bs-popover-body-color: var(--z-text); --bs-popover-box-shadow: none; }
.toast { --bs-toast-bg: var(--z-surface); --bs-toast-border-color: var(--z-border); --bs-toast-border-radius: var(--z-radius); --bs-toast-box-shadow: none; --bs-toast-color: var(--z-text); --bs-toast-header-bg: var(--z-head); --bs-toast-header-color: var(--z-strong); }
.accordion { --bs-accordion-bg: var(--z-surface); --bs-accordion-color: var(--z-text); --bs-accordion-border-color: var(--z-border); --bs-accordion-border-radius: var(--z-radius); --bs-accordion-inner-border-radius: calc(var(--z-radius) - 1px); --bs-accordion-btn-color: var(--z-strong); --bs-accordion-btn-bg: var(--z-surface); --bs-accordion-active-bg: var(--z-hover); --bs-accordion-active-color: var(--z-strong); --bs-accordion-btn-focus-box-shadow: 0 0 0 1px var(--z-accent); }
.pagination { --bs-pagination-bg: transparent; --bs-pagination-color: var(--z-text); --bs-pagination-border-color: var(--z-border); --bs-pagination-hover-bg: var(--z-hover); --bs-pagination-hover-color: var(--z-strong); --bs-pagination-hover-border-color: var(--z-border); --bs-pagination-active-bg: var(--z-hover); --bs-pagination-active-color: var(--z-strong); --bs-pagination-active-border-color: var(--z-accent); --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: var(--z-muted); --bs-pagination-disabled-border-color: var(--z-border); --bs-pagination-border-radius: var(--z-radius-sm); --bs-pagination-font-size: .85rem; }
/* flash messages (views/partials/flash-messages.ejs): bottom right, 10 s,
the bar at the bottom runs down over exactly that time and IS the clock */
.meldungen { position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 2000; width: min(24rem, calc(100vw - 2rem)); display: flex; flex-direction: column; gap: .5rem; }
.flash-message { position: relative; overflow: hidden; display: flex; align-items: flex-start; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--z-border); border-radius: var(--z-radius); background: var(--z-surface); color: var(--z-text); font-size: .875rem; }
.flash-message > .bi { font-size: 1rem; line-height: 1.35rem; }
.flash-message p { margin: 0; flex: 1; min-width: 0; }
.flash-balken { position: absolute; inset: auto 0 0 0; height: 2px; background: currentColor; transform-origin: left; animation: flash-ablauf 10s linear forwards; }
.flash-message:hover .flash-balken, .flash-message:focus-within .flash-balken { animation-play-state: paused; }
@keyframes flash-ablauf { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* ===== 13. OS tiles (reinstall, ISO) - built by public/js/os-brands.js ===== */
.hz-abbild-raster { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.hz-abbild-raster > :not(.hz-abbild-zelle) { grid-column: 1 / -1; }
.hz-abbild-zelle { display: flex; min-width: 0; flex-direction: column; gap: .4rem; }
.hz-abbild { display: flex; flex: 1; cursor: pointer; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; border: 1px solid var(--z-border); border-radius: var(--z-radius); background: var(--z-surface); color: var(--z-text); text-align: center; font-size: .85rem; font-weight: 500; }
.hz-abbild:hover { background: var(--z-hover); }
.hz-abbild::before { content: ''; width: 2.75rem; height: 2.75rem; flex: none; border-radius: var(--z-radius-sm); background: #fff var(--os-marke, none) center / 62% no-repeat; }
.btn-check:checked + .hz-abbild { border-color: var(--z-accent); background: var(--z-hover); box-shadow: inset 0 0 0 1px var(--z-accent); }
.btn-check:focus-visible + .hz-abbild { outline: 2px solid var(--z-accent); outline-offset: 2px; }
.hz-abbild-fassung { font-size: var(--z-fs-xs); font-weight: 400; color: var(--z-muted); }
.hz-abbild-fassungen { font-size: .78rem; padding-top: .25rem; padding-bottom: .25rem; }
.hz-iso-marke { width: 2rem; height: 2rem; flex: none; border-radius: var(--z-radius-xs); background: #fff var(--os-marke, none) center / 62% no-repeat; }
@media (prefers-reduced-motion: reduce) {
.sl-gruppe-knopf .bi, .card-header .klapp-pfeil, .balken > div { transition: none; }
}
/* ===== 14. Native dialogs (