@charset "utf-8";
/* CSS Document */

:root {
  --grey: rgb(80,83,80);
  --red: rgb(211,18,23);
  --green: rgb(104,164,48);
  --white: rgb(227,227,227);
  --weiss: rgb(255,255,255);
}

body {margin: 0; padding: 0; font-family: "Roboto Condensed", sans-serif; font-size: 20px; color: var(--grey); background-color: var(--white);}
img {width: 100%; height: auto; border: 0;}

.clearer::after {content: ""; display: table; clear: both;}


.slider {width: calc(100% - 40px); height: calc(100% - 40px); overflow: hidden; position: fixed; top: 20px; left: 20px; box-sizing: border-box; border: 2px var(--white) solid;}
.slider-hg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; /*transition: left 1.5s ease;*/ overflow: hidden;}
.slider-inner {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-position: center center; background-repeat: no-repeat; transition: all 7s ease-in-out; transform: scale(1.2);}
.s-i1 {background-image: url("../../../images/slider/startseite-isr-bg.webp");}
.s-i2 {background-image: url("../../../images/slider/startseite-lsh-bg.webp");}
.s-i3 {background-image: url("../../../images/slider/startseite-warnsholz-bg.webp");}
.s-i4 {background-image: url("../../../images/slider/startseite-peterstolz-bg.webp");}
.pattern {background-color: rgba(0,0,0,0.00); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; transition: background-color .5s ease-in-out;}
.slider-cont {position: absolute; bottom: 100px; right: 50%; transform: translateX(130%); background-color: rgba(0,0,0,0.0); z-index: 10; text-align: left;}
.h2-one, .h2-two {animation: introtext 4s ease-in-out; color: var(--white); text-transform: uppercase; font-weight: 900; letter-spacing: 0.1em; opacity: 1; background-color: var(--red); box-sizing: border-box; padding: 5px 10px; display: table;}
.h2-one {font-size: 65px; line-height: 65px; margin: 0 0 10px 0;}
.h2-two {font-size: 35px; line-height: 35px; margin: 0;}

@keyframes introtext {
  0%   {letter-spacing: 0.4em; opacity: 0;}
  100% {letter-spacing: 0.1em; opacity: 1;}
}

@media screen and (max-width: 1320px){
.slider-cont {transform: translateX(100%);}
}
@media screen and (max-width: 1055px){
.slider-cont {transform: translateX(110%);}
.h2-one {font-size: 50px; line-height: 50px; margin: 0 0 5px 0;}
.h2-two {font-size: 20px; line-height: 20px; margin: 0;}
}
@media screen and (max-width: 900px){
.slider-cont {transform: translateX(105%);}
}
@media screen and (max-width: 845px){
.slider-cont {transform: translateX(50%); bottom: auto; top: 100px;}
}
@media screen and (max-width: 650px){
.s-i1 {background-image: url("../../../images/slider/startseite-isr-bg-mobil.webp");}
.s-i2 {background-image: url("../../../images/slider/startseite-lsh-bg-mobil.webp");}
.s-i3 {background-image: url("../../../images/slider/startseite-warnsholz-bg-mobil.webp");}
.s-i4 {background-image: url("../../../images/slider/startseite-peterstolz-bg-mobil.webp");}
}
@media screen and (max-width: 500px){
.h2-one {font-size: 40px; line-height: 40px; margin: 0 0 5px 0;}
.h2-two {font-size: 20px; line-height: 20px; margin: 0;}
}


.gesellschaften-master {position: absolute; bottom: 20px; left: 20px; z-index: 100;}
.gesellschaft-box {position: relative; background-color: var(--grey); box-sizing: border-box; padding: 12px 12px 6px 12px; margin-bottom: 4px;}
.gesellschaft-box:last-child {margin-bottom: 0;}
.gesellschaft-box img {width: 110px;}
.gesellschaft-box:hover {background-color: var(--green);}
.greyBG {background-color: var(--grey);}
.greenBG {background-color: var(--green);}

.gb_cont {position: absolute; top: 0; right: -1px; width: 0px; height: 100%; border-left: 1px transparent solid; transition: all .5s ease-in-out; overflow: hidden;}
.gb_cont_inner {box-sizing: border-box; padding: 10px 15px; background-color: var(--green); position: absolute; top: 0; left: 0; width: 300px; height: 100%; font-size: 15px; color: var(--weiss);}

.gesellschaft-box:hover .gb_cont {right: -301px; width: 300px;}
.gb_cont_open {right: -301px; width: 300px;}

.gb_standort {position: absolute; bottom: 16px; left: 15px;}
.gb_standort a {color: var(--white); text-decoration: none; font-size: 14px;}
.gb_standort a:hover {color: var(--grey);}
.mehr_erfahren {color: var(--white); background-color: var(--red); box-sizing: border-box; padding: 5px 8px; position: absolute; bottom: 10px; right: 15px; text-decoration: none;}
.mehr_erfahren::after {font-family: 'Font Awesome 5 Free'; content: "\f138"; font-weight: bold; margin: 0 0 0 10px;}
.mehr_erfahren:hover {background-color: var(--grey);}

@media screen and (max-width: 900px){
.gesellschaft-box img {width: 70px;}
}
@media screen and (max-width: 500px){
.gb_cont_inner {width: 260px; padding: 10px; font-size: 13px;}
.gb_standort a {font-size: 12px;}
.mehr_erfahren {font-size: 12px; right: 10px;}
}
@media screen and (max-width: 425px){
.gb_cont_inner {width: 245px; padding: 10px; font-size: 13px;}
.gesellschaften-master {bottom: 10px; left: 10px;}
.slider {width: calc(100% - 20px); height: calc(100% - 20px); top: 10px; left: 10px;}
}
@media screen and (max-width: 380px){
.gesellschaft-box img {width: 62px;}
.gesellschaft-box {padding: 8px 8px 2px 8px; margin-bottom: 2px;}
}
@media screen and (max-width: 365px){
.gesellschaften-master {bottom: 6px; left: 6px;}
.slider {width: calc(100% - 12px); height: calc(100% - 12px); top: 6px; left: 6px;}
}

/* AGB */
.agb-master {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,0.85); z-index: 555555;}
.agb-inner {width: 90%; max-width: 500px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background-color: var(--grey); color: var(--weiss); box-sizing: border-box; padding: 30px 20px;}
.agb-inner h2 {font-size: 30px; margin: 0 0 40px 0;}
.agb-inner p {font-size: 17px; line-height: 25px; margin: 0 0 40px 0;}
.agb-inner a {color: var(--green); text-decoration: none;}
.agb-inner a:hover {color: var(--red);}
.agb-close {position: absolute; top: 30px; right: 20px; font-size: 20px; color: var(--weiss); cursor: pointer; transform: rotate(0deg); -webkit-transition: all .3s ease; transition: all .3s ease;}
.agb-close:hover {transform: rotate(90deg); -webkit-transition: all .3s ease; transition: all .3s ease;}

/* Aufrecht */
.aufrecht {position: fixed; width: 100%; height: 100%; background-color: rgba(80,83,80,0.95); top: 0; left: 0; display: none; z-index: 665566;}
.aufrecht p {color: var(--weiss); margin: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.aufrecht .fas {margin: 0 5px;}
@media screen and (max-height: 450px){
.aufrecht {display: block;}
}