:root {
         --box_1_bg: #e57507;
         --box_1_bgc: #070be5;
         --box_2_bg: #ffef16;
         --box_2_bgc: #e016ff;
         --box_3_bg: #41ed34;
/*         --box_3_bg: #1ec911;         */
         --box_3_bgc: #c9111e;
         --box_4_bg: #0700d9;
         --box_4_bgc: #d97000;
         --box_5_bg: #da12e8;
         --box_5_bgc: #e8e112;
         --box_6_bg: #c20e1a;
         --box_6_bgc: #41e633;
         }

/* Objekte einblenden */

.fade_in {

    animation-name: einblenden;
    animation-duration: 4s;
    -moz-animation: einblenden 2s; /* Für Firefox */
    -moz-animation-delay: 3s; /* Für Firefox */
    -webkit-animation: einblenden 2s; /* Für Safari und Chrome */
    -o-animation: einblenden 2s; /* Für Opera */
}

@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}

@-moz-keyframes einblenden { /* Firefox */
    from { opacity:0; }
    to { opacity:1; }
}

@-webkit-keyframes einblenden { /* Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}

@-o-keyframes einblenden { /* Opera */
    from { opacity:0; }
    to { opacity:1; }
}

/* Texte in Box 3 auseinander driften lassen */

#shift_text_31 {
   animation-name: Wait-And-Start_1;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_1 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(70px) translateY(90px)}
}

#shift_text_32 {
   animation-name: Wait-And-Start_2;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_2 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(-70px) translateY(90px)}
}
#shift_text_33 {
   animation-name: Wait-And-Start_3;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_3 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(-120px) translateY(25px)}
}

#shift_text_34 {
   animation-name: Wait-And-Start_4;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_4 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(-40px) translateY(-90px)}
}

#shift_text_35 {
   animation-name: Wait-And-Start_5;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_5 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(50px) translateY(-30px)}
}

#shift_text_36 {
   animation-name: Wait-And-Start_6;
   animation-duration: 3s;
   animation-delay: 0.5s;
   animation-fill-mode: forwards;
   }

@keyframes Wait-And-Start_6 {
    from { transform: rotate(0deg) }
    to   { transform: translateX(70px) translateY(25px)}
}


.logo_lp{
         position:fixed;
         top:8px;
         left;0px;
         }
.box_all {
      position: relative;
      width: 100%;
      height: 470px;
      margin: 0%;
      top: 0px;
      left:0px;
      overflow: hidden;
      }
.box_1 {
         background-color: var(--box_1_bg);
         color: var(--box_1_bgc);
         }
td.underline_1{
         border-bottom: 1px solid;
         border-bottom-color: var(--box_1_bgc);
         }
.box_1c:hover{
         background-color: var(--box_1_bgc);
         color:var(--box_1_bg);
         }
.box_1c:hover .underline_1{
         border-bottom-color: var(--box_1_bg);
         }
.box_2 {
         background-color: var(--box_2_bg);
         color:var(--box_2_bgc);
         }
td.underline_2{
         border-bottom: 1px solid;
         border-bottom-color: var(--box_2_bgc);
         }
.box_2c:hover{
         background-color: var(--box_2_bgc);
         color:var(--box_2_bg);
         }
.box_2c:hover .underline_2{
         border-bottom-color: var(--box_2_bg);
         }
.box_3 {
         background-color: var(--box_3_bg);
         color:var(--box_3_bgc);
         }
td.underline_3{
         border-bottom: 1px solid;
         border-bottom-color: var(--box_3_bgc);
         }
.box_3c:hover{
         background-color: var(--box_3_bgc);
         color:var(--box_3_bg);
         }
.box_3c:hover .underline_3{
         border-bottom-color: var(--box_3_bg);
         }
.box_4 {
         background-color: var(--box_4_bg);
         color:var(--box_4_bgc);
         }
td.underline_4{
         border-bottom: 1px solid;
         border-bottom-color: var(--box_4_bgc);
         }
.box_4c:hover{
         background-color: var(--box_4_bgc);
         color:var(--box_4_bg);
         }
.box_4c:hover .underline_4{
         border-bottom-color: var(--box_4_bg);
         }

.box_5 {
         background-color: var(--box_5_bg);
         color:var(--box_5_bgc);
         }
td.underline_5{
         border-bottom: 1px solid;
         border-bottom-color: var(--box_5_bgc);
         }
.box_5c:hover{
         background-color: var(--box_5_bgc);
         color:var(--box_5_bg);
         }
.box_5c:hover .underline_5{
         border-bottom-color: var(--box_5_bg);
         }
.box_6 {
         background-color: var(--box_6_bg);
         color:var(--box_6_bgc);
         }
td.underline_6{
         border-bottom: 1px solid;
         border-bottom-color: #var(--box_6_bgc);
         }
.box_6c:hover{
         background-color: var(--box_6_bgc);
         color:var(--box_6_bg);
         }
.box_6c:hover .underline_6{
         border-bottom-color: var(--box_6_bg);
         }
.box_unten{
     position: absolute;
     width:80%;
     bottom:30px;
     left:10%;
     font-weight:normal;
     font-size:11pt;
}

.object_center{

  }
/* 20% Zoom beim Mouse-over*/

.zoomin {
  padding: 0px;
  border: 0px solid black;
  transition: transform 1s; /* Animation zoomen*/
  width: 100%;
  height: 470px;
}

.wrap{
    cursor: pointer;
}

.zoomin:hover{

  transform: scale(1.2); /* (120% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.object_middle{
         position:absolute;
         width: 100%;
         height: 380px;
         border: 0px solid black;
         display: flex;
         justify-content: center;
         align-items: center;
         }
.text_middle{
         position:relative;
         top: 130px;
         border: 0px solid black;
         display: flex;
         font-weight:bold;
         font-size:19pt;
         text-align:center;justify-content: center;
         align-items: center;
         }


/*Max 3 Boxen pro Seite, auch auf Bildschirmen mit >1920px => 1920/4= 480px als Grenze*/

@media (max-width: 1920px) {

        .grid_container{
         display:grid;
         grid-gap:0px;
         grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))
         }
}

@media (min-width: 1600px) and (max-width: 1990px) {

        .grid_container{
         display:grid;
         grid-gap:0px;
         grid-template-columns: repeat(auto-fit, minmax(500px, 1fr))
         }
}

@media (min-width: 1991px) and (max-width: 2630px)  {

        .grid_container{
         display:grid;
         grid-gap:0px;
         grid-template-columns: repeat(auto-fit, minmax(660px, 1fr))
         }
}
@media (min-width: 2631px) {

        .grid_container{
         display:grid;
         grid-gap:0px;
         grid-template-columns: repeat(auto-fit, minmax(850px, 1fr))
         }
}



hr { background: black; height: 2px; border: none }