/* Schmiedehafen · Feier-Anlässe (28.10.2026): vier Bildkarten statt Textliste plus Fotocollage mit denselben Bildern.
   Jedes Foto erscheint nur einmal; Karten stehen fest im HTML (kein Skript nötig). Rechner: vier nebeneinander, Handy: wischbar. */
html.ab-home[data-abend] .ab-feiern-wrap{display:block}
html.ab-home[data-abend] .ab-feiern-wrap .ab-stack>p{max-width:46em}
.fx-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin:clamp(4px,1vw,14px) 0;width:100%;align-self:stretch;box-sizing:border-box}
.fx-card{display:block;position:relative;aspect-ratio:3/4;border-radius:18px;overflow:hidden;text-decoration:none!important;color:#fff!important;box-shadow:0 14px 34px -14px #000a;transition:transform .35s ease;outline-offset:3px}
.fx-card:hover{transform:translateY(-6px)}
.fx-card:focus-visible{outline:3px solid #b8743a}
.fx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.fx-card:hover img{transform:scale(1.05)}
.fx-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0000 45%,#000b)}
.fx-card span{position:absolute;z-index:2;left:18px;right:18px;bottom:16px;font:500 clamp(22px,1.9vw,28px)/1.15 'Playfair Display',Georgia,serif;color:#fff}
.fx-card span::after{content:" →";font-family:system-ui,-apple-system,sans-serif;font-size:.7em;opacity:.85}
@media(max-width:760px){
 .fx-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;margin-left:0;margin-right:0}
 .fx-cards::-webkit-scrollbar{display:none}
 .fx-card{flex:0 0 66%;scroll-snap-align:start;aspect-ratio:4/5}
}
@media (prefers-reduced-motion:reduce){.fx-card,.fx-card img{transition:none}.fx-card:hover{transform:none}.fx-card:hover img{transform:none}}

/* Korrektur (27.10.2026): Im gebündelten Startseiten-Stil wurde der Verweis auf den Körnungsfilter verbogen (url(#n) -> /assets/abend/#n).
   Ohne Filter erscheint die Körnung als fast deckende dunkle Fläche über der ganzen Seite. Hier wieder die Originalgrafik. */
html[data-abend] body::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12  0 0 0 0 .12  0 0 0 0 .10  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")!important}
.sm-grain{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")!important}