/* 80er Neon / Synthwave Stil - nur System-/freie Fonts (kein Google Fonts) */
:root {
  --bg-dark: #0b0b16;
  --neon-pink: #ff2d95;
  --neon-cyan: #00f0ff;
  --neon-purple: #9b5cff;
  --muted: #b7c0d0;
  --card: rgba(255,255,255,0.04);
  --maxw: 980px;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; background:var(--bg-dark); color:var(--muted);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Hintergrund-Deko */
.background-deco { position:fixed; inset:0; pointer-events:none; z-index:0; overflow:hidden; }
.neon-grid { position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 10% 80%, rgba(155,92,255,0.08), transparent 10%),
    linear-gradient(180deg, rgba(255,45,149,0.06), transparent 40%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.95), rgba(0,0,0,0.2));
}
.synth-circle { position:absolute; width:700px; height:700px; right:-200px; top:-120px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(0,240,255,0.14), rgba(155,92,255,0.06) 40%, transparent 60%);
  filter: blur(30px); transform: rotate(-8deg);
}
.triangles { position:absolute; left:-120px; bottom:-60px; width:500px; height:500px;
  background:
    linear-gradient(135deg, rgba(255,45,149,0.06) 0 33%, transparent 33%),
    linear-gradient(225deg, rgba(155,92,255,0.04) 0 33%, transparent 33%);
  transform: rotate(12deg); filter: blur(8px);
}

/* Layout */
.container { position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:1.25rem; }

/* HERO mit Bühnenbild (JPG) – Neon bleibt satt und zentriert */
.hero { position:relative; width:100%; height:clamp(320px, 42vh, 520px); overflow:hidden; z-index:1; }
.hero-bg { 
  background-image: url('images/stage.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center 33%; /* zentriert, Fokus leicht nach oben */
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
/* Dezentes Bodengradient für Textlesbarkeit */
.hero-bg::after {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(11,11,22,0.0) 0%, rgba(11,11,22,0.15) 60%, rgba(11,11,22,0.28) 100%);
  z-index:1;
}
.hero-overlay { position:absolute; inset:0; z-index:2; display:flex; align-items:flex-end; padding:1.25rem 0; }
.hero-title { margin:0; color:var(--neon-pink); font-size:clamp(1.6rem, 3.2vw, 3rem);
  text-shadow: 0 2px 8px rgba(255,45,149,0.18), 0 0 18px rgba(0,240,255,0.06); letter-spacing:1px;
}
.hero-sub { margin:0.25rem 0 0 0; color:var(--neon-cyan); font-weight:700; font-size:clamp(0.9rem, 1.4vw, 1.1rem); }
.disclaimer { margin:0.5rem 0 0; display:inline-block; color:#ffe6f3; background:rgba(255,45,149,0.06);
  padding:0.5rem 0.75rem; border-radius:10px; font-size:0.9rem; border:1px solid rgba(255,45,149,0.06);
}

/* Karten */
.card { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.03); padding:1rem; margin-top:1rem; border-radius:12px;
  box-shadow:0 6px 30px rgba(11,11,22,0.5); backdrop-filter: blur(4px);
}

/* Texte */
h2 { margin:0 0 0.5rem 0; color:var(--neon-cyan); text-shadow:0 1px 6px rgba(0,240,255,0.06); }
h3 { margin:0.5rem 0 0.35rem 0; color:var(--neon-pink); }
p  { margin:0 0 0.75rem 0; color:var(--muted); line-height:1.45; }

/* Kaffeehaus-Bild (JPG) zentriert */
.center-img {
  display:block;
  max-width:100%;
  height:auto;
  margin: 0 auto;        /* horizontal zentriert */
  border-radius:12px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.5);
  object-fit: cover;
}
.photos .photo { margin:0; text-align:center; }
.photos .photo figcaption {
  margin-top:0.5rem; font-size:0.95rem; color:#e6e9f2;
  border-left:3px solid var(--neon-pink); padding-left:0.5rem; text-align:left;
}

/* Tracklist */
.tracklist { list-style:none; padding:0; margin:0; display:grid; gap:0.75rem; }
.track { padding:0.6rem; border-radius:8px; background: linear-gradient(90deg, rgba(155,92,255,0.025), transparent);
  display:flex; flex-direction:column; gap:0.5rem; border:1px solid rgba(255,255,255,0.02);
}
.track-meta { display:flex; justify-content:space-between; align-items:center; gap:0.75rem; color:#fff; font-weight:700; }
.title { font-size:1rem; color:var(--neon-pink); text-shadow:0 2px 8px rgba(255,45,149,0.08); }
.duration { color:var(--muted); font-weight:600; font-size:0.9rem; }
audio { width:100%; outline:none; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }

/* Footer */
.site-footer { text-align:center; padding:1.25rem 0; color:var(--muted); font-size:0.85rem; margin-top:1rem; }

/* Responsive */
@media (min-width:760px) { .tracklist { grid-template-columns: 1fr 1fr; gap:1rem; } }
@media (min-width:1100px){ .tracklist { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width:520px) {
  .hero { height: clamp(220px, 35vh, 300px); }
  .hero-overlay { align-items:center; text-align:center; padding:0.75rem; }
  .hero-title { font-size: clamp(1.4rem, 5vw, 2rem); }
}