/* Schwebendes Chat-Widget - einbaubar in jede Website */

#lkchat-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999999;
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    color: var(--lk-text);
}

/* Floating Action Button (FAB) */
.lkw-fab {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--lk-gruen), var(--lk-gruen-dunkel));
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(var(--lk-gruen-rgb), .45);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .18s, box-shadow .18s;
    position: relative;
    padding: 0;
}
.lkw-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 24px rgba(var(--lk-gruen-rgb), .55); }
.lkw-fab:active { transform: scale(.96); }
.lkw-fab svg { width: 28px; height: 28px; }
.lkw-fab .lkw-fab-close { display: none; }
.lkw-fab.open .lkw-fab-open { display: none; }
.lkw-fab.open .lkw-fab-close { display: block; }
.lkw-fab.open { background: var(--lk-text-leise); box-shadow: 0 4px 12px rgba(0,0,0,.3); }

/* Begrüßungs-Popover bevor Chat geöffnet wird */
.lkw-hint {
    position: absolute;
    right: 72px;
    bottom: 8px;
    background: var(--lk-flaeche);
    padding: 9px 14px;
    border-radius: 20px 20px 4px 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.12);
    font-size: 13px;
    white-space: nowrap;
    color: var(--lk-text);
    animation: lkw-pop 4s ease-out 1s both;
    pointer-events: none;
}
.lkw-hint::after {
    content: '';
    position: absolute;
    right: -5px;
    bottom: 14px;
    border: 5px solid transparent;
    border-left-color: var(--lk-flaeche);
    border-bottom: 0;
}
@keyframes lkw-pop {
    0%   { opacity: 0; transform: translateY(8px); }
    8%   { opacity: 1; transform: translateY(0); }
    90%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}
#lkchat-widget.open .lkw-hint,
#lkchat-widget.user-engaged .lkw-hint { display: none; }

/* Chat-Panel */
.lkw-panel {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: 380px;
    max-width: calc(100vw - 24px);
    height: min(600px, calc(100vh - 110px));
    background: var(--lk-flaeche);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,.22);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    animation: lkw-open .22s cubic-bezier(.2, .7, .3, 1.2);
}
#lkchat-widget.open .lkw-panel { display: flex; }
@keyframes lkw-open {
    from { transform: scale(.85) translateY(8px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Panel-Header */
.lkw-head {
    background: linear-gradient(135deg, var(--lk-gruen), var(--lk-gruen-dunkel));
    color: white;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.lkw-head-logo {
    width: 38px;
    height: 38px;
    background: var(--lk-flaeche);
    color: var(--lk-gruen);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
}
.lkw-head-text { flex: 1; min-width: 0; line-height: 1.25; }
.lkw-head-title { font-weight: 600; font-size: 15px; }
.lkw-head-sub { font-size: 11.5px; opacity: .85; display: flex; align-items: center; gap: 4px; }
.lkw-head-sub::before {
    content: '';
    width: 7px;
    height: 7px;
    background: #81c784;
    border-radius: 50%;
    box-shadow: 0 0 6px #81c784;
}
.lkw-head-close,
.lkw-head-reset {
    background: rgba(255,255,255,.15);
    color: white;
    border: 0;
    /* Visuell 34, Hit-Area 44 - erfüllt WCAG 2.5.5 ohne den Header optisch
       aufzublasen. */
    width: var(--lk-hoehe-klein);
    height: var(--lk-hoehe-klein);
    min-width: var(--lk-tastziel);
    min-height: var(--lk-tastziel);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    padding: 0;
}
.lkw-head-close:hover,
.lkw-head-reset:hover { background: rgba(255,255,255,.25); }
.lkw-head-reset { font-size: 14px; }

/* Resize-Grip oben links - nur Desktop. Streifen-Muster um 180° gedreht,
   damit der "Anfasser" optisch zum Eck oben-links zeigt statt von ihm weg. */
.lkw-resize-grip {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 14px;
    height: 14px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 45%, rgba(255,255,255,.7) 45%, rgba(255,255,255,.7) 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, rgba(255,255,255,.5) 65%, rgba(255,255,255,.5) 75%, transparent 75%);
    transform: rotate(180deg);
}
.lkw-resize-grip:hover {
    background:
        linear-gradient(135deg, transparent 45%, white 45%, white 55%, transparent 55%),
        linear-gradient(135deg, transparent 65%, white 65%, white 75%, transparent 75%);
}
.lkw-head { position: relative; }
/* Einmaliger Hinweis am Größenregler: erscheint beim ersten Öffnen an der
   AUSSENseite (links neben dem Regler), damit Nutzer wissen, dass das Fenster
   aufgezogen werden kann. Dezenter Stil wie die KI-Assistent-Info, per JS
   relativ zum Regler positioniert (position: fixed). */
.lkw-resize-hint {
    position: fixed;
    background: var(--lk-flaeche); color: var(--lk-text-schwach);
    font-size: 10.5px; font-weight: 500;
    padding: 5px 9px; border-radius: 7px;
    box-shadow: 0 2px 10px rgba(0,0,0,.16);
    white-space: nowrap; pointer-events: none; z-index: 2147483646;
    opacity: 0; transform: translateX(6px);
    transition: opacity .3s ease, transform .3s ease;
}
.lkw-resize-hint.show { opacity: 1; transform: translateX(0); }

/* Nachrichten-Bereich */
.lkw-msgs {
    flex: 1;
    overflow-y: auto;
    /* Kein Scroll-Chaining: am Ende der Liste nicht die Seite dahinter scrollen. */
    overscroll-behavior: contain;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background:
        radial-gradient(rgba(var(--lk-gruen-rgb), .04) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--lk-grund);
}

.lkw-msg { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; animation: lkw-msg-in .2s ease-out; }
.lkw-msg.user { justify-content: flex-end; }
@keyframes lkw-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lkw-avatar {
    width: 28px; height: 28px;
    background: var(--lk-gruen);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: .02em;
}
.lkw-msg.user .lkw-avatar { display: none; }
/* Die Antwort ist Lesetext, kein Kurznachrichten-Schnipsel: sie trägt
   Zwischenüberschriften, Quellenziffern, Kontaktkarte und Quellenliste.
   Deshalb Karten-Innenabstand und weiter Zeilenabstand statt der engen
   Sprechblasen-Werte. Ein feiner Rahmen trägt die Fläche ruhiger als ein
   Schatten - der wirkt bei einem so hohen Block wie ein Schlagschatten. */
.lkw-bubble {
    max-width: 88%;
    padding: var(--lk-p-karte);
    border-radius: var(--lk-radius);
    line-height: var(--lk-zeile-weit);
    font-size: var(--lk-s-text);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.lkw-msg.bot .lkw-bubble {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    box-shadow: var(--lk-schatten-1);
    border-top-left-radius: 4px;
}
.lkw-msg.user .lkw-bubble {
    background: var(--lk-gruen-hell);
    border: 1px solid transparent;
    border-top-right-radius: 4px;
    color: var(--lk-gruen-dunkel);
    line-height: var(--lk-zeile);
}
.lkw-bubble p { margin: 0 0 var(--lk-a-3); }
.lkw-bubble p:last-child { margin-bottom: 0; }
.lkw-bubble strong { color: var(--lk-gruen); }
.lkw-bubble a { color: var(--lk-gruen); }
/* U14: WCAG-AA-Kontrast (>=4.5:1 für kleinen Text). #607d8b mit opacity .7
   ergab nur ~2.8:1 auf weiß. #455a64 ohne opacity erreicht ~5.7:1. */
.lkw-bubble .time {
    display: block; text-align: right;
    font-size: var(--lk-s-mini); color: var(--lk-text-leise);
    margin-top: var(--lk-a-2);
}
.lkw-bubble ul { margin: var(--lk-a-3) 0; padding: 0; list-style: none; }
.lkw-bubble li {
    margin: var(--lk-a-1) 0;
    padding: var(--lk-a-2) var(--lk-a-4);
    background: var(--lk-gruen-blass);
    border-left: 2px solid var(--lk-gruen);
    border-radius: 0 var(--lk-radius-klein) var(--lk-radius-klein) 0;
    font-size: var(--lk-s-klein);
    line-height: var(--lk-zeile);
}
.lkw-bubble li a { color: var(--lk-gruen); }
.lkw-bubble li strong { font-weight: 600; }

.lkw-mit-cards {
    margin-top: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lkw-mit-cards .lkw-mit-card { margin-top: 0; }
.lkw-mit-card {
    margin-top: var(--lk-a-4);
    padding: var(--lk-a-3) var(--lk-a-4);
    background: var(--lk-gruen-blass);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    display: flex;
    gap: var(--lk-a-4);
    align-items: center;
}
.lkw-mit-card img,
.lkw-mit-card .lkw-mit-noimg {
    width: 56px; height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--lk-flaeche);
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.lkw-mit-card .lkw-mit-noimg {
    background: var(--lk-gruen);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -.02em;
}
.lkw-mit-text { flex: 1; min-width: 0; font-size: var(--lk-s-klein); line-height: var(--lk-zeile); }
.lkw-mit-name { font-weight: 800; color: var(--lk-text); font-size: var(--lk-s-text); }
.lkw-mit-fkt { color: var(--lk-text-leise); font-size: var(--lk-s-klein); margin: 1px 0; line-height: 1.3; }
.lkw-mit-abt { color: var(--lk-text-leise); font-size: var(--lk-s-mini); margin: 0 0 var(--lk-a-2); font-style: italic; }
/* Telefon + Mail nebeneinander, wenn die Kachel breit genug ist - sonst
   bricht es automatisch um (flex-wrap). Spart vertikalen Platz bei breitem
   Fenster, bleibt aber auf schmalem Mobil-Layout lesbar. */
.lkw-mit-actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 2px 16px; }
.lkw-mit-actions a { color: var(--lk-gruen); text-decoration: none; font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; }
/* BBK-Karte: visuell abgesetzt von Personen-Karten */
.lkw-bbk-card { background: rgba(var(--lk-info-rgb),.06); border-color: rgba(var(--lk-info-rgb),.18); }
.lkw-bbk-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--lk-info); color: white; border-radius: 50%; }
.lkw-bbk-icon .lkw-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.lkw-bbk-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lk-info); margin-bottom: 1px; }
.lkw-bbk-card .lkw-mit-abt { color: var(--lk-text); font-style: normal; font-weight: 600; font-size: 12px; }
.lkw-bbk-card .lkw-mit-actions a { color: var(--lk-info); }
/* SVG-Icon vor dem Link-Text. Größe folgt der Schriftgröße. */
.lkw-icon { width: 13px; height: 13px; flex: 0 0 13px; }

.lkw-sources {
    margin-top: var(--lk-a-4);
    padding-top: var(--lk-a-3);
    border-top: 1px solid var(--lk-linie-fein);
    font-size: var(--lk-s-klein);
}
.lkw-sources-t { color: var(--lk-text-leise); font-weight: 700; margin-bottom: var(--lk-a-2); }
.lkw-sources ul { margin: 0; padding-left: 0; list-style: none; }
/* Flach + kompakt: die globale .lkw-bubble li-Box (border-left/background/
   padding) hier aufheben, sonst werden die Quellen verschachtelt geboxt. */
.lkw-sources li {
    margin: 0 0 3px; border: 0; border-left: 0; background: none; padding: 0;
    line-height: 1.4;
}
.lkw-sources li:last-child { margin-bottom: 0; }
.lkw-sources a { color: var(--lk-gruen); }
.lkw-sources-idx { color: var(--lk-text-schwach); font-weight: 600; margin-right: 3px; }
.lkw-bubble sup .lkw-footnote-link {
    color: var(--lk-gruen);
    text-decoration: none;
    font-weight: 600;
    padding: 0 1px;
}
.lkw-bubble sup .lkw-footnote-link:hover { text-decoration: underline; }

/* C3: Daumen-hoch/runter Feedback. Dezent unter der Antwort,
   genauso wie die Quellen-Box (gleiche dezente Trennlinie). */
.lkw-feedback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--lk-a-2);
    margin-top: var(--lk-a-4);
    padding-top: var(--lk-a-3);
    border-top: 1px dashed var(--lk-linie);
    font-size: var(--lk-s-mini);
    color: var(--lk-text-leise);
}
.lkw-fb-label { margin-right: 2px; }
.lkw-fb-btn {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    color: var(--lk-text-leise);
    cursor: pointer;
    padding: var(--lk-a-1) var(--lk-a-2);
    border-radius: var(--lk-radius-klein);
    display: inline-flex;
    align-items: center;
    transition: background var(--lk-dauer), color var(--lk-dauer), border-color var(--lk-dauer);
}
.lkw-fb-btn:hover {
    border-color: var(--lk-gruen); color: var(--lk-gruen-dunkel);
    background: var(--lk-gruen-hell);
}
.lkw-fb-btn.lkw-fb-active { color: var(--lk-gruen); }
/* Nur die Daumen sperren, wenn Feedback abgegeben wurde - Kopieren und
   Medien-Brücke rechts bleiben benutzbar */
.lkw-feedback.lkw-fb-done .lkw-fb-btn[data-rating] { pointer-events: none; opacity: 0.55; }
.lkw-feedback.lkw-fb-done .lkw-fb-btn[data-rating].lkw-fb-active { opacity: 1; }

/* Antwort-Aktionen rechts in der Feedback-Zeile (widget-actions.js) */
.lkw-fb-spacer { margin-left: auto; }
.lkw-act-copy, .lkw-act-medien {
    gap: var(--lk-a-1); font-size: var(--lk-s-mini);
    border-color: var(--lk-linie); padding: var(--lk-a-1) var(--lk-a-3);
    font-weight: 600;
}
.lkw-act-copy.lkw-act-ok {
    color: var(--lk-auf-farbe); background: var(--lk-gruen); border-color: var(--lk-gruen);
}

/* Nachrichten-Aktionen beim Hovern (widget-turn-aktionen.js): seitlich neben
   der Bubble, Bearbeiten/Wiederholen. Nimmt konstant Platz (opacity statt
   display) - so springt beim Hovern nichts. */
.lkw-msg-acts {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: center;
    flex-shrink: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.lkw-msg:hover .lkw-msg-acts { opacity: 1; pointer-events: auto; }
.lkw-msg-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text-leise);
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.lkw-msg-act:hover { background: var(--lk-gruen-blass); color: var(--lk-gruen); border-color: var(--lk-gruen); }
.lkw-msg-act .lkw-icon { width: 15px; height: 15px; }
/* Touch (kein Hover): dezent dauerhaft sichtbar. */
@media (hover: none) {
    .lkw-msg-acts { opacity: .5; pointer-events: auto; }
}

/* Inline-Bearbeiten: die Bubble bleibt optisch unverändert, nur der Text wird
   direkt editierbar (contenteditable) - kein Feld, kein Rahmen, kein Resize. */
.lkw-bubble-edit { min-width: 160px; }
.lkw-edit-text {
    outline: none;
    white-space: pre-wrap;
    word-break: break-word;
    min-height: 1.2em;
}
.lkw-edit-acts { display: flex; justify-content: flex-end; gap: 14px; margin-top: 5px; }
.lkw-edit-ok, .lkw-edit-cancel {
    border: none; background: none; padding: 0;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    color: var(--lk-gruen);
}
.lkw-edit-cancel { color: var(--lk-text-leise); font-weight: 600; }
.lkw-edit-ok:hover, .lkw-edit-cancel:hover { text-decoration: underline; }

/* Fortsetzen nach Fehler/Abbruch */
.lkw-resume { margin-top: 8px; }
.lkw-resume-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--lk-gruen);
    border-radius: var(--lk-radius-klein);
    padding: 5px 12px;
    background: var(--lk-flaeche);
    color: var(--lk-gruen);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.lkw-resume-btn:hover { background: var(--lk-gruen-blass); }
.lkw-resume-btn .lkw-icon { width: 15px; height: 15px; }

/* Streaming-Bubble: Antwort-Text wird inkrementell befüllt während das
   Backend rendert. Der blinkende Cursor signalisiert dass mehr Text kommt. */
.lkw-msg-streaming .lkw-bubble { position: relative; }
.lkw-stream-body { display: inline; }
.lkw-stream-cursor {
    display: inline-block;
    width: 7px; height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--lk-gruen);
    border-radius: 1px;
    animation: lkw-cursor-blink 0.9s steps(2, start) infinite;
}
@keyframes lkw-cursor-blink { to { visibility: hidden; } }

.lkw-typing-dots { display: inline-flex; gap: 3px; align-items: center; }
.lkw-typing-dots span {
    width: 6px; height: 6px;
    background: var(--lk-text-schwach);
    border-radius: 50%;
    animation: lkw-blink 1.2s infinite;
}
.lkw-typing-dots span:nth-child(2) { animation-delay: .2s; }
.lkw-typing-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes lkw-blink {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-2px); }
}

/* Schnellantworten */
.lkw-quick {
    display: flex; flex-wrap: wrap; gap: 5px;
    padding: 0 12px 10px;
    background: var(--lk-grund);
    border-top: 1px solid var(--lk-linie-fein);
}
.lkw-quick button {
    background: var(--lk-flaeche);
    border: 1px solid rgba(var(--lk-gruen-rgb), .3);
    color: var(--lk-gruen);
    border-radius: var(--lk-radius-rund);
    padding: 5px 11px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
}
.lkw-quick button:hover { background: rgba(var(--lk-gruen-rgb), .08); }

/* Input-Bereich */
.lkw-input {
    display: flex; align-items: flex-end; gap: 6px;
    padding: 9px 10px;
    /* Fläche und Trennlinie NUR im Widget - siehe .lkw-panel unten. Auf der
       Vollseite trägt sie der Composer über die volle Breite; säße sie an
       der Leiste, ginge die Linie nur über deren 780 Pixel und endete
       mitten im Kasten. */
    background: transparent;
    border-top: 0;
    /* Auf der Vollseite zentriert und auf Lesebreite begrenzt - dieselbe
       Spalte wie die Antworten darüber. In der Sprechblase ist der Container
       ohnehin schmaler, dort bleibt es folgenlos. Stand vorher doppelt in
       chat.css und agent-inhalt.css; beim Zusammenführen ist es mir
       verlorengegangen und die Leiste lief über die volle Fensterbreite. */
    max-width: 780px;
    margin: 0 auto;
    width: 100%;
}
/* In der Sprechblase sitzt die Leiste am unteren Rand und braucht Fläche und
   Trennlinie. Auf der VOLLSEITE steht sie frei über dem Grund - dort wären
   beide falsch und ergäben einen Kasten quer über die Spalte.
   Diese Unterscheidung stand vorher in zwei getrennten Kopien (chat.css und
   agent-inhalt.css). Beim Zusammenführen habe ich sie für Doppelung gehalten
   und entfernt - sie war aber der eigentliche Zweck der beiden Blöcke. */
.lkw-panel .lkw-input {
    background: var(--lk-flaeche);
    border-top: 1px solid var(--lk-linie-fein);
}

/* ---------- Fußbereich: der Baustein bringt ALLES mit ----------
   Markup: partials/_eingabeleiste.html. Hier stehen seine Maße - einmal.
   Kein Bereich setzt eigene Abstände, Farben oder Breiten dazu; genau das
   war der Grund, warum dieselbe Leiste an drei Stellen verschieden aussah.
   Keine Trennlinie: sie war nie gefordert. */
.lkw-fuss {
    flex: 0 0 auto;
    padding: 4px 16px 10px;
    background: transparent;
}
.lkw-input textarea {
    flex: 1;
    border: 1px solid var(--lk-linie-fein);
    /* Bewusst stark gerundet - derselbe Wert wie die beiden anderen
       Composer-Felder (.lkc-input textarea, .ag-composer .lkw-input textarea). */
    border-radius: 22px;
    padding: 9px 14px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.35;
    resize: none;
    max-height: 100px;
    min-height: 36px;
    /* Fläche und Schriftfarbe gehören ZUR KOMPONENTE. Sie fehlten hier - und
       genau deshalb konnte die Leiste auseinanderlaufen: was undefiniert
       bleibt, setzt jeder Bereich selbst. Der Agent tat das mit einem eigenen
       Token, der Assistent bekam den Browser-Standard. Zwei Leisten, eine
       Klasse. Wer die Farbe ändern will, ändert sie hier - einmal. */
    background: var(--lk-flaeche);
    color: var(--lk-text);
}
.lkw-input textarea::placeholder { color: var(--lk-text-schwach); }
.lkw-input textarea:focus { border-color: var(--lk-gruen); }
.lkw-input button {
    background: var(--lk-gruen);
    color: white; border: 0;
    width: var(--lk-hoehe); height: var(--lk-hoehe);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
}
.lkw-input button:hover { background: var(--lk-gruen-dunkel); }
.lkw-input button:disabled { opacity: .55; cursor: not-allowed; }
.lkw-input button svg { width: 18px; height: 18px; }

/* Mikrofon-Button: die Grundfarbe kommt aus .lkw-neben (bausteine.css), hier
   stehen nur die Aufnahme-Zustände - während der Aufnahme rot pulsierend. */
.lkw-input button#lkw-mic.lkw-mic-recording {
    background: var(--lk-fehler);
    color: #ffffff;
    animation: lkw-mic-pulse 1.1s ease-in-out infinite;
}
.lkw-input button#lkw-mic.lkw-mic-uploading {
    background: var(--lk-flaeche-leise);
    color: var(--lk-text-leise);
    animation: lkw-mic-spin 1s linear infinite;
}
@keyframes lkw-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--lk-fehler-rgb),.55); }
    50%      { box-shadow: 0 0 0 7px rgba(var(--lk-fehler-rgb),0); }
}
@keyframes lkw-mic-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Negativ-Feedback Kommentarfeld - erscheint NACH dem Daumen-runter.
   Die Bewertung selbst ist da bereits gespeichert; dieses Feld reicht
   nur einen optionalen Kommentar nach. */
.lkw-fb-comment {
    flex-basis: 100%;
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.lkw-fb-comment-text {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--lk-linie-fein);
    border-radius: var(--lk-radius-klein);
    padding: 6px 9px;
    font-family: inherit;
    font-size: 12.5px;
    line-height: 1.35;
    resize: vertical;
    min-height: 44px;
    max-height: 120px;
    background: var(--lk-flaeche);
}
.lkw-fb-comment-text:focus { border-color: var(--lk-gruen); }
.lkw-fb-comment-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.lkw-fb-comment-actions button {
    border: 1px solid var(--lk-linie-fein);
    background: var(--lk-flaeche);
    color: var(--lk-text-leise);
    padding: 4px 10px;
    font-family: inherit;
    font-size: 12px;
    border-radius: var(--lk-radius-klein);
    cursor: pointer;
}
.lkw-fb-comment-actions .lkw-fb-comment-send {
    background: var(--lk-gruen);
    color: #fff;
    border-color: var(--lk-gruen);
}
.lkw-fb-comment-actions .lkw-fb-comment-send:hover { background: var(--lk-gruen-dunkel); }
.lkw-fb-comment-actions .lkw-fb-comment-skip:hover { background: var(--lk-flaeche-leise); }
.lkw-fb-comment-actions button:disabled { opacity: .55; cursor: not-allowed; }
.lkw-fb-comment-thanks {
    color: var(--lk-gruen);
    font-size: 12px;
    padding: 4px 0;
}

/* Die Kennzeichnung steht in Assistent, Agent, Video UND im Widget - also
   viermal. Der Regelfall ist die Vollseite: dort schwebt sie über dem Grund
   und darf KEINE Fläche haben, sonst liegt ein grauer Balken quer über die
   Seite. Nur in der Sprechblase gehört sie zum Fensterboden.
   Vorher war es umgekehrt gesetzt, und jede Vollseite musste die Fläche
   einzeln wegnehmen - drei Stellen, die auseinanderlaufen konnten. */
.lkw-foot {
    padding: 2px 10px 8px;
    font-size: 10.5px;
    color: var(--lk-text-schwach);
    text-align: center;
    background: transparent;
    /* Dieselbe Spalte wie die Eingabeleiste darüber - sonst zentriert die
       Zeile über die volle Fensterbreite und steht neben der Leiste, zu der
       sie gehört. */
    max-width: 780px;
    margin: 0 auto;
}
/* Ausnahme: im Widget-Fenster trägt sie den Fensterboden. */
.lkw-panel .lkw-foot { background: var(--lk-flaeche); }

/* Mobile: Vollbild */
/* Mobile-Vollbild: greift auf allen Touch-Geräten bis 900px Breite. Der
   alte Breakpoint (520px) hat moderne Phones mit ~412-440 dpx zwar getroffen,
   aber faltbare Phones (Z Fold ~717dpx) und Tablets im Portrait fielen
   raus und bekamen das schwebende Desktop-Panel statt Vollbild.
   `pointer: coarse` ist die zuverlässigste Touch-Detection. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 520px) {
    #lkchat-widget { right: 12px; bottom: 12px; }
    .lkw-fab { width: 54px; height: 54px; }
    .lkw-panel {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        /* bottom MUSS weg: zusammen mit top: 0 + height entstünde ein
           Konflikt der `height` ignoriert. Wir verankern oben und lassen
           das Panel über --lkw-vh in die richtige Höhe wachsen. */
        width: 100%;
        max-width: 100%;
        /* --lkw-vh wird vom JS aus window.visualViewport.height gespeist und
           folgt der Tastatur zuverlässig (Android-Chrome ignoriert 100dvh in
           manchen Versionen). Fallback auf 100dvh, dann auf 100vh. */
        height: var(--lkw-vh, 100dvh);
        max-height: var(--lkw-vh, 100dvh);
        border-radius: 0;
    }
    /* Safe-Area-Padding für iPhone Notch (Header) und Home-Indicator (Input).
       Greift nur wenn viewport-fit=cover gesetzt ist (siehe demo.html-Meta). */
    .lkw-head { padding-top: calc(14px + env(safe-area-inset-top)); }
    .lkw-input { padding-bottom: calc(9px + env(safe-area-inset-bottom)); }
    /* Alles unter 16px lässt iOS beim Hineintippen in die Seite zoomen. */
    .lkw-input textarea,
    .lkw-fb-comment-text { font-size: 16px; }
    .lkw-hint { display: none; }
    /* FAB hat im Mobile-Vollbild keinen Platz - das X im Header reicht.
       Sonst ueberlappt der FAB den Senden-Button. */
    #lkchat-widget.open .lkw-fab { display: none; }
    /* Resize-Grip ist im Mobile-Vollbild sinnlos */
    .lkw-resize-grip { display: none; }

    /* Artikel-Reader: ganzseitig statt zentriert mit Padding-Rahmen. Der
       dunkle Overlay-Rand ist auf Mobile nur störend und schluckt vertikalen
       Platz, den der Reader-Inhalt braucht.
       Der kleine Auswahl-Dialog (.lkw-art-choose) bleibt klein und zentriert -
       er enthält nur Titel + 2 Buttons und soll nicht den ganzen Screen füllen. */
    .lkw-art-overlay:has(.lkw-art-reader) { padding: 0; align-items: stretch; }
    .lkw-art-reader {
        width: 100%;
        max-width: 100%;
        height: var(--lkw-vh, 100dvh);
        max-height: var(--lkw-vh, 100dvh);
        border-radius: 0;
        box-shadow: none;
    }
    /* Safe-Area-Insets analog zum Chat-Panel - Header für Notch, Foot/Body
       fürs Home-Indicator. */
    .lkw-art-reader-head { padding-top: calc(16px + env(safe-area-inset-top)); }
    .lkw-art-reader-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}

/* ===== Artikel-Reader (Quellen-Modal im Demo-Widget) ===== */
/* z-index MUSS höher als das Widget-Root (999999) sein, sonst landet das
   Overlay hinter dem schwebenden Chat-Fenster. */
.lkw-art-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20, 30, 40, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000000;
    padding: 16px;
}
.lkw-art-choose {
    position: relative;
    background: var(--lk-flaeche);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    padding: 22px 26px 18px;
    max-width: 460px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.lkw-art-choose-title {
    font-weight: 600;
    color: var(--lk-text);
    line-height: 1.4;
    padding-right: 24px;
}
.lkw-art-choose-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.lkw-art-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: transparent;
    border: 0;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    color: var(--lk-text-leise);
    padding: 2px 6px;
}
.lkw-art-close:hover { color: var(--lk-text); }

.lkw-art-reader {
    position: relative;
    background: var(--lk-flaeche);
    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;
}
.lkw-art-reader-head {
    padding: 16px 22px 12px;
    border-bottom: 1px solid var(--lk-linie);
    background: linear-gradient(135deg, var(--lk-gruen), var(--lk-gruen-dunkel));
    color: white;
    position: relative;
}
.lkw-art-reader-head .lkw-art-close { color: rgba(255,255,255,.85); top: 10px; right: 12px; }
.lkw-art-reader-head .lkw-art-close:hover { color: white; }
.lkw-art-reader-titel {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    /* Platz für Summary-Button (~130px) + Close-Button (~32px) im Header. */
    padding-right: 160px;
    color: white;
}
.lkw-art-reader-body {
    padding: 20px 26px 22px;
    overflow-y: auto;
    /* Kein Scroll-Chaining auf die Seite dahinter. */
    overscroll-behavior: contain;
    flex: 1 1 auto;
    line-height: 1.65;
    color: var(--lk-text);
    font-size: .95rem;
}
/* PDF-Overlay: breiter und höher als der Textreader - ein A4-Dokument
   braucht die Fläche, sonst scrollt man durch ein Guckloch. */
.lkw-pdf-reader { width: 980px; max-height: 92vh; }
.lkw-pdf-reader .lkw-art-reader-titel { padding-right: 48px; }
.lkw-pdf-rahmen {
    flex: 1 1 auto;
    min-height: 60vh;
    background: var(--lk-flaeche-leise);
}
.lkw-pdf-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
/* Broschüre im Artikel-Reader: das Dokument selbst, daneben ein Weg zur
   Textfassung. Der Umschalter sitzt über dem Blatt, damit die Wahl sichtbar
   ist, bevor man scrollt. */
.lkw-art-umschalter {
    display: flex;
    gap: 3px;
    margin: 0 0 14px;
}
.lkw-art-umschalt-knopf {
    border: 0;
    border-radius: 999px;
    padding: 5px 14px;
    background: transparent;
    color: var(--lk-text-leise);
    font: inherit;
    font-size: .82rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1);
}
.lkw-art-umschalt-knopf:hover { background: var(--lk-flaeche-leise); color: var(--lk-text); }
.lkw-art-umschalt-knopf.is-aktiv { background: var(--lk-gruen-hell); color: var(--lk-gruen-dunkel); }
.lkw-art-pdf-rahmen {
    height: 74vh;
    margin: 0 -26px -22px;
    background: var(--lk-grund-satt);
}
.lkw-art-pdf { width: 100%; height: 100%; border: 0; display: block; }

.lkw-art-meta { font-size: .8rem; color: var(--lk-text-schwach); margin-bottom: 6px; letter-spacing: .02em; }
.lkw-art-titel { margin: 0 0 8px; color: var(--lk-gruen); font-size: 1.35rem; line-height: 1.3; }
.lkw-art-lead { font-size: 1.02rem; color: var(--lk-text); font-style: italic; margin: 0 0 14px; }
.lkw-art-text p { margin: 0 0 10px; }
.lkw-art-text h1, .lkw-art-text h2, .lkw-art-text h3 { color: var(--lk-gruen); margin: 18px 0 6px; line-height: 1.3; }
.lkw-art-text h2 { font-size: 1.1rem; }
.lkw-art-text h3 { font-size: 1rem; }
.lkw-art-text a { color: var(--lk-gruen); }
.lkw-art-text ul, .lkw-art-text ol { padding-left: 22px; margin: 0 0 12px; }
.lkw-art-text li { margin: 3px 0; }
/* Tabellen im Artikel (z.B. Kontaktübersichten der Bezirksbauernkammern).
   Horizontal scrollbar bei schmalem Chat-Widget, damit nichts überläuft. */
.lkw-art-text table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 14px;
    font-size: 0.85rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.lkw-art-text thead th {
    background: var(--lk-gruen-hell);
    color: var(--lk-gruen-dunkel);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.lkw-art-text th, .lkw-art-text td {
    border: 1px solid var(--lk-linie);
    padding: 6px 9px;
    vertical-align: top;
}
.lkw-art-text tbody tr:nth-child(even) td { background: var(--lk-gruen-blass); }
.lkw-art-loading, .lkw-art-empty { color: var(--lk-text-schwach); font-style: italic; padding: 12px 0; }

/* "Zusammenfassen"-Button im Reader-Header (links neben dem ×). */
.lkw-art-summary-btn {
    position: absolute;
    top: 10px;
    right: 46px;
    background: rgba(255,255,255,.15);
    color: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: var(--lk-radius-rund);
    padding: 4px 11px 4px 8px;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.lkw-art-summary-btn:hover { background: rgba(255,255,255,.28); }
.lkw-art-summary-btn:disabled { opacity: .55; cursor: progress; }
.lkw-art-summary-btn svg { display: block; }
.lkw-art-summary-btn-label { white-space: nowrap; }
/* Auf Touch-Geräten bis 900px (moderne Phones, faltbare, kleine Tablets):
   Button auf reines Icon reduzieren und Titel-Padding entsprechend kürzen. */
@media (max-width: 900px) and (pointer: coarse), (max-width: 520px) {
    .lkw-art-summary-btn-label { display: none; }
    .lkw-art-summary-btn { padding: 6px 8px; }
    .lkw-art-reader-titel { padding-right: 84px; }
}

/* Slot direkt unter dem Header für die KI-Zusammenfassung. */
.lkw-art-summary-slot { padding: 0 26px; background: var(--lk-flaeche); }
.lkw-art-summary {
    margin: 14px 0 0;
    border: 1px solid var(--lk-linie);
    border-left: 3px solid var(--lk-gruen);
    border-radius: 6px;
    background: var(--lk-gruen-blass);
    padding: 10px 13px 11px;
}
.lkw-art-summary-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--lk-gruen);
    font-weight: 600;
    margin-bottom: 4px;
    letter-spacing: .02em;
    text-transform: uppercase;
}
.lkw-art-summary-truncated, .lkw-art-summary-cache {
    font-size: .68rem;
    background: var(--lk-gruen-hell);
    color: var(--lk-gruen-dunkel);
    padding: 1px 7px;
    border-radius: 999px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.lkw-art-summary-cache { background: var(--lk-flaeche-leise); color: var(--lk-text-leise); }
.lkw-art-summary-body {
    color: var(--lk-text);
    font-size: .92rem;
    line-height: 1.55;
}
.lkw-art-summary-body ul {
    margin: 4px 0;
    padding-left: 20px;
}
.lkw-art-summary-body li { margin: 2px 0; }
.lkw-art-summary-body p { margin: 4px 0; }
.lkw-art-summary-body a { color: var(--lk-gruen); }
.lkw-art-summary-progress { color: var(--lk-text-leise); font-size: .85rem; margin-left: 6px; }
.lkw-art-summary-foot {
    margin-top: 6px;
    color: var(--lk-text-schwach);
    font-size: .72rem;
    font-style: italic;
}
.lkw-art-summary-error {
    background: var(--lk-fehler-flaeche);
    border-left-color: var(--lk-fehler);
    border-color: #f1c1c1;
    color: var(--lk-fehler);
}
.lkw-art-reader-foot {
    padding: 10px 22px;
    border-top: 1px solid var(--lk-linie);
    background: var(--lk-flaeche-leise);
    display: flex;
    justify-content: flex-end;
}
.lkw-btn {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    padding: 7px 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    color: var(--lk-text-leise);
    text-decoration: none;
    display: inline-block;
}
.lkw-btn:hover { background: var(--lk-gruen-blass); border-color: var(--lk-linie); }
.lkw-btn-primary {
    background: var(--lk-gruen);
    color: white;
    border-color: var(--lk-gruen);
}
.lkw-btn-primary:hover { background: var(--lk-gruen-dunkel); border-color: var(--lk-gruen-dunkel); color: white; }

/* Live-Daten-Badge in Quellen-Liste (Marktdaten/Wetter) */
.lkw-src-live {
    display: inline-block;
    background: var(--lk-fehler);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: 4px;
    vertical-align: middle;
}
.lkw-src-stand {
    color: var(--lk-text-leise);
    font-size: .82rem;
    font-style: italic;
    margin-left: 4px;
}
/* Präfix-Tag für KB-Quellen: "Bauer vom 12.05.2025:" oder "LK Online:" */
.lkw-src-tag {
    color: var(--lk-gruen);
    font-weight: 600;
    margin-right: 2px;
}
/* Badge für aus Broschüren extrahierte PDF-Quellen */
.lkw-src-pdf {
    display: inline-block;
    background: var(--lk-warnung);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-right: 4px;
    vertical-align: middle;
}

/* ============================================================
   Live-Widgets (Wetter + Marktdaten).
   Container-Queries statt Viewport-Media-Queries weil das Chat-
   Widget einen 380px-Container hat, der Viewport aber breiter ist.
   ============================================================ */
.lkw-widget {
    container-type: inline-size;
    container-name: lkw-w;
    margin: 14px 0;
    border: 1px solid var(--lk-linie-fein);
    border-radius: 16px;
    background: linear-gradient(135deg, var(--lk-flaeche) 0%, var(--lk-flaeche-leise) 100%);
    padding: 14px 14px 12px;
    box-shadow:
        0 1px 2px rgba(20, 40, 60, .04),
        0 8px 24px -10px rgba(20, 40, 60, .12);
    font-size: .92rem;
    overflow: hidden;
}
.lkw-w-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    color: var(--lk-text);
}
.lkw-w-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0rem;
    line-height: 1.2;
}
.lkw-w-title-icon {
    width: 22px; height: 22px;
    flex: 0 0 22px;
}
.lkw-w-live {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px -2px rgba(220, 38, 38, .5);
    position: relative;
}
.lkw-w-live::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    background: #fff;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    animation: lkw-live-pulse 1.6s infinite;
}
@keyframes lkw-live-pulse {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: .4; transform: scale(.7); }
}
/* Veraltungs-Badge: der Wert ist älter als die Stale-Schwelle (aus der echten
   Datenwoche berechnet). Warnfarbe statt des roten Live-Pulses. */
.lkw-w-stale {
    background: var(--lk-warnung);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.lkw-mw-meta .lkw-w-stale {
    padding: 1px 6px;
    font-size: .6rem;
}
.lkw-w-quelle {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--lk-linie-fein);
    font-size: .78rem;
    color: var(--lk-text-leise);
}
.lkw-w-quelle a {
    color: var(--lk-info);
    text-decoration: none;
    font-weight: 500;
}
.lkw-w-quelle a:hover { text-decoration: underline; }

/* ====================== Wetter ====================== */
.lkw-wt-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
    background: var(--lk-flaeche-leise);
    border-radius: 12px;
    padding: 4px;
}
.lkw-wt-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    background: transparent;
    border: none;
    padding: 6px 4px;
    min-height: 58px;
    border-radius: var(--lk-radius-klein);
    cursor: pointer;
    color: var(--lk-text-leise);
    transition: background .18s ease, color .18s ease, transform .12s ease;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
@container lkw-w (max-width: 360px) {
    .lkw-wt-tab-temp { display: none; }
    .lkw-wt-tab { min-height: 52px; }
}
.lkw-wt-tab:active { transform: scale(.97); }
.lkw-wt-tab:hover { background: rgba(20,40,60,.04); }
.lkw-wt-tab.active {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 12px -4px rgba(37, 99, 235, .5);
}
.lkw-wt-tab-icon {
    width: 24px; height: 24px;
    flex: 0 0 24px;
    color: inherit;
}
.lkw-wt-tab.active .lkw-wt-tab-icon { filter: brightness(1.2); }
.lkw-wt-tab-label {
    font-size: .78rem;
    text-transform: capitalize;
}
.lkw-wt-tab-temp {
    font-size: .9rem;
    font-weight: 700;
    margin-top: 2px;
}

.lkw-wt-panel { display: none; }
.lkw-wt-panel.active { display: block; animation: lkw-wt-fade .25s ease; }
@keyframes lkw-wt-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Mobile-first: 1 Spalte. Bei Container >= 420px 3 Spalten. */
.lkw-wt-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@container lkw-w (min-width: 420px) {
    .lkw-wt-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.lkw-wt-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie-fein);
    border-radius: 12px;
    padding: 10px 12px;
    min-height: 60px;
}
.lkw-wt-cell-icon {
    width: 28px; height: 28px;
    flex: 0 0 28px;
    color: var(--lk-info);
}
.lkw-wt-cell-body { min-width: 0; }
.lkw-wt-label {
    font-size: .68rem;
    color: var(--lk-text-leise);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 500;
}
.lkw-wt-val {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--lk-text);
    line-height: 1.2;
}
.lkw-wt-warn,
.lkw-wt-noWarn {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: .88rem;
    font-weight: 500;
}
.lkw-wt-warn {
    background: linear-gradient(135deg, #fff4e0, #ffe0b2);
    color: var(--lk-warnung);
    border: 1px solid rgba(217, 119, 6, .25);
}
.lkw-wt-noWarn {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: var(--lk-gruen-dunkel);
    border: 1px solid rgba(var(--lk-gruen-rgb), .2);
}
.lkw-wt-warn-icon { width: 20px; height: 20px; flex: 0 0 20px; }

/* ====================== Markt ====================== */
.lkw-mw-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}
@container lkw-w (min-width: 480px) {
    .lkw-mw-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}
.lkw-mw-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie-fein);
    border-radius: 12px;
    padding: 10px 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.lkw-mw-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -8px rgba(20, 40, 60, .18);
}
.lkw-mw-icon-wrap {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: var(--lk-info);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lkw-mw-icon { width: 22px; height: 22px; }
.lkw-mw-body { flex: 1; min-width: 0; }
.lkw-mw-name {
    font-size: .82rem;
    color: var(--lk-text-leise);
    line-height: 1.25;
    margin-bottom: 2px;
}
.lkw-mw-line {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 2px 0 4px;
}
.lkw-mw-wert {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--lk-text);
    line-height: 1.1;
}
.lkw-mw-einheit {
    font-size: .82rem;
    color: var(--lk-text-leise);
    font-weight: 500;
}
.lkw-mw-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .74rem;
}
.lkw-mw-stand {
    color: var(--lk-text-leise);
    background: var(--lk-flaeche-leise);
    padding: 1px 7px;
    border-radius: 4px;
}
.lkw-mw-q {
    color: var(--lk-info);
    text-decoration: none;
    font-weight: 500;
}
.lkw-mw-q:hover { text-decoration: underline; }

/* ============== Container-Query: kompakter Wetter-Container ============== */
@container lkw-w (max-width: 380px) {
    .lkw-w-title { font-size: .9rem; }
    .lkw-wt-val { font-size: 1.0rem; }
    .lkw-wt-cell-icon { width: 24px; height: 24px; }
    .lkw-mw-wert { font-size: 1.15rem; }
}

/* ============== LFI-Kurse: KEINE äußere Schale, aber jede Kurskachel
   behält ihre eigene Karten-Schale; Inhalt über die volle Breite. ========= */
.lkw-kurse-list {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.lkw-kurs {
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie-fein);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px -6px rgba(20, 40, 60, .16);
    transition: box-shadow .15s ease;
}
.lkw-kurs:hover { box-shadow: 0 6px 16px -8px rgba(20, 40, 60, .2); }
.lkw-kurs-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.lkw-kurs-ico {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    background: linear-gradient(135deg, #dcedd9, #b9dab2);
    color: var(--lk-gruen);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.lkw-kurs-ico-svg { width: 21px; height: 21px; }
.lkw-kurs-titel {
    font-weight: 650;
    font-size: 14px;
    color: var(--lk-text);
    line-height: 1.3;
}
/* Fakten-Zeile: verteilt sich dynamisch über die Breite und bricht um. */
.lkw-kurs-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 12.5px;
    color: var(--lk-text-leise);
}
.lkw-kurs-termin { color: var(--lk-gruen); font-weight: 600; }
.lkw-kurs-termin.vormerk { color: var(--lk-warnung); }
.lkw-kurs-fact { display: inline-flex; align-items: center; }
.lkw-kurs-pin { width: 13px; height: 13px; margin-right: 3px; color: var(--lk-text-schwach); }
.lkw-kurs-preis strong { color: var(--lk-text); font-size: 13px; }
.lkw-kurs-preis-reg { color: var(--lk-text-schwach); text-decoration: line-through; margin-left: 4px; }
/* Button rechts, schiebt sich per margin-left:auto ans Zeilenende. */
.lkw-kurs-btn,
.lkw-kurs-btn:visited {
    margin-left: auto;
    background: var(--lk-gruen);
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: var(--lk-radius-klein);
    transition: background .15s ease;
    white-space: nowrap;
}
.lkw-kurs-btn:hover { background: var(--lk-gruen-dunkel); color: #fff !important; }
/* Der Kursüberblick-Aufklapp nutzt die .lkw-vert-*-Klassen (identisch zur
   Vertieften Recherche); nur der Abstand nach oben wird hier justiert. */
.lkw-kurs-more { margin-top: 8px; }
.lkw-kurs-more .lkw-vert-kaphead { padding-left: 4px; padding-right: 4px; }

/* Klickbare Personen-Namen im Antwort-Text */
.lkw-person-link {
    color: var(--lk-gruen);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--lk-gruen-rgb), .4);
    text-underline-offset: 2px;
    cursor: pointer;
}
.lkw-person-link:hover { text-decoration-color: var(--lk-gruen); background: rgba(var(--lk-gruen-rgb), .08); border-radius: 3px; }

/* Personen-Modal (Overlay) */
.lkw-pm-overlay {
    position: fixed; inset: 0; z-index: 2147483600;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.45); padding: 16px;
    animation: lkw-pm-fade .15s ease-out;
}
@keyframes lkw-pm-fade { from { opacity: 0; } to { opacity: 1; } }
.lkw-pm-box {
    position: relative; background: var(--lk-flaeche); border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    padding: 28px 24px 22px; width: 100%; max-width: 320px;
    text-align: center;
}
.lkw-pm-close {
    position: absolute; top: 10px; right: 12px;
    background: none; border: none; font-size: 26px; line-height: 1;
    color: var(--lk-text-schwach); cursor: pointer; padding: 4px;
}
.lkw-pm-close:hover { color: var(--lk-text-leise); }
.lkw-pm-bild, .lkw-pm-noimg {
    width: 76px; height: 76px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 12px; display: block;
}
.lkw-pm-noimg {
    background: linear-gradient(135deg, var(--lk-gruen), var(--lk-gruen-dunkel)); color: #fff;
    font-weight: 700; font-size: 1.4rem; line-height: 76px;
}
.lkw-pm-name { font-weight: 700; font-size: 1.1rem; color: var(--lk-text); }
.lkw-pm-fkt { color: var(--lk-text-leise); font-size: .9rem; margin-top: 2px; }
.lkw-pm-abt { color: var(--lk-text-schwach); font-size: .82rem; margin-top: 1px; }
.lkw-pm-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lkw-pm-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 14px; border-radius: var(--lk-radius-klein); background: rgba(var(--lk-gruen-rgb), .1);
    color: var(--lk-gruen); font-weight: 600; text-decoration: none; font-size: 14px;
}
.lkw-pm-act:hover { background: rgba(var(--lk-gruen-rgb), .18); }
.lkw-pm-act .lkw-icon { width: 18px; height: 18px; }

/* Phase 2: Kapitel-Vertiefung (zweistufige Antwort) - bewusst FLACH gehalten,
   damit keine Box-in-Box-in-Box-Verschachtelung entsteht und der Platz
   effektiv genutzt wird. */
.lkw-vert { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--lk-linie); }
.lkw-vert-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; color: var(--lk-gruen);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
}
.lkw-vert-head .lkw-icon { width: 13px; height: 13px; }
/* Kapitel: nur ein dünner Trenner statt einer eigenen Box - spart eine
   komplette Schachtel-Ebene. */
.lkw-vert-kap { border-top: 1px solid var(--lk-linie-fein); }
.lkw-vert-kap:first-of-type { border-top: 0; }
/* Ausklapp-Kopf hellgrün hinterlegt, damit er sich klar vom darunter
   aufgeklappten Fließtext absetzt. */
.lkw-vert-kaphead {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: 0; background: var(--lk-gruen-hell); cursor: pointer;
    font: inherit; text-align: left; color: var(--lk-gruen-dunkel);
    border-radius: var(--lk-radius-klein); transition: background .15s;
}
.lkw-vert-kaphead:hover { background: #ddeede; }
.lkw-vert-kaphead[aria-expanded="true"] { background: #d8ecda; border-radius: var(--lk-radius-klein) var(--lk-radius-klein) 0 0; }
.lkw-vert-kaphead:hover .lkw-vert-kaptitel { color: var(--lk-gruen); }
.lkw-vert-kaptitel { flex: 1; font-weight: 600; font-size: 13px; }
.lkw-vert-status { font-size: 11px; color: var(--lk-text-leise); white-space: nowrap; }
.lkw-vert-chev { width: 16px; height: 16px; color: var(--lk-text-schwach); transition: transform .2s; flex-shrink: 0; }
.lkw-vert-kaphead[aria-expanded="true"] .lkw-vert-chev { transform: rotate(180deg); }
.lkw-vert-body { padding: 0 2px 8px; font-size: 12.5px; line-height: 1.5; color: var(--lk-text); }
.lkw-vert-body[hidden] { display: none; }
.lkw-vert-text p:first-child { margin-top: 0; }
.lkw-vert-text p { margin: 0 0 8px; }
/* Stichpunkte FLACH (keine Box-pro-Fakt), aber mit klarem Abstand zwischen den
   Punkten, damit sie sich visuell trennen und nicht überlagert wirken. Die
   globale .lkw-bubble li-Box (border-left/background/padding) wird aufgehoben. */
.lkw-vert-text ul { margin: 6px 0; padding-left: 17px; list-style: disc; }
.lkw-vert-text li {
    border: 0; border-left: 0; background: none; padding: 0; margin: 0 0 9px;
    color: var(--lk-text); font-size: 12.5px; line-height: 1.5;
}
.lkw-vert-text li:last-child { margin-bottom: 0; }
.lkw-vert-text li::marker { color: var(--lk-gruen); }
.lkw-vert-quellen { margin-top: 6px; font-size: 11px; color: var(--lk-text-leise); }
.lkw-vert-src { color: var(--lk-gruen); margin-left: 4px; }
/* Progressive Disclosure: anfangs ausgeblendete Kapitel + "Mehr laden"-Button. */
.lkw-vert-kap[hidden] { display: none; }
.lkw-vert-mehr {
    display: block;
    margin: 8px auto 0;
    padding: 5px 16px;
    background: var(--lk-gruen-blass);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-rund);
    color: var(--lk-gruen);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.lkw-vert-mehr:hover { background: var(--lk-gruen-hell); border-color: var(--lk-linie); }
.lkw-vert-mehr[hidden] { display: none; }

/* Desktop: Panel beim Öffnen breiter starten - mehr Platz für Inhalte.
   Mobil bleibt schmal (max-width begrenzt ohnehin auf die Viewport-Breite).
   Per Größenregler oben links kann zusätzlich aufgezogen werden. */
@media (min-width: 768px) {
    .lkw-panel { width: 460px; }
}

/* Sanftes Einblenden der nachgelagerten UI-Elemente (Live-Widgets, Personen-
   Karten, Quellen, vertiefte Recherche). Statt hart aufzuploppen gleiten sie
   leicht von unten ein - passt zum Streaming-Gefuehl. Leichter Stagger nach
   Element-Typ, damit es gestaffelt statt gleichzeitig wirkt. */
@keyframes lkwFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.lkw-widget,
.lkw-mit-card,
.lkw-sources,
.lkw-vert {
    animation: lkwFadeUp .4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.lkw-widget   { animation-delay: .04s; }
.lkw-mit-card { animation-delay: .10s; }
.lkw-sources  { animation-delay: .18s; }
.lkw-vert     { animation-delay: .06s; }
/* Mehrere Karten leicht nacheinander einblenden. */
.lkw-mit-cards .lkw-mit-card:nth-child(2) { animation-delay: .18s; }
.lkw-mit-cards .lkw-mit-card:nth-child(3) { animation-delay: .26s; }
.lkw-mit-cards .lkw-mit-card:nth-child(n+4) { animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
    .lkw-widget, .lkw-mit-card, .lkw-sources, .lkw-vert { animation: none; }
}