/*
 * Gridiculous
 *
 * A responsive grid boilerplate that takes you all the way from 1200px on down to 320px.
 *
 * created by c.bavota
 * released under GPL v2
 *
 * March 4th, 2013
 */

/* =Normalize.css v2.1.0 by Nicolas Gallagher - http://necolas.github.com/normalize.css/
-------------------------------------------------------------- */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,video{display:inline-block}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
body { width:100%; 
       height:100%;
       margin:0;
}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:0.67em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
dfn{font-style:italic}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
mark{background:#ff0;color:#000}
code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}
pre{white-space:pre-wrap}
q{quotes:"\201C" "\201D" "\2018" "\2019"}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
img{border:0}
svg:not(:root){overflow:hidden}
figure{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}
legend{border:0;padding:0}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
button,input{line-height:normal}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

/* =Clearfix by Nicolas Gallagher
-------------------------------------------------------------- */
.row:before,.row:after,.clearfix:before,.clearfix:after{content:'';display:table}
.row:after,.clearfix:after{clear:both}
.row,.clearfix{zoom:1}

/* =Gridiculous
-------------------------------------------------------------- */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}
body{font-size:100%;line-height:1.6875}
.grid{margin:0 auto;max-width:1200px;width:100%}
img{max-width:100%;height:auto;display:block;margin-left:auto;margin-right:auto}
.wfull{width:100%;max-width:100%}
.w320{max-width:320px}
.w640{max-width:640px}
.w960{max-width:960px}
.row{width:100%;margin-bottom:20px}
.row .row{width:auto;margin:0 -20px}
.c1{width:8.33%}
.c2{width:16.66%}
.c3{width:25%}
.c4{width:33.33%}
.c5{width:41.66%}
.c6{width:50%}
.c7{width:58.33%}
.c8{width:66.66%}
.c9{width:75%}
.c10{width:83.33%}
.c11{width:91.66%}
.c12{width:100%}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{min-height:1px;float:left;padding-left:20px;padding-right:20px;position:relative}
.s1{margin-left:8.33%}
.s2{margin-left:16.66%}
.s3{margin-left:25%}
.s4{margin-left:33.33%}
.s5{margin-left:41.66%}
.s6{margin-left:50%}
.s7{margin-left:58.33%}
.s8{margin-left:66.66%}
.s9{margin-left:75%}
.s10{margin-left:83.33%}
.s11{margin-left:91.66%}
.end{float:right!important}

/* =Media query for 960 Screens - sets nested grids to 100%
-------------------------------------------------------------- */
@media only screen and (max-width:960px){
.row .row .c1,.row .row .c2,.row .row .c3,.row .row .c4,.row .row .c5,.row .row .c6,.row .row .c7,.row .row .c8,.row .row .c9,.row .row .c10,.row .row .c11,.row .row .c12{width:100%;margin-bottom:20px}
.row .row > div:last-child{margin-bottom:0 !important}
}

/* =Media query for iPad and tablets
-------------------------------------------------------------- */
@media handheld, only screen and (max-width: 768px), only screen and (max-device-width: 768px) and (orientation:portrait){
body{font-size:90%}
.row{margin-bottom:0!important}
.c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{width:100%;margin-right:0;margin-left:0;margin-bottom:20px}

.links{
    right:20px;
    bottom:20px;
}

.links a{
    font-size:17px;
}

}

/* Addon-Schnipsel by Manuel Gietl
-------------------------------------------------------------- */



/* ==========================================================
   WhatsApp Floating Button
   ========================================================== */

#whatsapp-button{

    position:absolute;
    top:60%;
    right:20px;
    bottom:35%;

    z-index:200;

}

#whatsapp-button img{

    width:60px;
    height:auto;

    transition:transform .2s ease;

}

#whatsapp-button:hover img{

    transform:scale(1.08);

}


/* ==========================================================
   Landingpage
   ========================================================== */

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    background:#000;
}

.hero{

    position:absolute;

    width:100%;
    max-width:1920px;

    margin:0 auto;

}

.hero picture{

    display:block;

}

.hero picture img{

    display:block;

    width:100%;

    height:auto;

}

.hero-content{

    position:absolute;

    top:45%;

    left:0;

    width:100%;

    margin:0;

}

.content-box{

    background:rgba(255, 0, 255, 0); /* Transparent background aufgrund der 0 am Ende - hier 0.85 eintragen, dann erscheint es in Magenta zur Findung*/
    color:white;
    padding:30px;

    border-radius:10px;

    max-width:500px;

}

/* Unsichtbarer Link unten links */

.hero .hidden-link{

    position:absolute;

    left:0;
    bottom:0;

    height:15%;
    width:21%;

    aspect-ratio:1 / 1;

    display:block;

    z-index:100;

}

/* ==========================================================
   Footer
   ========================================================== */

.hero footer{

    position:absolute;

    right:30px;
    bottom:30px;

    margin:0;
    padding:0;

}

/* Zweispaltiges Layout */

.footer-links{

    display:grid;

    grid-template-columns:auto auto;

    column-gap:18px;

    align-items:center;

}

/* Facebook */

.footer-links .social{

    grid-row:1 / span 2;

    display:flex;

    align-items:center;

    justify-content:center;

}

.footer-links .social img{

    display:block;

    width:42px;

    height:auto;

}

/* Linkbereich */

.footer-links .links{

    display:flex;

    flex-direction:column;

    align-items:flex-end;

    gap:6px;

    text-align:right;

}

.footer-links .links a{

    color:#f26722;

    text-decoration:none;

    font-family:Helvetica, Arial, sans-serif;

    font-size:20px;
    font-weight:bold;

}

.footer-links .links a:hover{

    outline:0;

    color:#FF8C00;

    text-decoration:none;

}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width:768px){

    .hero{

        max-width:728px;

    }


    .hero .hidden-link{

        width:70%;
        height:15%;
        bottom:6rem;
    }

    /* Footer unter das Bild */

    .hero footer{

        position:static;

        margin:20px 20px 30px 20px;

    }

    .footer-links{

        display:grid;

        grid-template-columns:auto auto;

        column-gap:12px;

        justify-content:end;

        align-items:center;

    }

    .footer-links .social img{

        width:32px;

    }

    .footer-links .links{

        display:flex;

        flex-direction:column;

        align-items:flex-end;

        text-align:right;

    }

    .footer-links .links a{

        font-size:17px;

    }

    #whatsapp-button{

    width:52px;    

    top:66%;

    right:20px;

    bottom:auto;

    transform:translateY(-50%);

    }

    #whatsapp-button img{

        width:50px;

    }

}