/* Alle Styles, die speziell für Screen sind */

:root {
  --max-width: 1600px;
  --page-padding: 5vw;
  --media: calc(var(--max-width) + var(--page-padding) * 2);
}

#row_content {
  row-gap: 10rem;
  padding-bottom: 10rem;
  padding-top: 10rem;
}

.content_block {
  /* background-color: var(--background, var(--black)); */
  position: relative;
  z-index: 1;
  /* --black: var(--background, #000) */
}

.content_block:before {
  content: '';
  position: absolute;
  background-color:  var(--background, #000);
  left: calc(0px - var(--padding));
  right: calc(0px - var(--padding));
  top: -10rem;
  bottom: -10rem;
  z-index: -1;
  mask-image: var(--top_bottom);
  pointer-events: none;
}

.page-home #row_content {
  padding-top: 0;
}

button {
  background: none;
  border: none;
  appearance: none;
}

input[type='submit'],
button,
.btn,
.button {
  border: 2.75px solid;
  padding: 1rem 1.5rem;
  transition: all 0.3s ease;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: var(--bold);
  color: var(--highlight);
  font-size: var(--textfontsize);

  display: flex;
  width: fit-content;
  align-content: center;
  align-items: center;
}

.button::after {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  border-top: 2px solid;
  border-right: 2px solid;
  transform: rotate(45deg);
  margin-left: 1rem;
  transition: all .3s ease;
}


input[type='submit']:hover,
button:hover,
.btn:hover  {
  opacity: 0.8;
}

.button:hover::after,
button:hover::after {
  transform: translateX(.25em) rotate(45deg);
}

@media (min-width: calc(1600px * 1.1)) {
  :root {
    --padding: calc((100vw - var(--max-width)) / 2);
  }
}

@media (max-width: calc(1600px * 1.1)) {
  :root {
    --padding: var(--page-padding);
  }
}

.content-wrapper,
header {
  padding-left: var(--padding);
  padding-right: var(--padding);
}