/* = = = = = = = = = = = = = = = = = datei menue.css = = = = = = = = = = = = = = = = = = = = = = = = = */



/* ############################################################ */
/* diese datei enthält das hauptmenü - hier sind es die buttons */
/* ############################################################ */


.btn ul {width:30rem;
padding:0;
margin:0 auto;
}

.btn  li {list-style-type : none;
padding:.1rem .3rem;
margin:0;
border:0;
}

.btn li a {display:table-cell;text-decoration:none;
width:26rem;
background:rgba(30, 144, 255, 0.4);
color:#fff;
text-shadow:0 1px 0px black;
padding:0rem 0rem;
}



.btn li a:hover {
color: #fff;
background:rgba(30, 144, 255, 0.9);
}

.btn li:before {display:table-cell;
font-size:2rem;
background:orange;
width:5rem;
padding:.5rem 0rem;
text-align:center;
font-family:'Font Awesome 5 Free';/* - 'Font Awesome 5 Free' for Regular and Solid symbols;
                                     - 'Font Awesome 5 Brand' for Brands symbols. */
font-weight:900; /* - 400 for Regular and Brands symbols;
                    - 900 for Solid symbols. */
content:"\f005";
color:#fff;text-shadow:0 0 1px black;
}

.btn li:hover:nth-child(n):before {
background:gold;
color:#000;
text-shadow:none;
content:"\f105";
}


.btn li:nth-child(1):before {
content:"\f7bf";
}

.btn li:nth-child(2):before {
content:"\f197";
}

.btn li:nth-child(3):before {
content:"\f4fb";
}

.btn li:nth-child(4):before {
content:"\f669";
}

.btn li:nth-child(5):before {
content:"\f259";
}

.btn li:nth-child(6):before {
content:"\f005";
}

/* die icons nach dem linkwort */
.btn  li .fas,
.btn  li .far,
.btn  li .fab {font-size:2rem;
color:yellow;
}



/* ############################################################ */
/* M E D I A   Q U E R I E S - RESPONSIVE-BILDSCHIRMABFRAGEN */
/* ############################################################ */



/* ==================================== ab 960 pixel ================================== */

@media (min-width: 960px) {

.btn ul {width:80rem; }
.btn li {display:inline-block; }

}