/* Fixmatik · Bausteine. Alle Farben aus tokens.css, Präfix tf- */
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 24px; background: var(--grund); color: var(--tinte); -webkit-font-smoothing: antialiased; }
.tf-reihe { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.tf-spalte { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); }
.tf-leise { color: var(--tinte-leise); }
.tf-hinweis { font-size: 12px; line-height: 16px; color: var(--tinte-leise); }

/* Quellen-Marke */
.tf-marke { display: inline-flex; align-items: center; font: 700 12px/16px var(--font-sans); letter-spacing: .01em; padding: 2px var(--space-2); border-radius: var(--radius-s); white-space: nowrap; vertical-align: 1px; }
.tf-marke--hersteller { color: var(--marke-hersteller); background: var(--marke-hersteller-grund); }
.tf-marke--abgeleitet { color: var(--marke-abgeleitet); background: var(--marke-abgeleitet-grund); }
.tf-marke--praxis { color: var(--marke-praxis); background: var(--marke-praxis-grund); }
.tf-marke--ki { color: var(--marke-ki); background: var(--marke-ki-grund); }
.tf-marke--sicherheit { color: var(--marke-sicherheit); background: var(--marke-sicherheit-grund); }

/* Status-Plakette eines Fallberichts */
.tf-status { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/16px var(--font-sans); padding: 3px 10px 3px 8px; border-radius: var(--radius-rund); white-space: nowrap; }
.tf-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tf-status--offen { color: var(--status-offen); background: var(--status-offen-grund); }
.tf-status--frei { color: var(--status-frei); background: var(--status-frei-grund); }
.tf-status--verworfen { color: var(--status-verworfen); background: var(--status-verworfen-grund); }
.tf-status--test { color: var(--status-test); background: var(--status-test-grund); }

/* Knöpfe */
.tf-knopf { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4); font: 600 15px/20px var(--font-sans); border-radius: var(--radius-m); border: 1px solid var(--rand); background: var(--flaeche); color: var(--tinte); cursor: pointer; }
.tf-knopf:hover { border-color: var(--tinte); }
.tf-knopf--haupt { background: var(--glut); border-color: var(--glut-rand); color: var(--on-glut); }
.tf-knopf--haupt:hover { border-color: var(--on-glut); }
.tf-knopf--leise { background: transparent; border-color: transparent; color: var(--tinte-leise); }
.tf-knopf--leise:hover { color: var(--tinte); border-color: transparent; }
.tf-knopf:focus-visible, .tf-knopf.ist-fokus { outline: none; box-shadow: var(--fokus-ring); }

/* Fundstelle und Codes */
.tf-fundstelle { color: var(--glut-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; white-space: nowrap; }
.tf-quelle { font-size: 14px; line-height: 20px; color: var(--tinte-leise); }
.tf-code { font: 700 15px/20px var(--font-mono); background: var(--flaeche-tief); color: var(--tinte); padding: 1px 6px; border-radius: var(--radius-s); white-space: nowrap; }
.tf-wert { font: 400 14px/20px var(--font-mono); white-space: nowrap; }

/* Karte, Etikett, Felder */
.tf-karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-m); box-shadow: var(--schatten-karte); padding: var(--space-4) var(--space-6); }
.tf-etikett { font: 700 12px/16px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.tf-felder { display: grid; grid-template-columns: 128px 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
.tf-felder dt { font: 700 12px/24px var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-leise); }
.tf-felder dd { margin: 0; }
.tf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Chat-Muster (schematisch, so erscheint es in WhatsApp) */
.tf-wa { width: 360px; max-width: 100%; background: var(--flaeche-tief); border: 1px solid var(--linie); border-radius: var(--radius-l); overflow: hidden; }
.tf-wa-kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--anthrazit); color: var(--auf-anthrazit); }
.tf-wa-kopf svg { width: 36px; height: 36px; border-radius: 50%; flex: none; }
.tf-wa-kopf b { display: block; font: 600 17px/20px var(--font-display); }
.tf-wa-kopf small { display: block; font-size: 12px; line-height: 16px; color: var(--auf-anthrazit-leise); }
.tf-wa-verlauf { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.tf-wa-blase { max-width: 88%; padding: 7px 10px 5px; border-radius: 10px; font: 400 15px/21px var(--font-sans); box-shadow: 0 1px 1px #1a21291a; }
.tf-wa-blase p { margin: 0 0 6px; }
.tf-wa-blase p:last-of-type { margin-bottom: 0; }
.tf-wa-ein { align-self: flex-start; background: var(--flaeche); color: var(--tinte); }
.tf-wa-aus { align-self: flex-end; background: var(--chat-eigen); color: var(--tinte); }
.tf-wa-zeit { display: block; text-align: right; font-size: 11px; line-height: 14px; color: var(--tinte-leise); margin-top: 2px; }
.tf-wa-knopf { align-self: stretch; text-align: center; font: 600 15px/20px var(--font-sans); color: var(--glut-text); background: var(--flaeche); padding: 9px; border-radius: 10px; box-shadow: 0 1px 1px #1a21291a; }
.tf-wa-link { color: var(--glut-text); text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.tf-wa-sprache { display: flex; align-items: center; gap: 8px; width: 210px; font-size: 12px; color: var(--tinte-leise); }
.tf-wa-sprache i { flex: 1; height: 18px; background: repeating-linear-gradient(90deg, var(--rand) 0 2px, transparent 2px 5px); border-radius: 2px; }
.tf-wa-sprache::before { content: ""; border-left: 11px solid var(--tinte-leise); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.tf-wa-foto { display: flex; align-items: center; justify-content: center; width: 160px; height: 72px; margin-bottom: 4px; border-radius: 6px; background: var(--anthrazit); color: var(--glut); font: 700 30px/1 var(--font-mono); letter-spacing: .25em; }

/* Seitenleiste der Büro-Oberfläche */
.tf-leiste { background: var(--anthrazit); color: var(--auf-anthrazit-leise); display: flex; flex-direction: column; padding: var(--space-6) 0; }
.tf-leiste a { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-6); font-size: 15px; line-height: 20px; color: var(--auf-anthrazit-leise); text-decoration: none; }
.tf-leiste a.aktiv { background: var(--gehaeuse); color: var(--auf-anthrazit); box-shadow: inset 3px 0 0 var(--glut); }
.tf-leiste .zahl { font: 700 12px/18px var(--font-sans); min-width: 22px; text-align: center; border-radius: var(--radius-rund); background: var(--glut); color: var(--on-glut); }