/* =====================================================================
   3-iQ Lichtkasten (Lightbox) – ersetzt Fancybox
   =====================================================================
   Gehört zu 3iq.js. Die Überlagerung entsteht erst beim ersten Klick,
   im Quelltext der Seite steht nichts davon.

   Bewusst zurückhaltend gestaltet: Das Bild soll wirken, nicht der
   Rahmen. Farben über die Variablen, damit ein Projekt sie anpassen
   kann, ohne die Datei zu ändern.
   ===================================================================== */

:root {
    /* BHC: das Pink des Hauses, wie es Fancybox hier hatte
       (--fancybox-bg: rgba(216,47,108,.84)). Bewusst NICHT das
       neutrale Dunkel des Standards. */
    --3iq-lichtkasten-grund: rgba(216, 47, 108, .84);
    --3iq-lichtkasten-schrift: #fff;
}

.lichtkasten {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 56px);
    background: var(--3iq-lichtkasten-grund);
    color: var(--3iq-lichtkasten-schrift);
}

.lichtkasten[hidden] { display: none; }

/* Die Seite darunter soll nicht mitscrollen. */
body.lichtkasten-offen { overflow: hidden; }

.lichtkasten__buehne {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9em;
}

.lichtkasten__bild {
    max-width: 100%;
    /* Platz für Bildunterschrift und Zähler frei halten */
    max-height: calc(100vh - clamp(120px, 18vw, 220px));
    width: auto;
    height: auto;
    object-fit: contain;
    transition: opacity .2s;
}

.lichtkasten--laedt .lichtkasten__bild { opacity: .35; }

.lichtkasten__text {
    max-width: 62ch;
    text-align: center;
    font-size: .95em;
    line-height: 1.5;
}

.lichtkasten__text[hidden] { display: none; }

.lichtkasten__zaehler {
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 2vw, 20px);
    transform: translateX(-50%);
    margin: 0;
    font-size: .85em;
    opacity: .75;
}

.lichtkasten__zaehler[hidden] { display: none; }

/* Schalter: groß genug für den Finger (44 px), unaufdringlich */
.lichtkasten button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    min-height: 48px;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    transition: opacity .15s;
}

.lichtkasten button:hover,
.lichtkasten button:focus-visible { opacity: 1; }

.lichtkasten button[hidden] { display: none; }

.lichtkasten__zu {
    top: clamp(8px, 2vw, 22px);
    right: clamp(8px, 2vw, 22px);
    font-size: 34px;
}

.lichtkasten__weiter {
    top: 50%;
    transform: translateY(-50%);
}

.lichtkasten__weiter--zurueck { left: clamp(4px, 1.5vw, 20px); }
.lichtkasten__weiter--vor { right: clamp(4px, 1.5vw, 20px); }

/* Der Fokusrahmen muss auf dunklem Grund sichtbar bleiben. */
.lichtkasten button:focus-visible {
    outline: 3px solid var(--3iq-lichtkasten-schrift);
    outline-offset: 3px;
}

/* Ein Bild mit Lightbox zeigt, dass es anklickbar ist. */
a.lightbox { cursor: zoom-in; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .lichtkasten__bild,
    .lichtkasten button { transition: none; }
}