/* Blaauw Empire · Events: Ergänzungen zu css/site.css (Räume, Lightbox-Pfeile, Tag→Nacht ohne Bewegung, Video über Standbild). */

/* Standbild weicht dem Video, sobald es spielt (Hero und Kapitel) */
.cine-hero .media.has-video img{opacity:0;transition:transform 2.2s cubic-bezier(.16,1,.3,1),opacity 1.6s ease 1.2s}
.chapter .media.has-video img{opacity:0;transition:opacity 1.6s ease 1.2s}

/* Tag → Nacht: Textzeile volle Breite, Uhr in zwei Zeilen */
.daynight .txt .t{right:0}
.daynight .txt .k{display:block}
.daynight .uhr .z{display:block}

/* Kleine Hinweise und Datenausfall */
.note{margin:16px 0 0;font-size:12.5px;color:rgba(154,164,187,.8)}
.data-note{grid-column:1/-1;padding:40px 20px;color:var(--muted);text-align:center;border:1px dashed var(--line);border-radius:4px}
.sec-head.tight{margin-bottom:0}
.fuer.kap{margin-top:22px}

/* Die Räume: Bild und Text im Wechsel, der Saal kippt auf Wunsch in die Nacht */
.rooms{display:grid;gap:clamp(40px,6vw,90px)}
.room{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;opacity:0;transform:translateY(28px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.room.in{opacity:1;transform:none}
.room:nth-child(even) .pic{order:2}
.room .pic{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--blau-900)}
.room .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity 1.2s ease}
.room .pic img.alt{opacity:0}
.room.night .pic img.alt{opacity:1}
@media (hover:hover){.room .pic:hover img{transform:scale(1.04)}.room .pic:hover img.alt{opacity:1}}
.room .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(4,7,15,.65));pointer-events:none}
.room .pic .cap{position:absolute;left:18px;bottom:16px;z-index:2;font:600 11px/1.4 var(--fb);letter-spacing:.26em;text-transform:uppercase;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.room .pic .chip{position:absolute;right:14px;bottom:10px;z-index:2;min-height:44px;display:inline-flex;align-items:center;background:rgba(4,7,15,.55);backdrop-filter:blur(6px)}
.room .pic .chip.on{background:var(--gold)}
.room .txt .k{display:block;margin-bottom:14px}
.room h3{font:400 clamp(24px,2.6vw,38px)/1.1 var(--fd);color:#fff;margin:0 0 14px}
.room p{color:var(--muted);max-width:44ch;margin:0}
@media (max-width:860px){.room{grid-template-columns:1fr;gap:18px}.room:nth-child(even) .pic{order:0}.room .pic .cap{left:14px}.room .pic:has(.chip) .cap{bottom:54px}}

/* Lightbox: Pfeile links und rechts, auf dem Handy unten */
dialog.lightbox figure{padding:0 90px}
dialog.lightbox img{max-width:calc(100vw - 200px)}
dialog.lightbox .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:50px;height:50px;padding:0;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(4,7,15,.65);color:#fff;cursor:pointer;display:grid;place-items:center;z-index:5;transition:border-color .3s,color .3s}
dialog.lightbox .lb-nav[hidden]{display:none}
dialog.lightbox .lb-nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
dialog.lightbox .lb-nav:hover{border-color:var(--gold);color:var(--gold)}
dialog.lightbox .lb-nav.prev{left:22px}
dialog.lightbox .lb-nav.next{right:22px}
@media (max-width:700px){
  dialog.lightbox figure{padding:0 16px 70px}
  dialog.lightbox img{max-width:92vw;max-height:70svh}
  dialog.lightbox .lb-nav{top:auto;bottom:22px;transform:none}
  dialog.lightbox .lb-nav.prev{left:calc(50% - 62px)}
  dialog.lightbox .lb-nav.next{right:calc(50% - 62px)}
}

/* Ohne Bewegung: Tag und Nacht untereinander, beide Zeilen sichtbar, keine Kerzen, kein Video */
@media (prefers-reduced-motion:reduce){
  .daynight{height:auto;padding:clamp(60px,8vw,120px) 0;border-top:1px solid var(--line)}
  .daynight .stage{position:relative;height:auto;display:grid;gap:22px;width:min(var(--w),100% - 2*var(--gutter));margin-inline:auto;background:none}
  .daynight .stage::after{display:none}
  .daynight .stage picture{display:block}
  .daynight .stage img{position:relative;inset:auto;height:auto;aspect-ratio:16/9;border-radius:4px;opacity:1;filter:none}
  .daynight .pic-day{order:1}
  .daynight .pic-night{order:3}
  .daynight .txt{display:contents}
  .daynight .txt .t{position:relative;inset:auto;opacity:1;transform:none;transition:none;padding:4px 0 26px}
  .daynight .txt .t[data-t=tag]{order:2}
  .daynight .txt .t[data-t=nacht]{order:4}
  .daynight canvas,.daynight .line,.daynight .uhr{display:none}
  .room{opacity:1;transform:none;transition:none}
  .room .pic img{transition:none}
  .cine-hero .media.has-video img,.chapter .media.has-video img{opacity:1}
}