/* Sharpflix Komponentenschicht v1.0 auf Material 3 (2026-09-03)
Reines CSS auf den M3-Tokens (--md-sys-*). Läuft in React-Apps genauso wie in Vanilla-HTML.
Präfix sfx-, Varianten mit --, Teile mit __, Zustände mit is-. Icons: Material Symbols Rounded.
Verhalten (Ripple, Tooltip, Snackbar, Drawer) liefert sfx.js; in React entsprechend Radix/Material Web.
Regelwerk: DESIGN-RULES.md Abschnitt 3. */
/* ---------- Basis und Typografie ---------- */
html { font-family: var(--md-ref-typeface-plain); -webkit-font-smoothing: antialiased; }
body { margin: 0; background: var(--md-sys-color-surface); color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-tracking-body-medium); }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { font-weight: inherit; }
a { color: var(--md-sys-color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
.md-display-large { font: var(--md-sys-typescale-display-large); letter-spacing: var(--md-sys-typescale-tracking-display-large); }
.md-display-medium { font: var(--md-sys-typescale-display-medium); letter-spacing: 0; }
.md-display-small { font: var(--md-sys-typescale-display-small); letter-spacing: 0; }
.md-headline-large { font: var(--md-sys-typescale-headline-large); letter-spacing: 0; }
.md-headline-medium { font: var(--md-sys-typescale-headline-medium); letter-spacing: 0; }
.md-headline-small { font: var(--md-sys-typescale-headline-small); letter-spacing: 0; }
.md-title-large { font: var(--md-sys-typescale-title-large); letter-spacing: 0; }
.md-title-medium { font: var(--md-sys-typescale-title-medium); letter-spacing: var(--md-sys-typescale-tracking-title-medium); }
.md-title-small { font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-tracking-title-small); }
.md-body-large { font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-tracking-body-large); }
.md-body-medium { font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-tracking-body-medium); }
.md-body-small { font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-tracking-body-small); }
.md-label-large { font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); }
.md-label-medium { font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-tracking-label-medium); }
.md-label-small { font: var(--md-sys-typescale-label-small); letter-spacing: var(--md-sys-typescale-tracking-label-small); }
.sfx-muted, .md-on-surface-variant { color: var(--md-sys-color-on-surface-variant); }
.sfx-faint { color: var(--md-sys-color-outline); }
.sfx-small { font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-tracking-body-small); }
.sfx-num { font-variant-numeric: tabular-nums; }
.sfx-mono { font-family: var(--md-ref-typeface-mono); font-size: 13px; }
.sfx-section-title { font: var(--md-sys-typescale-title-large); }
/* Seitenwechsel: View Transitions (Chrome, Safari), reduziert bei prefers-reduced-motion */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sfx-vt-out var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized-accelerate) both; }
::view-transition-new(root) { animation: sfx-vt-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both; }
@keyframes sfx-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes sfx-vt-in { from { opacity: 0; transform: translateY(12px); } }
/* ---------- Icons: Material Symbols Rounded ---------- */
.sfx-icon, .material-symbols-rounded {
font-family: "Material Symbols Rounded"; font-weight: 400; font-style: normal; font-size: 20px; line-height: 1;
letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr;
font-feature-settings: "liga"; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
display: inline-block; width: 1em; height: 1em; overflow: hidden; flex: none; vertical-align: middle; user-select: none;
}
.sfx-icon--xs { font-size: 16px; }
.sfx-icon--sm { font-size: 18px; }
.sfx-icon--md { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-icon--lg { font-size: 40px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 40; }
.sfx-icon--xl { font-size: 48px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 48; }
.sfx-icon.is-filled, .sfx-icon--fill { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
/* ---------- Layout-Helfer ---------- */
.sfx-stack { display: flex; flex-direction: column; gap: 16px; }
.sfx-stack--sm { gap: 8px; }
.sfx-stack--lg { gap: 24px; }
.sfx-row { display: flex; align-items: center; gap: 8px; }
.sfx-row--between { justify-content: space-between; }
.sfx-row--wrap { flex-wrap: wrap; }
.sfx-grow { flex: 1 1 auto; min-width: 0; }
.sfx-grid { display: grid; gap: 16px; }
.sfx-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sfx-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sfx-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .sfx-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sfx-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sfx-grid--2, .sfx-grid--3, .sfx-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* ---------- State Layer, Ripple, Fokus (M3 Interaction States) ---------- */
.sfx-btn, .sfx-fab, .sfx-chip, .sfx-menu__item, .sfx-tab, .sfx-segment__item, .sfx-dropdown__item, .sfx-page,
.sfx-list__item.is-link, .sfx-navbar__item, .sfx-sidebar__account, .sfx-card--selectable, .sfx-stat.is-clickable, .sfx-collapse summary {
position: relative; isolation: isolate; overflow: hidden;
}
.sfx-btn::before, .sfx-fab::before, .sfx-chip::before, .sfx-menu__item::before, .sfx-tab::before, .sfx-segment__item::before,
.sfx-dropdown__item::before, .sfx-page::before, .sfx-list__item.is-link::before, .sfx-navbar__item::before, .sfx-sidebar__account::before,
.sfx-card--selectable::before, .sfx-stat.is-clickable::before, .sfx-collapse summary::before {
content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; pointer-events: none; border-radius: inherit; z-index: 0;
transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-btn:hover::before, .sfx-fab:hover::before, .sfx-chip:hover::before, .sfx-menu__item:hover::before, .sfx-tab:hover::before, .sfx-segment__item:hover::before,
.sfx-dropdown__item:hover::before, .sfx-page:hover::before, .sfx-list__item.is-link:hover::before, .sfx-navbar__item:hover::before, .sfx-sidebar__account:hover::before,
.sfx-card--selectable:hover::before, .sfx-stat.is-clickable:hover::before, .sfx-collapse summary:hover::before { opacity: var(--md-sys-state-hover-opacity); }
.sfx-btn:focus-visible::before, .sfx-chip:focus-visible::before, .sfx-menu__item:focus-visible::before, .sfx-tab:focus-visible::before, .sfx-dropdown__item:focus-visible::before { opacity: var(--md-sys-state-focus-opacity); }
.sfx-btn:active::before, .sfx-fab:active::before, .sfx-chip:active::before, .sfx-menu__item:active::before, .sfx-tab:active::before, .sfx-segment__item:active::before,
.sfx-dropdown__item:active::before, .sfx-page:active::before, .sfx-navbar__item:active::before { opacity: var(--md-sys-state-pressed-opacity); }
.sfx-btn > *, .sfx-fab > *, .sfx-chip > *, .sfx-menu__item > *, .sfx-tab > *, .sfx-segment__item > *, .sfx-dropdown__item > *, .sfx-navbar__item > * { position: relative; z-index: 1; }
.sfx-ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: var(--md-sys-state-pressed-opacity); transform: scale(0); pointer-events: none; z-index: 0; animation: sfx-ripple var(--md-sys-motion-duration-long2) var(--md-sys-motion-easing-standard-decelerate) forwards; }
@keyframes sfx-ripple { to { transform: scale(1); opacity: 0; } }
:where(.sfx-btn, .sfx-fab, .sfx-chip, .sfx-menu__item, .sfx-tab, .sfx-segment__item, .sfx-page, .sfx-navbar__item, .sfx-check input, .sfx-textfield__input, .sfx-input, .sfx-select, .sfx-textarea, .sfx-collapse summary, .sfx-card--selectable, .sfx-stat.is-clickable, .sfx-list__item.is-link, .sfx-sidebar__account, .sfx-focus-ring):focus-visible {
outline: 3px solid var(--md-sys-color-secondary); outline-offset: 2px;
}
/* ---------- Buttons (M3 Common Buttons, 40dp, Pill; Expressive: Form wandelt beim Drücken) ---------- */
.sfx-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 40px; padding: 0 24px; border: 1px solid transparent; border-radius: var(--md-sys-shape-corner-full);
background: transparent; color: var(--md-sys-color-primary);
font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large);
cursor: pointer; user-select: none; text-decoration: none; white-space: nowrap; vertical-align: middle;
transition: border-radius var(--md-sys-motion-spring-spatial-fast-duration) var(--md-sys-motion-spring-spatial-fast),
box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard),
background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-btn:hover { text-decoration: none; }
.sfx-btn:active { border-radius: var(--md-sys-shape-corner-medium); }
.sfx-btn:has(> .sfx-icon:first-child) { padding-left: 16px; }
.sfx-btn:has(> .sfx-icon:last-child:not(:only-child)) { padding-right: 16px; }
.sfx-btn .sfx-icon { font-size: 18px; }
.sfx-btn:disabled, .sfx-btn[aria-disabled="true"] { color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent); background: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); border-color: transparent; box-shadow: none; cursor: not-allowed; pointer-events: none; }
.sfx-btn--ghost:disabled, .sfx-btn--outlined:disabled { background: transparent; }
.sfx-btn--outlined:disabled { border-color: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent); }
.sfx-btn--primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.sfx-btn--primary:hover { box-shadow: var(--md-sys-elevation-level1); }
.sfx-btn--secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-btn--secondary:hover { box-shadow: var(--md-sys-elevation-level1); }
.sfx-btn--tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.sfx-btn--outlined { border-color: var(--md-sys-color-outline); color: var(--md-sys-color-primary); }
.sfx-btn--ghost { padding: 0 12px; color: var(--md-sys-color-primary); }
.sfx-btn--ghost:has(> .sfx-icon:first-child) { padding-left: 12px; padding-right: 16px; }
.sfx-btn--elevated { background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary); box-shadow: var(--md-sys-elevation-level1); }
.sfx-btn--elevated:hover { box-shadow: var(--md-sys-elevation-level2); }
.sfx-btn--danger { background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); }
.sfx-btn--danger-soft { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.sfx-btn--link { height: auto; padding: 0; border-radius: 0; overflow: visible; isolation: auto; }
.sfx-btn--link::before { display: none; }
.sfx-btn--link:hover { text-decoration: underline; }
.sfx-btn--sm { height: 32px; padding: 0 16px; }
.sfx-btn--sm:has(> .sfx-icon:first-child) { padding-left: 12px; }
.sfx-btn--lg { height: 56px; padding: 0 32px; font: var(--md-sys-typescale-title-medium); border-radius: var(--md-sys-shape-corner-full); }
.sfx-btn--lg .sfx-icon { font-size: 24px; }
.sfx-btn--icon { width: 40px; padding: 0; color: var(--md-sys-color-on-surface-variant); }
.sfx-btn--icon:has(> .sfx-icon:first-child) { padding: 0; }
.sfx-btn--icon .sfx-icon { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-btn--icon.sfx-btn--primary { color: var(--md-sys-color-on-primary); }
.sfx-btn--icon.sfx-btn--secondary { color: var(--md-sys-color-on-secondary-container); }
.sfx-btn--icon.sfx-btn--outlined { color: var(--md-sys-color-on-surface-variant); }
.sfx-btn--icon.sfx-btn--sm { width: 32px; }
.sfx-btn--icon.sfx-btn--sm .sfx-icon { font-size: 20px; }
.sfx-btn--icon.sfx-btn--lg { width: 56px; padding: 0; }
.sfx-btn--icon.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-btn--icon.is-active .sfx-icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-btn--block { width: 100%; }
.sfx-btn.is-active:not(.sfx-btn--icon) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-btn.is-loading { pointer-events: none; }
.sfx-btn.is-loading > .sfx-icon:first-child { display: none; }
.sfx-btn.is-loading::after { content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: sfx-spin 1s linear infinite; order: -1; }
.sfx-btn-group { display: inline-flex; gap: 2px; }
.sfx-btn-group .sfx-btn { border-radius: var(--md-sys-shape-corner-small); }
.sfx-btn-group .sfx-btn:first-child { border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-full); }
.sfx-btn-group .sfx-btn:last-child { border-radius: var(--md-sys-shape-corner-small) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-small); }
.sfx-btn-group .sfx-btn:active { border-radius: var(--md-sys-shape-corner-full); }
/* ---------- FAB ---------- */
.sfx-fab {
display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; min-width: 56px; padding: 0 16px;
border: 0; border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);
box-shadow: var(--md-sys-elevation-level3); font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large);
cursor: pointer; text-decoration: none; white-space: nowrap;
transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), border-radius var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default), transform var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default);
}
.sfx-fab:hover { box-shadow: var(--md-sys-elevation-level4); text-decoration: none; }
.sfx-fab:active { border-radius: var(--md-sys-shape-corner-extra-large); transform: scale(0.97); }
.sfx-fab .sfx-icon { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-fab--small { height: 40px; min-width: 40px; padding: 0 8px; border-radius: var(--md-sys-shape-corner-medium); }
.sfx-fab--large { height: 96px; min-width: 96px; padding: 0 24px; border-radius: var(--md-sys-shape-corner-extra-large); }
.sfx-fab--large .sfx-icon { font-size: 36px; }
.sfx-fab--primary { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.sfx-fab--secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-fab--tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.sfx-fab--surface { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-primary); }
.sfx-fab--lowered { box-shadow: var(--md-sys-elevation-level1); }
.sfx-fab--lowered:hover { box-shadow: var(--md-sys-elevation-level2); }
.sfx-fab--extended { padding: 0 20px 0 16px; }
.sfx-fab--fixed { position: fixed; right: 16px; bottom: 16px; z-index: var(--sfx-z-drawer); }
/* ---------- Chips (M3 Assist, Filter, Input) ---------- */
.sfx-chip {
display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
border: 1px solid var(--md-sys-color-outline-variant); border-radius: var(--md-sys-shape-corner-small);
background: transparent; color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large);
cursor: pointer; white-space: nowrap; text-decoration: none;
transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-radius var(--md-sys-motion-spring-spatial-fast-duration) var(--md-sys-motion-spring-spatial-fast);
}
.sfx-chip:hover { text-decoration: none; }
.sfx-chip:has(> .sfx-icon:first-child) { padding-left: 8px; }
.sfx-chip .sfx-icon { font-size: 18px; color: var(--md-sys-color-primary); }
.sfx-chip.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; padding-left: 8px; }
.sfx-chip.is-active .sfx-icon { color: inherit; }
.sfx-chip.is-active:not(:has(> .sfx-icon:first-child))::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 18px; line-height: 1; order: -1; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20; }
.sfx-chip--elevated { border-color: transparent; background: var(--md-sys-color-surface-container-low); box-shadow: var(--md-sys-elevation-level1); }
.sfx-chip--input { padding-right: 8px; }
.sfx-chip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 0; padding: 0; margin-right: -4px; background: none; color: inherit; cursor: pointer; }
.sfx-chip__x .sfx-icon { font-size: 18px; color: inherit; }
.sfx-chip__x:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
/* ---------- Textfelder (M3 Filled und Outlined mit schwebendem Label) ---------- */
.sfx-textfield {
--_bg: var(--md-sys-color-surface); --_c: var(--md-sys-color-primary);
position: relative; display: flex; align-items: center; min-height: 56px; width: 100%;
background: var(--md-sys-color-surface-container-highest); border-radius: var(--md-sys-shape-corner-extra-small) var(--md-sys-shape-corner-extra-small) 0 0;
box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant); color: var(--md-sys-color-on-surface);
transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard), background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-textfield:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-highest)); box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface); }
.sfx-textfield:focus-within { box-shadow: inset 0 -2px 0 var(--_c); }
.sfx-textfield__input {
flex: 1 1 auto; min-width: 0; width: 100%; height: 56px; padding: 24px 16px 8px; margin: 0;
background: transparent; border: 0; outline: 0; color: inherit; font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-tracking-body-large); caret-color: var(--_c);
}
.sfx-textfield__input::placeholder { color: transparent; }
.sfx-textfield:focus-within .sfx-textfield__input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.sfx-textfield__label {
position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-tracking-body-large);
transition: top var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), font-size var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2);
}
.sfx-textfield:focus-within .sfx-textfield__label, .sfx-textfield__input:not(:placeholder-shown) ~ .sfx-textfield__label, .sfx-textfield.is-floated .sfx-textfield__label { top: 8px; transform: none; font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-tracking-body-small); }
.sfx-textfield:focus-within .sfx-textfield__label { color: var(--_c); }
.sfx-textfield__leading { display: inline-flex; margin-left: 12px; color: var(--md-sys-color-on-surface-variant); }
.sfx-textfield__leading .sfx-icon { font-size: 24px; }
.sfx-textfield__leading ~ .sfx-textfield__input { padding-left: 16px; }
.sfx-textfield:has(.sfx-textfield__leading) .sfx-textfield__label { left: 52px; }
.sfx-textfield__trailing { display: inline-flex; align-items: center; margin-right: 12px; color: var(--md-sys-color-on-surface-variant); gap: 4px; }
.sfx-textfield__trailing .sfx-btn--icon { margin-right: -8px; }
.sfx-textfield__prefix, .sfx-textfield__suffix { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-large); padding-top: 16px; }
.sfx-textfield__prefix { padding-left: 16px; }
.sfx-textfield__prefix ~ .sfx-textfield__input { padding-left: 4px; }
.sfx-textfield__suffix { padding-right: 16px; }
.sfx-textfield__supporting { position: absolute; left: 16px; right: 16px; top: 100%; margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-tracking-body-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfx-textfield:has(.sfx-textfield__supporting) { margin-bottom: 20px; }
/* Zweizeiliger Hilfetext: Modifier statt Messen */
.sfx-textfield--supporting-2:has(.sfx-textfield__supporting) { margin-bottom: 36px; }
.sfx-textfield--supporting-2 .sfx-textfield__supporting { white-space: normal; overflow: visible; display: block; }
.sfx-textfield--outlined { background: transparent; border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); }
.sfx-textfield--outlined:hover { background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.sfx-textfield--outlined:focus-within { box-shadow: inset 0 0 0 2px var(--_c); }
.sfx-textfield--outlined .sfx-textfield__input { padding: 16px; }
.sfx-textfield--outlined .sfx-textfield__prefix ~ .sfx-textfield__input { padding-left: 4px; }
.sfx-textfield--outlined .sfx-textfield__prefix, .sfx-textfield--outlined .sfx-textfield__suffix { padding-top: 0; }
.sfx-textfield--outlined:focus-within .sfx-textfield__label, .sfx-textfield--outlined .sfx-textfield__input:not(:placeholder-shown) ~ .sfx-textfield__label, .sfx-textfield--outlined.is-floated .sfx-textfield__label { top: 0; left: 12px; transform: translateY(-50%); padding: 0 4px; background: var(--_bg); }
.sfx-textfield--outlined:has(.sfx-textfield__leading) .sfx-textfield__input:not(:placeholder-shown) ~ .sfx-textfield__label, .sfx-textfield--outlined:has(.sfx-textfield__leading):focus-within .sfx-textfield__label { left: 12px; }
.sfx-textfield--textarea { align-items: flex-start; }
.sfx-textfield--textarea .sfx-textfield__input { height: auto; min-height: 112px; resize: vertical; padding-top: 24px; line-height: 24px; }
.sfx-textfield--outlined.sfx-textfield--textarea .sfx-textfield__input { padding-top: 16px; }
.sfx-textfield--textarea .sfx-textfield__label { top: 16px; transform: none; }
.sfx-textfield.is-invalid { --_c: var(--md-sys-color-error); box-shadow: inset 0 -1px 0 var(--md-sys-color-error); }
.sfx-textfield--outlined.is-invalid { box-shadow: inset 0 0 0 1px var(--md-sys-color-error); }
.sfx-textfield.is-invalid .sfx-textfield__label, .sfx-textfield.is-invalid .sfx-textfield__supporting, .sfx-textfield.is-invalid .sfx-textfield__trailing { color: var(--md-sys-color-error); }
.sfx-textfield.is-disabled, .sfx-textfield:has(.sfx-textfield__input:disabled) { opacity: 0.38; pointer-events: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 4%, transparent); box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface); }
.sfx-textfield--sm { min-height: 40px; }
.sfx-textfield--sm .sfx-textfield__input { height: 40px; padding: 8px 16px; }
.sfx-textfield--sm .sfx-textfield__input:is(select) { padding-right: 44px; }
.sfx-textfield.sfx-textfield--sm .sfx-textfield__label { display: none; }
.sfx-textfield--sm .sfx-textfield__input::placeholder { color: var(--md-sys-color-on-surface-variant); }
.sfx-card .sfx-textfield, .sfx-dialog__body .sfx-textfield { --_bg: var(--md-sys-color-surface-container-low); }
.sfx-dialog__body .sfx-textfield { --_bg: var(--md-sys-color-surface-container-high); }
/* Select als Exposed Dropdown */
.sfx-textfield__input:is(select) { appearance: none; cursor: pointer; padding-right: 44px; }
.sfx-textfield:has(select) .sfx-textfield__trailing { position: absolute; right: 0; pointer-events: none; }
.sfx-textfield:has(select)::after { content: "arrow_drop_down"; font-family: "Material Symbols Rounded"; font-size: 24px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--md-sys-color-on-surface-variant); pointer-events: none; }
.sfx-textfield:has(select) .sfx-textfield__label { top: 8px; transform: none; font: var(--md-sys-typescale-body-small); }
.sfx-textfield--outlined:has(select) .sfx-textfield__label { top: 0; transform: translateY(-50%); left: 12px; padding: 0 4px; background: var(--_bg); }
/* Kompatibilität: Label über dem Feld (sfx-field), Felder als Outlined-Textfelder */
.sfx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sfx-label { font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; gap: 4px; }
.sfx-label .req { color: var(--md-sys-color-error); }
.sfx-help { font: var(--md-sys-typescale-body-small); letter-spacing: var(--md-sys-typescale-tracking-body-small); color: var(--md-sys-color-on-surface-variant); padding: 0 16px; }
.sfx-error { font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-error); display: flex; align-items: center; gap: 4px; padding: 0 16px; }
.sfx-input, .sfx-select, .sfx-textarea {
width: 100%; height: 48px; padding: 0 16px; margin: 0;
background: transparent; border: 0; border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline);
color: var(--md-sys-color-on-surface); font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-tracking-body-large); caret-color: var(--md-sys-color-primary);
transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}
.sfx-input::placeholder, .sfx-textarea::placeholder { color: var(--md-sys-color-on-surface-variant); }
.sfx-input:hover, .sfx-select:hover, .sfx-textarea:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.sfx-input:focus, .sfx-select:focus, .sfx-textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.sfx-input:disabled, .sfx-select:disabled, .sfx-textarea:disabled { opacity: 0.38; cursor: not-allowed; }
.sfx-input:read-only:not(:disabled) { background: var(--md-sys-color-surface-container); }
.sfx-input.is-invalid, .sfx-select.is-invalid, .sfx-textarea.is-invalid, .sfx-input-group.is-invalid { box-shadow: inset 0 0 0 1px var(--md-sys-color-error); }
.sfx-input--sm, .sfx-select--sm { height: 40px; }
.sfx-input--lg, .sfx-select--lg { height: 56px; }
.sfx-textarea { height: auto; min-height: 112px; padding: 12px 16px; resize: vertical; line-height: 24px; }
.sfx-select { appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 12px center; }
.sfx-input-group { display: flex; align-items: center; width: 100%; height: 48px; border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: inset 0 0 0 1px var(--md-sys-color-outline); transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard); }
.sfx-input-group:hover { box-shadow: inset 0 0 0 1px var(--md-sys-color-on-surface); }
.sfx-input-group:focus-within { box-shadow: inset 0 0 0 2px var(--md-sys-color-primary); }
.sfx-input-group .sfx-input { box-shadow: none; background: transparent; height: 100%; flex: 1 1 auto; min-width: 0; padding: 0 12px; }
.sfx-input-group .sfx-input:focus { box-shadow: none; }
.sfx-input-group__affix { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); white-space: nowrap; flex: none; }
.sfx-input-group__affix .sfx-icon { font-size: 24px; }
.sfx-input-group__affix + .sfx-input { padding-left: 0; }
.sfx-input-group--sm { height: 40px; }
.sfx-input-group:has(.sfx-input:read-only:not(:disabled)) { background: var(--md-sys-color-surface-container); }
/* Suchleiste (M3 Search Bar: 56dp, Pill, surface-container-high) */
.sfx-search, .sfx-input-group--search { height: 56px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-high); box-shadow: none; padding: 0 4px; }
.sfx-search:hover, .sfx-input-group--search:hover { box-shadow: none; background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, var(--md-sys-color-surface-container-high)); }
.sfx-search:focus-within, .sfx-input-group--search:focus-within { box-shadow: none; }
.sfx-search .sfx-input, .sfx-input-group--search .sfx-input { font: var(--md-sys-typescale-body-large); }
.sfx-input-group--search.sfx-input-group--sm { height: 48px; }
/* Checkbox 18dp, Radio 20dp, Switch 52x32 (M3) */
.sfx-check { display: inline-flex; align-items: center; gap: 12px; font: var(--md-sys-typescale-body-large); letter-spacing: var(--md-sys-typescale-tracking-body-large); cursor: pointer; line-height: 1.3; position: relative; }
.sfx-check input {
appearance: none; margin: 0; flex: none; width: 18px; height: 18px; cursor: pointer; position: relative;
border: 2px solid var(--md-sys-color-on-surface-variant); border-radius: 2px; background: transparent;
display: grid; place-content: center; transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-check input:hover { box-shadow: 0 0 0 11px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.sfx-check input:active { box-shadow: 0 0 0 11px color-mix(in srgb, var(--md-sys-color-primary) 10%, transparent); }
.sfx-check input:checked, .sfx-check input:indeterminate { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.sfx-check input:checked::before { content: ""; width: 14px; height: 14px; background: var(--md-sys-color-on-primary); mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; }
.sfx-check input:indeterminate::before { content: ""; width: 10px; height: 2px; background: var(--md-sys-color-on-primary); border-radius: 1px; }
.sfx-check input[type="radio"] { width: 20px; height: 20px; border-radius: 50%; }
.sfx-check input[type="radio"]:checked { background: transparent; border-color: var(--md-sys-color-primary); }
.sfx-check input[type="radio"]:checked::before { mask: none; width: 10px; height: 10px; border-radius: 50%; background: var(--md-sys-color-primary); }
.sfx-check input:disabled { opacity: 0.38; cursor: not-allowed; box-shadow: none; }
.sfx-check--lg input { width: 20px; height: 20px; }
.sfx-check__text { display: flex; flex-direction: column; gap: 2px; }
.sfx-check__desc { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); }
.sfx-toggle input { width: 52px; height: 32px; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-surface-container-highest); border: 2px solid var(--md-sys-color-outline); display: block; }
.sfx-toggle input:hover { box-shadow: none; }
.sfx-toggle input::before { content: ""; position: absolute; top: 50%; left: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--md-sys-color-outline); transform: translateY(-50%); mask: none; transition: transform var(--md-sys-motion-spring-spatial-fast-duration) var(--md-sys-motion-spring-spatial-fast), width var(--md-sys-motion-duration-short2), height var(--md-sys-motion-duration-short2), left var(--md-sys-motion-duration-short2), background-color var(--md-sys-motion-duration-short2); }
.sfx-toggle input:hover::before { box-shadow: 0 0 0 8px color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.sfx-toggle input:checked { background: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }
.sfx-toggle input:checked::before { left: 4px; width: 24px; height: 24px; background: var(--md-sys-color-on-primary); transform: translate(20px, -50%); mask: none; }
.sfx-toggle input:checked::after { content: ""; position: absolute; top: 50%; left: 4px; width: 24px; height: 24px; transform: translate(20px, -50%); background: var(--md-sys-color-on-primary-container); mask: url("data:image/svg+xml;utf8,") center / 16px no-repeat; }
.sfx-toggle input:disabled { opacity: 0.38; }
.sfx-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sfx-legend { font: var(--md-sys-typescale-title-medium); letter-spacing: var(--md-sys-typescale-tracking-title-medium); padding: 0; margin-bottom: 4px; }
.sfx-legend + .sfx-help { margin-top: -8px; padding: 0; }
.sfx-form { display: flex; flex-direction: column; gap: 24px; max-width: 640px; }
.sfx-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 599px) { .sfx-form__row { grid-template-columns: minmax(0, 1fr); } }
.sfx-form__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.sfx-form__actions .sfx-form__secondary { margin-right: auto; }
@media (max-width: 839px) { .sfx-form__actions { position: sticky; bottom: 0; background: var(--md-sys-color-surface); padding: 12px 0; z-index: 2; } .sfx-card .sfx-form__actions { background: var(--md-sys-color-surface-container-low); } }
.sfx-dropzone {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 32px 24px;
border: 1px dashed var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-on-surface-variant); cursor: pointer;
transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), border-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-dropzone:hover, .sfx-dropzone.is-dragover { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.sfx-dropzone .sfx-icon--lg { font-size: 40px; margin-bottom: 4px; color: var(--md-sys-color-primary); }
.sfx-dropzone__title { font: var(--md-sys-typescale-title-medium); color: var(--md-sys-color-on-surface); }
.sfx-dropzone__hint { font: var(--md-sys-typescale-body-small); }
/* ---------- Cards (M3 Elevated Standard, Filled, Outlined) ---------- */
.sfx-card {
background: var(--sfx-surface-card); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-level1); border: 1px solid transparent; min-width: 0; color: var(--md-sys-color-on-surface);
transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard), transform var(--md-sys-motion-spring-spatial-default-duration) var(--md-sys-motion-spring-spatial-default);
}
.sfx-card--filled { background: var(--md-sys-color-surface-container-highest); box-shadow: none; }
.sfx-card--outlined { background: var(--md-sys-color-surface); box-shadow: none; border-color: var(--md-sys-color-outline-variant); }
.sfx-card--tonal { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: none; }
.sfx-card--secondary { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); box-shadow: none; }
/* Buttons auf tonalen Flächen (Regel 3.1.10): Text und Rahmen in der Inhaltsfarbe, Primary hätte keinen Kontrast */
.sfx-card--tonal .sfx-btn--outlined, .sfx-card--secondary .sfx-btn--outlined, .sfx-stat--tonal .sfx-btn--outlined { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); }
.sfx-card--tonal .sfx-btn--ghost, .sfx-card--secondary .sfx-btn--ghost, .sfx-stat--tonal .sfx-btn--ghost, .sfx-card--tonal .sfx-btn--link, .sfx-card--secondary .sfx-btn--link { color: inherit; }
.sfx-card--danger { background: var(--md-sys-color-surface); box-shadow: none; border-color: var(--md-sys-color-error); }
.sfx-card--danger .sfx-card__title { color: var(--md-sys-color-error); }
.sfx-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; padding: 16px 16px 0; }
.sfx-card__header + .sfx-card__body { padding-top: 12px; }
.sfx-card__header:last-child { padding-bottom: 16px; }
.sfx-card__title { font: var(--md-sys-typescale-title-medium); letter-spacing: var(--md-sys-typescale-tracking-title-medium); display: flex; align-items: center; gap: 8px; }
.sfx-card__title--large { font: var(--md-sys-typescale-title-large); letter-spacing: 0; }
.sfx-card__desc { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 2px; }
.sfx-card__actions { display: flex; gap: 8px; flex: none; max-width: 100%; overflow-x: auto; }
.sfx-card__body { padding: 16px; }
.sfx-card__body--flush { padding: 0; }
.sfx-card__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; padding: 8px 16px 16px; }
.sfx-card__footer--between { justify-content: space-between; }
.sfx-card--dense .sfx-card__header { padding: 12px 12px 0; }
.sfx-card--dense .sfx-card__body { padding: 12px; }
.sfx-card--dense .sfx-card__footer { padding: 4px 12px 12px; }
.sfx-card--selectable { cursor: pointer; }
.sfx-card--selectable:hover { box-shadow: var(--md-sys-elevation-level2); }
.sfx-card--selectable.is-selected, .sfx-card--selectable:has(input:checked) { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); border-color: transparent; }
.sfx-card--selectable.is-selected .sfx-card__desc, .sfx-card--selectable:has(input:checked) .sfx-card__desc { color: inherit; opacity: 0.85; }
.sfx-card.is-interactive:hover { box-shadow: var(--md-sys-elevation-level2); }
/* ---------- Tabelle (M3 Data Table) ---------- */
.sfx-table-wrap { overflow-x: auto; background: var(--sfx-surface-card); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-level1); min-width: 0; }
.sfx-table-wrap--flat { background: transparent; box-shadow: none; border-radius: 0; }
.sfx-table { width: 100%; border-collapse: separate; border-spacing: 0; font: var(--md-sys-typescale-body-medium); letter-spacing: var(--md-sys-typescale-tracking-body-medium); }
.sfx-table th { position: sticky; top: 0; z-index: 1; height: 56px; padding: 0 16px; background: inherit; border-bottom: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant); text-align: left; white-space: nowrap; }
.sfx-table-wrap .sfx-table th { background: var(--sfx-surface-card); }
.sfx-table td { height: 52px; padding: 0 16px; border-bottom: 1px solid var(--md-sys-color-outline-variant); vertical-align: middle; color: var(--md-sys-color-on-surface); }
.sfx-table tbody tr:last-child td { border-bottom: 0; }
.sfx-table tbody tr { transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard); }
.sfx-table tbody tr:hover td { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.sfx-table tbody tr.is-selected td { background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent); }
.sfx-table tr.is-clickable { cursor: pointer; }
.sfx-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfx-table td > strong, .sfx-table td .sfx-row > div > strong, .sfx-table td .sfx-row > div > :first-child { white-space: nowrap; font-weight: 500; }
.sfx-table .wrap { white-space: normal; padding-top: 8px; padding-bottom: 8px; vertical-align: top; }
.sfx-table .actions { text-align: right; width: 1%; white-space: nowrap; }
.sfx-table .check { width: 1%; padding-right: 0; }
.sfx-table .muted { color: var(--md-sys-color-on-surface-variant); }
.sfx-table .id { font-family: var(--md-ref-typeface-mono); font-size: 13px; color: var(--md-sys-color-on-surface-variant); }
.sfx-table th.sortable { cursor: pointer; user-select: none; }
.sfx-table th.sortable:hover { color: var(--md-sys-color-on-surface); }
.sfx-table th .sort { display: inline-flex; align-items: center; gap: 4px; }
.sfx-table th[aria-sort] .sort { color: var(--md-sys-color-on-surface); }
.sfx-table--compact th { height: 44px; }
.sfx-table--compact td { height: 40px; }
.sfx-table__empty td { height: auto; padding: 0; }
.sfx-table tbody tr.sfx-table__empty:hover td { background: transparent; } /* Leerzustand ist keine klickbare Zeile */
.sfx-table__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 8px 8px 16px; border-top: 1px solid var(--md-sys-color-outline-variant); font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); flex-wrap: wrap; }
.sfx-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.sfx-toolbar__search { width: min(360px, 100%); }
.sfx-toolbar__spacer { flex: 1 1 auto; }
/* ---------- Badge, Status, Label ---------- */
.sfx-badge {
display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--md-sys-shape-corner-small);
background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant);
font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-tracking-label-medium); white-space: nowrap; line-height: 1;
}
.sfx-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sfx-badge--success { background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.sfx-badge--warning { background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.sfx-badge--danger { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.sfx-badge--info { background: var(--md-sys-color-info-container); color: var(--md-sys-color-on-info-container); }
.sfx-badge--accent { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }
.sfx-badge--tertiary { background: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container); }
.sfx-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--md-sys-color-outline-variant); }
/* M3 Badge: Zähler an Navigation und Icons */
.sfx-badge--count { min-width: 16px; height: 16px; padding: 0 4px; justify-content: center; border-radius: var(--md-sys-shape-corner-full); background: var(--md-sys-color-error); color: var(--md-sys-color-on-error); font: var(--md-sys-typescale-label-small); font-variant-numeric: tabular-nums; }
.sfx-badge--count.sfx-badge--neutral { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
/* Zähler-Badge auf einem Icon-Button (App Bar: Warenkorb, Benachrichtigungen) */
.sfx-badge-anchor { position: relative; display: inline-flex; flex: none; }
.sfx-badge-anchor > .sfx-badge--count { position: absolute; top: 2px; right: 2px; pointer-events: none; z-index: 1; box-shadow: 0 0 0 2px var(--md-sys-color-surface); }
.sfx-status { display: inline-flex; align-items: center; gap: 8px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface); --_c: var(--md-sys-color-outline); }
.sfx-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_c); flex: none; }
.sfx-status--online, .sfx-status--success { --_c: var(--md-sys-color-success); }
.sfx-status--warning { --_c: var(--md-sys-color-warning); }
.sfx-status--danger, .sfx-status--offline { --_c: var(--md-sys-color-error); }
.sfx-status--info { --_c: var(--md-sys-color-info); }
.sfx-status--live::before { animation: sfx-pulse 1.6s ease-in-out infinite; }
/* ---------- Stat, Avatar, Progress ---------- */
.sfx-stat { background: var(--sfx-surface-card); border-radius: var(--md-sys-shape-corner-medium); box-shadow: var(--md-sys-elevation-level1); padding: 16px; min-width: 0; display: flex; flex-direction: column; gap: 4px; color: var(--md-sys-color-on-surface); transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); text-decoration: none; }
.sfx-stat--plain { background: none; box-shadow: none; padding: 0; }
.sfx-stat--tonal { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: none; }
.sfx-stat--tonal .sfx-stat__label, .sfx-stat--tonal .sfx-stat__meta { color: inherit; opacity: 0.85; }
.sfx-stat__label { font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sfx-stat__value { font: var(--md-sys-typescale-headline-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfx-stat--xl .sfx-stat__value { font: var(--md-sys-typescale-headline-large); }
.sfx-stat__delta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.sfx-stat__delta .sfx-icon { font-size: 18px; }
.sfx-stat__delta--up { color: var(--md-sys-color-success); }
.sfx-stat__delta--down { color: var(--md-sys-color-error); }
.sfx-stat__meta { color: var(--md-sys-color-outline); font: var(--md-sys-typescale-body-small); white-space: normal; overflow-wrap: anywhere; }
.sfx-stat.is-clickable { cursor: pointer; }
.sfx-stat.is-clickable:hover { box-shadow: var(--md-sys-elevation-level2); text-decoration: none; }
.sfx-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; overflow: hidden; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: inline-grid; place-items: center; font: var(--md-sys-typescale-label-medium); letter-spacing: 0.02em; }
.sfx-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfx-avatar--sm { width: 24px; height: 24px; font: var(--md-sys-typescale-label-small); }
.sfx-avatar--lg { width: 40px; height: 40px; font: var(--md-sys-typescale-label-large); }
.sfx-avatar--xl { width: 56px; height: 56px; font: var(--md-sys-typescale-title-medium); }
.sfx-avatar--accent { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.sfx-avatar--neutral { background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); }
.sfx-avatar-group { display: inline-flex; }
.sfx-avatar-group .sfx-avatar { box-shadow: 0 0 0 2px var(--sfx-surface-card); }
.sfx-avatar-group .sfx-avatar + .sfx-avatar { margin-left: -8px; }
.sfx-progress { height: 4px; background: var(--md-sys-color-secondary-container); border-radius: var(--md-sys-shape-corner-full); overflow: hidden; position: relative; }
.sfx-progress__bar { height: 100%; width: 0; background: var(--md-sys-color-primary); border-radius: var(--md-sys-shape-corner-full); transition: width var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); }
.sfx-progress::after { content: ""; position: absolute; right: 0; top: 0; width: 4px; height: 4px; border-radius: 50%; background: var(--md-sys-color-primary); }
.sfx-progress--warning .sfx-progress__bar, .sfx-progress--warning::after { background: var(--md-sys-color-warning); }
.sfx-progress--danger .sfx-progress__bar, .sfx-progress--danger::after { background: var(--md-sys-color-error); }
.sfx-progress--success .sfx-progress__bar, .sfx-progress--success::after { background: var(--md-sys-color-success); }
.sfx-progress--indeterminate .sfx-progress__bar { width: 40%; animation: sfx-indeterminate 1.4s var(--md-sys-motion-easing-standard) infinite; }
.sfx-meter { display: flex; flex-direction: column; gap: 8px; }
.sfx-meter__row { display: flex; justify-content: space-between; align-items: baseline; font: var(--md-sys-typescale-body-small); }
.sfx-meter__row strong { font: var(--md-sys-typescale-label-large); font-variant-numeric: tabular-nums; color: var(--md-sys-color-on-surface); }
.sfx-meter__row span { color: var(--md-sys-color-on-surface-variant); }
/* ---------- Navigation: Tabs, Segmented, Breadcrumb, Steps, Pagination ---------- */
.sfx-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--md-sys-color-outline-variant); overflow-x: auto; }
.sfx-tab {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 16px; border: 0; border-radius: 0; background: none;
font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-tracking-title-small); color: var(--md-sys-color-on-surface-variant); text-decoration: none; white-space: nowrap; cursor: pointer;
transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-tab { flex: none; }
.sfx-tab:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
.sfx-tab::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-sys-color-primary); transform: scaleX(0); transition: transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate); }
.sfx-tab.is-active, .sfx-tab[aria-selected="true"] { color: var(--md-sys-color-primary); }
.sfx-tab.is-active::after, .sfx-tab[aria-selected="true"]::after { transform: scaleX(1); }
.sfx-tab .sfx-badge { margin-left: 2px; }
.sfx-tabs--secondary .sfx-tab::after { left: 0; right: 0; height: 2px; border-radius: 0; }
.sfx-tabs--secondary .sfx-tab.is-active { color: var(--md-sys-color-on-surface); }
.sfx-segment { display: inline-flex; border: 1px solid var(--md-sys-color-outline); border-radius: var(--md-sys-shape-corner-full); overflow: hidden; }
.sfx-segment__item {
display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; min-width: 48px; border: 0; border-right: 1px solid var(--md-sys-color-outline); border-radius: 0; background: transparent;
font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface); cursor: pointer; white-space: nowrap;
transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-segment__item:last-child { border-right: 0; }
.sfx-segment__item .sfx-icon { font-size: 18px; }
.sfx-segment__item.is-active, .sfx-segment__item[aria-pressed="true"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-segment__item.is-active:not(:has(.sfx-icon))::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 18px; line-height: 1; order: -1; }
.sfx-segment--sm .sfx-segment__item { height: 32px; padding: 0 12px; }
.sfx-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 8px; padding: 0; font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant); }
.sfx-breadcrumb li { display: inline-flex; align-items: center; gap: 4px; }
.sfx-breadcrumb li + li::before { content: "chevron_right"; font-family: "Material Symbols Rounded"; font-size: 18px; line-height: 1; color: var(--md-sys-color-outline); }
.sfx-breadcrumb a { color: inherit; }
.sfx-breadcrumb a:hover { color: var(--md-sys-color-on-surface); text-decoration: none; }
.sfx-breadcrumb li:last-child { color: var(--md-sys-color-on-surface); }
.sfx-steps { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.sfx-step { display: flex; align-items: center; gap: 12px; flex: 1 1 0; min-width: 0; font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant); white-space: nowrap; }
.sfx-step:last-child { flex: 0 0 auto; }
.sfx-step::after { content: ""; flex: 1 1 auto; height: 2px; border-radius: 1px; background: var(--md-sys-color-outline-variant); margin: 0 16px; min-width: 16px; }
.sfx-step:last-child::after { display: none; }
.sfx-step__num { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-on-surface-variant); display: grid; place-items: center; font: var(--md-sys-typescale-label-medium); font-variant-numeric: tabular-nums; }
.sfx-step--done { color: var(--md-sys-color-on-surface); }
.sfx-step--done::after { background: var(--md-sys-color-primary); }
.sfx-step--done .sfx-step__num { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.sfx-step--done .sfx-step__num::before { content: "check"; font-family: "Material Symbols Rounded"; font-size: 18px; line-height: 1; }
.sfx-step--done .sfx-step__num span { display: none; }
.sfx-step--current { color: var(--md-sys-color-primary); }
.sfx-step--current .sfx-step__num { background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); box-shadow: 0 0 0 4px color-mix(in srgb, var(--md-sys-color-primary) 16%, transparent); }
.sfx-steps--vertical { flex-direction: column; align-items: stretch; gap: 16px; }
.sfx-steps--vertical .sfx-step { flex: none; }
.sfx-steps--vertical .sfx-step::after { display: none; }
@media (max-width: 599px) { .sfx-steps:not(.sfx-steps--keep) { flex-direction: column; align-items: stretch; gap: 12px; } .sfx-steps:not(.sfx-steps--keep) .sfx-step::after { display: none; } }
.sfx-pagination { display: flex; align-items: center; gap: 4px; }
.sfx-page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 8px; border: 0; border-radius: var(--md-sys-shape-corner-full); background: transparent; font: var(--md-sys-typescale-label-large); color: var(--md-sys-color-on-surface-variant); font-variant-numeric: tabular-nums; cursor: pointer; text-decoration: none; }
.sfx-page:hover { text-decoration: none; color: var(--md-sys-color-on-surface); }
.sfx-page.is-active { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-page:disabled { opacity: 0.38; cursor: not-allowed; }
.sfx-page .sfx-icon { font-size: 24px; }
/* ---------- Navigation Drawer, Rail, Bar ---------- */
.sfx-menu { display: flex; flex-direction: column; gap: 0; list-style: none; margin: 0; padding: 0; }
.sfx-menu__group { font: var(--md-sys-typescale-title-small); letter-spacing: var(--md-sys-typescale-tracking-title-small); color: var(--md-sys-color-on-surface-variant); padding: 14px 16px 6px; }
.sfx-menu__item {
display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 24px 0 16px; width: 100%; border: 0; border-radius: var(--md-sys-shape-corner-full);
background: none; text-align: left; cursor: pointer; text-decoration: none; font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface-variant);
transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard), color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}
.sfx-menu__item:hover { text-decoration: none; color: var(--md-sys-color-on-surface); }
.sfx-menu__item .sfx-icon { font-size: 24px; font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-menu__item.is-active, .sfx-menu__item[aria-current="page"] { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-menu__item.is-active .sfx-icon, .sfx-menu__item[aria-current="page"] .sfx-icon { font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-menu__item .sfx-badge { margin-left: auto; }
.sfx-menu__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sfx-menu__label--short { display: none; }
.sfx-menu__divider { height: 1px; background: var(--md-sys-color-outline-variant); margin: 8px 16px; }
.sfx-shell { display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 100dvh; }
.sfx-shell__content { display: flex; flex-direction: column; min-width: 0; }
.sfx-sidebar { background: var(--md-sys-color-surface-container-low); display: flex; flex-direction: column; padding: 12px 12px 12px; position: sticky; top: 0; height: 100dvh; overflow: hidden; border-radius: 0 16px 16px 0; }
.sfx-sidebar > nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sfx-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 12px 16px 20px; text-decoration: none; color: var(--md-sys-color-on-surface); flex: none; }
.sfx-sidebar__brand img { height: 32px; width: auto; }
.sfx-sidebar__brand img.sfx-sidebar__mark { display: none; } /* Bildmarke nur in der Rail */
.sfx-sidebar__brand:hover { text-decoration: none; }
.sfx-sidebar__product { font: var(--md-sys-typescale-label-small); letter-spacing: 0.06em; color: var(--md-sys-color-on-tertiary-container); background: var(--md-sys-color-tertiary-container); padding: 2px 8px; border-radius: var(--md-sys-shape-corner-full); }
.sfx-header__fab { display: flex; align-items: center; flex: none; margin-right: 8px; }
@media (max-width: 599px) { .sfx-header__fab { display: none; } }
.sfx-sidebar__footer { flex: none; padding-top: 8px; }
.sfx-sidebar__account { display: flex; align-items: center; gap: 12px; padding: 8px 12px; height: 56px; border-radius: var(--md-sys-shape-corner-full); width: 100%; border: 0; background: none; text-align: left; cursor: pointer; color: var(--md-sys-color-on-surface); }
.sfx-sidebar__account strong { display: block; font: var(--md-sys-typescale-label-large); }
.sfx-sidebar__account .sfx-grow > span { display: block; font: var(--md-sys-typescale-body-small); color: var(--md-sys-color-on-surface-variant); }
.sfx-sidebar__account > .sfx-icon { color: var(--md-sys-color-on-surface-variant); }
img.sfx-logo--dark { display: none; }
img.sfx-logo--light { display: block; }
[data-theme="dark"] img.sfx-logo--dark { display: block; }
[data-theme="dark"] img.sfx-logo--light { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img.sfx-logo--dark { display: block; } :root:not([data-theme="light"]) img.sfx-logo--light { display: none; } }
/* Top App Bar (64dp), bei Scroll surface-container */
.sfx-header { height: 64px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 16px 0 8px; background: var(--md-sys-color-surface); position: sticky; top: 0; z-index: var(--sfx-z-header); transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard); }
.sfx-header.is-scrolled { background: var(--md-sys-color-surface-container); }
.sfx-header__spacer { flex: 1 1 auto; }
.sfx-header__search { width: min(480px, 100%); }
.sfx-header__title { font: var(--md-sys-typescale-title-large); padding: 0 8px; }
.sfx-header .sfx-nav-toggle { display: none; }
.sfx-main { padding: 24px; min-width: 0; flex: 1 1 auto; }
.sfx-main--narrow { max-width: 720px; }
.sfx-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sfx-page-header > :first-child { flex: 1 1 320px; min-width: 0; }
.sfx-page-title { font: var(--md-sys-typescale-headline-medium); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sfx-page-desc { font: var(--md-sys-typescale-body-medium); color: var(--md-sys-color-on-surface-variant); margin-top: 4px; }
.sfx-page-actions { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; flex-wrap: wrap; }
.sfx-page-actions .sfx-fab--page { order: 10; margin-left: 8px; }
@media (max-width: 599px) { .sfx-page-actions .sfx-fab--page { display: none; } }
.sfx-page-header + .sfx-tabs { margin-top: -8px; margin-bottom: 24px; }
.sfx-section { display: flex; flex-direction: column; gap: 16px; }
.sfx-section + .sfx-section { margin-top: 32px; }
.sfx-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sfx-detail { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.sfx-detail--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sfx-detail--nav { grid-template-columns: 240px minmax(0, 1fr); }
.sfx-detail--nav > :first-child { position: sticky; top: 88px; }
.sfx-navbar { display: none; }
/* Rail (600 bis 1239px): 80dp, Icon in Pill-Indikator, Label darunter */
@media (max-width: 1439px) and (min-width: 600px) {
.sfx-shell { grid-template-columns: 80px minmax(0, 1fr); }
.sfx-sidebar { padding: 12px 4px 16px; border-radius: 0; align-items: center; }
.sfx-sidebar__brand { padding: 8px 0 12px; }
/* Spezifität über den Themen-Regeln für img.sfx-logo--dark/--light */
.sfx-shell .sfx-sidebar .sfx-sidebar__brand img.sfx-logo--dark, .sfx-shell .sfx-sidebar .sfx-sidebar__brand img.sfx-logo--light, .sfx-sidebar__brand img { display: none; }
.sfx-sidebar__brand img.sfx-sidebar__mark { display: block; width: 36px; height: 36px; } /* Rail: Bildmarke statt Wortmarke (Chris 03.09.2026: "Da fehlt das Logo") */
.sfx-sidebar__product { display: none; }
.sfx-menu { width: 100%; gap: 4px; }
.sfx-menu__group, .sfx-menu__divider { display: none; }
.sfx-menu__item { flex-direction: column; justify-content: center; gap: 4px; height: 56px; padding: 0; border-radius: 0; background: none; font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-tracking-label-medium); text-align: center; }
.sfx-menu__item::before { display: none; }
.sfx-menu__item .sfx-icon { width: 56px; height: 32px; border-radius: var(--md-sys-shape-corner-full); display: grid; place-items: center; font-size: 24px; transition: background-color var(--md-sys-motion-duration-short2); }
.sfx-menu__item:hover .sfx-icon { background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent); }
.sfx-menu__item.is-active { background: none; color: var(--md-sys-color-on-surface); }
.sfx-menu__item.is-active .sfx-icon { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.sfx-menu__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 76px; flex: none; }
/* Kurzlabel für den Rail: */
.sfx-menu__item:has(.sfx-menu__label--short) .sfx-menu__label:not(.sfx-menu__label--short) { display: none; }
.sfx-menu__label--short { display: block; }
.sfx-sidebar > nav { width: 100%; }
.sfx-menu__item .sfx-badge { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; }
.sfx-sidebar__footer { width: 100%; }
.sfx-sidebar__account { padding: 0; justify-content: center; }
.sfx-sidebar__account > :not(.sfx-avatar) { display: none; }
.sfx-main { padding: 24px; }
}
/* Kompakt (< 600px): modaler Drawer, Bottom Navigation Bar (80dp) */
@media (max-width: 599px) {
.sfx-shell { grid-template-columns: minmax(0, 1fr); }
.sfx-sidebar { position: fixed; inset: 0 auto 0 0; width: min(360px, 85vw); z-index: var(--sfx-z-drawer); transform: translateX(-100%); transition: transform var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); border-radius: 0 16px 16px 0; box-shadow: none; }
.sfx-shell.is-nav-open .sfx-sidebar { transform: none; box-shadow: var(--md-sys-elevation-level1); }
.sfx-shell.is-nav-open::before { content: ""; position: fixed; inset: 0; background: var(--sfx-overlay); z-index: calc(var(--sfx-z-drawer) - 1); }
.sfx-header .sfx-nav-toggle { display: inline-flex; }
.sfx-header__search { display: none; }
.sfx-main { padding: 16px 16px 96px; }
.sfx-page-title { font: var(--md-sys-typescale-headline-small); }
.sfx-detail, .sfx-detail--wide, .sfx-detail--nav { grid-template-columns: minmax(0, 1fr); }
.sfx-detail--nav > :first-child { position: static; }
.sfx-navbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 80px; background: var(--md-sys-color-surface-container); z-index: var(--sfx-z-header); padding: 12px 8px 16px; gap: 8px; }
.sfx-navbar__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; border-radius: var(--md-sys-shape-corner-large); text-decoration: none; font: var(--md-sys-typescale-label-medium); letter-spacing: var(--md-sys-typescale-tracking-label-medium); color: var(--md-sys-color-on-surface-variant); }
.sfx-navbar__item .sfx-icon { width: 64px; height: 32px; border-radius: var(--md-sys-shape-corner-full); display: grid; place-items: center; font-size: 24px; transition: background-color var(--md-sys-motion-duration-short2); }
.sfx-navbar__item.is-active { color: var(--md-sys-color-on-surface); }
.sfx-navbar__item.is-active .sfx-icon { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24; }
.sfx-navbar__item::before { display: none; }
.sfx-list__title { white-space: normal; }
.sfx-fab--fixed { bottom: 96px; }
}
@media (max-width: 1023px) { .sfx-detail { grid-template-columns: minmax(0, 1fr); } .sfx-detail--nav { grid-template-columns: minmax(0, 1fr); } .sfx-detail--nav > :first-child { position: static; } }
.sfx-batchbar { position: sticky; bottom: 16px; z-index: 5; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 8px 8px 8px 16px; background: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-on-surface); border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-level3); font: var(--md-sys-typescale-body-medium); flex-wrap: wrap; }
.sfx-batchbar[hidden] { display: none; }
.sfx-batchbar a { color: var(--md-sys-color-inverse-primary); }
.sfx-batchbar .sfx-btn { color: var(--md-sys-color-inverse-primary); }
.sfx-batchbar .sfx-btn--secondary { background: color-mix(in srgb, var(--md-sys-color-inverse-on-surface) 12%, transparent); color: var(--md-sys-color-inverse-on-surface); }
.sfx-batchbar .sfx-btn--danger-soft { background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }
.sfx-batchbar__count { font: var(--md-sys-typescale-label-large); }
.sfx-batchbar__actions { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
/* ---------- Menüs, Dialoge, Sheets, Tooltip ---------- */
.sfx-dropdown { position: fixed; inset: auto; margin: 0; min-width: 200px; max-width: 280px; padding: 8px 0; background: var(--md-sys-color-surface-container); color: var(--md-sys-color-on-surface); border: 0; border-radius: var(--md-sys-shape-corner-extra-small); box-shadow: var(--md-sys-elevation-level2); z-index: var(--sfx-z-dropdown); }
.sfx-dropdown:not([popover]) { position: absolute; }
.sfx-dropdown[data-radix-menu-content] { position: static; }
.sfx-dropdown[popover]:popover-open, .sfx-dropdown[data-state="open"] { animation: sfx-menu-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate); }
.sfx-dropdown__label { padding: 8px 12px 4px; font: var(--md-sys-typescale-label-medium); color: var(--md-sys-color-on-surface-variant); }
.sfx-dropdown__item { display: flex; align-items: center; gap: 12px; width: 100%; height: 48px; padding: 0 12px; border: 0; border-radius: 0; background: none; text-align: left; font: var(--md-sys-typescale-label-large); letter-spacing: var(--md-sys-typescale-tracking-label-large); color: var(--md-sys-color-on-surface); text-decoration: none; cursor: pointer; white-space: nowrap; }
.sfx-dropdown__item:hover { text-decoration: none; }
.sfx-dropdown__item .sfx-icon { font-size: 24px; color: var(--md-sys-color-on-surface-variant); }
.sfx-dropdown__item .sfx-kbd { margin-left: auto; }
.sfx-dropdown__item--danger { color: var(--md-sys-color-error); }
.sfx-dropdown__item--danger .sfx-icon { color: inherit; }
.sfx-dropdown__item[aria-disabled="true"], .sfx-dropdown__item:disabled { opacity: 0.38; pointer-events: none; }
.sfx-dropdown__sep { height: 1px; background: var(--md-sys-color-outline-variant); margin: 8px 0; }
.sfx-dropdown__item.is-checked::after { content: "check"; font-family: "Material Symbols Rounded"; font-size: 20px; margin-left: auto; color: var(--md-sys-color-primary); }
dialog.sfx-dialog, dialog.sfx-drawer { padding: 0; border: 0; background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-on-surface); box-shadow: var(--md-sys-elevation-level3); z-index: var(--sfx-z-dialog); }
dialog.sfx-dialog::backdrop, dialog.sfx-drawer::backdrop { background: color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent); }
dialog.sfx-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); border-radius: var(--md-sys-shape-corner-extra-large); overflow: hidden; }
dialog.sfx-dialog[open] { display: flex; flex-direction: column; animation: sfx-dialog-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate); }
dialog.sfx-dialog--sm { width: min(400px, calc(100vw - 32px)); }
dialog.sfx-dialog--lg { width: min(760px, calc(100vw - 32px)); }
.sfx-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; flex: none; }
.sfx-dialog__header .sfx-btn--icon { margin: -8px -8px 0 0; }
.sfx-dialog__title { font: var(--md-sys-typescale-headline-small); }
.sfx-dialog__body { padding: 16px 24px 24px; overflow-y: auto; flex: 1 1 auto; min-height: 0; color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-body-medium); }
.sfx-dialog__body p + p { margin-top: 8px; }
.sfx-dialog__body strong { color: var(--md-sys-color-on-surface); }
.sfx-dialog__footer { display: flex; justify-content: flex-end; gap: 8px; padding: 0 24px 24px; flex: none; }
.sfx-dialog__footer .sfx-btn--secondary { background: transparent; color: var(--md-sys-color-primary); }
@media (max-width: 599px) {
dialog.sfx-dialog, dialog.sfx-dialog--sm, dialog.sfx-dialog--lg { width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0; max-height: 92dvh; }
dialog.sfx-dialog::before { content: ""; display: block; width: 32px; height: 4px; border-radius: 2px; background: var(--md-sys-color-on-surface-variant); opacity: 0.4; margin: 12px auto -8px; }
}
dialog.sfx-drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(400px, 100vw); border-radius: var(--md-sys-shape-corner-large) 0 0 var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); }
dialog.sfx-drawer[open] { display: flex; flex-direction: column; animation: sfx-sheet-in var(--md-sys-motion-duration-medium4) var(--md-sys-motion-easing-emphasized-decelerate); }
dialog.sfx-drawer--lg { width: min(560px, 100vw); }
dialog.sfx-drawer .sfx-dialog__title { font: var(--md-sys-typescale-title-large); }
/* Dialog und Side Sheet als Overlay-Variante (React mit Radix): gleiche Optik ohne