/* * GlamDog – Boho-Dekoration * ------------------------------------------------------------------ * Eine freigestellte Makramee-Feder liegt schraeg auf der Menueleiste * und wiegt sich wie im Luftzug. * * Reine Dekoration: aria-hidden im Markup, pointer-events aus. Sie * darf die Leiste bewusst ueberlagern. * * Zwei Ebenen, weil ein Element nur eine transform-Animation tragen * kann: * .deco-feather -> scroll-gekoppelte Drift (animation-timeline) * .deco-swing -> dauerhaftes Pendeln mit leichter 3D-Drehung * * Bild austauschen: nur --deco-feather anpassen. */ :root { --deco-feather: url("assets/deco-feather.png"); --splatter: url("assets/splatter.png"); } /* Zweite Spritzerlage ueber den Papierflaechen - versetzt und kleiner skaliert, damit sie sich nicht mit der Hintergrundlage deckt. "multiply" laesst dunkle Schrift unveraendert und toent nur die hellen Flaechen. */ body { position: relative; } body::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; background-image: var(--splatter); background-repeat: repeat; background-size: 880px 880px; background-position: 260px 140px; mix-blend-mode: multiply; opacity: 0.42; } /* Deko darf ueber den Rand hinausragen, ohne horizontales Scrollen zu erzeugen. "clip" statt "hidden": kein Scroll-Container, damit position: sticky und Scroll-Timelines weiter funktionieren. Beide Ebenen noetig, da der Viewport den Wert von uebernimmt. */ html, body { overflow-x: clip; } .deco { position: absolute; z-index: 6; pointer-events: none; } /* Feste Groesse: bei liegender Feder haengt die vertikale Mitte von der Elementhoehe ab, sonst wandert sie von der Leiste weg. */ .deco-feather { bottom: -2.3rem; left: clamp(1rem, 6vw, 5rem); width: 104px; aspect-ratio: 326 / 660; perspective: 620px; will-change: transform; } .deco-swing { display: block; width: 100%; height: 100%; background-image: var(--deco-feather); background-repeat: no-repeat; background-size: contain; transform-origin: 50% 50%; transform: rotate(108deg); filter: drop-shadow(0 10px 15px rgba(31, 35, 40, 0.34)); animation: feather-sway 7.5s ease-in-out infinite; will-change: transform; } @supports (animation-timeline: scroll()) { .deco-feather { animation: feather-drift linear both; animation-timeline: scroll(); animation-range: 0 420px; } } /* Pendeln um den Aufhaengepunkt, dazu eine leichte Drehung um die Hochachse - das laesst die Feder raeumlich wirken. */ @keyframes feather-sway { 0%, 100% { transform: rotate(104deg) rotate3d(0, 1, 0, -8deg); } 50% { transform: rotate(114deg) rotate3d(0, 1, 0, 12deg); } } @keyframes feather-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(12px, 38px, 0); } } /* Ab hier ruecken die Menuepunkte bis an den linken Rand - die Feder wandert in den freien Bereich neben das Logo. */ @media (max-width: 1080px) { .deco-feather { top: 0.4rem; bottom: auto; left: clamp(3rem, 5vw, 4.5rem); } } @media (max-width: 860px) { .deco-feather { left: 2.6rem; width: 80px; } } /* Unter dieser Breite bleibt neben den Menuepunkten kein Platz mehr - Lesbarkeit geht vor Dekoration. */ @media (max-width: 620px) { .deco-feather { display: none; } } @media (prefers-reduced-motion: reduce) { .deco-feather, .deco-swing { animation: none; } .deco-swing { transform: rotate(108deg); } } /* Hinweis ueber dem Newsletter-Container auf der News-Seite. */ .news-hinweis { width: min(1440px, calc(100% - 1.5rem)); margin: 0 auto 1.25rem; padding: 0.85rem 1.2rem; border-left: 4px solid #ff7fc0; border-radius: 0.5rem; background: #fdf9f1; box-shadow: 0 6px 14px rgba(31, 35, 40, 0.12); color: #2b2b2b; font-weight: 600; }