/* ===========================
   TEAMTYSON 3.0 - AURORA DARK REDESIGN
   BASE / GLOBAL - CSS Variables
   (Alle Klassennamen unverändert – nur das Aussehen ist neu)
=========================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --color-primary: #7c5cff;
  --color-primary-light: #9d85ff;
  --color-primary-dark: #5b3df0;
  --color-primary-glow: rgba(124, 92, 255, 0.35);
  --color-primary-soft: rgba(124, 92, 255, 0.12);
  --color-secondary: #2ee6c8;
  --color-secondary-glow: rgba(46, 230, 200, 0.28);
  --color-accent: #ff6b9d;
  --color-bg: #070a13;
  --color-bg-secondary: #0b101d;
  --color-card: #101527;
  --color-surface: #161c31;
  --color-border: rgba(148, 163, 255, 0.14);
  --color-border-hover: rgba(124, 92, 255, 0.55);
  --color-text: #f2f4ff;
  --color-text-secondary: #9aa3c0;
  --color-text-muted: #5d6580;
  --color-success: #2ee6a8;
  --color-error: #ff5c7a;
  --color-warning: #ffc857;
  --font-heading: 'Space Grotesk', 'Orbitron', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow-glow: 0 0 40px rgba(124, 92, 255, 0.14);
  --shadow-card: 0 10px 40px rgba(2, 4, 12, 0.55);
  --gradient-brand: linear-gradient(135deg, #7c5cff, #2ee6c8);
  --gradient-cta: linear-gradient(135deg, #8a6bff, #5b3df0);
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Aurora-Hintergrund: ruhig, weich, ohne Flackern */
body::before {
  content: "";
  position: fixed;
  z-index: 0;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 15% -10%, rgba(124, 92, 255, 0.14) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 95% 15%, rgba(46, 230, 200, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(255, 107, 157, 0.06) 0%, transparent 60%);
  pointer-events: none;
  animation: bgPulse 14s ease-in-out infinite alternate;
}

@keyframes bgPulse {
  0% { opacity: 0.75; }
  100% { opacity: 1; }
}

::selection {
  background: rgba(124, 92, 255, 0.4);
  color: #fff;
}

/* Dezente Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--color-bg); }
::-webkit-scrollbar-thumb {
  background: var(--color-surface);
  border-radius: 999px;
  border: 2px solid var(--color-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-primary-dark); }

/* ===========================
   TYPOGRAPHY
=========================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  margin: 0 0 1rem 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--color-primary-light); font-weight: 600; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); font-weight: 600; }

p {
  font-size: 1rem;
  color: var(--color-text-secondary);
  margin: 0 0 1rem 0;
}

a {
  color: var(--color-primary-light);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-secondary);
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===========================
   HEADER + NAV - Glass / Aurora
=========================== */
header {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.7rem 1.5rem;
  background: rgba(7, 10, 19, 0.78);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-bottom: 1px solid var(--color-border);
}

header::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, rgba(124, 92, 255, 0.5), rgba(46, 230, 200, 0.4), transparent 95%);
  opacity: 0.7;
}

.header-title-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.header-title-logo h1 {
  margin: 0;
  font-size: clamp(1.3rem, 4vw, 1.7rem);
  font-family: var(--font-heading);
  font-weight: 700;
  background: linear-gradient(120deg, #f2f4ff 20%, var(--color-primary-light) 60%, var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0.01em;
}

.header-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--gradient-brand) border-box;
  box-shadow: 0 4px 16px rgba(2, 4, 12, 0.5);
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.header-logo:hover {
  transform: scale(1.06);
  box-shadow: 0 0 24px var(--color-primary-glow);
}

/* Menu Button */
.menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text);
  font-size: 1.3rem;
  cursor: pointer;
  transition: all var(--transition-fast);
  padding: 0;
}

.menu-button:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-border-hover);
  box-shadow: 0 0 18px var(--color-primary-glow);
}

/* Hamburger Animation */
.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  gap: 4px;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transform-origin: center;
}

.menu-button:hover .hamburger span {
  background: var(--color-primary-light);
}

.hamburger.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* User Buttons */
.user-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}

.user-buttons a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.04);
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
}

.user-buttons a svg {
  width: 16px;
  height: 16px;
}

.user-buttons .btn-login {
  background: var(--gradient-cta);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 18px rgba(124, 92, 255, 0.35);
}

.user-buttons a:hover {
  transform: translateY(-1px);
  border-color: var(--color-border-hover);
  box-shadow: 0 6px 22px var(--color-primary-glow);
  color: #fff;
}

.user-buttons .btn-profile {
  border-color: rgba(46, 230, 200, 0.4);
  color: var(--color-secondary);
  background: rgba(46, 230, 200, 0.06);
}

.user-buttons .btn-profile:hover {
  background: rgba(46, 230, 200, 0.14);
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  box-shadow: 0 6px 22px var(--color-secondary-glow);
}

/* Nav Overlay */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 5, 10, 0.65);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
  z-index: 1500;
}

.nav-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* Navigation Panel */
#nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(85vw, 380px);
  height: 100vh;
  background: rgba(11, 16, 29, 0.92);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border-left: 1px solid var(--color-border);
  border-radius: 24px 0 0 24px;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
  z-index: 2000;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 60px rgba(2, 4, 12, 0.6);
}

#nav.show {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

#nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(124, 92, 255, 0.5), rgba(46, 230, 200, 0.4), transparent);
  opacity: 0.8;
}

/* Nav Close Button */
.nav-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: none;
  z-index: 10;
}

.nav-close svg {
  flex-shrink: 0;
}

.nav-close:hover {
  background: rgba(255, 92, 122, 0.15);
  border-color: var(--color-error);
  color: var(--color-error);
  transform: rotate(90deg);
}

.nav-close svg {
  width: 18px;
  height: 18px;
}

/* Nav Header */
.nav-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.nav-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid transparent;
  background: linear-gradient(var(--color-bg), var(--color-bg)) padding-box, var(--gradient-brand) border-box;
}

.nav-header span {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.menu-root {
  list-style: none;
  margin: 0;
  padding: 8px 0;
  flex: 1;
}

.menu-root ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-root > li {
  position: relative;
}

/* Nav Icons */
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.65;
  transition: all var(--transition-fast);
}

nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 12px;
  padding: 12px 14px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border-bottom: none;
  transition: all var(--transition-fast);
  position: relative;
}

nav a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 20%;
  width: 3px;
  height: 60%;
  background: var(--gradient-brand);
  transform: scaleY(0);
  transition: transform var(--transition-fast);
  border-radius: 0 2px 2px 0;
}

nav a:hover {
  color: var(--color-text);
  background: var(--color-primary-soft);
  padding-left: 18px;
}

nav a:hover::before {
  transform: scaleY(1);
}

nav a:hover .nav-icon {
  opacity: 1;
  color: var(--color-primary-light);
}

/* Nav Highlight (Shop) */
.nav-highlight {
  background: linear-gradient(90deg, rgba(124, 92, 255, 0.14), rgba(46, 230, 200, 0.06)) !important;
  border: 1px solid rgba(124, 92, 255, 0.25) !important;
}

.nav-highlight .nav-icon {
  color: var(--color-primary-light);
  opacity: 1;
}

/* Nav Badge */
.nav-badge {
  font-size: 0.65rem;
  padding: 3px 8px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  color: white;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-left: auto;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 6px var(--color-primary-glow); }
  50% { box-shadow: 0 0 16px var(--color-primary-glow); }
}

/* Nav Divider */
.nav-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-border), transparent);
  margin: 12px 24px;
}

/* Nav Footer Link */
.nav-footer-link {
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem !important;
}

.nav-footer-link a {
  padding: 0 !important;
  margin: 0 !important;
  color: var(--color-text-muted) !important;
  font-size: 0.8rem;
  border: none !important;
  background: none !important;
}

.nav-footer-link a:hover {
  color: var(--color-primary-light) !important;
  padding: 0 !important;
}

.nav-footer-link a::before {
  display: none;
}

.nav-separator {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* Submenu Styles */
.has-submenu {
  position: relative;
}

.submenu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-right: 16px;
}

.submenu-head a {
  flex: 1;
}

.submenu-toggle {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
}

.submenu-toggle svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary-light);
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.submenu-toggle.rotated svg {
  transform: rotate(180deg);
}

.submenu-toggle:hover {
  background: var(--color-primary-soft);
  border-color: var(--color-border-hover);
}

.submenu {
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(3, 5, 10, 0.35);
  margin: 0 16px;
  border-radius: var(--radius-md);
}

.submenu.open {
  max-height: 500px;
  pointer-events: auto;
  margin-bottom: 8px;
}

.submenu a {
  margin: 2px 6px;
  padding: 10px 14px;
  font-size: 0.9rem;
  border-bottom: none;
}

.submenu a:last-child {
  border-bottom: none;
}

.submenu a::before {
  display: none;
}

.submenu a:hover {
  padding-left: 18px;
  background: var(--color-primary-soft);
}

/* Submenu Dot */
.submenu .dot {
  width: 6px;
  height: 6px;
  background: var(--gradient-brand);
  border-radius: 50%;
  opacity: 0.5;
  transition: all var(--transition-fast);
}

.submenu a:hover .dot {
  opacity: 1;
  box-shadow: 0 0 8px var(--color-primary-glow);
}

/* Nav Social Links */
.nav-social {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-secondary);
  transition: all var(--transition-fast);
  padding: 0 !important;
  margin: 0 !important;
}

.social-link::before {
  display: none !important;
}

.social-link svg {
  width: 18px;
  height: 18px;
}

.social-link:hover {
  background: var(--gradient-cta) !important;
  border-color: transparent;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--color-primary-glow);
}

/* Nav Search in Menu */
.nav-search {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  position: relative;
}

.nav-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 10px 16px;
  transition: all var(--transition-fast);
}

.nav-search-box:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  background: rgba(124, 92, 255, 0.06);
}

.nav-search-icon {
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.nav-search-box:focus-within .nav-search-icon {
  color: var(--color-primary-light);
}

.nav-search-box input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--color-text);
  font-size: 0.9rem;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.nav-search-box input::placeholder {
  color: var(--color-text-muted);
}

.nav-search-results {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(100% + 4px);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  max-height: 250px;
  overflow-y: auto;
  z-index: 100;
  box-shadow: 0 14px 40px rgba(2, 4, 12, 0.6);
}

.nav-search-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  margin: 0;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 0;
  transition: all var(--transition-fast);
}

.nav-search-item:last-child {
  border-bottom: none;
}

.nav-search-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary-light);
  flex-shrink: 0;
}

.nav-search-item:hover {
  background: var(--color-primary-soft);
  padding-left: 18px;
}

.nav-search-item::before {
  display: none !important;
}

.nav-search-empty {
  padding: 12px 14px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-align: center;
}

/* ===========================
   MAIN / LAYOUT
=========================== */
main {
  position: relative;
  z-index: 1;
  padding: 2rem 1.5rem;
  min-height: calc(100vh - 80px);
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ===========================
   HERO SECTION
=========================== */
.hero {
  text-align: center;
  padding: 3rem 1rem;
  margin-bottom: 2rem;
}

.hero h2 {
  font-size: clamp(1.8rem, 4vw, 3rem);
  margin-bottom: 1rem;
  background: linear-gradient(120deg, #f2f4ff 10%, var(--color-primary-light) 55%, var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-text {
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}

.welcome-text h2 {
  margin-bottom: 1.5rem;
}

.welcome-text p {
  color: var(--color-text-secondary);
  line-height: 1.8;
}

/* ===========================
   CARDS
=========================== */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-normal);
}

.card:hover {
  border-color: var(--color-border-hover);
  box-shadow: var(--shadow-glow), var(--shadow-card);
  transform: translateY(-3px);
}

/* ===========================
   FORMS / INPUTS
=========================== */
input, textarea, select {
  width: 100%;
  padding: 12px 16px;
  margin: 8px 0;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 1rem;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
  background: var(--color-surface);
}

input::placeholder, textarea::placeholder {
  color: var(--color-text-muted);
}

button {
  padding: 12px 24px;
  margin: 8px 0;
  background: var(--gradient-cta);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
  letter-spacing: 0.02em;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 26px var(--color-primary-glow);
  filter: brightness(1.08);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:disabled:hover {
  transform: none;
  box-shadow: none;
  filter: none;
}

/* ===========================
   TABLES
=========================== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 1rem 0;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

th, td {
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

th {
  font-family: var(--font-heading);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

table tr:last-child td {
  border-bottom: none;
}

table th:first-child { border-top-left-radius: var(--radius-lg); }
table th:last-child { border-top-right-radius: var(--radius-lg); }

tr:hover {
  background: var(--color-primary-soft);
}

tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}

/* ===========================
   STATUS BADGES
=========================== */
.status-pending { color: var(--color-warning); }
.status-approved { color: var(--color-success); }
.status-rejected { color: var(--color-error); }

.rank-badge {
  display: inline-block;
  padding: 0.25rem 0.8rem;
  border: 1px solid rgba(124, 92, 255, 0.4);
  background: var(--color-primary-soft);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary-light);
}

/* ===========================
   ERROR MESSAGES
=========================== */
.errors {
  background: rgba(255, 92, 122, 0.1);
  border: 1px solid rgba(255, 92, 122, 0.45);
  color: #ffc2d0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 1rem;
}

/* ===========================
   PANELS
=========================== */
.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 40%), var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-card);
}

/* ===========================
   GALLERY / SLIDESHOW
=========================== */
.gallery {
  position: relative;
  max-width: 900px;
  margin: 2rem auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.slides {
  position: relative;
}

.slide {
  display: none;
}

.slide.active {
  display: block;
}

.slide img {
  width: 100%;
  display: block;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 14px 18px;
  color: var(--color-text);
  font-size: 22px;
  background: rgba(7, 10, 19, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  transition: all var(--transition-fast);
  z-index: 10;
}

.prev:hover, .next:hover {
  background: var(--gradient-cta);
  border-color: transparent;
  box-shadow: 0 6px 20px var(--color-primary-glow);
}

.prev { left: 16px; }
.next { right: 16px; }

.dots {
  text-align: center;
  padding: 16px;
  background: rgba(7, 10, 19, 0.85);
}

.dot {
  height: 10px;
  width: 10px;
  margin: 0 6px;
  display: inline-block;
  border-radius: 50%;
  border: 2px solid rgba(124, 92, 255, 0.5);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.dot:hover, .dot.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 12px var(--color-primary-glow);
}

/* ===========================
   NEWS TICKER
=========================== */
.news-ticker {
  background: var(--color-card);
  color: var(--color-primary-light);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.news-ticker::before,
.news-ticker::after {
  content: "";
  position: absolute;
  top: 0;
  width: 50px;
  height: 100%;
  z-index: 1;
}

.news-ticker::before {
  left: 0;
  background: linear-gradient(90deg, var(--color-card), transparent);
}

.news-ticker::after {
  right: 0;
  background: linear-gradient(-90deg, var(--color-card), transparent);
}

.news-ticker p {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 25s linear infinite;
  font: 500 14px/48px var(--font-body);
  color: var(--color-text);
  margin: 0;
}

.news-ticker p span {
  color: var(--color-secondary);
}

@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* ===========================
   BUBBLES (Team Members etc.)
=========================== */
.bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--transition-normal);
}

.bubble-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: linear-gradient(var(--color-card), var(--color-card)) padding-box, var(--gradient-brand) border-box;
  box-shadow: 0 10px 30px rgba(2, 4, 12, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  transition: transform var(--transition-normal);
}

.bubble-title {
  color: var(--color-text);
  font-weight: 600;
  text-align: center;
  font-size: 1rem;
  margin-bottom: 4px;
  transition: color var(--transition-fast);
  font-family: var(--font-heading);
}

.bubble-desc {
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  text-align: center;
  margin: 0;
}

.bubble:hover {
  transform: translateY(-8px) scale(1.02);
}

.bubble:hover .bubble-circle {
  box-shadow: 0 0 34px var(--color-primary-glow), 0 14px 40px rgba(2, 4, 12, 0.6);
}

.bubble:hover img {
  transform: scale(1.06);
}

.bubble:hover .bubble-title {
  color: var(--color-primary-light);
}

.bubble-team-title {
  color: var(--color-text);
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: 2rem;
  font-family: var(--font-heading);
  font-weight: 700;
  text-align: center;
}

.bubble-grid-team {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  justify-items: center;
  margin: 0 auto 2.5rem;
  max-width: 420px;
  width: 100%;
}

@media (min-width: 800px) {
  .bubble-grid-team {
    grid-template-columns: repeat(5, 1fr);
    max-width: 1200px;
    gap: 2.5rem 2rem;
  }
}

.bubble-grid-team .bubble {
  width: 150px;
  max-width: 100%;
}

@media (max-width: 700px) {
  .bubble-grid-team {
    max-width: 98vw;
  }
  .bubble-grid-team .bubble {
    width: 44vw;
    min-width: 120px;
    max-width: 180px;
  }
}

/* ===========================
   QR CODE SECTION
=========================== */
.qr-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  margin-bottom: 2rem;
}

.qr-section h2 {
  margin-bottom: 1rem;
}

.qr-section img {
  width: 150px;
  height: 150px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 8px;
  background: white;
  box-shadow: 0 10px 34px rgba(2, 4, 12, 0.5);
}

/* ===========================
   RESPONSIVE HEADER
=========================== */
@media (max-width: 600px) {
  header {
    padding: 0.55rem 1rem;
  }

  .header-title-logo h1 {
    font-size: 1.15rem;
  }

  .header-logo {
    width: 38px;
    height: 38px;
  }

  .user-buttons a {
    padding: 7px 13px;
    font-size: 0.75rem;
  }
}

/* ===========================
   ÖFFENTLICHES PROFIL (ts-*)
   === UNVERÄNDERT AB HIER ===
=========================== */
:root{
  --ts-card-bg:#0f1116;
  --ts-card-br:1.5px solid rgba(255,255,255,.12);
  --ts-text:#e8e9ee;
  --ts-muted:#b7b9c3;
  --ts-shadow:0 8px 24px rgba(0,0,0,.35);
}

/* Rahmen + Grundlayout */
.ts-profile-wrap{
  --ts-gap:16px; --ts-radius:18px; --ts-frame-border:3px;
  --ts-frame-color:linear-gradient(90deg,#3a3f4d,#222832);
  --ts-frame-glow:drop-shadow(0 0 0 rgba(0,0,0,0));
  border-radius:calc(var(--ts-radius) + 10px);
  padding:clamp(8px,1.5vw,14px);
  background:linear-gradient(var(--ts-card-bg),var(--ts-card-bg)) padding-box, var(--ts-frame-color) border-box;
  border:var(--ts-frame-border) solid transparent;
  filter:var(--ts-frame-glow);
  color:var(--ts-text);
  max-width: 1000px;
  max-height: none;
  margin: 20px auto;

  /* Desktop: Höhe begrenzen */
@media (min-width: 901px) {
  .ts-profile-wrap {
    max-height: 510px;  /* feste Begrenzung nur auf großen Screens */
  }
}
  position: relative; /* für Overlays */
  overflow: visible;
  isolation: isolate;
}
.ts-profile-grid{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:20px; align-items: stretch; }
@media (max-width:900px){ .ts-profile-grid{ grid-template-columns:1fr; } }

/* Karten & Header */
.ts-card{ background:var(--ts-card-bg); border:var(--ts-card-br); border-radius:var(--ts-radius); box-shadow:var(--ts-shadow); padding:clamp(14px,1.8vw,22px); }
.ts-prof-header{ display:flex; align-items:center; justify-content:space-between; gap:var(--ts-gap); padding:12px 16px; }
.ts-prof-username{ font-size:clamp(26px,2.8vw,36px); font-weight:800; letter-spacing:.2px; }
.ts-prof-rank{ font-size:14px; color:var(--ts-muted); }
.ts-prof-small{ font-size:12px; color:var(--ts-muted); }
.ts-section-title{ font-weight:700; margin-bottom:8px; letter-spacing:.2px; }

/* Bereiche */
.ts-prof-about{ min-height:180px; margin-bottom: 20px; }
.ts-prof-badges{ min-height:220px; }
.ts-prof-sidebar{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

aside > .ts-card.ts-prof-sidebar {
  height: 100%; /* Karte im Aside ebenfalls volle Höhe */
}

/* Badge-Grid */
.ts-badge-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:14px; margin-top:10px; }
.ts-badge{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.ts-icon{ width:64px; height:64px; border-radius:14px; background:#12141b; border:1px solid rgba(255,255,255,.12); display:grid; place-items:center; overflow:hidden; position:relative; }
.ts-icon img{ width:70%; height:70%; object-fit:contain; }
.ts-label{ font-size:12px; color:var(--ts-muted); line-height:1.2; }
.ts-icon[data-title]{ cursor:help; }
.ts-icon[data-title]:hover::after{
  content:attr(data-title); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  background:#0c0f15; color:#fff; font-size:12px; padding:6px 8px; border-radius:8px; border:1px solid rgba(255,255,255,.15); white-space:nowrap; box-shadow:var(--ts-shadow); z-index:3;
}

/* ===========================
   PROFIL-RAHMEN (rechteckig, geschlossen)
=========================== */
.ts-profile-wrap::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; z-index:0;
  padding: var(--b, 8px);
  background: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: var(--glow, drop-shadow(0 0 16px rgba(0,209,255,.55)));
  opacity: var(--op, 1);
}
.ts-profile-wrap::after{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; z-index:0;
  box-shadow: inset 0 0 18px rgba(255,255,255,.06);
}

/* Varianten */
.ts-frame--spiky-test::before{
  --b: 15px;
  --grad: conic-gradient(from var(--a,0deg), #ff4bd8 0 10%, #ffc000 10% 20%, #46f0ff 20% 30%, #ffc000 30% 40%, #ff4bd8 40% 50%, #ffc000 50% 60%, #46f0ff 60% 70%, #ffc000 70% 80%, #ff4bd8 80% 90%, #ffc000 90% 100%);
    animation: spiky-spin 8s linear infinite, spiky-breathe 2s ease-in-out infinite;
  --glow: drop-shadow(0 0 22px rgba(255,75,216,.6)) drop-shadow(0 0 12px rgba(70,240,255,.5));
}
@keyframes spiky-breathe { 60% { transform: scale(1.015); } }

.ts-frame--spiky-pulse::before{
  --b: 12px;
  --grad: conic-gradient(from var(--a,0deg), #ff4bd8 0 10%, transparent 10% 20%, #46f0ff 20% 30%, transparent 30% 40%, #ff4bd8 40% 50%, transparent 50% 60%, #46f0ff 60% 70%, transparent 70% 80%, #ff4bd8 80% 90%, transparent 90% 100%);
  animation: spiky-spin 8s linear infinite, spiky-breathe 2s ease-in-out infinite;
  --glow: drop-shadow(0 0 22px rgba(255,75,216,.6)) drop-shadow(0 0 12px rgba(70,240,255,.5));
}
@keyframes spiky-breathe { 50% { transform: scale(1.015); } }

.ts-frame--electric-arc::before{
  --b: 9px;
  --grad: repeating-conic-gradient(from var(--t,0deg), rgba(0,255,245,.9) 0 6deg, rgba(0,255,245,.15) 6deg 12deg);
  animation: arc-rot 10s linear infinite, arc-flicker 140ms steps(2,end) infinite;
  --glow: drop-shadow(0 0 22px rgba(0,255,245,.8)) drop-shadow(0 0 10px rgba(0,180,200,.6));
}
@keyframes arc-rot { to { --t: 360deg; } }
@keyframes arc-flicker { 50% { opacity:.85; } }

/* Container braucht Positioning */
.ts-frame--crystal { position: relative; }

/* KRISTALL-RING (Facetten + Brechung + Glow) */
.ts-frame--crystal::before{
  --b: 10px;
  /* Basisverlauf */
  --grad: linear-gradient(135deg, #7fe8ff, #0aa2ff);

  /* Facetten und Schimmer-Layer */
  --facet1: linear-gradient(25deg, rgba(255,255,255,.35) 0 6%, transparent 7% 100%);
  --facet2: linear-gradient(205deg, rgba(255,255,255,.22) 0 5%, transparent 6% 100%);
  --facet3: repeating-linear-gradient(135deg,
               rgba(255,255,255,.08) 0 2px, transparent 2px 6px);
  /* feine Körnung */
  --grain: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.12) 0 1px, transparent 1.2px) ,
           radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.10) 0 1px, transparent 1.2px);

  --glow: drop-shadow(0 0 18px rgba(127,232,255,.55))
          drop-shadow(0 0 34px rgba(10,162,255,.25));

  content:""; position:absolute; inset:0; pointer-events:none;
  filter: var(--glow);

  background-image:
    var(--facet1),
    var(--facet2),
    var(--facet3),
    var(--grain),
    var(--grad);
  background-blend-mode: screen, screen, screen, screen, normal;

  /* leichte Bewegung für „Refraction" */
  background-size:
    140% 140%,
    140% 140%,
    200% 200%,
    100% 100%,
    cover;
  background-position: 50% 50%, 50% 50%, 50% 50%, 0 0, 50% 50%;

  animation:
    crystal-shift 8s ease-in-out infinite,
    crystal-sheen 3.8s linear infinite,
    crystal-hue 22s linear infinite;

  /* Ringmaske – zeigt nur Rand (Breite --b) */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* SPARKLES / Lichtreflexe als separates Layer */
.ts-frame--crystal::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(180,235,255,.7));

  /* kleine Glitzerpunkte & strichförmige Flare */
  background-image:
    radial-gradient(circle, rgba(255,255,255,.85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(200,245,255,.75) 0 60%, transparent 61%),
    linear-gradient(90deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%);
  background-size: 4px 4px, 3px 3px, 180% 100%;
  background-repeat: no-repeat;
  background-position: 18% 22%, 82% 76%, -60% 0%;

  animation:
    spark-twinkle 1.6s ease-in-out infinite,
    sheen-sweep 5.5s linear infinite;

  /* gleiche Ringmaske */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* === Animationen === */
@keyframes crystal-shift{
  0%,100% { background-position: 50% 50%, 50% 50%, 50% 50%, 0 0, 50% 50%; }
  50%     { background-position: 48% 46%, 52% 54%, 55% 45%, 0 0, 50% 50%; }
}
@keyframes crystal-sheen{
  0%   { background-size: 140% 140%, 140% 140%, 200% 200%, 100% 100%, cover; }
  50%  { background-size: 150% 150%, 135% 135%, 210% 210%, 100% 100%, cover; }
  100% { background-size: 140% 140%, 140% 140%, 200% 200%, 100% 100%, cover; }
}
@keyframes crystal-hue{
  0%   { filter: hue-rotate(0deg) saturate(1.05) drop-shadow(0 0 18px rgba(127,232,255,.55)) drop-shadow(0 0 34px rgba(10,162,255,.25)); }
  50%  { filter: hue-rotate(12deg) saturate(1.25) drop-shadow(0 0 18px rgba(127,232,255,.55)) drop-shadow(0 0 34px rgba(10,162,255,.25)); }
  100% { filter: hue-rotate(0deg) saturate(1.05) drop-shadow(0 0 18px rgba(127,232,255,.55)) drop-shadow(0 0 34px rgba(10,162,255,.25)); }
}
@keyframes spark-twinkle{
  0%,100% { opacity: 1; transform: translateY(0) scale(1); }
  50%     { opacity: .85; transform: translateY(-1px) scale(1.05); }
}
@keyframes sheen-sweep{
  0%   { background-position: 18% 22%, 82% 76%, -60% 0%; }
  100% { background-position: 22% 18%, 78% 80%, 160% 0%; }
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .ts-frame--crystal::before{ animation: none; }
  .ts-frame--crystal::after { animation: none; }
}

/* Basis: der flammende Rahmen */
.ts-frame--flame{ position: relative; }

.ts-frame--flame::before{
  --b: 12px; /* Rahmenbreite */
  --grad: conic-gradient(from var(--f,0deg), #ff6a00, #ffc000, #ff6a00);
  --glow: drop-shadow(0 0 22px rgba(255,120,0,.65)) drop-shadow(0 0 12px rgba(255,190,0,.5));
  content:"";
  position:absolute; inset:0;
  filter: none; /* Filter kommen über Animationen */
  background: var(--grad);
  animation: flame-rot 3.6s linear infinite, flame-hue 5s ease-in-out infinite, flame-flicker .18s infinite alternate;
  pointer-events:none;

  /* Ringmaske: zeigt nur den Rand mit Breite --b */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Partikel/Funken als eigenes Layer */
.ts-frame--flame::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(255,160,0,.6));

  /* mehrere kleine Punkte, JEDE mit fester Größe + no-repeat */
  background-image:
    radial-gradient(circle, rgba(255, 80, 80, 0.75) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 221, 0, 0.65)  0 60%, transparent 61%),
    radial-gradient(circle, rgba(255,240,180,.7) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255,120,0,.6)  0 60%, transparent 61%);
  background-size:
    6px 6px,
    4px 4px,
    5px 5px,
    3px 3px;
  background-repeat: no-repeat;
  background-position:
    22% 96%,
    78% 102%,
    35% 108%,
    66% 98%;

  /* Animationen NUR für ::after */
  animation:
    sparks-up-1 2.6s linear infinite,
    sparks-up-2 3.2s linear infinite,
    sparks-twinkle 1.3s ease-in-out infinite;
  
  /* gleiche Ringmaske, damit Funken nur im Rand laufen */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* === Keyframes === */
@keyframes flame-rot { to { --f: 360deg; } }
@keyframes flame-hue {
  0%   { filter: hue-rotate(-5deg) saturate(1.1); }
  50%  { filter: hue-rotate(10deg)  saturate(1.4); }
  100% { filter: hue-rotate(-5deg) saturate(1.1); }
}
@keyframes flame-flicker {
  0%   { opacity:.92; transform:scale(1); }
  100% { opacity:1;   transform:scale(1.02); }
}

/* vertikales Aufsteigen + leichter Drift */
@keyframes sparks-up-1 {
  0%   { background-position: 22% 96%, 78% 102%, 35% 108%, 66% 98%; }
  50%  { background-position: 24% 55%, 76%  73%, 37%  66%, 64% 62%; }
  100% { background-position: 26% -6%, 74%  18%, 39%  -8%, 62%  5%; }
}
@keyframes sparks-up-2 {
  0%   { background-position: 20% 102%, 82% 110%, 31% 106%, 70% 104%; }
  50%  { background-position: 18% 60%,  84%  78%, 29%  70%, 72%  64%; }
  100% { background-position: 16% -8%,  86%  22%, 27%  -6%, 74%   8%; }
}

/* leichtes Glitzern */
@keyframes sparks-twinkle {
  0%,100% { opacity: 1;   }
  50%     { opacity: .92; }
}

/* Bewegungen reduzieren */
@media (prefers-reduced-motion: reduce){
  .ts-frame--flame::before{ animation: flame-rot 8s linear infinite; }
  .ts-frame--flame::after { animation: none; }
}

/* NEBULA – tiefer Space-Glow + Sternen-Drift */
.ts-frame--nebula { position: relative; }

/* Ring-Basis */
.ts-frame--nebula::before{
  --b: 10px;
  --grad: conic-gradient(from var(--n,0deg),
           #2d0a4b, #0a6cff, #00ffd0, #6b1fb5, #2d0a4b);
  --glow: drop-shadow(0 0 22px rgba(0,190,255,.40))
          drop-shadow(0 0 34px rgba(120,0,255,.28));

  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(140% 80% at 20% 40%, rgba(0,255,230,.18), transparent 60%),
    radial-gradient(100% 70% at 80% 60%, rgba(160,60,255,.16), transparent 65%),
    var(--grad);
  background-blend-mode: screen, screen, normal;

  filter: var(--glow);
  animation: nebula-rot 18s linear infinite, nebula-breathe 6s ease-in-out infinite;

  /* Ring-Maske */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Sterne/Partikel – gleiche Struktur wie bei deinem Flame-Sparks */
.ts-frame--nebula::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(160,220,255,.55));

  /* 6 Sterne-Layer, alle feste Größe + no-repeat */
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(200,240,255,.85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(160,220,255,.80) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255,255,255,.95) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(190,235,255,.85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(140,210,255,.80) 0 60%, transparent 61%);
  background-size:
    3px 3px, 2px 2px, 2px 2px, 4px 4px, 3px 3px, 2px 2px;
  background-repeat: no-repeat;
  background-position:
    15% 108%, 42% 112%, 70% 106%, 85% 114%, 32% 110%, 58% 116%;

  animation:
    stars-drift-1 6.5s linear infinite,
    stars-drift-2 8.5s linear infinite,
    stars-twinkle 1.8s ease-in-out infinite;

  /* Ring-Maske */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* === Keyframes === */
@keyframes nebula-rot    { to { --n: 360deg; } }
@keyframes nebula-breathe{
  0%,100% { transform: scale(1);    filter: brightness(1) saturate(1) var(--glow); }
  50%     { transform: scale(1.012); filter: brightness(1.06) saturate(1.08) var(--glow); }
}

/* Diagonaler Drift: unten rechts -> oben links (2 Parallax-Layer) */
@keyframes stars-drift-1{
  0%   { background-position: 15% 108%, 42% 112%, 70% 106%, 85% 114%, 32% 110%, 58% 116%; }
  50%  { background-position: 10% 72%,  36% 80%,  62% 68%,  78% 76%,  26% 74%,  52% 78%; }
  100% { background-position: 5%  34%,  30% 44%,  54% 36%,  71% 42%,  20% 38%,  46% 40%; }
}
@keyframes stars-drift-2{
  0%   { background-position: 18% 116%, 46% 120%, 74% 112%, 88% 118%, 36% 114%, 62% 122%; }
  50%  { background-position: 22% 76%,  50% 84%,  78% 72%,  92% 80%,  40% 78%,  66% 82%; }
  100% { background-position: 26% 36%,  54% 44%,  82% 36%,  96% 42%,  44% 38%,  70% 40%; }
}

/* Twinkle */
@keyframes stars-twinkle{
  0%,100% { opacity: 1; }
  50%     { opacity: .88; }
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
  .ts-frame--nebula::before{ animation: nebula-rot 28s linear infinite; }
  .ts-frame--nebula::after { animation: none; }
}

/* ===========================
   CYBER GLITCH HOLO (Drop-in)
   funktioniert mit deiner Patch-Logik:
   - nutzt nur Variablen/Animationen auf ::before
   - eigener Effekt-Layer in ::after (mit Ring-Maske)
=========================== */
.ts-profile-wrap.ts-frame--glitch-holo::before{
  /* schmaler bündiger Rand */
  --b: 10px;

  /* knalliger Dual-Glow (über deine Patch-Filter-Variable) */
  --glow: drop-shadow(0 0 20px rgba(0,255,255,.45))
          drop-shadow(0 0 24px rgba(255,0,255,.35));

  /* WICHTIG: wir befüllen NUR --grad, dein Patch setzt background: var(--grad) !important */
  --grad:
    radial-gradient(40% 60% at 10% 10%, rgba(0,255,255,.18), transparent 60%),
    radial-gradient(40% 60% at 90% 90%, rgba(255,0,255,.18), transparent 60%),
    repeating-conic-gradient(from var(--gh,0deg),
      rgba(255,255,255,.10) 0 8deg, transparent 8deg 16deg),
    conic-gradient(from var(--gh,0deg),
      #ff006a, #ffb300, #00ff95, #00a3ff, #7b3bff, #ff006a);

  /* eigene Animationen nur auf diesem Frame */
  animation:
    gh_rot 14s linear infinite,
    gh_jitter 1.2s steps(12,end) infinite,
    gh_breathe 4.2s ease-in-out infinite,
    gh_hue 10s linear infinite;
}

/* Effekt-Layer im Rand (Glitch-Bars + Pixel-Sparks) */
.ts-profile-wrap.ts-frame--glitch-holo::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(0,255,255,.55))
          drop-shadow(0 0 10px rgba(255,0,255,.45));

  /* feste Größen + no-repeat => klare, sichtbare Balken */
  background-image:
    linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.95) 50% 56%, transparent 60%),
    linear-gradient(90deg, transparent 0 40%, rgba(0,255,255,.9) 48% 54%, transparent 60%),
    linear-gradient(90deg, transparent 0 42%, rgba(255,0,255,.9) 50% 58%, transparent 62%),
    linear-gradient(90deg, transparent 0 45%, rgba(255,255,255,.95) 50% 55%, transparent 60%),
    linear-gradient(90deg, transparent 0 40%, rgba(0,163,255,.9) 48% 54%, transparent 60%),
    linear-gradient(90deg, transparent 0 44%, rgba(255,120,0,.9) 50% 56%, transparent 60%),
    radial-gradient(circle, rgba(255,255,255,.95) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(180,240,255,.9) 0 60%, transparent 61%);
  background-size:
    220px 9px, 150px 7px, 180px 8px, 130px 7px, 170px 8px, 140px 7px,
    4px 4px,   3px 3px;
  background-repeat: no-repeat;
  /* Start teils außerhalb -> deutliche Bewegung */
  background-position:
    110% 18%, -30% 34%, 120% 52%, -20% 68%, 115% 82%, -25% 26%,
    85% 104%, 22% 112%;

  animation:
    gh_scan_a 2.4s steps(14,end) infinite,
    gh_scan_b 3.1s steps(18,end) infinite,
    gh_twinkle 1.3s ease-in-out infinite;

  /* Ring-Maske wie bei dir (bündig im Rand) */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* === Keyframes (präfix „gh_" um Konflikte zu vermeiden) === */
@keyframes gh_rot      { to { --gh: 360deg; } }
@keyframes gh_breathe  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} }
@keyframes gh_hue      { 0%{filter:hue-rotate(0deg) var(--glow)} 50%{filter:hue-rotate(35deg) var(--glow)} 100%{filter:hue-rotate(0deg) var(--glow)} }
@keyframes gh_jitter   {
  0% { transform: translate(0,0) }
  20%{ transform: translate(0.6px,-0.4px) }
  40%{ transform: translate(-0.5px,0.5px) }
  60%{ transform: translate(0.4px,0.6px) }
  80%{ transform: translate(-0.6px,-0.3px) }
  100%{ transform: translate(0,0) }
}
/* Bars „springen" stufig quer durch den Rand (2 Parallax-Layer) */
@keyframes gh_scan_a{
  0%  { background-position: 110% 18%, -30% 34%, 120% 52%, -20% 68%, 115% 82%, -25% 26%, 85% 104%, 22% 112%; }
  50% { background-position: 65%  22%, 15%  38%, 70%  56%, 20%  72%, 68%  86%, 18%  30%, 64%  78%, 38%  84%; }
  100%{ background-position: 10%  26%, 70%  42%, 20%  60%, 68%  76%, 12%  90%, 74%  34%, 22%  52%, 56%  56%; }
}
@keyframes gh_scan_b{
  0%  { background-position: 110% 18%, -30% 34%, 120% 52%, -20% 68%, 115% 82%, -25% 26%, 85% 104%, 22% 112%; }
  50% { background-position: 78%  26%,  2%  44%, 82%  62%,  8%  78%, 80%  88%,  4%  36%, 70%  66%, 30%  72%; }
  100%{ background-position: 46%  34%, 38%  50%, 48%  70%, 36%  84%, 52%  92%, 40%  46%, 42%  58%, 44%  64%; }
}
@keyframes gh_twinkle{ 0%,100%{opacity:1} 50%{opacity:.88} }

/* Motion-Reduce respektieren – fügt sich in deine Logik ein */
@media (prefers-reduced-motion: reduce){
  .ts-profile-wrap.ts-frame--glitch-holo::before{ animation: gh_rot 22s linear infinite; }
  .ts-profile-wrap.ts-frame--glitch-holo::after { animation: none; }
}

/* ===========================
   DATENSTROM – Neon-Code-Regen
   Drop-in: nur ans Ende deiner CSS packen
=========================== */

/* Ring-Basis: Neon/Tech mit feiner Rotationsstruktur */
.ts-profile-wrap.ts-frame--datastream::before{
  --b: 10px;
  --glow: drop-shadow(0 0 20px rgba(0,255,140,.40))
          drop-shadow(0 0 28px rgba(0,200,120,.28));

  /* Wir setzen NUR --grad, dein Patch rendert background: var(--grad) !important */
  --grad:
    /* sanfte Corner-Glows */
    radial-gradient(60% 80% at 12% 18%, rgba(0,255,160,.18), transparent 60%),
    radial-gradient(60% 80% at 88% 82%, rgba(0,220,140,.16), transparent 60%),
    /* feine rotierende Scan-Struktur */
    repeating-conic-gradient(from var(--ds,0deg),
      rgba(255,255,255,.08) 0 4deg, transparent 4deg 8deg),
    /* Basis-Neonverlauf */
    linear-gradient(135deg, #00ff88, #00b46e 45%, #00ffd0 80%, #00ff88 100%);

  animation:
    ds_rot 16s linear infinite,
    ds_breathe 5s ease-in-out infinite;
}

/* Code-Regen im Rand – einzelne „Säulen" mit fester Größe + no-repeat */
.ts-profile-wrap.ts-frame--datastream::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 10px rgba(120,255,200,.55));

  /* 8 Regen-Säulen (deutlich sichtbar) */
  background-image:
    linear-gradient(180deg, transparent 0 30%, rgba(0,255,170,.55) 45%, #fff 50%, rgba(0,255,170,.6) 55%, transparent 75%),
    linear-gradient(180deg, transparent 0 34%, rgba(0,240,150,.5)  48%, #eafff6 52%, rgba(0,240,150,.55) 56%, transparent 78%),
    linear-gradient(180deg, transparent 0 32%, rgba(0,255,200,.55) 46%, #ffffff 50%, rgba(0,255,200,.55) 54%, transparent 76%),
    linear-gradient(180deg, transparent 0 36%, rgba(0,255,150,.6)  50%, #f6fffb 54%, rgba(0,255,150,.6) 58%, transparent 80%),
    linear-gradient(180deg, transparent 0 33%, rgba(140,255,210,.5) 47%, #ffffff 51%, rgba(140,255,210,.5) 55%, transparent 77%),
    linear-gradient(180deg, transparent 0 35%, rgba(0,255,190,.55) 49%, #ffffff 53%, rgba(0,255,190,.55) 57%, transparent 79%),
    linear-gradient(180deg, transparent 0 30%, rgba(0,255,170,.55) 45%, #ffffff 50%, rgba(0,255,170,.6) 55%, transparent 75%),
    linear-gradient(180deg, transparent 0 34%, rgba(0,240,150,.5)  48%, #eafff6 52%, rgba(0,240,150,.55) 56%, transparent 78%);
  background-size:
    8px 170%,
    6px 165%,
    10px 180%,
    7px 160%,
    9px 175%,
    5px 160%,
    8px 180%,
    6px 165%;
  background-repeat: no-repeat;

  /* Startpositionen (oberhalb, leicht versetzt) */
  background-position:
    8%  -120%,
    22% -110%,
    36% -130%,
    50% -115%,
    64% -125%,
    78% -118%,
    88% -132%,
    94% -127%;

  animation: ds_rain 3.2s linear infinite;

  /* Ring-Maske (bündig im Rand) */
  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* === Keyframes (präfix „ds_" um Konflikte zu vermeiden) === */
@keyframes ds_rot     { to { --ds: 360deg; } }
@keyframes ds_breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.012)} }

/* Regen: nach unten + leichter seitlicher Drift (Parallax) */
@keyframes ds_rain{
  0%{
    background-position:
      8%  -120%,
      22% -110%,
      36% -130%,
      50% -115%,
      64% -125%,
      78% -118%,
      88% -132%,
      94% -127%;
  }
  50%{
    background-position:
      7%  -10%,
      23% -5%,
      35% -15%,
      51% -8%,
      63% -12%,
      79% -6%,
      87% -16%,
      95% -11%;
  }
  100%{
    background-position:
      6%  120%,
      24% 110%,
      34% 130%,
      52% 115%,
      62% 125%,
      80% 118%,
      86% 132%,
      96% 127%;
  }
}

/* Motion-Reduce (fügt sich in deine Logik ein) */
@media (prefers-reduced-motion: reduce){
  .ts-profile-wrap.ts-frame--datastream::before{ animation: ds_rot 22s linear infinite; }
  .ts-profile-wrap.ts-frame--datastream::after { animation: none; }
}

/* SIMPLE BLUE – statisch, ohne Effekte */
.ts-profile-wrap.ts-frame--blue::before{
  --b: 10px;                              /* Rahmenstärke */
  --grad: linear-gradient(#0400ff, #0400ff); /* Vollfläche Blau */
  --glow: none;                           /* kein Leuchten */
  /* keine animation */
}

/* SIMPLE Red – statisch, ohne Effekte */
.ts-profile-wrap.ts-frame--red::before{
  --b: 10px;                              /* Rahmenstärke */
  --grad: linear-gradient(#ff0000, #ff0000); /* Vollfläche Blau */
  --glow: none;                           /* kein Leuchten */
  /* keine animation */
}

/* SIMPLE yellow – statisch, ohne Effekte */
.ts-profile-wrap.ts-frame--yellow::before{
  --b: 10px;                              /* Rahmenstärke */
  --grad: linear-gradient(#fffb00, #fffb00); /* Vollfläche Blau */
  --glow: none;                           /* kein Leuchten */
  /* keine animation */
}

/* SIMPLE yellow – statisch, ohne Effekte */
.ts-profile-wrap.ts-frame--green2::before{
  --b: 10px;                              /* Rahmenstärke */
  --grad: linear-gradient(#00ff2a, #00ff2a); /* Vollfläche Blau */
  --glow: none;                           /* kein Leuchten */
  /* keine animation */
}

/* Fallback alte Browser */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .ts-profile-wrap::before{
    padding: 0; border: var(--b,8px) solid transparent; background: none;
    border-image: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff)) 1;
    filter: none; box-shadow: 0 0 18px rgba(0,209,255,.45);
  }
}

/* ===========================
   AVATAR + RINGE (geschlossen)
=========================== */
/* Container + Bild (92% wie bei dir) */
.ts-avatar{
  position: relative;
  display: inline-block;
  width: 110px; height: 110px; /* quadratisch */
  border-radius: 50%;
  overflow: visible;
  isolation: isolate;
}
.ts-avatar img{
  width: 92%; height: 92%;
  object-fit: cover; border-radius: 50%;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  position: relative; z-index: 1;
}

/* Donut-Kern */
.ts-avatarframe{ --ring: 10px; --glow: drop-shadow(0 0 16px rgba(0,0,0,.25)); }
.ts-avatarframe::before,
.ts-avatarframe::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:0; }
.ts-avatarframe::before{
  padding: var(--ring);
  background: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff));
  -webkit-mask:
    radial-gradient(#000 0 0) content-box,
    radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: var(--glow);
}
/* Fallback */
@supports not ((mask-composite: exclude) or (-webkit-mask-composite: xor)){
  .ts-avatarframe::before{
    padding: 0;
    background: none !important;
    border: var(--ring,10px) solid transparent;
    border-image: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff)) 1;
    box-shadow: 0 0 14px rgba(0,0,0,.25);
  }
}

/* Varianten (nutzen den Donut-Kern) */
.ts-avatarframe--spiked-ring{
  --ring: 12px;
  --glow: drop-shadow(0 0 16px rgba(255,213,74,.75)) drop-shadow(0 0 8px rgba(255,138,0,.6));
}
.ts-avatarframe--spiked-ring::before{
  --ang: 0deg;
  background: conic-gradient(
    from var(--ang),
    #ffd54a 0 10deg, transparent 10deg 20deg,
    #ff8a00 20deg 30deg, transparent 30deg 40deg
  );
  animation: ring-spin 8s linear infinite;
}

.ts-avatarframe--neon-dual{
  --ring: 10px;
  --glow: drop-shadow(0 0 16px rgba(0,225,255,.85)) drop-shadow(0 0 8px rgba(30,60,255,.6));
}
.ts-avatarframe--neon-dual::before{
  --a1:0deg;
  background: conic-gradient(
    from var(--a1),
    #00e1ff 0 20%, transparent 20% 40%,
    #1e3cff 40% 60%, transparent 60% 80%
  );
  animation: neon-a 6s linear infinite;
}
.ts-avatarframe--neon-dual::after{
  --a2:0deg;
  padding: calc(var(--ring) + 6px);
  background: conic-gradient(
    from var(--a2),
    transparent 0 30%, #ff4bd8 30% 50%,
    transparent 50% 70%, #46f0ff 70% 90%
  );
  -webkit-mask:
    radial-gradient(#000 0 0) content-box,
    radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: neon-b 6s linear infinite reverse;
}

.ts-avatarframe--crystal-shards{
  --ring: 11px;
  --glow: drop-shadow(0 0 16px rgba(127,232,255,.85));
}
.ts-avatarframe--crystal-shards::before{
  --cc:0deg;
  background: conic-gradient(
    from var(--cc),
    #7fe8ff 0 6deg, transparent 6deg 12deg,
    #0aa2ff 12deg 18deg, transparent 18deg 24deg
  );
  animation: shards 9s linear infinite;
}

.ts-avatarframe--electric-orbit{
  --ring: 12px;
  --glow: drop-shadow(0 0 18px rgba(0,255,245,.9));
}
.ts-avatarframe--electric-orbit::before{
  --e:0deg;
  background: conic-gradient(
    from var(--e),
    transparent 0 82%, #00fff5 82% 95%, transparent 95% 100%
  );
  animation: orbit 2.6s linear infinite;
}

.ts-avatarframe--flame-corona{
  --ring: 14px;
  --glow: drop-shadow(0 0 20px rgba(255,120,0,.75)) drop-shadow(0 0 10px rgba(255,190,0,.6));
}
.ts-avatarframe--flame-corona::before{
  --f:0deg;
  background: conic-gradient(from var(--f), #ff6a00, #ffc000, #ff6a00);
  filter: blur(.8px) var(--glow);
  animation: flame 3s linear infinite;
}

/* Hohler, statischer Blauring (innen frei) */
.ts-avatar.ts-avatarframe.ts-avatarframe--blue1::before{
  --ring: 12px;                                /* Ringstärke */
  --glow: none;
  padding: var(--ring);
  background: conic-gradient(#3600f9, #3600f9) !important;
  animation: none !important;
  filter: none !important;

  /* Donut-Maske: färbt nur den Rand, innen bleibt frei */
  -webkit-mask: radial-gradient(#000 0 0) content-box,
                radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Hohler, statischer Blauring (innen frei) */
.ts-avatar.ts-avatarframe.ts-avatarframe--red1::before{
  --ring: 12px;                                /* Ringstärke */
  --glow: none;
  padding: var(--ring);
  background: conic-gradient(#ff0000, #ff0000) !important;
  animation: none !important;
  filter: none !important;

  /* Donut-Maske: färbt nur den Rand, innen bleibt frei */
  -webkit-mask: radial-gradient(#000 0 0) content-box,
                radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Hohler, statischer Blauring (innen frei) */
.ts-avatar.ts-avatarframe.ts-avatarframe--yellow1::before{
  --ring: 12px;                                /* Ringstärke */
  --glow: none;
  padding: var(--ring);
  background: conic-gradient(#ffdd00, #ffdd00) !important;
  animation: none !important;
  filter: none !important;

  /* Donut-Maske: färbt nur den Rand, innen bleibt frei */
  -webkit-mask: radial-gradient(#000 0 0) content-box,
                radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* Hohler, statischer Blauring (innen frei) */
.ts-avatar.ts-avatarframe.ts-avatarframe--green1::before{
  --ring: 12px;                                /* Ringstärke */
  --glow: none;
  padding: var(--ring);
  background: conic-gradient(#04ff00, #04ff00) !important;
  animation: none !important;
  filter: none !important;

  /* Donut-Maske: färbt nur den Rand, innen bleibt frei */
  -webkit-mask: radial-gradient(#000 0 0) content-box,
                radial-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}



/* Animations der Ringe */
@keyframes ring-spin { to { --ang:360deg; } }
@keyframes neon-a { to { --a1:360deg; } }
@keyframes neon-b { to { --a2:360deg; } }
@keyframes shards  { to { --cc:360deg; } }
@keyframes orbit   { to { --e:360deg; } }
@keyframes flame   { to { --f:360deg; } }

/* Bewegungs-Reduktion respektieren */
@media (prefers-reduced-motion: reduce){
  .ts-profile-wrap::before,
  .ts-avatarframe::before, .ts-avatarframe::after { animation: none !important; }
}

/* ====== PATCH 1: Profil-Rahmen sicher anwenden (Spezifität) ====== */
.ts-profile-wrap { position: relative !important; overflow: visible !important; isolation: isolate !important; }
.ts-profile-wrap::before{
  content:""; position:absolute; inset:0; border-radius: inherit; pointer-events:none; z-index:0;
  padding: var(--b, 8px);
  background: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  filter: var(--glow, drop-shadow(0 0 16px rgba(0,209,255,.55))) !important;
}

/* Varianten (Beispiele – diese Klassen musst du in den Slugs benutzen) */
.ts-profile-wrap.ts-frame--spiky::before{
  --b: 12px;
  --grad: conic-gradient(from var(--a,0deg) at 50% 50%, #00ff62 0 10deg, transparent 10deg 20deg, #1e3cff 20deg 30deg, transparent 30deg 40deg) !important;
  animation: ts_spiky 10s linear infinite;
  --glow: drop-shadow(0 0 22px rgba(0,255,98,.65)) drop-shadow(0 0 12px rgba(30,60,255,.5));
}
.ts-profile-wrap.ts-frame--crystal::before{
  --b: 12px;
  --grad: linear-gradient(135deg, #7fe8ff, #0aa2ff) !important;
  --glow: drop-shadow(0 0 22px rgba(127,232,255,.65));
}
@keyframes ts_spiky { to { --a: 360deg; } }

/* ====== PATCH 2: Avatar-Ringe sicher schließen (Donut-Kern erzwingen) ====== */
.ts-avatar{ position: relative !important; border-radius:50% !important; overflow: visible !important; isolation:isolate !important; }
.ts-avatar img{ width:92% !important; height:92% !important; border-radius:50% !important; object-fit:cover !important; position:relative; z-index:1; }

.ts-avatar.ts-avatarframe::before,
.ts-avatar.ts-avatarframe::after{ content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:0; }

.ts-avatar.ts-avatarframe::before{
  padding: var(--ring, 12px);
  background: var(--grad, linear-gradient(135deg,#1e3cff,#00e1ff)) !important;
  -webkit-mask: radial-gradient(#000 0 0) content-box, radial-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  filter: var(--glow, drop-shadow(0 0 16px rgba(0,0,0,.25))) !important;
}

/* Avatar-Varianten – NUR Gradienten/Animationen setzen */
.ts-avatar.ts-avatarframe.ts-avatarframe--spiked-ring::before{
  --ring: 14px;
  --grad: conic-gradient(from var(--ang,0deg), #ffd54a 0 25%, transparent 25% 50%, #ff8a00 50% 75%, transparent 75% 100%) !important;
  --glow: drop-shadow(0 0 18px rgba(255,213,74,.8)) drop-shadow(0 0 10px rgba(255,138,0,.6));
  animation: ts_ring 8s linear infinite;
}
.ts-avatar.ts-avatarframe.ts-avatarframe--neon-dual::before{
  --ring: 12px;
  --grad: conic-gradient(from var(--a1,0deg), #00e1ff 0 20%, transparent 20% 40%, #1e3cff 40% 60%, transparent 60% 80%) !important;
  --glow: drop-shadow(0 0 18px rgba(0,225,255,.9)) drop-shadow(0 0 10px rgba(30,60,255,.6));
  animation: ts_neon_a 6s linear infinite;
}
.ts-avatar.ts-avatarframe.ts-avatarframe--neon-dual::after{
  padding: calc(var(--ring,12px) + 6px);
  background: conic-gradient(from var(--a2,0deg), transparent 0 30%, #ff4bd8 30% 50%, transparent 50% 70%, #46f0ff 70% 90%) !important;
  -webkit-mask: radial-gradient(#000 0 0) content-box, radial-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
          mask-composite: exclude !important;
  filter: drop-shadow(0 0 18px rgba(255,75,216,.9));
  animation: ts_neon_b 6s linear infinite reverse;
}
.ts-avatar.ts-avatarframe.ts-avatarframe--crystal-shards::before{
  --ring: 13px;
  --grad: conic-gradient(from var(--cc,0deg), #7fe8ff 0 30%, #00ff62 30% 50%, #0aa2ff 50% 70%, #00ff62 70% 90%) !important;
  --glow: drop-shadow(0 0 18px rgba(127,232,255,.9));
  animation: ts_shards 9s linear infinite;
}
.ts-avatar.ts-avatarframe.ts-avatarframe--electric-orbit::before{
  --ring: 14px;
  --grad: conic-gradient(from var(--e,0deg), #ffd54a 0 30%, #ff3700 30% 50%, #ffd54a 50% 70%, #ff3700 70% 100%) !important;
  --glow: drop-shadow(0 0 20px rgba(0,255,245,.9));
  animation: ts_orbit 2.6s linear infinite;
}
.ts-avatar.ts-avatarframe.ts-avatarframe--flame-corona::before{
  --ring: 16px;
  --grad: conic-gradient(from var(--f,0deg), #ff6a00, #ffc000, #ff6a00) !important;
  --glow: drop-shadow(0 0 22px rgba(255,120,0,.8)) drop-shadow(0 0 12px rgba(255,190,0,.6));
  filter: blur(.6px);
  animation: ts_flame 3s linear infinite;
}

/* Keyframes */
@keyframes ts_ring  { to { --ang:360deg; } }
@keyframes ts_neon_a{ to { --a1:360deg; } }
@keyframes ts_neon_b{ to { --a2:360deg; } }
@keyframes ts_shards{ to { --cc:360deg; } }
@keyframes ts_orbit { to { --e:360deg; } }
@keyframes ts_flame { to { --f:360deg; } }

/* Aliasse, damit bestehende Slugs funktionieren */
.ts-profile-wrap.ts-frame--neon-blue::before { 
  /* mappe auf 'crystal' Look */
  --b: 12px;
  --grad: linear-gradient(135deg, #7fe8ff, #0aa2ff) !important;
  --glow: drop-shadow(0 0 22px rgba(127,232,255,.65));
}

.ts-avatar.ts-avatarframe.ts-avatarframe--ring-gold::before {
  /* mappe auf 'spiked-ring' / goldiger Look */
  --ring: 14px;
  --grad: conic-gradient(from var(--ang,0deg),
     #ffd54a 0 10deg, transparent 10deg 20deg,
     #ffb300 20deg 30deg, transparent 30deg 40deg) !important;
  --glow: drop-shadow(0 0 18px rgba(255,213,74,.8))
          drop-shadow(0 0 10px rgba(255,179,0,.6));
  animation: ts_ring 8s linear infinite;
}

/* ===== Avatar: Bild-Rahmen-Modus =====
   Aktiviert man mit der Klasse .ts-avatarframe--img.
   Er schaltet den Donut-Gradienten ab und legt ein PNG/WebP als Overlay drüber.
*/
.ts-avatar.ts-avatarframe.ts-avatarframe--img::before {
  content: none !important; /* Donut deaktivieren */
}
.ts-avatar.ts-avatarframe.ts-avatarframe--img::after {
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 2;
  background: var(--avatar-frame-url) center/cover no-repeat;
  /* dezenter Glow optional */
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}

/* Beispiel-Slugs: setze nur die Variable, Rest kommt automatisch */
.ts-avatarframe--ice-rune     { --avatar-frame-url: image-set(url('/media/frames/ice_rune.webp') type('image/webp') 1x, url('/media/frames/ice_rune.png') type('image/png') 1x); }
.ts-avatarframe--nordic-gold  { --avatar-frame-url: image-set(url('/media/frames/nordic_gold.webp') type('image/webp') 1x, url('/media/frames/nordic_gold.png') type('image/png') 1x); }
.ts-avatarframe--neon-glow    { --avatar-frame-url: image-set(url('/media/frames/neon_glow.webp') type('image/webp') 1x, url('/media/frames/neon_glow.png') type('image/png') 1x); }
.ts-avatarframe--flamme    { --avatar-frame-url: image-set(url('/media/frames/flamme.webp') type('image/webp') 1x, url('/media/frames/flamme.png') type('image/png') 1x); }
.ts-avatarframe--zacke    { --avatar-frame-url: image-set(url('/media/frames/zacke.webp') type('image/webp') 1x, url('/media/frames/zacke.png') type('image/png') 1x); }
.ts-avatarframe--orbit    { --avatar-frame-url: image-set(url('/media/frames/orbit.webp') type('image/webp') 1x, url('/media/frames/orbit.png') type('image/png') 1x); }

/* === Avatar: Bild-Rahmen-Modus (robust) === */
.ts-avatar.ts-avatarframe.ts-avatarframe--img::before { 
  content: none !important; /* Donut aus */ 
}

.ts-avatar.ts-avatarframe.ts-avatarframe--img::after{
  content: "";
  position: absolute; inset: 0; border-radius: 50%;
  pointer-events: none; z-index: 3;              /* über dem <img> (hat z-index:1) */
  background-image: var(--avatar-frame-url);     /* KEIN Shorthand */
  background-size: contain;                      /* Ring vollständig sichtbar */
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}

/* === Zentrierung + Feintuning via Variablen === */
.ts-avatar{
  --img-size: 92%;            /* Größe des Avatarbildes relativ zum Kreis */
  --img-scale: 1;             /* selten nötig */
  --frame-scale: 1;           /* 1.00–1.06 je nach PNG */
  --frame-shift-x: 0px;       /* ±1–3px bei Bedarf */
  --frame-shift-y: 0px;
}

/* Avatarbild wirklich zentrieren */
.ts-avatar > img{
  position: absolute;
  top: 50%; left: 50%;
  width: var(--img-size); height: var(--img-size);
  transform: translate(-50%,-50%) scale(var(--img-scale));
  object-fit: cover; border-radius: 50%;
  z-index: 1;
}

/* Bild-Frame (deine ts-avatarframe--img Version, nur ergänzt) */
.ts-avatar.ts-avatarframe.ts-avatarframe--img::before{ content:none !important; }
.ts-avatar.ts-avatarframe.ts-avatarframe--img::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  z-index:3; pointer-events:none;
  background-image: var(--avatar-frame-url);
  background-size: contain; /* Ring vollständig zeigen */
  background-position: center; background-repeat: no-repeat;
  transform:
    translate(var(--frame-shift-x), var(--frame-shift-y))
    scale(var(--frame-scale));
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}

/* Ice Rune braucht meist etwas mehr Platz innen */
.ts-avatarframe--ice-rune{
  --img-size: 90%;      /* Avatar minimal kleiner */
  --frame-scale: 1.70;  /* Ring minimal größer */
  --frame-shift-y: 1px; /* falls optisch nach oben verrutscht wirkt */
}

/* Wenn nötig für weitere Frames: */
.ts-avatarframe--nordic-gold{ --img-size: 90%; --frame-scale: 1.70; }
.ts-avatarframe--neon-glow  { --img-size: 92%; --frame-scale: 1.90; }
.ts-avatarframe--flamme  { --img-size: 92%; --frame-scale: 2.90; --frame-shift-y: -25px;}
.ts-avatarframe--zacke  { --img-size: 92%; --frame-scale: 1.90; }
.ts-avatarframe--orbit  { --img-size: 92%; --frame-scale: 2.90; }


.ts-avatar.ts-avatarframe.ts-avatarframe--img::before { content:none !important; }
.ts-avatar.ts-avatarframe.ts-avatarframe--img::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  pointer-events:none; z-index:3;
  background-image: var(--avatar-frame-url);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
}
.ts-avatar { position:relative; display:inline-block; width:110px; height:110px; border-radius:50%; }
.ts-avatar > img{
  position:absolute; top:50%; left:50%; width:92%; height:92%;
  transform:translate(-50%,-50%); object-fit:cover; border-radius:50%; z-index:1;
}

/* === Shop Layout === */
.shop-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

.shop-card{
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: all var(--transition-normal);
}

.shop-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-glow), var(--shadow-card);
  transform: translateY(-4px);
}

/* Kopfzeile / Titel */
.shop-card .title{
  font-weight: 700;
  font-family: var(--font-heading);
  color: var(--color-text);
}
.shop-card .desc{
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

/* === Preview-Bereich: alles zentriert, feste Bühne === */
.shop-card .preview{
  display:flex;
  justify-content:center;
  align-items:center;
  height: 150px;              /* Bühne */
  overflow: hidden;           /* nichts ragt aus der Karte */
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-md);
}

/* Avatar-Größe in Shop-Previews (unabhängig vom Profil) */
.shop-card .ts-avatar{
  --img-size: 90%;
  --img-scale: 1;
  --frame-scale: 0.95;        /* etwas kleiner, damit nichts anschlägt */
  --frame-shift-x: 0px;
  --frame-shift-y: 0px;

  width: 120px;
  height: 120px;
}

/* Bild im Avatar zentrieren (falls nicht bereits global definiert) */
.shop-card .ts-avatar > img{
  position:absolute;
  top:50%; left:50%;
  width: var(--img-size); height: var(--img-size);
  transform: translate(-50%,-50%) scale(var(--img-scale));
  object-fit: cover; border-radius:50%;
  z-index:1;
}

/* Bild-Rahmen (PNG/WebP): skalierbar im Shop-Kontext */
.shop-card .ts-avatar.ts-avatarframe.ts-avatarframe--img::after{
  background-image: var(--avatar-frame-url);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform:
    translate(var(--frame-shift-x), var(--frame-shift-y))
    scale(var(--frame-scale));
  z-index:3;
}

/* CSS-Ringe (deine conic/gradient Varianten) optional minimal kleiner */
.shop-card .ts-avatar.ts-avatarframe::before,
.shop-card .ts-avatar.ts-avatarframe::after{
  transform: scale(var(--frame-scale));
}

/* Footer / Buttons einheitlich */
.shop-card .meta{
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}
.shop-card .actions{
  margin-top:auto;            /* schiebt Button nach unten */
  display:flex; gap:8px;
}
.shop-card .actions .btn,
.shop-card button{
  width:100%;
  border: 1px solid var(--color-primary);
  background:transparent;
  color: var(--color-primary);
  padding:12px 14px;
  border-radius: var(--radius-sm);
  font-weight:600;
  cursor:pointer;
  transition: all var(--transition-fast);
}
.shop-card button:hover {
  background: var(--color-primary);
  color: var(--color-bg);
  box-shadow: 0 0 20px var(--color-primary-glow);
}
.shop-card button[disabled]{
  opacity:.5; cursor:default;
}
.shop-card button[disabled]:hover {
  background: transparent;
  color: var(--color-primary);
  box-shadow: none;
}

.shop-card .ts-avatarframe--nordic-gold{ --img-size: 90%; --frame-scale: 1.50; }
.shop-card .ts-avatarframe--neon-glow  { --img-size: 92%; --frame-scale: 1.90; }
.shop-card .ts-avatarframe--flamme  { --img-size: 92%; --frame-scale: 2.90; --frame-shift-y: -25px;}
.shop-card .ts-avatarframe--zacke  { --img-size: 92%; --frame-scale: 1.90; }
.shop-card .ts-avatarframe--orbit  { --img-size: 92%; --frame-scale: 1.90; }
.shop-card .ts-avatarframe--ice-rune{
  --img-size: 90%;      /* Avatar minimal kleiner */
  --frame-scale: 1.70;  /* Ring minimal größer */
  --frame-shift-y: 1px; /* falls optisch nach oben verrutscht wirkt */
}

.shop-grid--avatars .shop-card.is-avatar .preview { height: 170px; }
.shop-card.is-avatar .ts-avatar { width: 130px; height: 130px; }

/* Shop: Bühne für Profilrahmen-Previews */
.shop-card .profile-preview{
  display:flex; justify-content:center; align-items:center;
  height: 180px; overflow:hidden; margin-bottom:6px;
}

/* Kompakter Profilrahmen-Container in Karten */
.shop-card .ts-profile-wrap{
  position: relative;
  width: 100%;
  height: 140px;              /* Bühne innerhalb der Karte */
  border-radius: 16px;
}


/* ===========================
   PROFIL-RAHMEN (PNG / WebP)
   - aktiviert mit .ts-frame--img
   - Bild wird per --profile-frame-url gesetzt
   - Skalierung & Verschiebung optional via Variablen
=========================== */

/* Grundlogik */
.ts-profile-wrap.ts-frame--img::before {
  content: none !important; /* Standard-CSS-Rahmen abschalten */
}
.ts-profile-wrap.ts-frame--img::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3; /* über Content, unter Tooltips */
  background-image: var(--profile-frame-url);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 10px rgba(0,0,0,.25));
  transform:
    translate(var(--frame-shift-x,0px), var(--frame-shift-y,0px))
    scale(var(--frame-scale,1));
}

/* Standard-Variablen */
.ts-profile-wrap {
  --frame-scale: 1;      /* Gesamtgröße des Rahmens */
  --frame-shift-x: 0px;  /* Feintuning horizontal */
  --frame-shift-y: 0px;  /* Feintuning vertikal */
}

/* ===========================
   Beispiel-Slugs
   Setzen nur die Variable --profile-frame-url,
   Rest übernimmt die ts-frame--img Logik.
=========================== */
.ts-frame--eis-rahmen {
  --profile-frame-url: image-set(
    url('/media/frames/eis_rahmen.webp') type('image/webp') 1x,
    url('/media/frames/eis_rahmen.png') type('image/png') 1x
  );
  --frame-scale: 1.8;
}
.ts-frame--nordic-gold-rahmen {
  --profile-frame-url: image-set(
    url('/media/frames/nordic_goldr.webp') type('image/webp') 1x,
    url('/media/frames/nordic_goldr.png') type('image/png') 1x
  );
  --frame-scale: 1.3;
}
.ts-frame--neon-glow {
  --profile-frame-url: image-set(
    url('/media/frames/neon_glow.webp') type('image/webp') 1x,
    url('/media/frames/neon_glow.png') type('image/png') 1x
  );
  --frame-scale: 1.1;
}
.ts-frame--flamme {
  --profile-frame-url: image-set(
    url('/media/frames/flamme.webp') type('image/webp') 1x,
    url('/media/frames/flamme.png') type('image/png') 1x
  );
  --frame-scale: 1.15;
  --frame-shift-y: -4px; /* Beispiel */
}
.ts-frame--zacke {
  --profile-frame-url: image-set(
    url('/media/frames/zacke.webp') type('image/webp') 1x,
    url('/media/frames/zacke.png') type('image/png') 1x
  );
  --frame-scale: 1.1;
}

.shop-card .ts-frame--eis-rahmen{ --img-size: 70%; --frame-scale: 1.10; }

/* Standard: keine Drehung */
.ts-profile-wrap.ts-frame--img::after {
  transform:
    translate(var(--frame-shift-x,0px), var(--frame-shift-y,0px))
    scale(var(--frame-scale,1))
    rotate(var(--frame-rotate,0deg));
}

/* Mobile Variante */
@media (max-width: 900px) {
  .ts-frame--nordic-gold-rahmen.ts-frame--img::after {
    --frame-scale: 1.5;
    --frame-rotate: 90deg;   /* auf Handy um 90° drehen */
  }
}

/* ===========================
   SHOP WRAP & HEADER
=========================== */
.shop-wrap {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1.5rem;
}

.shop-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border);
}

.shop-head h1 {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===========================
   FOOTER (optional)
=========================== */
footer {
  background: var(--color-card);
  border-top: 1px solid var(--color-border);
  padding: 2rem;
  text-align: center;
  margin-top: auto;
}

footer a {
  color: var(--color-text-secondary);
  margin: 0 1rem;
  transition: color var(--transition-fast);
}

footer a:hover {
  color: var(--color-primary);
}


/* ===========================
   NEUE GAMING-PROFILRAHMEN
   5 animierte Varianten
   Slug-Format: ts-frame--{slug}
=========================== */

/* ──────────────────────────────────────
   1) PLASMA SURGE – Elektrische Plasma-Energie
   Slug: plasma-surge
   ────────────────────────────────────── */
.ts-profile-wrap.ts-frame--plasma-surge { position: relative; }

.ts-profile-wrap.ts-frame--plasma-surge::before {
  --b: 10px;
  --glow: drop-shadow(0 0 22px rgba(120, 0, 255, .55))
          drop-shadow(0 0 36px rgba(0, 180, 255, .35));
  --grad:
    radial-gradient(50% 70% at 15% 20%, rgba(180, 0, 255, .22), transparent 60%),
    radial-gradient(50% 70% at 85% 80%, rgba(0, 160, 255, .20), transparent 60%),
    repeating-conic-gradient(from var(--ps, 0deg),
      rgba(255, 255, 255, .12) 0 3deg, transparent 3deg 6deg),
    conic-gradient(from var(--ps, 0deg),
      #7b00ff, #00b4ff, #ff00e6, #00ffcc, #7b00ff);

  animation:
    ps_rot 6s linear infinite,
    ps_pulse 2.4s ease-in-out infinite,
    ps_hue 12s linear infinite;
}

.ts-profile-wrap.ts-frame--plasma-surge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(120, 0, 255, .6));

  background-image:
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(180, 120, 255, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(0, 200, 255, .85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 255, 255, .9) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(200, 0, 255, .75) 0 60%, transparent 61%);
  background-size: 5px 5px, 3px 3px, 4px 4px, 3px 3px, 4px 4px;
  background-repeat: no-repeat;
  background-position: 12% 5%, 88% 15%, 50% 95%, 25% 90%, 75% 8%;

  animation:
    ps_sparks_a 3.2s linear infinite,
    ps_sparks_b 4.1s linear infinite,
    ps_twinkle 1.1s ease-in-out infinite;

  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes ps_rot   { to { --ps: 360deg; } }
@keyframes ps_pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes ps_hue   {
  0%   { filter: hue-rotate(0deg) saturate(1.1) var(--glow); }
  50%  { filter: hue-rotate(30deg) saturate(1.3) var(--glow); }
  100% { filter: hue-rotate(0deg) saturate(1.1) var(--glow); }
}
@keyframes ps_sparks_a {
  0%   { background-position: 12% 5%, 88% 15%, 50% 95%, 25% 90%, 75% 8%; }
  50%  { background-position: 18% 48%, 82% 55%, 45% 50%, 30% 45%, 70% 52%; }
  100% { background-position: 24% 92%, 76% 88%, 40% 8%, 35% 5%, 65% 95%; }
}
@keyframes ps_sparks_b {
  0%   { background-position: 10% 8%, 90% 12%, 52% 92%, 28% 88%, 72% 10%; }
  50%  { background-position: 15% 52%, 85% 48%, 48% 45%, 32% 50%, 68% 55%; }
  100% { background-position: 20% 95%, 80% 90%, 44% 5%, 36% 8%, 64% 92%; }
}
@keyframes ps_twinkle { 0%,100% { opacity: 1; } 50% { opacity: .85; } }

@media (prefers-reduced-motion: reduce) {
  .ts-profile-wrap.ts-frame--plasma-surge::before { animation: ps_rot 18s linear infinite; }
  .ts-profile-wrap.ts-frame--plasma-surge::after  { animation: none; }
}


/* ──────────────────────────────────────
   2) TOXIC WASTE – Radioaktiv grün, giftig pulsierend
   Slug: toxic
   ────────────────────────────────────── */
.ts-profile-wrap.ts-frame--toxic { position: relative; }

.ts-profile-wrap.ts-frame--toxic::before {
  --b: 11px;
  --glow: drop-shadow(0 0 24px rgba(0, 255, 60, .50))
          drop-shadow(0 0 40px rgba(120, 255, 0, .25));
  --grad:
    radial-gradient(55% 55% at 20% 85%, rgba(0, 255, 60, .25), transparent 60%),
    radial-gradient(55% 55% at 80% 15%, rgba(180, 255, 0, .20), transparent 60%),
    conic-gradient(from var(--tx, 0deg),
      #00ff3c, #1a1a00, #b4ff00, #003300, #00ff3c);

  animation:
    tx_rot 10s linear infinite,
    tx_bubble 1.8s ease-in-out infinite;
}

.ts-profile-wrap.ts-frame--toxic::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 6px rgba(0, 255, 60, .7));

  background-image:
    radial-gradient(circle, rgba(0, 255, 60, .85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(180, 255, 0, .7) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(0, 255, 120, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(200, 255, 0, .75) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(0, 255, 60, .9) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(100, 255, 0, .7) 0 60%, transparent 61%);
  background-size: 8px 8px, 6px 6px, 10px 10px, 5px 5px, 7px 7px, 9px 9px;
  background-repeat: no-repeat;
  background-position: 15% 102%, 40% 108%, 65% 104%, 85% 110%, 28% 106%, 72% 112%;

  animation:
    tx_drip 4.5s ease-in infinite,
    tx_glow 2s ease-in-out infinite;

  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes tx_rot    { to { --tx: 360deg; } }
@keyframes tx_bubble {
  0%, 100% { transform: scale(1); filter: brightness(1) var(--glow); }
  50%      { transform: scale(1.018); filter: brightness(1.12) var(--glow); }
}
@keyframes tx_drip {
  0%   { background-position: 15% 102%, 40% 108%, 65% 104%, 85% 110%, 28% 106%, 72% 112%; }
  40%  { background-position: 14% 70%,  38% 60%,  63% 72%,  83% 55%,  26% 65%,  70% 58%; }
  70%  { background-position: 13% 35%,  36% 28%,  61% 40%,  81% 22%,  24% 30%,  68% 25%; }
  100% { background-position: 12% -8%,  34% -12%, 59% -6%,  79% -15%, 22% -10%, 66% -8%; }
}
@keyframes tx_glow { 0%,100% { opacity: 1; } 50% { opacity: .82; } }

@media (prefers-reduced-motion: reduce) {
  .ts-profile-wrap.ts-frame--toxic::before { animation: tx_rot 18s linear infinite; }
  .ts-profile-wrap.ts-frame--toxic::after  { animation: none; }
}


/* ──────────────────────────────────────
   3) BLOOD MOON – Dunkelrot, pulsierender Blutmond
   Slug: blood-moon
   ────────────────────────────────────── */
.ts-profile-wrap.ts-frame--blood-moon { position: relative; }

.ts-profile-wrap.ts-frame--blood-moon::before {
  --b: 11px;
  --glow: drop-shadow(0 0 22px rgba(200, 0, 0, .60))
          drop-shadow(0 0 38px rgba(120, 0, 30, .35));
  --grad:
    radial-gradient(60% 60% at 15% 15%, rgba(255, 0, 40, .20), transparent 55%),
    radial-gradient(60% 60% at 85% 85%, rgba(180, 0, 20, .18), transparent 55%),
    conic-gradient(from var(--bm, 0deg),
      #8b0000, #ff0033, #3d0000, #cc0022, #8b0000);

  animation:
    bm_rot 12s linear infinite,
    bm_pulse 3s ease-in-out infinite;
}

.ts-profile-wrap.ts-frame--blood-moon::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(255, 0, 40, .5));

  background-image:
    radial-gradient(circle, rgba(255, 60, 60, .85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 0, 0, .7) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 100, 80, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(200, 0, 30, .75) 0 60%, transparent 61%);
  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px;
  background-repeat: no-repeat;
  background-position: 20% 10%, 80% 88%, 50% 5%, 70% 92%;

  animation:
    bm_float 5s ease-in-out infinite,
    bm_flicker .15s steps(2, end) infinite;

  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes bm_rot   { to { --bm: 360deg; } }
@keyframes bm_pulse {
  0%, 100% { transform: scale(1); filter: brightness(1) saturate(1) var(--glow); }
  50%      { transform: scale(1.02); filter: brightness(1.15) saturate(1.3) var(--glow); }
}
@keyframes bm_float {
  0%   { background-position: 20% 10%, 80% 88%, 50% 5%, 70% 92%; }
  33%  { background-position: 25% 35%, 75% 65%, 45% 30%, 65% 68%; }
  66%  { background-position: 18% 70%, 82% 30%, 55% 75%, 72% 28%; }
  100% { background-position: 20% 10%, 80% 88%, 50% 5%, 70% 92%; }
}
@keyframes bm_flicker { 0% { opacity: .92; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ts-profile-wrap.ts-frame--blood-moon::before { animation: bm_rot 20s linear infinite; }
  .ts-profile-wrap.ts-frame--blood-moon::after  { animation: none; }
}


/* ──────────────────────────────────────
   4) VOID PORTAL – Schwarzes Loch / Vortex
   Slug: void-portal
   ────────────────────────────────────── */
.ts-profile-wrap.ts-frame--void-portal { position: relative; }

.ts-profile-wrap.ts-frame--void-portal::before {
  --b: 12px;
  --glow: drop-shadow(0 0 26px rgba(100, 0, 200, .50))
          drop-shadow(0 0 44px rgba(40, 0, 80, .40));
  --grad:
    radial-gradient(45% 45% at 50% 50%, rgba(0, 0, 0, .6), transparent 70%),
    repeating-conic-gradient(from var(--vp, 0deg),
      rgba(160, 0, 255, .30) 0 5deg, transparent 5deg 15deg,
      rgba(0, 140, 255, .25) 15deg 20deg, transparent 20deg 30deg),
    conic-gradient(from var(--vp, 0deg),
      #1a0033, #6600cc, #000022, #3300aa, #0d001a, #6600cc, #1a0033);

  animation:
    vp_rot 8s linear infinite,
    vp_warp 4s ease-in-out infinite;
}

.ts-profile-wrap.ts-frame--void-portal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(140, 0, 255, .6));

  background-image:
    radial-gradient(circle, rgba(200, 160, 255, .9) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(100, 0, 255, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(0, 120, 255, .85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 200, 255, .75) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(80, 0, 200, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(0, 180, 255, .7) 0 60%, transparent 61%);
  background-size: 3px 3px, 4px 4px, 3px 3px, 2px 2px, 4px 4px, 3px 3px;
  background-repeat: no-repeat;
  background-position: 8% 50%, 92% 50%, 50% 2%, 50% 98%, 30% 20%, 70% 80%;

  animation:
    vp_orbit_a 3s linear infinite,
    vp_orbit_b 5s linear infinite reverse,
    vp_twinkle 1.4s ease-in-out infinite;

  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes vp_rot  { to { --vp: 360deg; } }
@keyframes vp_warp {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
@keyframes vp_orbit_a {
  0%   { background-position: 8% 50%, 92% 50%, 50% 2%, 50% 98%, 30% 20%, 70% 80%; }
  25%  { background-position: 50% 2%, 50% 98%, 92% 50%, 8% 50%, 70% 10%, 30% 90%; }
  50%  { background-position: 92% 50%, 8% 50%, 50% 98%, 50% 2%, 80% 70%, 20% 30%; }
  75%  { background-position: 50% 98%, 50% 2%, 8% 50%, 92% 50%, 25% 85%, 75% 15%; }
  100% { background-position: 8% 50%, 92% 50%, 50% 2%, 50% 98%, 30% 20%, 70% 80%; }
}
@keyframes vp_orbit_b {
  0%   { background-position: 10% 45%, 90% 55%, 48% 5%, 52% 95%, 28% 22%, 72% 78%; }
  50%  { background-position: 88% 52%, 12% 48%, 55% 92%, 45% 8%, 78% 72%, 22% 28%; }
  100% { background-position: 10% 45%, 90% 55%, 48% 5%, 52% 95%, 28% 22%, 72% 78%; }
}
@keyframes vp_twinkle { 0%,100% { opacity: 1; } 50% { opacity: .82; } }

@media (prefers-reduced-motion: reduce) {
  .ts-profile-wrap.ts-frame--void-portal::before { animation: vp_rot 18s linear infinite; }
  .ts-profile-wrap.ts-frame--void-portal::after  { animation: none; }
}


/* ──────────────────────────────────────
   5) DRAGON SCALE – Gold/Rot schimmernde Drachenschuppen
   Slug: dragon-scale
   ────────────────────────────────────── */
.ts-profile-wrap.ts-frame--dragon-scale { position: relative; }

.ts-profile-wrap.ts-frame--dragon-scale::before {
  --b: 11px;
  --glow: drop-shadow(0 0 20px rgba(255, 160, 0, .55))
          drop-shadow(0 0 32px rgba(200, 50, 0, .30));
  --grad:
    radial-gradient(45% 65% at 10% 25%, rgba(255, 200, 0, .20), transparent 55%),
    radial-gradient(45% 65% at 90% 75%, rgba(255, 80, 0, .18), transparent 55%),
    repeating-conic-gradient(from var(--ds2, 0deg),
      rgba(255, 215, 0, .20) 0 8deg,
      rgba(180, 40, 0, .15) 8deg 16deg,
      rgba(255, 160, 0, .18) 16deg 24deg,
      transparent 24deg 32deg),
    conic-gradient(from var(--ds2, 0deg),
      #ffd700, #cc3300, #ff8c00, #8b0000, #ffd700);

  animation:
    ds2_rot 10s linear infinite,
    ds2_shimmer 3s ease-in-out infinite;
}

.ts-profile-wrap.ts-frame--dragon-scale::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  border-radius: inherit;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 8px rgba(255, 180, 0, .55));

  background-image:
    radial-gradient(circle, rgba(255, 255, 200, .9) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 200, 0, .8) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 120, 0, .75) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 255, 180, .85) 0 60%, transparent 61%),
    radial-gradient(circle, rgba(255, 160, 0, .8) 0 60%, transparent 61%),
    linear-gradient(135deg, transparent 40%, rgba(255, 215, 0, .4) 50%, transparent 60%);
  background-size: 4px 4px, 3px 3px, 5px 5px, 3px 3px, 4px 4px, 200% 100%;
  background-repeat: no-repeat;
  background-position: 15% 12%, 85% 22%, 50% 88%, 30% 85%, 72% 10%, -80% 0%;

  animation:
    ds2_scales 5s ease-in-out infinite,
    ds2_sheen 4s linear infinite,
    ds2_twinkle 1.5s ease-in-out infinite;

  padding: var(--b);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

@keyframes ds2_rot     { to { --ds2: 360deg; } }
@keyframes ds2_shimmer {
  0%, 100% { transform: scale(1); filter: brightness(1) saturate(1.1) var(--glow); }
  50%      { transform: scale(1.014); filter: brightness(1.1) saturate(1.25) var(--glow); }
}
@keyframes ds2_scales {
  0%   { background-position: 15% 12%, 85% 22%, 50% 88%, 30% 85%, 72% 10%, -80% 0%; }
  33%  { background-position: 22% 40%, 78% 50%, 45% 55%, 35% 52%, 68% 42%, -30% 0%; }
  66%  { background-position: 18% 75%, 82% 68%, 52% 20%, 28% 25%, 74% 78%, 40% 0%; }
  100% { background-position: 15% 12%, 85% 22%, 50% 88%, 30% 85%, 72% 10%, -80% 0%; }
}
@keyframes ds2_sheen {
  0%   { background-position: 15% 12%, 85% 22%, 50% 88%, 30% 85%, 72% 10%, -80% 0%; }
  100% { background-position: 15% 12%, 85% 22%, 50% 88%, 30% 85%, 72% 10%, 180% 0%; }
}
@keyframes ds2_twinkle { 0%,100% { opacity: 1; } 50% { opacity: .88; } }

@media (prefers-reduced-motion: reduce) {
  .ts-profile-wrap.ts-frame--dragon-scale::before { animation: ds2_rot 18s linear infinite; }
  .ts-profile-wrap.ts-frame--dragon-scale::after  { animation: none; }
}