/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

:root {
  --font-size-1: 16px;
  --font-size-2: 25px;
  --color1: oklch(71.9% 0.0985 191);
  --color1-1: oklch(75.3% 0.105 192);
  --color1-2: oklch(87.4% 0.0496 219.2);
  --color1-3: oklch(92.1% 0.0233 193.4);
  --color2: oklch(100% 0 90);
  --color3: oklch(34.8% 0 146.3);
  --color4: oklch(76.8% 0.1423 62.3);
  --color4-1: oklch(80.4% 0.1164 64.9);
  --color4-2: oklch(88.7% 0.059 66.9);
  --color4-3: oklch(92.9% 0.0301 65.8);
  --color5: oklch(53.5% 0.1655 36.3);
  --color5-1: oklch(61% 0.1329 37.7);
  --color5-2: oklch(78.8% 0.0616 37.7);
  --color5-3: oklch(87.9% 0.0297 36.2);
  --color6: oklch(52.9% 0.1383 328.3);
  --color6-1: oklch(61.6% 0.1104 327.4);
  --color6-2: oklch(80.7% 0.0592 335.3);
  --color6-3: oklch(88.6% 0.0249 327.8);
  --color7: oklch(61.9% 0.1571 153.7);
  --color7-1: oklch(67.7% 0.14 158.8);
  --color7-2: oklch(81.9% 0.0772 164.7);
  --color7-3: oklch(89.4% 0.0394 165.5);
  --color8: oklch(88.3% 0.1677 99.9);
  --color8-1: oklch(89.8% 0.1361 99.5);
  --color8-2: oklch(93.4% 0.074 99.3);
  --color8-3: oklch(95.5% 0.0384 99);
  --color9: oklch(49.4% 0.1348 249.6);
  --color9-1: oklch(58.2% 0.113 244.5);
  --color9-2: oklch(77.8% 0.0565 241.1);
  --color9-3: oklch(87.6% 0.0274 241.2);
  --grey: oklch(92.5% 0.0104 247.9);
  --white: var(--color2);
  --color-text: var(--color3);
  --color-link: var(--color5);
  --color-contrast-1: var(--color2);
  --color-contrast-2: var(--color3);
  --color-contrast-1-bg: var(--color9);
  --headline-color: var(--color9);
  --button-color-text: var(--color2);
  --button-color-bg: var(--color9);
  --border-size: 3px;
  --border: var(--border-size) solid var(--color9);
  --button-color-light-text: var(--color9);
  --button-color-light-bg: var(--color2);
  --theme-verein-color: var(--color9);
  --theme-verein-color-1: var(--color9-1);
  --theme-verein-color-2: var(--color9-2);
  --theme-verein-color-3: var(--color9-3);
  --theme-kinder-color: var(--color8);
  --theme-kinder-color-1: var(--color8-1);
  --theme-kinder-color-2: var(--color8-2);
  --theme-kinder-color-3: var(--color8-3);
  --theme-eltern-color: var(--color1);
  --theme-eltern-color-1: var(--color1-1);
  --theme-eltern-color-2: var(--color1-2);
  --theme-eltern-color-3: var(--color1-3);
  --theme-familie-color: var(--color7);
  --theme-familie-color-1: var(--color7-1);
  --theme-familie-color-2: var(--color7-2);
  --theme-familie-color-3: var(--color7-3);
  --theme-fachkraefte-color: var(--color6);
  --theme-fachkraefte-color-1: var(--color6-1);
  --theme-fachkraefte-color-2: var(--color6-2);
  --theme-fachkraefte-color-3: var(--color6-3);
  --theme-spenden-color: var(--color5);
  --theme-spenden-color-1: var(--color5-1);
  --theme-spenden-color-2: var(--color5-2);
  --theme-spenden-color-3: var(--color5-3);
  --theme-kontakt-color: var(--color4);
  --theme-kontakt-color-1: var(--color4-1);
  --theme-kontakt-color-2: var(--color4-2);
  --theme-kontakt-color-3: var(--color4-3);
  --box-widget-bg: var(--color2);
  --box-widget-contrast-bg: var(--color9-1);
  --gradient1: linear-gradient(180deg, var(--white) 0%, var(--grey) 10%);
  --gradient2: linear-gradient(180deg, var(--white) 0%, var(--grey) 100%);
  --site-background: var(--gradient1);
  --header-background: var(--gradient2);
  --logo-color: var(--color9);
  --form-checkbox-label-color: var(--color9);
  --animation-function-in: ease-in-out;
  --animation-function-out: ease-in-out;
  --animation-function-opacity-in: ease-in-out;
  --animation-function-opacity-out: ease-in-out;
  --size-1: 20px;
  --size-2: 30px;
  --size-3: 40px;
  --size-4: 60px;
  --size-5: 80px;
  --slider-height: 900px;
  --grid-column-gap: var(--size-1);
  --grid-mobile-template-columns: [wide-content-begin] 1ch [content-begin
    content-boxes-begin content-center-start] 0.5fr [content-center] 0.5fr
    [content-end content-center-end] 1ch [wide-content-end];
  --grid-template-columns: var(--grid-mobile-template-columns);
  --grid-desktop-template-columns: [wide-content-begin] 1fr [content-begin
    content-boxes-begin] repeat(2, 1fr) [content-center-start] repeat(2, 1fr)
    [content-center-center] repeat(2, 1fr) [content-center-end] repeat(2, 1fr)
    [content-end] 1fr [wide-content-end];
}

@media (min-width: 722px) {
  :root {
    --grid-column-gap: var(--size-2);
    --grid-template-columns: var(--grid-desktop-template-columns);
  }
}
@media (min-width: 1200px) {
  :root {
    --grid-column-gap: var(--size-4);
  }
}
@keyframes shake {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}
.btn:not([class*=content-]) {
  color: var(--button-color-text);
  background-color: var(--button-color-bg);
  text-decoration: none;
  padding: 0.5rem 4ch;
  display: inline-flex;
  text-transform: uppercase;
  border: none;
  align-items: center;
  border-radius: 40px;
}
.btn:not([class*=content-]) a {
  color: var(--button-color-text);
  text-decoration: none;
}

.btn.btn-contrast:not([class*=content-]) {
  --button-color-text: var(--button-color-light-bg);
  --button-color-bg: var(--button-color-light-text);
}

.content-hyperlink.btn a {
  color: var(--button-color-text);
  background-color: var(--button-color-bg);
  text-decoration: none;
  padding: 0.5rem 4ch;
  display: inline-flex;
  text-transform: uppercase;
  border: none;
  align-items: center;
  border-radius: 40px;
}
.content-hyperlink.btn a a {
  color: var(--button-color-text);
  text-decoration: none;
}

.content-hyperlink.btn.btn-contrast a {
  --button-color-text: var(--button-color-light-bg);
  --button-color-bg: var(--button-color-light-text);
}

.theme-default {
  --theme-color: var(--theme-verein-color);
  --theme-color-1: var(--theme-verein-color-1);
  --theme-color-2: var(--theme-verein-color-2);
  --theme-color-3: var(--theme-verein-color-3);
  --theme-color-contrast: var(--color-contrast-1);
}

.theme-verein {
  --theme-color: var(--theme-verein-color);
  --theme-color-1: var(--theme-verein-color-1);
  --theme-color-2: var(--theme-verein-color-2);
  --theme-color-3: var(--theme-verein-color-3);
  --theme-color-contrast: var(--color-contrast-1);
}

.theme-kinder {
  --theme-color: var(--theme-kinder-color);
  --theme-color-1: var(--theme-kinder-color-1);
  --theme-color-2: var(--theme-kinder-color-2);
  --theme-color-3: var(--theme-kinder-color-3);
  --theme-color-contrast: var(--color-contrast-2);
}

.theme-eltern {
  --theme-color: var(--theme-eltern-color);
  --theme-color-1: var(--theme-eltern-color-1);
  --theme-color-2: var(--theme-eltern-color-2);
  --theme-color-3: var(--theme-eltern-color-3);
  --theme-color-contrast: var(--color-contrast-1);
}

.theme-familie {
  --theme-color: var(--theme-familie-color);
  --theme-color-1: var(--theme-familie-color-1);
  --theme-color-2: var(--theme-familie-color-2);
  --theme-color-3: var(--theme-familie-color-3);
  --theme-color-contrast: var(--color-contrast-1);
}

.theme-fachkraefte {
  --theme-color: var(--theme-fachkraefte-color);
  --theme-color-1: var(--theme-fachkraefte-color-1);
  --theme-color-2: var(--theme-fachkraefte-color-2);
  --theme-color-3: var(--theme-fachkraefte-color-3);
  --theme-color-contrast: var(--color-contrast-1);
}

.theme-spenden {
  --theme-color: var(--theme-spenden-color);
  --theme-color-1: var(--theme-spenden-color-1);
  --theme-color-2: var(--theme-spenden-color-2);
  --theme-color-3: var(--theme-spenden-color-3);
}

.theme-kontakt {
  --theme-color: var(--theme-kontakt-color);
  --theme-color-1: var(--theme-kontakt-color-1);
  --theme-color-2: var(--theme-kontakt-color-2);
  --theme-color-3: var(--theme-kontakt-color-3);
  --theme-color-contrast: var(--color-contrast-2);
}

/* float zeug */
.media:is(.media--right, .media--left) {
  float: none;
  margin: 0 0 var(--size-2);
}

/* artikel */
@media (min-width: 722px) {
  .mod_article {
    margin: 0 auto;
  }
}
.mod_article {
  display: grid;
  grid-column-gap: var(--grid-column-gap);
  grid-template-columns: var(--grid-template-columns);
  position: relative;
  z-index: 1;
  padding-bottom: var(--size-5);
}
.mod_article:first-child {
  padding-bottom: var(--size-2);
}
.mod_article a {
  font-weight: bold;
}
.mod_article ol,
.mod_article ul {
  padding-left: var(--size-2);
  overflow: hidden;
  list-style-type: none;
}
.mod_article p {
  margin-bottom: var(--size-1);
}
.mod_article picture {
  display: grid;
  place-items: center;
}
.mod_article img:not([src$=".svg"]) {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media (min-width: 722px) {
  .mod_article img:not([src$=".svg"]) {
    height: auto;
  }
}
.mod_article figure {
  margin-bottom: var(--size-3);
}
.mod_article figure a {
  display: block;
}
.mod_article .img-responsive img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
@media (min-width: 722px) {
  .mod_article .img-responsive img {
    height: auto;
  }
}
.mod_article figure video {
  max-width: 100%;
}
.mod_article .content-player {
  width: 100%;
}
.mod_article > .content-headline {
  grid-column: 1/-1;
  width: 100%;
  padding: var(--size-3) 0;
  color: var(--headline-color);
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  position: relative;
  font-size: var(--font-size-1);
  grid-column: content-begin/content-end;
}
@media (min-width: 722px) {
  .mod_article > .content-headline {
    padding: var(--size-5) 0;
  }
}
.mod_article > .content-headline::before, .mod_article > .content-headline::after {
  content: "";
  width: 6ch;
  border-bottom: 4px solid var(--headline-color);
  display: block;
  margin: 1rem auto;
}
@media (min-width: 722px) {
  .mod_article > .content-headline::before, .mod_article > .content-headline::after {
    display: inline-block;
    transform: translateY(-100%);
  }
}
@media (min-width: 722px) {
  .mod_article > .content-headline::before {
    margin: 0;
    margin-right: 1.5ch;
  }
}
@media (min-width: 722px) {
  .mod_article > .content-headline::after {
    margin: 0;
    margin-left: 2ch;
  }
}
.mod_article > * {
  grid-column-start: content-begin;
  grid-column-end: span 2;
  margin-block-end: var(--grid-column-gap);
}
@media (min-width: 722px) {
  .mod_article > * {
    grid-column-end: span 4;
  }
}
.mod_article > :last-child {
  margin-bottom: var(--size-4);
}
.mod_article > .block.last {
  margin-bottom: 0;
}
@media (min-width: 722px) {
  .mod_article .content-text {
    grid-row-end: span 4;
  }
}
@media (min-width: 722px) {
  .mod_article .content-text :is(h1, h2, h3, h4, h5, h6, p) {
    max-width: 65ch;
  }
}
.mod_article .content-text p:last-child {
  margin: 0;
}
.mod_article .content-text.text-with-image:not(.portrait) {
  justify-self: initial;
}
@media (min-width: 500px) {
  .mod_article .content-text.text-with-image:not(.portrait) {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--grid-column-gap);
  }
}
@media (min-width: 722px) {
  .mod_article .content-text.text-with-image:not(.portrait) {
    grid-column-end: span 8;
  }
}
.mod_article .content-text.text-with-image:not(.portrait) h1,
.mod_article .content-text.text-with-image:not(.portrait) h2,
.mod_article .content-text.text-with-image:not(.portrait) h3,
.mod_article .content-text.text-with-image:not(.portrait) h4,
.mod_article .content-text.text-with-image:not(.portrait) h5,
.mod_article .content-text.text-with-image:not(.portrait) h6 {
  font-weight: 600;
}
.mod_article .content-text.text-with-image:not(.portrait) p {
  text-align: left !important;
}
@media (min-width: 500px) {
  .mod_article .content-text.text-with-image:not(.portrait) p {
    justify-self: end;
  }
}
.mod_article .content-text.text-with-image:not(.portrait) figure {
  grid-column: 2;
  align-self: start;
  grid-row-end: span 5;
  margin-bottom: var(--size-3);
}
.mod_article .content-download {
  border-top: var(--border);
  margin: var(--size-2) 0;
  padding: var(--size-1) 2ch var(--size-1) 0;
  font-size: var(--font-size-1);
  grid-column: wide-content-begin/wide-content-end;
  align-self: start;
}
@media (min-width: 500px) {
  .mod_article .content-download {
    max-width: calc(100% - 6ch);
  }
}
.mod_article .content-download a {
  display: flex;
  align-items: center;
  word-break: break-all;
  color: var(--theme-verein-color);
  text-decoration: none;
  position: relative;
}
.mod_article .content-download a::before {
  content: "";
  background: url("../img/icons/download.svg") left center no-repeat;
  background-size: contain;
  width: var(--font-size-2);
  height: var(--font-size-2);
  display: inline-block;
  vertical-align: middle;
  margin-right: 1ch;
}
.mod_article .content-download:last-child {
  border-bottom: var(--border);
}
.mod_article .content-download .size {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.mod_article .content-list,
.mod_article .content-text {
  margin-bottom: var(--grid-column-gap);
}
.mod_article .content-list h1,
.mod_article .content-list h2,
.mod_article .content-list h3,
.mod_article .content-list h4,
.mod_article .content-list h5,
.mod_article .content-list h6,
.mod_article .content-text h1,
.mod_article .content-text h2,
.mod_article .content-text h3,
.mod_article .content-text h4,
.mod_article .content-text h5,
.mod_article .content-text h6 {
  margin-bottom: var(--size-3);
}
.mod_article .content-list ul,
.mod_article .content-list ol,
.mod_article .content-text ul,
.mod_article .content-text ol {
  margin-bottom: var(--size-3);
}
.mod_article .content-list li,
.mod_article .content-text li {
  margin-bottom: var(--size-3);
}
.mod_article .content-list li::before,
.mod_article .content-text li::before {
  content: "+";
  display: inline-block;
  transform: translateX(-2ch);
  position: absolute;
}
.mod_article .content-list li:last-child,
.mod_article .content-text li:last-child {
  margin-bottom: 0;
}

.content-list {
  border-bottom: var(--border);
  width: 100%;
}
.content-list h1,
.content-list h2,
.content-list h3,
.content-list h4,
.content-list h5,
.content-list h6 {
  border-bottom: var(--border);
  padding-bottom: var(--size-3);
  margin-bottom: var(--size-3);
}

/**************
** decoration classes
***************/
.mod_article.content-center > * {
  grid-column: content-center-start/content-center-end;
  justify-self: center;
  width: 100%;
}
.mod_article .border-bottom {
  border-bottom: var(--border);
  padding-bottom: var(--size-3);
}
.mod_article .content-spalte-2 {
  grid-column: content-begin/content-end;
}
@media (min-width: 722px) {
  .mod_article .content-spalte-2 {
    grid-column: content-center-center/content-end;
    justify-self: start;
  }
}
.mod_article .content-spalte-2-wide {
  grid-column: content-begin/content-end;
}
@media (min-width: 722px) {
  .mod_article .content-spalte-2-wide {
    grid-column: content-center-center/wide-content-end;
    justify-self: start;
  }
}
.mod_article .content-spalte-1 {
  grid-column: content-begin/content-end;
}
@media (min-width: 722px) {
  .mod_article .content-spalte-1 {
    grid-column: content-begin/content-center-center;
  }
}
.mod_article .content-beide-spalten {
  grid-column: content-begin/content-end;
}
.mod_article .theme-border {
  --border-color: var(--theme-color-2);
  border: var(--border);
}
.mod_article .theme-background {
  background-color: var(--theme-color-2);
}
.mod_article .content-center {
  grid-column: content-center-start/content-center-end;
  justify-self: center;
}

/*************
* special elements
**************/
.mod_article :root {
  --font-size-1: 16px;
  --font-size-2: 25px;
  --color1: oklch(71.9% 0.0985 191);
  --color1-1: oklch(75.3% 0.105 192);
  --color1-2: oklch(87.4% 0.0496 219.2);
  --color1-3: oklch(92.1% 0.0233 193.4);
  --color2: oklch(100% 0 90);
  --color3: oklch(34.8% 0 146.3);
  --color4: oklch(76.8% 0.1423 62.3);
  --color4-1: oklch(80.4% 0.1164 64.9);
  --color4-2: oklch(88.7% 0.059 66.9);
  --color4-3: oklch(92.9% 0.0301 65.8);
  --color5: oklch(53.5% 0.1655 36.3);
  --color5-1: oklch(61% 0.1329 37.7);
  --color5-2: oklch(78.8% 0.0616 37.7);
  --color5-3: oklch(87.9% 0.0297 36.2);
  --color6: oklch(52.9% 0.1383 328.3);
  --color6-1: oklch(61.6% 0.1104 327.4);
  --color6-2: oklch(80.7% 0.0592 335.3);
  --color6-3: oklch(88.6% 0.0249 327.8);
  --color7: oklch(61.9% 0.1571 153.7);
  --color7-1: oklch(67.7% 0.14 158.8);
  --color7-2: oklch(81.9% 0.0772 164.7);
  --color7-3: oklch(89.4% 0.0394 165.5);
  --color8: oklch(88.3% 0.1677 99.9);
  --color8-1: oklch(89.8% 0.1361 99.5);
  --color8-2: oklch(93.4% 0.074 99.3);
  --color8-3: oklch(95.5% 0.0384 99);
  --color9: oklch(49.4% 0.1348 249.6);
  --color9-1: oklch(58.2% 0.113 244.5);
  --color9-2: oklch(77.8% 0.0565 241.1);
  --color9-3: oklch(87.6% 0.0274 241.2);
  --grey: oklch(92.5% 0.0104 247.9);
  --white: var(--color2);
  --color-text: var(--color3);
  --color-link: var(--color5);
  --color-contrast-1: var(--color2);
  --color-contrast-2: var(--color3);
  --color-contrast-1-bg: var(--color9);
  --headline-color: var(--color9);
  --button-color-text: var(--color2);
  --button-color-bg: var(--color9);
  --border-size: 3px;
  --border: var(--border-size) solid var(--color9);
  --button-color-light-text: var(--color9);
  --button-color-light-bg: var(--color2);
  --theme-verein-color: var(--color9);
  --theme-verein-color-1: var(--color9-1);
  --theme-verein-color-2: var(--color9-2);
  --theme-verein-color-3: var(--color9-3);
  --theme-kinder-color: var(--color8);
  --theme-kinder-color-1: var(--color8-1);
  --theme-kinder-color-2: var(--color8-2);
  --theme-kinder-color-3: var(--color8-3);
  --theme-eltern-color: var(--color1);
  --theme-eltern-color-1: var(--color1-1);
  --theme-eltern-color-2: var(--color1-2);
  --theme-eltern-color-3: var(--color1-3);
  --theme-familie-color: var(--color7);
  --theme-familie-color-1: var(--color7-1);
  --theme-familie-color-2: var(--color7-2);
  --theme-familie-color-3: var(--color7-3);
  --theme-fachkraefte-color: var(--color6);
  --theme-fachkraefte-color-1: var(--color6-1);
  --theme-fachkraefte-color-2: var(--color6-2);
  --theme-fachkraefte-color-3: var(--color6-3);
  --theme-spenden-color: var(--color5);
  --theme-spenden-color-1: var(--color5-1);
  --theme-spenden-color-2: var(--color5-2);
  --theme-spenden-color-3: var(--color5-3);
  --theme-kontakt-color: var(--color4);
  --theme-kontakt-color-1: var(--color4-1);
  --theme-kontakt-color-2: var(--color4-2);
  --theme-kontakt-color-3: var(--color4-3);
  --box-widget-bg: var(--color2);
  --box-widget-contrast-bg: var(--color9-1);
  --gradient1: linear-gradient(180deg, var(--white) 0%, var(--grey) 10%);
  --gradient2: linear-gradient(180deg, var(--white) 0%, var(--grey) 100%);
  --site-background: var(--gradient1);
  --header-background: var(--gradient2);
  --logo-color: var(--color9);
  --form-checkbox-label-color: var(--color9);
  --animation-function-in: ease-in-out;
  --animation-function-out: ease-in-out;
  --animation-function-opacity-in: ease-in-out;
  --animation-function-opacity-out: ease-in-out;
  --size-1: 20px;
  --size-2: 30px;
  --size-3: 40px;
  --size-4: 60px;
  --size-5: 80px;
  --slider-height: 900px;
  --grid-column-gap: var(--size-1);
  --grid-mobile-template-columns: [wide-content-begin] 1ch [content-begin
    content-boxes-begin content-center-start] 0.5fr [content-center] 0.5fr
    [content-end content-center-end] 1ch [wide-content-end];
  --grid-template-columns: var(--grid-mobile-template-columns);
  --grid-desktop-template-columns: [wide-content-begin] 1fr [content-begin
    content-boxes-begin] repeat(2, 1fr) [content-center-start] repeat(2, 1fr)
    [content-center-center] repeat(2, 1fr) [content-center-end] repeat(2, 1fr)
    [content-end] 1fr [wide-content-end];
}
@media (min-width: 722px) {
  .mod_article :root {
    --grid-column-gap: var(--size-2);
    --grid-template-columns: var(--grid-desktop-template-columns);
  }
}
@media (min-width: 1200px) {
  .mod_article :root {
    --grid-column-gap: var(--size-4);
  }
}
.mod_article .portrait {
  text-align: center;
  display: inline-grid;
  grid-template-areas: "image" "headline" "text";
  padding-bottom: var(--size-5);
  grid-template-rows: calc(120px + var(--size-1));
}
@media (min-width: 722px) {
  .mod_article .portrait {
    grid-column-end: span 3;
    grid-column-start: auto;
    grid-row-end: auto;
    padding-bottom: 0;
  }
}
@media (min-width: 1200px) {
  .mod_article .portrait {
    grid-column-end: span 2;
  }
}
.mod_article .portrait img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.mod_article .portrait p {
  margin: 0;
}
.mod_article .portrait :is(h1, h2, h3, h4, h5, h6) {
  grid-area: headline;
  font-size: var(--font-size-1);
  margin: 0;
}
.mod_article .portrait :is(h1, h2, h3, h4, h5, h6)::after {
  display: block;
  margin: var(--size-1) auto;
  content: "";
  border-bottom: var(--border);
  height: auto;
  max-width: 50%;
}
.mod_article .portrait figure {
  grid-area: image;
  margin-bottom: var(--size-1);
}
.mod_article .hell::after {
  content: "";
  display: block;
  background-color: var(--theme-color-3);
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
.mod_article .dunkel::after {
  content: "";
  display: block;
  background-color: var(--theme-color-2);
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
.mod_article .mod_eventlist {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--size-3);
  background-color: var(--color-contrast-1);
  grid-column: wide-content-begin/wide-content-end;
  margin-bottom: var(--size-4);
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist {
    padding: 0 var(--size-5) var(--size-5) var(--size-5);
    grid-template-columns: repeat(auto-fit, minmax(25ch, 1fr));
  }
}
.mod_article .mod_eventlist:last-child {
  margin-bottom: calc(var(--size-5) * -1);
}
.mod_article .mod_eventlist > h2 {
  flex-basis: 100%;
  grid-column: 1/-1;
  width: 100%;
  padding: var(--size-3) 0;
  color: var(--headline-color);
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  position: relative;
  font-size: var(--font-size-1);
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist > h2 {
    padding: var(--size-5) 0;
  }
}
.mod_article .mod_eventlist > h2::before, .mod_article .mod_eventlist > h2::after {
  content: "";
  width: 6ch;
  border-bottom: 4px solid var(--headline-color);
  display: block;
  margin: 1rem auto;
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist > h2::before, .mod_article .mod_eventlist > h2::after {
    display: inline-block;
    transform: translateY(-100%);
  }
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist > h2::before {
    margin: 0;
    margin-right: 1.5ch;
  }
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist > h2::after {
    margin: 0;
    margin-left: 2ch;
  }
}
@media (min-width: 722px) {
  .mod_article .mod_eventlist > h2 {
    padding: var(--size-3) 0 0;
  }
}
.mod_article .mod_eventlist > div {
  background-color: var(--color9-3);
}
.mod_article .event {
  width: 100%;
  align-self: stretch;
  justify-self: center;
  padding: var(--size-3);
  hyphens: auto;
  display: grid;
  row-gap: var(--size-1);
}
.mod_article .event h3 {
  font-size: var(--font-size-1);
}
.mod_article .event .headline-date {
  border-bottom: var(--border);
  min-height: 3rem;
  border-color: var(--color-text);
}
.mod_article .event .event-item {
  display: flex;
}
.mod_article .event .event-item::before {
  display: block;
  height: 1em;
  width: 4ch;
  content: "";
  background: no-repeat left center;
  background-size: contain;
}
.mod_article .event .event-item.event-date::before {
  background-image: url("../img/icons/kalender.svg");
}
.mod_article .event .event-item.event-time::before {
  background-image: url("../img/icons/uhr.svg");
}
.mod_article .event .event-item.event-location::before {
  background-image: url("../img/icons/map-point.svg");
}
.mod_article .event.last {
  margin: 0;
}
.mod_article .event .btn {
  font-size: var(--font-size-1);
  align-self: end;
  text-align: center;
}
.mod_article .ce_sliderStart,
.mod_article .slider_wrapper {
  overflow: hidden;
}
.mod_article .ce_sliderStart {
  grid-column: wide-content-begin/wide-content-end;
  position: relative;
  overflow: visible;
}
.mod_article .ce_sliderStart picture {
  display: contents;
}
.mod_article .content-slider :is(h1, h2, h3, h4, h5, h6, p) > span {
  box-decoration-break: clone;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 0.25rem 1ch 0.2rem;
}
.mod_article .content-slider :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.6;
  hyphens: none;
}
.mod_article .content-slider .kapitel-spitzenmarke {
  padding: 0;
  text-align: left;
  text-transform: none;
  font-size: 25px;
  margin: 0;
}
.mod_article .content-slider .kapitel-spitzenmarke span {
  background-color: var(--theme-color);
  color: #fff;
}
.mod_article .content-slider .kapitel-spitzenmarke::after, .mod_article .content-slider .kapitel-spitzenmarke::before {
  display: none;
}
.mod_article .content-slider .ce_hyperlink a {
  position: relative;
  z-index: 2;
}
.mod_article .content-slider .btn {
  margin-top: var(--size-2);
}
.mod_article .content-slider .slider-wrapper {
  --slider-height: 343px;
  height: var(--slider-height);
  max-height: 100%;
  display: flex;
}
@media (min-width: 722px) {
  .mod_article .content-slider .slider-wrapper {
    --slider-height: 666px;
  }
}
.mod_article .content-slider .slider-wrapper > div {
  height: 100%;
}
.mod_article .content-slider .slider-wrapper > div .content-player {
  display: flex;
  place-content: center;
  height: 100%;
}
.mod_article .content-slider .slider-wrapper > div .content-player figure {
  display: contents;
}
.mod_article .content-slider .slider-wrapper > div .content-player video {
  object-fit: cover;
  height: 100%;
  max-width: none;
}
.mod_article .content-slider .slider-wrapper > div .content-layer:first-child,
.mod_article .content-slider .slider-wrapper > div .content-image:first-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.mod_article .content-slider .slider-wrapper > div .content-layer:first-child figure,
.mod_article .content-slider .slider-wrapper > div .content-image:first-child figure {
  height: 100%;
}
.mod_article .content-slider .slider-wrapper > div .content-layer:first-child figure img,
.mod_article .content-slider .slider-wrapper > div .content-image:first-child figure img {
  object-position: center center;
  object-fit: cover;
}
@media (min-width: 722px) {
  .mod_article .content-slider .slider-wrapper > div .content-layer:first-child figure img,
  .mod_article .content-slider .slider-wrapper > div .content-image:first-child figure img {
    height: 100%;
  }
}
.mod_article .slider-item {
  display: grid;
  background-color: var(--theme-color);
}
.mod_article .slider-item > * {
  justify-self: center;
  align-self: center;
}
.mod_article .slider-control {
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}
.mod_article .slider-control :is(.slider-next, .slider-prev) {
  position: absolute;
  top: 0;
  color: var(--color-theme, var(--color-contrast-1));
  background: no-repeat center center;
  width: 4rem;
  height: 100%;
  text-indent: -10000%;
  --bg-direction: 0deg;
  --bg-image: none;
  --bg-from: oklch(from var(--color-contrast-2) l c h / calc(alpha - 0.9));
  --bg-to: oklch(from var(--color-contrast-2) l c h / calc(alpha - 0.5));
  background: var(--bg-image), linear-gradient(var(--bg-direction), var(--bg-from) 0%, var(--bg-to) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: 2rem 2rem, contain;
}
.mod_article .slider-control .slider-prev {
  --bg-direction: to left;
  --bg-image: url("../img/icons/slider-prev.svg");
}
.mod_article .slider-control .slider-next {
  --bg-direction: to right;
  --bg-image: url("../img/icons/slider-next.svg");
}
.mod_article .slider-control .slider-menu {
  position: absolute;
  display: flex;
  justify-content: center;
  bottom: var(--size-4);
  left: 0;
  bottom: 0;
  top: auto;
  margin: 0;
  width: 100%;
  height: var(--size-2);
  font-size: 4rem;
  z-index: 0;
}
.mod_article .slider-control .slider-menu b {
  color: var(--color-contrast-2);
}
.mod_article .slider-control .slider-menu b.active {
  color: var(--theme-color);
}
.mod_article .kontakt_widget,
.mod_article .kontakt-widget {
  background-color: var(--theme-color-3);
  padding: var(--size-2) var(--size-2) var(--size-3);
  width: 100%;
  grid-row-end: span 1;
  max-width: 45ch;
}
.mod_article .kontakt_widget :is(h2, h3, h4, h5, h6),
.mod_article .kontakt-widget :is(h2, h3, h4, h5, h6) {
  font-size: 1rem;
  text-transform: uppercase;
  margin-top: 0;
}
.mod_article .kontakt_widget :is(h2, h3, h4, h5, h6):first-child,
.mod_article .kontakt-widget :is(h2, h3, h4, h5, h6):first-child {
  font-size: 1.5rem;
}
.mod_article .kontakt_widget p,
.mod_article .kontakt-widget p {
  max-width: 50ch;
}
.mod_article .kontakt_widget img + a,
.mod_article .kontakt-widget img + a {
  vertical-align: top;
  display: inline-block;
  margin-left: 2ch;
  color: var(--color-text);
}
.mod_article .content-gallery {
  grid-column: content-begin/content-end;
}
.mod_article .content-gallery ul {
  list-style-type: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: var(--grid-column-gap);
}
.mod_article .infobox {
  border: 0.5ch solid var(--theme-color);
  padding: var(--size-2) var(--size-2) var(--size-3);
  align-self: start;
  margin-block-end: var(--size-3);
}
.mod_article .infobox > * {
  margin-block: 0.5rem;
  width: 100%;
}
.mod_article .infobox > :last-child {
  margin-block-end: 0;
}
.mod_article .infobox :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: 0;
}

.mod_article > .mod_newslist {
  grid-column: wide-content-begin/wide-content-end;
  display: grid;
  grid-gap: var(--grid-column-gap);
  justify-items: center;
}
@media (min-width: 722px) {
  .mod_article > .mod_newslist {
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
  }
}
.mod_article > .mod_newslist.jobs {
  grid-column: content-boxes-begin/content-end;
}
@media (min-width: 722px) {
  .mod_article > .mod_newslist.jobs {
    grid-template-columns: repeat(auto-fit, minmax(43%, 1fr));
  }
}
.mod_article > .mod_newslist .layout_latest {
  display: grid;
  min-height: 19rem;
  width: 100%;
  background-color: var(--box-widget-bg);
  grid-template-rows: 250px auto;
}
.mod_article > .mod_newslist.jobs .layout_latest {
  --color-text: var(--theme-color-contrast);
  --box-widget-bg: var(--theme-color);
  grid-template-rows: auto;
}
.mod_article > .mod_newslist.jobs .layout_latest figure,
.mod_article > .mod_newslist.jobs .layout_latest .categories {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.mod_article > .mod_newslist.jobs .layout_latest .btn {
  --button-color-text: var(--theme-color);
  --button-color-bg: #fff;
}
.mod_article > .mod_newslist figure {
  grid-row: 1;
}
.mod_article > .mod_newslist figure img {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
.mod_article > .mod_newslist .news-teaser-content {
  display: grid;
  justify-items: center;
  grid-row: 2;
  padding: var(--size-2);
  text-align: center;
  color: var(--color-text);
}
.mod_article > .mod_newslist .news-teaser-headline {
  font-size: var(--font-size-2);
  margin-bottom: var(--size-1);
}
.mod_article > .mod_newslist .news-teaser-headline a {
  color: var(--color-text);
  text-decoration: none;
}
.mod_article > .mod_newslist .categories {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.mod_article > .mod_newslist .categories span {
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  padding: 0.25rem 2ch;
  color: var(--theme-color-contrast, var(--button-color-light-bg));
  background-color: var(--theme-color);
}
.mod_article > .mod_newslist .content-text {
  font-weight: 600;
  justify-self: center;
}
.mod_article > .mod_newslist .content-text a {
  color: var(--color-text);
}
.mod_article > .mod_newslist .content-text p {
  color: var(--color-text);
  text-align: center !important;
}
.mod_article > .mod_newslist .more {
  margin-top: var(--size-2);
  align-self: end;
}
.mod_article > .mod_newslist .layout_latest.featured {
  --box-widget-bg: var(--box-widget-contrast-bg);
  --color-text: var(--color-contrast-1);
  --button-color-text: var(--box-widget-contrast-bg);
  --button-color-bg: var(--button-color-light-bg);
}

.caption {
  font-size: 0.7em;
  hyphens: auto;
}

.invisible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.ce_accordion {
  border-bottom: var(--border);
  position: relative;
  max-width: 100%;
  grid-column: content-begin/content-end;
}
.ce_accordion:first-child {
  border-top: var(--border);
}
.ce_accordion img {
  width: auto;
}
.ce_accordion picture {
  place-items: start;
}
.ce_accordion .toggler {
  padding-top: var(--size-2);
  padding-bottom: var(--size-2);
  font-weight: bold;
  cursor: pointer;
  width: 100%;
}
.ce_accordion .toggler::after {
  display: block;
  content: "";
  position: absolute;
  width: 2rem;
  height: 100%;
  right: 0;
  bottom: 0;
  background-image: url("../img/icons/accordion-down.svg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: transform 300ms ease-in-out;
}
.ce_accordion .toggler.ui-accordion-header-active::after {
  transform: rotate(180deg);
}
.ce_accordion .content-text p,
.ce_accordion .content-text.text-with-image p {
  justify-self: start;
  max-width: none;
}
.ce_accordion .content-download {
  --border: none;
  border: none;
}

body:not(.theme-default) #main .inside .mod_article:nth-of-type(2n + 1)::after {
  content: "";
  display: block;
  background-color: var(--theme-color-3);
  width: 100vw;
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}
body:not(.theme-default) #main .inside .mod_article:first-child::after,
body:not(.theme-default) #main .inside .mod_article:nth-of-type(2n)::after {
  display: none;
}

nav ul {
  list-style-type: none;
  padding: 0;
}

.header-nav-container a,
.header-nav-container strong,
.header-nav-container ::before {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 600;
}

.mainnav .level_1 > li > a,
.mainnav .level_1 > li > strong {
  text-transform: uppercase;
}
.mainnav .level_1 > li.active > a,
.mainnav .level_1 > li.active > strong {
  color: var(--theme-color);
}
.mainnav .level_2 {
  display: none;
}
.mainnav .level_2 > li {
  --color-text: var(--theme-color-contrast);
  margin-bottom: 0.25rem;
}
.mainnav .level_2 > li a,
.mainnav .level_2 > li strong {
  background-color: var(--theme-color);
  display: inline-block;
  padding: 0.25rem 1ch;
}
.mainnav .level_2 > li a::before, .mainnav .level_2 > li strong::before {
  display: inline;
  content: "+ ";
}

@media (max-width: 899px) {
  .nav-open {
    overflow: hidden;
  }
  .nav-open .mainnav {
    overflow-y: auto;
  }
  .navtrigger {
    border: none;
    background: none;
  }
  #nav-close {
    display: none;
  }
  .nav-open #nav-close {
    display: block;
  }
  .nav-open .header-nav-container {
    display: block;
  }
  .header-nav-container {
    display: none;
  }
  .mainnav {
    margin-left: 1ch;
    /*li:hover > .level_2 {
      display: block;
    }*/
  }
  .mainnav .level_1 > li {
    display: flex;
    flex-wrap: wrap;
  }
  .mainnav .level_1 > li > a,
  .mainnav .level_1 > li > strong {
    display: flex;
    align-items: center;
    height: 2rem;
  }
  .mainnav .level_1 > li::before {
    display: block;
    margin-right: 2ch;
    width: 5ch;
    content: "";
    background-color: var(--theme-color);
    height: 0.5rem;
    align-self: center;
  }
  .mainnav .level_1 > li:first-child::before {
    --theme-color: #fff;
  }
  .mainnav .level_2 {
    display: none;
    flex-basis: 100%;
    margin-top: var(--size-1);
    margin-bottom: var(--size-1);
  }
  .mainnav .navpoint-open > .level_2 {
    display: block;
  }
  .secondnav {
    margin-left: 1ch;
  }
  .secondnav a {
    display: flex;
    align-items: center;
    min-height: 2rem;
    text-transform: uppercase;
  }
  .secondnav img {
    margin-top: var(--size-1);
    margin-bottom: var(--size-1);
  }
}
@media (min-width: 900px) {
  #hamburger,
  #nav-close {
    display: none;
  }
  .mainnav .level_1 {
    display: flex;
  }
  .mainnav .level_1 > li {
    cursor: pointer;
    margin-right: var(--size-2);
    background: transparent;
  }
}
@media (min-width: 900px) and (min-width: 1200px) {
  .mainnav .level_1 > li {
    margin-right: var(--size-4);
  }
}
@media (min-width: 900px) {
  .mainnav .level_1 > li:first-child ::after {
    --theme-color: #fff;
  }
  .mainnav .level_1 > li > a::after,
  .mainnav .level_1 > li > strong::after {
    display: block;
    width: 100%;
    content: "";
    background-color: var(--theme-color);
    height: 1rem;
  }
  .mainnav .level_1 > li > a,
  .mainnav .level_1 > li > strong {
    background: transparent;
    display: block;
  }
  .mainnav .level_2 {
    display: none;
    position: absolute;
    top: 1rem;
    padding-top: 2rem;
  }
  .mainnav .level_2 > li {
    min-width: 28ch;
    hyphens: auto;
  }
  .mainnav li:hover > .level_2 {
    display: block;
  }
  .secondnav {
    display: none;
  }
}
/*!
 * baguetteBox.js
 * @author  feimosi
 * @version 1.8.2
 * @url https://github.com/feimosi/baguetteBox.js
 */
#baguetteBox-overlay {
  display: none;
  opacity: 0;
  position: fixed;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: #222;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transition: opacity 0.5s ease;
  transition: opacity 0.5s ease;
}

#baguetteBox-overlay.visible {
  opacity: 1;
}

#baguetteBox-overlay .full-image {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
}

#baguetteBox-overlay .full-image figure {
  display: inline;
  margin: 0;
  height: 100%;
}

#baguetteBox-overlay .full-image img {
  display: inline-block;
  width: auto;
  height: auto;
  max-height: 100%;
  max-width: 100%;
  vertical-align: middle;
  -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}

#baguetteBox-overlay .full-image figcaption {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  line-height: 1.8;
  white-space: normal;
  color: #ccc;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  font-family: sans-serif;
}

#baguetteBox-overlay .full-image:before {
  content: "";
  display: inline-block;
  height: 50%;
  width: 1px;
  margin-right: -1px;
}

#baguetteBox-slider {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  -webkit-transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, -webkit-transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease;
  transition: left 0.4s ease, transform 0.4s ease, -webkit-transform 0.4s ease, -moz-transform 0.4s ease;
}

#baguetteBox-slider.bounce-from-right {
  -webkit-animation: bounceFromRight 0.4s ease-out;
  animation: bounceFromRight 0.4s ease-out;
}

#baguetteBox-slider.bounce-from-left {
  -webkit-animation: bounceFromLeft 0.4s ease-out;
  animation: bounceFromLeft 0.4s ease-out;
}

@-webkit-keyframes bounceFromRight {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
}
@keyframes bounceFromRight {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: -30px;
  }
}
@-webkit-keyframes bounceFromLeft {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
}
@keyframes bounceFromLeft {
  0%, 100% {
    margin-left: 0;
  }
  50% {
    margin-left: 30px;
  }
}
.baguetteBox-button#next-button, .baguetteBox-button#previous-button {
  top: 50%;
  top: calc(50% - 30px);
  width: 44px;
  height: 60px;
}

.baguetteBox-button {
  position: absolute;
  cursor: pointer;
  outline: 0;
  padding: 0;
  margin: 0;
  border: 0;
  -moz-border-radius: 15%;
  border-radius: 15%;
  background-color: #323232;
  background-color: rgba(50, 50, 50, 0.5);
  color: #ddd;
  font: 1.6em sans-serif;
  -webkit-transition: background-color 0.4s ease;
  transition: background-color 0.4s ease;
}

.baguetteBox-button:focus, .baguetteBox-button:hover {
  background-color: rgba(50, 50, 50, 0.9);
}

.baguetteBox-button#next-button {
  right: 2%;
}

.baguetteBox-button#previous-button {
  left: 2%;
}

.baguetteBox-button#close-button {
  top: 20px;
  right: 2%;
  right: calc(2% + 6px);
  width: 30px;
  height: 30px;
}

.baguetteBox-button svg {
  position: absolute;
  left: 0;
  top: 0;
}

.baguetteBox-spinner {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
}

.baguetteBox-double-bounce1, .baguetteBox-double-bounce2 {
  width: 100%;
  height: 100%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2s infinite ease-in-out;
  animation: bounce 2s infinite ease-in-out;
}

.baguetteBox-double-bounce2 {
  -webkit-animation-delay: -1s;
  animation-delay: -1s;
}

@-webkit-keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes bounce {
  0%, 100% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
  }
}
form {
  border-top: var(--border);
  border-bottom: var(--border);
}
form :invalid,
form :-moz-submit-invalid,
form :-moz-ui-invalid {
  box-shadow: none;
}
form input,
form textarea {
  width: 100%;
  padding: var(--size-1) 0;
  font-family: Montserrat, sans-serif;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid var(--color-text);
}
form button[type=submit] {
  margin: var(--size-2) 0;
  display: block;
  font-weight: bold;
  font-size: var(--font-size-1);
}
form .widget {
  margin-top: var(--size-1);
}
form .widget label {
  display: block;
  text-transform: uppercase;
  margin-bottom: var(--size-1);
}
form .widget-submit {
  display: flex;
  justify-content: right;
}
@keyframes click-wave {
  0% {
    height: 1.5em;
    width: 4ch;
    opacity: 0.35;
    position: relative;
  }
  100% {
    height: 3em;
    width: 8ch;
    margin-top: -50%;
    margin-left: -50%;
    opacity: 0;
  }
}
form input[type=checkbox],
form input[type=radio] {
  -moz-appearance: none;
  -webkit-appearance: none;
  position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5em;
  width: 4ch;
  transition: all 0.15s ease-out 0s;
  background: transparent url("../img/icons/check-open.svg") no-repeat;
  border: none;
  cursor: pointer;
  display: inline-block;
  margin-right: 0.5rem;
  outline: none;
  position: relative;
  z-index: 99;
}
form input[type=checkbox]:checked,
form input[type=radio]:checked {
  background: transparent url("../img/icons/check-check.svg") no-repeat;
}
form input[type=checkbox]:checked::before,
form input[type=radio]:checked::before {
  height: 1.5em;
  width: 4ch;
  position: absolute;
  display: inline-block;
  font-size: 1em;
  text-align: center;
  line-height: 1.5em;
  border: none;
}
form input[type=checkbox]:checked::after,
form input[type=radio]:checked::after {
  animation: click-wave 0.65s;
  background: var(--color3);
  display: block;
  position: relative;
  z-index: 98;
}
form .radio_container > span,
form .checkbox_container > span {
  display: flex;
  align-items: center;
}
form .radio_container > span input,
form .checkbox_container > span input {
  margin-right: 2ch;
}
form .radio_container > span label,
form .checkbox_container > span label {
  margin: 0;
}
form .wichtig label {
  color: var(--form-checkbox-label-color);
  font-weight: bold;
}

.content-form {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.wide-content {
  margin: 0 var(--size-1);
}
@media (min-width: 722px) {
  .wide-content {
    margin: 0;
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

.back-to-top {
  border-radius: 50%;
  display: flex;
  pointer-events: auto;
  position: fixed;
  bottom: var(--size-3);
  right: var(--size-1);
  height: var(--size-2);
  width: var(--size-2);
  color: var(--theme-color);
  background-size: 1rem;
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1), color 0.4s cubic-bezier(0.86, 0, 0.07, 1), background-color 0.4s cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(0);
  z-index: 9;
  justify-content: center;
  align-items: center;
  border: none;
}
@media (min-width: 722px) {
  .back-to-top {
    height: var(--size-4);
    width: var(--size-4);
  }
}
.back-to-top svg {
  border-radius: 50px;
  display: block;
  width: 100%;
  height: 100%;
  stroke: currentColor;
  fill: currentColor;
  transition: fill 0.25s cubic-bezier(0.86, 0, 0.07, 1);
}

.not-top-anymore .back-to-top {
  transition: transform 0.6s cubic-bezier(0.86, 0, 0.07, 1);
  transform: scale(1);
}

.back-to-top:active svg,
.back-to-top:hover svg {
  animation-name: shake;
  animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
  animation-direction: alternate-reverse;
  animation-iteration-count: infinite;
}

@font-face {
  font-family: "Montserrat";
  font-weight: 300;
  src: local("Montserrat"), url("../fonts/montserrat/montserrat-light-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-light-webfont.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-weight: normal;
  src: local("Montserrat"), url("../fonts/montserrat/montserrat-regular-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-regular-webfont.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 600;
  src: local("Montserrat"), url("../fonts/montserrat/montserrat-semibold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-semibold-webfont.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  src: local("Montserrat"), url("../fonts/montserrat/montserrat-bold-webfont.woff2") format("woff2"), url("../fonts/montserrat/montserrat-bold-webfont.woff") format("woff");
}
* {
  box-sizing: border-box;
  position: relative;
}

body {
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  line-height: 1.54;
  color: var(--color-text);
  min-height: 100vh;
  overflow-x: hidden;
}

a {
  color: var(--color-contrast-2);
}

h1, h2, h3, h4, h5, h6 {
  font-family: Montserrat, sans-serif;
  font-weight: bold;
  /* margin-top: 0.5rem;
  margin-bottom: 0.8rem; */
  line-height: 1.3;
  word-wrap: break-word;
  font-size: 25px;
}

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

ul {
  list-style-type: square;
}

ol {
  list-style-type: upper-roman;
}

blockquote {
  padding-left: 2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.text-hide {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.footer-partner {
  display: flex;
}

.inside {
  width: 100%;
}

.kapitel-spitzenmarke {
  grid-column: 1/-1;
  width: 100%;
  padding: var(--size-3) 0;
  color: var(--headline-color);
  text-transform: uppercase;
  text-align: center;
  display: inline-block;
  position: relative;
  font-size: var(--font-size-1);
}
@media (min-width: 722px) {
  .kapitel-spitzenmarke {
    padding: var(--size-5) 0;
  }
}
.kapitel-spitzenmarke::before, .kapitel-spitzenmarke::after {
  content: "";
  width: 6ch;
  border-bottom: 4px solid var(--headline-color);
  display: block;
  margin: 1rem auto;
}
@media (min-width: 722px) {
  .kapitel-spitzenmarke::before, .kapitel-spitzenmarke::after {
    display: inline-block;
    transform: translateY(-100%);
  }
}
@media (min-width: 722px) {
  .kapitel-spitzenmarke::before {
    margin: 0;
    margin-right: 1.5ch;
  }
}
@media (min-width: 722px) {
  .kapitel-spitzenmarke::after {
    margin: 0;
    margin-left: 2ch;
  }
}

.theme-default {
  background: var(--site-background);
}

#header {
  background: var(--header-background);
  position: sticky;
  top: 0;
  z-index: 10;
  max-height: 100vh;
  overflow-y: auto;
}
@media (min-width: 900px) {
  #header {
    --header-background: #fff;
    overflow: visible;
    padding-top: var(--size-3);
    transition: background-color 150ms linear, padding-top 250ms linear;
  }
}

@media (min-width: 900px) {
  .not-top-anymore #header {
    --header-background: var(--grey);
    padding-top: var(--size-1);
    transition: background-color 250ms linear, padding-top 250ms linear;
  }
}

#header .inside {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  position: relative;
  grid-template-columns: auto 10ch;
}
@media (min-width: 900px) {
  #header .inside {
    display: block;
    z-index: 10;
    height: calc(var(--size-5) * 2);
    transition: height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@media (min-width: 900px) {
  .not-top-anymore #header .inside {
    height: var(--size-5);
    transition: height 250ms cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
}

#logolink {
  grid-row: 1;
  align-self: center;
}
@media (min-width: 900px) {
  #logolink {
    align-self: start;
  }
}
#logolink svg {
  height: 72px;
  transition: height 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 900px) {
  .not-top-anymore #logolink svg {
    height: var(--size-4);
    transition: height 250ms cubic-bezier(0.55, 0.06, 0.68, 0.19);
  }
}

.header-nav-container {
  grid-row: 2;
}
@media (min-width: 900px) {
  .header-nav-container {
    transform: translateY(1rem);
    position: absolute;
    right: 0;
    bottom: 0;
  }
}

.navtrigger {
  grid-column: 2;
  grid-row: 1;
}

body.nav-open #hamburger {
  display: none;
}

body:not(.nav-open) #nav-close {
  display: none;
}

#logolink {
  width: 100%;
}

#logo path {
  fill: var(--logo-color);
}

#headerfacebook {
  display: none;
}
@media (min-width: 900px) {
  #headerfacebook {
    display: block;
    position: absolute;
    top: 0;
    right: var(--size-1);
    height: var(--size-2);
    width: var(--size-2);
  }
}
#headerfacebook img {
  height: 100%;
  width: 100%;
}

#main {
  max-width: 1400px;
  margin: 0 auto;
}
#footer {
  background-color: var(--grey);
}
#footer img {
  width: 100%;
  object-fit: contain;
}

#observeable {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
}

:root {
  --font-size-1: 16px;
  --font-size-2: 25px;
  --color1: oklch(71.9% 0.0985 191);
  --color1-1: oklch(75.3% 0.105 192);
  --color1-2: oklch(87.4% 0.0496 219.2);
  --color1-3: oklch(92.1% 0.0233 193.4);
  --color2: oklch(100% 0 90);
  --color3: oklch(34.8% 0 146.3);
  --color4: oklch(76.8% 0.1423 62.3);
  --color4-1: oklch(80.4% 0.1164 64.9);
  --color4-2: oklch(88.7% 0.059 66.9);
  --color4-3: oklch(92.9% 0.0301 65.8);
  --color5: oklch(53.5% 0.1655 36.3);
  --color5-1: oklch(61% 0.1329 37.7);
  --color5-2: oklch(78.8% 0.0616 37.7);
  --color5-3: oklch(87.9% 0.0297 36.2);
  --color6: oklch(52.9% 0.1383 328.3);
  --color6-1: oklch(61.6% 0.1104 327.4);
  --color6-2: oklch(80.7% 0.0592 335.3);
  --color6-3: oklch(88.6% 0.0249 327.8);
  --color7: oklch(61.9% 0.1571 153.7);
  --color7-1: oklch(67.7% 0.14 158.8);
  --color7-2: oklch(81.9% 0.0772 164.7);
  --color7-3: oklch(89.4% 0.0394 165.5);
  --color8: oklch(88.3% 0.1677 99.9);
  --color8-1: oklch(89.8% 0.1361 99.5);
  --color8-2: oklch(93.4% 0.074 99.3);
  --color8-3: oklch(95.5% 0.0384 99);
  --color9: oklch(49.4% 0.1348 249.6);
  --color9-1: oklch(58.2% 0.113 244.5);
  --color9-2: oklch(77.8% 0.0565 241.1);
  --color9-3: oklch(87.6% 0.0274 241.2);
  --grey: oklch(92.5% 0.0104 247.9);
  --white: var(--color2);
  --color-text: var(--color3);
  --color-link: var(--color5);
  --color-contrast-1: var(--color2);
  --color-contrast-2: var(--color3);
  --color-contrast-1-bg: var(--color9);
  --headline-color: var(--color9);
  --button-color-text: var(--color2);
  --button-color-bg: var(--color9);
  --border-size: 3px;
  --border: var(--border-size) solid var(--color9);
  --button-color-light-text: var(--color9);
  --button-color-light-bg: var(--color2);
  --theme-verein-color: var(--color9);
  --theme-verein-color-1: var(--color9-1);
  --theme-verein-color-2: var(--color9-2);
  --theme-verein-color-3: var(--color9-3);
  --theme-kinder-color: var(--color8);
  --theme-kinder-color-1: var(--color8-1);
  --theme-kinder-color-2: var(--color8-2);
  --theme-kinder-color-3: var(--color8-3);
  --theme-eltern-color: var(--color1);
  --theme-eltern-color-1: var(--color1-1);
  --theme-eltern-color-2: var(--color1-2);
  --theme-eltern-color-3: var(--color1-3);
  --theme-familie-color: var(--color7);
  --theme-familie-color-1: var(--color7-1);
  --theme-familie-color-2: var(--color7-2);
  --theme-familie-color-3: var(--color7-3);
  --theme-fachkraefte-color: var(--color6);
  --theme-fachkraefte-color-1: var(--color6-1);
  --theme-fachkraefte-color-2: var(--color6-2);
  --theme-fachkraefte-color-3: var(--color6-3);
  --theme-spenden-color: var(--color5);
  --theme-spenden-color-1: var(--color5-1);
  --theme-spenden-color-2: var(--color5-2);
  --theme-spenden-color-3: var(--color5-3);
  --theme-kontakt-color: var(--color4);
  --theme-kontakt-color-1: var(--color4-1);
  --theme-kontakt-color-2: var(--color4-2);
  --theme-kontakt-color-3: var(--color4-3);
  --box-widget-bg: var(--color2);
  --box-widget-contrast-bg: var(--color9-1);
  --gradient1: linear-gradient(180deg, var(--white) 0%, var(--grey) 10%);
  --gradient2: linear-gradient(180deg, var(--white) 0%, var(--grey) 100%);
  --site-background: var(--gradient1);
  --header-background: var(--gradient2);
  --logo-color: var(--color9);
  --form-checkbox-label-color: var(--color9);
  --animation-function-in: ease-in-out;
  --animation-function-out: ease-in-out;
  --animation-function-opacity-in: ease-in-out;
  --animation-function-opacity-out: ease-in-out;
  --size-1: 20px;
  --size-2: 30px;
  --size-3: 40px;
  --size-4: 60px;
  --size-5: 80px;
  --slider-height: 900px;
  --grid-column-gap: var(--size-1);
  --grid-mobile-template-columns: [wide-content-begin] 1ch [content-begin
    content-boxes-begin content-center-start] 0.5fr [content-center] 0.5fr
    [content-end content-center-end] 1ch [wide-content-end];
  --grid-template-columns: var(--grid-mobile-template-columns);
  --grid-desktop-template-columns: [wide-content-begin] 1fr [content-begin
    content-boxes-begin] repeat(2, 1fr) [content-center-start] repeat(2, 1fr)
    [content-center-center] repeat(2, 1fr) [content-center-end] repeat(2, 1fr)
    [content-end] 1fr [wide-content-end];
}

@media (min-width: 722px) {
  :root {
    --grid-column-gap: var(--size-2);
    --grid-template-columns: var(--grid-desktop-template-columns);
  }
}
@media (min-width: 1200px) {
  :root {
    --grid-column-gap: var(--size-4);
  }
}
#supporters {
  grid-column: wide-content-begin/wide-content-end;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: calc(5 * var(--size-4));
  background-color: var(--white);
}
#supporters::after {
  display: block;
  content: "";
  background-color: #fff;
  height: calc(3 * var(--size-4));
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  top: 0;
  right: 0;
}
#supporters > * {
  z-index: 1;
}
#supporters .first {
  flex-basis: 100%;
}

#telefonnummern {
  grid-column: wide-content-begin/wide-content-end;
  display: flex;
  flex-wrap: wrap;
}
#telefonnummern img {
  object-fit: contain;
  width: 100%;
}
#telefonnummern .content-hyperlink {
  min-height: calc(5 * var(--size-4));
  text-align: centeR;
  flex-basis: 100%;
}
@media (min-width: 722px) {
  #telefonnummern .content-hyperlink {
    flex-basis: 50%;
  }
}
#telefonnummern .first {
  background-color: var(--color8);
}
#telefonnummern .last {
  background-color: var(--color4);
}

#footer-navigation {
  background-color: var(--color-contrast-1-bg);
  display: flex;
  align-items: center;
  flex-direction: column;
}
#footer-navigation a,
#footer-navigation strong {
  color: var(--color-contrast-1);
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
}
#footer-navigation nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#footer-navigation nav li {
  margin-left: 1ch;
  margin-right: 1ch;
}
#footer-navigation .content-hyperlink {
  margin-top: var(--size-4);
  margin-bottom: var(--size-4);
}
#footer-navigation .mod_customnav {
  margin-bottom: var(--size-3);
}

#kontakt-home {
  display: block;
  padding: 0 var(--size-1);
}
@media (min-width: 900px) {
  #kontakt-home {
    display: grid;
    padding: 0;
  }
}
#kontakt-home::after {
  background-color: var(--white);
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  top: 0;
  z-index: -1;
}
#kontakt-home > .content-image {
  margin-bottom: 0;
  grid-column-end: wide-content-end;
  justify-self: stretch;
}
#kontakt-home > .content-image img {
  displaY: block;
  object-fit: cover;
  height: 100%;
}
#kontakt-home > .content-image figure {
  height: 100%;
  margin-bottom: 0;
}
#kontakt-home > .content-spalte-1 {
  padding: var(--size-1) 0 0;
  padding: var(--size-5) 0;
}
#kontakt-home > .content-spalte-1 .content-image img {
  height: auto;
  width: auto;
  max-width: 100%; /* ansonsten overflowed es rechts */
}
#kontakt-home > .content-spalte-1 .block {
  margin-bottom: var(--size-1);
}

#mitarbeiterinnen-liste {
  padding-top: var(--size-3);
}

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