/* Sektion „Ein Blick nach Tansania": drei Handyvideos als Hochkant-Kacheln.
   Gleiche Papier- und Goldsprache wie der Rest der Seite. */

.einblicke {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 1.8rem;
}

.eb {
  position: relative;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .28s ease, box-shadow .28s ease;
}
.eb:hover { transform: translateY(-4px); box-shadow: 0 24px 60px -22px rgba(30, 50, 40, .38); }

.eb-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--deep);
}

/* Startknopf über dem Standbild — verschwindet beim Abspielen */
.eb-start {
  position: absolute;
  inset: 0 0 auto 0;
  height: 75%;                       /* nur über dem Bild, nicht über der Bildunterschrift */
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: linear-gradient(180deg, rgba(20, 43, 33, .10), rgba(20, 43, 33, .34));
  transition: background .3s ease;
}
.eb-start:hover { background: linear-gradient(180deg, rgba(20, 43, 33, .04), rgba(20, 43, 33, .24)); }
.eb-start[hidden] { display: none; }

.eb-knopf {
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--gold); color: var(--deep);
  display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(20, 43, 33, .42);
  transition: transform .25s ease;
}
.eb-start:hover .eb-knopf { transform: scale(1.08); }
.eb-knopf svg { margin-left: 3px; }

.eb figcaption {
  padding: .85rem 1rem 1.05rem;
  font: 600 .95rem/1.35 var(--sans);
  color: var(--deep);
  background: #fff;
  position: relative;
  z-index: 2;
}
.eb figcaption small {
  display: block;
  font: 400 .8rem/1.5 var(--sans);
  color: var(--mut);
  margin-top: 3px;
}

@media (max-width: 900px) {
  .einblicke { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .eb:last-child { grid-column: span 2; max-width: 340px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .einblicke { grid-template-columns: 1fr; max-width: 340px; margin-left: auto; margin-right: auto; }
  .eb:last-child { grid-column: auto; }
}