/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* normalize.css liegt in der Schicht "reset" und damit unter rc-base.
   Ohne das schluege sein "h1 { font-size: 2em }" die Ueberschriften der
   Basis, und die Groessen aus dem Styling-Tab kaemen nie an. Der Inhalt
   ist unveraendert, nur eingeklammert. Die Reihenfolge der Schichten
   steht in rc-base.css. */
@layer reset {

/* 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;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * 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 {
  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 {
  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"] {
  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;
}

} /* Ende @layer reset */
/*=======================================================
Die Stellschrauben dieser Seite

Die Namen sind aelter als rc-base und bleiben stehen, damit das uebrige
CSS unveraendert weiterlaeuft. Ihre Werte kommen jetzt aus der Basis:
wer im Styling-Tab die Primaerfarbe aendert, faerbt damit Knoepfe, Links
und Aufzaehlungspunkte dieser Seite mit.
=======================================================*/
:root {
  --font-family-primary: var(--rc-font-family);
  --font-family-secondary: var(--rc-font-family-heading);
  --font-family-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --color-primary: var(--rc-color-primary);

  /* Frueher ein von Hand gewaehlter dunklerer Ton. Die Basis loest den
     Zeigerzustand ueber Helligkeit; color-mix macht daraus wieder eine
     Farbe, damit die Knopfregel unten stehen bleiben kann. */
  --color-primary-hover: color-mix(in srgb, var(--rc-color-primary) 88%, #000);

  /* Vier weitere Namen standen hier: --font-color-primary,
     --font-color-secondary, --color-secondary und --color-secondary-hover.
     Sie faerbten Ueberschriften, Absaetze, Aufzaehlungspunkte und
     Nebenknoepfe. All das kommt jetzt aus der Basis, keine Regel dieser
     Datei liest sie noch, und keine Kampagne setzt sie. */

  --page-max-width: 1280px;
  --page-padding: 20px;
}

/*=======================================================
Sets the global box-sizing value to border-box.
=======================================================*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*=======================================================
Responsive images

height: auto ist Pflicht: bringt ein Bild width- und height-Attribute
mit, verzerrt max-width es sonst, sobald der Platz schmaler wird.
=======================================================*/
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.page__wrapper {
  margin: 0;
  padding: 1px 0;
}

.page-component {
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: var(--page-max-width);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}
.page-component.page-component--full-width {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--page-compontent-background, #f3f3f3);
}
.page-component.page-component--full-width .page-component__inner {
  padding-top: 3rem;
  padding-bottom: 3rem;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
  max-width: var(--page-max-width);
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}

/*=======================================================
Style adjustments for the calendar component
=======================================================*/
.page-component.calendar .mainpage {
  padding: 0;
}
.page-component.calendar.calendar--background .mainpage {
  padding: var(--page-padding) 0;
}
.page-component.calendar.page-component--full-width .mainpage {
  padding: var(--page-padding);
}

/* nunito-regular - latin */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/nunito-v12-latin-regular.eot"); /* IE9 Compat Modes */
  src: local("Nunito Regular"), local("Nunito-Regular"), url("../fonts/nunito-v12-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v12-latin-regular.woff2") format("woff2"), url("../fonts/nunito-v12-latin-regular.woff") format("woff"), url("../fonts/nunito-v12-latin-regular.ttf") format("truetype"), url("../fonts/nunito-v12-latin-regular.svg#Nunito") format("svg"); /* Legacy iOS */
}
/* nunito-italic - latin */
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/nunito-v12-latin-italic.eot"); /* IE9 Compat Modes */
  src: local("Nunito Italic"), local("Nunito-Italic"), url("../fonts/nunito-v12-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v12-latin-italic.woff2") format("woff2"), url("../fonts/nunito-v12-latin-italic.woff") format("woff"), url("../fonts/nunito-v12-latin-italic.ttf") format("truetype"), url("../fonts/nunito-v12-latin-italic.svg#Nunito") format("svg"); /* Legacy iOS */
}
/* nunito-700 - latin */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/nunito-v12-latin-700.eot"); /* IE9 Compat Modes */
  src: local("Nunito Bold"), local("Nunito-Bold"), url("../fonts/nunito-v12-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v12-latin-700.woff2") format("woff2"), url("../fonts/nunito-v12-latin-700.woff") format("woff"), url("../fonts/nunito-v12-latin-700.ttf") format("truetype"), url("../fonts/nunito-v12-latin-700.svg#Nunito") format("svg"); /* Legacy iOS */
}
/* nunito-700italic - latin */
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/nunito-v12-latin-700italic.eot"); /* IE9 Compat Modes */
  src: local("Nunito Bold Italic"), local("Nunito-BoldItalic"), url("../fonts/nunito-v12-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/nunito-v12-latin-700italic.woff2") format("woff2"), url("../fonts/nunito-v12-latin-700italic.woff") format("woff"), url("../fonts/nunito-v12-latin-700italic.ttf") format("truetype"), url("../fonts/nunito-v12-latin-700italic.svg#Nunito") format("svg"); /* Legacy iOS */
}
/*=======================================================
Global font configuration
=======================================================*/
html {
  font-size: 16px;
  line-height: 1.3;
  font-family: var(--font-family-primary, var(--font-family-fallback));
}
@media screen and (min-width: 768px) {
  html {
    font-size: 18px;
  }
}
@media screen and (min-width: 992px) {
  html {
    font-size: 20px;
  }
}

/* Die Grundschrift oben waechst mit dem Fenster, und der Fliesstext geht
   mit. Die Zeile steht in der Schicht "baustein": sie gewinnt gegen die
   16px der Basis und verliert gegen den Styling-Tab. Wer dort eine
   Textgroesse einstellt, bekommt sie also auch. */
@layer baustein {
  .rc-page { --rc-font-size-body: 1rem; }
}

/* Ueberschriften und Absaetze kommen aus rc-base. Was hier stand, kannte
   nur Abstand, Fettung und eine Farbe: keine Groessen, keine eigene
   Schrift, keine Abstufung zwischen h1 und h4. Die Basis kann das je
   Ebene, und der Styling-Tab reicht bis dorthin durch. */

p.leadin {
  font-size: 1.1rem;
}

/*=======================================================
Text alignment utility classes
=======================================================*/
.text--left {
  text-align: left;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.text--justify {
  text-align: justify;
}

/*=======================================================
Links kommen aus rc-base: unterstrichen, in Textfarbe.

Hier stand ein Link in der Primaerfarbe ohne Unterstreichung; die fuhr
erst bei Hover ein. Auf dem Telefon gibt es kein Hover, dort war ein Link
also nur an der Farbe zu erkennen. Und die Farbe kommt seit dem Anschluss
an die Basis aus dem Styling-Tab: steht dort ein dunkler Ton, steht der
Link fast unsichtbar im Fliesstext.
=======================================================*/

/*=======================================================
Aufzaehlungen kommen aus rc-base.

Hier standen vierzig Zeilen, die Punkte und Nummern mit :before von Hand
nachbauten, samt verschachtelter Zaehlung "1.1.". In der Datenbank
benutzt eine von 168 Kampagnen ueberhaupt eine Liste und keine eine
verschachtelte. Mit der Basis greifen dafuer Zeichen, Einzug und Abstand
aus dem Styling-Tab.
=======================================================*/

.button {
  --button-base: 1rem;

  /* inline-flex statt inline-block, damit die Beschriftung mittig bleibt,
     wenn die Trefferhoehe unten die Hoehe bestimmt. */
  display: inline-flex;
  align-items: center;
  justify-content: center;

  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
  text-align: center;

  /* Der Gegenwert zur Primaerfarbe kommt aus der Basis: wer dort ein
     helles Gruen einstellt, bekommt dunkle Schrift statt weisser. */
  color: var(--rc-color-on-primary);
  background-color: var(--color-primary);

  /* Ein Knopf ist mindestens so hoch, wie ein Daumen breit ist. Auf dem
     Telefon war er das bisher nicht: 2.5 mal 16px sind 40px. */
  min-height: max(calc(var(--button-base) * 2.5), var(--rc-min-height-touch));
  padding: calc(var(--button-base) * 0.5) calc(var(--button-base) * 0.75);
  font-size: var(--button-base);
  transition: border-color 0.3s ease-in-out, background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}
.button.button--small {
  --button-base: .8rem;
}
.button.button--large {
  --button-base: 1.2rem;
}
.button:hover {
  text-decoration: none;
}
.button.button--rounded {
  border-radius: var(--rc-radius-small);
}
.button.button--full-rounded {
  border-radius: calc(var(--button-base) * 1.25);
  padding: calc(var(--button-base) * 0.5) calc(var(--button-base) * 1.25);
}
.button:hover, .button:focus {
  background-color: var(--color-primary-hover);
}

.icon {
  --reddit: #ff4500;
  --instagram: #d62976;
  --facebook: #3b5998;
  --linkedin: #0077b5;
  --xing: #026466;
  --tiktok: #69C9D0;
  --snapchat: #fffc00;
  --pinterest: #bd081c;
  --twitter: #000000;
  --youtube: #ff0000;
  --whatsapp: #25d366;
  --website: #000000;
  --link: #000000;
  --mail: #000000;
  width: 1.2rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon svg {
  width: inherit;
  height: inherit;
}
.icon svg path {
  transition: ease-out fill 0.3s;
}
.icon.icon--reddit:hover svg path {
  fill: var(--reddit);
}
.icon.icon--instagram:hover svg path {
  fill: var(--instagram);
}
.icon.icon--facebook:hover svg path {
  fill: var(--facebook);
}
.icon.icon--linkedin:hover svg path {
  fill: var(--linkedin);
}
.icon.icon--xing:hover svg path {
  fill: var(--xing);
}
.icon.icon--pinterest:hover svg path {
  fill: var(--pinterest);
}
.icon.icon--twitter:hover svg path {
  fill: var(--twitter);
}
.icon.icon--youtube:hover svg path {
  fill: var(--youtube);
}
.icon.icon--whatsapp:hover svg path {
  fill: var(--whatsapp);
}
.icon.icon--website:hover svg path {
  fill: var(--website);
}
.icon.icon--link:hover svg path {
  fill: var(--link);
}
.icon.icon--mail:hover svg path {
  fill: var(--mail);
}
.icon.icon--tiktok:hover svg path {
  fill: var(--tiktok);
}
.icon.icon--snapchat:hover svg path {
  fill: var(--snapchat);
}

.social-share .social-share__wrapper {
  position: relative;
  padding: 0.25rem;
}
.social-share .social-share__links {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 0.25rem;
  border-radius: 0.15rem;
  background: #fff;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.15);
  z-index: 501;
  opacity: 0;
  visibility: hidden;
  transition: opacity ease-out 0.3s, visibility ease-out 0.3s;
}
.social-share .social-share__action {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
}
.social-share .social-share__action svg {
  width: 1.2rem;
  height: 1.2rem;
}
.social-share label[for=social-share__observer] {
  border-radius: 0.15rem;
  transition: background-color ease-out 0.3s;
}
.social-share label[for=social-share__observer]:hover {
  background-color: #f3f3f3;
}
.social-share:after {
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  display: inline-block;
  transition: opacity ease-out 0.3s, visibility ease-out 0.3s;
}

#social-share__observer {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
#social-share__observer:focus ~ #social-share * label {
  background-color: #f3f3f3;
}

#social-share__observer:checked ~ #social-share:after,
#social-share__observer:checked ~ #social-share .social-share__links {
  opacity: 1;
  visibility: visible;
}

header:first-child {
  margin-top: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer {
  font-size: 0.8rem;
}
.footer .footer__links {
  list-style: none;
  padding-left: 0;
  text-align: center;
}
.footer .footer__links li {
  margin: 0.2rem 0;
}
@media screen and (min-width: 768px) {
  .footer .footer__links {
    display: flex;
    justify-content: center;
  }
  .footer .footer__links li {
    margin: 0.2rem;
  }
}
/* Impressum, Datenschutz und Teilnahmebedingungen kommen ebenfalls aus
   rc-base. Sie standen in #999 auf Weiss, ohne Unterstreichung: ein
   Kontrast von 2,9 zu 1, wo 4,5 gefordert sind. Fuer Pflichtangaben ist
   das die falsche Stelle zum Sparen. */

.cards {
  display: grid;
  grid-gap: var(--page-padding);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
@media screen and (min-width: 576px) {
  .cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}
.cards .card {
  border-radius: 0.25rem;
  background-color: #fff;
  position: relative;
}
.cards .card:after {
  border-radius: inherit;
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: " ";
  box-shadow: 0 2rem 3rem 0 rgba(0, 0, 0, 0.1);
}
.cards .card .card__visual {
  overflow: hidden;
  border-radius: inherit;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.cards .card .card__content {
  padding: 1rem;
}

.social-media-links {
  margin: 1rem 0;
  display: grid;
  grid-gap: 0.5rem;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, 1.2rem);
}

.call-to-action {
  text-align: center;
}
@media screen and (min-width: 768px) {
  .call-to-action {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .call-to-action > div:first-child {
    margin-right: 1rem;
  }
  .call-to-action > div:first-child p:last-child {
    margin-bottom: 0;
  }
}

.image-display .image-display--wall {
  --image-display-item-dimension: 120px;
}
.image-display .image-display--wall .image-display__wrapper {
  display: grid;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
}
@media screen and (min-width: 576px) {
  .image-display .image-display--wall .image-display__wrapper {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  }
}
@media screen and (min-width: 768px) {
  .image-display .image-display--wall .image-display__wrapper {
    grid-template-columns: repeat(auto-fit, minmax(var(--image-display-item-dimension, 120px), 1fr));
  }
}
.image-display .image-display--wall .image-display__item {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.image-display .image-display--wall .image-display__item img {
  max-height: var(--image-display-item-dimension, 120px);
}
.image-display .image-display--carousel {
  --image-display-speed: calc(var(--image-display-count) * var(--image-display-single-speed, 5s));
  --image-display-item-dimension: 120px;
  overflow: hidden;
}
@media screen and (min-width: 768px) {
  .image-display .image-display--carousel {
    --image-display-item-dimension: 160px;
  }
}
@media screen and (min-width: 992px) {
  .image-display .image-display--carousel {
    --image-display-item-dimension: 200px;
  }
}
.image-display .image-display--carousel .image-display__wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: calc(var(--image-display-item-dimension) * var(--image-display-count) * 3);
  animation: infiniteScroll var(--image-display-speed) linear infinite;
}
.image-display .image-display--carousel .image-display__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  width: var(--image-display-item-dimension);
}
.image-display .image-display--carousel .image-display__item img {
  max-height: var(--image-display-item-dimension);
}
@keyframes infiniteScroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(var(--image-display-item-dimension) * -1 * var(--image-display-count)));
  }
}
@media screen and (min-width: 768px) {
  @keyframes infiniteScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(var(--image-display-item-dimension) * -1 * var(--image-display-count)));
    }
  }
}
@media screen and (min-width: 992px) {
  @keyframes infiniteScroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(var(--image-display-item-dimension) * -1 * var(--image-display-count)));
    }
  }
}
.image-display img {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

#modal-backdrop {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.6);
}

#modal-backdrop > svg {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

#modal-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

#iframe {
  max-width: 645px;
  width: 100%;
  max-height: 900px;
  height: 100%;
  position: relative;
  z-index: 1000;
  aspect-ratio: 645/900;
}

body.preview-mode::after {
  /* content: "ACHTUNG: PREVIEW MODUS";
  background: url("https://admin.happymo.re/images/dangerzone.svg") top left repeat-x;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 32px;
  font-weight: bolder;
  text-shadow: 0 0 6px black; */
  display: none;
}
body.preview-mode #preview_mode_warning {
  background: url("https://admin.happymo.re/images/dangerzone.svg") top left repeat-x;
  height: 60px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999999;
  color: white;
  text-align: center;
  line-height: 60px;
  font-size: 32px;
  font-weight: bolder;
  text-shadow: 0 0 6px black;
}
body.preview-mode #preview_mode_warning a {
  background-color: red;
  padding: 2px 12px;
  font-size: 24px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
  text-shadow: none;
  font-weight: 400;
}

.head__banner,
.footer__banner {
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  max-width: 1280px;
  padding-left: var(--page-padding);
  padding-right: var(--page-padding);
}
.head__banner .head__banner__image,
.footer__banner .footer__banner__image {
  width: auto;
  height: auto;
  max-height: 474px;
  -o-object-fit: cover;
     object-fit: cover;
}