/* ============================================================
   initiative party & jugend — Hinweisfenster

   Grundsatz wie bei den Schwesterplugins: keine Regeln auf body, a oder
   Überschriften, kein Reset. Alle Klassen tragen den Präfix pjp-.

   Farben über Variablen mit Rückfallwert, damit sich das Fenster ins Theme
   einfügt statt es zu überschreiben.
   ============================================================ */

.pjp-fenster {
  --pjp-navy: #000949;
  --pjp-eis: #87cedc;
  --pjp-eis-tief: #3f96ac;

  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
}
/* Eigene Klasse statt des hidden-Merkmals: Themes setzen dafür gelegentlich
   eigene Regeln, gegen die man dann ankämpfen müsste. */
.pjp-fenster.pjp-zu-anfang { display: none; }

.pjp-fenster * { box-sizing: border-box; }

/* Die Fläche hinter dem Fenster. Ob ein Klick darauf schließt, steht am
   Fenster — bei einem Formular darin wäre es ärgerlich. */
.pjp-schleier {
  position: absolute; inset: 0;
}

/* Die Vorgaben je Wahl. Ist am Fenster eine eigene Farbe hinterlegt, steht
   --pjp-schleier gesetzt und gewinnt — sonst greift der Rückfallwert. */
.pjp-schleier--dunkel .pjp-schleier { background: var(--pjp-schleier, rgba(0, 9, 73, .55)); }
.pjp-schleier--hell   .pjp-schleier { background: var(--pjp-schleier, rgba(255, 255, 255, .7)); }
.pjp-schleier--keiner .pjp-schleier { background: var(--pjp-schleier, transparent); }

/* Ohne Abdunkelung soll die Seite darunter bedienbar bleiben — sonst liegt
   eine unsichtbare Fläche über allem. */
.pjp-schleier--keiner .pjp-schleier { pointer-events: none; }

/* Die Unschärfe liegt auf dem Schleier, nicht auf der Seite: Ein Filter auf
   body würde einen neuen Bezugsrahmen schaffen und das feste Fenster
   mitverschieben. */
.pjp-fenster--unscharf .pjp-schleier {
  backdrop-filter: blur(var(--pjp-unschaerfe, 0));
  -webkit-backdrop-filter: blur(var(--pjp-unschaerfe, 0));
}

.pjp-kasten {
  position: relative;
  width: min(var(--pjp-breite, 560px), calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: var(--pjp-grund, #fff);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  box-shadow: 0 12px 40px rgba(0, 9, 73, .25);
}

/* ---------- Stellen ---------- */

.pjp-fenster--mitte { place-items: center; }
.pjp-fenster--mitte .pjp-kasten { margin: 1rem; }

.pjp-fenster--unten-rechts { place-items: end; }
.pjp-fenster--unten-rechts .pjp-kasten { margin: 1rem; }

.pjp-fenster--unten-links { place-items: end start; }
.pjp-fenster--unten-links .pjp-kasten { margin: 1rem; }

.pjp-fenster--unten-breit { place-items: end stretch; }
.pjp-fenster--unten-breit .pjp-kasten {
  width: 100%; max-width: none; margin: 0;
}

/* An den unteren Ecken bleibt die Seite bedienbar, auch wenn abgedunkelt
   wurde — dort geht es um einen Hinweis, nicht um eine Unterbrechung. */
.pjp-fenster--unten-rechts .pjp-schleier,
.pjp-fenster--unten-links .pjp-schleier,
.pjp-fenster--unten-breit .pjp-schleier { background: transparent; pointer-events: none; }

/* ---------- Schließen ---------- */

.pjp-zu {
  position: absolute; top: .5rem; right: .5rem;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  font-size: 2rem; line-height: 1;
  color: var(--pjp-kreuz, var(--pjp-navy));
  cursor: pointer; opacity: .6;
  transition: opacity .15s ease;
}
.pjp-zu:hover, .pjp-zu:focus-visible { opacity: 1; }

/* ---------- Inhalt ---------- */

.pjp-inhalt { padding-right: 2.5rem; }
.pjp-inhalt > *:first-child { margin-top: 0; }
.pjp-inhalt > *:last-child { margin-bottom: 0; }
.pjp-inhalt img { max-width: 100%; height: auto; }

/* Solange ein Fenster offen ist, soll die Seite dahinter nicht mitscrollen */
body.pjp-offen { overflow: hidden; }

/* ============================================================
   Auftritt

   Gearbeitet wird mit zwei Zuständen statt mit @keyframes: Beim Öffnen wird
   die Klasse pjp-tritt-auf gesetzt, beim Schließen wieder genommen. Damit
   läuft dieselbe Bewegung rückwärts ab, ohne dass es zwei Animationen
   braucht.
   ============================================================ */

.pjp-fenster .pjp-schleier,
.pjp-fenster .pjp-kasten {
  transition:
    opacity var(--pjp-dauer, 300ms) ease,
    transform var(--pjp-dauer, 300ms) cubic-bezier(.2, .8, .3, 1);
}

/* Der Ausgangszustand — vor dem Öffnen und nach dem Schließen */
.pjp-fenster:not(.pjp-tritt-auf) .pjp-schleier,
.pjp-fenster:not(.pjp-tritt-auf) .pjp-kasten { opacity: 0; }

.pjp-auftritt--wachsen:not(.pjp-tritt-auf) .pjp-kasten { transform: scale(.94); }
.pjp-auftritt--schieben:not(.pjp-tritt-auf) .pjp-kasten { transform: translateY(2.5rem); }

/* Ohne Auftritt: sofort da, sofort weg */
.pjp-auftritt--ohne .pjp-schleier,
.pjp-auftritt--ohne .pjp-kasten { transition: none; }
.pjp-auftritt--ohne:not(.pjp-tritt-auf) .pjp-schleier,
.pjp-auftritt--ohne:not(.pjp-tritt-auf) .pjp-kasten { opacity: 1; }

/* ---------- Schmale Bildschirme ---------- */

@media (max-width: 600px) {
  /* Unten angeschlagen statt mittig: Auf dem Handy ist das leichter zu
     erreichen, und der Daumen liegt ohnehin unten. */
  .pjp-fenster--unten-rechts,
  .pjp-fenster--unten-links { place-items: end stretch; }

  .pjp-fenster--unten-rechts .pjp-kasten,
  .pjp-fenster--unten-links .pjp-kasten { width: 100%; margin: .5rem; }

  .pjp-kasten { padding: 1.4rem 1.2rem; }
  .pjp-inhalt { padding-right: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pjp-zu { transition: none; }

  /* Kein Auftritt für alle, die das im System abgestellt haben. Ohne die
     Deckkraft zurückzusetzen bliebe das Fenster unsichtbar. */
  .pjp-fenster .pjp-schleier,
  .pjp-fenster .pjp-kasten { transition: none; }

  .pjp-fenster:not(.pjp-tritt-auf) .pjp-schleier,
  .pjp-fenster:not(.pjp-tritt-auf) .pjp-kasten { opacity: 1; transform: none; }
}

/* Meldung im Testlauf — nur für angemeldete Bearbeiter sichtbar */
.pjp-testhinweis {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 99999;
  max-width: 32ch;
  padding: .9rem 1.1rem;
  background: #000949; color: #fff;
  font-size: .95rem; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0, 9, 73, .3);
}

.pjp-testhinweis ul { margin: .6rem 0 0; padding-left: 1.2rem; }
.pjp-testhinweis li { margin-bottom: .3rem; }