/* AIO.City Support -- TEAM-KERN Stile (2026-10-06). Gemeinsam fuer Spiel-NUI und Panel.
 * Baut auf app.css (Spiel) bzw. basis.css (Panel = Kopie davon) auf. Alle Masse ueber --u. */

.u-klein, .klein { color: var(--ter); font-size: calc(var(--u) * 11.5); }
.abstand { margin: calc(var(--u) * 8) 0 calc(var(--u) * 10); }
.zwei-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--u) * 420), 100%), 1fr)); gap: calc(var(--u) * 22); }
.reihe { display: flex; gap: calc(var(--u) * 8); align-items: center; }
.reihe .eingabe { flex: 1; min-width: 0; }
.voll-breit { width: 100%; justify-content: center; margin-top: calc(var(--u) * 12); }
.unterzeile { margin-top: calc(var(--u) * 8); color: var(--ter); font-size: calc(var(--u) * 11.5); line-height: 1.5; }
.zitat { margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 10); background: rgba(255, 226, 191, .06); color: var(--gold); font-size: calc(var(--u) * 12.5); font-style: italic; }
.vortext { margin-top: calc(var(--u) * 10); font-size: calc(var(--u) * 12); color: var(--sek); white-space: pre-wrap; line-height: 1.5; }
.vortext b { color: var(--akzent-hell); }
.eingabe.kompakt { width: auto; padding: calc(var(--u) * 8) calc(var(--u) * 13); border-radius: 99px; font-size: calc(var(--u) * 12.5); }
select.eingabe.kompakt { padding-right: calc(var(--u) * 34); background-position: right calc(var(--u) * 12) center; }
.eingabe.suche { width: calc(var(--u) * 260); }
textarea.eingabe.gross { min-height: calc(var(--u) * 220); margin-top: calc(var(--u) * 8); }
.mini { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: calc(var(--u) * 8); display: inline-grid; place-items: center; color: var(--ter); vertical-align: middle; }
.mini:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.mini svg { width: 60%; height: 60%; }
.ini { display: inline-grid; place-items: center; width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 99px; font-style: normal; flex: none;
  font-size: calc(var(--u) * 10); font-weight: 700; letter-spacing: .02em; background: var(--verlauf); color: #fff; box-shadow: 0 0 0 calc(var(--u) * 2) rgba(12, 14, 22, .9); }
.ini.frei { background: rgba(255, 255, 255, .08); color: var(--ter); }
.ini.klein { width: calc(var(--u) * 20); height: calc(var(--u) * 20); font-size: calc(var(--u) * 8.5); }
.sterne { color: #ffc24a; letter-spacing: .05em; font-size: calc(var(--u) * 12); white-space: nowrap; }
.link-zeile { display: flex; align-items: center; gap: calc(var(--u) * 8); width: 100%; text-align: left; padding: calc(var(--u) * 7) calc(var(--u) * 8); border-radius: calc(var(--u) * 9); font-size: calc(var(--u) * 12.5); }
.link-zeile:hover { background: rgba(255, 255, 255, .06); }
.link-zeile .pille { margin-left: auto; }
.klein-liste { margin-top: calc(var(--u) * 6); gap: 0; }
.verlauf-liste { margin-top: calc(var(--u) * 8); display: grid; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 11.5); color: var(--ter); line-height: 1.45; }
.verlauf-liste b { color: var(--sek); font-weight: 600; }
.verlauf-liste.gross { font-size: calc(var(--u) * 12.5); gap: calc(var(--u) * 9); }
.zeile.statisch { cursor: default; }
.zeile.statisch:hover { background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); }
.schalter-zeile { display: flex; align-items: center; gap: calc(var(--u) * 10); font-size: calc(var(--u) * 13); color: var(--sek); cursor: pointer; }
.schalter-zeile input { width: calc(var(--u) * 16); height: calc(var(--u) * 16); accent-color: #ff8a1f; }
.feldgitter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--u) * 12); }
.farbwahl { cursor: pointer; }
.farbwahl input { display: none; }
.farbwahl i { display: block; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 99px; background: var(--c); box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .25); }
.farbwahl input:checked + i { box-shadow: 0 0 0 calc(var(--u) * 3) #fff, 0 0 calc(var(--u) * 14) var(--c); }
.team-dlg { z-index: 60; }

/* ── Warteschlange ── */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 150), 1fr)); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 14); }
.kz { padding: calc(var(--u) * 12) calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); }
.kz b { display: block; font-family: var(--anton); font-weight: 400; font-size: calc(var(--u) * 30); line-height: 1; background: var(--titel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kz small { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 10.5); letter-spacing: .18em; text-transform: uppercase; color: var(--ter); }
.kz.warn { box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .45); }
.kz.warn b { background: none; color: var(--rot); -webkit-text-fill-color: var(--rot); }
.zeile .mitte { min-width: 0; }
.zeile .prio { align-self: stretch; border-radius: 99px; }
.warte { font-size: calc(var(--u) * 11); font-weight: 700; padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: 99px; white-space: nowrap; }
.warte.gruen { color: var(--gruen); background: rgba(61, 220, 132, .12); }
.warte.gelb { color: #ffc24a; background: rgba(255, 194, 74, .14); }
.warte.rot { color: var(--rot); background: rgba(255, 90, 106, .16); animation: pulsieren 2s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .55; } }
.zeile .pille svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); display: inline; vertical-align: -1px; margin-right: calc(var(--u) * 3); }

/* ── Ticket (Team) ── */
.ticket.team.breit { grid-template-columns: minmax(0, 1fr) calc(var(--u) * 360); }
.schreiben.stapelnd { flex-direction: column; align-items: stretch; }
.schreib-leiste { display: flex; gap: calc(var(--u) * 8); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
/* Auswahl fuellt die Zeile; wird es eng, rutschen die Knoepfe rechtsbuendig in eine zweite Zeile */
.schreib-leiste select, .schreib-leiste #a-bau { flex: 1 1 calc(var(--u) * 170); min-width: calc(var(--u) * 140); max-width: 100%; }
.schreib-leiste .knopf { flex: none; }
.schreib-leiste #a-danach { flex: none; display: inline-flex; }
.schreib-leiste #a-danach:empty { display: none; }
.werkzeuge .knopf { justify-content: center; }
.werkzeuge .reihe .knopf { flex: none; }

/* ── Projekte ── */
.projekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 300), 1fr)); gap: calc(var(--u) * 14); }
.projektkarte { position: relative; overflow: hidden; text-align: left; padding: calc(var(--u) * 20) calc(var(--u) * 20) calc(var(--u) * 16); border-radius: calc(var(--u) * 20);
  display: flex; flex-direction: column; gap: calc(var(--u) * 10); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 1px var(--kante);
  transition: transform .3s var(--pop), box-shadow .2s ease; }
.projektkarte:hover { transform: translateY(calc(var(--u) * -3)); box-shadow: inset 0 0 0 1px var(--pf), 0 0 calc(var(--u) * 24) rgba(0,0,0,.3); }
.pk-streifen { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--u) * 4); background: var(--pf); }
.pk-kopf { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.pk-kopf b { font-family: var(--anton); font-weight: 400; font-size: calc(var(--u) * 22); text-transform: uppercase; letter-spacing: .01em; }
.pk-kuerzel { padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: calc(var(--u) * 7); background: var(--pf); color: #0c0e16; font-weight: 700; font-size: calc(var(--u) * 10.5); letter-spacing: .08em; }
.pk-text { color: var(--sek); font-size: calc(var(--u) * 12.5); line-height: 1.5; min-height: calc(var(--u) * 18); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-fuss { display: flex; justify-content: space-between; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 11.5); color: var(--ter); }
.pk-fuss em { color: var(--rot); font-style: normal; }
.fortschritt { height: calc(var(--u) * 6); border-radius: 99px; background: rgba(255, 255, 255, .08); overflow: hidden; margin: calc(var(--u) * 6) 0; }
.fortschritt i { display: block; height: 100%; border-radius: 99px; background: var(--verlauf); transition: width .5s var(--weich); }
.segmente { display: inline-flex; padding: calc(var(--u) * 3); border-radius: 99px; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px var(--kante); }
.seg { height: calc(var(--u) * 32); padding: 0 calc(var(--u) * 14); border-radius: 99px; font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sek); }
.seg.an { background: var(--verlauf); color: #fff; box-shadow: var(--glow); }

/* Board */
.pm-brett { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(calc(var(--u) * 180), 1fr); gap: calc(var(--u) * 12); overflow-x: auto; padding-bottom: calc(var(--u) * 6); }
.pm-spalte { display: flex; flex-direction: column; min-height: 0; border-radius: calc(var(--u) * 18); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--kante); transition: box-shadow .15s ease, background .15s ease; }
.pm-spalte.ueber { background: rgba(255, 138, 31, .07); box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .5); }
.pm-kopf { display: flex; align-items: center; gap: calc(var(--u) * 8); padding: calc(var(--u) * 12) calc(var(--u) * 12) calc(var(--u) * 8); }
.pm-kopf i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 99px; background: var(--c); box-shadow: 0 0 calc(var(--u) * 8) var(--c); }
.pm-kopf b { flex: 1; font-size: calc(var(--u) * 11); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.pm-kopf span { font-size: calc(var(--u) * 11); color: var(--ter); font-variant-numeric: tabular-nums; }
.pm-karten { flex: 1; min-height: calc(var(--u) * 60); overflow-y: auto; padding: 0 calc(var(--u) * 10) calc(var(--u) * 10); display: flex; flex-direction: column; gap: calc(var(--u) * 8); }
.pm-karten.liste-karten { overflow: visible; padding: 0; }
.k-karte { position: relative; padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 10) calc(var(--u) * 15); border-radius: calc(var(--u) * 13); cursor: pointer;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px var(--kante), 0 calc(var(--u) * 4) calc(var(--u) * 12) rgba(0,0,0,.2);
  transition: transform .15s ease, box-shadow .15s ease; }
.k-karte::before { content: ''; position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: calc(var(--u) * 3); border-radius: 99px; background: var(--pr); }
.k-karte:hover { box-shadow: inset 0 0 0 1px rgba(255, 138, 31, .45), 0 calc(var(--u) * 6) calc(var(--u) * 16) rgba(0,0,0,.3); }
.k-karte.zieht { opacity: .45; transform: rotate(1.5deg); }
.k-karte b { display: block; margin: calc(var(--u) * 6) 0 calc(var(--u) * 8); font-size: calc(var(--u) * 13); line-height: 1.4; font-weight: 600; }
.k-oben, .k-unten { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 6); }
.k-nr { font-size: calc(var(--u) * 10.5); color: var(--ter); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.typ { font-size: calc(var(--u) * 9.5); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: calc(var(--u) * 2) calc(var(--u) * 7); border-radius: 99px; color: var(--c); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--c); }
.k-meta { display: flex; gap: calc(var(--u) * 10); align-items: center; color: var(--ter); font-size: calc(var(--u) * 11); flex-wrap: wrap; }
.k-meta span { display: inline-flex; align-items: center; gap: calc(var(--u) * 3); }
.k-meta svg, .faellig svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.faellig { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); font-size: calc(var(--u) * 11); color: var(--sek); }
.faellig.ueber { color: var(--rot); font-weight: 700; }

/* Tabelle */
.tabelle-rahmen { overflow: auto; border-radius: calc(var(--u) * 14); }
.tabelle { width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--u) * 5); font-size: calc(var(--u) * 12.5); }
.tabelle th { text-align: left; font-size: calc(var(--u) * 10); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ter); padding: calc(var(--u) * 4) calc(var(--u) * 12); white-space: nowrap; }
.tabelle th.sortierbar { cursor: pointer; } .tabelle th.sortierbar:hover, .tabelle th.an { color: var(--akzent-hell); }
.tabelle td { padding: calc(var(--u) * 10) calc(var(--u) * 12); background: var(--karte); vertical-align: middle; }
.tabelle tr td:first-child { border-radius: calc(var(--u) * 12) 0 0 calc(var(--u) * 12); } .tabelle tr td:last-child { border-radius: 0 calc(var(--u) * 12) calc(var(--u) * 12) 0; }
.tabelle tbody tr[data-aufgabe] { cursor: pointer; } .tabelle tbody tr[data-aufgabe]:hover td { background: var(--karte-hover); }
.tabelle td svg { width: calc(var(--u) * 11); height: calc(var(--u) * 11); display: inline; vertical-align: -1px; }
.pmstatus { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 12); white-space: nowrap; }
.pmstatus i { width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 99px; background: var(--c); flex: none; }
.prio-pille { font-size: calc(var(--u) * 10.5); font-weight: 700; padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 99px; box-shadow: inset 0 0 0 1px var(--c); color: var(--c); white-space: nowrap; }

/* Roadmap */
.roadmap { position: relative; display: grid; gap: calc(var(--u) * 14); padding-left: calc(var(--u) * 18); }
.roadmap::before { content: ''; position: absolute; left: calc(var(--u) * 5); top: calc(var(--u) * 10); bottom: calc(var(--u) * 10); width: calc(var(--u) * 2); background: rgba(255, 255, 255, .1); }
.ms { position: relative; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); }
.ms-kopf { display: flex; align-items: center; gap: calc(var(--u) * 10); }
.ms-kopf b { flex: 1; font-size: calc(var(--u) * 15); }
.ms-punkt { position: absolute; left: calc(var(--u) * -18); top: calc(var(--u) * 18); width: calc(var(--u) * 12); height: calc(var(--u) * 12); border-radius: 99px; background: #12141c; box-shadow: inset 0 0 0 calc(var(--u) * 3) var(--akzent); }
.ms.fertig .ms-punkt { background: var(--gruen); box-shadow: 0 0 calc(var(--u) * 8) var(--gruen); }
.ms-pct { font-family: var(--anton); font-size: calc(var(--u) * 18); color: var(--gold); }
.ms-aufgaben { display: grid; gap: 0; margin-top: calc(var(--u) * 4); }

/* Aufgabe */
.aufgabe-haupt { display: flex; flex-direction: column; gap: calc(var(--u) * 12); min-height: 0; overflow-y: auto; padding-right: calc(var(--u) * 4); }
.aufgabe-haupt > .box { flex: none; }
.beschreibung { margin-top: calc(var(--u) * 10); white-space: pre-wrap; line-height: 1.6; color: var(--sek); font-size: calc(var(--u) * 13.5); }
.checkliste { margin: calc(var(--u) * 6) 0 calc(var(--u) * 10); display: grid; gap: calc(var(--u) * 2); }
.check-zeile { display: flex; align-items: center; gap: calc(var(--u) * 10); padding: calc(var(--u) * 6) calc(var(--u) * 4); border-radius: calc(var(--u) * 8); font-size: calc(var(--u) * 13); }
.check-zeile:hover { background: rgba(255, 255, 255, .04); }
.check-zeile span { flex: 1; }
.check-zeile.an span { color: var(--ter); text-decoration: line-through; }
.check-zeile .haken { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); display: grid; place-items: center; flex: none; }
.check-zeile .haken.an { background: var(--verlauf); box-shadow: none; }
.check-zeile .haken svg { width: 70%; height: 70%; }
.kommentare { display: grid; gap: calc(var(--u) * 12); margin: calc(var(--u) * 10) 0 calc(var(--u) * 12); }
.kommentar { display: flex; gap: calc(var(--u) * 10); }
.kommentar > div { flex: 1; min-width: 0; }
.kommentar p { margin-top: calc(var(--u) * 4); white-space: pre-wrap; line-height: 1.5; color: var(--sek); font-size: calc(var(--u) * 13); }
.eigenschaften { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: calc(var(--u) * 8) calc(var(--u) * 12); align-items: center; margin-top: calc(var(--u) * 10); }
.eigenschaften label { font-size: calc(var(--u) * 10.5); letter-spacing: .14em; text-transform: uppercase; color: var(--ter); }
.eigenschaften .eingabe { padding: calc(var(--u) * 8) calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); }

/* Statistik */
.zahlen { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 200), 1fr)); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 18); }
.zahl { display: flex; flex-direction: column; justify-content: space-between; min-height: calc(var(--u) * 92); min-width: 0; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); }
.zahl small { display: block; line-height: 1.35; font-size: calc(var(--u) * 10); letter-spacing: .2em; text-transform: uppercase; color: var(--ter); }
.zahl b { display: block; margin-top: calc(var(--u) * 6); font-family: var(--anton); font-weight: 400; font-size: calc(var(--u) * 30); background: var(--titel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zahl.warn { box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .45); }
.balken-r { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 160); padding: calc(var(--u) * 14) calc(var(--u) * 14) calc(var(--u) * 28); border-radius: calc(var(--u) * 16); background: var(--karte); margin-bottom: calc(var(--u) * 16); }
.balken-r div { flex: 1; max-width: calc(var(--u) * 54); position: relative; border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 2); background: var(--verlauf); min-height: calc(var(--u) * 3); }
.balken-r div b { position: absolute; top: calc(var(--u) * -16); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 10); color: var(--sek); }
.balken-r div span { position: absolute; bottom: calc(var(--u) * -20); left: 50%; transform: translateX(-50%); font-size: calc(var(--u) * 10); color: var(--ter); white-space: nowrap; }

/* Bausteine / FAQ */
.bausteine { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 320), 1fr)); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 14); }
.baustein p, .faq p { margin-top: calc(var(--u) * 8); color: var(--sek); white-space: pre-wrap; font-size: calc(var(--u) * 12.5); line-height: 1.55; }
.faq.aus { opacity: .5; }

/* ── Dialoge (gemeinsam: Spiel + Panel). Vorher nur in panel.css -> im Spiel ungestylt. ── */
.dialog-hg { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: calc(var(--u) * 20); background: rgba(4, 6, 12, .72); animation: rein .2s ease both; }
.dialog { width: calc(var(--u) * 640); max-width: 94vw; max-height: 88vh; overflow-y: auto; padding: calc(var(--u) * 28); border-radius: calc(var(--u) * 26);
  display: grid; gap: calc(var(--u) * 14); align-content: start; background: var(--flaeche-dicht); box-shadow: inset 0 0 0 1px var(--kante), var(--glanz), 0 calc(var(--u) * 30) calc(var(--u) * 80) rgba(0, 0, 0, .6);
  animation: dialogRein .32s var(--pop) both; }
@keyframes dialogRein { from { opacity: 0; transform: translateY(calc(var(--u) * 12)) scale(.98); } to { opacity: 1; transform: none; } }
.team-dlg .dialog { width: calc(var(--u) * 680); }
.dialog .titel.klein-titel, .titel.klein-titel { font-size: calc(var(--u) * 30); }
.dialog .gruss { margin: 0; }
.dialog .fuss { margin-top: calc(var(--u) * 4); flex-wrap: wrap; }
.dialog textarea.eingabe { min-height: calc(var(--u) * 110); }
.dialog .feldgitter { grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 170), 1fr)); }
.knopf.gefahr-haupt { background: linear-gradient(110deg, #e11d48, #ff5a6a); box-shadow: 0 0 calc(var(--u) * 20) rgba(225, 29, 72, .4); }
.link { color: var(--akzent-hell); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* ── Werkzeuge im Ticket: Raster, nichts laeuft mehr aus dem Kasten ── */
.werkzeuge { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); }
.werkzeug { display: flex; align-items: center; gap: calc(var(--u) * 8); min-width: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12);
  background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--kante); font-size: calc(var(--u) * 12); font-weight: 600; text-align: left; transition: background .15s ease, box-shadow .15s ease; }
.werkzeug:hover { background: rgba(255, 122, 26, .10); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45); }
.werkzeug svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); flex: none; color: var(--akzent-hell); }
.werkzeug span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.werkzeug.gefahr svg, .werkzeug.gefahr { color: var(--rot); }
.werkzeug.gefahr:hover { background: rgba(255, 90, 106, .10); box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .45); }

/* ── Allgemeine Schutzregeln gegen Ueberlauf in schmalen Spalten ── */
.info-spalte .box, .info-spalte .eingabe, .info-spalte select { min-width: 0; max-width: 100%; }
.info-spalte .reihe { flex-wrap: wrap; }
.info-spalte .zweier { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.daten dd { min-width: 0; }
.filter .eingabe.suche { flex: 1 1 calc(var(--u) * 200); min-width: calc(var(--u) * 160); }
/* Rechte Seite einer Zeile darf umbrechen; der Titel behaelt seine Mindestbreite (siehe .zeile-Raster unten) */
.zeile .rechts { flex-wrap: wrap; justify-content: flex-end; row-gap: calc(var(--u) * 5); min-width: 0; }
.box-kopf b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Audit 2026-10-06 (gerendert im Spielmassstab) ── */
.dialog-hg .dialog { background: linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 40%), #0e1018 !important; }
.knopf.haupt, .knopf.haupt.klein { color: #fff !important; }
.knopf.nur-ic { width: calc(var(--u) * 38); padding: 0; justify-content: center; }
.anhang { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--u) * 10); row-gap: calc(var(--u) * 2); align-items: center; }
.anhang svg { grid-row: span 2; }
.anhang span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anhang small { grid-column: 2; line-height: 1.35; }
.pm-tabelle td:first-child { white-space: nowrap; }
.pm-tabelle td:nth-child(2) { min-width: calc(var(--u) * 220); }
.kopf { align-items: flex-start; }
.kopf .aktionen { padding-top: calc(var(--u) * 14); }
.pm-brett::-webkit-scrollbar { height: calc(var(--u) * 6); }
.pm-brett::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 9px; }

/* ===================== Ausbau 3 (2026-10-06): Uebersicht, SLA, Sammelaktionen, Anwesenheit, Spielerkarte, Palette ===================== */
kbd { display: inline-grid; place-items: center; min-width: calc(var(--u) * 20); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 6); border-radius: calc(var(--u) * 6);
  font: 600 calc(var(--u) * 10) var(--schrift); letter-spacing: .04em; color: var(--sek); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--kante), inset 0 -1px 0 rgba(0,0,0,.35); }

/* Skelett beim Laden */
.skelett { padding: calc(var(--u) * 30) calc(var(--u) * 34); display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.skelett i, .skelett b, .sk-zeile { display: block; border-radius: calc(var(--u) * 12); background: linear-gradient(90deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 100%);
  background-size: 300% 100%; animation: schimmer 1.3s ease-in-out infinite; }
.sk-kopf { display: flex; flex-direction: column; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 10); }
.sk-kopf i { width: calc(var(--u) * 140); height: calc(var(--u) * 10); }
.sk-kopf b { width: calc(var(--u) * 320); height: calc(var(--u) * 40); }
.sk-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 10); }
.sk-zahlen i { height: calc(var(--u) * 70); }
.sk-zeile { height: calc(var(--u) * 58); }
.sk-zeile.kurz { width: 60%; }
@keyframes schimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Reaktionszeit (SLA) */
.sla { display: inline-flex; align-items: center; gap: calc(var(--u) * 5); height: calc(var(--u) * 24); padding: 0 calc(var(--u) * 9); border-radius: 99px; white-space: nowrap;
  font-size: calc(var(--u) * 11); font-weight: 700; }
.sla svg { width: calc(var(--u) * 12); height: calc(var(--u) * 12); }
.sla.gruen { color: var(--gruen); background: rgba(61, 220, 132, .12); }
.sla.gelb { color: #ffc24a; background: rgba(255, 194, 74, .14); }
.sla.rot { color: var(--rot); background: rgba(255, 90, 106, .16); box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .35); }

/* Warteschlange: Auswahl + Sammelleiste */
.zeile.qzeile { grid-template-columns: calc(var(--u) * 4) calc(var(--u) * 22) calc(var(--u) * 40) minmax(calc(var(--u) * 170), 1fr) auto; }
.wahl { width: calc(var(--u) * 20); height: calc(var(--u) * 20); border-radius: calc(var(--u) * 6); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
  opacity: .55; transition: opacity .15s, background .15s; }
.wahl svg { width: 70%; height: 70%; }
.zeile:hover .wahl, .wahl.an { opacity: 1; }
.wahl:hover { box-shadow: inset 0 0 0 1.5px var(--akzent); }
.wahl.an { background: var(--verlauf); box-shadow: none; }
.zeile.gewaehlt { background: rgba(255, 122, 26, .08); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .35); }
.sammel { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--u) * 8); margin-bottom: calc(var(--u) * 12);
  padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), #171a26;
  box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45), 0 calc(var(--u) * 10) calc(var(--u) * 24) rgba(0,0,0,.4); animation: rein .18s ease both; }
.sammel > b { font-size: calc(var(--u) * 12.5); margin-right: calc(var(--u) * 6); }
.sammel .eingabe.kompakt { width: auto; }

/* Anwesenheit / Kollisionswarnung */
.anwesend { display: flex; align-items: center; gap: calc(var(--u) * 8); flex: none; margin-bottom: calc(var(--u) * 10); padding: calc(var(--u) * 9) calc(var(--u) * 14); border-radius: calc(var(--u) * 12);
  font-size: calc(var(--u) * 12); color: var(--sek); background: rgba(90, 169, 255, .10); box-shadow: inset 0 0 0 1px rgba(90, 169, 255, .3); }
.anwesend svg { width: calc(var(--u) * 16); height: calc(var(--u) * 16); color: var(--blau); flex: none; }
.anwesend.tippt { background: rgba(255, 194, 74, .12); box-shadow: inset 0 0 0 1px rgba(255, 194, 74, .4); }
.anwesend.tippt svg { color: #ffc24a; }
.online-punkt { display: inline-block; width: calc(var(--u) * 8); height: calc(var(--u) * 8); border-radius: 99px; background: rgba(255,255,255,.25); margin-right: calc(var(--u) * 6); vertical-align: 1px; flex: none; }
.online-punkt.an { background: var(--gruen); box-shadow: 0 0 calc(var(--u) * 8) rgba(61, 220, 132, .7); }

/* Makro-Chip in der Antwortleiste */
.makro { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); height: calc(var(--u) * 30); padding: 0 calc(var(--u) * 4) 0 calc(var(--u) * 10); border-radius: 99px; white-space: nowrap;
  font-size: calc(var(--u) * 11.5); font-weight: 700; color: var(--gold); background: rgba(255, 181, 71, .12); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .4); }
.makro svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); }
.makro button { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 99px; font-size: calc(var(--u) * 15); line-height: 1; color: var(--sek); }
.makro button:hover { background: rgba(255,255,255,.1); }

/* Uebersicht */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--u) * 120), 1fr)); gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 18); }
.kpi { text-align: left; padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 16); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante);
  transition: background .15s, box-shadow .15s, transform .15s var(--pop); }
.kpi[data-kpi]:hover { background: var(--karte-hover); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45); transform: translateY(calc(var(--u) * -2)); }
.kpi b { display: block; font-family: var(--anton); font-weight: 400; font-size: calc(var(--u) * 34); line-height: 1; background: var(--titel); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi small { display: block; margin-top: calc(var(--u) * 8); font-size: calc(var(--u) * 9.5); letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: var(--ter); }
.kpi.warn { box-shadow: inset 0 0 0 1px rgba(255, 90, 106, .5); background: rgba(255, 90, 106, .07); }
.kpi.warn b { background: none; color: var(--rot); -webkit-text-fill-color: var(--rot); }
.dash { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--u) * 18); align-items: start; }
.dash-spalte { display: flex; flex-direction: column; gap: calc(var(--u) * 18); min-width: 0; }
.sektion { padding: calc(var(--u) * 16); border-radius: calc(var(--u) * 20); background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--kante); }
.sektion-kopf { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 10); margin-bottom: calc(var(--u) * 12); }
.mini-liste { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }
.mini-zeile { display: grid; grid-template-columns: calc(var(--u) * 3) auto minmax(0, 1fr) auto; align-items: center; gap: calc(var(--u) * 10); width: 100%; text-align: left;
  padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 12); transition: background .12s; }
.mini-zeile:hover { background: rgba(255, 255, 255, .06); }
.mini-zeile .prio { align-self: stretch; border-radius: 99px; }
.mini-zeile .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); display: grid; place-items: center; background: rgba(255,255,255,.06); }
.mini-zeile .ic svg { width: 50%; height: 50%; }
.mini-zeile .mitte, .mini-zeile > span { min-width: 0; }
.mini-zeile b { display: block; font-size: calc(var(--u) * 12.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-zeile small { display: block; margin-top: calc(var(--u) * 2); font-size: calc(var(--u) * 11); color: var(--ter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-zeile .k-nr { font-size: calc(var(--u) * 10.5); color: var(--ter); font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.team-online { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.person { display: inline-flex; align-items: center; gap: calc(var(--u) * 9); padding: calc(var(--u) * 6) calc(var(--u) * 12) calc(var(--u) * 6) calc(var(--u) * 6); border-radius: 99px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--kante); }
.person b { display: block; font-size: calc(var(--u) * 12); }
.person small { display: block; font-size: calc(var(--u) * 10); color: var(--ter); }
.person .online-punkt { margin: 0 0 0 calc(var(--u) * 4); }
.klein-leer { padding: calc(var(--u) * 18) !important; font-size: calc(var(--u) * 12); text-align: left; }

/* Benachrichtigungen */
.hinweis-zeile.neu { background: rgba(255, 122, 26, .07); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .3); }
.hinweis-zeile b { white-space: normal; }

/* Spielerkarte */
.karte-raster .chat-spalte.rollt { overflow-y: auto; gap: calc(var(--u) * 14); padding-right: calc(var(--u) * 4); background: none; box-shadow: none; border-radius: 0; }
.karte-raster .chat-spalte.rollt > .box { flex: none; }
.steckbrief { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 125), 1fr)); gap: calc(var(--u) * 8); flex: none; }
.sb { padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: var(--karte); box-shadow: inset 0 0 0 1px var(--kante); min-width: 0; }
.sb small { display: block; font-size: calc(var(--u) * 9.5); letter-spacing: .16em; text-transform: uppercase; color: var(--ter); }
.sb b { display: block; margin-top: calc(var(--u) * 4); font-size: calc(var(--u) * 13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-zeile.statisch { cursor: default; flex-wrap: wrap; }
.link-zeile.statisch:hover { background: none; }
.link-zeile .ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); display: grid; place-items: center; flex: none; color: var(--ter); }
.link-zeile .ic svg { width: 100%; height: 100%; }
.char-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 200), 1fr)); gap: calc(var(--u) * 10); }
.char-karte { display: flex; align-items: center; gap: calc(var(--u) * 12); text-align: left; padding: calc(var(--u) * 12); border-radius: calc(var(--u) * 16); background: var(--karte);
  box-shadow: inset 0 0 0 1px var(--kante); transition: background .15s, box-shadow .15s; min-width: 0; }
.char-karte:hover { background: var(--karte-hover); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .45); }
.char-karte .ini { width: calc(var(--u) * 40); height: calc(var(--u) * 40); font-size: calc(var(--u) * 13); }
.char-karte span { min-width: 0; }
.char-karte b { display: block; font-size: calc(var(--u) * 13.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.char-karte small { display: block; font-size: calc(var(--u) * 11); color: var(--ter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Befehlspalette */
.palette-hg { place-items: start center; padding-top: 14vh; background: rgba(4, 6, 12, .6); }
.palette { width: calc(var(--u) * 640); max-width: 92vw; border-radius: calc(var(--u) * 22); overflow: hidden; animation: palRein .2s var(--pop) both;
  background: linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 30%), #0e1018 !important; }
@keyframes palRein { from { opacity: 0; transform: translateY(calc(var(--u) * -10)) scale(.98); } to { opacity: 1; transform: none; } }
.pal-such { display: flex; align-items: center; gap: calc(var(--u) * 12); padding: calc(var(--u) * 16) calc(var(--u) * 18); box-shadow: inset 0 -1px 0 var(--kante); }
.pal-such svg { width: calc(var(--u) * 20); height: calc(var(--u) * 20); color: var(--akzent-hell); flex: none; }
.pal-such input { flex: 1; min-width: 0; font-size: calc(var(--u) * 16); }
.pal-such input::placeholder { color: var(--ter); }
.pal-liste { max-height: 52vh; overflow-y: auto; padding: calc(var(--u) * 8); }
.pal-gruppe { padding: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 4); font-size: calc(var(--u) * 9.5); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--akzent-hell); }
.pal-e { display: flex; align-items: center; gap: calc(var(--u) * 12); width: 100%; text-align: left; padding: calc(var(--u) * 8) calc(var(--u) * 10); border-radius: calc(var(--u) * 12); }
.pal-e .ic { width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: calc(var(--u) * 9); display: grid; place-items: center; background: rgba(255,255,255,.06); flex: none; }
.pal-e .ic svg { width: 52%; height: 52%; }
.pal-e .mitte { flex: 1; min-width: 0; }
.pal-e b { display: block; font-size: calc(var(--u) * 13); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-e small { display: block; font-size: calc(var(--u) * 11); color: var(--ter); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-e.an, .pal-e:hover { background: rgba(255, 122, 26, .14); box-shadow: inset 0 0 0 1px rgba(255, 122, 26, .4); }
.pal-e.an .ic { background: var(--verlauf); }
.pal-leer { padding: calc(var(--u) * 26); text-align: center; color: var(--ter); }
.pal-fuss { display: flex; gap: calc(var(--u) * 18); padding: calc(var(--u) * 10) calc(var(--u) * 18); font-size: calc(var(--u) * 11); color: var(--ter); box-shadow: inset 0 1px 0 var(--kante); }
.pal-fuss span { display: inline-flex; align-items: center; gap: calc(var(--u) * 4); }
.kopf .knopf kbd { margin-left: calc(var(--u) * 6); height: calc(var(--u) * 18); }
.unterzeile svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); display: inline; vertical-align: -2px; color: var(--gruen); }
#k-notiz { min-height: calc(var(--u) * 64); height: calc(var(--u) * 64); }
.link-zeile.statisch .pille { margin-left: 0; }

/* ===================== Layout-Pruefung 2026-10-07 ===================== */
/* Zeilen: Titel behaelt Mindestbreite, rechte Seite bricht um statt den Titel auf "…" zu druecken */
.zeile { grid-template-columns: calc(var(--u) * 40) minmax(calc(var(--u) * 150), 1fr) auto; }
.zeile.hinweis-zeile, .zeile.statisch { grid-template-columns: calc(var(--u) * 40) minmax(0, 1fr) auto; }
/* Lange Woerter (Lizenzen, Links, JSON) bleiben im Kasten */
.vortext, .beschreibung, .kommentar p, .baustein p, .faq p, .zitat, .verlauf-liste, .unterzeile, .k-karte b, .pk-text, .ms-kopf b,
.check-zeile span, .link-zeile, .person b, .anwesend, .sammel > b { overflow-wrap: anywhere; word-break: break-word; }
/* Tabellen: lange Tokens (Lizenz, URL, JSON) duerfen brechen; die Mindestbreite je Zelle verhindert,
   dass kurze Woerter ("Panel", "geaendert") mitten im Wort umbrechen, wenn die Tabelle eng wird */
.tabelle td { overflow-wrap: anywhere; min-width: calc(var(--u) * 104); }
.check-zeile span, .ms-kopf b, .link-zeile > span:not(.ic):not(.pille) { min-width: 0; }
.tabelle td .pille, .tabelle td .knopf, .tabelle td .pmstatus, .tabelle td .prio-pille, .tabelle td .sla { word-break: normal; overflow-wrap: normal; }
/* Kennzahlen-Karten gleich hoch, Inhalt oben/unten verteilt */
.kpi, .kz, .sb { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
.kpi small, .kz small, .sb small { overflow-wrap: anywhere; }
/* Schmale Fenster: Projektkopf, Filter, Segmente duerfen umbrechen */
.filter > * { max-width: 100%; }
.segmente { flex-wrap: wrap; max-width: 100%; }
.pk-kopf b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-kopf .pk-kuerzel { flex: none; }
.ms-kopf { flex-wrap: wrap; }
.box-kopf { min-width: 0; }
.box-kopf > span { flex: none; }
.sektion-kopf { flex-wrap: wrap; }
/* Spalten-Leerzustaende kompakt (z. B. Akte: neben kurzen Listen) */
.info-spalte .leer, .liste .leer, .zwei-spalten .leer, .dash .leer, .sektion .leer, .pm-karten .leer, .karte-raster .leer { padding: calc(var(--u) * 18) calc(var(--u) * 14); text-align: left; }
.info-spalte .leer b, .liste .leer b, .zwei-spalten .leer b, .dash .leer b, .sektion .leer b, .karte-raster .leer b { font-size: calc(var(--u) * 18); }