/* VN Popup - niederastroth.de */
.vn-popup { position: fixed; inset: 0; z-index: 100000; overflow: hidden; display: none; align-items: center; justify-content: center; padding: 1rem; box-sizing: border-box; }
.vn-popup[hidden] { display: none !important; }
.vn-popup.vn-popup-open { display: flex; }
.vn-popup[data-pos="top"] { align-items: flex-start; }
.vn-popup[data-pos="bottom"] { align-items: flex-end; }

.vn-popup-backdrop { position: absolute; inset: 0; background: var(--vnp-overlay, rgba(0, 0, 0, .6)); opacity: 0; transition: opacity .3s ease-in; }
.vn-popup.vn-popup-show .vn-popup-backdrop { opacity: 1; transition: opacity .4s ease-out; }

/* Schließen (Grundzustand): kurz und geradlinig. Öffnen (.vn-popup-show): pro Effekt eigene Dauer und Kurve. */
.vn-popup-dialog {
    position: relative; box-sizing: border-box; width: 100%; max-width: var(--vnp-width, 640px); max-height: 94vh; overflow: auto;
    background: var(--vnp-bg, #fff); border-radius: var(--vnp-radius, 12px); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); outline: none;
    opacity: 0; transition: opacity .28s ease-in, transform .3s ease-in;
}
.vn-popup[data-size="full"] .vn-popup-dialog { max-width: none; height: 100%; max-height: none; border-radius: 0; }
.vn-popup[data-size="full"] { padding: 0; }
.vn-popup.vn-popup-show .vn-popup-dialog { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .55s cubic-bezier(.22, 1, .36, 1); }

/* Effekte: Ausgangszustand VOR dem Öffnen bzw. Endzustand beim Schließen. Nur ohne .vn-popup-show, damit sie den geöffneten
   Zustand (transform: none) nie überstimmen. */
.vn-popup:not(.vn-popup-show)[data-anim="zoom"] .vn-popup-dialog { transform: scale(.4); }
.vn-popup:not(.vn-popup-show)[data-anim="slide"] .vn-popup-dialog { transform: translateY(160px); }
.vn-popup:not(.vn-popup-show)[data-anim="slide"][data-pos="top"] .vn-popup-dialog { transform: translateY(-160px); }
.vn-popup:not(.vn-popup-show)[data-anim="left"] .vn-popup-dialog { transform: translateX(-70vw); }
.vn-popup:not(.vn-popup-show)[data-anim="right"] .vn-popup-dialog { transform: translateX(70vw); }
.vn-popup:not(.vn-popup-show)[data-anim="flip"] .vn-popup-dialog { transform: perspective(1000px) rotateX(-80deg); transform-origin: 50% 0; }
.vn-popup:not(.vn-popup-show)[data-anim="bounce"] .vn-popup-dialog { transform: scale(.2); }
/* Öffnen: eigene Dauer und Kurve je Effekt; Werte über 1 in der Kurve = kurzes Überschwingen */
.vn-popup.vn-popup-show[data-anim="zoom"] .vn-popup-dialog { transition: opacity .35s ease-out, transform .6s cubic-bezier(.2, 1.15, .4, 1); }
.vn-popup.vn-popup-show[data-anim="slide"] .vn-popup-dialog { transition: opacity .3s ease-out, transform .7s cubic-bezier(.2, 1.3, .4, 1); }
.vn-popup.vn-popup-show[data-anim="left"] .vn-popup-dialog, .vn-popup.vn-popup-show[data-anim="right"] .vn-popup-dialog { transition: opacity .3s ease-out, transform .8s cubic-bezier(.2, 1.35, .4, 1); }
.vn-popup.vn-popup-show[data-anim="bounce"] .vn-popup-dialog { transition: opacity .3s ease-out, transform .7s cubic-bezier(.34, 1.7, .5, 1); }
.vn-popup.vn-popup-show[data-anim="flip"] .vn-popup-dialog { transition: opacity .4s ease-out, transform .8s cubic-bezier(.25, 1.25, .4, 1); }
.vn-popup.vn-popup-show[data-anim="fade"] .vn-popup-dialog { transition: opacity .6s ease-out; }
.vn-popup[data-anim="none"] .vn-popup-dialog, .vn-popup[data-anim="none"] .vn-popup-backdrop { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .vn-popup-dialog, .vn-popup-backdrop { transition: none !important; } }

/* der eigentliche Baustein im Fenster: keine Seiten-Abstaende, keine Vollbild-Hoehe */
.vn-popup-body > * { margin-top: 0 !important; margin-bottom: 0 !important; min-height: 0 !important; }

.vn-popup-close {
    position: absolute; top: .6rem; right: .6rem; z-index: 2; width: 2.2rem; height: 2.2rem; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 0; line-height: 0; cursor: pointer; display: block; overflow: hidden;
}
/* Das Kreuz wird gezeichnet statt als Zeichen gesetzt: Schriften (und fremdes Seiten-CSS auf <button>) sitzen das Zeichen "x" sonst
   sichtbar zu hoch oder zu tief. Zwei Striche in der exakten Mitte des Kreises. */
.vn-popup-close::before, .vn-popup-close::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 2px; margin: 0; padding: 0; border-radius: 1px; background: currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}
.vn-popup-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.vn-popup-close:hover { background: rgba(0, 0, 0, .8); }
.vn-popup-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Handy: weniger Innenabstand und eine kleinere Überschrift im Popup-Baustein, damit der Text Platz hat
   (der Innenabstand des Bausteins ist für breite Bildschirme gedacht und lässt sonst nur eine schmale Textspalte übrig). */
@media (max-width: 640px) {
    .vn-popup { padding: .5rem; }
    /* Am Handy: Fenster nur bis 70 % Höhe und 100 px Abstand nach oben, damit es nicht über einer festen Navigation liegt (Vollbild-Popups bleiben unberührt) */
    .vn-popup:not([data-size="full"]) { padding-top: 100px; }
    .vn-popup:not([data-size="full"]) .vn-popup-dialog { max-height: 70vh; max-height: 70dvh; }
    .vn-popup-content { padding: 1.7rem 1.25rem 1.5rem !important; }
    .vn-popup-content .vn-popup-title { font-size: 1.55rem !important; margin-bottom: .6rem !important; }
    .vn-popup-content .vn-popup-text { margin-bottom: 1.1rem !important; line-height: 1.55; }
}