CSS umgebaut

index.html

@@ -6,130 +6,9 @@
 <meta http-equiv="refresh" content="10; url=public/index.php">
 <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">
-<style>
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
-html{scroll-behavior:smooth;}
-body{
-  background:#03030d;
-  color:#eef4ff;
-  font-family:'Space Mono',monospace;
-  min-height:100vh;
-  overflow-x:hidden;
-  display:flex;align-items:center;justify-content:center;
-}
-
-#starCanvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
-
-.nebula{position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;}
-.nebula-1{width:600px;height:400px;top:-100px;right:-150px;background:radial-gradient(ellipse,rgba(40,60,160,.18) 0%,transparent 70%);}
-.nebula-2{width:500px;height:500px;bottom:10%;left:-150px;background:radial-gradient(ellipse,rgba(80,20,120,.14) 0%,transparent 70%);}
-.nebula-3{width:400px;height:300px;top:40%;right:5%;background:radial-gradient(ellipse,rgba(20,80,100,.12) 0%,transparent 70%);}
-
-.page{
-  position:relative;z-index:1;
-  width:100%;max-width:640px;
-  padding:0 24px;
-}
-
-.hero{
-  text-align:center;
-  padding:48px 20px;
-  animation:fadeUp .9s ease both;
-}
-.museum-pre{
-  font-size:9px;letter-spacing:.22em;text-transform:uppercase;
-  color:rgba(200,168,75,.7);margin-bottom:32px;
-}
-
-.ring-wrap{
-  position:relative;width:120px;height:120px;
-  margin:0 auto 28px;transition:transform .1s ease-out;
-}
-.crosshair{
-  position:absolute;inset:0;
-  background:linear-gradient(rgba(200,168,75,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(200,168,75,.15) 1px,transparent 1px);
-  background-size:100% 50%,50% 100%;
-}
-.ring{position:absolute;border-radius:50%;border:1px solid rgba(200,168,75,.3);}
-.ring-outer{inset:0;animation:spin 60s linear infinite;}
-.ring-inner{inset:20px;border-color:rgba(180,220,255,.2);animation:spin 38s linear infinite reverse;}
-.ring-ticks{
-  position:absolute;inset:0;border-radius:50%;
-  background:repeating-conic-gradient(rgba(200,168,75,.25) 0deg .5deg,transparent .5deg 30deg);
-}
-.ring-core{
-  position:absolute;inset:40px;
-  background:radial-gradient(circle,rgba(200,168,75,.25) 0%,transparent 70%);
-  border-radius:50%;display:flex;align-items:center;justify-content:center;
-}
-.ring-symbol{font-size:16px;color:rgba(200,168,75,.9);animation:pulse 3s ease-in-out infinite;}
-
-.hero-title{
-  font-family:'Orbitron',sans-serif;font-weight:900;
-  font-size:clamp(36px,6vw,72px);letter-spacing:.06em;
-  color:#f0f6ff;
-  text-shadow:0 0 40px rgba(200,160,80,.35),0 0 80px rgba(100,130,255,.15);
-  margin-bottom:10px;line-height:1;
-}
-.hero-title em{font-style:normal;}
-
-.tagline{
-  font-family:'Cormorant Garamond',serif;font-style:italic;
-  font-size:18px;color:rgba(200,168,75,.85);letter-spacing:.08em;margin-bottom:24px;
-}
-.hero-divider{
-  width:80px;height:1px;
-  background:linear-gradient(90deg,transparent,rgba(200,168,75,.5),transparent);
-  margin:0 auto 20px;
-}
-.hero-desc{
-  font-size:12px;line-height:1.9;
-  color:rgba(200,215,240,.6);letter-spacing:.04em;margin-bottom:24px;
-}
-.hero-link{
-  display:inline-block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
-  color:rgba(200,168,75,.8);text-decoration:none;
-  border-bottom:1px solid rgba(200,168,75,.3);padding-bottom:2px;
-  transition:color .2s,border-color .2s;
-}
-.hero-link:hover{color:#e8c870;border-color:#e8c870;}
-
-/* Redirect Banner */
-.redirect-banner{
-  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
-  z-index:100;
-  display:flex;align-items:center;gap:14px;
-  padding:12px 22px;
-  background:rgba(6,10,26,.92);
-  border:1px solid rgba(200,168,75,.25);
-  border-radius:999px;
-  backdrop-filter:blur(16px);
-  box-shadow:0 4px 32px rgba(0,0,0,.5);
-  font-size:10px;letter-spacing:.14em;
-  color:rgba(200,215,240,.55);
-  white-space:nowrap;
-}
-.redirect-countdown{
-  font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;
-  color:rgba(200,168,75,.9);min-width:16px;text-align:center;
-}
-.redirect-bar-wrap{width:80px;height:2px;background:rgba(200,168,75,.12);border-radius:1px;overflow:hidden;}
-.redirect-bar{
-  height:100%;background:rgba(200,168,75,.7);border-radius:1px;
-  width:100%;transform-origin:left;animation:shrink 5s linear forwards;
-}
-.redirect-link{
-  color:rgba(200,168,75,.7);text-decoration:none;letter-spacing:.12em;transition:color .2s;
-}
-.redirect-link:hover{color:#e8c870;}
-
-@keyframes shrink{from{transform:scaleX(1);}to{transform:scaleX(0);}}
-@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
-@keyframes spin{to{transform:rotate(360deg);}}
-@keyframes pulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
-</style>
+<link rel="stylesheet" href="public/css/style.css">
 </head>
-<body>
+<body class="landing-page">
 
 <canvas id="starCanvas"></canvas>
 <div class="nebula nebula-1"></div>
@@ -138,7 +17,7 @@ body{
 
 <div class="redirect-banner">
   <span>Weiterleitung in</span>
-  <span class="redirect-countdown" id="countdown">5</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>
@@ -222,7 +101,10 @@ document.addEventListener('mousemove',e=>{
   const xR=(e.clientX/window.innerWidth-.5)*2;
   const yR=(e.clientY/window.innerHeight-.5)*2;
   const wrap=document.getElementById('ringWrap');
-  if(wrap) wrap.style.transform=`translate(${xR*8}px,${yR*8}px)`;
+  if(wrap){
+    wrap.style.setProperty('--ring-offset-x', `${xR*8}px`);
+    wrap.style.setProperty('--ring-offset-y', `${yR*8}px`);
+  }
 });
 
 let secs=10;