Vorlage:Infobox/style.css

#infobar{
    background: #f8f8f8;
    border-radius: 6px;
    box-sizing: border-box;
    max-width: 330px;
    overflow: hidden;
    float: right;
    clear: both;
    font-size: 85%; 
    margin: 0 0 1.4em 1.4em;
    padding: 1.4em;}

#infobar .aspect-group{
    margin: 0.8em 0 0 0;
    padding: 0.4em 0 0 0;
    border-top: 1px solid #ccc;}

#infobar .aspect-group-first{
    border-top: none;}

#infobar .head{
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em 0;
    border: 0;
    padding: 0;
    font-family: sans-serif;}

#infobar .title{
    width: max-content;
    margin: 0;
    border-radius: 6px 6px 0 0;
    text-align: left;  
    background: #fff;
    color: #000;
    padding: 0.55em 0.8em 0.55em 0.8em;
    font-size: 1.2em;
    font-weight: bold;
    font-family:sans-serif;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    max-width: 85%;}

#infobar .title-no-img{
    width: max-content;
    margin: 0 0 1.2em 0;
    border-radius: 6px;
    text-align: left;  
    background: #fff;
    color: #000;
    padding: 0.4em 0.8em 0.4em 0.8em;
    font-size: 1.2em;
    font-weight: bold;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}

#infobar .media-container{
    margin: 1.2em 0 0 0;}

#infobar .map-container{
    margin: 0;
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    height: max-content;}

#infobar .map-container .karte{
    width: 100% !important;
    border-radius: 6px;
    border: none !important;
    mask-image: radial-gradient(white, black);}

#infobar .karte> p{
    display: none;}

#infobar .leaflet-container{
    width: 100% !important; /* Override the (inline) width property */
    border-radius: 6px;
    margin: 0 auto;}

#infobar .strassenschild img{
    width: 100%;
    border-radius: 0 6px 6px 6px;
    height: auto !important;
    filter: grayscale(100%);
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.8em;
    display: block;}

#infobar .strassenbild{
    margin-top: 1.2em;}

#infobar .strassenbild img{
    width: 100%;
    border-radius: 6px;
    height: auto !important;
box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.2em;
    display: block;}

#infobar .strassenbild p{
   text-align: left;
   margin-bottom: 0;
   color: #3c3c3c;}

#infobar .services img{
   vertical-align: text-bottom;
   margin-right: 0.5em;
   border-radius: 4px;}

#infobar dl{
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   hyphens: auto !important;}

#infobar dl dt{
   width: 35%;
   margin: 0 0 0.4em 0;
   padding: 0 2% 0 0;
   font-weight: bold;
   color: #333;
   display: flex;}

#infobar dl dd{
   width: 63%;
   margin: 0 0 0.4em 0;
   text-align: right;}

@media (max-width: 700px) and (min-width: 585px){
  #infobar{
    max-width: none;
    width: 100%;
    padding: 2em 2.5em;}
  
 #infobar .title{
    max-width: 75% !important;    
    margin-left: 0 !important;}

  #infobar .media-container{
    display: flex;}

  #infobar .map-container{
    width: 49%;
    margin-right: 2%;}

  #infobar .strassenbild{
    width: 49%;
    margin-top: 0;}

  #infobar .strassenbild img{
    height: 180px !important;
    object-fit: cover;
    margin-left: 0 !important;
    display: block;}

  #infobar .strassenbild p{
    text-align: right;}

  #infobar .strassenschild img{
    width: 90% !important;
    margin-left: 0 !important;
    display: block;}

  #infobar .leaflet-container{
    height: 180px !important;}

  #infobar .services dt{
    display: inline-flex;}
}

@media (max-width: 584px) and (min-width: 431px){
   .infobox-pagewide {
    font-size: 80% !important;}

  .infobox-inline {
    display: flex;
    margin-bottom: 1.2em;
    max-width: 100% !important;}

  #infobar{
    max-width: none;
    width: 100%;}

  #infobar .title{
    max-width: 90% !important;}

#infobar .services dt{
    display: flex;}
}

@media (max-width: 430px) and (min-width: 401px){
   #infobar{
    max-width: none;
    width: 100%;}

/* #infobar dl dt{
    display: grid;} */

   .infobox-pagewide {
    font-size: 75% !important;}

  .infobox-inline-icon, .infobox-inline-img {
    flex-shrink: 1 !important;}

  #infobar .title{
    max-width: 85% !important;}
}

@media (max-width: 400px){
   #infobar{
    max-width: none;
    width: 100%;}

   .infobox-pagewide {
    font-size: 75% !important;}

   #infobar .services img{
    display: none;}

  #infobar .title{
    max-width: 85% !important;}
}

/* Toggle */

body.skin-minerva .mw-collapsible-toggle{
    display: none !important;}

#infobar .mw-collapsible-toggle {
    width: max-content;
    padding: 0 0.5em;
    height: max-content;
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    color: #3c4043;
    border-radius: 4px;
    box-shadow: 0 0 3px #ccc;
    text-align: center;
    line-height: 22px;
    font-size: 100%;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    user-select: none;
    touch-action: manipulation;
    white-space: pre;
    float: right;
}

#infobar.mw-collapsed .mw-collapsible-toggle:before {
    content: 'Infobox erweitern';
    color: #333;}

#infobar:not(.mw-collapsed) .mw-collapsible-toggle:before {
    content: 'Minimieren';
    color: #333;}

#infobar .mw-collapsible-toggle:hover {
    background-color: #f5f5f5;
    border-color: #dadce0;
    box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}