/* Videokarten mit Martina (16. Oktober 2026), auf der Startseite und auf „Für Expert:innen“ (views/partials/video-karte.ejs).
   Hochformat 9:16, Untertitel im Bild. Der Knopf liegt im selben Rasterfeld wie das Video, nicht frei schwebend; seine
   Fläche deckt das ganze Bild, sichtbar ist nur die dunkle Pille unten (wie der Ton-Knopf der Filmbühne). */
.video-karte { display: grid; gap: var(--space-4); margin: 0; min-width: 0; }
.video-karte__rahmen {
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  overflow: hidden;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  box-shadow: 0 18px 50px rgba(58, 44, 34, .12);
}
.video-karte__video {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2B211A;
}
.video-karte__start {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: var(--space-4);
  border: 0;
  border-radius: 0;
  background: linear-gradient(to top, rgba(31, 24, 18, .38), rgba(31, 24, 18, 0) 32%);
  color: #FCF8EF;
  font: inherit;
  cursor: pointer;
}
.video-karte__start[hidden] { display: none; }
/* Pille unten links: Kreis mit Dreieck und die Beschriftung auf dunkler, halb durchsichtiger Fläche.
   #FCF8EF auf rgba(31,24,18,.66) über dem hellen Bild: über 9:1. */
.video-karte__pille {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: .3125rem var(--space-4) .3125rem .3125rem;
  border: 1px solid rgba(252, 248, 239, .3);
  border-radius: var(--radius-pill);
  background: rgba(31, 24, 18, .66);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out);
}
.video-karte__kreis {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: #FCF8EF;
  color: #94462F;   /* Terrakotta auf Creme: 6.4:1, in beiden Darstellungen gleich */
  transition: transform var(--dur-fast) var(--ease-out);
}
.video-karte__kreis svg { display: block; margin-left: 2px; }
.video-karte__start:hover .video-karte__pille { background: rgba(31, 24, 18, .82); }
.video-karte__start:hover .video-karte__kreis { transform: scale(1.06); }
.video-karte__start:focus-visible { outline: 3px solid #FCF8EF; outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .video-karte__kreis, .video-karte__pille { transition: none; }
}

.video-karte__text { display: grid; gap: var(--space-2); }
.video-karte__titel { margin: 0; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.video-karte__satz { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--color-text-muted); text-wrap: pretty; }

/* Reihe der Karten. Am Handy zum Wischen: die zweite Karte schaut am Rand heraus. Nur die Reihe scrollt seitlich,
   der negative Rand gleicht genau den Innenabstand des Containers aus. Ab 640 px zwei Karten nebeneinander. */
.video-reihe {
  list-style: none;
  /* Oben und unten Platz für den Schatten der Karten, sonst schneidet die scrollende Reihe ihn als Kante ab; der negative Rand
     hält den Abstand zur Überschrift gleich. */
  margin: calc(var(--space-5) * -1) calc(var(--gutter) * -1) calc(var(--space-6) * -1);
  padding: var(--space-5) var(--gutter) var(--space-8);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(13rem, 74%);
  gap: var(--space-4);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.video-reihe > li { scroll-snap-align: start; min-width: 0; margin: 0; }
@media (min-width: 640px) {
  .video-reihe {
    margin: 0;
    padding: 0;
    overflow: visible;
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 17.5rem));
    gap: var(--space-6);
    justify-content: center;
  }
}

/* Startseite: Text links, die zwei Videos rechts (ab 960 px); darunter Text über den Videos. */
.home-videos__inner { display: grid; gap: var(--space-6); }
.home-videos__kopf { max-width: 34rem; }
.home-videos__kopf h2 { margin-bottom: var(--space-3); }
.home-videos__lead { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
@media (min-width: 960px) {
  .home-videos__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-10); }
  .home-videos .video-reihe { grid-template-columns: repeat(2, minmax(0, 16.5rem)); }
}

/* Für Expert:innen: direkt unter dem Einstieg, deshalb ohne zweiten Abstand oben. Ab 760 px steht das Video links an der
   Inhaltskante und der Text daneben (der Einstieg darüber hat sein Bild rechts); am Handy der Text über dem Video. */
.fe-video { padding-top: 0; }
.fe-video__grid { display: grid; gap: var(--space-6); align-items: center; }
.fe-video__text h2 { margin-bottom: var(--space-3); }
.fe-video__satz { margin: 0; max-width: 40ch; font-size: var(--fs-md); line-height: 1.6; color: var(--color-text-muted); text-wrap: pretty; }
.fe-video .video-karte { width: min(100%, 20rem); justify-self: start; }
@media (min-width: 760px) {
  .fe-video__grid { grid-template-columns: 18rem minmax(0, 1fr); gap: var(--space-10); }
  .fe-video .video-karte { order: -1; width: 100%; }
}