update

public/generative-energy/styles.css

@@ -1,5 +1,6 @@
 :root {
     --text-color: #313131;
+    --header-color: rgb(114, 132, 114);
     --bg-color-box: #ffffff;
     --bg-color: #f6f9f6;
 }
@@ -12,6 +13,7 @@ body {
 
 h1, h2, h3, h4, h5 {
     font-family: "Roboto Slab", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    color: var(--header-color);
 }
 
 .baustelle {
@@ -38,18 +40,22 @@ span.tag {
 }
 
 .ge-article {
+    .title {
+        text-align: center;
+    }
+
     .header {
         margin-top: 20px;
         display: flex;
         justify-content: space-between;
     }
 
-    p {
+    [data-tunit] {
         position: relative;
         transition: background 0.15s;
     }
 
-    p.swap {
+    [data-tunit].swap {
         background-color: #bde4ff;
     }
 
@@ -72,31 +78,31 @@ span.tag {
         background-color: lightgray;
     }
 
-    p:hover > button.swap {
+    [data-tunit]:hover > button.swap {
         opacity: 100%;
     }
 
-    .lang-en p.swap > span:lang(de) {
+    .lang-en [data-tunit].swap :lang(de) {
         display: revert;
     }
 
-    .lang-en p.swap > span:lang(en) {
+    .lang-en [data-tunit].swap :lang(en) {
         display: none;
     }
 
-    .lang-de p.swap > span:lang(en) {
+    .lang-de [data-tunit].swap :lang(en) {
         display: revert;
     }
 
-    .lang-de p.swap > span:lang(de) {
+    .lang-de [data-tunit].swap :lang(de) {
         display: none;
     }
 
-    .lang-en span:lang(de) {
+    .lang-en [data-tunit] :lang(de) {
         display: none;
     }
 
-    .lang-de span:lang(en) {
+    .lang-de [data-tunit] :lang(en) {
         display: none;
     }
 }
@@ -113,6 +119,9 @@ main {
     }
 }
 
+li {
+    margin-bottom: 8px;
+}
 
 header {
     margin: auto;