@charset "UTF-8";
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
:root {
  --abstand: min(130px,16vw);
  --column-abstand: min(160px,10vw);
  --border-radius: 10px;
}

h1 + ul, h1 + ol, h1 + table, h1 + form, h2 + ul, h2 + ol, h2 + table, h2 + form, h3 + ul, h3 + ol, h3 + table, h3 + form, h4 + ul, h4 + ol, h4 + table, h4 + form, h5 + ul, h5 + ol, h5 + table, h5 + form, h6 + ul, h6 + ol, h6 + table, h6 + form, p + ul, p + ol, p + table, p + form, table + ul, table + ol, table + table, table + form, h1 + h1, h1 + h2, h1 + h3, h1 + h4, h1 + h5, h1 + h6, h2 + h1, h2 + h2, h2 + h3, h2 + h4, h2 + h5, h2 + h6, h3 + h1, h3 + h2, h3 + h3, h3 + h4, h3 + h5, h3 + h6, h4 + h1, h4 + h2, h4 + h3, h4 + h4, h4 + h5, h4 + h6, h5 + h1, h5 + h2, h5 + h3, h5 + h4, h5 + h5, h5 + h6, h6 + h1, h6 + h2, h6 + h3, h6 + h4, h6 + h5, h6 + h6, p + h1, p + h2, p + h3, p + h4, p + h5, p + h6, table + h1, table + h2, table + h3, table + h4, table + h5, table + h6, ul + h1, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6, ul + p, ol + h1, ol + h2, ol + h3, ol + h4, ol + h5, ol + h6, ol + p, table + p {
  margin-top: 1.8rem;
}

h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p {
  margin-top: 2.4rem;
}

p + p, p + ul, p + ol, p + table, p + form, table + p, table + ul, table + ol, table + table, table + form {
  margin-top: 1rem;
}

.margin + .margin, .pswp + .margin, .margin + h1, .margin + h2, .margin + h3, .margin + h4, .margin + h5, .margin + h6, .margin + p, .margin + ul, .margin + ol, .margin + table, .pswp + h1, .pswp + h2, .pswp + h3, .pswp + h4, .pswp + h5, .pswp + h6, .pswp + p, .pswp + ul, .pswp + ol, .pswp + table, h1 + .margin, h2 + .margin, h3 + .margin, h4 + .margin, h5 + .margin, h6 + .margin, p + .margin, table + .margin, ul + .margin, ol + .margin {
  margin-top: clc(1.5);
}

.gutter {
  padding-top: clc(2);
}

.gutter {
  padding-bottom: clc(2);
}

.x {
  color: #d99fd8;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
	* Breakpoint-Mixin
	*
	* Benutzung: @include breakpoint(Start-Wert, End-Wert, Start-Wert, End-Wert) {…}
	* Beispiel: @include breakpoint(1200, 800, 750, 500) {…}
	* Anmerkungen: Es ist möglich, das Mixin mit 1–4 Werten zu befüllen.
	* Bei einem Media Query mit Mindestbreite: @include breakpoint(0, Start-Wert) {…}
	*/
/**
    Einbindung:
    ============================================================================================================
    $column-gap: 2.5vw; // Abstand zwischen Spalten mit Maßeinheit (px oder vw)
    $row-gap: 1.0vw; // Abstand zwischen Zeilen mit Maßeinheit (px oder vw)
    $alternating-space: 1, 1, 1, 1, 0;  // 1 = berechneter margin Wert / 0 = margin ist 0 / Anzahl Spalten
    @include flex-article($column-gap, $row-gap, $alternating-space);
    ============================================================================================================
 */
/**
    Einbindung:
    ============================================================================================================
    @include grid-columns(50px, repeat(3, 1fr));
    @include grid-rows(50px, 1fr);
    ============================================================================================================
 */
/**
  Add Gap between the boxes
  ===================================================
  @param   {list}    $boxes - List with box sizes
  @param   {string}  $gap - Optional column gap
 */
/**
   To build Grid Template Columns with optional gap
  ===================================================
  @param   {string}  $gap - Optional column gap
  @param   {list}    $columns - Columns sizes
  @require {function} box-gap

  @example scss - scss
     .test {
       @include grid-columns(10px 250px 1fr 50px 100px);
     }
 */
/**
  To build Grid Template Rows with optional gap
  ===================================================
  @param   {string}  $gap - Optional row gap
  @param   {list}    $rows - Rows sizes
  @require {function} box-gap

  @example scss - scss
     .test {
       @include grid-rows(10px 1fr);
     }
 */
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/**
	* Font Face-Mixin
	*
	* Benutzung: @include font-face(Font-Family, Dateiname, Schriftschnitt (default=300), Italic (default=normal));
	* Beispiel: @include font-face("Fira Sans", "fira-sans-bold", bold);
	* Anmerkungen: font-weight & font-style können weggelassen werden, da ein Default gesetzt ist.
	*/
/**
	* Font Attribute-Mixin
	*
	* Benutzung: @include font-attribute(Mindestgröße, Maximalgröße, Zeilenabstand, Schriftschnitt, Minus-Margin (1=aktiv));
	* Beispiel: @include font-attribute(24px, 48px, 1.4, bold, 1);
	* Anmerkungen: Mindest- und Maximalwerte ermöglichen eine Fluid Typography.
	* Der Maximalwert gilt dabei ab der definierten Wrapper-Breite, der Minimalwert ab 400px.
	* Sind Mindest- und Maximalwert identisch, wird eine normale "font-size"-Angabe gerendert.
	* Der Minus-Margin wird in den Settings definiert und kann mit der Angabe "1" aktiviert werden.
	*/
/*************************************************************************************
* Hover Effect dotted Underline
*
*/
/*************************************************************************************
* Hover Effect zittern
*
*/
/*************************************************************************************
* Hover Effect Pulse
*
*/
/*************************************************************************************
* Hover Effect Pulse
*
*/
/* ************************************************************************ */
/***** (3) **********************************
*/
/* =================================================== */
/* Schriften als .woff und .woff2 ablegen unter templates/fonts, z. B. WorkSans-Regular.woff */
/* albert-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/albert-sans-v1-latin-300.woff2") format("woff2"), url("../fonts/albert-sans-v1-latin-300.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* albert-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/albert-sans-v1-latin-regular.woff2") format("woff2"), url("../fonts/albert-sans-v1-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* albert-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/albert-sans-v1-latin-700.woff2") format("woff2"), url("../fonts/albert-sans-v1-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* albert-sans-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Albert Sans";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/albert-sans-v1-latin-800.woff2") format("woff2"), url("../fonts/albert-sans-v1-latin-800.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* =================================================== */
/***** (4) **********************************
Alle externen Resourcen des Projekts
*/
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/***** (3) **********************************
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/***** (2) **********************************
Alle Mixins des Projekts
*/
* {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
*:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  overflow-y: scroll;
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  font-weight: 300;
}

body {
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  color: #585858;
  overflow: hidden;
}

header, main, footer {
  width: 100%;
  position: relative;
  display: block; /* IE */
}

main {
  overflow: hidden;
}

footer {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
}

a[href^="mail-to:"] {
  display: none;
}

.hidden {
  display: none;
}

iframe {
  border: none;
}

iframe, img {
  vertical-align: middle;
}

nobr {
  white-space: nowrap;
}

li {
  list-style: none;
  position: relative;
}

strong {
  font-weight: bold;
}

a {
  display: inline-block;
  text-decoration: none;
}

p:last-of-type, ul:last-of-type, ol:last-of-type, li:last-of-type {
  margin-bottom: 0;
}

i {
  font-style: normal;
}

.wrapper {
  max-width: 100%;
  margin: 0 auto;
  position: relative;
  width: calc(1400px + 6vw);
  padding-left: 3vw;
  padding-right: 3vw;
}
@media (max-width: 600px) {
  .wrapper {
    width: calc(1400px + 10vw);
    padding-left: 5vw;
    padding-right: 5vw;
  }
}
.wrapper.strich::before {
  content: "";
  position: absolute;
  left: 3vw;
  top: calc(-1 * min(100px, 16vw));
  width: 16px;
  height: calc(100% + 1.5 * min(100px, 16vw));
  background-image: -webkit-gradient(linear, left top, left bottom, from(#F71663), color-stop(25%, #12F1F4), color-stop(50%, #00F966), color-stop(75%, #3B0EDB), to(#F71663));
  background-image: linear-gradient(to bottom, #F71663 0%, #12F1F4 25%, #00F966 50%, #3B0EDB 75%, #F71663 100%);
  background-size: 100% 2000px;
  background-repeat: repeat-y;
}
.wrapper.strich::after {
  content: "";
  position: absolute;
  left: calc(3vw - 2px);
  bottom: calc(-0.5 * min(100px, 16vw) - 24px);
  width: 20px;
  height: calc(100% + 1.5 * min(100px, 16vw) + 48px);
  background-image: url("../img/Linie-Punkt-Maske.svg"), url("../img/Linie-Punkt-Maske.svg");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% auto, 100% auto;
  background-position: bottom left, top left;
}
.wrapper.strich section {
  padding-left: calc(16px + 3vw);
}
.wrapper.strich section.abstand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.wrapper.strich section.punkt {
  position: relative;
}
.wrapper.strich section.punkt::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 0;
  width: 20px;
  height: 64px;
  background-image: url("../img/Linie-Punkt-Maske.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.wrapper.strich section.punkt.schlagworte-punkt::before {
  top: 188px;
}
@media (max-width: 650px) {
  .wrapper.strich section.punkt.schlagworte-punkt::before {
    top: 148px;
  }
}
@media (max-width: 600px) {
  .wrapper.strich {
    padding-left: calc(16px + 5vw);
  }
  .wrapper.strich::before {
    left: 5px;
  }
  .wrapper.strich::after {
    left: 3px;
  }
  .wrapper.strich section {
    padding-left: 0;
  }
  .wrapper.strich section.punkt::before {
    display: none;
  }
}

.clear::after, .clear::before {
  content: " ";
  display: table;
}

.clear::after {
  clear: both;
}

.protected-address {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: default;
}

*[hidden] {
  display: none;
}

.relative {
  position: relative;
}

.icon {
  line-height: 0;
}

.gutter + .gutter {
  padding-top: 0;
}

h1, h2, h3, h4, h5, h6, p, table {
  margin: 0;
}
p a, table a {
  display: inline;
}

ul, ol {
  padding: 0 0 0 1px;
  margin: 0;
}
.screen-reader-only, .sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list *:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
}
.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
}
[dir=rtl] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./slick/ajax-loader.gif") center center no-repeat;
}

/* Icons */
@font-face {
  font-family: "slick";
  src: url("./slick/fonts/slick.eot");
  src: url("./slick/fonts/slick.eot?#iefix") format("embedded-opentype"), url("./slick/fonts/slick.woff") format("woff"), url("./slick/fonts/slick.ttf") format("truetype"), url("./slick/fonts/slick.svg#slick") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next {
  position: absolute;
  display: block;
  height: 20px;
  width: 20px;
  line-height: 0px;
  font-size: 0px;
  cursor: pointer;
  background: transparent;
  color: transparent;
  top: 50%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  padding: 0;
  border: none;
  outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  outline: none;
  background: transparent;
  color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}
.slick-prev:before,
.slick-next:before {
  font-family: "slick";
  font-size: 20px;
  line-height: 1;
  color: #fff;
  opacity: 0.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: -25px;
}
[dir=rtl] .slick-prev {
  left: auto;
  right: -25px;
}
.slick-prev:before {
  content: "←";
}
[dir=rtl] .slick-prev:before {
  content: "→";
}

.slick-next {
  right: -25px;
}
[dir=rtl] .slick-next {
  left: -25px;
  right: auto;
}
.slick-next:before {
  content: "→";
}
[dir=rtl] .slick-next:before {
  content: "←";
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.slick-dots li {
  position: relative;
  display: inline-block;
  height: 20px;
  width: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}
.slick-dots li button {
  border: 0;
  background: transparent;
  display: block;
  height: 20px;
  width: 20px;
  outline: none;
  line-height: 0px;
  font-size: 0px;
  color: transparent;
  padding: 5px;
  cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus {
  outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before {
  opacity: 1;
}
.slick-dots li button:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "•";
  width: 20px;
  height: 20px;
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  text-align: center;
  color: #000;
  opacity: 0.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before {
  color: #000;
  opacity: 0.75;
}

.slider-kenburns .slide img {
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.slider-kenburns .slide.slick-active img {
  -webkit-animation: myMove 4.8s 1 linear;
          animation: myMove 4.8s 1 linear;
}

@-webkit-keyframes myMove {
  from {
    -webkit-transform: scale(1.22);
            transform: scale(1.22);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes myMove {
  from {
    -webkit-transform: scale(1.22);
            transform: scale(1.22);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/* PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp > * {
  -webkit-transition: none;
  transition: none;
}

.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none;
}

.pswp * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.pswp img {
  max-width: none;
}

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--open {
  display: block;
}

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in;
}

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1), -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none;
}

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden;
}

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0;
}

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden;
}

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222;
}

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0;
}

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC;
}

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline;
}

/* PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*

	Contents:

	1. Buttons
	2. Share modal and links
	3. Index indicator ("1 of X" counter)
	4. Caption
	5. Loading indicator
	6. Additional styles (root element, top bar, idle state, hidden state, etc.)

*/
/*

	1. Buttons

 */
/* <button> css reset */
.pswp__button {
  width: 44px;
  height: 44px;
  position: relative;
  background: none;
  cursor: pointer;
  overflow: visible;
  -webkit-appearance: none;
  display: block;
  border: 0;
  padding: 0;
  margin: 0;
  float: right;
  opacity: 0.75;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.pswp__button:focus,
.pswp__button:hover {
  opacity: 1;
}

.pswp__button:active {
  outline: none;
  opacity: 0.9;
}

.pswp__button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
.pswp__ui--over-close .pswp__button--close {
  opacity: 1;
}

.pswp__button,
.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  background: url(../img/photoswipe/default-skin-black.svg) 0 0 no-repeat;
  background-size: 264px 88px;
  width: 44px;
  height: 44px;
}

@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
  /* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
  .pswp--svg .pswp__button--arrow--left,
  .pswp--svg .pswp__button--arrow--right {
    background: none;
  }
}
.pswp__button--close {
  background-position: 0 -44px;
}

.pswp__button--share {
  background-position: -44px -44px;
}

.pswp__button--fs {
  display: none;
}

.pswp--supports-fs .pswp__button--fs {
  display: block;
}

.pswp--fs .pswp__button--fs {
  background-position: -44px 0;
}

.pswp__button--zoom {
  display: none;
  background-position: -88px 0;
}

.pswp--zoom-allowed .pswp__button--zoom {
  display: block;
}

.pswp--zoomed-in .pswp__button--zoom {
  background-position: -132px 0;
}

/* no arrows on touch screens */
.pswp--touch .pswp__button--arrow--left,
.pswp--touch .pswp__button--arrow--right {
  visibility: hidden;
}

/*
	Arrow buttons hit area
	(icon is added to :before pseudo-element)
*/
.pswp__button--arrow--left,
.pswp__button--arrow--right {
  background: none;
  top: 50%;
  margin-top: -50px;
  width: 70px;
  height: 100px;
  position: absolute;
}

.pswp__button--arrow--left {
  left: 0;
}

.pswp__button--arrow--right {
  right: 0;
}

.pswp__button--arrow--left:before,
.pswp__button--arrow--right:before {
  content: "";
  top: 35px;
  background-color: #fff;
  height: 30px;
  width: 32px;
  position: absolute;
}

.pswp__button--arrow--left:before {
  left: 6px;
  background-position: -138px -44px;
}

.pswp__button--arrow--right:before {
  right: 6px;
  background-position: -94px -44px;
}

/*

	2. Share modal/popup and links

 */
.pswp__counter,
.pswp__share-modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.pswp__share-modal {
  display: block;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  padding: 10px;
  position: absolute;
  z-index: 1600;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  -webkit-backface-visibility: hidden;
  will-change: opacity;
}

.pswp__share-modal--hidden {
  display: none;
}

.pswp__share-tooltip {
  z-index: 1620;
  position: absolute;
  background: #FFF;
  top: 56px;
  border-radius: 2px;
  display: block;
  width: auto;
  right: 44px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  -webkit-transform: translateY(6px);
  -ms-transform: translateY(6px);
  transform: translateY(6px);
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.pswp__share-tooltip a {
  display: block;
  padding: 8px 12px;
  color: #000;
  text-decoration: none;
  font-size: 14px;
  line-height: 18px;
}

.pswp__share-tooltip a:hover {
  text-decoration: none;
  color: #000;
}

.pswp__share-tooltip a:first-child {
  /* round corners on the first/last list item */
  border-radius: 2px 2px 0 0;
}

.pswp__share-tooltip a:last-child {
  border-radius: 0 0 2px 2px;
}

.pswp__share-modal--fade-in {
  opacity: 1;
}

.pswp__share-modal--fade-in .pswp__share-tooltip {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

/* increase size of share links on touch devices */
.pswp--touch .pswp__share-tooltip a {
  padding: 16px 12px;
}

a.pswp__share--facebook:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -12px;
  right: 15px;
  border: 6px solid transparent;
  border-bottom-color: #FFF;
  -webkit-pointer-events: none;
  -moz-pointer-events: none;
  pointer-events: none;
}

a.pswp__share--facebook:hover {
  background: #3E5C9A;
  color: #FFF;
}

a.pswp__share--facebook:hover:before {
  border-bottom-color: #3E5C9A;
}

a.pswp__share--twitter:hover {
  background: #55ACEE;
  color: #FFF;
}

a.pswp__share--pinterest:hover {
  background: #CCC;
  color: #CE272D;
}

a.pswp__share--download:hover {
  background: #DDD;
}

/*

	3. Index indicator ("1 of X" counter)

 */
.pswp__counter {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  font-size: 13px;
  line-height: 44px;
  color: #000;
  opacity: 0.75;
  padding: 0 10px;
}

/*

	4. Caption

 */
.pswp__caption {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  min-height: 44px;
}

.pswp__caption small {
  font-size: 11px;
  color: #BBB;
}

.pswp__caption__center {
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
  font-size: 14px;
  padding: 10px;
  line-height: 20px;
  color: #585858;
}

.pswp__caption--empty {
  display: none;
}

/* Fake caption element, used to calculate height of next/prev image */
.pswp__caption--fake {
  visibility: hidden;
}

/*

	5. Loading indicator (preloader)

	You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

 */
.pswp__preloader {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -22px;
  opacity: 0;
  -webkit-transition: opacity 0.25s ease-out;
  transition: opacity 0.25s ease-out;
  will-change: opacity;
  direction: ltr;
}

.pswp__preloader__icn {
  width: 20px;
  height: 20px;
  margin: 12px;
}

.pswp__preloader--active {
  opacity: 1;
}

.pswp__preloader--active .pswp__preloader__icn {
  /* We use .gif in browsers that don't support CSS animation */
  background: url(../img/photoswipe/preloader.gif) 0 0 no-repeat;
}

.pswp--css_animation .pswp__preloader--active {
  opacity: 1;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
  -webkit-animation: clockwise 500ms linear infinite;
  animation: clockwise 500ms linear infinite;
}

.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
  -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
  animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
}

.pswp--css_animation .pswp__preloader__icn {
  background: none;
  opacity: 0.75;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 15px;
  top: 15px;
  margin: 0;
}

.pswp--css_animation .pswp__preloader__cut {
  /*
  	The idea of animating inner circle is based on Polymer ("material") loading indicator
  	 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
  */
  position: relative;
  width: 7px;
  height: 14px;
  overflow: hidden;
}

.pswp--css_animation .pswp__preloader__donut {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 2px solid #FFF;
  border-radius: 50%;
  border-left-color: transparent;
  border-bottom-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  margin: 0;
}

@media screen and (max-width: 1024px) {
  .pswp__preloader {
    position: relative;
    left: auto;
    top: auto;
    margin: 0;
    float: right;
  }
}
@-webkit-keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes clockwise {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@-webkit-keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes donut-rotate {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(-140deg);
    transform: rotate(-140deg);
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
}
/*

	6. Additional styles

 */
/* root element of UI */
.pswp__ui {
  -webkit-font-smoothing: auto;
  visibility: visible;
  opacity: 1;
  z-index: 1550;
}

/* top black bar with buttons and "1 of X" indicator */
.pswp__top-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 44px;
  width: 100%;
}

.pswp__caption,
.pswp__top-bar,
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  -webkit-backface-visibility: hidden;
  will-change: opacity;
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
  transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
}

/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
.pswp--has_mouse .pswp__button--arrow--left,
.pswp--has_mouse .pswp__button--arrow--right {
  visibility: visible;
}

.pswp__top-bar,
.pswp__caption {
  background-color: rgba(0, 0, 0, 0.5);
}

/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
.pswp__ui--fit .pswp__top-bar,
.pswp__ui--fit .pswp__caption {
  background-color: #fff;
}

/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
.pswp__ui--idle .pswp__top-bar {
  opacity: 0;
}

.pswp__ui--idle .pswp__button--arrow--left,
.pswp__ui--idle .pswp__button--arrow--right {
  opacity: 0;
}

/*
	pswp__ui--hidden class is added when controls are hidden
	e.g. when user taps to toggle visibility of controls
*/
.pswp__ui--hidden .pswp__top-bar,
.pswp__ui--hidden .pswp__caption,
.pswp__ui--hidden .pswp__button--arrow--left,
.pswp__ui--hidden .pswp__button--arrow--right {
  /* Force paint & create composition layer for controls. */
  opacity: 0.001;
}

/* pswp__ui--one-slide class is added when there is just one item in gallery */
.pswp__ui--one-slide .pswp__button--arrow--left,
.pswp__ui--one-slide .pswp__button--arrow--right,
.pswp__ui--one-slide .pswp__counter {
  display: none;
}

.pswp__element--disabled {
  display: none !important;
}

.pswp--minimal--dark .pswp__top-bar {
  background: none;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
* Cookie Consent Fonts
***************************************************************************************
*/
@font-face {
  font-family: "karlaregular";
  src: url("/site/templates/fonts/cookie-consent/karla-regular.woff2") format("woff2"), url("/site/templates/fonts/cookie-consent/karla-regular.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "karlabold";
  src: url("/site/templates/fonts/cookie-consent/karla-bold.woff2") format("woff2"), url("/site/templates/fonts/cookie-consent/karla-bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}
/**
* Cookie Consent im Footer
***************************************************************************************
*/
.cookie-consent-typ9_open {
  cursor: pointer;
}

/**
* Cookie Consent Settings
***************************************************************************************
*/
/**
* Cookie Consent Overlay
***************************************************************************************
*/
#cookie-consent-typ9_wrapper {
  background-color: rgba(0, 0, 0, 0.3);
}
#cookie-consent-typ9_wrapper .well {
  -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3));
  display: none;
  margin: 1em;
  max-width: 600px;
}
#cookie-consent-typ9_wrapper .well {
  min-height: 20px;
  padding: 35px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.07);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.07);
}
@media (max-width: 450px) {
  #cookie-consent-typ9_wrapper .well {
    padding: 25px;
  }
}
@media (max-width: 380px) {
  #cookie-consent-typ9_wrapper .well {
    padding: 20px;
  }
}
#cookie-consent-typ9_wrapper .well .popup_close {
  position: absolute;
  top: 0;
  right: 6px;
  background: none;
  border: 0;
  font-size: 50px;
  padding: 0 10px;
  color: #676767;
}

/**
* Cookie Consent Content
***************************************************************************************
*/
#cookie-consent-accordion {
  color: #8a8a8a;
}

.cookie-consent-logo {
  width: calc(100% - 60px);
  margin-left: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}
.cookie-consent-logo img {
  width: 70px;
}
@media (max-width: 450px) {
  .cookie-consent-logo img {
    width: 60px;
  }
}

.cookie-consent-headline {
  font-family: "karlabold";
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 4px;
  margin-top: 30px;
  color: #676767;
  font-size: 26px;
  line-height: 28px;
}
@media (max-width: 500px) {
  .cookie-consent-headline {
    font-size: 24px;
    line-height: 26px;
  }
}
@media (max-width: 470px) {
  .cookie-consent-headline {
    font-size: 19px;
    line-height: 21px;
  }
}

.cookie-consent-subheadline {
  font-family: "karlaregular";
  width: 100%;
  margin-bottom: 20px;
  color: #4c4c4c;
  font-size: 18px;
  line-height: 20px;
}
@media (max-width: 500px) {
  .cookie-consent-subheadline {
    font-size: 17px;
    line-height: 19px;
  }
}

.cookie-consent-description {
  font-family: "karlaregular";
  font-size: 16px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg width='30px' height='30px' viewBox='0 0 24 24' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-415.000000, -238.000000)' fill='%23676767'%3E%3Cpath d='M427,238 C425.333325,238 423.776049,238.317707 422.328125,238.95312 C420.880201,239.588547 419.60938,240.447907 418.515625,241.531253 C417.421869,242.614587 416.562503,243.885413 415.9375,245.343747 C415.312497,246.802093 415,248.35416 415,250 C415,251.666675 415.312497,253.22916 415.9375,254.6875 C416.562503,256.14584 417.421869,257.416661 418.515625,258.5 C419.60938,259.583339 420.880201,260.437497 422.328125,261.0625 C423.776049,261.687503 425.333325,262 427,262 C428.66668,262 430.223947,261.687503 431.67188,261.0625 C433.1198,260.437497 434.390613,259.583339 435.484373,258.5 C436.578133,257.416661 437.437493,256.14584 438.062507,254.6875 C438.687507,253.22916 439,251.666675 439,250 C439,249.666665 438.984373,249.333335 438.95312,249 C438.92188,248.666667 438.875,248.333333 438.812507,248 C438.645827,247.666667 438.411453,247.47396 438.109373,247.42188 C437.807293,247.369787 437.656253,247.343747 437.656253,247.343747 L435,247.343747 L435,246 C435,245.333333 434.77604,244.94792 434.32812,244.843747 C433.8802,244.739587 433.656253,244.687493 433.656253,244.687493 L431,244.687493 L431,243.343747 C431,242.67708 430.77604,242.286453 430.32812,242.17188 C429.8802,242.057293 429.656253,242 429.656253,242 L428.343747,242 L428.343747,239.343747 C428.343747,238.67708 428.119793,238.286453 427.671875,238.17188 C427.223956,238.057293 427,238 427,238 Z M423.5,241 C424.203128,241 424.79557,241.2474 425.277343,241.742183 C425.759117,242.236983 426,242.822917 426,243.5 C426,244.203133 425.759117,244.795567 425.277343,245.27735 C424.79557,245.759117 424.203128,246 423.5,246 C422.822912,246 422.23698,245.759117 421.742187,245.27735 C421.247393,244.795567 421,244.203133 421,243.5 C421,242.822917 421.247393,242.236983 421.742187,241.742183 C422.23698,241.2474 422.822912,241 423.5,241 Z M418.5,247 C419.203128,247 419.79557,247.240883 420.277343,247.722666 C420.759117,248.204433 421,248.796874 421,249.5 C421,250.203131 420.759117,250.795572 420.277343,251.277345 C419.79557,251.759118 419.203128,252 418.5,252 C417.822912,252 417.23698,251.759118 416.742187,251.277345 C416.247393,250.795572 416,250.203131 416,249.5 C416,248.796874 416.247393,248.204433 416.742187,247.722666 C417.23698,247.240883 417.822912,247 418.5,247 Z M426.5,248 C427.17709,248 427.763023,248.240883 428.257816,248.722657 C428.75261,249.20443 429,249.796872 429,250.5 C429,251.177087 428.75261,251.763018 428.257816,252.257812 C427.763023,252.752607 427.17709,253 426.5,253 C425.796873,253 425.204431,252.752607 424.722657,252.257812 C424.240883,251.763018 424,251.177087 424,250.5 C424,249.796872 424.240883,249.20443 424.722657,248.722657 C425.204431,248.240883 425.796873,248 426.5,248 Z M433.5,252 C434.203133,252 434.795567,252.240883 435.27735,252.722657 C435.759117,253.20443 436,253.796872 436,254.5 C436,255.20313 435.759117,255.795572 435.27735,256.277345 C434.795567,256.759118 434.203133,257 433.5,257 L433.5,257 C432.796867,257 432.204433,256.759118 431.72265,256.277345 C431.240883,255.795572 431,255.20313 431,254.5 L431,254.5 C431,253.796872 431.240883,253.20443 431.72265,252.722657 C432.204433,252.240883 432.796867,252 433.5,252 Z M426.5,255 C427.203128,255 427.79557,255.240883 428.277343,255.722657 C428.759117,256.20443 429,256.796872 429,257.5 C429,258.20313 428.759117,258.795572 428.277343,259.277345 C427.79557,259.759118 427.203128,260 426.5,260 C425.822912,260 425.23698,259.759118 424.742187,259.277345 C424.247393,258.795572 424,258.20313 424,257.5 C424,256.796872 424.247393,256.20443 424.742187,255.722657 C425.23698,255.240883 425.822912,255 426.5,255 Z' id='Fill-1' transform='translate(427.000000, 250.000000) rotate(180.000000) translate(-427.000000, -250.000000) '%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 2px 5px;
  padding-left: 56px;
  margin-bottom: 25px;
  color: #8a8a8a;
  line-height: 17px;
}

.cookie-consent-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
  margin-bottom: 40px;
}
@media (max-width: 550px) {
  .cookie-consent-buttons {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.cookie-consent-buttons .cookie-consent-btn-left, .cookie-consent-buttons .cookie-consent-btn-right {
  font-family: "karlaregular";
  font-size: 16px;
  width: 45%;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
}
@media (max-width: 550px) {
  .cookie-consent-buttons .cookie-consent-btn-left, .cookie-consent-buttons .cookie-consent-btn-right {
    width: 100%;
  }
}
.cookie-consent-buttons .cookie-consent-btn-left {
  cursor: pointer;
  color: #ffffff;
  background-color: #00914d;
}
@media (max-width: 550px) {
  .cookie-consent-buttons .cookie-consent-btn-left {
    margin-bottom: 10px;
  }
}
.cookie-consent-buttons .cookie-consent-btn-left label {
  cursor: pointer;
}
.cookie-consent-buttons .cookie-consent-btn-right {
  cursor: pointer;
  background-color: #dddfdd;
  color: #676767;
}
.cookie-consent-buttons .cookie-consent-btn-right:hover {
  background-color: rgb(199.9818181818, 203.2181818182, 199.9818181818);
}

.cookie-consent-trigger {
  cursor: pointer;
}

.cookie-consent-trigger_active {
  color: #333;
}
.cookie-consent-trigger_active svg {
  -webkit-transform: rotate(-180deg);
      -ms-transform: rotate(-180deg);
          transform: rotate(-180deg);
}
.cookie-consent-trigger_active svg #Artboard {
  fill: #d7d7d7;
}

.toggle_container {
  font-family: "karlaregular";
  font-size: 16px;
  width: 100%;
  display: inline-block;
  margin-top: -20px;
  margin-bottom: 30px;
}

.cookie-consent-toggle-container-inner {
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 2px solid #00914d;
  border-bottom: 2px solid #00914d;
  margin-bottom: 15px;
  line-height: 17px;
}
.cookie-consent-toggle-container-inner .cookie-consent-info span {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 10px;
  font-family: "karlabold";
  text-transform: uppercase;
  color: #4c4c4c;
}
.cookie-consent-toggle-container-inner .cookie-consent-info ul li {
  list-style: none;
  position: relative;
  display: block;
  float: none;
  margin-top: 0;
  margin-bottom: 5px;
  padding-left: 12px;
  color: #4c4c4c;
}
.cookie-consent-toggle-container-inner .cookie-consent-info ul li::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 5px;
  height: 5px;
  background-color: #4c4c4c;
  border-radius: 100px;
}

.cookie-consent-label {
  width: calc(100% - 40px);
  float: left;
  margin-bottom: 30px;
}

.cookie-consent-trigger {
  width: 35px;
  height: 40px;
  float: left;
}
.cookie-consent-trigger img {
  margin-left: 8px;
}

.cookie-consent-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}
.cookie-consent-title label {
  font-family: "karlabold";
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-left: 15px;
  font-size: 18px;
  line-height: 17px;
}
@media (max-width: 450px) {
  .cookie-consent-title label {
    font-size: 17px;
  }
}
.cookie-consent-title label span {
  display: inline-block;
  padding-left: 25px;
  width: calc(100% - 25px);
  margin-top: -2px;
}

.cookie-consent-text {
  font-family: "karlaregular";
  font-size: 16px;
  width: 100%;
  padding-left: 60px;
  line-height: 17px;
}

.cookie-consent-footer {
  height: 20px;
  width: 100%;
  font-family: "karlaregular";
  font-size: 16px;
  color: #8a8a8a;
  margin-top: 15px;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: stretch;
      align-content: stretch;
}
.cookie-consent-footer a {
  color: #8a8a8a;
}
.cookie-consent-footer div {
  height: 20px;
  border-right: 1px solid #8a8a8a;
  margin-right: 3px;
  margin-left: 7px;
}

/**
* Config checkbox
***************************************************************************************
*/
.check {
  cursor: pointer;
  position: relative;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.check.necessary {
  cursor: default;
}

.check:before {
  content: "";
  position: absolute;
  top: -14px;
  left: 1px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(34, 50, 84, 0.05);
  opacity: 1;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}

.check svg {
  position: relative;
  z-index: 1;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: #8a8a8a;
  stroke-width: 1.5;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.check svg path {
  stroke-dasharray: 60;
  stroke-dashoffset: 0;
}

.check svg polyline {
  stroke-dasharray: 22;
  stroke-dashoffset: 66;
}

.check:hover:before {
  opacity: 1;
  background-color: #dddfdd;
}
.check:hover:before.necessary {
  background: rgba(34, 50, 84, 0.05);
}

.check:hover svg {
  stroke: #00a860;
}

#gdpr-cookietype-necessary:checked + .check svg {
  stroke: #00a860;
}

#gdpr-cookietype-necessary:checked + .check svg path {
  stroke-dashoffset: 60;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#gdpr-cookietype-necessary:checked + .check svg polyline {
  stroke-dashoffset: 42;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

#gdpr-cookietype-analytic:checked + .check svg {
  stroke: #00a860;
}

#gdpr-cookietype-analytic:checked + .check svg path {
  stroke-dashoffset: 60;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#gdpr-cookietype-analytic:checked + .check svg polyline {
  stroke-dashoffset: 42;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

#gdpr-cookietype-media:checked + .check svg {
  stroke: #00a860;
}

#gdpr-cookietype-media:checked + .check svg path {
  stroke-dashoffset: 60;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#gdpr-cookietype-media:checked + .check svg polyline {
  stroke-dashoffset: 42;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

/*************************************************************************************
Hover Effect dotted Underline
*/
.cookie-consent-dotted-effect {
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

.cookie-consent-dotted-effect::before {
  position: relative;
  top: 13px;
  left: 50%;
  color: transparent;
  content: "·";
  text-shadow: 0 0 transparent;
  -webkit-transition: text-shadow 0.3s, color 0.3s;
  transition: text-shadow 0.3s, color 0.3s;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  pointer-events: none;
}

.cookie-consent-dotted-effect:hover::before,
.cookie-consent-dotted-effect:focus::before {
  color: #8a8a8a;
  text-shadow: 10px 0 #8a8a8a, -10px 0 #8a8a8a;
}

.cookie-consent-dotted-effect:hover,
.cookie-consent-dotted-effect:focus {
  color: #8a8a8a;
}

/*************************************************************************************
Youtube Ersatz-Container wenn Zustimmung nicht erteilt
*/
.embed-container {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.embed-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.embed-button-container {
  cursor: pointer;
  display: inline;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

.MedienContainerOuter {
  position: relative;
  width: 100%;
  display: inline-block;
  padding-bottom: 56.25%;
  height: 0;
}

.embed-button-container .mapButtom {
  width: 60px;
}
.embed-button-container .mapButtom .mapPointerVerlauf .top-color {
  stop-color: rgba(229, 45, 39, 0.85);
}
.embed-button-container .mapButtom .mapPointerVerlauf .bottom-color {
  stop-color: rgba(142, 42, 37, 0.85);
}
.embed-button-container .YouTubePlayButtom {
  width: 70px;
}
.embed-button-container .YouTubePlayButtom .youtubeButtomVerlauf .top-color {
  stop-color: rgba(229, 45, 39, 0.85);
}
.embed-button-container .YouTubePlayButtom .youtubeButtomVerlauf .bottom-color {
  stop-color: rgba(142, 42, 37, 0.85);
}

.embed-button-container:hover .mapButtom .mapPointerVerlauf .top-color {
  stop-color: #E52D27;
}
.embed-button-container:hover .mapButtom .mapPointerVerlauf .bottom-color {
  stop-color: #b72c26;
}
.embed-button-container:hover .YouTubePlayButtom .youtubeButtomVerlauf .top-color {
  stop-color: #E52D27;
}
.embed-button-container:hover .YouTubePlayButtom .youtubeButtomVerlauf .bottom-color {
  stop-color: #b72c26;
}

/*************************************************************************************
Youtube Ersatz-Container wenn Zustimmung nicht erteilt
*/
iframe[src*="http://www.youtube.com/embed/"], iframe[src*="http://www.youtube-nocookie.com/embed/"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*************************************************************************************
Warnungs wenn keine Cookiegesetzt ist
*/
.warning {
  display: inline-block;
  position: relative;
  padding: 3px 2px 2px 2px;
  -webkit-transition: all 250ms;
  transition: all 250ms;
  z-index: 1000;
}
.warning:before {
  content: "";
  z-index: -1;
  width: calc(100% - 30px);
  height: 100%;
  background: #f5f5f7;
  bottom: 0;
  left: 20px;
  position: absolute;
  -webkit-transition: height 250ms;
  transition: height 250ms;
}
.warning:before:hover {
  background: #ddd3d1;
}
.warning:after {
  content: "";
  z-index: -1;
  width: 4px;
  height: 100%;
  background: red;
  bottom: 0;
  right: 10px;
  position: absolute;
  -webkit-transition: height 250ms;
  transition: height 250ms;
}

.warning:hover:before {
  background: #dddfdd;
}

/***** (5) **********************************
Alle internen Styles des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/***** (2) **********************************
Alle Mixins des Projekts
*/
.wrapper.clear {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.wrapper.clear::after, .wrapper.clear::before {
  display: none;
}

.abstand {
  margin-top: min(130px, 20vw);
  margin-bottom: min(130px, 20vw);
}

.columns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.cursor {
  cursor: pointer;
}

.two-columns {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.two-columns .column {
  width: calc(50% - 80px);
}
@media (max-width: 1200px) {
  .two-columns .column {
    width: calc(50% - 40px);
  }
}
@media (max-width: 900px) {
  .two-columns {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .two-columns .column {
    width: 100%;
  }
  .two-columns .column + .column {
    margin-top: 1rem;
  }
}

.two-columns-2-1 {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.two-columns-2-1 .column-2 {
  width: 878px;
  max-width: 100%;
}

h2 + .two-columns, h2 + .two-columns-2-1, h3 + .two-columns, h3 + .two-columns-2-1 {
  margin-top: 2rem;
}

p.bigger + h3 {
  margin-top: 0;
}

h5 + h1 {
  margin-top: 0.8rem;
}

.content-bg {
  padding: 1.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
}
.content-bg.kasten {
  position: relative;
  margin-top: calc(2rem + 30px);
  border: 1px solid #585858;
}
.content-bg.kasten::before {
  content: "";
  position: absolute;
  top: calc(-2rem - 30px);
  left: 0;
  width: 30px;
  height: 30px;
  background-image: url("../img/Pfeil-blau-unten.svg");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}
@media (max-width: 500px) {
  .content-bg {
    padding: 1.4rem 0.5rem;
  }
}

.content-elem + .content-elem {
  margin-top: 1.8rem;
}

.content-elem.column-image {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.column .content-elem.column-image {
  max-width: 575px;
}

.blaufaerbung, .gruenfaerbung {
  position: relative;
}
.blaufaerbung img, .gruenfaerbung img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}
.blaufaerbung::after, .gruenfaerbung::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
}

.blaufaerbung::after {
  background-color: #2732CF;
}

.gruenfaerbung::after {
  background-color: #00943C;
}

.oeffnungszeiten {
  display: inline-grid;
  grid-template-columns: auto auto;
  gap: 1rem;
  row-gap: 0.1rem;
}

.schlagworte {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  row-gap: 3rem;
  -ms-flex-pack: distribute;
      justify-content: space-around;
}
.schlagworte.schlagworte-kreis {
  margin-top: 5rem;
  margin-bottom: 5rem;
  row-gap: 1rem;
}
.schlagworte .schlagwort {
  padding: 0.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  text-align: center;
}
.schlagworte .schlagwort.schlagwort-1 {
  color: #F71663;
}
.schlagworte .schlagwort.schlagwort-2 {
  color: #12F1F4;
}
.schlagworte .schlagwort.schlagwort-3 {
  color: #00F966;
}
.schlagworte .schlagwort-kreis {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 280px;
  height: 280px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 150px;
  border: 1px solid #585858;
}
.schlagworte .schlagwort-kreis h4 + p {
  margin-top: 0.8rem;
}
.schlagworte.in-view .schlagwort-1 {
  opacity: 1;
  -webkit-animation: appear-animation-1 1s 1;
          animation: appear-animation-1 1s 1;
}
.schlagworte.in-view .schlagwort-2 {
  opacity: 1;
  -webkit-animation: appear-animation-2 1.3s 1;
          animation: appear-animation-2 1.3s 1;
}
.schlagworte.in-view .schlagwort-3 {
  opacity: 1;
  -webkit-animation: appear-animation-3 1.6s 1;
          animation: appear-animation-3 1.6s 1;
}
@media (max-width: 650px) {
  .schlagworte .schlagwort-kreis {
    width: 200px;
    height: 200px;
  }
}
@media (max-width: 480px) {
  .schlagworte.schlagworte-kreis {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .schlagworte.schlagworte-kreis {
    row-gap: 3rem;
  }
}

.content-bg + .faktenkacheln {
  margin-top: 2rem;
}

.faktenkacheln {
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr 1fr;
}
.faktenkacheln .faktenkachel {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  padding: calc(40px + 2rem) 0.8rem 1rem;
  background-image: url("../img/Pfeil-Kreis.svg");
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: top 1rem left 0.8rem;
  border-radius: var(--border-radius);
}
.faktenkacheln .faktenkachel.rahmen {
  padding: 1.6rem 1rem 1rem;
  background-image: unset;
  border: 1px solid #585858;
  color: #585858;
}
.faktenkacheln a.faktenkachel {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.faktenkacheln a.faktenkachel .button {
  border: unset;
  background-color: unset;
}
.faktenkacheln a.faktenkachel:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}
.faktenkacheln a.faktenkachel:hover .button {
  background-color: #3B0EDB;
  color: #fff;
  background-image: url("../img/Pfeil-weiss-schraeg.svg");
}
.faktenkacheln a.faktenkachel.rahmen:hover {
  border-color: transparent;
}
@media (max-width: 800px) {
  .faktenkacheln {
    gap: 2rem;
    grid-template-columns: 1fr;
  }
}
@media (max-width: 500px) {
  .faktenkacheln .faktenkachel {
    padding: calc(40px + 2rem) 0.5rem 1rem;
    background-position: top 1rem left 0.5rem;
  }
}

@-webkit-keyframes appear-animation-1 {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  40% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  70% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

@keyframes appear-animation-1 {
  0% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  40% {
    -webkit-transform: translateX(-200px);
            transform: translateX(-200px);
    opacity: 0;
  }
  70% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@-webkit-keyframes appear-animation-2 {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  77% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes appear-animation-2 {
  0% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  54% {
    -webkit-transform: translateY(-200px);
            transform: translateY(-200px);
    opacity: 0;
  }
  77% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@-webkit-keyframes appear-animation-3 {
  0% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
    opacity: 0;
  }
  62% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
    opacity: 0;
  }
  81% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes appear-animation-3 {
  0% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
    opacity: 0;
  }
  62% {
    -webkit-transform: translateX(200px);
            transform: translateX(200px);
    opacity: 0;
  }
  81% {
    -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
.mitglied-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
}
.mitglied-grid .mitglied-bild img {
  border-radius: 200px;
  width: 380px;
  height: auto;
  max-width: 100%;
}
.mitglied-grid .mitglied-text {
  padding: 1.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
}
.mitglied-grid .mitglied-text h1 {
  line-height: 1.2;
  font-weight: 800;
  margin-top: -8.4px;
  margin-bottom: -8.4px;
}
.mitglied-grid .mitglied-text h1 {
  font-size: 30px;
}
@media (min-width: 400px) {
  .mitglied-grid .mitglied-text h1 {
    font-size: calc(30px + 12 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  .mitglied-grid .mitglied-text h1 {
    font-size: 42px;
  }
}
.mitglied-grid .mitglied-text h2 {
  line-height: 1.2;
  font-weight: 400;
  margin-top: -8.4px;
  margin-bottom: -8.4px;
}
.mitglied-grid .mitglied-text h2 {
  font-size: 24px;
}
@media (min-width: 400px) {
  .mitglied-grid .mitglied-text h2 {
    font-size: calc(24px + 18 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  .mitglied-grid .mitglied-text h2 {
    font-size: 42px;
  }
}
.mitglied-grid .mitglied-text h1 + h2 {
  margin-top: 0.4rem;
}
@media (max-width: 1000px) {
  .mitglied-grid {
    gap: 2rem;
  }
  .mitglied-grid .mitglied-bild img {
    width: 250px;
  }
}
@media (max-width: 820px) {
  .mitglied-grid {
    grid-template-columns: auto;
  }
  .mitglied-grid .mitglied-text {
    padding: 1.4rem 0.5rem;
  }
}

.content-bg + .mitglieder-visitenkarten, .content-bg + .content-bg, .content-bg + .two-columns, .content-bg + a.button, .mitglieder-visitenkarten + .mitglieder-visitenkarten, .mitglieder-visitenkarten + .content-bg, .mitglieder-visitenkarten + .two-columns, .mitglieder-visitenkarten + a.button, .two-columns + .mitglieder-visitenkarten, .two-columns + .content-bg, .two-columns + .two-columns, .two-columns + a.button {
  margin-top: 2rem;
}

.mitglieder-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 2rem;
}

.mitglieder-fotos-big {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
.mitglieder-fotos-big .mitglied-grid-big {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
.mitglieder-fotos-big .mitglied-grid-big .mitglied-bild img {
  width: 100%;
  max-width: 415px;
  border-radius: var(--border-radius);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.mitglieder-fotos-big .mitglied-grid-big .mitglied-bild:hover img {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  background-size: 25px 25px;
}
.mitglieder-fotos-big .mitglied-grid-big .mitglied-text {
  padding: 0 0.8rem 0.8rem 0.8rem;
}
@media (max-width: 1030px) {
  .mitglieder-fotos-big {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 700px) {
  .mitglieder-fotos-big {
    grid-template-columns: 1fr;
  }
  .mitglieder-fotos-big .mitglied-grid-big .mitglied-bild img {
    max-width: 300px;
  }
}

.mitglieder-visitenkarten {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte {
  background-color: #fff;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  border: 1px solid #585858;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-columns: 38fr 62fr;
  grid-template-areas: "bild name" "text text" "logo logo";
  gap: 2rem;
  padding: 1.6rem;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-image: url("../img/Pfeil-blau-schraeg.svg");
  background-position: bottom 1rem right 1rem;
  background-size: 20px 20px;
  background-repeat: no-repeat;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-bild {
  grid-area: bild;
  width: 100%;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-bild img {
  border-radius: 200px;
  width: 100%;
  height: auto;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-name, .mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-text, .mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-logo {
  color: #585858;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-name {
  grid-area: name;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-text {
  max-width: 485px;
  grid-area: text;
  overflow: hidden;
  height: 9.5em;
  position: relative;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em;
  background: -webkit-gradient(linear, left bottom, left top, from(#fff), to(transparent));
  background: linear-gradient(to top, #fff, transparent);
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-logo {
  grid-area: logo;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-logo img {
  width: 230px;
  height: 66px;
  max-width: calc(100% - 20px);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
.mitglieder-visitenkarten a.mitglied-visitenkarte:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  background-size: 25px 25px;
  border-color: #fff;
}
@media (max-width: 900px) {
  .mitglieder-visitenkarten {
    grid-template-columns: auto;
  }
  .mitglieder-visitenkarten a.mitglied-visitenkarte {
    max-width: 640px;
  }
}
@media (max-width: 400px) {
  .mitglieder-visitenkarten a.mitglied-visitenkarte {
    grid-template-columns: 1fr;
    grid-template-areas: "bild" "name" "text" "logo";
  }
  .mitglieder-visitenkarten a.mitglied-visitenkarte .mitglied-bild {
    max-width: 100px;
  }
}

.two-columns + .mitglieder-filter {
  margin-top: 1rem;
}

.mitglieder-filter {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 1rem;
}
.mitglieder-filter a.mitglied {
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
.mitglieder-filter a.mitglied .vorderseite {
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  height: 100%;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  grid-template-columns: 38fr 62fr;
  grid-template-areas: "bild name";
  gap: 1rem;
  padding: 1rem;
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
  z-index: 1;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.mitglieder-filter a.mitglied .vorderseite .mitglied-bild {
  grid-area: bild;
  width: 100%;
}
.mitglieder-filter a.mitglied .vorderseite .mitglied-bild img {
  border-radius: 200px;
  width: 100%;
  height: auto;
}
.mitglieder-filter a.mitglied .vorderseite .mitglied-name {
  color: #585858;
}
.mitglieder-filter a.mitglied .vorderseite .mitglied-name {
  grid-area: name;
}
.mitglieder-filter a.mitglied .rueckseite {
  background-color: #fff;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  -webkit-transform: rotateX(-180deg);
          transform: rotateX(-180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.mitglieder-filter a.mitglied .rueckseite .mitglied-logo {
  grid-area: logo;
  color: #585858;
  width: 230px;
  height: 66px;
  max-width: 100%;
}
.mitglieder-filter a.mitglied .rueckseite .mitglied-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center center;
     object-position: center center;
}
.mitglieder-filter a.mitglied.mitglied-0:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-0.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-1:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-1.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-2:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-2.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-3:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-3.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-4:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-4.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-5:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-5.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-6:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-6.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-7:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-7.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-8:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-8.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-9:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-9.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-10:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-10.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-11:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-11.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-12:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-12.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-13:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-13.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-14:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-14.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-15:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-15.anim .vorderseite, .mitglieder-filter a.mitglied.mitglied-16:hover .vorderseite, .mitglieder-filter a.mitglied.mitglied-16.anim .vorderseite {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
.mitglieder-filter a.mitglied.mitglied-0:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-0.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-1:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-1.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-2:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-2.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-3:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-3.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-4:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-4.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-5:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-5.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-6:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-6.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-7:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-7.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-8:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-8.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-9:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-9.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-10:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-10.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-11:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-11.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-12:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-12.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-13:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-13.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-14:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-14.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-15:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-15.anim .rueckseite, .mitglieder-filter a.mitglied.mitglied-16:hover .rueckseite, .mitglieder-filter a.mitglied.mitglied-16.anim .rueckseite {
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}
@media (max-width: 1350px) {
  .mitglieder-filter {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .mitglieder-filter a.mitglied .vorderseite {
    grid-template-columns: min(33%, 90px) 1fr;
  }
}
@media (max-width: 940px) {
  .mitglieder-filter {
    grid-template-columns: 1fr 1fr;
  }
  .mitglieder-filter a.mitglied .vorderseite {
    grid-template-columns: min(33%, 75px) 1fr;
  }
}
@media (max-width: 605px) {
  .mitglieder-filter a.mitglied .vorderseite {
    grid-template-columns: auto;
    grid-template-areas: "bild" "name";
  }
  .mitglieder-filter a.mitglied .vorderseite .mitglied-bild img {
    max-width: 100px;
  }
}
@media (max-width: 405px) {
  .mitglieder-filter {
    grid-template-columns: 1fr;
  }
}

@-webkit-keyframes anim-0 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  55% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  60% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  65% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}

@keyframes anim-0 {
  0% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  50% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  55% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  60% {
    -webkit-transform: rotateX(180deg);
            transform: rotateX(180deg);
  }
  65% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
  100% {
    -webkit-transform: rotateX(0deg);
            transform: rotateX(0deg);
  }
}
a.mitglied-grid-small {
  padding: 0.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: auto;
  gap: 1rem;
  justify-items: center;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
a.mitglied-grid-small .mitglied-bild img {
  border-radius: 200px;
  width: 250px;
  height: auto;
  max-width: 100%;
}
a.mitglied-grid-small .mitglied-text, a.mitglied-grid-small .mitglied-logo {
  color: #585858;
  text-align: center;
}
a.mitglied-grid-small .mitglied-logo {
  width: 280px;
  height: 56px;
  max-width: 100%;
}
a.mitglied-grid-small .mitglied-logo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
a.mitglied-grid-small:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}

.mitglied-grid-mini {
  display: grid;
  grid-template-columns: auto;
  gap: 1rem;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.mitglied-grid-mini .mitglied-bild img {
  border-radius: 200px;
  width: 230px;
  height: auto;
  max-width: 100%;
}
.mitglied-grid-mini .mitglied-text {
  color: #585858;
  text-align: center;
  width: 230px;
  max-width: 100%;
  padding: 0.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
}

.zitat-box {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1.8rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  border: 1px solid #585858;
}
.zitat-box .zitat-text {
  position: relative;
  padding: 0 7rem 0 8rem;
}
.zitat-box .zitat-text::before, .zitat-box .zitat-text::after {
  content: "";
  position: absolute;
  width: 6rem;
  height: 6rem;
  background-size: contain;
  background-repeat: no-repeat;
}
.zitat-box .zitat-text::before {
  top: 0.2rem;
  left: 0;
  background-image: url("../img/Anfuehrungszeichen-oben.svg");
  background-position: top left;
}
.zitat-box .zitat-text::after {
  bottom: 0.2rem;
  right: 0;
  background-image: url("../img/Anfuehrungszeichen-unten.svg");
  background-position: bottom right;
}
.zitat-box a.mitglied-grid-small {
  background-color: unset;
  -webkit-backdrop-filter: unset;
          backdrop-filter: unset;
}
@media (max-width: 1200px) {
  .zitat-box {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .zitat-box .zitat-autor .mitglied-bild img {
    width: 100px;
  }
}
@media (max-width: 700px) {
  .zitat-box .zitat-text {
    padding: 7rem 0;
  }
}
@media (max-width: 500px) {
  .zitat-box {
    justify-items: center;
  }
  .zitat-box .zitat-text {
    padding: 5rem 0;
  }
  .zitat-box .zitat-text::before, .zitat-box .zitat-text::after {
    width: 4rem;
    height: 4rem;
  }
}

.firmenlogo {
  width: calc(400px + 2.8rem);
  max-width: 100%;
  height: calc(80px + 1.6rem);
  padding: 0.8rem 1.4rem;
  background-color: #fff;
  border-radius: var(--border-radius);
}
.firmenlogo img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: left center;
     object-position: left center;
}

.firmenlogo + .two-columns {
  margin-top: 2rem;
}

.blog-teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.blog-teasers a.blog-teaser {
  position: relative;
  border: 1px solid #585858;
  padding: calc(3rem + 35px) 1rem calc(2rem + 20px) 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  color: #585858;
  background-image: url("../img/icon-blog.svg"), url("../img/Pfeil-blau-schraeg.svg");
  background-position: top 1rem left 1rem, bottom 1rem right 1rem;
  background-size: 41px 35px, 20px 20px;
  background-repeat: no-repeat, no-repeat;
}
.blog-teasers a.blog-teaser p + h4 {
  margin-top: 0;
}
.blog-teasers a.blog-teaser:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  background-size: 41px 35px, 25px 25px;
  border-color: transparent;
}
@media (max-width: 800px) {
  .blog-teasers {
    grid-template-columns: 1fr;
  }
}

.content-bg + .interview-teasers, .interview-teasers + p {
  margin-top: 2rem;
}

.interview-teasers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
}
.interview-teasers a.interview-teaser {
  position: relative;
  border: 1px solid #585858;
  padding: 1rem 1rem calc(2rem + 20px) 1rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  color: #585858;
  background-image: url("../img/icon-interview.svg"), url("../img/Pfeil-blau-schraeg.svg");
  background-position: top 1rem left 1rem, bottom 1rem right 1rem;
  background-size: 41px 35px, 20px 20px;
  background-repeat: no-repeat, no-repeat;
}
.interview-teasers a.interview-teaser .mitglied-bild {
  justify-self: end;
  -ms-flex-item-align: start;
      align-self: start;
}
.interview-teasers a.interview-teaser .mitglied-bild img {
  width: 125px;
  height: 125px;
  border-radius: 100px;
  max-width: 100%;
}
.interview-teasers a.interview-teaser p + h4, .interview-teasers a.interview-teaser h4 + p {
  margin-top: 0;
}
.interview-teasers a.interview-teaser:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  background-size: 41px 35px, 25px 25px;
  border-color: transparent;
}
@media (max-width: 800px) {
  .interview-teasers {
    grid-template-columns: auto;
  }
}

a.pfeil, i.pfeil {
  color: #585858;
  padding-left: 1.4em;
  position: relative;
}
a.pfeil::before, i.pfeil::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1em;
  height: 100%;
  background-image: url("../img/Pfeil-Kreis.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
}

a.pfeil {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  margin-right: 0.4em;
}
a.pfeil::before {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
a.pfeil:hover {
  padding-left: 1.8em;
  margin-right: 0;
}
a.pfeil:hover::before {
  rotate: -45deg;
}

.event-wall {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
}
.event-wall .event-teaser {
  position: relative;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.event-wall .event-teaser .event-bild {
  position: relative;
}
.event-wall .event-teaser .event-bild img {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.event-wall .event-teaser .event-text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 1rem;
  color: #2732CF;
  border-top-right-radius: var(--border-radius);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.event-wall .event-teaser .event-text.gruen {
  color: #00943C;
}
.event-wall .event-teaser.event-teaser-0 {
  grid-area: 1/1/3/3;
}
.event-wall .event-teaser:hover {
  -webkit-box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 13px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
}
.event-wall .event-teaser:hover .event-text {
  background-color: #2732CF;
  color: #fff;
}
.event-wall .event-teaser:hover .event-text.gruen {
  background-color: #00943C;
  color: #fff;
}
@media (max-width: 1200px) {
  .event-wall .event-teaser .event-text {
    padding: 0.5rem;
  }
}
@media (max-width: 900px) {
  .event-wall {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .event-wall .event-teaser.event-teaser-0 {
    max-width: 500px;
    grid-area: 1/1/2/3;
  }
}
@media (max-width: 500px) {
  .event-wall {
    grid-template-columns: 1fr;
  }
  .event-wall .event-teaser.event-teaser-0 {
    max-width: 100%;
    grid-area: unset;
  }
}

body.mobile .event-wall .event-teaser .event-text {
  background-color: #2732CF;
  color: #fff;
}
body.mobile .event-wall .event-teaser .event-text.gruen {
  background-color: #00943C;
  color: #fff;
}

#mitglieder-suche {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 2rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding: 1.4rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: var(--border-radius);
  /* Barrierefreies Styling für Radio-Buttons */
  /* Wir erhöhen den Kontrast und die Sichtbarkeit */
  /* Der benutzerdefinierte Stil für den ausgewählten Zustand */
  /* Fokus-Zustand für Tastaturnavigation */
  /* Erhöhter Kontrast für Text-Labels */
  /* Für ältere Browser, die accent-color nicht unterstützen, einen Fallback bieten */
  /* Container für das gesamte Suchfeld */
  /* Container für das Lupen-Icon */
  /* Wrapper für Input und Unterstrich */
  /* Das eigentliche Eingabefeld */
  /* Der Unterstrich unter dem Eingabefeld */
  /* Unterstrich-Hervorhebung bei Fokus für bessere visuelle Rückmeldung */
  /* Stärkerer Kontrast für den Placeholder-Text */
  /* Tastatur-Fokus-Stil, sichtbar aber nicht aufdringlich */
  /* Für bessere Darstellung auf kleinen Bildschirmen */
}
#mitglieder-suche .radio-group .radio-option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 1rem;
}
#mitglieder-suche .radio-group.ausblenden {
  display: none;
}
#mitglieder-suche input[type=radio] {
  /* Grundformat beibehalten für Screenreader und Tastaturfokus */
  width: 20px;
  height: 20px;
  vertical-align: middle;
  cursor: pointer;
  position: relative;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
#mitglieder-suche input[type=radio]:checked {
  accent-color: #F71663; /* Rote Farbe bei Auswahl (funktioniert in modernen Browsern) */
}
#mitglieder-suche input[type=radio]:focus {
  accent-color: rgb(161.4564315353, 5.5435684647, 58.9004149378);
}
#mitglieder-suche .radio-option label {
  cursor: pointer;
  vertical-align: middle;
}
@supports not (accent-color: #F71663) {
  #mitglieder-suche input[type=radio] {
    border: 1px solid #666;
    border-radius: 50%;
    background-color: white;
  }
  #mitglieder-suche input[type=radio]:checked {
    border: 1px solid #F71663;
    -webkit-box-shadow: inset 0 0 0 4px white, inset 0 0 0 10px #F71663;
            box-shadow: inset 0 0 0 4px white, inset 0 0 0 10px #F71663;
  }
}
#mitglieder-suche .search-container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  max-width: 300px;
}
#mitglieder-suche .search-icon {
  position: absolute;
  left: 4px;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  width: 20px;
  height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#mitglieder-suche .search-icon img {
  width: 16px;
  height: 16px;
}
#mitglieder-suche .input-wrapper {
  position: relative;
  width: 100%;
}
#mitglieder-suche #suchbegriff {
  width: 100%;
  border: none;
  background: transparent;
  padding: 8px 0 8px 28px; /* Platz für das Icon links */
  outline: none;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
#mitglieder-suche .input-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #585858;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
#mitglieder-suche #suchbegriff:focus + .input-underline {
  height: 2px;
  background-color: #F71663;
}
#mitglieder-suche #suchbegriff::-webkit-input-placeholder {
  color: #666;
  opacity: 1;
}
#mitglieder-suche #suchbegriff::-moz-placeholder {
  color: #666;
  opacity: 1;
}
#mitglieder-suche #suchbegriff:-ms-input-placeholder {
  color: #666;
  opacity: 1;
}
#mitglieder-suche #suchbegriff::-ms-input-placeholder {
  color: #666;
  opacity: 1;
}
#mitglieder-suche #suchbegriff::placeholder {
  color: #666;
  opacity: 1;
}
#mitglieder-suche #suchbegriff:focus {
  -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}
@media (max-width: 480px) {
  #mitglieder-suche .search-container {
    max-width: 100%;
  }
}

.content-bg + #mitglieder-suche, .content-bg + #mitglieder, #mitglieder-suche + #mitglieder-suche, #mitglieder-suche + #mitglieder {
  margin-top: 1rem;
}

/***** (3) **********************************
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
body {
  line-height: 1.45;
  font-weight: 400;
}
body {
  font-size: 16px;
}
@media (min-width: 400px) {
  body {
    font-size: calc(16px + 2 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  body {
    font-size: 18px;
  }
}
body strong {
  font-weight: 700;
}

p.bigger {
  line-height: 1.45;
  font-weight: 400;
}
p.bigger {
  font-size: 17px;
}
@media (min-width: 400px) {
  p.bigger {
    font-size: calc(17px + 4 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  p.bigger {
    font-size: 21px;
  }
}
p.bigger strong {
  font-weight: 700;
}

nav.mobile {
  color: #fff;
  line-height: 1.1;
  font-weight: 400;
}
nav.mobile {
  font-size: 17px;
}
@media (min-width: 400px) {
  nav.mobile {
    font-size: calc(17px + 13 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  nav.mobile {
    font-size: 30px;
  }
}
nav.mobile strong {
  font-weight: 700;
}

p.intro, h5 {
  line-height: 1.45;
  font-weight: 300;
}
p.intro, h5 {
  font-size: 18px;
}
@media (min-width: 400px) {
  p.intro, h5 {
    font-size: calc(18px + 16 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  p.intro, h5 {
    font-size: 34px;
  }
}
p.intro strong, h5 strong {
  font-weight: 700;
}

h1 {
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  line-height: 1.2;
  font-weight: 700;
}
h1 {
  font-size: 30px;
}
@media (min-width: 400px) {
  h1 {
    font-size: calc(30px + 38 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  h1 {
    font-size: 68px;
  }
}
h1 strong {
  font-weight: 700;
}

h2 {
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  line-height: 1.2;
  font-weight: 700;
  margin-top: -12px;
  margin-bottom: -12px;
}
h2 {
  font-size: 28px;
}
@media (min-width: 400px) {
  h2 {
    font-size: calc(28px + 32 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  h2 {
    font-size: 60px;
  }
}
h2 strong {
  font-weight: 700;
}

h3 {
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  color: #3B0EDB;
  line-height: 1.2;
  font-weight: 800;
  margin-top: -8.4px;
  margin-bottom: -8.4px;
}
h3 {
  font-size: 26px;
}
@media (min-width: 400px) {
  h3 {
    font-size: calc(26px + 16 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  h3 {
    font-size: 42px;
  }
}
h3 strong {
  font-weight: 800;
}

h4 {
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
  line-height: 1.2;
  font-weight: 800;
  margin-top: -7.2px;
  margin-bottom: -7.2px;
}
h4 {
  font-size: 18px;
}
@media (min-width: 400px) {
  h4 {
    font-size: calc(18px + 18 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  h4 {
    font-size: 36px;
  }
}
h4 strong {
  font-weight: 800;
}

.mitglied-visitenkarte .mitglied-name {
  line-height: 1.2;
  font-weight: 400;
  margin-top: -5.6px;
  margin-bottom: -5.6px;
}
.mitglied-visitenkarte .mitglied-name {
  font-size: 18px;
}
@media (min-width: 400px) {
  .mitglied-visitenkarte .mitglied-name {
    font-size: calc(18px + 10 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  .mitglied-visitenkarte .mitglied-name {
    font-size: 28px;
  }
}
.mitglied-visitenkarte .mitglied-name strong {
  font-weight: 800;
}

main p a, main li a, main .mitglied-text a {
  text-decoration: underline;
  color: #585858;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
main p a:hover, main li a:hover, main .mitglied-text a:hover {
  -webkit-text-decoration-color: #585858;
          text-decoration-color: #585858;
  background-color: #585858;
  color: #fff;
}

main ul li {
  padding-left: 1.6rem;
}
main ul li + li {
  margin-top: 0.6rem;
}
main ul li::before {
  position: absolute;
  content: "";
  top: 0.3rem;
  left: 0;
  width: 1rem;
  height: 1rem;
  background-image: url("../img/Plus-Kreis.svg");
  background-size: contain;
  background-position: left center;
}

main ol li {
  list-style-type: decimal;
  margin-left: 1.6rem;
}
main ol li + li {
  margin-top: 0.6rem;
}

/**
  festes Seitenverhaeltnis bei responsiven Containern => globale Einstellung
  ---------------------------------------------------------------------------
  individuelle Einstellung in den jeweiligen scss-dateien:

     .parent {
      padding-bottom:calc(1 / (16 / 12) * 50%);
    }
  ---------------------------------------------------------------------------
 */
.child {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.parent {
  margin: 0 auto;
  width: 100%;
  height: 0;
  position: relative;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
body {
  position: relative;
  /**
    festes Seitenverhaeltnis bei responsiven Containern => individuelle Einstellung
    --------------------------------------------------------------------------------
    globale Einstellung in preset
    --------------------------------------------------------------------------------
   */
}
body.startseite .parent {
  padding-bottom: 43.75%;
}
@media (max-width: 600px) {
  body.startseite .parent {
    padding-bottom: 0;
    height: 250px;
  }
}
body.contentseite .parent {
  padding-bottom: 34.375%;
}
@media (max-width: 600px) {
  body.contentseite .parent {
    padding-bottom: 0;
    height: 200px;
  }
}

/* ******************************************************* */
header .logo-line {
  display: grid;
  grid-template-columns: auto auto;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  grid-template-areas: "navi logo";
}
header .logo-line .logo {
  z-index: 100;
  grid-area: logo;
  padding: 2rem;
  justify-self: start;
}
header .logo-line .logo img {
  width: 360px;
  max-width: 100%;
  height: auto;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
header .logo-line .logo img.logo-img-inverted {
  display: none;
}
header .logo-line .nav-elems {
  z-index: 100;
  grid-area: navi;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 1rem 0 0 -21px;
  border-radius: var(--border-radius);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
@media (max-width: 900px) {
  header .logo-line {
    grid-template-columns: auto 50%;
  }
  header .logo-line .nav-elems {
    margin-left: 0;
    margin-top: 2rem;
    padding-right: 0;
    gap: 0;
  }
  header .logo-line .nav-elems .breadcrumb ul.breadcrumb--list {
    display: none;
  }
}
@media (max-width: 600px) {
  header .logo-line .nav-elems .nav-toggle {
    padding: 1rem;
  }
  header .logo-line .logo {
    padding: 2rem 1rem;
  }
}
@media (max-width: 400px) {
  header .logo-line {
    grid-template-columns: auto auto;
    gap: 1rem;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  header .logo-line .nav-elems {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
}

.wrapper.header-headline {
  min-height: calc(33vw - 140px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: calc(1400px / 2);
}
@media (max-width: 1340px) {
  .wrapper.header-headline {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    padding-left: 50vw;
  }
}
@media (max-width: 1180px) {
  .wrapper.header-headline {
    padding-left: 45vw;
  }
}
@media (max-width: 960px) {
  .wrapper.header-headline {
    padding-left: 42vw;
  }
}
@media (max-width: 900px) {
  .wrapper.header-headline {
    min-height: calc(38vw - 140px);
  }
}
@media (max-width: 630px) {
  .wrapper.header-headline {
    padding-left: 38vw;
  }
}
@media (max-width: 600px) {
  .wrapper.header-headline {
    min-height: calc(43vw - 140px);
    padding-top: calc(1rem + 5vw);
  }
}
@media (max-width: 580px) {
  .wrapper.header-headline {
    padding-left: 34vw;
  }
}
@media (max-width: 500px) {
  .wrapper.header-headline {
    min-height: calc(50vw - 140px);
    padding-top: calc(1rem + 20vw);
    padding-left: 20vw;
  }
}
@media (max-width: 400px) {
  .wrapper.header-headline {
    min-height: unset;
    padding-top: 1rem;
    padding-left: 5vw;
  }
}

.header-img-animated, .img-animated {
  position: absolute;
  z-index: -1;
}
.header-img-animated img, .img-animated img {
  width: 100%;
  height: 100%;
}

.header-img-animated {
  top: -67vw;
  left: -45vw;
  width: 100vw;
  height: 100vw;
}
.header-img-animated.in-view img {
  -webkit-animation: rotate_me 15s ease infinite;
          animation: rotate_me 15s ease infinite;
}
@media (max-width: 900px) {
  .header-img-animated {
    top: -62vw;
    left: -50vw;
  }
}
@media (max-width: 600px) {
  .header-img-animated {
    top: -57vw;
  }
}
@media (max-width: 500px) {
  .header-img-animated {
    top: -50vw;
  }
}
@media (max-width: 400px) {
  .header-img-animated {
    display: none;
  }
}

.img-animated {
  top: max(min(100% - 93vw, 1500px), 20px);
  left: 51vw;
  width: 90vw;
  height: 90vw;
}
.img-animated.in-view img {
  -webkit-animation: rotate_me3 30s linear infinite;
          animation: rotate_me3 30s linear infinite;
}

@-webkit-keyframes rotate_me {
  0% {
    rotate: 0deg;
  }
  12% {
    rotate: -90deg;
  }
  25% {
    rotate: -45deg;
  }
  50% {
    rotate: -180deg;
  }
  75% {
    rotate: -270deg;
  }
  100% {
    rotate: -360deg;
  }
}

@keyframes rotate_me {
  0% {
    rotate: 0deg;
  }
  12% {
    rotate: -90deg;
  }
  25% {
    rotate: -45deg;
  }
  50% {
    rotate: -180deg;
  }
  75% {
    rotate: -270deg;
  }
  100% {
    rotate: -360deg;
  }
}
@-webkit-keyframes rotate_me2 {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: 90deg;
  }
  50% {
    rotate: 180deg;
  }
  75% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes rotate_me2 {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: 90deg;
  }
  50% {
    rotate: 180deg;
  }
  75% {
    rotate: 270deg;
  }
  100% {
    rotate: 360deg;
  }
}
@-webkit-keyframes rotate_me3 {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
@keyframes rotate_me3 {
  0% {
    rotate: 0deg;
  }
  100% {
    rotate: 360deg;
  }
}
a.logo, a.col-logo {
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
a.logo:hover, a.col-logo:hover {
  -webkit-transform: scale(1.05);
      -ms-transform: scale(1.05);
          transform: scale(1.05);
}

.content-bg + .header-img {
  margin-top: 2rem;
}

.header-img {
  border-radius: var(--border-radius);
  overflow: hidden;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
#keyvisual > * {
  -webkit-transition: none;
  transition: none;
}

#keyvisual {
  position: relative;
  z-index: 5;
}
#keyvisual .slide {
  position: relative;
  width: 100%;
  height: 600px;
}
@media (max-width: 2000px) {
  #keyvisual .slide {
    height: 30vw;
  }
}
#keyvisual .slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#keyvisual .slide .text-overlay {
  color: #fff;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}
#keyvisual .slide .text-overlay .text {
  float: right;
  padding: 1rem;
  background-color: #585858;
}
#keyvisual .slide .text-overlay .text .button {
  margin-top: 1rem;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
nav.mobile {
  display: none;
  position: absolute;
  padding: 100px 0 10vw;
  min-height: 100vh;
  width: 100%;
  background-color: #3B0EDB;
  z-index: 100;
}
nav.mobile .nav-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
nav.mobile .nav-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
nav.mobile .navigation-outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
nav.mobile .navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
nav.mobile .navigation a {
  color: #fff;
  position: relative;
  display: block;
  padding: 1rem;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-color: transparent;
  text-decoration: underline;
  text-underline-position: under;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
  border-radius: var(--border-radius);
}
nav.mobile .navigation a.active {
  -webkit-text-decoration-color: #fff;
          text-decoration-color: #fff;
}
nav.mobile .navigation a:hover {
  background-color: #fff;
  color: #3B0EDB;
  -webkit-text-decoration-color: transparent;
          text-decoration-color: transparent;
}

#nav-open:checked ~ .nav-toggle {
  background-color: transparent;
}
#nav-open:checked ~ .nav-toggle .bar {
  background-color: #fff;
}
#nav-open:checked ~ .nav-toggle .bar.bar1 {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(11px) rotate(45deg) scale(1.2);
      -ms-transform: translateY(11px) rotate(45deg) scale(1.2);
          transform: translateY(11px) rotate(45deg) scale(1.2);
}
#nav-open:checked ~ .nav-toggle .bar.bar2 {
  opacity: 0;
}
#nav-open:checked ~ .nav-toggle .bar.bar3 {
  -webkit-transform-origin: center center;
      -ms-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-11px) rotate(-45deg) scale(1.2);
      -ms-transform: translateY(-11px) rotate(-45deg) scale(1.2);
          transform: translateY(-11px) rotate(-45deg) scale(1.2);
}

.nav-toggle {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: var(--border-radius);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 100;
  font-weight: 500;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  padding: 15px;
  color: transparent;
  font-size: 0;
  z-index: 101;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.nav-toggle .bar {
  background-color: #585858;
  width: 28px;
  height: 3px;
  margin: 0 auto;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  border-radius: 3px;
}
.nav-toggle .bar + .bar {
  margin-top: 8px;
}
.nav-toggle:hover {
  scale: 1.1;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
img.align_right {
  float: right;
  margin: 0 0 20px 20px;
}
@media (max-width: 1400px) and (min-width: 201px) {
  img.align_right {
    max-width: 60%;
    height: auto;
  }
}
@media (max-width: 900px) {
  img.align_right {
    max-width: 50%;
  }
}
img.align_left {
  float: left;
  margin: 0 20px 20px 0;
}
@media (max-width: 1400px) {
  img.align_left {
    max-width: 60%;
    height: auto;
  }
}
@media (max-width: 900px) {
  img.align_left {
    max-width: 50%;
  }
}
img.align_center {
  width: 100%;
  height: auto;
}

figure {
  margin: 0;
  display: table;
}
figure.align_right {
  float: right;
  margin: 0 0 20px 20px;
}
figure.align_right:not(:first-child) {
  margin-top: 20px;
}
@media (max-width: 900px) {
  figure.align_right {
    max-width: 50%;
  }
}
@media (max-width: 400px) {
  figure.align_right {
    max-width: 40%;
  }
}
figure.align_left {
  float: left;
  margin: 0 20px 20px 0;
}
figure.align_left:not(:first-child) {
  margin-top: 20px;
}
@media (max-width: 900px) {
  figure.align_left {
    max-width: 50%;
  }
}
@media (max-width: 400px) {
  figure.align_left {
    max-width: 40%;
  }
}
figure.align_center {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}
figure.align_center:not(:first-child) {
  margin-top: 20px;
}
figure img {
  display: block;
  width: 100%;
}

figure + p {
  margin-top: 1rem;
}

figcaption {
  display: table-caption;
  caption-side: bottom;
  color: #585858;
  margin-top: 8px;
  line-height: 1.4;
  font-weight: 300;
}
figcaption {
  font-size: 12px;
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
.button, button[type=submit] {
  position: relative;
  margin: 0;
  display: inline-block;
  border: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.8);
  color: #3B0EDB;
  padding: 10px 49px 10px 16px;
  text-decoration: none;
  border-radius: var(--border-radius);
  border: 2px solid #3B0EDB;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
  background-image: url("../img/Pfeil-blau-schraeg.svg");
  background-position: top 11px right 16px;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  line-height: 1.35;
  font-weight: 700;
}
.button, button[type=submit] {
  font-size: 16px;
}
@media (min-width: 400px) {
  .button, button[type=submit] {
    font-size: calc(16px + 4 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  .button, button[type=submit] {
    font-size: 20px;
  }
}
@media (max-width: 450px) {
  .button, button[type=submit] {
    display: block;
  }
}
.button:hover, button[type=submit]:hover {
  background-color: #3B0EDB;
  color: #fff;
  background-image: url("../img/Pfeil-weiss-schraeg.svg");
}
.button.back, button[type=submit].back {
  padding: 10px 16px 10px 49px;
  background-image: url("../img/Pfeil-blau-schraeg-links.svg");
  background-position: top 11px left 16px;
}
.button.back:hover, button[type=submit].back:hover {
  background-image: url("../img/Pfeil-weiss-schraeg-links.svg");
}

footer .button, footer button[type=submit] {
  border-color: #fff;
  background-color: unset;
  color: #fff;
  background-image: url("../img/Pfeil-weiss-schraeg.svg");
}
footer .button:hover, footer button[type=submit]:hover {
  background-color: #fff;
  color: #3B0EDB;
  background-image: url("../img/Pfeil-blau-schraeg.svg");
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/* #################################
*   Gallery  Grid ausrichten
*  ################################# */
.gallery-container {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
}
.gallery-container .thumbnail {
  position: relative;
  padding-bottom: 33%;
}
.gallery-container .thumbnail.thumbnail-1, .gallery-container .thumbnail.thumbnail-4 {
  width: calc(0.55 * (100% - 20px));
}
.gallery-container .thumbnail.thumbnail-2, .gallery-container .thumbnail.thumbnail-3 {
  width: calc(0.45 * (100% - 20px));
}
.gallery-container .thumbnail a {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-color: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.gallery-container .thumbnail a img {
  width: 100%;
  height: 100%;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
@supports ((-o-object-fit: cover) or (object-fit: cover)) {
  .gallery-container .thumbnail a img {
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.gallery-container .thumbnail a:hover img {
  opacity: 0.7;
}
.gallery-container.gallery-mobile {
  display: none;
}
@media (max-width: 900px) {
  .gallery-container {
    gap: 10px;
  }
  .gallery-container.gallery-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .gallery-container.gallery-desktop {
    display: none;
  }
  .gallery-container .thumbnail.thumbnail-1, .gallery-container .thumbnail.thumbnail-2, .gallery-container .thumbnail.thumbnail-3, .gallery-container .thumbnail.thumbnail-4 {
    width: calc(0.5 * (100% - 10px));
  }
}
@media (max-width: 500px) {
  .gallery-container .thumbnail {
    padding-bottom: 66%;
  }
  .gallery-container .thumbnail.thumbnail-1, .gallery-container .thumbnail.thumbnail-2, .gallery-container .thumbnail.thumbnail-3, .gallery-container .thumbnail.thumbnail-4 {
    width: 100%;
  }
}

/***** (2) **********************************
Alle Mixins des Projekts
*/
body {
  /**
  	festes Seitenverhaeltnis bei responsiven Containern : individuelle Einstellung
  	globale Einstellung in settings
      */
}
body.startseite .map-container .parent {
  padding-bottom: 21.875%;
}
@media (max-width: 900px) {
  body.startseite .map-container .parent {
    padding-bottom: 0;
    height: 200px;
  }
}
@media (max-width: 900px) {
  body.startseite .map-container .child {
    height: 200px;
  }
}
body.contentseite .map-container .parent {
  padding-bottom: 50%;
}
@media (max-width: 500px) {
  body.contentseite .map-container .parent {
    padding-bottom: 0;
    height: 200px;
  }
}
@media (max-width: 500px) {
  body.contentseite .map-container .child {
    height: 200px;
  }
}

/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
.accordion label {
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  position: relative;
  padding: 12px 40px 12px 12px;
  margin: 0;
  font-weight: bold;
  color: #000000;
  background-color: #FFFFFF;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.accordion label::after {
  content: "";
  background-image: url(/site/templates/img/arrow.svg);
  background-repeat: no-repeat;
  background-size: cover;
  height: 25px;
  width: 25px;
  position: absolute;
  right: 10px;
  top: 12px;
  -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.accordion label:hover {
  color: red;
}
.accordion label:hover::after {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.accordion .accordion-content {
  display: none;
  -webkit-transition: none;
  transition: none;
  padding: 12px 40px 35px 12px;
}
.accordion input:checked ~ label {
  color: red;
}
.accordion input:checked ~ label::after {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.accordion input:checked ~ .accordion-content {
  display: block;
}

/***** (3) **********************************
*/
/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
button, input, optgroup, select, textarea {
  font-family: "Albert Sans", Roboto, -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", Arial, sans-serif;
}

input:focus {
  outline: none;
}

select {
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 1px;
  border: 1px solid #585858;
  padding: 9px 35px 7px 10px;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  background-size: 34px 34px;
  background-position: center right;
  background-color: #fff;
  color: #000;
}
select:focus {
  outline: none;
}
select[disabled] {
  cursor: not-allowed;
}
select::-ms-expand {
  display: none;
}

#wrap_Inputfield_agree {
  display: none;
}

.FormBuilder ::-webkit-input-placeholder {
  color: #585858;
}
.FormBuilder ::-moz-placeholder {
  color: #585858;
}
.FormBuilder :-ms-input-placeholder {
  color: #585858;
}
.FormBuilder :-moz-placeholder {
  color: #585858;
}
.FormBuilder label {
  display: inline-block;
  margin: 0;
}
.FormBuilder input[type=text], .FormBuilder input[type=email], .FormBuilder textarea {
  font-size: 16px;
  font-weight: 300;
  width: 100%;
  -webkit-appearance: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  background-color: #fff;
  color: #000;
  border: 1px solid #585858;
  border-radius: 1px;
  margin: 0 0 15px 0;
  padding: 9px 10px 7px;
  position: relative;
  border-radius: 2px;
}
.FormBuilder select {
  margin-bottom: 15px;
}
.FormBuilder textarea {
  resize: none;
  overflow: auto;
  line-height: 1.45;
  height: clc(7);
  display: block;
}
.FormBuilder .InputfieldCheckbox {
  margin-bottom: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.FormBuilder .InputfieldCheckbox span {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
}
.FormBuilder .InputfieldCheckbox span::before, .FormBuilder .InputfieldCheckbox span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 20px;
  height: 20px;
}
.FormBuilder .InputfieldCheckbox span::before {
  border: 1px solid #585858;
  border-radius: 1px;
  background-color: #fff;
}
.FormBuilder .InputfieldCheckbox input {
  display: none;
}
.FormBuilder .InputfieldCheckbox input:checked ~ span::before {
  background-image: url("../img/icon-haken.svg");
  background-size: contain;
  background-position: bottom right;
  background-repeat: no-repeat;
}
.FormBuilder .InputfieldCheckbox.InputfieldStateRequired span {
  padding-right: 25px;
}
.FormBuilder input:focus, .FormBuilder input.filled, .FormBuilder textarea:focus, .FormBuilder textarea.filled, .FormBuilder select:focus, .FormBuilder select.filled {
  border: 1px solid #252525;
}
.FormBuilder .InputfieldHeader {
  display: none;
}
.FormBuilder .Inputfields::after, .FormBuilder .Inputfields::before {
  content: " ";
  display: table;
}
.FormBuilder .Inputfields::after {
  clear: both;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .FormBuilder .Inputfields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .FormBuilder .Inputfields::after, .FormBuilder .Inputfields::before {
    display: none;
  }
}
@supports (display: flex) {
  .FormBuilder .Inputfields {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .FormBuilder .Inputfields::after, .FormBuilder .Inputfields::before {
    display: none;
  }
}
.FormBuilder .Inputfield {
  width: 100%;
  position: relative;
  float: left;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .FormBuilder .Inputfield {
    float: none;
  }
}
@supports (display: flex) {
  .FormBuilder .Inputfield {
    float: none;
  }
}
.FormBuilder .Inputfield.InputfieldColumnWidth:not(.InputfieldTextarea):not(.InputfieldSubmit):not(.InputfieldColumnWidthFirst) {
  padding-left: 15px;
}
.FormBuilder .InputfieldContent {
  position: relative;
}
.FormBuilder .InputfieldStateRequired input[type=text], .FormBuilder .InputfieldStateRequired input[type=email], .FormBuilder .InputfieldStateRequired textarea {
  padding-right: 25px;
}
.FormBuilder .InputfieldStateRequired:not(.InputfieldSelect) .InputfieldContent {
  position: relative;
}
.FormBuilder .InputfieldStateRequired:not(.InputfieldSelect) .InputfieldContent::after {
  content: "*";
  position: absolute;
  top: 9px;
  right: 7px;
  width: 15px;
  height: 15px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.2rem;
  color: red;
}
.FormBuilder .InputfieldStateError ::-webkit-input-placeholder {
  color: red;
}
.FormBuilder .InputfieldStateError ::-moz-placeholder {
  color: red;
}
.FormBuilder .InputfieldStateError :-ms-input-placeholder {
  color: red;
}
.FormBuilder .InputfieldStateError :-moz-placeholder {
  color: red;
}
.FormBuilder .InputfieldStateError input {
  border: 1px solid rgba(255, 0, 0, 0.45);
  background-color: rgba(255, 0, 0, 0.2);
  color: red;
}
.FormBuilder .InputfieldStateError label {
  color: red;
}
.FormBuilder .InputfieldStateError.InputfieldStateRequired:not(.InputfieldSelect) .InputfieldContent::after {
  color: red;
}
.FormBuilder .InputfieldStateError input:valid, .FormBuilder .InputfieldStateError input.filled, .FormBuilder .InputfieldStateError textarea:valid, .FormBuilder .InputfieldStateError textarea.filled, .FormBuilder .InputfieldStateError select:valid, .FormBuilder .InputfieldStateError select.filled {
  border: 1px solid rgba(88, 88, 88, 0.4);
  background-color: #fff;
  color: #000;
}
.FormBuilder .InputfieldSubmit {
  padding-bottom: 10px;
}
.FormBuilder .InputfieldSubmit button {
  margin-top: -1px;
  float: right;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .FormBuilder .InputfieldSubmit button {
    float: none;
  }
}
@supports (display: flex) {
  .FormBuilder .InputfieldSubmit button {
    float: none;
  }
}
.FormBuilder .InputfieldSubmit .InputfieldContent {
  position: relative;
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .FormBuilder .InputfieldSubmit .InputfieldContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
@supports (display: flex) {
  .FormBuilder .InputfieldSubmit .InputfieldContent {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}
.FormBuilder .Inputfield_address, .FormBuilder .Inputfield_source {
  display: none;
}

.error, .FormBuilderErrors, .ui-widget-content p {
  display: none;
}

.phonelayer {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
  cursor: pointer;
}

.phonelayer-content {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
}

#overlay-tel {
  color: #ffffff !important;
  text-align: center;
  display: inline-block;
  margin: 0 auto;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  line-height: 1.2;
  font-weight: bold;
}
#overlay-tel {
  font-size: 35px;
}
@media (min-width: 400px) {
  #overlay-tel {
    font-size: calc(35px + 35 * (100vw - 400px) / 1000);
  }
}
@media (min-width: 1400px) {
  #overlay-tel {
    font-size: 70px;
  }
}

.phonelayer a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.phonelayer a:hover, .phonelayer a:focus {
  color: #f1f1f1;
}

.phonelayer .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 100px;
}

/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
/***** (2) **********************************
Alle Mixins des Projekts
*/
footer {
  position: relative;
  background-color: #1A0173;
  color: #fff;
  padding-top: 40px;
  padding-bottom: 40px;
}
footer::before {
  content: "";
  position: absolute;
  top: -7vw;
  right: -16vw;
  width: 60vw;
  height: 60vw;
  background-image: url("../img/ring.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: top right;
  rotate: 110deg;
}
footer a {
  color: #fff;
  text-decoration: underline;
  text-underline-position: under;
  -webkit-text-decoration-color: #1A0173;
          text-decoration-color: #1A0173;
}
footer a:hover {
  color: #fff;
  -webkit-text-decoration-color: #fff;
          text-decoration-color: #fff;
}
footer .footer-columns {
  position: relative;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "logo address recht       kontakt" "logo address socialmedia kontakt";
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 80px;
  row-gap: 1rem;
}
footer .footer-columns .col {
  max-width: 100%;
}
footer .footer-columns .col.col-logo {
  grid-area: logo;
}
footer .footer-columns .col.col-address {
  grid-area: address;
}
footer .footer-columns .col.col-socialmedia {
  grid-area: socialmedia;
  display: grid;
  grid-template-columns: 40px;
  gap: 10px;
}
footer .footer-columns .col.col-socialmedia a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
footer .footer-columns .col.col-socialmedia a:hover {
  opacity: 0.8;
  -webkit-transform: scale(1.1);
      -ms-transform: scale(1.1);
          transform: scale(1.1);
}
footer .footer-columns .col.col-recht {
  grid-area: recht;
}
footer .footer-columns .col.col-kontakt {
  grid-area: kontakt;
}
footer .footer-columns .smaller {
  font-size: smaller;
}
@media (max-width: 1130px) {
  footer .footer-columns {
    grid-template-columns: auto auto auto;
    grid-template-areas: "logo address recht" "logo address kontakt" "logo address socialmedia";
    row-gap: 1.6rem;
  }
}
@media (max-width: 850px) {
  footer .footer-columns {
    grid-template-columns: auto 1fr;
    grid-template-areas: "logo address" "logo kontakt" "logo recht" "logo socialmedia";
  }
}
@media (max-width: 680px) {
  footer .footer-columns {
    grid-template-columns: auto;
    grid-template-areas: "logo" "address" "kontakt" "recht" "socialmedia";
  }
}
footer a.col-logo img {
  width: 360px;
  max-width: 100%;
}

/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
.back-to-top {
  position: fixed;
  width: 35px;
  height: 35px;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: 1px solid #1A0173;
  outline: none;
  background-color: #1A0173;
  color: white;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.back-to-top::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 50%;
  background-image: url("../img/Pfeil-weiss-oben.svg");
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100%;
  z-index: -1;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}
.back-to-top:hover {
  background-color: #fff;
}
.back-to-top:hover::after {
  background-image: url("../img/Pfeil-blau-oben.svg");
}

#startContainer_wrapper {
  background-color: rgba(238, 140, 225, 0.41);
}
#startContainer_wrapper .well {
  /* drop-shadow is better than box-shadow as it add a shadow to tooltip arrows arrow as well,
  however drop-shadow dramatically affects the performance of transition animation on Android. */
  /* filter: drop-shadow(0 0 10px rgba(0,0,0,0.3)); */
  display: none;
  margin: 1em;
  max-width: 740px;
}
#startContainer_wrapper .well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: orange;
  border: 1px solid red;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
#startContainer_wrapper .well .popup_close {
  position: absolute;
  top: 0;
  right: 0px;
  background: none;
  border: 0;
  font-size: 25px;
  padding: 0 10px;
  color: #ffffff;
}

/**
*  A C H T U N G !  Block-Reihenfolge nicht ändern!
*/
/***** (1) **********************************
*/
nav.breadcrumb {
  background-color: rgba(255, 255, 255, 0.8);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: var(--border-radius);
}
nav.breadcrumb ul {
  padding: 0 10px;
  margin-right: 2rem;
}
nav.breadcrumb ul li {
  display: list-item;
  float: left;
  list-style: none;
  white-space: nowrap;
  padding: 0 0.3rem;
  margin: 0;
}
nav.breadcrumb ul li a {
  color: #585858;
  text-decoration: none;
}
nav.breadcrumb ul li a:hover {
  background-color: unset;
  color: #3B0EDB;
  text-decoration: underline;
  text-underline-position: under;
}
nav.breadcrumb ul li::before {
  display: none;
}
/***** (6) **********************************
Ausnahmen des Projekts | Zum Überschreiben von JavaScript oder Inline-Styles – !importants
*/

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