update

public/generative-energy/styles.css

@@ -14,6 +14,11 @@ h1, h2, h3, h4, h5 {
     font-family: "Roboto Slab", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
 }
 
+.baustelle {
+    text-align: center;
+    display: block;
+}
+
 a.home-btn {
     display: block;
     text-align: center;
@@ -23,6 +28,15 @@ a.home-btn {
     }
 }
 
+span.tag {
+    margin-left: 4px;
+    font-style: italic;
+
+    &::before {
+        content: '#';
+    }
+}
+
 .ge-article {
     .header {
         margin-top: 20px;
@@ -78,28 +92,28 @@ a.home-btn {
         display: none;
     }
 
-    .lang-en *:lang(de) {
+    .lang-en span:lang(de) {
         display: none;
     }
 
-    .lang-de *:lang(en) {
+    .lang-de span:lang(en) {
         display: none;
     }
 }
 
 main {
-    width: 100%;
+    width: calc(100% - 20px);
+    margin: auto;
 }
 
-@media (min-width: 600px) {
+@media (min-width: 900px) {
     main {
-        max-width: 1340px;
-        margin: auto;
+        max-width: 943px;
         min-width: 600px;
-        width: 60%;
     }
 }
 
+
 header {
     margin: auto;
     text-align: center;
@@ -174,22 +188,45 @@ footer {
     input {
         width: 70px;
     }
+
     tr:last-of-type td {
         border-bottom: none;
     }
+
     td {
         border-bottom: 1px solid var(--text-color);
         border-right: 1px solid var(--text-color);
         padding: 10px;
     }
+
     td:last-of-type {
         border-right: none;
     }
+
+    td.right {
+        text-align: center;
+    }
+
     .breathe {
         padding-left: 4px;
         padding-right: 4px;
     }
+
+    .separator::before {
+        content: '—';
+    }
+
     @media (min-width: 600px) {
+        .separator::before {
+            content: ':';
+            padding-left: 4px;
+            padding-right: 4px;
+        }
+
+        td.ratio {
+            text-align: left;
+        }
+
         td.right div {
             display: inline-block;
         }