/*----------------------
Main Menu
------------------------*/
.top {
  position: absolute;
  top: 0;
  left: 0;
}

@media (max-width: 1500px) {
  body header .headermenu.top {
    height: 80px;
  }
}
body header .headermenu.top .headermenu__logo {
  opacity: 1;
}

@media (max-width: 950px) {
  .headermenu:not(.top) .headermenu__brandmark {
    opacity: 0;
  }
}
.single .headermenu.top:hover {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(22px);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

body .headermenu:hover .hamburger {
  top: -40px;
  transition: all 300ms ease-in-out;
}
body .headermenu:hover .menu-headermenu-container {
  margin: 0;
  transition: all 400ms ease-out 400ms;
}
body .headermenu:hover .headermenu__logo {
  opacity: 1;
}
body .headermenu:hover .headermenu__logo--wordmark {
  opacity: 0;
}

.headermenu {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  height: 80px;
  padding: var(--half-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: 300ms ease-out;
}
@media (max-width: 550px) {
  .headermenu {
    background: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}
.headermenu__brandmark {
  width: 50px;
  height: 50px;
  display: block;
  transition: 600ms ease-out;
  color: var(--white);
}
.headermenu__brandmark:hover {
  color: var(--primary);
}
.headermenu .menu-headermenu-container {
  width: 100%;
  transition: all 400ms ease-out 400ms;
  z-index: 40;
}
.headermenu .menu-headermenu-container ul {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  width: 100%;
}
.headermenu .menu-headermenu-container ul li {
  display: inline;
}
.headermenu .menu-headermenu-container ul li a {
  transition: 400ms ease-out;
}
.headermenu .menu-headermenu-container ul li a:hover {
  color: var(--primary);
}

button[type=submit], .wp-element-button, .frm_button_submit {
  background-color: #000 !important;
  border-radius: 25px;
  padding: 0 var(--gutter) 3px var(--gutter);
  color: #fff !important;
  cursor: pointer;
  height: 40px;
  z-index: 5;
  font-weight: 600;
  border: 2px solid #fff !important;
}
@media (max-width: 1200px) {
  button[type=submit], .wp-element-button, .frm_button_submit {
    height: 36px;
  }
}
button[type=submit]:hover, .wp-element-button:hover, .frm_button_submit:hover {
  background-color: #fff !important;
  color: #000 !important;
  border: 2px solid #000 !important;
}

.frm_button_submit:visited {
  color: #000 !important;
}

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

.clearfix {
  clear: both;
}

body * {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
}

body, html {
  overscroll-behavior: none;
  scroll-behavior: smooth;
}

.main {
  overflow: hidden;
}

a {
  cursor: pointer;
}

.content {
  min-height: 100vh;
  padding-top: 100px;
  width: 100%;
}

.is-layout-flex {
  flex-wrap: nowrap;
}

.is-vertical {
  flex-direction: column;
}

.alignfull {
  max-width: 100%;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}

/*----------------------
Farbsystem
------------------------*/
:root {
  --white: #FFFFFF;
  --dark_white: #f2f2f2;
  --light_grey: #d6d1d1;
  --grey: #959595;
  --dark_grey: #444444;
  --darker_grey: #222121;
  --light_black: #1A1919;
  --black: #0c0c0c;
  --primary: #FFA34A;
  --primary_light: #ffebd5;
  --negative: #810049;
  --negative_light: #ffadc9;
  --positive: #a9eeb7;
  --positive_text: #047874;
}

/*----------------------
Schrifteinbindung
------------------------*/
@font-face {
  font-family: "Regular";
  src: url("../fonts/Satoshi-Variable.ttf") format("truetype-variations");
  font-weight: 300 800;
  font-style: normal;
}
@font-face {
  font-family: "Italic";
  src: url("../fonts/Satoshi-VariableItalic.ttf") format("truetype-variations");
}
/*----------------------
Schriftsatz
------------------------*/
:root {
  --copy: 16px;
  --copy-height: 170%;
  --h1: 75px;
  --h1-height: 75px;
  --h2: 70px;
  --h2-height: 72px;
  --h3: 23px;
  --h3-height: 27px;
  --small: 14px;
  --small-height: 27px;
  --button: calc(var(--copy) - 1px);
  --button-height: 100%;
  --wide: 5px;
  --medium: 1.5px;
  --narrow: -0.9px;
}
@media (max-width: 1500px) {
  :root {
    --h1: 70px;
    --h1-height: 70px;
    --copy: 15px;
    --small: 15px;
    --small-height: 24px;
    --h2: 50px;
    --h2-height: 52px;
    --h3: 20px;
    --h3-height: 25px;
  }
}
@media (max-width: 1200px) {
  :root {
    --h1: 55px;
    --h1-height: 55px;
  }
}
@media (max-width: 950px) {
  :root {
    --h1: 45px;
    --h1-height: 50px;
    --h2: 35px;
    --h2-height: 37px;
    --h3: 18px;
    --h3-height: 23px;
    --copy: 16px;
    --copy-height: 27px;
    --small: 14px;
    --small-height: 22px;
    --button: 16px;
    --button-height: 20px;
  }
}
@media (max-width: 550px) {
  :root {
    --h1: 33px;
    --h1-height: 44px;
  }
}

p, .wp-block-heading, .has-text-align-center {
  width: 100%;
}

.has-small-font-size {
  font-size: var(--small) !important;
  line-height: var(--small-height) !important;
}

body, p {
  color: var(--black);
  font-family: "Regular", sans-serif;
  font-size: var(--copy);
  line-height: var(--copy-height);
  letter-spacing: 0.5px;
  font-weight: normal;
  margin: 0;
  padding: 0;
  transition: 400ms ease-in-out;
  font-variation-settings: "wght" 500;
}

html body .content b, html body .content strong, .pagefooter b, .pagefooter strong {
  font-family: "Regular", sans-serif;
  font-variation-settings: "wght" 900;
  letter-spacing: 0.3px;
}
html body .content h1, html body .content h2, html body .content h3, html body .content h4, html body .content h5, html body .content h6, .pagefooter h1, .pagefooter h2, .pagefooter h3, .pagefooter h4, .pagefooter h5, .pagefooter h6 {
  text-wrap: balance;
  transition: 400ms ease-in-out;
}
html body .content h2, html body .content h3, html body .content h4, html body .content h5, html body .content h6, .pagefooter h2, .pagefooter h3, .pagefooter h4, .pagefooter h5, .pagefooter h6 {
  margin-top: var(--double-gutter);
}
html body .content p, .pagefooter p {
  text-wrap: pretty;
  margin: var(--half-gutter) 0 !important;
}
html body .content h1, .pagefooter h1 {
  font-family: "Regular", sans-serif;
  font-size: var(--h1);
  line-height: var(--h1-height);
  letter-spacing: -1px;
  margin-bottom: var(--double-gutter) !important;
  margin-left: -4px !important;
  font-variation-settings: "wght" 900;
}
@media (max-width: 1200px) {
  html body .content h1, .pagefooter h1 {
    font-variation-settings: "wght" 800;
    letter-spacing: -0.4px;
  }
}
html body .content h2, .pagefooter h2 {
  font-family: "Regular", serif;
  font-size: var(--h2);
  line-height: var(--h2-height);
  letter-spacing: 1.5px;
  font-weight: normal;
  font-variation-settings: "wght" 900;
}
html body .content h3, .pagefooter h3 {
  font-family: "Extended", sans-serif;
  font-size: var(--h3);
  line-height: var(--h3-height);
  letter-spacing: 0.8px;
  font-variation-settings: "wght" 900;
}
html body .content a, .pagefooter a {
  color: inherit;
  text-decoration: none !important;
  transition: 400ms ease-in-out;
}
html body .content button, html body .content .button, html body .content .button span, html body .content .btn, html body .content .wp-element-button, html body .content body main .frm_button_submit, .pagefooter button, .pagefooter .button, .pagefooter .button span, .pagefooter .btn, .pagefooter .wp-element-button, .pagefooter body main .frm_button_submit {
  font-family: "Regular", sans-serif;
  font-size: var(--button);
  line-height: var(--button-height);
  letter-spacing: 3px;
  text-transform: uppercase;
  word-spacing: -1px;
  transition: 400ms ease-in-out;
}
html body .content .headermenu a, .pagefooter .headermenu a {
  font-size: var(--button);
  transition: 400ms ease-in-out;
}
html body .content footer a, .pagefooter footer a {
  font-size: var(--small);
  font-family: "Regular", sans-serif;
  transition: 400ms ease-in-out;
  font-variation-settings: "wght" 500;
  letter-spacing: 1px;
}
html body .content ul, .pagefooter ul {
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 400ms ease-in-out;
}
html body .content .content ul li, .pagefooter .content ul li {
  position: relative;
  padding-left: 30px; /* bullet spacing */
  transition: 400ms ease-in-out;
  margin-bottom: 30px;
  font-family: "Regular", sans-serif;
  color: var(--dark_grey);
}
@media (max-width: 550px) {
  html body .content .content ul li, .pagefooter .content ul li {
    margin: var(--padding);
  }
}
html body .content .content ul li::before, .pagefooter .content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-image: url(../img/bullet_light.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 7px;
}
@media (max-width: 1500px) {
  html body .content .content ul li::before, .pagefooter .content ul li::before {
    top: 6px;
  }
}
@media (max-width: 1140px) {
  html body .content .content ul li::before, .pagefooter .content ul li::before {
    top: 3px;
  }
}

/*----------------------------------------
Footer Layout
-----------------------------------------*/
.pagefooter {
  padding: var(--padding-small) var(--gutter);
  background-color: var(--black);
  color: var(--white);
}
.pagefooter__menu {
  width: 100%;
}
.pagefooter__menu ul {
  width: 100%;
  display: flex;
  gap: var(--gutter);
  justify-content: flex-end;
}

body main #frm_form_1_container {
  position: relative;
  margin-top: 20px;
}
body main #frm_form_1_container fieldset {
  padding: 0;
  border: none;
}
body main #frm_form_1_container .frm_form_fields .frm_fields_container {
  grid-gap: 0 10px;
}
body main #frm_form_1_container .frm_form_field {
  position: relative;
  margin: 10px 0;
}
body main #frm_form_1_container input:-webkit-autofill {
  background-color: white !important;
}
body main #frm_form_1_container label {
  top: 5px;
  right: 15px;
  z-index: 3;
  font-size: 20px;
  font-family: "Regular", sans-serif;
  position: absolute;
  color: #002aff !important;
}
body main #frm_form_1_container label:has(~ input:not(:placeholder-shown)) span, body main #frm_form_1_container label:has(~ textarea:not(:placeholder-shown)) span {
  display: none !important;
}
body main #frm_form_1_container label span {
  color: #000 !important;
}
@media (max-width: 550px) {
  body main #frm_form_1_container label {
    top: 0px;
    right: 4px;
  }
}
body main #frm_form_1_container input {
  height: 50px;
  padding: 0 var(--half-gutter) 3px var(--half-gutter);
  width: 100%;
  margin: 0;
  cursor: text;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  color: #000 !important;
  z-index: 3;
  font-size: var(--copy);
  line-height: var(--copy-height);
  background: #fff !important;
  border: 0 solid #fff !important;
}
body main #frm_form_1_container input::placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container input::-webkit-input-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container input::-moz-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container input:-ms-input-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container input:focus, body main #frm_form_1_container input:active, body main #frm_form_1_container input :focus-visible, body main #frm_form_1_container input :focus-within {
  outline: none;
}
body main #frm_form_1_container input:focus::-webkit-input-placeholder, body main #frm_form_1_container input:active::-webkit-input-placeholder, body main #frm_form_1_container input :focus-visible::-webkit-input-placeholder, body main #frm_form_1_container input :focus-within::-webkit-input-placeholder {
  color: var(--white);
}
body main #frm_form_1_container input:focus::-moz-placeholder, body main #frm_form_1_container input:active::-moz-placeholder, body main #frm_form_1_container input :focus-visible::-moz-placeholder, body main #frm_form_1_container input :focus-within::-moz-placeholder {
  color: var(--white);
}
body main #frm_form_1_container input:focus:-ms-input-placeholder, body main #frm_form_1_container input:active:-ms-input-placeholder, body main #frm_form_1_container input :focus-visible:-ms-input-placeholder, body main #frm_form_1_container input :focus-within:-ms-input-placeholder {
  color: var(--white);
}
body main #frm_form_1_container input:focus::-ms-input-placeholder, body main #frm_form_1_container input:active::-ms-input-placeholder, body main #frm_form_1_container input :focus-visible::-ms-input-placeholder, body main #frm_form_1_container input :focus-within::-ms-input-placeholder {
  color: var(--white);
}
body main #frm_form_1_container input:focus::placeholder, body main #frm_form_1_container input:active::placeholder, body main #frm_form_1_container input :focus-visible::placeholder, body main #frm_form_1_container input :focus-within::placeholder {
  color: var(--white);
}
body main #frm_form_1_container input[aria-invalid=true] {
  border: 2px solid var(--primary);
}
body main #frm_form_1_container input:visited {
  color: var(--black);
  border: 2px solid var(--black);
}
body main #frm_form_1_container textarea {
  padding: 12px var(--half-gutter) var(--half-gutter) var(--half-gutter);
  font-family: "Regular", sans-serif;
  color: #000;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: var(--copy);
  line-height: var(--copy-height);
  background: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.36) !important;
  cursor: text;
  min-height: 300px;
}
body main #frm_form_1_container textarea::placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container textarea::-webkit-input-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container textarea::-moz-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container textarea:-ms-input-placeholder {
  color: #8f8f8f !important;
  letter-spacing: 1px;
  font-variation-settings: "wght" 500;
  font-size: 16px;
  line-height: 24px;
}
body main #frm_form_1_container textarea:focus, body main #frm_form_1_container textarea:active, body main #frm_form_1_container textarea :focus-visible {
  outline: none;
  color: var(--black);
}
body main #frm_form_1_container textarea:focus::-webkit-input-placeholder, body main #frm_form_1_container textarea:active::-webkit-input-placeholder, body main #frm_form_1_container textarea :focus-visible::-webkit-input-placeholder {
  color: #000;
}
body main #frm_form_1_container textarea:focus::-moz-placeholder, body main #frm_form_1_container textarea:active::-moz-placeholder, body main #frm_form_1_container textarea :focus-visible::-moz-placeholder {
  color: #000;
}
body main #frm_form_1_container textarea:focus:-ms-input-placeholder, body main #frm_form_1_container textarea:active:-ms-input-placeholder, body main #frm_form_1_container textarea :focus-visible:-ms-input-placeholder {
  color: #000;
}
body main #frm_form_1_container textarea:focus::-ms-input-placeholder, body main #frm_form_1_container textarea:active::-ms-input-placeholder, body main #frm_form_1_container textarea :focus-visible::-ms-input-placeholder {
  color: #000;
}
body main #frm_form_1_container textarea:focus::placeholder, body main #frm_form_1_container textarea:active::placeholder, body main #frm_form_1_container textarea :focus-visible::placeholder {
  color: #000;
}
body main #frm_form_1_container textarea:visited {
  color: var(--black);
}
body main #frm_form_1_container textarea:-webkit-autofill,
body main #frm_form_1_container textarea:-webkit-autofill:hover,
body main #frm_form_1_container textarea:-webkit-autofill:focus,
body main #frm_form_1_container textarea:-webkit-autofill:active, body main #frm_form_1_container input:-webkit-autofill:visited {
  background-color: var(--positive) !important;
  color: var(--black);
  border: none;
}
body main #frm_form_1_container .frm_message h2, body main #frm_form_1_container .frm_error_style[role=status] p {
  min-height: 350px;
  display: flex;
  align-items: center;
  font-size: calc(var(--h2) - 20px);
  line-height: calc(var(--h2-height) - 10px);
  color: var(--positive_text);
  font-family: "Headline", serif;
  text-align: left;
}
@media (max-width: 1500px) {
  body main #frm_form_1_container .frm_message h2, body main #frm_form_1_container .frm_error_style[role=status] p {
    font-size: var(--h2);
    line-height: var(--h2-height);
  }
}
body main #frm_form_1_container .frm_error_style[role=alert] {
  position: absolute;
  bottom: 20px;
  left: 0;
  padding: 3.8px var(--half-gutter) 7px var(--half-gutter);
  font-size: var(--small);
  color: var(--negative);
  font-family: "Italic", serif;
  font-variation-settings: "wght" 700;
  border: 0px solid var(--white);
  background-color: var(--negative_light);
  border-radius: 10px;
}
@media (max-width: 950px) {
  body main #frm_form_1_container .frm_error_style[role=alert] {
    bottom: -50px;
    margin: var(--half-gutter);
    width: calc(100% - var(--gutter));
    text-align: center;
  }
}
body main #frm_form_1_container .frm_error {
  position: relative;
  top: 2px;
  left: var(--half-gutter);
  font-size: var(--small);
  color: var(--negative_light);
  font-family: "Regular", sans-serif;
  font-variation-settings: "wght" 500;
  margin: 0 0 8px 0 !important;
}
body main #frm_form_1_container #frm_field_5_container {
  margin: 0;
}
body main #frm_form_1_container #spam_error {
  display: none;
}

/*--------------------------------
Headline
--------------------------------*/
.errorpage {
  min-height: 100vh;
  margin-bottom: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 25px;
}
.errorpage h1 {
  margin: 0 0 40px 0;
}

/*--------------------------------
Text & Button
--------------------------------*/
:root {
  --gutter: 40px;
  --double-gutter: calc(var(--gutter) * 2);
  --half-gutter: calc(var(--gutter) / 2);
  --padding-small: 12px;
  --block-spacing: 145px;
  --half-block-spacing: calc(var(--block-spacing) / 2);
  --border-radius-large: 23px;
  --border-radius-small: 10px;
  /**GRID**/
  --cols: 12;
  --cols-content: 8;
  --cols-wide: 10;
  --cols-full: 12;
  --col-width: calc(
          (100% - ( (var(--cols) - 1) * var(--gutter) ))
          / var(--cols)
  );
  --width-content: calc(
          (var(--col-width) * var(--cols-content)) +
          (var(--gutter) * (var(--cols-content) - 1))
  );
  --width-wide: calc(
          (var(--col-width) * var(--cols-wide)) +
          (var(--gutter) * (var(--cols-wide) - 1))
  );
  --width-full: calc(
          (var(--col-width) * var(--cols-full)) +
          (var(--gutter) * (var(--cols-full) - 1))
  );
  /**General Setup**/
}
@media (max-width: 1200px) {
  :root {
    --cols-content: 10;
    --cols-wide: 12;
  }
}
@media (max-width: 950px) {
  :root {
    --cols-content: 12;
    --cols-wide: 12;
  }
}
:root .content {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
:root .content > *:not(.alignwide):not(.alignfull) {
  max-width: var(--width-content);
  margin-left: auto;
  margin-right: auto;
}
:root .content > .alignwide {
  max-width: var(--width-wide);
  margin-left: auto;
  margin-right: auto;
}
:root .content > .alignfull {
  max-width: var(--width-full);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 1500px) {
  :root {
    --gutter: 30px;
  }
}
@media (max-width: 1200px) {
  :root {
    --gutter: 20px;
  }
}
@media (max-width: 950px) {
  :root {
    --gutter: 18px;
  }
}

/*# sourceMappingURL=main.css.map */