/* NAK-UT: Video-Player volle Inhaltsbreite; Gottesdienstzeiten stets darunter. */
.layout {
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.stream-card, .schedule-card { width: 100%; min-width: 0; }
/* Eine kompakte, breite Übersicht unter dem Videoplayer. */
.schedule-card {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  grid-template-areas: "heading services" "note note";
  align-items: center;
  column-gap: 28px;
  row-gap: 13px;
  min-height: 0;
  padding: 22px 28px;
}
.schedule-heading {grid-area: heading; display:flex; align-items:center; min-width:0; gap:15px}
.schedule-heading .schedule-icon {flex:0 0 44px; margin:0}
.schedule-heading .card-eyebrow {margin:0 0 7px}
.schedule-heading .schedule-title {margin:0}
.schedule-services {grid-area:services; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; min-width:0}
.schedule-services .service-day {border:0; border-left:1px solid #dce8f0; padding:9px 0 9px 19px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-width:0}
.schedule-services .service-day strong {font-size:19px}
.schedule-note {grid-area:note; margin:0; padding:12px 17px}
@media(max-width:850px) {
  .layout {grid-template-columns:minmax(0,1fr)}
  .schedule-card {grid-template-columns:minmax(0,1fr); grid-template-areas:"heading" "services" "note"; gap:18px; padding:24px}
  .schedule-services .service-day {padding-left:17px}
}
@media(max-width:420px) {
  .schedule-services {grid-template-columns:1fr; gap:0}
  .schedule-services .service-day {border-left:0; border-top:1px solid #dce8f0; padding:12px 0}
  .schedule-card {padding:22px}
}

/* NAK-UT: Zentrierung der Livestream-Vorschau auf Smartphones.
   Die feste 16:9-Box und Mindesthoehe koennen in kleinen Viewports
   unguenstige intrinsische Breiten erzeugen. */
@media (max-width: 750px) {
  .video-window {
    width: 100%;
    min-width: 0;
    aspect-ratio: auto;
    min-height: 350px;
  }

  .video-window > .video-content {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 16px;
    flex: 0 0 auto;
    text-align: center;
  }

  .video-window .state {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .video-window .video-icon,
  .video-window .video-description,
  .video-window .privacy-note {
    margin-left: auto;
    margin-right: auto;
  }

  .video-window .watch-button {
    max-width: 100%;
    white-space: normal;
  }

  .video-window .video-title,
  .video-window .video-description,
  .video-window .privacy-note {
    overflow-wrap: anywhere;
  }

  /* Sobald der echte YouTube-Player geladen wurde, wieder 16:9. */
  .video-window:has(> .video-frame:not([hidden])) {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
}