/*
 * Pagetal CMS – Pop-ups (ab v1.19.170, siehe includes/popups.php und assets/js/popup.js).
 * Grundstil der <dialog class="pagetal-popup">-Elemente; die individuellen Werte (Breite, Box-Farben,
 * Abdunklung, Schliessen-Knopf ...) kommen als <style> pro Pop-up (#pagetal-popup-<ID>) aus den
 * Pop-up-Einstellungen. Wird nur auf Seiten geladen, die mindestens ein Pop-up ausgeben.
 *
 * Aufbau: der <dialog> füllt als durchsichtiger Rahmen den Bildschirm (Position über data-position),
 * darin liegt die Box (.pagetal-popup-box) mit dem Schliessen-Knopf und dem scrollbaren Inhalt
 * (.pagetal-popup-inhalt) - es scrollt der Inhalt IM Pop-up, nie die Seite dahinter.
 */

.pagetal-popup {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  overflow: hidden;
}
.pagetal-popup:not([open]) { display: none; }
.pagetal-popup[open] { display: flex; align-items: center; justify-content: center; }

.pagetal-popup[data-position="rechts"] { justify-content: flex-end; align-items: stretch; padding: 0; }
.pagetal-popup[data-position="links"]  { justify-content: flex-start; align-items: stretch; padding: 0; }
.pagetal-popup[data-position="unten"]  { align-items: flex-end; justify-content: center; padding: 16px 16px 0; }

.pagetal-popup-box {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  min-height: 0;
  overflow: hidden;
  outline: none;
}
.pagetal-popup[data-position="rechts"] .pagetal-popup-box,
.pagetal-popup[data-position="links"] .pagetal-popup-box { height: 100%; max-height: none; }
.pagetal-popup[data-position="unten"] .pagetal-popup-box { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.pagetal-popup-inhalt {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
/* Bausteine auf Wurzel-Ebene tragen sonst die Seiten-Container-Breite und den seitlichen Abstand der Website. */
.pagetal-popup-inhalt .container { max-width: none; width: 100%; padding-left: 0; padding-right: 0; }
.pagetal-popup-inhalt > .container > :last-child { margin-bottom: 0; }

.pagetal-popup-schliessen {
  position: absolute;
  top: 10px;
  z-index: 2;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  transition: color .15s ease, background-color .15s ease;
}
.pagetal-popup-schliessen:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.pagetal-popup-schliessen svg { display: block; flex: none; }

/* Hintergrund der Seite dahinter: Scrollen sperren, ohne dass die Seite seitlich springt. Hat die Seite einen
 * klassischen Scrollbalken, behält die Klasse -gutter seinen Platz (scrollbar-gutter), ohne Browser-Unterstützung
 * gleicht -padding die Breite am <body> aus (popup.js misst sie vorher). Ohne Scrollbalken passiert nichts davon. */
html.pagetal-popup-offen { overflow: hidden; }
html.pagetal-popup-offen.pagetal-popup-gutter { scrollbar-gutter: stable; }
html.pagetal-popup-offen.pagetal-popup-padding body { padding-right: var(--pagetal-popup-sbw, 0px); }

/* ---- Animationen ------------------------------------------------------------------------
 * Eingang beim Öffnen, Ausgang über die Klasse .pagetal-popup-schliesst (popup.js wartet das Ende ab).
 * Dauer: --pp-dauer (Pop-up-Einstellung). "Von der Seite gleiten" startet je nach Position von rechts,
 * links, unten bzw. (Mitte) von rechts. */
.pagetal-popup { --pp-von-x: 0; --pp-von-y: 0; }
.pagetal-popup[data-animation="gleiten"] { --pp-von-x: 56px; }
.pagetal-popup[data-animation="gleiten"][data-position="rechts"] { --pp-von-x: 100%; }
.pagetal-popup[data-animation="gleiten"][data-position="links"]  { --pp-von-x: -100%; }
.pagetal-popup[data-animation="gleiten"][data-position="unten"]  { --pp-von-x: 0; --pp-von-y: 100%; }

@keyframes pagetal-popup-ein-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes pagetal-popup-aus-einblenden { from { opacity: 1; } to { opacity: 0; } }
@keyframes pagetal-popup-ein-zoom { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes pagetal-popup-aus-zoom { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.9); } }
@keyframes pagetal-popup-ein-gleiten { from { opacity: 0; transform: translate(var(--pp-von-x), var(--pp-von-y)); } to { opacity: 1; transform: none; } }
@keyframes pagetal-popup-aus-gleiten { from { opacity: 1; transform: none; } to { opacity: 0; transform: translate(var(--pp-von-x), var(--pp-von-y)); } }
@keyframes pagetal-popup-ein-backdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes pagetal-popup-aus-backdrop { from { opacity: 1; } to { opacity: 0; } }

.pagetal-popup[open]:not([data-animation="ohne"]) .pagetal-popup-box { animation-duration: var(--pp-dauer, 250ms); animation-timing-function: ease; animation-fill-mode: both; }
.pagetal-popup[open][data-animation="einblenden"] .pagetal-popup-box { animation-name: pagetal-popup-ein-einblenden; }
.pagetal-popup[open][data-animation="zoom"] .pagetal-popup-box { animation-name: pagetal-popup-ein-zoom; }
.pagetal-popup[open][data-animation="gleiten"] .pagetal-popup-box { animation-name: pagetal-popup-ein-gleiten; }
.pagetal-popup[open][data-animation="einblenden"].pagetal-popup-schliesst .pagetal-popup-box { animation-name: pagetal-popup-aus-einblenden; }
.pagetal-popup[open][data-animation="zoom"].pagetal-popup-schliesst .pagetal-popup-box { animation-name: pagetal-popup-aus-zoom; }
.pagetal-popup[open][data-animation="gleiten"].pagetal-popup-schliesst .pagetal-popup-box { animation-name: pagetal-popup-aus-gleiten; }
.pagetal-popup[open]:not([data-animation="ohne"])::backdrop { animation: pagetal-popup-ein-backdrop var(--pp-dauer, 250ms) ease both; }
.pagetal-popup[open]:not([data-animation="ohne"]).pagetal-popup-schliesst::backdrop { animation: pagetal-popup-aus-backdrop var(--pp-dauer, 250ms) ease both; }

@media (prefers-reduced-motion: reduce) {
  .pagetal-popup .pagetal-popup-box,
  .pagetal-popup::backdrop { animation: none !important; }
}