/* CSS Reset
----------------------------------------------------------------------------
---------------------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;

  /*Reset WebKit User Agent Stylesheet*/
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0;
  -webkit-margin-end: 0;
  -webkit-padding-start: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* Add Fonts
----------------------------------------------------------------------------
---------------------------------------------------------------------------- */

@font-face {
    font-family: 'DaxOT';
    src: url('../fonts/DaxOT-Medium.eot');
    src: url('../fonts/DaxOT-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DaxOT-Medium.woff2') format('woff2'),
        url('../fonts/DaxOT-Medium.woff') format('woff'),
        url('../fonts/DaxOT-Medium.ttf') format('truetype');
        
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DaxOT';
    src: url('../fonts/DaxOT-Bold.eot');
    src: url('../fonts/DaxOT-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DaxOT-Bold.woff2') format('woff2'),
        url('../fonts/DaxOT-Bold.woff') format('woff'),
        url('../fonts/DaxOT-Bold.ttf') format('truetype');
       
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DaxOT';
    src: url('../fonts/DaxOT-Regular.eot');
    src: url('../fonts/DaxOT-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DaxOT-Regular.woff2') format('woff2'),
        url('../fonts/DaxOT-Regular.woff') format('woff'),
        url('../fonts/DaxOT-Regular.ttf') format('truetype');
       
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DaxOT';
    src: url('../fonts/DaxOT-Light.eot');
    src: url('../fonts/DaxOT-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/DaxOT-Light.woff2') format('woff2'),
        url('../fonts/DaxOT-Light.woff') format('woff'),
        url('../fonts/DaxOT-Light.ttf') format('truetype');
    
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Basics
----------------------------------------------------------------------------
---------------------------------------------------------------------------- */

/* Global variables
-------------------------------------- */

:root {
  
  /* Colors */
  --ci-white: #fff;
  --ci-black: #070b0f;
  --ci-blue: #22384B;
  --ci-red: #C94C24;
  --ci-light-gray: #ECF0F4;
  --ci-gray: #7E8184;
  --ci-green: #7FFD6E;
  --ci-orange: rgb(255, 165, 0);
  --ci-yellow: rgb(255, 255, 0);

  --ci-red-light: rgba(201, 76, 36, .1);
  --ci-green-light: rgba(127, 253, 110, .1);
  --ci-orange-light: rgba(255, 165, 0, .1);
  --ci-yellow-light: rgba(255, 255, 0, .1);

  /* Fonts */
  --ci-font: 'DaxOT', Helvetica,  Arial, sans-serif;
  --ci-font-mono:'Noto Sans Mono', sans-serif;
  --ci-font-head:'P22 Nudgewink', sans-serif;

  /* Font-size */
  --fs-12: .75rem;
  --fs-14: .875rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-22: 1.375rem;
  --fs-24: 1.5rem;
  --fs-25: 1.5625rem;
  --fs-30: 1.875rem;
  --fs-35: 2.1875rem;
  --fs-45: 2.8125rem;
  --fs-50: 3.125rem;
  --fs-60: 3.75rem;
  --fs-90: 5.625rem;

  /* Transistions and other stuff */
  --ci-transition: ease all .3s;
}

@keyframes pulsingNumber {
  0% {
    transform:scaleZ(1);
    opacity:.45
  }
  50% {
    transform:scale3d(1.05,1.05,1.05);
    opacity:1
  }
  to {
    transform:scaleZ(1);
    opacity:.45
  }
}



/* Main Styles
-------------------------------------- */

html {
  position: relative;
  overflow-x: hidden;
  background: rgb(7,11,15);
  background: -moz-linear-gradient(135deg, rgba(7,11,15,1) 0%, rgba(34,56,75,1) 50%, rgba(201,76,36,1) 100%);
  background: -webkit-linear-gradient(135deg, rgba(7,11,15,1) 0%, rgba(34,56,75,1) 50%, rgba(201,76,36,1) 100%);
  background: linear-gradient(135deg, rgba(7,11,15,1) 0%, rgba(34,56,75,1) 50%, rgba(201,76,36,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#070b0f",endColorstr="#c94c24",GradientType=1); 
}

body {
  position: relative;
  padding: 20px 0 0;
  font-family: var(--ci-font);
  line-height: 1.25;
  font-weight: 300;
  color: var(--ci-light-gray);
}

body * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

small {
  font-size: 75%;
  line-height: 1.2;
  display: inline-block;
}

/* Typography
-------------------------------------- */

h1, .h1 {
  font-size: var(--fs-30);
  font-weight: 600;
  text-shadow: 0px 3px 7px rgba(0,0,0,.5);
  /* text-transform: uppercase;*/
}

h2, .h2 {
  font-size: var(--fs-20);
  /* text-transform: uppercase; */
  font-weight: 300;
}

h3, .h3 {
  font-size: var(--fs-18);
  font-weight: 300;
}

h4, .h4 {
  font-weight: 300;
  font-size: var(--fs-18);
  margin-bottom: 10px;
}

i {
  font-style: italic;
}

a {
  color: var(--ci-light-gray);
  cursor: pointer;
  text-decoration: none;
  position: relative;
}

a:not(.btn):not(.imgLink):after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--ci-light-gray);
  transition: var(--ci-transition);
}

a:not(.btn):not(.imgLink):hover:after {
  width: 10%;
}

p:not(:last-of-type) {
  margin-bottom: 1rem;
}

strong {
  font-weight: 500;
}

dl {
  margin-top: 1rem;
}

dl:not(:last-of-type),
dl:has( + p ) {
  margin-bottom: 1rem;
}

dt {
  font-weight: 600;
}

dd {
 margin-bottom: 10px;
 font-size: var(--fs-14);
}

/* Main Form Styles
-------------------------------------- */

input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  margin: 0;
  width: 0;
  height: 0;
}

input[type=radio].checkbox {
  background-color: rgba(236, 240, 244, .25);
  border-radius: 3px;
  border: 1px solid var(--ci-light-gray);
  display: inline-block;
  width: 22px;
  height: 22px;
}

input[type=radio].checkbox:hover,
label:hover input[type=radio].checkbox {
  background-color: rgba(236, 240, 244, .55);
  border-radius: 3px;
  border: 1px solid var(--ci-light-gray);
  display: inline-block;
  width: 22px;
  height: 22px;
}

input[type=radio].checkbox:checked{
  background-color: rgba(29, 255, 0, .45);
  border: 1px solid var(--ci-green)
}

input[type=radio].checkbox:checked:hover,
label:hover input[type=radio].checkbox:checked {
  background-color: rgba(29, 255, 0, .65);
  border: 1px solid var(--ci-green);
}


input[type="radio"].checkbox::before {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.15 14.15'%3E%3Cdefs%3E%3Cstyle%3E.greenCross%7Bfill:%237ffd6e;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cpath id='greenCross' class='greenCross' d='M14.15,1.43l-1.42-1.43-5.65,5.65L1.43,0,0,1.43l5.65,5.65L0,12.73l1.43,1.42,5.65-5.65,5.65,5.65,1.42-1.42-5.65-5.65L14.15,1.43Z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 14.5px;
  margin: 2.75px 0 0 2.75px;
  position: relative;
  z-index: 2;
  transform: scale(0);
  transition: var(--ci-transition);
}

input[type="radio"].checkbox:checked::before {
  transform: scale(1.0);
}

.radioGroup > span:not(.tooltip) {
  color: var(--ci-black);
  background-color: var(--ci-light-gray);
  padding: 5px 11px;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  transition: var(--ci-transition);
  border: 1px solid var(--ci-light-gray);
}

.radioGroup:first-of-type > span:not(.tooltip),
.radioGroup:nth-of-type(4) > span:not(.tooltip) { 
  min-width: 56px;
}

.radioGroup:first-of-type > span:not(.tooltip) {
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.radioGroup:nth-of-type(4) > span:not(.tooltip) {
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.radioGroup:hover > span:not(.tooltip) {
  color: var(--ci-white);
  background-color: rgba(236, 240, 244, .25);
  cursor: pointer;
}

.radioGroup > input[type="radio"]:checked + span:not(.tooltip) {
  background-color: rgba(29, 255, 0, .45);
  border: 1px solid var(--ci-green);
  color: #fff;
}

.radioGroup > .groupItemAddOn + span:not(.tooltip) {
  width: 100%;
  border-radius: 3px;
}

.radioGroup .tooltip {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0) scale(0);
  opacity: 0;
  transition: var(--ci-transition);
  z-index: 0;
}

.radioGroup:hover .tooltip {
  opacity: 1;
  transform: translate(-50%, calc(100% + 5px)) scale(1.0);
}

.vbmSelectWrap {
  position: relative;
  display: block;
}

.vbmSelectWrap:after {
  position: absolute;
  content: "";
  top: 50%;
  right: 10px;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-color: var(--ci-light-gray) transparent transparent transparent;
  transform: translateY(-25%);
}

.vbmSelectWrap select {
  webkit-appearance: none;
  appearance: none;
}

.vbmSelectWrap .vbmSelect {
  color: var(--ci-light-gray);
  background-color: rgba(236, 240, 244, .25);
  border-radius: 3px;
  padding: 7px 30px 7px 15px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  display: block;
} 

.vbmSelectWrap .vbmSelect:hover {
  cursor: pointer;
}

.vbmSelectWrap .vbmSelect option {
  color: var(--ci-black);
}

/* Helper Classes
-------------------------------------- */

.tooltip {
  font-size: var(--fs-12);
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 600;
}

.autoWidth.autoWidth {
  width: auto;
  max-width: fit-content;
}

.width1024.width1024 {
  width: 100%;
  max-width: calc(1094px + 70px);
}

.text-center {
  text-align: center;
}

.subtitle{
  margin-bottom: 40px;
  text-transform: none;
  font-weight: 300;
}

.smallText {
  font-size: var(--fs-14);
}

.twoColText {
  column-count: 2;
  text-align: justify;
  gap: 25px;
}

.readMore {
  display: inline-block;
}

.hidden.hidden,
.homeMoreText  {
  display: none;
}

.infoBox {
  background-color: rgba(236, 240, 244, .4);
  border-radius: 5px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  text-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
  padding: 30px;
  position: relative;
  text-align: center;
}

.bgImage{
  background-image: url('../../images/background-3.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
   transform: translate3d(0,0,0);
  position: fixed;
  top:0;
  width: 100%;
  height: 100vh;
  z-index: 0;
  mix-blend-mode: luminosity;
  background-attachment: fixed;
  opacity: .4;

  img {
    object-fit: cover;
    object-position: center center;
    width: 120%;
    height: 100%;
    opacity: .3;
  }
}

.EinsteigerColor {
  color: var(--ci-red);
  border-color: var(--ci-red);
}

.AmateurColor {
  color: var(--ci-orange);
  border-color: var(--ci-orange);
}

.FortgeschrittenColor {
  color: var(--ci-yellow);
  border-color: var(--ci-yellow);
}

.ExperteColor {
  color: var(--ci-green);
  border-color: var(--ci-green);
}

.selectSectionItem.Einsteiger .cls-2,
.resultSubsectionItem.Einsteiger .cls-2 {
  stroke: var(--ci-red);
}

.selectSectionItem.Amateur .cls-2,
.resultSubsectionItem.Amateur .cls-2   {
  stroke: var(--ci-orange);
}

.selectSectionItem.Fortgeschritten .cls-2,
.resultSubsectionItem.Fortgeschritten .cls-2 {
  stroke: var(--ci-yellow);
}

.selectSectionItem.Experte .cls-2,
.resultSubsectionItem.Experte .cls-2 {
  stroke: var(--ci-green);
}

.selectSectionItem.Einsteiger .cls-3,
.resultSubsectionItem.Einsteiger .cls-3 {
  fill: var(--ci-red);
}

.selectSectionItem.Amateur .cls-3,
.resultSubsectionItem.Amateur .cls-3 {
  fill: var(--ci-orange);
}

.selectSectionItem.Fortgeschritten .cls-3,
.resultSubsectionItem.Fortgeschritten .cls-3 {
  fill: var(--ci-yellow);
}

.selectSectionItem.Experte .cls-3,
.resultSubsectionItem.Experte .cls-3 {
  fill: var(--ci-green);
}

.selectSectionItem.Einsteiger .cls-1,
.resultSubsectionItem.Einsteiger .cls-1 {
  fill: var(--ci-red-light);
}

.selectSectionItem.Amateur .cls-1,
.resultSubsectionItem.Amateur .cls-1 {
  fill: var(--ci-orange-light);
}

.selectSectionItem.Fortgeschritten .cls-1,
.resultSubsectionItem.Fortgeschritten .cls-1 {
  fill: var(--ci-yellow-light);
}

.selectSectionItem.Experte .cls-1,
.resultSubsectionItem.Experte .cls-1 {
  fill: var(--ci-green-light);
}

/* Buttons
-------------------------- */

.btn {
  background-color: rgba(236, 240, 244, .25);
  border-radius: 50px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  display: inline-block;
}

.btn:hover {
  cursor: pointer;
}

.btnShiny {
  overflow: hidden;
  position: relative;
}

.btnShiny:before {
  background: #fff;
  content: "";
  height: 155px;
  left: -75px;
  opacity: .2;
  position: absolute;
  top: -50px;
  transform: rotate(35deg);
  transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
  width: 50px;
  z-index: -10;
}

.btnShiny:hover:before {
  left: 120%;
  transition: all 1000ms cubic-bezier(0.19, 1, 0.22, 1);
}

.btnHorizont {
  padding: 12px 24px 12px 35px;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
}

.btnHorizont:after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20.94 13.98'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23fff;stroke-width:0px;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Icon_ionic-ios-arrow-round-forward-2' class='cls-1' d='M13.35.27c-.37.37-.37.97,0,1.34l4.43,4.43H.92C.39,6.06-.02,6.5,0,7.02c.02.5.42.9.92.92h16.84l-4.43,4.43c-.36.37-.36.97,0,1.34.37.37.97.36,1.33,0l6-6.04h0c.08-.09.15-.19.2-.3.05-.11.07-.24.07-.36,0-.25-.1-.49-.27-.66L14.67.29c-.35-.37-.94-.39-1.31-.04,0,0-.01.01-.02.02Z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 21px;
  margin-left: 20px;
  filter: drop-shadow(-1px 2px 1px rgba(0, 0, 0, 0.3));
}

.btnVertical {
  max-width: 35px;
  padding: 11px 10px;
}

.btnVertical svg {
  width: 10px;
}

.btnSmall {
  padding: 7px 15px 7px;
  line-height: 0;
  font-size: var(--fs-14);
  line-height: 1;
  font-weight: 400;
}

.btnSmall:after {
  max-width: 12.12px;
  margin: 0;
}

.btnSmallText:after {
  margin-left: 10px;
}

.prevBtn svg {
  transform: rotate(180deg);
}

.btnStepDone,
.disabled {
  background-color: rgba(29, 255, 0, .45);
  border: 1px solid var(--ci-green);
}

.btnStepDone:after,
.disabled:after {
  content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Ebene_1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15.26 11.05'%3E%3Cdefs%3E%3Cstyle%3E.fillCheckmark%7Bfill:none;stroke:%23ECF0F4;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8px;%7D%3C/style%3E%3C/defs%3E%3Cpath id='Icon_feather-check' class='fillCheckmark' d='M14.36.9L5.11,10.15.9,5.95'/%3E%3C/svg%3E");
}

.btnSliderNav {
  padding: 5px 15px;
}

.btnSliderNav:after {
  margin-left: 10px;
}

.disabled:hover {
  cursor: not-allowed;
}

.infoButton {
  font-size: var(--fs-20);
  font-weight: 600;
  width: 35px;
  height: 35px;
  border: 3px solid var(--ci-light-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: scale(1.0);
  transition: var(--ci-transition);
}

.infoButton:hover {
  cursor: pointer;
  transform: scale(1.1);
}

.infoPopUp {
  position: fixed;
  z-index: 999999;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, .85);
  top: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgb(7,11,15);
  background: -moz-linear-gradient(135deg, rgb(7, 11, 15) 0%, rgb(34, 56, 75) 50%, rgb(201, 76, 36) 100%);
  background: -webkit-linear-gradient(135deg, rgba(7,11,15,.95) 0%, rgba(34,56,75,.95) 50%, rgba(201,76,36,.95) 100%);
  background: linear-gradient(135deg, rgba(7,11,15,.95) 0%, rgba(34,56,75,.95) 50%, rgba(201,76,36,.95) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#070b0f",endColorstr="#c94c24",GradientType=.95);
}

.infoPopUpContent {
  max-width: 768px;
  background-color: rgba(236, 240, 244, .4);
  border-radius: 5px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  text-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
  padding: 30px;
  position: relative;
  text-align: center;
  margin: 58px 5%;
}

.infoPopUpContent .close {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, calc(-100% - 15px));
  width: 28px;
  height: 28px;
  background-color: rgba(236, 240, 244, .4);
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
}

.readMoreHome {
  transition: var(--ci-transition);
  display: inline-block;
}

#printPDFbtn {
  margin-top: 5px;
}


/* Main Index Page | views/pages/home.php
----------------------------------------------------------------------------
---------------------------------------------------------------------------- */

/* ProgressBar Styles
-------------------------------------- */
.custom-steps {
  margin: 0;
  padding: 0;
  display: none;
  overflow: hidden;
  align-items: center;
  flex-wrap: wrap;
}

.custom-steps li {
  text-decoration: none;
}

.custom-steps li.customStepsNumber a {
  list-style: none;
  flex: 1 1 auto;
  cursor: pointer;
  display: block;
  color: var(--ci-gray);
  text-decoration: none;
  border: 2px solid var(--ci-gray);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: var(--fs-20);
  text-align: center;
  line-height: 1.2;
}

.custom-steps li.customStepsNumber a:after {
  display: none;
}

.custom-steps li.customStepsNumber:not(:last-of-type) {
  margin-right: 5px;
}

.custom-steps li.customStepsNumber.active a {
  color: var(--ci-light-gray);
  border: 3px solid var(--ci-light-gray);
  width: 44px;
  height: 44px;
  font-size: var(--fs-30);
  display: inline-block;
  animation: pulsingNumber 2s cubic-bezier(.4,0,.6,1) infinite;
  margin: 5px 0 ;
}

.custom-steps li.customStepsNumber.done a {
  border-color: var(--ci-light-gray);
  color: var(--ci-light-gray);
}

.custom-steps li.customStepsProgress {
  width: 45px;
  display: flex;
  margin-right: 5px;
}

.customStepsProgress .progressBar::-moz-progress-bar,
.customStepsProgress .progressBar::-webkit-progress-value  {
  background: var(--ci-red);
}

.customStepsProgress .progressBar {
  width: 100%;
  height: 8px;
  background-color: var(--ci-gray);
  border: none;
  color: var(--ci-red);
}


/* Header styles
-------------------------------------- */

.appHeader {
  width: 100%;
  z-index: 999;
  left: 0;
  right: 0;
  padding: 0 35px;
  display: flex;
  justify-content: space-between;
  min-height: 50px;
  align-self: flex-start;
  margin-bottom: 40px;
}

.appHeader > div { 
  flex: 1 1 33.333%;
}

.appHeader .topLeft {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  order: 1;
}

.appHeader .topMid {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0;
  text-align: center;
  order: 3;
}

.appHeader .topRight {
  display: flex;
  justify-content: center;
  align-items: center;
  order: 2;
}

.appHeader .topRight svg {
  width: 100%;
  max-width: 190px;
}

.appHeaderPoll {
  flex-wrap: wrap;
}

.appHeaderPoll > div { 
  flex: 1 1 auto;
}

.appHeaderPoll .topLeft {
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  order: 2;
}

.appHeaderPoll .topMid {
  flex: 1 1 100%;
  align-items: center;
  margin-top: 15px;
}

.appHeaderPoll .topRight {
  flex: 1 1 100%;
  margin-bottom: 10px;
  justify-content: center;
  order: 1;
}

.appHeaderPoll .pageTitle {
  display: none;
}

.dateYear {
  font-weight: 400;
  font-size: var(--fs-20);
}

.pageTitle {
  /* 
  text-transform: uppercase;
  */
  
}


/* Main Layout Styles
-------------------------------------- */

.appWrapper {
  position: relative;
  min-height: calc(100vh - 20px);
  display: flex;
  flex-flow: column;
  flex-wrap: wrap;
  align-items: center;
  z-index: 1;
}

/* Main Content | Hero Section styles - Home
-------------------------------------- */

.mainContent {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0;
  transition: var(--ci-transition);
}

.mainContent .prevBtn {
  position: absolute;
  top: -57%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.heroSectioMid {
  width: 100%;
  max-width: 630px;
  padding: 0 35px;
  margin-bottom: 55px;
  position: relative;
}

.homeIntro {
  max-width: 850px;
}

.pageDescription {
  margin-bottom: 40px;
}

.pageDescription * {
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

#homeContent .pageAction {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}


.stepsIconRow {
  min-height: 50px;
  margin-bottom: 1.8518518518518519vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#stepsNumberHero {

  #error-svg {
    max-width: 88px;
  }

  .circular-chart {
    display: block;
    /*
    margin: 0 auto 1.8518518518518519vh;
    */
    max-width: 50px;
    width: 50px;
  }

  .circle-bg {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
  }

  .circle {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: ;
    transition: var(--ci-transition);
    /*animation: progress 1s ease-out forwards; */
  }

  .circular-chart.red .circle {
    stroke: #7FFD6E;
  }

}

.stepsNumberText {
  font-size: var(--fs-30);
  width: 50px;
  height: 50px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}


/*
.stepsNumberText {
  font-size: var(--fs-30);
  width: 50px;
  height: 50px;
  border: 3px solid var(--ci-light-gray);
  border-radius: 50%;
  margin: 0 auto 1.8518518518518519vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  line-height: 1;
}

*/
.stepsNumberText small {
  font-size: var(--fs-18);
}

/* Main Content | Formular Section styles
---------------------------------------------------- */

@keyframes scaleUp {
  0% { opacity:0; }
  100% { opacity:1; }
}

.questionHolder {
  margin-top: 2vh;
  /* margin-top: 6.481481481481482vh;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.question {
  margin-bottom: 30px;
}

.question > small {
  text-transform: none;
  font-size: 60%;
  font-weight: 300;
  color: rgb(255, 255, 0);
  /*
  transform: scale(0);
  */
  opacity: 0;
  margin-top: 10px;
}

.question > small.showSub {
  transform: scale(1.0);
  opacity: 0;
}

.answersWrapper {
  display: grid; 
  grid-template-columns: repeat(2, auto); 
  grid-template-rows: auto; 
  gap: 20px 25px; 
}

.answerSectionWrapper.active .question small {
  animation-name: scaleUp;
  animation-duration: 1s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

.singleAnswer .radiolabel {
  display: flex;
  gap: 10px;
  justify-content: flex-start;
  align-items: center;
  line-height: 1;
}

.errortext {
  position: absolute;
  bottom: -40px;
  width: 100%;
  text-align: center;
}

.errortext > .error {
  padding: 7px 10px;
  background-color: rgba(201, 76, 36, .55);
  border-radius: 3px;
  border: 1px solid var(--ci-red);
  display: inline-block;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
  box-shadow: -2px 2px 2px rgba(0, 0, 0, .3);
}

/* Main Content | Step 2 Selt Section Items
------------------------------------------------------ */


.selectSection {
  width: 100%;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 0;
  row-gap: 40px;
}

.selectSectionItem {
  display: flex;
  justify-content: center;
  width: 165px;
  position: relative;
}

.selectSectionItemContent {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 165px;
}

.selctionItemIcon {
  margin-bottom: 2.314814814814815vh;
}

.selctionItemTitel {
  font-size: 1rem;
}

.selctionItemTitel,
.selctionItemSteps {
  margin-bottom:  1.3888888888888888vh;
}

.selctionItemSteps {
  font-size: var(--fs-12);
}

.nestedStep {
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.nestedStep .pageAction {
  max-width: 630px;
}

/* Main Content | Step 2 PollSection Styles
------------------------------------------------------ */

.drawCom, .drawDigi, .drawSecu,
.drawProb, .drawKi {
  opacity: 0;
}

.sectionIcon {
  display: none;
  height: 92px;
  /*
  width: 70px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  */
}

.sectionIcon svg {
  width: 100%;
  height: 92px;
}

.answerSectionWrapper {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 0;
}

.questionSubhead {
  margin-bottom: 10px;
}

.softwareHead {
  background-color: rgba(236, 240, 244, .25);
  border-radius: 5px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  text-decoration: none;
  text-align: center;
  display: inline-block;
  padding: 7px 15px 8px;
}

.sectionAnswer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: relative;
  z-index: 1;
  gap: 2px;
  margin-bottom: 30px;
}

.sectionAnswer > p {
  display: inline-block;
  width: 100%;
}

.sectionAnswer.radioGroupAddOn {
  display: grid; 
  grid-template-columns: auto auto auto auto; 
  grid-template-rows: auto auto; 
  gap: 2; 
  grid-template-areas: 
    "no miniNo minYes yes"
    "addOn addOn addOn addOn"; 
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center; 
}
.singleAnswer .radioGroup:nth-of-type(1) { grid-area: no; }
.singleAnswer .radioGroup:nth-of-type(2) { grid-area: miniNo; }
.singleAnswer .radioGroup:nth-of-type(3) { grid-area: minYes; }
.singleAnswer .radioGroup:nth-of-type(4) { grid-area: yes; }
.singleAnswer .radioGroup:nth-of-type(5) { grid-area: addOn; }

.singleAnswer .radioGroup {
  justify-content: center;
  text-align: center;
  gap: 0;
}


/* Main Content | Step 3 Form Submited
------------------------------------------------------ */
.actionAfterSubmit {
  margin-top: 6.481481481481482vh;
}

.subhead {
  margin-bottom: 30px;
}

.userPoints {
  text-align: center;
  display: flex;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.8518518518518519vh;
}


/* Main Content | Step 4 Result Section
------------------------------------------------------ */

.resultSection .pageDescription {
  text-transform: none;
  margin-bottom: 0;
}

.resultSection .selectSectionItem {
  cursor: pointer;
  max-width: 96px;
  transition: var(--ci-transition);
  transform: scale(1.0);
}

.resultSection .selectSectionItem:hover,
.resultSection .selectSectionItem.active {
  transform: scale(1.2);
}

.resultSection .selctionItemTitel,
.resultSection .selectSectionItem:after {
  display: none;
}

.resultsPrefix {
  margin-bottom: 3vh;
}

.resultsSlider {
  max-width: 960px;
  margin: 4.62962962962963vh auto;
}

.resultsSliderNav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.resultsSliderNavItem {
  flex: 0 0 calc(20% - 15px);
  display: flex;
  align-items: center;
}

.resultsSliderNavItem > *{
  width: 100%;
  display: inline-block;
}

.userPointsNumber {
  font-size: 45px;
  display: flex;
  width: 100px;
  height: 100px;
  border: 5px solid;
  border-radius: 50%;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-weight: 400;
}

.resultsSubsections {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  margin-top: 10px;
}

.resultsSubsections > div {
  flex: .3 1 auto;
}

.resultSubsectionItem {
  text-align: left;
  background-color: rgba(236, 240, 244, .25);
  border-radius: 5px;
  border: 1px solid var(--ci-light-gray);
  box-shadow: inset -4px 4px 1px rgba(0, 0, 0, .3);
  padding: 7.5px 15px;
  text-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
}

.resultSectionItemTitleWrap {
  display: inline-block;
  width: 100%;
  border-bottom: 1px solid var(--ci-light-gray);
  padding-bottom: 5px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.resultSectionItemTitle {
  margin: 0;
}

.resultSectionItemTitleWrap .expertiseIcon svg {
  max-width: 22px;
  filter: drop-shadow(-1px 2px 1px rgba(0, 0, 0, 0.3));
}

.resultSubsectionContent {
  display: flex;
  flex-flow: column;
  gap: 5px;

  font-size: var(--fs-14);
}

.resultSectionItemTitle:after {
  content: '';
  display: block;
  width: 100%;
  height: 1;
  background-color: var(--ci-light-gray);
  box-shadow: -1px 2px 1px rgba(0, 0, 0, .3);
}

.resultSubsectionPart{
  display: flex;
  justify-content: space-between;
}

.resultSubsectionHints {
  flex-wrap: wrap;
  margin-top: 15px;
  align-items: center;
}

.resultSubLabel {
  display: inline-block;
}

.resultSubValue {
  display: inline-block;
  font-weight: 500;
}

.resultSubsectionHints .resultSubLabel {
  font-weight: 500;
  width: 100%;
  margin-bottom: 5px;
}

.resultHintItem {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.expertiseIcon svg {
  width: 28px;
}

/* App Footer Styles
------------------------------------------------------
------------------------------------------------------ */
.appFooter {
  width: 100%;
  align-self: flex-end;
  margin-top: auto;
}

.appFooterButtons,
.appFooterRect {
  display: flex;
  justify-content: center;
}

.appFooterButtons {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 35px;
}

.appFooterRect {
  position: relative;
  z-index: 0;
}

.appFooterRect svg {
  width: 100%;
}
.appFooterNotes {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  padding: 25px 35px;
  display: flex;
  justify-content: flex-end;
  flex-flow: column;
  text-align: right;
  display: none;
}

/* App Footer Styles
------------------------------------------------------
------------------------------------------------------ */

.page-break {

}

#printPDFWrapp {
  position: fixed;
  top: 0;
  left: -170mm;
}

#printPDF {
  background-color: #fff;
  padding: 0;
  color: var(--ci-black);
  width: 170mm;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  margin: 0 auto;
}

#printPDF {
  font-family: 'Helvetica', Arial, sans-serif !important;
  color: #000 !important;
  letter-spacing: 0.01px;
}

#printPDF h3,
#printPDF h4,
#printPDF h5 {
  font-weight: bold !important;
}

#printPDF h3 {
  margin-bottom: 20px;
  font-size: 20px;
}

#printPDF h4 {
  font-size: 15px;
}

#printPDF h5 {
  font-size: 11px;
}

#printPDF strong {
  font-weight: bold;
}

#printPDF small {
  font-size: 8px;
}

#printPDF p,
#printPDF table {
  font-size: 10px;
}

#printPDF p {
  margin-bottom: 15px;
}

#printPDF table {
  width: 100%;
}

#printPDF td,
#printPDF th {
  font-size: 10px;
}

.printAnswerTbl {
  margin: 10px 0 30px 0;
}

.printAnswerTbl thead tr:first-of-type {
  background-color: var(--ci-red);
}

.printAnswerTbl th {
  text-align: left;
  font-weight: bold;
  padding: 5px;
  color: var(--ci-white);
}

.printAnswerTbl th:first-of-type {
  width: 75%;
}

.printAnswerTbl tbody tr:nth-child(odd) {
  background-color: var(--ci-light-gray);
}

.printAnswerTbl .firsCol {
  text-align: left;
}

.printAnswerTbl .scndCol {
  text-align: right;
}

.printAnswerTbl tbody tr td {
  padding: 5px;
}

.printAnswerTbl tbody tr td:first-of-type {
  width: 75%;
}

#printPDF .resultSubsectionItem * {
  font-size: 10px;
}

#printPDF .resultSubsectionItem {
  background-color: var(--ci-light-gray);
  box-shadow: none;
  text-shadow: none;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 30px;
}

#printPDF .resultSectionItemTitleWrap {
  border-bottom-color: var(--ci-gray);
  align-items: center;
}

#printPDF .resultSubsectionHints .resultSubLabel {
  font-weight: bold;
}

#printPDF .resultSubValue {
  color: var(--ci-black);
}

#printPDF .resultSectionItemTitleWrap .expertiseIcon svg {
  filter: unset;
}

#printPDF .resultSubsectionItem.Einsteiger .cls-1,
#printPDF .resultSubsectionItem.Amateur .cls-1,
#printPDF .resultSubsectionItem.Fortgeschritten .cls-1,
#printPDF .resultSubsectionItem.Experte .cls-1 {
  fill: none;
}

#printPDF .resultSubsectionItem.Einsteiger .cls-2,
#printPDF .resultSubsectionItem.Fortgeschritten .cls-2,
#printPDF .resultSubsectionItem.Amateur .cls-2,
#printPDF .resultSubsectionItem.Experte .cls-2 {
  stroke: var(--ci-black);
}

#printPDF .resultSubsectionItem.Einsteiger .cls-3,
#printPDF .resultSubsectionItem.Amateur .cls-3,
#printPDF .resultSubsectionItem.Fortgeschritten .cls-3,
#printPDF .resultSubsectionItem.Experte .cls-3 {
  fill: var(--ci-black);
}