/* ============================================================
   Basis: Farben, Schriften, Animationen, Buttons, Überschriften
   Alle Werte 1:1 aus dem Design "JMX Tebex Store v3".
   ============================================================ */

:root {
  /* Hintergründe */
  --bg: #07040d;
  --bg-deep: #05020a;
  --bg-bar: #06030b;
  --panel: #0d0716;
  --panel-2: #0b0614;
  --panel-3: #140b22;
  --panel-hover: #1c0d30;

  /* Text */
  --text: #ece6f5;
  --text-strong: #f4effa;
  --muted: #a99bbf;
  --muted-2: #8f81a8;
  --muted-3: #6f6386;
  --soft: #b9acd0;
  --soft-2: #c4b5dd;
  --soft-3: #d6cbe6;
  --lilac: #e9d5ff;
  --lilac-2: #d8b4fe;
  --chip-text: #e2d6f3;

  /* Akzente */
  --accent: #c084fc;
  --accent-2: #22d3ee; /* wird aus config.js (ACCENT_2) überschrieben */
  --purple: #a855f7;
  --violet: #7c3aed;
  --fuchsia: #d946ef;
  --pink: #e879f9;
  --magenta: #c026d3;
  --ok: #86efac;

  /* Linien */
  --line: rgba(168, 85, 247, .2);
  --line-soft: rgba(168, 85, 247, .14);
  --line-strong: rgba(168, 85, 247, .3);
  --line-hover: rgba(192, 132, 252, .6);

  /* Schriften */
  --font-display: 'Chakra Petch', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-body: 'IBM Plex Sans', sans-serif;

  /* Bewegung */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Verläufe */
  --grad-primary: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%), linear-gradient(110deg, #7c3aed 0%, #a855f7 45%, #d946ef 100%);
  --grad-brand: linear-gradient(110deg, #7c3aed, #d946ef);
  --grad-brand-diag: linear-gradient(135deg, #7c3aed, #d946ef);
  --grad-card: linear-gradient(165deg, #170b28, #0b0614 75%);
  --grad-panel: linear-gradient(160deg, #170b28, #0b0614 70%);
  --grad-product: linear-gradient(180deg, #140b22, #0d0717);
  --grad-media: radial-gradient(circle at 50% 65%, rgba(147, 51, 234, .45), #0b0614 70%);
  --grad-media-2: radial-gradient(circle at 50% 60%, rgba(147, 51, 234, .45), #0b0614 70%);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--lilac); }
::selection { background: var(--purple); color: #fff; }
input, button { font-family: inherit; }
button { background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
img { display: block; }
img.is-broken { visibility: hidden; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Für Screenreader sichtbar, optisch versteckt */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Animationen ---------- */
@keyframes jmxMarqueeRev { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes jmxMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes jmxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jmxPop { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes jmxPage { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes jmxSpin { to { transform: rotate(360deg); } }
@keyframes jmxSpinRev { to { transform: rotate(-360deg); } }
@keyframes jmxPulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes jmxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes jmxShine { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.anim-page { animation: jmxPage .5s var(--ease-out); }
.anim-fade { animation: jmxFade .4s ease-out; }
.anim-pop { animation: jmxPop .18s var(--ease); transform-origin: top; }

/* Einblenden beim Scrollen (siehe js/effects/reveal.js) */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Abgeschrägte Ecken ("Notch") ----------
   --n bestimmt die Größe der Schräge. */
.notch { clip-path: polygon(var(--n, 12px) 0, 100% 0, 100% calc(100% - var(--n, 12px)), calc(100% - var(--n, 12px)) 100%, 0 100%, 0 var(--n, 12px)); }
.n6 { --n: 6px; } .n7 { --n: 7px; } .n8 { --n: 8px; } .n10 { --n: 10px; } .n12 { --n: 12px; }
.n14 { --n: 14px; } .n16 { --n: 16px; } .n18 { --n: 18px; } .n20 { --n: 20px; } .n24 { --n: 24px; }

/* Sechseck (Docs-Icons) */
.hex { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* ---------- Layout-Helfer ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; width: 100%; }
.grad-text {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: .08em;
  padding: 16px 30px; font-size: 15px;
  cursor: pointer; user-select: none; white-space: nowrap; text-decoration: none;
}
.btn .arrow { font-size: 18px; line-height: 1; }
.btn[disabled], .btn.is-busy { pointer-events: none; opacity: .6; }

.btn-primary {
  --n: 12px;
  background: var(--grad-primary);
  color: #fff;
  text-shadow: 0 1px 0 rgba(60, 0, 90, .45);
  clip-path: polygon(var(--n) 0, 100% 0, 100% calc(100% - var(--n)), calc(100% - var(--n)) 100%, 0 100%, 0 var(--n));
  transition: filter .25s var(--ease), transform .25s var(--ease);
  will-change: transform;
}
.btn-primary:hover { color: #fff; filter: brightness(1.12); transform: translate3d(0, -2px, 0); }
.btn-primary:active { transform: translateY(0); filter: brightness(.95); }
.btn-primary.is-in { background: linear-gradient(110deg, rgba(124, 58, 237, .35), rgba(217, 70, 239, .25)); }

.btn-ghost {
  border: 1px solid transparent; border-radius: 10px;
  background: linear-gradient(#0d0716, #0d0716) padding-box, linear-gradient(110deg, #a855f7, rgba(168, 85, 247, .25) 50%, #d946ef) border-box;
  color: var(--text);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-ghost:hover {
  color: var(--text);
  background: linear-gradient(#1c0d30, #1c0d30) padding-box, linear-gradient(110deg, #c084fc, #a855f7 50%, #f0abfc) border-box;
  box-shadow: 0 0 24px rgba(168, 85, 247, .35);
  transform: translateY(-2px);
}
.btn-ghost.no-glow:hover { box-shadow: none; }

/* Größen */
.btn-lg { padding: 17px 22px; font-size: 16px; }
.btn-md { padding: 15px 26px; font-size: 14px; }
.btn-sm { padding: 13px 22px; font-size: 14px; }
.btn-bar { padding: 13px 20px; font-size: 14px; }
.btn-card { padding: 11px 20px; font-size: 14px; letter-spacing: .06em; }
.btn-xs { padding: 9px 14px; font-size: 13px; letter-spacing: .05em; }
.btn-row { padding: 8px 14px; font-size: 13px; letter-spacing: .05em; }
.btn-mini { padding: 9px 14px; font-size: 12px; }
.btn-trailer { padding: 16px 26px; font-size: 15px; }
.btn-checkout { padding: 14px 20px; font-size: 15px; letter-spacing: .06em; text-align: center; }
.btn-code { padding: 10px 14px; font-size: 13px; letter-spacing: 0; }
.btn-gift { padding: 15px 22px; font-size: 14px; }

/* ---------- Überschriften-Blöcke ---------- */
.eyebrow { font-family: var(--font-display); font-size: 13px; letter-spacing: .4em; color: var(--accent-2); }
.sec-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.sec-head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; }
.sec-head--wide { max-width: 760px; }
.sec-head--free { max-width: none; }
.h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 4vw, 54px); line-height: 1.02;
}
.h2--sm { font-size: clamp(32px, 3.8vw, 50px); }
.lead { font-size: 17px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }

/* ---------- Kleine Bausteine ---------- */
.chip-fw {
  padding: 4px 9px; border-radius: 5px; font-family: var(--font-mono); font-size: 11px;
  background: rgba(9, 5, 16, .85); border: 1px solid rgba(168, 85, 247, .35); color: var(--chip-text);
}
.badge-sale {
  padding: 3px 8px; border-radius: 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .06em; background: var(--magenta); color: #fff;
}
.badge-soon {
  padding: 3px 8px; border-radius: 4px; font-family: var(--font-display); font-weight: 700;
  font-size: 11px; letter-spacing: .06em; background: var(--accent-2); color: #0a0612;
}

/* Medien-Fläche mit Logo-Platzhalter */
.media {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-media);
}
.media > .media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Ladezustand (Skeleton) im Stil des Designs */
.skeleton {
  background: linear-gradient(90deg, rgba(168, 85, 247, .06) 0%, rgba(168, 85, 247, .16) 50%, rgba(168, 85, 247, .06) 100%);
  background-size: 200% 100%;
  animation: jmxShine 1.4s linear infinite;
}