/* ==========================================================================
   NextAdvice UG – Apple-Inspired Light
   ========================================================================== */

:root {
  --c-bg: #fefefe;
  --c-surface: #f6f5f2;
  --c-surface-hover: #edece8;
  --c-text: #1d1d1f;
  --c-muted: #6e6e73;
  --c-faint: #aeaeb2;
  --c-accent: #e0654a;
  --c-accent-hover: #c7513a;
  --c-border: rgba(0,0,0,0.08);
  --c-btn-fill-hover: #333336;
  --c-indicator: rgba(0,0,0,0.15);
  --c-indicator-dot: rgba(0,0,0,0.25);
  --nav-h: 3rem;
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --radius: 1.25rem;
  --wrap: 62rem;
}

@media (min-width: 768px) { :root { --nav-h: 2.75rem; } }

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --c-bg: #0a0a0b;
  --c-surface: #161618;
  --c-surface-hover: #1e1e21;
  --c-text: #f5f5f7;
  --c-muted: #a1a1a6;
  --c-faint: #636366;
  --c-accent: #e8795f;
  --c-accent-hover: #f09080;
  --c-border: rgba(255,255,255,0.08);
  --c-btn-fill-hover: #e0e0e2;
  --c-indicator: rgba(255,255,255,0.2);
  --c-indicator-dot: rgba(255,255,255,0.3);
}
[data-theme="dark"] ::selection { background: rgba(232,121,95,0.2); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); }
[data-theme="dark"] .na-nav.scrolled {
  background: #0a0a0b;
}
[data-theme="dark"] .na-card:hover {
  background: #1e1e21;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-color: rgba(232,121,95,0.18);
}
[data-theme="dark"] .na-btn--fill {
  background: var(--c-text);
  color: var(--c-bg);
}
[data-theme="dark"] .na-btn--fill:hover {
  background: #e0e0e2;
}
[data-theme="dark"] .na-hcard {
  background: var(--c-bg);
  border-color: var(--c-border);
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
}
[data-theme="dark"] .na-hcard:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.45);
  border-color: rgba(232,121,95,0.2);
}
[data-theme="dark"] .menu-overlay { background: rgba(0,0,0,0.5); }
[data-theme="dark"] .mobile-menu {
  background: var(--c-surface);
  border-color: var(--c-border);
}
[data-theme="dark"] .mobile-menu a { color: var(--c-muted); }
[data-theme="dark"] .mobile-menu a:hover { color: var(--c-text); }
[data-theme="dark"] .na-hero::before {
  opacity: 0.7;
}
[data-theme="dark"] .na-gradient-text {
  color: var(--c-accent);
}
[data-theme="dark"] .na-mockup {
  background: #1a1a1d;
  border-color: rgba(255,255,255,0.1);
}
[data-theme="dark"] .na-mockup-bar {
  border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .na-mockup-screen {
  background: #111113;
}
[data-theme="dark"] .na-mockup-url {
  color: var(--c-faint);
}
[data-theme="dark"] .na-faq-q::after { color: var(--c-muted); }
[data-theme="dark"] .na-field .na-input,
[data-theme="dark"] .na-field .na-textarea {
  color: var(--c-text);
  border-bottom-color: var(--c-border);
  background: transparent;
}
[data-theme="dark"] .na-field .na-input:focus,
[data-theme="dark"] .na-field .na-textarea:focus {
  border-bottom-color: var(--c-accent);
}
[data-theme="dark"] body::after { opacity: 0.04; }
[data-theme="dark"] .na-sep { border-color: var(--c-border); }
[data-theme="dark"] .na-expand { background: var(--c-surface); }
[data-theme="dark"] .na-hero-glow {
  background: radial-gradient(circle, rgba(224,101,74,0.1) 0%, rgba(232,121,95,0.07) 50%, transparent 70%);
}
[data-theme="dark"] .na-select {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
[data-theme="dark"] .na-select option {
  background: var(--c-surface);
  color: var(--c-text);
}
[data-theme="dark"] .na-badge {
  background: var(--c-faint);
  color: var(--c-text);
}
[data-theme="dark"] .na-badge--active {
  background: var(--c-accent);
  color: #0a0a0b;
}
[data-theme="dark"] .na-card:hover {
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
[data-theme="dark"] .na-btn--fill {
  color: #0a0a0b;
}

/* Theme toggle */
.na-theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--c-muted);
  transition: color 0.2s var(--ease);
  padding: 0;
  flex-shrink: 0;
}
.na-theme-toggle:hover { color: var(--c-text); }
.na-theme-toggle svg { width: 18px; height: 18px; }
.na-theme-toggle svg {
  transition: transform 0.4s var(--ease-out), opacity 0.3s var(--ease);
}
.na-theme-toggle .icon-sun { display: none; transform: rotate(-90deg) scale(0.6); }
.na-theme-toggle .icon-moon { display: block; transform: rotate(0) scale(1); }
[data-theme="dark"] .na-theme-toggle .icon-sun { display: block; transform: rotate(0) scale(1); }
[data-theme="dark"] .na-theme-toggle .icon-moon { display: none; transform: rotate(90deg) scale(0.6); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 2rem);
  background-color: var(--c-bg);
  color-scheme: light;
}
html[data-theme="dark"] {
  color-scheme: dark;
}

body {
  font-family: var(--font);
  font-size: 1.0625rem;
  color: var(--c-text);
  background: var(--c-bg);
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: rgba(224,101,74,0.15); color: var(--c-text); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }

/* ---- Typography ---- */
.na-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-accent);
  letter-spacing: 0;
  margin-bottom: 0.75rem;
}

.na-h1 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 5.8vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.035em;
  color: var(--c-text);
}
.na-h1 .na-line-inner.na-gradient-text {
  background: linear-gradient(105deg, #c7513a 0%, #e0654a 38%, #e8795f 72%, #c7513a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: 0.12em;
}
[data-theme="dark"] .na-h1 .na-line-inner.na-gradient-text {
  background: linear-gradient(105deg, #ffd0bf 0%, #e8795f 42%, #ffb89a 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.na-h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--c-text);
}

.na-h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}

.na-gradient-text {
  color: var(--c-accent);
  padding-bottom: 0.15em;
}

.na-body {
  color: var(--c-muted);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}
.na-body strong { color: var(--c-text); font-weight: 600; }

.na-body--lg {
  font-size: 1.3125rem;
  line-height: 1.52;
  letter-spacing: -0.01em;
}

.na-body--sm {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.na-link {
  color: var(--c-accent);
  font-weight: 500;
  transition: color 0.2s var(--ease);
}
.na-link:hover { color: var(--c-accent-hover); }

/* ---- Layout ---- */
.na-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 1.5rem;
}
@media (min-width: 768px) { .na-wrap { padding: 0 2.5rem; } }

.na-wrap--narrow { max-width: 42rem; }
.na-wrap--form   { max-width: 30rem; }

/* Kontakt + FAQ: untereinander mobil, ab Desktop nebeneinander */
.na-section.na-contact-faq {
  text-align: left;
}
.na-contact-faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: start;
}
@media (min-width: 1024px) {
  .na-contact-faq-grid {
    grid-template-columns: minmax(0, 28rem) minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
  }
}

.na-section {
  padding: 6rem 0;
  text-align: center;
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}
@media (max-width: 767px) {
  .na-section {
    content-visibility: visible;
    contain-intrinsic-size: auto;
  }
}
@media (min-width: 768px) {
  .na-section { padding: 9rem 0; }
}

.na-section--surface {
  background: var(--c-surface);
}

/* ---- Plattform / Roadmap ---- */
.na-platform.na-section {
  background: var(--c-surface);
}
.na-platform-lead {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.na-platform-sub {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 3rem;
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.6;
}
@media (min-width: 768px) {
  .na-platform-sub { margin-bottom: 4rem; }
}
.na-platform-grid {
  text-align: left;
  align-items: stretch;
}
.na-platform-card {
  position: relative;
  text-align: left;
  padding-top: 1.75rem;
  overflow: hidden;
}
.na-platform-index {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  font-size: 3.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--c-text);
  opacity: 0.07;
  pointer-events: none;
  letter-spacing: -0.04em;
}
[data-theme="dark"] .na-platform-index {
  opacity: 0.14;
}
.na-platform-card--live {
  border-color: rgba(224, 101, 74, 0.35);
  box-shadow: 0 4px 28px rgba(224, 101, 74, 0.1);
  animation: liveGlow 4s ease-in-out infinite;
}
@keyframes liveGlow {
  0%, 100% { box-shadow: 0 4px 28px rgba(224, 101, 74, 0.1); }
  50% { box-shadow: 0 6px 36px rgba(224, 101, 74, 0.18); }
}
[data-theme="dark"] .na-platform-card--live {
  border-color: rgba(232, 121, 95, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  animation: liveGlowDark 4s ease-in-out infinite;
}
@keyframes liveGlowDark {
  0%, 100% { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); }
  50% { box-shadow: 0 10px 44px rgba(232, 121, 95, 0.15), 0 8px 32px rgba(0, 0, 0, 0.35); }
}
@media (max-width: 767px) {
  .na-platform-index {
    font-size: 2.25rem;
    top: 0.35rem;
    right: 0.65rem;
  }
  .na-platform-card {
    padding-right: 3.5rem;
  }
  .na-platform-card--live {
    padding: 2rem 3.5rem 2rem 2rem;
    border: 1.5px solid var(--c-accent);
    background: var(--c-bg);
    box-shadow: 0 8px 32px rgba(224, 101, 74, 0.12);
  }
  .na-platform-card:not(.na-platform-card--live) {
    opacity: 0.55;
  }
}

.na-center { text-align: center; }
.na-mb-4  { margin-bottom: 1rem; }
.na-mb-6  { margin-bottom: 1.5rem; }
.na-mb-8  { margin-bottom: 2rem; }
.na-mb-12 { margin-bottom: 3rem; }
.na-mb-16 { margin-bottom: 4rem; }
.na-mb-20 { margin-bottom: 5rem; }
.na-mt-8  { margin-top: 2rem; }

.na-stack-lg > * + * { margin-top: 1.5rem; }

/* Grids */
.na-grid {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .na-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .na-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Hero: volle Viewporthöhe; einzige große Fläche mit linksbündigem Inhalt (Rest der Seite: .na-section zentriert) ---- */
.na-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  box-sizing: border-box;
  /* iOS Safari: klassisches 100vh + fill-available, dann dynamische Viewport-Einheiten */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + var(--nav-h)) 1.5rem calc(3.5rem + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: var(--c-bg);
}
.na-hero-mobile-fx {
  display: none;
}
.na-hero-eyebrow {
  display: none;
}
.na-hero-grid {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "text" "visual";
  align-items: center;
  gap: 2rem 2.5rem;
  width: 100%;
  max-width: var(--wrap);
  min-height: 0;
}
@media (min-width: 1024px) {
  .na-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
    grid-template-areas: "text visual";
    gap: 1.5rem clamp(2rem, 4vw, 3.5rem);
  }
}

/* Hero – Tablet & Mobil (lesbar, kein „schwebender“ Block in der Viewporthöhe) */
@media (max-width: 1023px) {
  /*
   * Vertikale Mitte: iOS Safari + Flex + min-height stretch oft nicht zuverlässig.
   * Einspaltiges Grid: align-content:center legt die Zeile mit dem Inhalt in die vertikale Mitte der Section.
   */
  .na-hero {
    display: grid;
    align-items: center;
    justify-items: stretch;
    align-content: center;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 1.25rem);
    padding-left: max(1.35rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.35rem, env(safe-area-inset-right, 0px));
    padding-bottom: calc(3.25rem + env(safe-area-inset-bottom, 0px));
  }
  .na-line--hero-desktop-only {
    display: none !important;
  }
  .na-hero-sub--full {
    display: none !important;
  }
  .na-hero-sub--compact {
    display: block !important;
  }
  .na-btn--hero-secondary-desktop {
    display: none !important;
  }
  .na-hero-link-mobile {
    display: inline-flex;
    align-items: center;
  }
  .na-hero-grid {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    min-height: 0;
    gap: 1.85rem;
  }
  .na-hero-main {
    width: 100%;
    flex-shrink: 0;
  }
  .na-hero-content {
    max-width: none;
    width: 100%;
  }
  .na-hero .na-h1 {
    font-size: clamp(2rem, 9.2vw, 3rem);
    line-height: 1.14;
    letter-spacing: -0.035em;
  }
  .na-hero .na-h1 .na-line {
    line-height: 1.18;
    padding-bottom: 0.1em;
  }
  .na-hero-sub {
    margin: 0.85rem 0 1.1rem;
    font-size: 1rem;
    line-height: 1.55;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .na-hero .na-hero-sub--compact {
    margin: 0.85rem 0 1.15rem;
    font-size: 0.90625rem;
    line-height: 1.55;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
  .na-hero-visual-wrap {
    display: none !important;
  }

  /* —— Mobile „Wow“: Tiefe, Bewegung, Fokus (Desktop unverändert) —— */
  .na-hero-mobile-fx {
    display: block;
    position: absolute;
    inset: -15% -20%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  .na-hero-mobile-fx::before,
  .na-hero-mobile-fx::after {
    content: "";
    position: absolute;
    width: min(120vw, 28rem);
    height: min(120vw, 28rem);
    border-radius: 50%;
    filter: blur(72px);
    opacity: 0.5;
    animation: naHeroAurora 18s ease-in-out infinite;
  }
  .na-hero-mobile-fx::before {
    top: -8%;
    left: -25%;
    background: radial-gradient(circle, rgba(224, 101, 74, 0.45) 0%, transparent 68%);
    animation-delay: 0s;
  }
  .na-hero-mobile-fx::after {
    bottom: 5%;
    right: -35%;
    background: radial-gradient(circle, rgba(232, 121, 95, 0.35) 0%, rgba(199, 81, 58, 0.12) 45%, transparent 70%);
    animation-delay: -7s;
    animation-duration: 22s;
  }
  [data-theme="dark"] .na-hero-mobile-fx::before {
    opacity: 0.55;
    background: radial-gradient(circle, rgba(232, 121, 95, 0.38) 0%, transparent 65%);
  }
  [data-theme="dark"] .na-hero-mobile-fx::after {
    opacity: 0.45;
    background: radial-gradient(circle, rgba(255, 184, 154, 0.2) 0%, transparent 68%);
  }
  .na-hero-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin: 0 0 1.05rem;
    line-height: 1.45;
  }
  .na-hero::before {
    opacity: 1.12;
    animation-duration: 18s;
  }
  [data-theme="dark"] .na-hero::before {
    opacity: 0.82;
  }
  .na-hero .na-h1 .na-line:first-child .na-line-inner {
    background: linear-gradient(
      100deg,
      var(--c-text) 0%,
      var(--c-text) 28%,
      var(--c-accent) 48%,
      var(--c-text) 62%,
      var(--c-text) 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: naHeroBrandShine 5.5s ease-in-out infinite;
  }
  [data-theme="dark"] .na-hero .na-h1 .na-line:first-child .na-line-inner {
    background: linear-gradient(
      100deg,
      #f5f5f7 0%,
      #f5f5f7 26%,
      #ffb89a 48%,
      #f5f5f7 64%,
      #f5f5f7 100%
    );
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .na-hero .na-btn--fill {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.12) inset,
      0 8px 28px -4px rgba(224, 101, 74, 0.42);
  }
  [data-theme="dark"] .na-hero .na-btn--fill {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.08) inset,
      0 10px 36px -6px rgba(232, 121, 95, 0.35);
  }
  .na-hero .na-hero-actions {
    margin-top: 0.2rem;
    gap: 0.7rem 1rem;
  }
}

@keyframes naHeroAurora {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(8%, 4%) scale(1.06); }
  66% { transform: translate(-5%, 6%) scale(0.96); }
}

@keyframes naHeroBrandShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@media (min-width: 1024px) {
  .na-hero-mobile-fx {
    display: none;
  }
  .na-hero-eyebrow {
    display: none;
  }
}

/* Kompakter Hero nur bei sehr wenig Höhe oder Querformat — nicht bei normalem Hochformat (sonst fälschlich „oben klebend“) */
@media (max-width: 1023px) and (max-height: 520px),
(max-width: 1023px) and (max-height: 700px) and (orientation: landscape) {
  .na-hero {
    align-items: start;
    align-content: start;
    padding-top: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 0.85rem);
    padding-bottom: calc(2.65rem + env(safe-area-inset-bottom, 0px));
  }
  .na-hero-grid {
    justify-content: flex-start;
    gap: 0.9rem;
  }
  .na-hero .na-h1 {
    font-size: clamp(1.65rem, 7vw, 2.35rem);
    line-height: 1.12;
  }
  .na-hero .na-h1 .na-line {
    line-height: 1.14;
  }
  .na-hero-eyebrow {
    margin-bottom: 0.75rem;
  }
  .na-hero-sub {
    margin: 0.5rem 0 0.65rem;
    font-size: 0.9375rem;
    line-height: 1.5;
  }
  .na-hero .na-hero-sub--compact {
    margin: 0.5rem 0 0.75rem;
    font-size: 0.875rem;
    line-height: 1.48;
  }
  .na-hero-mobile-fx::before,
  .na-hero-mobile-fx::after {
    animation: none;
    opacity: 0.38;
  }
  .na-scroll-hint {
    bottom: max(0.35rem, env(safe-area-inset-bottom, 0px));
    opacity: 0.75;
    transform: translateX(-50%) scale(0.88);
  }
}
@media (max-width: 380px) {
  .na-hero {
    padding-left: max(1.1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1.1rem, env(safe-area-inset-right, 0px));
  }
}

.na-hero-main {
  grid-area: text;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
.na-hero-visual-wrap {
  grid-area: visual;
  position: relative;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1024px) {
  .na-hero-visual-wrap {
    justify-content: flex-end;
  }
}
.na-hero-visual {
  margin: 0;
  width: 100%;
  max-width: 22rem;
  line-height: 0;
}
@media (min-width: 640px) {
  .na-hero-visual {
    max-width: 28rem;
  }
}
@media (min-width: 1024px) {
  .na-hero-visual {
    max-width: min(36rem, 100%);
    width: 100%;
  }
}
.na-hero-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, 0.12));
  animation: heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
[data-theme="dark"] .na-hero-visual img {
  filter: drop-shadow(0 22px 60px rgba(0, 0, 0, 0.5));
}
.na-hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 80% 50% at 20% 40%, rgba(224,101,74,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 20%, rgba(232,121,95,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 80%, rgba(212,136,110,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 60%, rgba(224,101,74,0.04) 0%, transparent 70%);
  background-size: 200% 200%, 180% 180%, 200% 200%, 160% 160%;
  animation: meshDrift 25s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes meshDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
  25%  { background-position: 100% 50%, 0% 100%, 0% 0%, 100% 100%; }
  50%  { background-position: 50% 100%, 50% 0%, 100% 50%, 0% 0%; }
  75%  { background-position: 0% 50%, 100% 100%, 0% 50%, 100% 0%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 50%; }
}

#hero-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  /* iOS: feste Vollfläche trotz Adressleisten-Resize */
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
#hero-canvas canvas {
  display: block;
  vertical-align: top;
}

.na-hero-glow {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55vw;
  height: 55vw;
  max-width: 700px;
  max-height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224,101,74,0.06) 0%, rgba(232,121,95,0.04) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}

.na-hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 36rem;
  margin: 0;
}
@media (min-width: 640px) {
  .na-hero-content {
    max-width: 38rem;
  }
}
@media (min-width: 1024px) {
  .na-hero-content {
    max-width: 32rem;
  }
}

.na-hero-sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: var(--c-muted);
  line-height: 1.6;
  max-width: none;
  margin: 1.25rem 0 1.75rem;
}

/* Mobil: kurzer Teaser statt Langtext; Desktop-Zeile 2 im H1 ausblenden */
.na-hero-sub--compact {
  display: none;
}
.na-hero-link-mobile {
  display: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--c-muted);
  text-decoration: none;
  align-self: flex-start;
  padding: 0.2rem 0;
  line-height: 1.35;
  border-radius: 0.25rem;
}
.na-hero-link-mobile:hover {
  color: var(--c-accent);
}
.na-hero-link-mobile:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.na-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.65rem 1rem;
}
@media (max-width: 639px) {
  .na-hero .na-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .na-hero .na-hero-actions .na-btn--fill {
    width: 100%;
    max-width: none;
    min-height: 2.875rem;
    justify-content: center;
  }
  .na-hero .na-hero-actions .na-btn--ghost {
    justify-content: center;
    min-height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--c-muted);
    padding: 0.5rem 0.75rem;
  }
  .na-hero .na-hero-actions .na-btn--ghost svg { display: none; }
}

/* Über uns – Team-Visual (Block zentriert wie Section-Fläche; Hero bleibt links) */
.na-about-team {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto 2.5rem;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.04);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.na-about-team:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 70px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04);
}
.na-about-team img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
@media (min-width: 768px) {
  .na-about-team {
    margin-bottom: 3rem;
  }
}
[data-theme="dark"] .na-about-team {
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
}

/* Line reveal */
.na-line {
  display: block;
  overflow: hidden;
  line-height: 1.08;
  padding-bottom: 0.05em;
}
.na-line-inner {
  display: block;
  transform: translateY(115%);
  will-change: transform;
}

/* Scroll indicator */
.na-scroll-hint {
  position: absolute;
  bottom: max(1rem, calc(0.75rem + env(safe-area-inset-bottom, 0px)));
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.na-scroll-mouse {
  width: 20px;
  height: 32px;
  border: 1.5px solid var(--c-indicator);
  border-radius: 10px;
  position: relative;
}
.na-scroll-wheel {
  width: 2px;
  height: 6px;
  background: var(--c-indicator-dot);
  border-radius: 1px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 2s ease-in-out infinite;
}
@keyframes scroll-wheel {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  60% { transform: translateX(-50%) translateY(8px); opacity: 0; }
  61% { transform: translateX(-50%) translateY(-2px); opacity: 0; }
  80% { opacity: 1; }
}

/* ---- Cards ---- */
.na-card {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 2rem;
  border: 1px solid transparent;
  transition: background 0.3s var(--ease), transform 0.4s var(--ease-out), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.na-card:hover {
  background: var(--c-surface-hover);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-color: rgba(224,101,74,0.15);
}

/* ---- Buttons ---- */
.na-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
  border: none;
  cursor: pointer;
  border-radius: 980px;
  padding: 0.75rem 1.75rem;
  text-decoration: none;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), transform 0.2s var(--ease);
}
.na-btn:active { transform: scale(0.97); }

.na-btn--fill {
  background: var(--c-text);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.na-btn--fill:hover {
  background: var(--c-btn-fill-hover);
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  transform: translateY(-1px);
}

.na-btn--ghost {
  background: transparent;
  color: var(--c-accent);
  padding: 0.75rem 0.25rem;
}
.na-btn--ghost:hover { color: var(--c-accent-hover); }
.na-btn--ghost svg { transition: transform 0.2s var(--ease); }
.na-btn--ghost:hover svg { transform: translateX(3px); }

.na-btn--block { width: 100%; }

/* ---- Produkt ---- */
.na-footnote {
  margin-top: 1.5rem;
  font-size: 0.8125rem;
  color: var(--c-faint);
}

/* ---- Navigation ---- */
.na-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding-top: env(safe-area-inset-top, 0px);
  /* Immer deckend: backdrop/Glas wirkt auf iOS oft weiter „durch“ als auf Desktop */
  background-color: var(--c-bg);
  transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
/* Safe Area unter Statusleiste / Notch */
.na-nav::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: env(safe-area-inset-top, 0px);
  background-color: var(--c-bg);
  z-index: 1;
  pointer-events: none;
}
.na-nav.scrolled::before {
  background-color: var(--c-bg);
}
[data-theme="dark"] .na-nav.scrolled::before {
  background-color: var(--c-bg);
}
.na-nav-inner {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--nav-h);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 max(1.5rem, env(safe-area-inset-right, 0px)) 0 max(1.5rem, env(safe-area-inset-left, 0px));
}
@media (min-width: 768px) {
  .na-nav-inner {
    padding: 0 max(2.5rem, env(safe-area-inset-right, 0px)) 0 max(2.5rem, env(safe-area-inset-left, 0px));
  }
}

.na-nav.scrolled {
  background-color: var(--c-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--c-border);
}

/*
 * iOS Safari "Liquid Glass" workaround:
 * Viele Seiten legen hinter der transparenten Browser-UI oben eine ruhige, deckende Fläche.
 * So scheint im oberen Bereich kein animierter Hero/Gradient durch.
 */
@supports (-webkit-touch-callout: none) {
  body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + var(--nav-h) + 6px);
    background: var(--c-bg);
    pointer-events: none;
    z-index: 60;
  }
}

.na-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9375rem;
  letter-spacing: -0.02em;
  color: var(--c-text);
}
.na-logo-icon {
  height: 1.75rem;
  width: auto;
  display: block;
}
.na-logo .muted { color: var(--c-faint); font-weight: 500; }

.na-nav-links {
  display: none;
  align-items: center;
  gap: 1.75rem;
}
@media (min-width: 1024px) { .na-nav-links { display: flex; } }

.na-nav-links a {
  font-size: 0.75rem;
  color: var(--c-muted);
  transition: color 0.2s;
}
.na-nav-links a:hover,
.na-nav-links a.active { color: var(--c-text); }

.na-nav-cta {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-accent);
  display: none;
}
@media (min-width: 640px) { .na-nav-cta { display: inline; } }

/* Burger */
.na-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-right: -0.25rem;
}
.na-burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--c-text);
  border-radius: 1px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
@media (min-width: 1024px) { .na-burger { display: none; } }

.na-burger.active span:nth-child(1) { transform: rotate(45deg) translate(4px, 4.5px); }
.na-burger.active span:nth-child(2) { opacity: 0; }
.na-burger.active span:nth-child(3) { transform: rotate(-45deg) translate(4px, -4.5px); }

/* Mobile menu */
.menu-overlay {
  position: fixed; inset: 0;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
  background: rgba(0,0,0,0.25);
  z-index: 90;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}
.menu-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; }

.mobile-menu {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + var(--nav-h));
  right: 0;
  width: min(100%, 18rem);
  height: calc(100dvh - env(safe-area-inset-top, 0px) - var(--nav-h));
  min-height: calc(100vh - env(safe-area-inset-top, 0px) - var(--nav-h));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-bg);
  border-left: 1px solid var(--c-border);
  z-index: 95;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s var(--ease-out);
}
.mobile-menu.open { transform: translateX(0); }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

.mobile-menu-inner {
  padding: 1.5rem max(1.5rem, env(safe-area-inset-left, 0px)) 1.5rem 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.mobile-menu-link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--c-border);
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  transition: color 0.15s;
}
.mobile-menu-link:hover { color: var(--c-accent); }
.mobile-menu-legal {
  padding: 1.25rem 1.5rem;
  border-top: 1px solid var(--c-border);
  font-size: 0.75rem;
}
.mobile-menu-legal a {
  display: block;
  padding: 0.3rem 0;
  color: var(--c-faint);
  transition: color 0.15s;
}
.mobile-menu-legal a:hover { color: var(--c-text); }

/* ---- Footer ---- */
.na-footer {
  border-top: 1px solid var(--c-border);
  padding: 3rem 0;
  text-align: center;
  position: relative;
}
.na-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,101,74,0.2) 50%, transparent);
}
.na-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 2rem;
  font-size: 0.75rem;
  margin-bottom: 1.5rem;
}
.na-footer-links a {
  color: var(--c-muted);
  transition: color 0.2s;
}
.na-footer-links a:hover { color: var(--c-text); }
.na-footer-copy {
  font-size: 0.6875rem;
  color: var(--c-faint);
}

/* ---- Forms ---- */
.na-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-muted);
  margin-bottom: 0.35rem;
  text-align: left;
}
.na-input, .na-select, .na-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font: inherit;
  font-size: 1rem;
  letter-spacing: -0.01em;
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  color: var(--c-text);
  background: var(--c-bg);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.na-input:focus, .na-select:focus, .na-textarea:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px rgba(224,101,74,0.1);
}
.na-input::placeholder, .na-textarea::placeholder { color: var(--c-faint); }
.na-select option { background: var(--c-bg); }
.na-textarea { resize: vertical; min-height: 7rem; }

/* ---- Topic Chips ---- */
.na-topic-chips {
  display: flex;
  gap: 0.5rem;
}
.na-chip {
  flex: 1;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-muted);
  background: transparent;
  border: 1.5px solid var(--c-border);
  border-radius: 980px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease), background 0.2s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.na-chip.active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(224, 101, 74, 0.06);
}
[data-theme="dark"] .na-chip.active {
  background: rgba(232, 121, 95, 0.08);
}
.na-select--desktop { display: none; }
@media (min-width: 768px) {
  .na-topic-chips { display: none; }
  .na-select--desktop { display: block; }
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  top: -3rem; left: 0.5rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--c-text);
  color: #fff;
  font-weight: 700;
  font-size: 0.8125rem;
  border-radius: 0 0 0.5rem 0;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ---- Back to top ---- */
#backToTop {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  width: 2.5rem; height: 2.5rem;
  min-width: 44px; min-height: 44px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-border);
  border-radius: 50%;
  cursor: pointer;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, background 0.2s, transform 0.2s;
}
#backToTop.show { opacity: 1; pointer-events: auto; }
#backToTop:hover { background: var(--c-surface); transform: translateY(-2px); }

/* ---- Reveal ---- */
.na-reveal {
  opacity: 0;
  transform: translateY(20px);
}

/* ---- Separator ---- */
.na-sep {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border) 20%, var(--c-border) 80%, transparent);
  margin: 0;
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}

/* ---- Scroll Progress ---- */
.na-scroll-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
  transform-origin: left;
  z-index: 3;
  transform: scaleX(0);
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .na-scroll-progress {
    animation: scrollScale linear both;
    animation-timeline: scroll();
    will-change: auto;
  }
  @keyframes scrollScale {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
}

/* ---- Pinned Word Reveal ---- */
.na-section--pin {
  display: flex;
  align-items: center;
  justify-content: center;
}
.na-pin-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.na-word-reveal .word {
  display: inline;
  color: var(--c-faint);
  transition: color 0.15s var(--ease);
}
.na-word-reveal .word.lit {
  color: var(--c-text);
}
.na-word-reveal .word strong,
.na-word-reveal strong .word.lit {
  color: var(--c-text);
  font-weight: 600;
}

/* ---- Horizontal Scroll ---- */
.na-hscroll {
  position: relative;
  overflow: hidden;
}
.na-hscroll-track {
  display: flex;
  gap: 1.5rem;
  padding: 0 max(1.5rem, calc((100vw - var(--wrap)) / 2 + 2.5rem));
  will-change: transform;
}
@media (max-width: 1023px) {
  .na-hscroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 1.5rem;
  }
  .na-hscroll::-webkit-scrollbar { display: none; }
  .na-hscroll .na-hcard {
    scroll-snap-align: start;
    width: 75vw;
    max-width: 20rem;
  }
  .na-hscroll-track {
    padding-right: 20vw;
  }
}

.na-hcard {
  flex: 0 0 auto;
  width: min(80vw, 24rem);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 2.5rem;
  text-align: left;
  transition: box-shadow 0.3s var(--ease), transform 0.4s var(--ease-out);
}
.na-hcard:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,0.1);
  transform: translateY(-5px);
  border-color: rgba(224,101,74,0.2);
}
.na-hcard-num {
  display: block;
  font-size: 3rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  background: var(--c-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 1.5rem;
  line-height: 1;
}

.na-hscroll-progress {
  max-width: 12rem;
  height: 2px;
  background: var(--c-border);
  margin: 3rem auto 0;
  border-radius: 1px;
  overflow: hidden;
}
.na-hscroll-bar {
  height: 100%;
  width: 100%;
  background: var(--c-accent);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

/* ---- Stats ---- */
.na-stats {
  display: flex;
  justify-content: center;
  gap: 3rem 5rem;
  flex-wrap: wrap;
}
.na-stat {
  text-align: center;
  min-width: 8rem;
}
.na-stat-number {
  display: block;
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--c-text);
}
.na-stat-label {
  display: block;
  font-size: 0.875rem;
  color: var(--c-muted);
  margin-top: 0.5rem;
  font-weight: 500;
}

/* ---- Expanding Sections ---- */
.na-expand {
  border-radius: 1.5rem;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  overflow: hidden;
  position: relative;
}
.na-expand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224,101,74,0.15) 30%, rgba(224,101,74,0.15) 70%, transparent);
}
[data-theme="dark"] .na-expand::before {
  background: linear-gradient(90deg, transparent, rgba(232,121,95,0.12) 30%, rgba(232,121,95,0.12) 70%, transparent);
}
@media (min-width: 768px) {
  .na-expand {
    border-radius: 2rem;
    margin-left: 2rem;
    margin-right: 2rem;
  }
}

/* ---- Device Mockup ---- */
.na-mockup {
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
  will-change: transform;
}
@media (min-width: 1024px) {
  .na-mockup:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 32px 80px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
  }
  [data-theme="dark"] .na-mockup:hover {
    box-shadow: 0 32px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.08);
  }
}
.na-mockup-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.na-mockup-dots { display: flex; gap: 5px; }
.na-mockup-dots span { width: 8px; height: 8px; border-radius: 50%; }
.na-mockup-dots span:nth-child(1) { background: #ff5f57; }
.na-mockup-dots span:nth-child(2) { background: #febc2e; }
.na-mockup-dots span:nth-child(3) { background: #28c840; }
.na-mockup-url {
  flex: 1;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--c-muted);
  background: var(--c-bg);
  border-radius: 0.3rem;
  padding: 0.2rem 0.75rem;
}
.na-mockup-screen {
  aspect-ratio: 16 / 10;
  background: var(--c-surface);
  position: relative;
  overflow: hidden;
}
.na-mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.na-mockup-img.active {
  opacity: 1;
}

/* ---- Walkthrough ---- */
.na-walkthrough {
  display: grid;
  gap: 2rem;
  text-align: left;
}
.na-walkthrough-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.na-step {
  padding: 2rem 0;
  border-bottom: 1px solid var(--c-border);
  opacity: 0.25;
  transition: opacity 0.5s var(--ease);
}
.na-step:last-child { border-bottom: none; }
.na-step.active { opacity: 1; }

@media (max-width: 1023px) {
  .na-walkthrough {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  /* Kinder (Mockup, CTA, Steps) direkt im Flex: CTA nicht im sticky-Block */
  .na-walkthrough-aside {
    display: contents;
  }
  .na-walkthrough-visual {
    order: -1;
    position: sticky;
    top: calc(var(--nav-h) + 0.5rem);
    z-index: 3;
    margin: 0 -0.25rem 0;
    padding-bottom: 0.75rem;
    background: linear-gradient(to bottom, var(--c-bg) 85%, transparent);
  }
  .na-walkthrough-cta {
    order: 0;
    margin: 0 0 1rem;
  }
  .na-walkthrough-steps {
    order: 1;
  }
  .na-mockup {
    will-change: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
  }
  [data-theme="dark"] .na-mockup {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.45);
  }
  .na-mockup-screen {
    aspect-ratio: 16 / 11;
    max-height: min(42vh, 320px);
  }
  .na-walkthrough-steps {
    padding-top: 0.25rem;
  }
  .na-step {
    padding: 1.15rem 0.85rem 1.15rem 0.85rem;
    border-radius: 0.75rem;
    margin-bottom: 0.35rem;
    border-left: 3px solid transparent;
    border-bottom: none;
    opacity: 0.55;
    transition: opacity 0.35s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
    -webkit-tap-highlight-color: transparent;
  }
  .na-step.active {
    opacity: 1;
    border-left-color: var(--c-accent);
    background: var(--c-surface);
  }
  .na-walkthrough-steps .na-step {
    cursor: pointer;
  }
  .na-step:last-child {
    margin-bottom: 0;
  }
}

/* Step tabs (mobile only) */
.na-step-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.na-step-tab {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--c-border);
  border-radius: 0.5rem;
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--c-muted);
  cursor: pointer;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.na-step-tab.active {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: rgba(224, 101, 74, 0.06);
}
[data-theme="dark"] .na-step-tab.active {
  background: rgba(232, 121, 95, 0.08);
}
@media (min-width: 1024px) {
  .na-step-tabs { display: none; }
}

@media (min-width: 1024px) {
  .na-walkthrough {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
  }
  .na-walkthrough-aside {
    gap: 1.5rem;
  }
  .na-walkthrough-visual {
    position: sticky;
    top: calc(var(--nav-h) + 2rem);
  }
}
.na-step-num {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--c-accent);
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

/* ---- Bento Grid ---- */
.na-bento {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  max-width: 56rem;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .na-bento {
    grid-template-columns: repeat(3, 1fr);
  }
  .na-bento--wide { grid-column: span 2; }
}
.na-bento--wide { padding: 2.5rem; }
.na-bento-icon {
  display: block;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

/* ---- Floating Label Form ---- */
.na-form > * + * { margin-top: 1.5rem; }
.na-form { text-align: left; }
.na-field {
  position: relative;
}
.na-field .na-input,
.na-field .na-textarea {
  border: none;
  border-bottom: 2px solid var(--c-border);
  border-radius: 0;
  padding: 1.6rem 0 0.5rem;
  background: transparent;
  box-shadow: none;
}
.na-field .na-input:focus,
.na-field .na-textarea:focus {
  border-bottom-color: var(--c-accent);
  box-shadow: none;
  outline: none;
}
.na-float-label {
  position: absolute;
  top: 1.4rem;
  left: 0;
  font-size: 1rem;
  color: var(--c-faint);
  pointer-events: none;
  transition: all 0.2s var(--ease);
  transform-origin: left center;
}
.na-field .na-input:focus ~ .na-float-label,
.na-field .na-input:not(:placeholder-shown) ~ .na-float-label,
.na-field .na-textarea:focus ~ .na-float-label,
.na-field .na-textarea:not(:placeholder-shown) ~ .na-float-label {
  top: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--c-accent);
}
.na-field::after {
  content: "";
  position: absolute;
  bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--c-accent);
  transition: width 0.35s var(--ease-out), left 0.35s var(--ease-out);
}
.na-field:focus-within::after {
  left: 0;
  width: 100%;
}
.na-field--ta .na-float-label { top: 0.75rem; }
.na-field--ta .na-textarea:focus ~ .na-float-label,
.na-field--ta .na-textarea:not(:placeholder-shown) ~ .na-float-label {
  top: -0.2rem;
}

/* Submit button states */
.na-btn-check { display: none; }
.na-btn--success .na-btn-text { display: none; }
.na-btn--success .na-btn-check {
  display: inline-flex;
  animation: checkPop 0.45s var(--ease-out);
}
.na-btn--success {
  background: var(--c-accent) !important;
  pointer-events: none;
}
@keyframes checkPop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}

/* ---- Badges ---- */
.na-badge {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-faint);
  color: #fff;
  padding: 0.2rem 0.5rem;
  border-radius: 980px;
  margin-bottom: 0.75rem;
}
.na-badge--active { background: var(--c-accent); }
.na-card--dimmed { opacity: 0.6; }
.na-card--dimmed-more { opacity: 0.4; }

/* ---- Footer hint ---- */
.na-footer-hint {
  font-size: 0.75rem;
  color: var(--c-faint);
}

/* ---- Card Icons ---- */
.na-card-icon {
  display: block;
  color: var(--c-accent);
  margin-bottom: 1rem;
  transition: transform 0.35s var(--ease-out);
}
.na-card:hover .na-card-icon {
  transform: scale(1.1);
}

/* ---- Social Proof / Counter Strip ---- */
.na-proof {
  padding: 3rem 0;
  text-align: center;
}
.na-proof-items {
  display: flex;
  justify-content: center;
  gap: 2rem 4rem;
  flex-wrap: wrap;
}
.na-proof-item { text-align: center; }
.na-proof-num {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--c-text);
}
.na-proof-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--c-muted);
  margin-top: 0.35rem;
  font-weight: 500;
}

/* ---- Trust Badges ---- */
.na-trust {
  display: flex;
  justify-content: center;
  gap: 1.5rem 2.5rem;
  flex-wrap: wrap;
}
.na-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  background: var(--c-bg);
  border-radius: 980px;
  border: 1px solid var(--c-border);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.na-trust-badge:hover {
  border-color: rgba(224,101,74,0.25);
  transform: translateY(-1px);
}
[data-theme="dark"] .na-trust-badge {
  background: var(--c-surface);
}
.na-trust-badge svg { color: var(--c-accent); flex-shrink: 0; }

/* ---- Vorteile Card Icons ---- */
.na-hcard-icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  opacity: 0.7;
}
.na-anim-blink {
  animation: svgBlink 4s ease-in-out infinite;
}
@keyframes svgBlink {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0; }
}
.na-anim-tick {
  transform-origin: 12px 12px;
  animation: svgTick 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes svgTick {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(180deg); }
}
.na-anim-draw {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: svgDraw 4s ease-in-out infinite;
}
@keyframes svgDraw {
  0%, 70% { stroke-dashoffset: 20; }
  85%, 100% { stroke-dashoffset: 0; }
}

/* ---- FAQ Accordion ---- */
.na-faq { text-align: left; }
.na-faq-item {
  border-bottom: 1px solid var(--c-border);
}
.na-faq-item:last-child { border-bottom: none; }
.na-faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s var(--ease);
}
@media (max-width: 767px) {
  .na-faq-q {
    padding: 0.85rem 0;
    font-size: 0.9375rem;
  }
  details[open] .na-faq-a {
    padding-bottom: 0.85rem;
  }
  .na-faq-a {
    font-size: 0.875rem;
  }
}
.na-faq-q::-webkit-details-marker { display: none; }
.na-faq-q::after {
  content: "+";
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--c-faint);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
  margin-left: 1rem;
}
details[open] .na-faq-q::after {
  transform: rotate(45deg);
}
.na-faq-q:hover { color: var(--c-accent); }
.na-faq-a {
  font-size: 0.9375rem;
  color: var(--c-muted);
  line-height: 1.65;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 0;
}
.na-faq-a > * {
  overflow: hidden;
}
details[open] .na-faq-a {
  grid-template-rows: 1fr;
  padding-bottom: 1.25rem;
}

/* ---- Grain Texture Overlay ---- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.025;
  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.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ---- Extended Footer ---- */
.na-footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  text-align: left;
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .na-footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
  }
}
.na-footer-col { display: flex; flex-direction: column; gap: 0.35rem; }
.na-footer-heading {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-text);
  margin-bottom: 0.5rem;
}
.na-footer-col a {
  font-size: 0.8125rem;
  color: var(--c-muted);
  transition: color 0.2s;
}
.na-footer-col a:hover { color: var(--c-text); }
.na-footer-col .na-footer-cookie-btn {
  font-size: 0.8125rem;
  color: var(--c-muted);
  text-align: left;
}
.na-footer-col .na-footer-cookie-btn:hover {
  color: var(--c-text);
}
.na-footer { padding: 4rem 0 2.5rem; }
.na-footer-copy { text-align: center; }

/* ---- Form Validation ---- */
.na-field.na-field--error .na-input,
.na-field.na-field--error .na-textarea {
  border-bottom-color: #ef4444;
}
.na-field.na-field--error .na-float-label {
  color: #ef4444;
}
.na-field-error {
  display: none;
  font-size: 0.75rem;
  color: #ef4444;
  margin-top: 0.25rem;
}
.na-field--error .na-field-error { display: block; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
.na-shake { animation: shake 0.4s ease-out; }

/* ---- Page Transition ---- */
.na-page-exit {
  opacity: 0 !important;
  transition: opacity 0.25s var(--ease) !important;
}

/* ---- Legal ---- */
.na-page {
  padding-top: calc(var(--nav-h) + 3rem);
  padding-bottom: 4rem;
}
.na-legal-card {
  background: var(--c-surface);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: left;
}
@media (min-width: 640px) { .na-legal-card { padding: 3rem; } }
.legal-prose h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.5rem;
}
.legal-prose h2 {
  margin-top: 2rem;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--c-accent);
}
.legal-prose p, .legal-prose li { color: var(--c-muted); line-height: 1.7; }
.legal-prose strong { color: var(--c-text); }
.legal-prose em { color: var(--c-faint); }
.legal-prose a { color: var(--c-accent); }

.na-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.na-back-link {
  font-size: 0.75rem;
  color: var(--c-muted);
  transition: color 0.2s;
}
.na-back-link:hover { color: var(--c-text); }

/* Page entrance */
body { opacity: 0; }
body.loaded { opacity: 1; transition: opacity 0.45s var(--ease); }

/* GSAP blockiert / nicht geladen: kein „leere“ Seite (Hero + Reveals) */
html.na-no-gsap .na-reveal {
  opacity: 1 !important;
  transform: none !important;
}
html.na-no-gsap .na-line-inner {
  transform: none !important;
}
html.na-no-gsap .na-line {
  overflow: visible;
}
html.na-no-gsap .na-word-reveal .word {
  color: var(--c-text);
}
html.na-no-gsap .na-step {
  opacity: 1 !important;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { opacity: 1; }
  .mobile-menu, .na-card, .na-hcard, .na-btn, .na-reveal, #backToTop { transition: none !important; }
  .na-reveal { opacity: 1 !important; transform: none !important; }
  .na-line-inner { transform: none !important; }
  .na-scroll-wheel { animation: none; }
  .na-word-reveal .word { color: var(--c-text) !important; }
  .na-features li { opacity: 1 !important; transform: none !important; }
  .na-expand { border-radius: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  .na-hero::before { animation: none !important; }
  .na-hero-mobile-fx::before,
  .na-hero-mobile-fx::after { animation: none !important; }
  .na-hero .na-h1 .na-line:first-child .na-line-inner { animation: none !important; }
  .na-hero-visual { animation: none !important; }
  .na-hero-visual img { animation: none !important; }
  .na-platform-card--live { animation: none !important; }
  .na-step { opacity: 1 !important; }
  .na-field::after { transition: none !important; }
  .na-anim-blink { animation: none !important; }
  .na-anim-tick { animation: none !important; }
  .na-anim-draw { animation: none !important; stroke-dashoffset: 0 !important; }
  body::after { display: none !important; }
  .na-page-exit { transition: none !important; }
}

/* ---- View Transitions API ---- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation: 0.25s ease-out both fadeOut;
}
::view-transition-new(root) {
  animation: 0.25s ease-in 0.1s both fadeIn;
}
@keyframes fadeOut { to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---- Cookie-Einwilligung (kein Dark Pattern: gleichwertige Hauptaktionen) ---- */
.na-cc {
  position: fixed;
  z-index: 10050;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 0 calc(1rem + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.08);
}
[data-theme="dark"] .na-cc {
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45);
}
/* Kein body-padding bei sichtbarem Banner: Hero/100vh-Layout darf initial nicht „hochgeschoben“ werden; Banner liegt fixed über dem Inhalt. */
.na-cc-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.na-cc-title {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--c-text);
  margin: 0;
}
.na-cc-desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--c-muted);
  margin: 0;
  max-width: 52rem;
}
.na-cc-links {
  margin: 0;
  font-size: 0.875rem;
}
.na-cc-privacy-link {
  color: var(--c-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.na-cc-privacy-link:hover {
  color: var(--c-accent-hover);
}
.na-cc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 0.75rem;
}
.na-cc-btn-primary,
.na-cc-btn-secondary {
  min-height: 2.75rem;
  min-width: min(100%, 11rem);
  padding-left: 1.35rem;
  padding-right: 1.35rem;
  font-size: 0.9375rem;
}
.na-cc-btn-secondary {
  background: transparent;
  color: var(--c-text);
  border: 2px solid var(--c-border);
  box-shadow: none;
}
.na-cc-btn-secondary:hover {
  background: var(--c-surface-hover);
  border-color: var(--c-muted);
  transform: translateY(-1px);
}
.na-cc .na-btn:focus:not(:focus-visible) {
  outline: none;
}
.na-cc .na-btn:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}
.na-cc-dismiss-wrap {
  width: 100%;
}
.na-cc-dismiss {
  background: none;
  border: none;
  padding: 0.35rem 0;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.na-cc-dismiss:hover {
  color: var(--c-text);
}
.na-cc-details {
  border-top: 1px solid var(--c-border);
  padding-top: 0.75rem;
  margin-top: 0.25rem;
}
.na-cc-summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-accent);
  list-style: none;
}
.na-cc-summary::-webkit-details-marker { display: none; }
.na-cc-summary::after {
  content: " ";
  display: inline-block;
  width: 0.35em;
  height: 0.35em;
  margin-left: 0.35rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: 0.15em;
  transition: transform 0.2s var(--ease);
}
.na-cc-details[open] .na-cc-summary::after {
  transform: rotate(-135deg);
  vertical-align: -0.05em;
}
.na-cc-panel {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.na-cc-label {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-muted);
  cursor: pointer;
}
.na-cc-label input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.1rem;
  height: 1.1rem;
  accent-color: var(--c-accent);
}
.na-cc-save {
  min-height: 2.5rem;
}
.na-footer-cookie-btn {
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: inherit;
  text-align: left;
  color: var(--c-faint);
  cursor: pointer;
  transition: color 0.2s;
}
.na-footer-cookie-btn:hover {
  color: var(--c-text);
}
.mobile-menu-legal-btn {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.3rem 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  text-align: left;
  color: var(--c-faint);
  cursor: pointer;
  transition: color 0.15s;
}
.mobile-menu-legal-btn:hover {
  color: var(--c-text);
}
.na-footer-links .na-footer-cookie-btn {
  display: inline;
  padding: 0 0.35rem;
  font-size: 0.8125rem;
  color: var(--c-muted);
}
.na-footer-links .na-footer-cookie-btn:hover {
  color: var(--c-text);
}