/* System-Fonts, keine Downloads */
:root{
  --bg: #05040a;
  --fg: #f2f7ff;
  --muted: #b6bfd0;

  --pink: #ff2bd6;     /* Neon-Pink */
  --yellow: #ffe81f;   /* Acid-Gelb */
  --cyan: #00e5ff;     /* Elektro-Cyan */
  --violet: #7a4dff;   /* Neon-Violett */

  --card: #0c0b12;
  --border: #232236;
  --radius: 16px;
  --space: 20px;
  --maxw: 980px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}
a{color: var(--pink); text-decoration: none}
a:hover{text-decoration: underline}
.muted{color: var(--muted)}
.wrap{max-width: var(--maxw); margin:0 auto; padding:0 var(--space)}

/* Animierter Neon-Verlauf + sanfter Grid-Overlay */
.bg{
  position: fixed; inset:0; z-index:-2;
  background: linear-gradient(180deg, #0a0713 0%, #0b0e23 35%, #0a0713 70%) no-repeat;
  animation: hue 5s linear infinite;
  will-change: filter;
}
.bg::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(800px 400px at 15% 20%, rgba(255,43,214,0.20), transparent 55%),
    radial-gradient(700px 350px at 85% 80%, rgba(0,229,255,0.18), transparent 60%),
    radial-gradient(600px 300px at 50% 120%, rgba(255,232,31,0.16), transparent 60%);
}
.bg::before{
  content:""; position:absolute; inset:0; opacity:0.07;
  background-image:
    linear-gradient(to right, #fff 1px, transparent 1px),
    linear-gradient(to bottom, #fff 1px, transparent 1px);
  background-size: 60px 60px;
}
@keyframes hue {
  0%{ filter: hue-rotate(0deg) }
  100%{ filter: hue-rotate(360deg) }
}

/* Header */
.site-header{
  position: sticky; top:0; z-index:10;
  background: rgba(10,20,22,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.head-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.brand{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:900; letter-spacing:0.8px; text-transform:uppercase; color:var(--fg);
  text-shadow: 0 0 8px rgba(255,232,31,0.45), 0 0 18px rgba(255,43,214,0.35);
}
.logo{
  width:30px; height:30px; border-radius:8px; object-fit:cover;
  border: 1px solid var(--border);
  box-shadow: 0 0 10px rgba(255,43,214,0.6), 0 0 12px rgba(0,229,255,0.4);
  background:#000;
}
.nav{display:flex; gap:14px; font-weight:800}
.nav a{color:var(--yellow)}
.nav a:hover{color:var(--pink)}

/* Hero */
.hero{padding: 52px 0 28px}
.neon-title{
  margin:0 0 10px;
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 900; letter-spacing: 1px;
  color: var(--fg);
  text-shadow:
    0 0 7px rgba(255,232,31,0.55),
    0 0 16px rgba(255,43,214,0.45),
    0 0 26px rgba(0,229,255,0.35),
    0 0 36px rgba(122,77,255,0.35);
}
.lead{margin:0 0 22px; color:var(--muted)}
.actions .btn + .btn{margin-left:10px}

/* Wiggle-Interaktion */
@keyframes wiggle {
  0% { transform: rotate(0deg) }
  25%{ transform: rotate(2deg) }
  50%{ transform: rotate(0deg) }
  75%{ transform: rotate(-2deg) }
  100%{ transform: rotate(0deg) }
}
.wiggle:hover, .wiggle:focus{
  animation: wiggle 220ms ease-in-out;
  text-decoration: none;
  will-change: transform;
}

/* Buttons */
.btn{
  display:inline-block; padding:11px 16px; border-radius: 14px;
  font-weight:900; letter-spacing:0.8px; text-transform:uppercase;
}
.btn-neon{
  color:#0a0911;
  background: linear-gradient(90deg, var(--pink), var(--yellow) 55%, var(--cyan));
  border: 0;
  box-shadow:
    0 0 12px rgba(255,43,214,0.55),
    0 0 22px rgba(255,232,31,0.50),
    0 0 30px rgba(0,229,255,0.40);
}
.btn-outline{
  color: var(--pink);
  border: 2px solid var(--pink);
  background: transparent;
  box-shadow: 0 0 12px rgba(255,43,214,0.45);
}

/* Sections / Cards */
.section{padding: 30px 0}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin: 8px 0 12px}
.section-title{
  margin:0; font-size:22px; font-weight:900; letter-spacing:0.8px;
  color: var(--yellow);
  text-shadow: 0 0 10px rgba(255,232,31,0.6);
}
.sub{color:var(--muted)}

.grid{display:grid; gap:20px}
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--border);
  position: relative;
  transition: transform 120ms ease;
}
.neon-card::before{
  content:""; position:absolute; inset: -1px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, rgba(255,43,214,0.95), rgba(255,232,31,0.95) 55%, rgba(0,229,255,0.95));
  filter: blur(14px); opacity: 0.25; z-index: -1;
}
.hover-tilt:hover{ transform: translateY(-2px) scale(1.01) }
.card h3{margin:0 0 6px; color: var(--fg); font-weight:900}
.card p{margin:0 0 10px; color: var(--muted)}
.link{color: var(--cyan)}
.link:hover{color: var(--pink)}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  margin-top:40px; padding:16px 0;
  color: var(--muted); text-align:center; font-size:14px;
}

/* Bewegungsreduktion respektieren: global */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important }
}

/* ========================================================================= */
/* SCHALLPLATTEN-ANIMATION & HERO-HEADER */
/* ========================================================================= */

/* Animation Keyframes für die Drehung */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Header-Bereich, der die Platte enthält */
.hero-record-header {
  width: 100%;
  padding-top: 50px; 
  padding-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-bottom: 2px solid var(--violet);
  box-shadow: 0 4px 15px rgba(122, 77, 255, 0.3); 
}

/* Container für die Platte (für Schatten/Glow) */
.record-container {
  width: 180px;
  height: 180px;
  margin-bottom: 15px;
  position: relative;
  border-radius: 50%; 
  box-shadow: 0 0 15px rgba(0, 229, 255, 0.4),
              0 0 25px rgba(255, 43, 214, 0.25);
}

/* Die drehende Schallplatte (Bild-Element) */
/* WICHTIG: Erfordert ein Bild unter assets/platte.png */
.record {
  width: 100%;
  height: 100%;
  background-image: url('assets/platte.png');
  background-size: cover;
  background-position: center;
  border-radius: 50%;
  animation: spin 5s linear infinite;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  will-change: transform;
}

/* Das zentrale Label / Loch (rein CSS) */
.record-center {
  position: absolute;
  width: 35px;
  height: 35px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--card);
  border-radius: 50%;
  border: 3px solid var(--yellow); 
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 232, 31, 0.5);
}

/* Titel im Platten-Header */
.record-title {
  margin: 0;
  color: var(--cyan);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 
    0 0 10px rgba(0, 229, 255, 0.6), 
    0 0 20px rgba(0, 229, 255, 0.4);
}

/* Lead-Text unter dem Titel */
.hero-record-header .lead {
  color: var(--muted);
  margin-top: 10px;
  font-size: 1.1em;
}

/* Bewegung bei reduzierter Bewegung deaktivieren (spezifisch) */
@media (prefers-reduced-motion: reduce){
  .record {
    animation: none !important;
  }
}