/* --------------------------- *\
  NAVIGATION
\* --------------------------- */


/* --------------------------- *\
   INFOSTREIFEN
\* --------------------------- */

#infostreifen {
  background:rgb(251,251,251);
    background:rgb(20,55,60);
}

#infostreifen .infostreifen-inhalt {
  line-height:1.2;
  text-align:center;
  padding:0.4em 1.5em 0.5em 1.5em;
  max-width:1048px;
  margin:0 auto;
}

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

  #infostreifen .infostreifen-inhalt {
    padding:0.4em 0.9em 0.5em 0.9em;
  }
}

#infostreifen .infostreifen-text {
  font-size:16px;
  font-weight:normal;
  letter-spacing:0.015em;
  color:#222;
}

#infostreifen a.infostreifen-link-button {
  position:relative;
  z-index:2;
  margin-left:8px;
}


#infostreifen a.infostreifen-link-button {
  display:inline-block;
  font-size:13px;
  font-weight:500;
  line-height:1;
  border:solid 2px rgb(22,228,188);
  border-radius:2em;
  padding:4px 8px;
  color:rgb(22,228,188);
  opacity:0.85;
  white-space:nowrap;
}

#infostreifen a.infostreifen-link-button:hover {
  opacity:1;
  color:rgb(22,228,188);
    text-decoration:none;
}

/* --------------------------- *\
   MAIN
\* --------------------------- */





/* PROMOS ALLGEMEIN */
.promo-link {
  margin:0 0.4em;
}


.mehr-button.icon-rechts {
  padding-right:50px;
}

.mehr-button.icon-links {
  padding-left:50px;
}

.icon-rechts .link-icon {
  margin-left:0.55em; 
}

.icon-links .link-icon {
  margin-right:0.55em;
}

.link-icon {
  position:absolute;
  top:10px;
  display:inline-block;
  width:24px;
  height:24px;
  background-repeat:no-repeat;
  background-size:contain;
    background-position:center center;
}

.icon-links .link-icon {
  left:19px;
}

.instagram-icon {
    background-image:url(/wmw/images/link-icons/social-media/instagram/icon.svg);
}

.instagram-icon-dark {
    background-image:url(/wmw/images/link-icons/social-media/instagram/icon_000.svg);
}

/* LINK BUTTON */
a.mehr-button {
  display:inline-block;
  position:relative;
  min-width:120px;
  font-size:16px;
  color:#fff;
  padding:10px 22px;
  border:solid 2px currentColor;
  border-radius:2em;
  margin-top:1.5em;
  -webkit-transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

a.mehr-button:hover,a.mehr-button-ext:hover  {
  text-decoration:none;
  -webkit-transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}

/* LINK BUTTON FARBIG GEFÜLLT */
a.mehr-button-color {
    display:inline-block;
    position:relative;
    font-size:16px;
    font-weight:500;
    color:#000;
    background-color:#fff;
    padding:10px 22px;
    border:solid 2px #fff;
    border-radius:2em;
    margin-top:2.5em;
    -webkit-transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
    transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}


a.mehr-button-color.button-color-red {   
    background-color:rgb(250,50,70);
    border-color:rgb(250,50,70);   
}

a.mehr-button-color.button-color-green {
    background-color:rgb(22,208,168);
    border-color:rgb(22,208,168);   
}

a.mehr-button-color:hover  {
  text-decoration:none;
  -webkit-transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
  transition:color 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),opacity 0.3s cubic-bezier(0.24, 0.06, 0.56, 1),background 0.3s cubic-bezier(0.24, 0.06, 0.56, 1);
}


/* EXTERNER LINK BUTTON */
a.mehr-button-ext {
  display:inline-block;
  position:relative;
  font-size:16px;
  color:#fff;
  padding:12px 36px 12px 22px;
  border:solid 2px currentColor;
  border-radius:2em;
  margin-top:1.5em;
}

.linkbutton-ext-icon {
  position:absolute;
  height:12px;
  width:2px;
  background:currentColor;
  border-bottom-left-radius:2px;
  right:24px;
  top:19px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}

.linkbutton-ext-icon::before,.linkbutton-ext-icon::after {
  content:'';
  position:absolute;
  width:2px;
  height:7px;
  background-color:currentColor;
}

.linkbutton-ext-icon::before {
  top:-2.49px;
  left:2px;
  border-top-left-radius:2px;
  -webkit-transform:rotate(135deg);
  transform:rotate(135deg);
}

.linkbutton-ext-icon::after {
  bottom:7.49px;
  left:-2px;
  border-bottom-right-radius:2px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}



/* HEROPROMOS */
.heropromo-inhalt {
  padding:5em 1.5em; 
}

@supports (padding:max(0px)) {
  .heropromo-inhalt {
    padding-left:max(1.5em,env(safe-area-inset-left));
    padding-right:max(1.5em,env(safe-area-inset-right));
  }
}

@media only screen and (max-width:728px) {
  
  .heropromo-inhalt {
    padding:5em 1.3em;
  }
  
    @supports (padding:max(0px)) {
    .heropromo-inhalt {
      padding-left:max(1.3em,env(safe-area-inset-left));
      padding-right:max(1.3em,env(safe-area-inset-right));
    }
  }
}

.section-home-werkstatt.heropromo-header .heropromo-inhalt {
  padding-top:0;
}

.heropromo-text {
  margin:0 auto;
  padding-top:2em;
  max-width:464px;
  text-align:center;
}

@media only screen and (max-width:728px) {
  .heropromo-text {
    max-width:424px;
  }
}



/* HEROPROMO-SPALTEN 2 */

.heropromo-spalten-container {
    display:flex;
  align-items:flex-start;
  justify-content:space-around;
    max-width: 1146px;
    margin:0 auto;
}

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

.heropromo-spalten-container {
     display:flex;
     flex-flow:column;
     justify-content:flex-start;
    align-items:center;
  }
}

.section-home-tuning .section-inhalt,.section-home-motorradservice .section-inhalt {
    padding-top:2.5em;
}

@media only screen and (min-width:729px) and (max-width:1068px) {
  
.section-home-tuning .section-inhalt,.section-home-motorradservice .section-inhalt {
    max-width:364px;
}
}


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

.section-home-tuning .section-inhalt {
    padding-top:0;
  }
}





/* HEROPROMOS SPALTEN */
.align-center {
  align-items:center;
}

.spalte-heropromo-text {
  max-width:424px;
  text-align: center;
}

.text-rechts {
  padding-left:2.5em;
}

.text-links {
  padding-right:2.5em;
}

@media only screen and (max-width:728px) {
  .text-rechts,text-links {
    padding-left:0;
    padding-right:0;
  }
}


/* HEROPROMO IMAGES */
.heropromo-image {
  width:340px;
  height:340px;
  margin:0 auto;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center center;
  border-radius:0.8em;
}

@media only screen and (min-width:729px) and (max-width:1068px) {
  .heropromo-image {
    height:320px;
    width:320px;
  }
}

@media only screen and (max-width:728px) {
  .heropromo-image {
    height:295px;
    width:295px;
  }
}

@media only screen and (max-width:359px) {
  .heropromo-image {
    height:260px;
    width:260px;
  }
}

.logo {
  background-image:url(/home/styles/images/logo/wilhelm/wilhelm_logo.svg);
  background-position:bottom;
}

.logo-motorradservice {
  background-image:url(/home/styles/images/logo/motorradservice/wilhelm_motorrad_26.svg);
}

.image-hu {
  background-image:url(/home/styles/images/promos/hu/image.jpg);
}

.image-sitzheizung {
  background-image:url(/home/styles/images/promos/sitzheizung/image.jpg);
}

.image-getriebesplg {
  background-image:url(/home/styles/images/promos/getriebeoelservice/image.jpg);
}

.image-reifenservice {
  background-image:url(/home/styles/images/promos/reifenservice/image.jpg);
}

.image-inspektion {
  background-image:url(/home/styles/images/promos/inspektion/image.jpg);
}

.image-leistungen {
  background-image:url(/home/styles/images/promos/leistungen/image.png);
}

.image-tuning {
  background-image:url(/home/styles/images/logo/tuning/wilhelm_tuning.svg);
}

.image-softwaretuning {
  background-image: url(/home/styles/images/promos/softwareoptimierung/image.jpg)
}


/* ANPASSUNGEN */
.section-home-werkstatt {
  background-image:radial-gradient(rgb(0,22,18)10%,#0e0e0e 75%);
}

.section-home-hu a.mehr-button,.section-home-reifenservice a.mehr-button,.section-home-sitzheizung a.mehr-button {
    margin-top:0.5em;
}


@media only screen and (max-width:728px) {
  
    .section-home-hu .spalte-heropromo-text,.section-home-sitzheizung .spalte-heropromo-text,.section-home-reifenservice .spalte-heropromo-text {
        order: 1;
        padding-top:0;
    } 
    
    .section-home-hu .spalte-heropromo-image,.section-home-sitzheizung .spalte-heropromo-image,.section-home-reifenservice .spalte-heropromo-image {
        order: 2;
        padding-top:2.5em;
    } 
    


}



.titel-icon {
    display:block; 
    margin:0 auto;
    height:45px;
    width:45px;
    background-repeat:no-repeat;
    background-size:contain;
    background-position:center center;
    margin-bottom:0.75em;
}

.icon-hu {
    background-image:url(/leistungen/styles/images/hu/icon.svg); 
}

.icon-inspektion {
    background-image:url(/leistungen/styles/images/inspektion/icon.svg);
}

.icon-reifenservice {
  background-image:url(/leistungen/styles/images/reifenservice/icon.svg)
}

.icon-sitzheizung {
  background-image:url(/leistungen/styles/images/sitzheizung/icon.svg)
}

.icon-getriebeoelservice {
   background-image:url(/leistungen/styles/images/getriebeoelservice/icon.svg)
}

.icon-software {
  background-image: url(/tuning/styles/images/software/icon-hover.svg)
}
/* --------------------------- *\
   FOOTER
\* --------------------------- */