/* =========================================================
   theme.css — NUR Themes + Token-Werte
   ========================================================= */

/* ===== Default Tokens (Light) ===== */
:root{
  /* neutrals */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-2: #f3f4f6;

  /* Schrift dunkler (für Karten & überall) */
  --text:  #111827;
  --muted: #374151;

  --border: #d1d5db;

  /* brand */
  --brand-1: #A393BF;
  --brand-2: #C5CBE3;
  --accent:  #D6F0FF;

  /* status */
  --ok-bg:   #e6ffed;
  --warn-bg: #fff7e6;
  --err-bg:  #fdeaea;

  /* focus & shadow */
  --focus-ring: rgba(197, 203, 227, 0.55);
  --shadow: 0 6px 16px rgba(0,0,0,.06);

  /* header */
  --header-grad-1: #FADADD;
  --header-grad-2: var(--brand-2);
  --header-text: var(--text);

  /* buttons */
  --btn-primary-bg: var(--brand-1);
  --btn-primary-fg: #fff;

  /* Secondary Buttons sollen IMMER hell + dunkler Text sein */
  --btn-secondary-bg: #fff;
  --btn-secondary-fg: #111;
  --btn-secondary-border: #c8c8c8;

  /* sizing / typo */
  --font-size-base: 16px;

  --btn-py: .7rem;
  --btn-px: 1.1rem;
  --btn-radius: 10px;
  --btn-font-size: 1rem;

  --control-py: .7rem;
  --control-px: .85rem;
  --control-radius: 10px;
  --control-font-size: 1rem;

  --control-max-width: clamp(280px, 70vw, 560px);

  /* helper bar */
  --helper-bg: var(--accent);
  --helper-fg: var(--text);
  --helper-btn-bg: rgba(255,255,255,.85);
  --helper-btn-fg: #111;
  --helper-btn-border: rgba(0,0,0,.15);

  /* optimale Textbreite */
  --measure: 62ch;

  /* Header Video Tokens (WICHTIG) */
  --header-video-width: 210px;
  --header-video-aspect: 16 / 9;
  --header-video-fit: contain;
  --header-video-radius: 10px;

  /* misc */
  --img-radius: 10px;

  /* Header: Medaille */
  --user-medal-size: 56px;
  
 /* Badges (Kauf / Tausch / Kauf und Tausch) */
  --badge-bg: #eef2ff;
  --badge-fg: #111827; /* dunkler Text */

 /* Links */
  --link: var(--brand-1);
  --link-hover: var(--brand-2);
  --link-visited: var(--link);  
  
}
/* ===== Theme 2: Preußisch (Dark) ===== */
body[data-theme="2"]{
  --bg: #0b1320;
  --surface: #111a2b;
  --surface-2: #0f1727;
  --text: #ffffff;
  --muted: #cbd5e1;
  --border: #22314a;

  --brand-1: #0b3d91;
  --brand-2: #123b7a;
  --accent:  #1f4ea3;

  /* Helper */
  --helper-bg: #0f203d;
  --helper-fg: #ffffff;
  --helper-btn-bg: rgba(255,255,255,.14);
  --helper-btn-fg: #ffffff;
  --helper-btn-border: rgba(255,255,255,.25);

  /* Links (heller für Dark) */
  --link: #7fb0ff;
  --link-hover: #b6d2ff;
  --link-visited: #9bbcff;

  /* optional größer im Dark */
  --header-video-width: 210px;
}

/* Theme 2: Header folgt Theme-Farben */
html[data-theme="2"], body[data-theme="2"]{
  --header-grad-1: var(--brand-1);
  --header-grad-2: var(--brand-2);
  --header-text:   var(--text);
}
/* ===== Theme 3: Schwarz (Dark) ===== */
body[data-theme="3"]{
  --bg: #0a0a0a;
  --surface: #121212;
  --surface-2: #0e0e0e;
  --text: #ffffff;
  --muted: #c7c7c7;
  --border: #2a2a2a;

  --brand-1: #111111;
  --brand-2: #222222;
  --accent:  #1b1b1b;

  /* Helper */
  --helper-bg: #161616;
  --helper-fg: #ffffff;
  --helper-btn-bg: rgba(255,255,255,.12);
  --helper-btn-fg: #ffffff;
  --helper-btn-border: rgba(255,255,255,.22);

  /* optional größer im Dark */
  --header-video-width: 210px;

 /* Links (deutlich sichtbar auf Schwarz) */
  --link: #9ad0ff;
  --link-hover: #c9e6ff;
  --link-visited: #b7dcff;  
}

/* ===== Buttons: 1 Small / 2 Normal / 3 Large ===== */
html[data-btn="1"], body[data-btn="1"]{
  --btn-py: .45rem;
  --btn-px: .85rem;
  --btn-radius: 9px;
}
html[data-btn="2"], body[data-btn="2"]{
  --btn-py: .7rem;
  --btn-px: 1.1rem;
  --btn-radius: 10px;
}
html[data-btn="3"], body[data-btn="3"]{
  --btn-py: .9rem;
  --btn-px: 1.25rem;
  --btn-radius: 12px;
}


/* ===== Theme 3: Schwarz (Dark) ===== */
body[data-theme="3"]{
  /* ... deine Theme-3 Tokens ... */
}

/* Theme 3: Header folgt Theme-Farben */
html[data-theme="3"], body[data-theme="3"]{
  --header-grad-1: var(--brand-1);
  --header-grad-2: var(--brand-2);
  --header-text:   var(--text);
}


/* ===== Font: 1..4 ===== */
html[data-font="1"], body[data-font="1"]{
  --font-size-base: 14px;
  --btn-font-size: .95rem;
  --control-font-size: .95rem;
}
html[data-font="2"], body[data-font="2"]{
  --font-size-base: 15px;
  --btn-font-size: .975rem;
  --control-font-size: .975rem;
}
html[data-font="3"], body[data-font="3"]{
  --font-size-base: 16px;
  --btn-font-size: 1rem;
  --control-font-size: 1rem;
}
html[data-font="4"], body[data-font="4"]{
  --font-size-base: 18px;
  --btn-font-size: 1.05rem;
  --control-font-size: 1.05rem;
}

/* ===== Bootstrap Adapter (optional, aber hilfreich) ===== */
:root{
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-modal-bg: var(--surface);
  --bs-modal-color: var(--text);
}
.access24-burst {
  --burst-bg: #ffd400;
  --burst-text: #c40000;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 84px;
  height: 52px;
  padding: 0 10px;

  text-decoration: none;
  font-weight: 800;
  color: var(--burst-text);
  vertical-align: middle;

  transition: transform .15s ease, filter .15s ease;
}

.access24-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--burst-bg);
  border: 2px solid var(--burst-text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);

  clip-path: polygon(
    50% 0%,60% 12%,75% 5%,78% 20%,92% 12%,88% 30%,100% 35%,
    88% 48%,100% 62%,84% 66%,92% 82%,74% 78%,70% 100%,
    50% 86%,30% 100%,26% 78%,8% 82%,16% 66%,0% 62%,
    12% 48%,0% 35%,12% 30%,8% 12%,22% 20%,25% 5%,40% 12%
  );

  z-index: 0;
}

.access24-burst span {
  position: relative;
  z-index: 1;
  font-size: 0.85rem;
  white-space: nowrap;
}

.access24-burst:hover {
  transform: scale(1.06);
  filter: brightness(1.05);
  text-decoration: none;
}