@font-face {
  font-family: "Raleway-Light";
  src: url(../fonts/Raleway/Raleway-Light.ttf);
}

@font-face {
  font-family: "Raleway-Bold";
  src: url(../fonts/Raleway/Raleway-Bold.ttf);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --color-font-white: #fff;
  --color-button: #000;  
}
  
body {
  width: 100vw;
  font-family: "Raleway-Light";
}

header {
  height: 15%;
}

header img {
  height: 5em;
}

header nav {
  display: flex;
  justify-content: right;
  gap: 20%;
}

nav {
  text-align: right;
}
  
header, footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(0,0,0,1);
  padding: 1.5em 5em;
}

header a, footer a {
  /* border: 1px solid green; */
  color: var(--color-font-white);
  font-size: 90%;
  text-decoration: none;
}

header a:hover, footer a:hover {
  color: #8fd3f4;
  transform: scale(1.3);
}

footer {
  height: 11%;
  color: var(--color-font-white);
}

footer nav {
  display: flex;
  align-items: flex-end;
  gap: 20%;
  /* border: 1px magenta solid; */
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2.7em 5em;
  text-align: center;
}

.landing-page {
  height: 80vh;
  padding: 5em;
  background-image: url(/assets/img/martin-katler-PVDiZlqVxWQ-unsplash.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

.equipment-page, .kontakt-page, .impressum-page, .datenschutz-page {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background-color: rgba(255,255,255,0.9); */
}

article {
  width: 18em;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 1em;
  background-color: var(--color-button);
  color: var(--color-font-white);
}

article img {
  display: inline-block;
  background-image: linear-gradient(121deg, #84fab0 0%, #8fd3f4 100%);
}

article h3 {
  padding: 1em 0em;
}

article p {
  padding-bottom: 1em;
}

article h4 {
  padding-top: 1em;
}

article a {
  font-size: 90%;
  text-decoration: none;
  color: var(--color-font-white);
  padding-top: 0.5em;
  padding-bottom: 1em;
}

span {
  font-family: "Raleway-Bold";
}

.teamBox {
  display: flex;
  justify-content: space-evenly;
  gap: 7%;
}

.copy {
  width: 40em;
  font-size: 0.7em;
}

h2 {
  font-size: 2.3em;
}

h3 {
  font-size: 1.3em;
}

h4, p, address, a, li, ul {
  font-size: 0.9em;
}

address {
  font-size: 90%;
  text-decoration: none;
  font-style: normal;
}

.anfrage {
  color: var(--color-font-white);
  background-color: var(--color-button);
  margin-top: 1.5em;
  padding: 0.7em 1.5em;
  cursor: pointer;
  text-decoration: none;
}

.anfrage:hover {
  transform: scale(1.3);
}

.cookie-banner {
    position: fixed;
    bottom: 50%;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 0.9em;
}

.cookie-banner button {
    background-image: linear-gradient(121deg, #84fab0 0%, #8fd3f4 100%);
    color: var(--color-button);
    border: none;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin-top: 1em;
}

/* media querie ipad */

@media only screen and (max-width: 1200px) {
  header nav {
    display: flex;
    justify-content: right;
    gap: 10%;
    /* border: 1px magenta solid; */
  }
  footer nav {
    display: flex;
    align-items: flex-end;
    gap: 10%;
    /* border: 1px magenta solid; */
  }
  .teamBox {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 7%;
  }
  a[href^="tel:"] {
    color: var(--color-font-white);
    text-decoration: none;
  }
}

/* media querie mobil across */

@media only screen and (max-width: 900px) {
  header, nav {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  nav {
    text-align: center;
  }
  footer nav {
    align-items: center;
  }
  footer {
    flex-direction: column;
    text-align: center;
  }
  a {
    padding: 0.5em 0em;
  }
  a[href^="tel:"] {
    color: var(--color-font-white);
    text-decoration: none;
  }
  .landing-page {
    height: 50vh;
    /* max-height: 50%; */
  }
  .datenschutz-page {
    height: fit-content;
    font-size: 90%;
  }

  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 0.8em;
  }
  h4 {
    font-size: 0.7em;
  }
  p {
    font-size: 0.7em;
  }
}
.copy {
  font-size: 0.55em;
  padding-top: 0.7em;
}

/*   
  
  form, div, select {
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 3rem;
    margin: 0.5rem 5rem;
  }
  
  input[type="text"] {
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: rgba(249, 249, 249, 0.3);
    border: none;
    border-radius: 0.3rem;
  }
  
  select, button {
    width: max-content;
    background-color: rgba(49, 49, 49, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    padding: 1rem 1.5rem;
    border-radius: 0.3rem;
  }