@charset "UTF-8";
/* ###################################################################

	ITEM NAME  : Timm Jochimsen | ANDITEC
	VERSION    : 1.0.001
	AUTHOR     : PROJEKT 77
	AUTHOR URI : https://projekt-77.de

################################################################### */
/* ###################################################################

	//  1.	VARIABLES

	//  2.	ACCESSEBILITY

	//	3.	FONTS

	//  4.	DEFAULTS

	//	5.	NAVIGATION

	//  5. 	CONTENT

		//  5a. HEADER

		//  5b. MAIN

		//  5c.	FOOTER
	
	//  6.	ELSE


################################################################### */
/* VERSION CONTROL
###################################################################

	// 03/2026	CREATED

################################################################### */
/* VARIABLES & COLORS
################################################################### */
body.light {
  --ColorFirst: rgba(34,63,153,1.00);
  --ColorSecond: rgba(248,213,18,1.00);
  --ColorThird: rgba(239,63,35,1.00);
  --Black: rgba(32,32,32,1.00);
  --White: rgba(255,255,255,1.00);
  --ColorTxtBg: rgba(255,255,255,1.00);
  --FontBlack: rgba(38,38,38,1.00);
  --FontWhite: rgba(255,255,255,1.00);
  --Grey: rgba(210,204,204,1.00);
  --LightGrey: rgba(239,237,237,1.00);
  --ColorBorder1: rgba(154,200,56,1.00);
  --ColorBorder2: rgba(255,255,255,1.00);
  --ButtonA-BG: rgba(248,213,18,1.00);
  --ButtonA-BG2: rgba(34,63,153,1.00);
  --ButtonA-F: rgba(32,32,32,1.00);
  --ButtonA-F2: rgba(255,255,255,1.00);
  --ButtonB-BG: rgba(255,255,255,1.00);
  --ButtonB-BG2: rgba(34,63,153,1.00);
  --ButtonB-F: rgba(32,32,32,1.00);
  --ButtonB-F2: rgba(255,255,255,1.00);
  --shadow-color: 0 0% 0%;
  --shadow-elevation-low: 0.1px 0.7px 0.8px hsl(var(--shadow-color) / 0.34),
  0.2px 1.2px 1.4px -1.2px hsl(var(--shadow-color) / 0.34),
  0.6px 2.8px 3.2px -2.5px hsl(var(--shadow-color) / 0.34);
  --shadow-elevation-medium: 0.1px 0.7px 0.8px hsl(var(--shadow-color) / 0.36),
  0.5px 2.3px 2.6px -0.8px hsl(var(--shadow-color) / 0.36),
  1.1px 5.8px 6.6px -1.7px hsl(var(--shadow-color) / 0.36),
  2.8px 14px 16.1px -2.5px hsl(var(--shadow-color) / 0.36); }

:root {
  --headerH: 83px;
  --headerHreverse: -83px;
  --headerSpacer: 20px;
  --headerHSticky: 83px;
  --headerHStickyR: -83px;
  --headerSpacer2: 20px;
  --container-grid-column-gap: 80px;
  --container-grid-row-gap: 80px;
  --spacerOut: 0;
  --SpacerTop: 80px;
  --SpacerBottom: 60px;
  --SpacerSection: 160px;
  --SpacerMain: 80px;
  --SpacerHalf: 40px;
  --SpacerElse: 20px;
  --SpacerElse2: 10px;
  --SpacerSec: 40px;
  --SpacerMainR: -80px;
  --SpacerHalfR: -40px;
  --SpacerElseR: -20px;
  --SpacerElseR2: -10px;
  --WidthDN: 25px;
  --HeightDN: 50px;
  --SpacerSmall: 5px;
  --SpacerTxt: 20px;
  --FontSize: 2.0rem;
  --FontSizeB: 2.6rem;
  --FontSizeH1: 5.8rem;
  --FontSizeH2: 5.8rem;
  --FontSizeH3: 3.8rem;
  --FontSizeH4: 2.8rem;
  --LineHigh1: 1;
  --LineHigh2: 1.4;
  --LineHigh3: 1.8;
  --BorderRadius: 16px; }

@media screen and (max-width: 1320px) {
  :root {
    --spacerOut: 20px; } }
@media screen and (max-width: 768px) {
  :root {
    --headerH: 68px;
    --headerHreverse: -68px;
    --headerSpacer: 40px;
    --headerHSticky: 68px;
    --headerHStickyR: -68px;
    --headerSpacer2: 20px;
    --container-grid-column-gap: 40px;
    --container-grid-row-gap: 40px;
    --spacerOut: 40px;
    --SpacerTop: 40px;
    --SpacerBottom: 30px;
    --SpacerSection: 80px;
    --SpacerMain: 80px;
    --SpacerHalf: 40px;
    --FontSize: 1.8rem;
    --FontSizeH1: 4.0rem;
    --FontSizeH2: 4.0rem;
    --FontSizeH3: 2.8rem;
    --FontSizeH4: 2.2rem;
    --LineHigh1: 1;
    --LineHigh2: 1.4;
    --LineHigh3: 1.8; } }
@media screen and (max-width: 768px) and (orientation: landscape) {
  :root {
    --headerH: 96px;
    --headerHreverse: -96px;
    --headerSpacer: 20px;
    --headerHSticky: 96px;
    --headerHStickyR: -96px;
    --headerSpacer2: 20px;
    --container-grid-column-gap: 20px;
    --container-grid-row-gap: 20px;
    --spacerOut: 20px;
    --SpacerTop: 20px;
    --SpacerBottom: 20px;
    --SpacerSection: 80px;
    --SpacerMain: 40px;
    --SpacerHalf: 20px;
    --FontSize: 1.6rem;
    --FontSizeB: 1.8rem;
    --FontSizeH1: 3.4rem;
    --FontSizeH2: 3.4rem;
    --FontSizeH3: 2.2rem;
    --FontSizeH4: 2.0rem;
    --LineHigh1: 1.2;
    --LineHigh2: 1.6;
    --LineHigh3: 1.8; } }
@media screen and (max-width: 468px) {
  :root {
    --headerH: 66px;
    --headerHreverse: -86px;
    --headerSpacer: 20px;
    --headerHSticky: 66px;
    --headerHStickyR: -66px;
    --headerSpacer2: 20px;
    --container-grid-column-gap: 20px;
    --container-grid-row-gap: 20px;
    --spacerOut: 20px;
    --SpacerTop: 20px;
    --SpacerBottom: 20px;
    --SpacerSection: 80px;
    --SpacerMain: 40px;
    --SpacerHalf: 20px;
    --FontSize: 1.6rem;
    --FontSizeB: 1.8rem;
    --FontSizeH1: 3.4rem;
    --FontSizeH2: 3.4rem;
    --FontSizeH3: 2.2rem;
    --FontSizeH4: 2.0rem;
    --LineHigh1: 1.2;
    --LineHigh2: 1.6;
    --LineHigh3: 1.8; } }
/* MIXINS
################################################################### */
/* FONTS
################################################################### */
/* ubuntu-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/ubuntu-v20-latin-regular.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/ubuntu-v20-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu-v20-latin-regular.woff2") format("woff2"), url("../fonts/ubuntu-v20-latin-regular.woff") format("woff"), url("../fonts/ubuntu-v20-latin-regular.ttf") format("truetype"), url("../fonts/ubuntu-v20-latin-regular.svg#Ubuntu") format("svg");
  /* Legacy iOS */ }
/* ubuntu-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/ubuntu-v20-latin-500.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/ubuntu-v20-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu-v20-latin-500.woff2") format("woff2"), url("../fonts/ubuntu-v20-latin-500.woff") format("woff"), url("../fonts/ubuntu-v20-latin-500.ttf") format("truetype"), url("../fonts/ubuntu-v20-latin-500.svg#Ubuntu") format("svg");
  /* Legacy iOS */ }
/* ubuntu-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/ubuntu-v20-latin-700.eot");
  /* IE9 Compat Modes */
  src: url("../fonts/ubuntu-v20-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/ubuntu-v20-latin-700.woff2") format("woff2"), url("../fonts/ubuntu-v20-latin-700.woff") format("woff"), url("../fonts/ubuntu-v20-latin-700.ttf") format("truetype"), url("../fonts/ubuntu-v20-latin-700.svg#Ubuntu") format("svg");
  /* Legacy iOS */ }
/* DEFAULTS
################################################################### */
html {
  font-size: 62.5%;
  /* 1rem = 10px */
  font-family: Ubuntu, sans-serif;
  line-height: var(--LineHigh1);
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/**
 * Remove the margin in all browsers.
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0; }

body {
  font-family: Ubuntu, sans-serif;
  font-size: var(--FontSize);
  font-weight: 400;
  font-style: normal;
  transition: all .9s ease-in-out;
  overflow-x: hidden; }

img, picture {
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0; }

@media screen and (min-width: 768px) {
  .center {
    text-align: center; }

  .right {
    text-align: right; } }
/* PROGRESS BAR
####################################### */
.progress-container {
  top: 0;
  width: 100%;
  height: 2px;
  position: fixed;
  z-index: 9999; }

.progress-bar {
  width: 0%;
  height: 2px;
  background: var(--ColorSecond); }

/* LINKS
####################################### */
a[href$=".pdf"][data-size]:after {
  content: " (PDF, " attr(data-size) ")"; }

main section a:not(.more, .more2, .imglink) {
  padding-left: 26px;
  position: relative; }

main section a[href^="/"]:not(.more, .more2, .imglink):before,
main section a[href^="#"]:not(.more, .more2, .imglink):before {
  left: -2px;
  top: -3px;
  content: "\f0c1";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

main section a[href$=".pdf"]:not(.more, .more2, .imglink):before {
  left: 0;
  top: -3px;
  content: "\f019";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

main section a[href^="mailto:"]:not(.more, .more2, .imglink):before,
main section a[href^="java"]:not(.more, .more2, .imglink):before {
  left: 0;
  top: -2px;
  content: "\f0e0";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

main section a[href^="https"]:not(.more, .more2, .imglink):before {
  left: 0;
  top: -3px;
  content: "\f35d";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

main section a[href^="tel:"]:not(.more, .more2, .imglink):before {
  left: 0;
  top: -3px;
  content: "\f095";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

main section a[href^="/"]:hover:not(.more, .more2, .imglink):before,
main section a[href^="#"]:hover:not(.more, .more2, .imglink):before,
main section a[href$=".pdf"]:hover:not(.more, .more2, .imglink):before,
main section a[href^="mailto:"]:hover:not(.more, .more2, .imglink):before,
main section a[href^="java"]:hover:not(.more, .more2, .imglink):before,
main section a[href^="https"]:hover:not(.more, .more2, .imglink):before,
main section a[href^="tel:"]:hover:not(.more, .more2, .imglink):before {
  left: 0;
  top: -2px;
  content: "\f0a9";
  font-family: 'Font Awesome 6 Free';
  font-style: normal;
  font-weight: 900;
  padding: 0 0 0 2px;
  text-decoration: none;
  position: absolute; }

/* TOOLTIP
https://codepen.io/tutsplus/pen/WROvdG
############################### */
/* START TOOLTIP STYLES */
[tooltip] {
  position: relative;
  /* opinion 1 */ }

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  font-size: var(--FontSize);
  /* opinion 3 */
  line-height: var(--LineHigh2);
  user-select: none;
  pointer-events: none;
  text-transform: none;
  /* opinion 2 */
  position: absolute;
  display: none;
  opacity: 0; }

header [tooltip]::before,
header [tooltip]::after {
  margin-top: 0; }

[tooltip]::before {
  content: '';
  border: 18px solid transparent;
  /* opinion 4  GRÖSSE RECHTECKE*/
  z-index: 1001;
  /* absurdity 1 */ }

[tooltip]::after {
  content: attr(tooltip);
  /* magic! */
  /* most of the rest of this is opinion */
  text-align: center;
  	/* 
    Let the content set the size of the tooltips 
    but this will also keep them from being obnoxious
    */
  color: var(--Black);
  background: var(--ColorSecond);
  min-width: 3em;
  max-width: 21em;
  text-overflow: ellipsis;
  padding: 3px 8px 5px 8px;
  border-radius: 4px;
  box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  overflow: hidden;
  z-index: 1000;
  /* absurdity 2 */ }

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block; }

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important; }

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  bottom: 100%;
  border-bottom-width: 0;
  border-top-color: var(--ColorSecond); }

[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  bottom: calc(100% + 15px); }

[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -0.5em); }

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: 100%;
  border-bottom-color: var(--ColorSecond);
  border-top-width: 0; }

[tooltip][flow^="down"]::after {
  top: calc(100% + 15px); }

[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, 0.5em); }

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: 50%;
  left: calc(0em - 12px);
  border-right-width: 0;
  border-left-color: var(--ColorSecond);
  transform: translate(-0.5em, -50%); }

[tooltip][flow^="left"]::after {
  top: 50%;
  right: calc(100% + 10px);
  transform: translate(-0.5em, -50%); }

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 50%;
  right: calc(0em - 7px);
  border-left-width: 0;
  border-right-color: var(--ColorSecond);
  transform: translate(0.5em, -50%); }

[tooltip][flow^="right"]::after {
  top: 50%;
  left: calc(100% + 5px);
  transform: translate(0.5em, -50%); }

/* FX All The Things */
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards; }

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards; }

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: 1;
    transform: translate(-50%, 0); } }
@keyframes tooltips-horz {
  to {
    opacity: 1;
    transform: translate(0, -50%); } }
header {
  /* FLOW: LEFT */
  /* FLOW: RIGHT */
  /* FLOW: LEFT */
  /* FLOW: RIGHT */ }
  header [tooltip]::after {
    color: var(--Black);
    background: var(--ColorSecond); }
  header [tooltip][flow^="left"]::before {
    border-left-color: var(--ColorSecond); }
  header [tooltip][flow^="right"]::before {
    border-right-color: var(--ColorSecond); }
  header [tooltip][flow^="left"]::before {
    top: 46%;
    left: calc(0em - 12px);
    border-right-width: 0;
    border-left-color: var(--ColorSecond);
    transform: translate(-0.4em, -50%); }
  header [tooltip][flow^="left"]::after {
    top: 46%;
    right: calc(100% + 10px);
    transform: translate(-0.4em, -50%); }
  header [tooltip][flow^="right"]::before {
    top: 46%;
    right: calc(0em - 12px);
    border-left-width: 0;
    border-right-color: var(--ColorSecond);
    transform: translate(0.4em, -50%); }
  header [tooltip][flow^="right"]::after {
    top: 46%;
    left: calc(100% + 10px);
    transform: translate(0.4em, -50%); }

#dotnav {
  /* FLOW: DOWN */
  /* FLOW: LEFT */
  /* FLOW: LEFT */
  /* FLOW: RIGHT */ }
  #dotnav [tooltip]::after {
    color: var(--Black);
    background: var(--ColorSecond); }
  #dotnav [tooltip][flow^="down"]::before {
    border-bottom-color: var(--ColorSecond); }
  #dotnav [tooltip][flow^="left"]::before {
    border-left-color: var(--ColorSecond); }
  #dotnav [tooltip][flow^="left"]::before {
    border-left-color: var(--ColorSecond); }
  #dotnav [tooltip][flow^="right"]::before {
    border-right-color: var(--ColorSecond); }

/* TO TOP
############################### */
a.back-to-top,
a.back-to-top:link,
a.back-to-top:visited {
  bottom: var(--SpacerHalf);
  right: 28px;
  color: var(--ColorFirst);
  background-color: var(--White);
  font-family: Ubuntu, sans-serif;
  border-radius: 100%;
  aspect-ratio: 1/1;
  font-size: 160%;
  font-weight: 500;
  line-height: var(--LineHigh1);
  margin: 0;
  padding: var(--SpacerElse2);
  text-decoration: none;
  transition: all 0.9s ease-in;
  position: fixed;
  z-index: 30; }
  @media screen and (max-width: 768px) {
    a.back-to-top,
    a.back-to-top:link,
    a.back-to-top:visited {
      padding: 10px 14px; } }

a.back-to-top:hover,
a.back-to-top:active {
  color: var(--Black);
  background-color: var(--White);
  text-decoration: none;
  transition: all .9s ease-in-out; }

/* DOT NAV
############################### */
.dotnav {
  top: auto;
  right: var(--SpacerHalf);
  width: var(--WidthDN);
  height: 100vh;
  margin: 0;
  display: flex;
  position: fixed;
  z-index: 30;
  justify-content: center;
  animation: showDots 1s ease-in;
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  opacity: 0; }
@keyframes showDots {
  to {
    opacity: 1; } }
  @media screen and (max-width: 1280px) {
    .dotnav {
      display: none; } }
  @media screen and (max-width: 1280px) and (orientation: landscape) {
    .dotnav {
      display: none; } }
  .dotnav ul {
    width: var(--WidthDN);
    height: auto;
    align-self: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style-type: none; }
  .dotnav li {
    width: var(--WidthDN);
    height: 60px;
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex; }
  .dotnav a,
  .dotnav a:link,
  .dotnav a:visited {
    width: var(--WidthDN);
    height: var(--WidthDN);
    background-color: var(--Black);
    border-radius: var(--WidthDN);
    border: 4px solid var(--White);
    transition: background-color 0.3s ease, height 0.6s linear;
    align-self: center;
    margin: 0;
    padding: 0;
    text-decoration: none; }
  .dotnav a:hover,
  .dotnav a:active,
  .dotnav a.active:hover {
    background-color: var(--ColorFirst);
    transition: background-color 0.3s ease, height 0.6s linear; }
  .dotnav a.active {
    width: var(--WidthDN);
    height: var(--HeightDN);
    background-color: var(--ColorFirst);
    transition: background-color 0.3s ease, height 0.6s linear;
    border-radius: var(--WidthDN);
    margin: 0;
    padding: 0; }

/* CONTENT
################################################################### */
/* HEADER
####################################### */
header {
  background-color: transparent;
  height: var(--headerH);
  transition: all .9s ease-out; }
  header section {
    width: 100%;
    margin: 0 auto 0 auto;
    height: var(--headerH);
    margin: 0;
    padding: 0;
    transition: all .9s ease-out; }
    header section .container {
      width: calc(100% - var(--spacerOut) * 2);
      max-width: 1280px;
      display: grid;
      grid-column-gap: var(--container-grid-column-gap);
      grid-row-gap: var(--container-grid-row-gap);
      justify-items: center;
      align-items: center;
      margin: 0 auto 0 auto;
      padding: var(--SpacerMain) var(--spacerOut) 0 var(--spacerOut);
      padding: var(--SpacerHalf) 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      transition: all .9s ease-out;
      transition: all .9s ease-in-out; }
      @media screen and (max-width: 1280px) {
        header section .container {
          padding-left: var(--spacerOut);
          padding-right: var(--spacerOut); } }
      @media screen and (max-width: 768px) {
        header section .container {
          padding-left: 0;
          padding-right: 0; } }
      header section .container div:nth-of-type(1) {
        align-self: center;
        justify-self: flex-start;
        transition: all .9s ease-in-out; }
        header section .container div:nth-of-type(1) a {
          width: auto;
          height: 100%;
          padding: 0;
          margin: 0;
          display: block; }
        header section .container div:nth-of-type(1) img, header section .container div:nth-of-type(1) picture {
          width: auto;
          height: calc(var(--headerH) - var(--headerSpacer)*2);
          transition: all .9s ease-out; }
        header section .container div:nth-of-type(1) img:nth-of-type(1) {
          display: inherit;
          transition: all .9s ease-out; }
        header section .container div:nth-of-type(1) img:nth-of-type(2), header section .container div:nth-of-type(1) img:nth-of-type(3), header section .container div:nth-of-type(1) img:nth-of-type(4) {
          height: calc(var(--headerH) - var(--headerSpacer)*2);
          display: none;
          transition: all .9s ease-out; }
        @media screen and (max-width: 1024px) {
          header section .container div:nth-of-type(1) {
            display: none; } }
      header section .container div:nth-of-type(2) {
        align-self: center;
        justify-self: flex-end;
        transition: all .9s ease-in-out; }
      header section .container h1, header section .container p, header section .container i {
        font-size: var(--FontSizeH4);
        color: var(--FontBlack);
        line-height: var(--LineHigh1); }
      header section .container a,
      header section .container a:link,
      header section .container a:visited {
        color: var(--FontBlack) !important;
        text-decoration: none  !important; }
      header section .container a:hover,
      header section .container a:active,
      header section .container a:focus,
      header section .container a:hover i,
      header section .container a:active i,
      header section .container a:focus i,
      header section .container a:hover h1,
      header section .container a:active h1,
      header section .container a:focus h1 {
        color: var(--ColorFirst) !important;
        text-decoration: none  !important; }
      header section .container img:nth-of-type(3), header section .container h1 {
        display: none; }
      @media screen and (max-width: 810px) {
        header section .container div:nth-of-type(2) span {
          display: none; } }
      @media screen and (max-width: 1024px) {
        header section .container {
          grid-template-columns: 1fr; }
          header section .container div:nth-of-type(1) img:nth-of-type(1), header section .container div:nth-of-type(1) img:nth-of-type(2), header section .container div:nth-of-type(1) img:nth-of-type(4), header section .container div:nth-of-type(1) h1, header section .container div:nth-of-type(1) span {
            display: none; }
          header section .container div:nth-of-type(1) img:nth-of-type(3) {
            width: 50px;
            height: auto;
            display: inherit; }
          header section .container div:nth-of-type(2) {
            width: 100%;
            text-align: center; }
            header section .container div:nth-of-type(2) span {
              display: none; }
            header section .container div:nth-of-type(2) p, header section .container div:nth-of-type(2) i {
              font-size: var(--FontSizeH3); } }

body.nav-sticky header {
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--White);
  margin: 0;
  padding: 0;
  position: sticky;
  transition: all .9s ease-out;
  z-index: 998; }
  body.nav-sticky header section {
    width: 100%;
    margin: 0 auto 0 auto;
    margin: 0;
    padding: 0;
    box-shadow: var(--shadow-elevation-medium);
    transition: all .9s ease-in-out; }
    body.nav-sticky header section .container {
      transition: all .9s ease-in-out;
      width: calc(100% - var(--spacerOut) * 2);
      max-width: 1280px;
      display: grid;
      grid-column-gap: var(--container-grid-column-gap);
      grid-row-gap: var(--container-grid-row-gap);
      justify-items: center;
      align-items: center;
      margin: 0 auto 0 auto;
      padding: var(--SpacerMain) var(--spacerOut) 0 var(--spacerOut);
      transition: all .9s ease-out;
      padding: var(--SpacerElse) 0;
      transition: all .9s ease-in-out; }
      body.nav-sticky header section .container h1, body.nav-sticky header section .container p, body.nav-sticky header section .container i {
        color: var(--Black); }
      body.nav-sticky header section .container h1 {
        display: none; }
      body.nav-sticky header section .container a,
      body.nav-sticky header section .container a:link,
      body.nav-sticky header section .container a:visited {
        color: var(--Black) !important;
        text-decoration: none  !important; }
      body.nav-sticky header section .container a:hover,
      body.nav-sticky header section .container a:active,
      body.nav-sticky header section .container a:focus {
        color: var(--ColorFirst) !important;
        text-decoration: none  !important; }
      body.nav-sticky header section .container a:hover i,
      body.nav-sticky header section .container a:active i,
      body.nav-sticky header section .container a:focus i {
        color: var(--ColorFirst) !important;
        text-decoration: none  !important; }
      @media screen and (max-width: 1280px) {
        body.nav-sticky header section .container {
          padding-left: var(--spacerOut);
          padding-right: var(--spacerOut); } }
      @media screen and (max-width: 768px) {
        body.nav-sticky header section .container {
          padding-left: 0;
          padding-right: 0; } }
      body.nav-sticky header section .container div:nth-of-type(1) img, body.nav-sticky header section .container div:nth-of-type(1) picture {
        width: auto;
        height: calc(var(--headerHSticky) - var(--headerSpacer2)*2);
        transition: all .9s ease-out; }
      body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(2) {
        display: inherit;
        transition: all .9s ease-out; }
      body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(1), body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(3), body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(4) {
        display: none;
        transition: all .9s ease-out; }
      @media screen and (max-width: 768px) {
        body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(4) {
          width: 50px;
          display: inherit;
          transition: all .9s ease-out; }
        body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(1), body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(2), body.nav-sticky header section .container div:nth-of-type(1) img:nth-of-type(3) {
          display: none;
          transition: all .9s ease-out; } }

body.nav-sticky.down header {
  transform: translate3d(0, var(--headerHStickyR), 0) !important;
  transition: all 0.9s ease-out; }

body.down header {
  transform: translate3d(0, var(--headerHreverse), 0);
  transition: all 0.9s ease-out; }

/* MAIN
####################################### */
main img.big {
  display: inherit; }
main img.small {
  display: none; }
@media screen and (max-width: 768px) {
  main img.big {
    display: none; }
  main img.small {
    display: inherit; } }
main acronym,
main abbr[title] {
  text-decoration: none;
  border-bottom: 2px dotted var(--FontBlack);
  cursor: help; }
main section {
  background-color: var(--White); }
main section.colored {
  background-color: var(--ColorFirst);
  /* TYPO
  ##################### */ }
  main section.colored h1, main section.colored h2, main section.colored h3, main section.colored h4,
  main section.colored p, main section.colored ul, main section.colored ol, main section.colored li {
    color: var(--FontBlack) !important; }
  main section.colored h4 {
    color: var(--ColorSecond) !important; }
  main section.colored .container.slider h2 {
    color: var(--ColorFirst) !important; }
  main section.colored .container.slider p, main section.colored .container.slider ul, main section.colored .container.slider ol, main section.colored .container.slider li {
    color: var(--FontBlack) !important; }
  main section.colored .container.slider .slick-dots li:hover button:before,
  main section.colored .container.slider .slick-dots li:active button:before,
  main section.colored .container.slider .slick-dots li:focus button:before {
    color: var(--ColorSecond);
    background-color: var(--ColorSecond); }
  main section.colored .container.slider .slick-dots li.slick-active button:before {
    color: var(--ColorSecond);
    background-color: var(--ColorSecond); }
  main section.colored .container.slider .slick-prev:hover:before,
  main section.colored .container.slider .slick-prev:focus:before,
  main section.colored .container.slider .slick-next:hover:before,
  main section.colored .container.slider .slick-next:focus:before {
    color: var(--ColorSecond); }
  main section.colored .container.cta {
    padding: 0 var(--spacerOut); }
    main section.colored .container.cta div, main section.colored .container.cta article {
      background-color: var(--White); }
      main section.colored .container.cta div h1, main section.colored .container.cta div h2, main section.colored .container.cta div h3,
      main section.colored .container.cta div p, main section.colored .container.cta div ul, main section.colored .container.cta div ol, main section.colored .container.cta div li, main section.colored .container.cta article h1, main section.colored .container.cta article h2, main section.colored .container.cta article h3,
      main section.colored .container.cta article p, main section.colored .container.cta article ul, main section.colored .container.cta article ol, main section.colored .container.cta article li {
        color: var(--FontBlack) !important; }
      main section.colored .container.cta div a.more, main section.colored .container.cta article a.more {
        margin: -20px var(--SpacerHalf) 0 0; }
    @media screen and (max-width: 768px) {
      main section.colored .container.cta {
        padding: var(--SpacerMain) 0; } }
main section.tip {
  background-color: var(--ColorFirst);
  padding-bottom: var(--SpacerSection) !important; }
  @media screen and (max-width: 1024px) {
    main section.tip .container {
      grid-template-columns: 1fr;
      grid-row-gap: calc(var(--SpacerMain) + var(--SpacerHalf)); } }
  main section.tip .box {
    height: 100%;
    background-color: var(--White);
    transition: all .9s ease-out;
    position: relative; }
    @media screen and (max-width: 1280px) {
      main section.tip .box {
        padding: var(--SpacerHalf) var(--SpacerHalf) var(--SpacerMain) var(--SpacerHalf); } }
    main section.tip .box:hover {
      box-shadow: var(--shadow-elevation-medium);
      transition: all .9s ease-out; }
      main section.tip .box:hover i {
        color: var(--ColorSecond);
        transition: all .9s ease-out; }
    main section.tip .box i {
      left: calc(-77px + 50%);
      top: -77px;
      min-width: 154px;
      color: var(--White);
      background-color: var(--ColorFirst);
      font-size: var(--FontSizeH1);
      border-radius: 100%;
      padding: var(--SpacerHalf);
      aspect-ratio: 1/1;
      vertical-align: middle;
      text-align: center;
      position: absolute;
      transition: all .9s ease-out; }
      @media screen and (max-width: 768px) {
        main section.tip .box i {
          left: calc(-77px + 50%);
          top: -77px;
          min-width: 154px;
          font-size: calc(var(--FontSizeH1) + 130%);
          padding: 40px 20px 20px 20px; } }
      @media screen and (max-width: 468px) {
        main section.tip .box i {
          left: calc(-47px + 50%);
          top: -47px;
          min-width: 94px;
          padding: 30px 20px 20px 20px; } }
    main section.tip .box h3 {
      margin-top: var(--SpacerMain); }
      @media screen and (max-width: 768px) {
        main section.tip .box h3 {
          margin-top: calc(var(--SpacerMain) + var(--SpacerHalf)); } }
    main section.tip .box ul {
      width: auto;
      list-style: none;
      font-weight: 700;
      margin: 0;
      padding: 0 0 0 10px; }
      main section.tip .box ul li {
        font-size: var(--FontSizeH4);
        margin: 0 0 0 0;
        padding: 0  20px  0 0; }
        main section.tip .box ul li:before {
          left: -10px;
          top: 12px;
          color: var(--ColorFirst);
          content: "\f058";
          font-family: 'Font Awesome 6 Free';
          font-size: var(--FontSizeH2);
          font-style: normal;
          font-weight: 900;
          padding: 0 0 0 2px;
          text-decoration: none;
          position: relative; }
    @media screen and (max-width: 1280px) {
      main section.tip .box ul {
        margin: 0 auto; }
        main section.tip .box ul li {
          font-size: var(--FontSizeH3);
          padding: 0 var(--SpacerElse);
          text-align: left;
          display: block; }
          main section.tip .box ul li:before {
            left: -30px;
            top: 2px;
            font-size: var(--FontSizeH3);
            padding: 0; } }
    @media screen and (max-width: 768px) {
      main section.tip .box ul {
        margin: 0 auto; }
        main section.tip .box ul li {
          font-size: var(--FontSizeH3);
          padding: 0 var(--SpacerElse);
          text-align: left;
          display: block; }
          main section.tip .box ul li:before {
            left: -20px;
            top: 2px;
            font-size: var(--FontSizeH3);
            padding: 0; } }
    @media screen and (max-width: 468px) {
      main section.tip .box ul {
        margin: 0 auto; }
        main section.tip .box ul li {
          font-size: var(--FontSizeB); }
          main section.tip .box ul li:before {
            left: -14px;
            top: -2px; } }
main section {
  width: 100%;
  margin: 0 auto 0 auto; }
  main section.spacerMain {
    padding-top: var(--SpacerSection);
    padding-bottom: var(--SpacerSection); }
    main section.spacerMain.minus {
      padding-bottom: var(--SpacerMain); }
  main section.spacerHalf {
    padding-top: var(--SpacerMain);
    padding-bottom: var(--SpacerMain); }
  main section.heightstart {
    min-height: 100vh;
    background: url("../../../image/anditec-bodenbeschichtungen.avif") center no-repeat;
    background-size: cover;
    margin-top: var(--headerHreverse);
    margin-bottom: 0;
    display: grid;
    align-items: center; }
    @media screen and (max-width: 1280px) {
      main section.heightstart {
        padding: 200px var(--spacerOut) var(--SpacerSection) var(--spacerOut); } }
    @media screen and (max-width: 768px) {
      main section.heightstart {
        background: url("../../../image/anditec-bodenbeschichtungen-klein.avif") center no-repeat;
        background-size: cover;
        padding: 200px 0 var(--SpacerSection) 0; } }
    @media screen and (max-width: 468px) {
      main section.heightstart {
        padding-top: var(--headerH);
        padding-bottom: var(--SpacerSection); } }
    main section.heightstart .container {
      grid-template-columns: 1fr 1.5fr;
      margin: 0 auto;
      padding: 0; }
      @media screen and (max-width: 1024px) {
        main section.heightstart .container {
          grid-template-columns: 1fr; } }
      @media screen and (max-width: 768px) {
        main section.heightstart .container {
          padding-top: var(--SpacerMain); } }
      main section.heightstart .container article, main section.heightstart .container div {
        background-color: transparent;
        margin: 0;
        padding: 0; }
        main section.heightstart .container article p, main section.heightstart .container div p {
          font-size: var(--FontSizeB); }
    main section.heightstart arrow {
      z-index: 30;
      left: calc(50% - 25px);
      bottom: var(--SpacerMain);
      width: 50px;
      height: auto;
      margin: 0;
      padding: 0;
      animation-name: arrow;
      animation-delay: 0.5s;
      animation-duration: 2s;
      animation-iteration-count: 5;
      transition: all .9s ease-out;
      /* keyframe animation
      ####################################### */
      position: absolute; }
      @media screen and (max-width: 768px) {
        main section.heightstart arrow {
          display: none !important; } }
@keyframes arrow {
  0% {
    margin-bottom: 30px; }
  50% {
    margin-bottom: 0px; }
  100% {
    margin-bottom: 0px; } }
      @media screen and (max-width: 468px) {
        main section.heightstart arrow {
          left: calc(50% - 15px);
          width: 30px; } }
      main section.heightstart arrow a svg,
      main section.heightstart arrow a:link svg,
      main section.heightstart arrow a:visited svg {
        fill: var(--Black);
        transition: all 0.3s ease-in; }
      main section.heightstart arrow a:hover svg,
      main section.heightstart arrow a:active svg,
      main section.heightstart arrow a:focus svg {
        fill: var(--ColorFirst);
        transition: all .3s ease-in-out; }
  @media screen and (max-width: 1280px) {
    main section.heightstart {
      min-height: 100vh;
      height: auto; } }
  main section.center .container:nth-of-type(1) {
    text-align: center;
    margin: 0 auto;
    padding: 0; }
    @media screen and (max-width: 468px) {
      main section.center .container:nth-of-type(1) {
        text-align: left; } }
    main section.center .container:nth-of-type(1) article, main section.center .container:nth-of-type(1) div {
      width: 100%;
      background-color: transparent;
      text-align: center;
      margin: 0 auto;
      padding: 0; }
      main section.center .container:nth-of-type(1) article h1, main section.center .container:nth-of-type(1) article h2, main section.center .container:nth-of-type(1) div h1, main section.center .container:nth-of-type(1) div h2 {
        width: 50%;
        margin: 0 auto;
        padding: 0; }
        @media screen and (max-width: 1280px) {
          main section.center .container:nth-of-type(1) article h1, main section.center .container:nth-of-type(1) article h2, main section.center .container:nth-of-type(1) div h1, main section.center .container:nth-of-type(1) div h2 {
            width: 80%; } }
      main section.center .container:nth-of-type(1) article h3, main section.center .container:nth-of-type(1) article h4, main section.center .container:nth-of-type(1) div h3, main section.center .container:nth-of-type(1) div h4 {
        width: 50%;
        margin: 0 auto;
        padding: 0 0 var(--SpacerElse2) 0; }
      main section.center .container:nth-of-type(1) article p, main section.center .container:nth-of-type(1) article ol, main section.center .container:nth-of-type(1) article ul, main section.center .container:nth-of-type(1) div p, main section.center .container:nth-of-type(1) div ol, main section.center .container:nth-of-type(1) div ul {
        width: 60%;
        margin: 0 auto;
        padding: var(--SpacerHalf) 0 0 0; }
      @media screen and (max-width: 468px) {
        main section.center .container:nth-of-type(1) article, main section.center .container:nth-of-type(1) div {
          text-align: left; }
          main section.center .container:nth-of-type(1) article h1, main section.center .container:nth-of-type(1) article h2,
          main section.center .container:nth-of-type(1) article h3, main section.center .container:nth-of-type(1) article h4,
          main section.center .container:nth-of-type(1) article p, main section.center .container:nth-of-type(1) article ol, main section.center .container:nth-of-type(1) article ul, main section.center .container:nth-of-type(1) div h1, main section.center .container:nth-of-type(1) div h2,
          main section.center .container:nth-of-type(1) div h3, main section.center .container:nth-of-type(1) div h4,
          main section.center .container:nth-of-type(1) div p, main section.center .container:nth-of-type(1) div ol, main section.center .container:nth-of-type(1) div ul {
            width: 100%; } }
  main section.center .container:nth-of-type(2) {
    padding: var(--SpacerMain) var(--spacerOut) 0 var(--spacerOut); }
    @media screen and (max-width: 768px) {
      main section.center .container:nth-of-type(2) {
        padding: var(--SpacerMain) 0 0 0; } }
  main section.center .container.cta {
    position: relative; }
    @media screen and (max-width: 768px) {
      main section.center .container.cta {
        padding: var(--SpacerMain) 0 0 0; } }
    main section.center .container.cta article p, main section.center .container.cta article ul, main section.center .container.cta article ol, main section.center .container.cta article li, main section.center .container.cta div p, main section.center .container.cta div ul, main section.center .container.cta div ol, main section.center .container.cta div li {
      padding-right: 220px; }
    main section.center .container.cta article span, main section.center .container.cta div span {
      top: calc(50% - 29px);
      bottom: 50%;
      right: 0;
      position: absolute; }
    @media screen and (max-width: 468px) {
      main section.center .container.cta article p, main section.center .container.cta article ul, main section.center .container.cta article ol, main section.center .container.cta article li, main section.center .container.cta div p, main section.center .container.cta div ul, main section.center .container.cta div ol, main section.center .container.cta div li {
        padding-right: 0;
        padding-bottom: var(--SpacerHalf); } }
  main section .container {
    width: calc(100% - var(--spacerOut) * 2);
    max-width: 1280px;
    display: grid;
    grid-column-gap: var(--container-grid-column-gap);
    grid-row-gap: var(--container-grid-row-gap);
    justify-items: center;
    align-items: center;
    margin: 0 auto 0 auto;
    padding: var(--SpacerMain) var(--spacerOut) 0 var(--spacerOut);
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-items: stretch;
    position: relative;
    /* subcontent
    ######################## */
    /* SLIDER 
    ##################### */
    /* OVERWRITE SLICK CSS 
    ##################### */
    /* TABLE SCROLLABLE 
    ##################### */
    /* TYPO
    ##################### */
    /* https://codepen.io/alticreation/pen/zBZwOP */
    /** Deutsch **/
    /** Für Schweiz und Frankreich **/ }
    main section .container.intro {
      height: 100%;
      grid-template-columns: 1fr 1.2fr;
      grid-column-gap: var(--SpacerHalf);
      grid-row-gap: 0;
      justify-items: center;
      align-items: center; }
      @media screen and (max-width: 1280px) {
        main section .container.intro {
          grid-template-columns: 1fr;
          grid-column-gap: 0;
          grid-row-gap: var(--SpacerMain); } }
      @media screen and (max-width: 768px) {
        main section .container.intro {
          grid-template-columns: 1fr;
          grid-column-gap: 0;
          grid-row-gap: var(--SpacerMain); } }
      main section .container.intro article {
        height: auto;
        padding: var(--SpacerHalf) 0 0 0; }
    @media screen and (max-width: 768px) {
      main section .container {
        padding: var(--SpacerMain) 0 0 0; } }
    main section .container.check ul {
      width: auto;
      list-style: none;
      margin: 0;
      padding: 0; }
      main section .container.check ul li {
        font-size: var(--FontSizeH4);
        margin: 0;
        padding: 0 var(--SpacerMain) 0 var(--SpacerHalf);
        display: inline;
        position: relative; }
        main section .container.check ul li:before {
          left: var(--SpacerHalfR);
          top: -22px;
          content: "\f058";
          font-family: 'Font Awesome 6 Free';
          font-size: var(--FontSizeH2);
          font-style: normal;
          font-weight: 900;
          padding: 0 0 0 2px;
          text-decoration: none;
          position: absolute; }
    @media screen and (max-width: 1280px) {
      main section .container.check ul {
        margin: 0 auto; }
        main section .container.check ul li {
          font-size: var(--FontSizeH3);
          padding: 0 var(--SpacerElse);
          text-align: left;
          display: block; }
          main section .container.check ul li:before {
            left: -30px;
            top: 2px;
            font-size: var(--FontSizeH3);
            padding: 0; } }
    @media screen and (max-width: 768px) {
      main section .container.check ul {
        margin: 0 auto; }
        main section .container.check ul li {
          font-size: var(--FontSizeH3);
          padding: 0 var(--SpacerElse);
          text-align: left;
          display: block; }
          main section .container.check ul li:before {
            left: -20px;
            top: 2px;
            font-size: var(--FontSizeH3);
            padding: 0; } }
    @media screen and (max-width: 468px) {
      main section .container.check ul {
        margin: 0 auto; }
        main section .container.check ul li {
          font-size: var(--FontSizeB); }
          main section .container.check ul li:before {
            left: -14px;
            top: -2px; } }
    main section .container.one {
      width: 100%;
      max-width: 1280px;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr;
      grid-auto-rows: 1fr;
      grid-column-gap: var(--SpacerHalf);
      grid-row-gap: var(--SpacerMain);
      padding: var(--SpacerMain) var(--spacerOut); }
      @media screen and (max-width: 768px) {
        main section .container.one {
          width: calc(100% - var(--spacerOut) * 2); } }
    main section .container.cta article p, main section .container.cta article ul, main section .container.cta article ol, main section .container.cta article li, main section .container.cta div p, main section .container.cta div ul, main section .container.cta div ol, main section .container.cta div li {
      padding-right: 220px; }
    main section .container.cta article span, main section .container.cta div span {
      top: calc(50% - var(--SpacerElse2));
      bottom: 50%;
      right: 0;
      position: absolute; }
    @media screen and (max-width: 768px) {
      main section .container.cta article p, main section .container.cta article ul, main section .container.cta article ol, main section .container.cta article li, main section .container.cta div p, main section .container.cta div ul, main section .container.cta div ol, main section .container.cta div li {
        padding-right: 0;
        padding-bottom: var(--SpacerHalf); }
      main section .container.cta article span, main section .container.cta div span {
        top: auto;
        right: 0;
        bottom: 50px; } }
    @media screen and (max-width: 468px) {
      main section .container.cta article p, main section .container.cta article ul, main section .container.cta article ol, main section .container.cta article li, main section .container.cta div p, main section .container.cta div ul, main section .container.cta div ol, main section .container.cta div li {
        padding-right: 0;
        padding-bottom: var(--SpacerHalf); }
      main section .container.cta article span, main section .container.cta div span {
        top: auto;
        right: 0;
        bottom: 10px; } }
    @media screen and (max-width: 1280px) {
      main section .container.cta article, main section .container.cta div {
        padding: var(--SpacerHalf); } }
    main section .container article, main section .container div {
      background-color: var(--ColorTxtBg);
      text-align: left;
      margin: 0;
      padding: var(--SpacerHalf);
      /* divisions
      ######################## */
      /* style
      ######################## */ }
      @media screen and (max-width: 1280px) {
        main section .container article, main section .container div {
          padding: 0 0 var(--SpacerHalf) 0; } }
      @media screen and (max-width: 768px) {
        main section .container article.single, main section .container div.single {
          padding: 0 0 var(--SpacerHalf) 0; } }
      main section .container article img, main section .container div img {
        margin-bottom: var(--SpacerElse); }
      main section .container article.one-two-three dl, main section .container div.one-two-three dl {
        font-weight: 700;
        display: grid;
        grid-template-columns: 110px 1fr;
        grid-column-gap: var(--SpacerHalf);
        grid-row-gap: var(--SpacerHalf);
        justify-items: flex-start;
        align-items: center;
        line-height: var(--LineHigh2);
        position: relative; }
        @media screen and (max-width: 468px) {
          main section .container article.one-two-three dl, main section .container div.one-two-three dl {
            grid-template-columns: 1fr; } }
        main section .container article.one-two-three dl:before, main section .container div.one-two-three dl:before {
          top: 0;
          left: 60px;
          width: 5px;
          height: 100%;
          content: '';
          border-left: 5px solid var(--ColorFirst);
          position: absolute;
          z-index: 1; }
          @media screen and (max-width: 768px) {
            main section .container article.one-two-three dl:before, main section .container div.one-two-three dl:before {
              left: 45px; } }
          @media screen and (max-width: 468px) {
            main section .container article.one-two-three dl:before, main section .container div.one-two-three dl:before {
              display: none; } }
        main section .container article.one-two-three dl dt, main section .container div.one-two-three dl dt {
          width: auto;
          height: auto;
          color: var(--ColorFirst);
          background-color: var(--White);
          border: 8px solid var(--ColorFirst);
          outline: 8px solid var(--White);
          font-size: var(--FontSizeH2);
          border-radius: 100%;
          aspect-ratio: 1/1;
          line-height: var(--LineHigh1);
          padding: 22px 20px 18px 20px;
          margin-right: 0;
          vertical-align: baseline;
          z-index: 2; }
          @media screen and (max-width: 468px) {
            main section .container article.one-two-three dl dt, main section .container div.one-two-three dl dt {
              border: 5px solid var(--ColorFirst);
              outline: 5px solid var(--White);
              padding: 14px 14px 14px 14px;
              margin-right: 0;
              font-size: var(--FontSizeH3); } }
        main section .container article.one-two-three dl dd, main section .container div.one-two-three dl dd {
          font-size: var(--FontSizeH4);
          line-height: var(--LineHigh1); }
          main section .container article.one-two-three dl dd span, main section .container div.one-two-three dl dd span {
            font-size: var(--FontSize);
            font-weight: 300;
            line-height: var(--LineHigh2);
            display: block; }
            @media screen and (max-width: 468px) {
              main section .container article.one-two-three dl dd span, main section .container div.one-two-three dl dd span {
                padding-top: 8px;
                padding-bottom: var(--SpacerHalf); } }
      main section .container article.two, main section .container div.two {
        padding: var(--SpacerHalf) 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: var(--SpacerHalf);
        grid-row-gap: 0; }
        main section .container article.two.imgl, main section .container div.two.imgl {
          grid-template-columns: 1fr 1.2fr; }
        main section .container article.two.imgr, main section .container div.two.imgr {
          grid-template-columns: 1.2fr 1fr; }
        main section .container article.two img, main section .container div.two img {
          margin-bottom: 0; }
        main section .container article.two div, main section .container article.two article, main section .container div.two div, main section .container div.two article {
          margin: 0;
          padding: 0 !important; }
        @media screen and (max-width: 1280px) {
          main section .container article.two, main section .container div.two {
            padding: 0 0 var(--SpacerHalf) 0;
            grid-template-columns: 1fr;
            grid-template-areas: "one" "two"; }
            main section .container article.two.imgl, main section .container div.two.imgl {
              grid-template-columns: 1fr; }
            main section .container article.two.imgr, main section .container div.two.imgr {
              grid-template-columns: 1fr; }
            main section .container article.two img, main section .container div.two img {
              margin-bottom: var(--SpacerHalf);
              aspect-ratio: 1/1; }
            main section .container article.two div, main section .container div.two div {
              grid-area: one; }
            main section .container article.two article, main section .container div.two article {
              grid-area: two;
              padding: 0 0 var(--SpacerHalf) 0; }
            main section .container article.two article:nth-of-type(2), main section .container div.two article:nth-of-type(2) {
              grid-area: one;
              padding: 0 0 var(--SpacerHalf) 0; } }
      main section .container article.three, main section .container div.three {
        width: 100%;
        max-width: 1280px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: var(--SpacerHalf);
        grid-row-gap: 0; }
        main section .container article.three img, main section .container div.three img {
          margin-bottom: 0; }
        @media screen and (max-width: 768px) {
          main section .container article.three img, main section .container div.three img {
            margin-bottom: var(--SpacerHalf); } }
        main section .container article.three div, main section .container div.three div {
          margin: 0;
          padding: 0; }
        @media screen and (max-width: 768px) {
          main section .container article.three, main section .container div.three {
            grid-template-columns: 1fr; } }
      main section .container article.gallery.horizontal, main section .container div.gallery.horizontal {
        background-color: transparent;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "img1 img1 img2 img3" "img4 img5 img5 img6" "img7 img8 img9 img9";
        grid-row-gap: var(--SpacerElse);
        grid-column-gap: var(--SpacerElse);
        position: relative; }
        @media screen and (max-width: 468px) {
          main section .container article.gallery.horizontal, main section .container div.gallery.horizontal {
            grid-template-columns: 1fr;
            grid-template-areas: "img1" "img2" "img3" "img4" "img5" "img6" "img7" "img8" "img9"; } }
        @media screen and (max-width: 768px) and (orientation: landscape) {
          main section .container article.gallery.horizontal, main section .container div.gallery.horizontal {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-areas: "img1 img1 img2" "img3 img4 img4" "img5 img6 img7" "img8 img8 img9"; } }
        main section .container article.gallery.horizontal img, main section .container div.gallery.horizontal img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          margin: 0;
          padding: 0;
          transition: all .9s ease-out; }
          @media screen and (max-width: 468px) {
            main section .container article.gallery.horizontal img, main section .container div.gallery.horizontal img {
              object-fit: scale-down; } }
        main section .container article.gallery.horizontal div, main section .container div.gallery.horizontal div {
          margin: 0;
          padding: 0; }
        main section .container article.gallery.horizontal div:nth-of-type(1), main section .container div.gallery.horizontal div:nth-of-type(1) {
          grid-area: img1; }
        main section .container article.gallery.horizontal div:nth-of-type(2), main section .container div.gallery.horizontal div:nth-of-type(2) {
          grid-area: img2; }
        main section .container article.gallery.horizontal div:nth-of-type(3), main section .container div.gallery.horizontal div:nth-of-type(3) {
          grid-area: img3; }
        main section .container article.gallery.horizontal div:nth-of-type(4), main section .container div.gallery.horizontal div:nth-of-type(4) {
          grid-area: img4; }
        main section .container article.gallery.horizontal div:nth-of-type(5), main section .container div.gallery.horizontal div:nth-of-type(5) {
          grid-area: img5; }
        main section .container article.gallery.horizontal div:nth-of-type(6), main section .container div.gallery.horizontal div:nth-of-type(6) {
          grid-area: img6; }
        main section .container article.gallery.horizontal div:nth-of-type(7), main section .container div.gallery.horizontal div:nth-of-type(7) {
          grid-area: img7; }
        main section .container article.gallery.horizontal div:nth-of-type(8), main section .container div.gallery.horizontal div:nth-of-type(8) {
          grid-area: img8; }
        main section .container article.gallery.horizontal div:nth-of-type(9), main section .container div.gallery.horizontal div:nth-of-type(9) {
          grid-area: img9; }
      main section .container article.gallery.vertical, main section .container div.gallery.vertical {
        background-color: transparent;
        margin: 0;
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas: "img1 img2 img3" "img4 img2 img6" "img4 img5 img6";
        grid-row-gap: var(--SpacerElse);
        grid-column-gap: var(--SpacerElse);
        position: relative; }
        @media screen and (max-width: 468px) {
          main section .container article.gallery.vertical, main section .container div.gallery.vertical {
            grid-template-columns: 1fr;
            grid-template-areas: "img1" "img2" "img3" "img4" "img5" "img6"; } }
        main section .container article.gallery.vertical img, main section .container div.gallery.vertical img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          margin: 0;
          padding: 0;
          transition: all .9s ease-out; }
          @media screen and (max-width: 468px) {
            main section .container article.gallery.vertical img, main section .container div.gallery.vertical img {
              object-fit: scale-down; } }
        main section .container article.gallery.vertical div, main section .container div.gallery.vertical div {
          margin: 0;
          padding: 0; }
        main section .container article.gallery.vertical div:nth-of-type(1), main section .container div.gallery.vertical div:nth-of-type(1) {
          grid-area: img1; }
        main section .container article.gallery.vertical div:nth-of-type(2), main section .container div.gallery.vertical div:nth-of-type(2) {
          grid-area: img2; }
        main section .container article.gallery.vertical div:nth-of-type(3), main section .container div.gallery.vertical div:nth-of-type(3) {
          grid-area: img3; }
        main section .container article.gallery.vertical div:nth-of-type(4), main section .container div.gallery.vertical div:nth-of-type(4) {
          grid-area: img4; }
        main section .container article.gallery.vertical div:nth-of-type(5), main section .container div.gallery.vertical div:nth-of-type(5) {
          grid-area: img5; }
        main section .container article.gallery.vertical div:nth-of-type(6), main section .container div.gallery.vertical div:nth-of-type(6) {
          grid-area: img6; }
      main section .container article.borded, main section .container div.borded {
        border-radius: var(--BorderRadius); }
      main section .container article.shadowed, main section .container div.shadowed {
        box-shadow: var(--shadow-elevation-medium); }
    main section .container.slider {
      max-width: 1320px;
      padding: 0 0 var(--SpacerElse2) 0; }
      main section .container.slider .customers, main section .container.slider .slick-list {
        padding: 0; }
      main section .container.slider div.slick-list {
        background-color: transparent;
        padding-top: var(--SpacerElse); }
      main section .container.slider div.slick-track {
        height: auto;
        background-color: transparent;
        border: 0;
        padding: 0;
        position: inherit !important; }
        main section .container.slider div.slick-track div.slick-slide {
          height: auto !important;
          background-color: var(--White);
          margin: 1px 1px var(--SpacerHalf) 1px;
          transition: all .3s;
          margin: 0 var(--SpacerElse) var(--SpacerHalf) var(--SpacerElse);
          padding: 0; }
          @media screen and (max-width: 768px) {
            main section .container.slider div.slick-track div.slick-slide {
              margin: 0 var(--SpacerHalf) var(--SpacerHalf) var(--SpacerHalf); } }
          @media screen and (max-width: 468px) {
            main section .container.slider div.slick-track div.slick-slide {
              margin: 0 var(--SpacerMain) var(--SpacerHalf) var(--SpacerMain); } }
          main section .container.slider div.slick-track div.slick-slide img {
            max-width: 100%;
            margin: 0;
            padding: 0; }
          main section .container.slider div.slick-track div.slick-slide article {
            position: relative;
            text-align: left;
            padding: 0 var(--SpacerElse) var(--SpacerHalf) var(--SpacerElse); }
            main section .container.slider div.slick-track div.slick-slide article h2 {
              color: var(--ColorFirst);
              font-size: var(--FontSizeH4);
              padding: var(--SpacerHalf) 0 var(--SpacerElse) 0; }
            main section .container.slider div.slick-track div.slick-slide article p {
              padding: 0 0 var(--SpacerElse2) 0; }
      main section .container.slider.light div.slick-track div.slick-slide {
        background-color: var(--LightGrey); }
        main section .container.slider.light div.slick-track div.slick-slide article {
          background-color: var(--LightGrey); }
    main section .container .slick-dotted.slick-slider {
      margin-bottom: var(--SpacerElse); }
    main section .container .slick-dots {
      bottom: var(--SpacerElseR);
      width: 100%;
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;
      display: block;
      position: absolute;
      transition: all .9s; }
      @media screen and (min-width: 1280px) {
        main section .container .slick-dots {
          bottom: 0; } }
    main section .container .slick-dots li {
      width: var(--SpacerHalf);
      height: var(--SpacerElse);
      text-align: center;
      margin: 0 var(--SpacerElse2);
      padding: 0;
      display: inline-block;
      position: relative;
      cursor: pointer;
      transition: all .9s; }
    main section .container .slick-dots li button {
      width: var(--SpacerHalf);
      height: var(--SpacerElse);
      color: transparent;
      background: transparent;
      margin: 0;
      padding: 0;
      outline: none;
      cursor: pointer;
      display: block;
      transition: all .9s; }
    main section .container .slick-dots li button:before {
      top: 0;
      left: 0;
      width: var(--SpacerElse);
      height: var(--SpacerElse);
      content: ' ';
      color: var(--Black);
      background-color: var(--Black);
      border-radius: var(--SpacerElse2);
      text-align: center;
      position: absolute;
      opacity: 1;
      transition: all .9s; }
    main section .container .slick-dots li:hover button:before,
    main section .container .slick-dots li:active button:before,
    main section .container .slick-dots li:focus button:before {
      color: var(--ColorFirst);
      background-color: var(--ColorFirst); }
    main section .container .slick-dots li.slick-active button:before {
      left: var(--SpacerElseR2);
      width: var(--SpacerHalf);
      color: var(--ColorFirst);
      background-color: var(--ColorFirst);
      margin: 0;
      transition: all .9s; }
    main section .container .slick-prev {
      left: var(--SpacerHalfR);
      z-index: 80; }
    main section .container [dir='rtl'] .slick-prev {
      right: var(--SpacerHalfR);
      left: auto; }
    main section .container .slick-next {
      right: var(--SpacerHalfR);
      z-index: 80; }
    main section .container [dir='rtl'] .slick-next {
      right: auto;
      left: var(--SpacerHalfR); }
    main section .container .slick-prev:hover:before,
    main section .container .slick-prev:focus:before,
    main section .container .slick-next:hover:before,
    main section .container .slick-next:focus:before {
      color: var(--ColorFirst);
      transition: all .3s;
      opacity: 1; }
    main section .container .slick-prev.slick-disabled:before,
    main section .container .slick-next.slick-disabled:before {
      opacity: .25;
      transition: all .3s; }
    main section .container .slick-prev:before,
    main section .container .slick-next:before {
      color: var(--Black);
      font-family: 'Font Awesome 6 Free';
      font-style: normal;
      font-weight: 900;
      font-size: 3.0rem;
      transition: all .3s;
      opacity: 1; }
    @media screen and (max-width: 1400px) {
      main section .container .slick-prev {
        left: 0;
        z-index: 80; }
      main section .container [dir='rtl'] .slick-prev {
        right: 0;
        left: auto; }
      main section .container .slick-next {
        right: 0;
        z-index: 80; }
      main section .container [dir='rtl'] .slick-next {
        right: auto;
        left: 0; } }
    main section .container .table-scrollable {
      max-width: 100vw !important;
      height: auto !important;
      margin: 0 0 var(--SpacerHalf) 0 !important;
      padding: var(--SpacerTxt) 0 0 0 !important;
      overflow-y: auto !important;
      display: block !important;
      position: relative; }
      @media screen and (max-width: 768px) {
        main section .container .table-scrollable {
          max-width: 100vw !important; } }
    main section .container .table-scrollable::-webkit-scrollbar {
      -webkit-appearance: none !important;
      width: 14px !important;
      height: 14px !important; }
    main section .container .table-scrollable::-webkit-scrollbar-thumb {
      border-radius: var(--BorderRadius) !important;
      border: 3px solid var(--White) !important;
      background-color: var(--Black) !important; }
    main section .container table {
      width: 100%;
      min-width: 100%;
      max-width: fit-content;
      font-size: var(--FontSize);
      border: 1px solid var(--Grey);
      border-collapse: collapse; }
      @media screen and (max-width: 768px) {
        main section .container table {
          min-width: 600px; } }
      main section .container table caption {
        display: none; }
      main section .container table tbody tr:hover {
        background-color: var(--LightGrey); }
      main section .container table tbody tr.colored {
        width: 100%;
        color: var(--ColorFirst) !important; }
        main section .container table tbody tr.colored span {
          margin: 0;
          padding: 5px var(--SpacerElse2);
          display: block; }
        main section .container table tbody tr.colored th {
          color: var(--White);
          background-color: var(--ColorSecond);
          text-align: center; }
      main section .container table tbody tr th {
        color: var(--White);
        background-color: var(--ColorSecond);
        font-weight: 600;
        border: 1px solid var(--Grey);
        margin: 0;
        padding: var(--SpacerElse);
        font-size: var(--FontSize); }
        @media screen and (max-width: 768px) {
          main section .container table tbody tr th {
            font-size: var(--FontSize); } }
        @media screen and (max-width: 468px) {
          main section .container table tbody tr th {
            font-size: var(--FontSize); } }
      main section .container table tbody tr th[scope="row"] {
        color: var(--Black);
        background-color: var(--LightGrey);
        padding: var(--SpacerElse2) var(--SpacerElse2) var(--SpacerElse2) var(--SpacerElse); }
      main section .container table tbody tr td {
        border: 1px solid var(--Grey);
        font-size: var(--FontSize);
        text-align: right;
        line-height: var(--LineHigh2);
        margin: 0;
        padding: var(--SpacerElse2) var(--SpacerElse) var(--SpacerElse2) var(--SpacerElse2); }
        @media screen and (max-width: 768px) {
          main section .container table tbody tr td {
            font-size: var(--FontSize); } }
        @media screen and (max-width: 468px) {
          main section .container table tbody tr td {
            font-size: var(--FontSize); } }
      main section .container table tr > th:first-child, main section .container table tr > td:first-child {
        left: 0;
        position: sticky;
        z-index: 99; }
    main section .container h1, main section .container h2, main section .container h3, main section .container h4 {
      color: var(--FontBlack);
      font-family: Ubuntu, "sans-serif";
      line-height: var(--LineHigh1);
      font-weight: 600;
      margin: 0;
      padding: 0 0 var(--SpacerTxt) 0; }
    main section .container h3, main section .container h4 {
      color: var(--ColorFirst); }
    main section .container h1 {
      font-size: var(--FontSizeH1); }
    main section .container h2 {
      font-size: var(--FontSizeH2); }
    main section .container h3 {
      font-size: var(--FontSizeH3); }
    main section .container h4 {
      font-size: var(--FontSizeH4); }
    main section .container p, main section .container ul, main section .container ol, main section .container li {
      color: var(--FontBlack);
      font-family: Ubuntu, "sans-serif";
      font-size: var(--FontSize);
      line-height: var(--LineHigh2);
      margin: 0; }
    main section .container p {
      padding: 0 0 var(--SpacerTxt) 0; }
    main section .container ul {
      padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
    main section .container ol {
      padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
    main section .container li {
      padding: 0 0 var(--SpacerTxt) 0; }
    main section .container p:last-of-type {
      padding: 0; }
    main section .container a,
    main section .container a:link,
    main section .container a:visited {
      color: var(--ColorFirst);
      background-color: transparent;
      font-size: var(--FontSize);
      font-weight: 700;
      line-height: var(--LineHigh2);
      transition: all .3s;
      text-decoration: none; }
    main section .container a:hover,
    main section .container a:active,
    main section .container a:focus {
      color: var(--Black);
      transition: all .3s;
      text-decoration: none; }
    main section .container a.more {
      color: var(--ButtonA-F);
      font-weight: 500;
      font-size: var(--FontSize);
      letter-spacing: 0.5px;
      line-height: var(--LineHighTitle);
      border-radius: var(--BorderRadius);
      transition: all .3s;
      margin: 0 var(--SpacerHalf) 0 0;
      padding: var(--SpacerTxt);
      display: inline-block;
      position: relative;
      overflow: hidden;
      z-index: 1;
      text-decoration: none; }
      @media screen and (min-width: 768px) {
        main section .container a.more {
          margin: var(--SpacerTxt) var(--SpacerHalf) 0 0; } }
      main section .container a.more:after {
        content: '';
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--ButtonA-BG);
        border-radius: 0;
        position: absolute;
        z-index: -2; }
      main section .container a.more:before {
        content: '';
        bottom: 0;
        left: 0;
        width: 0%;
        height: 100%;
        background-color: var(--ButtonA-BG2);
        border-radius: 0;
        transition: all .3s;
        position: absolute;
        z-index: -1; }
      main section .container a.more:hover {
        color: var(--ButtonA-F2); }
        main section .container a.more:hover:before {
          width: 100%; }
    main section .container a.more2, main section .container imglink {
      color: var(--ButtonB-F);
      margin: var(--SpacerTxt) var(--SpacerHalf) 0 0; }
      main section .container a.more2:after, main section .container imglink:after {
        background-color: var(--ButtonB-BG); }
      main section .container a.more2:before, main section .container imglink:before {
        background-color: var(--ButtonB-BG2); }
      main section .container a.more2:hover, main section .container imglink:hover {
        color: var(--ButtonB-F2);
        box-shadow: none; }
    main section .container a.more3 {
      color: var(--ButtonB-F);
      border: 2px solid var(--White);
      margin: var(--SpacerTxt) var(--SpacerHalf) 0 0; }
      main section .container a.more3:after {
        background-color: var(--ButtonB-BG); }
      main section .container a.more3:before {
        background-color: var(--ButtonA-BG); }
      main section .container a.more3:hover {
        color: var(--ButtonB-F2);
        box-shadow: none; }
    main section .container html[lang="de"] q {
      quotes: "»" "«"; }
    main section .container q:lang(de) {
      quotes: "»" "«"; }
    main section .container html[lang="ch"] q,
    main section .container html[lang="fr"] q,
    main section .container html[lang="en"] q {
      quotes: "«" "»"; }
    main section .container q:lang(ch),
    main section .container q:lang(fr),
    main section .container q:lang(en) {
      quotes: "«" "»"; }
    main section .container q {
      font-style: italic; }
    @media screen and (max-width: 768px) {
      main section .container p, main section .container li {
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto; } }

/* FORM
####################################### */
main section .single {
  padding: 0; }
  main section .single div {
    padding: 0; }
  @media screen and (min-width: 768px) and (max-width: 1400px) {
    main section .single {
      padding-left: var(--spacerOut);
      padding-right: var(--spacerOut); } }

main section .formular {
  padding-top: 0;
  padding-bottom: var(--SpacerSection);
  width: 100%; }
  @media screen and (min-width: 768px) and (max-width: 1290px) {
    main section .formular {
      padding-left: var(--SpacerHalf);
      padding-right: var(--SpacerHalf); } }
  @media screen and (max-width: 768px) {
    main section .formular {
      padding-left: var(--spacerOut);
      padding-right: var(--spacerOut); } }
  @media screen and (max-width: 468px) {
    main section .formular {
      padding-left: 0;
      padding-right: 0; } }
  main section .formular form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--container-grid-column-gap);
    grid-row-gap: var(--container-grid-row-gap); }
    @media screen and (max-width: 1040px) {
      main section .formular form {
        grid-template-columns: 1fr; } }
  @media screen and (max-width: 468px) {
    main section .formular {
      padding: var(--SpacerElse) !important; } }
  main section .formular.bf {
    padding-top: var(--SpacerMain); }
  main section .formular div {
    padding: 0; }
  main section .formular form {
    box-sizing: border-box;
    font-size: var(--FontSize);
    margin: 0;
    padding: 0; }
    main section .formular form .form-group {
      margin: 0;
      padding-bottom: var(--SpacerHalf);
      position: relative; }
      main section .formular form .form-group label {
        position: relative; }
      main section .formular form .form-group .test1::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\f5ba";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 12px 8px 5px 8px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test1::before {
            top: 18px;
            height: 23px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test1::before {
            display: none; } }
      main section .formular form .form-group .test2::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\f015";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 11px 8px 6px 8px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test2::before {
            top: 18px;
            height: 23px;
            padding: 10px 6px 7px 10px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test2::before {
            display: none; } }
      main section .formular form .form-group .test3::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\f0e7";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 13px 6px 8px 10px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test3::before {
            top: 18px;
            height: 22px;
            padding: 12px 4px 9px 12px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test3::before {
            display: none; } }
      main section .formular form .form-group .test4::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\f769";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 12px 6px 5px 10px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test4::before {
            top: 18px;
            height: 23px;
            padding: 12px 4px 5px 12px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test4::before {
            display: none; } }
      main section .formular form .form-group .test5::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\e54f";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 11px 6px 6px 10px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test5::before {
            top: 18px;
            height: 23px;
            padding: 10px 5px 7px 11px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test5::before {
            display: none; } }
      main section .formular form .form-group .test6::before {
        top: 20px;
        right: -42px;
        color: var(--White);
        background-color: var(--FontBlack);
        content: "\f3c5";
        font-family: 'Font Awesome 6 Free';
        font-style: normal;
        font-weight: 900;
        width: 25px;
        height: 25px;
        padding: 13px 4px 8px 12px;
        transition: all .9s ease-in-out;
        position: absolute;
        z-index: 9; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group .test6::before {
            top: 18px;
            height: 22px;
            padding: 12px 2px 9px 14px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .test6::before {
            display: none; } }
      @media screen and (max-width: 768px) {
        main section .formular form .form-group {
          padding-bottom: var(--SpacerElse); } }
      main section .formular form .form-group:last-of-type {
        text-align: left;
        padding-bottom: 0; }
        @media screen and (max-width: 1024px) {
          main section .formular form .form-group:last-of-type {
            text-align: center; } }
      main section .formular form .form-group.right {
        text-align: right; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group.right {
            text-align: center; } }
      main section .formular form .form-group.upload-area {
        padding-top: var(--SpacerElse2);
        padding-bottom: var(--SpacerMain); }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group.upload-area {
            padding-bottom: var(--SpacerElse); } }
        main section .formular form .form-group.upload-area span.intro {
          display: block;
          line-height: 1.5;
          padding-bottom: var(--SpacerElse); }
      main section .formular form .form-group label.upload {
        color: var(--FontBlack);
        background-color: var(--White);
        padding: 0.5rem;
        border-radius: var(--BorderRadius2);
        border: 1px solid var(--Grey);
        margin-top: var(--SpacerElse);
        padding: 5px var(--SpacerElse);
        cursor: pointer; }
      main section .formular form .form-group #file-chosen {
        margin-left: 0.3rem;
        font-family: sans-serif; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group #file-chosen {
            line-height: 2; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group #file-chosen {
            line-height: 2; } }
      main section .formular form .form-group label span {
        top: -16px;
        left: 0px;
        color: var(--Grey);
        font-size: 90%;
        padding: 0 8px;
        display: block;
        position: absolute;
        display: none; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group label span {
            top: -10px; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group label span {
            top: -9px; } }
      main section .formular form .form-group label .form-control:active + span,
      main section .formular form .form-group label .form-control:focus + span,
      main section .formular form .form-group label .form-control:valid + span,
      main section .formular form .form-group label .form-control2:active + span,
      main section .formular form .form-group label .form-control2:focus + span,
      main section .formular form .form-group label .form-control2:valid + span {
        color: var(--ColorFirst); }
      main section .formular form .form-group label .form-control:invalid + span,
      main section .formular form .form-group label .form-control2:invalid + span {
        color: var(--ColorThird); }
      main section .formular form .form-group need {
        width: 100%;
        display: block;
        position: relative; }
      main section .formular form .form-group label .form-control:valid + span + need::after {
        top: -36px;
        right: var(--SpacerElse2);
        color: var(--ColorFirst);
        content: url("../graphic/default/ok.svg");
        width: 25px;
        height: 25px;
        transition: all .9s ease-in-out;
        padding: 0;
        position: absolute; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group label .form-control:valid + span + need::after {
            top: -34px;
            right: 8px; } }
      main section .formular form .form-group label .form-control:invalid + span + need::after {
        top: -36px;
        right: var(--SpacerElse2);
        color: var(--ColorThird);
        content: url("../graphic/default/false.svg");
        width: 25px;
        height: 25px;
        transition: all .9s ease-in-out;
        padding: 0;
        position: absolute; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group label .form-control:invalid + span + need::after {
            top: -34px;
            right: 8px; } }
      main section .formular form .form-group.dsgvo label {
        cursor: pointer; }
      main section .formular form .form-group.dsgvo label span {
        color: var(--Black);
        font-size: var(--FontSize);
        font-weight: 400;
        line-height: var(--LineHigh2);
        padding: 0 0 0 40px;
        display: block;
        position: inherit; }
        @media screen and (max-width: 768px) {
          main section .formular form .form-group.dsgvo label span {
            padding: 0 0 0 var(--SpacerHalf);
            hyphens: auto; } }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group.dsgvo label span {
            padding: 0 0 0 var(--SpacerSec);
            hyphens: auto; } }
      main section .formular form .form-group.dsgvo label span:nth-of-type(1) {
        color: var(--FontBlack);
        font-weight: 500;
        line-height: var(--LineHigh1);
        padding: 0 0 var(--SpacerElse) 0; }
      main section .formular form .form-group input[type="checkbox"],
      main section .formular form .form-group input[type="radio"] {
        box-sizing: border-box;
        padding: 0; }
      main section .formular form .form-group .form-control,
      main section .formular form .form-group .form-control2 {
        width: 100%;
        height: auto;
        color: var(--FontBlack);
        background-color: var(--White);
        background-clip: padding-box;
        font-family: Ubuntu, sans-serif;
        font-size: var(--FontSize);
        font-weight: 400;
        line-height: 1;
        padding: 11px 10px 11px 50px;
        border: 1px solid var(--FontBlack);
        border-radius: var(--BorderRadius2);
        transition: all .3s;
        display: block; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .form-control,
          main section .formular form .form-group .form-control2 {
            padding: 11px 10px 11px 10px; } }
        main section .formular form .form-group .form-control::placeholder,
        main section .formular form .form-group .form-control2::placeholder {
          color: var(--FontBlack);
          opacity: 1;
          transition: all .3s; }
        main section .formular form .form-group .form-control.lessspacer,
        main section .formular form .form-group .form-control2.lessspacer {
          padding: 11px 10px 11px 20px; }
      main section .formular form .form-group .form-control2 {
        width: auto; }
      main section .formular form .form-group .form-control:active,
      main section .formular form .form-group .form-control:focus,
      main section .formular form .form-group .form-control2:active,
      main section .formular form .form-group .form-control2:focus {
        color: var(--ColorFirst);
        padding: 11px 10px 11px 50px;
        border: 1px solid var(--ColorFirst);
        transition: all .3s;
        outline: none; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group .form-control:active,
          main section .formular form .form-group .form-control:focus,
          main section .formular form .form-group .form-control2:active,
          main section .formular form .form-group .form-control2:focus {
            padding: 11px 10px 11px 10px; } }
        main section .formular form .form-group .form-control:active::placeholder,
        main section .formular form .form-group .form-control:focus::placeholder,
        main section .formular form .form-group .form-control2:active::placeholder,
        main section .formular form .form-group .form-control2:focus::placeholder {
          color: var(--FontBlack);
          opacity: 0;
          transition: all .3s; }
      main section .formular form .form-group .form-control:invalid,
      main section .formular form .form-group .form-control2:invalid {
        color: var(--ColorThird);
        border: 1px solid var(--ColorThird); }
      main section .formular form .form-group .form-control:not(:focus):invalid,
      main section .formular form .form-group .form-control2:not(:focus):invalid {
        color: var(--ColorThird);
        border: 1px solid var(--ColorThird); }
      main section .formular form .form-group .form-control:active,
      main section .formular form .form-group .form-control:focus,
      main section .formular form .form-group .form-control2:active,
      main section .formular form .form-group .form-control2:focus {
        border: 1px solid !important; }
      main section .formular form .form-group select {
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        border: none;
        color: var(--FontBlack);
        background-color: var(--White);
        font-size: var(--Fontsize);
        background-image: url("../graphic/default/down.svg");
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: 98% center;
        padding: var(--SpacerElse2);
        border: 1px solid var(--ColorSecond);
        outline: none; }
      main section .formular form .form-group textarea.form-control {
        width: 100%;
        height: 160px;
        padding-top: 16px; }
      main section .formular form .form-group label textarea.form-control:invalid + span + need::after,
      main section .formular form .form-group label textarea.form-control:valid + span + need::after {
        top: -140px; }
      main section .formular form .form-group input.form-check-input {
        top: 43px;
        left: 0px;
        width: 30px;
        height: 30px;
        color: var(--FontBlack);
        border: 1px solid var(--FontBlack);
        border-radius: var(--BorderRadius2);
        transition: all .3s;
        position: absolute; }
        @media screen and (max-width: 468px) {
          main section .formular form .form-group input.form-check-input {
            top: 42px; } }
      main section .formular form .form-group input.form-check-input:checked + span {
        color: var(--FontBlack);
        font-style: normal;
        transition: all .3s; }
        main section .formular form .form-group input.form-check-input:checked + span haveto {
          transition: all .3s;
          opacity: 0; }
    main section .formular form [type="button"], main section .formular form [type="reset"], main section .formular form [type="submit"], main section .formular form button {
      -webkit-appearance: button; }
    main section .formular form button, main section .formular form input {
      overflow: visible; }
    main section .formular form .btn {
      width: auto;
      height: 60px;
      color: var(--FontBlack);
      background-color: var(--ColorSecond);
      font-size: var(--FontSize);
      font-weight: 700;
      text-transform: uppercase;
      line-height: 1;
      border: 1px solid var(--ColorSecond);
      border-radius: var(--BorderRadius2);
      text-align: center;
      vertical-align: middle;
      margin: 0;
      padding: var(--SpacerElse2) var(--SpacerMain);
      display: inline-block;
      transition: all 0.3s ease-in;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none; }
    main section .formular form .btn:hover {
      color: var(--White);
      background-color: var(--ColorFirst);
      border: 1px solid var(--ColorFirst);
      transition: all 0.3s ease-in;
      text-decoration: none; }
    main section .formular form .btn:active,
    main section .formular form .btn:focus {
      color: var(--White) !important;
      background-color: var(--ColorSecond);
      text-decoration: none; }

/* FOOTER
####################################### */
footer section {
  width: 100%;
  margin: 0 auto 0 auto;
  background-color: var(--ColorFirst);
  padding: 0 0 var(--SpacerHalf) 0; }
  footer section .container {
    width: calc(100% - var(--spacerOut) * 2);
    max-width: 1280px;
    display: grid;
    grid-column-gap: var(--container-grid-column-gap);
    grid-row-gap: var(--container-grid-row-gap);
    justify-items: center;
    align-items: center;
    margin: 0 auto 0 auto;
    padding: var(--SpacerMain) var(--spacerOut) 0 var(--spacerOut);
    padding: var(--SpacerHalf) 0 var(--SpacerHalf) 0;
    grid-column-gap: 0;
    grid-row-gap: 0; }
    footer section .container img, footer section .container picture {
      width: auto;
      height: calc(4 * var(--headerH));
      margin: var(--SpacerMain) auto 0 auto;
      padding: 0;
      transition: all .9s ease-out; }
    footer section .container h2 {
      padding: var(--SpacerHalf) 0 8px 0; }
    footer section .container h1, footer section .container h2, footer section .container h3, footer section .container h4, footer section .container p, footer section .container ul, footer section .container ol, footer section .container i {
      color: var(--FontWhite); }
    footer section .container address {
      width: auto;
      max-width: 1280px;
      font-style: normal;
      text-align: center;
      margin: var(--SpacerHalf) auto 0 auto;
      padding: 0; }
      footer section .container address a,
      footer section .container address a:link,
      footer section .container address a:visited {
        color: var(--FontWhite);
        padding: 0 var(--SpacerTxt);
        text-decoration: underline; }
      footer section .container address a:hover,
      footer section .container address a:active,
      footer section .container address a:focus {
        color: --ColorFirst;
        text-decoration: none; }
      footer section .container address acronym,
      footer section .container address abbr[title] {
        border-bottom: 2px dotted var(--White);
        text-decoration: none;
        cursor: help; }
      footer section .container address p, footer section .container address ul, footer section .container address li {
        color: var(--FontWhite);
        font-family: Ubuntu, "sans-serif";
        font-size: var(--FontSize);
        line-height: var(--LineHigh2);
        margin: 0; }
        footer section .container address p a,
        footer section .container address p a:link,
        footer section .container address p a:visited, footer section .container address ul a,
        footer section .container address ul a:link,
        footer section .container address ul a:visited, footer section .container address li a,
        footer section .container address li a:link,
        footer section .container address li a:visited {
          padding: 0; }
      footer section .container address p {
        padding: 0 0 var(--SpacerTxt) 0; }
      footer section .container address ul {
        padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
      footer section .container address ol {
        padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
      footer section .container address p:last-of-type {
        padding: 0; }
      @media screen and (max-width: 468px) {
        footer section .container address p, footer section .container address ul, footer section .container address li {
          line-height: var(--LineHigh3); } }
    footer section .container a i,
    footer section .container a:link i,
    footer section .container a:visited i {
      font-size: 120%;
      margin: var(--SpacerHalf) var(--SpacerElse) 0 var(--SpacerElse);
      text-decoration: none; }
    @media screen and (max-width: 468px) {
      footer section .container a i,
      footer section .container a:link i,
      footer section .container a:visited i {
        font-size: 140%;
        margin: var(--SpacerHalf) var(--SpacerElse2) 0 var(--SpacerElse2); } }
    footer section .container a:hover i,
    footer section .container a:active i,
    footer section .container a:focus i {
      color: var(--ColorSecond); }

/* ELSE
################################################################### */
/**
 * Featherlight - ultra slim jQuery lightbox
 * Version 1.7.14 - http://noelboss.github.io/featherlight/
 *
 * Copyright 2019, Noël Raoul Bossart (http://www.noelboss.com)
 * MIT Licensed.
**/
html.with-featherlight {
  overflow: hidden; }

.featherlight {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--Black);
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  display: none;
  position: fixed;
  z-index: 9999; }

.featherlight:last-of-type {
  background: rgba(0, 0, 0, 0.8); }

.featherlight:before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle; }

.featherlight .featherlight-content {
  width: 80%;
  min-width: 400px;
  max-width: 880px;
  max-height: 95%;
  background: var(--White);
  text-align: left;
  vertical-align: middle;
  padding: var(--SpacerMain);
  margin: 0 auto;
  white-space: normal;
  display: inline-block;
  overflow: auto;
  position: relative;
  cursor: auto;
  /* TYPO
  ##################### */
  /** Deutsch **/
  /** Für Schweiz und Frankreich **/ }
  @media screen and (max-width: 468px) {
    .featherlight .featherlight-content {
      min-width: 250px;
      max-width: 300px;
      max-height: 80%; } }
  .featherlight .featherlight-content h1, .featherlight .featherlight-content h2, .featherlight .featherlight-content h3, .featherlight .featherlight-content h4 {
    color: var(--FontBlack);
    font-family: Ubuntu, "sans-serif";
    line-height: var(--LineHigh1);
    font-weight: 600;
    margin: 0;
    padding: 0 0 var(--SpacerTxt) 0; }
  .featherlight .featherlight-content h3, .featherlight .featherlight-content h4 {
    color: var(--ColorFirst); }
  .featherlight .featherlight-content h1 {
    font-size: var(--FontSizeH1); }
  .featherlight .featherlight-content h2 {
    font-size: var(--FontSizeH2); }
  .featherlight .featherlight-content h3 {
    font-size: var(--FontSizeH3); }
  .featherlight .featherlight-content h4 {
    font-size: var(--FontSizeH4); }
  .featherlight .featherlight-content p, .featherlight .featherlight-content ul, .featherlight .featherlight-content ol, .featherlight .featherlight-content li {
    color: var(--FontBlack);
    font-family: Ubuntu, "sans-serif";
    font-size: var(--FontSize);
    line-height: var(--LineHigh2);
    margin: 0; }
  .featherlight .featherlight-content p {
    padding: 0 0 var(--SpacerTxt) 0; }
  .featherlight .featherlight-content ul {
    padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
  .featherlight .featherlight-content ol {
    padding: 0 0 var(--SpacerTxt) var(--SpacerHalf); }
  .featherlight .featherlight-content p:last-of-type {
    padding: 0; }
  .featherlight .featherlight-content a,
  .featherlight .featherlight-content a:link,
  .featherlight .featherlight-content a:visited {
    color: var(--ColorFirst);
    background-color: transparent;
    font-size: var(--FontSize);
    font-weight: 400;
    line-height: var(--LineHigh2);
    transition: all .3s;
    text-decoration: none; }
  .featherlight .featherlight-content a:hover,
  .featherlight .featherlight-content a:active,
  .featherlight .featherlight-content a:focus {
    color: var(--ColorSecond);
    transition: all .3s;
    text-decoration: none; }
  .featherlight .featherlight-content html[lang="de"] q {
    quotes: "»" "«"; }
  .featherlight .featherlight-content q:lang(de) {
    quotes: "»" "«"; }
  .featherlight .featherlight-content html[lang="ch"] q,
  .featherlight .featherlight-content html[lang="fr"] q,
  .featherlight .featherlight-content html[lang="en"] q {
    quotes: "«" "»"; }
  .featherlight .featherlight-content q:lang(ch),
  .featherlight .featherlight-content q:lang(fr),
  .featherlight .featherlight-content q:lang(en) {
    quotes: "«" "»"; }
  .featherlight .featherlight-content q {
    font-style: italic; }
  @media screen and (max-width: 768px) {
    .featherlight .featherlight-content p, .featherlight .featherlight-content li {
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto; } }

.featherlight .featherlight-inner {
  display: block; }

.featherlight link.featherlight-inner,
.featherlight script.featherlight-inner,
.featherlight style.featherlight-inner {
  display: none; }

.featherlight .featherlight-close-icon {
  top: var(--SpacerHalf);
  right: var(--SpacerHalf);
  width: 30px;
  color: var(--Black);
  background-color: transparent;
  font-family: Ubuntu, sans-serif;
  font-size: 4rem;
  line-height: 4rem;
  font-weight: 700;
  text-align: center;
  border: 0;
  margin: 0;
  padding: 0;
  transition: all .3s;
  cursor: pointer;
  position: absolute;
  z-index: 9999; }

.featherlight .featherlight-close-icon:hover,
.featherlight .featherlight-close-icon:active,
.featherlight .featherlight-close-icon:focus {
  color: var(--ColorFirst);
  transition: all .3s;
  transform: rotate(90deg); }

.featherlight .featherlight-close-icon::-moz-focus-inner {
  border: 0;
  padding: 0; }

.featherlight .featherlight-image {
  width: 100%; }

.featherlight-iframe .featherlight-content {
  border-bottom: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch; }

.featherlight iframe {
  border: 0; }

.featherlight * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

@media only screen and (max-width: 1024px) {
  .featherlight .featherlight-content {
    margin-left: 0;
    margin-right: 0;
    max-height: 80%;
    padding: 10px 10px 0;
    border-bottom: 10px solid transparent; } }
@media print {
  html.with-featherlight > * > :not(.featherlight) {
    display: none; } }
/* ANIMATION
####################################### */
@media screen and (min-width: 1440px) {
  @keyframes animLeft {
    0% {
      transform: translateX(-100px);
      opacity: 0; }
    100% {
      transform: translateX(0);
      opacity: 1; } }
  @keyframes animRight {
    0% {
      transform: translateX(100px);
      opacity: 0; }
    100% {
      transform: translateX(0);
      opacity: 1; } }
  @keyframes animCenter {
    0% {
      transform: translateY(50px);
      opacity: 0; }
    100% {
      transform: translateY(0);
      opacity: 1; } } }
#datenschutz h1,
#impressum h1 {
  font-size: var(--FontSizeH2); }

#datenschutz h2,
#impressum h2 {
  font-size: var(--FontSizeH3);
  padding: var(--SpacerTxt) 0; }

#datenschutz h3,
#impressum h3 {
  font-size: var(--FontSizeH4);
  padding: var(--SpacerTxt) 0; }

#datenschutz h4,
#impressum h4 {
  font-size: var(--FontSizeB); }