body[data-product="privathaftpflicht"] .explain-card {
  border-color: #cdb6e3;
  background: radial-gradient(circle at 100% 0%, #e4d3f2, transparent 13rem), linear-gradient(145deg, #fff, #f4ebfb);
}

body[data-product="privathaftpflicht"] .card-tint {
  --tile-surface: #ead8fa;
  --tile-surface-end: #fbf7ff;
  --tile-border: #c8a1e0;
  --tile-icon: #dec3f1;
  --tile-ring: rgba(127, 75, 153, .3);
  --tile-highlight: #9852bd;
  --tile-ink: #753c93;
  position: relative;
  overflow: hidden;
  border-color: var(--tile-border);
  background: radial-gradient(circle at 100% 0%, var(--tile-icon) 0, transparent 12rem), linear-gradient(145deg, var(--tile-surface) 0%, var(--tile-surface) 64%, var(--tile-surface-end) 100%);
  box-shadow: inset 0 5px 0 var(--tile-highlight), 0 10px 26px rgba(74, 41, 92, .07);
}

body[data-product="privathaftpflicht"] .card-tint::after {
  position: absolute;
  right: -2.8rem;
  bottom: -3rem;
  width: 9rem;
  height: 9rem;
  border: 1px solid var(--tile-ring);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

body[data-product="privathaftpflicht"] .card-tint .simple-icon,
body[data-product="privathaftpflicht"] .card-tint .consider-number {
  position: relative;
  z-index: 1;
  color: var(--tile-ink);
  background: var(--tile-icon);
}

body[data-product="privathaftpflicht"] .card-tint > :not(.simple-icon):not(.consider-number) {
  position: relative;
  z-index: 1;
}

body[data-product="privathaftpflicht"] .card-tint--lilac {
  --tile-surface: #ead8fa;
  --tile-surface-end: #fbf7ff;
  --tile-border: #c8a1e0;
  --tile-icon: #dec3f1;
  --tile-ring: rgba(127, 75, 153, .3);
  --tile-highlight: #9852bd;
  --tile-ink: #753c93;
}

body[data-product="privathaftpflicht"] .card-tint--blue {
  --tile-surface: #dce5ff;
  --tile-surface-end: #f7f9ff;
  --tile-border: #aec2ed;
  --tile-icon: #c6d6f6;
  --tile-ring: rgba(76, 111, 180, .3);
  --tile-highlight: #5976ca;
  --tile-ink: #49679d;
}

body[data-product="privathaftpflicht"] .card-tint--indigo {
  --tile-surface: #e2ddff;
  --tile-surface-end: #faf9ff;
  --tile-border: #b9afe5;
  --tile-icon: #d0c8f2;
  --tile-ring: rgba(101, 83, 151, .3);
  --tile-highlight: #7261bd;
  --tile-ink: #6250a1;
}

body[data-product="privathaftpflicht"] .card-tint--violet {
  --tile-surface: #e9dafa;
  --tile-surface-end: #faf7ff;
  --tile-border: #c3a8e2;
  --tile-icon: #d4bdef;
  --tile-ring: rgba(129, 80, 180, .3);
  --tile-highlight: #8356ba;
  --tile-ink: #70449e;
}

body[data-product="privathaftpflicht"] .card-tint--sky {
  --tile-surface: #d3e7ff;
  --tile-surface-end: #f5faff;
  --tile-border: #9dc4ee;
  --tile-icon: #b9d8f8;
  --tile-ring: rgba(61, 126, 194, .3);
  --tile-highlight: #478acf;
  --tile-ink: #3e71a9;
}

body[data-product="privathaftpflicht"] .card-tint--periwinkle {
  --tile-surface: #d8e6ff;
  --tile-surface-end: #f5f9ff;
  --tile-border: #abc7ef;
  --tile-icon: #c0d8f7;
  --tile-ring: rgba(70, 120, 190, .3);
  --tile-highlight: #4e82cf;
  --tile-ink: #426ca8;
}

body[data-product="privathaftpflicht"] .page-cta--overview-style {
  padding: 0 0 clamp(58px, 8vw, 96px);
  color: var(--ink);
  background: #fbf8fd;
}

body[data-product="privathaftpflicht"] .page-cta--overview-style .page-cta-grid {
  overflow: hidden;
  padding: clamp(25px, 4.6vw, 44px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 27px;
  color: #fff;
  background: radial-gradient(circle at 86% 16%, rgba(221, 130, 228, .34), transparent 19rem), #211833;
  box-shadow: 0 17px 34px rgba(47, 26, 62, .17);
}

body[data-product="privathaftpflicht"] .page-cta--overview-style h2 { color: #fff; }
body[data-product="privathaftpflicht"] .page-cta--overview-style .button-primary { background: linear-gradient(135deg, #e487cf, #ae59d4); }

@media (max-width: 720px) {
  body[data-product="privathaftpflicht"] .page-cta--overview-style .page-cta-grid { padding: 27px 24px; }
}
