/*  HEADER ANFANG   -------------------------------------------------------------------------------------------------------------------------  */

/*  BURGER-MENÜ ANFANG  ----------------  */

/* Grundstil */
.burger {
    background: #ffffff00;
    border: none;
    padding: 0;
    cursor: pointer;
    right: 0;
    position: fixed;
    z-index: 1100;
    width: 60px;
    height: 60px
}

.burger svg {
    stroke: var(--primary-color);
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
}

.line {
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: 34px 30px;
}

/* aktive Zustände – echtes X */
.burger.active .top {
    transform: translateY(10px) translateX(-8px) rotate(45deg);
}

.burger.active .middle {
    opacity: 0;
}

.burger.active .bottom {
    transform: translateY(-10px) translateX(-8px) rotate(-45deg);
}

.burger.active svg {
    stroke: var(--text-invert);
}

/* Menü-Stil */
.menu {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: linear-gradient(to right bottom, var(--primary-color), var(--primary-color));
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    z-index: 999;
    padding-top: 10vh;
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    overflow: auto;

    & .logo-mobile-only {
        display: none;
    }    
}


@media (max-width: 1345px) {
    .menu {
    background-size: 200px auto, cover;
    background-position: 13% 70%;
    }
}

/* Sichtbar: Menü einblenden */
.menu.active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
}

/* Standardmäßig verstecken */
.topmenu .sub-menu {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.4s ease-out, opacity 0.4s ease;
    grid-column: 1 / 3;
    grid-row: 2 / 3;
}

.topmenu .sub-menu.submenu-open {
    max-height: 100%;
    opacity: 1;
}

#main-menu::-webkit-scrollbar {
    background: transparent;
    width: 2px;
}

div.menu-logo.gone {
  	 opacity: 0;
  	visibility: hidden;
}

.menu-logo.dark-mode {
  filter: brightness(0.45);
}

@media (max-width: 991px) {
	
	.header8fix {
		position: relative;
	}	
	
}

@media (min-width: 768px) {

    .burger {
        top: 0;
    }

}

@media (max-width: 767px) {
	
	.menu {
        background-color: var(--primary-color);
        border-top: 1px solid var(--text-invert);
        background-image: none;
    
        & .logo-mobile-only {
            display: initial;
            & img {
                height: 45px;
                width: auto;
            }
        }
    }
	
	.slider.header8fix {
		margin-top: 50px;
	}

    .burger {
        top: 5rem;
    }
	div.menu-logo {
		top: 5rem;
	}

}

/*  BURGER-MENÜ ENDE  ----------------  */

/*  BURGER-MENÜ-Logo ANFANG  ----------------  */

div.menu-logo {
    position: absolute;
    height: 120px;
    width: 120px;
    margin: 2rem;
	opacity: 1;
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
    visibility: visible;
    z-index: 2;
    top: 40%;
    transform: translateY(-50%);
}


div.menu-logo>a {
    height: 100%;
    display: inline-flex;
    align-items: center;
    padding: 1.5rem;
}

div.menu-logo img {
    width: 100%;
}

@media (min-width:767px) {
div.menu-logo {
    height: 200px;
    width: 200px;
}
}

@media (min-width:992px) {
div.menu-logo {
    height: 300px;
    width: 300px;
}
}

/*  BURGER-MENÜ-Logo ENDE  ----------------  */

.adresse-top p {
    font-weight: 400;
}

.adresse-top>*:nth-child(1) {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-column-align: start;
    justify-self: start;
    align-self: center;
}

.adresse-top>*:nth-child(2) {
    -ms-grid-column: 3;
    -ms-grid-column-span: 1;
    grid-column: 3 / 4;
    -ms-grid-column-align: end;
    justify-self: end;
    align-self: center;
    text-align: right;
}

nav ul>li:hover {
    cursor: auto;
}

nav ul li a:focus,
nav ul li a:hover {
    color: var(--text-invert);
    outline: none;
}

#logo .logo {
    padding: 1rem 0;
    height: 100%;
    position: absolute;
    max-width: 370px;
}

#logo .logo-klein {
    padding: 1rem 0;
    height: 100%;
}

.logo-klein {
    display: none;
    max-height: 70px;
}

.header-mobile-buttons {
    padding-top: 11rem;
    background: #fff;
    padding-bottom: 2rem;
}

header p {
    margin: 0;
    padding: 0;
}

@media (min-width: 1400px) {

    .adresse-top {
        -ms-grid-columns: 1fr 685px 685px 1fr;
        grid-template-columns: 1fr 685px 685px 1fr;
    }

}

@media (min-width: 1200px) and (max-width: 1399px) {

    .adresse-top {
        -ms-grid-columns: 1fr 570px 570px 1fr;
        grid-template-columns: 1fr 570px 570px 1fr;
    }

}

/* @media (min-width: 992px) { */

nav ul li ul li.menu-item-has-children:hover>a:after {
    color: var(--text-invert);
}

#menueleisten-id .telefonlink,
#menueleisten-id>a>img {
    display: none;
    position: absolute;
}

.menueleiste {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    grid-row: 1 / 2;
    -ms-grid-row-align: end;
    -ms-grid-column-align: end;
    -ms-grid-row-align: stretch;
    align-self: stretch;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    position: relative;
}

header,
#main-header.scrolled {
    position: fixed;
    z-index: 1200;
    width: 100%;
    overflow: visible;
    background: transparent;
    transition: all .3s ease-in;
}

nav {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    right: 0rem;
}

nav>ul {
    width: auto;
    padding: 0 0 6rem 0;
    display: flex;
    flex-direction: column;
}

.menueleiste>.btn,
.menueleiste>.telefonlink {
    margin: 0;
    display: inline-table;
    margin-left: 1.4rem;
    font-weight: 500;
    letter-spacing: 1px;
    align-self: center;
}

nav ul li {
    display: grid;
    position: relative;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
}

span.submenu-toggle {
    font-size: 3.5rem;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-self: end;
    width: 5rem;
    text-align: center;
    color: var(--text-invert);
    cursor: pointer;
}

nav>ul>li>a,
#main-header.scrolled nav>ul>li>a {
    padding: 1rem;
    font-weight: 400;
    transition: all .3s ease-in;
    color: var(--text-invert);
    font-size: 2rem;
    font-weight: 700;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-transform: uppercase;
}

.home nav>ul>li>a:before {
    background: var(--text-invert);
}

header nav>ul>li:last-of-type a:hover {
    color: var(--text-invert);
    border-color: var(--text-invert);
}

header nav>ul>li:last-of-type a:hover:before {
    width: 100%;
}

header nav>ul>li:last-of-type a:hover:after {
    background-image: url(/wp-content/uploads/2023/03/pfeil-icon.png);
}

/*Terminbutton-Menue Ende*/

nav ul li ul {
    width: 100%;
    height: auto;
    position: relative;
    margin: 0 0 0 0;
    padding: 0 0 0 1rem;
    background: transparent;
}

nav ul.sub-menu>li>a {
    display: block;
    padding: 1rem;
    width: auto;
    line-height: 3rem;
    color: var(--text-invert);
    background: transparent;
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
    font-weight: 400;
    border-radius: 5px;
    text-transform: uppercase;
}

.adresse-top {
    background: linear-gradient(0deg, var(--primary-color) 1px, var(--secondary-color) 1px);
    padding: 1rem;
    display: -ms-grid;
    display: grid;
    -ms-grid-rows: 1fr;
    grid-template-rows: 1fr;
}

.adresse-top a {
    font-weight: 400;
}

.menuezeile {
    display: grid;
    grid-template-columns: minmax(130px, 1fr) 2fr;
    grid-template-rows: 1fr;
}

header #logo {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    max-height: 130px;
    width: auto;
    display: flex;
    align-items: center;
    position: relative;
}

.sub-menu>.current-menu-item>a,
.sub-menu>.current-menu-parent>a {
    color: var(--primary-color);
    background: var(--text-invert);
}

.mobil-menu-button-bg {
    display: none;
}

/* } */

@media (min-width: 992px) and (max-width: 1199px) {

    .adresse-top {
        -ms-grid-columns: 1fr 470px 470px 1fr;
        grid-template-columns: 1fr 470px 470px 1fr;
    }

    header #logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }

    #logo img {
        height: 69%;
    }

}

@media (max-width: 991px) {

    .adresse-top {
        display: none;
    }

    .menueleiste {
        position: fixed;
        top: 10rem;
        right: -105%;
        height: calc(100vh - 5rem);
        z-index: 300;
        background: var(--secondary-color);
        width: 100%;
        overflow: auto;
    }

    .menueleiste nav {
        width: 100vw;
    }

    nav ul#menu-hauptmenue {
        padding-left: 0;
    }

    .mobil-menu-button {
        position: relative;
        width: 70px;
        background: transparent;
        top: 0;
        height: 5rem;
        z-index: 50;
        float: right;
    }

    .mobil-menu-button-bg {
        position: fixed;
        z-index: 5;
        width: 100%;
        background: var(--background);
        display: flex;
        justify-content: space-between;
        align-items: center;
        top: 50px;
    }

    .mobil-menu-button span {
        float: right;
        width: 30px;
        top: 1rem;
        height: 0.2rem;
        background: var(--text-color);
        margin-top: 25px;
        margin-right: 15px;
    }

    .mobil-menu-button.menu-open span {
        height: 0px;
    }

    .mobil-menu-button.menu-open span:before {
        width: 3rem;
        height: 0.2rem;
        background: var(--text-color);
        transition: 0.3s;
        right: 15px;
        position: absolute;
        top: 1.3rem;
        content: '';
        transform: rotate3d(0, 0, 1, 45deg);
    }

    .mobil-menu-button span:before {
        width: 3rem;
        height: 0.2rem;
        background: var(--text-color);
        transition: 0.3s;
        right: 15px;
        position: absolute;
        top: 1.7rem;
        content: '';
        -webkit-transform-origin: 0.001rem center;
        transform-origin: 0.005rem center;
    }

    .mobil-menu-button.menu-open span:after {
        width: 3rem;
        height: 0.2rem;
        background: var(--text-color);
        transition: 0.3s;
        right: 15px;
        position: absolute;
        top: 34px;
        content: '';
        transform: rotate3d(0, 0, 1, -45deg);
    }

    .mobil-menu-button span:after {
        width: 3rem;
        height: 0.2rem;
        background: var(--text-color);
        transition: 0.3s;
        right: 15px;
        position: absolute;
        top: 3.3rem;
        content: '';
        -webkit-transform-origin: 0.001rem center;
        transform-origin: 0.005rem center;
    }

    nav ul li ul>li {
        animation-name: animateli;
        animation-duration: 350ms;
        animation-delay: calc(var(--animation-order) * 100ms);
        animation-fill-mode: both;
        animation-timing-function: ease-in-out;
    }

    nav ul>li ul li:nth-of-type(1) {
        --animation-order: 1;
    }

    nav ul>li ul li:nth-of-type(2) {
        --animation-order: 2;
    }

    nav ul>li ul li:nth-of-type(3) {
        --animation-order: 3;
    }

    nav ul>li ul li:nth-of-type(4) {
        --animation-order: 4;
    }

    nav ul>li ul li:nth-of-type(5) {
        --animation-order: 5;
    }

    nav ul>li ul li:nth-of-type(6) {
        --animation-order: 6;
    }

    nav ul>li ul li:nth-of-type(7) {
        --animation-order: 7;
    }

    nav ul>li ul li:nth-of-type(8) {
        --animation-order: 8;
    }

    @keyframes animateli {
        0% {
            opacity: 0;
            transform: scale(.8) translateY(-8px)
        }

        100% {
            opacity: 1
        }
    }

    .derbutton {
        color: var(--text-color);
        right: 2rem;
        top: 1.5rem;
        position: absolute;
        transition: all .2s ease;
    }

    .derbutton:before {
        transition: all .2s ease;
        font-size: 2rem;
        transform: rotate(90deg);
        display: block;
    }

    .derbutton.drehen:before {
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        display: block;
    }

    .drehen+.sub-menu {
        display: block !important;
    }

    .header #logo {
        display: none;
    }

    nav+.telefonlink {
        display: none;
    }

    nav ul li ul {
        transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        -ms-transition: all 0.2s ease-out;
    }

    .mobil-menu-button-bg .telefonlink {
        color: var(--text-invert);
        margin-top: 1.2rem;
        position: absolute;
        margin-left: 2rem;
    }

    .header-mobile-buttons img {
        width: 90%;
        max-width: 200px;
        display: block;
        margin: 0 auto;
    }

    .header-mobile-buttons p {
        text-align: center;
    }

    .header-mobile-buttons .more-link {
        margin: 2rem auto;
        width: 80%;
        justify-content: center;
    }

    .header-mobile-buttons .btn {
        background: #eee;
        color: #fff;
    }

    .header-mobile-buttons a:hover {
        text-decoration: none;
        font-weight: normal;
        text-decoration: none;
        color: #000;
    }

    .header-mobile-buttons a:focus {
        text-decoration: none;
        font-weight: normal;
        text-decoration: none;
    }

    .socialicon img {
        max-width: 50px;
        padding: 1rem;
    }

    header nav>ul>li:last-of-type a {
        background: transparent;
    }

    .header-mobile-block img {
        width: 40%;
        margin-left: 1.5rem;
    }

    #logo img {
        display: none;
    }

    aside {
        display: none;
    }

}

@media (min-width: 992px) and (max-width: 1399px) {
    nav>ul>li>a {
        font-size: 1.3rem;
    }
}

/*  HEADER ENDE  ---------------------------------------------------------------------------------------------------------------------------   */