Vorlage:Wahldiagramm einfach/Style.css: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied

@@ Zeile 22: / Zeile 22: @@
      flex-direction: row;
      margin: 0;
+}
+/* Wrapper für dd/dt Paare */
+.bar-container {
+    display: contents;
 }
@@ Zeile 68: / Zeile 73: @@
          width: 100% !important;
          box-sizing: border-box;
-         padding-bottom: 2.5em;
+         padding-bottom: 3.5em;
          overflow: visible;
      }
-    /* Container für Diagramm mit Hintergrund */
      dl.vertical {
          justify-content: space-between;
@@ Zeile 83: / Zeile 87: @@
      }
-     /* Balken-Container erweitern für Labels */
+     /* Wrapper wird zu Flex-Container */
+    .bar-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        position: relative;
+    }
      dl.vertical dd {
          background: none;
          overflow: visible;
          position: relative;
-         display: flex;
+         margin: 0;
-        flex-direction: column;
-        align-items: center;
      }
-    /* Labels direkt nach dem Balken */
      dl.vertical dt {
          position: static;
          margin: 5px 0 0 0;
-         width: 100%;
+         width: auto;
+        min-width: 0;
          text-align: center;
          font-size: 85%;
          white-space: nowrap;
-         order: 2;
+         transform: none;
-        flex-shrink: 0;
-    }
-    /* Balken-Bereich definieren */
-    dl.vertical dd::before {
-        content: '';
-        width: 100%;
-        height: 200px;
-        position: relative;
-        order: 1;
      }
-    /* Spans (Balken) anpassen */
      dl.vertical dd span {
          min-width: 100%;
          width: 100%;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        order: 1;
      }
-    /* Trenner */
      .divider {
          width: 1em;