@import url("../fonts/font.css");
@import url("header.css");
@import url("footer.css");
@import url("hero.css");
@import url("captain-blue.css");
@import url("gewinnspiel.css");
@import url("mega-messe.css");
@import url("slider.css");
@import url("produkte.css");
@import url("pu-primer.css");

/* ROOT-VARIABLEN */
:root {
  --font-base: 'Archivo Narrow', 'Arial Narrow', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --font-secondary: 'Bodoni Moda', 'Didot', 'Georgia', 'Times New Roman', serif;  
  --font-size-base: 18px;
  --container-width: 1500px;
  --color-text: #364456;
  --primary-color: #009ee3;
  --secondary-color: #ff4610;
  --accent-color: #A1DAF8;
  --background-color: #f5f5f5;
}


/* RESET & BOX-SIZING */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

/* STANDARD BODY STYLES */
h1 {
  font-size: 40px;
  margin: 0;
  font-weight: 900;
}
h2 {
  font-size: 30px;
  font-weight: 900;
  margin: 0;
}


.subheadline-container {
  position: relative;
  display: inline-block;
  padding: 20px 40px 20px 50px;
  margin-bottom: 20px;
}
.subheadline-container:before {
  content: "";
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/Pinselstrich_Midnight1_groß.png) no-repeat center center / 100% 100%;
}
.subheadline {
  font-family: var(--font-secondary);
  font-weight: 600;
  font-size: 24px;
  font-style: italic;
  padding-bottom: 30px;
  color: #fff;
  display: inline-block;
  padding: 0 15px;
  position: relative;
  z-index: 2;
}



@media(max-width: 767px){
  h1 {
    font-size: 30px;
  }
  h2 {
    font-size: 22px;
  }
  .subheadline {
    font-size: 18px;
  }
  .subheadline-container {
    padding: 15px 30px 15px 35px;
  }
  :root {
    --font-size-base: 16px;
  }
}

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body a {
  text-decoration: none;
  cursor: pointer;
}

.center {
  text-align: center;
}

.blue{
  color: var(--primary-color);
}

.cta-button {
  border: 2px solid var(--secondary-color);
  overflow: hidden;
  display: inline-block;
  position: relative;
  background-color: var(--secondary-color);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 13px 28px;
  border-radius: 12px;
}
.cta-button span {
  color: #fff;
  z-index: 2;
  position: relative;
  transition: color .5s ease-in-out;
}

.cta-button:hover span {
  color: var(--secondary-color);
}
.cta-button:before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 0;
  height: 100%;
  background-color: #fff;
  transform: skew(35deg);
  z-index: 1;
  transition: width 1s;
}

.cta-button:hover:before {
  width: 200%;
}

.cta-button.inverted {
  border: 2px solid var(--secondary-color);
  background-color: #fff;
}
.cta-button.inverted span {
  color: var(--secondary-color);
}
.cta-button.inverted:hover span {
  color: #fff;
}
.cta-button.inverted:before {
  background-color: var(--secondary-color);
}

@media(max-width: 767px){
  .cta-button {
    padding: 8px 18px;
    font-size: 16px;
  }
}

@media(max-width: 499px){
  .cta-button:not(.product-button) {
    width: 100%;
    text-align: center;
  }
}


/* CONTAINER-UTILITY */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

main{
  padding-top: 97px;
}

@media(max-width: 767px) {
  main{
    padding-top: 60px;
  }

  .container {
    padding: 0 1rem;
  }
  
}

main section:not(#hero) {
  padding: 120px 0;
}

@media (max-width: 767px) {
  main section:not(#hero) {
    padding: 80px 0;
  }
}