@media all {
  :root {
    /* Colors */
    --color-white: #ffffff;
    --color-white-rgb: 255, 255, 255;
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;
    --color-orange: #f28222;
    --color-orange-rgb: 242, 130, 34;
    --color-lightgrey: #deddde;
    --color-lightgrey-rgb: 222, 221, 222;
    --color-grey: #6c6d70;
    --color-grey-rgb: 108, 109, 112;
    --color-grey-transparent: rgba(255, 255, 255, 0.5);
    --color-purple-overlay: rgba(114, 70, 143, 0.8);

    /* Borders */
    --border-width: 4px;
    --border-radius: 1rem;
    --border-radius-full: 100vmax;

    /* Box-Shadow */
    --box-shadow: 0px 0px 16px 0px rgba(var(--color-black-rgb), 0.25);

    /* Typography */
    --font-family: "Roboto";
    --font-size-h1: 80px;

    /* Page */
    --page-width: min(100vw, 120rem);
    --page-gap: var(--size-10);
    --page-padding: calc(var(--element-gap) * 5 / 4);

    /* Element */
    --cols: 4;
    --gaps: calc(var(--cols) - 1);
    --colmax: calc((var(--content-width) - var(--element-gap) * var(--gaps)) / var(--cols));
    --element-padding: var(--size-4);
    --element-gap: var(--size-5);
    --element-gap-vertical: 1.5rem;
    --element-grid: 1fr var(--page-padding) repeat(var(--gaps), minmax(0, var(--colmax)) var(--element-gap)) minmax(0, var(--colmax)) var(--page-padding) 1fr;
    --colwidth: calc((min(var(--content-width-outer), 100vw) - (var(--page-padding) * 2) - (var(--element-gap) * var(--gaps))) / var(--cols));

    /* Content */
    --content-width: 107.5rem;
    --content-width-outer: calc(var(--content-width) + 2 * var(--page-padding));

    /* Container */
    --container-gap: var(--size-5);

    /* Gallery */
    --gallery-gap: var(--element-gap);

    /* Transition*/
    --transition-default: all 0.2s ease-in-out;
  }
}

@media (min-width: 62rem) {
  :root {
    --cols: 12;
    --element-gap: var(--size-3);
  }
}

/* Dynamic font scaling */
:root,
body,
.ce-header * {
  --dynamic-clamp-start: 48;
  /*rem*/
  --dynamic-clamp-start: 23.4375;
  /*rem*/
  --dynamic-clamp-end: 111.25;
  /*rem*/

  --dynamic-size-diff: calc(var(--dynamic-size-max) - var(--dynamic-size-min));
  --dynamic-clamp-diff: calc(var(--dynamic-clamp-end) - var(--dynamic-clamp-start));
  --dynamic-size-clamp: calc(
    (var(--dynamic-size-min) * 1rem) + var(--dynamic-size-diff) * ((100vw - (var(--dynamic-clamp-start) * 1rem)) / var(--dynamic-clamp-diff))
  );
  --dynamic-size-scaler: clamp((var(--dynamic-size-min) * 1rem), var(--dynamic-size-clamp), (var(--dynamic-size-max) * 1rem));
}

/* Dynamic size scaling */
:root {
  --dynamic-size-min: 0.25;
  /*rem*/
  --dynamic-size-max: 0.5;
  /*rem*/

  --size-1: var(--dynamic-size-scaler);
  /* default-values 4 -> 8 */
  --size-2: calc(var(--size-1) * 2);
  /* default-values 8 -> 16 */
  --size-3: calc(var(--size-1) * 3);
  /* default-values 12 -> 24 */
  --size-4: calc(var(--size-1) * 4);
  /* default-values 16 -> 32 */
  --size-5: calc(var(--size-1) * 5);
  /* default-values 20 -> 40 */
  --size-6: calc(var(--size-1) * 6);
  /* default-values 24 -> 48 */
  --size-7: calc(var(--size-1) * 7);
  /* default-values 28 -> 56 */
  --size-8: calc(var(--size-1) * 8);
  /* default-values 32 -> 64 */
  --size-9: calc(var(--size-1) * 9);
  /* default-values 36 -> 72 */
  --size-10: calc(var(--size-1) * 10);
  /* default-values 40 -> 80 */
  --size-12: calc(var(--size-1) * 12);
  /* default-values 48 -> 96 */
  --size-14: calc(var(--size-1) * 14);
  /* default-values 56 -> 112 */
  --size-16: calc(var(--size-1) * 16);
  /* default-values 64 -> 128 */
  --size-18: calc(var(--size-1) * 18);
  /* default-values 72 -> 144 */
  --size-20: calc(var(--size-1) * 20);
  /* default-values 80 -> 160 */
}

body {
  --dynamic-size-min: 1.0625;
  /*rem*/
  --dynamic-size-max: 1.25;
  /*rem*/
}

body,
.ce-header * {
  font-size: var(--dynamic-size-scaler);
}

.ce-header :is(h1, .h1) {
  --dynamic-size-min: 2;
  /*rem*/
  --dynamic-size-max: 4.2;
  /*rem*/
}

.ce-header :is(h2, .h2) {
  --dynamic-size-min: 1.75;
  /*rem*/
  --dynamic-size-max: 3.6;
  /*rem*/
}

.ce-header :is(h3, .h3) {
  --dynamic-size-min: 1.375;
  /*rem*/
  --dynamic-size-max: 3;
  /*rem*/
}

.ce-header :is(h4, .h4) {
  --dynamic-size-min: 1.375;
  /*rem*/
  --dynamic-size-max: 2.5;
  /*rem*/
}

.ce-header :is(h5, .h5) {
  --dynamic-size-min: 1.25;
  /*rem*/
  --dynamic-size-max: 2;
  /*rem*/
}

.ce-quote > span {
  --dynamic-size-min: 1.25;
  /*rem*/
  --dynamic-size-max: 1.5;
  /*rem*/
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family);
  margin: 0;
}

body {
  line-height: 1.4;
}

.ce-header * {
  line-height: 1.125;
}

.ce-element {
  margin-bottom: var(--page-gap, 1rem);
}

/* Buttons */

.btn {
  border-radius: var(--border-radius-full);
  padding: 0.5em 2.5em;
  font-weight: 600;
  text-transform: none;
  text-decoration: none;
}

.btn-primary {
  color: var(--color-black);
  background-color: transparent;
  border: var(--border-width) solid var(--color-orange);

  &:hover {
    background-color: var(--color-orange);
    color: var(--color-white);
    border-color: var(--color-orange);
  }
}

.btn-secondary {
  color: var(--color-white);
  background-color: transparent;
  border: var(--border-width) solid var(--color-white);

  &:hover {
    background-color: var(--color-white);
    color: var(--color-black);
  }
}

/* Images */

.ce-media-image {
  img {
    border-radius: var(--border-radius);
  }
}

/* Slider */

.swiper-pagination {
  position: static !important;
  padding: 1rem 0 !important;
}

.swiper-pagination-bullet {
  background: var(--color-white) !important;
  opacity: 1 !important;
  width: 0.8rem !important;
  height: 0.8rem !important;
}

.swiper-pagination-bullet-active {
  background-color: var(--color-grey) !important;
  opacity: 1 !important;
}

/* Orange Background */

@media all {
  .background {
    background-color: var(--color-orange);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    z-index: -10;

    &:after {
      display: none;
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-image: url("/typo3conf/ext/dw_base_wf/Resources/Public/Images/logo.svg");
      background-repeat: no-repeat;
      background-position: 90% -10%;
      background-size: 100%;
      opacity: 0.2;
      filter: brightness(150%);
    }
  }

  .background-divider {
    background-color: var(--color-orange);
    height: 8px;
    position: absolute;
    bottom: -1rem;
    left: 0;
    right: 0;
  }
}

@media (min-width: 62rem) {
  .background {
    &:after {
      display: block;
      background-position: 90% -10%;
      background-size: 40%;
    }
  }
}

/* Mobile Menu */

.btn-toggler {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0;
}

.btn-toggler:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-toggler:focus-visible {
  outline: currentColor solid 2px;
}

.btn-toggler[aria-expanded="false"] .btn-toggler-collapsed {
  display: initial;
}

.btn-toggler[aria-expanded="false"] .btn-toggler-expanded {
  display: none;
}

.btn-toggler[aria-expanded="true"] .btn-toggler-collapsed {
  display: none;
}

.btn-toggler[aria-expanded="true"] .btn-toggler-expanded {
  display: initial;
}

.navbar-toggler[aria-expanded="false"] .nav-toggler-collapsed {
  display: initial;
}

.navbar-toggler[aria-expanded="false"] .nav-toggler-expanded {
  display: none;
}

.navbar-toggler[aria-expanded="true"] .nav-toggler-collapsed {
  display: none;
}

.navbar-toggler[aria-expanded="true"] .nav-toggler-expanded {
  display: initial;
}

.svg-icon {
  width: 1.5em;
  height: 1.5em;
}

.mm-menu--theme-light {
  --mm-color-background: #ffffff;
  --mm-color-border: rgb(0 0 0 / 0.15);
  --mm-color-icon: rgb(0 0 0 / 0.4);
  --mm-color-text: rgb(0 0 0 / 0.8);
  --mm-color-text-dimmed: rgb(0 0 0 / 0.4);
  --mm-color-background-highlight: rgb(0 0 0 / 0.05);
  --mm-color-background-emphasis: rgb(255 255 255 / 0.75);
  --mm-color-focusring: #06c;
}

.mm-panel {
  background-color: var(--color-orange) !important;

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url("/typo3conf/ext/dw_base_wf/Resources/Public/Images/logo.svg");
    background-repeat: no-repeat;
    background-position: -20% 200%;
    background-size: 120%;
    opacity: 0.2;
    filter: brightness(150%);
  }
}

.mm-navbar {
  background-color: var(--color-orange) !important;
}

.mobile-nav-item {
  margin: 1rem;
  background-color: var(--color-white);
  padding: 1rem;
  border-radius: var(--border-radius);
}
.mobile-mainmenu.mm-menu {
  .mm-panels {
    .mm-listview {
      .mm-listitem {
        .mobile-nav-item {
          padding: 1rem 1.5rem;
          border-radius: var(--border-radius);
          font-weight: 600;
          &:hover {
            transform: translateY(-0.625rem);
          }
        }
      }
    }
  }
}

.mm-listitem:after {
  display: none !important;
}

.mm-wrapper.mm-wrapper--position-left .mm-slideout,
.mm-wrapper.mm-wrapper--position-right .mm-slideout {
  -webkit-transform: unset;
  transform: unset;
}

.page-header .mobile-mainmenu {
  display: none;
}

.mm-wrapper__blocker {
  background: rgba(0, 0, 0, 0.8) !important;
}

.mobile-mainmenu .mm-navbar-content a:focus-visible {
  outline-offset: 2px;
}

.mobile-mainmenu .mm-navbar-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 1em;
}

.mobile-mainmenu .mm-navbar-list .page-sociallinks-icon {
  width: 2.25rem;
  height: 2.25rem;
}

.fade {
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}

@media (prefers-reduced-motion: reduce) {
  .fade {
    -webkit-transition: none;
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    -webkit-transition: none;
    transition: none;
  }
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  -webkit-transition: width 0.35s ease;
  transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing.collapse-horizontal {
    -webkit-transition: none;
    transition: none;
  }
}

@media (min-width: 62.5rem) {
  .navbar-expand-lg {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }

  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }

  .navbar-expand-lg .navbar-collapse {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-toggler {
    display: none;
  }

  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    -webkit-transition: none;
    transition: none;
  }

  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }

  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex-positive: 0;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}

@media all {
  .page-mobile-menutoggle {
    display: block;
    background-color: transparent;
    border: none;
  }
}

@media (min-width: 62rem) {
  .page-mobile-menutoggle {
    display: none;
  }
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Cookie Banner */

:root {
  --page-floating-button-color-fg: var(--color-black);
  --page-floating-button-color-bg: var(--color-white);
  --page-floating-button-focus-color-fg: var(--color-black);
  --page-floating-button-focus-color-bg: var(--color-white);
  --page-floating-button-offset-x: 0.625rem;
  --page-floating-button-offset-y: 0.625rem;
  --page-floating-button-size: 2.75rem;
  --page-floating-button-icon-size: 2rem;
  --page-floating-button-border-radius: 50%;
}

.page-floating-button {
  position: fixed;
  z-index: 1030;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: var(--page-floating-button-size);
  height: var(--page-floating-button-size);
  border: none;
  -webkit-appearance: none;
  color: var(--page-floating-button-color-fg);
  background-color: var(--page-floating-button-color-bg);
  -webkit-filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.15));
  line-height: 1;
  border-radius: 50%;
  overflow: clip;
}

.page-floating-button:hover,
.page-floating-button:focus-visible {
  color: var(--page-floating-button-focus-color-fg);
  background-color: var(--page-floating-button-focus-color-bg);
}

.page-floating-button svg {
  fill: currentColor;
  width: var(--page-floating-button-icon-size);
  height: var(--page-floating-button-icon-size);
}

.page-floating-button-totop {
  right: var(--page-floating-button-offset-x);
  bottom: var(--page-floating-button-offset-y);
  --page-floating-button-icon-size: 1.5rem;
}

.page-floating-button-cookiesettings {
  left: var(--page-floating-button-offset-x);
  bottom: var(--page-floating-button-offset-y);
}

.cc_div .b-tg .expand-button:checked ~ .c-tg {
  background: var(--color-orange);
}

.cc_div .b-tg .expand-button ~ .c-tg.c-ro {
  background: rgba(var(--color-orange-rgb), 0.5);
}

@media (max-width: 62rem) {
  .page-layout-home .page-content .ce-gallery figure {
    margin-left: 0;
    margin-right: 0;
  }
}

@media (min-width: 62rem) {
  .page-layout-home .page-content .ce-gallery img.image-embed-item {
    max-width: unset;
    /*Damit das Bild nach rechts raus gehen kann*/
  }
}

body {
  .page-content {
    a {
      color: var(--color-black);
    }
    a:hover,
    a:focus {
      color: var(--color-white);
      background-color: var(--color-black);
    }
  }
}


.mm-navbar__title {
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-white) !important;  
}
.mm-btn--next, .mm-btn--prev {
  border-color: transparent !important;
}
.mm-btn--next::after, .mm-btn--prev::before {
  border-color: var(--color-white) !important;
}