@@ Zeile 1: / Zeile 1: @@
 .infobox{
-     background: #f8f8f8;
+     background: var(--background-color-neutral-subtle,#f8f9fa);
      border-radius: 6px;
      box-sizing: border-box;
+    width: 330px;
      max-width: 330px;
      overflow: hidden;
@@ Zeile 10: / Zeile 11: @@
      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.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.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.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.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.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.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 #ccc;}
+     border-top: 1px solid var(--border-color-muted)}
+.infobox .first{
+    border-top: none;}
-.infobox .aspect-group-sub{
+.infobox .notitle{
-     margin: 1.5em 0 0 0;}
+     padding-top: 0.8em !important;}
-.infobox .aspect-group-first{
+.infobox .sub{
-     border-top: none;}
+     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;
@@ Zeile 36: / Zeile 152: @@
      text-align: left;
      line-height: 1.3;
-     background: #fff;
+     background: var(--background-color-base,#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);
+     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.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.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.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.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{
@@ Zeile 51: / Zeile 225: @@
      text-align: left;
      background: #fff;
-     color: #000;
+     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;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
+    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.1rem 0.3rem rgba(0,0,0,0.4);
+  }
+}
-.infobox .title-noshow{
+@media screen and (prefers-color-scheme: dark) {
-     display: none;}
+  html.skin-theme-clientpref-os .infobox .title-no-img {
+     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.6),
+0.1rem 0.3rem rgba(0,0,0,0.4);
+  }
+}
 .infobox .motto{
-     font-size: 120% !important;
+     font-size: 115% !important;
      font-weight: normal;
-     padding: 0.6em 0;
+     padding: 0;
+    margin: 0;
      font-style: italic !important;
-     text-align: center;}
+     text-align: left;}
 .infobox .media-container{
@@ Zeile 71: / Zeile 258: @@
 .infobox .map-container{
-    margin: 0;
      border-radius: 6px;
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);
+     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
-     height: max-content;}
+/* 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.1rem 0.4rem rgba(0,0,0,0.5);
+  }
+}
-.infobox .map-container .karte{
+@media screen and (prefers-color-scheme: dark) {
-     width: 100% !important;
+  html.skin-theme-clientpref-os .infobox .map-container {
-    border-radius: 6px;
+     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
-    border: none !important;
+0.1rem 0.4rem rgba(0,0,0,0.5);
-    mask-image: radial-gradient(white, black);}
+  }
+}
-.infobox .karte> p{
+.infobox .karte p{
-     display: none;}
+     display: none !important;}
 .infobox .leaflet-container{
-    width: 100% !important; /* Override the (inline) width property */
+     border-radius: 6px;}
-     border-radius: 6px;
-    margin: 0 auto;}
 .infobox .strassenschild img{
@@ Zeile 101: / Zeile 293: @@
      display: block;}
-.infobox .logo{
+/* Dark Mode Strassenschild Shadow */
-     max-width: 85%;
+@media screen {
-    background: #fff;
+  html.skin-theme-clientpref-night .infobox .strassenschild img {
-    margin-bottom: 0.8em;
+     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
-    padding: 6px;
+0.1rem 0.4rem rgba(0,0,0,0.5);
-    border-radius: 6px;
+  }
-     box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.25);}
+}
+@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.1rem 0.4rem rgba(0,0,0,0.5);
+  }
+}
-.infobox .logo img{
+.strassenschild:hover {
-     display: block;
+     transform: scale(1.05);
-     object-fit: contain;
+     transition: transform 0.5s ease-in;
-     width: 100%;
+     border-color: rgba(0,0,0,0.12);
-     max-height: 110px;
+     z-index: 2; /* Erhöhter z-index beim Hover */
-    height: auto !important;
+}
-    margin-left: auto;
-    margin-right: auto;}
 .nocorner img{
@@ Zeile 122: / Zeile 319: @@
 .infobox .strassenbild{
-     margin-top: 1.2em;}
+     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{
@@ Zeile 134: / Zeile 338: @@
      display: block;}
-.infobox .bild{
+/* Dark Mode Strassenbild Shadow */
-     margin-top: 1.2em;}
+@media screen {
+  html.skin-theme-clientpref-night .infobox .strassenbild img {
+     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
+0.1rem 0.4rem rgba(0,0,0,0.5);
+  }
+}
-.infobox .overlap{
+@media screen and (prefers-color-scheme: dark) {
-     background: #fff;
+  html.skin-theme-clientpref-os .infobox .strassenbild img {
-    position: absolute;
+     box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.7),
-    top: 0;
+0.1rem 0.4rem rgba(0,0,0,0.5);
-    z-index: 2;}
+  }
+}
-.infobox .bild img{
+.infobox .unter_logo{
-     width: 100%;
+     padding-top: 2em;}
-    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 .strassenbild p{
      margin: -0.5em 0 0 0;
-    color: #AAA;
      font-size: 11px;}
@@ Zeile 173: / Zeile 375: @@
      padding: 0 2% 0 0;
      font-weight: bold;
-    color: #333;
      display: flex;}
@@ Zeile 187: / Zeile 388: @@
      padding: 2em 2.5em;}
-.infobox .overlap{
-    top: 10px !important;}
 .infobox .title{
      max-width: 75% !important;
@@ Zeile 199: / Zeile 397: @@
 .infobox .map-container{
      width: 49%;
+    height: max-content;
      margin-right: 2%;}
+.noscale{
+    width: 100% !important;
+    margin: 0! important;}
 .infobox .strassenbild{
@@ Zeile 251: / Zeile 454: @@
      max-width: none;
      width: 100%;}
-.infobox .overlap{
-    top: 10px !important;}
 .infobox .title{
@@ Zeile 260: / Zeile 460: @@
 .infobox .services dt{
      display: flex;}
+.noscale{
+    width: 100% !important;
+    margin: 0! important;}
 }
@@ Zeile 266: / Zeile 471: @@
      max-width: none;
      width: 100%;}
-.infobox .overlap{
-    top: 10px !important;}
 .infobox-pagewide {
@@ Zeile 278: / Zeile 480: @@
 .infobox .title{
      max-width: 85% !important;}
+.noscale{
+    width: 100% !important;
+    margin: 0! important;}
 }
@@ Zeile 284: / Zeile 491: @@
      max-width: none;
      width: 100%;}
-.infobox .overlap{
-    top: 10px !important;}
 .infobox-pagewide{
@@ Zeile 296: / Zeile 500: @@
 .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;
+     padding: 0.1rem 0.4rem;
      height: max-content;
-     background-color: #f8f9fa;
+     background-color: var(--background-color-interactive-subtle,#f8f9fa);
-     border: 1px solid #f8f9fa;
+    box-shadow: rgba(0, 0, 0, .1) 0 2px 2px;
-    color: #3c4043;
+     border: 1px solid var(--border-color-muted,#dadde3);
      border-radius: 4px;
-    box-shadow: 0 0 3px #ccc;
      text-align: center;
      line-height: 22px;
-     font-size: 100%;
+     font-size: 0.8rem;
      cursor: pointer;
      transition: all .3s;
@@ Zeile 325: / Zeile 530: @@
 .infobox.mw-collapsed .mw-collapsible-toggle:before {
-     content: 'Infobox erweitern';
+     content: 'Infobox erweitern';}
-    color: #333;}
 .infobox:not(.mw-collapsed) .mw-collapsible-toggle:before {
-     content: 'Minimieren';
+     content: 'Minimieren';}
-    color: #333;}
 .infobox .mw-collapsible-toggle:hover {
-     background-color: #f5f5f5;
+     background-color: var(--background-color-button-quiet--hover,#F8F9FA);}
-     border-color: #dadce0;
-     box-shadow: rgba(0, 0, 0, .1) 0 1px 1px;}
+/* 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);
+  }
+}

Vorlage:Infobox/style.css: Unterschied zwischen den Versionen