diff --git a/html/index.html b/html/index.html
index 75b79dc..233fe94 100644
--- a/html/index.html
+++ b/html/index.html
@@ -44,28 +44,33 @@
             vec2 blend = f * f * (3.0 -(2.0 * f));
             float noiseVal =
             mix(
-                mix(
-                    dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
-                    dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
-                    blend.x),
-                mix(
-                    dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
-                    dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
-                    blend.x),
-                blend.y
+            mix(
+            dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
+            dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
+            blend.x),
+            mix(
+            dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
+            dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
+            blend.x),
+            blend.y
             );
             return noiseVal / 0.7;
         }
 
+
         void mainImage(out vec4 fragColor, in vec2 fragCoord) {
             vec2 uv = fragCoord.xy / iResolution.y;
             vec2 uvm = iMouse.xy / iResolution.y;
 
-            float time = (80.-(1.*uvm.y)) * sin(iTime / 30000.);
-            float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/10.));
+            float time = 20.98 - (100000. * mod(pow(sin(iTime / 20000000.),2.),1.));
+
+            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
+            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
+            float time2 = 10000. - (20000. * pow(cos(iTime / noiseVal/32400.),2.));
+
 
             float val = sin(noiseVal * time + (sin(time) * time / 10.));
-            fragColor.rgba = vec4(vec3(val), 1.0);
+            fragColor.rgba = vec4(18./time2/val,0.,0.,1.0);
         }
 
         void main() {
@@ -75,7 +80,8 @@
 
     <style>
         body {
-            background-color: #ffffff;
+            background-color: #030303;
+            opacity: 0.93;
         }
 
         #hecksshader {
@@ -85,104 +91,123 @@
             position: fixed;
             top: 0;
             left: 0;
-            z-index: -9999;
-            opacity: 0.02;
+            z-index: -999;
+            opacity: 0.24999;
         }
 
-        h2 {
-            font-family: 'Lato black', sans-serif;
-            font-size: 2.0rem;
-            text-transform: uppercase;
-            color: #111111;
-            margin-top: 4vh;
-            margin-bottom: 4vh;
+        .container {
+            background-color: #090909;
+            width: 100%;
+            border-left: 0px none #dee2e6 !important;
+            border-right: 0px none #dee2e6 !important;
+            margin-right: auto;
+            margin-left: auto;
+            padding: 0;
+            opacity: 0.86;
+        }
+
+        .section, .cardcontainer {
+            background-color: transparent;
+            margin-top: 0vh;
+            margin-bottom: 0vh;
+            border-top: 0px none #ffffff !important;
+            opacity: 0.9999;
+        }
+
+        .card {
+            width: 100%;
+            margin-top: 1vh;
+            margin-bottom: 1vh;
+            background-color: #080808;
+            border: 0px solid #dee2e6 !important;
+            opacity: 0.9999;
+        }
+
+        .card-body {
+            border-style: solid;
+            border-top: 1px solid #333333 !important;
+            border-bottom: 1px none #dee2e6 !important;
+            border-left: 0;
+            border-right: 0;
+            opacity: 0.74;
+        }
+
+        .flyer {
+            opacity: 0.9;
+        }
+
+        .logo {
+            margin-left: auto;
+            margin-right: auto;
+            padding-bottom: 0vh;
+            width: 50%;
+            display: block;
         }
 
         .card-title {
             font-family: 'Lato black', sans-serif;
-            color: #222222;
+            color: #aa2222;
             font-size: 1.5rem;
         }
 
+        h2 {
+            font-family: 'Lato black', sans-serif;
+            font-size: 2.0rem;
+            text-transform: uppercase;
+            color: #dd2222;
+            margin-top: 1vh;
+            margin-bottom: 1vh;
+        }
+
         p, li {
             font-family: 'Lato', sans-serif;
             letter-spacing: 0.05em;
             font-size: 1.4em;
-            color: #333333;
+            color: #aa2828;
             hyphens: auto;
         }
 
         img {
-            width:100%;
+            width: 100%;
         }
 
+
         a:link {
-            color: #b2c778;
+            color: grey;
         }
 
         a:visited {
-            color: #b2c778;
+            color: grey;
         }
 
         a:hover {
-            color: silver;
+            color: aliceblue;
         }
 
         a:active {
-            color: #b2c778;
-        }
-
-        .card {
-            width: 100%;
-            background-color: #f4f4f4;
-            border: 0px solid #dee2e6!important;
+            color: grey;
         }
 
-        .card-body {
-            border-style: solid;
-            border-top: 1px solid #dee2e6!important;
-            border-bottom: 1px solid #dee2e6!important;
-            border-left: 0;
-            border-right: 0;
-        }
-
-        .container {
-            background-color: #fefefe;
-            width: 100%;
-            border-left: 1px solid #dee2e6!important;
-            border-right: 1px solid #dee2e6!important;
-            margin-right: auto;
-            margin-left: auto;
-            padding: 0;
-        }
 
         .row {
-            margin-left:0;
-            margin-right:0;
+            margin-left: 0;
+            margin-right: 0;
         }
 
         .col-12 {
-            padding-left:3vw;
-            padding-right:3vw;
+            padding-left: 3vw;
+            padding-right: 3vw;
         }
 
         .fas, .fab {
-            color: white;
+            color: #aa2828;
             font-size: 2em;
         }
 
-        .section, .cardcontainer {
-            margin-bottom: 5vh;
-            border-top: 1px solid #dee2e6!important;
+        a, u {
+            text-decoration: none;
         }
 
-        .logo {
-            margin-left: auto;
-            margin-right: auto;
-            padding-bottom: 2vh;
-            width: 40%;
-            display:block;
-        }
     </style>
 </head>
 
@@ -191,21 +216,24 @@
 <canvas id="hecksshader"></canvas>
 
 <div class="container">
-    <div class="row">
-        <div class="img">
-            <img src="resources/Sub_Factory_2025.webp" alt="Subfactory Banner">
+    <div class="cardcontainer pt-2">
+        <div class="card">
+            <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>
-        <div class="card-group">
+
+        <div class="card-group pt-2">
             <div class="card shadow-none">
                 <div class="card-body text-center">
                     <div class="fix_height">
                         <h5 class="card-title">Eulachbass</h5>
                     </div>
-                    <img class="logo" src="resources/eulachbass_logo.webp" alt="Eulachbass Logo">
+                    <img class="logo" src="resources/eulachbass_logo_white.webp" alt="Eulachbass Logo">
                     <a href="https://eulachbass.ch/" target="_blank" class="card-link">
                         <i class="fas fa-globe mr-2"></i>
                     </a>
@@ -226,7 +254,7 @@
                     <div class="fix_height">
                         <h5 class="card-title">Sector B</h5>
                     </div>
-                    <img class="logo" src="resources/sectorb_logo.svg" alt="Eulachbass Logo">
+                    <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">
                         <i class="fab fa-instagram mr-2"></i>
                     </a>
@@ -241,7 +269,7 @@
                     <div class="fix_height">
                         <h5 class="card-title">Subsanity Soundystem</h5>
                     </div>
-                    <img class="logo" src="resources/subsanity_logo.webp" alt="Eulachbass Logo">
+                    <img class="logo" src="resources/subsanity_logo.webp" alt="Subsanity Logo">
                     <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link">
                         <i class="fab fa-instagram mr-2"></i>
                     </a>
@@ -256,83 +284,101 @@
         </div>
     </div>
 
+
     <!-- INFO -->
-    <div class="row">
-        <div class="col-12 section">
-            <h2 class="text-center">Info</h2>
-            <p>
-                Streiche dir den 21. Juni 2025 im Kalender fett an! Von 14:00 bis 22:00 findet auf dem Areal der
-                Gleiserei in Winterthur zum dritten mal unser Drum & Bass Day Rave statt. Zu Gast sind FD (UK),
-                Namarone (Fribourg) und anotha90skid (St. Gallen). Unterstützt werden sie von DJs aus unseren eigenen Reihen
-                (Sector B und Eulachbass).
-                Eintritt frei – Spenden willkommen!
-            </p>
+    <div class="cardcontainer pt-2">
+        <div class="card">
+            <div class="card-body col-12 section">
+                <h2 class="text-center">Info</h2>
+                <p>
+                    Streiche dir den 21. Juni 2025 im Kalender fett an! Von 14:00 bis 22:00 findet auf dem Areal der
+                    Gleiserei in Winterthur zum dritten mal unser Drum & Bass Day Rave statt. Zu Gast sind FD (UK),
+                    Namarone (Fribourg) und anotha90skid (St. Gallen). Unterstützt werden sie von DJs aus unseren
+                    eigenen Reihen
+                    (Sector B und Eulachbass).
+                    Eintritt frei – Spenden willkommen!
+                </p>
+            </div>
         </div>
     </div>
 
     <!-- Zahlungsmethoden -->
-    <div class="row">
-        <div class="col-12 section">
-            <h2 class="text-center ">Zahlungsmöglichkeiten</h2>
-            <p>
-            Bei uns kann mit Bargeld oder Twint bezahlt werden.
-            </p>
+    <div class="cardcontainer pt-2">
+        <div class="card ">
+            <div class="card-body col-12 section">
+                <h2 class="text-center ">Zahlungsmöglichkeiten</h2>
+                <p>
+                    Bei uns kann mit Bargeld oder Twint bezahlt werden.
+                </p>
+            </div>
         </div>
     </div>
 
     <!-- Anreise -->
-    <div class="row">
-        <div class="col-12 section">
-            <h2 class="text-center ">Anreise</h2>
-            <p>
-            Einfach "Gleiserei" in dein navi of choice eingeben.
-            <iframe width="1000" height="350" src="https://www.openstreetmap.org/export/embed.html?bbox=8.723860681056978%2C47.505114930401085%2C8.72756212949753%2C47.507033694888854&amp;layer=mapnik" style="border: 1px solid black"></iframe><br/><small><a href="https://www.openstreetmap.org/?#map=19/47.506074/8.725711">View Larger Map</a></small>
-            </p>
+    <div class="cardcontainer pt-2">
+        <div class="card">
+            <div class="card-body col-12 section">
+                <h2 class="text-center ">Anreise</h2>
+                <p>
+                    Einfach "Gleiserei" in dein navi of choice eingeben.
+                    <iframe width="1000" height="350"
+                            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
+                        href="https://www.openstreetmap.org/?mlat=47.506091&amp;mlon=8.725599#map=19/47.506091/8.725599">View
+                    Larger Map</a></small>
+                </p>
+            </div>
         </div>
     </div>
 
     <!-- Rave Etiquette -->
-    <div class="row">
-        <div class="col-12 section">
-            <h2 class="text-center ">Rave Etiquette</h2>
-            <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>
-                <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>
-                <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>
-                <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>
-                <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>
-                Fühlst du dich unwohl oder brauchst du Unterstützung? Wende dich an den Ordnungsdienst.
-                Sie können dir weiterhelfen oder einen ruhigen Ort anbieten.
-                </p>
-            </ul>
+    <div class="cardcontainer pt-2">
+        <div class="card">
+            <div class="card-body col-12 section">
+                <h2 class="text-center ">Rave Etiquette</h2>
+                <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>
+                    <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>
+                    <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>
+                    <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>
+                    <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>
+                        Fühlst du dich unwohl oder brauchst du Unterstützung? Wende dich an den Ordnungsdienst.
+                        Sie können dir weiterhelfen oder einen ruhigen Ort anbieten.
+                    </p>
+                </ul>
+            </div>
         </div>
     </div>
 
     <!-- Partner -->
-    <div class="row">
-        <div class="col-12 section">
-            <h2 class="text-center ">Partner</h2>
+    <div class="cardcontainer pt-2">
+        <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>
+                </ul>
+            </div>
         </div>
     </div>
 </div>
 <script>
-document.getElementById("focus").focus();
+    document.getElementById("focus").focus();
 </script>
 
 <script type="module">
diff --git a/html/wip/index_new.html b/html/wip/index_new.html
deleted file mode 100644
index 233fe94..0000000
--- a/html/wip/index_new.html
+++ /dev/null
@@ -1,455 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <title>Sub Factory</title>
-    <a id="focus" href="#focus"></a>
-    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link rel="icon" type="image/png" href="./resources/favicon.png">
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">
-
-
-    <!--    Shaders -->
-    <script id="vertexShader" type="x-shader/x-vertex">
-        varying vec2 vUv;
-
-        void main()    {
-            vUv = uv;
-            gl_Position = vec4(position, 1.0);
-        }
-    </script>
-    <script id="fragmentShader" type="x-shader/x-fragment">
-        #ifdef GL_ES
-        precision highp float;
-        #endif
-
-        //    #extension GL_OES_standard_derivatives : enable
-        uniform float iTime;
-        uniform vec2 iMouse;
-        uniform vec2 iResolution;
-        uniform sampler2D iChannel0;
-
-        vec2 GetGradient(vec2 intPos, float t) {
-            float rand = texture(iChannel0, intPos / 64.0).r * 4.0;
-            float angle = 6.283185 * rand + 4.0 * t * rand;
-            return vec2(cos(angle), sin(angle));
-        }
-
-        float Pseudo3dNoise(vec3 pos) {
-            vec2 i = floor(pos.xy);
-            vec2 f = pos.xy - i;
-            vec2 blend = f * f * (3.0 -(2.0 * f));
-            float noiseVal =
-            mix(
-            mix(
-            dot(GetGradient(i + vec2(0, 0), pos.z), f - vec2(0, 0)),
-            dot(GetGradient(i + vec2(1, 0), pos.z), f - vec2(1, 0)),
-            blend.x),
-            mix(
-            dot(GetGradient(i + vec2(0, 1), pos.z), f - vec2(0, 1)),
-            dot(GetGradient(i + vec2(1, 1), pos.z), f - vec2(1, 1)),
-            blend.x),
-            blend.y
-            );
-            return noiseVal / 0.7;
-        }
-
-
-        void mainImage(out vec4 fragColor, in vec2 fragCoord) {
-            vec2 uv = fragCoord.xy / iResolution.y;
-            vec2 uvm = iMouse.xy / iResolution.y;
-
-            float time = 20.98 - (100000. * mod(pow(sin(iTime / 20000000.),2.),1.));
-
-            float noiseVal =  Pseudo3dNoise(vec3(uv, time));
-            //                    float noiseVal = 0.5 + 0.1 + (time/100.) * Pseudo3dNoise(vec3(uv * (6. + (0.07 * uvm.x)), time/1.));
-            float time2 = 10000. - (20000. * pow(cos(iTime / noiseVal/32400.),2.));
-
-
-            float val = sin(noiseVal * time + (sin(time) * time / 10.));
-            fragColor.rgba = vec4(18./time2/val,0.,0.,1.0);
-        }
-
-        void main() {
-            mainImage(gl_FragColor, gl_FragCoord.xy);
-        }
-    </script>
-
-    <style>
-        body {
-            background-color: #030303;
-            opacity: 0.93;
-        }
-
-        #hecksshader {
-            width: 100%;
-            height: 100%;
-            display: block;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: -999;
-            opacity: 0.24999;
-        }
-
-        .container {
-            background-color: #090909;
-            width: 100%;
-            border-left: 0px none #dee2e6 !important;
-            border-right: 0px none #dee2e6 !important;
-            margin-right: auto;
-            margin-left: auto;
-            padding: 0;
-            opacity: 0.86;
-        }
-
-        .section, .cardcontainer {
-            background-color: transparent;
-            margin-top: 0vh;
-            margin-bottom: 0vh;
-            border-top: 0px none #ffffff !important;
-            opacity: 0.9999;
-        }
-
-        .card {
-            width: 100%;
-            margin-top: 1vh;
-            margin-bottom: 1vh;
-            background-color: #080808;
-            border: 0px solid #dee2e6 !important;
-            opacity: 0.9999;
-        }
-
-        .card-body {
-            border-style: solid;
-            border-top: 1px solid #333333 !important;
-            border-bottom: 1px none #dee2e6 !important;
-            border-left: 0;
-            border-right: 0;
-            opacity: 0.74;
-        }
-
-        .flyer {
-            opacity: 0.9;
-        }
-
-        .logo {
-            margin-left: auto;
-            margin-right: auto;
-            padding-bottom: 0vh;
-            width: 50%;
-            display: block;
-        }
-
-        .card-title {
-            font-family: 'Lato black', sans-serif;
-            color: #aa2222;
-            font-size: 1.5rem;
-        }
-
-        h2 {
-            font-family: 'Lato black', sans-serif;
-            font-size: 2.0rem;
-            text-transform: uppercase;
-            color: #dd2222;
-            margin-top: 1vh;
-            margin-bottom: 1vh;
-        }
-
-        p, li {
-            font-family: 'Lato', sans-serif;
-            letter-spacing: 0.05em;
-            font-size: 1.4em;
-            color: #aa2828;
-            hyphens: auto;
-        }
-
-        img {
-            width: 100%;
-        }
-
-
-        a:link {
-            color: grey;
-        }
-
-        a:visited {
-            color: grey;
-        }
-
-        a:hover {
-            color: aliceblue;
-        }
-
-        a:active {
-            color: grey;
-        }
-
-
-        .row {
-            margin-left: 0;
-            margin-right: 0;
-        }
-
-        .col-12 {
-            padding-left: 3vw;
-            padding-right: 3vw;
-        }
-
-        .fas, .fab {
-            color: #aa2828;
-            font-size: 2em;
-        }
-
-        a, u {
-            text-decoration: none;
-        }
-
-    </style>
-</head>
-
-<body>
-
-<canvas id="hecksshader"></canvas>
-
-<div class="container">
-    <div class="cardcontainer pt-2">
-        <div class="card">
-            <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>
-
-        <div class="card-group pt-2">
-            <div class="card shadow-none">
-                <div class="card-body text-center">
-                    <div class="fix_height">
-                        <h5 class="card-title">Eulachbass</h5>
-                    </div>
-                    <img class="logo" src="resources/eulachbass_logo_white.webp" alt="Eulachbass Logo">
-                    <a href="https://eulachbass.ch/" target="_blank" class="card-link">
-                        <i class="fas fa-globe mr-2"></i>
-                    </a>
-                    <a href="https://www.instagram.com/eulachbass" target="_blank" class="card-link">
-                        <i class="fab fa-instagram mr-2"></i>
-                    </a>
-                    <a href="https://www.facebook.com/eulachbass/" target="_blank" class="card-link">
-                        <i class="fab fa-facebook mr-2"></i>
-                    </a>
-                    <a href="https://soundcloud.com/eulachbass" target="_blank" class="card-link">
-                        <i class="fab fa-soundcloud mr-2"></i>
-                    </a>
-                </div>
-            </div>
-
-            <div class="card shadow-none">
-                <div class="card-body text-center">
-                    <div class="fix_height">
-                        <h5 class="card-title">Sector B</h5>
-                    </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">
-                        <i class="fab fa-instagram mr-2"></i>
-                    </a>
-                    <a href="https://www.facebook.com/sectorbevents/" target="_blank" class="card-link">
-                        <i class="fab fa-facebook mr-2"></i>
-                    </a>
-                </div>
-            </div>
-
-            <div class="card shadow-none">
-                <div class="card-body text-center">
-                    <div class="fix_height">
-                        <h5 class="card-title">Subsanity Soundystem</h5>
-                    </div>
-                    <img class="logo" src="resources/subsanity_logo.webp" alt="Subsanity Logo">
-                    <a href="https://www.instagram.com/subsanitysoundsystem" target="_blank" class="card-link">
-                        <i class="fab fa-instagram mr-2"></i>
-                    </a>
-                    <a href="https://www.facebook.com/subsanitysound" target="_blank" class="card-link">
-                        <i class="fab fa-facebook mr-2"></i>
-                    </a>
-                    <a href="https://soundcloud.com/user-937924022" target="_blank" class="card-link">
-                        <i class="fab fa-soundcloud mr-2"></i>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <!-- INFO -->
-    <div class="cardcontainer pt-2">
-        <div class="card">
-            <div class="card-body col-12 section">
-                <h2 class="text-center">Info</h2>
-                <p>
-                    Streiche dir den 21. Juni 2025 im Kalender fett an! Von 14:00 bis 22:00 findet auf dem Areal der
-                    Gleiserei in Winterthur zum dritten mal unser Drum & Bass Day Rave statt. Zu Gast sind FD (UK),
-                    Namarone (Fribourg) und anotha90skid (St. Gallen). Unterstützt werden sie von DJs aus unseren
-                    eigenen Reihen
-                    (Sector B und Eulachbass).
-                    Eintritt frei – Spenden willkommen!
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Zahlungsmethoden -->
-    <div class="cardcontainer pt-2">
-        <div class="card ">
-            <div class="card-body col-12 section">
-                <h2 class="text-center ">Zahlungsmöglichkeiten</h2>
-                <p>
-                    Bei uns kann mit Bargeld oder Twint bezahlt werden.
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Anreise -->
-    <div class="cardcontainer pt-2">
-        <div class="card">
-            <div class="card-body col-12 section">
-                <h2 class="text-center ">Anreise</h2>
-                <p>
-                    Einfach "Gleiserei" in dein navi of choice eingeben.
-                    <iframe width="1000" height="350"
-                            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
-                        href="https://www.openstreetmap.org/?mlat=47.506091&amp;mlon=8.725599#map=19/47.506091/8.725599">View
-                    Larger Map</a></small>
-                </p>
-            </div>
-        </div>
-    </div>
-
-    <!-- Rave Etiquette -->
-    <div class="cardcontainer pt-2">
-        <div class="card">
-            <div class="card-body col-12 section">
-                <h2 class="text-center ">Rave Etiquette</h2>
-                <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>
-                    <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>
-                    <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>
-                    <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>
-                    <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>
-                        Fühlst du dich unwohl oder brauchst du Unterstützung? Wende dich an den Ordnungsdienst.
-                        Sie können dir weiterhelfen oder einen ruhigen Ort anbieten.
-                    </p>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <!-- Partner -->
-    <div class="cardcontainer pt-2">
-        <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>
-            </div>
-        </div>
-    </div>
-</div>
-<script>
-    document.getElementById("focus").focus();
-</script>
-
-<script type="module">
-    import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-
-    let camera, scene, renderer;
-    let uniforms;
-    let texture;
-    let downsample_quality = 1.;
-    init();
-    render();
-
-    function init() {
-        camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-        scene = new THREE.Scene();
-        const geometry = new THREE.PlaneGeometry( 2, 2 );
-        const loader = new THREE.TextureLoader();
-        const texture = loader.load('./resources/noise.png');
-        texture.wrapS = THREE.RepeatWrapping;
-        texture.wrapT = THREE.RepeatWrapping;
-
-        uniforms = {
-            iTime: { value: 1.0 },
-            iResolution: { value: new THREE.Vector2(1.0,1.0) },
-            iMouse: { value: new THREE.Vector2(0.0,0.0) },
-            iChannel0: { value: texture },
-        };
-
-        const material = new THREE.ShaderMaterial( {
-            uniforms: uniforms,
-            vertexShader: document.getElementById( 'vertexShader' ).textContent,
-            fragmentShader: document.getElementById( 'fragmentShader' ).textContent
-        } );
-
-        const mesh = new THREE.Mesh( geometry, material );
-        scene.add( mesh );
-        const canvas = document.querySelector('#hecksshader');
-        renderer = new THREE.WebGLRenderer({antialias: true, canvas});
-        document.addEventListener( 'pointermove', onPointerMove);
-    }
-
-    function onPointerMove(event) {
-        var clientX = event.clientX;
-        var clientY = event.clientY;
-        var mouseX = clientX;
-        var mouseY = 1 - clientY;
-        uniforms[ 'iMouse' ].value = new THREE.Vector2(mouseX, mouseY);
-    }
-
-    function rendererNeedsResize(renderer) {
-        const canvas = renderer.domElement;
-        const width = canvas.clientWidth;
-        const height = canvas.clientHeight;
-        const needResize = canvas.width !== width || canvas.height !== height;
-        return true;
-    }
-
-    function render() {
-        requestAnimationFrame( render );
-
-        if (rendererNeedsResize(renderer)) {
-            const canvas = renderer.domElement;
-            renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);
-            camera.aspect = canvas.clientWidth / canvas.clientHeight;
-            camera.updateProjectionMatrix();
-            uniforms['iResolution'].value = new THREE.Vector2( canvas.clientWidth / downsample_quality, canvas.clientHeight / downsample_quality );
-        }
-
-        uniforms[ 'iTime' ].value = performance.now();
-        renderer.render( scene, camera );
-    }
-</script>
-</body>
-</html>