/* WSP Content – Frontend (WhatsApp-Chat, Popup, Bewertungen, FAQ, Formular) */

/* ---- WhatsApp-Chat-Widget ---- */
.wsp-wa { position: fixed; right: 18px; bottom: 18px; z-index: 9998; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wsp-wa__toggle {
  width: 58px; height: 58px; border: 0; border-radius: 50%;
  background: #25d366; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wsp-wa__toggle svg { width: 31px; height: 31px; }
.wsp-wa__toggle:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.wsp-wa__chat {
  width: min(340px, calc(100vw - 40px));
  border-radius: 16px; overflow: hidden;
  background: #efe7dd;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
  transform-origin: bottom right;
  animation: wsp-chat-pop .28s cubic-bezier(.34, 1.4, .64, 1);
}
.wsp-wa__chat[hidden] { display: none; }
@keyframes wsp-chat-pop { from { opacity: 0; transform: translateY(16px) scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wsp-wa__chat { animation: none; } }
.wsp-wa__head {
  display: flex; align-items: center; gap: 10px;
  background: #075e54; color: #fff; padding: 12px 14px;
}
.wsp-wa__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; }
.wsp-wa__avatar--initial { display: flex; align-items: center; justify-content: center; font-weight: 700; color: #075e54; font-size: 1.1rem; }
.wsp-wa__meta { flex: 1; line-height: 1.25; }
.wsp-wa__meta strong { display: block; font-size: .95rem; }
.wsp-wa__meta span { font-size: .75rem; opacity: .8; }
.wsp-wa__close { border: 0; background: none; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; padding: 2px 6px; opacity: .85; }
.wsp-wa__close:hover { opacity: 1; }
.wsp-wa__body {
  padding: 16px 14px;
  background-image: linear-gradient(rgba(239, 231, 221, .93), rgba(239, 231, 221, .93));
  min-height: 90px;
}
.wsp-wa__bubble {
  background: #fff; border-radius: 0 12px 12px 12px;
  padding: 10px 13px; font-size: .92rem; line-height: 1.45; color: #1e2a21;
  max-width: 92%; box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  animation: wsp-bubble .4s ease .15s backwards;
}
@keyframes wsp-bubble { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wsp-wa__form { display: flex; gap: 8px; padding: 10px 12px 12px; background: #efe7dd; }
.wsp-wa__form input {
  flex: 1; border: 0; border-radius: 999px; padding: 11px 16px;
  font-size: .95rem; font-family: inherit; background: #fff; color: #1e2a21;
}
.wsp-wa__form input:focus { outline: 2px solid #25d366; }
.wsp-wa__form button {
  width: 44px; height: 44px; flex: 0 0 auto; border: 0; border-radius: 50%;
  background: #25d366; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s ease, background .15s ease;
}
.wsp-wa__form button:hover { background: #1ebe5b; transform: scale(1.06); }

/* ---- Popup ---- */
.wsp-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.wsp-popup[hidden] { display: none; }
.wsp-popup__backdrop { position: absolute; inset: 0; background: rgba(20, 30, 22, .55); backdrop-filter: blur(3px); }
.wsp-popup__box {
  position: relative; background: #fff; color: #1e2a21;
  border-radius: 16px; padding: 34px 28px 28px;
  max-width: 460px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
  animation: wsp-pop .3s ease;
}
@keyframes wsp-pop { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wsp-popup__box, .wsp-wa__bubble { animation: none; } }
.wsp-popup__close { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 26px; line-height: 1; color: #6f7f72; cursor: pointer; padding: 4px 8px; }
.wsp-popup__close:hover { color: #1e2a21; }
.wsp-popup__title { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.2; }
.wsp-popup__text { margin: 0 0 16px; }
.wsp-popup__button { display: inline-block; background: #2f7a43; color: #fff !important; padding: 12px 22px; border-radius: 9px; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.wsp-popup__button:hover { background: #245f35; }

/* ---- Bewertungen ---- */
.wsp-reviews { position: relative; }
.wsp-reviews__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 6px 2px 14px; -webkit-overflow-scrolling: touch; }
.wsp-review {
  /* Wenige Karten wachsen und füllen die Zeile; viele Karten scrollen. */
  flex: 1 0 min(340px, 85%); max-width: 560px; scroll-snap-align: start; margin: 0;
  background: #fff; border: 1px solid #dce4db; border-radius: 14px; padding: 22px;
  box-shadow: 0 2px 8px rgba(30, 42, 33, .06);
  display: flex; flex-direction: column;
  transition: transform .22s ease, box-shadow .22s ease;
}
.wsp-review:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(30, 42, 33, .13); }
.wsp-review__stars { color: #e8a723; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: 8px; }
.wsp-review__text { margin: 0 0 12px; border: 0; padding: 0; font-style: normal; flex: 1; }
.wsp-review__text p { margin: 0; }
.wsp-review__meta { font-size: .9rem; color: #4a5a4e; }
.wsp-review__source { display: block; font-size: .78rem; color: #6f7f72; }
.wsp-reviews__nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.wsp-reviews__btn { border: 1px solid #dce4db; background: #fff; color: #2f7a43; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.wsp-reviews__btn:hover { background: #2f7a43; color: #fff; transform: scale(1.07); }
.wsp-reviews__all { margin-top: 8px; font-size: .9rem; }

/* ---- FAQ: Blatt-Marker, schwebt beim Öffnen ---- */
.wsp-faq__item { border: 1px solid #dce4db; border-radius: 12px; background: #fff; margin-bottom: 10px; overflow: hidden; transition: box-shadow .25s ease, border-color .25s ease; }
.wsp-faq__item:hover { border-color: #9fc7a8; }
.wsp-faq__item[open] { box-shadow: 0 8px 24px rgba(30, 42, 33, .1); border-color: #9fc7a8; }
.wsp-faq__question { cursor: pointer; padding: 15px 18px 15px 52px; font-weight: 700; list-style: none; position: relative; }
.wsp-faq__question::-webkit-details-marker { display: none; }
.wsp-faq__question::before {
  content: ""; position: absolute; left: 16px; top: 50%;
  width: 22px; height: 22px; margin-top: -11px;
  background-color: #2f7a43;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>") center / contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8z'/></svg>") center / contain no-repeat;
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
}
.wsp-faq__item[open] .wsp-faq__question::before {
  transform: translateY(-7px) rotate(-24deg) scale(1.15);
  animation: wsp-leaf-float 2.6s ease-in-out .45s infinite;
}
@keyframes wsp-leaf-float {
  0%, 100% { transform: translateY(-7px) rotate(-24deg) scale(1.15); }
  50% { transform: translateY(-11px) rotate(-14deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .wsp-faq__item[open] .wsp-faq__question::before { animation: none; transform: none; }
}
.wsp-faq__answer { padding: 0 18px 16px 52px; }
.wsp-faq__answer p:first-child { margin-top: 0; }

/* Auf-/Zuklappen wird per JavaScript animiert (browserunabhängig). */

/* ---- Kontaktformular ---- */
.wsp-form { max-width: 640px; }
.wsp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .wsp-form__grid { grid-template-columns: 1fr; } }
.wsp-form label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 4px; }
.wsp-form label .req { color: #b00; }
.wsp-form input[type="text"], .wsp-form input[type="email"], .wsp-form input[type="tel"],
.wsp-form select, .wsp-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid #c9d4c9; border-radius: 9px;
  font: inherit; background: #fff; color: #1e2a21; box-sizing: border-box;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.wsp-form input:focus, .wsp-form select:focus, .wsp-form textarea:focus {
  outline: none; border-color: #2f7a43; box-shadow: 0 0 0 3px rgba(47, 122, 67, .15);
}
.wsp-form__field { margin-bottom: 14px; }
.wsp-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; margin: 14px 0; }
.wsp-form__consent input { margin-top: 3px; }
.wsp-form__submit {
  background: #2f7a43; color: #fff; border: 0; border-radius: 9px;
  padding: 14px 30px; font: inherit; font-weight: 700; cursor: pointer;
  transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.wsp-form__submit:hover { background: #245f35; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 42, 33, .18); }
.wsp-form__hp { position: absolute !important; left: -9999px !important; height: 1px; width: 1px; overflow: hidden; }
.wsp-form__notice { border-radius: 10px; padding: 14px 18px; margin-bottom: 18px; }
.wsp-form__notice--ok { background: #e4f0e6; border: 1px solid #2f7a43; color: #1d4a2a; }
.wsp-form__notice--err { background: #fbeaea; border: 1px solid #c0392b; color: #7c2018; }

/* ---- Stellenliste ---- */
.wsp-jobs { display: grid; gap: 14px; margin: 26px 0; }
.wsp-job {
  display: block; text-decoration: none;
  background: #fff; border: 1px solid #dce4db; border-radius: 14px;
  padding: 20px 24px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wsp-job:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30, 42, 33, .12); border-color: #9fc7a8; }
.wsp-job__title { display: block; font-weight: 700; font-size: 1.15rem; color: #1e2a21; margin-bottom: 8px; }
.wsp-job__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.wsp-job__chip { font-size: .8rem; font-weight: 600; background: #e4f0e6; color: #245f35; border-radius: 999px; padding: 4px 12px; }
.wsp-job__more { font-weight: 700; color: #2f7a43; }
.wsp-job:hover .wsp-job__more { text-decoration: underline; }