/* ========================================================================== Galerie-Effekte – gemeinsam für Startseite und Referenzseiten (28.10.2026) -------------------------------------------------------------------------- Eingebunden in index.php NUR auf: pages/system/home.php, den beiden Referenzseiten (verlegung-granitpflaster-referenzen-…-1/-2.php) und seit 29.10.2026 pages/granit/granitpflaster.php (nur Einblenden, siehe Dateiende). Hierher verschoben aus startseite-modern.css, damit beide Seiten dieselben Regeln nutzen (keine doppelte Logik). Wirkt auf .thumbnail-gallery und .main-gallery innerhalb von .content-area. - Einblenden beim Scrollen (vorhandenes scroll-hidden-System) - Hover nach Vorbild tramor.de (Zoom, Verlauf, Bildbeschreibung) Auf den Referenzseiten ersetzt der Hover die frühere Lupe (data-hover-zoom wurde dort entfernt); Produkt- und Preisseiten behalten die Lupe. ========================================================================== */ /* Einblenden beim Scrollen: nutzt das vorhandene System aus scroll-animations.js/.css (Klassen scroll-hidden fade-up in home.php und den Referenzseiten, gestaffelte Verzögerung je Spalte bleibt erhalten). Hier nur kürzerer Weg (20px statt 40px) und zügigere Dauer – wie auf tramor.de (Kundenwunsch). Nur Längsschreibweisen, damit die transition-delay der Staffelung bleibt. */ .content-area .thumbnail-gallery .scroll-hidden.fade-up, .content-area .main-gallery .scroll-hidden.fade-up { transition-property: opacity, transform; transition-duration: 0.8s; transition-timing-function: ease-out; } /* Untere Galerie-Reihen (Granit + Sandstein) 25 % langsamer als die 4 Fotos neben der Liste (Kundenwunsch 28.10.2026) */ .content-area .thumbnail-gallery .scroll-hidden.fade-up { transition-duration: 1s; } .content-area .thumbnail-gallery .scroll-hidden.fade-up:not(.scroll-show), .content-area .main-gallery .scroll-hidden.fade-up:not(.scroll-show) { transform: translateY(20px); } /* Hover (nur mit Maus): Foto zoomt ruhig auf 110 %, von unten blendet ein dunkler Verlauf ein und die Bildbeschreibung (data-caption) gleitet hoch – nachempfunden tramor.de „Inspiration & Referenzen" (Kundenwunsch). */ @media (hover: hover) and (pointer: fine) { .content-area .thumbnail-gallery a.ed-schatten-bilder, .content-area .main-gallery a.ed-schatten-bilder { position: relative; } /* main.css setzt img{transition:all .3s !important} – daher !important */ .content-area .thumbnail-gallery a.ed-schatten-bilder img, .content-area .main-gallery a.ed-schatten-bilder img { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important; } .content-area .thumbnail-gallery a.ed-schatten-bilder:hover img, .content-area .main-gallery a.ed-schatten-bilder:hover img { transform: scale(1.1) !important; /* grünen Hover-Rahmen aus ed-styles.css hier abschalten */ border-color: transparent !important; } /* Dunkler Verlauf von unten */ .content-area .thumbnail-gallery a.ed-schatten-bilder::before, .content-area .main-gallery a.ed-schatten-bilder::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0) 100%); opacity: 0; transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } /* Bildbeschreibung aus data-caption, max. 3 Zeilen */ .content-area .thumbnail-gallery a.ed-schatten-bilder::after, .content-area .main-gallery a.ed-schatten-bilder::after { content: attr(data-caption); position: absolute; left: 0; right: 0; /* Abstand unten über bottom statt padding – sonst lugt beim Kürzen auf 3 Zeilen die 4. Zeile im Innenabstand hervor */ bottom: 0.5rem; z-index: 2; padding: 0 0.6rem; color: #fff; font-size: 12px; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; opacity: 0; transform: translateY(1rem); transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .content-area .thumbnail-gallery a.ed-schatten-bilder:hover::before, .content-area .main-gallery a.ed-schatten-bilder:hover::before, .content-area .thumbnail-gallery a.ed-schatten-bilder:hover::after, .content-area .main-gallery a.ed-schatten-bilder:hover::after { opacity: 1; } .content-area .thumbnail-gallery a.ed-schatten-bilder:hover::after, .content-area .main-gallery a.ed-schatten-bilder:hover::after { transform: translateY(0); } /* Größere Fotos neben der Liste: etwas größere Schrift */ .content-area .main-gallery a.ed-schatten-bilder::after { font-size: 13px; bottom: 0.6rem; padding: 0 0.75rem; } } /* ========================================================================== Einblenden auf Produktseiten (29.10.2026, Kundenwunsch – zuerst /granitpflaster: kleine Sortenkarten + Verlegungsfotos). Erscheinen wie die Galerien der Startseite (in der Reihe leicht nacheinander), aber ruhiger: 2,5 s statt 1 s und 50 px Weg (Kundenwunsch 29.10.2026) und OHNE den Hover-Effekt oben – dort bleiben Lupe bzw. Karten-Anheben. Einschalten: Container bekommt .ed-einblend-reihe, seine direkten Kinder scroll-hidden fade-up (Auslöser: vorhandenes scroll-animations.js). „Bewegung reduzieren" regelt scroll-animations.css (sofort sichtbar). ========================================================================== */ .content-area .ed-einblend-reihe > .scroll-hidden.fade-up { transition-property: opacity, transform; transition-duration: 2.5s; transition-timing-function: ease-out; } .content-area .ed-einblend-reihe > .scroll-hidden.fade-up:not(.scroll-show) { /* 50 px statt 20 px: bei 2,5 s Dauer bleibt das Hochgleiten so gut sichtbar (gleiche Geschwindigkeit wie 20 px in 1 s auf der Startseite) */ transform: translateY(50px); } /* Staffelung: 6 pro Reihe (Computer) – Werte wie scroll-animations.css (.thumbnail-gallery) */ .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+1) { transition-delay: 0s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+2) { transition-delay: 0.08s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+3) { transition-delay: 0.16s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+4) { transition-delay: 0.24s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+5) { transition-delay: 0.32s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(6n+6) { transition-delay: 0.40s; } /* Handy: 3 pro Reihe */ @media (max-width: 767px) { .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(3n+1) { transition-delay: 0s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(3n+2) { transition-delay: 0.08s; } .content-area .ed-einblend-reihe > .scroll-hidden:nth-child(3n+3) { transition-delay: 0.15s; } }