/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-d8y6m18h7o] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-app);
}

.app-header[b-d8y6m18h7o] {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--bg-border);
    backdrop-filter: blur(8px);
}

.app-header-left[b-d8y6m18h7o] {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.app-header-right[b-d8y6m18h7o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* ===== Benutzer-Menü (Avatar + Name → Dropdown) ===== */
.user-menu[b-d8y6m18h7o] {
    position: relative;
}

.user-chip[b-d8y6m18h7o] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 999px;
    max-width: 240px;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: background 0.12s ease, border-color 0.12s ease;
}

.user-chip:hover[b-d8y6m18h7o] {
    background: var(--bg-surface);
    border-color: var(--text-tertiary);
}

.user-chip-arrow[b-d8y6m18h7o] {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.user-menu-backdrop[b-d8y6m18h7o] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.user-menu-list[b-d8y6m18h7o] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: 200px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
}

.user-menu-item[b-d8y6m18h7o] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.user-menu-item:hover[b-d8y6m18h7o] {
    background: var(--bg-elevated);
}

.user-menu-item svg[b-d8y6m18h7o] {
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.user-menu-item-danger:hover[b-d8y6m18h7o] {
    background: var(--color-pink-50);
    color: var(--danger);
}

.user-menu-item-danger:hover svg[b-d8y6m18h7o] {
    color: var(--danger);
}

[data-theme="dark"] .user-menu-item-danger:hover[b-d8y6m18h7o] {
    background: var(--color-pink-800);
    color: var(--color-pink-50);
}

[data-theme="dark"] .user-menu-item-danger:hover svg[b-d8y6m18h7o] {
    color: var(--color-pink-50);
}

/* Workspace-Umschalter im UserMenü */
.user-menu-section[b-d8y6m18h7o] {
    padding: 8px 12px 4px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    cursor: default;
}

.user-menu-divider[b-d8y6m18h7o] {
    height: 1px;
    margin: 4px 6px;
    background: var(--bg-border);
}

.user-menu-item-active[b-d8y6m18h7o] {
    background: var(--bg-elevated);
    font-weight: 600;
}

.user-menu-item .user-menu-check[b-d8y6m18h7o] {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--text-primary);
}

/* Workspace-Logo-Thumbnail im Umschalter (ersetzt das Würfel-Symbol, wenn vorhanden) */
.user-menu-ws-logo[b-d8y6m18h7o] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 5px;
    object-fit: contain;
    background: #FFFFFF;
    border: 1px solid var(--bg-border);
}

.user-chip .avatar[b-d8y6m18h7o] {
    width: 30px;
    height: 30px;
    font-size: 12px;
}

.user-chip-name[b-d8y6m18h7o] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-main[b-d8y6m18h7o] {
    flex: 1;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
}

/* ===== Responsive ===== */
@media (max-width: 640px) {
    .app-header[b-d8y6m18h7o] {
        padding: 10px 14px;
    }

    .user-chip-name[b-d8y6m18h7o] {
        display: none;
    }

    .user-chip[b-d8y6m18h7o] {
        padding: 4px;
    }

    .app-main[b-d8y6m18h7o] {
        padding: 14px;
    }
}
/* /Components/Pages/ContainerEdit.razor.rz.scp.css */
.container-edit[b-7eqsph5uhp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.edit-header[b-7eqsph5uhp] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-title[b-7eqsph5uhp] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.edit-card[b-7eqsph5uhp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.uid-display[b-7eqsph5uhp] {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 10px 14px;
    letter-spacing: 0.5px;
    user-select: all;
}

/* ===== Feature-Schalter (Container-Features) ===== */
.feature-toggles[b-7eqsph5uhp] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.feature-toggle[b-7eqsph5uhp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: 1;
    min-width: 220px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1.5px solid var(--bg-border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.feature-toggle:hover[b-7eqsph5uhp] {
    border-color: var(--text-tertiary);
}

.feature-toggle-on[b-7eqsph5uhp] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.feature-toggle input[type="checkbox"][b-7eqsph5uhp] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.feature-toggle-body[b-7eqsph5uhp] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.feature-toggle-title[b-7eqsph5uhp] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.feature-toggle-desc[b-7eqsph5uhp] {
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.field-row[b-7eqsph5uhp] {
    display: flex;
    gap: 16px;
}

.field-row > .field[b-7eqsph5uhp] {
    flex: 1;
    min-width: 0;
}

.color-picker[b-7eqsph5uhp] {
    display: flex;
    align-items: stretch;
    gap: 10px;
}

.color-picker .input[b-7eqsph5uhp] {
    flex: 1;
}

/* ===== Icon-Picker (Grid aus Server-SVGs) ===== */
.icon-grid[b-7eqsph5uhp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
}

.icon-cell[b-7eqsph5uhp] {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    padding: 5px;
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.icon-cell:hover[b-7eqsph5uhp] {
    border-color: var(--accent-primary);
}

.icon-cell-selected[b-7eqsph5uhp] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px var(--accent-primary-light);
}

.color-preview[b-7eqsph5uhp] {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 10px;
    border: 1px solid var(--bg-border);
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08);
}

.edit-textarea[b-7eqsph5uhp] {
    resize: vertical;
    min-height: 120px;
    font-family: var(--font-primary);
    line-height: 1.45;
}

.edit-actions[b-7eqsph5uhp] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

.edit-delete-btn[b-7eqsph5uhp] {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
}

.edit-delete-btn svg[b-7eqsph5uhp] { width: 16px; height: 16px; }
.edit-delete-btn:hover[b-7eqsph5uhp] { background: var(--danger); color: #ffffff; }

/* ===== Standort-Autocomplete ===== */
.autocomplete[b-7eqsph5uhp] {
    position: relative;
}

.autocomplete .input[b-7eqsph5uhp] {
    padding-right: 36px;
}

.autocomplete-clear[b-7eqsph5uhp] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}

.autocomplete-clear:hover[b-7eqsph5uhp] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.autocomplete-list[b-7eqsph5uhp] {
    position: absolute;
    z-index: 20;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.autocomplete-item[b-7eqsph5uhp] {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: var(--text-primary);
}

.autocomplete-item:hover[b-7eqsph5uhp] {
    background: var(--bg-elevated);
}

.autocomplete-item-title[b-7eqsph5uhp] {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
}

.autocomplete-item-meta[b-7eqsph5uhp] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

@media (max-width: 640px) {
    .field-row[b-7eqsph5uhp] {
        flex-direction: column;
    }
    .edit-actions[b-7eqsph5uhp] {
        flex-direction: column-reverse;
    }
    .edit-actions .btn[b-7eqsph5uhp] {
        width: 100%;
    }
    .edit-title[b-7eqsph5uhp] {
        font-size: 18px;
    }
}
/* /Components/Pages/DingsEdit.razor.rz.scp.css */
.dings-edit[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== Header ===== */
.edit-header[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-title-block[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.edit-title[b-re453osyvn] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.edit-subtitle[b-re453osyvn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
    min-width: 0;
}

.edit-subtitle-label[b-re453osyvn] {
    font-style: italic;
}

.edit-subtitle-glyph[b-re453osyvn] {
    font-size: 14px;
    line-height: 1;
    color: var(--text-secondary);
}

.edit-subtitle-name[b-re453osyvn] {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „bei <Standort>" — der Edit-View ist immer einspaltig/Vollbild, daher stets sichtbar. */
.edit-subtitle-standort[b-re453osyvn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* ===== Auto-Suggest (für Kategorie) ===== */
.autosuggest[b-re453osyvn] {
    position: relative;
}

.autosuggest-list[b-re453osyvn] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    max-height: 240px;
    overflow-y: auto;
}

.autosuggest-option[b-re453osyvn] {
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.autosuggest-option:hover[b-re453osyvn] {
    background: var(--bg-elevated);
}

.autosuggest-backdrop[b-re453osyvn] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Datenblatt-Verknüpfung ===== */
.datasheet-list[b-re453osyvn] {
    /* Auto-Suggest mit etwas mehr Höhe als die einfache Kategorie-Liste */
    max-height: 320px;
}

.autosuggest-option.is-empty[b-re453osyvn] {
    color: var(--text-tertiary);
    cursor: default;
    font-style: italic;
}

.autosuggest-option.is-empty:hover[b-re453osyvn] {
    background: transparent;
}

.autosuggest-option.is-error[b-re453osyvn] {
    color: var(--danger);
    font-style: normal;
}

.datasheet-option[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Varianten-Thumbnail im Auto-Suggest (weißer Grund, da Produktbilder oft transparent/weiß sind) */
.datasheet-option-img[b-re453osyvn] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    border: 1px solid var(--bg-border);
}

.datasheet-option-main[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.datasheet-option-title[b-re453osyvn] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datasheet-option-typ[b-re453osyvn] {
    margin-left: 6px;
    font-weight: 500;
    color: var(--text-secondary);
}

.datasheet-option-cat[b-re453osyvn] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datasheet-link[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
}

.datasheet-link-icon[b-re453osyvn] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--bg-elevated);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    flex-shrink: 0;
}

.datasheet-link-icon svg[b-re453osyvn] {
    width: 18px;
    height: 18px;
}

.datasheet-link-body[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.datasheet-link-title[b-re453osyvn] {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.datasheet-link-uid[b-re453osyvn] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ===== Edit-Card ===== */
.edit-card[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-row[b-re453osyvn] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
}

.field-row-2[b-re453osyvn] {
    grid-template-columns: 1fr 1fr;
}

.field-row-3[b-re453osyvn] {
    grid-template-columns: 1fr 1fr 1fr;
}

/* Flexible Feld-Zeile: Felder teilen sich die Breite gleichmäßig und brechen bei
   wenig Platz um. Anders als das starre Grid bleibt die Aufteilung korrekt, wenn
   einzelne Felder (z.B. bei der Art „Einfach") gar nicht gerendert werden. */
.field-flex[b-re453osyvn] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
}

.field-flex > .field[b-re453osyvn] {
    flex: 1 1 220px;
    min-width: 0;
}

@media (max-width: 720px) {
    .field-row[b-re453osyvn],
    .field-row-2[b-re453osyvn],
    .field-row-3[b-re453osyvn] {
        grid-template-columns: 1fr;
    }
}

/* ===== Audit-Block ===== */
.audit-block[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 12px;
}

/* ===== Datenfelder-Editor ===== */
.datafields-header[b-re453osyvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.btn-add-field[b-re453osyvn] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    cursor: pointer;
}

.btn-add-field svg[b-re453osyvn] { width: 14px; height: 14px; }
.btn-add-field:hover[b-re453osyvn] { border-color: var(--accent-primary); color: var(--accent-primary); }

.datafields-empty[b-re453osyvn] {
    font-size: 13px;
    color: var(--text-tertiary);
    padding: 2px 0;
}

.datafields-list[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.datafield-row[b-re453osyvn] {
    display: grid;
    grid-template-columns: 1fr 1.3fr 110px 1.3fr auto;
    gap: 8px;
    align-items: center;
}

.datafield-remove[b-re453osyvn] { flex: none; }

@media (max-width: 640px) {
    .datafield-row[b-re453osyvn] { grid-template-columns: 1fr 1fr; }
}

.audit-toggle[b-re453osyvn] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    color: var(--text-primary);
    font-size: 14px;
}

.audit-toggle input[type="checkbox"][b-re453osyvn] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.audit-toggle-text[b-re453osyvn] {
    font-weight: 500;
}

/* Eingabe-Fehler */
.input-invalid[b-re453osyvn] {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--color-pink-50);
}

[data-theme="dark"] .input-invalid[b-re453osyvn] {
    box-shadow: 0 0 0 3px var(--color-pink-800);
}

/* Hinweis-Zeile unter einem Field */
.field-hint[b-re453osyvn] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin-top: 2px;
}

.field-hint code[b-re453osyvn] {
    background: var(--bg-elevated);
    border-radius: 3px;
    padding: 1px 4px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-secondary);
}

/* Next-Audit-Zeile: Date-Input + Lock-Button */
.next-audit-row[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.next-audit-row .input[b-re453osyvn] {
    flex: 1;
}

.next-audit-btn[b-re453osyvn] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

.lock-badge[b-re453osyvn] {
    margin-left: 4px;
    font-size: 11px;
}

/* ===== Bilder: 3 Rahmen (Hauptbild / Einbausituation / Typenschild) mit Drag&Drop ===== */
.image-frames[b-re453osyvn] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.image-frame[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.image-frame-label[b-re453osyvn] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-tertiary);
}

.image-drop[b-re453osyvn] {
    width: 130px;
    height: 130px;
    border: 1px solid var(--bg-border);
    border-radius: 12px;
    /* Weißer Hintergrund — Bild proportional eingepasst, nichts abgeschnitten */
    background: #FFFFFF;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Leerer Rahmen (kein Bild): gestrichelter Platzhalter-Look auf Surface-Hintergrund */
.image-drop-empty[b-re453osyvn] {
    border-style: dashed;
    background: var(--bg-surface);
}

/* Während ein Bild über dem Rahmen schwebt */
.image-drop.imgdrop-over[b-re453osyvn] {
    border-color: var(--accent-primary);
    border-style: solid;
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

[b-re453osyvn] .image-frame-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
    display: block;
    pointer-events: none;   /* Drag-Events sollen den Rahmen treffen, nicht das Bild */
}

.image-frame-placeholder[b-re453osyvn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 11px;
    line-height: 1.3;
    pointer-events: none;   /* Drop-Events erreichen den .image-drop-Container */
}

.image-frame-placeholder svg[b-re453osyvn] {
    width: 30px;
    height: 30px;
}

/* ===== Markdown-Editor ===== */
.markdown-editor[b-re453osyvn] {
    border-radius: 10px;
    overflow: hidden;
}

/* Syncfusion-Editor an Theme angleichen — ::deep, weil Syncfusion eigene Wurzel hat */
[b-re453osyvn] .e-richtexteditor {
    border-radius: 10px;
    border-color: var(--bg-border);
    background: var(--bg-surface);
}

[b-re453osyvn] .e-richtexteditor .e-rte-content {
    background: var(--bg-surface);
    color: var(--text-primary);
}

[b-re453osyvn] .e-richtexteditor .e-rte-content .e-content {
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-primary);
}

[b-re453osyvn] .e-richtexteditor .e-toolbar {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--bg-border);
}

/* ===== Chip-Box (Outlook-Style) ===== */
.chipbox[b-re453osyvn] {
    position: relative;
}

.chipbox-inner[b-re453osyvn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    min-height: 44px;
    cursor: text;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.chipbox.is-open .chipbox-inner[b-re453osyvn],
.chipbox-inner:focus-within[b-re453osyvn] {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-light);
}

.chipbox-input[b-re453osyvn] {
    flex: 1;
    min-width: 120px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 14px;
    padding: 4px 6px;
}

.chipbox-input[b-re453osyvn]::placeholder {
    color: var(--text-tertiary);
}

.chip[b-re453osyvn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

.chip-text[b-re453osyvn] {
    white-space: nowrap;
}

.chip-remove[b-re453osyvn] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.18);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.1s ease;
}

.chip-remove:hover[b-re453osyvn] {
    background: rgba(0, 0, 0, 0.32);
}

.chip-remove svg[b-re453osyvn] {
    width: 12px;
    height: 12px;
}

.chip-hashtag[b-re453osyvn] {
    background: var(--accent-primary);
}

[data-theme="light"] .chip-hashtag[b-re453osyvn] {
    background: var(--color-blue-100);
    color: var(--color-blue-900);
}

[data-theme="light"] .chip-hashtag .chip-remove[b-re453osyvn] {
    background: rgba(0, 0, 0, 0.08);
    color: var(--color-blue-900);
}

[data-theme="light"] .chip-hashtag .chip-remove:hover[b-re453osyvn] {
    background: rgba(0, 0, 0, 0.16);
}

/* ===== Dropdown unter der Chipbox ===== */
.chipbox-dropdown[b-re453osyvn] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    max-height: 280px;
    overflow-y: auto;
}

.chipbox-dropdown-option[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.chipbox-dropdown-option:hover[b-re453osyvn] {
    background: var(--bg-elevated);
}

.chipbox-dropdown-empty[b-re453osyvn] {
    padding: 10px 12px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.color-swatch[b-re453osyvn] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .color-swatch[b-re453osyvn] {
    border-color: rgba(255, 255, 255, 0.12);
}

.chipbox-backdrop[b-re453osyvn] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Aktionen ===== */
.edit-actions[b-re453osyvn] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* Lösch-Button (nur beim Bearbeiten) — links abgesetzt von Abbrechen/Speichern */
.edit-delete-btn[b-re453osyvn] {
    margin-right: auto;
    background: var(--danger);
    color: #fff;
    border: none;
}

.edit-delete-btn:hover:not(:disabled)[b-re453osyvn] {
    filter: brightness(1.08);
}

.edit-delete-btn svg[b-re453osyvn] {
    width: 16px;
    height: 16px;
}

/* ===== Art (DingsType) Dropdown ===== */
select.input[b-re453osyvn] {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8a8a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 34px;
}

/* ===== Codes (QR) ===== */
.codes-row[b-re453osyvn] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.codes-input[b-re453osyvn] {
    flex: 1;
    min-width: 0;
}

.codes-scan-btn[b-re453osyvn] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.codes-scan-btn svg[b-re453osyvn] {
    width: 20px;
    height: 20px;
}

/* ===== Sensible Information (SecureInfo) ===== */
.secure-row[b-re453osyvn] {
    display: flex;
    align-items: flex-start;   /* mehrzeiliges Textarea: Toggle-Button oben ausrichten */
    gap: 8px;
}

.secure-input[b-re453osyvn] {
    flex: 1;
    min-width: 0;
    letter-spacing: 0.04em;
}

/* Mehrzeilig editierbar — vertikal vergrößerbar, gleicher Look wie .input */
textarea.secure-input[b-re453osyvn] {
    resize: vertical;
    min-height: 84px;
    line-height: 1.5;
    font-family: var(--font-primary);
}

/* Verborgen-Zustand: Zeichen maskieren (Chromium/Edge — der Zieltyp dieser App).
   Beim Anzeigen (Klartext) wird die Klasse entfernt. */
.secure-input-masked[b-re453osyvn] {
    -webkit-text-security: disc;
}

.secure-toggle-btn[b-re453osyvn] {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
}

.secure-toggle-btn svg[b-re453osyvn] {
    width: 20px;
    height: 20px;
}

/* ===== QR-Scanner-Overlay ===== */
.qr-overlay[b-re453osyvn] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
    padding: 16px;
}

.qr-box[b-re453osyvn] {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 16px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.qr-box-head[b-re453osyvn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--bg-border);
}

.qr-video-wrap[b-re453osyvn] {
    position: relative;
    background: #000;
    aspect-ratio: 4 / 3;
}

.qr-video[b-re453osyvn] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.qr-frame[b-re453osyvn] {
    position: absolute;
    inset: 18%;
    border: 3px solid rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
    pointer-events: none;
}

.qr-box-hint[b-re453osyvn] {
    padding: 12px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}

/* ===== Empty-State ===== */
.empty-state[b-re453osyvn] {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 14px;
}

.empty-state.error[b-re453osyvn] { color: var(--danger); border-color: var(--color-pink-400); }
/* /Components/Pages/DingsView.razor.rz.scp.css */
/* Wurde zu Wrapper um WorkspaceLayout — alle Detail-Styles leben in
   DingsDetailPanel.razor.css, alle Preview-Styles in FilePreviewPanel.razor.css. */
/* /Components/Pages/Home.razor.rz.scp.css */
/* Home wurde zum dünnen Wrapper um WorkspaceLayout — alle Tile-/Listen-Styles
   leben jetzt in ContainerListPanel.razor.css. */
/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-i0irgidc7m] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-app);
    position: relative;
}

.login-theme-toggle[b-i0irgidc7m] {
    position: absolute;
    top: 20px;
    right: 20px;
}

.login-card[b-i0irgidc7m] {
    width: 100%;
    max-width: 400px;
    padding: 36px 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
}

.login-form[b-i0irgidc7m] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-btn[b-i0irgidc7m] {
    margin-top: 8px;
    padding: 12px 16px;
    font-size: 15px;
}

@media (max-width: 480px) {
    .login-card[b-i0irgidc7m] {
        padding: 28px 22px 24px;
        border-radius: 12px;
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
.settings-page[b-x3umdp4h3u] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== Header ===== */
.settings-header[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings-title[b-x3umdp4h3u] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== Tabs ===== */
.tabs[b-x3umdp4h3u] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bg-border);
}

.tab[b-x3umdp4h3u] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover[b-x3umdp4h3u] {
    color: var(--text-primary);
}

.tab-active[b-x3umdp4h3u] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-panel[b-x3umdp4h3u] {
    padding-top: 4px;
}

/* ===== Labels-Register ===== */
.labels-tab[b-x3umdp4h3u] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.labels-toolbar[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.labels-toolbar-info[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
}

.labels-count[b-x3umdp4h3u] {
    font-size: 13px;
    color: var(--text-tertiary);
}

.labels-info[b-x3umdp4h3u] {
    background: var(--accent-secondary-light);
    color: var(--accent-secondary-hover);
    border: 1px solid var(--accent-secondary-border);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

.labels-error[b-x3umdp4h3u] {
    background: var(--color-pink-50);
    color: var(--color-pink-900);
    border: 1px solid var(--color-pink-100);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
}

[data-theme="dark"] .labels-error[b-x3umdp4h3u] {
    background: var(--color-pink-800);
    color: var(--color-pink-50);
    border-color: var(--color-pink-600);
}

/* ===== Editor ===== */
.label-editor-title[b-x3umdp4h3u] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.label-editor-fields[b-x3umdp4h3u] {
    display: grid;
    grid-template-columns: 2fr 1.2fr;
    gap: 14px 18px;
}

.label-editor-fields .field:nth-child(3)[b-x3umdp4h3u] {
    grid-column: 1 / -1;
}

.label-editor-actions[b-x3umdp4h3u] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

/* ===== Farb-Dropdown ===== */
.color-dropdown[b-x3umdp4h3u] {
    position: relative;
}

.color-dropdown-trigger[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    height: 44px;
    padding: 0 12px;
}

.color-dropdown-caption[b-x3umdp4h3u] {
    flex: 1;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.color-dropdown-arrow[b-x3umdp4h3u] {
    width: 16px;
    height: 16px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Farb-Quadrat — vor jedem Eintrag und im Trigger */
.color-swatch[b-x3umdp4h3u] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .color-swatch[b-x3umdp4h3u] {
    border-color: rgba(255, 255, 255, 0.12);
}

/* „Standard"-Eintrag: diagonale Schraffur, damit klar wird = keine Farbe */
.color-swatch-default[b-x3umdp4h3u] {
    background:
        linear-gradient(135deg,
            transparent calc(50% - 1px),
            var(--text-tertiary) calc(50% - 1px),
            var(--text-tertiary) calc(50% + 1px),
            transparent calc(50% + 1px)),
        var(--bg-surface);
}

/* Popup-Liste */
.color-dropdown-list[b-x3umdp4h3u] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
    max-height: 320px;
    overflow-y: auto;
}

.color-dropdown-option[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.color-dropdown-option:hover[b-x3umdp4h3u] {
    background: var(--bg-elevated);
}

.color-dropdown-option.is-selected[b-x3umdp4h3u] {
    background: var(--accent-primary-light);
    color: var(--accent-primary-hover);
    font-weight: 500;
}

/* Backdrop fängt Outside-Clicks */
.color-dropdown-backdrop[b-x3umdp4h3u] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

/* ===== Labels-Liste ===== */
.labels-list[b-x3umdp4h3u] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.labels-row[b-x3umdp4h3u] {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 12px;
}

.labels-row-meta[b-x3umdp4h3u] {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.labels-row-actions[b-x3umdp4h3u] {
    display: inline-flex;
    gap: 6px;
}

/* Label-Chip — wird auch im Editor-Vorschauteil benutzt */
.label-chip[b-x3umdp4h3u] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.4;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

/* Lösch-Button im Hover rötlich */
[b-x3umdp4h3u] .btn-icon-danger:hover:not(:disabled) {
    color: var(--danger);
    border-color: var(--color-pink-200);
    background: var(--color-pink-50);
}

[data-theme="dark"][b-x3umdp4h3u]  .btn-icon-danger:hover:not(:disabled) {
    background: var(--color-pink-800);
    border-color: var(--color-pink-600);
    color: var(--color-pink-50);
}

/* ===== Standorte-Register ===== */
.standort-search[b-x3umdp4h3u] {
    position: relative;
}

.standort-search-icon[b-x3umdp4h3u] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.standort-search-input[b-x3umdp4h3u] {
    padding-left: 42px;
}

.standort-editor-fields[b-x3umdp4h3u] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 18px;
}

/* Adresse über die volle Breite */
.standort-field-wide[b-x3umdp4h3u] {
    grid-column: 1 / -1;
}

.standort-textarea[b-x3umdp4h3u] {
    resize: vertical;
    min-height: 56px;
    line-height: 1.4;
    font-family: var(--font-primary);
}

.standort-row[b-x3umdp4h3u] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 12px;
}

.standort-row-main[b-x3umdp4h3u] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.standort-row-name[b-x3umdp4h3u] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standort-row-sub[b-x3umdp4h3u] {
    font-size: 12.5px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standort-row-contact[b-x3umdp4h3u] {
    font-size: 12px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===== Empty-State (lokal, nicht über Home.razor.css erbbar) ===== */
.empty-state[b-x3umdp4h3u] {
    padding: 36px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 14px;
}

/* ===== Darstellung-Register ===== */
.appearance-tab[b-x3umdp4h3u] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.appearance-section-title[b-x3umdp4h3u] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.appearance-hint[b-x3umdp4h3u] {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.theme-options[b-x3umdp4h3u] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.theme-option[b-x3umdp4h3u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 130px;
    padding: 18px 12px;
    background: var(--bg-card);
    border: 1.5px solid var(--bg-border);
    border-radius: 14px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.theme-option:hover[b-x3umdp4h3u] {
    border-color: var(--text-tertiary);
    color: var(--text-primary);
}

.theme-option-icon svg[b-x3umdp4h3u] {
    width: 26px;
    height: 26px;
}

.theme-option-active[b-x3umdp4h3u] {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-primary-light);
}

/* ===== Mobile ===== */
@media (max-width: 640px) {
    .theme-options[b-x3umdp4h3u] {
        gap: 8px;
    }
    .theme-option[b-x3umdp4h3u] {
        flex: 1;
        min-width: 90px;
        width: auto;
    }
    .label-editor-fields[b-x3umdp4h3u] {
        grid-template-columns: 1fr;
    }
    .label-editor-fields .field:nth-child(3)[b-x3umdp4h3u] {
        grid-column: auto;
    }
    .labels-row[b-x3umdp4h3u] {
        grid-template-columns: 1fr auto;
    }
    .labels-row-meta[b-x3umdp4h3u] {
        grid-column: 1 / -1;
        order: 3;
    }
    .standort-editor-fields[b-x3umdp4h3u] {
        grid-template-columns: 1fr;
    }
}

/* Workspace-Register */
.workspace-row[b-x3umdp4h3u] {
    grid-template-columns: auto 1fr auto;
}

.workspace-row-logo[b-x3umdp4h3u] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1px solid var(--bg-border);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.workspace-row-logo img[b-x3umdp4h3u] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #FFFFFF;
}

.workspace-row-logo svg[b-x3umdp4h3u] {
    width: 22px;
    height: 22px;
    color: var(--text-tertiary);
}

/* Aktiver Workspace farblich hervorgehoben */
.workspace-row-active[b-x3umdp4h3u] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.workspace-row-titleline[b-x3umdp4h3u] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.workspace-active-badge[b-x3umdp4h3u] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--accent-primary);
    color: #FFFFFF;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workspace-logo-preview[b-x3umdp4h3u] {
    display: block;
    max-width: 160px;
    max-height: 96px;
    margin-bottom: 8px;
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    object-fit: contain;
    background: var(--bg-elevated);
}

.workspace-recompute-btn[b-x3umdp4h3u] {
    margin-left: 10px;
    padding: 4px 10px;
    width: auto;
    font-size: 12px;
}

/* ===== Benutzer-Register ===== */
.user-field-block[b-x3umdp4h3u] {
    margin-top: 16px;
}

.user-flags[b-x3umdp4h3u] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 4px;
}

.user-ws-options[b-x3umdp4h3u] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
}

.user-check[b-x3umdp4h3u] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: var(--text-primary);
    cursor: pointer;
}

.user-check input[b-x3umdp4h3u] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-primary);
}
/* /Components/Pages/StandortEdit.razor.rz.scp.css */
.container-edit[b-cgqt94r1i3] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.edit-header[b-cgqt94r1i3] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-title[b-cgqt94r1i3] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
}

.edit-card[b-cgqt94r1i3] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.uid-display[b-cgqt94r1i3] {
    font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
    font-size: 13px;
    color: var(--text-tertiary);
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 10px 14px;
    letter-spacing: 0.5px;
    user-select: all;
}

.field-row[b-cgqt94r1i3] {
    display: flex;
    gap: 16px;
}

.field-row > .field[b-cgqt94r1i3] {
    flex: 1;
    min-width: 0;
}

.edit-textarea[b-cgqt94r1i3] {
    resize: vertical;
    min-height: 80px;
    font-family: var(--font-primary);
    line-height: 1.45;
}

.edit-actions[b-cgqt94r1i3] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 6px;
}

@media (max-width: 640px) {
    .field-row[b-cgqt94r1i3] {
        flex-direction: column;
    }
    .edit-actions[b-cgqt94r1i3] {
        flex-direction: column-reverse;
    }
    .edit-actions .btn[b-cgqt94r1i3] {
        width: 100%;
    }
    .edit-title[b-cgqt94r1i3] {
        font-size: 18px;
    }
}
/* /Components/Shared/BrandLogo.razor.rz.scp.css */
.brand[b-isf6vl7yv9] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-text[b-isf6vl7yv9] {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.brand-sm .brand-icon[b-isf6vl7yv9] { width: 26px; height: 26px; border-radius: 6px; }
.brand-sm .brand-name[b-isf6vl7yv9] { font-size: 16px; }

.brand-md .brand-icon[b-isf6vl7yv9] { width: 36px; height: 36px; border-radius: 8px; }
.brand-md .brand-name[b-isf6vl7yv9] { font-size: 19px; }

.brand-lg .brand-icon[b-isf6vl7yv9] { width: 96px; height: 96px; border-radius: 22px; margin-bottom: 4px; }
.brand-lg .brand-name[b-isf6vl7yv9] { font-size: 42px; letter-spacing: -1px; }
.brand-lg .brand-slogan[b-isf6vl7yv9] { font-size: 13px; margin-top: 6px; }

.brand-lg[b-isf6vl7yv9] {
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.brand-lg .brand-text[b-isf6vl7yv9] { align-items: center; }
/* /Components/Shared/ConfirmDialog.razor.rz.scp.css */
.confirm-backdrop[b-5hpl9yg98e] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    /* damit @onkeydown auf dem Backdrop greift */
    outline: none;
}

.confirm-dialog[b-5hpl9yg98e] {
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 14px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    width: 100%;
    max-width: 440px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    animation: confirm-pop-b-5hpl9yg98e 0.12s ease-out;
}

@keyframes confirm-pop-b-5hpl9yg98e {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.confirm-title[b-5hpl9yg98e] {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
}

.confirm-message[b-5hpl9yg98e] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.confirm-actions[b-5hpl9yg98e] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

/* Danger-Variante: roter Confirm-Button */
[b-5hpl9yg98e] .btn-danger {
    background: var(--danger);
    color: #fff;
    border: none;
}

[b-5hpl9yg98e] .btn-danger:hover:not(:disabled) {
    filter: brightness(1.08);
}
/* /Components/Shared/ContainerDingsPanel.razor.rz.scp.css */
.cdp[b-a4im2uo0w1] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== Kopfzeile mit Container-Caption ===== */
.search-header[b-a4im2uo0w1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.search-header-title-row[b-a4im2uo0w1] {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.search-header-glyph[b-a4im2uo0w1] {
    font-size: 22px;
    line-height: 1;
    color: var(--text-secondary);
}

.search-header-title[b-a4im2uo0w1] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Standort des Containers — volle Breite, direkt unter dem Header.
   Bricht bei zu wenig Platz über mehrere Zeilen um (nie abgeschnitten). */
.cdp-standort[b-a4im2uo0w1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: -10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--text-tertiary);
}

.cdp-standort svg[b-a4im2uo0w1] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    /* Pin an der ersten Textzeile ausrichten, wenn der Standort mehrzeilig umbricht */
    margin-top: 2px;
}

.cdp-standort span[b-a4im2uo0w1] {
    min-width: 0;
    /* volle Breite nutzen; immer vollständig sichtbar, bei Bedarf umbrechen statt abschneiden */
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* ===== Suchleiste ===== */
.searchbar[b-a4im2uo0w1] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.searchbar-input[b-a4im2uo0w1] {
    flex: 1;
    position: relative;
}

.searchbar-input .input[b-a4im2uo0w1] {
    padding-left: 42px;
    height: 44px;
}

.searchbar-icon[b-a4im2uo0w1] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.searchbar-spinner[b-a4im2uo0w1] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--bg-border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: cdp-spin-b-a4im2uo0w1 0.7s linear infinite;
    pointer-events: none;
}

@keyframes cdp-spin-b-a4im2uo0w1 {
    to { transform: translateY(-50%) rotate(360deg); }
}

.add-btn[b-a4im2uo0w1] {
    height: 44px;
    flex-shrink: 0;
    padding: 0 16px;
}

.add-btn svg[b-a4im2uo0w1] {
    width: 16px;
    height: 16px;
}

/* ===== Ergebnis-Meta-Zeile ===== */
.results-meta[b-a4im2uo0w1] {
    font-size: 12px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* ===== Ergebnis-Liste ===== */
.results-list[b-a4im2uo0w1] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.result-row[b-a4im2uo0w1] {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 14px 8px 9px;
    background: var(--bg-card);
    border: 1px solid var(--bg-border);
    border-radius: 11px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.result-row:hover[b-a4im2uo0w1] {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

.result-row:active[b-a4im2uo0w1] {
    transform: scale(0.997);
}

/* Hervorhebung der aktuell ausgewählten Zeile */
.result-row-selected[b-a4im2uo0w1] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.result-thumb[b-a4im2uo0w1] {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-primary-light);
}

.result-thumb-has-image[b-a4im2uo0w1] {
    /* Weißer Hintergrund — das Bild wird proportional eingepasst, nichts abgeschnitten */
    background: #FFFFFF;
    overflow: hidden;
}

[b-a4im2uo0w1] .result-thumb-img {
    width: 100%;
    height: 100%;
    /* contain = ganzes Bild im Rahmen, ohne Verzerrung; freier Platz zeigt den weißen Hintergrund */
    object-fit: contain;
    display: block;
}

.result-thumb-glyph[b-a4im2uo0w1] {
    font-size: 24px;
    line-height: 1;
    color: var(--accent-primary);
}

.result-body[b-a4im2uo0w1] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-caption[b-a4im2uo0w1] {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result-subject[b-a4im2uo0w1] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. Zeile als Wrap-Panel: Kategorie, Code, Standort, Termin und Labels brechen bei
   wenig Platz sauber über mehrere Zeilen um, statt sich zusammenzuquetschen. */
.result-info[b-a4im2uo0w1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.result-info-chip[b-a4im2uo0w1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}

.result-info-code[b-a4im2uo0w1] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.result-info-location[b-a4im2uo0w1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
}

.result-info-location svg[b-a4im2uo0w1] {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.result-info-audit[b-a4im2uo0w1] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}

/* Label-Chips (farbig, aufgelöst aus den Label-IDs des Treffers) */
.result-info-label[b-a4im2uo0w1] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: #5F5E5A;
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    white-space: nowrap;
}

/* ===== Leerzustand ===== */
.empty-state[b-a4im2uo0w1] {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 14px;
}

.empty-state.error[b-a4im2uo0w1] { color: var(--danger); border-color: var(--color-pink-400); }

.empty-state-hint[b-a4im2uo0w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.empty-state-hint svg[b-a4im2uo0w1] {
    width: 36px;
    height: 36px;
    color: var(--text-tertiary);
}

@media (max-width: 640px) {
    .search-header-title[b-a4im2uo0w1] { font-size: 17px; }
    .add-btn span[b-a4im2uo0w1],
    .add-btn[b-a4im2uo0w1] { font-size: 13px; }
    .result-row[b-a4im2uo0w1] {
        grid-template-columns: 46px 1fr;
        gap: 10px;
    }
    .result-thumb[b-a4im2uo0w1] { width: 46px; height: 46px; }
    .result-thumb-glyph[b-a4im2uo0w1] { font-size: 22px; }
}
/* /Components/Shared/ContainerIcon.razor.rz.scp.css */
.ci-chip[b-2mcaiuk2xv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 10px;
    flex: none;
}

/* Kompakte Variante für kleine Inline-Icons (z. B. „in <Container>"-Subtitle). */
.ci-chip-sm[b-2mcaiuk2xv] {
    padding: 4px;
    border-radius: 7px;
}

.ci-img[b-2mcaiuk2xv] {
    display: block;
    object-fit: contain;
}
/* /Components/Shared/ContainerListPanel.razor.rz.scp.css */
.clp[b-4l9jxljs8l] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.clp-compact[b-4l9jxljs8l] { gap: 14px; }

/* ===== Suchleiste ===== */
.searchbar[b-4l9jxljs8l] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.searchbar-input[b-4l9jxljs8l] {
    flex: 1;
    position: relative;
}

.searchbar-input .input[b-4l9jxljs8l] {
    padding-left: 42px;
    height: 44px;
}

.searchbar-icon[b-4l9jxljs8l] {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.searchbar-btn[b-4l9jxljs8l] {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.searchbar-btn svg[b-4l9jxljs8l] {
    width: 20px;
    height: 20px;
}

.searchbar-spinner[b-4l9jxljs8l] {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--bg-border);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: clp-spin-b-4l9jxljs8l 0.7s linear infinite;
    pointer-events: none;
}

@keyframes clp-spin-b-4l9jxljs8l {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ===== Header der Container-Sektion ===== */
.page-header[b-4l9jxljs8l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.page-title-row[b-4l9jxljs8l] {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.page-title[b-4l9jxljs8l] {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.clp-compact .page-title[b-4l9jxljs8l] { font-size: 16px; }

.page-count[b-4l9jxljs8l] {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
}

.page-header-actions[b-4l9jxljs8l] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.add-btn svg[b-4l9jxljs8l] {
    width: 16px;
    height: 16px;
}

/* ===== Standort-Gruppe ===== */
.standort-group[b-4l9jxljs8l] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

.standort-header-row[b-4l9jxljs8l] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 2px 4px 6px 4px;
    border-bottom: 1px solid var(--bg-border);
}

.standort-header[b-4l9jxljs8l] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    min-width: 0;
    /* Standortbezeichnung vollständig anzeigen: über mehrere Zeilen umbrechen statt abschneiden */
    overflow-wrap: anywhere;
    word-break: break-word;
    line-height: 1.35;
}

.clp-compact .standort-header[b-4l9jxljs8l] { font-size: 12px; }

/* „+"-Button je Standort-Gruppe → neuer Container im Standort */
.standort-add-btn[b-4l9jxljs8l] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
}

.standort-add-btn svg[b-4l9jxljs8l] {
    width: 16px;
    height: 16px;
}

/* Hinweis für Standorte ganz ohne Container */
.standort-empty[b-4l9jxljs8l] {
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
    padding: 6px 4px 2px;
}

/* ===== Container-Kacheln ===== */
.tiles[b-4l9jxljs8l] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 14px;
}

/* Auch im Compact-Modus keine vollbreiten Kacheln: kleine Kacheln nebeneinander,
   die bei Platzmangel in die nächste Zeile umbrechen (2 Stück bei Default-Spaltenbreite). */
.clp-compact .tiles[b-4l9jxljs8l] {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.tile[b-4l9jxljs8l] {
    text-align: left;
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 20px 18px 18px;
    cursor: pointer;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-family: var(--font-primary);
    outline: none;
}

.clp-compact .tile[b-4l9jxljs8l] {
    padding: 12px 14px;
    border-radius: 10px;
}

.tile:focus-visible[b-4l9jxljs8l] {
    box-shadow: 0 0 0 2px var(--accent, #4f8cff);
}

.tile:hover[b-4l9jxljs8l] { filter: brightness(1.05); }
.tile:active[b-4l9jxljs8l] { transform: scale(0.98); }

/* Aktuell ausgewählte Kachel hervorheben */
.tile-selected[b-4l9jxljs8l] {
    box-shadow: 0 0 0 2px var(--accent-primary), 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tile-icon-wrap[b-4l9jxljs8l] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.12);
}

.clp-compact .tile-icon-wrap[b-4l9jxljs8l] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.tile-icon-wrap svg[b-4l9jxljs8l] {
    width: 22px;
    height: 22px;
}

.tile-glyph[b-4l9jxljs8l] {
    font-size: 24px;
    line-height: 1;
}

.clp-compact .tile-glyph[b-4l9jxljs8l] { font-size: 18px; }

/* ===== Tile mit benutzergewählter Farbe ===== */
.tile-custom[b-4l9jxljs8l] { color: #FFFFFF; }
.tile-custom .tile-name[b-4l9jxljs8l] { color: #FFFFFF; }
.tile-custom .tile-meta[b-4l9jxljs8l] { color: rgba(255,255,255,0.78); }
.tile-custom .tile-icon-wrap[b-4l9jxljs8l] { background: rgba(255,255,255,0.18); color: #FFFFFF; }
.tile-custom .tile-glyph[b-4l9jxljs8l] { color: #FFFFFF; }

.tile-name[b-4l9jxljs8l] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.clp-compact .tile-name[b-4l9jxljs8l] { font-size: 13px; }

.tile-meta[b-4l9jxljs8l] {
    font-size: 12px;
    opacity: 0.75;
    font-weight: 400;
}

.clp-compact .tile-meta[b-4l9jxljs8l] { font-size: 11px; }

/* Farbvarianten — Light + Dark via Theme-Variablen */
[data-theme="dark"] .tile-blue[b-4l9jxljs8l],
:root:not([data-theme]) .tile-blue[b-4l9jxljs8l] { background: var(--color-blue-800); border-color: var(--color-blue-600); }
[data-theme="dark"] .tile-blue .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-blue .tile-name[b-4l9jxljs8l] { color: var(--color-blue-50); }
[data-theme="dark"] .tile-blue .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-blue .tile-meta[b-4l9jxljs8l] { color: var(--color-blue-200); }
[data-theme="dark"] .tile-blue .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-blue .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-blue-100); }

[data-theme="light"] .tile-blue[b-4l9jxljs8l] { background: var(--color-blue-50); border-color: var(--color-blue-100); }
[data-theme="light"] .tile-blue .tile-name[b-4l9jxljs8l] { color: var(--color-blue-900); }
[data-theme="light"] .tile-blue .tile-meta[b-4l9jxljs8l] { color: var(--color-blue-600); }
[data-theme="light"] .tile-blue .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-blue-100); }
[data-theme="light"] .tile-blue .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-blue-600); }

[data-theme="dark"] .tile-green[b-4l9jxljs8l],
:root:not([data-theme]) .tile-green[b-4l9jxljs8l] { background: var(--color-green-800); border-color: var(--color-green-600); }
[data-theme="dark"] .tile-green .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-green .tile-name[b-4l9jxljs8l] { color: var(--color-green-50); }
[data-theme="dark"] .tile-green .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-green .tile-meta[b-4l9jxljs8l] { color: var(--color-green-200); }
[data-theme="dark"] .tile-green .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-green .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-green-100); }

[data-theme="light"] .tile-green[b-4l9jxljs8l] { background: var(--color-green-50); border-color: var(--color-green-100); }
[data-theme="light"] .tile-green .tile-name[b-4l9jxljs8l] { color: var(--color-green-900); }
[data-theme="light"] .tile-green .tile-meta[b-4l9jxljs8l] { color: var(--color-green-600); }
[data-theme="light"] .tile-green .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-green-100); }
[data-theme="light"] .tile-green .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-green-600); }

[data-theme="dark"] .tile-purple[b-4l9jxljs8l],
:root:not([data-theme]) .tile-purple[b-4l9jxljs8l] { background: var(--color-purple-800); border-color: var(--color-purple-600); }
[data-theme="dark"] .tile-purple .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-purple .tile-name[b-4l9jxljs8l] { color: var(--color-purple-50); }
[data-theme="dark"] .tile-purple .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-purple .tile-meta[b-4l9jxljs8l] { color: var(--color-purple-200); }
[data-theme="dark"] .tile-purple .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-purple .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-purple-100); }

[data-theme="light"] .tile-purple[b-4l9jxljs8l] { background: var(--color-purple-50); border-color: var(--color-purple-100); }
[data-theme="light"] .tile-purple .tile-name[b-4l9jxljs8l] { color: var(--color-purple-900); }
[data-theme="light"] .tile-purple .tile-meta[b-4l9jxljs8l] { color: var(--color-purple-600); }
[data-theme="light"] .tile-purple .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-purple-100); }
[data-theme="light"] .tile-purple .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-purple-600); }

[data-theme="dark"] .tile-amber[b-4l9jxljs8l],
:root:not([data-theme]) .tile-amber[b-4l9jxljs8l] { background: var(--color-amber-800); border-color: var(--color-amber-600); }
[data-theme="dark"] .tile-amber .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-amber .tile-name[b-4l9jxljs8l] { color: var(--color-amber-50); }
[data-theme="dark"] .tile-amber .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-amber .tile-meta[b-4l9jxljs8l] { color: var(--color-amber-200); }
[data-theme="dark"] .tile-amber .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-amber .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-amber-100); }

[data-theme="light"] .tile-amber[b-4l9jxljs8l] { background: var(--color-amber-50); border-color: var(--color-amber-100); }
[data-theme="light"] .tile-amber .tile-name[b-4l9jxljs8l] { color: var(--color-amber-900); }
[data-theme="light"] .tile-amber .tile-meta[b-4l9jxljs8l] { color: var(--color-amber-600); }
[data-theme="light"] .tile-amber .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-amber-100); }
[data-theme="light"] .tile-amber .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-amber-600); }

[data-theme="dark"] .tile-pink[b-4l9jxljs8l],
:root:not([data-theme]) .tile-pink[b-4l9jxljs8l] { background: var(--color-pink-800); border-color: var(--color-pink-600); }
[data-theme="dark"] .tile-pink .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-pink .tile-name[b-4l9jxljs8l] { color: var(--color-pink-50); }
[data-theme="dark"] .tile-pink .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-pink .tile-meta[b-4l9jxljs8l] { color: var(--color-pink-200); }
[data-theme="dark"] .tile-pink .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-pink .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-pink-100); }

[data-theme="light"] .tile-pink[b-4l9jxljs8l] { background: var(--color-pink-50); border-color: var(--color-pink-100); }
[data-theme="light"] .tile-pink .tile-name[b-4l9jxljs8l] { color: var(--color-pink-900); }
[data-theme="light"] .tile-pink .tile-meta[b-4l9jxljs8l] { color: var(--color-pink-600); }
[data-theme="light"] .tile-pink .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-pink-100); }
[data-theme="light"] .tile-pink .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-pink-600); }

[data-theme="dark"] .tile-gray[b-4l9jxljs8l],
:root:not([data-theme]) .tile-gray[b-4l9jxljs8l] { background: var(--color-gray-900); border-color: var(--color-gray-800); }
[data-theme="dark"] .tile-gray .tile-name[b-4l9jxljs8l],
:root:not([data-theme]) .tile-gray .tile-name[b-4l9jxljs8l] { color: var(--color-gray-50); }
[data-theme="dark"] .tile-gray .tile-meta[b-4l9jxljs8l],
:root:not([data-theme]) .tile-gray .tile-meta[b-4l9jxljs8l] { color: var(--color-gray-200); }
[data-theme="dark"] .tile-gray .tile-icon-wrap svg[b-4l9jxljs8l],
:root:not([data-theme]) .tile-gray .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-gray-100); }

[data-theme="light"] .tile-gray[b-4l9jxljs8l] { background: var(--color-gray-50); border-color: var(--color-gray-100); }
[data-theme="light"] .tile-gray .tile-name[b-4l9jxljs8l] { color: var(--color-gray-900); }
[data-theme="light"] .tile-gray .tile-meta[b-4l9jxljs8l] { color: var(--color-gray-600); }
[data-theme="light"] .tile-gray .tile-icon-wrap[b-4l9jxljs8l] { background: var(--color-gray-100); }
[data-theme="light"] .tile-gray .tile-icon-wrap svg[b-4l9jxljs8l] { color: var(--color-gray-600); }

/* ===== Dings-Treffer-Streifen in der Kachel ===== */
.tile-dings[b-4l9jxljs8l] {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    overflow-x: auto;
}

[data-theme="light"] .tile-dings[b-4l9jxljs8l] {
    border-top-color: rgba(0, 0, 0, 0.08);
}

.tile-ding[b-4l9jxljs8l] {
    flex: 0 0 auto;
    width: 56px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.tile-ding:hover .tile-ding-thumb[b-4l9jxljs8l] {
    filter: brightness(1.08);
    transform: scale(1.04);
}

.tile-ding-thumb[b-4l9jxljs8l] {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    /* Hintergrund für den Glyph-Fallback (ohne Bild). Mit Bild deckt das weiß
       hinterlegte, proportional eingepasste Thumbnail den Container vollständig ab. */
    background: rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.1s ease, filter 0.15s ease;
}

[data-theme="light"] .tile-ding-thumb[b-4l9jxljs8l] {
    background: rgba(0, 0, 0, 0.06);
}

[b-4l9jxljs8l] .tile-ding-img {
    width: 40px !important;
    height: 40px !important;
    /* contain = proportional eingepasst (nichts abgeschnitten); weißer Hintergrund kommt inline aus ThumbImage */
    object-fit: contain;
}

.tile-ding-glyph[b-4l9jxljs8l] {
    font-size: 18px;
    line-height: 1;
}

.tile-ding-caption[b-4l9jxljs8l] {
    font-size: 10px;
    line-height: 1.2;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}

/* ===== Leerzustand ===== */
.empty-state[b-4l9jxljs8l] {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.empty-state.error[b-4l9jxljs8l] { color: var(--danger); border-color: var(--color-pink-400); }

@media (max-width: 480px) {
    .searchbar-btn[b-4l9jxljs8l] { width: 44px; }
    .page-title[b-4l9jxljs8l] { font-size: 18px; }
    .tiles[b-4l9jxljs8l] { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* /Components/Shared/DingsDetailPanel.razor.rz.scp.css */
.dings-view[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ===== Header ===== */
.view-header[b-bnqjjd3ugy] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.view-title-block[b-bnqjjd3ugy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.view-title[b-bnqjjd3ugy] {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-subtitle[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--text-tertiary);
}

.view-subtitle-label[b-bnqjjd3ugy] { font-style: italic; }
.view-subtitle-glyph[b-bnqjjd3ugy] { font-size: 14px; line-height: 1; color: var(--text-secondary); }
.view-subtitle-name[b-bnqjjd3ugy] {
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „bei <Standort>" nur einblenden, wenn (schmaler Viewport) ausschließlich das Detail sichtbar ist. */
.view-subtitle-standort[b-bnqjjd3ugy] {
    display: none;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

@media (max-width: 899px) {
    .view-subtitle-standort[b-bnqjjd3ugy] { display: inline-flex; }
}

/* Aktions-Fehler (z.B. Kopieren fehlgeschlagen) */
.action-error[b-bnqjjd3ugy] {
    color: var(--danger);
    font-size: 13px;
    padding: 8px 12px;
    background: var(--color-pink-50);
    border: 1px solid var(--color-pink-100);
    border-radius: 8px;
}

[data-theme="dark"] .action-error[b-bnqjjd3ugy] {
    background: var(--color-pink-800);
    color: var(--color-pink-50);
    border-color: var(--color-pink-600);
}

/* ===== Tabs ===== */
.tabs[b-bnqjjd3ugy] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--bg-border);
}

.tab[b-bnqjjd3ugy] {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 14px;
    margin-bottom: -1px;
    cursor: pointer;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.tab:hover[b-bnqjjd3ugy] { color: var(--text-primary); }

.tab-active[b-bnqjjd3ugy] {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.tab-panel[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 4px;
}

/* ===== Sections ===== */
.section[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.section-title[b-bnqjjd3ugy] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.head-row[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

/* Bilder-Streifen: Hauptbild + (falls vorhanden) Einbausituation + Typenschild nebeneinander */
.head-images[b-bnqjjd3ugy] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.head-image[b-bnqjjd3ugy] {
    width: 130px;
    height: 130px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--bg-surface);
    border: 1px dashed var(--bg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Mit Bild: durchgezogener Rahmen + weißer Hintergrund (Bild proportional eingepasst, nichts abgeschnitten) */
.head-image-has-image[b-bnqjjd3ugy] {
    border-style: solid;
    background: #FFFFFF;
}

/* Klickbares Bild-Frame (öffnet das Bild in voller Größe im neuen Tab) */
.head-image-clickable[b-bnqjjd3ugy] {
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.05s ease;
}

.head-image-clickable:hover[b-bnqjjd3ugy] { border-color: var(--accent-primary); }
.head-image-clickable:active[b-bnqjjd3ugy] { transform: scale(0.98); }

.head-image-id[b-bnqjjd3ugy] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 6px;
    text-align: center;
}

[b-bnqjjd3ugy] .head-image-img {
    width: 100%;
    height: 100%;
    /* contain = ganzes Bild im Rahmen, ohne Verzerrung; freier Platz zeigt den Surface-Hintergrund */
    object-fit: contain;
    display: block;
}

.head-image-placeholder svg[b-bnqjjd3ugy] {
    width: 56px;
    height: 56px;
    color: var(--text-tertiary);
}

.head-body[b-bnqjjd3ugy] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.head-caption[b-bnqjjd3ugy] {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

.head-uid[b-bnqjjd3ugy] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    letter-spacing: 0.2px;
    user-select: all;
}

.head-meta-row[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--text-secondary);
}

.meta-chip[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
}

.meta-sep[b-bnqjjd3ugy] { color: var(--text-tertiary); opacity: 0.6; }
.meta-subject[b-bnqjjd3ugy] { color: var(--text-secondary); }

.head-location[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

.head-location svg[b-bnqjjd3ugy] {
    width: 15px;
    height: 15px;
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.head-location span[b-bnqjjd3ugy] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.head-summary[b-bnqjjd3ugy] {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.head-labels[b-bnqjjd3ugy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.label-chip[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 1.4;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

@media (max-width: 640px) {
    .head-image[b-bnqjjd3ugy] { width: 120px; height: 120px; }
}

/* ===== Key/Value-Grid ===== */
.kv-grid[b-bnqjjd3ugy] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px 24px;
}

.kv[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.kv-label[b-bnqjjd3ugy] {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.kv-value[b-bnqjjd3ugy] {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

/* ===== Datenfelder-Tabelle ===== */
.datafields-table[b-bnqjjd3ugy] {
    width: 100%;
    border-collapse: collapse;
}

.datafields-table td[b-bnqjjd3ugy] {
    padding: 7px 4px;
    border-bottom: 1px solid var(--bg-border);
    vertical-align: top;
    font-size: 14px;
}

.datafields-table tr:last-child td[b-bnqjjd3ugy] { border-bottom: none; }

.df-caption[b-bnqjjd3ugy] {
    color: var(--text-secondary);
    width: 42%;
    padding-right: 12px;
}

.df-value[b-bnqjjd3ugy] {
    color: var(--text-primary);
    word-break: break-word;
}

.df-empty[b-bnqjjd3ugy] { color: var(--text-tertiary); }

.kv-value-overdue[b-bnqjjd3ugy] { color: var(--danger); }
.kv-value-soon[b-bnqjjd3ugy]    { color: var(--color-amber-400); }

.lock-badge[b-bnqjjd3ugy] { font-size: 11px; margin-left: 2px; }

@media (max-width: 640px) {
    .kv-grid[b-bnqjjd3ugy] { grid-template-columns: 1fr; }
}

/* ===== Markdown-Output ===== */
.markdown-output[b-bnqjjd3ugy] {
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}

.markdown-output[b-bnqjjd3ugy]  h1,
.markdown-output[b-bnqjjd3ugy]  h2,
.markdown-output[b-bnqjjd3ugy]  h3,
.markdown-output[b-bnqjjd3ugy]  h4 {
    color: var(--text-primary);
    margin: 0.6em 0 0.4em;
    line-height: 1.3;
}

.markdown-output[b-bnqjjd3ugy]  h1 { font-size: 20px; }
.markdown-output[b-bnqjjd3ugy]  h2 { font-size: 17px; }
.markdown-output[b-bnqjjd3ugy]  h3 { font-size: 15px; }

.markdown-output[b-bnqjjd3ugy]  p { margin: 0.4em 0; }
.markdown-output[b-bnqjjd3ugy]  ul,
.markdown-output[b-bnqjjd3ugy]  ol { padding-left: 22px; margin: 0.4em 0; }
.markdown-output[b-bnqjjd3ugy]  li { margin: 0.15em 0; }
.markdown-output[b-bnqjjd3ugy]  a { color: var(--accent-primary); text-decoration: underline; }

.markdown-output[b-bnqjjd3ugy]  code {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12.5px;
    background: var(--bg-elevated);
    padding: 1px 5px;
    border-radius: 4px;
    color: var(--text-primary);
}

.markdown-output[b-bnqjjd3ugy]  pre {
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
    margin: 0.6em 0;
}

.markdown-output[b-bnqjjd3ugy]  pre code { background: transparent; padding: 0; }

.markdown-output[b-bnqjjd3ugy]  blockquote {
    margin: 0.5em 0;
    padding: 4px 12px;
    border-left: 3px solid var(--accent-primary);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: 0 6px 6px 0;
}

.markdown-output[b-bnqjjd3ugy]  table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.6em 0;
    font-size: 13px;
}

.markdown-output[b-bnqjjd3ugy]  th,
.markdown-output[b-bnqjjd3ugy]  td {
    border: 1px solid var(--bg-border);
    padding: 6px 10px;
    text-align: left;
}

.markdown-output[b-bnqjjd3ugy]  th { background: var(--bg-elevated); font-weight: 600; }
.markdown-output[b-bnqjjd3ugy]  img { max-width: 100%; border-radius: 6px; }
.markdown-output[b-bnqjjd3ugy]  hr { border: none; border-top: 1px solid var(--bg-border); margin: 0.8em 0; }

/* ===== Sensible Information (SecureInfo, Reveal auf Abruf) ===== */
.secure-reveal[b-bnqjjd3ugy] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.secure-value[b-bnqjjd3ugy] {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 8px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.secure-masked[b-bnqjjd3ugy] {
    letter-spacing: 3px;
    color: var(--text-tertiary);
}

.secure-btn[b-bnqjjd3ugy] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.secure-btn svg[b-bnqjjd3ugy] {
    width: 16px;
    height: 16px;
}

/* ===== Hashtags ===== */
.hashtag-row[b-bnqjjd3ugy] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.hashtag-chip[b-bnqjjd3ugy] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    font-size: 12.5px;
    font-weight: 500;
}

/* ===== Empty-State ===== */
.empty-state[b-bnqjjd3ugy] {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 14px;
}

.empty-state.error[b-bnqjjd3ugy] { color: var(--danger); border-color: var(--color-pink-400); }

.empty-state-hint[b-bnqjjd3ugy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.empty-state-hint svg[b-bnqjjd3ugy] {
    width: 36px;
    height: 36px;
    color: var(--text-tertiary);
}
/* /Components/Shared/Editors/CodeMirrorEditor.razor.rz.scp.css */
.cm-host[b-bdl9axwbsy] {
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* CodeMirror erzeugt .cm-editor zur Laufzeit ohne Scope-Attribut → ::deep nötig. */
.cm-host[b-bdl9axwbsy]  .cm-editor {
    flex: 1;
    min-width: 0;
    min-height: 0;
    width: 100%;
    height: 100%;
    font-size: 13px;
}

.cm-host[b-bdl9axwbsy]  .cm-scroller {
    overflow: auto;
}
/* /Components/Shared/Editors/FileEditorHost.razor.rz.scp.css */
.fe[b-oa9p4ssbnl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.fe-header[b-oa9p4ssbnl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-border);
    background: var(--bg-surface);
}

.fe-title-block[b-oa9p4ssbnl] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fe-title[b-oa9p4ssbnl] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fe-dirty[b-oa9p4ssbnl] {
    color: var(--accent, #e0a800);
    margin-left: 6px;
    font-size: 12px;
    vertical-align: middle;
}

.fe-sub[b-oa9p4ssbnl] {
    font-size: 11.5px;
    color: var(--text-tertiary);
}

.fe-actions[b-oa9p4ssbnl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.fe-save[b-oa9p4ssbnl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.fe-save svg[b-oa9p4ssbnl] { width: 15px; height: 15px; }

.fe-actions .btn-icon[b-oa9p4ssbnl] { width: 32px; height: 32px; }
.fe-actions .btn-icon svg[b-oa9p4ssbnl] { width: 14px; height: 14px; }

.fe-status[b-oa9p4ssbnl] {
    padding: 6px 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--bg-border);
}

.fe-status-ok[b-oa9p4ssbnl] {
    color: var(--text-secondary, #9aa4b2);
    background: var(--bg-surface);
}

.fe-status-error[b-oa9p4ssbnl] {
    color: #fff;
    background: var(--danger, #c0392b);
}

.fe-body[b-oa9p4ssbnl] {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    background: var(--bg-app);
}

/* DynamicComponent rendert direkt in .fe-body — der Editor soll die Fläche füllen. */
.fe-body > *[b-oa9p4ssbnl] {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.fe-empty[b-oa9p4ssbnl] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 24px;
    text-align: center;
}

.fe-empty-error[b-oa9p4ssbnl] { color: var(--danger, #c0392b); }
/* /Components/Shared/FileAndFolderViewer.razor.rz.scp.css */
.fileviewer[b-7icl5klr4j] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 240px;
}

.fileviewer.is-busy[b-7icl5klr4j] { opacity: 0.85; }

/* ===== Toolbar ===== */
.fv-toolbar[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.fv-breadcrumb[b-7icl5klr4j] {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    font-size: 13px;
    min-width: 0;
}

.fv-crumb[b-7icl5klr4j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;
}

.fv-crumb:hover:not(:disabled)[b-7icl5klr4j] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.fv-crumb:disabled[b-7icl5klr4j] {
    color: var(--text-primary);
    cursor: default;
    background: transparent;
    font-weight: 600;
}

.fv-crumb svg[b-7icl5klr4j] { width: 14px; height: 14px; }

.fv-crumb-sep[b-7icl5klr4j] { color: var(--text-tertiary); opacity: 0.6; }

.fv-actions[b-7icl5klr4j] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Verstecktes InputFile — wird vom Upload-Button per JS getriggert.
   `display: none` reicht nicht in allen Browsern, weil dann manche das Element
   beim programmatischen .click() ignorieren. `position: absolute; left: -9999px`
   ist der zuverlässige Trick. */
[b-7icl5klr4j] .fv-upload-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* View-Mode-Toggle */
.fv-mode-toggle[b-7icl5klr4j] {
    display: inline-flex;
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    overflow: hidden;
    margin-left: 4px;
}

.fv-mode-toggle button[b-7icl5klr4j] {
    background: transparent;
    border: none;
    padding: 8px 10px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.1s ease, color 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fv-mode-toggle button svg[b-7icl5klr4j] { width: 16px; height: 16px; }

.fv-mode-toggle button:hover[b-7icl5klr4j] {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.fv-mode-toggle button.active[b-7icl5klr4j] {
    background: var(--accent-primary-light);
    color: var(--accent-primary);
}

/* ===== Neue-Datei-Menü ("+") ===== */
.fv-newmenu[b-7icl5klr4j] {
    position: relative;
    display: inline-flex;
}

.fv-newmenu-backdrop[b-7icl5klr4j] {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: transparent;
}

.fv-newmenu-list[b-7icl5klr4j] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 200;
    margin: 0;
    padding: 4px;
    list-style: none;
    min-width: 190px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    box-shadow: var(--shadow-card);
}

.fv-newmenu-item[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
    transition: background 0.1s ease;
}

.fv-newmenu-item:hover[b-7icl5klr4j] {
    background: var(--bg-elevated);
}

.fv-newmenu-badge[b-7icl5klr4j] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-primary);
    background: var(--accent-primary-light);
    border-radius: 5px;
    padding: 2px 0;
    min-width: 38px;
    text-align: center;
    flex-shrink: 0;
}

/* ===== Neuer Ordner: Inline-Input ===== */
.fv-newfolder[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
}

.fv-newfolder .input[b-7icl5klr4j] { flex: 1; }

/* ===== Error / Empty ===== */
.fv-error[b-7icl5klr4j] {
    color: var(--danger);
    font-size: 13px;
    padding: 8px 12px;
    background: var(--color-pink-50);
    border: 1px solid var(--color-pink-100);
    border-radius: 8px;
}

[data-theme="dark"] .fv-error[b-7icl5klr4j] {
    background: var(--color-pink-800);
    color: var(--color-pink-50);
    border-color: var(--color-pink-600);
}

.fv-empty[b-7icl5klr4j] {
    padding: 40px 24px;
    text-align: center;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px dashed var(--bg-border);
    border-radius: 12px;
}

.fv-empty-drop[b-7icl5klr4j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.fv-empty-drop svg[b-7icl5klr4j] {
    width: 40px;
    height: 40px;
    color: var(--text-tertiary);
}

/* ===== Liste ===== */
.fv-list[b-7icl5klr4j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.fv-list thead th[b-7icl5klr4j] {
    text-align: left;
    font-weight: 500;
    color: var(--text-tertiary);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--bg-border);
}

.fv-col-name[b-7icl5klr4j] { width: auto; }
.fv-col-size[b-7icl5klr4j] { width: 100px; }
.fv-col-date[b-7icl5klr4j] { width: 160px; color: var(--text-tertiary); }
.fv-col-act[b-7icl5klr4j]  { width: 120px; text-align: right; }

.fv-row[b-7icl5klr4j] {
    border-bottom: 1px solid var(--bg-border);
    cursor: default;
}
.fv-row td[b-7icl5klr4j] {
    padding: 6px 10px;
    vertical-align: middle;
}
.fv-row:hover[b-7icl5klr4j] {
    background: var(--bg-elevated);
}

.fv-row-selected[b-7icl5klr4j],
.fv-row-selected:hover[b-7icl5klr4j] {
    background: var(--accent-primary-light);
}

.fv-tile-selected[b-7icl5klr4j] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.fv-row .fv-col-name[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.fv-icon[b-7icl5klr4j] {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.fv-icon-folder[b-7icl5klr4j] { color: var(--color-amber-200); }
[data-theme="light"] .fv-icon-folder[b-7icl5klr4j] { color: var(--color-amber-400); }

.fv-icon-folder svg[b-7icl5klr4j] { width: 28px; height: 28px; }

.fv-icon-file[b-7icl5klr4j] {
    background: var(--bg-elevated);
    border-radius: 6px;
    /* Thumbnail (weiß hinterlegt, proportional eingepasst) sauber auf die Rundung beschneiden */
    overflow: hidden;
}

.fv-extbadge[b-7icl5klr4j] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

.fv-name-link[b-7icl5klr4j] {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 14px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.fv-name-link:hover[b-7icl5klr4j] { color: var(--accent-primary); text-decoration: underline; }

.fv-meta-inline[b-7icl5klr4j] {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Lösch-Button im Hover-Stil */
[b-7icl5klr4j] .btn-icon-danger:hover:not(:disabled) {
    color: var(--danger);
    border-color: var(--color-pink-200);
    background: var(--color-pink-50);
}
[data-theme="dark"][b-7icl5klr4j]  .btn-icon-danger:hover:not(:disabled) {
    background: var(--color-pink-800);
    border-color: var(--color-pink-600);
    color: var(--color-pink-50);
}

/* ===== Kacheln ===== */
.fv-tiles[b-7icl5klr4j] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 14px;
}

.fv-tile[b-7icl5klr4j] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--bg-border);
    background: var(--bg-card);
    cursor: default;
    transition: border-color 0.1s ease, transform 0.05s ease, background 0.1s ease;
}

.fv-tile:hover[b-7icl5klr4j] {
    border-color: var(--accent-primary);
    background: var(--bg-elevated);
}

.fv-tile-preview[b-7icl5klr4j] {
    width: 120px;
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--bg-surface);
}

.fv-tile-folder .fv-tile-preview[b-7icl5klr4j] {
    background: transparent;
}

.fv-folder-svg[b-7icl5klr4j] {
    width: 96px;
    height: 72px;
    color: var(--color-amber-200);
}

[data-theme="light"] .fv-folder-svg[b-7icl5klr4j] {
    color: var(--color-amber-400);
}

.fv-tile-extbadge[b-7icl5klr4j] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.3px;
}

/* contain = Bild proportional einpassen (nichts abschneiden); weißer Hintergrund im freien Bereich */
.fv-tile-thumb[b-7icl5klr4j] { width: 120px; height: 120px; object-fit: contain; background: #FFFFFF; border-radius: 6px; }

.fv-tile-name[b-7icl5klr4j] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fv-tile-meta[b-7icl5klr4j] {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Action-Buttons (Rename + Delete) im Kachel-Modus oben rechts */
.fv-tile-actions[b-7icl5klr4j] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    gap: 3px;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.fv-tile-actions .btn-icon[b-7icl5klr4j] {
    width: 26px;
    height: 26px;
    background: var(--bg-card);
}
.fv-tile-actions .btn-icon svg[b-7icl5klr4j] { width: 13px; height: 13px; }

.fv-tile:hover .fv-tile-actions[b-7icl5klr4j] { opacity: 1; }

/* Auch im Listen-Modus Hover-Aktion — kompaktere Buttons als Default */
.fv-row .fv-col-act[b-7icl5klr4j] {
    white-space: nowrap;
}

.fv-row .fv-col-act .btn-icon[b-7icl5klr4j] {
    width: 32px;
    height: 32px;
    opacity: 0;
}

.fv-row .fv-col-act .btn-icon + .btn-icon[b-7icl5klr4j] { margin-left: 4px; }

.fv-row .fv-col-act .btn-icon svg[b-7icl5klr4j] { width: 14px; height: 14px; }

.fv-row:hover .fv-col-act .btn-icon[b-7icl5klr4j] { opacity: 1; }

/* ===== Inline-Rename (Caption editieren) ===== */
.fv-rename-wrap[b-7icl5klr4j] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.fv-tile-rename[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 0 4px;
}

.fv-rename-input[b-7icl5klr4j] {
    padding: 4px 8px;
    height: auto;
    font-size: 13px;
    min-width: 0;
    flex: 1;
}

.fv-rename-ext[b-7icl5klr4j] {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

/* ===== Upload-Liste (während Hochladen) ===== */
.fv-uploads[b-7icl5klr4j] {
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--bg-border);
    border-radius: 10px;
    font-size: 12.5px;
}

.fv-uploads-head[b-7icl5klr4j] {
    color: var(--text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.fv-uploads ul[b-7icl5klr4j] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.fv-uploads li[b-7icl5klr4j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
    color: var(--text-secondary);
}

.fv-uploads li.done[b-7icl5klr4j] { color: var(--accent-secondary); }
.fv-uploads li.errored[b-7icl5klr4j] { color: var(--danger); }

.fv-uploads-row[b-7icl5klr4j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fv-uploads-name[b-7icl5klr4j] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fv-uploads-size[b-7icl5klr4j],
.fv-uploads-err[b-7icl5klr4j] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

.fv-uploads-err[b-7icl5klr4j] { color: var(--danger); }

/* Progress-Balken */
.fv-uploads-bar[b-7icl5klr4j] {
    width: 100%;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}

.fv-uploads-bar-fill[b-7icl5klr4j] {
    height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    transition: width 0.15s ease;
}

.fv-uploads li.done .fv-uploads-bar-fill[b-7icl5klr4j] {
    background: var(--accent-secondary);
}

.fv-uploads li.errored .fv-uploads-bar-fill[b-7icl5klr4j] {
    background: var(--danger);
}

/* ===== Drop-Overlay (vom JS via Klasse aktiviert) ===== */
.fv-drop-overlay[b-7icl5klr4j] {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 2px dashed var(--accent-primary);
    background: color-mix(in srgb, var(--accent-primary-light) 90%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 50;
    pointer-events: none;
}

.fileviewer.fileviewer-drop-active .fv-drop-overlay[b-7icl5klr4j] {
    display: flex;
}

.fv-drop-overlay-inner[b-7icl5klr4j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--accent-primary);
    font-size: 14px;
    font-weight: 600;
}

.fv-drop-overlay-inner svg[b-7icl5klr4j] { width: 48px; height: 48px; }

/* ===== ThumbImage-Helfer ===== */
[b-7icl5klr4j] .thumbimage-placeholder,
[b-7icl5klr4j] .thumbimage-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: 6px;
    color: var(--text-tertiary);
}

[b-7icl5klr4j] .thumbimage-fallback svg { width: 40%; height: 40%; }
/* /Components/Shared/FilePreviewPanel.razor.rz.scp.css */
.fp[b-mwxiqqiu8i] {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    min-height: 0;
}

.fp-header[b-mwxiqqiu8i] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bg-border);
    background: var(--bg-surface);
}

.fp-title-block[b-mwxiqqiu8i] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.fp-title[b-mwxiqqiu8i] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fp-meta[b-mwxiqqiu8i] {
    font-size: 11.5px;
    color: var(--text-tertiary);
    display: inline-flex;
    gap: 6px;
}

.fp-meta-sep[b-mwxiqqiu8i] { opacity: 0.5; }

.fp-actions[b-mwxiqqiu8i] {
    display: inline-flex;
    gap: 4px;
    flex-shrink: 0;
}

.fp-actions .btn-icon[b-mwxiqqiu8i] { width: 32px; height: 32px; }
.fp-actions .btn-icon svg[b-mwxiqqiu8i] { width: 14px; height: 14px; }

/* Bühne = Vorschaufläche + überlagerte Navigationspfeile */
.fp-stage[b-mwxiqqiu8i] {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
}

.fp-body[b-mwxiqqiu8i] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--bg-app);
}

/* ===== Navigationspfeile (über der Vorschau) ===== */
.fp-nav[b-mwxiqqiu8i] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 17, 23, 0.55);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease, opacity 0.15s ease;
}

.fp-nav:hover[b-mwxiqqiu8i] { background: rgba(15, 17, 23, 0.82); }
.fp-nav svg[b-mwxiqqiu8i] { width: 22px; height: 22px; }
.fp-nav-prev[b-mwxiqqiu8i] { left: 12px; }
.fp-nav-next[b-mwxiqqiu8i] { right: 12px; }

/* An den Enden des Verzeichnisses ausblenden statt nur deaktivieren. */
.fp-nav:disabled[b-mwxiqqiu8i] { opacity: 0; pointer-events: none; }

/* ===== Thumbnail-Leiste ===== */
.fp-filmstrip[b-mwxiqqiu8i] {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    overflow-x: auto;
    border-top: 1px solid var(--bg-border);
    background: var(--bg-surface);
}

.fp-thumb[b-mwxiqqiu8i] {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease;
}

.fp-thumb:hover[b-mwxiqqiu8i] { border-color: var(--bg-border); }
.fp-thumb-active[b-mwxiqqiu8i] { border-color: var(--accent-primary); }
/* contain = Bild proportional einpassen (nichts abschneiden); weißer Hintergrund kommt inline aus ThumbImage */
.fp-thumb img[b-mwxiqqiu8i] { width: 100%; height: 100%; object-fit: contain; background: #FFFFFF; display: block; }

.fp-thumb-badge[b-mwxiqqiu8i] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ===== Empty / Error ===== */
.fp-empty[b-mwxiqqiu8i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 60px 24px;
    color: var(--text-tertiary);
    text-align: center;
    height: 100%;
}

.fp-empty svg[b-mwxiqqiu8i] { width: 48px; height: 48px; color: var(--text-tertiary); }

.fp-error[b-mwxiqqiu8i] { color: var(--danger); }

.fp-unsupported code[b-mwxiqqiu8i] {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    background: var(--bg-elevated);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--text-secondary);
}

/* ===== Image ===== */
.fp-image-wrap[b-mwxiqqiu8i] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    width: 100%;
    height: 100%;
    overflow: hidden;          /* gezoomtes Bild wird beschnitten und per Pan verschoben */
    box-sizing: border-box;
}

.fp-image[b-mwxiqqiu8i] {
    /* Große Bilder werden auf den verfügbaren Platz verkleinert (komplett sichtbar),
       kleine Bilder bleiben in Originalgröße (kein unscharfes Hochskalieren). */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform-origin: center center;
    user-select: none;
    -webkit-user-drag: none;
    will-change: transform;
}

/* ===== PDF ===== */
/* pdf.js-Render-Container: zentrierte Seiten auf grauem Viewer-Hintergrund */
.fp-pdf-doc[b-mwxiqqiu8i] {
    width: 100%;
    min-height: 100%;
    background: #525659;     /* Standard-PDF-Viewer-Background */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

[b-mwxiqqiu8i] .fp-pdf-page {
    max-width: 100%;
    height: auto;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* ===== Text / Code ===== */
.fp-text[b-mwxiqqiu8i] {
    margin: 0;
    padding: 16px 20px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}

/* ===== Markdown ===== */
.fp-markdown[b-mwxiqqiu8i] {
    padding: 16px 20px;
    color: var(--text-primary);
    line-height: 1.6;
}

.fp-markdown[b-mwxiqqiu8i]  h1,
.fp-markdown[b-mwxiqqiu8i]  h2,
.fp-markdown[b-mwxiqqiu8i]  h3 {
    margin: 0.6em 0 0.4em;
    color: var(--text-primary);
}

.fp-markdown[b-mwxiqqiu8i]  h1 { font-size: 22px; }
.fp-markdown[b-mwxiqqiu8i]  h2 { font-size: 18px; }
.fp-markdown[b-mwxiqqiu8i]  h3 { font-size: 16px; }

.fp-markdown[b-mwxiqqiu8i]  p { margin: 0.4em 0; }
.fp-markdown[b-mwxiqqiu8i]  ul, .fp-markdown[b-mwxiqqiu8i]  ol { padding-left: 22px; margin: 0.4em 0; }
.fp-markdown[b-mwxiqqiu8i]  a { color: var(--accent-primary); text-decoration: underline; }
.fp-markdown[b-mwxiqqiu8i]  code {
    font-family: 'Cascadia Code', 'Consolas', monospace;
    font-size: 12.5px;
    background: var(--bg-elevated);
    padding: 1px 5px;
    border-radius: 4px;
}
.fp-markdown[b-mwxiqqiu8i]  pre {
    background: var(--bg-elevated);
    border: 1px solid var(--bg-border);
    border-radius: 8px;
    padding: 10px 12px;
    overflow-x: auto;
}
.fp-markdown[b-mwxiqqiu8i]  pre code { background: transparent; padding: 0; }
.fp-markdown[b-mwxiqqiu8i]  table { border-collapse: collapse; width: 100%; margin: 0.6em 0; font-size: 13px; }
.fp-markdown[b-mwxiqqiu8i]  th, .fp-markdown[b-mwxiqqiu8i]  td {
    border: 1px solid var(--bg-border);
    padding: 6px 10px;
    text-align: left;
}
.fp-markdown[b-mwxiqqiu8i]  th { background: var(--bg-elevated); font-weight: 600; }
.fp-markdown[b-mwxiqqiu8i]  img { max-width: 100%; border-radius: 6px; }
.fp-markdown[b-mwxiqqiu8i]  blockquote {
    margin: 0.5em 0;
    padding: 4px 12px;
    border-left: 3px solid var(--accent-primary);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: 0 6px 6px 0;
}
/* /Components/Shared/WorkspaceLayout.razor.rz.scp.css */
/* ===== Desktop: 3 Spalten mit verstellbaren Splittern (ab 1280 px) =====
   Spaltenmodell:
     col1 = var(--ws-c1)   (Container-Liste, verstellbar via Splitter 1)
     col2 = var(--ws-c2)   (Dings-Liste, verstellbar via Splitter 2)
     col3 = 1fr            (Detail/Preview, füllt den Rest — größte Fläche)
   Die Breiten-Variablen werden von dingsda.ws (JS) gesetzt und in
   localStorage persistiert. */
.ws[b-imyttzmauj] {
    display: grid;
    grid-template-columns:
        var(--ws-c1, 300px)
        7px
        var(--ws-c2, 420px)
        7px
        minmax(360px, 1fr);
    background: var(--bg-app);
    /* App-Header (~64 px) abziehen, damit der Workspace exakt den Rest füllt
       und Spalten unabhängig scrollen */
    height: calc(100vh - 64px);
    overflow: hidden;
    /*
     * Aus dem .app-main-Container (max-width 1280, padding 20) ausbrechen:
     * Full-Bleed über die volle Viewport-Breite, ohne die übrigen Pages anzufassen.
     */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-top: -20px;
    margin-bottom: -20px;
}

.ws-col[b-imyttzmauj] {
    background: var(--bg-app);
    overflow-y: auto;
    min-width: 0;
    padding: 16px;
}

.ws-col-1[b-imyttzmauj] { padding: 14px 12px; }

/* Detail-Spalte: bei Datei-Vorschau randlos (FilePreviewPanel hat eigenen Header),
   sonst regulär gepolstert wie die anderen Spalten. */
.ws-col-3.ws-col-file[b-imyttzmauj] { padding: 0; }

/* Detail-Panel bleibt im DOM (Zustand erhalten), wird bei offener Vorschau nur versteckt. */
.ws-detail-hidden[b-imyttzmauj] { display: none; }

/* ===== Splitter ===== */
.ws-splitter[b-imyttzmauj] {
    position: relative;
    background: transparent;
    cursor: col-resize;
    touch-action: none;
    z-index: 2;
}

/* dezente Trennlinie, mittig im Gutter — ersetzt den früheren 1px-Gap */
.ws-splitter[b-imyttzmauj]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: var(--bg-border);
    transition: width 0.12s ease, background 0.12s ease;
}

.ws-splitter:hover[b-imyttzmauj]::after,
.ws-splitter.ws-splitter-active[b-imyttzmauj]::after {
    width: 3px;
    background: var(--accent-primary);
}

.ws-empty[b-imyttzmauj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--text-tertiary);
    padding: 24px;
    text-align: center;
}

.ws-empty svg[b-imyttzmauj] { width: 56px; height: 56px; color: var(--text-tertiary); }

/* ===== Mobile (< 900 px): nur das fokussierte Panel anzeigen ===== */
@media (max-width: 899px) {
    .ws[b-imyttzmauj] {
        grid-template-columns: 1fr;
        height: auto;
        width: auto;
        margin: 0;
        background: transparent;
    }
    .ws-col[b-imyttzmauj],
    .ws-splitter[b-imyttzmauj] { display: none; padding: 0; }

    .ws.ws-focus-list .ws-col-1[b-imyttzmauj] { display: block; }
    .ws.ws-focus-container .ws-col-2[b-imyttzmauj] { display: block; }
    .ws.ws-focus-dings .ws-col-3[b-imyttzmauj] { display: block; }
    .ws.ws-focus-file .ws-col-3[b-imyttzmauj] { display: block; }
}

/* ===== Tablet (900–1279 px): 2-spaltig, ein Splitter =====
   Sichtbar sind immer genau 3 Grid-Items (Master + Splitter + Detail),
   daher 3 Tracks. Die Master-Breite teilen sich beide Fokus-Zustände
   über --ws-tab; der jeweils sichtbare Splitter skaliert den Master. */
@media (min-width: 900px) and (max-width: 1279px) {
    .ws[b-imyttzmauj] {
        grid-template-columns: var(--ws-tab, 280px) 7px minmax(0, 1fr);
        height: calc(100vh - 64px);
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-top: -20px;
        margin-bottom: -20px;
        background: var(--bg-app);
        overflow: hidden;
    }

    /* Default (list/container): links (col1) + Splitter 1 + mitte (col2) */
    .ws .ws-col-1[b-imyttzmauj],
    .ws .ws-col-2[b-imyttzmauj] { display: block; }
    .ws .ws-splitter[data-ws-sp="1"][b-imyttzmauj] { display: block; }
    .ws .ws-col-3[b-imyttzmauj],
    .ws .ws-splitter[data-ws-sp="2"][b-imyttzmauj] { display: none; }

    /* Sobald Dings/File ausgewählt: mitte (col2) + Splitter 2 + rechts (col3) */
    .ws.ws-focus-dings .ws-col-1[b-imyttzmauj],
    .ws.ws-focus-file .ws-col-1[b-imyttzmauj],
    .ws.ws-focus-dings .ws-splitter[data-ws-sp="1"][b-imyttzmauj],
    .ws.ws-focus-file .ws-splitter[data-ws-sp="1"][b-imyttzmauj] { display: none; }

    .ws.ws-focus-dings .ws-col-2[b-imyttzmauj],
    .ws.ws-focus-file .ws-col-2[b-imyttzmauj] { display: block; }
    .ws.ws-focus-dings .ws-splitter[data-ws-sp="2"][b-imyttzmauj],
    .ws.ws-focus-file .ws-splitter[data-ws-sp="2"][b-imyttzmauj] { display: block; }
    .ws.ws-focus-dings .ws-col-3[b-imyttzmauj],
    .ws.ws-focus-file .ws-col-3[b-imyttzmauj] { display: block; }
}