/* SH Work — nur Layout, keine festen Projektpositionen.
   Kartenfarbe, Rundung, Padding und Typografie bleiben Elementor-Einstellungen.
   WordPress-Helfer liefert sh-work-highlight an den Loop-Wrapper.
   Kein dense: visuelle Reihenfolge bleibt identisch zur Lesereihenfolge. */
.sh-work.sh-section { width:100%; max-width:2560px; margin-inline:auto; box-sizing:border-box; }
.sh-work .e-con, .sh-work .elementor-widget { min-width:0; }
.sh-work p, .sh-work-card p { margin:0; }
.sh-work .sh-work-grid .elementor-loop-container { align-items:start; grid-auto-flow:row; }
.sh-work .sh-work-grid .elementor-loop-container > .e-loop-item { align-self:start; min-width:0; }
.sh-work .sh-work-grid .elementor-loop-container > .sh-work-highlight { grid-column:span 2; }
.sh-work-card.e-con { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); aspect-ratio:4 / 5; position:relative; isolation:isolate; min-height:0; }
.sh-work-highlight .sh-work-card { aspect-ratio:1; }
.sh-work-card > .sh-work-image, .sh-work-card > .sh-work-caption { grid-area:1 / 1; }
.sh-work-card > .sh-work-image { height:100%; min-height:0; width:100%; margin:0; align-self:stretch; }
.sh-work-image .elementor-widget-container { height:100%; }
.sh-work-image img { display:block; width:100%; height:100%; object-fit:cover; }
.sh-work-card > .sh-work-caption { align-self:end; z-index:1; width:100%; }
.sh-work-title { flex:1; min-width:0; }
.sh-work-title .elementor-heading-title { overflow-wrap:anywhere; }
.sh-work-title a::after { content:""; position:absolute; inset:0; z-index:2; }
.sh-work-arrow { flex:0 0 auto; }
.sh-work-title a:focus-visible { outline:2px solid #F0FE46; outline-offset:4px; }
.sh-work-card:focus-within { outline:3px solid #F0FE46; outline-offset:4px; }
.sh-work-filter .e-filter { flex-wrap:wrap; justify-content:flex-start; gap:8px; }
.sh-work-filter .e-filter-item { border:0; border-radius:999px; padding:8px 16px; background:#EDEDED; color:#171717; font:400 13px/1.4 "DM Mono",monospace; }
.sh-work-filter .e-filter-item[aria-pressed="true"] { background:#171717; color:#FFFFFF; }
.sh-work .e-load-more-anchor { scroll-margin-top:32px; }
.sh-work-grid .elementor-button-wrapper { text-align:right; margin-top:32px; }
.sh-work-grid .elementor-button { background:#171717; color:#FFFFFF; border-radius:999px; padding:12px 32px; font:500 16px/1.4 "Neue Montreal",sans-serif; }
@media(max-width:900px) { .sh-work.sh-section { padding-left:18px; padding-right:18px; } }
@media(max-width:767px) {
 .sh-work .sh-work-grid .elementor-loop-container > .sh-work-highlight { grid-column:span 1; }
}
/* Bei abweichenden Elementor-Mobile-Breakpoints 767 entsprechend anpassen. */

/* v2: Video overlays only the picture; Elementor caption stays above it.
   Image remains underneath while video loads or playback is blocked. */
.sh-work-card > .sh-work-video {
 position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
 object-position:var(--sh-video-position,50% 50%); opacity:0; pointer-events:none; z-index:0;
}
.sh-work-card.sh-video-playing > .sh-work-video { opacity:1; }
@media (hover:none), (pointer:coarse), (prefers-reduced-motion:reduce) {
 .sh-work-card > .sh-work-video { display:none; }
}

/* 1.3.1: Definite image layer, independent of intrinsic image height and
   Elementor's default height:auto. Card itself keeps the responsive ratio.
   Supports optimized Image markup, widget containers, links and picture. */
.sh-work-card.e-con { position:relative; overflow:hidden; }
.sh-work-card .sh-work-image.elementor-widget {
 position:absolute !important; inset:0 !important;
 width:100% !important; height:100% !important;
 max-width:none; min-width:0; min-height:0;
 margin:0 !important; padding:0; z-index:0;
}
.sh-work-card .sh-work-image .elementor-widget-container,
.sh-work-card .sh-work-image a,
.sh-work-card .sh-work-image picture {
 display:block; width:100%; height:100%; margin:0;
}
.sh-work-card .sh-work-image img {
 display:block; width:100% !important; height:100% !important;
 max-width:none; max-height:none;
 object-fit:cover !important;
 object-position:var(--sh-image-position,50% 50%);
}
/* Keep text above the image and hover-video layers. */
.sh-work-card > .sh-work-caption { z-index:2; }