Vorlage:Infobox/style.css

.infobox{
    background: #f8f8f8;
    border-radius: 6px; /* Abgerundete Ecken */
    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;}

.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%; /* Container nimmt volle Breite ein */
    margin: 0 0 1.8em 0 /* unterer Abstand zum Text der Infobox*/}

.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; /* Logo wird im Grid angeordnet */
    justify-content: center; /* Zentriert das Logo horizontal */
    align-items: center; /* Zentriert das Logo vertikal */
    padding: 6px;
    background: #fff; /* Hintergrundfarbe */
    border-radius: 6px; /* Runde Ecken */
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten */
    max-width: 85%;
    width: max-content;
    height: max-content;}

.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 img {
    width: 100%; /* Bild nimmt volle Breite ein */
    height: auto;
    margin-bottom: 1.2em;
    height: auto; /* Höhe passt sich dem Seitenverhältnis des Bildes an */
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatteneffekt */}

/* Aspekt-Gruppen */

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

.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: #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%;}

/* Stil für den Titel der Infobox, 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; /* Flexibles Layout für Zentrierung */
    justify-content: center; /* Zentriert den Text horizontal */
    align-items: center; /* Zentriert den Text vertikal */
    z-index: 2; /* Stellt sicher, dass die Überschrift über dem Bild liegt */
    background: #fff;
    border-radius: 6px; /* Runde Ecken */
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25); /* Schatten für Hervorhebung */
    padding: 6px;
    max-width: 85%;
    width: max-content;
    height: max-content;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;}

.title-no-logo.overlap {
    background: #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 4px 16px 0px rgba(0,0,0,0.25);
    padding: 0.4em 0.8em 0.4em 0.8em;
    font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;
    color: #000;}

.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{
    margin: 0;
    border-radius: 6px;
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}

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

.infobox .karte> p{
    display: none;}

.infobox .leaflet-container{
    width: 100% !important; /* Überschreibt die (inline) width-Anweisung */
    border-radius: 6px;
    margin: 0 auto;}

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

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

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

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

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

.infobox .strassenbild p{
    margin: -0.5em 0 0 0;
    color: #AAA;
    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;
    color: #333;
    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%;
    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 */

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

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

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

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

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