@charset "UTF-8";
/**
* Die get-map Funktion ermöglicht das einfache auslesen von
* verschachtelten SCSS Maps.
*
* map-deep-get($MAPNAME, MAPKEY, MAPVALUE);
*/
/**
 *
 * mq() ist ein Sass Mixin der hilft, media queries zu generieren.
 * Aus Pixelwerten werden em-based media queries und es gibt einen
 * Fallback für ältere Browser.
 *
 * Dokumentation:         https://github.com/sass-mq/sass-mq
 *
 */
/**
 * Aus den Einträgen aus der theme.json werden SASS Maps erstellt, die für
 * weitere Funktionen zur Verfügung stehen.
 */
/**
 * Diese Variablen können überall als Shortcut eingesetzt werden, sind
 * aber auch dazu da, die default UIKit Variablen zu überschreiben.
 *
 * [1]  Die Funktion palette übergibt ein Attribut, welches einer Farbe aus
 *      der theme.json color palette entsprechen muss.
 *
 * [2]  Für jedes Object in der Palette wird eine Abfrage gestartet.
 *
 * [3]  Das übergebene Attribut wird mit dem slug in der laufenden Abfrage
 *      verglichen.
 *
 * [4]  Wenn die beiden Werte übereinstimmen wird der entsprechende Farbwert
 *      übergeben.
 */
/**
 * Verwendet für Abstände wird die vr() Funktion von Typi. Diese generiert
 * aus dem Null key in der base font-map den vertikalen Rhythmus.
 * Angegeben wird der Wert asl vr(x) wobei 1x einer Baseline entspricht.
 *
 * 1 Baseline = Null Wert * Line Height Null Wert (Bsp.: 18px * 1.4)
 *
 * Dokumentation:     https://github.com/zellwk/typi
 */
/**
 *
 * [1]  Die Funktion font übergibt ein Attribut, welches einer Schriftart
 *      aus der theme.json entsprechen muss.
 *
 * [2]  Für jedes Object in der Map wird eine Abfrage gestartet.
 *
 * [3]  Das übergebene Attribut wird mit dem slug in der laufenden Abfrage
 *      verglichen.
 *
 * [4]  Wenn die beiden Werte übereinstimmen wird der entsprechende Font
 *      übergeben.
 */
/**
 * Das pseudo Mixin erlaubt das einfache erstellen von pseudo-Elementen.
 * Es kann mittels @include in Elemente eingebunden werden und akzeptiert
 * folgende Paramter:
 *    - $loc      = location (before [default] oder after)
 *    - $content  = content der mittels CSS generiert werden soll
 *    - $pos      = position (absolute [default] oder relative)
 *
 * Bsp.: @include pseudo($loc: after, $content: 'hallo', $pos: relative) { background: red; }
 *
 * Das Mixin kann durch eigene erweiternde Eigenschaften ergänzt werden.
 */
/**
 * Das paddingPage Mixin erzeugt einheitliche Innenabstände. Dabei werden
 * aus der theme.json des Child Themes Werte geholt.
 */
/**
 * Das reset Mixin entfernt default styles von Elementen.
 */
/**
 * Die svgColor Funktion wandelt Hex Farben so um, dass sie in bg-img
 * SVGs als Fill oder Stroke genutzt werden können.
 */
/**
 *
 * Typi ist eine SCSS Funktion, die Schriftgrößen sehr einfach
 * responsiv macht.
 * Typi greift auf die Breakpoints zurück, die in der
 * ../variables/breakpoints.scss $breakpoints map definiert wurden.
 *
 * Dokumentation:         https://github.com/zellwk
 * Typescale Generator:   https://www.modularscale.com
 *
 */
/**
 *
 * Um die Werte aus Adobe XD nutzen zu können, sind Mixins
 * notwendig. Diese rechnen die statischen in dynamische
 * Werte um.
 *
 */
/**
 * Das margin-bottom Mixin erzeugt automatisch einen margin-bottom Wert
 * auf Basis der typi Definitionen. Dieser Wert wird in em angegeben, um
 * sich dynamisch mit der Schriftgröße zu verändern.
 *
 * Als Argument muss der $typi Selector der gewünschten Schriftgröße
 * übergeben werden.
 *
 * [1]  Die $baseline ist das Produkt aus der base font-size und line-height.
 *      Sie ist die Grundlage für alle errechneten Abstände.
 *
 * [2]  Die $size ist die Schriftgröße aus der $typi Map des übergebenen
 *      $selector.
 *
 * [3]  Für jeden Media Query in der $breakpoints Map (breakpoints.scss)
 *      wird der entsprechende Wert aus der $typi Map verwendet.
 *
 * [4]  Ab dem medium Breakpoint werden dessen Werte als Baseline genutzt.
 */
.jed-slider__height, .jed-slider.has-viewport-height, .jed-slider.has-viewport-height > li, .jed-slider.has-viewport-height .jed-slider__image {
  min-height: 55vh !important;
}

@media (min-width: 60em) {
  .jed-slider__height, .jed-slider.has-viewport-height, .jed-slider.has-viewport-height > li, .jed-slider.has-viewport-height .jed-slider__image {
    min-height: 100vh !important;
  }
}

.jed-block[id*="slider"] {
  position: relative;
  z-index: 2;
}

.jed-block[id*="slider"] + .alignfull,
.jed-block[id*="slider"] + .alignwide {
  z-index: 0;
}

.jed-slider.has-viewport-height .jed-slider__slide {
  position: relative;
}

@media (max-width: 59.99em) {
  .jed-slider.has-viewport-height .jed-slider__slide {
    min-height: 100vh;
  }
}

.jed-slider.has-viewport-height .jed-slider__image {
  position: relative;
  overflow: hidden;
  display: flex;
}

@media (min-width: 60em) {
  .jed-slider.has-viewport-height .jed-slider__image {
    height: 100vh;
  }
}

.jed-slider.has-viewport-height .jed-slider__image picture {
  display: flex;
  width: 100%;
}

.jed-slider.has-viewport-height .jed-slider__image img {
  object-fit: cover;
  width: 100%;
}

.jed-slider.has-viewport-height .jed-slider__image > img {
  width: 100%;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-left.jed-slider__image--v-top img {
  object-position: left top;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-left.jed-slider__image--v-center img {
  object-position: left center;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-left.jed-slider__image--v-bottom img {
  object-position: left bottom;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-center.jed-slider__image--v-top img {
  object-position: center top;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-center.jed-slider__image--v-center img {
  object-position: center center;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-center.jed-slider__image--v-bottom img {
  object-position: center bottom;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-right.jed-slider__image--v-top img {
  object-position: right top;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-right.jed-slider__image--v-center img {
  object-position: right center;
}

.jed-slider.has-viewport-height .jed-slider__image.jed-slider__image--h-right.jed-slider__image--v-bottom img {
  object-position: right bottom;
}

.jed-slider + .uk-dotnav {
  position: absolute;
  z-index: 2;
}

@media (max-width: 59.99em) {
  .jed-slider + .uk-dotnav {
    top: 87vh;
    left: 50%;
    transform: translateX(-50%);
  }
  .jed-slider + .uk-dotnav a:before {
    background: #1F3460;
  }
}

@media screen and (max-width: 400px) {
  .jed-slider + .uk-dotnav {
    display: none;
  }
}

@media (min-width: 60em) {
  .jed-slider + .uk-dotnav {
    right: calc(50% + 3.5rem);
    top: 90vh;
  }
}

@media (min-width: 75em) {
  .jed-slider + .uk-dotnav {
    right: calc(800px + 3.5rem);
  }
}

.block-editor-writing-flow .uk-hidden\@s {
  display: none;
}

/* Label im Slider */
@media (max-width: 59.99em) {
  main > .wp-block-cover:first-child [id*="slider-block"] .jed-slider__content {
    position: relative;
  }
  main > .wp-block-cover:first-child [id*="slider-block"] .jed-slider__content::before {
    content: "";
    position: absolute;
    display: block;
    width: 180px;
    aspect-ratio: 1;
    top: -180px;
    left: 0;
    background-image: url(../img/MM_label.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 5;
    min-height: unset;
  }
  @supports not (aspect-ratio: 1/1) {
    main > .wp-block-cover:first-child [id*="slider-block"] .jed-slider__content::before {
      height: 180px;
    }
  }
}

@media (min-width: 60em) {
  main > .wp-block-cover:first-child [id*="slider-block"] {
    position: relative;
  }
  main > .wp-block-cover:first-child [id*="slider-block"]::after {
    content: "";
    position: absolute;
    display: block;
    width: 200px;
    aspect-ratio: 1;
    top: calc(100vh - 200px);
    left: 0;
    background-image: url(../img/MM_label.svg);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 5;
    min-height: unset;
  }
}

@media (min-width: 60em) and (min-width: 100em) {
  main > .wp-block-cover:first-child [id*="slider-block"]::after {
    width: 295px;
    top: calc(100vh - 295px);
  }
}

@media (min-width: 60em) {
  @supports not (aspect-ratio: 1/1) {
    main > .wp-block-cover:first-child [id*="slider-block"]::after {
      height: 200px;
    }
    @media (min-width: 100em) {
      main > .wp-block-cover:first-child [id*="slider-block"]::after {
        height: 295px;
      }
    }
  }
}

/* ========================================================================
   Component: Slider
 ========================================================================== */
/*
 * 1. Prevent tab highlighting on iOS.
 */
.uk-slider {
  /* 1 */
  -webkit-tap-highlight-color: transparent;
}

/* Container
 ========================================================================== */
/*
 * Clip child elements
 */
.uk-slider-container {
  overflow: hidden;
}

/*
 * Widen container to prevent box-shadows from clipping, `large-box-shadow`
 */
.uk-slider-container-offset {
  margin: -11px -25px -39px -25px;
  padding: 11px 25px 39px 25px;
}

/* Items
 ========================================================================== */
/*
 * 1. Optimize animation
 * 2. Create a containing block. In Safari it's neither created by `transform` nor `will-change`.
 */
.uk-slider-items {
  /* 1 */
  will-change: transform;
  /* 2 */
  position: relative;
}

/*
 * 1. Reset list style without interfering with grid
 * 2. Prevent displaying the callout information on iOS.
 */
.uk-slider-items:not(.uk-grid) {
  display: flex;
  /* 1 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 2 */
  -webkit-touch-callout: none;
}

.uk-slider-items.uk-grid {
  flex-wrap: nowrap;
}

/* Item
 ========================================================================== */
/*
 * 1. Let items take content dimensions (0 0 auto)
 *    `max-width` needed to keep image responsiveness and prevent content overflow
 * 3. Create position context
 * 4. Disable horizontal panning gestures in IE11 and Edge
 * 5. Suppress outline on focus
 */
.uk-slider-items > * {
  /* 1 */
  flex: none;
  max-width: 100%;
  /* 3 */
  position: relative;
  /* 4 */
  touch-action: pan-y;
}

/* 5 */
.uk-slider-items > :focus {
  outline: none;
}

/* ========================================================================
   Component: Dotnav
 ========================================================================== */
/*
 * 1. Allow items to wrap into the next line
 * 2. Reset list
 * 3. Gutter
 */
.uk-dotnav {
  display: flex;
  /* 1 */
  flex-wrap: wrap;
  /* 2 */
  margin: 0;
  padding: 0;
  list-style: none;
  /* 3 */
  margin-left: -12px;
}

/*
 * 1. Space is allocated solely based on content dimensions: 0 0 auto
 * 2. Gutter
 */
.uk-dotnav > * {
  /* 1 */
  flex: none;
  /* 2 */
  padding-left: 12px;
}

/* Items
 ========================================================================== */
/*
 * Items
 * 1. Hide text if present
 */
.uk-dotnav > * > * {
  display: block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(70, 70, 70, 0.2);
  /* 1 */
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  width: 30px;
  height: 48px;
  background: transparent;
  border-radius: 0;
  position: relative;
  position: relative;
}

.uk-dotnav > * > *::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(31, 52, 96, 0.7);
  border-radius: 2px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Hover + Focus */
.uk-dotnav > * > :hover,
.uk-dotnav > * > :focus {
  background-color: rgba(70, 70, 70, 0.6);
  outline: none;
  background: transparent;
}

/* OnClick */
.uk-dotnav > * > :active {
  background-color: rgba(70, 70, 70, 0.2);
  background-color: transparent;
}

/* Active */
.uk-dotnav > .uk-active > * {
  background-color: rgba(70, 70, 70, 0.6);
  background: transparent;
  position: relative;
}

.uk-dotnav > .uk-active > *::before {
  content: "";
  position: absolute;
  display: block;
  height: 3px;
  background: #1F3460;
}

/* Modifier: 'uk-dotnav-vertical'
 ========================================================================== */
/*
 * 1. Change direction
 * 2. Gutter
 */
.uk-dotnav-vertical {
  /* 1 */
  flex-direction: column;
  /* 2 */
  margin-left: 0;
  margin-top: -12px;
}

/* 2 */
.uk-dotnav-vertical > * {
  padding-left: 0;
  padding-top: 12px;
}