/* ===== Malunia Space Onepager v3.3 — intensified background ===== */
*:where(*){ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; font-family:'Outfit', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:#050312; color:#efeaff; line-height:1.6; overflow-x:hidden; font-size:18px;
}

.page{ min-height:100dvh; display:flex; flex-direction:column; }
.content{ flex:1 0 auto; }
.site-footer{ margin-top:auto; }

:root{
  --violet:#7b2cff;
  --violet-2:#b86bff;
  --aqua:#48d8ff;
  --muted:#bdb8d9;
  --surface: color-mix(in oklab, #120d24 80%, #ffffff 20%);
  --surface-2: color-mix(in oklab, #0a0714 84%, #ffffff 16%);
  --border: rgb(255 255 255 / .12);
  --shadow: 0 10px 30px rgb(0 0 0 / .38), inset 0 1px 0 rgb(255 255 255 / .04);

  /* intensity knobs */
  --intensity: 1.25;        /* master multiplier */
  --scroll: 0;              /* 0..1 fallback from JS */
  --deep-opacity: 0;        /* far stars opacity */
  --vignette: 0;            /* dark overlay strength */
}

/* Background */
.bg{ position:fixed; inset:-6vmax; z-index:-3; pointer-events:none;
  will-change: transform, opacity, filter; transition: opacity .25s linear, transform .25s linear, filter .25s linear;
}

/* Deep space starfield (appears further down) */
.bg--deep{
  z-index:-6;
  opacity: calc(var(--deep-opacity) * var(--intensity));
  background:
    radial-gradient(1px 1px at 5% 8%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 22% 18%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 35% 28%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 48% 16%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 62% 22%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 76% 10%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 88% 20%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 12% 64%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 27% 72%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 44% 60%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 63% 71%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 79% 62%, #fff, #fff0 55%),
    radial-gradient(1px 1px at 93% 74%, #fff, #fff0 55%);
  animation: drift 150s linear infinite;
  transform: translate3d(0, calc(var(--scroll) * 160px), 0);
  filter: drop-shadow(0 0 0.6px rgba(255,255,255,.7));
}

/* Light star layer */
.bg--stars{
  z-index:-4;
  opacity: calc(.6 + .5 * var(--scroll) * var(--intensity));
  background:
    radial-gradient(1.2px 1.2px at 12% 24%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 32% 78%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 68% 52%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 82% 18%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 94% 70%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 22% 62%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 10% 12%, #fff, #fff0 40%),
    radial-gradient(1.2px 1.2px at 70% 12%, #fff, #fff0 40%);
  animation: drift 110s linear infinite;
  transform: translate3d(0, calc(var(--scroll) * 90px), 0);
}

/* Dust / gaseous puffs for depth */
.bg--dust{
  z-index:-3;
  opacity: calc(.35 + .45 * var(--scroll) * var(--intensity));
  background:
    radial-gradient(40vmax 28vmax at 25% 35%, rgba(123,44,255,.22), rgba(123,44,255,0) 60%),
    radial-gradient(34vmax 26vmax at 75% 65%, rgba(72,216,255,.20), rgba(72,216,255,0) 62%),
    radial-gradient(28vmax 22vmax at 60% 15%, rgba(184,107,255,.18), rgba(184,107,255,0) 65%);
  mix-blend-mode: screen;
  filter: blur(1px) saturate(calc(1.05 + var(--scroll) * .3));
  transform: translate3d(0, calc(var(--scroll) * 60px), 0);
}

/* Twinkle points */
.bg--twinkle{
  z-index:-2;
  background:
    radial-gradient(1.4px 1.4px at 15% 30%, #fff, #fff0 60%),
    radial-gradient(1.6px 1.6px at 55% 25%, #fff, #fff0 60%),
    radial-gradient(1.8px 1.8px at 75% 65%, #fff, #fff0 60%),
    radial-gradient(1.6px 1.6px at 45% 85%, #fff, #fff0 60%),
    radial-gradient(1.4px 1.4px at 28% 55%, #fff, #fff0 60%);
  mix-blend-mode:screen; animation: twinkle 2.8s ease-in-out infinite;
  opacity: calc(.65 + .35 * var(--scroll) * var(--intensity));
}

/* Nebula backdrop */
.bg--nebula{
  z-index:-5;
  background:
    radial-gradient(70vmax 46vmax at 18% 18%, rgba(91,40,199,.60), transparent 58%),
    radial-gradient(60vmax 42vmax at 82% 72%, rgba(28,83,203,.48), transparent 58%),
    radial-gradient(52vmax 36vmax at 60% 10%, rgba(186,102,255,.36), transparent 62%),
    conic-gradient(from 210deg at 50% 50%, #0a0714, #120d24, #0a0714 60%);
  transform: translate3d(0, calc(var(--scroll) * -160px), 0);
  filter: saturate(calc(1.15 + var(--scroll) * .35)) brightness(calc(1 - var(--scroll) * .04));
}

/* Darken overlay grows with scroll */
.bg--vignette{
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(90vmax 70vmax at 50% -10%, rgba(20,10,40,.45), rgba(20,10,40,0) 60%),
    linear-gradient(180deg, rgba(5,3,18,0) 0%, rgba(5,3,18,.35) 30%, rgba(5,3,18,.65) 65%, rgba(5,3,18,.95) 100%);
  opacity: calc(var(--vignette) * var(--intensity));
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem clamp(1rem, 4vw, 2rem);
  backdrop-filter:blur(10px);
  background: linear-gradient(180deg, rgb(10 7 20 / .7), rgb(10 7 20 / .4));
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:inherit; }
.brand-icon{ font-size:1.2rem; filter: drop-shadow(0 0 8px var(--violet)); }
/* Animated violet gradient text */
.brand-text{
  font-weight:800; letter-spacing:.5px;
  background: linear-gradient(90deg, var(--violet), var(--violet-2), var(--aqua));
  background-size:200% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 18px rgba(123,44,255,.55);
  animation: shimmer 7s ease-in-out infinite alternate;
}

.site-nav{ display:flex; gap:.8rem; align-items:center; }
.site-nav a{
  text-decoration:none; padding:.55rem .9rem; border-radius:999px;
  color:#efeaff; border:1px solid transparent; font-weight:600;
}
.site-nav a:hover{
  border-color:var(--border);
  background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .05), var(--shadow);
}

/* Mobile nav */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  padding:.5rem .6rem; border-radius:.7rem;
}
.nav-toggle-line{ display:block; width:22px; height:2px; background:#fff; margin:4px 0; }
@media (max-width: 880px){
  .nav-toggle{ display:inline-block; }
  .site-nav{
    position:fixed; inset:64px 1rem auto 1rem; background: rgb(12 9 20 / .92);
    padding:.75rem; border-radius:1rem; border:1px solid var(--border);
    display:grid; gap:.6rem; transform-origin: top right; scale:.98; opacity:0; pointer-events:none; transition:opacity .2s, scale .2s;
  }
  .site-nav.is-open{ opacity:1; scale:1; pointer-events:auto; }
}

/* Hero */
.hero{ padding: clamp(3rem, 7vw, 6rem) 0 2rem; position:relative; }
.hero .container{ width:min(1200px, 92%); margin-inline:auto; }
.hero-inner{
  text-align:center; background: var(--surface); border:1px solid var(--border);
  border-radius: 1.2rem; padding: clamp(1.4rem, 3.2vw, 2.2rem); box-shadow: var(--shadow);
}
.title-hero{ margin:0 0 .6rem; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height:1.05; font-weight:800; }
/* Global gradient utility with subtle animation */
.grad{
  background: linear-gradient(90deg, var(--violet), var(--aqua), var(--violet-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 16px rgba(123,44,255,.45));
  background-size:200% 100%;
  animation: shimmer 7s ease-in-out infinite alternate;
}
.title-hero small{ display:block; font-size:.36em; letter-spacing:.06em; color:var(--muted); margin-top:.4rem; }
.lead{ margin:.9rem auto 1.4rem; max-width: 70ch; color:#dcd6f4; font-size:1.1rem; }
.cta-row{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* Orbits (subtle) */
.orbit{ position:absolute; border:1px dashed rgb(255 255 255 / .12); border-radius:50%; pointer-events:none; }
.orbit--1{ width:68vmin; height:68vmin; left:50%; top:-6vmin; transform:translateX(-50%); animation: spin 120s linear infinite; }
.orbit--2{ width:96vmin; height:96vmin; left:50%; top:-18vmin; transform:translateX(-50%); animation: spin 180s linear infinite reverse; }

/* Sections */
.section{ padding: clamp(2rem, 6vw, 4rem) 0; }
.container{ width:min(1200px, 92%); margin-inline:auto; }
.section-head {
  text-align: center;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column; /* Titel und Sub untereinander */
  align-items: center;    /* mittig */
}

.section-title {
  display: block;        /* explizit untereinander */
  margin: 0 0 0.6rem;    /* Abstand nach unten */
}

.section-sub {
  display: block;        /* sicherstellen dass es nicht inline läuft */
  margin: 0;             /* Abstand nach oben wird durch .section-title geregelt */
  font-size: 1.05rem;
  color: var(--muted);
}

/* Offset anchors so titles don't hide under sticky header */
:where(section, .hero)[id]{ scroll-margin-top: clamp(78px, 12vh, 120px); }

/* Cards */
.card{
  background: var(--surface); border:1px solid var(--border); border-radius: 1.1rem; padding: 1.1rem; box-shadow: var(--shadow);
}
.link{ text-decoration:none; color:inherit; }

/* Buttons */
.btn{
  --glow: rgba(123,44,255,.7);
  appearance:none; border:1px solid var(--border);
  background: radial-gradient(120% 120% at 80% 0%, rgb(255 255 255 / .1), rgb(255 255 255 / .03));
  padding: .9rem 1.2rem; border-radius: 1rem; color:white; text-decoration:none; font-weight:700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  box-shadow: 0 0 0 0 rgba(123,44,255,0); font-size:1rem;
}
.btn:hover{ transform: translateY(-1px); border-color: rgb(255 255 255 / .22); box-shadow: 0 0 28px 3px var(--glow); }
.btn-ghost{ background:transparent; }
.btn-primary{ background: linear-gradient(90deg, rgba(123,44,255,.32), rgba(72,216,255,.28)); }

/* Pills */
.pillbar{ margin-top:1.1rem; display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center; padding:0; list-style:none; }
.pill{ display:inline-flex; gap:.5rem; align-items:center; padding:.5rem .8rem; border-radius:999px;
  background: linear-gradient(180deg, rgb(255 255 255 / .06), rgb(255 255 255 / .025)); border:1px solid var(--border); color:#eae5ff; font-size:1rem; }
.pill .dot{ width:.65rem; height:.65rem; border-radius:999px; background: radial-gradient(circle at 40% 35%, var(--aqua), var(--violet)); box-shadow: 0 0 12px 2px rgba(123,44,255,.65); }

/* Feature grid */
.feature-grid{ display:grid; gap:1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feature .feature-icon{ font-size:1.6rem; filter: drop-shadow(0 0 8px rgba(123,44,255,.65)); }
.feature h3{ margin:.3rem 0 .3rem; }
@media (max-width: 980px){ .feature-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px){ .feature-grid{ grid-template-columns: 1fr; } }

/* Vote grid */
.vote-grid{ display:grid; gap:1rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
.vote-grid .card{ display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.vote-grid small{ opacity:.9; font-weight:600; }
@media (max-width: 980px){ .vote-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px){ .vote-grid{ grid-template-columns: 1fr; } }

/* Timeline */
.timeline{ display:grid; gap:1rem; padding:0; list-style:none; }
.t-item .t-head{ display:flex; align-items:center; gap:.6rem; }
.t-dot{ width:1rem; height:1rem; border-radius:999px; background: radial-gradient(circle at 40% 35%, var(--violet-2), var(--violet)); box-shadow: 0 0 14px rgba(123,44,255,.85); }

/* Footer */
.site-footer{
  background: linear-gradient(180deg, rgb(10 7 20 / .7), rgb(10 7 20 / .95));
  border-top:1px solid var(--border); padding: 1.1rem clamp(1rem, 4vw, 2rem);
}
.footer-inner{ width:min(1200px, 92%); margin:0 auto; display:grid; grid-template-columns: 1fr auto 1fr; gap:1rem; align-items:center; }
.f-brand{ font-weight:800; letter-spacing:.5px; }
.f-nav{ display:flex; gap:.85rem; justify-content:center; flex-wrap:wrap; }
.f-nav a{ text-decoration:none; padding:.45rem .8rem; border-radius:999px; border:1px solid var(--border); color:#efeaff; }
.copy{ text-align:right; color:var(--muted); font-size:1rem; }
@media (max-width: 720px){ .footer-inner{ grid-template-columns:1fr; text-align:center; } .copy{ text-align:center; } }

/* Animations */
@keyframes drift{ to{ transform: translateY(120px); } }
@keyframes twinkle{ 0%,100%{ opacity:.55; filter: blur(.3px); } 50%{ opacity:1; filter: blur(0); } }
@keyframes spin{ to{ transform: translateX(-50%) rotate(360deg); } }
@keyframes shimmer{ 0%{ background-position:0% 50%; } 100%{ background-position:100% 50%; } }

/* Owner Nachrichten */
.owner-grid{ display:grid; gap:1rem; grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 820px){ .owner-grid{ grid-template-columns: 1fr; } }
.owner{ display:grid; gap:.8rem; }
.owner-headline{ display:flex; gap:.8rem; align-items:center; }
.owner-head{ border-radius:8px; image-rendering:pixelated; box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.owner-name{ margin:.1rem 0; }
.owner-date{ color:var(--muted); font-size:.95rem; }
.owner-message{ margin:.2rem 0 0; }

/* Prefer-reduced-motion: keep the chill */
@media (prefers-reduced-motion: reduce){
  .bg, .orbit{ animation: none !important; }
  .bg{ transition: none !important; transform: none !important; }
}

header {
  height: 80px;             /* Beispielhöhe für deinen Header */
  display: flex;            /* sorgt für sauberes Ausrichten */
  align-items: center;      /* Logo und evtl. Text mittig */
  padding: 0 20px;
}

header .brand-icon {
  height: 100%;       /* passt sich der Header-Höhe an */
  width: auto;        /* behält Seitenverhältnis */
  max-height: 50px;   /* Logo nie größer als 50px */
}

.f-info {
  margin-top: 15px;
  font-size: 1rem;
  color: var(--muted);
  text-align: center; /* optional, für zentriert */
}

.f-info .highlight {
  color: var(--violet);
  font-weight: 500;
  text-decoration: none;
}

.f-info a:hover {
  text-decoration: underline;
}

.f-brand {
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
}

.f-rights {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 400;
}

/* Progressive enhancement: CSS scroll-driven animations if supported */
@supports (animation-timeline: scroll()){
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes parallax-up   { from { transform: translateY(0); } to { transform: translateY(-160px); } }
  @keyframes parallax-down { from { transform: translateY(0); } to { transform: translateY(160px); } }

  .bg--vignette{
    animation: fade-in 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 3% 90%;
  }
  .bg--deep{
    animation: fade-in 1 linear both, parallax-down 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 10% 95%;
  }
  .bg--nebula{
    animation: parallax-up 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 95%;
  }
  .bg--stars{
    animation: parallax-down 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 95%;
  }
  .bg--dust{
    animation: parallax-down 1 linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 95%;
  }
}