/* utils */
@import url(./variables/desktop.css);
@import url(./variables/giant.css);
@import url(./variables/tablet.css);
@import url(./variables/mobile.css);
@import url(./typography.css);
@import url(./utils.css);

/* templates */
@import url(./templates/default.css);
@import url(./templates/kontakt.css);

/* snippets */
@import url(./snippets/layout/header.css);
@import url(./snippets/layout/footer.css);
@import url(./snippets/layout/links.css);
@import url(./snippets/key-visuals.css);
@import url(./snippets/accordeon.css);
@import url(./snippets/cards.css);
@import url(./snippets/portraets.css);
@import url(./snippets/patterns.css);
@import url(./snippets/kontakt/map.css);
@import url(./snippets/kontakt/kontaktformular.css);

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

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
}

.body__main {
  flex-grow: 1;
  width: 100%;
  padding: var(--spacing-vertikal) var(--spacing-horizontal);

  display: flex;
  flex-direction: column;
  align-items: center;
}

.body__main--no-keyvisual {
  padding-top: var(--unit-2200);
}

.main__wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-vertikal);
}

.main__pageleader {
  grid-column: 1 / -1;
}

.pageleader__title {
  padding-bottom: var(--unit-200);
}

/* Coming soon */
.main__coming-soon {
  position: fixed;
  display: inline-block;
  bottom: 0;
  right: var(--unit-400);
  z-index: 10000;
  padding-left: var(--unit-200);
  padding-right: var(--unit-800);
  padding-bottom: var(--unit-400);
  padding-top: var(--unit-200);
  background-color: white;
  border-top: var(--stroke-width) solid var(--colors-primary);
  border-bottom: none;
  transform: translateY(100%);
  transition: transform 500ms var(--cubic-bezier-std);
}

.coming-soon__ic {
  display: inline-block;
  transform: translateY(0);
  transition: transform 500ms var(--cubic-bezier-std) 500ms;
}

.coming-soon__close {
  transform: rotate(0deg);
  position: absolute;
  right: var(--unit-100);
  top: var(--unit-100);
  transition: transform 500ms var(--cubic-bezier-std);
  cursor: pointer;
}

.coming-soon__close.is-visible {
  transform: rotate(45deg);
}

.main__coming-soon.is-visible {
  transform: translateY(0);
}

.coming-soon__ic.is-visible {
  transform: translateY(-0.5em);
}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 600px) {
  .main__coming-soon {
    bottom: 0;
    right: 0;
    left: 0;
    padding: var(--unit-300) var(--spacing-horizontal) var(--spacing-vertikal) var(--spacing-horizontal);
  }
}