/* cinematic.css — Vorschau "Cinematic" (25.09.2026). Nutzt die Farb-/Schrift-Tokens aus style.css. */

/* ---------- HERO ---------- */
.cine { position: relative; min-height: calc(100svh - 64px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: #000; }
.cine__media { position: absolute; inset: -6% 0 0 0; z-index: -3; will-change: transform; }
.cine__poster, .cine__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.cine__video { opacity: 0; transition: opacity 1.2s ease; }
.cine__video[src] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cine__poster, .cine__video { animation: cine-drift 26s ease-in-out infinite alternate; }
}
@keyframes cine-drift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }
.cine__shade { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,0) 22%, rgba(10,10,10,0) 45%, rgba(10,10,10,.85) 82%, #0a0a0a 100%),
    radial-gradient(120% 90% at 20% 100%, rgba(255,59,31,.18), transparent 60%); }
.cine__grain { position: absolute; inset: -50%; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .cine__grain { animation: cine-grain 1.2s steps(6) infinite; } }
@keyframes cine-grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.cine__content { position: relative; width: 100%; padding-top: 18vh; padding-bottom: calc(clamp(40px, 9vh, 96px) + env(safe-area-inset-bottom)); }
.cine__label, .cine__live { display: inline-block; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
.cine__live { color: #fff; background: var(--accent); padding: 4px 8px; margin-right: 10px; }
.cine__title { font-size: clamp(44px, 9vw, 132px); line-height: .9; font-weight: 700; letter-spacing: -.035em; text-transform: uppercase; margin: 0 0 18px; max-width: 14ch; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.cine__title--m { font-size: clamp(34px, 6vw, 80px); max-width: 16ch; }
.cine__track { font-size: clamp(16px, 1.6vw, 22px); color: var(--text); margin: 0 0 28px; max-width: 60ch; }
.cine__track em { font-style: normal; color: var(--muted); }
.cine__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-bottom: 22px; }
.cine__play { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 30px; background: var(--accent); color: #fff; border: 0; font: 600 16px/1 var(--ff-display, inherit); letter-spacing: .02em; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .2s ease, background .2s ease; box-shadow: 0 10px 40px -10px rgba(255,59,31,.7); }
.cine__play:hover { transform: translateY(-2px); box-shadow: 0 16px 50px -12px rgba(255,59,31,.9); }
.cine__play.is-playing { background: #fff; color: #0a0a0a; box-shadow: none; }
.cine__next { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); opacity: .8; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.25); padding-bottom: 2px; }
.cine__next:hover { opacity: 1; border-color: var(--accent); }
.cine__meta { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.cine__scroll { position: absolute; right: max(20px, env(safe-area-inset-right)); bottom: calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
@media (prefers-reduced-motion: no-preference) { .cine__scroll span { animation: cine-bob 1.8s ease-in-out infinite; } }
@keyframes cine-bob { 50% { transform: translateY(6px); } }

/* ---------- ABSCHNITTE ---------- */
.cine-sec { padding: clamp(56px, 9vw, 120px) 0 0; }
.cine-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.cine-sec__title { font-size: clamp(26px, 3.4vw, 48px); line-height: 1; font-weight: 700; letter-spacing: -.02em; text-transform: uppercase; margin: 0 0 24px; }
.cine-sec__head .cine-sec__title { margin: 0; }
.cine-sec__more { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; white-space: nowrap; }
.cine-sec__more:hover { color: var(--accent); }

/* Karten (16:9, Standbild, Video beim Ueberfahren) */
.cine-card { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #111; color: #fff; text-decoration: none; border: 1px solid var(--line); }
.cine-card__media, .cine-card__media img, .cine-card__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-card__media img, .cine-card__media video { transition: transform .8s cubic-bezier(.2,.7,.2,1), opacity .5s ease; }
.cine-card__media video { opacity: 0; }
.cine-card__media video[src] { opacity: 1; }
.cine-card:hover .cine-card__media img, .cine-card:hover .cine-card__media video { transform: scale(1.06); }
.cine-card__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.85) 100%); }
.cine-card__body { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.cine-card__time { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.cine-card__title { font-size: clamp(18px, 1.8vw, 26px); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: -.01em; }
.cine-card:hover { border-color: var(--accent); }
.cine-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Tagesleiste: waagerecht wischbar, auch am Desktop */
.cine-rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--gutter, 24px), calc((100vw - var(--wrap, 1240px)) / 2)); scroll-padding: 0 max(var(--gutter, 24px), calc((100vw - var(--wrap, 1240px)) / 2)); }
.cine-rail::-webkit-scrollbar { display: none; }
.cine-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(260px, 34vw, 460px); gap: 16px; padding-bottom: 6px; }
.cine-rail .cine-card { scroll-snap-align: start; }

/* Show-Raster */
.cine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Verlauf + Wunsch nebeneinander */
.cine-split { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }

/* DJ-Aufruf mit Video */
.cine-cta { position: relative; margin-top: clamp(64px, 10vw, 140px); min-height: 70svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.cine-cta__media { position: absolute; inset: 0; z-index: -3; }
.cine-cta__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.cine-cta .cine__shade { background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 45%, rgba(10,10,10,.2) 100%), linear-gradient(180deg, #0a0a0a 0%, transparent 18%, transparent 82%, #0a0a0a 100%); }
.cine-cta__body { padding-top: 64px; padding-bottom: 64px; }
.cine-cta__text { font-size: clamp(16px, 1.5vw, 20px); color: var(--text); max-width: 46ch; margin: 0 0 28px; opacity: .85; }

/* ---------- HANDY / WEB-APP ---------- */
@media (max-width: 760px) {
  .cine { min-height: calc(100svh - 56px); }
  .cine__content { padding-top: 30vh; padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .cine__title { font-size: clamp(40px, 13vw, 64px); }
  .cine__play { width: 100%; justify-content: center; min-height: 58px; }
  .cine__actions { gap: 14px; }
  .cine__scroll { display: none; }
  .cine-rail__track { grid-auto-columns: 78vw; gap: 12px; }
  .cine-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cine-grid .cine-card { aspect-ratio: 3 / 4; }
  .cine-grid .cine-card__title { font-size: 16px; }
  .cine-grid .cine-card__body { left: 12px; right: 12px; bottom: 12px; }
  .cine-split { grid-template-columns: 1fr; }
  .cine-cta { min-height: 80svh; }
  .cine-cta .cine__shade { background: linear-gradient(180deg, #0a0a0a 0%, rgba(10,10,10,.55) 30%, rgba(10,10,10,.9) 100%); }
}
/* Installierte Web-App: randlos unter der Statusleiste */
@media (display-mode: standalone) {
  .cine { min-height: 100svh; }
  .cine__content { padding-top: calc(22vh + env(safe-area-inset-top)); }
}

/* ---------- UNTERSEITEN-KOPF ---------- */
.cine--page { min-height: clamp(380px, 62svh, 720px); }
.cine--page .cine__content { padding-top: 14vh; padding-bottom: clamp(36px, 7vh, 72px); }
.cine--page .cine__title--page { font-size: clamp(40px, 7.4vw, 108px); max-width: 16ch; }
.cine--page .cine__track { opacity: .9; }
.cine--klein { min-height: clamp(240px, 36svh, 380px); }
.cine--klein .cine__title--page { font-size: clamp(34px, 5vw, 72px); }
.cine--page + * { position: relative; }
@media (max-width: 760px) {
  .cine--page { min-height: 58svh; }
  .cine--page .cine__content { padding-top: 22vh; padding-bottom: 32px; }
  .cine--page .cine__title--page { font-size: clamp(36px, 11vw, 56px); }
  .cine--page .cine__play { width: auto; }
  .cine--klein { min-height: 34svh; }
}
@media (display-mode: standalone) {
  .cine--page { min-height: 60svh; }
  .cine--page .cine__content { padding-top: calc(16vh + env(safe-area-inset-top)); }
}
.cine__hl { color: var(--accent); }