/* ============================================================
   AUTARK INNOVATIONS — PREMIUM FOUNDATION (REV. 4)
   Master-Override für Linear/Vercel-Niveau Look
   Wird als LETZTE CSS geladen, nutzt :where() und gezielte Specificity
   2026-05-01 — Phase B
   ============================================================ */

/* === NAV — Premium clean === */
nav.nav, header.header-main {
  background: rgba(10, 15, 20, 0.85) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
  height: 72px;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  nav.nav, header.header-main {
    height: 64px;
  }
}

/* === BUTTONS Premium === */
.btn-primary,
.cta-primary,
.hero-cta-btn,
:where(a, button).btn-primary {
  background: var(--accent-cyan, #38BDF8) !important;
  color: #0A0F14 !important;
  border: 0;
  border-radius: var(--r-md, 12px) !important;
  padding: 14px 28px !important;
  font-family: var(--font-body, "Inter", sans-serif);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform var(--t-base, 220ms) var(--ease-spring, cubic-bezier(0.16,1,0.3,1)),
              box-shadow var(--t-base, 220ms) var(--ease-spring);
  box-shadow: var(--shadow-glow-cyan, 0 0 20px rgba(56,189,248,0.15));
}
.btn-primary:hover,
.cta-primary:hover,
.hero-cta-btn:hover,
:where(a, button).btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(56,189,248,0.30) !important;
}

.btn-secondary,
:where(a, button).btn-secondary {
  background: transparent;
  color: var(--text-primary, #F5F7FA);
  border: 1px solid var(--border-strong, rgba(255,255,255,0.16));
  border-radius: var(--r-md, 12px);
  padding: 14px 28px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--t-base, 220ms) var(--ease-spring);
  box-shadow: none;
}
.btn-secondary:hover,
:where(a, button).btn-secondary:hover {
  border-color: var(--accent-cyan, #38BDF8);
  color: var(--accent-cyan, #38BDF8);
  transform: translateY(-1px);
}

/* === CARDS Premium === */
:where(.card, .feature-card, .testimonial-card, .kk-card, .sb-card, .pp-bento__tile, .premium-card) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-default, rgba(255,255,255,0.10));
  border-radius: var(--r-lg, 16px);
  padding: var(--s-7, 32px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform var(--t-base, 220ms) var(--ease-spring),
              border-color var(--t-base, 220ms) var(--ease-spring);
}
:where(.card, .feature-card, .testimonial-card, .kk-card, .sb-card, .premium-card):hover {
  border-color: var(--border-strong, rgba(255,255,255,0.16));
  transform: translateY(-2px);
}

/* === EYEBROW (Premium-Standard) === */
:where(.eyebrow, .section-label, .hero-label, .pp-bento__eyebrow, .sb-eyebrow) {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.18em);
  color: var(--accent-cyan, #38BDF8);
  opacity: 0.8;
}

/* === SECTION rhythm === */
section:not(.wow-hero):not(.hero):not(.sb-hero) {
  padding-top: var(--section-py, clamp(40px, 10vw, 120px));
  padding-bottom: var(--section-py, clamp(40px, 10vw, 120px));
}

/* === FOOTER === */
footer.footer {
  background: var(--bg-deep, #060A0F);
  padding: var(--s-11, 80px) var(--section-px, clamp(20px, 4vw, 40px)) var(--s-8, 40px);
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === CLS-FIX (Phase F): Starfield/Nebula MUST be position:fixed.
   Otherwise they reserve in-flow space and shift NAV/MAIN downward
   when their generated stars/orbs grow asynchronously after hydrate.
   This was the primary Desktop CLS source (~0.20+ on home/sungrow/etc). */
.starfield,
.nebula,
.nebula-1,
.nebula-2,
.nebula-3,
.nebula-4,
.hero-orbs,
#milky-way-band {
  position: fixed !important;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.starfield { clip-path: inset(64px 0 0 0); }
.nebula, .nebula-1, .nebula-2, .nebula-3, .nebula-4 { clip-path: inset(64px 0 0 0); }

/* === CLS-FIX (Phase F): croUrgencyBanner needs to be out-of-flow
   to avoid pushing content down on hydrate. */
#croUrgencyBanner:not(.show) { display: none !important; }
#croUrgencyBanner.show {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 70;
}

/* === CLS-FIX (Phase F): Decorative aurora accents must not contribute
   to layout shifts. Use containment to isolate them from CLS. */
.pp-aurora,
.pp-aurora__accent,
.pp-aurora__bg,
.pp-aurora-section .pp-aurora,
.hero .pp-aurora {
  contain: strict;
  position: absolute !important;
}
.pp-aurora-section,
section.hero,
.section.pp-aurora-section {
  contain: layout style;
}
.pp-aurora__accent {
  will-change: transform;
  contain: strict;
  pointer-events: none;
}
/* Mobile: aurora accents are decorative + expensive — hide for stability */
@media (max-width: 768px) {
  .pp-aurora__accent,
  .pp-aurora::before,
  .pp-aurora::after { display: none !important; }
}
/* Phase F: Pause aurora animation until first paint settles
   to prevent CLS observers catching the keyframe-driven shift. */
@media (prefers-reduced-motion: no-preference) {
  .pp-aurora__accent,
  .pp-aurora::before,
  .pp-aurora::after {
    animation-delay: 1.5s !important;
  }
}

/* === CLS-FIX (Phase F): hero buttons may grow when icon font loads
   late. Set min-height to reserve space. Desktop only — mobile uses
   different button sizing & wrapping. */
@media (min-width: 1024px) {
  .sb-hero-content .btn-primary,
  .sb-hero-content .btn-secondary,
  .hero .btn-primary,
  .hero .btn-secondary {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
  }
}
/* Reserve box for the hero CTA row to absorb button growth caused by
   late-loading webfonts (Inter swap) or content reflow. */
.sb-hero-ctas {
  min-height: 80px;
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-ctas, .hero-cta-row, .wow-cta-row {
  min-height: 80px;
  align-items: center;
}
/* Sungrow hero-content is the prime CLS offender — reserve a fixed
   block of vertical space for the entire content stack to absorb any
   font-swap reflow without shifting siblings. */
@media (min-width: 1024px) {
  .sb-hero-diet { min-height: 90vh; }
  .sb-hero-content { min-height: 520px; }
}

/* === NAV: belongs above starfield, sticky on top — also in-flow guard */
nav.nav, header.header-main {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 40;
}
/* Compensate for fixed nav so main content does not slide under it */
body {
  padding-top: 64px;
}
@media (max-width: 768px) {
  body { padding-top: 56px; }
}

/* ============================================================
   4K-DESKTOP-FIX (2026-04-30) — Markus 2560×1440 Audit
   Vorher: Content auf 800-900px gedeckelt, riesige schwarze Ränder.
   Nachher: 1440-1600px Container ab 1600px Viewport.
   Text-Reading-Sections (.prose, .reading) bleiben 720px für Lesbarkeit.
   ============================================================ */
@media (min-width: 1600px) {
  :where(section, .section, .container, .hero, .wow-hero, .sb-hero) {
    max-width: min(1440px, 90vw) !important;
    margin-inline: auto !important;
  }
  /* Hero darf breiter atmen */
  :where(.wow-hero.hero-diet, .sb-hero-diet) {
    max-width: 1600px !important;
  }
  /* Side-Padding gegen Rand-Wüste */
  body {
    padding-inline: clamp(40px, 8vw, 120px);
  }
  /* Text-Reading-Sections behalten 720px Lesemaß */
  :where(.prose, .reading, .text-content, .legal-content, .blog-content) {
    max-width: 720px !important;
  }
  /* Gallery-Grid darf voll bleiben (kein cap) */
  :where(.gallery-grid, .gallery, .pp-bento, .feature-grid) {
    max-width: none !important;
    width: 100%;
  }
}

@media (min-width: 2000px) {
  :where(section, .section) {
    max-width: 1600px !important;
  }
  :where(.wow-hero.hero-diet, .sb-hero-diet) {
    max-width: 1760px !important;
  }
}