/*
* DZKB UI · components.css
* ------------------------------------------------------------------
* Jede Komponente ist hier GENAU EINMAL definiert. Apps verwenden nur
* die Klassen (ui-btn, ui-badge, ui-table …) und definieren Buttons,
* Tags, Karten, Tabellen und Formularfelder niemals selbst.
*
* Feste Zuordnung der Aktionen (gilt in allen Apps):
* Hauptaktion (Speichern, Anlegen, Starten) → ui-btn ui-btn--primary
* Nebenaktion (Öffnen, Zurück, Suchen) → ui-btn
* Bearbeiten in Tabellen → ui-icon-btn + ui-icon--edit
* Löschen – überall – → ui-icon-btn ui-icon-btn--danger + ui-icon--trash
* Sonstige riskante Aktion (Stornieren …) → ui-btn ui-btn--danger
* Riskantes wird nie per Dialog bestätigt, sondern mit data-ui-confirm
* (zweiter Klick auf denselben Button).
*
* Statusfarben: success = erledigt/bestanden · warning = offen/läuft ·
* danger = nicht bestanden/gesperrt · info = Hinweis · neutral = ohne Wertung
*
* Benötigt tokens.css (wird davor geladen).
*/
/* ================================================================== */
/* Grundlage – gilt nur innerhalb von */
/* ================================================================== */
@layer ui-base {
.ui-app,
.ui-app *,
.ui-app *::before,
.ui-app *::after { box-sizing: border-box; }
body.ui-app {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--dzkb-page);
color: var(--dzkb-text-strong);
font-family: var(--dzkb-font);
font-size: var(--dzkb-text-md);
line-height: 1.5;
overflow-wrap: break-word;
-webkit-text-size-adjust: 100%;
}
.ui-app :where(h1, h2, h3, h4) { margin: 0 0 .5em; color: var(--dzkb-text-strong); line-height: 1.2; letter-spacing: -.01em; }
.ui-app :where(h1) { font-size: var(--dzkb-text-2xl); }
.ui-app :where(h2) { font-size: var(--dzkb-text-lg); }
.ui-app :where(h3) { font-size: 1rem; }
.ui-app :where(p, ul, ol) { margin: 0 0 .75em; }
.ui-app :where(p, ul, ol):last-child { margin-bottom: 0; }
.ui-app :where(a) { color: var(--dzkb-brand-600); text-decoration: none; }
.ui-app :where(a:hover) { color: var(--dzkb-brand-700); }
.ui-app :where(button, input, select, textarea) { font: inherit; color: inherit; }
.ui-app :where(img) { max-width: 100%; height: auto; }
.ui-app :where(code) { font-family: var(--dzkb-font-mono); font-size: .9em; padding: 1px 5px; border-radius: var(--dzkb-radius-xs); background: var(--dzkb-neutral-soft); color: var(--dzkb-neutral-text); }
.ui-app :where(hr) { border: 0; border-top: 1px solid var(--dzkb-divider); margin: var(--dzkb-space-4) 0; }
.ui-app :where(a, button, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--dzkb-focus-ring); border-radius: var(--dzkb-radius-xs); }
.ui-app [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
.ui-app *, .ui-app *::before, .ui-app *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
}
@layer ui-components {
/* ================================================================ */
/* Icons – ein Satz für alle Apps, Farbe = Textfarbe */
/* */
/* ================================================================ */
.ui-icon {
display: inline-block;
flex: none;
width: 1.2em;
height: 1.2em;
vertical-align: -.22em;
background-color: currentColor;
-webkit-mask: var(--ui-icon) center / contain no-repeat;
mask: var(--ui-icon) center / contain no-repeat;
}
.ui-icon--home { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5M5.5 10v9.5h13V10'/%3E%3C/svg%3E"); }
.ui-icon--dashboard { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v9H4zM13 4h7v5h-7zM13 11h7v9h-7zM4 15h7v5H4z'/%3E%3C/svg%3E"); }
.ui-icon--user { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM5 20v-1a5 5 0 0 1 5-5h4a5 5 0 0 1 5 5v1'/%3E%3C/svg%3E"); }
.ui-icon--users { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 10.5a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM3.5 19v-1.5A3.5 3.5 0 0 1 7 14h6a3.5 3.5 0 0 1 3.5 3.5V19M16 4.7a3 3 0 0 1 0 5.6M20.5 19v-1.5a3.5 3.5 0 0 0-2.5-3.3'/%3E%3C/svg%3E"); }
.ui-icon--clipboard { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5h6v3H9zM9 6H6.5v14.5h11V6H15M9.5 12h5M9.5 15.5h5'/%3E%3C/svg%3E"); }
.ui-icon--calendar { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15v13h-15zM4.5 10.5h15M8.5 4v4M15.5 4v4'/%3E%3C/svg%3E"); }
.ui-icon--calendar-check { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15v13h-15zM4.5 10.5h15M8.5 4v4M15.5 4v4M9.5 15l2 2 3.5-3.5'/%3E%3C/svg%3E"); }
.ui-icon--file { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h7l4 4v13H7zM14 3.5v4h4M9.5 13h5M9.5 16.5h5'/%3E%3C/svg%3E"); }
.ui-icon--award { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM9 13.2 8 21l4-2 4 2-1-7.8'/%3E%3C/svg%3E"); }
.ui-icon--building { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20.5h16M6 20.5v-15h8v15M14 10.5h4v10M9 9h2M9 12.5h2M9 16h2'/%3E%3C/svg%3E"); }
.ui-icon--shield { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 5 6.5v5c0 4.2 2.8 7.6 7 9 4.2-1.4 7-4.8 7-9v-5z'/%3E%3C/svg%3E"); }
.ui-icon--graduation { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 9.5 12 5l9.5 4.5L12 14zM6.5 11.8V16c1.5 1.5 3.5 2.2 5.5 2.2s4-.7 5.5-2.2v-4.2'/%3E%3C/svg%3E"); }
.ui-icon--logout { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5H5.5v15H10M15 8l4 4-4 4M19 12H9.5'/%3E%3C/svg%3E"); }
.ui-icon--trash { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4h6v3M6.5 7l1 13h9l1-13M10 11v5M14 11v5'/%3E%3C/svg%3E"); }
.ui-icon--edit { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4'/%3E%3C/svg%3E"); }
.ui-icon--mail { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6h17v12h-17zM3.5 7l8.5 6.5L20.5 7'/%3E%3C/svg%3E"); }
.ui-icon--plus { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.ui-icon--search { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 17a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM15.5 15.5 20 20'/%3E%3C/svg%3E"); }
.ui-icon--sync { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.5-4M4 4v3.5h3.5M4 13a8 8 0 0 0 14.5 4M20 20v-3.5h-3.5'/%3E%3C/svg%3E"); }
.ui-icon--arrow-left { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ui-icon--arrow-right { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ui-icon--chevron-down { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5l6 6 6-6'/%3E%3C/svg%3E"); }
.ui-icon--check { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.ui-icon--x { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.ui-icon--alert { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.5 20h19zM12 10v4.5M12 17.5v.01'/%3E%3C/svg%3E"); }
.ui-icon--info { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM12 11v5.5M12 7.8v.01'/%3E%3C/svg%3E"); }
.ui-icon--download { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E"); }
.ui-icon--eye { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12s3.5-6.5 9.5-6.5 9.5 6.5 9.5 6.5-3.500 6.5-9.5 6.5S2.5 12 2.5 12zM12 14.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z'/%3E%3C/svg%3E"); }
.ui-icon--lock { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9.5H6zM8.500 11V8a3.5 3.5 0 0 1 7 0v3'/%3E%3C/svg%3E"); }
.ui-icon--unlock { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 11h12v9.5H6zM8.500 11V8a3.5 3.5 0 0 1 6.8-1.2'/%3E%3C/svg%3E"); }
.ui-icon--menu { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ui-icon--play { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10-6.5z'/%3E%3C/svg%3E"); }
.ui-icon--ban { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM6 6l12 12'/%3E%3C/svg%3E"); }
.ui-icon--external { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M11 6H5.5v12.500H18V13'/%3E%3C/svg%3E"); }
.ui-icon--settings { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM12 3v3M12 18v3M3 12h3M18 12h3M5.600 5.600l2.100 2.100M16.300 16.300l2.100 2.100M5.600 18.400l2.100-2.100M16.300 7.700l2.100-2.100'/%3E%3C/svg%3E"); }
.ui-icon--help { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5a8.5 8.5 0 1 0 0-17 8.5 8.5 0 0 0 0 17zM9.6 9.6a2.5 2.5 0 1 1 3.700 2.200c-.800.450-1.300 1-1.300 1.900M12 16.800v.01'/%3E%3C/svg%3E"); }
.ui-icon--key { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15.500 13a4.500 4.500 0 1 0 0-9 4.500 4.500 0 0 0 0 9zM12.300 11.700 4 20M6.500 17.500 9 20M9 15l2 2'/%3E%3C/svg%3E"); }
.ui-icon--book { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4.500h11.500a2 2 0 0 1 2 2v13H7a2 2 0 0 1-2-2zM5 17.500a2 2 0 0 1 2-2h11.500M9 8.500h6'/%3E%3C/svg%3E"); }
.ui-icon--copy { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 9h10.500v10.500H9zM15 9V4.500H4.500V15H9'/%3E%3C/svg%3E"); }
.ui-icon--upload { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15.500V4.500M7.500 9 12 4.500 16.500 9M5 19.500h14'/%3E%3C/svg%3E"); }
.ui-icon--image { --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.500 5.500h15v13h-15zM4.500 15.500l4.500-4.500 4 4 2.500-2.500 4 4M15.500 9.500v.01'/%3E%3C/svg%3E"); }
/* ================================================================ */
/* Seitenrahmen: Kopfzeile, Navigation, Inhalt, Fuß */
/* ================================================================ */
.ui-topbar {
position: relative;
color: var(--dzkb-text-strong);
font-family: var(--dzkb-font);
line-height: 1.4;
background: var(--dzkb-surface);
border-bottom: 1px solid var(--dzkb-border);
}
.ui-topbar::after {
content: "";
position: absolute;
inset: auto 0 -1px 0;
height: 3px;
background: var(--dzkb-gradient-accent);
}
.ui-topbar__inner,
.ui-page {
width: min(100% - 2 * var(--dzkb-gutter), var(--dzkb-content-width));
margin-inline: auto;
}
.ui-topbar__inner {
min-height: calc(var(--dzkb-topbar-height) - 1px);
padding-block: 8px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--dzkb-space-4);
}
.ui-brand {
display: flex;
align-items: center;
gap: var(--dzkb-space-3);
flex: 0 1 auto;
min-width: 0;
color: var(--dzkb-text-strong);
text-decoration: none;
}
.ui-brand img { width: auto; height: 44px; flex: none; }
.ui-brand__text { display: grid; min-width: 0; line-height: 1.2; }
.ui-brand__text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-brand__text b { font-size: 1.02rem; color: var(--dzkb-text-strong); }
.ui-brand__text small { font-size: var(--dzkb-text-xs); color: var(--dzkb-text-muted); }
.ui-userchip { display: flex; align-items: center; gap: var(--dzkb-space-2); min-width: 0; }
.ui-userchip__avatar {
width: 34px; height: 34px; flex: none;
display: grid; place-items: center;
border-radius: var(--dzkb-radius-md);
background: var(--dzkb-gradient-brand);
color: var(--dzkb-text-on-brand);
font-weight: 800;
}
.ui-userchip__meta { display: grid; line-height: 1.2; min-width: 0; }
.ui-userchip__meta b { font-size: var(--dzkb-text-sm); }
.ui-userchip__meta small { font-size: var(--dzkb-text-xs); color: var(--dzkb-text-muted); }
/* Rahmen mit Seitenleiste:
*/
.ui-topbar, .ui-topbar *, .ui-shell, .ui-shell__main, .ui-sidebar, .ui-sidebar * { box-sizing: border-box; }
.ui-topbar--wide .ui-topbar__inner { width: auto; margin: 0; padding-inline: var(--dzkb-gutter); }
.ui-shell {
display: grid;
grid-template-columns: var(--dzkb-sidebar-width) minmax(0, 1fr);
min-height: calc(100vh - var(--dzkb-topbar-height));
}
.ui-shell__main { display: flex; flex-direction: column; min-width: 0; }
.ui-shell__main > main { flex: 1 0 auto; }
.ui-shell__main > .ui-page {
width: auto;
max-width: calc(var(--dzkb-content-width) + 2 * var(--dzkb-gutter));
margin: 0;
padding-inline: var(--dzkb-gutter);
}
.ui-sidebar {
background: var(--dzkb-sidebar-bg);
color: var(--dzkb-sidebar-text);
font-family: var(--dzkb-font);
font-size: var(--dzkb-text-md);
line-height: 1.4;
}
.ui-sidebar__inner {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
max-height: 100vh;
overflow-y: auto;
padding: 20px 12px 16px;
}
.ui-sidebar__menu { display: grid; gap: 14px; }
.ui-sidebar__toggle { display: none; }
.ui-sidenav { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ui-sidenav__label {
display: block;
margin-bottom: 8px;
padding: 0 11px;
color: var(--dzkb-sidebar-muted);
font-size: .66rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.ui-sidenav__link {
display: flex;
align-items: center;
gap: 11px;
padding: 7px 9px;
border: 1px solid transparent;
border-radius: var(--dzkb-radius-md);
color: var(--dzkb-sidebar-text);
font-weight: 600;
text-decoration: none;
transition: background var(--dzkb-duration) var(--dzkb-ease), border-color var(--dzkb-duration) var(--dzkb-ease), color var(--dzkb-duration) var(--dzkb-ease);
}
.ui-sidenav__link:hover { background: var(--dzkb-sidebar-hover); color: var(--dzkb-sidebar-text-strong); }
.ui-sidenav__link:focus-visible,
.ui-sidebar__logout:focus-visible,
.ui-sidebar__toggle:focus-visible { outline: none; box-shadow: var(--dzkb-focus-ring); }
.ui-sidenav__link[aria-current="page"] { background: var(--dzkb-sidebar-active); border-color: var(--dzkb-sidebar-border); color: var(--dzkb-sidebar-text-strong); }
.ui-sidenav__icon {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border-radius: var(--dzkb-radius-sm);
background: var(--dzkb-sidebar-hover);
}
.ui-sidenav__link[aria-current="page"] .ui-sidenav__icon { background: var(--dzkb-sidebar-chip); color: var(--dzkb-brand-700); }
.ui-sidebar__user {
display: grid;
gap: 10px;
padding: 12px;
border: 1px solid var(--dzkb-sidebar-border);
border-radius: var(--dzkb-radius-lg);
background: var(--dzkb-sidebar-hover);
}
.ui-sidebar .ui-userchip__meta > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-sidebar .ui-userchip__meta b { color: var(--dzkb-sidebar-text-strong); }
.ui-sidebar .ui-userchip__meta small { color: var(--dzkb-sidebar-muted); }
.ui-sidebar__logout {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 32px;
padding: 4px 10px;
border: 1px solid var(--dzkb-sidebar-border);
border-radius: var(--dzkb-radius-sm);
background: var(--dzkb-sidebar-hover);
color: var(--dzkb-sidebar-text-strong);
font-size: var(--dzkb-text-sm);
font-weight: 700;
text-decoration: none;
transition: background var(--dzkb-duration) var(--dzkb-ease);
}
.ui-sidebar__logout:hover { background: var(--dzkb-sidebar-active); color: var(--dzkb-sidebar-text-strong); }
.ui-page { flex: 1 0 auto; padding-block: var(--dzkb-space-5) 48px; }
.ui-footer {
padding: var(--dzkb-space-4) var(--dzkb-gutter);
border-top: 1px solid var(--dzkb-border);
color: var(--dzkb-text-muted);
font-size: var(--dzkb-text-xs);
text-align: center;
}
/* Anmeldeseiten: */
.ui-auth { justify-content: center; align-items: center; padding: var(--dzkb-space-5) var(--dzkb-gutter); background: var(--dzkb-gradient-panel); }
.ui-auth__card { width: min(100%, 420px); }
.ui-auth__logo { display: block; width: 150px; margin: 0 auto var(--dzkb-space-4); }
.ui-auth__title { text-align: center; font-size: var(--dzkb-text-xl); margin-bottom: 4px; }
.ui-auth__sub { text-align: center; color: var(--dzkb-text-muted); margin-bottom: var(--dzkb-space-5); }
/* ================================================================ */
/* Seitenkopf */
/* ================================================================ */
.ui-pagehead {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--dzkb-space-3) var(--dzkb-space-4);
margin-bottom: var(--dzkb-space-5);
}
.ui-pagehead > :first-child { min-width: 0; flex: 1 1 320px; }
.ui-pagehead__title { margin: 0; font-size: var(--dzkb-text-2xl); }
.ui-pagehead__sub { margin: 4px 0 0; color: var(--dzkb-text-muted); }
.ui-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dzkb-space-2); }
.ui-eyebrow { display: block; margin-bottom: 4px; color: var(--dzkb-brand-600); font-size: var(--dzkb-text-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ui-section-title { margin: var(--dzkb-space-6) 0 var(--dzkb-space-3); font-size: var(--dzkb-text-lg); }
/* ================================================================ */
/* Buttons */
/* ================================================================ */
.ui-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
max-width: 100%;
min-height: var(--dzkb-height-button);
margin: 0;
padding: 4px 14px;
border: 1px solid var(--dzkb-neutral-border);
border-radius: var(--dzkb-radius-sm);
background: var(--dzkb-surface);
color: var(--dzkb-text);
font: inherit;
font-size: var(--dzkb-text-sm);
font-weight: 700;
line-height: 1.15;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: background var(--dzkb-duration) var(--dzkb-ease), border-color var(--dzkb-duration) var(--dzkb-ease), color var(--dzkb-duration) var(--dzkb-ease), filter var(--dzkb-duration) var(--dzkb-ease);
}
.ui-btn:hover { background: var(--dzkb-info-soft); border-color: var(--dzkb-info-border); color: var(--dzkb-info-text); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--dzkb-focus-ring); border-radius: var(--dzkb-radius-sm); }
.ui-btn--primary { background: var(--dzkb-gradient-brand); border-color: var(--dzkb-brand-700); color: var(--dzkb-text-on-brand); }
.ui-btn--primary:hover { background: var(--dzkb-gradient-brand); border-color: var(--dzkb-brand-700); color: var(--dzkb-text-on-brand); filter: brightness(1.1); }
.ui-btn--success { background: var(--dzkb-success-soft); border-color: var(--dzkb-success-border); color: var(--dzkb-success-text); }
.ui-btn--success:hover { background: var(--dzkb-success-soft); border-color: var(--dzkb-success-text); color: var(--dzkb-success-text); }
.ui-btn--info { background: var(--dzkb-info-soft); border-color: var(--dzkb-info-border); color: var(--dzkb-info-text); }
.ui-btn--info:hover { border-color: var(--dzkb-info-text); }
.ui-btn--danger { background: var(--dzkb-danger-soft); border-color: var(--dzkb-danger-border); color: var(--dzkb-danger-text); }
.ui-btn--danger:hover { background: var(--dzkb-danger-soft); border-color: var(--dzkb-danger-text); color: var(--dzkb-danger-text); }
.ui-btn--sm { min-height: var(--dzkb-height-button-sm); padding: 3px 11px; font-size: .78rem; }
.ui-btn--lg { min-height: var(--dzkb-height-button-lg); padding: 6px 18px; font-size: var(--dzkb-text-md); }
.ui-btn--block { display: flex; width: 100%; }
/* gewählter Filter / aktiver Umschalter */
.ui-btn.is-active,
.ui-btn[aria-current="true"],
.ui-btn[aria-pressed="true"] { background: var(--dzkb-info-soft); border-color: var(--dzkb-border-active); color: var(--dzkb-info-text); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"],
.ui-icon-btn:disabled { opacity: .52; cursor: not-allowed; filter: none; }
/* Icon-Button: Zeilenaktionen in Tabellen und Listen */
.ui-icon-btn {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 32px;
height: 32px;
margin: 0;
padding: 0 7px;
border: 1px solid transparent;
border-radius: var(--dzkb-radius-xs);
background: transparent;
color: var(--dzkb-brand-600);
font: inherit;
font-size: .78rem;
font-weight: 700;
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: background var(--dzkb-duration) var(--dzkb-ease), color var(--dzkb-duration) var(--dzkb-ease);
}
.ui-icon-btn .ui-icon { width: 17px; height: 17px; }
.ui-icon-btn:hover { background: var(--dzkb-info-soft); color: var(--dzkb-brand-700); }
.ui-icon-btn:focus-visible { outline: none; box-shadow: var(--dzkb-focus-ring); }
.ui-icon-btn--danger { color: var(--dzkb-danger-text); }
.ui-icon-btn--danger:hover { background: var(--dzkb-danger-soft); color: var(--dzkb-danger-text); }
.ui-icon-btn--muted { color: var(--dzkb-text-muted); }
@media (pointer: coarse) { .ui-icon-btn { min-width: 40px; height: 40px; } }
/* Zweiter Klick nötig (data-ui-confirm): gleiche Optik für Button und Icon-Button */
.ui-btn.is-armed,
.ui-btn.is-armed:hover,
.ui-icon-btn.is-armed,
.ui-icon-btn.is-armed:hover {
background: var(--dzkb-danger-solid);
border-color: var(--dzkb-danger-solid);
color: var(--dzkb-text-on-brand);
filter: none;
}
.ui-icon-btn.is-armed { padding: 0 10px; }
/* Gruppe von Aktionen */
.ui-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ui-actions form { display: inline-flex; margin: 0; }
/* ================================================================ */
/* Tags / Status */
/* ================================================================ */
.ui-badge {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 5px;
max-width: 100%;
min-height: var(--dzkb-height-tag);
padding: 2px 9px;
border: 1px solid var(--dzkb-neutral-border);
border-radius: var(--dzkb-radius-xs);
background: var(--dzkb-neutral-soft);
color: var(--dzkb-neutral-text);
font-size: var(--dzkb-text-xs);
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
vertical-align: middle;
}
.ui-badge--success { background: var(--dzkb-success-soft); border-color: var(--dzkb-success-border); color: var(--dzkb-success-text); }
.ui-badge--warning { background: var(--dzkb-warning-soft); border-color: var(--dzkb-warning-border); color: var(--dzkb-warning-text); }
.ui-badge--danger { background: var(--dzkb-danger-soft); border-color: var(--dzkb-danger-border); color: var(--dzkb-danger-text); }
.ui-badge--info { background: var(--dzkb-info-soft); border-color: var(--dzkb-info-border); color: var(--dzkb-info-text); }
.ui-badge--special { background: var(--dzkb-special-soft); border-color: var(--dzkb-special-border); color: var(--dzkb-special-text); }
.ui-badge--teal { background: var(--dzkb-teal-soft); border-color: var(--dzkb-teal-border); color: var(--dzkb-teal-text); }
/* ================================================================ */
/* Karten und Kennzahlen */
/* ================================================================ */
/* Der Kasten für ALLE Apps: Innenabstand, Rahmen, Überschrift und Unterzeile stehen nur hier. */
.ui-card {
box-sizing: border-box;
min-width: 0;
padding: 24px;
background: var(--dzkb-surface);
border: 1px solid var(--dzkb-border);
border-radius: var(--dzkb-radius-lg);
box-shadow: var(--dzkb-shadow-sm);
}
.ui-card--panel { background: var(--dzkb-gradient-panel); }
.ui-card--special { background: var(--dzkb-gradient-lavender); border-color: var(--dzkb-special-border); }
.ui-card--danger { border-color: var(--dzkb-danger-border); }
.ui-card--danger .ui-card__title { color: var(--dzkb-danger-text); }
.ui-card__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--dzkb-space-2) var(--dzkb-space-4);
margin-bottom: var(--dzkb-space-4);
}
.ui-card__head > :first-child { min-width: 0; flex: 1 1 240px; }
.ui-card__head:last-child { margin-bottom: 0; }
.ui-card__title {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px var(--dzkb-space-2);
margin: 0;
color: var(--dzkb-text-strong);
font-size: 1.18rem;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
}
.ui-card__sub { margin: 5px 0 0; color: var(--dzkb-text-muted); font-size: .88rem; line-height: 1.5; }
.ui-card > .ui-card__title { margin-bottom: var(--dzkb-space-3); }
.ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: var(--dzkb-space-3); }
.ui-stat {
display: grid;
gap: 2px;
padding: 16px 18px;
background: var(--dzkb-surface);
border: 1px solid var(--dzkb-border);
border-radius: var(--dzkb-radius-lg);
box-shadow: var(--dzkb-shadow-sm);
}
.ui-stat__value { color: var(--dzkb-text-strong); font-size: var(--dzkb-text-2xl); font-weight: 800; line-height: 1.1; }
.ui-stat__label { color: var(--dzkb-text-muted); font-size: var(--dzkb-text-sm); }
.ui-stat--soft { background: var(--dzkb-surface-soft); box-shadow: none; padding: 12px 14px; }
.ui-stat--soft .ui-stat__value { font-size: var(--dzkb-text-xl); }
/* Beschriftete Werte: - …
- …
*/
.ui-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--dzkb-space-3) var(--dzkb-space-5); margin: 0; }
.ui-kv dt { color: var(--dzkb-text-muted); font-size: var(--dzkb-text-xs); font-weight: 700; }
.ui-kv dd { margin: 2px 0 0; color: var(--dzkb-text-strong); font-weight: 700; }
/* ================================================================ */
/* Hinweise */
/* ================================================================ */
.ui-notice {
padding: 12px 14px;
margin: 0 0 var(--dzkb-space-4);
border: 1px solid var(--dzkb-info-border);
border-radius: var(--dzkb-radius-md);
background: var(--dzkb-info-soft);
color: var(--dzkb-text-strong);
font-size: var(--dzkb-text-md);
line-height: 1.5;
}
.ui-notice--success { background: var(--dzkb-success-soft); border-color: var(--dzkb-success-border); }
.ui-notice--warning { background: var(--dzkb-warning-soft); border-color: var(--dzkb-warning-border); }
.ui-notice--danger { background: var(--dzkb-danger-soft); border-color: var(--dzkb-danger-border); }
.ui-notice--split { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--dzkb-space-2) var(--dzkb-space-4); }
.ui-toast {
position: fixed;
right: var(--dzkb-gutter);
bottom: 84px;
z-index: 60;
width: min(380px, calc(100vw - 2 * var(--dzkb-gutter)));
display: grid;
gap: 3px;
padding: 13px 15px;
background: var(--dzkb-surface);
border: 1px solid var(--dzkb-success-border);
border-radius: var(--dzkb-radius-lg);
box-shadow: var(--dzkb-shadow-md);
transition: opacity 250ms var(--dzkb-ease), transform 250ms var(--dzkb-ease);
}
.ui-toast b { color: var(--dzkb-success-text); }
.ui-toast span { color: var(--dzkb-text-muted); font-size: var(--dzkb-text-sm); }
.ui-toast.is-hiding { opacity: 0; transform: translateY(10px); pointer-events: none; }
/* ================================================================ */
/* Formulare */
/* ================================================================ */
.ui-form { display: grid; gap: var(--dzkb-space-4); }
.ui-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(max(240px, (100% - 16px) / 2), 1fr));
gap: 14px 16px;
}
.ui-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui-field--full { grid-column: 1 / -1; }
.ui-field > label,
.ui-label { color: var(--dzkb-text); font-size: var(--dzkb-text-sm); font-weight: 700; }
.ui-input,
.ui-field :where(input:not([type="checkbox"], [type="radio"], [type="hidden"]), select, textarea) {
width: 100%;
min-width: 0;
min-height: var(--dzkb-height-field);
margin: 0;
padding: 8px 12px;
border: 1px solid var(--dzkb-border-strong);
border-radius: var(--dzkb-radius-sm);
background: var(--dzkb-surface);
color: var(--dzkb-text-strong);
font: inherit;
line-height: 1.35;
transition: border-color var(--dzkb-duration) var(--dzkb-ease), box-shadow var(--dzkb-duration) var(--dzkb-ease);
}
.ui-field textarea, textarea.ui-input { min-height: 96px; resize: vertical; }
.ui-input:focus,
.ui-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea):focus { outline: none; border-color: var(--dzkb-border-active); box-shadow: var(--dzkb-focus-ring); }
.ui-input:disabled, .ui-input[readonly],
.ui-field :where(input:not([type="checkbox"], [type="radio"]), select, textarea):is(:disabled, [readonly]) { background: var(--dzkb-neutral-soft); color: var(--dzkb-neutral-text); opacity: 1; }
.ui-input::placeholder,
.ui-field :where(input, textarea)::placeholder { color: var(--dzkb-text-muted); opacity: .8; }
.ui-input--auto { width: auto; }
.ui-hint { color: var(--dzkb-text-muted); font-size: var(--dzkb-text-xs); }
.ui-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dzkb-space-2); }
.ui-check { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; }
.ui-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--dzkb-brand-600); }
.ui-checklist { display: grid; }
.ui-checklist > .ui-check { padding: 9px 0; border-top: 1px solid var(--dzkb-divider); }
.ui-searchbar { display: flex; flex-wrap: wrap; gap: var(--dzkb-space-2); }
.ui-searchbar .ui-input { flex: 1 1 220px; width: auto; }
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dzkb-space-2) var(--dzkb-space-4); margin-bottom: var(--dzkb-space-3); }
.ui-filters { display: flex; flex-wrap: wrap; gap: 6px; }
/* Auswahl-Kacheln (Radio als Fläche) */
.ui-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: var(--dzkb-space-2); }
.ui-choice { position: relative; display: block; min-width: 0; }
.ui-choice > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; clip-path: inset(50%); pointer-events: none; }
.ui-choice > span {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 44px;
height: 100%;
padding: 8px 10px;
border: 1px solid var(--dzkb-border-strong);
border-radius: var(--dzkb-radius-sm);
background: var(--dzkb-surface);
color: var(--dzkb-text);
font-size: var(--dzkb-text-sm);
font-weight: 700;
line-height: 1.15;
text-align: center;
cursor: pointer;
user-select: none;
transition: background var(--dzkb-duration) var(--dzkb-ease), border-color var(--dzkb-duration) var(--dzkb-ease), color var(--dzkb-duration) var(--dzkb-ease);
}
.ui-choice input:checked + span { background: var(--dzkb-info-soft); border-color: var(--dzkb-brand-600); color: var(--dzkb-info-text); box-shadow: inset 0 0 0 1px var(--dzkb-brand-600); }
.ui-choice--success input:checked + span { background: var(--dzkb-success-soft); border-color: var(--dzkb-success-solid); color: var(--dzkb-success-text); box-shadow: inset 0 0 0 1px var(--dzkb-success-solid); }
.ui-choice--warning input:checked + span { background: var(--dzkb-warning-soft); border-color: var(--dzkb-warning-solid); color: var(--dzkb-warning-text); box-shadow: inset 0 0 0 1px var(--dzkb-warning-solid); }
.ui-choice--danger input:checked + span { background: var(--dzkb-danger-soft); border-color: var(--dzkb-danger-solid); color: var(--dzkb-danger-text); box-shadow: inset 0 0 0 1px var(--dzkb-danger-solid); }
.ui-choice input:focus-visible + span { box-shadow: var(--dzkb-focus-ring); }
.ui-choice--sm > span { min-height: 40px; padding: 6px 4px; font-size: var(--dzkb-text-xs); }
.ui-choice input:disabled + span { cursor: default; }
.ui-choice input:disabled:not(:checked) + span { background: var(--dzkb-neutral-soft); color: var(--dzkb-text-muted); }
.ui-progress { height: 10px; border-radius: var(--dzkb-radius-pill); background: var(--dzkb-neutral-soft); overflow: hidden; }
.ui-progress__bar { width: 0; height: 100%; border-radius: inherit; background: var(--dzkb-gradient-accent); transition: width 200ms var(--dzkb-ease); }
/* ================================================================ */
/* Tabellen */
/* Breit: Tabelle. Passt sie nicht in die Breite, schaltet ui.js */
/* automatisch auf Karten um (is-stacked) – nie waagrecht scrollen. */
/* ================================================================ */
.ui-table-wrap {
min-width: 0;
overflow-x: auto; /* nur Rückfall ohne JavaScript */
background: var(--dzkb-surface);
border: 1px solid var(--dzkb-border);
border-radius: var(--dzkb-radius-md);
box-shadow: var(--dzkb-shadow-sm);
}
.ui-card .ui-table-wrap { box-shadow: none; }
.ui-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88rem; color: var(--dzkb-text-strong); }
.ui-table thead { background: var(--dzkb-gradient-info); }
.ui-table th {
padding: 11px 10px;
border-bottom: 1px solid var(--dzkb-border);
color: var(--dzkb-text-muted);
font-size: var(--dzkb-text-xs);
font-weight: 800;
letter-spacing: .025em;
text-align: left;
text-transform: uppercase;
vertical-align: middle;
white-space: nowrap;
}
.ui-table td { padding: 11px 10px; border-bottom: 1px solid var(--dzkb-divider); vertical-align: middle; }
.ui-table tbody tr { transition: background var(--dzkb-duration) var(--dzkb-ease); }
.ui-table tbody tr:hover { background: var(--dzkb-row-hover); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table tbody tr.is-selected { background: var(--dzkb-info-soft); }
.ui-table th a { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; }
.ui-table th a:hover { color: var(--dzkb-brand-600); }
/* eine Zeile, Rest abgeschnitten (voller Text im title) – nimmt den freien Platz der Tabelle */
.ui-table td.ui-table__clip { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-table .ui-table__sub { display: block; color: var(--dzkb-text-muted); font-size: var(--dzkb-text-sm); font-weight: 400; }
/* Aktionen: Spalte so breit wie ihre Buttons, Buttons in einer Zeile. Wird die Tabelle dadurch höher oder zu breit,
setzt ui.js "is-tight" (Buttons dürfen umbrechen); passt auch das nicht, wird sie zur Kartenliste (is-stacked). */
.ui-table td.ui-table__actions { width: 1%; text-align: right; white-space: nowrap; }
.ui-table:has(td.ui-table__actions) > thead th:last-child { text-align: right; }
.ui-table td.ui-table__actions .ui-actions { flex-wrap: nowrap; justify-content: flex-end; }
.ui-table td.ui-table__actions .ui-table__sub { white-space: normal; }
.is-tight > .ui-table td.ui-table__actions { width: auto; }
.is-tight > .ui-table td.ui-table__actions .ui-actions { flex-wrap: wrap; }
/* reine Icon-Gruppen bleiben nebeneinander, auch wenn die Spalte schmal wird */
.ui-table .ui-actions:not(:has(.ui-btn)) { flex-wrap: nowrap; }
.ui-table tr.ui-table__empty td { padding: 28px 14px; color: var(--dzkb-text-muted); text-align: center; }
.ui-table tr.ui-table__empty:hover { background: transparent; }
.ui-table tr.ui-table__detail > td { padding: var(--dzkb-space-4); background: var(--dzkb-surface-soft); }
.ui-table tr.ui-table__detail:hover { background: transparent; }
/* Kartenansicht: jede Zeile wird eine Karte, die Felder fließen je nach Breite in 1–5 Spalten */
.ui-table-wrap.is-stacked { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.is-stacked > .ui-table,
.is-stacked > .ui-table > tbody { display: block; width: 100%; }
.is-stacked > .ui-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.is-stacked > .ui-table > tbody { display: grid; gap: var(--dzkb-space-3); }
.is-stacked > .ui-table > tbody > tr {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
gap: 2px var(--dzkb-space-2);
padding: 6px 4px;
background: var(--dzkb-surface);
border: 1px solid var(--dzkb-border);
border-radius: var(--dzkb-radius-lg);
box-shadow: var(--dzkb-shadow-sm);
}
.is-stacked > .ui-table > tbody > tr:hover { background: var(--dzkb-surface); }
.is-stacked > .ui-table > tbody > tr > td { display: block; min-width: 0; padding: 7px 10px; border: 0; text-align: left; white-space: normal; }
.is-stacked > .ui-table > tbody > tr > td:empty { display: none; }
.is-stacked > .ui-table > tbody > tr > td.ui-table__clip { grid-column: 1 / -1; width: auto; max-width: none; overflow: visible; }
.is-stacked > .ui-table > tbody > tr.is-selected { background: var(--dzkb-info-soft); border-color: var(--dzkb-border-active); }
.is-stacked > .ui-table > tbody > tr > td[data-label]:not([data-label=""])::before {
content: attr(data-label);
display: block;
margin-bottom: 3px;
color: var(--dzkb-text-muted);
font-size: .68rem;
font-weight: 800;
letter-spacing: .03em;
line-height: 1.15;
text-transform: uppercase;
}
.is-stacked > .ui-table > tbody > tr > td.ui-table__actions { grid-column: 1 / -1; width: auto; margin-top: 4px; padding-top: 9px; border-top: 1px solid var(--dzkb-divider); }
.is-stacked > .ui-table > tbody > tr > td.ui-table__actions::before { content: none; }
.is-stacked > .ui-table > tbody > tr > td.ui-table__actions .ui-actions { flex-wrap: wrap; justify-content: flex-start; }
.is-stacked > .ui-table > tbody > tr.ui-table__empty { display: block; border-style: dashed; box-shadow: none; }
.is-stacked > .ui-table > tbody > tr.ui-table__detail { display: block; margin-top: -6px; padding: 0; }
.is-stacked > .ui-table > tbody > tr.ui-table__detail > td { padding: var(--dzkb-space-4); }
/* ================================================================ */
/* Fixierte Aktionsleiste und Betrachter-Fenster */
/* ================================================================ */
.ui-actionbar {
position: sticky;
bottom: 0;
z-index: 8;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--dzkb-space-2) var(--dzkb-space-4);
margin-top: var(--dzkb-space-4);
padding: 12px 16px;
background: var(--dzkb-surface-glass);
border: 1px solid var(--dzkb-border);
border-bottom: 0;
border-radius: var(--dzkb-radius-lg) var(--dzkb-radius-lg) 0 0;
box-shadow: var(--dzkb-shadow-up);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.ui-actionbar__hint { display: flex; align-items: center; gap: var(--dzkb-space-2); color: var(--dzkb-text-muted); font-size: var(--dzkb-text-sm); }
.ui-actionbar__actions { display: flex; flex-wrap: wrap; gap: var(--dzkb-space-2); }
.ui-dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--dzkb-neutral-border); }
.ui-dot--warning { background: var(--dzkb-warning-solid); box-shadow: 0 0 0 4px var(--dzkb-warning-soft); }
/* Fenster für Formulare und Inhalte (z. B. Frage bearbeiten, PDF ansehen).
Nie für Sicherheitsabfragen – dafür gibt es data-ui-confirm.
Öffnen: