/* AIO.City Support -- Ausbau 4 (2026-10-07): Stile fuer Spielersuche, Konto-Akte, Wissen, Regeln, Labels,
 * Ansichten, Uebersicht-Zusatz, Statistik-Zusatz. Gemeinsam fuer Spiel-NUI und Panel (kommt NACH team.css).
 * Alle Masse ueber --u, kein color-mix(), kein :has() (FiveM-CEF). Lange Kennungen brechen immer um. */

.mono { font-family: ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size: .92em; letter-spacing: 0; overflow-wrap: anywhere; word-break: break-all; }

/* ---------- Spielersuche */
.suchfeld-gross { position: relative; display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 16); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--kante), 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(0, 0, 0, .25); }
.suchfeld-gross:focus-within { box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .7), 0 0 calc(var(--u) * 26) rgba(255, 122, 26, .18); }
.suchfeld-gross > svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); color: var(--akzent-hell); flex: none; }
.suchfeld-gross input { flex: 1; min-width: 0; height: calc(var(--u) * 52); background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: calc(var(--u) * 16); }
.suchfeld-gross .erkannt { flex: none; font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent-hell); white-space: nowrap; }
.suchfeld-gross .erkannt:empty { display: none; }
.konto-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--u) * 360), 100%), 1fr)); gap: calc(var(--u) * 12); margin: calc(var(--u) * 14) 0 calc(var(--u) * 18); }
.konto-karte { display: grid; gap: calc(var(--u) * 10); min-width: 0; text-align: left; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 16);
  background: var(--karte, rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1px var(--kante); transition: transform .15s ease, box-shadow .15s ease; }
.konto-karte:hover { transform: translateY(calc(var(--u) * -2)); box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .55), 0 calc(var(--u) * 12) calc(var(--u) * 30) rgba(0, 0, 0, .3); }
.kk-kopf { display: flex; align-items: center; gap: calc(var(--u) * 10); min-width: 0; }
.kk-kopf > span:nth-child(2) { flex: 1; min-width: 0; }
.kk-kopf b { display: block; font-size: calc(var(--u) * 14); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-kopf small { display: block; color: var(--ter); font-size: calc(var(--u) * 11); overflow-wrap: anywhere; }
.kk-chars { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.char-chip { display: grid; min-width: 0; max-width: 100%; padding: calc(var(--u) * 6) calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: rgba(255, 255, 255, .05); }
.char-chip b { font-size: calc(var(--u) * 12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-chip small { color: var(--ter); font-size: calc(var(--u) * 10.5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-fuss { color: var(--ter); font-size: calc(var(--u) * 11); }
.tabelle.klickbar tbody tr { cursor: pointer; }
.tabelle.klickbar tbody tr:hover td { background: rgba(255, 255, 255, .04); }

/* ---------- Konto-Akte */
.akte-raster { display: grid; grid-template-columns: minmax(calc(var(--u) * 280), calc(var(--u) * 340)) minmax(0, 1fr); gap: calc(var(--u) * 18); min-height: 0; height: 100%; }
.akte-seite, .akte-haupt { min-width: 0; min-height: 0; overflow-y: auto; padding-right: calc(var(--u) * 4); display: grid; align-content: start; gap: calc(var(--u) * 12); }
.akte-seite .daten dd { white-space: normal; overflow: visible; overflow-wrap: anywhere; display: flex; align-items: center; gap: calc(var(--u) * 4); }
.akte-seite .daten dd .mini { flex: none; }
.akte-tabs { flex-wrap: wrap; }
.akte-inhalt { min-width: 0; display: grid; align-content: start; gap: calc(var(--u) * 10); }
.kpis.kompakt { grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 120), 1fr)); }
.kpis.kompakt .kpi { cursor: default; }
.warn-box { box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .45); background: linear-gradient(180deg, rgba(255, 90, 106, .08), rgba(255, 90, 106, .02)); }
.char-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--u) * 360), 100%), 1fr)); gap: calc(var(--u) * 12); }
.char-box.an { box-shadow: inset 0 0 0 1.5px rgba(61, 220, 132, .5); }
.char-box .steckbrief { margin-top: calc(var(--u) * 10); }
.bild-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 200), 1fr)); gap: calc(var(--u) * 8); }
.kommentar.notiz-warnung { box-shadow: inset calc(var(--u) * 3) 0 0 #ff5a6a; padding-left: calc(var(--u) * 8); }
.kommentar.notiz-lob { box-shadow: inset calc(var(--u) * 3) 0 0 #3ddc84; padding-left: calc(var(--u) * 8); }
.kommentar.notiz-info { box-shadow: inset calc(var(--u) * 3) 0 0 #5aa9ff; padding-left: calc(var(--u) * 8); }

/* ---------- Labels, Ansichten, Warteschlange */
.label-reihe { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); align-items: center; margin-top: calc(var(--u) * 8); }
.label-chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); max-width: 100%; padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 99px; font-size: calc(var(--u) * 11); font-weight: 600;
  color: #ffd9a8; background: rgba(255, 138, 31, .12); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-chip.klein { font-size: calc(var(--u) * 10); padding: calc(var(--u) * 2) calc(var(--u) * 7); }
.label-chip button { color: inherit; opacity: .7; font-size: calc(var(--u) * 13); line-height: 1; }
.label-chip button:hover { opacity: 1; }
.filter.zweite { margin-top: calc(var(--u) * -4); }
.tasten-hinweis { margin-left: auto; color: var(--ter); font-size: calc(var(--u) * 11); white-space: nowrap; }
.tasten-hinweis kbd, .ansichten kbd { font: inherit; padding: 0 calc(var(--u) * 5); border-radius: calc(var(--u) * 5); background: rgba(255, 255, 255, .08); }
.ansichten { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); align-items: center; margin: calc(var(--u) * 4) 0 calc(var(--u) * 10); }
.ansicht-chip { display: inline-flex; align-items: center; border-radius: 99px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--kante); overflow: hidden; }
.ansicht-chip button { padding: calc(var(--u) * 5) calc(var(--u) * 11); font-size: calc(var(--u) * 12); color: var(--sek); }
.ansicht-chip button:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.ansicht-chip .weg { padding: calc(var(--u) * 5) calc(var(--u) * 8) calc(var(--u) * 5) calc(var(--u) * 2); opacity: .55; }
.qzeile.fokus { box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .75); }
.chip svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); vertical-align: -.15em; margin-right: calc(var(--u) * 4); }

/* ---------- Uebersicht-Zusatz */
.ankuendigung { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 8);
  border-radius: calc(var(--u) * 12); background: rgba(90, 169, 255, .08); box-shadow: inset 0 0 0 1px rgba(90, 169, 255, .3); font-size: calc(var(--u) * 13); overflow-wrap: anywhere; }
.ankuendigung.wichtig { background: rgba(255, 138, 31, .1); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45); }
.ankuendigung > svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); flex: none; color: var(--akzent-hell); }
.ankuendigung span { flex: 1; min-width: 0; }
.ankuendigung small { color: var(--ter); flex: none; }
.schnell-reihe { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 10); align-items: center; margin-bottom: calc(var(--u) * 12); }
.suchfeld-klein { flex: 1; min-width: min(calc(var(--u) * 300), 100%); display: flex; align-items: center; gap: calc(var(--u) * 8); padding: 0 calc(var(--u) * 14); border-radius: 99px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--kante); }
.suchfeld-klein svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--ter); flex: none; }
.suchfeld-klein input { flex: 1; min-width: 0; height: calc(var(--u) * 40); background: none; border: 0; outline: 0; color: #fff; font: inherit; font-size: calc(var(--u) * 13); }
.bekannt-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 8) calc(var(--u) * 12); margin-bottom: calc(var(--u) * 12);
  border-radius: calc(var(--u) * 10); background: rgba(255, 90, 106, .07); box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .3); font-size: calc(var(--u) * 12.5); }
.bekannt-leiste svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: #ff8a96; }
.trend { display: flex; align-items: stretch; gap: calc(var(--u) * 6); height: calc(var(--u) * 78); margin-bottom: calc(var(--u) * 14); padding: calc(var(--u) * 22) calc(var(--u) * 14) calc(var(--u) * 8); position: relative; border-radius: calc(var(--u) * 14); background: rgba(255,255,255,.03); border: 1px solid var(--rand, rgba(255,255,255,.08)); max-width: calc(var(--u) * 420); }
.trend-tag { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 0; position: relative; }
.trend-tag i { width: 100%; max-width: calc(var(--u) * 26); border-radius: calc(var(--u) * 4) calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 2); background: var(--verlauf); opacity: .85; min-height: 2px; }
.trend-tag em { font-style: normal; font-size: calc(var(--u) * 10); color: var(--sek); line-height: 1; order: -1; margin-bottom: calc(var(--u) * 3); min-height: 1em; }
.trend-tag small { color: var(--ter); font-size: calc(var(--u) * 10); margin-top: calc(var(--u) * 4); line-height: 1; }
.trend-titel { position: absolute; left: calc(var(--u) * 14); top: calc(var(--u) * 7); font-size: calc(var(--u) * 10); letter-spacing: .14em; text-transform: uppercase; color: var(--ter); font-weight: 600; }

/* ---------- Statistik-Zusatz */
.heatmap { display: grid; grid-template-columns: calc(var(--u) * 26) repeat(24, minmax(0, 1fr)); gap: calc(var(--u) * 3); align-items: center; margin-bottom: calc(var(--u) * 18); }
.heatmap small { color: var(--ter); font-size: calc(var(--u) * 10); white-space: nowrap; overflow: hidden; }
.heatmap i { display: block; aspect-ratio: 1; border-radius: calc(var(--u) * 3); background: #ff8a1f; }

/* ---------- Wissen, QS, Regelwerk */
.wissen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--u) * 300), 100%), 1fr)); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 10); }
.wissen-karte { display: grid; gap: calc(var(--u) * 6); text-align: left; min-width: 0; }
.wissen-karte b { font-size: calc(var(--u) * 14); overflow-wrap: anywhere; }
.wissen-karte p { margin: 0; color: var(--sek); font-size: calc(var(--u) * 12.5); line-height: 1.5; overflow-wrap: anywhere; }
.wissen-karte small { color: var(--ter); font-size: calc(var(--u) * 11); }
.wissen-karte:hover { box-shadow: inset 0 0 0 1.5px rgba(255, 138, 31, .5); }
.qs-karte p { color: var(--sek); white-space: pre-wrap; overflow-wrap: anywhere; font-size: calc(var(--u) * 13); }
.qs-sterne { display: flex; gap: calc(var(--u) * 2); flex: none; }
.qs-sterne .mini { width: auto; padding: 0 calc(var(--u) * 6); font-size: calc(var(--u) * 11); color: #ffc24a; }
.rw-liste { max-height: calc(var(--u) * 380); overflow-y: auto; margin-top: calc(var(--u) * 10); }
.rw-liste .link-zeile span, .link-zeile > span { min-width: 0; display: grid; }
.rw-liste small, .link-zeile small { color: var(--ter); font-size: calc(var(--u) * 11); overflow-wrap: anywhere; }
.licht-text { max-width: min(calc(var(--u) * 820), 90%); max-height: 82%; overflow-y: auto; padding: calc(var(--u) * 26); border-radius: calc(var(--u) * 18); text-align: left; }

/* ---------- Spieler-Seite /support */
.wartezeit { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); color: var(--ter); font-size: calc(var(--u) * 12); margin-right: auto; }
.wartezeit svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); }
.bekannt-box { display: flex; gap: calc(var(--u) * 10); padding: calc(var(--u) * 12) calc(var(--u) * 14); margin-bottom: calc(var(--u) * 10); border-radius: calc(var(--u) * 12);
  background: rgba(255, 181, 71, .1); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .45); font-size: calc(var(--u) * 13); line-height: 1.5; }
.bekannt-box > svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); flex: none; color: var(--akzent-hell); margin-top: calc(var(--u) * 2); }
.bekannt-box b { display: block; color: #fff; }
.faq-hilf { display: flex; align-items: center; gap: calc(var(--u) * 6); margin-top: calc(var(--u) * 10); }
.faq-hilf small { color: var(--ter); margin-right: calc(var(--u) * 4); }

/* ---------- schmale Fenster (4:3, Panel klein) */
@media (max-width: 1100px) {
  .akte-raster { grid-template-columns: minmax(0, 1fr); height: auto; }
  .akte-seite, .akte-haupt { overflow: visible; }
  .tasten-hinweis { display: none; }
}

/* Nachschliff nach Render-Test (2026-10-07): Aktionsknoepfe brechen um statt zu kuerzen, Kennungen linksbuendig */
.werkzeug span { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; overflow-wrap: anywhere; }
.akte-seite .daten dd { text-align: left; justify-content: flex-start; }
.akte-seite .daten dd .mono { flex: 1 1 auto; min-width: 0; }
.zeile.sitzung { grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) auto; }
.char-box .sb b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.2; }

/* Sicherheitsnetz (2026-10-08): Ein SVG ohne eigene Groessenregel fuellte die ganze Breite
   ("Passende Antworten" riesig). :where() hat Spezifitaet 0 -> jede echte Regel gewinnt. */
:where(svg:not([width])) { width: 1.15em; height: 1.15em; flex: none; }
.link-zeile > svg { width: calc(var(--u) * 18); height: calc(var(--u) * 18); color: var(--ter); }

/* Ideen & Abstimmung (2026-10-08) */
.ideen-leiste { display: flex; flex-wrap: wrap; align-items: center; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 14); }
.ideen-leiste .segmente { flex: none; }
.seg em { font-style: normal; opacity: .7; margin-left: calc(var(--u) * 4); }
.ideen-leiste select { flex: none; width: auto; min-width: calc(var(--u) * 170); }
.ideen-leiste .suchfeld-klein { flex: 1 1 calc(var(--u) * 220); min-width: 0; }
.ideen-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(calc(var(--u) * 430), 100%), 1fr)); gap: calc(var(--u) * 12); }
.idee-karte { display: grid; grid-template-columns: calc(var(--u) * 64) minmax(0, 1fr); gap: calc(var(--u) * 14); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); min-width: 0; }
.idee-karte.s-umgesetzt { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); }
.idee-karte.s-abgelehnt { opacity: .62; }
.idee-stimmen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 10) 0; border-radius: calc(var(--u) * 12); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--kante); align-self: start; }
.idee-stimmen span { display: flex; align-items: center; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 12); font-weight: 700; }
.idee-stimmen span svg { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.idee-stimmen .auf { color: var(--gruen); }
.idee-stimmen .ab { color: var(--rot); }
.idee-stimmen b { font-family: var(--anton); font-weight: 400; font-size: calc(var(--u) * 26); line-height: 1; color: var(--sek); }
.idee-stimmen b.plus { background: var(--titel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idee-stimmen b.minus { color: var(--rot); }
.idee-rumpf { min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 6); }
.idee-kopf { display: flex; align-items: flex-start; gap: calc(var(--u) * 8); min-width: 0; }
.idee-titel { flex: 1; min-width: 0; text-align: left; font-weight: 700; font-size: calc(var(--u) * 14.5); line-height: 1.25; overflow-wrap: anywhere; color: var(--text, #fff); }
.idee-titel:hover { color: var(--akzent-hell); }
.idee-kopf .pille { flex: none; }
.ideen-rang { flex: none; display: inline-grid; place-items: center; height: calc(var(--u) * 22); padding: 0 calc(var(--u) * 7); border-radius: 99px; font-size: calc(var(--u) * 11); font-weight: 800; background: rgba(255, 255, 255, .08); color: var(--sek); }
.ideen-rang.r1 { background: var(--verlauf); color: #fff; box-shadow: var(--glow); }
.ideen-rang.r2, .ideen-rang.r3 { background: rgba(255, 181, 71, .16); color: var(--akzent-hell); }
.idee-text { margin: 0; font-size: calc(var(--u) * 12.5); line-height: 1.45; color: var(--sek); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.idee-fuss { display: flex; align-items: center; gap: calc(var(--u) * 10); margin-top: auto; padding-top: calc(var(--u) * 4); }
.idee-fuss small { flex: none; color: var(--ter); font-size: calc(var(--u) * 11); }
.idee-balken { flex: 1; height: calc(var(--u) * 6); border-radius: 99px; background: rgba(255, 90, 106, .28); overflow: hidden; min-width: calc(var(--u) * 40); }
.idee-balken i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #2fbf71, var(--gruen)); }
.ideen-knoepfe { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 6); }
.mini-knopf { height: calc(var(--u) * 26); padding: 0 calc(var(--u) * 10); border-radius: 99px; font-size: calc(var(--u) * 11); font-weight: 700; color: var(--sek); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--kante); }
.mini-knopf:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.mini-knopf.gefahr { color: #ff8a96; }
.mini-knopf.gefahr:hover { background: rgba(255, 90, 106, .16); }
.ideen-kz { grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 118), 1fr)); }
.qs-karte .box-kopf { flex-wrap: wrap; gap: calc(var(--u) * 4) calc(var(--u) * 12); align-items: baseline; }
.qs-karte .box-kopf .link { min-width: 0; flex: 1 1 calc(var(--u) * 200); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-karte { min-width: 0; } .qs-karte p { overflow-wrap: anywhere; }