/* ==========================================================================
   CrankChaos Store · cc-plus.css
   © CrankChaos · Zusatzmodul (Glücksrad, Suche, Merkliste …)
   Aussehen des Zusatzmoduls (cc-plus.twig, cc-plus.js). Nutzt nur die
   Tokens aus cc-store.css (--cc-…), damit jedes Design es mitfärbt.

   Inhalt: Kopfzeile · Badges · Merkliste · Fenster & Seitenleisten · Suche ·
   Glücksrad · Vergleich · Bild-Lupe · Laufband · Ticker · Live-Zahlen ·
   Hero-Effekte · Partikel · Paket-Layouts · Einrichtungsmodus · Beschreibung
   ========================================================================== */

:root {
  --cc-accent-2: color-mix(in srgb, var(--cc-primary) 55%, #ec4899);
  --cc-particle: var(--cc-primary-text);
  --cc-layer-scrim: var(--cc-scrim);
  --cc-layer-z: 500;
}

body.cc-lock { overflow: hidden; }

/* ---------- Kopfzeile: Lupe und Merkliste -------------------------------- */
.cc-hbtn { position: relative; flex: none; color: var(--cc-text-secondary); border-color: var(--cc-border); background: var(--cc-surface); }
.cc-hbtn:hover { color: var(--cc-text-primary); }
.cc-hbtn__count {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: var(--cc-radius-full);
  background: var(--cc-primary); color: var(--cc-on-primary);
  font-family: var(--cc-font-mono); font-size: 0.68rem; font-weight: 700; line-height: 1;
  box-shadow: 0 0 0 2px var(--cc-background);
}
.cc-hbtn__count[hidden] { display: none; }
.cc-hbtn--wish .cc-icon { transition: transform var(--cc-transition-normal) var(--cc-ease-out); }
.cc-hbtn--wish:hover .cc-icon { transform: scale(1.1); color: var(--cc-primary-text); }

.cc-nav__wish { display: none; position: relative; }
.cc-nav__wish .cc-hbtn__count { position: static; box-shadow: none; margin-left: 2px; }
@media (max-width: 980px) { .cc-nav__wish { display: inline-flex; } }
.cc-header.is-compact .cc-nav__wish { display: inline-flex; }
@media (max-width: 460px) {
  .cc-hbtn { width: 36px; height: 36px; }
  .cc-hbtn--wish { display: none; }
}

/* ---------- Badges ------------------------------------------------------- */
.cc-tags { position: absolute; top: 10px; left: 10px; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 64px); pointer-events: none; }
.cc-tags--inline { position: static; max-width: none; margin-bottom: -4px; }
.cc-tag {
  --cc-tag: var(--cc-primary);
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px;
  border-radius: var(--cc-radius-full);
  background: var(--cc-tag); color: #fff;
  font-family: var(--cc-font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--cc-tag) 70%, transparent);
}
.cc-tag--sale { --cc-tag: #e11d48; }
.cc-tag--custom { text-shadow: 0 1px 0 rgb(0 0 0 / 18%); }

/* ---------- Merkliste ---------------------------------------------------- */
.cc-wish {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border-radius: var(--cc-radius-full); border: 1px solid color-mix(in srgb, var(--cc-border-strong) 70%, transparent);
  background: color-mix(in srgb, var(--cc-background) 72%, transparent); color: var(--cc-text-primary);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: transform var(--cc-transition-fast) var(--cc-ease-out), color var(--cc-transition-fast), background-color var(--cc-transition-fast);
}
.cc-wish:hover { transform: scale(1.06); color: var(--cc-primary-text); }
.cc-wish .cc-icon { width: 18px; height: 18px; }
.cc-wish.is-on, .cc-wish-btn.is-on .cc-icon { color: #f43f5e; }
.cc-wish.is-on .cc-icon, .cc-wish-btn.is-on .cc-icon { fill: currentColor; }
.cc-wish.is-pop .cc-icon, .cc-wish-btn.is-pop .cc-icon { animation: cc-pop 360ms var(--cc-ease-emph); }
@keyframes cc-pop { 40% { transform: scale(1.35); } }
.cc-grid--list .cc-wish { top: 8px; right: auto; left: 8px; }

/* ---------- Fenster und Seitenleisten ------------------------------------ */
.cc-drawer, .cc-modal, .cc-search, .cc-lightbox { position: fixed; inset: 0; z-index: var(--cc-layer-z); }
.cc-drawer[hidden], .cc-modal[hidden], .cc-search[hidden], .cc-lightbox[hidden] { display: none; }
.cc-drawer__scrim, .cc-modal__scrim, .cc-search__scrim, .cc-lightbox__scrim {
  position: absolute; inset: 0; background: var(--cc-layer-scrim);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity var(--cc-transition-slow) var(--cc-ease-out);
}
.is-open > .cc-drawer__scrim, .is-open > .cc-modal__scrim, .is-open > .cc-search__scrim, .is-open > .cc-lightbox__scrim { opacity: 1; }

.cc-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: var(--cc-surface); border-left: 1px solid var(--cc-border-hover);
  box-shadow: var(--cc-shadow-lg);
  transform: translateX(104%); transition: transform var(--cc-motion-enter) var(--cc-ease-emph);
}
.cc-drawer.is-open .cc-drawer__panel { transform: none; }
.cc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--cc-border); }
.cc-drawer__title { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.cc-drawer__title .cc-icon { color: var(--cc-primary-text); }
.cc-drawer__count { min-width: 24px; height: 24px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: var(--cc-radius-full); background: var(--cc-primary-subtle); color: var(--cc-primary-text); font-family: var(--cc-font-mono); font-size: 0.78rem; }
.cc-drawer__list { flex: 1; overflow-y: auto; padding: 8px 20px; display: grid; align-content: start; }
.cc-drawer__item { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 0; }
.cc-drawer__item + .cc-drawer__item { border-top: 1px solid var(--cc-border); }
.cc-drawer__list[data-cc-wish-list] .cc-drawer__item { grid-template-columns: 52px minmax(0, 1fr) auto; }
.cc-drawer__thumb { width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: var(--cc-radius-md); background: var(--cc-primary-subtle); color: var(--cc-primary-text); }
.cc-drawer__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-drawer__info { min-width: 0; display: grid; gap: 2px; }
.cc-drawer__name { font-weight: 600; color: var(--cc-text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cc-drawer__name:hover { color: var(--cc-primary-text); }
.cc-drawer__meta { font-size: 0.82rem; color: var(--cc-text-muted); }
.cc-drawer__price { font-family: var(--cc-font-mono); font-weight: 700; white-space: nowrap; }
.cc-drawer__price span { color: var(--cc-text-muted); font-size: 0.8em; font-weight: 500; }
.cc-drawer__foot { display: grid; gap: 12px; padding: 16px 20px 20px; border-top: 1px solid var(--cc-border); background: var(--cc-background-secondary); }
.cc-drawer__sum { display: flex; justify-content: space-between; align-items: baseline; margin: 0; }
.cc-drawer__sum dt { font-weight: 600; }
.cc-drawer__sum dd { margin: 0; font-family: var(--cc-font-mono); font-size: 1.3rem; font-weight: 700; }
.cc-drawer__empty { padding: 20px; color: var(--cc-text-muted); }
.cc-drawer__empty[hidden] { display: none; }
.cc-drawer__empty--cart { flex: 1; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; }
.cc-drawer__empty--cart > .cc-icon { width: 44px; height: 44px; color: var(--cc-text-disabled); }

.cc-modal { display: grid; place-items: center; padding: 16px; }
.cc-modal__box {
  position: relative; width: min(460px, 100%); max-height: calc(100vh - 32px); overflow-y: auto;
  padding: 28px 24px 24px; border-radius: var(--cc-radius-xl);
  background: var(--cc-surface); border: 1px solid var(--cc-border-hover); box-shadow: var(--cc-shadow-lg);
  opacity: 0; transform: translateY(14px) scale(0.98);
  transition: opacity var(--cc-transition-slow) var(--cc-ease-out), transform var(--cc-motion-enter) var(--cc-ease-emph);
}
.cc-modal.is-open .cc-modal__box { opacity: 1; transform: none; }
.cc-modal__close { position: absolute; top: 12px; right: 12px; }

/* ---------- Suche -------------------------------------------------------- */
.cc-search__box {
  position: relative; width: min(640px, calc(100% - 32px)); margin: clamp(64px, 12vh, 120px) auto 0;
  border-radius: var(--cc-radius-xl); overflow: hidden;
  background: var(--cc-surface-raised); border: 1px solid var(--cc-border-hover); box-shadow: var(--cc-shadow-lg);
  opacity: 0; transform: translateY(-10px);
  transition: opacity var(--cc-transition-normal) var(--cc-ease-out), transform var(--cc-motion-enter) var(--cc-ease-emph);
}
.cc-search.is-open .cc-search__box { opacity: 1; transform: none; }
.cc-search__field { display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--cc-border); }
.cc-search__field > .cc-icon { color: var(--cc-primary-text); width: 22px; height: 22px; }
.cc-search__input { flex: 1; min-width: 0; min-height: 60px; border: 0; background: none; font-size: 1.1rem; color: var(--cc-text-primary); outline: none; }
.cc-search__input::placeholder { color: var(--cc-text-muted); }
.cc-search__input::-webkit-search-cancel-button { display: none; }
.cc-search__esc { padding: 4px 8px; border-radius: var(--cc-radius-sm); border: 1px solid var(--cc-border-hover); background: var(--cc-surface); color: var(--cc-text-muted); font-family: var(--cc-font-mono); font-size: 0.72rem; }
.cc-search__list { max-height: min(60vh, 460px); overflow-y: auto; padding: 6px; }
.cc-search__list:empty { display: none; }
.cc-search__item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: var(--cc-radius-md); cursor: pointer; }
.cc-search__item[aria-selected='true'] { background: var(--cc-primary-subtle); box-shadow: inset 0 0 0 1px var(--cc-primary-ring); }
.cc-search__thumb { width: 56px; aspect-ratio: 16 / 10; display: grid; place-items: center; overflow: hidden; border-radius: var(--cc-radius-sm); background: var(--cc-surface-active); color: var(--cc-primary-text); }
.cc-search__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cc-search__body { display: grid; min-width: 0; }
.cc-search__body strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-search__body small { color: var(--cc-text-muted); font-size: 0.8rem; }
.cc-search__price { font-family: var(--cc-font-mono); font-size: 0.85rem; font-weight: 700; color: var(--cc-text-secondary); white-space: nowrap; }
.cc-search__status { padding: 10px 18px 14px; color: var(--cc-text-muted); font-size: 0.85rem; }

/* ---------- Glücksrad ----------------------------------------------------- */
.cc-wheel-launch {
  position: fixed; right: 16px; bottom: 16px; z-index: 300;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  border: 0; border-radius: var(--cc-radius-full);
  background: linear-gradient(135deg, var(--cc-primary), var(--cc-accent-2)); color: var(--cc-on-primary);
  font-weight: 700; box-shadow: 0 12px 30px -10px var(--cc-primary), var(--cc-shadow-md);
  transition: transform var(--cc-transition-normal) var(--cc-ease-out);
}
.cc-wheel-launch:hover { transform: translateY(-2px); }
.cc-wheel-launch .cc-icon { width: 22px; height: 22px; animation: cc-spin-slow 8s linear infinite; }
body:has(.cc-toast) .cc-wheel-launch { bottom: 96px; }
@keyframes cc-spin-slow { to { transform: rotate(360deg); } }

.cc-wheel { text-align: center; display: grid; gap: 12px; justify-items: center; width: min(480px, 100%); }
.cc-wheel__title { font-size: 1.6rem; padding: 0 32px; }
.cc-wheel__text { color: var(--cc-text-secondary); max-width: 38ch; }
.cc-wheel__stage { position: relative; width: min(320px, 78vw); aspect-ratio: 1; margin: 6px 0 2px; }
.cc-wheel__svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(0 18px 30px rgb(0 0 0 / 28%)); }
.cc-wheel__rim { fill: var(--cc-background-secondary); stroke: var(--cc-primary); stroke-width: 3; }
.cc-wheel__rotor { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 5.2s cubic-bezier(0.12, 0.72, 0.08, 1); }
.cc-wheel__seg { stroke: var(--cc-surface); stroke-width: 1.4; }
.cc-wheel__seg--a { fill: var(--cc-primary); }
.cc-wheel__seg--b { fill: color-mix(in srgb, var(--cc-accent-2) 80%, var(--cc-background)); }
.cc-wheel__seg--miss { fill: var(--cc-surface-active); }
.cc-wheel__label { fill: var(--cc-on-primary); font-family: var(--cc-font-display); font-size: 9.5px; font-weight: 700; letter-spacing: 0.01em; }
.cc-wheel__label--miss { fill: var(--cc-text-secondary); }
.cc-wheel__pointer {
  position: absolute; top: -8px; left: 50%; width: 26px; height: 30px; transform: translateX(-50%);
  background: var(--cc-text-primary); clip-path: polygon(50% 100%, 0 0, 100% 0);
  filter: drop-shadow(0 3px 4px rgb(0 0 0 / 35%));
}
.cc-wheel__hub {
  position: absolute; top: 50%; left: 50%; width: 22%; aspect-ratio: 1; transform: translate(-50%, -50%);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--cc-surface); border: 3px solid var(--cc-primary); color: var(--cc-primary-text);
  box-shadow: var(--cc-shadow-md);
}
.cc-wheel__hub .cc-icon { width: 46%; height: 46%; }
.cc-wheel__spin { min-width: 220px; }
.cc-wheel__spin:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }
.cc-wheel__result { display: grid; gap: 8px; justify-items: center; min-height: 0; }
.cc-wheel__result:empty { display: none; }
.cc-wheel__won { font-family: var(--cc-font-display); font-weight: 700; font-size: 1.15rem; color: var(--cc-success); }
.cc-wheel__miss { color: var(--cc-text-secondary); font-weight: 600; }
.cc-wheel__code { display: inline-flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: var(--cc-radius-md); border: 1px dashed var(--cc-primary); background: var(--cc-primary-subtle); }
.cc-wheel__code code { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; color: var(--cc-text-primary); }
.cc-wheel__note:empty { display: none; }

/* ---------- Vergleichstabelle --------------------------------------------- */
.cc-compare__wrap { overflow-x: auto; border-radius: var(--cc-radius-xl); border: 1px solid var(--cc-border); background: var(--cc-surface); -webkit-overflow-scrolling: touch; }
.cc-compare__table { width: 100%; min-width: calc(180px + var(--cc-tiers, 3) * 140px); border-collapse: separate; border-spacing: 0; }
.cc-compare__table th, .cc-compare__table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--cc-border); vertical-align: middle; }
.cc-compare__table tr:last-child > * { border-bottom: 0; }
.cc-compare__table thead th { padding-top: 22px; padding-bottom: 18px; vertical-align: bottom; }
.cc-compare__feature, .cc-compare__corner { text-align: left !important; font-weight: 500; color: var(--cc-text-secondary); position: sticky; left: 0; z-index: 1; background: var(--cc-surface); }
.cc-compare__tier { position: relative; }
.cc-compare__name { display: block; font-family: var(--cc-font-display); font-size: 1.2rem; font-weight: 700; color: var(--cc-text-primary); }
.cc-compare__price { display: block; margin-top: 4px; font-family: var(--cc-font-mono); font-size: 0.95rem; color: var(--cc-primary-text); font-weight: 700; }
.cc-compare__badge { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: var(--cc-radius-full); background: var(--cc-primary); color: var(--cc-on-primary); font-family: var(--cc-font-mono); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-compare__table .is-hot { background: color-mix(in srgb, var(--cc-primary) 9%, transparent); }
.cc-compare__table thead .is-hot { box-shadow: inset 0 3px 0 var(--cc-primary); }
.cc-compare__yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--cc-success) 16%, transparent); color: var(--cc-success); }
.cc-compare__yes .cc-icon { width: 16px; height: 16px; }
.cc-compare__no { color: var(--cc-text-disabled); font-weight: 700; }
.cc-compare__text { font-family: var(--cc-font-mono); font-size: 0.88rem; font-weight: 600; }
.cc-compare--category { padding-top: 0; margin-bottom: 28px; }
.cc-compare[hidden] { display: none; }

/* ---------- Bild-Lupe ------------------------------------------------------ */
.cc-zoomable { cursor: zoom-in; }
.cc-zoomable:focus-visible { outline: 3px solid var(--cc-primary-text); outline-offset: -3px; }
.cc-lightbox__scrim { background: rgb(4 5 8 / 88%); }
.cc-lightbox__dialog { position: absolute; inset: 0; display: grid; place-items: center; padding: 64px 72px; pointer-events: none; }
.cc-lightbox__dialog > * { pointer-events: auto; }
.cc-lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; overflow: hidden; border-radius: var(--cc-radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / 55%); }
.cc-lightbox__img { display: block; max-width: min(1400px, calc(100vw - 144px)); max-height: calc(100vh - 128px); object-fit: contain; cursor: zoom-in; transition: transform var(--cc-motion-base) var(--cc-ease-out); }
.cc-lightbox.is-zoomed .cc-lightbox__img { transform: scale(2.2); cursor: zoom-out; }
.cc-lightbox__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 20%); background: rgb(20 22 28 / 70%); color: #fff; }
.cc-lightbox__btn:hover { background: rgb(40 44 54 / 90%); }
.cc-lightbox__btn[hidden] { display: none; }
.cc-lightbox__close { top: 16px; right: 16px; }
.cc-lightbox__zoom { top: 16px; right: 76px; }
.cc-lightbox__zoom[aria-pressed='true'] { background: var(--cc-primary); border-color: transparent; }
.cc-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.cc-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.cc-lightbox__count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 4px 12px; border-radius: var(--cc-radius-full); background: rgb(20 22 28 / 70%); color: #fff; font-family: var(--cc-font-mono); font-size: 0.8rem; }
@media (max-width: 640px) {
  .cc-lightbox__dialog { padding: 64px 8px; }
  .cc-lightbox__img { max-width: calc(100vw - 16px); }
  .cc-lightbox__prev, .cc-lightbox__next { top: auto; bottom: 12px; transform: none; }
}

/* ---------- Laufband ------------------------------------------------------- */
.cc-announce { position: relative; }
.cc-announce[hidden] { display: none; }
.cc-announce--static .cc-announce__track { width: auto; justify-content: center; animation: none; }
.cc-announce--static .cc-announce__item:not(:first-child) { display: none; }
.cc-announce--static .cc-announce__item::after { content: none; }
.cc-announce__close {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--cc-on-primary) 18%, transparent); color: var(--cc-on-primary);
}
.cc-announce__close:hover { background: color-mix(in srgb, var(--cc-on-primary) 30%, transparent); }
.cc-announce__close .cc-icon { width: 14px; height: 14px; }

/* ---------- "Gerade gekauft" ----------------------------------------------- */
.cc-ticker {
  position: fixed; left: 16px; bottom: calc(16px + var(--cc-setup-h, 0px)); z-index: 290;
  display: flex; align-items: center; gap: 12px; max-width: min(360px, calc(100vw - 32px));
  padding: 10px 10px 10px 12px; border-radius: var(--cc-radius-lg);
  background: var(--cc-surface-raised); border: 1px solid var(--cc-border-hover); box-shadow: var(--cc-shadow-lg);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity var(--cc-transition-slow) var(--cc-ease-out), transform var(--cc-motion-enter) var(--cc-ease-emph);
}
.cc-ticker.is-in { opacity: 1; transform: none; pointer-events: auto; }
.cc-ticker__avatar { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--cc-radius-md); background: var(--cc-primary); color: var(--cc-on-primary); font-family: var(--cc-font-display); font-weight: 700; }
.cc-ticker__body { display: grid; min-width: 0; font-size: 0.88rem; line-height: 1.35; }
.cc-ticker__label { color: var(--cc-success); font-family: var(--cc-font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-ticker__line { color: var(--cc-text-secondary); }
.cc-ticker__line strong { color: var(--cc-text-primary); }
.cc-ticker__close { flex: none; align-self: flex-start; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cc-text-muted); }
.cc-ticker__close .cc-icon { width: 14px; height: 14px; }
@media (max-width: 640px) { .cc-ticker { bottom: calc(76px + var(--cc-setup-h, 0px)); } }

/* ---------- Live-Zahlen ---------------------------------------------------- */
.cc-livestats { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-livestats:not(:has(> li:not([hidden]))) { display: none; }
.cc-livestats__item { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: var(--cc-radius-full); background: color-mix(in srgb, var(--cc-surface) 80%, transparent); border: 1px solid var(--cc-border-hover); font-size: 0.85rem; color: var(--cc-text-secondary); }
.cc-livestats__item[hidden] { display: none; }
.cc-livestats__item strong { color: var(--cc-text-primary); font-family: var(--cc-font-mono); }
.cc-livestats .cc-dot { animation: cc-live 2s ease-in-out infinite; }
@keyframes cc-live { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--cc-success) 0%, transparent); } }

/* ---------- Hero-Effekte (Attribut data-cc-herofx an <html>) ---------------- */
[data-cc-herofx='shimmer'] .cc-hero__title {
  background: linear-gradient(100deg, var(--cc-text-primary) 0%, var(--cc-text-primary) 38%, var(--cc-primary-text) 48%, var(--cc-text-primary) 58%, var(--cc-text-primary) 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cc-shimmer 4.8s var(--cc-ease-out) infinite;
}
@keyframes cc-shimmer { 0% { background-position: 100% 0; } 55%, 100% { background-position: 0 0; } }
[data-cc-herofx='glow'] .cc-hero__title { animation: cc-glow 3.6s ease-in-out infinite; }
@keyframes cc-glow {
  0%, 100% { text-shadow: 0 0 18px color-mix(in srgb, var(--cc-primary) 35%, transparent); }
  50% { text-shadow: 0 0 34px color-mix(in srgb, var(--cc-primary) 70%, transparent), 0 0 4px color-mix(in srgb, var(--cc-primary) 50%, transparent); }
}
[data-cc-herofx='gradient'] .cc-hero__title {
  background: linear-gradient(90deg, var(--cc-text-primary), var(--cc-primary-text), var(--cc-accent-2), var(--cc-primary-text), var(--cc-text-primary));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: cc-sweep 9s linear infinite;
}
@keyframes cc-sweep { to { background-position: 300% 0; } }

/* ---------- Partikel ------------------------------------------------------- */
.cc-particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cc-particles__probe { position: absolute; color: var(--cc-particle); visibility: hidden; }

/* ---------- Paket-Layouts -------------------------------------------------- */
.cc-grid--stacked { grid-template-columns: 1fr; gap: 20px; }
.cc-grid--stacked .cc-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.cc-grid--stacked .cc-card__media { grid-row: 1 / span 2; aspect-ratio: auto; min-height: 240px; height: 100%; border-bottom: 0; border-right: 1px solid var(--cc-border); }
.cc-grid--stacked .cc-card__body { padding: 24px 24px 0; align-content: center; }
.cc-grid--stacked .cc-card__title { font-size: 1.45rem; }
.cc-grid--stacked .cc-card__excerpt { -webkit-line-clamp: 4; line-clamp: 4; font-size: 0.98rem; }
.cc-grid--stacked .cc-card__foot { padding: 16px 24px 24px; }
.cc-grid--stacked .cc-price__value { font-size: 1.4rem; }
@media (max-width: 760px) {
  .cc-grid--stacked .cc-card { grid-template-columns: 1fr; grid-template-rows: auto; }
  .cc-grid--stacked .cc-card__media { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--cc-border); }
}

/* ---------- Einrichtungsmodus ---------------------------------------------- */
.cc-setup {
  position: fixed; left: 16px; bottom: 16px; z-index: 310; width: min(340px, calc(100vw - 32px));
  border-radius: var(--cc-radius-lg); overflow: hidden;
  background: var(--cc-surface-raised); border: 1px solid var(--cc-warning); box-shadow: var(--cc-shadow-lg);
  font-size: 0.86rem;
}
.cc-setup__toggle { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0; background: var(--cc-warning-subtle); color: var(--cc-text-primary); font-weight: 700; text-align: left; }
.cc-setup__toggle > span:nth-child(2) { flex: 1; }
.cc-setup__toggle .cc-icon { transition: transform var(--cc-transition-normal); }
.cc-setup.is-collapsed .cc-setup__toggle .cc-icon { transform: rotate(180deg); }
.cc-setup__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cc-warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cc-warning) 25%, transparent); }
.cc-setup__body { padding: 10px 14px 14px; }
.cc-setup__body[hidden] { display: none; }
.cc-setup__list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; counter-reset: cc-setup; }
.cc-setup__list li { position: relative; padding-left: 26px; color: var(--cc-text-secondary); counter-increment: cc-setup; }
.cc-setup__list li::before { content: counter(cc-setup); position: absolute; left: 0; top: 1px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--cc-border-strong); font-family: var(--cc-font-mono); font-size: 0.66rem; color: var(--cc-text-muted); }
.cc-setup__list li.is-done { color: var(--cc-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--cc-text-muted) 60%, transparent); }
.cc-setup__list li.is-done::before { content: '✓'; border-color: var(--cc-success); background: var(--cc-success); color: var(--cc-background); }
.cc-setup__note { color: var(--cc-text-muted); font-size: 0.78rem; }

/* ---------- Paketbeschreibung: Häkchen in der Akzentfarbe ------------------ */
.cc-desc ul li::before { background-image: none; }
.cc-desc ul li::after {
  content: ''; position: absolute; left: 4px; top: calc(0.2em + 4px); width: 12px; height: 12px;
  background: var(--cc-primary-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.cc-desc .cc-desc__section--req ul li::after {
  background: var(--cc-warning);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 7v6M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Bewegung reduzieren -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-cc-herofx] .cc-hero__title, .cc-wheel-launch .cc-icon, .cc-livestats .cc-dot { animation: none !important; }
  [data-cc-herofx='shimmer'] .cc-hero__title, [data-cc-herofx='gradient'] .cc-hero__title { background-position: 0 0; }
  .cc-wheel__rotor { transition: none; }
}

/* ---------- Spiel: Hero-Fenster, Spielerköpfe, Anmeldung ------------------- */
html:not([data-cc-game='fivem']) .cc-hero__panel > .cc-term:not(.cc-term--alt) { display: none; }
.cc-term--minecraft .cc-term__bar span:first-child { background: #22c55e; }
.cc-term--steam .cc-term__bar span:first-child { background: #f97316; }

.cc-user__avatar { width: 22px; height: 22px; border-radius: 4px; image-rendering: pixelated; flex: none; }
.cc-feed__avatar, .cc-ticker__avatar { overflow: hidden; }
.cc-feed__avatar.has-img { background: none; }
.cc-feed__avatar img, .cc-ticker__avatar img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

.cc-edition { margin: 0; padding: 0; border: 0; display: grid; gap: 8px; }
.cc-edition__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: var(--cc-radius-md); background: var(--cc-background-secondary); border: 1px solid var(--cc-border-hover); }
.cc-edition__opt { position: relative; display: grid; place-items: center; min-height: 40px; border-radius: var(--cc-radius-sm); cursor: pointer; font-weight: 600; color: var(--cc-text-secondary); }
.cc-edition__opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cc-edition__opt:has(input:checked) { background: var(--cc-primary); color: var(--cc-on-primary); }
.cc-edition__opt:has(input:focus-visible) { outline: 2px solid var(--cc-primary-text); outline-offset: 2px; }

/* ---------- Server-Status im Hero ------------------------------------------- */
.cc-livestats__item--server { gap: 8px; }
.cc-livestats__item--server.is-offline .cc-dot { background: var(--cc-error-text); box-shadow: none; animation: none; }
.cc-livestats__state { font-weight: 600; color: var(--cc-text-primary); }
.cc-livestats__players[hidden] { display: none; }
.cc-livestats__players::before { content: '·'; margin-right: 6px; color: var(--cc-text-disabled); }
.cc-livestats__connect {
  margin-left: 2px; padding: 3px 10px; border: 0; border-radius: var(--cc-radius-full);
  background: var(--cc-primary); color: var(--cc-on-primary); text-decoration: none;
  font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
}
.cc-livestats__connect:hover { background: var(--cc-primary-hover); color: var(--cc-on-primary); }

/* Platz für das × am Laufband */
.cc-announce:has(.cc-announce__close) { padding-right: 44px; }

/* Lesbarkeit: Beschriftung auf dem zweiten Feldton */
.cc-wheel__seg--b + .cc-wheel__label { fill: #ffffff; paint-order: stroke; stroke: rgb(0 0 0 / 35%); stroke-width: 2px; }

/* ---------- Farbvorlagen (Einstellung „Farbvorlage“) ---------- */
:root[data-cc-preset='p1'] { --cc-accent: #6366f1; --cc-accent-2: #22d3ee; }
:root[data-cc-preset='p2'] { --cc-accent: #10b981; --cc-accent-2: #a3e635; }
:root[data-cc-preset='p3'] { --cc-accent: #e11d48; --cc-accent-2: #f97316; }
:root[data-cc-preset='p4'] { --cc-accent: #f59e0b; --cc-accent-2: #ef4444; --cc-on-primary: #1a1204; }