/**
 * CARE-UI core component styles.
 *
 * Scoped under .care-ui .care-*. Semantic --care-* tokens only.
 * Mapping: design-system/care-ui/component-mapping.md
 */

/* Figma text styles use Vertical Trim / Cap Height (01 Foundations).
   CSS: text-box-trim + text-box-edge cap/alphabetic. Not inherited —
   apply on the text node (e.g. .care-tag-label), not the flex shell.
   Eurostile's em-box is not optically centered; without trim, Tag XS
   (16 px) and other compact labels sit off-center. */
.care-ui :is(
    .care-btn-label,
    .care-tag-label,
    .care-trend-chip-label,
    .care-link,
    .care-alert-kicker,
    .care-alert-body,
    .care-kpi-value,
    .care-card-title,
    .care-insight-row-title,
    .care-insight-row-meta,
    .care-empty-title,
    .care-empty-copy,
    .care-icon-feature-title,
    .care-icon-feature-body,
    .care-login-title,
    .care-login-title--desktop,
    .care-login-title--mobile,
    .care-login-lead,
    .care-login-onboarding-kicker,
    .care-login-onboarding-caption,
    .care-login-card-title,
    .care-login-card-lead,
    .care-login-benefits-title,
    .care-login-footer-copy,
    .care-login-or-label,
    .care-donut-total,
    .care-donut-center-label,
    .care-donut-legend-value,
    .care-donut-legend-label,
    .care-s32-trends-kicker,
    .care-s32-trend-label,
    .care-s32-metric-kicker,
    .care-s32-metric-value,
    .care-s32-opportunity-label,
    .care-s23-title,
    .care-s23-lede,
    .care-s23-freshness,
    .care-s23-filter-summary,
    .care-s23-card-kicker,
    .care-s23-section-title,
    .care-s23-section-kicker,
    .care-s23-meta-kicker,
    .care-s23-meta-title,
    .care-s23-meta-copy,
    .care-s23-sentence,
    .care-s23-subject,
    .care-s23-time-relative,
    .care-s23-time-absolute,
    .care-s23-count-value,
    .care-s23-count-label,
    .care-s23-table thead th,
    .care-product-status-title,
    .care-product-status-summary,
    .care-product-status-metric,
    .care-product-status-updated,
    .care-product-status-cause-kicker,
    .care-product-status-cause-copy,
    .care-status-detail-eyebrow,
    .care-status-detail-title,
    .care-status-detail-meta,
    .care-chart-card-title,
    .care-chart-card-subtitle,
    .care-chart-card-legend-label,
    .care-field > label,
    .care-login-password-label > label,
    .care-field legend,
    .care-field .form-text,
    .care-field .invalid-feedback,
    .care-field--check .form-check-label
) {
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
}

/* --- Button / Icon Button ------------------------------------------------ */

.care-ui .care-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--care-space-2);
    box-sizing: border-box;
    margin: 0;
    /* !important: optcare-design.css .btn sets border:none, radius 6px,
       font-size C3 (14px) and line-height with !important. Figma Button
       (2074:29) needs the 1px stroke (Secondary/Tertiary), radius-md 8px
       and size-specific type. */
    border: 1px solid transparent !important;
    border-radius: var(--care-radius-md) !important;
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    background-clip: padding-box;
}

.care-ui .care-btn:focus {
    outline: none;
}

.care-ui .care-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-primary-focus-ring);
}

.care-ui .care-btn:disabled,
.care-ui .care-btn[aria-disabled="true"] {
    cursor: not-allowed;
}

.care-ui .care-btn--xs {
    height: var(--care-space-6);
    padding: var(--care-space-1) var(--care-space-2);
    gap: var(--care-space-1);
    font-size: var(--care-font-size-12) !important;
}

.care-ui .care-btn--sm {
    height: var(--care-space-8);
    padding: 6px var(--care-space-3);
    font-size: var(--care-font-size-13) !important;
}

.care-ui .care-btn--md {
    height: var(--care-space-10);
    padding: 10px var(--care-space-4);
    font-size: var(--care-font-size-14) !important;
}

.care-ui .care-btn--lg {
    height: var(--care-space-12);
    padding: 14px var(--care-space-5);
    font-size: var(--care-font-size-14) !important;
}

.care-ui .care-btn--icon {
    padding: 0;
}

.care-ui .care-btn--icon.care-btn--sm {
    width: var(--care-space-8);
}

.care-ui .care-btn--icon.care-btn--md {
    width: var(--care-space-10);
}

.care-ui .care-btn--icon.care-btn--lg {
    width: var(--care-space-12);
}

.care-ui .care-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.care-ui .care-btn-icon .oc-icon {
    width: 1em;
    height: 1em;
}

.care-ui .care-btn--icon.care-btn--sm .care-btn-icon .oc-icon {
    width: 14px;
    height: 14px;
}

.care-ui .care-btn--icon.care-btn--md .care-btn-icon .oc-icon {
    width: var(--care-space-4);
    height: var(--care-space-4);
}

.care-ui .care-btn--icon.care-btn--lg .care-btn-icon .oc-icon {
    width: 18px;
    height: 18px;
}

.care-ui .care-btn--primary {
    background: var(--care-action-primary-background);
    color: var(--care-action-primary-on-background);
}

.care-ui .care-btn--primary:hover:not(:disabled) {
    background: var(--care-action-primary-background-hover);
}

.care-ui .care-btn--primary:disabled {
    background: var(--care-action-primary-background-disabled);
    color: var(--care-action-primary-on-background-disabled);
}

.care-ui .care-btn--primary:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-primary-focus-ring);
}

.care-ui .care-btn--secondary {
    background: transparent;
    border-color: var(--care-action-secondary-border) !important;
    color: var(--care-action-secondary-foreground);
}

.care-ui .care-btn--secondary:hover:not(:disabled) {
    background: var(--care-action-secondary-background-hover);
    border-color: var(--care-action-secondary-border-hover) !important;
    color: var(--care-action-secondary-foreground-hover);
}

.care-ui .care-btn--secondary:disabled {
    background: var(--care-action-secondary-background-disabled);
    border-color: var(--care-action-secondary-border-disabled) !important;
    color: var(--care-action-secondary-foreground-disabled);
}

.care-ui .care-btn--secondary:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-secondary-focus-ring);
}

.care-ui .care-btn--tertiary {
    background: var(--care-action-tertiary-background);
    border-color: var(--care-action-tertiary-border) !important;
    color: var(--care-action-tertiary-foreground);
}

.care-ui .care-btn--tertiary:hover:not(:disabled) {
    background: var(--care-action-tertiary-background-hover);
}

.care-ui .care-btn--tertiary:disabled {
    background: var(--care-action-tertiary-background-disabled);
    border-color: var(--care-action-tertiary-border-disabled) !important;
    color: var(--care-action-tertiary-foreground-disabled);
}

.care-ui .care-btn--tertiary:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-tertiary-focus-ring);
}

.care-ui .care-btn--destructive {
    background: var(--care-action-destructive-background);
    color: var(--care-action-destructive-on-background);
}

.care-ui .care-btn--destructive:hover:not(:disabled) {
    background: var(--care-action-destructive-background-hover);
}

.care-ui .care-btn--destructive:disabled {
    background: var(--care-action-destructive-background-disabled);
    color: var(--care-action-destructive-foreground-disabled);
}

.care-ui .care-btn--destructive:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-destructive-focus-ring);
}

.care-ui .care-btn--ghost {
    background: transparent;
    color: var(--care-action-ghost-foreground);
}

.care-ui .care-btn--ghost:hover:not(:disabled) {
    background: var(--care-action-ghost-background-hover);
    color: var(--care-action-ghost-foreground-hover);
}

.care-ui .care-btn--ghost:disabled {
    color: var(--care-action-ghost-foreground-disabled);
}

.care-ui .care-btn--ghost:focus-visible {
    box-shadow: 0 0 0 2px var(--care-action-ghost-focus-ring);
}

/* --- Link ---------------------------------------------------------------- */

.care-ui .care-link {
    display: inline-flex;
    align-items: center;
    gap: var(--care-space-1);
    padding: 6px var(--care-space-1);
    border-radius: var(--care-radius-sm);
    color: var(--care-action-secondary-foreground);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-decoration: none;
}

.care-ui .care-link:hover {
    color: var(--care-action-secondary-foreground-hover);
}

.care-ui .care-link:focus {
    outline: none;
}

.care-ui .care-link:focus-visible {
    box-shadow: 0 2px 0 0 var(--care-action-secondary-focus-ring);
}

.care-ui .care-link--disabled {
    color: var(--care-action-secondary-foreground-disabled);
    pointer-events: none;
}

.care-ui .care-link-icon .oc-icon {
    width: var(--care-space-3);
    height: var(--care-space-3);
}

/* --- Form field anatomy -------------------------------------------------- */

.care-ui .care-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--care-metrics-gap-field-label-control);
    margin-bottom: var(--care-space-4);
}

.care-ui .care-field > label,
.care-ui .care-field legend {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-field .form-control,
.care-ui .care-field .form-select,
.care-ui .care-field textarea.form-control {
    height: var(--care-space-10);
    padding: var(--care-space-3);
    border: 1px solid var(--care-input-border-default);
    border-radius: var(--care-radius-md);
    background-color: var(--care-input-background-default);
    color: var(--care-input-foreground);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
    line-height: 1.5;
    box-shadow: none;
}

/* Native <select>: Figma Form / Select (3436:172) is 40px with trimmed
   value text. Chrome clips descenders when vertical padding sits inside
   that height (same exception as primedesk-tenant-anlage). */
.care-ui .care-field .form-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 calc(var(--care-space-3) + 20px) 0 var(--care-space-3);
    line-height: normal;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23303030' d='M1.41 0 6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--care-space-3) center;
    background-size: 12px 8px;
}

.care-ui .care-field textarea.form-control {
    height: auto;
    min-height: var(--care-space-24);
}

.care-ui .care-field--compact .form-control,
.care-ui .care-field--compact .form-select,
.care-ui .care-field--compact textarea.form-control {
    height: var(--care-space-8);
    padding: var(--care-space-1) var(--care-space-2);
}

.care-ui .care-field--compact .form-select {
    padding: 0 calc(var(--care-space-2) + 20px) 0 var(--care-space-2);
    line-height: normal;
    background-position: right var(--care-space-2) center;
}

.care-ui .care-field--compact textarea.form-control {
    height: auto;
    min-height: var(--care-space-16);
}

.care-ui .care-field .form-control::placeholder,
.care-ui .care-field .form-select::placeholder,
.care-ui .care-field textarea.form-control::placeholder {
    color: var(--care-input-placeholder);
}

.care-ui .care-field .form-control:hover:not(:disabled):not(:focus),
.care-ui .care-field .form-select:hover:not(:disabled):not(:focus),
.care-ui .care-field textarea.form-control:hover:not(:disabled):not(:focus) {
    background-color: var(--care-input-background-hover);
    border-color: var(--care-input-border-hover);
}

.care-ui .care-field .form-control:focus,
.care-ui .care-field .form-select:focus,
.care-ui .care-field textarea.form-control:focus {
    border-color: var(--care-input-border-focus);
    border-width: 2px;
    box-shadow: none;
    outline: none;
}

.care-ui .care-field.is-invalid .form-control,
.care-ui .care-field.is-invalid .form-select,
.care-ui .care-field.is-invalid textarea.form-control,
.care-ui .care-field .form-control.is-invalid,
.care-ui .care-field .form-select.is-invalid {
    border-color: var(--care-input-error-border);
}

.care-ui .care-field .form-control:disabled,
.care-ui .care-field .form-select:disabled,
.care-ui .care-field textarea.form-control:disabled {
    background-color: var(--care-input-background-disabled);
    color: var(--care-input-disabled-foreground);
    border-color: var(--care-border-default);
}

.care-ui .care-field .form-text {
    margin: 0;
    color: var(--care-input-helper);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-field .invalid-feedback {
    display: block;
    margin: 0;
    color: var(--care-input-error-foreground);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-field--check {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--care-space-2);
}

.care-ui .care-field--check .form-check-input {
    width: var(--care-space-4);
    height: var(--care-space-4);
    margin: 0;
    border-color: var(--care-input-border-default);
    background-color: var(--care-input-background-default);
}

.care-ui .care-field--check .form-check-input:checked {
    background-color: var(--care-input-selected-background);
    border-color: var(--care-input-selected-border);
}

.care-ui .care-field--check .form-check-input:focus {
    box-shadow: 0 0 0 2px var(--care-input-focus-ring);
}

.care-ui .care-field--check.is-invalid .form-check-input,
.care-ui .care-field--check .form-check-input.is-invalid {
    border-color: var(--care-input-error-border);
}

.care-ui .care-field--check .form-check-input:disabled {
    background-color: var(--care-input-background-disabled);
}

.care-ui .care-field--check .form-check-label {
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
}

.care-ui .care-field--check.form-switch .form-check-input {
    width: var(--care-space-8);
    height: var(--care-space-5);
}

.care-ui .care-submit {
    margin-top: var(--care-space-2);
}

/* --- Alert / Flash ------------------------------------------------------- */

.care-ui .care-alert {
    display: flex;
    align-items: center;
    gap: var(--care-space-3);
    padding: var(--care-space-3) var(--care-space-4);
    border: 1px solid transparent;
    border-radius: var(--care-radius-md);
    overflow: hidden;
}

.care-ui .care-alert.alert-dismissible {
    padding-right: var(--care-space-4);
}

.care-ui .care-alert-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--care-radius-pill);
    flex-shrink: 0;
    background: currentColor;
}

.care-ui .care-alert-kicker {
    flex-shrink: 0;
    color: inherit;
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.care-ui .care-alert-body {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-alert--info {
    background: var(--care-status-info-background);
    border-color: var(--care-status-info-border);
    color: var(--care-status-info-foreground);
}

.care-ui .care-alert--success {
    background: var(--care-status-success-background);
    border-color: var(--care-status-success-border);
    color: var(--care-status-success-foreground);
}

.care-ui .care-alert--attention {
    background: var(--care-status-attention-background);
    border-color: var(--care-status-attention-border);
    color: var(--care-status-attention-foreground);
}

.care-ui .care-alert--critical {
    background: var(--care-status-critical-background);
    border-color: var(--care-status-critical-border);
    color: var(--care-status-critical-foreground);
}

.care-ui .care-alert-dismiss,
.care-ui .care-alert.alert-dismissible .btn-close {
    position: static;
    inset: auto;
    margin-left: auto;
    padding: 0;
    flex-shrink: 0;
    align-self: center;
}

/* --- Tag ----------------------------------------------------------------- */

.care-ui .care-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--care-radius-pill);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.care-ui .care-tag-dot {
    width: var(--care-space-2);
    height: var(--care-space-2);
    border-radius: var(--care-radius-pill);
    background: currentColor;
    flex-shrink: 0;
}

.care-ui .care-tag--xs {
    height: var(--care-space-4);
    padding: 2px 6px;
    gap: 3px;
    font-size: var(--care-font-size-9);
}

.care-ui .care-tag--xs .care-tag-dot {
    width: 6px;
    height: 6px;
}

.care-ui .care-tag--sm {
    height: var(--care-space-5);
    padding: var(--care-space-1) var(--care-space-2);
    gap: var(--care-space-1);
    font-size: var(--care-font-size-11);
}

.care-ui .care-tag--md {
    height: var(--care-space-6);
    padding: var(--care-space-1) var(--care-space-3);
    gap: var(--care-space-2);
    font-size: var(--care-font-size-12);
}

.care-ui .care-tag--lg {
    height: var(--care-space-7);
    padding: var(--care-space-1) var(--care-space-4);
    gap: var(--care-space-2);
    font-size: var(--care-font-size-13);
}

.care-ui .care-tag--tone-success {
    background: var(--care-indicator-success-background);
    border-color: var(--care-indicator-success-border);
    color: var(--care-indicator-success-foreground);
}

.care-ui .care-tag--tone-attention,
.care-ui .care-tag--severity-high {
    background: var(--care-indicator-attention-background);
    border-color: var(--care-indicator-attention-border);
    color: var(--care-indicator-attention-foreground);
}

.care-ui .care-tag--tone-critical {
    background: var(--care-indicator-critical-background);
    border-color: var(--care-indicator-critical-border);
    color: var(--care-indicator-critical-foreground);
}

.care-ui .care-tag--tone-info,
.care-ui .care-tag--severity-low {
    background: var(--care-indicator-info-background);
    border-color: var(--care-indicator-info-border);
    color: var(--care-indicator-info-foreground);
}

.care-ui .care-tag--tone-neutral,
.care-ui .care-tag--severity-medium {
    background: var(--care-indicator-neutral-background);
    border-color: var(--care-indicator-neutral-border);
    color: var(--care-indicator-neutral-foreground);
}

.care-ui .care-tag--tone-unknown {
    background: var(--care-indicator-unknown-background);
    border-color: var(--care-indicator-unknown-border);
    color: var(--care-indicator-unknown-foreground);
}

.care-ui .care-tag--severity-critical {
    background: var(--care-indicator-critical-background);
    border-color: var(--care-indicator-critical-border);
    color: var(--care-indicator-critical-foreground);
}

/* --- Spinner ------------------------------------------------------------- */

.care-ui .care-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--care-text-secondary);
}

.care-ui .care-spinner--sm,
.care-ui .care-spinner--sm .oc-icon {
    width: var(--care-space-4);
    height: var(--care-space-4);
}

.care-ui .care-spinner--md,
.care-ui .care-spinner--md .oc-icon {
    width: var(--care-space-6);
    height: var(--care-space-6);
}

.care-ui .care-spinner--lg,
.care-ui .care-spinner--lg .oc-icon {
    width: var(--care-space-8);
    height: var(--care-space-8);
}

@keyframes care-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.care-ui .care-spin {
    animation: care-spin 1s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .care-ui .care-spin {
        animation: none;
    }
}

/* --- Trend Chip ---------------------------------------------------------- */

.care-ui .care-trend-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--care-space-1);
    box-sizing: border-box;
    height: 25px;
    padding: var(--care-space-1) var(--care-space-2);
    border: 1px solid transparent;
    border-radius: var(--care-radius-pill);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}

.care-ui .care-trend-chip-icon,
.care-ui .care-trend-chip-icon .oc-icon {
    width: 14px;
    height: 14px;
}

.care-ui .care-trend-chip--positive {
    background: var(--care-indicator-success-background);
    border-color: var(--care-indicator-success-border);
    color: var(--care-indicator-success-foreground);
}

.care-ui .care-trend-chip--negative {
    background: var(--care-indicator-critical-background);
    border-color: var(--care-indicator-critical-border);
    color: var(--care-indicator-critical-foreground);
}

.care-ui .care-trend-chip--neutral {
    background: var(--care-indicator-neutral-background);
    border-color: var(--care-indicator-neutral-border);
    color: var(--care-indicator-neutral-foreground);
}

/* --- KPI Tile ------------------------------------------------------------ */

.care-ui .care-kpi {
    display: grid;
    /* auto / 1fr / auto statt 25px / 1fr / 20px: die festen Tracks haben
       Label und Helper in eine Clip-Box gezwungen. text-box-trim bleibt
       nur auf der Hauptzahl — auf Label/Helper plus overflow:hidden
       schneidet Eurostile-Umlautpunkte und Unterlängen ab. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--care-space-3);
    box-sizing: border-box;
    min-width: 0;
    min-height: 140px;
    padding: var(--care-space-5) var(--care-space-6) var(--care-space-5);
    overflow: visible;
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-lg);
    background: var(--care-surface-card);
}

.care-ui .care-kpi-head {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
    min-width: 0;
    min-height: 0;
}

.care-ui .care-kpi-label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.care-ui .care-kpi-accessory {
    flex: 0 0 auto;
}

.care-ui .care-kpi-value {
    align-self: start;
    min-width: 0;
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-32);
    line-height: 1.2;
}

.care-ui .care-kpi-helper {
    min-width: 0;
    margin: 0;
    overflow: visible;
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.care-ui .care-kpi-helper--neutral {
    color: var(--care-text-secondary);
}

.care-ui .care-kpi-helper--attention {
    color: var(--care-indicator-attention-foreground);
}

.care-ui .care-kpi-helper--critical {
    color: var(--care-indicator-critical-foreground);
}

/* --- Card ---------------------------------------------------------------- */

.care-ui .care-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-card);
    background: var(--care-surface-card);
}

.care-ui .care-card-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 48px;
    padding: var(--care-space-2) var(--care-space-6);
    border-bottom: 1px solid var(--care-border-default);
}

.care-ui .care-card-title {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--care-text-primary);
    /* !important: optcare-design.css sets h2 { font-size: var(--type-h2) !important }
       (clamp 2–3.5rem). Figma Card / Header (4034:30) is font-size/16, Demi, tracking 0. */
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.care-ui .care-card-action {
    flex: 0 0 auto;
}

.care-ui .care-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.care-ui .care-card-body--padded {
    padding: var(--care-space-5) var(--care-space-6);
}

/* --- Insight Row --------------------------------------------------------- */

.care-ui .care-insight-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--care-space-3) var(--care-space-4);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--care-space-3) var(--care-space-6);
    border-bottom: 1px solid var(--care-border-default);
}

.care-ui .care-insight-row:last-child {
    border-bottom: 0;
}

.care-ui .care-insight-row-tag,
.care-ui .care-insight-row-action {
    flex: 0 0 auto;
}

.care-ui .care-insight-row-copy {
    display: flex;
    flex: 1 1 0%;
    flex-direction: column;
    gap: var(--care-space-3);
    min-width: 120px;
    overflow: clip;
}

.care-ui .care-insight-row-title,
.care-ui .care-insight-row-meta {
    margin: 0;
    min-width: 0;
    overflow-wrap: break-word;
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
}

.care-ui .care-insight-row-title {
    color: var(--care-text-primary);
    font-size: var(--care-font-size-13);
    line-height: 1.5;
}

.care-ui .care-insight-row-meta {
    color: var(--care-text-secondary);
    font-size: var(--care-font-size-12);
    line-height: 1.4;
}

/* --- Skeleton ------------------------------------------------------------ */

.care-ui .care-skeleton {
    display: block;
    background: var(--care-surface-muted);
    animation: care-skeleton-pulse 1.2s ease-in-out infinite;
}

.care-ui .care-skeleton--text {
    width: 240px;
    height: var(--care-space-3);
    border-radius: var(--care-radius-sm);
}

.care-ui .care-skeleton--block {
    width: 320px;
    height: 120px;
    border-radius: var(--care-radius-md);
}

.care-ui .care-skeleton--circle {
    width: var(--care-space-10);
    height: var(--care-space-10);
    border-radius: var(--care-radius-pill);
}

@keyframes care-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .care-ui .care-skeleton {
        animation: none;
    }
}

/* --- Empty State --------------------------------------------------------- */

.care-ui .care-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--care-space-3);
    box-sizing: border-box;
    min-height: 190px;
    padding: var(--care-space-11) var(--care-space-6);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-lg);
    background: var(--care-surface-card);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--care-text-primary) 8%, transparent);
    text-align: center;
}

.care-ui .care-empty-icon,
.care-ui .care-empty-icon .oc-icon {
    width: var(--care-space-10);
    height: var(--care-space-10);
    color: var(--care-text-secondary);
}

.care-ui .care-empty-title,
.care-ui .care-empty-copy {
    margin: 0;
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
}

.care-ui .care-empty-title {
    color: var(--care-text-primary);
    font-size: var(--care-font-size-14);
    line-height: 1.5;
}

.care-ui .care-empty-copy {
    color: var(--care-text-secondary);
    font-size: var(--care-font-size-12);
    line-height: 1.4;
}

/* --- Donut --------------------------------------------------------------- */

.care-ui .care-donut {
    display: flex;
    align-items: center;
    gap: var(--care-space-6);
    min-width: 0;
}

.care-ui .care-donut-chart {
    position: relative;
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
}

.care-ui .care-donut-chart canvas {
    display: block;
    width: 150px;
    height: 150px;
}

.care-ui .care-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-align: center;
}

.care-ui .care-donut-total {
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-20);
    line-height: 1.3;
}

.care-ui .care-donut-center-label {
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-donut-legend {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.care-ui .care-donut-legend-item {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
}

.care-ui .care-donut-swatch {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: var(--care-radius-pill);
}

.care-ui .care-donut-swatch--1 { background: var(--care-data-viz-series-01); }
.care-ui .care-donut-swatch--2 { background: var(--care-data-viz-series-02); }
.care-ui .care-donut-swatch--3 { background: var(--care-data-viz-series-03); }
.care-ui .care-donut-swatch--4 { background: var(--care-data-viz-series-04); }

.care-ui .care-donut-legend-value {
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.care-ui .care-donut-legend-label {
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
}

/* --- S-32 one-off stack + demo redact ------------------------------------ */

.care-ui .care-s32-stack {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-4);
    min-width: 0;
}

.care-ui .care-s32-load {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--care-space-6);
    min-width: 0;
}

.care-ui .care-s32-trends {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    min-width: 0;
}

.care-ui .care-s32-trends-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.care-ui .care-s32-trend-row {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
}

.care-ui .care-s32-trend-label {
    width: 88px;
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
}

.care-ui .care-s32-economy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--care-space-6);
    min-height: 0;
}

.care-ui .care-s32-metric {
    display: flex;
    align-items: flex-start;
    gap: var(--care-space-2);
}

.care-ui .care-s32-metric-copy {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    min-width: 0;
}

.care-ui .care-s32-metric-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-11);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.care-ui .care-s32-metric-value {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-32);
    line-height: 1.2;
}

.care-ui .care-s32-opportunity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-3);
}

.care-ui .care-s32-opportunity-label {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
}

.care-ui .care-redact {
    display: inline-flex;
    align-items: center;
    min-height: var(--care-font-size-32);
}

.care-ui .care-redact-bar {
    display: block;
    width: 7em;
    height: 0.7em;
    border-radius: var(--care-radius-sm);
    background: var(--care-surface-muted);
    filter: blur(4px);
}

/* --- S-23 one-off stack, rows, meta -------------------------------------- */

.care-ui .care-s23-stack {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-6);
    min-width: 0;
}

.care-ui .care-s23-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--care-space-4);
    min-width: 0;
}

.care-ui .care-s23-intro-copy,
.care-ui .care-s23-intro-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.care-ui .care-s23-intro-copy {
    gap: var(--care-metrics-gap-title-body);
}

.care-ui .care-s23-intro-meta {
    align-items: flex-end;
    gap: var(--care-space-2);
}

.care-ui .care-s23-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-28) !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.care-ui .care-s23-lede,
.care-ui .care-s23-freshness,
.care-ui .care-s23-filter-summary,
.care-ui .care-s23-card-kicker,
.care-ui .care-s23-section-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s23-lede {
    font-size: var(--care-font-size-14);
}

.care-ui .care-s23-freshness,
.care-ui .care-s23-card-kicker,
.care-ui .care-s23-section-kicker {
    font-size: var(--care-font-size-12);
}

.care-ui .care-s23-card-kicker {
    padding: var(--care-space-3) var(--care-space-6) 0;
}

.care-ui .care-s23-hints {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--care-space-2);
}

.care-ui .care-s23-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--care-space-4);
    box-sizing: border-box;
    min-width: 0;
    padding: var(--care-space-4);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-card);
    background: var(--care-surface-card);
}

.care-ui .care-s23-filters .care-field {
    margin-bottom: 0;
    height: 64px;
}

.care-ui .care-s23-filter-customer {
    width: 300px;
    max-width: 100%;
}

.care-ui .care-s23-filter-status {
    width: 220px;
    max-width: 100%;
}

.care-ui .care-s23-filter-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--care-space-3);
    margin-inline-start: auto;
}

.care-ui .care-s23-filter-summary {
    min-width: 0;
    font-size: var(--care-font-size-13);
}

.care-ui .care-s23-section-head {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-1);
    min-width: 0;
}

.care-ui .care-s23-section-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.care-ui .care-s23-meta-section {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    min-width: 0;
}

.care-ui .care-s23-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--care-space-4);
    min-width: 0;
}

.care-ui .care-s23-meta-card {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    box-sizing: border-box;
    min-width: 0;
    min-height: 108px;
    padding: var(--care-space-5);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-muted);
}

.care-ui .care-s23-meta-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-2);
}

.care-ui .care-s23-meta-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.care-ui .care-s23-meta-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.care-ui .care-s23-meta-copy {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s23-table-wrap {
    min-width: 0;
    overflow-x: auto;
}

.care-ui .care-s23-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.care-ui .care-s23-table thead th {
    padding: var(--care-space-3) var(--care-space-4);
    background: var(--care-surface-muted);
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-align: start;
    text-transform: uppercase;
}

.care-ui .care-s23-phenomenon-row,
.care-ui .care-s23-evidence-row {
    border-bottom: 1px solid var(--care-border-default);
}

.care-ui .care-s23-phenomenon-row:last-child,
.care-ui .care-s23-evidence-row:last-child {
    border-bottom: 0;
}

.care-ui .care-s23-phenomenon-row {
    height: 84px;
}

.care-ui .care-s23-table .care-s23-phenomenon-row > * {
    padding: var(--care-space-4);
    vertical-align: middle;
}

.care-ui .care-s23-table .care-s23-evidence-row > * {
    height: 60px;
    padding: var(--care-space-2) var(--care-space-6);
    vertical-align: middle;
}

.care-ui .care-s23-col-customer {
    width: 180px;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
}

.care-ui .care-s23-col-phenomenon,
.care-ui .care-s23-col-subject {
    min-width: 0;
    font-weight: inherit;
    text-align: start;
}

.care-ui .care-s23-sentence,
.care-ui .care-s23-subject {
    margin: 0 0 var(--care-space-1);
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-14) !important;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s23-col-count {
    width: 90px;
}

.care-ui .care-s23-count-value,
.care-ui .care-s23-count-label {
    margin: 0;
}

.care-ui .care-s23-count-value {
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-20) !important;
    letter-spacing: 0;
    line-height: 1.3;
}

.care-ui .care-s23-count-label {
    margin-top: var(--care-space-2);
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-s23-col-lage,
.care-ui .care-s23-col-status {
    width: 130px;
}

.care-ui .care-s23-table--evidence .care-s23-col-status,
.care-ui .care-s23-table--evidence .care-s23-col-updated {
    width: 160px;
}

.care-ui .care-s23-col-updated {
    width: 140px;
}

.care-ui .care-s23-time-relative,
.care-ui .care-s23-time-absolute {
    margin: 0;
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-s23-time-relative {
    color: var(--care-text-primary);
    font-size: var(--care-font-size-13);
}

.care-ui .care-s23-time-absolute {
    margin-top: var(--care-space-2);
    color: var(--care-text-secondary);
    font-size: var(--care-font-size-12);
}

.care-ui .care-s23-phenomenon-row--skeleton {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) 140px;
    align-items: center;
    gap: var(--care-space-4);
    box-sizing: border-box;
    min-height: 84px;
    padding: var(--care-space-3) var(--care-space-6);
    border-bottom: 1px solid var(--care-border-default);
}

.care-ui .care-s23-error-actions {
    display: flex;
    justify-content: flex-start;
}

@media (max-width: 1279px) {
    .care-ui .care-s23-meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .care-ui .care-s23-col-customer,
    .care-ui .care-s23-col-count,
    .care-ui .care-s23-col-lage,
    .care-ui .care-s23-col-updated,
    .care-ui .care-s23-table--evidence .care-s23-col-status,
    .care-ui .care-s23-table--evidence .care-s23-col-updated {
        width: auto;
    }
}

/* --- Product Status Card (Figma 2351:7497) ------------------------------- */

/* !important auf font-family/-weight/-size: optcare-design.css erzwingt
   h1–h6 { font-family/-weight/-size !important } und p { font-family
   !important }. Ohne das rendern Titel in Theme-Größe und die Display-
   Labels in der Body-Schrift. Gilt für alle Kit-Textknoten unten. */
.care-ui .care-product-status {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    box-sizing: border-box;
    padding: var(--care-space-5) var(--care-space-6);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-lg);
    background: var(--care-surface-card);
}

.care-ui .care-product-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-3);
    min-width: 0;
}

.care-ui .care-product-status-title {
    min-width: 0;
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.care-ui .care-product-status-tag {
    flex: 0 0 auto;
}

.care-ui .care-product-status-summary {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-product-status-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-3);
    min-width: 0;
}

.care-ui .care-product-status-metric {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.care-ui .care-product-status-updated {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-product-status-cause {
    display: flex;
    flex-direction: column;
    gap: var(--care-metrics-gap-title-body);
    padding: var(--care-space-3);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-muted);
}

.care-ui .care-product-status-cause-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.care-ui .care-product-status-cause-copy {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

/* --- Status Detail Item (Figma 2351:7525) -------------------------------- */

.care-ui .care-status-detail {
    display: flex;
    align-items: center;
    gap: var(--care-space-3);
    box-sizing: border-box;
    padding: var(--care-space-4);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-card);
}

.care-ui .care-status-detail-accent {
    flex: 0 0 auto;
    align-self: stretch;
    width: 4px;
    border-radius: var(--care-radius-pill);
    background: var(--care-border-strong);
}

.care-ui .care-status-detail--critical .care-status-detail-accent {
    background: var(--care-status-critical-foreground);
}

.care-ui .care-status-detail--attention .care-status-detail-accent {
    background: var(--care-status-attention-foreground);
}

.care-ui .care-status-detail-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--care-metrics-gap-title-body);
    min-width: 120px;
}

.care-ui .care-status-detail-eyebrow {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: uppercase;
}

.care-ui .care-status-detail--critical .care-status-detail-eyebrow {
    color: var(--care-status-critical-foreground);
}

.care-ui .care-status-detail--attention .care-status-detail-eyebrow {
    color: var(--care-status-attention-foreground);
}

.care-ui .care-status-detail-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-status-detail-meta {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-status-detail-action {
    flex: 0 0 auto;
}

/* --- Chart Card Full (Figma 2104:2754) ----------------------------------- */

.care-ui .care-chart-card {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-lg);
    background: var(--care-surface-card);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--care-text-primary) 8%, transparent);
}

.care-ui .care-chart-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--care-space-3);
    padding: var(--care-space-5) var(--care-space-6);
    border-bottom: 1px solid var(--care-border-default);
}

.care-ui .care-chart-card-copy {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--care-metrics-gap-title-body);
    min-width: 0;
}

.care-ui .care-chart-card-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.care-ui .care-chart-card-subtitle {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-chart-card-action {
    flex: 0 0 auto;
}

.care-ui .care-chart-card-body {
    padding: var(--care-space-5) var(--care-space-6) 0;
}

.care-ui .care-chart-card-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--care-space-4);
    margin: 0;
    padding: var(--care-space-4) var(--care-space-6) var(--care-space-5);
    list-style: none;
}

.care-ui .care-chart-card-legend-item {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
}

.care-ui .care-chart-card-legend-label {
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-chart-swatch {
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    border-radius: var(--care-radius-sm);
}

.care-ui .care-chart-swatch--1 { background: var(--care-data-viz-series-01); }
.care-ui .care-chart-swatch--2 { background: var(--care-data-viz-series-02); }
.care-ui .care-chart-swatch--3 { background: var(--care-data-viz-series-03); }
.care-ui .care-chart-swatch--4 { background: var(--care-data-viz-series-04); }

/* --- S-22 Primedesk Betrieb (screen-specific) ---------------------------- */

.care-ui .care-s22-stack {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-6);
    min-width: 0;
}

.care-ui .care-s22-section,
.care-ui .care-s22-section-head,
.care-ui .care-s22-panel,
.care-ui .care-s22-panel-head,
.care-ui .care-s22-attention-list {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.care-ui .care-s22-section {
    /* Figma 02/03: Titel, Kicker und Fläche teilen 12 px. */
    gap: var(--care-space-3);
}

.care-ui .care-s22-section-head,
.care-ui .care-s22-panel-head {
    /* Title→Body-Token. Figma-Panel hat 4 px — das wirkt nur mit
       text-box-trim, der die Zeile auf 12/10 px drückt. Ohne Trim
       und mit 4 px klebt der Kicker an der Überschrift. */
    gap: var(--care-metrics-gap-title-body);
}

.care-ui .care-s22-section-title,
.care-ui .care-s22-panel-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0;
    line-height: 1.4;
}

.care-ui .care-s22-section-kicker,
.care-ui .care-s22-panel-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* Figma kpi-row: feste Vierer-Reihe, kein auto-fit-Grid. */
.care-ui .care-s22-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--care-space-4);
}

/* Figma attention-panel ist ein Screen-One-off (Radius 12 px, kein
   Card-Instance), deshalb screen-lokal und nicht als Kit-Card. */
.care-ui .care-s22-panel {
    gap: var(--care-space-4);
    box-sizing: border-box;
    padding: var(--care-space-6);
    border: 1px solid var(--care-border-default);
    border-radius: 12px;
    background: var(--care-surface-card);
}

.care-ui .care-s22-attention-list {
    gap: var(--care-space-3);
}

/* Chart.js braucht einen positionierten Container mit fester Höhe; das
   Canvas darf keine CSS-Größe erzwingen, sonst kollidiert es mit resize. */
.care-ui .care-s22-plot {
    position: relative;
    width: 100%;
    height: 246px;
}

/* Modul-lokaler Zeitraumfilter im Chart-Header (Figma 2088:48). */
.care-ui .care-s22-range {
    margin: 0;
}

.care-ui .care-s22-range-field {
    display: flex;
    margin: 0;
}

.care-ui .care-s22-range-select {
    box-sizing: border-box;
    padding: var(--care-space-2) var(--care-space-3);
    border: 1px solid var(--care-border-strong);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-muted);
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-s22-range-select:focus-visible {
    outline: 2px solid var(--care-action-secondary-focus-ring);
    outline-offset: 2px;
}

@media (max-width: 1199px) {
    .care-ui .care-s22-kpi-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .care-ui .care-s22-kpi-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .care-ui .care-status-detail {
        flex-wrap: wrap;
    }

    .care-ui .care-status-detail-action,
    .care-ui .care-status-detail-action .care-btn {
        width: 100%;
    }
}

/* --- Divider ------------------------------------------------------------- */

.care-ui .care-divider {
    flex: 1 1 auto;
    min-width: 1px;
    height: 1px;
    background: var(--care-border-default);
}

/* --- Icon Feature -------------------------------------------------------- */

.care-ui .care-icon-feature {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    min-width: 0;
}

.care-ui .care-icon-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--care-radius-lg);
    background: var(--care-brand-accent);
    color: var(--care-text-primary);
}

.care-ui .care-icon-feature-glyph .oc-icon {
    width: var(--care-space-8);
    height: var(--care-space-8);
}

.care-ui .care-icon-feature-copy {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    min-width: 0;
}

.care-ui .care-icon-feature-title,
.care-ui .care-icon-feature-body {
    margin: 0;
    overflow-wrap: break-word;
}

.care-ui .care-icon-feature-title {
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.care-ui .care-icon-feature-body {
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-13) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
}

/* --- Shell-free login (S-00 and shared login layout) --------------------- */

html:has(body.care-login-page),
.care-login-page {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--care-surface-default);
}

.care-login-page {
    display: block;
}

.care-ui.care-login {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--care-surface-default);
    color: var(--care-text-primary);
}

.care-ui .care-login-inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--care-space-4);
}

.care-ui .care-login-header {
    display: flex;
    flex: 0 0 64px;
    align-items: center;
    height: 64px;
}

.care-ui .care-login-header .care-login-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-4);
    height: 100%;
}

.care-ui .care-login-logo {
    display: block;
    width: 180px;
    height: auto;
}

.care-ui .care-login-website-label--mobile {
    display: none;
}

.care-ui .care-login-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
}

.care-ui .care-login-hero {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.care-ui .care-login-hero-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 120px;
    width: 100%;
}

.care-ui .care-login-orientation {
    display: flex;
    flex: 0 0 560px;
    flex-direction: column;
    gap: var(--care-space-10);
    width: 560px;
    max-width: 100%;
}

.care-ui .care-login-orientation-copy {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
}

/* !important: optcare-design.css sets h1/h2/h3 font-size (80/56/28) and
   body/p font-family (Arial) with !important. CARE-UI tokens must win. */
.care-ui .care-login-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-32) !important;
    letter-spacing: 0 !important;
    line-height: 1.2 !important;
}

.care-ui .care-login-lead {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-16) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

.care-ui .care-login-onboarding {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    align-items: flex-start;
}

.care-ui .care-login-onboarding-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-14) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
}

.care-ui .care-login-onboarding-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--care-space-3);
    align-items: center;
}

.care-ui .care-login-onboarding-caption {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

.care-ui .care-login-auth {
    flex: 0 0 480px;
    width: 480px;
    max-width: 100%;
}

.care-ui .care-login-card {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-6);
    box-sizing: border-box;
    width: 100%;
    max-width: 480px;
    padding: var(--care-space-6);
    overflow: clip;
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-lg);
    background: var(--care-surface-card);
}

.care-ui .care-login-main > .care-login-card {
    margin: var(--care-space-8) var(--care-space-4);
}

.care-ui .care-login-card .care-field {
    width: 100%;
    margin-bottom: 0 !important;
}

.care-ui .care-login-card [data-care-login-panel] {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    width: 100%;
}

.care-ui .care-login-card .care-field > label,
.care-ui .care-login-card .care-login-password-label > label {
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-13) !important;
}

.care-ui .care-login-credentials,
.care-ui .care-login-identifier {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui .care-login-card #login-form,
.care-ui .care-login-card #login-identifier-form,
.care-ui .care-login-card #login-code-request-form {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui .care-login-card-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-28) !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.care-ui .care-login-card-lead {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-14) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
}

.care-ui .care-login-card-heading {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-4);
    width: 100%;
}

.care-ui .care-login-card-heading--center {
    align-items: center;
    text-align: center;
}

.care-ui .care-login-stack {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    box-sizing: border-box;
    width: 100%;
    padding-block: var(--care-space-3);
    overflow: clip;
}

.care-ui .care-login-stack .care-login-credentials {
    gap: var(--care-space-4);
}

.care-ui .care-login-card .care-alert-dot {
    display: none;
}

.care-ui .care-login-password-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-metrics-gap-field-label-control);
    width: 100%;
}

.care-ui .care-login-password-label > label {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-13);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-login-password-label .care-link {
    display: inline;
    flex: 0 0 auto;
    padding: 0;
    font-size: var(--care-font-size-13) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    white-space: nowrap;
}

.care-ui .care-login-password-control {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
    box-sizing: border-box;
    width: 100%;
    height: var(--care-space-10);
    padding: 0 var(--care-space-3);
    overflow: clip;
    border: 1px solid var(--care-input-border-default);
    border-radius: var(--care-radius-md);
    background: var(--care-input-background-default);
}

.care-ui .care-login-password-control:hover {
    background: var(--care-input-background-hover);
    border-color: var(--care-input-border-hover);
}

.care-ui .care-login-password-control:focus-within {
    border-color: var(--care-input-border-focus);
    border-width: 2px;
}

.care-ui .care-field.is-invalid .care-login-password-control {
    border-color: var(--care-input-error-border);
}

.care-ui .care-login-password-control .form-control {
    flex: 1 1 auto;
    min-width: 0;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.care-ui .care-login-password-toggle {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--care-text-secondary);
    cursor: pointer;
}

.care-ui .care-login-password-toggle .oc-icon {
    width: 16px;
    height: 16px;
}

.care-ui .care-login-methods {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui .care-login-live-status {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui .care-login-live-status-label {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-weight: var(--care-font-style-body);
    font-size: var(--care-font-size-14);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-login-title--mobile {
    display: none;
}

.care-ui .care-login-actions {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    width: 100%;
}

.care-ui .care-login-card .care-submit,
.care-ui .care-login-card .care-btn {
    width: 100%;
    margin: 0 !important;
}

.care-ui .care-login-or {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
    width: 100%;
    overflow: clip;
}

.care-ui .care-login-or-label {
    flex: 0 0 auto;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

.care-ui .care-brand-microsoft {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: 7px 7px;
    gap: 2px;
    width: 16px;
    height: 16px;
}

.care-ui .care-brand-microsoft > span {
    display: block;
    width: 7px;
    height: 7px;
}

.care-ui .care-brand-microsoft > span:nth-child(1) {
    background: #f25022;
}

.care-ui .care-brand-microsoft > span:nth-child(2) {
    background: #7fba00;
}

.care-ui .care-brand-microsoft > span:nth-child(3) {
    background: #00a4ef;
}

.care-ui .care-brand-microsoft > span:nth-child(4) {
    background: #ffb900;
}

.care-ui .care-login-error-summary {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
}

.care-ui .care-login-error-summary a {
    color: var(--care-action-secondary-foreground);
}

.care-ui .care-login-card-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--care-space-2);
}

.care-ui .care-login-card-links .care-submit {
    width: auto;
}

.care-ui .care-login-card-links .care-link {
    line-height: var(--care-font-size-10);
}

.care-ui .care-login-card-links button.care-link {
    border: 0;
    padding: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
}

.care-ui .care-login-register-form {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-4);
    width: 100%;
}

.care-ui .care-login-register-form .care-field {
    padding-bottom: 6px;
}

.care-ui .care-login-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--care-space-4);
    align-items: flex-start;
    width: 100%;
}

.care-ui .care-login-name-row > .care-field {
    flex: 1 1 200px;
    min-width: min(200px, 100%);
}

.care-ui .care-login-register-summary {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-1);
    box-sizing: border-box;
    width: 100%;
    padding: var(--care-space-2) var(--care-space-3);
    border: 1px solid var(--care-status-critical-border);
    border-radius: var(--care-radius-md);
    background: var(--care-status-critical-background);
    color: var(--care-status-critical-foreground);
}

.care-ui .care-login-register-summary:focus {
    outline: 2px solid var(--care-action-primary-focus-ring);
    outline-offset: 2px;
}

.care-ui .care-login-register-summary-title,
.care-ui .care-login-register-summary-list,
.care-ui .care-login-register-summary-list li {
    margin: 0;
    padding: 0;
}

.care-ui .care-login-register-summary-title {
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0 !important;
    line-height: 1.4 !important;
}

.care-ui .care-login-register-summary-list {
    list-style: none;
}

.care-ui .care-login-register-summary-list a {
    color: inherit;
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-12);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-decoration: none;
}

.care-ui .care-login-register-summary-list a:hover,
.care-ui .care-login-register-summary-list a:focus-visible {
    text-decoration: underline;
}

.care-ui .care-login-register .care-login-card .care-alert {
    width: 100%;
}

.care-ui .care-login-register-form .care-field--check {
    width: 100%;
    min-height: var(--care-space-8);
    align-items: flex-start;
}

.care-ui .care-login-register-form .care-field--check .form-check-label {
    white-space: normal;
    overflow-wrap: anywhere;
}

html:has(.care-login-register),
html:has(.care-login-register) .care-login-page {
    height: auto;
    min-height: 100%;
}

.care-ui .care-login-busy {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-6);
}

.care-ui .care-login-busy[hidden],
.care-ui #login-card-panel[hidden] {
    display: none !important;
}

.care-ui .care-login-benefits {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 215px;
    background: var(--care-surface-card);
}

.care-ui .care-login-benefits-inner {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-4);
    padding-block: var(--care-space-6);
}

.care-ui .care-login-benefits-title {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
    font-size: var(--care-font-size-20) !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
}

.care-ui .care-login-benefit-row {
    display: flex;
    gap: var(--care-space-6);
    align-items: flex-start;
}

.care-ui .care-login-benefit-row .care-icon-feature {
    flex: 1 1 0;
    min-width: 0;
}

.care-ui .care-login-footer {
    display: flex;
    flex: 0 0 56px;
    align-items: center;
    min-height: 56px;
    background: var(--care-surface-muted);
}

.care-ui .care-login-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-4);
    min-height: 56px;
}

.care-ui .care-login-footer-copy {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
}

.care-ui .care-login-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--care-space-4);
    align-items: center;
}

.care-ui .care-login-footer-links .care-link,
.care-ui .care-login-footer-links button.care-link {
    border: 0;
    background: transparent;
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    cursor: pointer;
}

.care-ui .care-login-company-list {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui .care-login-company-choice {
    display: flex;
    align-items: center;
    gap: var(--care-space-3);
    width: 100%;
    margin: 0;
    padding: var(--care-space-4);
    border: 1px solid var(--care-border-default);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-default);
    cursor: pointer;
}

.care-ui .care-login-company-choice:hover {
    background: var(--care-surface-card);
}

.care-ui .care-login-company-choice:has(.care-login-company-choice__input:focus-visible) {
    box-shadow: 0 0 0 2px var(--care-action-primary-focus-ring);
}

.care-ui .care-login-company-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.care-ui .care-login-company-choice__name {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-weight: var(--care-font-style-display);
    font-size: var(--care-font-size-14);
    overflow-wrap: anywhere;
}

.care-ui .care-login-company-choice__icon {
    flex: 0 0 auto;
    color: var(--care-text-secondary);
}

@media (min-width: 1280px) {
    .care-ui.care-login {
        min-height: max(800px, 100vh);
        min-height: max(800px, 100dvh);
    }

    .care-ui .care-login-main {
        min-height: 465px;
    }

    .care-ui .care-login-orientation {
        order: 1;
        height: 280px;
    }

    .care-ui .care-login-register .care-login-orientation {
        height: auto;
    }

    .care-ui .care-login-auth {
        order: 2;
    }

    .care-ui .care-login-benefits {
        flex-basis: 215px;
        height: 215px;
    }
}

@media (max-width: 1279.98px) {
    .care-ui .care-login-header .care-login-inner,
    .care-ui .care-login-hero-inner,
    .care-ui .care-login-benefits-inner,
    .care-ui .care-login-footer-inner {
        max-width: 390px;
    }

    .care-ui .care-login-logo {
        width: 150px;
    }

    .care-ui .care-login-website-label--desktop {
        display: none;
    }

    .care-ui .care-login-website-label--mobile {
        display: inline;
    }

    .care-ui .care-login-title--desktop {
        display: none;
    }

    .care-ui .care-login-title--mobile {
        display: inline;
    }

    .care-ui .care-login-main {
        box-sizing: border-box;
        flex: 0 0 auto;
        min-height: 724px;
        padding: var(--care-space-8) var(--care-space-4);
    }

    .care-ui .care-login-main:has(.care-login-register) {
        min-height: 0;
    }

    .care-ui .care-login-hero-inner {
        flex-direction: column;
        align-items: center;
        gap: var(--care-space-8);
        box-sizing: border-box;
        padding-inline: var(--care-space-4);
    }

    .care-ui .care-login-orientation {
        flex: 0 0 auto;
        /* Compensates the two trimmed mobile text blocks, not a new spacing role. */
        gap: calc(var(--care-space-10) - 2px);
        width: 100%;
    }

    .care-ui .care-login-auth {
        flex: 0 0 auto;
        width: 100%;
    }

    .care-ui .care-login-card {
        max-width: none;
    }

    .care-ui .care-login-benefits {
        flex-basis: 622px;
        flex-direction: column;
        height: 622px;
        min-height: 622px;
    }

    .care-ui .care-login-benefits-inner {
        flex: 1 1 auto;
        box-sizing: border-box;
        width: 100%;
    }

    .care-ui .care-login-benefit-row {
        flex-direction: column;
        align-items: center;
        gap: var(--care-space-5);
        width: 100%;
    }

    .care-ui .care-login-benefit-row .care-icon-feature {
        flex: 0 0 auto;
        width: min(294px, 100%);
    }

    .care-ui .care-login-footer {
        flex-basis: 106px;
        min-height: 106px;
    }

    .care-ui .care-login-footer-inner {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--care-space-3);
        padding-block: var(--care-space-3);
    }
}

/* --- PD-S-00 Primedesk login (shell-free, centered card) ----------------- */

html:has(body.care-login-page--primedesk),
.care-login-page--primedesk,
.care-ui.care-login--primedesk {
    background: var(--care-surface-muted);
}

.care-ui.care-login--primedesk {
    box-sizing: border-box;
    justify-content: center;
    padding: var(--care-space-12);
}

.care-ui.care-login--primedesk .care-login-main {
    flex: 1 1 auto;
    gap: var(--care-space-8);
}

.care-ui.care-login--primedesk .care-login-logo {
    width: 220px;
}

.care-ui.care-login--primedesk .care-login-card {
    max-width: 440px;
    padding: var(--care-space-10);
    /* Figma Auth / Login Card elevation; 18/40 have no spacing token. */
    box-shadow: 0 18px 40px color-mix(in srgb, var(--care-text-primary) 8%, transparent);
}

.care-ui.care-login--primedesk .care-login-main > .care-login-card {
    margin: 0;
}

.care-ui.care-login--primedesk .care-login-credentials {
    gap: var(--care-space-3);
}

.care-ui.care-login--primedesk .care-login-or-label {
    font-family: var(--care-font-family-display) !important;
    font-weight: var(--care-font-style-display) !important;
}

.care-ui.care-login--primedesk .care-field--check {
    min-height: var(--care-space-8);
}

.care-ui.care-login--primedesk .care-field--check .form-check-label {
    font-size: var(--care-font-size-13);
}

.care-ui.care-login--primedesk .care-login-tenant-heading {
    gap: var(--care-space-2);
    align-items: flex-start;
    text-align: start;
}

.care-ui.care-login--primedesk .care-login-tenant-list {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

.care-ui.care-login--primedesk .care-login-tenant-option {
    display: flex;
    align-items: center;
    gap: var(--care-space-3);
    box-sizing: border-box;
    width: 100%;
    min-height: 60px;
    margin: 0;
    padding: 10px var(--care-space-3);
    border: 1px solid var(--care-action-secondary-border);
    border-radius: var(--care-radius-md);
    background: var(--care-surface-card);
    color: inherit;
    text-align: start;
    cursor: pointer;
}

.care-ui.care-login--primedesk .care-login-tenant-option:hover {
    background: var(--care-surface-muted);
}

.care-ui.care-login--primedesk .care-login-tenant-option:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--care-action-secondary-focus-ring);
}

.care-ui.care-login--primedesk .care-login-tenant-option__icon {
    flex: 0 0 var(--care-space-5);
    width: var(--care-space-5);
    height: var(--care-space-5);
    color: var(--care-text-primary);
}

.care-ui.care-login--primedesk .care-login-tenant-option__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--care-space-1);
    min-width: 0;
}

.care-ui.care-login--primedesk .care-login-tenant-option__name {
    color: var(--care-action-secondary-foreground);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-14) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
    overflow-wrap: anywhere;
}

.care-ui.care-login--primedesk .care-login-tenant-option__slug {
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body) !important;
    font-weight: var(--care-font-style-body) !important;
    font-size: var(--care-font-size-12) !important;
    letter-spacing: 0.02em !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

.care-ui.care-login--primedesk .care-login-tenant-divider {
    flex: 0 0 auto;
    width: 100%;
}

.care-ui.care-login--primedesk .care-login-tenant-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* S-34 Demo Abschluss — Figma Screen Composition 4791:262 / 4792:33129 */
.care-ui .care-s34 {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-10);
    width: 100%;
    padding: var(--care-space-10) var(--care-space-12);
}

.care-ui .care-s34-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-space-4);
    width: 100%;
}

.care-ui .care-s34-kicker {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-11);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
}

.care-ui .care-s34-title {
    margin: 0;
    width: 100%;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-size: var(--care-font-size-40);
    font-weight: var(--care-font-style-display);
    letter-spacing: 0;
    line-height: 1.2;
}

.care-ui .care-s34-columns {
    display: flex;
    align-items: flex-start;
    gap: var(--care-space-16);
    width: 100%;
}

.care-ui .care-s34-testimonial,
.care-ui .care-s34-form,
.care-ui .care-s34-confirm {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--care-space-5);
    min-width: 0;
}

.care-ui .care-s34-testimonial {
    flex: 0 0 390px;
    width: 390px;
}

.care-ui .care-s34-form,
.care-ui .care-s34-confirm {
    flex: 1 1 auto;
}

.care-ui .care-s34-quote,
.care-ui .care-s34-lead {
    margin: 0;
    width: 100%;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-16);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-s34-lead {
    color: var(--care-text-secondary);
}

.care-ui .care-s34-attribution {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-1);
    width: 100%;
}

.care-ui .care-s34-attribution-name {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-size: var(--care-font-size-14);
    font-weight: var(--care-font-style-display);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s34-attribution-role,
.care-ui .care-s34-hint,
.care-ui .care-s34-legal {
    margin: 0;
    color: var(--care-text-secondary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-12);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.care-ui .care-s34-known {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-3);
    width: 100%;
    padding-top: var(--care-space-6);
}

.care-ui .care-s34-known-body {
    margin: 0;
    width: 100%;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-14);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s34-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}

.care-ui .care-s34-field > label {
    margin: 0;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-size: var(--care-font-size-14);
    font-weight: var(--care-font-style-display);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s34-field.required > label::after {
    content: " *";
}

.care-ui .care-s34-field .form-control,
.care-ui .care-s34-field .form-select {
    padding: 0 0 6px;
    border: 0;
    border-bottom: 1px solid var(--care-border-default);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-14);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.5;
}

.care-ui .care-s34-field textarea.form-control {
    min-height: 38px;
    resize: vertical;
}

.care-ui .care-s34-field .form-control::placeholder,
.care-ui .care-s34-field .form-select:invalid {
    color: var(--care-text-secondary);
}

.care-ui .care-s34-field .form-control:focus,
.care-ui .care-s34-field .form-select:focus {
    border-bottom-color: var(--care-text-primary);
    box-shadow: none;
    outline: 2px solid var(--care-action-secondary-focus-ring);
    outline-offset: 2px;
}

.care-ui .care-s34-field.is-invalid .form-control,
.care-ui .care-s34-field.is-invalid .form-select {
    border-bottom-color: var(--care-status-critical-foreground);
}

.care-ui .care-s34-actions {
    display: flex;
    align-items: center;
    gap: var(--care-space-4);
    width: 100%;
}

.care-ui .care-s34-actions .care-s34-hint {
    flex: 1 1 auto;
    min-width: 0;
}

.care-ui .care-s34-legal {
    width: 100%;
}

.care-ui .care-s34-success-status {
    display: flex;
    align-items: center;
    gap: var(--care-space-2);
    margin: 0;
    color: var(--care-indicator-success-foreground);
    font-family: var(--care-font-family-body);
    font-size: var(--care-font-size-11);
    font-weight: var(--care-font-style-body);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
}

.care-ui .care-s34-success-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: var(--care-radius-pill);
    background: var(--care-indicator-success-foreground);
}

.care-ui .care-s34-confirm-title {
    margin: 0;
    width: 100%;
    color: var(--care-text-primary);
    font-family: var(--care-font-family-display);
    font-size: var(--care-font-size-32);
    font-weight: var(--care-font-style-display);
    letter-spacing: 0;
    line-height: 1.2;
}

.care-ui .care-s34-divider {
    width: 100%;
    margin: 0;
    border: 0;
    border-top: 1px solid var(--care-border-default);
}

.care-ui .care-s34-summary {
    display: flex;
    flex-direction: column;
    gap: var(--care-space-2);
    width: 100%;
}

@media (max-width: 900px) {
    .care-ui .care-s34 {
        padding: var(--care-space-6) 0;
    }

    .care-ui .care-s34-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .care-ui .care-s34-columns {
        flex-direction: column;
    }

    .care-ui .care-s34-testimonial {
        flex-basis: auto;
        width: 100%;
    }

    .care-ui .care-s34-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}