/* ═══════════════════════════════════════════════════
   BASE — Reset, Body, Progressive Enhancement, Overlays
   ═══════════════════════════════════════════════════ */


/* — Reset — */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }

html { scroll-behavior: smooth; background: var(--bg-primary) }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--text-secondary);
  background: var(--bg-primary);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none }
button { font-family: inherit; cursor: pointer; border: none; background: none }


/* ═══════════════════════════════════════════════════
   PROGRESSIVE ENHANCEMENT
   Ohne JS: Alles sichtbar, kein Canvas, kein Reveal.
   Mit JS: .no-js wird zu .js — Animationen aktiv.
   ═══════════════════════════════════════════════════ */

/* Fallback: Ohne JS ist alles sofort sichtbar */
.no-js .reveal { opacity: 1; transform: none }
.no-js .hero__briefkopf,
.no-js .hero__headline,
.no-js .hero__sub,
.no-js .hero__actions { opacity: 1; animation: none }
.no-js .scroll-hint,
.no-js .viz-label { display: none }
.no-js #archipelCanvas { display: none }
/* No-JS Hero bekommt statischen Gradient als Atmosphäre */
.no-js .hero { background: radial-gradient(ellipse at 70% 45%, rgba(91,155,213,0.08) 0%, transparent 60%), radial-gradient(ellipse at 55% 65%, rgba(123,198,126,0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(232,184,77,0.04) 0%, transparent 50%) }
.no-js .content { margin-top: 0 }
.no-js .content::before { display: none }

/* Noscript-Hinweis */
noscript .noscript-note { display: block; text-align: center; padding: 0.6rem; background: var(--bg-elevated); color: var(--text-muted); font-size: var(--fs-small); border-bottom: 1px solid rgba(255,255,255,0.05) }


/* ═══════════════════════════════════════════════════
   ATMOSPHÄRISCHE OVERLAYS
   Noise-Textur + Aurora-Gradient für Tiefe
   ═══════════════════════════════════════════════════ */

/* Noise — filmische Körnung, gibt dem Dunklen Substanz */
.noise {
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* Aurora — langsame Farbverschiebung im Hintergrund */
.aurora {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.aurora::before {
  content: ''; position: absolute;
  width: 140%; height: 140%; top: -20%; left: -20%;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(91,155,213,0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(123,198,126,0.03) 0%, transparent 45%),
    radial-gradient(ellipse at 55% 80%, rgba(232,184,77,0.025) 0%, transparent 40%);
  animation: auroraShift 45s ease-in-out infinite alternate;
}
@keyframes auroraShift {
  0% { transform: translate(0, 0) rotate(0deg) }
  33% { transform: translate(2%, -1.5%) rotate(0.5deg) }
  66% { transform: translate(-1.5%, 2%) rotate(-0.3deg) }
  100% { transform: translate(1%, -0.5%) rotate(0.2deg) }
}

/* Dot-Grid auf elevated Sections */
.bg-dots {
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: 20px 20px;
}


/* ═══════════════════════════════════════════════════
   SKIP-LINK & SCROLL-PROGRESS
   ═══════════════════════════════════════════════════ */

.skip-link {
  position: absolute; top: -100%; left: var(--space-sm);
  background: var(--c-blue); color: white;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 0 0 6px 6px; z-index: 10001; font-weight: 600;
}
.skip-link:focus { top: 0 }

.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--c-blue), var(--c-green), var(--c-amber));
  z-index: 10000; pointer-events: none;
  box-shadow: 0 0 8px rgba(90,143,200,0.3);
}


/* ═══════════════════════════════════════════════════
   ICON
   ═══════════════════════════════════════════════════ */

.icon-archipel {
  width: 34px; height: auto; flex-shrink: 0;
  transition: transform 400ms cubic-bezier(0.25,0.46,0.45,0.94), width 300ms ease;
}
.nav.scrolled .icon-archipel { width: 28px }
.icon-archipel--sm { width: 24px }
@media(hover:hover) {
  .nav__logo:hover .icon-archipel { transform: rotate(8deg) scale(1.08) }
}

/* Nav-Icon: erst sichtbar wenn gescrollt */
.nav .icon-archipel { opacity: 0; transition: opacity 400ms ease; }
.nav.scrolled .icon-archipel { opacity: 1; }


/* ═══════════════════════════════════════════════════
   TYPOGRAFIE & CONTAINER
   ═══════════════════════════════════════════════════ */

h2 {
  font-family: var(--font-display); font-weight: 400;
  color: var(--text-primary); font-size: var(--fs-h2);
  letter-spacing: 0.02em; line-height: 1.12; margin-bottom: 1.5rem;
}

.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-md) }
section { position: relative; padding: var(--space-xl) 0; overflow: hidden }
section.hero { padding: 0; overflow: visible }
@media(min-width:1024px) { section { padding: var(--space-2xl) 0 } section.hero { padding: 0 } }