/* =========================================================
   (2) THEME-BASELINE – Variablen & neutrale Komponenten
   Fügt CSS-Variablen + Standard-Styles hinzu, damit
   app/themes/classic.css & neon.css die Farben per Vars
   überschreiben können.
   ========================================================= */

:root{
  /* Grundfarben */
  --bg:            #0b0f14;
  --text:          #e8eef6;
  --muted:         #9fb2c3;
  --panel:         #0f141a;
  --panel-soft:    rgba(255,255,255,.03);
  --border:        rgba(255,255,255,.12);
  --border-soft:   rgba(255,255,255,.09);

  /* Akzente */
  --primary:       #5cc8ff;
  --primary-2:     #338bd1;
  --primary-contrast:#04121b;
  --accent:        #79ffa8;
  --warning:       #ffbf69;
  --danger:        #ff8f8f;
  --violet:        #c9b6ff;

  /* Sonstiges */
  --radius:        12px;
  --radius-lg:     16px;
  --shadow:        0 10px 30px rgba(0,0,0,.35);
  --shadow-soft:   0 6px 20px rgba(0,0,0,.25);
}

/* Basis */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}

.muted{color:var(--muted)}
.container{width:min(1200px,94%);margin:0 auto}

/* Header/Nav (neutral, farb-agnostisch) */
.site-header{position:relative;z-index:5}
.site-header .nav{
  display:flex;align-items:center;gap:16px;padding:10px 0;
  border-bottom:1px solid var(--border);
}
.site-header .nav-left a,
.site-header .nav-right a{
  display:inline-block;padding:8px 10px;border-radius:10px;color:var(--text);
}
.site-header .nav-left a:hover,
.site-header .nav-right a:hover{background:rgba(255,255,255,.08)}
.site-header .nav-left a.active{background:rgba(255,255,255,.12)}

/* Buttons */
.btn{
  display:inline-block; padding:10px 12px; font-weight:700;
  border-radius:10px; border:1px solid var(--border); color:var(--text);
  background:transparent; cursor:pointer
}
.btn:hover{background:rgba(255,255,255,.06)}
.btn.primary{
  background:var(--primary); border-color:transparent; color:var(--primary-contrast);
  box-shadow:var(--shadow-soft)
}
.btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn.ghost{background:transparent;border-color:var(--border-soft);color:var(--text)}
.btn.ghost:hover{background:rgba(255,255,255,.06)}
.btn.danger{background:var(--danger);border-color:transparent;color:#111}

/* Inputs */
input,select,textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,.04); color:var(--text); outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--primary)}

/* Karten & Tabellen */
.card{
  background:linear-gradient(180deg, var(--panel-soft), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px;
  backdrop-filter:blur(8px)
}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);text-align:left}
.table tr:hover td{background:rgba(255,255,255,.03)}
.right{text-align:right}

/* Chips/Badges */
.badge{
  display:inline-block;padding:4px 8px;border-radius:999px;
  background:rgba(255,255,255,.12); color:var(--text); font-size:.82rem
}
.status-chip{display:inline-block;padding:4px 9px;border-radius:999px;font-size:.8rem}
.status-chip.paid{background:var(--accent);color:#04121b}
.status-chip.pending{background:var(--warning);color:#111}
.status-chip.cancelled{background:var(--danger);color:#111}
.status-chip.refunded{background:var(--violet);color:#111}

/* Hero / Banner (Startseite) */
.hero .cta-group{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.hero-banner{margin:18px 0 0}
.hero-banner img{
  display:block;margin:0 auto;width:100%;max-height:420px;object-fit:cover;
  border-radius:16px;border:1px solid var(--border-soft); box-shadow:var(--shadow)
}
.hero-card{margin:18px 0 0;border-radius:16px;border:1px solid var(--border-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  height:220px; box-shadow:var(--shadow)
}
.hero-card-inner{width:100%;height:100%;border-radius:inherit}

/* Event-Karten (Home/Listing) */
.events-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.events-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.events-grid{grid-template-columns:1fr}}
.event-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.event-thumb{width:100%;height:160px;object-fit:cover;display:block;background:#0e141b}
.event-body{padding:14px}
.event-meta{color:var(--muted);font-size:.95rem;margin-bottom:8px}
.price{font-weight:700;margin:8px 0 10px}

/* Footer */
.site-footer{margin-top:24px;border-top:1px solid var(--border)}
.site-footer .footer-grid{display:flex;justify-content:space-between;gap:18px;padding:16px 0;align-items:flex-start;flex-wrap:wrap}

/* Theme-Toggle (Icon/Link) */
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;border:1px solid var(--border)}
.theme-toggle:hover{background:rgba(255,255,255,.08)}