/*
 * Token-Alias-Layer.
 *
 * Beide Components leben in einer Shadow DOM. Webflow-KLASSEN greifen dort nicht,
 * CSS-Custom-Properties erben aber durch die Grenze. Das Mapping ist mechanisch:
 * `--x--y` im Design-System entspricht `--_x---y` in Webflow.
 *
 * Hier werden die Webflow-Variablen einmal auf kurze interne Namen gelegt - immer mit
 * echtem Fallback, denn --shadow-* und die Gradienten sind KEINE Webflow-Variablen und
 * im Vite-Harness existiert gar keine davon.
 *
 * Niemals eine Farbe direkt hardcoden: die Collection `Color` hat sieben Modi
 * (Base, Dark, Dark Petrol, Brand, Footer, Hero Light, Surface). Ein fester Hex-Wert
 * bricht den Dark-Mode.
 *
 * :host trifft im Webflow-Shadow-Root, :root im lokalen Harness.
 */
:host,
:host {
  --dsw-text: var(--_color---text, #10222b);
  --dsw-text-secondary: var(--_color---text-secondary, #4a5c63);
  --dsw-text-tertiary: var(--_color---text-tertiary, #6b7d84);
  --dsw-text-on-brand: var(--_color---text-on-brand, #ffffff);
  --dsw-surface: var(--_color---surface, #f4f6f7);
  --dsw-surface-brand: var(--_color---surface-brand, #e6f1f3);
  --dsw-background: var(--_color---background, #ffffff);
  --dsw-border: var(--_color---border, #dfe5e7);
  --dsw-border-control: var(--_color---border-control, #c7d1d4);
  --dsw-brand: var(--_color---brand, #0f7683);
  --dsw-focus: var(--_color---focus-ring, #0f7683);

  --dsw-radius-s: var(--_radius---small, 0.5rem);
  --dsw-radius-m: var(--_radius---medium, 0.75rem);
  --dsw-radius-pill: var(--_radius---pill, 9999px);

  --dsw-space-2xs: var(--_space---xxsmall, 0.25rem);
  --dsw-space-xs: var(--_space---xsmall, 0.5rem);
  --dsw-space-s: var(--_space---small, 1rem);
  --dsw-space-m: var(--_space---medium, 2rem);

  --dsw-font: inherit;
}

/* Sichtbar nur fuer Screenreader - im Design fuer die aria-live-Meldung benutzt. */
.dsw-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dsw-player {
  display: flex;
  flex-direction: column;
  gap: var(--dsw-space-s);
  font-family: var(--dsw-font);
  color: var(--dsw-text);
}

/*
 * Der Rahmen reserviert die Flaeche ueber aspect-ratio - und steht seit SSR schon im
 * initialen HTML. container-type liefert die cqw-Einheit fuer den Play-Button, der
 * wie bei Wistia mit der Framebreite skaliert.
 */
.dsw-player__frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--dsw-player-aspect, 16 / 9);
  overflow: hidden;
  background: var(--dsw-surface);
  border-radius: var(--dsw-player-radius, 0px);
  container-type: inline-size;
}

/* ---- Facade: Poster + Play-Button, bis der Player bereit ist ---- */

.dsw-player__poster,
.dsw-player__poster img {
  display: block;
  width: 100%;
  height: 100%;
}

.dsw-player__poster {
  position: absolute;
  inset: 0;
}

.dsw-player__poster img {
  object-fit: cover;
  user-select: none;
}

/* Nur der Swatch (ohne CMS-Poster): winzig und unscharf, wie vorher ueber :not(:defined). */
.dsw-player__poster[data-kind="swatch"] img {
  filter: blur(5px);
  transform: scale(1.04);
}

/*
 * Nachbau von Wistias .w-big-play-button, gemessen am 29.10.2026 auf www.docusnap.com:
 * 125x80 px bei Frames ab 640 px, darunter proportional (380 px -> 74x47.5 px),
 * zentriert, Radius 9 px, Markenfarbe 70 % ueber einem Darken-Layer in Vollfarbe,
 * Hover rgba(0,37,50,.7), Glyphe weiss. Die ganze Flaeche ist klickbar - wie bei Wistia.
 */
.dsw-player__play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

span.dsw-player__play {
  cursor: default;
}

.dsw-player__play-glyph {
  position: relative;
  display: block;
  width: 125px;
  height: 80px;
  border-radius: 9px;
  overflow: hidden;
  background-color: var(--dsw-player-color, #0f7683);
  /* Wistia setzt den Button 3 px ueber die Mitte (gemessen: 206 statt 209 px bei 498 px Hoehe). */
  transform: translateY(-3px);
}

@supports (width: 1cqw) {
  .dsw-player__play-glyph {
    width: min(125px, 19.53125cqw);
    height: min(80px, 12.5cqw);
  }
}

/* Darken-Layer in Vollfarbe, darueber die 70-%-Schicht - exakt Wistias Schichtung. */
.dsw-player__play-glyph::before,
.dsw-player__play-glyph::after {
  content: "";
  position: absolute;
  inset: 0;
}

.dsw-player__play-glyph::before {
  background: var(--dsw-player-color, #0f7683);
  mix-blend-mode: darken;
}

.dsw-player__play-glyph::after {
  background-color: color-mix(in srgb, var(--dsw-player-color, #0f7683) 70%, transparent);
  transition: background-color 150ms;
}

.dsw-player__play:hover .dsw-player__play-glyph::after {
  background-color: rgba(0, 37, 50, 0.7);
}

.dsw-player__play-glyph svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.dsw-player__play:focus-visible {
  outline: none;
}

.dsw-player__play:focus-visible .dsw-player__play-glyph {
  box-shadow:
    inset 0 0 0 2px #ffffff,
    inset 0 0 0 4px #101014;
}

/* ---- Player ---- */

/*
 * Der Player liegt ueber dem Poster und wird erst sichtbar, wenn api-ready kam. Bis
 * dahin bleibt das Poster stehen - kein Flackern zwischen Poster, Swatch und Still.
 * opacity statt visibility, damit Wistia Groesse und Sichtbarkeit normal misst.
 */
.dsw-player__frame wistia-player {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.dsw-player[data-status="ready"] .dsw-player__frame wistia-player {
  opacity: 1;
}

/* Lade- und Fehlerzustand liegen ueber dem Player und verschwinden mit ihm. */
.dsw-player__state {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--dsw-space-s);
  padding: var(--dsw-space-m);
  text-align: center;
  background: var(--dsw-surface);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dsw-text-secondary);
}

/*
 * Laden passiert jetzt nach dem Klick, ueber dem sichtbaren Poster. Ein dunkler
 * Schleier statt einer deckenden Flaeche - die Farbe bezieht sich auf das Bild
 * darunter, nicht auf das Theme, deshalb hier ausnahmsweise fest.
 */
.dsw-player__state--loading {
  background: rgba(16, 34, 43, 0.45);
  color: #ffffff;
  pointer-events: none;
}

.dsw-player__state p {
  margin: 0;
  max-width: 34rem;
}

/* Nachbau von DocusnapDS.Button variant="ghost" aus den Tokens. */
.dsw-player__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--dsw-space-xs);
  min-height: 2.5rem;
  padding: var(--dsw-space-2xs) var(--dsw-space-s);
  border: 1px solid var(--dsw-border-control);
  border-radius: var(--dsw-radius-s);
  background: var(--dsw-background);
  color: var(--dsw-text);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.dsw-player__button:hover {
  background: var(--dsw-surface);
  border-color: var(--dsw-brand);
}

.dsw-player__button:focus-visible,
.dsw-chapters__link:focus-visible {
  outline: 2px solid var(--dsw-focus);
  outline-offset: 2px;
}

.dsw-player__button svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}

.dsw-player__actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dsw-space-xs);
}

/* ---- Kapitel ---- */

.dsw-chapters__heading {
  margin: 0 0 var(--dsw-space-xs);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--dsw-text);
}

.dsw-chapters__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dsw-chapters__link {
  display: flex;
  align-items: center;
  gap: var(--dsw-space-xs);
  width: 100%;
  min-height: 2.75rem;
  padding: var(--dsw-space-xs);
  border: none;
  border-radius: var(--dsw-radius-s);
  background: transparent;
  color: var(--dsw-text-secondary);
  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.dsw-chapters__link:hover {
  background: var(--dsw-surface);
  color: var(--dsw-text);
}

.dsw-chapters__link[aria-current="true"] {
  background: var(--dsw-surface-brand);
  color: var(--dsw-text);
  font-weight: 600;
}

.dsw-chapters__time {
  flex: none;
  min-width: 3rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--dsw-text-tertiary);
}

.dsw-chapters__title {
  flex: 1;
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .dsw-player__button,
  .dsw-chapters__link,
  .dsw-player__play-glyph::after {
    transition-duration: 0.01ms;
  }
}