/* angebot-musiker.css — Musiker Websites specific styles */

/* HERO — musiker-specific background image and overlay */
#hero {
  background-image: url('https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=1400&q=80&auto=format&fit=crop');
  background-position: center 40%;
}
#hero::before {
  background:
    radial-gradient(ellipse 55% 65% at 15% 60%, rgba(61,107,142,.15) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 25%, rgba(200,137,42,.08) 0%, transparent 55%),
    linear-gradient(rgba(10,10,11,.75), rgba(10,10,11,.75));
}

/* HERO — waveform SVG decoration */
.hero-wave {
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 160px;
  opacity: .12;
  pointer-events: none;
}

/* THESIS */
#thesis { background: var(--bg-surface); }
.thesis-quote {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 300;
  line-height: 1.3;
  max-width: 820px;
}
.thesis-quote em { font-style: italic; color: var(--accent); }
.thesis-sub {
  margin-top: 2.5rem;
  font-size: .85rem;
  color: var(--text-secondary);
  max-width: 560px;
  line-height: 1.85;
}

/* PLATTFORMEN */
#plattformen { background: var(--bg); }
.platform-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 3rem;
}
.platform-tag {
  font-size: .69rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .45rem 1rem;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.platform-note {
  margin-top: 2.5rem;
  background: var(--bg-elevated);
  border: 1px solid var(--accent-border);
  padding: 1.75rem 2rem;
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.platform-note-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: .1rem;
  opacity: .7;
}
.platform-note p { font-size: .82rem; color: var(--text-secondary); line-height: 1.8; }
.platform-note strong { color: var(--text-primary); font-weight: 400; }

/* LEISTUNGEN — musiker uses bg-elevated on hover (jobcoach uses bg-surface) */
#leistungen { background: var(--bg-surface); }
.feat-cell:hover { background: var(--bg-elevated); }

/* PAKETE — musiker uses bg (not bg-surface like jobcoach) */
#pakete { background: var(--bg); }
.paket { background: var(--bg); }

/* PROZESS — musiker uses bg-surface */
#prozess { background: var(--bg-surface); }
/* musiker steps has no gap:0; uses default grid gap */
.steps { gap: unset; }

/* KONTAKT — musiker uses bg */
#kontakt { background: var(--bg); }

/* RESPONSIVE — hide waveform on mobile */
@media(max-width:768px) {
  .hero-wave { display: none; }
}