/* Werbebox „Ihre eigene Website ab 29 €“ – wiederverwendbar auf allen DC-Seiten.
   Farben über Variablen überschreibbar: --wb-akzent, --wb-tinte, --wb-grau, --wb-linie. */
.wb{--wb-akzent:#C50050;--wb-akzent-dunkel:#A10042;--wb-akzent-hell:#FFF0F5;--wb-tinte:#0B204E;--wb-grau:#4A5C7E;--wb-linie:#DCE2F0;
  display:grid;grid-template-columns:1fr 300px;background:#fff;border:1px solid var(--wb-linie);border-radius:22px;overflow:hidden;
  color:var(--wb-tinte);box-shadow:0 8px 28px -18px rgba(11,32,78,.35);margin-top:22px}
.wb *{box-sizing:border-box}
.wb h2,.wb h3{font-family:'Fraunces',Georgia,serif;margin:0;letter-spacing:-.01em}

/* Hauptteil: Text + Bild, darunter die vier Schritte */
.wb-haupt{display:flex;flex-direction:column;min-width:0}
.wb-oben{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:250px}
.wb-text{position:relative;z-index:1;padding:28px 0 18px 30px}
.wb-badge{display:inline-flex;align-items:center;gap:7px;background:var(--wb-akzent-hell);color:var(--wb-akzent);border-radius:999px;padding:6px 14px;font-weight:700;font-size:13.5px}
.wb-badge svg{width:14px;height:14px;fill:currentColor}
.wb-text h2{font-size:clamp(26px,3vw,36px);line-height:1.08;margin-top:16px}
.wb-text h2 em{font-style:normal;color:var(--wb-akzent)}
.wb-text p{margin:12px 0 0;color:var(--wb-grau);font-size:15.5px;line-height:1.55;max-width:46ch}
.wb-bild{position:relative;overflow:hidden}
.wb-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.04)}
.wb-bild::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#fff 0,rgba(255,255,255,.55) 22%,rgba(255,255,255,0) 50%)}
.wb-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;list-style:none;margin:0;padding:18px 22px 24px;border-top:1px solid var(--wb-linie)}
.wb-schritt{position:relative;text-align:center;padding:0 6px}
.wb-schritt+.wb-schritt::before{content:"→";position:absolute;left:-10px;top:14px;color:var(--wb-akzent);font-size:18px}
.wb-icon{width:46px;height:46px;margin:0 auto 8px;display:grid;place-items:center}
.wb-icon svg{width:40px;height:40px;fill:none;stroke:var(--wb-tinte);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wb-icon svg .a{stroke:var(--wb-akzent)}
.wb-schritt h3{font-size:16.5px}
.wb-schritt p{margin:4px 0 0;font-size:13.5px;line-height:1.4;color:var(--wb-grau)}

/* Seitenspalte: KI-Pflege, Vorteile, Preis, Buttons */
.wb-seite{background:linear-gradient(160deg,#FFF5F8 0,#FFE9F0 100%);border-left:1px solid #F6D3E0;padding:26px 24px;display:flex;flex-direction:column}
.wb-ki{display:flex;gap:12px;align-items:flex-start}
.wb-ki-icon{flex:none;width:46px;height:46px;border-radius:12px;background:var(--wb-akzent);color:#fff;display:grid;place-items:center;font:800 15px 'Manrope',Arial,sans-serif;letter-spacing:.02em}
.wb-ki h3{font-size:18px;line-height:1.2}
.wb-ki p{margin:4px 0 0;font-size:13.5px;line-height:1.45;color:var(--wb-grau)}
.wb-vorteile{list-style:none;padding:0;margin:14px 0 0;font-size:14.5px;font-weight:600}
.wb-vorteile li{padding:3px 0 3px 24px;position:relative}
.wb-vorteile li::before{content:"";position:absolute;left:3px;top:9px;width:11px;height:6px;border-left:2.5px solid var(--wb-akzent);border-bottom:2.5px solid var(--wb-akzent);transform:rotate(-45deg)}
.wb-preis{margin-top:auto;padding-top:16px;border-top:1px solid #F2C9D8;text-align:center}
.wb-preis .betrag{font-family:'Fraunces',Georgia,serif;font-weight:700;font-size:20px}
.wb-preis .betrag b{font-size:40px;color:var(--wb-akzent)}
.wb-preis small{display:block;font-weight:600;font-size:13px;color:var(--wb-grau);margin-top:-2px}
.wb-knopf{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:12px;background:var(--wb-akzent);color:#fff;text-decoration:none;font-weight:700;font-size:15.5px;border-radius:12px;padding:13px 14px}
.wb-knopf:hover{background:var(--wb-akzent-dunkel)}
.wb-beispiel{display:block;margin-top:8px;text-align:center;font-weight:700;font-size:14px;color:var(--wb-tinte);text-decoration:none;border:1.5px solid var(--wb-akzent);border-radius:12px;padding:10px 12px;background:#fff}
.wb-beispiel:hover{background:var(--wb-akzent-hell)}
.wb-hinweis{display:block;text-align:center;font-size:12.5px;color:var(--wb-grau);margin-top:8px}

@media(max-width:980px){
  .wb{grid-template-columns:1fr}
  .wb-seite{border-left:0;border-top:1px solid #F6D3E0}
  .wb-preis{margin-top:16px}
}
@media(max-width:700px){
  .wb-oben{grid-template-columns:1fr}
  .wb-bild{order:-1;height:190px}
  .wb-bild::before{background:linear-gradient(0deg,#fff 0,rgba(255,255,255,0) 45%)}
  .wb-text{padding:4px 20px 14px}
  .wb-schritte{grid-template-columns:1fr 1fr;row-gap:18px;padding:16px 14px 20px}
  .wb-schritt+.wb-schritt::before{display:none}
}