/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — ANGEBOTSSEITE „Neue Website zum Einführungspreis“
   Geladen NUR von angebot-website.php, als letzte Stilvorlage (nach
   kursangebot.css). Trägt nur, was die Kursseite nicht hat: zwei Spalten
   im Angebot (Text links, Beispiele rechts), die Beispielbilder mit
   Etikett und den durchgestrichenen Normalpreis.
   Feldfarbe (`--feldfarbe`) kommt aus leistungsseite--orange.
   ═══════════════════════════════════════════════════════════════════════ */

.angebot-website .aw-raster { display: grid; gap: 28px; }
.angebot-website .aw-text { min-width: 0; }

/* ── Beispiele ─────────────────────────────────────────────────────────
   Ein großes Bild, zwei kleine darunter. Etikett „Beispiel“ wie im Band auf
   web-systeme/ (Pflicht: als Beispiel erkennbar, Rechtsfreigabe VHC 14.10.). */
.angebot-website .aw-beispiele {
  margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.angebot-website .aw-bsp { position: relative; display: block; min-width: 0; }
.angebot-website .aw-bsp--gross { grid-column: 1 / -1; }
.angebot-website .aw-bsp img {
  display: block; width: 100%; height: auto; border-radius: 10px;
  border: 1px solid rgba(var(--feldfarbe), .35); box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
}
.angebot-website .aw-marke {
  position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px;
  background: rgba(6, 11, 18, .82); border: 1px solid rgba(var(--feldfarbe), .65);
  color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
}
.angebot-website .aw-beispiele figcaption {
  grid-column: 1 / -1; font-size: 14px; color: var(--tx-dim2);
}

/* ── Streichpreis ──────────────────────────────────────────────────────
   Muss SICHTBAR durchgestrichen sein (Recht VHC, § 5 UWG: nur der echte
   reguläre Preis von Paket Basis). Kleiner und gedämpft, Linie in der
   Feldfarbe; „regulär“ nur für Vorleseprogramme. */
.angebot-website .aw-streich {
  margin-right: 12px; font-size: .7em; font-weight: 400; color: var(--tx-dim2);
  text-decoration: line-through; text-decoration-thickness: .12em;
  text-decoration-color: rgb(var(--feldfarbe));
}
.angebot-website .aw-vorlesen {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ── Desktop: Text und Beispiele nebeneinander ────────────────────────── */
@media (min-width: 900px) {
  .angebot-website .aw-raster {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start;
  }
  .angebot-website .aw-beispiele { margin-top: 44px; }
}