:root { --c-home:#477d9b; --s-home:rgba(171,191,201,1); --c-morgan:#6e775c; --s-morgan:rgba(110,119,92,1); --c-lyrix:#8e7168; --s-lyrix:rgba(142,113,104,0.7); --c-foto:#757575; --s-foto:rgba(140,140,140,1); --c-grafix:#957779; --s-grafix:rgba(149,119,121,0.7); --c-ai:#768e72; --s-ai:rgba(118,142,114,1); --c-daz:#996996; --s-daz:rgba(153,105,150,0.7); --c-shadowlands:#89949d; --s-shadowlands:rgba(137,148,157,1); --c-magix:#6b657f; --s-magix:rgba(138,129,161,0.9); --c-tolkien:#867d6a; --s-tolkien:rgba(134,125,106,0.8); --c-avalon:#979d85; --s-avalon:rgba(151,157,133,1); }
.schatten { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-home); }
.schatten-morgan { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-morgan); }
.schatten-lyrix { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-lyrix); }
.schatten-foto { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-foto); }
.schatten-grafix { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-grafix); }
.schatten-ai { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-ai); }
.schatten-daz { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-daz); }
.schatten-shadowlands { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-shadowlands); }
.schatten-magix { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-magix); }
.schatten-tolkien { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-tolkien); }
.schatten-avalon { text-shadow:1px 1px 1px rgba(250,250,250,1), 3px 3px 3px var(--s-avalon); }
.home { color:var(--c-home); --b-farbe:var(--c-home); --b-schatten:var(--s-home); }
.morgan { color:var(--c-morgan); --b-farbe:var(--c-morgan); --b-schatten:var(--s-morgan); }
.lyrix { color:var(--c-lyrix); --b-farbe:var(--c-lyrix); --b-schatten:var(--s-lyrix); }
.foto { color:var(--c-foto); --b-farbe:var(--c-foto); --b-schatten:var(--s-foto); }
.grafix { color:var(--c-grafix); --b-farbe:var(--c-grafix); --b-schatten:var(--s-grafix); }
.ai { color:var(--c-ai); --b-farbe:var(--c-ai); --b-schatten:var(--s-ai); }
.daz { color:var(--c-daz); --b-farbe:var(--c-daz); --b-schatten:var(--s-daz); }
.shadowlands { color:var(--c-shadowlands); --b-farbe:var(--c-shadowlands); --b-schatten:var(--s-shadowlands); }
.magix { color:var(--c-magix); --b-farbe:var(--c-magix); --b-schatten:var(--s-magix); }
.tolkien { color:var(--c-tolkien); --b-farbe:var(--c-tolkien); --b-schatten:var(--s-tolkien); }
.avalon { color:var(--c-avalon); --b-farbe:var(--c-avalon); --b-schatten:var(--s-avalon); }
.galerie-wrapper.home { --k-farbe: var(--c-home); } .galerie-wrapper.morgan { --k-farbe: var(--c-morgan); } .galerie-wrapper.lyrix { --k-farbe: var(--c-lyrix); } .galerie-wrapper.foto { --k-farbe: var(--c-foto); } .galerie-wrapper.grafix { --k-farbe: var(--c-grafix); } .galerie-wrapper.ai { --k-farbe: var(--c-ai); } .galerie-wrapper.daz { --k-farbe: var(--c-daz); } .galerie-wrapper.shadowlands { --k-farbe: var(--c-shadowlands); } .galerie-wrapper.magix { --k-farbe: var(--c-magix); } .galerie-wrapper.tolkien { --k-farbe: var(--c-tolkien); } .galerie-wrapper.avalon { --k-farbe: var(--c-avalon); }
.galerie-wrapper { position: relative; width: 100%; box-sizing: border-box; padding: 15px 60px; --abstand: 10px; z-index: 0; }
.bild-slide { display: flex; gap: var(--abstand); overflow-x: scroll; scroll-behavior: smooth; white-space: nowrap; scrollbar-width: none; z-index: 2; position: relative; }
.bild-slide::-webkit-scrollbar { display: none; }
.bild-slide img { width: 100%; height: auto; display: block; border-radius: 4px; transform: scale(1); backface-visibility: hidden; will-change: transform, filter; transition: transform 0.4s ease, filter 0.9s ease; }
.bild-slide a { display: inline-block; overflow: hidden; flex: 0 0 calc(25% - (var(--abstand) * 3 / 4)); position: relative; border-radius: 4px; box-sizing: border-box; }
.bild-slide a::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid transparent; background: linear-gradient(180deg, #fff 0%, var(--b-farbe, var(--c-home)) 50%, #fff 100%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; border-radius: 4px; }
.bild-slide a:hover img { transform: scale(1.05); filter: grayscale(100%); }
.nav-pfeil { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: 1px solid transparent; background: linear-gradient(135deg, var(--b-farbe, var(--c-home)), #fff) padding-box, linear-gradient(135deg, #fff, var(--b-farbe, var(--c-home))) border-box; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; width: 45px; height: 65px; cursor: pointer; display: flex; align-items: center; font-size: 20px; transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); box-shadow: 1px 1px 2px rgba(250,250,250,1), 2px 2px 7px rgba(0,0,0,1); opacity: 1; text-shadow: -1px -1px 0 var(--b-farbe, var(--c-home)), 1px -1px 0 var(--b-farbe, var(--c-home)), -1px 1px 0 var(--b-farbe, var(--c-home)), 1px 1px 0 var(--b-farbe, var(--c-home)); }
.pfeil-links { left: 0px; border-radius: 40px 0 0 40px; justify-content: flex-end; padding-right: 12px; }
.pfeil-rechts { right: 0px; border-radius: 0 40px 40px 0; justify-content: flex-start; padding-left: 12px; }
.nav-pfeil:hover { background: linear-gradient(135deg, #fff, var(--b-farbe, var(--c-home))) padding-box, linear-gradient(135deg, var(--b-farbe, var(--c-home)), #fff) border-box; box-shadow: 1px 1px 2px rgba(250,250,250,1), 2px 2px 7px rgba(0,0,0,1); color: #fff; z-index: 3; opacity: 0.7; }
.galerie-wrapper::after { content: ""; position: absolute; top: 0; bottom: 0; left: 45px; right: 45px; border: 1px solid var(--k-farbe, var(--c-home)); background: linear-gradient(180deg, var(--k-farbe, var(--c-home)) 0%, #fff 50%, var(--k-farbe, var(--c-home)) 100%); pointer-events: none; z-index: 1; box-shadow: 1px 1px 2px rgba(250,250,250,1), 2px 2px 7px rgba(0,0,0,1); }
@media (max-width: 1100px) { .bild-slide a { flex: 0 0 calc(33.33% - (var(--abstand) * 2 / 3)); } }
@media (max-width: 768px) { .bild-slide a { flex: 0 0 calc(50% - (var(--abstand) * 1 / 2)); } }
@media (max-width: 480px) { .galerie-wrapper { padding: 5px 45px; } .galerie-wrapper::after { left: 40px; right: 40px; } .nav-pfeil { width: 35px; height: 50px; font-size: 16px; z-index: 3; } .pfeil-links { left: 5px; padding-right: 5px; } .pfeil-rechts { right: 5px; padding-left: 5px; } .bild-slide a { flex: 0 0 75%; } }