fix gothic cella vibe

html/index.html

@@ -80,8 +80,8 @@
 
     <style>
         body {
-            background-color: #030303;
-            opacity: 0.93;
+            background-color: #121212;
+            opacity: 0.999;
         }
 
         #hecksshader {
@@ -92,12 +92,12 @@
             top: 0;
             left: 0;
             z-index: -999;
-            opacity: 0.24999;
+            opacity: 0.524999;
         }
 
         .container {
-            background-color: #090909;
-            width: 100%;
+            background-color: #161616;
+            width: 55%;
             border-left: 0px none #dee2e6 !important;
             border-right: 0px none #dee2e6 !important;
             margin-right: auto;
@@ -118,22 +118,22 @@
             width: 100%;
             margin-top: 1vh;
             margin-bottom: 1vh;
-            background-color: #080808;
+            background-color: #181818;
             border: 0px solid #dee2e6 !important;
             opacity: 0.9999;
         }
 
         .card-body {
             border-style: solid;
-            border-top: 1px solid #333333 !important;
+            border-top: 1px solid #444444 !important;
             border-bottom: 1px none #dee2e6 !important;
             border-left: 0;
             border-right: 0;
-            opacity: 0.74;
+            opacity: 0.999;
         }
 
         .flyer {
-            opacity: 0.9;
+            opacity: 0.97;
         }
 
         .logo {
@@ -146,24 +146,35 @@
 
         .card-title {
             font-family: 'Lato black', sans-serif;
-            color: #aa2222;
-            font-size: 1.5rem;
+            color: #ef3333;
+            font-size: 1.3rem;
+        }
+
+        .osmmap {
+            opacity: 0.78;
         }
 
         h2 {
             font-family: 'Lato black', sans-serif;
-            font-size: 2.0rem;
+            font-size: 1.32rem;
             text-transform: uppercase;
-            color: #dd2222;
-            margin-top: 1vh;
-            margin-bottom: 1vh;
+            color: #c00606;
+            margin-top: 3vh;
+            margin-bottom: 2vh;
+        }
+
+        h5 {
+            text-transform: uppercase;
+            font-size: 0.1rem;
+            color: #c00606;
         }
 
+
         p, li {
             font-family: 'Lato', sans-serif;
             letter-spacing: 0.05em;
-            font-size: 1.4em;
-            color: #aa2828;
+            font-size: 1.13em;
+            color: #e01111;
             hyphens: auto;
         }
 
@@ -173,19 +184,19 @@
 
 
         a:link {
-            color: grey;
+            color: #dddddd;
         }
 
         a:visited {
-            color: grey;
+            color: #dddddd;
         }
 
         a:hover {
-            color: aliceblue;
+            color: #dddddd;
         }
 
         a:active {
-            color: grey;
+            color: #dddddd;
         }
 
 
@@ -200,7 +211,7 @@
         }
 
         .fas, .fab {
-            color: #aa2828;
+            color: #dddddd;
             font-size: 2em;
         }
 
@@ -216,13 +227,11 @@
 <canvas id="hecksshader"></canvas>
 
 <div class="container">
-    <div class="cardcontainer pt-2">
-        <div class="card">
+<br>
+
             <div class="img flyer">
                 <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
             </div>
-        </div>
-    </div>
 
     <div class="cardcontainer pt-2">
         <h2 class="text-center">Präsentiert von</h2>
@@ -231,7 +240,7 @@
             <div class="card shadow-none">
                 <div class="card-body text-center">
                     <div class="fix_height">
-                        <h5 class="card-title">Eulachbass</h5>
+                        <h2>Eulachbass</h2>
                     </div>
                     <img class="logo" src="resources/eulachbass_logo_white.webp" alt="Eulachbass Logo">
                     <a href="https://eulachbass.ch/" target="_blank" class="card-link">
@@ -252,7 +261,7 @@
             <div class="card shadow-none">
                 <div class="card-body text-center">
                     <div class="fix_height">
-                        <h5 class="card-title">Sector B</h5>
+                        <h2>Sector B</h2>
                     </div>
                     <img class="logo" src="resources/sectorb_logo_white.webp" alt="Sector B Logo">
                     <a href="https://www.instagram.com/sectorbevents/" target="_blank" class="card-link">
@@ -267,7 +276,7 @@
             <div class="card shadow-none">
                 <div class="card-body text-center">
                     <div class="fix_height">
-                        <h5 class="card-title">Subsanity Soundystem</h5>
+                        <h2>Subsanity Soundystem</h2>
                     </div>
                     <img class="logo" src="resources/subsanity_logo.webp" alt="Subsanity Logo">
                     <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link">
@@ -321,7 +330,7 @@
                 <h2 class="text-center ">Anreise</h2>
                 <p>
                     Einfach "Gleiserei" in dein navi of choice eingeben.
-                    <iframe width="1000" height="350"
+                    <iframe width="100%" height="350" class="osmmap"
                             src="https://www.openstreetmap.org/export/embed.html?bbox=8.723748028278353%2C47.50513122763665%2C8.727449476718904%2C47.507049991528696&amp;layer=mapnik&amp;marker=47.506090618350065%2C8.725598752498627"
                             style="border: 1px solid black"></iframe>
                     <br/><small><a
@@ -340,20 +349,20 @@
                 <p>Mit der Teilnahme an der Sub Factory übernimmst du Verantwortung für dein Verhalten und
                     gestaltest den Anlass aktiv mit:</p>
                 <ul>
-                    <li><h5 class="card-title">Konsens - nur ja heisst ja</h5></li>
+                    <li>Konsens - nur ja heisst ja</li>
                     <p>Respektiere physische und emotionale Grenzen. Die Grenzen aller Menschen sind individuell
                         und können sich jederzeit ändern. Frage immer nach Zustimmung. Das gilt auch beim
                         Fotografieren.</p>
-                    <li><h5 class="card-title">Füreinander da</h5></li>
+                    <li>Füreinander da</li>
                     <p>Wir kümmern uns um unsere Freund:innen, die Menschen um uns herum und um uns selbst.
                         Siehst du eine Situation, in der du denkst, dass sich eine Person nicht wohl fühlt: Frag nach!
                         Jede Person definiert für sich selbst, wann eine Grenze überschritten ist. Falls du selbst mit
                         der
                         Situation überfordert bist, kannst du Hilfe beim Ordnungsdienst holen.</p>
-                    <li><h5 class="card-title">Keine Annahmen</h5></li>
+                    <li>Keine Annahmen</li>
                     <p>Vermeide Annahmen und daraus entstehende Fragen und Urteile über die Geschlechtsidentität,
                         sexuelle Orientierung, Herkunft oder soziale Zugehörigkeit einer Person.</p>
-                    <li><h5 class="card-title">Kenne deine Grenzen</h5></li>
+                    <li>Kenne deine Grenzen</li>
                     <p>Sei achtsam, wenn du Alkohol und ander Rauschmittel konsumierst. Stelle sicher, dass du
                         deine eigenen und die Grenzen anderer Personen noch wahrnehmen und respektieren kannst.
                         <br>
@@ -370,16 +379,23 @@
         <div class="card">
             <div class="card-body col-12 section">
                 <h2 class="text-center ">Partner</h2>
-                <li><a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a></li>
-                <li><a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a></li>
-                </ul>
+                <p class="text-center">
+                <a href="https://www.gleiserei.ch/" target="_blank">Gleiserei</a><br>
+                <a href="https://www.hakogetraenke.ch/" target="_blank">Hako Getränke</a>
+                </p>
             </div>
         </div>
     </div>
+
+    <div class="cardcontainer pt-2">
+            <div class="card-body col-12 section">
+            </div>
+    </div>
+
 </div>
-<script>
-    document.getElementById("focus").focus();
-</script>
+<!--<script>-->
+<!--    document.getElementById("focus").focus();-->
+<!--</script>-->
 
 <script type="module">
     import * as THREE from 'https://unpkg.com/three/build/three.module.js';