/* Fonts */
/* roboto-condensed-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: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* roboto-condensed-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: 'Roboto Condensed';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/roboto-condensed-v25-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-pro-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: 'Crimson Pro';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/crimson-pro-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
/* crimson-pro-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: 'Crimson Pro';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/crimson-pro-v23-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
  
:root {
    --textcolor     : #444444;
    --brand00       : #384c6d;
    --brand01       : #b3c3d8;
    --brand02       : #dfe7ef;
    --brand03       : #b5525b; 
    --brand04       : #d5ad61;
    --gray00        : #444444;
    --gray01        : #666666;
    --gray02        : #CCCCCC;
    --gray03        : #F6F6F6;
    --positiv       : #008368;
    --negativ       : #cc6944;
    --transition    : all 0.3s ease-in-out;
    --icon-info     : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 49.8 100" style="enable-background:new 0 0 49.8 100;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><g><path class="st0" d="M29.1,30.5c-8.2,0-14.7-6.6-14.7-14.7S21,1.1,29.1,1.1c8.2,0,14.7,6.7,14.7,14.7S37.3,30.5,29.1,30.5z M29.1,5.7C23.5,5.7,19,10.2,19,15.8s4.5,10.1,10.1,10.1s10.1-4.5,10.1-10.1S34.7,5.7,29.1,5.7z"/><path class="st0" d="M17.7,99.7c-1.8,0-3.7-0.4-5.4-1.6c-4.9-3.3-5-7.4-4.5-12.1c0.5-5,5.6-26.6,6.9-31.6c-0.7,0.5-1.3,0.9-1.9,1.3C9.1,58.3,6.6,60,4,57.4c-1.1-1.1-1.9-2.5-2.5-3.6c-0.1-0.2-0.3-0.5-0.4-0.7c-0.5-0.8-0.6-1.7-0.3-2.7c0.2-0.6,0.7-2.5,5.9-5.6c5.4-3.7,14-8.8,20.3-11.2c5.9-2.3,10.3-2.2,13.2,0.2c2.7,2.3,3.1,6.1,2.6,8.9c-1,5.2-7.6,32.8-8,34.2c-0.1,0.2-0.1,0.4-0.1,0.6c0.7-0.5,1.3-1,1.9-1.3c1-0.7,1.7-1.2,2.9-2.1c2.5-1.9,5.3-2,7.5-0.1s2.6,3.8,2.6,5.1c-0.1,2-1.2,3.9-3.4,5.6c-0.8,0.6-16.7,10.7-19.3,12.2C24.5,98.2,21.2,99.7,17.7,99.7z M17.8,50.7c0.9,0.6,2.8,1.3,1.7,5.7c-1.6,6.3-5.9,26.8-6.3,31.1c-0.4,4.6,0,5.6,2.1,6.9c2.5,1.7,7-0.7,8.4-1.5c2.8-1.6,18.8-11.8,19.6-12.4c0.6-0.4,1.4-0.9,1.5-1.1c0.5-0.4,0.5-1.5,0.3-1.6c0,0-0.4-0.8-1.7-0.3C41.9,78.6,41,79,40,79.7c-0.6,0.4-1.8,1.1-2.7,1.7c-3,1.8-4.5,2.3-6.3,1.6c-0.9-0.7-2.7-2.4-1.2-7.6c0.4-1.5,6.3-28.6,7.4-33.9c0.2-1.3,0.1-3.1-0.6-3.7c-0.8-0.7-3-1.8-7.5-0.1c-5.9,2.2-14.7,7-20.2,10.9L6.8,50c-0.9,0.5-1.1,0.9-1.1,1.6c0.1,0.2,0.9,2.8,2,2.5c0.9-0.5,2.4-1.2,3.1-1.7c0.6-0.4,1.9-1,2.7-1.5C15,49.9,16.8,50.1,17.8,50.7z M43.3,78.6L43.3,78.6L43.3,78.6z"/></g></svg>');
    --icon-warning  : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 68.5 100" style="enable-background:new 0 0 68.5 100;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><path class="st0" d="M5.8,42.2c-1.6-0.3-3.1-0.4-4.5-0.4c-0.2,0-0.5,0-0.6,0.1v0.3v24.2c0,24.3,17.2,33.4,28,33.4h15.7c5.5,0,11.3-2.4,15.8-6.7c4.8-4.6,7.5-10.6,7.5-16.8c0-5.6,0-12.8-0.1-18.3c0-2.9,0-5.3,0-6.8c0-0.3,0.1-0.7,0.1-1.1V39.7c0-4.7-3.8-8.6-8.6-8.6h-1c-1.2,0-2.3,0.2-3.3,0.7c-1.3-3-4.3-5.1-7.8-5.1h-1c-1.4,0-2.7,0.4-3.9,1c-1.5-2.4-4.2-3.9-7.2-3.9h-1c-0.9,0-1.8,0.1-2.6,0.4V8.8c0-4.7-3.8-8.6-8.6-8.6h-1c-4.7,0-8.6,3.8-8.6,8.6v36.1c-1.8-1.2-4.1-2-6.3-2.5L5.8,42.2z M55.6,39.7c0-1.4,1.2-2.6,2.6-2.6h1c1.4,0,2.6,1.1,2.6,2.6v10.4c0,0.1,0,0.1,0,0.2h-0.1c0,0.1,0,0.3,0,0.4c-0.3,1.1-1.3,2-2.5,2h-1c-1.4,0-2.6-1.2-2.6-2.6V39.7z M43.4,49.3v-14c0-1.4,1.2-2.6,2.6-2.6h1c1.4,0,2.6,1.1,2.6,2.6v4.5v10.4v2.3c0,1.4-1.2,2.6-2.6,2.6h-1c-1.4,0-2.6-1.2-2.6-2.6V49.3z M31.2,32.3c0-1.4,1.1-2.6,2.6-2.6h1c1.4,0,2.6,1.1,2.6,2.6v3v14c0,1.4-1.1,2.6-2.6,2.6h-1c-1.4,0-2.6-1.2-2.6-2.6C31.2,49.3,31.2,32.3,31.2,32.3z M44.5,93.8H28.8c-8.5,0-22-7.4-22-27.4V48.2c1.3,0.4,2.6,1.2,3.8,2.2c1.4,1.2,2.2,2.6,2.5,4v11.5l0,0l-0.1,3h3.1c7.1,0,14.6,2.7,18.5,6.7c1.9,2,2.9,4.1,2.8,6.3c0,1.7,1.3,3,2.9,3.1c0,0,0,0,0.1,0c1.6,0,3-1.3,3-2.9c0.1-3.9-1.5-7.5-4.6-10.6c-4.5-4.5-12-7.7-19.7-8.3c0-1.7,0-4.3,0-7.6c0-0.5,0-1-0.1-1.5V8.8c0-1.4,1.2-2.6,2.6-2.6h1c1.4,0,2.6,1.1,2.6,2.6v23.5v17c0,4.7,3.8,8.6,8.6,8.6h1c1.4,0,2.7-0.3,3.9-0.9c1.5,2.4,4.2,4,7.3,4h1c2.8,0,5.3-1.4,6.8-3.4c1.3,0.7,2.7,1.2,4.3,1.2h1c0.9,0,1.7-0.1,2.5-0.4c0,5.5,0.1,12.5,0.1,18C61.8,84.4,54.2,93.8,44.5,93.8z"/></svg>');
    --icon-tipp     : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 63.7 96.2" style="enable-background:new 0 0 63.7 96.2;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><path class="st0" d="M43.3,82.8l-20.2,3.7c-1.5,0.3-3-0.7-3.3-2.3l0,0c-0.3-1.5,0.7-3,2.3-3.3l20.2-3.7c1.5-0.3,3,0.7,3.3,2.3l0,0C45.8,81,44.8,82.5,43.3,82.8z"/><path class="st0" d="M38.5,93.9L29,95.6c-1.5,0.3-3-0.7-3.3-2.3l0,0c-0.3-1.5,0.7-3,2.3-3.3l9.5-1.7c1.5-0.3,3,0.7,3.3,2.3l0,0C41.1,92.1,40,93.6,38.5,93.9z"/><path class="st0" d="M30.9,0.5C8.7,0.5,0.6,18.6,0.6,30.8c0,9.8,3.5,15,7.2,20.6c2.4,3.6,4.9,7.3,7,12.9c0.6,1.5,2.3,2.3,3.9,1.7c1.5-0.6,2.3-2.3,1.7-3.9c-2.4-6.2-5.1-10.4-7.6-14c-3.6-5.4-6.2-9.3-6.2-17.2c0-8.4,5.1-24.4,24.3-24.4c18,0,26.1,11.9,26.2,23.7c0.1,9.9-4.2,15.4-7,19.1c-0.6,0.8-1.1,1.5-1.6,2.2c-2.5,3.8-5.3,11.1-6.3,15.1L19,70.7c-1.5,0.3-2.5,1.7-2.3,3.3c0.3,1.5,1.7,2.5,3.3,2.3l24.7-4.5c0.3-0.1,0.6-0.2,0.9-0.3c1.1-0.3,2-1.3,2.2-2.5c0.3-2.1,3.3-10.5,5.8-14.2c0.3-0.5,0.8-1.1,1.3-1.8c3.1-4.1,8.3-10.9,8.2-22.8C63,15.8,52.9,0.5,30.9,0.5z"/></svg>');
    --icon-reload   : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><path class="st0" d="M2,2v7h7L5.8,5.8c0.4-0.4,0.8-0.7,1.3-1c2.9-1.6,6.5-0.6,8.2,2.3s0.6,6.5-2.3,8.2S6.4,15.9,4.8,13H2.6c0.4,1,1,1.9,1.8,2.7 c3.1,3.1,8.2,3.1,11.3,0s3.1-8.2,0-11.3s-8.2-3.1-11.3,0L2,2z"/></svg>');
    --icon-tree     : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 550.3 559.6" style="enable-background:new 0 0 550.3 559.6;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><path class="st0" d="M521.4,355.3h-70.3V277c0-13.8-11.2-25-25-25h-125v-48.6h69.9c14.2,0,25.7-11.5,25.7-25.7V27c0-14.2-11.5-25.7-25.7-25.7H179.9c-14.2,0-25.7,11.5-25.7,25.7v150.7c0,14.2,11.5,25.7,25.7,25.7h71.3V252h-125c-13.8,0-25,11.2-25,25v78.3H29.6c-14.2,0-25.7,11.5-25.7,25.7v150.7c0,14.2,11.5,25.7,25.7,25.7h66.5c1.7,0.1,3.4,0.2,5.1,0.2h50c1.7,0,3.4-0.1,5.1-0.2h64.5c14.2,0,25.7-11.5,25.7-25.7V380.9c0-14.2-11.5-25.7-25.7-25.7h-69.6V302h250v53.3h-70.9c-14.2,0-25.7,11.5-25.7,25.7v150.7c0,14.2,11.5,25.7,25.7,25.7h65.9c1.7,0.1,3.4,0.2,5.1,0.2h50c1.7,0,3.4-0.1,5.1-0.2h65.2c14.2,0,25.7-11.5,25.7-25.7V380.9C547.1,366.8,535.6,355.3,521.4,355.3z"/></svg>');
    --icon-up       : url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 76.8 100" style="enable-background:new 0 0 76.8 100;" xml:space="preserve"><style type="text/css">.st0{fill:%23FFFFFF;}</style><polygon class="st0" points="70.6,54.7 38.4,4.6 6.3,54.7 30.2,54.7 30.2,95.4 46.6,95.4 46.6,54.7 "/></svg>');
}
*, ::before, ::after {
    box-sizing: border-box;
}
html {
    font-size: 17px;
}
body {
    padding: 0;
    margin: 0;
    background: var(--brand02);
    font-family: 'Roboto Condensed', Arial, Helvetica, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--textcolor);
}
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem 1.5rem;
}

/* LAYOUT */
.header {
    padding: 2rem 0 0;
    background: var(--brand01);
    margin-bottom: 1rem;
}
.header__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.header__top .logo img {
    max-width: 256px;
    height: auto;
}
.header__top .subline {
    color: #666;
    font-size: 1.1rem;
}
.header h1 {
    font-family: 'Crimson Pro', Times, serif;
    font-weight: 400;
    font-size: 2.4rem;
    line-height: 1.3;
    color: var(--brand00);
    max-width: 820px;
    line-height: 1.3;
    margin: 2rem auto 0;
    text-align: center;
}
.header p {
    max-width: 780px;
    margin: 2rem auto 0;
    line-height: 1.6;
    text-align: center;
}

/* TOOLBOX */
.toolbox__wrapper {
    border-top: solid 1px var(--brand01);
    padding: .75rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 10;
    background-color: var(--brand00 );
}
.toolbox__wrapper.hide {
    display: none;
}
.toolbox__wrapper .container {
    padding: 0;
}
.toolbox {
    display: flex;
    justify-content: center;
}
.tool {
    display: flex;
    align-items: center;
    margin: 0 2rem;
    font-size: .9rem;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition);
    color: #FFFFFF;
}
.tool__icon {
    height: 32px;
    width: 32px;
    background-image: var(--icon-reload);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 28px;
    margin-right: .3rem;
    transition: var(--transition);
}
.icon--tree {
    background-image: var(--icon-tree);
}
.icon--up {
    background-image: var(--icon-up);
}

.tool:hover {
    opacity: .6;
}
.tool:hover .tool__icon {
    scale: 1.15;
}
.tool.inactive {
    opacity: .5;
    pointer-events: none;
}

/* TREE */
.tree {
    margin-bottom: 4rem;
}

/* TREE START */
.tree__start {
    display: flex;
    justify-content: center;
    margin-top: 5rem;
}
.tree__start .start__button {
    background-color: var(--positiv);
    font-size: 1.15rem;
    text-transform: uppercase;
    color: #fff;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    text-align: center;
    border: solid 2px #025f4c;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}
.tree__start .start__button.hide {
    display: none;
}
.tree__start .start__button .button__text {
    position: relative;
    z-index: 2;
}
.tree__start .start__button:before {
    content: '';
    position: absolute;
    border-radius: 1rem;
    border: solid 2px #025f4c;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    background-color: #025f4c;
    transform: scale(0,0);
    transition: var(--transition);
    z-index: 1;
}
.tree__start .start__button:hover:before {
    transform: scale(1,1);
    transition: var(--transition);
}
.tree__start .start__button:hover {
    box-shadow: -1px 7px 14px 0px rgba(81, 81, 81, 0.3);
}

/* TREE LAYOUT */
.tree__row {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}
.tree__row.row-50 {
    width: 49%;
}
.tree__row.row--3block {
    width: 150%;
    margin-left: -25%;
    align-items: flex-start;
}
.tree__row.row--spacebetween {
    justify-content: space-between;
}
.tree__row.row--spacearound {
    justify-content: space-around;
}
.tree__row.row--center {
    justify-content: center;
}
.tree__row.row--buttons {
    height: 7rem;
    align-items: center;
}
.tree__row.row--lines {
    height: 3.5rem;
}
.tree__row.row--lines.lines--heigh {
    height: 7.5rem;
}
.tree__col {
    display: flex;
    position: relative;
    height: 100%;
}
.tree__col.col--50 {
    width: 50%;
}
.item-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.item-col.col--50 {
    flex: 0 0 49%;
    max-width: 49%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* TREE BOXES */
.tree__item {
    position: relative;
    width: 100%;
    flex: 0 0 49%;
    max-width: 49%;
}
.tree__item.item--010 {
    flex: 0 0 75%;
    max-width: 75%;
    margin: 0 auto;
}
.tree__item.item--111 {
    flex: 0 0 42%;
    max-width: 42%;
}
.tree__row.row--3block .tree__item {
    flex: 0 0 32%;
    max-width: 32%;
}
.tree__item.item--101-1 {
    flex: 0 0 24%;
    max-width: 24%;
}
.tree__item.item--101-2 {
    flex: 0 0 48%;
    max-width: 48%;
}
.tree__item.item--3col {
    flex: 0 0 30%;
    max-width: 30%;
}
.tree__item.item--9col {
    flex: 0 0 60%;
    max-width: 60%;
}
.tree__item .item__box {
    height: 100%;
    background-color: #fff;
    padding: 2rem 2.5rem;
    border-radius: 1rem;
    text-align: center;
    display: none;
}
.tree__item .item__box.box--narrow {
    padding: 1.5rem 1rem;
}
.tree__item .item__box.box--red {
    background-color: var(--brand03);
    color: #FFF;
}
.tree__item .item__box.box--yellow {
    background-color: var(--brand04);
    color: #FFF;
}
.tree__item .item__box.box--blue {
    background-color: var(--brand00);
    color: #FFF;
}
.tree__item.show .item__box {
    display: block;
}
.tree__item .item__box ul {
    text-align: left;
}
.tree__item .item__box.box--choosen {
    border: solid 1px #ccc;
    box-shadow: -1px 7px 17px 0px rgba(81, 81, 81, 0.2);
}
.tree__item .item__box.box--notchoosen {
    color: #AAA;
    background: #f6f6f6;
}
.item__head {
    font-family: "Crimson Pro", serfif;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--gray00);
    text-align: center;
    margin-bottom: 1.5rem;
    display: none;
}
.show .item__head {
    display: block;
}

/* BUTTONS */
.buttonset {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
    flex: 0 0 50%;
    max-width: 50%;
}
.buttonset.set-010 {
    flex: 0 0 75%;
    max-width: 75%;
    margin: 0 auto;
    justify-content: space-around;
}
.buttonset.set-202 {
    justify-content: space-around; 
}
.buttonset.set-101, .buttonset.set-101-3 {
    justify-content: space-between;
    flex: 0 0 100%;
    max-width: 100%;
}
.buttonset.set--left {
    margin-left: auto;
}
.item__choose {
    display: flex;
    position: relative;
}
.buttonset.set-101 .item__choose {
    flex: 0 0 48%;
    max-width: 48%;
}
.buttonset.set-101-3 .item__choose {
    flex: 0 0 42%;
    max-width: 42%;
}
.item__choose:before {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    position: absolute;
    border-top: dotted 4px #999;
    z-index: -1;
}
.item__choose:after{
    content: '';
    position: absolute;
    left: 50%;
    top: 89%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #999;
}
.item__choose.choose--right {
    width: 14%;
    justify-content: center;
    align-items: center;
}
.item__choose.choose--right.right--s {
    width: 9%;
}
.item__choose.choose--right:after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-top: -8px;
    width: 0;
    height: 0;
    border-right: none;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #999;
}
.item__choose.choose--down {
    justify-content: center;
    align-items: center;
    height: 90%;
}
.item__choose.choose--down:before {
    width: 0;
    height: 90%;
    border-top: none;
    border-right: dotted 4px #999;
}
.item__choose.choose--down .choose__button {
    margin-top: -.25rem;
}
.choose__button {
    width: 3.5rem;
    height: 2.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background: #666;
    border-radius: .5rem;
    cursor: pointer;
    transform: scale(1,1);
    transition: var(--transition);
}
.choose__button:hover {
    transform: scale(1.15,1.15);
    transition: var(--transition);
}
.choose__button.choose--positiv {
    background-color: var(--positiv);
}
.choose__button.choose--negativ {
    background-color: var(--negativ);
}
.choose__button.inactive {
    pointer-events: none;
}
.item__choose.notchoosen:before {
    border-color: #d5d5d5;
}
.item__choose.notchoosen.choose--right:after {
    border-left-color: #d5d5d5;
}
.item__choose.notchoosen.choose--down:after {
    border-top-color: #d5d5d5;
}
.item__choose.notchoosen .choose__button {
    background-color: #d5d5d5;
    color: #999;
    pointer-events: none;
}
.choose__button.button--inactive {
    pointer-events: none;
}
.item__choose.choose--empty .choose__button {
    display: none;
}
.item__choose.choose--empty:after, .item__choose.choose--empty:before, .item__choose.choose--notset:after, .item__choose.choose--notset:before {
    content: none;
}
.item__choose.choose--down.choose--notset {
    align-items: flex-start;
}
.item__choose.choose--down.choose--notset .choose__button {
    margin-top: -1rem;
}
.item__choose.choose--right.choose--notset {
    justify-content: flex-start;
}
.item__choose.choose--right.choose--notset .choose__button {
    margin-left: -2rem;
}

/* LINES */
.linesset {
    display: flex;
    height: 100%;
    position: relative;
    width: 100%;
    justify-content: space-between;
}
.item__lines {
    display: flex;
    justify-content: center;
}
.linesset .item__lines {
    flex: 0 0 42%;
    max-width: 42%;
}
.lines--two {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: none;
}
.item__lines.show .lines--two {
    display: flex;
}
.line-down {
    height: 2.5rem;
    width: 2px;
    margin-left: -2px;
    border-left: dotted 4px #999;
}
.line-two {
    height: 3rem;
    width: 14rem;
    border-top: dotted 4px #999;
    border-right: dotted 4px #999;
    border-left: dotted 4px #999;
    position: relative;
}
.line-two:after, .line-two:before {
    content: '';
    position: absolute;
    right: -10px;
    top: 95%;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid #999;
}
.line-two:before {
    right: unset;
    left: -2px;
}
.lines--corner-up-left {
    position: absolute;
    height: 42%;
    width: 42%;
    border-left: dotted 4px #999;
    border-bottom: dotted 4px #999;
    left: -45%;
    bottom: 5%;
    display: none;
}
.lines--corner-up-right {
    position: absolute;
    height: 42%;
    width: 42%;
    border-right: dotted 4px #999;
    border-bottom: dotted 4px #999;
    right: -45%;
    bottom: 5%;
    display: none;
}
.lines--corner-up-left:before, .lines--corner-up-right:before {
    content: '';
    position: absolute;
    left: -2px;
    top: -3px;
    margin-left: -8px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid #999;
}
.lines--corner-up-right:before {
    left: unset;
    right: -10px;
}
.item__lines.show.lines--corner-up-left, .item__lines.show.lines--corner-up-right {
    display: block;
}
.lines__info {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.2rem;
    width: 3.2rem;
    border-radius: 50%;
    color: #FFF;
    background: var( --gray01 );
}
.lines__info.info--negativ {
    background: var( --negativ );
}
.lines--corner-up-left .lines__info, .lines--corner-up-right .lines__info {
    position: absolute;
    bottom: -1.6rem;
    left: calc( 50% - 1.6rem );
}

/* EYE CATCHER */
.catcher {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    right: -120px;
    background: #ccc;
    font-size: 1.15rem;
    color: #fff;
    height: 170px;
    width: 170px;
    padding: 30px;
    border-radius: 50%;
    box-shadow: -1px 7px 17px 0px rgba(81, 81, 81, 0.2);
    transform: scale(0,0);
    transition: var(--transition);
    transition-delay: 1s;
}
.catcher span {
    text-align: center;
}
.catcher.catcher--negativ {
    background: var(--negativ);
}
.catcher.show {
    transform: scale(1,1);
    transition: var(--transition);
    transition-delay: 1s;
}

/* ICON */
.icon {
    position: absolute;
    display: block;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--brand03);
    background-image: var(--icon-info);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: auto 28px;
    top: -1rem;
    left: 1rem;
    transition: var(--transition);
    animation: splash 1.5s normal ease-in-out forwards;
}
.icon.icon--right {
    left: unset;
    right: -1rem;
    top: 1rem;
}
.item__box.box--narrow .icon.icon--right {
    right: -.25rem;
    top: -1.25rem;
}
.icon.icon--warning {
    background-color: var(--brand03);
    background-image: var(--icon-warning);
}
.icon.icon--tipp {
    background-color: var(--brand03);
    background-image: var(--icon-tipp);
}

.icon:hover {
    scale: 1.3;
}
.box--notchoosen .icon {
    background-color: var(--gray02);
    pointer-events: none;
}
/* MODAL */
.modal-window {
    position: fixed;
    background: var(--brand01);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}
.modal-window:target {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.modal-window > div {
    width: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2em;
    background: white;
    border-radius: 1rem;
}

  
.modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 80%;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70px;
    text-decoration: none;
    
}
.modal-close:hover {
    color: black;
}

/* CLOSE ICON */
.close-icon {
    cursor: pointer;
    display: inline-block;
    height: 26px;
    width: 26px;
    position: absolute;
    right: 1rem;
    top: 1rem;
}    
.close-icon .horizontal {
    position: absolute;
    background-color: var(--brand00);
    width: 20px;
    height: 2px;
    left: 50%;
    margin-left: -10px;
    top: 50%;
    margin-top: -1px;
    transition: var(--transition);
    transform: rotate(-45deg);
    opacity: 1;
}

.close-icon .vertical {
    position: absolute;
    background-color: var(--brand00);
    width: 2px;
    height: 20px;
    left: 50%;
    margin-left: -1px;
    top: 50%;
    margin-top: -10px;
    transition: var(--transition);
    transform: rotate(-45deg);
}


.close-icon:hover .vertical {
    transition: var(--transition);
    transform: rotate(90deg);
}
.close-icon:hover .horizontal {
    transition: var(--transition);
    transform: rotate(90deg);
    opacity: 0;
}

/* CHECKBOX */
.checkbox label {
	position: relative;
	cursor: pointer;
	padding-left: 30px;
	text-align: left;
	display: block;
}
.checkbox input {
	width: auto;
	opacity: 0.00000001;
	position: absolute;
	left: 0;
}
.checkbox {
	margin-top: .5rem;
}
.checkbox .helper {
	color: #999;
	position: absolute;
	top: 3px;
	left: 0;
	width: 18px;
	height: 18px;
	z-index: 0;
	border: 1px solid var(--brand00);
	border-radius: 0;
	-webkit-transition: border-color 0.28s ease;
	transition: border-color 0.28s ease;
}
.checkbox .helper::before, .checkbox .helper::after {
	position: absolute;
	height: 0;
	width: 4px;
	background-color: var(--brand00);
	display: block;
	-webkit-transform-origin: left top;
	transform-origin: left top;
	border-radius: 0.25rem;
	content: '';
	-webkit-transition: opacity 0.28s ease, height 0s linear 0.28s;
	transition: opacity 0.28s ease, height 0s linear 0.28s;
	opacity: 0;
}
.checkbox .helper::before {
	top: 14px;
	left: 8px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}
.checkbox .helper::after {
	top: 10px;
	left: 0;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.checkbox label:hover .helper {
	color: var(--brand00);
}
.checkbox input:checked ~ .helper {
	color: #afbac3;
}
.checkbox input:checked ~ .helper::after, .checkbox input:checked ~ .helper::before {
	opacity: 1;
	-webkit-transition: height 0.28s ease;
	transition: height 0.28s ease;
}
.checkbox input:checked ~ .helper::after {
	height: 0.5rem;
}
.checkbox input:checked ~ .helper::before {
	height: 1.2rem;
	-webkit-transition-delay: 0.28s;
	transition-delay: 0.28s;
}

/* ANIMATIONS */
@keyframes shaking {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}
@keyframes splash {
    from {
        opacity: 0;
        transform: scale(0, 0);
    }
    50% {
        opacity: 1;
        transform: scale(1.2, 1.2);
    }
    to {
        transform: scale(1, 1);
    }
}