MediaWiki:Common.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

@@ Zeile 1.815: / Zeile 1.815: @@
 }
-/* ==== Biobox – Mobil korrigiert (volle Breite, Icon fix) ==== */
+/* ==== Biobox Reset: Desktop stabil, Mobile korrekt ==== */
-@media screen and (max-width: 900px) {
-   /* Biobox bündig zur Bildschirmkante */
+/* Desktop: klassisch rechts floatend, feste Infoboxbreite */
+.mw-parser-output table.biobox {
+  float: right;
+  clear: right;
+  width: 22em;                 /* ~352px wie Standard-Infoboxen */
+  margin: 0.5em 0 1em 1em;     /* Abstand zum Fließtext */
+  border: 1px solid #c8ccd1;
+  background: #fff;
+  border-collapse: collapse;
+  box-sizing: border-box;      /* verhindert Überlauf durch Padding/Borders */
+  font-size: 90%;
+  line-height: 1.5;
+}
+.mw-parser-output table.biobox td,
+.mw-parser-output table.biobox th {
+  border: 0;
+  padding: 0.2em 0.4em;
+  vertical-align: top;
+  text-align: left;
+}
+.mw-parser-output table.biobox td[colspan="2"] {
+  text-align: center;
+}
+/* Nur das Hauptbild der Biobox – NICHT alle Bilder! */
+.mw-parser-output table.biobox .biobox-img img {
+   display: block;
+  width: 240px;     /* Desktop stabil */
+  height: auto;
+  margin: 0 auto;   /* mittig in der Zelle */
+}
+/* Vorherige „alles-in-der-Biobox-breit“-Regel unbedingt neutralisieren */
+.mw-parser-output table.biobox img {
+  max-width: none;
+  height: auto;
+}
+/* Mobile: volle Inhaltsbreite, kein Überstand, Text darunter */
+@media (max-width: 768px) {
    .mw-parser-output table.biobox {
      float: none !important;
      clear: both !important;
-    display: block !important;
+     width: auto !important;
-     width: 100vw !important;                 /* volle Bildschirmbreite */
+     max-width: 100% !important;
-     max-width: 100vw !important;
+     margin: 0 0 1em 0 !important;
-     margin: 0 calc(-1 * var(--content-padding, 16px)) 1em calc(-1 * var(--content-padding, 16px)) !important;
-    border: 1px solid #c8ccd1;
-    border-radius: 8px;
-    background: #fff;
-    box-sizing: border-box;
-    overflow: hidden;
    }
+   /* Hauptbild mobil auf volle Boxbreite skalieren */
-  /* Tabellenzellen */
+   .mw-parser-output table.biobox .biobox-img img {
-  .mw-parser-output table.biobox td,
-  .mw-parser-output table.biobox th {
-    padding: 0.4em 0.6em;
-    vertical-align: top;
-  }
-   /* Hauptbild: immer volle Breite */
-   .mw-parser-output table.biobox a.image:first-of-type img {
      width: 100% !important;
      height: auto !important;
-    display: block;
-    margin: 0;
    }
+   /* Falls direkt danach eine „Social“-Tabelle mit align=right kommt: entkoppeln */
-   /* Sternzeichen / Icon: nicht vergrößern */
+   .mw-parser-output table.biobox + table[align="right"] {
-   .mw-parser-output table.biobox img[title*="Sternzeichen"],
+     float: none !important;
-  .mw-parser-output table.biobox img[alt*="Sternzeichen"],
+     width: auto !important;
-  .mw-parser-output table.biobox img[alt*="Zodiac"],
+     margin: 0 0 1em 0 !important;
-  .mw-parser-output table.biobox img[src*="Sternzeichen"],
+     align: initial !important;
-  .mw-parser-output table.biobox img[src*="zodiac"] {
-     width: 24px !important;
-     height: auto !important;
-     display: inline-block !important;
-     vertical-align: middle;
-    margin: 0 4px 0 0 !important;
    }
+   /* Ersten Absatz sicher unter der Box starten */
-   /* Textfluss unterhalb der Box */
    .mw-parser-output > p:first-of-type {
      clear: both !important;
    }
 }