/**
 * Welten — Mobile / Tablet / Performance (NEXORA · PROFESSIONAL · FREIRAUM)
 * Touch-Scroll, Hero-Skalierung, Dot-Nav, Hintergrund-Rand, reduzierte Effekte
 */

:root {
  --hero-scale: 1;
}

/* ── Touch-Scroll & Hero (Tablet + Handy) ── */
@media (max-width: 1024px) {
  :root {
    --hero-scale: 0.78;
    --hero-dna-h: min(
      calc((100svh - var(--header-h, 56px) - var(--dock-h, 0px)) * 0.78),
      620px
    );
  }

  html.welten-mobile,
  html.welten-mobile body {
    overflow-x: hidden !important;
    overflow-y: hidden !important;
    height: 100% !important;
    min-height: 100% !important;
    overscroll-behavior-y: auto;
  }

  html.welten-mobile .world,
  html.welten-mobile .page,
  html.welten-mobile .hero,
  html.welten-mobile .hero-section,
  html.welten-mobile .home-hero,
  html.welten-mobile .home-hero-experience,
  html.welten-mobile .hero-stage {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .home-hero-experience {
    touch-action: pan-y !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  #dnaStage.home-hero-experience,
  .home-hero-experience#dnaStage,
  .dna-stage,
  .orbit-stage,
  .hero-interaction,
  .mouse-effect-layer {
    touch-action: pan-y !important;
  }

  @media (max-width: 1024px) {
    #dnaStage.home-hero-experience,
    .home-hero-experience#dnaStage {
      pointer-events: auto !important;
    }
  }

  @media (min-width: 1025px) {
    #dnaStage.home-hero-experience,
    .home-hero-experience#dnaStage,
    .dna-stage,
    .orbit-stage,
    .hero-interaction,
    .mouse-effect-layer {
      pointer-events: none !important;
    }
  }

  #dnaStage .dna-slide,
  #dnaStage .nexora-orbit-button,
  #dnaStage .nexora-orbit-buttons,
  #dnaStage .btn,
  #dnaStage button,
  #dnaStage a[href] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  .nexora-orbit-buttons,
  .nexora-orbit-ring {
    touch-action: pan-y !important;
    pointer-events: auto !important;
  }

  .dna-particles-canvas,
  .dna-premium-canvas,
  #particle-canvas,
  #dnaPremiumCanvas,
  #weltenMousePaintCanvas,
  .bg-root,
  .bg-grid,
  .light-beams,
  canvas:not(.welten-keep-pointer) {
    touch-action: pan-y !important;
    pointer-events: none !important;
  }

  .dna-slide,
  .btn,
  .btn-primary,
  .btn-menu,
  .btn-close,
  a[href],
  button,
  [role="button"],
  .dock-card,
  .menu-links a,
  .experience-step,
  .faq-q,
  .faq-question,
  .persona-tabs button,
  .site-header,
  .site-header * {
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body[data-world="nexora"] .dna-orbit-group:not(.nexora-orbit-ring) {
    transform: rotateY(var(--dna-rot, 0deg));
    transform-origin: 50% 50%;
  }

  .dna-slide {
    font-size: clamp(0.62rem, 2.4vw, 0.82rem) !important;
    padding: clamp(8px, 2vw, 12px) clamp(10px, 2.5vw, 14px) !important;
  }

  body[data-world="vertex"] .dna-unified-scene::before {
    transform: translateX(-50%) translateY(-50%) scale(var(--hero-scale)) !important;
  }

  body[data-world="freiraum"] .dna-unified-scene::after {
    transform: scale(var(--hero-scale)) !important;
    transform-origin: 100% 0;
  }
}

@media (max-width: 768px) {
  :root {
    --hero-scale: 0.64;
    --hero-dna-h: min(
      calc((100svh - var(--header-h, 56px) - var(--dock-h, 0px)) * 0.64),
      480px
    );
  }

  .home-hero-experience {
    min-height: auto !important;
    max-height: none !important;
  }

  body[data-world="vertex"] .dna-unified-scene::before {
    font-size: clamp(2.4rem, 14vw, 5.5rem) !important;
  }

  body[data-world="nexora"] .dna-unified-scene::after,
  body[data-world="freiraum"] .dna-unified-scene::after {
    font-size: clamp(0.65rem, 2.8vw, 0.85rem) !important;
  }
}

@media (max-width: 480px) {
  :root {
    --hero-scale: 0.54;
    --hero-dna-h: min(
      calc((100svh - var(--header-h, 56px) - var(--dock-h, 0px)) * 0.54),
      400px
    );
  }

  .home-hero-experience {
    min-height: auto !important;
    max-height: none !important;
  }

  .dna-orbit-group {
    height: min(100%, min(42vh, 360px)) !important;
  }
}

/* ── Hero-Hintergrund bis zum Rand, Inhalt zentriert ── */
.home-hero-experience,
.hero,
.hero-section,
.home-hero {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.hero-inner,
.hero-content,
.home-main-block,
.slide-inner--home .home-main-block {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Rechte Punktnavigation: nur grosser Desktop ── */
@media (max-width: 1400px) {
  .experience-rail,
  .side-nav,
  .dot-nav,
  .chapter-nav,
  .vertical-nav,
  .right-nav,
  .chapter-dots,
  .chapter-dock {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .slide {
    padding-right: clamp(16px, 4vw, 44px) !important;
  }

  #slide-home.slide {
    padding-right: 0 !important;
  }
}

/* ── Performance: weniger Glow/Blur/Animation auf Touch-Geräten ── */
html.welten-mobile .light-beams,
html.welten-mobile .dna-holo-arm,
html.welten-reduce-effects .light-beams,
html.welten-reduce-effects .dna-holo-arm {
  animation-play-state: paused !important;
}

html.welten-mobile .dna-premium-canvas,
html.welten-mobile #particle-canvas,
html.welten-mobile #weltenMousePaintCanvas,
html.welten-reduce-effects .dna-premium-canvas,
html.welten-reduce-effects #particle-canvas,
html.welten-reduce-effects #weltenMousePaintCanvas {
  opacity: 0 !important;
  visibility: hidden !important;
}

html.welten-mobile .glass-card,
html.welten-reduce-effects .glass-card {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.welten-page-hidden .dna-premium-canvas,
html.welten-page-hidden #particle-canvas,
html.welten-page-hidden #weltenMousePaintCanvas {
  visibility: hidden !important;
}

html.welten-world-paused .dna-particles-canvas,
html.welten-world-paused .dna-premium-canvas,
html.welten-world-paused #particle-canvas,
html.welten-world-paused #weltenMousePaintCanvas,
html.welten-world-paused .light-beams {
  opacity: 0 !important;
  visibility: hidden !important;
  animation-play-state: paused !important;
}

/* ── Overrides: eingebettete Fixes + Welt-spezifisch (Handy) ── */
@media (max-width: 1024px) {
  .home-hero-experience {
    overflow: visible !important;
    min-height: auto !important;
    max-height: none !important;
    height: auto !important;
  }

  /* NEXORA: Button-Liste wie PROFESSIONAL, Look NEXORA (kein 3D-Orbit) */
  body[data-world="nexora"] #dnaStage,
  body[data-world="nexora"] #dnaStage.home-hero-experience,
  body[data-world="nexora"] .home-hero-experience {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding-bottom: 12px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
    user-select: auto !important;
    -webkit-user-select: auto !important;
  }

  body[data-world="nexora"] .neuro-core {
    position: relative !important;
    flex: 0 0 auto !important;
    min-height: min(32vh, 240px) !important;
    max-height: min(36vh, 280px) !important;
    margin: 4px auto 0 !important;
    transform: scale(0.7) !important;
    pointer-events: none !important;
  }

  body[data-world="nexora"] .dna-unified-scene {
    transform: none !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: 0 0 auto !important;
    position: relative !important;
  }

  body[data-world="nexora"] .dna-holo-arm,
  body[data-world="nexora"] .dna-visual-stack,
  body[data-world="nexora"] #slide-home .dna-unified-scene .portrait-photo,
  body[data-world="nexora"] #slide-home .home-hero-experience .portrait-photo {
    transform: translate(-50%, -50%) rotateZ(-11deg) scale(0.5) !important;
    pointer-events: none !important;
  }


  body[data-world="nexora"] #slide-home .nexora-orbit-buttons,
  body[data-world="nexora"] #slide-home .nexora-orbit-buttons.welten-nexora-list-mode {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    perspective: none !important;
    padding: 8px 10px 16px !important;
    margin: 0 !important;
    pointer-events: auto !important;
    touch-action: pan-y !important;
    flex: 0 0 auto !important;
    z-index: 12 !important;
  }

  body[data-world="nexora"] #slide-home .nexora-orbit-buttons::before {
    display: none !important;
  }

  body[data-world="nexora"] #slide-home .nexora-orbit-ring {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(6px, 1.8vw, 10px) !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  body[data-world="nexora"] #slide-home .nexora-orbit-button {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    height: auto !important;
    min-height: 44px !important;
    padding: clamp(9px, 2.2vw, 12px) clamp(12px, 3vw, 16px) !important;
    font-size: clamp(0.64rem, 2.5vw, 0.76rem) !important;
    opacity: 1 !important;
    filter: none !important;
    touch-action: pan-y !important;
  }

  body[data-world="vertex"] .dna-unified-scene::after {
    display: block !important;
    visibility: visible !important;
  }

  /* PROFESSIONAL: Spalten-Layout, Claim + Buttons lesbar */
  body[data-world="vertex"] .home-hero-experience {
    min-height: 0 !important;
    height: auto !important;
    padding: 8px 0 20px !important;
  }

  body[data-world="vertex"] .dna-unified-scene {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: clamp(8px, 2vh, 14px) !important;
    min-height: 0 !important;
    height: auto !important;
    padding: clamp(8px, 2vw, 14px) !important;
  }

  body[data-world="vertex"] .dna-unified-scene::after {
    display: block !important;
    position: relative !important;
    order: 1 !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    width: min(92vw, 340px) !important;
    max-width: 92vw !important;
    margin: 8px auto 0 !important;
    padding: 14px 12px 0 !important;
    text-align: center !important;
    transform: none !important;
    border-top: 2px solid #111 !important;
    font-size: clamp(0.68rem, 2.4vw, 0.82rem) !important;
    color: rgba(17, 17, 17, 0.64) !important;
    opacity: 1 !important;
  }

  body[data-world="vertex"] .dna-unified-scene::before {
    content: "PROFESSIONAL" !important;
    display: block !important;
    position: absolute !important;
    order: 2 !important;
    left: 50% !important;
    top: 62% !important;
    bottom: auto !important;
    width: 100% !important;
    transform: translateX(-50%) translateY(-50%) !important;
    font-size: clamp(2rem, 11vw, 3.6rem) !important;
    line-height: 0.88 !important;
    color: rgba(0, 0, 0, 0.09) !important;
    opacity: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body[data-world="vertex"] .dna-unified-scene {
    position: relative !important;
  }

  body[data-world="vertex"] .dna-orbit-group {
    z-index: 2 !important;
  }

  body[data-world="vertex"] .dna-orbit-group {
    position: relative !important;
    order: 3 !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    margin: 0 !important;
  }

  body[data-world="vertex"] .dna-ring {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: clamp(6px, 1.8vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 8px 4px !important;
  }

  body[data-world="vertex"] .dna-slide {
    padding: clamp(9px, 2.2vw, 12px) clamp(10px, 2.8vw, 14px) !important;
    font-size: clamp(0.64rem, 2.5vw, 0.76rem) !important;
    flex: 0 1 auto !important;
  }

  /* FREIRAUM: Deko-Text aus, 2-Spalten-Grid ohne Überlappung */
  body[data-world="freiraum"] #slide-home .dna-slide:nth-child(n+6) {
    display: block !important;
  }

  body[data-world="freiraum"] .home-hero-experience {
    min-height: auto !important;
    height: auto !important;
    padding-bottom: 16px !important;
  }

  body[data-world="freiraum"] .dna-unified-scene {
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 10px 14px !important;
  }

  body[data-world="freiraum"] .dna-unified-scene::after {
    display: none !important;
  }

  body[data-world="freiraum"] #slide-home .dna-orbit-group,
  body[data-world="freiraum"] #slide-home .dna-ring-scene {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    pointer-events: none !important;
    flex: 1 1 auto !important;
  }

  body[data-world="freiraum"] #slide-home .dna-ring {
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: clamp(6px, 1.8vw, 10px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 8px 10px 12px !important;
    pointer-events: auto !important;
    isolation: isolate !important;
  }

  body[data-world="freiraum"] #slide-home .dna-slide,
  body[data-world="freiraum"] #slide-home .dna-slide:nth-child(n) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
    margin: 0 !important;
    font-size: clamp(0.6rem, 2.4vw, 0.72rem) !important;
    padding: clamp(8px, 2vw, 10px) clamp(10px, 2.5vw, 14px) !important;
    line-height: 1.15 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    z-index: 2 !important;
  }

  body[data-world="freiraum"] .home-hero-experience {
    overflow-x: hidden !important;
  }
}

@media (max-width: 768px) {
  body[data-world="vertex"] .home-hero-experience,
  body[data-world="freiraum"] .dna-unified-scene {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 480px) {
  body[data-world="vertex"] .dna-unified-scene::before {
    top: 64% !important;
    font-size: clamp(1.75rem, 10vw, 2.6rem) !important;
  }

  body[data-world="freiraum"] #slide-home .dna-slide,
  body[data-world="nexora"] #slide-home .nexora-orbit-button {
    font-size: 0.68rem !important;
    padding: 8px 10px !important;
  }
}

/* Nach eingebetteten Fixes: Hero-Scroll + Freiraum-Grid erzwingen */
@media (max-width: 1024px) {
  .home-hero-experience {
    overflow: visible !important;
  }

  body[data-world="freiraum"] #slide-home .dna-orbit-group,
  body[data-world="freiraum"] #slide-home .dna-ring-scene,
  body[data-world="freiraum"] #slide-home .dna-ring,
  body[data-world="freiraum"] #slide-home .dna-slide,
  body[data-world="freiraum"] #slide-home .dna-slide:nth-child(n) {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    inset: auto !important;
    transform: none !important;
    translate: none !important;
    rotate: none !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  body[data-world="freiraum"] #slide-home .dna-ring {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  body[data-world="freiraum"] #slide-home .dna-slide,
  body[data-world="freiraum"] #slide-home .dna-slide:nth-child(n) {
    width: auto !important;
    flex: 0 1 auto !important;
  }
}

@media (max-width: 1024px) {
  body[data-world="nexora"] #slide-home .nexora-orbit-ring,
  body[data-world="nexora"] #slide-home .nexora-orbit-ring.hero-buttons-grid {
    display: grid !important;
    flex-wrap: unset !important;
    justify-content: stretch !important;
    align-items: stretch !important;
  }

  body[data-world="vertex"] #slide-home .dna-ring,
  body[data-world="freiraum"] #slide-home .dna-ring {
    display: grid !important;
    flex-wrap: unset !important;
  }

  a[href^="mailto:"],
  a[href^="tel:"],
  .site-header .header-meta[href^="mailto:"],
  .site-header .header-meta[href^="tel:"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10090 !important;
  }

  .slide::after,
  .page::after,
  .section::after {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Desktop ≥1025px: Mobile-Hero-Regeln greifen nicht */

/* ── Runtime Performance: weniger Layout/Paint, pausierte Welten ── */
@media (max-width: 1024px) {
  .slide:not(.active) {
    content-visibility: auto;
    contain-intrinsic-size: auto 480px;
    contain: layout style paint;
  }

  .slide.active {
    content-visibility: visible;
    contain: none;
  }
}

html.welten-world-paused canvas,
html.welten-page-hidden canvas,
html.welten-reduce-effects .dna-premium-canvas,
html.welten-reduce-effects .dna-particles-canvas,
html.welten-reduce-effects #particle-canvas,
html.welten-reduce-effects #weltenMousePaintCanvas {
  visibility: hidden !important;
  pointer-events: none !important;
}

html.welten-world-paused canvas,
html.welten-world-paused .light-beams,
html.welten-world-paused .dna-premium-canvas,
html.welten-world-paused .dna-particles-canvas,
html.welten-world-paused #particle-canvas,
html.welten-world-paused #weltenMousePaintCanvas,
html.welten-page-hidden canvas,
html.welten-page-hidden .light-beams {
  animation-play-state: paused !important;
}

.slide.active .slide-inner {
  animation-play-state: running !important;
  opacity: 1 !important;
  visibility: visible !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  canvas {
    display: none !important;
  }
}

img:not([loading]) {
  content-visibility: auto;
}

.slide img[loading="lazy"],
.home-portrait-card img,
.contact-visual img {
  decoding: async;
}