/* === Desktop (Sidebar aktiv) — NUR wenn nicht im Elementor-Editor === */ @media (min-width:1025px){ body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe{ position: fixed; /* innerhalb des Contentbereichs (rechts der Sidebar) zentriert */ left: var(--sb-w); right: 0; margin: 0 auto; width: fit-content; /* Versteckt + Animation */ transform: translateY(-1rem); opacity: 0; pointer-events: none; transition: opacity var(--mm-duration, 400ms) var(--mm-ease, cubic-bezier(.2,.7,.2,1)), transform var(--mm-duration, 400ms) var(--mm-ease, cubic-bezier(.2,.7,.2,1)), top var(--mm-duration, 400ms) var(--mm-ease, cubic-bezier(.2,.7,.2,1)); /* Optik */ border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: var(--z-base, 9990); } body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe:focus-within{ top: 0; opacity: 1; pointer-events: auto; transform: translateY(0); } /* WP-Adminbar berücksichtigen (liegt als Klasse auf ) */ body.admin-bar:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe:focus-within{ top: var(--adminbar-h, 32px); } } /* === Mobile/Tablet (keine Sidebarbreite) — NUR wenn nicht im Elementor-Editor === */ @media (max-width:1024px){ body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe{ position: fixed; left: 0; right: 0; margin: 0 auto; width: fit-content; transform: translateY(-1rem); opacity: 0; pointer-events: none; transition: opacity 400ms cubic-bezier(.2,.7,.2,1), transform 400ms cubic-bezier(.2,.7,.2,1), top 400ms cubic-bezier(.2,.7,.2,1); border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0,0,0,.2); z-index: 9990; } body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe:focus-within{ top: 0; opacity: 1; pointer-events: auto; transform: translateY(0); } body.admin-bar:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe:focus-within{ top: var(--adminbar-h, 46px); /* mobil ist die Adminbar höher */ } } /* === A11y bleibt global aktiv (auch im Editor ok) === */ .inhaltsangabe a{ color: inherit; text-decoration: underline; } .inhaltsangabe a:focus{ outline: 2px solid #000; outline-offset: 4px; } /* === Bewegungsreduktion respektieren (nur live) === */ @media (prefers-reduced-motion: reduce){ body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe{ transition: none; transform: none; } body:not(.elementor-editor-active):not(.elementor-edit-mode) .inhaltsangabe:focus-within{ transform: none; } }