@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.
 */
.uk-overlay-secondary {
  background-color: #007CBD;
}

.wp-block-post-template .jed-overlayTeaser picture {
  aspect-ratio: 16 / 11;
}

.jed-overlayTeaser__content picture {
  display: flex;
}

.jed-overlayTeaser__content picture img {
  object-fit: cover;
}

.jed-overlayTeaser__content .uk-overlay-secondary {
  padding: 70px 28px 70px 1.5rem;
}

.jed-overlayTeaser__content.uk-transition-toggle:hover .jed-overlayTeaser__toggle {
  background-color: #FFFFFF;
}

.jed-overlayTeaser__content.uk-transition-toggle:hover .jed-overlayTeaser__toggle::before {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path fill='%23007CBD' d='M15.1,30c-0.4,0-0.7-0.3-0.7-0.7V0.7c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v28.6C15.8,29.7,15.3,30,15.1,30z'/><path fill='%23007CBD' d='M29.3,15.8H0.7c-0.4,0-0.7-0.4-0.7-0.7c0-0.3,0.3-0.7,0.7-0.7h28.6c0.4,0,0.7,0.3,0.7,0.7S29.7,15.8,29.3,15.8z'/></svg>");
  transform: rotate(180deg);
}

.jed-overlayTeaser__toggle {
  z-index: 4;
  overflow: hidden;
  display: block;
  width: 60px;
  height: 60px;
  background-color: #007CBD;
}

.jed-overlayTeaser__toggle::before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path fill='%23ffffff' d='M15.1,30c-0.4,0-0.7-0.3-0.7-0.7V0.7c0-0.4,0.3-0.7,0.7-0.7s0.7,0.3,0.7,0.7v28.6C15.8,29.7,15.3,30,15.1,30z'/><path fill='%23ffffff' d='M29.3,15.8H0.7c-0.4,0-0.7-0.4-0.7-0.7c0-0.3,0.3-0.7,0.7-0.7h28.6c0.4,0,0.7,0.3,0.7,0.7S29.7,15.8,29.3,15.8z'/></svg>");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center center;
  transition: transform .3s ease-out;
}

.jed-overlayTeaser__toggle:hover {
  cursor: pointer;
}

.jed-overlayTeaser__toggle:hover::before {
  transform: rotate(180deg);
}

.jed-overlayTeaser__text {
  max-height: 100%;
  padding-right: 1.5rem;
  color: #ffffff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow-x: hidden;
  overflow-y: auto;
}

.jed-overlayTeaser__text::-webkit-scrollbar {
  width: 4px;
}

.jed-overlayTeaser__text::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0.5);
}

.jed-overlayTeaser__text::-webkit-scrollbar-thumb {
  background-color: #FFFFFF;
}

.jed-overlayTeaser__crop {
  width: 100%;
  padding-top: 56.25%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.jed-overlayTeaser__crop > * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ========================================================================
   Component: Overlay
 ========================================================================== */
.uk-overlay {
  padding: 30px 30px;
}

/*
 * Remove margin from the last-child
 */
.uk-overlay > :last-child {
  margin-bottom: 0;
}

/* Icon
 ========================================================================== */
/* Style modifiers
 ========================================================================== */
/*
 * Default
 */
.uk-overlay-default {
  background: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.7);
}

/*
 * Primary
 */
.uk-overlay-primary {
  background: rgba(0, 124, 189, 0.8);
}