:root {
  --hellblau: #98cec6;
  --dunkelblau: #0070bf;
  --black: rgb(0, 0, 0);
  --white: rgb(255, 255, 255);
  --gradient: linear-gradient(
    40deg,
    rgba(152, 206, 198, 1) 0%,
    rgba(108, 178, 195, 1) 55%,
    rgba(0, 112, 191, 1) 100%
  );

  --nav-height: 3rem;

  --transition: 250ms ease-out;
  --transition-long: 500ms ease-out;
}

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

body {
  font-family: Montserrat, sans-serif;
  line-height: 1.8;
  font-weight: 400;
  font-size: clamp(1rem, 0.8897rem + 0.3676vw, 1.125rem);
}

.container {
  margin: 0vw 22vw 0vw 22vw;
}

.menu {
  z-index: 1;

  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  font-size: 1rem;

  background: var(--gradient);
  color: var(--white);
}

header ul {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-template-rows: 1fr;
  gap: 0.5rem;

  padding: 0rem 1.5rem;

  list-style-type: none;
}

header ul > li {
  display: grid;
  padding: 0.5rem;
}

header a {
  display: flex;
  align-items: center;
  color: var(--white);

  padding: 0rem;
  border-radius: 0.25rem;
  text-decoration: none;
}
header a:hover {
  color: var(--black);
}

.logo {
  display: grid;
  place-content: center;
  text-transform: uppercase;
}

.thanks {
  background: var(--gradient);
  color: var(--white);
  padding: 5rem 0rem 5rem 0rem;
}


p {
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2rem, 0.0916rem + 6.1069vw, 4rem);
  line-height: 1.2;
}

h2 {
  font-size: clamp(1.75rem, 0.5573rem + 3.8168vw, 3rem);
  line-height: 1.2;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

h3 {
  font-size: clamp(1.5rem, 1.0229rem + 1.5267vw, 2rem);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

h4 {
  font-size: clamp(1rem, 0.5229rem + 1.5267vw, 1.5rem);
  font-weight: 400;
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

.paddington {
  padding: 5rem 0rem 5rem 0rem;
}

.linklist {
  list-style-type: none;
  font-size: clamp(1rem, 0.5229rem + 1.5267vw, 1.5rem);
  font-weight: 600;
  line-height: 2;
}

.linklist a {
  text-decoration: none;
  color: var(--dunkelblau);
  transition: color 0.5s ease;
}

.linklist a:hover {
  color: var(--hellblau);
}

.social {
  margin-top: 3rem;
}

.social a {
  color: var(--hellblau);
}

.social a:hover {
  color: var(--dunkelblau);
}

.coverimage {
  width: 100%;
  height: 80vh;
  overflow: hidden;
}

.coverimage img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center top;
}

.gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
}

footer {
  background: var(--gradient);
  color: var(--white);
}

footer a {
  color: var(--white);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
  transition: 0.2s;
}

footer .container {
  padding: 5rem 0rem 5rem 0rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1.5rem;
  align-items: start;
}

strong {
  font-weight: 600;
}

.signatur {
  height: 15vh;
}

svg {
  width: 1rem;
}

.hero {
  height: 75vh;
  position: relative;
  overflow: hidden;
}

.hero a {
  color:rgb(0, 0, 0);
}

.hero .container {
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

.hero img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: 50% 50%;
}

.container .call {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
@media only screen and (max-width: 400px) {
  .hero {
    height: 80vh;
  }
}


@media only screen and (max-width: 768px) {
  .container {
    margin: 0vw 5vw 0vw 5vw;
  }
  .coverimage img {
    object-position: 30% 50%;
  }
  footer .container {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 1480px) and (min-width: 769px) {
  .container {
    margin: 0vw 7vw 0vw 7vw;
  }
  .coverimage img {
    object-position: 30% 50%;
  }
  footer .container {
    grid-template-columns: 1fr 1fr 1fr;
  }
}


h2+h3,
h3+h4,
h2+p,
h3+p,
h4+p,
p+p,
p+ul,
ul+p,
li+li {
  margin-top: 1rem;
}

p+h2 {
  margin-top: 4rem;
}

p+h3,
p+h4 {
  margin-top: 2rem;
}

#thanks h2 {
  color: white;
  -webkit-text-fill-color: white;
}