Add inverted logo

src/css/sections/media.css

@@ -6,11 +6,15 @@
   & .logo {
     display: inline-block;
     max-width: 100%;
-    background: #FFF;
+    background: var(--color-neutral-0);
     border-radius: var(--space-s);
     padding: var(--space-m);
   }
 
+  & .logo.inverted {
+    background: var(--color-interview);
+  }
+
   & .logo-square {
     width: 9em;
   }

src/media.pug

@@ -19,6 +19,16 @@ block main
         a.logo.logo-horizontal(href=assetPath("/img/media/einundzwanzig-horizontal.svg") target="_blank")
           img(src=assetPath("/img/media/einundzwanzig-horizontal.svg") alt="Logo horizontal")
 
+      article
+        h2 Logo quadratisch, invertiert
+        a.logo.logo-square.inverted(href=assetPath("/img/media/einundzwanzig-square-inverted.svg") target="_blank")
+          img(src=assetPath("/img/media/einundzwanzig-square-inverted.svg") alt="Logo quadratisch, invertiert")
+
+      article
+        h2 Logo horizontal, invertiert
+        a.logo.logo-horizontal.inverted(href=assetPath("/img/media/einundzwanzig-horizontal-inverted.svg") target="_blank")
+          img(src=assetPath("/img/media/einundzwanzig-horizontal-inverted.svg") alt="Logo horizontal, invertiert")
+
       article
         h2 Telegram Vorlage Gruppenbild
         a.telegram(href=assetPath("/img/media/einundzwanzig-telegram.png") target="_blank")