/* ============================================================
   KS Header Mosaik – Frontend Styles  v2.0.0
   ============================================================

   4-Spalten-Grid. Zellen erhalten per Inline-Style:
     grid-column: span N;   (1 = 1/4-Breite, 2 = 2/4-Breite)
     grid-row:    span M;   (1 = 1 Reihe, 2 = Quadrat)

   Vorlagen-Reihen werden ebenfalls per Inline-Style gesetzt:
     grid-template-rows: 1fr        (einzeilig)
     grid-template-rows: 1fr 1fr    (zweizeilig, gleiche Höhe)

   ============================================================ */

/* ── Container ─────────────────────────────────────── */
.ks-header-mosaic {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    /* grid-template-rows kommt via Inline-Style aus der Vorlage */
    height: var( --hm-height, 85vh );
    gap:    var( --hm-gap,    3px  );
    width:     100%;
    max-width: 100%;
    overflow:  hidden;
    padding: 0;
    margin:  0;
    box-sizing: border-box;
}

/* ── Zelle ──────────────────────────────────────────── */
.ks-hm-cell {
    position: relative;
    overflow: hidden;
    background-color: #1a1a1a;
    /* grid-column / grid-row kommen via Inline-Style */
}

/* ── Hintergrundbild ─────────────────────────────── */
.ks-hm-image {
    width: 100%;
    height: 100%;
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

.ks-hm-cell:hover .ks-hm-image {
    transform: scale(1.04);
}

/* ── Link-Overlay ────────────────────────────────── */
.ks-hm-link {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    text-decoration: none;
}

.ks-hm-link::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.35s ease;
}

.ks-hm-cell:hover .ks-hm-link::after {
    background: rgba(0, 0, 0, 0.12);
}

/* ── Leere Zelle ─────────────────────────────────── */
.ks-hm-cell-empty {
    width: 100%;
    height: 100%;
    background-color: #e2e2e2;
}


/* ════════════════════════════════════════════════════
   RESPONSIV
════════════════════════════════════════════════════ */

/*
 * Mittlere Laptops – Höhe leicht reduzieren (noch 4 Spalten)
 */
@media (max-width: 1200px) {
    .ks-header-mosaic {
        height: calc( var( --hm-height, 85vh ) * 0.88 );
    }
}

/*
 * Tablet landscape / kleine Laptops – 2-Spalten-Layout ab 1024 px.
 * Alle Zellen auf span 1 zurücksetzen; size-half und size-square
 * dehnen sich über beide Spalten.
 * Reihen: auto-rows statt fixer grid-template-rows (Inline-Style).
 */
@media (max-width: 1024px) {
    .ks-header-mosaic {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: none !important;  /* Inline-Style überschreiben */
        grid-auto-rows: 40vw;
        height: auto;
        gap: 3px;
    }

    .ks-hm-cell {
        grid-column: span 1 !important;
        grid-row:    span 1 !important;
    }

    /* Breite und Quadrat-Zellen über beide Spalten */
    .ks-hm-cell.size-half,
    .ks-hm-cell.size-square {
        grid-column: span 2 !important;
    }
}

/*
 * Tablet portrait – 2 Spalten, kompakter
 */
@media (max-width: 768px) {
    .ks-header-mosaic {
        grid-auto-rows: 45vw;
        gap: 2px;
    }
}

/* Smartphone – 2 kompakte Spalten */
@media (max-width: 480px) {
    .ks-header-mosaic {
        grid-auto-rows: 44vw;
    }
}

/* Sehr kleines Display – 1 Spalte */
@media (max-width: 360px) {
    .ks-header-mosaic {
        grid-template-columns: 1fr;
        grid-auto-rows: 60vw;
    }

    .ks-hm-cell,
    .ks-hm-cell.size-half,
    .ks-hm-cell.size-square {
        grid-column: span 1 !important;
    }
}


/* ════════════════════════════════════════════════════
   LIGHTBOX  v2.4.0
   ─ Alle Buttons position:absolute (nicht fixed),
     relativ zum #ks-hm-lb-Container (inset:0 fixed).
   ─ Weißer Hintergrund direkt am Container.
   ─ Stacking: backdrop z0 → stage z1 → buttons z2.
════════════════════════════════════════════════════ */

/* Kein Scrollen wenn Lightbox offen */
body.ks-hm-lb-noscroll { overflow: hidden; }

/* ── Vollbild-Overlay ──────────────────────────────
 * background:#fff direkt hier – unabhängig von Theme-CSS.
 * position:fixed + inset:0 erzeugt den Containing Block
 * für alle position:absolute Kinder.
 * ─────────────────────────────────────────────────── */
#ks-hm-lb {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #ffffff !important;
    align-items: center;
    justify-content: center;
}

#ks-hm-lb.ks-hm-lb-open {
    display: flex;
}

/* ── Klick-Fläche (Schließen bei Klick außerhalb) ── */
.ks-hm-lb-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: transparent;
    cursor: zoom-out;
}

/* ── Bühne: Bild + Meta ────────────────────────────
 * z-index:1 → liegt über dem Backdrop.
 * Breite explizit begrenzen damit seitliche Pfeile
 * nie vom Bild überlagert werden.
 * ─────────────────────────────────────────────────── */
.ks-hm-lb-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Seitlich je 80 px Platz für die Pfeil-Buttons */
    max-width: calc( 100vw - 160px );
    max-height: 96vh;
}

/* ── Bild ────────────────────────────────────────── */
.ks-hm-lb-img {
    display: block;
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.25s ease;
    box-shadow: 0 6px 40px rgba(0,0,0,.15);
}

.ks-hm-lb-img.ks-hm-lb-loaded {
    opacity: 1;
}

/* ── Zähler "2 / 5" ─────────────────────────────── */
.ks-hm-lb-counter {
    margin-top: 14px;
    font-family: sans-serif;
    font-size: 13px;
    color: #999;
    letter-spacing: .05em;
}

/* ── Link-Button ────────────────────────────────── */
.ks-hm-lb-link {
    margin-top: 8px;
    font-family: sans-serif;
    font-size: 13px;
    color: #aaa;
    text-decoration: none;
    transition: color .15s;
}
.ks-hm-lb-link:hover { color: #555; }

/* ── Gemeinsame Button-Basis ─────────────────────
 * position:absolute (nicht fixed!) → relativ zu
 * #ks-hm-lb (position:fixed, inset:0 = ganzer Viewport).
 * z-index:2 → immer über der Bühne (z-index:1).
 * ─────────────────────────────────────────────────── */
#ks-hm-lb button {
    position: absolute;
    z-index: 2;
    background: #e5e5e5;
    color: #666;
    border: none;
    cursor: pointer;
    line-height: 1;
    transition: background .2s, color .2s;
    -webkit-appearance: none;
    appearance: none;
    touch-action: manipulation;   /* kein 300-ms-Delay auf iOS */
    -webkit-tap-highlight-color: transparent;
}
#ks-hm-lb button:hover {
    background: #d0d0d0;
    color: #333;
}

/* ── Schließen-Kreuz ─────────────────────────────── */
.ks-hm-lb-close {
    top: 20px;
    right: 24px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Navigations-Pfeile ─────────────────────────── */
.ks-hm-lb-prev,
.ks-hm-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 90px;
    border-radius: 8px;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ks-hm-lb-prev { left: 16px; }
.ks-hm-lb-next { right: 16px; }

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    /* Seitliche Pfeile: je 56 px → stage max-width entsprechend */
    .ks-hm-lb-stage {
        max-width: calc( 100vw - 120px );
        max-height: 94vh;
    }

    .ks-hm-lb-img { max-height: 82vh; }

    .ks-hm-lb-prev,
    .ks-hm-lb-next {
        width: 48px;
        height: 70px;
        font-size: 22px;
    }
    .ks-hm-lb-prev { left: 8px; }
    .ks-hm-lb-next { right: 8px; }

    .ks-hm-lb-close {
        top: 12px;
        right: 12px;
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

/* ── Sehr kleines Smartphone (360 px) ───────────── */
@media (max-width: 400px) {
    .ks-hm-lb-stage {
        max-width: calc( 100vw - 100px );
    }

    .ks-hm-lb-prev,
    .ks-hm-lb-next {
        width: 42px;
        height: 60px;
        font-size: 20px;
    }
    .ks-hm-lb-prev { left: 4px; }
    .ks-hm-lb-next { right: 4px; }
}