@charset "UTF-8";
:root {
  --gutter: 50px;
  --double-gutter: calc(var(--gutter) * 2);
  --half-gutter: calc(var(--gutter) / 2);
  --gap-small: 16px;
  --gap-medium: 20px;
  --gap-large: 30px;
  --block-spacing: 120px;
  --half-block-spacing: calc(var(--block-spacing) / 2);
  --border-radius-large: 25px;
  --border-radius-medium: 18px;
  --border-radius-small: 10px;
}
@media (max-width: 1500px) {
  :root {
    --border-radius-large: 15px;
    --block-spacing: 100px;
  }
}
@media (min-width: 1501px) and (max-width: 2299px) {
  :root {
    --gutter: 40px;
  }
}
@media (max-width: 1500px) {
  :root {
    --gutter: 30px;
    --gap-large: 25px;
  }
}
@media (max-width: 950px) {
  :root {
    --gutter: 25px;
  }
}
@media (max-width: 550px) {
  :root {
    --gutter: 20px;
  }
}

/*----------------------
Farbsystem
------------------------*/
:root {
  --primary: #003e7c;
  --mid-blue: #508cd2;
  --light: #bedcfa;
  --lightblue: #e8f3fb;
  --airy: #f1faff;
  --white: #ffffff;
  --grey: #b3b9c8;
  --black: #000115;
}

/*----------------------
Schrifteinbindung
------------------------*/
@font-face {
  font-family: "Brix Sans";
  src: url("../fonts/Brix-Sans-Web-Medium.woff2") format("woff2"), url("../fonts/Brix-Sans-Web-Medium.woff") format("woff"), url("../fonts/Brix-Sans-Web-Medium.eot?#iefix") format("embedded-opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brix Sans";
  src: url("../fonts/Brix-Sans-Web-Bold.woff2") format("woff2"), url("../fonts/Brix-Sans-Web-Bold.woff") format("woff"), url("../fonts/Brix-Sans-Web-Bold.eot?#iefix") format("embedded-opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Brix Sans";
  src: url("../fonts/Brix-Sans-Web-Black.woff2") format("woff2"), url("../fonts/Brix-Sans-Web-Black.woff") format("woff"), url("../fonts/Brix-Sans-Web-Black.eot?#iefix") format("embedded-opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/*----------------------
Schriftsatz
------------------------*/
:root {
  --copy: 19px;
  --copy-height: 29px;
  --button: calc(var(--copy) - 2px);
  --button-height: 28px;
  --button-spacing: 2px;
  --h1: 54px;
  --h1-height: 42px;
  --h2: 35px;
  --h2-height: 38px;
  --h3: 25px;
  --h3-height: 28px;
  --small: 16px;
  --small-height: 25px;
  --overline: 20px;
  --overline-height: 28px;
  --category: calc(var(--small) - 1px);
  --readmore: calc(var(--category) - 1px);
  --wide: 3px;
  --medium: 1.2px;
  --semi-narrow: 0.7px;
  --narrow: 0;
}
@media (max-width: 1500px) {
  :root {
    --copy: 18px;
    --copy-height: 27px;
    --h1: 32px;
    --h1-height: 43px;
    --h2: 29px;
    --h2-height: 33px;
    --h3: 22px;
    --h3-height: 27px;
    --small: 15px;
    --small-height: 24px;
  }
}
@media (max-width: 950px) {
  :root {
    --copy: 17px;
    --copy-height: 26px;
    --h1: 26px;
    --h1-height: 36px;
    --h2: 26px;
    --h2-height: 30px;
    --h3: 20px;
    --h3-height: 25px;
    --small: 14px;
    --small-height: 23px;
  }
}
p, .wp-block-heading, .has-text-align-center {
  width: 100%;
  transition: 300ms ease-in-out;
}

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

body, p {
  color: var(--primary);
  font-family: "Brix Sans", sans-serif;
  font-size: var(--copy);
  line-height: var(--copy-height);
  letter-spacing: var(--medium);
  margin: 0;
  padding: 0;
  font-weight: 500;
}

html body b, html body strong {
  font-family: "Brix Sans", sans-serif;
  font-weight: 900;
  letter-spacing: var(--medium);
}
html body a {
  color: inherit;
  font-family: "Brix Sans", sans-serif;
  font-weight: 900;
  text-decoration: none !important;
  transition: 300ms ease-in-out;
}
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
  font-family: "Brix Sans", sans-serif;
  font-weight: 700;
  text-wrap: balance;
  transition: 300ms ease-in-out;
  margin-top: 0;
}
html body h1 a, html body h1 b, html body h1 strong, html body h2 a, html body h2 b, html body h2 strong, html body h3 a, html body h3 b, html body h3 strong, html body h4 a, html body h4 b, html body h4 strong, html body h5 a, html body h5 b, html body h5 strong, html body h6 a, html body h6 b, html body h6 strong {
  font-weight: inherit;
}
html body .overline {
  font-size: var(--overline) !important;
  line-height: var(--overline-height);
  letter-spacing: var(--wide) !important;
  padding-left: 1px;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: "Brix Sans", sans-serif;
  font-weight: 700;
}
@media (max-width: 950px) {
  html body .overline {
    margin-bottom: 6px;
  }
}
@media (max-width: 550px) {
  html body .overline {
    margin-bottom: 10px;
  }
}
html body h1, html body h2 {
  margin-bottom: 25px;
  margin-left: -1px;
  font-weight: 700;
}
@media (max-width: 1500px) {
  html body h1, html body h2 {
    margin-bottom: 20px;
  }
}
@media (max-width: 950px) {
  html body h1, html body h2 {
    margin-bottom: 15px;
  }
}
html body h1:last-child, html body h2:last-child {
  margin-bottom: 0;
}
html body h3 {
  font-family: "Brix Sans", sans-serif;
  font-weight: 700;
  font-size: var(--h3);
  line-height: var(--h3-height);
}
html body p {
  text-wrap: pretty;
}
html body h1 {
  font-size: var(--h1);
  line-height: var(--h1-height);
  letter-spacing: var(--narrow);
  font-weight: 700;
}
html body h2 {
  font-size: var(--h2) !important;
  line-height: var(--h2-height) !important;
  letter-spacing: var(--narrow) !important;
  font-weight: 700 !important;
}
html body h3 {
  font-size: var(--h3);
  line-height: var(--h3-height);
  letter-spacing: var(--semi-narrow);
  font-weight: 700;
}
html body .headermenu a, html body .headermenu-mobile__menu a {
  font-family: "Brix Sans", sans-serif;
  font-weight: 900;
}
html body footer a {
  font-size: var(--small);
  font-family: "Brix Sans", sans-serif;
  font-weight: 900;
  line-height: 100%;
  letter-spacing: 1px;
  transition: 300ms ease-in-out;
}
html body small, html body #menu-footermenu a {
  font-size: var(--small);
  line-height: var(--small-height);
  font-family: "Brix Sans", sans-serif;
  letter-spacing: 1px;
}
html body ul {
  list-style: none;
  line-height: 175%;
  margin: 0;
  padding: 0;
  transition: 300ms ease-in-out;
}
html body ul li:last-child {
  margin-bottom: 0 !important;
}
html body .content ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: var(--half-gutter);
  font-family: "Brix Sans", sans-serif;
  font-weight: 500;
  transition: 300ms ease-in-out;
}
html body .content ul li::before {
  content: "";
  position: absolute;
  left: -5px;
  width: 29px;
  height: 25px;
  background-image: url(../img/bullet_light.svg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 2px;
}
@media (max-width: 1500px) {
  html body .content ul li::before {
    top: 0;
  }
}

/*--------------------------------------------------------------
WP Einstellungen
--------------------------------------------------------------*/
.content {
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.content > *:not(.alignwide):not(.alignfull) {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.alignwide {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.content > .alignfull {
  width: calc(100% + var(--double-gutter));
  margin-left: calc(-1 * var(--gutter));
  margin-right: calc(-1 * var(--gutter));
  left: 0;
}

.shadow {
  -webkit-box-shadow: 0 0 var(--gutter) 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 var(--gutter) 1px rgba(0, 0, 0, 0.3);
}

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

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 160px;
}

body, html {
  overscroll-behavior: none;
}

a {
  cursor: pointer;
}

.the-page {
  overflow: hidden;
}

.content {
  min-height: 100vh;
  padding-top: var(--menubar-height);
}
.content > * {
  margin-top: var(--block-spacing);
  margin-bottom: var(--block-spacing);
}
.content > *:first-child {
  margin-top: 0;
}
.content > *:last-child {
  margin-bottom: 0;
}
.content > *:only-child {
  margin: 0;
}
.content :where(.wp-block-columns.is-layout-flex) {
  gap: var(--gutter);
}

:where(.is-layout-flex) {
  gap: 0;
}

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

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

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

figure {
  overflow: hidden;
}

@media (max-width: 950px) {
  .wp-block-columns {
    flex-direction: column;
  }
}

:focus {
  outline: none;
}

:root {
  --logo-width: 340px;
  --logo-width-scroll: 50px;
  --logo-height: 68px;
  --logo-margin-block: 30px;
  --menubar-height: calc(var(--logo-height) + 2 * var(--logo-margin-block));
  --menu-padding: 23px;
}
@media (max-width: 950px) {
  :root {
    --menubar-height: 96px;
  }
}

.headermenu {
  background-color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  transition: 300ms ease-in-out;
}
@media (max-width: 950px) {
  .headermenu {
    display: none;
  }
}
.headermenu .menu {
  display: flex;
  padding: 15px 30px 21px 40px;
  gap: var(--gutter);
  font-size: var(--button);
}
.headermenu .menu > ul {
  flex-direction: row;
  display: flex;
  gap: var(--gutter);
}
.headermenu .menu:has(li:active, li:hover) li.current-menu-item::before {
  height: 0;
}
.headermenu .menu:has(li:active, li:hover) li.current-menu-item:hover::before {
  height: 20px;
}
.headermenu .menu li {
  color: var(--white);
  position: relative;
  transition: 200ms ease-out;
}
.headermenu .menu li::before {
  content: "";
  width: 100%;
  height: 0;
  background-color: var(--light);
  position: absolute;
  top: -47px;
  transition: 300ms ease-in-out;
}
.headermenu .menu li:hover::before, .headermenu .menu li.current-menu-item::before {
  height: 20px;
}
.headermenu .menu li.is-next::before {
  height: 20px;
}
.headermenu .menu li.is-leaving::before {
  height: 0;
}
.headermenu__logocontainer {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--logo-width);
  height: var(--logo-height);
  margin: var(--logo-margin-block) 35px;
  transition: 300ms ease-in-out;
}
.headermenu__logo, .headermenu__logoscroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: var(--white);
  transition: 300ms ease-in-out;
}
.headermenu__logo svg, .headermenu__logoscroll svg {
  display: block;
  height: auto;
}
.headermenu__logo {
  opacity: 1;
}
.headermenu__logo svg {
  width: var(--logo-width);
}
.headermenu__logoscroll {
  opacity: 0;
}
.headermenu__logoscroll svg {
  width: var(--logo-width-scroll);
}

.scroll .headermenu {
  background-color: var(--white);
  box-shadow: 0 4px 100px rgba(0, 62, 124, 0.1);
}
.scroll .headermenu li {
  color: var(--primary);
}
.scroll .headermenu li::before {
  top: -21px;
}
.scroll .headermenu__logocontainer {
  width: var(--logo-width-scroll);
  height: 51px;
  margin: 10px 20px 15px 15px;
}
.scroll .headermenu__logo {
  opacity: 0;
}
.scroll .headermenu__logoscroll {
  opacity: 1;
}
.scroll .headermenu__logo, .scroll .headermenu__logoscroll {
  color: var(--primary);
}

/*----------------------
Mobiles Menü
------------------------*/
.headermenu-mobile {
  display: none;
  /* Logo und Hamburger stehen über dem Panel, damit die Leiste beim Öffnen sichtbar bleibt. */
  /*----------------------
  Hamburger
  ------------------------*/
  /* Ober- und Unterstrich sind Pseudoelemente, nur der Mittelstrich braucht ein
     eigenes Element. Alle drei liegen absolut, damit sie im offenen Zustand auf
     dieselbe Höhe wandern und dort das Kreuz bilden. */
  /*----------------------
  Panel
  ------------------------*/
}
@media (max-width: 950px) {
  .headermenu-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--menubar-height);
    padding: 0 33px 0 var(--menu-padding);
    background-color: var(--primary);
    box-shadow: 0 0 34px rgba(80, 140, 210, 0.5);
    z-index: 100;
  }
}
.headermenu-mobile__logo, .headermenu-mobile__hamburger {
  position: relative;
  z-index: 1;
}
.headermenu-mobile__logo {
  display: block;
  width: 50px;
  color: var(--white);
}
.headermenu-mobile__logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.headermenu-mobile__hamburger {
  width: 34px;
  height: 30px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.headermenu-mobile__hamburger::before, .headermenu-mobile__hamburger::after {
  content: "";
}
.headermenu-mobile__hamburger::before, .headermenu-mobile__hamburger::after,
.headermenu-mobile__hamburger .headermenu-mobile__line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--white);
  transition: 300ms ease-in-out;
}
.headermenu-mobile__hamburger::before {
  top: 0;
}
.headermenu-mobile__hamburger .headermenu-mobile__line {
  top: 13px;
}
.headermenu-mobile__hamburger::after {
  top: 26px;
}
.headermenu-mobile__panel {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: calc(var(--menubar-height) + 74px) var(--menu-padding) 50px;
  background-color: var(--primary);
  overflow-x: hidden;
  overflow-y: auto;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 400ms ease-in-out, visibility 400ms;
}
.headermenu-mobile__menu {
  display: flex;
  flex-direction: column;
  gap: 28px;
  /* Der Marker wächst wie im Desktop-Menü heraus, hier vom linken Bildschirmrand.
     14px Breite plus 9px Abstand ergeben genau das Padding des Panels. */
}
.headermenu-mobile__menu a {
  display: block;
  position: relative;
  color: var(--white);
  font-size: 26px;
  line-height: 28px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.headermenu-mobile__menu a::before {
  content: "";
  position: absolute;
  top: 7px;
  right: 100%;
  width: 0;
  height: 17px;
  margin-right: 9px;
  background-color: var(--light);
  transition: 300ms ease-in-out;
}
.headermenu-mobile__menu li:hover a::before,
.headermenu-mobile__menu li.current-menu-item a::before {
  width: 14px;
}

@media (max-width: 950px) {
  .menu-open {
    overflow: hidden;
  }
}
.menu-open .headermenu-mobile__panel {
  transform: none;
  visibility: visible;
}
.menu-open .headermenu-mobile__hamburger::before, .menu-open .headermenu-mobile__hamburger::after {
  top: 13px;
}
.menu-open .headermenu-mobile__hamburger::before {
  transform: rotate(45deg);
}
.menu-open .headermenu-mobile__hamburger::after {
  transform: rotate(-45deg);
}
.menu-open .headermenu-mobile__hamburger .headermenu-mobile__line {
  opacity: 0;
}

.pagefooter {
  display: flex;
  justify-content: space-between;
  padding: var(--gutter);
  background-color: var(--primary);
  color: var(--white);
}
.pagefooter__menu {
  gap: var(--gutter);
}
.pagefooter > small, .pagefooter__menu, .pagefooter__nav, .pagefooter li, .pagefooter ul {
  display: flex;
  line-height: 100%;
  align-items: center;
}

.button,
.btn,
button[type=submit],
.wp-element-button,
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  height: 35px;
  padding: 0 35px 3px;
  border: 2px solid transparent;
  border-radius: 20px;
  background-color: var(--primary);
  color: var(--white);
  font-family: "Brix Sans", sans-serif;
  font-size: var(--button);
  font-weight: 700;
  line-height: var(--button-height);
  letter-spacing: var(--button-spacing);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: 300ms ease-in-out;
}
.button span, .button p,
.btn span,
.btn p,
button[type=submit] span,
button[type=submit] p,
.wp-element-button span,
.wp-element-button p,
.wp-block-button__link span,
.wp-block-button__link p {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.button:hover, .button:focus-visible,
.btn:hover,
.btn:focus-visible,
button[type=submit]:hover,
button[type=submit]:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
  background-color: var(--lightblue);
  border-color: var(--mid-blue);
  color: var(--black);
}
.button:focus,
.btn:focus,
button[type=submit]:focus,
.wp-element-button:focus,
.wp-block-button__link:focus {
  outline: none;
}
.button:active,
.btn:active,
button[type=submit]:active,
.wp-element-button:active,
.wp-block-button__link:active {
  transform: scale(0.95);
}

.button--light {
  background-color: var(--white);
  color: var(--primary);
}
.button--light:hover, .button--light:focus-visible {
  background-color: var(--lightblue);
  border-color: transparent;
  color: var(--black);
}

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

/*--------------------------------
Text & Button
--------------------------------*/
html body .content .wp-block-media-text {
  padding-left: 0;
  padding-right: 0;
  gap: var(--gutter);
}
html body .content .wp-block-media-text__media {
  border-radius: var(--border-radius-large);
  overflow: hidden;
}
html body .content .wp-block-media-text__content {
  padding: 0 !important;
}
@media (max-width: 950px) {
  html body .content .wp-block-media-text {
    display: flex;
    flex-direction: column;
    max-width: 710px !important;
  }
}
@media (max-width: 550px) {
  html body .content .wp-block-media-text {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}
html body .content .wp-block-media-text ul li {
  margin-bottom: calc(0.5 * var(--half-gutter));
}
html body .content .wp-block-media-text ul li:last-child {
  margin-bottom: var(--half-gutter);
}

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