/*       Florian Weber
         Version 1.0
         Änderungsdatum: 20250131
*/


@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans&display=swap');


html {scroll-behavior: smooth;}
body {padding: 0; margin: 0; width: 100%; background-image: url(bilder/berlin-g4dccd1720_1920.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat center; }

/* NAVIGATION */

#navigation {background: #FFFFFF; position: fixed; width: 100%; top: 0; z-index: 3;}
.navi {color: #FFFFFF; list-style: none; justify-content: center;}
nav { margin: auto; font-family: 'Raleway', sans-serif; font-weight: bold;}
nav a {text-decoration: none; color: #003863;}
.nav {font-size: 1.4em; padding: 0em 2.5em 0em 2em}
.nav_ {font-size: 1.4em; padding: 0em 2.5em 0em 2em; text-decoration: underline;}
.hr_nav {width: 60em;}

.nav:hover {color: #B0C4DE; transition: .4s; text-decoration: underline;}

#arrow_up {position: fixed; bottom: 4.1em; right: .5em; font-size: 150%; color: #003863; background: none; padding: 0.2em; border-color: #003863; border-style: solid; border-width: .1em; border-radius: 10%; opacity: 0%; transition: opacity 1s; z-index: 3;}



#hamburg {display: none; z-index: 3;}


@media (max-width: 65em) {

  .navigation {position: absolute;}

  label.hamburg {display: block; background: #FFFFFF; width: 75px; height: 50px; position: relative; margin-left: auto; margin-right: 0; border-radius: 4px;}
  input#hamburg {display: none}
  .line {position: absolute; left:10px; height: 4px; width: 55px; background: #003863; border-radius: 2px; display: block; transition: 0.5s; transform-origin: center;}
  .line:nth-child(1) { top: 12px; }
  .line:nth-child(2) { top: 24px; }
  .line:nth-child(3) { top: 36px; }
  #hamburg:checked + .hamburg .line:nth-child(1){transform: translateY(12px) rotate(-45deg);}
  #hamburg:checked + .hamburg .line:nth-child(2){opacity:0;}
  #hamburg:checked + .hamburg .line:nth-child(3){transform: translateY(-12px) rotate(45deg);}

  nav {display: none; flex-direction: row; font-size: 1.7em;}
  #hamburg:checked ~ nav {display: block; position: relative; text-align: center;}

  nav li {padding: .3em; margin: 0;}  

}


@media (min-width: 65em) {

  .navi {display: flex; flex-direction: row;}

}


@media (max-width: 115em) {

  #logo_div {display: block; opacity: 1;}
  #logo_nav img {width: auto; height: 3em; position: absolute; top: .4em; margin-left: 1em; opacity: 1;}
  #logo_nav {opacity: 1; transition: opacity .5s;}

}

@media (min-width: 115em) {

  #logo_div {text-align: left; transition: opacity .5s; opacity: 1;}
  #logo_nav img {width: auto; height: 6em; position: absolute; margin-top: -3.5em; margin-left: 17em;}
  .navi { margin-top: 4em;}

}





/* INHALT */

@media (min-width: 65em) {

  .inhalt {max-width: 80em; padding: 2em 4em 2em 4em; margin: auto; margin-top: 10em;}

}


@media (max-width: 65em) {

  .inhalt {max-width: 100%; padding: 0.5em; margin-top: 2em;}
  
}


.inhalt {color: #003863; background: white; font-family: 'Raleway', sans-serif; text-align: justify; line-height: 1.5;}

h1 {text-align: center; font-family: "Raleway", sans-serif; font-size: 3em; margin-bottom: 0; margin-top: 1.1em;}
h2 {text-align: center; font-size: 2.5em; font-weight: bold;}
h3 {font-size: 2em; text-align: center;}
h4 {font-size: 1.2em; text-align: left;}
h5 {font-weight: bold; font-size: 1em; padding: 0; margin: 0;}
h6 {font-size: 1em; font-weight: bold; padding: 0; margin: 0;}
span {font-weight: bold;}

.produkte-box {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.box {display: block; margin: 2em auto 2em auto; width: 20em; height: 30em; justify-content: center; padding: 0em; border-radius: 1em;}
.box p {font-size: 1.5em; z-index: 5;}
.boxa {text-decoration: none; color: white; margin: 1em;}
.box:hover {opacity: .5; transition: .4s;}
.box_bootsausruestung_bild {width: 20em; height: 30em; border-radius: 1em; object-position: 50% 50%;}
.bildtext {color: #003863; font-weight: bold; margin-top: -3em; text-align: center;}


.button_ebay {width: 100%; text-align: center;}
#button_ebay {width: 50%; color: #003863; text-align: center; padding: 1em; text-decoration: none; border-style: groove; border-color: #003863; border-radius: 2em; font-weight: bold; font-size: 1.2em; margin-left: auto; margin-right: auto;}
#button_ebay:hover {opacity: .5; transition: .4s;}


.mailto, .tel, .web {color: #003863; text-decoration: underline;}
.mailto:hover, .tel:hover, .web:hover {color: #B0C4DE; transition: .4s;}
.link, .linka {color: #003863; text-decoration: underline; font-family: 'Raleway', sans-serif; font-size: 1em; border-color: #003863;}
.link:hover {color: #B0C4DE; transition: .4s; text-decoration: underline;}
.linkEx {color: #003863; text-decoration: none; font-family: 'Raleway', sans-serif; font-size: 1em; padding: 0em 0em 0em 0em; border-color: #003863;}
.linkEx:hover {color: #B0C4DE; transition: .4s; text-decoration: underline;}


/* BILDER */

.contain-bild {object-fit: contain;}
.cover-bild {object-fit: cover;}

/* PRODUKTLISTE */

.produktliste {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.produkt {text-decoration: none; color: #003863; width: 18em; overflow: hidden; margin: 1em; justify-content: left;}
.produktliste_bild {width: 18em; height: 18em;}
.links {justify-content: left;}

.produkt:hover {opacity: .5; transition: .4s;}


/* PRODUKTDETAILS */

.produktdetails {display: flex; flex-direction: row; flex-wrap: wrap; margin-top: 3em;}
.produktdetails_bild_container {height: 30em; width: 40em; overflow: hidden; margin: 0em; border-radius: 1em;}
.produktdetails_bild {height: 30em; width: 100%; object-position: 50% 50%;}


.produktdetails_text {margin: 3em; max-width: 30em; text-align: left;}

.button_ebaylink {width: 10em; color: #003863; text-align: center; padding: .5em; text-decoration: none; border-style: groove; border-color: #003863; border-radius: 2em; font-weight: bold; font-size: 1em; margin: 1em;}
.button_ebaylink:hover {opacity: .5; transition: .4s;}

.mySlides {display: none;}

.prev, .next {cursor: pointer; position: absolute; z-index: 1; font-size: 1em; padding: .7em; color: #003863; font-weight: bold; transition: .4s; border-radius: 0 .5em .5em 0;}
.next {margin-left: 38em; border-radius: .5em 0 0 .5em;}
.prev:hover, .next:hover {background-color: whitesmoke;}

.dot {display: inline-block; cursor: pointer; width: 1em; height: 1em; background-color: whitesmoke; border-radius: 50%; transition: background-color .4s ease;}
.active, .dot:hover {background-color: #003863;}
.slider_dots {position: absolute; text-align: center; width: 40em;}

@media (min-width: 65em) {
  .prev, .next {top: 28em;}
  .slider_dots {top: 43em;}
}
@media (max-width: 65em) {
  .prev, .next {top: 19em;}
  .slider_dots {top: 35em;}
}

.fade {animation-name: fade; animation-duration: 1.5s;}

@keyframes fade {
  0% {opacity: 0.5}   
  100% {opacity: 1}
}


/* FUSSZEILE */

#fusszeile {background: #003863; color: #FFFFFF; font-family: "Raleway", sans-serif; width: 100%; opacity: .9; padding: 1em 0em 1em 0em; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;}
.fusszeile-box {padding: 1em; margin: 1em; width: 12em; line-height: 1.5;}
.link-fuss, .tel-fuss, .mailto-fuss {color: #FFFFFF; text-decoration: none;}
.link-fuss:hover, .tel-fuss:hover, .mailto-fuss:hover {color: #B0C4DE; text-decoration: underline; transition: .4s;}