diff --git a/styleguide-website/index.html b/styleguide-website/index.html
index 235370eb2cf9a144689908569d3bce680f43ed09..6340f14098ceae421177ec9e9592df4f2ddbdedf 100644
--- a/styleguide-website/index.html
+++ b/styleguide-website/index.html
@@ -14,7 +14,9 @@
          alt="Einige neongrüne Streifen mit der Aufschrift Cyber; angelehnt an das in vielen Hacking-Spaces beliebte Cyber Klebeband"/>
 </header>
 <main>
-    <h1> Divoc - bridging bubbles - Styleguide </h1>
+    <div>
+        <h1> Divoc - bridging bubbles - Styleguide </h1>
+    </div>
     <!-- Lights on, reduce motion etc. -->
     <section aria-labelledby="vision">
         <h2 id="vision"> Gesellschaften in Blasen </h2>
@@ -30,22 +32,29 @@
         <hr/>
     </section>
     <section aria-labelledby="logo">
-        <h2 id="logo">das Logo</h2>
+        <div>
+            <h2 id="logo">das Logo</h2>
+        </div>
         <img src="svg/logo.svg" id="logo-img"
              alt="Logo vor Hintergund. Ein grünes Kaninchen fliegt ein Seifenblasen-Ufo. Titel: DiVOC Untertitel: バブルス ブリッジ. Im Hintergrund sind ganz viele verschiedene bunte Kreaturen im gleichen Stil in Blasen: Otter, Aliens, Haie und Winkekätzchen "/>
         <p>
             Das DiVOC Bunny macht sich auch dieses mal wider zu euch in's Wohnzimmer auf und bekommt diesmal jedoch Gesellschaft: Kreiert euch im <a href="https://bb3.tils.pw">Logogenerator von Tilcreator</a> eine Kreatur für eure Profilbilder und Projekte.
         </p>
-        <h3>mögliche Adaptionen</h3>
+        <div>
+            <h3>mögliche Adaptionen</h3>
+        </div>
         <div id="logo-alt-container">
             <div id="logo-alt-first-container">
                 <p>Es fehlt noch eine Kreatur? Baut euch ein ganz eigenes Logo aus den Vorlagen im Gitlab. Neben aufgeräumten SVGs, die sich gut fürs Plotten eignen, gibt es da auch die Rohversionen zum hacken.</p>
                 <p>Oder noch viel besser: adaptiert euer eigenes Logo und nimmt dafür inspiration von unserem Design.</p>
+            </div>
         </div>
         <hr/>
     </section>
     <section aria-labelledby="color-scheme">
-        <div><h2 id="color-scheme">das Farbschema</h2></div>
+        <div>
+            <h2 id="color-scheme">das Farbschema</h2>
+        </div>
         <p>
           Das Farbschema basiert auf 5 Basisfarben - die je in einer "light" und einer "dark" Variante existieren und 5 dazugehörigen dunklen Gradienten. </p>
         <p>
@@ -76,9 +85,15 @@
         <hr/>
     </section>
     <section aria-labelledby="text-demo">
-        <h2 id="text-demo">Text-Demo</h2>
-        <span class="mock-h1">Überschrift 1</span>
-        <span class="mock-h2">Überschrift 2</span>
+        <div>
+            <h2 id="text-demo">Text-Demo</h2>
+        </div>
+        <div>
+            <span class="mock-h1">Überschrift 1</span>
+        </div>
+        <div>
+            <span class="mock-h2">Überschrift 2</span>
+        </div>
         <p>
             Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
             dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
@@ -100,7 +115,9 @@
         <hr/>
     </section>
     <section aria-labelledby="ui-components">
-        <h2 id="ui-components">UI-Elemente</h2>
+        <div>
+            <h2 id="ui-components">UI-Elemente</h2>
+        </div>
         <div id="ui-components-container">
             <button>Button</button>
             <a href="#ui-components" class="ignore-visited">Link</a>
@@ -112,7 +129,9 @@
         </div>
     </section>
     <section aria-labelledby="Pixelwelt">
-        <h2 id="pixelwelt">Pixelwelt</h2>
+        <div>
+            <h2 id="pixelwelt">Pixelwelt</h2>
+        </div>
         <p>
           Hier entsteht noch ein Abschnitt zum Thema Pixelwelt. Bitte habt einen kleinen Augenblick geduld!
         </p>
diff --git a/styleguide-website/styleguide.css b/styleguide-website/styleguide.css
index b1571d793b3a471e5b0d95186feb23c126dc3d3d..939ebba494f43acf10e38741d13bb675ffafd9d1 100644
--- a/styleguide-website/styleguide.css
+++ b/styleguide-website/styleguide.css
@@ -21,9 +21,8 @@
     --light-highlight-color: #5152E6;
     --light-secondary-highlight-color: #57C0A2;
     --light-tertiary-highlight-color: #9945C5;
-    --light-main-bg-color: #FFFFFF;
-    --light-secondary-bg-color: #FFFDBE;
-    --light-tertiary-bg-color: #FEFEFE;
+    --light-main-bg-color: #fff0e0;
+    --light-secondary-bg-color: #DED6E5;
     --light-colors-container-background: #F5F5F5;
 }
 
@@ -120,8 +119,6 @@ h2, .mock-h2 {
     margin: 0.75rem 0.75rem 0.75rem -0.25rem;
     line-height: calc(100% - 10px);
     font-weight: bold;
-    }
-
 }
 
 h3, h4, h5, .mock-h3, .mock-h4, .mock-h5 {
@@ -274,8 +271,31 @@ input {
     padding: 0.25rem;
 }
 
+input, textarea {
+    background: var(--secondary-bg-color);
+    color: var(--text-color);
+    border: var(--highlight-color) 3px solid;
+    border-radius: 0px;
+    font-size: 130%;
+}
+input:focus, textarea:focus {
+    border-color: var(--secondary-highlight-color);
+    outline: none;
+}
+
 hr {
+    border: none;
+    margin-top: 60px;
+    position: relative;
+}
 
+hr::after {
+    content: ' ';
+    background: var(--secondary-highlight-color);
+    padding: 25px;
+    right: 0px;
+    position: absolute;
+    top: -50px;
 }
 
 .customization-fieldset {