/* Terminal-Look */
:root {
  --bg: #030503; --surface: #071007; --text: #b6ffc8; --muted: #4f9a62; --line: #134a22;
  --accent: #39ff6a; --accent-text: #021003; --deal: #ffcc00; --deal-text: #050500;
  --radius: 0px; --gap: 18px; --cols: 3; --card-ratio: 1 / 1;
  --font: 'JetBrains Mono', ui-monospace, monospace; --font-head: 'VT323', 'JetBrains Mono', monospace;
  --story-ring: var(--accent);
  --glow: 0 0 6px rgba(57, 255, 106, .55), 0 0 18px rgba(57, 255, 106, .25);
  --cg-bg-theme: #020602; --cg-fg-theme: #39ff6a; --cg-dim-theme: #145c27;
  color-scheme: dark;
}
body { font-size: 14px; }
/* Scanlines + leichtes Bildschirm-Vignette */
body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px), radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.55)); }
::selection { background: var(--accent); color: var(--accent-text); }

.site-header { border-bottom: 1px dashed var(--line); max-width: none; padding: 14px 24px; }
.shop-name { font-size: 2.6rem; color: var(--accent); text-shadow: var(--glow); letter-spacing: .04em; }
.shop-name::before { content: 'root@'; color: var(--muted); font-size: .55em; text-shadow: none; }
.tagline::after { content: '█'; margin-left: 2px; animation: blink 1s steps(1) infinite; color: var(--accent); }
.main-nav a { color: var(--muted); } .main-nav a::before { content: './'; } .main-nav a:hover { color: var(--accent); text-shadow: var(--glow); }
.cart-btn { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: var(--glow); }
.cart-btn::before { content: '['; } .cart-btn::after { content: ']'; }
.badge { background: var(--accent); color: var(--accent-text); border-radius: 0; }

.stories { max-width: none; padding: 16px 24px; border-bottom: 1px dashed var(--line); }
.ring { border-radius: 0; padding: 2px; box-shadow: var(--glow); }
.ring img, .ring video { border-radius: 0; filter: grayscale(1) sepia(1) hue-rotate(70deg) saturate(3) brightness(.9); }

main { max-width: 1280px; }
.section-head h2 { font-size: 2.6rem; color: var(--accent); text-shadow: var(--glow); font-weight: 400; }
.section-head h2::before { content: '> '; color: var(--muted); }
.chip { border-radius: 0; border-color: var(--line); color: var(--muted); }
.chip::before { content: '--'; } .chip.on { box-shadow: var(--glow); }

.card { border: 1px solid var(--line); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--accent); box-shadow: var(--glow); }
.card-media { border-bottom: 1px dashed var(--line); }
.card-media img { filter: grayscale(.6) sepia(.4) hue-rotate(60deg) saturate(1.6) contrast(1.1); transition: filter .3s; }
.card:hover .card-media img { filter: none; }
.card-cat::before { content: '#'; }
.card-title { font-family: var(--font); font-size: 1rem; font-weight: 600; color: var(--text); text-transform: uppercase; }
.price { color: var(--accent); text-shadow: var(--glow); }
.deal { border-radius: 0; } .deal::before { content: '!'; margin-right: 4px; }
.has-video { border-radius: 0; background: var(--accent); color: var(--accent-text); }

.btn { border-radius: 0; color: var(--accent); border-color: var(--accent); text-transform: uppercase; font-size: .8rem; letter-spacing: .05em; }
.btn::before { content: '[ '; } .btn::after { content: ' ]'; }
.btn.primary, .btn.add:hover { background: var(--accent); color: var(--accent-text); box-shadow: var(--glow); }
input, textarea, select { background: #020402; border-color: var(--line); border-radius: 0; color: var(--accent); caret-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow); }

.modal, .drawer { background: var(--bg); border: 1px solid var(--accent); box-shadow: var(--glow); }
.drawer-head h2, .pd-info h2 { font-weight: 400; color: var(--accent); text-shadow: var(--glow); font-size: 2rem; }
.drawer-head h2::before { content: '$ cat '; color: var(--muted); font-size: .6em; text-shadow: none; }
.offer { border-color: var(--deal); color: var(--deal); }
.delivery, .coins, .stepper { border-radius: 0; }
.news-item { border: 1px dashed var(--line); background: transparent; }
.news-item h3 { font-weight: 400; color: var(--accent); font-size: 1.8rem; }
.news-item time::before { content: '['; } .news-item time::after { content: ']'; }
.site-footer { border-top: 1px dashed var(--line); max-width: none; padding: 24px; }
.foot-name { color: var(--accent); text-shadow: var(--glow); font-size: 1.8rem; }
.foot-name::before { content: '// '; color: var(--muted); }

@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tagline::after { animation: none; } }
@media (max-width: 560px) { .site-header { padding: 12px 16px; } .shop-name { font-size: 2rem; } }