:root {
  --pebweb-form-color: #171922;
  --pebweb-font-color: #f3f4f7;
  --pebweb-muted-color: #adb2c0;
  --pebweb-input-color: #222531;
  --pebweb-border-color: #3b4050;
  --pebweb-btn-color: #6f62ff;
  --pebweb-btn-font-color: #fff;
  --pebweb-error-color: #e68a2e;
}

.peb-modal-is-open { overflow: hidden; }
.peb-honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

#peb-std-kontakt-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgb(8 9 14 / 78%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1000;
}

#peb-std-kontakt-modal.peb-std-kontakt-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#peb-kontakt-form {
  box-sizing: border-box;
  position: relative;
  width: min(100%, 440px);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid var(--pebweb-border-color);
  border-radius: 14px;
  background: var(--pebweb-form-color);
  color: var(--pebweb-font-color);
  box-shadow: 0 24px 70px rgb(0 0 0 / 45%);
  transform: translateY(18px) scale(.98);
  transition: transform .3s ease;
}

.peb-std-kontakt-open #peb-kontakt-form { transform: translateY(0) scale(1); }
#peb-kontakt-form * { box-sizing: border-box; }

#peb-close-modal {
  position: absolute;
  top: 9px;
  right: 12px;
  padding: 4px 8px;
  border: 0;
  background: transparent;
  color: var(--pebweb-muted-color);
  font: 32px/1 sans-serif;
  cursor: pointer;
}

#peb-kontakt-form h2 { margin: 0 35px 22px 0; font-size: 28px; line-height: 1.1; }
#peb-kontakt-form label { display: block; margin: 0 0 6px; color: var(--pebweb-muted-color); font-size: 14px; }

#peb-kontakt-form input,
#peb-kontakt-form textarea {
  display: block;
  width: 100%;
  margin: 0 0 15px;
  padding: 11px 12px;
  border: 1px solid var(--pebweb-border-color);
  border-radius: 7px;
  outline: none;
  background: var(--pebweb-input-color);
  color: var(--pebweb-font-color);
  font: inherit;
}

#peb-kontakt-form textarea { min-height: 130px; resize: vertical; }
#peb-kontakt-form input:focus,
#peb-kontakt-form textarea:focus { border-color: var(--pebweb-btn-color); box-shadow: 0 0 0 3px rgb(111 98 255 / 18%); }

#peb-std-form-submit {
  position: relative;
  width: 100%;
  margin-top: 8px;
  padding: 12px 15px;
  border: 0;
  border-radius: 7px;
  background: var(--pebweb-btn-color);
  color: var(--pebweb-btn-font-color);
  font: inherit;
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .2s ease, opacity .2s ease;
}

#peb-std-form-submit:hover { filter: brightness(1.1); }
#peb-std-form-submit:disabled { opacity: .65; cursor: wait; }
#send-ico { display: inline-block; margin-left: 8px; transform: rotate(-25deg); transition: transform .5s ease, opacity .5s ease; }
#peb-std-form-submit:hover #send-ico { transform: translate(35px, -9px) rotate(-40deg) scale(.5); opacity: 0; }

.peb-std-form-error,
.peb-form-general-error {
  color: #fff;
  background: var(--pebweb-error-color);
  border-radius: 4px;
  font-size: 13px;
}
.peb-std-form-error:not(:empty) { margin: -10px 0 15px; padding: 5px 8px; }
.peb-form-general-error:not(:empty) { margin: 0 0 15px; padding: 8px 10px; }

#peb_kontakt_thankyou { padding: 20px 5px 10px; text-align: center; font-weight: 700; }
#peb_kontakt_thankyou .thx-check { margin-bottom: 12px; color: #73dc8c; font-size: 100px; line-height: 1; }

@media (max-width: 520px) {
  #peb-std-kontakt-modal { padding: 10px; }
  #peb-kontakt-form { max-height: calc(100vh - 20px); padding: 24px 20px; }
}