/* Bereich VetDream: Mandanten & Lizenz, Testmandanten, On-Prem-Server, Antwort-Assistent, Feedback & Bugs */

.vd-seite { display: flex; flex-direction: column; gap: 16px; }
.vd-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.vd-detail > .vd-breit { grid-column: 1 / -1; }

/* ---------- Karten ---------- */
.vd-karte { background: #fff; border: 1px solid var(--km-rand); border-radius: 8px; box-shadow: var(--km-kachel-schatten); overflow: hidden; min-width: 0; }
.vd-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; background: var(--km-gruen); color: #2c3332; min-height: 48px; box-sizing: border-box; }
.vd-karte-kopf h2 { margin: 0; font-size: 16px; color: #2c3332; }
.vd-karte-inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.vd-karte-fuss { padding: 10px 16px; border-top: 1px solid var(--km-rand); color: var(--km-text-gedimmt); display: flex; flex-direction: column; gap: 6px; }

/* ---------- Hinweise (Töne) ---------- */
.vd-alert { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 6px; border: 1px solid #c7e4fb; background: #e8f3ff; color: #235b7e; }
.vd-alert.ok { background: #e7f7ec; border-color: #bce7c6; color: #1c7a3a; }
.vd-alert.warn { background: #fdf1da; border-color: #f5d9a8; color: #9a6206; }
.vd-alert.danger { background: #fbe9e6; border-color: #f0b9b0; color: #a01b1b; }
.vd-alert.neutral { background: #f1f4f5; border-color: #d3d3d2; color: #2c3332; }
.vd-alert .pf-btn { align-self: flex-start; }
.vd-zwischen { justify-content: space-between; }
.vd-alert.vd-zwischen { flex-direction: row; flex-wrap: wrap; align-items: center; }

.vd-gedimmt { color: var(--km-text-gedimmt); }
.vd-warntext { color: #9a6206 !important; }
.vd-rottext { color: #a01b1b !important; }
.vd-oktext { color: #1c7a3a !important; }
.vd-blautext { color: #1f7fcf !important; }
.vd-kursiv { font-style: italic; }
.vd-nowrap { white-space: nowrap; }
.vd-r { text-align: right; }
.vd-link { color: #1f7fcf; text-decoration: underline; }
.vd-linkbtn { border: 0; background: transparent; padding: 0; font: inherit; color: #1f7fcf; text-decoration: underline; cursor: pointer; font-weight: 600; }
.vd-kpi-warn { background: #fdf1da !important; border-color: #f5d9a8 !important; }
.vd-kpi-rot { border-color: #f0b9b0 !important; }

/* ---------- Filter und Reiter ---------- */
.vd-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.vd-filter-rechts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vd-feld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--km-text-gedimmt); }
.vd-feld input, .vd-feld select, .vd-formular input, .vd-formular select {
    font: inherit; font-size: 14px; color: #161616; min-height: 32px; box-sizing: border-box; padding: 4px 8px; border: 1px solid #d3d3d2; border-radius: 4px; background: #fff; min-width: 200px; }
.vd-feld input:focus, .vd-feld select:focus { outline: none; border-color: var(--km-fokus); box-shadow: 0 0 0 .2rem rgba(31,127,207,.25); }
.vd-wachsen { flex: 1 1 280px; }
.vd-wachsen input { width: 100%; }
.vd-tabs { display: inline-flex; flex-wrap: wrap; border: 1px solid #d3d3d2; border-radius: 4px; overflow: hidden; }
.vd-tabs button { border: 0; border-right: 1px solid #d3d3d2; background: #fff; font: inherit; font-size: 14px; color: #3f3f3e; padding: 5px 12px; cursor: pointer; min-height: 32px; }
.vd-tabs button:last-child { border-right: 0; }
.vd-tabs button:hover { background: var(--km-gruen-hell); }
.vd-tabs button.aktiv { background: #d6eefd; color: #000; font-weight: 600; }

/* ---------- Tabellen ---------- */
.vd-tabelle-rahmen { overflow-x: auto; }
.vd-scroll { max-height: 460px; overflow-y: auto; }
.vd-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.vd-tabelle th { text-align: left; font-weight: 600; font-size: 12px; color: var(--km-text-gedimmt); padding: 8px 10px; border-bottom: 1px solid var(--km-rand); background: #fff; position: sticky; top: 0; }
.vd-tabelle td { padding: 8px 10px; border-bottom: 1px solid #edf0f2; vertical-align: top; }
.vd-zebra tbody tr:nth-child(even) td { background: #f8f9fa; }
.vd-tabelle tr.vd-auswahl td { background: #d6eefd !important; }
.vd-leer { padding: 12px 16px; font-style: italic; color: var(--km-text-gedimmt); }

/* ---------- Lizenz ---------- */
.vd-boxen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.vd-box { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; }
.vd-box strong { font-size: 24px; color: #146c43; }
.vd-box.warn { background: #fdf1da; border-color: #f5d9a8; }
.vd-box.warn strong { color: #9a6206; }
.vd-zeile-rahmen { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 8px 12px; border: 1px solid var(--km-rand); border-radius: 6px; }
.vd-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vd-liste li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid #edf0f2; }
.vd-liste li:last-child { border-bottom: 0; }
.vd-formular { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--km-rand); border-radius: 6px; background: #f8f9fa; }
.vd-formular label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--km-text-gedimmt); }
.vd-chips { gap: 6px; }
.vd-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 12px; background: #e8f3ff; border: 1px solid #c7e4fb; color: #235b7e; font-size: 12px; white-space: nowrap; }
.vd-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #adb5bd; }
.vd-punkt.ok { background: #198754; }
.vd-punkt.danger { background: #dc3545; }
.vd-punkt.warn { background: #ffc107; }

/* ---------- Testmandanten: Ablauf ---------- */
.vd-stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.vd-stepper li { display: flex; flex-direction: column; gap: 4px; }
.vd-step-kopf { display: flex; align-items: center; gap: 6px; }
.vd-step-punkt { width: 28px; height: 28px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
                 border: 2px solid #8a8a89; background: #fff; color: #161616; box-sizing: border-box; }
.vd-step-linie { flex: 1; height: 3px; background: repeating-linear-gradient(90deg, #8a8a89 0 6px, transparent 6px 10px); }
.vd-stepper li.erreicht .vd-step-punkt { background: #acde79; border-color: #acde79; color: #000; }
.vd-stepper li.erreicht .vd-step-linie { background: #acde79; }
.vd-stepper li.letzter .vd-step-linie { background: transparent; }
.vd-stepper li.warnende .vd-step-punkt { border-color: #a01b1b; color: #a01b1b; }

/* ---------- Dialog ---------- */
.vd-modal-hintergrund { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.35); display: flex; align-items: flex-start; justify-content: center; padding: 32px 16px; overflow-y: auto; }
.vd-modal { background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.25); width: min(1100px, 100%); display: flex; flex-direction: column; }
.vd-modal-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--km-rand); }
.vd-modal-kopf h2 { margin: 2px 0 0; }
.vd-modal-inhalt { display: flex; flex-wrap: wrap; gap: 24px; padding: 16px 24px; }
.vd-modal-links { flex: 3 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vd-modal-links h3, .vd-modal-rechts h3 { margin: 0; font-size: 14px; }
.vd-modal-rechts { flex: 2 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-modal-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px 18px; border-top: 1px solid var(--km-rand); }
.vd-schalter { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.vd-schalter input { width: 18px; height: 18px; accent-color: #46a35a; }
.vd-mail { border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.vd-mail-kopf { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 8px; padding: 10px 12px; background: #f8f9fa; border-bottom: 1px solid #e0e0e0; font-size: 12px; }
.vd-mail-kopf > span:nth-child(odd) { color: #585a5f; }
.vd-mail-text { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.vd-mail-text p { margin: 0; }
.vd-weg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 8px 10px; border-radius: 4px; background: #f8f9fa; border: 1px solid #e9ecef; font-size: 12px; color: #5c636a; }
.vd-weg .ok { color: #1c7a3a; }
.vd-weg .aktuell { padding: 0 6px; border-radius: 4px; background: #acde79; color: #000; font-weight: 600; }

/* ---------- Antwort-Assistent ---------- */
.vd-assistent { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: 16px; align-items: start; }
.vd-assistent-rechts { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vd-verlauf-liste { display: flex; flex-direction: column; padding: 6px; }
.vd-verlauf-eintrag { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; padding: 8px 10px; cursor: pointer; border-radius: 4px; }
.vd-verlauf-eintrag:hover { background: var(--km-gruen-hell); }
.vd-verlauf-eintrag.aktiv { background: #d6eefd; border-left-color: #46a9ff; }
.vd-verlauf-titel { font-weight: 600; color: #161616; }
.vd-toggle { border: 1px solid #d3d3d2; background: #fff; font: inherit; font-size: 13px; padding: 4px 10px; border-radius: 16px; cursor: pointer; color: #3f3f3e; }
.vd-toggle.an { background: #d6eefd; border-color: #46a9ff; color: #000; }
.vd-toggle.an::before { content: "\2713\00a0"; color: #1f7fcf; }
.vd-frage-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.vd-einstiege { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-einstiege .pf-btn { white-space: normal; text-align: left; }
.vd-quellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.vd-quelle { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid #e9ecef; border-radius: 6px; background: #f8f9fa; }
.vd-absatz { margin: 0; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.vd-schritte { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; line-height: 1.5; }
.vd-schritte li { padding-left: 2px; overflow-wrap: anywhere; }
.vd-laeuft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vd-puls { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #1f7fcf; animation: vd-puls 1.2s ease-in-out infinite; }
@keyframes vd-puls { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vd-puls { animation: none; } }
.vd-rueckmeldung { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid #e9ecef; border-radius: 6px; background: #f8f9fa; }
.vd-rueckmeldung textarea { width: 100%; min-height: 64px; font: inherit; box-sizing: border-box; }
.vd-paket { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.vd-paket > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border: 1px solid #e9ecef; border-radius: 6px; background: #f8f9fa; }
.vd-schnell-gruendlich { display: inline-flex; border: 1px solid #d3d3d2; border-radius: 16px; overflow: hidden; }
.vd-schnell-gruendlich button { border: 0; background: #fff; font: inherit; font-size: 13px; padding: 6px 12px; cursor: pointer; color: #3f3f3e; }
.vd-schnell-gruendlich button.an { background: #d6eefd; color: #000; font-weight: 600; }
.vd-belege { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.vd-belege code { font-size: 12px; background: #f1f3f5; padding: 1px 4px; border-radius: 3px; }
.vd-gedrueckt { background: #d6eefd !important; border-color: #46a9ff !important; }
/* Gespräch: Fragen als Blasen rechts, Antworten als Karten; frühere Antworten kompakt, Belege einklappbar */
.vd-chat { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vd-chat-schritt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vd-chat-frage { align-self: flex-end; max-width: min(640px, 92%); display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.vd-blase { background: #d6eefd; border: 1px solid #b6dcf7; border-radius: 12px 12px 2px 12px; padding: 8px 14px; color: #161616; white-space: pre-line; overflow-wrap: anywhere; }
.vd-kompakt { background: #fbfcfc; box-shadow: none; }
.vd-kompakt .vd-karte-inhalt { padding: 12px 14px; gap: 10px; }
.vd-klappe summary { cursor: pointer; font-size: 13px; color: var(--km-text-gedimmt); }
.vd-klappe[open] summary { margin-bottom: 4px; }
.vd-rueckfrage { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px; border-left: 4px solid #1f7fcf; border-radius: 6px; background: #e8f3ff; }
.vd-rueckfrage-satz { font-weight: 600; color: #235b7e; overflow-wrap: anywhere; }
.vd-rueckfrage-alt { padding: 6px 12px; border-left: 3px solid #b6dcf7; color: var(--km-text-gedimmt); font-style: italic; overflow-wrap: anywhere; }
div.vd-auswahl { display: flex; flex-wrap: wrap; gap: 8px; }
div.vd-auswahl .pf-btn { white-space: normal; text-align: left; }
.vd-widerspruch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.vd-kv-klein { display: grid; grid-template-columns: 100px 1fr; gap: 2px 8px; margin: 4px 0 0; font-size: 13px; }
.vd-kv-klein dt { color: var(--km-text-gedimmt); }
.vd-kv-klein dd { margin: 0; }

/* ---------- Feedback & Bugs ---------- */
.vd-feedback { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px; align-items: start; }
.vd-vorfahrt { display: inline-flex; padding: 1px 6px; border-radius: 4px; font-size: 12px; background: #a01b1b; color: #fff; margin-left: 4px; }
.vd-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; width: 150px; margin-bottom: 4px; }
.vd-band-seg { display: inline-block; height: 8px; border-radius: 2px; background: #e1e8eb; }
.vd-band-seg.erreicht { background: #acde79; }
.vd-band-seg.aktuell { background: #1f7fcf; }
.vd-band-seg.uebersprungen { background: repeating-linear-gradient(135deg, #aec6d5 0 3px, #ffffff 3px 6px); border: 1px solid #aec6d5; box-sizing: border-box; }
.vd-band-seg.offen { background: #e1e8eb; }
.vd-legende { width: 16px; margin-right: 4px; vertical-align: middle; }
.vd-klein-btn { min-height: 26px; padding: 2px 8px; font-size: 12px; margin-top: 4px; }
.vd-reichweite { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; padding: 6px; border-radius: 4px; }
.vd-reichweite:hover { background: var(--km-blau-hell); }
.pf-balken-wert.vd-bug { background: #dc3545; }
.pf-balken-wert.vd-fr { background: #1f7fcf; }

@media (max-width: 1000px) {
    .vd-assistent, .vd-feedback { grid-template-columns: 1fr; }
    .vd-detail { grid-template-columns: 1fr; }
    .vd-stepper { grid-template-columns: 1fr; }
    .vd-filter-rechts { margin-left: 0; }
}

/* Intercom: Konversationsliste und Chatverlauf */
.vd-konv { padding: 8px 0; border-bottom: 1px solid var(--km-rand); display: flex; flex-direction: column; gap: 2px; }
.vd-konv-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.vd-konv-titel { min-width: 0; overflow-wrap: anywhere; }
.vd-konv-status { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; white-space: nowrap; background: #eef0f2; border: 1px solid #d5d9dd; color: #4a5560; }
.vd-konv-open { background: #e8f3ff; border-color: #c7e4fb; color: #235b7e; }
.vd-konv-closed { background: #e7f6ec; border-color: #bfe3cb; color: #1f6b3a; }
.vd-konv-snoozed { background: #fff6e0; border-color: #f0dca0; color: #7a5a00; }
.vd-konv-aktionen { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.vd-verlauf { width: min(760px, 100%); }
.vd-verlauf-inhalt { display: flex; flex-direction: column; gap: 10px; padding: 16px 24px; max-height: 60vh; overflow-y: auto; }
.vd-chat-zeile { display: flex; }
.vd-chat-kunde { justify-content: flex-start; }
.vd-chat-team, .vd-chat-bot, .vd-chat-notiz { justify-content: flex-end; }
.vd-chat-blase { max-width: 80%; padding: 8px 12px; border-radius: 10px; background: #f1f3f5; border: 1px solid #dde1e5; }
.vd-chat-team .vd-chat-blase { background: #e8f3ff; border-color: #c7e4fb; }
.vd-chat-bot .vd-chat-blase { background: #f1ecff; border-color: #d8ccf5; }
.vd-chat-notiz .vd-chat-blase { background: #fff4c2; border-color: #ecd77a; }
.vd-chat-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-size: 12px; margin-bottom: 2px; }
.vd-chat-marke { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: #6b5a00; }
.vd-chat-bot .vd-chat-marke { color: #5a3fa0; }
.vd-chat-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.vd-chat-system { text-align: center; font-size: 12px; color: var(--km-text-gedimmt); }
.vd-wuensche { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vd-wunsch { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border: 1px solid var(--km-rand); border-radius: 6px; }
.vd-wunsch .km-klein { display: flex; flex-wrap: wrap; gap: 2px 12px; }

/* Wissen & Qualität: geprüfte Antworten, Vorschläge mit Wortvergleich */
.vd-korrektur { display: flex; flex-direction: column; gap: 8px; }
.vd-korrektur:empty { display: none; }
.vd-vergleich { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.vd-vergleich > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.vd-diff { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.vd-diff-neu { background: #e7f7ec; color: #1c7a3a; text-decoration: none; border-radius: 2px; }
.vd-diff-weg { background: #fbe9e6; color: #a01b1b; text-decoration: line-through; border-radius: 2px; }

/* Antworten im Chat: linksbündig, nicht volle Breite, leicht grün (Fragen rechts in Blau) */
.vd-antwort { align-self: flex-start; max-width: min(860px, 88%); background: color-mix(in srgb, var(--km-gruen-hell) 30%, #fff); border: 1px solid color-mix(in srgb, var(--km-gruen) 55%, #fff); border-radius: 12px 12px 12px 2px; box-shadow: none; }
.vd-antwort > .vd-karte-kopf { background: transparent; min-height: 0; padding: 10px 16px 0; justify-content: flex-start; }
.vd-antwort > .vd-karte-kopf > h2 { display: none; }

/* Ansicht „Kunde“ des Antwort-Assistenten: freundlicher Chat, feste Knöpfe, Details für den Support unauffällig */
.vd-kunde .vd-karte-inhalt { gap: 12px; }
.vd-klaerung { padding: 8px 12px; border-left: 4px solid #1f7fcf; border-radius: 6px; background: #e8f3ff; color: #235b7e; }
.vd-klaerung .vd-absatz { margin: 0; font-weight: 600; }
.vd-abschluss { font-weight: 600; color: #235b7e; overflow-wrap: anywhere; }
.vd-kunde-knoepfe { display: flex; flex-direction: column; gap: 8px; }
.vd-support-details { font-size: 13px; }
.vd-support-details > summary { font-size: 12px; opacity: .75; }
.vd-support-details[open] > summary { opacity: 1; }

/* Wissen & Qualität › Themen: Kennzahlen je Thema und Beispielfragen */
.vd-kennzahlen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.vd-kennzahlen li { display: flex; flex-direction: column; min-width: 0; max-width: 170px; }
.vd-kennzahlen strong { font-size: 18px; }
.vd-kennzahlen span { font-size: 12px; color: var(--km-text-gedimmt); }
.vd-beispiele { margin: 4px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }

/* ---------- Wissen & Qualität › Statistik ---------- */
.vd-stat { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vd-stat-titel { margin: 8px 0 0; font-size: 16px; }
.vd-stat-lade { opacity: .6; transition: opacity .15s; }
.vd-stat > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
/* Filter der Statistik: in einer Zeile, linksbündig (nicht als Spalte rechts) */
.vd-stat > .vd-filter { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; gap: 10px 20px; padding: 10px 14px; background: #fff; border: 1px solid var(--km-rand); border-radius: 8px; }
.vd-stat > .vd-filter .vd-feld { flex: 0 0 auto; }
.vd-stat > .vd-filter select { min-width: 220px; max-width: 320px; }
.vd-stat-kacheln { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.vd-stat-kachel { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: #fff; border: 1px solid var(--km-rand); border-radius: 8px; box-shadow: var(--km-kachel-schatten); min-width: 0; }
.vd-stat-kachel strong { font-size: 22px; line-height: 1.2; }
.vd-stat-name { font-size: 12px; color: var(--km-text-gedimmt); }
.vd-delta { font-size: 12px; font-weight: 600; }
.vd-delta.gut { color: #1c7a3a; }
.vd-delta.schlecht { color: #a01b1b; }
.vd-delta.neutral { color: var(--km-text-gedimmt); font-weight: 400; }
.vd-stat-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.vd-stat-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.vd-stat-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; }
.vd-stat-text { overflow-wrap: anywhere; min-width: 0; }
.vd-stat-balken { display: flex; height: 8px; margin-top: 3px; background: #edf0f2; border-radius: 4px; overflow: hidden; }
.vd-stat-balken span { display: block; height: 100%; }
.vd-stat-balken .beantwortet, .vd-stat-punkt.beantwortet { background: #2e8b57; }
.vd-stat-balken .klaerung, .vd-stat-punkt.klaerung { background: #1f7fcf; }
.vd-stat-balken .nicht-belegt, .vd-stat-punkt.nicht-belegt { background: #e0a030; }
.vd-stat-balken .fehler, .vd-stat-punkt.fehler { background: #c0392b; }
.vd-stat-balken .quelle { background: #6b2fa3; }
.vd-stat-balken .sicher-hoch { background: #2e8b57; }
.vd-stat-balken .sicher-mittel { background: #e0a030; }
.vd-stat-balken .sicher-niedrig { background: #c0392b; }
.vd-stat-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-left: 6px; }
.vd-zahl { text-align: right; white-space: nowrap; }
.vd-tabelle th.vd-zahl { text-align: right; }
.vd-stat-summe td { font-weight: 600; border-top: 2px solid var(--km-rand); }
.vd-stat-waerme { border-collapse: separate; border-spacing: 2px; font-size: 11px; }
.vd-stat-waerme th { font-weight: 600; color: var(--km-text-gedimmt); padding: 1px 4px; text-align: center; background: transparent; }
.vd-stat-waerme tbody th { text-align: left; }
.vd-stat-waerme td { min-width: 26px; height: 24px; text-align: center; border-radius: 3px; background: #edf0f2; }
.vd-stat-waerme td.stufe1 { background: #d6eefd; }
.vd-stat-waerme td.stufe2 { background: #a9d6f5; }
.vd-stat-waerme td.stufe3 { background: #6fb6ea; }
.vd-stat-waerme td.stufe4 { background: #2f8fd8; color: #fff; }
.vd-stat-waerme td.stufe5 { background: #1a5f9c; color: #fff; }

/* Ansicht und Bezug nebeneinander */
.vd-feld-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; }
.vd-feld-zeile > .vd-feld:first-child { flex: 0 0 auto; }
.vd-feld-zeile > label.vd-feld { flex: 1 1 260px; min-width: 0; }

/* ---------- Wissen & Qualität › Testfragen ---------- */
.vd-testfragen { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.vd-testfragen progress { width: 100%; height: 10px; margin: 8px 0; }
.vd-regeln { margin: 6px 0 0; padding: 8px 10px; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: #f3f5f7; border-radius: 6px; }