/* DFL · Auf einen Blick, Teil 2 (D62 · 4–7, dfl_blick_patch.js) – nur Tokens (Kenney Tag/Nacht) */

/* 4 · Cap nach Positionsgruppen (Front Office) */
.dfl-blick-cap { display: flex; flex-direction: column; gap: 8px; }
.dfl-blick-cap .fo-zeile span { display: inline-flex; align-items: center; gap: 6px; }
.blick-capbalken { position: relative; display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--bg3, #262a3a);
  border: 2px solid var(--k-rand, var(--border, #30363d)); }
.blick-capbalken i { display: block; height: 100%; flex: none; }
.blick-capbalken i + i { box-shadow: inset 2px 0 0 var(--bg2, #1e2230); }
.blick-capbalken em { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: var(--text, #f5f6fa); border-radius: 2px; }
.blick-capliste { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 4px 8px; align-items: center; font-size: 13px; color: var(--text2, #a4b0be); }
.blick-capliste b { color: var(--text, #f5f6fa); font-variant-numeric: tabular-nums; text-align: right; }
.blick-farbe { width: 12px; height: 12px; border-radius: 3px; }
.blick-unter { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text3, #8a95a6); }
.blick-kette { display: flex; flex-wrap: wrap; gap: 5px; }
.blick-kette > span { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text2, #a4b0be); background: var(--bg3, #262a3a);
  border-radius: 999px; padding: 2px 9px 2px 3px; }
.blick-kette b { color: var(--text, #f5f6fa); font-variant-numeric: tabular-nums; }
.blick-posten { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 8px; align-items: center; font-size: 13px; }
.blick-posten .blick-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text, #f5f6fa); }
.blick-posten .blick-name i { display: block; height: 5px; border-radius: 3px; background: var(--k-blau, var(--accent, #3fb950)); }
.blick-posten b { font-variant-numeric: tabular-nums; text-align: right; color: var(--text, #f5f6fa); }

/* 5 · Kader mit Ampeln */
.blick-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.blick-chip { font: 800 12px var(--font-text, system-ui); min-height: 32px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--k-rand, var(--border, #30363d)); background: var(--bg2, #1e2230); color: var(--text2, #a4b0be); }
.blick-chip b { color: var(--text, #f5f6fa); margin-left: 2px; }
.blick-chip[aria-pressed="true"] { background: var(--k-blau-knopf, var(--accent, #2c7cb5)); border-color: var(--k-blau-schatten, var(--accent, #1d5a85)); color: #fff; }
.blick-chip[aria-pressed="true"] b { color: #fff; }
.blick-ampeln { display: inline-flex; gap: 2px; flex: none; align-items: center; }
.blick-ampeln:empty { display: none; }
.blick-a { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 13px; color: #fff; }
.blick-a.rot { background: var(--app-schlecht, #d0402f); }
.blick-a.gelb { background: var(--app-mittel, #d29a0c); color: #1b1408; }
.blick-a.gruen { background: var(--app-gut, #3d9a2a); }
.blick-aus { display: none !important; }
.blick-leer { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 14px; font-size: 13px; color: var(--text3, #8a95a6); }

/* 6 · Karriere-Kompass (Spieler-Blatt) */
.dfl-kompass { margin: 10px 0 4px; padding: 12px; border-radius: 16px; background: var(--bg2, #1e2230); border: 3px solid var(--k-rand, var(--border, #30363d));
  display: flex; flex-direction: column; gap: 8px; }
.bk-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bk-kopf b { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-display, system-ui); }
.bk-phase { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--bg3, #262a3a); color: var(--text2, #a4b0be); }
.bk-svg { width: 100%; height: auto; display: block; }
.bk-svg text { font: 600 10px var(--font-text, system-ui); fill: var(--text3, #8a95a6); }
.bk-svg .bk-wert { fill: var(--text, #f5f6fa); font-weight: 800; font-size: 11px; }
.bk-gitter { stroke: var(--bg3, #262a3a); stroke-width: 1; }
.bk-flaeche { fill: color-mix(in oklab, var(--k-blau, #3498db) 16%, transparent); }
.bk-pfad { fill: none; stroke: var(--k-blau, #3498db); stroke-width: 2.5; stroke-linejoin: round; }
.bk-zukunft { fill: none; stroke: var(--k-blau, #3498db); stroke-width: 2.5; stroke-dasharray: 5 5; opacity: .75; }
.bk-jetzt { fill: var(--k-blau, #3498db); stroke: var(--bg2, #1e2230); stroke-width: 3; }
.bk-pot { fill: color-mix(in oklab, var(--app-gut, #3d9a2a) 18%, transparent); }
.bk-klein { font-size: 11.5px; color: var(--text3, #8a95a6); }
.bk-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bk-feld { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: 12px; background: var(--bg3, #262a3a); min-width: 0; }
.bk-feld small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--text3, #8a95a6); }
.bk-feld b { font: 700 17px var(--font-zahl, var(--font-display, system-ui)); }
.bk-feld b.gut { color: var(--k-gut-fg, #2f6b1f); } .bk-feld b.mittel { color: var(--k-mittel-fg, #7a5800); } .bk-feld b.schlecht { color: var(--k-schlecht-fg, #a52a1e); }
.bk-feld span { font-size: 11.5px; color: var(--text2, #a4b0be); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-feld.warn { box-shadow: inset 0 0 0 2px var(--app-schlecht, #d0402f); }
.bk-mess { display: block; height: 6px; border-radius: 3px; background: var(--bg4, #343a50); overflow: hidden; }
.bk-mess i { display: block; height: 100%; }
.bk-mess i.gut { background: var(--app-gut, #3d9a2a); } .bk-mess i.mittel { background: var(--app-mittel, #d29a0c); } .bk-mess i.schlecht { background: var(--app-schlecht, #d0402f); }

/* 7 · Erste Schritte (Office) */
.blick-schritte { margin: 12px 0; padding: 12px; border-radius: 18px; background: var(--bg2, #1e2230); border: 3px solid var(--k-rand, var(--border, #30363d));
  box-shadow: 0 4px 0 var(--k-rand, transparent); display: flex; flex-direction: column; gap: 6px; }
.bs-kopf { display: flex; justify-content: space-between; align-items: center; }
.bs-kopf b { display: inline-flex; align-items: center; gap: 6px; font: 700 15px var(--font-display, system-ui); }
.bs-kopf span { font: 800 13px var(--font-zahl, system-ui); color: var(--text2, #a4b0be); }
.bs-fortschritt { height: 8px; border-radius: 4px; background: var(--bg3, #262a3a); overflow: hidden; margin-bottom: 2px; }
.bs-fortschritt i { display: block; height: 100%; background: var(--app-gut, #3d9a2a); }
.bs-schritt { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 6px 8px;
  border-radius: 12px; border: 0; background: var(--bg3, #262a3a); color: var(--text, #f5f6fa); font: 700 14px var(--font-text, system-ui); text-align: left; cursor: pointer; }
.bs-schritt .bs-haken { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--bg2, #1e2230); color: var(--text2, #a4b0be); font-size: 16px; }
.bs-schritt.fertig { cursor: default; color: var(--text3, #8a95a6); text-decoration: line-through; }
.bs-schritt.fertig .bs-haken { background: var(--app-gut, #3d9a2a); color: #fff; }
.bs-schritt:focus-visible, .blick-chip:focus-visible { outline: 2px solid var(--k-blau, #3498db); outline-offset: 2px; }