@charset "UTF-8";
/*  was 2.7rem  */
/***  mixins ***/
@font-face {
  font-family: "mulish";
  font-style: normal;
  font-weight: 100 1000;
  src: url("/shared/fonts/Mulish-VariableFont_wght.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Bitter";
  font-style: normal;
  font-weight: normal;
  src: local("Bitter Regular"), url("/shared/fonts/Bitter-Regular.ttf") format("truetype");
}
/*  OCMS stage banner (sites/shared/css/stagebanner.scss), pushes fixed headers down  */
/* Stage banner of the OCMS staging preview (ocms_ClientController.StageBannerHtml()).
   Shared by all sites: only generic values / CSS custom properties with fallbacks, because this file cannot know
   a site's tokens. A site tunes the look by setting the --ocms-stagebanner-* properties on :root or by overriding
   .ocms-stagebanner in its own SCSS. A site with a fixed header must offset it by the banner height, e.g.
   body:has(.ocms-stagebanner) header { top: var(--ocms-stagebanner-height, 2rem); } (see fuchs_header_footer.scss).
   Bundle order: include after the site's *_variables.scss, before the layout files. */
.ocms-stagebanner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000; /* above fixed headers and flyouts of the sites */
  box-sizing: border-box;
  height: var(--ocms-stagebanner-height, 2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0 0.75rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 0.8125rem;
  line-height: 1;
  background-color: var(--ocms-stagebanner-bg, #ffc107);
  color: var(--ocms-stagebanner-color, #212529);
  /* dev stage (Development environment only) is visually distinct from the set preview */
}
.ocms-stagebanner a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}
.ocms-stagebanner a:hover, .ocms-stagebanner a:focus-visible {
  text-decoration: none;
}
.ocms-stagebanner--dev {
  background-color: var(--ocms-stagebanner-bg-dev, #0d6efd);
  color: var(--ocms-stagebanner-color-dev, #ffffff);
}
@media (min-width: 561px) {
  .ocms-stagebanner {
    font-size: 0.875rem;
  }
}

/* Visible editor hint for a section whose partial failed to render (ocms_ClientController_multidomain.SectionRenderFailed).
   Only emitted on staged requests (set/dev), never on pub. Tunable via --ocms-section-error-* custom properties. */
.ocms-section-error {
  box-sizing: border-box;
  margin: 0.75rem auto;
  padding: 0.75rem 1rem;
  max-width: var(--ocms-section-error-max-width, 60rem);
  border: 0.125rem dashed var(--ocms-section-error-border, #b02a37);
  background-color: var(--ocms-section-error-bg, #f8d7da);
  color: var(--ocms-section-error-color, #58151c);
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 561px) {
  .ocms-section-error {
    padding: 1rem 1.5rem;
  }
}

*, :after, :before {
  box-sizing: border-box;
  transition: visibility linear 1s, opacity linear 1s;
  -moz-transition: visibility linear 1s, opacity linear 1s;
  -webkit-transition: visibility linear 1s, opacity linear 1s;
}

body, html {
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  image-rendering: auto;
  shape-rendering: geometricprecision;
  color-rendering: optimizeQuality;
  background-color: #FFF;
}

html {
  font-family: "mulish", Arial, sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 100%;
}

body {
  margin: 0;
  font-family: "mulish", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #000;
  background-color: #FFF;
  --dnback: #FFF;
  --dnback50: rgba(255, 255, 255, 0.4823529412);
  --dnback25: rgba(255, 255, 255, 0.2078431373);
  --dnback75: rgba(255, 255, 255, 0.737254902);
}
body:not(.night) .night {
  display: none !important;
}
body.night {
  background-color: #334E5F;
  --dnback: #334E5F;
  --dnback50: rgba(51, 78, 95, 0.4823529412);
  --dnback25: rgba(51, 78, 95, 0.2078431373);
  --dnback75: rgba(51, 78, 95, 0.737254902);
  color: #FFF;
}
body.night .day {
  display: none !important;
}

main {
  position: relative;
  min-height: 100vh;
  z-index: 1;
}

a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}
a:hover, a:focus, a:visited {
  text-decoration: none;
  color: inherit;
}

.modalbg {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(150, 150, 150, 0.7);
  z-index: 10;
}
.modalbg .modal {
  width: 600px;
  max-width: 80vw;
  max-width: calc(100vw - 40px);
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  background: #FFF;
  border-radius: 5px;
  margin-top: 10vh;
  max-height: 80vh;
  max-height: calc(90vh - 20px);
  position: relative;
}
.modalbg .modal .modalclose {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDMyIDMyIiBoZWlnaHQ9IjMycHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJDYW5jZWwiPjxwYXRoIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2LDBDNy4xNjMsMCwwLDcuMTYzLDAsMTZjMCw4LjgzNiw3LjE2MywxNiwxNiwxNiAgIGM4LjgzNiwwLDE2LTcuMTYzLDE2LTE2QzMyLDcuMTYzLDI0LjgzNiwwLDE2LDB6IE0xNiwzMEM4LjI2OCwzMCwyLDIzLjczMiwyLDE2QzIsOC4yNjgsOC4yNjgsMiwxNiwyczE0LDYuMjY4LDE0LDE0ICAgQzMwLDIzLjczMiwyMy43MzIsMzAsMTYsMzB6IiBmaWxsPSIjMTIxMzEzIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiLz48cGF0aCBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0yMi43MjksMjEuMjcxbC01LjI2OC01LjI2OWw1LjIzOC01LjE5NSAgIGMwLjM5NS0wLjM5MSwwLjM5NS0xLjAyNCwwLTEuNDE0Yy0wLjM5NC0wLjM5LTEuMDM0LTAuMzktMS40MjgsMGwtNS4yMzEsNS4xODhsLTUuMzA5LTUuMzFjLTAuMzk0LTAuMzk2LTEuMDM0LTAuMzk2LTEuNDI4LDAgICBjLTAuMzk0LDAuMzk1LTAuMzk0LDEuMDM3LDAsMS40MzJsNS4zMDEsNS4zMDJsLTUuMzMxLDUuMjg3Yy0wLjM5NCwwLjM5MS0wLjM5NCwxLjAyNCwwLDEuNDE0YzAuMzk0LDAuMzkxLDEuMDM0LDAuMzkxLDEuNDI5LDAgICBsNS4zMjQtNS4yOGw1LjI3Niw1LjI3NmMwLjM5NCwwLjM5NiwxLjAzNCwwLjM5NiwxLjQyOCwwQzIzLjEyMywyMi4zMDgsMjMuMTIzLDIxLjY2NywyMi43MjksMjEuMjcxeiIgZmlsbD0iIzEyMTMxMyIgZmlsbC1ydWxlPSJldmVub2RkIi8+PC9nPjxnLz48Zy8+PGcvPjxnLz48Zy8+PGcvPjwvc3ZnPg==") no-repeat center center/20px #FFF;
  height: 20px;
  width: 20px;
  position: absolute;
  right: -5px;
  top: -5px;
  border-radius: 10px;
}

a.dpl {
  text-decoration: underline !important;
}

div.msframe {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
}

#pw {
  position: absolute;
  right: 0;
  bottom: 1rem;
}

/* ── OCMS stage banner (preview of unpublished changes) ────────────────────────────────────────────
   The banner (sites/shared/css/stagebanner.scss) is a fixed bar on top of the viewport. Everything that is
   fixed to the top edge must move down by its height; the normal flow gets the same amount as padding. */
:root {
  --ocms-stagebanner-height: 2rem;
}

body:has(.ocms-stagebanner) {
  padding-top: 2rem; /* header is in the normal flow: only the content must not be hidden */
}

section, footer {
  overflow: hidden; /* nothing should be displayed outside of the bounds */
  position: relative;
}

header, footer, main {
  width: 100%;
}

:root {
  --main-dark: $cli_dunkel;
  --main-light: $cli_weiss;
  --scc: 1;
  --mc: 0;
  --vbarwidth: 1.5rem;
  --iph: 0.7rem;
}
@media (min-width: 768px) {
  :root {
    --scc: 2;
    --mc: 1;
    --vbarwidth: 3rem;
    --iph: 1.3rem;
  }
}
@media (min-width: 1200px) {
  :root {
    --scc: 3;
    --vbarwidth: 8rem;
    --iph: 2.3rem;
  }
}
section, header, footer {
  padding: 0;
  /* height MUST NOT be set, otherwise the content will be cut off */
  min-height: inherit;
  margin: 0;
  /* of not defined differently, the normal behavior is: fit to section */
}
section .frm, header .frm, footer .frm {
  position: relative;
  height: 100%;
  width: 100%;
}
@media (min-width: 1920px) {
  section .frm.outer, header .frm.outer, footer .frm.outer {
    width: 1920px;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
}
section .frm.inner, header .frm.inner, footer .frm.inner {
  overflow: visible;
  image-rendering: optimizeQuality;
  display: grid;
  grid-template-columns: calc(var(--vbarwidth) + var(--iph)) repeat(var(--scc), 1fr) var(--iph);
  padding: 0;
}
section.hnf, header.hnf, footer.hnf {
  min-height: 5rem;
}

section {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  font-size: clamp(1.05rem, calc(1.05rem + 0.3 * ((100vw - 361px) / 1559)), 1.35rem);
}
section .headline, section h1, section h2 {
  line-height: 1.3;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: left;
}
section .headline p, section h1 p, section h2 p {
  font-family: "Bitter", Georgia, Times, Times New Roman, serif;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  line-height: 1.65;
  font-size: clamp(1.05rem, calc(1.05rem + 0.3 * ((100vw - 361px) / 1559)), 1.35rem);
  line-height: 1.65;
  margin: 0;
}
section .headline p.reset, section h1 p.reset, section h2 p.reset {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  font-size: clamp(1.05rem, calc(1.05rem + 0.3 * ((100vw - 361px) / 1559)), 1.35rem);
  font-weight: 400;
  line-height: 1.3125rem;
}
section .subheadline {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.4;
  font-size: clamp(1.25rem, calc(1.25rem + 0.75 * ((100vw - 361px) / 1559)), 2rem);
}
section h1, section .headline {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  font-size: clamp(2.5rem, calc(2.5rem + 3.5 * ((100vw - 361px) / 1559)), 6rem);
}
section h1.sfd, section .headline.sfd {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.22;
  font-size: clamp(1.4rem, calc(1.4rem + 1 * ((100vw - 361px) / 1559)), 2.4rem);
}
section h2 {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.18;
  font-size: clamp(2rem, calc(2rem + 2 * ((100vw - 361px) / 1559)), 4rem);
  font-weight: 600;
}
section h3 {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.22;
  font-size: clamp(1.4rem, calc(1.4rem + 1 * ((100vw - 361px) / 1559)), 2.4rem);
  font-weight: 600;
}
section div.content {
  font-family: "mulish", Arial, sans-serif;
  font-weight: 400;
  line-height: 1.65;
  font-size: clamp(1.05rem, calc(1.05rem + 0.3 * ((100vw - 361px) / 1559)), 1.35rem);
}
section div.content div.image {
  display: inline;
}
section div.content div.image img, section div.content div.image picture, section div.content div.image picture > img {
  max-height: inherit;
  max-width: 100%;
}
section div.content p {
  font-family: "Bitter", Georgia, Times, Times New Roman, serif;
  letter-spacing: 0;
  text-transform: none;
}
section div.content p.sansserif, section div.content p.ssrf {
  font-family: "mulish", Arial, sans-serif;
}
section div.content p:first-of-type {
  margin-top: 0;
}
section div.content p:last-of-type {
  margin-bottom: 0;
}
section div.content p a {
  font-family: "mulish", Arial, sans-serif;
}
section div.content li {
  font-family: "Bitter", Georgia, Times, Times New Roman, serif;
  letter-spacing: 0;
  text-transform: none;
}
section div.content li.sansserif, section div.content li.ssrf {
  font-family: "mulish", Arial, sans-serif;
}
section div.content li a {
  font-family: "mulish", Arial, sans-serif;
}
section div.content ol {
  counter-reset: item;
  list-style: none;
  padding-left: 0;
  margin-left: 2.5rem;
  font-family: "Bitter", Georgia, Times, Times New Roman, serif;
  letter-spacing: 0;
  text-transform: none;
}
section div.content ol > li {
  display: block;
}
section div.content ol > li + li {
  margin-top: 0.7rem;
}
section div.content ol > li:before {
  content: counters(item, ".") ".";
  counter-increment: item;
  position: absolute;
  margin-left: -2.5rem;
  font-size: 85%;
}
section div.content ul {
  padding-left: 2rem;
}
section div.content ul > li {
  list-style-type: "—   ";
  list-style-position: outside;
}
section div.content ul > li::marker {
  color: rgb(190, 189, 0);
}
section .background_frame {
  position: absolute;
  top: 7vh;
  left: 0;
  overflow: hidden;
  min-height: 100%;
  width: 100vw;
  height: 100%;
  background-color: #FFF;
}
section .background_frame picture, section .background_frame img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: center center;
  height: 100%;
  width: 100%;
}

section.frontpage .inner {
  grid-template-rows: calc(19vw + 13vh) minmax(calc(37vh - 19vw), min-content) minmax(50vh, 1fr) 10vh;
}
@media (min-width: 1920px) {
  section.frontpage .inner {
    grid-template-rows: calc(354.816px + 13vh) minmax(calc(37vh - 354.816px), min-content) minmax(50vh, 1fr) 10vh;
  }
}
section.frontpage .fp_headline {
  z-index: 13;
  text-align: left;
}
section.frontpage .fp_headline > * {
  text-align: inherit;
  margin: 0;
}
section.frontpage .fp_headline > h1:not(:last-child) {
  margin-bottom: 1rem;
}
section.frontpage .frm {
  min-height: inherit;
}
section.frontpage .mvbar {
  grid-column: 1/span 10;
  grid-row: 1/span 10;
  background-color: transparent;
  background-image: url(/media/layout/logo.svg), linear-gradient(to right, rgb(202, 90, 0) 0, rgb(202, 90, 0) 100%), linear-gradient(to top, var(--dnback75) 0, var(--dnback50) 100%);
  background-position: calc(var(--vbarwidth) - 3.06vw) 13vh, calc(var(--vbarwidth) - 3.06vw) calc(13vh + 6vw), var(--vbarwidth) calc(13vh + 6vw);
  background-size: 66vw, 3.06vw 100%, 66vw 14.06vw;
  background-repeat: no-repeat, no-repeat, no-repeat;
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 1920px) {
  section.frontpage .mvbar {
    background-size: 1267.2px, 58.752px 100%, 1267.2px 230px;
  }
}

section.hnf .headline, section.ct .headline, section.spacer .headline {
  grid-row: 1/span 1;
  grid-column: 2/span 10;
  display: block;
  z-index: 6;
  display: flex;
  flex-direction: column;
  padding: min(5vh, 2rem) min(5vh, 2rem) 0 min(5vh, 2rem);
}
section.hnf .headline > *, section.ct .headline > *, section.spacer .headline > * {
  background-color: var(--dnback75);
  width: fit-content;
}
@media (max-width: 576px) {
  section.hnf .headline, section.ct .headline, section.spacer .headline {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-height: 576px) {
  section.hnf .headline, section.ct .headline, section.spacer .headline {
    padding-top: 1rem;
  }
}
section.hnf .frm, section.ct .frm, section.spacer .frm {
  min-height: inherit;
}
section.hnf .mvbar, section.ct .mvbar, section.spacer .mvbar {
  grid-column: 1/span 1;
  grid-row: 1/span 10;
  background-color: transparent;
  background-image: linear-gradient(to right, rgb(202, 90, 0) 0, rgb(202, 90, 0) 100%);
  background-position: calc(var(--vbarwidth) - 3.06vw) 0;
  background-size: 3.06vw 100%;
  background-repeat: no-repeat;
  z-index: 10;
  pointer-events: none;
}
@media (min-width: 1920px) {
  section.hnf .mvbar, section.ct .mvbar, section.spacer .mvbar {
    background-size: 58.752px 100%;
  }
}
section.hnf .frm.inner .ctfrm, section.ct .frm.inner .ctfrm, section.spacer .frm.inner .ctfrm {
  background: transparent linear-gradient(to top, var(--dnback75), var(--dnback75)) 2px 2px/calc(100% - 4px) no-repeat;
  grid-column: calc(var(--cs, 1) + 1)/span var(--cc, 3);
  z-index: 6;
  padding: min(5vh, 2rem);
  overflow: hidden;
  position: relative;
}
@media (max-width: 576px) {
  section.hnf .frm.inner .ctfrm, section.ct .frm.inner .ctfrm, section.spacer .frm.inner .ctfrm {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-height: 576px) {
  section.hnf .frm.inner .ctfrm, section.ct .frm.inner .ctfrm, section.spacer .frm.inner .ctfrm {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
section.hnf .frm.inner .ctfrm.fi, section.hnf .frm.inner .ctfrm.doz, section.ct .frm.inner .ctfrm.fi, section.ct .frm.inner .ctfrm.doz, section.spacer .frm.inner .ctfrm.fi, section.spacer .frm.inner .ctfrm.doz {
  padding: 0 !important;
}
section.hnf .frm.inner .ctfrm.fi > .readmore, section.hnf .frm.inner .ctfrm.doz > .readmore, section.ct .frm.inner .ctfrm.fi > .readmore, section.ct .frm.inner .ctfrm.doz > .readmore, section.spacer .frm.inner .ctfrm.fi > .readmore, section.spacer .frm.inner .ctfrm.doz > .readmore {
  display: none !important;
  pointer-events: none;
}
section.hnf .frm.inner .ctfrm.doz, section.ct .frm.inner .ctfrm.doz, section.spacer .frm.inner .ctfrm.doz {
  max-height: min-content !important;
}
section.hnf .frm.inner .ctfrm > img, section.hnf .frm.inner .ctfrm > picture, section.ct .frm.inner .ctfrm > img, section.ct .frm.inner .ctfrm > picture, section.spacer .frm.inner .ctfrm > img, section.spacer .frm.inner .ctfrm > picture {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center center;
}
section.hnf .frm.inner .ctfrm > .readmore, section.ct .frm.inner .ctfrm > .readmore, section.spacer .frm.inner .ctfrm > .readmore {
  display: none;
  pointer-events: none;
  text-align: center;
  font-style: italic;
  padding: 1rem 1rem 0.2rem 1rem;
  font-size: 80%;
  position: absolute;
  bottom: 0;
  width: calc(100% - 4px);
  left: 2px;
  background: linear-gradient(to top, var(--dnback) 0, var(--dnback) 80%, transparent);
}
section.hnf .frm.inner .ctfrm.ovz, section.ct .frm.inner .ctfrm.ovz, section.spacer .frm.inner .ctfrm.ovz {
  max-height: 90vh;
}
section.hnf .frm.inner .ctfrm.ovz:not(.doz), section.ct .frm.inner .ctfrm.ovz:not(.doz), section.spacer .frm.inner .ctfrm.ovz:not(.doz) {
  padding-bottom: min(5vh + 1rem, 3rem);
}
@media (max-height: 576px) {
  section.hnf .frm.inner .ctfrm.ovz, section.ct .frm.inner .ctfrm.ovz, section.spacer .frm.inner .ctfrm.ovz {
    max-height: 150vh;
  }
}
section.hnf .frm.inner .ctfrm.ovz.open, section.ct .frm.inner .ctfrm.ovz.open, section.spacer .frm.inner .ctfrm.ovz.open {
  max-height: min-content;
}
@media (max-height: 576px) {
  section.hnf .frm.inner .ctfrm.ovz.open, section.ct .frm.inner .ctfrm.ovz.open, section.spacer .frm.inner .ctfrm.ovz.open {
    max-height: min-content;
  }
}
section.hnf .frm.inner .ctfrm.ovz > .readmore, section.ct .frm.inner .ctfrm.ovz > .readmore, section.spacer .frm.inner .ctfrm.ovz > .readmore {
  display: block;
  pointer-events: all;
  cursor: pointer;
}
@media (max-width: 1199px) {
  section.hnf .frm.inner.c2l .ctfrm, section.hnf .frm.inner.c2r .ctfrm, section.ct .frm.inner.c2l .ctfrm, section.ct .frm.inner.c2r .ctfrm, section.spacer .frm.inner.c2l .ctfrm, section.spacer .frm.inner.c2r .ctfrm {
    grid-column: 2/span var(--scc);
  }
}

section.spacer {
  min-height: 8vh;
  height: auto;
}
section.spacer .frm.inner > *:not(.mvbar) {
  background: transparent linear-gradient(to top, var(--dnback75), var(--dnback75)) 2px 2px/calc(100% - 4px) no-repeat;
  max-width: calc(100% - min(5vh, 2rem) - 5px);
  display: block;
}
section.spacer .frm.inner > *:not(.mvbar).headline {
  margin-bottom: 0;
}
@media (max-width: 576px) {
  section.spacer .frm.inner > *:not(.mvbar) {
    max-width: calc(100% - 1rem - 5px);
  }
}

body.night section.frontpage .mvbar {
  background-image: url(/media/layout/logo2.svg), linear-gradient(to right, rgb(202, 90, 0) 0, rgb(202, 90, 0) 100%);
}

.stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to right, rgba(201, 201, 201, 0.5) 0, rgba(201, 201, 201, 0.5) 1px, transparent 1px, transparent 100%), linear-gradient( to top, rgba(201, 201, 201, 0.5) 0, rgba(201, 201, 201, 0.5) 1px, transparent 1px, transparent calc(100% - 1px), rgba(201, 201, 201, 0.5) calc(100% - 1px), rgba(201, 201, 201, 0.5) 100% );
  background-size: calc((100% - var(--vbarwidth) - 2 * var(--iph)) / var(--scc)) 100%, calc(100% - var(--vbarwidth) - 2 * var(--iph)) 100%;
  background-position: calc(var(--vbarwidth) + var(--iph)) 0, calc(var(--vbarwidth) + var(--iph)) 0;
  background-repeat: repeat, no-repeat;
  background-clip: border-box, border-box;
  pointer-events: none;
  z-index: 5;
}

/* Container Max Width */
.container {
  max-width: 1920px;
}

img::selection, svg::selection {
  background: transparent;
}

/* Link color inherits from parent font color  */
a {
  color: inherit;
}

/* Disable / enable clicking on an element and its children  */
.no-click {
  pointer-events: none;
}

.can-click {
  pointer-events: auto;
}

@keyframes panzoom {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(var(--travel-x), 0) scale(var(--scale));
  }
  50% {
    transform: translate(var(--travel-x), var(--travel-y)) scale(var(--scale));
  }
  75% {
    transform: translate(calc(-1 * var(--travel-x)), var(--travel-y)) scale(var(--scale));
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}
/* Motion-Respect */
@media (prefers-reduced-motion: reduce) {
  .frame > img {
    animation: none;
    transform: none;
  }
}
section.frontpage .nav {
  background-color: #FFF;
  grid-column: 1/span 10;
  grid-row: 1/span 1;
  position: relative;
  display: block;
  width: 100%;
  overflow: clip;
  z-index: 8;
  border: 1px solid rgba(201, 201, 201, 0.5);
}
@media (min-width: 2121.6px) {
  section.frontpage .nav {
    margin-left: -7%;
    width: 114%;
  }
}
section.frontpage .hero {
  grid-column: 1/span 10;
  grid-row: 3/span 1;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 10/6; /* oder feste height */
  overflow: clip;
  z-index: 1;
  min-height: 100%;
}
section.frontpage .hero .hero-img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 10/6; /* oder feste height */
  overflow: hidden;
  position: relative;
  --scale: 1.25;
  --travel-x: calc((var(--scale) - 1) * 50%);
  --travel-y: calc((var(--scale) - 1) * 50%);
}
section.frontpage .hero .hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* füllt den Rahmen, behält Ratio */
  transform-origin: center;
  animation: panzoom 80s linear infinite;
  will-change: transform;
}
@media (min-width: 2121.6px) {
  section.frontpage .hero {
    margin-left: -7%;
    width: 114%;
  }
}
section.frontpage .stripes .shader {
  background: transparent;
  position: relative;
  left: 0;
  right: 0;
  min-height: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: min(5vh, 2rem);
}
@media (max-width: 576px) {
  section.frontpage .stripes .shader {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-height: 576px) {
  section.frontpage .stripes .shader {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
section.frontpage .stripes .shader > * {
  background: var(--dnback75);
  box-shadow: 0px 0px min(5vh, 2rem) var(--dnback75);
  z-index: 13;
  width: fit-content;
}
section.frontpage .stripes .shader:before {
  content: "";
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--dnback);
}
section.frontpage .stripes .shader.c2r {
  grid-column: max(var(--scc), 2)/span 2;
}
section.frontpage .stripes .shader.c2r.etr {
  right: -10vw;
}
section.frontpage .stripes .shader.c2l {
  grid-column: 1/span 2;
}
section.frontpage .stripes .shader.thp {
  grid-row: 2/span 1;
  bottom: calc(-5vh * var(--mc));
}
section.frontpage .stripes .shader.bhp {
  grid-row: 4/span 1;
  top: calc(-5vh * var(--mc));
}
@media (max-width: 769px) {
  section.frontpage .stripes .shader.bhp::before {
    content: "";
    position: absolute;
    height: 125%;
    bottom: 0;
    left: 0;
    width: 50%;
    background: inherit;
    z-index: 1;
  }
}

body.night section.frontpage .nav {
  background-color: #334E5F;
}
body.night section.frontpage .stripes .shader {
  background-color: #334E5F;
}

.nav {
  margin-top: 2rem;
  text-align: right;
  height: 3rem;
  padding: 0;
  z-index: 8;
}
@media (max-height: 500px) {
  .nav {
    margin-top: 0.5rem;
    height: 2rem;
    font-size: 80%;
  }
}
.nav .nav_menu {
  align-items: center;
  justify-items: center;
  display: inline-grid;
  grid-template-columns: repeat(3, max-content) 1px;
  grid-template-rows: 3rem;
  grid-gap: 2rem;
}
@media (max-height: 500px) {
  .nav .nav_menu {
    grid-template-rows: 2rem;
  }
}
.nav .nav_menu > * {
  position: relative;
  white-space: nowrap;
}
.nav .nav_menu > *:nth-child(n+2)::before {
  content: "";
  height: 100%;
  border-left: 1px solid #CCC;
  position: absolute;
  left: -1rem;
  width: 1rem;
  top: 0;
  bottom: 0;
}
.nav img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
  border: 0;
}

#lightswitch {
  cursor: pointer;
}
#lightswitch > * {
  cursor: pointer;
}
#lightswitch .tonight {
  background: transparent url(/media/layout/moon.svg) right center/auto 100% no-repeat border-box;
  padding-right: 2.4rem;
}
#lightswitch .today {
  background: transparent url(/media/layout/sun.svg) right center/auto 100% no-repeat border-box;
  padding-right: 2.4rem;
}

.menu {
  position: relative;
  white-space: nowrap;
  padding-right: 2.2rem;
}
.menu .menu-button-container {
  height: 100%;
  width: 1.3rem;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}
.menu .menu-button, .menu .menu-button::before, .menu .menu-button::after {
  display: block;
  background-color: #000;
  position: absolute;
  height: 0.2rem;
  width: inherit;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 0.1rem;
}
.menu .menu-button::before {
  content: "";
  margin-top: 0.5rem;
}
.menu .menu-button::after {
  content: "";
  margin-top: -0.5rem;
}
.menu.open .menu-button {
  background-color: transparent;
}
.menu.open .menu-button::before {
  background-color: #000;
  margin-top: 0px;
  transform: rotate(45deg);
  opacity: 1;
}
.menu.open .menu-button::after {
  background-color: #000;
  margin-top: 0px;
  transform: rotate(-45deg);
}

.frm.inner > .gallery {
  grid-column: 2/span var(--scc);
  background: transparent linear-gradient(to top, var(--dnback), var(--dnback)) 2px 2px/calc(100% - 4px) no-repeat;
  padding: min(5vh, 2rem) 0;
  position: relative;
  z-index: 6;
  max-width: 100%;
  overflow: hidden;
}
@media (max-height: 576px) {
  .frm.inner > .gallery {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.frm.inner > .gallery .swiper {
  max-width: 100%;
}

/*.gallery .swiper-container {


    .swiper-wrapper {

    }

    .swiper-slide {
        max-width: $swiper_slidewidth;
        width: $swiper_slidewidth;
        aspect-ratio: 1.6;
        opacity: 0.8;
        -moz-transition-duration: 0.1s;
        -webkit-transition-duration: 0.1s;
        transition-duration: 0.1s;
        text-rendering: optimizeSpeed;
        background-color: #CCC;
        padding: 0.5rem 0 0.5rem 0.5rem;

        &::before {
            content: "";
            position: absolute;
            top: -0.5rem;
            left: -0.5rem;
            width: 100%;
            height: 100%;
            background-color: lightred;
            z-index: -2;
            box-shadow: 0.4rem -0.05rem 0.5rem #CCC inset, 0.1rem 0.2rem 0.4rem #CCC;
        }

        &::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-color: #CCC;
            z-index: -1;
            //box-shadow: .4rem -.05rem .5rem $ruc_anth_p4 inset;
        }




        > * {
            max-height: 100%;
            max-width: 100%;
            overflow: hidden;
        }

        &.swiper-slide-prev {
            z-index: 4;
        }

        &.swiper-slide-next {
            z-index: 4;
        }


        &.swiper-slide-active {
            //box-shadow: -2px 2px 0 rgba(255,255,255,1);
            z-index: 5;
            opacity: 1;
        }
    }

    .swiper-button-next, .swiper-button-prev {
        &::before {
            content: '';
            left: -4px;
            top: -4px;
            position: absolute;
            right: -4px;
            background-color: rgba(255,255,255,0.7);
            border-radius: 3px;
            bottom: -4px;
            z-index: -1;
        }
    }
}
*/
.swiper .swiper-slide {
  text-align: center;
}

.feedbackcollection .feedback {
  border: 1px solid #CCC;
  border-radius: 3px;
  display: inline-block;
  padding: 2rem;
  background-color: #FFF;
  max-width: 100%;
  width: 26rem;
  aspect-ratio: 1.6;
  text-align: left;
}
@media (max-width: 576px) {
  .feedbackcollection .feedback {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
@media (max-height: 576px) {
  .feedbackcollection .feedback {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}
.feedbackcollection .feedback .nme {
  height: 36px;
  vertical-align: top;
  display: block;
  margin-bottom: 0.8rem;
  padding-left: 48px;
  position: relative;
}
.feedbackcollection .feedback .nme:before {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEcElEQVRoge2Y6U9bRxTF+ftS9jWsjko3RVVbqVIrJd2lKk0NNibeQoLSNFEpaTAIAmqJS5rl2YBtsLENfTYYb+kfYGXGb5nR6YcxDW0oxtjEIPnDkWX5w7u/ueNz73l1Uky74JHZbSnGxs+UZHZLkpmtTpL1B54Yw1lVnRRj49Uu4riSZJarAdQAagA1gBrA6QPwxhkCuwyhFEcoxRFMcqzunHIAKcbgjTFspDk20hyPojoerOmYW9Pxa0jHyjbDZpbDn2CQ5FMGIMkMq9sMkQzHjF/Dl1MK3rpB0W0V6rdTfHQnD9uiipVt0ZlKQFQEQIqJ4sNpDuuiinYLRf0QQdcoRa9NqMdG0WImqDcSvP9DHr9HBWy5EBUB8MYZIoXi640E569RGBwUA/+jxiGCt29S/LHJsJ4sD6JsAKlw510+DW0jtGjxAw7x+xtGgsv3FASTHMvxKgJ44+I+f3ZPQcMQgcF5ePF76rVRdFoopn0aQilePYC1XQ53WMeb18XpH6X4PTWZCEwLKsKZKgJspDhmfDq6Rin67KUBNA4TfDWlVBcglOJwFQD6SwRoOi0AcwEdPdbSO9A0TPDNdJUBfDsMz2SGi7fyaB8hJQE0mwmuL6kIp6sI4IkxRLMcwwtiBhylcIODosNCccFJ8SiqI7B7/GdXBCCQYHgqM7xzM49m0+FWaihYaL2RwOlWESnj+lQMQJLFGjG/rqO/4C4H/aENDorOUVH8d7MKQimO1e3jP7diAJ6YmMiRDMfiBsPHd/NoGyFoNr2qAQeF/aGKYIrDnzglu9D+ToRSHL4dhgmvhiuzCi5NKrg8qeCL+wrsD1W4IzoiGZENTs02+l+IlW2xH4VSHMF9Cqc51nbLu/MnDvC6VVEAb1yc/tqu6EA0+29FMqITvgTDclykt6oDLMcZgimOaIYjmBTffwvpuL+q4e4zDXeevvz82athNqDj8Zaw3o20gPKVkZWPBSDFRGCPZjkCCYb5dR03ljR87VLwwe08BsdEjGw1E7SYCFrMwoE6LMJO3xvP49OJPEwLKiY8Gp78KRwsnBbZQDopAElm8CdEMH+ypcPpVvHJT3n02sRq3GImaB8RiazX9uoc6LdT9FjFLGgt2GzbCMG743l8O6PA5dMRSokXAnsHVTEASRYt9yc4HG4Vg2NiYLWaCXqspS1x+wdbv52ic5SgcZig3UJwaVLB/LqGzawYcsWs9kgAkswQznAsRRk+/DGPeuPL61ApGZyia43DBB0WAodbO9K8KAogxRiCSY7HWwyDY/Sfha1Y7i0HpGuU4tz3BNZFFZEsh/eQzFwUYM9lPv9FwTnjiyNn3rIhrlF0WAhm/PqhmbkowHqSwR1m6LOXnnnLklO8ubg6p2LreRkAoRTHtE/DeStF3wHOcpKqNxJcma0AwNSKhm7rwdZ4kmoYqlAHXKs1gBpADaAGcKIAMps4qwCeGEOdJDObJLPcQQolec61ouW6rTTXa6O5AcfrU4PxRe7qrJrbes4PrK2gv/4GrimE/KpoNZsAAAAASUVORK5CYII=);
  background-size: 36px;
  content: "";
  height: 36px;
  width: 36px;
  display: inline-block;
  margin-right: 0.5rem;
  border-radius: 18px;
  position: absolute;
  left: 0px;
}
.feedbackcollection .feedback .stars {
  display: block;
  margin-bottom: 0.8rem;
}
.feedbackcollection .feedback .stars .review.star {
  background-image: url(//maps.gstatic.com/consumer/images/icons/2x/ic_star_rate_empty_14.png);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  height: 14px;
  width: 15px;
  margin: 0 1px;
  display: inline-block;
}
.feedbackcollection .feedback .stars .review.star.active {
  background-image: url(//maps.gstatic.com/consumer/images/icons/2x/ic_star_rate_14.png);
}

.footer p.l {
  font-size: 200%;
  margin: 1rem 0;
}
.footer p {
  margin: 1rem 0;
}
.footer .pt img {
  border-radius: 50%;
  border: 1px solid #CCC;
  aspect-ratio: 1;
  display: inline-block;
  max-height: 10rem;
  overflow: clip;
}
.footer .pt {
  display: block;
  text-align: center;
}
.footer span.cn {
  font-size: 110%;
  font-weight: bolder;
}
.footer div.sts {
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  grid-gap: 3rem;
  vertical-align: middle;
  align-items: center;
  width: 100%;
}
@media (max-width: 576px) {
  .footer div.sts {
    grid-template-columns: 100%;
    grid-gap: 0;
  }
}
.footer a.mt {
  text-decoration: underline;
}

.imprint .vtab {
  margin-top: 2rem;
  display: block;
  border-top: 1px solid rgba(201, 201, 201, 0.5);
}
.imprint .vtab h4 {
  margin: 2rem 0 0 0;
  cursor: pointer;
}
.imprint .vtab h4 + div {
  height: 0;
  overflow: hidden;
  display: block;
  transition: height 0s linear 2s;
}
.imprint .vtab h4.active {
  margin: 1rem 0 2rem 0;
}
.imprint .vtab h4.active + div {
  height: auto;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(201, 201, 201, 0.5);
}