/* Ein ruhiges Katzenzimmer statt des bisherigen Blätterhintergrunds. */
body.has-room-background {
  background-color: #e4e5d4;
  background-image: linear-gradient(#f0eadb3d, #e7edd957);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
body.has-room-poster { background-image: linear-gradient(#f0eadb3d, #e7edd957), url('intro/room.webp'); }
body.has-room-background::before,
body.has-room-background::after { content: none !important; }
.room-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #e4e5d4;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.has-room-poster .room-background { background-image: url('intro/room.webp'); }
.room-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, #f2ebdd40, #e9edda45 55%, #f0e4cd52);
}
.room-background-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(.85) contrast(.96);
}
[data-loop-video] {
  opacity: 0;
  transition: opacity .45s ease;
}
[data-loop-video].is-playing { opacity: 1; }
.kitten-comic-intro { clear: both; margin: 25px 0 30px; }
.kitten-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 25px 0 0;
  overflow: hidden;
  border: 6px solid #fbf4e6;
  border-radius: 21px;
  background: #e3e8d8;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 1px #a2b58e, 0 12px 28px -17px #294e3c60;
}
.kitten-video-frame.has-poster { background-image: url('intro/baby.webp'); }
.kitten-comic-intro .kitten-video-frame { margin: 0; }
.kitten-video-frame video,
.kitten-video-frame .kitten-comic-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.kitten-comic-caption {
  margin: 0;
  padding: 12px 3px 0;
  color: var(--muted, #4f685c);
  font: 12px/1.7 var(--sans, "Segoe UI", sans-serif);
}
@media (max-width: 600px) {
  .kitten-video-frame { border-width: 4px; border-radius: 17px; margin-top: 22px; }
  .kitten-comic-intro { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  [data-loop-video] { opacity: 0 !important; transition: none !important; }
}