/* TFIP FCC Heatmap v2 – tfip-app.css
 * Strukturelle Basis + barrierefreie Grundlagen für alle von tfip-app.js erzeugten Bausteine (tf-*).
 * Optik kommt vom Design über Variablen: --tf-bg --tf-surface --tf-surface-2 --tf-text --tf-muted --tf-accent --tf-accent-ink
 * --tf-line (dekorativ) --tf-control (Kontur interaktiver Elemente, ≥3:1) --tf-radius --tf-font --tf-font-display --tf-font-mono --tf-shadow.
 * --tone-* setzt tfip-app.js aus dem Theme. Alles ist unter .tf-root gekapselt (kein Leck in die einbettende Seite).
 */
.tf-root { color: var(--tf-text); background: var(--tf-bg); font-family: var(--tf-font); font-size: 16px; line-height: 1.5; -webkit-text-size-adjust: 100%; }
.tf-root *, .tf-root *::before, .tf-root *::after { box-sizing: border-box; }
.tf-root [hidden] { display: none !important; }
.tf-root :focus-visible { outline: 2px solid var(--tf-focus, var(--tf-accent)); outline-offset: 2px; border-radius: 4px; }
.tf-root :where(button) { font: inherit; color: inherit; cursor: pointer; }
.tf-root :where(a) { color: var(--tf-accent); text-underline-offset: 3px; }
.tf-root h1, .tf-root h2, .tf-root h3, .tf-root h4, .tf-root p, .tf-root ul, .tf-root ol, .tf-root dl, .tf-root dd { margin: 0; padding: 0; }
.tf-root ul, .tf-root ol { list-style: none; }
.tf-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Typo-Bausteine */
.tf-h { font-family: var(--tf-font-display, var(--tf-font)); font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.tf-h-xl { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 500; letter-spacing: -.02em; }
.tf-eyebrow { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--tf-muted); font-weight: 600; }
.tf-text { font-size: 1rem; color: var(--tf-text); }
.tf-meta, .tf-hint { font-size: .875rem; color: var(--tf-muted); }
.tf-note { font-size: .9rem; color: var(--tf-muted); border-left: 2px solid var(--tf-control); padding-left: .75rem; }
.tf-empty { color: var(--tf-muted); padding: 1rem 0; }
.tf-code { font-family: var(--tf-font-mono); font-size: .8rem; letter-spacing: .04em; padding: .1rem .35rem; border: 1px solid var(--tf-control); border-radius: 4px; color: var(--tf-muted); flex: none; }
.tf-code-lg { font-size: 1rem; padding: .25rem .5rem; color: var(--tf-text); }
.tf-count { font-family: var(--tf-font-mono); font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--tf-muted); margin-left: .35rem; }
.tf-bullets { display: grid; gap: .4rem; padding-left: 1.1rem !important; list-style: disc !important; font-size: .95rem; }
ol.tf-bullets { list-style: decimal !important; }
.tf-ext-sm { font-size: .85rem; }

/* Kategorie-Farbfeld: Farbe + Muster (Muster immer im Farbfeld sichtbar → farbunabhängig lesbar) */
.tf-sw { display: inline-block; width: .85rem; height: .85rem; border-radius: 3px; flex: none; background-color: var(--tone-na); border: 1px solid var(--tf-control); vertical-align: -1px; }
.tf-sw[data-tone="extreme"] { background-color: var(--tone-extreme); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.55) 0 1.2px, transparent 1.2px 3px), repeating-linear-gradient(-45deg, rgba(0,0,0,.55) 0 1.2px, transparent 1.2px 3px); }
.tf-sw[data-tone="critical"] { background-color: var(--tone-critical); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.55) 0 1.5px, transparent 1.5px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,.55) 0 1.5px, transparent 1.5px 4px); }
.tf-sw[data-tone="high"] { background-color: var(--tone-high); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 4px); }
.tf-sw[data-tone="elevated"] { background-color: var(--tone-elevated); background-image: radial-gradient(rgba(0,0,0,.55) 1px, transparent 1.4px); background-size: 4px 4px; }
.tf-sw[data-tone="notable"] { background-color: var(--tone-notable); background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1.5px, transparent 1.5px 4px); }
.tf-sw[data-tone="none"] { background-color: var(--tone-none); }
.tf-sw[data-tone="seq1"] { background-color: var(--tone-seq1); }
.tf-sw[data-tone="seq2"] { background-color: var(--tone-seq2); }
.tf-sw[data-tone="seq3"] { background-color: var(--tone-seq3); }
.tf-sw[data-tone="seq4"] { background-color: var(--tone-seq4); }
/* Badge darf umbrechen: gemessen erzwang „Länderbezogene Regime von 4 Herausgebern" (nowrap, 348 px) bei 360-px-Geräten 415 px Layoutbreite. */
.tf-badge { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; line-height: 1.25; padding: .2rem .55rem; border-radius: 14px; border: 1px solid var(--tf-control); background: var(--tf-surface-2, transparent); white-space: normal; max-width: 100%; min-width: 0; text-align: left; }
/* Grid-/Flex-Kinder schrumpfen sonst nie unter ihre Mindestinhaltsbreite („grid blowout"): ein einzelnes breites Kind zog das ganze Panel auf. */
.tf-root [data-slot="panel"] > *, .tf-findings > *, .tf-finding > *, .tf-finding-head > *, .tf-profile-head > *, .tf-groups > *, .tf-group > * { min-width: 0; }

/* Schaltflächen */
.tf-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .45rem .9rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-control); background: transparent; font-size: .9rem; font-weight: 600; }
.tf-btn:hover { background: var(--tf-surface-2); }
.tf-btn[aria-pressed="true"] { border-color: var(--tf-accent); color: var(--tf-accent); }
.tf-btn-primary { background: var(--tf-accent); color: var(--tf-accent-ink); border-color: var(--tf-accent); }
.tf-btn-primary:hover { background: var(--tf-accent); filter: brightness(1.06); }
.tf-btn[disabled], .tf-icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* Sprachmenü (fünf Sprachen, 30.09.2026): sichtbar bleibt das kurze Kürzel (DE/EN/FR/IT/ES) im Stil der Schaltfläche; darüber liegt das native
   <select> unsichtbar und flächendeckend – Klick/Tastatur öffnen die Liste der Eigenbezeichnungen (English, Deutsch, Français, Italiano, Español). */
.tf-lang { position: relative; cursor: pointer; }
.tf-lang-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; font: inherit; color: inherit; background: transparent; -webkit-appearance: none; appearance: none; }
.tf-lang-select option { color: var(--tf-text, #e8f0ee); background: var(--tf-surface, #0e1a20); }
.tf-lang:focus-within { outline: 2px solid var(--tf-focus, var(--tf-accent)); outline-offset: 2px; }
.tf-lang:hover { background: var(--tf-surface-2); }
.tf-icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-control); background: var(--tf-surface); font-size: 1.05rem; line-height: 1; }
.tf-icon-btn:hover { background: var(--tf-surface-2); }
.tf-icon-btn[aria-pressed="true"] { border-color: var(--tf-accent); color: var(--tf-accent); }
.tf-link { background: none; border: 0; padding: 0; color: var(--tf-accent); font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.tf-link:hover { text-decoration-color: currentColor; }
/* WCAG 2.5.8: eigenständige Text-Ziele ≥ 24 px hoch (Fließtext-Links im Satz sind ausgenommen) */
.tf-link, .tf-ext-sm, .tf-linklist a, .tf-card-foot a, .tf-why-src a { display: inline-block; min-height: 24px; line-height: 24px; }
.tf-why-src a, .tf-link { line-height: 1.4; padding-block: 2px; }
.tf-ext { display: inline-block; min-height: 24px; padding-block: 2px; } /* gemessen: Regime-/Themenlinks waren 19–21 px hoch */
.tf-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.tf-input, .tf-select { width: 100%; min-height: 44px; padding: .5rem .8rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-control); background: var(--tf-surface); color: var(--tf-text); font: inherit; }
.tf-input-sm { min-height: 36px; max-width: 16rem; font-size: .9rem; }
.tf-select { width: auto; min-height: 40px; font-size: .9rem; }

/* Segmente (Ebenen, Ansichten) */
.tf-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--tf-control); border-radius: calc(var(--tf-radius, 8px) + 3px); background: var(--tf-surface); }
.tf-seg-btn { display: grid; gap: 0; min-height: 36px; padding: .3rem .8rem; border: 0; border-radius: var(--tf-radius, 8px); background: transparent; font-size: .875rem; font-weight: 600; text-align: left; color: var(--tf-muted); }
.tf-seg-btn:hover { color: var(--tf-text); }
.tf-seg-btn[aria-pressed="true"] { background: var(--tf-accent); color: var(--tf-accent-ink); }
.tf-seg-sub { font-size: .72rem; font-weight: 500; opacity: .85; font-family: var(--tf-font-mono); }

/* Legende */
.tf-legend { display: flex; flex-wrap: wrap; gap: .35rem; }
.tf-legend-btn { display: inline-flex; align-items: center; gap: .45rem; min-height: 36px; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--tf-control); background: var(--tf-surface); font-size: .875rem; }
.tf-legend-btn:hover { background: var(--tf-surface-2); }
.tf-legend-btn[aria-pressed="true"] { border-color: var(--tf-accent); box-shadow: inset 0 0 0 1px var(--tf-accent); }

/* KPIs */
.tf-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; }
.tf-kpi { display: grid; gap: .1rem; text-align: left; padding: .75rem .9rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-line); background: var(--tf-surface); }
button.tf-kpi { border-color: var(--tf-control); }
button.tf-kpi:hover { background: var(--tf-surface-2); }
.tf-kpi[aria-pressed="true"] { border-color: var(--tf-accent); box-shadow: inset 0 0 0 1px var(--tf-accent); }
.tf-kpi-label { font-size: .875rem; color: var(--tf-muted); }
.tf-kpi-value { font-family: var(--tf-font-display, var(--tf-font)); font-size: 1.9rem; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tf-kpi-value[data-tone="extreme"] { color: var(--tone-extreme); } .tf-kpi-value[data-tone="critical"] { color: var(--tone-critical); } .tf-kpi-value[data-tone="high"] { color: var(--tone-high); } .tf-kpi-value[data-tone="elevated"] { color: var(--tone-elevated); }
.tf-kpi-sub { font-size: .8rem; color: var(--tf-muted); }
.tf-lede { font-family: var(--tf-font-display, var(--tf-font)); font-size: clamp(1.15rem, 1.9vw, 1.5rem); line-height: 1.45; }
.tf-inline-filter { background: none; border: 0; padding: 0 .1rem; border-bottom: 2px solid var(--tf-control); font: inherit; }
.tf-inline-filter[data-tone="extreme"] { border-bottom-color: var(--tone-extreme); } .tf-inline-filter[data-tone="critical"] { border-bottom-color: var(--tone-critical); } .tf-inline-filter[data-tone="high"] { border-bottom-color: var(--tone-high); } .tf-inline-filter[data-tone="elevated"] { border-bottom-color: var(--tone-elevated); }
.tf-inline-filter[aria-pressed="true"] { background: var(--tf-surface-2); }

/* Themen */
.tf-topics { display: flex; flex-wrap: wrap; gap: .3rem; }
.tf-topic { min-height: 36px; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--tf-control); background: transparent; font-size: .875rem; color: var(--tf-muted); }
.tf-topic:hover { color: var(--tf-text); }
.tf-topic[aria-pressed="true"] { color: var(--tf-accent); border-color: var(--tf-accent); }

/* Karte */
.tf-map { position: absolute; inset: 0; }
.tf-map canvas { display: block; }
[data-slot="stage"] { position: relative; overflow: hidden; }
.tf-tip { position: absolute; top: 0; left: 0; z-index: 5; pointer-events: none; display: grid; gap: .05rem; max-width: 240px; padding: .45rem .65rem; border-radius: 8px; background: var(--tf-surface); border: 1px solid var(--tf-control); box-shadow: var(--tf-shadow, 0 8px 24px rgba(0,0,0,.25)); font-size: .875rem; }
.tf-tip span { color: var(--tf-muted); }
.tf-mapctl { display: inline-flex; gap: .35rem; }
.tf-mini { display: grid; gap: .15rem; text-align: left; padding: .4rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-control); background: var(--tf-surface); min-width: 0; }
.tf-mini[aria-pressed="true"] { border-color: var(--tf-accent); box-shadow: inset 0 0 0 1px var(--tf-accent); }
.tf-mini-map { position: relative; display: block; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 4px; }
.tf-mini-name { font-size: .875rem; font-weight: 600; } .tf-mini-date { font-size: .75rem; color: var(--tf-muted); font-family: var(--tf-font-mono); }

/* Profil / Briefing */
.tf-profile-head { display: grid; gap: .6rem; }
.tf-profile-title { display: flex; align-items: center; gap: .7rem; }
.tf-profile-title .tf-h { flex: 1; min-width: 0; }
.tf-findings { display: grid; gap: .75rem; }
.tf-finding { display: grid; gap: .5rem; padding: .9rem; border: 1px solid var(--tf-line); border-radius: var(--tf-radius, 8px); background: var(--tf-surface-2); }
.tf-finding[data-active="1"] { border-color: var(--tf-control); }
.tf-finding[data-default="1"] .tf-text { color: var(--tf-muted); font-size: .92rem; }
.tf-finding-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.tf-why > summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--tf-accent); min-height: 32px; display: flex; align-items: center; gap: .4rem; }
.tf-why > summary::marker { color: var(--tf-accent); }
.tf-why-body { display: grid; gap: .6rem; padding-top: .5rem; font-size: .92rem; }
.tf-dl { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .9rem; font-size: .875rem; }
.tf-dl dt { color: var(--tf-muted); } .tf-dl dd { font-variant-numeric: tabular-nums; }
.tf-records { display: grid; gap: .35rem; font-size: .9rem; }
.tf-issuer { display: inline-block; min-width: 2.2rem; margin-right: .4rem; font-family: var(--tf-font-mono); font-size: .75rem; font-weight: 700; padding: .05rem .3rem; border: 1px solid var(--tf-control); border-radius: 3px; text-align: center; }
.tf-gaps { padding: .6rem .7rem; border-radius: 6px; border: 1px dashed var(--tf-control); }
.tf-linklist { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .92rem; }
.tf-caveats { font-size: .875rem; color: var(--tf-muted); }
.tf-caveats .tf-bullets { font-size: .875rem; }
.tf-profile-foot { font-size: .75rem; color: var(--tf-muted); font-family: var(--tf-font-mono); overflow-wrap: anywhere; display: none; }
.tf-groups { display: grid; gap: 1rem; }
.tf-group { display: grid; gap: .45rem; padding-bottom: 1rem; border-bottom: 1px solid var(--tf-line); }
.tf-group-head { display: flex; align-items: center; gap: .5rem; font-size: 1rem; font-weight: 600; }
.tf-num { font-family: var(--tf-font-mono); font-size: .75rem; color: var(--tf-muted); }
.tf-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.tf-chip { min-height: 32px; padding: .2rem .6rem; border-radius: 6px; border: 1px solid var(--tf-control); background: transparent; font-size: .875rem; }
.tf-chip:hover { background: var(--tf-surface-2); border-color: var(--tf-accent); }
.tf-chip-more { color: var(--tf-accent); border-style: dashed; }
.tf-changes { display: grid; gap: .45rem; font-size: .92rem; }
.tf-change { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; }
.tf-change-type { font-family: var(--tf-font-mono); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .05rem .35rem; border-radius: 3px; border: 1px solid var(--tf-control); }
.tf-change[data-type="added"] .tf-change-type::before { content: "+ "; } .tf-change[data-type="removed"] .tf-change-type::before { content: "− "; }

/* Feed */
.tf-feed-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.tf-feed-head .tf-h { margin-right: auto; }
.tf-fresh { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-family: var(--tf-font-mono); color: var(--tf-muted); }
.tf-fresh::before, .tf-dot { content: ""; display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--tf-muted); flex: none; }
.tf-fresh[data-state="ok"]::before, [data-state="ok"] > .tf-dot { background: #3fbf7f; }
.tf-fresh[data-state="due"]::before, [data-state="due"] > .tf-dot { background: #e0a526; }
.tf-fresh[data-state="stale"]::before, [data-state="stale"] > .tf-dot { background: #d9534f; }
.tf-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: .6rem; margin: .75rem 0; }
.tf-feed-link, .tf-card { min-width: 0; overflow-wrap: anywhere; }
.tf-feed-link { display: grid; gap: .3rem; height: 100%; padding: .85rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-line); background: var(--tf-surface); color: inherit !important; text-decoration: none; }
.tf-feed-link:hover { border-color: var(--tf-accent); }
.tf-feed-meta { display: flex; flex-wrap: wrap; gap: .25rem .6rem; font-size: .78rem; color: var(--tf-muted); font-family: var(--tf-font-mono); }
.tf-tag { padding: 0 .35rem; border: 1px solid var(--tf-control); border-radius: 3px; }
.tf-feed-title { font-weight: 600; }
.tf-feed-abs { font-size: .875rem; color: var(--tf-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Tabellen / Matrix */
/* Gemessen: Die 8-spaltige Quellentabelle zog „Quellen & Daten" auf Telefonen auf 1278 px Layoutbreite, weil Scroll-Container und Slot als
   Grid-Kinder mitwuchsen (min-width:auto) statt zu scrollen. Slots und Scroll-Container dürfen nie breiter werden als ihr Elternelement. */
.tf-root [data-slot] { min-width: 0; }
.tf-scroll-x { overflow-x: auto; min-width: 0; max-width: 100%; }
.tf-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tf-table th, .tf-table td { padding: .5rem .65rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tf-line); }
.tf-table thead th { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tf-muted); font-weight: 600; white-space: nowrap; }
.tf-matrix-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.tf-matrix-bar .tf-h { margin-right: auto; }
.tf-matrix-scroll { overflow: auto; max-height: var(--tf-matrix-h, 60vh); border: 1px solid var(--tf-line); border-radius: var(--tf-radius, 8px); }
.tf-matrix thead th { position: sticky; top: 0; z-index: 2; background: var(--tf-surface); }
.tf-matrix tbody th { position: sticky; left: 0; z-index: 1; background: var(--tf-surface); font-weight: 500; min-width: 12rem; }
.tf-matrix thead th:first-child { left: 0; z-index: 3; }
.tf-matrix thead th[data-active="1"] .tf-link { text-decoration-color: currentColor; }
.tf-matrix tr[data-selected="1"] th, .tf-matrix tr[data-selected="1"] td { background: var(--tf-surface-2); box-shadow: inset 0 1px 0 var(--tf-accent), inset 0 -1px 0 var(--tf-accent); }
.tf-row-main { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 32px; background: none; border: 0; padding: 0; text-align: left; }
.tf-row-main:hover span:nth-child(2) { text-decoration: underline; text-underline-offset: 3px; }
.tf-star { color: var(--tf-accent); }
.tf-cell { white-space: nowrap; }
.tf-cell > .tf-sw { margin-right: .4rem; }
.tf-cell[data-default="1"] { color: var(--tf-muted); }
.tf-cell[data-active="1"] { background: color-mix(in srgb, var(--tf-accent) 6%, transparent); }
.tf-list { display: grid; }
.tf-list-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--tf-line); }
.tf-list-row .tf-row-main { flex: 1; min-width: 0; }
/* min(…,100%): eine feste Mindestspaltenbreite (280 px) würde bei 320-px-Geräten nach Abzug der Ränder die Seite aufziehen */
.tf-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: .75rem; }
.tf-card { display: grid; gap: .55rem; align-content: start; padding: 1.1rem; border-radius: var(--tf-radius, 8px); border: 1px solid var(--tf-line); background: var(--tf-surface); }
.tf-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .9rem; margin-top: auto; }
.tf-method { display: grid; gap: .5rem; margin-bottom: 1.25rem; max-width: 72ch; }
.tf-status-item { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }

/* Dialoge */
.tf-backdrop { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: start center; padding: 8vh 16px 16px; background: rgba(0,0,0,.55); overflow-y: auto; }
.tf-dialog { width: min(560px, 100%); display: grid; gap: .75rem; padding: 1.25rem; border-radius: calc(var(--tf-radius, 8px) + 4px); background: var(--tf-surface); color: var(--tf-text); border: 1px solid var(--tf-control); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.tf-dialog-wide { width: min(860px, 100%); }
.tf-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tf-dialog-title { font-family: var(--tf-font-display, var(--tf-font)); font-size: 1.25rem; font-weight: 600; }
.tf-dialog-intro { color: var(--tf-muted); }
.tf-dialog-body { display: grid; gap: .75rem; min-width: 0; }
.tf-results { display: grid; max-height: 50vh; overflow-y: auto; }
.tf-result { display: flex; align-items: center; gap: .65rem; min-height: 44px; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; }
.tf-result[aria-selected="true"] { background: var(--tf-surface-2); box-shadow: inset 2px 0 0 var(--tf-accent); }
.tf-result-name { flex: 1; min-width: 0; } .tf-result-name small { color: var(--tf-muted); }
.tf-code-block { margin: 0; padding: .85rem; border-radius: 8px; border: 1px solid var(--tf-control); background: var(--tf-bg); font-family: var(--tf-font-mono); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.tf-keys { display: grid; grid-template-columns: max-content 1fr; gap: .5rem 1rem; align-items: center; }
.tf-keys kbd { font-family: var(--tf-font-mono); font-size: .8rem; padding: .15rem .45rem; border: 1px solid var(--tf-control); border-radius: 4px; white-space: nowrap; }
.tf-toast { position: fixed; left: 50%; bottom: 24px; z-index: 1100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px); padding: .6rem 1rem; border-radius: 999px; background: var(--tf-text); color: var(--tf-bg); font-size: .9rem; font-weight: 600; transition: opacity .2s, transform .2s; }
.tf-toast[data-show="1"] { opacity: 1; transform: translate(-50%, 0); }

@media (pointer: coarse) { .tf-seg-btn, .tf-legend-btn, .tf-topic, .tf-chip { min-height: 44px; } .tf-icon-btn { width: 44px; height: 44px; } .tf-row-main { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .tf-root *, .tf-root *::before, .tf-root *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Druck: einseitiges Länderdossier – nur das Profil, Quellen-URLs ausgeschrieben */
@media print {
  .tf-root { background: #fff !important; color: #000 !important; }
  .tf-root [data-print="hide"], .tf-backdrop, .tf-toast, .tf-tip, .tf-actions, .tf-profile-close, .tf-icon-btn { display: none !important; }
  .tf-root [data-slot="panel"] { position: static !important; width: auto !important; max-height: none !important; overflow: visible !important; box-shadow: none !important; border: 0 !important; background: #fff !important; color: #000 !important; }
  .tf-why:not([open]) > .tf-why-body { display: grid; }
  .tf-root a[href]::after { content: " (" attr(href) ")"; font-size: .75em; overflow-wrap: anywhere; }
  .tf-profile-foot { display: block; }
  .tf-finding { break-inside: avoid; background: #fff; border-color: #999; }
  /* Druck (I12, 25.09.2026): gedämpfte Bildschirmfarben sind auf Papier unlesbar – alles dunkel, Chips als Umriss, Links blau */
  .tf-root :where(p, li, dt, dd, span, small, h1, h2, h3, h4, summary, strong, em, time, label, td, th) { color: #111 !important; opacity: 1 !important; }
  .tf-root :where(.tf-eyebrow, .tf-meta, .tf-hint, .tf-note) { color: #333 !important; }
  .tf-root a[href] { color: #0645ad !important; }
  .tf-badge, .tf-chip, .tf-tag { background: #fff !important; color: #000 !important; border: 1px solid #000 !important; box-shadow: none !important; }
  .tf-badge .tf-swatch, .tf-swatch { border: 1px solid #000; }
  .tf-profile-lib, .tf-why { break-inside: avoid; }
  .tf-ind-name { color: #0645ad !important; }
}

/* ---------- Wissensbibliothek ---------- */
.tf-lib-tabs { margin-block: .25rem; }
.tf-lib-pane { display: grid; gap: .9rem; min-width: 0; }
.tf-lib-pane[hidden] { display: none; }
.tf-lib-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .5rem; min-width: 0; }
.tf-lib-bar .tf-input { grid-column: 1 / -1; }
.tf-lib-bar .tf-select { width: 100%; min-width: 0; min-height: 44px; }
.tf-lib-status { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.2rem; }
.tf-lib-status .tf-lib-count { margin-right: auto; }
.tf-lib-card { gap: .45rem; }
.tf-lib-title { font-size: 1rem; line-height: 1.35; }
.tf-lib-title a { color: inherit; text-decoration-color: var(--tf-control); }
.tf-lib-title a:hover { color: var(--tf-accent); }
.tf-tier { font-family: var(--tf-font-mono); letter-spacing: .04em; padding: 0 .35rem; border-radius: 3px; border: 1px solid var(--tf-control); color: var(--tf-text); }
.tf-tier[data-tier="1"] { border-color: var(--tf-accent); color: var(--tf-accent); }
.tf-tags { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0; margin: 0; list-style: none; font-size: .8rem; color: var(--tf-muted); }
.tf-chip-sm { min-height: 28px; padding: .1rem .55rem; font-size: .78rem; }
.tf-lib-topics { align-items: center; }
.tf-lib-limit > summary { font-size: .82rem; min-height: 28px; }
.tf-lib-more { display: flex; justify-content: center; }
.tf-lib-group { display: grid; gap: .6rem; min-width: 0; }
.tf-lib-group + .tf-lib-group { margin-top: .6rem; }
.tf-profile-lib { display: grid; gap: .45rem; min-width: 0; }
.tf-fiu { display: grid; gap: .15rem; }
.tf-profile-lib .tf-records small { color: var(--tf-muted); }
@media (pointer: coarse) { .tf-chip-sm { min-height: 44px; } .tf-lib-limit > summary { min-height: 44px; } }
.tf-lib-tiers .tf-dl { display: block; font-size: .9rem; }
.tf-lib-tiers .tf-dl dt { font-weight: 600; margin-top: .6rem; color: var(--tf-text); }
.tf-lib-tiers .tf-dl dd { margin: .15rem 0 0; color: var(--tf-muted); }

/* ---------- Gateway: Screening + eigene Ebenen ---------- */
.tf-root:not([data-gateway="1"]) [data-gateway-only] { display: none !important; }
.tf-gw-form { display: grid; gap: .5rem; min-width: 0; }
.tf-gw-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: .5rem; }
.tf-gw-row .tf-select { width: 100%; min-width: 0; min-height: 44px; }
.tf-gw-adapters { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.tf-gw-adapters legend { padding: 0; margin-bottom: .2rem; }
.tf-gw-adapter { display: inline-flex; align-items: center; gap: .35rem; min-height: 32px; font-size: .92rem; }
.tf-gw-adapter input { width: 18px; height: 18px; accent-color: var(--tf-accent); }
.tf-gw-result { display: grid; gap: .5rem; padding-top: .9rem; margin-top: .4rem; border-top: 1px solid var(--tf-line); min-width: 0; }
.tf-gw-result .tf-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; }
.tf-gw-matches { display: grid; gap: .6rem; list-style: none; padding: 0; margin: 0; }
.tf-gw-match { display: grid; gap: .4rem; padding: .8rem; border: 1px solid var(--tf-line); border-radius: var(--tf-radius, 8px); background: var(--tf-surface); min-width: 0; overflow-wrap: anywhere; }
.tf-gw-match-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tf-gw-score { font-family: var(--tf-font-mono); font-size: .82rem; color: var(--tf-muted); border-bottom: 1px dotted var(--tf-control); }
.tf-seg-btn[data-own="1"] .tf-seg-name { font-style: italic; }
@media (pointer: coarse) { .tf-gw-adapter { min-height: 44px; } }

/* ---------- Zeitleiste (EU-Sanktionspakete) ---------- */
.tf-timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--tf-line); display: grid; gap: 1rem; min-width: 0; }
.tf-tl-item { position: relative; display: grid; gap: .3rem; min-width: 0; overflow-wrap: anywhere; }
.tf-tl-item::before { content: ''; position: absolute; left: calc(-1.1rem - 8px); top: .45rem; width: 10px; height: 10px; border-radius: 50%; background: var(--tf-control); border: 2px solid var(--tf-surface); }
.tf-tl-item[data-kind="package"]::before { background: var(--tf-accent); }
.tf-tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.tf-tl-title { font-size: 1rem; }

/* ---------- Drittindikatoren (nicht amtlich) ---------- */
.tf-layer-third { margin-top: .55rem; min-width: 0; }
.tf-third-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 32px; padding: .15rem 0; color: var(--tf-muted); }
.tf-third-summary::-webkit-details-marker { display: none; }
.tf-third-summary::before { content: '\25B8'; font-size: .8rem; color: var(--tf-accent); transition: transform .15s ease; }
.tf-layer-third[open] > .tf-third-summary::before { transform: rotate(90deg); }
.tf-third-summary:hover { color: var(--tf-text); }
.tf-third-summary:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; border-radius: 4px; }
.tf-layer-third[open] > .tf-seg-third { margin-top: .35rem; }
.tf-layer-third:not([open]) > .tf-seg-third { display: none; } /* verbergen wenn eingeklappt (überschreibt .tf-seg display:inline-flex) */
.tf-third-label { margin: 0; opacity: .85; }
@media (pointer: coarse) { .tf-third-summary { min-height: 44px; } }
.tf-seg-third { display: grid; gap: .5rem; min-width: 0; }
.tf-third-group { min-width: 0; }
.tf-third-group-label { display: block; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; opacity: .72; margin: .1rem 0 .2rem; }
.tf-seg-sub { border-style: dashed; }
.tf-ind-group { margin-top: .45rem; min-width: 0; }
.tf-ind-group-label { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; opacity: .72; margin: 0 0 .25rem; }
.tf-ind-row .tf-badge { font-size: .78rem; }
.tf-seg-btn[data-thirdparty="1"] .tf-seg-name { font-weight: 600; }
.tf-ind-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; min-width: 0; }
.tf-ind-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .55rem; min-width: 0; }
.tf-ind-name { border: 0; background: transparent; color: var(--tf-accent); font: inherit; font-weight: 600; padding: 0; min-height: 24px; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.tf-ind-name:hover { text-decoration: underline; }
.tf-ind-val { font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .tf-ind-name { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- Listungen je Land ---------- */
.tf-lst-row { display: grid; gap: .1rem; padding: .5rem 0; border-top: 1px solid var(--tf-line); min-width: 0; }
.tf-lst-row:first-child { border-top: 0; }
.tf-lst-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.tf-lst-total { font-variant-numeric: tabular-nums; color: var(--tf-accent); }

/* ---------- Gruppierte Ebenenliste (Seitenleiste, data-layout="groups") ---------- */
.tf-lgroups-hint { margin-bottom: .1rem; }
.tf-lgroup { min-width: 0; border-top: 1px solid var(--tf-line); padding-top: .3rem; }
.tf-lgroup-summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; min-height: 36px; padding: .15rem 0; color: var(--tf-muted); }
.tf-lgroup-summary::-webkit-details-marker { display: none; }
.tf-lgroup-summary::before { content: '\25B8'; font-size: .8rem; color: var(--tf-accent); transition: transform .15s ease; }
.tf-lgroup[open] > .tf-lgroup-summary::before { transform: rotate(90deg); }
.tf-lgroup-summary:hover { color: var(--tf-text); }
.tf-lgroup-summary:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; border-radius: 4px; }
.tf-lgroup-label { margin: 0; opacity: .9; }
.tf-lgroup-note { flex-basis: 100%; margin: .1rem 0 0; font-size: .7rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tf-muted, #9fb3b0); } /* Zusatz unter der Gruppenüberschrift (cfg.groupNotes), z. B. „TFIP-Einstufung, nicht amtlich“ */
.tf-lgroup-active { width: .5rem; height: .5rem; border-radius: 50%; background: var(--tf-accent); margin-left: auto; flex: none; }
.tf-lgroup:not([open]) > .tf-lgroup-body { display: none; }
.tf-lgroup > .tf-lgroup-body { padding: .2rem 0 .5rem; }
.tf-llist { display: grid; gap: 3px; min-width: 0; }
.tf-lbtn { display: flex; align-items: center; gap: .55rem; width: 100%; min-height: 40px; padding: .35rem .6rem; border: 1px solid transparent; border-radius: var(--tf-radius, 8px); background: transparent; text-align: left; color: var(--tf-muted); font-size: .875rem; font-weight: 600; min-width: 0; }
.tf-lbtn:hover { color: var(--tf-text); background: var(--tf-surface-2); }
.tf-lbtn[aria-pressed="true"] { background: var(--tf-accent); color: var(--tf-accent-ink); border-color: var(--tf-accent); }
.tf-lbtn-sw { display: inline-flex; gap: 1px; flex: none; min-width: .5rem; }
.tf-lbtn-sw .tf-sw { width: .5rem; height: .85rem; border-radius: 2px; border-color: rgba(0, 0, 0, .35); }
.tf-lbtn-text { display: grid; gap: 0; min-width: 0; flex: 1; }
.tf-lbtn-name { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; } /* Q-21: zweizeilig statt Ellipse – langer Name bleibt lesbar, title nur Zusatz */
.tf-lbtn-sub { font-size: .72rem; font-weight: 500; opacity: .85; font-family: var(--tf-font-mono); }
.tf-lbtn[data-own="1"] .tf-lbtn-name { font-style: italic; }
.tf-third-group .tf-llist { padding-left: .15rem; }
@media (pointer: coarse) { .tf-lbtn { min-height: 44px; } .tf-lgroup-summary { min-height: 44px; } }

/* ---------- Profil: auf-/zuklappbare Abschnitte ---------- */
.tf-sec { min-width: 0; border-top: 1px solid var(--tf-line); padding-top: .4rem; }
.tf-sec-sum { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .45rem; min-height: 36px; }
.tf-sec-sum::-webkit-details-marker { display: none; }
.tf-sec-sum::before { content: '\25B8'; font-size: .8rem; color: var(--tf-accent); transition: transform .15s ease; flex: none; }
.tf-sec[open] > .tf-sec-sum::before { transform: rotate(90deg); }
.tf-sec-sum:hover .tf-eyebrow { color: var(--tf-text); }
.tf-sec-sum:focus-visible { outline: 2px solid var(--tf-accent); outline-offset: 2px; border-radius: 4px; }
.tf-sec-body { display: grid; gap: .45rem; padding-top: .35rem; min-width: 0; }
.tf-sec:not([open]) > .tf-sec-body { display: none; }
.tf-sec-none { border-top: 0; padding-top: 0; }
.tf-sec-none .tf-eyebrow { text-transform: none; letter-spacing: 0; font-size: .875rem; }
.tf-none-list { display: grid; gap: .3rem; font-size: .9rem; }
.tf-none-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
@media (pointer: coarse) { .tf-sec-sum { min-height: 44px; } }
@media print { .tf-sec:not([open]) > .tf-sec-body { display: grid !important; } .tf-sec-sum::before { display: none; } }

/* Drittindikatoren: veralteter Wert (Reihe hat für dieses Land keinen neueren Stand) – Hinweis per title */
.tf-stale { color: var(--tone-elevated); text-decoration: underline dotted; cursor: help; }
.tf-lbtn-count { flex: none; font-family: var(--tf-font-mono); font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .8; }
.tf-dialog-xwide { width: min(1160px, 100%); } /* Vergleich mit 4 Ländern: 860 px schnitten die vierte Spalte ab (Sichtprüfung 27.09.) */
.tf-usedin { display: block; margin-top: .2rem; font-weight: 400; }