body .wrapper .deals { background-color: var(--osa-paper); }
body .wrapper .offers { background-color: var(--osa-paper); }

body .wrapper .deal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 24px; }

body .wrapper .deal-card { background-color: var(--osa-card); border: 1px solid var(--osa-line); display: flex; flex-direction: column; box-shadow: var(--osa-shadow-1); transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
body .wrapper .deal-card:hover { transform: translateY(-6px); box-shadow: var(--osa-shadow-2); border-color: #cdbfa0; }

body .wrapper .deal-media { position: relative; height: 180px; overflow: hidden; }
body .wrapper .deal-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body .wrapper .deal-media-orange { background-image: linear-gradient(135deg, #6f5fc4 0%, #3a2a72 100%); }
body .wrapper .deal-media-white { background-image: linear-gradient(135deg, #b6aeff 0%, #6f5fc4 100%); }
body .wrapper .deal-media-blue { background-image: linear-gradient(135deg, #5a4a9a 0%, #2c1e63 100%); }
body .wrapper .deal-media-green { background-image: linear-gradient(135deg, #8a7ce6 0%, #3a2a72 100%); }
body .wrapper .deal-media-violet { background-image: linear-gradient(135deg, #b6aeff 0%, #8a7ce6 100%); }

body .wrapper .deal-badge { position: absolute; top: 14px; left: 14px; background-color: var(--osa-lime); color: var(--osa-ink); font-size: 12px; font-weight: 700; padding: 5px 11px; }
body .wrapper .deal-badge.badge-config { background-color: var(--osa-ink); color: #FFFFFF; }
body .wrapper .deal-badge.badge-stock { background-color: #A49CFF; color: var(--osa-ink); }
body .wrapper .deal-badge.badge-used { background-color: var(--osa-mist); color: var(--osa-ink); }

body .wrapper .deal-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
body .wrapper .deal-meta { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #7a6f57; }
body .wrapper .deal-name { margin: 0; font-size: 21px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; color: var(--osa-ink); }
body .wrapper .deal-trim { margin: 4px 0 0; font-size: 14px; color: var(--osa-muted); }
body .wrapper .deal-specs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
body .wrapper .deal-specs li { font-size: 12px; font-weight: 400; color: var(--osa-ink); background-color: var(--osa-mist); padding: 4px 9px; }
body .wrapper .deal-price { margin: 16px 0 0; font-size: 16px; font-weight: 400; color: var(--osa-ink); }
body .wrapper .deal-price strong { font-size: 22px; font-weight: 700; color: var(--osa-ink); }
body .wrapper .deal-terms { margin: 8px 0 0; font-size: 12px; color: #7a6f57; line-height: 1.5; }
body .wrapper .deal-link { margin-top: auto; padding-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--osa-ink); text-decoration: none; }
body .wrapper .deal-link .arrow { transition: transform 0.25s ease; }
body .wrapper .deal-link:hover .arrow { transform: translateX(4px); }

body .wrapper .offers .offer-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
body .wrapper .offers .offer-tab { font-size: 14px; font-weight: 700; color: var(--osa-ink); padding: 11px 18px; border: 1px solid #cdbfa0; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
body .wrapper .offers .offer-tab:hover { background-color: var(--osa-mist); }
body .wrapper .offers .offer-tab.active { background-color: var(--osa-ink); color: #FFFFFF; border-color: var(--osa-ink); }
body .wrapper .offers .offer-grid .deal-card[data-cat] { display: none; }
body .wrapper .offers .offer-grid .deal-card.is-shown { display: flex; }

@media (min-width: 600px) {
  body .wrapper .deal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  body .wrapper .deal-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* Slot-Artworks als Violett-Duoton: die Originale sind bunt durcheinander
   (Candy-Pink, Tuerkis, Orange) und kollidieren mit Violett/Lime.
   WICHTIG: Der Duoton laeuft ausschliesslich ueber `filter`. Die frueher hier
   verwendete Farbebene mit `mix-blend-mode: color` hat auf Casino- und
   Review-Seiten das Motiv komplett uebermalt (nur der Verlauf war zu sehen) --
   Blend-Modi sind abhaengig davon, wie der Browser die Ebene zusammensetzt, und
   damit hier nicht verlaesslich. Die Filterkette ist es. */
body .wrapper .deal-media img { filter: grayscale(1) sepia(1) hue-rotate(212deg) saturate(2.4) brightness(0.92) contrast(1.06); }

/* Dezente Violett-Waesche mit normaler Deckung (kein Blend-Modus) --
   zieht die Motive zusaetzlich zusammen, ohne sie zu verdecken. */
body .wrapper .deal-media::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: linear-gradient(150deg, rgba(138, 124, 230, 0.34) 0%, rgba(75, 60, 134, 0.30) 50%, rgba(26, 16, 63, 0.34) 100%); pointer-events: none; }

/* Bild-Overlay dezent (Tiefe/Lesbarkeit), Info statt Deko */
body .wrapper .deal-media::after { content: ""; position: absolute; inset: 0; z-index: 2; background-image: linear-gradient(180deg, rgba(26, 16, 63, 0.10) 0%, rgba(26, 16, 63, 0.34) 100%); pointer-events: none; transition: background-image 0.35s ease; }
body .wrapper .deal-card:hover .deal-media::after { background-image: linear-gradient(180deg, rgba(26, 16, 63, 0.02) 0%, rgba(26, 16, 63, 0.22) 100%); }
body .wrapper .deal-media .deal-badge { z-index: 3; }

/* RTP-Chip oben rechts auf dem Bild (die wichtigste Zahl auf einen Blick) */
body .wrapper .deal-media .deal-rtp { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: baseline; gap: 5px; background-color: rgba(21, 12, 51, 0.85); border: 1px solid rgba(215, 255, 53, 0.55); padding: 6px 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; color: #FFFFFF; }
body .wrapper .deal-media .deal-rtp .deal-rtp-val { font-size: 14px; letter-spacing: 0; color: var(--osa-lime); }