/* App-spezifisches Layout */

header.topbar {
    background: var(--dark-bg);
    color: var(--text-light);
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 24px;
}
header.topbar .brand {
    font-weight: 600;
    font-size: 1.15rem;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}
header.topbar .brand .version {
    font-size: .72rem;
    font-weight: 400;
    color: var(--text-light);
    opacity: .65;
    background: rgba(255,255,255,.08);
    padding: 2px 9px;
    border-radius: 999px;
    letter-spacing: .02em;
    border: 1px solid rgba(255,255,255,.18);
    font-family: inherit;
    cursor: pointer;
    transition: opacity .15s, background .15s;
}
header.topbar .brand .version:hover {
    opacity: 1;
    background: rgba(255,255,255,.18);
}
header.topbar .brand .version:focus-visible {
    outline: 2px solid white;
    outline-offset: 1px;
}
header.topbar nav {
    display: flex;
    gap: 4px;
}
header.topbar nav a {
    color: var(--text-light);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: .95rem;
}
header.topbar nav a.active, header.topbar nav a:hover {
    background: rgba(255,255,255,.12);
    text-decoration: none;
}
header.topbar nav a.nav-demo {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    margin-left: 6px;
    font-weight: 500;
}
header.topbar nav a.nav-demo:hover {
    background: var(--primary-green);
    border-color: var(--primary-green);
}
header.topbar .status {
    margin-left: auto;
    font-size: .85rem;
    opacity: .9;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}
header.topbar .status.ok::before { content: "●"; color: #81c784; margin-right: 4px; }
header.topbar .status.err::before { content: "●"; color: #ef5350; margin-right: 4px; }
header.topbar .status .status-sep { opacity: .5; }
header.topbar .status .status-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 255, 255, .5);
}
header.topbar .status .status-link:hover {
    text-decoration-style: solid;
    text-decoration-color: white;
}
header.topbar .status .status-model { font-weight: 600; }
header.topbar .status .status-phones { cursor: help; }

main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

/* Chat-View */
.chat-shell { display: flex; flex-direction: column; gap: 14px; height: calc(100vh - 110px); }
.chat-verlauf {
    flex: 1;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.bubble {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 10px;
    line-height: 1.5;
    word-wrap: break-word;
}
.bubble.user { align-self: flex-end; background: var(--primary-10); border: 1px solid var(--primary-30); }
.bubble.bot { align-self: flex-start; background: var(--primary-5); border: 1px solid var(--border-color); }
.bubble.bot strong { color: var(--primary-green); }
.bubble .meta { font-size: .8rem; color: #607d8b; margin-top: 6px; }

.bubble .mitarbeiter-bilder {
    float: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px 12px;
}
.bubble .mitarbeiter-bild {
    width: 80px;
    height: auto;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
/* Wenn nur ein Bild im Container, dann wie früher rechts schweben */
.bubble .mitarbeiter-bilder:has(.mitarbeiter-bild:only-child) {
    display: block;
}

.bubble .sources {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--primary-5);
    border-left: 3px solid var(--primary-30);
    border-radius: 4px;
    font-size: .88rem;
}
.bubble .sources-title { font-weight: 600; margin-bottom: 4px; color: var(--text-dark); }
.bubble .sources ul { margin: 0; padding-left: 4px; list-style: none; }
.bubble .sources li { margin: 2px 0; }
.bubble .sources a { color: var(--primary-green); }
.bubble .sources-idx { color: var(--text-muted, #888); font-weight: 600; margin-right: 4px; }
.bubble sup .footnote-link {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 600;
    padding: 0 1px;
}
.bubble sup .footnote-link:hover { text-decoration: underline; }

/* V2: Antwort-Modus + Inhalts-Beleg-Badges. */
.bubble .answer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 8px 0;
}
.bubble .answer-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.6;
    background: #eceff1;
    color: #455a64;
    border: 1px solid #cfd8dc;
}
.bubble .answer-badge.modus-info { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.bubble .answer-badge.modus-info_plus_routing { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.bubble .answer-badge.modus-routing { background: #fff8e1; color: #ef6c00; border-color: #ffe082; }
.bubble .answer-badge.modus-klaerung { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }
.bubble .answer-badge.modus-out_of_scope { background: #ffebee; color: #b71c1c; border-color: #ef9a9a; }
.bubble .answer-badge.cite-verified { background: #e8f5e9; color: #1b5e20; border-color: #66bb6a; }
.bubble .answer-badge.cite-partial { background: #fff3e0; color: #b87a00; border-color: #ffcc80; }

/* Pipeline-Anzeige im Chat-Tab (zeigt V1/V2) */
.chat-pipeline-indicator {
    padding: 6px 12px;
    margin-bottom: 8px;
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: .82rem;
    color: #455a64;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-pipeline-indicator.v1 { background: #e3f2fd; border-color: #90caf9; color: #0d47a1; }
.chat-pipeline-indicator.v2 { background: #e8f5e9; border-color: #66bb6a; color: #1b5e20; }
.chat-pipeline-indicator .chat-pipeline-hint { color: #607d8b; font-size: .78rem; }

/* Pipeline-Toggle im Debug-Tab */
.pipeline-toggle { background: #fafafa; border: 1px solid #ddd; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.pipeline-toggle h2 { margin-top: 0; }
.pipeline-toggle-buttons { display: flex; gap: 10px; margin: 10px 0; }
.pipeline-toggle-state { font-size: .9rem; color: #455a64; margin-top: 8px; }

/* Themenpakete-View (eigener Tab, read-only Browser) */
.tp-group { margin: 8px 0; }
.tp-group-title {
    font-weight: 700;
    color: var(--primary-green);
    font-size: .85rem;
    margin: 12px 0 4px 0;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.tp-row {
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 4px;
    cursor: pointer;
    background: white;
}
.tp-row:hover { background: var(--primary-5); }
.tp-row-titel { font-weight: 600; }
.tp-row-meta { font-size: .78rem; color: #607d8b; margin-top: 2px; }
.tp-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 600;
    margin-left: 6px;
    vertical-align: middle;
}
.tp-badge.prod { background: #e8f5e9; color: #1b5e20; border: 1px solid #66bb6a; }
.tp-badge.draft { background: #fff3e0; color: #b87a00; border: 1px solid #ffcc80; }
.tp-badge.draft-pending { background: #fce4ec; color: #ad1457; border: 1px solid #f48fb1; }
.tp-badge.season { background: #e3f2fd; color: #1565c0; border: 1px solid #90caf9; }

.tp-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: #455a64; margin: 8px 0 14px 0; }
.tp-intro { padding: 10px 14px; background: var(--primary-5); border-left: 3px solid var(--primary-30); border-radius: 4px; margin: 8px 0; }
.tp-saison, .tp-trigger { margin: 6px 0; font-size: .9rem; }
.tp-quellen-block { margin: 10px 0; }
.tp-quellen-block summary { cursor: pointer; padding: 4px 0; }
.tp-quellen-block ul { padding-left: 24px; }

.tp-sub {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 10px 0;
}
.tp-sub h4 { margin: 0 0 4px 0; color: var(--primary-green); }
.tp-sub-meta { font-size: .78rem; color: #607d8b; margin-bottom: 8px; }
.tp-fakten { padding-left: 20px; margin: 8px 0; }
.tp-fakten li { margin: 6px 0; }
.tp-fakt-text { color: var(--text-dark); }
.tp-fakt-quelle { font-size: .78rem; color: #546e7a; margin-top: 2px; }
.tp-faq, .tp-kontakte { margin: 8px 0; font-size: .88rem; }
.tp-faq ul { padding-left: 20px; }

.bubble-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    opacity: 0;
    transition: opacity .15s;
}
.bubble.user:hover .bubble-actions,
.bubble.user:focus-within .bubble-actions,
.bubble.editing .bubble-actions { opacity: 1; }
.bubble-action {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 2px 8px;
    font: inherit;
    font-size: .75rem;
    color: #455a64;
    cursor: pointer;
    line-height: 1.4;
}
.bubble-action:hover:not(:disabled) { background: var(--primary-5); border-color: var(--primary-30); color: var(--primary-green); }
.bubble-action:disabled { opacity: .5; cursor: not-allowed; }
.bubble.editing {
    outline: 2px dashed var(--primary-green);
    outline-offset: 2px;
}

/* ===== Artikel-Reader (Quellen-Link-Modal) ===== */
.art-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1200;
    padding: 16px;
}
.art-choose {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    padding: 22px 26px 18px;
    max-width: 480px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.art-choose-title {
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.4;
    padding-right: 24px;
}
.art-choose-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.art-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #607d8b;
    padding: 2px 6px;
}
.art-close:hover { color: var(--text-dark); }

.art-reader {
    position: relative;
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    width: 720px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.art-reader-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary-green), #2e7d32);
    color: white;
    position: relative;
}
.art-reader-head .art-close { color: rgba(255,255,255,.85); top: 10px; right: 12px; }
.art-reader-head .art-close:hover { color: white; }
.art-reader-titel {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    padding-right: 32px;
    color: white;
}
.art-reader-body {
    padding: 20px 26px 22px;
    overflow-y: auto;
    flex: 1 1 auto;
    line-height: 1.65;
    color: #2c3e50;
    font-size: .95rem;
}
.art-meta {
    font-size: .8rem;
    color: #78909c;
    margin-bottom: 6px;
    letter-spacing: .02em;
}
.art-titel {
    margin: 0 0 8px;
    color: var(--primary-green);
    font-size: 1.35rem;
    line-height: 1.3;
}
.art-lead {
    font-size: 1.02rem;
    color: #37474f;
    font-style: italic;
    margin: 0 0 14px;
}
.art-text p { margin: 0 0 10px; }
.art-text h1, .art-text h2, .art-text h3 { color: var(--primary-green); margin: 18px 0 6px; line-height: 1.3; }
.art-text h2 { font-size: 1.1rem; }
.art-text h3 { font-size: 1rem; }
.art-text a { color: var(--primary-green); }
.art-text ul, .art-text ol { padding-left: 22px; margin: 0 0 12px; }
.art-text li { margin: 3px 0; }
.art-loading, .art-empty { color: #78909c; font-style: italic; padding: 12px 0; }
.art-reader-foot {
    padding: 10px 22px;
    border-top: 1px solid var(--border-color);
    background: #fafbfc;
    display: flex;
    justify-content: flex-end;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: .85rem;
    cursor: pointer;
}
.chip:hover { background: var(--primary-5); border-color: var(--primary-30); }

.chat-input {
    display: flex;
    gap: 8px;
}
.chat-input textarea {
    flex: 1;
    resize: none;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font: inherit;
    font-size: 15px;
    min-height: 44px;
    max-height: 200px;
}
.chat-input textarea:focus { outline: none; border-color: var(--primary-green); }

/* ===== Globaler Button-Stil (Apple-System-Look) =====
   Eine einheitliche Höhe (var(--control-h)), einheitlicher Radius, dezente
   Schrift. Varianten: primary (Akzentfarbe), secondary (Outline), danger (rot),
   tertiary (textbasiert). Größenvarianten: btn-sm, btn-lg. */
.btn, button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-h);
    padding: 0 var(--control-px);
    border: 1px solid transparent;
    border-radius: var(--control-radius);
    font-family: inherit;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .05s, box-shadow .15s;
    white-space: nowrap;
}
.btn:focus-visible, button.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active:not(:disabled), button.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled, button.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn-primary, button.btn-primary {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
}
.btn-primary:hover:not(:disabled), button.btn-primary:hover:not(:disabled) {
    background: var(--hover-green);
    border-color: var(--hover-green);
}

.btn-secondary, button.btn-secondary {
    background: white;
    color: var(--text-dark);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled), button.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
}

.btn-danger, button.btn-danger {
    background: var(--color-danger-fg);
    color: white;
    border-color: var(--color-danger-fg);
}
.btn-danger:hover:not(:disabled), button.btn-danger:hover:not(:disabled) {
    background: #a31515;
    border-color: #a31515;
}

.btn-tertiary, button.btn-tertiary {
    background: transparent;
    color: var(--primary-green);
    border-color: transparent;
}
.btn-tertiary:hover:not(:disabled), button.btn-tertiary:hover:not(:disabled) {
    background: var(--primary-5);
}

.btn-sm, button.btn-sm { height: var(--control-h-sm); padding: 0 10px; font-size: 13px; }
.btn-lg, button.btn-lg { height: var(--control-h-lg); padding: 0 20px; font-size: 15px; }

/* Editor-View (KB & Prompts) */
.editor-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 16px;
    height: calc(100vh - 110px);
}
.file-list {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px;
    overflow-y: auto;
}
.file-list .file {
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: .93rem;
    border: 1px solid transparent;
}
.file-list .file:hover { background: var(--primary-5); }
.file-list .file.active { background: var(--primary-10); border-color: var(--primary-30); font-weight: 600; }
.file-list .file .meta { font-size: .75rem; color: #607d8b; }

.editor-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.editor-pane .toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.editor-pane .toolbar .filename { font-weight: 600; flex: 1; }
.editor-pane .toolbar .dirty::after { content: " *"; color: var(--color-warning-fg); }
.editor-pane textarea.code-area {
    flex: 1;
    resize: none;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    font-family: 'JetBrains Mono', 'Source Code Pro', monospace;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre;
    overflow: auto;
}
.editor-pane textarea.code-area:focus { outline: none; border-color: var(--primary-green); }

/* Debug-View / Traces */
.feedback-panel {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border-color);
}
.feedback-hint {
    color: #607d8b;
    font-size: 0.92em;
    margin: 4px 0 12px;
}
.fb-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 14px; }
.fb-stat {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.95em;
}
.fb-stat-pos { border-left: 4px solid #2e7d32; }
.fb-stat-neg { border-left: 4px solid #c62828; }
.feedback-list { display: flex; flex-direction: column; gap: 10px; }
.fb-row {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-left: 4px solid #c62828;
    border-radius: 6px;
    padding: 10px 14px;
}
.fb-row-head {
    display: flex; gap: 12px; align-items: baseline;
    font-size: 0.85em; color: #607d8b; margin-bottom: 6px;
}
.fb-row-abt { flex: 1; }
.fb-del {
    border: 1px solid var(--border-color); background: transparent;
    color: #90a4ae; cursor: pointer; padding: 0 8px; border-radius: 4px;
    font-size: 1.1em; line-height: 1;
}
.fb-del:hover { color: #c62828; border-color: #c62828; }
.fb-row-q, .fb-row-a { margin: 3px 0; font-size: 0.94em; }
.fb-row-comment {
    margin: 4px 0; padding: 6px 10px; background: #fffbf0;
    border-radius: 4px; font-style: italic; color: #5d4037;
}
.fb-row-actions { margin-top: 6px; font-size: 0.9em; }
.fb-open-trace { color: var(--primary-green); }

.trace-list { display: flex; flex-direction: column; gap: 10px; }
.trace-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 14px;
}
.trace-card header { display: flex; gap: 12px; align-items: baseline; }
.trace-card header .badge {
    font-size: .75rem;
    background: var(--primary-10);
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--primary-green);
}
.trace-card .query { font-weight: 600; }
.trace-card .meta { font-size: .85rem; color: #607d8b; margin-left: auto; }
.trace-card details { margin-top: 8px; }
.trace-card details summary { cursor: pointer; color: var(--primary-green); }
.trace-card pre {
    background: #fafafa;
    padding: 10px;
    border-radius: 4px;
    font-size: 12px;
    overflow: auto;
    max-height: 320px;
}

/* Toasts */
.toast-host {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9999;
}
.toast {
    background: var(--card-bg);
    border-left: 4px solid var(--primary-green);
    padding: 10px 16px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    min-width: 240px;
    font-size: .9rem;
}
.toast.warning { border-left-color: var(--color-warning-fg); background: var(--color-warning-bg); color: var(--color-warning-fg); }
.toast.danger { border-left-color: var(--color-danger-fg); background: var(--color-danger-bg); color: var(--color-danger-fg); }
.toast.success { border-left-color: var(--color-success-fg); background: var(--color-success-bg); color: var(--color-success-fg); }

/* Confirm-/Alert-Modal (Ersatz für native confirm/alert) */
.lk-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    animation: lk-modal-fade .15s ease-out;
}
@keyframes lk-modal-fade { from { opacity: 0; } to { opacity: 1; } }
.lk-modal {
    background: white;
    border-radius: 10px;
    padding: 20px 22px;
    max-width: 440px;
    width: calc(100% - 32px);
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
    animation: lk-modal-pop .18s ease-out;
}
@keyframes lk-modal-pop { from { transform: scale(.95); } to { transform: scale(1); } }
.lk-modal h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--text-dark); }
.lk-modal-body { font-size: .95rem; line-height: 1.5; color: var(--text-dark); margin-bottom: 18px; white-space: pre-wrap; }
.lk-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.btn-danger { background: #c62828; color: white; border: 0; }
.btn-danger:hover { background: #a31515; }

/* Empty state */
.empty { padding: 40px; text-align: center; color: #90a4ae; }

.cursor::after {
    content: "▌";
    color: var(--primary-green);
    animation: blink 1s infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Stage-Progress in der Bot-Bubble waehrend des Streams */
.stage-progress {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border-color);
    font-size: .78rem;
}
.stage-pill {
    padding: 2px 9px;
    border-radius: 999px;
    background: white;
    border: 1px solid var(--border-color);
    color: #455a64;
    line-height: 1.3;
}
.stage-pill.running {
    background: var(--primary-5);
    border-color: var(--primary-30);
    color: var(--primary-green);
    position: relative;
}
.stage-pill.running::after {
    content: " …";
    animation: blink 1s infinite;
}
.stage-pill.done {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--color-success-fg);
}
.stage-pill.failed {
    background: var(--color-danger-bg);
    border-color: var(--color-danger-border);
    color: var(--color-danger-fg);
}

/* Lexikon-Editor (Synonyme + Tag-Keywords) */
.lexicon-shell {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    height: calc(100vh - 230px);
    min-height: 480px;
}
.lexicon-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.lex-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-color);
    border-radius: 18px;
    background: var(--card-bg);
    cursor: pointer;
    font-size: .9rem;
}
.lex-tab:hover { background: var(--primary-5); }
.lex-tab.active {
    background: var(--primary-green);
    color: white;
    border-color: var(--primary-green);
    font-weight: 600;
}
.lexicon-meta {
    background: var(--primary-5);
    border: 1px solid var(--primary-30);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .88rem;
}
.lex-meta-row { color: #455a64; }
.lex-meta-row strong { color: var(--primary-green); }
.lex-meta-desc { color: #607d8b; font-size: .85rem; margin-top: 4px; }
#lexicon-editor {
    flex: 1;
    width: 100%;
    font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
    font-size: .88rem;
    line-height: 1.45;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    resize: vertical;
    min-height: 320px;
    background: var(--card-bg);
}
#lexicon-editor:disabled {
    background: #f5f5f5;
    color: #999;
}
.lexicon-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lexicon-status {
    font-size: .88rem;
    color: #607d8b;
}
.lexicon-status.is-dirty { color: var(--color-warning-fg); font-style: italic; }
.lexicon-status.is-pending { color: #607d8b; font-style: italic; }
.lexicon-status.is-ok { color: var(--primary-green); }
.lexicon-status.is-err { color: #c62828; }

/* Trace-Detail (Debug-Tab) - Stage-Cards */
.trace-final {
    background: var(--primary-5);
    border: 1px solid var(--primary-30);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
}
.trace-final-row { font-size: .9rem; margin: 2px 0; }
.trace-final-row strong { color: var(--primary-green); }

/* Ablauf-Diagramm im Debug-Tab (Mermaid-Funnel) */
.trace-flow {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
    margin: 0 0 10px 0;
}
.trace-flow > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-green);
    padding: 2px 0;
}
.trace-flow .mermaid-host {
    margin-top: 8px;
    overflow-x: auto;
    text-align: center;
}
.trace-flow .mermaid-host svg {
    max-width: 100%;
    height: auto;
}
.trace-flow .mermaid-src {
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px;
    font-size: .75rem;
    overflow: auto;
    max-height: 320px;
}
/* Ablauf-Baum: Klartext-Knoten mit klickbaren Verzweigungen.
   Jede Stufe ist eine Box, Verbindungen entstehen aus einer linken
   Border-Linie zwischen den Boxen. Verzweigungen pro Stufe sind eine
   eingerückte Liste mit eigenem L-Connector. */
.flow-tree {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 6px 4px 6px 14px;
    position: relative;
}
.flow-tree::before {
    content: "Klick auf eine Stufe oder einen Datenpunkt → Detail-Modal";
    display: block;
    color: #607d8b;
    font-size: .82rem;
    font-style: italic;
    margin-bottom: 4px;
}
.tree-node {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: white;
    padding: 0;
    overflow: hidden;
}
.tree-node.tone-in { border-color: #90a4ae; background: #f5f7f8; }
.tree-node.tone-active { border-color: var(--primary-30); background: #f8fbf8; }
.tree-node.tone-skip { border-color: #cfd8dc; background: #fafafa; opacity: .65; border-style: dashed; }
.tree-node.tone-short { border-color: #ef6c00; background: #fff8f0; }
.tree-node.tone-end { border-color: #1b5e20; background: #e8f5e9; }

.tree-node-head {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.tree-node-head:hover { background: rgba(0, 0, 0, 0.025); }
.tree-node-title {
    font-weight: 600;
    color: #263238;
    font-size: .96rem;
}
.tree-node.tone-active .tree-node-title { color: var(--primary-green); }
.tree-node.tone-short .tree-node-title { color: #bf360c; }
.tree-node.tone-end .tree-node-title { color: #1b5e20; }
.tree-node-sub {
    font-size: .8rem;
    color: #607d8b;
    margin-top: 1px;
}
.tree-node-note {
    font-size: .85rem;
    color: #455a64;
    margin-top: 4px;
    line-height: 1.4;
}

.tree-branches {
    list-style: none;
    margin: 0;
    padding: 6px 12px 8px 28px;
    position: relative;
}
.tree-branches::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 10px;
    border-left: 2px solid var(--primary-30);
}
.tree-branch {
    position: relative;
    padding: 5px 8px 5px 14px;
    margin: 2px 0;
    border-radius: 4px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
    transition: background .12s ease;
}
.tree-branch::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 14px;
    width: 12px;
    border-top: 2px solid var(--primary-30);
}
.tree-branch:hover {
    background: var(--primary-5);
}
.tree-branch:hover .tree-branch-label {
    color: var(--primary-green);
}
.tree-branch-label {
    font-weight: 600;
    color: #455a64;
    font-size: .87rem;
    margin-right: 8px;
}
.tree-branch-label::after { content: ":"; margin-left: 1px; }
.tree-branch-value {
    color: #263238;
    font-size: .9rem;
    word-break: break-word;
}
.tree-branch-hint {
    display: block;
    font-size: .77rem;
    color: #78909c;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.35;
}
.tree-node.tone-skip .tree-branch { cursor: default; }
.tree-node.tone-skip .tree-branch:hover { background: transparent; }

/* Verbindungslinie zwischen den Stufen-Boxen */
.tree-node:not(:last-child)::after {
    content: "▼";
    position: absolute;
    left: -2px;
    bottom: -14px;
    color: var(--primary-30);
    font-size: .7rem;
    transform: translateX(8px);
}

/* Stage-Detail-Modal (geöffnet aus dem Mermaid-Click) */
.lk-stage-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.lk-stage-modal {
    background: white;
    border-radius: 10px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}
.lk-stage-modal > header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-5);
}
.lk-stage-modal > header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: var(--primary-green);
    flex: 1;
}
.lk-modal-close {
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: #607d8b;
    padding: 0 6px;
}
.lk-modal-close:hover { color: #263238; }
.lk-stage-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    font-size: .92rem;
    line-height: 1.5;
}
.lk-modal-explain {
    background: #f8fbf8;
    border-left: 3px solid var(--primary-green);
    padding: 8px 10px;
    margin-bottom: 10px;
    border-radius: 0 4px 4px 0;
}
.lk-modal-why {
    border-left-color: #ef6c00;
    background: #fff8f0;
}
.lk-modal-section {
    margin: 14px 0;
}
.lk-modal-section h4 {
    margin: 0 0 6px 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--primary-green);
}
.lk-modal-quote {
    background: #fafafa;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 8px 10px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .85rem;
    white-space: pre-wrap;
}
.lk-modal-turn {
    background: #fafafa;
    border-left: 2px solid var(--primary-30);
    padding: 4px 8px;
    margin: 4px 0;
    font-size: .85rem;
}
.lk-turn-role {
    font-weight: 600;
    color: var(--primary-green);
    margin-right: 6px;
}
.lk-kv {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.lk-kv th {
    text-align: left;
    vertical-align: top;
    width: 38%;
    padding: 4px 8px 4px 0;
    color: #455a64;
    font-weight: 500;
}
.lk-kv td {
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.lk-kv tr:last-child td { border-bottom: 0; }
.lk-list { margin: 0; padding: 0 0 0 16px; }
.lk-list li { margin: 2px 0; }
.lk-list .lk-more { color: #999; font-style: italic; }
.lk-k { color: var(--primary-green); font-weight: 500; }
.lk-chip {
    display: inline-block;
    background: var(--primary-10);
    border: 1px solid var(--primary-30);
    color: var(--primary-green);
    border-radius: 12px;
    padding: 1px 8px;
    margin: 1px 3px 1px 0;
    font-size: .82rem;
}
.lk-true { color: var(--primary-green); font-weight: 600; }
.lk-false { color: #c62828; }
.lk-empty { color: #999; font-style: italic; }

.trace-steps { display: flex; flex-direction: column; gap: 6px; }
.trace-step {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 6px 10px;
}
.trace-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.trace-step-summary { flex: 1; color: #546e7a; font-size: .85rem; }
.trace-step-num { color: #90a4ae; font-size: .78rem; }
.trace-step details { margin-top: 4px; }
.trace-step details summary { font-size: .8rem; color: #607d8b; cursor: pointer; }
.trace-step pre {
    background: #fafafa;
    padding: 8px;
    border-radius: 4px;
    font-size: 11.5px;
    overflow: auto;
    max-height: 240px;
    margin: 4px 0 0;
}

.stage-badge {
    display: inline-block;
    color: white;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
}

.trace-foot {
    margin-top: 8px;
    font-size: .82rem;
    color: #607d8b;
    text-align: right;
}

/* Burger-Toggle (nur mobil sichtbar) */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    width: 38px;
    height: 38px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    height: 2px;
    background: var(--text-light);
    border-radius: 2px;
}

/* Mitarbeiter-View */
.mitarbeiter-shell {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 16px;
    height: calc(100vh - 110px);
}
.mitarbeiter-sidebar {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.mitarbeiter-sidebar input[type="search"] {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    font: inherit;
    font-size: 14px;
}
.mitarbeiter-sidebar input[type="search"]:focus {
    outline: none;
    background: var(--primary-5);
}
.mit-stats {
    padding: 6px 12px;
    font-size: .78rem;
    color: #607d8b;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mit-stats .dot { color: #cfd8dc; }
.mit-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.mit-group { padding: 6px 0; }
.mit-group-head {
    padding: 6px 12px 4px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #90a4ae;
    background: #fafbfc;
    border-bottom: 1px solid #eceff1;
    position: sticky;
    top: 0;
    z-index: 1;
}
.mit-row {
    padding: 8px 12px;
    border-bottom: 1px solid #f0f3f5;
    cursor: pointer;
}
.mit-row:hover { background: var(--primary-5); }
.mit-row.active { background: var(--primary-10); border-left: 3px solid var(--primary-green); padding-left: 9px; }
.mit-row-main { display: flex; flex-direction: column; gap: 2px; }
.mit-name { font-weight: 600; font-size: .92rem; color: var(--text-dark); display: flex; align-items: center; gap: 6px; }
.mit-funktion { font-size: .8rem; color: #546e7a; }
.mit-themen { font-size: .72rem; color: var(--primary-green); margin-top: 2px; }
.mit-badge {
    display: inline-block;
    background: var(--primary-green);
    color: white;
    font-size: .68rem;
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
}

.mitarbeiter-detail {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 18px;
    overflow-y: auto;
}
.mit-detail-head {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 14px;
}
.mit-detail-bild {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.mit-detail-headtext h2 {
    margin: 0 0 4px;
    font-size: 1.35rem;
    color: var(--primary-green);
}
.mit-detail-funktion { color: var(--text-dark); margin-bottom: 4px; }
.mit-detail-abt { font-size: .9rem; color: #455a64; }
.mit-detail-weitere { font-size: .78rem; color: #90a4ae; margin-top: 2px; }

.mit-detail-kontakt {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: var(--primary-5);
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: .92rem;
}
.mit-detail-kontakt a { color: var(--primary-green); }
.mit-kontakt-block { display: flex; flex-direction: column; gap: 2px; }
.mit-kontakt-block + .mit-kontakt-block {
    padding-top: 8px;
    border-top: 1px dashed rgba(46, 125, 50, .25);
}
.mit-kontakt-head { font-weight: 600; color: var(--primary-green); font-size: .85rem; }
.mit-kontakt-fkt { font-weight: normal; color: #455a64; }
.mit-kontakt-row { display: flex; flex-wrap: wrap; gap: 18px; }

.mit-detail-section { margin: 14px 0; }
.mit-detail-section h3 {
    margin: 0 0 6px;
    font-size: .95rem;
    color: var(--text-dark);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 4px;
}
.mit-detail-section > div { font-size: .88rem; margin: 2px 0; }
.thema-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.thema-chip {
    background: var(--primary-10);
    color: var(--primary-green);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
}
.ressort-chip {
    background: white;
    border: 1px solid var(--border-color);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .78rem;
    color: #455a64;
    display: inline-block;
    margin-right: 3px;
}
.art-list { margin: 6px 0 0; padding-left: 18px; max-height: 360px; overflow-y: auto; }
.art-list li { margin: 3px 0; font-size: .88rem; }
.art-list .art-meta { color: #90a4ae; font-size: .75rem; margin-left: 6px; }
.mit-noart { padding: 16px; font-size: .85rem; }
.empty-inline { padding: 6px 0; font-size: .82rem; color: #90a4ae; font-style: italic; }
.mit-themen-quelle { font-size: .72rem; font-weight: normal; color: #90a4ae; }
.mit-detail-slug { margin-top: 14px; font-size: .72rem; color: #90a4ae; }
.mit-detail-slug code { background: #f0f3f5; padding: 1px 5px; border-radius: 3px; }

/* Edit-Button rechts in der Detail-Kopfzeile */
.mit-edit-btn { margin-left: auto; }
button.btn-danger { background: #c62828; color: white; border: none; }
button.btn-danger:hover { background: #b71c1c; }

/* Mitarbeiter-Edit-Formular */
.mit-edit-form { display: flex; flex-direction: column; gap: 12px; }
.mit-edit-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}
.mit-edit-head h2 { margin: 0; font-size: 1.1rem; color: var(--primary-green); }
.mit-edit-slug { font-size: .75rem; color: #90a4ae; font-weight: normal; margin-left: 4px; }
.mit-edit-actions { display: flex; gap: 8px; }
.mit-edit-rows { display: flex; flex-direction: column; gap: 12px; }
.mit-edit-row {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 14px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
}
.mit-edit-row legend { font-size: .85rem; color: #455a64; padding: 0 6px; }
.mit-edit-row label { display: flex; flex-direction: column; font-size: .78rem; color: #455a64; }
.mit-edit-row input {
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
}
.mit-edit-row input:focus { outline: 2px solid var(--primary-green); outline-offset: -1px; }
.mit-edit-row .mit-row-remove { grid-column: 1 / -1; justify-self: end; padding: 4px 10px; font-size: .8rem; }
.mit-edit-titel-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 8px 14px;
}
.mit-edit-hint { font-size: .78rem; color: #607d8b; line-height: 1.4; }

/* ===== Themen-Tab (Produkte-Editor) ===== */
.themen-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 14px;
    height: calc(100vh - 110px);
}
.themen-sidebar {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.themen-sidebar input[type=search] {
    margin: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font: inherit;
}
.themen-stats { padding: 0 12px 6px; font-size: .78rem; color: #607d8b; }
.themen-list { flex: 1; overflow-y: auto; padding: 0 0 12px; }
.themen-group-head {
    background: var(--primary-5);
    color: var(--primary-green);
    font-size: .8rem;
    font-weight: 700;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-top: 1px solid var(--border-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    user-select: none;
}
.themen-group-head:hover { background: var(--primary-10); }
.themen-group-head.open { background: var(--primary-10); }
.themen-caret {
    display: inline-block;
    width: 12px;
    text-align: center;
    color: var(--primary-green);
    font-size: .9rem;
}
.themen-kat-name { flex: 1; }
.themen-kat-count {
    font-weight: 600;
    color: #607d8b;
    background: white;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .72rem;
}
.themen-row { padding: 6px 12px; cursor: pointer; border-bottom: 1px solid #f0f3f5; }
.themen-row:hover { background: var(--primary-5); }
.themen-row.active { background: var(--primary-10); border-left: 3px solid var(--primary-green); padding-left: 9px; }
.themen-row-titel { font-size: .9rem; color: var(--text-dark); }
.themen-row-slug { font-size: .72rem; color: #90a4ae; margin-top: 2px; }
.themen-badge {
    display: inline-block;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    vertical-align: middle;
}
.themen-badge.bauer { background: #e3f2fd; color: #1565c0; }
.themen-badge.thin { background: #fff3e0; color: #e65100; }
.themen-badge.dead { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }

.themen-detail {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    overflow-y: auto;
}
.themen-detail .toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}
.themen-detail .toolbar h2 { margin: 0; font-size: 1.1rem; color: var(--primary-green); }
.themen-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.themen-form label { display: flex; flex-direction: column; font-size: .78rem; color: #455a64; }
.themen-form label.full { grid-column: 1 / -1; }
.themen-form input, .themen-form textarea {
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: white;
}
.themen-form textarea { min-height: 70px; resize: vertical; }
.themen-form input:focus, .themen-form textarea:focus { outline: 2px solid var(--primary-green); outline-offset: -1px; }
.themen-detail-md {
    margin-top: 14px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}
.themen-detail-md textarea {
    width: 100%;
    min-height: 320px;
    font: 13px/1.5 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    resize: vertical;
}
.themen-readonly {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fffbe6;
    border: 1px solid #ffd54f;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: .82rem;
    color: #6d4c00;
    margin-bottom: 12px;
}
.themen-readonly-badge {
    background: #ffd54f;
    color: #6d4c00;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.themen-bauer-meta {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 4px 10px;
    margin: 12px 0;
    font-size: .88rem;
}
.themen-bauer-meta dt { color: #607d8b; font-weight: 600; }
.themen-bauer-meta dd { margin: 0; word-break: break-all; }
.themen-bauer-meta dd code { background: #f0f3f5; padding: 1px 5px; border-radius: 3px; font-size: .82rem; }
.themen-bauer-hint { font-size: .78rem; color: #607d8b; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.themen-bauer-hint code { background: #f0f3f5; padding: 1px 5px; border-radius: 3px; }

/* ===== PIN-Modal ===== */
.pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.pin-modal {
    background: white;
    padding: 22px 26px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
    min-width: 320px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pin-modal h3 { margin: 0; color: var(--primary-green); font-size: 1.15rem; }
.pin-modal p { margin: 0; color: #455a64; font-size: .88rem; }
.pin-modal input {
    padding: 10px 12px;
    font: inherit;
    font-size: 1.1rem;
    letter-spacing: .15em;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    text-align: center;
}
.pin-modal input:focus { outline: 2px solid var(--primary-green); outline-offset: -1px; }
.pin-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== Changelog-Modal ===== */
.changelog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.changelog-overlay.hidden { display: none; }
.changelog-modal {
    background: white;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    width: 560px;
    max-width: 100%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.changelog-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--primary-green), #2e7d32);
    color: white;
}
.changelog-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 0 0 auto; color: white; }
.changelog-version { font-size: .8rem; opacity: .85; flex: 1 1 auto; color: white; }
.changelog-close {
    background: transparent;
    border: 0;
    color: white;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: .8;
}
.changelog-close:hover { opacity: 1; }
.changelog-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1 1 auto;
}
.changelog-release + .changelog-release {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f3f5;
}
.changelog-release-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.changelog-release-ver { font-weight: 600; color: #1f2937; }
.changelog-release-date { font-size: .78rem; color: #9aa5b1; }
.changelog-badge {
    font-size: .7rem;
    background: #e0f2f1;
    color: var(--primary-green);
    padding: 2px 10px;
    border-radius: 10px;
    font-weight: 500;
}
.changelog-items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.changelog-items li {
    position: relative;
    padding: 4px 0 4px 22px;
    font-size: .88rem;
    line-height: 1.5;
    color: #455a64;
}
.changelog-items li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 11px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-green);
}
.changelog-foot {
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    background: #fafbfc;
}

/* ===== Mobile (<= 760px) ===== */
@media (max-width: 760px) {
    main { padding: 10px; }

    /* Topbar: Burger an statt horizontaler Nav */
    header.topbar {
        gap: 8px;
        padding: 8px 12px;
        flex-wrap: wrap;
    }
    header.topbar .brand { font-size: 1rem; }
    header.topbar .status {
        order: 3;
        width: 100%;
        margin-left: 0;
        font-size: .75rem;
    }
    .nav-toggle { display: flex; }
    header.topbar nav {
        order: 4;
        width: 100%;
        display: none;
        flex-direction: column;
        gap: 2px;
        background: var(--dark-bg);
        margin-top: 6px;
    }
    header.topbar nav.open { display: flex; }
    header.topbar nav a { padding: 10px 14px; border-radius: 4px; }

    /* Chat */
    .chat-shell { height: calc(100vh - 140px); gap: 8px; }
    .bubble { max-width: 95%; padding: 8px 10px; }
    .bubble .mitarbeiter-bild {
        float: none;
        display: block;
        width: 100%;
        max-width: 220px;
        height: auto;
        margin: 0 0 10px 0;
    }
    .chips { gap: 4px; }
    .chip { font-size: .78rem; padding: 4px 9px; }
    .chat-input { flex-wrap: wrap; }
    .chat-input textarea { flex-basis: 100%; }
    button.btn { flex: 1; padding: 9px 12px; font-size: 14px; }

    /* Editoren: Sidebar oben, Editor darunter */
    .editor-shell,
    .mitarbeiter-shell,
    .themen-shell {
        display: flex;
        flex-direction: column;
        height: auto;
        gap: 8px;
    }
    .file-list,
    .mitarbeiter-sidebar,
    .themen-sidebar { height: 35vh; min-height: 220px; max-height: 45vh; }
    .editor-pane,
    .mitarbeiter-detail,
    .themen-detail { min-height: 50vh; }

    /* Manuelle-Quellen-Form: zwei-Spalten-Grid wird zu einer Spalte */
    .mq-row-2 { grid-template-columns: 1fr; }
    .mq-actions { flex-wrap: wrap; }
    .mq-actions .btn { flex: 1; min-width: 110px; }
    .mq-form input, .mq-form textarea { font-size: 16px; }  /* iOS-Zoom verhindern */

    /* Touch-Targets: alle Buttons mind. 44px hoch */
    .btn, button.btn { min-height: 44px; }
    .themen-list-item { padding: 10px 12px; }

    /* Marktdaten + Crawl: Tabellen sollen seitlich scrollen können */
    #view-marktdaten table,
    #view-crawl table { display: block; overflow-x: auto; max-width: 100%; }

    /* Trace-Cards kompakter */
    .trace-card { font-size: .85rem; }

    /* Lexikon-View kompakter */
    .lexicon-shell { display: flex; flex-direction: column; height: auto; gap: 8px; }

    /* Mitarbeiter-Detail kompakter */
    .mit-detail-bild { width: 80px; height: 80px; }
    .mit-detail-headtext h2 { font-size: 1.1rem; }
    .mit-detail-kontakt { gap: 8px; flex-direction: column; }
    .art-list { max-height: none; }

    /* Trace-View kompakter */
    .trace-card header { flex-direction: column; align-items: stretch; gap: 4px; }
    .trace-card .meta { margin-left: 0; }
}

/* ===== Sehr kleine Geräte (<= 380px) ===== */
@media (max-width: 380px) {
    header.topbar .brand { font-size: .9rem; }
    .mit-detail-head { flex-direction: column; }
    .mit-detail-bild { width: 100px; height: 100px; }
}

/* ----- Crawl-Tab ----- */
#view-crawl h3 { margin-top: 20px; font-size: 1rem; color: #555; }
.crawl-status { padding: 10px 14px; background: #f5f5f5; border-radius: 6px; margin-bottom: 14px; }
.crawl-badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: .8rem; font-weight: 600; color: white; background: #607d8b;
}
.crawl-badge.ok { background: var(--primary-green, #2e7d32); }
.crawl-badge.err { background: #c62828; }
.crawl-badge.off { background: #9e9e9e; }
.crawl-badge.running { background: #ef6c00; }
.crawl-badge.small { font-size: .72rem; padding: 1px 6px; }

.crawl-config {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px; background: #fafafa; border-radius: 6px; margin-bottom: 14px;
}
.crawl-config label { display: flex; align-items: center; gap: 6px; }
.crawl-config select { padding: 4px 8px; }
.crawl-config .btn { margin-left: auto; }

.crawl-last { padding: 10px 14px; background: #f9f9f9; border-radius: 6px; }
.crawl-diff-block {
    padding: 8px 12px; margin-bottom: 6px;
    background: #f0f7ed; border-left: 4px solid var(--primary-green, #2e7d32); border-radius: 4px;
}
.crawl-diff-block ul { margin: 6px 0 0; padding-left: 22px; font-size: .9rem; color: #444; }

.crawl-history-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.crawl-history-table th, .crawl-history-table td {
    padding: 6px 10px; text-align: left; border-bottom: 1px solid #eee;
}
.crawl-history-table th { background: #fafafa; font-weight: 600; }
.crawl-history-diff { color: #555; font-size: .85rem; }
.crawl-history-label { color: var(--primary-green); font-size: .8rem; font-style: italic; margin-top: 2px; }

.crawl-log-wrap { margin-top: 16px; }
.crawl-log {
    background: #1e1e1e; color: #d4d4d4; padding: 10px; border-radius: 4px;
    max-height: 400px; overflow: auto; font-size: .8rem; white-space: pre-wrap;
}

/* === Marktdaten-Tab === */
.md-list { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.md-card {
    border: 1px solid #d0d4d9;
    border-radius: 8px;
    padding: 12px 14px;
    background: #fafbfc;
}
.md-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.md-name { font-size: 1.05rem; }
.md-desc { color: #555; font-size: .9rem; margin-bottom: 8px; }
.md-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.md-toggle, .md-interval { display: inline-flex; align-items: center; gap: 6px; font-size: .92rem; }
.md-interval-val { width: 70px; padding: 3px 5px; }
.md-stats { color: #4a5660; font-size: .85rem; margin: 5px 0; }
.md-err {
    color: #c62828;
    background: #ffebee;
    padding: 6px 9px;
    border-radius: 4px;
    margin: 6px 0;
    font-size: .88rem;
}
.md-quelle { font-size: .82rem; color: #6c757d; margin-top: 6px; }
.md-quelle a { color: #1565c0; }
.md-werte { margin: 8px 0; }
.md-werte.hidden { display: none; }
.md-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.md-table th, .md-table td { text-align: left; padding: 5px 7px; border-bottom: 1px solid #e5e7eb; }
.md-table th { background: #eceff1; }
.md-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.4;
}
.md-badge-ok   { background: #e8f5e9; color: #2e7d32; }
.md-badge-warn { background: #fff3e0; color: #e65100; }
.md-badge-err  { background: #ffebee; color: #c62828; }
.md-badge-run  { background: #e3f2fd; color: #1565c0; }
.md-badge-idle { background: #eceff1; color: #455a64; }

/* PIN-Logout-Button: dezent in der Topbar rechts neben dem Status. */
.pin-logout {
    background: rgba(255,255,255,.08);
    color: var(--text-light);
    border: 1px solid rgba(255,255,255,.18);
    margin-left: 6px;
    font-weight: 500;
}
.pin-logout:hover:not(:disabled) {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.28);
}
.pin-logout[hidden] { display: none !important; }

/* =================================================================
   GLOBALE KOMPONENTEN (Apple-Look, einheitlich für alle Views)
   ================================================================= */

/* --- Form-Controls einheitlich --- */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="number"],
input[type="tel"],
select,
textarea {
    height: var(--control-h);
    padding: 0 var(--control-px);
    border: 1px solid var(--border-strong);
    border-radius: var(--control-radius);
    background: white;
    color: var(--text-dark);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}
textarea {
    height: auto;
    padding: 10px var(--control-px);
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
}
textarea.code-area, textarea.code { font-family: var(--font-mono); font-size: 13px; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-green);
    box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .8; }
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: not-allowed;
}

/* --- Labels --- */
label { font-size: 13px; font-weight: 500; color: var(--text-dark); }

/* --- Topbar (Apple-Style: Glas, dezent) --- */
header.topbar {
    background: rgba(38, 50, 56, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid rgba(255,255,255,.06);
    padding: 10px 20px;
}
header.topbar nav a {
    font-weight: 500;
    font-size: 14px;
    border-radius: var(--radius-md);
    padding: 8px 12px;
}

/* --- Shells: einheitlicher Card-Look für die Sidebars und Detail-Panels --- */
.themen-sidebar,
.mitarbeiter-sidebar,
.file-list,
.themen-detail,
.mitarbeiter-detail,
.editor-pane {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

/* --- Toolbar (über Editoren) --- */
.toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px var(--space-4);
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-2);
}
.toolbar .filename { font-weight: 600; flex: 1; min-width: 0; }

/* --- Listen-Items in Sidebars: einheitlicher Hover --- */
.themen-list-item, .file-list-item, .mitarbeiter-list-item {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background .12s;
}
.themen-list-item:last-child, .file-list-item:last-child, .mitarbeiter-list-item:last-child {
    border-bottom: none;
}
.themen-list-item:hover, .file-list-item:hover, .mitarbeiter-list-item:hover {
    background: var(--surface-2);
}
.themen-list-item.active, .file-list-item.active, .mitarbeiter-list-item.active {
    background: var(--primary-5);
    color: var(--text-dark);
    border-left: 3px solid var(--primary-green);
    padding-left: 11px;
}

/* --- Tabellen einheitlich --- */
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--card-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
}
table th, table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
    font-size: 14px;
}
table th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
}
table tr:last-child td { border-bottom: none; }

/* ===== Manuelle Quellen Editor ===== */
.mq-form { padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.mq-form label { display: block; margin-bottom: var(--space-1); color: var(--text-muted); }
.mq-row { display: flex; flex-direction: column; gap: var(--space-1); }
.mq-row-2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-4); }
.mq-actions {
    display: flex;
    gap: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
    margin-top: var(--space-2);
}
.mq-form code {
    background: var(--surface-2);
    border: 1px solid var(--border-color);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 12px;
}