/* yourpage24 – Leistung „WhatsApp-Bestellung“ (Warenkorb mit Vorbestellung per WhatsApp) */
.wa-sec { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(90px, 10vw, 140px) var(--pad); display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.wa-sec::before { content: ""; position: absolute; z-index: -1; right: -10%; top: 10%; width: 70%; height: 80%; background: radial-gradient(closest-side, rgba(31,170,83,.22), transparent); pointer-events: none; }
.wa-copy { display: grid; gap: 22px; justify-items: start; }
.wa-copy .h2, .wa-copy .sub { text-align: left; margin: 0; }
.wa-copy .checks { margin: 4px 0 6px; }
.wa-dot { width: 8px; height: 8px; border-radius: 50%; background: #25d366; box-shadow: 0 0 10px #25d366; }
.wa-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.wa-copy .note { margin: 0; }
.wa-stage { position: relative; min-height: 600px; }
.wa-phone { position: absolute; width: min(250px, 42%); aspect-ratio: 390 / 844; border-radius: 34px; padding: 8px; background: #0b1518; box-shadow: inset 0 0 0 1.5px #2a4850, 0 40px 80px -20px #000; }
.wa-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 27px; }
.wa-phone--a { left: 0; top: 30px; transform: rotate(-5deg); }
.wa-phone--b { left: 34%; top: 0; transform: rotate(3deg); z-index: 1; }
.wa-chat { position: absolute; z-index: 2; right: 0; bottom: 10px; width: min(310px, 58%); border-radius: 18px; padding: 12px 12px 14px; background: #0b141a; box-shadow: 0 30px 70px -10px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); display: grid; gap: 8px;
  background-image: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1px); background-size: 14px 14px; }
.wa-chat-kopf { margin: 0 0 4px; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wa-ava { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #f04a30; color: #fff; font: 700 13px/1 "DM Sans", sans-serif; }
.wa-chat-kopf b { color: #e9edef; font-size: 15px; font-weight: 500; } .wa-chat-kopf small { color: #8696a0; font-size: 12px; }
.wa-bubble { justify-self: end; max-width: 92%; position: relative; padding: 8px 10px 18px; border-radius: 10px 2px 10px 10px; background: #005c4b; color: #e9edef; font-size: 13.5px; line-height: 1.4; }
.wa-bubble p { margin: 0 0 6px; } .wa-bubble p:last-of-type { margin: 0; }
.wa-bubble--in { justify-self: start; background: #202c33; border-radius: 2px 10px 10px 10px; }
.wa-time { position: absolute; right: 8px; bottom: 4px; font-size: 11px; color: rgba(233,237,239,.6); }
.wa-time i { font-style: normal; color: #53bdeb; margin-left: 2px; }
/* Auftritt: die Nachricht kommt an */
.js .wa-sec:not(.ist-da) .wa-bubble { opacity: 0; transform: translateY(14px) scale(.96); }
.wa-bubble { transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.wa-sec.ist-da .wa-bubble--in { transition-delay: 1.1s; }
@media (max-width: 960px) {
  .wa-sec { grid-template-columns: 1fr; }
  .wa-stage { min-height: 560px; max-width: 520px; width: 100%; justify-self: center; }
}
@media (max-width: 520px) {
  .wa-stage { min-height: 520px; }
  .wa-phone { width: 46%; }
  .wa-phone--b { left: 30%; }
  .wa-chat { width: 78%; right: 0; bottom: 0; }
  .wa-cta .btn { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) { .wa-bubble { transition: none; } .js .wa-sec:not(.ist-da) .wa-bubble { opacity: 1; transform: none; } }