/*
width: min(50vw, 200px); 
Unter 200px = 50 vw


Innerhalb Flex im Item nochmals flex geben. 
align-items flex end justify content flex start. 


justify-content: space-between
Für Footer

flex-basis:min-content;
Damit sagt man, dass das Element immer mindestens so bereit ist, wie der Content. 

Footer: Flex in Flex


Schrift:
Minimum und Maximum der Schrift definieren. 


Schrift, spacing immer mit em 
em relativ zur Schriftgrösse. 
rem relativ zum root element


Eric Facon
==========
Felx: align-items: stretch
Um das Bild ein Div. img auf 100%. 
Bild auf conent setzen
Neu: aspect-ratio: 1/4;

Schrift berechnen clamp
https://utopia.fyi/type/calculator

CSS lernen
https://every-layout.dev


*/





/* Colors */
:root{
  --blue: #0058FF;	
  --black: #000000;
  --white: #FFFFFF;
  --grey: #D1D1D1;
  --red: #FF0766;
  --swiper-theme-color: red; 
  
  --width: 1115px;
  
  /* Font Size */
  --fsone: clamp(1.13rem, calc(0.88rem + 1.22vw), 1.75rem); /*clamp(1.31rem, calc(0.97rem + 1.71vw), 2.19rem);*/
  --fstwo: clamp(1.00rem, calc(0.78rem + 1.10vw), 1.56rem); /* 16 - 25 */
  --fsthree: clamp(1.50rem, calc(1.06rem + 2.20vw), 2.63rem); /*24 - 45*/
  --fsfour: clamp(1.00rem, calc(0.85rem + 0.73vw), 1.38rem);
}

/* Reset all */
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: 'Work Sans', sans-serif;
  font-size: 100%;
  line-height: 120%;
  margin:0;
  padding:0;
  width:100%;
}

/* Helpers */ 
.ratio:after{
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.row{
  clear:both;
}

.left, .right{
  float:left;
  width:50%;
  margin:20px;
}

strong{
  font-family: 'gilmerBold', sans-serif;
  font-weight:normal; 
}

.clear{
  clear:both;
}

a:link, a:visited{
  color:var(--black);
  text-decoration:underline;
}

a:hover, a:active{
  color: var(--white);
  background-color: var(--black);
  text-decoration:underline;
}


/* General: Holder H1, H2, p */
.container{
  position:relative; 
  text-align:center; 
  font-size: 100%;
} 
.container-inner{
  position:relative; 
  padding-top:80px;
  padding-top:clamp(1.56rem, calc(0.22rem + 6.71vw), 5.00rem);
  padding-left:25px;
  padding-right:25px;
  padding-bottom:50px;
  padding-bottom: clamp(0.94rem, calc(0.08rem + 4.27vw), 3.13rem); /*btn*/
  margin:0 auto; 
  max-width:var(--width);
}
.button-holder{
  padding:25px 0 75px 0; 
  padding-top:50px;
  padding-bottom:100px;
}
.button{
  border: 3px solid black;
  padding: 10px 35px;
  font-weight: bold;
  background-color: white;	
  color:black;	
  font-size: var(--fsone);
  padding: 25px 40px;
  text-decoration:none !important; 
}
.button:hover{
  font-weight: bold;
  background-color: black;
  color:white; 		
}
h1{
  font-size: clamp(1.31rem, calc(0.85rem + 2.32vw), 2.50rem); /* 21 - 40 */
}
h1, h2, h3{
  line-height:125%;
}
h2{
  font-size: var(--fsone);
}
p{
  line-height:120%;
  font-size: var(--fstwo);
}
.website{
  position:absolute !important; 
  top:2400px; 
  left:-4404px;
  overflow:hidden; 
  height:0px;
}


/* Swiper 
   https://swiperjs.com/demos 
   https://codepen.io/rogerkuik/pen/LYxKzZa
*/
.swiper{
  padding-bottom:50px !important;
}
.swiper-slide{
  background-color:var(--white);
  min-height:430px; /* Entscheidend Höhe Slider */
  /* height: auto; */
}
.slide-inner{
  padding:15px;
}
.slide-inner img{
  width:100%;
  margin-bottom: -4px;
}
.slide-inner a:hover{
  color: var(--black);
  text-decoration:none; 
}
.slide-inner a{
  text-decoration:none; 
}
.slide-inner a:hover img{
  text-decoration:none; 
  background-color:transparent; 
}


/* Home */
.logo-container{
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  justify-content:center;
  align-items:center;
  align-content:center;
  position:relative;
}
.logo-item{
  flex-basis:50%;
  height:15.5vw;
  position:relative;
  /*font-size:60px;*/
  /* @link https://utopia.fyi/type/calculator?c=320,25,1.2,1140,60,1.25,0,0,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
  font-size: clamp(1.56rem, calc(0.71rem + 4.27vw), 3.75rem);
  display:flex;
  padding: 50px;
}
.item-faze{
  background-color: var(--blue); 
  align-items: flex-end;
  justify-content: flex-end; 
}
.item-audio{
  background-color: var(--black);
  align-items: flex-end;
}
.item-network{
  background-color: var(--white);
  align-items: flex-start;
  justify-content: flex-end; 
}
.item-music{
  background-color: var(--grey);
  align-items: flex-start;
}
.item-faze img{
  width: 200px;
  width: clamp(6.25rem, calc(3.81rem + 12.20vw), 12.50rem);
  position: relative;
  top: 20px;
}
.logo-item a{
  color:#ffffff;
}
.item-audio a{
  position:relative; 
  /*top:-17px;*/
  top: clamp(-1.06rem, calc(0.94rem + -2.00vw), 0.31rem);
}
.audio-h .button-holder{
  
}
.audio-h .button:hover{
  background-color: var(--white);
  color: var(--black);
}
.music-h .button:hover{
  border-color: var(--white);
  background-color: var(--black);
  color: var(--white);
}

.item-network a{
  color:#000000;
}
.item-faze:hover, .item-faze:focus{ 
  background-color: var(--white);
}
.item-faze:hover a, .item-faze:focus a{
  color: var(--black);  
}
.item-audio:hover, .item-audio:focus{
  background-color: var(--white);
}
.item-audio:hover a, .item-audio:focus diva{
  color: var(--black);  
}
.item-network:hover, .item-network:focus{
  background-color: var(--black);
}
.item-network:hover a, .item-network:focus a{
  color: var(--white);  
}
.item-music:hover, .item-music:focus{
  background-color: var(--white);
}
.item-music:hover a, .item-music:focus a{
  color: var(--black);  
}
.item-faze:hover:not(a), .item-audio:hover:not(a), .item-music:hover:not(a), .item-network:hover:not(a){
  transition: background-color 100ms linear;	
}
.item-faze a:hover, .item-audio a:hover, .item-music a:hover, .item-network a:hover{
  background-color: transparent; 
}
.logo-item a{
  text-decoration:none; 
}





/* Aktuelle Potcasts Swiper */
.audio-h{
  background-color:var(--black);
  color: var(--white);
}
.audio-h h1{
  padding-bottom:40px;
}
.audio-h h2{
  font-size:22px;
  font-size: var(--fsfour);
  padding-bottom:3px;
  margin-bottom:0;
}
.audio-h p{
  font-size: 22px;
  font-size: var(--fsfour);
  line-height: 120%;
  margin:0;
}
.audio-h .swiper-button-next, .audio-h .swiper-button-prev {
  color: var(--black);
  top: 45%;
}
.audio-h .swiper-pagination-bullet {
  background: var(--white); 
}
.audio-h .swiper-pagination-bullet-active{
  background: var(--white);
}
.audio-h .button-holder{
  margin-top:30px;
  margin-top: clamp(0.63rem, calc(0.14rem + 2.44vw), 1.88rem); /*btn*/
  margin-bottom:0px;
  font-size: var(--fstwo);
}
.audio-h .button{
  border-color: var(--white);
  background-color: var(--black);
  color: var(--white);
}



/* faze teaser */
.faze-teaser{
  background-color:var(--blue);
  color:var(--white);
}
.faze-teaser img{
  padding-bottom:40px;
  max-width:200px;
  width:25vw;
}
.faze-teaser p{
  font-size: var(--fsthree)	;
  max-width:800px;
  line-height:130%;
  margin: 0 auto; 
}
.faze-teaser a{
  padding: 50px 0 75px 0; 
  display:block;
  color: var(--white);
  font-size: var(--fsone);
  font-weight:bold;
  text-decoration:underline;
  background-color:transparent; style="position:absolute; top:2400px; left:-4404px;
}

/* music */
.music-h{
  text-align:center; 
  background-color:var(--grey);
}
.music-h .button-holder{
	/*
  padding-top:100px;
  padding-top:clamp(0.94rem, calc(-1.14rem + 10.37vw), 6.25rem); /*btn*/
  */
  
}
.music-h h1{
  padding-bottom:40px;
}
.music-h h2{
  font-size:22px;
  font-size: var(--fsfour);
  padding-bottom:3px;
  margin-bottom:0;
}
.music-h p{
  font-size: 22px;
  font-size: var(--fsfour);
  line-height: 120%;
  margin:0;
}
.music-h .swiper-button-next, .music-h .swiper-button-prev {
  color: var(--black);
  top: 45%;
}
.music-h .swiper-pagination-bullet {
  background: var(--black); 
}
.music-h .swiper-pagination-bullet-active{
  background: var(--black);
}
.music-h .button-holder{
  margin-top:30px;
  margin-top: clamp(0.63rem, calc(0.14rem + 2.44vw), 1.88rem); /*btn*/
  margin-bottom:0px;
  font-size: var(--fstwo);
}
.music-h .button{
  border-color: var(--black);
  background-color: var(--grey);
  color: var(--black);
  padding: 20px 80px;
}


/* Contact form */
.contact-h{
  
}
.contact-h .container-inner{
 display:flex;
 gap:5%;
 flex-wrap:wrap;
 flex-direction:row;
 margin-top:50px;
}
.contact-left{
  text-align:left;
  width:25%;
  font-size: var(--fsone);
}
.contact-left>p{
  margin-top:8px;
}
.contact-right{
   width:70%;
}
.contactform label{
  display:block;
  font-weight:bold;
  padding:15px 0;
  font-size: var(--fsone);
}
.contactform input[type="text"], .contactform textarea{
  border:none;
  border-bottom: 3px solid var(--grey);
  width:100%;
  margin-bottom:25px;
  font-size: var(--fsone);
}
.field-container{
  display:flex;
  gap:10%;
  flex-wrap:wrap;
  flex-direction:row;
  position:relative;
}
.field-item{
  flex-basis:45%;
  position:relative;
  text-align:left;
}
.field-item-2{
  flex-basis:100%;
}
.contactform .button{
  padding:10px 60px;
  margin-top: 30px;
  margin-bottom:100px;
  margin-bottom: clamp(0.94rem, calc(-1.14rem + 10.37vw), 6.25rem); /*btn*/
  -webkit-appearance: none;
  -webkit-border-radius:0; 
  border-radius:0;
}

/* Detail */
.navigation{
  margin-top:50px; 
  text-align:left;
  padding-bottom:75px;
  padding-bottom: clamp(1.56rem, calc(0.34rem + 6.10vw), 4.69rem);
}
.navigation img{
  width: clamp(6.25rem, calc(3.81rem + 12.20vw), 12.50rem); /* red! */
}
.navigation a{
  font-size: var(--fsone);
}
.navigation a{
  text-decoration: none; 
  padding-right:2vw;
}
.navigation a.active{
  text-decoration: underline; 
}
.navigation a:hover, .navigation:focus{
  text-decoration:underline; 
  color: var(--black);
  background-color:transparent; 
}
.navigation a img{
  position:relative; 
  top:25px;
}

/* Info */
.info-container-1{
  background-color: var(--blue);
  color: var(--white);
  font-size: var(--fsone);
  text-align:left;
}
.info-container-1 a{
  color: var(--white);
}
.info-container-1 a:hover{
  color: var(--white);
}
.info-container-2{
  background-color: var(--white);
}
.info-container-2 .container-inner{
  text-align:left;
    position: static; 
  
}
.info-right{
 position: absolute;
 right: 0;
 top: 0;
 width: 40%;
 height: 100%;
}
.info-left{
  max-width:600px;
}
.info-right img{
  object-fit: cover;
  aspect-ratio: 3 / 1;
  width:100%;
  height:100%;
}
.info-container-3{
  background-color: var(--blue);
  color: var(--white);
  padding-bottom:60px;
}
.info-container-3 h3{
  font-weight:normal; 
  font-size: var(--fsthree);
}
.info-image{
  margin-bottom:-5px;
}
.info-image img{
  width:100%;
}

/* Network */
.network-container-1{
  background-color: var(--white);
  color: var(--black);
  /* font-size:200%; /* do clamp! */
  text-align:left;
}
.network-container-1 .navigation{
  color: var(--black);
}
.network-container-2{
  text-align:left;
}
.network-container-2 .container-inner{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
  padding-top:1px;
}
.network-container-2 p{
  font-size:18px;
}
.network-item{
  width:30%;
}
.network-container-3{
  text-align:left;
}
.network-container-3 .container-inner{
  padding-top:1px;
}
.network-container-3 .contactform{
  padding-top:50px;
}
.network-image{
  width:100%;
}
.network-image img{
  width:100%;
  margin-bottom:-5px;
}


/* Audio */
.audio-container-1{
  background-color: var(--black);
  color: var(--white);
  font-size: var(--fsone);
  text-align:left;
}
.audio-container-1 p{
  max-width:900px;
}
.audio-container-1 .navigation a{
  color: var(--white);
}
.audio-container-2{
  background-color: var(--black);
  color: var(--white);
  text-align:left;
}
.audio-container-2 .container-inner{
  padding-top:1px;
}
.audio-container-3{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.aduio-item-left{
  width:40%;
}
.aduio-item-left img{
  width: calc(100% - 3vw);
}
.aduio-item-right{
  width:60%;
}
.aduio-item-right .button-holder{
  padding-bottom:100px;
}
.aduio-item-right .button{
  font-size: var(--fstwo);
}
.aduio-item-right h3{
  font-size: var(--fsone);
  margin-top:0;
}
.aduio-item-right p{
  font-size: var(--fstwoo);
}
.aduio-item-right .button{
  background-color:var(--black);
  color:var(--white);
  border-color: var(--white);
}
.aduio-item-right .button:hover{
  background-color:var(--white);
  color:var(--black);
  border-color: var(--black);
}
.button-holder{
  padding-top:50px;
  padding-bottom:100px;
  padding-bottom: clamp(1.56rem, calc(-0.27rem + 9.15vw), 6.25rem);
}

/* Music */
.music-container-1{
  background-color: var(--grey);
  color: var(--black);
  /* font-size:200%; /* do clamp! */
  text-align:left;
}
.music-container-1 .navigation{
  color: var(--black);
}
.music-container-2{
  background-color: var(--grey);
  color: var(--black);
}
.music-container-2 .container-inner{
  display:flex;
  flex-wrap: wrap;
  justify-content:space-between;
}
.music-item{
  width:205px;
  width: 19%;
  text-align:left;
  padding-bottom:100px;
  position:relative; 
}
.music-item img{
  width:100%;
}
.music-item h3, .productnr{
  font-size:22px;
  font-size: var(--fsfour);
  font-weight:bold;
  margin-top:0;
  padding-top:0;
}
.productnr{
  margin-bottom:0;
  padding-bottom:0;
  padding-top:22px;
  font-size: var(--fsfour);
}
.music-item p{
  font-size:16px;
}
.music-link{
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.music-item .bottom {
  /*
  transform: translateY(-100%);
  display: inline-block; */
  position:absolute; 
  bottom:25px;
  margin-bottom:25px;
}
.musiclink{
  width:100%;
  border:3px solid var(--black);
  padding:10px 35px;
  font-size:var(--fsone);
  font-weight:bold;
  text-decoration:none !important;
}
.musiclink:hover{
  background-color: var(--black);
  color: var(--white);
}

/* basket shop */
.shop-items li{
  max-width:650px;
  padding: 0 0px 15px 0; 
}
.basket-container .container-inner{
  padding-top:1px;
}

/* Image Slides */
.network-image img{
  transition: all .5s ease-in-out;
}

/* Footer */
.footer {
  text-align:center;
  background-color:var(--grey);	
}
.footer .container-inner{
  display:flex;
  gap:10%;
  flex-wrap:wrap;
  flex-direction:row;
  flex-basis:50%;
  position:relative;
}
.footer-left{
}
.footer-right{
  min-width:530px;
  text-align:right;
}
.footer-right a{
  padding: 0 10px;
  text-decoration:none; 
  position: relative;
  top: -30px;
}
.footer-right a:hover, .footer-right a:focus{
  background-color:transparent; 
}
.footer-right img{
  width:40px;
}



/* Responsive */
@media only screen and (max-width: 1500px) {
  body::before,
  body::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    border-color: transparent;
    border-style: solid;
  }

  body::before {
    border-width: 1.5em;
  }

  body::after {
    border-radius: 0.4em;
    border-width: 1.35em;
    border-right-color: black;
    border-top-color: black;
  }
  .footer-right{
    min-width:35vw;
  }
}
@media only screen and (max-width: 1050px) {
  body::after {
    border-right-color: red;
    border-top-color: red;
  }
  .contact-left{
    width:100%;
    padding-bottom:100px;
  }
  .footer-right{
    min-width:100%;
  }
  .info-left {
    max-width: 50vw;
  }
  .music-item{
    width: 23.5%;
  }
}

@media only screen and (max-width: 800px) {
   body::after {
    border-right-color: yellow;
    border-top-color: yellow;
  }
  
  .item-faze img{
    top:28px;
  }
  .navigation a img {
    top: 22px;
  }
  .info-left, .info-right {
    max-width: 100%;
    width:100%;
  }
  .info-right {
    position:relative;
    height:500px;
  }
  .network-item {
    width: 49%;
    padding-bottom:35px;
  }
  .music-item{
    width: 32%;
  }
}

@media only screen and (max-width: 720px) {
   body::after {
    border-right-color: blue;
    border-top-color: blue;
  }
  .item-network, .item-music{
    padding-top:40px;
  }
  .field-item{
    flex-basis:100%;
  }
  .footer-right{
    text-align:center; 
    padding-top:60px;
  }
  .footer-left{
    text-align:center;
  }
  .navigation a img {
    top: 20px;
  }
  .footer .container-inner {
    justify-content: center;
  }
  .music-item{
    width: 49%;
  }
}

@media only screen and (max-width: 550px) {
  body::after {
    border-right-color: pink;
    border-top-color: pink;
  }
  .logo-item {
    flex-basis: 100%;
    justify-content: center;
  }
  .navigation a:first-child{
    padding-right:0;
  }
  .navigation a img {
    top: -30px;
    display:block;
  }
  .network-item {
    width: 100%;
    padding-bottom:35px;
  }
  .aduio-item-left, .aduio-item-right{
    width:100%;
  }
  .aduio-item-left img{
    width:100%;
    padding-bottom:35px;
  }
  .music-item{
    width: 100%;
  }
  .contact-right {
    width: 100%;
  }
}

@media only screen and (max-width: 440px) {
   body::after {
    border-right-color: green;
    border-top-color: green;
  }
  
  body{
  
  }
  
}

@media only screen and (max-width: 350px) {
	body::after {
     border-right-color: brown;
     border-top-color: brown;
    }

	body{
	
    }
    
}