/* ========================================================================== iframes: Scroll-Schutz UEBERGANGSLOESUNG: Dieselben Regeln stehen als Quelle in #scss/_wordpress-core-blocks.scss. Sobald der Server main.css neu kompiliert hat, koennen diese Datei und der Enqueue in functions.php entfallen - das spart einen blockierenden Request im . ========================================================================== */ .iframe-scroll-guard { position: relative; } .iframe-scroll-guard > iframe { display: block; max-width: 100%; } .iframe-scroll-guard.is-active > .iframe-scroll-guard__shield { opacity: 0; pointer-events: none; } .iframe-scroll-guard__shield { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; margin: 0; padding: 0 15px 20px; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; appearance: none; } .iframe-scroll-guard__shield:focus-visible { outline: 3px solid var(--main-color) !important; outline-offset: -3px; } .iframe-scroll-guard__shield:hover .iframe-scroll-guard__hint, .iframe-scroll-guard__shield:focus-visible .iframe-scroll-guard__hint { opacity: 1; } .iframe-scroll-guard__hint { display: inline-block; max-width: 100%; padding: 8px 16px; border-radius: 999px; background: rgba(26, 26, 26, 0.85); color: #fff; font-family: var(--mainFont); font-size: 0.85rem; line-height: 1.2; text-align: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease-in-out; } /* Touch-Geraete kennen kein Hover: Hinweis dauerhaft, aber dezent */ @media (hover: none) { .iframe-scroll-guard__hint { opacity: 0.9; } } @media (prefers-reduced-motion: reduce) { .iframe-scroll-guard__hint { transition: none; } }