@leuffen/themejs1 2.0.7 → 2.0.8

package/docs/assets/dist/style.css

@@ -0,0 +1,1095 @@
+/*!***************************************************************************************************************************************!*\
+  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/sass-loader/dist/cjs.js!./demo_styles.scss ***!
+  \***************************************************************************************************************************************/
+@charset "UTF-8";
+joda-content {
+  --joda-init: true;
+}
+
+:root {
+  --as-image-aspect-ratio: 16 / 9;
+}
+
+.do-image {
+  --joda-use: image();
+}
+
+.as__image {
+  width: 100%;
+  position: relative;
+}
+.as__image > .image {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: var(--as-image-aspect-ratio, 4/5);
+}
+.as__image > .image > img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+.use-map {
+  --joda-use: map();
+}
+
+.as__map {
+  width: 100%;
+  aspect-ratio: 21/9;
+  position: relative;
+}
+.as__map .as__map-overlay {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.as__map .as__map-overlay > img {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: opacity(0.5);
+}
+.as__map .as__map-overlay > div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  z-index: 99;
+  text-align: center;
+}
+:root {
+  --layout-navbar-style: default;
+  --layout-navbar-position: fixed;
+  --as-minibar-height: 24px;
+  --as-minibar-background: #21446b;
+  --as-minibar-text-color: white;
+}
+
+.use-navbar {
+  --joda-use: navbar();
+}
+
+.as__navbar {
+  height: auto;
+  top: 0;
+  width: 100%;
+  transition: opacity 1s ease-in-out;
+  position: fixed;
+  z-index: 999;
+  isolation: isolate;
+  opacity: 1;
+}
+.as__navbar.fixed {
+  position: fixed;
+  top: 0;
+  width: 100%;
+}
+.as__navbar.absolute {
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.as__navbar.auto-fixed.scrolled {
+  opacity: 0;
+}
+.as__navbar.auto-fixed.scrolled.fixed {
+  opacity: 1;
+  position: fixed;
+}
+.as__navbar .navbar-brand {
+  display: block;
+  height: 84px;
+  max-width: 220px;
+  width: 220px;
+}
+.as__navbar .navbar-brand img {
+  object-fit: contain;
+  object-position: left center;
+  height: 100%;
+  width: 100%;
+}
+.as__navbar .as__minibar {
+  overflow: hidden;
+  color: var(--as-minibar-text-color);
+  background: var(--as-minibar-background);
+  height: var(--as-minibar-height, 24px);
+  transition: height 0.3s ease-in-out;
+  z-index: 9999;
+}
+.as__navbar .as__minibar ul {
+  text-align: right;
+  text-decoration: none;
+  list-style-type: none;
+}
+.as__navbar .as__minibar ul li {
+  display: inline-block;
+  margin: 0 0.5rem;
+}
+.as__navbar .as__minibar ul li a {
+  text-decoration: none;
+}
+.as__navbar .as__minibar ul li a:hover {
+  text-decoration: underline;
+}
+.as__navbar .as__mainbar .nav-link {
+  padding-right: 0.8rem;
+  padding-left: 0.8rem;
+}
+.as__navbar .as__mainbar .navbar-collapse.show {
+  background: var(--as-mainbar-background, white);
+}
+.as__navbar .as__mainbar .navbar-toggler {
+  background: rgba(255, 255, 255, 0.5);
+}
+
+.as__navbar.scrolled .as__minibar {
+  height: 0;
+}
+
+/* Theme specific styles */
+.as__navbar.default .as__mainbar {
+  background: var(--as-mainbar-background, white);
+  border-bottom: 1px solid var(--bs-primary, #0d6efd);
+  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+}
+.as__navbar.default .as__minibar {
+  font-size: 13px;
+  line-height: 24px;
+  background: var(--as-minibar-background, #007bff);
+}
+.as__navbar.default .as__minibar a {
+  color: white;
+}
+
+.as__navbar.transparent .as__minibar {
+  border: 0;
+  font-size: 13px;
+  line-height: 24px;
+}
+.as__navbar.transparent .as__mainbar {
+  background-color: transparent !important;
+  transition: all 0.3s ease-in-out;
+  border: 0;
+}
+.as__navbar.transparent .as__mainbar a {
+  font-weight: bolder;
+  text-shadow: 1px 1px 1px var(--bs-light, #ccc), -1px -1px 1px var(--bs-light, #ccc), 1px -1px 1px var(--bs-light, #ccc), -1px 1px 1px var(--bs-light, #ccc);
+}
+
+.as__navbar.transparent.scrolled .as__mainbar {
+  background-color: var(--as-mainbar-background, white) !important;
+  border-bottom: 1px solid var(--bs-primary, #0d6efd);
+  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+}
+.as__navbar.transparent.scrolled .as__minibar {
+  height: 0;
+}
+
+.use-navblox {
+  --joda-class: as__navblox;
+  --as-navblox-secondary-color: #21446b;
+  --as-navblox-nav-bg: #21446b;
+  --as-navblox-nav-text: #fff;
+}
+
+.as__navblox .row > div {
+  position: relative;
+  background: var(--as-navblox-secondary-color, #21446b);
+  color: white;
+  border-left: 1px dashed white;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.as__navblox .row > div.block i.bi::before {
+  line-height: inherit;
+  padding-right: 0.5rem;
+}
+.as__navblox .row > div.block a {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  line-height: 1.5rem;
+  color: inherit;
+  text-decoration: none;
+  transition: all 0.15s ease-in-out;
+}
+.as__navblox .row > div.block a:hover {
+  transform: scale(110%);
+}
+.as__navblox .row > div .navbar-brand {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: white;
+  color: #21446b;
+}
+.as__navblox .row > div .navbar-brand img {
+  height: 6.5rem;
+  width: auto;
+}
+.as__navblox .row > div .navbar-brand a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.as__navblox .row > div .navbar-brand span {
+  font-size: 2.5rem;
+  padding-left: 1rem;
+  line-height: 2.5rem;
+}
+.as__navblox .row > div .navbar-brand.mobile {
+  position: relative;
+  height: 150px;
+  width: 100%;
+}
+.as__navblox .sidenav-positioner {
+  height: 0 !important;
+  min-height: 0 !important;
+}
+.as__navblox .sidenav-positioner .sidenav {
+  top: 0;
+  right: 0;
+  background: var(--as-navblox-nav-bg, #fff);
+  color: var(--as-navblox-nav-text, #21446b);
+  width: 33vw;
+  min-width: 300px;
+  position: absolute;
+  z-index: 99999;
+  overflow: hidden;
+  transform: scale(0%);
+  transition: all 0.2s ease-in-out;
+  padding: 1rem;
+}
+.as__navblox .sidenav-positioner .sidenav ul > li {
+  list-style-type: none;
+}
+.as__navblox .sidenav-positioner .sidenav ul > li a {
+  padding: 0.5rem 0;
+  text-decoration: none;
+  color: inherit;
+  display: inline-block;
+  opacity: 0.8;
+  transition: all 0.15s ease-in-out;
+  transform: scale(100%);
+}
+.as__navblox .sidenav-positioner .sidenav ul > li a:hover {
+  transform: scale(110%);
+  opacity: 1;
+}
+.as__navblox .sidenav-positioner .sidenav ul > li a:active {
+  font-weight: bold;
+  opacity: 1;
+}
+
+body.nav-open .sidenav-positioner .sidenav {
+  transform: scale(100%);
+}
+
+:root {
+  --icontext-color: #007bff;
+}
+
+.as__textstyle-icontext {
+  position: relative;
+}
+.as__textstyle-icontext .text {
+  padding-top: 1.2rem;
+  padding-left: 3rem !important;
+}
+.as__textstyle-icontext .icon {
+  font-size: 38px;
+  color: var(--icontext-color, #007bff);
+  position: absolute;
+}
+
+:root {
+  --layout-accordion-auto-open: true;
+}
+
+.use-accordion {
+  --joda-use: accordion();
+  --joda-class: as__accordion;
+}
+
+.as__accordion .section-h3 > .content, .as__accordion .section-h3 > .children {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease-out;
+}
+.as__accordion .open.section-h3 > .content, .as__accordion .open.section-h3 > .children {
+  max-height: var(--orig-height);
+}
+.as__accordion .section-h3 {
+  background-color: rgba(0, 0, 0, 0);
+  transition: background-color 0.45s ease-out;
+}
+.as__accordion .section-h3.open {
+  background-color: var(--as-accordion-open-bg, rgba(220, 224, 229, 0.5));
+}
+.as__accordion .section-h3 > .content, .as__accordion .section-h3 > .children {
+  padding-left: 2.5rem;
+}
+.as__accordion .as__accordion-header {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  margin-top: 2rem;
+  padding-bottom: 2rem;
+}
+.as__accordion .as__accordion-header h3 {
+  margin: 0;
+  padding: 0;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+.as__accordion .as__accordion-header h3:hover {
+  background-color: var(--as-accordion-hover-bg, rgba(0, 0, 0, 0.02));
+}
+.as__accordion h3::before {
+  display: inline-block;
+  content: "";
+  width: 2.5rem;
+  flex-shrink: 0;
+  height: 1.25rem;
+  margin-right: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M19,11.5v1a.5.5,0,0,1-.5.5H13v5.5a.5.5,0,0,1-.5.5h-1a.5.5,0,0,1-.5-.5V13H5.5a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5H11V5.5a.5.5,0,0,1,.5-.5h1a.5.5,0,0,1,.5.5V11h5.5A.5.5,0,0,1,19,11.5Z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: 1.25rem;
+  background-position: center center;
+}
+.as__accordion .open h2::before, .as__accordion .open h3::before {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232d374b'%3E%3Cpath d='M5.5,13a.5.5,0,0,1-.5-.5v-1a.5.5,0,0,1,.5-.5h13a.5.5,0,0,1,.5.5v1a.5.5,0,0,1-.5.5Z'/%3E%3C/svg%3E");
+}
+
+.use-hamburger {
+  --joda-use: hamburger();
+}
+
+body.nav-open a.as__hamburger {
+  width: 3.3em;
+}
+body.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(1) {
+  left: 0.6em;
+  top: 0;
+  transform: rotate(45deg);
+  transform-origin: top left;
+}
+body.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(2) {
+  opacity: 0;
+}
+body.nav-open a.as__hamburger > .as__hamburger-bar:nth-child(3) {
+  left: 0.6em;
+  top: 2.2em;
+  transform: rotate(-45deg);
+  transform-origin: bottom left;
+}
+
+a.as__hamburger {
+  --hamburger-size: var(--hamburger-size, 0.9rem);
+  --hamburger-bar-color: var(--hamburger-bar-color, #8c9b92);
+  font-size: var(--hamburger-size, 1rem);
+  display: block;
+  width: 3.6em;
+  height: 2.6em;
+  padding: 0 !important;
+  position: relative;
+  cursor: pointer;
+  text-decoration: none !important;
+}
+a.as__hamburger span {
+  padding-top: 3.8em;
+  display: block;
+}
+a.as__hamburger > .as__hamburger-menu {
+  padding-top: 3.8em;
+  text-align: center;
+  width: 100%;
+  color: var(--hamburger-bar-color, #8c9b92);
+}
+a.as__hamburger > .as__hamburger-bar {
+  background-color: var(--hamburger-bar-color, #8c9b92);
+  display: block;
+  height: 0.3em;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transition: all 0.2s ease;
+  width: 100%;
+}
+a.as__hamburger > .as__hamburger-bar:nth-child(1) {
+  top: 0.2em;
+}
+a.as__hamburger > .as__hamburger-bar:nth-child(2) {
+  top: 1.2em;
+}
+a.as__hamburger > .as__hamburger-bar:nth-child(3) {
+  top: 2.2em;
+}
+
+:root {
+  --layout-accordion-auto-open: true;
+}
+
+.use-screen-mobile {
+  --joda-use: screen();
+  --layout-type: mobile;
+}
+
+.use-screen-desktop {
+  --joda-use: screen();
+  --layout-type: desktop;
+}
+
+.use-screen-laptop {
+  --joda-use: screen();
+  --layout-type: laptop;
+}
+
+.use-screen-tablet {
+  --joda-use: screen();
+  --layout-type: tablet;
+}
+
+.as__screen {
+  display: block;
+  isolation: isolate;
+  position: relative;
+  width: auto;
+}
+.as__screen > .as__screen-shadow {
+  position: absolute;
+  z-index: 0;
+}
+.as__screen > .as__screen-image {
+  position: absolute;
+  z-index: 1;
+  border-radius: 0.3%;
+}
+.as__screen > .as__screen-overlay {
+  position: absolute;
+  z-index: 2;
+}
+.as__screen .as__screen-image img {
+  width: 100%;
+  height: 100%;
+  object-position: top center;
+  object-fit: cover;
+}
+.as__screen.mobile {
+  aspect-ratio: 0.5208333333;
+}
+.as__screen.mobile > .as__screen-shadow {
+  background-size: 110%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  top: -5%;
+  left: -4%;
+  width: 112%;
+  height: 115%;
+  opacity: 0.5;
+}
+.as__screen.mobile > .as__screen-image {
+  background-color: white;
+  top: 3%;
+  left: 8%;
+  width: 84%;
+  height: 94%;
+  overflow: hidden;
+}
+.as__screen.mobile > .as__screen-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.as__screen.laptop {
+  aspect-ratio: 1.724137931;
+}
+.as__screen.laptop > .as__screen-shadow {
+  background-size: 95%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  top: -4%;
+  left: -6%;
+  width: 112%;
+  height: 109%;
+  opacity: 0.5;
+}
+.as__screen.laptop > .as__screen-image {
+  background-color: white;
+  top: 6%;
+  left: 11%;
+  width: 78%;
+  height: 81%;
+  overflow: hidden;
+  z-index: 3;
+}
+.as__screen.laptop > .as__screen-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.as__screen.tablet {
+  aspect-ratio: 1.2987012987;
+}
+.as__screen.tablet > .as__screen-shadow {
+  background-size: 95%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  top: -5%;
+  left: -6%;
+  width: 112%;
+  height: 110%;
+  opacity: 0.5;
+}
+.as__screen.tablet > .as__screen-image {
+  background-color: white;
+  top: 3%;
+  left: 3%;
+  width: 94%;
+  height: 95%;
+  overflow: hidden;
+}
+.as__screen.tablet > .as__screen-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.as__screen.desktop {
+  aspect-ratio: 1.2195121951;
+}
+.as__screen.desktop > .as__screen-shadow {
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-position: center center;
+  top: -6%;
+  left: -2%;
+  width: 104%;
+  height: 112%;
+  opacity: 0.5;
+}
+.as__screen.desktop > .as__screen-image {
+  background-color: white;
+  top: 6%;
+  left: 2%;
+  width: 95.5%;
+  height: 63%;
+  overflow: hidden;
+  z-index: 3;
+}
+.as__screen.desktop > .as__screen-overlay {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+:root {
+  --layout-accordion-auto-open: true;
+}
+
+.mask {
+  mask-size: contain;
+  mask-position: center center;
+  mask-repeat: no-repeat;
+}
+.mask.shape-blob1 {
+  mask-image: var(--shape-blob1);
+  -webkit-mask-image: var(--shape-blob1);
+}
+.mask.shape-blob1-anim {
+  mask-image: var(--shape-blob1-anim);
+  -webkit-mask-image: var(--shape-blob1-anim);
+}
+
+:root {
+  --layout-accordion-auto-open: true;
+}
+
+.use-input {
+  --joda-use: input();
+}
+
+:root {
+  --layout-cols: 8;
+  --layout-side-content: "This is some side-content from --layout-side-content" ;
+}
+
+:root {
+  --layout-cols: 8;
+  --layout-side-content: "This is some side-content from --layout-side-content" ;
+}
+
+.do-row {
+  --joda-use: row();
+}
+
+:root {
+  --layout-cols: 8;
+  --layout-side-content: "This is some side-content from --layout-side-content" ;
+}
+
+.use-footer1 {
+  --joda-use: footer1();
+  --layout-minifooter: #minifooter;
+}
+
+.as__footer {
+  --as-footer-background: var(--bs-primary, #000);
+  --as-footer-text-color: var(--bs-light, #fff);
+  --as-footer-link-color: var(--bs-light, #fff);
+  background: var(--as-footer-background, #f0f0f0);
+  color: var(--as-footer-text-color, #333333);
+  padding-top: 4.5rem;
+}
+.as__footer a {
+  color: var(--as-footer-text-color, #333333);
+}
+.as__footer .as__footer-column {
+  margin-bottom: 3.5rem;
+}
+.as__footer .as__footer-column p {
+  margin-bottom: 0.5rem;
+}
+.as__footer .as__footer-column ul {
+  padding-left: 0;
+}
+.as__footer .as__footer-column ul li {
+  text-decoration: none;
+  list-style: none;
+}
+.as__footer .as__footer-minifooter {
+  text-align: left;
+  margin-top: 2rem;
+}
+.as__footer .as__footer-minifooter > * {
+  margin-bottom: 0;
+}
+
+:root {
+  --as-layout-offset-top: 100px;
+}
+
+.do-header {
+  --joda-use: header();
+}
+
+.as__header .as__header-background img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center center;
+}
+.as__header .as__header-main {
+  position: relative;
+  bottom: 0;
+}
+
+.as__header.default .no-image {
+  height: 38vh;
+  min-height: 250px;
+  background: var(--as-border-color, #007bff);
+}
+.as__header.default .as__header-background {
+  width: 100%;
+  height: 61.8vh;
+  min-height: var(--as-header-min-height, 350px);
+  overflow: hidden;
+  position: relative;
+  border-bottom: 10px solid;
+  border-bottom-color: var(--as-border-color, #007bff);
+}
+.as__header.default .as__header-background.no-image {
+  min-height: unset;
+  height: calc(var(--as-layout-offset-top) + 95px);
+  background: var(--as-border-color, #007bff);
+}
+.as__header.default .as__header-main {
+  position: relative;
+  bottom: 0;
+  padding-top: 1.5rem;
+}
+
+:root {
+  --layout-hero-style: fullsize;
+  --as-hero-offset: 110px;
+  --as-hero-height-adjustement: 10px;
+  --as-min-hero-height: 500px;
+}
+
+.do-hero1 {
+  --joda-use: hero1();
+}
+
+.as__hero1 {
+  border-bottom: 10px solid;
+  border-bottom-color: var(--as--border-color, #007bff);
+  margin-top: var(--as-hero-offset);
+}
+.as__hero1 .full_height {
+  min-height: max(100svh - var(--as-hero-height-adjustement) - var(--as-hero-offset), var(--as-min-hero-height));
+}
+.as__hero1 .v-hide {
+  visibility: hidden;
+}
+.as__hero1 .as__hero1_content-row.mobile {
+  min-height: 66vh;
+  align-content: center;
+}
+.as__hero1 .as__hero1_image-mobile img {
+  max-height: 60svh;
+  height: 100%;
+  width: 100%;
+  min-height: 33svh;
+  min-width: inherit;
+  object-fit: cover;
+  object-position: center center;
+}
+.as__hero1 .as__hero1_image {
+  overflow: hidden;
+}
+.as__hero1 .as__hero1_image img {
+  height: 100%;
+  width: 100%;
+  min-height: inherit;
+  min-width: inherit;
+  object-fit: cover;
+  object-position: center center;
+}
+.as__hero1 .image-overlay {
+  background-color: var(--as-image-overlay-color);
+  top: 0;
+  z-index: 999;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.as__hero1 .image-overlay.overlay-fade {
+  background-color: unset;
+  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgb(255, 255, 255));
+}
+
+.page1 {
+  --section-spaceing: 7.5rem;
+  --bs-primary: #E0B731;
+  --bs-secondary: #9BB1B7;
+  --bs-success: #2E4870;
+  --bs-danger: #A87E90 ;
+  --bs-light: #FBFAFA;
+  --layout-break1: xl;
+  --section-spacing: 4.5rem;
+  --background-light: #ffffff;
+  --as-section-spacing: 4.5rem;
+}
+.page1 h3 i.bi::before {
+  line-height: inherit;
+  vertical-align: sub;
+  color: var(--bs-primary, #000);
+}
+.page1 .section-h1 {
+  --joda-class: header1;
+}
+.page1 .section-h1 .content {
+  padding-right: 60px;
+  --joda-class: container;
+}
+.page1 .section-h1 .content h1 {
+  --joda-class: text-center :: display-5 :xl: display-3;
+}
+.page1 .sec2 {
+  padding-top: 3rem;
+  padding-bottom: var(--section-spaceing);
+  --joda-class: container;
+}
+.page1 .sec2 h2 {
+  --joda-class: text-center display-4;
+}
+.page1 .sec2 .section-h3 {
+  --joda-group: @row;
+  --joda-class: col g-5;
+}
+.page1 .sec2 .section-h3 h3 {
+  --joda-class: text-success;
+}
+.page1 .showcase {
+  padding-top: 10rem;
+}
+.page1 .showcase .content {
+  --joda-class: container position-relative;
+}
+.page1 .showcase .content .as__screen:nth-child(1) {
+  transform: perspective(60vw) rotateY(calc(-5deg + var(--mouse-x) * 0.02deg)) rotateX(calc(0deg + var(--mouse-y) * 0.002deg));
+}
+.page1 .showcase .content .as__screen:nth-child(2) {
+  transform: perspective(60vw) rotateY(calc(10deg + var(--mouse-x) * 0.03deg)) rotateX(calc(0deg + var(--mouse-y) * 0.004deg));
+}
+.page1 .header1 {
+  min-height: 60svh;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+}
+.page1 .header1 h1 {
+  font-style: normal;
+  padding: 2rem;
+}
+.page1 .header1 p {
+  font-size: 1.5rem;
+  font-weight: 300;
+  font-style: normal;
+  padding: 2rem;
+  padding-bottom: 0rem;
+}
+.page1 .header1 .btn {
+  --joda-class: shadow;
+}
+.page1 .header1::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  left: 0;
+  top: -100%;
+  bottom: 0;
+  right: 30px;
+  background: linear-gradient(90deg, var(--bs-light) 0%, rgba(0, 0, 0, 0.2) 30%, var(--bs-light) 100%);
+  transform: rotateZ(5deg);
+  box-shadow: calc(0px - (var(--mouse-x) - 50) * 0.018px) calc(3px - (var(--mouse-y) - 50) * 0.11px) 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 0 0 80px 0;
+}
+.page1 .sec3 {
+  min-height: 60svh;
+  position: relative;
+  z-index: 2;
+  margin-bottom: var(--section-spaceing);
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  text-align: center;
+  padding-left: 30px;
+}
+.page1 .sec3 h2 {
+  --joda-class: display-4;
+  padding: 3rem;
+}
+.page1 .sec3 h2 {
+  padding-bottom: 3rem;
+}
+.page1 .sec3 .section-h3 {
+  --joda-group: @row;
+  --joda-class: col g-5;
+  text-align: left;
+  padding-bottom: 2rem;
+}
+.page1 .sec3 > .content {
+  width: 100%;
+  --joda-class: container;
+  z-index: 2;
+}
+.page1 .sec3 > .children {
+  width: 100%;
+  --joda-class: container;
+  z-index: 1;
+}
+.page1 .sec3::before {
+  position: absolute;
+  z-index: -1;
+  content: "";
+  left: 30px;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  background: var(--bs-light, #ccc);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 40px 0 0 40px;
+}
+.page1 .sec4 {
+  --joda-class: container;
+}
+.page1 .sec4 .section-h3:nth-child(1) {
+  --joda-class: "my-auto :: col-12 order-2 :md: col-6 order-2 :xl: col-4";
+}
+.page1 .sec4 .section-h3:nth-child(2) {
+  --joda-class: "my-auto mx-auto :: col-12 order-1 :md: col-12 order-1 :xl: col-4";
+}
+.page1 .sec4 .section-h3:nth-child(3) {
+  --joda-class: "my-auto :: col-12 order-3 :md: col-6 order-3 :xl: col-4";
+}
+.page1 .sec4 .section-h3 {
+  --joda-group: @row;
+  padding-bottom: var(--section-spaceing);
+}
+.page1 .sec4 .section-h3 img {
+  --joda-wrap: @d-flex @justify-content-center > @class=ratio ratio-1x1 :md: w-50 :xl: w-100;
+  object-fit: cover;
+  object-position: center left;
+  --joda-class: mask shape-blob1-anim;
+}
+.page1 .dark {
+  background: var(--bs-primary, #000);
+  color: var(--bs-light, #fff);
+}
+.page1 .dark a {
+  color: inherit;
+}
+.page1 nav {
+  --joda-class: use-navblox as__navblox;
+  --as-navblox-secondary-color: transparent;
+  --as-navblox-nav-text: #ccc;
+}
+.page1 nav .as__hamburger {
+  --hamburger-bar-color: #ccc;
+  --hamburger-size: 0.7rem;
+}
+.page1 footer {
+  background: #2d374b;
+  --joda-use: footer1();
+  --layout-container: container;
+  --layout-minifooter: #minifooter;
+}
+.page1 footer .as__footer {
+  --as-footer-background: #2d374b;
+}
+.page1 footer p, .page1 footer a {
+  color: rgba(255, 255, 255, 0.8);
+}
+.page1 footer a:hover {
+  color: rgb(255, 255, 255);
+}
+.page1 footer h3 {
+  margin-top: 4rem;
+  font-size: 1rem;
+  text-transform: uppercase;
+}
+
+showcase-element {
+  --aspect-ratio: calc(16 / 9);
+}
+showcase-element.big {
+  --aspect-ratio: 0.5;
+}
+showcase-element .preview {
+  --scale: 0.2;
+  --width: 350px;
+  --height: calc(var(--width) / var(--aspect-ratio));
+  position: relative;
+  width: var(--width);
+  height: var(--height);
+  overflow: hidden;
+  display: inline-block;
+  border: 3px solid #ccc;
+}
+showcase-element .preview iframe {
+  position: relative;
+  right: calc(var(--width) / var(--scale) / 2 - var(--width) / 2);
+  bottom: calc(var(--height) / var(--scale) / 2 - var(--height) / 2);
+  width: calc(var(--width) / var(--scale));
+  height: calc(var(--height) / var(--scale));
+  transform: scale(var(--scale));
+}
+showcase-element .preview .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-align: center;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out;
+  cursor: pointer;
+}
+showcase-element .preview .overlay:hover {
+  opacity: 1;
+}
+
+joda-content {
+  display: none;
+}
+
+joda-content.loaded {
+  display: block;
+}
+
+joda-content {
+  display: none;
+}
+
+joda-content.loaded {
+  display: block;
+}
+
+html.loader::before {
+  content: "Seite lädt...";
+  font-family: sans-serif;
+  font-size: 12px;
+  line-height: 10px;
+  position: fixed;
+  text-align: center;
+  color: white;
+  margin-top: 1px;
+  -webkit-animation: leu--site-loader 60s ease-out;
+  animation: leu--site-loader 60s ease-out;
+  display: block;
+  background-color: gray;
+  height: 12px;
+  width: 2%;
+}
+
+@keyframes leu--site-loader {
+  3% {
+    width: 2%;
+  }
+  5% {
+    width: 50%;
+  }
+  10% {
+    width: 80%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+body > * {
+  display: none;
+}
+
+body.loaded > * {
+  display: block;
+}
+
+body {
+  min-height: 3000vh;
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+
+body.loaded {
+  min-height: unset;
+  opacity: 1;
+}
+
+/*# sourceMappingURL=style.css.map*/