/* profile-style.css - The Premium Rework */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Dancing+Script:wght@400;700&family=Space+Mono:wght@400;700&family=Playfair+Display:wght@700&family=Inter:wght@300;400;600&family=Montserrat:wght@400;700&family=Lora:ital,wght@0,400;1,400&display=swap');

:root {
    /* Standardwerte (werden von JS überschrieben) */
    --p-bg-color: #0f172a;
    --p-text-primary: #f8fafc;
    --p-text-secondary: #94a3b8;
    --p-accent: #a855f7;
    --p-accent-glow: rgba(168, 85, 247, 0.3);
    --p-font-heading: 'Playfair Display', serif;
    --p-font-body: 'Inter', sans-serif;
    --p-radius-card: 16px;
    
    /* Glassmorphism Defaults */
    --p-glass-bg: rgba(15, 23, 42, 0.6);
    --p-glass-border: 1px solid rgba(255, 255, 255, 0.08);
    --p-glass-blur: blur(16px);
}

/* WICHTIG: Diese Klasse kommt nur auf den Body von profile.html */
body.public-profile-page {
    margin: 0;
    padding: 0;
    background-color: var(--p-bg-color);
    color: var(--p-text-primary);
    font-family: var(--p-font-body);
    overflow-x: hidden;
    line-height: 1.6;
	min-height: 100vh;
    min-height: 100dvh;
}

/* Container Reset für Module */
.profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* === BACKGROUND LAYERS === */
.profile-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    opacity: 0.4;
    filter: blur(20px);
    transform: scale(1.1) translateZ(0);    
    transition: background-image 0.5s ease-in-out;
    will-change: transform; /* Sagt dem Browser: "Hier wird gleich animiert" */
}

.profile-noise-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* === CONTAINER === */
.profile-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 1.5rem 4rem 1.5rem;
    position: relative;
    z-index: 1;
}

/* =========================================
   HERO AVATAR (Profilbild)
   ========================================= */
.hero-wrapper {
    margin-bottom: 4rem;
    position: relative;
	margin-bottom: 3rem;
}

.hero-cover {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 var(--p-radius-card) var(--p-radius-card);
    position: relative;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
    margin-bottom: 4rem; /* Platz für das Profilbild, das herausragt */
}

/* Gradient Overlay auf dem Cover unten */
.hero-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--p-bg-color), transparent 60%);
    opacity: 0.8;
}

.hero-content {
    text-align: center;
    margin-top: -100px; /* Zieht den Inhalt in das Cover rein */
    position: relative;
    z-index: 2;
	padding: 0 1rem;
}

.hero-avatar-frame {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 4px solid var(--p-accent); /* Der äußere Ring */
    padding: 4px; /* Abstand zwischen Bild und Ring */
    background: rgba(0,0,0,0.5); /* Dunkler Hintergrund im Spalt */
    
    /* Wichtig für Zentrierung */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Schneidet alles ab, was übersteht */
    margin: 0 auto 1.5rem auto; /* Zentriert den ganzen Frame */
    box-shadow: 0 0 20px var(--p-accent-glow);
}

.hero-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* Das Bild selbst auch rund machen */
    object-fit: cover; /* Bild füllt den Kreis perfekt aus */
    display: block;
}

.hero-title {
    font-family: var(--p-font-heading);
    font-size: 3.5rem;
	font-size: clamp(2rem, 5vw, 3.5rem);
	word-wrap: break-word;
    line-height: 1.1;
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #fff 0%, var(--p-text-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.hero-meta {
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--p-accent);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}

.hero-bio {
    max-width: 600px;
    margin: 0 auto;
    color: var(--p-text-secondary);
    font-size: 1.1rem;
    font-style: italic;
}

/* === MODULE GRID SYSTEM === */
.modules-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.module-card {
    background: var(--p-glass-bg);
    border: var(--p-glass-border);
    backdrop-filter: var(--p-glass-blur);
    border-radius: var(--p-radius-card);
    padding: 1.5rem;
    box-shadow: 0 10px 30px -5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.module-card:hover {
    border-color: var(--p-accent);
    transform: translateY(-5px);
}

.module-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 1rem;
}

.module-title {
    font-family: var(--p-font-heading);
    font-size: 1.75rem;
    margin: 0;
    color: var(--p-text-primary);
}

/* === STATS MODULE === */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1.5rem;
}

.stat-box {
    text-align: center;
    padding: 1.5rem;
    background: rgba(255,255,255,0.03);
    border-radius: var(--p-radius-card);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--p-accent);
    line-height: 1;
    margin-bottom: 0.5rem;
    font-family: var(--p-font-heading);
}

.stat-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--p-text-secondary);
}

/* === TIMELINE LAYOUT (Achievements) === */
.timeline {
    position: relative;
    padding-left: 1.5rem;
}
.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--p-accent), transparent);
}

.timeline-item {
    position: relative;
    margin-bottom: 2.5rem;
    padding-left: 1.5rem;
}

.timeline-dot {
    position: absolute;
    left: -1.9rem; /* Ausrichten an Linie */
    top: 0;
    width: 12px;
    height: 12px;
    background: var(--p-accent);
    border-radius: 50%;
    box-shadow: 0 0 15px var(--p-accent);
}

.timeline-date {
    font-size: 0.85rem;
    color: var(--p-accent);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: block;
}

.timeline-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 1.5rem;
    border-radius: var(--p-radius-card);
    transition: transform 0.2s;
}
.timeline-card:hover { transform: translateX(10px); background: rgba(255,255,255,0.05); }

/* === GRID LAYOUT (Medals & Gallery) === */
.grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
}

.medal-display {
    aspect-ratio: 1/1;
    background: rgba(255,255,255,0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
}
.medal-tooltip {
    position: absolute;
    bottom: -30px;
    font-size: 0.7rem;
    background: black;
    padding: 2px 6px;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    white-space: nowrap;
}
.medal-display:hover .medal-tooltip { opacity: 1; }

/* =========================================
   GALERIE (Kacheln)
   ========================================= */
.gallery-grid {
    display: grid;
    /* Responsive Spalten: Mindestens 150px breit, füllen den Rest auf */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem; /* Abstand zwischen den Bildern */
    margin-top: 1rem;
}
/* Die einzelne Bild-Karte */
.gallery-item {
    position: relative; /* Wichtig für den Titel overlay */
    width: 100%;
    aspect-ratio: 1 / 1; /* Quadratisch */
    border-radius: 12px;
    overflow: hidden;
    background-color: rgba(255,255,255,0.05); /* Platzhalterfarbe */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.gallery-item:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 10;
}
/* Das Bild darin */
.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt Quadrat aus */
    display: block;
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-img {
    transform: scale(1.1); /* Leichter Zoom im Bild */
}
/* Der Titel (Overlay beim Hover) */
.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 8px;
    
    /* Verlauf von Schwarz zu Transparent für Lesbarkeit */
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    
    color: white;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 500;
    
    /* Standardmäßig unsichtbar */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

/* Zeigen beim Hover (Desktop) oder immer (Touch - optional) */
.gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hero-title { font-size: 2.5rem; }
    .profile-container { padding: 0 1rem 2rem 1rem; }
}
@media (max-width: 480px) {
    .module-card {
        padding: 1rem;
    }
    .profile-container {
        padding: 0 0.5rem 2rem 0.5rem; /* Weniger Rand außen */
    }
}

/* === SPOTIFY MODUL === */
.spotify-embed-container {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}
.spotify-embed-container:hover {
    transform: scale(1.02);
}

/* === COUNTDOWN MODUL === */
.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten: Tage, Std, Min, Sek */
    gap: 1rem;
    margin-top: 1rem;
}
.countdown-tile {
    background: rgba(255, 255, 255, 0.05); /* Sehr transparent */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(5px);
    transition: transform 0.3s ease;
}
/* Leichter Glanz-Effekt am oberen Rand */
.countdown-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--p-accent), transparent);
    opacity: 0.5;
}
.countdown-tile:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--p-accent);
}
.countdown-number {
    font-family: var(--p-font-heading); /* Nutzt die gewählte Font */
    font-size: 2rem; /* Groß und deutlich */
    font-weight: 700;
    color: var(--p-accent); /* Nutzt die gewählte Farbe */
    line-height: 1;
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums; /* Verhindert Springen der Zahlen */
    text-shadow: 0 0 10px var(--p-accent-glow);
}
.countdown-label {
    font-family: var(--p-font-body);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--p-text-secondary);
    opacity: 0.8;
}
/* Anpassung für kleine Bildschirme */
@media (max-width: 480px) {
    .countdown-grid {
        gap: 0.5rem;
    }
    .countdown-number {
        font-size: 1.5rem;
    }
    .countdown-label {
        font-size: 0.55rem;
    }
}

/* === Q&A STECKBRIEF === */
.qa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.qa-card {
    background: rgba(255,255,255,0.03);
    border-left: 2px solid var(--p-accent);
    padding: 1.5rem;
    border-radius: 0 var(--p-radius-card) var(--p-radius-card) 0;
    transition: background 0.3s ease;
}
.qa-card:hover {
    background: rgba(255,255,255,0.06);
}

.qa-question {
    font-family: var(--p-font-heading);
    font-size: 1.1rem;
    color: var(--p-accent);
    margin-bottom: 0.5rem;
    font-style: italic;
}
.qa-answer {
    color: var(--p-text-primary);
    font-size: 1rem;
    line-height: 1.6;
}

/* === HINTERGRUND EFFEKTE (Performance-Optimiert) === */
.particle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

/* Effekt: Glühwürmchen (Fireflies) */
.firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #fbbf24;
    border-radius: 50%;
    box-shadow: 0 0 10px #fbbf24, 0 0 20px #fbbf24;
    animation: floatUp 10s linear infinite, flicker 3s ease-in-out infinite;
    opacity: 0;
}

/* Effekt: Schnee / Sternenstaub */
.snow-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.6;
    animation: fallDown 15s linear infinite;
}

/* Effekt: Hearts */
.heart-particle {
    position: absolute;
    color: var(--p-accent); /* Nutzt die Akzentfarbe! */
    font-size: 1.5rem;
    opacity: 0;
    animation: floatUpHearts 15s linear infinite;
    text-shadow: 0 0 10px var(--p-accent-glow);
}

/* Effekt: Warp Speed */
.star-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: zoomStars 3s linear infinite;
    opacity: 0;
}

/* Effekt: Feuerwerk (Nutzt die Profil-Akzentfarbe) */
.firework-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    /* Startet unter dem Bildschirm */
    bottom: -10vh;
    /* Nutzt die Akzentfarbe des Profils für die Rakete */
    background-color: var(--p-accent);
    animation: firework-shoot infinite ease-out;
}

/* 
 * Der Trick: Ein einzelner Punkt schießt nach oben.
 * Am Höhepunkt verschwindet der Hintergrund, aber 8 Box-Shadows expandieren sternförmig.
 */
@keyframes firework-shoot {
    0% { 
        transform: translateY(0); 
        opacity: 1; 
        box-shadow: 0 0 0 transparent; 
        background-color: var(--p-accent); 
    }
    40% { 
        transform: translateY(var(--target-y)); 
        opacity: 1; 
        box-shadow: 0 0 0 transparent; 
        background-color: var(--p-accent); 
    }
    45% {
        transform: translateY(var(--target-y));
        opacity: 1;
        background-color: transparent;
        /* Explosion: 8 Funken (Mix aus Akzentfarbe und Weiß für Glanz) */
        box-shadow:
            0 -30px 0 -1px var(--p-accent),
            21px -21px 0 -1px white,
            30px 0 0 -1px var(--p-accent),
            21px 21px 0 -1px white,
            0 30px 0 -1px var(--p-accent),
            -21px 21px 0 -1px white,
            -30px 0 0 -1px var(--p-accent),
            -21px -21px 0 -1px white;
    }
    80% {
        /* Funken fallen leicht (Gravitation) und lösen sich auf */
        transform: translateY(calc(var(--target-y) + 10vh)); 
        opacity: 0;
        background-color: transparent;
        box-shadow:
            0 -80px 0 -2px var(--p-accent),
            56px -56px 0 -2px white,
            80px 0 0 -2px var(--p-accent),
            56px 56px 0 -2px white,
            0 80px 0 -2px var(--p-accent),
            -56px 56px 0 -2px white,
            -80px 0 0 -2px var(--p-accent),
            -56px -56px 0 -2px white;
    }
    100% { 
        transform: translateY(0); 
        opacity: 0; 
        background-color: transparent; 
        box-shadow: 0 0 0 transparent; 
    }
}

@keyframes zoomStars {
    0% { transform: scale(1); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: scale(30); opacity: 0; } /* Zoomt auf den Betrachter zu */
}

@keyframes floatUpHearts {
    0% { transform: translateY(110vh) scale(0.5) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1.2) rotate(360deg); opacity: 0; }
}

@keyframes floatUp {
    0% { transform: translateY(100vh) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-10vh) translateX(20px); opacity: 0; }
}

@keyframes flicker {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

@keyframes fallDown {
    0% { transform: translateY(-10vh) translateX(0); }
    100% { transform: translateY(110vh) translateX(20px); }
}

/* === COUNTDOWN FINAL STATE (Party Mode) === */
.countdown-finished-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
    border: 1px solid var(--p-accent);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    animation: popIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 30px var(--p-accent-glow);
}
/* Glanz-Effekt, der über die Karte läuft */
.countdown-finished-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-25deg);
    animation: shimmerPass 3s infinite;
}
.finish-icon {
    font-size: 4rem;
    display: block;
    margin-bottom: 0.5rem;
    animation: float-card 3s ease-in-out infinite;
    filter: drop-shadow(0 0 10px var(--p-accent));
}
.finish-title {
    font-family: var(--p-font-heading);
    font-size: 2rem;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.finish-subtitle {
    font-family: var(--p-font-body);
    color: var(--p-accent);
    font-weight: 600;
    font-size: 1.1rem;
}
@keyframes popIn { 0% { transform: scale(0.8); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes shimmerPass { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }
@keyframes float-card { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* === KARTEN STILE (Themes für Module) === */
/* STYLE: NEON (Cyberpunk Vibes) */
.style-neon .module-card {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--p-accent);
    box-shadow: 0 0 15px var(--p-accent-glow), inset 0 0 20px rgba(0,0,0,0.8);
    border-radius: 0; /* Eckig für Tech-Look */
}
.style-neon .module-title {
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--p-accent);
    text-shadow: 0 0 5px var(--p-accent);
}

/* STYLE: MINIMAL (Clean & Modern) */
.style-minimal .module-card {
    background: rgba(255, 255, 255, 0.95);
    color: #1e293b; /* Dunkler Text erzwingen */
    border: none;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-radius: 24px;
}
/* Fügt Ränder/Schatten für Kacheln innerhalb der weißen Karten hinzu */
.style-minimal .timeline-card,
.style-minimal .gallery-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.style-minimal .timeline-card:hover,
.style-minimal .gallery-item:hover {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    border-color: #cbd5e1;
}
.style-minimal .module-title, 
.style-minimal .stat-number, 
.style-minimal .qa-answer {
    color: #0f172a !important; /* Schwarz erzwingen */
}
.style-minimal .stat-box {
    background: #f1f5f9; /* Helles Grau für innere Boxen */
}

/* STYLE: SOLID (Premium Dark) */
.style-solid .module-card {
    background: #1e1b4b; /* Dunkles Indigo */
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

/* Klasse zum verstecken */
.hidden {
    display: none !important;
}

/* =========================================
   BADGE STYLES (Kopie aus themes.css + Fixes)
   ========================================= */

.profile-badges-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: default;
    border: 1px solid transparent;
    transition: transform 0.2s ease;
    white-space: nowrap; /* Verhindert Umbruch im Badge */
}

.premium-badge:hover {
    transform: scale(1.05) translateY(-2px);
}

/* EMOJI SCHATTEN FIX */
.premium-badge > span {
    /* Gibt dem Emoji einen harten Schlagschatten für besseren Kontrast auf Gold/Hell */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    font-size: 1.1em; /* Emoji leicht größer als Text */
    line-height: 1;
}

/* --- BADGE THEMES --- */

/* STYLE: RAINBOW (Animiert, für Ultra/Special) */
.badge-style-rainbow {
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    background-image: linear-gradient(90deg, #ff4b4b, #ffac38, #fff24a, #4bff66, #38d1ff, #6c4bff, #ff4b4b);
    background-size: 400% 400%;
    animation: rainbow-shift 3s ease infinite;
    border: none;
}

/* STYLE: GOLD (Luxus, Founder) */
.badge-style-gold {
    background: linear-gradient(135deg, #FFD700 0%, #DAA520 100%);
    color: #2a1b00; /* Sehr dunkles Braun statt Schwarz für weicheren Kontrast */
    border: 1px solid #B8860B;
    box-shadow: 0 2px 10px rgba(218, 165, 32, 0.3);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); /* Leichter Highlight für Text */
}

/* STYLE: NEON (Cyber, Tech) */
.badge-style-neon {
    background: rgba(0, 0, 0, 0.6);
    color: #00fff2;
    border: 1px solid #00fff2;
    box-shadow: 0 0 8px rgba(0, 255, 242, 0.4);
    text-shadow: 0 0 5px rgba(0, 255, 242, 0.8);
}

/* STYLE: LOVE (Pink, Herz) */
.badge-style-love {
    background: rgba(236, 72, 153, 0.2);
    color: #f472b6;
    border: 1px solid #ec4899;
    box-shadow: 0 0 10px rgba(236, 72, 153, 0.2);
}

/* STYLE: NATURE (Grün, Eco) */
.badge-style-nature {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid #22c55e;
}

/* STYLE: DARK (Elegant, Black) */
.badge-style-dark {
    background: #0f172a;
    color: #e2e8f0;
    border: 1px solid #475569;
}

/* Animation für Rainbow */
@keyframes rainbow-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ==================================================
   💎 ARCADE VITRINE & SHOP (MODULARES TICKETS SYSTEM)
   ================================================== */

/* Wrapper für den 3D Hover-Effekt, trennt Form von Layout */
.showpiece-wrapper {
    perspective: 1000px;
    width: 100%;
    aspect-ratio: 3 / 4;
}

/* Äußerer Container: Hält den Rand (Border) als Hintergrundfarbe und den 3D-Effekt */
.showpiece-card {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 4px; /* 4px Rahmen-Dicke */
    background: #475569; /* Fallback Border-Farbe */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    transform-style: preserve-3d;
    cursor: default;
    border: none !important; /* Verhindert Stör-Rahmen vom alten CSS */
    box-sizing: border-box;
}

.showpiece-wrapper:hover .showpiece-card {
    transform: translateY(-10px) rotateX(8deg) rotateY(-8deg);
    box-shadow: -15px 20px 30px rgba(0,0,0,0.6);
    z-index: 20;
}

.showpiece-wrapper:hover .showpiece-icon {
    transform: scale(1.15) translateZ(40px); /* 3D Pop-Out */
}

/* Innerer Container: Hält die eigentliche Farbe, Form und Inhalte */
.showpiece-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100%;
    height: 100%;
    background: var(--bg-card, #1e293b); 
    z-index: 1;
    overflow: hidden; 
    box-sizing: border-box;
}
.showpiece-inner::before, .showpiece-inner::after {
    border-radius: 0 !important;
    clip-path: none !important;
}

/* --- 1. MODUL: FORMEN (Shapes) --- */
/* Formen müssen auf Outer UND Inner angewendet werden, damit der Rand der Form nahtlos folgt */
.shape-standard, .shape-standard .showpiece-inner { border-radius: 12px; }
.shape-sharp, .shape-sharp .showpiece-inner { border-radius: 0px; }

.shape-ticket, .shape-ticket .showpiece-inner { 
    clip-path: polygon(15% 0%, 85% 0%, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0% 85%, 0% 15%); 
}
.shape-shield, .shape-shield .showpiece-inner { 
    clip-path: polygon(50% 0%, 100% 10%, 100% 70%, 50% 100%, 0% 70%, 0% 10%); 
}
.shape-hexagon, .shape-hexagon .showpiece-inner {
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.shape-diamond, .shape-diamond .showpiece-inner {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.shape-tombstone, .shape-tombstone .showpiece-inner {
    border-radius: 120px 120px 8px 8px;
}
.shape-octagon, .shape-octagon .showpiece-inner {
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}

/* --- 2. MODUL: HINTERGRÜNDE (Backgrounds) --- */
/* Hintergründe kommen NUR in den INNEREN Container */
.bg-obsidian .showpiece-inner { background: radial-gradient(circle at top right, #334155, #020617); }
.bg-holographic .showpiece-inner {
    background: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e, #a855f7);
    background-size: 300% 300%;
    animation: holoBgShift 6s ease infinite;
}
.bg-gold-foil .showpiece-inner { background: radial-gradient(ellipse at center, #fff9c4 0%, #ffd700 40%, #b8860b 100%); }
.bg-cyber-grid .showpiece-inner {
    background-color: #020617;
    background-image: 
        linear-gradient(rgba(0, 255, 242, 0.2) 1px, transparent 1px), 
        linear-gradient(90deg, rgba(236, 72, 153, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
}
.bg-cosmic .showpiece-inner { background: radial-gradient(circle at bottom, #4c1d95, #0f172a 80%); }
.bg-nebula .showpiece-inner {
    background: linear-gradient(45deg, #ff00cc, #333399);
    background-size: 200% 200%;
    animation: holoBgShift 8s ease infinite;
}
.bg-circuit .showpiece-inner {
    background-color: #064e3b;
    background-image: radial-gradient(#10b981 1px, transparent 1px);
    background-size: 15px 15px;
}
.bg-crimson-velvet .showpiece-inner { background: radial-gradient(ellipse at top left, #991b1b, #450a0a); }
.bg-toxic-biohazard .showpiece-inner {
    background: radial-gradient(circle at center, #14532d, #022c22);
    background-image: repeating-radial-gradient(#16a34a 0, transparent 2px, transparent 10px);
}
.bg-pearl-marble .showpiece-inner { background: linear-gradient(120deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%); }
.bg-midnight-city .showpiece-inner { background: linear-gradient(to bottom, #1e1b4b, #312e81, #0f172a); }

@keyframes holoBgShift { 
    0% { background-position: 0% 50%; } 
    50% { background-position: 100% 50%; } 
    100% { background-position: 0% 50%; } 
}

/* --- 3. MODUL: RÄNDER (Borders) --- */
/* Ränder für Arcade Items werden AUSSCHLIESSLICH durch die Hintergrundfarbe simuliert, 
   da normale CSS-Borders die "Clip-Path"-Formen zerstören würden! */
.showpiece-card.border-glass { background: rgba(255,255,255,0.2) !important; }
.showpiece-card.border-elegant { background: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 100%) !important; }
.showpiece-card.border-transparent { background: transparent !important; }

/* Glow Effekte mit Drop-Shadow (Passt sich der Clip-Path Form an) */
.showpiece-card.border-glow-cyan { background: #00fff2 !important; filter: drop-shadow(0 0 10px rgba(0,255,242,0.6)); }
.showpiece-card.border-glow-gold { background: #ffd700 !important; filter: drop-shadow(0 0 10px rgba(218,165,32,0.6)); }
.showpiece-card.border-neon-pink { background: #ff2a85 !important; filter: drop-shadow(0 0 8px #ff2a85); }
.showpiece-card.border-neon-pink .showpiece-inner { box-shadow: inset 0 0 15px rgba(255, 42, 133, 0.4); }
.showpiece-card.border-dashed { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.6) 0, rgba(255,255,255,0.6) 6px, transparent 6px, transparent 12px) !important; }

/* Spezial-Ränder (Keine Masken für Arcade, nur Background & Drop-Shadow!) */
.showpiece-card.border-holo { background-image: linear-gradient(135deg, #a855f7, #3b82f6, #22c55e, #a855f7) !important; background-size: 300% 300% !important; animation: holoBorderShift 4s linear infinite; }
.showpiece-card.border-molten-lava { background-image: linear-gradient(90deg, #f97316, #ef4444, #b91c1c, #f97316) !important; background-size: 200% 200% !important; animation: holoBorderShift 2s linear infinite; filter: drop-shadow(0 0 8px rgba(239, 68, 68, 0.5)); }
.showpiece-card.border-toxic-glow { background: #22c55e !important; filter: drop-shadow(0 0 12px rgba(34,197,94,0.8)); }
.showpiece-card.border-diamond-cut { background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #64748b 100%) !important; }
.showpiece-card.border-shadow-realm { background: #0f172a !important; filter: drop-shadow(0 0 15px rgba(88,28,135,0.9)); }

@keyframes holoBorderShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* --- 4. MODUL: EFFEKTE (Effects) --- */
/* Effekt 1: Holo Glare (Scharfe, holografische Lichtkante) */
.effect-holo-glare .showpiece-inner::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.6) 25%, rgba(255, 105, 180, 0.4) 28%, rgba(100, 149, 237, 0.4) 32%, transparent 35%);
    background-size: 300% 300%; background-position: 200% 200%;
    opacity: 0; transition: opacity 0.3s; z-index: 5; pointer-events: none;
    mix-blend-mode: color-dodge;
}
.showpiece-wrapper:hover .effect-holo-glare .showpiece-inner::after { 
    opacity: 1; animation: holoGlareSweep 2.5s ease-in-out infinite; 
}
@keyframes holoGlareSweep { 
    0% { background-position: 200% 200%; } 
    100% { background-position: -100% -100%; } 
}

/* Effekt 2: Cyber Pulse (Sci-Fi Scanner) */
.effect-cyber-pulse .showpiece-inner::after {
    content: ''; position: absolute; left: 0; right: 0; height: 15%; top: -20%;
    background: linear-gradient(to bottom, transparent, rgba(0, 255, 242, 0.6), transparent);
    box-shadow: 0 0 20px rgba(0,255,242,0.5);
    z-index: 5; pointer-events: none; opacity: 0;
    mix-blend-mode: screen; transition: opacity 0.3s;
}
.showpiece-wrapper:hover .effect-cyber-pulse .showpiece-inner::after {
    opacity: 1; animation: cyberScan 3s ease-in-out infinite;
}
@keyframes cyberScan { 
    0% { top: -20%; } 
    50% { top: 120%; } 
    100% { top: -20%; } 
}

/* Effekt 3: Stardust (Sanft pulsierende Lichtkugeln) */
.effect-stardust .showpiece-inner::before {
    content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.4) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.3) 3px, transparent 4px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.5) 1.5px, transparent 2px);
    background-size: 50px 50px;
    opacity: 0; transition: opacity 0.5s;
    mix-blend-mode: overlay;
}
.showpiece-wrapper:hover .effect-stardust .showpiece-inner::before {
    opacity: 1; animation: stardustFloat 10s linear infinite;
}
@keyframes stardustFloat {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-50px) rotate(10deg); }
}

/* Effekt 4: Prismatic Foil (Animierter Regenbogen-Schimmer) */
.effect-prismatic-foil .showpiece-inner::after {
    content: ''; position: absolute; inset: -50%; z-index: 4; pointer-events: none;
    background: conic-gradient(from 0deg, transparent, rgba(255, 0, 0, 0.2), rgba(255, 165, 0, 0.2), rgba(255, 255, 0, 0.2), rgba(0, 128, 0, 0.2), rgba(0, 0, 255, 0.2), rgba(75, 0, 130, 0.2), rgba(238, 130, 238, 0.2), transparent);
    opacity: 0; transition: opacity 0.3s;
    mix-blend-mode: color-dodge;
}
.showpiece-wrapper:hover .effect-prismatic-foil .showpiece-inner::after {
    opacity: 1; animation: prismaticSpin 4s linear infinite;
}
@keyframes prismaticSpin {
    100% { transform: rotate(360deg); }
}

/* Effekt 5: Liquid Aurora (Sanfte, bewegliche Farbkleckse) */
.effect-liquid-aurora .showpiece-inner::after {
    content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: 
        radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.4) 0%, transparent 50%);
    background-size: 200% 200%; background-position: 0% 0%;
    opacity: 0; transition: opacity 0.3s;
    mix-blend-mode: screen; filter: blur(10px);
}
.showpiece-wrapper:hover .effect-liquid-aurora .showpiece-inner::after {
    opacity: 1; animation: auroraSway 5s ease-in-out infinite alternate;
}
@keyframes auroraSway {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

/* --- INHALTE --- */
.showpiece-content { 
    flex-grow: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 10; width: 100%; 
}
.showpiece-icon { 
    font-size: 2.5rem; line-height: 1; 
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.6)); 
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}
.showpiece-footer { 
    z-index: 10; width: 100%; text-align: center; padding-bottom: 0.5rem; margin-top: auto; 
    /* Basis-Padding für normale Formen */
    padding-left: 0.5rem; padding-right: 0.5rem;
}

/* FIX FÜR ABGESCHNITTENE TITEL */
.shape-shield .showpiece-footer { padding-bottom: 1.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.shape-ticket .showpiece-footer { padding-bottom: 0.75rem; }
.shape-hexagon .showpiece-footer { padding-bottom: 1rem; }
.shape-diamond .showpiece-footer { padding-bottom: 1.5rem; padding-left: 1rem; padding-right: 1rem; }
.shape-octagon .showpiece-footer { padding-bottom: 0.75rem; }

.showpiece-title { 
    font-weight: 900; font-size: 0.65rem; color: white; text-transform: uppercase; 
    letter-spacing: 0.05em; text-shadow: 0 4px 10px rgba(0,0,0,0.8); line-height: 1.2; word-wrap: break-word; 
}

@media (min-width: 640px) {
    .showpiece-icon { font-size: 3rem; }
    .showpiece-title { font-size: 0.75rem; }
}