/* ---------- Bereich Tickets (Präfix tk-) ---------- */
.tk-kpis { margin: 4px 0; }
.tk-box { padding: 8px 12px; border-radius: 8px; border: 1px solid #d3d3d2; background: #fff; color: #585a5f; font-size: 13px; }
.tk-box.tk-info { background: #e8f3ff; border-color: #c7e4fb; color: #235b7e; }
.tk-box.tk-ok { background: #e7f7ec; border-color: #bce7c6; color: #1c7a3a; }
.tk-box.tk-warn { background: #fdf1da; border-color: #f5d9a8; color: #9a6206; }
.tk-box.tk-danger { background: #fbe9e6; border-color: #f0b9b0; color: #a01b1b; }
.tk-box.tk-leise { background: #fff; border-color: #d3d3d2; color: #585a5f; }
.km-badge.tk-leise { background: #fff; border: 1px solid #d3d3d2; color: #585a5f; }

.tk-meldung { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 8px; background: #e7f7ec; border: 1px solid #bce7c6; color: #1c7a3a; }
.tk-anrufleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; border-radius: 8px; background: #fff; border: 1px solid #d3d3d2; }
.tk-anrufleiste-text { flex: 1 1 260px; min-width: 0; }
.tk-anruf-icon svg, .tk-icon { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }
.tk-anruf-icon { display: inline-flex; padding: 6px; border-radius: 50%; background: #acde79; }

.tk-leiste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.tk-leiste label, .tk-formular-raster label, .tk-feld, .tk-eingabe label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #5c636a; }
.tk-leiste input, .tk-leiste select, .tk-formular-raster input, .tk-formular-raster select, .tk-formular-raster textarea,
.tk-feld textarea, .tk-feld input, .tk-eingabe textarea, .tk-eingabefeld {
    min-height: 32px; box-sizing: border-box; padding: 5px 8px; border: 1px solid #d3d3d2; border-radius: 4px; font: inherit; font-size: 14px; color: #161616; background: #fff; }
.tk-leiste input[type=search] { min-width: 240px; }
.tk-leiste label.tk-check, label.tk-check { flex-direction: row; align-items: center; gap: 6px; min-height: 32px; font-size: 14px; color: #161616; }
.tk-eingabefeld { flex: 1 1 240px; width: 100%; }
.tk-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.tk-zweispaltig { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.tk-zweispaltig > * { min-width: 0; }
.tk-breit1 { flex: 1 1 320px; }
.tk-breit2 { flex: 2 1 340px; }
.tk-breit3 { flex: 3 1 480px; }
.tk-spalte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.tk-karte { background: #fff; border-radius: 8px; box-shadow: var(--km-kachel-schatten); border: 1px solid #e0e0e0; overflow: hidden; }
.tk-karte-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 16px; background: #acde79; color: #2c3332; }
.tk-karte-kopf h2 { margin: 0; font-size: 16px; color: #2c3332; }
.tk-karte-inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tk-karte > .tk-leer, .tk-karte > .tk-fuss { padding: 0 16px; }
.tk-leer { color: #5c636a; padding: 12px 0; }
.tk-fuss { margin: 8px 0 12px; }

.tk-tabelle-rahmen { overflow-x: auto; }
.tk-tabelle { width: 100%; border-collapse: collapse; font-size: 13px; }
.tk-tabelle th { text-align: left; font-weight: 600; font-size: 12px; color: #5c636a; padding: 8px 10px; border-bottom: 1px solid #d3d3d2; white-space: nowrap; }
.tk-tabelle td { padding: 8px 10px; border-bottom: 1px solid #eceff1; vertical-align: top; }
.tk-tabelle tbody tr:nth-child(even) { background: rgba(225, 232, 235, .5); }
.tk-tabelle tbody tr.tk-gewaehlt { background: #d6eefd; }
.tk-tabelle tr.tk-summe td { font-weight: 600; border-top: 2px solid #d3d3d2; background: #fff; }
.tk-link-knopf { border: 0; background: transparent; padding: 0; font: inherit; text-align: left; cursor: pointer; color: #1f7fcf; }
.tk-link-knopf strong { color: #161616; }
.tk-kanal { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tk-kursiv { font-style: italic; color: #5c636a; }
.tk-ueber { color: #a01b1b; font-weight: 600; }
.tk-heute { color: #9a6206; font-weight: 600; }
.tk-negativ { color: #a01b1b; }
.tk-rot { color: #a01b1b; font-weight: 600; }
.tk-richtung-verpasst { color: #a01b1b; }
.tk-richtung-intern { color: #5c636a; }
.tk-score { display: inline-block; min-width: 28px; text-align: center; padding: 1px 6px; border-radius: 4px; background: #2c3332; color: #fff; font-weight: 700; }
.tk-zitat { margin: 0; padding: 8px 12px; border-left: 3px solid #acde79; background: #f8f9fa; white-space: pre-wrap; }
.tk-zeile-trenner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 0; border-bottom: 1px solid #e0e0e0; font-size: 13px; }

.tk-formular-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; align-items: end; }
.tk-formular-raster .tk-breit { grid-column: 1 / -1; }

/* Meine Tickets */
.tk-ticketliste { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.tk-listeneintrag { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 10px; border: 1px solid #e0e0e0; border-left: 4px solid transparent; border-radius: 6px; background: #fff; font: inherit; text-align: left; cursor: pointer; }
.tk-listeneintrag.tk-aktiv { background: #d6eefd; border-left-color: #46a9ff; }
.tk-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0; }
.tk-meta dt { font-size: 12px; color: #5c636a; }
.tk-meta dd { margin: 0; font-weight: 600; }
.tk-prio-kritisch { color: #a01b1b; } .tk-prio-hoch { color: #9a6206; }
.tk-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.tk-verlauf { display: flex; flex-direction: column; gap: 10px; }
.tk-v { padding: 10px 12px; border-radius: 8px; border: 1px solid #e0e0e0; border-left-width: 4px; background: #fff; }
.tk-v-mailein { border-color: #e0e0e0; }
.tk-v-mailaus { background: #f0f6e9; border-color: #d6f2a4; }
.tk-v-notiz { background: #ffffcc; border-color: #f5d9a8; }
.tk-v-system { background: #f8f9fa; border-color: #e9ecef; }
.tk-text { margin: 6px 0 0; white-space: pre-wrap; }
.tk-gekuerzt { max-height: 11em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.tk-mehr { margin-top: 6px; font-size: 12px; }
.tk-anhang { padding: 4px 8px; border: 1px solid #e0e0e0; border-radius: 4px; background: #fff; font-size: 12px; }
.tk-eingabe { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; }

.tk-skelett { display: flex; flex-direction: column; gap: 8px; }
.tk-skelett div { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #eceff1, #f8f9fa, #eceff1); }
.tk-skelett div:nth-child(3) { width: 80%; } .tk-skelett div:nth-child(4) { width: 60%; }
.tk-sonder { padding: 10px 12px; border-radius: 8px; border: 1px solid #e0e0e0; background: #fff; }
.tk-sonder-titel { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.tk-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tk-punkt-monitoringticket { background: #1f7fcf; }
.tk-punkt-geraetunklar { background: #aec6d5; }
.tk-punkt-veraltet { background: #ffc107; }
.tk-rueckfall { padding: 1px 6px; border-radius: 4px; background: #ffe0cc; border: 1px solid #f5d9a8; color: #9a6206; font-size: 12px; font-weight: 700; }
.tk-liste { margin: 4px 0; padding-left: 20px; }
.tk-quelle-kuerzel { display: inline-block; padding: 0 5px; border-radius: 3px; background: #e1e8eb; color: #2c3332; font-size: 11px; font-weight: 600; }
.tk-quellen { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.tk-quelle { display: flex; flex-direction: column; gap: 2px; padding: 8px; border: 1px solid #e0e0e0; border-radius: 6px; }
.tk-chip { border-radius: 16px; }
.tk-deaktiviert { opacity: .55; cursor: not-allowed; }

/* Monitoring */
.tk-ingestion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 10px 14px; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; }
.tk-fortschritt { flex: 0 1 200px; height: 8px; border-radius: 4px; background: #e1e8eb; overflow: hidden; }
.tk-fortschritt div { height: 100%; background: #198754; }
.tk-kategorien { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.tk-kategorie { padding: 8px 10px; border: 1px solid #e0e0e0; border-radius: 6px; background: #fff; }

/* QM */
.tk-umfang { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 0; }
.tk-umfang div { padding: 8px 10px; border-radius: 6px; background: #f8f9fa; border: 1px solid #e9ecef; }
.tk-umfang dt { font-size: 12px; color: #5c636a; } .tk-umfang dd { margin: 0; font-weight: 700; }
.tk-berichtkopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; }
.tk-berichtkopf h2 { margin: 0; }
.tk-ampeln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.tk-ampel { padding: 10px; border: 1px solid #e0e0e0; border-radius: 6px; }
.tk-ampel p { margin: 6px 0; }
.tk-ampel-rot, .tk-ampel-gelb, .tk-ampel-gruen { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; margin-left: auto; }
.tk-ampel-rot::before, .tk-ampel-gelb::before, .tk-ampel-gruen::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.tk-ampel-rot::before { background: #dc3545; } .tk-ampel-gelb::before { background: #ffc107; } .tk-ampel-gruen::before { background: #198754; }
.tk-spalte details summary { cursor: pointer; color: #1f7fcf; }

/* QM-Bericht Version 2: Fragestellung, Kern, Ampel, Phasenbalken, Antwortentwurf */
.tk-frage { margin: 0; font-style: italic; color: #3d4246; }
.tk-kurzantwort { margin: 0; padding: 10px 14px; border-left: 4px solid #198754; background: #eef8e6; border-radius: 4px; font-size: 15px; font-weight: 600; }
.tk-belege { margin: 0; padding-left: 18px; font-size: 12px; color: #5c636a; }
.tk-kern { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.tk-kern dt { font-size: 12px; font-weight: 600; color: #5c636a; padding-top: 2px; }
.tk-kern dd { margin: 0; }
.tk-ampelzeile { display: flex; align-items: flex-start; gap: 8px; }
.tk-dot { display: inline-block; flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; vertical-align: baseline; }
td .tk-dot, .tk-legende .tk-dot { margin-top: 0; vertical-align: middle; }
.tk-dot-rot { background: #dc3545; } .tk-dot-gelb { background: #ffc107; } .tk-dot-gruen { background: #198754; } .tk-dot-leer { background: #d3d3d2; }
.tk-dot-lauf { background: #198754; margin-top: 0; vertical-align: middle; animation: tk-puls 1.2s ease-in-out infinite; }
.tk-lauf { font-weight: 600; color: #1c7a3a; white-space: nowrap; }
.km-badge.tk-fehler { background: #fbe9e6; color: #a01b1b; border: 1px solid #f0b9b0; }
.tk-seite-km { background: #6bb33e; } .tk-seite-kunde { background: #3b82c4; } .tk-seite-extern { background: #e8912d; } .tk-seite-system { background: #9aa0a6; }
.tk-phasenbalken { display: flex; height: 22px; border-radius: 6px; overflow: hidden; border: 1px solid #d3d3d2; background: #f8f9fa; }
.tk-phasenbalken > span { height: 100%; min-width: 1%; box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, .75); }
.tk-phasenbalken > span:last-child { border-right: 0; }
.tk-legende { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: #3d4246; }
.tk-entwurf { white-space: pre-wrap; padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 6px; background: #f8f9fa; }
.tk-roh { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 480px; overflow: auto; }
.tk-spalte details > summary { padding: 4px 0; }

/* Fortschritt der Analyse im Hintergrund */
.tk-schritte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tk-schritt { display: flex; align-items: center; gap: 10px; color: #8a8f94; }
.tk-schritt-marke { position: relative; flex: none; width: 18px; height: 18px; box-sizing: border-box; border-radius: 50%; border: 2px solid #d3d3d2; }
.tk-schritt-erledigt { color: #1c7a3a; }
.tk-schritt-erledigt .tk-schritt-marke { background: #198754; border-color: #198754; }
.tk-schritt-erledigt .tk-schritt-marke::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px; line-height: 1; }
.tk-schritt-aktuell { color: #161616; font-weight: 600; }
.tk-schritt-uebersprungen { color: #8a8a8a; }
.tk-schritt-uebersprungen .tk-schritt-marke { border-style: dashed; }
.tk-schritt-aktuell .tk-schritt-marke { border-color: #d3d3d2; border-top-color: #198754; animation: tk-drehen 1s linear infinite; }
@keyframes tk-drehen { to { transform: rotate(360deg); } }
@keyframes tk-puls { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tk-schritt-aktuell .tk-schritt-marke, .tk-dot-lauf { animation: none; } }

/* Dialoge */
.tk-dialog-hintergrund { position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 90; }
.tk-dialog { position: fixed; z-index: 91; top: 5vh; left: 50%; transform: translateX(-50%); width: min(720px, calc(100vw - 32px)); max-height: 90vh; overflow: auto;
             background: #fff; border-radius: 8px; box-shadow: 0 8px 32px rgba(0, 0, 0, .25); display: flex; flex-direction: column; }
.tk-dialog-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 12px 16px; background: #acde79; }
.tk-dialog-kopf h2 { margin: 0; font-size: 18px; }
.tk-dialog-inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.tk-dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e0e0e0; }

@media (max-width: 700px) {
    .tk-leiste input[type=search] { min-width: 0; width: 100%; }
    .tk-leiste > label { flex: 1 1 100%; }
}

/* Gerätelage (KI) auf der Karte eines PCs */
.tk-lage-detail { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 8px 12px; border-left: 3px solid #acde79; background: #f8f9fa; }
.tk-lage-detail p { margin: 0; }
.tk-lage-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.tk-lage-stand { margin-left: auto; font-size: 11px; color: var(--km-text-gedimmt); white-space: nowrap; }

/* PC-Risiko nach Kunden: Kundengruppe, Karte je PC */
.tk-karte-frei { overflow: visible; }
.tk-karte-frei > .tk-karte-kopf { border-radius: 8px 8px 0 0; }
.tk-aufzu { border: 0; background: transparent; padding: 0 6px 0 0; font: inherit; font-size: 16px; cursor: pointer; color: #2c3332; }
.tk-karte-kopf h2 a { color: inherit; }
.tk-karte .tk-klein, .tk-klein { min-height: 26px; padding: 2px 8px; font-size: 12px; }
.tk-pc { border: 1px solid #d3d3d2; border-left-width: 5px; border-radius: 8px; background: #fff; }
.tk-pc-kritisch { border-color: #dc3545; }
.tk-pc-hoch { border-color: #e0a100; }
.tk-pc-mittel { border-color: #46a9ff; }
.tk-pc-niedrig { border-color: #aec6d5; }
.tk-pc-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 8px 12px; border-radius: 0 6px 0 0; background: #f8f9fa; }
.tk-pc-kritisch > .tk-pc-kopf { background: #fbe9e6; }
.tk-pc-hoch > .tk-pc-kopf { background: #fdf1da; }
.tk-pc-mittel > .tk-pc-kopf { background: #e8f3ff; }
.tk-pc-titel { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; flex: 1 1 260px; }
.tk-pc-knoepfe { margin-left: auto; justify-content: flex-end; }
.tk-pc-kunde { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 12px; border-bottom: 1px solid #e0e0e0; background: #fff; }
.tk-pc-inhalt { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.tk-live { gap: 4px 16px; font-size: 13px; }
.km-badge.tk-server { background: #2c3332; color: #fff; }
.tk-kennzahlen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; font-size: 13px; }
.tk-zusammen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 6px 12px; font-size: 13px; color: var(--km-text); background: var(--km-flaeche); border: 1px solid var(--km-rand); border-left: 3px solid var(--km-gruen); border-radius: 6px; }
.tk-kategorien-knopf { align-self: flex-start; font-weight: 600; }
.tk-kategorie-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
/* Stichpunkte je Fehlertyp: eine Zeile je Meldungsgruppe – Schwere | Text | Anzahl, zuletzt, offen */
.tk-stichpunkte { list-style: none; margin: 6px 0 4px; padding: 0; display: grid; gap: 0; }
.tk-stichpunkte li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; padding: 5px 0; border-top: 1px solid #eef0f2; }
.tk-stichpunkte li:first-child { border-top: 0; }
.tk-stichpunkt-text { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.tk-stichpunkt-meta { white-space: nowrap; display: inline-flex; align-items: baseline; gap: 6px; }
@media (max-width: 700px) { .tk-stichpunkte li { grid-template-columns: auto minmax(0, 1fr); } .tk-stichpunkt-meta { grid-column: 2; } }
.tk-ticketlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }

/* Zuordnung: Listen mit Kundensuche je Zeile */
.tk-zuordnungsliste { list-style: none; margin: 0; padding: 6px 16px; display: flex; flex-direction: column; }
.tk-zuordnungsliste > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 8px 0; border-bottom: 1px solid #eceff1; }
.tk-zuordnungsliste > li:last-child { border-bottom: 0; }
.tk-zuordnung-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.tk-zuordnung-kunde { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tk-breit-zeile { flex: 1 1 100%; border-bottom: 0; padding: 4px 0 0; }
.tk-mehr { padding: 8px 16px 12px; }
.tk-ausklapp > summary { cursor: pointer; padding: 10px 16px; font-weight: 600; color: #2c3332; }
.tk-ausklapp[open] > summary { border-bottom: 1px solid #e0e0e0; }
.tk-ausklapp > .tk-leer { padding: 12px 16px; }

/* Ticketnummern in Zeilen (Monitoring): Abstand zwischen den Links, umbrechbar */
.tk-nummern { display: inline-flex; flex-wrap: wrap; gap: 0 .45em; }