/* =====================================================================
   css/rs/djlive.css — Live-DJ mit Pressematerial auf der Startseite (27.09.2026)
   Nur aktiv, wenn js/start.js freigegebenes Pressematerial des live sendenden DJs
   bekommt (/dj-live.php): .rs-start.has-djpresse, Ebene .rs-djp-motiv, Block .rs-djp.
   Ohne Freigabe gibt es diese Elemente nicht → Startseite unverändert.
   ===================================================================== */

/* Browser: Pressefoto statt Show-Motiv (App: Bild kommt über die App-Ebenen, siehe webapp.css) */
.rs-start.has-djpresse .rs-start__bild > picture { opacity: 0; transition: opacity 1.2s ease; }
.rs-start__bild img.rs-djp-motiv { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%;
  filter: saturate(1.08) contrast(1.04); opacity: 0; transform: scale(1.04); transition: opacity 1.2s ease, transform 6s cubic-bezier(.2,.7,.2,1); }
.rs-start__bild img.rs-djp-motiv.is-an { opacity: 1; transform: none; }
.rs-start__bild img.rs-djp-motiv.is-hoch { object-position: 50% 22%; }
html.is-app .rs-djp-motiv { display: none; }
/* Tönung: links dunkel für die Schrift, rechts das Foto fast unverfälscht, ein Hauch Magenta für LIVE */
.rs-start.has-djpresse .rs-start__tint { background:
  linear-gradient(90deg, rgba(13,10,31,.94) 0%, rgba(13,10,31,.7) 38%, rgba(13,10,31,.12) 72%, color-mix(in srgb, var(--ru-magenta) 14%, transparent) 100%),
  linear-gradient(0deg, rgba(13,10,31,.95) 0%, rgba(13,10,31,0) 42%); }
/* Cover rechts zeigt ebenfalls das Pressefoto: Gesicht eher oben */
.rs-start.has-djpresse .rs-start__cover { object-position: 50% 25%; }

/* Block unter dem riesigen DJ-Namen */
.rs-djp { display: grid; gap: 12px; max-width: 620px; animation: rs-djp-ein .9s cubic-bezier(.2,.7,.2,1) both; }
.rs-djp[hidden] { display: none; }
@keyframes rs-djp-ein { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rs-djp__kopf { display: flex; align-items: center; gap: 12px; margin: 0; flex-wrap: wrap; }
.rs-djp__wer { opacity: .8; }
.rs-djp__bio { margin: 0; font: 500 17px/1.55 var(--ru-f-text); color: var(--ru-paper); opacity: .92; text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rs-djp__links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.rs-djp__links a { color: var(--ru-paper); text-decoration: none; border-bottom: 1px solid var(--ru-line); padding-bottom: 2px; }
.rs-djp__links a:hover, .rs-djp__links a:focus-visible { color: var(--ru-cyan); border-color: var(--ru-cyan); }
/* Der Künstler-Satz („ist gerade live on Air“) steht schon in der LIVE-Zeile → kleiner halten */
.rs-start.has-djpresse .rs-start__artist { font-size: 26px; opacity: .85; }

@media (max-width: 820px) {
  .rs-start__bild img.rs-djp-motiv { object-position: 50% 20%; }
  .rs-start.has-djpresse .rs-start__tint { background:
    linear-gradient(0deg, rgba(13,10,31,.98) 0%, rgba(13,10,31,.78) 40%, rgba(13,10,31,.1) 72%, color-mix(in srgb, var(--ru-magenta) 16%, transparent) 100%); }
  .rs-djp { gap: 8px; }
  .rs-djp__kopf .rs-live { padding: 5px 8px; font-size: 10px; }
  .rs-djp__wer { font-size: 10px; }
  .rs-djp__bio { font-size: 14px; line-height: 1.5; -webkit-line-clamp: 3; }
  .rs-djp__links { font-size: 10.5px; gap: 4px 14px; }
  .rs-start.has-djpresse .rs-start__artist { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-djp { animation: none; }
  .rs-start__bild img.rs-djp-motiv { transition: opacity .3s linear; transform: none; }
}
html[data-bewegung="reduziert"] .rs-djp { animation: none; }
html[data-bewegung="reduziert"] .rs-start__bild img.rs-djp-motiv { transition: opacity .3s linear; transform: none; }

/* ---------------- Öffentliche DJ-Seite /dj-profil.php (Stil wie show.php) ---------------- */
.rs-djprofil { background: var(--ru-ink); color: var(--ru-paper); }
.rs-djprofil__kopf { position: relative; isolation: isolate; overflow: hidden; min-height: min(78svh, 760px); display: flex; align-items: flex-end; }
.rs-djprofil__bild { position: absolute; inset: 0; z-index: -2; background: var(--ru-ink-2); }
.rs-djprofil__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 28%; display: block; }
.rs-djprofil__bild img.is-hoch { object-position: 70% 20%; }
.rs-djprofil__tint { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(13,10,31,.92) 0%, rgba(13,10,31,.6) 42%, rgba(13,10,31,.08) 75%),
  linear-gradient(0deg, rgba(13,10,31,1) 0%, rgba(13,10,31,0) 45%); }
.rs-djprofil__titel { width: 100%; box-sizing: border-box; padding-top: 120px; padding-bottom: 44px; display: grid; gap: 16px; }
.rs-djprofil__titel .rs-pt { font-size: clamp(48px, 9vw, 150px); max-width: 12ch; }
.rs-djprofil__proto { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-djprofil__kurz { margin: 0; max-width: 56ch; font: 500 19px/1.5 var(--ru-f-text); opacity: .92; }
.rs-djprofil__links { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rs-djprofil__raster { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; padding-top: 44px; padding-bottom: 44px; border-top: 1px solid var(--ru-line); }
.rs-djprofil__bio { display: grid; gap: 14px; margin-top: 12px; max-width: 68ch; font: 500 17px/1.7 var(--ru-f-text); }
.rs-djprofil__bio p { margin: 0; }
.rs-djprofil__slots { list-style: none; margin: 12px 0 8px; padding: 0; }
.rs-djprofil__slots .rs-li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ru-line-2); }
.rs-djprofil__slots .t { font: 800 16px/1.2 var(--ru-f-text); }
.rs-djprofil__slots .m { font: 500 13px/1.2 var(--ru-f-mono); opacity: .8; white-space: nowrap; }
.rs-djprofil__slots .is-jetzt .t, .rs-djprofil__slots .is-jetzt .m { color: var(--ru-cyan); opacity: 1; }
.rs-djprofil__zeit { margin: 0 0 18px; }
.rs-djprofil__leer { font: 500 14px/1.6 var(--ru-f-mono); opacity: .7; margin: 12px 0 18px; }
.rs-djprofil__fotos { padding-bottom: 64px; }
.rs-djprofil__fotos ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.rs-djprofil__fotos li { aspect-ratio: 4 / 5; border-radius: var(--ru-r-2); overflow: hidden; background: var(--ru-ink-2); box-shadow: var(--ru-shadow-cover); }
.rs-djprofil__fotos img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform .6s ease; }
.rs-djprofil__fotos a:hover img { transform: scale(1.03); }
@media (max-width: 820px) {
  .rs-djprofil__kopf { min-height: 72svh; }
  .rs-djprofil__bild img { object-position: 50% 20%; }
  .rs-djprofil__tint { background: linear-gradient(0deg, rgba(13,10,31,1) 0%, rgba(13,10,31,.75) 38%, rgba(13,10,31,.05) 70%); }
  .rs-djprofil__titel { padding-top: 60px; padding-bottom: 24px; gap: 12px; }
  .rs-djprofil__titel .rs-pt { font-size: clamp(40px, 13vw, 64px); }
  .rs-djprofil__kurz { font-size: 15px; }
  .rs-djprofil__raster { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 28px; }
  .rs-djprofil__bio { font-size: 15.5px; }
  .rs-djprofil__fotos ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
}