/* * ki_similar.css — NUR Layer + Kachel-Button. * * Die WAND wird hier NICHT gestylt. Sie steht in similar_grid.css und wird * von der Entdecken-Seite und vom Layer geteilt — eine Quelle, eine Optik. * Diese Datei fügt nur hinzu, was es dort nicht gibt: Modal und Button. * * Reihenfolge im : * similar_grid.css ← die Wand + die Farb-Tokens (PFLICHT) * ki_similar.css ← diese Datei * * ki_search.css wird NICHT gebraucht: darin steht nur noch das Chrome der * Entdecken-Seite (Suchleiste, Reise, Filter-Chips). */ :root{ --sim-head-height: 50px; } /* ── Layer ───────────────────────────────────────────────── */ .ki-sim-layer { position: fixed; inset: 0; z-index: 9000; display: none; } .ki-sim-layer.is-open { display: block; } .ki-sim-backdrop { position: absolute; inset: 0; background: rgba(12, 12, 14, .82); backdrop-filter: blur(3px); animation: kiSimFade .18s ease-out; } .ki-sim-panel { position: absolute; inset: 0; display: flex; flex-direction: column; background: transparent; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, .45); animation: kiSimRise .22s cubic-bezier(.2, .8, .2, 1); } .ki-sim-head { flex: 0 0 auto; padding: 18px 56px 14px 24px; /* font-size: 15px; */ font-family:var(--font-display); top: 0px; width: 100%; position: absolute; background: rgba(0, 0, 0, .8); z-index: 99; text-transform: uppercase; letter-spacing: .02em; height:var(--sim-head-height); } /* Der Scroll-Container. Die Wand rechnet ihre Spalten aus DIESER Breite — deshalb muss er eine echte Breite haben (kein display:contents o.ä.). */ .ki-sim-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px 24px 40px; position: relative; padding-top:calc(var(--sim-head-height) + 15px); } .ki-sim-close { position: absolute; top: 7px; right: 12px; z-index: 999; width: 38px; display: flex; height: 38px; border: 0; border-radius: 50%; color: #ffffff; background: none; font-size: 26px; line-height: 1; cursor: pointer; transition: background .15s; justify-content: center; align-items: center; transition: color .2s, border-color .2s, background .2s, transform .2s; } .ki-sim-close:hover { background: rgb(255 255 255 / .2); transform: rotate(90deg); } .ki-sim-close svg{ fill:white; width: 24px; height: 24px; } /* Hintergrund darf nicht mitscrollen, solange der Layer offen ist */ body.ki-sim-locked { overflow: hidden; } /* Ladezustand */ .ki-sim-busy { opacity: .5; pointer-events: none; transition: opacity .15s; } /* .search_masonry_error steht in similar_grid.css — hier NICHT nochmal. */ @keyframes kiSimFade { from { opacity: 0; } to { opacity: 1; } } @keyframes kiSimRise { from { opacity: 0; transform: translateY(14px) scale(.99); } to { opacity: 1; transform: none; } } @media (max-width: 680px) { .ki-sim-panel { inset: 0; border-radius: 0; } .ki-sim-body { padding: 14px 12px 32px; } } /* ── Der Button in der Kachel ────────────────────────────── */ .ki-sim-btn { top: 10px; right: 10px; z-index: 99; display: flex; align-items: center; justify-content: center; width: auto; padding: 10px 20px; gap: 10px; border: 0; border-radius: 100px; background: rgb(255 255 255 / .2); color: #fff; cursor: pointer; opacity: 1; transform: scale(.9); transition: opacity .16s, transform .16s, background .16s; box-shadow: 0 2px 10px rgb(0 0 0 / .18); } .ki-sim-btn:hover { background: rgba(255, 255, 255, .35); } .ki-sim-btn svg { fill:white; width: 24px; height: 24px; display: block; } .ki-sim-btn svg path{ fill:white; } .masonry_item:hover .ki-sim-btn, .ki-sim-btn:focus-visible { opacity: 1; transform: none; } /* Touch: kein Hover → dauerhaft sichtbar, sonst unerreichbar */ @media (hover: none) { .ki-sim-btn { opacity: .95; transform: none; } }