/*-- 
Name:          TME Anders - Transporte mit Einsatz, Aerzen
Url:           https://tme-anders.de
Description:   TME Anders - Transporte mit Einsatz, Aerzen 
Version:       1.0 (Responsive)
______________ */


input#menue { display:none; }
input[name="drop"] { display:none; }

/*-- menue toggle
_________________________ HTML > CSS;  */


  @media only screen and (max-width: 979px) {

label.menue {  margin:0 0 15px 0; padding: 10px; max-width: 46px; height: auto; display: block; 
               background-color: var(--bm01); border: 1px solid var(--bm03); border-radius: 4px; }

.bar {        width: 24px; height: 2px; background-color: var(--bm02); border-radius: 1px; display: block; transition: 0.5s; transform-origin: center; }
.bar + .bar { margin: 5px 0 0 0;}

#menue:checked + .menue .bar:nth-child(1){ transform: translateY(7px) rotate(-45deg); }
#menue:checked + .menue .bar:nth-child(2){ opacity:0; }
#menue:checked + .menue .bar:nth-child(3){ transform: translateY(-7px) rotate(45deg); }

#menue:checked + .menue  {                  background-color: var(--bm04); border: 1px solid var(--bm06); }
#menue:checked + .menue .bar:nth-child(1), 
#menue:checked + .menue .bar:nth-child(3) { background-color: var(--bm05); }
}

/*-- kopf, header menue
_________________________ HTML > CSS;  */



@media only screen and (min-width: 300px ) {


#kopf {       display: flex; display: -ms-flexbox; justify-content : end; -ms-flex-pack : end; flex-wrap: wrap; -ms-flex-wrap : wrap; 
              align-items : center; -ms-flex-align : center; }
nav#nav {     }

.navsub {                   max-height:0; } 
input.auf:checked~.navsub { max-height: 800px; } 

.drop span {                         z-index:0; }
.drop label.zu {                     z-index:1; }
.drop label.auf {                    z-index:2; }
.drop input.auf:checked ~ label.zu { z-index:2; }
.drop input.zu:checked ~ label.auf { z-index:2; }

.drop label:nth-child(odd)::after {                     content: "\f107"; font-family: 'FontAwesome'; font-weight:bold; } /* content: "+ "; */
.drop input.auf:checked ~ label:nth-child(odd)::after { content: ""; }
.drop input.auf:checked ~ label.zu::after {             content:  "\f106"; font-family: 'FontAwesome'; font-weight:bold; } /* content: "- "; */
ul.navsub li a:before {                                 content: "\f105"; font-family: 'FontAwesome'; font-weight:bold; padding-right: 13px; } /* content: "- "; */


/*  */
nav#nav {                    background: var(--nav01); }

ul.nav li {                  color: var(--nav02); 
                             background: none; border-bottom: none; }

ul.nav a:link, ul.nav a:visited { 
                            color: var(--nav03); 
                            background: none; border-bottom: 3px solid var(--nav04); }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                            color: var(--nav05);
                            background: none; border-bottom: 3px solid var(--nav08); }
li.drop:hover, li.drop:focus, li.drop:active {
                            color: var(--nav07);
                            background: none; border-bottom: 3px solid var(--nav08); }


li.drop label:nth-child(odd)::after {
                             color: var(--nav09); 
                             background: none; border: none; }

li.drop input.auf:checked ~ label.zu::after {
                             color: var(--nav10); 
                             background: none; border: none; }

li.drop:hover label:nth-child(odd)::after, li.drop:focus label:nth-child(odd)::after, li.drop:active label:nth-child(odd)::after, 
li.drop:hover input.auf:checked ~ label.zu::after, li.drop:focus input.auf:checked ~ label.zu::after, li.drop:active input.auf:checked ~ label.zu::after {
                             color: var(--nav11); 
                             background: none; border: none; }

li.drop input.auf:checked ~ span { color: var(--nav12); background-color: var(--nav13); border: none; }


ul.navsub {                  }
ul.navsub li {               color: var(--nsub01); 
                             background: var(--nsub02); border-bottom: none ; }
ul.navsub a:link, ul.navsub a:visited {
                             color: var(--nsub03); 
                             background: var(--nsub04); border-bottom: none ; }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                             color: var(--nsub05); 
                             background: var(--nsub06); border-bottom: none ; }

ul.navsub li a:before {     color: var(--nsub07); } 
ul.navsub li:hover a:before, ul.navsub li:focus a:before, ul.navsub li:active a:before { 
                            color: var(--nsub08); } 

}  @media only screen and (max-width: 979px) {

header {        }

#kopf {       padding: 1em 0  /* 1em 15px 1em 15px */; min-height: 100px; /* min-height .. ! */}
label.menue { width: 48%; }
nav#nav {     width: 100%; }

nav#nav {          height: auto; max-height:0; overflow: hidden; transition: 2s all; }
                              /* max-height - deswegen die nav nicht sichtbar */
#menue:checked + .menue + #nav { max-height: 800px; width: 100%; height: auto; } /* nav sichtbar .. evt. hoehe anpassen */

/* --- */
ul.nav {                             padding: 0; } 
ul.nav li {               margin: 0; padding: 0; 
                                     list-style-type: none;}
ul.nav li:last-child { }


ul.nav a {                 margin:0; padding: 1rem 5rem; 
                                     display: block; text-decoration: none; border: 0; }
ul.nav a:last-child  { }
ul.nav a:link, ul.nav a:visited { }

li.drop {                            position:relative; }

li.drop span {             margin:0; padding: 1rem 1rem; 
                                     position:relative; top: 0; left: 0; z-index:0; 
                                     display: block; text-decoration: none; border:0; }
li.drop label {            margin:0; padding: 1rem 2rem; 
                                     width: 100%; height:auto; 
                                     position:absolute; top: 0; left: 0; text-align:right;
                                     display: block; text-decoration: none; border:0; cursor: pointer; }
/* --- */

ul.navsub {                margin:0; padding: 0; width: 100%; max-height:0; 
                                     position:relative; 
                                     overflow: hidden; transition: 1s all; } 
ul.navsub li {             margin:0; padding: 0; 
                                     list-style-type: none; }
ul.navsub li:last-child {            border: 0; }


ul.navsub a {              margin:0; padding: 0.7rem 0; 
                                     display: block; text-decoration: none; text-align:left; 
                                     }
ul.navsub a:last-child  {            border: 0; }
ul.navsub a:link, ul.navsub a:visited { }

ul.navsub a:before {                 padding: 0 0.5rem 0 2rem; }


/* --- */

nav#nav {                    background: var(--mob01); }

ul.nav li {                  color: var(--mob02); 
                             background: var(--mob03); border-bottom: 1px solid var(--mob04); }

ul.nav a:link, ul.nav a:visited { 
                            color: var(--mob05); 
                            background: var(--mob06); border: none; }
ul.nav a:hover, ul.nav a:focus, ul.nav a:active {
                            color: var(--mob07); 
                            background: var(--mob08); border: none; }


li.drop label:nth-child(odd)::after, 
li.drop input.auf:checked ~ label.zu::after {
                             color: var(--mob09); 
                             background: none; border: none; }

li.drop:hover label:nth-child(odd)::after, li.drop:focus label:nth-child(odd)::after, li.drop:active label:nth-child(odd)::after, 
li.drop:hover input.auf:checked ~ label.zu::after, li.drop:focus input.auf:checked ~ label.zu::after, li.drop:active input.auf:checked ~ label.zu::after {
                             color: var(--mob10); 
                             background: none; border: none; }


ul.navsub {                  }
ul.navsub li {               color: var(--mob11); 
                             background: none; border-bottom: 1px solid var(--mob12); }
ul.navsub li:last-child {    border-bottom: 1px solid var(--mob13); }

ul.navsub a:link, ul.navsub a:visited {
                             color: var(--mob14); 
                             background-color: var(--mob15); border: none; }

ul.navsub a:hover, ul.navsub a:focus, ul.navsub a:active {
                            color: var(--mob16); 
                            background-color: var(--mob17); border: none; }

ul.navsub li a:before {     color: var(--mob18); } 
ul.navsub li:hover a:before, ul.navsub li:focus a:before, ul.navsub li:active a:before { 
                            color: var(--mob19); }



} @media only screen and (min-width: 980px ) {

header {                                      width: auto; }

#kopf {       margin:0 auto 0 auto; padding:0; width: auto; min-height: 60px; /* min-height .. ! */}
nav#nav {     width: 100%;  }


/* --- */

ul.nav {                  margin: 0; padding: 0 8vw 0 0; 
                                     height: auto; 
                                     display: flex; display: -ms-flexbox; justify-content: flex-end; -ms-flex-pack : end; 
                                     }


ul.nav li {          margin: 30px 0; padding: 0; 
                                    height: auto; 
                                    border: 0; list-style-type:none; }
ul.nav li:last-child {              }


ul.nav a {              margin: 0; padding: 1rem 1rem; 
                                   display: block; text-decoration: none; 
                                   border: 0; }
ul.nav a:last-child { }


li.drop {                            position:relative; }
/* span wie a - zusammen legen? */
li.drop span {             margin:0; padding: 1rem 1.8rem 1rem 1rem; 
                                     position:relative; top: 0; left: 0; z-index:0; 
                                     display: block; text-decoration: none; border:0; }
li.drop label {            margin:0; padding: 1rem 0.6rem; 
                                     width: 100%; height:auto; 
                                     position:absolute; top: 0; left: 0; text-align:right;
                                     display: block; text-decoration: none; border:0; cursor: pointer; }


ul.navsub {                margin:0; padding: 0; max-height:0; 
                                     position: absolute; left: 0;
                                     overflow: hidden; transition: 1s all; } 
ul.navsub.ende {         margin:0; padding: 0; max-height:0; 
                                     position: absolute; right:0; margin-left:-75%;
                                     overflow: hidden; transition: 1s all; } 

ul.navsub li {             margin:0; padding: 0; 
                                     width: 100%; white-space:nowrap;
                                     list-style-type: none; }
ul.navsub li:last-child {            border: 0; }


ul.navsub a {           margin:0; padding: 0.5rem 25px 0.5rem 20px; 
                                     display: block; text-decoration: none; text-align:left; 
                                     border:0; }
ul.navsub a:last-child  {            border: 0; }
ul.navsub a:link, ul.navsub a:visited { }

ul.navsub a:before {                padding: 0 0.5rem 0 0; }

input.auf:checked ~ span {          border: 0; }

}

/*-- you are here
_________________________ HTML > CSS; */


/* firstmenue */
body#home li#home-a a, 
body#impressum li#impressum-a a,
body#datenschutz li#datenschutz-a a,
body#sitemap li#sitemap-a a 
{ 
color: var(--yah05);
background: none; border-bottom: 3px solid var(--yah06); 
}