@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&display=swap');


#Navigationsbereich ul {
    margin: 0px 0 0 0;
    padding: 0px 0 0 0;
}

#Navigationsbereich li {
    margin: 0;
    padding:  0px 0 0 0;
    list-style: none;
}

#Navigationsbereich .submenu {
    margin:0;
    padding:20px 0 20px 0 ;
}

.menu  {
	position:relative;
	display: Flex;
	justify-content: center;
	gap: 4cqw;   /* die anstänee zwischen LEISTNGEN .... ÜBER UNS ...... REFERENZEN .... KONTAKT */
	list-style: none;
	margin:  1% 0 0 0;
	padding:0px;
	z-index: 500;

}

.menu ul{
	list-style: none;
	margin: 0;
	z-index: 500;

}

.menu li{
	position: relative;
	padding-bottom: 0px;
	margin-left:0px;
	display: inline-block;
	z-index: 500;
}

.menu a{
	position: relative;
	display: inline-block;
	padding: 0 0 0 0;
	margin:  0 0 0 0;
	font-family: "Barlow Condensed", sans-serif;
	font-size:1.5cqw;  /* Schriftgrösse Nanibar   service  ....LEISTUNGEN .... KONTAKT */
	font-weight: 500;
	color:#FFF;
	text-decoration: none;
	background-image: none;
	z-index: 500;

}

.menu li a {
 display: inline-block;
 z-index: 500;
}

.menu a::before{

  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transition: 0.5s transform ease;
  transform: scale3d(0,1,1);
  transform-origin: 0% 40%;
  transform-origin: 50% 50%;
  background: #B90020; /* animierte linienien Farbe*/
  
}

.menu a:hover::before{
  transform: scale3d(1,1,1);
}


/* Untermenü */
.submenu {
    display:none;
    position:absolute;
	text-align:left;
    left:0;
    list-style:none;
    margin:0;
    width:max-content;
    white-space:nowrap;
    z-index:1000;
    background:linear-gradient(10deg,#000,#383838,#000);
    border-radius:0 0 20px 20px;
	box-shadow: 3px 3px 4px rgba(39,39,39,1);
	font-weight: 500;
}

.submenu li {
    display:block;
    margin:0;
}

/* Pulldown menu*/
.submenu li a {
	margin: 15px 10px 15px 10px;
	text-align:left;
	font-family: "Barlow Condensed", sans-serif;
		font-weight: 500;
    padding:0;
	color: #FFF;
	z-index: 1000;
}

.submenu li a:hover {
		color: #B00023;
}


/* Untermenü beim Überfahren anzeigen */
.menu li:hover .submenu {
	display: Block;
}




.burger{
    display:none;
    position:fixed;
    top:0px;
    left:15px;
    font-size:25px;
	z-index: 500;
}	





/* Handy */
@media screen and (max-width:768px) {


    #wrapper {
        padding:5px; 
        /* Innenabstand vom gesamten Seiteninhalt */
    }



    /* ==========================
       BURGER BUTTON
       ========================== */

    #burger {

        display:block;
        /* Burger anzeigen (Desktop ist meistens display:none) */

        position:fixed;
        /* bleibt beim Scrollen immer an gleicher Stelle */

        top:10px;
        /* Abstand vom oberen Bildschirmrand */

        left:15px;
        /* Abstand vom linken Bildschirmrand */

        font-size:35px;
       /* Größe vom Burger-Symbol ☰ */

        color:white;
        /* Farbe vom Burger-Symbol */

        z-index:99999;
        /* liegt über allen anderen Elementen */

        cursor:pointer;
        /* Mauszeiger wird zur Hand */
    }





    /* ==========================
       HAUPTMENÜ BOX
       ========================== */

    #menu {

        display:none;
        /* Menü ist am Anfang unsichtbar */

        position:fixed;
        /* Menü bleibt am Bildschirm befestigt */

        top:55px;
        /* Abstand vom oberen Rand
           (unterhalb vom Burger) */

        left:10px;
        /* Abstand vom linken Rand */

        width:80%;
        /* Breite der Menübox */

        flex-direction:column;
        /* Menüpunkte untereinander */

        align-items:flex-start;
        /* Inhalt links ausrichten */

        text-align:left;
        /* Text links ausrichten */

        background:linear-gradient(10deg,#000,#383838,#000);
        /* Hintergrund vom Menü */

        border:2px solid #a00303;
        /* roter Rand um Menübox */

        border-radius:15px;
        /* abgerundete Ecken */

        padding:0 0 0 0 ;
        /* Abstand vom Rand zum Text */

        z-index:99998;
        /* Menü liegt über dem Seiteninhalt */

    }



    #menu.active {

        display:flex;
        /* Menü wird sichtbar wenn JavaScript
           die Klasse active setzt */

    }


    /* ==========================
       HAUPTMENÜ PUNKTE
       ========================== */

    #menu > li {

        display:block;
        /* jeder Menüpunkt eigene Zeile */


        width:100%;
        /* Menüpunkt volle Breite */


        margin-bottom:12px;
        /* Abstand zwischen Menüpunkten */


        text-align:left;
        /* Text links */

    }





    /* ==========================
       HAUPTMENÜ SCHRIFT
       ========================== */

#menu > li > a {

    display:inline-block;

    width:auto;

    font-size:30px;

    text-align:left;

    padding:20px 0 5px 0px;
	margin: 0 0 0 20px;

}



    /* ==========================
       ALLE MENÜ LINKS
       ========================== */

#menu a {
	display:inline-block;
	width:auto;
	text-align:left;

}

.menu a::before{

  content:"";
  width:100%;
  height:2px;
  position:absolute;
  left:0;
  bottom:0;

  transition:0.5s transform ease;
  transform:scale3d(0,1,1);
  transform-origin:50% 50%;

  background:#B90020;
}


    /* ==========================
       UNTERMENÜ
       ========================== */

    #menu .submenu {


        position:static;
        /* bleibt im normalen Seitenfluss */


        display:none;
        /* zuerst versteckt */


        background:none;
        /* kein eigener Hintergrund */


        border:none;
        /* kein Rahmen */


        box-shadow:none;
        /* kein Schatten */


        padding:0;
        /* kein Innenabstand */


        margin-left:15px;
        /* Untermenü etwas nach rechts eingerückt */

        border:2px solid #666;
        /* roter Rand um Menübox */

        border-radius:15px;
        /* abgerundete Ecken */

    }





    /* ==========================
       UNTERMENÜ ÖFFNEN
       ========================== */

    #menu li.open .submenu {


        display:block;
        /* sichtbar wenn JavaScript
           open setzt */

    }





    /* ==========================
       UNTERMENÜ SCHRIFT
       ========================== */

    #menu .submenu a {


        font-size:25px;
        /* Größe Untermenü-Schrift */


        text-align:left;
        /* linksbündig */

    }


}