/*
 * Elemente nur ausblenden, nachdem JavaScript initialisiert wurde.
 * Dadurch bleiben Inhalte bei JavaScript-Fehlern immer sichtbar.
 */
html.dhp_oh_fade_ready .dhp_oh_fade {
    opacity: 0;
    transform: translate3d(0, 35px, 0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

/*
 * Sichtbarer Endzustand.
 */
html.dhp_oh_fade_ready .dhp_oh_fade.dhp_oh_fade_visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/*
 * Textelemente nicht per GPU-Transform animieren.
 * Verhindert Rendering-/Repaint-Probleme bei individuell
 * gesetzten Gutenberg-Schriftgrößen.
 */
html.dhp_oh_fade_ready h1.dhp_oh_fade,
html.dhp_oh_fade_ready h2.dhp_oh_fade,
html.dhp_oh_fade_ready h3.dhp_oh_fade,
html.dhp_oh_fade_ready h4.dhp_oh_fade,
html.dhp_oh_fade_ready h5.dhp_oh_fade,
html.dhp_oh_fade_ready h6.dhp_oh_fade,
html.dhp_oh_fade_ready p.dhp_oh_fade,
html.dhp_oh_fade_ready li.dhp_oh_fade {
    transform: none;
    transition: opacity 0.8s ease;
}

html.dhp_oh_fade_ready h1.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready h2.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready h3.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready h4.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready h5.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready h6.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready p.dhp_oh_fade.dhp_oh_fade_visible,
html.dhp_oh_fade_ready li.dhp_oh_fade.dhp_oh_fade_visible {
    transform: none;
}

/*
 * WordPress-Editor und Elementor-Editor nicht beeinträchtigen.
 */
.block-editor-page .dhp_oh_fade,
.elementor-editor-active .dhp_oh_fade {
    opacity: 1;
    transform: none;
}

/*
 * Betriebssystemeinstellung für reduzierte Bewegung respektieren.
 */
@media (prefers-reduced-motion: reduce) {
    html.dhp_oh_fade_ready .dhp_oh_fade,
    html.dhp_oh_fade_ready .dhp_oh_fade.dhp_oh_fade_visible {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/*
 * In der Druckansicht alle Inhalte sichtbar darstellen.
 */
@media print {
    html.dhp_oh_fade_ready .dhp_oh_fade,
    html.dhp_oh_fade_ready .dhp_oh_fade.dhp_oh_fade_visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}