/* Primary Menu ---------------------------- */
#hauptnavigation {
    display: -webkit-box;
    /* OLD - iOS 6-, Safari 3.1-6, BB7 */
    display: -ms-flexbox;
    /* TWEENER - IE 10 */
    display: -webkit-flex;
    /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
    display: flex;
    /* NEW, Spec - Firefox, Chrome, Opera */
}

.primary-menu-wrapper {
    display: none;
}

ul.primary-menu {
    border-top: 2px solid black;
    border-bottom: 2px solid black;
    display: flex;
    font-weight: 500;
    flex-wrap: wrap;
    justify-content: space-between;
    width: calc(100vw - 4rem);
    margin-left: 2rem;
    margin-right: 2rem;
    max-width: 160rem;
}

@media all and (max-width: 1440px) {
    ul.primary-menu {
        width: calc(100vw - 4rem);
        margin-left: 2rem;
        margin-right: 2rem;
        max-width: 100%;
    }
}

.primary-menu .icon {
    display: none;
}

.primary-menu a {
    color: inherit;
    display: block;
    line-height: 1.2;
    text-decoration: none;
    word-break: normal;
    word-wrap: normal;
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current_page_ancestor,
.primary-menu li.current-menu-item>a,
.primary-menu li.current-menu-item>.link-icon-wrapper>a,
.primary-menu li.current-menu-item>a:hover,
.primary-menu li.current-menu-item>.link-icon-wrapper>a:hover,
.primary-menu li.current-menu-item>a:focus,
.primary-menu li.current-menu-item>.link-icon-wrapper>a:focus {
    text-decoration: none;
}

/* SUB MENU */

.primary-menu ul {
    color: #000;
    opacity: 0;
    padding: 1rem 0;
    position: absolute;
    left: 0;
    width: 100%;
    max-width: 160rem;
    z-index: 1;
    display: flex;
}

#site-header .primary-menu .current_page_item ul {
    background: #e8ebeb;
    opacity: 1;
}

#site-header .primary-menu>li a {
    color: black;
    font-size: 3.6rem;
    font-weight: 500;
    letter-spacing: .04em;
    padding: .25em .8em .25em .8em;
    text-transform: uppercase;
}

#site-header .primary-menu ul {
    border-bottom: 2px solid black;
}

#site-header .primary-menu ul li a {
    text-transform: none;
}

#site-header .primary-menu .current_page_item li a {
    color: black;
}

.primary-menu li.menu-item-has-children:hover>ul,
.primary-menu li.menu-item-has-children:focus>ul,
.primary-menu li.menu-item-has-children.focus>ul {
    left: 0;
    opacity: 1;
}

#site-header .primary-menu ul.sub-menu li a {
    border: none;
    color: black;
    display: block;
    /*
    font-size: 1.8rem;
    font-size: 2.2rem;
    */
    font-size: clamp(1.8rem, calc(0.1vw + 1.7rem), 2.2rem);
    font-size: clamp(1.8rem, calc(0.738vw + 1.062rem), 2.6rem);


    padding: .8rem 1rem;
    transition: background-color 0.15s linear;
    width: 100%;
}

.primary-menu>li.current_page_item,
#site-header .primary-menu li:hover {
    background: #fd5207;
}

#site-header .primary-menu ul.sub-menu li.current_page_item>a,
#site-header .primary-menu ul.sub-menu li.current_page_ancestor>a,
#site-header .primary-menu ul.sub-menu li:hover> a,
#site-header .primary-menu li:hover> a,
#site-header .primary-menu li.current_page_item>a {
    color: white;
    text-decoration: none;
}

#site-header .primary-menu li:hover .sub-menu,
#site-header .primary-menu li a:hover .sub-menu,
#site-header .primary-menu ul li:hover .sub-menu,
#site-header .primary-menu ul li a:hover .sub-menu {
    display: none;
}

/***********************************************************
        * 1) Hauptmenü-Ebene (ul.primary-menu)
        ***********************************************************/
.primary-menu-wrapper {
    /* Zentriert das Hauptmenü im Browser */
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

/* Das Hauptmenü, feste 1600px, zentriert */
.primary-menu {
    position: relative;
    /* Anker für das absolut positionierte Submenü */
    width: 1600px;
    /* Feste Breite */
    max-width: 100%;
    /* Falls Browser schmaler ist als 1600px */
    margin: 0;
    padding: 0;
    list-style: none;

    /* Menü horizontal (optional) */
    display: flex;
    /* gap: 2rem; */
}

/* Verhindere, dass das Submenü
	    sich an <li> statt an .primary-menu ausrichtet */
.primary-menu>li {
    position: static;
    /* !important nur dann, wenn das Theme
	   selbst position: relative o.ä. auf li setzt */
}

/***********************************************************
        * 2) Submenü (ul.sub-menu)
        ***********************************************************/
/* Standard: unsichtbar */
#site-header .primary-menu li ul,
#site-header .primary-menu .sub-menu,
#site-header .primary-menu .sub-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* Weit, wie das Hauptmenü (1600px) */
    width: 1600px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 999;
}

#site-header .primary-menu .sub-menu {
    background: #e8ebeb;
}

#site-header .primary-menu .sub-menu .sub-menu {
    background: #d8dedd;
}

/* Submenü einblenden bei Hover
	    oder aktiven WP-Klassen */
#site-header .primary-menu li.current-menu-parent>.sub-menu,
#site-header .primary-menu li.current_page_item>.sub-menu,
#site-header .primary-menu li.current-menu-ancestor>.sub-menu,
#site-header .primary-menu .sub-menu li.current-menu-item>.sub-menu,
#site-header .primary-menu .sub-menu li.current_page_parent>.sub-menu,
#site-header .primary-menu .sub-menu li.current_page_ancestor>.sub-menu {
    display: flex;
    flex-wrap: wrap;
    opacity: 1;
    margin-top: 2px;
}

/* Links im Submenü */
.primary-menu li ul li>a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #000;
}

/* 
        * Aktive Menüpunkte (egal, ob Haupt- oder Untermenü):
        * Alle WP-Klassen, die einen Menüpunkt als "aktiv" kennzeichnen 
        */
#site-header .primary-menu li.current-page-parent>a,
#site-header .primary-menu li.current-menu-ancestor>a,
#site-header .primary-menu li.current-menu-parent>a,
#site-header .primary-menu li.current_page_item>a,
#site-header .primary-menu li.current_page_ancestor>a {
    background-color: #fd5207;
    color: #fff;

    /* Optionale Empfehlung: Für durchgängige Hinterlegung,
	    Link als Block und etwas Innenabstand */
    display: block;
    text-decoration: none;
}

/* Zeig das Submenü an, wenn der Eltern-LI '.focus' hat */
.primary-menu li.focus>.sub-menu {
    display: flex;
    flex-wrap: wrap;
}

/* Beispielweise: 'active' Link-Stil, wenn der LI .focus hat, 
	    damit man sieht, dass dieser Punkt offen ist */
#site-header .primary-menu li.focus>a {
    background-color: fd5207;
    color: #fff;
}


.sub-menu li.is-active-anchor>a {
    background-color: #fd5207;
    color: white !important;
}

.anchor-target-highlight {
    color: #fd5207;
    transition: outline 0.3s ease;
}

.sub-menu {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #ebebeb;
}

.sub-menu li {
    flex: 0 1 auto;
    white-space: nowrap;
    padding: 0 .5rem;
    box-sizing: border-box;
}

.sub-menu .line-break {
    padding: 0 !important;
    background-color: black;
    height: 2px;
    margin: 0;
}

#submenu-spacer {
    width: 100%;
    height: 0;
    /* transition: height 0.3s ease;
             optional: sanfter Übergang */
}

#site-header .primary-menu>li a {
    /*
    font-size: clamp(20px, 1.5vw + 0.5rem, 36px);
    font-size: clamp(20px, calc(1.17vw + 1rem), 36px);
    font-size: clamp(20px, 1vw + 0.8rem, 35px);
    
    font-size: clamp(21px, calc(2.0833vw + 1px), 36px);
    */
    font-size: clamp(21px, calc(2.308vw + -2.308px), 36px);


}

ul.primary-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: calc(100vw - 4rem);
  margin: 0 2rem;
  max-width: 160rem;
  border-top: 2px solid black;
  border-bottom: 2px solid black;
}

ul.primary-menu > li {
  flex-grow: 1;
  text-align: center; /* oder left/right je nach Geschmack */
}

ul.primary-menu > li a {
  display: inline-block;
}


@media all and (min-width: 1600px) {
    #site-header .primary-menu>li a {
        font-size: clamp(20px, 1.8vw + 1rem, 36px);

    }
}

@media all and (max-width: 1599px) {
    #site-header .primary-menu>li a {
        font-size: clamp(18px, 2.5vw + .2rem, 30px);

    }
}

@media all and (max-width: 1440px) {
    #site-header .primary-menu>li a {
        font-size: 32px;
        font-size: 28px;
    }
}


@media all and (max-width: 1265px) {
    #site-header .primary-menu>li a {
        font-size: 27px;

    }
}

@media all and (max-width: 1220px) {
    #site-header .primary-menu>li a {
        font-size: 25px;

    }
}

@media all and (max-width: 1135px) {
    #site-header .primary-menu>li a {
        font-size: 22px;
    }
}