Hübscher gemacht

2026-04-08 08:47:41 +02:00
parent da011d41e5
commit 1d129ef72a
5 changed files with 717 additions and 88 deletions
@@ -14,13 +14,13 @@ Diese Anleitung enthält die lokalen Startbefehle für mehrere Rechner.

 ### Document-Root

-`C:\Users\HP\source\repos\skyview.astronomiemuseum.de\public`
+`C:\Users\HP\source\repos\skyview.astronomiemuseum.de`

 ### Server starten

 ```powershell
 Set-Location C:\Users\HP\source\repos\skyview.astronomiemuseum.de
-& 'E:\php\php.exe' -S 127.0.0.1:8000 -t public
+& 'E:\php\php.exe' -S 127.0.0.1:8000 -t .
 ```

 Dann ist das Projekt unter folgender URL erreichbar:
@@ -33,7 +33,7 @@ Wenn Port `8000` bereits belegt ist:

 ```powershell
 Set-Location C:\Users\HP\source\repos\skyview.astronomiemuseum.de
-& 'E:\php\php.exe' -S 127.0.0.1:8001 -t public
+& 'E:\php\php.exe' -S 127.0.0.1:8001 -t .
 ```

 ## THOMASDESKTOP
@@ -48,13 +48,13 @@ Set-Location C:\Users\HP\source\repos\skyview.astronomiemuseum.de

 ### Document-Root

-`C:\Users\ich\source\repos\skyview.astronomiemuseum.de\public`
+`C:\Users\ich\source\repos\skyview.astronomiemuseum.de`

 ### Server starten

 ```powershell
 Set-Location C:\Users\ich\source\repos\skyview.astronomiemuseum.de
-& 'C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe' -S 127.0.0.1:8000 -t public
+& 'C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe' -S 127.0.0.1:8000 -t .
 ```

 Dann ist das Projekt unter folgender URL erreichbar:
@@ -67,7 +67,7 @@ Wenn Port `8000` bereits belegt ist:

 ```powershell
 Set-Location C:\Users\ich\source\repos\skyview.astronomiemuseum.de
-& 'C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe' -S 127.0.0.1:8001 -t public
+& 'C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe' -S 127.0.0.1:8001 -t .
 ```

 ## Server beenden
@@ -2,4 +2,4 @@
 cd /d "C:\Users\HP\source\repos\skyview.astronomiemuseum.de"
 echo Starte PHP-Entwicklungsserver auf http://127.0.0.1:8000/
 echo Beenden mit Ctrl+C
-"E:\php\php.exe" -S 127.0.0.1:8000 -t public
+"E:\php\php.exe" -S 127.0.0.1:8000 -t .
@@ -2,4 +2,4 @@
 cd /d "C:\Users\ich\source\repos\skyview.astronomiemuseum.de"
 echo Starte PHP-Entwicklungsserver auf http://127.0.0.1:8000/
 echo Beenden mit Ctrl+C
-"C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe" -S 127.0.0.1:8000 -t public
+"C:\laragon\bin\php\php-8.4.5-nts-Win32-vs17-x64\php.exe" -S 127.0.0.1:8000 -t .
@@ -4,9 +4,510 @@
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="refresh" content="10; url=public/index.php">
-<title>AstroTools – Astronomiemuseum Sternwarte Sonneberg</title>
+<title>AstroTools - Astronomiemuseum Sternwarte Sonneberg</title>
 <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="public/css/style.css">
+<style>
+body.landing-page {
+  position: relative;
+  padding: 32px 20px;
+  background:
+    radial-gradient(circle at top, rgba(54, 91, 191, 0.18), transparent 34%),
+    radial-gradient(circle at 20% 20%, rgba(49, 189, 214, 0.12), transparent 24%),
+    linear-gradient(180deg, #02040b 0%, #07111f 55%, #03050c 100%);
+}
+
+body.landing-page::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  background-image:
+    linear-gradient(rgba(130, 170, 255, 0.06) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(130, 170, 255, 0.06) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(circle at center, black 40%, transparent 85%);
+  pointer-events: none;
+}
+
+body.landing-page .page {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 1100px;
+}
+
+body.landing-page .page-stack {
+  display: grid;
+  gap: 18px;
+}
+
+body.landing-page .background-orbit {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+body.landing-page .background-orbit::before {
+  content: "";
+  position: absolute;
+  width: min(72vw, 780px);
+  height: min(72vw, 780px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-18%, -48%);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle, rgba(201, 168, 75, 0.12) 0%, rgba(84, 125, 255, 0.08) 26%, transparent 68%);
+  filter: blur(14px);
+  opacity: 0.9;
+}
+
+body.landing-page .hero {
+  position: relative;
+  overflow: hidden;
+  padding: clamp(28px, 4vw, 52px);
+  border: 1px solid rgba(133, 167, 255, 0.18);
+  border-radius: 32px;
+  background:
+    linear-gradient(145deg, rgba(7, 13, 27, 0.9), rgba(5, 10, 20, 0.72)),
+    rgba(7, 13, 27, 0.76);
+  box-shadow:
+    0 24px 90px rgba(0, 0, 0, 0.45),
+    inset 0 1px 0 rgba(255, 255, 255, 0.06);
+  backdrop-filter: blur(18px);
+  animation: landing-fade-up 0.9s ease both;
+}
+
+body.landing-page .hero::before,
+body.landing-page .hero::after {
+  content: "";
+  position: absolute;
+  border-radius: 50%;
+  pointer-events: none;
+}
+
+body.landing-page .hero::before {
+  width: 340px;
+  height: 340px;
+  top: -180px;
+  right: -140px;
+  background: radial-gradient(circle, rgba(104, 138, 255, 0.2), transparent 70%);
+}
+
+body.landing-page .hero::after {
+  width: 240px;
+  height: 240px;
+  bottom: -120px;
+  left: -80px;
+  background: radial-gradient(circle, rgba(56, 192, 215, 0.14), transparent 72%);
+}
+
+body.landing-page .hero-panel {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: 28px;
+  align-items: center;
+  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
+}
+
+body.landing-page .hero-copy {
+  text-align: left;
+}
+
+body.landing-page .hero-topline {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 18px;
+  padding: 8px 14px;
+  border: 1px solid rgba(201, 168, 75, 0.22);
+  border-radius: 999px;
+  background: rgba(201, 168, 75, 0.08);
+  color: rgba(232, 214, 159, 0.88);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+body.landing-page .hero-topline-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #88d8ff;
+  box-shadow: 0 0 14px rgba(136, 216, 255, 0.9);
+}
+
+body.landing-page .museum-pre {
+  margin: 0 0 10px;
+  color: rgba(200, 168, 75, 0.72);
+  font-size: 11px;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+}
+
+body.landing-page .hero-title {
+  margin: 0 0 16px;
+  color: #f0f6ff;
+  font-family: 'Orbitron', sans-serif;
+  font-size: clamp(44px, 8vw, 92px);
+  font-weight: 900;
+  letter-spacing: 0.08em;
+  line-height: 0.95;
+  text-shadow: 0 0 40px rgba(200, 160, 80, 0.35), 0 0 80px rgba(100, 130, 255, 0.15);
+}
+
+body.landing-page .hero-title em {
+  font-style: normal;
+}
+
+body.landing-page .hero-subtitle {
+  max-width: 32ch;
+  margin: 0 0 18px;
+  color: rgba(227, 237, 255, 0.88);
+  font-family: 'Cormorant Garamond', serif;
+  font-size: clamp(24px, 3vw, 34px);
+  line-height: 1.1;
+}
+
+body.landing-page .hero-divider {
+  width: 96px;
+  height: 1px;
+  margin: 0 0 20px;
+  background: linear-gradient(90deg, rgba(200, 168, 75, 0.9), transparent);
+}
+
+body.landing-page .hero-desc {
+  margin: 0 0 28px;
+  color: rgba(208, 221, 245, 0.72);
+  font-size: 13px;
+  letter-spacing: 0.03em;
+  line-height: 1.85;
+}
+
+body.landing-page .hero-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 28px;
+}
+
+body.landing-page .hero-chip {
+  padding: 10px 14px;
+  border: 1px solid rgba(133, 167, 255, 0.16);
+  border-radius: 14px;
+  background: rgba(11, 19, 35, 0.74);
+  color: rgba(215, 228, 252, 0.76);
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+body.landing-page .hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  justify-content: center;
+}
+
+body.landing-page .hero-button,
+body.landing-page .hero-link,
+body.landing-page .redirect-link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 54px;
+  padding: 0 24px;
+  border-radius: 999px;
+  text-decoration: none;
+  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, color 0.22s ease, background 0.22s ease;
+}
+
+body.landing-page .hero-button {
+  min-width: min(100%, 290px);
+  border: 1px solid rgba(114, 210, 255, 0.42);
+  background: linear-gradient(135deg, rgba(56, 192, 215, 0.22), rgba(84, 125, 255, 0.26));
+  box-shadow: 0 14px 36px rgba(37, 93, 191, 0.28);
+  color: #f5fbff;
+  font-family: 'Orbitron', sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+body.landing-page .hero-link,
+body.landing-page .redirect-link {
+  border: 1px solid rgba(200, 168, 75, 0.22);
+  background: rgba(201, 168, 75, 0.06);
+  color: rgba(234, 215, 160, 0.9);
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+body.landing-page .hero-button:hover,
+body.landing-page .hero-link:hover,
+body.landing-page .redirect-link:hover {
+  transform: translateY(-2px);
+}
+
+body.landing-page .hero-button:hover {
+  box-shadow: 0 18px 42px rgba(56, 192, 215, 0.24);
+}
+
+body.landing-page .hero-side {
+  display: none;
+}
+
+body.landing-page .ring-wrap {
+  --ring-offset-x: 0px;
+  --ring-offset-y: 0px;
+  position: relative;
+  width: min(72vw, 780px);
+  height: min(72vw, 780px);
+  margin: 0;
+  transform: translate(var(--ring-offset-x), var(--ring-offset-y));
+  transition: transform 0.1s ease-out;
+  opacity: 0.28;
+}
+
+body.landing-page .crosshair {
+  position: absolute;
+  inset: 0;
+  background:
+        linear-gradient(rgba(200, 168, 75, 0.15) 1px, transparent 1px),
+        linear-gradient(90deg, rgba(200, 168, 75, 0.15) 1px, transparent 1px);
+  background-size: 100% 50%, 50% 100%;
+}
+
+body.landing-page .ring {
+  position: absolute;
+  border: 1px solid rgba(200, 168, 75, 0.3);
+  border-radius: 50%;
+}
+
+body.landing-page .ring-outer {
+  inset: 0;
+  animation: landing-spin 60s linear infinite;
+}
+
+body.landing-page .ring-inner {
+  inset: 18%;
+  border-color: rgba(180, 220, 255, 0.2);
+  animation: landing-spin 38s linear infinite reverse;
+}
+
+body.landing-page .ring-ticks {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: repeating-conic-gradient(rgba(200, 168, 75, 0.25) 0deg 0.5deg, transparent 0.5deg 30deg);
+}
+
+body.landing-page .ring-core {
+  position: absolute;
+  inset: 36%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(200, 168, 75, 0.25) 0%, transparent 70%);
+}
+
+body.landing-page .ring-symbol {
+  color: rgba(200, 168, 75, 0.9);
+  font-size: clamp(38px, 6vw, 64px);
+  animation: landing-pulse 3s ease-in-out infinite;
+}
+
+body.landing-page .redirect-banner {
+  border: 1px solid rgba(133, 167, 255, 0.16);
+  border-radius: 24px;
+  background: rgba(6, 12, 26, 0.78);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(16px);
+}
+
+body.landing-page .redirect-banner {
+  position: static;
+  left: auto;
+  bottom: auto;
+  transform: none;
+  z-index: 1;
+  width: 100%;
+  max-width: 720px;
+  margin: 0 auto;
+  display: grid;
+  gap: 14px;
+  padding: 20px;
+  color: rgba(210, 224, 248, 0.72);
+  white-space: normal;
+}
+
+body.landing-page .redirect-copy {
+  display: grid;
+  gap: 6px;
+  text-align: left;
+}
+
+body.landing-page .redirect-label {
+  color: rgba(233, 216, 164, 0.86);
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+body.landing-page .redirect-title {
+  font-size: 15px;
+  letter-spacing: 0.05em;
+}
+
+body.landing-page .redirect-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+body.landing-page .redirect-countdown {
+  min-width: 58px;
+  padding: 12px 0;
+  border: 1px solid rgba(200, 168, 75, 0.22);
+  border-radius: 16px;
+  background: rgba(201, 168, 75, 0.08);
+  color: rgba(200, 168, 75, 0.9);
+  font-family: 'Orbitron', sans-serif;
+  font-size: 26px;
+  font-weight: 700;
+  text-align: center;
+}
+
+body.landing-page .redirect-progress {
+  flex: 1;
+  display: grid;
+  gap: 8px;
+}
+
+body.landing-page .redirect-progress-text {
+  color: rgba(210, 224, 248, 0.62);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+body.landing-page .redirect-bar-wrap {
+  width: 100%;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: rgba(133, 167, 255, 0.12);
+}
+
+body.landing-page .redirect-bar {
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  background: linear-gradient(90deg, rgba(56, 192, 215, 0.8), rgba(200, 168, 75, 0.9));
+  transform-origin: left;
+  animation: landing-shrink 10s linear forwards;
+}
+
+body.landing-page .redirect-link {
+  justify-self: start;
+}
+
+@keyframes landing-shrink {
+  from { transform: scaleX(1); }
+  to { transform: scaleX(0); }
+}
+
+@keyframes landing-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(22px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes landing-spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes landing-pulse {
+  0%, 100% {
+    opacity: 0.6;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.15);
+  }
+}
+
+@media (max-width: 860px) {
+  body.landing-page .hero-panel {
+    grid-template-columns: 1fr;
+  }
+
+  body.landing-page .hero-copy {
+    text-align: center;
+  }
+
+  body.landing-page .hero-divider,
+  body.landing-page .hero-subtitle,
+  body.landing-page .hero-desc {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  body.landing-page .hero-meta,
+  body.landing-page .hero-actions {
+    justify-content: center;
+  }
+
+  body.landing-page .background-orbit::before {
+    transform: translate(-50%, -42%);
+  }
+}
+
+@media (max-width: 640px) {
+  body.landing-page {
+    padding: 20px 14px;
+  }
+
+  body.landing-page .hero {
+    padding: 24px 18px;
+    border-radius: 24px;
+  }
+
+  body.landing-page .hero-topline {
+    font-size: 10px;
+    letter-spacing: 0.12em;
+  }
+
+  body.landing-page .hero-actions {
+    flex-direction: column;
+  }
+
+  body.landing-page .hero-button,
+  body.landing-page .hero-link,
+  body.landing-page .redirect-link {
+    width: 100%;
+  }
+
+  body.landing-page .redirect-row {
+    flex-direction: column;
+    align-items: stretch;
+  }
+}
+</style>
 </head>
 <body class="landing-page">

@@ -14,92 +515,153 @@
 <div class="nebula nebula-1"></div>
 <div class="nebula nebula-2"></div>
 <div class="nebula nebula-3"></div>
-
-<div class="redirect-banner">
-  <span>Weiterleitung in</span>
-  <span class="redirect-countdown" id="countdown">10</span>
-  <span>Sekunden &mdash;</span>
-  <div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
-  <a class="redirect-link" href="public/index.php">Jetzt &rarr;</a>
-</div>
-
-<div class="page">
-  <section class="hero">
-    <p class="museum-pre">Astronomiemuseum der Sternwarte Sonneberg · seit 1925</p>
-    <p class="museum-pre">Th&uuml;ringens Tor ins Universum</p>
-
+<div class="background-orbit">
  <div class="ring-wrap" id="ringWrap">
    <div class="crosshair"></div>
    <div class="ring ring-outer"><div class="ring-ticks"></div></div>
    <div class="ring ring-inner"></div>
    <div class="ring-core"><div class="ring-symbol">&#10022;</div></div>
  </div>
+</div>
+
+<div class="page">
+  <div class="page-stack">
+    <section class="hero">
+      <div class="hero-panel">
+        <div class="hero-copy">
+          <div class="hero-topline">
+            <span class="hero-topline-dot"></span>
+            <span>Observatory Interface</span>
+          </div>
+
+          <p class="museum-pre">Astronomiemuseum der Sternwarte Sonneberg &middot; seit 1925</p>
+          <p class="museum-pre">Th&uuml;ringens Tor ins Universum</p>

          <h1 class="hero-title"><em>AstroTools</em></h1>
+          <p class="hero-subtitle">Digitale Werkzeuge f&uuml;r Beobachtung, Planung und Entdeckung.</p>

          <div class="hero-divider"></div>

-    <p class="hero-desc">
-      Digitale Hilfsmittel f&uuml;r Beobachtung, Planung und Entdeckung &ndash;<br>
-      entwickelt vom Astronomiemuseum der Sternwarte Sonneberg.<br>
-      Standort: Erbisp&uuml;hl &middot; Neufang &middot; 638 m &uuml;.NN<br>
-      IAU-Sternwartencode: <strong>031</strong>
-    </p>
+          <div class="hero-meta">
+            <div class="hero-chip">Standort: Erbisb&uuml;hl / Neufang</div>
+            <div class="hero-chip">638 m &uuml;. NN</div>
+            <div class="hero-chip">IAU-Code 031</div>
+          </div>

+          <div class="hero-actions">
+            <a class="hero-button" href="public/index.php">Zur Hauptseite</a>
            <a class="hero-link" href="https://astronomiemuseum.de" target="_blank" rel="noopener">
              &nearr; astronomiemuseum.de
            </a>
+          </div>
+        </div>
+      </div>
    </section>
+
+    <div class="redirect-banner">
+      <div class="redirect-copy">
+        <span class="redirect-label">Automatische Weiterleitung</span>
+        <span class="redirect-title">Die Hauptseite wird automatisch ge&ouml;ffnet.</span>
+      </div>
+
+      <div class="redirect-row">
+        <span class="redirect-countdown" id="countdown">10</span>
+        <div class="redirect-progress">
+          <span class="redirect-progress-text">Weiter in wenigen Sekunden</span>
+          <div class="redirect-bar-wrap"><div class="redirect-bar"></div></div>
+        </div>
+      </div>
+
+      <a class="redirect-link" href="public/index.php">Jetzt direkt &rarr;</a>
+    </div>
+  </div>
 </div>

 <script>
 const canvas = document.getElementById('starCanvas');
 const ctx = canvas.getContext('2d');
-function resize(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; }
-resize(); window.addEventListener('resize',resize);
+
+function resize() {
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+}
+
+resize();
+window.addEventListener('resize', resize);

 const STARS = Array.from({ length: 320 }, () => ({
-  x:Math.random(),y:Math.random(),r:Math.random()*1.2+0.15,
-  a:Math.random()*0.6+0.1,tw:Math.random()*5000+2500,tp:Math.random()*8000,
-  c:Math.random()<.15?[255,220,180]:Math.random()<.1?[180,200,255]:[210,225,255],
+  x: Math.random(),
+  y: Math.random(),
+  r: Math.random() * 1.2 + 0.15,
+  a: Math.random() * 0.6 + 0.1,
+  tw: Math.random() * 5000 + 2500,
+  tp: Math.random() * 8000,
+  c: Math.random() < 0.15 ? [255, 220, 180] : Math.random() < 0.1 ? [180, 200, 255] : [210, 225, 255]
 }));
+
 const BRIGHT = Array.from({ length: 14 }, () => ({
-  x:Math.random(),y:Math.random(),r:Math.random()*1.8+1.0,
-  a:Math.random()*0.5+0.4,tw:Math.random()*3000+1500,tp:Math.random()*5000,
+  x: Math.random(),
+  y: Math.random(),
+  r: Math.random() * 1.8 + 1.0,
+  a: Math.random() * 0.5 + 0.4,
+  tw: Math.random() * 3000 + 1500,
+  tp: Math.random() * 5000
 }));

 function drawStar(x, y, r, a, rgb) {
-  ctx.beginPath();ctx.arc(x,y,r,0,Math.PI*2);
-  ctx.fillStyle=`rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;ctx.fill();
+  ctx.beginPath();
+  ctx.arc(x, y, r, 0, Math.PI * 2);
+  ctx.fillStyle = `rgba(${rgb[0]},${rgb[1]},${rgb[2]},${a})`;
+  ctx.fill();
 }
+
 function drawSpike(x, y, size, a) {
-  ctx.save();ctx.globalAlpha=a*.5;const len=size*6;
-  ctx.strokeStyle=`rgba(255,240,200,${a*.3})`;ctx.lineWidth=.5;
-  ctx.beginPath();ctx.moveTo(x-len,y);ctx.lineTo(x+len,y);ctx.stroke();
-  ctx.beginPath();ctx.moveTo(x,y-len);ctx.lineTo(x,y+len);ctx.stroke();
+  ctx.save();
+  ctx.globalAlpha = a * 0.5;
+  const len = size * 6;
+  ctx.strokeStyle = `rgba(255,240,200,${a * 0.3})`;
+  ctx.lineWidth = 0.5;
+  ctx.beginPath();
+  ctx.moveTo(x - len, y);
+  ctx.lineTo(x + len, y);
+  ctx.stroke();
+  ctx.beginPath();
+  ctx.moveTo(x, y - len);
+  ctx.lineTo(x, y + len);
+  ctx.stroke();
  ctx.restore();
 }
+
 (function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const t = performance.now();
-  STARS.forEach(s=>{
-    const a=s.a*(0.5+0.5*Math.sin((t+s.tp)/s.tw*Math.PI*2));
-    drawStar(s.x*canvas.width,s.y*canvas.height,s.r,a,s.c);
+
+  STARS.forEach((s) => {
+    const alpha = s.a * (0.5 + 0.5 * Math.sin((t + s.tp) / s.tw * Math.PI * 2));
+    drawStar(s.x * canvas.width, s.y * canvas.height, s.r, alpha, s.c);
  });
-  BRIGHT.forEach(s=>{
-    const a=s.a*(0.6+0.4*Math.sin((t+s.tp)/s.tw*Math.PI*2));
-    const x=s.x*canvas.width,y=s.y*canvas.height;
-    const g=ctx.createRadialGradient(x,y,0,x,y,s.r*4);
-    g.addColorStop(0,`rgba(255,245,220,${a*.6})`);g.addColorStop(1,'transparent');
-    ctx.beginPath();ctx.arc(x,y,s.r*4,0,Math.PI*2);ctx.fillStyle=g;ctx.fill();
-    drawStar(x,y,s.r,a,[255,245,220]);drawSpike(x,y,s.r,a);
+
+  BRIGHT.forEach((s) => {
+    const alpha = s.a * (0.6 + 0.4 * Math.sin((t + s.tp) / s.tw * Math.PI * 2));
+    const x = s.x * canvas.width;
+    const y = s.y * canvas.height;
+    const gradient = ctx.createRadialGradient(x, y, 0, x, y, s.r * 4);
+    gradient.addColorStop(0, `rgba(255,245,220,${alpha * 0.6})`);
+    gradient.addColorStop(1, 'transparent');
+    ctx.beginPath();
+    ctx.arc(x, y, s.r * 4, 0, Math.PI * 2);
+    ctx.fillStyle = gradient;
+    ctx.fill();
+    drawStar(x, y, s.r, alpha, [255, 245, 220]);
+    drawSpike(x, y, s.r, alpha);
  });
+
  requestAnimationFrame(draw);
 })();

-document.addEventListener('mousemove',e=>{
-  const xR=(e.clientX/window.innerWidth-.5)*2;
-  const yR=(e.clientY/window.innerHeight-.5)*2;
+document.addEventListener('mousemove', (e) => {
+  const xR = (e.clientX / window.innerWidth - 0.5) * 2;
+  const yR = (e.clientY / window.innerHeight - 0.5) * 2;
  const wrap = document.getElementById('ringWrap');
  if (wrap) {
    wrap.style.setProperty('--ring-offset-x', `${xR * 8}px`);
@@ -110,8 +672,12 @@ document.addEventListener('mousemove',e=>{
 let secs = 10;
 const countEl = document.getElementById('countdown');
 const timer = setInterval(() => {
-  secs--;countEl.textContent=secs;
-  if(secs<=0){clearInterval(timer);window.location.href='public/index.php';}
+  secs--;
+  countEl.textContent = secs;
+  if (secs <= 0) {
+    clearInterval(timer);
+    window.location.href = 'public/index.php';
+  }
 }, 1000);
 </script>
 </body>
@@ -440,6 +440,67 @@ if ($currentUserIsMaster) {
 ?>
 <?php require __DIR__ . '/header.php'; ?>

+<style>
+.admin-users-table.permissions-matrix {
+    width: auto;
+    min-width: max-content;
+}
+
+.admin-users-table.permissions-matrix thead th {
+    vertical-align: bottom;
+}
+
+.admin-users-table.permissions-matrix thead th.permissions-matrix-head {
+    width: 22px;
+    min-width: 22px;
+    padding: 0.2rem 0.02rem;
+    text-align: center;
+}
+
+.admin-users-table.permissions-matrix thead th.permissions-matrix-head > span {
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+    min-height: 96px;
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+    white-space: nowrap;
+    font-size: 0.56rem;
+    letter-spacing: 0;
+    line-height: 1.05;
+}
+
+.admin-users-table.permissions-matrix td {
+    min-width: 22px;
+    padding: 0.2rem 0.02rem;
+    text-align: center;
+}
+
+.admin-users-table.permissions-matrix td input[type="checkbox"] {
+    margin: 0;
+}
+
+.admin-users-table.permissions-matrix td:first-child,
+.admin-users-table.permissions-matrix th:first-child,
+.admin-users-table.permissions-matrix td:last-child,
+.admin-users-table.permissions-matrix th:last-child {
+    text-align: left;
+}
+
+.admin-users-table.permissions-matrix td:first-child,
+.admin-users-table.permissions-matrix th:first-child {
+    min-width: 150px;
+    padding-right: 0.45rem;
+}
+
+.admin-users-table.permissions-matrix td:last-child,
+.admin-users-table.permissions-matrix th:last-child {
+    min-width: 92px;
+    padding-left: 0.45rem;
+    white-space: nowrap;
+}
+</style>
+
 <div class="admin-users-layout">
    <section class="card admin-users-summary-card">
        <h2>Übersicht</h2>
@@ -574,12 +635,12 @@ if ($currentUserIsMaster) {
            <h2>Seitenfreigaben</h2>
            <p class="hint">Nur Master-Benutzer dürfen hier festlegen, welche Seiten normale Nutzer im Menü sehen und direkt aufrufen dürfen.</p>
            <div class="admin-users-table-wrap">
-                <table class="data-table admin-users-table">
+                <table class="data-table admin-users-table permissions-matrix">
                    <thead>
                        <tr>
                            <th>Benutzer</th>
                            <?php foreach ($manageablePages as $pageKey => $pageLabel): ?>
-                                <th><?= h($pageLabel) ?></th>
+                                <th class="permissions-matrix-head"><span><?= h($pageLabel) ?></span></th>
                            <?php endforeach; ?>
                            <th>Speichern</th>
                        </tr>
@@ -609,6 +670,8 @@ if ($currentUserIsMaster) {
                                            name="page_keys[]"
                                            value="<?= h($pageKey) ?>"
                                            form="<?= h($permissionFormId) ?>"
+                                            title="<?= h($pageLabel) ?>"
+                                            aria-label="<?= h($pageLabel) ?>"
                                            <?= isset($userPermissions[$pageKey]) ? 'checked' : '' ?>
                                            <?= $isPrivilegedUser ? 'disabled' : '' ?>
                                        >