/* =========================================================
   SILENT CITY — Coinshop im Regelwerk-Stil (02.10.2026)
   Gleiche Farbwelt wie silent-city.yachts: Lila-Schwarz, Karten wie die Garage,
   Violett/Lavendel, Orange als Akzent, 3D-Schriftzug, Saira kursiv + Inter.
   Sicherung des alten Stands: tebex/sicherung-beschte-v2-20261002
   ========================================================= */

body.retro-theme {
  --sc-bg: #171120;
  --sc-bg2: #130e1c;
  --sc-card: #1e182a;
  --sc-card2: #241d33;
  --sc-btn: #261e40;
  --sc-line: rgba(190, 170, 255, .08);
  --sc-line2: rgba(190, 170, 255, .16);
  --sc-violet: #8c40f6;
  --sc-lav: #b79bff;
  --sc-orange: #f8983b;
  --sc-ink: #f4f1f8;
  --sc-ink2: #b9b0c9;
  --sc-ink3: #83799a;
  --sc-grad: linear-gradient(100deg, #8c40f6 0%, #b450b4 52%, #f8983b 100%);
  --sc-grad-text: linear-gradient(100deg, #b794ff 0%, #d46bc8 50%, #f8983b 100%);
  --sc-head: "Saira", "Inter", system-ui, sans-serif;
  --sc-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Werte, die die Vorlage selbst benutzt */
  --rr-accent: var(--sc-violet);
  --color-primary: var(--sc-violet);
  --color-primary-hover: var(--sc-lav);
  --dark-color-primary: var(--sc-bg);
  --dark-color-secondary: var(--sc-card);
  --rr-panel: var(--sc-card);
  --rr-panel-strong: var(--sc-card2);
  --rr-border: var(--sc-line);
  --tebex-legal-footer-logo-color: var(--sc-violet);
  --retro-panel: var(--sc-card);
  --retro-panel-soft: var(--sc-card2);
  --retro-line: var(--sc-line);
  --retro-muted: var(--sc-ink3);
  --retro-shadow: none;

  /* Alte Pink-Farben der Vorlage (stehen noch in custom.css) auf unsere Farben umbiegen */
  --logo-pink: #a777fc;
  --logo-pink-soft: #c4a8ff;
  --logo-magenta: #8c40f6;
  --logo-rose: #b450b4;
  --logo-coral: #d46bc8;
  --logo-orange: #f8983b;
  --logo-orange-hot: #f8983b;
  --logo-yellow: #f2b544;
  --logo-yellow-soft: #ffd28a;
  --logo-plum: #5b2bb5;
  --logo-purple: #4a2a8a;
  --logo-deep: #241a41;
  --logo-wine: #36265e;
  --logo-white: #f4f1f8;

  color: var(--sc-ink2) !important;
  background: var(--sc-bg) !important;
  font-family: var(--sc-body) !important;
  font-size: 16px;
  font-weight: 400;
}

/* Hintergrund: kein Foto mehr, sondern violetter Schein wie auf dem Regelwerk */
body.retro-theme::before {
  background-image: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  background:
    radial-gradient(1100px 640px at 84% -6%, rgba(140, 64, 246, .18), transparent 62%),
    radial-gradient(900px 560px at -10% 24%, rgba(140, 64, 246, .08), transparent 62%),
    radial-gradient(900px 700px at 110% 82%, rgba(212, 90, 190, .07), transparent 62%) !important;
}
body.retro-theme::after { background: none !important; }
body.retro-theme .retro-backdrop { display: none !important; }

/* Schriften */
body.retro-theme,
body.retro-theme p,
body.retro-theme li,
body.retro-theme label,
body.retro-theme small,
body.retro-theme a,
body.retro-theme button,
body.retro-theme input,
body.retro-theme select,
body.retro-theme textarea,
body.retro-theme nav a {
  font-family: var(--sc-body) !important;
}
body.retro-theme h1,
body.retro-theme h2,
body.retro-theme h3,
body.retro-theme h4 {
  font-family: var(--sc-head) !important;
  font-style: italic;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  color: var(--sc-ink) !important;
}
body.retro-theme h5, body.retro-theme h6, body.retro-theme strong { color: var(--sc-ink) !important; }
body.retro-theme p, body.retro-theme li, body.retro-theme label, body.retro-theme small { color: var(--sc-ink2); }
body.retro-theme a { color: var(--sc-lav); }
body.retro-theme a:hover { color: #d9c8ff; }
body.retro-theme ::selection { background: rgba(140, 64, 246, .45); color: #fff; }
body.retro-theme::-webkit-scrollbar-thumb,
body.retro-theme *::-webkit-scrollbar-thumb { background-color: var(--sc-violet) !important; }

/* ---------------- Kopfleiste ---------------- */
body.retro-theme .rr-header { display: none !important; }
.sc-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(23, 17, 32, .82);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--sc-line);
}
.sc-nav__in {
  max-width: 1440px; margin: 0 auto; padding: 0 24px; height: 72px;
  display: flex; align-items: center; gap: 18px;
}
.sc-brand { display: flex; align-items: center; gap: 14px; flex: none; text-decoration: none !important; }
.sc-brand img { height: 56px; width: auto; margin: -6px -6px; filter: drop-shadow(0 4px 14px rgba(140, 64, 246, .3)); }
.sc-brand__txt {
  padding-left: 14px; border-left: 1px solid var(--sc-line2);
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 11px; font-weight: 700;
  letter-spacing: .24em; text-transform: uppercase; color: var(--sc-ink2);
}
.sc-links { display: flex; align-items: center; gap: 4px; margin-left: 18px; min-width: 0; }
.sc-links a {
  white-space: nowrap; padding: 8px 12px; border-radius: 9px; border: 1px solid transparent;
  color: #a69cb8 !important; font-size: 14.5px; font-weight: 500; text-decoration: none !important;
  transition: color .15s, background .15s, border-color .15s;
}
.sc-links a:hover { color: #fff !important; background: var(--sc-card); }
.sc-links a.on { color: #fff !important; background: #241a41; border-color: #4a3a82; }
.sc-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.sc-icon {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px;
  background: var(--sc-card); border: 1px solid #2c2442; color: var(--sc-ink2) !important;
  cursor: pointer; text-decoration: none !important; transition: border-color .15s, color .15s;
}
.sc-icon:hover { border-color: #4a3a82; color: #fff !important; }
.sc-burger { display: none; }
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 16px;
  border-radius: 10px; border: 1px solid transparent; font-weight: 700; font-size: 14px; color: #fff !important;
  cursor: pointer; white-space: nowrap; text-decoration: none !important;
}
.sc-btn--grad { background: var(--sc-grad); box-shadow: 0 10px 26px -12px rgba(140, 64, 246, .8); text-shadow: 0 1px 2px rgba(40, 10, 80, .35); }
.sc-btn--grad:hover { filter: brightness(1.08); }
.sc-btn span { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.sc-mobile { border-top: 1px solid var(--sc-line); background: var(--sc-bg2); padding: 8px 16px 14px; display: flex; flex-direction: column; }
.sc-mobile.hidden { display: none !important; }
.sc-mobile a { padding: 12px 6px; color: var(--sc-ink) !important; border-bottom: 1px solid var(--sc-line); text-decoration: none !important; }
@media (max-width: 1100px) {
  .sc-links { display: none; }
  .sc-burger { display: grid; }
}
@media (max-width: 560px) {
  .sc-nav__in { padding: 0 14px; gap: 10px; }
  .sc-brand__txt { display: none; }
  .sc-brand img { height: 48px; }
  .sc-btn span { display: none; }
  .sc-btn { width: 40px; padding: 0; }
}

/* ---------------- Startseite: grosser 3D-Schriftzug ---------------- */
.sc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1440px; margin: 0 auto; padding: 40px 24px 56px; text-align: center;
}
.sc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(560px 300px at 50% 32%, rgba(140, 64, 246, .34), transparent 70%),
    radial-gradient(420px 220px at 50% 48%, rgba(212, 90, 190, .12), transparent 70%);
}
.sc-hero__rings {
  position: absolute; left: 50%; top: 30%; width: 1100px; height: 560px; transform: translate(-50%, -50%); z-index: -1;
  background: repeating-radial-gradient(ellipse at 50% 50%, transparent 0 26px, rgba(167, 119, 252, .12) 26px 27px, transparent 27px 54px, rgba(140, 64, 246, .08) 54px 55px);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%);
  pointer-events: none;
}
.sc-hero__logo {
  display: block; width: min(640px, 92%); height: auto; margin: 0 auto -14px;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .6));
  animation: sc-float 8s ease-in-out infinite;
}
@keyframes sc-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(0); } }
.sc-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 12px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: #a777fc;
}
.sc-eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--sc-grad); }
body.retro-theme .sc-hero__title { margin: 10px 0 0; font-size: clamp(38px, 5.4vw, 64px) !important; font-weight: 900 !important; line-height: 1.02; }
.sc-hero__title span { background: var(--sc-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
body.retro-theme .sc-hero__lede { max-width: 58ch; margin: 14px auto 0; font-size: 17px; color: var(--sc-ink2); }
.sc-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 30px; }
.sc-cat {
  display: flex; align-items: center; gap: 16px; min-width: 260px; padding: 14px 18px 14px 14px;
  border-radius: 16px; background: var(--sc-card); border: 1px solid var(--sc-line);
  text-align: left; text-decoration: none !important; transition: transform .2s, border-color .2s, background .2s;
}
.sc-cat:hover { transform: translateY(-3px); border-color: #4a3a82; background: var(--sc-card2); box-shadow: 0 22px 50px -30px rgba(140, 64, 246, .7); }
.sc-cat__img { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: rgba(140, 64, 246, .14); border: 1px solid rgba(167, 119, 252, .24); flex: none; }
.sc-cat__img img { max-width: 48px; max-height: 48px; object-fit: contain; }
.sc-cat__txt { display: flex; flex-direction: column; gap: 2px; }
.sc-cat__txt b { font-family: var(--sc-head) !important; font-style: italic; font-weight: 800; font-size: 20px; color: var(--sc-ink) !important; }
.sc-cat__txt small { font-size: 13px; color: var(--sc-lav) !important; }
.sc-cat:hover .sc-cat__txt small i { transform: translateX(3px); }
.sc-cat__txt small i { transition: transform .2s; }

/* ---------------- Aufbau mit Seitenleiste ---------------- */
body.retro-theme .rr-layout { gap: 28px; padding-top: 10px; }
body.retro-theme:not(.retro-page-index) .rr-layout { padding-top: 34px; }

/* Karten: Seitenleiste, Inhalte, Pakete, Kasse */
body.retro-theme .rr-sidebar-nav,
body.retro-theme .rr-panel,
body.retro-theme .rr-sidebar .retro-module,
body.retro-theme .rr-sidebar .retro-package,
body.retro-theme .retro-category-page .retro-package,
body.retro-theme .retro-product-page > div:first-child > div,
body.retro-theme .retro-product-page .package-description,
body.retro-theme .retro-cms-page .package-description,
body.retro-theme .retro-quote-page > div,
body.retro-theme .retro-checkout-page {
  border: 1px solid var(--sc-line) !important;
  border-radius: 16px !important;
  background: var(--sc-card) !important;
  box-shadow: none !important;
}

body.retro-theme .rr-sidebar-nav { padding: 10px !important; }
body.retro-theme .rr-sidebar-nav a {
  color: #a69cb8 !important; border-radius: 9px; padding: 9px 12px !important;
  font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; font-size: 15px !important;
}
body.retro-theme .rr-sidebar-nav a:hover { color: #fff !important; background: var(--sc-card2); }
body.retro-theme .rr-sidebar-nav a.is-active { color: #fff !important; background: #241a41; box-shadow: inset 0 0 0 1px #4a3a82; }

body.retro-theme .rr-sidebar .retro-module__title,
body.retro-theme .rr-sidebar .retro-module > div:first-child h2 { color: var(--sc-ink) !important; }
body.retro-theme .rr-sidebar .retro-module__title::before,
body.retro-theme .rr-sidebar .retro-module > div:first-child h2::before { background: var(--sc-grad) !important; }

/* Startseiten-Text */
body.retro-theme .rr-home-content {
  min-height: 0 !important; padding: 34px 36px !important; text-align: left !important;
  color: var(--sc-ink2) !important; font-size: 16px !important; line-height: 1.65 !important;
}
body.retro-theme .rr-home-content h1 { font-size: 30px !important; margin: 0 0 14px !important; }
body.retro-theme .rr-home-content h2 { font-size: 23px !important; margin: 26px 0 10px !important; }
body.retro-theme .rr-home-content p { margin: 0 0 12px !important; }
body.retro-theme .rr-home-content strong { color: var(--sc-ink) !important; }
body.retro-theme .rr-home-content a,
body.retro-theme .rr-home-content em { color: var(--sc-lav) !important; }
body.retro-theme .rr-home-content hr { border: 0; height: 1px; background: var(--sc-line2); margin: 22px 0; }
body.retro-theme .rr-home-content .sc-legal { font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 12px !important; letter-spacing: .04em; color: var(--sc-ink3) !important; }

/* Pakete */
body.retro-theme .retro-package { border-radius: 16px !important; overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
body.retro-theme .retro-package:hover {
  transform: translateY(-3px);
  border-color: #4a3a82 !important;
  box-shadow: 0 22px 50px -30px rgba(140, 64, 246, .75) !important;
}
body.retro-theme .retro-package > img { border-radius: 16px 16px 0 0 !important; }
body.retro-theme .package-list .package-name,
body.retro-theme .retro-package .package-name { color: var(--sc-ink) !important; font-family: var(--sc-head) !important; font-style: italic; font-weight: 800 !important; }
body.retro-theme .rr-package-description,
body.retro-theme .package-description,
body.retro-theme .package-description p,
body.retro-theme .package-description li { color: var(--sc-ink2) !important; }
body.retro-theme .rr-package-description h1, body.retro-theme .rr-package-description h2,
body.retro-theme .rr-package-description h3, body.retro-theme .rr-package-description h4,
body.retro-theme .package-description h1, body.retro-theme .package-description h2,
body.retro-theme .package-description h3, body.retro-theme .package-description h4 { color: var(--sc-ink) !important; }
body.retro-theme .package-description a,
body.retro-theme .package-description ol li::before { color: var(--sc-lav) !important; }
body.retro-theme .package-description ul li::before { background-color: var(--sc-violet) !important; }
body.retro-theme .retro-package__price,
body.retro-theme .package-list .retro-package__price,
body.retro-theme .rr-sidebar .retro-module--featured .retro-package__price {
  color: var(--sc-orange) !important; font-family: var(--sc-head) !important; font-style: italic; font-weight: 800 !important;
}

/* Hauptknoepfe: Verlauf Lila -> Orange wie im Spiel */
body.retro-theme .package-add-to-cart,
body.retro-theme .checkout-btn,
body.retro-theme .options-submit-btn,
body.retro-theme .store-product-options button[type="submit"],
body.retro-theme .store-product-options input[type="submit"],
body.retro-theme .retro-button--primary {
  border: 0 !important; border-radius: 12px !important;
  color: #fff !important;
  background: var(--sc-grad) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 12px 28px -12px rgba(140, 64, 246, .8) !important;
  text-shadow: 0 1px 2px rgba(40, 10, 80, .35);
}
body.retro-theme .package-add-to-cart span,
body.retro-theme .package-add-to-cart svg { color: #fff !important; fill: currentColor; }
body.retro-theme .Btn::before { background: var(--sc-grad) !important; }
body.retro-theme .package-add-to-cart:hover,
body.retro-theme .checkout-btn:hover,
body.retro-theme .options-submit-btn:hover,
body.retro-theme .retro-button--primary:hover { filter: brightness(1.08); }
body.retro-theme .package-remove { border-radius: 12px !important; }

/* Nebenknoepfe, Suche, Filter */
body.retro-theme .retro-button--secondary,
body.retro-theme .tag-filter button,
body.retro-theme .search {
  border: 1px solid #33295a !important; border-radius: 10px !important;
  color: var(--sc-ink) !important; background: var(--sc-btn) !important;
}
body.retro-theme .retro-button--secondary:hover,
body.retro-theme .tag-filter button:hover { border-color: #4a3a82 !important; background: #2e2550 !important; }

/* Formulare */
body.retro-theme input,
body.retro-theme select,
body.retro-theme textarea,
body.retro-theme .store-product-options input,
body.retro-theme .store-product-options select,
body.retro-theme .store-product-options textarea {
  border-color: #2c2442 !important; background: var(--sc-bg2) !important; color: var(--sc-ink) !important;
}
body.retro-theme input:focus,
body.retro-theme select:focus,
body.retro-theme textarea:focus { border-color: #4a3a82 !important; box-shadow: 0 0 0 4px rgba(140, 64, 246, .16) !important; outline: 0; }
body.retro-theme input::placeholder,
body.retro-theme textarea::placeholder { color: var(--sc-ink3) !important; }

/* Fenster (Optionen, Login, Warenkorb) */
body.retro-theme .options-popup { background: rgba(10, 7, 16, .78) !important; }
body.retro-theme .options-popup > div,
body.retro-theme .retro-options-native {
  border: 1px solid #33295a !important; border-radius: 16px !important;
  background: var(--sc-card) !important;
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), 0 0 0 1px rgba(190, 170, 255, .06) !important;
}
body.retro-theme .retro-options-native__header h3 { color: var(--sc-ink) !important; }
body.retro-theme .retro-options-native__close { color: var(--sc-ink2) !important; }
body.retro-theme .retro-options-native__close:hover { color: #fff !important; }
body.retro-theme .store-product-options p,
body.retro-theme .store-product-options label { color: var(--sc-ink2) !important; }

/* Alte Mobil-Elemente der Vorlage */
body.retro-theme .rr-mobile-toggle,
body.retro-theme .rr-mobile-menu { display: none !important; }

/* Fusszeile */
body.retro-theme footer {
  margin-top: 60px;
  border-top: 1px solid var(--sc-line) !important;
  background: var(--sc-bg2) !important;
  position: relative;
}
body.retro-theme footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(140, 64, 246, .6), rgba(248, 152, 59, .45), transparent);
}
body.retro-theme footer, body.retro-theme footer p, body.retro-theme footer a { color: var(--sc-ink2) !important; }
body.retro-theme footer a:hover { color: #fff !important; }

/* Schieber und Kleinkram */
body.retro-theme .swiper-slide { background: var(--sc-card) !important; }
body.retro-theme .packageThumbsSwiper .swiper-slide-thumb-active { border-color: var(--sc-violet) !important; }
body.retro-theme .swiper-button-next,
body.retro-theme .swiper-button-prev { background: var(--sc-btn) !important; border-radius: 10px; }
body.retro-theme .swiper-button-next:hover,
body.retro-theme .swiper-button-prev:hover { background: var(--sc-violet) !important; }

@media (max-width: 800px) {
  .sc-hero { padding: 24px 16px 40px; }
  .sc-cat { min-width: 0; width: 100%; }
  body.retro-theme .rr-home-content { padding: 24px 20px !important; }
}
@media (prefers-reduced-motion: reduce) { .sc-hero__logo { animation: none; } }

/* Meldungen (Warenkorb usw.) */
body.retro-theme .colored-toast.swal2-icon-success { background-color: #5b2bb5 !important; }
body.retro-theme .colored-toast.swal2-icon-error { background-color: #c0392b !important; }
body.retro-theme .colored-toast.swal2-icon-warning { background-color: #d9822b !important; }
body.retro-theme .colored-toast.swal2-icon-info,
body.retro-theme .colored-toast.swal2-icon-question { background-color: #8c40f6 !important; }

/* "Beliebt"-Paket: Flammen in Lila/Orange */
body.retro-theme .fire-center .main-fire {
  background-image: radial-gradient(farthest-corner at 10px 0, #8c40f6 0%, #b450b4 45%, #f8983b 100%) !important;
}

/* Paketseite: Bildrahmen und Vorschaubilder */
body.retro-theme .retro-product-page .swiper,
body.retro-theme .retro-product-page [class*="h-[250px]"] { background: var(--sc-bg2) !important; border-color: var(--sc-line) !important; }
body.retro-theme .packageThumbsSwiper .swiper-slide { border-color: var(--sc-line2) !important; }

/* =========================================================
   AUSBAU 02.10. abends: Vorteile, Laufband, Schritte, FAQ
   ========================================================= */
.sc-perks { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sc-perks li {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px;
  background: rgba(140, 64, 246, .1); border: 1px solid rgba(167, 119, 252, .24);
  color: #d9c8ff !important; font-size: 13.5px; font-weight: 600;
}
.sc-perks li i { color: var(--sc-orange); font-size: 13px; }

.sc-ticker { position: relative; overflow: hidden; border-block: 1px solid var(--sc-line); background: var(--sc-bg2); margin: 0 0 26px; }
.sc-ticker__track { display: flex; gap: 44px; width: max-content; padding: 14px 0; animation: sc-ticker 46s linear infinite; }
.sc-ticker span {
  display: inline-flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 12px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sc-ink2) !important;
}
.sc-ticker span i { font-size: 10px; color: var(--sc-lav); }
.sc-ticker span:nth-child(even) i { color: var(--sc-orange); }
.sc-ticker:hover .sc-ticker__track { animation-play-state: paused; }
@keyframes sc-ticker { to { transform: translateX(-50%); } }

.sc-home { display: flex; flex-direction: column; gap: 26px; }
.sc-block__head { margin-bottom: 14px; }
body.retro-theme .sc-block__head h2 { margin: 6px 0 0 !important; font-size: clamp(24px, 2.6vw, 30px) !important; font-weight: 900 !important; }
.sc-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sc-step {
  position: relative; padding: 20px 20px 18px; border-radius: 16px;
  background: var(--sc-card); border: 1px solid var(--sc-line);
  transition: transform .2s, border-color .2s;
}
.sc-step:hover { transform: translateY(-3px); border-color: #4a3a82; }
.sc-step__n {
  position: absolute; right: 16px; top: 10px;
  font-family: var(--sc-head) !important; font-style: italic; font-weight: 900; font-size: 44px; line-height: 1;
  background: linear-gradient(180deg, #d2bdff, #a777fc 40%, #d45abe 75%, #f8983b); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55;
}
.sc-step > i {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
  background: rgba(140, 64, 246, .16); border: 1px solid rgba(167, 119, 252, .26); color: #c4a8ff; font-size: 18px;
}
.sc-step:nth-child(2) > i { background: rgba(248, 152, 59, .12); border-color: rgba(248, 152, 59, .3); color: var(--sc-orange); }
body.retro-theme .sc-step h3 { margin: 0 0 6px !important; font-size: 19px !important; }
body.retro-theme .sc-step p { margin: 0 !important; font-size: 14.5px; line-height: 1.55; }

.sc-faq { display: flex; flex-direction: column; gap: 8px; }
.sc-faq details { border-radius: 14px; background: var(--sc-card); border: 1px solid var(--sc-line); transition: border-color .2s; }
.sc-faq details[open] { border-color: #4a3a82; background: var(--sc-card2); }
.sc-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; color: var(--sc-ink) !important; font-weight: 600; font-size: 15.5px;
}
.sc-faq summary::-webkit-details-marker { display: none; }
.sc-faq summary i { color: var(--sc-lav); transition: transform .2s; }
.sc-faq details[open] summary i { transform: rotate(180deg); }
body.retro-theme .sc-faq details p { margin: 0 !important; padding: 0 18px 16px; font-size: 14.5px; line-height: 1.6; }

.sc-foot-logo { width: auto; height: 64px; filter: drop-shadow(0 4px 14px rgba(140, 64, 246, .3)); }

/* Seitenleiste: beliebtes Paket ohne Flammen-Leerraum */
body.retro-theme .rr-sidebar .retro-module--featured .fire { display: none !important; }

/* Kategorie-Seite: Kopf wie ein Paragraph im Regelwerk */
body.retro-theme .retro-category-page > div:first-child h2 { font-size: clamp(30px, 3.4vw, 40px) !important; font-weight: 900 !important; }
body.retro-theme .retro-category-page > div:first-child h3,
body.retro-theme .retro-category-page > div:first-child h3 * { font-family: var(--sc-body) !important; font-style: normal !important; font-weight: 400 !important; font-size: 15.5px !important; color: var(--sc-ink2) !important; }

@media (max-width: 900px) { .sc-steps { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .sc-ticker__track { animation: none; } }

/* Coin-Karten: Bild randlos oben, wie ein Titelbild */
body.retro-theme .package-list.sc-list--coins .retro-package > img {
  height: auto !important; aspect-ratio: 3 / 2; padding: 0 !important; object-fit: cover !important;
  border-radius: 16px 16px 0 0 !important; background: #0d0915;
}
body.retro-theme .package-list.sc-list--coins .retro-package { overflow: hidden; }
body.retro-theme .package-list.sc-list--coins .retro-package:hover > img { filter: brightness(1.08) saturate(1.06); }

/* Abzeichen: Bonus, Bester Wert, Beliebt */
.sc-badges { position: absolute; left: 14px; top: 14px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 28px); pointer-events: none; }
.sc-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace !important; font-size: 11.5px; font-weight: 800; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; color: #fff !important;
  background: rgba(19, 14, 28, .84); border: 1px solid rgba(167, 119, 252, .45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
.sc-badge i { font-size: 10.5px; }
.sc-badge--bonus { border-color: rgba(248, 152, 59, .6); color: #ffd3a6 !important; }
.sc-badge--best { background: var(--sc-grad); border-color: transparent; }
.sc-badge--fav { border-color: rgba(183, 155, 255, .65); color: #e2d4ff !important; }
.sc-badge--fav i { color: var(--sc-orange); }

/* Beliebtes Produkt in der Seitenleiste: englische Ueberschrift aus dem Skript ausblenden */
body.retro-theme .retro-module--featured > section { margin: 0 !important; padding: 0 !important; gap: 0 !important; max-width: none !important; width: 100% !important; }
body.retro-theme .retro-module--featured > section > div:first-child { display: none !important; }
body.retro-theme .retro-module--featured .sc-badges { display: none; }

/* Coin-Karten kompakt: Name steht schon oben, Hinweise stehen auf der Paketseite */
body.retro-theme .package-list.sc-list--coins .rr-package-description { max-height: none !important; }
body.retro-theme .package-list.sc-list--coins .rr-package-description > h1:first-child { display: none !important; }
body.retro-theme .package-list.sc-list--coins .rr-package-description > h2:nth-of-type(2),
body.retro-theme .package-list.sc-list--coins .rr-package-description > h2:nth-of-type(2) ~ * { display: none !important; }

/* Paketseite: Hauptbild im 3:2-Format statt fester Hoehe mit leeren Streifen */
body.retro-theme div:has(> div > .packageMainSwiper) { height: auto !important; }
body.retro-theme div:has(> .packageMainSwiper) { height: auto !important; aspect-ratio: 3 / 2; }
body.retro-theme .packageMainSwiper .swiper-slide img { object-fit: contain !important; }

/* =========================================================
   02.10. spaet: Karten kleiner + buendig (Maxi: "rechts zu eng, Bilder zu gross")
   ========================================================= */
body.retro-theme .package-list {
  display: grid !important; grid-template-columns: minmax(0, 1fr); gap: 16px !important;
  align-items: stretch !important; width: 100% !important; min-height: 0 !important;
}
body.retro-theme .package-list > .retro-package { width: auto !important; max-width: none !important; margin: 0 !important; height: 100%; }
@media (min-width: 700px) { body.retro-theme .package-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { body.retro-theme .package-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px !important; } }

/* Bild kleiner: mit Rand, ganz sichtbar, nicht mehr randlos */
body.retro-theme .package-list .retro-package > img,
body.retro-theme .package-list.sc-list--coins .retro-package > img {
  height: auto !important; aspect-ratio: 16 / 10; padding: 40px 18px 0 !important; object-fit: contain !important;
  border-radius: 14px 14px 0 0 !important; background: transparent !important;
}
body.retro-theme .package-list .retro-package .package-name { font-size: 21px !important; }
body.retro-theme .package-list .retro-package__body { padding: 8px 18px 4px !important; gap: 6px !important; }
body.retro-theme .package-list .package-card { padding: 4px 18px 18px !important; }
body.retro-theme .package-list .package-add-to-cart,
body.retro-theme .package-list .package-remove { padding-top: 13px !important; padding-bottom: 13px !important; border-radius: 12px !important; }
body.retro-theme .package-list .retro-package__price { margin: 6px 0 0 !important; font-size: 22px !important; }

/* Coin-Karten: nur die Kurzzeile, der Rest steht auf der Paketseite */
body.retro-theme .package-list.sc-list--coins .rr-package-description > :not(p:first-of-type) { display: none !important; }
body.retro-theme .package-list.sc-list--coins .rr-package-description > p:first-of-type { margin: 0 !important; text-align: center; color: var(--sc-ink2) !important; font-weight: 500 !important; }
body.retro-theme .package-list .package-tags { min-height: 0 !important; }
body.retro-theme .package-list .sc-badges { left: 22px; top: 22px; }

/* Inhalt rechts und links buendig mit Kopfleiste (vorher rechts 60px eingerueckt, links 30px) */
body.retro-theme .rr-content > section.container,
body.retro-theme .rr-content > .retro-content-page {
  width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important; margin-top: 24px !important;
}

/* Paketseite (Maxi-Screenshot 02.10.: Kaufbox rechts gequetscht, Bild zu gross):
   ab 1280px zwei gleich breite Spalten, darunter untereinander; Bild darf die Kaufbox nie wegdruecken */
body.retro-theme .retro-product-page > div:first-child > * { width: 100% !important; min-width: 0 !important; max-width: none !important; }
@media (min-width: 1280px) {
  body.retro-theme .retro-product-page > div:first-child {
    display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start !important; gap: 18px !important;
  }
}
@media (max-width: 1279.98px) {
  body.retro-theme .retro-product-page > div:first-child { flex-direction: column !important; }
  body.retro-theme .retro-product-page > div:first-child > :first-child { max-width: 560px !important; margin: 0 auto !important; }
}
body.retro-theme .retro-product-page .packageMainSwiper { overflow: hidden !important; }
body.retro-theme .retro-product-page .package-page-name { overflow-wrap: anywhere; padding-right: 0 !important; }
body.retro-theme .retro-product-page .product-actions .package-add-to-cart span,
body.retro-theme .retro-product-page .product-actions .package-remove span { white-space: nowrap; font-size: 18px !important; }
body.retro-theme .retro-product-page [class*="justify-between"][class*="rounded-[15px]"] { gap: 12px !important; }
body.retro-theme .retro-product-page [class*="justify-between"][class*="rounded-[15px]"] > a { flex-shrink: 0; white-space: nowrap; }

/* Coin-Karten ganz ohne Beschreibung (Maxi 02.10. 23:23: "mach das da weg") - nur Bild, Name, Preis, Knopf */
body.retro-theme .package-list.sc-list--coins .rr-package-description { display: none !important; }

/* Custom-PED-Karte: nur Kurzzeile + die zwei Punkte (5 Std. Arbeit, exklusiv); alles andere auf der Paketseite */
body.retro-theme .package-list.sc-list--ped .rr-package-description { max-height: none !important; }
body.retro-theme .package-list.sc-list--ped .rr-package-description > :not(p:first-of-type):not(ul) { display: none !important; }
body.retro-theme .package-list.sc-list--ped .rr-package-description > p:first-of-type { margin: 0 0 8px !important; color: var(--sc-ink) !important; }
/* Kategorie-Unterzeile normal schreiben statt GROSS */
body.retro-theme .retro-category-page > div:first-child h3,
body.retro-theme .retro-category-page > div:first-child h3 * { text-transform: none !important; letter-spacing: 0 !important; }