@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.
 */
.error {
  display: block;
  margin: 0;
  color: red;
}

#downloadForm label {
  display: block;
}

#downloadForm button.uk-button-accent-green {
  width: 100%;
  color: #ffffff;
}

.uk-checkbox.error {
  display: inline-block;
}

.download-column {
  display: none;
}

@media (max-width: 99.99em) {
  [id*="configurator-block"] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

@media (max-width: 59.99em) {
  [id*="configurator-block"] {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.jed-configurator__wrapper {
  overflow-x: auto;
}

.jed-configurator__header th {
  text-align: center;
  color: #ffffff;
  font-weight: 500;
  padding: 0.25rem 1rem;
  background-color: #1F3460;
  box-sizing: border-box;
}

.jed-configurator__header th:last-of-type {
  background-color: #FFFFFF;
}

.jed-configurator__header tr:first-of-type th {
  border-bottom: 1px solid #FFFFFF;
}

.jed-configurator__header tr:first-of-type th:nth-of-type(1) {
  width: 40%;
}

.jed-configurator__header tr:first-of-type th:nth-of-type(2) {
  width: 40%;
}

.jed-configurator__header tr:first-of-type th:nth-of-type(3) {
  vertical-align: middle;
  min-width: 150px;
}

.jed-configurator__header tr:first-of-type th:nth-of-type(4) {
  width: 5%;
  min-width: 80px;
}

.jed-configurator__header tr:nth-of-type(2) th {
  width: 20%;
  min-width: 250px;
}

.jed-configurator__header tr:nth-of-type(2) th:nth-of-type(5) {
  width: 5%;
  min-width: 80px;
}

.jed-configurator thead th {
  width: 20%;
  min-width: 250px;
  box-sizing: border-box;
  padding: 1rem 1.5rem;
  background-clip: padding-box;
}

.jed-configurator thead th:nth-of-type(5) {
  background-color: #1F3460;
  color: #ffffff;
  text-align: center;
  vertical-align: middle;
  width: auto;
  min-width: 150px;
}

.jed-configurator thead th:nth-of-type(6) {
  width: 5%;
  min-width: 80px;
}

.jed-configurator thead th:last-of-type {
  vertical-align: middle;
  text-align: center;
}

.jed-configurator thead th:last-of-type img, .jed-configurator thead th:last-of-type svg {
  width: 20px;
}

.jed-configurator thead .dropdown-toggler {
  width: calc(100% - 24px);
  font-size: clamp(22px, 2vw, 1.2rem);
  background-color: transparent;
  color: #ffffff;
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='8' viewBox='0 0 22 8'><path fill='%23ffffff' d='M0,0.9c0-0.1,0-0.3,0.1-0.4c0.2-0.4,0.7-0.5,1-0.2l10,6.1l9.7-6.1c0.4-0.2,0.8-0.1,1,0.2c0.2,0.4,0.1,0.8-0.2,1l-10,6.4c-0.2,0.2-0.5,0.2-0.8,0L0.4,1.6C0.1,1.4,0,1.2,0,0.9z'/></svg>");
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: right center;
  padding: 0;
  float: right;
  margin-top: 5px;
}

.jed-configurator thead .dropdown-toggler:hover {
  cursor: pointer;
}

.jed-configurator thead .dropdown-toggler:focus {
  color: #ffffff;
  background-color: transparent;
}

.jed-configurator__sort-icon {
  width: 48px;
  aspect-ratio: 1;
  cursor: pointer;
  text-align: center;
  color: #ffffff;
  line-height: 48px;
  margin-left: -24px;
  float: left;
}

.jed-configurator__sort-icon::before {
  content: '⇅';
}

.jed-configurator__sort-icon.asc::before {
  content: '↑';
}

.jed-configurator__sort-icon.desc::before {
  content: '↓';
}

@supports not (aspect-ratio: 1/1) {
  .jed-configurator__sort-icon {
    height: 48px;
  }
}

.jed-configurator tr.bestMatch td {
  background-color: #007CBD;
}

.jed-configurator input[type='checkbox']:checked {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%235FB98B' d='M6.7,12.7c-0.2,0-0.4-0.1-0.5-0.2L1.9,7.6C1.7,7.3,1.7,6.9,2,6.7c0.3-0.3,0.7-0.2,0.9,0.1l3.7,4.2l6.4-7.4c0.3-0.3,0.7-0.3,0.9-0.1c0.3,0.3,0.3,0.7,0.1,0.9l-6.9,8C7,12.6,6.8,12.7,6.7,12.7z'/></svg>");
}

.downloadBtn-wrapper {
  text-align: right;
  margin-top: 1.5rem;
}

.downloadBtn-wrapper button {
  border: 2px solid #007CBD;
}

@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(95, 185, 139, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(95, 185, 139, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(95, 185, 139, 0);
  }
}

.jed-configurator__instructions {
  position: relative;
  min-height: 60px;
}

.jed-configurator__instructions.uk-active {
  background-color: #F7F7F7;
}

.jed-configurator__instructions.uk-active .jed-configurator__instructionContent {
  display: block;
}

.jed-configurator__instructionToggle {
  outline: none;
  border: none;
  width: 30px;
  height: 30px;
  background-color: transparent;
  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='%235FB98B' d='M15,30A15,15,0,1,1,30,15,15,15,0,0,1,15,30ZM8.35,8.82a.72.72,0,0,0,.17,1l2.09,1.59a.73.73,0,0,0,1-.13C12.7,9.89,13.45,9.1,15.09,9.1c1.24,0,2.76.79,2.76,2,0,.91-.74,1.37-2,2.06-1.43.79-3.31,1.79-3.31,4.27v.24a.73.73,0,0,0,.73.73h3.38a.73.73,0,0,0,.73-.73v-.08c0-1.72,5-1.79,5-6.45,0-3.51-3.64-6.17-7-6.17A7.85,7.85,0,0,0,8.35,8.82Zm3.87,13.92A2.78,2.78,0,1,0,15,20,2.78,2.78,0,0,0,12.22,22.74Z'/></svg>");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50%;
  transform: 1;
  animation: pulse 2s infinite;
}

.jed-configurator__instructionToggle:hover {
  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='%23FFCB04' d='M15,30A15,15,0,1,1,30,15,15,15,0,0,1,15,30ZM8.35,8.82a.72.72,0,0,0,.17,1l2.09,1.59a.73.73,0,0,0,1-.13C12.7,9.89,13.45,9.1,15.09,9.1c1.24,0,2.76.79,2.76,2,0,.91-.74,1.37-2,2.06-1.43.79-3.31,1.79-3.31,4.27v.24a.73.73,0,0,0,.73.73h3.38a.73.73,0,0,0,.73-.73v-.08c0-1.72,5-1.79,5-6.45,0-3.51-3.64-6.17-7-6.17A7.85,7.85,0,0,0,8.35,8.82Zm3.87,13.92A2.78,2.78,0,1,0,15,20,2.78,2.78,0,0,0,12.22,22.74Z'/></svg>");
  cursor: pointer;
}

.jed-configurator__instructionContent {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
  display: none;
}

.jed-configurator .uk-dropdown {
  background-color: #FFFFFF;
  padding: 0;
  border: 1px solid #007CBD;
}

.jed-configurator .ul-select li {
  padding: 0.5rem 1.5rem;
  font-size: 1.3rem;
  line-height: 1.5;
  color: #007CBD;
}

.jed-configurator .ul-select li:hover {
  cursor: pointer;
  color: #ffffff;
  background-color: #007CBD;
}