/* no-js.css — Fallbacks für Betrieb ohne JavaScript. Greift nur, solange gesetzt ist; header.php entfernt die Klasse sofort, wenn JS läuft. So bleibt die Seite ohne JS vollständig nutzbar. */ /* Reveal/Slide-Elemente sofort sichtbar (JS würde .is-in setzen) */ .no-js [data-reveal], .no-js [data-slide] { opacity: 1 !important; transform: none !important; transition: none !important; } /* Hero: statischer Verlauf statt Canvas-Animation */ .no-js .hero__canvas-wrap { background: radial-gradient(60% 55% at 25% 30%, var(--accent-soft), transparent 70%), radial-gradient(55% 50% at 80% 20%, oklch(0.9 0.05 250 / 0.35), transparent 70%), radial-gradient(50% 45% at 65% 75%, oklch(0.92 0.05 40 / 0.30), transparent 70%), var(--bg); } .no-js .hero__canvas { display: none; } /* Scroll-Cards: Pin auflösen → lesbare, gestapelte Kartenliste */ .no-js .scroll-cards { height: auto !important; } .no-js .scroll-cards__pin { position: static; height: auto; overflow: visible; display: block; } .no-js .scroll-cards__stage { height: auto; display: flex; flex-direction: column; gap: 24px; } .no-js .scroll-card { position: static; inset: auto; opacity: 1 !important; transform: none !important; } .no-js .scroll-cards__progress { display: none; } /* Funnel: Fortschritt/Stepper aus, alle Fragen sichtbar, Fallback-CTA an */ .no-js .funnel__bar, .no-js .funnel__meta { display: none; } .no-js .funnel__step { animation: none; } .no-js .funnel__nojs-cta { display: block; margin-top: 28px; } /* Mit JS ist der Fallback-CTA unnötig (JS blendet ihn zusätzlich per [hidden] aus) */ .funnel__nojs-cta { display: none; } /* Referenz-Durchflug (webdesign.php): der statische Fallback liegt in sections.css — die Regeln gelten gemeinsam für .no-js und .flyref--static (prefers-reduced-motion). */