/* ==========================================================================
   BASIS-SETUP & SCROLLING
   ========================================================================== */

:root {
  --curve: cubic-bezier(0.23, 1, 0.32, 1);
  --glass: rgba(255, 255, 255, 0.05);
  --border-sharp: 1px solid rgba(255, 255, 255, 0.15);
  --glow-speed: 0.6s;
}

#overview-view {
  width: 100%; height: 100%;
  overflow-y: auto; overflow-x: hidden;
  scroll-behavior: smooth;
  background: radial-gradient(circle at top right, #1a1a1a, #0a0a0a);
}

#overview-view::-webkit-scrollbar { width: 6px; }
#overview-view::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.3); }
#overview-view::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 2px; }

/* ==========================================================================
   LAYOUT & TITEL
   ========================================================================== */

.overview-container, 
#overview-view {
    display: flex;
    flex-direction: column;
    align-items: center; /* Das zwingt alles in die Mitte */
    width: 100%;
}

.overview-section-title {
  width: 100%; text-align: center; font-size: 1.8rem;
  font-weight: 700; margin: 40px 0 25px;
  text-transform: uppercase; letter-spacing: 2px;
}

.title-silver { color: #d1d1d1; text-shadow: 0 0 10px rgba(255,255,255,0.2); }
.title-normal { color: #ffffff; }

/* ==========================================================================
   SAMMELKARTEN GRID & 3D-HOVER
   ========================================================================== */

.card-grid {
  display: flex; gap: 25px; justify-content: center; flex-wrap: wrap;
  perspective: 1200px; width: 100%;
}

.tier-card {
  width: 160px; height: 160px; cursor: pointer;
  transition: transform var(--glow-speed) var(--curve);
}

.card-inner {
  width: 100%; height: 100%; background: var(--glass);
  border: var(--border-sharp); border-radius: 8px; /* Scharfe Ecken */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  backdrop-filter: blur(12px);
  transition: all var(--glow-speed) var(--curve);
  position: relative; overflow: hidden; will-change: transform;
}

/* 3D-Tilt Effekt */
.tier-card:hover .card-inner {
  transform: translateY(-12px) rotateX(15deg) rotateY(5deg) scale(1.02);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Neuer Edge-Light Effekt */
.card-inner::after {
  content: ''; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(135deg, rgba(255,255,255,0.1), transparent 50%);
  opacity: 0; transition: opacity var(--glow-speed);
}
.tier-card:hover .card-inner::after { opacity: 1; }

.card-inner img {
  width: 65px; height: 65px; object-fit: contain;
  transition: transform 0.8s var(--curve);
}
.tier-card:hover img { transform: scale(1.2) translateY(-5px); }

/* ==========================================================================
   DYNAMISCHE LEUCHTFARBEN (AKTIV-ZUSTAND)
   ========================================================================== */

.active-card .card-inner {
  border-color: var(--accent);
  box-shadow: 0 0 30px var(--accent-low), inset 0 0 15px rgba(0,0,0,0.5);
}

/* Variablen für die Farben - einfach zu erweitern */
[data-id="platin"] { --accent: #00d9a3; --accent-low: rgba(0, 217, 163, 0.3); }
[data-id="gold"]   { --accent: #ffd700; --accent-low: rgba(255, 215, 0, 0.3); }
[data-id="wartezimmer"] { --accent: #dc2626; --accent-low: rgba(220, 38, 38, 0.4); }
/* ... füge hier weitere IDs nach diesem Schema hinzu */

/* ==========================================================================
   AUSKLAPPBARE DETAILS (POPUPS)
   ========================================================================== */

.detail-container {
    max-width: 850px; 
    width: 90%;       /* Oder 95%, je nachdem wie viel Platz du willst */
    margin: 0 auto;   /* <--- DAS ZENTRIERT DEN CONTAINER */
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    max-height: 0; 
    opacity: 0; 
    padding: 0 35px;
    overflow: hidden; 
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.detail-container.show {
  max-height: 1000px; opacity: 1; padding: 40px; margin: 30px 0;
}

.detail-content {
  display: flex; gap: 40px; align-items: center;
  transform: translateY(30px);
  transition: transform 0.8s var(--curve), opacity 0.8s;
}

.detail-container.show .detail-content {
  transform: translateY(0); opacity: 1;
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

@media (max-width: 600px) {
  .detail-content { flex-direction: column; text-align: center; }
  .detail-container.show { padding: 20px; }
}


/* ==========================================================================
   DYNAMISCHE LEUCHTFARBEN (AKTIV-ZUSTAND)
   ========================================================================== */

/* Zentrale Steuerung: Einmal definieren, überall nutzen */
[data-id="watchlist"] { --col: 255, 255, 255; }
[data-id="bronze"]    { --col: 205, 127, 50; }
[data-id="silber"]    { --col: 200, 200, 200; }
[data-id="gold"]      { --col: 255, 215, 0; }
[data-id="platin"]    { --col: 0, 217, 163; }
[data-id="like"]      { --col: 200, 200, 200; }
[data-id="superlike"] { --col: 255, 215, 0; }
[data-id="freundschaft"] { --col: 255, 0, 127; }
[data-id="profil"]    { --col: 168, 85, 247; }
[data-id="galerie"]   { --col: 20, 184, 166; }
[data-id="pause"]     { --col: 99, 102, 241; }
[data-id="favoriten"] { --col: 245, 158, 11; }
[data-id="weltkarte"] { --col: 13, 148, 136; }
[data-id="verschieben"] { --col: 190, 24, 74; }
[data-id="wartezimmer"] { --col: 220, 38, 38; }

/* Die Logik: Alle Karten erben denselben Effekt */
.tier-card.active-card .card-inner {
    border: 1px solid rgba(var(--col), 0.8);
    box-shadow: 0 0 25px rgba(var(--col), 0.5), inset 0 0 10px rgba(var(--col), 0.2);
    transform: scale(1.05) translateY(-5px);
}

/* ==========================================================================
   AUSKLAPPBARE ERKLÄRCONTAINER (DYNAMISCHE POPUPS)
   ========================================================================== */

.detail-container {
    /* Layout-Zentrierung */
    margin-left: auto;
    margin-right: auto;
    
    /* Maße */
    max-width: 850px;
    width: 90%; /* Nimmt 90% Breite, bleibt aber zentriert */
    
    /* Design */
    background: rgba(15, 15, 15, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    
    /* Animation & Hidden-State */
    max-height: 0;
    opacity: 0;
    padding: 0 35px;
    overflow: hidden;
    box-sizing: border-box;
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.detail-container.show {
    max-height: 1000px; opacity: 1; padding: 35px; margin: 25px 0;
    justify-self: center;
}

.detail-content {
    display: flex; align-items: center; gap: 45px;
    opacity: 0; transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s var(--curve);
}

.detail-content.fade-in { opacity: 1; transform: translateY(0); }

/* Scharfkantige Bildpräsentation */
.detail-left { flex: 0 0 130px; }
.detail-left img { 
    width: 130px; height: 130px; 
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.5)); 
}

/* Typografie-Schärfe */
.detail-right h2 {
    color: #fff; font-size: 1.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 2px;
    margin: 0 0 12px 0;
}

.detail-right p { color: #b3b3b3; line-height: 1.7; font-size: 1rem; margin: 0; }

/* Responsive Kompakt-Ansicht */
@media (max-width: 600px) {
    .detail-content { flex-direction: column; text-align: center; gap: 20px; }
    .detail-container.show { padding: 25px; }
}


/* ==========================================================================
   RESPONSIVE DESIGN (MOBILE ANPASSUNGEN)
   ========================================================================== */

@media (max-width: 600px) {
    .detail-content {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    .detail-container.show {
        max-height: 800px; /* Mehr Höhe für gestapelten Content auf Smartphones */
    }
    .detail-left img {
        width: 100px;
        height: 100px;
    }
}