/* Ein Katalog für Übersicht und Vergleich; Inhalte liegen in offers.json. */
.offer-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 26px; width: min(950px, calc(100vw - 40px)) !important; margin: 24px auto !important; position: relative !important; left: auto !important; height: auto !important; }
.offer-card { overflow: hidden; background: var(--brand-paper); border-radius: 15px; color: var(--brand-ink); font: 12px/1.6 var(--brand-font); text-align: left; }
.offer-image { display: block; padding: 20px 25px 0; }
.offer-image img { width: 100%; height: 150px; object-fit: cover; border-radius: 12px; }
.offer-body { padding: 18px 25px 24px; }
.offer-card h2 { margin: 0; font: 600 20px/1.3 var(--brand-font); }
.offer-card a { color: inherit; text-decoration: none; }
.offer-category { margin: 5px 0 20px; }
.offer-info p { font: inherit; margin: 7px 0; }
.offer-button { display: block; margin-top: 20px; text-align: center; border: 1px solid var(--brand-ink); border-radius: 10px; padding: 10px; font-weight: 600; transition: background .2s, color .2s; }
.offer-card .offer-button:hover { color: white; background: var(--brand-ink); }
.navigation-toggle { display: none; }
/* Native scrollabhängige Hintergrundeffekte; ohne Unterstützung bleibt das Originalbild sichtbar. */
@supports (animation-timeline: view()) {
  [data-scroll-effect] { animation-timeline: view(); animation-range: cover 0% cover 100%; animation-fill-mode: both; }
  [data-scroll-effect="BgFade"] { animation-name: background-fade; }
  [data-scroll-effect="BgCloseUp"] { animation-name: background-close-up; }
  [data-scroll-effect="BgParallax"] { animation-name: background-parallax; }
  @keyframes background-fade { from { opacity: .2; } to { opacity: 1; } }
  @keyframes background-close-up { from { transform: scale(1.15); } to { transform: scale(1); } }
  @keyframes background-parallax { from { transform: translateY(-30px) scale(1.1); } to { transform: translateY(30px) scale(1.1); } }
}
.offer-card .offer-details { display: block; margin-top: 12px; font-size: 11px; text-align: center; text-decoration: underline; }
.offer-card h2 { margin: 0 0 18px; }
.offer-category { margin: 0 0 5px; }