/* ============================================================ veredelung.css — Jedermannart Licht-Veredelung Technik aus dem Framer-Spot, umgefärbt auf Gold, sparsam. ALLES hinter body.veredelung → Kill-Switch = Klasse entfernen. Effekte: 01 Rahmenlicht (Cards) · 02 Glanzstreif (Haupt-CTA) · 03 Bloom (Hero) 05 Museums-Hängung (Card-Schatten) · 06 Blattgold-Schimmer (.badge-new) 07 Belichten (Bild-Ladeeffekt via [data-bg]) (04 Warmes Glas bewusst zurückgehalten) Doku: 01_Plattform/Licht-Veredelung · Entscheidungslog 03.07.2026 ============================================================ */ @property --jma-ang { syntax:''; inherits:false; initial-value:0deg; } :root { --vd-gold: #c8a96e; --vd-gold-hi: #f0dcae; --vd-gold-lo: #8a7448; } /* ───────────────────────────────────────────── 01 · RAHMENLICHT — warmes Licht wandert am Rand, nur beim Hovern. Cards der Galerie + Künstler + Promo. Ring liegt im ::after (padding-Maske), innerhalb overflow:hidden. ───────────────────────────────────────────── */ body.veredelung .card, body.veredelung .promo-card, body.veredelung .artist-card { } body.veredelung .card::after, body.veredelung .promo-card::after, body.veredelung .artist-card::after { content: ""; position: absolute; inset: 0; border-radius: 12px; padding: 1px; background: conic-gradient(from var(--jma-ang), transparent 0deg, transparent 232deg, var(--vd-gold-hi) 288deg, var(--vd-gold) 312deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .45s ease; pointer-events: none; z-index: 5; } body.veredelung .card:hover::after, body.veredelung .promo-card:hover::after, body.veredelung .artist-card:hover::after { opacity: 1; animation: jmaEdge 3.6s linear infinite; } /* Sold-out-Cards bleiben ruhig */ body.veredelung .card--soldout:hover::after { opacity: 0; animation: none; } @keyframes jmaEdge { to { --jma-ang: 360deg; } } /* ───────────────────────────────────────────── 05 · MUSEUMS-HÄNGUNG (E) — physischer Wand-Schatten mit feinem Oberlicht statt flachem Kasten. Werke „hängen" statt zu schweben. Ruhezustand + Hover-Lift; Light-Mode weicher, ohne warmes Rim-Licht. ───────────────────────────────────────────── */ body.veredelung .card, body.veredelung .promo-card, body.veredelung .artist-card { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 5px rgba(0,0,0,0.50), 0 22px 40px -16px rgba(0,0,0,0.82), 0 -12px 30px -22px rgba(200,169,110,0.32); } html.light body.veredelung .card, html.light body.veredelung .promo-card, html.light body.veredelung .artist-card { box-shadow: 0 1px 3px rgba(0,0,0,0.10), 0 16px 32px -18px rgba(0,0,0,0.26); } /* Hover-Lift — tiefer Wurf + warmes Oberlicht (verbindet Hängung + Rahmenlicht) */ body.veredelung .card:hover, body.veredelung .promo-card:hover, body.veredelung .artist-card:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px rgba(0,0,0,0.50), 0 32px 56px -20px rgba(0,0,0,0.86), 0 -14px 34px -22px rgba(200,169,110,0.50); } html.light body.veredelung .card:hover, html.light body.veredelung .promo-card:hover, html.light body.veredelung .artist-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.12), 0 26px 44px -20px rgba(0,0,0,0.32); } /* Sold-out hängt ruhig, kein Lift */ body.veredelung .card--soldout:hover { box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 5px rgba(0,0,0,0.50), 0 22px 40px -16px rgba(0,0,0,0.82); } /* ───────────────────────────────────────────── 06 · BLATTGOLD-SCHIMMER (F) — feiner Blattgold-Lauf über genau EIN Element pro Card: den „Neu"-Chip (.badge-new). Sparsam, alle 6 s. ───────────────────────────────────────────── */ body.veredelung .badge-new { position: relative; overflow: hidden; } body.veredelung .badge-new::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,240,205,0.70), transparent); transform: skewX(-18deg); pointer-events: none; animation: jmaFoil 6s ease-in-out infinite; } @keyframes jmaFoil { 0%, 70% { left: -70%; } 88%, 100% { left: 145%; } } /* ───────────────────────────────────────────── 07 · BELICHTEN (B) — Werke „entwickeln" sich warm ins Bild, statt hart aufzupoppen. Haken: der Lazy-Loader entfernt [data-bg] beim Laden → Filter läuft von unterbelichtet/sepia auf normal. (Above-the-fold wird [data-bg] sofort entfernt → kein Flash.) ───────────────────────────────────────────── */ body.veredelung .card-img { transition: filter 1.5s ease; } body.veredelung .card-img[data-bg] { filter: sepia(0.7) brightness(0.5) contrast(1.3) saturate(0.7); } /* Sold-out behält seine Graustufe (fällt nach dem Belichten dorthin) */ /* ───────────────────────────────────────────── 02 · GLANZSTREIF — ein langsamer Lichtstreif quert den einen Haupt-Button. Produkt: .btn-print · Hero: .jma-cta. ───────────────────────────────────────────── */ body.veredelung .btn-print, body.veredelung a.jma-cta { position: relative; overflow: hidden; isolation: isolate; } body.veredelung .btn-print::after, body.veredelung a.jma-cta::after { content: ""; position: absolute; top: 0; left: -65%; width: 45%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.55), transparent); transform: skewX(-18deg); pointer-events: none; z-index: 1; animation: jmaSweep 5.2s ease-in-out infinite; } body.veredelung .btn-print:disabled::after { animation: none; opacity: 0; } @keyframes jmaSweep { 0%, 58% { left: -65%; } 82%, 100% { left: 135%; } } /* ───────────────────────────────────────────── 03 · BLOOM — weiches, langsam atmendes Gold-Leuchten hinter dem Hero-Text. Vertieft den Grund, kein Bewegungslärm. #jmaHero ist position:relative; overflow:hidden — Bloom bleibt drin. Masthead ist z-index:3, Bloom liegt darunter (z-index:1). ───────────────────────────────────────────── */ body.veredelung #jmaHero::after { content: ""; position: absolute; left: 50%; top: 42%; width: 62%; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(200,169,110,0.30), rgba(200,169,110,0) 62%); filter: blur(26px); pointer-events: none; z-index: 1; animation: jmaBreathe 9s ease-in-out infinite; } html.light body.veredelung #jmaHero::after { background: radial-gradient(circle, rgba(180,143,80,0.20), rgba(180,143,80,0) 62%); } @keyframes jmaBreathe { 0%, 100% { opacity: .55; transform: translate(-50%,-50%) scale(.92); } 50% { opacity: .9; transform: translate(-50%,-50%) scale(1.06); } } /* ───────────────────────────────────────────── Barrierefreiheit: keine Bewegung wenn abbestellt. Effekte bleiben als ruhiger Zustand sichtbar (Ring nur bei Hover). ───────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.veredelung .card:hover::after, body.veredelung .promo-card:hover::after, body.veredelung .artist-card:hover::after { animation: none; } body.veredelung .btn-print::after, body.veredelung a.jma-cta::after { animation: none; left: -65%; opacity: 0; } body.veredelung #jmaHero::after { animation: none; opacity: .6; } body.veredelung .badge-new::after { animation: none; opacity: 0; } body.veredelung .card-img { transition: none; } body.veredelung .card-img[data-bg] { filter: none; } }