/* ======================================================================
   12-touch-visibility-fallback.css
   ----------------------------------------------------------------------
   Touch / iPad / iOS Performance- + Sichtbarkeits-Patches.
   Die Datei ist die VORLETZTE im Cascade — danach kommt nur noch
   13-responsive-enhancements.css.

   Konsolidiert (Cleanup-Pass): Statt jeden Block 3x zu schreiben
   (@media + html.is-touch + html.is-ios) verwenden wir jetzt
   `:is()`, das alle modernen Browser (Chrome 88+, Safari 14+, Firefox 78+)
   unterstuetzen. Spart ~200 Zeilen, identische Wirkung.
   ====================================================================== */


/* =====================================================================
   1) REVEAL-FALLBACKS — Inhalt darf NIEMALS unsichtbar bleiben
      (auch wenn JS scheitert oder IntersectionObserver still ist)
   ===================================================================== */
html.is-loaded :is(
  [data-animate], [data-animate-section], [data-hero-item], [data-hero-line],
  [data-process-item], [data-table-row], [data-reveal], [data-reveal-child],
  [data-animate-item]
) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Touch-Geraete: sofort sichtbar, keine Reveal-Verzoegerung */
@media (hover: none) and (pointer: coarse) {
  :is(
    [data-animate-section], [data-animate], [data-hero-item], [data-hero-line],
    [data-process-item], [data-table-row], [data-reveal], [data-reveal-child],
    [data-animate-item]
  ) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
  [data-reveal] > [data-reveal-child] { opacity: 1 !important; }

  /* Klassen-basierte Reveal-Bloecke (Templates ohne data-*) */
  :is(
    body[data-page="about"] .principleCard,
    body[data-page="about"] .founderCard,
    body[data-page="pricing"] .pkgCompareWrap,
    body[data-page="pricing"] .configuratorSection,
    body[data-page="pricing"] .pkgStage,
    body[data-page="services"] .ltsModel__card
  ) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Klassen-Fallback (von main.js gesetzt — deckt iPads mit Magic Keyboard ab) */
:is(html.is-touch, html.is-ios) :is(
  [data-animate-section], [data-animate], [data-hero-item], [data-hero-line],
  [data-process-item], [data-table-row], [data-reveal], [data-reveal-child],
  [data-animate-item]
) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}


/* =====================================================================
   2) TOUCH-PERFORMANCE: backdrop-filter aus
      backdrop-filter ist der teuerste Kompositions-Effekt auf iOS Safari.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  :root { --blur: none !important; --chrome-blur: none !important; }
}

:is(html.is-touch, html.is-ios) :is(*, *::before, *::after) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
:is(html.is-touch, html.is-ios) {
  --blur: none !important;
  --chrome-blur: none !important;
}


/* =====================================================================
   3) MIX-BLEND-MODE aus (body bleibt unangetastet, sonst wuerde der
      animierte Hintergrund kaputtgehen)
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  *:not(body) { mix-blend-mode: normal !important; }
  :not(body)::before, :not(body)::after { mix-blend-mode: normal !important; }
}

:is(html.is-touch, html.is-ios) *:not(body),
:is(html.is-touch, html.is-ios) :not(body)::before,
:is(html.is-touch, html.is-ios) :not(body)::after {
  mix-blend-mode: normal !important;
}


/* =====================================================================
   4) DEKORATIVE ANIMATIONEN auf Touch deaktivieren
      Site-Demo, Eyebrow-Dots, Header-Sweeps, Scroll-Cues, Ringe.
      Schwebe-Effekte (Hero-Orbs, Float-Cards) bleiben aktiv —
      nur ihr will-change wird abgeschaltet (kein dauerhafter GPU-Layer).
   ===================================================================== */

/* Selektor-Liste, die abgeschaltet wird */
@media (hover: none) and (pointer: coarse) {
  :is(
    body[data-page="home"] .s-site-demo__page,
    body[data-page="home"] .s-site-demo__burger,
    body[data-page="home"] .s-site-demo__menu,
    body[data-page="home"] .s-site-demo__card,
    body[data-page="home"] .s-site-demo__cta,
    body[data-page="home"] .s-site-demo__cursor,
    body[data-page="home"] .s-site-demo__tap,
    .pkgHero__eyebrow-dot,
    body[data-page="about"] .aboutHero__eyebrow-dot,
    body[data-page="contact"] .contactHero__eyebrow-dot,
    body[data-page="services"] .srvPageHero__eyebrow-dot,
    .header::after,
    .pkgHero__scroll-line::before,
    .s-hero__scroll-line::before,
    .srvPageHero__scroll-line::before,
    .aboutHero__scroll-line::before,
    .contactHero__scroll-line::before
  ) {
    animation: none !important;
    will-change: auto !important;
  }

  /* Ringe / Sheens — zusaetzliche Compositing-Layer */
  :is(
    body[data-page="services"] [class*="srvHero"][class*="Ring"],
    body[data-page="pricing"] [class*="ringPulse"],
    body[data-page="about"] [class*="ringPulse"]
  ) {
    animation: none !important;
  }

  /* Schwebe-Effekte: Animation laeuft, will-change aus */
  :is(
    .pkgHero__orb, .pkgHero__orb--violet, .pkgHero__orb--cyan, .pkgHero__orb--gold,
    .pkgHero__float-card, .pkgHero__grad,
    body[data-page="home"] .s-hero__orb,
    body[data-page="home"] .s-hero__headline-gradient,
    body[data-page="about"] .aboutHero__orb,
    body[data-page="about"] .aboutHero__orb--violet,
    body[data-page="about"] .aboutHero__orb--cyan,
    body[data-page="about"] .aboutHero__grad,
    body[data-page="about"] .aboutHero__founder-card,
    body[data-page="contact"] .contactHero__orb,
    body[data-page="contact"] .contactHero__orb--violet,
    body[data-page="contact"] .contactHero__orb--cyan,
    body[data-page="contact"] .contactHero__grad,
    body[data-page="services"] .srvPageHero__grad
  ) {
    will-change: auto !important;
  }
}

/* Klassen-Fallback fuer is-touch / is-ios */
:is(html.is-touch, html.is-ios) :is(
  body[data-page="home"] .s-site-demo__page,
  body[data-page="home"] .s-site-demo__burger,
  body[data-page="home"] .s-site-demo__menu,
  body[data-page="home"] .s-site-demo__card,
  body[data-page="home"] .s-site-demo__cta,
  body[data-page="home"] .s-site-demo__cursor,
  body[data-page="home"] .s-site-demo__tap,
  .pkgHero__eyebrow-dot,
  body[data-page="about"] .aboutHero__eyebrow-dot,
  body[data-page="contact"] .contactHero__eyebrow-dot,
  body[data-page="services"] .srvPageHero__eyebrow-dot,
  .header::after
) {
  animation: none !important;
  will-change: auto !important;
}

:is(html.is-touch, html.is-ios) :is(
  .pkgHero__orb, .pkgHero__float-card, .pkgHero__grad,
  body[data-page="home"] .s-hero__orb,
  body[data-page="home"] .s-hero__headline-gradient,
  body[data-page="about"] .aboutHero__orb,
  body[data-page="about"] .aboutHero__grad,
  body[data-page="contact"] .contactHero__orb,
  body[data-page="contact"] .contactHero__grad,
  body[data-page="services"] .srvPageHero__grad
) {
  will-change: auto !important;
}


/* =====================================================================
   5) WILL-CHANGE generell reduzieren
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  :is(
    .pkgHero__orb, .s-hero__orb, .aboutHero__orb, .contactHero__orb,
    .scroll-progress__bar, .s-site-demo__page
  ) { will-change: auto !important; }
}

:is(html.is-touch, html.is-ios) :is(
  .pkgHero__orb, .s-hero__orb, .aboutHero__orb, .contactHero__orb,
  .scroll-progress__bar, .s-site-demo__page
) { will-change: auto !important; }


/* =====================================================================
   6) PARTIKEL-CANVAS deaktivieren (JS initialisiert sie auf Touch nicht)
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  :is(
    .page-bg__canvas, .s-hero__canvas, .pkgHero__canvas,
    .aboutHero__canvas, .contactHero__canvas,
    body[data-page="pricing"] .pkgPricingAtmosphere
  ) { display: none !important; }
}


/* =====================================================================
   7) STERNSCHNUPPEN — DOM-Variante auf Touch aus, SVG bleibt
      JS rendert auf Touch ein leichtes <svg>; die schwere DOM-Variante
      (Spans + Pseudos) wird hier abgeschaltet, falls JS nicht laeuft.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  [data-sternschnuppen] :is(
    .sternschnuppen__star, .sternschnuppen__planet, .sternschnuppen__streak
  ),
  [data-sternschnuppen] :is(
    .sternschnuppen__planet::before, .sternschnuppen__planet::after,
    .sternschnuppen__streak::before, .sternschnuppen__streak::after
  ) {
    animation: none !important;
    display: none !important;
  }
  [data-sternschnuppen] { display: block !important; }
}

:is(html.is-touch, html.is-ios) [data-sternschnuppen] :is(
  .sternschnuppen__star, .sternschnuppen__planet, .sternschnuppen__streak
),
:is(html.is-touch, html.is-ios) [data-sternschnuppen] :is(
  .sternschnuppen__planet::before, .sternschnuppen__planet::after,
  .sternschnuppen__streak::before, .sternschnuppen__streak::after
) {
  animation: none !important;
  display: none !important;
}


/* =====================================================================
   8) HEAVY filter:blur auf grossen Layern abschalten
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  :is(
    body[data-page="pricing"]::before,
    .page-bg--home,
    .pkgPricingAtmosphere
  ) { filter: none !important; }
}

:is(html.is-touch, html.is-ios) :is(
  body[data-page="pricing"]::before,
  .page-bg--home,
  .pkgPricingAtmosphere
) { filter: none !important; }


/* =====================================================================
   9) iOS sticky/fixed Bug — overflow-y auf html/body NICHT setzen
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  html, body { overflow-y: visible !important; }
  body { overflow-x: clip; }
  html { overflow-x: clip; }
}


/* =====================================================================
   10) NO-JS HARTE FALLBACKS
   ===================================================================== */
html:not(.js) :is(
  [data-animate], [data-animate-section], [data-hero-item], [data-hero-line],
  [data-process-item], [data-reveal], [data-reveal-child], [data-animate-item]
) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  transition: none !important;
}


/* =====================================================================
   11) PREFERS-REDUCED-MOTION — aggressive Variante
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  body::before, body::after, body[data-page="pricing"]::before {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
  .header::after { animation: none !important; }
}