/** * KW Zoom-Card Block-Styles * * WAS: Card mit Bild + Titel + Text + Lupen-Overlay rechts unten, * clickbar zum Öffnen einer Lightbox-Modal. * WARUM: Detail-Zubehör auf langen Pages: Editor zeigt mini-Bild, * User kann auf Click groß sehen ohne Page-Wechsel. * * Gregor 2026-06-02. */ /* === Card-Layout === */ .kw-zoom-card { background: #fff; border-radius: var(--kw-radius, 12px); overflow: hidden; box-shadow: var(--kw-shadow-sm, 0 2px 8px rgba(76,71,38,0.06)); display: flex; flex-direction: column; height: 100%; transition: transform 0.25s ease, box-shadow 0.25s ease; } .kw-zoom-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(76,71,38,0.12); } /* In flex-Columns: Card stretcht voll-breit + gleiche Höhe. */ .wp-block-columns > .wp-block-column > .kw-zoom-card { width: 100%; } /* === Trigger-Button (Bild) === */ .kw-zoom-card__trigger { appearance: none; border: 0; background: none; padding: 0; margin: 0; display: block; width: 100%; cursor: zoom-in; text-align: left; } .kw-zoom-card__trigger:focus-visible { outline: 3px solid var(--kw-bordeaux, #97233F); outline-offset: -3px; } /* === Image-Wrap + Lupen-Overlay === */ .kw-zoom-card__image-wrap { position: relative; overflow: hidden; background: #fff; aspect-ratio: 3 / 2; /* zentriert wenn img sich auf width/height verlässt */ display: flex; align-items: center; justify-content: center; } .kw-zoom-card__image-wrap img { display: block; width: 100%; height: 100%; /* contain statt cover: Bild komplett sichtbar, weiße Streifen seitlich wenn Bild nicht 3:2. Gregor 2026-06-02. */ object-fit: contain; object-position: center center; margin: auto; transition: transform 0.4s ease; } .kw-zoom-card__trigger:hover .kw-zoom-card__image-wrap img, .kw-zoom-card__trigger:focus-visible .kw-zoom-card__image-wrap img { transform: scale(1.04); } /* Lupen-Icon rechts unten. Wachst leicht beim Hover. */ .kw-zoom-card__lens { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: rgba(122, 28, 51, 0.92); color: #fff; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,0.25); transition: transform 0.2s ease, background 0.2s ease; pointer-events: none; } .kw-zoom-card__trigger:hover .kw-zoom-card__lens, .kw-zoom-card__trigger:focus-visible .kw-zoom-card__lens { transform: scale(1.1); background: var(--kw-bordeaux, #97233F); } /* === Body === */ .kw-zoom-card__body { padding: 1.25rem 1.5rem 1.5rem; } .kw-zoom-card__title { font-family: 'Josefin Sans', sans-serif; font-size: var(--kw-text-lg, 20px); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kw-body-text, #1A1A1A); margin: 0 0 0.5rem; } .kw-zoom-card__text { font-family: 'PT Serif', serif; font-size: var(--kw-text-base, 17px); line-height: 1.6; color: var(--kw-body-text, #1A1A1A); margin: 0; } /* === Lightbox-Modal (dynamisch via JS in injiziert) === */ .kw-zoom-modal { position: fixed; inset: 0; background: rgba(20, 16, 18, 0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; } .kw-zoom-modal[data-open="true"] { opacity: 1; visibility: visible; transition: opacity 0.25s ease, visibility 0s; } .kw-zoom-modal__inner { position: relative; max-width: min(1200px, 96vw); max-height: 92vh; display: flex; align-items: center; justify-content: center; } .kw-zoom-modal__img { display: block; max-width: 100%; max-height: 92vh; width: auto; height: auto; border-radius: 4px; box-shadow: 0 8px 48px rgba(0,0,0,0.45); } .kw-zoom-modal__close { position: absolute; top: -16px; right: -16px; width: 44px; height: 44px; border-radius: 999px; background: #fff; color: var(--kw-bordeaux, #97233F); border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,0.4); font-size: 1.5rem; font-weight: 700; line-height: 1; } .kw-zoom-modal__close:hover { background: var(--kw-bordeaux, #97233F); color: #fff; } /* === Navigation Pfeile + Counter (Gregor 2026-06-02) === */ .kw-zoom-modal__nav { appearance: none; border: 0; background: rgba(255, 255, 255, 0.92); color: var(--kw-bordeaux, #97233F); width: 56px; height: 56px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; margin: 0 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.3); transition: background 0.2s ease, transform 0.2s ease; } .kw-zoom-modal__nav:hover { background: #fff; transform: scale(1.06); } .kw-zoom-modal__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; } .kw-zoom-modal__counter { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.55); color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 0.78rem; letter-spacing: 0.08em; white-space: nowrap; padding: 4px 10px; border-radius: 999px; } /* === Stage / Inner-Layout (Stage + Meta + Thumbs) === */ .kw-zoom-modal__inner { display: flex !important; flex-direction: column; align-items: center; background: #fff; border-radius: 8px; overflow: hidden; max-width: min(1100px, 96vw); max-height: 92vh; } .kw-zoom-modal__stage { position: relative; display: flex; align-items: center; justify-content: center; background: #fff; width: 100%; flex: 1 1 auto; min-height: 0; } .kw-zoom-modal__img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; border-radius: 0; box-shadow: none; } .kw-zoom-modal__meta { padding: 16px 24px 12px; text-align: center; width: 100%; } .kw-zoom-modal__title { font-family: 'Josefin Sans', sans-serif; font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--kw-body-text, #1A1A1A); margin: 0 0 6px; } .kw-zoom-modal__text { font-family: 'PT Serif', serif; font-size: 0.95rem; line-height: 1.5; color: var(--kw-body-text, #1A1A1A); margin: 0; } .kw-zoom-modal__thumbs { display: flex; gap: 8px; padding: 0 16px 16px; overflow-x: auto; flex-wrap: nowrap; justify-content: center; max-width: 100%; } .kw-zoom-modal__thumb { appearance: none; border: 2px solid transparent; background: #f5f0eb; padding: 0; width: 64px; height: 64px; border-radius: 6px; overflow: hidden; cursor: pointer; flex: 0 0 auto; transition: border-color 0.15s ease, transform 0.15s ease; } .kw-zoom-modal__thumb:hover { transform: translateY(-1px); } .kw-zoom-modal__thumb.is-active { border-color: var(--kw-bordeaux, #97233F); } .kw-zoom-modal__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* === Close-Button reposition (auf Inner-Box) === */ .kw-zoom-modal__close { top: 8px; right: 8px; width: 36px; height: 36px; font-size: 1.3rem; z-index: 2; } /* === Bilder-Count-Badge auf der Card (links unten) === */ .kw-zoom-card__count { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, 0.6); color: #fff; font-family: 'Josefin Sans', sans-serif; font-size: 0.72rem; letter-spacing: 0.06em; padding: 4px 8px; border-radius: 4px; text-transform: uppercase; pointer-events: none; } @media (max-width: 768px) { .kw-zoom-card__lens { width: 36px; height: 36px; right: 10px; bottom: 10px; } .kw-zoom-modal { padding: 12px; } .kw-zoom-modal__close { top: 8px; right: 8px; } /* Pfeile mobile: kleiner + näher am Bild — Swipe ist Hauptweg */ .kw-zoom-modal__nav { width: 40px; height: 40px; margin: 0 4px; opacity: 0.6; } }