/* ============================================================
   Denis Bergemann – Sprecher | Custom Styles
   Ergaenzt Tailwind (Play CDN). Edel, dunkel, Gold-Akzent.
   ============================================================ */

:root {
  --gold: #c9a24b;
  --gold-soft: #e4c877;
  --ink: #0b0b0d;
  --ink-2: #131317;
  --ink-3: #1c1c22;
  --paper: #f5f2ea;
  --muted: #9a9aa2;
}

* { -webkit-font-smoothing: antialiased; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: #e9e9ee;
  font-family: 'Inter', system-ui, sans-serif;
  overflow-x: hidden;
}

.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }

/* ---------- Gold-Text / Trennlinien ---------- */
.text-gold { color: var(--gold); }
.gold-gradient {
  background: linear-gradient(90deg, var(--gold-soft), var(--gold) 55%, #a97f2e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.divider {
  width: 68px; height: 2px; border: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 1.25rem 0;
}
.divider.center { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 999px;
  font-weight: 600; letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-gold {
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #1a1409;
  box-shadow: 0 10px 30px -10px rgba(201,162,75,.6);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(201,162,75,.75); }
.btn-ghost {
  border: 1px solid rgba(201,162,75,.5); color: var(--gold);
}
.btn-ghost:hover { background: rgba(201,162,75,.1); transform: translateY(-2px); }

/* ---------- Header / Nav ---------- */
.nav {
  transition: background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.nav.scrolled {
  background: rgba(11,11,13,.82);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(201,162,75,.18);
}
.nav-link { position: relative; color: #cfcfd6; transition: color .25s; }
.nav-link::after {
  content: ''; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--gold); transition: width .3s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(201,162,75,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(201,162,75,.10), transparent 60%),
    var(--ink);
}
.hero-portrait {
  filter: grayscale(15%) contrast(1.05);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(201,162,75,.25);
}
.hero-ring {
  position: absolute; inset: -8%;
  border-radius: 50%;
  border: 1px solid rgba(201,162,75,.25);
  animation: spin 26s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* schwebende Tonwellen im Hero */
.wave-bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.wave-bars span {
  width: 4px; border-radius: 4px; background: linear-gradient(var(--gold-soft), var(--gold));
  animation: wave 1.2s ease-in-out infinite;
}
.wave-bars span:nth-child(2){ animation-delay:.1s } .wave-bars span:nth-child(3){ animation-delay:.2s }
.wave-bars span:nth-child(4){ animation-delay:.3s } .wave-bars span:nth-child(5){ animation-delay:.15s }
.wave-bars span:nth-child(6){ animation-delay:.25s } .wave-bars span:nth-child(7){ animation-delay:.05s }
@keyframes wave { 0%,100%{ height:8px } 50%{ height:38px } }

/* ---------- Section Basics ---------- */
.section { padding: clamp(4rem, 9vw, 8rem) 0; position: relative; }
.eyebrow { letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; color: var(--gold); }
.card {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(201,162,75,.4);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.8);
}

/* ---------- Audio-Player ---------- */
.audio-card { padding: 1.25rem 1.4rem; }
.audio-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.play-btn {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  color: #1a1409; transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 10px 24px -10px rgba(201,162,75,.7);
}
.play-btn:hover { transform: scale(1.06); }
.play-btn svg { width: 22px; height: 22px; }
.progress {
  height: 6px; border-radius: 999px; background: rgba(255,255,255,.1);
  overflow: hidden; cursor: pointer; position: relative;
}
.progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-soft), var(--gold)); }
.audio-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .8rem; }
.download-link { color: var(--muted); transition: color .2s; }
.download-link:hover { color: var(--gold); }

/* ---------- Steps (Wie funktioniert's) ---------- */
.step-num {
  font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; line-height: 1;
  color: var(--gold);
}
.step-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(201,162,75,.12); color: var(--gold); border: 1px solid rgba(201,162,75,.3);
}

/* ---------- Referenzen ---------- */
.ref-chip {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 1rem 1.25rem; text-align: center;
  color: #d7d7dd; background: rgba(255,255,255,.02);
  transition: all .3s ease;
}
.ref-chip:hover { border-color: rgba(201,162,75,.5); color: #fff; transform: translateY(-4px); }

/* ---------- Kontakt / Formular ---------- */
.field {
  width: 100%; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: .9rem 1.1rem; color: #fff; transition: border-color .25s, box-shadow .25s;
}
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.15); }
.field::placeholder { color: #75757e; }

/* ---------- Footer ---------- */
footer a:hover { color: var(--gold); }

/* ---------- Reveal (Fallback falls AOS fehlt) ---------- */
[data-aos] { will-change: transform, opacity; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2a31; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* Mobile Menu */
#mobileMenu { transition: opacity .3s ease, transform .3s ease; }