/* ============================================================ similar_grid.css — DIE Masonry-Wand. Eine Quelle, zwei Orte. ============================================================ Genutzt von: - der Entdecken-Seite (ki_search.js → #ki-results) - dem Ähnlich-Plugin (ki_similar.js → Layer / Artikelseite) Alles, was zur WAND gehört, steht NUR hier: .search_masonry, .masonry_item, .masonry_hero, .masonry_hero_info, die Hero-Tabs (Werk / Im Raum), der Flyer und der "Mehr laden"-Button. In ki_search.css bleibt ausschließlich das SEITEN-Chrome (Suchleiste, Reise, Filter-Chips). In ki_similar.css nur Layer + Kachel-Button. Keine Klasse ist doppelt definiert. Reihenfolge im : similar_grid.css ← zuerst (die Wand + die Tokens) ki_search.css ← nur auf der Entdecken-Seite ki_similar.css ← überall, wo der Layer/Button gebraucht wird ── WICHTIG: die Farb-Tokens ────────────────────────────── Sie standen vorher auf .ki-search-page. Damit waren sie AUSSERHALB dieses Containers undefiniert — im Layer fiel jedes var(--gold) aus und der Style war kaputt. Deshalb liegen sie jetzt auf :root. ============================================================ */ :root { --gold: #c8a96e; --gold-bright: #c8a44d; --teal: #02d0ce; --bg: #0e0e10; } /* ============================================================ Masonry — Container relativ, Kacheln absolut (JS setzt Position/Groesse) ============================================================ */ .search_masonry { position: relative; width: 100%; /* Hoehe setzt das JS. Vor JS-Layout: Kacheln fliessen normal (Fallback). */ } .search_masonry .masonry_item { position: absolute; /* vom JS gesetzt; ohne JS: static-Fallback unten */ top: 0; left: 0; overflow: hidden; border-radius: 10px; cursor: pointer; transition: box-shadow .28s ease, filter .28s ease; } /* Hover ueber Schatten/Helligkeit (KEIN transform -> kein Konflikt mit Stagger/FLIP) */ .search_masonry .masonry_item:hover { box-shadow: 0 14px 34px rgba(0, 0, 0, .5); filter: brightness(1.04); z-index: 2; } /* Stagger-Kacheln behalten ihre eigene transform+opacity-Transition */ .search_masonry .masonry_item[data-staggered-item] { transition: opacity var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1), transform var(--stagger-duration, 600ms) cubic-bezier(0.16, 1, 0.3, 1), box-shadow .28s ease; } /* Startzustand SCHON im head-CSS (vor dem ersten Paint) -> kein Flash, bevor das deferred stagger.js uebernimmt. Deckungsgleich mit stagger.js. */ .search_masonry .masonry_item[data-staggered-item]:not(.staggered-end) { opacity: 0; transform: translateY(124px); } /* ---- Flyer: das geklickte Bild, das in den Hero fliegt (FLIP) ---- */ .ki-flyer { position: absolute; /* scrollt mit dem Dokument -> gleichzeitiger Scroll moeglich */ overflow: hidden; border-radius: 10px; z-index: 9999; pointer-events: none; transform-origin: top left; box-shadow: 0 22px 60px rgba(0, 0, 0, .55); will-change: transform; } .ki-flyer img { width: 100%; height: 100%; object-fit: cover; display: block; } .ki-flyer.ki-flyer-out { transition: opacity .26s ease; opacity: 0; } .search_masonry .masonry_hero { cursor: default; z-index: 3; /* ueber dem Info-Block -> versteckt den getuckten Text */ outline-offset: -1px; } .search_masonry .masonry_hero .art_item.skeleton { animation:none; } /* ---- Info-Block unter dem Held (Titel/Preis/Button) ---- */ .masonry_hero_info { position: absolute; box-sizing: border-box; text-align: center; padding: 18px 16px 18px; z-index: 1; transform: translateY(-115%); transition: transform .55s cubic-bezier(.16, 1, .3, 1); background: rgba(0, 0, 0, 0.3); border-radius: 10px; } /* slidet unten aus dem Bild raus (gleiche Dauer/Kurve wie der Flip, KEIN Fade) */ .masonry_hero_info.hero-info-in { transform: translateY(0); } /* alter Text beim Klick: nur ausfaden, KEIN Slide */ .masonry_hero_info.hero-info-leaving { opacity: 0; transition: opacity .2s ease; } /* ---- Werk / Im Raum — Tabs ---- */ .hero_view_tabs { display: inline-flex; gap: 4px; margin: 4px 0 12px; padding: 3px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); border-radius: 999px; } .hero_view_tab { cursor: pointer; border: 0; background: transparent; color: rgba(242, 242, 242, .6); font-family: var(--font-display); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; transition: background .2s ease, color .2s ease; } .hero_view_tab:hover:not(.active) { color: #fff; } .hero_view_tab.active { background: linear-gradient(180deg, var(--gold), var(--gold-bright)); color: #14110c; } /* Weiches Umsortieren beim Umschalten Werk/Raum */ .search_masonry.is-morphing .masonry_item, .search_masonry.is-morphing .masonry_hero_info { transition: top .5s cubic-bezier(0.16, 1, 0.3, 1), left .5s cubic-bezier(0.16, 1, 0.3, 1), width .5s cubic-bezier(0.16, 1, 0.3, 1), height .5s cubic-bezier(0.16, 1, 0.3, 1); } .hero_info_title { font-family: "Instrument Serif", "Antonio", serif; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; color: #fff; margin: 0 0 6px; } .hero_info_sub { font-family: var(--font-primary); font-size: var(--text-s); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .hero_info_meta { font-size: var(--text-base); color: rgb(242 242 242 / .6); margin: 0 0 0.75rem; } .hero_info_price { font-family: "Antonio", sans-serif; font-size: 24px; color: #fff; margin: 4px 0 16px; } .hero_info_actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } .hero_btn { display: inline-block; text-decoration: none; cursor: pointer; border-radius: 999px; padding: 13px 30px; font-family: var(--font-display); font-size: var(--text-base-s); text-transform: uppercase; transition: transform .15s ease, filter .2s ease, background .2s ease, color .2s ease; } a.hero_btn { color:black; } .hero_btn_primary { color: #14110c !important; background: linear-gradient(180deg, var(--gold), var(--gold-bright)); border: 1px solid var(--gold); } .hero_btn_primary:hover { filter: brightness(1.08); transform: translateY(-1px); } /* Karte (pin_luxury) fuellt die Kachel exakt aus */ .search_masonry .masonry_item .art_scroll, .search_masonry .masonry_item .art_inner, .search_masonry .masonry_item .art_item, .search_masonry .masonry_item .overflow-wrapper, .search_masonry .masonry_item .art_item > a, .search_masonry .masonry_item .image_zoom_wrapper { height: 100% !important; width: 100% !important; aspect-ratio: auto !important; margin: 0 !important; } .search_masonry .masonry_item img.product_image { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; } /* Fallback OHNE JS: wenigstens sichtbar (fliessende Bloecke) */ .search_masonry:not([data-mason-ready]) .masonry_item { position: relative; display: inline-block; width: 32%; margin: 0 .5% 12px; vertical-align: top; } .search_masonry_error { padding: 40px; text-align: center; color: var(--gold); font-family: "JetBrains Mono", monospace; } /* ---- Mehr laden ---- */ .ki-search-more { display: flex; justify-content: center; margin: 34px 0 0; } .ki-load-more { cursor: pointer; border: 1px solid rgba(200, 169, 110, .4); background: rgba(255, 255, 255, .03); color: var(--gold); font-family: "JetBrains Mono", monospace; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 15px 40px; border-radius: 999px; transition: background .2s ease, border-color .2s ease, transform .15s ease, color .2s ease; } .ki-load-more:hover { background: linear-gradient(180deg, var(--gold), var(--gold-bright)); border-color: var(--gold); color: #14110c; transform: translateY(-1px); } .ki-load-more:disabled { opacity: .5; cursor: default; transform: none; } /* ── VOR dem JS-Layout ──────────────────────────────────────── Der alte Rückfall war width:32% inline-block — drei Spalten, ohne Höhe, mit dem Helden gleich groß wie alles andere. Das JS macht danach fünf Spalten mit doppelt großem Helden: ein sichtbarer Umbau. Ein Grid kommt dem Ergebnis viel näher. Keine echte Masonry (die Zeilen richten sich aus), aber alles sitzt an seinem Platz, hat die richtige Größe und die richtige Höhe. Wenn das JS übernimmt, verschieben sich nur noch die Lücken. */ .search_masonry:not([data-mason-ready]) { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; } .search_masonry:not([data-mason-ready]) .masonry_item { position: relative; top: auto; left: auto; width: auto; margin: 0; /* --ar kommt aus search_masonry.php, aus data-w/data-h */ aspect-ratio: var(--ar, 1); } /* Der Held ist zwei Spalten breit — wie im JS-Layout */ .search_masonry:not([data-mason-ready]) .masonry_hero { grid-column: span 2; grid-row: span 2; } /* Der Info-Block gehört vor dem JS nicht ins Raster */ .search_masonry:not([data-mason-ready]) .masonry_hero_info { display: none; } @media (max-width: 1000px) { .search_masonry:not([data-mason-ready]) { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .search_masonry:not([data-mason-ready]) { grid-template-columns: repeat(2, 1fr); } } /* ── Entdecken-Kachel: nur Bild ────────────────────────────── */ .search_masonry .masonry_item .dc-tile { display: block; height: 100%; text-decoration: none; } .search_masonry .masonry_item .dc-tile__media { position: relative; width: 100%; height: 100%; overflow: hidden; /* aspect-ratio kommt inline aus dem Skin - VOR dem JS-Layout hält es die Höhe. Sobald layoutMasonry() eine feste Höhe setzt, gewinnt height:100%. Beides nebeneinander ist gewollt, nicht doppelt. */ } .search_masonry .masonry_item .dc-tile__img { width: 100%; height: 100%; object-fit: cover; display: block; } .search_masonry .masonry_item .dc-tile__sold { position: absolute; top: 10px; left: 10px; padding: 5px 12px; border-radius: 999px; background: rgba(0, 0, 0, .7); color: var(--gold); font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }