New visual

index.html

@@ -33,7 +33,8 @@
       </nav>
 
       <!-- Animated title -->
-      <h1 class="title" aria-label="Tage der digitalen Freiheit"><span class="ch" style="--i:0">T</span><span class="ch"
+      <!-- <div class="box title-box"> -->
+        <h1 class="title" aria-label="Tage der digitalen Freiheit"><span class="ch" style="--i:0">T</span><span class="ch"
           style="--i:1">A</span><span class="ch" style="--i:2">G</span><span class="ch" style="--i:3">E</span><span
           class="ch sp" style="--i:4"> </span><span class="ch" style="--i:5">D</span><span class="ch"
           style="--i:6">E</span><span class="ch" style="--i:7">R</span><span class="ch sp" style="--i:8"> </span><span
@@ -41,14 +42,15 @@
           style="--i:11">G</span><span class="ch" style="--i:12">I</span><span class="ch" style="--i:13">T</span><span
           class="ch" style="--i:14">A</span><span class="ch" style="--i:15">L</span><span class="ch"
           style="--i:16">E</span><span class="ch" style="--i:17">N</span><span class="ch sp" style="--i:18">
-        </span><span class="ch" style="--i:19">F</span><span class="ch" style="--i:20">R</span><span class="ch"
+          </span><span class="ch" style="--i:19">F</span><span class="ch" style="--i:20">R</span><span class="ch"
           style="--i:21">E</span><span class="ch" style="--i:22">I</span><span class="ch" style="--i:23">H</span><span
           class="ch" style="--i:24">E</span><span class="ch" style="--i:25">I</span><span class="ch"
           style="--i:26">T</span>
-      </h1>
+        </h1>
+      <!-- </div> -->
 
       <!-- Box Event -->
-      <div class="box" id="start">
+      <div class="box">
         <h2>15. – 17. Mai 2026<br />Westspitze Tübingen</h2>
         <p>Die fünften Tübinger Tage der digitalen Freiheit (#TDF5) stehen unter dem Motto „Freiräume verschlüsseln". Zu
           diesem

styles-5.0.css

@@ -41,11 +41,14 @@
  **/
 
 :root {
-	--light: #ecf2eb;
-	--shadow: #7d707a;
-	--electric: #d9fbff;
-	--highlight: #8ae6e1;
-	--link: #cc30a8;
+	--plum: #483f6b;
+	--sage: #d6f3d8;
+
+	--box: #f2fff3;
+	--text: #4f4577;
+	--button: #bcf8db;
+	--active: #6fd4a3;
+	--link: #7761cd;
 	--shadow-rgb: 125, 112, 122;
 	--box-shadow: 0 0 12px rgba(var(--shadow-rgb), 0.3);
 
@@ -79,12 +82,19 @@ body {
 }
 
 /* Enhance background size for very large screens */
-@media (min-width: 1921px) {
+@media (min-width: 1920px) {
 	.background {
 		background-size: 100% auto;
 	}
 }
 
+/* Scale background proportionally on smaller screens */
+@media (max-width: 1150px) {
+	.background {
+		background-size: 167% auto;
+	}
+}
+
 /* The main content area is 1000px wide, unless the screen is smaller than 1150px */
 #content {
 	max-width: 1000px;
@@ -108,7 +118,7 @@ a,
 li {
 	font-family: "TitilliumWeb-Regular";
 	font-size: 1.2em;
-	color: var(--shadow);
+	color: var(--text);
 }
 
 h2 {
@@ -152,7 +162,7 @@ ul li:before {
 	content: "";
 	width: 8px;
 	height: 8px;
-	background-color: var(--shadow);
+	background-color: var(--text);
 	position: absolute;
 	left: 0;
 	top: 50%;
@@ -170,7 +180,7 @@ b {
  **/
 
 .box {
-	background: var(--light);
+	background: var(--box);
 	margin-bottom: 2em;
 	padding: 0.5em 2em 1.4em 2em;
 	border: none;
@@ -229,7 +239,7 @@ b {
 	font-weight: bold;
 	text-decoration: none;
 	color: #000;
-	background-color: var(--electric);
+	background-color: var(--button);
 	border: none;
 	cursor: pointer;
 	transition: background-color 0.3s ease;
@@ -239,7 +249,7 @@ b {
 }
 
 .button:hover {
-	background-color: var(--highlight);
+	background-color: var(--active);
 	text-decoration: none;
 }
 
@@ -251,11 +261,11 @@ b {
 }
 
 .buttons-wrapper {
-    display: flex; 
-    justify-content: center;
-    align-items: center; 
-    gap: 20px;
-    margin: 20px auto;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+	margin: 20px auto;
 }
 
 
@@ -327,7 +337,7 @@ b {
 	font-weight: bold;
 	text-decoration: none;
 	color: #000;
-	background-color: var(--electric);
+	background-color: var(--button);
 	cursor: pointer;
 	transition: background-color 0.3s ease, color 0.3s ease;
 	text-align: center;
@@ -341,7 +351,7 @@ b {
 }
 
 .navigationbar a.active {
-	background-color: var(--highlight);
+	background-color: var(--active);
 	cursor: not-allowed;
 	pointer-events: none;
 }
@@ -369,13 +379,13 @@ b {
 	font-size: 6cqw;
 	text-align: center;
 	white-space: nowrap;
-	color: var(--light);
-	text-shadow: 0 0 8px rgba(var(--shadow-rgb), 1);
+	color: var(--plum);
 	width: 100%;
-	margin-top: 410px;
+	margin-top: calc(45cqw + 50px);
 	margin-bottom: 1cqw;
 }
 
+
 .title.en {
 	font-size: 7cqw;
 }