/**
 * paragraph__bk____popup_stoerer.css
 *
 * Konventionen: Custom Properties (--bk-popup-*) statt Inline-<style>,
 * keine 100vw-Fallen, prefers-reduced-motion für die Parallax-Bewegung.
 *
 * .paragraph--type--bk----popup-stoerer hat height: 0, damit der Paragraph
 * selbst keinen Platz im Fluss einnimmt (Popup ist positioniert).
 */

.paragraph.paragraph--type--bk----popup-stoerer {
  height: 0px;
}

.bk-popup {
  position: fixed;
  display: none;
  z-index: 2;
  width: var(--bk-popup-width, auto);
  height: var(--bk-popup-height, auto);
}

/* Mobile-first: Popup wird erst ab 640px Viewport sichtbar.
   Auf kleineren Screens würde es zu viel Inhalt verdecken. */
@media only screen and (min-width: 640px) {
  .bk-popup {
    display: block;
  }
}

/* Position: rechts/links/oben/unten + Wert/Einheit kommen als
   --bk-popup-<prop> Custom Properties aus dem Twig. */
.bk-popup {
  left: var(--bk-popup-left, auto);
  right: var(--bk-popup-right, auto);
  top: var(--bk-popup-top, auto);
  bottom: var(--bk-popup-bottom, auto);
}

/* ── Position-Varianten ──────────────────────────────────────────────── */

.bk-popup--fixed {
  position: fixed;
}

/* fixed_paralax: Element ist Teil des normalen Layoutflusses (absolute zum
   nächsten positionierten Vorfahren) und wird zusätzlich per JS mit einem
   Parallax-Faktor ungleich 1 verschoben (langsamer/schneller als der
   normale Scroll). */
.bk-popup--fixed-paralax {
  position: absolute;
  will-change: transform;
}

/* Schatten via drop-shadow am Wrapper, damit er der tatsächlich
   gerenderten Form folgt (Kreis, Anschrägung) — box-shadow würde
   den rechteckigen Bounding-Box-Rahmen abbilden. */
.bk-popup--fixed-paralax {
  filter: drop-shadow(0 8px 16px rgba(7, 38, 45, 0.25));
}

@media (prefers-reduced-motion: reduce) {
  .bk-popup--fixed-paralax {
    /* Parallax-Verschiebung deaktivieren, Element bleibt an Grundposition. */
    transform: none !important;
  }
}

/* ── Shape-Varianten ──────────────────────────────────────────────────── */

/* bitkom_digit: markentypischer Anschnitt (Polygon, wie bisher). Wird auf
   .bk-popup__wrapper angewendet, NICHT auf .bk-popup, damit der
   Close-Button (Geschwister des Wrappers) nicht mit-geclippt wird. */
.bk-popup--shape-bitkom-digit .bk-popup__wrapper {
  clip-path: polygon(0 0, 100% 0, 100% 92.5%, 0% 100%);
}

/* circle: echter Kreis, kein Anschnitt. */
.bk-popup--shape-circle .bk-popup__wrapper {
  border-radius: 50%;
}

/* ── Close-Button ─────────────────────────────────────────────────────── */

.bk-popup__close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--bk-popup-close-color, #ffffff);
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}

.bk-popup__close:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* circle: Close-Button liegt außerhalb des Kreis-Clippings (oben rechts in
   der quadratischen Bounding-Box). Eigene runde Fläche, damit er sichtbar
   und farblich erkennbar bleibt. */
.bk-popup--shape-circle .bk-popup__close {
  top: 4px;
  right: 4px;
  border-radius: 50%;
  background-color: var(--bk-popup-bg, #1a5ce5);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.bk-popup__wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  padding: 17px;
  color: var(--bk-popup-close-color, #ffffff);
  background-color: var(--bk-popup-bg, #1a5ce5);
}