/**
 * Picture Tag Fix für WebP-Optimierung
 *
 * Stellt sicher, dass <picture>-Tags korrekt dargestellt werden
 * und die gleichen Styles wie direkte <img>-Tags erhalten
 */

/* Picture-Tag sollte sich wie ein Block verhalten */
picture {
    display: contents;
}

/* Sicherstellen, dass Images in Picture-Tags sichtbar sind */
picture img {
    display: block;
    width: 100%;
    height: auto;
}

/* Spezifische Fixes für verschiedene Kontexte */
.image picture,
.image picture img {
    display: block;
    width: 100%;
}

#logo picture {
    display: contents;
}

#logo picture img,
#logo img {
    display: block;
    max-height: 1.2em; /* Begrenzt Logo-Höhe auf Header-Höhe */
    width: auto;
}

/* Header-Höhe anpassen, damit Logo nicht von grauem Balken überlagert wird */
#header {
    height: 2.75em !important;
    line-height: 2.75em !important;
}

/* KRITISCHER FIX: navPanel muss über ALLEN anderen Elementen liegen */
@media screen and (max-width: 736px) {
    #navPanel {
        z-index: 100003 !important;
    }

    #titleBar {
        z-index: 100002 !important;
    }

    /* KRITISCH: Toggle-Button muss klickbar sein */
    #titleBar .toggle {
        position: relative;
        z-index: 100003 !important;
        pointer-events: auto !important;
    }

    /* Verhindere dass Logo die Klicks blockt */
    #titleBar .title {
        pointer-events: none;
    }

    #titleBar .title a {
        pointer-events: auto;
    }
}

/* FIX: Überschreibe critical.css - kein uppercase im Menü */
#nav > ul > li > a {
    text-transform: none !important;
}

/* Mobile: Logo noch kleiner */
@media screen and (max-width: 736px) {
    #logo picture img,
    #logo img {
        max-height: 1.8em;
    }

    /* titleBar Logo (wird via JavaScript aus #logo kopiert) 
    #titleBar .title picture,
    #titleBar .title picture img,
    #titleBar .title img {
        max-height: 1.5em !important;
        width: auto;
        vertical-align: middle;
    }
    */
    #titleBar .title {
        line-height: 44px;
    }
}

.spotlight .image picture {
    display: block;
}

.spotlight .image picture img {
    display: block;
    width: 100%;
}

/* Banner-Bereich */
#banner .image picture {
    display: contents;
}

#banner .image picture img {
    display: block;
}

/* KRITISCHER FIX: Spotlight-Bilder NUR auf mobilen Geräten anzeigen */
/* Auf Desktop nutzt das Theme background-images für bessere Performance und Animationen */
/* Auf Mobile zeigen wir .image.main für bessere Kompatibilität */

@media screen and (max-width: 1280px) {
    .spotlight .image.main {
        display: block !important;
    }

    .spotlight .image.main picture {
        display: block;
    }

    .spotlight .image.main picture img {
        display: block;
        width: 100%;
        height: auto;
        position: relative;
    }
}

/* KRITISCHER FIX: :before overlay deaktivieren, damit Background-Image sichtbar wird */
/* Das :before Element mit overlay.png überdeckt die Background-Images */
.spotlight:before {
    display: none !important;
    pointer-events: none !important; /* Verhindert dass :before Klicks blockiert */
}

/* Sicherstellen, dass Background-Image sichtbar ist */
.spotlight {
    position: relative;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
}

/* PERFORMANCE: Aspect-Ratio für Bilder - verhindert CLS (Layout Shift) */
/* Banner Portrait (Quadrat) */
#banner .image img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* Spotlight Bilder (Landscape) */
.spotlight .image.main picture img {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* Logo */
#logo img {
    aspect-ratio: auto;
}

/* Generelles Fallback für alle Bilder */
img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* FIX: Hellblaue Linien bei left/right Spotlights nicht zu lang machen */
/* Die originale height: 101% ist zu groß, wenn Bilder zusätzliche Höhe hinzufügen */
/* Nur für Bildschirme >980px (bei ≤980px ist layout bereits stacked und hat width:100%) */
@media screen and (min-width: 981px) {
    .spotlight.left .content,
    .spotlight.right .content {
        height: auto !important;
        min-height: 100%;
    }
}

/* Zusätzlich: Auf mittleren Bildschirmen (981-1280px) wo Bilder angezeigt werden,
   sicherstellen dass .image.main die max-height respektiert */
@media screen and (min-width: 981px) and (max-width: 1280px) {
    .spotlight .image.main {
        max-height: 60vh !important;
        overflow: hidden;
    }

    .spotlight .image.main picture,
    .spotlight .image.main picture img {
        max-height: 60vh;
        object-fit: cover;
    }
}