/**
 * Home Voucher News — Gutschein- & Gruppen-Teaser auf der Startseite
 *
 * Ausgelagert aus patterns/home-voucher-news.php (dort vorher als Inline-
 * <style>-Block, ~7,7 KB pro Seitenaufruf im HTML). Als Datei wird das CSS
 * vom Browser gecacht (immutable via assets/css/.htaccess, Issue #347).
 * Enqueue: functions.php, nur auf der Startseite (is_front_page()).
 *
 * Redesign 2026-07: Produkt zeigen statt beschreiben, Preis-Anker,
 * Benefit-Headlines, satter CTA (Abweichungsregister CD-Manual).
 */

.vri-homenews { padding: 4rem 1rem 0; }
.vri-homenews-grid { max-width: 68rem; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; }
@media (max-width: 900px) { .vri-homenews-grid { grid-template-columns: 1fr; } }
.vri-homenews-card { border-radius: 1.5rem; overflow: hidden; background: linear-gradient(180deg, rgba(37,99,235,.14), rgba(255,255,255,.04) 45%); border: 1px solid rgba(147,197,253,.28); display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.vri-homenews-card:hover { transform: translateY(-4px); border-color: rgba(147,197,253,.55); box-shadow: 0 20px 60px rgba(37,99,235,.25); }

/* Gutschein-Buehne: Paesse schweben ueber der Geschenkbox */
.vri-homenews-stage { position: relative; height: 260px; overflow: hidden; background: url('../images/home-teaser/geschenkbox.webp') center bottom / cover no-repeat; display: flex; align-items: center; justify-content: center; }
.vri-homenews-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,15,.35), rgba(9,10,15,0) 45%, rgba(9,10,15,.25)); }
.vri-homenews-stagebadge { position: absolute; top: 1rem; left: 1rem; z-index: 3; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgba(9,10,15,.65); color: #93C5FD; border: 1px solid rgba(147,197,253,.4); padding: .3rem .8rem; border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vri-homenews-pass { position: absolute; width: 190px; height: 120px; border-radius: 14px; overflow: hidden; border: 1px solid rgba(255,255,255,.25); box-shadow: 0 12px 32px rgba(0,0,0,.55); transition: transform .3s ease; }
.vri-homenews-pass img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vri-homenews-pass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,15,.05) 40%, rgba(9,10,15,.72)); }
.vri-homenews-passlabel { position: absolute; left: .75rem; bottom: .55rem; z-index: 2; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.vri-homenews-passvalue { position: absolute; right: .6rem; bottom: .5rem; z-index: 2; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: .92rem; color: #FDE047; border: 1.5px solid #EAB308; border-radius: 8px; padding: .1rem .5rem; background: rgba(9,10,15,.5); }
.vri-homenews-pass-1 { transform: rotate(-10deg) translate(-112px, -6px); z-index: 1; }
.vri-homenews-pass-2 { transform: rotate(-2deg) translate(0, -22px); z-index: 2; }
.vri-homenews-pass-3 { transform: rotate(9deg) translate(112px, -6px); z-index: 1; }
.vri-homenews-card:hover .vri-homenews-pass-1 { transform: rotate(-13deg) translate(-126px, -10px); }
.vri-homenews-card:hover .vri-homenews-pass-2 { transform: rotate(-2deg) translate(0, -30px); }
.vri-homenews-card:hover .vri-homenews-pass-3 { transform: rotate(12deg) translate(126px, -10px); }
@media (max-width: 480px) { .vri-homenews-pass { width: 158px; height: 100px; } .vri-homenews-pass-1 { transform: rotate(-10deg) translate(-88px, -6px); } .vri-homenews-pass-3 { transform: rotate(9deg) translate(88px, -6px); } }

/* Gruppen-Buehne: Schulklassen-Foto mit Preis-Anker */
.vri-homenews-photo { position: relative; height: 260px; overflow: hidden; }
.vri-homenews-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; transform: scale(1.02); transition: transform .4s ease; }
.vri-homenews-card:hover .vri-homenews-photo img { transform: scale(1.07); }
.vri-homenews-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,10,15,.15) 40%, rgba(9,10,15,.8)); }
.vri-homenews-price { position: absolute; right: 1.1rem; bottom: 1rem; z-index: 2; text-align: right; line-height: 1.15; }
.vri-homenews-price-big { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 700; font-size: 2.4rem; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.vri-homenews-price-big small { font-size: 1.1rem; font-weight: 600; color: #93C5FD; }
.vri-homenews-price-note { font-size: .8rem; color: rgba(255,255,255,.85); font-weight: 500; }

/* Karten-Body */
.vri-homenews-body { padding: 1.75rem 1.75rem 2rem; display: flex; flex-direction: column; flex: 1; text-align: left; }
.vri-homenews h2 { color: #fff; font-size: clamp(1.35rem, 2.6vw, 1.7rem); font-weight: 700; line-height: 1.25; margin: 0 0 .6rem; }
.vri-homenews-text { color: rgba(255,255,255,.72); font-size: .98rem; line-height: 1.6; margin: 0 0 1.1rem; }
.vri-homenews-checks { list-style: none; display: grid; gap: .45rem; margin: 0 0 1.4rem; padding: 0; }
.vri-homenews-checks li { display: flex; align-items: flex-start; gap: .6rem; color: rgba(255,255,255,.85); font-size: .93rem; }
.vri-homenews-checks svg { flex-shrink: 0; margin-top: .18rem; }
/* Gold NUR als Wertangabe (CD-Manual Kap. 3.4) */
.vri-homenews-values { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.vri-homenews-values span { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-weight: 600; font-size: .95rem; padding: .4rem 1rem; border-radius: 10px; border: 1.5px solid rgba(234,179,8,.45); color: #FDE047; background: rgba(234,179,8,.08); }
.vri-homenews-values .vri-homenews-values-free { border-style: dashed; color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.35); background: transparent; font-family: inherit; font-weight: 500; }
.vri-homenews-uses { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; }
.vri-homenews-uses span { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 500; color: rgba(255,255,255,.85); padding: .4rem .9rem; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }

/* Satter CTA — Abweichung von Kap. 2.3, siehe Abweichungsregister */
.vri-homenews-ctarow { margin-top: auto; }
.vri-homenews-cta { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 52px; background: linear-gradient(180deg, #2563eb, #1d4ed8); color: #fff; font-weight: 700; font-size: 1.02rem; padding: .9rem 1.75rem; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px rgba(37,99,235,.4); transition: transform .2s ease, box-shadow .2s ease; }
.vri-homenews-cta:hover { transform: scale(1.02); box-shadow: 0 12px 32px rgba(37,99,235,.55); color: #fff; }
.vri-homenews-cta:focus-visible { outline: 3px solid #93C5FD; outline-offset: 3px; }
.vri-homenews-sub { display: block; margin-top: .7rem; color: rgba(255,255,255,.5); font-size: .82rem; text-align: center; }
@media (max-width: 640px) { .vri-homenews-body { padding: 1.5rem 1.25rem 1.75rem; } }
@media (prefers-reduced-motion: reduce) { .vri-homenews-card, .vri-homenews-pass, .vri-homenews-photo img, .vri-homenews-cta { transition: none; } }