/*!
 * Krystallpalast Gruppe-2024 1.0.6
 * https://www.ifabrik.de/
 *
 * Copyright 2023 i-fabrik GmbH
 *
 * Released on October 8, 2024
 * 
 * Author: i-fabrik GmbH
 * Contributor: Heiko Pfefferkorn <heiko.pfefferkorn@ifabrik.de>
 */
@charset "UTF-8";
/**
 * Überschriftselektoren zusammenstellen<br/>
 *
 * @example scss
 *   $var : heading-selectors();
 *   // = h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 *
 *   $var : heading-selectors(1, 6, false);
 *   // = h1, h2, h3, h4, h5, h6
 *
 *   $var : heading-selectors(3, 4);
 *   // = h3, .h3, h4, .h4
 *
 *   // Abfangen von nicht korrekten Angaben (`< 1`, `> 6`).
 *   $var : heading-selectors(0, 0);
 *   $var : heading-selectors(-1, 0);
 *   $var : heading-selectors(7, -15);
 *   // = h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6
 *
 *   $var : heading-selectors(0, 2);
 *   // = h1, .h1, h2, .h2
 *
 *   // Vertauschte Werte.
 *   $var : heading-selectors(3, 1);
 *   // = h3, .h3, h4, .h4, h5, .h5, h6, .h6
 */
/**
 * Replace `$search` with `$replace` in `$string`
 */
/**
 * SVG-XML-String kodieren
 */
/**
 * Einheit eines Wertes entfernen.
 *
 * @example
 *   $var : strip-unit(16px);
 *   // = 16
 */
/**
 * Einheit eines Wertes entfernen.
 *
 * @example
 *   $var : get-unit(16px);
 *   // = px
 */
/**
 * Höhenangabe ´vh´ auf Basis einer Rootvariable, wird per JS gesetzt berechnen.
 * (https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html)
 *
 * @example scss
 *   // Rootvariable `--vh` wurde per JS mit dem Wert ´6.4px´ (Browserhöhe ist 640px) gesetzt
 *
 *   $var : vh(50);
 *   // = calc(var(--vh, 1vh) * 50); // berechnet wird demzufolge 320px
 *
 *   // Mit Prefix der Rootvariable (`--ws-vh`)
 *
 *   $var : vh(25, 'ws-');
 *   // = calc(var(--ws-vh, 1vh) * 25); // berechnet wid demzufolge 160px
 */
/**
 * Prüft ob `$val` null ist.
 *
 * @example scss
 *   $var : is-null(null);
 *   // = true
 *
 *   $var : is-null(0);
 *   // = false
 */
/**
 * Prüft ob `$val` leer ist.
 *
 * @example scss
 *   $var : is-empty();
 *   // = true
 *
 *   $var : is-empty('');
 *   // = true
 *
 *   $var : is-empty('foo');
 *   // = false
 */
/**
 * Prüft ob `$val` numerisch ist.
 *
 * @example scss
 *   $var : is-numeric(1);
 *   // = true
 *
 *   $var : is-numeric('2');
 *   // = false
 *
 *   $var : is-numeric(3rem);
 *   // = false
 */
/**
 * Prüft ob `$val` boolean ist.
 *
 * @example scss
 *   $var : is-bool(true);
 *   // = true
 *
 *   $var : is-bool(false);
 *   // = false
 *
 *   $var : is-bool(1);
 *   // = true
 *
 *   $var : is-bool(0);
 *   // = false
 *
 *   $var : is-bool(null);
 *   // = false
 */
/**
 * Prüft ob `$val` ein String ist.
 *
 * @example scss
 *   $var : is-string(foo);
 *   // = true
 *
 *   $var : is-string('bar');
 *   // = true
 *
 *   $var : is-string(0);
 *   // = false
 */
/**
 * Prüft ob `$val` eine Liste ist.
 *
 * @example scss
 *   $var : is-list(a b c d);
 *   // = true
 *
 *   $var : is-list(lorem, ipsum);
 *   // = true
 *
 *   $var : is-list(foo);
 *   // = false
 */
/**
 * Prüft ob `$val` eine Map ist.
 *
 * @example scss
 *   $var : is-map((a: b));
 *   // = true
 *
 *   $var : is-list(foo);
 *   // = false
 */
/**
 * Farbton (Hue) eines Hexwertes zurückgeben.
 *
 * @example
 *   get-hue(#6176ff);
 *   // = 232
 */
/**
 * Sättigung (Saturation) eines Hexwertes zurückgeben.
 *
 * @example
 *   get-saturation(#6176ff);
 *   // = 100%
 */
/**
 * Helligkeit (Lightness) eines Hexwertes zurückgeben.
 *
 * @example
 *   get-lightness(#6176ff);
 *   // = 69%
 */
/**
 * Überschreiben der SCSS-Konvertierungsfunktion `hsl()` zu einer realen
 * `hsl()`-Angabe.
 *
 * @example
 *   hsl(232, 100%, 69%);
 *   // = hsl(232, 100%, 69%)
 *
 *   hsl(232, 100, 69);
 *   // = hsl(232, 100%, 69%)
 *
 *   hsl(#6176ff);
 *   // = hsl(232, 100%, 69%)
 *
 *   hsl(var(--color-hue), 100%, 69%);
 *   // = hsl(var(--color-hue), 100%, 69%)
 *
 *   hsl(var(--color-hue), var(--color-saturation), var(--color-lightness));
 *   // = hsl(var(--color-hue), var(--color-saturation), var(--color-lightness))
 */
/**
 * Überschreiben der SCSS-Konvertierungsfunktion `hsla()` zu einer realen
 * `hsla()`-Angabe.
 *
 * @example
 *   hsla(232, 100%, 69%, 0.75);
 *   // = hsla(232, 100%, 69%, 0.75)
 *
 *   hsla(232, 100, 69, 0.75);
 *   // = hsla(232, 100%, 69%, 0.75)
 *
 *   hsla(#6176ff, 0.75);
 *   // = hsla(232, 100%, 69%, 0.75)
 *
 *   hsla(#6176ff);
 *   // = hsla(232, 100%, 69%, 1)
 *
 *   hsla(var(--color-hue), 100%, 69%);
 *   // = hsla(var(--color-hue), 100%, 69%, 1)
 *
 *   hsla(var(--color-hue), var(--color-saturation), var(--color-lightness));
 *   // = hsla(var(--color-hue), var(--color-saturation), var(--color-lightness), 1)
 *
 *   hsla(#6176ff, var(--opacity));
 *   // = hsla(232, 100%, 69%, var(--opacity))
 */
/**
 * Überschreiben der SCSS-Konvertierungsfunktion `rgb()` zu einer realen
 * `rgb()`-Angabe.
 *
 * @example
 *   rgb(97, 118, 255);
 *   // = rgb(97, 118, 255)
 *
 *   rgb(#6176ff);
 *   // = rgb(97, 118, 255)
 *
 *   // `--color : 97, 118, 255;`
 *   rgb(var(--color));
 *   // = rgb(var(--color))
 */
/**
 * Überschreiben der SCSS-Konvertierungsfunktion `rgba()` zu einer realen
 * `rgba()`-Angabe.
 *
 * @example
 *   rgba(97, 118, 255, 0.75);
 *   // = rgba(97, 118, 255, 0.75)
 *
 *   rgba(97, 118, 255);
 *   // = rgba(97, 118, 255, 1)
 *
 *   rgba(#6176ff, 0.75);
 *   // = rgba(97, 118, 255, 0.75)
 *
 *   rgba(#6176ff);
 *   // = rgba(97, 118, 255, 1)
 *
 *   // `--color : 97, 118, 255;`
 *   rgba(var(--color));
 *   // = rgba(var(--color), 1)
 *
 *   // `--color : 97, 118, 255;`
 *   // `--opcity : 0.75;`
 *   rgba(var(--color), var(--opacity));
 *   // = rgba(var(--color), var(--opacity))
 */
/**
 * Minimale Breakpointweite.<br/>
 * <small>_Null für den kleinsten (ersten) Breakpoint._</small>
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   $var : breakpoint-min('xs');
 *   // = 420px
 */
/**
 * Maximale Breakpointweite.<br/>
 * <small>_Null für den größten (letzten) Breakpoint. Der Maximalwert wird als Minimum des nächsten Breakpointwertes minus 1px berechnet._</small>
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   $var : breakpoint-max('xs');
 *   // = 575px
 */
/**
 * Name des nächsten Breakpoints.<br/>
 * <small>_Null für den letzten Breakpoint._</small>
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   $var : breakpoint-next('xs');
 *   // = s
 *
 *   $var : breakpoint-next('s');
 *   // = m
 */
/**
 * Anwendung von Definitionen (`@content`) ab dem Breakpoint `$name` und höher
 * (mobile first).
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   .container {
 *     background : #fff;
 *
 *     @include media-breakpoint-up('s') {
 *       background : #ccc;
 *     }
 *   }
 *
 * @example css - Result
 *   .container {
 *     background : #fff;
 *   }
 *
 *   @media (min-width: 576px) {
 *     .container {
 *       background : #ccc;
 *     }
 *   }
 */
/**
 * Anwendung von Definitionen (`@content`) ab der Maximalbreite des Breakpoint
 * `$name` und kleiner (desktop first).
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   .container {
 *     background : #fff;
 *
 *     @include media-breakpoint-down('s') {
 *       background : #ccc;
 *     }
 *   }
 *
 * @example css - Result
 *   .container {
 *     background : #fff;
 *   }
 *
 *   @media (max-width: 767px) {
 *     .container {
 *       background : #ccc;
 *     }
 *   }
 */
/**
 * Shortcut-Funktion für `media-breakpoint-up()` und `media-breakpoint-down()`.
 */
/**
 * Anwendung von Definitionen (`@content`) zwischen Minimumbreite `$lower` und
 * Maximumbreite `$upper`.
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   .container {
 *     background : #fff;
 *
 *     @include media-breakpoint-between('xs', 'm') {
 *       background : #ccc;
 *     }
 *   }
 *
 * @example css - Result
 *   .container {
 *     background : #fff;
 *   }
 *
 *   @media (min-width : 420px) and (max-width : 991px) {
 *     .container {
 *       background : #ccc;
 *     }
 *   }
 */
/**
 * Anwendung von Definitionen (`@content`) nur innerhalb der Minimum- und
 * Maxiamlbreite des Breakpoints `$name`.
 *
 * @example scss
 *   $breakpoints : (
 *     'xxs' : 0,
 *     'xs'  : 420px,
 *     's'   : 576px,
 *     'm'   : 768px,
 *     'l'   : 992px
 *   );
 *
 *   .container {
 *     background : #fff;
 *
 *     @include media-breakpoint-only('s') {
 *       background : #ccc;
 *     }
 *   }
 *
 * @example css - Result
 *   .container {
 *     background : #fff;
 *   }
 *
 *   @media (min-width: 576px) and (max-width: 767px) {
 *     .container {
 *       background : #ccc;
 *     }
 *   }
 */
/**
 * Kontextbasierten Selektor etwas vereinfachen ;).
 */
/**
 * On `:disabled`
 */
/**
 * On `.not(:disabled)`
 */
/**
 * On `:readonly`
 */
/**
 * On `:hover`
 */
/**
 * On `:active`
 */
/**
 * On `:focus`
 */
/**
 * On `:hover, :focus`
 */
/**
 * On `:hover, :active, :focus`
 */
/**
 * Webfonts mit `@font-face` integrieren.
 *
 * Bzgl. moderner Browser (Stand Anfang 2019) wird normalerweise nur `woff2` und
 * `woff` benötigt. Eine Prüfung auf das Schriftformat bzgl. einer Erweiterung
 * der URL wird nur für `eot` und `ttf` durchgeführt!
 *
 * `woff2` moderne Browser
 * `woff` IE 11
 * `eot` IE6-IE8
 * `ttf` Safari, Android, iOS
 *
 * @example scss
 *   @include font-face(
 *     'Example-Regular',
 *     'example/',
 *     (
 *       woff2 : 'example-regular.woff2',
 *       woff  : 'example-regular.woff',
 *       eot   : 'example-regular.eot',
 *       ttf   : 'example-regular.ttf'
 *     )
 *   );
 *
 * @example css - Result
 *   @font-face {
 *     font-family : 'Example-Regular';
 *     font-display: swap;
 *     src         : url('../example/example-regular.woff2') format('woff2'),
 *                   url('../example/example-regular.woff') format('woff'),
 *                   url('../example/example-regular.eot?#iefix') format('embedded-opentype'),
 *                   url('../example/example-regular.ttf') format('truetype');
 *   }
 */
/**
 * Generieren von Selektoren bzgl. Validierungsstatus
 */
/* stylelint-disable-line scss/dollar-variable-pattern */
/* stylelint-disable-line scss/dollar-variable-pattern */
/**
 * Scrollen eines Containers deaktivieren.
 */
/**
 * Helper class integrieren.
 */
/**
 * Textelement bei Klick vollständig ausgewählen.
 */
/**
 * Textelement nicht auswählbar.
 */
/**
 * ´Aufspannen´ eines Links.
 * Ein Elternelement muss dazu mit `position: relative;` definiert sein!
 */
/**
 * Inhalte visuell ausblenden aber für unterstützende Technologien zugänglich
 * halten.
 */
/**
 * Zeige Inhalt nur wenn er fokussiert wird/wurde.
 */
body {
  --wp-page-header-background-color: transparent;
}
@media (min-width: 992px) {
  body {
    --wp-page-header-background-color: transparent;
  }
}

.page-main {
  padding-top: 0;
}
.page-main > .section.section-hero {
  margin-top: 0 !important;
}
.page-main > .section.section-hero .section.-colored {
  --wp-section-padding: var(--wp-spacing-l);
}
.page-main > .section:not(:first-child) {
  content-visibility: auto;
}
/*# sourceMappingURL=homepage.css.map */