/* ============================================================
   synchron.css – Alle Overrides für die Synchron & Film-Seite
   (ausgelagert damit die CSP-Header auf dem Server greifen)
   ============================================================ */

/* ── Custom Audio Player ─────────────────────────────────── */
.custom-player { margin-top: .8rem; }

.wave-wrap {
  position: relative;
  overflow: hidden;
  height: 48px;
  border-radius: var(--radius);
  background: rgba(0,0,0,.28);
  margin-bottom: .6rem;
}
.wave-svg {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
}
.w1 { fill: none; stroke: var(--accent);     stroke-width: 2;   opacity: .80; }
.w2 { fill: none; stroke: var(--accent-mid); stroke-width: 1.5; opacity: .42; }

.custom-player.is-playing .wave-a { animation: wave-roll 2.0s linear infinite; }
.custom-player.is-playing .wave-b { animation: wave-roll 2.9s linear infinite; }
@keyframes wave-roll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.player-row {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.pls-btn, .stp-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--trans), transform .15s ease;
}
.pls-btn:hover, .stp-btn:hover { transform: scale(1.12); }
.pls-btn { background: var(--accent); color: #fff; }
.pls-btn:hover { background: var(--accent-deep); }
.stp-btn { background: rgba(255,255,255,.10); color: var(--text-mid); }
.stp-btn:hover { background: rgba(255,255,255,.20); }
.pls-btn svg, .stp-btn svg { width: 13px; height: 13px; pointer-events: none; }

.prog-bar {
  position: relative;
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  cursor: pointer;
}
.prog-fill {
  height: 100%;
  width: 0%;
  border-radius: 2px;
  background: var(--accent);
  transition: width .1s linear;
  pointer-events: none;
}
.prog-seek {
  position: absolute;
  inset: -10px 0;
  width: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.time-cur {
  font-size: .72rem;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  min-width: 2.6rem;
  text-align: right;
  letter-spacing: .02em;
}

/* Pause-Icon initial ausblenden (wird per JS umgeschaltet) */
.ico-pause { display: none; }

/* ── Hover-Expand für Projekt-Kacheln ─────────── */
.work-more {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .70s cubic-bezier(.4,0,.2,1);
}
.work-more > ul {
  overflow: hidden;
  min-height: 0;
  margin-top: 0;
  opacity: 0;
  transition: opacity .40s ease;
}
.aktuelles-block:hover .work-more {
  grid-template-rows: 1fr;
}
.aktuelles-block:hover .work-more > ul {
  opacity: 1;
  transition: opacity .50s ease .25s;
}
.aktuelles-block.has-more::after {
  content: '· · ·';
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: .8rem;
  letter-spacing: .25em;
  padding: .4rem 0 0;
  transition: opacity .30s ease;
}
.aktuelles-block.has-more:hover::after { opacity: 0; }

/* ── Block-Untertitel „Auswahl" ── */
.block-sub {
  font-size: .68rem;
  color: var(--text-light);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: -.2rem 0 .5rem;
}

/* ── 4-Spalten-Layout ─────────── */
.aktuelles-grid { align-items: start; }

@media (min-width: 768px) {
  .aktuelles-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
  }
  .aktuelles-block {
    padding: 1rem;
  }
  .aktuelles-block:hover { transform: none; }
  .block-title {
    font-size: .82rem;
    gap: .45rem;
    padding-bottom: .5rem;
    margin-bottom: .3rem;
  }
  .block-title svg { width: 15px; height: 15px; }
  .work-list li     { padding: .3rem 0; }
  .work-list strong { font-size: .82rem; }
  .work-list .role  { font-size: .75rem; }
  .work-list .meta  { font-size: .68rem; }
}

/* ── Hero: zentriert + Parallax ─── */
.hero--photo .hero-bg img {
  object-position: center center;
  position: absolute;
  width: 100%;
  height: 115%;
  top: 0;
}
.hero--photo .hero-bg::after {
  background: linear-gradient(160deg,
    rgba(30,12,6,.15) 0%,
    rgba(30,12,6,.42) 55%,
    rgba(30,12,6,.70) 100%);
}

/* Header immer sichtbar */
#header {
  background: var(--nav-scrolled-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--border), var(--shadow-sm);
}

/* Nav: weiße Schrift */
#header .logo-name,
#header .logo-sub,
#mainNav a,
#mainNav a.active {
  color: #fff;
}
#header .logo-name { font-weight: 700; }
#mainNav a         { font-weight: 600; }

/* Ghost-Button weiß */
.hero--photo .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.55);
}
.hero--photo .btn-ghost:hover {
  border-color: #fff;
  color: #fff;
}

/* Hero-Eyebrow weiß */
.hero--photo .hero-eyebrow { color: rgba(255,255,255,.90); }

/* ── Hörproben: Hintergrundbild + Parallax ─── */
#hoerproben {
  position: relative;
  overflow: hidden;
}
.hoer-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hoer-bg img {
  position: absolute;
  width: 100%;
  height: 130%;
  top: 0;
  object-fit: cover;
  object-position: center 72%;
}
.hoer-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg,
    rgba(30,12,6,.62) 0%,
    rgba(30,12,6,.80) 55%,
    rgba(30,12,6,.94) 100%);
}
#hoerproben .container {
  position: relative;
  z-index: 1;
}
#hoerproben .section-intro { color: #fff; }

#hoerproben .audio-card {
  background: transparent;
  box-shadow: none;
  border: none;
  padding: 1.1rem;
}
#hoerproben .audio-card:hover {
  box-shadow: none;
  transform: none;
}
#hoerproben .audio-icon           { display: none; }
#hoerproben .audio-card-header    { gap: 0; }
#hoerproben .audio-card-header h3 { font-size: .85rem; }
#hoerproben .audio-card-header p  { font-size: .72rem; }

/* 2+3 Reihen-Layout */
#hoerproben .audio-grid { display: block; }
.audio-row {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.audio-row:last-child { margin-bottom: 0; }
.audio-row-top    .audio-card { flex: 0 1 320px; }
.audio-row-bottom .audio-card { flex: 0 1 240px; }

/* ── Vita-Sektionen: Anfangszustand (JS rollt sie ein) ───── */
.vita-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s ease, transform .55s ease;
}