/* =========================================================================
   GERMAN EILAND - THE CARD GRAMMAR (ge-cards.css, 2026-10-05)

   The framework's card grammar (picture cards, the category bar, the till,
   the buy-dialog shape, the vault slot) carried into German Eiland's own
   assets and voiced in German Eiland's own palette and type. Loaded LAST on
   every page, after ge-signature.css, so it is the one place that says what
   a surface looks like.

   1. THE REGISTER - one list of corners, type roles, spacing, faces and
      shadow. A page asks for a role; it never measures its own.
   2. THE COMPONENTS - gc-* classes used by the redesigned pages.
   3. THE SITE-WIDE PASS - the legacy surfaces every older page still emits
      (sw-card, ge-panel, card, item-card, modal-card, ge-btn, button ...)
      moved onto the same register. Scoped to html.gc, so a page opts in
      with one class and the 3D studio and the map keep their own sheets.

   Colour comes only from the brand tokens (sweet_theme.css, ge-design.css,
   ge-signature.css), so both themes follow the toggle with no extra rule.
   ========================================================================= */

/* ---- 1. THE REGISTER ------------------------------------------------- */
:root{
  /* corners: four values, four roles, nothing else */
  --gc-r:14px;          /* SURFACE  - card, panel, well frame, dialog */
  --gc-r-s:10px;        /* CONTROL  - button, input, select, till     */
  --gc-r-xs:6px;        /* PLATE    - tier plate, tag, kbd            */
  --gc-r-pill:999px;    /* PILL     - category tab, filter chip       */

  /* type roles (fonts are the brand's own: Oswald / Sora / Chakra Petch) */
  --gc-f-display:var(--sw-serif,'Oswald','Arial Narrow',system-ui,sans-serif);
  --gc-f-ui:var(--sw-sans,'Sora',system-ui,sans-serif);
  --gc-f-mono:var(--sw-mono,'Chakra Petch',ui-monospace,monospace);
  --gc-f-num:var(--ge-num,'Space Grotesk','Chakra Petch',system-ui,sans-serif);
  --gc-t-micro:10.5px;  /* labels, eyebrows, plates (mono, tracked caps) */
  --gc-t-meta:12px;     /* meta lines under a name                      */
  --gc-t-body:14px;     /* running text                                 */
  --gc-t-item:22px;     /* a card's name                                */
  --gc-t-panel:28px;    /* a dialog's title                             */
  --gc-t-sec:clamp(24px,3vw,34px);   /* a section heading */
  --gc-t-page:clamp(32px,5vw,54px);  /* the page title    */

  /* spacing steps */
  --gc-s1:6px; --gc-s2:10px; --gc-s3:14px; --gc-s4:18px; --gc-s5:26px; --gc-s6:38px;

  /* faces, edges, light */
  --gc-face:linear-gradient(180deg,var(--ge-surface-2,var(--sw-panel-2)),var(--ge-surface,var(--sw-panel)));
  --gc-face-flat:var(--ge-surface,var(--sw-panel));
  --gc-face-sunk:color-mix(in srgb,var(--sw-bg) 72%,var(--ge-surface,var(--sw-panel)));
  --gc-edge:var(--ge-line,var(--sw-hair));
  --gc-edge-hi:var(--ge-line-2,var(--sw-hair));
  --gc-accent:var(--ge-violet,var(--sw-accent));
  --gc-accent-hi:var(--ge-violet-bright,var(--sw-pink-soft));
  --gc-chisel:rgba(var(--sw-accent-rgb),.38);
  --gc-well:radial-gradient(ellipse 70% 62% at 50% 96%,rgba(var(--sw-accent-rgb),.24),transparent 72%),
            linear-gradient(180deg,var(--ge-surface-3,var(--sw-panel-2)),var(--ge-surface,var(--sw-panel)));
  --gc-shadow:0 24px 60px -30px rgba(0,0,0,.85);
  --gc-shadow-hi:0 30px 64px -32px rgba(0,0,0,.92),0 0 0 1px rgba(var(--sw-accent-rgb),.16);
  --gc-scrim:color-mix(in srgb,var(--sw-bg) 78%,transparent);
}
:root[data-theme="light"]{
  --gc-shadow:0 18px 44px -26px rgba(27,21,38,.32);
  --gc-shadow-hi:0 24px 52px -28px rgba(27,21,38,.40),0 0 0 1px rgba(var(--sw-accent-rgb),.18);
  --gc-chisel:rgba(var(--sw-accent-rgb),.30);
  --gc-face-sunk:color-mix(in srgb,var(--sw-bg) 60%,#ffffff);
}

/* ---- 2. THE COMPONENTS ----------------------------------------------- */

/* page head: eyebrow between two rules, display title, lede */
.gc-head{ text-align:center; margin:0 auto var(--gc-s5); max-width:820px; }
.gc-eyebrow{
  display:flex; align-items:center; justify-content:center; gap:13px; margin:0 0 var(--gc-s3);
  color:var(--gc-accent-hi); font:600 var(--gc-t-micro)/1 var(--gc-f-mono); letter-spacing:.26em; text-transform:uppercase;
}
.gc-eyebrow i{ width:38px; height:1px; background:linear-gradient(90deg,transparent,var(--gc-accent)); }
.gc-eyebrow i:last-child{ background:linear-gradient(90deg,var(--gc-accent),transparent); }
.gc-title{
  margin:0; color:var(--sw-ink); font:700 var(--gc-t-page)/1.04 var(--gc-f-display);
  letter-spacing:.01em; text-transform:uppercase; overflow-wrap:anywhere;
}
.gc-title em{ font-style:normal; color:var(--gc-accent); -webkit-text-fill-color:var(--gc-accent); }
.gc-lede{ margin:var(--gc-s3) auto 0; max-width:62ch; color:var(--sw-ink-2); font:500 15px/1.65 var(--gc-f-ui); text-wrap:balance; }
.gc-sec{ margin:0 0 var(--gc-s1); color:var(--sw-ink); font:700 var(--gc-t-sec)/1.08 var(--gc-f-display); letter-spacing:.01em; text-transform:uppercase; }
.gc-micro{ color:var(--sw-ink-3); font:600 var(--gc-t-micro)/1.3 var(--gc-f-mono); letter-spacing:.16em; text-transform:uppercase; }

/* THE CATEGORY BAR - the shop's top-level fork. Big on purpose. */
.gc-cats{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  margin:0 auto var(--gc-s5); padding:0; border:0; background:transparent;
}
.gc-cat{
  position:relative; display:inline-flex; align-items:center; gap:11px;
  min-height:56px; padding:0 24px 0 18px;
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-pill);
  background:var(--gc-face); color:var(--sw-ink-2);
  font:700 13.5px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; white-space:nowrap; text-decoration:none;
  box-shadow:var(--gc-shadow);
  transition:border-color .2s var(--ge-ease,ease),color .2s var(--ge-ease,ease),background .2s var(--ge-ease,ease),transform .18s var(--ge-ease-out,ease),box-shadow .25s var(--ge-ease,ease);
}
.gc-cat svg{ width:20px; height:20px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gc-cat:hover{ color:var(--sw-ink); border-color:var(--gc-accent); transform:translateY(-1px); }
.gc-cat[aria-selected="true"]{
  color:var(--sw-ink); border-color:var(--gc-accent);
  background:linear-gradient(180deg,rgba(var(--sw-accent-rgb),.26),rgba(var(--sw-accent-rgb),.08)),var(--gc-face-flat);
  box-shadow:var(--gc-shadow-hi),inset 0 1px 0 rgba(255,255,255,.08);
}
.gc-cat[aria-selected="true"] svg{ color:var(--gc-accent-hi); }
.gc-cat-count{
  display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:22px; padding:0 7px;
  border-radius:var(--gc-r-pill); background:var(--gc-face-sunk); color:var(--sw-ink-3);
  font:700 11px/1 var(--gc-f-num); letter-spacing:0;
}
.gc-cat-count:empty{ display:none; }
.gc-cat[aria-selected="true"] .gc-cat-count{ color:var(--sw-ink); background:rgba(var(--sw-accent-rgb),.28); }
/* the loud one: a category that must be found even when not selected */
.gc-cat.gc-cat-hot{ border-color:rgba(var(--sw-accent-rgb),.70); color:var(--sw-ink); }
.gc-cat.gc-cat-hot::after{
  content:attr(data-badge); position:absolute; top:-9px; right:14px; padding:3px 8px;
  border-radius:var(--gc-r-pill); background:var(--gc-accent); color:var(--sw-accent-ink,#fff);
  font:700 9px/1.2 var(--gc-f-mono); letter-spacing:.14em; box-shadow:0 6px 16px -6px rgba(var(--sw-accent-rgb),.9);
}
.gc-cat.gc-cat-hot:not([aria-selected="true"]){ animation:gc-hot 3.2s ease-in-out infinite; }
@keyframes gc-hot{ 0%,100%{ box-shadow:var(--gc-shadow),0 0 0 0 rgba(var(--sw-accent-rgb),0); } 50%{ box-shadow:var(--gc-shadow),0 0 0 6px rgba(var(--sw-accent-rgb),.10); } }

/* tab panels the bar switches between */
.gc-tabpanel{ scroll-margin-top:calc(var(--ge-barh,60px) + var(--ge-ownerbar-h,34px) + 90px); }
.gc-tabpanel[hidden]{ display:none !important; }

/* toolbar above a grid: filters left, balance right */
.gc-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--gc-s2) var(--gc-s3);
  padding:var(--gc-s3) 0; margin:0 0 var(--gc-s4);
  border-top:1px solid var(--gc-edge); border-bottom:1px solid var(--gc-edge);
}
.gc-toolbar .gc-spacer{ flex:1 1 auto; }
.gc-search{
  flex:1 1 200px; min-width:150px; max-width:300px; min-height:40px; padding:0 14px;
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-s);
  background:var(--gc-face-sunk); color:var(--sw-ink); font:500 13px/1.3 var(--gc-f-ui);
}
.gc-search::placeholder{ color:var(--sw-ink-3); }
.gc-search:focus{ outline:none; border-color:var(--gc-accent); box-shadow:0 0 0 3px rgba(var(--sw-accent-rgb),.18); }
.gc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.gc-chip{
  display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:0 14px;
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-pill);
  background:transparent; color:var(--sw-ink-2);
  font:700 10.5px/1 var(--gc-f-mono); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap;
}
.gc-chip:hover{ color:var(--sw-ink); border-color:var(--sw-ink-3); }
.gc-chip.active,.gc-chip[aria-pressed="true"]{ color:var(--sw-ink); border-color:var(--gc-accent); background:rgba(var(--sw-accent-rgb),.16); }
.gc-seg{ display:inline-flex; padding:3px; gap:3px; border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-s); background:var(--gc-face-sunk); }
.gc-seg > button{
  min-height:34px; padding:0 15px; border:0; border-radius:calc(var(--gc-r-s) - 3px); background:transparent; color:var(--sw-ink-2);
  font:700 10.5px/1 var(--gc-f-mono); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; white-space:nowrap; box-shadow:none;
}
.gc-seg > button:hover{ color:var(--sw-ink); background:transparent; }
.gc-seg > button.active,.gc-seg > button[aria-pressed="true"]{ color:#fff; background:linear-gradient(180deg,#b184ff,#8a4df0); box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
:root[data-theme="light"] .gc-seg > button.active{ background:linear-gradient(180deg,#8f5af0,#6a2ccf); }
.gc-balance{
  display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 15px;
  border:1px solid var(--ge-line-gold,var(--gc-edge-hi)); border-radius:var(--gc-r-pill); background:var(--gc-face);
  color:var(--sw-ink); font:700 12px/1 var(--gc-f-num); letter-spacing:.02em; white-space:nowrap;
}
.gc-balance::before{ content:"\25C6"; color:var(--gc-accent); font-size:12px; }
.gc-balance small{ color:var(--sw-ink-3); font:700 9.5px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; }

/* THE PICTURE CARD GRID */
.gc-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,252px),1fr)); gap:var(--gc-s4); }
.gc-grid-xl{ grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr)); gap:22px; }

.gc-card{
  position:relative; display:flex; flex-direction:column; min-width:0;
  border:1px solid var(--gc-edge); border-radius:var(--gc-r); overflow:hidden;
  background:var(--gc-face); box-shadow:var(--gc-shadow);
  transition:border-color .2s var(--ge-ease,ease),transform .22s var(--ge-ease-out,ease),box-shadow .25s var(--ge-ease,ease);
}
.gc-card::before{
  content:""; position:absolute; left:16px; right:16px; top:0; height:1px; z-index:2;
  background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent); pointer-events:none;
}
.gc-card:hover{ border-color:var(--gc-edge-hi); transform:translateY(-4px); box-shadow:var(--gc-shadow-hi); }
.gc-card.is-off{ opacity:.55; filter:grayscale(.55); }
.gc-card.is-off:hover{ transform:none; }

/* the picture well */
.gc-well{
  position:relative; display:block; width:100%; aspect-ratio:16/10; overflow:hidden; padding:0; margin:0;
  border:0; border-bottom:1px solid var(--gc-edge); border-radius:0; background:var(--gc-well);
  color:inherit; font:inherit; text-align:left; cursor:default;
}
button.gc-well{ cursor:zoom-in; }
button.gc-well:hover,button.gc-well:focus-visible{ background:var(--gc-well); border-color:var(--gc-edge); transform:none; }
.gc-well::after{
  content:""; position:absolute; left:12%; right:12%; bottom:7%; height:12%; border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.42),transparent); pointer-events:none;
}
:root[data-theme="light"] .gc-well::after{ background:radial-gradient(closest-side,rgba(27,21,38,.16),transparent); }
.gc-still{
  position:absolute; inset:3% 3% 1%; width:94%; height:96%; z-index:1;
  object-fit:contain; object-position:center bottom; pointer-events:none;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.35));
  transition:transform .35s var(--ge-ease-out,ease);
}
.gc-card:hover .gc-still{ transform:scale(1.035) translateY(-1%); }
.gc-duo{ position:absolute; inset:0; z-index:1; display:grid; grid-template-columns:1fr 1fr; align-items:end; padding:6% 4% 3%; gap:2%; }
.gc-duo .gc-still{ position:relative; inset:auto; width:100%; height:auto; max-height:100%; aspect-ratio:4/3; }
.gc-tier{
  position:absolute; top:12px; left:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:6px 9px; border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-xs);
  background:color-mix(in srgb,var(--sw-bg) 78%,transparent); color:var(--sw-ink-2);
  font:700 9.5px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gc-tier .ge-led{ width:7px; height:7px; }
.gc-tag{
  position:absolute; top:12px; right:12px; z-index:3; padding:6px 9px; border-radius:var(--gc-r-xs);
  background:var(--gc-accent); color:var(--sw-accent-ink,#fff); font:700 9.5px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase;
  box-shadow:0 8px 18px -8px rgba(var(--sw-accent-rgb),.9);
}
.gc-tag.is-quiet{ background:color-mix(in srgb,var(--sw-bg) 78%,transparent); color:var(--sw-ink-2); border:1px solid var(--gc-edge-hi); box-shadow:none; }
.gc-peek{
  position:absolute; right:12px; bottom:12px; z-index:3; display:inline-flex; align-items:center; gap:6px;
  padding:6px 9px; border-radius:var(--gc-r-xs); border:1px solid var(--gc-edge-hi);
  background:color-mix(in srgb,var(--sw-bg) 80%,transparent); color:var(--sw-ink-2);
  font:700 9.5px/1 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase;
  opacity:.0; transform:translateY(4px); transition:opacity .2s,transform .2s;
}
.gc-peek svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:1.8; }
.gc-card:hover .gc-peek,.gc-well:focus-visible .gc-peek{ opacity:1; transform:none; color:var(--sw-ink); border-color:var(--gc-accent); }
@media (hover:none){ .gc-peek{ opacity:1; transform:none; } }

/* the body under the picture */
.gc-body{ display:flex; flex:1 1 auto; flex-direction:column; gap:8px; padding:var(--gc-s4) var(--gc-s4) var(--gc-s4); }
.gc-name{
  margin:0; color:var(--sw-ink); font:700 var(--gc-t-item)/1.08 var(--gc-f-display) !important;
  letter-spacing:.01em; text-transform:uppercase; overflow-wrap:anywhere;
  /* a long species name ("Pachycephalosaurus" on a phone) breaks at a
     syllable with a hyphen (lang="de"), never mid-syllable */
  -webkit-hyphens:auto; hyphens:auto;
}
.gc-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; margin:0; color:var(--sw-ink-3); font:600 var(--gc-t-meta)/1.45 var(--gc-f-ui); }
.gc-meta b{ color:var(--sw-ink-2); font-weight:700; }
.gc-meta .gc-dot{ width:3px; height:3px; border-radius:50%; background:var(--sw-ink-3); }
.gc-facts{ display:grid; gap:6px; margin:2px 0 0; }
.gc-facts > div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:6px; border-bottom:1px solid var(--gc-edge); }
.gc-facts > div:last-child{ border-bottom:0; padding-bottom:0; }
.gc-facts dt{ color:var(--sw-ink-3); font:700 var(--gc-t-micro)/1.3 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; }
.gc-facts dd{ margin:0; color:var(--sw-ink); font:600 13px/1.3 var(--gc-f-num); text-align:right; }

/* THE TILL - the price IS the buy control */
.gc-till{ display:flex; align-items:stretch; gap:7px; margin-top:auto; padding-top:var(--gc-s2); min-width:0; }
.gc-price{
  display:flex; flex:1 1 auto; align-items:center; gap:7px; min-width:0; min-height:48px; padding:0 14px;
  border:1px solid rgba(var(--sw-accent-rgb),.55); border-radius:var(--gc-r-s);
  background:linear-gradient(180deg,rgba(var(--sw-accent-rgb),.16),rgba(var(--sw-accent-rgb),.05)),var(--gc-face-flat);
  color:var(--sw-ink); cursor:pointer; text-decoration:none; text-align:left; box-shadow:none;
  font:700 17px/1 var(--gc-f-num); letter-spacing:.01em; text-transform:none;
}
.gc-price .gc-coin{ color:var(--gc-accent-hi); font-size:12px; }
.gc-price b{ font-variant-numeric:tabular-nums; font-weight:700; }
.gc-price small{ color:var(--sw-ink-3); font:700 9px/1.2 var(--gc-f-mono); letter-spacing:.12em; text-transform:uppercase; }
.gc-price .gc-verb{
  margin-left:auto; padding:7px 11px; border-radius:calc(var(--gc-r-s) - 3px);
  background:linear-gradient(180deg,#b184ff,#8a4df0); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
  font:700 10.5px/1 var(--gc-f-mono); letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
}
/* the light theme's deeper gradient belongs to the live buy verb only: the
   sign-in and the greyed verbs keep their own faces in both themes (measured
   2026-10-05: before this the light theme painted violet on violet) */
:root[data-theme="light"] .gc-price:not(:disabled):not([aria-disabled="true"]):not(.is-signin) .gc-verb{ background:linear-gradient(180deg,#8f5af0,#6a2ccf); }
.gc-price:hover{ border-color:var(--gc-accent); background:linear-gradient(180deg,rgba(var(--sw-accent-rgb),.26),rgba(var(--sw-accent-rgb),.08)),var(--gc-face-flat); text-decoration:none; transform:none; }
/* a till that cannot sell: flat, quiet, still readable (no blanket opacity) */
.gc-price:disabled,.gc-price[aria-disabled="true"],
.gc-price:disabled:hover,.gc-price[aria-disabled="true"]:hover{ cursor:not-allowed; opacity:1; border-color:var(--gc-edge-hi); background:var(--gc-face-sunk); }
.gc-price:disabled .gc-verb,.gc-price[aria-disabled="true"] .gc-verb{ background:transparent; color:var(--sw-ink-2); border:1px solid var(--gc-edge-hi); box-shadow:none; }
.gc-price.is-prime{ border-color:rgba(var(--sw-accent-rgb),.85); }
.gc-price.is-signin .gc-verb{ background:transparent; color:var(--gc-accent-hi); border:1px solid rgba(var(--sw-accent-rgb),.6); box-shadow:none; }
:root[data-theme="light"] .gc-price.is-signin .gc-verb{ color:var(--gc-accent); }
.gc-pencil{
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 42px; width:42px; min-height:48px; padding:0;
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-s); background:transparent; color:var(--sw-ink-3); cursor:pointer;
}
.gc-pencil svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.gc-pencil:hover{ color:var(--gc-accent-hi); border-color:var(--gc-accent); background:transparent; }
.gc-why{ margin:0; color:var(--sw-ink-3); font:600 11.5px/1.45 var(--gc-f-ui); }

/* THE EMPTY STATE - one shape for every "nothing here" */
.gc-empty{
  display:grid; justify-items:center; gap:10px; padding:44px 22px; text-align:center;
  border:1px dashed var(--gc-edge-hi); border-radius:var(--gc-r); background:var(--gc-face-sunk); color:var(--sw-ink-2);
}
.gc-empty svg{ width:34px; height:34px; stroke:var(--gc-accent-hi); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.gc-empty h3{ margin:0; color:var(--sw-ink); font:700 20px/1.15 var(--gc-f-display) !important; text-transform:uppercase; }
.gc-empty p{ margin:0; max-width:52ch; font:500 13.5px/1.6 var(--gc-f-ui); }
.gc-empty[hidden]{ display:none !important; }

/* THE DIALOG SHAPE - the framework's buy dialog, used by every modal */
.gc-modal{
  position:fixed; inset:0; z-index:1250; display:grid; place-items:center; padding:14px;
  background:var(--gc-scrim); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.gc-modal[hidden]{ display:none !important; }
.gc-panel{
  position:relative; width:min(620px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); overflow:auto;
  display:flex; flex-direction:column; gap:var(--gc-s3); padding:28px;
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r); background:var(--gc-face); color:var(--sw-ink);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.95);
}
.gc-panel::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent); }
.gc-panel h3,.gc-panel .gc-panel-title{ margin:0; color:var(--sw-ink); font:700 var(--gc-t-panel)/1.1 var(--gc-f-display) !important; text-transform:uppercase; letter-spacing:.01em; }
.gc-what{ margin:0; color:var(--sw-ink-2); font:500 13px/1.65 var(--gc-f-ui); }
.gc-lines{ display:grid; grid-template-columns:auto 1fr; gap:8px 16px; margin:4px 0 0; padding-top:var(--gc-s3); border-top:1px solid var(--gc-edge); }
.gc-lines dt{ color:var(--sw-ink-3); font:700 var(--gc-t-micro)/1.5 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; }
.gc-lines dd{ margin:0; text-align:right; color:var(--sw-ink); font:700 14px/1.45 var(--gc-f-num); font-variant-numeric:tabular-nums; }
.gc-lines dd.is-short{ color:var(--sw-bad); }
.gc-note{ margin:0; min-height:1.3em; color:var(--sw-ink-2); font:600 13px/1.5 var(--gc-f-ui); }
.gc-note.is-ok{ color:var(--sw-ok); }
.gc-note.is-bad{ color:var(--sw-bad); }
.gc-actions{
  position:sticky; bottom:-28px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px;
  margin:4px -28px -28px; padding:16px 28px 24px; border-top:1px solid var(--gc-edge);
  background:var(--gc-face-flat);
}
.gc-x{
  position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0; border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r-s);
  background:transparent; color:var(--sw-ink-2); font:600 20px/1 var(--gc-f-ui); cursor:pointer;
}
.gc-x:hover{ color:var(--sw-ink); border-color:var(--gc-accent); background:transparent; }

/* hero strip with rule chips (the Kadaver tab's head) */
.gc-hero{
  position:relative; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--gc-s5); align-items:center;
  padding:var(--gc-s5) clamp(18px,3vw,34px); margin:0 0 var(--gc-s5);
  border:1px solid var(--gc-edge-hi); border-radius:var(--gc-r); overflow:hidden;
  background:radial-gradient(90% 140% at 100% 0%,rgba(var(--sw-accent-rgb),.22),transparent 60%),var(--gc-face);
  box-shadow:var(--gc-shadow);
}
.gc-hero::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent); }
.gc-hero .gc-sec{ font-size:clamp(28px,3.6vw,42px); }
.gc-hero p{ margin:var(--gc-s2) 0 0; color:var(--sw-ink-2); font:500 14.5px/1.65 var(--gc-f-ui); max-width:56ch; }
.gc-rules{ display:grid; gap:10px; }
.gc-rule{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  border:1px solid var(--gc-edge); border-radius:var(--gc-r-s); background:var(--gc-face-sunk);
}
.gc-rule svg{ width:20px; height:20px; flex:none; stroke:var(--gc-accent-hi); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gc-rule b{ display:block; color:var(--sw-ink); font:700 13.5px/1.25 var(--gc-f-ui); }
.gc-rule span{ display:block; color:var(--sw-ink-3); font:700 9.5px/1.4 var(--gc-f-mono); letter-spacing:.14em; text-transform:uppercase; }

/* the big till (Kadaver cards) */
.gc-card-xl .gc-well{ aspect-ratio:16/9; }
.gc-card-xl .gc-name{ font-size:clamp(24px,2.4vw,30px) !important; }
.gc-card-xl .gc-price{ min-height:56px; font-size:20px; }
.gc-card-xl .gc-price .gc-verb{ padding:9px 14px; font-size:11.5px; }

/* THE RAIL'S STEP. The Overlay tab is one more word on the top rail. The
   step between tabs and a hair of the labels' tracking (.12em -> .10em) give
   that width back, so the rail keeps one line at the widths it did before
   (players from 1366px, admins from 1440px, measured with a real scrollbar)
   instead of dropping to the second deck early. navfit.js still measures and
   still decks below that. The landing's header carries a wider account
   cluster, so its step is the smaller one. */
@media (min-width:861px){
  .topbar-apex .nav{ gap:clamp(12px,.88vw,14px) !important; }
  .gebrand-links{ gap:clamp(10px,.72vw,14px) !important; }
  .topbar-apex .nav a > span:not(.nav-ico),
  .gebrand-links a > span:not(.nav-ico){ letter-spacing:.1em !important; }
}

/* ---- responsive ---------------------------------------------------- */
@media (max-width:860px){
  .gc-hero{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  .gc-cats{ gap:7px; }
  .gc-cat{ min-height:48px; padding:0 15px 0 12px; font-size:11.5px; letter-spacing:.1em; gap:8px; }
  .gc-cat svg{ width:17px; height:17px; }
  .gc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .gc-grid-xl{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .gc-body{ padding:12px 11px 12px; gap:6px; }
  .gc-name{ font-size:17px !important; }
  .gc-card-xl .gc-name{ font-size:24px !important; }
  .gc-meta{ font-size:10.5px; }
  .gc-price{ min-height:44px; padding:0 9px; font-size:14px; gap:5px; }
  .gc-price small{ display:none; }
  .gc-price .gc-verb{ padding:6px 8px; font-size:9.5px; letter-spacing:.08em; }
  .gc-card-xl .gc-price{ min-height:52px; font-size:18px; }
  .gc-card-xl .gc-price small{ display:inline; }
  .gc-pencil{ flex-basis:34px; width:34px; min-height:44px; }
  .gc-tier,.gc-tag,.gc-peek{ top:8px; left:8px; padding:4px 6px; font-size:8px; letter-spacing:.1em; }
  .gc-tag{ left:auto; right:8px; }
  .gc-peek{ top:auto; left:auto; right:8px; bottom:8px; }
  .gc-panel{ padding:20px; }
  .gc-actions{ bottom:-20px; margin:4px -20px -20px; padding:14px 20px 18px; }
  .gc-panel h3,.gc-panel .gc-panel-title{ font-size:22px !important; }
  .gc-toolbar{ gap:8px; }
  .gc-search{ max-width:none; flex-basis:100%; }
}
@media (max-width:360px){
  .gc-grid{ grid-template-columns:minmax(0,1fr); }
  .gc-cat{ padding:0 12px 0 10px; }
}
@media (prefers-reduced-motion:reduce){
  .gc-card,.gc-still,.gc-cat,.gc-peek{ transition:none !important; }
  .gc-card:hover,.gc-cat:hover{ transform:none; }
  .gc-card:hover .gc-still{ transform:none; }
  .gc-cat.gc-cat-hot:not([aria-selected="true"]){ animation:none; }
}

/* ---- 3. THE SITE-WIDE PASS (html.gc) ---------------------------------
   Light touch: the older pages keep their markup and scripts; their
   surfaces simply take the register's corners, faces, edges and shadow so
   no tab looks like a different site. */
html.gc .sw-card,
html.gc .ge-panel,
html.gc .panel,
html.gc .card,
html.gc .item-card,
html.gc .gedock-grid > *,
html.gc .gejoin-steps > *{
  border-radius:var(--gc-r) !important;
  border-color:var(--gc-edge) !important;
  box-shadow:var(--gc-shadow) !important;
}
html.gc .ge-panel,html.gc .card,html.gc .item-card,html.gc .panel{ background:var(--gc-face) !important; }
html.gc .sw-card:hover,html.gc .gedock-grid > *:hover{ border-color:var(--gc-edge-hi) !important; box-shadow:var(--gc-shadow-hi) !important; }
html.gc .modal-backdrop{ background:var(--gc-scrim); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
html.gc .modal-card{
  position:relative; border-radius:var(--gc-r) !important; border:1px solid var(--gc-edge-hi) !important;
  background:var(--gc-face) !important; box-shadow:0 40px 90px -40px rgba(0,0,0,.95) !important; padding:26px !important;
}
html.gc .modal-card::before{ content:""; position:absolute; left:18px; right:18px; top:0; height:1px; background:linear-gradient(90deg,transparent,var(--gc-chisel),transparent); }
html.gc .modal-card h3{ font:700 24px/1.12 var(--gc-f-display) !important; text-transform:uppercase; letter-spacing:.01em; }
html.gc .modal-actions{ padding-top:var(--gc-s3); border-top:1px solid var(--gc-edge); }
html.gc .ge-btn,
html.gc .sw-btn,
html.gc .button,
html.gc a.button,
html.gc button.button{ border-radius:var(--gc-r-s) !important; }
html.gc .ge-chip,html.gc .sw-pill,html.gc .chips-pill{ border-radius:var(--gc-r-pill) !important; }
html.gc .sw-chip,html.gc .rarity-ribbon{ border-radius:var(--gc-r-xs) !important; }
html.gc .ge-scope input[type="text"],html.gc .ge-scope input[type="number"],html.gc .ge-scope select,
html.gc input[type="search"]{ border-radius:var(--gc-r-s); }
html.gc .ge-table th{ font-family:var(--gc-f-mono) !important; font-size:var(--gc-t-micro); letter-spacing:.14em; }
html.gc .page-footer{ border-top:1px solid var(--gc-edge); }

/* 2026-10-05 planner fix (Ishaq: "ui bugged here"): the till row overflowed for admins (price + Kaufen + pencil are
   wider than a card) and for signed-out visitors (Anmelden). The row and the price control may wrap, the "Datenchips"
   word steps aside while the admin pencil is present, and nothing paints outside its own box. */
.gc-till{ flex-wrap:wrap; }
.gc-price{ flex-wrap:wrap; row-gap:6px; padding-top:6px; padding-bottom:6px; min-width:0; max-width:100%; overflow:hidden; }
.gc-price b,.gc-price small,.gc-price .gc-verb{ white-space:nowrap; }
.gc-till:has(.gc-pencil) .gc-price small{ display:none; }
.gc-pencil{ flex:0 0 42px; }
.gc-price.is-signin small{ display:none; }   /* signed out: one line like the admin view */