.logo-lr
{width:35%;margin:0 auto;margin-bottom:20px}

.button-margin{margin-top:30px}

.button_all {
    margin-bottom: 0px;

}

.buttons-config {
    width: 70%;
}


.lr-titel{
position:absolute;bottom:5px;text-align:center;width:100%;
text-transform:uppercase;
}

.grid-container {
  display: grid;
    gap: 20px 20px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;

  grid-template-areas:
    "grid-1 grid-1 grid-2 grid-2"
    "grid-3 grid-4 grid-2 grid-2"
    "grid-5 grid-5 grid-5 grid-6"
    "grid-7 grid-8 grid-9 grid-9";
}

.grid-1 { grid-area: grid-1; }

.grid-2 { grid-area: grid-2; }

.grid-3 { grid-area: grid-3; }

.grid-4 { grid-area: grid-4; }

.grid-5 { grid-area: grid-5; }

.grid-6 { grid-area: grid-6; }

.grid-7 { grid-area: grid-7; }

.grid-8 { grid-area: grid-8; }

.grid-9 { grid-area: grid-9; }



@media all and (-ms-high-contrast:none) {
  .grid-container {
    display: -ms-grid;
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
    -ms-grid-rows: 1fr 1fr 1fr 1fr;
  }

  .grid-1 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
  }

  .grid-2 {
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
  }

  .grid-3 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .grid-4 {
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  .grid-5 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
  }

  .grid-6 {
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    -ms-grid-column: 4;
    -ms-grid-column-span: 1;
  }

  .grid-7 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 1;
  }

  .grid-8 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
  }

  .grid-9 {
    -ms-grid-row: 4;
    -ms-grid-row-span: 1;
    -ms-grid-column: 3;
    -ms-grid-column-span: 2;
  }
}





@media screen and (max-width:1400px) {
.grid-container {
    gap: 18px 18px;
}
}



@media screen and (max-width:1200px) {
.grid-container {
    gap: 17px 17px;
}

.buttons-config {
    width: 90%;
}



}


@media screen and (max-width:1000px) {
.grid-container {
    gap: 15px 15px;
}


}



@media screen and (max-width:970px) {

.t-config{
height:50px; padding:12px 0 0 10px;font-size: 24px;line-height:24px;  font-size:1.5rem;  line-height:1.5rem;
}
.buttons-config {
    width: 80%;
}


.grid-container {
    gap: 13px 13px;
}


}




@media screen and (max-width:850px) {

.t-config{
height:40px; padding:7px 0 0 10px;font-size: 22px;line-height:20px;  font-size:1.125rem;  line-height:1.25rem;
}

.m-config{margin-top:10px}

}


@media screen and (max-width:800px) {
.grid-container {
    gap: 11px 11px;
}
}



   @media screen and (max-width:770px) {

.t-config{
height:40px; padding:7px 0 0 10px;font-size: 18px;line-height:24px;  font-size:1.125rem;  line-height:1.5rem;
}

.p-config{height:40px}
 .m-config{margin-top:10px !important}
 
 .l-rings{
 font-size: 20px;
    line-height: 26px;
    font-size: 1.25rem;
    line-height: 1.625rem;
 }

}


@media screen and (max-width:700px) {

.buttons-config {
    width: 95%;
}

.t-config{
height:40px; padding:7px 0 0 10px;font-size: 20px;line-height:20px;  font-size:1.25rem;  line-height:1.25rem;
}

.logo-lr
{width:35%}

.lr-titel {
font-size: 12px;
line-height:16px;
font-size: 0.75rem; 
line-height:1.0rem;
}

.grid-container {
margin-top:-20px;
}

.grid-container {
 gap:10px 10px;
}


.l-rings {
font-size: 16px;
line-height:18px;
font-size: 1.0rem; 
line-height:1.25rem;
}

.logo-lr
{width:35%;margin:0 auto;margin-bottom:0px}

.button-margin{margin-top:15px}

}



@media screen and (max-width:602px) {
.grid-container {
 gap:8px 8px;
}



.button_pfeil {
    width: 30px;
    height: 30px;

    background-size: 30px 30px;
}



.button_text {
    height: 30px;
    padding: 4px 0 0 10px;
    font-size: 18px;
    line-height: 18px;
    font-size: 1.125rem;
    line-height: 1.125rem;
}


.button_all {
  
    height: 30px;
}


.t-config{
height:30px; padding:4px 0 0 10px;font-size: 18px;line-height:20px;  font-size:1.125rem;  line-height:1.25rem;
}

}



@media screen and (max-width:520px) {


.l-rings {
font-size: 14px;
line-height:18px;
font-size: 0.875rem; 
line-height:1.25rem;
}

.t-config{
height:30px; padding:4px 0 0 10px;font-size: 16px;line-height:20px;  font-size:1.0rem;  line-height:1.25rem;
}


}


@media screen and (max-width:450px) {
.grid-container {
 gap: 5px 5px;
}



.lr-titel {
font-size: 10px;
line-height:14px;
font-size: 0.625rem; 
line-height:0.875rem;
}


.button_all {
  
    height: 25px;
}

.button_text {
    height: 25px;}
    
   .button_pfeil {
    width: 25px;
    height: 25px;

    background-size: 25px 25px;
}


.button_text {
    height: 25px;
    padding: 2px 0 0 10px;
    font-size: 16px;
    line-height: 16px;
    font-size: 1.0rem;
    line-height: 1.0rem;
}

.t-config{
height:25px; padding:2px 0 0 10px;font-size: 12px;line-height:20px;  font-size:0.75rem;  line-height:1.25rem;
}


.button_all {
  
    height: 20px;
}

}



@media screen and (max-width:380px) {

.button_text {

    padding: 3px 0 0 10px;
    font-size: 14px;
    line-height: 14px;
    font-size:  0.875rrem;
    line-height:  0.875rrem;
}

.l-rings {
font-size: 12px;
line-height:16px;
font-size: 0.75rem; 
line-height:1.0rem;
}


.t-config{
height:25px; padding:2px 0 0 8px;font-size: 10px;line-height:20px;  font-size:0.625rem;  line-height:1.25rem;
}


}