@media only screen and (max-width: 1920px) {
body{
 background-color: black;
 color: white;
 text-align: center;
 font-size: 100%;
}

h1{
 color: Tomato;
 font-size: 4em;
}

h2{
 color: Tomato;
 font-size: 2.3em;
}

p{
 font-size: 1.6em;
}
progress{
 width: 90%;
 height: 30px;
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 0px;
 margin-top: 0px;
}
.inline{
display: inline;
}
details summary{
 cursor: pointer;
 transition: margin 150ms ease-out;
}
details[open] summary ~ *{
 margin-bottom: 15px;
 animation: sweepin 500ms ease-in-out;
}

@keyframes sweepin{
0% {opacity:0; margin-top:0px;}
100% {opacity:1; margin-top: 10px;}
}

.shops_info{
 height: 22vh;
 border: 2px solid #ff3333;
 border-radius: 10px;
 width: 60%;
 margin-top: 10px;
 margin-bottom: 15px;
 margin-left: auto;
 margin-right: auto;
 background: #222222;
}
.act_a{
 color: white;
 text-decoration: none;
}

.act_a:hover, a:focus{
 color: Tomato;
 text-decoration:underline;
}
.act-grid {  display: grid;
  grid-template-columns: 0.4fr 1.9fr 0.4fr;
  grid-template-rows: 0.7fr 2.3fr 0.3fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". act-name act-logo"
    ". act-information act-kontakt"
    "act_link act_link act_link";
  width: 75%;
  margin: auto;
}

.act-name { grid-area: act-name;}

.act-logo { grid-area: act-logo; margin-top: auto;}

.act-information { grid-area: act-information; }

.act-kontakt {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.8fr 1.2fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "act_kontakt_adresse act_kontakt_adresse act_kontakt_adresse"
    "act_kontakt_zeiten act_kontakt_zeiten act_kontakt_zeiten"
    "act_kontakt_ansprech act_kontakt_ansprech act_kontakt_ansprech";
  grid-area: act-kontakt;
}

.act_kontakt_adresse { grid-area: act_kontakt_adresse; }

.act_kontakt_zeiten { grid-area: act_kontakt_zeiten; }

.act_kontakt_ansprech { grid-area: act_kontakt_ansprech; }

.act_link { grid-area: act_link; }

.act_div details[open] summary{
opacity:0.5;
}

.act_warning{
 font-size: 0.75em;
 color: #ffcccc;
}

.act_informationen_text{
 font-size:0.78em;
}

.navbar_ul{
 width:100%;
 max-width:100%;
 font-size: 2em;
 font-family: "Calibri", Arial, sans-seriv;
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 display:flex;
 background-color: #221111;
 border-radius:10px;
 justify-content: center;
 border: 2px solid #ff3333;
}

.navbar_li{
 display: inline;
 float: left;
}

.navbar_a{
 display: block;
 text-align: center;
 padding: 14px 16px;
 color: white;
 background-color: #221111;
 text-decoration: none;
 border: 2px solid transparent;
 border-radius: 5px;
}

.navbar_a:hover{
 background-color: #110404;
 border: 2px solid #110404;
}

.navbar_active{
 display: block;
 text-align: center;
 padding: 14px 16px;
 color: white;
 background-color: #ff1111;
 text-decoration: none;
 border: 2px solid #ff1111;
 border-radius: 5px;
}

.navbar_active:hover{
 background-color: #ff0000;
}

#divSchild {
padding-top: 30px;
}
#imgSchild{
 width:300px;
 max-width:100%;
 height: auto;
} 
.karte{
 margin: auto;
}
.divInfoBox{
 width: 100%;
 display:flex;
 justify-content: center;
}
.divInfo{
 width: 24.5%;
 min-height: 5vh; 
 max-width: 24.5%;
 background-color: #221111;
 margin: 0;
 margin-left: auto;
 margin-right: auto;
 padding-top: 3px;
 padding-bottom: 3px;
 border: 2px solid #ff3333;
 border-radius: 10px;
 float: left;
}
.divInfo p{
 margin: 0.25vh;
}
.divInfo p strong{
 font-size: 1.4em;
}
