Vorlage:Infobox/style.css

.infobox{
    background: var(--background-color-neutral-subtle,#f8f9fa);
    border-radius: 6px;
    box-sizing: border-box;
    width: 330px;
    max-width: 330px;
    overflow: hidden;
    float: right;
    clear: both;
    font-size: 85%; 
    margin: 0 0 1.4em 1.4em;
    padding: 1.4em;}

.logo, .bild {
    box-sizing: border-box;}

/* Grid-Container f. Logo & Bild */
.logo-bild-container {
    display: grid;
    grid-template-columns: repeat(25, 4%); /* 25-Spalten-Grid für minutiöse Kontrolle, jede Spalte 4 % der Infobox breit */
    grid-template-rows: repeat(4, auto) 1fr; /* Automatische Höhe für Logo, Grid verbleibender Platz für Bild */
    width: 100%;
    margin: 0 0 1.8em 0;}

.logo img, .bild img {
    height: auto;}

/* Stil für das Logo */
.logo {
    z-index: 2;
    grid-column: 1 / -1; /* Logo nimmt alle Spalten der Grid ein */
    grid-row: 1 / 5; /* Logo erstreckt sich über 5 Zeilen der Grid */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 6px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    max-width: 85%;
    width: max-content;
    height: max-content;}

/* Dark Mode Logo Shadow */
@media screen {
  html.skin-theme-clientpref-night .logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

.logo:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}

/* Dark Mode Logo Hover Shadow */
@media screen {
  html.skin-theme-clientpref-night .logo:hover {
    box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.8), 
                0 0.2rem 0.6rem rgba(0,0,0,0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .logo:hover {
    box-shadow: 0 0.6rem 1.8rem rgba(0,0,0,0.8), 
                0 0.2rem 0.6rem rgba(0,0,0,0.5);
  }
}

.logo img {
    max-height: 100px;
    max-width: 100%;
    width: auto;}

/* Stil für das Bild*/
.bild {
    width: 100%; /* Nimmt die volle Breite ein */
    grid-column: 2 / -1; /* Bild erstreckt sich über Spalte 2 bis Ende */
    grid-row: 4 / -1; /* Bild beginnt in 4. Zeile, um sich mit dem Logo zu überschneiden */}

.bild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}

.bild img {
    width: 100%; /* Bild nimmt volle Breite ein */
    height: auto;
    margin-bottom: 1.2em;
    height: auto;
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}

/* Dark Mode Bild Shadow */
@media screen {
  html.skin-theme-clientpref-night .bild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .bild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

/* Aspekt-Gruppen */

.infobox .aspect-group{
    margin: 0.8em 0 0 0;
    padding: 0.4em 0 0 0;
    border-top: 1px solid var(--border-color-muted)}

.infobox .first{
    border-top: none;}

.infobox .notitle{
    padding-top: 0.8em !important;}

.infobox .sub{
    border-top: none !important;
    margin: 1.5em 0 0 0 !important;}

.infobox .head{
    font-size: 1.1em;
    font-weight: bold;
    line-height: 1.6;
    margin: 1em 0;
    border: 0;
    padding: 0;
    font-family: sans-serif;}

.infobox .title{
    width: max-content;
    margin: 0;
    border-radius: 6px 6px 0 0;
    text-align: left; 
    line-height: 1.3; 
    background: var(--background-color-base,#fff);
    padding: 0.55em 0.8em 0.55em 0.8em;
    font-size: 1.2em;
    font-weight: bold;
    font-family: sans-serif;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    max-width: 85%;}

/* Dark Mode Title Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .title {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .title {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

/* Titel-Stil, wenn kein Logo vorhanden ist */

.title-no-logo {
    grid-column: 1 / -1; /* Überschrift nimmt alle Spalten ein, wie das Logo */
    grid-row: 1 / 5; /* Überschrift erstreckt sich über dieselben Zeilen wie das Logo */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
    background: var(--background-color-base,#fff);
    border-radius: 6px;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    padding: 6px;
    max-width: 85%;
    width: max-content;
    height: max-content;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;}

/* Dark Mode Title-no-logo Shadow */
@media screen {
  html.skin-theme-clientpref-night .title-no-logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .title-no-logo {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

.title-no-logo.overlap {
    background: var(--background-color-base,#fff);
    z-index: 2;}

.infobox .title-noshow{
    display: none;}

/* Stil für den Titel der Infobox, wenn kein Bild vorhanden ist */

.infobox .title-no-img{
    width: max-content;
    margin: 0 0 1.2em 0;
    border-radius: 6px;
    text-align: left;  
    background: #fff;
    box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.18);
    padding: 0.4em 0.8em 0.4em 0.8em;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;}

/* Dark Mode Title-no-img Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .title-no-img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .title-no-img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6), 
                0 0.1rem 0.3rem rgba(0,0,0,0.4);
  }
}

.infobox .motto{
    font-size: 115% !important;
    font-weight: normal;
    padding: 0;
    margin: 0;
    font-style: italic !important;
    text-align: left;}

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

.infobox .map-container{
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}

/* Dark Mode Map Container Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .map-container {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .map-container {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

.infobox .karte p{
    display: none !important;}

.infobox .leaflet-container{
    border-radius: 6px;}

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

/* Dark Mode Strassenschild Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .strassenschild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .strassenschild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

.strassenschild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}

.nocorner img{
    border-radius: 0px 6px 6px 6px !important;}

.infobox .strassenbild{
    margin: 1.2em 0 1.2em 0;}

.strassenbild:hover {
    transform: scale(1.05);
    transition: transform 0.5s ease-in;
    border-color: rgba(0,0,0,0.12);
    z-index: 2; /* Erhöhter z-index beim Hover */
}

.infobox .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;}

/* Dark Mode Strassenbild Shadow */
@media screen {
  html.skin-theme-clientpref-night .infobox .strassenbild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .strassenbild img {
    box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7), 
                0 0.1rem 0.4rem rgba(0,0,0,0.5);
  }
}

.infobox .unter_logo{
    padding-top: 2em;}

.infobox .strassenbild p{
    margin: -0.5em 0 0 0;
    font-size: 11px;}

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

.infobox dl{
    display: flex;
    flex-wrap: wrap;
    margin: 0;}

.infobox dl dt{
    width: 35%;
    margin: 0 0 0.4em 0;
    padding: 0 2% 0 0;
    font-weight: bold;
    display: flex;}

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

@media (max-width: 700px) and (min-width: 585px){
.infobox{
    max-width: none;
    width: 100%;
    padding: 2em 2.5em;}

.infobox .title{
    max-width: 75% !important;    
    margin-left: 0 !important;}

.infobox .media-container{
    display: flex;}

.infobox .map-container{
    width: 49%;
    height: max-content;
    margin-right: 2%;}

.noscale{
    width: 100% !important;
    margin: 0! important;}

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

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

.infobox .unternehmensbild{
    width: 49%;
    margin-top: 0;}

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

.infobox .unternehmensbild p{
    text-align: left;}

.infobox .strassenbild p{
    text-align: left;}

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

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

.infobox .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;}

.infobox{
    max-width: none;
    width: 100%;}

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

.infobox .services dt{
    display: flex;}

.noscale{
    width: 100% !important;
    margin: 0! important;}

}

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

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

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

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

.noscale{
    width: 100% !important;
    margin: 0! important;}

}

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

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

.infobox .services img{
    display: none;}

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

.noscale{
    width: 100% !important;
    margin: 0! important;}

}

/* Toggle */

.infobox .mw-collapsible-toggle {
    width: max-content;
    padding: 0.1rem 0.4rem;
    height: max-content;
    background-color: var(--background-color-interactive-subtle,#f8f9fa);
    box-shadow: rgba(0, 0, 0, .1) 0 2px 2px;
    border: 1px solid var(--border-color-muted,#dadde3);
    border-radius: 4px;
    text-align: center;
    line-height: 22px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all .3s;
    display: flex;
    user-select: none;
    touch-action: manipulation;
    white-space: pre;
    float: right;
}

.infobox.mw-collapsed .mw-collapsible-toggle:before {
    content: 'Infobox erweitern';}

.infobox:not(.mw-collapsed) .mw-collapsible-toggle:before {
    content: 'Minimieren';}

.infobox .mw-collapsible-toggle:hover {
    background-color: var(--background-color-button-quiet--hover,#F8F9FA);}

/* Dark mode minimieren */
@media screen {
  html.skin-theme-clientpref-night .infobox .mw-collapsible-toggle{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .mw-collapsible-toggle{
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}


/* Dark mode minimieren hover */
@media screen {
  html.skin-theme-clientpref-night .infobox .mw-collapsible-toggle:hover {
    background-color: #3a3a3a;
    border-color: #505050;
  }
}

@media screen and (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .infobox .mw-collapsible-toggle:hover {
    background-color: #3a3a3a;
    border-color: #505050;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  }
}