/* ========== Grundlagen (Design „Nocturne“: dunkel, Inter, Lila als Linie und Licht) ========== */
/* Pacifico (SIL OFL, public/fonts/Pacifico-OFL.txt): verspielte Neon-Schreibschrift für den Shopnamen auf dem Schild der Stufe 4 */
@font-face {
  font-family: "Pacifico"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/pacifico-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Design-Tokens */
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);
  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;
  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, .55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, .65);
  /* Seltenheiten */
  --r-crumpled: #b8a07e;
  --r-bfwler: #8fa3c7;
  --r-gold: #e3b341;
  --r-holo: #a8d8ff;
  --r-bockhaber: #b48cf2;
  --r-glitch: #4ade80;
  --r-icon: #f3f5fe;

  /* ältere Namen, auf die die Seiten bauen */
  --bg: var(--color-bg);
  --surface: var(--color-surface);
  --surface-2: #1d1f2c;
  --text: var(--color-text);
  --muted: var(--color-neutral-500);
  --border: var(--color-neutral-800);
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-400);
  --primary-soft: var(--color-accent-900);
  --ja: #4ade80;
  --ja-soft: color-mix(in srgb, #4ade80 12%, var(--color-bg));
  --nein: #f87171;
  --nein-soft: color-mix(in srgb, #f87171 12%, var(--color-bg));
  --warn: #e3b341;
  --warn-soft: color-mix(in srgb, #e3b341 12%, var(--color-bg));
  --radius: var(--radius-lg);
  --shadow: 0 0 0 1px var(--color-neutral-800);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, var(--color-accent-900), transparent 60%) no-repeat, var(--bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--color-accent-300); text-decoration: none; }
a:hover { color: var(--color-accent-200); }
h1, h2, h3, h4 { font-weight: 500; letter-spacing: -.015em; line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(28px, 1.4rem + 1.6vw, 40px); letter-spacing: -.025em; line-height: 1.12; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
img, svg { max-width: 100%; }
strong, b { font-weight: 600; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 40px 24px 80px; flex: 1; }
@media (max-width: 640px) { .container { padding: 24px 16px 64px; } }
.narrow { max-width: 720px; margin: 0 auto; }
.narrow-sm { max-width: 440px; }
.narrow-card { max-width: 520px; }
.center { text-align: center; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.nowrap { white-space: nowrap; }
.pos { color: var(--ja); font-weight: 500; }
.neg { color: var(--nein); font-weight: 500; }
[hidden] { display: none !important; }

/* Optionsfarben: Ja grün, Nein rot, eigene Optionen aus einer Palette */
.c-ja { --opt: var(--ja); }
.c-nein { --opt: var(--nein); }
.c-0 { --opt: #38bdf8; } .c-1 { --opt: #a78bfa; } .c-2 { --opt: #fbbf24; } .c-3 { --opt: #f472b6; }
.c-4 { --opt: #2dd4bf; } .c-5 { --opt: #a3e635; } .c-6 { --opt: #fb923c; } .c-7 { --opt: #818cf8; }
.c-8 { --opt: #22d3ee; } .c-9 { --opt: #fb7185; }
.opt-text { color: var(--opt); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 100; border-radius: 8px; }
.skip-link:focus { left: 8px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* Dialog: Fläche über verschwommenem Hintergrund */
dialog.dialog {
  width: min(100% - 32px, 460px); max-height: calc(100dvh - 48px); padding: 24px; border: 0; border-radius: var(--radius-lg);
  background: var(--color-surface); color: var(--text); box-shadow: var(--shadow-lg);
}
dialog.dialog::backdrop { background: color-mix(in srgb, var(--color-bg) 70%, transparent); backdrop-filter: blur(6px); }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.dialog-head h2 { margin: 0; font-size: 20px; }
.dialog-x { width: 36px; height: 36px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--color-neutral-400); font-size: 20px; line-height: 1; cursor: var(--cur-pointer); }
.dialog-x:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }

/* ========== Kopfzeile ========== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-divider);
}
.topbar-inner {
  max-width: 1240px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: clamp(8px, 2vw, 28px); height: 60px;
}
.brand { display: flex; align-items: center; flex: none; color: var(--text); }
.brand { gap: 10px; }
.brand-logo { display: block; height: 32px; width: 32px; }
.brand-name { font-size: 17px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.nav {
  display: flex; align-items: stretch; align-self: stretch; flex: 1; min-width: 0;
}
.nav::-webkit-scrollbar { display: none; }
.nav > a, .menu-nav a {
  position: relative; display: flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 0 clamp(6px, .9vw, 12px); border-radius: var(--radius-md);
  font-size: clamp(13px, 1.2vw, 14px); font-weight: 500; color: var(--color-neutral-400);
}
.nav > a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav > a.active { color: var(--text); }
/* leuchtende Linie unter dem aktiven Menüpunkt */
.nav > a.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent);
}
.nav-badge {
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums;
  background: var(--color-accent-300); color: var(--color-bg);
}
.nav-badge-inline { vertical-align: middle; margin-left: 6px; }
/* Black Market geöffnet: pulsierender lila Punkt */
.nav-live { width: 7px; height: 7px; border-radius: 50%; background: #c084fc; box-shadow: 0 0 8px #a855f7; animation: bmPulse 1.6s ease-in-out infinite; }
@keyframes bmPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }

/* Aufklappmenü in der Leiste ("Gambling"): Panel klappt mit Schwung auf, Einträge laufen nacheinander ein */
.nav-group { position: relative; display: flex; }
.nav-group > summary {
  position: relative; display: flex; align-items: center; gap: 6px; white-space: nowrap; list-style: none;
  padding: 0 clamp(6px, .9vw, 12px); border-radius: var(--radius-md); cursor: var(--cur-pointer);
  font-size: clamp(13px, 1.2vw, 14px); font-weight: 500; color: var(--color-neutral-400);
}
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary:focus:not(:focus-visible) { outline: none; }
.nav-group > summary:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav-group > summary.active { color: var(--text); }
.nav-group > summary.active::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px; border-radius: 2px;
  background: var(--color-accent); box-shadow: 0 0 12px var(--color-accent);
}
.nav-group-chev { flex: none; opacity: .7; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.nav-group[open] .nav-group-chev { transform: rotate(180deg); opacity: 1; }
.nav-group-panel {
  position: absolute; left: 50%; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .65), 0 18px 40px -18px color-mix(in srgb, var(--color-accent) 45%, transparent);
  transform-origin: 50% 0; transform: translateX(-50%);
}
.nav-group[open] .nav-group-panel { animation: navDrop .38s cubic-bezier(.2, .9, .25, 1.15) both; }
.nav-group.is-closing .nav-group-panel { animation: navLift .18s ease-in both; }
.nav-group-panel > a {
  display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-radius: var(--radius-md); white-space: nowrap;
  font-size: 14px; font-weight: 500; color: var(--color-neutral-300);
  transition: background .15s, color .15s, transform .15s;
}
.nav-group-panel > a .nav-badge:first-of-type { margin-left: auto; }
.nav-group-panel > a:hover, .nav-group-panel > a:focus-visible {
  color: var(--text); background: color-mix(in srgb, var(--color-accent) 12%, transparent); transform: translateX(3px);
}
.nav-group-panel > a.active { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.nav-group[open] .nav-group-panel > a { animation: navItemIn .32s ease-out both; }
.nav-group[open] .nav-group-panel > a:nth-child(2) { animation-delay: .05s; }
.nav-group[open] .nav-group-panel > a:nth-child(3) { animation-delay: .1s; }
.nav-group[open] .nav-group-panel > a:nth-child(4) { animation-delay: .15s; }
@keyframes navDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px) scaleY(.6); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scaleY(1); clip-path: inset(-60px -60px -90px -60px); }
}
@keyframes navLift { to { opacity: 0; transform: translateX(-50%) translateY(-6px) scaleY(.85); } }
@keyframes navItemIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .nav-group[open] .nav-group-panel, .nav-group[open] .nav-group-panel > a, .nav-group.is-closing .nav-group-panel { animation: none; }
}

.nav-user { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }
.nav-user form { margin: 0; }
.balance-chip {
  display: flex; align-items: center; gap: 12px; position: relative;
  list-style: none; cursor: var(--cur-pointer); color: var(--text);
}
.balance-chip::-webkit-details-marker { display: none; }
.balance-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.balance-text strong { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.balance-name { font-size: 11px; color: var(--color-neutral-500); }
.avatar { flex: none; display: block; width: 34px; height: 34px; border-radius: 8px; }
.menu-dot { display: none; }

/* Glocke */
.bell { position: relative; }
.bell > summary { list-style: none; }
.bell > summary::-webkit-details-marker { display: none; }
.bell-btn {
  position: relative; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--color-neutral-800); color: var(--color-neutral-300); cursor: var(--cur-pointer);
}
.bell-btn:hover, .bell[open] .bell-btn { color: var(--text); border-color: var(--color-neutral-600); }
.bell[open] .bell-btn { background: color-mix(in srgb, var(--color-accent) 12%, transparent); border-color: var(--color-accent-700); }
.bell-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600;
  background: var(--color-accent-300); color: var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-bg), 0 0 12px var(--color-accent);
}
.bell-panel, .user-menu-list {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface);
  box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-neutral-800);
}
.bell-panel { width: min(380px, calc(100vw - 32px)); }
/* Handy: Die Glocke steht nicht ganz rechts (daneben Konto/Menü) – rechtsbündig an ihr ragte das Fenster links aus dem
   Bildschirm (#88). Deshalb über die ganze Breite direkt unter der (oben klebenden) Kopfzeile. */
@media (max-width: 640px) {
  .bell-panel { position: fixed; left: 12px; right: 12px; top: 68px; width: auto; } /* 60px Kopfzeile + Abstand */
  .bell-list { max-height: calc(100dvh - 160px); }
}
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--color-divider); font-size: 14px; font-weight: 500; }
.bell-list { max-height: min(440px, 70vh); overflow: auto; display: flex; flex-direction: column; }
.bell-empty { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--muted); }
.bell-readall { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: var(--color-accent-300); cursor: var(--cur-pointer); }
.bell-readall:hover { color: var(--color-accent-200); text-decoration: underline; }
.bell-row { position: relative; display: flex; align-items: stretch; border-bottom: 1px solid var(--color-divider); }
.bell-row:last-child { border-bottom: 0; }
.bell-row.is-unread { background: color-mix(in srgb, var(--color-accent) 5%, transparent); }
.bell-item {
  flex: 1; min-width: 0; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 16px; color: var(--color-neutral-400);
}
.bell-row.is-unread .bell-item { color: var(--text); padding-right: 4px; }
.bell-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.bell-dot { width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: transparent; }
.bell-row.is-unread .bell-dot { background: var(--color-accent-300); box-shadow: 0 0 8px var(--color-accent); }
.bell-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bell-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--color-neutral-500); }
.bell-area { letter-spacing: .08em; text-transform: uppercase; }
.bell-when { white-space: nowrap; }
.bell-text { font-size: 13px; line-height: 1.45; text-wrap: pretty; overflow-wrap: anywhere; }
.bell-mark { display: flex; align-items: center; padding: 0 10px 0 2px; }
.bell-mark button {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--color-neutral-800); border-radius: 8px; background: none; color: var(--color-neutral-400); cursor: var(--cur-pointer);
}
.bell-mark button:hover, .bell-mark button:focus-visible { color: var(--color-accent-300); border-color: var(--color-accent-700); }

/* Profil-Menü */
.user-menu { position: relative; }
.user-menu-list { width: 240px; padding: 6px; display: flex; flex-direction: column; overflow: auto; max-height: calc(100dvh - 80px); }
.user-menu-list > a, .user-menu-list button {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: var(--radius-md); background: none;
  font: inherit; font-size: 14px; text-align: left; color: var(--text); cursor: var(--cur-pointer);
}
.user-menu-list > a:hover, .user-menu-list button:hover { background: color-mix(in srgb, var(--text) 6%, transparent); color: var(--text); }
.user-menu-list form { margin: 4px 0 0; padding-top: 4px; border-top: 1px solid var(--color-divider); }
.user-menu-list button { color: var(--color-neutral-400); }
/* Menüpunkte der Leiste: nur auf Handy/Tablet im Profil-Menü */
.menu-nav { display: none; }

@media (max-width: 1100px) {
  .nav { display: none; }
  .menu-nav { display: flex; flex-direction: column; margin-bottom: 4px; padding-bottom: 4px; border-bottom: 1px solid var(--color-divider); }
  .menu-nav a { padding: 9px 12px; font-size: 14px; color: var(--text); }
  .menu-nav a:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
  .menu-nav a.active { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
  .menu-nav a .nav-badge { margin-left: auto; }
  .menu-nav a .nav-badge + .nav-badge { margin-left: 0; }
  .menu-nav-group { display: flex; flex-direction: column; }
  .menu-nav-group > a { padding-left: 22px; }
  .menu-nav-head { padding: 8px 12px 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
  .menu-dot { display: block; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--color-accent-300); box-shadow: 0 0 0 2px var(--color-bg); }
}
@media (max-width: 480px) {
  .topbar-inner { padding: 0 16px; gap: 10px; }
  .brand-logo { height: 28px; width: 28px; }
  .brand-name { font-size: 15px; }
  .balance-name { display: none; }
}

/* ========== Buttons & Formulare ========== */
/* Knöpfe sind umrandet (Lila-Linie), nicht gefüllt */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  font: inherit; font-size: 14px; font-weight: 500; line-height: 1.2; color: var(--text); background: transparent;
  cursor: var(--cur-pointer); text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .45; cursor: var(--cur-no); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 10px 24px; font-size: 15px; }
.btn-block { width: 100%; }
.btn-primary { color: var(--color-accent-300); border-color: var(--color-accent); }
.btn-primary:hover { color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 12%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.btn-primary:active { background: color-mix(in srgb, var(--color-accent) 22%, transparent); }
.btn-ghost { color: var(--text); border-color: var(--color-divider); }
.btn-ghost:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--text) 14%, transparent); }
.btn-opt {
  background: color-mix(in srgb, var(--opt) 8%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--opt) 70%, transparent); white-space: normal; text-align: center; line-height: 1.25;
}
.btn-opt:hover { color: var(--text); background: color-mix(in srgb, var(--opt) 18%, transparent); border-color: var(--opt); }
.icon-btn {
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--color-divider);
  background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: var(--cur-pointer);
}
.icon-btn:hover { color: var(--nein); border-color: var(--nein); }
.icon-btn:disabled { opacity: .35; cursor: var(--cur-no); }
.btn-danger { background: transparent; color: var(--nein); border-color: color-mix(in srgb, var(--nein) 70%, transparent); }
.btn-danger:hover { color: var(--nein); background: color-mix(in srgb, var(--nein) 12%, transparent); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 5px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span, .field > legend { font-weight: 400; font-size: 12px; color: color-mix(in srgb, var(--text) 70%, transparent); padding: 0; margin-bottom: 0; }
.field > span em, .field > legend em { font-weight: 400; font-style: normal; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="datetime-local"], textarea, select {
  width: 100%; font: inherit; font-size: 15px; color: var(--text); caret-color: var(--color-accent);
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  padding: 9px 12px; min-height: 42px;
}
@media (max-width: 640px) {
  /* verhindert Zoom auf iOS */
  input[type="text"], input[type="email"], input[type="password"], input[type="number"],
  input[type="search"], input[type="datetime-local"], textarea, select { font-size: 16px; }
}
textarea { resize: vertical; min-height: 100px; }
input:hover, textarea:hover, select:hover { border-color: color-mix(in srgb, var(--text) 35%, transparent); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent); }
input::placeholder, textarea::placeholder { color: var(--color-neutral-600); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--color-accent); }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--color-accent); }
.form-errors { background: var(--nein-soft); color: var(--nein); border: 1px solid color-mix(in srgb, var(--nein) 40%, transparent); border-radius: var(--radius-md); padding: 12px 16px; margin-bottom: 16px; }
.form-errors ul { margin: 0; padding-left: 18px; }

/* Art der Wette */
.type-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px; }
.type-option {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  border: 2px solid var(--border); border-radius: 12px; cursor: var(--cur-pointer); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.type-option input { position: absolute; opacity: 0; pointer-events: none; }
.type-option-title { font-weight: 800; }
.type-option-sub { font-size: .88rem; color: var(--muted); }
.type-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.type-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }

/* Eigene Optionen eingeben */
.option-inputs { display: flex; flex-direction: column; gap: 8px; }
.option-input { display: flex; align-items: center; gap: 8px; }
.option-input input { flex: 1; min-width: 0; }
.option-num { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--opt); }
.add-option { align-self: flex-start; margin: 4px 0 2px; }
.pick-option { margin-top: 12px; }

/* Optionswahl beim Setzen */
.side-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; padding: 0; margin: 0 0 14px; }
.side-picker-many { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
.side-option {
  position: relative; display: flex; flex-direction: column; gap: 2px; padding: 14px;
  border: 2px solid var(--border); border-radius: 12px; cursor: var(--cur-pointer); background: var(--surface);
  transition: border-color .15s, background .15s;
}
.side-option input { position: absolute; opacity: 0; pointer-events: none; }
.side-option-title { font-weight: 800; font-size: 1.1rem; color: var(--opt); overflow-wrap: anywhere; line-height: 1.25; }
.side-option-sub { font-size: .85rem; color: var(--muted); min-height: 1.2em; }
.side-option-quote { font-weight: 700; margin-top: 4px; color: var(--opt); }
.side-option:has(input:checked) { border-color: var(--opt); background: color-mix(in srgb, var(--opt) 14%, var(--surface)); }
.side-option:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--primary) 50%, transparent); outline-offset: 2px; }
.side-option.locked { opacity: .45; cursor: var(--cur-no); }

.quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.chip {
  font: inherit; font-size: .9rem; font-weight: 600; padding: 6px 12px; min-height: 36px;
  border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: var(--cur-pointer);
}
.chip:hover { border-color: var(--primary); }
.estimate { font-size: .95rem; min-height: 1.5em; margin-bottom: 12px; }

/* ========== Karten & Layout ========== */
/* Fläche mit feiner Kante und leichtem Verlauf (statt Schatten) */
.card {
  background: linear-gradient(160deg, var(--color-surface), color-mix(in srgb, var(--color-surface) 45%, var(--color-bg)));
  border: 0; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--color-neutral-800); padding: 20px; margin-bottom: 20px;
}
.card h2 { font-size: 17px; }
.card-accent { box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 24px color-mix(in srgb, var(--color-accent) 10%, transparent); }
.card-manage { background: var(--surface-2); }
@media (min-width: 640px) { .card { padding: 24px; } }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.page-head h1 { margin: 0; }
.breadcrumb { margin-bottom: 12px; font-size: .95rem; }
.bet-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.bet-toolbar .breadcrumb { margin: 0; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.share-btn svg { flex: none; }

.info-box {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; margin: 0 0 18px;
  border-radius: 12px; background: var(--primary-soft); border: 2px solid var(--primary); font-size: .95rem;
}
.readonly-value { margin: 0; padding: 11px 12px; border-radius: 10px; background: var(--surface-2); border: 1px dashed var(--border); overflow-wrap: anywhere; }
.edited-hint { margin-top: -6px; font-style: italic; }
.result-note { white-space: pre-line; overflow-wrap: anywhere; }

/* Kommentare */
.comments { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.comment { padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 60%, transparent); box-shadow: 0 0 0 1px var(--color-neutral-800); }
.comment.is-mine { box-shadow: 0 0 0 1px var(--color-accent-800); }
.comment.is-deleted { opacity: .7; }
.comment-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 4px; }
.comment-head time { margin-left: auto; }
.comment-text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.comment-delete { margin: 0; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--nein); cursor: var(--cur-pointer); }
.link-btn:hover { text-decoration: underline; }
.comment-form { display: flex; flex-direction: column; gap: 8px; }
.comment-form textarea { min-height: 80px; }
.comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* Termine auf der Wettseite */
.dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.date-box {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 12px 14px;
  border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-neutral-800); background: color-mix(in srgb, var(--color-surface) 50%, transparent);
}
.date-box.is-next { box-shadow: 0 0 0 1px var(--color-accent-700); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-bg)); }
.date-box.is-past .date-value { color: var(--muted); }
.date-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; color: var(--muted); }
.date-value { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.date-box .muted.small { font-size: 12px; }
.stats-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-result-date { margin: 2px 0 0; }
@media (max-width: 420px) { .dates { grid-template-columns: 1fr; } }

.landing-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.landing-grid .card { margin: 0; }

/* ========== Coin Exchange ========== */
.btn-ja { background: var(--ja); color: #fff; }
.btn-ja:hover { filter: brightness(1.08); }
.btn-nein { background: var(--nein); color: #fff; }
.btn-nein:hover { filter: brightness(1.08); }

.coin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.coin-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.coin-id h1 { margin: 0; }
.coin-logo { width: 52px; height: 52px; flex: none; }
.coin-symbol { font-weight: 600; font-size: .7em; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--muted); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ja); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ja) 60%, transparent); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ja) 55%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.coin-price-box { text-align: right; }
.coin-price { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.6rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; border-radius: 8px; padding: 0 4px; transition: background .6s; }
.coin-change { font-weight: 700; font-variant-numeric: tabular-nums; }
.tick-up { animation: tickUp .8s; }
.tick-down { animation: tickDown .8s; }
@keyframes tickUp { from { background: var(--ja-soft); color: var(--ja); } to { background: transparent; } }
@keyframes tickDown { from { background: var(--nein-soft); color: var(--nein); } to { background: transparent; } }
@media (max-width: 560px) { .coin-price-box { text-align: left; width: 100%; } }

.coin-layout { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .coin-layout { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .coin-side { position: sticky; top: 80px; }
}
@media (max-width: 959px) {
  /* Handy: Chart, dann Handel, dann der Rest */
  .coin-layout { display: flex; flex-direction: column; }
  .coin-main { display: contents; }
  .coin-main > .chart-card { order: 1; }
  .coin-side { order: 2; }
  .coin-main > :not(.chart-card) { order: 3; }
}
.coin-stats { margin: 0 0 20px; }

.range-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; }
.range-tabs .chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.chart-range-change { margin-left: auto; font-weight: 700; }

.chart { position: relative; --chart: var(--primary); }
.chart.chart-up { --chart: var(--ja); }
.chart.chart-down { --chart: var(--nein); }
.chart-svg { display: block; width: 100%; touch-action: pan-y; }
.chart-svg .line { fill: none; stroke: var(--chart); stroke-width: 2; stroke-linejoin: round; }
.chart-svg .area { fill: url(#chartFill); }
.chart-svg .fill-top { stop-color: var(--chart); stop-opacity: .28; }
.chart-svg .fill-bottom { stop-color: var(--chart); stop-opacity: 0; }
.chart-svg .grid { stroke: var(--border); stroke-dasharray: 3 4; }
.chart-svg .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart-svg .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }
.chart-svg .cursor-dot { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart-svg .live-point { fill: var(--chart); stroke: var(--surface); stroke-width: 2; }
.chart-tip {
  position: absolute; top: 0; pointer-events: none; display: flex; flex-direction: column; align-items: center;
  padding: 6px 10px; border-radius: 8px; background: var(--text); color: var(--surface); font-size: .85rem; white-space: nowrap;
}
.chart-tip span { opacity: .75; font-size: .78rem; }
.chart-loading { padding: 80px 0; text-align: center; margin: 0; }

.depot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.depot div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; }
.depot div:last-child { border-bottom: 0; }
.depot dt { color: var(--muted); }
.depot dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

.trade-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 14px; padding: 4px; border-radius: 12px; background: var(--surface-2); }
.trade-tab { font: inherit; font-weight: 700; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: var(--cur-pointer); }
.trade-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.trade-form { display: flex; flex-direction: column; }

.event-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.event { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); }
.event-type { font-weight: 700; }
.event-crash { background: var(--nein-soft); }
.event-pump { background: var(--ja-soft); }

/* Wetten-Übersicht: eigener Tipp + Zähler an den Reitern */
.my-pick {
  margin: 4px 0 0; padding: 6px 10px; border-radius: 8px; font-size: .88rem;
  background: color-mix(in srgb, var(--opt) 14%, var(--surface)); color: var(--text);
}
.my-pick strong { color: var(--opt); }
.opt-row.is-mine .opt-label::before { content: "★ "; color: var(--opt); }

.tab-count {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 11px; font-weight: 500; line-height: 1;
  background: var(--color-accent-800); color: var(--color-accent-200); font-variant-numeric: tabular-nums;
}
.tab-count.is-zero { background: transparent; color: var(--color-neutral-600); }

/* Admin-Panel */
.admin-ihk-sub { margin: 18px 0 8px; font-size: 1rem; }
/* Admin: Texte der Mage-Tower-Stockwerke */
.admin-floor-stat { margin: 16px 0 4px; font-size: .85rem; letter-spacing: .06em; color: var(--muted); }
.admin-floor { border-top: 1px solid var(--border); padding: 6px 0; }
.admin-floor summary { cursor: pointer; padding: 6px 0; }
.admin-floor .field { margin-top: 8px; }
.admin-floor textarea { width: 100%; box-sizing: border-box; }
.stats-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.stats-3 .card { margin: 0; }
.admin-generate { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.admin-generate-ttl { display: flex; align-items: center; gap: 8px; }
.admin-generate-ttl select { width: auto; }
.code-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.code-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2);
}
.code-item.is-used { opacity: .7; }
.code-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.code-value { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; }
.code-meta { grid-column: 1; }
.code-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: 6px; align-items: center; }
.code-actions form { margin: 0; }
/* Einzeilige Einträge (Devs, Mods): Name und Knopf auf einer Höhe, flacher Kasten, Abstand zum Formular darunter */
.code-item-single { padding: 8px 14px; }
.code-item-single .code-actions { grid-row: 1; }
.code-list + .form { margin-top: 18px; }

/* Admin: Mehrfach-Konten (gleiches Gerät) */
.device-alert { align-items: start; }
.device-alert .code-meta { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.device-alert .code-actions { flex-wrap: wrap; justify-content: flex-end; }
.device-shared { padding-left: 10px; border-left: 2px solid var(--border); }
.device-level-3 { background: var(--nein-soft); color: var(--nein); }
.device-level-2 { background: rgba(245, 158, 11, .16); color: #f59e0b; }
.device-level-1 { background: var(--surface); color: var(--muted); border: 1px solid var(--border); }
/* Profil: Sperr-Vermerk unter dem Namen – schlichter Text ohne Kasten */
.ban-note { margin: -8px 0 16px; color: var(--nein); font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.top1-note { margin: -8px 0 16px; color: var(--muted); font-size: .92rem; font-weight: 600; }
.ban-note + .top1-note { margin-top: -12px; }
/* Moderations-Menü (Profil, nur Admin): Knopf mit aufklappendem Ban-Formular */
.mod-menu { position: relative; }
.mod-menu > summary { list-style: none; }
.mod-menu > summary::-webkit-details-marker { display: none; }
.mod-menu-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 50; width: min(320px, calc(100vw - 32px)); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow); font-size: 1rem; font-weight: 400;
}
.mod-menu-panel .form { gap: 12px; }
.mod-menu-panel .admin-tcg-pack { max-width: none; }
.device-done { margin-top: 14px; }
/* IHK: Schwierigkeit/Hybrid in der vergrößerten Quest-Ansicht (über den Knöpfen) */
.ihk-zoom-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
/* Handel: Black Market (täglich 16:30–19:00) */
.black-market { border-color: color-mix(in srgb, #a855f7 45%, var(--border)); background: linear-gradient(160deg, color-mix(in srgb, #a855f7 10%, var(--surface)), var(--surface) 55%); }
.black-market > summary h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.bm-state { font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.bm-state-open { background: rgba(168, 85, 247, .16); color: #c084fc; border-color: rgba(168, 85, 247, .45); }
.bm-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.bm-offer { display: flex; flex-direction: column; gap: 8px; }
.bm-offer .tcg-slot { position: relative; padding: 0; border: 0; background: none; }
.bm-offer.is-sold .tcg-slot img { filter: grayscale(1) brightness(.6); }
.bm-info { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.bm-info form { width: 100%; margin: 0; }
/* Duell (Head-to-Head) */
.tag-duel { background: rgba(249, 115, 22, .14); color: #fb923c; }
.duel-box { margin: 10px 0 14px; padding: 14px; border-radius: 12px; border: 1px solid rgba(249, 115, 22, .45); background: rgba(249, 115, 22, .07); }
.duel-vs { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 1.15rem; font-weight: 800; }
.duel-sep { padding: 2px 10px; border-radius: 999px; background: #f97316; color: #1c0a00; font-size: .8rem; letter-spacing: .08em; }
.duel-line { text-align: center; margin: 8px 0; }
.duel-steps { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: .92rem; }
.duel-steps li { color: var(--muted); }
.duel-steps li.is-done { color: var(--ja, #22c55e); font-weight: 700; }
.duel-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.duel-actions form { margin: 0; }
.duel-invites { margin-bottom: 16px; }
.duel-invite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.duel-invite-list li { display: flex; flex-direction: column; gap: 2px; }
/* Duell: je Seite Name und eingesetzte Karte (#67) */
.duel-vs { align-items: flex-start; }
.duel-vs .duel-sep { align-self: center; }
.duel-side { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.duel-side.is-winner .duel-name { color: var(--ja, #22c55e); }
.duel-card { display: grid; place-items: center; width: 96px; aspect-ratio: 720 / 1008; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px var(--rar, rgba(249, 115, 22, .5)), 0 8px 20px rgba(0, 0, 0, .45); }
.duel-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duel-card-empty { border: 2px dashed var(--rar, rgba(249, 115, 22, .6)); box-shadow: none; color: var(--rar, #fb923c); font-size: 1.6rem; font-weight: 900; }
.duel-side .muted.small { font-weight: 400; font-size: .78rem; }
.duel-accept { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.duel-accept .field { margin: 0; min-width: 200px; }
/* Duell: Topf der Zuschauer */
.duel-spect { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(249, 115, 22, .3); }
.duel-tip-head { margin: 0 0 6px; font-weight: 700; font-size: .9rem; }
.duel-pool { margin: 6px 0 8px; }
/* Duell in der Wett-Liste hervorgehoben */
.bet-card.is-duel { box-shadow: 0 0 0 1px rgba(249, 115, 22, .55), 0 0 22px rgba(249, 115, 22, .12); background: linear-gradient(135deg, rgba(249, 115, 22, .09), transparent 55%), var(--color-surface); }
.bet-card.is-duel:hover { box-shadow: 0 0 0 1px #f97316, 0 10px 30px rgba(0, 0, 0, .5), 0 0 26px rgba(249, 115, 22, .2); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* Duell: Hinweis "Das Duell läuft" als zweite Kachel neben der Auswertung */
.dates .date-side { margin-top: 0; justify-content: center; }
/* Profil: Knopf "Herausfordern" neben "Moderation" */
.profil-head-actions { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Admin: Handel-Log */
#handellog .leader-search { margin: 0 0 10px; flex-wrap: wrap; }
.trade-log td { vertical-align: top; }
.device-done > .code-list { margin-top: 12px; }
/* Auffälligkeiten (Moderation): je Spieler eine Karte mit seinen Hinweisen. Stufen: 2 wahrscheinlich, 1 möglich, 0 erledigt */
.susp-lvl-3 { --susp: var(--nein); }
.susp-lvl-2 { --susp: #f59e0b; }
.susp-lvl-1 { --susp: var(--color-neutral-500); }
.susp-lvl-0 { --susp: var(--color-neutral-700); }
.susp-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.susp-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); }
.susp-stat-value { font-size: 24px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.susp-stat-label { font-size: 12px; color: var(--muted); }
.susp-stat-likely .susp-stat-value { color: #f59e0b; }
.susp-stat-sure .susp-stat-value { color: var(--nein); }
/* Gesamtbewertung: 4 eindeutig, 3 starker Verdacht, 2 Verdacht, 1 beobachten */
.susp-stage-4 { --susp: var(--nein); }
.susp-stage-3 { --susp: #f97316; }
.susp-stage-2 { --susp: #f59e0b; }
.susp-stage-1, .susp-stage-0 { --susp: var(--color-neutral-500); }
.susp-rating { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; flex-wrap: wrap; padding: 12px 18px; background: color-mix(in srgb, var(--susp) 7%, transparent); border-bottom: 1px solid var(--color-neutral-800); }
.susp-rating-main { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; min-width: 0; }
.susp-rating-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.susp-rating-reason { font-size: 13px; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.susp-rating-areas { display: flex; gap: 14px; flex-wrap: wrap; }
.susp-area { display: flex; flex-direction: column; gap: 4px; min-width: 92px; font-size: 11px; color: var(--muted); }
.susp-area.is-hit .susp-area-name { color: var(--color-text); }
.susp-area-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--color-text) 10%, transparent); overflow: hidden; }
.susp-area-bar i { display: block; height: 100%; border-radius: 2px; background: var(--susp); }
.susp-empty { margin: 0; padding: 14px 18px; font-size: 13px; }
/* Mehrfach-Konten: gemeinsames Gerät, Anmeldungen beider Konten nebeneinander */
.dev-shared { grid-template-columns: 1fr; }
.dev-users { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.dev-user { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg) 55%, transparent); min-width: 0; }
.dev-user-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.dev-user-head .muted { font-size: 12px; }
.susp-groups { display: flex; flex-direction: column; gap: 14px; }
.susp-groups .card { margin-bottom: 0; }
.susp-group { padding: 0; overflow: hidden; border-left: 3px solid var(--susp); }
.susp-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--color-neutral-800); }
.susp-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.susp-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--susp); background: color-mix(in srgb, var(--susp) 16%, transparent); }
.susp-who-label { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.susp-names { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.susp-names .user-link { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.susp-group-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.susp-group-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.susp-group-actions form { margin: 0; }
.susp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--susp); background: color-mix(in srgb, var(--susp) 14%, transparent); white-space: nowrap; }
.susp-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.susp-findings { list-style: none; margin: 0; padding: 0; }
.susp-finding { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; padding: 14px 18px; }
.susp-finding + .susp-finding { border-top: 1px solid var(--color-neutral-800); }
.susp-finding.susp-lvl-0 { opacity: .65; }
.susp-finding-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.susp-finding-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.susp-finding-title .susp-pill { margin-left: auto; }
.susp-facts { display: flex; flex-wrap: wrap; gap: 6px; }
.susp-fact { display: inline-flex; align-items: baseline; gap: 5px; padding: 3px 9px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-text) 6%, transparent); font-size: 12px; color: var(--muted); }
.susp-fact b { color: var(--color-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.susp-summary { margin: 0; font-size: 13px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.susp-extras { margin: 0; padding: 8px 12px; list-style: none; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg) 55%, transparent); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; }
.susp-extras li + li { margin-top: 4px; }
/* Kartenhistorie (Admin/Devs): Zeitleiste eines Exemplars */
.card-history-search { display: flex; gap: 8px; align-items: center; }
.card-history-search input { flex: 1; min-width: 0; }
.card-history { list-style: none; margin: 16px 0; padding: 0; }
.card-history-step { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid var(--color-divider); overflow-wrap: anywhere; }
.card-history-step:first-child { border-top: 0; }
.card-history-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-bg); font-size: 14px; }
.card-history-time { font-size: 12px; color: var(--muted); }
.card-history-handel .card-history-icon, .card-history-duell .card-history-icon { background: color-mix(in srgb, var(--color-accent) 25%, var(--color-bg)); }
.card-history-step.is-guess { opacity: 0.75; }
.card-link { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.susp-time { font-size: 12px; color: var(--muted); }
.susp-repeat { color: #c084fc; }
.susp-repeat-title { margin: 22px 0 4px; }
.susp-finding-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.susp-finding-actions form { margin: 0; }
.susp-finding-actions .btn { width: 100%; justify-content: center; }
.susp-done { border-top: 1px solid var(--color-neutral-800); }
.susp-done > summary { padding: 10px 18px; font-size: 12px; color: var(--muted); cursor: pointer; }
.susp-done-groups { margin-top: 18px; }
.susp-done-groups .susp-groups { margin-top: 12px; }
@media (max-width: 640px) {
  .susp-overview { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .susp-stat { padding: 10px 12px; }
  .susp-stat-value { font-size: 20px; }
  .susp-group-head, .susp-finding { padding-left: 14px; padding-right: 14px; }
  .susp-finding { grid-template-columns: 1fr; }
  .susp-finding-actions { flex-direction: row; flex-wrap: wrap; }
  .susp-finding-actions .btn { width: auto; }
}
.nav-badge.nav-badge-device { background: #e3b341; color: var(--color-bg); }
.nav-badge.nav-badge-suspicious { background: #f87171; color: var(--color-bg); }
.nav-badge.nav-badge-suspicion { background: #c084fc; color: var(--color-bg); }
.nav-badge.nav-badge-suspicion-repeat { background: transparent; color: #c084fc; box-shadow: inset 0 0 0 1px #c084fc; } /* beurteilter Fall erneut aufgetreten: nur ein Rand, kein Alarm */
/* Handel-Log: Geschäft zwischen Mehrfach-Konten */
.trade-log tr.trade-flagged td { background: rgba(220, 38, 38, .08); }
.trade-flag { background: rgba(220, 38, 38, .18); color: #f87171; margin-top: 4px; }
.bm-filter { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; white-space: nowrap; }
.leader-search .bm-filter input { width: auto; flex: none; margin: 0; }
.code-input { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 560px) {
  .code-item { grid-template-columns: 1fr; }
  .code-actions { grid-column: 1; grid-row: auto; }
  .stats-3 .stat-value { font-size: 1.1rem; }
}

/* Tagesbonus */
.bonus-tiers { margin: 0 0 12px; padding-left: 20px; }
.bonus-tiers li { margin-bottom: 4px; }
.bonus-tiers li.active { font-weight: 700; color: var(--primary); }
.bonus-tiers li.active::after { content: " ← aktuell"; font-weight: 400; font-size: .85rem; }

/* Änderungsverlauf */
.history { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.history summary { cursor: var(--cur-pointer); font-weight: 600; color: var(--muted); }
.history-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.diff { display: grid; gap: 6px; margin-top: 6px; }
.diff-old, .diff-new { padding: 8px 10px; border-radius: 8px; font-size: .9rem; white-space: pre-line; overflow-wrap: anywhere; }
.diff-old { background: var(--nein-soft); }
.diff-new { background: var(--ja-soft); }
.diff-tag { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 2px; }

.resolve-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.resolve-form p { margin: 0; }
.resolve-form .side-picker { margin: 0; }
.side-option-sm { padding: 10px 12px; }
.side-option-sm .side-option-title { font-size: 1rem; }
[data-copy].copied, .share-btn.copied { border-color: var(--ja); color: var(--ja); background: var(--ja-soft); }

.section-title { margin: 28px 0 14px; }
.card-rules { border-color: var(--warn); border-left-width: 5px; }
.rules-list { margin: 0 0 10px; padding-left: 22px; }
.rules-list li { margin-bottom: 10px; font-weight: 500; }

.hero {
  background: linear-gradient(135deg, var(--primary) 0%, #0e7490 100%);
  color: #fff; border-radius: 20px; padding: clamp(24px, 5vw, 48px); margin-bottom: 32px;
}
.hero h1 { font-size: clamp(1.7rem, 1.2rem + 2.5vw, 2.75rem); max-width: 18ch; }
.hero .lead { font-size: 1.1rem; max-width: 60ch; opacity: .95; }
.hero .muted { color: rgba(255, 255, 255, .8); }
.hero .btn-primary { background: #fff; color: var(--primary); }
.hero .btn-primary:hover { background: #f0fdfa; }
.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

/* Tabs & Suche */
/* Reiter: Segmente auf einer Fläche */
.tabs {
  display: flex; gap: 4px; padding: 4px; width: fit-content; max-width: 100%; overflow-x: auto; margin-bottom: 16px;
  border-radius: var(--radius-md); background: var(--color-surface); scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: 6px;
  color: var(--color-neutral-400); white-space: nowrap; font-weight: 500; font-size: 13px;
}
.tab:hover { text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.tab.active { color: var(--text); background: var(--color-bg); }
.search { display: flex; gap: 8px; margin-bottom: 20px; }
.search input { flex: 1; min-width: 0; }

/* Wett-Karten */
.bet-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.bet-card {
  display: flex; flex-direction: column; gap: 10px; padding: 20px;
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg)); border: 0; border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--color-neutral-800); color: var(--text); transition: box-shadow .2s ease, transform .2s ease;
}
.bet-card:hover { color: var(--text); text-decoration: none; transform: translateY(-2px); box-shadow: 0 0 0 1px var(--color-accent-600), 0 10px 30px rgba(0, 0, 0, .5); }
.bet-card { gap: 18px; }
.bet-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-500); }
.bet-card-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.bet-card-when { white-space: nowrap; }
.bet-card-title { font-size: 19px; line-height: 1.3; text-wrap: pretty; margin: 0; overflow-wrap: anywhere; }
.bet-card-sub { margin: -8px 0 0; font-size: 13px; color: var(--color-neutral-400); }
.bet-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bet-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 12px; max-width: 100%;
  border-radius: var(--radius-md); font-size: 13px; font-weight: 500; box-shadow: 0 0 0 1px var(--color-neutral-800);
  overflow-wrap: anywhere; transition: box-shadow .15s, color .15s;
}
.bet-chip > span { color: var(--color-neutral-500); font-weight: 400; white-space: nowrap; }
.bet-card:hover .bet-chip:hover { box-shadow: 0 0 0 1px var(--color-accent); color: var(--color-accent-200); }
.bet-chip.is-mine { box-shadow: 0 0 0 1px var(--opt), 0 0 14px color-mix(in srgb, var(--opt) 25%, transparent); }
.bet-chip.is-mine::before { content: "★"; color: var(--opt); }
.bet-chip.is-winner { box-shadow: 0 0 0 1px var(--opt); color: var(--opt); }
.bet-chip.is-winner::after { content: "✓"; }
.bet-chip-more { display: inline-flex; align-items: center; min-height: 34px; padding: 0 6px; font-size: 13px; color: var(--color-neutral-500); }
.bet-card-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--color-divider); flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-500); }
.bet-card-pot strong { font-size: 16px; font-weight: 500; color: var(--text); margin-left: 4px; }
.bet-card-mine { color: var(--opt); }
.bet-card .tag { font-size: 11px; padding: 1px 7px; }
.bet-toolbar-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.bet-toolbar-row .tabs { margin: 0; }
.bet-search { margin: 0; }
.bet-search input { width: 280px; max-width: 100%; min-height: 40px; }
@media (max-width: 640px) { .bet-search { width: 100%; } .bet-search input { width: 100%; } }

/* Mehrteiliger Balken: Anteil jeder Option am Topf */
.bar { display: flex; height: 4px; border-radius: 999px; background: var(--color-neutral-900); overflow: hidden; margin-top: 8px; gap: 2px; }
.bar-lg { height: 4px; margin-top: 10px; }
.bar-seg { box-shadow: 0 0 8px color-mix(in srgb, var(--opt) 60%, transparent); }
.bar-seg { flex: 0 0 0; min-width: 4px; background: var(--opt); }

.opt-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.opt-row { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.opt-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--opt); }
.opt-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.opt-meta { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.opt-row.is-winner .opt-label::after { content: " ✓"; color: var(--opt); }

.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 0; border-radius: 999px; color: var(--muted); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge-offen { color: var(--color-accent-300); }
.badge-offen::before { background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.badge-wartend, .badge-bestaetigung { color: var(--warn); }
.badge-duell { color: #fb923c; }
.badge-entschieden { color: var(--text); }
.badge-entschieden::before { background: var(--ja); }
.badge-annulliert { color: var(--muted); }
.badge-streitig { color: var(--nein); }
.pill {
  display: inline-block; font-size: .8rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  color: var(--opt, var(--muted)); background: color-mix(in srgb, var(--opt, var(--muted)) 15%, var(--surface));
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.tag { font-size: 11px; font-weight: 500; letter-spacing: .02em; padding: 2px 8px; border-radius: 6px; background: var(--color-neutral-800); color: var(--color-neutral-200); }

/* Detailseite */
.bet-layout { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 960px) {
  .bet-layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  .bet-side { position: sticky; top: 80px; }
}
@media (max-width: 959px) {
  /* Auf dem Handy: Einsatzformular direkt unter dem Wettkopf */
  .bet-layout { display: flex; flex-direction: column; }
  .bet-main { display: contents; }
  .bet-main > .bet-head-wrap { order: 1; }
  .bet-side { order: 2; }
  .bet-main > :not(.bet-head-wrap) { order: 3; }
}
.bet-title { overflow-wrap: anywhere; margin: 12px 0 8px; font-size: clamp(26px, 1.2rem + 1.6vw, 34px); line-height: 1.15; text-wrap: pretty; }
.bet-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: var(--color-neutral-500); }
.bet-meta strong { font-weight: 500; color: var(--color-neutral-300); }
.bet-head-wrap { display: flex; flex-direction: column; }
.bet-head-wrap > [data-live="bet-head"] { display: flex; flex-direction: column; gap: 22px; }
.bet-head-wrap .bet-title { margin-bottom: 0; }
.bet-facts { display: flex; flex-direction: column; gap: 18px; }
.bet-stats { display: flex; gap: 40px; }
.bet-stats .stat-value { font-size: 22px; }
.bet-rules > summary { list-style: none; cursor: var(--cur-pointer); font-size: 13px; font-weight: 500; color: var(--color-neutral-300); }
.bet-rules > summary::-webkit-details-marker { display: none; }
.bet-rules > summary::after { content: " ▾"; color: var(--color-neutral-500); }
.bet-rules[open] > summary::after { content: " ▴"; }
.bet-rules > summary:hover { color: var(--text); }
.bet-rules p { margin: 10px 0 0; font-size: 13px; color: var(--color-neutral-400); max-width: 70ch; }
.bet-section-box { margin-top: 36px; }
.bet-section-box h2 { font-size: 20px; margin-bottom: 14px; }
.bet-section-box h2 .muted { font-weight: 400; color: var(--color-accent-300); }
.bet-people { list-style: none; margin: 0; padding: 0; }
.bet-people li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--color-divider); font-size: 14px; }
.bet-people li.me { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
.bet-people-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.bet-people-name a { color: var(--text); }
.bet-people-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-300); }
.bet-people-opt .opt-dot { width: 6px; height: 6px; box-shadow: 0 0 6px var(--opt); }
.bet-people-amt { text-align: right; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bet-people-amt small { display: block; font-size: 11px; font-weight: 400; color: var(--color-neutral-500); }
.tag-me { background: var(--color-accent-800); color: var(--color-accent-200); }
@media (max-width: 520px) { .bet-people li { grid-template-columns: minmax(0, 1fr) auto; } .bet-people-opt { grid-column: 1; grid-row: 2; } .bet-people-amt { grid-row: 1 / span 2; grid-column: 2; } }

/* Einsatz setzen */
.stake-card { box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 40px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.stake-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 14px; font-size: 12px; color: var(--color-neutral-500); }
.stake-form { display: flex; flex-direction: column; gap: 14px; }
.stake-form [data-stake-step="form"] { display: flex; flex-direction: column; gap: 14px; }
.stake-form [data-stake-step][hidden] { display: none; }
.stake-options { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.stake-options .side-option {
  flex-direction: row; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px;
  border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.stake-options .side-option:hover { box-shadow: inset 0 0 0 1px var(--opt); }
.stake-options .side-option-ring { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--opt); }
.stake-options .side-option-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.stake-options .side-option-sub { display: inline; font-size: 12px; }
.stake-options .side-option-quote { margin: 0; font-size: 12px; font-weight: 400; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.stake-options .side-option:has(input:checked) { background: color-mix(in srgb, var(--opt) 10%, transparent); box-shadow: inset 0 0 0 1px var(--opt), 0 0 16px color-mix(in srgb, var(--opt) 20%, transparent); }
.stake-options .side-option:has(input:checked) .side-option-ring { background: var(--opt); box-shadow: inset 0 0 0 3px var(--color-surface); }
.stake-form .quick-amounts { margin: -4px 0 0; gap: 6px; }
.stake-form .quick-amounts .btn { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.stake-win { padding: 14px; border-radius: var(--radius-md); background: var(--color-bg); display: flex; flex-direction: column; gap: 4px; }
.stake-win-main { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; color: var(--color-neutral-400); }
.stake-win-main strong { font-size: 22px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.stake-win-sub { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--color-neutral-500); }
.stake-win .estimate { margin: 4px 0 0; min-height: 0; font-size: 12px; color: var(--warn); }
.stake-win .estimate:empty { display: none; }
.stake-confirm { display: flex; flex-direction: column; gap: 12px; }
.stake-confirm-sum { margin: 0; font-size: 15px; }
.stake-confirm-sum strong { display: block; font-size: 28px; font-weight: 500; }
.stake-confirm .btn-block { width: 100%; }

.bet-desc { white-space: pre-line; overflow-wrap: anywhere; margin: 0; color: var(--color-neutral-400); font-size: 15px; }
.big { font-size: 1.25rem; font-weight: 700; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stats-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
.stats-4 .card { margin: 0; }
.stats-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-top: 0; }
.stats-auto .card { margin: 0; }
@media (max-width: 520px) { .stats-auto { grid-template-columns: 1fr 1fr; } .stats-auto .stat-value { font-size: 1.1rem; } }
.stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.stat-value { font-size: 1.35rem; font-weight: 500; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-value-sm { font-size: 1rem; }
@media (max-width: 860px) { .stats-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats > .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .stats-4 .stat-value { font-size: 1.1rem; }
}

.pool { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); gap: 12px; margin: 0; }
.pool-side {
  border-radius: var(--radius-md); padding: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--opt) 8%, var(--color-surface)), var(--color-bg));
  box-shadow: inset 0 2px 0 var(--opt), inset 0 0 0 1px var(--color-neutral-800);
}
.pool-side.is-mine, .pool-side.winner { box-shadow: inset 0 0 0 1px var(--opt), 0 0 22px color-mix(in srgb, var(--opt) 22%, transparent); }
.pool-label { font-size: 13px; font-weight: 500; color: var(--opt); overflow-wrap: anywhere; line-height: 1.25; }
.pool-amount { font-size: 22px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.pool-quote { font-size: 11px; color: var(--muted); }

.result { margin-top: 0; padding: 14px 16px; border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 2px; font-size: .95rem; }
.result-win { background: var(--primary-soft); }
.result-win strong { color: var(--primary); }
.result-void, .result-wait { background: var(--warn-soft); }
.result-void strong, .result-wait strong { color: var(--warn); }
.result-dispute { background: var(--nein-soft); }
.result-dispute strong { color: var(--nein); }

/* Schiedsrichter: Stimmen zum Ergebnis */
.referee-line { margin-top: -4px; }
.votes-box { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.votes-title { font-size: .95rem; margin: 0 0 10px; }
.vote-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vote-item { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.vote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vote-note { margin: 6px 0 0; font-size: .92rem; white-space: pre-line; overflow-wrap: anywhere; }

/* Indikator im Abstimmungsformular: wie hat die andere Seite entschieden? */
.vote-indicator {
  background: var(--warn-soft); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.vote-indicator-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vote-indicator-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--warn); }
.vote-indicator .vote-item { background: var(--surface); }
.vote-indicator .vote-note { font-style: italic; }
/* Option, für die schon eine Stimme vorliegt */
.side-option.is-voted { border-style: dashed; border-color: var(--opt); }
.side-option.is-voted:has(input:checked) { border-style: solid; }

/* Dev-Panel: Streitfälle */
.dispute-card { margin-bottom: 20px; }
.dispute-title { margin: 6px 0 2px; font-size: 1.25rem; }
.dispute-form { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 16px; }
.nav-badge-dispute { background: var(--nein); color: var(--color-bg); }

.resolve-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
.resolve-buttons-many { grid-template-columns: 1fr; }
.resolve-buttons form { margin: 0; }
.card-manage > form { margin-bottom: 8px; }
.void-box { margin-top: 8px; }
.void-box summary { cursor: var(--cur-pointer); color: var(--nein); font-weight: 600; padding: 6px 0; }
.void-box form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* Tabellen */
.table-wrap { overflow-x: auto; margin: 0 -4px; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); vertical-align: middle; }
.table th { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: color-mix(in srgb, var(--text) 60%, transparent); font-weight: 500; border-bottom-color: var(--color-divider); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table tr.me { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.leaderboard .rank { font-weight: 800; width: 40px; }
.rank-1 { color: #ca8a04; }
.rank-2 { color: #64748b; }
.rank-3 { color: #b45309; }
@media (max-width: 520px) { .hide-sm { display: none; } .table { font-size: .9rem; } }

/* Hinweise */
.flash {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: 20px; font-size: 14px; font-weight: 500;
  border: 1px solid transparent;
}
.flash-success { background: var(--ja-soft); color: var(--ja); border-color: color-mix(in srgb, var(--ja) 35%, transparent); }
.flash-error { background: var(--nein-soft); color: var(--nein); border-color: color-mix(in srgb, var(--nein) 35%, transparent); }
.flash-info { background: color-mix(in srgb, var(--color-accent) 10%, var(--color-bg)); color: var(--color-accent-300); border-color: var(--color-accent-700); }
.flash-close { background: none; border: 0; font-size: 1.4rem; line-height: 1; cursor: var(--cur-pointer); color: inherit; padding: 0 4px; }
/* Hinweis unten statt oben, wenn die Seite nach einer Aktion an derselben Stelle weitergeht (Album, #131) */
.flash.flash-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; width: max-content; max-width: min(520px, calc(100vw - 32px)); margin: 0;
  transform: translateX(-50%); box-shadow: 0 12px 32px rgba(0, 0, 0, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: flash-toast-in .3s cubic-bezier(.22, 1, .36, 1); transition: opacity .4s ease, transform .4s ease;
}
.flash.flash-toast.is-gone { opacity: 0; transform: translate(-50%, 8px); }
@keyframes flash-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .flash.flash-toast { animation: none; transition: none; } }

.empty { text-align: center; padding: 48px 16px; color: var(--muted); background: transparent; border: 1px dashed var(--color-neutral-700); border-radius: var(--radius-lg); }
.empty .btn { margin-top: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 8px; }

.prose .card ul { padding-left: 20px; }
.prose .card li { margin-bottom: 6px; }
.formula { background: var(--surface-2); border-left: 4px solid var(--primary); padding: 12px 16px; border-radius: 8px; }
.error-code { font-size: 4rem; font-weight: 900; color: var(--primary); margin: 0; line-height: 1; }

/* Fußzeile */
.footer { background: transparent; }
.footer-inner {
  max-width: 1240px; margin: 0 auto; padding: 24px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 12px; color: var(--color-neutral-500);
}
.footer-inner p { margin: 0; max-width: 60ch; }
.footer-inner p strong { font-weight: 400; }
.footer nav { display: flex; gap: 16px; flex-wrap: wrap; }

/* ========== Chat (unten rechts, public/js/chat.js) ========== */
/* Steht zwischen Inhalt und Fußzeile: klebt beim Scrollen unten rechts, bleibt aber über der Fußzeile */
/* unter der Kopfleiste (z-index 50), damit das aufgeklappte Menü den Chat-Knopf überdeckt */
.chat { position: sticky; bottom: 0; z-index: 40; height: 0; }
.chat-fab {
  position: absolute; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: var(--cur-pointer);
  border: 1px solid var(--color-accent-700); background: var(--color-surface); color: var(--text);
  box-shadow: var(--shadow-md); transition: border-color .18s ease, box-shadow .18s ease;
}
.chat-fab:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md), 0 0 18px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.chat.is-open .chat-fab { display: none; }
.chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center; background: var(--nein); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}
.chat-badge[hidden] { display: none; }
.chat-panel {
  position: absolute; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 100px));
  display: flex; flex-direction: column; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 12px 40px rgba(15, 23, 42, .3); overflow: hidden;
}
.chat-panel[hidden], .chat-view[hidden], .chat-new[hidden], .chat-form[hidden], .chat-note[hidden], .chat-error[hidden], .chat-empty[hidden], .chat-blocked[hidden] { display: none; }
.chat-view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); min-height: 52px; }
.chat-head-title { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-title a { color: inherit; }
.chat-icon-btn {
  min-width: 34px; height: 34px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted);
  font: inherit; font-size: 1.3rem; line-height: 1; cursor: var(--cur-pointer); flex: none;
}
.chat-icon-btn:hover { background: var(--surface); color: var(--text); }
.chat-block-btn { font-size: .78rem; }
.chat-new { display: flex; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.chat-new input { flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: .9rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); }
.chat-list { list-style: none; margin: 0; padding: 4px 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.chat-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: var(--cur-pointer);
}
.chat-item:hover, .chat-item:focus-visible { background: var(--surface-2); }
.chat-avatar {
  width: 38px; height: 38px; border-radius: var(--radius-md); flex: none; display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--border); font-size: .72rem; font-weight: 800; letter-spacing: .02em;
}
.chat-item.is-team .chat-avatar { background: color-mix(in srgb, var(--color-accent) 22%, var(--surface)); border-color: var(--color-accent-700); }
.chat-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-item-top { display: flex; align-items: baseline; gap: 8px; }
.chat-item-name { flex: 1; min-width: 0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-time { font-size: .72rem; color: var(--muted); flex: none; }
.chat-item-last { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item.is-unread .chat-item-last { color: var(--text); }
.chat-item-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: grid; place-items: center; background: var(--nein); color: #fff; font-size: 11px; font-weight: 700; flex: none; }
.chat-empty { margin: 0; padding: 16px; font-size: .85rem; text-align: center; }
.chat-blocked { padding: 8px 12px; border-top: 1px solid var(--border); font-size: .82rem; }
.chat-blocked summary { cursor: var(--cur-pointer); color: var(--muted); }
.chat-blocked ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.chat-blocked li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 6px; overscroll-behavior: contain; }
.chat-more { align-self: center; margin-bottom: 6px; }
.chat-msg { max-width: 82%; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.is-me { align-self: flex-end; align-items: flex-end; }
.chat-msg.is-other { align-self: flex-start; }
.chat-msg-from { font-size: .72rem; font-weight: 700; color: var(--color-accent); padding: 0 4px; }
a.chat-msg-from { text-decoration: none; }
a.chat-msg-from:hover { text-decoration: underline; }
.chat-msg-text { padding: 8px 12px; border-radius: 14px; font-size: .92rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg.is-other .chat-msg-text { background: var(--surface-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-msg.is-me .chat-msg-text { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg-meta { display: flex; gap: 8px; align-items: center; padding: 0 4px; font-size: .68rem; color: var(--muted); }
.chat-msg-report { border: 0; padding: 0; background: none; color: var(--muted); font: inherit; cursor: var(--cur-pointer); opacity: 0; transition: opacity .15s ease; }
.chat-msg:hover .chat-msg-report, .chat-msg-report:focus-visible, .chat-msg-report:disabled { opacity: 1; }
.chat-msg-report:hover { color: var(--nein); text-decoration: underline; }
@media (hover: none) { .chat-msg-report { opacity: 1; } }
.chat-note, .chat-error { margin: 0; padding: 8px 12px; font-size: .82rem; }
.chat-note { color: var(--muted); border-top: 1px solid var(--border); }
.chat-error { color: var(--nein); background: var(--nein-soft); }
.chat-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.chat-form textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 120px; padding: 9px 12px; font: inherit; font-size: .92rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
}
.chat-form textarea:focus, .chat-new input:focus { outline: none; border-color: var(--primary); }
.chat-form .btn { min-height: 40px; }
/* iPhone zoomt in Felder unter 16px hinein und bleibt danach gezoomt (#188) */
@media (pointer: coarse) {
  .chat-form textarea, .chat-new input { font-size: 16px; }
}
@media (max-width: 520px) {
  .chat-fab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .chat-panel { position: fixed; inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; width: auto; height: min(78dvh, 620px); }
}
/* Admin-Panel → Moderation → Chat-Meldungen */
.chat-report-log { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }
.chat-report-log li { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-report-log .is-reported { padding: 4px 8px; border-left: 3px solid var(--nein); background: var(--nein-soft); border-radius: 4px; }

/* ========== Handel ========== */
.nav-badge-link { display: inline-flex; align-items: center; gap: 6px; }
.nav-badges { display: inline-flex; gap: 3px; }
/* Zweitabzeichen (allgemein Neues): ruhiger als das eigene */
.nav-badge-market { background: var(--color-neutral-700); color: var(--text); }
.nav-badge-group { background: var(--color-accent); color: var(--color-bg); }
/* Verhandlung eines Tauschs */
.nego-turn { font-weight: 700; color: var(--muted); }
.nego-turn-me { color: var(--primary); }
.nego-layout { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .nego-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.nego-layout > section > .card { margin-bottom: 20px; }
.nego-terms { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 14px; }
.nego-terms-label { font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.nego-terms-value { font-size: 1.15rem; }
.nego-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.nego-actions form { margin: 0; }
.nego-chat { display: flex; flex-direction: column; }
.nego-messages { list-style: none; margin: 0 0 12px; padding: 4px 2px; display: flex; flex-direction: column; gap: 8px; max-height: 60vh; min-height: 120px; overflow-y: auto; }
.nego-msg { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--surface-2); border: 1px solid var(--border); }
.nego-msg-me { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.nego-msg-head { display: flex; gap: 8px; align-items: baseline; font-size: .82rem; }
.nego-msg-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.nego-msg-system { align-self: center; max-width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: transparent; border-style: dashed; font-size: .85rem; color: var(--muted); text-align: center; }
.nego-empty, .nego-changed { margin: 0 0 12px; }
.nego-changed { font-weight: 700; }
.nego-send { display: flex; gap: 8px; align-items: flex-end; }
.nego-send textarea { flex: 1; resize: vertical; min-height: 44px; }
@media (max-width: 560px) { .nego-msg { max-width: 92%; } }

.profil-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ========== IHK (Mini-Game) ========== */
.ihk-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ihk-stage {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 24px; margin-bottom: 20px; border-radius: 18px; color: #e5edf7;
  /* Schlichte dunkle Spielfläche mit leichtem Licht von oben */
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 255, 255, .06), transparent 70%),
    linear-gradient(180deg, #141d2f, #0c1322);
  border: 1px solid #22314a; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ihk-col { display: flex; flex-direction: column; gap: 14px; align-items: center; min-width: 0; }
.ihk-slot {
  position: relative; width: 100%; border-radius: 14px; overflow: hidden; display: grid; place-items: center;
  background: rgba(0, 0, 0, .35); border: 2px solid rgba(233, 199, 102, .55); box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
}
.ihk-slot-card { aspect-ratio: 720 / 1008; max-width: 260px; }
.ihk-slot-card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ihk-slot-item { aspect-ratio: 720 / 1008; max-width: 110px; border-style: dashed; opacity: .75; }
.ihk-slot-item:has(img) { opacity: 1; border-style: solid; }
.ihk-slot-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.admin-ihk-open { margin-bottom: 14px; }
.ihk-slot-empty { color: rgba(229, 237, 247, .7); font-weight: 700; text-align: center; font-size: .9rem; padding: 8px; }
.ihk-slot-empty small { font-weight: 500; opacity: .8; }
.ihk-slot-enemy { border-color: rgba(220, 80, 60, .7); }
.ihk-slot.is-picked { animation: ihk-pop .3s ease; }
/* Quest-Panel */
.ihk-quest {
  position: relative; width: 100%; padding: 14px 16px 12px; border-radius: 12px; color: #e5edf7;
  background: linear-gradient(135deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, .95));
  border: 1px solid rgba(56, 189, 248, .4); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); overflow: hidden;
}
.ihk-quest h2 { font-size: 1.15rem; margin-bottom: 6px; color: #7dd3fc; }
.ihk-quest p { font-size: .9rem; line-height: 1.5; margin-bottom: 10px; color: #cbd5e1; }
.ihk-quest-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ihk-quest-dur { flex: none; font-size: .8rem; font-weight: 700; color: #cbd5e1; white-space: nowrap; }
.ihk-quest-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(148, 163, 184, .2); font-size: .88rem; }
.ihk-quest-meta strong { color: #fff; }
.ihk-offers { display: grid; gap: 10px; width: 100%; }
.ihk-reroll { text-align: center; }
.ihk-offer {
  display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: start; cursor: var(--cur-grab); touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .15s, box-shadow .15s, border-color .15s;
}
.ihk-offer:hover { transform: translateY(-2px); border-color: rgba(56, 189, 248, .85); }
.ihk-offer h2 { font-size: 1rem; margin-bottom: 3px; }
.ihk-offer p { font-size: .82rem; margin-bottom: 8px; }
.ihk-offer .ihk-quest-meta { font-size: .82rem; }
.ihk-offer-thumb { width: 70px; height: auto; border-radius: 6px; pointer-events: none; }
.ihk-zoom-info .btn { margin-top: 8px; }
.ihk-offer.is-selected, .ihk-pick-card.is-selected img { box-shadow: 0 0 0 3px #22c55e, 0 8px 20px rgba(0, 0, 0, .35); }
.ihk-offer:focus-visible, .ihk-pick-card:focus-visible { outline: 3px solid #e9c766; outline-offset: 2px; }
.is-dragging { opacity: .45; }
.ihk-ghost {
  position: fixed; z-index: 300; width: 110px; pointer-events: none; border-radius: 9px;
  transform: translate(-50%, -60%) rotate(-5deg); box-shadow: 0 16px 36px rgba(0, 0, 0, .55);
}
.ihk-slot.is-drop-hint { border-color: #22c55e; border-style: dashed; }
.ihk-slot.is-target { box-shadow: 0 0 0 4px #22c55e, 0 0 30px rgba(34, 197, 94, .5); }
.ihk-slot[data-zoom] { cursor: var(--cur-zoom-in); }
.ihk-zoom-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: center; }
.ihk-zoom-body img { width: min(100%, 420px, calc((100dvh - 80px) * 720 / 1008)); justify-self: center; border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.ihk-zoom-info h2 { color: #fff; }
.ihk-zoom-info p { color: #cbd5e1; }
@media (max-width: 720px) {
  .ihk-zoom-body { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .ihk-zoom-body img { width: min(100%, 340px, calc((100dvh - 220px) * 720 / 1008)); }
}
.ihk-info { margin: 0; text-align: center; font-size: .92rem; color: rgba(229, 237, 247, .85); }
.ihk-pick-stats { display: grid; grid-template-columns: 1fr 1fr; text-align: center; gap: 1px 4px; margin-top: 5px; font-size: .72rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.ihk-pick-stats span:first-child { color: var(--text); }
.ihk-info a { color: #e9c766; }
.ihk-timer { text-align: center; font-size: 1.05rem; }
.ihk-timer strong { font-variant-numeric: tabular-nums; color: #e9c766; font-size: 1.3rem; }
.ihk-hourglass { font-size: 1.5rem; animation: ihk-flip 2s ease-in-out infinite; }
.ihk-fight { position: relative; width: 100%; padding: 14px; border-radius: 12px; background: rgba(0, 0, 0, .35); border: 1px solid rgba(233, 199, 102, .4); }
.ihk-bar-label { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.ihk-bar { height: 16px; border-radius: 999px; background: rgba(0, 0, 0, .5); overflow: hidden; border: 1px solid rgba(255, 255, 255, .12); }
.ihk-bar-fill { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .15s linear; }
.ihk-bar-progress { background: linear-gradient(90deg, #22c55e, #86efac); box-shadow: 0 0 12px rgba(34, 197, 94, .6); }
.ihk-bar-time { width: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b); }
.ihk-floaters { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ihk-floater { position: absolute; top: 45%; font-weight: 900; color: #86efac; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); animation: ihk-float 1.2s ease-out forwards; }
.ihk-floater.is-crit { color: #fde047; font-size: 1.25rem; }
/* Ömer (Mach das Unmögliche möglich): so viele Ömer greifen gerade gemeinsam an */
.ihk-slot-card[data-copies], .dg-slot-card[data-copies] { position: relative; }
.ihk-slot-card[data-copies]::after, .dg-slot-card[data-copies]::after {
  content: '×' attr(data-copies); position: absolute; top: 8px; right: 8px; z-index: 2; padding: 2px 9px; border-radius: 999px;
  font-weight: 800; font-size: 15px; color: #1a1206; background: #fbbf24; box-shadow: 0 0 0 2px rgba(0, 0, 0, .55), 0 0 14px rgba(251, 191, 36, .6);
}
/* Aleks (Gruß aus dem Osten): Münzwürfe – Kopf golden, Zahl grau */
.ihk-floater.ihk-coin { font-size: .9rem; letter-spacing: .04em; }
.ihk-floater.ihk-coin.is-heads { color: #fbbf24; font-size: 1.1rem; }
.ihk-floater.ihk-coin.is-tails { color: var(--color-neutral-400); }
.ihk-coins { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; font-size: .85rem; text-align: center; }
.ihk-coins[hidden] { display: none; }
.ihk-coins-field { display: inline-flex; align-items: center; gap: 6px; }
.ihk-coins-field input { width: 90px; text-align: right; }
.ihk-result { margin-top: 14px; padding: 14px; border-radius: 10px; text-align: center; animation: ihk-pop .35s ease; }
.ihk-result strong { display: block; font-size: 1.4rem; margin-bottom: 6px; }

.ihk-result.is-win strong { color: #86efac; }

.ihk-result.is-fail strong { color: #fca5a5; }
.ihk-loot { display: inline-block; margin: 4px 0 12px; padding: 6px 16px; border-radius: 999px; font-size: 1.3rem; font-weight: 900; color: #2a1d05; background: linear-gradient(135deg, #fff4cf, #e9c766 50%, #a07d2c); box-shadow: 0 0 20px rgba(233, 199, 102, .6); }
.ihk-level { font-weight: 700; font-size: .82em; color: var(--rar, #cbd5e1); }
.ihk-level.r-holo { background: linear-gradient(90deg, #ffd1f0, #a8e6ff, #d9b8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ihk-pick-sub { margin: 18px 0 10px; font-size: 1rem; }
.ihk-pick-card.is-boost img { box-shadow: 0 0 0 3px #e9c766, 0 8px 20px rgba(0, 0, 0, .35); }
.ihk-abilities {
  width: 100%; max-width: 260px; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px;
  font-size: .78rem; line-height: 1.4; color: #cbd5e1; background: rgba(0, 0, 0, .3); border: 1px solid rgba(233, 199, 102, .35);
}
.ihk-abilities strong { color: #e9c766; }
.ihk-ability-banner {
  margin-top: 12px; padding: 10px 12px; border-radius: 10px; font-size: .85rem; line-height: 1.45; color: #e5edf7;
  background: rgba(233, 199, 102, .12); border: 1px solid rgba(233, 199, 102, .5); animation: ihk-pop .35s ease;
}
.ihk-ability-banner strong { color: #fde68a; }
.ihk-floater.is-fake { color: #c084fc; font-size: 1.2rem; }

/* Fähigkeits-Effekte auf den Karten-Slots */
.ihk-slot.fx-bloodlust { animation: fx-blood 1.1s ease-in-out infinite; }
.fx-bloodlust::after {
  content: ""; position: absolute; left: 22%; right: 22%; top: 26%; height: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 30, 30, .95), rgba(255, 0, 0, .35) 45%, transparent 70%);
  filter: blur(3px); mix-blend-mode: screen; animation: fx-blood-eye 1.1s ease-in-out infinite;
}
.fx-frozen img { filter: grayscale(.7) brightness(.8) hue-rotate(180deg); }
.fx-frozen { box-shadow: 0 0 0 3px #93c5fd, 0 0 26px rgba(147, 197, 253, .6); }
.fx-energy { box-shadow: 0 0 0 3px #22c55e, 0 0 30px rgba(34, 197, 94, .7); animation: fx-pulse 1.4s ease-in-out infinite; }
.fx-buff { box-shadow: 0 0 0 3px #e9c766, 0 0 30px rgba(233, 199, 102, .7); animation: fx-pulse 1.6s ease-in-out infinite; }
.fx-love { box-shadow: 0 0 0 3px #f472b6, 0 0 34px rgba(244, 114, 182, .8); animation: fx-pulse 1s ease-in-out infinite; }
/* Gemeinsame Effekt-Ebenen (liegen über dem Kartenbild, werden vom Slot abgeschnitten) */
.fx-svg, .fx-heart, .fx-star, .fx-streak, .fx-rain, .fx-steam, .fx-scramble { position: absolute; z-index: 2; pointer-events: none; }
.fx-svg { inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Elektrische Entladung */
.fx-bolt polyline { fill: none; stroke: #bbf7d0; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 3px #22c55e) drop-shadow(0 0 7px #22c55e); animation: fx-flicker .26s steps(2) forwards; }
@keyframes fx-flicker { 0% { opacity: 1; } 50% { opacity: .35; } 100% { opacity: 0; } }
/* Börsenchart */
.fx-chart-line { fill: none; stroke: #fde68a; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 400; stroke-dashoffset: 400; filter: drop-shadow(0 0 4px #f59e0b); animation: fx-draw 1.4s ease-out forwards, fx-fade 2.6s ease-in forwards; }
.fx-chart-area { fill: rgba(250, 204, 21, .18); opacity: 0; animation: fx-area 2.6s ease forwards; }
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@keyframes fx-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fx-area { 0%, 35% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: 0; } }
/* Gefälschte Zahl */
.fx-scramble {
  left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 900; font-variant-numeric: tabular-nums;
  color: #f5d0fe; text-shadow: -3px 0 #ff2d6f, 3px 0 #29e0ff, 0 0 18px #a855f7; letter-spacing: 2px;
}
.fx-scramble.is-locked { animation: fx-lock 3s ease forwards; }
@keyframes fx-lock { 0% { transform: translate(-50%, -50%) scale(1.35); } 12% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
/* Funkelnder Stern (vierzackig) */
.fx-star { transform: translate(-50%, -50%); background: radial-gradient(circle, #fff 0 18%, #fde68a 40%, transparent 70%); clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: fx-twinkle .9s ease-in-out forwards; }
@keyframes fx-twinkle { 0% { transform: translate(-50%, -50%) scale(0) rotate(0); opacity: 0; } 50% { transform: translate(-50%, -50%) scale(1) rotate(45deg); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(0) rotate(90deg); opacity: 0; } }
/* Geschwindigkeitslinien */
.fx-streak { right: -60%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #86efac, #fff); box-shadow: 0 0 6px #22c55e; animation: fx-streak .5s linear forwards; }
@keyframes fx-streak { to { transform: translateX(-260%); opacity: 0; } }
/* Regen */
.fx-rain { top: -12%; width: 1.5px; height: 12%; background: linear-gradient(180deg, transparent, #93c5fd); opacity: .8; animation: fx-rain .6s linear forwards; }
@keyframes fx-rain { to { transform: translateY(1000%); } }
/* Kaffeedampf */
.fx-steam { bottom: 4%; width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .55), transparent 65%); filter: blur(6px); animation: fx-steam 2.6s ease-out forwards; }
@keyframes fx-steam { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 20% { opacity: .9; } 50% { transform: translate(12px, -120%) scale(1); } 100% { transform: translate(-10px, -260%) scale(1.6); opacity: 0; } }
/* Herzchen */
.fx-heart { bottom: 8%; color: #f9a8d4; line-height: 1; text-shadow: 0 0 8px rgba(244, 114, 182, .9); animation: fx-heart-up 2s ease-out forwards; }
/* Rahmen-Effekte */
.fx-aura { animation: fx-aura 1.8s ease-in-out infinite; }
.fx-aura::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(253, 230, 138, .55) 50%, transparent 65%);
  background-size: 250% 100%; animation: fx-sheen 2.2s ease-in-out infinite;
}
@keyframes fx-aura { 0%, 100% { box-shadow: 0 0 0 3px #b91c1c, 0 0 22px rgba(220, 38, 38, .6); } 50% { box-shadow: 0 0 0 3px #e9c766, 0 0 40px rgba(233, 199, 102, .85); } }
@keyframes fx-sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.fx-coffee { box-shadow: 0 0 0 3px #b45309, 0 0 30px rgba(217, 119, 6, .6); }
.fx-speed { transform: skewX(-4deg); transition: transform .3s; }
.fx-sad { transform: translateY(6px) rotate(-1.5deg); transition: transform .5s; }
@keyframes fx-heart-up {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-260%) translateX(10px) scale(1.15); opacity: 0; }
}
.fx-speed { box-shadow: 0 0 0 3px #38bdf8, 0 0 30px rgba(56, 189, 248, .7); animation: fx-pulse .8s ease-in-out infinite; }
.fx-sad img { filter: grayscale(.8) brightness(.75); }
.fx-sad { box-shadow: 0 0 0 3px #64748b; }
.fx-glitch img { animation: tcg-glitch 1.2s infinite; }
.fx-glitch { box-shadow: 0 0 0 3px #c084fc, 0 0 28px rgba(192, 132, 252, .7); }
.fx-flash { animation: fx-flash .8s ease; }
@keyframes fx-blood { 0%, 100% { box-shadow: 0 0 0 3px #dc2626, 0 0 18px rgba(220, 38, 38, .6); } 50% { box-shadow: 0 0 0 3px #ef4444, 0 0 44px rgba(239, 68, 68, .95); } }
@keyframes fx-blood-eye { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes fx-pulse { 50% { filter: brightness(1.12); } }
@keyframes fx-flash { 30% { box-shadow: 0 0 0 3px #fde68a, 0 0 34px rgba(253, 230, 138, .9); } }
@media (prefers-reduced-motion: reduce) { .fx-bloodlust, .fx-bloodlust::after, .fx-energy, .fx-buff, .fx-love, .fx-aura, .fx-aura::after, .fx-svg *, .fx-heart, .fx-star, .fx-streak, .fx-rain, .fx-steam, .fx-scramble, .fx-speed, .fx-glitch img { animation: none !important; } }
.ihk-fight-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.ihk-skip { min-height: 28px; padding: 2px 10px; font-size: .75rem; background: rgba(255, 255, 255, .1); color: #e5edf7; border-color: rgba(255, 255, 255, .25); }
.is-hit { animation: ihk-hit .25s ease; }
.is-shake { animation: ihk-shake .3s ease; }
.ihk-pick-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.ihk-pick-head h2 { margin: 0; }
.ihk-pick-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(30%, 110px), 1fr)); margin-bottom: 10px; }
.ihk-pick-card {
  position: relative; cursor: var(--cur-grab); border-radius: 9px; touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ihk-pick-card img { display: block; width: 100%; height: auto; border-radius: 9px; transition: transform .15s, box-shadow .15s; pointer-events: none; }
.ihk-pick-card:hover img { transform: translateY(-3px); }
@keyframes ihk-pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ihk-float { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-60px); opacity: 0; } }
@keyframes ihk-hit { 50% { transform: translateX(8px) scale(1.03); } }
@keyframes ihk-shake { 25% { transform: translateX(-5px) rotate(-1deg); } 75% { transform: translateX(5px) rotate(1deg); } }
@keyframes ihk-flip { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .ihk-stage { grid-template-columns: 1fr 1fr; padding: 14px; gap: 12px; }
  .ihk-center { grid-column: 1 / -1; order: 3; }
  .ihk-slot-item { max-width: 80px; }
}
@media (prefers-reduced-motion: reduce) { .ihk-hourglass, .is-hit, .is-shake, .ihk-floater { animation: none !important; } }

/* ========== TCG ========== */
.r-crumpled { --rar: var(--r-crumpled); }
.r-bfwler { --rar: var(--r-bfwler); }
.r-gold { --rar: var(--r-gold); }
.r-holo { --rar: var(--r-holo); }
/* Holo-Kartenbilder sind sehr hell (Pastell) – überall etwas abdunkeln, damit sie nicht blenden. Spätere Regeln
   (z. B. grau für gesperrte/frühere Karten) haben Vorrang. Die Rückseite beim Packöffnen ist ein Hintergrund (kein img) und bleibt unverändert. */
.r-holo img { filter: brightness(.82) contrast(1.05); }
.r-bockhaber { --rar: var(--r-bockhaber); }
.r-glitch { --rar: var(--r-glitch); }
.tcg-soon { --rar: var(--r-holo); } /* noch nicht erhältliche Karten im Album: eine Farbe für alle */
.r-icon { --rar: var(--r-icon); }
.r-sith { --rar: #ff2d3d; }
/* Icon ist weiß – goldener Rand, damit es auch auf hellem Grund zu sehen ist */
.tcg-badge.r-icon { background: #fff; box-shadow: 0 0 0 1.5px #d9b45a; }
.tcg-dot { display: inline-block; width: 8px; height: 8px; transform: rotate(45deg); background: var(--rar, var(--muted)); border-radius: 1px; flex: none; }
.tcg-badge.r-holo { background: linear-gradient(135deg, #ffd1f0, #a8e6ff 50%, #d9b8ff); }

/* Seite: Booster-Bühne, Meine Packs, Favoriten + Album-Kachel, Seltene Ziehungen */
.tcg-page { display: flex; flex-direction: column; gap: 56px; }
.tcg-hero-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 48px; align-items: center; margin: 0; }
.tcg-hero-pack { position: relative; display: flex; justify-content: center; padding: 24px 0; }
.tcg-hero-glow { position: absolute; inset: 10% 15%; background: radial-gradient(closest-side, color-mix(in srgb, var(--color-accent) 45%, transparent), transparent); filter: blur(30px); pointer-events: none; }
.tcg-hero-pack .tcg-pack-btn { position: relative; width: min(300px, 70%); animation: floaty 6s ease-in-out infinite; }
.tcg-hero-pack .tcg-pack-btn img { box-shadow: none; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); }
.tcg-hero-pack .tcg-pack-btn:not(:disabled):hover { transform: none; filter: brightness(1.08); }
.tcg-hero-pack .tcg-pack-btn:disabled { filter: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@media (prefers-reduced-motion: reduce) { .tcg-hero-pack .tcg-pack-btn { animation: none; transform: rotate(-4deg); } }
.tcg-hero-info { display: flex; flex-direction: column; gap: 20px; max-width: 440px; }
.tcg-hero-info h1 { margin: 0; font-size: clamp(32px, 1.6rem + 2vw, 44px); }
.tcg-hero-sub { margin: 0; color: var(--color-neutral-400); font-size: 15px; }
.tcg-hero-note { font-size: 12px; color: var(--color-neutral-500); }
.kicker { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-300); }
.kicker-muted { color: var(--color-neutral-500); }
.tcg-drops-btn {
  align-self: flex-start; display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px 0 14px;
  border-radius: 999px; border: 1px solid var(--color-divider); background: transparent; color: var(--color-neutral-300);
  font: inherit; font-size: 13px; cursor: var(--cur-pointer);
}
.tcg-drops-btn:hover { border-color: var(--color-accent-600); color: var(--text); }
.tcg-drops-gems { display: flex; gap: 7px; }
.tcg-drops-gems .tcg-dot { box-shadow: 0 0 6px var(--rar); }
.tcg-buy { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.tcg-qty { display: flex; align-items: center; height: 44px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.tcg-qty .btn { min-height: 0; height: 100%; width: 40px; padding: 0; font-size: 18px; border-radius: 0; }
.tcg-qty .btn:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.tcg-qty .tcg-qty-max { width: auto; padding: 0 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-400); border-left: 1px solid var(--color-divider); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.tcg-qty input {
  width: 36px; min-height: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none;
  text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield;
}
.tcg-qty input:focus { box-shadow: none; }
/* Browser-Pfeile ausblenden – dafür gibt es die Knöpfe − und + daneben */
.tcg-qty input::-webkit-outer-spin-button, .tcg-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn-glow { min-height: 44px; padding: 0 22px; font-size: 15px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent); }

.tcg-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: stretch; }
.tcg-favs-box { flex: 2 1 520px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tcg-favs-box h2 { margin: 0; font-size: 25px; }
.tcg-sub { margin: 4px 0 0; font-size: 13px; color: var(--color-neutral-500); }
.tcg-grid.tcg-favs { gap: 16px; }
.tcg-favs .tcg-slot img { border-radius: 12px; box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 0 1px var(--color-neutral-800); transition: transform .25s ease; }
.tcg-favs .tcg-slot:hover img { transform: translateY(-6px) rotate(-1.5deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 0 1px var(--color-neutral-800); }
.tcg-slot.tcg-fav-empty {
  aspect-ratio: 720 / 1008; border-radius: 12px; display: grid; place-items: center; text-decoration: none;
  background: repeating-linear-gradient(135deg, var(--color-neutral-900) 0 10px, transparent 10px 20px);
  box-shadow: inset 0 0 0 1px var(--color-neutral-800); color: var(--color-neutral-600); font-size: 26px; transition: transform .25s ease;
}
.tcg-fav-empty:hover { color: var(--color-accent-300); transform: translateY(-6px) rotate(-1.5deg); }
/* Favoriten (#130, Dashboard und TCG-Seite): entfernter Favorit blendet aus, bevor der freie Platz kommt; Fehler im Zoom- bzw. Folien-Fenster */
.tcg-favs .tcg-slot.is-leaving { opacity: 0; transform: scale(.92); transition: opacity .2s ease, transform .2s ease; }
.fav-error { margin: 0 0 8px; padding: 8px 12px; border-radius: var(--radius-md); font-size: 13px; color: var(--nein); background: var(--nein-soft); border: 1px solid color-mix(in srgb, var(--nein) 35%, transparent); }
@media (prefers-reduced-motion: reduce) { .tcg-favs .tcg-slot.is-leaving { transition: none; } }

.tcg-album-tile {
  flex: 1 1 280px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px;
  min-height: 340px; padding: 22px; border-radius: var(--radius-lg); overflow: hidden; color: var(--text);
  background: radial-gradient(120% 70% at 50% 0%, var(--color-accent-800), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-800); transition: box-shadow .25s ease;
}
.tcg-album-tile:hover { color: var(--text); box-shadow: 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.tcg-fan { position: absolute; left: 50%; top: 28px; width: 0; height: 200px; }
.tcg-fan img {
  position: absolute; left: -62px; top: 0; width: 124px; max-width: none; height: auto; border-radius: 9px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 1px var(--color-neutral-800);
  transform-origin: 50% 120%; transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.tcg-fan img.is-sample { filter: grayscale(1) brightness(.5); }
.tcg-fan img:nth-child(1) { transform: translateX(-30px) rotate(-8deg); }
.tcg-fan img:nth-child(3) { transform: translateX(30px) rotate(8deg); }
.tcg-album-tile:hover .tcg-fan img:nth-child(1) { transform: translateX(-78px) rotate(-16deg); }
.tcg-album-tile:hover .tcg-fan img:nth-child(2) { transform: translateY(-10px); }
.tcg-album-tile:hover .tcg-fan img:nth-child(3) { transform: translateX(78px) rotate(16deg); }
.tcg-album-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.tcg-album-text { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tcg-album-title { font-size: 24px; font-weight: 500; letter-spacing: -.02em; }
.tcg-progress { display: flex; align-items: center; gap: 10px; }
.progress { flex: 1; height: 4px; border-radius: 4px; background: var(--color-neutral-900); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--color-accent); box-shadow: 0 0 10px var(--color-accent); }
.tcg-progress-num { font-size: 12px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
.tcg-album-arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: 18px; transition: transform .25s ease;
}
.tcg-album-tile:hover .tcg-album-arrow { transform: translateX(4px); }
.tcg-rare { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.tcg-rare-feed { flex: 2 1 520px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tcg-rare-feed > * { max-width: 520px; }
.tcg-rare .inv-tiles { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.tcg-rare .inv-tile { flex: none; }
.tcg-rare .tcg-feed li { font-size: 14px; }
/* Dungeon: "Seltene Beute" (#78) – wie "Seltene Ziehungen" im TCG */
.dg-rare .tcg-feed li { font-size: 14px; }
.dg-rare .tcg-feed strong { font-weight: 500; }
.dg-rare-foil .tcg-dot { background: linear-gradient(135deg, #a8d8ff, #e9d5ff 50%, #fbcfe8); box-shadow: 0 0 8px rgba(255, 255, 255, .45); }
.tcg-rare .tcg-feed strong { font-weight: 500; }
@media (max-width: 640px) {
  .tcg-page { gap: 40px; }
  .tcg-hero-form { gap: 16px; }
  .tcg-grid.tcg-favs { gap: 10px; }
}

/* Album */
.album-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.album-title { display: flex; flex-direction: column; gap: 10px; min-width: 260px; }
.album-title h1 { margin: 0; }
.album-progress { flex: none; width: 220px; }
.album-title .tcg-progress-num { font-size: 13px; }
.album-dupes { display: flex; align-items: center; gap: 14px; margin: 0; padding: 8px 8px 8px 16px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-divider); font-size: 13px; }
.album-dupes strong { font-weight: 500; }
.album-body { display: flex; flex-direction: column; gap: 32px; }
@media (max-width: 640px) { .album-progress { width: 140px; } .album-dupes { width: 100%; justify-content: space-between; } }
/* Grading-Vitrine (Album, fremde Sammlung, #73): beste Note als Mini-Slab im Stil der Folien-Etiketten,
   Ø Note als Ring, Notenspiegel 1–10. Eine 10 als bestes Ergebnis: goldenes Etikett mit Schimmer. */
.grade-vitrine { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.grade-vitrine small { display: block; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.gv-slab {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 2px;
  min-width: 168px; padding: 7px 12px 8px; border-radius: 8px;
  background: linear-gradient(180deg, #f3f2fa, #dddbee); color: #161826;
  box-shadow: inset 0 0 0 1px rgba(91, 79, 196, .35), 0 6px 18px rgba(0, 0, 0, .35);
}
.gv-slab-head { font-size: 9px; font-weight: 700; letter-spacing: .22em; color: #5b4fc4; }
.gv-slab-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.gv-slab-word { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: #5b4fc4; line-height: 1.15; }
.gv-slab-word small { margin-top: 2px; color: #5a5a70; font-size: 9px; letter-spacing: .08em; font-weight: 600; }
.gv-slab-grade { font-size: 34px; font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
/* Folien-Glanz, der langsam über das Etikett wandert */
.gv-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .7) 47%, rgba(190, 230, 255, .45) 52%, transparent 64%) -150% 0 / 250% 100% no-repeat; animation: gv-sheen 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes gv-sheen { 0%, 55% { background-position: 150% 0; } 100% { background-position: -150% 0; } }
.gv-slab.is-gem { background: linear-gradient(135deg, #fff4cf, #f2c14e 45%, #fff1c2 60%, #d9a634); box-shadow: inset 0 0 0 1px rgba(146, 102, 10, .45), 0 0 22px rgba(242, 193, 78, .45), 0 6px 18px rgba(0, 0, 0, .35); }
.gv-slab.is-gem .gv-slab-head, .gv-slab.is-gem .gv-slab-word { color: #7a4e00; }
.gv-slab.is-gem .gv-slab-word small { color: #8a6a2a; }
.gv-slab.is-gem .gv-sheen { animation-duration: 2.6s; mix-blend-mode: overlay; }
/* Ø Note als Ring, gefüllt nach Schnitt / 10 */
.gv-avg { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 12px; border-radius: 8px; box-shadow: 0 0 0 1px var(--color-divider); }
.gv-ring {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--color-bg) 76%, transparent 78% 100%), conic-gradient(var(--color-accent-300) calc(var(--p) * 1turn), var(--color-divider) 0);
}
.gv-ring strong { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Notenspiegel: Säule je Note, Höhe nach Anzahl */
.gv-dist { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 6px 12px 4px; border-radius: 8px; box-shadow: 0 0 0 1px var(--color-divider); }
.gv-bars { display: grid; grid-template-columns: repeat(10, 12px); gap: 3px; align-items: end; height: 46px; }
.gv-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.gv-bar i { display: block; width: 100%; height: calc(var(--h) * 32px); min-height: 2px; border-radius: 2px 2px 0 0; background: var(--color-divider); transition: height .4s ease; }
.gv-bar.has i { background: color-mix(in srgb, var(--color-accent-300) 55%, transparent); }
.gv-bar.is-best i { background: var(--color-accent-300); box-shadow: 0 0 8px color-mix(in srgb, var(--color-accent-300) 60%, transparent); }
.gv-bar.is-gem i { background: #f2c14e; box-shadow: 0 0 8px rgba(242, 193, 78, .6); }
.gv-bar b { font-size: 9px; font-weight: 500; color: var(--muted); line-height: 1; }
.gv-bar.has b { color: var(--text); }
@media (prefers-reduced-motion: reduce) { .gv-sheen { animation: none; opacity: 0; } }
@media (max-width: 520px) { .gv-slab { flex: 1 1 100%; } .gv-dist { flex: 1; } }
/* Noch nichts gegradet: dieselbe Vitrine ausgegraut */
.grade-vitrine.is-empty .gv-slab { background: linear-gradient(180deg, #4a4a5c, #3a3a4b); color: #b9b9cc; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.grade-vitrine.is-empty .gv-slab-head, .grade-vitrine.is-empty .gv-slab-word { color: #a3a3ba; }
.grade-vitrine.is-empty .gv-slab-word { font-size: 11px; }
.grade-vitrine.is-empty .gv-slab-word small { color: #8c8ca3; }
.grade-vitrine.is-empty .gv-slab-word a { color: var(--color-accent-300); text-decoration: none; }
.grade-vitrine.is-empty .gv-slab-word a:hover, .grade-vitrine.is-empty .gv-slab-word a:focus-visible { text-decoration: underline; }
.grade-vitrine.is-empty .gv-slab-grade { color: #6e6e85; }
.grade-vitrine.is-empty .gv-ring strong, .grade-vitrine.is-empty .gv-dist small { color: var(--muted); }
.grade-vitrine.is-empty .gv-avg, .grade-vitrine.is-empty .gv-dist { opacity: .75; }
.sammlung-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
@media (max-width: 640px) { .sammlung-head-side { align-items: flex-start; } }

/* Favoriten, Album, Marken */
.tcg-grid.tcg-favs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tcg-grid.tcg-favs a.tcg-slot { text-decoration: none; }
.tcg-album-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.tcg-album-bar p { margin: 0 0 4px; }
.tcg-album-bar form { margin: 0; }
.tcg-marks { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; z-index: 2; }
.tcg-mark { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-bg); color: var(--text); box-shadow: 0 0 0 1px var(--color-neutral-700); }
.tcg-mark-fav { color: #facc15; }
.tcg-modal-info form + form { margin-top: 8px; }

/* Rangliste: Suche, Profil-Links */
.leader-search { display: flex; align-items: center; gap: 8px; margin: 0; }
.leader-search input { width: min(240px, 50vw); }
.leaderboard td a { color: inherit; font-weight: 600; }

/* Patchnotes */
.pn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.pn-head h2 { margin: 0; }
.pn-body { margin: 12px 0; overflow-wrap: anywhere; }
.pn-body .pn-h1 { font-size: 1.25rem; margin: 18px 0 8px; }
.pn-body .pn-h2 { font-size: 1.05rem; margin: 14px 0 6px; }
.pn-body ul { padding-left: 20px; margin: 8px 0; }
.pn-body p { margin: 8px 0; }
.pn-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.pn-actions form { margin: 0; }
.pn-arrow { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid currentColor; vertical-align: 1px; margin-right: 2px; }
.pn-comments summary { cursor: var(--cur-pointer); font-weight: 700; margin-bottom: 10px; }
.pn-toolbar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }

.tcg-pack-btn { padding: 0; border: 0; background: none; cursor: var(--cur-pointer); border-radius: 10px; transition: transform .2s ease, filter .2s ease; }
.tcg-pack-btn img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 28px rgba(76, 29, 149, .35); }
.tcg-pack-btn:not(:disabled):hover { transform: translateY(-4px) rotate(-2deg); filter: brightness(1.08); }
.tcg-pack-btn:disabled { cursor: var(--cur-no); filter: grayscale(.7) brightness(.8); }

.tcg-coll-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.tcg-coll-head h2 { margin: 0; }
.tcg-dot-all { --rar: var(--color-accent); }
.chip-count { color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }

.tcg-grid { display: grid; gap: 22px 18px; grid-template-columns: repeat(auto-fill, minmax(min(40%, 150px), 1fr)); }
.tcg-grid.tcg-album { grid-template-columns: repeat(auto-fill, minmax(min(40%, 172px), 1fr)); }
.tcg-slot {
  position: relative; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none;
  color: var(--text); font: inherit; text-align: left; cursor: var(--cur-pointer);
}
.tcg-slot img { display: block; width: 100%; height: auto; border-radius: 9px; transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); }
.tcg-slot:hover img, .tcg-slot:focus-visible img { transform: translateY(-4px) scale(1.02); box-shadow: 0 10px 24px color-mix(in srgb, var(--rar) 45%, transparent); }
/* Kartenbild mit Effekt-Ebenen */
.tcg-art {
  position: relative; display: block; aspect-ratio: 720 / 1008; border-radius: 10px; overflow: hidden;
  background: var(--color-bg); transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 40%, transparent), 0 12px 26px rgba(0, 0, 0, .45);
}
.tcg-slot .tcg-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; box-shadow: none; transform: none; transition: none; }
/* Sprung zu einer Karte (Album #karte-<id>, TCG-Favoriten #favorit-<key>, public/js/tcg.js) – sie hebt sich kurz und leuchtet in ihrer Seltenheitsfarbe */
.tcg-slot.is-spotlight { z-index: 2; }
.tcg-slot.is-spotlight .tcg-art, .tcg-slot.is-spotlight > img, .tcg-slot.is-spotlight .foil-card-slot { animation: tcg-spotlight 2s cubic-bezier(.22, 1, .36, 1); }
@keyframes tcg-spotlight {
  18% { transform: translateY(-5px) scale(1.04); box-shadow: 0 0 0 3px var(--rar), 0 0 36px 8px color-mix(in srgb, var(--rar) 70%, transparent), 0 16px 30px rgba(0, 0, 0, .5); }
  50% { transform: translateY(-3px) scale(1.02); box-shadow: 0 0 0 2px var(--rar), 0 0 24px 4px color-mix(in srgb, var(--rar) 55%, transparent), 0 14px 28px rgba(0, 0, 0, .45); }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-slot.is-spotlight .tcg-art, .tcg-slot.is-spotlight > img, .tcg-slot.is-spotlight .foil-card-slot { animation: none; box-shadow: 0 0 0 3px var(--rar), 0 0 24px 4px color-mix(in srgb, var(--rar) 55%, transparent); }
}
.tcg-slot:hover .tcg-art, .tcg-slot:focus-visible .tcg-art { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--rar), 0 14px 30px rgba(0, 0, 0, .5), 0 0 22px color-mix(in srgb, var(--rar) 30%, transparent); }
.tcg-fx { position: absolute; inset: 0; pointer-events: none; }
.tcg-fx-shine { background: linear-gradient(110deg, transparent 42%, rgba(255, 255, 255, .22) 50%, transparent 58%); background-size: 250% 100%; mix-blend-mode: overlay; animation: tcgShine 4s ease-in-out infinite; }
/* Holo: ruhiger, sanftere Farben – viele Holos auf einer Seite sollen nicht blenden (#90); beim Darüberfahren etwas stärker */
.tcg-fx-holo { background: linear-gradient(115deg, transparent 22%, #f5b3dc 36%, #b3e4f5 46%, #c9f0b8 56%, #f5e2b3 66%, transparent 80%); background-size: 200% 200%; mix-blend-mode: soft-light; opacity: .35; animation: holoSheen 8s linear infinite; transition: opacity .25s ease; }
.tcg-slot:hover .tcg-fx-holo, .tcg-slot:focus-visible .tcg-fx-holo { opacity: .55; }
.tcg-fx-bock { background: linear-gradient(115deg, transparent 25%, #d8b4fe 40%, #a5f3fc 52%, #fde68a 62%, transparent 78%); background-size: 200% 200%; mix-blend-mode: soft-light; opacity: .4; animation: holoSheen 7s linear infinite; }
.tcg-fx-glitch { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); }
.tcg-slot .tcg-art img.tcg-glitch-a { filter: hue-rotate(90deg) saturate(2); mix-blend-mode: screen; animation: glitchSlice 3.4s steps(1) infinite; clip-path: inset(0 0 100% 0); }
.tcg-slot .tcg-art img.tcg-glitch-b { filter: hue-rotate(-120deg) saturate(2); mix-blend-mode: screen; opacity: .8; animation: glitchSlice 3.4s steps(1) infinite reverse; clip-path: inset(0 0 100% 0); }
.r-glitch .tcg-art:has(.tcg-glitch-a) { animation: glitchShake 3.4s steps(1) infinite; }
@keyframes holoSheen { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes tcgShine { 0%, 55% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
@keyframes glitchSlice {
  0%, 84%, 100% { clip-path: inset(0 0 100% 0); transform: none; }
  86% { clip-path: inset(12% 0 70% 0); transform: translateX(-7px); }
  88% { clip-path: inset(55% 0 25% 0); transform: translateX(6px); }
  90% { clip-path: inset(30% 0 52% 0); transform: translateX(-4px); }
  92% { clip-path: inset(78% 0 8% 0); transform: translateX(5px); }
  94% { clip-path: inset(40% 0 40% 0); transform: translateX(-2px); }
}
@keyframes glitchShake { 0%, 84%, 96%, 100% { transform: none; filter: none; } 86% { transform: translate(2px, -1px); filter: hue-rotate(50deg) saturate(1.6); } 90% { transform: translate(-2px, 1px); } 93% { transform: translate(1px, 0); filter: hue-rotate(-40deg); } }
@media (prefers-reduced-motion: reduce) { .tcg-fx, .tcg-art, .tcg-art img { animation: none !important; } .tcg-art img.tcg-glitch-a, .tcg-art img.tcg-glitch-b { display: none; } }
.tcg-slot-label { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--color-neutral-200); padding-left: 2px; }
.tcg-slot-label .tcg-dot { width: 7px; height: 7px; }
.tcg-locked .tcg-slot-label, .tcg-seen .tcg-slot-label { color: var(--color-neutral-500); }
.tcg-seen .tcg-slot-label .tcg-dot { opacity: .4; }
.tcg-count {
  position: absolute; top: 8px; right: 8px; z-index: 2; background: var(--color-bg); color: var(--text);
  font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-accent);
}
.tcg-locked { cursor: var(--cur-default); }
/* Exemplar mit Knick (#204) – unten links, damit es Anzahl und Sperr-Schild nicht verdeckt */
.tcg-crease-tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 1px 7px; border-radius: 999px; pointer-events: none;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  color: #fde68a; background: rgba(14, 15, 26, .85); box-shadow: 0 0 0 1px color-mix(in srgb, #f59e0b 60%, transparent);
}
/* Exemplar ohne Slab mit früherer Bewertung: Kürzel und letzte Note – unten rechts */
.tcg-grade-tag {
  position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 1px 6px; border-radius: 3px; pointer-events: none;
  font-size: 10px; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
  color: var(--text); background: rgba(14, 15, 26, .85); box-shadow: 0 0 0 1px var(--color-accent);
}
.tcg-grade-tag b { font-size: 12px; }
/* Album: früher besessene Karte – durchsichtig und grau statt "?" */
.tcg-seen .tcg-art { box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.tcg-slot.tcg-seen .tcg-art img { filter: grayscale(1) brightness(.5) contrast(.9); }
.tcg-slot.tcg-seen:hover .tcg-art { box-shadow: 0 0 0 1px var(--color-neutral-700); }
/* Packöffnen: noch nie besessene Karte – Marke in der Zeile unter der Karte, erst nach dem Aufdecken */
.tcg-new-badge {
  display: none; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #22c55e; color: #052e16; font-size: .72rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 0 12px rgba(34, 197, 94, .65);
}
.tcg-flip.flipped .tcg-new-badge { display: inline-block; }
.tcg-in-exam { cursor: var(--cur-no); }
button.tcg-in-exam { cursor: var(--cur-zoom-in); } /* im Album trotzdem öffnen: ansehen, schützen, Favorit */
.tcg-in-exam img { filter: grayscale(1) brightness(.75); }
.tcg-exam-badge {
  position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); white-space: nowrap;
  font-size: 1.05rem; font-weight: 900; letter-spacing: .02em; color: #ff4d5e;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85), 0 0 12px rgba(0, 0, 0, .7);
}
.tcg-locked-inner {
  aspect-ratio: 720 / 1008; border-radius: 10px; display: grid; place-items: center;
  border: 1.5px dashed color-mix(in srgb, var(--rar) 55%, transparent);
  background:
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--rar) 5%, transparent) 0 10px, transparent 10px 20px),
    linear-gradient(160deg, color-mix(in srgb, var(--rar) 8%, var(--color-bg)), var(--color-bg));
  color: var(--rar); font-size: 40px; font-weight: 600; line-height: 1;
}
.tcg-locked-inner span { opacity: .75; text-shadow: 0 0 18px var(--rar); }
.r-sith .tcg-locked-inner { border-color: #ff2d3d; color: #ff2d3d; opacity: 1; }
.r-sith.tcg-slot:not(.tcg-locked) img { box-shadow: 0 0 18px rgba(255, 45, 61, .6); }

.admin-tcg-pack { max-width: 240px; }
.admin-tcg-table td { vertical-align: middle; }
.admin-tcg-table td:first-child { font-weight: 600; white-space: nowrap; }
.admin-tcg-table .tcg-dot, .tcg-odds .tcg-dot { margin-right: 6px; }
.admin-tcg-table input { width: 100%; max-width: 140px; }
.panel-form .btn[type="submit"] { margin-top: 12px; align-self: flex-start; }
.admin-tcg-summary { margin: 14px 0 0; }
/* #102: Schloss je Chance – offen blass, festgehalten in der Akzentfarbe */
.admin-tcg-table .admin-lock { position: relative; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--color-neutral-600); cursor: var(--cur-pointer); transition: color .15s ease, background .15s ease; }
.admin-tcg-table .admin-lock input { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; opacity: 0; cursor: inherit; }
.admin-tcg-table .admin-lock:hover { color: var(--text); background: var(--surface-2); }
.admin-tcg-table .admin-lock:has(input:checked) { color: var(--color-accent-300); background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.admin-tcg-table .admin-lock .admin-lock-on, .admin-tcg-table .admin-lock:has(input:checked) .admin-lock-off { display: none; }
.admin-tcg-table .admin-lock:has(input:checked) .admin-lock-on { display: block; }
.admin-tcg-table .admin-lock:has(input:focus-visible) { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.admin-tcg-hint { margin: 10px 0 0; }
.tcg-odds { font-size: 13px; font-variant-numeric: tabular-nums; }
.tcg-odds th, .tcg-odds td { padding: 9px 4px; }
.tcg-odds td:first-child { font-weight: 500; white-space: nowrap; }
.tcg-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tcg-feed li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .92rem; }

.tcg-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 800;
  background: var(--rar); color: #111; letter-spacing: .02em;
}

/* Zoom-Dialog */
.tcg-modal {
  border: 0; padding: 0; background: transparent; color: #fff; max-width: min(920px, 100vw - 24px); width: 100%;
  max-height: calc(100dvh - 24px); overflow: visible;
}
.tcg-modal::backdrop { background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: blur(8px); }
.tcg-modal[open] { animation: tcg-pop .25s ease; }
.tcg-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: center; }
@media (max-width: 720px) {
  .tcg-modal-body { grid-template-columns: 1fr; gap: 14px; justify-items: center; }
  .tcg-modal-info { width: min(100%, 360px); }
}
.tcg-modal-info { display: flex; flex-direction: column; gap: 14px; color: var(--text); }
.tcg-modal-info h2 { font-size: 25px; margin: 0; }
.tcg-modal-info p { margin: 0; }
.tcg-modal-info .muted { color: var(--color-neutral-400); }
.tcg-modal-rarity { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--color-neutral-300); }
.tcg-modal-status { font-size: 13px; color: var(--color-neutral-400); }
/* Meldung der letzten Aktion im Kartenfenster (#131) – Farben wie die Hinweise oben auf der Seite */
.tcg-modal-note { margin: 0; padding: 8px 12px; border-radius: var(--radius-md); font-size: 13px; font-weight: 500; border: 1px solid transparent; }
.tcg-modal-note.is-success { background: var(--ja-soft); color: var(--ja); border-color: color-mix(in srgb, var(--ja) 35%, transparent); }
.tcg-modal-note.is-error { background: var(--nein-soft); color: var(--nein); border-color: color-mix(in srgb, var(--nein) 35%, transparent); }
.tcg-modal-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.tcg-modal-info form { margin: 0; }
.tcg-modal-info .btn-block { justify-content: flex-start; padding: 0 14px; }
.tcg-modal-info .btn-ghost { background: transparent; color: var(--text); border-color: var(--color-divider); }
.tcg-modal-info .btn-ghost:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.tcg-close {
  position: fixed; top: 12px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 0; z-index: 2;
  background: var(--color-surface); color: var(--color-neutral-300); box-shadow: 0 0 0 1px var(--color-neutral-700); font-size: 1.6rem; line-height: 1; cursor: var(--cur-pointer);
}
.tcg-close:hover { color: var(--text); box-shadow: 0 0 0 1px var(--color-accent); }
.tcg-zoom { perspective: 1000px; width: min(100%, 460px, calc((100dvh - 80px) * 720 / 1008)); justify-self: center; touch-action: none; }
@media (max-width: 720px) { .tcg-zoom { width: min(100%, 340px, calc((100dvh - 260px) * 720 / 1008)); } }
.tcg-card-3d {
  position: relative; border-radius: 18px; overflow: hidden; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px color-mix(in srgb, var(--rar) 35%, transparent);
}
.tcg-zoom.tilting .tcg-card-3d { transition: transform .06s linear; }
.tcg-card-3d img { display: block; width: 100%; height: auto; }
.tcg-shine {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .4), transparent 55%);
}
.tcg-zoom.tilting .tcg-shine { opacity: 1; }
.tcg-zoom.r-holo .tcg-shine, .tcg-zoom.r-bockhaber .tcg-shine {
  opacity: .2;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .3), transparent 55%),
    linear-gradient(115deg, transparent 20%, rgba(255, 157, 230, .7) 36%, rgba(157, 243, 255, .7) 50%, rgba(255, 245, 157, .7) 62%, transparent 80%);
  background-size: 100% 100%, 250% 250%;
  background-position: 0 0, var(--mx, 50%) var(--my, 50%);
}
.tcg-zoom.r-bockhaber .tcg-shine { opacity: .25; }
.tcg-zoom.r-gold .tcg-shine, .tcg-zoom.r-icon .tcg-shine, .tcg-zoom.r-sith .tcg-shine {
  opacity: .3; background: linear-gradient(115deg, transparent 32%, rgba(255, 230, 150, .6) 48%, transparent 64%);
  background-size: 250% 250%; background-position: var(--mx, 50%) var(--my, 50%);
}
.tcg-zoom.tilting.r-holo .tcg-shine, .tcg-zoom.tilting.r-bockhaber .tcg-shine, .tcg-zoom.tilting.r-gold .tcg-shine, .tcg-zoom.tilting.r-icon .tcg-shine { opacity: 1; }
.tcg-zoom.tilting.r-holo .tcg-shine { opacity: .6; } /* Holo blendet beim Neigen sonst (#90) */
.tcg-zoom.is-former .tcg-card-3d { box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.tcg-zoom.is-former .tcg-card-3d img { filter: grayscale(1) brightness(.5) contrast(.9); }
.tcg-zoom.is-former .tcg-shine { opacity: 0 !important; }
.tcg-zoom.r-glitch .tcg-card-3d img { animation: tcg-glitch 2.6s infinite; }

/* Pack-Öffnung */
.tcg-noscroll { overflow: hidden; }
.tcg-reveal {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #2a1650 0%, #0b0716 60%, #05030a 100%); color: #fff;
  overflow-y: auto;
}
.tcg-reveal::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at 50% 50%, var(--rar, #fff), transparent 65%);
}
.tcg-reveal.flash-holo::before { --rar: #e9a8ff; opacity: .45; }
.tcg-reveal.flash-bockhaber::before { --rar: #b794f6; opacity: .55; }
.tcg-reveal.flash-glitch::before { --rar: #3cf29a; opacity: .7; }
.tcg-reveal.flash-icon::before { --rar: #ffffff; opacity: .8; }
.tcg-reveal.flash-sith::before { --rar: #ff2d3d; opacity: .8; }
.tcg-reveal-stage { position: relative; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.tcg-reveal-hint { min-height: 1.6em; margin: 0 0 46px; font-weight: 700; font-size: 1.1rem; text-align: center; letter-spacing: .02em; }
.tcg-reveal-pack { padding: 0; border: 0; background: none; cursor: var(--cur-pointer); width: min(62vw, 280px, calc((100dvh - 180px) * 800 / 1280)); }
.tcg-reveal-pack img { display: block; width: 100%; height: auto; border-radius: 12px; filter: drop-shadow(0 20px 40px rgba(124, 58, 237, .45)); }
.tcg-reveal-pack:disabled { cursor: var(--cur-wait); opacity: .7; }
.tcg-reveal-pack.ready { animation: tcg-shake 1.6s ease-in-out infinite; }
.tcg-reveal-pack.torn { animation: tcg-tear .65s ease-in forwards; pointer-events: none; }

.tcg-reveal-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 4.5vw, 72px); width: 100%; }
.tcg-reveal-cards:empty { display: none; }
.tcg-flip {
  position: relative; padding: 0; border: 0; background: none; color: #fff; font: inherit; cursor: var(--cur-pointer);
  width: min(13.5vw, 210px, calc((100dvh - 330px) * 720 / 1008)); perspective: 1200px;
  animation: tcg-deal .5s cubic-bezier(.2, .9, .3, 1.2) both;
}
@media (max-width: 560px) { .tcg-flip { width: min(29vw, 150px); } .tcg-flip-label { font-size: .72rem; } }
.tcg-flip-inner { position: relative; z-index: 1; display: block; aspect-ratio: 720 / 1008; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3, .9, .3, 1.05), scale .25s ease, translate .25s ease; }
.tcg-flip.flipped .tcg-flip-inner { transform: rotateY(180deg); }
.tcg-face { position: absolute; inset: 0; border-radius: clamp(8px, 1.4vw, 16px); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tcg-front { transform: rotateY(180deg); box-shadow: 0 0 34px color-mix(in srgb, var(--rar) 55%, transparent); }
/* Seitenwechsel bei 90° – zuverlässiger als backface-visibility allein */
.tcg-front { visibility: hidden; transition: visibility 0s .3s; }
.tcg-flip.flipped .tcg-front { visibility: visible; }
.tcg-flip.flipped .tcg-back { visibility: hidden; }
.tcg-front img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tcg-back {
  display: grid; place-items: center; border: 0;
  background: var(--gr-back); /* Rückseite je Season (Grafik mit Logo), siehe „Kartenrückseiten“ unten */
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  transition: box-shadow .3s, visibility 0s .3s;
}
.tcg-flip:not(.flipped):hover .tcg-back { box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 16px 34px rgba(0, 0, 0, .6); }
.tcg-flip-label {
  display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; font-weight: 800; font-size: .9rem;
  opacity: 0; transform: translateY(-6px); transition: opacity .3s .45s, transform .3s .45s;
}
.tcg-flip.flipped .tcg-flip-label { opacity: 1; transform: none; }
/* Seltenheit und Preis in einer Zeile; die Beschriftung darf in den Abstand zwischen den Karten ragen */
@media (min-width: 561px) { .tcg-flip-label { white-space: nowrap; margin-inline: -2.2vw; } }
.tcg-burst .tcg-front { animation: tcg-burst 1.2s ease-out .35s; }
.tcg-flip.r-glitch.flipped .tcg-front img { animation: tcg-glitch 2.2s infinite 1s; }
.tcg-reveal-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.tcg-reveal .btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .28); }
.tcg-reveal .btn-ghost:hover { background: rgba(255, 255, 255, .16); }

@keyframes tcg-pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes tcg-shake {
  0%, 100% { transform: rotate(0) translateY(0); }
  10% { transform: rotate(-3deg) translateY(-4px); }
  20% { transform: rotate(3deg) translateY(-4px); }
  30% { transform: rotate(-2deg); }
  40% { transform: rotate(0); }
}
@keyframes tcg-tear {
  0% { transform: none; opacity: 1; }
  30% { transform: scale(1.08) rotate(-4deg); filter: brightness(1.6); }
  100% { transform: translateY(-40px) scale(1.25); opacity: 0; filter: brightness(3) blur(4px); }
}
@keyframes tcg-deal { from { opacity: 0; transform: translateY(60px) scale(.7) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes tcg-burst {
  0% { box-shadow: 0 0 0 0 var(--rar); }
  40% { box-shadow: 0 0 90px 30px var(--rar); }
  100% { box-shadow: 0 0 34px color-mix(in srgb, var(--rar) 55%, transparent); }
}
@keyframes tcg-glitch {
  0%, 86%, 100% { transform: none; filter: none; }
  88% { transform: translate(-3px, 1px); filter: drop-shadow(3px 0 #ff2d6f) drop-shadow(-3px 0 #29e0ff); }
  90% { transform: translate(3px, -1px) skewX(2deg); filter: drop-shadow(-4px 0 #ff2d6f) drop-shadow(4px 0 #29e0ff) hue-rotate(40deg); }
  92% { transform: translate(-2px, 0); filter: drop-shadow(2px 0 #29e0ff); }
  94% { transform: none; filter: none; }
}
@keyframes tcg-glitch-soft {
  0%, 94%, 100% { transform: none; filter: none; }
  96% { transform: translate(-2px, 1px); filter: drop-shadow(2px 0 #ff2d6f) drop-shadow(-2px 0 #29e0ff); }
  98% { transform: translate(2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-reveal-pack.ready, .tcg-slot img, .tcg-card-3d img, .tcg-front img, .tcg-flip { animation: none !important; }
  .tcg-flip-inner { transition-duration: .01s; }
}

/* Hover beim Packöffnen: Karte hebt sich; ab Holo erscheint darunter ein Effekt je Seltenheit (nur bei Hover) */
.tcg-flip:hover .tcg-flip-inner { scale: 1.07; translate: 0 -10px; }
.tcg-aura {
  position: absolute; top: 0; left: 0; right: 0; z-index: 0; aspect-ratio: 720 / 1008; pointer-events: none;
  border-radius: clamp(8px, 1.4vw, 16px); scale: 1.07; translate: 0 -10px; opacity: 0; transition: opacity .3s;
}
.tcg-aura::before, .tcg-aura::after { content: ''; position: absolute; inset: -14%; pointer-events: none; }
.tcg-flip:hover .tcg-aura { opacity: 1; }
/* Holo: graues Leuchten */
.tcg-flip.r-holo .tcg-aura { box-shadow: 0 0 24px 6px rgba(210, 216, 228, .55), 0 0 60px 16px rgba(150, 158, 175, .3); }
/* Bockhaber: lila Pulsieren */
.tcg-flip.r-bockhaber:hover .tcg-aura { animation: tcg-aura-bock 1.3s ease-in-out infinite; }
/* Glitch: grüne Funken, die Karte selbst glitcht */
.tcg-flip.r-glitch .tcg-aura { box-shadow: 0 0 22px 4px rgba(57, 255, 140, .45), 0 0 50px 10px rgba(20, 200, 90, .2); }
/* Glitch: Matrix-Ziffern (Spalten erzeugt public/js/tcg.js) – über der Kartenkante, einzelne schwach auf der Karte,
   immer in Kartenhöhe; dazu ein grüner Scan-Streifen */
.tcg-matrix {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; aspect-ratio: 720 / 1008; pointer-events: none;
  scale: 1.07; translate: 0 -10px; opacity: 0; transition: opacity .3s;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.tcg-flip:hover .tcg-matrix { opacity: 1; }
.tcg-matrix::after {
  content: ''; position: absolute; left: -8%; right: -8%; top: 0; height: 7%;
  background: linear-gradient(transparent, rgba(57, 255, 140, .45) 45%, rgba(220, 255, 232, .7) 50%, rgba(57, 255, 140, .45) 55%, transparent);
  mix-blend-mode: screen; opacity: 0;
}
.tcg-flip:hover .tcg-matrix::after { animation: tcg-matrix-scan 2.6s ease-in infinite .4s; }
.tcg-matrix-col {
  position: absolute; top: 0; height: 100%; width: 1ch; overflow: hidden; color: #39ff8c; text-align: center;
  font-family: ui-monospace, Consolas, monospace; font-weight: 700; line-height: 1.05; word-break: break-all;
  text-shadow: 0 0 6px #39ff8c, 0 0 1px #e4ffee;
}
.tcg-matrix-col.in { mix-blend-mode: screen; text-shadow: 0 0 4px #39ff8c; }
.tcg-matrix-col > span { display: block; }
.tcg-flip:hover .tcg-matrix-col > span { animation: tcg-matrix-fall var(--dur, 1.8s) linear infinite var(--delay, 0s); }
.tcg-flip:hover .tcg-matrix-col.flicker { animation: tcg-matrix-flicker 1.3s steps(1) infinite var(--delay, 0s); }
.tcg-flip.r-glitch:hover .tcg-back, .tcg-flip.r-glitch:hover .tcg-front img { animation: tcg-glitch-hover 1.1s steps(1) infinite; }
/* Icon: ätherisches Licht */
.tcg-flip.r-icon .tcg-aura { box-shadow: 0 0 30px 8px rgba(255, 248, 222, .5), 0 0 80px 26px rgba(170, 220, 255, .3); }
.tcg-flip.r-icon .tcg-aura::before {
  inset: -22%; border-radius: 50%; opacity: .8; filter: blur(18px);
  background: conic-gradient(rgba(255, 250, 225, .75), transparent 18%, rgba(175, 225, 255, .65) 33%, transparent 50%, rgba(255, 236, 190, .65) 66%, transparent 82%, rgba(255, 250, 225, .75));
}
.tcg-flip.r-icon:hover .tcg-aura { animation: tcg-aura-ether 3s ease-in-out infinite; }
.tcg-flip.r-icon:hover .tcg-aura::before { animation: tcg-aura-spin 7s linear infinite; }
/* Sith: rotes Glühen mit roten Blitzen */
.tcg-flip.r-sith .tcg-aura { box-shadow: 0 0 26px 6px rgba(255, 30, 40, .55), 0 0 70px 20px rgba(160, 0, 10, .35); }
/* Blitze als dünne, verästelte Entladungen (SVG) statt Comic-Blitz */
.tcg-flip.r-sith .tcg-aura::before, .tcg-flip.r-sith .tcg-aura::after {
  inset: auto; width: 14%; height: 62%; opacity: 0; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M16%200%20L13%208%20L18%2015%20L11%2026%20L16%2034%20L9%2047%20L15%2055%20L10%2069%20L14%2078%20L8%20100%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M16%2034%20L23%2041%20L21%2049%20L27%2057%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M15%2055%20L7%2061%20L5%2069%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M16%200%20L13%208%20L18%2015%20L11%2026%20L16%2034%20L9%2047%20L15%2055%20L10%2069%20L14%2078%20L8%20100%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M16%2034%20L23%2041%20L21%2049%20L27%2057%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M15%2055%20L7%2061%20L5%2069%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3C%2Fsvg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 0 3px #ff2030) drop-shadow(0 0 9px rgba(255, 0, 20, .7));
}
.tcg-flip.r-sith .tcg-aura::after { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2030%20100%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M12%200%20L17%2010%20L12%2019%20L19%2031%20L13%2040%20L18%2052%20L11%2063%20L17%2074%20L13%2086%20L18%20100%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M12%2019%20L5%2025%20L7%2033%20L2%2040%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M18%2052%20L25%2058%20L24%2066%27%20fill%3D%27none%27%20stroke%3D%27%23ff2a36%27%20stroke-width%3D%273%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M12%200%20L17%2010%20L12%2019%20L19%2031%20L13%2040%20L18%2052%20L11%2063%20L17%2074%20L13%2086%20L18%20100%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M12%2019%20L5%2025%20L7%2033%20L2%2040%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3Cpath%20d%3D%27M18%2052%20L25%2058%20L24%2066%27%20fill%3D%27none%27%20stroke%3D%27%23ffe3e5%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%20vector-effect%3D%27non-scaling-stroke%27%2F%3E%3C%2Fsvg%3E"); }
.tcg-flip.r-sith .tcg-aura::before { left: -17%; top: 4%; rotate: 16deg; }
.tcg-flip.r-sith .tcg-aura::after { right: -17%; bottom: 2%; rotate: -14deg; }
.tcg-flip.r-sith:hover .tcg-aura { animation: tcg-aura-sith 2.2s infinite; }
.tcg-flip.r-sith:hover .tcg-aura::before { animation: tcg-bolt 2.2s infinite; }
.tcg-flip.r-sith:hover .tcg-aura::after { animation: tcg-bolt 2.2s infinite 1.1s; }

@keyframes tcg-aura-bock {
  0%, 100% { box-shadow: 0 0 16px 3px rgba(168, 85, 247, .4); }
  50% { box-shadow: 0 0 42px 14px rgba(192, 110, 255, .8), 0 0 90px 24px rgba(120, 40, 200, .35); }
}
@keyframes tcg-matrix-fall { from { translate: 0 -50%; } to { translate: 0 0; } }
@keyframes tcg-matrix-flicker { 0%, 46%, 74%, 100% { opacity: var(--op, 1); } 40% { opacity: .1; } 70% { opacity: .05; } }
@keyframes tcg-matrix-scan { 0% { top: -8%; opacity: 0; } 8% { opacity: 1; } 55% { top: 100%; opacity: .8; } 56%, 100% { top: 100%; opacity: 0; } }
@keyframes tcg-glitch-hover {
  0%, 30%, 62%, 100% { translate: 0 0; filter: none; }
  20% { translate: -3px 1px; filter: drop-shadow(3px 0 #ff2d6f) drop-shadow(-3px 0 #29e0ff); }
  24% { translate: 3px -1px; filter: drop-shadow(-3px 0 #39ff8c) hue-rotate(60deg); }
  52% { translate: 2px 0; filter: drop-shadow(-2px 0 #29e0ff) brightness(1.3); }
  56% { translate: -2px 1px; filter: drop-shadow(2px 0 #39ff8c); }
}
@keyframes tcg-aura-ether {
  0%, 100% { box-shadow: 0 0 26px 6px rgba(255, 248, 222, .45), 0 0 70px 22px rgba(170, 220, 255, .25); }
  50% { box-shadow: 0 0 40px 12px rgba(255, 250, 230, .7), 0 0 110px 36px rgba(170, 220, 255, .4); }
}
@keyframes tcg-aura-spin { to { rotate: 360deg; } }
@keyframes tcg-aura-sith {
  0%, 100% { box-shadow: 0 0 24px 6px rgba(255, 30, 40, .5), 0 0 64px 18px rgba(160, 0, 10, .3); }
  8%, 58% { box-shadow: 0 0 44px 14px rgba(255, 60, 70, .85), 0 0 110px 34px rgba(200, 0, 20, .5); }
  14%, 64% { box-shadow: 0 0 28px 8px rgba(255, 30, 40, .6), 0 0 70px 20px rgba(160, 0, 10, .35); }
}
@keyframes tcg-bolt {
  0%, 5%, 13%, 100% { opacity: 0; translate: 0 0; }
  6% { opacity: 1; }
  7% { opacity: .3; translate: 2px 3px; }
  9% { opacity: 1; translate: -1px -2px; }
  11% { opacity: .4; translate: 1px 1px; }
}
@media (prefers-reduced-motion: reduce) {
  .tcg-aura, .tcg-aura::before, .tcg-aura::after, .tcg-matrix::after, .tcg-matrix-col, .tcg-matrix-col > span, .tcg-flip:hover .tcg-back, .tcg-flip:hover .tcg-front img { animation: none !important; }
  .tcg-flip.r-sith .tcg-aura::before, .tcg-flip.r-sith .tcg-aura::after { opacity: 1; }
}

/* ========== Eigene Cursor (BfW) ==========
   Alle vier Cursor sind 32×32 px; auf hochauflösenden Bildschirmen wird die 64-px-Variante in gleicher Größe gezeigt. */
:root {
  --cur-default: url("/img/cursors/bfw-cursor-default.png") 3 3, auto;
  --cur-grab: url("/img/cursors/bfw-cursor-grab.png") 15 15, grab;
  --cur-grabbing: url("/img/cursors/bfw-cursor-grabbing.png") 15 15, grabbing;
  --cur-zoom-in: url("/img/cursors/bfw-cursor-zoom-in.png") 13 13, zoom-in;
  --cur-zoom-out: url("/img/cursors/bfw-cursor-zoom-out.png") 13 13, zoom-out;
  --cur-pointer: url("/img/cursors/bfw-cursor-pointer.png") 10 3, pointer;
  --cur-wait: url("/img/cursors/bfw-cursor-wait.png") 16 16, wait;
  --cur-no: url("/img/cursors/bfw-cursor-not-allowed.png") 16 16, not-allowed;
}
@supports (cursor: -webkit-image-set(url("x.png") 1x) 0 0, auto) {
  :root {
    --cur-default: -webkit-image-set(url("/img/cursors/bfw-cursor-default.png") 1x, url("/img/cursors/bfw-cursor-default@2x.png") 2x) 3 3, auto;
    --cur-grab: -webkit-image-set(url("/img/cursors/bfw-cursor-grab.png") 1x, url("/img/cursors/bfw-cursor-grab@2x.png") 2x) 15 15, grab;
    --cur-grabbing: -webkit-image-set(url("/img/cursors/bfw-cursor-grabbing.png") 1x, url("/img/cursors/bfw-cursor-grabbing@2x.png") 2x) 15 15, grabbing;
    --cur-zoom-in: -webkit-image-set(url("/img/cursors/bfw-cursor-zoom-in.png") 1x, url("/img/cursors/bfw-cursor-zoom-in@2x.png") 2x) 13 13, zoom-in;
    --cur-zoom-out: -webkit-image-set(url("/img/cursors/bfw-cursor-zoom-out.png") 1x, url("/img/cursors/bfw-cursor-zoom-out@2x.png") 2x) 13 13, zoom-out;
    --cur-pointer: -webkit-image-set(url("/img/cursors/bfw-cursor-pointer.png") 1x, url("/img/cursors/bfw-cursor-pointer@2x.png") 2x) 10 3, pointer;
    --cur-wait: -webkit-image-set(url("/img/cursors/bfw-cursor-wait.png") 1x, url("/img/cursors/bfw-cursor-wait@2x.png") 2x) 16 16, wait;
    --cur-no: -webkit-image-set(url("/img/cursors/bfw-cursor-not-allowed.png") 1x, url("/img/cursors/bfw-cursor-not-allowed@2x.png") 2x) 16 16, not-allowed;
  }
}
@supports (cursor: image-set(url("x.png") 1x) 0 0, auto) {
  :root {
    --cur-default: image-set(url("/img/cursors/bfw-cursor-default.png") 1x, url("/img/cursors/bfw-cursor-default@2x.png") 2x) 3 3, auto;
    --cur-grab: image-set(url("/img/cursors/bfw-cursor-grab.png") 1x, url("/img/cursors/bfw-cursor-grab@2x.png") 2x) 15 15, grab;
    --cur-grabbing: image-set(url("/img/cursors/bfw-cursor-grabbing.png") 1x, url("/img/cursors/bfw-cursor-grabbing@2x.png") 2x) 15 15, grabbing;
    --cur-zoom-in: image-set(url("/img/cursors/bfw-cursor-zoom-in.png") 1x, url("/img/cursors/bfw-cursor-zoom-in@2x.png") 2x) 13 13, zoom-in;
    --cur-zoom-out: image-set(url("/img/cursors/bfw-cursor-zoom-out.png") 1x, url("/img/cursors/bfw-cursor-zoom-out@2x.png") 2x) 13 13, zoom-out;
    --cur-pointer: image-set(url("/img/cursors/bfw-cursor-pointer.png") 1x, url("/img/cursors/bfw-cursor-pointer@2x.png") 2x) 10 3, pointer;
    --cur-wait: image-set(url("/img/cursors/bfw-cursor-wait.png") 1x, url("/img/cursors/bfw-cursor-wait@2x.png") 2x) 16 16, wait;
    --cur-no: image-set(url("/img/cursors/bfw-cursor-not-allowed.png") 1x, url("/img/cursors/bfw-cursor-not-allowed@2x.png") 2x) 16 16, not-allowed;
  }
}
html, body { cursor: var(--cur-default); }
a, button, summary, select, label[for], [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"], input[type="submit"] { cursor: var(--cur-pointer); }
:disabled, [aria-disabled="true"] { cursor: var(--cur-no); }
[aria-busy="true"], [aria-busy="true"] * { cursor: var(--cur-wait); }
a.tcg-locked { cursor: var(--cur-pointer); } /* freier Favoriten-Platz führt ins Album */

/* IHK: Boost-Slots nebeneinander, Hybrid-Marke, zweiter Balken */
.ihk-boosts { display: flex; gap: 10px; justify-content: center; width: 100%; }
.ihk-boosts .ihk-slot-item { flex: 0 1 110px; width: 100%; }
.ihk-slot[hidden] { display: none; }
.ihk-hybrid { padding: 1px 8px; border-radius: 999px; border: 1px solid rgba(250, 204, 21, .6); color: #facc15; font-weight: 700; font-size: .78rem; }
.ihk-bar-progress2 { background: linear-gradient(90deg, #38bdf8, #a5f3fc); box-shadow: 0 0 12px rgba(56, 189, 248, .6); }

/* Rangliste: Suchfeld so hoch wie der Knopf daneben */
.leader-search input[type="search"] { height: 36px; min-height: 0; padding: 4px 12px; }

/* Greifen, Ziehen, Vergrößern, Verkleinern */
[data-drag]:active { cursor: var(--cur-grabbing); }
body.ihk-dragging, body.ihk-dragging * { cursor: var(--cur-grabbing) !important; }
[data-tcg-card] { cursor: var(--cur-zoom-in); }
dialog.tcg-modal { cursor: var(--cur-zoom-out); } /* Klick neben die Karte schließt die große Ansicht */
.tcg-modal-body, .ihk-zoom-body { cursor: var(--cur-default); }

/* IHK: Boost 2 ist nur bei Hybrid-Quests aktiv */
.ihk-slot-item.is-disabled { opacity: .35; filter: grayscale(1); cursor: var(--cur-no); }

/* Rangliste: lodernder Name für Platz 1 (Flammenzungen über einen SVG-Filter, siehe app.js).
   data-text muss dem Namen entsprechen – daraus entstehen die Flammen hinter den Buchstaben. */

.flame-name {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-weight: 800;
  color: #fff4cf;
  text-shadow: 0 1px 1px rgba(70, 12, 0, .95), 0 0 1px rgba(70, 12, 0, .8), 0 0 8px rgba(255, 120, 0, .55);
  animation: flame-glow 1.4s ease-in-out infinite alternate;
}

/* lángnyelvek a betűk mögött (az SVG-szűrő torzítja őket lobogóvá) */
.flame-name::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  -webkit-text-fill-color: #ff6a00;
  color: #ff6a00;
  text-shadow:
    0 0 3px #ffb300,
    0 -3px 3px #ffb300,
    0 -6px 5px #ff9100,
    0 -10px 7px #ff6d00,
    0 -15px 9px #f4511e,
    0 -20px 11px rgba(216, 40, 0, .85),
    0 -26px 14px rgba(150, 20, 0, .55);
  filter: url(#bfw-flame);
  transform: translateY(-3px);
  opacity: .95;
  pointer-events: none;
}

/* parázs-szikrák */
.flame-name::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 45%;
  height: 28px;
  z-index: 1;
  pointer-events: none;
  background-image:
    radial-gradient(circle, #ffe082 0 1px, transparent 1.7px),
    radial-gradient(circle, #ffab40 0 1.2px, transparent 1.9px),
    radial-gradient(circle, #fff3c4 0 .9px, transparent 1.5px),
    radial-gradient(circle, #ff6d00 0 1px, transparent 1.7px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
  animation: flame-embers 1.7s linear infinite;
}

@keyframes flame-glow {
  from { color: #fff4cf; }
  to   { color: #ffe9a8; }
}

@keyframes flame-embers {
  0%   { background-position: 15% 100%, 45% 100%, 72% 100%, 90% 100%; opacity: 0; }
  20%  { opacity: 1; }
  100% { background-position: 22% 0%, 38% -20%, 80% 10%, 84% -15%; opacity: 0; }
}

.is-top1 {
  background: linear-gradient(90deg, rgba(255, 109, 0, .20) 0%, rgba(255, 109, 0, .05) 60%, transparent 100%);
  box-shadow: inset 3px 0 0 #ff8f00, inset 8px 0 14px -8px rgba(255, 143, 0, .9);
}

@media (prefers-reduced-motion: reduce) {
  .flame-name, .flame-name::after { animation: none; }
}

/* in der Rangliste ist der Name ein Link – Farbe und Unterstreichung kommen vom Effekt */
.leaderboard td a.flame-name { color: #fff4cf; text-decoration: none; }

/* Mein Konto: Datenschutz-Karte */
#datenschutz h3 { margin: 18px 0 6px; font-size: 1rem; }

/* Rollen-Abzeichen neben Namen: "DEV" mit Glitch-Effekt – grün für Devs, rot für den Admin */
.role-badge {
  --role: #22e07a;
  position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 5px 0;
  font: 800 max(.62rem, .56em)/1.35 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .08em;
  color: var(--role); border: 1px solid var(--role); border-radius: 4px;
  background: color-mix(in srgb, var(--role) 12%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--role) 70%, transparent);
  text-decoration: none; text-transform: uppercase; -webkit-text-fill-color: currentColor;
}
.role-admin { --role: #ff3b4e; }
/* zwei versetzte Kopien des Textes, die kurz aufblitzen und in Streifen verrutschen */
.role-badge::before, .role-badge::after {
  content: attr(data-text); position: absolute; left: 0; right: 0; top: 0; padding: 1px 5px 0; pointer-events: none; opacity: 0;
}
.role-badge::before { color: #6ff; animation: role-glitch-a 3.4s steps(1) infinite; }
.role-badge::after { color: #f6f; animation: role-glitch-b 3.4s steps(1) infinite; }
.role-badge { animation: role-jitter 3.4s steps(1) infinite; }
@keyframes role-glitch-a {
  0%, 86%, 100% { opacity: 0; }
  87% { opacity: .9; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); }
  90% { opacity: .9; transform: translate(2px, 0); clip-path: inset(45% 0 15% 0); }
  93% { opacity: .9; transform: translate(-1px, 0); clip-path: inset(70% 0 0 0); }
  95% { opacity: 0; }
}
@keyframes role-glitch-b {
  0%, 87%, 100% { opacity: 0; }
  88% { opacity: .9; transform: translate(2px, 0); clip-path: inset(50% 0 10% 0); }
  91% { opacity: .9; transform: translate(-2px, 0); clip-path: inset(0 0 65% 0); }
  94% { opacity: .9; transform: translate(1px, 0); clip-path: inset(25% 0 40% 0); }
  96% { opacity: 0; }
}
@keyframes role-jitter {
  0%, 86%, 96%, 100% { transform: none; }
  88% { transform: translate(1px, 0) skewX(-8deg); }
  91% { transform: translate(-1px, 0) skewX(6deg); }
  94% { transform: translate(0, 0) skewX(-3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .role-badge, .role-badge::before, .role-badge::after { animation: none; }
}

/* Pack-Log: Blättern */
.log-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }

/* Echter Name in Klammern neben dem Benutzernamen: etwas grauer und leichter */
.real-name { color: var(--muted); font-weight: 500; font-size: .88em; -webkit-text-fill-color: currentColor; text-shadow: none; }

/* Aufklappbare Karten (Mein Konto): Pfeil oben rechts */
.fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; cursor: var(--cur-pointer); }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary h2 { margin: 0; }
.fold[open] > summary { margin-bottom: 14px; }
.fold-arrow { flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .2s ease; }
.fold[open] > summary .fold-arrow { transform: rotate(-135deg); }
.fold > summary:hover .fold-arrow { border-color: var(--text); }

/* Mein Konto: Einstellungs-Karten zu zweit nebeneinander */
.account-grid { columns: 2; column-gap: 20px; }
.account-grid > .card { margin: 0 0 20px; break-inside: avoid; }
@media (max-width: 760px) { .account-grid { columns: 1; } }

/* Namen als Profil-Links: unauffällig, erst beim Überfahren unterstrichen */
.user-link { color: inherit; text-decoration: none; cursor: var(--cur-pointer); }
.user-link:hover, .user-link:focus-visible { text-decoration: underline; color: var(--primary); }
[data-zoom-card] { cursor: var(--cur-zoom-in); }

/* ========== Forum ========== */
.role-mod { --role: #ff9f1c; }
.role-mod-text { color: #ff9f1c; }
.forum-crumbs { margin-bottom: 8px; }
.forum-crumbs a { color: inherit; }
.forum-section { padding-bottom: 6px; }
.forum-section-head { margin-bottom: 8px; }
.forum-section-head h2 { margin: 0; }
.forum-section-head h2 a { color: inherit; text-decoration: none; }
.forum-section-head p { margin: 2px 0 0; }
.forum-staff { border-color: color-mix(in srgb, #22e07a 35%, var(--border)); }
.forum-list { list-style: none; margin: 0; padding: 0; }
.forum-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 210px; gap: 6px 16px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border); }
.forum-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.forum-row-title { font-weight: 700; text-decoration: none; overflow-wrap: anywhere; transition: color .2s; }
.forum-row-last a { color: inherit; }
/* Ungelesen: volle Helligkeit. Gelesen: Titel wird grauer – unaufdringlich, ohne Punkte oder Zähler. */
.forum-row.is-unread .forum-row-title { color: var(--text); }
.forum-row.is-read .forum-row-title { color: var(--muted); font-weight: 600; }
.forum-section-head h2.is-read { color: var(--muted); }
.forum-row-title:hover { color: var(--primary); }
@media (max-width: 760px) {
  .forum-row { grid-template-columns: 1fr; }
  .forum-row-count, .forum-row-last br { display: none; }
}
.forum-mod { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 8px 14px 0; }
.forum-posts { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.forum-post { padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.forum-post.is-mine { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
.forum-post.is-new { box-shadow: inset 3px 0 0 var(--primary); }
.forum-post.is-deleted { opacity: .75; }
.forum-post-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.forum-post-head time { margin-left: auto; }
.forum-post-gone { margin: 8px 0 0; }
.forum-original { margin-top: 8px; }
.forum-original summary { cursor: var(--cur-pointer); }
.forum-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.forum-post-actions { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; }
.forum-post-actions form { margin: 0; }
.forum-post-actions a { font-size: .85rem; }
.link-btn-muted { color: var(--muted); }

/* Team-Beitrag (<admin>, <dev>, <mod>): abgerundeter Kasten in der Rollenfarbe mit Glitch-Effekt */
.role-say {
  --role: #22e07a;
  position: relative; margin: 12px 0; padding: 14px 14px 10px; border-radius: 12px;
  border: 1px solid var(--role); background: color-mix(in srgb, var(--role) 9%, transparent);
  box-shadow: 0 0 14px -6px var(--role); animation: role-say-glitch 4.2s steps(1) infinite;
}
.role-say-admin { --role: #ff3b4e; }
.role-say-mod { --role: #ff9f1c; }
.role-say > :last-child { margin-bottom: 0; }
.role-say-label {
  position: absolute; top: -9px; left: 12px; padding: 0 6px; border-radius: 4px;
  font: 800 .62rem/1.5 ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .1em;
  color: var(--role); background: var(--surface); border: 1px solid var(--role); text-shadow: 0 0 6px color-mix(in srgb, var(--role) 70%, transparent);
}
.role-say-label::before, .role-say-label::after { content: attr(data-text); position: absolute; left: 0; right: 0; top: 0; padding: 0 6px; opacity: 0; pointer-events: none; }
.role-say-label::before { color: #6ff; animation: role-glitch-a 4.2s steps(1) infinite; }
.role-say-label::after { color: #f6f; animation: role-glitch-b 4.2s steps(1) infinite; }
@keyframes role-say-glitch {
  0%, 86%, 96%, 100% { transform: none; box-shadow: 0 0 14px -6px var(--role); }
  88% { transform: translateX(1px); box-shadow: -2px 0 0 rgba(102, 255, 255, .5), 2px 0 0 rgba(255, 102, 255, .5); }
  91% { transform: translateX(-1px); box-shadow: 2px 0 0 rgba(102, 255, 255, .5), -2px 0 0 rgba(255, 102, 255, .5); }
  94% { transform: none; box-shadow: 0 0 20px -4px var(--role); }
}
.chip-role { font-family: ui-monospace, Consolas, monospace; }
.chip-role-dev { color: #22e07a; }
.chip-role-admin { color: #ff3b4e; }
.chip-role-mod { color: #ff9f1c; }
@media (prefers-reduced-motion: reduce) {
  .role-say, .role-say-label::before, .role-say-label::after { animation: none; }
}

/* Bereich bearbeiten: Abstand zwischen "Speichern" und "Bereich löschen" */
.forum-cat-delete { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Forum: gleichmäßige Abstände in den Listen-Karten */
.forum-section { padding-top: 10px; padding-bottom: 10px; }
.forum-section-head { padding-top: 8px; }
.forum-list:first-child > .forum-row:first-child { border-top: 0; } /* keine Linie über der ersten Zeile */
.forum-empty { margin: 0; padding: 12px 4px; }

/* Forum: rechte Spalte ("letzter Beitrag") – der Titel bleibt einzeilig und wird mit … gekürzt */
.forum-row-last { min-width: 0; }
.forum-row-last a { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-row-last br { display: none; }

/* Handel: Markt-Filter, neue Geschäfte */

/* Wett-Gruppen */
.tag-group { background: var(--color-accent-800); color: var(--color-accent-200); }
.bet-section { margin: 4px 0 14px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.bet-section-empty { margin: 0 0 8px; }
.bet-groups { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--color-accent-800); }
.bet-section-group { color: var(--color-accent-300); }
.bet-group-note { margin: 6px 0 0; }
.group-box { padding: 12px 14px; margin: 0 0 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); }
.group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.group-members { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.group-members li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.group-members form, .group-box > form { margin: 0; }
.group-add { display: flex; gap: 8px; align-items: center; margin-bottom: 8px !important; }
.group-add select { flex: 1; min-width: 0; height: 36px; min-height: 0; padding: 4px 10px; }
.group-new { margin-top: 14px; }

/* Konto: Reiter und Abschnittstitel */
.account-tabs { flex-wrap: wrap; margin-bottom: 18px; }
.section-title { margin: 22px 0 10px; font-size: 1.05rem; }
.bet-delete { margin: 0; display: inline-flex; }

/* ========== Statistik (Admin/Dev) ========== */
/* Kategorische Palette in fester Reihenfolge, je Modus geprüft (Farbsehschwäche-Abstand, Kontrast) */
:root {
    --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
    --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
    --marker-setting: #fbbf24; --marker-patch: #94a3b8;
}

/* Kopf: Titel, Beschreibung des Bereichs, Zeitraum */
.stats-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: 16px; }
.stats-hero h1 { margin: 0 0 4px; }
.stats-hero p { margin: 0; max-width: 62ch; }
.stats-period { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.stats-period-main { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
@media (max-width: 640px) { .stats-period { align-items: flex-start; } }
.stats-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stats-icon circle[r="1.3"] { fill: currentColor; stroke: none; }

/* Werkzeugleiste: Bereiche, darunter Zeitraum, Suche und Menüs */
.stats-toolbar { margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.stats-sections {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.stats-sections::-webkit-scrollbar { display: none; }
@media (max-width: 900px) { .stats-sections { display: flex; } }
.stats-section {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-weight: 600; font-size: .92rem; white-space: nowrap; transition: background .15s, color .15s;
}
.stats-section:hover { text-decoration: none; color: var(--text); background: var(--surface-2); }
.stats-section.active { color: var(--text); background: var(--primary-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 35%, transparent); }
.stats-section.active .stats-icon { color: var(--primary); }
.stats-toolbar-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 10px 12px; border-top: 1px solid var(--border);
}
.stats-toolbar-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stats-toolbar-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.stats-toolbar-actions { margin-left: auto; }
.stats-toolbar .btn-sm { display: inline-flex; align-items: center; gap: 6px; }
.stats-range { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.stats-range a { padding: 5px 12px; border-radius: 8px; color: var(--muted); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.stats-range a:hover { text-decoration: none; color: var(--text); }
.stats-range a.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.stats-count { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--marker-setting); color: var(--surface); font-size: .75rem; line-height: 18px; text-align: center; }

/* Suche nach einem Mitglied */
.stats-member-pick { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; max-width: 460px; }
.stats-member-pick input[type="search"] { flex: 1; min-width: 0; min-height: 36px; padding: 6px 12px; }

/* Aufklappmenüs (Export, Änderungen) */
.stats-menu { position: relative; }
.stats-menu > summary { list-style: none; }
.stats-menu > summary::-webkit-details-marker { display: none; }
.stats-menu-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(320px, calc(100vw - 32px)); padding: 8px;
  display: flex; flex-direction: column; gap: 2px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); box-shadow: var(--shadow);
}
.stats-menu-wide { width: min(520px, calc(100vw - 32px)); max-height: 60vh; overflow-y: auto; padding: 12px; }
.stats-menu-wide > p { margin: 0 0 10px; }
.stats-menu-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.stats-menu-item:hover { text-decoration: none; background: var(--surface-2); }
.stats-menu-hint { padding: 6px 10px 2px; border-top: 1px solid var(--border); margin-top: 4px; }

/* Sprungleiste zu den Abschnitten */
.stats-subnav {
  position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none;
  margin: -8px -4px 12px; padding: 8px 4px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(6px);
}
.stats-subnav::-webkit-scrollbar { display: none; }
.stats-subnav > span { flex: none; margin-right: 4px; }
.stats-subnav a { flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .85rem; font-weight: 600; white-space: nowrap; }
.stats-subnav a:hover { text-decoration: none; color: var(--text); border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); }
/* Protokolle im Panel: Werkzeugleiste wie in der Statistik */
.log-toolbar { margin-bottom: 12px; }
.log-toolbar .stats-toolbar-row:first-child { border-top: 0; }
.log-toolbar .stats-toolbar-row { justify-content: flex-start; align-items: flex-end; }
.log-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.log-field select, .log-field input { min-height: 36px; padding: 6px 10px; }
.log-field-grow { flex: 1 1 180px; max-width: 280px; }
.log-check { align-self: center; margin-top: 18px; }
.log-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.log-count { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.log-player { margin: -4px 0 10px; }

/* Themenblock */
.stats-block { margin: 8px 0 36px; scroll-margin-top: 120px; }
.stats-block > .card, .stats-block > details.card { margin: 0 0 12px; }
.stats-block-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-left: 4px solid var(--primary); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.stats-block-export { flex: none; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-size: .82rem; font-weight: 600; white-space: nowrap; }
.stats-block-export:hover { text-decoration: none; color: var(--text); }
.stats-block-head h2 { margin: 0 0 2px; font-size: 1.3rem; }
.stats-block-head p { margin: 0; }
.stats-block h3 { margin: 0 0 6px; font-size: 1rem; }
.stats-block h4 { margin: 0 0 8px; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* Kennzahlen: 4 pro Zeile, mobil 2 */
.stats-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.stats-kpis-3, .stats-kpis-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats-kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 900px) { .stats-kpis, .stats-kpis-3, .stats-kpis-5, .stats-kpis-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stats-kpi { display: flex; flex-direction: column; gap: 4px; margin: 0; min-width: 0; color: inherit; }
a.stats-kpi:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.stats-kpi .stat-value { font-size: 1.4rem; }
@media (max-width: 520px) { .stats-kpi .stat-value { font-size: 1.1rem; } }
.stats-delta { font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--text); }
.stats-delta .muted { font-size: .75rem; }
.stats-delta-none { color: var(--muted); }
.stats-delta > span[aria-hidden] { color: var(--muted); font-size: .7rem; }
.stats-info {
  display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 2px; border-radius: 50%;
  border: 1px solid var(--muted); color: var(--muted); font-size: .65rem; font-weight: 700; font-style: italic; text-transform: none; letter-spacing: 0;
  cursor: help; vertical-align: 1px;
}

/* Diagramme */
.stats-charts { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }
@media (max-width: 900px) { .stats-charts { grid-template-columns: 1fr; } }
.stats-chart-card { margin: 0; min-width: 0; }
.stats-chart-card.is-wide { grid-column: 1 / -1; }
.stats-chart { position: relative; }
.stats-svg { display: block; width: 100%; touch-action: pan-y; overflow: visible; }
.stats-svg .grid { stroke: var(--border); stroke-dasharray: 3 4; }
.stats-svg .baseline { stroke: var(--muted); stroke-opacity: .5; }
.stats-svg .axis { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.stats-svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.stats-svg .dot { stroke: var(--surface); stroke-width: 2; }
.stats-svg .cursor { stroke: var(--muted); stroke-dasharray: 3 3; }
.stats-svg .marker { stroke-width: 1.5; stroke-dasharray: 4 3; }
.stats-svg .marker-label { font-size: 10px; font-weight: 700; font-family: var(--font); stroke: none; }
.stats-svg .marker-einstellung { stroke: var(--marker-setting); fill: var(--marker-setting); }
.stats-svg .marker-patch { stroke: var(--marker-patch); fill: var(--marker-patch); }
.s1 { --c: var(--series-1); } .s2 { --c: var(--series-2); } .s3 { --c: var(--series-3); } .s4 { --c: var(--series-4); }
.s5 { --c: var(--series-5); } .s6 { --c: var(--series-6); } .s7 { --c: var(--series-7); } .s8 { --c: var(--series-8); }
.stats-svg .line { stroke: var(--c); }
.stats-svg .col, .stats-svg .dot { fill: var(--c); }
.stats-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; list-style: none; margin: 8px 0 0; padding: 0; font-size: .85rem; color: var(--muted); }
.stats-legend li, .stats-tip span { display: inline-flex; align-items: center; gap: 6px; }
.key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.stats-tip {
  position: absolute; top: 0; z-index: 2; pointer-events: none; display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow); font-size: .85rem; white-space: nowrap;
}
.stats-tip .tip-sum { border-top: 1px solid var(--border); padding-top: 2px; font-weight: 700; }
.stats-tip .tip-marker { color: var(--muted); }
.stats-table-toggle { margin-top: 6px; }
.stats-table-toggle summary, .stats-collapsed summary { color: var(--muted); cursor: var(--cur-pointer); }
.stats-collapsed summary strong { color: var(--text); }
.stats-collapsed[open] summary { margin-bottom: 8px; }
.stats-empty-note { margin: 0 0 12px; padding-left: 16px; }
.stats-warn { color: var(--warn); }

/* Balken (Bereichsnutzung, Geldfluss, Abschlussquoten) */
.stats-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.stats-hbars li { display: grid; grid-template-columns: minmax(100px, 11rem) 1fr auto; gap: 10px; align-items: center; font-size: .9rem; }
.stats-hbar-track { height: 10px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.stats-hbar { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }
.stats-hbar-in { background: var(--ja); }
.stats-hbar-out { background: var(--nein); }
.stats-hbar-value { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stats-flow-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 10px; }
@media (max-width: 900px) { .stats-flow-cols { grid-template-columns: 1fr; } }

/* Ländervergleich Gini */
.stats-gini { margin: 10px 0; gap: 4px; }
.stats-gini .stats-hbar { background: var(--muted); opacity: .55; }
.stats-gini li.is-self { font-weight: 700; }
.stats-gini li.is-self .stats-hbar { background: var(--primary); opacity: 1; }
.stats-gini li.is-self .stats-hbar-value { color: var(--text); }

/* Drop-Raten */
.stats-ratio { position: relative; display: block; width: 100%; min-width: 80px; height: 10px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.stats-ratio::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .6; }
.stats-ratio-bar { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }
.stats-ratio-warn { background: var(--warn); }
.stats-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; }
.stats-badge-ok { color: var(--ja); }
.stats-badge-warn { color: var(--warn); }
.stats-badge-muted { color: var(--muted); }
.stats-badge-setting { color: var(--marker-setting); }

/* Heatmap */
.stats-heat { border-collapse: separate; border-spacing: 2px; font-size: .72rem; color: var(--muted); }
.stats-heat th { font-weight: 600; padding: 0 4px; text-align: center; }
.stats-heat td { width: 22px; min-width: 14px; height: 18px; border-radius: 3px; background: color-mix(in srgb, var(--series-1) calc(var(--heat) * 100%), var(--surface-2)); }

/* Zeitleiste der Änderungen */
.stats-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.stats-timeline li { display: flex; gap: 12px; align-items: flex-start; }
.stats-timeline ul { margin: 4px 0 0; padding-left: 18px; color: var(--muted); }
.stats-timeline code { overflow-wrap: anywhere; }

/* ---------- Grading-Shop (views/grading.ejs, public/js/grading.js) ---------- */
:root {
  --gr-back: url('/img/tcg-backs/pre-season.webp') center / cover no-repeat;
}
.admin-gr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 14px; margin-bottom: 14px; }
.admin-gr-prices { margin-bottom: 14px; }
.admin-gr-prices input { width: 100%; max-width: 110px; text-align: right; }
.admin-gr-calc { margin: 4px 0 16px; }
.admin-gr-calc .table-wrap { margin-bottom: 8px; }
.admin-gr-calc-table td.num, .admin-gr-calc-table th.num { white-space: nowrap; }
.gr-kicker { margin: 0 0 4px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.gr-ok { color: var(--ja); font-weight: 600; }
.gr-bad { color: var(--nein); font-weight: 600; }

/* Vorstellung */
.gr-hero {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: center; overflow: hidden;
  background: radial-gradient(circle at 82% 45%, color-mix(in srgb, var(--primary) 24%, transparent), transparent 60%), var(--surface);
}
.gr-hero h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; }
.gr-terms { padding-left: 18px; }
.gr-terms li { margin: 4px 0; }
.gr-hire { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 14px; }
.gr-hero-card { display: grid; place-items: center; min-height: 330px; perspective: 1000px; }
.gr-spin { position: relative; width: 190px; aspect-ratio: 720 / 1008; transform-style: preserve-3d; animation: gr-spin 9s linear infinite; }
.gr-spin-front, .gr-spin-back {
  position: absolute; inset: 0; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-size: cover; box-shadow: 0 22px 40px rgba(0, 0, 0, .35);
}
.gr-spin-back { transform: rotateY(180deg); background: var(--gr-back); }
@keyframes gr-spin { from { transform: rotateX(10deg) rotateY(0); } to { transform: rotateX(10deg) rotateY(360deg); } }
@media (max-width: 760px) {
  .gr-hero { grid-template-columns: 1fr; }
  .gr-hero-card { order: -1; min-height: 270px; }
}

/* Aufteilung: Arbeitstisch links, Shop rechts */
.gr-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.gr-main, .gr-side { display: grid; gap: 16px; min-width: 0; }
.gr-main > .card, .gr-side > .card { margin: 0; }
@media (max-width: 960px) { .gr-layout { grid-template-columns: 1fr; } }

.gr-ticket { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.gr-ticket-label { padding: 2px 10px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gr-rar { padding: 2px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: .8rem; font-weight: 700; }
.gr-rar-gold { background: #fde68a; border-color: #d4a017; color: #713f12; }
.gr-rar-holo, .gr-rar-bockhaber, .gr-rar-glitch, .gr-rar-icon { background: linear-gradient(90deg, #f0abfc, #93c5fd, #86efac, #fde68a); border-color: transparent; color: #1e1b4b; }

/* Die Bühne: Schneidematte unter einer Lampe */
.gr-stage {
  position: relative; height: clamp(440px, 64vh, 600px); border-radius: 12px; overflow: hidden; isolation: isolate;
  touch-action: none; user-select: none; -webkit-user-select: none; outline: none;
  background-color: #0f3a33;
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(255, 243, 214, .24), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0, 0, 0, .45), transparent 60%),
    linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px, 28px 28px;
  background-position: center, center, center, center;
}
.gr-stage:focus-visible { box-shadow: 0 0 0 3px var(--primary); }
/* Maus-Werkzeug: Drehen = Hand, Putzen = Schwamm (Kreis zeigt die Reichweite) */
.gr-stage.mode-rotate { cursor: var(--cur-grab, grab); }
.gr-stage.mode-rotate.is-pressed { cursor: var(--cur-grabbing, grabbing); }
.gr-stage.mode-clean {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='20' cy='20' r='17' fill='rgba(255,255,255,.18)' stroke='white' stroke-width='2' stroke-dasharray='4 3'/%3E%3Ccircle cx='20' cy='20' r='2' fill='white'/%3E%3C/svg%3E") 20 20, crosshair;
}
.gr-modes { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 8px; }
.gr-mode {
  display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 14px 6px 10px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .55); color: #fff; font: 600 .9rem var(--font);
  cursor: var(--cur-pointer, pointer);
}
.gr-mode:hover { background: rgba(0, 0, 0, .7); }
.gr-mode.is-on { background: var(--primary); border-color: #5eead4; box-shadow: 0 0 0 3px rgba(94, 234, 212, .25); }
.gr-mode span { font-size: 1.1rem; }
.gr-lamp {
  position: absolute; top: -30px; left: 50%; width: 220px; height: 54px; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse, rgba(255, 250, 230, .95), rgba(255, 240, 200, .25) 45%, transparent 70%); filter: blur(5px);
}
/* Lupe: --z vergrößert die echte Kartengröße (bleibt scharf), verschoben wird per translate (grading.js) */
.gr-zoom {
  position: absolute; inset: 0; display: grid; place-items: center; perspective: calc(1300px * var(--z, 1));
  transition: transform .2s ease-out;
}
.gr-shadow {
  position: absolute; left: 50%; bottom: 6%; width: 240px; height: 34px; pointer-events: none;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); filter: blur(4px);
}
.gr-obj {
  --cw: calc(min(290px, 60vw) * var(--z, 1));
  position: relative; width: var(--cw); aspect-ratio: 720 / 1008; transform-style: preserve-3d;
  animation: gr-float 5s ease-in-out infinite; transition: width .2s ease-out;
}
@keyframes gr-float { 50% { translate: 0 -7px; } }
.gr-card { position: absolute; inset: 0; transform-style: preserve-3d; }
.gr-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4.6% / 3.3%; background: #111; isolation: isolate;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .35);
}
.gr-back { transform: rotateY(180deg); background: var(--gr-back); }
.gr-card:not(.show-back) .gr-back, .gr-card.show-back .gr-front { pointer-events: none; }
.gr-back .gr-spot { filter: brightness(2.3) saturate(.8); }
.gr-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
/* Zentrierung (#73): Kartenbild im Rand in Seltenheitsfarbe – 3 % der Breite pro Seite (oben/unten im
   Kartenformat 720 × 1008 entsprechend 2,14 % der Höhe), ungleich verteilt nach --cx/--cy */
.gr-front { background: var(--rar, #111); }
.gr-front .gr-img {
  /* Bilder lassen sich nicht über left/right stauchen: Größe fest (Ränder zusammen immer 6 % bzw. 4,28 %), nur der Startpunkt wandert */
  position: absolute; width: 94%; height: 95.72%; border-radius: 2%;
  left: calc(3% * (1 + var(--cx, 0))); top: calc(2.14% * (1 - var(--cy, 0)));
}
.gr-card.is-revealed.is-offcenter .gr-front { box-shadow: inset 0 0 0 3px #ef4444, 0 0 0 1px rgba(0, 0, 0, .3), 0 18px 40px rgba(0, 0, 0, .35); }
.gr-glare {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 48%);
}
.gr-holo {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: calc(var(--holo, 0) * .2); /* schwach, damit Kratzer sichtbar bleiben (#90) */
  background: linear-gradient(115deg, #ff0080, #ffd700, #00ffa3, #00cfff, #a259ff, #ff0080, #ffd700);
  background-size: 400% 400%; background-position: var(--gx, 50%) var(--gy, 50%);
}
.gr-card.is-shiny .gr-front::after, .gr-card.is-shiny .gr-back::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%);
  background-size: 250% 100%; animation: gr-shine 1.1s ease-out 1 forwards;
}
@keyframes gr-shine { from { background-position: 130% 0; } to { background-position: -40% 0; } }

/* Mängel (nur Vorderseite) */
.gr-defects { position: absolute; inset: 0; pointer-events: none; }
.gr-scratch {
  position: absolute; height: 2px; transform-origin: 0 50%; opacity: var(--scr, 0);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .95) 18%, rgba(220, 235, 255, .8) 75%, transparent);
  /* hauchdünner, halbdurchsichtiger dunkler Rand: auf hellem Holo sichtbar, aber nicht schwarz (#90) */
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .28), 0 0 3px rgba(255, 255, 255, .7);
}
/* Farbe der Ecken- und Kantenmacken: --dent (unter der UV-Lampe grün) */
.gr-corner, .gr-nick { --dent: 255, 255, 255; transition: filter .25s ease, scale .25s ease; }
.gr-corner { position: absolute; width: 8%; aspect-ratio: 1; background: radial-gradient(circle at var(--cx) var(--cy), rgba(var(--dent), .95) 0 24%, rgba(var(--dent), .5) 38%, transparent 62%); }
.gr-corner-0 { top: 0; left: 0; --cx: 0%; --cy: 0%; }
.gr-corner-1 { top: 0; right: 0; --cx: 100%; --cy: 0%; }
.gr-corner-2 { bottom: 0; right: 0; --cx: 100%; --cy: 100%; }
.gr-corner-3 { bottom: 0; left: 0; --cx: 0%; --cy: 100%; }
.gr-nick { position: absolute; }
.gr-nick-0, .gr-nick-2 { width: 5%; height: 1.8%; translate: -50% 0; }
.gr-nick-1, .gr-nick-3 { width: 2.6%; height: 3.6%; translate: 0 -50%; }
.gr-nick-0 { top: 0; background: radial-gradient(ellipse at 50% 0, rgb(var(--dent)) 0 38%, transparent 72%); }
.gr-nick-2 { bottom: 0; background: radial-gradient(ellipse at 50% 100%, rgb(var(--dent)) 0 38%, transparent 72%); }
.gr-nick-1 { right: 0; background: radial-gradient(ellipse at 100% 50%, rgb(var(--dent)) 0 38%, transparent 72%); }
.gr-nick-3 { left: 0; background: radial-gradient(ellipse at 0 50%, rgb(var(--dent)) 0 38%, transparent 72%); }
.gr-crease {
  position: absolute; left: -10%; top: 47%; width: 120%; height: 3px; transform: rotate(-27deg); opacity: .7;
  background: linear-gradient(rgba(255, 255, 255, .6), rgba(0, 0, 0, .45));
}

/* Flecken */
.gr-spot {
  position: absolute; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  opacity: var(--hp, 1); transition: opacity .15s;
}
.gr-spot-fleck { border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; background: radial-gradient(circle at 45% 40%, rgba(86, 56, 20, .9), rgba(86, 56, 20, .65) 45%, rgba(86, 56, 20, 0) 70%); }
.gr-spot-kaffee { background: radial-gradient(circle, rgba(120, 72, 30, .12) 0 44%, rgba(120, 72, 30, .8) 52%, rgba(120, 72, 30, .35) 60%, rgba(120, 72, 30, 0) 68%); }
.gr-spot-staub {
  background-image: radial-gradient(rgba(214, 204, 184, .95) 1.3px, transparent 1.8px); background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%); mask-image: radial-gradient(circle, #000 35%, transparent 70%);
}
.gr-spot-finger {
  border-radius: 45% 45% 50% 50%;
  background: repeating-radial-gradient(ellipse 60% 75% at 50% 58%, rgba(70, 58, 44, .6) 0 1.2px, transparent 1.2px 3.6px);
  -webkit-mask-image: radial-gradient(ellipse 46% 56% at 50% 55%, #000 55%, transparent 76%); mask-image: radial-gradient(ellipse 46% 56% at 50% 55%, #000 55%, transparent 76%);
}
.gr-spot.is-clean { opacity: 0; pointer-events: none; transition: opacity .4s; }
.gr-foam {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 35%, #fff, rgba(255, 255, 255, .5) 60%, transparent 70%);
  scale: var(--s, 1); animation: gr-foam .7s ease-out forwards;
}
@keyframes gr-foam { to { transform: translateY(-26px); opacity: 0; } }

/* Slab (Schutzhülle): ein Block aus Vorder- und Rückplatte plus vier Seitenwänden. Alles hängt an .gr-slabbox,
   damit sich die Hülle als Ganzes mit der Karte dreht; die Karte liegt genau in der Mitte (z = 0). */
.gr-slabbox {
  --st: calc(var(--cw) * .045); /* Dicke der Hülle */
  --sr: calc(var(--cw) * .035); /* Eckenradius */
  position: absolute; left: -7%; right: -7%; top: -26%; bottom: -6%; pointer-events: none; opacity: 0;
  transform-style: preserve-3d; transform: translateY(-150%);
  transition: transform .9s cubic-bezier(.2, 1.25, .4, 1), opacity .3s;
}
.gr-obj.is-slabbed .gr-slabbox { opacity: 1; transform: none; }
.gr-slab {
  position: absolute; inset: 0; border-radius: var(--sr); container-type: inline-size;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .16) 70%, rgba(255, 255, 255, .04));
  border: 2px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .08), inset 0 0 22px rgba(255, 255, 255, .18);
  transform: translateZ(calc(var(--st) / 2));
}
.gr-slab-back { transform: rotateY(180deg) translateZ(calc(var(--st) / 2)); }
/* Seitenwände: von beiden Seiten sichtbar, so wirkt die Hülle auch hochkant wie ein fester Block */
.gr-slab-edge { position: absolute; background: linear-gradient(90deg, rgba(255, 255, 255, .55), rgba(220, 235, 245, .3), rgba(255, 255, 255, .55)); }
.gr-slab-edge-l, .gr-slab-edge-r { top: var(--sr); bottom: var(--sr); width: var(--st); margin-left: calc(var(--st) / -2); }
.gr-slab-edge-l { left: 0; transform: rotateY(90deg); }
.gr-slab-edge-r { left: 100%; transform: rotateY(90deg); }
.gr-slab-edge-t, .gr-slab-edge-b { left: var(--sr); right: var(--sr); height: var(--st); margin-top: calc(var(--st) / -2); background: linear-gradient(rgba(255, 255, 255, .55), rgba(220, 235, 245, .3), rgba(255, 255, 255, .55)); }
.gr-slab-edge-t { top: 0; transform: rotateX(90deg); }
.gr-slab-edge-b { top: 100%; transform: rotateX(90deg); }
.gr-slab-label {
  position: absolute; left: 5%; right: 5%; top: 3%; height: 14%; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 6%; border-radius: 6px; background: linear-gradient(#ffffff, #e5e9ee); color: #0f172a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); font: 700 3.6cqw/1.2 var(--font);
}
.gr-slab-info { display: grid; min-width: 0; }
.gr-slab-info strong { color: #0f766e; letter-spacing: .1em; }
.gr-slab-info span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gr-slab-word { color: #b45309; }
.gr-slab-grade { font-size: 11cqw; font-weight: 900; line-height: 1; color: #0f766e; }
.gr-slab-label-back { justify-content: space-between; }
.gr-slab-cert { display: grid; }
.gr-slab-cert strong { color: #0f766e; letter-spacing: .1em; }
.gr-slab-cert span { color: #475569; font-variant-numeric: tabular-nums; }
.gr-slab-barcode {
  flex: none; width: 36%; height: 64%;
  background: repeating-linear-gradient(90deg, #0f172a 0 .6cqw, transparent .6cqw 1cqw, #0f172a 1cqw 1.3cqw, transparent 1.3cqw 2cqw, #0f172a 2cqw 3cqw, transparent 3cqw 3.4cqw);
}
.gr-obj.is-sent {
  transform: translateY(-170%) rotateZ(-24deg) rotateY(520deg) scale(.35) !important; opacity: 0;
  transition: transform .85s cubic-bezier(.55, -0.25, .8, .45), opacity .85s ease-in;
}

/* Werkzeuge und Hinweis auf der Bühne */
.gr-hint {
  position: absolute; left: 50%; bottom: 12px; translate: -50% 0; max-width: calc(100% - 24px); padding: 6px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .5); color: #fff; font-size: .82rem; text-align: center; pointer-events: none; transition: opacity .6s;
}
.gr-hint.is-gone { opacity: 0; transition-delay: 1.5s; }

/* Schritte und Bedienfelder */
.gr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0; padding: 0; list-style: none; counter-reset: grs; }
.gr-steps li {
  flex: 1; min-width: 110px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); font-size: .9rem; font-weight: 600; text-align: center; counter-increment: grs;
}
.gr-steps li::before { content: counter(grs) ". "; }
.gr-steps li.is-active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.gr-steps li.is-done { color: var(--ja); }
.gr-steps li.is-done::before { content: "✓ "; }
.gr-panel > p:first-child { margin-top: 0; }
.gr-guide { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.gr-guide li { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: .85rem; }
.gr-grades { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 10px 0 6px; }
@media (max-width: 560px) { .gr-grades { grid-template-columns: repeat(5, 1fr); } }
.gr-grade {
  min-height: 44px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text);
  font-size: 1.05rem; font-weight: 800; cursor: var(--cur-pointer, pointer); transition: transform .12s, background .12s;
}
.gr-grade:hover:not(:disabled) { transform: translateY(-2px); }
.gr-grade.is-on { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 40%, transparent); }
.gr-grade:disabled:not(.is-on) { opacity: .45; }
.gr-meter {
  position: relative; height: 28px; margin: 10px 0 12px; overflow: hidden; border-radius: 999px; border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--nein-soft), var(--warn-soft) 30%, var(--ja-soft) 42% 58%, var(--warn-soft) 70%, var(--nein-soft));
}
.gr-meter-zone { position: absolute; top: 0; bottom: 0; left: 42%; width: 16%; background: color-mix(in srgb, var(--ja) 45%, transparent); }
.gr-meter-needle { position: absolute; top: -2px; bottom: -2px; left: 0; width: 4px; margin-left: -2px; border-radius: 2px; background: var(--text); }
.gr-seal-result { min-height: 1.4em; margin: 10px 0 0; }
.gr-grade.is-right { box-shadow: 0 0 0 3px var(--ja); }
.gr-verdict { margin: 12px 0; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); }
.gr-verdict.is-right { border-color: var(--ja); background: var(--ja-soft); }
.gr-verdict.is-close { border-color: var(--warn); background: var(--warn-soft); }
.gr-verdict.is-wrong { border-color: var(--nein); background: var(--nein-soft); }
/* Auflösung nach dem Benoten: alle Mängel rot markiert, Kratzer voll sichtbar */
.gr-card.is-revealed .gr-scratch { opacity: 1; background: #ef4444; box-shadow: 0 0 6px #ef4444; mix-blend-mode: normal; }
.gr-card.is-revealed .gr-corner, .gr-card.is-revealed .gr-nick { outline: 2px solid #ef4444; outline-offset: 1px; border-radius: 50%; animation: gr-pulse 1s ease-in-out infinite; }
.gr-card.is-revealed .gr-crease { background: #ef4444; opacity: .9; }
@keyframes gr-pulse { 50% { outline-color: rgba(239, 68, 68, .2); } }

/* Leerer Tisch, Tagesliste, Shop */
.gr-empty { padding: 40px 20px; text-align: center; }
.gr-empty h2 { margin-top: 0; }
.gr-done { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gr-done li { display: flex; align-items: center; gap: 10px; }
.gr-done img { flex: none; width: 40px; height: auto; border-radius: 4px; }
.gr-pay { margin-left: auto; color: var(--ja); white-space: nowrap; }
.gr-shop h2 { margin: 0; }
.gr-facts { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 12px 0 14px; }
.gr-facts dt { color: var(--muted); white-space: nowrap; }
.gr-facts dd { margin: 0; font-weight: 700; text-align: right; }
.gr-levels { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.gr-levels li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); }
.gr-levels li.is-done { border-color: color-mix(in srgb, var(--ja) 50%, var(--border)); background: color-mix(in srgb, var(--ja) 8%, transparent); }
.gr-levels li.is-done strong::before { content: "✓ "; color: var(--ja); }
.gr-levels li.is-next { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
@media (prefers-reduced-motion: reduce) {
  .gr-spin, .gr-obj { animation: none; }
}

/* ========== Admin-/Dev-Panel (nutzt Werkzeugleiste und Themenblöcke der Statistik) ========== */
.panel-sections { display: flex; }
.panel-sections .stats-section { flex: 1 1 0; }
.panel-section-link { flex: 0 1 auto !important; color: var(--muted); }
.panel-badge {
  display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--nein); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums;
}
.panel-badge-inline { vertical-align: 3px; margin-left: 4px; }
.panel-badge-muted { background: var(--surface-2); color: var(--muted); border: 1px solid var(--border); }
.panel-badge-warn { background: var(--warn); }

/* Übersicht: offene Aufgaben */
.panel-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.panel-task { display: flex; align-items: center; gap: 14px; margin: 0; }
.panel-task-count {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px;
  background: color-mix(in srgb, var(--nein) 14%, transparent); color: var(--nein); font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.panel-task-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.panel-done { display: flex; align-items: center; gap: 12px; margin: 0; }
.panel-done-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ja-soft); color: var(--ja); font-weight: 800;
}
.panel-link-card { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; color: var(--text); }
.panel-link-card:hover { text-decoration: none; border-color: color-mix(in srgb, var(--primary) 50%, var(--border)); }
.panel-link-card > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.panel-link-card .stats-icon { width: 22px; height: 22px; color: var(--primary); }
.panel-rights { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* Formulare und Zeilen */
.panel-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.panel-inline-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; } /* .form ist sonst eine Spalte */
.panel-inline-form .field { flex: 1 1 200px; max-width: 320px; }
.panel-inline-form .panel-field-sm { flex: 0 1 160px; }
/* Steuern im Admin-Panel: Handel und Broker je eine Gruppe */
.admin-tax-form .admin-tax-group { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; padding: 12px 16px 16px; border: 1px solid var(--border); border-radius: 8px; }
.admin-tax-form .admin-tax-group legend { padding: 0 6px; font-weight: 600; }
.admin-tax-form .admin-tax-group .field { flex: 0 1 180px; }
.panel-ban-form { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 12px; align-items: end; }
.panel-ban-form .panel-ban-reason { grid-column: 1 / -1; }
.panel-ban-form .btn { justify-self: start; }
@media (max-width: 640px) { .panel-ban-form { grid-template-columns: 1fr; } }
.panel-note { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--text); }

/* Passwortabfrage */
.reauth-dialog {
  border: 1px solid var(--border); border-radius: 16px; padding: 22px; background: var(--surface); color: var(--text);
  width: min(420px, 100vw - 24px); box-shadow: var(--shadow);
}
.reauth-dialog::backdrop { background: rgba(3, 6, 15, .7); backdrop-filter: blur(3px); }
.reauth-form { gap: 14px; }
.reauth-head { display: flex; gap: 12px; align-items: center; }
.reauth-head h2 { margin: 0; font-size: 1.15rem; }
.reauth-head p { margin: 2px 0 0; }
.reauth-icon {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
}
.reauth-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reauth-text { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-weight: 600; }
.reauth-actions { display: flex; justify-content: flex-end; gap: 8px; }
/* Wette: Rollen-Karte (Wettersteller/Schiedsrichter) */
.role-card { display: flex; flex-direction: column; gap: 8px; }
.role-card h2 { margin: 0; font-size: 20px; }
.role-text { margin: 0; font-size: 13px; color: var(--color-neutral-400); }
.role-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--color-bg); font-size: 12px; color: var(--color-neutral-500); }
.role-fee strong { font-size: 18px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.card-manage { background: linear-gradient(160deg, var(--color-surface), var(--color-bg)); }
.card-manage h2 { font-size: 17px; }
.resolve-form .side-option-sm { border-width: 1px; border-radius: var(--radius-md); background: transparent; }
.resolve-form .side-option-sm:has(input:checked) { background: color-mix(in srgb, var(--opt) 12%, transparent); }

/* Neue Wette (Redesign) */
.new-bet { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.new-bet-head h1 { margin: 0 0 10px; }
.new-bet-head p { margin: 0; color: var(--color-neutral-400); font-size: 15px; }
.new-bet-form { gap: 28px; }
.new-bet-form .field small { font-size: 12px; color: var(--color-neutral-500); }
.new-bet-form input[type="text"], .new-bet-form select, .new-bet-form input[type="datetime-local"] { min-height: 44px; }
.new-bet-form input[type="datetime-local"] { color-scheme: dark; }
.new-bet-form .type-picker { grid-template-columns: 1fr 1fr; }
.new-bet-form .type-option { border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-surface) 60%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); gap: 4px; }
.new-bet-form .type-option:hover { box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.new-bet-form .type-option:has(input:checked) { background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.new-bet-form .type-option-title { font-size: 14px; font-weight: 500; }
.new-bet-form .type-option-sub { font-size: 12px; color: var(--color-neutral-400); }
.new-bet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; align-items: start; }
.new-bet-submit { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.new-bet-submit p { margin: 0; font-size: 12px; color: var(--color-neutral-500); max-width: 360px; }
.new-bet-submit .btn { min-height: 46px; padding: 0 26px; font-size: 15px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 25%, transparent); }
@media (max-width: 480px) { .new-bet-form .type-picker { grid-template-columns: 1fr; } .new-bet-submit .btn { width: 100%; } }
/* Neue Wette als Assistent (public/js/app.js, [data-wizard]) */
.new-bet-head { display: flex; flex-direction: column; gap: 10px; }
.wizard-progress { display: flex; flex-direction: column; gap: 6px; }
.wizard-bar { display: block; height: 4px; border-radius: 999px; background: var(--color-neutral-800); overflow: hidden; }
.wizard-bar > span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width .25s ease; }
.wizard-q { display: block; margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text); }
.new-bet-form.is-wizard .wizard-step { min-height: 170px; display: flex; flex-direction: column; gap: 18px; }
.wizard-nav { display: flex; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.wizard-nav .btn { min-height: 44px; min-width: 120px; }
.wizard-nav [data-wizard-next] { margin-left: auto; }
.wizard-summary { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; padding: 14px 16px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.wizard-summary dt { font-size: 12px; color: var(--color-neutral-400); padding-top: 2px; }
.wizard-summary dd { margin: 0; display: flex; justify-content: space-between; gap: 10px; white-space: pre-line; overflow-wrap: anywhere; }
.wizard-edit { flex: none; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--color-accent-300); font: inherit; font-size: 12px; cursor: var(--cur-pointer, pointer); }
.wizard-edit:hover { text-decoration: underline; }
@media (max-width: 480px) { .wizard-summary { grid-template-columns: 1fr; gap: 2px; } .wizard-summary dd { margin-bottom: 8px; } .wizard-nav .btn { min-width: 0; flex: 1; } }

/* Rangliste (Redesign) */
.rang-page { display: flex; flex-direction: column; gap: 40px; }
.rang-page .page-head { margin: 0; }
.rang-page .leader-search input[type="search"] { width: min(260px, 70vw); height: 40px; }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: end; width: 100%; max-width: 900px; margin: 0 auto; }
.podium-place {
  --rk: #cfd3e5; position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px 22px;
  border-radius: var(--radius-lg); text-align: center; overflow: hidden; color: var(--text); text-decoration: none;
  background: linear-gradient(180deg, var(--color-surface), var(--color-bg)); box-shadow: 0 0 0 1px var(--color-neutral-800);
}
.podium-place:hover { color: var(--text); text-decoration: none; }
.podium-1 { --rk: #f2c14e; padding: 40px 16px 28px;
  background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--rk) 18%, transparent), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rk) 45%, transparent), 0 0 50px color-mix(in srgb, var(--rk) 12%, transparent); }
.podium-3 { --rk: #c99067; }
.podium-place.is-me:not(.podium-1) { box-shadow: 0 0 0 1px var(--color-accent-700); }
.podium-rank { position: absolute; top: 10px; left: 14px; font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: color-mix(in srgb, var(--rk) 35%, transparent); }
.podium-avatar { width: 56px; height: 56px; border-radius: 8px; }
.podium-1 .podium-avatar { width: 72px; height: 72px; }
.podium-name { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.podium-total { font-size: 19px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.podium-1 .podium-total { font-size: 24px; }
.podium-me { font-size: 11px; color: var(--color-accent-300); }
.rang-table .leaderboard { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.rang-table .leaderboard th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--color-neutral-500); border: 0; padding: 0 16px 10px; background: none; }
.rang-table .leaderboard td { padding: 14px 16px; font-size: 14px; border: 0; box-shadow: inset 0 -1px 0 var(--color-divider); }
.rang-table .leaderboard td.num:not(:nth-child(3)) { color: var(--color-neutral-300); }
.rang-table .leaderboard td.num:nth-child(5), .rang-table .leaderboard td.num:nth-child(6) { color: var(--color-neutral-500); }
.rang-table .leaderboard td strong { font-weight: 500; }
.rang-table .leaderboard .rank { font-weight: 500; color: var(--color-neutral-400); }
.rang-table .leaderboard .rank-1 { color: #f2c14e; }
.rang-table .leaderboard .rank-2 { color: #cfd3e5; }
.rang-table .leaderboard .rank-3 { color: #c99067; }
.rang-table .leaderboard td a { font-weight: 500; }
.rang-table .leaderboard tr.me td { background: color-mix(in srgb, var(--color-accent) 8%, transparent); box-shadow: inset 0 1px 0 var(--color-accent-700), inset 0 -1px 0 var(--color-accent-700); }
.rang-table .leaderboard tr.me td:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: inset 1px 1px 0 var(--color-accent-700), inset 0 -1px 0 var(--color-accent-700); }
.rang-table .leaderboard tr.me td:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: inset -1px 1px 0 var(--color-accent-700), inset 0 -1px 0 var(--color-accent-700); }
@media (max-width: 640px) {
  .podium { gap: 8px; }
  .podium-place { padding: 22px 8px 16px; }
  .podium-1 { padding: 30px 8px 20px; }
  .podium-rank { font-size: 30px; top: 8px; left: 10px; }
  .podium-avatar { width: 40px; height: 40px; }
  .podium-1 .podium-avatar { width: 52px; height: 52px; }
  .podium-name { font-size: 13px; }
  .podium-total { font-size: 14px; }
  .podium-1 .podium-total { font-size: 16px; }
  .rang-table .leaderboard td, .rang-table .leaderboard th { padding-left: 10px; padding-right: 10px; }
}

/* Broker (Redesign) */
.coin-head { align-items: flex-end; gap: 20px; margin-bottom: 28px; }
.coin-id { gap: 16px; }
.coin-id svg, .coin-id img { width: 56px; height: 56px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--color-accent) 40%, transparent)); }
.coin-id h1 { font-size: clamp(28px, 1.3rem + 1.4vw, 36px); }
.coin-symbol { font-size: 18px; font-weight: 400; color: var(--color-neutral-500); }
.coin-id .live { font-size: 12px; color: var(--color-neutral-400); }
.live-dot { width: 6px; height: 6px; background: oklch(0.8 0.14 155); box-shadow: 0 0 8px oklch(0.8 0.14 155); animation: none; }
.coin-price { font-size: clamp(32px, 1.6rem + 2vw, 44px); font-weight: 500; letter-spacing: -.03em; line-height: 1; padding: 0; }
.coin-change { font-size: 13px; font-weight: 500; }
.coin-change .muted { font-weight: 400; color: var(--color-neutral-500); }
.coin-layout { gap: 24px; }
@media (min-width: 960px) { .coin-layout { grid-template-columns: minmax(0, 1fr) 340px; } .coin-main { display: flex; flex-direction: column; gap: 24px; } }
.coin-main > .chart-card { padding: 22px; border: 0; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-surface), var(--color-bg)); box-shadow: 0 0 0 1px var(--color-neutral-800); }
.range-tabs { justify-content: space-between; margin-bottom: 16px; }
.range-tabs .chip { height: 28px; min-height: 0; padding: 0 10px; border: 0; border-radius: 6px; font-size: 12px; font-weight: 500; background: transparent; color: var(--color-neutral-400); }
.range-tabs .chip.active { background: var(--color-surface); color: var(--text); box-shadow: 0 0 0 1px var(--color-neutral-700); border: 0; }
.range-tabs .chart-range-change { margin-left: auto; font-size: 13px; font-weight: 500; }
.chart, .chart.chart-up, .chart.chart-down { --chart: #9184d9; }
.chart-svg .line { filter: drop-shadow(0 0 6px rgba(145, 132, 217, .6)); }
.chart-svg .fill-top { stop-opacity: .35; }
.chart-svg .grid { stroke: #e9e9ed; stroke-opacity: .06; stroke-dasharray: none; }
.chart-svg .axis { fill: var(--color-neutral-500); }
.chart-svg .cursor { stroke: var(--color-neutral-500); }
.chart-svg .live-point, .chart-svg .cursor-dot { fill: var(--color-accent-300); stroke: var(--color-surface); filter: drop-shadow(0 0 6px var(--color-accent)); }
.chart-tip { border-radius: var(--radius-md); background: var(--color-neutral-100); color: var(--color-bg); font-variant-numeric: tabular-nums; }
.coin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; padding: 0 4px; margin: 0; }
.coin-stats .stat { display: flex; flex-direction: column; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; }
.coin-stats .stat-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.coin-stats .stat-value { font-size: 18px; font-weight: 500; font-variant-numeric: tabular-nums; }
.coin-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; }
.coin-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.coin-list h4 { margin: 0; }
.coin-list-head { display: flex; justify-content: space-between; align-items: baseline; }
.coin-list-head span { font-size: 12px; color: var(--color-neutral-500); }
.coin-list .event { padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; background: none; box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.coin-list .event-type { font-weight: 500; }
.coin-list .event .pos, .coin-list .event .neg { font-weight: 500; }
.trade-rows { display: flex; flex-direction: column; }
.trade-row { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 2px; font-size: 13px; border-bottom: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.trade-side { font-size: 12px; font-weight: 500; }
.trade-what { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trade-when { font-size: 11px; color: var(--color-neutral-500); }
.trade-sum { text-align: right; font-weight: 500; }
.coin-ledger-link { font-size: 13px; font-weight: 500; }
.coin-side { display: flex; flex-direction: column; gap: 16px; }
.coin-side .trade-card { padding: 22px; border: 0; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-surface), var(--color-bg)); box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent); }
.trade-tabs { gap: 4px; margin-bottom: 18px; border-radius: var(--radius-md); background: var(--color-bg); }
.trade-tab { height: 34px; padding: 0; border-radius: 6px; font-size: 13px; font-weight: 500; color: var(--color-neutral-400); }
.trade-tab.active { background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-700); }
.trade-card input[type="number"] { min-height: 46px; font-size: 18px; }
.trade-card .quick-amounts .chip { height: 32px; min-height: 0; padding: 0 12px; font-size: 13px; border-radius: var(--radius-md); }
.trade-min, .trade-note { margin: 0 0 12px; font-size: 12px; color: var(--color-neutral-500); }
.trade-min strong { font-weight: 500; color: var(--color-neutral-300); }
.trade-note { margin: 12px 0 0; font-size: 11px; }
.trade-card .btn-primary { min-height: 44px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.coin-depot {
  display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.coin-depot-head { display: flex; justify-content: space-between; align-items: baseline; }
.coin-depot-head span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.coin-depot-head strong { font-size: 16px; font-weight: 500; }
.coin-depot .depot { gap: 10px; }
.coin-depot .depot div { border: 0; padding: 0; font-size: 13px; }
.coin-depot .depot dt { color: var(--color-neutral-400); }
.coin-depot .depot dd { font-weight: 400; }

/* Lotterie (Redesign) */
.lotto-layout { display: grid; gap: 24px; grid-template-columns: 1fr; }
.lotto-main { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
@media (min-width: 960px) {
  .lotto-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .lotto-side { position: sticky; top: 84px; }
}
@media (max-width: 959px) {
  .lotto-layout { display: flex; flex-direction: column; }
  .lotto-main { display: contents; }
  .lotto-main > .lotto-jackpot { order: 1; }
  .lotto-side { order: 2; }
  .lotto-main > :not(.lotto-jackpot) { order: 3; }
}
.lotto-side { display: flex; flex-direction: column; gap: 16px; }
.lotto-jackpot {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 44px 24px 0; border-radius: var(--radius-lg); text-align: center;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--color-accent) 24%, transparent), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 60px color-mix(in srgb, var(--color-accent) 12%, transparent);
}
.lotto-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-300); }
.lotto-pot { font-size: clamp(44px, 7vw, 84px); font-weight: 500; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.lotto-countdown { display: flex; gap: 8px; }
.lotto-countdown > div {
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 62px; padding: 10px 8px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.lotto-countdown span { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lotto-countdown small { font-size: 11px; color: var(--color-neutral-500); }
.lotto-draw { font-size: 13px; color: var(--color-neutral-400); }
.lotto-stats { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--color-divider); }
.lotto-stats > div { display: flex; flex-direction: column; gap: 4px; padding: 16px 8px; }
.lotto-stats > div + div { border-left: 1px solid var(--color-divider); }
.lotto-stats span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.lotto-stats strong { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lotto-block { display: flex; flex-direction: column; gap: 12px; }
.lotto-block:empty { display: none; }
.lotto-block h4 { margin: 0; }
.lotto-block > p { margin: 0; font-size: 14px; }
.lotto-tickets { display: flex; flex-wrap: wrap; gap: 10px; }
.lotto-ticket {
  display: flex; align-items: center; height: 46px; padding: 0 20px; font-size: 15px; font-weight: 500; letter-spacing: .08em; font-variant-numeric: tabular-nums;
  border-radius: 4px; background: linear-gradient(135deg, var(--color-accent-800), var(--color-surface));
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
.lotto-entries { display: flex; flex-direction: column; }
.lotto-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 10px 4px; font-size: 14px; border-bottom: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; }
.lotto-entry-name { display: flex; align-items: center; gap: 8px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.lotto-entry-name small { font-size: 11px; font-weight: 400; color: var(--color-accent-300); }
.lotto-entry-nums { font-size: 12px; color: var(--color-neutral-500); }
.lotto-entry-count { font-size: 13px; color: var(--color-neutral-400); }
.lotto-entry strong { min-width: 52px; text-align: right; font-weight: 500; }
.lotto-history { border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.lotto-history th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; color: var(--color-neutral-500); border: 0; padding: 0 8px 8px; background: none; }
.lotto-history td { padding: 12px 8px; font-size: 14px; border: 0; box-shadow: inset 0 1px 0 var(--color-divider); }
.lotto-history tr.me td { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.lotto-buy {
  display: flex; flex-direction: column; gap: 18px; padding: 22px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.lotto-buy > p { margin: 0; }
.lotto-buy-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lotto-buy-head h4 { margin: 0; }
.lotto-buy-head .muted { font-size: 13px; }
.lotto-form { display: flex; flex-direction: column; gap: 18px; }
.lotto-form p { margin: 0; font-size: 12px; color: var(--color-neutral-500); }
.lotto-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lotto-stepper { display: flex; align-items: center; height: 44px; border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.lotto-stepper .btn { height: 100%; width: 40px; padding: 0; font-size: 18px; border: 0; border-radius: 0; background: none; }
.lotto-stepper .btn:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.lotto-stepper input[type="number"] {
  width: 40px; height: 100%; padding: 0; border: 0; background: none; text-align: center; font: inherit; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; appearance: textfield;
}
.lotto-stepper input::-webkit-inner-spin-button, .lotto-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.lotto-stepper input:focus { outline: none; box-shadow: none; }
.lotto-stepper .lotto-max {
  width: auto; padding: 0 12px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-400);
  border-left: 1px solid var(--color-divider); border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.lotto-total { font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lotto-buy-btn { height: 44px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.lotto-how { padding: 0 6px; }
.lotto-how summary { display: inline-flex; align-items: center; gap: 8px; list-style: none; cursor: var(--cur-pointer); font-size: 14px; font-weight: 500; color: var(--color-neutral-300); }
.lotto-how summary::-webkit-details-marker { display: none; }
.lotto-how summary::after { content: '▾'; color: var(--color-neutral-500); transition: transform .15s; }
.lotto-how[open] summary::after { transform: rotate(180deg); }
.lotto-how summary:hover { color: var(--text); }
.lotto-how ul { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; color: var(--color-neutral-400); }
/* Wochen-/Monats-Lotterie: Gewinne aus der Bank im Jackpot (Bilder der Gegenstände, bei mehreren als Fächer) */
.lotto-prizes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 32px; }
.lotto-prize { display: flex; align-items: center; gap: 12px; }
.lotto-prize > strong { font-size: 24px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lotto-prize > span:last-child { font-size: 13px; color: var(--color-neutral-400); }
.lotto-prize-img { display: grid; width: 48px; padding: 0 10px; }
.lotto-prize-img img {
  grid-area: 1 / 1; width: 100%; max-width: none; height: auto; border-radius: 5px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .5), 0 0 0 1px var(--color-neutral-800);
}
.lotto-prize-img img:nth-last-child(2) { transform: translateX(-10px) rotate(-9deg); }
.lotto-prize-img img:nth-last-child(3) { transform: translateX(10px) rotate(9deg); }
.lotto-history-items { display: block; font-size: 11px; color: var(--color-neutral-500); }

/* Kacheln zu den anderen Lotterien (im Stil der Album-Kachel) */
.lotto-switch { display: flex; flex-direction: column; gap: 12px; }
.lotto-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  min-height: 224px; padding: 18px; border-radius: var(--radius-lg); overflow: hidden; color: var(--text);
  background: radial-gradient(120% 70% at 50% 0%, var(--color-accent-800), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-800); transition: box-shadow .25s ease;
}
.lotto-tile:hover { color: var(--text); box-shadow: 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.lotto-tile:hover .tcg-album-arrow { transform: translateX(4px); }
.lotto-tile-fan { position: absolute; left: 50%; top: 18px; width: 0; height: 104px; }
.lotto-tile-fan > * { position: absolute; transform-origin: 50% 120%; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.lotto-tile-fan img {
  left: -32px; top: 0; width: 64px; max-width: none; height: auto; border-radius: 6px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55), 0 0 0 1px var(--color-neutral-800);
}
.lotto-tile-fan img:nth-child(2) { z-index: 1; }
/* Monats-Lotterie: Folie so hoch wie ein Pack, daneben eine Geld-Karte */
.lotto-tile-fan img.is-foil { left: -36.5px; width: 73px; }
.lotto-tile-cash {
  left: -32px; top: 0; width: 64px; height: 102px; display: flex; align-items: center; justify-content: center; border-radius: 6px;
  font-size: 36px; font-weight: 500; color: var(--color-accent-300); text-shadow: 0 0 18px color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: radial-gradient(90% 60% at 50% 40%, var(--color-accent-800), transparent 80%), linear-gradient(160deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 12px 26px rgba(0, 0, 0, .55), 0 0 0 1px var(--color-neutral-800), inset 0 0 0 4px var(--color-surface), inset 0 0 0 5px var(--color-accent-700);
}
.lotto-tile-fan > :nth-child(1) { transform: translateX(-26px) rotate(-10deg); }
.lotto-tile-fan > :nth-child(3) { transform: translateX(26px) rotate(10deg); }
.lotto-tile:hover .lotto-tile-fan > :nth-child(1) { transform: translateX(-48px) rotate(-16deg); }
.lotto-tile:hover .lotto-tile-fan > :nth-child(2) { transform: translateY(-6px); }
.lotto-tile:hover .lotto-tile-fan > :nth-child(3) { transform: translateX(48px) rotate(16deg); }
.lotto-tile-fan .lotto-ticket { left: -40px; top: 24px; width: 80px; justify-content: center; padding: 0; box-shadow: 0 10px 22px rgba(0, 0, 0, .45); }
.lotto-tile-fan .lotto-ticket:nth-child(2) { z-index: 1; background: linear-gradient(135deg, var(--color-accent-700), var(--color-surface)); }
.lotto-tile-title { font-size: 20px; font-weight: 500; letter-spacing: -.02em; }
.lotto-tile-pot { font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; }
.lotto-tile-pot small { font-size: 12px; font-weight: 400; color: var(--color-neutral-400); }
.lotto-winner-banner {
  display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; margin-bottom: 24px; border-radius: var(--radius-lg);
  background: var(--ja-soft); color: var(--ja); box-shadow: 0 0 0 1px var(--ja);
}
@media (max-width: 640px) {
  .lotto-jackpot { padding-top: 32px; gap: 16px; }
  .lotto-countdown > div { min-width: 54px; }
  .lotto-stats strong { font-size: 17px; }
  .lotto-stats span { font-size: 10px; letter-spacing: .06em; }
  .lotto-entry { gap: 10px; }
}

/* Handel (Redesign) */
.handel-page { display: flex; flex-direction: column; gap: 28px; }
.handel-page .page-head { margin: 0; }
.handel-page .page-head strong { font-weight: 500; color: var(--text); }
.bm {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, #7e22ce 32%, transparent), transparent 60%), radial-gradient(60% 100% at 100% 100%, color-mix(in srgb, #a855f7 16%, transparent), transparent 60%), linear-gradient(180deg, #120c1f, var(--color-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, #a855f7 30%, transparent), 0 0 40px color-mix(in srgb, #a855f7 8%, transparent);
}
.bm.is-open { box-shadow: 0 0 0 1px color-mix(in srgb, #c084fc 60%, transparent), 0 0 60px color-mix(in srgb, #a855f7 22%, transparent); }
.bm::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .6; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px); }
.bm-head { position: relative; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; }
.bm-title { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px; }
.bm-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bm-title h2 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .02em; color: #e9d5ff; text-shadow: 0 0 18px color-mix(in srgb, #a855f7 70%, transparent); }
.bm-sub { font-size: 13px; color: var(--color-neutral-400); }
.bm .bm-state { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--color-neutral-400); background: color-mix(in srgb, var(--color-bg) 60%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.bm .bm-state-open { color: #e9d5ff; background: color-mix(in srgb, #a855f7 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #c084fc 60%, transparent); }
.bm-dot { width: 7px; height: 7px; border-radius: 50%; background: #c084fc; box-shadow: 0 0 8px #a855f7; }
.bm-cd { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.bm-cd > span { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #c084fc; }
.bm-cd strong { font-size: 28px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.bm .bm-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px clamp(20px, 3.5vw, 48px); padding: 16px clamp(22px, 3vw, 40px) 32px; }
.bm .bm-offer { display: flex; flex-direction: column; gap: 10px; }
.bm-card { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: none; cursor: var(--cur-zoom-in); transition: transform .25s ease; box-shadow: 0 0 0 1px var(--rar, transparent), 0 10px 30px rgba(0, 0, 0, .5); }
.bm-offer:nth-child(odd) .bm-card { transform: rotate(-2deg); }
.bm-offer:nth-child(even) .bm-card { transform: rotate(1.5deg); }
.bm-offer .bm-card:hover, .bm-offer .bm-card:focus-visible { transform: translateY(-6px) scale(1.03); }
.bm-card img { display: block; width: 100%; height: auto; }
.bm-offer.is-sold .bm-card img { filter: grayscale(1) brightness(.55); }
.bm-stamp { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-12deg); padding: 4px 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #f87171; border: 2px solid #f87171; border-radius: 4px; background: rgba(10, 8, 18, .6); }
.bm .bm-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.bm-rarity { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-400); min-width: 0; width: 100%; }
.bm-rarity-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bm-rarity .own-tag { margin-left: auto; flex: none; }
.bm-price { display: flex; align-items: baseline; gap: 8px; }
.bm-price strong { font-size: 17px; font-weight: 500; font-variant-numeric: tabular-nums; }
.bm-price span { font-size: 12px; color: var(--color-neutral-500); }
.bm .bm-info form { width: 100%; margin: 6px 0 0; }
.bm-buy { width: 100%; height: 34px; border-radius: var(--radius-md); border: 1px solid #c084fc; background: color-mix(in srgb, #a855f7 12%, transparent); color: #e9d5ff; font: inherit; font-size: 13px; font-weight: 500; cursor: var(--cur-pointer); }
.bm-buy:hover:not(:disabled) { background: color-mix(in srgb, #a855f7 24%, transparent); box-shadow: 0 0 18px color-mix(in srgb, #a855f7 40%, transparent); }
.bm-buy:disabled { opacity: .45; cursor: not-allowed; }
.bm > summary.bm-head { list-style: none; cursor: var(--cur-pointer); }
.bm > summary.bm-head::-webkit-details-marker { display: none; }
.bm-arrow { width: 10px; height: 10px; margin-left: 4px; border-right: 2px solid #c084fc; border-bottom: 2px solid #c084fc; transform: rotate(45deg); transition: transform .15s; }
.bm[open] .bm-arrow { transform: rotate(-135deg); }

/* ---------- Handel: Kopf, Reiter, leere Zustände (#76, #82) ---------- */
.hx { gap: 22px; }
.hx-head { align-items: center; }
.hx-head h1 { margin: 0 0 4px; }
.hx-new { gap: 6px; height: 42px; padding: 0 18px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.hx-tabs {
  position: sticky; top: 64px; z-index: 5; display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none;
  border-radius: 12px; background: color-mix(in srgb, var(--surface-2) 92%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); backdrop-filter: blur(6px);
}
.hx-tabs::-webkit-scrollbar { display: none; }
.hx-tab {
  flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px;
  border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none; white-space: nowrap;
}
.hx-tab:hover { color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.hx-tab.active { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.hx-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
@media (max-width: 560px) { .hx-tab { padding: 0 10px; } .hx-tab-long { display: none; } }
.hx-count { min-width: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; color: var(--color-neutral-300); background: var(--color-neutral-800); }
.hx-pane { display: flex; flex-direction: column; gap: 14px; }
.hx-pane[hidden] { display: none; }
.hx-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 44px 16px; border-radius: var(--radius-lg); text-align: center; color: var(--muted); box-shadow: inset 0 0 0 1px dashed var(--color-neutral-800); border: 1px dashed var(--color-neutral-800); }
.hx-empty p { margin: 0; }
.hx-none { margin: 0; }
.hx-how { padding: 14px 18px; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.hx-how summary { cursor: var(--cur-pointer); font-size: 14px; font-weight: 600; color: var(--color-neutral-300); }
.hx-how ul { margin: 12px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; line-height: 1.55; color: var(--color-neutral-400); }
.hx-how strong { color: var(--text); font-weight: 600; }
.own-tag { font-size: 11px; padding: 1px 8px; border-radius: 999px; color: var(--color-neutral-400); box-shadow: inset 0 0 0 1px var(--color-neutral-700); white-space: nowrap; }
.own-tag.own-new { color: oklch(0.8 0.14 155); box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(0.8 0.14 155) 50%, transparent); }

/* ---------- Kartenfächer (views/partials/trade-stack.ejs) ---------- */
.tstack { --w: 44px; position: relative; display: inline-flex; flex: none; align-items: center; height: calc(var(--w) * 1.4); width: calc(var(--w) + (var(--n) - 1) * var(--w) * .38); }
.tstack-md { --w: 92px; }
.tstack-lg { --w: 128px; }
.tstack-card {
  position: absolute; top: 0; left: calc(var(--i) * var(--w) * .38); width: var(--w); padding: 0; border: 0; border-radius: calc(var(--w) * .07); overflow: hidden;
  background: none; cursor: var(--cur-zoom-in); box-shadow: 0 0 0 1px var(--rar, transparent), 0 4px 14px rgba(0, 0, 0, .45);
  transform: rotate(calc((var(--i) - (var(--n) - 1) / 2) * 4deg)); transform-origin: 50% 110%; transition: transform .15s ease;
}
.tstack-card img { display: block; width: 100%; height: auto; }
.tstack-card.is-foiled { box-shadow: 0 0 0 2px #e9d5ff, 0 0 12px #c4b5fd88; }
.tstack-card:hover, .tstack-card:focus-visible { z-index: 2; transform: translateY(-4px) scale(1.05); }
.tstack:not(.tstack-many) .tstack-card { transform: none; }
.tstack:not(.tstack-many) .tstack-card:hover { transform: scale(1.05); }
.tstack-more { position: absolute; right: -6px; bottom: -4px; z-index: 3; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--color-bg); background: var(--color-accent-300); }
.tstack-money { display: grid; place-items: center; width: var(--w); height: calc(var(--w) * 1.4); border-radius: calc(var(--w) * .07); border: 1px dashed var(--color-neutral-700); color: var(--warn); font-size: calc(var(--w) * .4); font-weight: 700; background: color-mix(in srgb, var(--warn) 6%, transparent); }

/* ---------- Markt: Kachelraster ---------- */
.mk-tools { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.mk-tools .mkt-bar { flex: 0 1 340px; width: 340px; }
.mk-sort select { height: 36px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.mk-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.mk-tile {
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--color-neutral-800); transition: box-shadow .15s ease, transform .15s ease;
}
.mk-tile:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, var(--color-neutral-600)) 60%, var(--color-neutral-800)), 0 10px 28px rgba(0, 0, 0, .35); }
.mk-tile[hidden] { display: none; }
.mk-art {
  position: relative; display: grid; place-items: center; padding: 18px 12px 14px;
  background: radial-gradient(80% 90% at 50% 30%, color-mix(in srgb, var(--rar, var(--color-accent)) 20%, transparent), transparent 70%), var(--surface-2);
}
.mk-bundle { position: absolute; top: 10px; left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--text); background: color-mix(in srgb, var(--color-bg) 70%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.mk-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; flex: 1; }
.mk-kind { position: absolute; top: 10px; left: 10px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--color-bg); background: var(--color-accent-300); }
.mk-wanted .mk-kind { background: var(--warn); }
.mk-wants { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-md); background: var(--surface-2); min-width: 0; }
.mk-wants .tstack { --w: 30px; }
.mk-wants-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.mk-wants-text { min-width: 0; font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.mk-price-sub { margin-top: 0; }
.mk-name { font-weight: 600; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mk-rarity { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 6px; font-size: 12px; color: var(--color-neutral-400); }
.mk-price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 2px; }
.mk-price strong { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-price span { font-size: 12px; color: var(--color-neutral-500); }
.mk-price span.pos { color: oklch(0.8 0.14 155); }
.mk-seller { font-size: 12px; color: var(--color-neutral-500); }
.mk-seller a { color: var(--color-neutral-300); }
.mk-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: auto; padding-top: 6px; }
.mk-actions form { margin: 0; }
.mk-actions .btn { width: 100%; height: 34px; min-height: 0; padding: 0 8px; }

/* ---------- Angebote als Zeilen (views/partials/offer-row.ejs) ---------- */
.offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.offer-row { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.offer-row.is-turn { background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)), var(--color-surface)); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.offer-deal { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.offer-side { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; min-width: 0; }
.offer-side .tstack { grid-row: 1 / span 3; }
.offer-side-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.offer-side-text { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.offer-side-value { font-size: 12px; color: var(--color-neutral-500); }
.offer-arrow { color: var(--color-neutral-500); }
.offer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--color-divider); }
.offer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--color-neutral-500); }
.offer-meta a { color: var(--color-neutral-300); }
.offer-kind { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-300); }
.offer-state { padding: 1px 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--color-neutral-700); color: var(--color-neutral-300); }
.offer-state.is-turn { color: var(--color-accent-200); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.offer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.offer-actions form { margin: 0; }
.offer-actions .btn { height: 34px; min-height: 0; }

/* ---------- Verlauf ---------- */
.deal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.deal-row { display: flex; align-items: center; gap: 14px; padding: 12px 6px; border-bottom: 1px solid var(--color-divider); }
.deal-row.is-new { background: linear-gradient(90deg, color-mix(in srgb, oklch(0.8 0.14 155) 8%, transparent), transparent); }
.deal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.deal-title { overflow-wrap: anywhere; }
.deal-title strong { font-weight: 600; }
.deal-sub { font-size: 12px; color: var(--color-neutral-500); }
.deal-sub a { color: var(--color-neutral-300); }
.deal-money { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Handelsfenster (views/handel-neu.ejs) ---------- */
.hb { display: flex; flex-direction: column; gap: 20px; padding-bottom: 24px; }
.hb-top { display: flex; flex-direction: column; gap: 6px; }
.hb-top h1 { margin: 0; }
.hb-top p { margin: 0; font-size: 14px; }
.hb-top-partner { color: var(--color-accent-300); font-weight: 500; }
.hb-back { align-self: flex-start; font-size: 13px; color: var(--color-neutral-400); text-decoration: none; }
.hb-back:hover { color: var(--text); }

/* Ziel: Markt oder Mitglied als Segment-Schalter */
.hb-target { margin: 0; }
.hb-seg { display: inline-grid; grid-template-columns: auto minmax(220px, 320px); gap: 4px; max-width: 100%; padding: 4px; border-radius: 12px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.hb-seg-opt { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border-radius: 9px; color: var(--color-neutral-400); text-decoration: none; cursor: var(--cur-pointer); }
.hb-seg-opt > span { display: flex; flex-direction: column; line-height: 1.2; }
.hb-seg-opt strong { color: inherit; font-weight: 600; font-size: 14px; }
.hb-seg-opt small { font-size: 11px; color: var(--color-neutral-500); }
.hb-seg-opt:hover { color: var(--text); }
.hb-seg-opt.active { color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.hb-seg-opt.active svg { color: var(--color-accent-300); }
.hb-seg-member { padding-right: 4px; }
.hb-seg-member input { flex: 1; min-width: 0; height: 36px; min-height: 0; padding: 0 4px; border: 0; background: transparent; box-shadow: none; font-size: 14px; color: var(--text); }
.hb-seg-member input:focus { outline: none; }
.hb-seg-member:focus-within { box-shadow: var(--shadow), inset 0 0 0 1px var(--color-accent-600); }
.hb-seg-go { width: 36px; height: 36px; border: 0; border-radius: 8px; background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-200); font-size: 16px; cursor: var(--cur-pointer); }
.hb-seg-go:hover { background: color-mix(in srgb, var(--color-accent) 28%, transparent); }

/* Das Handelsfenster: beide Seiten nebeneinander */
.hb-form { display: flex; flex-direction: column; gap: 20px; margin: 0; }
.hb-window {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)), var(--color-surface) 60%);
  box-shadow: 0 0 0 1px var(--color-accent-800), 0 18px 40px rgba(0, 0, 0, .35);
}
.hb-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; }
.hb-side-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: var(--cur-pointer); }
.hb-side-head:disabled, .hb-side-head.is-static { cursor: default; }
.hb-side-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-400); }
.hb-side-get .hb-side-label { color: var(--color-accent-300); }
.hb-side-from { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--color-neutral-400); }
.hb-side-value { font-size: 12px; color: var(--color-neutral-300); font-variant-numeric: tabular-nums; }
.hb-tray { list-style: none; margin: 0; display: flex; flex-wrap: wrap; row-gap: 14px; border-radius: var(--radius-md); background: radial-gradient(90% 120% at 50% 100%, color-mix(in srgb, var(--color-accent) 8%, transparent), transparent 70%), color-mix(in srgb, var(--color-bg) 55%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.hb-tray.is-empty { box-shadow: none; border: 1px dashed var(--color-neutral-700); }
.hb-tray-empty { padding: 0 8px; font-size: 13px; color: var(--color-neutral-500); text-align: center; }
.hb-tray-wish { min-height: 64px; }
/* Wunschkarte suchen (Markt) */
.hb-wish { position: relative; z-index: 8; }
.hb-wish-field { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: var(--radius-md); color: var(--color-accent-300); background: color-mix(in srgb, var(--color-bg) 55%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-700); cursor: text; }
.hb-wish-field:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent-500), 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent); }
.hb-wish-field input { flex: 1; min-width: 0; height: 100%; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 14px; }
.hb-wish-field input:focus { outline: none; }
.hb-wish-pop { position: absolute; left: 0; right: 0; top: calc(100% + 6px); display: flex; flex-direction: column; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-700), 0 18px 40px rgba(0, 0, 0, .6); animation: hb-pop .16s ease; overflow: hidden; }
.hb-wish-pop[hidden] { display: none; }
.hb-wish-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border-bottom: 1px solid var(--color-divider); } /* umbrechen statt seitlich scrollen – mit der Maus sonst unerreichbar */
.hb-wish-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; font: inherit; font-size: 12px; color: var(--color-neutral-300); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--color-neutral-800); cursor: var(--cur-pointer); }
.hb-wish-chip:hover { color: var(--text); }
.hb-wish-chip.active { color: var(--text); background: color-mix(in srgb, var(--rar, var(--color-accent)) 18%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, var(--color-accent)) 55%, transparent); }
.hb-wish-chip .tcg-dot { width: 7px; height: 7px; }
.hb-wish-list { max-height: 320px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; }
@keyframes hb-pop { from { opacity: 0; transform: translateY(-4px); } }
.hb-wish-opt { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 8px; border-radius: 7px; cursor: var(--cur-pointer); }
.hb-wish-opt img { grid-row: 1 / span 2; width: 30px; aspect-ratio: 720 / 1008; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--rar, var(--color-neutral-700)); }
.hb-wish-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hb-wish-meta { grid-column: 2; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--color-neutral-400); }
.hb-wish-tag { grid-column: 3; grid-row: 1 / span 2; padding: 1px 8px; border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--color-neutral-400); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.hb-wish-tag.is-missing { color: oklch(0.8 0.14 155); box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(0.8 0.14 155) 50%, transparent); }
.hb-wish-opt:hover, .hb-wish-opt.is-active { background: color-mix(in srgb, var(--color-accent) 16%, transparent); }
.hb-wish-opt.is-full { opacity: .5; cursor: default; }
.hb-wish-none { padding: 10px; font-size: 13px; color: var(--color-neutral-500); }
.hb-window.is-stuck .hb-wish-field { height: 36px; }
.hb-tray:not(.is-empty) .hb-tray-empty { display: none; }
/* Gewählte Karten als aufgefächerte Hand (public/js/handel-neu.js renderTray) */
.hb-tray { --mw: 70px; --gap: calc(var(--mw) * -.28); align-items: flex-end; justify-content: center; padding: 14px 16px 10px; min-height: calc(var(--mw) * 1.4 + 26px); gap: 0; }
.hb-tray:has(.hb-mini:nth-child(n + 8)) { --gap: calc(var(--mw) * -.5); }
.hb-tray:has(.hb-mini:nth-child(n + 12)) { --gap: calc(var(--mw) * -.62); }
.hb-mini { position: relative; flex: none; margin-left: var(--gap); transform: rotate(calc((var(--i, 0) - (var(--n, 1) - 1) / 2) * 3deg)) translateY(calc(var(--lift, 0px))); transform-origin: 50% 120%; transition: transform .2s ease, margin .2s ease; }
.hb-mini:first-of-type, .hb-tray-empty + .hb-mini { margin-left: 0; }
.hb-mini:hover, .hb-mini:focus-within { z-index: 5; --lift: -10px; }
.hb-mini.is-new { animation: hb-deal .38s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes hb-deal { from { opacity: 0; transform: translateY(40px) rotate(12deg) scale(.7); } }
.hb-mini-card {
  position: relative; display: block; width: var(--mw); aspect-ratio: 720 / 1008; border-radius: calc(var(--mw) * .08); overflow: hidden;
  background: var(--color-bg); cursor: var(--cur-pointer);
  box-shadow: 0 0 0 1.5px var(--rar, var(--color-neutral-600)), 0 0 14px color-mix(in srgb, var(--rar, transparent) 35%, transparent), 0 8px 18px rgba(0, 0, 0, .5);
  transition: box-shadow .2s ease;
}
.hb-mini:hover .hb-mini-card { box-shadow: 0 0 0 2px var(--rar, var(--color-accent-300)), 0 0 22px color-mix(in srgb, var(--rar, var(--color-accent)) 55%, transparent), 0 14px 26px rgba(0, 0, 0, .55); }
.hb-mini-card img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.hb-mini.is-item .hb-mini-card { display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, #e9d5ff 22%, transparent), transparent 70%), var(--surface-2); }
.hb-mini.is-item .hb-mini-card img { width: 52%; height: auto; }
/* Stapel: gleiche Karten mehrfach – Kartenränder dahinter */
.hb-mini.is-stack .hb-mini-card { box-shadow: 3px -3px 0 -1px var(--color-surface), 3px -3px 0 0 var(--rar, var(--color-neutral-600)), 0 0 14px color-mix(in srgb, var(--rar, transparent) 35%, transparent), 0 8px 18px rgba(0, 0, 0, .5); }
.hb-mini.is-stack-3 .hb-mini-card { box-shadow: 3px -3px 0 -1px var(--color-surface), 3px -3px 0 0 var(--rar, var(--color-neutral-600)), 6px -6px 0 -1px var(--color-surface), 6px -6px 0 0 var(--rar, var(--color-neutral-600)), 0 8px 18px rgba(0, 0, 0, .5); }
.hb-mini-n { position: absolute; left: 4px; bottom: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800; line-height: 17px; color: var(--color-bg); background: var(--rar, var(--color-accent-300)); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.hb-mini-n:empty { display: none; }
/* Folie: wandernder Glanz */
.hb-mini.is-foil .hb-mini-card { box-shadow: 0 0 0 2px #e9d5ff, 0 0 18px #c4b5fd88, 0 8px 18px rgba(0, 0, 0, .5); }
.hb-mini-sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(115deg, transparent 30%, rgba(168, 216, 255, .55) 45%, rgba(251, 207, 232, .5) 55%, transparent 70%); background-size: 250% 100%; animation: hb-sheen 3.2s ease-in-out infinite; }
@keyframes hb-sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
/* Entfernen: × beim Drüberfahren, Name und Wert darunter */
.hb-mini-x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 14px; line-height: 1; color: #fff; background: rgba(10, 8, 18, .72); opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; }
.hb-mini:hover .hb-mini-x, .hb-mini-card:focus-visible .hb-mini-x { opacity: 1; transform: none; }
.hb-mini-x:hover { background: var(--nein); }
.hb-mini-card:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.hb-mini-tip { position: absolute; left: 50%; top: calc(100% + 6px); z-index: 6; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--text); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-700), 0 6px 14px rgba(0, 0, 0, .5); transform: translate(-50%, -4px); opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.hb-mini-tip { display: none; }
.hb-mini:hover .hb-mini-tip, .hb-mini:focus-within .hb-mini-tip { display: block; opacity: 1; transform: translate(-50%, 0); }
.hb-tray { overflow-x: clip; overflow-y: visible; } /* gedrehte Randkarten erzeugen keine Überbreite */
/* Leere Ablage: angedeutete Kartenplätze */
.hb-tray.is-empty { align-items: center; justify-content: center; }
.hb-tray-empty { display: flex; align-items: center; gap: 14px; }
.hb-tray-empty::before { content: ""; flex: none; width: 34px; aspect-ratio: 720 / 1008; border-radius: 4px; border: 1.5px dashed var(--color-neutral-600); box-shadow: 8px -4px 0 -2px var(--color-surface), 8px -4px 0 -.5px var(--color-neutral-700); transform: rotate(-6deg); opacity: .8; }
.hb-fixed { display: flex; align-items: center; gap: 14px; min-height: 124px; padding: 8px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 55%, transparent); }
.hb-fixed > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.hb-money { display: flex; align-items: center; gap: 8px; align-self: flex-start; padding: 0 10px; height: 40px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 55%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.hb-money > span:first-child { font-size: 13px; color: var(--color-neutral-400); white-space: nowrap; }
.hb-money input { width: 96px; height: 32px; min-height: 0; padding: 0 4px; border: 0; background: transparent; box-shadow: none; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.hb-money input:focus { outline: none; }
.hb-money:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.hb-money-unit { color: var(--color-neutral-500); }
.hb-money-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: auto; } /* unten bündig – beide Seiten auf gleicher Höhe */
.hb-money.has-ref > span:first-child { color: var(--text); font-weight: 600; }
.hb-ref { font-size: 12px; color: var(--color-neutral-400); }
.hb-ref-delta.is-less { color: oklch(0.8 0.14 155); }
.hb-ref-delta.is-more { color: var(--warn); }
.hb-price { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 55%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.hb-price:focus-within { box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.hb-price input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.hb-price input:focus { outline: none; }
.hb-price .hb-money-unit { font-size: 22px; }
/* #115: kurze Zeile + ?; das Fenster richtet sich an der Zeile aus (nicht am ?), damit es auch schmal ins Bild passt */
.hb-price-note { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; }
.hb-price-note .help-tip { position: static; }
.hb-price-note .help-tip > summary { width: 18px; height: 18px; font-size: 11px; }
.hb-price-note .help-tip-body { left: 0; right: auto; top: calc(100% + 6px); }
.hb-price-note .help-tip-body p { margin: 0; }
.hb-price-note .help-tip-body p + p { margin-top: 6px; }
.hb-swap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 4px; position: relative; }
.hb-swap::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 50%; width: 1px; background: var(--color-divider); }
.hb-swap-icon { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--color-accent-200); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-accent-700); }
.hb-balance { position: relative; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-neutral-300); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.hb-balance.is-pos { color: oklch(0.8 0.14 155); box-shadow: inset 0 0 0 1px color-mix(in srgb, oklch(0.8 0.14 155) 45%, transparent); }
.hb-balance.is-neg { color: var(--nein); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nein) 45%, transparent); }

/* Sammlungen: Reiter, Werkzeugleiste, Kartenraster */
.hb-browser { display: flex; flex-direction: column; gap: 14px; }
.hb-browser-title { margin: 0; font-size: 17px; }
.hb-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--color-divider); overflow-x: auto; scrollbar-width: none; }
.hb-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 12px; border: 0; background: none; color: var(--color-neutral-400); font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; cursor: var(--cur-pointer); }
.hb-tab:hover { color: var(--text); }
.hb-tab.active { color: var(--text); }
.hb-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--color-accent-300); }
.hb-tab-count { padding: 0 7px; border-radius: 999px; font-size: 11px; line-height: 18px; color: var(--color-neutral-300); background: var(--color-neutral-800); }
.hb-pane[hidden] { display: none; }
.hb-picker { display: flex; flex-direction: column; gap: 14px; }
.hb-picker-tools { position: relative; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.hb-picker-tools .mkt-bar { flex: 0 1 320px; width: 320px; }
.hb-picker-hint { flex: 1 1 200px; }
.hb-none-all { margin: 0; padding: 32px 0; text-align: center; }
.hb-grid { grid-template-columns: repeat(auto-fill, minmax(min(30%, 116px), 1fr)); gap: 18px 14px; }
.hb-card { position: relative; display: flex; flex-direction: column; gap: 3px; }
.hb-card.is-search-hidden { display: none; }
.hb-art { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: var(--cur-pointer); }
.hb-card.is-item .hb-art { aspect-ratio: 720 / 1008; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, #e9d5ff 18%, transparent), transparent 70%), var(--surface-2); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.hb-card.is-item .hb-art img { width: 46%; height: auto; }
.hb-card-name { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--color-neutral-200); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-card-name .tcg-dot { flex: none; }
.hb-card-sub { font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-qty { position: absolute; top: 6px; right: 6px; z-index: 2; min-width: 26px; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; text-align: center; color: var(--color-bg); background: var(--color-accent-300); box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.hb-qty[hidden] { display: none; }
.hb-card.is-picked .tcg-art, .hb-card.is-picked.is-item .hb-art, .hb-card.is-picked .foil-card { box-shadow: 0 0 0 2px var(--color-accent-300), 0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.hb-card.is-picked .hb-card-name { color: var(--color-accent-200); }
.hb-card.is-full .hb-art { cursor: default; }
.hb-card.is-full .hb-art:hover { transform: none; }
/* Ohne JS: Zahlenfeld unter der Karte; mit JS: antippen, "−" erscheint auf gewählten Karten */
.hb-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) 28px; align-items: center; gap: 2px; margin-top: 4px; }
.hb-step input { height: 28px; min-height: 0; padding: 0 2px; text-align: center; font-size: 13px; -moz-appearance: textfield; appearance: textfield; }
.hb-step input::-webkit-outer-spin-button, .hb-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hb-step-btn { height: 28px; padding: 0; border: 0; border-radius: 6px; background: var(--surface); color: var(--text); font-size: 16px; line-height: 1; cursor: var(--cur-pointer); box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.hb-minus { display: none; }
.hb-js .hb-step { display: none; }
.hb-js .hb-card.is-picked .hb-minus {
  position: absolute; top: 6px; left: 6px; z-index: 2; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(10, 8, 18, .75); color: #fff; font-size: 17px; line-height: 1; cursor: var(--cur-pointer); box-shadow: 0 0 0 1px rgba(255, 255, 255, .25);
}
.hb-js .hb-card.is-picked .hb-minus:hover { background: var(--nein); }
.hb-foil { cursor: var(--cur-pointer); }
.hb-foil input { position: absolute; opacity: 0; pointer-events: none; }
.hb-foil:has(input:focus-visible) .foil-card { outline: 2px solid var(--text); outline-offset: 3px; }
.hb-foil.is-picked::after { content: "✓"; position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent-300); color: var(--color-bg); font-weight: 800; font-size: 13px; }

/* Abschluss im Fenster: Zusammenfassung, Nachricht, Absenden */
.hb-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px 16px; border-top: 1px solid var(--color-divider); }
.hb-act { flex: 1 1 420px; display: flex; align-items: center; gap: 10px 16px; min-width: 0; }
.hb-bar-summary { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hb-bar-line { font-weight: 600; overflow-wrap: anywhere; }
.hb-bar-line.is-empty { color: var(--color-neutral-300); font-weight: 500; }
.hb-bar-note { font-size: 12px; color: var(--color-neutral-500); }
.hb-bar-note.is-problem { color: var(--warn); }
.hb-message { flex: 1 1 240px; margin: 0; }
.hb-message input { width: 100%; height: 40px; min-height: 0; }
.hb-submit { flex: none; height: 44px; padding: 0 22px; }
/* Desktop: Fenster bleibt unter dem Seitenkopf stehen; beim Kleben kompakter */
.hb-sentinel { display: block; height: 1px; margin-bottom: -1px; }
@media (min-width: 761px) {
  .hb-window { position: sticky; top: 72px; z-index: 6; }
  .hb-window.is-stuck { box-shadow: 0 0 0 1px var(--color-accent-700), 0 18px 40px rgba(0, 0, 0, .6); }
  .hb-window.is-stuck .hb-side { gap: 8px; padding-top: 12px; padding-bottom: 10px; }
  .hb-window.is-stuck .hb-tray, .hb-window.is-stuck .hb-fixed { min-height: 58px; padding: 6px; }
  .hb-window.is-stuck .hb-tray { --mw: 40px; padding: 8px 12px 6px; min-height: calc(var(--mw) * 1.4 + 14px); }
  .hb-window.is-stuck .hb-mini-tip, .hb-window.is-stuck .hb-mini-x { display: none; }
  .hb-window.is-stuck .hb-tray-empty { font-size: 12px; }
  .hb-window.is-stuck .hb-price { height: 44px; }
  .hb-window.is-stuck .hb-price input { font-size: 20px; }
  .hb-window.is-stuck .hb-price-note .help-tip { display: none; } /* das Preisfeld bleibt – nur das ?-Fenster verschwindet */
  .hb-window.is-stuck .hb-foot { padding-top: 8px; padding-bottom: 10px; }
  .hb-window.is-stuck .hb-message { display: none; }
}
.hb-window.is-bumped { animation: hb-bump .35s ease; }
/* Drag & Drop: passende Seite leuchtet als Ablage, Karten lassen sich greifen */
.hb-ghost { position: fixed; top: -400px; left: -400px; width: 84px; aspect-ratio: 720 / 1008; border-radius: 7px; overflow: hidden; background: var(--color-bg); box-shadow: 0 0 0 2px var(--color-accent-300), 0 10px 24px rgba(0, 0, 0, .5); pointer-events: none; }
.hb-ghost img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hb-ghost.is-item { display: grid; place-items: center; background: var(--surface-2); }
.hb-ghost.is-item img { width: 50%; height: auto; }
.hb-card[draggable="true"] .hb-art, .hb-card[draggable="true"].hb-foil { cursor: var(--cur-grab); }
.hb-card[draggable="true"]:active .hb-art { cursor: var(--cur-grabbing); }
.hb-mini-card[draggable="true"] { cursor: var(--cur-grab); }
.hb-art:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 3px; }
.hb.hb-dragging .hb-side:not(.is-target) { opacity: .45; transition: opacity .15s ease; }
.hb-side.is-target .hb-tray { border-color: var(--color-accent-400); border-style: dashed; background: color-mix(in srgb, var(--color-accent) 10%, transparent); box-shadow: none; }
.hb-side.is-target .hb-tray::after { content: "Hier ablegen"; align-self: center; margin: 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 18%, transparent); pointer-events: none; }
.hb-side.is-target .hb-tray-empty { display: none; }
.hb-side.is-over .hb-tray { border-color: var(--color-accent-200); background: color-mix(in srgb, var(--color-accent) 20%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.hb-side.is-source .hb-tray::after { content: "Zum Entfernen außerhalb loslassen"; align-self: center; margin: 0 auto; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--color-neutral-300); background: var(--surface-2); pointer-events: none; }
.hb.hb-dragging-out .hb-browser { outline: 2px dashed color-mix(in srgb, var(--nein) 50%, transparent); outline-offset: 6px; border-radius: var(--radius-md); }
@keyframes hb-bump { 40% { box-shadow: 0 0 0 2px var(--color-accent-300), 0 18px 40px rgba(0, 0, 0, .5); } }
@media (max-width: 760px) {
  .hb-seg { grid-template-columns: 1fr; width: 100%; }
  .hb-window { grid-template-columns: 1fr; }
  .hb-swap { flex-direction: row; padding: 0 20px; }
  .hb-swap::before { top: 50%; bottom: auto; left: 20px; right: 20px; width: auto; height: 1px; }
  .hb-swap-icon { transform: rotate(90deg); }
  .hb-side { padding: 14px 16px; }
  .hb-picker-tools .mkt-bar { flex-basis: 100%; width: 100%; }
}
@media (max-width: 760px) {
  .hb { padding-bottom: 120px; }
  .hb-foot { padding: 12px 16px 14px; }
  .hb-act {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 40; flex-wrap: wrap; padding: 10px 12px;
    border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px var(--color-accent-700), 0 12px 36px rgba(0, 0, 0, .6);
  }
  .hb-submit { width: 100%; }
  .hb-tray { --mw: 56px; }
}

/* ---------- Verhandlung (views/handel-angebot.ejs) ---------- */
.ng-sides { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: start; margin-bottom: 16px; }
.ng-side { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; }
.ng-side-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.ng-get .ng-side-label { color: var(--color-accent-300); }
.ng-arrow { align-self: center; color: var(--color-neutral-500); }
.ng-lines { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.ng-lines li { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px dashed var(--color-divider); }
.ng-line-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ng-line-value { font-variant-numeric: tabular-nums; color: var(--color-neutral-400); white-space: nowrap; }
.ng-money .ng-line-name { font-weight: 600; color: var(--warn); }
.ng-money .ng-line-value { color: var(--text); font-weight: 600; }
.ng-side-total { font-size: 12px; color: var(--color-neutral-500); }
.ng-listing { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 20px; }
.ng-listing-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ng-listing-info form { margin: 6px 0 0; }
.ng-listing-name { font-size: 17px; }
.ng-price { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ng-counters h2 { display: flex; align-items: center; gap: 8px; }
.ng-done { margin-top: 14px; font-size: 13px; }
.ng-done ul { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 560px) {
  .offer-deal { grid-template-columns: 1fr; }
  .offer-arrow { transform: rotate(90deg); justify-self: center; }
  .ng-sides { grid-template-columns: 1fr; }
  .ng-arrow { transform: rotate(90deg); justify-self: center; }
  .tstack-lg { --w: 104px; }
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tstack-md { --w: 72px; }
  .mk-body { padding: 10px; }
  .mk-actions { grid-template-columns: 1fr; }
  .bm-cd { align-items: flex-start; }
  .bm .bm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* Markt: Suchen und Filtern in einem Knopf (nach „Mobile Search/Filter Button“, Dribbble) – in unseren Farben.
   Eine Hälfte überfahren oder antippen (Fokus) → sie klappt über die ganze Breite auf. */
.mkt-bar { --mkt-h: 36px; --mkt-ease: cubic-bezier(0, 0, .1, 1); --mkt-soft: cubic-bezier(0, 0, .5, 1); position: relative; flex: 0 0 280px; width: 280px; max-width: 100%; height: var(--mkt-h); }
/* Rahmen an den Hälften (nicht am Knopf): sonst schimmert er an den runden Ecken in der Mitte durch */
.mkt-bar > div { --mkt-half-bg: var(--color-surface); position: absolute; top: 0; height: 100%; width: 50%; background: var(--mkt-half-bg); transition: width .45s var(--mkt-ease), left .45s var(--mkt-ease), background-color .2s ease, border-radius .2s ease; }
.mkt-bar-search { left: 0; overflow: hidden; z-index: 1; transition-delay: .1s; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: inset 1px 0 0 var(--color-neutral-800), inset 0 1px 0 var(--color-neutral-800), inset 0 -1px 0 var(--color-neutral-800); }
.mkt-bar-filter { left: 50%; z-index: 1; transition-delay: .25s; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: inset -1px 0 0 var(--color-neutral-800), inset 0 1px 0 var(--color-neutral-800), inset 0 -1px 0 var(--color-neutral-800); }
.mkt-bar > div:hover { --mkt-half-bg: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); }
/* Trennstrich zwischen den Hälften */
.mkt-bar-search::after { content: ""; position: absolute; right: 0; top: 22%; width: 1px; height: 56%; background: var(--color-neutral-700); transition: opacity .2s ease; }
.mkt-bar-label, .mkt-bar-toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: var(--color-neutral-300); font: inherit; font-size: 14px; letter-spacing: .02em; cursor: var(--cur-pointer); }
.mkt-bar-label { transition: opacity .3s var(--mkt-soft) .35s; }
.mkt-bar-toggle:focus-visible, .mkt-opt:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: -2px; border-radius: var(--radius-md); }

/* Suchen: Feld wächst als Kreis von links auf, die Lupe kommt von unten */
/* Feld füllt die Hälfte ganz aus (kein eigener Rahmen), rechts bleibt Platz für die Lupe */
.mkt-bar-input[type="search"] { position: absolute; left: 0; top: 0; width: calc(100% - 46px); height: 100%; min-height: 0; margin: 0; padding: 0 14px; border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-bg); color: var(--text); font-size: 14px; clip-path: circle(0 at 18px 50%); transition: clip-path .45s var(--mkt-ease) .05s; }
/* 1px-Rahmen wie im Vorbild – sonst verschwimmt das Feld mit dem Seitenhintergrund */
/* 1px-Rahmen in der Farbe der Hälfte (wie das Lupen-Feld daneben) – sonst verschwimmt das Feld mit dem Seitenhintergrund */
.mkt-bar-input[type="search"], .mkt-bar-input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mkt-half-bg); }
.mkt-bar-current { box-shadow: inset 0 0 0 1px var(--mkt-half-bg); }
.mkt-bar-icon { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 46px; height: 100%; color: var(--color-accent-300); transform: translateY(100%); opacity: 0; transition: transform .35s var(--mkt-ease), opacity .2s ease; pointer-events: none; }
.mkt-bar-search:is(:hover, :focus-within), .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-search { width: 100%; z-index: 3; transition-delay: 0s; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-label, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-label { opacity: 0; pointer-events: none; transition-delay: 0s; }
.mkt-bar-search:is(:hover, :focus-within)::after, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-search::after { opacity: 0; }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-input, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-input { clip-path: circle(150% at 18px 50%); transition-delay: .1s; }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-icon, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-icon { transform: translateY(0); opacity: 1; transition-delay: .3s; }

/* Filtern: Feld mit der Auswahl schiebt sich auf, der Pfeil dreht sich, darunter klappt die Liste auf */
.mkt-bar-word { transition: opacity .3s var(--mkt-soft) .35s; }
.mkt-bar-current { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; width: 0; padding: 0; overflow: hidden; white-space: nowrap; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-bg); font-size: 13px; transition: width .45s var(--mkt-ease) .2s, padding .45s var(--mkt-ease) .2s; }
.mkt-bar-current > * { opacity: 0; transition: opacity .25s ease; }
.mkt-bar-current strong { color: var(--color-neutral-100); font-weight: 600; }
.mkt-bar-arrow { position: absolute; right: 16px; top: 50%; margin-top: -7px; color: var(--color-neutral-400); transition: transform .45s var(--mkt-soft) .1s, color .2s ease; }
.mkt-bar-filter:is(:hover, :focus-within) { left: 0; width: 100%; z-index: 3; transition-delay: 0s; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-word { opacity: 0; transition-delay: 0s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-current { width: calc(100% - 46px); padding: 0 14px; transition-delay: .15s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-current > * { opacity: 1; transition-delay: .4s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-arrow { transform: rotate(180deg); color: var(--color-accent-300); transition-delay: .35s; }
.mkt-bar.is-filtered .mkt-bar-word, .mkt-bar.is-filtered .mkt-bar-arrow { color: var(--color-accent-300); }
.mkt-bar.is-filtered .mkt-bar-word::after { content: " •"; }

/* Die Liste hängt direkt am Knopf; der Abstand ist durchsichtiger Innenabstand und gehört noch zum Knopf (Hover bleibt) */
.mkt-bar-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding-top: 6px; visibility: hidden; transition: visibility 0s linear .25s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-drop { visibility: visible; transition-delay: 0s; }
.mkt-bar-menu { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 6px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--color-neutral-800); clip-path: inset(0 100% calc(100% - 2px) 0); }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-menu { animation: mkt-drop .45s var(--mkt-soft) .2s both; }
@keyframes mkt-drop {
  0% { clip-path: inset(0 100% calc(100% - 2px) 0); }
  45% { clip-path: inset(0 0 calc(100% - 2px) 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.mkt-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--color-neutral-200); font: inherit; font-size: 13px; text-align: left; cursor: var(--cur-pointer); }
.mkt-opt:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.mkt-opt.active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200); font-weight: 600; }
@media (max-width: 640px) { .mkt-bar { flex-basis: 100%; width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .mkt-bar *, .mkt-bar > div { transition-duration: 0s !important; transition-delay: 0s !important; }
  .mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-menu { animation: none; clip-path: none; }
}
.mkt-opt-count { margin-left: auto; padding-left: 8px; color: var(--color-neutral-500); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Mehrere Gruppen in einem Menü (Album: Seltenheit + Season) */
.mkt-group { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mkt-group + .mkt-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--color-neutral-800); }
.mkt-group-title { padding: 4px 10px 2px; color: var(--color-neutral-500); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mkt-bar-menu { max-height: min(70vh, 540px); overflow-y: auto; }
.mkt-bar-current strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tcg-dot-missing { --rar: transparent; box-shadow: inset 0 0 0 1.5px var(--color-accent-300); } /* "Fehlt mir noch" im Filter */

/* Grading (Redesign) */
:root {
  --gr-back: url('/img/tcg-backs/pre-season.webp') center / cover no-repeat;
  --gr-green: oklch(0.8 0.14 155);
  --gr-red: oklch(0.74 0.14 25);
  --gr-yellow: oklch(0.85 0.13 85);
}
.gr-page { display: flex; flex-direction: column; gap: 24px; }
.gr-page > p { margin: -12px 0 0; }
.gr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gr-head h1 { margin: 0; font-size: 40px; letter-spacing: -.025em; }
.gr-today { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--color-neutral-400); }
.gr-today b { font-weight: 500; color: var(--color-text); }
.gr-pips { display: flex; gap: 4px; }
.gr-pips span { width: 14px; height: 6px; border-radius: 2px; background: var(--color-neutral-800); }
.gr-pips span.is-on { background: var(--color-accent); box-shadow: 0 0 6px color-mix(in srgb, var(--color-accent) 60%, transparent); }
.gr-kicker { margin: 0; font-size: 11px; font-weight: 500; letter-spacing: .1em; color: var(--color-accent-300); }
.gr-label { margin: 0 0 12px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.gr-note { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-500); }
.gr-dim { color: var(--color-neutral-500); }
.gr-ok { color: var(--gr-green); font-weight: 500; }
.gr-bad { color: var(--gr-red); font-weight: 500; }
.gr-glow { box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 25%, transparent); }

/* Stellenangebot */
.gr-hero {
  position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 40px; margin: 0;
  padding: clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); border: 0;
  background: radial-gradient(50% 80% at 80% 50%, color-mix(in srgb, var(--color-accent) 20%, transparent), transparent 70%),
    linear-gradient(160deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-800);
}
.gr-hero-text { flex: 1 1 420px; min-width: 0; max-width: 560px; display: flex; flex-direction: column; gap: 18px; }
.gr-hero h2 { margin: 0; font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -.025em; line-height: 1.1; }
.gr-lead { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-300); text-wrap: pretty; }
.gr-terms { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--color-neutral-300); }
.gr-terms li { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.gr-terms li::before { content: ""; flex: none; width: 7px; height: 7px; transform: rotate(45deg) translateY(-1px); border-radius: 1px; background: var(--color-accent); }
.gr-terms b { font-weight: 500; color: var(--color-text); }
.gr-hire { gap: 14px; margin-top: 4px; }
.gr-hero-card { flex: 1 1 260px; min-height: 340px; }
@media (max-width: 760px) { .gr-hero-card { order: -1; min-height: 270px; } }

/* Layout */
.gr-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.gr-main { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.gr-side { flex: 0 1 320px; min-width: 280px; display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 960px) { .gr-side { position: sticky; top: 84px; } }
@media (max-width: 860px) { .gr-side { flex: 1 1 100%; } }

/* Arbeitstisch */
.gr-bench { display: flex; flex-direction: column; gap: 16px; }
.gr-ticket { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; font-size: 14px; }
.gr-ticket b { font-weight: 500; }
.gr-ticket-label {
  padding: 3px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-accent-200); background: var(--color-accent-900); box-shadow: inset 0 0 0 1px var(--color-accent-700);
}
.gr-ticket-rar { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-300); }
.gr-ticket-for { color: var(--color-neutral-500); }
.gr-stage {
  height: clamp(440px, 62vh, 580px); border-radius: var(--radius-lg);
  background-color: #141626;
  background-image:
    radial-gradient(ellipse 55% 50% at 50% 26%, rgba(255, 243, 214, .16), transparent 70%),
    radial-gradient(ellipse 120% 80% at 50% 120%, rgba(0, 0, 0, .5), transparent 60%),
    linear-gradient(rgba(145, 132, 217, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(145, 132, 217, .07) 1px, transparent 1px);
  box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.gr-stage:focus-visible { box-shadow: inset 0 0 0 1px var(--color-neutral-800), 0 0 0 2px var(--color-accent); }
.gr-modes { top: 12px; left: 12px; }
.gr-mode {
  gap: 8px; min-height: 38px; padding: 0 14px 0 11px; font: 500 13px var(--font); color: var(--color-text);
  background: rgba(10, 10, 20, .55); border: 1px solid var(--color-neutral-700);
}
.gr-mode:hover { background: rgba(10, 10, 20, .75); }
.gr-mode.is-on {
  background: color-mix(in srgb, var(--color-accent) 30%, rgba(10, 10, 20, .7)); border-color: var(--color-accent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--color-accent) 40%, transparent);
}
.gr-mode span { font-size: 15px; }
.gr-zoom-btns { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.gr-round {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--color-neutral-700);
  background: rgba(10, 10, 20, .55); color: var(--color-text); font: 18px/1 var(--font); cursor: var(--cur-pointer, pointer);
}
.gr-round:hover { border-color: var(--color-accent); }
.gr-hint { bottom: 14px; max-width: 70%; padding: 7px 14px; font-size: 12px; color: var(--color-neutral-200); background: rgba(10, 10, 20, .6); }
@media (max-width: 560px) { .gr-hint { max-width: calc(100% - 24px); } }
.gr-mode[hidden] { display: none; }

/* UV-Lampe: Zeiger = violetter Lichtkegel, außen abgedunkelt; getroffene Ecken-/Kantenmacken leuchten grün */
.gr-stage.mode-uv { cursor: none; }
.gr-uv-shade, .gr-uv-light { position: absolute; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.gr-uv-shade { inset: 0; z-index: 4; background: radial-gradient(circle 150px at var(--ux, 50%) var(--uy, 50%), transparent 0 40%, rgba(8, 4, 22, .62) 100%); }
.gr-uv-light {
  z-index: 4; left: var(--ux, 50%); top: var(--uy, 50%); width: 128px; height: 128px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(192, 132, 252, .5) 0 22%, rgba(147, 51, 234, .32) 50%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(192, 132, 252, .35), 0 0 30px rgba(147, 51, 234, .45); mix-blend-mode: screen;
}
.gr-uv-light::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; translate: -50% -50%; border-radius: 50%; background: #e9d5ff; box-shadow: 0 0 8px #c084fc; }
.gr-stage.mode-uv.uv-on .gr-uv-shade, .gr-stage.mode-uv.uv-on .gr-uv-light { opacity: 1; }
.gr-stage.mode-uv .gr-corner.is-uv, .gr-stage.mode-uv .gr-nick.is-uv { --dent: 57, 255, 20; z-index: 5; scale: 1.6; filter: drop-shadow(0 0 2px rgb(57, 255, 20)) drop-shadow(0 0 6px rgb(57, 255, 20)) drop-shadow(0 0 14px rgba(57, 255, 20, .9)) drop-shadow(0 0 24px rgba(57, 255, 20, .6)); }
.gr-mode-uv.is-on { border-color: #a855f7; background: color-mix(in srgb, #7c3aed 45%, rgba(10, 10, 20, .7)); box-shadow: 0 0 14px rgba(168, 85, 247, .55); }
@media (prefers-reduced-motion: reduce) { .gr-uv-shade, .gr-uv-light, .gr-corner, .gr-nick { transition: none; } }

/* Bügeln (#204): Knick als Linie aus Stücken – jedes wird mit --flat glatter und glüht mit --heat */
.gr-crease.is-line { left: 0; width: 100%; height: 4px; transform-origin: 50% 50%; translate: 0 -50%; display: flex; opacity: 1; background: none; }
.gr-crease-seg {
  position: relative; flex: 1; height: 100%;
  opacity: calc(.85 - var(--flat, 0) * .75);
  background: linear-gradient(rgba(255, 255, 255, .6), rgba(0, 0, 0, .5));
  box-shadow: 0 0 calc(var(--heat, 0) * 10px) rgba(255, 120, 30, var(--heat, 0));
}
.gr-crease.is-ironed .gr-crease-seg { --heat: 0; }
.gr-burn {
  position: absolute; left: 50%; top: 50%; width: 14px; height: 9px; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(60, 30, 10, .95) 0 35%, rgba(120, 60, 20, .6) 60%, transparent 75%);
}
.gr-card.is-revealed .gr-crease.is-line { background: none; }
.gr-card.is-revealed .gr-crease-seg { background: #ef4444; opacity: calc(.95 - var(--flat, 0) * .6); }
.gr-card.is-revealed .gr-burn { outline: 2px solid #ef4444; outline-offset: 1px; }
/* Bügeleisen: warmer Schein unter dem Zeiger, solange gedrückt */
.gr-stage.mode-iron { cursor: crosshair; }
.gr-iron-glow {
  position: absolute; z-index: 4; left: var(--ix, 50%); top: var(--iy, 50%); width: 52px; height: 52px; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .15s ease;
  background: radial-gradient(circle, rgba(255, 190, 120, .45) 0 30%, rgba(255, 120, 40, .2) 60%, transparent 72%);
  box-shadow: 0 0 0 1px rgba(255, 200, 150, .5);
}
.gr-stage.mode-iron.iron-on .gr-iron-glow { opacity: 1; }
.gr-iron-meter { height: 8px; margin: 12px 0 0; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--color-divider) 60%, transparent); }
.gr-iron-meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fbbf24, #f97316); transition: width .1s linear; }
.gr-iron-meter.is-hot span { background: linear-gradient(90deg, #f97316, #ef4444); box-shadow: 0 0 10px #ef4444; }
.gr-iron-result { margin: 10px 0 0; font-size: 14px; }

/* Messen (Zentrierung): Messlinien auf der Vorderseite, Anzeige der Ränder unten auf der Bühne */
.gr-stage.mode-measure { cursor: crosshair; }
.gr-measure { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; }
.gr-stage.mode-measure .gr-measure { display: block; }
.gr-guide { position: absolute; background: #22d3ee; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); opacity: .85; }
.gr-guide-l, .gr-guide-r { top: 0; bottom: 0; width: 1px; transform: translateX(-50%); }
.gr-guide.is-active { background: #facc15; opacity: 1; }
.gr-measure-read {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; pointer-events: none;
  display: grid; gap: 2px; padding: 7px 12px; border-radius: var(--radius-md, 8px); width: max-content; max-width: calc(100% - 24px);
  font: 500 12px var(--font); color: var(--color-neutral-200); background: rgba(10, 10, 20, .75); border: 1px solid var(--color-neutral-700);
}
.gr-measure-read[hidden] { display: none; }
.gr-measure-row { display: flex; justify-content: space-between; gap: 14px; }
.gr-measure-row b { color: #facc15; font-variant-numeric: tabular-nums; }
.gr-stage.mode-measure .gr-hint { bottom: 70px; }
.gr-measure-cap { margin-top: 2px; color: #facc15; font-weight: 600; }

/* Slab-Etikett nach dem Vorbild PSA (#204): weißes Etikett mit rotem Rahmen, links Kürzel, Karte und Zertifikat,
   rechts Notenwort über der großen Note. Gilt für Kundenslabs im Grading-Shop (.gr-slab-label) und Slabs der Mitglieder (.foil-ticket). */
.gr-slab-label, .foil-ticket { background: #fbfbf8; color: #111; box-shadow: inset 0 0 0 .9cqw #c8102e, inset 0 0 0 calc(.9cqw + 1px) #fff, 0 1px 3px rgba(0, 0, 0, .35); font-weight: 700; }
.gr-slab-info strong, .gr-slab-cert strong { color: #c8102e; letter-spacing: .12em; font-weight: 900; }
.gr-slab-info span { color: #222; }
.gr-slab-certno { font-variant-numeric: tabular-nums; font-size: .82em; color: #555 !important; letter-spacing: .06em; }
.gr-slab-score { display: grid; justify-items: end; flex: none; line-height: 1; }
.gr-slab-word { color: #111; letter-spacing: .08em; font-size: .9em; }
.gr-slab-grade { color: #111; font-weight: 900; letter-spacing: -.04em; }
.gr-slab-cert span { color: #444; }
.gr-slab-barcode { background: repeating-linear-gradient(90deg, #111 0 .6cqw, transparent .6cqw 1cqw, #111 1cqw 1.3cqw, transparent 1.3cqw 2cqw, #111 2cqw 3cqw, transparent 3cqw 3.4cqw); }

/* Schritte: Balken mit Beschriftung */
.gr-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 0; counter-reset: none; }
.gr-steps li {
  display: flex; flex-direction: column; gap: 6px; padding: 0; border: 0; border-radius: 0; background: none;
  font-size: 12px; font-weight: 500; color: var(--color-neutral-500);
  min-width: 0; overflow-wrap: anywhere; /* alte Regel oben setzt 110 px – auf schmalen Handys lief „Zurückschicken“ über */
}
.gr-steps li::before { content: ""; height: 3px; border-radius: 3px; background: var(--color-neutral-800); }
.gr-steps li.is-active { color: var(--color-text); background: none; }
.gr-steps li.is-active::before { content: ""; background: var(--color-accent); box-shadow: 0 0 8px var(--color-accent); }
.gr-steps li.is-done { color: var(--color-neutral-300); }
.gr-steps li.is-done::before { content: ""; background: var(--color-accent-700); }

/* Bedienfelder */
.gr-panel { display: flex; flex-direction: column; gap: 14px; min-height: 120px; }
.gr-panel[hidden] { display: none; }
.gr-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gr-text { margin: 0; max-width: 520px; font-size: 14px; line-height: 1.55; color: var(--color-neutral-300); }
.gr-text b { font-weight: 500; color: var(--color-text); }
/* Benoten: Ablauf in drei Stufen – 1 Obergrenze (hervorgehoben), 2 Abziehen, 3 Note; eine Linie verbindet die Stufen */
.gr-flow { position: relative; display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gr-flow::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: var(--color-divider); }
.gr-flow-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.gr-flow-num { z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 13px; font-weight: 700; background: var(--color-surface); color: var(--color-neutral-400); box-shadow: 0 0 0 2px var(--color-divider); }
.gr-flow-body { min-width: 0; padding: 4px 0; }
.gr-flow-title { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-300); }
.gr-flow-title small { font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--color-neutral-500); }
/* Stufe 1 trägt die Entscheidung: deutlich als Karte abgesetzt, Nummer in Akzentfarbe */
.gr-flow-step.is-cap .gr-flow-body { padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 9%, var(--color-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.gr-flow-step.is-cap .gr-flow-num { background: var(--color-accent); color: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.gr-flow-step.is-cap .gr-flow-title { color: var(--color-text); font-size: 13px; }
.gr-cap-row { display: flex; align-items: stretch; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.gr-cap-crease { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 64px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--color-divider) 45%, transparent); font-size: 11px; color: var(--color-neutral-400); }
.gr-cap-crease b, .gr-center-scale b { font-size: 16px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.gr-cap-center { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
.gr-cap-center > small { font-size: 11px; color: var(--color-neutral-400); }
.gr-cap-center > small span { color: var(--color-neutral-500); }
.gr-center-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.gr-center-scale li { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 2px; border-radius: 6px; background: color-mix(in srgb, var(--color-divider) 45%, transparent); font-size: 11px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .gr-center-scale li { font-size: 10px; padding: 5px 1px; } .gr-cap-center { min-width: 0; } }
.gr-minus-list { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--color-neutral-400); }
.gr-minus-list b { font-weight: 600; color: var(--color-text); }
.gr-flow-step.is-result .gr-flow-num { background: var(--color-surface); color: var(--color-text); }
.gr-grades { margin: 0; }
.gr-grade {
  height: 44px; border-radius: var(--radius-md); border: 0; font: 500 16px var(--font); color: var(--color-neutral-200);
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.gr-grade:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.gr-grade.is-on { color: #fff; background: var(--color-accent-700); box-shadow: inset 0 0 0 1px var(--color-accent), 0 0 14px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.gr-grade.is-right { box-shadow: inset 0 0 0 2px var(--gr-green), 0 0 12px color-mix(in srgb, var(--gr-green) 40%, transparent); }
.gr-grade-row:has([data-gr-grade-ok][hidden]) { display: none; }
.gr-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gr-result:not(:has(> :not([hidden]))) { display: none; }
.gr-verdict {
  --vc: var(--color-neutral-500);
  flex: 1 1 280px; margin: 0; padding: 14px 16px; border: 0; border-radius: var(--radius-md); font-size: 13px; color: var(--color-neutral-300);
  background: color-mix(in srgb, var(--vc) 10%, var(--color-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vc) 55%, transparent);
}
.gr-verdict strong { display: block; margin-bottom: 3px; font-size: 14px; font-weight: 500; color: var(--vc); }
.gr-verdict.is-right, .gr-verdict.is-close, .gr-verdict.is-wrong { border: 0; background: color-mix(in srgb, var(--vc) 10%, var(--color-surface)); }
.gr-verdict.is-right { --vc: var(--gr-green); }
.gr-verdict.is-close { --vc: var(--gr-yellow); }
.gr-verdict.is-wrong { --vc: var(--gr-red); }
.gr-meter {
  position: relative; flex: 1 1 280px; height: 16px; margin: 0; border: 0; border-radius: 999px; overflow: visible;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gr-red) 35%, transparent), color-mix(in srgb, var(--gr-yellow) 35%, transparent) 35%, color-mix(in srgb, var(--gr-green) 55%, transparent) 50%, color-mix(in srgb, var(--gr-yellow) 35%, transparent) 65%, color-mix(in srgb, var(--gr-red) 35%, transparent));
  box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.gr-meter-zone { top: -4px; bottom: -4px; border-radius: 4px; background: none; box-shadow: inset 0 0 0 1.5px var(--gr-green); }
.gr-meter-needle { top: -6px; bottom: -6px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff; }
.gr-seal-result { margin: 0; font-size: 14px; }

/* Leerer Tisch / Feierabend */
.gr-empty {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 32px; text-align: left;
  border-radius: var(--radius-lg);
  background: radial-gradient(80% 100% at 0% 0%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 70%), var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-accent-800);
}
.gr-empty h2 { margin: 0; }
.gr-empty p { margin: 0; font-size: 14px; color: var(--color-neutral-400); }

/* Heute erledigt */
.gr-done-wrap { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.gr-done-wrap h2 { margin: 0 0 4px; font-size: 16px; }
.gr-done { display: flex; flex-direction: column; gap: 0; }
.gr-done li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--color-divider); }
.gr-done-thumb { width: 36px; aspect-ratio: 720 / 1008; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--rar, var(--color-neutral-800)); }
.gr-done-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.gr-done-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; }
.gr-done-info b { font-weight: 500; }
.gr-done-meta { font-size: 12px; color: var(--color-neutral-500); }
.gr-pay { margin: 0; font-size: 14px; font-weight: 500; color: var(--gr-green); font-variant-numeric: tabular-nums; }

/* Seitenleiste: Stufe und Ausbau */
.gr-shop {
  display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 0 40px color-mix(in srgb, var(--color-accent) 10%, transparent);
}
.gr-shop h2 { margin: 0; font-size: 18px; }
/* Name und Kürzel des Shops (#204) – das Kürzel wie auf dem Slab-Etikett */
.gr-shop-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; overflow-wrap: anywhere; }
.gr-shop-code { padding: 1px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--color-accent-300); box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.gr-rename summary { cursor: pointer; font-size: 12px; color: var(--color-neutral-500); }
.gr-rename .form { margin-top: 10px; }
.gr-name-form { max-width: 360px; margin: 16px auto 0; text-align: left; }
.gr-facts { gap: 8px 12px; margin: 0; font-size: 13px; }
.gr-facts dt { color: var(--color-neutral-400); }
.gr-facts dd { font-weight: 400; font-variant-numeric: tabular-nums; }
.gr-tree-wrap { padding: 0 6px; }
.gr-tree { margin: 0; padding: 0; list-style: none; }
.gr-tree li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; }
.gr-tree li::before { content: ""; position: absolute; left: 10.5px; top: 22px; bottom: 2px; width: 1px; background: var(--color-neutral-800); }
.gr-tree li:last-child::before { display: none; }
.gr-tree li.is-done::before { background: var(--color-accent-700); }
.gr-tree-dot {
  display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 600; color: var(--color-neutral-500); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-neutral-700);
}
.gr-tree li.is-done .gr-tree-dot { color: #fff; background: var(--color-accent-700); box-shadow: none; }
.gr-tree li.is-next .gr-tree-dot { color: var(--color-accent-200); box-shadow: inset 0 0 0 1.5px var(--color-accent), 0 0 10px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.gr-tree-body { display: flex; flex-direction: column; gap: 3px; padding-bottom: 16px; }
.gr-tree-name { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 500; color: var(--color-neutral-400); }
.gr-tree li.is-done .gr-tree-name, .gr-tree li.is-next .gr-tree-name { color: var(--color-text); }
.gr-tree-name span { font-size: 12px; font-weight: 400; color: var(--color-neutral-500); font-variant-numeric: tabular-nums; }
.gr-tree-perk { font-size: 12px; line-height: 1.45; color: var(--color-neutral-500); }
.gr-side-note { margin: 0; padding: 0 6px; }

/* Forum (Redesign) */
.forum-page { display: flex; flex-direction: column; gap: 24px; }
.forum-narrow { max-width: 960px; }
.forum-thread { max-width: 860px; gap: 20px; }
.forum-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.forum-head h1 { margin: 0; font-size: 40px; letter-spacing: -.025em; }
.forum-narrow .forum-head h1 { font-size: 36px; }
.forum-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.forum-head-desc { font-size: 14px; color: var(--color-neutral-400); }
.forum-head-actions { display: flex; gap: 10px; align-items: center; }
.forum-report-count {
  display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; margin-left: 8px; padding: 0 4px;
  border-radius: 999px; font-size: 10px; font-weight: 600; line-height: 1; background: var(--color-accent-300); color: var(--color-bg);
}
.forum-label { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.forum-label a { color: var(--color-neutral-400); text-transform: none; letter-spacing: 0; }
.forum-sub { font-size: 12px; color: var(--color-neutral-500); }
.forum-sub .user-link { color: var(--color-neutral-400); }
.forum-empty { margin: 0; padding: 24px 6px; font-size: 14px; color: var(--color-neutral-500); }
.forum-ellipsis { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forum-dot { flex: none; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--color-accent-300); box-shadow: 0 0 8px var(--color-accent); display: inline-block; vertical-align: middle; }
.forum-team {
  display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-accent-200); background: var(--color-accent-900); box-shadow: inset 0 0 0 1px var(--color-accent-700); vertical-align: middle;
}
.forum-icon { flex: none; display: block; }
.forum-pin { display: inline-flex; align-items: center; gap: 5px; color: var(--color-accent-300); }
.forum-lock { display: inline-flex; color: var(--color-neutral-500); }

/* Suche */
.forum-search { position: relative; max-width: 560px; margin: 0; }
.forum-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--color-neutral-500); pointer-events: none; }
.forum-search .input { width: 100%; height: 44px; padding-left: 40px; font-size: 15px; }

/* Übersicht: Hauptspalte + Neueste Themen */
.forum-layout { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; }
.forum-main { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.forum-side { flex: 0 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
.forum-side > .forum-label { padding: 0 4px 8px; }
@media (min-width: 960px) { .forum-side { position: sticky; top: 84px; } }
.forum-latest { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.forum-latest:hover { background: var(--color-surface); }
.forum-latest-title { display: flex; align-items: center; font-size: 14px; color: var(--color-neutral-300); }
.forum-latest.is-unread .forum-latest-title { font-weight: 500; color: var(--color-text); }

/* Gruppen und Zeilen */
.forum-group { display: flex; flex-direction: column; margin: 0; }
.forum-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 6px 10px; border-bottom: 1px solid var(--color-neutral-800); }
.forum-group-head h2 { margin: 0; font-size: 18px; }
.forum-group-head h2 a { color: inherit; text-decoration: none; }
.forum-group-head h2 a:hover { color: var(--color-accent-300); }
.forum-group-desc { font-size: 13px; color: var(--color-neutral-500); }
.forum-thead {
  display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 170px); gap: 16px; padding: 0 6px 10px;
  border-bottom: 1px solid var(--color-neutral-800); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500);
}
.forum-thead span:not(:first-child) { text-align: right; }
.forum-rows { margin: 0; padding: 0; list-style: none; }
.forum-trow, .forum-crow {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 170px); gap: 16px; align-items: center;
  padding: 14px 6px; border-bottom: 1px solid var(--color-divider); transition: background .15s;
}
.forum-crow { grid-template-columns: minmax(0, 1fr) 140px minmax(0, 200px); padding: 16px 6px; }
.forum-trow:hover, .forum-crow:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.forum-trow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.forum-trow-title, .forum-crow-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; color: var(--color-neutral-300); text-decoration: none; }
.forum-crow-title { font-weight: 500; color: var(--color-text); }
.forum-trow-title .forum-dot, .forum-crow-title .forum-dot { margin-left: 0; }
.forum-trow.is-unread .forum-trow-title { font-weight: 500; color: var(--color-text); }
.forum-crow.is-read .forum-crow-title { color: var(--color-neutral-300); }
/* Die ganze Zeile ist anklickbar; Links in der Zeile liegen darüber */
.forum-stretch::after { content: ""; position: absolute; inset: 0; }
.forum-trow .user-link, .forum-last { position: relative; z-index: 1; }
.forum-count { font-size: 12px; color: var(--color-neutral-500); text-align: right; }
.forum-crow-last { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: right; }
.forum-last { display: block; min-width: 0; font-size: 12px; color: var(--color-neutral-500); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.forum-crow-last .forum-last { font-size: 13px; color: var(--color-neutral-300); }
.forum-last:hover { color: var(--color-text); }
.forum-crow.is-unread .forum-crow-last .forum-last { color: var(--color-accent-300); }
@media (max-width: 640px) {
  .forum-thead { display: none; }
  .forum-trow, .forum-crow { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .forum-trow-main { grid-column: 1 / -1; }
  .forum-count, .forum-last, .forum-crow-last { text-align: left; }
  .forum-trow .forum-last { text-align: right; }
  .forum-crow-last { grid-column: 1 / -1; }
}

/* Bereich wählen (Neues Thema) */
.forum-choose { display: flex; flex-direction: column; }
.forum-choose a { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border-bottom: 1px solid var(--color-divider); color: inherit; text-decoration: none; border-radius: var(--radius-md); }
.forum-choose a:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.forum-choose b { font-weight: 500; }

/* Pfad */
.forum-crumbs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; font-size: 13px; color: var(--color-neutral-500); }
.forum-crumbs a { color: var(--color-neutral-400); text-decoration: none; }
.forum-crumbs a:hover { color: var(--color-text); }

/* Thema */
.forum-thread-head { align-items: flex-start; }
.forum-thread-head h1 { font-size: 34px; line-height: 1.15; text-wrap: pretty; overflow-wrap: anywhere; }
.forum-thread-head form { margin: 0; }
.forum-thread-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-500); }
.forum-thread-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.forum-thread-meta .user-link { color: var(--color-neutral-400); }
.forum-upvote {
  display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--radius-md); font: 500 14px var(--font);
  color: var(--color-neutral-300); background: transparent; border: 1px solid var(--color-neutral-700); cursor: var(--cur-pointer, pointer);
}
.forum-upvote:hover { border-color: var(--color-accent); }
.forum-upvote.is-on { color: var(--color-accent-200); background: var(--color-accent-900); border-color: var(--color-accent-700); }
.forum-modbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; align-self: flex-start; padding: 6px 6px 6px 12px; border-radius: var(--radius-md); border: 1px dashed var(--color-neutral-700); }
.forum-modbar form { display: contents; }
.forum-modbar-label { margin-right: 4px; font-size: 11px; color: var(--color-neutral-500); }
.forum-modbar .btn { height: 28px; font-size: 12px; }
.forum-danger { color: var(--nein); }

.forum-posts { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.forum-post {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 20px 0; border: 0; border-top: 1px solid var(--color-divider);
  border-radius: 0; background: none; box-shadow: none;
}
.forum-post.is-new { box-shadow: inset 2px 0 0 var(--color-accent); padding-left: 12px; }
.forum-post.is-mine { border-color: var(--color-divider); }
.forum-avatar { width: 40px; height: 40px; border-radius: 8px; }
.forum-post-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.forum-post-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.forum-post-name { font-weight: 500; }
.forum-post-name .user-link { color: var(--color-text); }
.forum-post-head time { margin-left: auto; font-size: 12px; color: var(--color-neutral-500); }
.forum-op { font-size: 11px; color: var(--color-neutral-500); }
.forum-new {
  padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-accent-200); background: var(--color-accent-900); box-shadow: inset 0 0 0 1px var(--color-accent-700);
}
.forum-post .pn-body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-neutral-200); }
.forum-post .pn-body p { margin: 0 0 6px; }
.forum-post .pn-body > :last-child { margin-bottom: 0; }
.forum-post-gone { margin: 0; font-size: 14px; color: var(--color-neutral-500); }
.forum-original summary { font-size: 12px; color: var(--color-neutral-500); }
.forum-post-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--color-neutral-500); }
.forum-post-actions { display: inline-flex; align-items: center; gap: 16px; margin: 0; }
.forum-post-actions a, .forum-post-actions .link-btn { font-size: 12px; color: var(--color-neutral-400); text-decoration: none; }
.forum-post-actions a:hover, .forum-post-actions .link-btn:hover { color: var(--color-text); }
.forum-post-actions .link-btn-muted { color: var(--color-neutral-500); }
.forum-post-actions .forum-del:hover { color: var(--nein); }

.forum-reply { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; border-top: 1px solid var(--color-divider); }
.forum-reply h2 { margin: 0; font-size: 16px; }
.forum-reply .forum-empty { padding: 0; font-size: 13px; }
.forum-reply .pn-toolbar .chip { height: 30px; padding: 0 10px; font-size: 12px; }
.forum-reply textarea { min-height: 120px; }
.forum-page > p.muted { margin: 0; }
@media (max-width: 640px) { .forum-head h1, .forum-thread-head h1 { font-size: 30px; } }

/* Forum: Bereiche nur durch Linie und Abstand getrennt, Unterbereiche mit Ordner eingerückt */
.forum-main { gap: 56px; }
.forum-box .forum-group-head { align-items: center; padding: 0 6px 12px; }
.forum-box .forum-group-head h2 { font-size: 20px; }
.forum-box .forum-rows > li:last-child { border-bottom: 0; }
.forum-add-sub {
  margin-left: auto; height: 28px; padding: 0 10px; border-radius: var(--radius-md); border: 1px dashed var(--color-neutral-700);
  background: transparent; color: var(--color-neutral-400); font: 500 12px var(--font); cursor: var(--cur-pointer, pointer);
}
.forum-add-sub:hover { color: var(--color-text); border-color: var(--color-accent); }
/* Bereiche löschen (Admin/Dev): rechts im Kopf bzw. unter dem Namen des Unterbereichs */
.forum-head-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.forum-head-tools .forum-add-sub { margin-left: 0; }
.forum-del-form { margin: 0; }
.forum-del-row { position: relative; z-index: 1; align-self: flex-start; }
.forum-cat-del {
  height: 28px; padding: 0 10px; border-radius: var(--radius-md); border: 1px solid var(--color-neutral-700);
  background: transparent; color: var(--color-neutral-400); font: 500 12px var(--font); cursor: var(--cur-pointer, pointer);
}
.forum-del-row .forum-cat-del { height: 22px; padding: 0 8px; font-size: 11px; }
.forum-cat-del:hover { color: var(--nein); border-color: color-mix(in srgb, var(--nein) 70%, transparent); }
.forum-crow { grid-template-columns: 22px minmax(0, 1fr) 140px minmax(0, 200px); }
.forum-crow-icon { display: flex; color: var(--color-neutral-500); }
.forum-crow.is-own .forum-crow-title { color: var(--color-neutral-300); font-weight: 400; }
.forum-crow.is-own.is-unread .forum-crow-title { color: var(--color-text); font-weight: 500; }
.forum-crow.is-sub { margin-left: 28px; }
.forum-crow.is-sub .forum-crow-icon { color: var(--color-accent-300); }
/* Auf der Bereich-Seite stehen nur Unterbereiche im Kasten – ohne Einrückung */
.forum-narrow .forum-crow.is-sub { margin-left: 0; }
.forum-sub-of { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-accent-300); }
.forum-sub-of a { color: inherit; }
.forum-threads-title { margin: 0 0 12px; font-size: 18px; }
.forum-move { display: inline-flex; align-items: center; gap: 6px; }
.forum-move select { height: 28px; padding: 0 8px; font-size: 12px; max-width: 220px; }
@media (max-width: 640px) {
  .forum-crow { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .forum-crow .forum-trow-main { grid-column: 2 / -1; }
  .forum-crow .forum-count { grid-column: 2; }
  .forum-crow .forum-crow-last { grid-column: 2 / -1; }
  .forum-crow.is-sub { margin-left: 16px; }
}

/* Forum: Schreiben, Bearbeiten, Meldungen (Redesign) */
.forum-write { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.forum-field { display: flex; flex-direction: column; gap: 8px; }
.forum-field input[type="text"] { width: 100%; height: 44px; font-size: 15px; }
.forum-field textarea { width: 100%; min-height: 180px; font-size: 15px; line-height: 1.55; }
.forum-field .pn-toolbar { margin: 0; }
.forum-field .pn-toolbar .chip { min-height: 30px; padding: 0 10px; font-size: 12px; font-weight: 500; }
.forum-field > p, .forum-reply .field > p { margin: 0; font-size: 12px; color: var(--color-neutral-500); }
.forum-write-actions { display: flex; justify-content: flex-end; gap: 10px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.forum-hint {
  margin: 0; padding: 12px 14px; border-radius: var(--radius-md); font-size: 13px; line-height: 1.55; color: var(--color-neutral-300);
  box-shadow: inset 0 0 0 1px var(--color-accent-700);
}
.forum-reports { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.forum-report { display: flex; flex-direction: column; gap: 10px; padding: 18px 0; border-top: 1px solid var(--color-divider); }
.forum-report:last-child { border-bottom: 1px solid var(--color-divider); }
.forum-report-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; }
.forum-report-head time { font-size: 12px; color: var(--color-neutral-500); }
.forum-report-reason { margin: 0; font-size: 14px; color: var(--color-neutral-300); }
.forum-report-post { display: flex; flex-direction: column; gap: 4px; padding-left: 14px; border-left: 2px solid var(--color-neutral-700); }
.forum-report-post p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--color-neutral-200); overflow-wrap: anywhere; }
.forum-report-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.forum-report-actions form { margin: 0; }

/* Forum: Melden mit Grund, Mod-Log */
.forum-post-actions { flex-wrap: wrap; }
.forum-report-fold summary { list-style: none; }
.forum-report-fold summary::-webkit-details-marker { display: none; }
.forum-report-fold[open] { flex-basis: 100%; }
.forum-report-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.forum-report-form .input { flex: 1 1 240px; height: 32px; font-size: 13px; }
.forum-modlog { font-size: 13px; }
.forum-modlog-detail { color: var(--color-neutral-400); overflow-wrap: anywhere; }

/* Forum: Einbettungen (Karte, Wette, Profil) und @Erwähnungen */
.forum-embed {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 2px 0; padding: 6px 12px 6px 6px; vertical-align: middle;
  border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); color: inherit; text-decoration: none; line-height: 1.3;
}
a.forum-embed:hover { box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.forum-embed img { flex: none; border-radius: 4px; }
.forum-embed-card { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar, var(--color-neutral-700)) 45%, transparent); }
.forum-embed-bet { padding-left: 12px; }
.forum-embed-avatar { border-radius: 50%; }
.forum-embed-text { display: flex; flex-direction: column; min-width: 0; }
.forum-embed-kicker { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.forum-embed-title { font-size: 14px; font-weight: 500; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forum-embed-sub { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-neutral-400); }
.forum-mention { font-weight: 500; }

/* Forum: Reaktionen */
.forum-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.forum-react {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 0; border-radius: 999px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); color: var(--color-neutral-300);
  font: 500 12px var(--font); font-variant-numeric: tabular-nums; line-height: 1;
}
button.forum-react { cursor: var(--cur-pointer, pointer); }
button.forum-react:hover { box-shadow: inset 0 0 0 1px var(--color-neutral-600); }
.forum-react.is-zero { opacity: .45; }
.forum-react.is-zero:hover, .forum-react.is-zero:focus-visible { opacity: 1; }
.forum-react.is-on { color: var(--color-accent-200); background: var(--color-accent-900); box-shadow: inset 0 0 0 1px var(--color-accent-700); }

/* Forum: Umfrage */
.forum-poll { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.forum-poll h2 { margin: 0; font-size: 18px; }
.forum-poll p { margin: 0; }
.forum-poll-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.forum-poll-head form { margin: 0; }
.forum-poll-vote { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.forum-poll-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.forum-poll-results { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.forum-poll-results li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; font-size: 14px; }
.forum-poll-num { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--color-neutral-400); }
.forum-poll-bar { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--color-neutral-800); overflow: hidden; }
.forum-poll-bar span { display: block; height: 100%; border-radius: inherit; background: var(--color-neutral-500); }
.forum-poll-results li.is-leading .forum-poll-bar span { background: var(--color-accent); }
.forum-poll-results li.is-mine .forum-poll-label { font-weight: 500; }
.forum-poll-new summary { cursor: var(--cur-pointer, pointer); }
.forum-poll-fields { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }
.forum-field textarea.forum-poll-options { min-height: 100px; }

/* Forum: Hall of Fame */
.forum-hof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px 32px; padding: 16px 6px 4px; }
.forum-hof-list { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.forum-hof-list h2 { margin: 0; font-size: 16px; }
.forum-hof-list .forum-empty { padding: 0; font-size: 13px; }
.forum-hof-rows li { font-size: 14px; }
.forum-hof-rows strong { font-weight: 500; }
.forum-hof-rank { width: 20px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--color-neutral-500); text-align: right; }
.forum-hof-value { font-variant-numeric: tabular-nums; color: var(--color-accent-300); }

/* IHK (Redesign) – im Stil der TCG-Seite: Hero oben, Spielfläche mit lila Licht, Quests als Karten mit Seltenheitsfarbe */
.ihk-page { display: flex; flex-direction: column; gap: 32px; }
.ihk-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; }
.ihk-hero-text { display: flex; flex-direction: column; gap: 10px; max-width: 560px; }
.ihk-hero-text h1 { margin: 0; font-size: clamp(32px, 1.6rem + 2vw, 44px); }
.ihk-hero-sub { margin: 0; color: var(--color-neutral-400); font-size: 15px; text-wrap: pretty; }
.ihk-hero-side { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ihk-day { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ihk-day-pips { display: flex; gap: 6px; }
.ihk-pip { width: 22px; height: 6px; border-radius: 999px; background: var(--color-neutral-800); }
.ihk-pip.is-done { background: var(--color-accent-300); box-shadow: 0 0 10px var(--color-accent); }
.ihk-day-text { font-size: 13px; color: var(--color-neutral-400); }
.ihk-day-text strong { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Spielfläche */
.ihk-stage {
  margin-bottom: 0; padding: 32px 28px; gap: 28px; border-radius: var(--radius-lg); color: var(--text); overflow: hidden;
  background:
    radial-gradient(ellipse 60% 70% at 50% 110%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 50% 0%, color-mix(in srgb, var(--text) 5%, transparent), transparent 70%),
    var(--color-surface);
  border: 1px solid var(--color-neutral-800); box-shadow: var(--shadow-lg);
}
.ihk-col-label { align-self: stretch; text-align: center; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-300); }
.ihk-col-label.is-enemy { color: #f0857a; }
.ihk-slot { border: 1px solid var(--color-neutral-700); border-radius: 14px; background: color-mix(in srgb, var(--color-bg) 70%, transparent); box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }
.ihk-player .ihk-slot-card { border-color: var(--color-accent-700); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent), 0 18px 40px rgba(0, 0, 0, .45); }
.ihk-slot-enemy { border-color: color-mix(in srgb, #e5483a 55%, transparent); box-shadow: 0 0 40px color-mix(in srgb, #e5483a 18%, transparent), 0 18px 40px rgba(0, 0, 0, .45); }
.ihk-slot-item { border-style: dashed; border-color: var(--color-neutral-600); border-radius: 10px; }
.ihk-slot-empty { color: var(--color-neutral-500); font-weight: 500; font-size: 13px; }
.ihk-slot-empty small { color: var(--color-neutral-600); }
.ihk-slot.is-drop-hint { border-color: var(--color-accent-300); }
.ihk-slot.is-target { box-shadow: 0 0 0 3px var(--color-accent-300), 0 0 40px var(--color-accent); }
.ihk-vs {
  align-self: center; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--text);
  background: var(--color-bg); border: 1px solid var(--color-neutral-700);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 10%, transparent), 0 0 30px color-mix(in srgb, var(--color-accent) 35%, transparent);
}

/* Quests: Karte mit Seltenheitsfarbe am Rand */
.ihk-quest {
  padding: 16px 18px 14px 20px; border-radius: var(--radius-md); color: var(--text);
  background: color-mix(in srgb, var(--color-bg) 65%, transparent); border: 1px solid var(--color-neutral-800); box-shadow: none;
}
.ihk-quest::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rar, var(--color-accent)); box-shadow: 0 0 12px var(--rar, var(--color-accent)); }
.ihk-quest.r-holo::before { background: linear-gradient(180deg, #ffd1f0, #a8e6ff, #d9b8ff); }
.ihk-quest h2 { color: var(--text); font-size: 16px; font-weight: 600; }
.ihk-quest p { color: var(--color-neutral-400); font-size: 13px; }
.ihk-quest-dur { font-weight: 500; font-size: 12px; color: var(--color-neutral-500); }
.ihk-quest-meta { font-size: 12px; color: var(--color-neutral-400); border-top-color: var(--color-divider); }
.ihk-quest-meta strong { color: var(--text); font-weight: 500; }
.ihk-level { font-weight: 600; }
.ihk-hybrid { border-color: color-mix(in srgb, var(--color-accent-300) 60%, transparent); color: var(--color-accent-300); font-weight: 500; font-size: 11px; letter-spacing: .04em; }
.ihk-offers { gap: 12px; }
.ihk-offer { grid-template-columns: 64px 1fr; }
.ihk-offer:hover { transform: translateY(-2px); border-color: var(--color-neutral-600); background: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.ihk-offer h2 { font-size: 15px; }
.ihk-offer p { font-size: 12.5px; }
.ihk-offer-thumb { width: 64px; border-radius: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .4); }
.ihk-offer.is-selected { border-color: var(--color-accent-300); box-shadow: 0 0 0 1px var(--color-accent-300), 0 0 30px color-mix(in srgb, var(--color-accent) 35%, transparent); }
.ihk-offer:focus-visible, .ihk-pick-card:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.ihk-info { font-size: 13px; color: var(--color-neutral-400); }
.ihk-info a { color: var(--color-accent-300); }

/* Laufende Quest und Auswertung */
.ihk-timer { padding: 14px 18px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 65%, transparent); border: 1px solid var(--color-neutral-800); font-size: 14px; color: var(--color-neutral-400); }
.ihk-timer strong { display: block; margin-top: 4px; color: var(--color-accent-300); font-size: 28px; font-weight: 600; text-shadow: 0 0 20px var(--color-accent); }
.ihk-fight { padding: 16px 18px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 65%, transparent); border: 1px solid var(--color-neutral-800); }
.ihk-bar-label { font-size: 12px; font-weight: 500; color: var(--color-neutral-400); }
.ihk-bar { height: 10px; background: var(--color-neutral-900, rgba(0, 0, 0, .5)); border-color: var(--color-neutral-800); }
.ihk-bar-progress { background: linear-gradient(90deg, var(--color-accent-700), var(--color-accent-300)); box-shadow: 0 0 14px var(--color-accent); }
.ihk-bar-progress2 { background: linear-gradient(90deg, #0e7490, #67e8f9); box-shadow: 0 0 14px rgba(34, 211, 238, .55); }
.ihk-bar-time { background: linear-gradient(90deg, #b42318, #f59e0b); }
.ihk-skip { background: none; color: var(--color-neutral-400); border-color: var(--color-neutral-700); }
.ihk-result { border: 1px solid var(--color-neutral-800); background: var(--color-surface); }
.ihk-result.is-win { border-color: color-mix(in srgb, #22c55e 45%, transparent); box-shadow: 0 0 40px color-mix(in srgb, #22c55e 18%, transparent); }
.ihk-result.is-fail { border-color: color-mix(in srgb, #e5483a 45%, transparent); box-shadow: 0 0 40px color-mix(in srgb, #e5483a 15%, transparent); }
.ihk-result strong { font-size: 24px; font-weight: 600; }
.ihk-result p { color: var(--color-neutral-400); font-size: 14px; }
.ihk-abilities, .ihk-ability-banner { border-color: color-mix(in srgb, var(--color-accent-300) 40%, transparent); background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-neutral-300); }
.ihk-abilities strong, .ihk-ability-banner strong { color: var(--color-accent-200); }

/* Karten wählen */
.ihk-pick-head { margin-bottom: 18px; align-items: flex-end; }
.ihk-pick-head h2 { margin: 6px 0 0; }
.ihk-pick-head .btn { min-height: 44px; padding: 0 22px; font-size: 15px; box-shadow: 0 0 24px color-mix(in srgb, var(--color-accent) 30%, transparent); }
.ihk-pick-head .btn:disabled { box-shadow: none; }
.ihk-pick-grid { gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(30%, 120px), 1fr)); }
.ihk-pick-card img { border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .4); }
.ihk-pick-card:hover img { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--rar, var(--color-neutral-600)), 0 14px 30px rgba(0, 0, 0, .5); }
.ihk-pick-card.is-selected img { box-shadow: 0 0 0 2px var(--color-accent-300), 0 0 30px var(--color-accent); }
.ihk-pick-card.is-boost img { box-shadow: 0 0 0 2px #67e8f9, 0 0 26px rgba(34, 211, 238, .55); }
.ihk-pick-stats { grid-template-columns: repeat(4, auto); justify-content: center; gap: 2px 8px; margin-top: 8px; font-size: 11px; font-weight: 500; color: var(--color-neutral-500); }
.ihk-pick-sub { margin: 28px 0 14px; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); }
.ihk-zoom-info h2 { color: var(--text); }
.ihk-zoom-info p { color: var(--color-neutral-400); }

@media (max-width: 760px) {
  .ihk-page { gap: 24px; }
  .ihk-hero { align-items: flex-start; }
  .ihk-day { align-items: flex-start; }
  .ihk-stage { padding: 18px 14px; gap: 14px; }
  .ihk-vs { display: none; }
  .ihk-pick-stats { grid-template-columns: 1fr 1fr; }
}

/* IHK: Spielfläche und innere Kästen (außer den Quest-Karten) ohne Rahmen, Hintergrund und Schatten (Krisztian) */
.ihk-stage, .ihk-timer, .ihk-fight, .ihk-result,
.ihk-slot, .ihk-player .ihk-slot-card, .ihk-slot-enemy { border: 0; background: none; box-shadow: none; }
.ihk-stage { padding: 0; }
/* leere Felder bleiben als gestrichelter Umriss erkennbar (sonst sieht man nicht, wohin die Karte soll) */
.ihk-slot:not(:has(img)) { outline: 1px dashed var(--color-neutral-700); outline-offset: -1px; }
.ihk-slot.is-drop-hint { outline-color: var(--color-accent-300); }
.ihk-slot img { border-radius: 14px; }
.ihk-pick-head { padding-top: 10px; border-top: 2px solid var(--color-divider); }

/* Start-Knopf im Stil der Album-Kachel */
.ihk-start-tile {
  position: relative; display: flex; align-items: center; gap: 20px; width: min(100%, 380px); min-height: 112px; padding: 18px 22px;
  border: 0; border-radius: var(--radius-lg); overflow: hidden; color: var(--text); font: inherit; text-align: left; cursor: var(--cur-pointer);
  background: radial-gradient(120% 90% at 0% 50%, var(--color-accent-800), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-800); transition: box-shadow .25s ease, opacity .25s ease;
}
.ihk-start-tile:not(:disabled):hover, .ihk-start-tile:not(:disabled):focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.ihk-start-tile:disabled { cursor: var(--cur-no); opacity: .55; filter: grayscale(.4); }
.ihk-start-art { position: relative; flex: none; width: 64px; height: 72px; }
.ihk-start-doc { position: absolute; left: 0; top: 4px; fill: var(--color-bg); stroke: var(--color-neutral-600); stroke-width: 1.5; stroke-linecap: round; transform: rotate(-6deg); }
.ihk-start-stamp {
  position: absolute; right: -2px; bottom: 0; padding: 3px 7px; border: 2px solid var(--color-accent-300); border-radius: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--color-accent-300); background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  transform: rotate(-12deg) translateY(-18px) scale(1.25); opacity: .35; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, box-shadow .35s ease;
}
.ihk-start-tile:not(:disabled) .ihk-start-stamp { opacity: .7; }
.ihk-start-tile:not(:disabled):hover .ihk-start-stamp, .ihk-start-tile:not(:disabled):focus-visible .ihk-start-stamp {
  transform: rotate(-12deg); opacity: 1; box-shadow: 0 0 16px var(--color-accent);
}
.ihk-start-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.ihk-start-title { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.ihk-start-hint { font-size: 12px; color: var(--color-neutral-500); }
.ihk-start-tile:not(:disabled) .ihk-start-hint { display: none; }
.ihk-start-arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: 18px; transition: transform .25s ease;
}
.ihk-start-tile:not(:disabled):hover .ihk-start-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ihk-start-stamp, .ihk-start-arrow { transition: none; } }

/* IHK: Abstand unter der Spielfläche, Kopfzeile der Kartenwahl kompakt (Start-Kachel flacher, mittig neben dem Titel) */
.ihk-stage { margin-bottom: 36px; }
.ihk-pick-head { align-items: center; margin-bottom: 16px; }
.ihk-start-tile { min-height: 76px; padding: 12px 18px; gap: 16px; }
.ihk-start-art { width: 48px; height: 54px; }
.ihk-start-doc { width: 40px; height: 48px; top: 3px; }
.ihk-start-stamp { font-size: 10px; padding: 2px 5px; }
.ihk-start-title { font-size: 20px; }
.ihk-start-arrow { width: 36px; height: 36px; font-size: 16px; }
.ihk-stage { overflow: visible; } /* sonst wird die oberste Quest beim Anheben (hover) oben abgeschnitten */

/* Black Market: Neon-Schrift, die wie eine alte Leuchtreklame flackert (nur geöffnet; geschlossen grau, ohne Leuchten) */
.bm .bm-title h2 { color: var(--color-neutral-300); text-shadow: none; }
.bm.is-open .bm-title h2 { color: #f3e8ff; text-shadow: 0 0 6px #c084fc, 0 0 22px #a855f7, 0 0 44px #7e22ce; animation: bm-neon 5s infinite; }
@keyframes bm-neon {
  0%, 19%, 21%, 23%, 55%, 57%, 100% { opacity: 1; text-shadow: 0 0 6px #c084fc, 0 0 22px #a855f7, 0 0 44px #7e22ce; }
  20%, 22%, 56% { opacity: .55; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { .bm.is-open .bm-title h2 { animation: none; } }

/* ---------- Karten im Sleeve/Slab: Hervorhebung nach dem Einstecken (Album) ---------- */
.foil-slot.is-new { animation: foil-new 2.4s ease-out 1; }
@keyframes foil-new { 0% { transform: scale(.96); box-shadow: 0 0 0 2px var(--rar), 0 0 40px var(--rar); } 100% { transform: none; } }

/* ---------- Inventar: Slots mit Bild und Anzahl, Aktionen im Dialog; der Shop ist der zweite Reiter ---------- */
.bag-page { display: flex; flex-direction: column; gap: 16px; }
.bag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.bag-head h1 { display: flex; align-items: center; gap: 10px; margin: 0; }
.bag-head-r { display: flex; align-items: center; gap: 14px; }
.bag-wallet { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.bag-wallet small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.bag-wallet b { font-size: 17px; font-variant-numeric: tabular-nums; }
.bag-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--color-neutral-800); }
.bag-tab { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--color-neutral-400); font: 600 15px var(--font); cursor: var(--cur-pointer, pointer); }
.bag-tab:hover { color: var(--text); }
.bag-tab.active { color: var(--text); border-bottom-color: var(--color-accent-300); }
.bag-tab.is-shop { margin-left: auto; font-weight: 500; font-size: 14px; }
.bag-row-main .help-tip-body, .bag-head h1 .help-tip-body { left: 0; right: auto; } /* die Blase öffnet nach rechts, nicht aus dem Bild heraus */
.bag-head h1 .help-tip-body { font-family: var(--font); }
.bag-tab i { font-style: normal; padding: 1px 8px; border-radius: 999px; background: var(--color-accent-900); color: var(--color-accent-200); font-size: 12px; font-weight: 600; }
.bag-panel[hidden] { display: none; }
.bag-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.shop-chip { padding: 6px 14px; border: 0; border-radius: 999px; background: var(--color-surface); color: var(--color-neutral-300); font: 500 13px var(--font); box-shadow: 0 0 0 1px var(--color-neutral-800); cursor: var(--cur-pointer, pointer); transition: background .15s, color .15s, box-shadow .15s; }
.shop-chip:hover { color: var(--text); box-shadow: 0 0 0 1px var(--color-neutral-600); }
.shop-chip.active { background: var(--color-accent-900); color: var(--color-accent-200); box-shadow: 0 0 0 1px var(--color-accent-800); }

/* Bildflächen je Sorte: getönter Grund wie im Spiel-Inventar */
.bag-art-pack { background: radial-gradient(120% 90% at 50% 0%, #f0abfc30, transparent 62%), linear-gradient(160deg, #2b1a3d, #0f1424); }
.bag-art-folie { background: radial-gradient(120% 90% at 50% 0%, #7dd3fc38, transparent 62%), linear-gradient(160deg, #162a45, #0f1424); }
.bag-art-slab { background: radial-gradient(120% 90% at 50% 0%, #fde68a30, transparent 62%), linear-gradient(160deg, #2a2540, #0f1424); }

/* Slots */
.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.bag-slot { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 0; border-radius: 14px; background: var(--color-surface); color: var(--text); text-align: left; font: inherit; box-shadow: 0 0 0 1px var(--color-neutral-800); cursor: var(--cur-pointer, pointer); transition: transform .15s ease, box-shadow .15s ease; }
.bag-slot[hidden] { display: none; }
.bag-slot:hover, .bag-slot:focus-visible { outline: 0; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--color-accent-300), 0 10px 24px rgba(0, 0, 0, .4); }
.bag-art { display: flex; align-items: center; justify-content: center; height: 150px; padding: 14px; }
.bag-art img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); transition: transform .2s ease; }
.bag-slot:hover .bag-art img { transform: scale(1.06) rotate(-1.5deg); }
.bag-count { position: absolute; top: 8px; right: 8px; min-width: 30px; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.bag-name { padding: 9px 11px 10px; font-size: 14px; font-weight: 600; line-height: 1.25; }
.bag-sub { margin-top: -6px; padding: 0 11px 9px; font-size: 11.5px; color: var(--color-neutral-500); }
.bag-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 16px; color: var(--color-neutral-400); text-align: center; }
.bag-empty > span { font-size: 40px; }
.bag-empty p { margin: 0; }

/* Aktionen im Dialog */
.bag-dialog { width: min(100% - 32px, 440px); }
.bag-head-tools { display: inline-flex; align-items: center; gap: 6px; }
.bag-n { margin-left: 6px; color: var(--color-neutral-400); font-weight: 500; font-size: .85em; }
.bag-detail { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.bag-detail-art { display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; aspect-ratio: 5 / 7; box-shadow: 0 0 0 1px var(--color-neutral-800); }
.bag-detail-art img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 8px 18px rgba(0, 0, 0, .5); }
.bag-actions { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bag-actions form { margin: 0; }
.bag-note { margin: 0; font-size: 13px; color: var(--color-neutral-400); }
.bag-use { border-radius: 10px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.bag-use summary { padding: 9px 12px; color: var(--color-accent-300); font-size: 14px; font-weight: 500; cursor: var(--cur-pointer, pointer); }
.bag-use[open] summary { border-bottom: 1px solid var(--color-neutral-800); }
.bag-use form { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.bag-use select { width: 100%; }
.bag-more { margin-top: 4px; padding: 6px 0; border: 0; background: none; color: var(--color-neutral-400); font: 500 13px var(--font); text-align: left; cursor: var(--cur-pointer, pointer); }
.bag-more:hover { color: var(--color-accent-300); }

/* Shop: kompakte Liste */
.bag-shop { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bag-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 8px 14px; padding: 10px 14px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); scroll-margin-top: 90px; }
.bag-row:target { box-shadow: 0 0 0 2px var(--color-accent-300); }
.bag-row-art { display: flex; align-items: center; justify-content: center; width: 44px; height: 62px; padding: 4px; border-radius: 8px; }
.bag-row-art img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; }
.bag-row-main { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.bag-row-main b { font-weight: 600; }
.bag-row-main small { color: var(--color-neutral-500); font-size: 12px; }
.bag-row-buy { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; }
.bag-price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bag-buy { display: flex; align-items: center; gap: 8px; margin: 0; }
.shop-qty { display: inline-flex; align-items: stretch; flex: none; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 1px var(--color-neutral-700); }
.shop-qty button { width: 30px; border: 0; background: var(--color-neutral-800); color: var(--text); font: 600 17px/1 var(--font); cursor: var(--cur-pointer, pointer); }
.shop-qty button:hover { background: var(--color-neutral-700); }
.shop-qty input { width: 44px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--color-bg); color: var(--text); text-align: center; font: 600 14px var(--font); -moz-appearance: textfield; }
.shop-qty input::-webkit-outer-spin-button, .shop-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
@media (max-width: 560px) {
  .bag-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
  .bag-art { height: 124px; }
  .bag-row { grid-template-columns: 44px minmax(0, 1fr); }
  .bag-row-buy { grid-column: 1 / -1; justify-content: space-between; }
  .bag-detail { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .bag-slot, .bag-art img { transition: none; } .bag-slot:hover, .bag-slot:hover .bag-art img { transform: none; } }

/* Album: Slab-Regal ganz oben – die eigenen Slabs als einzelne Karten, leicht abgesetzt von den Seasons */
.album-slabs .tcg-slab-shelf { padding: 4px 2px 8px; }
.album-slabs .album-season-head h2 { display: flex; align-items: center; gap: 8px; }
.album-slabs .album-season-head h2::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, #fde68a, #c4b5fd); box-shadow: 0 0 10px #fde68a66; }
.tcg-in-slab { position: relative; text-decoration: none; }
.tcg-in-slab .tcg-art { opacity: .45; filter: grayscale(.4); }
.foil-trade summary { cursor: var(--cur-pointer, pointer); color: var(--color-accent-300); font-size: 14px; }
.foil-trade .form { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.foil-trade .field { margin: 0; }

/* Die Karte im Folien-Slab: vorne Karte + Etikett oben, hinten das Etikett mit dem Datum */
.foil-card { flex: none; width: 120px; container-type: inline-size; padding: 0; border: 0; background: none; perspective: 700px; cursor: var(--cur-pointer, pointer); }
.foil-inner { position: relative; display: block; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3, .7, .3, 1); }
.foil-card[aria-pressed="true"] .foil-inner { transform: rotateY(180deg); }
.foil-face { position: absolute; inset: 0; display: block; overflow: hidden; border-radius: 9px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  padding: 23cqw 4cqw 4cqw; background: linear-gradient(160deg, #e9f6ff26, #ffffff0d 40%, #c4b5fd26); box-shadow: inset 0 0 0 1px #ffffff40, 0 0 0 1px var(--rar, #ffffff30), 0 6px 18px rgba(0, 0, 0, .35); }
.foil-face img { display: block; width: 100%; height: auto; border-radius: 5px; }
/* Zentrierung (#73): Rand in der Farbe der Seltenheit, 3 % der Kartenbreite pro Seite bei perfekter Zentrierung,
   ungleich verteilt nach --cx/--cy (−1 … 1, gesetzt nur bei folierten Karten mit bekanntem Zustand) */
.foil-front img {
  box-sizing: border-box; border-style: solid; border-color: var(--rar, #c9c9d6); border-radius: 6px;
  border-left-width: calc(3cqw * (1 + var(--cx, 0))); border-right-width: calc(3cqw * (1 - var(--cx, 0)));
  border-top-width: calc(3cqw * (1 - var(--cy, 0))); border-bottom-width: calc(3cqw * (1 + var(--cy, 0)));
}
.foil-front { position: relative; transform: rotateY(0deg); }
/* Firefox: jede Seite eigene Ebene – sonst „plättet“ der Glanz (mix-blend-mode) die 3D-Karte: keine Rückseite, Vorderseite gespiegelt (#46) */
.foil-face { isolation: isolate; }
.foil-back { transform: rotateY(180deg); display: grid; place-items: center; }
.foil-back-art { display: block; width: 100%; height: 100%; border-radius: 5px; background: var(--gr-back);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.foil-sheen { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: screen; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, #ffffff55 32%, #a8d8ff40 38%, transparent 46%, transparent 60%, #f0abfc33 68%, transparent 76%); background-size: 250% 250%; animation: foil-sheen 6s ease-in-out infinite; }
@keyframes foil-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 100%; } }
/* Etikett des Slabs (Kürzel, Note, Zertifikat); hinten Zertifikat und Strichcode. Größen in cqw der Karte */
.foil-ticket { position: absolute; top: 3cqw; left: 5cqw; right: 5cqw; height: 17cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw;
  padding: 0 5cqw; border-radius: 2.5cqw; font: 700 4.2cqw/1.2 var(--font); /* Farben: PSA-Etikett bei .gr-slab-label */
  text-align: left; /* steckt die Karte in einem Button (Vitrine), würde das Etikett sonst mittig gesetzt */
  }
.foil-ticket .gr-slab-grade { font-size: 11cqw; }
/* #204: Slab = starres Klargehäuse mit dickem Rand, die Karte liegt in einer Vertiefung; Sleeve (Folie) = dünne, weiche
   Schutzhülle: kaum größer als die Karte, glänzend, oben offen – ohne Etikett und ohne Note */
.foil-inner.is-slab .foil-face { border-radius: 4cqw; background: linear-gradient(150deg, #ffffff30, #ffffff0a 35%, #dbeafe1f 70%, #ffffff26);
  box-shadow: inset 0 0 0 2.2cqw #ffffff14, inset 0 0 0 calc(2.2cqw + 1px) #ffffff40, inset 0 0 0 1px #ffffff80, 0 0 0 1px var(--rar, #ffffff30), 0 8px 20px rgba(0, 0, 0, .4); }
.foil-inner.is-slab .foil-front img { box-shadow: 0 0 0 1.2cqw #ffffff12, 0 0 0 calc(1.2cqw + 1px) #ffffff30; }
.foil-inner.is-sleeve .foil-face { padding: 2.6cqw 2.6cqw 3.2cqw; border-radius: 3.2cqw; background: linear-gradient(165deg, #ffffff2b, #ffffff08 40%, #ffffff17 75%, #ffffff0a);
  box-shadow: inset 0 0 0 1px #ffffff47, 0 0 0 1px var(--rar, #ffffff26), 0 5px 14px rgba(0, 0, 0, .32); }
/* offene Oberkante der Hülle: eine feine Lippe knapp über der Karte */
.foil-inner.is-sleeve .foil-front::before { content: ""; position: absolute; left: 1.4cqw; right: 1.4cqw; top: 1.2cqw; height: 0; z-index: 1; pointer-events: none;
  border-top: 1px solid #ffffff73; box-shadow: 0 1px 2px #0000002e; }
.foil-inner.is-sleeve .foil-sheen { opacity: .75; background: linear-gradient(105deg, transparent 15%, #ffffff40 26%, transparent 34%, transparent 58%, #ffffff2e 66%, transparent 72%); background-size: 260% 260%; }
.foil-card-big .foil-inner.is-sleeve .foil-face { padding: 2.6cqw 2.6cqw 3.2cqw; border-radius: 12px; }
.foil-card-big .foil-inner.is-slab .foil-face { border-radius: 22px; }
/* Unfoliertes Exemplar (#204): ohne Hülle, mit den sichtbaren Spuren (grading/condition.visibleMarks). Bewusst dezent –
   man sieht sie, wenn man die Karte dreht und genau hinschaut; die Note verraten sie nicht. */
.foil-inner.is-bare .foil-face { padding: 0; background: none; border-radius: 5cqw; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.foil-card-big .foil-inner.is-bare .foil-face { padding: 0; border-radius: 16px; }
.foil-inner.is-bare .foil-sheen { opacity: .35; }
.cm-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cm-scratch {
  position: absolute; height: max(1px, .45cqw); transform-origin: 0 50%; opacity: .55; mix-blend-mode: screen;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 18%, rgba(220, 235, 255, .7) 75%, transparent);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .18);
}
.cm-crease {
  position: absolute; left: -2%; width: 104%; height: max(2px, .8cqw); translate: 0 -50%; transform-origin: 50% 50%; opacity: .55;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .1) 45%, rgba(0, 0, 0, .45));
}
.cm-crease.is-ironed { opacity: .25; }
/* Exemplar-Plätze (beschädigte Exemplare) im Album und in Sammlungen – ein Knick trägt sein Schild, Kratzer nicht */
.hb-copy .hb-art { position: relative; }
/* Ø-Marktpreis (#204): im Handelsfenster, auf der Markt-Kachel und je Position im Angebot */
.hb-card-market { display: block; font-size: 11px; color: var(--color-neutral-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-avg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 12px; color: var(--color-neutral-400); }
.mk-avg b { font-weight: 600; font-size: 11px; }
.hb-card-pop, .mk-pop { display: block; font-size: 11px; color: var(--color-neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-line-market { white-space: nowrap; font-size: 11px; }
.ng-lines li:has(.ng-line-market) { flex-wrap: wrap; }
.hb-loupe { position: absolute; right: 6px; top: 6px; z-index: 3; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; font-size: 14px; line-height: 28px;
  background: rgba(14, 15, 26, .78); box-shadow: 0 0 0 1px var(--color-neutral-700); cursor: var(--cur-pointer, pointer); }
.hb-loupe:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.tcg-slot.copy-slot { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: var(--cur-pointer, pointer); }
.foil-tag { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; color: #0f172a; background: linear-gradient(90deg, #a8d8ff, #e9d5ff, #fbcfe8); }
.tcg-mark-foil { font-size: 11px; font-weight: 800; color: #0f172a; background: linear-gradient(135deg, #a8d8ff, #e9d5ff, #fbcfe8); }
@media (max-width: 420px) { .foil-card { width: 96px; } }
@media (prefers-reduced-motion: reduce) { .foil-sheen, .foil-slot.is-new { animation: none; } .foil-inner { transition: none; } }

a.tcg-mypack { color: inherit; text-decoration: none; }
.r-item { --rar: #c4b5fd; }
.tcg-badge.r-item { background: linear-gradient(135deg, #a8d8ff, #e9d5ff, #fbcfe8); color: #0f172a; }
.tcg-dot.r-item { background: #c4b5fd; }

/* Inventar-Kachel im Stil des IHK-Start-Knopfs, aber holografisch (Folie) */
.inv-tile {
  position: relative; display: flex; align-items: center; gap: 18px; min-height: 104px; padding: 16px 20px;
  border-radius: var(--radius-lg); overflow: hidden; color: var(--text); text-decoration: none;
  background: radial-gradient(120% 90% at 0% 50%, color-mix(in srgb, #a8d8ff 18%, transparent), transparent 65%),
    radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, #f0abfc 14%, transparent), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px color-mix(in srgb, #c4b5fd 45%, transparent); transition: box-shadow .25s ease;
}
.inv-tile:hover, .inv-tile:focus-visible { outline: 0; color: var(--text); box-shadow: 0 0 0 1px #c4b5fd, 0 0 40px color-mix(in srgb, #c4b5fd 28%, transparent); }
.inv-tile-art { position: relative; flex: none; width: 52px; height: 72px; }
.inv-tile-pack { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 5px; transform: rotate(-6deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.inv-tile-foil {
  position: absolute; inset: -4px -6px; border-radius: 7px; transform: rotate(-6deg) translate(18px, -26px); opacity: .55;
  background: linear-gradient(115deg, #a8d8ff66, #ffffff88 35%, #e9d5ff55 50%, #fbcfe866); box-shadow: inset 0 0 0 1.5px #ffffffaa;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .4s ease;
}
.inv-tile:hover .inv-tile-foil, .inv-tile:focus-visible .inv-tile-foil { transform: rotate(-6deg); opacity: .9; }
.inv-tile-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.inv-tile-title { display: inline-flex; align-items: center; gap: 8px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.inv-tile-hint { font-size: 12px; color: var(--color-neutral-500); }
.inv-tile-badge { position: absolute; top: 10px; right: 12px; }
.inv-tile-arrow {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none;
  border-radius: 50%; border: 1px solid #c4b5fd; color: #c4b5fd; font-size: 18px; transition: transform .25s ease;
}
.inv-tile:hover .inv-tile-arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .inv-tile-foil, .inv-tile-arrow { transition: none; } }

/* Folierte Karte groß */
/* Großansicht: ganzer Bildschirm, Schließen oben rechts in der Ecke */
.foil-modal { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: transparent; color: #fff; overflow: hidden; }
.foil-modal::backdrop { background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: blur(8px); }
.foil-modal .tcg-close { position: absolute; top: 16px; right: 16px; z-index: 2; }
.foil-modal-stage { display: grid; place-items: center; width: 100%; padding: 0; perspective: 1000px; animation: tcg-pop .25s ease; }
.foil-card-big { width: min(100%, 420px, calc((100dvh - 96px) / 1.6)); cursor: var(--cur-pointer, pointer); touch-action: none; user-select: none; -webkit-user-select: none; }
/* einzelnes Exemplar ohne Hülle: so groß wie die reguläre Karte */
.foil-card-big:has(.is-bare) { width: min(100%, 460px, calc((100dvh - 80px) / 1.4)); }
.foil-card-big:focus { outline: none; } /* Firefox zeigt sonst einen Rahmen um die ganze Fläche (#46) */
.foil-card-big .foil-inner { transition: transform .35s ease; will-change: transform; }
.foil-card-big .foil-sheen { animation: none; opacity: .7; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), #ffffff70, transparent 45%), linear-gradient(115deg, transparent 25%, #a8d8ff40 40%, #f0abfc33 60%, transparent 75%); }
.foil-card-big .foil-face { padding: 23cqw 3.5cqw 3.5cqw; border-radius: 18px; }
.foil-card-big .foil-face img, .foil-card-big .foil-back-art { border-radius: 10px; }
/* Folieren: die Folie gleitet über die Karte, das Etikett fällt auf, ein Glanz läuft darüber */
.foil-card-big.is-foiling .foil-front::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, #ffffffcc, #e0f2fe99 30%, #e9d5ff88 70%, #fbcfe8aa); box-shadow: 0 6px 0 #ffffffaa;
  animation: foil-wrap 1.2s .25s cubic-bezier(.3, .7, .2, 1) both;
}
.foil-card-big.is-foiling .foil-ticket { z-index: 2; animation: foil-ticket-drop .55s 1.35s cubic-bezier(.3, 1.6, .5, 1) both; }
.foil-card-big.is-foiling .foil-front::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, #ffffffcc 50%, transparent 65%); background-size: 300% 100%;
  animation: foil-shine .9s 1.9s ease-in-out both;
}
.foil-card-big.is-foiling .foil-face { animation: foil-press .35s 1.3s ease-out both; }
@keyframes foil-wrap { 0% { transform: translateY(-110%); opacity: 1; } 75% { transform: translateY(0); opacity: .95; } 100% { transform: translateY(0); opacity: 0; } }
@keyframes foil-ticket-drop { from { transform: translateY(-40px) scale(1.25); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes foil-shine { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@keyframes foil-press { 50% { box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 1px var(--rar, #ffffff30), 0 0 50px var(--rar, #c4b5fd); } }
@media (prefers-reduced-motion: reduce) { .foil-card-big.is-foiling .foil-front::before, .foil-card-big.is-foiling .foil-front::after, .foil-card-big.is-foiling .foil-ticket, .foil-card-big.is-foiling .foil-face { animation: none; } }
.tcg-slot.is-foiled { position: relative; }
.tcg-slot.is-foiled .foil-sheen { border-radius: 12px; }

/* Folierte Exemplare als eigene Plätze (Album, Sammlung, Favoriten) und im Handel */
.tcg-slot.foil-slot { position: relative; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: var(--cur-pointer, pointer); }
.tcg-slot.foil-slot .tcg-marks { position: absolute; top: 18%; right: 8px; z-index: 2; }
/* Großansicht: Karte in der Mitte, Favoriten-Knopf darunter */
.foil-modal[open] { display: flex; align-items: center; justify-content: center; }
/* Karte links, rechts Seltenheit, Name, Status und Aktionen – dieselbe Aufteilung wie die reguläre Großansicht (.tcg-modal-body) */
.foil-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: center; gap: 40px; width: min(920px, calc(100vw - 24px)); max-height: 100dvh; }
.foil-modal-info[hidden] { display: none; }
.foil-modal-info .tcg-modal-note[hidden], .foil-modal-info form[hidden], .foil-modal-info a[hidden] { display: none; }
.foil-modal-info .btn-block { text-decoration: none; }
.foil-modal:not(.is-showroom) .foil-cert-link { display: none; } /* der Link steht im Panel; unter der Karte nur im Showroom */
@media (max-width: 720px) {
  .foil-modal-body { grid-template-columns: 1fr; justify-items: center; gap: 14px; overflow-y: auto; padding: 56px 0 16px; }
  .foil-modal-info { width: min(100%, 360px); }
  .foil-card-big { width: min(100%, 300px, calc((100dvh - 330px) / 1.6)); }
  .foil-card-big:has(.is-bare) { width: min(100%, 320px, calc((100dvh - 330px) / 1.4)); }
}
.tcg-hero-pack .tcg-pack-art:hover { filter: none !important; }
/* Folierter Platz: insgesamt genau so groß wie eine normale Karte; Karte, Folie und Etikett bewegen sich als ein Stück */
.foil-card.foil-card-slot { display: block; width: 100%; perspective: none; cursor: inherit; container-type: inline-size; transition: transform .2s ease; }
.foil-card-slot .foil-inner { transform: none; transition: none; }
.foil-card-slot .foil-face { position: relative; aspect-ratio: 720 / 1008; padding: 0; border-radius: 10px; }
.foil-card-slot .foil-face img {
  position: absolute; top: 16%; left: 50%; width: auto; height: 81%; border-radius: 5px;
  transform: translateX(-50%) !important; box-shadow: none !important; transition: none !important;
}
.tcg-slot.foil-slot:hover .foil-card-slot, .tcg-slot.foil-slot:focus-visible .foil-card-slot { transform: translateY(-4px); }
.tcg-favs .foil-card-slot .foil-face { border-radius: 12px; }
.tcg-favs .tcg-slot.foil-slot:hover .foil-card-slot { transform: translateY(-6px) rotate(-1.5deg); }
/* TCG-Seite: das Pack-Bild ist nur Deko – gekauft wird mit dem Knopf (normaler Mauszeiger, nicht ziehbar) */
.tcg-pack-btn.tcg-pack-art { display: block; cursor: var(--cur-default); user-select: none; -webkit-user-select: none; }
.tcg-pack-art img { pointer-events: none; -webkit-user-drag: none; }
.tcg-favs-box .tcg-grid.tcg-favs { margin-top: auto; } /* Favoriten unten bündig mit der Album-Kachel */
/* Handelsdialog: Kartenbild, bei einem folierten Exemplar mit Folienrand und Glanz */
.foil-card.foil-card-slot { position: relative; }
/* Grading-Vorstellung: versiegelte Schaukarte im Slab (steht still, nur Glanz und Kartenfeffekt bewegen sich) */
.gr-hero-slab {
  position: relative; width: 220px; padding: 66px 14px 14px; border-radius: 14px; container-type: inline-size;
  background: linear-gradient(135deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .05) 40%, rgba(255, 255, 255, .16) 70%, rgba(255, 255, 255, .04));
  border: 2px solid rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 7px rgba(255, 255, 255, .08), inset 0 0 22px rgba(255, 255, 255, .18), 0 24px 50px rgba(0, 0, 0, .45);
}
.gr-hero-slab-label {
  position: absolute; left: 6%; right: 6%; top: 12px; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 0 6%; border-radius: 6px; background: #fbfbf8; color: #111; font: 700 4.6cqw/1.25 var(--font);
  box-shadow: inset 0 0 0 3px #c8102e, inset 0 0 0 4px #fff, 0 1px 3px rgba(0, 0, 0, .35);
}
.gr-hero-slab .gr-slab-grade { font-size: 13cqw; }
.gr-hero-slab-slot { display: block; pointer-events: none; }
.gr-hero-slab-shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .3) 50%, transparent 65%); background-size: 300% 100%; animation: tcgShine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .gr-hero-slab-shine { animation: none; } }

/* ---------- Dungeon ---------- */
.dg-page { display: flex; flex-direction: column; gap: 22px; }
.dg-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 2; min-height: 260px; background: #0e0f1a; box-shadow: var(--shadow-md); }
.dg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dg-hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 15, 26, .15) 0%, rgba(14, 15, 26, .55) 55%, rgba(14, 15, 26, .92) 100%); }
.dg-hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.dg-hero-text h1 { margin: 0; font-size: clamp(26px, 1.2rem + 2vw, 40px); }
.dg-hero-sub { margin: 0; max-width: 720px; color: var(--color-neutral-300); font-size: 14px; text-wrap: pretty; }
.dg-when { margin: 0; color: var(--color-neutral-400); font-size: 14px; }
.dg-when strong { color: var(--color-text); }
.dg-stage { display: flex; flex-direction: column; gap: 6px; max-width: 760px; }
.dg-stage-title { margin: 0; font-weight: 600; font-size: 17px; }
.dg-stage-text { margin: 0; color: var(--color-neutral-300); font-size: 14px; min-height: 1.4em; text-wrap: pretty; }
.dg-steps { display: flex; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dg-steps li { padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: var(--color-neutral-500); }
.dg-steps li.is-active { color: var(--color-text); box-shadow: 0 0 0 1px var(--color-accent-400); }
.dg-steps li.is-win { color: #86efac; }
.dg-steps li.is-loss { color: #fca5a5; }

.dg-table { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 18px; align-items: start; }
.dg-table.no-chat { grid-template-columns: minmax(0, 1fr); }
.dg-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.dg-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.dg-slot-card { position: relative; width: 100%; max-width: 200px; }
.dg-slot-card > img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.dg-slot.is-me .dg-slot-card > img:first-child { box-shadow: 0 0 0 2px var(--color-accent-300), 0 10px 24px rgba(0, 0, 0, .45); }
.dg-slot.is-bot .dg-slot-card > img:first-child { filter: saturate(.75); }
.dg-slot.is-casting .dg-slot-card > img:first-child { box-shadow: 0 0 0 2px #e9c766, 0 0 30px rgba(233, 199, 102, .7); }
.dg-slot-placeholder { display: grid; place-items: center; aspect-ratio: 720 / 1008; width: 100%; border-radius: 10px; border: 2px dashed var(--color-neutral-700); color: var(--color-neutral-500); font-size: 13px; text-align: center; padding: 10px; background: rgba(255, 255, 255, .02); }
.dg-slot.is-invited .dg-slot-placeholder { border-color: var(--color-accent-700); color: var(--color-accent-400); }
.dg-slot-name { font-weight: 600; font-size: 14px; text-align: center; overflow-wrap: anywhere; }
.dg-slot-stats { font-size: 11px; color: var(--color-neutral-500); text-align: center; }
.dg-bot-tag { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 999px; background: var(--color-neutral-800); color: var(--color-neutral-400); vertical-align: middle; }
.dg-leader { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 15px; line-height: 1; color: #e9c766; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); opacity: .85; }
.dg-pop-layer { position: absolute; inset: 0; pointer-events: none; display: flex; justify-content: center; align-items: center; }
.dg-pop { position: absolute; font-weight: 700; font-size: 20px; color: #fef3c7; text-shadow: 0 2px 6px rgba(0, 0, 0, .9); animation: ihk-float 1.4s ease-out forwards; }
.dg-pop.is-crit { color: #fca5a5; font-size: 26px; }
/* Aleks (Gruß aus dem Osten): Münzwürfe im Kampf und Geld in der Lobby */
.dg-pop.is-coin-heads { color: #fbbf24; font-size: 18px; }
.dg-pop.is-coin-tails { color: var(--color-neutral-400); font-size: 14px; }
.dg-coins { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; font-size: 12px; text-align: center; }
.dg-coins label { display: flex; align-items: center; gap: 6px; }
.dg-coins-field { display: inline-flex; align-items: center; gap: 4px; }
.dg-coins-field input { width: 76px; text-align: right; }
.dg-coins small { flex-basis: 100%; }
.dg-coins-note { margin-top: 6px; text-align: center; }
.dg-pop.is-ability { color: #e9c766; font-size: 28px; }

.dg-chat { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); min-height: 300px; }
.dg-chat-head { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); }
.dg-chat-list { flex: 1; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; max-height: 340px; min-height: 180px; overflow-y: auto; font-size: 13px; }
.dg-chat-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; }
.dg-chat-list li strong { font-size: 12px; }
.dg-chat-list li time { font-size: 11px; color: var(--color-neutral-600); justify-self: end; }
.dg-chat-list li span { grid-column: 1 / -1; overflow-wrap: anywhere; color: var(--color-neutral-200); }
.dg-chat-list li.is-me strong { color: var(--color-accent-400); }
.dg-chat-list .dg-chat-empty { display: block; color: var(--color-neutral-600); }
.dg-chat-form { display: flex; gap: 6px; }
.dg-chat-form input[type="text"] { flex: 1; min-width: 0; }
.dg-chat-note { margin: 0; }

.dg-actions, .dg-register, .dg-invitation, .dg-result, .dg-log { display: flex; flex-direction: column; gap: 12px; }
.dg-actions p, .dg-register p, .dg-invitation p { margin: 0; }
.dg-register h2, .dg-invitation h2, .dg-result h2, .dg-log h2 { margin: 0; font-size: 18px; }
.dg-invite { display: flex; gap: 8px; flex-wrap: wrap; }
.dg-invite input { flex: 1; min-width: 180px; }
/* Einladen: Vorschlagsliste unter dem Feld (nur Mitglieder, die gerade beitreten können) */
.dg-invite-field { position: relative; display: flex; flex: 1; min-width: 160px; }
.dg-invite-field input { width: 100%; }
.dg-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; margin: 0; padding: 6px; list-style: none;
  max-height: 260px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow);
}
.dg-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.dg-suggest li:hover, .dg-suggest li.is-active { background: var(--surface-2); }
.dg-suggest li small { color: var(--muted); white-space: nowrap; }
.dg-suggest li.dg-suggest-empty { cursor: default; color: var(--muted); background: none; }
.dg-actions form[data-dg-leave] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dg-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.dg-admin { align-self: flex-start; }

.dg-pick-sub { margin: 0; font-size: 11px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); }
.dg-pick-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(30%, 110px), 1fr)); }
/* Eine Karte in der Auswahl (#114): nur das Bild – Name und Werte stehen darauf. Gewählt: Ring und Leuchten in
   der Farbe der Seltenheit (--rar aus .r-<seltenheit>), dazu ein ✓ */
/* Alle Bewegungen der Auswahl mit derselben weichen Kurve (schnell los, sanft auslaufen, kein Überschwingen) */
.dg-picker, .dg-pick { --dg-ease: cubic-bezier(.22, 1, .36, 1); }
.dg-pick { position: relative; display: block; cursor: var(--cur-pointer); transition: opacity .35s var(--dg-ease), transform .35s var(--dg-ease); }
.dg-pick input { position: absolute; opacity: 0; pointer-events: none; }
.dg-pick img, .dg-pick .dg-slot-placeholder {
  display: block; width: 100%; height: auto; border-radius: 10px;
  transition: transform .3s var(--dg-ease), box-shadow .3s var(--dg-ease); box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}
.dg-pick .dg-slot-placeholder { display: grid; aspect-ratio: 720 / 1008; }
.dg-pick:hover img, .dg-pick:hover .dg-slot-placeholder { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(0, 0, 0, .45); }
.dg-pick input:checked ~ img, .dg-pick input:checked ~ .dg-slot-placeholder {
  box-shadow: 0 0 0 2px var(--rar, var(--color-accent-300)), 0 0 26px color-mix(in srgb, var(--rar, var(--color-accent)) 60%, transparent);
}
.dg-pick:has(input:checked)::before {
  content: '✓'; position: absolute; top: -6px; left: -6px; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; font-size: 13px; font-weight: 700; color: #0e0f1a; background: var(--rar, var(--color-accent-300)); box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform .3s var(--dg-ease);
}
.dg-pick:hover::before { transform: translateY(-4px); } /* wandert mit der angehobenen Karte */
.dg-pick input:focus-visible ~ img, .dg-pick input:focus-visible ~ .dg-slot-placeholder { outline: 2px solid var(--color-accent-300); outline-offset: 3px; }

.dg-log-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14px; max-height: 260px; overflow-y: auto; }
.dg-log-list .is-head { font-weight: 600; margin-top: 4px; }
.dg-log-list .is-ability { color: #e9c766; }
.dg-log-list .is-win, .dg-result-fights .is-win { color: #86efac; }
.dg-log-list .is-loss, .dg-result-fights .is-loss { color: #fca5a5; }
.dg-result-fights { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.dg-result-fights .is-skipped { color: var(--color-neutral-600); }
.dg-result-loot { margin: 0; padding-left: 18px; font-size: 14px; }
.dg-result-loot .is-me { color: var(--color-accent-300); }

@media (max-width: 860px) {
  .dg-table { grid-template-columns: minmax(0, 1fr); }
  .dg-hero { aspect-ratio: auto; min-height: 320px; }
}
@media (max-width: 480px) {
  .dg-slots { gap: 8px; }
  .dg-slot-stats { display: none; }
  .dg-hero-text { padding: 14px 16px; }
}

/* Dungeon: Balken im Kampf (Gegner und Zeit) und Countdown in den Pausen */
.dg-bars { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.dg-bar { display: grid; grid-template-columns: 96px minmax(0, 1fr) 92px; align-items: center; gap: 10px; }
.dg-bar-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-400); }
.dg-bar-track { position: relative; display: block; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); overflow: hidden; }
.dg-bar-fill { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width .25s linear; }
.dg-bar.is-time .dg-bar-track { height: 10px; }
.dg-bar.is-time .dg-bar-fill { background: linear-gradient(90deg, #b45309, #fbbf24); }
.dg-bar.is-time .dg-bar-fill.is-low { background: linear-gradient(90deg, #b91c1c, #f97316); animation: dg-blink 1s steps(2) infinite; }
.dg-bar-value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.dg-bars-hint { margin: 0; font-size: 12px; color: var(--color-neutral-500); }
.dg-next { margin: 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--color-accent-300); }
@keyframes dg-blink { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .dg-bar.is-time .dg-bar-fill.is-low { animation: none; } }
@media (max-width: 480px) { .dg-bar { grid-template-columns: 82px minmax(0, 1fr) 64px; gap: 8px; } }

/* Dungeon: unter dem Bild Stationen und Balken */
.dg-hero-wrap { display: flex; flex-direction: column; gap: 12px; }
.dg-under { display: flex; flex-direction: column; gap: 12px; }
.dg-under .dg-steps { margin: 0; }
.dg-under .dg-steps li { background: var(--color-surface); box-shadow: var(--shadow-sm); }
.dg-under .dg-steps li.is-active { box-shadow: 0 0 0 1px var(--color-accent-400); }
.dg-bar.is-progress .dg-bar-fill { width: 0; background: linear-gradient(90deg, #15803d, #4ade80); }

/* Boost-Karte unter jedem Platz */

.dg-foot { align-self: flex-start; }

/* Beute-Fenster */
.dg-loot { width: min(92vw, 440px); padding: 22px; border: 0; border-radius: var(--radius-lg); color: var(--color-text); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dg-loot::backdrop { background: rgba(8, 9, 16, .7); }
.dg-loot h2 { margin: 4px 0 14px; }
.dg-loot-list { margin: 0 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .dg-loot-row { transition: none; } }

/* Dungeon: Karten vergrößern */
.dg-slot-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: var(--cur-zoom-in); border-radius: 10px; }
.dg-slot-zoom img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 10px 24px rgba(0, 0, 0, .45); }
.dg-slot.is-me .dg-slot-zoom img { box-shadow: 0 0 0 2px var(--color-accent-300), 0 10px 24px rgba(0, 0, 0, .45); }
.dg-slot.is-bot .dg-slot-zoom img { filter: saturate(.75); }
.dg-slot.is-casting .dg-slot-zoom img { box-shadow: 0 0 0 2px #e9c766, 0 0 30px rgba(233, 199, 102, .7); }

/* Dungeon: Kartenauswahl mit Suche, Filter und Seiten – oben Suche, Mitte Karten (ohne Scrollen), unten Seiten */
.dg-picklist { position: relative; display: flex; flex-direction: column; gap: 12px; }
.dg-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.dg-pick[hidden] { display: none; }
.dg-pick-empty { position: absolute; inset: 50% 0 auto; margin: 0; text-align: center; }

/* Dungeon: Anleitungs-Kachel in der Chat-Spalte (wie „Zum Album“) */
.dg-help-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; min-height: 300px; padding: 20px;
  border-radius: var(--radius-lg); overflow: hidden; color: var(--text);
  background: radial-gradient(120% 70% at 50% 0%, var(--color-accent-800), transparent 70%), linear-gradient(180deg, var(--color-surface), var(--color-bg));
  box-shadow: 0 0 0 1px var(--color-accent-800); transition: box-shadow .25s ease;
}
.dg-help-tile:hover, .dg-help-tile:focus-visible { outline: 0; color: var(--text); box-shadow: 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.dg-help-foot { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.dg-help-text { display: flex; flex-direction: column; gap: 6px; }
.dg-help-title { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.dg-help-hint { font-size: 12px; color: var(--color-neutral-500); }
.dg-help-tile:hover .tcg-album-arrow { transform: translateX(4px); }

/* Dungeon-Start-Kacheln: Emblem mit Linien-Symbol, hebt sich beim Hover leicht an */
.dg-start-emblem {
  display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 16px;
  color: var(--color-accent-300); background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-accent-700); transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .3s ease, color .3s ease;
}
.dg-start-emblem svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dg-start-tile:not(:disabled):hover .dg-start-emblem,
.dg-start-tile:not(:disabled):focus-visible .dg-start-emblem { transform: translateY(-3px); color: var(--color-accent-200); box-shadow: inset 0 0 0 1px var(--color-accent-400), 0 0 22px color-mix(in srgb, var(--color-accent) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .dg-start-emblem { transition: none; } }

/* Chat füllt die Spalte bis zur Unterkante der Plätze (samt Boost-Karten) */
.dg-table:not(.no-chat) { align-items: stretch; }
.dg-chat { position: relative; display: block; min-height: 320px; }
.dg-chat-inner { position: absolute; inset: 14px; display: flex; flex-direction: column; gap: 8px; }
.dg-chat-list { flex: 1 1 0; min-height: 0; max-height: none; }
@media (max-width: 860px) { .dg-chat { min-height: 360px; } }

/* Anleitungs-Kachel mit Dungeon-Bild */
.dg-help-art { position: absolute; inset: 0 0 auto; height: 72%; overflow: hidden; }
.dg-help-art img { width: 100%; height: 100%; object-fit: cover; object-position: 92% 30%; transform: scale(1.15); transform-origin: 85% 40%; /* rechts steht die Figur im Banner */ transition: transform .6s cubic-bezier(.2, .8, .2, 1), filter .6s ease; filter: brightness(.85); }
.dg-help-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--color-bg) 100%); }
.dg-help-tile:hover .dg-help-art img, .dg-help-tile:focus-visible .dg-help-art img { transform: scale(1.25); filter: brightness(1.05); }
@media (prefers-reduced-motion: reduce) { .dg-help-art img { transition: none; } }

/* Lupe: erscheint dezent beim Überfahren der Karte (auf Touch-Geräten immer sichtbar) */
.dg-zoom-btn {
  position: absolute; top: 8px; right: 8px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; color: #fff; cursor: var(--cur-zoom-in);
  background: rgba(14, 15, 26, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 4px 12px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.dg-zoom-btn svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dg-pick:hover .dg-zoom-btn, .dg-zoom-btn:focus-visible { opacity: 1; transform: none; outline: 0; }
.dg-zoom-btn:hover { background: var(--color-accent-700); }
@media (hover: none) { .dg-zoom-btn { opacity: .85; transform: none; } }

/* Beute-Fenster: je Beute eine Zeile – Name links, Beute-Blase rechts */
.dg-loot-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md);
  background: var(--color-bg); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease;
}
.dg-loot-row.is-shown { opacity: 1; transform: none; }
.dg-loot-row.is-me { box-shadow: inset 0 0 0 1px var(--color-accent-700); }
.dg-loot-name { min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.dg-loot-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dg-loot-chip.is-money { color: #86efac; background: rgba(34, 197, 94, .12); box-shadow: inset 0 0 0 1px rgba(134, 239, 172, .35); }
.dg-loot-chip.is-foil { color: #1e1b3a; background: linear-gradient(90deg, #a8d8ff, #e9d5ff, #fbcfe8); box-shadow: 0 0 14px rgba(255, 255, 255, .55), 0 0 0 1px rgba(255, 255, 255, .7); }
.dg-loot-chip.is-card { color: #fcd34d; background: linear-gradient(90deg, rgba(251, 191, 36, .22), rgba(245, 158, 11, .12)); box-shadow: inset 0 0 0 1px rgba(251, 191, 36, .7), 0 0 16px rgba(251, 191, 36, .45); }
.dg-loot-chip.is-none { color: var(--color-neutral-500); background: var(--color-neutral-900); }
@media (prefers-reduced-motion: reduce) { .dg-loot-row { transition: none; } }

/* Dungeon: Boost-Karte als eigener kleiner Kartenplatz unter dem Charakter – bei Matze daneben der Hunde-Slot (Yo Dawg) */
.dg-boosts { display: flex; justify-content: center; gap: 8px; width: 100%; }
.dg-boost { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 52%; max-width: 110px; margin-top: 10px; }
.dg-boosts .dg-boost:not(:only-child) { width: 46%; }
.dg-boost-label {
  position: absolute; top: -9px; left: 50%; z-index: 1; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: var(--rar, var(--color-accent-300)); background: var(--color-bg); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar, var(--color-accent)) 55%, transparent);
}
.dg-boost.is-none .dg-boost-label { color: var(--color-neutral-500); box-shadow: 0 0 0 1px var(--color-neutral-700); }
.dg-boost-card { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: none; cursor: var(--cur-zoom-in); transition: transform .2s ease; }
.dg-boost-card img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar, var(--color-neutral-600)) 50%, transparent), 0 8px 18px rgba(0, 0, 0, .45); }
button.dg-boost-card:hover, button.dg-boost-card:focus-visible { outline: 0; transform: translateY(-3px); }
.dg-boost-empty { aspect-ratio: 720 / 1008; border: 2px dashed var(--color-neutral-800); cursor: var(--cur-default); }
.dg-boost-name { font-size: 12px; text-align: center; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { .dg-boost-card { transition: none; } }

/* Dungeon: schmale Suche rechts neben der Überschrift */
.dg-search {
  display: flex; align-items: center; gap: 8px; width: 220px; max-width: 100%; height: 32px; padding: 0 12px; border-radius: 999px;
  color: var(--color-neutral-500); background: transparent; box-shadow: inset 0 0 0 1px var(--color-neutral-800); transition: box-shadow .2s ease, color .2s ease;
}
.dg-search:focus-within { color: var(--color-accent-300); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.dg-search svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.dg-search input[type="search"] { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; box-shadow: none; font-size: 13px; color: var(--text); outline: 0; }
.dg-picklist .tcg-filter { margin-top: -2px; }

/* Dungeon: Stationen links, Countdown in derselben Zeile mittig */
.dg-under-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.dg-under-top .dg-steps { grid-column: 1; }
.dg-under-top .dg-next { grid-column: 2; white-space: nowrap; }
@media (max-width: 560px) {
  .dg-under-top { grid-template-columns: 1fr; justify-items: center; }
  .dg-under-top .dg-steps, .dg-under-top .dg-next { grid-column: 1; }
}

/* Beute-Zeilen: Folie leuchtet in den Farben der Folie, die Boss-Karte golden */
.dg-loot-row.is-foil { box-shadow: 0 0 0 1px rgba(233, 213, 255, .6), 0 0 16px rgba(168, 216, 255, .35), 0 0 22px rgba(251, 207, 232, .25); }
.dg-loot-row.is-card { background: linear-gradient(90deg, rgba(251, 191, 36, .22) 0%, var(--color-bg) 50%); box-shadow: 0 0 0 1px rgba(251, 191, 36, .6), 0 0 18px rgba(251, 191, 36, .35); }

/* Dungeon: Titel im Banner führt zur ganzen Geschichte (views/dungeon-geschichte.ejs) */
.dg-hero-title { color: inherit; text-decoration: none; }
.dg-hero-title:hover, .dg-hero-title:focus-visible { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.dg-story-page { display: flex; flex-direction: column; gap: 16px; }
.dg-story { padding: 4px 0; }
.dg-story p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.dg-story p:last-child { margin-bottom: 0; font-weight: 600; }
/* „Dungeon“ über dem Titel: durchsichtiges Glas (Liquid-Glass-Stil) mit nur einem Hauch Rot – Unschärfe, Lichtkante oben, leichter Glanz */
.dg-hero-text .kicker {
  position: relative; align-self: flex-start; overflow: hidden; padding: 5px 13px 4px; border-radius: 999px;
  color: #fff; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 60%, rgba(255, 110, 110, .08));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 140, 140, .18), 0 4px 14px rgba(0, 0, 0, .25);
}
.dg-hero-text .kicker::before {
  content: ""; position: absolute; inset: 0 0 50% 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}
a.dg-start-tile { width: min(100%, 460px); text-decoration: none; } /* Geschichte: Zurück-Kachel wie „Allein anmelden“ */
a.dg-start-tile:hover { color: var(--text); }
.dg-back-tile .ihk-start-arrow { margin-right: 1rem; }
.dg-back-tile.ihk-start-tile:hover .ihk-start-arrow { transform: translateX(-4px); } /* zurück: Pfeil nach links */
/* Dungeon (#111): vor dem Beitritt zwei Kacheln wie „Zum Album“ statt leerer Kartenrahmen */
/* so hoch wie die Anleitungs-Kachel daneben (die Zeile des Tischs streckt das Formular) */
.dg-mode-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; margin: 0; height: 100%; }
.dg-mode-tile { width: 100%; height: 100%; min-height: 340px; border: 0; font: inherit; text-align: left; cursor: var(--cur-pointer); }
.dg-mode-tile:focus-visible { outline: 0; box-shadow: 0 0 0 1px var(--color-accent), 0 0 40px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.dg-mode-tile .tcg-album-title { font-size: 26px; }
.dg-mode-tile.is-solo .tcg-fan img { transform: none; }
.dg-mode-tile.is-solo:hover .tcg-fan img, .dg-mode-tile.is-solo:focus-visible .tcg-fan img { transform: translateY(-10px) rotate(-2deg); }
.dg-mode-tile:focus-visible .tcg-fan img:nth-child(1) { transform: translateX(-78px) rotate(-16deg); }
.dg-mode-tile:focus-visible .tcg-fan img:nth-child(3) { transform: translateX(78px) rotate(16deg); }
.dg-mode-tile.is-solo:focus-visible .tcg-fan img:nth-child(1) { transform: translateY(-10px) rotate(-2deg); }
.dg-mode-tile:focus-visible .tcg-album-arrow { transform: translateX(4px); }
.dg-start-note { grid-column: 1 / -1; margin: 0; }
@media (max-width: 560px) {
  .dg-mode-tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; height: auto; }
  .dg-mode-tile { min-height: 260px; }
}

/* Einladung: eine Zeile über den Kacheln */
.dg-invitation { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-accent-800), var(--shadow-sm); }
.dg-invitation-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.dg-invitation-btns { display: flex; gap: 8px; }
/* Mage Tower: Einstieg unter den Einladungen (einmal am Tag) */
.dg-tower-entry { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.dg-tower-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dg-tower-btns { display: flex; gap: 8px; }

/* Lobby: Status, Einladen und Verlassen direkt unter den Plätzen */
.dg-lobby-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 12px 16px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.dg-lobby-status { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 320px; }
.dg-lobby-status p { margin: 0; font-size: 14px; }
.dg-lobby-warn { color: #fcd34d; }
.dg-lobby-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dg-lobby-actions .dg-invite input { min-width: 160px; }

/* Eigener Platz: anklicken zum Wählen bzw. Wechseln */
.dg-slot-choose { cursor: var(--cur-pointer); font: inherit; color: var(--color-accent-300); border-color: var(--color-accent-700); transition: border-color .2s ease, background .2s ease, transform .2s ease; }
.dg-slot-choose span { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 600; }
.dg-slot-choose b, .dg-boost-pick.dg-boost-empty b { font-size: 30px; font-weight: 300; line-height: 1; }
.dg-slot-choose:hover, .dg-slot-choose:focus-visible { outline: 0; border-color: var(--color-accent-400); background: color-mix(in srgb, var(--color-accent) 10%, transparent); transform: translateY(-3px); }
.dg-slot.is-me.is-choosing .dg-slot-choose { animation: dg-choose-pulse 2.4s ease-in-out infinite; }
@keyframes dg-choose-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 22%, transparent); } }
.dg-slot-pick { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; border-radius: 10px; cursor: var(--cur-pointer); transition: transform .2s ease; }
.dg-slot-pick img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 0 2px var(--color-accent-300), 0 10px 24px rgba(0, 0, 0, .45); }
.dg-slot-change { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text); background: rgba(10, 10, 20, .78); box-shadow: 0 0 0 1px var(--color-accent-600); opacity: 0; transition: opacity .2s ease; }
.dg-slot-pick:hover, .dg-slot-pick:focus-visible { outline: 0; transform: translateY(-3px); }
.dg-slot-pick:hover .dg-slot-change, .dg-slot-pick:focus-visible .dg-slot-change { opacity: 1; }
@media (hover: none) { .dg-slot-change { opacity: .9; } }
.dg-boost-pick { cursor: var(--cur-pointer); }
.dg-boost-pick.dg-boost-empty { display: grid; place-items: center; color: var(--color-accent-300); border-color: var(--color-accent-700); }
.dg-boost-pick.dg-boost-empty:hover, .dg-boost-pick.dg-boost-empty:focus-visible { border-color: var(--color-accent-400); background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .dg-slot.is-me.is-choosing .dg-slot-choose { animation: none; } .dg-slot-choose, .dg-slot-pick { transition: none; } }

/* Auswahl-Fenster (#114): zentriert, so hoch wie nötig – bis drei Kartenreihen wächst es mit, ab der vierten wird
   gescrollt (Höhe von drei Reihen = --dg-grid-max, misst public/js/dungeon.js). Schmale Fenster: als Blatt von unten.
   Beim Öffnen fächern die Karten herein (.is-opening, --i = Reihenfolge), beim Wählen hebt sich die gewählte
   Karte und die übrigen treten zurück (.is-picking / .is-picked), danach blendet das Fenster aus (.is-leaving) */
.dg-picker {
  width: min(880px, calc(100vw - 32px)); max-width: none; height: fit-content; max-height: calc(100dvh - 32px); padding: 20px 22px 0; overflow: hidden;
  border: 0; border-radius: var(--radius-lg); color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent-800) 30%, var(--color-surface)) 0, var(--color-surface) 140px);
  box-shadow: 0 0 0 1px var(--color-accent-800), 0 24px 60px rgba(0, 0, 0, .6);
  transition: opacity .2s var(--dg-ease), transform .2s var(--dg-ease);
}
.dg-picker::backdrop { background: rgba(5, 5, 12, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: dg-fade-in .3s var(--dg-ease, ease-out); }
.dg-picker[open] { display: flex; flex-direction: column; gap: 16px; animation: dg-picker-in .32s var(--dg-ease); }
.dg-picker.is-leaving { opacity: 0; transform: scale(.985); }
@keyframes dg-picker-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes dg-fade-in { from { opacity: 0; } }
.dg-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dg-picker-head h2 { margin: 0; font-size: 18px; letter-spacing: .01em; }
.dg-picker-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--color-neutral-400); background: none; cursor: var(--cur-pointer); }
.dg-picker-close:hover, .dg-picker-close:focus-visible { outline: 0; color: var(--text); background: var(--color-neutral-800); }
.dg-picker .dg-picklist { flex: 0 1 auto; min-height: 0; gap: 14px; }
/* Raster: höchstens drei Reihen hoch, darüber hinaus scrollt es. Weich ausgeblendet wird nur die Kante, hinter der
   noch Karten liegen (.has-above / .has-below) – sonst würde eine angehobene Karte der obersten Reihe angeschnitten.
   Innenabstand = Platz für Anheben, Leuchten und ✓ */
.dg-picker .dg-pick-grid {
  --dg-fade-top: 0px; --dg-fade-bottom: 0px;
  flex: 0 1 auto; min-height: 0; max-height: var(--dg-grid-max, none); overflow-y: auto; overscroll-behavior: contain; padding: 22px 12px 22px; margin: 0 -12px;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); grid-auto-rows: max-content; align-content: start; gap: 18px 14px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dg-fade-top), #000 calc(100% - var(--dg-fade-bottom)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--dg-fade-top), #000 calc(100% - var(--dg-fade-bottom)), transparent 100%);
}
.dg-picker .dg-pick-grid.has-above { --dg-fade-top: 22px; }
.dg-picker .dg-pick-grid.has-below { --dg-fade-bottom: 36px; }
.dg-picker-error { margin: 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #fecaca; background: color-mix(in srgb, #ef4444 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #ef4444 40%, transparent); }
.dg-table { scroll-margin-top: 140px; } /* nach Aktionen: Plätze, darüber noch Startzeit und Countdown */
.dg-picker.is-saving { pointer-events: none; }
/* Hereinfächern: nur Einblenden und ein kurzes Stück von unten, nacheinander (höchstens 0,28 s Verzögerung).
   Nur Deckkraft und Transform – das rechnet die Grafikkarte, nichts ruckelt */
.dg-picker.is-opening .dg-pick {
  will-change: transform, opacity;
  animation: dg-card-in .5s var(--dg-ease) both; animation-delay: min(calc(var(--i, 0) * 22ms + 40ms), 280ms);
}
@keyframes dg-card-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }
/* Auswahl-Moment: die gewählte Karte hebt sich und leuchtet auf, die übrigen treten zurück (nur Deckkraft und Größe) */
.dg-picker.is-picking .dg-pick:not(.is-picked) { opacity: .28; transform: scale(.97); }
.dg-pick.is-picked { z-index: 2; }
.dg-pick.is-picked::before { transform: translate(-4px, -10px); } /* Ecke der angehobenen, vergrößerten Karte */
.dg-pick.is-picked img, .dg-pick.is-picked .dg-slot-placeholder { transform: translateY(-4px) scale(1.06); animation: dg-pick-glow .5s var(--dg-ease) both; }
@keyframes dg-pick-glow {
  50% { box-shadow: 0 0 0 3px var(--rar, var(--color-accent-300)), 0 0 30px 3px color-mix(in srgb, var(--rar, var(--color-accent)) 70%, transparent); }
  to { box-shadow: 0 0 0 2px var(--rar, var(--color-accent-300)), 0 0 22px color-mix(in srgb, var(--rar, var(--color-accent)) 55%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .dg-picker[open], .dg-picker::backdrop, .dg-picker.is-opening .dg-pick, .dg-pick.is-picked img, .dg-pick.is-picked .dg-slot-placeholder { animation: none; }
  .dg-picker, .dg-pick, .dg-pick img, .dg-pick .dg-slot-placeholder, .dg-pick::before { transition: none; }
}
@media (max-width: 719px) {
  .dg-picker { width: 100vw; height: fit-content; max-height: 88dvh; padding: 16px 16px 0; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .dg-picker .dg-pick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 10px; }
}
/* TCG: dezenter Hinweis unter dem Kauf-Knopf, wohin die Packs gehen */
.tcg-buy-dest { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 12px; color: var(--color-neutral-400); text-decoration: none; transition: color .2s ease; }
.tcg-buy-dest svg { flex: none; fill: none; stroke: #c4b5fd; stroke-width: 1.7; stroke-linejoin: round; }
.tcg-buy-dest span { color: #c4b5fd; border-bottom: 1px solid color-mix(in srgb, #c4b5fd 40%, transparent); transition: border-color .2s ease; }
.tcg-buy-dest:hover, .tcg-buy-dest:focus-visible { color: var(--color-neutral-200); }
.tcg-buy-dest:hover span, .tcg-buy-dest:focus-visible span { border-bottom-color: #c4b5fd; }
/* Rangliste: eigene Zeilen-Hintergründe für die ersten drei – Platz 1 golden mit wanderndem Glanz */
.leaderboard tr.top-1, .leaderboard tr.top-2, .leaderboard tr.top-3 { position: relative; }
/* tbody im Selektor: so stark wie die Hover-Regel von .table (die sonst die Platz-Farben ersetzt) und weiter unten */
.leaderboard tbody tr.top-1 {
  /* Glanz: warmer Bernstein-/Kupfer-Streifen über dem ruhigen Gold – passt zum Gold, hebt sich aber ab */
  background: linear-gradient(100deg, transparent 40%, rgba(255, 140, 50, .14) 46%, rgba(255, 120, 40, .28) 50%, rgba(255, 140, 50, .14) 54%, transparent 60%) 100% 0 / 300% 100% no-repeat,
    linear-gradient(100deg, rgba(242, 193, 78, .26), rgba(242, 193, 78, .10) 45%, rgba(242, 193, 78, .03));
  animation: rank-gold 7s ease-in-out infinite;
}
.leaderboard tbody tr.top-2 { background: linear-gradient(100deg, rgba(207, 211, 229, .18), rgba(207, 211, 229, .06) 45%, rgba(207, 211, 229, .02)); }
.leaderboard tbody tr.top-3 { background: linear-gradient(100deg, rgba(201, 144, 103, .18), rgba(201, 144, 103, .06) 45%, rgba(201, 144, 103, .02)); }
.leaderboard tr.top-1 td:first-child { box-shadow: inset 3px 0 0 #f2c14e, inset 0 -1px 0 var(--color-divider); }
.leaderboard tr.top-2 td:first-child { box-shadow: inset 3px 0 0 #cfd3e5, inset 0 -1px 0 var(--color-divider); }
.leaderboard tr.top-3 td:first-child { box-shadow: inset 3px 0 0 #c99067, inset 0 -1px 0 var(--color-divider); }
.leaderboard tr.top-1 td { box-shadow: inset 0 -1px 0 rgba(242, 193, 78, .35); }
/* Leuchten nach innen: ein äußerer Schatten an der Zelle wurde von den Nachbarzellen überdeckt und sah wie ein eigener Kasten aus */
.leaderboard tr.top-1 td:first-child { box-shadow: inset 3px 0 0 #f2c14e, inset 14px 0 16px -12px rgba(242, 193, 78, .45), inset 0 -1px 0 rgba(242, 193, 78, .35); }
.leaderboard tr.top-1 td a { color: #fff4cf; }
/* Hover: die Zeile hellt nur leicht auf, die Platz-Farbe bleibt */
.leaderboard tbody tr:is(.top-1, .top-2, .top-3):hover td { background: color-mix(in srgb, var(--text) 4%, transparent); }
@keyframes rank-gold { 0%, 100% { background-position: 100% 0, 0 0; } 50% { background-position: 0 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .leaderboard tr.top-1 { animation: none; } }

/* Broker: Reiter der Werte (SAM, COW, BTCG), Zeichen für Werte ohne Logo, Marktstimmung des ETF */
.asset-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; margin-bottom: 24px; }
.asset-tab { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); transition: box-shadow .15s; }
.asset-tab:hover { box-shadow: inset 0 0 0 1px var(--color-neutral-600); text-decoration: none; }
.asset-tab.active { box-shadow: inset 0 0 0 1px var(--color-accent-700), 0 0 24px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.asset-tab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.asset-tab-head strong { font-size: 15px; letter-spacing: .02em; }
.asset-kind { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.asset-tab-name { font-size: 12px; color: var(--color-neutral-400); }
.asset-tab-price { font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; }
.asset-tab-price .pos, .asset-tab-price .neg { font-size: 12px; margin-left: 4px; }
.asset-tab-own { font-size: 11px; color: var(--color-neutral-500); }
.asset-mark { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 50%; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.asset-mark-btcg { border-radius: 14px; font-size: 12px; background: linear-gradient(140deg, #4f6bd8, #24306b); box-shadow: 0 0 18px rgba(79, 107, 216, .35); }
.etf-mood { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-400); }
.etf-mood strong { font-weight: 500; }
.etf-mood.pos strong { color: var(--ja); }
.etf-mood.neg strong { color: var(--nein); }
/* 51101 Coin: letzte Messung der Boje, bei Sturm hervorgehoben */
.buoy-report { display: block; margin-top: 4px; font-size: 12px; color: var(--color-neutral-400); }
.buoy-report strong { font-weight: 500; color: var(--text); }
.buoy-report.is-storm strong { color: var(--nein); }
.event-zusammenlegung, .event-aufteilung { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Broker-Übersicht: Liste aller Werte (wie bei einem Broker) */
.bx-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bx-head h1 { margin: 0; font-size: clamp(28px, 1.3rem + 1.4vw, 36px); }
.bx-head .live { font-size: 12px; color: var(--color-neutral-400); }
.bx-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.bx-table { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-surface), var(--color-bg)); box-shadow: 0 0 0 1px var(--color-neutral-800); overflow: hidden; }
.bx-row { display: grid; grid-template-columns: minmax(170px, 1.5fr) minmax(100px, .8fr) minmax(110px, 1fr) 130px 130px minmax(150px, 1.1fr) minmax(150px, 1.1fr); gap: 18px; align-items: center; padding: 12px 18px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--color-divider); font-variant-numeric: tabular-nums; transition: background .15s; }
.bx-row:last-of-type { border-bottom: 0; }
a.bx-row:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); text-decoration: none; }
.bx-row[hidden] { display: none; }
.bx-row-head { padding-top: 14px; padding-bottom: 10px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-500); }
.bx-row .num { text-align: right; }
.bx-market { display: flex; align-items: center; gap: 12px; min-width: 0; }
.bx-mark-img, .bx-mark { width: 36px; height: 36px; flex: none; }
.asset-mark.bx-mark { font-size: 10px; }
.asset-mark-btcg.bx-mark { border-radius: 9px; font-size: 8px; }
.bx-names { display: flex; flex-direction: column; min-width: 0; }
.bx-names strong { font-size: 14px; letter-spacing: .02em; }
.bx-names span { font-size: 12px; color: var(--color-neutral-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bx-market .asset-kind { margin-left: auto; padding: 2px 6px; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--color-neutral-700); }
.bx-change { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.bx-change strong { font-size: 15px; font-weight: 500; }
.bx-change small { font-size: 11px; }
.bx-spark { display: block; width: 100%; height: 32px; overflow: visible; }
.bx-spark path { fill: none; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.bx-spark.up path { stroke: var(--ja); }
.bx-spark.down path { stroke: var(--nein); }
.bx-col-price { display: flex; justify-content: flex-end; text-align: right; }
.bx-price { display: inline-block; box-sizing: border-box; width: 100%; max-width: 130px; padding: 8px 14px; border-radius: 999px; font-size: 14px; font-weight: 500; text-align: right; background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.bx-col-depot { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; }
.bx-depot { font-weight: 500; }
.bx-col-depot small { font-size: 11px; }
.bx-range-nums { display: flex; justify-content: space-between; font-size: 12px; color: var(--color-neutral-300); }
.bx-range-bar { position: relative; display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--color-neutral-800); }
.bx-range-pin { position: absolute; top: -4px; left: var(--pos); width: 0; height: 0; transform: translateX(-5px); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--color-accent-300); }
.bx-sent-label { display: block; font-size: 12px; color: var(--color-neutral-400); }
.bx-sent-label strong { font-weight: 500; color: var(--text); }
.bx-sent-bar { position: relative; display: block; height: 6px; margin-top: 6px; border-radius: 3px; background: var(--color-neutral-800); overflow: hidden; }
.bx-sent-bar.has-trades { background: color-mix(in srgb, var(--nein) 55%, transparent); }
.bx-sent-bar > span { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 3px; background: var(--ja); }
.bx-empty { padding: 18px; margin: 0; }
.bx-back { display: inline-block; margin-bottom: 12px; font-size: 13px; font-weight: 500; }
/* Steuersatz oben rechts (wie auf der Handelsseite) */
.bx-topbar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bx-topbar .bx-back { margin-bottom: 0; }
.bx-tax { margin-left: auto; font-size: 13px; color: var(--muted); }
.bx-tax strong { font-weight: 500; color: var(--text); }
@media (max-width: 1100px) {
  .bx-row { grid-template-columns: minmax(160px, 1.5fr) minmax(90px, .8fr) minmax(90px, 1fr) 120px minmax(140px, 1.1fr); }
  .bx-col-depot, .bx-col-range { display: none; }
}
@media (max-width: 700px) {
  .bx-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 12px 14px; }
  .bx-row-head { display: none; }
  .bx-col-spark, .bx-col-sent, .bx-market .asset-kind { display: none; }
  .bx-price { width: auto; padding: 6px 10px; font-size: 13px; }
}

/* Broker-Übersicht: sortierbare Spaltenköpfe */
.bx-sort { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0; border: 0; background: none; text-align: left; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: var(--cur-pointer); }
.bx-sort:hover, .bx-sort.sort-asc, .bx-sort.sort-desc { color: var(--text); }
.bx-sort::before { content: ''; flex: none; width: 1.2em; text-align: center; }
.bx-sort.sort-asc::before { content: '▲'; }
.bx-sort.sort-desc::before { content: '▼'; }
/* Zahlen-Spalten (auch Kurs und Depot): Kopf rechtsbündig, Pfeil links vom Text; Kurs-Kopf endet über dem Text im Feld */
.bx-sort.num, .bx-sort.bx-col-price { justify-content: flex-end; text-align: right; }
.bx-sort.bx-col-price { padding-right: 14px; }
.bx-row-head .bx-sort.bx-col-depot { flex-direction: row; align-items: center; }
/* Platz zwischen Mini-Chart und Kurs */
.bx-col-spark { padding: 0 22px 0 6px; }
/* linksbündige Köpfe (Markt, Sentiment): Pfeil ragt in den Abstand, der Text steht bündig über den Werten */
.bx-sort.bx-sort-left { margin-left: -1.2em; }
@media (max-width: 1100px) { .bx-row-head .bx-sort.bx-col-depot { display: none; } }
@media (max-width: 700px) { .bx-row-head .bx-sort { display: none; } }
/* Sentiment und 52-Wochen-Spanne: Kopf und Beschriftung rechtsbündig */
.bx-row-head .bx-col-range, .bx-row-head .bx-sort.bx-col-sent { justify-content: flex-end; text-align: right; }
.bx-sent-label { text-align: right; }
/* Dein Depot im gleichen Feld wie der Kurs (Wert und Gewinn/Verlust untereinander, gleiche Höhe) */
.bx-price { line-height: 22px; }
.bx-depot-box { display: inline-flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 38px; padding-top: 3px; padding-bottom: 3px; line-height: 1.15; }
.bx-depot-box small { font-size: 11px; }
@media (max-width: 1100px) { .bx-row .bx-col-depot { display: none; } }
/* Spaltenköpfe nie umbrechen; Kurs und Dein Depot: Kopf, Feld und Inhalt mittig */
.bx-sort { white-space: nowrap; }
.bx-col-price, .bx-row .bx-col-depot { justify-content: center; align-items: center; text-align: center; }
.bx-price { text-align: center; }
.bx-depot-box { align-items: center; }
.bx-row-head .bx-sort.bx-col-price, .bx-row-head .bx-sort.bx-col-depot { justify-content: center; padding-right: 0; }
.bx-row-head .bx-sort.bx-col-price::after, .bx-row-head .bx-sort.bx-col-depot::after { content: ''; flex: none; width: 1.2em; } /* Gegengewicht zum Pfeil: Text bleibt mittig */

/* Marktereignisse: nie länger als "Deine letzten Trades" daneben (nur wenn beide Spalten nebeneinander stehen);
   coin.js blendet Ereignisse aus, die nicht mehr ganz hineinpassen */
.coin-lists { container-type: inline-size; }
@container (min-width: 544px) {
  .coin-list-events { contain: size; min-height: 230px; overflow: hidden; }
}
.coin-list .event[hidden] { display: none; }

/* ---------- Album: Sektionen je Season (views/tcg-album.ejs) ---------- */
.album-season { display: flex; flex-direction: column; gap: 14px; }
.album-season[hidden] { display: none; }
.album-season-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.album-season-head h2 { margin: 0; font-size: 1.15rem; }
.album-season-head .tcg-progress-num { font-size: 13px; }

/* ---------- Kartenrückseiten je Season (Klasse "season-<key>", src/tcg/seasons.js) ----------
   Die Grafiken (public/img/tcg-backs) tragen das BfW-Logo schon selbst. Pre-Season = Standard (--gr-back in :root). */
.season-season-1 {
  --gr-back: url('/img/tcg-backs/season-1.webp') center / cover no-repeat;
}

/* ---------- Kartenwerte geändert (Boost/Debuff) in IHK und Dungeon: Zahl steigt auf, Karte leuchtet kurz ---------- */
.ihk-floater.is-stat-up, .ihk-floater.is-stat-down, .dg-pop.is-stat-up, .dg-pop.is-stat-down {
  padding: 2px 9px; border-radius: 999px; font-size: 14px; font-weight: 800; white-space: nowrap; letter-spacing: .02em;
  animation-duration: 1.8s; text-shadow: none;
}
.ihk-floater.is-stat-up, .ihk-floater.is-stat-down { top: 16%; }
.is-stat-up { color: #dcfce7; background: rgba(21, 128, 61, .9); box-shadow: 0 0 0 1px #4ade80, 0 0 14px rgba(74, 222, 128, .6); }
.is-stat-down { color: #fee2e2; background: rgba(153, 27, 27, .9); box-shadow: 0 0 0 1px #f87171, 0 0 14px rgba(248, 113, 113, .6); }
@keyframes fx-stat-up { 30% { filter: drop-shadow(0 0 3px #4ade80) drop-shadow(0 0 16px rgba(74, 222, 128, .8)) brightness(1.12); } }
@keyframes fx-stat-down { 30% { filter: drop-shadow(0 0 3px #f87171) drop-shadow(0 0 16px rgba(248, 113, 113, .8)) saturate(.7); } }
.fx-stat-up img { animation: fx-stat-up 1.4s ease-out; }
.fx-stat-down img { animation: fx-stat-down 1.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .fx-stat-up img, .fx-stat-down img, .dg-pop.is-stat-up, .dg-pop.is-stat-down { animation: none !important; } }

/* Boss-Seltenheit (nur Beute): Farbe für Punkt, Rahmen und „?“-Platzhalter im Album */
.r-boss { --rar: #e0a646; }
.r-boss .tcg-locked-inner { border-color: #e0a646; color: #e0a646; opacity: 1; }
.r-test-item { --rar: #7dd3fc; }

/* ========== Profil (Steam-artig: Kopf mit Bild und Text, links Inhalt, rechts Vitrine) ========== */
.pf-hero {
  position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap;
  margin-bottom: 24px; padding: 24px; border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, color-mix(in srgb, #45d9ff 10%, transparent), transparent 60%),
    linear-gradient(160deg, var(--color-surface), var(--surface-2));
  box-shadow: 0 0 0 1px var(--color-neutral-800);
}
.pf-id { display: flex; gap: 22px; align-items: flex-start; min-width: 0; flex: 1 1 420px; }
.pf-avatar { flex: none; display: block; width: 152px; height: 152px; border-radius: 8px; }
/* Profilbild wählen (Admin/Dev): beim Draufzeigen abgedunkelt mit „Ändern“ */
.pf-avatar-pick { position: relative; flex: none; padding: 0; border: 0; border-radius: 8px; background: none; cursor: var(--cur-pointer); }
.pf-avatar-hint {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; font-weight: 700; color: #fff;
  background: rgb(0 0 0 / .5); opacity: 0; transition: opacity .15s;
}
.pf-avatar-pick:hover .pf-avatar-hint, .pf-avatar-pick:focus-visible .pf-avatar-hint { opacity: 1; }
.pf-bild-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.pf-bild-opt { padding: 4px; border: 2px solid transparent; border-radius: 12px; background: none; cursor: var(--cur-pointer); }
.pf-bild-opt img { display: block; width: 100%; height: auto; }
.pf-bild-opt:hover { border-color: var(--color-neutral-600); }
.pf-bild-opt.is-on { border-color: var(--color-accent); }
.pf-id-text { min-width: 0; flex: 1; }
.pf-name { margin: 4px 0 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; overflow-wrap: anywhere; }
.pf-realname { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }
.pf-bio { margin: 12px 0 0; max-width: 60ch; white-space: pre-line; overflow-wrap: anywhere; color: var(--color-neutral-200); line-height: 1.5; }
.pf-bio-empty { color: var(--muted); font-style: italic; }
.pf-bio-edit { margin-top: 12px; }
.pf-bio-edit > summary { list-style: none; display: inline-flex; }
.pf-bio-edit > summary::-webkit-details-marker { display: none; }
.pf-bio-edit[open] > summary { display: none; }
.pf-bio-form { max-width: 60ch; }
.pf-bio-form textarea { width: 100%; min-height: 110px; resize: vertical; }
.pf-bio-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }

.pf-head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; margin-left: auto; }
.pf-level { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; }
.pf-level-label { font-size: 22px; font-weight: 300; letter-spacing: .01em; }
.pf-level:hover .ach-count { transform: translateY(-2px) scale(1.04); }
.pf-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.pf-actions .mod-menu-panel { left: auto; right: 0; text-align: left; } /* rechts bündig, damit es nicht aus dem Kopf ragt */

.pf-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.pf-main, .pf-side { min-width: 0; }
.pf-main > .stats { margin-bottom: 20px; }
/* Eigene Statistik auf dem Profil: eine schmale Zeile mit vier Kennzahlen, Bereiche aufklappbar */
.pf-mystats { padding-top: 14px; padding-bottom: 12px; scroll-margin-top: 90px; } /* nach dem Umschalten (#statistik) nicht unter der Kopfleiste */
.pf-mystats-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pf-mystats-head h2 { margin: 0; font-size: 1rem; }
.pf-mystats-since { font-weight: 400; }
.pf-mystats-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.pf-mystats-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.pf-mystats-tiles dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.pf-mystats-tiles dd { margin: 0; font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .pf-mystats-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pf-mystats-more { margin-top: 10px; }
.pf-mystats-more summary { cursor: var(--cur-pointer); }
.pf-mystats-table { margin-top: 6px; }
.pf-mystats-table td, .pf-mystats-table th { padding-top: 6px; padding-bottom: 6px; }
.pf-side .card h2 { margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--color-neutral-300); letter-spacing: .02em; }

/* Abzeichen mit der Zahl der Erfolge: Sechseck mit Metallkante, Farbe nach Stufe */
.ach-count {
  --c1: var(--color-neutral-600); --c2: var(--color-neutral-800); --glow: transparent;
  position: relative; flex: none; display: inline-grid; place-items: center; width: 40px; height: 44px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, var(--c1), var(--c2));
  filter: drop-shadow(0 0 6px var(--glow)); transition: transform .15s ease;
}
.ach-count > span {
  display: grid; place-items: center; width: calc(100% - 6px); height: calc(100% - 6px);
  clip-path: inherit; background: radial-gradient(circle at 50% 30%, #2d2a45, #12131d);
  color: var(--c1); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums;
}
.ach-count-lg { width: 54px; height: 60px; }
.ach-count-lg > span { font-size: 20px; width: calc(100% - 8px); height: calc(100% - 8px); }
.ach-count.t-bronze { --c1: #e8a86c; --c2: #6e3f1c; --glow: rgba(232, 168, 108, .25); }
.ach-count.t-silver { --c1: #e4e9f5; --c2: #5e667a; --glow: rgba(228, 233, 245, .25); }
.ach-count.t-gold { --c1: #ffd76a; --c2: #8c5f16; --glow: rgba(255, 215, 106, .35); }
.ach-count.t-mythic { --c1: #ffd6f6; --c2: #45d9ff; --glow: rgba(180, 140, 242, .55); background: conic-gradient(from 0deg, #ff7ad9, #b48cf2, #45d9ff, #7affc1, #ff7ad9); }
.ach-count.t-mythic > span { color: #f3e8ff; text-shadow: 0 0 8px rgba(180, 140, 242, .9); }

/* Erfolge-Liste */
.ach-progress { height: 6px; border-radius: 99px; background: var(--color-neutral-900); overflow: hidden; margin: 4px 0 16px; }
.ach-progress > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent-600), #45d9ff); }
.ach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ach-row {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent); box-shadow: 0 0 0 1px var(--color-neutral-800);
}
.ach-row.is-unique.is-earned {
  background:
    linear-gradient(color-mix(in srgb, var(--color-bg) 70%, var(--color-surface)), color-mix(in srgb, var(--color-bg) 70%, var(--color-surface))) padding-box,
    linear-gradient(120deg, #ff7ad9, #b48cf2, #45d9ff) border-box;
  border: 1px solid transparent; box-shadow: 0 0 18px rgba(180, 140, 242, .18);
}
.ach-icon { flex: none; width: 56px; height: 56px; }
.ach-row.is-locked .ach-icon { filter: grayscale(1) brightness(.55); }
.ach-row.is-locked .ach-name, .ach-row.is-locked .ach-text { color: var(--muted); }
.ach-body { min-width: 0; flex: 1; }
.ach-body p { margin: 0; }
.ach-name { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ach-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px;
  color: #1a1030; background: linear-gradient(120deg, #ffb3ec, #c9b0ff, #8be9ff);
}
.ach-text { font-size: .92rem; color: var(--color-neutral-300); margin-top: 2px !important; }
.ach-meta { font-size: .8rem; color: var(--muted); margin-top: 4px !important; }
.ach-pin-form { flex: none; margin: 0; }
.ach-pin {
  display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--color-neutral-600); cursor: var(--cur-pointer);
}
.ach-pin:hover { color: var(--text); background: color-mix(in srgb, var(--text) 7%, transparent); }
.ach-pin.is-on { color: var(--color-accent-400); background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
/* Eigener Fortschritt bei gesperrten Erfolgen */
.ach-step { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.ach-step-bar { flex: 0 1 160px; height: 5px; border-radius: 99px; background: var(--color-neutral-900); overflow: hidden; box-shadow: 0 0 0 1px var(--color-neutral-800); }
.ach-step-bar > span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent-600), #45d9ff); }
.ach-step-text { font-size: .8rem; color: var(--color-neutral-300); font-variant-numeric: tabular-nums; min-width: 0; }
/* Aufklappen: die übrigen Erfolge (angeheftete und Balken bleiben immer sichtbar) */
.ach-fold { margin-top: 8px; }
.ach-fold > summary {
  list-style: none; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px;
  border-radius: var(--radius-md); color: var(--color-neutral-300); font-size: .9rem; font-weight: 600; cursor: var(--cur-pointer);
}
.ach-fold > summary::-webkit-details-marker { display: none; }
.ach-fold > summary:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.ach-fold > summary svg { transition: transform .2s ease; }
.ach-fold[open] > summary svg { transform: rotate(180deg); }
.ach-fold .ach-fold-less, .ach-fold[open] .ach-fold-more { display: none; }
.ach-fold[open] .ach-fold-less { display: inline; }
.ach-fold[open] > .ach-list { margin-top: 8px; }
@media (max-width: 560px) { .ach-step { flex-direction: column; align-items: stretch; gap: 4px; } .ach-step-bar { flex-basis: auto; } }

/* Vitrine rechts: angeheftete Erfolge, darunter Abzeichen (nur wenn zutreffend) */
.pf-showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf-showcase-item {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px 12px; text-align: center;
  border-radius: var(--radius-md); background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%), var(--surface-2);
  box-shadow: 0 0 0 1px var(--color-neutral-800);
}
.pf-showcase-item img { width: 88px; height: 88px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); transition: transform .2s ease; }
.pf-showcase-item:hover img, .pf-showcase-item:focus img { transform: translateY(-3px) rotate(-3deg); }
.pf-showcase-item.is-unique { box-shadow: 0 0 0 1px #b48cf2, 0 0 20px rgba(180, 140, 242, .22); }
.pf-showcase-name { font-size: .88rem; font-weight: 700; line-height: 1.25; }
.pf-hint { margin: 10px 0 0; }
.pf-badges { position: relative; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-divider); }
.pf-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px;
  background: var(--surface-2); box-shadow: 0 0 0 1px var(--color-neutral-800); font-size: .85rem; font-weight: 700; cursor: help;
}
.pf-badge svg { display: block; width: 34px; height: 34px; }
.pf-badge-top1 { box-shadow: 0 0 0 1px #8c5f16; color: #ffd76a; }
.pf-badge-ban { box-shadow: 0 0 0 1px #7f1d1d; color: var(--nein); }
/* Details zum Abzeichen: so breit wie die Vitrine, über den Abzeichen (Hover und Fokus/Tippen) */
.pf-tip {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 6px); z-index: 20; display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto; padding: 12px; border-radius: var(--radius-md); background: var(--color-neutral-900);
  box-shadow: var(--shadow-md); color: var(--text); font-size: .82rem; font-weight: 500; line-height: 1.45; cursor: var(--cur-default);
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.pf-badge:hover .pf-tip, .pf-badge:focus .pf-tip, .pf-badge:focus-within .pf-tip { opacity: 1; visibility: visible; transform: none; }
.pf-tip-title { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf-tip-row { display: block; overflow-wrap: anywhere; }
.pf-tip-row em { display: inline-block; min-width: 48px; margin-right: 6px; font-style: normal; color: var(--muted); }
.pf-ban { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--nein) 7%, var(--surface-2)); box-shadow: inset 3px 0 0 #7f1d1d; }
.pf-ban-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; }
.pf-ban-state { font-size: .7rem; font-weight: 700; padding: 1px 8px; border-radius: 99px; color: var(--muted); background: color-mix(in srgb, var(--text) 8%, transparent); }
.pf-ban-state.s-aktiv { color: #fff; background: #b91c1c; }
.pf-ban:has(.s-aktiv) { box-shadow: inset 3px 0 0 var(--nein); }

/* Tooltip (Hover und Fokus, damit es auch per Tippen geht) */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; max-width: 240px;
  padding: 8px 10px; border-radius: var(--radius-md); background: var(--color-neutral-900); color: var(--text);
  box-shadow: var(--shadow-md); font-size: .8rem; font-weight: 500; line-height: 1.4; text-align: left; white-space: normal;
  opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .15s ease, transform .15s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after, [data-tip]:focus::after { opacity: 1; transform: translate(-50%, 0); }

/* Mitspieler */
.pf-mate-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pf-mate { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.pf-mate:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pf-mate img { flex: none; width: 40px; height: 40px; border-radius: 9px; }
.pf-mate-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pf-mate-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
  .pf-layout { grid-template-columns: minmax(0, 1fr); }
  .pf-side { order: -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 20px; }
}
@media (max-width: 640px) {
  .pf-hero { padding: 18px; }
  .pf-id { gap: 14px; flex-basis: 100%; }
  .pf-avatar { width: 92px; height: 92px; }
  .pf-head-side { align-items: flex-start; margin-left: 0; width: 100%; }
  .pf-actions { justify-content: flex-start; }
  .pf-actions .mod-menu-panel { left: 0; right: auto; }
  .ach-row { gap: 10px; padding: 10px; }
  .ach-icon { width: 46px; height: 46px; }
  [data-tip]::after { max-width: min(240px, 70vw); }
}

/* Fenster "Erfolg freigeschaltet" (Grundform wie das Beute-Fenster .dg-loot) */
dialog.ach-pop {
  width: min(100% - 32px, 420px); padding: 32px 28px 24px; border: 0; border-radius: 20px; text-align: center; overflow: hidden;
  color: var(--text); background: radial-gradient(circle at 50% 22%, color-mix(in srgb, var(--color-accent) 30%, transparent), transparent 62%), var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 24px 70px rgba(0, 0, 0, .7), 0 0 60px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
dialog.ach-pop.is-unique { box-shadow: 0 0 0 1px #b48cf2, 0 24px 70px rgba(0, 0, 0, .7), 0 0 70px rgba(255, 122, 217, .25); }
dialog.ach-pop::backdrop { background: color-mix(in srgb, var(--color-bg) 78%, transparent); backdrop-filter: blur(8px); }
dialog.ach-pop[open], dialog.ach-pop.is-fresh { animation: ach-pop-in .45s cubic-bezier(.2, 1.4, .4, 1); }
.ach-pop-rays {
  position: absolute; left: 50%; top: 118px; width: 560px; height: 560px; margin: -280px 0 0 -280px; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--color-accent-300) 60%, transparent) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 65%); mask: radial-gradient(circle, #000 0, transparent 65%);
  animation: ach-spin 24s linear infinite;
}
.ach-pop > *:not(.ach-pop-rays) { position: relative; }
.ach-pop .kicker { display: block; margin: 0 0 10px; color: var(--color-accent-300); }
.ach-pop .dg-loot-list { margin: 0 0 18px; text-align: left; }
.ach-pop [hidden] { display: none !important; }
.ach-pop .dg-loot-row.is-money .dg-loot-chip { font-size: 15px; padding: 5px 14px; }
.ach-pop-icon { display: block; width: 132px; height: 132px; margin: 0 auto 10px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); animation: ach-float 3.2s ease-in-out infinite; }
.ach-pop h2 { margin: 0 0 8px; font-size: 26px; }
.ach-pop-text { margin: 0 auto 14px; max-width: 32ch; color: var(--color-neutral-300); line-height: 1.5; }
.ach-pop form { margin: 0; }
.ach-pop-ok { min-width: 160px; }
.ach-pop-more { margin: 12px 0 0; }
/* Fenster "Geschenk vom Team" (Grundform wie das Erfolgs-Fenster) */
.gift-pop-image { display: block; max-width: 132px; max-height: 170px; width: auto; height: auto; margin: 0 auto 12px; border-radius: 10px; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .55)); animation: ach-float 3.2s ease-in-out infinite; }
.gift-pop-reason {
  margin: 0 0 18px; padding: 12px 14px; border-radius: 12px; text-align: left; display: flex; flex-direction: column; gap: 4px;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent); box-shadow: inset 0 0 0 1px var(--color-accent-700);
  color: var(--color-neutral-300); line-height: 1.5; overflow-wrap: anywhere;
}
.gift-pop-reason-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-300); }
.gift-pop-by { align-self: flex-end; font-size: 13px; color: var(--color-neutral-500); }
.grant-reason { grid-column: 1 / -1; }
.grant-reason textarea { width: 100%; resize: vertical; }
.grant-log-reason { min-width: 180px; max-width: 360px; overflow-wrap: anywhere; color: var(--color-neutral-300); }
@media (prefers-reduced-motion: reduce) { .gift-pop-image { animation: none; } }
@keyframes ach-pop-in { from { opacity: 0; transform: scale(.85) translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ach-spin { to { transform: rotate(360deg); } }
@keyframes ach-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) {
  dialog.ach-pop[open], dialog.ach-pop.is-fresh, .ach-pop-rays, .ach-pop-icon { animation: none; }
}

/* Dungeon: Karte schon als Charakter gewählt, nur ein Exemplar → als Boost gesperrt */
.dg-pick.is-blocked { cursor: var(--cur-no); }
.dg-pick.is-blocked img { filter: grayscale(1) brightness(.55); }
/* Kartensperre (Admin/Dev): Karte in diesem Modus bis zum Balance-Patch nicht spielbar */
.dg-pick.is-banned:hover img { transform: none; box-shadow: none; }
.dg-ban-tag {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  color: var(--color-neutral-100); background: rgba(14, 15, 26, .85); border: 1px solid var(--color-neutral-600); pointer-events: none;
}
.dg-ban-tag.is-inline { position: static; transform: none; display: inline-block; vertical-align: middle; font-size: 9px; padding: 1px 6px; }

/* Profil: gewählter Broker-Wert in der Seitenleiste (Bestand + Wert) */
.pf-asset-row { display: flex; align-items: center; gap: 12px; padding: 6px 8px; border-radius: var(--radius-md); color: var(--text); text-decoration: none; }
.pf-asset-row:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.pf-asset-logo { width: 44px; height: 44px; flex: none; }
.asset-mark.pf-asset-logo { font-size: 9px; }
.asset-mark-btcg.pf-asset-logo { border-radius: 11px; font-size: 8px; }
.pf-asset-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.pf-asset-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-asset-units { font-size: 13px; color: var(--color-neutral-400); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-asset-units strong { font-weight: 600; color: var(--text); }
.pf-asset-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-asset-form { display: flex; gap: 8px; margin: 12px 0 0; }
.pf-asset-form select { flex: 1; min-width: 0; margin: 0; }

/* ---------- Admin-/Dev-Panel: Überarbeitung ---------- */
.panel-hero { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.panel-hero h1 { margin: 0; }
.panel-toolbar .stats-toolbar-row { padding: 8px 12px; }
.panel-subnav { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.panel-subnav::-webkit-scrollbar { display: none; }
.panel-subnav a { display: inline-flex; align-items: center; gap: 6px; }
.panel-subnav .panel-badge-inline { margin: 0; vertical-align: 0; }

/* Erklärung hinter einem ?-Knopf */
.help-tip { position: relative; display: inline-block; flex: none; }
.help-tip > summary {
  list-style: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 12px; font-weight: 700; cursor: var(--cur-pointer, pointer);
}
.help-tip > summary::-webkit-details-marker { display: none; }
.help-tip > summary:hover, .help-tip[open] > summary { color: var(--text); border-color: var(--primary); }
.help-tip-body {
  position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(360px, calc(100vw - 32px)); padding: 12px 14px;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.5; color: var(--text); font-weight: 400; text-transform: none; letter-spacing: 0;
}
.log-count .help-tip-body, .stats-kpi .help-tip-body { left: 0; right: auto; }
.stats-block-head { align-items: center; }

/* Hinweiszeile (statt großer Warnbox) */
.panel-warning-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--color-neutral-300); }
.panel-warning-line > span[aria-hidden] { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--warn); color: #111; font-size: 11px; font-weight: 800; flex: none; }

/* Vergaben: ein Formular */
.grant-form { max-width: 760px; }
.grant-arts { flex-wrap: wrap; width: fit-content; max-width: 100%; }
.grant-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.grant-form legend { padding: 0; margin-bottom: 6px; }
.grant-art { position: relative; }
.grant-art input { position: absolute; opacity: 0; pointer-events: none; }
.grant-art span { display: block; padding: 5px 12px; border-radius: 8px; color: var(--muted); font-size: .88rem; font-weight: 600; cursor: var(--cur-pointer, pointer); white-space: nowrap; }
.grant-art input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
.grant-art input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 1px; }
.grant-steps { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.grant-art-danger input:checked + span { color: var(--nein); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nein) 50%, transparent), var(--shadow); }
.grant-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.grant-fields .grant-count { max-width: 140px; }
.grant-fields select, .grant-fields input { min-height: 40px; }
.grant-submit { display: flex; justify-content: flex-start; }

/* Spielwerte: Schalter "für alle sichtbar" und Formulare */
.panel-features { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 18px; }
.panel-feature { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: .85rem; font-weight: 600; }
.panel-feature:hover { text-decoration: none; border-color: var(--primary); }
.panel-feature-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-neutral-600); }
.panel-feature.is-on .panel-feature-dot { background: var(--ja); box-shadow: 0 0 6px var(--ja); }
.panel-form { max-width: 900px; }
.panel-cols { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.panel-cols > .card { margin: 0; }
.admin-gr-calc { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.admin-gr-calc > summary { cursor: var(--cur-pointer, pointer); margin-bottom: 10px; }
.panel-rights-box > summary { cursor: var(--cur-pointer, pointer); }
.panel-rights-box[open] > summary { margin-bottom: 10px; }

/* ---------- Statistik im Panel: Kernzahlen, kompakte Kennzahlen, weniger Bedienelemente ---------- */
.stats-core { margin: 4px 0 28px; }
.stats-kpis-core { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stats-kpi.is-core { padding: 18px 20px; gap: 6px; }
.stats-kpi.is-core .stat-value { font-size: 1.9rem; }
.stats-kpis-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 8px; }
.stats-kpis-compact .stats-kpi { padding: 10px 12px; gap: 2px; }
.stats-kpis-compact .stat-value { font-size: 1.05rem; }
.stats-kpi .stat-label { display: flex; align-items: center; gap: 6px; }
.stats-kpi .stat-label a { color: inherit; }
.stats-kpi .stat-label a:hover { color: var(--text); }
.stats-kpi .help-tip > summary { width: 18px; height: 18px; font-size: 11px; }
.stats-delta.is-good { color: var(--ja); }
.stats-delta.is-bad { color: var(--nein); }
.stats-delta.is-good > span[aria-hidden], .stats-delta.is-bad > span[aria-hidden] { color: inherit; }
.stats-block-tools { display: flex; align-items: center; gap: 6px; flex: none; }
.stats-more {
  list-style: none; display: inline-grid; place-items: center; width: 28px; height: 22px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-weight: 700; line-height: 1; cursor: var(--cur-pointer, pointer);
}
.stats-more::-webkit-details-marker { display: none; }
.stats-more:hover { color: var(--text); border-color: var(--primary); }
.stats-block-tools .stats-menu-panel { right: 0; left: auto; }
.stats-card-title { display: flex; align-items: center; gap: 8px; }
.stats-chart-card { position: relative; }
.stats-table-toggle > summary { position: absolute; top: 14px; right: 16px; color: var(--muted); font-size: 12px; cursor: var(--cur-pointer, pointer); list-style: none; }
.stats-table-toggle > summary::-webkit-details-marker { display: none; }
.stats-table-toggle > summary:hover { color: var(--text); }
.stats-table-toggle[open] > summary { color: var(--primary); }
.panel-hero .stats-icon { width: 14px; height: 14px; vertical-align: -2px; }
@media (max-width: 900px) { .stats-kpis-core { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stats-kpi.is-core .stat-value { font-size: 1.4rem; } }

/* Mehrfach-Tausch (#76): Karte ankreuzen, darunter die Anzahl */
.tcg-pick-multi { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tcg-pick-multi .tcg-pick-count { align-self: center; padding: 2px 6px; border-radius: 6px; font-size: 13px; background: var(--color-bg); color: var(--text); border: 1px solid var(--border, rgba(255,255,255,.15)); }
.tcg-pick-multi:not(:has(input:checked)) .tcg-pick-count { opacity: .45; }
.nego-lines { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tcg-pick-multi:has(> .tcg-slot[hidden]) { display: none; } /* Seltenheitsfilter blendet die Karte aus – die Anzahl mit */
.nego-line { display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 140px; text-align: center; font-size: 13px; }

/* Markt: Suchen und Filtern in einem Knopf (nach „Mobile Search/Filter Button“, Dribbble) – in unseren Farben.
   Eine Hälfte überfahren oder antippen (Fokus) → sie klappt über die ganze Breite auf. */
.mkt-bar { --mkt-h: 36px; --mkt-ease: cubic-bezier(0, 0, .1, 1); --mkt-soft: cubic-bezier(0, 0, .5, 1); position: relative; flex: 0 0 280px; width: 280px; max-width: 100%; height: var(--mkt-h); }
/* Rahmen an den Hälften (nicht am Knopf): sonst schimmert er an den runden Ecken in der Mitte durch */
.mkt-bar > div { --mkt-half-bg: var(--color-surface); position: absolute; top: 0; height: 100%; width: 50%; background: var(--mkt-half-bg); transition: width .45s var(--mkt-ease), left .45s var(--mkt-ease), background-color .2s ease, border-radius .2s ease; }
.mkt-bar-search { left: 0; overflow: hidden; z-index: 1; transition-delay: .1s; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: inset 1px 0 0 var(--color-neutral-800), inset 0 1px 0 var(--color-neutral-800), inset 0 -1px 0 var(--color-neutral-800); }
.mkt-bar-filter { left: 50%; z-index: 1; transition-delay: .25s; border-radius: 0 var(--radius-md) var(--radius-md) 0; box-shadow: inset -1px 0 0 var(--color-neutral-800), inset 0 1px 0 var(--color-neutral-800), inset 0 -1px 0 var(--color-neutral-800); }
.mkt-bar > div:hover { --mkt-half-bg: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface)); }
/* Trennstrich zwischen den Hälften */
.mkt-bar-search::after { content: ""; position: absolute; right: 0; top: 22%; width: 1px; height: 56%; background: var(--color-neutral-700); transition: opacity .2s ease; }
.mkt-bar-label, .mkt-bar-toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; background: none; color: var(--color-neutral-300); font: inherit; font-size: 14px; letter-spacing: .02em; cursor: var(--cur-pointer); }
.mkt-bar-label { transition: opacity .3s var(--mkt-soft) .35s; }
.mkt-bar-toggle:focus-visible, .mkt-opt:focus-visible { outline: 2px solid var(--color-accent-300); outline-offset: -2px; border-radius: var(--radius-md); }

/* Suchen: Feld wächst als Kreis von links auf, die Lupe kommt von unten */
/* Feld füllt die Hälfte ganz aus (kein eigener Rahmen), rechts bleibt Platz für die Lupe */
.mkt-bar-input[type="search"] { position: absolute; left: 0; top: 0; width: calc(100% - 46px); height: 100%; min-height: 0; margin: 0; padding: 0 14px; border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-bg); color: var(--text); font-size: 14px; clip-path: circle(0 at 18px 50%); transition: clip-path .45s var(--mkt-ease) .05s; }
/* 1px-Rahmen wie im Vorbild – sonst verschwimmt das Feld mit dem Seitenhintergrund */
/* 1px-Rahmen in der Farbe der Hälfte (wie das Lupen-Feld daneben) – sonst verschwimmt das Feld mit dem Seitenhintergrund */
.mkt-bar-input[type="search"], .mkt-bar-input[type="search"]:focus { outline: none; box-shadow: inset 0 0 0 1px var(--mkt-half-bg); }
.mkt-bar-current { box-shadow: inset 0 0 0 1px var(--mkt-half-bg); }
.mkt-bar-icon { position: absolute; right: 0; top: 0; display: grid; place-items: center; width: 46px; height: 100%; color: var(--color-accent-300); transform: translateY(100%); opacity: 0; transition: transform .35s var(--mkt-ease), opacity .2s ease; pointer-events: none; }
.mkt-bar-search:is(:hover, :focus-within), .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-search { width: 100%; z-index: 3; transition-delay: 0s; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-label, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-label { opacity: 0; pointer-events: none; transition-delay: 0s; }
.mkt-bar-search:is(:hover, :focus-within)::after, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-search::after { opacity: 0; }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-input, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-input { clip-path: circle(150% at 18px 50%); transition-delay: .1s; }
.mkt-bar-search:is(:hover, :focus-within) .mkt-bar-icon, .mkt-bar:has(.mkt-bar-input:not(:placeholder-shown)) .mkt-bar-icon { transform: translateY(0); opacity: 1; transition-delay: .3s; }

/* Filtern: Feld mit der Auswahl schiebt sich auf, der Pfeil dreht sich, darunter klappt die Liste auf */
.mkt-bar-word { transition: opacity .3s var(--mkt-soft) .35s; }
.mkt-bar-current { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 6px; width: 0; padding: 0; overflow: hidden; white-space: nowrap; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--color-bg); font-size: 13px; transition: width .45s var(--mkt-ease) .2s, padding .45s var(--mkt-ease) .2s; }
.mkt-bar-current > * { opacity: 0; transition: opacity .25s ease; }
.mkt-bar-current strong { color: var(--color-neutral-100); font-weight: 600; }
.mkt-bar-arrow { position: absolute; right: 16px; top: 50%; margin-top: -7px; color: var(--color-neutral-400); transition: transform .45s var(--mkt-soft) .1s, color .2s ease; }
.mkt-bar-filter:is(:hover, :focus-within) { left: 0; width: 100%; z-index: 3; transition-delay: 0s; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-word { opacity: 0; transition-delay: 0s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-current { width: calc(100% - 46px); padding: 0 14px; transition-delay: .15s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-current > * { opacity: 1; transition-delay: .4s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-arrow { transform: rotate(180deg); color: var(--color-accent-300); transition-delay: .35s; }
.mkt-bar.is-filtered .mkt-bar-word, .mkt-bar.is-filtered .mkt-bar-arrow { color: var(--color-accent-300); }
.mkt-bar.is-filtered .mkt-bar-word::after { content: " •"; }

/* Die Liste hängt direkt am Knopf; der Abstand ist durchsichtiger Innenabstand und gehört noch zum Knopf (Hover bleibt) */
.mkt-bar-drop { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; padding-top: 6px; visibility: hidden; transition: visibility 0s linear .25s; }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-drop { visibility: visible; transition-delay: 0s; }
.mkt-bar-menu { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 6px; border-radius: var(--radius-md); background: var(--color-surface); box-shadow: 0 14px 34px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--color-neutral-800); clip-path: inset(0 100% calc(100% - 2px) 0); }
.mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-menu { animation: mkt-drop .45s var(--mkt-soft) .2s both; }
@keyframes mkt-drop {
  0% { clip-path: inset(0 100% calc(100% - 2px) 0); }
  45% { clip-path: inset(0 0 calc(100% - 2px) 0); }
  100% { clip-path: inset(0 0 0 0); }
}
.mkt-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: var(--color-neutral-200); font: inherit; font-size: 13px; text-align: left; cursor: var(--cur-pointer); }
.mkt-opt:hover { background: color-mix(in srgb, var(--color-accent) 14%, transparent); }
.mkt-opt.active { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200); font-weight: 600; }
@media (max-width: 640px) { .mkt-bar { flex-basis: 100%; width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .mkt-bar *, .mkt-bar > div { transition-duration: 0s !important; transition-delay: 0s !important; }
  .mkt-bar-filter:is(:hover, :focus-within) .mkt-bar-menu { animation: none; clip-path: none; }
}
.mkt-opt-count { margin-left: auto; padding-left: 8px; color: var(--color-neutral-500); font-size: 12px; font-weight: 400; font-variant-numeric: tabular-nums; }
/* Mehrere Gruppen in einem Menü (Album: Seltenheit + Season) */
.mkt-group { display: grid; grid-template-columns: 1fr; gap: 2px; }
.mkt-group + .mkt-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--color-neutral-800); }
.mkt-group-title { padding: 4px 10px 2px; color: var(--color-neutral-500); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mkt-bar-menu { max-height: min(70vh, 540px); overflow-y: auto; }
.mkt-bar-current strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.album-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 14px; }
/* Album: Reiter im Stil der Handelsseite (.hb-tabs), darunter Suche/Filter und „Nur Karten im Besitz“ */
.album-tabs { flex: 1 1 auto; gap: 34px; margin-top: 6px; }
.album-filter-row .album-dupes { margin-left: auto; } /* Duplikate-Leiste rechts auf Höhe der Reiter */
/* Zertifikatsschild im normalen Dialog (Album): im Panel unter dem Status, volle Breite statt Showroom-Abstand */
.foil-modal:not(.is-showroom) .foil-plaque { width: 100%; margin: 4px 0 8px; }
.album-tabs .hb-tab { padding: 14px 0 16px; font-size: 19px; gap: 10px; }
.album-tabs .hb-tab.active::after { height: 3px; }
.album-tabs .hb-tab-count { font-size: 13px; line-height: 22px; padding: 0 9px; }
.slab-grades { gap: 28px; }
.slab-grades .hb-tab { font-size: 16px; }
.album-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-bottom: 18px; }
.album-owned { align-items: center; color: var(--text); font-weight: 500; cursor: var(--cur-pointer); }
.album-owned input { margin-top: 0; }
/* Kachel: Zustände der Karte auf einen Blick (beste Note im Slab, Sleeves, früher bewertet) */
.tcg-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tcg-chip { padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; color: var(--text); background: rgba(14, 15, 26, .85); box-shadow: 0 0 0 1px var(--color-neutral-600); }
.tcg-chip b { font-size: 12px; }
.tcg-chip.is-gold { color: #fde68a; box-shadow: 0 0 0 1px color-mix(in srgb, #fde68a 70%, transparent); }
.tcg-chip.is-silver { color: #e2e8f0; box-shadow: 0 0 0 1px color-mix(in srgb, #cbd5e1 70%, transparent); }
.tcg-chip.is-bronze { color: #fdba74; box-shadow: 0 0 0 1px color-mix(in srgb, #fb923c 65%, transparent); }
.tcg-chip.is-sleeve { color: var(--color-accent-200); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.tcg-chip.is-was { border-style: dashed; }
/* Dialog: Exemplare der Karte nach Wertung, jede Zeile öffnet die 3D-Ansicht */
.tcg-copylist h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-400); }
.tcg-copyrows { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; padding: 2px; }
.tcg-copy {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; border: 0; border-radius: 10px; text-align: left; cursor: var(--cur-zoom-in);
  font: inherit; color: var(--text); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--color-neutral-700);
}
.tcg-copy:hover { box-shadow: inset 0 0 0 1px var(--color-accent-400); }
.tcg-copy-badge { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; font-size: 18px; color: var(--color-neutral-200); background: var(--color-bg); box-shadow: inset 0 0 0 1px var(--color-neutral-600); }
.tcg-copy.is-gold .tcg-copy-badge { color: #fde68a; box-shadow: inset 0 0 0 2px #fde68a; }
.tcg-copy.is-silver .tcg-copy-badge { color: #e2e8f0; box-shadow: inset 0 0 0 2px #cbd5e1; }
.tcg-copy.is-bronze .tcg-copy-badge { color: #fdba74; box-shadow: inset 0 0 0 2px #fb923c; }
.tcg-copy.is-sleeve .tcg-copy-badge { color: var(--color-accent-200); }
.tcg-copy-text { display: flex; flex-direction: column; min-width: 0; }
.tcg-copy-text strong { font-size: 13px; font-weight: 600; }
.tcg-copy-text small { font-size: 11px; color: var(--color-neutral-400); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcg-copy-fav { margin-left: auto; color: #fde68a; }
.ihk-pick-tools { display: flex; margin-bottom: 12px; }
.tcg-dot-missing { --rar: transparent; box-shadow: inset 0 0 0 1.5px var(--color-accent-300); } /* "Fehlt mir noch" im Filter */

/* App herunterladen (Profil-Menü): wie die anderen Menüpunkte; bleibt versteckt, bis der Browser die Installation anbietet */
.user-menu-list button.app-install { color: var(--text); }
.user-menu-list button.app-install[hidden] { display: none; }

/* Falle für Skripte (moderation/requestSignals.js): für Menschen unsichtbar */
.hp-link { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Rangliste: eigene Liste für das Team (Admin + Devs) */
.rang-team h2 { margin: 0 0 16px; font-size: 18px; font-weight: 500; }

/* Scrollleisten (seitenweit): schmale Kapsel im Akzent-Lila mit Verlauf, ohne Pfeile; die Spur bleibt unsichtbar.
   Chromium/Safari über ::-webkit-scrollbar – dort KEIN scrollbar-width/-color setzen, sonst greift der Standard-Stil.
   Firefox kennt nur Farbe und Breite (Block unten). Leisten mit scrollbar-width: none bleiben versteckt. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
html::-webkit-scrollbar-track { background: var(--color-bg); box-shadow: inset 1px 0 0 var(--color-divider); }
::-webkit-scrollbar-thumb {
  min-height: 48px; min-width: 48px; border: 3px solid transparent; border-radius: 999px;
  background: linear-gradient(180deg, var(--color-accent-500), var(--color-accent-700)) padding-box;
}
::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-700)) padding-box; }
::-webkit-scrollbar-thumb:hover { border-width: 2px; background: linear-gradient(180deg, var(--color-accent-400), var(--color-accent-600)) padding-box; }
::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(90deg, var(--color-accent-400), var(--color-accent-600)) padding-box; }
::-webkit-scrollbar-thumb:active { border-width: 2px; background: linear-gradient(180deg, var(--color-accent-300), var(--color-accent-500)) padding-box; }
::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(90deg, var(--color-accent-300), var(--color-accent-500)) padding-box; }
::-webkit-scrollbar-button { display: none; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--color-accent-600) transparent; }
  html { scrollbar-color: var(--color-accent-600) var(--color-bg); }
}

/* Team-Auswahl (IHK, Dungeon, Mage Tower): Favoriten oben, „Häufig verwendet“ holt die meistgespielten Karten nach vorn
   (src/lib/pickShortcuts.js). Die Karten tragen --fo (Rang − 100); die Überschriften liegen per order dazwischen. */
.pick-group { grid-column: 1 / -1; margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--color-neutral-500); }
.pick-group[data-pick-group="fav"] { color: var(--color-accent-300); }
.pick-group[hidden] { display: none; }
.show-freq [data-freq] { order: var(--fo); }
.pick-freq-btn { flex: none; }
.pick-freq-btn[aria-pressed="true"] { color: var(--color-accent-300); box-shadow: inset 0 0 0 1px var(--color-accent-300); }
.ihk-pick-tools { flex-wrap: wrap; align-items: center; gap: 10px 16px; }

/* Pop-up vom Entwickler-Team (#132): wie das Geschenk-Fenster, Text mit Zeilenumbrüchen, bei langen Texten scrollbar */
.dev-pop-text {
  margin: 4px auto 10px; max-width: 46ch; max-height: min(50vh, 420px); overflow-y: auto; text-align: left;
  white-space: pre-line; overflow-wrap: anywhere; line-height: 1.55; color: var(--color-neutral-200);
}
.dev-pop-by { margin: 0 0 14px; }
/* Dev-Panel → Pop-ups: Ablaufdatum nur bei „Mit Ablaufdatum“ (ohne :has-Unterstützung bleibt das Feld einfach sichtbar) */
.popup-form:has(input[name="gueltig"][value="gelesen"]:checked) .popup-expiry { display: none; }
.popup-log-text { min-width: 220px; max-width: 420px; white-space: pre-line; overflow-wrap: anywhere; }

/* Gesperrte Exemplare in der Kartenauswahl (IHK, Dungeon): Schild wie im Album. Ganz gesperrt = grau und nicht wählbar,
   teilweise gesperrt = kleines Schild oben, Karte bleibt wählbar (src/tcg/locks.js copiesByCard) */
.ihk-lock-tag, .dg-lock-tag {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 2; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  color: #fecaca; background: rgba(14, 15, 26, .85); border: 1px solid color-mix(in srgb, #ff4d5e 55%, transparent);
}
.ihk-lock-tag.is-full { top: 42%; transform: translate(-50%, -50%); font-size: 11px; color: #ff4d5e; }
/* Foliertes Exemplar in der Auswahl von Quest, Dungeon und Turm (#204) – unten, damit es das Sperr-Schild nicht verdeckt */
.pick-foil-tag {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 2; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  color: #e0f2fe; background: rgba(14, 15, 26, .85); border: 1px solid color-mix(in srgb, #7dd3fc 60%, transparent);
}
/* Sleeve-Schalter vor der Kartenwahl: auffällige Fläche mit Schalter, im eingeschalteten Zustand deutlich hervorgehoben */
.pick-foil-switch { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 12px 16px; border-radius: var(--radius-lg, 12px); cursor: var(--cur-pointer, pointer);
  background: linear-gradient(135deg, color-mix(in srgb, #7dd3fc 10%, var(--color-surface)), var(--color-surface)); box-shadow: 0 0 0 1px color-mix(in srgb, #7dd3fc 40%, transparent); transition: box-shadow .2s ease, background .2s ease; }
.pick-foil-switch:hover { box-shadow: 0 0 0 1px #7dd3fc; }
.pick-foil-switch input { position: absolute; opacity: 0; pointer-events: none; }
.pfs-track { flex: none; position: relative; width: 52px; height: 28px; border-radius: 999px; background: var(--color-neutral-700); box-shadow: inset 0 0 0 1px #ffffff20; transition: background .2s ease; }
.pfs-track i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4); transition: transform .2s ease; }
.pfs-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pfs-text b { font-size: 15px; font-weight: 700; color: #bae6fd; }
.pfs-text small { font-size: 12px; color: var(--color-neutral-400); }
.pfs-text strong { color: var(--text); }
.pfs-state { flex: none; min-width: 36px; text-align: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--color-neutral-800); color: var(--color-neutral-400); }
.pfs-on, .pick-foil-switch input:checked ~ .pfs-state .pfs-off { display: none; }
.pick-foil-switch input:checked ~ .pfs-state .pfs-on { display: inline; }
.pick-foil-switch input:checked ~ .pfs-track { background: #0ea5e9; }
.pick-foil-switch input:checked ~ .pfs-track i { transform: translateX(24px); }
.pick-foil-switch input:checked ~ .pfs-state { background: #0ea5e9; color: #04202e; }
.pick-foil-switch:has(input:checked) { background: linear-gradient(135deg, color-mix(in srgb, #38bdf8 24%, var(--color-surface)), var(--color-surface)); box-shadow: 0 0 0 2px #38bdf8, 0 0 24px color-mix(in srgb, #38bdf8 30%, transparent); }
.pick-foil-switch input:focus-visible ~ .pfs-track { outline: 2px solid #7dd3fc; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pick-foil-switch, .pfs-track, .pfs-track i { transition: none; } }
.ihk-pick-card[data-blocked] { cursor: var(--cur-zoom-in); }
.ihk-pick-card[data-blocked] img { filter: grayscale(1) brightness(.6); }

/* Folierte Karte im Album: Menü unter der Karte wie bei normalen Karten – Wert, Favorit, Schützen, Verkaufen (foil-modal.ejs) */

/* ---------- Kosmetik-Shop (/kosmetik) und Avatar-Effekte ---------- */
.album-dupes form { margin: 0; }
.album-konfetti { font-size: 13px; color: var(--color-neutral-300, inherit); text-decoration: none; white-space: nowrap; }
.album-konfetti:hover { text-decoration: underline; }
.pf-bild-shop { margin: 16px 0 0; text-align: center; }
.cos-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.cos-head h1 { margin: 0 0 6px; }
.cos-head p { margin: 0; max-width: 560px; }
.cos-balance { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px; border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--color-divider); color: inherit; text-decoration: none; }
.cos-balance-label { font-size: 12px; opacity: .7; }
.cos-balance strong { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cos-section { margin-bottom: 40px; }
.cos-section h2 { margin: 0 0 16px; }
.cos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.cos-item { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 12px; background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-divider); }
.cos-item.is-worn { box-shadow: 0 0 0 2px var(--color-accent); }
.cos-item form { margin: 0; }
.cos-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.cos-name { margin: 0; font-size: 14px; font-weight: 500; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .cos-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .cos-balance { align-items: flex-start; } }

/* Effekte (Admin: Spielwerte → Kosmetik). Nur große Bilder bekommen sie (Shop, Profil, Podest) – Listen und Forum bleiben ruhig */
.cos-fx { border-radius: 8px; }
.cos-fx-glitch { animation: tcg-glitch 2.6s infinite; }
.cos-fx-gold { animation: cos-gold 3s ease-in-out infinite; }
.cos-fx-holo { animation: cos-holo 4s linear infinite; }
.cos-fx-glow { animation: cos-glow 2.4s ease-in-out infinite; }
.cos-fx-arcane { animation: cos-arcane 3.2s ease-in-out infinite; }
@keyframes cos-gold {
  0%, 100% { box-shadow: 0 0 0 2px #e7b84a, 0 0 10px 1px rgba(231, 184, 74, .35); filter: none; }
  50% { box-shadow: 0 0 0 2px #fff3c4, 0 0 22px 5px rgba(231, 184, 74, .6); filter: brightness(1.08) saturate(1.1); }
}
@keyframes cos-holo {
  0% { box-shadow: 0 0 0 2px #ff4fd8, 0 0 16px 2px rgba(255, 79, 216, .45); }
  33% { box-shadow: 0 0 0 2px #45d9ff, 0 0 16px 2px rgba(69, 217, 255, .45); }
  66% { box-shadow: 0 0 0 2px #fde047, 0 0 16px 2px rgba(253, 224, 71, .45); }
  100% { box-shadow: 0 0 0 2px #ff4fd8, 0 0 16px 2px rgba(255, 79, 216, .45); }
}
@keyframes cos-glow {
  0%, 100% { box-shadow: 0 0 8px 1px rgba(170, 220, 255, .3); }
  50% { box-shadow: 0 0 26px 7px rgba(200, 235, 255, .55); }
}
@keyframes cos-arcane {
  0%, 100% { box-shadow: 0 0 0 2px #a99cf0, 0 0 0 5px rgba(74, 64, 120, .6), 0 0 18px 4px rgba(169, 156, 240, .4); }
  50% { box-shadow: 0 0 0 2px #efedff, 0 0 0 7px rgba(169, 156, 240, .45), 0 0 30px 9px rgba(140, 110, 255, .55); }
}
@media (prefers-reduced-motion: reduce) { .cos-fx { animation: none !important; } }
.admin-cos-currency { max-width: 280px; }
.admin-cos-img { display: block; width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.admin-cos-table input[type="text"] { width: 100%; min-width: 90px; }
.admin-cos-table td.num input { max-width: 100px; text-align: right; }

/* Mage Tower – eSports-Lobby: Vorrat (Kaffee, Energy) und Bereit unter jedem Platz */
.dg-supply { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: .82rem; }
.dg-supply-row { display: flex; align-items: center; gap: 8px; }
.dg-supply-row.is-empty { color: var(--muted); }
.dg-supply-dot { width: 8px; height: 12px; border-radius: 2px; background: var(--border); flex: none; }
.dg-supply-dot.r-crumpled { background: var(--r-crumpled); }
.dg-supply-dot.r-bfwler { background: var(--r-bfwler); }
.dg-supply-dot.r-gold { background: var(--r-gold); }
.dg-ready { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 1px var(--color-neutral-700); color: var(--color-neutral-400); font-weight: 600; }
.dg-ready.is-ready { background: var(--ja); color: #10241a; box-shadow: none; }
.dg-supply-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 8px; }
.dg-supply-form .field { margin: 0; }

/* Arcane: magische Variante des Glitch-Effekts – Runenkreis dreht sich, Funken steigen auf, alle 5 s läuft eine
   Mana-Welle vom Herz der Karte nach außen (Echo-Bild) und Runen + Rand leuchten auf. Album, Großansicht, Pack-Öffnung. */
.r-arcane { --arc-ring: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27%23eadcff%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2794%27%20stroke-width%3D%271.2%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2789%27%20stroke-width%3D%27.5%27%20stroke-dasharray%3D%272%204%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2770%27%20stroke-width%3D%271.2%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28179.5%20100%29%20rotate%2890%29%27%20d%3D%27M0%20-6V6M0%20-6L4%20-2M0%200L4%204%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28174.7%20127.2%29%20rotate%28110%29%27%20d%3D%27M-3.5%206L0%20-6L3.5%206M-2%201.5H2%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28160.9%20151.1%29%20rotate%28130%29%27%20d%3D%27M0%20-6V6M-4%20-6L4%206%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28139.8%20168.8%29%20rotate%28150%29%27%20d%3D%27M-3.5%20-6L3.5%200L-3.5%206M3.5%20-6V6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28113.8%20178.3%29%20rotate%28170%29%27%20d%3D%27M-4%20-6H4L0%206Z%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2886.2%20178.3%29%20rotate%28190%29%27%20d%3D%27M0%20-6V6M-4%20-2H4M-4%202H4%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2860.3%20168.8%29%20rotate%28210%29%27%20d%3D%27M-4%206V-6L4%206V-6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2839.1%20151.1%29%20rotate%28230%29%27%20d%3D%27M-4%20-6L0%200L4%20-6M0%200V6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2825.3%20127.2%29%20rotate%28250%29%27%20d%3D%27M-3%20-6A4%204%200%201%201%20-3%201L3%206%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2820.5%20100%29%20rotate%28270%29%27%20d%3D%27M0%20-6V6M0%20-6L4%20-2M0%200L4%204%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2825.3%2072.8%29%20rotate%28290%29%27%20d%3D%27M-3.5%206L0%20-6L3.5%206M-2%201.5H2%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2839.1%2048.9%29%20rotate%28310%29%27%20d%3D%27M0%20-6V6M-4%20-6L4%206%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2860.2%2031.2%29%20rotate%28330%29%27%20d%3D%27M-3.5%20-6L3.5%200L-3.5%206M3.5%20-6V6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%2886.2%2021.7%29%20rotate%28350%29%27%20d%3D%27M-4%20-6H4L0%206Z%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28113.8%2021.7%29%20rotate%28370%29%27%20d%3D%27M0%20-6V6M-4%20-2H4M-4%202H4%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28139.8%2031.2%29%20rotate%28390%29%27%20d%3D%27M-4%206V-6L4%206V-6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28160.9%2048.9%29%20rotate%28410%29%27%20d%3D%27M-4%20-6L0%200L4%20-6M0%200V6%27%2F%3E%3Cpath%20stroke-width%3D%271.3%27%20transform%3D%27translate%28174.7%2072.8%29%20rotate%28430%29%27%20d%3D%27M-3%20-6A4%204%200%201%201%20-3%201L3%206%27%2F%3E%3Cpath%20stroke-width%3D%27.8%27%20d%3D%27M100%2034L157.2%20133L42.8%20133Z%20M100%20166L42.8%2067L157.2%2067Z%27%2F%3E%3Ccircle%20cx%3D%27100%27%20cy%3D%27100%27%20r%3D%2733%27%20stroke-width%3D%27.8%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); --arc-sparks: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27120%27%20height%3D%27180%27%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.43%27%20cx%3D%276%27%20cy%3D%2781.1%27%20r%3D%271.1%27%2F%3E%3Cpath%20fill%3D%27%239ff3ff%27%20opacity%3D%270.68%27%20d%3D%27M50.1%2089.8Q50.1%2092.9%2053.2%2092.9Q50.1%2092.9%2050.1%2096Q50.1%2092.9%2047%2092.9Q50.1%2092.9%2050.1%2089.8Z%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.63%27%20cx%3D%2729.6%27%20cy%3D%27125.9%27%20r%3D%270.8%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.53%27%20cx%3D%2795.3%27%20cy%3D%2770.3%27%20r%3D%270.8%27%2F%3E%3Cpath%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.54%27%20d%3D%27M70%2096Q70%2099.2%2073.2%2099.2Q70%2099.2%2070%20102.4Q70%2099.2%2066.8%2099.2Q70%2099.2%2070%2096Z%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.75%27%20cx%3D%2792%27%20cy%3D%278%27%20r%3D%270.9%27%2F%3E%3Cpath%20fill%3D%27%239ff3ff%27%20opacity%3D%270.71%27%20d%3D%27M7.5%2065.9Q7.5%2070.5%2012.1%2070.5Q7.5%2070.5%207.5%2075.1Q7.5%2070.5%202.9%2070.5Q7.5%2070.5%207.5%2065.9Z%27%2F%3E%3Ccircle%20fill%3D%27%239ff3ff%27%20opacity%3D%270.94%27%20cx%3D%2771.9%27%20cy%3D%27167.1%27%20r%3D%271.1%27%2F%3E%3Cpath%20fill%3D%27%239ff3ff%27%20opacity%3D%270.57%27%20d%3D%27M83.5%20137Q83.5%20141.8%2088.3%20141.8Q83.5%20141.8%2083.5%20146.6Q83.5%20141.8%2078.7%20141.8Q83.5%20141.8%2083.5%20137Z%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27170%27%20height%3D%27250%27%3E%3Cpath%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.58%27%20d%3D%27M6%20195.2Q6%20199.9%2010.7%20199.9Q6%20199.9%206%20204.6Q6%20199.9%201.3%20199.9Q6%20199.9%206%20195.2Z%27%2F%3E%3Cpath%20fill%3D%27%239ff3ff%27%20opacity%3D%270.82%27%20d%3D%27M61.3%2088.8Q61.3%2092.7%2065.2%2092.7Q61.3%2092.7%2061.3%2096.6Q61.3%2092.7%2057.4%2092.7Q61.3%2092.7%2061.3%2088.8Z%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.40%27%20cx%3D%2725.2%27%20cy%3D%2721%27%20r%3D%270.8%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.47%27%20cx%3D%2763.1%27%20cy%3D%27116.3%27%20r%3D%271%27%2F%3E%3Ccircle%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.99%27%20cx%3D%2722.9%27%20cy%3D%27224.1%27%20r%3D%270.8%27%2F%3E%3Cpath%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.44%27%20d%3D%27M50.4%20159.8Q50.4%20164.7%2055.3%20164.7Q50.4%20164.7%2050.4%20169.6Q50.4%20164.7%2045.5%20164.7Q50.4%20164.7%2050.4%20159.8Z%27%2F%3E%3Cpath%20fill%3D%27%23f2e8ff%27%20opacity%3D%270.63%27%20d%3D%27M69.1%2027.1Q69.1%2030.7%2072.7%2030.7Q69.1%2030.7%2069.1%2034.3Q69.1%2030.7%2065.5%2030.7Q69.1%2030.7%2069.1%2027.1Z%27%2F%3E%3C%2Fsvg%3E"); }
.r-arcane { --rar: #a77bff; }
/* Träger: im Album .tcg-fx-arcane (+ Echo-Bild), in der Großansicht und beim Pack-Öffnen der Glanz-Layer */
.tcg-fx-arcane, .tcg-zoom.r-arcane .tcg-shine, .tcg-flip.r-arcane .tcg-front .tcg-shine {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 1; mix-blend-mode: normal;
  background: linear-gradient(165deg, transparent 18%, rgba(150, 95, 255, .26) 38%, rgba(90, 225, 255, .16) 52%, transparent 72%);
  background-size: 100% 260%; animation: arcaneDrift 9s ease-in-out infinite alternate, arcaneEdge 5s ease-in-out infinite;
}
/* Runenkreis um das Herz der Karte */
.tcg-fx-arcane::before, .tcg-zoom.r-arcane .tcg-shine::before, .tcg-flip.r-arcane .tcg-front .tcg-shine::before {
  content: ''; position: absolute; left: 50%; top: 44%; width: 112%; aspect-ratio: 1; translate: -50% -50%;
  background: var(--arc-ring) center / contain no-repeat; mix-blend-mode: screen; opacity: .16;
  filter: drop-shadow(0 0 4px #b48cff) drop-shadow(0 0 10px #7c4dff);
  animation: arcaneSpin 30s linear infinite, arcaneRing 5s ease-in-out infinite;
}
/* aufsteigende Funken in zwei Ebenen (verschiedene Geschwindigkeit), flackern leicht */
.tcg-fx-arcane::after, .tcg-zoom.r-arcane .tcg-shine::after, .tcg-flip.r-arcane .tcg-front .tcg-shine::after {
  content: ''; position: absolute; inset: 0; background-image: var(--arc-sparks); background-size: 120px 180px, 170px 250px;
  mix-blend-mode: screen; animation: arcaneRise 14s linear infinite, arcaneTwinkle 2.6s ease-in-out infinite alternate;
}
/* Mana-Welle: helles Echo-Bild, das als Kreis vom Herz nach außen läuft */
.tcg-slot .tcg-art img.tcg-arcane-echo {
  filter: brightness(1.7) saturate(1.8) hue-rotate(-18deg) blur(1px); mix-blend-mode: screen; opacity: 0;
  clip-path: circle(0% at 50% 44%); animation: arcaneWave 5s ease-out infinite;
}
.tcg-zoom.r-arcane .tcg-card-3d img, .tcg-flip.r-arcane.flipped .tcg-front img { animation: arcaneFlare 5s ease-in-out infinite; }
.tcg-flip.r-arcane .tcg-aura { box-shadow: 0 0 26px 6px rgba(160, 110, 255, .5), 0 0 70px 18px rgba(80, 220, 255, .18); }
.tcg-flip.r-arcane:hover .tcg-aura { animation: tcg-aura-ether 3s ease-in-out infinite; }
@keyframes arcaneDrift { from { background-position: 0 0%; } to { background-position: 0 100%; } }
@keyframes arcaneEdge {
  0%, 62%, 100% { box-shadow: inset 0 0 0 1px rgba(190, 150, 255, .25), inset 0 0 18px rgba(124, 77, 255, .18); }
  72% { box-shadow: inset 0 0 0 1px rgba(225, 205, 255, .8), inset 0 0 34px rgba(150, 100, 255, .55), inset 0 0 70px rgba(80, 220, 255, .18); }
}
@keyframes arcaneSpin { to { rotate: 360deg; } }
@keyframes arcaneRing { 0%, 60%, 100% { opacity: .16; scale: 1; } 70% { opacity: .75; scale: 1.04; } 82% { opacity: .3; scale: 1.01; } }
@keyframes arcaneRise { from { background-position: 0 0, 60px 0; } to { background-position: 0 -540px, 60px -500px; } }
@keyframes arcaneTwinkle { from { opacity: .45; } to { opacity: .95; } }
@keyframes arcaneWave {
  0%, 62% { opacity: 0; clip-path: circle(0% at 50% 44%); }
  66% { opacity: .75; clip-path: circle(8% at 50% 44%); }
  84% { opacity: .3; clip-path: circle(70% at 50% 44%); }
  100% { opacity: 0; clip-path: circle(100% at 50% 44%); }
}
@keyframes arcaneFlare { 0%, 60%, 100% { filter: none; } 70% { filter: brightness(1.25) saturate(1.3) drop-shadow(0 0 6px rgba(170, 120, 255, .8)); } }
@media (prefers-reduced-motion: reduce) {
  .tcg-fx-arcane, .tcg-fx-arcane::before, .tcg-fx-arcane::after, .tcg-zoom.r-arcane .tcg-shine, .tcg-zoom.r-arcane .tcg-shine::before,
  .tcg-zoom.r-arcane .tcg-shine::after, .tcg-flip.r-arcane .tcg-front .tcg-shine, .tcg-flip.r-arcane .tcg-front .tcg-shine::before,
  .tcg-flip.r-arcane .tcg-front .tcg-shine::after, .tcg-zoom.r-arcane .tcg-card-3d img, .tcg-flip.r-arcane .tcg-front img { animation: none !important; }
  .tcg-art img.tcg-arcane-echo { display: none; }
}

/* ---------- Lil Dré's Bazaar (Handel, nur spielfähige eSports-Teams) – Design wie der Black Market ----------
   Lil Dré steht immer links, der Name rechts; der Balken ist zu- und aufgeklappt gleich hoch.
   Das Bild ist größer als der Balken: zugeklappt sieht man nur den Kopf, aufgeklappt läuft er hinter die Karten weiter.
   Bild: 600×900, Gesicht bei ca. 48 % / 14 %. */
.bz > .bz-head { position: static; flex-wrap: nowrap; min-height: 102px; padding-left: 200px; }
.bz .bz-title { position: relative; flex: 1; min-width: 0; align-items: flex-end; text-align: right; }
.bz .bm-title-row { justify-content: flex-end; }
.bz .bm-arrow { position: relative; flex: none; }
.bz-face { position: absolute; top: 0; left: 0; width: 210px; height: 500px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent), linear-gradient(180deg, #000 55%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, #000 70%, transparent), linear-gradient(180deg, #000 55%, transparent); mask-composite: intersect; }
.bz-face img { position: absolute; top: -14px; left: 0; width: 340px; max-width: none; height: auto; margin-left: -60px; }
.bz-restock { font-size: 12px; color: var(--color-neutral-400); }
.bz-restock strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 640px) {
  .bz > .bz-head { padding-left: 130px; }
  .bz-face { width: 140px; height: 360px; }
  .bz-face img { width: 300px; top: -8px; margin-left: -75px; }
}

/* IHK: Auswahl per Klick wie im Dungeon – Platz anklicken, im Fenster (.dg-picker) wählen (public/js/ihk.js) */
.ihk-slot[data-ihk-drop] { cursor: var(--cur-pointer); transition: outline-color .2s, box-shadow .2s; }
.ihk-slot[data-ihk-drop]:not(.is-disabled):hover, .ihk-slot[data-ihk-drop]:focus-visible { outline: 1px solid var(--color-accent-300); outline-offset: -1px; }
.ihk-slot[data-ihk-drop]:not(.is-disabled):hover img, .ihk-slot[data-ihk-drop]:focus-visible img { box-shadow: 0 0 0 2px var(--color-accent-300), 0 0 30px color-mix(in srgb, var(--color-accent) 40%, transparent); }
.ihk-slot-item.is-disabled[data-ihk-drop] { cursor: var(--cur-no); }
.ihk-offer, .ihk-picker [data-drag], .ihk-picker [data-drag]:active { cursor: var(--cur-pointer); }
.ihk-picker .ihk-offer-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.ihk-offer-cap { display: grid; gap: 2px; margin-top: 8px; font-size: 12.5px; text-align: center; color: var(--color-neutral-400); }
.ihk-offer-cap strong { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ihk-picker .ihk-pick-stats { margin-top: 6px; }
/* ---------- Grading: Karten von Mitgliedern (#204, Etappe B) ---------- */
.gr-submit-link { margin-left: auto; }
.gr-rep { margin: 4px 0 2px; font-size: 14px; }
.gr-price-form { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.gr-price-form .field { margin: 0; }
.gs-step { display: flex; flex-direction: column; gap: 12px; }
.gs-step h2 { margin: 0; font-size: 18px; }
.gs-form { display: flex; flex-direction: column; gap: 28px; }
.gs-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.gs-shop { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); cursor: var(--cur-pointer, pointer); font-size: 13px; }
.gs-shop input { position: absolute; top: 12px; right: 12px; }
.gs-shop:has(input:checked) { box-shadow: 0 0 0 2px var(--color-accent-300); }
.gs-shop-head { font-size: 15px; padding-right: 24px; }
.gs-shop-tier, .gs-shop-facts { color: var(--color-neutral-400); }
.gs-shop-showcase { display: flex; gap: 6px; margin: 4px 0; }
.gs-shop-showcase .foil-card { width: 46px; }
.gs-cards .gs-card { position: relative; cursor: var(--cur-pointer, pointer); padding: 0; border: 0; background: none; }
.gs-card > input { position: absolute; top: 6px; left: 6px; z-index: 3; }
.gs-card .tcg-art { position: relative; }
.gs-card:has(input:checked) .tcg-art, .gs-card:has(input:checked) .foil-card { box-shadow: 0 0 0 2px var(--color-accent-300); border-radius: 8px; }
.gs-order-actions form { margin: 0; }
.gs-rate { display: flex; gap: 6px; align-items: center; }
/* #204: Bausteine beim Einreichen, Gesamtpreis, Sterne zum Anklicken */
.gs-num { display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 6px; border-radius: 50%; background: var(--color-accent-300); color: var(--color-neutral-900); font-size: 14px; font-weight: 700; vertical-align: 2px; }
.gs-svcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.gs-svc { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; min-height: 48px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); cursor: var(--cur-pointer, pointer); }
.gs-svc input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.gs-svc > span { display: flex; flex-direction: column; gap: 2px; }
.gs-svc small { color: var(--color-neutral-400); font-size: 12px; }
.gs-svc:has(input:checked) { box-shadow: 0 0 0 2px var(--color-accent-300); }
.gs-svc.is-fixed { cursor: var(--cur-default); opacity: .8; }
.gs-svc.is-off { opacity: .45; cursor: var(--cur-default); }
.gs-warn { margin: 0; color: var(--nein); font-size: 13px; }
.gs-shop-list { line-height: 1.5; }
.gs-shop-stock.is-out { color: var(--nein, #f87171); font-weight: 600; }
.gs-submit { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800), 0 -8px 24px rgba(0, 0, 0, .35); }
.gs-summary { margin: 0; font-weight: 600; }
.gs-stars { display: inline-flex; flex-direction: row-reverse; }
.gs-stars input { position: absolute; opacity: 0; pointer-events: none; }
.gs-stars label { padding: 4px 3px; font-size: 22px; line-height: 1; color: var(--color-neutral-700); cursor: var(--cur-pointer, pointer); transition: color .12s, transform .12s; }
.gs-stars label:hover, .gs-stars label:hover ~ label, .gs-stars input:checked ~ label { color: #f5c542; }
.gs-stars label:hover { transform: scale(1.15); }
.gs-stars input:focus-visible + label { outline: 2px solid var(--color-accent-300); border-radius: 4px; }
.gr-rating { display: flex; flex-direction: column; gap: 2px; }
.gr-svc { display: inline-flex; gap: 4px; margin-right: 4px; vertical-align: 1px; }
.gr-svc-tag { padding: 1px 6px; border-radius: 999px; font-size: 11px; background: var(--color-neutral-800); color: var(--color-neutral-200); }
.gr-svc-tag.is-express { background: #f59e0b; color: #1a1200; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .gs-stars label { transition: none; } .gs-stars label:hover { transform: none; } }
.gs-profile { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* ---------- Grading-Shop: Hub und Werkbank (#204) ---------- */
.gh-bar { display: block; height: 6px; border-radius: 3px; background: var(--color-neutral-800); overflow: hidden; }
.gh-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-300)); }
.gh-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; align-items: start; }
.gh-card { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-800); min-width: 0; }
.gh-card h2 { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 16px; }
.gh-card h2 a { margin-left: auto; font-weight: 400; }
.gh-card p { margin: 0; }
.gh-card .gr-done li:last-child { border-bottom: 0; }
.gh-due.is-soon { color: #f59e0b; font-weight: 600; }
.gh-preview { cursor: var(--cur-default); }
.gr-workbench { gap: 14px; }
.gr-wb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.gr-wb-head .gr-ticket { flex: 1 1 auto; }

/* Messen (#204): Messebene über der Vorderseite mit Griffen unter der Karte, Lupe, Messleiste unter der Bühne */
.gr-stage.mode-measure .gr-obj { animation: none; transition: none; }
.gr-stage.mode-measure .gr-zoom { transition: none; }
.gr-stage.mode-measure { cursor: default; }
.gr-mtool { position: absolute; z-index: 6; display: none; pointer-events: none; }
.gr-stage.mode-measure .gr-mtool { display: block; }
.gr-mtool .gr-guide { position: absolute; top: -6px; height: calc(var(--grip-y, 100%) + 6px); width: 1px; transform: translateX(-50%); background: #22d3ee; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); opacity: .9; }
.gr-mtool .gr-guide.is-active { background: #facc15; }
.gr-mtool .gr-guide.is-snapped { background: #4ade80; box-shadow: 0 0 6px #4ade80, 0 0 0 1px rgba(0, 0, 0, .5); }
.gr-grip {
  position: absolute; top: var(--grip-y, 100%); width: 44px; height: 44px; margin: 0; padding: 0; transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%; border: 2px solid #22d3ee; background: rgba(10, 12, 24, .85);
  pointer-events: auto; cursor: ew-resize; touch-action: none;
}
.gr-grip::before { content: ''; position: absolute; left: 50%; top: -9px; width: 2px; height: 12px; transform: translateX(-50%); background: inherit; border-left: 2px solid #22d3ee; }
.gr-grip::after { content: '⟷'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 16px; color: #e5e7eb; }
.gr-grip.is-active { border-color: #facc15; box-shadow: 0 0 0 4px rgba(250, 204, 21, .2); }
.gr-grip.is-active::before { border-left-color: #facc15; }
.gr-loupe {
  position: absolute; top: var(--loupe-y, 18%); width: 120px; height: 120px; transform: translate(-50%, -50%) scale(.6); opacity: 0;
  border-radius: 50%; overflow: hidden; pointer-events: none; transition: opacity .12s, transform .12s;
  box-shadow: 0 0 0 3px #facc15, 0 10px 30px rgba(0, 0, 0, .6); background: #111;
}
.gr-loupe.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.gr-loupe.is-snapped { box-shadow: 0 0 0 3px #4ade80, 0 10px 30px rgba(0, 0, 0, .6); }
.gr-loupe-face { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.gr-loupe-img { position: absolute; display: block; max-width: none; border-radius: 1.2%; }
.gr-loupe-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); background: #facc15; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55); }
.gr-loupe.is-snapped .gr-loupe-line { background: #4ade80; }
.gr-mbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: -6px; padding: 10px 14px;
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800);
}
.gr-mbar[hidden] { display: none; }
.gr-mbar-side { display: flex; align-items: center; gap: 8px; }
.gr-mbar-side b { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.gr-mbar-side .gr-round { width: 44px; height: 44px; font-size: 20px; }
.gr-mbar-label { font-size: 12px; color: var(--color-neutral-400); }
.gr-mbar-mid { display: flex; flex-direction: column; align-items: center; }
.gr-mbar-mid b { font-size: 22px; color: #facc15; font-variant-numeric: tabular-nums; }
.gr-mbar-mid small { font-size: 12px; color: #facc15; }
@media (max-width: 560px) {
  .gr-mbar { justify-content: center; }
  .gr-mbar-mid { order: -1; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .gr-loupe { transition: none; } }

/* Putzen und Bügeln (#204): Werkzeug am Zeiger, Nass-Glanz, Glitzern, Dampf, Hitze am Eisen */
.gr-spot { transform: translate(-50%, -50%) scale(var(--sc, 1)); }
.gr-wet { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.gr-tool {
  position: absolute; z-index: 7; left: 0; top: 0; width: 46px; height: 46px; pointer-events: none; opacity: 0;
  transform: translate(var(--tx, 0), var(--ty, 0)) translate(-50%, -50%) rotate(var(--tilt, 0deg)); transition: opacity .12s;
  background: center / contain no-repeat;
}
.gr-stage.tool-on .gr-tool[data-tool="clean"], .gr-stage.tool-on .gr-tool[data-tool="iron"] { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .gr-stage.mode-clean.tool-on, .gr-stage.mode-iron.tool-on { cursor: none; }
}
.gr-tool[data-tool="clean"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect x='6' y='10' width='36' height='16' rx='5' fill='%2316a34a'/%3E%3Crect x='6' y='22' width='36' height='18' rx='5' fill='%23facc15'/%3E%3Ccircle cx='15' cy='31' r='2' fill='%23eab308'/%3E%3Ccircle cx='27' cy='34' r='2.4' fill='%23eab308'/%3E%3Ccircle cx='34' cy='28' r='1.6' fill='%23eab308'/%3E%3C/svg%3E");
}
.gr-stage.is-pressed .gr-tool[data-tool="clean"] { transform: translate(var(--tx, 0), var(--ty, 0)) translate(-50%, -50%) rotate(var(--tilt, 0deg)) scale(.9, .82); }
.gr-tool[data-tool="iron"] {
  width: 60px; height: 52px; transform: translate(var(--tx, 0), var(--ty, 0)) translate(-50%, -62%) rotate(var(--tilt, 0deg));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cpath d='M8 40 C10 24 22 16 40 16 L52 16 C55 16 56 18 56 21 L56 40 Z' fill='%23e5e7eb' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M24 16 C24 8 30 5 38 5 L48 5 C51 5 52 8 50 10 L46 16' fill='none' stroke='%236b7280' stroke-width='4' stroke-linecap='round'/%3E%3Ccircle cx='44' cy='28' r='3' fill='%23ef4444'/%3E%3C/svg%3E");
}
/* Sohle des Bügeleisens glüht mit der Hitze */
.gr-tool[data-tool="iron"]::after {
  content: ''; position: absolute; left: 12%; right: 6%; bottom: 20%; height: 4px; border-radius: 2px;
  background: rgb(255, calc(200 - var(--hot, 0) * 160), calc(120 - var(--hot, 0) * 110));
  box-shadow: 0 0 calc(4px + var(--hot, 0) * 14px) rgba(255, 110, 30, calc(.3 + var(--hot, 0) * .7));
}
.gr-stage.is-scorching .gr-tool[data-tool="iron"] { animation: gr-scorch .16s steps(2) infinite; }
@keyframes gr-scorch { 50% { filter: drop-shadow(0 0 6px #ef4444) brightness(1.15); } }
.gr-stage.mode-iron.iron-on .gr-iron-glow { opacity: calc(.6 + var(--hot, 0) * .4); scale: calc(1 + var(--hot, 0) * .35); }
.gr-sparkle {
  position: absolute; z-index: 8; width: 6px; height: 6px; margin: -3px 0 0 -3px; pointer-events: none; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px #a5f3fc; animation: gr-sparkle .65s ease-out forwards;
}
@keyframes gr-sparkle { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.gr-steam {
  position: absolute; z-index: 7; width: 22px; height: 22px; margin: -11px 0 0 -11px; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%); scale: var(--s, 1);
  animation: gr-steam .9s ease-out forwards;
}
@keyframes gr-steam { to { transform: translate(var(--drift, 0), -46px) scale(1.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .gr-stage.is-scorching .gr-tool[data-tool="iron"] { animation: none; outline: 2px solid #ef4444; border-radius: 8px; }
  .gr-tool { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-sparkle { animation: gr-fade .6s ease-out forwards; width: 10px; height: 10px; margin: -5px 0 0 -5px; }
  .gr-steam { display: none; }
}
@keyframes gr-fade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* Ablauf als Stationen (#204): Symbol je Station, Bühnenstimmung, Weiterrücken, Presse, Abschluss-Bildschirm */
.gr-steps li { align-items: center; text-align: center; }
.gr-steps li::before { align-self: stretch; order: -2; }
.gr-steps li::after {
  order: -1; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: 17px;
  background: var(--color-surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); filter: grayscale(.8); opacity: .7;
  transition: transform .25s, opacity .25s, filter .25s;
}
.gr-steps li[data-step="clean"]::after { content: "🧽"; }
.gr-steps li[data-step="iron"]::after { content: "♨️"; }
.gr-steps li[data-step="grade"]::after { content: "🔍"; }
.gr-steps li[data-step="slab"]::after { content: "🗜️"; }
.gr-steps li[data-step="send"]::after { content: "📦"; }
.gr-steps li.is-active::after { filter: none; opacity: 1; transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--color-accent), 0 0 14px color-mix(in srgb, var(--color-accent) 50%, transparent); }
.gr-steps li.is-done::after { content: "✓"; filter: none; opacity: 1; color: var(--color-accent-300); font-weight: 700; }
.gr-sound { margin-left: auto; }

/* Bühnenstimmung je Station: Licht und Unterlage wechseln */
.gr-stage { transition: background-color .5s; }
.gr-stage[data-station="clean"] { background-color: #12202a; }
.gr-stage[data-station="iron"] { background-color: #241a14; }
.gr-stage[data-station="iron"] .gr-lamp { background: radial-gradient(ellipse, rgba(255, 200, 150, .95), rgba(255, 150, 80, .25) 45%, transparent 70%); }
.gr-stage[data-station="grade"] { background-color: #0e0f1c; }
.gr-stage[data-station="grade"] .gr-lamp { width: 300px; }
.gr-stage[data-station="slab"] { background-color: #151a24; }
.gr-stage[data-station="send"] { background-color: #18151f; }

/* Weiterrücken: die Karte gleitet zur nächsten Station */
.gr-zoom.is-travel { animation: gr-travel .5s cubic-bezier(.3, .1, .3, 1); }
@keyframes gr-travel { 0% { opacity: 1; translate: 0 0; } 45% { opacity: 0; translate: -60px 0; } 55% { opacity: 0; translate: 60px 0; } 100% { opacity: 1; translate: 0 0; } }
/* Presse beim Versiegeln: ein kurzer Stoß */
.gr-stage.is-pressing { animation: gr-press .42s ease-out; }
@keyframes gr-press { 0% { transform: none; } 20% { transform: translateY(4px) scale(.995); } 40% { transform: translateX(-3px); } 60% { transform: translateX(2px); } 100% { transform: none; } }

/* Abschluss-Bildschirm über der Werkbank */
.gr-bench { position: relative; }
.gr-finish {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 8, 18, .72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s;
}
.gr-finish.is-on { opacity: 1; }
.gr-finish-panel {
  display: flex; flex-direction: column; gap: 14px; width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 24px;
  border-radius: var(--radius-lg); background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-accent-700), 0 30px 80px rgba(0, 0, 0, .6);
  transform: translateY(14px) scale(.98); transition: transform .3s cubic-bezier(.2, .9, .3, 1.2);
}
.gr-finish.is-on .gr-finish-panel { transform: none; }
.gr-finish-panel h2 { margin: 0; font-size: 40px; color: var(--gr-green, #4ade80); font-variant-numeric: tabular-nums; }
.gr-finish-grid { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
.gr-finish-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0; font-size: 14px; }
.gr-finish-list dt { color: var(--color-neutral-300); }
.gr-finish-list dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.gr-finish-list .is-sum { padding-top: 8px; border-top: 1px solid var(--color-divider); font-weight: 700; color: var(--text); }
.gr-finish-facts { display: flex; flex-wrap: wrap; gap: 8px; }
.gr-finish-facts span { padding: 4px 10px; border-radius: 999px; font-size: 13px; background: var(--color-neutral-800); }
.gr-finish-rep { background: color-mix(in srgb, var(--color-accent) 30%, transparent) !important; color: var(--color-accent-200); font-weight: 600; }
.gr-finish-rep.is-bad { background: color-mix(in srgb, #ef4444 32%, transparent) !important; color: #fecaca; }
.gr-finish-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.gr-finish-actions form { margin: 0; }
.gr-send-error { margin: 8px 0 0; }
/* Vorher/Nachher */
.gr-ba { display: flex; flex-direction: column; gap: 6px; }
.gr-ba-stack { position: relative; width: 100%; aspect-ratio: 720 / 1008; }
.gr-mini { position: absolute; inset: 0; overflow: hidden; border-radius: 4.6% / 3.3%; background: var(--rar, #333); }
.gr-mini-img { position: absolute; width: 94%; height: 95.72%; left: calc(3% * (1 + var(--cx, 0))); top: 2.14%; border-radius: 2%; }
.gr-mini .gr-crease { left: -10%; width: 120%; }
.gr-ba-after { clip-path: inset(0 0 0 var(--cut, 50%)); }
.gr-ba-after::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .25) 50%, transparent 60%); }
.gr-ba-stack::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--cut, 50%); width: 2px; translate: -1px 0; background: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .6); pointer-events: none; }
.gr-mini-slab { position: absolute; left: 6%; right: 6%; top: 3%; display: flex; justify-content: space-between; align-items: center; padding: 3% 6%; border-radius: 3px; background: #fff; border: 2px solid #b91c1c; color: #111; font-size: 12px; }
.gr-mini-slab span { font-size: 18px; font-weight: 800; }
.gr-ba-range { width: 100%; margin: 0; accent-color: var(--color-accent); min-height: 24px; }
.gr-ba-cap { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-neutral-500); }
@media (max-width: 560px) {
  .gr-finish-grid { grid-template-columns: 1fr; }
  .gr-ba { max-width: 200px; margin: 0 auto; width: 100%; }
  .gr-finish-panel { padding: 18px; }
  .gr-finish-actions .btn, .gr-finish-actions form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .gr-zoom.is-travel, .gr-stage.is-pressing { animation: none; }
  .gr-finish-panel { transform: none; transition: none; }
  .gr-steps li::after { transition: none; }
}
.gh-tools { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.gh-tool { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--color-divider); }
.gh-tool:last-child { border-bottom: 0; }
.gh-tool-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; background: var(--color-neutral-800); }
.gh-tool-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.gh-tool-text b { font-weight: 600; }
.gh-tool-text small { font-size: 12px; color: var(--color-neutral-400); }
.gh-tool-state { font-size: 12px; color: var(--color-neutral-400); white-space: nowrap; }
.gh-tool.is-owned .gh-tool-icon { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.gh-tool.is-owned .gh-tool-state { color: var(--color-accent-300); }
.gh-tool.is-locked { opacity: .55; }
.gh-tool form { margin: 0; }
.gr-stage.uv-pro .gr-uv-light { width: 184px; height: 184px; }
.gr-stage.uv-pro .gr-uv-shade { background: radial-gradient(circle 210px at var(--ux, 50%) var(--uy, 50%), transparent 0 40%, rgba(8, 4, 22, .62) 100%); }
.gs-filter { margin: 0; }
.gs-cards .gs-card[hidden], .gs-svc[hidden] { display: none; }
.gs-shop.is-off { opacity: .4; cursor: var(--cur-default); }
.gr-svc-tag.is-review { background: #7c3aed; color: #fff; }
.foil-cert-link { display: block; margin: 10px auto 0; text-align: center; font-size: 14px; }
.foil-cert-link[hidden] { display: none; }
.sl-grid { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
@media (max-width: 640px) { .sl-grid { grid-template-columns: 1fr; } }
.sl-card { align-items: center; }
.sl-card .foil-slot { width: 100%; max-width: 230px; padding: 0; border: 0; background: none; }
.sl-grade { display: flex; align-items: baseline; gap: 10px; margin: 0; }
.sl-grade-num { font-size: 48px; font-weight: 800; line-height: 1; color: var(--color-accent-300); }
.sl-sub { margin: 8px 0 0; font-size: 14px; }
.sl-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--color-neutral-300); display: flex; flex-direction: column; gap: 4px; }
.gh-miles { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gh-miles li { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.gh-mile-head { display: flex; justify-content: space-between; gap: 8px; }
.gh-mile-head small { color: var(--color-neutral-400); font-size: 12px; white-space: nowrap; }
.gh-miles li.is-done b { color: var(--color-accent-300); }
.gh-miles li.is-done { opacity: .75; }

/* ---------- Grading-Shop als Schreibtisch (#204): Nussbaum-Platte unter einer Tischlampe, Objekte öffnen Fenster ---------- */
/* Grafiken: Fluent Emoji 3D (MIT) und Poly-Haven-Holz (CC0), siehe public/img/grading/LICENSES.md; Schrift wie auf der restlichen Seite (Inter) */
/* Stationen als Inventar-Slots mit Pixel-Icons („496 RPG icons“, CC0) */
/* Der Tisch bricht aus dem 1240-px-Container aus: bis 1600 px breit, seitlich 24 px Luft */
.gd-page { gap: 16px; width: min(100vw - 48px, 1600px); margin-inline: calc(50% - min(50vw - 24px, 800px)); }
.gd-desk {
  --paper: #fbf8ef; --paper-ink: #2a2622; --brass-ink: #24190a; --display: var(--font);
  --focus: 0 0 0 2px #2a1a08, 0 0 0 4px #fde68a;
  --obj-shadow: drop-shadow(6px 10px 7px rgba(10, 5, 0, .55)) drop-shadow(1px 2px 1px rgba(10, 5, 0, .35));
  position: relative; display: grid; gap: 28px 18px; padding: 28px 32px 30px; border-radius: 26px; isolation: isolate;
  grid-template-columns: minmax(160px, 1fr) minmax(0, 2.6fr) minmax(160px, 1fr);
  grid-template-areas: "plate plate plate" "vit vit vit" "in mat out" "cl cc cr";
  background:
    radial-gradient(70% 70% at 15% 6%, rgba(255, 214, 150, .26), rgba(255, 214, 150, 0) 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(rgba(58, 30, 12, .58), rgba(30, 14, 4, .72)),
    url("/img/grading/wood.webp") center / 640px auto repeat;
  background-blend-mode: normal, normal, multiply, normal;
  box-shadow:
    inset 0 2px 0 rgba(255, 220, 170, .18), inset 0 -3px 0 rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .4),
    0 2px 0 #1b0e05, 0 6px 0 #120902, 0 30px 60px rgba(0, 0, 0, .6);
}
/* Tischplatte je Ausbaustufe, passend zum Namensschild: 1 rohes Holz · 2 polierter Nussbaum mit Messingleiste · 3 Stahl-Werkbank · 4 Samtunterlage */
.gd-desk-1 {
  background:
    radial-gradient(70% 70% at 15% 6%, rgba(255, 214, 150, .16), rgba(255, 214, 150, 0) 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .65) 100%),
    linear-gradient(rgba(70, 40, 18, .5), rgba(40, 22, 8, .68)),
    url("/img/grading/wood.webp") center / 640px auto repeat;
}
.gd-desk-2 {
  background:
    linear-gradient(115deg, transparent 0 30%, rgba(255, 230, 180, .1) 42%, transparent 54%),
    radial-gradient(70% 70% at 15% 6%, rgba(255, 220, 160, .34), rgba(255, 214, 150, 0) 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(rgba(58, 30, 12, .58), rgba(30, 14, 4, .72)),
    url("/img/grading/wood.webp") center / 640px auto repeat;
  box-shadow:
    inset 0 0 0 3px #1a0d03, inset 0 0 0 6px #d9a441, inset 0 0 0 7px #7a5416, inset 0 0 0 8px #1a0d03,
    0 2px 0 #1b0e05, 0 6px 0 #120902, 0 30px 60px rgba(0, 0, 0, .6);
}
.gd-desk-3 {
  background:
    radial-gradient(70% 70% at 15% 6%, rgba(200, 225, 255, .22), transparent 60%),
    radial-gradient(140% 120% at 50% 40%, transparent 45%, rgba(0, 0, 0, .55) 100%),
    linear-gradient(rgba(20, 28, 38, .35), rgba(10, 14, 20, .5)),
    url("/img/grading/diamond-plate.svg") 0 0 / 64px 64px;
  box-shadow:
    inset 0 0 0 3px #14181d, inset 0 0 0 5px #8d98a5, inset 0 0 0 6px #272e36,
    0 2px 0 #14181d, 0 6px 0 #0b0e12, 0 30px 60px rgba(0, 0, 0, .6);
}
.gd-desk-4 {
  /* Samtunterlage: tiefes Indigo wie das Namensschild mit weichem Schimmer, feinem Flor und Goldkordel am Rand */
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(160, 150, 240, .26), transparent 70%),
    linear-gradient(118deg, transparent 0 34%, rgba(160, 150, 240, .13) 46%, transparent 58%),
    radial-gradient(140% 120% at 50% 45%, transparent 40%, rgba(8, 5, 28, .72) 100%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .06) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#2c2563, #1f1948 55%, #130f33);
  box-shadow:
    inset 0 0 0 3px #0e0b24, inset 0 0 0 5px #d9a441, inset 0 0 0 6px #7a5416, inset 0 0 0 7px #0e0b24,
    inset 0 0 40px rgba(0, 0, 0, .45),
    0 2px 0 #0e0b24, 0 6px 0 #07051a, 0 30px 60px rgba(0, 0, 0, .6);
}

.gd-desk h1, .gd-desk h2 { margin: 0; }
.gd-img { display: block; height: auto; user-select: none; -webkit-user-drag: none; }
.gd-px { image-rendering: pixelated; image-rendering: crisp-edges; }
.gd-inline { display: inline-block; vertical-align: -3px; }
.gd-desk a:focus-visible, .gd-desk button:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 12px; }

/* Etikett unter einem Objekt: Name und Status */
.gd-tag {
  display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 12px 4px; border-radius: 4px; background: var(--paper); color: var(--paper-ink);
  transform: rotate(-1.2deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 2px 4px 6px rgba(0, 0, 0, .35); text-align: center;
}
.gd-tag b { display: flex; align-items: center; gap: 6px; font: 800 13px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; }
.gd-tag small { font: 600 12px/1.25 var(--font); color: #5a4f42; }
/* Schritt-Nummer als Pixel-Kästchen (wie die Stufen-Anzeige am Schild): eckig, gelb, mit hartem Rand und Schattenkante */
.gd-step { display: inline-grid; place-items: center; width: 20px; height: 20px; background: #fcd34d; color: #2a1d0e; font: 800 12px/1 var(--font); font-style: normal; letter-spacing: 0; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.gd-badge {
  position: absolute; top: -4px; right: -6px; z-index: 3; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px;
  border-radius: 999px; background: linear-gradient(#ef4444, #b91c1c); color: #fff; font: 800 14px/1 var(--font);
  box-shadow: 0 0 0 2px #fff4e0, 0 3px 8px rgba(0, 0, 0, .45); animation: gd-badge 2.6s ease-in-out infinite;
}
.gd-badge.is-express { background: linear-gradient(#f59e0b, #c2410c); }
@keyframes gd-badge { 0%, 80%, 100% { transform: scale(1); } 88% { transform: scale(1.2) rotate(-8deg); } 94% { transform: scale(1.05) rotate(6deg); } }

/* Objekte: Grafik mit Schatten der Tischlampe, heben sich beim Überfahren an */
.gd-obj {
  position: relative; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 12px;
  min-width: 140px; padding: 10px 8px 8px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  cursor: var(--cur-pointer, pointer);
}
.gd-art { position: relative; display: block; transform: rotate(var(--tilt, 0deg)); transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), filter .22s ease; filter: var(--obj-shadow); }
.gd-slot {
  display: grid; place-items: center; width: 116px; height: 116px; border-radius: 10px;
  background: radial-gradient(70% 70% at 50% 40%, #2e2216, #140d07 80%);
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px #c99d4c, inset 0 0 0 5px #6b4a1c, inset 0 4px 14px rgba(0, 0, 0, .8), inset 0 -2px 0 6px rgba(255, 220, 160, .06);
  filter: drop-shadow(4px 8px 6px rgba(10, 5, 0, .55));
}
.gd-slot > .gd-px:first-child { width: 88px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .55)); }
.gd-obj:hover .gd-slot, .gd-obj:focus-visible .gd-slot { box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px #fde68a, inset 0 0 0 5px #8a6420, inset 0 4px 14px rgba(0, 0, 0, .8), 0 0 18px rgba(253, 230, 138, .35); }
.gd-obj:hover .gd-art, .gd-obj:focus-visible .gd-art { transform: translateY(-5px); filter: drop-shadow(6px 14px 10px rgba(10, 5, 0, .55)); }
.gd-obj:active .gd-art { transform: translateY(-1px) scale(.98); }
.gd-obj:hover, .gd-obj:focus-visible { text-decoration: none; }
.gd-obj.is-locked .gd-slot > .gd-px:first-child { filter: grayscale(1) brightness(.55); }
.gd-art-lock { position: absolute; right: 4px; bottom: 4px; width: 34px; }
.gd-badge.is-count { background: linear-gradient(#4b5563, #1f2937); }
[data-gd-spike].is-new { animation: gd-bump .6s cubic-bezier(.3, 1.4, .5, 1); }

/* Namensschild im Pixel-Stil (Kenney „Pixel UI Pack“, 9-Slice, 2-fach): Identität | Fortschritt | Ressourcen | Tour */
.gd-plate {
  grid-area: plate; position: relative; display: grid; grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 0 12px;
  padding: 4px 8px; color: #2a1d0a; image-rendering: pixelated;
  border: 24px solid transparent; border-image: url("/img/grading/ui-plate.png") 12 fill / 24px round;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) drop-shadow(4px 10px 10px rgba(0, 0, 0, .35));
}
.gd-zone { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
/* Einlege-Felder (braunes Leder mit Nieten) für Fortschritt und Ressourcen */
.gd-zone-progress, .gd-zone-res {
  color: #fdf3d6; padding: 0 4px; image-rendering: pixelated;
  border: 20px solid transparent; border-image: url("/img/grading/ui-inlay.png") 10 fill / 20px round;
  margin: -6px 0; align-self: stretch; justify-content: center; min-height: 104px;
}
/* Rahmen und Einlege-Felder des Schilds je Ausbaustufe (1 bleibt das Pixel-Pergament): 2 Nussbaum mit Messing · 3 Stahl mit Nieten · 4 Indigo-Samt mit Goldkante */
.gd-plate-2, .gd-plate-3, .gd-plate-4 { border-image: none; }
.gd-plate-2 .gd-zone-progress, .gd-plate-2 .gd-zone-res,
.gd-plate-3 .gd-zone-progress, .gd-plate-3 .gd-zone-res,
.gd-plate-4 .gd-zone-progress, .gd-plate-4 .gd-zone-res { border-image: none; }

.gd-plate-2 {
  background: linear-gradient(rgba(58, 30, 12, .5), rgba(30, 14, 4, .7)), url("/img/grading/wood.webp") center / 480px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, inset 0 0 0 6px #1a0d03;
}
.gd-plate-2 .gd-label, .gd-plate-2 .gd-num { color: #f0d9a0; }

.gd-plate-3 {
  background:
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat left 8px top 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat right 8px top 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat left 8px bottom 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat right 8px bottom 8px / 10px 10px,
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, .16) 46%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#6f7a87, #4d5762 50%, #373f49);
  box-shadow: inset 0 0 0 2px #14181d, inset 0 0 0 4px #8d98a5, inset 0 0 0 5px #272e36, inset 0 8px 14px rgba(255, 255, 255, .08);
}
.gd-plate-3 .gd-label, .gd-plate-3 .gd-num { color: #d5dde6; }
.gd-plate-3 .gd-level i, .gd-plate-3 .gd-meter { background: #11151a; }

.gd-plate-4 {
  /* gepolsterter Samt wie der Tisch, nur etwas heller; Gold nur als dünne Paspel am Außenrand mit feiner Zweitlinie */
  background:
    radial-gradient(65% 120% at 20% 0%, rgba(175, 165, 255, .3), transparent 70%),
    linear-gradient(112deg, transparent 0 40%, rgba(175, 165, 255, .12) 50%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .06) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#3b3282, #2c2563 55%, #1f1948);
  box-shadow: none;
}
/* Der Rahmen sitzt am äußeren Rand: das Schild hat 24 px durchsichtigen Rand, ein inset-Schatten würde erst innerhalb davon zeichnen */
.gd-plate-4::before { content: ""; position: absolute; inset: -24px; pointer-events: none; box-shadow: inset 0 0 0 2px #0e0b24, inset 0 0 0 3px #e2b455, inset 0 0 0 4px #0e0b24, inset 0 8px 16px rgba(190, 180, 255, .1), inset 0 -10px 16px rgba(0, 0, 0, .25); }
.gd-plate-4::after { content: ""; position: absolute; inset: -19px; pointer-events: none; border: 1px solid rgba(226, 180, 85, .4); }
/* keine Kästen: Schrift liegt direkt auf dem Samt, getrennt durch eine feine Goldlinie mit kleiner Raute */
.gd-plate-4 .gd-zone-progress, .gd-plate-4 .gd-zone-res { background: none; box-shadow: none; position: relative; }
.gd-plate-4 .gd-zone-progress::before, .gd-plate-4 .gd-zone-res::before {
  content: ""; position: absolute; left: -8px; top: 18px; bottom: 18px; width: 1px;
  background: linear-gradient(transparent, #e2b455 25%, #e2b455 75%, transparent);
}
@media (max-width: 1099px) { .gd-plate-4 .gd-zone-progress::before, .gd-plate-4 .gd-zone-res::before { display: none; } }
.gd-plate-4 .gd-label, .gd-plate-4 .gd-num { color: #e8d49a; }
/* Stufe 2 und 3 ebenfalls ohne Kästen: Trennlinie je Material – Messing mit Niete auf Holz, Stahlnut mit Schraube auf Metall */
.gd-plate-2 .gd-zone-progress, .gd-plate-2 .gd-zone-res, .gd-plate-3 .gd-zone-progress, .gd-plate-3 .gd-zone-res {
  background: none; box-shadow: none; position: relative;
}
.gd-plate-2 .gd-zone-progress::before, .gd-plate-2 .gd-zone-res::before,
.gd-plate-3 .gd-zone-progress::before, .gd-plate-3 .gd-zone-res::before { content: ""; position: absolute; left: -8px; top: 18px; bottom: 18px; width: 2px; }
.gd-plate-2 .gd-zone-progress::after, .gd-plate-2 .gd-zone-res::after,
.gd-plate-3 .gd-zone-progress::after, .gd-plate-3 .gd-zone-res::after { content: ""; position: absolute; left: -11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; }
.gd-plate-2 .gd-zone-progress::before, .gd-plate-2 .gd-zone-res::before { background: linear-gradient(#7a5416, #d9a441 50%, #7a5416); box-shadow: 1px 0 0 #1a0d03; }
.gd-plate-2 .gd-zone-progress::after, .gd-plate-2 .gd-zone-res::after { background: radial-gradient(circle at 35% 30%, #fde68a, #b7791f); box-shadow: 0 0 0 1px #1a0d03; }
.gd-plate-3 .gd-zone-progress::before, .gd-plate-3 .gd-zone-res::before { background: #1b2026; box-shadow: 1px 0 0 rgba(255, 255, 255, .35); }
.gd-plate-3 .gd-zone-progress::after, .gd-plate-3 .gd-zone-res::after { background: radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 4px); }
@media (max-width: 1099px) {
  .gd-plate-2 .gd-zone-progress::before, .gd-plate-2 .gd-zone-res::before, .gd-plate-2 .gd-zone-progress::after, .gd-plate-2 .gd-zone-res::after,
  .gd-plate-3 .gd-zone-progress::before, .gd-plate-3 .gd-zone-res::before, .gd-plate-3 .gd-zone-progress::after, .gd-plate-3 .gd-zone-res::after { display: none; }
}
.gd-plate-4 .gd-level i, .gd-plate-4 .gd-meter { background: #07051a; }
/* Hintergrund über die ganze Fläche inkl. des 24-px-Rands ausrichten – sonst wiederholen sich Verläufe im Rand als Kacheln, in den Ecken sichtbar */
.gd-plate-2, .gd-plate-3, .gd-plate-4 { background-origin: border-box; background-clip: border-box; }
.gd-zone-id { padding-left: 2px; }
.gd-plate h1 { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 14px; width: 100%; font: 800 32px/1.15 var(--display); letter-spacing: -.01em; color: #2a1d0a; }
.gd-name { overflow-wrap: break-word; hyphens: auto; min-width: 0; flex: 0 1 auto; max-width: 12.5em; } /* 20 Zeichen (SHOP_NAME_MAX) passen in eine Zeile, längere Wörter brechen um */

/* Namensschild je Ausbaustufe: 1 Holzbrett · 2 Holz mit Messing · 3 Metall mit Nieten · 4 Neon-Reklame */
.gd-sign { position: relative; padding: 14px 30px; margin: -6px 0; align-self: stretch; min-height: 104px; border-radius: 2px; isolation: isolate; }
.gd-sign::before, .gd-sign::after { content: ""; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; z-index: 1; }
.gd-sign::before { left: 6px; }
.gd-sign::after { right: 6px; }
.gd-sign h1 { letter-spacing: .05em; }
.gd-sign .gd-name { position: relative; z-index: 2; }
/* Kürzel rechts neben dem Namen, bleibt in einer Zeile mit ihm */
.gd-sign h1 .gd-stamp, .gd-sign h1 .gd-seal { flex: none; margin: 0; }
.gd-sign .gd-seal { color: inherit; }

.gd-sign-1 {
  background: linear-gradient(rgba(60, 30, 8, .35), rgba(40, 20, 4, .5)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #3b2208, inset 0 2px 0 3px rgba(255, 220, 160, .18), 0 3px 0 rgba(0, 0, 0, .35);
}
.gd-sign-1::before, .gd-sign-1::after { background: #2a1706; box-shadow: inset 1px 1px 0 #8a6a3a; }
.gd-sign-1 h1 { color: #f6e3b8; text-shadow: 0 2px 0 #2a1706, 0 0 1px #2a1706; }

.gd-sign-2 {
  background: linear-gradient(rgba(30, 14, 4, .55), rgba(20, 8, 2, .7)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, 0 3px 0 rgba(0, 0, 0, .35);
}
.gd-sign-2::before, .gd-sign-2::after { background: radial-gradient(circle at 35% 30%, #fde68a, #b7791f); }
.gd-sign-2 h1 { color: #fdf3d6; text-shadow: 0 2px 0 #1a0d03; }

.gd-sign-3 {
  /* Industrie-Stahlplatte: vier Nieten in den Ecken, gebürstete Fläche, diagonaler Glanz, Schrift eingeprägt */
  background:
    radial-gradient(circle, #f4f7fa 0 1.5px, #8a95a2 2.5px, #232a31 4.5px, transparent 5px) no-repeat left 9px top 9px / 12px 12px,
    radial-gradient(circle, #f4f7fa 0 1.5px, #8a95a2 2.5px, #232a31 4.5px, transparent 5px) no-repeat right 9px top 9px / 12px 12px,
    radial-gradient(circle, #f4f7fa 0 1.5px, #8a95a2 2.5px, #232a31 4.5px, transparent 5px) no-repeat left 9px bottom 9px / 12px 12px,
    radial-gradient(circle, #f4f7fa 0 1.5px, #8a95a2 2.5px, #232a31 4.5px, transparent 5px) no-repeat right 9px bottom 9px / 12px 12px,
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, .2) 46%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#6f7a87, #4d5762 50%, #373f49);
  box-shadow: inset 0 0 0 2px #14181d, inset 0 0 0 4px #8d98a5, inset 0 0 0 5px #272e36, inset 0 8px 14px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .4);
}
.gd-sign-3::before, .gd-sign-3::after { display: none; }
/* aufgesetzte Chrom-Buchstaben: Verlauf hell → dunkel mit scharfer Kante in der Mitte, dazu Kontur und Schlagschatten */
.gd-sign-3 h1 { text-shadow: none; }
.gd-sign-3 .gd-name {
  color: transparent; background: linear-gradient(#ffffff 0 42%, #cfd8e2 50%, #8795a5 52%, #dfe6ee); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 .6px #0c1015) drop-shadow(0 1px 0 #0c1015) drop-shadow(0 3px 2px rgba(0, 0, 0, .55));
}

.gd-sign-4 {
  /* Neon-Schrift direkt auf dem Samt-Schild, nur ein warmer Lichtschein dahinter – keine Tafel, kein Rahmen */
  background: radial-gradient(ellipse closest-side at 50% 50%, rgba(255, 150, 40, .16), transparent); /* läuft vor dem Boxrand auf 0 aus */
  box-shadow: none;
}
.gd-sign-4::before, .gd-sign-4::after { display: none; }
.gd-sign-4 h1 {
  animation: gd-neon 7s steps(1) infinite;
}
/* Neonschrift: weißglühender Kern, enges farbiges Glühen – bleibt scharf und gut lesbar */
.gd-sign-4 .gd-name {
  font-family: "Pacifico", var(--display); font-weight: 400; font-size: 1.3em; letter-spacing: 0; line-height: 1.5;
  color: #fff7e0; text-shadow: 0 0 1px #fff, 0 0 4px #ffb02e, 0 0 9px rgba(255, 138, 0, .85), 0 0 20px rgba(255, 110, 0, .4);
}
.gd-sign-4 h1 .gd-stamp {
  color: #ffd6f5; border: 0; border-image: none; padding: 1px 8px; border-radius: 3px;
  text-shadow: 0 0 6px #f0abfc, 0 0 14px #d946ef;
  box-shadow: 0 0 0 2px #f0abfc, 0 0 8px #d946ef, inset 0 0 8px rgba(217, 70, 239, .5);
}
.gd-sign-4 .gd-seal { background: rgba(255, 255, 255, .1); color: #e6fbff; }
@keyframes gd-neon { 0%, 61%, 63%, 100% { opacity: 1; } 62% { opacity: .72; } 84% { opacity: .9; } 85% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gd-sign-4 h1 { animation: none; } }
.gd-stamp {
  display: inline-block; padding: 0 4px; color: #a11d1d; font: 800 15px/1.2 var(--font); letter-spacing: .16em; image-rendering: pixelated;
  border: 12px solid transparent; border-image: url("/img/grading/ui-stamp.png") 6 fill / 12px round; margin: -6px 0;
}
.gd-seal { font: 700 12px var(--font); padding: 2px 8px; background: rgba(60, 40, 10, .14); }
.gd-zone-progress { flex-direction: column; align-items: stretch; gap: 8px; }
.gd-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; font: 600 13px var(--font); }
.gd-row b { font: 700 14px var(--display); white-space: nowrap; }
.gd-label { font: 700 11px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #f1dfb8; white-space: nowrap; }
.gd-num { font-variant-numeric: tabular-nums; color: #f1dfb8; }
/* Stufen als Pixel-Kästchen, Ruf als segmentierter Pixel-Balken */
.gd-level { display: flex; gap: 3px; }
.gd-level i { width: 12px; height: 12px; background: #3b2810; box-shadow: inset 0 0 0 2px #1f1408; }
.gd-level i.is-on { background: #fcd34d; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.gd-meter { position: relative; flex: 1 1 80px; min-width: 70px; height: 14px; background: #3b2810; box-shadow: 0 0 0 2px #1f1408; }
.gd-meter span { display: block; height: 100%; background: linear-gradient(#86efac 0 3px, #22c55e 3px 10px, #15803d 10px); }
.gd-meter::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 8px, #1f1408 8px 10px); pointer-events: none; }
.gd-zone-res { flex-wrap: nowrap; gap: 12px; justify-content: space-around; }
.gd-res { display: flex; align-items: center; gap: 8px; }
.gd-res .gd-img { flex: none; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .45)); }
.gd-res > span { display: flex; flex-direction: column; line-height: 1.1; }
.gd-res b { font: 700 17px var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-res.is-bump { animation: gd-bump .5s ease; }
@keyframes gd-bump { 40% { transform: scale(1.12); } }
/* Knopf „Tour“: kleiner gelber „?“-Pixel-Knopf in der Schild-Ecke, beim Drücken die gedrückte Variante */
.gd-help {
  position: absolute; top: -6px; right: -6px; z-index: 2; display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0; color: #3b2503; font: 900 18px var(--display); cursor: var(--cur-pointer, pointer);
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round;
}
.gd-help:hover { filter: brightness(1.06); }
.gd-help:active { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); }

/* Glasvitrine: Nussbaumrahmen, Samt, ein Spotlight je Slab, Glas, Messingschildchen */
.gd-vitrine {
  grid-area: vit; position: relative; padding: 38px 26px 30px; border-radius: 16px; overflow: hidden;
  border: 14px solid transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") padding-box,
    linear-gradient(#2e0c13, #1a050a) padding-box,
    linear-gradient(rgba(40, 18, 6, .55), rgba(20, 8, 2, .7)) border-box,
    url("/img/grading/wood.webp") center / 420px auto border-box;
  background-blend-mode: normal, normal, multiply, normal;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 220, 160, .1), 0 1px 0 rgba(255, 220, 170, .15), 6px 16px 28px rgba(0, 0, 0, .6);
}
/* Das Regal scrollt waagerecht – dadurch schneidet es auch oben ab. Beim Darüberfahren wächst ein Slab bis ~50 px nach
   oben: dafür oben Luft im Regal, die per negativem Rand in den Innenabstand der Vitrine reicht (Höhe bleibt gleich) */
.gd-vit-shelf {
  position: relative; z-index: 1; display: flex; align-items: flex-end;
  margin-top: -36px; padding: 58px 10px 66px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: 900px;
  /* Abstand und Fachbreite aus der Breite der Vitrine (Container) und der Zahl der Fächer (--vit-slots): auch voll
     besetzt passen alle nebeneinander – erst unter 96 px je Fach wird gescrollt. „safe center“: läuft das Regal
     über, beginnt es links statt links abgeschnitten zu sein */
  --vit-gap: clamp(14px, 3cqw, 36px);
  justify-content: safe center; gap: var(--vit-gap);
}
.gd-vitrine { container-type: inline-size; }
/* registriert: wird im Regal zu px ausgerechnet und so vererbt – sonst rechneten Fach und Schild das cqw neu (relativ zum Fach) */
@property --vit-gap { syntax: "<length>"; inherits: true; initial-value: 24px; }
.gd-vit-shelf::-webkit-scrollbar { display: none; }
.gd-vit-shelf::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 42px; height: 12px; border-radius: 2px; z-index: -1; /* 24 px unter den Slabs (Innenabstand unten 66 px) */
  background: linear-gradient(rgba(60, 28, 10, .4), rgba(20, 8, 2, .6)), url("/img/grading/wood.webp") center / 400px auto;
  box-shadow: inset 0 1px 0 rgba(255, 220, 170, .25), 0 10px 16px rgba(0, 0, 0, .65);
}
/* Fach = Slab + Messingschild: nur der Slab (Button) wächst beim Darüberfahren, das Schild bleibt am Regalboden */
.gd-vit-item, .gd-vit-empty { flex: none; width: clamp(96px, calc((100cqw - 20px - (var(--vit-slots, 6) - 1) * var(--vit-gap)) / var(--vit-slots, 6)), 170px); scroll-snap-align: center; }
/* Fach als Container: die Schrift des Schilds richtet sich nach der Fachbreite */
.gd-vit-item { position: relative; z-index: 1; perspective: 900px; container-type: inline-size; }
.gd-vit-item:hover, .gd-vit-item:focus-within { z-index: 5; }
.gd-vit-slab {
  position: relative; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0; border: 0; background: none; font: inherit;
  cursor: var(--cur-pointer, pointer); transform: rotateX(5deg); transition: transform .3s cubic-bezier(.3, 1.3, .5, 1); z-index: 1;
}
.gd-vit-slab .foil-card { position: relative; z-index: 1; filter: drop-shadow(0 12px 10px rgba(0, 0, 0, .7)); }
.gd-vit-spot {
  position: absolute; left: 50%; bottom: 20%; width: 220%; height: 190%; transform: translateX(-50%); pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: conic-gradient(from 166deg at 50% -2%, transparent 0deg, rgba(255, 232, 180, .3) 12deg, rgba(255, 232, 180, .3) 16deg, transparent 28deg);
}
.gd-vit-slab::before { content: ""; position: absolute; inset: 8% 6% 22%; z-index: 0; border-radius: 50%; background: color-mix(in srgb, var(--rar, #fff) 45%, transparent); filter: blur(24px); opacity: .55; }
@media (hover: hover) {
  .gd-vit-slab:hover { transform: rotateX(0deg) translateY(-10px) scale(1.3); z-index: 5; }
}
.gd-vit-slab:focus-visible { transform: rotateX(0deg) translateY(-10px) scale(1.15); z-index: 5; }
/* Messingschild am Regalboden, zwei Zeilen: „Name – Seltenheit“ und „Kürzel – Note“ (zu lange Namen enden mit …) */
/* Aussehen wie das Grading-Etikett im Album (.gv-slab): helles Etikett mit violettem Rand und Glanz, Note 10 in Gold */
.gd-vit-plaque {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 1; transform: translateX(-50%); overflow: hidden;
  /* höchstens so breit, dass zwischen zwei Schildern noch 8 px frei bleiben – auch bei voller Vitrine */
  display: flex; flex-direction: column; align-items: center; gap: 2px; max-width: calc(100% + var(--vit-gap) - 8px); padding: .4em .9em .45em; border-radius: 7px;
  font: 700 clamp(11px, 8cqw, 13px)/1.3 var(--font); color: #161826; white-space: nowrap; pointer-events: none; /* Schrift nach Fachbreite */
  background: linear-gradient(180deg, #f3f2fa, #dddbee);
  box-shadow: inset 0 0 0 1px rgba(91, 79, 196, .35), 0 1px 0 rgba(255, 255, 255, .25), 0 4px 10px rgba(0, 0, 0, .55);
}
.gd-vp-line { display: flex; align-items: baseline; gap: 4px; max-width: 100%; min-width: 0; }
.gd-vp-line i { font-style: normal; color: #9a98b8; }
.gd-vp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gd-vp-rar { flex: none; font-size: .85em; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #5a5a70; } /* Seltenheit in Großbuchstaben: CRUMPLED, HOLO … */
.gd-vp-code { font-size: .85em; font-weight: 800; letter-spacing: .2em; color: #5b4fc4; }
.gd-vp-grade { font-size: 1.25em; font-weight: 800; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.gd-vit-plaque.is-gem { background: linear-gradient(135deg, #fff4cf, #f2c14e 45%, #fff1c2 60%, #d9a634); box-shadow: inset 0 0 0 1px rgba(146, 102, 10, .45), 0 0 14px rgba(242, 193, 78, .45), 0 4px 10px rgba(0, 0, 0, .55); }
.gd-vit-plaque.is-gem .gd-vp-code { color: #7a4e00; }
.gd-vit-plaque.is-gem :is(.gd-vp-rar, .gd-vp-line i) { color: #8a6a2a; }
.gd-vit-plaque.is-gem .gv-sheen { animation-duration: 2.6s; mix-blend-mode: overlay; }
.gd-vit-empty { position: relative; aspect-ratio: 720 / 1008; color: rgba(255, 230, 190, .55); text-decoration: none; }
.gd-vit-empty > span { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 10px; border: 1px solid rgba(255, 220, 170, .1); background: linear-gradient(160deg, rgba(255, 255, 255, .03), rgba(0, 0, 0, .2)); box-shadow: inset 0 0 22px rgba(0, 0, 0, .5); }
.gd-vit-empty b { font: 300 38px/1 var(--font); }
.gd-vit-empty small { font: 600 12px var(--font); }
.gd-vit-empty.is-add { cursor: var(--cur-pointer, pointer); transition: color .15s ease; }
.gd-vit-empty.is-add:hover, .gd-vit-empty.is-add:focus-visible { color: #fde68a; text-decoration: none; }
.gd-vit-empty.is-add:hover > span { border-color: rgba(253, 230, 138, .45); border-style: dashed; }
.gd-vit-empty::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 46%; height: 6px; transform: translateX(-50%); border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(3px); }
.gd-vit-glass {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 4px;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, .07) 22%, rgba(255, 255, 255, .02) 28%, transparent 32%, transparent 62%, rgba(255, 255, 255, .045) 65%, transparent 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 1px 0 0 rgba(255, 255, 255, .08), inset -1px 0 0 rgba(255, 255, 255, .08);
}
.gd-vit-edit {
  position: absolute; top: 4px; right: 6px; z-index: 6; display: inline-flex; align-items: center; gap: 6px; padding: 0 4px;
  color: #3b2503; font: 800 13px/1.3 var(--font); text-decoration: none; image-rendering: pixelated;
  background: none; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.gd-vit-edit:hover { text-decoration: none; filter: brightness(1.06) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gd-vit-edit:active { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); }

/* Ablauf ① Eingang → ② Werkbank → ③ Bons: Kreidepfeile zwischen den Stationen */
.gd-tray { grid-area: in; align-self: center; }
.gd-spike { grid-area: out; align-self: center; }

/* Schneidematte: Gummi mit Raster und Skala, die eine Hauptaktion */
.gd-mat {
  grid-area: mat; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 330px; padding: 46px 30px 30px; border-radius: 16px; color: #ecfdf3;
  background-color: #1b5a40;
  background-image:
    radial-gradient(80% 70% at 25% 10%, rgba(255, 230, 180, .12), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(236, 253, 243, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 253, 243, .1) 1px, transparent 1px),
    linear-gradient(rgba(236, 253, 243, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(236, 253, 243, .2) 1px, transparent 1px);
  background-size: auto, 120px 120px, 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  background-position: 0 0, 0 0, 11px 11px, 11px 11px, 11px 11px, 11px 11px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .08), inset 0 0 40px rgba(0, 0, 0, .3), 0 2px 0 #0f3a28, 6px 14px 22px rgba(0, 0, 0, .5);
}
.gd-mat::before {
  content: ""; position: absolute; top: 9px; left: 18px; right: 18px; height: 12px; opacity: .6;
  background: repeating-linear-gradient(90deg, #ecfdf3 0 1px, transparent 1px 10px) bottom / auto 5px repeat-x, repeating-linear-gradient(90deg, #ecfdf3 0 1px, transparent 1px 50px) bottom / auto 12px repeat-x;
}
.gd-mat-step {
  position: absolute; top: 24px; left: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px;
  background: linear-gradient(#4a3318, #36230d); color: #fde68a; font: 800 12px var(--font); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 0 #1f1408; image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px #1f1408, inset 0 0 0 4px #8a6420, inset 0 2px 0 4px rgba(255, 220, 160, .14), 0 3px 0 rgba(0, 0, 0, .4);
}
.gd-mat-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 22px 44px; flex-wrap: wrap; width: 100%; }
.gd-mat-text { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 460px; }
.gd-mat-text h2 { font: 800 30px/1.15 var(--display); letter-spacing: -.01em; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.gd-mat-who { font-size: 15px; color: #d4f5e3; }
.gd-mat-who b { color: #fde68a; }
/* Weitere angenommene Aufträge im Hintergrund (öffnet den Eingang auf „Angenommen“) */
.gd-mat-more { align-self: flex-start; color: #fde68a; font: 600 13px var(--font); text-decoration: underline; text-underline-offset: 3px; }
.gd-mat-more:hover { color: #fff; }
.gd-mat-card { width: 150px; height: auto; aspect-ratio: 720 / 1008; border-radius: 10px; transform: rotate(-5deg); box-shadow: 0 0 0 2px var(--rar, #fff), 8px 14px 18px rgba(0, 0, 0, .55); }
.gd-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gd-phases li + li { margin-left: 16px; }
.gd-phases li + li::before { content: "›"; position: absolute; left: -15px; color: rgba(236, 253, 243, .55); font-weight: 700; }
.gd-phases li { position: relative; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--radius-sm); background: rgba(0, 0, 0, .25); color: #b9e6cf; font: 600 13px var(--font); }
.gd-phases li.is-done { background: rgba(74, 222, 128, .18); color: #bbf7d0; }
.gd-phases li.is-now { background: #fde68a; color: #2b1d05; font-weight: 800; }
.gd-go {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 0; padding: 0 8px; color: #3b2503; font: 800 18px/1.3 var(--font); letter-spacing: .01em; text-decoration: none;
  background: none; image-rendering: pixelated; border: 18px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 18px round;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35));
  cursor: var(--cur-pointer, pointer); animation: gd-pulse 2.2s ease-in-out infinite;
}
.gd-go:hover { text-decoration: none; filter: brightness(1.06) drop-shadow(0 4px 0 rgba(0, 0, 0, .4)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.gd-go:active { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(3px); animation: none; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.gd-desk .gd-go:focus-visible { box-shadow: var(--focus); border-radius: 0; }
@keyframes gd-pulse { 0%, 100% { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 0 rgba(253, 224, 71, 0)); } 50% { filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)) drop-shadow(0 8px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 10px rgba(253, 224, 71, .8)); } }
.gd-mat-text form { margin: 0; }
.gd-envelope, .gd-mug { position: relative; display: block; }
.gd-mat-icon { width: 136px; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) drop-shadow(4px 10px 10px rgba(0, 0, 0, .4)); }
.gd-envelope-stamp { position: absolute; z-index: 1; right: -14px; bottom: 18px; padding: 2px 7px 1px; border: 2.5px solid #b91c1c; border-radius: 5px; color: #b91c1c; font: 900 13px var(--font); letter-spacing: .12em; transform: rotate(-13deg); background: rgba(255, 255, 255, .85); }
.gd-namecard { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: min(100%, 380px); padding: 22px; border-radius: 10px; background: var(--paper); color: var(--paper-ink); box-shadow: 6px 12px 20px rgba(0, 0, 0, .45); transform: rotate(-1deg); }
.gd-namecard h2 { text-align: center; font: 700 24px var(--display); }
.gd-namecard .gd-go { align-self: center; margin-top: 4px; }
.gd-namecard .field span { color: #5b5246; }






.gd-stars { color: #fbbc04; letter-spacing: 1px; font-size: 13px; }

/* Fenster: Blatt von unten, ab 900 px seitlich */
.gd-sheet {
  width: 100%; max-width: 640px; max-height: 88dvh; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #2a2420, #221d1a 240px); color: var(--text); box-shadow: 0 -12px 40px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 220, 170, .08);
  overflow: auto; overscroll-behavior: contain;
}
.gd-sheet[open] { animation: gd-sheet-up .2s cubic-bezier(.2, .9, .3, 1); }
.gd-sheet::backdrop { background: rgba(8, 6, 4, .55); backdrop-filter: blur(2px); }
@keyframes gd-sheet-up { from { transform: translateY(40px); opacity: 0; } }
.gd-sheet-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 18px 14px 12px 16px; background: rgba(42, 36, 32, .92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255, 220, 170, .1); touch-action: none; }
.gd-sheet-icon { width: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.gd-sheet-grip { position: absolute; top: 6px; left: 50%; width: 42px; height: 4px; margin-left: -21px; border-radius: 2px; background: var(--color-neutral-700); }
.gd-sheet-head h2 { flex: 1; margin: 0; font: 700 19px/1.2 var(--font); }
.gd-sheet-help, .gd-sheet-close { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 220, 170, .08); color: var(--text); font-size: 18px; font-weight: 700; cursor: var(--cur-pointer, pointer); }
.gd-sheet-help:hover, .gd-sheet-close:hover { background: rgba(255, 220, 170, .16); }
.gd-sheet-close { font-size: 24px; }
.gd-sheet-body { display: flex; flex-direction: column; gap: 14px; padding: 16px 18px 28px; }
.gd-sheet-body > * { margin: 0; }
.gd-sheet-sub { margin: 8px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--color-neutral-400); }
.gd-sheet-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.gd-sheet .flash { margin: 0; }
@media (min-width: 900px) {
  .gd-sheet { width: 460px; max-width: none; height: 100dvh; max-height: none; margin: 0 0 0 auto; border-radius: 20px 0 0 20px; }
  .gd-sheet[open] { animation-name: gd-sheet-in; }
  .gd-sheet-grip { display: none; }
  @keyframes gd-sheet-in { from { transform: translateX(60px); opacity: 0; } }
}
/* Popup mittig im Bild (#204, Pilot: Eingang): Pergament-Rahmen wie das Namensschild, innen Leder-Einlage.
   Fenster mit class="gd-sheet gd-pop" ersetzen Blatt/Seitenleiste; Aufbau (Kopf, Körper) bleibt gleich. */
.gd-sheet.gd-pop {
  width: min(620px, calc(100vw - 16px)); max-width: none; height: auto; max-height: min(86dvh, 760px); margin: auto; padding: 0;
  border: 24px solid transparent; border-image: url("/img/grading/ui-plate.png") 12 fill / 24px round; border-radius: 0; image-rendering: pixelated;
  background: none; box-shadow: none; color: #fdf3d6; overflow: visible; position: fixed;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .4)) drop-shadow(4px 12px 16px rgba(0, 0, 0, .5));
}
.gd-sheet.gd-pop[open] { display: flex; flex-direction: column; animation: gd-pop-in .16s ease-out; }
@keyframes gd-pop-in { from { transform: scale(.88) translateY(10px); opacity: 0; } }
.gd-pop::backdrop { background: rgba(8, 6, 4, .66); backdrop-filter: none; }
.gd-pop .gd-sheet-grip { display: none; }
.gd-pop .gd-sheet-head { position: static; flex: none; gap: 12px; padding: 0 0 8px; background: none; backdrop-filter: none; border-bottom: 0; touch-action: auto; }
.gd-pop .gd-sheet-head h2 { font: 800 26px/1.15 var(--display); letter-spacing: -.01em; color: #2a1d0a; }
.gd-pop .gd-sheet-icon { width: 40px; image-rendering: pixelated; }
.gd-pop .gd-sheet-help, .gd-pop .gd-sheet-close {
  box-sizing: border-box; width: 44px; height: 44px; padding: 0; border: 12px solid transparent; border-radius: 0; background: none; image-rendering: pixelated;
  border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; color: #3b2503; font: 800 17px/1 var(--display);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35));
}
.gd-pop .gd-sheet-help:hover, .gd-pop .gd-sheet-close:hover { background: none; filter: brightness(1.12) drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); }
.gd-pop .gd-sheet-help:active, .gd-pop .gd-sheet-close:active { border-image-source: url("/img/grading/ui-button-pressed.png"); }
.gd-pop .gd-sheet-help[aria-expanded="true"] { filter: brightness(1.25); }
.gd-pop .gd-sheet-help:focus-visible, .gd-pop .gd-sheet-close:focus-visible { outline: 2px solid #3b2503; outline-offset: 2px; }
.gd-pop .gd-sheet-body {
  flex: 1 1 auto; min-height: 120px; overflow: auto; overscroll-behavior: contain; padding: 4px 6px 8px; gap: 12px; image-rendering: pixelated;
  border: 20px solid transparent; border-image: url("/img/grading/ui-inlay.png") 10 fill / 20px round;
}
/* Popup je Ausbaustufe wie das Namensschild: 1 Pergament + Leder · 2 Nussbaum mit Messing · 3 Stahl mit Nieten · 4 Indigo-Samt mit Goldpaspel */
.gd-sheet.gd-pop-2, .gd-sheet.gd-pop-3, .gd-sheet.gd-pop-4 { border-image: none; }
.gd-pop-2 .gd-sheet-body, .gd-pop-3 .gd-sheet-body, .gd-pop-4 .gd-sheet-body { border: 0; border-image: none; padding: 14px 16px 16px; }
.gd-sheet.gd-pop-2 {
  background: linear-gradient(rgba(58, 30, 12, .5), rgba(30, 14, 4, .7)), url("/img/grading/wood.webp") center / 480px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, inset 0 0 0 6px #1a0d03;
}
.gd-pop-2 .gd-sheet-head h2 { color: #f0d9a0; text-shadow: 0 2px 0 #1a0d03; }
.gd-pop-2 .gd-sheet-body { background: linear-gradient(rgba(20, 9, 2, .72), rgba(20, 9, 2, .85)), url("/img/grading/wood.webp") center / 480px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px #7a5416, inset 0 6px 14px rgba(0, 0, 0, .6); color: #f0d9a0; }
.gd-pop-2 .gd-empty, .gd-pop-2 .gd-locked { color: #f0d9a0; }

.gd-sheet.gd-pop-3 {
  background:
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat left 8px top 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat right 8px top 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat left 8px bottom 8px / 10px 10px,
    radial-gradient(circle, #f4f7fa 0 1px, #8a95a2 2px, #232a31 3.5px, transparent 4px) no-repeat right 8px bottom 8px / 10px 10px,
    linear-gradient(112deg, transparent 0 38%, rgba(255, 255, 255, .16) 46%, transparent 54%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#6f7a87, #4d5762 50%, #373f49);
  box-shadow: inset 0 0 0 2px #14181d, inset 0 0 0 4px #8d98a5, inset 0 0 0 5px #272e36, inset 0 8px 14px rgba(255, 255, 255, .08);
}
.gd-pop-3 .gd-sheet-head h2 { color: #eef3f8; text-shadow: 0 2px 0 #14181d; }
.gd-pop-3 .gd-sheet-body { background: linear-gradient(#1b2026, #12161b); box-shadow: inset 0 0 0 2px #0a0d10, inset 0 0 0 3px #8d98a5, inset 0 6px 14px rgba(0, 0, 0, .6); color: #d5dde6; }
.gd-pop-3 .gd-empty, .gd-pop-3 .gd-locked { color: #d5dde6; }
.gd-pop-3 .gd-sheet-help, .gd-pop-3 .gd-sheet-close { filter: grayscale(1) brightness(1.1) drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.gd-pop-3 .gd-sheet-help:hover, .gd-pop-3 .gd-sheet-close:hover { filter: grayscale(1) brightness(1.3) drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }
.gd-pop-3 .gd-chips span { background: #11151a; color: #d5dde6; box-shadow: inset 0 0 0 2px #5b6672; }

.gd-sheet.gd-pop-4 {
  background:
    radial-gradient(65% 120% at 20% 0%, rgba(175, 165, 255, .3), transparent 70%),
    linear-gradient(112deg, transparent 0 40%, rgba(175, 165, 255, .12) 50%, transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .06) 1px 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .025) 0 1px, rgba(0, 0, 0, .05) 1px 3px),
    linear-gradient(#3b3282, #2c2563 55%, #1f1948);
}
.gd-pop-4::before { content: ""; position: absolute; inset: -24px; pointer-events: none; box-shadow: inset 0 0 0 2px #0e0b24, inset 0 0 0 3px #e2b455, inset 0 0 0 4px #0e0b24, inset 0 8px 16px rgba(190, 180, 255, .1), inset 0 -10px 16px rgba(0, 0, 0, .25); }
.gd-pop-4::after { content: ""; position: absolute; inset: -19px; pointer-events: none; border: 1px solid rgba(226, 180, 85, .4); }
/* nach den background-Kurzschreibweisen: Verläufe über die ganze Fläche inkl. Rand, sonst Kacheln in den Ecken */
.gd-sheet.gd-pop-2, .gd-sheet.gd-pop-3, .gd-sheet.gd-pop-4 { background-origin: border-box; background-clip: border-box; }
.gd-pop-4 .gd-sheet-head h2 { color: #e8d49a; text-shadow: 0 2px 0 #0e0b24; }
.gd-pop-4 .gd-sheet-body { background: linear-gradient(#0f0b2c, #07051a); box-shadow: inset 0 0 0 1px #e2b455, inset 0 0 0 3px #07051a, inset 0 6px 14px rgba(0, 0, 0, .6); color: #e8d49a; }
.gd-pop-4 .gd-empty, .gd-pop-4 .gd-locked { color: #e8d49a; }
.gd-pop-4 .gd-chips span { background: #1f1948; color: #e8d49a; box-shadow: inset 0 0 0 1px #e2b455; }
.gd-pop-2 .gd-chips span { background: #3a1e0c; color: #f0d9a0; box-shadow: inset 0 0 0 1px #d9a441; }
.gd-pop-2 .gd-chips .is-express, .gd-pop-3 .gd-chips .is-express, .gd-pop-4 .gd-chips .is-express { background: #f59e0b; color: #1a1200; }
.gd-pop .gd-chips span { border-radius: 0; }
.gd-pop-1 .gd-chips span { background: #2a1d0a; color: #fdf3d6; box-shadow: inset 0 0 0 2px #0c0703; }
.gd-pop .gd-chips .is-express { background: #f59e0b; color: #1a1200; }
.gd-pop-1 .gd-empty, .gd-pop-1 .gd-locked { color: #e8d49a; }
@media (max-width: 599px) {
  .gd-sheet.gd-pop { border-width: 16px; border-image-width: 16px; max-height: 90dvh; }
  .gd-pop .gd-sheet-head h2 { font-size: 22px; }
  .gd-pop .gd-sheet-body { border-width: 14px; border-image-width: 14px; }
}
/* Auftragsverwaltung im Eingang (#204): Pixel-Reiter, Auftragsliste, Detailkarte mit „Annehmen“; Farben je Tischstufe über Variablen */
.gd-pop-1 { --ord-slot: #3a2919; --ord-paper: #f1e4bf; --ord-ink: #fdf3d6; --ord-line: #fde68a; --ord-panel: rgba(0, 0, 0, .3); --ord-dim: #c9b88a; }
.gd-pop-2 { --ord-slot: #3a2312; --ord-paper: #ecd9ae; --ord-ink: #f0d9a0; --ord-line: #d9a441; --ord-panel: rgba(20, 9, 2, .55); --ord-dim: #b99a62; }
.gd-pop-3 { --ord-slot: #2b333b; --ord-paper: #e3e7ec; --ord-ink: #d5dde6; --ord-line: #8d98a5; --ord-panel: rgba(8, 11, 14, .5); --ord-dim: #8f9aa6; }
.gd-pop-4 { --ord-slot: #221c5a; --ord-paper: #e8e1f2; --ord-ink: #e8d49a; --ord-line: #e2b455; --ord-panel: rgba(5, 3, 20, .55); --ord-dim: #a99a73; }
.gd-sheet.gd-pop.gd-pop-wide { width: min(980px, calc(100vw - 16px)); }
.gd-ord { display: flex; flex-direction: column; gap: 12px; color: var(--ord-ink); }
.gd-ord [hidden] { display: none !important; }
.gd-ord-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-bottom: 10px; border-bottom: 2px solid color-mix(in srgb, var(--ord-line) 30%, transparent); }
.gd-ord-tabs { display: flex; gap: 4px; }
.gd-ord-tab {
  box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 4px; color: #3b2503; font: 800 15px/1 var(--display); letter-spacing: .02em;
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; cursor: var(--cur-pointer, pointer);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); opacity: .75;
}
.gd-ord-tab:hover { filter: brightness(1.1) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); opacity: 1; }
.gd-ord-tab.is-on { opacity: 1; border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.gd-ord-tab i { font-style: normal; padding: 0 5px; background: #3b2503; color: #fde68a; font-size: 12px; line-height: 16px; }
.gd-ord-tab:focus-visible, .gd-ord-item:focus-visible, .gd-ord-back:focus-visible { outline: 2px solid var(--ord-line); outline-offset: 2px; }
.gd-ord-pane { display: flex; flex-direction: column; gap: 12px; }
.gd-ord-stat { display: flex; gap: 14px; margin: 0; font-size: 12px; color: var(--ord-dim); white-space: nowrap; }
.gd-ord-stat b { color: var(--ord-ink); font-variant-numeric: tabular-nums; }
.gd-ord-listcol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gd-ord-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.gd-ord-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gd-ord-item {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; text-align: left; color: inherit; font: inherit; border: 0; border-radius: 0;
  background: var(--ord-panel); box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 3px color-mix(in srgb, var(--ord-line) 35%, transparent); cursor: var(--cur-pointer, pointer);
}
.gd-ord-list { padding-left: 14px; }
.gd-ord-item { position: relative; opacity: .8; transition: transform .12s, opacity .12s; }
.gd-ord-item:hover { opacity: 1; box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 3px var(--ord-line); }
.gd-ord-item[aria-pressed="true"] { opacity: 1; transform: translateX(6px); background: color-mix(in srgb, var(--ord-line) 16%, var(--ord-panel)); box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 3px var(--ord-line); }
.gd-ord-item[aria-pressed="true"]::before { content: ""; position: absolute; left: -17px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid var(--ord-line); border-right: 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
.gd-ord-item[aria-pressed="true"] .gr-done-thumb { transform: rotate(-4deg) scale(1.12); }
.gd-ord-item .gr-done-thumb { transition: transform .12s; }
.gd-ord-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.gd-ord-meta { font-size: 12px; color: var(--ord-dim); }
.gd-ord .gr-dim { color: var(--ord-dim); }
.gd-ord-npcicon { display: grid; place-items: center; width: 36px; }
.gd-ord-npcicon .gd-img { width: 34px; }
.gd-ord-npcicon.is-big { width: 88px; }
.gd-ord-npcicon.is-big .gd-img { width: 84px; }
.gd-ord-details {
  position: sticky; top: 0; min-width: 0; padding: 16px 14px 26px; color: #2a1d0a;
  --ord-ink: #2a1d0a; --ord-dim: #7a6540; --ord-line: #8a5a10;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(90, 60, 20, .07) 23px 24px), var(--ord-paper, #f1e4bf);
  /* gezackte Abrisskante unten */
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.gd-ord-details .gr-svc-tag { border-radius: 0; background: #2a1d0a; color: #fdf3d6; }
.gd-ord-details .gr-svc-tag.is-review { background: #7c3aed; color: #fff; }
.gd-ord-details .gd-ord-lines { padding-top: 10px; border-top: 2px dashed rgba(90, 60, 20, .45); }
.gd-ord-details .gd-ord-lines li { border-bottom-color: rgba(90, 60, 20, .35); }
.gd-ord-details .gd-ord-lines .is-total { border-top: 3px double rgba(90, 60, 20, .6); margin-top: 4px; }
.gd-ord-details .gd-ord-lines .is-total b { color: #1f7a3d; }
.gd-ord-details .gd-ord-back { background: rgba(90, 60, 20, .12); box-shadow: none; }
.gd-ord-details .gd-ord-hint .gd-img { filter: sepia(.4) drop-shadow(0 2px 0 rgba(90, 60, 20, .3)); }
.gd-ord-hint, .gd-ord-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 18px 0; text-align: center; color: var(--ord-dim); font-size: 14px; }
.gd-ord-empty { padding: 0; font-size: 13px; }
.gd-ord-hint .gd-img { width: 64px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.gd-ord-detail { display: flex; flex-direction: column; gap: 12px; }
.gd-ord-head { display: flex; gap: 14px; align-items: flex-start; }
.gd-ord-head h3 { margin: 0 0 2px; font: 800 20px/1.2 var(--display); color: var(--ord-line); }
.gd-ord-from { margin: 0 0 6px; font-size: 13px; color: var(--ord-dim); }
.gd-ord-from b { color: var(--ord-ink); }
.gd-ord-pin { position: relative; flex: none; }
.gd-ord-pin::before { content: ""; position: absolute; z-index: 1; top: -7px; left: 50%; width: 38px; height: 14px; margin-left: -19px; transform: rotate(-4deg); background: rgba(245, 232, 190, .72); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); pointer-events: none; }
.gd-ord-stamp { display: inline-block; margin-right: 6px; padding: 1px 5px; border: 2px solid #e5484d; color: #e5484d; font: 900 10px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; transform: rotate(-5deg); vertical-align: 1px; }
.gd-ord-stamp.is-big { position: absolute; z-index: 2; right: -18px; bottom: 16px; margin: 0; padding: 3px 7px; font-size: 14px; background: #f6ecd0; color: #c8302f; border-color: #c8302f; transform: rotate(-14deg); box-shadow: 2px 3px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.gd-ord-ok {
  position: absolute; z-index: 5; left: 50%; top: 46%; padding: 6px 14px; border: 4px solid #1f7a3d; color: #1f7a3d; background: rgba(246, 236, 208, .88);
  font: 900 26px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; pointer-events: none;
  transform: translate(-50%, -50%) rotate(-12deg); animation: gd-ord-slam var(--ord-t-stamp, 650ms) steps(10, end) both;
}
.gd-ord-details.is-stamped { animation: gd-ord-thud .3s calc(var(--ord-t-stamp, 650ms) * .9) steps(5, end); }
@keyframes gd-ord-slam { 0% { transform: translate(-50%, -50%) rotate(-24deg) scale(2.6); opacity: 0; } 70% { opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; } }
@keyframes gd-ord-thud { 0%, 100% { translate: 0 0; } 30% { translate: 0 4px; } 60% { translate: 0 -2px; } }
@media (prefers-reduced-motion: reduce) { .gd-ord-ok { animation: none; } .gd-ord-details.is-stamped { animation: none; } }
.gd-ord .gd-ord-transfer { align-self: center; animation: gd-ord-in .3s var(--ord-t-stamp, 650ms) ease-out both; }
.gd-ord .gd-ord-transfer:disabled { pointer-events: none; }
.gd-ord-abort { display: flex; justify-content: center; margin: 4px 0 0; }
.gd-ord-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 12px; font-size: 13px; color: var(--ord-dim); }
.gd-pop .gd-sheet-body { transition: opacity var(--ord-t-fade, 300ms) ease-out, transform var(--ord-t-fade, 300ms) ease-out; }
.gd-pop .gd-sheet-body.is-leaving { opacity: 0; transform: translateY(6px); }
.gd-pop .gd-sheet-body.is-entering { animation: gd-ord-in var(--ord-t-enter, 400ms) ease-out; }
.gd-ord-pane:not([hidden]) { animation: gd-ord-in .22s ease-out; }
@keyframes gd-ord-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .gd-ord .gd-ord-transfer { animation: none; } .gd-pop .gd-sheet-body { transition: none; } .gd-pop .gd-sheet-body.is-entering, .gd-ord-pane:not([hidden]) { animation: none; } }
.gd-ord-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 2px; color: #3b2503; font: 800 13px/1 var(--display); letter-spacing: .02em;
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; cursor: var(--cur-pointer, pointer);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.gd-ord-btn:hover { filter: brightness(1.1) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gd-ord-btn:active { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.gd-ord-btn:focus-visible { outline: 2px solid var(--ord-line); outline-offset: 2px; }
/* gefährlich (Abbrechen und Bestätigen): rot getönt */
.gd-ord-btn.is-danger { color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); filter: hue-rotate(-48deg) saturate(1.5) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gd-ord-btn.is-danger:hover { filter: hue-rotate(-48deg) saturate(1.5) brightness(1.12) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gd-ord-btn.is-danger:active { filter: hue-rotate(-48deg) saturate(1.5) drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
/* Unter der Mitglieder-Stufe: Hinweis statt Warteschlange */
.gd-ord-later { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: var(--ord-dim); font-size: 13px; }
.gd-ord-later .gd-img { width: 28px; opacity: .7; }
.gd-ord-due { color: #86efac; font-weight: 700; }
.gd-ord-due.is-soon { color: #fbbf24; }
.gd-ord-due.is-urgent { color: #ff7a6e; }
.gd-ord-card { flex: none; width: 96px; height: auto; aspect-ratio: 720 / 1008; border-radius: 6px; transform: rotate(-3deg); box-shadow: 0 0 0 2px var(--rar, var(--ord-line)), 5px 8px 12px rgba(0, 0, 0, .55); }
.gd-ord-lines { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.gd-ord-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 2px dotted color-mix(in srgb, var(--ord-line) 30%, transparent); }
.gd-ord-lines .is-total { border-bottom: 0; padding-top: 8px; font: 800 16px var(--display); color: var(--ord-line); }
.gd-ord-lines .is-total b { color: var(--ja, #4ade80); }
.gd-ord-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: 12px; color: var(--ord-dim); }
.gd-ord-facts b { color: var(--ord-ink); }
.gd-ord-card[data-zoom-card] { cursor: zoom-in; transition: transform .12s; }
.gd-ord-card[data-zoom-card]:hover, .gd-ord-card[data-zoom-card]:focus-visible { transform: rotate(0) scale(1.06); outline: none; }
.gd-go.is-off { filter: grayscale(1) brightness(.7) drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); cursor: default; animation: none; }
.gd-go.is-off:hover { filter: grayscale(1) brightness(.7) drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
.gd-ord-accept { display: flex; justify-content: center; margin: 4px 0 0; }
.gd-ord-block { margin: 0; padding: 10px 12px; font-size: 13px; line-height: 1.45; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 2px #0c0703; }
.gd-ord-block a { color: var(--ord-line); font-weight: 700; }
.gd-ord-back { display: none; align-self: flex-start; padding: 4px 8px; border: 0; background: var(--ord-panel); color: var(--ord-ink); font: 700 13px var(--font); box-shadow: inset 0 0 0 2px #0c0703; cursor: var(--cur-pointer, pointer); }
/* Angenommene Aufträge (#204): eine Pixel-Karte je Auftrag, der aktive mit Marke und goldenem Rahmen */
.gd-jobs { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 8px 0 0; list-style: none; }
.gd-job {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 14px 12px;
  background: var(--ord-panel); box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 3px color-mix(in srgb, var(--ord-line) 35%, transparent);
}
.gd-job.is-active {
  background: color-mix(in srgb, var(--ord-line) 14%, var(--ord-panel));
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-line), inset 0 0 0 5px #0c0703, 0 0 18px color-mix(in srgb, var(--ord-line) 35%, transparent);
}
/* Aktiv-Marke: Pixel-Wimpel mit Kerbe und blinkendem Pixel */
.gd-job-flag {
  position: absolute; top: -10px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 8px; background: #4ade80; color: #08260f;
  font: 900 11px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; image-rendering: pixelated;
  clip-path: polygon(0 0, 100% 0, 100% 28%, calc(100% - 4px) 28%, calc(100% - 4px) 72%, 100% 72%, 100% 100%, 0 100%);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5));
}
.gd-job-flag::before { content: ""; width: 6px; height: 6px; background: #08260f; animation: gd-job-blink 1.2s steps(2, end) infinite; }
@keyframes gd-job-blink { 50% { opacity: .15; } }
.gd-job-thumb { width: 56px; }
.gd-job-thumb img { cursor: zoom-in; }
.gd-job-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gd-job-info .gd-ord-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gd-job-info .gr-pay { margin-left: 0; }
.gd-job-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.gd-job-steps li { font-size: 11px; padding: 2px 8px; border-radius: 0; }
.gd-job-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.gd-job-actions .gd-ord-btn { width: 100%; text-decoration: none; white-space: nowrap; }
.gd-ord-btn, .gd-job-actions a.gd-ord-btn, .gd-job-actions a.gd-ord-btn:visited, .gd-job-actions a.gd-ord-btn:hover { color: #000; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
.gd-ord-btn.is-danger, .gd-job-actions .gd-ord-btn.is-danger { color: #000; }
.gd-job-actions form { margin: 0; }
.gd-job-actions .gd-ord-abort { flex-direction: column; margin: 0; }
.gd-job-actions .gd-ord-confirm { flex-direction: column; align-items: stretch; gap: 4px; text-align: center; }
.gd-ord-item.is-taken { opacity: .5; }
.gd-ord-item.is-taken::after { content: "✓"; position: absolute; right: 8px; top: 4px; color: #86efac; font-weight: 900; }
@media (max-width: 639px) {
  .gd-job { grid-template-columns: 56px minmax(0, 1fr); }
  .gd-job-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .gd-job-actions > * { flex: 1 1 140px; }
}
@media (prefers-reduced-motion: reduce) { .gd-job-flag::before { animation: none; } }
/* Pixel-Slots: Listenzeilen, Auftragskarten und Zähler teilen einen Rahmen mit abgeschnittenen Ecken, Abschrägung und abgesetztem Schatten */
.gd-ord { --ord-edge: color-mix(in srgb, var(--ord-line) 55%, #0c0703); --ord-notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); }
.gd-ord-list, .gd-jobs, .gd-ord-stat { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); }
.gd-ord-item, .gd-job, .gd-ord-stat span {
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0 4px, transparent 4px), var(--ord-slot);
  clip-path: var(--ord-notch);
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-edge), inset 0 -8px 0 4px rgba(0, 0, 0, .22);
}
.gd-ord-item { opacity: 1; padding: 10px 14px; }
.gd-ord-item:hover { box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-line), inset 0 -8px 0 4px rgba(0, 0, 0, .22); }
.gd-ord-item[aria-pressed="true"] {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px), color-mix(in srgb, var(--ord-line) 22%, var(--ord-slot));
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-line), inset 0 0 0 6px #0c0703, inset 0 0 0 8px color-mix(in srgb, var(--ord-line) 35%, transparent);
}
.gd-ord-item .gd-ord-name b, .gd-job .gd-ord-name b { color: var(--ord-ink); font-size: 15px; }
.gd-ord-item.is-taken { opacity: .55; }
.gd-job { padding: 16px 16px 14px; }
.gd-job.is-active {
  background: linear-gradient(180deg, rgba(255, 255, 255, .14) 0 4px, transparent 4px), color-mix(in srgb, var(--ord-line) 20%, var(--ord-slot));
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-line), inset 0 0 0 6px #0c0703, inset 0 0 0 8px color-mix(in srgb, var(--ord-line) 35%, transparent);
}
/* Wimpel und Auswahl-Pfeil liegen außerhalb des Slots – nicht abschneiden */
.gd-job { clip-path: none; }
.gd-job.is-active, .gd-job { box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-edge), inset 0 -8px 0 4px rgba(0, 0, 0, .22); }
.gd-job.is-active { box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px var(--ord-line), inset 0 0 0 6px #0c0703, inset 0 0 0 8px color-mix(in srgb, var(--ord-line) 35%, transparent); }
.gd-ord-item[aria-pressed="true"]::before { content: none; }
.gd-ord-list > li { position: relative; }
.gd-ord-list > li:has(> .gd-ord-item[aria-pressed="true"])::before { content: ""; position: absolute; left: -17px; top: 50%; margin-top: -7px; border: 7px solid transparent; border-left: 9px solid var(--ord-line); border-right: 0; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); }
/* Zähler: drei Pixel-Plaketten */
.gd-ord-stat { gap: 10px; }
.gd-ord-stat span { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; font: 700 11px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ord-dim); }
.gd-ord-stat b { font: 800 16px/1 var(--display); letter-spacing: 0; color: var(--ord-line); }
/* Trennlinie unter den Reitern: gestrichelte Pixelleiste statt dünner Linie */
.gd-ord-bar { position: relative; padding-bottom: 16px; border-bottom: 0; }
.gd-ord-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--ord-line) 0 8px, transparent 8px 12px); opacity: .5; }
.gd-ord .gd-go { animation: none; }
.gd-ord .gd-go:hover { animation: none; }
.gd-ord-pane .gd-phases { margin-bottom: 4px; }
.gd-ord-pane > .gd-go { align-self: center; }
@media (max-width: 639px) {
  .gd-ord-split { grid-template-columns: minmax(0, 1fr); }
  .gd-ord-split.is-detail .gd-ord-list { display: none; }
  .gd-ord-split:not(.is-detail) .gd-ord-details { display: none; }
  .gd-ord-details { position: static; }
  .gd-ord-back { display: inline-block; }
}
@media (prefers-reduced-motion: reduce) { .gd-ord-tab.is-on { transform: none; } }
.gd-empty, .gd-locked { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 0; color: var(--color-neutral-400); font-size: 15px; text-align: center; }
.gd-empty .gd-img, .gd-locked .gd-img { width: 68px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.gd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-chips span { padding: 3px 10px; border-radius: 999px; background: var(--color-neutral-800); font-size: 12px; }
.gd-chips .is-express { background: #f59e0b; color: #1a1200; font-weight: 700; }
.gd-sum-line { display: flex; justify-content: space-between; align-items: baseline; font: 700 16px ui-monospace, Consolas, monospace; }
.gd-sum-line b { font-size: 22px; }

/* Thermobons im Fenster */
.gd-bons { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.gd-bon {
  --z: 6px; display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 20px; background: var(--paper); color: var(--paper-ink);
  font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace; box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) var(--z) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--z)) var(--z) repeat-x, linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--z)) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
}
.gd-bon-head { display: flex; align-items: center; gap: 10px; }
.gd-bon-head img { width: 34px; height: auto; aspect-ratio: 720 / 1008; border-radius: 3px; box-shadow: 0 0 0 1px var(--rar, #aaa); }
.gd-bon-head > span { display: flex; flex-direction: column; min-width: 0; }
.gd-bon-head b { font-size: 13.5px; }
.gd-bon-head small { color: #6b6257; font-size: 11px; }
.gd-bon-lines { display: flex; flex-direction: column; padding-top: 6px; border-top: 1px dashed #b8b0a2; }
.gd-bon-lines > span { display: flex; justify-content: space-between; gap: 10px; }
.gd-bon-note { color: #6b6257; }
.gd-bon-total { display: flex; justify-content: space-between; padding-top: 6px; border-top: 2px dashed #8b8274; font-size: 14px; }
.gd-bon.is-void { opacity: .65; }
.gd-bon.is-void .gd-bon-total b { text-decoration: line-through; }

/* Vitrine einräumen: Schublade */
.gd-drawer { display: flex; flex-direction: column; gap: 16px; }
.gd-drawer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 14px; padding: 14px; border-radius: 12px; background: linear-gradient(#2b1c11, #20150c); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .6); }
.gd-drawer-item { position: relative; cursor: var(--cur-pointer, pointer); transition: transform .15s ease, opacity .15s ease, filter .15s ease; opacity: .5; filter: grayscale(.5); }
.gd-drawer-item input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.gd-drawer-item:has(input:checked) { opacity: 1; filter: none; transform: translateY(-3px); }
.gd-drawer-item:has(input:checked)::after { content: "✓"; position: absolute; top: -6px; right: -6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #4ade80; color: #062b14; font-size: 13px; font-weight: 900; }
.gd-drawer-item:has(input:focus-visible) { outline: 2px solid #fde68a; outline-offset: 3px; border-radius: 8px; }
.gd-drawer-item:has(input:disabled:not(:checked)) { cursor: var(--cur-default); }
.gd-drawer-item.is-locked { opacity: .3; }
.gd-drawer-item .gd-lock { position: absolute; left: 50%; top: 50%; width: 32px; transform: translate(-50%, -50%); }

/* Bewertungen (Kopf), Preise, Bügeln */
.gd-review-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.gd-review-score { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.gd-review-score b { font-size: 52px; line-height: 1; font-weight: 500; }
.gd-review-score .gd-stars { font-size: 18px; }
.gd-review-score small { color: var(--color-neutral-400); }
.gd-review-facts { display: grid; grid-template-columns: auto auto; gap: 4px 14px; margin: 0; font-size: 14px; }
.gd-review-facts dt { color: var(--color-neutral-400); }
.gd-review-facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.gd-prices { display: flex; flex-direction: column; gap: 10px; }
.gd-price-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; align-items: center; gap: 12px; }
.gd-price-row > span { display: flex; flex-direction: column; font-size: 14px; }
.gd-price-row small { font-size: 11px; color: var(--color-neutral-500); }
.gd-price-row input { text-align: right; font-variant-numeric: tabular-nums; }
.gd-price-row input[aria-invalid="true"] { box-shadow: 0 0 0 2px var(--nein); }
.gd-iron-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.gd-iron-item { margin: 0; }
.gd-iron-item button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; color: inherit; font-size: 12px; cursor: var(--cur-pointer, pointer); }
.gd-iron-item img { width: 100%; height: auto; aspect-ratio: 720 / 1008; border-radius: 7px; box-shadow: 0 0 0 1px var(--rar, var(--color-neutral-700)), 0 6px 12px rgba(0, 0, 0, .4); transition: transform .15s ease; }
.gd-iron-item button:hover img, .gd-iron-item button:focus-visible img { transform: translateY(-4px) rotate(-2deg); }
.gd-shopform { display: flex; flex-direction: column; gap: 8px; }

/* Großansicht als Showroom (Vitrine): Spotlight, Messingschild, Blättern */
.foil-modal.is-showroom::backdrop { background: radial-gradient(70% 60% at 50% 30%, rgba(70, 56, 32, .55), rgba(4, 4, 6, .97) 72%); backdrop-filter: blur(6px); }
.foil-modal.is-showroom::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(90vw, 620px); height: 75%; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(rgba(255, 238, 196, .2), rgba(255, 238, 196, 0)); clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
}
.foil-modal.is-showroom .foil-modal-stage { touch-action: none; }
.foil-modal.is-showroom .foil-modal-body { display: flex; flex-direction: column; align-items: center; gap: 0; width: auto; }
.foil-modal.is-showroom .foil-modal-info { display: none; }
/* Showroom: Karte und Schild als Gruppe mittig – die Bühne füllt nicht mehr die ganze Höhe, das Schild sitzt 2 cm
   unter der Karte (abzüglich des Innenabstands der Bühne); die Karte etwas kleiner, damit alles auf den Schirm passt */
.foil-modal.is-showroom .foil-modal-stage { flex: 0 0 auto; }
/* Breite aus der Höhe: Slab ≈ 1,65 × so hoch wie breit, darunter ~300 px für Abstand, Schild und Zertifikat-Link */
.foil-modal.is-showroom .foil-card-big { width: min(300px, 70vw, calc((100dvh - 300px) / 1.65)); }
.foil-modal.is-showroom .foil-cert-link { margin-top: 10px; }
.foil-nav { position: absolute; top: 50%; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; padding: 0 10px; transform: translateY(-50%); pointer-events: none; }
.foil-nav[hidden] { display: none; }
.foil-nav-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 30px; line-height: 1; pointer-events: auto; cursor: var(--cur-pointer, pointer); }
.foil-nav-btn:hover { background: rgba(255, 255, 255, .2); }
/* Schild unter der Karte – wie das Etikett der Grading-Vitrine im Album (.gv-slab): helles Etikett, violette Schrift,
   Note groß; Note 10 in Gold. Darunter die Seltenheit in dieser Note mit Notenspiegel der Karte */
.foil-plaque {
  display: flex; flex-direction: column; gap: 6px; width: min(340px, calc(100vw - 32px)); margin: calc(2cm - 16px) auto 0; padding: 10px 14px 10px;
  border-radius: 10px; background: linear-gradient(180deg, #f3f2fa, #dddbee); color: #161826; text-align: left;
  box-shadow: inset 0 0 0 1px rgba(91, 79, 196, .35), 0 10px 24px rgba(0, 0, 0, .55);
}
.foil-plaque[hidden] { display: none; }
.fp-head { font-size: 10px; font-weight: 700; letter-spacing: .22em; color: #5b4fc4; }
.fp-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.fp-name { display: flex; flex-direction: column; min-width: 0; }
.fp-name strong { font-size: 17px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-name small { font-size: 12px; font-weight: 600; color: #5a5a70; }
.fp-score { display: flex; flex-direction: column; align-items: flex-end; flex: none; }
.fp-word { font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #5b4fc4; }
.fp-grade { font-size: 40px; font-weight: 700; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.fp-pop { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid rgba(91, 79, 196, .22); }
.fp-pop-head { display: flex; align-items: center; gap: 8px; }
.fp-pop-head small { font-size: 12px; color: #5a5a70; font-weight: 600; }
.fp-tier { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; background: #e4e2f3; color: #3f3a74; }
.fp-tier.is-einzig { background: linear-gradient(135deg, #fff1c2, #f2c14e); color: #5c3a00; box-shadow: 0 0 10px rgba(242, 193, 78, .55); }
.fp-tier.is-rar { background: #5b4fc4; color: #fff; }
.fp-tier.is-selten { background: #c9c3f2; color: #2e2870; }
.fp-bars { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; align-items: end; height: 42px; }
.fp-bar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; }
.fp-bar i { display: block; width: 100%; height: calc(var(--h) * 28px); min-height: 2px; border-radius: 2px 2px 0 0; background: rgba(91, 79, 196, .18); }
.fp-bar.has i { background: rgba(91, 79, 196, .45); }
.fp-bar.is-this i { background: #5b4fc4; box-shadow: 0 0 8px rgba(91, 79, 196, .5); }
.fp-bar b { font-size: 10px; font-weight: 600; color: #8a8aa0; line-height: 1; }
.fp-bar.is-this b { color: #161826; font-weight: 800; }
.fp-pop-text { font-size: 12px; color: #3c3c52; }
.fp-count { align-self: center; font-size: 11px; color: #6a6a80; }
.foil-plaque.is-gem { background: linear-gradient(135deg, #fff4cf, #f2c14e 45%, #fff1c2 60%, #d9a634); box-shadow: inset 0 0 0 1px rgba(146, 102, 10, .45), 0 0 22px rgba(242, 193, 78, .4), 0 10px 24px rgba(0, 0, 0, .55); }
.foil-plaque.is-gem :is(.fp-head, .fp-word) { color: #7a4e00; }
.foil-plaque.is-gem :is(.fp-name small, .fp-pop-head small, .fp-pop-text, .fp-count) { color: #5c4210; }
.foil-plaque.is-gem .fp-pop { border-top-color: rgba(122, 78, 0, .25); }
.foil-plaque.is-gem .fp-bar i { background: rgba(122, 78, 0, .18); }
.foil-plaque.is-gem .fp-bar.has i { background: rgba(122, 78, 0, .4); }
.foil-plaque.is-gem .fp-bar.is-this i { background: #7a4e00; box-shadow: 0 0 8px rgba(122, 78, 0, .45); }
.foil-plaque.is-gem .fp-bar b { color: #8a6a2a; }
.foil-plaque.is-gem .fp-tier { background: rgba(122, 78, 0, .15); color: #5c3a00; box-shadow: none; }
.foil-plaque.is-gem .fp-tier.is-einzig { background: #7a4e00; color: #fff4cf; }

/* Namensschild: unter 1280 px Name oben, darunter die beiden Felder gleich breit */
@media (max-width: 1279px) {
  .gd-plate { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .gd-zone-id { grid-column: 1 / -1; margin-bottom: 4px; }
  .gd-sign { min-height: 80px; margin: 0; }
}
@media (max-width: 1099px) {
  .gd-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-areas: "plate plate plate" "vit vit vit" "in mat out" "cl cc cr"; padding: 22px; }
}
@media (max-width: 760px) {
  .gd-desk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "plate plate" "vit vit" "mat mat" "in out" "cc cc" "cl cr"; padding: 16px; gap: 22px 10px; border-radius: 20px; }
  .gd-plate { grid-template-columns: minmax(0, 1fr); row-gap: 12px; padding: 2px 2px; }
  .gd-zone-progress, .gd-zone-res { margin: 0; }
  .gd-zone-res { grid-column: auto; flex-wrap: wrap; gap: 10px 16px; }
  .gd-help { top: -4px; right: -4px; }
  .gd-plate h1 { font-size: 26px; padding-right: 44px; }
  .gd-mat { min-height: 0; padding: 50px 16px 22px; }
  .gd-mat-text { align-items: center; text-align: center; }
  .gd-mat-text h2 { font-size: 26px; }
  .gd-phases { justify-content: center; }
  .gd-go { width: 100%; }
  .gd-mat-text form { width: 100%; }
  .gd-vitrine { padding: 30px 10px 22px; border-width: 10px; }
  .gd-vit-shelf { justify-content: flex-start; margin-top: -26px; padding-top: 44px; }
  .gd-vit-edit { top: 0; right: 2px; font-size: 12px; }
  .gd-obj { min-width: 0; }
  .gd-slot { width: 104px; height: 104px; }
  .gd-slot > .gd-px:first-child { width: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .gd-badge, .gd-go, [data-gd-spike].is-new, .gd-res.is-bump { animation: none; }
  .gd-vit-slab:hover { transform: rotateX(0deg) scale(1.2); }
  .gd-art, .gd-vit-slab, .gd-drawer-item { transition: none; }
  .gd-sheet[open], .gd-sheet.gd-pop[open] { animation: gd-fade .2s ease; }
}
@keyframes gd-fade { from { opacity: 0; } }
.gs-vitrine-wrap { display: flex; flex-direction: column; gap: 12px; }
.gs-vitrine-wrap h2 { margin: 0; }

/* Bewertungen im Google-Stil (#204): Durchschnitt, Verteilung, Bewertungskarten mit Schnell-Tags */
.gd-gr { display: flex; flex-direction: column; gap: 16px; }
.gd-gr-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.gd-gr-score { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 96px; }
.gd-gr-score b { font-size: 52px; line-height: 1; font-weight: 500; }
.gd-gr-score .gd-stars { font-size: 17px; }
.gd-gr-score small { color: var(--color-neutral-400); font-size: 12px; }
.gd-gr-hist { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; }
.gd-gr-hist li { display: grid; grid-template-columns: 12px minmax(0, 1fr) 24px; align-items: center; gap: 8px; color: var(--color-neutral-400); }
.gd-gr-bar { display: block; height: 9px; border-radius: 5px; background: var(--color-neutral-800); overflow: hidden; }
.gd-gr-bar span { display: block; height: 100%; border-radius: inherit; background: #fbbc04; }
.gd-gr-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.gd-gr-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 0; border-top: 1px solid var(--color-divider); }
.gd-gr-who { display: flex; align-items: center; gap: 10px; }
.gd-gr-who .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.gd-gr-who > span { display: flex; flex-direction: column; line-height: 1.25; }
.gd-gr-who small { color: var(--color-neutral-400); font-size: 12px; }
.gd-gr-stars .gd-stars { font-size: 15px; }
.gd-gr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gd-gr-tags span { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.gd-gr-tags .is-good { background: color-mix(in srgb, #4ade80 16%, transparent); color: #86efac; }
.gd-gr-tags .is-bad { background: color-mix(in srgb, #f87171 16%, transparent); color: #fca5a5; }
.gd-gr-card { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-neutral-300); }
.gd-gr-card img { width: 26px; height: auto; aspect-ratio: 720 / 1008; border-radius: 3px; box-shadow: 0 0 0 1px var(--rar, var(--color-neutral-700)); }
.gd-review-facts { grid-template-columns: repeat(3, auto); justify-content: start; }
.gd-review-facts dt { grid-row: 1; }
.gd-review-facts dd { grid-row: 2; }
.gs-rate { flex-wrap: wrap; }
.gs-tags { display: flex; flex-wrap: wrap; gap: 6px; flex-basis: 100%; }
.gs-tags[hidden], .gs-tag[hidden] { display: none; }
.gs-tag { position: relative; cursor: var(--cur-pointer, pointer); }
.gs-tag input { position: absolute; opacity: 0; pointer-events: none; }
.gs-tag span { display: inline-block; padding: 4px 11px; border-radius: var(--radius-sm); border: 1px solid var(--color-neutral-700); font-size: 12px; transition: background .12s, border-color .12s; }
.gs-tag.is-good input:checked + span { background: color-mix(in srgb, #4ade80 18%, transparent); border-color: #4ade80; color: #bbf7d0; }
.gs-tag.is-bad input:checked + span { background: color-mix(in srgb, #f87171 18%, transparent); border-color: #f87171; color: #fecaca; }
.gs-tag input:focus-visible + span { outline: 2px solid var(--color-accent-300); outline-offset: 2px; }
.gs-tag input:disabled + span { opacity: .45; }

/* Tour über den Schreibtisch (#204): Spotlight über dem Objekt, Sprechblase daneben */
.gd-tour { position: fixed; inset: 0; z-index: 1000; }
.gd-tour-spot { position: fixed; border-radius: 18px; box-shadow: 0 0 0 9999px rgba(6, 4, 2, .74), 0 0 0 3px #fde68a, 0 0 30px 6px rgba(253, 230, 138, .45); transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease; pointer-events: none; }
.gd-tour-bubble {
  position: fixed; width: min(330px, calc(100vw - 24px)); padding: 16px 16px 12px; border-radius: 14px; background: var(--paper, #fbf8ef); color: #2a2622;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55); transition: left .25s ease, top .25s ease; animation: gd-fade .18s ease;
}
.gd-tour-bubble h3 { margin: 0 0 6px; font-size: 17px; }
.gd-tour-bubble p { margin: 0; font-size: 14px; line-height: 1.45; }
.gd-tour-bubble .gd-tour-count { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #8a7d68; }
.gd-tour-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
.gd-tour-actions .btn-ghost { color: #4a4237; }
.gd-tour-actions .btn-ghost:first-child { margin-right: auto; }
.gd-tour.is-still .gd-tour-spot, .gd-tour.is-still .gd-tour-bubble { transition: none; animation: none; }
.gd-info { margin: 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--color-accent) 14%, transparent); font-size: 14px; line-height: 1.45; }
.gd-sheet-help[aria-expanded="true"] { background: var(--color-accent-700); }
.gd-tour-actions .btn-primary { background: #3a2a10; border-color: #3a2a10; color: #fdf6e3; }
.gd-tour-actions .btn-primary:hover { background: #57401a; }

/* Fenster-Schema für alle Schreibtisch-Popups (#204): Farben je Ausbaustufe über die --ord-Variablen von .gd-pop-N, Pixel-Buttons und
   Pixelleisten gemeinsam – der Inhalt ist aber KEIN Kasten-Einheitsbrei, sondern je Fenster ein Gegenstand vom Schreibtisch:
   Preisliste = Zettel mit Preisschild · Bewertungen = Sprechblasen · Werkstatt = Pixel-Leiter + Lochwand · Erfolge = Medaillen */
.gd-pop { --ord-notch: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px)); --ord-dots: color-mix(in srgb, var(--ord-line) 38%, transparent); --ord-paper-ink: #2a1d0a; }
.gd-pop .gd-sheet-body { color: var(--ord-ink); }
.gd-pop .gr-dim, .gd-pop .muted, .gd-pop small { color: var(--ord-dim); }
.gd-pop .gd-empty, .gd-pop .gd-locked { color: var(--ord-ink); }
.gd-pop .gd-sheet-body a:not(.btn):not(.gd-go):not(.gd-ord-btn) { color: var(--ord-line); font-weight: 700; }
/* Zwischenüberschrift mit Pixelleiste */
.gd-pop .gd-sheet-sub { position: relative; margin: 10px 0 0; padding-bottom: 10px; font: 800 13px var(--display); letter-spacing: .12em; color: var(--ord-line); }
.gd-pop .gd-sheet-sub::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--ord-line) 0 8px, transparent 8px 12px); opacity: .5; }
/* Flache Zeilen mit Punktlinie wie auf einer Rechnung – kein Rahmen */
.gd-pop :is(.gr-facts, .gd-sum-line, .gd-review-facts) { background: none; box-shadow: none; padding: 0; }
.gd-pop .gd-sum-line { padding-bottom: 6px; border-bottom: 3px dotted var(--ord-dots); font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ord-dim); }
.gd-pop .gd-sum-line b { font: 800 22px/1 var(--display); letter-spacing: 0; color: var(--ord-line); }
.gd-pop .gr-facts { gap: 0 12px; }
.gd-pop .gr-facts dt, .gd-pop .gr-facts dd { padding: 7px 0; border-bottom: 3px dotted var(--ord-dots); }
.gd-pop .gr-facts dt { color: var(--ord-dim); }
.gd-pop .gr-facts dd { color: var(--ord-line); font: 800 14px var(--display); }
.gd-pop .gd-info { padding: 2px 0 2px 12px; border-left: 4px solid var(--ord-line); background: none; border-radius: 0; color: var(--ord-ink); }

/* ---- Preisliste: Zettel mit Punktlinien, Preisschild als Vorschau ---- */
.gd-pop .gd-prices {
  --ord-ink: var(--ord-paper-ink); --ord-dim: #7a6540; --ord-line: #8a5a10; gap: 0; padding: 18px 20px 28px; color: var(--ord-paper-ink);
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(90, 60, 20, .07) 23px 24px), var(--ord-paper, #f1e4bf);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55));
}
.gd-pop .gd-price-row { grid-template-columns: auto minmax(0, 1fr) 112px; gap: 0 10px; padding: 8px 0; background: none; box-shadow: none; clip-path: none; }
.gd-pop .gd-price-row > span { grid-column: 1; grid-row: 1; color: var(--ord-paper-ink); font: 700 15px var(--display); }
.gd-pop .gd-price-row small { color: #7a6540; font: 500 11px var(--font); }
.gd-pop .gd-price-row::after { content: ""; grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 10px; border-bottom: 3px dotted rgba(90, 60, 20, .5); }
.gd-pop .gd-prices .gd-price-row input { grid-column: 3; grid-row: 1; background: rgba(90, 60, 20, .12); color: #1f4d2b; box-shadow: inset 0 -3px 0 rgba(90, 60, 20, .5); font: 800 18px var(--display); padding: 6px 8px; }
.gd-pop .gd-prices .gd-price-row input:focus-visible { box-shadow: inset 0 -3px 0 #1f7a3d; outline: 2px solid #8a5a10; }
.gd-pop .gd-prices .gd-price-row input[aria-invalid="true"] { box-shadow: inset 0 -3px 0 var(--nein); }
/* Preisschild mit Loch und Schnur */
.gd-pop .gh-preview {
  position: relative; gap: 3px; margin-top: 4px; padding: 14px 18px 14px 44px; cursor: default; color: #2a1d0a; font-size: 13px;
  background: #f4e3a6; clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 0 50%); border-radius: 0; box-shadow: none;
  filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55));
}
.gd-pop .gh-preview::before { content: ""; position: absolute; left: 20px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: #1a1008; box-shadow: 0 0 0 2px #c9a64c; }
.gd-pop .gh-preview .gs-shop-head { padding-right: 0; }
.gd-pop .gh-preview .gs-shop-head b { color: #2a1d0a; font: 800 16px var(--display); }
.gd-pop .gh-preview .gs-shop-price b { color: #1f7a3d; font: 800 18px var(--display); }
.gd-pop .gh-preview .gs-shop-list, .gd-pop .gh-preview .muted { color: #6b5230; }
.gd-pop .gh-preview .gr-shop-code { background: #2a1d0a; color: #f4e3a6; border-radius: 0; }

/* ---- Bewertungen: Zahlen frei, Pixelbalken, Sprechblasen ---- */
.gd-pop .gd-review-facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 2px 20px; padding-bottom: 12px; border-bottom: 3px dotted var(--ord-dots); }
.gd-pop .gd-review-facts dt { color: var(--ord-dim); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.gd-pop .gd-review-facts dd { color: var(--ord-line); font: 800 30px/1.1 var(--display); text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.gd-pop .gd-gr, .gd-pop .gd-gr-list { gap: 16px; }
.gd-pop .gd-gr-head { padding: 0; background: none; box-shadow: none; clip-path: none; }
.gd-pop .gd-gr-score b { color: var(--ord-line); font: 800 56px/1 var(--display); text-shadow: 0 4px 0 rgba(0, 0, 0, .55); }
.gd-pop .gd-gr-score small, .gd-pop .gd-gr-hist li { color: var(--ord-dim); }
.gd-pop .gd-gr-bar { height: 10px; padding: 0; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .4) 0 6px, transparent 6px 8px); }
.gd-pop .gd-gr-bar span { border-radius: 0; background: repeating-linear-gradient(90deg, #fbbc04 0 6px, #c8900a 6px 8px); }
.gd-pop .gd-gr-item {
  position: relative; margin-left: 16px; padding: 12px 16px 12px 18px; border: 0; color: var(--ord-ink); box-shadow: none; filter: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0 4px, transparent 4px), var(--ord-slot);
  clip-path: polygon(0 22px, 14px 14px, 14px 4px, 18px 4px, 18px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 18px 100%, 18px calc(100% - 4px), 14px calc(100% - 4px), 14px 30px);
  padding-left: 30px;
}
.gd-pop .gd-gr-list { filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); }
.gd-pop .gd-gr-who .avatar { position: absolute; left: -16px; top: 6px; width: 34px; height: 34px; border-radius: 0; box-shadow: 0 0 0 2px #0c0703; clip-path: var(--ord-notch); }
.gd-pop .gd-gr-who { padding-left: 4px; }
.gd-pop .gd-gr-who b { color: var(--ord-ink); }
.gd-pop .gd-gr-tags span { border-radius: 0; box-shadow: inset 0 0 0 2px #0c0703; }
.gd-pop .gd-gr-tags .is-good { background: #14532d; color: #bbf7d0; }
.gd-pop .gd-gr-tags .is-bad { background: #7f1d1d; color: #fecaca; }
.gd-pop .gd-gr-card { color: var(--ord-dim); }
.gd-pop .gd-gr-card img, .gd-pop .gd-bon-head img, .gd-pop .gd-iron-item img { border-radius: 0; }

/* ---- Werkstatt: Ausbau als Pixel-Leiter, Werkzeuge an der Lochwand ---- */
.gd-pop .gr-tree { display: flex; flex-direction: column; gap: 0; padding: 4px 0 0; }
.gd-pop .gr-tree li { grid-template-columns: 30px minmax(0, 1fr); gap: 14px; padding: 0; background: none; box-shadow: none; clip-path: none; }
.gd-pop .gr-tree li::before { content: ""; left: 13px; top: 32px; bottom: 2px; width: 4px; background: repeating-linear-gradient(180deg, var(--ord-dots) 0 6px, transparent 6px 10px); }
.gd-pop .gr-tree li:last-child::before { display: none; }
.gd-pop .gr-tree li.is-done::before { background: var(--ord-line); }
.gd-pop .gr-tree-dot { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 0; clip-path: var(--ord-notch); background: #0c0703; box-shadow: none; color: var(--ord-dim); font: 800 14px var(--display); }
.gd-pop .gr-tree li.is-done .gr-tree-dot { background: var(--ord-line); color: #1a1200; }
.gd-pop .gr-tree li.is-next .gr-tree-dot { background: color-mix(in srgb, var(--ord-line) 30%, #0c0703); color: var(--ord-line); animation: gd-job-blink 1.4s steps(2, end) infinite; }
.gd-pop .gr-tree-body { padding-bottom: 18px; }
.gd-pop .gr-tree-name { color: var(--ord-dim); font: 800 15px var(--display); }
.gd-pop .gr-tree li.is-done .gr-tree-name, .gd-pop .gr-tree li.is-next .gr-tree-name { color: var(--ord-ink); }
.gd-pop .gr-tree li.is-next .gr-tree-name { color: var(--ord-line); }
.gd-pop .gr-tree-name span, .gd-pop .gr-tree-perk { color: var(--ord-dim); }
.gd-pop .gh-tools {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 14px 12px; padding: 18px 14px 16px; list-style: none; margin: 0;
  background: radial-gradient(circle, rgba(0, 0, 0, .55) 0 2px, transparent 2.5px) 0 0 / 18px 18px, linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 30%), var(--ord-slot);
  clip-path: var(--ord-notch); box-shadow: none; filter: none;
}
.gd-pop .gh-tool {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 8px 12px; text-align: center; color: var(--ord-paper-ink); border: 0;
  background: var(--ord-paper); clip-path: polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%); box-shadow: none; filter: none;
}
.gd-pop .gh-tool::before { content: ""; position: absolute; top: 8px; left: 50%; width: 10px; height: 10px; margin-left: -5px; background: #1a1008; box-shadow: 0 0 0 2px #b3946a; }
.gd-pop .gh-tool-icon { width: 40px; height: 40px; border-radius: 0; background: none; box-shadow: none; }
.gd-pop .gh-tool-text { align-items: center; }
.gd-pop .gh-tool-text b { color: var(--ord-paper-ink); font: 800 14px var(--display); }
.gd-pop .gh-tool-text small, .gd-pop .gh-tool-state { color: #7a6540; }
.gd-pop .gh-tool.is-owned .gh-tool-state { color: #1f7a3d; font: 800 16px var(--display); }
.gd-pop .gh-tool.is-locked { opacity: 1; filter: grayscale(1) brightness(.62); }
.gd-pop .gh-tool form { margin: 0; }
.gd-pop .gd-shopform { padding: 0; background: none; box-shadow: none; clip-path: none; }

/* ---- Erfolge: Medaillen mit Pixelbalken ---- */
.gd-pop .gh-miles { gap: 0; }
.gd-pop .gh-miles li { position: relative; gap: 4px; padding: 12px 0 12px 44px; background: none; box-shadow: none; clip-path: none; border-bottom: 3px dotted var(--ord-dots); }
.gd-pop .gh-miles li:last-child { border-bottom: 0; }
.gd-pop .gh-miles li::before {
  content: ""; position: absolute; left: 2px; top: 12px; width: 30px; height: 30px; background: #0c0703; box-shadow: none;
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.gd-pop .gh-miles li::after {
  content: ""; position: absolute; left: 10px; top: 20px; width: 14px; height: 14px; background: color-mix(in srgb, var(--ord-dim) 55%, #0c0703);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.gd-pop .gh-miles li.is-done { opacity: 1; }
.gd-pop .gh-miles li.is-done::before { background: linear-gradient(135deg, #fde68a, var(--ord-line) 55%, #8a5a10); }
.gd-pop .gh-miles li.is-done::after { background: #fff7d1; }
.gd-pop .gh-mile-head b { color: var(--ord-ink); font: 800 15px var(--display); }
.gd-pop .gh-miles li.is-done b { color: var(--ord-line); }
.gd-pop .gh-mile-head small { color: var(--ord-dim); }
.gd-pop .gh-bar { height: 10px; padding: 0; border-radius: 0; box-shadow: none; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .4) 0 6px, transparent 6px 8px); }
.gd-pop .gh-bar span { border-radius: 0; background: repeating-linear-gradient(90deg, var(--ord-line) 0 6px, color-mix(in srgb, var(--ord-line) 60%, #0c0703) 6px 8px); }

/* ---- Vitrinen-Schublade: Holzfach statt Goldkasten ---- */
.gd-pop .gd-drawer-grid {
  padding: 18px; clip-path: none; border: 6px solid #4a2f17; border-radius: 0;
  background: linear-gradient(rgba(10, 5, 2, .72), rgba(10, 5, 2, .84)), url("/img/grading/wood.webp") center / 420px auto;
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, .75), inset 0 0 0 2px #0c0703, 0 4px 0 #2a1a0d;
}
.gd-pop .gd-drawer-item:has(input:checked)::after { border-radius: 0; background: var(--ord-line); color: #1a1200; box-shadow: 0 0 0 2px #0c0703; }
.gd-pop .gd-drawer-item:has(input:focus-visible) { outline-color: var(--ord-line); border-radius: 0; }

/* ---- Bügeln: Karten liegen leicht schief auf dem Brett, Name auf Klebeband ---- */
.gd-pop .gd-iron-grid { gap: 18px 12px; padding: 4px 0; }
.gd-pop .gd-iron-item { padding: 0; background: none; box-shadow: none; clip-path: none; }
.gd-pop .gd-iron-item:nth-child(odd) img { transform: rotate(-2.5deg); }
.gd-pop .gd-iron-item:nth-child(even) img { transform: rotate(2deg); }
.gd-pop .gd-iron-item img { border-radius: 0; box-shadow: 0 0 0 2px var(--rar, #0c0703), 4px 7px 0 rgba(0, 0, 0, .5); }
.gd-pop .gd-iron-item button { color: var(--ord-paper-ink); font: 800 12px var(--display); }
.gd-pop .gd-iron-item button span { margin-top: -14px; padding: 2px 8px; background: rgba(245, 232, 190, .9); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); z-index: 1; }
.gd-pop .gd-iron-item button:hover img, .gd-pop .gd-iron-item button:focus-visible img { transform: translateY(-5px) rotate(0); }

/* Kassenzettel bleiben Thermopapier */
.gd-pop .gd-bons { gap: 14px; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .55)); }
.gd-pop .gd-bon { box-shadow: none; }

/* Eingabefelder und Buttons: gemeinsame Pixel-Optik */
.gd-pop :is(input[type="text"], input[type="number"], select) { border: 0; border-radius: 0; background: #0c0703; color: var(--ord-ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ord-line) 55%, #0c0703); font-variant-numeric: tabular-nums; }
.gd-pop input:focus-visible { outline: 2px solid var(--ord-line); outline-offset: 2px; }
.gd-pop .field > span { color: var(--ord-dim); }
.gd-pop .btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 2px; color: #3b2503; font: 800 14px/1 var(--display); letter-spacing: .02em; text-decoration: none;
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-radius: 0; box-shadow: none;
  border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; cursor: var(--cur-pointer, pointer); filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.gd-pop .btn-sm { min-height: 38px; font-size: 13px; }
.gd-pop .btn-block { display: flex; width: 100%; }
.gd-pop .btn:hover:not(:disabled) { background: none; color: #3b2503; filter: brightness(1.1) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.gd-pop .btn:active:not(:disabled) { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.gd-pop .btn:disabled { filter: grayscale(1) brightness(.7) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); cursor: default; }
.gd-pop .btn:focus-visible { outline: 2px solid var(--ord-line); outline-offset: 2px; }
.gd-pop .btn-ghost { opacity: .8; }
@media (prefers-reduced-motion: reduce) { .gd-pop .btn:active:not(:disabled) { transform: none; } .gd-pop .gr-tree li.is-next .gr-tree-dot { animation: none; } }
/* Preisliste: Vorschau-Schild schräg mit Öse und „Vorschau“-Stempel, Button schmal und mittig */
.gd-pop .gd-prices .gh-preview { margin: 22px 6px 6px; transform: rotate(-1.5deg); padding-top: 22px; }
.gd-pop .gd-prices .gh-preview::before { width: 14px; height: 14px; margin-top: -7px; background: radial-gradient(circle, #1a1008 0 3px, #d9b25a 4px 7px); box-shadow: none; clip-path: none; }
.gd-pop .gd-prices .gh-preview::after {
  content: "Vorschau"; position: absolute; top: 5px; right: 12px; padding: 1px 6px; border: 2px solid #c8302f; color: #c8302f;
  font: 900 10px/1.3 var(--display); letter-spacing: .16em; text-transform: uppercase; transform: rotate(3deg); pointer-events: none;
}
.gd-pop .gd-prices > .btn-block { width: auto; min-width: 190px; align-self: center; margin-top: 18px; }
/* Bewertungen als Handy-Display: schwarzer Rahmen mit Lautsprecher-Schlitz und Home-Leiste */
.gd-pop .gd-phone-screen {
  position: relative; min-height: 400px; padding: 30px 16px 34px; border: 6px solid #0c0703; clip-path: var(--ord-notch);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 40%), color-mix(in srgb, var(--ord-slot) 55%, #05030a);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ord-line) 22%, #0c0703), inset 0 10px 24px rgba(0, 0, 0, .5);
}
.gd-pop .gd-phone-screen::before { content: ""; position: absolute; top: 10px; left: 50%; width: 46px; height: 6px; margin-left: -23px; background: #0c0703; box-shadow: 0 0 0 2px rgba(255, 255, 255, .08); }
.gd-pop .gd-phone-screen::after { content: ""; position: absolute; bottom: 12px; left: 50%; width: 60px; height: 4px; margin-left: -30px; background: color-mix(in srgb, var(--ord-ink) 45%, transparent); }
.gd-pop .gd-phone-screen .gd-gr-score b { font-size: 60px; }
.gd-pop .gd-phone-screen .gd-gr-bar { background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .1) 0 6px, transparent 6px 8px); }
.gd-pop .gd-gr .gd-empty { gap: 10px; padding: 40px 0 10px; font: 800 17px var(--display); }
.gd-pop .gd-gr .gd-empty > span { font-size: 54px; line-height: 1; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .5)); }
.gd-pop .gd-gr .gd-empty small { font: 500 13px var(--font); color: var(--ord-dim); }
.gd-pop .gd-review-facts dd { font-size: 34px; }
/* Bewertungen lesbar: Handy-Display neutral dunkel ohne Goldkante, Bewertungen als Zeilen mit Avatar links statt Karten */
.gd-pop .gd-phone-screen { padding: 34px 18px 38px; border-width: 8px; background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 30%), #14111f; box-shadow: inset 0 8px 20px rgba(0, 0, 0, .45); }
.gd-pop .gd-phone-screen::before { background: #05030a; box-shadow: none; }
.gd-pop .gd-gr-list { gap: 0; filter: none; }
.gd-pop .gd-gr-item {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 5px; margin: 0; padding: 14px 0; clip-path: none; background: none; box-shadow: none;
  border-bottom: 3px dotted var(--ord-dots); color: #f3ecd9;
}
.gd-pop .gd-gr-item:last-child { border-bottom: 0; }
.gd-pop .gd-gr-who { display: contents; padding: 0; }
.gd-pop .gd-gr-who .avatar { position: static; grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; clip-path: var(--ord-notch); box-shadow: none; background: #0c0703; }
.gd-pop .gd-gr-who > span { grid-column: 2; flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0 10px; }
.gd-pop .gd-gr-who b { color: #fff; font: 800 16px var(--display); }
.gd-pop .gd-gr-who small { color: #b9b0c9; font-size: 13px; }
.gd-pop .gd-gr-stars, .gd-pop .gd-gr-tags, .gd-pop .gd-gr-card { grid-column: 2; }
.gd-pop .gd-gr-stars .gd-stars { font-size: 18px; letter-spacing: 2px; }
.gd-pop .gd-gr-tags { gap: 6px; }
.gd-pop .gd-gr-tags span { padding: 3px 9px; font-size: 13px; font-weight: 700; box-shadow: none; }
.gd-pop .gd-gr-tags .is-good { background: #1d6b3a; color: #e4fbe9; }
.gd-pop .gd-gr-tags .is-bad { background: #8f2626; color: #ffe6e6; }
.gd-pop .gd-gr-card { gap: 8px; margin-top: 2px; color: #d6cfe3; font-size: 13px; }
.gd-pop .gd-gr-card img { width: 30px; }
.gd-pop .gd-gr-card b { color: var(--ord-line); font: 800 14px var(--display); }
.gd-pop .gd-gr-head { margin-bottom: 4px; padding-bottom: 14px; border-bottom: 3px dotted var(--ord-dots); }
.gd-pop .gd-gr-hist li { color: #d6cfe3; font-size: 13px; }
/* Kinder des Fensterkörpers dürfen beim Scrollen nicht schrumpfen (sonst läuft der Inhalt aus dem Handy-Display) */
.gd-pop .gd-sheet-body > * { flex-shrink: 0; }
.gd-pop .gd-phone-screen { background: linear-gradient(180deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .03) 45%), var(--ord-slot); }
/* Bewertungen: Name und Avatar führen zum Profil des Spielers */
.gd-gr-who .gd-gr-name { color: inherit; text-decoration: none; }
.gd-gr-who .gd-gr-name:hover b, .gd-gr-who .gd-gr-name:focus-visible b { text-decoration: underline; text-underline-offset: 3px; }
.gd-gr-who .gd-gr-avatar { display: contents; }
.gd-pop .gd-sheet-body a.gd-gr-name { color: inherit; font-weight: inherit; }
.gd-pop .gd-gr-who .gd-gr-name:hover b { color: var(--ord-line); }
/* Werkstatt: zwei Spalten statt langer Liste – links Shop und Ausbau, rechts Werkzeuge; keine schwarzen Ösen mehr an den Anhängern */
.gd-wk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; align-items: start; }
.gd-wk-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gd-wk-col > * { margin: 0; }
.gd-wk-col > .gd-sheet-sub:first-child { margin-top: 0; }
.gd-wk .gh-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gd-pop .gh-tool::before { content: none; }
.gd-pop .gh-tool { padding-top: 14px; }
@media (max-width: 760px) { .gd-wk { grid-template-columns: minmax(0, 1fr); } .gd-wk .gh-tools { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }
/* Werkstatt: großes, starres Fenster mit drei Spalten (Shop · Ausbau · Werkzeuge) – scrollt nur noch auf kleinen Bildschirmen */
.gd-sheet.gd-pop.gd-pop-xl { width: min(1180px, calc(100vw - 16px)); max-height: min(94dvh, 900px); }
.gd-pop-xl .gd-wk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 26px; }
.gd-pop-xl .gd-wk .gh-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 10px 12px; gap: 10px; }
.gd-pop-xl .gr-tree-body { padding-bottom: 12px; }
@media (max-width: 1000px) { .gd-pop-xl .gd-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gd-pop-xl .gd-wk { grid-template-columns: minmax(0, 1fr); } .gd-pop-xl .gd-wk .gh-tools { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } }
/* Werkstatt: Spalten gleich hoch, Lochwand und Leiter füllen ihre Spalte (kein toter Platz unten) */
.gd-pop-xl .gd-wk { align-items: stretch; }
/* Material: Lager an leeren Slabs mit Kauf (Werkstatt) */
.gd-stock-card { display: flex; align-items: center; gap: 12px; }
.gd-stock-img { flex: none; width: 56px; height: auto; aspect-ratio: 720 / 1008; border-radius: 6px; box-shadow: 0 0 0 2px var(--ord-line, #d9a441), 3px 5px 8px rgba(0, 0, 0, .5); }
.gd-stock-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-stock-text small { color: var(--ord-dim, inherit); line-height: 1.35; }
.gd-stock-buy { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gd-stock-buy .btn { flex: 1 1 130px; }
.gd-stock-note { color: var(--ord-dim, inherit); line-height: 1.4; }
.gd-qty { display: inline-flex; align-items: stretch; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 2px var(--ord-line, #d9a441); }
.gd-qty button { width: 34px; border: 0; background: rgba(0, 0, 0, .25); color: inherit; font: 800 18px/1 var(--font); cursor: var(--cur-pointer, pointer); }
.gd-qty button:hover { background: rgba(255, 255, 255, .12); }
.gd-qty input { width: 48px; border: 0; border-radius: 0; background: rgba(0, 0, 0, .18); color: inherit; text-align: center; font: 700 15px var(--font); -moz-appearance: textfield; }
.gd-qty input::-webkit-outer-spin-button, .gd-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gd-pop-xl .gd-wk-col .gh-tools { flex: 1 1 auto; align-content: start; }
.gd-pop-xl .gd-wk-col .gr-tree { flex: 1 1 auto; justify-content: space-between; }
.gd-pop-xl .gd-wk-col .gr-tree li:last-child .gr-tree-body { padding-bottom: 0; }
@media (max-width: 760px) { .gd-pop-xl .gd-wk-col .gr-tree { justify-content: flex-start; } }

/* Werkstatt: jeder Bereich ein eigener Gegenstand – Shop = Papierzettel mit Klebeband, Ausbau = Bauplan (Blaupause), Werkzeuge = Lochwand, Ruf = Fahnenmast */
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) {
  --ord-ink: #2a1d0a; --ord-dim: #7a6540; --ord-line: #8a5a10; --ord-dots: rgba(90, 60, 20, .45); position: relative; padding: 26px 20px 30px; color: #2a1d0a;
  background: repeating-linear-gradient(0deg, transparent 0 23px, rgba(90, 60, 20, .07) 23px 24px), var(--ord-paper, #f1e4bf);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
}
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1)::before { content: ""; position: absolute; top: 6px; left: 50%; width: 64px; height: 18px; margin-left: -32px; transform: rotate(-3deg); background: rgba(190, 150, 90, .55); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) .gd-sheet-sub { color: #6b3f08; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) :is(input[type="text"]) { background: rgba(90, 60, 20, .12); color: #1f2a4d; box-shadow: inset 0 -3px 0 rgba(90, 60, 20, .5); font: 800 18px var(--display); padding: 8px 10px; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) input[name="code"] { text-transform: uppercase; letter-spacing: .18em; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) input:focus-visible { box-shadow: inset 0 -3px 0 #1f7a3d; outline: 2px solid #8a5a10; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) .field > span { color: #7a6540; font: 700 12px var(--display); letter-spacing: .1em; text-transform: uppercase; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) .gr-facts dd { color: #1f4d2b; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) .gd-shopform .small { color: #7a6540; }

.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) {
  --ord-ink: #eaf3ff; --ord-dim: #9ec1ee; --ord-line: #8ec5ff; --ord-dots: rgba(142, 197, 255, .45); padding: 22px 20px 20px; color: #eaf3ff;
  background: linear-gradient(rgba(142, 197, 255, .13) 1px, transparent 1px) 0 0 / 100% 24px, linear-gradient(90deg, rgba(142, 197, 255, .13) 1px, transparent 1px) 0 0 / 24px 100%, linear-gradient(160deg, #24508a, #17345c 70%);
  clip-path: var(--ord-notch); box-shadow: inset 0 0 0 2px #0c1a2e, inset 0 0 0 4px rgba(142, 197, 255, .35);
}
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) .gr-tree-dot { background: #0b1d36; color: #9ec1ee; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) li.is-done .gr-tree-dot { background: #8ec5ff; color: #0b1d36; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) li.is-next .gr-tree-dot { background: #1f4f8c; color: #cfe7ff; box-shadow: 0 0 0 2px #8ec5ff; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) .gr-tree-name { font-size: 16px; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) .gr-tree-name span { color: #ffd98a; font: 800 14px var(--display); }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) .gr-tree-perk { color: #bcd6f5; font-size: 13px; }

.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(3) .gd-sheet-sub { margin-bottom: 0; }

/* Schnüre zur Stange */

/* Stoff: Falten und Glanz über der Farbe */

/* Bewertungen: Handy-Display hat feste Höhe, die Liste scrollt im Display – Rahmen und Home-Leiste bleiben sichtbar */
.gd-pop .gd-phone-screen { display: flex; flex-direction: column; height: min(56dvh, 560px); min-height: 280px; overflow: hidden; }
.gd-pop .gd-phone-screen > .gd-gr { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--ord-line) transparent; }
.gd-pop .gd-phone-screen > .gd-gr::-webkit-scrollbar { width: 8px; }
.gd-pop .gd-phone-screen > .gd-gr::-webkit-scrollbar-thumb { background: var(--ord-line); }
.gd-pop .gd-phone-screen > .gd-gr::-webkit-scrollbar-track { background: rgba(0, 0, 0, .3); }
.gd-pop .gd-phone-screen > .gd-gr > * { flex-shrink: 0; }
/* Bewertungen: Kennzahlen mit Namen und Erklärzeile */
.gd-pop .gd-review-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; justify-content: stretch; }
.gd-pop .gd-kpi { display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: help; }
.gd-pop .gd-kpi-label { color: var(--ord-ink); font: 800 13px var(--display); letter-spacing: .08em; text-transform: uppercase; }
.gd-pop .gd-kpi-num { color: var(--ord-line); font: 800 34px/1.1 var(--display); text-shadow: 0 3px 0 rgba(0, 0, 0, .5); }
.gd-pop .gd-kpi-hint { color: var(--ord-dim); font-size: 13px; line-height: 1.3; }
@media (max-width: 560px) { .gd-pop .gd-review-facts { gap: 8px 10px; } .gd-pop .gd-kpi-num { font-size: 26px; } .gd-pop .gd-kpi-label { font-size: 11px; } }
/* Bewertungen: Fenster starr, nur die Liste im Handy scrollt */
.gd-sheet.gd-pop[data-gd-sheet="bewertungen"] { height: min(88dvh, 780px); }
[data-gd-sheet="bewertungen"] .gd-sheet-body { overflow: hidden; }
[data-gd-sheet="bewertungen"] .gd-phone-screen { flex: 1 1 0; height: auto; min-height: 0; }
/* Bewertungen: Karte anklicken zeigt den fertigen Slab */
.gd-gr-card.is-slab { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: zoom-in; }
.gd-gr-card.is-slab:hover > span, .gd-gr-card.is-slab:focus-visible > span { text-decoration: underline; text-underline-offset: 3px; }
.gd-gr-card.is-slab img { transition: transform .12s; }
.gd-gr-card.is-slab:hover img, .gd-gr-card.is-slab:focus-visible img { transform: translateY(-3px) rotate(-3deg); }
.gd-gr-card.is-slab:focus-visible { outline: 2px solid var(--ord-line, #fde68a); outline-offset: 3px; }
/* Werkstatt kompakt: soll ohne inneres Scrollen passen. Fahnen und Abstände kleiner, auf niedrigen Bildschirmen skaliert das ganze Fenster */
.gd-sheet.gd-pop.gd-pop-xl { max-height: 97dvh; }
.gd-pop-xl .gd-sheet-body { padding-block: 8px 10px; }
.gd-pop-xl .gd-wk { gap: 10px 26px; }

.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(1) { padding-block: 22px 26px; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) { padding-block: 16px; }
.gd-pop-xl .gr-tree-body { padding-bottom: 8px; }
@media (max-height: 660px) { .gd-sheet.gd-pop.gd-pop-xl { zoom: .88; max-height: calc(97dvh / .88); } }
@media (max-height: 570px) { .gd-sheet.gd-pop.gd-pop-xl { zoom: .76; max-height: calc(97dvh / .76); } }
@media (max-width: 760px) { .gd-sheet.gd-pop.gd-pop-xl { zoom: 1; max-height: 90dvh; } }
/* Werkstatt, Höhe: Ruf-Hinweis in die Titelzeile, Werkzeug-Anhänger flacher – das Fenster passt auf normale Bildschirme */

.gd-pop-xl .gd-wk .gh-tools { gap: 8px; padding: 12px 8px 10px; }
.gd-pop-xl .gh-tool { gap: 3px; padding: 10px 6px 8px; }
.gd-pop-xl .gh-tool-icon { width: 30px; height: 30px; }
.gd-pop-xl .gh-tool-icon img { width: 30px; height: 30px; }
.gd-pop-xl .gh-tool-text b { font-size: 13px; }
.gd-pop-xl .gh-tool-text small { font-size: 11.5px; line-height: 1.3; }
.gd-pop-xl .gh-tool .btn-sm { min-height: 32px; font-size: 12px; }
.gd-pop-xl .gr-tree-perk { line-height: 1.35; }


/* Werkstatt in vier Spalten (Shop · Ausbau · Werkzeuge · Ruf): niedrig genug für normale Bildschirme, Ruf als Fahnenmast mit vier Fahnen */
.gd-sheet.gd-pop.gd-pop-xl { width: min(1340px, calc(100vw - 16px)); }
.gd-pop-xl .gd-wk { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 20px; align-items: stretch; }
@media (max-width: 1180px) { .gd-pop-xl .gd-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gd-pop-xl .gd-wk { grid-template-columns: minmax(0, 1fr); } }
.gd-pop-xl .gd-wk-col.gd-rep { --ord-ink: #f6e6bd; --ord-dim: #c9ad7a; --ord-line: #f2c14e; --ord-dots: rgba(242, 193, 78, .4); padding: 0; }
.gd-rep-next { margin: 8px 0 0; font-size: 14px; color: var(--ord-ink); text-align: center; }
.gd-rep-next b { color: var(--ord-line); font-family: var(--display); }
.gd-pop-xl .gd-rep { cursor: help; }
/* Spaltenbreiten: Ausbau braucht Platz für seine Texte, Shop und Ruf kommen mit weniger aus */
.gd-pop-xl .gd-wk { grid-template-columns: minmax(0, .82fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); }
@media (max-width: 1180px) { .gd-pop-xl .gd-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .gd-pop-xl .gd-wk { grid-template-columns: minmax(0, 1fr); } }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) { padding-inline: 16px; }
.gd-pop-xl .gr-tree-perk { font-size: 12.5px; }
.gd-pop-xl .gd-wk > .gd-wk-col:nth-child(2) .gr-tree-perk { font-size: 12.5px; }
.gd-pop-xl .gr-tree li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
/* Popups wachsen mit ihrem Inhalt: ein modaler Dialog mit height:auto streckt sich sonst auf die ganze Bildschirmhöhe (Browser-Vorgabe ist fit-content) */
.gd-sheet.gd-pop:not([data-gd-sheet="bewertungen"]) { height: fit-content; }

/* Werkstatt, weniger Text: Beschreibungen stehen als Hinweis (Mauszeiger) und im ?-Menü. Fahnen mit einfachen Silhouetten und gut lesbarer Schrift, Werkzeuge füllen ihre Spalte */
.gd-pop-xl .gr-tree-perk, .gd-pop-xl .gh-tool-text small { display: none; }
.gd-pop-xl .gr-tree li { cursor: help; }
.gd-pop-xl .gr-tree { justify-content: space-around; }
.gd-pop-xl .gr-tree-body { padding-bottom: 4px; }
.gd-pop-xl .gr-tree-name { align-items: center; font-size: 17px; }
.gd-pop-xl .gr-tree-name span { font-size: 15px; }
.gd-pop-xl .gr-tree-dot { width: 32px; height: 32px; font-size: 16px; }
.gd-pop-xl .gr-tree li { grid-template-columns: 32px minmax(0, 1fr); align-items: center; }
.gd-pop-xl .gr-tree li::before { left: 15px; top: 38px; }
/* Werkzeuge: Raster füllt die Spalte, große Symbole, nur Name und Preis */
.gd-pop-xl .gd-wk .gh-tools { flex: 1 1 auto; grid-auto-rows: 1fr; align-content: stretch; gap: 10px; }
.gd-pop-xl .gh-tool { justify-content: center; gap: 8px; padding: 12px 6px 10px; cursor: help; }
.gd-pop-xl .gh-tool-icon { width: 52px; height: 52px; }
.gd-pop-xl .gh-tool-icon img { width: 48px; height: 48px; }
.gd-pop-xl .gh-tool-text b { font-size: 15px; line-height: 1.15; }
.gd-pop-xl .gh-tool .btn-sm { min-height: 36px; font-size: 14px; }
/* Fahnen */
.gd-rep-next { margin-top: 10px; font-size: 15px; }
/* Werkstatt: Feinschliff – Leiter mit durchgehender Linie, Werkzeugnamen umbrechen, Fakten bleiben einzeilig */
.gd-pop-xl .gr-tree { justify-content: flex-start; }
.gd-pop-xl .gr-tree li { flex: 1 1 0; align-items: start; }
.gd-pop-xl .gr-tree li::before { top: 36px; bottom: 2px; }
.gd-pop-xl .gr-tree li.is-done::before { background: #8ec5ff; }
.gd-pop-xl .gr-tree-name { padding-top: 3px; }
.gd-pop-xl .gh-tool-text { max-width: 100%; }
.gd-pop-xl .gh-tool-text b { overflow-wrap: anywhere; text-wrap: balance; font-size: 14px; }
.gd-pop-xl .gr-facts dd { white-space: nowrap; font-size: 13px; }
.gd-pop-xl .gr-facts dt { font-size: 13px; }
.gd-pop-xl .gh-tool-text b { overflow-wrap: normal; hyphens: auto; font-size: 13.5px; }

/* Erfolge als Trophäenregal: Medaillen auf einem Holzbrett, erreichte golden und glänzend, offene dunkel mit Pixelbalken */
.gd-trophy { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 0; margin: 0; padding: 6px 0 0; list-style: none; }
.gd-tr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 8px 28px; text-align: center; cursor: help; }
.gd-tr::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-top: 3px solid #b98a4a; z-index: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 10px, transparent 10px 26px), linear-gradient(#7a4a24, #4a2c14); box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}
.gd-tr > * { position: relative; z-index: 1; }
.gd-tr-ribbon { width: 26px; height: 18px; margin-bottom: -10px; background: #3a3752; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%); }
.gd-tr-medal {
  display: grid; place-items: center; width: 68px; height: 68px; background: #0c0703; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  box-shadow: inset 0 0 0 4px #1b1710;
}
.gd-tr-medal .gd-img { width: 40px; filter: grayscale(1) brightness(.5); opacity: .65; }
.gd-tr-name { margin-top: 4px; color: var(--ord-dim); font: 800 14px/1.2 var(--display); }
.gd-tr-bar { display: block; width: 84%; height: 10px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .45) 0 6px, transparent 6px 8px); box-shadow: inset 0 0 0 2px #0c0703; }
.gd-tr-bar > span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--ord-line) 0 6px, color-mix(in srgb, var(--ord-line) 60%, #0c0703) 6px 8px); }
.gd-tr-count { color: var(--ord-ink); font: 700 13px var(--display); font-variant-numeric: tabular-nums; }
.gd-tr-state { color: var(--ord-dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.gd-tr-state.is-open { opacity: .7; }
.gd-tr.is-done .gd-tr-ribbon { background: linear-gradient(90deg, #e5484d 0 50%, #3b82f6 50% 100%); }
.gd-tr.is-done .gd-tr-medal { background: linear-gradient(135deg, #fff0b0, #f2c14e 45%, #b8862a); box-shadow: inset 0 0 0 4px #8a5a10, inset 0 0 0 6px #fde68a; filter: drop-shadow(0 0 8px rgba(242, 193, 78, .65)); }
.gd-tr.is-done .gd-tr-medal .gd-img { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .35)); opacity: 1; }
.gd-tr.is-done .gd-tr-name { color: var(--ord-ink); }
.gd-tr.is-done .gd-tr-state { color: #86efac; font-weight: 800; }
.gd-tr:hover .gd-tr-medal { transform: translateY(-3px); transition: transform .12s; }
@media (prefers-reduced-motion: reduce) { .gd-tr:hover .gd-tr-medal { transform: none; transition: none; } }
.gd-trophy { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gd-tr.is-empty { min-height: 128px; cursor: default; }
@media (max-width: 560px) { .gd-trophy { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Erfolge: oberstes Brett – die Bänder der ersten Reihe hängen daran */
.gd-trophy { position: relative; padding-top: 30px; }
.gd-trophy::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; border-top: 3px solid #b98a4a;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .12) 0 10px, transparent 10px 26px), linear-gradient(#7a4a24, #4a2c14); box-shadow: 0 4px 0 rgba(0, 0, 0, .5);
}
.gd-pop .gd-tr-all { align-self: center; padding: 0 6px; }
/* Erfolge: Balken mit hellerer Spur, damit man das Ende erkennt */
.gd-tr-bar { height: 12px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 6px, rgba(255, 255, 255, .08) 6px 8px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ord-line) 55%, #0c0703); }
.gd-tr-bar > span { background: repeating-linear-gradient(90deg, #ffd45a 0 6px, #e0a82e 6px 8px); }
/* Erfolge: Balken aus zehn Feldern mit festem Abstand – bleibt auf jedem Monitor scharf, die Lücken verschwimmen nicht */
.gd-tr-bar { display: flex; gap: 3px; width: 92%; height: auto; padding: 3px; background: #0c0703; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ord-line) 60%, #0c0703); }
.gd-tr-bar > i { flex: 1 1 0; height: 8px; background: #3b3752; }
.gd-tr-bar > i.on { background: #ffd45a; box-shadow: inset 0 -2px 0 #c8900a; }

/* ===== Kassenzettel: Bons auf dem Spieß, Tagessumme als Kassendisplay ===== */
.gd-pop { --paper: #fbf8ef; --paper-ink: #2a2622; }
.gd-pop .gd-sum-line {
  align-items: center; padding: 10px 16px; border: 0; background: #07140c; color: #4ade80; clip-path: var(--ord-notch);
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px #1d3b28, inset 0 6px 14px rgba(0, 0, 0, .6);
  font: 700 12px var(--display); letter-spacing: .16em; text-transform: uppercase;
}
.gd-pop .gd-sum-line b { color: #6dfc9c; font: 700 28px/1 ui-monospace, Consolas, monospace; letter-spacing: .04em; text-shadow: 0 0 10px rgba(74, 222, 128, .6); }
.gd-pop .gd-bons { position: relative; gap: 12px; padding: 14px 0 6px; filter: none; }
.gd-pop .gd-bons::before { content: ""; position: absolute; z-index: 0; left: 31px; top: 4px; bottom: 0; width: 6px; background: linear-gradient(90deg, #6f7a87, #d5dde6 45%, #4d5762); box-shadow: 0 0 0 2px #14181d; }
.gd-pop .gd-bons::after { content: ""; position: absolute; z-index: 0; left: 28px; top: -6px; width: 12px; height: 10px; background: #d5dde6; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gd-pop .gd-bon { position: relative; z-index: 1; gap: 0; padding: 0; filter: drop-shadow(3px 3px 0 rgba(0, 0, 0, .5)); box-shadow: none; transition: transform .12s; }
.gd-pop .gd-bon:nth-child(odd) { transform: rotate(-.5deg); }
.gd-pop .gd-bon:nth-child(even) { transform: rotate(.5deg); }
.gd-pop .gd-bon::before { content: ""; position: absolute; z-index: 2; left: 29px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: #1a1008; box-shadow: inset 0 0 0 2px #8a8f99; }
.gd-bon details { display: flex; flex-direction: column; }
.gd-bon summary { list-style: none; cursor: var(--cur-pointer, pointer); }
.gd-bon summary::-webkit-details-marker { display: none; }
.gd-pop .gd-bon-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px 12px 52px; }
.gd-bon-who { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.gd-bon-who b { font-size: 14px; }
.gd-bon-sum { font: 800 17px ui-monospace, Consolas, monospace; white-space: nowrap; }
.gd-bon-sum::after { content: "▾"; margin-left: 8px; color: #8b8274; font-size: 12px; display: inline-block; transition: transform .12s; transform: rotate(-90deg); }
.gd-bon details[open] .gd-bon-sum::after { transform: none; }
.gd-bon .gd-bon-lines { margin: 0 16px; padding: 8px 0 4px 36px; }
.gd-bon .gd-bon-note { margin: 0 16px; padding: 4px 0 14px 36px; }
.gd-bon details:not([open]) { padding-bottom: 6px; }
.gd-bon.is-void .gd-bon-sum { text-decoration: line-through; }
.gd-pop .gd-bon-head img { box-shadow: 0 0 0 1px var(--rar, #aaa); }
@media (prefers-reduced-motion: reduce) { .gd-pop .gd-bon, .gd-bon-sum::after { transition: none; } }

/* ===== Vitrine: Schublade mit Filzfächern ===== */
.gd-pop .gd-drawer-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; padding: 14px; }
.gd-pop .gd-drawer-item {
  padding: 10px 8px; clip-path: var(--ord-notch);
  background: radial-gradient(120% 90% at 50% 0%, #8a2638, #4a0f1a 70%); box-shadow: inset 0 0 0 2px #1a0509, inset 0 6px 12px rgba(0, 0, 0, .55);
}
.gd-pop .gd-drawer-item:has(input:checked) { background: radial-gradient(120% 90% at 50% 0%, #a8344a, #5e1424 70%); box-shadow: inset 0 0 0 2px #1a0509, inset 0 0 16px rgba(255, 214, 120, .35); }
.gd-pop .gd-drawer-item:has(input:checked)::after { top: 2px; right: 2px; }
.gd-pop .gd-sheet-actions { gap: 12px; }

/* ===== Bügeln: Karten liegen auf dem Bügelbrett ===== */
.gd-pop .gd-iron-grid {
  padding: 22px 76px 26px 24px; gap: 20px 12px;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 2px, transparent 2px 7px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 2px, transparent 2px 9px), linear-gradient(#d3deee, #b3c3dc);
  clip-path: polygon(0 0, calc(100% - 64px) 0, 100% 50%, calc(100% - 64px) 100%, 0 100%); filter: none;
}
/* Bons: gezackte Abrisskante nur unten, unten genug Rand, damit ausgeklappte Posten nicht abgeschnitten werden */
.gd-pop .gd-bon {
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z) + 1px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--z) + 1px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--z)) var(--z) repeat-x;
  padding-bottom: 8px;
}
.gd-pop .gd-bon-head { padding-top: 12px; }
.gd-bon details[open] { padding-bottom: 12px; }
.gd-bon .gd-bon-note { padding-bottom: 6px; }
/* Bons: erbrachte Leistungen als kleine Marken unter dem Titel */
.gd-bon-svc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.gd-bon-svc i { padding: 2px 6px; background: #2a1d0a; color: #fdf3d6; font: 700 10px/1.3 var(--font); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.gd-bon-svc i.is-express { background: #f59e0b; color: #1a1200; }
.gd-bon.is-void .gd-bon-svc { opacity: .5; }
.gd-bon details[open] { cursor: var(--cur-pointer, pointer); }

/* ===== Schreibtisch: Anordnung mit visueller Hierarchie =====
   Ablauf in der Mitte groß (Eingang → Werkbank → Bons), darunter zwei Objekte je Spalte nach Wichtigkeit gestaffelt:
   t2 mittel (Bewertungen, Werkstatt – laufende Pflege), t3 klein (Preise, Erfolge, Bügeln, Einreichen). Keine Kästen mehr. */
.gd-cell { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px 14px; min-width: 0; }
.gd-cell-l { grid-area: cl; }
.gd-cell-c { grid-area: cc; gap: 8px 40px; }
.gd-cell-r { grid-area: cr; }
.gd-tray .gd-slot, .gd-spike .gd-slot { width: 132px; height: 132px; }
.gd-tray .gd-slot > .gd-px:first-child, .gd-spike .gd-slot > .gd-px:first-child { width: 100px; }
.gd-obj.is-t2 { min-width: 0; }
.gd-obj.is-t2 .gd-slot { width: 100px; height: 100px; }
.gd-obj.is-t2 .gd-slot > .gd-px:first-child { width: 76px; }
.gd-obj.is-t3 { min-width: 0; gap: 8px; }
.gd-obj.is-t3 .gd-slot { width: 80px; height: 80px; }
.gd-obj.is-t3 .gd-slot > .gd-px:first-child { width: 60px; }
.gd-obj.is-t3 .gd-tag { padding: 3px 8px; }
.gd-obj.is-t3 .gd-tag b { font-size: 11px; }
.gd-obj.is-t3 .gd-tag small { font-size: 10.5px; }
.gd-obj.is-t3 .gd-badge { transform: scale(.85); }
/* Namensschild: „?“ und Ressourcen berühren sich nicht mehr */
.gd-plate .gd-zone-res { padding-right: 46px; }
@media (max-width: 760px) { .gd-plate .gd-zone-res { padding-right: 4px; } .gd-cell-c { gap: 8px 24px; } }
.gd-cell { justify-content: space-evenly; flex-wrap: nowrap; }
.gd-cell-c { justify-content: center; }
.gd-obj.is-t3 .gd-tag { max-width: 98px; text-align: center; }
.gd-obj.is-t3 .gd-tag small { display: block; line-height: 1.2; white-space: normal; }
@media (max-width: 760px) { .gd-cell { flex-wrap: wrap; } }
/* Zellen unter dem Ablauf: jede Spalte hat ihr mittleres Objekt links und ihr kleines rechts */
.gd-cell { align-items: flex-end; }
.gd-cell-c { justify-content: center; gap: 8px 36px; }

/* ===== Hierarchie, zweiter Anlauf: Hauptablauf dominiert, alle Objekte darunter sind gleich klein und ruhiger ===== */
.gd-cell, .gd-cell-c { align-items: flex-start; gap: 8px 22px; justify-content: center; }
.gd-obj.is-t2, .gd-obj.is-t3 { gap: 6px; padding: 4px; min-width: 0; filter: saturate(.8); opacity: .92; transition: opacity .15s, filter .15s; }
.gd-obj.is-t2:hover, .gd-obj.is-t3:hover, .gd-obj.is-t2:focus-visible, .gd-obj.is-t3:focus-visible { opacity: 1; filter: none; }
.gd-obj.is-t2 .gd-slot, .gd-obj.is-t3 .gd-slot {
  width: 68px; height: 68px;
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 3px rgba(201, 157, 76, .5), inset 0 3px 10px rgba(0, 0, 0, .7);
}
.gd-obj.is-t2 .gd-slot > .gd-px:first-child, .gd-obj.is-t3 .gd-slot > .gd-px:first-child { width: 48px; }
.gd-obj.is-t2 .gd-tag, .gd-obj.is-t3 .gd-tag { padding: 2px 7px; max-width: 104px; text-align: center; background: rgba(251, 248, 239, .82); }
.gd-obj.is-t2 .gd-tag b, .gd-obj.is-t3 .gd-tag b { font-size: 10.5px; }
.gd-obj.is-t2 .gd-tag small, .gd-obj.is-t3 .gd-tag small { display: block; font-size: 10px; line-height: 1.2; white-space: normal; }
.gd-obj.is-t2 .gd-badge, .gd-obj.is-t3 .gd-badge { transform: scale(.8); transform-origin: top right; }
/* Hauptablauf: größer und mit warmem Schein */
.gd-tray .gd-slot, .gd-spike .gd-slot { width: 140px; height: 140px; }
.gd-tray .gd-slot > .gd-px:first-child, .gd-spike .gd-slot > .gd-px:first-child { width: 108px; }
.gd-tray .gd-art, .gd-spike .gd-art { filter: var(--obj-shadow) drop-shadow(0 0 18px rgba(253, 224, 140, .22)); }
.gd-tray .gd-tag b, .gd-spike .gd-tag b { font-size: 15px; }
/* Zweite Reihe wieder etwas größer; Beschriftungen nur noch die Überschrift */
.gd-obj.is-t2 .gd-slot, .gd-obj.is-t3 .gd-slot { width: 86px; height: 86px; }
.gd-obj.is-t2 .gd-slot > .gd-px:first-child, .gd-obj.is-t3 .gd-slot > .gd-px:first-child { width: 62px; }
.gd-obj.is-t2 .gd-tag b, .gd-obj.is-t3 .gd-tag b { font-size: 11.5px; }
.gd-obj.is-t2 .gd-badge, .gd-obj.is-t3 .gd-badge { transform: scale(.88); }
.gd-tag small { display: none; }
/* Beschriftungen: Box wächst mit dem Text, keine feste Breite mehr */
.gd-obj .gd-tag, .gd-obj.is-t2 .gd-tag, .gd-obj.is-t3 .gd-tag { width: max-content; max-width: none; padding: 4px 10px 3px; white-space: nowrap; }
.gd-obj.is-t2 .gd-tag b, .gd-obj.is-t3 .gd-tag b { white-space: nowrap; }

/* Zusatzinfos der Tisch-Objekte erscheinen beim Darüberfahren bzw. Fokussieren als kleine Sprechblase über dem Symbol */
.gd-obj[data-tip]::after {
  content: attr(data-tip); position: absolute; z-index: 5; left: 50%; bottom: calc(100% - 2px); transform: translate(-50%, 6px); padding: 5px 10px; width: max-content; max-width: 220px;
  background: #fbf8ef; color: #2a1d0a; font: 700 12px/1.3 var(--font); text-align: center; white-space: normal; box-shadow: 0 3px 0 rgba(0, 0, 0, .4), 0 0 0 2px #2a1a08;
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s;
}
.gd-obj[data-tip]:hover::after, .gd-obj[data-tip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .gd-obj[data-tip]::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .gd-obj[data-tip]::after { transition: none; } }

/* Namensschild: alles auf einer Linie – Beschriftungen gleich breit (Stufenkästchen und Ruf-Balken beginnen am selben Punkt), Zeilen brechen nicht um, Schriftzug optisch zentriert */
.gd-zone-progress .gd-row { flex-wrap: nowrap; }
.gd-zone-progress .gd-row > .gd-label { flex: none; min-width: 64px; }
.gd-zone-progress .gd-row .gd-meter { flex: 1 1 120px; min-width: 80px; }
.gd-plate .gd-name { position: relative; top: -4px; }
.gd-zone-progress .gd-row .gd-meter { margin-left: 2px; }

/* ---------- Karte graden lassen: Annahmeschalter (#204) – Nussbaum-Platte wie der Shop-Schreibtisch, Schritte links, Auftragszettel rechts ---------- */
.ge-desk {
  --paper: #fbf8ef; --paper-ink: #2a2622; --ge-ink: #f0d9a0; --ge-dim: #c9b078; --ge-line: #7a5416; --ge-gold: #fde68a;
  display: flex; flex-direction: column; gap: 22px; padding: 26px 28px 30px; border-radius: 24px; isolation: isolate; color: var(--ge-ink);
  background:
    radial-gradient(70% 70% at 15% 6%, rgba(255, 220, 160, .28), rgba(255, 214, 150, 0) 60%),
    radial-gradient(140% 120% at 50% 40%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .5) 100%),
    linear-gradient(rgba(58, 30, 12, .58), rgba(30, 14, 4, .72)),
    url("/img/grading/wood.webp") center / 640px auto repeat;
  box-shadow: inset 0 0 0 3px #1a0d03, inset 0 0 0 6px #d9a441, inset 0 0 0 7px #7a5416, inset 0 0 0 8px #1a0d03, 0 2px 0 #1b0e05, 0 6px 0 #120902, 0 30px 60px rgba(0, 0, 0, .6);
}
.ge-desk a:not(.ge-btn) { color: var(--ge-gold); }
.ge-desk h1, .ge-desk h2 { margin: 0; }
.ge-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; }
.ge-sign {
  position: relative; max-width: 640px; padding: 14px 22px 16px; border-radius: 6px;
  background: linear-gradient(rgba(30, 14, 4, .55), rgba(20, 8, 2, .7)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, 0 3px 0 rgba(0, 0, 0, .35);
}
.ge-sign h1 { color: #fdf3d6; font-size: 26px; font-weight: 800; letter-spacing: .05em; text-shadow: 0 2px 0 #1a0d03; }
.ge-sign p { margin: 6px 0 0; font-size: 14px; color: var(--ge-ink); }

/* Pixel-Knöpfe wie am Schreibtisch */
.ge-btn, .ge-go {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #3b2503; font: 800 14px/1 var(--font); letter-spacing: .02em; text-decoration: none; white-space: nowrap;
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; cursor: var(--cur-pointer, pointer);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.ge-btn { height: 44px; padding: 0 4px; }
.ge-btn:hover, .ge-go:hover:not(:disabled) { filter: brightness(1.08) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); text-decoration: none; }
.ge-btn:active, .ge-go:active:not(:disabled) { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.ge-btn.is-danger { filter: hue-rotate(-48deg) saturate(1.5) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.ge-desk .ge-btn:focus-visible, .ge-desk .ge-go:focus-visible, .ge-chip:focus-visible { outline: 2px solid var(--ge-gold); outline-offset: 2px; }
.ge-go { width: 100%; height: 64px; font-size: 19px; border-width: 18px; border-image-width: 18px; }
.ge-go:disabled { filter: grayscale(.85) brightness(.7) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); cursor: var(--cur-default, not-allowed); }
.ge-go:not(:disabled) { animation: ge-pulse 2.2s ease-in-out infinite; }
@keyframes ge-pulse { 50% { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)) drop-shadow(0 0 10px rgba(253, 224, 71, .8)); } }

/* Fortschritt */
.ge-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.ge-steps li { display: inline-flex; }
.ge-steps a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 4px; background: rgba(0, 0, 0, .35); color: var(--ge-dim) !important; font: 700 13px var(--font); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.ge-steps i, .ge-num { display: inline-grid; place-items: center; width: 22px; height: 22px; background: #fcd34d; color: #2a1d0e; font: 800 13px/1 var(--font); font-style: normal; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-num { margin-right: 8px; vertical-align: 2px; }
.ge-steps .is-done a { color: #bbf7d0 !important; }
.ge-steps .is-done i { background: #86efac; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #15803d; font-size: 0; }
.ge-steps .is-done i::before { content: "✓"; font-size: 13px; }

/* Aufbau */
.ge-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.ge-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ge-panel {
  display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 12px; scroll-margin-top: 80px;
  background: linear-gradient(rgba(20, 9, 2, .72), rgba(20, 9, 2, .85)), url("/img/grading/wood.webp") center / 480px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line), inset 0 6px 14px rgba(0, 0, 0, .6);
}
.ge-panel h2 { font: 800 18px/1.3 var(--font); color: #fdf3d6; }
.ge-panel p { margin: 0; }
.ge-empty { text-align: center; padding: 34px 20px; }
.ge-risk { color: var(--ge-dim); }
.ge-risk b, .ge-foot { color: var(--ge-ink); }
.ge-foot { margin: 0; color: var(--ge-dim); }

/* Filter-/Sortier-Chips */
.ge-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ge-chips-label { font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ge-dim); margin-right: 4px; }
.ge-chip { padding: 6px 12px; border-radius: 4px; border: 0; background: rgba(0, 0, 0, .35); color: var(--ge-ink); font: 700 13px var(--font); cursor: var(--cur-pointer, pointer); box-shadow: inset 0 0 0 1px rgba(122, 84, 22, .7); }
.ge-chip:hover { background: rgba(0, 0, 0, .5); }
.ge-chip.is-on { background: var(--ge-gold); color: #2b1d05; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: rgba(0, 0, 0, .3); font-size: 11px; text-align: center; }
.ge-chip.is-on .ge-count { background: rgba(0, 0, 0, .18); }

/* Karten: gewählte Karte hebt sich mit Goldrand und Häkchen ab */
.ge-cards { max-height: 480px; overflow-y: auto; padding: 8px 6px 4px; }
.ge-cards .tcg-slot-label { color: var(--ge-ink); }
.ge-cards .gs-card { transition: transform .12s; }
.ge-cards .gs-card:hover { transform: translateY(-3px); }
.ge-cards .gs-card:has(input:checked) .tcg-art, .ge-cards .gs-card:has(input:checked) .foil-card { box-shadow: 0 0 0 3px var(--ge-gold), 0 0 16px rgba(253, 224, 71, .45); }
.ge-cards .gs-card:has(input:checked)::after { content: "✓"; position: absolute; top: 4px; right: 6px; z-index: 4; display: grid; place-items: center; width: 24px; height: 24px; background: #86efac; color: #14532d; font-weight: 800; box-shadow: inset 0 0 0 2px #1f1408; pointer-events: none; }
.ge-cards .gs-card > input { opacity: 0; width: 100%; height: 100%; top: 0; left: 0; margin: 0; position: absolute; cursor: var(--cur-pointer, pointer); z-index: 2; }
.ge-cards .gs-card > input:focus-visible ~ .tcg-art, .ge-cards .gs-card > input:focus-visible ~ .foil-card { outline: 2px solid var(--ge-gold); outline-offset: 3px; }
.ge-cards .hb-loupe { position: relative; z-index: 3; }

/* Leistungen */
.ge-desk .gs-svc, .ge-desk .gs-shop { background: rgba(0, 0, 0, .32); color: var(--ge-ink); box-shadow: inset 0 0 0 1px rgba(122, 84, 22, .7); border-radius: 8px; }
.ge-desk .gs-svc small, .ge-desk .gs-shop .gr-dim, .ge-desk .gs-shop-list { color: var(--ge-dim); }
.ge-desk .gs-svc:has(input:checked):not(.is-fixed), .ge-desk .gs-shop:has(input:checked) { background: rgba(253, 230, 138, .12); box-shadow: inset 0 0 0 2px var(--ge-gold); }
.ge-desk .gs-svc input, .ge-desk .gs-shop input { accent-color: #fcd34d; }
.ge-desk .gs-warn { color: #fca5a5; font-weight: 700; }

/* Shops: vergleichbare Karten, Preis groß rechts oben */
.ge-shops { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ge-shop { gap: 6px; padding: 14px 16px; }
.ge-shop input { top: 14px; right: 14px; opacity: 0; }
.ge-shop::after { content: ""; position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px #7a5416; pointer-events: none; }
.ge-shop:has(input:checked)::after { background: #fcd34d; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-shop-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-right: 30px; }
.ge-shop .gs-shop-head { padding-right: 0; font-size: 16px; color: #fdf3d6; }
.ge-shop .gs-shop-price b { font: 800 19px var(--font); color: #86efac; font-variant-numeric: tabular-nums; }
.ge-shop-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ge-fact { color: var(--ge-dim); }
.ge-fact.is-good { color: #86efac; }
.ge-fact.is-out { color: #fca5a5; font-weight: 700; }
.ge-shop.is-off { opacity: .4; }
.ge-shop-link { align-self: flex-start; }

/* Auftragszettel: Papier, leicht schief, klebt beim Scrollen am Rand */
.ge-ticket {
  position: sticky; top: 76px; display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; border-radius: 4px; background: var(--paper); color: var(--paper-ink);
  transform: rotate(.6deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 4px 8px 18px rgba(0, 0, 0, .5);
}
.ge-ticket::before { content: ""; position: absolute; top: -9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; background: rgba(217, 164, 65, .75); transform: rotate(-2deg); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ge-ticket h2 { font: 800 13px var(--font); letter-spacing: .12em; text-transform: uppercase; text-align: center; color: #5a4f42; }
.ge-ticket p { margin: 0; }
.ge-ticket-card { display: grid; place-items: center; width: 140px; aspect-ratio: 720 / 1008; margin: 0 auto; border-radius: 8px; background: repeating-linear-gradient(45deg, #ece6d4 0 8px, #f3eedf 8px 16px); box-shadow: inset 0 0 0 2px #d6ccb0; overflow: hidden; }
.ge-ticket-card img { width: 100%; height: 100%; object-fit: cover; box-shadow: 4px 6px 10px rgba(0, 0, 0, .35); }
.ge-ticket-empty { padding: 8px; font: 600 12px var(--font); color: #8a7d68; text-align: center; }
.ge-ticket-name { text-align: center; font: 800 16px/1.3 var(--font); }
.ge-lines { margin: 0; padding: 0; list-style: none; border-top: 1px dashed #b9ad92; }
.ge-lines li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #b9ad92; font-size: 13px; }
.ge-lines b { font-variant-numeric: tabular-nums; }
.ge-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.ge-total b { font: 800 24px var(--font); color: #1f7a3d; font-variant-numeric: tabular-nums; }
.ge-note { color: #6b5230; }
.ge-note:empty { display: none; }

/* Aufträge */
.ge-order-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ge-order { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(122, 84, 22, .7); }
.ge-order[hidden] { display: none; }
.ge-order-thumb { flex: none; width: 48px; }
.ge-order-thumb img { display: block; width: 48px; height: auto; border-radius: 4px; box-shadow: 0 0 0 2px var(--rar, rgba(255, 255, 255, .35)); }
.ge-order-info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; }
.ge-order-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: #fdf3d6; }
.ge-order-meta { color: var(--ge-dim); }
.ge-order-meta b { color: var(--ge-ink); }
.ge-status { padding: 1px 8px; border-radius: 3px; background: rgba(0, 0, 0, .4); font: 700 11px var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--ge-dim); }
.ge-order.is-wartet .ge-status, .ge-order.is-in_arbeit .ge-status { background: var(--ge-gold); color: #2b1d05; }
.ge-order.is-fertig .ge-status { background: #86efac; color: #14532d; }
.ge-stars { color: #f5c542; letter-spacing: 1px; }
.ge-order-actions form { margin: 0; }
.ge-order-actions .gs-rate { justify-content: flex-end; }
.ge-desk .gs-stars label { color: #5a4326; }
.ge-desk .gs-tag span { border-color: #7a5416; color: var(--ge-ink); }

@media (max-width: 900px) {
  .ge-desk { padding: 18px 14px 22px; border-radius: 16px; }
  .ge-layout { grid-template-columns: 1fr; }
  /* Zettel am unteren Rand: nur Summe und Knopf, Details bleiben dem Schreibtisch vorbehalten */
  .ge-ticket { position: sticky; top: auto; bottom: 8px; z-index: 5; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; transform: none; }
  .ge-ticket::before, .ge-ticket h2, .ge-ticket-card, .ge-lines, .ge-note { display: none; }
  .ge-ticket-name { flex: 1 1 100%; text-align: left; font-size: 14px; }
  .ge-total { flex: 1 1 auto; flex-direction: column; gap: 0; }
  .ge-total span { font-size: 12px; color: #5a4f42; }
  .ge-go { width: auto; flex: 1 1 160px; height: 52px; font-size: 16px; }
  .ge-cards { max-height: 380px; }
}
@media (prefers-reduced-motion: reduce) { .ge-go:not(:disabled) { animation: none; } .ge-cards .gs-card { transition: none; } .ge-cards .gs-card:hover { transform: none; } }

/* ?-Erklärungen im Annahmeschalter: goldener Pixel-Knopf, dunkle Sprechblase */
.ge-desk .help-tip { vertical-align: middle; margin-left: 4px; }
.ge-desk .help-tip > summary { width: 20px; height: 20px; border: 0; border-radius: 0; background: #fcd34d; color: #2a1d0e; font: 800 12px/1 var(--font); box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-desk .help-tip > summary:hover, .ge-desk .help-tip[open] > summary { background: #fde68a; color: #2a1d0e; }
.ge-desk .help-tip > summary:focus-visible { outline: 2px solid var(--ge-gold); outline-offset: 2px; }
.ge-desk .help-tip-body {
  left: 0; right: auto; width: min(320px, calc(100vw - 56px)); background: #1c0e04; color: var(--ge-ink); border: 0; border-radius: 6px;
  box-shadow: inset 0 0 0 2px #7a5416, 0 8px 20px rgba(0, 0, 0, .6); font: 500 13px/1.5 var(--font); text-align: left; white-space: normal;
}
.ge-desk .help-tip-body b { color: #fdf3d6; }
.ge-sign p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ge-svc-label, .ge-desk .gs-svc > span { align-items: baseline; }
.ge-desk .gs-svc > span { flex-direction: row; flex-wrap: wrap; gap: 4px 8px; }
.ge-desk .gs-shop-list { display: block; }

/* Wizard: ein Schritt nach dem anderen */
.ge-panel[hidden] { display: none; }
.ge-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.ge-btn:disabled { filter: grayscale(.85) brightness(.7) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); cursor: var(--cur-default, not-allowed); }
.ge-steps button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 0; border-radius: 4px; background: rgba(0, 0, 0, .35); color: var(--ge-ink); font: 700 13px var(--font); cursor: var(--cur-pointer, pointer); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5); }
.ge-steps button:disabled { color: var(--ge-dim); opacity: .6; cursor: var(--cur-default, not-allowed); }
.ge-steps .is-now button { background: var(--ge-gold); color: #2b1d05; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-steps .is-done button:not(:disabled) { color: #bbf7d0; }
.ge-steps .is-done.is-now button { color: #2b1d05; }
.ge-steps button:focus-visible { outline: 2px solid var(--ge-gold); outline-offset: 2px; }

/* Überarbeitung: große Schrittleiste, Sortierung als Auswahlfeld, Aufträge in Gruppen statt Reitern */
.ge-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 18px; }
.ge-steps li { display: block; position: relative; }
.ge-steps li + li::before { content: ""; position: absolute; left: -8px; top: 50%; width: 16px; height: 4px; margin-top: -2px; background: #1a0d03; z-index: 1; }
.ge-steps button { width: 100%; min-height: 56px; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 0; font: 800 16px var(--font); background: linear-gradient(rgba(20, 9, 2, .6), rgba(20, 9, 2, .75)), url("/img/grading/wood.webp") center / 360px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line); }
.ge-steps li:first-child button { border-radius: 8px 0 0 8px; }
.ge-steps li:last-child button { border-radius: 0 8px 8px 0; }
.ge-steps i { width: 28px; height: 28px; font-size: 16px; }
.ge-steps .is-now button { background: linear-gradient(rgba(253, 230, 138, .95), rgba(252, 211, 77, .95)); box-shadow: inset 0 0 0 2px #1f1408, inset 0 -4px 0 rgba(217, 119, 6, .6); }
.ge-steps .is-done:not(.is-now) button { color: #bbf7d0; }
.ge-steps button:disabled { opacity: .55; }
.ge-pane-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ge-sort { display: inline-flex; align-items: center; gap: 8px; color: var(--ge-dim); font: 700 12px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.ge-sort select { min-height: 40px; padding: 0 32px 0 12px; border: 0; border-radius: 6px; background-color: #1c0e04; color: var(--ge-ink); font: 700 14px var(--font); letter-spacing: 0; text-transform: none; box-shadow: inset 0 0 0 2px #7a5416; cursor: var(--cur-pointer, pointer); }
.ge-sort select:focus-visible { outline: 2px solid var(--ge-gold); outline-offset: 2px; }
.ge-group > summary { display: flex; align-items: center; gap: 8px; padding: 6px 0; font: 800 14px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ge-gold); cursor: var(--cur-pointer, pointer); list-style: none; }
.ge-group > summary::-webkit-details-marker { display: none; }
.ge-group > summary::before { content: "▸"; font-size: 12px; transition: transform .12s; }
.ge-group[open] > summary::before { transform: rotate(90deg); }
.ge-group + .ge-group { margin-top: 4px; }
.ge-group .ge-count { background: rgba(0, 0, 0, .35); color: var(--ge-ink); }
@media (max-width: 560px) { .ge-steps button { font-size: 14px; padding: 8px; gap: 6px; } .ge-steps i { width: 24px; height: 24px; font-size: 14px; } }

/* Karten: eine Reihe pro Seite, dafür groß */
.ge-cards.tcg-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-height: none; overflow: visible; padding: 10px 8px 4px; }
.ge-cards .tcg-slot-label { font-size: 14px; }
.ge-cards .gs-card[hidden] { display: none; }
.ge-pager { display: flex; align-items: center; justify-content: center; gap: 16px; font: 800 15px var(--font); color: var(--ge-ink); }
.ge-pager .ge-btn { min-width: 64px; font-size: 20px; }
.ge-pager[hidden] { display: none; }
@media (max-width: 900px) { .ge-cards.tcg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ge-cards.tcg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* Kartensuche mit Vorschlägen */
.ge-search { position: relative; }
.ge-search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 16px; }
.ge-search-input { box-sizing: border-box; width: 100%; min-height: 48px; padding: 0 16px 0 42px; border: 0; border-radius: 8px; background: #1c0e04; color: var(--ge-ink); font: 600 16px var(--font); box-shadow: inset 0 0 0 2px #7a5416, inset 0 4px 10px rgba(0, 0, 0, .5); }
.ge-search-input::placeholder { color: var(--ge-dim); opacity: .8; }
.ge-search-input:focus-visible { outline: 2px solid var(--ge-gold); outline-offset: 2px; }
.ge-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 4px; list-style: none; border-radius: 8px; background: #1c0e04; box-shadow: inset 0 0 0 2px #7a5416, 0 10px 24px rgba(0, 0, 0, .65); }
.ge-suggest[hidden] { display: none; }
.ge-suggest li { display: flex; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 6px; cursor: var(--cur-pointer, pointer); }
.ge-suggest li:hover, .ge-suggest li.is-active { background: rgba(253, 230, 138, .16); }
.ge-suggest img { flex: none; width: 28px; height: auto; border-radius: 3px; }
.ge-suggest span { display: flex; flex-direction: column; min-width: 0; }
.ge-suggest b { color: #fdf3d6; font-size: 15px; }
.ge-suggest small { color: var(--ge-dim); font-size: 12px; }
.ge-none { padding: 24px 0; text-align: center; color: var(--ge-dim); }
.ge-none[hidden] { display: none; }

/* Schritte ohne eigenen Kasten: direkt auf der Holzplatte, nur die Auswahl-Kacheln haben einen Rahmen */
.ge-search-input { padding-left: 16px; }
.ge-panel.gs-step { padding: 4px 2px 0; background: none; box-shadow: none; border-radius: 0; gap: 16px; }
.ge-panel.gs-step > h2 { font-size: 22px; text-shadow: 0 2px 0 #1a0d03; }
.ge-svcs.gs-svcs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.ge-desk .ge-svcs .gs-svc { min-height: 96px; padding: 18px 20px; align-items: center; gap: 14px; font-size: 17px; background: linear-gradient(rgba(20, 9, 2, .6), rgba(20, 9, 2, .75)), url("/img/grading/wood.webp") center / 360px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line), 0 4px 0 rgba(0, 0, 0, .35); }
.ge-desk .ge-svcs .gs-svc:has(input:checked):not(.is-fixed) { background: linear-gradient(rgba(253, 230, 138, .22), rgba(253, 230, 138, .12)), url("/img/grading/wood.webp") center / 360px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px var(--ge-gold), 0 4px 0 rgba(0, 0, 0, .35); }
.ge-desk .ge-svcs .gs-svc input { width: 22px; height: 22px; margin-top: 0; }
.ge-desk .ge-svcs .gs-svc.is-fixed { opacity: .75; }
.ge-desk .ge-svcs .gs-svc small { font-size: 13px; }
.ge-desk .ge-shops .gs-shop { background: linear-gradient(rgba(20, 9, 2, .6), rgba(20, 9, 2, .75)), url("/img/grading/wood.webp") center / 360px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line), 0 4px 0 rgba(0, 0, 0, .35); }
.ge-desk .ge-shops .gs-shop:has(input:checked) { box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px var(--ge-gold), 0 4px 0 rgba(0, 0, 0, .35); }

/* Leistungen als Preisliste: Titel mit Beschreibung links, Preis rechts, gestrichelte Linien statt Kacheln */
.ge-menu.gs-svcs { display: flex; flex-direction: column; gap: 0; }
.ge-desk .ge-menu .gs-svc { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 4px 18px; min-height: 0; padding: 18px 8px; border-radius: 0; background: none; box-shadow: none; border-bottom: 2px dashed rgba(201, 176, 120, .35); font-size: 17px; }
.ge-desk .ge-menu .gs-svc:last-child { border-bottom: 0; }
.ge-desk .ge-menu .gs-svc:hover:not(.is-fixed):not(.is-off) { background: rgba(253, 230, 138, .07); }
.ge-desk .ge-menu .gs-svc:has(input:checked):not(.is-fixed) { background: rgba(253, 230, 138, .12); box-shadow: inset 4px 0 0 var(--ge-gold); }
.ge-desk .ge-menu .gs-svc input { width: 24px; height: 24px; margin: 0; }
.ge-row-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ge-desk .ge-menu .gs-svc > .ge-row-text { flex-direction: column; }
.ge-row-text b { font: 800 18px var(--font); color: #fdf3d6; }
.ge-desk .ge-menu .gs-svc small { font-size: 14px; line-height: 1.4; color: var(--ge-dim); max-width: 60ch; }
.ge-row-price { font: 800 19px var(--font); color: #86efac; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ge-desk .ge-menu .gs-svc.is-fixed { opacity: .8; }
.ge-desk .ge-menu .gs-svc.is-off { opacity: .45; }
.ge-desk .ge-menu .gs-svc:has(input:checked):not(.is-fixed) b { color: var(--ge-gold); }
@media (max-width: 560px) { .ge-desk .ge-menu .gs-svc { grid-template-columns: 28px 1fr; } .ge-row-price { grid-column: 2; } }

/* Servicepakete: genau eines wählbar, nur sinnvolle Pakete werden gezeigt; Posten stehen auf dem Auftragszettel */
.ge-pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.ge-pkg, .ge-addon { position: relative; display: flex; gap: 14px; cursor: var(--cur-pointer, pointer); color: #f6e7bf; }
.ge-pkg[hidden] { display: none; }
.ge-pkg {
  flex-direction: column; justify-content: space-between; min-height: 170px; padding: 22px 22px 18px; border-radius: 10px;
  background: linear-gradient(rgba(20, 9, 2, .62), rgba(20, 9, 2, .78)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line), 0 4px 0 rgba(0, 0, 0, .35); transition: transform .12s;
}
.ge-pkg:hover { transform: translateY(-3px); }
.ge-pkg input, .ge-addon input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.ge-pkg::after { content: ""; position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px #7a5416; }
.ge-pkg:has(input:checked) { background: linear-gradient(rgba(253, 230, 138, .24), rgba(253, 230, 138, .12)), url("/img/grading/wood.webp") center / 360px auto; box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px var(--ge-gold), 0 4px 0 rgba(0, 0, 0, .35); }
.ge-pkg:has(input:checked)::after { background: radial-gradient(circle, #fcd34d 0 40%, #1c0e04 45%); box-shadow: inset 0 0 0 2px #fcd34d; }
.ge-pkg-body { display: flex; flex-direction: column; gap: 6px; padding-right: 30px; }
.ge-pkg-body b { font: 800 21px/1.2 var(--font); color: #fff4d2; }
.ge-pkg-body > span { font: 500 15px/1.5 var(--font); color: #f0dcae; }
.ge-pkg-price { font: 800 24px var(--font); color: #86efac; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ge-pkg:has(input:checked) .ge-pkg-body b { color: var(--ge-gold); }
.ge-pkgs:has(input:focus-visible) .ge-pkg:has(input:focus-visible), .ge-addon:has(input:focus-visible) { outline: 2px solid var(--ge-gold); outline-offset: 3px; }
/* Express: Zusatz unter den Paketen, als Zeile mit Schalter */
.ge-addon { align-items: center; justify-content: space-between; padding: 16px 20px 16px 64px; border-radius: 10px; border: 2px dashed rgba(201, 176, 120, .45); }
.ge-addon::before { content: ""; position: absolute; left: 20px; top: 50%; width: 28px; height: 28px; margin-top: -14px; border-radius: 6px; background: rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 2px #7a5416; }
.ge-addon:has(input:checked) { border-style: solid; border-color: var(--ge-gold); background: rgba(253, 230, 138, .1); }
.ge-addon:has(input:checked)::before { content: "✓"; display: grid; place-items: center; background: #fcd34d; color: #2a1d0e; font-weight: 800; box-shadow: inset 0 0 0 2px #1f1408; }
.ge-addon .ge-pkg-body { padding-right: 0; }
.ge-addon .ge-pkg-body b { font-size: 18px; }
@media (prefers-reduced-motion: reduce) { .ge-pkg { transition: none; } .ge-pkg:hover { transform: none; } }
.ge-fast { font-style: normal; font: 800 13px var(--font); padding: 2px 8px; margin-left: 6px; border-radius: 3px; background: #fcd34d; color: #2a1d0e; vertical-align: 2px; }
.ge-pkg.is-fast { background-image: linear-gradient(rgba(60, 28, 6, .5), rgba(20, 9, 2, .78)), url("/img/grading/wood.webp"); }

/* Pakete untereinander über die volle Breite: Text links, Preis rechts */
.ge-pkgs { grid-template-columns: 1fr; gap: 14px; }
.ge-pkg { flex-direction: row; align-items: center; justify-content: space-between; min-height: 0; padding: 20px 64px 20px 24px; }
.ge-pkg::after { top: 50%; right: 22px; margin-top: -11px; }
.ge-pkg-body { padding-right: 0; flex: 1 1 auto; }
.ge-pkg-price { flex: none; }
@media (max-width: 560px) { .ge-pkg { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* Kopf: eine durchgehende Messing-Leiste über die ganze Breite, Titel links, Knopf rechts bündig mittig */
.ge-head {
  align-items: center; flex-wrap: nowrap; gap: 20px; padding: 18px 26px; border-radius: 8px;
  background: linear-gradient(rgba(30, 14, 4, .55), rgba(20, 8, 2, .72)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, 0 4px 0 rgba(0, 0, 0, .35);
}
.ge-head-text { flex: 1 1 auto; min-width: 0; }
.ge-head h1 { color: #fdf3d6; font-size: 28px; font-weight: 800; letter-spacing: .05em; line-height: 1.2; text-shadow: 0 2px 0 #1a0d03; }
.ge-head p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 15px; color: #f0dcae; }
.ge-head .ge-btn { flex: none; height: 52px; font-size: 15px; }
@media (max-width: 560px) { .ge-head { flex-wrap: wrap; padding: 14px 16px; } .ge-head .ge-btn { width: 100%; } }

/* Aufträge: ohne Kasten auf der Platte, jede Zeile mit Karte, Stand und Ergebnis */
.ge-orders { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.ge-orders-title { font: 800 22px/1.3 var(--font); color: #fdf3d6; text-shadow: 0 2px 0 #1a0d03; }
.ge-group > summary { font-size: 15px; color: var(--ge-gold); }
.ge-order-list { gap: 12px; margin-top: 8px; }
.ge-order {
  display: grid; grid-template-columns: 64px minmax(160px, 1.1fr) minmax(220px, 1.6fr) auto; align-items: center; gap: 8px 22px; padding: 14px 18px; border-radius: 10px;
  background: linear-gradient(rgba(20, 9, 2, .62), rgba(20, 9, 2, .78)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #1a0d03, inset 0 0 0 3px var(--ge-line), 0 4px 0 rgba(0, 0, 0, .3);
}
.ge-order-thumb, .ge-order-thumb img { width: 64px; }
.ge-order-thumb img { border-radius: 5px; box-shadow: 0 0 0 2px #1a0d03, 0 3px 8px rgba(0, 0, 0, .5); }
.ge-order-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ge-order-name { font: 800 18px/1.25 var(--font); color: #fff4d2; }
.ge-order-sub { font-size: 14px; color: #f0dcae; }
.ge-order-what { font-size: 13px; color: var(--ge-dim); }
.ge-order-state { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ge-order-note { font-size: 13px; color: var(--ge-dim); }

/* Stand eines laufenden Auftrags: drei Stationen auf einer Schiene */
.ge-rail { display: flex; margin: 0; padding: 0; list-style: none; }
.ge-rail li { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 12px var(--font); color: var(--ge-dim); opacity: .65; }
.ge-rail li + li::before { content: ""; position: absolute; top: 7px; right: 50%; width: 100%; height: 4px; background: #3b2810; z-index: 0; }
.ge-rail i { position: relative; z-index: 1; width: 18px; height: 18px; background: #3b2810; box-shadow: inset 0 0 0 2px #1f1408; }
.ge-rail .is-done, .ge-rail .is-now { opacity: 1; }
.ge-rail .is-done i { background: #86efac; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #15803d; }
.ge-rail .is-done::before, .ge-rail .is-now::before { background: #86efac; }
.ge-rail .is-now i { background: #fcd34d; box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-rail .is-now { color: var(--ge-gold); }

/* Ergebnis: Note groß als Pixel-Schild, daneben was passiert ist */
.ge-result { display: flex; align-items: center; gap: 16px; }
.ge-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 74px; padding: 8px 12px; border-radius: 6px; background: #fbf8ef; color: #2a2622; box-shadow: 0 1px 0 rgba(0, 0, 0, .15), 3px 5px 10px rgba(0, 0, 0, .45); transform: rotate(-2deg); }
.ge-grade b { font: 800 30px/1 var(--font); }
.ge-grade small { font: 700 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #5a4f42; }
.ge-result-text { display: flex; flex-direction: column; gap: 2px; font: 800 17px/1.3 var(--font); color: #bbf7d0; }
.ge-result-text small, .ge-refund small { font: 500 14px var(--font); color: var(--ge-dim); }
.ge-refund { display: flex; flex-direction: column; gap: 2px; font: 800 17px var(--font); color: #fca5a5; }
.ge-order.is-fertig .ge-order-name { color: #fff4d2; }
.ge-order-actions { justify-self: end; }
.ge-rated { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font: 600 12px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--ge-dim); }
.ge-stars { font-size: 20px; letter-spacing: 2px; }
.ge-stars i { font-style: normal; color: #5a4326; }

/* Bewertung offen: eigene Zeile unter dem Auftrag mit Frage */
.ge-rate { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 4px 0 0; padding: 12px 16px; border-radius: 8px; background: rgba(253, 230, 138, .1); box-shadow: inset 0 0 0 2px rgba(253, 230, 138, .5); }
.ge-rate-q { font: 800 15px var(--font); color: var(--ge-gold); }
.ge-rate .gs-stars label { font-size: 30px; padding: 2px 4px; }
.ge-rate .gs-tags { flex-basis: 100%; }
@media (max-width: 900px) { .ge-order { grid-template-columns: 56px 1fr; } .ge-order-thumb, .ge-order-thumb img { width: 56px; } .ge-order-state, .ge-order-actions { grid-column: 1 / -1; justify-self: stretch; } .ge-rated { align-items: flex-start; } }


/* Hauptaktionen untereinander in einer Spalte: Kopf-Knopf, Weiter/Einreichen und Zurück gleich breit und gleich hoch */
.ge-go { width: 100%; height: 64px; font-size: 17px; }
.ge-go[hidden], .ge-back[hidden] { display: none; }
.ge-go.is-calm { width: 320px; max-width: 100%; animation: none; }
.ge-head .ge-go { flex: none; }
.ge-back { align-self: center; padding: 8px 12px; border: 0; background: none; color: #6b5230; font: 700 14px var(--font); cursor: var(--cur-pointer, pointer); text-decoration: underline; text-underline-offset: 3px; }
.ge-back:hover { color: #2a2622; }
.ge-back:focus-visible { outline: 2px solid #2a1a08; outline-offset: 2px; }
@media (max-width: 900px) { .ge-go.is-calm { width: 100%; } .ge-back { flex: none; } }

.ge-desk a.ge-go, .ge-desk a.ge-go:hover { color: #3b2503; }

.ge-ticket-shop { text-align: center; font: 700 14px var(--font); color: #5a4f42; }
.ge-ticket-shop[hidden] { display: none; }
@media (max-width: 900px) { .ge-ticket-shop { display: none; } }

/* Zurück: gleicher Pixel-Knopf wie die Hauptaktion, aber dunkler getönt; auf Seite 1 ausgegraut */
.ge-go.ge-back { height: 52px; font-size: 15px; filter: saturate(.7) brightness(.85) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.ge-go.ge-back:hover:not(:disabled) { filter: saturate(.8) brightness(.95) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.ge-go.ge-back:disabled { filter: grayscale(.85) brightness(.6) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); animation: none; }
.ge-ticket .ge-go + .ge-go { margin-top: 2px; }

/* Bereichsüberschriften: graviertes Holzschild-Gefühl mit Messinglinie, die bis zum Rand läuft */
.ge-panel.gs-step > h2, .ge-pane-head h2 { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; font: 800 28px/1.2 var(--font); letter-spacing: .04em; color: #fdf3d6; text-shadow: 0 2px 0 #1a0d03, 0 0 12px rgba(253, 224, 71, .18); }
.ge-panel.gs-step > h2::before, .ge-pane-head h2::before { content: ""; flex: none; width: 14px; height: 14px; background: #fcd34d; transform: rotate(45deg); box-shadow: inset 0 0 0 2px #1f1408, inset -2px -2px 0 2px #d97706; }
.ge-panel.gs-step > h2::after, .ge-pane-head h2::after { content: ""; flex: 1 1 40px; height: 4px; margin-left: 4px; background: linear-gradient(90deg, #d9a441 0 70%, transparent); box-shadow: 0 2px 0 #1a0d03; opacity: .8; }
.ge-pane-head { align-items: center; flex-wrap: nowrap; gap: 20px; }
.ge-pane-head .ge-sort { flex: none; }
@media (max-width: 560px) { .ge-panel.gs-step > h2, .ge-pane-head h2 { font-size: 22px; } .ge-pane-head { flex-wrap: wrap; } }

/* ?-Knöpfe größer und mittig an der Zeile */
.ge-desk .help-tip { margin-left: 0; vertical-align: middle; order: 0; }
.ge-desk .help-tip > summary { width: 30px; height: 30px; font-size: 17px; }
.ge-desk .help-tip-body { top: calc(100% + 12px); font-size: 14px; padding: 14px 16px; }
.ge-head p .help-tip > summary { width: 26px; height: 26px; font-size: 15px; }
.ge-go.ge-back { align-self: stretch; padding: 0 8px; border: 18px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 18px round; background: none; color: #3b2503; text-decoration: none; }
.ge-go.ge-back:active:not(:disabled) { border-image-source: url("/img/grading/ui-button-pressed.png"); }

/* Shop-Karte: Name und Preis oben, Rang und Bewertung, zwei Balken, zwei Fakten – alles in fester Reihenfolge */
.ge-shops { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.ge-shop { gap: 12px; padding: 18px 20px 14px; font-size: 14px; }
.ge-shop::after { top: 18px; right: 18px; }
.ge-shop-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: 34px; }
.ge-shop-id { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.ge-shop-name { font: 800 20px/1.2 var(--font); color: #fff4d2; }
.ge-shop .gs-shop-price b { font: 800 22px var(--font); color: #86efac; white-space: nowrap; }
.ge-shop-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; color: #f0dcae; }
.ge-tier { padding: 2px 10px; border-radius: 3px; background: #fcd34d; color: #2a1d0e; font: 800 12px var(--font); letter-spacing: .06em; text-transform: uppercase; }
.ge-stars-line { color: #f5c542; font-size: 15px; }
.ge-stars-line b { color: #fff4d2; font-size: 16px; }
.ge-stars-line small, .ge-owner { color: var(--ge-dim); font-size: 13px; }
.ge-owner { margin-left: auto; }
.ge-meters { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 6px; background: rgba(0, 0, 0, .3); }
.ge-meter-row { display: grid; grid-template-columns: 112px 1fr 44px; align-items: center; gap: 10px; font: 600 13px var(--font); color: #f0dcae; }
.ge-meter-row b { text-align: right; color: #fff4d2; font-variant-numeric: tabular-nums; }
.ge-bar { display: block; height: 12px; background: #3b2810; box-shadow: 0 0 0 2px #1f1408; }
.ge-bar i { display: block; width: var(--w); height: 100%; background: linear-gradient(#fde68a 0 3px, #fcd34d 3px 8px, #d97706 8px); }
.ge-shop-facts { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.ge-shop-facts .ge-fact { padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .3); font: 600 13px var(--font); color: #f0dcae; }
.ge-shop-facts .ge-fact.is-good { color: #86efac; }
.ge-shop-facts .ge-fact.is-out { color: #fca5a5; }
.ge-shop-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 4px; border-top: 2px dashed rgba(201, 176, 120, .3); }
.ge-shop-foot .gs-shop-list { display: inline-flex; align-items: center; gap: 8px; color: var(--ge-dim); font-size: 13px; }
.ge-shop-foot .help-tip { margin-left: 0; }
.ge-shop-foot .help-tip > summary { width: 26px; height: 26px; font-size: 14px; }
.ge-shop-link { font: 700 14px var(--font); }
.ge-shop .gs-shop-showcase { margin: 0; }
@media (max-width: 420px) { .ge-meter-row { grid-template-columns: 96px 1fr 40px; } }

/* Preisindikator: unter dem Durchschnitt grün, im Durchschnitt neutral, darüber rot */
.ge-shop .gs-shop-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.ge-flag { padding: 2px 8px; border-radius: 3px; font: 800 12px var(--font); letter-spacing: .03em; white-space: nowrap; background: rgba(0, 0, 0, .35); color: var(--ge-dim); }
.ge-flag[hidden] { display: none; }
.ge-flag.is-low { background: rgba(74, 222, 128, .18); color: #bbf7d0; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, .5); }
.ge-flag.is-high { background: rgba(248, 113, 113, .16); color: #fecaca; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, .5); }
.ge-flag.is-mid { background: rgba(253, 230, 138, .12); color: var(--ge-gold); box-shadow: inset 0 0 0 1px rgba(253, 230, 138, .4); }

/* Markt-Kachel: feste Reihenfolge – Name und Chips, Preis mit Urteil und zwei Vergleichswerten, Anbieter, Aktionen */
.mk-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; }
.mk-body { gap: 12px; padding: 14px 16px 16px; }
.mk-head { display: flex; flex-direction: column; gap: 8px; }
.mk-name { font-size: 17px; font-weight: 700; line-height: 1.25; }
.mk-rarity { gap: 6px; }
.mk-rarity > * { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1; }
.mk-rarity .mk-chip { background: var(--surface-2, var(--color-neutral-800)); color: var(--color-neutral-200); }
.mk-rarity .tcg-dot { margin: 0; }
.mk-money { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-block: 1px solid var(--color-neutral-800); }
.mk-price-main { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mk-price-main strong { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.mk-verdict { padding: 3px 9px; border-radius: 4px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--surface-2, var(--color-neutral-800)); color: var(--color-neutral-300); }
.mk-verdict.is-low { background: color-mix(in srgb, #4ade80 18%, transparent); color: #86efac; }
.mk-verdict.is-high { background: color-mix(in srgb, #f87171 16%, transparent); color: #fca5a5; }
.mk-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; }
.mk-kv > div { display: flex; flex-direction: column; gap: 1px; padding: 0 10px; }
.mk-kv > div:first-child { padding-left: 0; }
.mk-kv > div + div { border-left: 1px solid var(--color-neutral-800); }
.mk-kv dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.mk-kv dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-neutral-100); }
.mk-kv dd.mk-kv-cards { display: flex; margin-bottom: 6px; }
.mk-kv dd.pos { color: oklch(0.8 0.14 155); }
.mk-kv dd small { font-size: 11px; font-weight: 500; color: var(--color-neutral-500); }
.mk-sub { font-size: 12px; color: var(--color-neutral-400); }
.mk-seller { font-size: 12px; }
.mk-wants { margin: 0; }
.mk-actions .btn { height: 38px; font-weight: 600; }

/* Kartenauswahl: dieselbe Kachel-Struktur wie auf dem Markt – Name, Chips, Händler | Markt Ø */
.hb-grid { grid-template-columns: repeat(auto-fill, minmax(min(46%, 160px), 1fr)); gap: 22px 16px; }
.hb-card { gap: 6px; }
.hb-card-name { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.25; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-neutral-100); }
.hb-card-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.hb-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 20px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1; background: var(--surface-2, var(--color-neutral-800)); color: var(--color-neutral-200); }
.hb-chip .tcg-dot { margin: 0; }
.hb-chip.is-hold { background: color-mix(in srgb, var(--color-accent) 16%, transparent); color: var(--color-accent-200); }
.hb-chip.is-state { background: color-mix(in srgb, #c4b5fd 16%, transparent); color: #ddd6fe; }
.hb-chip.is-lock { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.hb-kv { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding-top: 6px; border-top: 1px solid var(--color-neutral-800); }
.hb-kv > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 0 8px; }
.hb-kv > span:first-child { padding-left: 0; }
.hb-kv > span + span { border-left: 1px solid var(--color-neutral-800); }
.hb-kv i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.hb-kv b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-neutral-100); }
.hb-kv small { font-size: 10px; color: var(--color-neutral-500); }

.hb-picker-help { flex: none; }
.hb-picker-help .help-tip-body { left: 0; right: auto; }

/* Handelsfenster: gleiche Zonen auf beiden Seiten – Kopf (Titel, Chip, Wert), Ablage, Suche, Geld/Preis unten bündig */
.hb-side { gap: 14px; padding: 18px 22px 20px; }
.hb-side-head { align-items: center; }
.hb-side-label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 800; letter-spacing: .08em; color: var(--color-neutral-100); }
.hb-side-get .hb-side-label { color: var(--color-accent-200); }
.hb-side-from { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0; background: var(--surface-2, var(--color-neutral-800)); color: var(--color-neutral-200); }
.hb-side-value { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-200); }
.hb-side-value:empty { display: none; }
.hb-tray.is-empty { display: grid; place-items: center; min-height: 112px; }
.hb-tray-empty { font-size: 13px; font-weight: 600; color: var(--color-neutral-500); }
.hb-money-row { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.hb-money { height: 44px; }
.hb-money > span:first-child { min-width: 52px; font-weight: 600; color: var(--color-neutral-300); }
.hb-money input { width: 110px; font-size: 16px; font-weight: 600; }
.hb-price-note .help-tip > summary { width: 26px; height: 26px; font-size: 14px; }
.hb-price-note .help-tip { position: relative; }
.hb-price-note .help-tip-body { left: auto; right: 0; }
.hb-foot { padding: 14px 22px 16px; }
.hb-bar-line { font-size: 15px; }

/* Seltenheit der Karte in der Markt-Kachel: ohne Slab Verbreitung in %, mit Slab Seltenheitsstufe aus Note und Shop */
.mk-spread { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-2, var(--color-neutral-800)); }
.mk-spread-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.mk-spread-head b { font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--color-neutral-100); }
.mk-spread-bar { display: block; height: 6px; border-radius: 3px; background: var(--color-neutral-800); overflow: hidden; }
.mk-spread-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--color-accent-500), var(--color-accent-300)); }
.mk-spread-sub { font-size: 12px; color: var(--color-neutral-400); }
.mk-spread.is-slab { --tier: var(--color-neutral-400); box-shadow: inset 3px 0 0 var(--tier); }
.mk-spread.is-slab .mk-spread-head b { color: var(--tier); }
.mk-spread.is-normal { --tier: var(--color-neutral-300); }
.mk-spread.is-ungewoehnlich { --tier: #67e8f9; }
.mk-spread.is-selten { --tier: #a78bfa; }
.mk-spread.is-rar { --tier: #f0abfc; }
.mk-spread.is-legend { --tier: #fcd34d; background: color-mix(in srgb, #fcd34d 10%, var(--surface-2, var(--color-neutral-800))); }

/* Slabs und Sleeves im Kartenfächer als Gehäuse (foil-mini) – kein zusätzlicher Folienrand darum */
.tstack-card.is-foiled { overflow: visible; box-shadow: none; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.tstack-card.is-foiled .foil-card-slot { cursor: inherit; }
.tstack-card.is-foiled .foil-face { border-radius: calc(var(--w) * .09); }

/* Keine Pillenform auf Handel und Neuer Handel: Etiketten und Zähler sind eckig mit kleinem Radius */
:is(.hx, .hb) :is(.bm-state, .foil-tag, .hx-count, .mk-bundle, .mk-kind, .mk-chip, .own-tag, .hb-chip, .hb-tab-count, .hb-qty, .hb-side-from, .hb-side-value, .hb-wish-chip, .hb-wish-tag, .tstack-more, .tcg-crease-tag, .nav-badge, .mkt-opt-count) { border-radius: 3px; }
:is(.hx, .hb) .hb-minus { border-radius: 4px; }

/* Markt-Kachel, einheitlich: immer gleiche Zeilen (Name, vier Fakten, Preis mit zwei Werten, Anbieter, Aktionen) */
.mk-grid { gap: 16px; }
.mk-body { gap: 10px; padding: 14px 16px 16px; }
.mk-head { display: flex; flex-direction: column; gap: 2px; min-height: 3.1em; }
.mk-name { font-size: 16px; font-weight: 700; line-height: 1.25; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-against { font-size: 12px; color: var(--color-neutral-400); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mk-facts { display: flex; flex-direction: column; margin: 0; border-block: 1px solid var(--color-neutral-800); }
.mk-facts > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 28px; }
.mk-facts > div + div { border-top: 1px solid color-mix(in srgb, var(--color-neutral-800) 60%, transparent); }
.mk-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.mk-facts dd { display: flex; align-items: center; gap: 6px; margin: 0; min-width: 0; font-size: 13px; font-weight: 600; color: var(--color-neutral-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-facts dd.is-new { color: oklch(0.8 0.14 155); }
.mk-facts .tcg-dot { flex: none; margin: 0; }
.mk-money { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; }
.mk-price-main { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mk-price-main strong { font-size: 24px; font-weight: 700; line-height: 1.1; }
.mk-verdict { padding: 0; background: none; font-size: 12px; font-weight: 700; }
.mk-verdict.is-none { visibility: hidden; }
.mk-verdict.is-low { background: none; color: oklch(0.8 0.14 155); }
.mk-verdict.is-high { background: none; color: #f87171; }
.mk-verdict.is-mid { background: none; color: var(--color-neutral-300); }
.mk-kv > div { padding: 0 10px; }
.mk-kv > div:first-child { padding-left: 0; }
.mk-actions { margin-top: auto; }

.mk-head { min-height: 0; }
.mk-against { font-size: 13px; }
.mk-against a { color: var(--color-neutral-200); }

/* Sleeve in der Miniatur: Hülle liegt eng an der Karte (ohne Etikettfläche oben wie beim Slab) */
:is(.tstack-card, .hb-card, .gs-card, .foil-card-slot) .foil-inner.is-sleeve .foil-face img { top: 5%; height: 90%; }
:is(.tstack-card, .hb-card) .foil-inner.is-sleeve .foil-face { border-radius: calc(var(--w, 70px) * .08); }

/* Seltenheit erklärt: ausklappbares Fenster neben der Sortierung */
.mk-tools { align-items: center; }
.mk-tools .mk-sort { margin-left: auto; }
.mk-info { position: relative; }
.mk-info > summary { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; list-style: none; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--color-neutral-800); color: var(--color-neutral-300); font-size: 13px; font-weight: 600; cursor: var(--cur-pointer, pointer); }
.mk-info > summary::-webkit-details-marker { display: none; }
.mk-info > summary:hover, .mk-info[open] > summary { color: var(--text); box-shadow: inset 0 0 0 1px var(--color-accent-600); }
.mk-info-q { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 3px; background: var(--color-accent-300); color: var(--color-bg); font-size: 12px; font-weight: 800; }
.mk-info-body { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; width: min(620px, calc(100vw - 32px)); display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; padding: 18px 20px; border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 0 0 1px var(--color-neutral-700), 0 18px 40px rgba(0, 0, 0, .6); font-size: 13px; line-height: 1.5; color: var(--color-neutral-300); }
.mk-info-body section:nth-child(3) { grid-column: 1 / -1; }
.mk-info-body h3 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-100); }
.mk-info-body p { margin: 0 0 8px; }
.mk-info-small { font-size: 12px; color: var(--color-neutral-400); }
.mk-info-rar, .mk-info-tiers { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.mk-info-rar li { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--color-neutral-800); }
.mk-info-rar li b, .mk-info-tiers li b { font-weight: 700; color: var(--color-neutral-100); }
.mk-info-tiers { flex-direction: row; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mk-info-tiers li { display: flex; flex-direction: column; gap: 1px; min-width: 104px; padding: 6px 10px; border-radius: 4px; background: var(--surface-2, var(--color-neutral-800)); box-shadow: inset 3px 0 0 var(--tier, var(--color-neutral-500)); }
.mk-info-tiers li span { font-size: 12px; color: var(--color-neutral-400); }
.mk-info-tiers .is-normal { --tier: var(--color-neutral-300); }
.mk-info-tiers .is-ungewoehnlich { --tier: #67e8f9; }
.mk-info-tiers .is-selten { --tier: #a78bfa; }
.mk-info-tiers .is-rar { --tier: #f0abfc; }
.mk-info-tiers .is-legend { --tier: #fcd34d; }
@media (max-width: 640px) { .mk-info-body { grid-template-columns: 1fr; right: auto; left: 0; } .mk-info-body section:nth-child(3) { grid-column: auto; } }

/* Angebote in „An mich“ und „Meine Angebote“: gleiche Fakten und gleiche Zeilen wie die Markt-Kachel, beide Seiten identisch aufgebaut */
.offer-list { gap: 14px; }
.offer-row { gap: 12px; padding: 14px 16px 12px; }
.offer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--color-divider); font-size: 13px; color: var(--color-neutral-400); }
.offer-kind { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--color-accent-300); }
.offer-who { color: var(--color-neutral-200); font-weight: 600; }
.offer-who a { color: inherit; }
.offer-end { margin-right: auto; }
.offer-state { padding: 2px 9px; border-radius: 3px; background: var(--surface-2, var(--color-neutral-800)); box-shadow: none; font-size: 12px; font-weight: 700; color: var(--color-neutral-300); }
.offer-state.is-turn { background: color-mix(in srgb, var(--color-accent) 20%, transparent); color: var(--color-accent-200); box-shadow: none; }
.offer-new { padding: 2px 8px; border-radius: 3px; background: var(--color-accent-300); color: var(--color-bg); font-size: 11px; font-weight: 800; }
.offer-deal { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 14px; }
.offer-arrow { align-self: center; }
.offer-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 35%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); }
.offer-panel-top { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: center; gap: 2px 14px; min-height: 64px; }
.offer-art { grid-column: 1; grid-row: 1 / span 2; }
.offer-side-label { grid-column: 2; grid-row: 1; align-self: end; }
.offer-name { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.offer-panel .mk-kv { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--color-neutral-800); }
.offer-foot { justify-content: flex-end; padding-top: 10px; }
@media (max-width: 760px) { .offer-deal { grid-template-columns: 1fr; } }

/* Tausch: Differenz in der Mitte, aus deiner Sicht (grün = du bekommst mehr wert) */
.offer-diff { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 112px; padding: 0 4px; color: var(--color-neutral-500); }
.offer-diff-row { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.offer-diff-row i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-500); }
.offer-diff-row b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-neutral-200); white-space: nowrap; }
.offer-diff-row b.pos { color: oklch(0.8 0.14 155); }
.offer-diff-row b.neg { color: #f87171; }
@media (max-width: 760px) { .offer-diff { flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 4px 16px; } }

/* Admin: Sleeve & Slab – Gruppen mit Überschrift, Preise als Tabelle */
.admin-items { max-width: 960px; gap: 18px; }
.admin-group { margin: 0; padding: 16px 18px 18px; border: 0; border-radius: var(--radius-md); background: color-mix(in srgb, var(--color-bg) 35%, transparent); box-shadow: inset 0 0 0 1px var(--color-neutral-800); min-width: 0; }
.admin-group legend { padding: 0 8px; margin-left: -8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-neutral-300); }
.admin-group .admin-gr-grid { margin-bottom: 4px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.admin-group p { margin: 10px 0 0; }
.admin-items-table th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--color-neutral-500); }
.admin-items-name { display: flex; align-items: center; gap: 10px; }
.admin-items-name img { width: 32px; height: 32px; object-fit: contain; }
.admin-eur { display: inline-flex; align-items: center; gap: 6px; }
.admin-eur input { width: 110px; text-align: right; font-variant-numeric: tabular-nums; }
.admin-eur span { color: var(--color-neutral-500); }

/* Grading-Shop auf dem Profil: Leiste im Look der Ausbaustufe (1 rohes Holz · 2 Nussbaum mit Messing · 3 Stahl · 4 Samt) */
.pg-bar {
  --pg-ink: #f0d9a0; --pg-dim: #c9b078; --pg-gold: #fde68a; --pg-track: #3b2810; --pg-edge: #1a0d03;
  display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(220px, 1.4fr) auto auto auto; align-items: center; gap: 14px 24px;
  margin: 0 0 20px; padding: 16px 22px; border-radius: 10px; color: var(--pg-ink);
  background: linear-gradient(rgba(58, 30, 12, .55), rgba(30, 14, 4, .72)), url("/img/grading/wood.webp") center / 520px auto;
  box-shadow: inset 0 0 0 2px var(--pg-edge), inset 0 0 0 3px #7a5416, 0 4px 0 rgba(0, 0, 0, .35);
}
.pg-bar.is-level-1 { background: linear-gradient(rgba(70, 40, 18, .5), rgba(40, 22, 8, .68)), url("/img/grading/wood.webp") center / 520px auto; }
.pg-bar.is-level-2 { box-shadow: inset 0 0 0 2px var(--pg-edge), inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, 0 4px 0 rgba(0, 0, 0, .35); }
.pg-bar.is-level-3 {
  --pg-ink: #dbe6f2; --pg-dim: #9fb0c2; --pg-gold: #bfe0ff; --pg-track: #1d2630; --pg-edge: #14181d;
  background: linear-gradient(rgba(20, 28, 38, .35), rgba(10, 14, 20, .55)), url("/img/grading/diamond-plate.svg") 0 0 / 64px 64px;
  box-shadow: inset 0 0 0 2px #14181d, inset 0 0 0 4px #8d98a5, inset 0 0 0 5px #272e36, 0 4px 0 rgba(0, 0, 0, .35);
}
.pg-bar.is-level-4 {
  --pg-ink: #e6e2ff; --pg-dim: #b0a8e8; --pg-gold: #fcd34d; --pg-track: #1a1540; --pg-edge: #0e0b24;
  background:
    radial-gradient(60% 90% at 18% 0%, rgba(160, 150, 240, .28), transparent 70%),
    linear-gradient(118deg, transparent 0 34%, rgba(160, 150, 240, .13) 46%, transparent 58%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .035) 0 1px, rgba(0, 0, 0, .06) 1px 3px),
    linear-gradient(#2c2563, #1f1948 55%, #130f33);
  box-shadow: inset 0 0 0 2px #0e0b24, inset 0 0 0 4px #d9a441, inset 0 0 0 5px #7a5416, inset 0 0 30px rgba(0, 0, 0, .4), 0 4px 0 rgba(0, 0, 0, .35);
}
.pg-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pg-kicker { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pg-dim); }
.pg-name { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 24px; font-weight: 800; line-height: 1.15; color: #fdf3d6; text-shadow: 0 2px 0 var(--pg-edge); }
.pg-bar.is-level-3 .pg-name { color: #f2f8ff; }
.pg-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; }
.pg-tier { padding: 2px 10px; border-radius: 3px; background: #fcd34d; color: #2a1d0e; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.pg-stars { color: #f5c542; }
.pg-stars b { color: #fff4d2; }
.pg-stars small, .pg-sub > small { color: var(--pg-dim); }
.pg-meters { display: flex; flex-direction: column; gap: 8px; }
.pg-meter { display: grid; grid-template-columns: 108px 1fr 44px; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.pg-meter b { text-align: right; color: #fff4d2; font-variant-numeric: tabular-nums; }
.pg-bar-track { display: block; height: 12px; background: var(--pg-track); box-shadow: 0 0 0 2px var(--pg-edge); }
.pg-bar-track i { display: block; width: var(--w); height: 100%; background: linear-gradient(#fde68a 0 3px, #fcd34d 3px 8px, #d97706 8px); }
.pg-facts { display: flex; flex-direction: column; gap: 6px; }
.pg-fact { padding: 4px 10px; border-radius: 4px; background: rgba(0, 0, 0, .3); font-size: 13px; font-weight: 600; white-space: nowrap; }
.pg-fact.is-good { color: #86efac; }
.pg-fact.is-out { color: #fca5a5; }
.pg-price { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 130px; }
.pg-price-label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--pg-dim); max-width: 180px; }
.pg-price strong { font-size: 26px; font-weight: 800; line-height: 1.1; color: #86efac; font-variant-numeric: tabular-nums; }
.pg-flag { padding: 2px 8px; border-radius: 3px; background: rgba(0, 0, 0, .35); font-size: 12px; font-weight: 800; white-space: nowrap; }
.pg-flag.is-low { background: rgba(74, 222, 128, .18); color: #bbf7d0; }
.pg-flag.is-high { background: rgba(248, 113, 113, .16); color: #fecaca; }
.pg-flag.is-mid { background: rgba(253, 230, 138, .14); color: var(--pg-gold); }
.pg-actions { display: flex; flex-direction: column; gap: 8px; min-width: 190px; }
.pg-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; color: #3b2503; font: 800 14px/1 var(--font); text-decoration: none; white-space: nowrap;
  background: none; image-rendering: pixelated; border: 12px solid transparent; border-image: url("/img/grading/ui-button.png") 6 fill / 12px round; filter: saturate(.7) brightness(.88) drop-shadow(0 3px 0 rgba(0, 0, 0, .4));
}
.pg-btn.is-main { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.pg-btn:hover { text-decoration: none; filter: brightness(1.08) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.pg-btn:active { border-image-source: url("/img/grading/ui-button-pressed.png"); transform: translateY(2px); }
.pg-btn:focus-visible { outline: 2px solid var(--pg-gold); outline-offset: 2px; }
a.pg-btn, a.pg-btn:hover { color: #3b2503; }
@media (max-width: 1100px) { .pg-bar { grid-template-columns: 1fr 1fr; } .pg-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; grid-column: 1 / -1; } .pg-btn { flex: 1 1 180px; } }
@media (max-width: 640px) { .pg-bar { grid-template-columns: 1fr; padding: 14px 16px; } }

.pg-btn.is-off { filter: grayscale(.85) brightness(.6) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); cursor: var(--cur-default, not-allowed); }
.pg-btn.is-off:hover { filter: grayscale(.85) brightness(.6) drop-shadow(0 3px 0 rgba(0, 0, 0, .4)); }
.pg-btn.is-off:active { border-image-source: url("/img/grading/ui-button.png"); transform: none; }

/* Vitrinen-Schild als Zertifikat (wie das Etikett im Slab): weißes Papier, roter Doppelrahmen, Name voll lesbar */
.gd-vit-plaque {
  top: calc(100% + 12px); width: calc(100% + var(--vit-gap) - 8px); max-width: none; box-sizing: border-box; overflow: hidden;
  flex-direction: row; align-items: stretch; justify-content: space-between; gap: .8em; padding: .7em .9em .7em; border-radius: 3px;
  font-size: clamp(10px, 7.2cqw, 12.5px); line-height: 1.25; white-space: normal; color: #111;
  background: #fbfbf8;
  box-shadow: inset 0 0 0 .5em #c8102e, inset 0 0 0 calc(.5em + 1px) #fff, 0 1px 0 rgba(255, 255, 255, .25), 0 5px 12px rgba(0, 0, 0, .6);
}
.gd-vp-info { display: flex; flex-direction: column; gap: .1em; min-width: 0; flex: 1 1 auto; padding-left: .5em; }
.gd-vp-code { font-size: .9em; font-weight: 900; letter-spacing: .16em; color: #c8102e; }
.gd-vp-name { min-width: 0; font-weight: 800; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; color: #111; }
.gd-vp-rar { font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #555; }
.gd-vp-score { display: grid; align-content: center; justify-items: end; flex: none; gap: .1em; line-height: 1; padding-right: .5em; }
.gd-vp-word { font-size: .75em; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #111; text-align: right; }
.gd-vp-grade { font-size: 2.1em; font-weight: 900; line-height: 1; letter-spacing: -.04em; color: #111; font-variant-numeric: tabular-nums; }
.gd-vit-plaque.is-gem { background: linear-gradient(135deg, #fff4cf, #f2c14e 45%, #fff1c2 60%, #d9a634); box-shadow: inset 0 0 0 .5em #a8101f, inset 0 0 0 calc(.5em + 1px) #fff4cf, 0 0 14px rgba(242, 193, 78, .45), 0 5px 12px rgba(0, 0, 0, .6); }
.gd-vit-plaque.is-gem .gd-vp-code { color: #8a0f1c; }
.gd-vit-plaque.is-gem .gd-vp-rar { color: #6b5320; }
.gd-vit-shelf { padding-bottom: 96px; }
.gd-vit-shelf::after { bottom: 72px; }
.gd-vit-plaque { min-height: 3.6em; }
@media (max-width: 760px) { .gd-vit-shelf { padding-bottom: 92px; } }

/* Vitrinen-Schild ohne Rahmen, Metall nach Note: ab 9 Gold, 6 bis 8 Silber, darunter Bronze */
.gd-vit-plaque { padding: .75em 1.1em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 0 rgba(255, 255, 255, .2), 0 5px 12px rgba(0, 0, 0, .6); }
.gd-vp-info, .gd-vp-score { padding: 0; }
.gd-vit-plaque.is-gold { background: linear-gradient(135deg, #fff2b8 0%, #f2c14e 38%, #fff3c4 55%, #d9a634 100%); --pl-ink: #2b1d05; --pl-dim: #6b5320; --pl-code: #7a4e00; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(120, 80, 0, .35), 0 0 14px rgba(242, 193, 78, .4), 0 5px 12px rgba(0, 0, 0, .6); }
.gd-vit-plaque.is-silver { background: linear-gradient(135deg, #f4f6f9 0%, #c3cad4 40%, #eef1f5 56%, #a5adba 100%); --pl-ink: #1a1f27; --pl-dim: #4c5563; --pl-code: #3d4757; }
.gd-vit-plaque.is-bronze { background: linear-gradient(135deg, #f0c9a2 0%, #c58750 40%, #eebb90 56%, #a2673a 100%); --pl-ink: #2a1708; --pl-dim: #5e3c1e; --pl-code: #5b3210; }
.gd-vit-plaque :is(.gd-vp-name, .gd-vp-word, .gd-vp-grade) { color: var(--pl-ink, #111); }
.gd-vit-plaque .gd-vp-rar { color: var(--pl-dim, #555); }
.gd-vit-plaque .gd-vp-code { color: var(--pl-code, #333); }
.gd-vit-plaque.is-gold .gv-sheen { animation-duration: 2.6s; mix-blend-mode: overlay; }

.gs-tip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gs-tip-label { font-size: 12px; color: var(--color-neutral-400); margin-right: 2px; }
.gs-tip .gs-tag input:disabled + span { opacity: .4; }
/* Vitrine am Schreibtisch bearbeiten (ohne Untermenü, grading-desk.js): ziehen, Karte antippen, leeres Fach antippen */
.gd-vit-item[data-id] { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .18s ease; }
.gd-vit-item.is-dragging { cursor: grabbing; z-index: 9; transition: none; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .6)); }
.gd-vit-shelf.is-sorting .gd-vit-item:not(.is-dragging) { transition: none; }
.gd-vit-item.is-dragging .gd-vit-slab { transform: scale(1.08); }
button.gd-vit-empty { padding: 0; border: 0; background: none; font: inherit; }
button.gd-vit-empty.is-add > span { border: 2px dashed rgba(255, 230, 190, .35); background: rgba(255, 230, 190, .04); }
button.gd-vit-empty.is-add:hover > span, button.gd-vit-empty.is-add:focus-visible > span { border-color: #fde68a; background: rgba(253, 230, 138, .1); }
button.gd-vit-empty.is-add:focus-visible { outline: none; }
button.gd-vit-empty b { font-size: 46px; }
.gd-vit-pop { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(8, 3, 2, .62); animation: gd-fade .14s ease-out; }
.gd-vit-pop[hidden], .gd-vit-panel[hidden], .gd-vit-none[hidden], .gd-vit-picklist li[hidden], .gd-vit-note[hidden] { display: none; }
.gd-vit-panel { display: flex; flex-direction: column; gap: 10px; min-width: 220px; max-width: 100%; padding: 16px; background: linear-gradient(rgba(60, 30, 8, .5), rgba(20, 8, 2, .75)), url("/img/grading/wood.webp") center / 360px auto;
  box-shadow: inset 0 0 0 2px #0c0703, inset 0 0 0 4px #8a6a3a, 0 12px 28px rgba(0, 0, 0, .7); }
.gd-vit-panel.is-pick { flex-direction: row; align-items: center; max-width: min(100%, 560px); }
.gd-vit-picklist { display: flex; gap: 12px; margin: 0; padding: 4px 2px 8px; list-style: none; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #8a6a3a #1a0f06; }
.gd-vit-picklist li { flex: none; width: 84px; }
.gd-vit-pickitem { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: var(--cur-pointer, pointer); transition: transform .12s ease; }
.gd-vit-pickitem:hover, .gd-vit-pickitem:focus-visible { transform: translateY(-4px) scale(1.05); outline: none; filter: drop-shadow(0 0 8px #fde68a); }
.gd-vit-none { margin: 0; padding: 6px 8px; color: #fdf3d6; font: 700 14px/1.2 var(--display, inherit); }
.gd-vit-panel .gd-ord-btn { width: 100%; white-space: nowrap; }
.gd-vit-note { position: absolute; left: 50%; bottom: 8px; z-index: 9; transform: translateX(-50%); margin: 0; padding: 6px 12px; background: #3b0f12; color: #ffe0d6; font: 700 13px/1.3 var(--font); box-shadow: 0 0 0 2px #0c0703; }
@media (prefers-reduced-motion: reduce) { .gd-vit-pop { animation: none; } .gd-vit-item[data-id], .gd-vit-pickitem { transition: none; } }
.gd-vit-item[data-id] img, .gd-vit-pickitem img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
/* Shop-Slogan: schlichtes Zitat – dünner Balken links, kursive Schrift in warmem Creme, kein Kasten */
.ge-shop-slogan, .gs-slogan { display: block; margin: 0; padding: 1px 0 1px 12px; border-left: 3px solid color-mix(in srgb, #f59e0b 80%, #7c2d12); overflow-wrap: anywhere;
  color: #f0dcae; font: italic 600 15px/1.35 var(--font); letter-spacing: .005em; }
.gs-slogan { margin: 0 0 14px; font-size: 17px; }
/* Rufstufe 5 (Legende): Violett mit Gold, die Krone als Symbol; Stufe 4 heißt jetzt Elite */
.gd-rep-gain { display: block; margin-top: 2px; font-size: 12px; color: var(--ord-dim); }
.gd-rep-perk { margin: 4px 0 0; font-size: 12px; color: var(--ord-dim); text-align: center; }
/* Rufstufe in der Einreich-Liste: Farbe je Stufe, passend zu den Flaggen am Schreibtisch */
.ge-tier.is-t0 { background: #d6b98c; }
.ge-tier.is-t1 { background: #f0b27a; }
.ge-tier.is-t2 { background: #e6ebf2; }
.ge-tier.is-t3 { background: #ffe9a8; box-shadow: 0 0 0 1px #c8932a; }
.ge-tier.is-t4 { background: linear-gradient(135deg, #6d28d9, #2e1065); color: #fde68a; box-shadow: 0 0 0 1px #f2c14e, 0 0 10px rgba(124, 58, 237, .6); }
.gs-shop[hidden] { display: none; }
/* Werkstatt breit: fünf Blöcke (Shop · Ausbau · Werkzeuge · Material · Ruf) in einer Reihe, Fenster entsprechend breiter */
@media (min-width: 1500px) {
  .gd-sheet.gd-pop.gd-pop-xl { width: min(1560px, calc(100vw - 16px)); }
  .gd-pop-xl .gd-wk { grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, .95fr); }
}
/* Ruf als Pixel-Treppe: eckige Stufen mit gestuften Ecken, ein Gold-Akzent; erreichte Stufen golden, aktuelle hell mit Fortschrittsbalken aus Blöcken */
.gd-rk { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gd-rk-step {
  --px: 4px; flex: 1 1 0; min-height: 46px; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px;
  background: #1b1832; box-shadow: inset 0 0 0 2px #35315e; color: #7a74a6;
  clip-path: polygon(0 var(--px), var(--px) var(--px), var(--px) 0, calc(100% - var(--px)) 0, calc(100% - var(--px)) var(--px), 100% var(--px), 100% calc(100% - var(--px)), calc(100% - var(--px)) calc(100% - var(--px)), calc(100% - var(--px)) 100%, var(--px) 100%, var(--px) calc(100% - var(--px)), 0 calc(100% - var(--px)));
}
.gd-rk-step.is-done { background: #2a2347; box-shadow: inset 0 0 0 2px #8a6a22; color: #e0b44a; }
.gd-rk-step.is-now { flex-grow: 1.5; background: #3b2d10; box-shadow: inset 0 0 0 2px #f2c14e; color: #fff3c9; }
.gd-rk-art { width: 32px; height: 32px; background: currentColor; -webkit-mask: var(--art) center / contain no-repeat; mask: var(--art) center / contain no-repeat; image-rendering: pixelated; }
.gd-rk-txt { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gd-rk-txt b { font: 800 16px/1.1 var(--display); letter-spacing: .01em; color: inherit; }
.gd-rk-bar { display: block; height: 6px; background: linear-gradient(90deg, #f2c14e var(--p, 0%), #0c0703 var(--p, 0%)); -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 10px); }
.gd-rk-end { font: 800 13px var(--display); color: inherit; }
@media (min-width: 761px) and (max-width: 1499px) {
  .gd-pop-xl .gd-wk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-pop-xl .gd-wk-col.gd-rep { grid-column: 1 / -1; }
  .gd-rk { flex-direction: row; }
  .gd-rk-step { grid-template-columns: 28px minmax(0, 1fr); padding: 8px 10px; }
  .gd-rk-art { width: 28px; height: 28px; }
  .gd-rk-txt b { font-size: 14px; }
  .gd-rk-end { display: none; }
}
/* Erklärtexte (Tour und ?-Knopf im Werkstatt-Fenster): Zeilenumbrüche aus dem Text übernehmen */
.gd-info, .gd-tour-bubble p { white-space: pre-line; }
/* Inventar-Kachel (TCG): Pack und Gegenstände als aufgefächerter Kartenstapel, beim Darüberfahren rücken sie auseinander */
.inv-tile-art.inv-tile-minis { display: flex; align-items: center; width: auto; min-width: 52px; padding-left: 4px; }
.inv-tile-minis img { flex: none; width: 42px; height: 60px; margin-left: -22px; object-fit: cover; border-radius: 4px; box-shadow: 0 5px 12px rgba(0, 0, 0, .5); transform: rotate(var(--fan, 0deg)); transition: margin-left .25s ease, transform .25s ease; }
.inv-tile-minis img:first-child { margin-left: 0; --fan: -7deg; }
.inv-tile-minis img:nth-child(2) { --fan: 0deg; position: relative; z-index: 1; }
.inv-tile-minis img:nth-child(3) { --fan: 7deg; position: relative; z-index: 2; }
.inv-tile-minis img:nth-child(n+4) { --fan: 12deg; position: relative; z-index: 3; }
.inv-tile:hover .inv-tile-minis img + img, .inv-tile:focus-visible .inv-tile-minis img + img { margin-left: -8px; }
@media (prefers-reduced-motion: reduce) { .inv-tile-minis img { transition: none; } }

/* ========== Kartenaufwertung (views/tcg-aufwertung.ejs, public/js/aufwertung.js) ==========
   10 Karten einer Seltenheit in den Vertrag legen; das Ergebnis läuft wie beim Kistenöffnen auf einer Walze ein.
   Farben je Seltenheit über --rar (.r-<seltenheit>) */
.up-page { display: flex; flex-direction: column; gap: 18px; }
.up-hero { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.up-hero h1 { margin: 2px 0 8px; }
.up-hero p { margin: 0 0 6px; max-width: 70ch; text-wrap: pretty; }
.up-admin-note { display: inline-block; margin-top: 6px !important; padding: 4px 10px; border-radius: 8px; font-size: 13px; color: #fde68a; background: rgba(250, 204, 21, .1); box-shadow: inset 0 0 0 1px rgba(250, 204, 21, .35); }
.up-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.up-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text); background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 35%, transparent);
}
.up-tab[aria-selected="true"] { background: color-mix(in srgb, var(--rar) 20%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--rar); }
.up-tab-arrow { opacity: .6; }
.up-tab-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: 12px; text-align: center; background: rgba(0, 0, 0, .35); }
.up-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px; align-items: start; }
@media (max-width: 900px) { .up-layout { grid-template-columns: 1fr; } }
.up-pick-head, .up-contract-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.up-pick h2, .up-contract h2 { margin: 0; }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px; }
.up-card {
  position: relative; padding: 0; border: 0; border-radius: 10px; cursor: pointer; background: none; font: inherit; color: inherit;
  transition: transform .15s, filter .15s;
}
.up-card img, .up-slot img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rar) 55%, transparent), 0 6px 14px rgba(0, 0, 0, .45); }
.up-card:hover:not(:disabled), .up-card:focus-visible { transform: translateY(-4px); outline: 0; }
.up-card:disabled { cursor: default; filter: grayscale(.8) brightness(.55); }
.up-card-count, .up-card-dupe {
  position: absolute; left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(10, 10, 16, .85);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 70%, transparent);
}
.up-card-count { top: 6px; }
.up-card-dupe { bottom: 6px; font-weight: 600; font-size: 11px; }
.up-contract { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .up-contract { position: static; } }
.up-filled { font-weight: 800; font-variant-numeric: tabular-nums; }
.up-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.up-slot {
  aspect-ratio: 720 / 1008; padding: 0; border: 0; border-radius: 8px; font: inherit; cursor: pointer;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 6px, transparent 6px 12px), var(--surface-2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.up-slot:disabled { cursor: default; }
.up-slot.is-full { background: none; box-shadow: none; animation: up-drop .2s ease-out; }
.up-slot.is-full:hover img { filter: brightness(.6); }
@keyframes up-drop { from { transform: scale(.85); opacity: .4; } }
.up-chance {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--rar) 14%, var(--surface-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rar) 45%, transparent);
}
.up-chance-value { font-size: 26px; font-variant-numeric: tabular-nums; color: var(--rar); }
.up-else { margin: -4px 0 0; }
.up-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.up-go { width: 100%; }
.up-error { margin: 0; color: var(--nein, #f87171); font-weight: 600; font-size: 14px; }
.up-pool summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.up-pool-head { margin: 12px 0 6px; font-size: 13px; color: var(--muted); }
.up-pool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.up-pool-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.up-pool-list img { width: 28px; height: auto; border-radius: 4px; }
.up-pool-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-pool-tag { padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #052e16; background: #4ade80; }
.up-pool-p { font-variant-numeric: tabular-nums; color: var(--muted); }
.up-history-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.up-history-list li { display: flex; align-items: center; gap: 10px; }
.up-history-list img { width: 40px; height: auto; border-radius: 4px; }
.up-history-list span { display: flex; flex-direction: column; min-width: 0; }
.up-history-list .is-up strong { color: #86efac; }
.up-history-list .is-lucky strong { color: #facc15; }
/* Glückstreffer und Jackpot: goldener Schein */
.up-extra { margin: -6px 0 0; color: #fde68a; }
.up-back { margin: -4px 0 0; font-size: 13px; color: #bbf7d0; }
.up-result-payout { margin: 6px 0 0; font-weight: 700; color: #86efac; }
.up-result.is-lucky { box-shadow: inset 0 0 0 2px #facc15, 0 0 60px rgba(250, 204, 21, .35); }
.up-result.is-lucky .kicker { color: #facc15; font-size: 15px; letter-spacing: .14em; }

/* Ergebnis: erst die Verschmelzung, danach die gezogene Karte groß */
body.up-open { overflow: hidden; }
.up-reveal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(6, 6, 12, .82); backdrop-filter: blur(4px); }
.up-reveal[hidden] { display: none; }
.up-reveal-box { width: min(980px, 100%); display: flex; flex-direction: column; gap: 22px; }
/* Verschmelzen: Karten fliegen auf einer Spirale in den Kern; er leuchtet je Stufe (--lvl 0 = Crumpled … 6 = Icon) in der
   Farbe der Seltenheit (--c), größer, heller und mit mehr Strahlen – bis zur Seltenheit der neuen Karte */
.up-fuse { position: relative; height: min(56vh, 420px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; }
.up-fuse[hidden] { display: none; }
.up-fly { position: fixed; z-index: 120; height: auto; border-radius: 8px; pointer-events: none; will-change: transform, opacity; box-shadow: 0 0 18px rgba(255, 255, 255, .25), 0 8px 20px rgba(0, 0, 0, .5); }
.up-slots.is-fusing .up-slot img { visibility: hidden; }
.up-core { --c: var(--r-crumpled); --lvl: 0; position: relative; width: 120px; height: 120px; opacity: 0; transform: scale(.25); transition: opacity .5s, transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.up-core.is-on { opacity: 1; transform: scale(calc(.75 + var(--lvl) * .13)); }
.up-orb {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 calc(8% + var(--lvl) * 3%), var(--c) 46%, transparent 72%);
  box-shadow: 0 0 calc(24px + var(--lvl) * 20px) calc(4px + var(--lvl) * 5px) var(--c);
  transition: background .35s, box-shadow .35s; animation: up-pulse 1.1s ease-in-out infinite;
}
/* Crumpled: zerknittertes, unruhiges Glimmen – gestauchte Form, flackernd, matte Strahlen */
.up-core.is-crumpled .up-orb { border-radius: 46% 54% 41% 59% / 55% 43% 57% 45%; animation: up-crumple .22s steps(2) infinite; filter: saturate(.6) contrast(1.2); }
.up-core.is-crumpled .up-rays { opacity: .08; animation-duration: 18s; }
.up-rays {
  position: absolute; inset: calc(-50px - var(--lvl) * 24px); border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--c) 75%, transparent) 0 3deg, transparent 3deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 12%, transparent 68%); mask-image: radial-gradient(circle, #000 12%, transparent 68%);
  opacity: calc(.12 + var(--lvl) * .13); animation: up-spin 7s linear infinite; transition: inset .45s, opacity .45s;
}
.up-rays-2 { animation-direction: reverse; animation-duration: 11s; opacity: calc(var(--lvl) * .09); }
.up-core.is-step .up-orb { animation: up-kick .42s ease-out, up-pulse 1.1s ease-in-out .42s infinite; }
.up-core.is-burst .up-orb { animation: up-burst .45s ease-in forwards; }
.up-core.is-burst .up-rays { opacity: 1; inset: -260px; }
.up-fuse-label { min-height: 1.4em; margin: 0; font-size: clamp(22px, 4vw, 34px); font-weight: 900; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 18px currentColor; }
@keyframes up-spin { to { transform: rotate(1turn); } }
@keyframes up-pulse { 50% { transform: scale(1.06); filter: brightness(1.15); } }
@keyframes up-kick { 0% { transform: scale(1.35); filter: brightness(2); } 100% { transform: scale(1); } }
@keyframes up-burst { to { transform: scale(7); opacity: 0; filter: brightness(3); } }
@keyframes up-crumple { 0% { transform: scale(.94) rotate(-6deg); } 50% { transform: scale(1.04) rotate(5deg); } }
/* die neue Karte kommt aus dem Lichtblitz */
.up-result:not([hidden]) img { animation: up-card-in .6s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes up-card-in { from { transform: scale(.2) rotate(-8deg); opacity: 0; filter: brightness(3) blur(4px); } }
@media (prefers-reduced-motion: reduce) { .up-orb, .up-rays, .up-result img { animation: none !important; } }
.up-result { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 22px; align-items: center; padding: 20px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 2px var(--rar); animation: up-result-in .35s ease-out; }
.up-result[hidden] { display: none; }
.up-result img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 0 40px color-mix(in srgb, var(--rar) 60%, transparent); }
.up-result h2 { margin: 4px 0 8px; }
.up-result.is-up .kicker { color: var(--rar); }
.up-result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
@keyframes up-result-in { from { opacity: 0; transform: translateY(12px); } }
@media (max-width: 600px) {
  .up-result { grid-template-columns: 1fr; text-align: center; }
  .up-result img { width: 160px; margin: 0 auto; }
  .up-result-actions { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .up-slot.is-full, .up-result { animation: none; } }

/* ========== Alle Packs öffnen: Übersicht nach Seltenheit (views/inventar.ejs, public/js/packs-alle.js) ========== */
.pack-all { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: rgba(6, 6, 12, .82); backdrop-filter: blur(4px); }
.pack-all[hidden] { display: none; }
.pack-all-box { width: min(1040px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .55); overflow: hidden; }
.pack-all-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.pack-all-head h2 { margin: 2px 0 4px; }
.pack-all-head p { margin: 0; }
.pack-all-list { overflow-y: auto; padding: 8px 20px 22px; overscroll-behavior: contain; }
.pack-all-list:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.pack-all-wait, .pack-all-error { margin: 24px 0; text-align: center; }
.pack-all-error { color: var(--nein, #f87171); font-weight: 600; }
.pack-all-group { padding-top: 14px; }
.pack-all-group-head {
  position: sticky; top: -8px; z-index: 1; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 0;
  font-size: 15px; background: var(--surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--rar) 40%, transparent);
}
.pack-all-group-n { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.pack-all-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 14px 12px; }
.pack-all-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.pack-all-card img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--rar) 55%, transparent), 0 6px 14px rgba(0, 0, 0, .45); }
.pack-all-card.is-new img { box-shadow: 0 0 0 2px #4ade80, 0 0 18px rgba(74, 222, 128, .35); }
.pack-all-n { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(10, 10, 16, .85); box-shadow: 0 0 0 1px color-mix(in srgb, var(--rar) 70%, transparent); }
.pack-all-card .tcg-new-badge { display: inline-block; position: absolute; top: 6px; right: 6px; margin: 0; } /* sofort sichtbar (beim Einzelöffnen erst nach dem Aufdecken) */
.pack-all-name { font-size: 12px; line-height: 1.3; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .pack-all-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); } }

/* ========== Album: eine Kachel je Karte, Versionen entfalten sich (views/tcg-album.ejs, public/js/tcg.js) ========== */
/* Stapel hinter der Kachel deutet an, dass es weitere Versionen gibt */
.album-group.is-stack .tcg-art { box-shadow: 6px -6px 0 -1px color-mix(in srgb, var(--rar, #888) 35%, #1b1d29), 12px -12px 0 -2px color-mix(in srgb, var(--rar, #888) 18%, #15161f); border-radius: 10px; }
.album-group-n { margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--muted); background: rgba(255, 255, 255, .06); font-variant-numeric: tabular-nums; }
.album-group.tcg-seen .tcg-art img { filter: grayscale(.9) brightness(.55); }
.album-group:hover .tcg-art, .album-group:focus-visible .tcg-art { transform: translateY(-4px); }
.album-group .tcg-art { transition: transform .18s; }

/* Übersicht: unscharfer Hintergrund, Versionen in einer Reihe */
body.album-unfold-on { overflow: hidden; }
.album-unfold {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto;
  background: rgba(8, 9, 16, .62); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%);
  animation: album-unfold-in .25s ease-out;
}
.album-unfold[hidden] { display: none; }
.album-unfold-stage { position: relative; width: min(1180px, 100%); }
.album-unfold-head { text-align: center; margin-bottom: 22px; }
.album-unfold-head h2 { margin: 0 0 4px; font-size: clamp(22px, 3vw, 30px); }
.album-unfold-head p { margin: 0; }
.album-unfold-close { position: absolute; top: -6px; right: 0; }
.album-unfold-cards .tcg-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; }
.album-unfold-cards .tcg-slot { width: clamp(130px, 15vw, 190px); }
@keyframes album-unfold-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .album-unfold { animation: none; } }