/* Bereich „Hilfe“: /hilfe/, /hilfevideos/, /hilfevideos-cloudtelefonie/,
   /demovideo-infra-struktur-in-wenigen-minuten-erklaert/.
   Erzeugt von tools/seiten/hilfe.py (Markup); Bausteine aus style.css, hier nur Ergänzungen mit Präfix hv-. */

/* ---------- Seitenkopf ---------- */
.hv-hero .page-hero__lead + .page-hero__lead { margin-top: .75rem; }
.hv-hero .page-hero__visual { min-width: 0; }

/* ---------- /hilfe/: Kacheln ---------- */
.hv-kachel__titel { font-size: 1.1875rem; font-weight: 900; line-height: 1.3; }
.hv-kachel .card-link { overflow-wrap: anywhere; }
.hv-kachel__pfeil { margin-top: auto; padding-top: 1rem; }
.hv-kachel .feature__icon .icon { width: 24px; height: 24px; }
/* Handy: Icon links, damit neun Kacheln nicht endlos lang werden */
@media (max-width: 639.98px) {
  .hv-kachel { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; padding: 1.25rem 1.25rem 1.1rem; }
  .hv-kachel .feature__icon { grid-row: span 3; width: 48px; height: 48px; margin-bottom: 0; }
  .hv-kachel__pfeil { padding-top: .5rem; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .hv-kacheln { grid-template-columns: 1fr 1fr; }
  .hv-kachel { display: flex; }
  .hv-kachel .feature__icon { margin-bottom: 1.1rem; }
}

/* ---------- Hinweis zur Einwilligung über einem Video-Raster (Consent-Baustein schaltet hidden) ---------- */
.hv-hinweis {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem; align-items: start;
  max-width: 960px; margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  padding: 1.1rem 1.25rem;
  border: 1px solid rgba(0, 73, 148, .14); border-radius: var(--radius);
  background: var(--white); color: var(--muted); font-size: .9375rem; line-height: 1.55;
  box-shadow: var(--shadow-s);
}
.hv-hinweis__icon { width: 40px; height: 40px; padding: 11px; border-radius: 11px; background: var(--tile-2); color: var(--primary); }
.hv-hinweis__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; margin-top: .8rem; }
.hv-hinweis__mehr { padding: .4rem 0; border: 0; background: none; color: var(--primary); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.hv-hinweis--ok { align-items: center; }
.hv-hinweis--ok a { color: var(--primary); font-weight: 700; }

/* ---------- Video-Karten im Raster ---------- */
.hv-raster { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.hv-karte {
  display: flex; flex-direction: column; min-width: 0;
  overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
}
.hv-karte .video { width: 100%; max-width: none; margin: 0; border-radius: 0; box-shadow: none; }
.hv-karte__text { padding: clamp(1.25rem, 3vw, 1.75rem); }
.hv-karte__text h3 { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.hv-karte__text p { margin-top: .75rem; }
.hv-karte__titel { padding: 1rem 1.15rem 1.15rem; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; text-wrap: pretty; }

/* Kompakter Platzhalter in den Karten: nur Standbild bzw. Verlauf und „… laden“; die Erklärung steht einmal oben (.hv-hinweis) */
.hv-karte .video .lpc-platzhalter {
  aspect-ratio: 16 / 9 !important; align-content: end; justify-items: start;
  padding: clamp(.9rem, 2.5vw, 1.25rem);
}
.hv-karte .video--standbild .lpc-platzhalter {
  background: linear-gradient(180deg, rgba(0, 38, 80, 0) 45%, rgba(0, 38, 80, .75) 100%), var(--standbild) center / cover no-repeat, var(--primary);
}
.hv-karte .video--verlauf .lpc-platzhalter { align-content: center; justify-items: center; background: var(--gradient-diag); }
.hv-karte .video .lpc-platzhalter__inhalt { justify-items: start; }
.hv-karte .video--verlauf .lpc-platzhalter__inhalt { justify-items: center; }
.hv-karte .video .lpc-platzhalter__text,
.hv-karte .video .lpc-textknopf { display: none; }

/* Gruppen der CloudTelefonie-Tutorials */
.hv-gruppe + .hv-gruppe { margin-top: clamp(3rem, 7vw, 4.5rem); }
.hv-gruppe__titel { max-width: 46rem; margin-bottom: clamp(1.25rem, 3vw, 1.75rem); font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem); }
.hv-gruppe__titel::before { content: ""; display: block; width: 64px; height: 6px; margin-bottom: 1rem; border-radius: 99px; background: var(--gradient); }

@media (min-width: 640px) {
  .hv-raster--drei { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 768px) {
  .hv-raster { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .hv-raster--drei { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- /hilfevideos-cloudtelefonie/: Illustration mit Logo ---------- */
.hv-ct-visual { display: grid; justify-items: center; }
.hv-ct-visual__bild { width: min(100%, 560px); }
.hv-ct-logo {
  margin-top: -1.5rem; padding: .75rem 1.1rem;
  border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow);
}
.hv-ct-logo img { width: min(206px, 55vw); }

/* ---------- /demovideo-…/: großes Video im Seitenkopf, alles mittig ---------- */
.hv-demo-hero .page-hero__copy { min-width: 0; }
@media (min-width: 768px) {
  .hv-demo-hero .page-hero__copy { text-align: center; }
  .hv-demo-hero .breadcrumb ol { justify-content: center; }
  .hv-demo-hero .page-hero__lead { margin-inline: auto; }
}
.hv-buehne { margin-top: clamp(1.75rem, 4vw, 2.75rem); text-align: left; }
.hv-buehne .video { margin-inline: auto; }