/* ============================================================
   TULEX SEARCH – STYLE
   ------------------------------------------------------------
   Aufbau:
     1. CSS-Variablen (Farben + Spacing/Radius)
     2. Übersichtsseite ([my_inquiries])
     3. Recherche-Seite ([tlx_result_widget])
        – Tabellen
        – Layout (Split Screen)
        – Sidebar
        – Filter-Elemente
        – Hauptsuche & Live-Search
        – Pagination
        – Detail-Panel
        – Mobile

   White-Labeling:
     Pro WordPress-Installation kann der :root-Block oben
     überschrieben werden, ohne dass am restlichen CSS etwas
     geändert werden muss. Beispiel siehe Kommentar dort.
   ============================================================ */


/* ============================================================
   1. CSS-VARIABLEN
   ============================================================ */
:root {
    /* === Farben (white-label-fähig) === */
    --tlx-primary:        #0073aa;   /* Hauptfarbe */
    --tlx-primary-dark:   #005177;   /* Hover/Active */
    --tlx-primary-light:  #cce5ff;   /* Heller Akzent (Borders) */
    --tlx-primary-bg:     #eef5f9;   /* Sehr heller Hintergrund */
    --tlx-primary-text:   #004a75;   /* Dunkle Variante für Text */

    --tlx-success:        #28a745;   /* Grün */
    --tlx-success-bg:     #d4edda;
    --tlx-success-text:   #155724;

    --tlx-danger:         #dc3545;
    --tlx-danger-bg:      #f8d7da;
    --tlx-danger-text:    #721c24;

    --tlx-warning:        #fd7e14;   /* Orange (sehr hoch) */
    --tlx-warning-light:  #ffc107;   /* Gelb (hoch) */
    --tlx-warning-bg:     #fff3cd;
    --tlx-warning-text:   #856404;

    --tlx-neutral:        #6c757d;   /* Inaktiv/Gelöscht */

    /* === Strukturfarben === */
    --tlx-text:           #333;
    --tlx-text-muted:     #666;
    --tlx-text-faint:     #999;
    --tlx-border:         #ddd;
    --tlx-border-light:   #eee;
    --tlx-bg:             #f8f9fa;
    --tlx-bg-card:        #fff;
    --tlx-bg-hover:       #f0f8ff;
    --tlx-bg-subtle:      #fafafa;

    /* === Spacing & Radius === */
    --tlx-radius-sm:      4px;
    --tlx-radius:         6px;
    --tlx-radius-pill:    30px;

    --tlx-space-xs:       4px;
    --tlx-space-sm:       8px;
    --tlx-space:          12px;
    --tlx-space-lg:       20px;
    --tlx-space-xl:       30px;

    /* === Layout === */
    --tlx-max-width:      1400px;   /* Maximale Inhaltsbreite (white-label-fähig) */
    --tlx-bg-zebra:       #fbfbfc;  /* Sehr subtiles Grau für gerade Zeilen */

    /* === Schatten (zwei Stufen) === */
    --tlx-shadow:         0 1px 3px rgba(0,0,0,0.06);
    --tlx-shadow-strong:  0 4px 16px rgba(0,0,0,0.10);

    /* === Typografie === */
    --tlx-font-family:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --tlx-font-size:      13px;
    --tlx-font-size-sm:   11px;
    --tlx-font-size-lg:   16px;

    /* === Tabellen === */
    --tlx-table-header-bg: var(--tlx-bg);
    --tlx-table-row-hover: var(--tlx-bg-hover);
}


/* ============================================================
   2. ÜBERSICHTSSEITE ([my_inquiries])
   ============================================================ */
/*
 * Hinweis: 'body .tlx-wrapper' (statt nur '.tlx-wrapper') bewusst
 * gewählt – WordPress-Block-Themes (z.B. Twenty Twenty-Five) setzen
 * im is-layout-constrained-Container 'margin: auto !important' auf
 * direkte Kinder. Wir überschreiben mit höherer Spezifität + !important.
 */
body .tlx-wrapper {
    font-family: var(--tlx-font-family);
    color: var(--tlx-text);
    box-sizing: border-box;
    /* Aus dem Theme-Container ausbrechen */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    /* Inhalt zentriert auf max-width via Padding */
    padding-left: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
    padding-right: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
}

/* === Status-Meldungen (Erfolg / Fehler / Hinweis) === */
.tlx-message {
    padding: var(--tlx-space);
    margin-bottom: var(--tlx-space-lg);
    border-radius: var(--tlx-radius-sm);
    font-size: var(--tlx-font-size);
}
.tlx-message--success {
    background: var(--tlx-success-bg);
    color: var(--tlx-success-text);
}
.tlx-message--error {
    background: var(--tlx-danger-bg);
    color: var(--tlx-danger-text);
}
.tlx-message--warning {
    background: var(--tlx-warning-bg);
    color: var(--tlx-warning-text);
}

/* === Admin-Formular „Neue Recherche starten" === */
.tlx-inquiry-form {
    background: var(--tlx-bg);
    padding: var(--tlx-space-lg);
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius);
    margin-bottom: var(--tlx-space-xl);
    box-shadow: var(--tlx-shadow);
}
.tlx-inquiry-form h3 {
    margin: 0 0 var(--tlx-space) 0;
    font-size: var(--tlx-font-size-lg);
    font-weight: 600;
    color: var(--tlx-text);
}
.tlx-inquiry-form__row {
    display: flex;
    gap: var(--tlx-space-lg);
    flex-wrap: wrap;
    align-items: flex-end;
}
.tlx-inquiry-form__field {
    display: flex;
    flex-direction: column;
}
.tlx-inquiry-form__field--grow {
    flex: 1;
    min-width: 250px;
}
.tlx-inquiry-form__label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--tlx-space-xs);
    font-size: var(--tlx-font-size);
    color: var(--tlx-text);
}
.tlx-inquiry-form__input,
.tlx-inquiry-form__select {
    width: 100%;
    padding: var(--tlx-space-sm) var(--tlx-space);
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius-sm);
    font-size: var(--tlx-font-size);
    font-family: inherit;
    background: var(--tlx-bg-card);
    color: var(--tlx-text);
    box-sizing: border-box;
}
.tlx-inquiry-form__input:focus,
.tlx-inquiry-form__select:focus {
    outline: 2px solid var(--tlx-primary-light);
    outline-offset: -1px;
    border-color: var(--tlx-primary);
}
.tlx-inquiry-form__select {
    min-width: 120px;
}
.tlx-inquiry-form__checkboxes {
    display: flex;
    gap: var(--tlx-space);
    padding: var(--tlx-space-sm) 0;
}
.tlx-inquiry-form__checkboxes label {
    cursor: pointer;
    font-size: var(--tlx-font-size);
    color: var(--tlx-text);
}
.tlx-inquiry-form__checkboxes input {
    margin-right: var(--tlx-space-xs);
}

/* === Buttons (allgemeine Klasse, in Übersicht und Recherche) === */
.tlx-btn {
    display: inline-block;
    padding: var(--tlx-space-sm) var(--tlx-space-lg);
    border: none;
    border-radius: var(--tlx-radius-sm);
    font-size: var(--tlx-font-size);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
}
.tlx-btn--primary {
    background: var(--tlx-primary);
    color: #fff;
}
.tlx-btn--primary:hover { background: var(--tlx-primary-dark); }

.tlx-btn--success {
    background: var(--tlx-success);
    color: #fff;
}
.tlx-btn--success:hover { background: #1e7e34; }

.tlx-btn--small {
    padding: var(--tlx-space-xs) var(--tlx-space);
    font-size: var(--tlx-font-size-sm);
}

/* === Liste der Anfragen === */
.tlx-list {
    margin-top: var(--tlx-space-lg);
}
.tlx-list h3 {
    margin: 0 0 var(--tlx-space) 0;
    font-size: var(--tlx-font-size-lg);
    font-weight: 600;
    color: var(--tlx-text);
}
.tlx-inquiries-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--tlx-bg-card);
    font-family: var(--tlx-font-family);
    box-shadow: var(--tlx-shadow);
    border-radius: var(--tlx-radius);
    overflow: hidden;
}
.tlx-inquiries-table th {
    text-align: left;
    padding: var(--tlx-space);
    background: var(--tlx-table-header-bg);
    border-bottom: 2px solid var(--tlx-border);
    font-size: var(--tlx-font-size-sm);
    font-weight: 600;
    color: var(--tlx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.tlx-inquiries-table td {
    padding: var(--tlx-space-lg) var(--tlx-space);
    border-bottom: 1px solid var(--tlx-border-light);
    vertical-align: middle;
    font-size: var(--tlx-font-size);
}
.tlx-inquiries-table tr:last-child td {
    border-bottom: none;
}
/* Zebra-Striping (gerade Zeilen heller Akzent) */
.tlx-inquiries-table tbody tr:nth-child(even) {
    background: var(--tlx-bg-zebra);
}
/* Hover gewinnt immer – auch über Zebra */
.tlx-inquiries-table tbody tr:hover {
    background: var(--tlx-bg-hover) !important;
}
.tlx-inquiries-table__id {
    color: var(--tlx-text-faint);
    font-size: var(--tlx-font-size-sm);
}
.tlx-inquiries-table__term {
    font-weight: 600;
    color: var(--tlx-text);
}
.tlx-inquiries-table__empty {
    text-align: center;
    padding: var(--tlx-space-xl);
    color: var(--tlx-text-muted);
}
.tlx-status-icon {
    font-size: 10px;
    margin-right: var(--tlx-space-xs);
}
.tlx-status-icon--completed { color: var(--tlx-success); }
.tlx-status-icon--new       { color: var(--tlx-primary); }

.tlx-badge {
    display: inline-block;
    font-size: var(--tlx-font-size-sm);
    background: var(--tlx-border-light);
    color: var(--tlx-text);
    padding: 2px var(--tlx-space-sm);
    border-radius: var(--tlx-radius-sm);
    margin-right: var(--tlx-space-xs);
    line-height: 1.4;
}
.tlx-badge--engine {
    background: #e2e3e5;
}

.tlx-version-select {
    padding: var(--tlx-space-xs) var(--tlx-space-sm);
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius-sm);
    font-size: var(--tlx-font-size-sm);
    cursor: pointer;
    max-width: 220px;
    font-family: inherit;
    background: var(--tlx-bg-card);
}


/* ============================================================
   3. RECHERCHE-SEITE ([tlx_result_widget])
   ============================================================ */

/* --- 3.1 Basis & Tabellen --- */
/* Siehe Hinweis bei .tlx-wrapper – gleicher Theme-Override-Trick. */
body #tm-widget {
    font-family: var(--tlx-font-family);
    color: var(--tlx-text);
    box-sizing: border-box;
    /* Aus dem Theme-Container ausbrechen */
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
    padding-right: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
}

.tlx-table-wrapper {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--tlx-radius);
    box-shadow: var(--tlx-shadow);
    background: var(--tlx-bg-card);
}
#tm-widget table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: var(--tlx-font-size);
}
#tm-widget th {
    text-align: left;
    padding: var(--tlx-space);
    background: var(--tlx-table-header-bg);
    border-bottom: 2px solid var(--tlx-border);
    color: var(--tlx-text-muted);
    font-weight: 600;
    font-size: var(--tlx-font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
#tm-widget td {
    padding: var(--tlx-space-lg) var(--tlx-space);
    border-bottom: 1px solid var(--tlx-border-light);
    vertical-align: top;
}
/* Zebra-Striping (gerade Zeilen heller Akzent) */
#tm-widget tbody tr:nth-child(even) {
    background: var(--tlx-bg-zebra);
}
/* Inactive rows haben Vorrang über Zebra */
#tm-widget tbody tr.inactive-row {
    opacity: 0.6;
    background: var(--tlx-bg-subtle);
}
/* Hover gewinnt immer – auch über Zebra und Inactive */
#tm-widget tbody tr:hover {
    background-color: var(--tlx-bg-hover) !important;
    cursor: pointer;
}

.inactive-row {
    opacity: 0.6;
    background: var(--tlx-bg-subtle);
}
.office-flag {
    margin-right: var(--tlx-space-xs);
    vertical-align: middle;
}
.risk-vhigh {
    color: var(--tlx-danger);
    font-weight: bold;
}
.risk-high {
    color: var(--tlx-warning);
    font-weight: bold;
}


/* --- 3.2 Layout (Split Screen) --- */
.search-layout-wrapper {
    display: flex;
    align-items: flex-start;
    gap: var(--tlx-space-xl);
    margin-top: var(--tlx-space-lg);
}

.search-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--tlx-bg-card);
    border: 1px solid var(--tlx-border-light);
    border-radius: var(--tlx-radius);
    padding: var(--tlx-space);
    box-shadow: var(--tlx-shadow);
    max-height: none;
    overflow-y: visible;
    position: static;
}

.sidebar-widget {
    margin-bottom: var(--tlx-space-lg);
    padding-bottom: var(--tlx-space);
    border-bottom: 1px solid var(--tlx-border-light);
}
.sidebar-widget:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.sidebar-header {
    font-size: var(--tlx-font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--tlx-text-faint);
    margin-bottom: var(--tlx-space-sm);
    letter-spacing: 0.5px;
}

.sidebar-divider {
    margin: var(--tlx-space) 0;
    border-bottom: 1px dashed var(--tlx-border-light);
}

.search-main-content {
    flex: 1;
    min-width: 0;
}


/* --- 3.3 Suchbegriff-Box (links) --- */
.sidebar-blue-box {
    background: var(--tlx-primary-bg);
    border: 2px solid var(--tlx-primary-light);
    border-radius: var(--tlx-radius);
    padding: var(--tlx-space-lg) var(--tlx-space);
    text-align: center;
    margin-bottom: var(--tlx-space-lg);
    box-shadow: var(--tlx-shadow);
}

.full-term-term {
    font-size: 22px;
    font-weight: 800;
    color: var(--tlx-primary-text);
    line-height: 1.2;
    word-break: break-word;
}

.sort-chip {
    background: var(--tlx-bg-card);
    border: 1px solid var(--tlx-primary-light);
    color: var(--tlx-primary);
    box-shadow: var(--tlx-shadow);
    padding: var(--tlx-space-xs) var(--tlx-space);
    border-radius: 15px;
    font-size: var(--tlx-font-size-sm);
    cursor: pointer;
    margin: 2px;
    display: inline-block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sort-chip:hover {
    transform: translateY(-1px);
    box-shadow: var(--tlx-shadow-strong);
}
.sort-chip.active-sort {
    background: var(--tlx-primary);
    color: #fff;
    border-color: var(--tlx-primary-dark);
}
.split-chips-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tlx-space-xs);
}


/* --- 3.4 Filter-Elemente (Sidebar) --- */
.sidebar-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tlx-space);
}
.sidebar-options-row label {
    font-size: var(--tlx-font-size);
    color: var(--tlx-text);
    cursor: pointer;
    display: flex;
    align-items: center;
}
.sidebar-options-row input {
    margin-right: var(--tlx-space-xs);
}

/* === Nizza-Klassen-Grid === */
.mini-class-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: var(--tlx-space-xs) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.class-chip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100% !important;
    height: 30px;
    font-size: var(--tlx-font-size-sm);
    font-weight: 600;
    background: var(--tlx-bg-card);
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius-sm);
    color: var(--tlx-text-muted);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.class-chip:hover {
    background: var(--tlx-border-light);
    border-color: var(--tlx-text-faint);
}
.class-chip.active {
    background: var(--tlx-primary);
    color: #fff;
    border-color: var(--tlx-primary-dark);
    font-weight: bold;
}

.sidebar-info-box {
    margin-top: var(--tlx-space);
    padding: var(--tlx-space-sm);
    background: var(--tlx-bg);
    border-left: 3px solid var(--tlx-border);
    font-size: var(--tlx-font-size-sm);
    line-height: 1.4;
    color: var(--tlx-text-muted);
    border-radius: var(--tlx-radius-sm);
}

/* === Statistik-Boxen === */
.stats-vertical-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tlx-space-sm);
    margin-bottom: var(--tlx-space);
}
.stat-box-side {
    background: var(--tlx-bg-card);
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius-sm);
    padding: var(--tlx-space-sm) var(--tlx-space-xs);
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.stat-box-side:hover {
    background: var(--tlx-bg-hover);
    border-color: var(--tlx-primary);
}
.stat-box-side.active-filter {
    background: var(--tlx-primary-bg);
    border-color: var(--tlx-primary);
}
.sb-val {
    display: block;
    font-weight: bold;
    font-size: var(--tlx-font-size-lg);
    color: var(--tlx-text);
}
.sb-lbl {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: var(--tlx-text-faint);
    margin-top: 2px;
}

.stat-reset-btn {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--tlx-bg);
    border: 1px solid var(--tlx-border);
    padding: var(--tlx-space-xs) var(--tlx-space-sm);
    font-size: var(--tlx-font-size-sm);
    border-radius: var(--tlx-radius-sm);
    cursor: pointer;
    color: var(--tlx-text-muted);
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.stat-reset-btn:hover {
    background: var(--tlx-danger-bg);
    border-color: var(--tlx-danger);
    color: var(--tlx-danger);
}

/* === Admin-Status-Filter === */
.tlx-status-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--tlx-space);
}
.tlx-status-col h4 {
    margin: 0 0 var(--tlx-space-xs) 0;
    font-size: var(--tlx-font-size-sm);
    text-transform: uppercase;
    font-weight: bold;
    border-bottom: 1px solid var(--tlx-border-light);
    padding-bottom: 3px;
}
.tlx-status-checkbox-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: var(--tlx-text);
    cursor: pointer;
    padding: 2px 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tlx-status-checkbox-item:hover {
    color: var(--tlx-primary);
    background-color: var(--tlx-bg);
}
.tlx-status-checkbox-item input {
    margin-right: 6px;
}
.admin-summary {
    font-size: var(--tlx-font-size-sm);
    font-weight: bold;
    color: var(--tlx-text-muted);
    cursor: pointer;
    text-transform: uppercase;
}


/* --- 3.5 Hauptsuche --- */
.main-search-bar-container {
    background: var(--tlx-bg-card);
    padding: 0 0 var(--tlx-space-lg) 0;
}
.search-section {
    display: flex;
    position: relative;
    border: 1px solid var(--tlx-border);
    border-radius: var(--tlx-radius-sm);
    background: var(--tlx-bg-card);
    box-shadow: var(--tlx-shadow);
}

.search-input-wrapper {
    flex: 1;
    position: static;
}
#searchInput {
    flex: 1;
    border: none;
    padding: 15px var(--tlx-space-lg) !important;
    font-size: var(--tlx-font-size-lg) !important;
    background: transparent;
    width: 100%;
    color: var(--tlx-text);
    font-family: inherit;
}
#searchInput:focus {
    outline: none;
}

.search-btn {
    background: var(--tlx-primary);
    color: #fff;
    border: none;
    padding: 0 var(--tlx-space-lg);
    cursor: pointer;
    border-radius: 0 var(--tlx-radius-sm) var(--tlx-radius-sm) 0;
    font-weight: 500;
    font-size: var(--tlx-font-size);
    font-family: inherit;
    transition: background 0.15s ease;
}
.search-btn:hover {
    background: var(--tlx-primary-dark);
}
.search-btn.loading .spinner {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: var(--tlx-space-xs);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}


/* --- 3.6 Live-Search (Milchglas) --- */
#liveSearchDropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-top: var(--tlx-space-xs);
    border-radius: var(--tlx-radius);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: var(--tlx-shadow-strong);
    max-height: 500px;
    overflow-y: auto;
    display: none;
}
.live-item {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: var(--tlx-space) var(--tlx-space);
    font-size: var(--tlx-font-size);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.live-item:hover {
    background: rgba(0, 115, 170, 0.10);
    color: var(--tlx-primary);
}
.live-category-header {
    background: rgba(240, 240, 240, 0.9);
    backdrop-filter: blur(5px);
    padding: var(--tlx-space-xs) var(--tlx-space);
    font-size: var(--tlx-font-size-sm);
    font-weight: bold;
    color: var(--tlx-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.live-item small {
    color: var(--tlx-text-faint);
    font-size: var(--tlx-font-size-sm);
    margin-left: var(--tlx-space);
    background: rgba(255, 255, 255, 0.5);
    padding: 2px var(--tlx-space-xs);
    border-radius: var(--tlx-radius-sm);
}


/* --- 3.7 Pagination (Pillen) --- */
.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--tlx-space-lg);
    padding: var(--tlx-space-xl) 0;
    margin-top: var(--tlx-space-lg);
    border-top: 1px solid var(--tlx-border-light);
}
.page-btn {
    background: var(--tlx-bg-card);
    border: 1px solid var(--tlx-border);
    color: var(--tlx-text-muted);
    padding: var(--tlx-space-sm) var(--tlx-space-lg);
    border-radius: var(--tlx-radius-pill);
    font-size: var(--tlx-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    box-shadow: var(--tlx-shadow);
    font-family: inherit;
}
.page-btn:hover:not(:disabled) {
    background: var(--tlx-primary);
    color: #fff;
    border-color: var(--tlx-primary);
    transform: translateY(-1px);
    box-shadow: var(--tlx-shadow-strong);
}
.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--tlx-bg-subtle);
    box-shadow: none;
}
.page-info {
    font-size: var(--tlx-font-size);
    color: var(--tlx-text-faint);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.page-info span {
    color: var(--tlx-text);
    font-weight: bold;
}


/* --- 3.8 Detail-Panel --- */
.details-column {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 500px;
    height: 100vh;
    background: var(--tlx-bg-card);
    z-index: 2000;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.18);
    padding: var(--tlx-space-xl);
    overflow-y: auto;
    border-left: 1px solid var(--tlx-border-light);
}
.close-details-btn {
    float: right;
    cursor: pointer;
    font-size: 24px;
    color: var(--tlx-text-faint);
    margin-bottom: var(--tlx-space);
    line-height: 1;
    background: none;
    border: none;
    padding: 0;
}
.close-details-btn:hover {
    color: var(--tlx-text);
}

.detail-header {
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid var(--tlx-border-light);
    padding-bottom: var(--tlx-space-lg);
    margin-bottom: var(--tlx-space-lg);
}
.detail-logo {
    max-width: 120px;
    max-height: 100px;
    margin-right: var(--tlx-space-lg);
    border: 1px solid var(--tlx-border-light);
    padding: var(--tlx-space-xs);
    background: var(--tlx-bg-card);
    border-radius: var(--tlx-radius-sm);
}
.header-content { flex: 1; }
.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.status-badge {
    padding: var(--tlx-space-xs) var(--tlx-space-sm);
    border-radius: var(--tlx-radius-sm);
    font-size: var(--tlx-font-size-sm);
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.status-active   { background-color: var(--tlx-success); }
.status-inactive { background-color: var(--tlx-neutral); }

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tlx-space) var(--tlx-space-xl);
    margin-bottom: var(--tlx-space-lg);
    font-size: var(--tlx-font-size);
    background: var(--tlx-bg-subtle);
    padding: var(--tlx-space);
    border-radius: var(--tlx-radius-sm);
}
.detail-item {
    display: flex;
    flex-direction: column;
}
.detail-item label {
    font-size: 10px;
    color: var(--tlx-text-faint);
    text-transform: uppercase;
    margin-bottom: 3px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.detail-item span {
    font-weight: 500;
    color: var(--tlx-text);
    word-break: break-word;
}

.section-title {
    font-size: var(--tlx-font-size);
    font-weight: bold;
    color: var(--tlx-text-muted);
    text-transform: uppercase;
    border-bottom: 2px solid var(--tlx-border-light);
    padding-bottom: var(--tlx-space-xs);
    margin-bottom: var(--tlx-space-sm);
    margin-top: var(--tlx-space-lg);
    letter-spacing: 0.3px;
}

.gs-list {
    font-size: var(--tlx-font-size);
    line-height: 1.5;
    max-height: 200px;
    overflow-y: auto;
    background: var(--tlx-bg-card);
    padding: var(--tlx-space);
    border: 1px solid var(--tlx-border-light);
    border-radius: var(--tlx-radius-sm);
}
.gs-class {
    font-weight: bold;
    color: var(--tlx-primary);
    margin-right: var(--tlx-space-xs);
}


/* ============================================================
   4. MOBILE
   ============================================================ */
@media (max-width: 900px) {
    .search-layout-wrapper { flex-direction: column; }
    .search-sidebar {
        width: 100%;
        position: static;
        max-height: none;
    }
    .details-column { width: 90%; }
    .tlx-inquiry-form__row { flex-direction: column; align-items: stretch; }
    .tlx-inquiry-form__field--grow { min-width: 0; }
}

/* ============================================================
   V2-ERGÄNZUNGEN — Mockup-Design (flach, hell, feine Rahmen)
   ============================================================ */

:root {
    --tlx-admin-offset: 0px;
    --tlx-head-offset: 88px;
    --t-border: #e6e5e2;
    --t-border-soft: #efeeec;
    --t-bg: #ffffff;
    --t-bg-soft: #f7f7f5;
    --t-text: #262624;
    --t-sec: #5f5e5a;
    --t-mut: #98978f;
    --t-accent: #185fa5;
    --t-chip-bg: #e6f1fb;
    --t-chip-txt: #0c447c;
    --t-ok-bg: #e1f5ee;
    --t-ok-txt: #0f6e56;
    --t-red-bg: #fcebeb;
    --t-red-txt: #a32d2d;
}
body.admin-bar { --tlx-admin-offset: 32px; }

#tm-widget.tlx-v2 { font-size: 15px; color: var(--t-text); }
#tm-widget.tlx-v2 * { box-sizing: border-box; }

.tlx-card {
    border: 1px solid var(--t-border);
    border-radius: 12px;
    background: var(--t-bg);
}

/* --- Kopfzeile --- */
.tlx-topzone {
    position: sticky;
    top: var(--tlx-admin-offset);
    z-index: 500;
    background: var(--t-bg);
    border-bottom: 1px solid var(--t-border);
    border-radius: 12px 12px 0 0;
}
.tlx-topbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; gap: 12px;
}
.tlx-topbar-left { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; min-width: 0; }
.tlx-term { font-size: 19px; font-weight: 600; color: var(--t-text); }
.tlx-meta { font-size: 13px; color: var(--t-mut); white-space: nowrap; }

.tlx-chipsrow {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 7px 16px 9px;
    background: var(--t-bg-soft);
    border-top: 1px solid var(--t-border-soft);
}
.tlx-chips-label { font-size: 13px; color: var(--t-mut); }
.tlx-chip {
    background: var(--t-chip-bg); color: var(--t-chip-txt);
    padding: 2px 9px; border-radius: 12px; font-size: 13px;
    display: inline-flex; align-items: center; gap: 5px;
}
.tlx-chip a { color: var(--t-chip-txt); text-decoration: none; font-weight: bold; }
.tlx-chip a:hover { color: var(--t-red-txt); }
.tlx-chips-reset { font-size: 13px; color: var(--t-accent); margin-left: 6px; text-decoration: none; }
.tlx-chips-reset:hover { text-decoration: underline; }

/* --- Layout: Sidebar + Inhalt in der Karte --- */
#tm-widget.tlx-v2 .search-layout-wrapper {
    display: flex; gap: 0; align-items: stretch; margin: 0;
}
#tm-widget.tlx-v2 .search-sidebar {
    width: 210px; flex: 0 0 210px;
    background: var(--t-bg-soft);
    border-right: 1px solid var(--t-border);
    border-radius: 0 0 0 12px;
    padding: 14px;
    position: sticky;
    top: calc(var(--tlx-admin-offset) + var(--tlx-head-offset));
    align-self: flex-start;
    max-height: calc(100vh - var(--tlx-head-offset) - 20px);
    overflow-y: auto;
}
#tm-widget.tlx-v2 .search-main-content {
    flex: 1; min-width: 0; padding: 14px 16px;
}

/* Sidebar-Widgets flach, mit Trennlinien statt Boxen */
#tm-widget.tlx-v2 .sidebar-widget {
    background: transparent; border: none; box-shadow: none;
    padding: 0; margin: 0 0 14px 0;
}
#tm-widget.tlx-v2 .sidebar-header {
    font-size: 13px; font-weight: 600; color: var(--t-mut);
    text-transform: none; letter-spacing: 0;
    border: none; margin: 0 0 6px 0; padding: 0;
}
#tm-widget.tlx-v2 .sidebar-divider { border-top: 1px solid var(--t-border-soft); margin: 12px 0; }
#tm-widget.tlx-v2 .sidebar-options-row { display: flex; flex-direction: column; gap: 3px; }
#tm-widget.tlx-v2 .sidebar-options-row label,
.tlx-filter-col label { font-size: 15px; color: var(--t-sec); cursor: pointer; }
.tlx-filter-col { display: flex; flex-direction: column; gap: 3px; }
.tlx-filter-col input, #tm-widget.tlx-v2 .sidebar-options-row input { margin-right: 5px; }
.tlx-cnt { color: var(--t-mut); font-size: 13px; }
.tlx-opp-filter {
    display: flex; align-items: center; gap: 5px; font-size: 15px;
    color: var(--t-sec); cursor: pointer; margin-top: 8px;
}

/* Statistik als Metrik-Kacheln */
#tm-widget.tlx-v2 .stats-vertical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#tm-widget.tlx-v2 .stat-box-side {
    background: var(--t-bg); border: 1px solid var(--t-border-soft); border-radius: 8px;
    padding: 8px 6px; text-align: center; cursor: pointer;
    display: flex; flex-direction: column; gap: 1px;
    transition: border-color .12s;
}
#tm-widget.tlx-v2 .stat-box-side:hover { border-color: var(--t-accent); }
#tm-widget.tlx-v2 .stat-box-side.active-filter { border: 2px solid var(--t-accent); padding: 7px 5px; }
#tm-widget.tlx-v2 .sb-val { font-size: 18px; font-weight: 600; }
#tm-widget.tlx-v2 .sb-lbl { font-size: 12px; color: var(--t-mut); }
#tm-widget.tlx-v2 .risk-vhigh { color: #d63384; }
#tm-widget.tlx-v2 .risk-high { color: #fd7e14; }
#tm-widget.tlx-v2 .stat-reset-btn {
    margin-top: 8px; text-align: center; font-size: 14px; color: var(--t-accent);
    border: 1px dashed var(--t-border); border-radius: 8px; padding: 6px; cursor: pointer;
}
#tm-widget.tlx-v2 .stat-reset-btn:hover { background: var(--t-bg); }

/* Nizza-Chips */
#tm-widget.tlx-v2 .mini-class-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
#tm-widget.tlx-v2 .class-chip {
    border: 1px solid var(--t-border); background: var(--t-bg); border-radius: 6px;
    font-size: 13px; text-align: center; padding: 3px 0; cursor: pointer; color: var(--t-sec);
}
#tm-widget.tlx-v2 .class-chip:hover { border-color: var(--t-accent); color: var(--t-accent); }
#tm-widget.tlx-v2 .class-chip.active {
    background: var(--t-chip-bg); border-color: var(--t-accent); color: var(--t-chip-txt); font-weight: 600;
}
#tm-widget.tlx-v2 .sidebar-info-box {
    margin-top: 8px; border: 1px solid var(--t-border-soft); border-radius: 6px;
    background: var(--t-bg); font-size: 13px; color: var(--t-sec); padding: 8px; min-height: 46px;
}

/* Wort-Chips */
#tm-widget.tlx-v2 .sort-chip {
    border: 1px solid var(--t-border); background: var(--t-bg); color: var(--t-sec);
    border-radius: 12px; padding: 2px 10px; font-size: 13px; cursor: pointer;
}
#tm-widget.tlx-v2 .sort-chip.active-sort {
    background: var(--t-chip-bg); color: var(--t-chip-txt); border-color: var(--t-accent);
}

/* --- Suchleiste --- */
#tm-widget.tlx-v2 .main-search-bar-container { margin-bottom: 12px; }
#tm-widget.tlx-v2 .search-section { display: flex; align-items: center; }
#tm-widget.tlx-v2 .search-input-wrapper { position: relative; flex: 1; }
#tm-widget.tlx-v2 #searchInput {
    width: 100%; padding: 8px 12px; font-size: 15px;
    border: 1px solid var(--t-border); border-radius: 6px; background: var(--t-bg);
}
#tm-widget.tlx-v2 #searchInput:focus { outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 2px var(--t-chip-bg); }
#tm-widget.tlx-v2 .search-btn {
    background: var(--t-bg); border: 1px solid var(--t-border); color: var(--t-sec);
    padding: 8px 16px; font-size: 15px; cursor: pointer;
}
#tm-widget.tlx-v2 .search-btn:hover { background: var(--t-bg-soft); }

/* --- Buttons --- */
.tlx-btn {
    background: var(--t-bg); border: 1px solid var(--t-border); color: var(--t-text);
    padding: 6px 14px; border-radius: 6px; cursor: pointer; font-size: 15px;
}
.tlx-btn:hover { background: var(--t-bg-soft); }
.tlx-btn-primary { background: #262624; border-color: #262624; color: #fff; }
.tlx-btn-primary:hover { background: #3d3d3a; }
.tlx-btn-green { background: #1d9e75; border-color: #1d9e75; color: #fff; }
.tlx-btn-green:hover { background: #0f6e56; }

/* --- Trefferliste --- */
#tm-widget.tlx-v2 .tlx-table-wrapper table {
    width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed;
    background: var(--t-bg);
}
#tm-widget.tlx-v2 .tlx-table-wrapper thead th {
    position: sticky;
    top: calc(var(--tlx-admin-offset) + var(--tlx-head-offset));
    background: var(--t-bg);
    z-index: 400;
    font-size: 13px; font-weight: 500; color: var(--t-mut);
    text-align: left; padding: 7px 6px;
    border-bottom: 1px solid var(--t-border);
    text-transform: none;
}
#tm-widget.tlx-v2 .tlx-table-wrapper tbody td {
    padding: 9px 6px; border-bottom: 1px solid var(--t-border-soft);
    vertical-align: top; color: var(--t-text);
}
#tm-widget.tlx-v2 .tlx-table-wrapper tbody tr { cursor: pointer; }
#tm-widget.tlx-v2 .tlx-table-wrapper tbody tr:hover { background: #fbfbfa; }
#tm-widget.tlx-v2 .inactive-row { opacity: 0.55; }
#tm-widget.tlx-v2 .tlx-risk-ident-row { background: var(--t-red-bg); }
#tm-widget.tlx-v2 .tlx-risk-ident-row:hover { background: #f9e0e0; }

.tlx-brand { font-weight: 600; }
.tlx-subline { font-size: 13px; color: var(--t-mut); margin-top: 2px; font-weight: normal; }
.tlx-owner-cell { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tlx-hl { background: #f7c1c1; color: #501313; padding: 0 1px; border-radius: 2px; }
.tlx-opp-line { font-size: 13px; color: var(--t-red-txt); font-weight: 600; margin-top: 2px; }
.tlx-active-row { outline: 2px solid var(--t-accent); outline-offset: -2px; }
.tlx-sortable { cursor: pointer; user-select: none; }
.tlx-sortable:hover { color: var(--t-accent); }

.tlx-riskbar {
    height: 4px; width: 56px; background: var(--t-border-soft);
    border-radius: 2px; margin-top: 3px; overflow: hidden;
}
.tlx-riskbar div { height: 100%; border-radius: 2px; }

/* Gruppen */
#tm-widget.tlx-v2 .tlx-group-head { background: var(--t-red-bg); cursor: pointer; }
#tm-widget.tlx-v2 .tlx-group-head:hover { background: #f9e0e0; }
.tlx-group-chev { color: var(--t-red-txt); font-size: 14px; }
.tlx-group-badge {
    background: var(--t-bg); border: 1px solid #f0b4b4; color: var(--t-red-txt);
    padding: 1px 8px; border-radius: 10px; font-size: 13px; margin-left: 8px; white-space: nowrap;
}
.tlx-group-risk { color: var(--t-red-txt); font-weight: 600; font-size: 14px; }
#tm-widget.tlx-v2 .tlx-group-member { background: var(--t-bg-soft); }
#tm-widget.tlx-v2 .tlx-group-member td:first-child { border-left: 3px solid #f0b4b4; }
.tlx-indent { color: #ccc; }

/* Speicher-Indikator */
.tlx-save-ind { display: inline-block; width: 14px; font-size: 13px; margin-left: 3px; }
.tlx-saving { color: var(--t-mut); }
.tlx-saved { color: #1d9e75; font-weight: bold; }
.tlx-save-err { color: #dc3545; font-weight: bold; cursor: help; }

/* Bulk-Leiste */
.tlx-bulkbar {
    display: flex; align-items: center; gap: 10px;
    background: var(--t-chip-bg); border: 1px solid #b5d4f4; border-radius: 6px;
    padding: 8px 12px; margin-bottom: 12px; font-size: 15px; color: var(--t-chip-txt);
}
.tlx-bulkbar select { padding: 4px; font-size: 14px; border: 1px solid var(--t-border); border-radius: 6px; }
.tlx-bulk-status { color: var(--t-sec); font-size: 14px; }

/* Leerzustand & Pagination */
.zero-result-box {
    padding: 40px; text-align: center; color: var(--t-sec);
    background: var(--t-bg-soft); border: 1px dashed var(--t-border); border-radius: 8px;
}
.zero-result-box a { color: var(--t-accent); }
#tm-widget.tlx-v2 .pagination-bar { display: flex; align-items: center; justify-content: center; gap: 6px; }
#tm-widget.tlx-v2 .page-btn {
    background: var(--t-bg); border: 1px solid var(--t-border); border-radius: 6px;
    padding: 5px 12px; font-size: 14px; color: var(--t-sec); cursor: pointer;
}
#tm-widget.tlx-v2 .page-btn:hover:not(:disabled) { background: var(--t-bg-soft); }
#tm-widget.tlx-v2 .page-btn:disabled { opacity: .4; cursor: default; }
#tm-widget.tlx-v2 .page-info { font-size: 14px; color: var(--t-sec); }

/* --- Detail-Layer --- */
.details-column { flex-direction: column; }
.tlx-detail-nav {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 12px; border-bottom: 1px solid var(--t-border); margin-bottom: 12px;
}
.tlx-detail-pos { font-size: 13px; color: var(--t-mut); margin-left: 4px; }
.tlx-detail-nav .close-details-btn { margin-left: auto; float: none; }

.detail-logo-wrap { position: relative; cursor: zoom-in; margin-right: 20px; flex-shrink: 0; }
.detail-logo-wrap .detail-logo { margin-right: 0; border: 1px solid var(--t-border); border-radius: 6px; padding: 6px; background: #fff; }
.tlx-zoom-hint {
    position: absolute; right: 4px; bottom: 4px; font-size: 14px;
    background: rgba(255,255,255,0.85); border-radius: 3px; padding: 1px 3px;
    opacity: 0; transition: opacity .15s;
}
.detail-logo-wrap:hover .tlx-zoom-hint { opacity: 1; }
.tlx-img-missing {
    width: 120px; min-height: 80px; border: 1px dashed var(--t-border); border-radius: 6px;
    display: flex; align-items: center; justify-content: center; text-align: center;
    cursor: default; background: var(--t-bg-soft);
}
.tlx-img-missing-txt { font-size: 13px; color: var(--t-mut); padding: 6px; }

.tlx-opp-badge { background-color: var(--t-red-bg); color: var(--t-red-txt); text-transform: none; }
#detailPanel .status-badge.status-active { background: var(--t-ok-bg); color: var(--t-ok-txt); }

.tlx-assessment {
    margin-top: 20px; border: 1px dashed var(--t-mut); border-radius: 8px;
    padding: 12px 14px; background: var(--t-bg-soft);
}
.tlx-assessment-head {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;
    font-size: 13px; color: var(--t-mut); font-weight: 600;
}
.tlx-assessment-vis {
    border: 1px solid var(--t-border); color: var(--t-sec); padding: 1px 7px; border-radius: 4px;
    font-size: 12px; font-weight: normal;
}

/* --- Lightbox --- */
#tlxLightbox {
    display: none; position: fixed; z-index: 5000; inset: 0;
    background: rgba(0,0,0,0.55);
    align-items: center; justify-content: center;
}
.tlx-lightbox-inner {
    background: #fff; border-radius: 8px; max-width: 640px; width: 92%;
    max-height: 85vh; overflow: hidden; display: flex; flex-direction: column;
}
.tlx-lightbox-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 16px; border-bottom: 1px solid var(--t-border); font-size: 15px; font-weight: 600;
}
.tlx-lightbox-img {
    background: #fff; display: flex; align-items: center; justify-content: center;
    padding: 24px; overflow: auto;
}
.tlx-lightbox-img img { max-width: 100%; max-height: 62vh; }

/* --- Export-Modal --- */
#exportModal {
    display: none; position: fixed; z-index: 4900; inset: 0;
    background-color: rgba(0,0,0,0.45);
}
.tlx-modal-box {
    background: #fff; margin: 8% auto; padding: 0; border-radius: 8px;
    width: 440px; max-width: 92%; box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    font-size: 15px; overflow: hidden;
}
.tlx-modal-box h3 {
    margin: 0 !important; padding: 14px 18px !important;
    border-bottom: 1px solid var(--t-border) !important;
    font-size: 17px; font-weight: 600;
}
.tlx-modal-box > div { padding-left: 18px; padding-right: 18px; }
.tlx-modal-box > div:nth-of-type(1) { padding-top: 16px; }
.tlx-modal-box > div:last-of-type {
    background: var(--t-bg-soft); border-top: 1px solid var(--t-border) !important;
    padding: 12px 18px !important; margin-top: 4px;
}
.tlx-scope-row {
    display: flex; justify-content: space-between; align-items: center;
    border: 1px solid var(--t-border); border-radius: 6px; padding: 8px 10px;
    margin-bottom: 6px; cursor: pointer;
}
.tlx-scope-row:has(input:checked) { border-color: var(--t-accent); background: var(--t-bg-soft); }
.tlx-scope-row input { margin-right: 8px; }

@media (max-width: 900px) {
    #tm-widget.tlx-v2 .search-layout-wrapper { flex-direction: column; }
    #tm-widget.tlx-v2 .search-sidebar {
        position: static; width: 100%; flex: none; max-height: none;
        border-right: none; border-bottom: 1px solid var(--t-border); border-radius: 0;
    }
    .tlx-topzone { position: static; }
    #tm-widget.tlx-v2 .tlx-table-wrapper thead th { position: static; }
}

/* V2: Widget bricht aus der Theme-Spalte aus (Muster wie Bestand) */
#tm-widget.tlx-v2 {
    box-sizing: border-box;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
    padding-right: max(var(--tlx-space-lg), calc(50vw - var(--tlx-max-width) / 2)) !important;
}

/* ============================================================
   V2-FEINSCHLIFF (Stand 09.07.2026)
   ============================================================ */

/* Tabellen-Wrapper darf kein Scroll-Container sein, sonst haftet der Kopf falsch */
#tm-widget.tlx-v2 .tlx-table-wrapper {
    overflow: visible;
    box-shadow: none;
    background: transparent;
    border-radius: 0;
}

/* Buchstaben-Hervorhebung dezenter */
.tlx-hl { background: #fbe3e3; color: inherit; }

/* Gruppen und Identisch-Zeilen in Blau statt Rot */
#tm-widget.tlx-v2 .tlx-group-head { background: #eaf2fb; }
.tlx-group-chev { color: #185fa5; }
.tlx-group-badge { background: #fff; border-color: #b5d4f4; color: #0c447c; }
.tlx-group-risk { color: #a32d2d; } /* Risikostufe bleibt semantisch rot */
#tm-widget.tlx-v2 .tlx-group-member td:first-child { border-left-color: #b5d4f4; }
#tm-widget.tlx-v2 .tlx-risk-ident-row { background: #f3f8fe; }

/* Mouseover in hellem Ton von #8cc63f */
#tm-widget.tlx-v2 .tlx-table-wrapper tbody tr:hover { background: #f1f8e5; }
#tm-widget.tlx-v2 .tlx-group-head:hover { background: #e6f2d2; }
#tm-widget.tlx-v2 .tlx-risk-ident-row:hover { background: #ecf5db; }

/* ============================================================
   V2: Übersichtsseite (Recherchen)
   ============================================================ */
.tlx-ov-card {
    border: 1px solid var(--t-border, #e6e5e2);
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    font-size: 15px;
    color: #262624;
}
.tlx-ov-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid #e6e5e2; gap: 12px; flex-wrap: wrap;
}
.tlx-ov-title { font-size: 18px; font-weight: 600; }
.tlx-ov-sub { font-size: 13px; color: #98978f; }
.tlx-ov-head-right { display: flex; gap: 8px; align-items: center; }
.tlx-ov-head-right input {
    width: 220px; padding: 7px 12px; font-size: 14px;
    border: 1px solid #e6e5e2; border-radius: 6px;
}
.tlx-ov-head-right input:focus { outline: none; border-color: #185fa5; }

.tlx-ov-tabs {
    display: flex; gap: 6px; padding: 10px 20px;
    border-bottom: 1px solid #e6e5e2; background: #f7f7f5;
}
.tlx-ov-tab {
    padding: 3px 12px; border-radius: 14px; font-size: 13px;
    border: 1px solid #d8d7d3; color: #5f5e5a; cursor: pointer; background: #fff;
}
.tlx-ov-tab:hover { border-color: #185fa5; color: #185fa5; }
.tlx-ov-tab.active { background: #262624; border-color: #262624; color: #fff; }

.tlx-ov-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tlx-ov-table thead th {
    font-size: 13px; font-weight: 500; color: #98978f; text-align: left;
    padding: 9px 10px; border-bottom: 1px solid #e6e5e2; background: #fff;
}
.tlx-ov-table thead th:first-child, .tlx-ov-table tbody td:first-child { padding-left: 20px; }
.tlx-ov-table thead th:last-child, .tlx-ov-table tbody td:last-child { padding-right: 20px; }
.tlx-ov-table tbody td {
    padding: 11px 10px; border-bottom: 1px solid #efeeec; vertical-align: top; font-size: 14px;
}
.tlx-ov-table tbody tr:hover { background: #f1f8e5; }
.tlx-ov-term { font-weight: 600; font-size: 15px; }
.tlx-ov-meta { font-size: 12px; color: #98978f; margin-top: 2px; }
.tlx-ov-register { color: #5f5e5a; }
.tlx-ov-empty { padding: 40px; text-align: center; color: #98978f; }

.tlx-ov-badge {
    display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px;
}
.tlx-ov-badge--ok { background: #e1f5ee; color: #0f6e56; }
.tlx-ov-badge--run { background: #e6f1fb; color: #0c447c; }
.tlx-ov-badge--neutral { background: #f0f0ee; color: #5f5e5a; }

/* V2: Detail-Layer nach Mockup */
.tlx-detail-subline { font-size: 13px; color: #98978f; margin-top: 4px; }
.tlx-detail-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px;
    background: #f7f7f5; border-radius: 8px; padding: 12px 14px; margin: 14px 0;
}
.tlx-detail-grid > div { display: flex; align-items: baseline; gap: 8px; }  /* [DETAIL-LAYOUT 20260815] Wert neben Label */
.tlx-detail-grid label {
    flex: 0 0 110px; font-size: 12px; color: #98978f; font-weight: normal;
}
.tlx-detail-grid span { font-size: 14px; color: #262624; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.tlx-scrollable-cell { display: block; max-height: 74px; overflow-y: auto; }
.tlx-detail-label {
    font-size: 13px; color: #98978f; font-weight: 600; margin: 14px 0 5px;
}
.tlx-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.tlx-party-body { font-size: 14px; }
.tlx-goods-box {
    border: 1px solid #efeeec; border-radius: 8px; padding: 10px 12px;
    max-height: 170px; overflow-y: auto; font-size: 13px; line-height: 1.5;
}
.tlx-goods-box .gs-class { color: #185fa5; font-weight: 600; background: none; padding: 0; }
.tlx-detail-footer {
    display: flex; align-items: center; gap: 10px;
    border-top: 1px solid #e6e5e2; margin-top: 16px; padding-top: 14px;
}
.tlx-detail-footer select {
    padding: 4px 8px; font-size: 14px; border: 1px solid #e6e5e2; border-radius: 6px; width: 76px;
}
.tlx-detail-export {
    margin-left: auto; font-size: 13px; color: #5f5e5a; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
}

/* V2: Detail-Kopf mit Wortbestandteil-Rahmen */
.tlx-detail-head { display: flex; gap: 12px; align-items: stretch; margin-bottom: 6px; }
.tlx-detail-head .detail-logo-wrap { margin-right: 0; display: flex; }
.tlx-detail-head .detail-logo { max-width: 120px; max-height: 96px; object-fit: contain; }
.tlx-verbal-box {
    flex: 1; min-width: 90px; min-height: 88px; /* [BADGE-WRAP] Mindestbreite */
    border: 1px solid #e6e5e2; border-radius: 6px; background: #f7f7f5;
    display: flex; align-items: center; justify-content: center; padding: 8px 12px;
}
.tlx-verbal-box span {
    font-size: 19px; font-weight: 600; text-align: center; word-break: break-word;
}
.tlx-detail-badges {
    display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
    /* [BADGE-WRAP 20260815] Spalte gedeckelt statt flex-shrink:0 —
       lange Badges brechen zweizeilig um, Bild und Name bleiben sichtbar */
    flex-shrink: 1; max-width: 48%; min-width: 0;
}
.tlx-detail-badges .status-badge {
    white-space: normal; text-align: right; line-height: 1.3;
    width: fit-content; max-width: 100%; /* [BADGE-FIT 20260815] Pille schmiegt sich an die laengste Zeile */
}
.tlx-d-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 8px; border-radius: 4px; font-size: 12px;
}
.tlx-d-badge--frame { border: 1px solid #d8d7d3; color: #5f5e5a; background: #fff; }

/* V2: Suchbegriff im Kopf doppelt so groß und gerahmt */
.tlx-term {
    font-size: 38px;
    font-weight: 700;
    line-height: 1.1;
    border: 1px solid #e6e5e2;
    border-radius: 6px;
    background: #f7f7f5;
    padding: 6px 18px;
    display: inline-block;
}
.tlx-topbar { align-items: center; }
.tlx-topbar-left { align-items: center; }

/* V2: Undo-Einblendung fuer Ziffern-Bewertung */
#tlxUndoToast {
    display: none; position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    background: #262624; color: #fff; padding: 10px 18px; border-radius: 8px;
    font-size: 14px; z-index: 6000; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
#tlxUndoToast a { color: #9fd0ff; text-decoration: underline; margin-left: 6px; }

/* V2: Datenstand der Register unter der Pagination */
.tlx-office-status {
    text-align: center; font-size: 12px; color: #98978f;
    margin-top: 14px; padding: 8px 0 4px; border-top: 1px solid #efeeec;
}

/* V2: Start-Button im Recherche-Formular deutlich hervorheben */
.tlx-btn-start {
    font-size: 16px !important;
    font-weight: 600;
    padding: 10px 28px !important;
    background: #262624 !important;
    border-color: #262624 !important;
    color: #fff !important;
    border-radius: 8px !important;
    cursor: pointer;
}
.tlx-btn-start:hover { background: #3d3d3a !important; }

/* ============================================================
   V2: Monitoring (tlx_mm)
   ============================================================ */
.tlx-chip--click { cursor: pointer; border: 1px solid #d8d7d3; background: #fff; color: #5f5e5a; }
.tlx-chip--click:hover { border-color: #185fa5; color: #185fa5; }
.tlx-chip--active { background: #262624 !important; border-color: #262624 !important; color: #fff !important; }

.tlx-mm-ev {
    display: inline-block; padding: 1px 8px; border-radius: 4px; font-size: 12px;
    border: 1px solid #d8d7d3; color: #5f5e5a; background: #fff;
}
.tlx-mm-ev--opp {
    border-color: #f0b4b4; color: #a32d2d; font-weight: 600; background: #fff;
}
.tlx-mm-ev--done { background: #f0f0ee; border-color: #e6e5e2; color: #98978f; }

.tlx-mm-seg {
    display: inline-flex; border: 1px solid #d8d7d3; border-radius: 6px;
    overflow: hidden; font-size: 12px; white-space: nowrap;
}
.tlx-mm-seg-btn { padding: 3px 8px; color: #5f5e5a; cursor: pointer; }
.tlx-mm-seg-btn:hover { background: #f1f8e5; }
.tlx-mm-seg-btn + .tlx-mm-seg-btn { border-left: 1px solid #efeeec; }
.tlx-mm-seg--active { background: #262624; color: #fff; }
.tlx-mm-seg--active:hover { background: #262624; }

#tm-widget.tlx-v2 .tlx-mm-lapsed { opacity: 0.55; }
#tm-widget.tlx-v2 .tlx-mm-newrow td:first-child { border-left: 3px solid #185fa5; }
.tlx-mm-manual {
    display: inline-block; background: #e6f1fb; color: #0c447c;
    font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 3px;
    vertical-align: middle; margin-left: 4px;
}
.tlx-mm-cls-hit {
    background: #e6f1fb; color: #0c447c; font-weight: 600;
    padding: 0 5px; border-radius: 3px;
}
.tlx-mm-note {
    width: 100%; min-height: 70px; font-size: 14px; padding: 8px 10px;
    border: 1px solid #e6e5e2; border-radius: 6px; resize: vertical;
    font-family: inherit;
}
.tlx-mm-note:focus { outline: none; border-color: #185fa5; }

.tlx-mm-form-row {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; margin-bottom: 10px; font-size: 14px;
}
.tlx-mm-form-row select, .tlx-mm-form-row input {
    padding: 5px 8px; font-size: 14px; border: 1px solid #e6e5e2; border-radius: 6px;
}
.tlx-mm-formgrid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 16px; font-size: 13px;
}
.tlx-mm-formgrid label { display: flex; flex-direction: column; gap: 3px; color: #5f5e5a; }
.tlx-mm-formgrid input, .tlx-mm-formgrid select {
    padding: 6px 9px; font-size: 14px; border: 1px solid #e6e5e2; border-radius: 6px;
}
.tlx-mm-offices { display: flex; gap: 12px; padding: 6px 0; }
.tlx-mm-offices label { flex-direction: row; align-items: center; gap: 4px; }

#mmSettingsModal {
    display: none; position: fixed; z-index: 4900; inset: 0;
    background-color: rgba(0,0,0,0.45);
}
#mmSettingsModal .tlx-modal-box { padding: 0 18px 14px; }

/* ==========================================================================
   [MM-UI-1 20260715] Monitoring: Sektion "Kritische Marken"
   ========================================================================== */
.tlx-mm-crit-head {
    font-size: 15px;
    font-weight: 700;
    color: #0c447c;
    margin: 4px 0 10px 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tlx-mm-crit-head .tlx-cnt { font-weight: 400; color: #98978f; }
.tlx-mm-crit-zone {
    border-left: 3px solid #0c447c;
    background: #f7f9fc;
    border-radius: 0 6px 6px 0;
}
.tlx-mm-crit-empty {
    font-size: 13px;
    color: #98978f;
    padding: 10px 12px;
    background: #faf9f5;
    border: 1px dashed #e5e3dc;
    border-radius: 6px;
}
.tlx-mm-sep {
    border-bottom: 1px solid #e5e3dc;
    margin: 20px 0 16px 0;
}
.tlx-mm-crit-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.5;
    color: #0c447c;
    background: #fff;
    border: 1px solid #c7d4e4;
    border-radius: 4px;
    cursor: pointer;
}
.tlx-mm-crit-btn:hover { background: #eef3fa; }
.tlx-mm-crit-btn--rm { color: #6b6a63; border-color: #d9d7cf; }
.tlx-mm-crit-btn--rm:hover { background: #f3f2ed; }

/* [CHIPS-STATS 20260815] Kennzahlen-Pillen rechtsbuendig in der Filterzeile */
.tlx-chip-stats { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tlx-chip-stat {
    font-size: 12px; color: #98978f; background: #fff;
    border: 1px solid #e4e2dd; border-radius: 6px;
    padding: 3px 8px; white-space: nowrap;
}
.tlx-chip-stat b { font-size: 13px; color: #262624; margin-right: 3px; font-weight: 600; }
.tlx-chip-stat--sel b { color: #2563eb; }
.tlx-chip-stat--vh b  { color: #c2185b; }
.tlx-chip-stat--hi b  { color: #e8590c; }

/* [SIDEBAR-STATS-WEG 20260815] Zaehl-Pillen als Klick-Filter */
.tlx-chip-stat--btn { cursor: pointer; user-select: none; }
.tlx-chip-stat--btn:hover { border-color: #bcbab3; }
.tlx-chip-stat.active-filter {
    border-color: #2563eb;
    box-shadow: inset 0 0 0 1px #2563eb;
    background: #f0f6ff;
}

/* [USEARCH-AJAX 20260815] Vorschlags-Dropdown der Admin-Nutzersuche */
.tlx-usuggest {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%;
    background: #fff; border: 1px solid #ddd; border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.10); z-index: 60;
    max-height: 280px; overflow: auto; text-align: left;
}
.tlx-usuggest-item {
    display: block; padding: 8px 10px; font-size: 13px;
    color: inherit; text-decoration: none; white-space: nowrap;
}
.tlx-usuggest-item:hover { background: #f0f6ff; }
.tlx-usuggest-leer { color: #888; cursor: default; }
.tlx-usuggest-meta { color: #888; font-size: 12px; }