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

/*-- 
_________________________ HTML > CSS;  */

body { min-height:100%; color: rgb(var(--mc82)); text-align: justify; }
html { height:100%;  -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } 

html, a, h4, h5, div, p, span, ol, ul, li, input, button { font-family: "Poppins", sans-serif; }
h1, h2, h3, h6 { font-family: "Roboto"; }

ol, ul, li { text-align: left; }
input, select, textarea, button { font-size: inherit; font-family: inherit; }

* {                 -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
*:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

img {            border:none; text-decoration:none; }
table, td, div { border:0; }


/*-- 
_________________________ HTML > CSS;  */


/*-- kopf + logo 
_________________________ HTML > CSS;  */

body {        background: var(--bg01); margin:0; padding:0; }
header {      background: var(--bg02); margin:0; padding:0; }
#kopf {       background: var(--bg03); }
#kopf-2 {     background: url(img/00--hg-kopf.jpg) no-repeat center top; background-size: cover; }
main {        margin-bottom: 130px; }

#kopf {       position: relative; z-index:1; }
label.menue { position: absolute; right: 30px; top: 30px; }
#kopf-2 {     position: relative; }
#logo {       position: absolute; z-index:2; left:0; top: 0; }

  @media only screen and (max-width: 599px) {
#kopf-2 {     height: 20vh; }
img.logo {    width: 12vh; }
ul.nav {      margin-top: 60px; } 
} @media only screen and (min-width: 600px ) {
#kopf-2 {     height: 26vh; }
img.logo {    width: 16vh; }
ul.nav {      margin-top: 80px; } 
} @media only screen and (min-width: 768px) {
#kopf-2 {     height: 32vh; }
img.logo {    width: 20vh; }
} @media only screen and (min-width: 980px ) {
#kopf-2 {     height: 45vh; }
img.logo {    width: 24vh; }
} @media only screen and (min-width: 1260px ) {
#kopf-2 {     height: 42vh; }
img.logo {    width: 24vh; }}
@media only screen and (orientation: landscape) {}

#logo a:link, #logo a:visited, #logo a:hover, #logo a:focus, #logo a:active { 
background: none; text-decoration:none; border:none; margin:0; padding:0; }

:root { 
--a-mob: 15px;   /* mobil (re li) */
--a-cont: 90px;  /* container (re li) */
--a-box: 30px;   /* box (oben unten) */
--a01: 15px; 
--a02: 30px; 
--a03: 60px; 
}



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

/*-- inhalt
_________________________ HTML > CSS;  */


.c-mi {       margin:0 auto 0 auto; padding: 0 var(--a-cont); overflow:auto; background: var(--cont01); }
.c-full {     margin:0 auto 0 auto; padding: 0;               overflow:auto; background: var(--cont02); }
.c-flow {                                                                    background: var(--cont03); }

  @media only screen and (max-width: 599px) {
} @media only screen and (min-width: 600px ) {

.c-mi {       width: 100%; }
.c-full {     width: 100%; }
.c-flow {     width: auto; }

} @media only screen and (max-width: 767px ) {
.c-mi {       padding: 0 var(--a-mob); }
.rev { display: flex; flex-direction: column-reverse; } /* mobile - umgedrehte reihenfolge*/
} @media only screen and (min-width: 768px ) {
.c-mi {       padding: 0 var(--a-cont); }
} @media only screen and (min-width: 980px ) {

.c-mi {       width: 70%; }
.c-full {     width: 70%; }
.c-flow {     } /*  */

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




.box, .flex, .row, .ref, section, .colum, .c-full { 
         margin:0 auto 0 auto; padding: 0 0 var(--a-box) 0; }



section, 
.box {   width: auto; overflow:auto; background: var(--cont05); }


.flex {  display: flex; display: -ms-flexbox; justify-content : space-between; -ms-flex-pack : justify; 
         align-items : flex-start; -ms-flex-align : start; 
         flex-wrap: wrap; -ms-flex-wrap : wrap; }

.row {   display: table; width: 100%; 
         border-spacing:0; cell-spacing:0;
         background: var(--cont05); border: none; }

.row [class*="col"] { 
         display: table-cell; vertical-align: top;
         /*cell-spacing: 15px;*/ padding: 15px; 
         background: var(--cont05); /*width: 33.33%;*/ }


.colum {      column-fill: auto; column-rule: 3px double rgb(var(--mc255)); } 
.colum h2 {   column-span: all; }
  @media only screen and (max-width: 599px) {
.colum {     column-count: 1; column-gap: 0; }
} @media only screen and (min-width: 600px ) {
.colum {     column-count: 2; column-gap: 20px; }
} @media only screen and (min-width: 1024px ) {
.colum {     column-count: 3; column-gap: 30px; }
}



[class*="col-"] {  min-height: 1px; padding: 0 15px 20px 15px; background-color: rgba(var(--mc0),0.02); }

  @media only screen and (max-width: 599px) {
.col-1.s {  width: 8.33%;}
.col-2.s {  width: 16.66%;}
.col-3.s {  width: 25%;}
.col-4.s {  width: 33.33%;}
.col-5.s {  width: 41.66%;}
.col-6.s {  width: 50%;}
.col-7.s {  width: 58.33%;}
.col-8.s {  width: 66.66%;}
.col-9.s {  width: 75%;}
.col-10.s { width: 83.33%;}
.col-11.s { width: 91.66%;}
.col-12.s { width: 100%;}

} @media only screen and (min-width: 600px ) {
.col-1.m {  width: 8.33%;}
.col-2.m {  width: 16.66%;}
.col-3.m {  width: 25%;}
.col-4.m {  width: 33.33%;}
.col-5.m {  width: 41.66%;}
.col-6.m {  width: 50%;}
.col-7.m {  width: 58.33%;}
.col-8.m {  width: 66.66%;}
.col-9.m {  width: 75%;}
.col-10.m { width: 83.33%;}
.col-11.m { width: 91.66%;}
.col-12.m { width: 100%;}
} @media only screen and (max-width: 767px ) {
} @media only screen and (max-width: 980px ) {
} @media only screen and (min-width: 980px ) {
.col-1 {    width: 8.33333333%;}
.col-2 {    width: 16.66666667%;}
.col-3 {    width: 25%;}
.col-4 {    width: 33.33333333%;}
.col-5 {    width: 41.66666667%;}
.col-6 {    width: 50%;}
.col-7 {    width: 58.33333333%;}
.col-8 {    width: 66.66666667%;}
.col-9 {    width: 75%;}
.col-10 {   width: 83.33333333%;}
.col-11 {   width: 91.66666667%;}
.col-12 {   width: 100%;}
} @media only screen and (min-width: 1260px ) {}




/*-- inhalt
_________________________      */

html, a, h4, h5, div, p, span, ol, ul, li, input, button { font-family: "Poppins", sans-serif; }
h1, h2, h3, h6 { font-family: "Roboto"; }

:is(h1, .h1, h2, .h2, h3, .h3 ,h4, .h4, h5, h6, .h6 ) { margin:0; text-align:left; }

h1 {               padding: 2em 0 30px 0; color: var(--in01);  font-weight: 700; }
h2 {               padding-bottom: 30px;  color: var(--in02);  font-weight: 500; }
h2.h2 {  }
h3 {               padding-bottom: 20px;  color: var(--in03);    font-weight: 500; }
h3.h3 {  }
h4, figcaption {   padding-bottom: 20px;  color: rgb(var(--mc112));    font-weight: 300; }
h5 {               padding: 30px 0;       color: var(--in04);  font-weight: 500; }
h6 {               padding-bottom: 20px;  color: var(--in05);  font-weight: 300; }

.txt {                                    color: var(--in06); }
.xs, time {                               color: rgb(var(--mc112));    font-weight: 300; }

p {      margin:0; padding-bottom: 15px;                               font-weight: 300; }

p~h2, p~h2.h2, p~h3, p~h3.h3, p~h4 { padding-top: 20px; }

main p, main h5, main h6, main ul li, main ol li { word-wrap: break-word; 
       hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; 
       hyphenate-limit-chars: auto 5; hyphenate-limit-lines: 2; 
       -webkit-hyphenate-limit-chars: auto 3; -webkit-hyphenate-limit-lines: 4; 
       -ms-hyphenate-limit-chars: auto 3; -ms-hyphenate-limit-lines: 4; }

ul.nav a, ul.nav li, li.drop span, li.drop label, 
ul.navsub a {    font-size: 1em; }


section.slogan { font-size: 1em; font-style:italic; font-weight: normal; color: var(--in07); } /* h5 */


  @media only screen and (max-width: 767px) {
h1 {             font-size: 1.3em; }
h2 {             font-size: 1.2em; }
h2.h2 {  }
h3 {             font-size: 1.1em; }
h3.h3 {  }
h4, figcaption { font-size: 0.9em; }
h5 {             font-size: 1em; }
h6 {             font-size: 1em; }
p {              font-size: 1em; }
.xs, time {      font-size: 0.9em; }
span, ol, ul, li, input, button {  font-size: 0.9em; }
main ul li, 
main ol li {     font-size: 1.1em; }
} @media only screen and (min-width: 768px) {
h1 {             font-size: 1.4em; }
h2 {             font-size: 1.3em; }
h2.h2 {  }
h3 {             font-size: 1.2em; }
h3.h3 {  }
h4, figcaption { font-size: 1em; }
h5 {             font-size: 1.1em; }
h6 {             font-size: 1.1em; }
p {              font-size: 1.1em; }
.xs, time {      font-size: 1em; }
span, ol, ul, li, input, button {  font-size: 1em; }
main ul li, 
main ol li {     font-size: 1.1em; }
} @media only screen and (min-width: 1260px ) {
h1 {             font-size: 1.5em; }
h2 {             font-size: 1.4em; }
h2.h2 {  }
h3 {             font-size: 1.3em; }
h3.h3 {  }
} @media only screen and (orientation: landscape) {}


::selection {            color: var(--in08); background: var(--in09); }
::-moz-selection {       color: var(--in08); background: var(--in09); }

mark { padding: 1px 2px; color: var(--in08); background: var(--in09); }

sub, sup { line-height: 0; }


/*-- iconfont
_________________________  */

main [class*="fa-"]:before, main [class*="icon-"]:before {
                               color: var(--in13); text-shadow: 1px 1px 1px var(--in14); 
                               vertical-align: -10%; font-size: 1.8rem; }
/* FontAwesome */
main [class*="fa-"]:before {   margin:0 0.5em 0 0.5em; }
/* fontello */
main [class*="icon-"]:before { margin:0 1em 0 1em; }


/*-- 
_________________________ HTML > CSS;  */

hr {           margin:25px 0 35px 0; border: 1px solid var(--in12);}

[class^="a"] { width:100%; clear:both; }
  .a5 {   height:5px;}  .a10 {  height:10px;}  .a20 {  height:20px;}  .a30 {  height:30px;}  .a40 {  height:40px;} 
 .a50 {  height:50px;}  .a60 {  height:60px;}  .a70 {  height:70px;}  .a80 {  height:80px;}  .a90 {  height:90px;} 
.a100 { height:100px;} .a200 { height:200px;} .a300 { height:300px;} .a400 { height:400px;} .a500 { height:500px;} 
 .a47 {  height:47px;}

/*-- 
_________________________ HTML > CSS;  */

a:link, a:visited {          color: var(--in15); padding: 1px 2px; background: var(--in16); font-size: inherit; text-decoration: underline; border:none; }
a:hover, a:focus, a:active { color: var(--in17); padding: 1px 2px; background: var(--in18); font-size: inherit; text-decoration: none; border:none; }
a::before, a::after {   }

a.lio:any-link{              color: rgb(var(--mc82)); cursor:default; background:none; text-decoration:none; border:none; }


/*-- 
_________________________ HTML > CSS;  */

button, a.btn {              margin: 5px 5px 15px 5px; padding: 5px 20px; width: auto; 
                             font-family: Roboto, sans-serif; font-weight: 400; font-size: 1em;  
                             display: inline-block; cursor: pointer; 
                             text-align:center; text-decoration:none; 
                             color: var(--btn01);
                             border: 1px solid var(--btn02); border-radius: 2px; 
                             background: var(--btn03); }
button:hover, a.btn:hover {  color: var(--btn04);
                             border: 1px solid var(--btn05); 
                             background-color: var(--btn06); }

a.btn.zurueck {      width: 30%; }
a.btn.weiter {       width: 30%; }
a.btn.uebersicht {   width: 30%; }


a.btn::before, a.btn::after { padding: 0 20px 0 10px; vertical-align: -1%; font-size: 1.2em; line-height: 2em; 
                              font-family: 'FontAwesome'; font-weight:normal; color: var(--btn07); }

a.info::after {        content: "\f101\f101"; }
a.download::before {   content: "\f1c1"; }
a.download::after {    content: "\f019"; }
a.maps::before {       content: "\f041"; font-size: 1.5em; }
a.anker::after {       content: "\f078\00A0\00A0\f063"; }
a.tel::after {         content: "\f095"; }
a.mail::after {        content: "\f0e0"; }
a.zurueck::before {    content: "\f104"; }
a.weiter::after {      content: "\f105"; }
a.uebersicht::before { content: "\f104\f104\f104"; }



/*-- 
_________________________ HTML > CSS;  */

main ul {              padding: 10px 0 var(--a-box) 0; margin: 0 10px 0 40px; }
main ul li {           padding: 4px; position: relative; list-style: none; 
                       color: var(--ul-01); }
main ul li:before {    position:absolute; left: -1em; padding: 0 15px 0 0; vertical-align: -15%; 
                       font-family: 'FontAwesome'; font-size: 1.02rem; line-height: 1.6em; font-weight:400; 
                       color: var(--ul-02); content: "\f101"; }

main ol {              padding: 0 0 var(--a-box) 0; margin: 0; }
main ol li {           padding: 15px 15px 15px 30px; margin: 8px; list-style: none; 
                       position: relative; left: -0.5em;
                       color: var(--ul-03); background: var(--ul-04); }
main ol li:before {    color: var(--ul-05); content: " "; }


/*-- sitemap
_________________________  */

ul.sitemap {                   margin: 0 10vh; } 
ul.sitemap li.sitemap {        padding: 15px 0 15px 20px; color: var(--ulsm-01); background: var(--ulsm-02); }
ul.sitemap li.sitemap:before { position:absolute; left: -1em; padding:0; vertical-align: -15%; 
                               font-family: 'FontAwesome'; font-size: 1.2rem; line-height: 1.6em; font-weight:400; 
                               color: var(--ulsm-03); content: "\00A0"; }
ul.sitemap a:link, ul.sitemap a:visited {                       color: var(--ulsm-04); background: var(--ulsm-05); }
ul.sitemap a:hover, ul.sitemap a:focus, ul.sitemap a:active {   color: var(--ulsm-06); background: var(--ulsm-07); }



/*-- impressum, kontakt
_________________________  */


.addi {     margin:0 auto 0 auto; padding: 0 0 20px 0; 
            display: flex; display: -ms-flexbox; flex-wrap: wrap; 
            justify-content: flex-start; -ms-flex-pack : start; align-items : flex-start; -ms-flex-align : start; }

.addi .ad {   width: 100%; display: flex; display: -ms-flexbox; flex-direction: column; } 
.addi table { margin:0; padding:0; }
.addi h2 {    padding: 0; }

.addi [class*="ad-"] { width: auto; margin:0 0 20px 0; padding:0 50px 0 0; }
.addi .ad-2 { padding:0 100px 0 0; }
.addi .ad-4 { padding: 30px 0 0 0; }

.addi [class*="ad-"] { background: var(--addi01); } 

.addi [class*="ad-"] td:nth-child(1) { padding:0 15px 0 0; color: var(--addi02); }
.addi .ad-2 td:nth-child(1), .addi .ad-3 td:nth-child(1) { min-width: 70px; }
.addi .ad-4 td:nth-child(1) { min-width: 180px; vertical-align:text-top; }

.addi a:link { padding-left: 0; }

  @media only screen and (max-width: 440px) {
.addi table tr td:nth-child(2) { overflow: hidden; white-space: nowrap; text-overflow:ellipsis; max-width: 180px; }
} @media only screen and (max-width: 1023px) {
.addi { flex-direction: column; }
} @media only screen and (min-width: 1024px ) {
}


/*-- webdesign
_________________________  */

body#impressum a.webdesign:any-link { background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; }
body#webdesign main a:any-link {      background:none; text-decoration:none; border:none; color: inherit; font-weight:inherit; font-size: inherit; cursor:text; }



/*-- abschluss
_________________________ HTML > CSS;  */

footer { margin:0; padding:0; position:relative; background: var(--f01); }
footer hr {   width: 70%; margin:10px auto; border: 1px solid var(--ci02); }
 @media only screen and (max-width: 767px) {
footer hr {   width: 100%; }
}


#abschluss {        display: none; }

#abschluss .elem { width: 100%; display: flex; flex-direction: column; } /* was hier drin liegt column, der rest wrap */

[class*="elem-"] { margin:0 0 10px 0; padding:0 70px 0 0; }

#abschluss table { margin:0; padding:0; }

#abschluss p, 
#abschluss td {    color: var(--abs02); vertical-align:top; }
#abschluss a {     color: var(--abs03); text-decoration: none; background: none; }
#abschluss a:hover, #abschluss a:focus, #abschluss a:active { text-decoration: none; background: var(--abs04); }

[class*="elem-"] td:nth-child(1) { padding:0 15px 0 0; color: var(--abs05) !important; }
.elem-2 td:nth-child(1) { display: none; }
.elem-3 td:nth-child(1) { min-width: 70px; }


 @media only screen and (max-width: 599px) {
#abschluss { flex-direction: column; }
.elem-3 td { padding-bottom: 20px; }
.elem-3 td:nth-child(2) { overflow: hidden; white-space: wrap; padding-bottom: 15px; }
} @media only screen and (min-width: 600px ) {
} @media only screen and (max-width: 767px) {
#abschluss {   width: 100%; padding: 2em 15px 2em 15px; }
} @media only screen and (min-width: 768px) {
#abschluss {   width: 100%; padding: 2em 30px 2em 20px; }
} @media only screen and (min-width: 980px ) {
#abschluss {   width: 70%; padding: 2em 30px 2em 20px; }
} @media only screen and (min-width: 1260px ) {}
@media only screen and (orientation: landscape) {}


/* hoch */

#hoch {   margin:0 auto 0 auto; padding: 0; text-align:right; scroll-behavior: smooth; 
          position: absolute; right: 5vw; bottom: 70px; z-index:1; }

#hoch a{          margin:0; padding: 0 10px; border-radius: 0; text-align: center;
                            color: var(--up01); font-size: 2rem; background: var(--up02); }
#hoch a:hover, #hoch a:focus, #hoch a:active {
                            color: var(--up03); font-size: 2rem; background: var(--up04); }

#hoch span.fa.fa-angle-up { margin: 0; padding:0; text-shadow:none; border-radius: 4px; 
                            background-color: none; }

  @media only screen and (max-width: 599px) {
#hoch {   right: 5vw; } 
} @media only screen and (min-width: 980px ) { 
#hoch {   right: 10vw; } 
}

/*-- related links
_________________________  */

# {               margin:0 auto 0 auto; min-height: 50px; background-color: var(--e01); overflow:auto; 
                       display: flex; display: -ms-flexbox; justify-content : space-between; -ms-flex-pack : justify; align-items : center; -ms-flex-align : center; }

# .logo {    margin: 0.7rem 1rem 0.5rem 0; padding: 0; width: 9vh; opacity: 0.4; }

# .related {      margin: 0; padding: 1.3em 0 0 0; color: var(--e02); font-size:0.7rem; text-align:left; }
# .related span { margin: 0; padding:0 0.5rem; color: var(--e02); font-size:0.8rem;}

# a, # a:link, # a:active, # a:hover, # a:focus, # a:visited { 
                       color: rgb(var(--e02)); font-size:0.7rem; text-decoration:none; background:none; border:none; }

  @media screen and (max-width: 479px) {
} @media only screen and (max-width: 599px) {
} @media only screen and (min-width: 600px ) {
} @media only screen and (max-width: 767px) {
# {          flex-direction:column; }
# {          width: 100%; padding: 0 var(--a01); }
# .related { text-align:center; padding:0 0 0.7rem 0; }
} @media only screen and (min-width: 768px) {
# {          width: 100%; padding: 0 var(--a01); }
} @media only screen and (min-width: 980px ) {
# {          width: 70%; padding: 0 var(--a01); }
} @media only screen and (min-width: 1260px ) {}
@media only screen and (orientation: landscape) {}