/*!
 * VN Bildlayer 1.1 - niederastroth.de
 */

.vn-layer-traeger {
    /* Die Position und Größe werden vom Skript exakt aus dem img berechnet. */
}

/* Exakte sichtbare Bildfläche – unabhängig von der Größe eines
   Mobirise-Wrappers. overflow:hidden schneidet Layer und Hinweiszeichen
   zugleich an den automatisch übernommenen Bildecken ab. */
.vn-layer-bildflaeche {
    position: absolute;
    display: none;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    line-height: normal;
    pointer-events: none;
}

/* Der Kasten selbst */

.vn-layer {
    --vn-layer-zeit: 280ms;
    position: absolute;
    right: 0;
    left: 0;
    z-index: 2;
    display: flex;
    padding: 7% 7%;
    opacity: 0;
    pointer-events: none;   /* siehe unten: nur Verweise fangen Klicks */
    transition: opacity var(--vn-layer-zeit) ease,
                transform var(--vn-layer-zeit) ease;
}

.vn-layer-unten {
    bottom: 0;
    align-items: flex-end;
    transform: translateY(12%);
}

.vn-layer-oben {
    top: 0;
    align-items: flex-start;
    transform: translateY(-12%);
}

.vn-layer-mitte {
    top: 50%;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%) scale(.96);
    text-align: center;
}

.vn-layer-ganz {
    top: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: scale(1.02);
}

/* Sichtbar */

.vn-layer-offen .vn-layer {
    opacity: 1;
}

/* Der Kasten selbst fängt keine Klicks ab - so bleibt das Bild darunter
   anklickbar und die VN Lightbox öffnet sich weiterhin. Nur Verweise und
   Schaltflächen im Kasten reagieren. */
.vn-layer a,
.vn-layer button,
.vn-layer input,
.vn-layer select,
.vn-layer textarea {
    pointer-events: auto;
}

.vn-layer-offen .vn-layer-unten,
.vn-layer-offen .vn-layer-oben {
    transform: translateY(0);
}

.vn-layer-offen .vn-layer-mitte {
    transform: translateY(-50%) scale(1);
}

.vn-layer-offen .vn-layer-ganz {
    transform: scale(1);
}

/* Ausrichtung des Textes */

.vn-layer-aus-links   { justify-content: flex-start; text-align: left; }
.vn-layer-aus-mitte   { justify-content: center;     text-align: center; }
.vn-layer-aus-rechts  { justify-content: flex-end;   text-align: right; }

/* Bei mittiger und ganzflächiger Lage gilt die eigene Ausrichtung */
.vn-layer-mitte.vn-layer-aus-links,
.vn-layer-ganz.vn-layer-aus-links { text-align: left; }

.vn-layer-mitte.vn-layer-aus-rechts,
.vn-layer-ganz.vn-layer-aus-rechts { text-align: right; }

/* Dauerhaft sichtbar: kein Verschieben beim Einblenden */

.vn-layer-immer .vn-layer {
    transition: none;
    transform: none;
}

.vn-layer-immer .vn-layer-mitte {
    transform: translateY(-50%);
}

/* Inhalt */

.vn-layer-kasten {
    width: 100%;
    max-width: 46em;
    font-size: clamp(13px, 1.5vw, 16px);
    line-height: 1.5;
}

.vn-layer-kasten > * {
    margin-top: 0;
    color: inherit;
}

.vn-layer-kasten > *:last-child {
    margin-bottom: 0;
}

.vn-layer-kasten h1,
.vn-layer-kasten h2,
.vn-layer-kasten h3,
.vn-layer-kasten h4,
.vn-layer-kasten h5 {
    font-size: 1.5em;
    line-height: 1.25;
    margin-bottom: .4em;
}

.vn-layer-kasten p {
    margin-bottom: .7em;
}

.vn-layer-kasten a:not(.btn) {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .2em;
}

/* Achtung: Der Inhalt wird NICHT vom Stylesheet versteckt. Griffe das
   Skript einmal nicht, wäre der Text sonst spurlos verschwunden - schlimmer
   als ein Kasten an der falschen Stelle. Das Verstecken übernimmt das
   Skript, sobald es den Inhalt tatsächlich übernommen hat. */

/* Hinweiszeichen in der Ecke */

.vn-layer-zeichen {
    position: absolute;
    top: 4%;
    right: 4%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2em;
    height: 2em;
    color: #fff;
    background: rgba(0, 0, 0, .42);
    border-radius: 50%;
    pointer-events: none;
    opacity: .85;
    transition: opacity var(--vn-layer-zeit, 280ms) ease;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.vn-layer-zeichen svg {
    width: 60%;
    height: 60%;
}

.vn-layer-offen .vn-layer-zeichen {
    opacity: 0;
}

/* Schmale Bildschirme: mehr Platz für den Text */

@media (max-width: 767px) {
    .vn-layer {
        padding: 6% 5%;
    }

    .vn-layer-kasten {
        font-size: clamp(12px, 3.4vw, 15px);
    }

    .vn-layer-kasten h1,
    .vn-layer-kasten h2,
    .vn-layer-kasten h3,
    .vn-layer-kasten h4 {
        font-size: 1.3em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vn-layer,
    .vn-layer-zeichen {
        transition: none;
    }
}

@media print {
    .vn-layer {
        position: static;
        opacity: 1;
        transform: none;
        background: none !important;
        color: inherit !important;
        padding: .5em 0;
    }

    .vn-layer-zeichen {
        display: none;
    }
}