/* App-spezifisches Layout */

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: var(--lk-text-leise); 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(--lk-text-schwach); 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: var(--lk-flaeche-leise);
    color: var(--lk-text-leise);
    border: 1px solid var(--lk-linie);
}
.bubble .answer-badge.modus-info { background: var(--lk-erfolg-flaeche); color: var(--lk-gruen); border-color: rgba(var(--lk-gruen-rgb), .35); }
.bubble .answer-badge.modus-info_plus_routing { background: var(--lk-info-flaeche); color: var(--lk-info); border-color: color-mix(in srgb, var(--lk-info), var(--lk-mischgrund) 60%); }
.bubble .answer-badge.modus-routing { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); border-color: color-mix(in srgb, var(--lk-warnung), var(--lk-mischgrund) 60%); }
.bubble .answer-badge.modus-klaerung { background: var(--lk-violett-flaeche); color: var(--lk-violett); border-color: color-mix(in srgb, var(--lk-violett), var(--lk-mischgrund) 55%); }
.bubble .answer-badge.modus-out_of_scope { background: var(--lk-fehler-flaeche); color: var(--lk-fehler); border-color: rgba(var(--lk-fehler-rgb), .35); }
.bubble .answer-badge.cite-verified { background: var(--lk-erfolg-flaeche); color: var(--lk-gruen-dunkel); border-color: rgba(var(--lk-gruen-rgb), .35); }
.bubble .answer-badge.cite-partial { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); border-color: color-mix(in srgb, var(--lk-warnung), var(--lk-mischgrund) 55%); }

/* Pipeline-Anzeige im Chat-Tab (zeigt V1/V2) */
.chat-pipeline-indicator {
    padding: 6px 12px;
    margin-bottom: 8px;
    background: var(--lk-flaeche-leise);
    border: 1px solid var(--lk-linie);
    border-radius: 6px;
    font-size: .82rem;
    color: var(--lk-text-leise);
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-pipeline-indicator.v1 { background: var(--lk-info-flaeche); border-color: color-mix(in srgb, var(--lk-info), var(--lk-mischgrund) 60%); color: var(--lk-info); }
.chat-pipeline-indicator.v2 { background: var(--lk-erfolg-flaeche); border-color: rgba(var(--lk-gruen-rgb), .35); color: var(--lk-gruen-dunkel); }
.chat-pipeline-indicator .chat-pipeline-hint { color: var(--lk-text-leise); font-size: .78rem; }

/* Pipeline-Toggle im Debug-Tab */
.pipeline-toggle { background: var(--lk-flaeche-leise); border: 1px solid var(--lk-linie); 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: var(--lk-text-leise); 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: var(--lk-radius-klein);
    margin-bottom: 4px;
    cursor: pointer;
    background: var(--lk-flaeche);
}
.tp-row:hover { background: var(--primary-5); }
.tp-row-titel { font-weight: 600; }
.tp-row-meta { font-size: .78rem; color: var(--lk-text-leise); 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: var(--lk-erfolg-flaeche); color: var(--lk-gruen-dunkel); border: 1px solid rgba(var(--lk-gruen-rgb), .35); }
.tp-badge.draft { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); border: 1px solid color-mix(in srgb, var(--lk-warnung), var(--lk-mischgrund) 55%); }
.tp-badge.draft-pending { background: var(--lk-rosa-flaeche); color: var(--lk-rosa); border: 1px solid color-mix(in srgb, var(--lk-rosa), var(--lk-mischgrund) 55%); }
.tp-badge.season { background: var(--lk-info-flaeche); color: var(--lk-info); border: 1px solid color-mix(in srgb, var(--lk-info), var(--lk-mischgrund) 60%); }

.tp-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: .85rem; color: var(--lk-text-leise); 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: var(--lk-flaeche);
    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: var(--lk-text-leise); 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: var(--lk-text-leise); margin-top: 2px; }
/* Anklickbarer Quellen-Slug: bleibt Code-Schrift, bekommt aber einen
   Unterstrich, damit man sieht, dass dahinter der Artikel liegt. */
.tp-quelle-link {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--lk-linie);
    text-underline-offset: 2px;
    transition: color var(--lk-dauer) var(--lk-kurve);
}
.tp-quelle-link:hover { color: var(--lk-gruen-dunkel); text-decoration-color: currentColor; }
.tp-quelle-link:focus-visible { outline: var(--lk-fokus); outline-offset: var(--lk-fokus-abstand); }
.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: var(--lk-flaeche);
    border: 1px solid var(--border-color);
    border-radius: var(--lk-radius-klein);
    padding: 2px 8px;
    font: inherit;
    font-size: .75rem;
    color: var(--lk-text-leise);
    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-Meta in der Mitarbeiter-Artikelliste (siehe .art-list weiter unten) */
.art-meta {
    font-size: .8rem;
    color: var(--lk-text-schwach);
    margin-bottom: 6px;
    letter-spacing: .02em;
}

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    background: var(--lk-flaeche);
    border: 1px solid var(--border-color);
    border-radius: var(--lk-radius-rund);
    padding: 5px 12px;
    font-size: 14px;
    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: var(--lk-radius-klein);
    border: 1px solid var(--border-color);
    font: inherit;
    font-size: 15px;
    min-height: 44px;
    max-height: 200px;
}
.chat-input textarea:focus { 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(--lk-hoehe);
    padding: 0 var(--control-px);
    border: 1px solid transparent;
    border-radius: var(--lk-radius-klein);
    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 { 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: var(--lk-auf-farbe);
    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: var(--lk-flaeche);
    color: var(--text-dark);
    border-color: var(--border-strong);
}
.btn-secondary:hover:not(:disabled), button.btn-secondary:hover:not(:disabled) {
    background: var(--surface-2);
}

/* Einzige Fassung: die frueheren Wiederholungen weiter unten (Modal-Block,
   Mitarbeiter-Block) meinten dasselbe und hoben diese Regel nur auf. */
.btn-danger, button.btn-danger {
    background: var(--lk-fehler);
    color: var(--lk-auf-farbe);
    border-color: var(--lk-fehler);
}
.btn-danger:hover:not(:disabled), button.btn-danger:hover:not(:disabled) {
    background: var(--lk-fehler-dunkel);
    border-color: var(--lk-fehler-dunkel);
}

.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(--lk-hoehe-klein); 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: var(--lk-radius-klein);
    cursor: pointer;
    font-size: 14px;
    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: var(--lk-text-leise); }

.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: var(--lk-radius-klein);
    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 { 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: var(--lk-text-leise);
    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 var(--lk-gruen); }
.fb-stat-neg { border-left: 4px solid var(--lk-fehler); }
.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 var(--lk-fehler);
    border-radius: 6px;
    padding: 10px 14px;
}
.fb-row-head {
    display: flex; gap: 12px; align-items: baseline;
    font-size: 0.85em; color: var(--lk-text-leise); margin-bottom: 6px;
}
.fb-row-abt { flex: 1; }
.fb-del {
    border: 1px solid var(--border-color); background: transparent;
    color: var(--lk-text-schwach); cursor: pointer; padding: 0 8px; border-radius: var(--lk-radius-klein);
    font-size: 1.1em; line-height: 1;
}
.fb-del:hover { color: var(--lk-fehler); border-color: var(--lk-fehler); }
.fb-row-q, .fb-row-a { margin: 3px 0; font-size: 0.94em; }
.fb-row-comment {
    margin: 4px 0; padding: 6px 10px; background: var(--lk-warnung-flaeche);
    border-radius: 4px; font-style: italic; color: var(--lk-text);
}
.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: var(--lk-text-leise); margin-left: auto; }
.trace-card details { margin-top: 8px; }
.trace-card details summary { cursor: pointer; color: var(--primary-green); }
.trace-card pre {
    background: var(--lk-flaeche-leise);
    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: var(--lk-schatten-2);
    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); }

/* Empty state */
.empty { padding: 40px; text-align: center; color: var(--lk-text-schwach); }

.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: var(--lk-flaeche);
    border: 1px solid var(--border-color);
    color: var(--lk-text-leise);
    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: var(--lk-radius-rund);
    background: var(--card-bg);
    cursor: pointer;
    font-size: 14px;
}
.lex-tab:hover { background: var(--primary-5); }
.lex-tab.active {
    background: var(--primary-green);
    color: var(--lk-auf-farbe);
    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: var(--lk-text-leise); }
.lex-meta-row strong { color: var(--primary-green); }
.lex-meta-desc { color: var(--lk-text-leise); 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: var(--lk-flaeche-leise);
    color: var(--lk-text-schwach);
}
.lexicon-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.lexicon-status {
    font-size: .88rem;
    color: var(--lk-text-leise);
}
.lexicon-status.is-dirty { color: var(--color-warning-fg); font-style: italic; }
.lexicon-status.is-pending { color: var(--lk-text-leise); font-style: italic; }
.lexicon-status.is-ok { color: var(--primary-green); }
.lexicon-status.is-err { color: var(--lk-fehler); }

/* 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: var(--lk-flaeche);
    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;
}
/* Rohdaten-Aufklapper im Trace-Detail (alle Steps als JSON). */
.trace-raw { margin-top: 10px; }
.trace-raw > summary {
    cursor: pointer;
    font-size: .85rem;
    color: var(--lk-text-leise);
    padding: 4px 0;
}
/* 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: var(--lk-text-leise);
    font-size: .82rem;
    font-style: italic;
    margin-bottom: 4px;
}
.tree-node {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--lk-flaeche);
    padding: 0;
    overflow: hidden;
}
.tree-node.tone-in { border-color: var(--lk-text-schwach); background: var(--lk-flaeche-leise); }
.tree-node.tone-active { border-color: var(--primary-30); background: var(--lk-gruen-blass); }
.tree-node.tone-skip { border-color: var(--lk-linie); background: var(--lk-flaeche-leise); opacity: .65; border-style: dashed; }
.tree-node.tone-short { border-color: var(--lk-warnung); background: var(--lk-warnung-flaeche); }
.tree-node.tone-end { border-color: var(--lk-gruen-dunkel); background: var(--lk-erfolg-flaeche); }
/* V2-Kategorien: LLM-Stages (decide/render), Code-Stages (load/audit/decidefix),
   Kontakt-Korrekturen, Halluzinations-Schutz, Absturz/Fallback. */
.tree-node.tone-llm { border-color: var(--lk-info); background: var(--lk-info-flaeche); }
.tree-node.tone-code { border-color: var(--lk-cyan); background: var(--lk-cyan-flaeche); }
.tree-node.tone-corr { border-color: var(--lk-bernstein); background: var(--lk-bernstein-flaeche); }
.tree-node.tone-safety { border-color: var(--lk-violett); background: var(--lk-violett-flaeche); }
.tree-node.tone-crash { border-color: var(--lk-fehler); background: var(--lk-fehler-flaeche); }

.tree-node-head {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--lk-linie-fein);
}
.tree-node-head:hover { background: var(--lk-flaeche-leise); }
.tree-node-title {
    font-weight: 600;
    color: var(--lk-text);
    font-size: .96rem;
}
.tree-node.tone-active .tree-node-title { color: var(--primary-green); }
.tree-node.tone-short .tree-node-title { color: var(--lk-warnung); }
.tree-node.tone-end .tree-node-title { color: var(--lk-gruen-dunkel); }
.tree-node.tone-llm .tree-node-title { color: var(--lk-info); }
.tree-node.tone-code .tree-node-title { color: var(--lk-cyan); }
.tree-node.tone-corr .tree-node-title { color: var(--lk-bernstein); }
.tree-node.tone-safety .tree-node-title { color: var(--lk-violett); }
.tree-node.tone-crash .tree-node-title { color: var(--lk-fehler); }
.tree-node-sub {
    font-size: .8rem;
    color: var(--lk-text-leise);
    margin-top: 1px;
}
.tree-node-note {
    font-size: .85rem;
    color: var(--lk-text-leise);
    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: var(--lk-radius-klein);
    cursor: pointer;
    background: color-mix(in srgb, var(--lk-flaeche), transparent 30%);
    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: var(--lk-text-leise);
    font-size: .87rem;
    margin-right: 8px;
}
.tree-branch-label::after { content: ":"; margin-left: 1px; }
.tree-branch-value {
    color: var(--lk-text);
    font-size: .9rem;
    word-break: break-word;
}
.tree-branch-hint {
    display: block;
    font-size: .77rem;
    color: var(--lk-text-schwach);
    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: var(--lk-schleier);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.lk-stage-modal {
    background: var(--lk-flaeche);
    border-radius: 10px;
    max-width: 720px;
    width: 100%;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    box-shadow: var(--lk-schatten-3);
    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: var(--lk-text-leise);
    padding: 0 6px;
}
.lk-modal-close:hover { color: var(--lk-text); }
.lk-stage-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
    /* Kein Scroll-Chaining: am Modal-Ende nicht die Seite dahinter scrollen. */
    overscroll-behavior: contain;
    font-size: .92rem;
    line-height: 1.5;
}
.lk-modal-explain {
    background: var(--lk-gruen-blass);
    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: var(--lk-warnung);
    background: var(--lk-warnung-flaeche);
}
.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: var(--lk-flaeche-leise);
    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: var(--lk-flaeche-leise);
    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: var(--lk-text-leise);
    font-weight: 500;
}
.lk-kv td {
    padding: 4px 0;
    border-bottom: 1px solid var(--lk-linie);
}
.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: var(--lk-text-schwach); 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: var(--lk-fehler); }
.lk-empty { color: var(--lk-text-schwach); font-style: italic; }

.trace-steps { display: flex; flex-direction: column; gap: 6px; }
.trace-step {
    background: var(--lk-flaeche);
    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: var(--lk-text-leise); font-size: .85rem; }
.trace-step-num { color: var(--lk-text-schwach); font-size: .78rem; }
.trace-step details { margin-top: 4px; }
.trace-step details summary { font-size: .8rem; color: var(--lk-text-leise); cursor: pointer; }
.trace-step pre {
    background: var(--lk-flaeche-leise);
    padding: 8px;
    border-radius: 4px;
    font-size: 11.5px;
    overflow: auto;
    max-height: 240px;
    margin: 4px 0 0;
}

.stage-badge {
    display: inline-block;
    color: var(--lk-auf-farbe);
    padding: 1px 8px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.3;
    background: var(--lk-text-leise);
}
/* Badge-Farben pro Kategorie (analog zu den tree-node-tones). */
.stage-badge.badge-in     { background: var(--lk-text-leise); }
.stage-badge.badge-short  { background: var(--lk-warnung); }
.stage-badge.badge-llm    { background: var(--lk-info); }
.stage-badge.badge-code   { background: var(--lk-cyan); }
.stage-badge.badge-corr   { background: var(--lk-bernstein); }
.stage-badge.badge-safety { background: var(--lk-violett); }
.stage-badge.badge-crash  { background: var(--lk-fehler); }
.stage-badge.badge-end    { background: var(--lk-gruen-dunkel); }
.stage-badge.badge-active { background: var(--lk-gruen); }

/* Phasen-Label im Detail-Modal (z.B. "Halluzinations-Schutz (Code)"). */
.lk-modal-phase {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    color: var(--lk-text-leise);
    background: var(--lk-flaeche-leise);
    border-radius: 999px;
    padding: 2px 10px;
    margin-bottom: 8px;
}

.trace-foot {
    margin-top: 8px;
    font-size: .82rem;
    color: var(--lk-text-leise);
    text-align: right;
}
/* Vom Nutzer aufgeklappte Kapitel-Vertiefungen im Trace-Detail. */
.trace-vertiefungen {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--lk-linie);
}
.trace-vert-head {
    font-size: .82rem;
    font-weight: 600;
    color: var(--primary-green);
    margin-bottom: 6px;
}
.trace-vert {
    margin: 4px 0;
    padding: 4px 8px;
    background: var(--lk-gruen-blass);
    border: 1px solid rgba(var(--lk-gruen-rgb), .2);
    border-radius: 6px;
}
.trace-vert summary { font-size: .85rem; font-weight: 600; cursor: pointer; color: var(--lk-text); }
.trace-vert-text {
    margin-top: 6px;
    font-size: .82rem;
    line-height: 1.45;
    color: var(--lk-text);
    white-space: pre-wrap;
}
.trace-vert-quellen { margin-top: 5px; font-size: .75rem; color: var(--lk-text-schwach); }
.trace-vert-src { color: var(--primary-green); margin-right: 6px; }

/* 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: var(--lk-radius-klein) var(--lk-radius-klein) 0 0;
    font: inherit;
    font-size: 14px;
}
.mitarbeiter-sidebar input[type="search"]:focus {
    background: var(--primary-5);
}
.mit-stats {
    padding: 6px 12px;
    font-size: .78rem;
    color: var(--lk-text-leise);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.mit-stats .dot { color: var(--lk-linie); }
.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: var(--lk-text-schwach);
    background: var(--lk-flaeche-leise);
    border-bottom: 1px solid var(--lk-linie);
    position: sticky;
    top: 0;
    z-index: 1;
}
.mit-row {
    padding: 8px 12px;
    border-bottom: 1px solid var(--lk-linie);
    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: var(--lk-text-leise); }
.mit-themen { font-size: .72rem; color: var(--primary-green); margin-top: 2px; }
.mit-badge {
    display: inline-block;
    background: var(--primary-green);
    color: var(--lk-auf-farbe);
    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: var(--lk-text-leise); }
.mit-detail-weitere { font-size: .78rem; color: var(--lk-text-schwach); 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(var(--lk-gruen-rgb), .25);
}
.mit-kontakt-head { font-weight: 600; color: var(--primary-green); font-size: .85rem; }
.mit-kontakt-fkt { font-weight: normal; color: var(--lk-text-leise); }
.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: var(--lk-flaeche);
    border: 1px solid var(--border-color);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .78rem;
    color: var(--lk-text-leise);
    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: var(--lk-text-schwach); font-size: .75rem; margin-left: 6px; }
.mit-noart { padding: 16px; font-size: .85rem; }
.empty-inline { padding: 6px 0; font-size: .82rem; color: var(--lk-text-schwach); font-style: italic; }
.mit-themen-quelle { font-size: .72rem; font-weight: normal; color: var(--lk-text-schwach); }
.mit-detail-slug { margin-top: 14px; font-size: .72rem; color: var(--lk-text-schwach); }
.mit-detail-slug code { background: var(--lk-flaeche-leise); padding: 1px 5px; border-radius: 3px; }

/* Edit-Button rechts in der Detail-Kopfzeile */
.mit-edit-btn { margin-left: auto; }

/* 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: var(--lk-text-schwach); 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: var(--lk-text-leise); padding: 0 6px; }
/* Formularzeilen der Mitarbeiter-Bearbeitung. Artikel haben kein Formular
   mehr - sie kommen aus dem Crawl und werden nur gelesen. */
.mit-edit-row label { display: flex; flex-direction: column; font-size: .78rem; color: var(--lk-text-leise); }
.mit-edit-row input {
    margin-top: 3px;
    padding: 6px 8px;
    font: inherit;
    border: 1px solid var(--border-color);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
}
.mit-edit-row .mit-row-remove { grid-column: 1 / -1; justify-self: end; padding: 4px 10px; font-size: 13px; }
.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: var(--lk-text-leise); 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: var(--lk-flaeche);
    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: var(--lk-radius-klein);
    font: inherit;
}
.themen-stats { padding: 0 12px 6px; font-size: .78rem; color: var(--lk-text-leise); }
.themen-list { flex: 1; overflow-y: auto; padding: 0 0 12px; }
.themen-group-head {
    background: var(--primary-5);
    color: var(--primary-green);
    font-size: 13px;
    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: var(--lk-text-leise);
    background: var(--lk-flaeche);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .72rem;
}
.themen-row {
    padding: 6px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--lk-linie);
    /* Titel und Slug links, der Lese-Knopf rechts daneben. */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "titel lesen" "slug lesen";
    align-items: center;
    column-gap: var(--lk-a-3);
}
.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 { grid-area: titel; font-size: .9rem; color: var(--text-dark); }
.themen-row-slug { grid-area: slug; font-size: .72rem; color: var(--lk-text-schwach); margin-top: 2px; }
/* Blass, aber IMMER sichtbar. Ein Knopf, der erst beim Überfahren erscheint,
   wird nicht gefunden - und gesucht wird er genau dann, wenn man wissen will,
   ob ein Artikel richtig geladen wurde. */
.themen-lesen {
    grid-area: lesen;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: var(--lk-radius-klein);
    background: transparent;
    color: var(--lk-text-schwach);
    cursor: pointer;
    opacity: .5;
    transition: opacity var(--lk-dauer) var(--lk-kurve), color var(--lk-dauer) var(--lk-kurve);
}
.themen-lesen svg { width: 17px; height: 17px; }
.themen-row:hover .themen-lesen,
.themen-row.active .themen-lesen,
.themen-lesen:focus-visible { opacity: 1; }
.themen-lesen:hover { color: var(--lk-gruen); background: var(--lk-flaeche); }
.themen-lesen:focus-visible { outline: var(--lk-fokus); outline-offset: var(--lk-fokus-abstand); }
.themen-md-titel { margin: 0; font-size: .95rem; color: var(--lk-text-leise); }
.themen-md-neu { color: var(--lk-text-schwach); font-weight: normal; }
/* Marke am Listenende: sie löst das Nachladen aus und sagt zugleich, dass
   noch etwas kommt - eine Liste, die einfach aufhört, wirkt vollständig. */
.themen-mehr {
    padding: var(--lk-a-4) var(--lk-a-5);
    text-align: center;
    font-size: var(--lk-s-klein);
    color: var(--lk-text-schwach);
}
.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: var(--lk-info-flaeche); color: var(--lk-info); }
.themen-badge.thin { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); }
.themen-badge.dead { background: var(--lk-fehler-flaeche); color: var(--lk-fehler); border: 1px solid rgba(var(--lk-fehler-rgb), .35); }
.themen-badge.pdf { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); }

.themen-detail {
    background: var(--lk-flaeche);
    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); }
/* Der Kopf trägt einen langen Artikeltitel - die Aktionen daneben dürfen
   deshalb nicht umbrechen, sonst hängt der Pfeil des Links in der Leerzeile. */
.themen-detail .toolbar > div {
    display: flex;
    align-items: center;
    gap: var(--lk-a-4);
    flex: 0 0 auto;
    white-space: nowrap;
}
/* --- Leseansicht eines Artikels (rechte Spalte) ---
   Keine Eingabefelder: der Inhalt stammt aus dem Crawl und wird bei jedem Lauf
   neu geschrieben. Gelesen wird in einer schmalen Spalte mit weiter Zeile. */
.themen-lese { padding: 4px 2px 20px; }
.themen-lese-meta {
    margin: 12px 0 0;
    font-size: var(--lk-etikett-groesse);
    letter-spacing: var(--lk-etikett-abstand);
    text-transform: uppercase;
    font-weight: var(--lk-etikett-fett);
    color: var(--lk-text-schwach);
}
.themen-lese-lead {
    margin: 8px 0 0;
    font-size: var(--lk-s-gross);
    line-height: var(--lk-zeile);
    color: var(--lk-text-leise);
    max-width: 72ch;
}
.themen-lese-hinweis {
    margin: 12px 0 0;
    padding: var(--lk-a-3) var(--lk-a-4);
    border-left: 3px solid var(--lk-warnung);
    background: var(--lk-warnung-flaeche);
    font-size: var(--lk-s-text);
    color: var(--lk-text);
    max-width: 72ch;
}
.themen-lese-text {
    margin: var(--lk-a-5) 0 var(--lk-a-7);
    max-width: 72ch;
    font-size: var(--lk-s-gross);
    line-height: var(--lk-zeile-weit);
    color: var(--lk-text);
}
.themen-lese-text h1, .themen-lese-text h2, .themen-lese-text h3 {
    margin: var(--lk-a-6) 0 var(--lk-a-3);
    line-height: var(--lk-zeile-eng);
}
.themen-lese-text h2 { font-size: var(--lk-s-titel); }
.themen-lese-text h3 { font-size: var(--lk-s-gross); color: var(--lk-text-leise); }
.themen-lese-text p { margin: 0 0 var(--lk-a-5); }
.themen-lese-text ul, .themen-lese-text ol { margin: 0 0 var(--lk-a-5) var(--lk-a-6); padding: 0; }
.themen-lese-text a { color: var(--lk-gruen-dunkel); }
.themen-lese-text table { width: 100%; border-collapse: collapse; margin: 0 0 var(--lk-a-5); font-size: var(--lk-s-text); }
.themen-lese-text th, .themen-lese-text td { border: 1px solid var(--lk-linie-fein); padding: var(--lk-a-2) var(--lk-a-3); text-align: left; }
.themen-lese-daten {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 4px 12px;
    margin: 0;
    padding-top: var(--lk-a-4);
    border-top: 1px solid var(--lk-linie-fein);
    font-size: var(--lk-s-klein);
}
.themen-lese-daten dt { color: var(--lk-text-leise); font-weight: 600; }
.themen-lese-daten dd { margin: 0; word-break: break-word; }
.themen-lese-daten code { background: var(--lk-flaeche-leise); padding: 1px 5px; border-radius: 3px; }
.themen-bauer-hint { font-size: .78rem; color: var(--lk-text-leise); margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.themen-bauer-hint code { background: var(--lk-flaeche-leise); padding: 1px 5px; border-radius: 3px; }

/* ===== PIN-Modal ===== */
.pin-overlay {
    position: fixed;
    inset: 0;
    background: var(--lk-schleier);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.pin-modal {
    background: var(--lk-flaeche);
    padding: 22px 26px;
    border-radius: 10px;
    box-shadow: var(--lk-schatten-3);
    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: var(--lk-text-leise); 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: var(--lk-radius-klein);
    text-align: center;
}
.pin-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ===== Changelog-Modal ===== */
.changelog-overlay {
    position: fixed;
    inset: 0;
    background: var(--lk-schleier);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.changelog-overlay.hidden { display: none; }
.changelog-modal {
    background: var(--lk-flaeche);
    border-radius: 10px;
    box-shadow: var(--lk-schatten-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), var(--lk-gruen-dunkel));
    color: var(--lk-auf-farbe);
}
.changelog-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; flex: 0 0 auto; color: var(--lk-auf-farbe); }
.changelog-version { font-size: .8rem; opacity: .85; flex: 1 1 auto; color: var(--lk-auf-farbe); }
.changelog-close {
    background: transparent;
    border: 0;
    color: var(--lk-auf-farbe);
    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 var(--lk-linie);
}
.changelog-release-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.changelog-release-ver { font-weight: 600; color: var(--lk-text); }
.changelog-release-date { font-size: .78rem; color: var(--lk-text-schwach); }
.changelog-badge {
    font-size: .7rem;
    background: var(--lk-gruen-hell);
    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: var(--lk-text-leise);
}
.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: var(--lk-flaeche-leise);
}

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

    /* 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: 13px; 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; }
    /* iOS-Zoom verhindern: alles unter 16px lässt Safari beim Hineintippen
       in die Seite zoomen - das gilt für JEDES Feld, nicht nur die Formulare
       der manuellen Quellen. */
    input, select, textarea { font-size: 16px; }

    /* Touch-Targets: alle Buttons mind. 44px hoch */
    .btn, button.btn { min-height: var(--lk-tastziel); }
    .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) {
    .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: var(--lk-text-leise); }
.crawl-status { padding: 10px 14px; background: var(--lk-flaeche-leise); border-radius: 6px; margin-bottom: 14px; }
.crawl-badge {
    display: inline-block; padding: 2px 8px; border-radius: 12px;
    font-size: .8rem; font-weight: 600; color: var(--lk-auf-farbe); background: var(--lk-text-leise);
}
.crawl-badge.ok { background: var(--primary-green); }
.crawl-badge.err { background: var(--lk-fehler); }
.crawl-badge.off { background: var(--lk-text-schwach); }
.crawl-badge.running { background: var(--lk-warnung); }
.crawl-badge.small { font-size: .72rem; padding: 1px 6px; }

.crawl-config {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 12px; background: var(--lk-flaeche-leise); 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: var(--lk-flaeche-leise); border-radius: 6px; }
.crawl-nb-fehler {
    margin-top: 6px;
    font-family: var(--lk-schrift-fest);
    font-size: var(--lk-s-klein);
    color: var(--lk-fehler);
    word-break: break-word;
}
.crawl-nb-hinweis { margin-top: 4px; font-size: var(--lk-s-klein); color: var(--lk-text-leise); }
.crawl-diff-block {
    padding: 8px 12px; margin-bottom: 6px;
    background: var(--lk-gruen-blass); border-left: 4px solid var(--primary-green); border-radius: 4px;
}
.crawl-diff-block ul { margin: 6px 0 0; padding-left: 22px; font-size: .9rem; color: var(--lk-text); }

.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 var(--lk-linie);
}
.crawl-history-table th { background: var(--lk-flaeche-leise); font-weight: 600; }
.crawl-history-diff { color: var(--lk-text-leise); 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: var(--lk-code-grund); color: var(--lk-code-text); 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 var(--lk-linie);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--lk-flaeche-leise);
}
.md-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.md-name { font-size: 1.05rem; }
.md-desc { color: var(--lk-text-leise); 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: var(--lk-text-leise); font-size: .85rem; margin: 5px 0; }
.md-err {
    color: var(--lk-fehler);
    background: var(--lk-fehler-flaeche);
    padding: 6px 9px;
    border-radius: 4px;
    margin: 6px 0;
    font-size: .88rem;
}
.md-quelle { font-size: .82rem; color: var(--lk-text-leise); margin-top: 6px; }
.md-quelle a { color: var(--lk-info); }
.md-werte { margin: 8px 0; }
.md-werte.hidden { display: none; }
/* Datentabelle: Marktdaten (.md-table) und Agent-Auswertung (.aa-table)
   teilen sich Grundform und Kopfzeile. Die Abweichungen der Auswertung
   (kein Umbruch, rechtsbündige Zahlenspalte) stehen in ihrer Sektion. */
.md-table, .aa-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.md-table th, .md-table td,
.aa-table th, .aa-table td { text-align: left; padding: 5px 7px; border-bottom: 1px solid var(--lk-linie); }
.md-table th, .aa-table th { background: var(--lk-flaeche-leise); }
.md-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .78rem;
    line-height: 1.4;
}
.md-badge-ok   { background: var(--lk-erfolg-flaeche); color: var(--lk-gruen); }
.md-badge-warn { background: var(--lk-warnung-flaeche); color: var(--lk-warnung); }
.md-badge-err  { background: var(--lk-fehler-flaeche); color: var(--lk-fehler); }
.md-badge-run  { background: var(--lk-info-flaeche); color: var(--lk-info); }
.md-badge-idle { background: var(--lk-flaeche-leise); color: var(--lk-text-leise); }

/* PIN-Logout-Button: dezent in der Topbar rechts neben dem Status. */
.pin-logout {
    background: color-mix(in srgb, var(--lk-flaeche), transparent 92%);
    color: var(--text-light);
    border: 1px solid color-mix(in srgb, var(--lk-flaeche), transparent 82%);
    margin-left: 6px;
    font-weight: 500;
}
.pin-logout:hover:not(:disabled) {
    background: color-mix(in srgb, var(--lk-flaeche), transparent 82%);
    border-color: color-mix(in srgb, var(--lk-flaeche), transparent 72%);
}
.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(--lk-radius-klein);
    background: var(--lk-flaeche);
    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 {
    border-color: var(--primary-green);
}
input::placeholder, textarea::placeholder { color: var(--lk-text-schwach); }
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); }

/* --- 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;
}

/* Agent-Admin: Arbeitsbereiche + DSGVO-Löschung */
.aa-summary { margin: 8px 0 12px; font-size: .95rem; }
.aa-list { overflow-x: auto; }
/* Grundform steht oben bei .md-table - hier nur die Abweichung. */
.aa-table th, .aa-table td { white-space: nowrap; }
.aa-table td.aa-num { text-align: right; font-variant-numeric: tabular-nums; }
.aa-anon { color: var(--lk-text-schwach); font-style: italic; }
.aa-confirm { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; }
.aa-up { color: var(--lk-gruen); font-weight: 600; }
.aa-down { color: var(--lk-fehler); font-weight: 600; }
.aa-fb-sum { margin: 8px 0; font-size: .9rem; }
.aa-err {
    color: var(--lk-fehler);
    background: var(--lk-fehler-flaeche);
    border: 1px solid rgba(var(--lk-fehler-rgb), .35);
    padding: 8px 10px;
    border-radius: 6px;
}