/* =========================================================================
   AION — "Marble & Blood"
   DayZ apocalypse survival x greek antiquity. Ruined temple aesthetic:
   cracked marble, oxidised gold, verdigris teal, dried blood.
   Palette lifted straight from the AION crest.
   ========================================================================= */

/* Schriften liegen selbst gehostet unter /fonts. Vorher kamen sie per @import
   von aussen mit display=swap: erst stand die breitere Ersatzschrift da, dann
   sprang der Kopf beim Nachladen sichtbar um. block + Preload im HTML heisst:
   der Text erscheint gleich in der richtigen Schrift. */
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/cinzel-400.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/cinzel-600.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/cinzel-700.woff2') format('woff2'); }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 900; font-display: swap; src: url('/fonts/cinzel-900.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/barlow-condensed-300.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-condensed-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-condensed-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/special-elite-400.woff2') format('woff2'); }

:root {
  /* ground */
  --bg:          #070806;
  --bg-2:        #0c0d0b;
  --bg-panel:    #121310;
  --bg-panel-2:  #1a1a16;
  --border:      #2c2a22;
  --border-lit:  #6b6047;
  /* Kartengrund: hebt sich klar vom Seitengrund ab, statt darin zu verschwinden. */
  --card-top:    #1c1e1a;
  --card-bot:    #141613;
  --card-border: #756a4e;
  --pack-border: #b04444;
  --pack-text:   #f0a3a3;

  /* crest colours */
  --gold:        #c9a961;
  --gold-bright: #e8d09a;
  --gold-dim:    #7d6835;
  --teal:        #1f5f66;
  --teal-bright: #3d9aa0;
  --blood:       #8f1616;
  --blood-bright:#c62828;
  --blood-dark:  #4a0d0d;
  --marble:      #ece6d8;
  /* Teal war auf dem dunklen Kartengrund zu schwach fuer 11px-Labels. */
  --teal-label:  #5fb9bf;

  /* type */
  /* Raised twice now. On a dark, textured, vignetted background the old values
     measured fine in isolation and still read as washed out in practice. */
  --text:        #d2ccbc;
  --text-dim:    #a49c8b;
  --text-bright: #ece6d8;
  --ok:          #5f9a52;

  --serif: 'Cinzel', Georgia, serif;
  --body:  'Barlow Condensed', 'Oswald', sans-serif;
  --type:  'Special Elite', monospace;

  --meander: url('/img/meander.svg');
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  font-weight: 400;
  min-height: 100%;
}

/* The wall travels with the page. background-attachment stays at its default
   (scroll) on the tile deliberately: a fixed backdrop sits still while you
   scroll past it, which is the opposite of feeling like you are moving through
   a place. The coloured haze above it stays fixed so it reads as light in the
   air rather than paint on the stone. */
body {
  background-image:
    radial-gradient(900px 520px at 18% -8%,  rgba(31,95,102,0.14), transparent 70%),
    radial-gradient(800px 480px at 84% -4%,  rgba(143,22,22,0.14), transparent 70%),
    url('/img/bg-wall.svg'),
    linear-gradient(180deg, #0a0b09 0%, #070806 40%);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat;
  background-size: auto, auto, 600px 900px, auto;
  background-attachment: fixed, fixed, scroll, fixed;
}

/* film grain + scanline haze, sits over everything, ignores clicks */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.32'/></svg>");
}

/* corner vignette — the world closing in */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 998; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,0.72) 100%);
}

h1, h2, h3, .display {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-bright);
  text-transform: uppercase;
  margin: 0 0 14px;
}

p { line-height: 1.65; }

a { color: var(--gold); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--gold-bright); }

.container { max-width: 1140px; margin: 0 auto; padding: 0 24px; }

/* ---------- shared ornaments ---------- */

/* horizontal greek-key strip. put on ::before/::after of anything. */
.meander-strip,
.meander-top::before,
.meander-bottom::after {
  content: "";
  display: block;
  height: 18px;
  background: var(--meander) repeat-x center;
  opacity: 0.45;
}
.meander-bottom::after { transform: scaleY(-1); }

/* four-point star from the crest, as a divider */
.ornament {
  display: flex; align-items: center; gap: 16px;
  margin: 40px 0;
  color: var(--gold-dim);
}
.ornament::before, .ornament::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.ornament i {
  width: 10px; height: 10px; background: var(--blood-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(198,40,40,0.7);
}

/* ---------- header ---------- */
header.site {
  /* Above the grain and vignette overlays (998/999). They were drawing their
     scanlines straight across the wordmark, which read as a rendering fault. */
  position: sticky; top: 0; z-index: 1000;
  /* Opaque enough that nav text never competes with whatever scrolls under it. */
  background: linear-gradient(180deg, #0a0c09 0%, #060705 100%);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #5a5140;
  box-shadow: 0 6px 24px rgba(0,0,0,0.55);
}
header.site::after {
  content: "";
  display: block; height: 12px;
  background: var(--meander) repeat-x center;
  background-size: auto 12px;
  opacity: 0.32;
}
header.site .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px;
  /* Vertical only. The shorthand form wiped the container is side padding, so
     the nav sat flush against the screen edge on anything narrow. */
  padding-top: 12px; padding-bottom: 12px;
}
.logo { display: inline-flex; align-items: center; gap: 13px; }
/* One word. Tracking stays tight enough that it never reads as "AI ON". */
.logo-word {
  font-family: var(--serif); font-weight: 900;
  font-size: 33px; line-height: 1;
  letter-spacing: 0.11em;
  /* Brighter, and a shorter range than before: the old gradient ran to a dark
     bronze at the baseline, which is what made it read as washed out. */
  background: linear-gradient(180deg, #ffffff 0%, #f7e6b8 45%, #e2bf70 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.95)) drop-shadow(0 0 14px rgba(232,208,154,0.6)) drop-shadow(0 0 34px rgba(201,169,97,0.4));
}
.logo-mark {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--gold-bright);
  box-shadow: 0 0 0 3px rgba(7,8,6,1), 0 0 12px rgba(232,208,154,0.55), 0 0 28px rgba(201,169,97,0.45);
  filter: brightness(1.22) contrast(1.1) saturate(1.12);
  background: #0c0d0b;
  transition: box-shadow 0.3s, transform 0.5s cubic-bezier(.2,.7,.3,1);
}
.logo:hover .logo-mark {
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 0 0 3px rgba(7,8,6,1), 0 0 26px rgba(201,169,97,0.5);
}

/* every nav item — links and the signed-in name — shares one baseline */
nav.main {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 26px;
  font-family: var(--body); font-weight: 500;
  font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1;
}
nav.main a {
  position: relative;
  color: var(--text-bright);
  font: inherit; letter-spacing: inherit;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
nav.main a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px;
  height: 1px; background: var(--blood-bright); transition: right 0.22s;
}
nav.main a:hover { color: var(--text-bright); }
nav.main a:hover::after { right: 0; }
nav.main a.current { color: var(--gold-bright); }
nav.main a.current::after { right: 0; background: var(--gold-dim); }

.auth-slot { display: inline-flex; align-items: center; gap: 18px; }
.nav-user {
  display: inline-flex; align-items: center; gap: 8px;
  color: #5cc0c4;
  font: inherit; letter-spacing: inherit;
}
.nav-user::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-bright);
  box-shadow: 0 0 8px var(--teal-bright);
  animation: pulse-dot 2.6s ease-in-out infinite;
}
@keyframes pulse-dot { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
.nav-login { color: var(--gold); }

/* only ever rendered for allowlisted accounts */
.nav-admin {
  color: var(--gold-bright);
  border: 1px solid var(--gold-dim);
  padding: 5px 12px;
}
.nav-admin::after { display: none; }
.nav-admin:hover { border-color: var(--gold); background: rgba(201,169,97,0.1); }

/* ---------- test mode banner ---------- */
.testbar {
  position: relative; z-index: 60;
  background: repeating-linear-gradient(135deg, #2a1c05 0 14px, #241705 14px 28px);
  border-bottom: 1px solid var(--gold-dim);
  font-family: var(--type); font-size: 13px; color: #e6cf9a;
}
.testbar .container {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-top: 9px; padding-bottom: 9px;
}
.testbar b {
  font-family: var(--serif); font-weight: 700;
  letter-spacing: 0.2em; color: var(--gold-bright);
  text-transform: uppercase; white-space: nowrap;
}
.testbar span { color: #cbb583; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 74px 0 96px;
  text-align: center;
  overflow: hidden;
}
/* faint stone columns flanking the crest */
.hero::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(236,230,216,0.045) 0 2px, transparent 2px 16px);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, #000 100%);
}
.hero-emblem {
  position: relative;
  max-width: 380px; width: 62%; height: auto;
  margin: 0 auto 22px;
  display: block;
  filter:
    drop-shadow(0 0 30px rgba(201,169,97,0.28))
    drop-shadow(0 0 60px rgba(143,22,22,0.22));
  animation: emblem-breathe 7s ease-in-out infinite;
}
@keyframes emblem-breathe {
  0%, 100% { filter: drop-shadow(0 0 26px rgba(201,169,97,0.22)) drop-shadow(0 0 54px rgba(143,22,22,0.18)); }
  50%      { filter: drop-shadow(0 0 40px rgba(201,169,97,0.38)) drop-shadow(0 0 74px rgba(143,22,22,0.30)); }
}
@media (prefers-reduced-motion: reduce) { .hero-emblem { animation: none; } }

.hero .kicker {
  font-family: var(--type);
  font-size: 13px; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--teal-bright);
  margin: 0 0 14px;
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 78px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  background: linear-gradient(180deg, #f7f2e6 0%, #d6cdb8 46%, #8d8474 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.hero .sub {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(15px, 2vw, 20px);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--blood-bright);
  margin: 0 0 22px;
}
.hero p.tagline {
  font-family: var(--type);
  color: var(--text);
  font-size: 16px; line-height: 1.8;
  max-width: 700px; margin: 0 auto 32px;
}
.hero .cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* blood running off the bottom edge of the hero */
.hero .bleed {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 54px;
  background: url('/img/drip.svg') repeat-x bottom center;
  background-size: 600px 54px;
  opacity: 0.55; pointer-events: none;
}

/* =========================================================================
   CONNECT PANEL
   The address, the population and the way in. This is the single thing a
   player came here to find, so it sits directly under the hero and is the
   loudest block on the page after the crest.
   ========================================================================= */
.connect { padding: 0 0 40px; }
.connect-panel {
  position: relative;
  margin: -34px auto 0;
  max-width: 1140px;
  background:
    linear-gradient(180deg, rgba(201,169,97,0.07), transparent 40%),
    linear-gradient(180deg, rgba(18,19,16,0.97), rgba(10,11,9,0.97));
  border: 1px solid var(--border-lit);
  box-shadow: 0 22px 60px rgba(0,0,0,0.7);
  padding: 40px 40px 34px;
}
.connect-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: var(--meander) repeat-x center; background-size: 12px 12px;
  opacity: 0.35;
  animation: meander-drift 9s linear infinite;
}

.connect-status {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--type); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--text);
  margin-bottom: 30px;
}
.connect-status .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--text-dim); box-shadow: 0 0 8px currentColor;
}
.connect-status.online { color: var(--ok); }
.connect-status.online .dot { background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: pulse-dot 2s ease-in-out infinite; }
.connect-status.offline { color: var(--blood-bright); }
.connect-status.offline .dot { background: var(--blood-bright); }
.connect-status.maintenance, .connect-status.soon { color: var(--gold); }
.connect-status.maintenance .dot, .connect-status.soon .dot { background: var(--gold); }
.connect-status .livetag {
  font-size: 10px; letter-spacing: 0.16em;
  border: 1px solid currentColor; padding: 1px 6px; opacity: 0.75;
}

.connect-main {
  /* Flex statt Grid: wird es eng (deutsche Beschriftungen, schmale Fenster),
     rutscht der Knopf in eine eigene Zeile, statt rechts aus dem Rahmen zu
     laufen. Die Adresse bleibt einzeilig, sie wird abgelesen und kopiert. */
  display: flex; flex-wrap: wrap;
  gap: 26px 34px;
  align-items: flex-end;
}
.connect-block { flex: 0 1 auto; min-width: 0; }
/* Der Knopf sitzt ab 861px fest rechts in der Mitte des Rahmens, die drei
   Bloecke laufen links davon. So bleibt die Leiste bei jeder Breite und in
   jeder Sprache einzeilig, ohne dass etwas aus dem Rahmen ragt. */
.connect-panel { position: relative; }
@media (min-width: 1100px) {
  .connect-main { padding-right: 290px; }
  .connect-cta { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); margin: 0; }
}
.connect-label {
  font-family: var(--type); font-size: 11.5px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 14px;
}

/* The address is the thing people copy, so it is set big and monospaced. */
.connect-ip { display: flex; align-items: center; gap: 12px; }
.connect-ip code {
  font-family: 'Courier New', monospace;
  font-size: clamp(18px, 1.9vw, 25px);
  font-weight: 700; letter-spacing: 0.02em;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(201,169,97,0.25);
  white-space: nowrap;
}
.connect-ip.pending code { color: var(--text-dim); font-weight: 400; font-size: 20px; text-shadow: none; }
.copy {
  flex: none;
  background: transparent; border: 1px solid var(--border-lit);
  color: var(--text); cursor: pointer;
  font-family: var(--body); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 12px;
  transition: border-color 0.15s, color 0.15s;
}
.copy:hover { border-color: var(--gold); color: var(--gold-bright); }

.connect-count { display: inline-flex; align-items: baseline; gap: 6px; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); font-family: var(--serif); font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; }
.connect-count b { font-size: 20px; color: var(--marble); }
.connect-count b.muted { color: var(--text-dim); }
.connect-count .of { font-family: var(--type); font-size: 12px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }
.connect-map {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(18px, 2vw, 24px); color: var(--marble);
  text-transform: uppercase; letter-spacing: 0.05em;
}

.connect-cta { align-self: end; justify-self: end; }
.btn.join { white-space: nowrap; }
.btn.join.disabled {
  background: transparent;
  border-color: var(--border-lit);
  color: var(--text-dim);
  cursor: not-allowed;
  box-shadow: none;
}
.btn.join.disabled::after { display: none; }
.btn.join.disabled:hover { transform: none; border-color: var(--border-lit); color: var(--text-dim); box-shadow: none; }

.connect-note {
  margin: 32px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-family: var(--type); font-size: 13px; color: var(--text-dim);
}

/* Unter 1180px passen Adresse, Zahl, Karte und Knopf nicht mehr nebeneinander:
   der Knopf bekommt eine eigene Zeile, statt rechts aus dem Rahmen zu laufen. */
@media (max-width: 860px) {
  .connect-main { gap: 22px 32px; }
  .connect-block:first-child { flex-basis: 100%; }
  .connect-cta { flex-basis: 100%; margin-left: 0; }
  .btn.join { width: 100%; text-align: center; }
  /* narrow screens: let it scroll sideways rather than break the number apart */
  .connect-ip { overflow-x: auto; }
}

/* ---------- stat bar ---------- */
.statbar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(18,19,16,0.9), rgba(7,8,6,0.9));
}
.statbar .row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat { padding: 20px 16px; text-align: center; border-right: 1px solid var(--border); }
.stat:last-child { border-right: 0; }
/* Fixed box rather than fixed font size: the worded value is set smaller than
   the numbers, and without this the label under it rides up out of line. */
.stat b {
  display: flex; align-items: center; justify-content: center;
  min-height: 30px; margin-bottom: 6px;
  font-family: var(--serif); font-weight: 700; font-size: 24px;
  color: var(--gold-bright); letter-spacing: 0.06em;
  line-height: 1;
}
/* a worded value instead of a number, so it needs to come down a size */
.stat b.phrase { font-size: 19px; letter-spacing: 0.04em; white-space: nowrap; }
.stat span { display: block; }
.stat span {
  font-family: var(--type); font-size: 11.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-dim);
}

/* ---------- sections ---------- */
section { padding: 64px 0; }
section > .container > h2,
section > h2 {
  position: relative;
  font-size: clamp(26px, 3.4vw, 38px);
  display: inline-block;
  margin-bottom: 26px;
  padding-bottom: 14px;
  background: none;
}
/* Runs the full width of the heading. The h2 is inline-block, so left/right 0
   is exactly the word, not the column. */
section > .container > h2::after,
section > h2::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 18px;
  background: var(--meander) repeat-x center center;
  background-size: 18px 18px;
  opacity: 0.8;
}
.lead { color: var(--text); max-width: 660px; font-size: 17px; }

/* Body copy sits over a live backdrop that changes as you scroll, so it cannot
   rely on the background staying dark behind it. */
.lead, .hero p.tagline, .feature p, .bundle-tagline, footer.site p {
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}

/* lore block — fluted column down the left */
.lore {
  position: relative;
  padding: 26px 0 26px 34px;
  max-width: 720px;
}
.lore::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 12px;
  background:
    repeating-linear-gradient(90deg,
      rgba(236,230,216,0.20) 0 1px,
      transparent 1px 4px);
  border-left: 2px solid var(--gold-dim);
  border-right: 1px solid var(--border);
}
.lore q, .lore .quote {
  display: block;
  font-family: var(--serif); font-weight: 600; font-style: normal;
  font-size: clamp(18px, 2.4vw, 24px);
  line-height: 1.5;
  color: var(--marble);
  letter-spacing: 0.03em;
  quotes: none;
}
.lore .attrib {
  margin-top: 14px;
  font-family: var(--type); font-size: 12px;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal-bright);
}

/* feature tiles */
/* Sechs Kacheln: drei je Reihe, damit keine zwei allein unten stehen. */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .features { grid-template-columns: 1fr; } }
.feature {
  position: relative;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--card-border);
  padding: 24px 22px;
}
.feature::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  /* one metal, not three: a gold edge that fades out at both ends */
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold-bright) 50%, var(--gold) 70%, transparent);
  opacity: 0.55;
}
.feature h3 { font-size: 19px; color: var(--gold-bright); margin-bottom: 8px; }
.feature p { color: var(--text); font-size: 16px; margin: 0; }

/* ---------- buttons ---------- */
.btn {
  position: relative; overflow: hidden;
  display: inline-block;
  padding: 14px 34px;
  /* Porphyr statt Signalrot. Der alte Button war eine flache rote Flaeche mit
     heller Kante - das lauteste Element der Seite, lauter als das Wappen, und
     das einzige, das nach Web-Framework aussah statt nach Aion. Dieselbe
     Markenfarbe, aber als Material gedacht: dunkler roter Stein, in den das
     Wort eingelassen ist. */
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), transparent 42%),
    linear-gradient(180deg, #7c1a17 0%, #4d1210 58%, #340c0b 100%);
  color: var(--marble);
  border: 1px solid rgba(201,169,97,0.62);
  font-family: var(--serif); font-weight: 700;
  font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,0.75);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,236,206,0.2),       /* Lichtkante oben */
    inset 0 -10px 18px rgba(0,0,0,0.3),        /* Tiefe unten */
    0 2px 0 rgba(0,0,0,0.55),                  /* der Stein steht auf der Wand */
    /* Muss gegen die Seiten-Vignette bestehen: auf hohen Viewports faellt der
       dunkle Rand des Radialverlaufs genau auf die Hero-Buttons, und eine
       dunkle Plakette verschwindet darin einfach. Der alte Signalrot-Knopf
       ueberlebte das nur, weil er so laut war. */
    0 0 16px rgba(201,169,97,0.12);
  transition: box-shadow 0.2s, transform 0.12s, border-color 0.2s, color 0.2s;
}

/* Innere Haarlinie: die zweite Rahmenlinie macht aus einer Schaltflaeche eine
   gravierte Tafel. Ein Rahmen allein wirkt gezeichnet, zwei wirken gefertigt. */
.btn:not(.btn-scroll)::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(201,169,97,0.3);
  pointer-events: none;
  transition: border-color 0.2s;
}

/* The scroll buttons use ::after for their bottom rod, and this rule kept
   bleeding into it — three separate bugs so far from inherited top/left/width.
   Excluding them here ends the whole class of problem. */
.btn:not(.btn-scroll)::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 40%;
  /* Gold statt Weiss: ein weisser Streifen ueber rotem Stein liest sich als
     Glasscheibe, ein goldener als Licht auf Blattgold. */
  background: linear-gradient(100deg, transparent, rgba(230,199,133,0.20), transparent);
  transform: skewX(-18deg);
  transition: left 0.5s ease;
}
/* Nur die Steintafel-Knoepfe. Die Schriftrolle war hier mitgemeint und hat
   sich beim Hovern die weisse Schrift (#fff6e2), den roten Glut-Schatten und
   die Goldkante der Tafel geerbt - deshalb war das Label auf dem offenen
   Blatt weiss auf Creme und hinter der Rolle lag ein roter Kasten. */
.btn:not(.btn-scroll):hover {
  color: #fff6e2;
  border-color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,236,206,0.2),
    inset 0 -10px 20px rgba(0,0,0,0.3),
    inset 0 0 24px rgba(143,22,22,0.45),       /* Glut von innen */
    0 2px 0 rgba(0,0,0,0.55),
    0 0 26px rgba(201,169,97,0.22);            /* Fackellicht faengt die Kante */
  transform: translateY(-1px);
}
.btn:not(.btn-scroll):hover::before { border-color: rgba(201,169,97,0.45); }
.btn:not(.btn-scroll):hover::after { left: 130%; }

/* Gedrueckt heisst hier: in die Wand gedrueckt. Der Sockelschatten verschwindet,
   die Lichtkante wandert nach unten. */
/* ebenfalls nur die Steintafel: die Rolle hat ihren eigenen Stempel-Effekt */
.btn:not(.btn-scroll):active {
  transform: translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,0.6),
    inset 0 -1px 0 rgba(255,236,206,0.08);
}

/* Fehlte bisher komplett: wer per Tastatur navigiert, sah gar nicht, wo er
   steht. Goldener Ring aussen, damit er sich vom Rahmen selbst abhebt. */
.btn:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

/* Sekundaer: derselbe Stein, nur ungefaerbt und ohne Glut. Die Rangfolge
   entsteht ueber das Material, nicht ueber Groesse oder Schreierei. */
.btn.secondary {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 42%),
    linear-gradient(180deg, #16181a 0%, #0d0f10 100%);
  border-color: rgba(201,169,97,0.32);
  color: var(--gold);
}
.btn.secondary:hover {
  border-color: var(--gold-bright); color: var(--gold-bright);
  box-shadow:
    inset 0 1px 0 rgba(255,236,206,0.14),
    inset 0 -10px 18px rgba(0,0,0,0.3),
    0 2px 0 rgba(0,0,0,0.55),
    0 0 22px rgba(201,169,97,0.2);
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ---------- skin grid ---------- */
.filters { display: flex; gap: 10px; margin-bottom: 26px; flex-wrap: wrap; }
/* Same stone language as the buttons, one step quieter: a filter is a
   setting, not a call to action, so it gets the plaque but not the porphyry. */
.filters button {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 45%),
    linear-gradient(180deg, #1e211d 0%, #14160f 100%);
  border: 1px solid rgba(201,169,97,0.42);
  color: var(--text);
  padding: 9px 22px;
  font-family: var(--body); font-weight: 600;
  text-transform: uppercase; font-size: 15px; letter-spacing: 0.14em;
  box-shadow: inset 0 1px 0 rgba(255,236,206,0.07), 0 1px 0 rgba(0,0,0,0.5);
  cursor: pointer;
}
.filters button:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.filters button:hover { border-color: var(--gold-dim); color: var(--text); }
.filters button.active {
  border-color: var(--gold); color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(201,169,97,0.2), rgba(201,169,97,0.06));
  box-shadow: inset 0 0 18px rgba(201,169,97,0.14), 0 0 0 1px rgba(201,169,97,0.18);
}

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

.card {
  position: relative; display: block;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-2));
  border: 1px solid var(--border);
  overflow: hidden;
  color: var(--text);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
/* gold corner brackets — appear on hover */
.card::before, .card::after {
  content: ""; position: absolute; width: 18px; height: 18px;
  border: 1px solid var(--gold); opacity: 0; transition: opacity 0.18s;
  pointer-events: none; z-index: 2;
}
.card::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.card::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }
.card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,169,97,0.12);
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  background: var(--bg-panel-2);
  filter: saturate(0.85) contrast(1.05);
  transition: filter 0.25s, transform 0.35s;
}
.card:hover img { filter: saturate(1.05) contrast(1.1); transform: scale(1.03); }
.card .body { padding: 16px; border-top: 1px solid var(--card-border); }
/* Der Slot, den der Artikel belegt - steht neben der Kategorie, weil
   "KILLFEED" bei der Haelfte des Katalogs draufsteht und nichts unterscheidet. */
.card .cat .axis {
  padding: 2px 7px;
  border: 1px solid rgba(201,169,97,0.55);
  color: var(--gold-bright); letter-spacing: 0.12em; font-size: 11px;
  text-transform: uppercase; white-space: nowrap;
}
.card .cat {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--type);
  font-size: 12.5px; color: var(--teal-label);
  text-transform: uppercase; letter-spacing: 0.18em;
}
/* Lange Einzelwoerter ("Nightcrawler") sprengen sonst die schmale
   Handy-Spalte. */
.card h3 { font-size: 20px; line-height: 1.25; margin: 9px 0 10px; color: var(--text-bright); overflow-wrap: break-word; }
.card .price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid rgba(201,169,97,0.22);
  font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1;
  color: #f1dfae; letter-spacing: 0.04em;
  text-shadow: 0 0 14px rgba(201,169,97,0.18);
}

/* ---------- bundle "stelae" ---------- */
/* auto-fit, not auto-fill: four wipe tiers should sit on one row rather than
   leaving the last one stranded alone underneath. */
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr)); gap: 20px; align-items: stretch; }
.bundle-card {
  position: relative;
  /* not overflow:hidden — the button rods sit just outside their box */
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 30px 22px 26px;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(201,169,97,0.05), transparent 30%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-2));
  border: 1px solid var(--border);
  /* clipped top corners — a stone tablet, not a web card */
  clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px);
  transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
}
/* Die Karten stehen nebeneinander, also muessen die Rollen auf einer Linie
   liegen. Der Textblock war ein normaler Block, damit lief das margin-top:auto
   des Knopfes ins Leere: jede Karte setzte ihre Rolle dort ab, wo ihr Text
   endete - eine Zeile Tagline mehr oder weniger, und die Reihe stand krumm.
   Als Flex-Spalte, die die Resthoehe nimmt, faellt der Knopf ueberall auf
   dieselbe Grundlinie. Der Aufmacher ist ausgenommen, der liegt quer. */
.bundle-card:not(.featured) .bundle-body {
  display: flex; flex-direction: column;
  flex: 1 1 auto; width: 100%; min-width: 0;
}

.bundle-card::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 12px;
  background: var(--meander) repeat-x center; background-size: auto 12px;
  opacity: 0.35; transition: opacity 0.18s;
}
.bundle-card:hover {
  border-color: var(--gold-dim);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0,0,0,0.65);
}
.bundle-card:hover::before { opacity: 0.8; }
/* The crests carry their own gold frame, laurel and banner, so no ring and no
   circular crop: a round mask would slice the banner clean off. */
.bundle-icon {
  width: 210px; height: 210px;
  margin: 4px auto 18px;
  display: flex; align-items: center; justify-content: center;
}
.bundle-icon img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.7)) drop-shadow(0 0 22px rgba(201,169,97,0.18));
  transition: filter 0.3s, transform 0.4s cubic-bezier(.2,.7,.3,1);
}
.bundle-card:hover .bundle-icon img {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.75)) drop-shadow(0 0 34px rgba(201,169,97,0.4));
}
.bundle-card h3 { font-size: 24px; margin: 0 0 8px; color: var(--marble); }
.bundle-role {
  font-family: var(--type);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--teal-bright); margin-bottom: 12px;
}
.bundle-tagline {
  font-family: var(--type); font-size: 13px; line-height: 1.7;
  color: var(--text); margin-bottom: 18px; min-height: 44px;
  /* absorbs the slack, so price and button sit at the same height in a row */
  flex: 1 1 auto;
}
.bundle-price {
  font-family: var(--serif); font-weight: 700; font-size: 30px;
  color: var(--gold-bright); margin-bottom: 20px; letter-spacing: 0.03em;
}
/* The term always gets its own line. Inline, a long one wrapped on some cards
   and not others, which is what threw the row out of line. */
.bundle-price span {
  display: block; margin-top: 4px;
  font-size: 13px; color: var(--text-dim);
  font-family: var(--body); text-transform: uppercase; letter-spacing: 0.12em;
}
.bundle-card .btn { width: 100%; }
/* Ersparnis gegenueber dem Einzelkauf: alter Wert durchgestrichen, daneben die
   Prozentmarke. Steht direkt ueber dem Preis, damit beides zusammen gelesen wird. */
.bundle-save {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 2px 0 6px; font-family: var(--body); font-size: 14px;
}
.bundle-save s { color: var(--text-dim); }
.bundle-save .save-pct {
  padding: 2px 9px; border-radius: 3px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px;
  color: #fff; background: var(--blood-bright);
}
.product-info .bundle-save { justify-content: flex-start; margin: 8px 0 0; }
.bundle-contents { margin: 6px 0 16px 18px; padding: 0; line-height: 1.7; }
.bundle-contents li { color: var(--text); }
.price-save { margin-left: 10px; font-size: 15px; font-family: var(--body); }
.price-save s { color: var(--text-dim); margin-right: 8px; }
.price-save .save-pct {
  padding: 2px 8px; border-radius: 3px; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em; color: #fff; background: var(--blood-bright);
}

/* Scarcity is the product on a capped bundle, so it reads before the price. */
.bundle-scarcity {
  font-family: var(--type); font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.bundle-scarcity b { color: var(--gold-bright); font-size: 14px; }
.bundle-scarcity.urgent { color: var(--blood-bright); }
.bundle-scarcity.urgent b { color: var(--blood-bright); }
.bundle-scarcity.closed { color: var(--text-dim); }
.product-info .bundle-scarcity { margin: 0 0 16px; }

/* The founder tier sits on its own above the row, wider and taller. */
.bundle-feature { margin-bottom: 44px; }
/* Der Aufmacher stand als 700 Pixel hoher Turm da und schob den eigentlichen
   Katalog um einen ganzen Bildschirm nach unten. Auf breiten Fenstern liegt er
   jetzt quer: Wappen links, Text rechts. Gleiche Information, halbe Hoehe.
   Flexbox statt Grid, weil die Karte flache Kinder hat - ein Grid haette jede
   Textzeile in eine eigene Spalte gelegt (erster Versuch, sah entsprechend aus). */
.bundle-feature .bundle-card {
  max-width: 940px; margin: 0 auto;
  padding: 30px 36px;
  /* flex-direction MUSS hier stehen: .bundle-card setzt column, und ohne das
     Ueberschreiben stapelt der Aufmacher weiter, egal wie breit das Fenster ist. */
  display: flex; flex-direction: row; align-items: center; gap: 36px;
  text-align: left;
}
.bundle-feature .bundle-card .bundle-icon { flex: 0 0 230px; margin: 0; }
.bundle-feature .bundle-card .bundle-body { flex: 1 1 auto; min-width: 0; }
.bundle-card.featured .bundle-icon { width: 230px; height: 230px; }
.bundle-card.featured h3 { font-size: 32px; margin-top: 0; }
.bundle-card.featured .bundle-price { font-size: 38px; }
.bundle-card.featured .bundle-tagline { font-size: 15px; }
@media (max-width: 860px) {
  .bundle-feature .bundle-card { flex-direction: column; text-align: center; gap: 18px; }
  .bundle-feature .bundle-card .bundle-icon { flex: 0 0 auto; }
  .bundle-card.featured .bundle-icon { width: 190px; height: 190px; }
  .bundle-feature .bundle-card .bundle-body { width: 100%; }
}

/* the founder tier stands apart: gold edge, warmer ground, corner flag */
.bundle-card.founder {
  border-color: var(--gold-dim);
  background:
    linear-gradient(180deg, rgba(201,169,97,0.11), transparent 34%),
    linear-gradient(180deg, var(--bg-panel), var(--bg-2));
  box-shadow: 0 0 0 1px rgba(201,169,97,0.14), 0 14px 40px rgba(0,0,0,0.6);
}
.bundle-card.founder::before { opacity: 0.7; }
.bundle-card.founder:hover { border-color: var(--gold); }
.bundle-flag {
  position: absolute; top: 16px; right: -34px;
  transform: rotate(38deg);
  background: linear-gradient(180deg, var(--blood), #6d1010);
  color: var(--marble);
  font-family: var(--serif); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 40px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* sold out or past its window: still readable, clearly not for sale */
.bundle-card.gone { opacity: 0.55; }
.bundle-card.gone .btn-scroll { filter: grayscale(0.85); }
.bundle-card.gone:hover { transform: none; border-color: var(--border); box-shadow: none; }

/* ---------- product / bundle detail ---------- */
.product-layout {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
/* ---------- the vitrine ----------
   The product picture used to sit on the page as a bare rectangle with a
   hairline border, which on a dark background is indistinguishable from an
   image that failed to load. It is now in a case: frame, corner brackets in
   the same language as the killfeed slots, an inner vignette so the motif
   sits IN the box rather than on it, and a shadow on the floor beneath. */
.vitrine {
  position: relative; margin: 0;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.028), transparent 40%),
    linear-gradient(180deg, #14171a 0%, #0b0d0f 100%);
  border: 1px solid rgba(201,169,97,0.34);
  box-shadow:
    inset 0 1px 0 rgba(255,236,206,0.09),
    0 18px 46px rgba(0,0,0,0.62);
}
.vitrine > img,
.vitrine > .kfp {
  display: block; width: 100%;
  box-shadow: inset 0 0 70px rgba(0,0,0,0.75);
}
/* corner brackets: two pseudo elements, each drawing one pair of corners */
.vitrine::before,
.vitrine::after {
  content: ""; position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold); pointer-events: none;
}
.vitrine::before {
  top: 5px; left: 5px;
  border-right: 0; border-bottom: 0;
}
.vitrine::after {
  right: 5px; bottom: 5px;
  border-left: 0; border-top: 0;
}
/* the case stands on something */
.vitrine .plinth {
  position: absolute; left: 8%; right: 8%; bottom: -18px; height: 18px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.72), transparent 72%);
  pointer-events: none;
}

.product-info .cat {
  text-transform: uppercase; color: var(--gold-dim);
  letter-spacing: 0.22em; font-size: 12px;
  font-family: var(--type);
}
.product-info h1 { font-size: clamp(30px, 4vw, 44px); margin: 6px 0 10px; }
.product-info .price {
  font-family: var(--serif); font-weight: 700; font-size: 36px;
  color: var(--gold-bright); margin: 12px 0 20px; letter-spacing: 0.03em;
  display: flex; align-items: baseline; gap: 12px;
  border-bottom: 1px solid rgba(201,169,97,0.16); padding-bottom: 14px;
}
.product-info .price small {
  font-family: var(--type); font-weight: 400; font-size: 11.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.product-info p.desc { color: var(--text); line-height: 1.75; margin-bottom: 20px; }

/* Which slot does this occupy, does it expire, is it pay to win. Those are the
   three questions asked in the Discord every time, so they belong on the page
   rather than in an answer. */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; padding: 0; }
.chips li {
  font-family: var(--type); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  border: 1px solid var(--border); padding: 5px 10px;
  background: rgba(255,255,255,0.015);
}
.chips li:first-child { color: var(--gold); border-color: rgba(201,169,97,0.4); }

/* ---------- more on the same axis ---------- */
.related { margin-top: 66px; }
/* This h2 is a direct child of a section, so it inherits the site meander
   ornament from "section > h2::after". Leave the ornament alone and just make
   room for it - the first version added a border-bottom on top of it and the
   two decorations sat in the same 18 pixels. */
.related h2 {
  font-size: 15px; letter-spacing: 0.24em; color: var(--gold-dim);
  padding-bottom: 24px; margin-bottom: 22px;
}
/* auto-fill, not auto-fit: with three items the tracks stay card-sized and
   left aligned instead of stretching to fill the row. */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.related-card {
  display: block; text-decoration: none; padding: 12px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 45%), rgba(8,11,12,0.6);
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
}
.related-card img, .related-card .noimg {
  display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  background: #0a0d0e; margin-bottom: 10px;
}
.related-card b {
  display: block; font-family: var(--serif); font-size: 14px; letter-spacing: 0.06em;
  color: var(--text-bright); text-transform: uppercase;
}
.related-card i {
  display: block; font-style: normal; margin-top: 4px;
  font-family: var(--serif); color: var(--gold); font-size: 14px;
}
.related-card:hover {
  border-color: rgba(201,169,97,0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.5), 0 0 18px rgba(201,169,97,0.12);
}

/* ---------- Detailseiten: Buehne oben, Kasse aufklappbar (18.09.2026) ----------
   Vorher Bild links und rechts eine Textwand samt Formular. Jetzt steht das
   Bild gross in der Mitte, darunter Name und Preis, der Inhalt als Kacheln und
   ein Knopf. Das Formular oeffnet sich erst auf den Knopf. */
.detail { max-width: 880px; margin: 0 auto; text-align: center; }
.detail-stage { display: flex; justify-content: center; margin: 0 0 26px; }
.detail-crest {
  display: block; width: min(420px, 82vw); height: auto;
  filter: drop-shadow(0 10px 28px rgba(0,0,0,0.7)) drop-shadow(0 0 40px rgba(201,169,97,0.16));
}
.detail-case { width: min(420px, 86vw); }
.detail-case.is-kf { width: min(640px, 92vw); }
/* Killfeed ist eine Zeile: breite Buehne statt Quadrat mit viel Leere. */
.detail-case.is-kf .kfp { aspect-ratio: 2.4 / 1; }
.detail-eyebrow {
  font-family: var(--type); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-dim);
}
.detail-eyebrow.is-role { color: var(--teal-bright); }
.detail-head h1 { font-size: clamp(32px, 4.6vw, 52px); margin: 6px 0 8px; }
.detail-tagline {
  font-family: 'Special Elite', monospace; font-style: italic; font-size: 16px;
  color: var(--text); margin: 0 0 14px;
}
.detail-head .bundle-scarcity { margin: 0 0 10px; }
.detail-head .bundle-save { justify-content: center; margin: 6px 0 2px; }
.detail-price {
  display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 12px;
  font-family: var(--serif); font-weight: 700; font-size: 44px; letter-spacing: 0.03em;
  color: var(--gold-bright);
}
.detail-price s { font-size: 24px; color: var(--text-dim); }
.detail-price small {
  font-family: var(--type); font-weight: 400; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.detail-price small.is-deal { color: var(--teal-bright); }
.detail-head .chips { justify-content: center; margin: 16px 0 0; }
.detail-lead { max-width: 620px; margin: 22px auto 0; font-size: 17px; line-height: 1.7; color: var(--text); }
/* Flex statt Grid: eine unvollstaendige letzte Reihe steht mittig statt links.
   Zwei oder vier Kacheln laufen als 2er-Raster, alles andere als 3er. */
.detail-tiles {
  list-style: none; padding: 0; margin: 26px 0 0; text-align: left;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.detail-tiles li { flex: 0 1 calc((100% - 24px) / 3); }
.detail-tiles.cols-2 { max-width: 700px; margin-left: auto; margin-right: auto; }
.detail-tiles.cols-2 li { flex-basis: calc((100% - 12px) / 2); }
.detail-tiles li {
  position: relative; padding: 16px 16px 16px 40px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent 60%), var(--bg-panel);
  border: 1px solid var(--border);
  font-size: 15px; line-height: 1.5; color: var(--text-bright);
}
.detail-tiles li::before {
  content: ""; position: absolute; left: 16px; top: 22px; width: 8px; height: 8px;
  background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 10px rgba(201,169,97,0.5);
}
.detail-note {
  max-width: 620px; margin: 16px auto 0;
  font-family: var(--type); font-size: 13px; line-height: 1.6; color: var(--text-dim);
}
.detail-note a { color: var(--gold); }
.detail-cta { margin: 32px auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.detail-cta[hidden], .detail-checkout[hidden] { display: none; }
.detail-cta .btn { min-width: min(360px, 100%); }
.detail-fine {
  max-width: 460px; margin: 0;
  font-family: var(--type); font-size: 12px; letter-spacing: 0.03em; color: var(--text-dim);
}
.detail-checkout { max-width: 560px; margin: 30px auto 0; text-align: left; }
.detail > .notice { max-width: 560px; margin: 28px auto 0; text-align: left; }
@media (max-width: 720px) {
  .detail-price { font-size: 36px; }
  .detail-tiles li, .detail-tiles.cols-2 li { flex-basis: 100%; }
}

/* ---------- forms ---------- */
form.reserve {
  position: relative;
  background: linear-gradient(180deg, var(--bg-panel), var(--bg-2));
  border: 1px solid var(--border);
  padding: 26px 24px 24px;
}
form.reserve::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px;
  background: var(--meander) repeat-x center; background-size: auto 12px;
  opacity: 0.28;
}
form.reserve label {
  display: block; margin-bottom: 16px;
  font-family: var(--type); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--text);
}
form.reserve input {
  width: 100%; padding: 12px 14px; margin-top: 8px;
  background: #050604; border: 1px solid var(--border); color: var(--text-bright);
  font-family: var(--body); font-size: 17px; letter-spacing: 0.02em;
  transition: border-color 0.15s, box-shadow 0.15s;
}
form.reserve input::placeholder { color: #4e4a40; }
form.reserve input:focus {
  outline: none; border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px rgba(201,169,97,0.2), inset 0 0 16px rgba(201,169,97,0.05);
}
.hint { font-family: var(--type); font-size: 12.5px; color: #b0a894; margin-top: 6px; letter-spacing: 0.04em; }

/* group-buy toggle: reads as an offer, not as a checkbox buried in a form */
form.reserve label.check {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 18px;
  padding: 14px 16px;
  background: rgba(31,95,102,0.10);
  border: 1px solid var(--teal);
  color: var(--teal-bright);
  font-family: var(--body); font-size: 15px;
  letter-spacing: 0.06em; text-transform: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
form.reserve label.check:hover { background: rgba(31,95,102,0.18); border-color: var(--teal-bright); }
form.reserve label.check input {
  width: 18px; height: 18px; margin: 0; flex: none;
  accent-color: var(--teal-bright);
  cursor: pointer;
}

.notice {
  position: relative;
  background: rgba(143,22,22,0.09);
  border: 1px solid var(--blood-dark);
  padding: 14px 18px 14px 42px;
  font-family: var(--type); font-size: 14px; line-height: 1.65;
  color: var(--text);
  margin-bottom: 22px;
}
/* marked with the crest star, same seal the .ornament divider uses */
.notice::before {
  content: "";
  position: absolute; left: 17px; top: 19px;
  width: 8px; height: 8px;
  background: var(--blood-bright);
  transform: rotate(45deg);
  box-shadow: 0 0 8px rgba(198,40,40,0.6);
}
.notice.ok { background: rgba(95,154,82,0.09); border-color: #24361f; }
.notice.ok::before { background: var(--ok); box-shadow: 0 0 8px rgba(95,154,82,0.55); }
.notice.error { background: rgba(198,40,40,0.13); border-color: var(--blood); }
.notice.error::before { background: var(--blood-bright); box-shadow: 0 0 10px rgba(198,40,40,0.85); }
.notice strong { color: var(--gold-bright); }

/* straight into the buyer own ticket, styled apart from the blood buttons */
.btn.ticket-link {
  margin-top: 6px;
  background: linear-gradient(180deg, #4a5fb8 0%, #34479a 100%);
  border-color: #6b7fd4;
}
.btn.ticket-link:hover { border-color: #9aa9e8; box-shadow: 0 0 22px rgba(90,120,220,0.45); }

/* ---------- footer ---------- */
footer.site {
  position: relative;
  border-top: 1px solid var(--border-lit);
  margin-top: 40px;
  color: var(--text);
  font-size: 14px;
  text-align: center;
  /* the horizon sits behind the footer, so it needs its own ground */
  background: linear-gradient(180deg, rgba(7,8,6,0.82) 0%, rgba(7,8,6,0.95) 40%);
  backdrop-filter: blur(3px);
}
footer.site p { text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
footer.site::before {
  content: ""; display: block; height: 12px;
  background: var(--meander) repeat-x center; background-size: auto 12px;
  opacity: 0.25; transform: scaleY(-1);
}
footer.site .container { padding-top: 26px; padding-bottom: 34px; }
footer.site .fmark {
  font-family: var(--serif); font-weight: 900;
  letter-spacing: 0.34em; font-size: 17px;
  color: var(--gold); margin-bottom: 14px;
  text-shadow: 0 0 14px rgba(201,169,97,0.25);
}
footer.site p { margin: 6px 0; }
footer.site .fine { font-family: var(--type); font-size: 12.5px; color: #b0a894; letter-spacing: 0.04em; }

/* Die Panel-Regeln stehen seit dem Umbau vom 18.08.2026 vollstaendig in
   public/admin.css. Hier bleibt nur, was auch die oeffentliche Seite
   braucht -- vorher war das Panel ueber drei Dateien verteilt. */

/* Native form controls pick up the OS chrome — a white dropdown in the middle
   of a stone-dark panel. Everything selectable gets the house style instead. */
select {
  background: var(--bg-panel);
  border: 1px solid var(--border-lit);
  color: var(--text-bright);
  font-family: var(--body, 'Barlow Condensed', sans-serif);
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  border-radius: 0;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--gold-dim); }
select option { background: var(--bg-panel); color: var(--text-bright); }
/* =========================================================================
   MOTION
   Aion is the god of the turning wheel, so the ornament actually turns:
   the meander strips drift, the crest breathes, the blood keeps dripping.
   Everything here is switched off under prefers-reduced-motion.
   ========================================================================= */

/* the key pattern crawls — one full tile per cycle, so it never seams */
@keyframes meander-drift {
  from { background-position-x: 0; }
  to   { background-position-x: 12px; }
}
header.site::after,
footer.site::before,
.bundle-card::before,
form.reserve::before {
  background-size: 12px 12px;
  animation: meander-drift 9s linear infinite;
}
.bundle-card:hover::before { animation-duration: 2.5s; }

/* scanlines flicker like a failing screen */
@keyframes crt-flicker {
  0%, 100% { opacity: 0.5; }
  47%      { opacity: 0.46; }
  48%      { opacity: 0.62; }
  49%      { opacity: 0.47; }
  73%      { opacity: 0.55; }
}
body::before { animation: crt-flicker 7s steps(1, end) infinite; }

/* hero entrance — crest first, then the words underneath it */
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes emblem-enter {
  from { opacity: 0; transform: scale(0.9); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero-emblem   { animation: emblem-enter 1.1s cubic-bezier(.2,.7,.3,1) both, emblem-breathe 7s 1.1s ease-in-out infinite; }
.hero .kicker  { animation: rise 0.8s 0.45s both; }
.hero h1       { animation: rise 0.9s 0.60s both; }
.hero .sub     { animation: rise 0.8s 0.78s both; }
.hero .tagline { animation: rise 0.8s 0.92s both; }
.hero .cta     { animation: rise 0.8s 1.05s both; }

/* blood keeps running off the hero edge */
.hero .bleed::before,
.hero .bleed::after {
  content: "";
  position: absolute; top: 26px;
  width: 5px; height: 11px; border-radius: 50% 50% 45% 45%;
  background: #7d1212;
  animation: droplet 5.5s cubic-bezier(.5,0,.9,.5) infinite;
}
.hero .bleed::before { left: 22%; }
.hero .bleed::after  { left: 71%; animation-delay: 2.7s; }
/* The hero clips its overflow, so a drop swells, detaches, and fades out
   right at the edge instead of falling into a hard cut-off. */
@keyframes droplet {
  0%       { transform: translateY(0) scaleY(0.35); opacity: 0; }
  14%      { transform: translateY(0) scaleY(1);    opacity: 0.95; }
  38%      { transform: translateY(12px) scaleY(1.25); opacity: 0.8; }
  62%, 100%{ transform: translateY(30px) scaleY(1.5);  opacity: 0; }
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.75s ease, transform 0.75s cubic-bezier(.2,.7,.3,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Price catches the light when its card is hovered. Deliberately not a
   background-clip gradient: the price is the one number that must never
   depend on transparent text fill to stay readable. */
.card .price,
.bundle-card .bundle-price {
  transition: color 0.25s ease, text-shadow 0.25s ease;
}
.card:hover .price,
.bundle-card:hover .bundle-price {
  color: #fff6dd;
  text-shadow: 0 0 18px rgba(232,208,154,0.45);
}

/* the ornament star turns slowly, because of course it does */
.ornament i { animation: star-turn 14s linear infinite; }
@keyframes star-turn {
  from { transform: rotate(45deg); }
  to   { transform: rotate(405deg); }
}

/* filter buttons settle rather than snap */
.filters button { transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.3s, transform 0.15s; }
.filters button:active { transform: translateY(1px); }

.fcreed { font-family: var(--type); color: var(--text-bright); font-size: 15px; }

/* The OS preference wins unless the visitor has said otherwise on this site.
   html.motion-on opts back in, html.motion-off opts out regardless of the OS. */
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-on) *,
  html:not(.motion-on) *::before,
  html:not(.motion-on) *::after {
    animation-duration: 0.001ms !important;
    /* Delay has to go too. Shortening the duration but leaving a 0.9s delay on
       an entrance animation with fill-mode both leaves the element sitting at
       its "from" state — invisible — for most of a second. */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
  html:not(.motion-on) .reveal { opacity: 1; transform: none; }
  /* belt and braces: entrance animations must never hide content */
  html:not(.motion-on) .hero-emblem,
  html:not(.motion-on) .hero .kicker,
  html:not(.motion-on) .hero h1,
  html:not(.motion-on) .hero .sub,
  html:not(.motion-on) .hero .tagline,
  html:not(.motion-on) .hero .cta {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
html.motion-off *,
html.motion-off *::before,
html.motion-off *::after {
  animation-duration: 0.001ms !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  transition-delay: 0s !important;
}
html.motion-off .reveal { opacity: 1; transform: none; }
html.motion-off .hero-emblem,
html.motion-off .hero .kicker,
html.motion-off .hero h1,
html.motion-off .hero .sub,
html.motion-off .hero .tagline,
html.motion-off .hero .cta {
  animation: none !important; opacity: 1 !important; transform: none !important;
}

/* Sits in the header nav, so somebody with reduced motion actually finds it.
   Reads as a status, not a button, until you go near it. */
.motion-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 0;
  color: var(--text); cursor: pointer;
  font: inherit; letter-spacing: inherit;
  transition: color 0.15s;
}
.motion-toggle:hover { color: var(--gold-bright); }
.motion-toggle .mt-track {
  position: relative; display: inline-block;
  width: 34px; height: 16px; border-radius: 9px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border-lit);
  transition: background 0.2s, border-color 0.2s;
}
.motion-toggle .mt-knob {
  position: absolute; top: 1px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-dim);
  transition: left 0.18s, background 0.18s, box-shadow 0.18s;
}
.motion-toggle[aria-pressed="true"] .mt-track {
  background: rgba(31,95,102,0.55);
  border-color: var(--teal-bright);
}
.motion-toggle[aria-pressed="true"] .mt-knob {
  left: 18px;
  background: var(--teal-bright);
  box-shadow: 0 0 8px rgba(61,154,160,0.7);
}

/* =========================================================================
   ATMOSPHERE
   A fixed backdrop behind the whole document: haze, a ruined horizon, ash and
   embers on canvas, and a torch that follows the pointer. Injected by
   atmosphere.js. Purely decorative, never interactive.
   ========================================================================= */

/* Weather: pinned to the viewport, between you and the page. */
.atmos {
  position: fixed; inset: 0;
  /* Not -1: body paints an opaque gradient, which would bury the whole layer.
     0 sits above that gradient, and every content block below carries z-index 1. */
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Landscape: part of the document, sitting at its very bottom, so you travel
   toward it as you scroll. body must be positioned for bottom:0 to mean the
   end of the page rather than the first viewport. */
body { position: relative; }
.atmos-ground {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 78vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Sick light on the horizon. This has to be genuinely bright: the ruins are a
   near-black silhouette, and the page vignette darkens the bottom edge on top
   of them. Without a glow to cut against, the skyline is black on black. */
.atmos-haze {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 70vh;
  background:
    /* pockets of colour low on the horizon */
    radial-gradient(58% 40% at 24% 88%, rgba(70,165,172,0.30), transparent 70%),
    radial-gradient(52% 36% at 78% 92%, rgba(196,74,38,0.26), transparent 70%),
    /* the band itself: brightest just above ground level, so the skyline
       in front of it reads as a cut-out rather than as black on black */
    linear-gradient(180deg,
      transparent 0%,
      rgba(58,110,115,0.10) 44%,
      rgba(96,158,160,0.25) 70%,
      rgba(150,124,74,0.22) 86%,
      rgba(46,66,66,0.34) 100%);
  animation: haze-drift 46s ease-in-out infinite alternate;
}
@keyframes haze-drift {
  from { transform: translateX(-3%) scaleY(1); }
  to   { transform: translateX(3%) scaleY(1.08); }
}

/* the horizon itself — parallaxed by atmosphere.js */
/* Pure black on purpose. It is only readable because the haze burns behind it. */
.atmos-ruins {
  position: absolute; left: -4%; right: -4%; bottom: 0; height: 27vh;
  background: url('/img/ruins.svg') repeat-x bottom center;
  background-size: auto 100%;
  opacity: 1;
}

/* Midground fog. Moves faster than the horizon and sideways as well, which is
   what actually reads as movement while scrolling. */
.atmos-mid {
  position: absolute; left: -20%; right: -20%; bottom: -8vh; height: 52vh;
  background:
    radial-gradient(46% 60% at 18% 100%, rgba(24,34,34,0.85), transparent 72%),
    radial-gradient(40% 54% at 52% 104%, rgba(18,26,26,0.8), transparent 70%),
    radial-gradient(50% 62% at 84% 102%, rgba(22,30,30,0.82), transparent 72%);
  filter: blur(2px);
}

.atmos-ash { position: absolute; inset: 0; width: 100%; height: 100%; }

/* =========================================================================
   LIGHT ON THE WALL
   The wall tile stays a still image on purpose. Animated masonry - stone that
   drifts, pulses or breathes - is the fastest way to make a background read as
   a screensaver. What moves instead is the only thing that would really move
   in a torchlit room: the flame light on the stone, and one shaft crossing it.
   Sits at z-index 0, so under every content block (they carry z-index 1) and
   under the ground layer, which is appended after it.
   ========================================================================= */
.atmos-wall {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.atmos-wall i {
  position: absolute; display: block;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: opacity, transform;
}

/* two torches out of frame, one warm, one closer to the blood red */
.atmos-wall .t1 {
  left: -12vw; top: 4vh; width: 34vw; height: 34vw;
  /* Entsaettigt und kleiner als ein "richtiges" Fackelgelb. Ohne kaltes
     Gegenlicht faerbt jede warme Flaeche die ganze Wand ein, sobald sie gross
     oder saftig genug ist - der Stich faellt erst auf, wenn man das Original
     danebenhaelt. */
  background: radial-gradient(circle,
    rgba(206,163,110,0.085), rgba(206,163,110,0.022) 40%, transparent 64%);
  animation: torch-a 5.7s ease-in-out infinite;
}
.atmos-wall .t2 {
  right: -14vw; top: 30vh; width: 28vw; height: 28vw;
  background: radial-gradient(circle,
    rgba(178,84,58,0.065), rgba(178,84,58,0.018) 42%, transparent 66%);
  animation: torch-b 7.3s ease-in-out infinite;
}

/* One shaft of pale light crossing the room, slow enough that you notice it
   only if you sit still. Heavily blurred: a crisp edge would read as a swipe. */
.atmos-wall .shaft {
  top: -34vh; left: -46vw;
  width: 15vw; height: 176vh;
  border-radius: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(178,214,214,0.10) 30%,
    rgba(196,228,226,0.22) 50%,
    rgba(178,214,214,0.09) 70%,
    transparent);
  filter: blur(11px);
  animation: shaft-cross 96s linear infinite;
}
@keyframes shaft-cross {
  0%   { transform: translateX(0) rotate(9deg);     opacity: 0; }
  9%   { opacity: 1; }
  86%  { opacity: 1; }
  100% { transform: translateX(200vw) rotate(9deg); opacity: 0; }
}

/* Damp creeping up from the floor. Multiply, not screen: this one takes light
   away. Very slow, and it never fully resolves either way. */
.atmos-wall .damp {
  left: 6vw; bottom: -6vh;
  width: 44vw; height: 56vh;
  border-radius: 46% 54% 40% 60%;
  mix-blend-mode: multiply;
  background: radial-gradient(ellipse at 50% 100%, rgba(5,10,11,0.34), transparent 72%);
  filter: blur(8px);
  animation: damp-breathe 41s ease-in-out infinite alternate;
}
@keyframes damp-breathe {
  from { opacity: 0.55; transform: scaleY(0.94) translateX(0); }
  to   { opacity: 0.85; transform: scaleY(1.06) translateX(2vw); }
}

/* Blood is on the glass you are looking through, so it sits above the content
   but below the grain and vignette. Never interactive. */
.atmos-glass {
  position: fixed; inset: 0;
  z-index: 997;
  pointer-events: none;
}
.atmos-blood { position: absolute; inset: 0; width: 100%; height: 100%; }

/* warm pool of light around the cursor, as if you are carrying the torch */
.atmos-torch {
  position: absolute; top: 0; left: 0;
  width: 600px; height: 600px;
  opacity: 0;
  transition: opacity 0.6s ease;
  background: radial-gradient(circle at center,
    rgba(212,150,72,0.13) 0%,
    rgba(180,110,50,0.07) 32%,
    transparent 66%);
}

/* distant storm. rare by design — see scheduleFlash() */
.atmos-flash {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(190,205,215,0.16), transparent 55%);
  opacity: 0;
}
.atmos-flash.fire { animation: storm 0.62s steps(1, end); }
@keyframes storm {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  12%  { opacity: 0.1; }
  20%  { opacity: 0.85; }
  30%  { opacity: 0; }
  46%  { opacity: 0.5; }
  56%  { opacity: 0; }
  100% { opacity: 0; }
}

/* content has to sit above the backdrop */
/* header.site steht hier bewusst NICHT mehr drin. Die Regel hat ihn auf
   position: relative und z-index: 1 zurueckgesetzt und damit zwei Dinge
   kaputtgemacht, die weiter oben (Zeile 145) absichtlich gesetzt sind:
   das Kleben beim Scrollen und der Stapelplatz ueber dem Seiteninhalt.
   Sichtbare Folge: das aufgeklappte Sprachmenue verschwand hinter dem
   Logo im Kopfbereich, weil der Kopf denselben Stapelplatz hatte wie der
   Abschnitt darunter und in der Reihenfolge davor kam. */
section, footer.site, .statbar, .testbar, .admin-layout {
  position: relative;
  z-index: 1;
}

/* grime on the glass, on top of the grain */
body::before {
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0px, rgba(0,0,0,0.22) 1px, transparent 1px, transparent 3px),
    radial-gradient(circle at 12% 22%, rgba(0,0,0,0.5) 0%, transparent 26%),
    radial-gradient(circle at 88% 74%, rgba(0,0,0,0.45) 0%, transparent 30%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.32'/></svg>");
}

/* The admin panel is a workplace, not a scene. The grime blobs sat exactly on
   the sidebar (12%/22% = top left) and the vignette crushed the corners on
   top — together the workspace edges went near-black. Faint grain only, no
   grime, barely-there vignette. */
body.admin::before {
  opacity: 0.25;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.14) 0px, rgba(0,0,0,0.14) 1px, transparent 1px, transparent 3px),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.32'/></svg>");
}
body.admin::after {
  background: radial-gradient(ellipse at center, transparent 68%, rgba(0,0,0,0.28) 100%);
}

/* =========================================================================
   THE SCROLL BUTTON  (v2)
   Eine versiegelte Rolle, die sich beim Hovern aufrollt.

   Was v2 gegenueber v1 anders macht:
     1. LESBAR IM RUHEZUSTAND. Auf der geschlossenen Rolle steht das Label
        eingepraegt. Ein Knopf, den man erst nach dem Hovern lesen kann, ist
        ein Raetsel, keine Bedienung.
     2. DAS SIEGEL BRICHT SICHTBAR. Erst zieht ein Riss quer durch das Wachs,
        dann fallen die zwei Haelften weg - statt dass sie ohne Grund
        auseinanderfliegen.
     3. DAS BLATT HAT EINE GERISSENE UNTERKANTE (SVG-Maske) und eine leichte
        Woelbung, ist also kein Rechteck mit Papiertextur.
     4. WACHSSPLITTER + STAUB stieben kurz auf, wenn das Siegel bricht.
     5. GEDRUECKT wird gestempelt: der Knopf sackt, der Schlagschatten zieht an.

   Drei Siegel, weil die drei Dinge nicht gleich schwer wiegen:
     (default)  rotes Wachs
     .forever   groesseres, schwereres Wachs
     .founder   Gold, pulsiert, Goldstreif ueber das offene Blatt
   ========================================================================= */

.btn-scroll {
  position: relative;
  display: inline-block;
  width: 100%;
  /* Ohne Deckel zieht die Rolle auf der breiten Bundle-Karte auf 600 px und
     sieht dann aus wie ein weisses Rohr statt wie eine Schriftrolle. */
  max-width: 300px;
  height: 104px;
  padding: 0; border: 0; background: none; overflow: visible;
  box-shadow: none;
  cursor: pointer;
  /* Tiefes Altgold auf cremefarbenem Papier: 5,2:1, also ueber AA. Der Glanz
     kommt aus der Praegung (helle Kante unten, dunkle oben), nicht aus einer
     helleren Farbe. */
  /* Tinte, nicht Blattgold. Die vorige Fassung war Altgold #7f5f1a mit
     hellem Halo - auf dem cremefarbenen Blatt lagen damit nur ~4,5:1 an und
     der Halo hat die Striche zusaetzlich aufgefressen. Jetzt dunkelbraune
     Tinte (~9:1), der Goldton bleibt als schmale Praegekante darunter. */
  color: #402d09;
  font-family: var(--serif); font-weight: 700;
  font-size: 16px; letter-spacing: 0.16em; text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255,252,236,0.55),
    0 0 1px rgba(120,92,28,0.35);
  transition: transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- das Blatt: gerissene Unterkante, leicht gewoelbt ---------- */
.btn-scroll .pg {
  position: absolute; left: 11px; right: 11px; top: 34px; height: 58px;
  transform: scaleY(0.02); transform-origin: top center;
  /* schiesst minimal ueber und setzt sich, wie losgelassenes Papier */
  transition: transform 0.72s cubic-bezier(.16,1.08,.32,1) 0.2s;
  background:
    /* Woelbung: an den Raendern faellt Licht weg, Mitte steht vor */
    linear-gradient(90deg,
      rgba(96,88,70,0.30) 0%, rgba(96,88,70,0.10) 5%,
      rgba(255,255,255,0.16) 22%, rgba(255,255,255,0.06) 50%,
      rgba(96,88,70,0.10) 94%, rgba(120,110,88,0.34) 100%),
    /* Schatten direkt unter der Rolle, wo das Blatt herauslaeuft */
    linear-gradient(180deg, rgba(60,52,36,0.42) 0%, rgba(60,52,36,0) 14%),
    url('/img/parchment.svg') repeat-x center center / auto 100%;
  box-shadow: 0 16px 30px rgba(0,0,0,0.52);
  z-index: 2;
  /* gerissene Unterkante statt Schnittkante */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><path fill='%23fff' d='M0 0 H240 V53.2 L228 52.4 L216 55.2 L204 53.1 L192 56 L180 52.8 L168 54.6 L156 51.9 L144 55.8 L132 53.4 L120 52.2 L108 55.4 L96 53.8 L84 52.5 L72 56.2 L60 53 L48 54.8 L36 52.1 L24 55.6 L12 53.6 L0 52.3 Z'/></svg>") no-repeat center / 100% 100%;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 60' preserveAspectRatio='none'><path fill='%23fff' d='M0 0 H240 V53.2 L228 52.4 L216 55.2 L204 53.1 L192 56 L180 52.8 L168 54.6 L156 51.9 L144 55.8 L132 53.4 L120 52.2 L108 55.4 L96 53.8 L84 52.5 L72 56.2 L60 53 L48 54.8 L36 52.1 L24 55.6 L12 53.6 L0 52.3 Z'/></svg>") no-repeat center / 100% 100%;
}

/* ---------- die Rolle ----------
   Zu: der volle Zylinder. Offen: dasselbe Element auf eine duenne Locke
   gequetscht, weil das abgerollte Papier nicht mehr drumherum liegt. Die
   Enden sind Pseudoelemente, damit sie mitquetschen. */
.btn-scroll .roll {
  position: absolute; left: 7px; right: 7px; top: 16px; height: 34px;
  transform-origin: top center;
  border-radius: 6px;
  background:
    /* die Naht: hier endet der aeussere Wickel und wirft eine Haarlinie
       Schatten auf die Lage darunter */
    linear-gradient(180deg,
      transparent 0 29%,
      rgba(108,100,82,0.75) 29% 30.8%,
      rgba(255,255,252,0.72) 30.8% 32.6%,
      rgba(190,182,162,0.25) 32.6% 34%,
      transparent 34%),
    /* Zylinderschattierung, Licht von oben */
    linear-gradient(180deg,
      rgba(140,132,112,0.34) 0%,
      rgba(255,255,252,0.55) 13%,
      rgba(255,255,250,0.18) 32%,
      rgba(0,0,0,0) 50%,
      rgba(120,110,88,0.30) 78%,
      rgba(86,78,60,0.52) 100%),
    url('/img/parchment.svg') repeat-x center center / auto 100%;
  box-shadow: 0 12px 22px rgba(0,0,0,0.5);
  z-index: 5;
  transition: transform 0.72s cubic-bezier(.16,1.08,.32,1) 0.2s;
}
/* die offenen Enden des Rohrs */
.btn-scroll .roll::before,
.btn-scroll .roll::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 15px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 62% 38%,
      #efeade 0%, #ddd6c2 44%, #bdb59d 74%, #8d8672 100%);
  box-shadow: inset 0 0 6px rgba(90,82,64,0.5);
}
.btn-scroll .roll::before { left: -6px; }
.btn-scroll .roll::after  { right: -6px; }

/* ---------- Label auf dem offenen Blatt ---------- */
.btn-scroll .lab {
  position: absolute; left: 0; right: 0; top: 38px; height: 50px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 0 14px;
  z-index: 4;
  opacity: 0;
  /* zuletzt, wenn es Papier zum Beschreiben gibt */
  transition: opacity 0.3s ease 0.5s;
}

/* ---------- Label auf der geschlossenen Rolle ----------
   Klein und eingepraegt: die Rolle traegt den Text als Praegung, nicht als
   Aufdruck. Damit ist der Knopf ohne Hover lesbar. */
.btn-scroll .lab2 {
  position: absolute; left: 22px; right: 54px; top: 16px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  z-index: 7; pointer-events: none;
  font-size: 12px; letter-spacing: 0.16em;
  color: #4a3410;
  text-shadow: 0 1px 0 rgba(255,253,241,0.85), 0 -1px 0 rgba(60,44,10,0.22);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 1;
  transition: opacity 0.18s ease, transform 0.3s ease;
}

/* ---------- das Siegel ----------
   Eine Zeichnung, zweimal gezeigt und mittig geclippt, damit beide Haelften
   ihren echten Anteil an Scheibe, Rand und Praegung tragen. */
.btn-scroll .wax {
  /* Das Siegel sass mittig und lag damit genau auf dem gepraegten Label.
     Eine echte Rolle wird ohnehin am Ueberschlag versiegelt, nicht in der
     Mitte - also sitzt es rechts und die Schrift hat die Mitte fuer sich. */
  position: absolute; right: 16px; top: 18px;
  width: 32px; height: 32px;
  z-index: 8;
  pointer-events: none;
}
.btn-scroll .wax .h {
  position: absolute; inset: 0;
  background: url('/img/scroll-wax.svg') no-repeat center center / contain;
  transition: transform 0.52s cubic-bezier(.3,.6,.3,1) 0.12s, opacity 0.46s 0.12s;
}
.btn-scroll .wax .h.l { clip-path: inset(0 50.5% 0 0); transform-origin: 70% 45%; }
.btn-scroll .wax .h.r { clip-path: inset(0 0 0 49.5%); transform-origin: 30% 45%; }

/* der Riss: faehrt quer durchs Wachs, BEVOR die Haelften fallen */
.btn-scroll .wax .crack {
  position: absolute; left: 8%; right: 8%; top: 46%; height: 2px;
  background: linear-gradient(90deg,
    transparent, rgba(255,226,196,0.9) 22%, rgba(70,12,4,0.95) 50%,
    rgba(255,226,196,0.85) 78%, transparent);
  transform: scaleX(0) rotate(-7deg); transform-origin: left center;
  opacity: 0;
  transition: transform 0.16s ease-out, opacity 0.16s ease-out;
}

/* ---------- Wachssplitter + Staub ----------
   Mehrere Punkte pro Pseudoelement, per box-shadow vervielfacht. Kostet kein
   zusaetzliches Markup und laeuft auf der Compositor-Ebene. */
.btn-scroll .dust {
  position: absolute; right: 32px; top: 30px; width: 2px; height: 2px;
  margin-left: -1px; z-index: 7; pointer-events: none; opacity: 0;
}
.btn-scroll .dust::before,
.btn-scroll .dust::after {
  content: ""; position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #d8451f;
}
.btn-scroll .dust::before {
  box-shadow:
    -14px 2px 0 #e2542a, -7px -3px 0 0.5px #b93317,
    6px 1px 0 #e2542a, 13px -2px 0 0.5px #a52c12,
    -20px 5px 0 -0.5px #c73a1a, 19px 4px 0 -0.5px #c73a1a;
}
.btn-scroll .dust::after {
  background: rgba(226,214,186,0.9);
  box-shadow:
    -10px 6px 0 -0.5px rgba(226,214,186,0.75),
    9px 7px 0 -0.5px rgba(226,214,186,0.7),
    -2px 9px 0 -0.5px rgba(226,214,186,0.6);
}

/* ---------- offen ---------- */
/* 1. der Riss */
.btn-scroll:hover .wax .crack,
.btn-scroll:focus-visible .wax .crack,
.btn-scroll.is-open .wax .crack { animation: seal-crack 0.5s ease-out forwards; }
@keyframes seal-crack {
  0%   { transform: scaleX(0) rotate(-7deg); opacity: 0; }
  22%  { opacity: 1; }
  55%  { transform: scaleX(1) rotate(-7deg); opacity: 1; }
  100% { transform: scaleX(1) rotate(-7deg); opacity: 0; }
}

/* 2. die Haelften fallen */
.btn-scroll:hover .wax .h.l,
.btn-scroll:focus-visible .wax .h.l,
.btn-scroll.is-open .wax .h.l { transform: translate(-20px, 26px) rotate(-52deg); opacity: 0; }
.btn-scroll:hover .wax .h.r,
.btn-scroll:focus-visible .wax .h.r,
.btn-scroll.is-open .wax .h.r { transform: translate(22px, 30px) rotate(64deg); opacity: 0; }

/* 3. Splitter stieben, einmalig */
.btn-scroll:hover .dust,
.btn-scroll:focus-visible .dust,
.btn-scroll.is-open .dust { animation: scroll-burst 0.62s ease-out 0.1s 1; }
@keyframes scroll-burst {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  18%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(16px) scale(1.5); }
}

/* 4. die Rolle wird zur Locke und hebt leicht ab */
.btn-scroll:hover .roll,
.btn-scroll:focus-visible .roll,
.btn-scroll.is-open .roll { transform: scaleY(0.42) translateY(-3px); }

/* 5. das Blatt laeuft darunter hervor */
.btn-scroll:hover .pg,
.btn-scroll:focus-visible .pg,
.btn-scroll.is-open .pg { transform: scaleY(1); }

/* Praegung verschwindet, sobald es das grosse Label gibt */
.btn-scroll:hover .lab2,
.btn-scroll:focus-visible .lab2,
.btn-scroll.is-open .lab2 { opacity: 0; transform: translateY(-3px); }

.btn-scroll:hover .lab,
.btn-scroll:focus-visible .lab,
.btn-scroll.is-open .lab { opacity: 1; }

/* gedrueckt = gestempelt */
.btn-scroll:active { transform: translateY(2px) scale(0.994); }
.btn-scroll:active .pg { box-shadow: 0 8px 16px rgba(0,0,0,0.55); }

/* ---------- .forever: schwereres Siegel ---------- */
.btn-scroll.forever .wax { width: 40px; height: 40px; right: 12px; top: 14px; }
.btn-scroll.forever:hover .wax .h.l,
.btn-scroll.forever:focus-visible .wax .h.l,
.btn-scroll.forever.is-open .wax .h.l { transform: translate(-26px, 32px) rotate(-50deg); }
.btn-scroll.forever:hover .wax .h.r,
.btn-scroll.forever:focus-visible .wax .h.r,
.btn-scroll.forever.is-open .wax .h.r { transform: translate(28px, 37px) rotate(62deg); }

/* ---------- .founder: Gold, und es will gesehen werden ---------- */
/* Das Siegel ist eine Zeichnung, also wird es nicht neu eingefaerbt sondern
   umgefaerbt. Billiger als eine zweite SVG-Datei und bleibt automatisch in
   Deckung, wenn die rote Fassung sich aendert. */
.btn-scroll.founder .wax .h {
  filter: sepia(1) saturate(2.6) hue-rotate(-14deg) brightness(1.18) contrast(0.95);
}
.btn-scroll.founder .wax .crack {
  background: linear-gradient(90deg,
    transparent, rgba(255,244,214,0.95) 24%, rgba(120,86,14,0.9) 50%,
    rgba(255,244,214,0.9) 76%, transparent);
}
.btn-scroll.founder .dust::before {
  background: #e8c675;
  box-shadow:
    -14px 2px 0 #f0d691, -7px -3px 0 0.5px #c9a961,
    6px 1px 0 #f0d691, 13px -2px 0 0.5px #b8964e,
    -20px 5px 0 -0.5px #dcbb72, 19px 4px 0 -0.5px #dcbb72;
}
.btn-scroll.founder .roll::before,
.btn-scroll.founder .roll::after {
  background: radial-gradient(ellipse at 62% 38%,
    #f7f0dc 0%, #e6dcc0 44%, #c8bb96 74%, #978b68 100%);
}
.btn-scroll.founder .lab2 { color: #4a3106; }
/* die versiegelte Rolle atmet, damit die gedeckelte Stufe als die lebendige liest */
.btn-scroll.founder .wax { animation: founder-pulse 2.8s ease-in-out infinite; }
@keyframes founder-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201,169,97,0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(240,214,150,0.8)); }
}
.btn-scroll.founder:hover .wax { animation: none; }
/* langsamer Goldstreif ueber das Papier, aber erst wenn es offen ist */
.btn-scroll.founder .lab { overflow: hidden; left: 11px; right: 11px; top: 34px; height: 58px; }
.btn-scroll.founder .lab::after {
  content: "";
  position: absolute; top: -30px; bottom: -30px; left: -140%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255,244,214,0.6), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.btn-scroll.founder:hover .lab::after,
.btn-scroll.founder:focus-visible .lab::after,
.btn-scroll.founder.is-open .lab::after { animation: founder-sweep 4.5s ease-in-out infinite; }
@keyframes founder-sweep {
  0%, 62% { left: -140%; }
  100%    { left: 190%; }
}
.btn-scroll.founder .lab {
  color: #4a3106;
  text-shadow:
    0 1px 0 rgba(255,250,226,0.6),
    0 0 1px rgba(150,112,32,0.4);
}
.btn-scroll.founder:hover { filter: brightness(1.04); }

/* ---------- Zustaende ---------- */
/* Ein geschlossenes Angebot muss ohne Hover lesbar bleiben, also liegt es
   offen da. */
.btn-scroll:disabled,
.btn-scroll.disabled { cursor: not-allowed; filter: grayscale(0.55); opacity: 0.6; }
.btn-scroll:disabled .pg,
.btn-scroll.disabled .pg,
.bundle-card.gone .btn-scroll .pg { transform: scaleY(1); }
.btn-scroll:disabled .lab,
.btn-scroll.disabled .lab,
.bundle-card.gone .btn-scroll .lab { opacity: 1; }
.btn-scroll:disabled .roll,
.btn-scroll.disabled .roll,
.bundle-card.gone .btn-scroll .roll { transform: scaleY(0.42) translateY(-3px); }
.btn-scroll:disabled .wax,
.btn-scroll.disabled .wax,
.btn-scroll:disabled .lab2,
.btn-scroll.disabled .lab2,
.bundle-card.gone .btn-scroll .wax,
.bundle-card.gone .btn-scroll .lab2 { opacity: 0; }
.btn-scroll:disabled .dust,
.btn-scroll.disabled .dust,
.bundle-card.gone .btn-scroll .dust { display: none; }

/* ---------- weniger Bewegung ----------
   Wer Bewegung abbestellt hat, kriegt trotzdem einen lesbaren Knopf: die
   Rolle liegt dann dauerhaft offen, ohne Federn, ohne Staub, ohne Puls. */
@media (prefers-reduced-motion: reduce) {
  .btn-scroll,
  .btn-scroll .pg, .btn-scroll .roll, .btn-scroll .lab,
  .btn-scroll .lab2, .btn-scroll .wax .h, .btn-scroll .wax .crack {
    transition: none !important; animation: none !important;
  }
  .btn-scroll .pg { transform: scaleY(1); }
  .btn-scroll .roll { transform: scaleY(0.42) translateY(-3px); }
  .btn-scroll .lab { opacity: 1; }
  .btn-scroll .lab2, .btn-scroll .wax, .btn-scroll .dust { opacity: 0; }
  .btn-scroll.founder .lab::after { display: none; }
}

.bundle-card .btn-scroll,
form.reserve .btn-scroll { width: 100%; }
.bundle-card .btn-scroll { margin-top: auto; margin-bottom: 10px; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/* Nothing decorative may create a horizontal scrollbar. The atmosphere layers
   deliberately hang past the edges and are clipped by their own containers;
   this is the guarantee that nothing else does. */
html, body { overflow-x: hidden; }

@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; gap: 30px; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  /* Phone: the rail stops being a rail. It becomes a stacked list at the top
     of the document, groups intact, and both columns give their scroll back to

  /* The bar stacks, so the nav has to be told to take the full width —
     otherwise it sizes to its content and runs off the side instead of
     wrapping. */
  header.site .bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  nav.main { width: 100%; gap: 14px 20px; font-size: 14px; letter-spacing: 0.1em; }
  .auth-slot { gap: 14px; }

  .hero { padding: 44px 0 66px; }
  .bundle-feature .bundle-card { padding: 30px 22px 26px; }
  .bundle-card.featured .bundle-icon { width: 220px; height: 220px; }
}

@media (max-width: 620px) {
  .container { padding: 0 16px; }

  .hero-emblem { width: 78%; max-width: 300px; }
  .hero .sub { letter-spacing: 0.18em; line-height: 1.6; }
  .hero .cta { flex-direction: column; align-items: stretch; }
  .hero .cta .btn { width: 100%; text-align: center; }

  /* Five stats will not sit in one row on a phone. Two columns keeps the
     labels readable instead of shrinking everything to fit. */
  .statbar .row { grid-template-columns: repeat(2, 1fr); }
  .stat { border-right: 0; border-bottom: 1px solid var(--border); }
  .stat:last-child { grid-column: 1 / -1; border-bottom: 0; }

  .connect-panel { margin-top: -20px; padding: 26px 20px 22px; }
  .connect-main { gap: 20px; }
  .connect-block { flex-basis: 100%; }
  .connect-block { text-align: left; }
  .connect-ip code { font-size: 20px; }
  .connect-note { margin-top: 22px; }

  .bundle-grid { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .features { grid-template-columns: 1fr; }
  .bundle-card.featured .bundle-icon { width: 190px; height: 190px; }
  .bundle-icon { width: 170px; height: 170px; }

  section { padding: 42px 0; }
  .lore { padding-left: 22px; }
  .filters { gap: 8px; }
  .filters button { padding: 8px 14px; font-size: 13px; }

  .testbar .container { gap: 6px; }
  .testbar span { font-size: 12px; }
}

/* Below this the scroll buttons and their rods need less overhang. */
@media (max-width: 420px) {
  .btn-scroll { font-size: 13px; letter-spacing: 0.14em; }
  .btn-scroll .roll { left: 5px; right: 5px; }
  .hero h1 { letter-spacing: 0.02em; }
}


/* ---------- shop: filter rail + grouped catalogue ---------- */
/* 56 Artikel in einem Raster waren nicht lesbar. Jetzt: feste Filterleiste
   links, Artikel darunter nach Kategorie gruppiert. Auf dem Handy wird aus der
   Leiste eine Schublade ueber dem Inhalt — gleiches Markup, nur andere CSS. */

/* Kopfzeile ueber dem Katalog: Filter-Knopf (nur Handy), Zaehler, Sortierung.
   Bleibt unter dem Seitenkopf haengen. z-index 3 reicht: Seitenkopf liegt auf
   1000, Inhaltsbloecke auf 1. */
.shop-bar {
  position: sticky; top: 62px; z-index: 3;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 0 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-lit);
  background: linear-gradient(180deg, rgba(6,9,11,0.97) 78%, rgba(6,9,11,0.88));
  backdrop-filter: blur(3px);
}
.shop-bar::before {
  content: ""; position: absolute; left: -40px; right: -40px; top: 0; bottom: 0;
  background: inherit; z-index: -1; pointer-events: none;
}
.shop-bar .shop-tools { margin-left: auto; }
.shop-bar .shop-count { margin: 0; }

.shop-tools { display: flex; gap: 10px; flex-wrap: wrap; }
.shop-tools select {
  background: linear-gradient(180deg, #1f211c, #15170f);
  border: 1px solid var(--border-lit);
  color: var(--text-bright);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 10px 14px;
}
.shop-tools select:focus { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.shop-count {
  color: var(--text);
  font-size: 15px;
  letter-spacing: 0.06em;
}

/* Filter-Knopf: nur unterhalb 900px sichtbar, dort oeffnet er die Schublade. */
.filter-toggle {
  display: none;
  align-items: center; gap: 9px;
  background: linear-gradient(180deg, #24261f, #15170f);
  border: 1px solid var(--border-lit);
  color: var(--text-bright);
  font-family: var(--body); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 15px;
  padding: 10px 18px; cursor: pointer;
}
.filter-toggle:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.ft-icon {
  width: 15px; height: 11px; display: inline-block;
  border-top: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  position: relative;
}
.ft-icon::after {
  content: ""; position: absolute; left: 0; right: 0; top: 4px;
  border-top: 2px solid var(--gold);
}
.ft-badge {
  min-width: 20px; padding: 1px 5px; text-align: center;
  background: var(--blood); color: #fff2e6;
  font-size: 12px; letter-spacing: 0.06em;
}

/* ---- layout ---- */
.shop-layout { display: grid; grid-template-columns: 246px minmax(0, 1fr); gap: 26px; align-items: start; }
.shop-main { min-width: 0; }

.shop-filter {
  position: sticky; top: 128px;
  background: linear-gradient(180deg, #1c1e1a, #121410);
  border: 1px solid var(--border-lit);
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  padding: 18px 16px 20px;
}
.filter-head {
  display: none;
  align-items: center; justify-content: space-between;
  font-family: var(--serif); font-size: 18px; color: var(--gold-bright);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 14px;
}
.filter-close {
  background: none; border: 1px solid var(--border-lit); color: var(--text-bright);
  font-size: 22px; line-height: 1; padding: 2px 10px 5px; cursor: pointer;
}
.filter-group { margin-bottom: 22px; }
.filter-group:last-of-type { margin-bottom: 18px; }
.filter-label {
  display: block; margin-bottom: 9px;
  font-family: var(--type); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold-bright);
}
.filter-value { color: var(--text); letter-spacing: 0.06em; text-transform: none; font-family: var(--body); font-size: 14px; }
.shop-filter input[type="search"] {
  width: 100%;
  background: #0d0f0c;
  border: 1px solid var(--border-lit);
  color: var(--text-bright);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px; letter-spacing: 0.04em;
  padding: 10px 12px;
}
.shop-filter input[type="search"]::placeholder { color: var(--text-dim); }
.shop-filter input[type="search"]:focus { outline: 2px solid var(--gold-bright); outline-offset: 1px; }

/* Kategorien stehen untereinander, ganze Zeile klickbar, Anzahl rechts. */
.shop-filter .filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.shop-filter .filters button {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; font-size: 15px;
  letter-spacing: 0.1em;
}
.fcount {
  font-family: var(--type); font-size: 11px; letter-spacing: 0.08em;
  color: var(--text-dim); padding: 1px 6px; border: 1px solid var(--border-lit);
}
.shop-filter .filters button.active .fcount { color: var(--gold-bright); border-color: var(--gold-dim); }

.shop-filter input[type="range"] {
  width: 100%; accent-color: var(--gold); margin: 2px 0 6px;
}
.filter-scale {
  display: flex; justify-content: space-between;
  font-family: var(--type); font-size: 11px; color: var(--text-dim); letter-spacing: 0.1em;
}
.filter-reset {
  width: 100%; padding: 10px 12px; cursor: pointer;
  background: none; border: 1px solid var(--border-lit); color: var(--text);
  font-family: var(--body); text-transform: uppercase;
  letter-spacing: 0.16em; font-size: 14px;
}
.filter-reset:hover { border-color: var(--gold-dim); color: var(--gold-bright); }
.filter-reset:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }

/* Skins-Bereich direkt unter den Bundles: weniger Luft als ein normaler Abschnitt. */
.shop-skins { padding-top: 12px; }
.shop-skins > .container > .ornament:first-child { margin-top: 20px; }

/* ---- Gruppen ---- */
/* Kategorien sind <section>, die allgemeine section-Regel (64px oben und unten)
   soll hier nicht greifen, sonst klaffen 170px zwischen den Kategorien. */
.skin-group { padding: 0; margin-bottom: 56px; }
.skin-group:last-child { margin-bottom: 0; }
.skin-group-head { margin-bottom: 18px; }
.skin-group-head h3 {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 4px;
  font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px);
  color: var(--gold-bright); letter-spacing: 0.06em; text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-lit);
}
.skin-group-count {
  font-family: var(--type); font-size: 13px; letter-spacing: 0.1em;
  color: var(--text); border: 1px solid var(--border-lit);
  padding: 2px 9px; text-transform: none;
}
.skin-group-note { margin: 8px 0 0; color: var(--text); font-size: 15px; letter-spacing: 0.03em; }

.skin-sub { margin-bottom: 26px; }
.skin-sub:last-child { margin-bottom: 0; }
.skin-sub-title {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 4px;
  font-family: var(--type); font-size: 14px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--teal-label);
}
.skin-sub-count {
  font-size: 12px; letter-spacing: 0.08em; color: var(--text-dim);
  border: 1px solid var(--border-lit); padding: 1px 7px;
}
.skin-sub-note { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; max-width: 640px; }
.shop-empty { color: var(--text); font-size: 16px; }

/* ---- Paket-Markierung ---- */
.card-media { position: relative; display: block; }
.card.is-pack { border-color: var(--pack-border); }
.card.is-pack:hover { border-color: var(--gold); }
.pack-flag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(10,6,6,0.92);
  border: 1px solid var(--pack-border);
  color: var(--pack-text);
  font-family: var(--type); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 4px 9px;
}

@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  .filter-toggle { display: inline-flex; }
  .filter-head { display: flex; }
  .shop-filter {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(320px, 88vw);
    z-index: 1200; overflow-y: auto;
    transform: translateX(-102%);
    /* Zugeklappt darf die Leiste nicht im Tab-Weg stehen. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .shop-filter.open {
    transform: none; visibility: visible;
    transition: transform 0.25s ease;
  }
  .filter-backdrop {
    position: fixed; inset: 0; z-index: 1100;
    background: rgba(3,4,3,0.7); backdrop-filter: blur(2px);
  }
  body.filter-open { overflow: hidden; }
  .shop-bar { gap: 12px; }
  .shop-bar .shop-count { width: 100%; order: 3; }
  .shop-bar .shop-tools { margin-left: auto; }
}

@media (max-width: 620px) {
  .shop-bar { top: 56px; padding: 10px 0; }
  .shop-tools select { font-size: 15px; padding: 9px 10px; }
  .filter-toggle { font-size: 14px; padding: 9px 14px; }
  .skin-group { margin-bottom: 34px; }
  /* Zwei Spalten auf 390px: der Name darf die Karte nicht sprengen. */
  .card h3 { font-size: 16px; letter-spacing: 0.02em; }
  .card .price { font-size: 22px; margin-top: 8px; }
}

/* ---------- Farbwaehler auf der Artikelseite ----------
   Die eigene Killfeed-Namensfarbe wird im Shop gewaehlt, nicht im Spiel: DayZ
   reicht in Overlays weder Klicks noch Tastatur an Widgets durch. Der Waehler
   sitzt direkt neben der Vitrine, damit jede Reglerbewegung sofort am
   Killfeed-Eintrag sichtbar ist. */
.colorpick {
  position: relative;
  margin: 0 0 24px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 45%), var(--bg-panel);
  border: 1px solid rgba(201,169,97,0.34);
}
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cp-title {
  font-family: var(--type); font-size: 12px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--gold);
}
.cp-chip {
  font-family: var(--type); font-size: 12px; letter-spacing: 0.14em;
  padding: 5px 10px; border: 1px solid rgba(0,0,0,0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  min-width: 84px; text-align: center;
}
.cp-lead {
  font-family: var(--type); font-size: 12.5px; color: #b0a894;
  margin: 10px 0 14px; line-height: 1.6; letter-spacing: 0.03em;
}
.cp-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.cp-ch {
  width: 14px; flex: none;
  font-family: var(--type); font-size: 12px; color: var(--gold-dim); letter-spacing: 0.1em;
}
.cp-row output {
  width: 34px; flex: none; text-align: right;
  font-family: var(--type); font-size: 12px; color: var(--text-dim);
}
/* Regler ohne Systemlook: dunkle Rinne, goldener Griff, wie der Rest der Seite */
.colorpick input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 6px; margin: 0; padding: 0;
  background: linear-gradient(90deg, #0a0b09, #6b6047);
  border: 1px solid var(--border);
  cursor: pointer;
}
.colorpick input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 0;
  background: var(--gold); border: 1px solid #0a0b09;
  box-shadow: 0 0 8px rgba(201,169,97,0.45);
}
.colorpick input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 0;
  background: var(--gold); border: 1px solid #0a0b09;
}
.colorpick input[type="range"]:focus { outline: none; border-color: var(--gold-dim); }
.cp-hexrow { display: flex; align-items: center; gap: 12px; margin: 14px 0 4px; }
.cp-hexrow label {
  font-family: var(--type); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-dim);
}
.cp-hexrow input {
  width: 120px; padding: 9px 11px;
  background: #050604; border: 1px solid var(--border); color: var(--text-bright);
  font-family: var(--type); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
}
.cp-hexrow input[type="color"] {
  width: 48px; height: 40px; padding: 2px; cursor: pointer;
}
.cp-hexrow input:focus {
  outline: none; border-color: var(--gold-dim);
  box-shadow: 0 0 0 1px rgba(201,169,97,0.2);
}
.cp-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cp-preset {
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,0.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
  transition: transform 0.12s, box-shadow 0.15s;
}
.cp-preset span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.cp-preset:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--gold), inset 0 1px 0 rgba(255,255,255,0.28); }
.cp-preset:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.cp-note:empty { display: none; }
.cp-note {
  margin-top: 14px; padding: 10px 12px;
  border-left: 2px solid var(--gold-dim);
  background: rgba(201,169,97,0.07);
}
.cp-warn {
  font-family: var(--type); font-size: 12.5px; line-height: 1.6;
  color: #e6cf9a; letter-spacing: 0.03em;
}
/* Gruppenkauf: Killfeed-Farbe je Mitglied direkt unter seiner SteamID */
.group-kf {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  font-family: var(--type); font-size: 12px; letter-spacing: 0.06em;
  text-transform: none; color: var(--text-dim);
}
.group-kf input[type="color"] {
  width: 44px; height: 32px; padding: 2px; flex: none; cursor: pointer;
  background: #050604; border: 1px solid var(--border);
}
.group-kf-hex { font-weight: 400; color: #c9a961; letter-spacing: 0.1em; }
/* Killfeed-Zeile im Farbwaehler der Bundle-Seite (Hoehe setzt kf-preview.js) */
.kf-pick-line { position: relative; width: 100%; overflow: hidden; margin: 0 0 14px; }
@media (max-width: 720px) {
  .colorpick { padding: 15px 14px 14px; }
  .cp-head { flex-wrap: wrap; }
  .cp-preset { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------------------
   Sprachauswahl in der Kopfzeile.
   Dieselbe Machart wie im Staff-Panel, aber mit ENGLISCH als Quelle -- der
   Laden ist auf Englisch geschrieben. Gehoert zu i18n.js und dict-shop.js.

   Die Flagge dient dem schnellen Finden, entschieden wird ueber den Namen
   daneben: eine Flagge ist ein Land, keine Sprache. Fuer Englisch waere die
   amerikanische genauso richtig wie die britische, und bei einem Laden mit
   moeglicherweise weltweitem Publikum wiegt das schwerer als bei uns intern.
   --------------------------------------------------------------------------- */
.lang-switch { position: relative; display: inline-block; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0;
  color: var(--text); cursor: pointer;
  font: inherit; letter-spacing: inherit;
  transition: color 0.15s;
}
.lang-btn:hover { color: var(--gold-bright); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  margin: 0; padding: 5px; list-style: none; min-width: 190px;
  background: var(--bg-panel); border: 1px solid var(--border-lit);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.lang-menu[hidden] { display: none; }
.lang-menu li {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; cursor: pointer;
  font-size: 14px; color: var(--text-dim);
}
.lang-menu li:hover, .lang-menu li:focus-visible {
  background: var(--bg-panel-2); color: var(--gold-bright); outline: none;
}
.lang-menu li.is-active { color: var(--gold-bright); }
/* Die Flagge ist ein gezeichnetes SVG, kein Emoji -- siehe die Begruendung in
   i18n.js. Feste Groesse, damit die Spalten im Menue nicht wandern. */
.lang-flag { display: inline-flex; align-items: center; width: 21px; height: 15px; flex: 0 0 21px; }
.lang-flag .flag, .lang-btn .flag { display: block; width: 21px; height: 15px; border-radius: 1px; }
.lang-code { min-width: 26px; font-size: 10px; letter-spacing: 0.12em; color: var(--gold-dim); }
.lang-name { white-space: nowrap; }
.lang-cur { letter-spacing: 0.1em; }

/* Auf schmalen Schirmen ist in der Kopfzeile wenig Platz. Dann nur die
   Flagge, ohne Kuerzel -- die Auswahl bleibt vollstaendig, sie oeffnet nur
   schmaler. */
@media (max-width: 560px) {
  .lang-btn .lang-cur { display: none; }
  .lang-menu { min-width: 170px; }
}

/* ---------- Leaderboard (26.08.2026) ----------------------------------------
   Bestenliste aus der Telemetrie. Zwei Umschalter (Zeitraum, Sortierung),
   ein Siegerpodest fuer die ersten drei, darunter die Tabelle. Auf schmalen
   Schirmen faellt das Podest weg und die Tabelle behaelt nur die Spalten,
   die man wirklich vergleicht. */
.lb-controls {
  display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: center; justify-content: space-between;
  margin-bottom: 26px;
}
.lb-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-tabs button {
  font-family: var(--body); font-size: 14px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  border: 1px solid var(--border); border-radius: 2px;
  padding: 8px 14px; cursor: pointer; transition: color .15s, border-color .15s;
}
.lb-tabs button:hover { color: var(--gold-bright); border-color: var(--border-lit); }
.lb-tabs button.on { color: var(--gold-bright); border-color: var(--card-border); background: rgba(201,169,97,0.08); }

.lb-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  align-items: end; margin-bottom: 26px;
}
.lb-plinth {
  border: 1px solid var(--border); border-radius: 3px;
  background: linear-gradient(180deg, var(--card-top), var(--card-bot));
  padding: 18px 14px; text-align: center;
}
.lb-plinth.p1 { border-color: var(--card-border); padding-top: 26px; padding-bottom: 26px; box-shadow: 0 0 26px rgba(201,169,97,0.12); }
.lb-plinth.p2 { border-color: #6d6d63; }
.lb-plinth.p3 { border-color: #7a5230; }
.lb-plinth .lb-rank {
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.24em;
  color: var(--text-dim); margin-bottom: 6px;
}
.lb-plinth.p1 .lb-rank { color: var(--gold); }
.lb-plinth .lb-name {
  font-family: var(--serif); font-size: 18px; text-transform: uppercase;
  color: var(--text-bright); word-break: break-word; margin-bottom: 8px;
}
.lb-plinth .lb-big { font-family: var(--serif); font-size: 30px; color: var(--gold); line-height: 1; }
.lb-plinth .lb-big span {
  display: block; font-family: var(--body); font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-top: 4px;
}
.lb-plinth .lb-sub { font-size: 14px; color: var(--text-dim); margin-top: 8px; }

.lb-table { border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.lb-head, .lb-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 76px 82px 72px 96px 82px;
  align-items: center; gap: 8px; padding: 11px 16px;
}
.lb-head {
  background: var(--bg-panel); border-bottom: 1px solid var(--border);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-label);
}
.lb-row { border-bottom: 1px solid #1d1f1c; font-size: 16px; }
.lb-row:last-child { border-bottom: 0; }
.lb-row:nth-child(even) { background: rgba(255,255,255,0.014); }
.lb-row.top .lb-cell-name { color: var(--gold-bright); }
.lb-cell-name { font-family: var(--serif); letter-spacing: 0.04em; color: var(--text-bright); word-break: break-word; }
.lb-kills { color: var(--gold); font-weight: 600; }
.lb-empty { padding: 26px 16px; color: var(--text-dim); font-style: italic; text-align: center; margin: 0; }
.lb-note { margin-top: 14px; font-size: 14px; color: var(--text-dim); }

@media (max-width: 860px) {
  .lb-podium { display: none; }
  .lb-head, .lb-row { grid-template-columns: 40px minmax(0,1fr) 58px 58px 58px; }
  .lb-head span:nth-child(6), .lb-row span:nth-child(6),
  .lb-head span:nth-child(7), .lb-row span:nth-child(7) { display: none; }
}

/* ---------- Leaderboard: alte Wipes ---------- */
.lb-seasons {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: -6px 0 22px;
}
.lb-seasons-label {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-label);
}
.lb-seasons .lb-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.lb-season-dates {
  font-size: 11px; letter-spacing: 0.1em; text-transform: none; color: var(--text-dim);
}

/* ---------- Most Wanted (Startseite) ----------------------------------------
   Fahndungsplakat statt Statistikkasten: ein Name, drei Zahlen, ein Weg zur
   Liste. Bleibt versteckt, solange der laufende Wipe keinen Ersten hat. */
.mostwanted { padding: 10px 0 54px; }
.mw-poster {
  position: relative; max-width: 720px; margin: 0 auto; text-align: center;
  padding: 30px 26px 28px;
  border: 1px solid var(--card-border); border-radius: 3px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(143,22,22,0.16), transparent 70%),
    linear-gradient(180deg, var(--card-top), var(--card-bot));
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
}
.mw-kicker {
  font-family: var(--type); font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--blood-bright); margin-bottom: 10px;
}
.mw-name {
  font-family: var(--serif); font-weight: 900;
  font-size: clamp(28px, 5vw, 46px); line-height: 1.05;
  text-transform: uppercase; color: var(--gold-bright);
  text-shadow: 0 0 24px rgba(201,169,97,0.25); word-break: break-word;
}
.mw-stats {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 34px;
  margin: 18px 0 14px;
}
.mw-stats b { font-family: var(--serif); font-size: 26px; color: var(--marble); display: block; line-height: 1; }
.mw-stats span {
  display: block; margin-top: 5px; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim);
}
.mw-line { color: var(--text-dim); font-size: 15px; margin: 0 0 18px; }

/* Rueckmeldung beim Geschenkempfaenger: gefunden, mehrdeutig, unbekannt.
   Gleiche Zeile wie jeder andere Hinweis unter einem Feld, nur eingefaerbt --
   ein eigener Kasten waere fuer eine Zeile Bestaetigung zu laut. */
.hint.ok { color: var(--teal-bright); }
.hint.warn { color: #d8a24a; }

/* ---------------------------------------------------------------------------
   Killfeed Studio (15.09.2026, Umbau 16.09.).
   Oben der "Bildschirm" mit drei Feed-Zeilen ueber die volle Breite, darunter
   die Auswahl: Farben in einer Reihe, Effekt und Animation nebeneinander.
   Vorher stand die Vorschau links neben einer langen Spalte und liess unter
   sich eine leere Wand. Die Zeilen selbst zeichnet kf-preview.js.
   --------------------------------------------------------------------------- */
.studio-hero { padding: 56px 0 8px; }
.studio-hero .eyebrow {
  font-family: var(--type); font-size: 13px; letter-spacing: 0.3em;
  text-transform: uppercase; color: var(--teal-label); margin-bottom: 10px;
}
.studio-hero h1 { font-size: clamp(34px, 5vw, 58px); margin: 0 0 14px; color: var(--text-bright); }
.studio { padding-top: 26px; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.studio-left { position: relative; }
.studio-screen {
  position: relative;
  padding: 34px 22px 18px;
  border: 1px solid #22313a;
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(61,154,160,0.12), transparent 60%),
    linear-gradient(180deg, #0d171c 0%, #080c0e 70%, #060707 100%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.02);
}
.studio-screen::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0 1px, transparent 1px 3px);
}
.studio-feed { display: flex; flex-direction: column; gap: 10px; }
.studio-line { position: relative; width: 100%; overflow: hidden; }
.studio-line:nth-child(1), .studio-line:nth-child(3) { opacity: 0.62; }
.studio-screen-foot {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: 14px; margin-top: 26px; padding-top: 16px; border-top: 1px solid #1b262c;
}
.studio-view { display: flex; border: 1px solid var(--border); }
.studio-view button {
  background: transparent; border: 0; color: var(--text-dim); cursor: pointer;
  padding: 9px 14px; font-family: var(--type); font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.studio-view button + button { border-left: 1px solid var(--border); }
.studio-view button.active { background: rgba(201,169,97,0.12); color: var(--gold-bright); }
.studio-name {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--type); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}
.studio-name input {
  width: 210px; padding: 9px 11px; background: #050604; border: 1px solid var(--border);
  color: var(--text-bright); font-family: var(--body); font-size: 17px; letter-spacing: 0.04em;
}
.studio-name input:focus { outline: none; border-color: var(--gold-dim); }
.studio-hint { color: var(--text-dim); font-size: 14px; margin-top: 12px; max-width: 760px; }

.studio-panel {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  align-items: start; counter-reset: st-step;
}
/* Namensfarbe hat 15 Kacheln und bekommt die ganze Reihe. */
.studio-panel .st-group:first-child { grid-column: 1 / -1; }
.st-group {
  position: relative;
  padding: 18px 18px 16px 18px;
  border-left: 2px solid rgba(201,169,97,0.35);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 45%), var(--bg-panel);
  border: 1px solid var(--border);
}
.st-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.st-head h3 { font-size: 19px; margin: 0; color: var(--text-bright); display: flex; align-items: baseline; gap: 10px; }
.st-head h3::before {
  counter-increment: st-step; content: counter(st-step, decimal-leading-zero);
  font-family: var(--type); font-size: 12px; letter-spacing: 0.2em; color: var(--gold);
}
.st-sub { font-family: var(--type); font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.04em; }
.st-chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.st-chips-label {
  grid-column: 1 / -1; margin: 8px 0 -2px;
  font-family: var(--type); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-dim);
}
.st-chip {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 8px;
  padding: 10px 11px 9px; cursor: pointer; text-align: left;
  background: #0b0c0a; border: 1px solid #2a2820; color: var(--text);
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.st-chip:hover:not(:disabled) { border-color: var(--border-lit); transform: translateY(-1px); }
.st-chip.active {
  border-color: var(--gold); background: rgba(201,169,97,0.1);
  box-shadow: inset 0 0 0 1px rgba(201,169,97,0.35);
}
.st-chip:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.st-chip:disabled { cursor: not-allowed; opacity: 0.38; }
.st-sw { grid-column: 1 / -1; display: block; width: 100%; height: 8px; margin-bottom: 7px; border: 1px solid rgba(0,0,0,0.6); }
.st-sw-custom { background: linear-gradient(90deg, #c9a961, #c62828, #78dcff, #7ee84a); }
.st-chip-name { min-width: 0; overflow-wrap: anywhere; font-family: var(--body); font-size: 16px; font-weight: 600; letter-spacing: 0.03em; color: var(--text-bright); }
.st-chip-price {
  font-family: var(--body); font-size: 15px; font-weight: 700; letter-spacing: 0.04em;
  color: #f1dfae; white-space: nowrap;
}
/* "Free" ist keine Zahl, darum gedaempft und nicht in Gold. */
.st-chip-price:not([data-paid]) { color: var(--text-dim); font-weight: 500; }
.st-chip.active .st-chip-price { color: #fff2cc; }
.st-chip:disabled .st-chip-price { color: var(--text-dim); }
/* RGB-Waehler fuer Basic RGB im Studio (Markup aus bundles-common.js) */
.st-rgb { margin-top: 14px; }
.st-rgb[hidden] { display: none; }
.st-rgb .colorpick { margin: 0; }
.st-note { font-family: var(--type); font-size: 12px; line-height: 1.6; color: var(--text-dim); margin-top: 10px; }
.st-note:empty { display: none; }
.st-note.is-warn { color: #d8a24a; }

.studio-order {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px;
  margin: 36px 0 30px; padding: 26px 28px;
  border: 1px solid rgba(201,169,97,0.3);
  border-left: 2px solid var(--gold);
  background: linear-gradient(180deg, rgba(201,169,97,0.05), transparent 40%), var(--bg-panel);
}
.studio-cart h3 { font-size: 22px; margin: 0 0 14px; color: var(--text-bright); }
.st-lines { list-style: none; margin: 0; padding: 0; }
.st-lines li { border-bottom: 1px solid var(--border); }
.st-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; }
.st-line span { flex: 1; font-size: 17px; }
.st-line b { font-family: var(--body); font-weight: 700; font-size: 18px; letter-spacing: 0.03em; color: #f1dfae; }
.st-line input { accent-color: var(--gold); width: 16px; height: 16px; }
.st-lines .st-empty, .st-lines .st-owned { padding: 10px 0; color: var(--text-dim); font-size: 14px; border-bottom: 0; }
.st-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0 4px; border-top: 1px solid rgba(201,169,97,0.3); margin-top: 4px; }
.st-total span { font-family: var(--type); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.st-total strong { font-family: var(--serif); font-size: 34px; line-height: 1; color: #f1dfae; text-shadow: 0 0 16px rgba(201,169,97,0.22); }
.studio-checkout form.reserve { margin: 0; }

/* ---------- Season Pass (15.09.2026) ---------- */
.pass-season { font-family: var(--type); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); margin-top: 14px; }
.pass { padding-top: 26px; }
.pass-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pass-me, .pass-rules {
  padding: 22px 22px 20px;
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), transparent 45%), var(--bg-panel);
}
.pass-me { border-color: rgba(201,169,97,0.34); }
.pass-me h3, .pass-rules h3 { font-size: 21px; margin: 0 0 14px; color: var(--text-bright); }
.pass-form { margin: 0; }
.pass-level { display: flex; align-items: baseline; gap: 10px; }
.pass-level-num { font-family: var(--serif); font-weight: 900; font-size: 64px; line-height: 1; color: var(--gold-bright); }
.pass-level-of { font-family: var(--type); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); }
.pass-bar { position: relative; height: 10px; margin: 16px 0 8px; background: #0a0b09; border: 1px solid var(--border); }
.pass-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.pass-bar-legend { display: flex; justify-content: space-between; font-family: var(--type); font-size: 12px; color: var(--text-dim); }
.pass-next { margin: 16px 0 0; font-size: 17px; }
.pass-next b { color: var(--text-bright); }
.pass-stats { list-style: none; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pass-stats b { display: block; font-family: var(--serif); font-size: 26px; color: var(--marble); line-height: 1; }
.pass-stats span { display: block; margin-top: 5px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.pass-rules ul { list-style: none; margin: 0; padding: 0; }
.pass-rules li { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pass-rules li:last-child { border-bottom: 0; }
.pass-rules li > b { font-family: var(--serif); font-size: 18px; color: var(--gold-bright); }
.pass-rules li b.inline { font-family: inherit; font-size: inherit; color: var(--gold-bright); }
.pass-rules li span { font-size: 16px; }
.pass-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.pass-step {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid #2a2820; background: linear-gradient(180deg, var(--card-top), var(--card-bot));
}
.pass-step-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #22211b; }
.pass-lvl {
  display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px;
  font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--text-bright);
  border: 1px solid var(--border-lit);
}
.pass-xp { font-family: var(--type); font-size: 12px; color: var(--text-dim); }
.pass-flag { margin-left: auto; font-family: var(--type); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ok); }
.pass-flag.next { color: var(--gold-bright); }
.pass-step h4 { margin: 12px 12px 14px; font-size: 16px; line-height: 1.3; color: var(--text-bright); }
.pass-step-note { margin: -6px 12px 14px; font-size: 14px; color: var(--text-dim); }
.pass-step-media .kfp { aspect-ratio: 16 / 10; }
.pass-step-media .kfp .kfp-cap { display: none; }
.pass-step.is-done { border-color: rgba(95,154,82,0.5); }
.pass-step.is-done .pass-lvl { background: rgba(95,154,82,0.18); border-color: var(--ok); }
.pass-step.is-next { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(201,169,97,0.3), 0 12px 30px rgba(0,0,0,0.45); }
.pass-step.is-next .pass-lvl { background: rgba(201,169,97,0.16); border-color: var(--gold); }
.pass-step.is-locked .pass-step-media { opacity: 0.55; }
.pass-step.is-final { grid-column: 1 / -1; border-color: rgba(201,169,97,0.55); }
.pass-step.is-final .pass-step-media .kfp { aspect-ratio: 32 / 7; }
.pass-step.is-final h4 { font-family: var(--serif); font-size: 22px; color: var(--gold-bright); }
/* Pass v3 (16.09.2026): Sinnbilder statt Feed-Vorschau, Rang, Ehrentafel */
.pass-step-media {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16 / 9; margin: 0;
  background:
    radial-gradient(70% 90% at 50% 100%, color-mix(in srgb, var(--tone, #c9a961) 14%, transparent), transparent 70%),
    linear-gradient(180deg, #0b0d0c, #070807);
  border-bottom: 1px solid #22211b;
}
.pass-emblem { width: 58px; height: 58px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--tone, #c9a961) 45%, transparent)); }
.pass-key { font-family: var(--type); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--text-dim); }
.pass-step.is-locked .pass-emblem { opacity: 0.45; filter: none; }
.pass-step.is-locked .pass-key { opacity: 0.6; }
.pass-step.kind-rank .pass-step-media { background: radial-gradient(70% 90% at 50% 100%, rgba(201,169,97,0.16), transparent 70%), linear-gradient(180deg, #0f0d09, #070807); }
.pass-step.is-final .pass-step-media { aspect-ratio: 32 / 7; }
.pass-rank {
  margin-left: auto; align-self: center; padding: 5px 11px;
  border: 1px solid var(--gold); color: var(--gold-bright);
  font-family: var(--type); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
}
.pass-items { list-style: none; margin: -6px 12px 14px; padding: 8px 0 0; border-top: 1px solid #22211b; }
.pass-items li { font-family: var(--type); font-size: 12px; color: var(--text-dim); letter-spacing: 0.04em; line-height: 1.7; }
.pass-items li::before { content: "\2013 "; color: var(--gold-dim); }
/* Pass v4 (21.09.2026): jede Stufe ein komplettes Kit in vier Zeilen */
.pass-kit { margin: 0 12px 14px; padding-top: 10px; border-top: 1px solid #22211b; display: grid; gap: 10px; }
.pass-kit dt { font-family: var(--type); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 2px; }
.pass-kit dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--text); }
.pass-step.is-locked .pass-kit dd { color: var(--text-dim); }
.pass-step.is-final .pass-kit { grid-template-columns: repeat(4, 1fr); gap: 10px 20px; }
@media (max-width: 720px) { .pass-step.is-final .pass-kit { grid-template-columns: 1fr; } }
.pass-roll { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.pass-roll-empty { color: var(--text-dim); font-size: 16px; margin: 0; }
.pass-roll-season { padding: 18px 20px; border: 1px solid rgba(201,169,97,0.34); background: linear-gradient(180deg, rgba(201,169,97,0.06), transparent 50%), var(--bg-panel); }
.pass-roll-tag { display: block; font-family: var(--type); font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-label); margin-bottom: 10px; }
.pass-roll-names { list-style: none; margin: 0; padding: 0; }
.pass-roll-names li { font-family: var(--serif); font-size: 19px; color: var(--gold-bright); padding: 4px 0; border-bottom: 1px solid var(--border); }
.pass-roll-names li:last-child { border-bottom: 0; }
/* XP-Verlauf (04.10.2026), nur fuer angemeldete Spieler */
.pass-log { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); background: var(--bg-panel); }
.pass-log li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 11px 18px; border-bottom: 1px solid var(--border); }
.pass-log li:last-child { border-bottom: 0; }
.pass-log-date { font-family: var(--type); font-size: 12.5px; letter-spacing: 0.06em; color: var(--text-dim); }
.pass-log-what b { display: block; color: var(--text-bright); font-weight: 600; }
.pass-log-what span { display: block; font-size: 14px; color: var(--text-dim); }
.pass-log-xp { font-family: var(--serif); font-size: 18px; color: var(--gold-bright); white-space: nowrap; }
.pass-log li.is-zero .pass-log-xp { color: var(--text-dim); }
.pass-log li.kind-bonus .pass-log-what b { color: var(--gold-bright); }
.pass-log-total { display: flex; justify-content: space-between; padding: 12px 18px 0; font-family: var(--type); font-size: 13px; letter-spacing: 0.08em; color: var(--text-dim); }
.pass-log-total b { color: var(--gold-bright); }
@media (max-width: 560px) { .pass-log li { grid-template-columns: 1fr auto; } .pass-log-date { grid-column: 1 / -1; } }
@media (max-width: 980px) { .pass-top { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .pass-step.is-final { grid-column: auto; }
  .pass-rules li { grid-template-columns: 1fr; gap: 2px; }
  .pass-level-num { font-size: 52px; }
}

/* Einstieg ins Studio im Katalog, ueber den Killfeed-Karten */
.studio-teaser {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 18px;
  margin: 0 0 22px; padding: 16px 20px;
  border: 1px solid #22313a; color: var(--text); text-decoration: none;
  background:
    radial-gradient(80% 140% at 0% 50%, rgba(61,154,160,0.16), transparent 70%),
    linear-gradient(180deg, #0d171c, #080c0e);
  transition: border-color 0.15s;
}
.studio-teaser:hover { border-color: var(--teal-bright); }
.studio-teaser-eyebrow { grid-column: 1; font-family: var(--type); font-size: 11.5px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--teal-label); }
.studio-teaser strong { grid-column: 1; font-family: var(--serif); font-size: 19px; color: var(--text-bright); }
.studio-teaser-go { grid-column: 2; grid-row: 1 / span 2; font-family: var(--type); font-size: 13px; color: var(--gold); white-space: nowrap; }

@media (max-width: 980px) {
  .studio-panel { grid-template-columns: 1fr; }
  .studio-order { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .studio-screen { padding: 22px 12px 14px; }
  .studio-name, .studio-name input { width: 100%; }
  .st-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-teaser { grid-template-columns: 1fr; }
  .studio-teaser-go { grid-column: 1; grid-row: auto; }
}

/* Fertige Clothing-Sets: Auswahl unter dem Text, Vorschau wechselt in der Vitrine */
.setpick { display: grid; gap: 12px; margin: 18px auto 8px; max-width: 520px; text-align: left; }
.setpick-thumbs { justify-content: center; }
.setpick label { display: grid; gap: 6px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #9a9484; }
.setpick select { padding: 10px 12px; background: #11120f; color: #ece6d8; border: 1px solid #34322a; font: inherit; letter-spacing: 0; text-transform: none; }
.setpick-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.setpick-thumbs button { padding: 0; border: 1px solid #34322a; background: none; cursor: pointer; width: 96px; height: 54px; overflow: hidden; }
.setpick-thumbs button.on { border-color: #c9a961; box-shadow: 0 0 0 1px #c9a961; }
.setpick-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine img.is-wide { aspect-ratio: 16 / 9; object-fit: contain; background: #070806; }
.notice.commission { margin: 14px auto; max-width: 560px; text-align: left; border-color: #c9a961; }
.gallery-thumbs { margin: 14px 0 4px; }
.notice.commission a { color: #c9a961; }

/* Galerie- und Set-Bilder: breite Buehne, Klick oeffnet das Bild in voller Groesse */
.detail-case.is-gallery { width: min(1080px, 94vw); }
.detail-case.is-gallery .vitrine img { cursor: zoom-in; }
.setpick-thumbs button { width: 150px; height: 84px; }
.lightbox { position: fixed; inset: 0; z-index: 999; background: rgba(4, 5, 4, .94); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 2vh 2vw; }
.lightbox img { max-width: 96vw; max-height: 96vh; object-fit: contain; box-shadow: 0 0 0 1px #c9a961; }
.detail-case.is-gallery .vitrine img.is-wide { aspect-ratio: auto; height: auto; max-height: 82vh; }

/* Kopfzeile: eine Zeile, Name/Admin/Logout rechts am Rand (18.09.2026). Der Balken darf breiter sein als der Seiteninhalt. */
header.site .bar { max-width: 1680px; }
nav.main { flex: 1; flex-wrap: nowrap; justify-content: flex-end; gap: 22px; white-space: nowrap; }
nav.main .auth-slot { margin-left: 14px; padding-left: 22px; border-left: 1px solid rgba(201,169,97,0.25); }
@media (max-width: 1280px) { nav.main { gap: 16px; font-size: 13.5px; letter-spacing: 0.1em; } .logo-word { font-size: 28px; } }
@media (max-width: 1040px) { nav.main { flex-wrap: wrap; white-space: normal; } nav.main .auth-slot { border-left: 0; padding-left: 0; margin-left: 0; } }

/* Eingabefelder je Artikel im Bestellformular */
.reqfields { display: grid; gap: 8px; margin-bottom: 16px; }
.reqfields input[type=text], .reqfields textarea { width: 100%; padding: 10px 12px; background: #11120f; color: #ece6d8; border: 1px solid #34322a; font: inherit; resize: vertical; }
.reqfields .cp-head { margin-top: 6px; }
.rq-colour { display: flex; align-items: center; gap: 14px; }
.rq-colour input[type=color] { width: 64px; height: 40px; padding: 0; border: 1px solid #34322a; background: none; cursor: pointer; }
.rq-swatch { font-family: monospace; font-weight: bold; font-size: 16px; color: #c9a961; background: #0b0c0a; padding: 8px 12px; border: 1px solid #34322a; }

/* So funktioniert es im Spiel */
.howto { max-width: 640px; margin: 18px auto; padding: 16px 20px 14px; text-align: left; background: rgba(12,13,11,.72); border: 1px solid #34322a; border-left: 3px solid #2f8f99; }
.howto-title { margin: 0 0 10px; font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #5cc0c4; font-weight: 600; }
.howto ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; line-height: 1.5; }
.howto li::marker { color: #c9a961; font-weight: bold; }

/* ---------- Kopfzeile: Links mittig, Konto rechts am Rand ---------- */
nav.main { justify-content: flex-start; }
nav.main > a:first-child { margin-left: auto; }
nav.main .auth-slot { margin-left: auto; }
@media (max-width: 1040px) { nav.main > a:first-child { margin-left: 0; } }

/* ---------- Info-Seiten: Rules, FAQ, Aion Grid ---------- */
.info { padding: 26px 0 80px; }
.info-wrap { max-width: 1040px; display: grid; gap: 22px; }
.info-toc { display: flex; flex-wrap: wrap; gap: 8px; }
.info-toc a { font-family: var(--type); font-size: 13px; letter-spacing: 0.06em; color: var(--text); padding: 7px 12px; border: 1px solid rgba(201,169,97,0.25); background: rgba(12,12,10,0.6); text-decoration: none; }
.info-toc a:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.info-intro { color: var(--text); font-size: 16px; line-height: 1.7; margin: 0; }
.info-card { background: rgba(12,12,10,0.78); border: 1px solid rgba(201,169,97,0.18); padding: 26px 30px; scroll-margin-top: 96px; }
.info-card h2 { font-size: 24px; margin: 0 0 14px; color: var(--text-bright); }
.info-card h3 { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); margin: 22px 0 8px; }
.info-card p, .info-card li { color: var(--text); font-size: 15.5px; line-height: 1.7; }
.info-card ul { margin: 0 0 6px; padding-left: 20px; }
.info-card li { margin: 5px 0; }
.info-card li.sub { margin-left: 22px; list-style: circle; font-size: 14.5px; }
.info-card a { color: var(--gold-bright); }
.info-card strong { color: var(--text-bright); }
.info-facts { list-style: none; padding: 0 !important; margin: 18px 0 !important; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.info-facts li { margin: 0; padding: 14px 16px; border: 1px solid rgba(201,169,97,0.22); background: rgba(0,0,0,0.35); display: grid; gap: 4px; }
.info-facts b { font-family: var(--display, Georgia, serif); font-size: 26px; color: var(--gold-bright); }
.info-facts span { font-size: 13px; letter-spacing: 0.05em; color: #b0a894; }
.info-fig { margin: 20px 0 0; }
.info-fig img { display: block; width: 100%; height: auto; border: 1px solid rgba(201,169,97,0.22); }
.info-fig figcaption { font-size: 13px; color: #8a8474; margin-top: 8px; text-align: center; }
.info-table { overflow-x: auto; margin: 16px 0 4px; }
.info-table table { width: 100%; border-collapse: collapse; min-width: 640px; }
.info-table th, .info-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(201,169,97,0.15); font-size: 14.5px; color: var(--text); }
.info-table th { font-family: var(--type); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
.info-table td:first-child { color: var(--text-bright); font-weight: 600; white-space: nowrap; }
details.faq { border-top: 1px solid rgba(201,169,97,0.15); }
details.faq:first-of-type { border-top: 0; }
details.faq summary { cursor: pointer; list-style: none; padding: 14px 28px 14px 0; position: relative; color: var(--text-bright); font-size: 16.5px; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; position: absolute; right: 4px; top: 12px; color: var(--gold-bright); font-size: 20px; }
details.faq[open] summary::after { content: "\2212"; }
details.faq p { margin: 0 0 16px; }
footer.site .flinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 10px 0; }
footer.site .flinks a { font-family: var(--type); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); text-decoration: none; }
footer.site .flinks a:hover { color: var(--text-bright); }
@media (max-width: 640px) { .info-card { padding: 20px 18px; } }

/* ---------- Eigene PBO und Bedingungen bei Auftragsarbeiten ---------- */
.ownpbo-check { display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--text-bright); font-size: 15.5px; }
.ownpbo-check input { width: 18px; height: 18px; accent-color: #c9a961; }
#ownpbo-more { margin-top: 12px; display: grid; gap: 8px; }
#ownpbo-more[hidden] { display: none; }
#f-pbofile { color: var(--text); font-size: 14px; }
.detail-note.is-error { color: #e2585c; }
.notice.terms { font-size: 14.5px; line-height: 1.65; }
.notice.terms br { display: block; content: ""; margin-top: 10px; }

/* ---------- Beitreten: Schritte unter dem Knopf ---------- */
button.btn.join { cursor: pointer; }
.join-steps { margin-top: 22px; padding: 18px 22px; border: 1px solid rgba(201,169,97,0.25); background: rgba(0,0,0,0.35); text-align: left; }
.join-steps[hidden] { display: none; }
.join-head { margin: 0 0 10px; color: var(--gold-bright); font-size: 15.5px; }
.join-steps ol { margin: 0; padding-left: 20px; color: var(--text); font-size: 15px; line-height: 1.75; }
.join-packs { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.join-packs a { font-family: var(--type); font-size: 12.5px; letter-spacing: 0.08em; padding: 5px 10px; border: 1px solid rgba(201,169,97,0.3); color: var(--gold-bright); text-decoration: none; }
.join-packs a:hover { border-color: var(--gold-bright); color: var(--text-bright); }

/* ---------- Leaderboard: Ansicht umschalten, Hall of Shame ---------- */
.lb-view { margin-bottom: 26px; }
.lb-view button { font-size: 15px; padding: 10px 20px; }
.lb-view button.is-shame.on { color: #e2585c; border-color: #8f1616; background: rgba(143,22,22,0.14); }
.lb-view button.is-shame:hover { color: #e2585c; }
.shame-title { color: #e2585c; text-shadow: 0 0 22px rgba(198,40,40,0.35); }
.shame-lead { margin-bottom: 14px; }
.shame-tally { font-family: var(--type); letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; color: #8a8474; margin: 0 0 26px; }
.shame-tally b { font-family: var(--display, Georgia, serif); font-size: 34px; color: #e2585c; letter-spacing: 0; margin-right: 8px; vertical-align: -4px; }
.shame-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px; margin-bottom: 26px; }
.shame-slab {
  position: relative; padding: 46px 22px 20px; text-align: center; transform: rotate(var(--tilt, 0deg));
  background: linear-gradient(180deg, #24221d 0%, #15140f 100%); border: 1px solid #3a372e; border-top-left-radius: 120px 70px; border-top-right-radius: 120px 70px;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.6), 0 10px 24px rgba(0,0,0,0.5); overflow: hidden; transition: transform 0.2s, border-color 0.2s;
}
.shame-slab::before { content: ""; position: absolute; left: 58%; top: 0; width: 1px; height: 100%; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.85) 18%, rgba(0,0,0,0.85) 40%, transparent 62%); transform: skewX(-14deg); }
.shame-slab::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, transparent, #8f1616, transparent); }
.shame-slab:hover { transform: rotate(0deg) translateY(-3px); border-color: #8f1616; }
.shame-stamp { position: absolute; top: 14px; left: 50%; transform: translateX(-50%) rotate(-4deg); font-family: var(--type); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: #e2585c; border: 1px solid #8f1616; padding: 3px 10px; background: rgba(143,22,22,0.16); white-space: nowrap; }
.shame-name { font-size: 22px; margin: 6px 0 10px; color: #b9b2a0; text-decoration: line-through; text-decoration-color: #c62828; text-decoration-thickness: 2px; word-break: break-word; }
.shame-reason { font-family: var(--type); font-size: 14px; line-height: 1.55; color: var(--text); min-height: 44px; margin: 0 0 14px; }
.shame-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0; padding-top: 12px; border-top: 1px solid #2c2a22; font-family: var(--type); font-size: 12px; letter-spacing: 0.08em; color: #8a8474; }
.shame-meta b { color: #d8c48c; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; }
.shame-slab.is-perma .shame-meta b { color: #e2585c; }
.shame-empty { grid-column: 1 / -1; text-align: center; padding: 50px 20px; border: 1px dashed #3a372e; color: var(--text); }
.shame-empty-mark { width: 54px; height: 70px; margin: 0 auto 16px; border: 1px solid #3a372e; border-top-left-radius: 30px 20px; border-top-right-radius: 30px 20px; background: linear-gradient(180deg, #24221d, #15140f); }

/* ---------- Startseite: Top 3 ---------- */
.home-top3 .lb-podium { max-width: 860px; margin-left: auto; margin-right: auto; }
.home-top3-links { display: flex; justify-content: center; align-items: center; gap: 26px; margin: 28px 0 0; }
.home-shame-link { font-family: var(--type); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: #e2585c; text-decoration: none; border-bottom: 1px solid rgba(198,40,40,0.4); padding-bottom: 2px; }
.home-shame-link:hover { color: #ff7b7f; }
.shame-slab { display: flex; flex-direction: column; }
.shame-reason { flex: 1; }
.shame-meta { font-size: 11.5px; white-space: nowrap; }
.shame-meta b { letter-spacing: 0.08em; }

/* ---------- Shop: kompakter Bundle-Bereich, damit die Artikel nach einer Bildschirmhoehe beginnen ---------- */
.shop-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 26px; }
.shop-jump-label { font-family: var(--type); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #8a8474; margin-right: 6px; }
.shop-jump a { font-family: var(--type); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); text-decoration: none; padding: 7px 13px; border: 1px solid rgba(201,169,97,0.25); background: rgba(12,12,10,0.6); }
.shop-jump a:hover { color: var(--gold-bright); border-color: var(--gold-dim); }
.skin-group, #bundles { scroll-margin-top: 96px; }
.shop-bundle-lead { margin-bottom: 22px; max-width: 980px; }
.shop-squad { color: var(--teal-bright); }
body[data-page="shop"] .bundle-feature { margin-bottom: 20px; }
body[data-page="shop"] .bundle-feature .bundle-card { max-width: none; padding: 18px 30px; gap: 28px; }
body[data-page="shop"] .bundle-feature .bundle-card .bundle-icon { flex: 0 0 150px; }
body[data-page="shop"] .bundle-card.featured .bundle-icon { width: 150px; height: 150px; }
body[data-page="shop"] .bundle-card.featured h3 { font-size: 27px; margin-bottom: 4px; }
body[data-page="shop"] .bundle-card.featured .bundle-price { font-size: 30px; }
body[data-page="shop"] .bundle-card.featured .bundle-body { display: grid; grid-template-columns: 1fr auto; column-gap: 30px; align-items: center; }
body[data-page="shop"] .bundle-card.featured .bundle-body > * { grid-column: 1; }
body[data-page="shop"] .bundle-card.featured .bundle-price { grid-column: 2; grid-row: 1 / span 3; text-align: right; }
body[data-page="shop"] .bundle-card.featured .btn-scroll { grid-column: 2; grid-row: 4 / span 3; align-self: start; min-width: 250px; }
body[data-page="shop"] .bundle-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
body[data-page="shop"] .bundle-grid .bundle-card { padding: 18px 12px 16px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px); }
body[data-page="shop"] .bundle-grid .bundle-icon { width: 112px; height: 112px; margin: 0 auto 10px; }
body[data-page="shop"] .bundle-grid .bundle-card h3 { font-size: 17px; margin-bottom: 4px; }
body[data-page="shop"] .bundle-grid .bundle-role,
body[data-page="shop"] .bundle-grid .bundle-tagline,
body[data-page="shop"] .bundle-grid .btn-scroll { display: none; }
body[data-page="shop"] .bundle-grid .bundle-scarcity { font-size: 11.5px; }
body[data-page="shop"] .bundle-grid .bundle-save { font-size: 12.5px; margin-top: auto; }
body[data-page="shop"] .bundle-grid .bundle-card .bundle-price { font-size: 21px; margin: 4px 0 0; }
@media (max-width: 1180px) { body[data-page="shop"] .bundle-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  body[data-page="shop"] .bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-page="shop"] .bundle-card.featured .bundle-body { display: block; }
  body[data-page="shop"] .bundle-card.featured .bundle-price { text-align: left; }
}
body[data-page="shop"] .bundle-card.featured .bundle-body { grid-auto-rows: min-content; align-content: center; }
body[data-page="shop"] .bundle-card.featured .bundle-price { grid-row: 1 / span 2; align-self: end; }
body[data-page="shop"] .bundle-card.featured .btn-scroll { grid-row: 3 / span 2; margin-top: 6px; }
body[data-page="shop"] .bundle-card.featured .bundle-tagline { margin-bottom: 6px; }
@media (max-width: 760px) { body[data-page="shop"] .bundle-card.featured .bundle-price, body[data-page="shop"] .bundle-card.featured .btn-scroll { grid-row: auto; } }
body[data-page="shop"] .bundle-feature .bundle-card.founder { padding-right: 96px; }
@media (max-width: 760px) { body[data-page="shop"] .bundle-feature .bundle-card.founder { padding-right: 30px; } }

/* Inhaltsliste eines Skin-Pakets (Produktseite), aufklappbar */
.pack-contents { margin: 18px 0 8px; border: 1px solid rgba(201,169,97,0.25); padding: 0 16px; background: rgba(0,0,0,0.25); }
.pack-contents summary { font-family: var(--type); letter-spacing: 0.08em; }
.pack-contents .pc-sum { margin: 0 0 10px; color: var(--text-dim); font-size: 14px; }
.pack-contents .pc-wrap { max-height: 460px; overflow: auto; margin-bottom: 14px; }
.pc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pc-table th, .pc-table td { text-align: left; vertical-align: top; padding: 7px 8px; border-top: 1px solid #22211b; }
.pc-table thead th { position: sticky; top: 0; background: #14130f; color: var(--gold); font-weight: 600; border-top: 0; }
.pc-table tbody th { color: var(--text-bright); font-weight: 600; white-space: nowrap; }
.pc-table .pc-n { color: var(--gold-bright); text-align: right; width: 2.5em; }
.pc-table .pc-skins { color: var(--text-dim); line-height: 1.55; }
@media (max-width: 640px) { .pc-table tbody th { white-space: normal; } }