/* ===========================================================================
   KMP.digital – Partner werden  (Namespace: pw3-)
   Formsprache der Startseite.
   =========================================================================== */

.pw3{ font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; overflow-x:clip; }
.pw3 *,.pw3 *::before,.pw3 *::after{ box-sizing:border-box; }

/* ---------- Grundraster ---------- */
.pw3-sec{ padding:80px 30px; }
.pw3-sec--grey{ background:#F5F5F7; }
.pw3-sec--white{ background:#fff; }
.pw3-sec--dark{ background:linear-gradient(135deg,#0D0B2E 0%,#534AB7 100%); }
.pw3-in{ max-width:1100px; margin:0 auto; text-align:center; }

.pw3-eyebrow{ color:#7F77DD; font-size:13px; font-weight:700; letter-spacing:4px; text-transform:uppercase; margin:0 0 16px; }
.pw3-h2{ color:#0D0B2E; font-size:clamp(2rem,5vw,2.8rem); font-weight:800; line-height:1.2; margin:0 0 16px; }
.pw3-h2 .pw3-dot{ color:#7F77DD; }
.pw3-sub{ color:#666; font-size:18px; line-height:1.7; margin:0 auto 60px; max-width:680px; }

.pw3-sec--dark .pw3-eyebrow{ color:rgba(255,255,255,.6); }
.pw3-sec--dark .pw3-h2{ color:#fff; }
.pw3-sec--dark .pw3-h2 .pw3-dot{ color:rgba(255,255,255,.45); }
.pw3-sec--dark .pw3-sub{ color:rgba(255,255,255,.7); }

.pw3-rev{ opacity:0; transform:translateY(34px); transition:opacity .6s ease, transform .6s cubic-bezier(.25,.46,.45,.94); }
.pw3-rev.is-in{ opacity:1; transform:none; }

/* ===========================================================================
   1 · Hero
   =========================================================================== */
@keyframes pw3-rise{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }

.pw3-hero{ position:relative; overflow:hidden; padding:110px 30px 96px;
  background:linear-gradient(135deg,#0D0B2E 0%,#534AB7 100%); text-align:center; }
.pw3-hero::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 78% 35%, rgba(127,119,221,.28) 0%, transparent 70%); }
.pw3-hero__in{ position:relative; z-index:1; max-width:860px; margin:0 auto; }

.pw3-hero__label{ color:rgba(255,255,255,.55); font-size:13px; font-weight:700; letter-spacing:6px; text-transform:uppercase; margin:0 0 28px;
  opacity:0; animation:pw3-rise .8s cubic-bezier(.25,.46,.45,.94) .10s forwards; }
.pw3-hero__h1{ color:#fff; font-size:clamp(1.9rem,5.6vw,3.4rem); font-weight:800; line-height:1.12; letter-spacing:-.02em; margin:0 0 22px;
  opacity:0; animation:pw3-rise .8s cubic-bezier(.25,.46,.45,.94) .22s forwards; }
.pw3-hero__h1 .pw3-dot{ color:#9C95F0; }
.pw3-hero__text{ color:rgba(255,255,255,.78); font-size:clamp(1rem,2vw,1.12rem); line-height:1.8; max-width:660px; margin:0 auto 20px;
  opacity:0; animation:pw3-rise .8s cubic-bezier(.25,.46,.45,.94) .34s forwards; }
.pw3-hero__note{ display:inline-block; text-align:left; max-width:620px; margin:0 auto 34px; padding:14px 20px;
  background:rgba(255,255,255,.08); border-left:3px solid rgba(255,255,255,.45); border-radius:0 12px 12px 0;
  color:rgba(255,255,255,.72); font-size:15px; line-height:1.7;
  opacity:0; animation:pw3-rise .8s cubic-bezier(.25,.46,.45,.94) .46s forwards; }
.pw3-hero__note b{ color:#fff; font-weight:700; }

.pw3-hero__cta{ display:flex; gap:16px; justify-content:center; align-items:center; flex-wrap:wrap;
  opacity:0; animation:pw3-rise .8s cubic-bezier(.25,.46,.45,.94) .58s forwards; }
.pw3-btn{ background:#fff; color:#0D0B2E; padding:17px 36px; border-radius:12px; font-size:16px; font-weight:700;
  text-decoration:none; display:inline-block; border:0; cursor:pointer; font-family:inherit;
  transition:transform .3s ease, box-shadow .3s ease; }
.pw3-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(0,0,0,.32); color:#0D0B2E; }
.pw3-btn--solid{ background:#7F77DD; color:#fff; }
.pw3-btn--solid:hover{ background:#534AB7; color:#fff; box-shadow:0 14px 34px rgba(127,119,221,.4); }
.pw3-btn[disabled]{ opacity:.55; cursor:progress; transform:none; }
.pw3-btn2{ color:rgba(255,255,255,.9); font-size:15px; font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:8px; padding:14px 2px; }
.pw3-btn2 span{ position:relative; }
.pw3-btn2 span::after{ content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:rgba(255,255,255,.55);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.pw3-btn2:hover{ color:#fff; }
.pw3-btn2:hover span::after{ transform:scaleX(1); }
.pw3-btn2 em{ font-style:normal; transition:transform .25s ease; }
.pw3-btn2:hover em{ transform:translateX(4px); }

/* ===========================================================================
   2 · Transparenz-Karte
   =========================================================================== */
.pw3-note{
  background:#fff; border-radius:20px; padding:48px 44px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  max-width:880px; margin:0 auto; text-align:left; position:relative; overflow:hidden;
}
.pw3-note::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background:linear-gradient(180deg,#7F77DD,#534AB7); }
.pw3-note__ic{ width:56px; height:56px; background:#F0EFFE; border-radius:14px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:center; }
.pw3-note__lead{ color:#0D0B2E; font-size:clamp(1.15rem,2.4vw,1.45rem); font-weight:700; line-height:1.45; margin:0 0 18px; }
.pw3-note p{ color:#666; font-size:16px; line-height:1.8; margin:0 0 14px; }
.pw3-note p:last-child{ margin-bottom:0; }

/* ===========================================================================
   3 · Vorteile
   =========================================================================== */
.pw3-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.pw3-card{ background:#fff; border-radius:20px; padding:40px 28px; box-shadow:0 4px 24px rgba(0,0,0,.07);
  transition:transform .4s ease, box-shadow .4s ease; }
.pw3-card:hover{ transform:translateY(-10px); box-shadow:0 20px 50px rgba(127,119,221,.2); }
.pw3-card__ic{ width:64px; height:64px; background:#F0EFFE; border-radius:16px; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center; transition:transform .4s ease; }
.pw3-card:hover .pw3-card__ic{ transform:scale(1.08) rotate(-4deg); }
.pw3-card h3{ color:#0D0B2E; font-size:18px; font-weight:700; margin:0 0 12px; line-height:1.35; }
.pw3-card p{ color:#888; font-size:15px; line-height:1.7; margin:0; }
.pw3-fine{ color:#8a88a3; font-size:15px; margin:44px auto 0; max-width:620px; line-height:1.7; }

/* ===========================================================================
   4 · Wen wir suchen (dunkel)
   =========================================================================== */
.pw3-checks{ list-style:none; margin:0 auto; padding:0; max-width:820px; display:grid; gap:14px; text-align:left; }
.pw3-check{ display:flex; align-items:flex-start; gap:16px;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:20px 24px;
  color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.7;
  transition:transform .35s ease, background .35s ease; }
.pw3-check:hover{ transform:translateX(6px); background:rgba(255,255,255,.11); }
.pw3-check__ic{ flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center; margin-top:1px; }

/* ===========================================================================
   5 · Ablauf (Linie wie auf der Startseite)
   =========================================================================== */
.pw3-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; position:relative; }
.pw3-line{ position:absolute; top:32px; left:15%; right:15%; height:2px; background:rgba(13,11,46,.10); border-radius:2px; overflow:hidden; z-index:0; }
.pw3-fill{ display:block; height:100%; width:0; background:linear-gradient(90deg,#7F77DD,#534AB7); transition:width 1.2s cubic-bezier(.4,0,.2,1) .25s; }
.pw3-steps.is-revealed .pw3-fill{ width:100%; }

.pw3-step{ position:relative; z-index:1; opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.pw3-steps.is-revealed .pw3-step{ opacity:1; transform:none; }
.pw3-steps.is-revealed .pw3-step:nth-child(3){ transition-delay:.12s; }
.pw3-steps.is-revealed .pw3-step:nth-child(4){ transition-delay:.24s; }
.pw3-num{ width:64px; height:64px; background:#7F77DD; border-radius:50%; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.5); transition:transform .55s cubic-bezier(.34,1.25,.64,1), opacity .4s ease, box-shadow .3s ease; }
.pw3-num span{ color:#fff; font-size:24px; font-weight:800; }
.pw3-steps.is-revealed .pw3-num{ opacity:1; transform:scale(1); }
.pw3-steps.is-revealed .pw3-step:nth-child(2) .pw3-num{ transition-delay:.10s; }
.pw3-steps.is-revealed .pw3-step:nth-child(3) .pw3-num{ transition-delay:.22s; }
.pw3-steps.is-revealed .pw3-step:nth-child(4) .pw3-num{ transition-delay:.34s; }
.pw3-step:hover .pw3-num{ transform:scale(1.06); box-shadow:0 0 0 8px rgba(127,119,221,.2), 0 10px 28px rgba(13,11,46,.18); }
.pw3-step h3{ color:#0D0B2E; font-size:20px; font-weight:700; margin:0 0 12px; }
.pw3-step p{ color:#888; font-size:15px; line-height:1.7; margin:0; }

/* ===========================================================================
   6 · FAQ (Startseiten-Akkordeon)
   =========================================================================== */
.pw3-faq{ max-width:820px; margin:0 auto; text-align:left; }
.pw3-faqitem{ background:#fff; border-radius:16px; margin-bottom:12px; box-shadow:0 2px 12px rgba(0,0,0,.06); overflow:hidden; }
.pw3-faqitem summary{ list-style:none; cursor:pointer; padding:24px 28px; display:flex; justify-content:space-between;
  align-items:center; gap:16px; color:#0D0B2E; font-size:17px; font-weight:600; }
.pw3-faqitem summary::-webkit-details-marker{ display:none; }
.pw3-faqitem summary::after{ content:'+'; color:#7F77DD; font-size:24px; font-weight:300; flex-shrink:0;
  transition:transform .3s ease; }
.pw3-faqitem[open] summary::after{ transform:rotate(45deg); }
.pw3-faqitem__a{ color:#888; font-size:15px; line-height:1.7; padding:0 28px 24px; margin:0; }

/* ===========================================================================
   7 · Formular
   =========================================================================== */
.pw3-formwrap{ display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:start; text-align:left; }
.pw3-formwrap .pw3-eyebrow,.pw3-formwrap .pw3-h2{ text-align:left; }
.pw3-formwrap p{ color:#666; font-size:16.5px; line-height:1.8; margin:0 0 14px; }
.pw3-formintro__ic{ width:56px; height:56px; background:#F0EFFE; border-radius:14px; margin:0 0 22px;
  display:flex; align-items:center; justify-content:center; }

.pw3-form{ display:grid; grid-template-columns:1fr 1fr; gap:18px;
  background:#fff; border-radius:20px; padding:36px; box-shadow:0 4px 24px rgba(0,0,0,.09); }
.pw3-field{ display:flex; flex-direction:column; }
.pw3-field--full{ grid-column:1 / -1; }
.pw3-field label{ color:#0D0B2E; font-size:14px; font-weight:700; margin-bottom:8px; }
.pw3-field label i{ font-style:normal; color:#7F77DD; }
.pw3-opt{ font-weight:500; color:#8a88a3; }
.pw3-form input,.pw3-form select,.pw3-form textarea{
  width:100%; padding:13px 15px; border:1.5px solid rgba(13,11,46,.12); border-radius:12px; background:#fff;
  font:inherit; font-size:15px; color:#0D0B2E; transition:border-color .2s ease, box-shadow .2s ease; }
.pw3-form input:focus,.pw3-form select:focus,.pw3-form textarea:focus{
  outline:none; border-color:#7F77DD; box-shadow:0 0 0 4px rgba(127,119,221,.14); }
.pw3-form textarea{ resize:vertical; min-height:120px; }
.pw3-form .is-invalid{ border-color:#D85A30; background:#FDF1EC; }
.pw3-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.pw3-consent{ display:flex; gap:12px; align-items:flex-start; color:#666; font-size:14px; line-height:1.6; cursor:pointer; }
.pw3-consent input{ width:18px; height:18px; margin-top:2px; flex:0 0 auto; accent-color:#7F77DD; }
.pw3-consent a{ color:#534AB7; }

.pw3-submitrow{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.pw3-status{ margin:0; font-size:14.5px; font-weight:600; }
.pw3-status.is-ok{ color:#147a4b; }
.pw3-status.is-err{ color:#D85A30; }

.pw3-form.is-done{ display:block; text-align:center; padding:60px 36px; }
.pw3-done__ic{ width:64px; height:64px; background:#F0EFFE; border-radius:50%; margin:0 auto 24px;
  display:flex; align-items:center; justify-content:center; animation:pw3-pop .55s cubic-bezier(.34,1.4,.64,1); }
@keyframes pw3-pop{ from{ transform:scale(.4); opacity:0; } to{ transform:scale(1); opacity:1; } }
.pw3-done h3{ color:#0D0B2E; font-size:22px; font-weight:800; margin:0 0 12px; }
.pw3-done p{ color:#888; font-size:15.5px; line-height:1.7; margin:0; }

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (max-width:960px){
  .pw3-grid3{ grid-template-columns:repeat(2,1fr); }
  .pw3-formwrap{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:760px){
  .pw3-sec{ padding:60px 22px; }
  .pw3-hero{ padding:80px 22px 72px; }
  .pw3-sub{ margin-bottom:42px; }
  .pw3-grid3{ grid-template-columns:1fr; }
  .pw3-steps{ grid-template-columns:1fr; gap:48px; }
  .pw3-line{ display:none; }
  .pw3-note{ padding:32px 24px; }
  .pw3-form{ grid-template-columns:1fr; padding:26px 22px; }
  .pw3-btn,.pw3-btn2{ width:100%; justify-content:center; }
  .pw3-submitrow{ flex-direction:column; align-items:stretch; text-align:center; }
}

@media (prefers-reduced-motion:reduce){
  .pw3 *{ animation:none !important; transition:none !important; }
  .pw3-rev,.pw3-step,.pw3-num{ opacity:1 !important; transform:none !important; }
  .pw3-hero__label,.pw3-hero__h1,.pw3-hero__text,.pw3-hero__note,.pw3-hero__cta{ opacity:1 !important; transform:none !important; }
  .pw3-fill{ width:100% !important; }
}