@charset "UTF-8";
@font-face {
    font-family: "Bitter";
    src: url("../fonts/Bitter-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Bitter";
    src: url("../fonts/Bitter-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}
:root{
--main-mail: lukas@the-goodness.de;
--logo-width:58%;
--lineheaders: 94px/104px;
--linetextnormal: 32px/54px;
--linetextbold: 44px/64px;
--linetextlinks: 20px/54px;
--linetextfooter: 20px/24px;
--txtwidth: 60%;
--txtwidthlines: 77%;
--farbred: #E36C66;
--farbwhite: #F5FAF6;
--farbyell: #E5DC80;
--farbblack: #342A3E;
--farbgreen: #D6E2D5;
--clblck-h:13em;
--clblck-pad:13em;
--clblck-padb:7em;
--hundredvh: 100vh;
    /*dtsch txt*/
--cont-width: 93%;
--list-padding-left: 40px;
--list-padding-left-double: 80px;
}

@media (max-width:1441px){
    :root{
        --txtwidth: 70%;
    }
}

@media (max-width:821px) {
    :root{
        /*--hundredvh:100%;*/
        --lineheaders: 54px/64px;
        --linetextnormal: 20px/32px;
        --linetextbold: 30px/48px;
        --txtwidth: 91%;
        --txtwidthlines: 89%;
        --list-padding-left: 20px;
        --list-padding-left-double: 20px;
        --cont-width: 98%;
        --clblck-h:6em;
    }
}
@media (max-width:426px) {
    :root{
        --lineheaders: 41px/44px;
        --list-padding-left: 10px;
        --list-padding-left-double: 20px;
        --clblck-h:4em;
        --logo-width:90%;
    }
}

html {
  font-family: "Bitter";
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
}

img{
    width:100%;
}

.fullscrimg{
    height: var(--hundredvh);
    min-height: fill-available;
    min-height: -webkit-fill-available;
    width: auto;
    min-width: 390px;
    object-fit: cover;
}
@media(min-width:2300px) {
    .fullscrimg{
        height: auto;
        width: 100%;
    }
}

h1{
    font: normal normal bold var(--lineheaders) "Bitter";
    color: var(--farbred);
    padding-left: var(--list-padding-left);
}

h2, h3{
    margin: 0;
}

h2, .h2{
    font: normal normal bold var(--lineheaders) "Bitter";
    color: var(--farbwhite);
}
h3, .h3{
    font: normal normal normal var(--lineheaders) "Bitter";
    color: var(--farbred);
}

h4{
    font: normal normal bold var(--linetextbold) "Bitter";
    color: var(--farbblack);
    padding-left: var(--list-padding-left);
}
.clrblck{
    height: var(--clblck-h);
}
.clrblckb{
    height: var(--clblck-padb);
}
.txt {
    width: var(--txtwidth);
    text-align: left;
    margin-right: auto;
    margin-left: auto;
}
.txt1 {
    position: absolute;
    width: var(--txtwidthlines);
    text-align: left;
    margin-right: auto;
    margin-left: auto;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.relative {
    position: relative;
    width: 100%;
   /* min-height: 100vh;*/
    padding: 0;
    margin: 0;
}
.lines, .lines2 {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    background-position: bottom center;
    background-size: cover;
    background-repeat: no-repeat;
}
.lines{
     background-image: url("../img/Lines.png");
}
.lines2 {
     background-image: url("../img/lines_2.png");
}
.bold {
    font-weight: bold !important;
}
.boldred {
    font: normal normal bold var(--linetextbold) "Bitter";
    color: var(--farbred);
}
.boldblack {
    font: normal normal bold var(--linetextbold) "Bitter";
    color: var(--farbblack);
}
span {
    font: normal normal normal var(--linetextnormal) "Bitter";
    color: var(--farbblack);
}
.hidden{
    display: none;
}

.azure {
    background-color: var(--farbwhite);
}
.red {
    background-color: var(--farbred);
}
.black {
    background-color: var(--farbblack);
}
.base-link{
    color: var(--farbyell);
    font: normal normal bold var(--linetextlinks) "Bitter";
    padding-right: 40px;
    position: relative;
    cursor: pointer;
    text-decoration: none;
}

.base-link::before{
    background: var(--farbyell);
    content: '';
    display: block;
    height: 2px;
    right: 0px;
    position: absolute;
    top: 50%;
    width: 21px; 
}
.base-link::after {
    border-color: var(--farbyell);
    border-style: solid;
    border-width: 0 0 2px 2px;
    content: "";
    display: block;
    height: 12px;
    right: 0px;
    position: absolute;
    width:12px;
    margin-top: -6px;
    top: 50%;
    transform: rotate( -135deg );
    -webkit-transform: rotate( -135deg );
}

.base-link:hover, .base_link:visited{
    color: var(--farbyell);
    text-decoration: none;
    font: normal normal bold var(--linetextlinks) "Bitter";
}
.teil {
    max-width:97% !important;
    margin-top: 2em;
    margin-bottom: 2em;
}

.mehr-link,.mehr-link:hover, .mehr-link:visited {
    color: var(--farbblack);
    text-transform: uppercase;
    text-decoration: none;
    font: normal normal bold var(--linetextlinks) "Bitter";
}
.mehr-link:hover {
   cursor: pointer;
}
.mehr-link::after{
    content: ' ';
    border: solid var(--farbblack);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 10px;
    margin-bottom: 3px;
    margin-top: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mehr-link.weniger::after{
    content: ' ';
    border: solid var(--farbblack);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
    margin-left: 10px;
    margin-bottom: 0;
    margin-top: 3px;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.logo-img {
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    width: var(--logo-width);
    z-index: 3;
    align-content: center;
}
.logo-img > img {
    max-width:100%;
}
.img-inc {
    -webkit-transition: 3s;
    -moz-transition: 3s;
    -o-transition: 3s;
    transition: 3s;
}
.good-r {
    width: 99%;
    min-width: 100%;
    overflow: hidden;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.good-r > img {
    width: 100%;
}
.prlx-tbl {
    padding: 18% 0 0 0; 
    height: 168px;  
    width: 100%;
    overflow: hidden;
    display: inline-table;
    
}
.prlx-row {
    height: 168px;
    width: 5842px;
    margin: 14px 0;
}
.parallax [class*="bg_"] { 
    position: relative;
    height: fit-content;  
    background-attachment: fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    
}
.parallax .bg_one {
    background-image: url(../img/header-img.jpg);
    -moz-background-size: cover;
    background-position: top center;
    min-height:var(--hundredvh);
    min-width: 100%;
    width: 100%;
    height: auto;
}

@media all and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
  .parallax .bg_one {
        background-attachment:scroll;
    }
}
@media(max-width:821px){
    .parallax .bg_one {
        background-attachment:scroll;
    }
}

#z1, #z2, #z3{
    z-index: 8;
}
.parallax .bg_two {
    background-color: var(--farbblack);
    min-height: 100vh;
    max-height: fit-content;
}
.footer {
    position: relative;
}
.foo-data{
    position: absolute;
    z-index: 5;
    bottom: 0;
    width: 100vw;
    height: 80px;
    display: flex;
    justify-content: space-around;
    background: var(--farbblack);
    opacity: 0.6;
    color: var(--farbgreen);
    font: normal normal normal 20px/24px "Bitter";
    flex-direction: row;
}
.foo-data > div {
    padding-top: 25px;
}
@media (max-width:1024px){
    .foo-data{
        flex-direction: column;
        text-align: left;
        padding-left: 16px;
        height: 156px;
    }
    .foo-data > div {
        padding-top: 0;
    }
}
.foo-data a, .foo-data a:hover, .foo-data a:visited{
    color: var(--farbgreen);
    font: normal normal normal 20px/24px Bitter;
    cursor: pointer;
    text-decoration: none;
}
.zcont{
    width:100%;
    margin-left: auto; 
    margin-right: auto;
    display: flex; 
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 4;
}
.overflow-hidden{
    overflow: hidden;
}
.inner {
    position: absolute;
    width: 64%;
    left: 18%;
    vertical-align: middle;
    z-index: 10;
    transform: translateY(24%);
}
@media (max-width:426px) {
    .inner {
        width: 81%;
        left: 10%;
    }
}
.full-inner {
    position: absolute;
    width: 106vw;
    vertical-align: middle;
    z-index: 6;
}
.rotating{
    position: absolute;
    left:60%;
    top:21vh;
}
.up {
    top:18%;
}
@media (max-width:4000px){
    .rotating{
        left:1050px;
    }
}
@media (max-width:1921px){
    .rotating{
        left:960px;
    }
}
@media (max-width:1441px){
    .rotating{
        left:880px;
    }
}
@media (max-width:1025px){
    .rotating{
        left:82%;
    }
}
.rotate {
    animation: rotation 5s infinite linear;
    -webkit-animation: rotation 5s infinite linear;
    width:166px;
}
@media (min-width: 768px){
    .rotate {
        display: block;
    }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
a, a:visited, a:active{
    text-decoration: none;
}
.button{
    position: relative;
    cursor: pointer;
    padding-right: 40px;
    background-color: var(--farbyell);
    border-right: var(--farbyell) solid 33px;
    color: var(--farbblack);
    padding: 0 40px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font: normal normal bold var(--linetextlinks) "Bitter";
    border-radius: 40px;
}

.button::before{
    background: var(--farbblack);
    content: '';
    display: block;
    height: 2px;
    right: 0px;
    position: absolute;
    top: 50%;
    width: 21px; 
}
.button::after {
    border-color: var(--farbblack);
    border-style: solid;
    border-width: 0 0 2px 2px;
    content: "";
    display: block;
    height: 12px;
    right: 0px;
    position: absolute;
    width:12px;
    margin-top: -6px;
    top: 50%;
    transform: rotate( -135deg );
    -webkit-transform: rotate( -135deg );
}
#z1-down{
    width: 90%;
}
img[class*="string"] {
    padding: 0;
    margin: 0;
    -webkit-animation-duration: 1s;
    animation-duration: 7s; 
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    height:var(--scoverheight);
    margin-bottom: var(--scovermarbot);
    width: auto;
    position: absolute;
}

:root{
    --scoverheight:168px;
    --scovermarbot:42px;
}
.scover {
    overflow-x: hidden;
    height: var(--scoverheight);
    margin-bottom: var(--scovermarbot);
}
.strmin {
    display: none;
}
.strmax {
    display: block;
}

@media (max-width:1512px){
    :root{
        --scoverheight: 148px;
        --scovermarbot: 34px;
    }
}
@media (max-width:1440px){
    :root{
        --scoverheight: 128px;
        --scovermarbot: 34px;
    }
}
@media (max-width:1024px){
    :root{
        --scoverheight: 100px;
        --scovermarbot: 30px;
    }
}
@media (max-width:820px){
    :root{
        --scoverheight: 93px;
        --scovermarbot: 30px;
    }
}
@media (max-width:768px){
    :root {
        --scoverheight: 115px;
        --scovermarbot: 15px;
    }
    .strmin {
        display: block;
    }
    .strmax {
        display: none;
    }
    .minstring3 {
        left:-26em;
    }
    .minstring6 {
        left:-18em;
    }
}
@media (max-width:425px){
    :root {
        --scoverheight: 60px;
        --scovermarbot: 10px;
    }
    .minstring3 {
        left:-12em;
    }
    .minstring6 {
        left:-8em;
    }
}
@media(max-width:390px) {
    .minstring3 {
        left:-14em;
    }
    .minstring6 {
        left:-10em;
    }
}
@media (max-width:320px){
    :root{
        --scoverheight: 50px;
        --scovermarbot: 10px;
    }
    .minstring3 {
        left:-12em;
    }
    .minstring6 {
        left:-8em;
    }
}
.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}
.bounceInLeft2 {
    -webkit-animation-name: bounceInLeft2;
    animation-name: bounceInLeft2;
}
.bounceInRight{
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

:root {
    --sm1:-13em;
    --sm2:-182em;
    --sm3:-65em;
}

@keyframes bounceInLeft {
    0% {
        opacity: 1;
        transform: translateX(-10em);
    }
    60% {
        opacity: 1;
        transform: translateX(-60em);
    }
    80% {
        transform: translateX(-12em);
    }
    100% {
        transform: translateX(var(--sm1));
    }
}
@keyframes bounceInLeft2 {
    0% {
        opacity: 1;
        transform: translateX(-10em);
    }
    60% {
        opacity: 1;
        transform: translateX(-70em);
    }
    80% {
        transform: translateX(-8em);
    }
    100% {
        transform: translateX(var(--sm3));
    }
}
@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(0px);
    }
    60% {
        opacity: 1;
        transform: translateX(-25em);
    }
    80% {
        transform: translateX(-50em);
    }
    100% {
        transform: translateX(var(--sm2));
    }
}
@media(max-width:1920px){
    :root {
        --sm2:-207em;
        --sm3:-101em;
    }
}
@media(max-width:1512px){
    :root {
        --sm2:-186em;
        --sm3:-101em;
    }
}
@media(max-width:1440px){
    :root {
        --sm2:-160em;
        --sm3:-84em;
    }
}
@media(max-width:1024px){
    :root {
        --sm1:-13em;
        --sm2:-126em;
        --sm3:-68em;
    }
}
@media(max-width:820px){
    :root {
        --sm1:-13em;
        --sm2:-117em;
        --sm3:-74em;
    }
}
.daten > p {
    padding-left: var(--list-padding-left);
    font: normal normal normal var(--linetextnormal) "Bitter";
}
p.c1 {
    font: normal normal bold var(--linetextbold) "Bitter";
    padding-left: var(--list-padding-left);
}
span.clist {
    padding:0;
    margin: 0;
    padding-left: var(--list-padding-left);
}
.daten > p a, a:active, a:visited {
    color: var(--farbred);
    font: normal normal normal var(--linetextnormal) "Bitter";
    text-decoration: none;
}

ul {
    padding-left: var(--list-padding-left-double);
}

ul li{
     font: normal normal normal var(--linetextnormal) "Bitter";
      
}