/**
 * VK Popup Maker - Frontend
 *
 * WICHTIG: Jede Farbe steht explizit auf dem Element, das sie braucht.
 * Vererbung vom Container reicht im Shop nicht, weil Woostify h1-h6, p und
 * button global einfärbt. Am 02.09.2026 kam eine Überschrift ohne eigene
 * Farbangabe dunkelgrau auf dunklem Grund heraus. Die Selektoren stehen
 * deshalb mit .vkpm davor (höhere Spezifität als reine Elementregeln des
 * Themes) und die Werte kommen aus CSS-Variablen, die das Theme des Popups
 * setzt.
 */

.vkpm {
  --vkpm-z: 99999;
  /* Überschriften-Stack. Acumin ist eine Adobe-Schrift und steht nur auf
     Rechnern mit Creative Cloud zur Verfügung, Oswald lädt der Shop nur auf
     Produktseiten. Besucher sehen deshalb in aller Regel Poppins, also die
     Schrift des Shops - das Popup wirkt dadurch wie ein Teil der Seite. Den
     Markencharakter tragen Versalien, Sperrung und Farbe, nicht die Schrift. */
  --vkpm-font-head: 'Acumin Pro Extra Condensed', 'Oswald', 'Poppins', Arial, sans-serif;
  position: fixed;
  inset: 0;
  z-index: var(--vkpm-z);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity .22s ease;
  font-size: 16px;
  line-height: 1.5;
}

.vkpm[hidden] { display: none; }
.vkpm.is-open { display: flex; }
.vkpm.is-visible { opacity: 1; }
.vkpm *, .vkpm *::before, .vkpm *::after { box-sizing: border-box; }

/* Abdunklung. Bei Slide-in und Leiste bewusst weg: Die sollen den Rest der
   Seite bedienbar lassen, das ist der ganze Sinn dieser Formate. */
.vkpm .vkpm-overlay {
  position: absolute;
  inset: 0;
  background: var(--vkpm-overlay, rgba(24, 33, 39, .72));
}
.vkpm--slidein .vkpm-overlay,
.vkpm--bar .vkpm-overlay { display: none; }

.vkpm .vkpm-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--vkpm-bg, #2F3E47);
  color: var(--vkpm-text, #eef1f2);
  border-radius: var(--vkpm-radius, 16px);
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
  transform: translateY(14px);
  transition: transform .22s ease;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.vkpm.is-visible .vkpm-panel { transform: translateY(0); }

.vkpm--anim-none .vkpm-panel,
.vkpm--anim-none { transition: none; }

.vkpm--small .vkpm-panel { max-width: 400px; }
.vkpm--medium .vkpm-panel { max-width: 520px; }
.vkpm--large .vkpm-panel { max-width: 680px; }

/* ------------------------------------------------- Hintergrundbild / -video

   Zwei Anordnungen, gesteuert ueber die Klasse am Wurzelelement:

   vkpm--media-top    Streifen oben, Text darunter auf ruhigem Grund. Das Bild
                      bleibt unangetastet sichtbar, der Text steht nie darauf.
                      Fuer helles Material die einzige Anordnung, die sicher
                      lesbar bleibt - deshalb der Standard.
   vkpm--media-cover  Fuellt die ganze Karte, der Text liegt darauf. Braucht
                      den Schleier, und selbst dann schluckt er das Motiv. Nur
                      fuer dunkles, ruhiges Material sinnvoll. */
.vkpm .vkpm-media {
  display: block;
  width: 100%;
  object-fit: cover;
  background: var(--vkpm-bg, #2F3E47);
}

/* --- Streifen oben ------------------------------------------------------ */
.vkpm--media-top .vkpm-media {
  aspect-ratio: 3 / 2;
  height: auto;
}
/* Weicher Uebergang ins Panel, damit die Kante nicht wie abgeschnitten wirkt. */
.vkpm--media-top .vkpm-veil {
  position: relative;
  height: 0;
  margin-top: -72px;
  padding-bottom: 72px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(47, 62, 71, 0) 0%, var(--vkpm-bg, #2F3E47) 100%);
}

/* --- Ganze Karte -------------------------------------------------------- */
.vkpm--media-cover .vkpm-media {
  position: absolute;
  inset: 0;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* Zwei Schichten: eine gleichmaessige Grundabdunklung, deren Staerke am Popup
   einstellbar ist (--vkpm-veil-a aus dem Feld "Abdunklung"), und darueber ein
   Verlauf, der nach unten zunimmt. Unter 70 % wird weisser Text auf hellen
   Stellen unlesbar. */
.vkpm--media-cover .vkpm-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(47, 62, 71, 0) 0%,
      rgba(47, 62, 71, .18) 45%,
      rgba(47, 62, 71, .45) 100%),
    rgba(47, 62, 71, var(--vkpm-veil-a, .7));
}
/* Inhalt über den Schleier heben. Der Schließen-Knopf steht schon auf
   position:absolute mit z-index 2 und wird hier bewusst nicht angefasst -
   ein relative würde ihn aus seiner Ecke reißen. */
.vkpm--media-cover .vkpm-stripe,
.vkpm--media-cover .vkpm-body { position: relative; z-index: 2; }

/* Markenstreifen oben. Rein dekorativ, macht das Popup ohne Bild wiedererkennbar. */
.vkpm .vkpm-stripe {
  height: 8px;
  background: var(--vkpm-highlight, #F5EA81);
}

/* Schließen oben rechts, immer sichtbar, Fingerkuppen-tauglich (44px). */
.vkpm .vkpm-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  min-width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(127, 127, 127, .22);
  color: var(--vkpm-heading, #fff);
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}
.vkpm .vkpm-close:hover { background: rgba(127, 127, 127, .38); }
.vkpm .vkpm-close:focus-visible { outline: 2px solid var(--vkpm-secondary, #51BAAF); outline-offset: 2px; }
.vkpm .vkpm-close[hidden] { display: none; }

.vkpm .vkpm-body { padding: 34px 36px 30px; }

/* --------------------------------------------------- Bausteine für den Body */

/* Diese drei sind im Normalfall <p> und stehen im .vkpm-body. Die generische
   Regel .vkpm .vkpm-body p hat mit ihrem Element-Selektor eine höhere
   Spezifität als eine reine Klassenregel und würde sie sonst überschreiben
   (im Test genau so passiert: der Kicker kam in Fließtextfarbe). Deshalb
   ebenfalls unter .vkpm-body geschrieben, mit einer Klasse mehr. */
.vkpm .vkpm-body .vkpm-kicker {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vkpm-secondary, #51BAAF);
}
.vkpm .vkpm-h,
.vkpm .vkpm-body h2 {
  margin: 0 0 6px;
  font-family: var(--vkpm-font-head);
  font-size: 34px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--vkpm-heading, #fff);
}
.vkpm .vkpm-h em,
.vkpm .vkpm-body h2 em { font-style: normal; color: var(--vkpm-highlight, #F5EA81); }
.vkpm .vkpm-body h3 { margin: 0 0 8px; font-size: 20px; color: var(--vkpm-heading, #fff); }
.vkpm .vkpm-rule {
  height: 4px;
  width: 64px;
  background: var(--vkpm-accent, #E27327);
  border-radius: var(--vkpm-radius-s, 2px);
  margin: 14px 0 16px;
}
.vkpm .vkpm-body p { margin: 0 0 20px; font-size: 17px; line-height: 1.53; color: var(--vkpm-text, #eef1f2); }
.vkpm .vkpm-body p small { color: var(--vkpm-muted, #93a0a6); }
.vkpm .vkpm-body a { color: var(--vkpm-secondary, #51BAAF); }
.vkpm .vkpm-body ul, .vkpm .vkpm-body ol { margin: 0 0 20px; padding-left: 20px; color: var(--vkpm-text, #eef1f2); }
.vkpm .vkpm-body img { max-width: 100%; height: auto; border-radius: var(--vkpm-radius-s, 8px); }

.vkpm .vkpm-choices { display: grid; gap: 10px; margin: 0 0 4px; }
.vkpm .vkpm-choice {
  font: inherit;
  font-size: 17px;
  text-align: left;
  background: var(--vkpm-field-bg, #20303a);
  color: var(--vkpm-heading, #fff);
  border: 1px solid var(--vkpm-border, #3c4d57);
  border-radius: var(--vkpm-radius-s, 10px);
  padding: 16px 18px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.vkpm .vkpm-choice:hover { border-color: var(--vkpm-accent, #E27327); }
.vkpm .vkpm-choice:focus-visible { outline: 2px solid var(--vkpm-secondary, #51BAAF); outline-offset: 1px; }
.vkpm .vkpm-choice span:last-child { color: var(--vkpm-accent, #E27327); font-weight: 700; }

.vkpm .vkpm-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.vkpm .vkpm-form input[type=email] {
  flex: 1 1 220px;
  font: inherit;
  font-size: 17px;
  padding: 15px 16px;
  border-radius: var(--vkpm-radius-s, 10px);
  border: 1px solid var(--vkpm-border, #3c4d57);
  background: var(--vkpm-field-bg, #20303a);
  color: var(--vkpm-heading, #fff);
  min-width: 0;
}
.vkpm .vkpm-form input[type=email]::placeholder { color: var(--vkpm-muted, #8b969b); opacity: 1; }
.vkpm .vkpm-form input[type=email]:focus { outline: 2px solid var(--vkpm-secondary, #51BAAF); outline-offset: 1px; }

.vkpm .vkpm-submit {
  font: inherit;
  font-family: var(--vkpm-font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: var(--vkpm-accent, #E27327);
  color: var(--vkpm-accent-text, #fff);
  border: 0;
  border-radius: var(--vkpm-radius-s, 10px);
  padding: 15px 26px;
  cursor: pointer;
  flex: 0 0 auto;
}
.vkpm .vkpm-submit:disabled { opacity: .6; cursor: default; }
.vkpm .vkpm-submit:focus-visible { outline: 2px solid var(--vkpm-secondary, #51BAAF); outline-offset: 2px; }

.vkpm .vkpm-body .vkpm-legal { margin: 14px 0 0; font-size: 13px; line-height: 1.45; color: var(--vkpm-muted, #8b969b); }
.vkpm .vkpm-body .vkpm-legal a { color: var(--vkpm-secondary, #51BAAF); }
.vkpm .vkpm-body .vkpm-error { margin: 10px 0 0; font-size: 15px; color: #ffb4a0; }
.vkpm .vkpm-error[hidden] { display: none; }

.vkpm .vkpm-back {
  background: none;
  border: 0;
  color: var(--vkpm-muted, #93a0a6);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
  margin: 16px 0 0;
  text-decoration: underline;
}

.vkpm .vkpm-usp {
  margin: 22px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--vkpm-border, #3c4d57);
  font-size: 15px;
  line-height: 1.53;
  color: var(--vkpm-text, #c8d0d4);
}
.vkpm .vkpm-usp b { color: var(--vkpm-heading, #fff); }
.vkpm .vkpm-usp i { font-style: normal; color: var(--vkpm-accent, #E27327); font-weight: 700; }

/* Schritte: nur der aktive ist sichtbar. */
.vkpm [data-vkpm-step] { display: none; }
.vkpm [data-vkpm-step].is-active { display: block; }

/* Honeypot und Screenreader-Label aus dem Blickfeld, aber nicht display:none
   (manche Bots ignorieren ausgeblendete Felder). */
.vkpm .vkpm-hp,
.vkpm .vkpm-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* ------------------------------------------------------------ Slide-in */

.vkpm--slidein {
  display: none;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 20px;
  pointer-events: none;                 /* Seite bleibt bedienbar */
}
.vkpm--slidein.is-open { display: flex; }
.vkpm--slidein .vkpm-panel { pointer-events: auto; max-width: 380px; transform: translateY(24px); }
.vkpm--slidein.vkpm--pos-bl { justify-content: flex-start; }
.vkpm--slidein .vkpm-body { padding: 28px 26px 24px; }

/* ------------------------------------------------------------ Leiste */

.vkpm--bar {
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none;
}
.vkpm--bar.is-open { display: flex; }
.vkpm--bar.vkpm--pos-top { align-items: flex-start; }
.vkpm--bar .vkpm-panel {
  pointer-events: auto;
  max-width: none;
  width: 100%;
  border-radius: 0;
  transform: translateY(12px);
  max-height: none;
}
.vkpm--bar .vkpm-stripe { height: 4px; }
.vkpm--bar .vkpm-body {
  padding: 16px 64px 16px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.vkpm--bar .vkpm-body p { margin: 0; font-size: 16px; }
.vkpm--bar .vkpm-h, .vkpm--bar .vkpm-body h2 { font-size: 20px; margin: 0; }
.vkpm--bar .vkpm-rule { display: none; }
.vkpm--bar .vkpm-close { top: 50%; transform: translateY(-50%); }

/* ------------------------------------------------------------ Mobil */

@media (max-width: 600px) {
  .vkpm { padding: 12px; }
  .vkpm .vkpm-body { padding: 28px 22px 24px; }
  .vkpm .vkpm-h, .vkpm .vkpm-body h2 { font-size: 28px; }
  .vkpm .vkpm-submit { flex: 1 1 100%; }
  .vkpm .vkpm-panel { max-height: calc(100vh - 24px); }

  /* Slide-in wird zum Bottom-Sheet: volle Breite, nur oben gerundet.
     Das ist auf kleinen Displays das am wenigsten störende Format. */
  .vkpm--slidein { padding: 0; align-items: flex-end; justify-content: center; }
  .vkpm--slidein .vkpm-panel {
    max-width: none;
    width: 100%;
    border-radius: var(--vkpm-radius, 16px) var(--vkpm-radius, 16px) 0 0;
  }

  .vkpm--bar .vkpm-body { padding: 14px 56px 14px 16px; text-align: center; }

  /* Auf dem Handy zaehlt jede Zeile: flacherer Bildstreifen, damit Formular
     und Knopf ohne Scrollen im Bild bleiben. */
  .vkpm--media-top .vkpm-media { aspect-ratio: 16 / 9; }
  .vkpm--media-top .vkpm-veil { margin-top: -56px; padding-bottom: 56px; }
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .vkpm, .vkpm .vkpm-panel { transition: none; }
  .vkpm .vkpm-media { animation: none; }
}