/* ============================================================================
   SD-Link — Produktvideos (inc/produktvideo.php, assets/js/sdlink-produktvideo.js)
   Abschnitt „So funktioniert es“ unter der Kaufbox (Entwurf B, Claude Design,
   Handoff prodflux docs/specs/handoff_produktvideos), Infobox-Zeile, Block auf
   den Handbuchseiten über den PDFs.
   ============================================================================ */

.sd-pv[hidden], .sd-pv-link[hidden], .sd-pv [hidden] { display: none !important; }

/* Volle Breite im zweispaltigen PDP-Grid (sdlink-shop.css) */
@media (min-width: 1025px) {
  body.single-product div.product > .sd-pv { grid-column: 1 / -1; }
}

/* ----- Abschnitt unter der Kaufbox --------------------------------------- */
.sd-pv--pdp {
  margin: 28px 0 32px; padding: 30px 34px 26px;
  background: var(--sd-navy-800); color: #fff; border-radius: var(--r-xl);
  scroll-margin-top: 90px;
}
.sd-pv__eyebrow {
  margin: 0; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sd-amber-500);
}
.sd-pv--pdp .sd-pv__titel {
  margin: 6px 0 18px; color: #fff; font-size: 26px; line-height: 1.2; font-weight: 700;
}
.sd-pv__raster {
  display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 32px; align-items: start;
}
.sd-pv__raster--ohne-kapitel { grid-template-columns: minmax(0, 1fr); max-width: 900px; }

.sd-pv__player {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: var(--sd-navy-900); box-shadow: var(--shadow-2);
}
.sd-pv__player video {
  width: 100%; height: 100%; display: block; object-fit: contain; background: var(--sd-navy-900);
}
.sd-pv__player video::cue { font-family: var(--font-body); line-height: 1.35; }
.sd-pv__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 84px; height: 84px; border: 0; border-radius: 50%; padding: 0 0 0 4px;
  display: none; align-items: center; justify-content: center; cursor: pointer;
  background: var(--sd-amber-500); color: var(--sd-navy-900); box-shadow: var(--shadow-2);
  transition: transform .15s ease, background-color .15s ease;
}
.sd-pv.is-ready .sd-pv__start { display: flex; }
.sd-pv.is-playing .sd-pv__start,
.sd-pv.is-playing .sd-pv__dauer { display: none; }
.sd-pv__start:hover { background: var(--sd-amber-600); transform: translate(-50%, -50%) scale(1.05); }
.sd-pv__start:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.sd-pv__dauer {
  position: absolute; right: 10px; bottom: 10px; pointer-events: none;
  background: rgba(10, 27, 46, .85); color: #fff; font-family: var(--font-mono);
  font-size: 13px; font-weight: 600; padding: 2px 8px; border-radius: 6px;
}

.sd-pv__seitenkopf {
  margin: 0 0 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sd-navy-200);
}
.sd-pv__kapitel { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sd-pv__kapitel a {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center;
  min-height: 48px; padding: 10px 14px; border-radius: 12px; text-decoration: none;
  background: var(--sd-navy-700); color: #fff; transition: background-color .15s ease;
}
.sd-pv__kapitel a:has(img) { grid-template-columns: 88px auto minmax(0, 1fr); padding: 8px 12px 8px 8px; }
.sd-pv__kapitel a:hover, .sd-pv__kapitel a:focus-visible { background: var(--sd-navy-600); color: #fff; }
.sd-pv__kapitel a:focus-visible { outline: 3px solid var(--sd-amber-500); outline-offset: 2px; }
.sd-pv__kapitel img { width: 88px; height: 50px; object-fit: cover; border-radius: 6px; display: block; }
.sd-pv__t { font-family: var(--font-mono); font-size: 13px; color: var(--sd-navy-300); }
.sd-pv__n { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sd-pv__fuss { margin: 12px 0 0; font-size: 13px; color: var(--sd-navy-200); }

@media (max-width: 1024px) {
  .sd-pv__raster { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 720px) {
  /* Kein Vollbluten mit negativem Rand: div.product schneidet mobil ab (DEV 18.10.2026). */
  .sd-pv--pdp { margin: 20px 0 24px; padding: 20px 14px 18px; border-radius: var(--r-lg); }
  .sd-pv--pdp .sd-pv__titel { font-size: 21px; margin-bottom: 14px; }
  .sd-pv__start { width: 64px; height: 64px; }
  .sd-pv__kapitel { gap: 8px; }
  .sd-pv__n { font-size: 14px; }
}

/* ----- Infobox-Zeile „So funktioniert es: Video ansehen (1:50)“ ----------- */
.sd-pdp-know li.sd-pv-link {
  background: var(--sd-navy-100); border-radius: 8px; padding: 7px 10px; margin: 0 -6px;
  color: var(--sd-ink);
}

/* ----- Handbuchseite: Block über den PDFs -------------------------------- */
.sd-pv--handbuch {
  margin: 8px 0 36px; padding: 20px; border: 1px solid var(--sd-line); border-radius: 16px;
  background: var(--bg-surface);
}
.sd-pv--handbuch .sd-pv__raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sd-pv--handbuch h3 { margin: 4px 0 8px; }
.sd-pv--handbuch .sd-pv__eyebrow { color: var(--sd-amber-600); }
.sd-pv--handbuch .sd-pv__kapitel a,
.sd-pv--handbuch .sd-pv__kapitel a:hover { text-decoration: none; }
.sd-pv--pdp .sd-pv__kapitel a,
.sd-pv--pdp .sd-pv__kapitel a:hover { text-decoration: none; }
.sd-pv--handbuch p { margin: 0 0 12px; }
.sd-pv--handbuch .sd-pv__kapitel a { background: var(--sd-navy-050); color: var(--sd-ink); min-height: 44px; padding: 8px 12px; }
.sd-pv--handbuch .sd-pv__kapitel a:hover,
.sd-pv--handbuch .sd-pv__kapitel a:focus-visible { background: var(--sd-navy-100); color: var(--sd-ink); }
.sd-pv--handbuch .sd-pv__t { color: var(--sd-navy-600); }
.sd-pv--handbuch .sd-pv__n { font-size: 14.5px; }
@media (max-width: 1024px) {
  .sd-pv--handbuch .sd-pv__raster { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 720px) {
  .sd-pv--handbuch { padding: 12px; }
}

/* Handbuch: schmale Inhaltsspalte, Kapitel als ruhige Textliste ohne Standbilder */
.sd-pv__n { word-break: normal; overflow-wrap: normal; hyphens: auto; }
.sd-pv--handbuch .sd-pv__kapitel { gap: 6px; }
.sd-pv--handbuch .sd-pv__kapitel img { display: none; }
.sd-pv--handbuch .sd-pv__kapitel a,
.sd-pv--handbuch .sd-pv__kapitel a:has(img) { grid-template-columns: 3.2em minmax(0, 1fr); gap: 10px; padding: 7px 12px; min-height: 40px; }