/* Galerie Before/After Styles – nutzt das fixe Layout der Subpages. Nur inhaltsspezifische Ergänzungen. */
body.gallery-page .before-after-gallery { margin-top: 0.8rem; }
body.gallery-page .card h1.page-title { text-align: center; margin: 0 0 1.4rem; padding-bottom: .6rem; position: relative; }
body.gallery-page .card h1.page-title::after { content: ''; display: block; width: 90px; height: 3px; background: #F1D09A; margin: .6rem auto 0; border-radius: 2px; }

/* Remove the small orange underline on small screens (mobile load artifact) */
@media (max-width: 680px) {
  body.gallery-page .card h1.page-title::after {
    display: none !important;
    background: transparent !important;
  }
}

/* Embed helpers: vorher/nachher + externe Inhalte */
.embed-item { width: 100%; }
.embed-block { width: 100%; display: block; box-sizing: border-box; }
.embed-block.embed-16x9 { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.embed-block.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Instagram Raw (natürliche Höhe) */
/* Entfernte embed-fill & kapsel Stile für native Instagram Darstellung */

/* Instagram responsive iframe Container */
.instagram-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: #0e1822;
  /* Reserve vertical space while Instagram embed script is processing */
  min-height: 280px;
}

/* ================= Safety guard for third-party embeds ================= */
/* Prevent injected Instagram markup from taking over the viewport (fixed/fullscreen)
   and cap embedded media to a sane maximum so it doesn't cover the whole site. */
.embed-item .instagram-container,
.embed-item blockquote.instagram-media,
.embed-item .instagram-embed {
  /* Keep third-party blockquote/container elements in normal flow to avoid
     fixed/fullscreen overlays; allow iframes/videos to be positioned inside
     their ratio wrappers (see dedicated rules below). */
  position: static !important;
  max-width: 100% !important;
  width: 100% !important;
  max-height: 80vh !important;
  height: auto !important;
  overflow: visible !important;
  z-index: auto !important;
}

/* Also ensure inner elements Instagram may add (iframes/divs) cannot be fixed or full-bleed */
.embed-item .instagram-container * {
  position: static !important;
  max-width: 100% !important;
  max-height: 80vh !important;
  box-sizing: border-box !important;
}

/* If an iframe has inline width/height attributes, prefer CSS limits */
.embed-item iframe[width], .embed-item iframe[height] {
  width: 100% !important;
  height: auto !important;
}

.instagram-container iframe {
  display: block;
  width: 100%;
  border: none;
  /* Aspect-Ratio wird über Klassen gesetzt: .aspect-4x5, .aspect-9x16, .aspect-1x1 */
}

/* Ensure real media (iframes/videos) fill their ratio wrappers instead of
   being forced into static inline flow which can cause them to render at a
   reduced size (e.g. appearing as a quarter). */
.embed-item iframe,
.embed-item video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  border: 0 !important;
  object-fit: contain !important;
}
/* Aspect Varianten */
.instagram-container.aspect-4x5 iframe { aspect-ratio: 4 / 5; }
.instagram-container.aspect-9x16 iframe { aspect-ratio: 9 / 16; }
.instagram-container.aspect-1x1 iframe { aspect-ratio: 1 / 1; }
/* Fallback für ältere Browser ohne aspect-ratio Support */
@supports not (aspect-ratio: 1 / 1) {
  /* Fallback: verschiedene Seitenverhältnisse über padding-top */
  .instagram-container { position: relative; width:100%; }
  .instagram-container.aspect-9x16 { padding-top: 177.78%; }
  .instagram-container.aspect-4x5 { padding-top: 125%; }
  .instagram-container.aspect-1x1 { padding-top: 100%; }
  .instagram-container iframe {
    position:absolute; inset:0; width:100%; height:100%; border:0;
  }
}

/* Mobile Anpassung: Nur Breite der Instagram-Embeds sicherstellen, Layout bleibt fixed (Card scrollt intern). */
@media (max-width: 740px) {
  body.gallery-page .card blockquote.instagram-media { width: 100% !important; max-width: 100% !important; }
  .instagram-container { max-width: 100%; border-radius: 0; }
}
/* Hybrid-Layout: Nur Galerie-Detailseiten wechseln auf normalen Flow auf kleinen Screens,
   damit Instagram-Embeds vollständige Höhe erhalten. Desktop bleibt fixed. */
@media (max-width: 1024px) {
  /* Mobile / Tablet: Card bleibt fixed und scrollt intern; Footer fixed am Viewport-Boden */

/* Further mobile cleanup: remove capsule chrome so panels sit flush and captions overlay
   without creating extra framed area under images. */
@media (max-width: 680px) {
  /* Keep capsule visual on small screens but reduce padding and radius slightly
     so the before/after pair still appears as a single card (user requested). */
  .ba-pair.kapsel {
    padding: 0.4rem !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)) !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    box-shadow: 0 8px 24px rgba(6,10,16,0.35) !important;
    border-radius: 12px !important;
  }
  /* Panels should be full-width on small screens */
  .ba-panel { display:block !important; width:100% !important; max-width:100% !important; border-radius:12px !important; }
  .ba-panel img { width:100% !important; height:auto !important; object-fit:cover !important; }
  .ba-panel {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    overflow: hidden !important;
  }
  /* Ensure picture/img use full width and don't leave gaps */
  .ba-panel picture, .ba-panel img { width: 100% !important; height: auto !important; display: block !important; }
  /* Figcaption overlay - ensure no extra height is contributed */
  .ba-panel figcaption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: .6rem .75rem !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.08)) !important;
    color: #fff !important;
    border-top: none !important;
    text-align: left !important;
    font-size: .9rem !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
  }
  /* Remove any bottom margin on the panel that could produce a framed strip */
  .ba-panel + .ba-panel, .ba-panel + .ba-connector { margin-top: 0 !important; }
}

/* Final strong mobile overrides: placed at file end to ensure precedence.
   These rules forcibly remove any capsule/card chrome on small screens and
   guarantee the caption overlays the image without adding extra layout height. */
@media (max-width: 680px) {
  /* Don't strip the capsule chrome here — keep panels visually grouped.
     Only neutralize inner panel elements to avoid unexpected decorations. */
  .ba-panel,
  .ba-panel * {
    box-shadow: none !important;
    background: transparent !important;
  }
  .ba-panel {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
  }
  .ba-panel picture, .ba-panel img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ba-panel figcaption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    padding: .6rem .75rem !important;
    background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.02)) !important;
    color: #fff !important;
    border-top: none !important;
    text-align: left !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
  }
  /* Remove any pseudo element decorations */
  .ba-panel::before, .ba-panel::after { content: none !important; display: none !important; }
  /* Connector spacing tweak to avoid vertical gap */
  .ba-connector { margin: 0 !important; }
}

/* ===================== Gallery Card: image defines frame, caption overlay ===================== */
/* Apply the card pattern to existing .ba-panel markup so no HTML changes are required */
.ba-panel {
  position: relative !important;
  width: 100% !important;
  max-width: 520px !important;
  border-radius: 20px !important;
  overflow: hidden !important; /* wichtig: Container clippt Bild */
  box-sizing: border-box !important;
  background: #000 !important; /* verhindert helle Lücken beim Laden */
  aspect-ratio: 4 / 3; /* gewünschtes Verhältnis; passt sich responsiv an */
  display: block !important;
  margin: 0 auto !important;
}

/* Image inside the panel: fills container and uses object-fit */
.ba-panel img,
.ba-panel picture img,
.ba-panel picture > img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* Bild füllt Container */
  border-radius: inherit !important; /* gleicher Radius wie Container */
}

/* Remove any inline width/height attributes influence */
.ba-panel img[width], .ba-panel img[height] {
  width: 100% !important;
  height: 100% !important;
}

/* Overlay caption */
.ba-panel figcaption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 16px 20px !important;
  border-radius: inherit !important;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0.7) 100%) !important;
  color: #fff !important;
  display: flex !important;
  align-items: flex-end !important;
  min-height: 34% !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* Ensure figcaption sits inset from the image edges (left/right/bottom) and doesn't touch the image border */
.ba-panel figcaption {
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,0.45) !important;
  max-width: calc(100% - 24px) !important;
}

/* Mobile: slightly smaller inset */
@media (max-width: 680px) {
  .ba-panel figcaption {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    font-size: .92rem !important;
  }
}

/* Mobile-Finetune: optional anderes Verhältnis auf Handy */
@media (max-width: 480px) {
  .ba-panel { aspect-ratio: 1 / 1 !important; max-width: 100% !important; }
}

/* Fallback ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .ba-panel::before { content: ""; display: block; padding-top: 75%; } /* 4:3 */
  .ba-panel img { position: absolute !important; inset: 0 !important; }
}

/* Ensure connector and surrounding layout don't force extra space */
.ba-pair { align-items: start !important; }
.ba-connector { align-self: center !important; }

/* Remove any explicit heights on parent containers that could clip image */
.embed-item, .ba-item, .detail-bagroup, .embed-grid { height: auto !important; max-height: none !important; overflow: visible !important; }

/* End of card-pattern overrides */
  body.gallery-detail { overflow: hidden !important; }
  body.gallery-detail #wrapper { position: fixed !important; inset: 0 !important; height: 100dvh !important; width: 100% !important; }
  body.gallery-detail .page { position: fixed !important; inset: 0 !important; display: grid !important; place-items: center !important; padding: var(--pad-y,1.15rem) var(--pad-x,0.9rem) !important; }
  /* Card zentriert, mit angepasster Max-Höhe (Platz für Footer) und internem Scroll */
  body.gallery-detail .card {
    position: relative !important;
    width: min(900px,95vw) !important;
    margin: 0 auto !important;
    max-height: calc(100dvh - 2 * var(--pad-y, 1.15rem) - var(--footer-h, 5.8rem)) !important;
    overflow: auto !important;
  }
  /* Footer fixieren, damit er beim Scrollen nicht nach oben wandert */
  body.gallery-detail footer#footer { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 180 !important; width: 100% !important; }
  /* Sicherstellen, dass Inhalte innerhalb der Card nicht vom Footer verdeckt werden */
  body.gallery-detail .card { padding-bottom: 0.6rem !important; }
  /* Instagram container weiterhin responsive innerhalb der Card */
  body.gallery-detail .instagram-container { max-width: 100% !important; }
  body.gallery-detail blockquote.instagram-media { width:100% !important; max-width:100% !important; min-height:auto !important; }
  body.gallery-detail .embed-item { overflow:visible !important; max-height:none !important; }
  body.gallery-detail .embed-grid { overflow:visible !important; max-height:none !important; }
  /* Entferne mögliche inner-scroll Fallen */
  body.gallery-detail .card::-webkit-scrollbar { display:none; }
}
.ba-pair {
  display: grid;
  /* Drei Spalten: Vorher | Connector | Nachher
     Verwende auto für die Panels, damit das Bild die Spaltenbreite bestimmt */
  grid-template-columns: auto 56px auto;
  align-items: start;
  gap: 1rem;
  width: 100%;
  max-width: min(1100px, calc(100vw - 2rem));
  margin: 0 auto;
}
.ba-pair.kapsel {
  padding: 0.6rem; /* inner padding for capsule */
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(6,10,16,0.45);
}
.ba-panel {
  position: relative;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 22px -4px rgba(0,0,0,0.18);
  display: inline-block; /* let the panel size to its content (image) */
  width: auto;
  max-width: min(720px, 48vw); /* cap maximum frame size */
}

/* Wenn ein Panel als Portrait erkannt wurde: feste, schmalere Spalte (zeigt Bild hochkant) */
.ba-panel.portrait {
  flex: 0 0 min(360px, 34vw);
}

/* Landscape-Panels bleiben flexibel und füllen den Rest */
.ba-panel:not(.portrait) {
  flex: 1 1 0;
}

/* Connector pill (visuelle Verbindung zwischen Vorher/Nachher) */
.ba-connector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  min-width: 56px;
  height: 56px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(241,208,154,0.12), rgba(241,208,154,0.04));
  border: 1px solid rgba(241,208,154,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  margin: auto 0;
}
.ba-connector svg { width: 22px; height: 22px; display:block; }
@media (max-width:860px){ .ba-connector{ width:44px; height:44px; } }
.ba-panel picture,
.ba-panel img {
  display: block;
  width: auto; /* image defines width */
  max-width: 100%;
  height: auto;
}
.ba-panel img {
  object-fit: cover;
  object-position: center;
  height: auto;
  max-height: none;
}
/* Caption as overlay inside the image for all viewports */
.ba-panel figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: .86rem;
  letter-spacing: .2px;
  font-weight: 600;
  text-transform: none;
  padding: .6rem .85rem;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.02));
  color: #fff;
  border-top: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-align: left;
}

/* .ba-pair remains as the visual wrapper */
.ba-pair { position: relative; }

/* Small screens: show only a single chevron/down-arrow connector */
@media (max-width: 640px) {
  .ba-pair { display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .ba-panel.before { grid-row: 1; margin: 0 0 .75rem !important; }
  /* center connector and add a bit more breathing room above/below */
  .ba-connector { grid-row: 2; margin: 0 auto .75rem !important; width: 46px; height: 46px; display:flex; align-items:center; justify-content:center; align-self:center !important; }
  .ba-panel.after { grid-row: 3; }
  .ba-panel { margin: 0; }
  .ba-connector svg { width: 18px; height: 18px; transform: rotate(90deg); }
  .ba-panel img { max-height: none; }
  .ba-panel.portrait img { object-fit: contain; max-height: none; }
}

/* Mobil: Stapeln untereinander mit Connector zwischen den Bildern */
@media (max-width: 736px) {
  .ba-pair {
    display: grid;
    grid-template-columns: 1fr; /* eine Spalte */
    grid-template-rows: auto auto auto; /* before | connector | after */
    align-items: start;
    gap: 0; /* vertikale Abstände über Margins steuern */
  }
  .ba-panel.before { grid-row: 1; margin: 0 0 .5rem; }
  .ba-panel.before { grid-row: 1; margin: 0 0 .5rem !important; }
  .ba-connector { grid-row: 2; margin: 0 auto .75rem !important; display:flex; align-items:center; justify-content:center; align-self:center !important; }
  .ba-panel.after { grid-row: 3; }
  .ba-panel { margin: 0; }
  .ba-connector { width: 50px; height: 50px; }
  .ba-connector svg { width: 20px; height: 20px; transform: rotate(90deg); }
  .ba-panel img { max-height: none; }
  .ba-panel.portrait img { object-fit: contain; max-height: none; }
}
/* .ba-comparison.is-ready wird per JS gesetzt (kein eigener Stil nötig, Platzhalter entfernt) */

/* Veraltete Klassen aus Slider-Version werden nicht mehr genutzt: .ba-comparison, .ba-image.before/after */
/* Falls alte Markupreste vorhanden sind, neutralisieren: */
.ba-comparison, .ba-handle, .ba-handle-line, .ba-range, .ba-label { display: none !important; }

/* Entfernte Slider-Dekorationen werden ausgeblendet */

/* Range/Handle entfernt */

/* Labels */
/* Labels durch figcaption ersetzt */

/* Progressive Enhancement Fallback (ohne JS): zeigt beide Bilder untereinander */
/* No-JS Fallback identisch (rein statisch); spezielle Regeln entfallen */

/* Responsive Tweaks */
@media (max-width: 640px) {
  .ba-title { font-size: clamp(0.95rem, 3.2vw, 1.1rem); }
  .before-after-gallery { gap: 1.6rem; }
}
@media (max-width: 420px) {
  .before-after-gallery { gap: 1.2rem; }
  .ba-title { font-size: 1rem; }
}

/* Larger vertical spacing between pairs on wide screens is handled via grid gap; remove duplicate margin */
@media (min-width: 840px) {
  .ba-item { margin-bottom: 0; }
}

/* Visible separator line between items: placed centrally in the vertical gap using --item-gap */
.detail-bagroup, .embed-grid {
  --item-gap: 3.2rem;
  display: grid;
  gap: var(--item-gap);
}

/* Ensure individual items don't add extra bottom margin that would duplicate spacing */
.detail-bagroup > .ba-item,
.embed-grid > .embed-item { margin: 0; }
@media (max-width: 840px){
  .detail-bagroup, .embed-grid { --item-gap: 2.8rem; }
}
@media (max-width: 680px){
  .detail-bagroup, .embed-grid { --item-gap: 2.2rem; }
}

/* ================= Neue Drilldown Galerie (Übersicht + Detail) ================= */
.gallery-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.4rem 1.6rem;
  margin: .4rem 0 1.2rem;
  padding: 0;
}
.gallery-cat-grid { align-items: stretch; }
.gallery-cat-tile {
  position: relative;
  cursor: pointer;
  padding: 0; border: none; background: none; text-align: left; font: inherit; color: inherit;
  isolation: isolate;
}
.gallery-cat-tile { display: flex; flex-direction: column; height: 100%; }
.gallery-cat-tile:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; border-radius: 16px; }
.gallery-cat-tile .cat-figure { margin:0; position:relative; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); box-shadow:0 10px 28px -6px rgba(0,0,0,0.45); min-height: 220px; height:100%; }
.gallery-cat-tile img { width:100%; height:auto; /* allow proportional scaling */ object-fit:unset; display:block; filter:saturate(1.05) brightness(.98); transition: transform .5s ease, filter .5s ease; flex: 0 0 auto; }
.gallery-cat-tile figcaption { padding: .85rem .95rem 1.05rem; backdrop-filter: blur(8px) saturate(160%); -webkit-backdrop-filter: blur(8px) saturate(160%); background:linear-gradient(145deg,rgba(20,32,44,0.62),rgba(18,27,36,0.72)); color:#fff; position:relative; display:flex; flex-direction:column; }
.gallery-cat-tile .cat-figure > img { display:block; }

/* Anchor the short description to the bottom so all descriptions align */
.gallery-cat-tile figcaption p { margin-top: auto; margin-bottom: 0.45rem; line-height:1.28; }

/* Ensure the visual bottom padding is consistent across cards */
.gallery-cat-tile .cat-figure { padding-bottom: 0.6rem; }

/* Make sure all grid items stretch to same height and captions don't overflow */
.gallery-cat-grid > * { height: 100%; }

/* Provide a gentle minimum height so small screens keep readable cards */
.gallery-cat-tile { min-height: 260px; }
/* Remove visual chrome (background/border/shadow) but preserve sizing and spacing
   so images remain in their original layout. We intentionally DO NOT reset padding,
   min-height or height here. */
.gallery-cat-grid .gallery-cat-tile,
.gallery-cat-grid .gallery-cat-tile .cat-figure {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  /* keep padding/min-height/height from the earlier rules so layout is unchanged */
}
/* Ensure figure keeps the original sizing so the image stays in place */
.gallery-cat-grid .gallery-cat-tile .cat-figure { min-height: 220px !important; height: 100% !important; }
.gallery-cat-grid .gallery-cat-tile img, .gallery-cat-grid .gallery-cat-tile .cat-figure > img { width: 100% !important; height: auto !important; display:block !important; object-fit: unset !important; }

/* New simpler markup: .cat-media and .cat-caption */
.gallery-cat-tile .cat-media { width: 100%; overflow: hidden; display:block; }
.gallery-cat-tile .cat-media img { display:block; width:100%; height:auto; object-fit:unset; }
.gallery-cat-tile .cat-caption { padding: .6rem 0 .9rem; color:#fff; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; margin:0 !important; }
.gallery-cat-tile .cat-caption h2 { margin:0; font-size:1rem; font-weight:600; text-align:center !important; }
.gallery-cat-tile .cat-caption p { margin: .25rem 0 0; font-size:.86rem; opacity:.9; text-align:center !important; }

/* Gallery overview: captions under the image, no background, white centered text */
.gallery-cat-grid .gallery-cat-tile figcaption {
  position: static !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  text-align: center !important;
  display: block !important;
  padding: .6rem 0 .9rem !important;
  margin: 0 !important;
  font-weight: 600 !important;
}

/* Ensure caption paragraphs don't add extra bottom spacing and are centered */
.gallery-cat-grid .gallery-cat-tile figcaption p { margin: 0 !important; text-align: center !important; }
/* Ensure the page-content wrapper on gallery overview centers content similar to the previous .card
   so that gallery grids lay out side-by-side. Visual chrome (background/shadow) is not applied. */
/* page-content and grid layout restored to original structure; temporary overrides removed */
.gallery-cat-tile h2 { font-size: clamp(0.95rem,2.2vw,1.15rem); margin:0 0 .28rem; letter-spacing:.3px; text-align:center; line-height:1.06; hyphens:auto; }
.gallery-cat-tile p { font-size:.72rem; line-height:1.25; margin:0; opacity:.88; }
.gallery-cat-tile:hover img, .gallery-cat-tile:focus-visible img { transform: scale(1.06); filter:saturate(1.18) brightness(1.05); }
.gallery-cat-tile {
  position: relative;
  cursor: pointer;
  padding: 0; background: none; text-align: left; font: inherit; color: inherit;
  isolation: isolate; display:block; height:100%;
  border-radius: 16px;
  overflow: hidden; /* clip children and pseudo-elements */
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 10px 28px -6px rgba(0,0,0,0.45);
}
.gallery-cat-tile:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; border-radius: 16px; }
.gallery-cat-tile .cat-figure { margin:0; position:static; border-radius:0; overflow:visible; display:block; background:transparent; border:none; box-shadow:none; height:auto; min-height:0; isolation:isolate; }
.gallery-cat-tile .cat-figure img { position:static; width:100%; height:auto; object-fit:unset; display:block; filter:saturate(1.05) brightness(.98); transition: transform .6s ease, filter .6s ease; }
.gallery-cat-tile .cat-figure::before { content:''; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(8,14,22,0.15) 0%, rgba(12,20,30,0.35) 40%, rgba(12,22,34,0.55) 65%, rgba(14,24,36,0.72) 78%, rgba(18,30,42,0.88) 94%, rgba(18,30,42,0.94) 100%); pointer-events:none; }
/* Weicher Maskenrand unten gegen harte Ecken */
.gallery-cat-tile .cat-figure::after { content:''; position:absolute; left:0; right:0; bottom:0; height:22px; background:linear-gradient(to top, rgba(18,30,42,0.95), rgba(18,30,42,0)); pointer-events:none; }
.gallery-cat-tile figcaption { position:static; padding:.6rem 0 .9rem; display:block; text-align:center; color:#fff; }
.gallery-cat-tile figcaption h2 { font-size: clamp(0.9rem,2.1vw,1.07rem); margin:0; letter-spacing:.32px; line-height:1.07; color:#fff; text-shadow:none; hyphens:auto; }
.gallery-cat-tile figcaption p { margin:.25rem 0 0; line-height:1.22; font-size:.78rem; color:rgba(255,255,255,0.9); text-shadow:none; }
.gallery-cat-tile:hover .cat-figure img, .gallery-cat-tile:focus-visible .cat-figure img { transform:scale(1.08); filter:saturate(1.25) brightness(1.05); }
.gallery-cat-grid > .gallery-cat-tile { min-height: auto; }

/* Make all overview tiles use a uniform media box so images appear the same size.
  Images inside are scaled with object-fit:contain so they are never cropped. */
.gallery-cat-tile { display:flex; flex-direction:column; }
.gallery-cat-tile .cat-media { width:100%; aspect-ratio: 4/3; overflow:hidden; background:#0e1822; display:block; padding:0; }
/* Modern look: blurred/background fill (from --cover) + centered contained image */
.gallery-cat-tile .cat-media {
  width:100%; aspect-ratio: 4/3; overflow:hidden; background:#0e1822; display:flex; align-items:center; justify-content:center;
  position:relative;
}
.gallery-cat-tile .cat-media::before{
  content:''; position:absolute; inset:0; background-repeat:no-repeat; background-size:cover; background-position:center; filter: blur(14px) saturate(1.05) brightness(.85); transform: scale(1.06); opacity:.55;
  /* use CSS variable set by JS (fallback to none) */
  background-image: var(--cover, none);
  pointer-events:none;
}
.gallery-cat-tile .cat-media img { position:relative; z-index:2; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover !important; object-position:center 45% !important; display:block; border-radius:0 !important; }

/* ---- New card layout as requested (compatible with existing grid) ---- */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.gallery .card, .gallery-cat-grid .gallery-cat-tile { position: relative; width: 100%; border-radius: 18px; overflow: hidden; background: #000; }
.gallery .card { aspect-ratio: 4 / 3; }

/* Default: fill the box and crop a little for consistent look */
.gallery .card img, .gallery-cat-grid .gallery-cat-tile .cat-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; transition: transform 0.4s ease; }

/* Provide optional aspect hints when JS tags images as wide or tall */
.gallery .card img.wide, .gallery-cat-grid .gallery-cat-tile .cat-media img.wide { /* visually wider subjects */
  object-position: center 40%;
}
.gallery .card img.tall, .gallery-cat-grid .gallery-cat-tile .cat-media img.tall { /* tall portraits */
  object-position: center top; /* show top area (e.g. faces) */
}

/* Mobile: make tiles square for denser layout and reduce cropping by centering */
@media (max-width: 600px) {
  .gallery .card, .gallery-cat-grid .gallery-cat-tile { aspect-ratio: 1 / 1; }
  .gallery .card img, .gallery-cat-grid .gallery-cat-tile .cat-media img { object-position: center; }
}

/* Overlay */
.gallery .overlay, .gallery-cat-grid .gallery-cat-tile .cat-caption {
  position: static;
  padding: 10px 14px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  text-align: center;
  z-index: 3;
}

/* Avoid setting fixed heights anywhere — rely on aspect-ratio + object-fit */

.gallery-detail-bar { display:flex; align-items:center; gap:.85rem; margin: 0 0 1rem; }
.gallery-detail-bar .back-btn { display:inline-flex; align-items:center; gap:.55rem; background:rgba(255,255,255,0.10); color:#fff; font-size:.78rem; letter-spacing:.5px; text-transform:uppercase; border:1px solid rgba(255,255,255,0.28); padding:.55rem .85rem .5rem; border-radius:999px; cursor:pointer; backdrop-filter:blur(8px) saturate(140%); -webkit-backdrop-filter:blur(8px) saturate(140%); transition: background .25s, border-color .25s, box-shadow .25s; }
.gallery-detail-bar .back-btn:hover, .gallery-detail-bar .back-btn:focus-visible { background:rgba(241,208,154,0.25); border-color:rgba(241,208,154,0.65); box-shadow:0 4px 16px -4px rgba(0,0,0,0.55); }
.gallery-detail-bar .back-btn:focus-visible { outline:2px solid #F1D09A; outline-offset:2px; }
.gallery-detail-bar .detail-heading { font-size:clamp(1rem,2.3vw,1.35rem); margin:0; font-weight:600; letter-spacing:.6px; position:relative; padding-bottom:.35rem; }
.gallery-detail-bar .detail-heading::after { content:''; position:absolute; left:0; bottom:0; width:70px; height:3px; background:#F1D09A; border-radius:2px; }
.detail-desc { font-size:.78rem; line-height:1.4; margin:-.4rem 0 1.2rem; text-align:left; opacity:.9; }

.detail-bagroup { display:grid; gap:2rem; margin:0 0 2rem; }
.detail-bagroup, .embed-grid {
  /* Prefer the page scrollbar; avoid internal scroll containers which can cause
     trapped-scroll issues on mobile. Allow content to grow naturally. */
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
  padding-right: 0;
}

.embed-grid { display:grid; gap:1.6rem; grid-template-columns: 1fr; margin:0 0 1.2rem; }
.embed-item { background:linear-gradient(145deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02)); border:1px solid rgba(255,255,255,0.18); border-radius:16px; padding:.6rem .7rem .8rem; box-shadow:0 8px 24px -6px rgba(0,0,0,0.4); position:relative; display:flex; flex-direction:column; gap:.65rem; align-items:stretch; }
/* Portrait formats (Reels, Stories) should not stretch excessively wide; center them */
.embed-item .ratio-9x16,
.embed-item .ratio-4x5 {
  margin-left:auto;
  margin-right:auto;
  max-width:480px;
  width:100%;
}
.embed-item .ratio-9x16 iframe,
.embed-item .ratio-4x5 iframe { object-fit:contain; }
/* Square can also be centered but allowed a bit more width */
.embed-item .ratio-1x1 { max-width:560px; margin-left:auto; margin-right:auto; }
.embed-item .ratio-16x9 { position:relative; width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0e1822; }
.embed-item .ratio-16x9 iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
/* Additional ratio helpers */
.embed-item .ratio-9x16 { position:relative; width:100%; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:#0e1822; }
.embed-item .ratio-9x16 iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
.embed-item .ratio-1x1 { position:relative; width:100%; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:#0e1822; }
.embed-item .ratio-1x1 iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
.embed-item .ratio-4x5 { position:relative; width:100%; aspect-ratio:4/5; border-radius:12px; overflow:hidden; background:#0e1822; }
.embed-item .ratio-4x5 iframe { position:absolute; inset:0; width:100%; height:100%; border:0; object-fit:contain; }
/* Ensure Instagram blockquote or raw embed fills the wrapper when present */
.embed-item .ratio-fill { position: relative; width:100%; min-height:400px; border-radius:12px; overflow:hidden; background:#0e1822; }
.embed-item .ratio-fill > blockquote.instagram-media,
.embed-item .ratio-fill > .instagram-embed,
.embed-item .ratio-fill > iframe {
  position: absolute; inset: 0; width:100%; height:100%; border:0; display:block; object-fit:contain;
}
.instagram-embed { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.6rem; text-align:center; min-height:160px; background:linear-gradient(145deg,rgba(20,32,44,0.55),rgba(18,27,36,0.75)); border:1px solid rgba(255,255,255,0.18); border-radius:12px; padding:1.1rem .8rem; }
.instagram-embed a { display:inline-flex; flex-direction:column; align-items:center; gap:.55rem; color:#fff; text-decoration:none; font-size:.8rem; letter-spacing:.4px; font-weight:500; padding:.6rem .9rem .7rem; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.24); border-radius:12px; transition: background .25s, transform .25s, border-color .25s; }
.instagram-embed a:hover, .instagram-embed a:focus-visible { background:rgba(241,208,154,0.2); border-color:rgba(241,208,154,0.55); transform:translateY(-2px); }
.instagram-embed a:focus-visible { outline:2px solid #F1D09A; outline-offset:3px; }

@media (max-width:680px){
  .gallery-cat-grid { grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:1rem 1.1rem; }
  .gallery-cat-tile img { height:auto; }
  .gallery-cat-tile .cat-figure { min-height:200px; }
  .gallery-detail-bar { flex-wrap:wrap; gap:.75rem; }
  .gallery-detail-bar .detail-heading { width:100%; text-align:left; }
  .detail-desc { margin-top:.1rem; }
  .detail-bagroup { gap:1.4rem; }
  .embed-grid { gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }

  /* Avoid forcing cards to stretch to equal height on very small screens */
  .gallery-cat-grid { align-items: start; }
  .gallery-cat-grid > * { height: auto; }

  /* Mobile: remove embed card chrome and let the video fill width */
  .embed-item {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .embed-item > .ratio-16x9,
  .embed-item > .ratio-9x16,
  .embed-item > .ratio-1x1,
  .embed-item > .ratio-4x5,
  .embed-item > .ratio-fill {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  /* Ensure fill-type embeds get a tall placeholder on mobile */
  .embed-item > .ratio-fill { min-height: 60vh !important; }
  /* Make iframes and instagram blockquote behave as normal block elements */
  .embed-item iframe, .embed-item blockquote.instagram-media { display:block; width:100%; }
}

/* Mobile: overlay captions on top of images to avoid extra framed area below images */
@media (max-width: 680px) {
  .ba-panel {
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 12px !important;
  }
  .ba-panel picture,
  .ba-panel img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }
  .ba-panel figcaption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: .6rem .75rem !important;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.08)) !important;
    color: #fff !important;
    border-top: none !important;
    text-align: left !important;
    font-size: .88rem !important;
    backdrop-filter: blur(4px) !important;
  }
  /* Ensure figcaption doesn't create extra layout height */
  .ba-panel figcaption + * { margin-top: 0 !important; }
}

/* Extra safety: ensure no inline width/height attributes are required/used */
.instagram-container iframe[width], .instagram-container iframe[height] {
  width: 100% !important;
  height: auto !important;
}

/* If you want a different default aspect for non-reel posts, override with .instagram-container.aspect-4x5 or .aspect-1x1 */
.instagram-container.aspect-4x5 iframe { aspect-ratio: 4 / 5; }
.instagram-container.aspect-1x1 iframe { aspect-ratio: 1 / 1; }

  .embed-item iframe,
  .embed-item blockquote.instagram-media,
  .embed-item .instagram-embed,
  .embed-item iframe {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border: 0 !important;
  }


/* Desktop & general: allow instagram blockquotes to expand and avoid absolute clipping */
.embed-item .ratio-fill { position: relative; overflow: visible; height: auto; min-height: 120px; }
.embed-item .ratio-fill blockquote.instagram-media { position: static !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; }
.embed-item .ratio-fill iframe { position: static !important; width: 100% !important; height: auto !important; display: block !important; }
.embed-item .ratio-fill img,
.embed-item .ratio-fill video { width: 100% !important; height: auto !important; object-fit: contain !important; }

/* New embed-block helpers: predictable responsive blocks for embeds */
.embed-block { width: 100%; max-width: 820px; margin: 0 auto; border-radius: 12px; overflow: visible; background: #0e1822; }
.embed-block.embed-16x9 { aspect-ratio: 16/9; position: relative; }
.embed-block.embed-16x9 iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-block.embed-fill { position: relative; width: 100%; height: auto; padding: 0; }
.embed-block.embed-fill blockquote.instagram-media { width: 100% !important; max-width: 100% !important; margin: 0; display: block; }
.embed-block.embed-fill iframe { width: 100% !important; height: auto !important; display: block !important; position: static !important; }
.embed-block.embed-preview { padding: .9rem; }
.embed-block.embed-preview .instagram-embed { margin: 0; }

/* Responsive 16:9 video wrapper for YouTube or other 16:9 iframes */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  overflow: hidden;
  border-radius: 12px;
  background-color: #000; /* black background while loading */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Ensure the .video-wrapper inside .embed-item ignores older aspect helpers */
.embed-item .video-wrapper { border-radius: 12px; max-width: 100%; }

/* Strong override: some global rules force iframes to position:static !important.
   Make sure video-wrapper iframes win by using a more specific selector and
   !important on the properties that matter. */
.embed-item .video-wrapper iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
  object-fit: cover !important; /* ensure no black bars by filling container */
}

@media (max-width: 680px){
  .embed-block { max-width: 100%; border-radius: 0; }
  .embed-block.embed-16x9 { aspect-ratio: 16/9; }
}

/* Accessibility helpers */
.gallery-cat-tile:focus-visible .cat-figure { box-shadow:0 0 0 3px rgba(241,208,154,0.75), 0 10px 28px -6px rgba(0,0,0,0.45); }

/* Wenn Detailansicht aktiv, Karte darf größer werden (Card scrollt ggf.) */


/* Make the comparison taller on narrow devices so images remain large and visible */
/* Die Höhe ergibt sich nun durch Bilder selbst; keine festen aspect-ratio Breakpoints nötig */

/* ============= Wiederhergestellte Kategorie-/Navigations- und Scroll-Button Styles ============= */
.ba-category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  margin: 0 0 1.15rem;
  padding: .15rem 0 0;
  background: transparent; /* minimal / modern */
}
.ba-category-nav a {
  text-decoration: none;
  font-size: .82rem;
  line-height: 1.05;
  letter-spacing: .35px;
  padding: .4rem .65rem .38rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.45);
  transition: background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.ba-category-nav a:hover,
.ba-category-nav a:focus-visible {
  background: rgba(241,208,154,0.22);
  color: #fff;
  border-color: rgba(241,208,154,0.6);
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.55);
}
.ba-category-nav a:focus-visible {
  outline: 2px solid #F1D09A;
  outline-offset: 2px;
}
.ba-category-nav a[aria-current] {
  background: linear-gradient(145deg,#F1D09A,#c49a5e);
  color: #13202b;
  border-color: #e9cfa2;
  box-shadow: 0 4px 14px -5px rgba(0,0,0,0.6);
}

.ba-category-group { margin: 0 0 2.6rem; position: relative; padding-left: 1rem; }
.ba-category-group:last-of-type { margin-bottom: 0; }
.ba-category-group::before {
  /* Full-height single-color stripe on the left for desktop + mobile */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: #F1D09A; /* einfarbig Gold passend zur Website */
  opacity: 0.98;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.10);
}
.ba-category {
  font-size: clamp(1.05rem, 2.35vw, 1.28rem);
  font-weight: 600;
  margin: 0 0 .95rem;
  letter-spacing: .5px;
  position: relative;
  display: block;
  color: #ffffff;
  padding: 0;
}
/* Entfernt Unterstrich/Block, reine Typo */
.ba-category::after { display: none; }

.ba-scroll-top {
  /* align visual style with the site's floating home/back FAB (.sticky-back .fab) */
  position: fixed;
  bottom: var(--ba-scroll-bottom, 5.6rem);
  left: .85rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(10,22,39,0.34);
  border: 2px solid rgba(255,255,255,0.90);
  box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px) scale(.92);
  pointer-events: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, opacity .35s ease;
  z-index: 80;
}
.ba-scroll-top svg { width: 20px; height: 20px; stroke: #fff; }
.ba-scroll-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ba-scroll-top:hover { transform: translateY(-2px) scale(1.04); background: rgba(10,22,39,0.40); border-color: rgba(255,255,255,0.45); box-shadow: 0 14px 28px rgba(0,0,0,0.32); }
.ba-scroll-top:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; }
.ba-scroll-top:focus-visible { outline: 2px solid #F1D09A; outline-offset: 2px; }

@media (max-width: 736px) {
  .ba-category-nav { gap: .4rem .5rem; margin-bottom: 1rem; }
  .ba-category-nav a { font-size: .7rem; padding: .35rem .55rem .3rem; }
  .ba-category { font-size: 1.08rem; margin-bottom: .8rem; }
  .ba-category-group { padding-left: .8rem; }
  .ba-category-group::before { width: 3px; top: .3rem; bottom: .6rem; }
  .ba-scroll-top { bottom: 5.3rem; }
}

/* Very small phones: slightly smaller FAB to avoid overlap with native UI */
@media (max-width: 420px) {
  .ba-scroll-top { width: 44px; height: 44px; left: .7rem; }
  .ba-scroll-top svg { width: 18px; height: 18px; }
}

  /* === Force consistent rounding & clipping for gallery tiles (override prior rules) === */
  /* This block intentionally uses strong selectors and !important where necessary to avoid
     older declarations leaking through and to handle browser rendering quirks. */
  .gallery-cat-grid .gallery-cat-tile {
    border-radius: 16px !important;
    overflow: hidden !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  .gallery-cat-grid .gallery-cat-tile,
  .gallery-cat-grid .gallery-cat-tile .cat-figure,
  .gallery-cat-grid .gallery-cat-tile .cat-figure::before,
  .gallery-cat-grid .gallery-cat-tile .cat-figure::after,
  .gallery-cat-grid .gallery-cat-tile img,
  .gallery-cat-grid .gallery-cat-tile figcaption {
    border-radius: 16px !important;
  }
  .gallery-cat-grid .gallery-cat-tile img {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: transform !important;
  }

/* Make gallery overview / category images rounded: always show rounded corners
   on gallery overview and category tiles. This is intentionally specific and
   uses !important to override some layout-reset rules elsewhere. */
body.gallery-page .gallery .card img,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-media img,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure > img {
  border-radius: 14px !important;
  display: block !important;
  overflow: hidden !important;
}

body.gallery-page .gallery-cat-grid .gallery-cat-tile,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* Small screens: keep the rounding but avoid clipping important overlays */
@media (max-width: 640px) {
  body.gallery-page .gallery .card img,
  body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-media img {
    border-radius: 12px !important;
  }
}

/* Ensure any decorative backgrounds / pseudo-elements also follow the rounding
   (fixes visible square 'frame' behind images caused by ::before / ::after). */
body.gallery-page .gallery .card,
body.gallery-page .gallery-cat-grid .gallery-cat-tile,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure {
  -webkit-border-radius: 14px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

body.gallery-page .gallery .card::before,
body.gallery-page .gallery .card::after,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure::before,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure::after {
  border-radius: inherit !important;
  -webkit-border-radius: inherit !important;
}

/* If any inner overlay uses a background (gradient), make sure it respects rounding */
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure::before,
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-figure::after {
  inset: 0 !important;
  overflow: hidden !important;
}
/* Ensure the blurred background inside .cat-media also follows the rounding */
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-media,
body.gallery-page .gallery .card .cat-media {
  border-radius: 14px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}
body.gallery-page .gallery-cat-grid .gallery-cat-tile .cat-media::before,
body.gallery-page .gallery .card .cat-media::before {
  border-radius: inherit !important;
  -webkit-border-radius: inherit !important;
  inset: 0 !important;
}
  .gallery-cat-grid .gallery-cat-tile .cat-figure::before,
  .gallery-cat-grid .gallery-cat-tile .cat-figure::after {
    border-radius: 16px !important;
  }

  /* Fallback: if a browser still paints artifacts while animating scale, reduce scale on hover slightly */
  .gallery-cat-grid .gallery-cat-tile:hover .cat-figure img,
  .gallery-cat-grid .gallery-cat-tile:focus-visible .cat-figure img {
    transform: scale(1.04) !important;
  }

/* Instagram link-card (mobile replacement) */
.ig-linkcard{max-width:540px;margin:0 auto;position:relative}
.ig-open{all:unset;display:block;cursor:pointer}
.ig-thumb{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;background:#eee}
.ig-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;padding:4px 8px;border-radius:8px;font:600 12px/1 system-ui}