:root {
    --grey-gradient: linear-gradient(212deg,rgba(154, 152, 150, 0.5) 0%, rgba(123, 120, 116, 0.5) 100%);
    --orange-border: #c35216
}

.break1 {
        display: inline;
}
.img-container {
    position: relative;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*height: 100%;
    margin: 0;    
    */
}



.infoindex {
    position: absolute;
    right: 0;
    bottom: 0;
    text-align: center;
    background-color: #272727b0;
    width: 10rem;
    height: 10rem;
    color: white;
    align-content: center;
    font-size: var(--xx-large);
    display: none;
}

.index-top {

    width: 100%; 
    height: 70vh; 
    min-height: 500px;   
    position: relative;
    color: var(--text);
    background-image: url(../media/webp/bild-vor-dem-laden.webp);
    background-size: cover;
    background-position:left;
    
    animation: wheel 12s infinite steps(1, end);
    
}

.index-top > b{
    position: absolute;
    bottom: 50%;
    right: 10%;
    z-index: 10;
    font-size: var(--xx-large);
    
}
.index-top > b.first{
    animation-timing-function: steps(1, end);
    animation: wText1 12s infinite ease-out;
}
.index-top > b.second{
    animation-timing-function: steps(1, end);
    animation: wText2 12s infinite ease-out;
}
.index-top > b.third{
    animation-timing-function: steps(1, end);
    animation: wText3 12s infinite ease-out;
}
/*@keyframes wheel {
    0%{
        background-image: url(../media/webp/Slider1.webp);
        background-position: top;
    }
    33%{
        background-image: url(../media/webp/Slider2.webp);
        background-position: center;
    }   
    67%{
        background-image: url(../media/webp/Slider3.webp);
        background-position: center;
    }
    100%{
        background-image: url(../media/webp/Slider1.webp);
        background-position: top;
    }
}
@keyframes wText1 {
    0%{
        display: block;
    }
    33%{
        display: none;
    }   
    67%{
        display: none;
    }
    100%{
        display: block;
    }
}
@keyframes wText2 {
    0%{
        display: none;
    }
    33%{
        display: block;
    }   
    67%{
        display: none;
    }
    100%{
        display: none;
    }
}
@keyframes wText3 {
    0%{
        display: none;
    }
    33%{
        display: none;
    }   
    67%{
        display: block;
    }
    100%{
        display: none;
    }
}
*/
.container {
    display: grid;
    grid-template-columns: 5fr 5fr;
    background-color: var(--bg);
    color: var(--text);
    height: max-content;
    overflow: hidden;
    align-items: center;
    position: relative;
    
}

.container:first-child{
    border-top: 1.5rem solid var(--orange);
}

.container > div > *:not(p){
    color: var(--orange);
}
.container > div > h1{
        font-size: var(--xx-large);
        font-weight: 900;
    }
.container > div > a {
    padding: 0.35rem;
    border: 3px solid var(--orange-border);
    border-radius: 20px 0 20px 0;
    color: var(--text);
    text-decoration: none;
    background-color: var(--bg);
    transition: 0.25s ease-in-out all;
    font-size: var(--text-size);
    
}

.container > div > a:hover {
    color: var(--text-accent);
    background-color: var(--orange-border);
    border-radius:0 20px 0 20px ;
}

.container > div> klein {
    font-size: var(xx-small);
}

.container > div:not(.service) > img:not(.left-pos) {
    object-fit: cover;
    object-position:center;
    width: 100%;
    height: 100%;
    transition: all 0.75s ease-in-out;
    position: relative;
}

.container > .overflow{
    width: 100%;
    overflow: hidden;
    height: 100%;
    max-height: 700px;
    position: relative;
   
}
.container > .overflow::after{
    content: attr(data-social);
    position: absolute;
    background-color: #4b4b4ba1;
    color: #ffffff;
    text-decoration: none;
    padding: 0.5em 1em;
    z-index: 1;
    right: 0;
    bottom: 0;
    font-size: var(--large);
    width: 100%;
    text-align: center;
    transition: 0.2s ease-in;
    opacity: 0;
}
.container > .overflow:hover::after{
    opacity: 1;
}



.container > div:not(.overflow) {
    height: max-content;
    font-size: var(x-large);
    padding: 2.5rem;
    padding-left: 4rem;
}

.container > div:not(.overflow) > h1{
    
    padding-bottom: 3rem;
}

.container > div:not(.overflow) > h3{
    font-size: var(--large);
    padding-bottom: 2rem;
}


.container > div:not(.overflow) > p {
    font-size: var(--text-size);
}

.container > .service {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.container > .service > img {
    width: 80%;
    height: auto;
    object-position:center;
}

.container-hub {
    padding: 0;
    margin-top: 5.9rem;
}

.left-pos {
    object-position: left;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: all 0.75s ease-in-out;
    position: relative;
}



.accent {
        background-color: var(--grey);
        color: var(--bg);
    }



.phone{
    display: none;

}




@media(max-width: 1400px){
    .container-hub {
        padding: 0rem;
    }
}

@media(max-width: 1200px){
    .container-hub {
        padding: 0rem;
    }
    
}

@media(max-width: 1060px){
    .container-hub {
        padding: 0;
        margin-top: 7.2rem;
    }
    .container > div {
        padding: 0;
    }
    
    
    .img-container {
        display: none;
    }
    .container:first-child{
    border-top: 0rem solid var(--bg);
    }

    .break1 {
        display: inline;
    }

}
@media(max-width:900px){
    .container > p{ 
        display: none;
    }
    .phone{
        display: grid;
    }
    .pc{
        display: none;
    }
    .container-hub{
        margin-top: 5.4rem;
    }
    .container {
        grid-template-columns: 1fr;
        
    }

    .container > div:not(.overflow) > h1{
        padding-top: 2rem;
        padding-bottom: 0.5rem;
    }
    .container > div:not(.overflow) > h3{
    font-size: var(--large);
    padding-bottom: 0.5rem;
    
    }
    .container:not(:last-child){
        border-bottom: 3rem solid var(--orange);
    }
    .accent {
        background-color: var(--grey);
        color: var(--bg);
    }
}

@media(max-width:500px){
    .container > p{ 
        display: none;
    }
    .container-hub{
        margin-top: 5.4rem;
    }
    .container { 
        grid-template-columns: 1fr;
    }
   
    .container > div > h1{
   
        font-weight: 900;
    }
      .container > div:not(.overflow) {
        padding: 1.5rem;
    }
    
    .accent {
        background-color: var(--grey);
        color: var(--bg);
    }
    
    .index-top {
        min-height: 20rem !important;
    }
}