.op-popup-wrapper { position: relative; }
.op-popup-overlay {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5); display: none; z-index: 1000;
}
.op-popup {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: 90vw; max-height: 90vh; overflow:auto; background:#fff;
  /* Standard: keine Kontur, nur Schatten */
  border: 0;
  outline: 0;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  /*
   * Platz für den Schließ-Button (oben rechts), damit Inhalte niemals darunter laufen.
   * -> oben mehr Padding (damit der Close-Button nicht in den Content ragt)
   * -> rechts mehr Padding (damit lange Überschriften/Zeilen nicht unter das X laufen)
   */
  padding: 2.75rem 3.75rem 1.25rem 3.75rem;
  display: none;
  z-index: 1001;
}

/* Mobile: weniger Padding, damit Inhalte nicht zu schmal werden */
@media (max-width: 480px) {
  .op-popup {
    padding: 2.5rem 2rem 1rem 2rem;
  }
}

.op-popup.op-size-s { width: 360px; }
.op-popup.op-size-m { width: 560px; }
.op-popup.op-size-l { width: 800px; }
.op-pos-bottom-right { left: auto; right: 20px; top: auto; bottom: 20px; transform: none; }
.op-pos-bottom-left  { left: 20px; right: auto; top: auto; bottom: 20px; transform: none; }
.op-pos-top          { left: 50%; top: 0; transform: translate(-50%, 10px); }
.op-pos-bottom       { left: 50%; bottom: 0; top: auto; transform: translate(-50%, -10px); }
.op-popup-close {
  position: absolute;
  /* mehr "oben rechts" (wie gewünscht) */
  top: 4px;
  right: 4px;
  z-index: 2;
  background: transparent;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * Keine Fokus-Outline am Popup/Schließer (User-Wunsch).
 * Hinweis: Das ist nicht ideal für Accessibility, wird hier aber bewusst deaktiviert.
 */
.op-popup:focus,
.op-popup:focus-visible,
.op-popup-close:focus,
.op-popup-close:focus-visible {
  outline: none;
  box-shadow: none;
}

/*
 * Inhalt darf niemals breiter als das Popup werden.
 * Gilt sowohl für HTML/RTE als auch für Content-Elemente.
 */
.op-popup-content {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Absoluter Schutz: kein Kind-Element darf breiter als der Popup-Innenbereich werden. */
.op-popup-content * {
  max-width: 100%;
  box-sizing: border-box;
}

.op-popup-content img,
.op-popup-content picture,
.op-popup-content video,
.op-popup-content iframe,
.op-popup-content embed,
.op-popup-content object,
.op-popup-content svg,
.op-popup-content canvas {
  max-width: 100%;
  height: auto;
}

/* Tabellen können sonst gerne "überlaufen" */
.op-popup-content table {
  max-width: 100%;
  width: 100%;
  table-layout: fixed;
}

.op-popup-content th,
.op-popup-content td {
  word-break: break-word;
}

/* Code/Pre darf nicht nach rechts aus dem Popup schieben */
.op-popup-content pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
}

/* Optionales Popup-Bild (nur HTML/RTE) */
.op-popup-media {
  margin: 0 0 1rem 0;
}
.op-popup-media img { display: block; }

.op-popup-media--left img {
  float: left;
  margin: 0 1rem 1rem 0;
  max-width: 45%;
}

.op-popup-media--right img {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 45%;
}

.op-popup-media--below { margin: 1rem 0 0 0; }

/* Kein Extra-Padding nötig, da .op-popup bereits ausreichend Reserven hat */
.op-popup-content { padding-right: 0; }

/* ------------------------------------------------------------
 * Design-Presets (per Popup wählbar)
 * Standard = aktueller Zustand (ohne op-design-* Klasse).
 * ------------------------------------------------------------ */

/* 1) Flat: kantig, ohne Schatten, klare Linie */
.op-design-flat .op-popup {
  border-radius: 0;
  box-shadow: none;
  /* keine Kontur (wie gewünscht) */
  border: 0;
  background: #fff;
}
.op-design-flat .op-popup-close {
  /* Flat: klar & eckig */
  top: 3px;
  right: 3px;
  width: 34px;
  height: 34px;
  border-radius: 0;
  background: rgba(0,0,0,0.08);
  font-size: 24px;
}

.op-design-flat .op-popup-close:hover { background: rgba(0,0,0,0.14); }
.op-design-flat .op-popup-overlay { background: rgba(0,0,0,0.45); }

/* 2) Simple: dezent, leicht abgerundet */
.op-design-simple .op-popup {
  border: 0;
  border-radius: 12px;
  /* etwas weicher als Standard */
  box-shadow: 0 14px 40px rgba(0,0,0,0.18);
  background: #fff;
}
.op-design-simple .op-popup-close {
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  font-size: 24px;
}
.op-design-simple .op-popup-close:hover { background: rgba(0,0,0,0.10); }

.op-design-simple .op-popup-overlay { background: rgba(0,0,0,0.52); }

/* 3) Modern (hell): mehr Radius, moderner Close-Button */
.op-design-modern .op-popup {
  border-radius: 18px;
  /* Modern: ganz leichte Kontur erlaubt */
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 22px 70px rgba(0,0,0,0.22);
  background: #fff;
}
.op-design-modern .op-popup-close {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.10);
  font-size: 24px;
}
.op-design-modern .op-popup-close:hover { background: rgba(0,0,0,0.10); }

.op-design-modern .op-popup-overlay { background: rgba(0,0,0,0.60); }

/* 4) Modern (dunkel): dunkler Container, heller Close-Button */
.op-design-modern-dark .op-popup {
  background: #15181d;
  color: #fff;
  border-radius: 18px;
  /* Modern: ganz leichte Kontur erlaubt */
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 22px 75px rgba(0,0,0,0.45);
}
.op-design-modern-dark .op-popup-close {
  top: 6px;
  right: 6px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  font-size: 24px;
}
.op-design-modern-dark .op-popup-close:hover { background: rgba(255,255,255,0.18); }
.op-design-modern-dark .op-popup-overlay { background: rgba(0,0,0,0.65); }