/*
Theme Name:  Generatepress Child
Theme URI:   https://omas-gegen-rechts-bonn.de
Description: Child-Theme von generatepress
Author:      Silke Kowalewski
Template:    generatepress
Version:     1.0.0
Text Domain: generatepress-child
*/


/* ==========================================================================
   Header – Basis-Styles für Hintergrundbild-Unterstützung
   ========================================================================== */

.site-header,
#masthead {
position: absolute;
   width: 100%;
   max-width: 100%;
   top: 0px;
}



/* Menü-Toggle ab 992px anzeigen */
@media (max-width: 992px) {
    #site-navigation .main-nav {
        display: none;
    }

    #site-navigation .menu-toggle {
        display: flex;
    }
}

/* Vollmenü ab 993px anzeigen */
@media (min-width: 993px) {
    #site-navigation .main-nav {
        display: block !important;
    }

    #site-navigation .menu-toggle {
        display: none !important;
    }

    /* Mobile-Toggle-Nav in der Kopfzeile verstecken */
    #mobile-menu-control-wrapper {
        display: none !important;
    }
}
@media (max-width: 992px) {
    #primary-menu {
        display: none;
    }

    #site-navigation .menu-toggle {
        display: flex !important;
    }

    #mobile-menu-control-wrapper {
        display: none !important;
    }
}

@media (min-width: 993px) {
    #primary-menu {
        display: block !important;
    }

    #site-navigation .menu-toggle {
        display: none !important;
    }

    #mobile-menu-control-wrapper {
        display: none !important;
    }
}

//* ================================================
   HEADER IMAGE CONTAINER
   ================================================ */

.site-header,
#masthead {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
}

.header-image-container {
    position: relative;
    width: 100%;
    line-height: 0; /* Verhindert Lücke unter dem Bild */
}

/* Das echte Bild – nimmt die volle Breite ein */
.header-bg-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 80vh; /* Optional: Maximalhöhe begrenzen */
    object-fit: cover;
    object-position: center center;
}

/* SVG liegt exakt über dem Bild */
.schild-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-family:"Asap";
}

.schild-gruppe:nth-child(1) .schild-text { transform: translate(-50%, -50%) rotate(-2deg); }
.schild-gruppe:nth-child(2) .schild-text { transform: translate(-50%, -50%) rotate(1.5deg); }
.schild-gruppe:nth-child(3) .schild-text { transform: translate(-50%, -50%) rotate(-1deg); }
.schild-gruppe:nth-child(4) .schild-text { transform: translate(-50%, -50%) rotate(2.5deg); }
.schild-gruppe:nth-child(5) .schild-text { transform: translate(-50%, -50%) rotate(-3deg); }

.schild-gruppe:nth-child(1) .schild-wort { fill:var(--accent); }
.schild-gruppe:nth-child(2) .schild-wort { fill:var(--pink); }
.schild-gruppe:nth-child(3) .schild-wort { fill:var(--cyan); }
.schild-gruppe:nth-child(4) .schild-wort { fill:var(--blau); }
.schild-gruppe:nth-child(5) .schild-wort { fill:var(--rot); }