/*
  styles.css
  Dunkles, modernes Design für die Test-Willkommensseite von Jannik Hase.
  Kommentare auf Deutsch erklären Zweck einzelner Abschnitte.
  Keine externen Assets, nur CSS & Systemschriften.
*/

:root{
  --bg:#071022; /* sehr dunkler Hintergrund */
  --card:#0b1320;
  --muted:#94a3b8;
  --accent-1:#7C3AED;
  --accent-2:#06B6D4;
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
}

/* Einfacher Reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

.container{width:90%;max-width:1100px;margin:0 auto}

/* Header */
.site-header{position:sticky;top:0;z-index:30;background:linear-gradient(180deg, rgba(7,16,34,0.6), transparent);backdrop-filter:blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;text-decoration:none;color:inherit}
.nav .btn{font-size:14px}

/* Buttons */
.btn{display:inline-block;padding:10px 16px;border-radius:10px;border:1px solid transparent;text-decoration:none;color:inherit;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));color:#071022;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06)}

/* Hero-Bereich: animierter Hintergrund mittels Pseudo-Element */
.hero{position:relative;min-height:72vh;display:flex;align-items:center}
.hero::before{
  /* animierte, weiche Farbverläufe im Hintergrund */
  content:"";position:absolute;inset:0;z-index:0;filter:blur(60px) saturate(120%);
  background:radial-gradient(600px 400px at 10% 20%, rgba(124,58,237,0.18), transparent 10%),
            radial-gradient(600px 400px at 90% 80%, rgba(6,182,212,0.14), transparent 10%);
  animation: drift 12s linear infinite;
}
@keyframes drift{from{transform:translateY(0)}50%{transform:translateY(-18px)}to{transform:translateY(0)}}

.hero-inner{position:relative;z-index:2;display:flex;align-items:center;gap:40px}
.hero-card{max-width:640px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:var(--radius);padding:36px;box-shadow:0 8px 30px rgba(2,6,23,0.6);border:1px solid rgba(255,255,255,0.03)}
.title{font-size:clamp(28px,5vw,44px);margin-bottom:10px}
.highlight{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.subtitle{color:var(--muted);font-weight:600;margin-bottom:14px}
.lead{color:var(--muted);margin-bottom:18px}
.actions{display:flex;gap:12px}

/* Dekorative Orbs */
.decor{position:absolute;right:6%;top:10%;z-index:1;pointer-events:none}
.orb{width:88px;height:88px;border-radius:50%;mix-blend-mode:screen;opacity:0.9;margin:18px}
.orb-1{background:linear-gradient(180deg,var(--accent-1),transparent);animation:float1 6s ease-in-out infinite}
.orb-2{background:linear-gradient(180deg,var(--accent-2),transparent);width:120px;height:120px;animation:float2 8s ease-in-out infinite}
.orb-3{background:linear-gradient(180deg,rgba(255,255,255,0.06),transparent);width:60px;height:60px;animation:float3 5s ease-in-out infinite}
@keyframes float1{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.06)}100%{transform:translateY(0) scale(1)}}
@keyframes float2{0%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-28px) rotate(8deg)}100%{transform:translateY(0) rotate(0deg)}}
@keyframes float3{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-12px) scale(1.04)}100%{transform:translateY(0) scale(1)}}

/* About Section */
.section{padding:56px 0}
.about h2{font-size:20px;margin-bottom:8px}
.about p{color:var(--muted);max-width:780px}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:14px 0;color:var(--muted)}
.footer-inner{display:flex;justify-content:space-between;gap:12px;align-items:center}

/* Responsive */
@media (max-width:820px){
  .hero-inner{flex-direction:column;align-items:flex-start}
  .decor{display:none}
  .footer-inner{flex-direction:column;align-items:flex-start}
}

/* kleine, freundliche Animationen */
.title,.subtitle,.lead{opacity:0;transform:translateY(8px);animation:appear 800ms ease forwards}
.title{animation-delay:120ms}
.subtitle{animation-delay:240ms}
.lead{animation-delay:360ms}
@keyframes appear{to{opacity:1;transform:none}}

/* Fokus sichtbar für Zugänglichkeit */
.btn:focus{outline:3px solid rgba(6,182,212,0.12);outline-offset:3px}

/* Feinheiten für kleinere Bildschirme */
@media (max-width:420px){
  .hero-card{padding:20px;border-radius:12px}
  .title{font-size:22px}
}