COSMOS<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{background:#050508;color:#c8d4e8;font-family:'Space Grotesk',sans-serif;overflow-x:hidden}\ncanvas#stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}\nsection,nav,footer{position:relative;z-index:1}\nnav{position:fixed;top:0;width:100%;padding:1.5rem 4rem;display:flex;justify-content:space-between;align-items:center;z-index:100;transition:background 0.4s}\nnav.scrolled{background:rgba(5,5,8,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,212,232,0.08)}\n.nav-logo{font-family:'Space Mono',monospace;font-size:1.1rem;letter-spacing:0.15em;color:#fff;text-decoration:none}\n.nav-links{display:flex;gap:2.5rem;list-style:none}\n.nav-links a{color:rgba(200,212,232,0.6);text-decoration:none;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.3s}\n.nav-links a:hover{color:#fff}\n#hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}\n.hero-eyebrow{font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:0.25em;color:rgba(107,79,160,1);text-transform:uppercase;margin-bottom:2rem;opacity:0;animation:fadeUp 1s 0.3s forwards}\nh1.hero-title{font-size:clamp(3.5rem,10vw,8rem);font-weight:700;line-height:1.0;color:#fff;letter-spacing:-0.02em;opacity:0;animation:fadeUp 1s 0.5s forwards}\nh1.hero-title span{color:rgba(107,79,160,0.9)}\n.hero-sub{margin-top:1.5rem;font-size:1.05rem;color:rgba(200,212,232,0.5);max-width:500px;line-height:1.7;opacity:0;animation:fadeUp 1s 0.7s forwards}\n.hero-cta{margin-top:3rem;display:flex;gap:1rem;opacity:0;animation:fadeUp 1s 0.9s forwards}\n.btn{padding:0.85rem 2rem;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all 0.3s;cursor:pointer;border:none;display:inline-block}\n.btn-primary{background:#6b4fa0;color:#fff}\n.btn-primary:hover{background:#7d5fb8;transform:translateY(-2px)}\n.btn-ghost{background:transparent;color:rgba(200,212,232,0.8);border:1px solid rgba(200,212,232,0.2)}\n.btn-ghost:hover{border-color:rgba(200,212,232,0.6);color:#fff}\n.scroll-hint{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0;animation:fadeUp 1s 1.2s forwards}\n.scroll-hint span{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(200,212,232,0.3)}\n.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(107,79,160,0.8),transparent);animation:scrollPulse 2s infinite}\n#live{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.section-label{font-family:'Space Mono',monospace;font-size:0.7rem;letter-spacing:0.25em;color:rgba(107,79,160,0.8);text-transform:uppercase;margin-bottom:1rem}\n.section-title{font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:3rem}\n.iss-card{border:1px solid rgba(200,212,232,0.08);padding:2.5rem;border-radius:4px;background:rgba(200,212,232,0.02)}\n.iss-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}\n.iss-stat label{display:block;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(200,212,232,0.4);margin-bottom:0.5rem}\n.iss-stat .value{font-family:'Space Mono',monospace;font-size:1.6rem;color:#fff;font-weight:400}\n.iss-stat .unit{font-size:0.8rem;color:rgba(200,212,232,0.4);margin-left:0.3rem}\n.iss-status{display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:2rem;font-size:0.8rem;color:rgba(200,212,232,0.5)}\n.iss-dot{width:6px;height:6px;border-radius:50%;background:#6b4fa0;animation:pulse 2s infinite}\n#objects{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.objects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}\n.obj-card{border:1px solid rgba(200,212,232,0.07);padding:2rem;border-radius:4px;background:rgba(200,212,232,0.015);cursor:pointer;transition:all 0.3s}\n.obj-card:hover{border-color:rgba(107,79,160,0.4);background:rgba(107,79,160,0.04);transform:translateY(-4px)}\n.obj-num{font-family:'Space Mono',monospace;font-size:0.7rem;color:rgba(107,79,160,0.6);margin-bottom:1rem}\n.obj-name{font-size:1.2rem;font-weight:500;color:#fff;margin-bottom:0.5rem}\n.obj-type{font-size:0.8rem;color:rgba(200,212,232,0.4);margin-bottom:1rem}\n.obj-desc{font-size:0.9rem;color:rgba(200,212,232,0.5);line-height:1.6}\n#apod{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.apod-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}\n.apod-img-wrap{border:1px solid rgba(200,212,232,0.08);overflow:hidden;border-radius:4px;aspect-ratio:4\/3}\n.apod-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s}\n.apod-img-wrap:hover img{transform:scale(1.02)}\n.apod-text .section-label{margin-bottom:1rem}\n.apod-title{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.2}\n.apod-desc{font-size:0.95rem;color:rgba(200,212,232,0.5);line-height:1.7;margin-bottom:2rem}\n.apod-date{font-family:'Space Mono',monospace;font-size:0.75rem;color:rgba(107,79,160,0.6)}\n#timeline{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.timeline-items{display:flex;flex-direction:column;gap:0}\n.tl-item{display:grid;grid-template-columns:120px 1px 1fr;gap:0 2rem;padding-bottom:3rem}\n.tl-year{font-family:'Space Mono',monospace;font-size:0.85rem;color:rgba(107,79,160,0.8);text-align:right;padding-top:0.1rem}\n.tl-line{background:rgba(200,212,232,0.08);position:relative}\n.tl-line::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#6b4fa0;box-shadow:0 0 0 3px rgba(107,79,160,0.15)}\n.tl-content h3{font-size:1rem;font-weight:500;color:#fff;margin-bottom:0.5rem}\n.tl-content p{font-size:0.88rem;color:rgba(200,212,232,0.45);line-height:1.6}\nfooter{padding:4rem;border-top:1px solid rgba(200,212,232,0.06);display:flex;justify-content:space-between;align-items:center}\n.footer-logo{font-family:'Space Mono',monospace;font-size:0.9rem;color:rgba(200,212,232,0.3);letter-spacing:0.15em}\n.footer-note{font-size:0.8rem;color:rgba(200,212,232,0.2)}\n@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}\n@keyframes scrollPulse{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0.3) translateY(20px)}}\n.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}\n.fade-in.visible{opacity:1;transform:none}\n@media(max-width:768px){\n nav{padding:1.2rem 1.5rem}\n .nav-links{display:none}\n #live,#objects,#apod,#timeline{padding-left:1.5rem;padding-right:1.5rem}\n .iss-grid{grid-template-columns:1fr 1fr}\n .objects-grid{grid-template-columns:1fr}\n .apod-inner{grid-template-columns:1fr}\n h1.hero-title{font-size:clamp(2.5rem,12vw,5rem)}\n footer{flex-direction:column;gap:1rem;text-align:center}\n}\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n<canvas id=\"stars\"><\/canvas><\/p>\n<nav id=\"nav\">\n <a href=\"#\" class=\"nav-logo\">COSMOS<\/a><\/p>\n<ul class=\"nav-links\">\n<li><a href=\"#live\">Live<\/a><\/li>\n<li><a href=\"#objects\">Objekte<\/a><\/li>\n<li><a href=\"#apod\">Bild des Tages<\/a><\/li>\n<li><a href=\"#timeline\">Geschichte<\/a><\/li>\n<\/ul>\n<\/nav>\n<section id=\"hero\">\n<p class=\"hero-eyebrow\">Das Universum \u2014 13,8 Milliarden Jahre<\/p>\n<h1 class=\"hero-title\">Der Raum<br \/>zwischen<br \/>den <span>Sternen.<\/span><\/h1>\n<p class=\"hero-sub\">Eine stille Erkundung des Kosmos. Vom n\u00e4chsten Satelliten bis zum Rand der beobachtbaren Welt.<\/p>\n<div class=\"hero-cta\">\n <a href=\"#live\" class=\"btn btn-primary\">Live Daten<\/a><br \/>\n <a href=\"#objects\" class=\"btn btn-ghost\">Entdecken<\/a>\n <\/div>\n<div class=\"scroll-hint\">\n<div class=\"scroll-line\"><\/div>\n<p> <span>Scrollen<\/span>\n <\/div>\n<\/section>\n<section id=\"live\">\n<p class=\"section-label fade-in\">Echtzeit<\/p>\n<h2 class=\"section-title fade-in\">Internationale Raumstation<\/h2>\n<div class=\"iss-card fade-in\">\n<div class=\"iss-status\">\n<div class=\"iss-dot\"><\/div>\n<p> <span>Live-Tracking aktiv<\/span>\n <\/div>\n<div class=\"iss-grid\">\n<div class=\"iss-stat\"><label>Breitengrad<\/label><\/p>\n<div class=\"value\" id=\"iss-lat\">\u2014<span class=\"unit\">\u00b0<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>L\u00e4ngengrad<\/label><\/p>\n<div class=\"value\" id=\"iss-lon\">\u2014<span class=\"unit\">\u00b0<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Geschwindigkeit<\/label><\/p>\n<div class=\"value\">27<span class=\"unit\">600 km\/h<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>H\u00f6he<\/label><\/p>\n<div class=\"value\">408<span class=\"unit\">km<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Umlaufzeit<\/label><\/p>\n<div class=\"value\">92<span class=\"unit\">min<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Uml\u00e4ufe heute<\/label><\/p>\n<div class=\"value\" id=\"iss-orbits\">\u2014<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"objects\">\n<p class=\"section-label fade-in\">Kosmische Objekte<\/p>\n<h2 class=\"section-title fade-in\">Das Sonnensystem und dar\u00fcber hinaus<\/h2>\n<div class=\"objects-grid\">\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">01<\/div>\n<div class=\"obj-name\">Sonne<\/div>\n<div class=\"obj-type\">G-Typ-Hauptreihenstern<\/div>\n<div class=\"obj-desc\">Durchmesser von 1,4 Millionen km. Hei\u00df genug, um 600 Millionen Tonnen Wasserstoff pro Sekunde zu fusionieren.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">02<\/div>\n<div class=\"obj-name\">Jupiter<\/div>\n<div class=\"obj-type\">Gasriese<\/div>\n<div class=\"obj-desc\">Gr\u00f6\u00dfter Planet im Sonnensystem. Der Gro\u00dfe Rote Fleck \u2014 ein Sturm \u2014 tobt seit \u00fcber 350 Jahren.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">03<\/div>\n<div class=\"obj-name\">Andromeda<\/div>\n<div class=\"obj-type\">Spiralgalaxie<\/div>\n<div class=\"obj-desc\">2,5 Millionen Lichtjahre entfernt. Mit blo\u00dfem Auge sichtbar. Kollidiert in ca. 4,5 Milliarden Jahren mit der Milchstra\u00dfe.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">04<\/div>\n<div class=\"obj-name\">Neutronenstern<\/div>\n<div class=\"obj-type\">Kollabierter Sternkern<\/div>\n<div class=\"obj-desc\">Schwerer als die Sonne, nur 20 km gro\u00df. Ein Teel\u00f6ffel wiegt eine Milliarde Tonnen.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">05<\/div>\n<div class=\"obj-name\">Schwarzes Loch<\/div>\n<div class=\"obj-type\">Raumzeit-Singularit\u00e4t<\/div>\n<div class=\"obj-desc\">Gravitationsfeld so stark, dass selbst Licht nicht entkommen kann. Zeit verlangsamt sich in ihrer N\u00e4he messbar.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">06<\/div>\n<div class=\"obj-name\">Proxima Centauri b<\/div>\n<div class=\"obj-type\">Exoplanet<\/div>\n<div class=\"obj-desc\">N\u00e4chster potenziell bewohnbarer Exoplanet. 4,2 Lichtjahre entfernt \u2014 mit heutiger Technologie \u00fcber 6.000 Jahre Reise.<\/div>\n<\/div><\/div>\n<\/section>\n<section id=\"apod\">\n<div class=\"apod-inner\">\n<div class=\"apod-img-wrap fade-in\">\n <img decoding=\"async\" id=\"apod-img\" src=\"https:\/\/apod.nasa.gov\/apod\/image\/2403\/NGC1232_HaLRGBpugh.jpg\" alt=\"Astronomy Picture of the Day\">\n <\/div>\n<div class=\"apod-text fade-in\">\n<p class=\"section-label\">NASA APOD<\/p>\n<h2 class=\"apod-title\" id=\"apod-title\">Galaxie NGC 1232<\/h2>\n<p class=\"apod-desc\" id=\"apod-desc\">Eine atemberaubende Spiralgalaxie, rund 70 Millionen Lichtjahre entfernt im Sternbild Eridanus. Ihre Spiralarme enthalten Milliarden junger, blauer Sterne.<\/p>\n<p class=\"apod-date\" id=\"apod-date\">Wird geladen\u2026<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"timeline\">\n<p class=\"section-label fade-in\">Geschichte der Raumfahrt<\/p>\n<h2 class=\"section-title fade-in\">Meilensteine<\/h2>\n<div class=\"timeline-items\">\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1957<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Sputnik 1<\/h3>\n<p>Erster k\u00fcnstlicher Satellit der Erde. Die Sowjetunion schreibt Raumfahrtgeschichte.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1969<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Apollo 11<\/h3>\n<p>Neil Armstrong betritt als erster Mensch den Mond. 600 Millionen Menschen schauen zu.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1990<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Hubble-Teleskop<\/h3>\n<p>Start des Hubble Space Telescope. Es ver\u00e4ndert unser Bild des Universums f\u00fcr immer.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">2021<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>James Webb<\/h3>\n<p>Das leistungsst\u00e4rkste Teleskop aller Zeiten blickt bis an den Rand des beobachtbaren Universums.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">2030s<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Mars-Mission<\/h3>\n<p>Geplante bemannte Missionen zum Mars. Die n\u00e4chste Grenze der menschlichen Erkundung.<\/p>\n<\/div>\n<\/div><\/div>\n<\/section>\n<footer>\n<div class=\"footer-logo\">COSMOS<\/div>\n<div class=\"footer-note\">Daten: NASA APOD API \u00b7 Open Notify ISS API \u00b7 2024<\/div>\n<\/footer>\n<p><script>\nconst canvas=document.getElementById('stars');\nconst ctx=canvas.getContext('2d');\nlet stars=[],mouse={x:0,y:0},W,H;\nfunction resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight}\nresize();\nwindow.addEventListener('resize',resize);\nfor(let i=0;i<280;i++){stars.push({x:Math.random()*W,y:Math.random()*H,r:Math.random()*1.2+0.2,speed:Math.random()*0.3+0.05,twinkle:Math.random()*Math.PI*2})}\ndocument.addEventListener('mousemove',e=>{mouse.x=e.clientX;mouse.y=e.clientY});\nfunction draw(){\n ctx.clearRect(0,0,W,H);\n stars.forEach(s=>{\n s.twinkle+=0.02;\n const alpha=0.4+0.25*Math.sin(s.twinkle);\n const px=s.x+(mouse.x\/W-0.5)*s.speed*18;\n const py=s.y+(mouse.y\/H-0.5)*s.speed*18;\n ctx.beginPath();ctx.arc(px,py,s.r,0,Math.PI*2);\n ctx.fillStyle=`rgba(200,212,232,${alpha})`;ctx.fill();\n });\n requestAnimationFrame(draw);\n}\ndraw();\nwindow.addEventListener('scroll',()=>{document.getElementById('nav').classList.toggle('scrolled',window.scrollY>80)});\nconst observer=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')})},{threshold:0.1});\ndocument.querySelectorAll('.fade-in').forEach(el=>observer.observe(el));\nasync function fetchISS(){\n try{\n const r=await fetch('https:\/\/api.open-notify.org\/iss-now.json');\n const d=await r.json();\n document.getElementById('iss-lat').innerHTML=parseFloat(d.iss_position.latitude).toFixed(2)+'<span class=\"unit\">\u00b0<\/span>';\n document.getElementById('iss-lon').innerHTML=parseFloat(d.iss_position.longitude).toFixed(2)+'<span class=\"unit\">\u00b0<\/span>';\n const now=new Date();\n document.getElementById('iss-orbits').textContent=Math.floor((now.getHours()*60+now.getMinutes())\/92);\n }catch(e){}\n}\nfetchISS();setInterval(fetchISS,5000);\nasync function fetchAPOD(){\n try{\n const r=await fetch('https:\/\/api.nasa.gov\/planetary\/apod?api_key=DEMO_KEY');\n const d=await r.json();\n if(d.media_type==='image'){document.getElementById('apod-img').src=d.url;document.getElementById('apod-img').alt=d.title;}\n document.getElementById('apod-title').textContent=d.title;\n document.getElementById('apod-desc').textContent=d.explanation.split('.').slice(0,3).join('.')+'.';\n document.getElementById('apod-date').textContent=new Date(d.date).toLocaleDateString('de-DE',{year:'numeric',month:'long',day:'numeric'});\n }catch(e){}\n}\nfetchAPOD();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>COSMOS COSMOS Live Objekte Bild des Tages Geschichte Das Universum \u2014 13,8 Milliarden Jahre Der Raumzwischenden Sternen. Eine stille Erkundung des Kosmos. Vom n\u00e4chsten Satelliten bis zum Rand der beobachtbaren Welt. Live Daten Entdecken Scrollen Echtzeit Internationale Raumstation Live-Tracking aktiv Breitengrad \u2014\u00b0 L\u00e4ngengrad \u2014\u00b0 Geschwindigkeit 27600 km\/h H\u00f6he 408km Umlaufzeit 92min Uml\u00e4ufe heute \u2014 Kosmische […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zorpion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":4,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":33,"date":"2026-06-11T22:08:25","date_gmt":"2026-06-11T20:08:25","guid":{"rendered":"https:\/\/zorpion.de\/?page_id=33"},"modified":"2026-06-11T22:20:07","modified_gmt":"2026-06-11T20:20:07","slug":"hola","status":"publish","type":"page","link":"https:\/\/zorpion.de\/?page_id=33","title":{"rendered":""},"content":{"rendered":"

\n
\n
\n
\n
\nCOSMOS<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@300;400;500;700&family=Space+Mono:wght@400;700&display=swap\" rel=\"stylesheet\">\n<style>\n*{margin:0;padding:0;box-sizing:border-box}\nhtml{scroll-behavior:smooth}\nbody{background:#050508;color:#c8d4e8;font-family:'Space Grotesk',sans-serif;overflow-x:hidden}\ncanvas#stars{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none}\nsection,nav,footer{position:relative;z-index:1}\nnav{position:fixed;top:0;width:100%;padding:1.5rem 4rem;display:flex;justify-content:space-between;align-items:center;z-index:100;transition:background 0.4s}\nnav.scrolled{background:rgba(5,5,8,0.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(200,212,232,0.08)}\n.nav-logo{font-family:'Space Mono',monospace;font-size:1.1rem;letter-spacing:0.15em;color:#fff;text-decoration:none}\n.nav-links{display:flex;gap:2.5rem;list-style:none}\n.nav-links a{color:rgba(200,212,232,0.6);text-decoration:none;font-size:0.85rem;letter-spacing:0.08em;text-transform:uppercase;transition:color 0.3s}\n.nav-links a:hover{color:#fff}\n#hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem}\n.hero-eyebrow{font-family:'Space Mono',monospace;font-size:0.75rem;letter-spacing:0.25em;color:rgba(107,79,160,1);text-transform:uppercase;margin-bottom:2rem;opacity:0;animation:fadeUp 1s 0.3s forwards}\nh1.hero-title{font-size:clamp(3.5rem,10vw,8rem);font-weight:700;line-height:1.0;color:#fff;letter-spacing:-0.02em;opacity:0;animation:fadeUp 1s 0.5s forwards}\nh1.hero-title span{color:rgba(107,79,160,0.9)}\n.hero-sub{margin-top:1.5rem;font-size:1.05rem;color:rgba(200,212,232,0.5);max-width:500px;line-height:1.7;opacity:0;animation:fadeUp 1s 0.7s forwards}\n.hero-cta{margin-top:3rem;display:flex;gap:1rem;opacity:0;animation:fadeUp 1s 0.9s forwards}\n.btn{padding:0.85rem 2rem;font-family:'Space Grotesk',sans-serif;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;text-decoration:none;border-radius:2px;transition:all 0.3s;cursor:pointer;border:none;display:inline-block}\n.btn-primary{background:#6b4fa0;color:#fff}\n.btn-primary:hover{background:#7d5fb8;transform:translateY(-2px)}\n.btn-ghost{background:transparent;color:rgba(200,212,232,0.8);border:1px solid rgba(200,212,232,0.2)}\n.btn-ghost:hover{border-color:rgba(200,212,232,0.6);color:#fff}\n.scroll-hint{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0.5rem;opacity:0;animation:fadeUp 1s 1.2s forwards}\n.scroll-hint span{font-size:0.7rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(200,212,232,0.3)}\n.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,rgba(107,79,160,0.8),transparent);animation:scrollPulse 2s infinite}\n#live{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.section-label{font-family:'Space Mono',monospace;font-size:0.7rem;letter-spacing:0.25em;color:rgba(107,79,160,0.8);text-transform:uppercase;margin-bottom:1rem}\n.section-title{font-size:2.2rem;font-weight:700;color:#fff;margin-bottom:3rem}\n.iss-card{border:1px solid rgba(200,212,232,0.08);padding:2.5rem;border-radius:4px;background:rgba(200,212,232,0.02)}\n.iss-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:2rem}\n.iss-stat label{display:block;font-size:0.75rem;letter-spacing:0.15em;text-transform:uppercase;color:rgba(200,212,232,0.4);margin-bottom:0.5rem}\n.iss-stat .value{font-family:'Space Mono',monospace;font-size:1.6rem;color:#fff;font-weight:400}\n.iss-stat .unit{font-size:0.8rem;color:rgba(200,212,232,0.4);margin-left:0.3rem}\n.iss-status{display:inline-flex;align-items:center;gap:0.5rem;margin-bottom:2rem;font-size:0.8rem;color:rgba(200,212,232,0.5)}\n.iss-dot{width:6px;height:6px;border-radius:50%;background:#6b4fa0;animation:pulse 2s infinite}\n#objects{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.objects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}\n.obj-card{border:1px solid rgba(200,212,232,0.07);padding:2rem;border-radius:4px;background:rgba(200,212,232,0.015);cursor:pointer;transition:all 0.3s}\n.obj-card:hover{border-color:rgba(107,79,160,0.4);background:rgba(107,79,160,0.04);transform:translateY(-4px)}\n.obj-num{font-family:'Space Mono',monospace;font-size:0.7rem;color:rgba(107,79,160,0.6);margin-bottom:1rem}\n.obj-name{font-size:1.2rem;font-weight:500;color:#fff;margin-bottom:0.5rem}\n.obj-type{font-size:0.8rem;color:rgba(200,212,232,0.4);margin-bottom:1rem}\n.obj-desc{font-size:0.9rem;color:rgba(200,212,232,0.5);line-height:1.6}\n#apod{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.apod-inner{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}\n.apod-img-wrap{border:1px solid rgba(200,212,232,0.08);overflow:hidden;border-radius:4px;aspect-ratio:4\/3}\n.apod-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s}\n.apod-img-wrap:hover img{transform:scale(1.02)}\n.apod-text .section-label{margin-bottom:1rem}\n.apod-title{font-size:1.8rem;font-weight:700;color:#fff;margin-bottom:1.5rem;line-height:1.2}\n.apod-desc{font-size:0.95rem;color:rgba(200,212,232,0.5);line-height:1.7;margin-bottom:2rem}\n.apod-date{font-family:'Space Mono',monospace;font-size:0.75rem;color:rgba(107,79,160,0.6)}\n#timeline{padding:5rem 4rem;max-width:1100px;margin:0 auto}\n.timeline-items{display:flex;flex-direction:column;gap:0}\n.tl-item{display:grid;grid-template-columns:120px 1px 1fr;gap:0 2rem;padding-bottom:3rem}\n.tl-year{font-family:'Space Mono',monospace;font-size:0.85rem;color:rgba(107,79,160,0.8);text-align:right;padding-top:0.1rem}\n.tl-line{background:rgba(200,212,232,0.08);position:relative}\n.tl-line::before{content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;background:#6b4fa0;box-shadow:0 0 0 3px rgba(107,79,160,0.15)}\n.tl-content h3{font-size:1rem;font-weight:500;color:#fff;margin-bottom:0.5rem}\n.tl-content p{font-size:0.88rem;color:rgba(200,212,232,0.45);line-height:1.6}\nfooter{padding:4rem;border-top:1px solid rgba(200,212,232,0.06);display:flex;justify-content:space-between;align-items:center}\n.footer-logo{font-family:'Space Mono',monospace;font-size:0.9rem;color:rgba(200,212,232,0.3);letter-spacing:0.15em}\n.footer-note{font-size:0.8rem;color:rgba(200,212,232,0.2)}\n@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}\n@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(1.5)}}\n@keyframes scrollPulse{0%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(0.3) translateY(20px)}}\n.fade-in{opacity:0;transform:translateY(30px);transition:opacity 0.7s ease,transform 0.7s ease}\n.fade-in.visible{opacity:1;transform:none}\n@media(max-width:768px){\n nav{padding:1.2rem 1.5rem}\n .nav-links{display:none}\n #live,#objects,#apod,#timeline{padding-left:1.5rem;padding-right:1.5rem}\n .iss-grid{grid-template-columns:1fr 1fr}\n .objects-grid{grid-template-columns:1fr}\n .apod-inner{grid-template-columns:1fr}\n h1.hero-title{font-size:clamp(2.5rem,12vw,5rem)}\n footer{flex-direction:column;gap:1rem;text-align:center}\n}\n<\/style>\n<p><\/head><br \/>\n<body><br \/>\n<canvas id=\"stars\"><\/canvas><\/p>\n<nav id=\"nav\">\n <a href=\"#\" class=\"nav-logo\">COSMOS<\/a><\/p>\n<ul class=\"nav-links\">\n<li><a href=\"#live\">Live<\/a><\/li>\n<li><a href=\"#objects\">Objekte<\/a><\/li>\n<li><a href=\"#apod\">Bild des Tages<\/a><\/li>\n<li><a href=\"#timeline\">Geschichte<\/a><\/li>\n<\/ul>\n<\/nav>\n<section id=\"hero\">\n<p class=\"hero-eyebrow\">Das Universum \u2014 13,8 Milliarden Jahre<\/p>\n<h1 class=\"hero-title\">Der Raum<br \/>zwischen<br \/>den <span>Sternen.<\/span><\/h1>\n<p class=\"hero-sub\">Eine stille Erkundung des Kosmos. Vom n\u00e4chsten Satelliten bis zum Rand der beobachtbaren Welt.<\/p>\n<div class=\"hero-cta\">\n <a href=\"#live\" class=\"btn btn-primary\">Live Daten<\/a><br \/>\n <a href=\"#objects\" class=\"btn btn-ghost\">Entdecken<\/a>\n <\/div>\n<div class=\"scroll-hint\">\n<div class=\"scroll-line\"><\/div>\n<p> <span>Scrollen<\/span>\n <\/div>\n<\/section>\n<section id=\"live\">\n<p class=\"section-label fade-in\">Echtzeit<\/p>\n<h2 class=\"section-title fade-in\">Internationale Raumstation<\/h2>\n<div class=\"iss-card fade-in\">\n<div class=\"iss-status\">\n<div class=\"iss-dot\"><\/div>\n<p> <span>Live-Tracking aktiv<\/span>\n <\/div>\n<div class=\"iss-grid\">\n<div class=\"iss-stat\"><label>Breitengrad<\/label><\/p>\n<div class=\"value\" id=\"iss-lat\">\u2014<span class=\"unit\">\u00b0<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>L\u00e4ngengrad<\/label><\/p>\n<div class=\"value\" id=\"iss-lon\">\u2014<span class=\"unit\">\u00b0<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Geschwindigkeit<\/label><\/p>\n<div class=\"value\">27<span class=\"unit\">600 km\/h<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>H\u00f6he<\/label><\/p>\n<div class=\"value\">408<span class=\"unit\">km<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Umlaufzeit<\/label><\/p>\n<div class=\"value\">92<span class=\"unit\">min<\/span><\/div>\n<\/div>\n<div class=\"iss-stat\"><label>Uml\u00e4ufe heute<\/label><\/p>\n<div class=\"value\" id=\"iss-orbits\">\u2014<\/div>\n<\/div><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"objects\">\n<p class=\"section-label fade-in\">Kosmische Objekte<\/p>\n<h2 class=\"section-title fade-in\">Das Sonnensystem und dar\u00fcber hinaus<\/h2>\n<div class=\"objects-grid\">\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">01<\/div>\n<div class=\"obj-name\">Sonne<\/div>\n<div class=\"obj-type\">G-Typ-Hauptreihenstern<\/div>\n<div class=\"obj-desc\">Durchmesser von 1,4 Millionen km. Hei\u00df genug, um 600 Millionen Tonnen Wasserstoff pro Sekunde zu fusionieren.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">02<\/div>\n<div class=\"obj-name\">Jupiter<\/div>\n<div class=\"obj-type\">Gasriese<\/div>\n<div class=\"obj-desc\">Gr\u00f6\u00dfter Planet im Sonnensystem. Der Gro\u00dfe Rote Fleck \u2014 ein Sturm \u2014 tobt seit \u00fcber 350 Jahren.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">03<\/div>\n<div class=\"obj-name\">Andromeda<\/div>\n<div class=\"obj-type\">Spiralgalaxie<\/div>\n<div class=\"obj-desc\">2,5 Millionen Lichtjahre entfernt. Mit blo\u00dfem Auge sichtbar. Kollidiert in ca. 4,5 Milliarden Jahren mit der Milchstra\u00dfe.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">04<\/div>\n<div class=\"obj-name\">Neutronenstern<\/div>\n<div class=\"obj-type\">Kollabierter Sternkern<\/div>\n<div class=\"obj-desc\">Schwerer als die Sonne, nur 20 km gro\u00df. Ein Teel\u00f6ffel wiegt eine Milliarde Tonnen.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">05<\/div>\n<div class=\"obj-name\">Schwarzes Loch<\/div>\n<div class=\"obj-type\">Raumzeit-Singularit\u00e4t<\/div>\n<div class=\"obj-desc\">Gravitationsfeld so stark, dass selbst Licht nicht entkommen kann. Zeit verlangsamt sich in ihrer N\u00e4he messbar.<\/div>\n<\/div>\n<div class=\"obj-card fade-in\">\n<div class=\"obj-num\">06<\/div>\n<div class=\"obj-name\">Proxima Centauri b<\/div>\n<div class=\"obj-type\">Exoplanet<\/div>\n<div class=\"obj-desc\">N\u00e4chster potenziell bewohnbarer Exoplanet. 4,2 Lichtjahre entfernt \u2014 mit heutiger Technologie \u00fcber 6.000 Jahre Reise.<\/div>\n<\/div><\/div>\n<\/section>\n<section id=\"apod\">\n<div class=\"apod-inner\">\n<div class=\"apod-img-wrap fade-in\">\n <img decoding=\"async\" id=\"apod-img\" src=\"https:\/\/apod.nasa.gov\/apod\/image\/2403\/NGC1232_HaLRGBpugh.jpg\" alt=\"Astronomy Picture of the Day\">\n <\/div>\n<div class=\"apod-text fade-in\">\n<p class=\"section-label\">NASA APOD<\/p>\n<h2 class=\"apod-title\" id=\"apod-title\">Galaxie NGC 1232<\/h2>\n<p class=\"apod-desc\" id=\"apod-desc\">Eine atemberaubende Spiralgalaxie, rund 70 Millionen Lichtjahre entfernt im Sternbild Eridanus. Ihre Spiralarme enthalten Milliarden junger, blauer Sterne.<\/p>\n<p class=\"apod-date\" id=\"apod-date\">Wird geladen\u2026<\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<section id=\"timeline\">\n<p class=\"section-label fade-in\">Geschichte der Raumfahrt<\/p>\n<h2 class=\"section-title fade-in\">Meilensteine<\/h2>\n<div class=\"timeline-items\">\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1957<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Sputnik 1<\/h3>\n<p>Erster k\u00fcnstlicher Satellit der Erde. Die Sowjetunion schreibt Raumfahrtgeschichte.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1969<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Apollo 11<\/h3>\n<p>Neil Armstrong betritt als erster Mensch den Mond. 600 Millionen Menschen schauen zu.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">1990<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Hubble-Teleskop<\/h3>\n<p>Start des Hubble Space Telescope. Es ver\u00e4ndert unser Bild des Universums f\u00fcr immer.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">2021<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>James Webb<\/h3>\n<p>Das leistungsst\u00e4rkste Teleskop aller Zeiten blickt bis an den Rand des beobachtbaren Universums.<\/p>\n<\/div>\n<\/div>\n<div class=\"tl-item fade-in\">\n<div class=\"tl-year\">2030s<\/div>\n<div class=\"tl-line\"><\/div>\n<div class=\"tl-content\">\n<h3>Mars-Mission<\/h3>\n<p>Geplante bemannte Missionen zum Mars. Die n\u00e4chste Grenze der menschlichen Erkundung.<\/p>\n<\/div>\n<\/div><\/div>\n<\/section>\n<footer>\n<div class=\"footer-logo\">COSMOS<\/div>\n<div class=\"footer-note\">Daten: NASA APOD API \u00b7 Open Notify ISS API \u00b7 2024<\/div>\n<\/footer>\n<p><script>\nconst canvas=document.getElementById('stars');\nconst ctx=canvas.getContext('2d');\nlet stars=[],mouse={x:0,y:0},W,H;\nfunction resize(){W=canvas.width=window.innerWidth;H=canvas.height=window.innerHeight}\nresize();\nwindow.addEventListener('resize',resize);\nfor(let i=0;i<280;i++){stars.push({x:Math.random()*W,y:Math.random()*H,r:Math.random()*1.2+0.2,speed:Math.random()*0.3+0.05,twinkle:Math.random()*Math.PI*2})}\ndocument.addEventListener('mousemove',e=>{mouse.x=e.clientX;mouse.y=e.clientY});\nfunction draw(){\n ctx.clearRect(0,0,W,H);\n stars.forEach(s=>{\n s.twinkle+=0.02;\n const alpha=0.4+0.25*Math.sin(s.twinkle);\n const px=s.x+(mouse.x\/W-0.5)*s.speed*18;\n const py=s.y+(mouse.y\/H-0.5)*s.speed*18;\n ctx.beginPath();ctx.arc(px,py,s.r,0,Math.PI*2);\n ctx.fillStyle=`rgba(200,212,232,${alpha})`;ctx.fill();\n });\n requestAnimationFrame(draw);\n}\ndraw();\nwindow.addEventListener('scroll',()=>{document.getElementById('nav').classList.toggle('scrolled',window.scrollY>80)});\nconst observer=new IntersectionObserver(entries=>{entries.forEach(e=>{if(e.isIntersecting)e.target.classList.add('visible')})},{threshold:0.1});\ndocument.querySelectorAll('.fade-in').forEach(el=>observer.observe(el));\nasync function fetchISS(){\n try{\n const r=await fetch('https:\/\/api.open-notify.org\/iss-now.json');\n const d=await r.json();\n document.getElementById('iss-lat').innerHTML=parseFloat(d.iss_position.latitude).toFixed(2)+'<span class=\"unit\">\u00b0<\/span>';\n document.getElementById('iss-lon').innerHTML=parseFloat(d.iss_position.longitude).toFixed(2)+'<span class=\"unit\">\u00b0<\/span>';\n const now=new Date();\n document.getElementById('iss-orbits').textContent=Math.floor((now.getHours()*60+now.getMinutes())\/92);\n }catch(e){}\n}\nfetchISS();setInterval(fetchISS,5000);\nasync function fetchAPOD(){\n try{\n const r=await fetch('https:\/\/api.nasa.gov\/planetary\/apod?api_key=DEMO_KEY');\n const d=await r.json();\n if(d.media_type==='image'){document.getElementById('apod-img').src=d.url;document.getElementById('apod-img').alt=d.title;}\n document.getElementById('apod-title').textContent=d.title;\n document.getElementById('apod-desc').textContent=d.explanation.split('.').slice(0,3).join('.')+'.';\n document.getElementById('apod-date').textContent=new Date(d.date).toLocaleDateString('de-DE',{year:'numeric',month:'long',day:'numeric'});\n }catch(e){}\n}\nfetchAPOD();\n<\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>COSMOS COSMOS Live Objekte Bild des Tages Geschichte Das Universum \u2014 13,8 Milliarden Jahre Der Raumzwischenden Sternen. Eine stille Erkundung des Kosmos. Vom n\u00e4chsten Satelliten bis zum Rand der beobachtbaren Welt. Live Daten Entdecken Scrollen Echtzeit Internationale Raumstation Live-Tracking aktiv Breitengrad \u2014\u00b0 L\u00e4ngengrad \u2014\u00b0 Geschwindigkeit 27600 km\/h H\u00f6he 408km Umlaufzeit 92min Uml\u00e4ufe heute \u2014 Kosmische […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zorpion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=33"}],"version-history":[{"count":4,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":39,"href":"https:\/\/zorpion.de\/index.php?rest_route=\/wp\/v2\/pages\/33\/revisions\/39"}],"wp:attachment":[{"href":"https:\/\/zorpion.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}