/* ════════════════════════════════════════════════════════════════════════
   COMMUNITY CASES (v3.81)
   ────────────────────────────────────────────────────────────────────────
   Liegt NACH design.css und battles.css. Eigene Datei, damit battles.css und
   design.css ihre Abschnittsfolge behalten. Alle Namen tragen das Praefix
   „cc-". Schrift nur ueber die Typo-Tokens (--t-… und --ls-…), Inter; keine
   Bewegung ausser kurzen Uebergaengen, kein will-change.

   1  Die eingefaerbte Truhe (.cc-kiste) — ueberall, wo eine Case ein Bild hat
   2  Cases-Seite: Karte, leerer Reiter
   3  Seite „Create a case": Baukasten, Vorschau
   4  My cases, Provision
   5  Admin
   6  Handy (≤ 900 px / ≤ 600 px) und reduzierte Bewegung
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1 Die Truhe ─────────────────────────────────────────────────────────
   EINE graue Bitmap (kiste-community.webp, tools/voxel.js). Zwei Lagen:
   .cc-kiste__farbe  die Case-Farbe, mit der Truhe als Maske ausgeschnitten
   .cc-kiste__licht  dieselbe Bitmap im Modus multiply → Licht, Schatten, Fugen
   `isolation` haelt das Multiplizieren in der Truhe — sonst mischte es sich
   mit der Karte dahinter. Die Truhe sitzt etwas tiefer und kleiner, damit
   darueber Platz fuer die schwebenden Gegenstaende ist. */
.cc-kiste { position: relative; display: block; flex-shrink: 0; aspect-ratio: 1; isolation: isolate; --cc-bild: url("/img/battles/kiste-community.webp") }
.cc-kiste__farbe, .cc-kiste__licht { position: absolute; left: 7%; right: 7%; top: 14%; bottom: 0; pointer-events: none }
.cc-kiste__farbe {
  background-color: var(--cc-ton, #9aa3b2);
  -webkit-mask: var(--cc-bild) center / contain no-repeat;
  mask: var(--cc-bild) center / contain no-repeat;
}
.cc-kiste__licht { background: var(--cc-bild) center / contain no-repeat; mix-blend-mode: multiply }
.cc-kiste__item { position: absolute; z-index: 1; width: 34%; height: 34%; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.55)); pointer-events: none }
.cc-kiste__item--0 { left: 33%; top: 0; width: 38%; height: 38%; z-index: 2 }
.cc-kiste__item--1 { left: 6%; top: 12%; width: 28%; height: 28%; transform: rotate(-10deg) }
.cc-kiste__item--2 { right: 6%; top: 12%; width: 28%; height: 28%; transform: rotate(10deg) }
/* v3.83 Special-Cases (flache Haus-Cases, cases.js SPEZIAL): dieselbe
   eingefaerbte Truhe — aber OFFIZIELL. Zwei Zeichen dafuer: ein goldener
   Lichthof hinter der Truhe (__sockel) und die kleine Goldmarke „Special"
   unten. Beides verschwindet in den ganz kleinen Groessen (Verlauf, Auswahl),
   dort traegt die Farbe allein. */
.cc-kiste__sockel { position: absolute; z-index: -1; left: 10%; right: 10%; top: 26%; bottom: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,196,106,.42), rgba(245,196,106,.12) 62%, rgba(245,196,106,0)); pointer-events: none }
.cc-kiste__marke { position: absolute; z-index: 3; left: 50%; bottom: 2%; transform: translateX(-50%); padding: 3px 7px; border-radius: 999px; border: 1px solid rgba(255,217,138,.9); background: linear-gradient(180deg, #ffd98a, #f5c46a); color: #2a1d05; font: var(--t-etikett-klein); font-style: normal; letter-spacing: var(--ls-etikett); text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 8px rgba(0,0,0,.45); pointer-events: none }
.bt-kiste-mini .cc-kiste__marke, .bt-verlauf__kiste .cc-kiste__marke, .bt-auswahl__bild .cc-kiste__marke, .bt-drops-pop__kopf .cc-kiste__marke, .cc-kiste.cs-leerlauf__glow .cc-kiste__marke { display: none }

/* Groessen dort, wo battles.css das <img> ueber den Elternknoten bemisst. */
.bt-kiste-mini .cc-kiste { width: 46px; height: 46px }
.bt-verlauf__kiste .cc-kiste, .bt-a2 .bt-a2-verlauf .bt-verlauf__kiste .cc-kiste { width: 30px; height: 30px }
.bt-auswahl__bild .cc-kiste, .bt-drops-pop__kopf .cc-kiste { width: 44px; height: 44px }
.bt-auswahl__bild .cc-kiste { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)) }
.bt-inhalt-kopf .cc-kiste { width: 72px; height: 72px }
.cs-gewaehlt .cc-kiste { width: 64px; height: 64px; flex: 0 0 64px }
/* Der Text neben der Truhe: darf schrumpfen und umbrechen, statt unter die Truhe zu laufen. */
.cs-gewaehlt > div { min-width: 0; flex: 1 1 auto }
.cs-gewaehlt > div b { overflow-wrap: anywhere }
/* Unter 50 px waeren die schwebenden Gegenstaende nur Kruemel — dort steht die Truhe allein, voll gross. */
.bt-kiste-mini .cc-kiste__item, .bt-verlauf__kiste .cc-kiste__item, .bt-auswahl__bild .cc-kiste__item, .bt-drops-pop__kopf .cc-kiste__item { display: none }
.bt-kiste-mini .cc-kiste__farbe, .bt-kiste-mini .cc-kiste__licht,
.bt-verlauf__kiste .cc-kiste__farbe, .bt-verlauf__kiste .cc-kiste__licht,
.bt-auswahl__bild .cc-kiste__farbe, .bt-auswahl__bild .cc-kiste__licht,
.bt-drops-pop__kopf .cc-kiste__farbe, .bt-drops-pop__kopf .cc-kiste__licht { inset: 0 }
/* Bei 64–72 px nur der wertvollste Gegenstand — drei verdeckten die Truhe. */
.cs-gewaehlt .cc-kiste__item--1, .cs-gewaehlt .cc-kiste__item--2, .cc-mein__bild .cc-kiste__item--1, .cc-mein__bild .cc-kiste__item--2, .cc-admin__bild .cc-kiste__item--1, .cc-admin__bild .cc-kiste__item--2, .bt-inhalt-kopf .cc-kiste__item--1, .bt-inhalt-kopf .cc-kiste__item--2 { display: none }
/* battles.css bemisst dort JEDES <img> im Elternknoten (.cs-gewaehlt img { 64px }) — der schwebende Gegenstand bleibt klein. */
.cs-gewaehlt .cc-kiste .cc-kiste__item--0, .bt-inhalt-kopf .cc-kiste .cc-kiste__item--0 { width: 38%; height: 38% }
/* Der Schein hinter der schwebenden Case: nur Farbe, keine Gegenstaende. */
.cc-kiste.cs-leerlauf__glow .cc-kiste__item { display: none }

/* Schild im Kopf der Arena: „Community · by <creator> · Report". */
.bt-a2-tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 8px; border-radius: 999px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--accent-ink); background: var(--accent-dim); border: 1px solid rgba(124,92,255,.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bt-a2-melden { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px }
.bt-a2-melden:hover, .bt-a2-melden:focus-visible { color: var(--red-ink) }

/* ── 2 Cases-Seite ─────────────────────────────────────────────────────── */
.cs-karte__von { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: var(--t-klein); color: var(--muted) }
.cc-leer-liste { display: flex; flex-direction: column; align-items: center; gap: var(--s3); grid-column: 1 / -1 }
.cc-leer-liste b { font: var(--t-karte); color: var(--text) }
.cc-leer-liste span { max-width: 44ch }
.cc-hinweis { margin-top: var(--s3) }
/* Drei Reiter plus Knopf: das Herz soll neben „Favorites" bleiben, nicht darueber rutschen. */
.bt-kopf__aktionen .bt-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap }

/* ── 3 Baukasten ───────────────────────────────────────────────────────── */
.cc-kopf .bt-kopf__h { margin-left: var(--s3) }
.cc-bauen { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s5); align-items: start }
.cc-bauen__links { display: flex; flex-direction: column; gap: var(--s5); min-width: 0 }
.cc-bauen__rechts { position: sticky; top: var(--s4); min-width: 0 }
.cc-karte { display: flex; flex-direction: column; gap: var(--s3); min-width: 0 }
.cc-karte__kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap }
.cc-karte__kopf .card-title { margin: 0 }
.cc-karte__kopf .card-title span { color: var(--muted); font-variant-numeric: tabular-nums }
.cc-feldreihe { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--s4) }
.cc-feld { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.cc-feld .label em, .label em { font-style: normal; color: var(--muted); text-transform: none; letter-spacing: 0 }

.cc-farben { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: var(--s2) }
.cc-farbe { aspect-ratio: 1; min-width: 0; border-radius: var(--r-sm); border: 2px solid transparent; background: var(--cc-ton); cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s var(--ease-out) }
.cc-farbe:hover { transform: translateY(-1px) }
.cc-farbe.ist-an { border-color: var(--text); box-shadow: 0 0 0 2px var(--ink-800) inset }
.cc-farbe:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px }

/* Meter: wie viel von 100 % verteilt ist. */
.cc-meter { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s3) }
.cc-meter__spur { height: 8px; border-radius: 4px; background: var(--ink-650); overflow: hidden }
.cc-meter__spur i { display: block; height: 100%; border-radius: 4px; background: var(--accent); transition: width .2s var(--ease-out), background-color .2s var(--ease-out) }
.cc-meter b { font: var(--t-zahl-klein); font-variant-numeric: tabular-nums; color: var(--text) }
.cc-meter small { font: var(--t-klein); color: var(--muted); min-width: 11ch; text-align: right }
.cc-meter.ist-voll .cc-meter__spur i { background: var(--green) }
.cc-meter.ist-voll small { color: var(--green-ink) }
.cc-meter.ist-ueber .cc-meter__spur i { background: var(--red) }
.cc-meter.ist-ueber small { color: var(--red-ink) }

.cc-eintraege { display: flex; flex-direction: column; gap: var(--s2) }
.cc-eintrag { display: grid; grid-template-columns: 40px minmax(0, 1fr) 132px 92px 32px; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-md); background: var(--ink-850); border: 1px solid var(--line); border-left: 3px solid var(--sf, var(--line-2)) }
.cc-eintrag--kopf { background: none; border-color: transparent; padding-block: 0; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-eintrag img { width: 40px; height: 40px; object-fit: contain }
.cc-eintrag__name { display: flex; flex-direction: column; min-width: 0 }
.cc-eintrag__name b { font: var(--t-zeile); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cc-eintrag__name small { font: var(--t-klein); color: var(--muted); font-variant-numeric: tabular-nums }
.cc-eintrag .input { min-width: 0; width: 100%; height: 38px; font-variant-numeric: tabular-nums; text-align: right }
.cc-eintrag .input.ist-falsch { border-color: var(--red); box-shadow: 0 0 0 1px var(--red-dim) }
.cc-eintrag__weg { width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer }
.cc-eintrag__weg:hover { color: var(--red-ink); border-color: var(--red) }
.cc-leer { display: flex; flex-direction: column; gap: var(--s2); align-items: center; text-align: center; padding: var(--s6) var(--s4); border: 1px dashed var(--line-2); border-radius: var(--r-md); color: var(--muted); font: var(--t-text) }
.cc-leer b { font: var(--t-karte); color: var(--text-2) }
.cc-leer span { max-width: 52ch }

.cc-suche { flex: 1 1 200px; max-width: 280px }
.cc-suche .input { width: 100% }
.cc-selten { flex-wrap: wrap }
.cc-katalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s2); max-height: 420px; overflow-y: auto; padding-right: 2px }
.cc-item { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: var(--s3) var(--s2); border-radius: var(--r-md); background: var(--ink-850); border: 1px solid var(--line); border-bottom: 2px solid var(--sf, var(--line-2)); color: var(--text); cursor: pointer; transition: transform .15s var(--ease-out), border-color .15s var(--ease-out), background-color .15s var(--ease-out) }
.cc-item:hover:not(:disabled) { transform: translateY(-2px); background: var(--ink-800) }
.cc-item:disabled { opacity: .4; cursor: not-allowed }
.cc-item.ist-drin { border-color: var(--accent); background: var(--accent-dim) }
.cc-item img { width: 48px; height: 48px; object-fit: contain }
.cc-item b { max-width: 100%; font: var(--t-klein); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.cc-item small { font: var(--t-etikett-klein); color: var(--muted); font-variant-numeric: tabular-nums }

/* Vorschau rechts */
.cc-vorschau { display: flex; flex-direction: column; gap: var(--s4) }
.cc-vorschau__karte { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s5) var(--s4); border-radius: var(--r-lg); border: 1px solid rgba(var(--kt-rgb), .35); background: radial-gradient(120% 90% at 50% 0%, rgba(var(--kt-rgb), .2), transparent 70%), var(--ink-850); text-align: center }
.cc-vorschau__bild { width: 150px; height: 150px }
.cc-vorschau__name { max-width: 100%; font: var(--t-karte); color: var(--text); overflow-wrap: anywhere }
.cc-vorschau__von { font: var(--t-klein); color: var(--muted) }
.cc-vorschau__text { margin: 0; font: var(--t-klein); color: var(--text-2); overflow-wrap: anywhere }
.cc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2) }
.cc-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--s3); border-radius: var(--r-md); background: var(--ink-850); border: 1px solid var(--line); min-width: 0 }
.cc-stat--breit { grid-column: 1 / -1 }
.cc-stat small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-stat b { display: flex; align-items: center; gap: 6px; font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text); overflow: hidden; text-overflow: ellipsis }
.cc-stat--breit b { color: var(--green-ink) }
/* Risiko: oben das Wort, darunter der Balken mit „Calm" LINKS und „Wild" RECHTS.
   Vorher stand links „Risk" und rechts das aktuelle Wort — bei einer ruhigen
   Case las sich das als „der Balken laeuft von Risk nach Calm" (Review). */
.cc-risiko-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3) }
.cc-risiko-kopf small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-risiko-kopf b { font: var(--t-zeile); color: var(--text) }
.cc-risiko { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s3); margin-top: calc(var(--s2) * -1) }
.cc-risiko small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-risiko .bt-risiko { width: 100% }
.cc-erklaerung { margin: 0 }
/* Gesperrt heisst gesperrt: spiele.css laesst einen gesperrten Spielknopf bei
   85 % Deckkraft (dort heisst disabled „laeuft gerade") — hier heisst es „geht
   noch nicht", und der gruene Knopf sah trotz Fehlerliste klickbar aus. */
.btn.btn-play.cc-erstellen:disabled { opacity: 1; cursor: not-allowed; filter: none; background: var(--ink-650); color: var(--muted); border-color: var(--line-2); box-shadow: none; text-shadow: none; animation: none; transform: none }
.btn.btn-play.cc-erstellen:disabled::before, .btn.btn-play.cc-erstellen:disabled::after { content: none; display: none }
/* Felder einer Zeile: die Beschriftung steht am Tisch in der Kopfzeile, auf dem Handy ueber dem Feld. */
.cc-eintrag__feld { display: block; min-width: 0 }
.cc-eintrag__feld > span { display: none }
.cc-meldungen, .cc-voraus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2) }
.cc-meldungen li { position: relative; padding-left: 16px; font: var(--t-klein); color: var(--red-ink) }
.cc-meldungen li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.cc-meldungen li.ist-gut { color: var(--green-ink) }
.cc-meldungen li.ist-hinweis { color: var(--muted) }   /* v4.23: Hinweis, kein Fehler */
.cc-voraus li { display: flex; flex-direction: column; gap: 1px; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--red-dim); border: 1px solid rgba(239,68,68,.3); font: var(--t-klein); color: var(--text-2) }
.cc-voraus li.ist-gut { background: var(--green-dim); border-color: rgba(52,211,153,.3) }
.cc-voraus li b { color: var(--text) }
.cc-voraus li small { color: var(--muted) }

/* ── 4 My cases ────────────────────────────────────────────────────────── */
.cc-meine { margin-top: var(--s7); display: flex; flex-direction: column; gap: var(--s4) }
.cc-meine__kopf { display: flex; flex-direction: column; gap: var(--s1) }
.cc-meine__kopf .bt-hinweis { margin: 0; text-align: left }
.cc-abholen-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s3) }
.cc-abholen { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--ink-800); border: 1px solid var(--line) }
.cc-abholen.ist-offen { border-color: rgba(245,196,106,.45); background: linear-gradient(90deg, var(--gold-dim), transparent 70%), var(--ink-800) }
.cc-abholen span { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.cc-abholen small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-abholen b { display: flex; align-items: center; gap: 6px; font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text) }
.cc-abholen.ist-offen b { color: var(--gold) }
.cc-abholen em { font: var(--t-klein); font-style: normal; color: var(--muted) }
.cc-meine__liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--s3) }
/* Zeile 1 nimmt den Rest (1fr), die Knoepfe sitzen unten: so stehen Titel OBEN und Knoepfe UNTEN in jeder Karte einer Reihe auf derselben Linie, egal ob ein Grund dasteht. */
.cc-mein { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: minmax(64px, 1fr) auto; grid-template-areas: "bild text" "knoepfe knoepfe"; gap: var(--s3); height: 100%; padding: var(--s4); border-radius: var(--r-md); background: var(--ink-800); border: 1px solid var(--line); border-top: 2px solid rgba(var(--kt-rgb), .7) }
.cc-mein__bild { grid-area: bild; width: 64px; height: 64px; align-self: start }
.cc-mein__text { grid-area: text; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: var(--s1) var(--s2); min-width: 0 }
.cc-mein__text b { font: var(--t-karte); color: var(--text); overflow-wrap: anywhere }
.cc-mein__text small { flex-basis: 100%; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font: var(--t-klein); color: var(--muted); font-variant-numeric: tabular-nums }
.cc-mein__grund { color: var(--red-ink) !important; overflow-wrap: anywhere }
.cc-mein__knoepfe { grid-area: knoepfe; align-self: end; display: flex; gap: var(--s2); flex-wrap: wrap }
.cc-knopf--rot { color: var(--red-ink) }
.cc-knopf--rot:hover { border-color: var(--red) }
.cc-chip { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--text-2); background: var(--ink-650); border: 1px solid var(--line) }
.cc-chip--aktiv { color: var(--green-ink); background: var(--green-dim); border-color: rgba(52,211,153,.35) }
.cc-chip--wartet { color: var(--gold); background: var(--gold-dim); border-color: rgba(245,196,106,.35) }
.cc-chip--rot { color: var(--red-ink); background: var(--red-dim); border-color: rgba(239,68,68,.35) }
.cc-chip--aus { color: var(--muted) }

/* ── 5 Admin ───────────────────────────────────────────────────────────── */
#cc-admin { display: flex; flex-direction: column; gap: var(--s4) }
.cc-admin__abschnitt { display: flex; flex-direction: column; gap: var(--s3) }
.cc-admin__abschnitt .card-title { display: flex; align-items: center; gap: var(--s2); margin: 0 }
.cc-admin__felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3) }
/* .bt-schalter traegt anderswo flex: 1 1 120px (Reihe im Battle-Ersteller) — in dieser Spalte waere das die Hoehe. */
.cc-admin__abschnitt .bt-schalter { flex: 0 0 auto }
.cc-admin__bild { width: 64px; height: 64px }
.cc-rueckgabe { display: flex; flex-direction: column; gap: 2px; margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-sm); background: var(--ink-850); border: 1px solid var(--line); font: var(--t-klein); color: var(--text-2) }
.cc-rueckgabe small { font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
.cc-rueckgabe b { font: var(--t-zahl); font-variant-numeric: tabular-nums; color: var(--text) }
.cc-rueckgabe.ist-knapp { border-color: var(--red); background: var(--red-dim) }
.cc-rueckgabe.ist-knapp b { color: var(--red-ink) }
.cc-admin__felder label { display: flex; flex-direction: column; gap: var(--s2); min-width: 0 }
.cc-admin__karte { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s4); border-radius: var(--r-md); background: var(--ink-850); border: 1px solid var(--line); border-left: 3px solid rgba(var(--kt-rgb), .8); min-width: 0 }
.cc-admin__karte header { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: center }
.cc-admin__karte header b { font: var(--t-karte); color: var(--text); overflow-wrap: anywhere }
.cc-admin__karte header small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font: var(--t-klein); color: var(--muted); font-variant-numeric: tabular-nums }
.cc-admin__karte header p { margin: 4px 0 0; font: var(--t-klein); color: var(--text-2); overflow-wrap: anywhere }
.cc-admin__karte footer { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center }
.cc-admin__karte footer .btn { width: auto; flex: 0 0 auto }
.cc-admin__karte summary { cursor: pointer; font: var(--t-klein); color: var(--text-2) }
.cc-admin__grund { flex: 1 1 200px; min-width: 0 }
.cc-admin__meldungen { list-style: none; margin: 0; padding: var(--s3); border-radius: var(--r-sm); background: var(--red-dim); display: flex; flex-direction: column; gap: 3px; font: var(--t-klein); color: var(--text-2); overflow-wrap: anywhere }
.cc-tabelle { width: 100%; border-collapse: collapse; font: var(--t-klein); font-variant-numeric: tabular-nums }
.cc-tabelle th { text-align: right; padding: 4px 8px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line) }
.cc-tabelle th:first-child, .cc-tabelle td:first-child { text-align: left }
.cc-tabelle td { text-align: right; padding: 4px 8px; color: var(--text-2); border-bottom: 1px solid var(--line-top) }
.cc-tabelle td:first-child { display: flex; align-items: center; gap: 6px; color: var(--text) }
.cc-tabelle img { width: 24px; height: 24px; object-fit: contain }

/* ── 6 Handy und reduzierte Bewegung ───────────────────────────────────── */
@media (max-width: 900px) {
  .cc-bauen { grid-template-columns: minmax(0, 1fr) }
  /* Die Cases-Uebersicht stapelte auf dem Handy nie: .cs-seite--uebersicht (battles.css, nach der 900-px-Regel von .cs-seite) setzte die zwei Spalten wieder — mit dem dritten Reiter lief das Raster aus dem Bild. */
  .cs-seite--uebersicht { grid-template-columns: minmax(0, 1fr) }
  .cc-bauen__rechts { position: static }
}
@media (max-width: 600px) {
  .cc-feldreihe { grid-template-columns: minmax(0, 1fr) }
  /* Gestapelt ist das Raster eine Spalte breit — zwei Karten nebeneinander, sonst scrollt man sich durch 36 Bildschirme. */
  .cs-seite--uebersicht .cs-raster { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cs-seite--uebersicht .cs-karte__bild { width: 104px; height: 104px }
  .cs-seite--uebersicht .cs-karte__name { overflow-wrap: anywhere }
  .cc-farben { grid-template-columns: repeat(8, minmax(0, 1fr)) }
  .cc-farbe { min-height: 32px }
  /* Eintrag in zwei Zeilen: oben Bild, Name, ×; darunter Wert und Chance nebeneinander. */
  .cc-eintrag { grid-template-columns: 36px minmax(0, 1fr) 52px 36px; grid-template-areas: "bild name name weg" "wert wert prozent prozent"; row-gap: var(--s2) }
  .cc-eintrag--kopf { display: none }
  .cc-eintrag img { grid-area: bild; width: 36px; height: 36px }
  .cc-eintrag__name { grid-area: name }
  .cc-eintrag__weg { grid-area: weg; width: 36px; height: 36px }
  .cc-eintrag__feld--wert { grid-area: wert }
  .cc-eintrag__feld--prozent { grid-area: prozent }
  /* Ohne Kopfzeile wusste auf dem Handy niemand, welches Feld der Wert und welches die Chance ist. */
  .cc-eintrag__feld > span { display: block; margin-bottom: 4px; font: var(--t-etikett-klein); letter-spacing: var(--ls-etikett); text-transform: uppercase; color: var(--muted) }
  .cc-eintrag .input { height: 44px; font-size: 16px }   /* 16 px: iOS zoomt sonst beim Antippen */
  .cc-meter { grid-template-columns: minmax(0, 1fr) auto }
  .cc-meter small { grid-column: 1 / -1; text-align: left; min-width: 0 }
  .cc-katalog { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); max-height: 320px }
  .cc-suche { max-width: none; flex-basis: 100% }
  .cc-vorschau__bild { width: 128px; height: 128px }
  .cc-meine__liste { grid-template-columns: minmax(0, 1fr) }
  .cc-mein__knoepfe .btn { flex: 1 1 auto; min-height: 40px }
  .cc-admin__karte footer .btn { flex: 1 1 auto; min-height: 40px }
  .cc-tabelle th, .cc-tabelle td { padding: 4px }
  .cc-neu-knopf { order: -1; flex-basis: 100% }
  /* „by MiraBuilds · 1.9K op…": auf der halben Breite zwei Zeilen statt abgeschnitten. */
  .cs-seite--uebersicht .cs-karte__von { white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.3 }
}
/* Der schwebende Live-Knopf (#rail-toggle, 50 px, unten rechts) liegt auf dem
   Handy ueber der letzten Karte — unten Luft lassen, damit man sie darunter
   hervorscrollen kann. */
@media (max-width: 1100px) {
  #page-create-case .cc-meine, #page-cases .cs-seite--uebersicht { padding-bottom: 84px }
  #page-create-case .cc-katalog { padding-right: 8px }
}
@media (prefers-reduced-motion: reduce) {
  .cc-item, .cc-farbe, .cc-meter__spur i { transition: none }
}
html.reduziert .cc-item, html.reduziert .cc-farbe, html.reduziert .cc-meter__spur i { transition: none }