/* Reset & Basis */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width:100%; height:100%; overflow:hidden; background:#111; display:flex; align-items:center; justify-content:center; font-family:'Teko',sans-serif; position: relative; }

.container { position: relative; width:360px; height:360px; }

/* Ring */
.ring { position:absolute; top:50%; left:50%; width:220px; height:220px; transform:translate(-50%,-50%); }
.ring svg circle { fill:none; stroke:url(#grad); stroke-width:8; stroke-linecap:round; animation:draw 4s ease-in-out infinite; }
@keyframes draw { 0%,100% { stroke-dasharray:0 700; } 50% { stroke-dasharray:700 0; } }

/* Logo */
.logo { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:120px; mix-blend-mode:screen; animation:pulse 3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform:translate(-50%,-50%) scale(1); } 50% { transform:translate(-50%,-50%) scale(1.25); } }

/* Bubbles */
.bubbles { list-style:none; position:absolute; top:50%; left:50%; width:0; height:0; }
.bubbles li { position:absolute; top:0; left:0; }
.bubbles li a {
--angle:0deg; --size:60px; --color:rgba(255,255,255,0.1);
position:absolute; transform:rotate(var(--angle)) translate(0,-220px) rotate(calc(-1*var(--angle)));
display:block; width:var(--size); height:var(--size); line-height:var(--size);
border-radius:50%; background:var(--color); backdrop-filter:blur(5px);
text-align:center; color:#fff; font-size:0.9rem; text-decoration:none;
transition:transform .2s, background .2s; overflow:hidden;
}
.bubbles a:hover { transform:rotate(var(--angle)) translate(0,-220px) rotate(calc(-1*var(--angle))) scale(1.2); background:rgba(255,255,255,0.3); }

/* Orbitierender Punkt */
.bubbles a::before {
content:''; position:absolute; width:6px; height:6px; border-radius:50%; background:#fff;
top:50%; left:50%; transform-origin:50% calc(var(--size)/2 + 4px);
animation:orbit 3s linear infinite;
}
@keyframes orbit { from { transform: rotate(0deg) translateY(calc(-1*(var(--size)/2 + 4px))) rotate(0deg); } to { transform: rotate(360deg) translateY(calc(-1*(var(--size)/2 + 4px))) rotate(-360deg); } }

/* Konfiguration je Bubble */
.bubbles li:nth-child(1) a { --angle:0deg;   --size:50px;  --color:rgba(255,100,100,0.2); }
.bubbles li:nth-child(2) a { --angle:72deg;  --size:70px;  --color:rgba(100,255,100,0.2); }
.bubbles li:nth-child(3) a { --angle:144deg; --size:60px;  --color:rgba(100,100,255,0.2); }
.bubbles li:nth-child(4) a { --angle:216deg; --size:80px;  --color:rgba(255,255,100,0.2); }
.bubbles li:nth-child(5) a { --angle:288deg; --size:55px;  --color:rgba(255,100,255,0.2); }

/* Tagline absolut relativ zum Body */
.tagline {
position:absolute;
top: calc(50% + 110px + 20px);
left: 50%; transform: translateX(-50%);
color: #ddd; font-weight:300; font-size:1rem; letter-spacing:1px;
text-align:center;
width:100%;
}

/* Hintergrund-Blobs */
.blob { position:absolute; top:50%; left:50%; width:600px; height:600px; border-radius:50%; filter:blur(150px); }
.blob:nth-of-type(1) { background:radial-gradient(circle at 30% 30%,#ff0055,transparent 60%); animation:move1 8s infinite alternate ease-in-out; }
.blob:nth-of-type(2) { background:radial-gradient(circle at 70% 70%,#00ffff,transparent 60%); animation:move2 10s infinite alternate ease-in-out; }
@keyframes move1 { 0% { transform:translate(-50%,-50%) scale(1) translateX(0) translateY(0);} 100% { transform:translate(-50%,-50%) scale(1.2) translateX(100px) translateY(-80px);} }
@keyframes move2 { 0% { transform:translate(-50%,-50%) scale(1) translateX(0) translateY(0);} 100% { transform:translate(-50%,-50%) scale(1.2) translateX(-120px) translateY(100px);} }
#starfield {
position: absolute; top:0; left:0;
width: 100vw; height: 100vh;
z-index: 0; /* hinter deinem .container */
}
#starfield { z-index: 0; }
.blob       { z-index: 1; }
.container  { z-index: 2; }

/* Nebelfeld-Overlay */
body::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background:
radial-gradient(circle at 25% 30%, rgba(200,100,255,0.15), transparent 60%),
radial-gradient(circle at 75% 70%, rgba(100,200,255,0.15), transparent 60%);
pointer-events: none;
filter: blur(100px) contrast(1.2);
z-index: 1; /* zwischen Sternen (z-Index:0) und Blobs (z-Index:2) */
animation: nebulaShift 30s ease-in-out infinite alternate;
}

@keyframes nebulaShift {
from { transform: translate(0,0) scale(1); }
to   { transform: translate(-10%, -10%) scale(1.1); }
}