@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Playfair+Display:wght@500;600;700&display=swap');

:root {
  /* Ultra Premium Dark - VIP Club */
  --vc-bg: #070707;
  --vc-surface: #121212;
  --vc-surface-2: #1C1C1C;
  --vc-border: rgba(212, 175, 55, 0.15);
  --vc-border-strong: rgba(212, 175, 55, 0.35);

  --vc-text: #F8F7F2;
  --vc-text-muted: #9E9C8F;
  --vc-text-dim: #605E54;

  /* Gold & Champagner */
  --vc-rose: #D4AF37; 
  --vc-rose-2: #F3E5AB;
  --vc-rose-ink: #0A0A0A;

  --vc-success: #2B7A4B;
  --vc-warning: #C5A059;
  --vc-danger: #8B0000;

  --vc-overlay: rgba(0,0,0,0.85);
  --vc-glass: rgba(10, 10, 10, 0.75);

  --vc-grad-rose: linear-gradient(135deg, #E6C25E 0%, #D4AF37 50%, #B8860B 100%);
  
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;

  --sh-xs: 0 4px 20px rgba(0,0,0,0.5);
  --sh-sm: 0 8px 30px rgba(0,0,0,0.6);
  --sh-md: 0 16px 40px rgba(0,0,0,0.8);
  --sh-glow-rose: 0 4px 24px rgba(212, 175, 55, 0.2);
  --sh-glow-danger: 0 8px 24px rgba(139, 0, 0, 0.3);

  --t: 250ms;

  /* 🎨 MISSION 2026: Globale Design Variablen (Für Hell- & Dunkelmodus) */
  --bg-body: #FDFDFB; /* Hell */
  --text-main: #1C1C1C; /* Dunkel */
  --bg-dropdown: rgba(255, 255, 255, 0.85); /* Transparentes Glass */
  --shadow-color: rgba(0, 0, 0, 0.08);
  --btn-ghost-bg: rgba(0, 0, 0, 0.05); /* Hellgrau für nicht aktive Tabs/Input */
  --btn-ghost-hover: rgba(0, 0, 0, 0.08);
}

/* Automatische Umschaltung für VIP Dark Mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-body: var(--vc-bg);
    --text-main: var(--vc-text);
    --bg-dropdown: var(--vc-glass);
    --shadow-color: rgba(0, 0, 0, 0.8);
    --btn-ghost-bg: var(--vc-surface-2);
    --btn-ghost-hover: #2A2A2A;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  background: var(--bg-body);
  color: var(--text-main);
  letter-spacing: -0.01em;
  line-height: 1.6;
  position: relative;
  overflow-x: hidden;
}

/* DEZENTE HINTERGRUND-ANIMATION (BOKEH EFFEKT) */
body::before,
body::after {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  width: 70vmax;
  height: 70vmax;
  border-radius: 50%;
  filter: blur(100px);
  z-index: -1;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  opacity: 0.15;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

body::before {
  background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, transparent 60%);
  animation-name: floatGold;
  animation-duration: 25s;
  top: 20%; left: 30%;
}

body::after {
  background: radial-gradient(circle, rgba(243, 229, 171, 0.6) 0%, transparent 60%);
  animation-name: floatChampagne;
  animation-duration: 35s;
  top: 80%; left: 70%;
}

@keyframes floatGold {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50% { transform: translate(20%, 30%) scale(1.2) rotate(10deg); }
}

@keyframes floatChampagne {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-30%, -40%) scale(0.9); }
}

a { color: inherit; text-decoration: none; transition: color var(--t); }
img { max-width: 100%; display: block; }

/* Typografie */
.h, h1, h2, h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600; letter-spacing: 0.02em; margin: 0 0 12px; 
  color: var(--text-main);
  line-height: 1.3;
}
.h.lg { font-size: 42px; } .h.md { font-size: 28px; }
.small { font-size: 14px; color: var(--text-muted, var(--vc-text-muted)); }
.muted { color: var(--text-muted, var(--vc-text-muted)); }
p { margin-top: 0; margin-bottom: 16px; font-size: 16px; }

/* Navbar */
.vc-top {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-dropdown);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-color, var(--vc-border));
}
.vc-wrap {
  max-width: 1100px; margin: 0 auto; padding: 16px 20px;
  display: flex; align-items: center; gap: 16px;
}
.vc-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: 'Playfair Display', serif; font-weight: 700; font-size: 24px;
  color: var(--vc-rose); letter-spacing: 0.05em; text-transform: uppercase;
}
.vc-sp { flex: 1; }
.vc-nav { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.vc-main, .container { max-width: 1100px; margin: 0 auto; padding: 40px 20px 80px; position: relative; z-index: 1; }

/* Layout & Cards */
.grid { display: grid; gap: 24px; }
.row { display: flex; gap: 16px; flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 240px; }
.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}

.card {
  background: var(--bg-dropdown);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-color, var(--vc-border)); border-radius: var(--r-xl);
  padding: 32px; box-shadow: 0 10px 30px var(--shadow-color);
  position: relative; z-index: 2; 
}
.card.slim { padding: 24px; border-radius: var(--r-lg); }
.card.hover:hover {
  transform: translateY(-3px); border-color: var(--border-color, var(--vc-border-strong));
  box-shadow: var(--sh-glow-rose); transition: all var(--t) ease;
}
.hr { height: 1px; background: var(--border-color, var(--vc-border)); margin: 32px 0; border: none; }


/* ==========================================================================
   🎨 MISSION 2026: GLOBALE NAVIGATION TABS (Profil, Galerie, Auszahlungen)
   ========================================================================== */
.profile-tabs { 
    display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; 
}
.profile-tab {
    padding: 12px 24px; font-weight: 700; font-size: 15px; border-radius: 30px; text-decoration: none;
    display: flex; align-items: center; gap: 8px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.profile-tab.active { 
    background: var(--text-main); color: var(--bg-body); 
    box-shadow: 0 4px 15px var(--shadow-color); transform: translateY(-2px); 
}
.profile-tab.inactive { 
    background: var(--btn-ghost-bg); color: var(--text-muted); 
    border: 1px solid var(--border-color); 
}
.profile-tab.inactive:hover { 
    background: var(--btn-ghost-hover); color: var(--text-main); border-color: var(--text-muted);
}
/* ========================================================================== */


/* Inputs & Buttons - HELLMODUS FIX! */
label { display: block; font-weight: 500; margin-bottom: 8px; font-size: 16px; color: var(--text-muted, var(--vc-text-muted)); }

.input, input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea, select {
  width: 100%; padding: 16px 20px; border-radius: var(--r-md);
  background: var(--btn-ghost-bg, var(--vc-surface-2)); 
  border: 1px solid var(--border-color, var(--vc-border));
  color: var(--text-main, var(--vc-text)); 
  font-family: 'Inter', sans-serif; font-size: 16px; outline: none; transition: all var(--t);
}
.input:focus, textarea:focus, select:focus {
  background: transparent; 
  border-color: var(--vc-rose); 
  box-shadow: 0 0 0 1px var(--vc-rose);
}
::placeholder { color: var(--text-muted, var(--vc-text-dim)); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; padding: 14px 28px; border-radius: 999px;
  border: 1px solid transparent; 
  background: var(--btn-ghost-bg, var(--vc-surface-2));
  color: var(--text-main, var(--vc-text)); 
  font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; transition: all var(--t);
}
.btn:hover { background: var(--btn-ghost-hover, #2A2A2A); transform: translateY(-1px); }
.btn.primary {
  background: var(--vc-grad-rose); color: var(--vc-rose-ink); font-weight: 700; box-shadow: var(--sh-glow-rose);
}
.btn.primary:hover { filter: brightness(1.15); box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4); }
.btn.danger { background: rgba(139,0,0,0.1); color: #FF4F5A; border: 1px solid rgba(139,0,0,0.3); }
.btn.ghost { background: transparent; border: 1px solid var(--border-color, var(--vc-border)); color: var(--text-muted, var(--vc-text-muted)); }
.btn.ghost:hover { border-color: var(--text-main, var(--vc-text)); color: var(--text-main, var(--vc-text)); }
.actions { display: flex; gap: 12px; flex-wrap: wrap; }

.flash { padding: 16px 20px; border-radius: var(--r-md); font-weight: 500; margin-bottom: 24px; border: 1px solid transparent; font-size: 16px; }
.flash.ok { background: rgba(43, 122, 75, 0.1); color: #4ade80; border-color: rgba(43, 122, 75, 0.3); }
.flash.err { background: rgba(139, 0, 0, 0.1); color: #f87171; border-color: rgba(139, 0, 0, 0.3); }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: rgba(212, 175, 55, 0.1); color: var(--vc-rose); font-weight: 600; font-size: 14px; border: 1px solid var(--border-color, var(--vc-border)); }
.vc-foot { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--border-color, var(--vc-border)); color: var(--text-muted, var(--vc-text-dim)); font-size: 16px; text-align: center; }

/* EU Cookie Consent Banner Desktop */
.cookie-banner {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  width: calc(100% - 48px); max-width: 800px; background: var(--bg-dropdown, var(--vc-surface));
  border: 1px solid var(--border-color, var(--vc-border-strong)); border-radius: var(--r-lg);
  box-shadow: var(--sh-md), var(--sh-glow-rose); padding: 24px 32px; z-index: 9999;
  display: flex; flex-direction: column; gap: 20px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.cookie-content h3 { margin-top: 0; margin-bottom: 8px; font-size: 20px; color: var(--vc-rose); }
.cookie-content p { margin: 0; font-size: 16px; color: var(--text-muted, var(--vc-text-muted)); line-height: 1.6; }
.cookie-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.cookie-actions .btn { white-space: nowrap; }

@media (min-width: 768px) {
  .cookie-banner { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookie-content { flex: 1; padding-right: 20px; }
  .cookie-actions { flex-shrink: 0; }
}

/* ==========================================================================
   MOBILE OPTIMIZATIONS (Responsive Design für Smartphones)
   ========================================================================== */
@media (max-width: 768px) {
  /* Navigation Top-Bar */
  .vc-wrap { padding: 12px 15px; flex-direction: column; gap: 12px; }
  .vc-brand { justify-content: center; width: 100%; font-size: 22px; }
  .vc-nav { justify-content: center; width: 100%; gap: 6px; }
  /* Buttons flexibel verteilen auf Mobile */
  .vc-nav .btn { padding: 10px 12px; font-size: 14px; flex: 1; min-width: calc(33% - 10px); text-align: center; justify-content: center; }
  .vc-nav form { display: flex; flex: 1; min-width: calc(33% - 10px); margin: 0; }
  .vc-nav form .btn { width: 100%; }

  /* VIP Begrüßungs-Leiste */
  .user-greeting-banner { flex-direction: column; justify-content: center; text-align: center; gap: 15px; padding: 20px 15px; }
  .user-greeting-content { flex-direction: column; gap: 10px; }
  .user-greeting-avatar { width: 70px; height: 70px; }
  .user-countdown { width: 100%; justify-content: center; font-size: 16px; padding: 10px; }

  /* Hauptbereiche & Karten */
  .vc-main, .container { padding: 15px 10px 60px; width: 100%; }
  .card { padding: 20px 15px; border-radius: var(--r-md); }
  .card.slim { padding: 15px; border-radius: var(--r-sm); }
  .hr { margin: 20px 0; }
  
  /* Typografie Skalierung */
  .h.lg, h1 { font-size: 28px !important; }
  .h.md, h2 { font-size: 22px !important; }
  h3 { font-size: 20px !important; }
  p { font-size: 16px; line-height: 1.6; }

  /* Input Zoom-Fix für iPhone/iOS (Muss zwingend 16px sein) */
  .input, input[type="text"], input[type="number"], input[type="password"], input[type="email"], textarea, select {
    padding: 14px 15px; 
    font-size: 16px !important; 
  }

  /* Call to Action Buttons */
  .btn { padding: 14px 20px; font-size: 16px; }
  .actions .btn { width: 100%; }
  
  /* Flex-Grids auf Spalten-Layout zwingen */
  .grid { gap: 15px; }
  .row { flex-direction: column; gap: 15px; }
  .flex-1 { width: 100%; min-width: 100%; }

  /* Mobile Cookie & Push Banner */
  .cookie-banner, #cookie-consent-banner, #push-consent-banner { 
    bottom: 10px !important; 
    width: calc(100% - 20px) !important; 
    padding: 20px 15px !important; 
    gap: 15px; 
    border-radius: var(--r-md); 
  }
  .cookie-actions { flex-direction: column; width: 100%; }
  .cookie-actions .btn, .btn-cookie-primary, .btn-cookie-secondary { width: 100%; justify-content: center; }
}