/* CSS aller Seiten */

/* Variablen & Theme */
:root{
  --bg: rgba(18,18,20,0.6);
  --card: rgba(255,255,255,0.06);
  --text: #eaeef3;
  --muted: #bfc7d0;
  --accent: #7afcff;
  --glass: rgba(255,255,255,0.04);
  --radius: 14px;
  --blur: 12px;
  --link: #3b82f6; /* normales Blau */
  --link-bg: rgba(59,130,246,0.08);
  --link-hover: #2563eb;
}

/* Body */
body {
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(135deg, rgba(10,10,12,0.8), rgba(30,20,40,0.6));
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  transition: background 400ms ease, color 300ms ease;
  padding-bottom:120px;
}

/* Theme override classes (manuelle Auswahl) */
body.light {
  color: #0b1220;
  /* etwas dunklere Light-Variante */
  background: linear-gradient(135deg, #e6eef6, #dfe9f2);
  /* Karten etwas dunkler als Hintergrund für bessere Lesbarkeit */
  --card: rgba(0,0,0,0.08);
}

/* Dark mode: setze Hintergrund auf #2d2d2d */
body.dark {
  background: #2d2d2d;
  color: var(--text);
  --card: rgba(255,255,255,0.02);
  --glass: rgba(255,255,255,0.015);
  --blur: 10px;
}

/* Header
   --- Anpassung: Standardmäßig sichtbar. Animation nur wenn .reveal gesetzt ist. */
.site-header {
  padding:24px;
  max-width:1200px;
  margin:20px auto;
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  box-shadow: 0 8px 30px rgba(2,6,23,0.5);
  /* entfernte initial verstecken-Eigenschaften (opacity/transform) damit Header standardmäßig angezeigt wird */
}

.header-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
}
.logo { width:56px; height:56px; border-radius:12px; object-fit:cover; }
.banner { width:220px; height:56px; object-fit:cover; border-radius:10px; opacity:0.95; }

/* Navigation */
.main-nav { display:flex; align-items:center; gap:12px; }
.nav-list { list-style:none; display:flex; gap:10px; margin:0; padding:0; }
.nav-list a { color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; transition: transform 220ms, background 220ms; }
.nav-list a:hover { transform:translateY(-3px); background: rgba(255,255,255,0.03); }

.nav-actions { display:flex; gap:8px; align-items:center; }

.btn { padding:10px 16px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); cursor:pointer; text-decoration:none; color:var(--text); display:inline-block; transition: transform 180ms, box-shadow 180ms; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.btn.primary { font-size: 12px; background: linear-gradient(90deg,var(--accent), #9ef7ff); color:#022; font-weight:600; }
.btn.ghost { background: transparent; border:1px solid rgba(255,255,255,0.06); }

/* Danger button */
.btn.danger {
  background: #ff4d4f;
  color: black;
  border: 1px solid #ff4d4f;
}

body.light .btn.danger {
  background: #ff4d4f !important;
  color: black;
  border: 1px solid #ff4d4f;
}

body.dark .btn.danger {
  background: #ff4d4f;
  color: black;
  border: 1px solid #ff4d4f;
}

/* Header ghost button im Lightmode: gleiche dezente Optik wie Karten-Buttons (nur Farben/Borders, keine Größenänderung) */
body.light .site-header .nav-actions .btn.ghost {
  background: transparent;
  color: #071029;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: none;
}

/* Hover / Focus für Header-ghost im Lightmode (sichtbar, aber dezent) */
body.light .site-header .nav-actions .btn.ghost:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(16,24,40,0.06);
}
body.light .site-header .nav-actions .btn.ghost:focus {
  outline: 3px solid rgba(2,6,23,0.08);
  outline-offset: 3px;
}

/* Hero */
.header-hero { margin-top:18px; padding:18px; border-radius:12px; background: linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); }
.header-hero h1 { font-size:2.6rem; margin:0 0 8px; letter-spacing:-0.5px; }
.hero-sub { margin:0 0 14px; color:var(--muted); max-width:780px; }
.hero-actions { display:flex; gap:12px; }

/* Buttons */
.discord-glow {
  background: linear-gradient(90deg,#5865F2,#7A8BFF);
  color:white;
  box-shadow: 0 8px 30px rgba(88,101,242,0.25), inset 0 -2px 8px rgba(255,255,255,0.04);
  border: none;
}

/* Cards on homepage */
.container { max-width:1100px; margin:28px auto; padding:0 18px; }
.cards { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:16px; }
.card { padding:18px; border-radius:12px; background: var(--card); backdrop-filter: blur(8px); transition: transform 320ms, box-shadow 320ms; }
.card h2 { margin-top:0; }
.card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(2,6,23,0.45); }

/* Page headers */
.page-header { padding:40px 0 10px; }
.page { padding-bottom:40px; }

/* Footer
   --- Standardmäßig sichtbar; Animation nur wenn .reveal gesetzt ist (s. weiter unten) */
.site-footer {
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  padding:12px 20px;
  background: linear-gradient(180deg, rgba(0,0,0,0.88), rgba(0,0,0,0.82));
  color:var(--muted);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:40;
  border-top: 1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  /* entfernte initial verstecken-Eigenschaften (opacity/transform) damit Footer standardmäßig angezeigt wird */
}

/* kleine Anpassungen an Footer-Inhalt */
.footer-inner { max-width:1100px; width:100%; display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.footer-inner .socials { display:flex; gap:10px; align-items:center; }
.footer-inner .social { padding:8px 12px; border-radius:10px; background: rgba(255,255,255,0.02); color:var(--text); text-decoration:none; transition: transform 180ms; }
.footer-inner .social:hover { transform: translateY(-3px); }

/* Linkfarbe für rechtliche Footer-Links */
.footer-inner .legal {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  padding:6px;
    flex-wrap: wrap;
}

.footer-inner .legal .sep {
  color: var(--muted);
  padding:0 6px;
}

.legal-link {
  color: var(--link);
  background: var(--link-bg);
  padding:6px 10px;
  border-radius:999px;
  text-decoration:none;
  font-weight:600;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  border: 1px solid transparent;
  display:inline-block;
}

.legal-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.04));
  color: var(--link-hover);
}

.legal-link:focus {
  outline: 3px solid rgba(59,130,246,0.18);
  outline-offset: 3px;
  border-radius:999px;
}

/* Dark-mode tweak: ensure pill visible on pure black background */
body.dark .legal-link {
  background: rgba(59,130,246,0.07);
  color: var(--link);
}
body.light .legal-link {
  background: rgba(30,64,175,0.06);
  color: var(--link);
}

/* Rules list */
.rules { margin-top:12px; color: hsl(211.8, 15.3%, 50%); }

/* Animations */
@keyframes floatUp { from { transform: translateY(8px); opacity:0 } to { transform: translateY(0); opacity:1 } }
.animate-fade { animation: floatUp 700ms ease both; }
.animate-raise { transform: translateY(0); animation: floatUp 600ms cubic-bezier(.2,.9,.2,1) both; }
.animate-raise.delay { animation-delay:120ms; }
.animate-raise.delay-2 { animation-delay:240ms; }

/* Mobile */
.nav-toggle { display:none; background:transparent; border:none; color:var(--text); font-size:20px; cursor:pointer; }
@media (max-width:900px) {
  .nav-list { z-index: 1000000000000; display:none; position:absolute; top:86px; right:18px; background:rgba(66, 66, 66, 0.9); padding:12px; border-radius:12px; min-width:200px; box-shadow: 0 12px 30px rgba(0,0,0,0.4); flex-direction:column; }
  .nav-list.open { display:flex; animation: floatUp 260ms ease both; }
  .nav-toggle { display:block; }
  .main-nav { gap:8px; align-items:center; }
  .banner { display:none; }
  .header-top { align-items:flex-start; }
  .site-footer { position:static; margin-top:20px; border-radius:12px; }
}

/* small tweaks */
small a { color:var(--accent); }

/* Start-Hero (großer, breiter Banner nur auf der Startseite) */
.start-hero {
  max-width:1200px;
  margin:20px auto 8px;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 650ms cubic-bezier(.2,.9,.2,1);
}
.hero-banner {
  width:100%;
  height:360px;
  object-fit:cover;
  display:block;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.2,.9,.2,1);
}
.start-hero:hover .hero-banner { transform: scale(1.02); }

.hero-content {
  position:absolute;
  left:24px;
  bottom:24px;
  color:var(--text);
  text-shadow: 0 6px 20px rgba(0,0,0,0.6);
  max-width:720px;
  padding:12px;
  border-radius:12px;
  backdrop-filter: blur(6px);
  background: linear-gradient(90deg, rgba(0,0,0,0.25), rgba(0,0,0,0.12));
}
body.light .hero-content {
  background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));
  color: #031025;
}

/* Responsive: Banner kleiner auf Handys, hero-content mittig */
@media (max-width:900px) {
  .hero-content { left:12px; right:12px; bottom:12px; padding:10px; }
}

/* Banner-Text (ersetzt das große Bild im Header) */
.banner-text {
  display:inline-block;
  font-weight:700;
  font-size:1.15rem;
  padding:8px 14px;
  border-radius:10px;
  color:var(--text);
  background: transparent;      /* keine Füllfarbe */
  backdrop-filter: none;
  box-shadow: none;             /* keine Umrandung / Schatten */
  letter-spacing: 0.6px;
}

/* ensure legacy .banner image isn't visible in header area (optional) */
.header-top .banner img.banner { display:none; }

/* Farb-Anpassungen: in Lightmode Header-Titel + Kategorien weiß halten */
body.light .banner-text {
  color: #000; /* geändert: schwarz für "VRXperience" im Header */
}

/* Nav-Links im Lightmode (bleibt dunkel) */
body.light .nav-list a {
  color: #000; /* geändert: Kategorien/Links im Header schwarz im Lightmode */
}

/* Sicherstellen: Header-Titel + Kategorien im Lightmode dunkel (außer auf Startseite, wo .site-header.reveal weiß sein soll) */
body.light .site-header:not(.reveal) .banner-text,
body.light .site-header:not(.reveal) .nav-list a {
  color: #000; /* geändert: explizit schwarz, wenn Header nicht als .reveal markiert ist */
}

/* Mobile nav-toggle lesbar im Lightmode */
body.light .nav-toggle {
  color: #000; /* geändert: Menü-Icon schwarz im Lightmode */
}

/* Wenn Header als "reveal" markiert ist (Startseite), mache Titel/Kategorien weiß
   (nur wenn NICHT im Lightmode — sonst sollen sie schwarz bleiben) */
html:not(.light) .site-header.reveal .nav-list a,
body:not(.light) .site-header.reveal .nav-list a,
html:not(.light) .site-header.reveal .banner-text,
body:not(.light) .site-header.reveal .banner-text {
  color: #ffffff !important;
}

/* Karten (Events/Musik/Livestream) im Lightmode dunkler als Seitenhintergrund */
body.light .card {
  background: var(--card);
  /* leichte Kontur für Tiefe */
  border: 1px solid rgba(0,0,0,0.06);
  color: #071029; /* Text in Karten dunkler im Lightmode */
}

/* Buttons in Karten im Lightmode: bessere Lesbarkeit / Kontrast */
body.light .card .btn {
  color: #071029;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}
body.light .card .btn.ghost {
  background: transparent;
  color: #071029;
  border: 1px solid rgba(0,0,0,0.08);
}
body.light .card .btn.primary {
  /* primärer Knopf sichtbar, dunkleres Blau-Gradient */
  background: linear-gradient(90deg,#2d6df6,#6fcfff);
  color: #04203a;
  border: none;
}

/* Header-Login im Lightmode: gleiche Farben wie .card .btn.primary (nur Farben, keine Größenänderung) */
body.light .site-header .nav-actions .btn.primary,
body.light .nav-actions .btn.primary {
  background: linear-gradient(90deg,#2d6df6,#6fcfff);
  color: #04203a;
  border: none;
  /* optional: gleiche leichte Box-Shadow wie Karten-Primary (passt optisch) */
  box-shadow: 0 6px 18px rgba(16,24,40,0.06);
}

/* Achte darauf, dass der Start-H1 in Lightmode weiß bleibt (wie gewünscht) */
body.light .start-hero h1,
body.light .start-hero .animate-fade {
  color: #ffffff;
  text-shadow: 0 6px 20px rgba(0,0,0,0.35);
}

/* Falls Theme-Button im Header die Lesbarkeit verliert: sicherstellen, dass .btn.glass sichtbar bleibt */
body.light .btn.glass {
  color: #071029; /* bleibt dunkler für Buttons im Lightmode */
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
}
body.dark .btn.glass {
  color: var(--text);
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}

/* focus state for accessibility */
.btn.glass:focus {
  outline: 3px solid rgba(59,130,246,0.14);
  outline-offset: 3px;
  border-radius: 12px;
}

/* --- Entrance animations: nur aktiv wenn .reveal gesetzt --- */

/* Header reveal state (nur wenn .site-header.reveal vorhanden) */
.site-header.reveal {
  transform: translateY(-18px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.22,.9,.2,1), opacity 500ms ease;
}
.site-header.reveal.enter {
  transform: translateY(0);
  opacity: 1;
}

/* Footer reveal state (nur wenn .site-footer.reveal vorhanden) */
.site-footer.reveal {
  transform: translateY(18px);
  opacity: 0;
  transition: transform 700ms cubic-bezier(.22,.9,.2,1), opacity 500ms ease;
}
.site-footer.reveal.enter {
  transform: translateY(0);
  opacity: 1;
}

/* Start-hero container slight overall fade (für Startseite weiterhin unverändert) */
.start-hero {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms ease, transform 650ms cubic-bezier(.2,.9,.2,1);
}
.start-hero.enter {
  opacity: 1;
  transform: translateY(0);
}

/* Individual reveal items inside hero: start offset + transparent; on .enter they move to position */
/* Default state */
.reveal-item {
  opacity: 0;
  transform: translateY(12px) translateX(0);
  transition: transform 620ms cubic-bezier(.2,.9,.2,1), opacity 520ms ease;
  will-change: transform, opacity;
}
/* When each item gets its 'enter' class, it animates in */
.reveal-item.enter {
  opacity: 1;
  transform: translateY(0) translateX(0);
}

/* small horizontal shift variant for banner for more dynamism */
.hero-banner.reveal-item {
  transform: translateY(14px) translateX(-6px) scale(1);
  transition: transform 760ms cubic-bezier(.2,.9,.2,1), opacity 560ms ease;
}
.hero-banner.reveal-item.enter {
  transform: translateY(0) translateX(0) scale(1.02);
  opacity: 1;
}

/* Slightly different timing when the parent .start-hero has enter (fallback) */
.start-hero.enter .reveal-item { /* if using parent enter, still allow per-item control */
  /* no-op: items individually get .enter via JS for precise staggering */
}

/* accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .site-header, .site-footer, .start-hero, .reveal-item, .hero-banner {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* CSS */
/* Fix: Header positionieren, damit die mobile Nav über dem Start-Hero liegt */
.site-header {
    position: relative; /* nötig, damit z-index wirkt */
    z-index: 9999;      /* größer als das Stacking-Context-Level des Start-Hero */
}

/* mobile Nav: sicherstellen, dass sie oberhalb angezeigt wird */
@media (max-width:900px) {
    .nav-list {
        position: absolute; /* oder: position: fixed; falls gewünscht, außerhalb des Headers */
        z-index: 10000;
    }
}

/* Cookie Consent Overlay & Modal */
.cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45); /* leicht dunkler Div, verhindert Klicks auf Hintergrund */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 120000; /* über Header/Footer */
}

.cookie-modal {
  max-width: 820px;
  width: 100%;
  border-radius: 14px;
  padding: 20px;
  box-sizing: border-box;
  background: var(--card);
  color: inherit;
  backdrop-filter: blur(var(--blur));
  box-shadow: 0 20px 60px rgba(2,6,23,0.6);
  outline: none;
}

/* Modal-Inhalt */
.cookie-modal h2 { margin: 0 0 8px 0; font-size:1.25rem; }
.cookie-modal p { color: var(--muted); margin:0 0 12px 0; line-height:1.45; }

/* Checkbox-Look (klein und dezent) */
.cookie-modal input[type="checkbox"] { width:18px; height:18px; accent-color: var(--accent); }

/* Buttons innerhalb Modal */
.cookie-modal .btn { padding:8px 14px; border-radius:10px; font-size:0.95rem; }
.cookie-modal .btn.ghost { border:1px solid rgba(255,255,255,0.06); background: transparent; }
.cookie-modal .btn.primary { background: linear-gradient(90deg,var(--accent), #9ef7ff); color:#022; font-weight:600; }

/* Responsiv: auf kleinen Bildschirmen Modal-Spacing anpassen */
@media (max-width:600px) {
  .cookie-modal { padding:16px; border-radius:12px; }
  .cookie-modal .cookie-controls { flex-direction:column; align-items:flex-start; gap:8px; }
  .cookie-modal .cookie-controls > div { margin-left:0; width:100%; display:flex; justify-content:stretch; gap:8px; }
  .cookie-modal .cookie-controls button { flex:1; }
}

/* Webmaster Logo (optional, falls mehrfach verwendet) */
.impressum-webmaster-logo {
  width:48px;
  height:48px;
  border-radius:12px;
  object-fit:cover;
}