/* =============================================================================
   KURZ Digital – Video-Play-Button + Lightbox
   Farbe: Corporate-Grün #C8D400
   ========================================================================== */

.kd-video-btn {
  --kd-green: #c8d400;
  --kd-ring: 4px;               /* Ringstärke */
  --kd-size: 72px;              /* sichtbarer Kreis-Durchmesser (per inline-style überschreibbar) */
  --kd-pad: 0px;               /* transparenter Puffer, in dem der Schatten Platz hat */

  position: relative;
  /* Layout-Eigenschaften mit !important, damit Astra-/Spectra-Button-Regeln
     den Button nicht auf volle Breite ziehen (sonst wird der Kreis zum Oval). */
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;                        /* falls Parent ein Flex-Container ist */
  box-sizing: content-box !important;    /* Padding vergrößert die Box, Kreis bleibt --kd-size */
  width: var(--kd-size) !important;
  height: var(--kd-size) !important;
  min-width: 0;
  max-width: none;
  padding: var(--kd-pad) !important;     /* Schatten-Puffer rundherum -> kein Clipping */
  margin: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;           /* keine Theme-Button-Schatten */
  line-height: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease;
}

/* Kein Skalieren des ganzen Buttons mehr – nur das Dreieck wächst beim Hover
   (siehe .kd-video-btn__play unten). */

.kd-video-btn:focus {
  outline: none;
}

/* Wrapper: stapelt Kreis + Text und zentriert sie */
.kd-video-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.button-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  font-weight: 300;
  margin-top: 12px;
}
/* Fokusring eng am sichtbaren Kreis (nicht an der großen Puffer-Box). */
.kd-video-btn:focus-visible .kd-video-btn__disc {
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15), 0 0 0 3px rgba(200, 212, 0, .6);
}

/* ---- Ring ---------------------------------------------------------------- */
/* Ruhezustand: durchgehend grüner Ring (= klickbar). */
.kd-video-btn__ring {
  position: absolute;
  inset: var(--kd-pad);
  border-radius: 50%;
  background: var(--kd-green);
  -webkit-mask: radial-gradient(farthest-side,
      transparent calc(100% - var(--kd-ring)), #000 calc(100% - var(--kd-ring)));
          mask: radial-gradient(farthest-side,
      transparent calc(100% - var(--kd-ring)), #000 calc(100% - var(--kd-ring)));
  transition: opacity .2s ease;
}

/* Ladezustand nach Klick: rotierender Conic-Gradient (weiß -> grün). */
.kd-video-btn.is-loading .kd-video-btn__ring {
  background: conic-gradient(from 0deg,
      #ffffff 0deg, var(--kd-green) 300deg, var(--kd-green) 360deg);
  animation: kd-spin .8s linear infinite;
}

@keyframes kd-spin {
  to { transform: rotate(360deg); }
}

/* ---- Weiße Scheibe ------------------------------------------------------- */
.kd-video-btn__disc {
  position: absolute;
  inset: calc(var(--kd-pad) + var(--kd-ring));
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  transition: box-shadow .2s ease;
}

.kd-video-btn:hover .kd-video-btn__disc {
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

/* ---- Play-Dreieck -------------------------------------------------------- */
.kd-video-btn__play {
  width: 48%;
  height: 48%;
  fill: var(--kd-green);
  stroke: var(--kd-green);     /* rundet zusammen mit linejoin die Ecken */
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: transform .2s ease;
}

.kd-video-btn:hover .kd-video-btn__play {
  transform: scale(1.15);
}

/* Während des Ladens das Dreieck etwas zurücknehmen. */
.kd-video-btn.is-loading .kd-video-btn__play {
  opacity: .35;
}

/* =============================================================================
   Lightbox / Overlay
   ========================================================================== */
.kd-video-modal {
  position: fixed;
  inset: 0;
  z-index: 999999;             /* deutlich über dem Astra-(Sticky-)Header */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(0, 0, 0, .82);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.kd-video-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.kd-video-modal__inner {
  position: relative;
  width: min(1040px, 100%);
  aspect-ratio: 16 / 9;
  max-height: 100%;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: scale(.96);
  transition: transform .25s ease;
}

.kd-video-modal.is-open .kd-video-modal__inner {
  transform: scale(1);
}

.kd-video-modal__video {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
}

/* Schließen-Button: fest oben rechts im Bildschirm (direktes Kind von .kd-video-modal,
   das den ganzen Viewport abdeckt und keinen transform-Kontext hat). */
.kd-video-modal__close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #111;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  transition: transform .15s ease, background .15s ease;
  z-index: 3;
}

.kd-video-modal__close:hover {
  transform: scale(1.08);
  background: #f2f2f2;
}

.kd-video-modal__close:focus-visible {
  outline: 3px solid var(--kd-green, #c8d400);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .kd-video-modal__close {
    top: 12px;
    right: 12px;
    width: 42px;
    height: 42px;
  }
}

/* =============================================================================
   prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .kd-video-btn,
  .kd-video-btn__disc,
  .kd-video-btn__play,
  .kd-video-modal,
  .kd-video-modal__inner,
  .kd-video-modal__close {
    transition: none;
  }
  .kd-video-btn.is-loading .kd-video-btn__ring {
    animation-duration: 1.6s;
  }
}