/*
 * Image captcha (Contact Form 7 "cf7ic") used by the newsletter and contact forms.
 * The plugin's Font Awesome icons are not loaded in this theme, so the
 * choices rendered as empty 10px boxes. Each icon is drawn here as an inline
 * SVG mask (Lucide geometry, ISC licence) and every choice becomes a tile.
 */

.cf7ic-icon-wrapper {
  display: inline-flex !important;
  gap: 8px !important;
  margin-left: 12px !important;
  vertical-align: middle;
}

.cf7ic-icon-wrapper label {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(15, 40, 25, .14);
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex !important;
  height: 40px;
  justify-content: center;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  width: 40px;
}

.cf7ic-icon-wrapper label:hover {
  border-color: var(--ahorn-green-600, #138043);
  transform: translateY(-1px);
}

.cf7ic-icon-wrapper label:has(input:focus-visible) {
  outline: 2px solid var(--ahorn-green-600, #138043);
  outline-offset: 2px;
}

.cf7ic-icon-wrapper label:has(input:checked) {
  background: var(--ahorn-green-700, #0f6e37);
  border-color: var(--ahorn-green-700, #0f6e37);
}

/* keep the radio reachable by keyboard while hiding it visually;
   sizes are forced because the theme gives form inputs width: 100% */
.cf7ic-icon-wrapper label {
  position: relative;
}

.cf7ic-icon-wrapper input[type=radio] {
  clip: rect(0 0 0 0);
  display: block !important;
  height: 1px !important;
  left: 0;
  margin: 0 !important;
  min-width: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  position: absolute;
  top: 0;
  white-space: nowrap;
  width: 1px !important;
}

.cf7ic-icon-wrapper .fa {
  background-color: var(--ahorn-ink, #16201b);
  display: block;
  height: 22px;
  -webkit-mask: var(--ahorn-captcha-icon) center / contain no-repeat;
  mask: var(--ahorn-captcha-icon) center / contain no-repeat;
  width: 22px;
}

.cf7ic-icon-wrapper label:has(input:checked) .fa {
  background-color: #fff;
}

.cf7ic-icon-wrapper .fa-tree { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m17 14 3 3.3a1 1 0 0 1-.7 1.7H4.7a1 1 0 0 1-.7-1.7L7 14h-.3a1 1 0 0 1-.7-1.7L9 9h-.2A1 1 0 0 1 8 7.3L12 3l4 4.3a1 1 0 0 1-.8 1.7H15l3 3.3a1 1 0 0 1-.7 1.7H17Z%22/%3E%3Cpath d=%22M12 22v-3%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-coffee { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 8h1a4 4 0 1 1 0 8h-1%22/%3E%3Cpath d=%22M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z%22/%3E%3Cpath d=%22M6 2v2M10 2v2M14 2v2%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-heart { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-star { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-home { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M9 22V12h6v10%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-key { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%227.5%22 cy=%2215.5%22 r=%225.5%22/%3E%3Cpath d=%22m21 2-9.6 9.6%22/%3E%3Cpath d=%22m15.5 7.5 3 3L22 7l-3-3%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-plane { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17.8 19.2 16 11l3.5-3.5C21 6 21.5 4 21 3c-1-.5-3 0-4.5 1.5L13 8 4.8 6.2c-.5-.1-.9.1-1.1.5l-.3.5c-.2.5-.1 1 .3 1.3L9 12l-2 3H4l-1 1 3 2 2 3 1-1v-3l3-2 3.5 5.3c.3.4.8.5 1.3.3l.5-.2c.4-.3.6-.7.5-1.2z%22/%3E%3C/svg%3E"); }
.cf7ic-icon-wrapper .fa-truck { --ahorn-captcha-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 17h4V5H2v12h3%22/%3E%3Cpath d=%22M20 17h2v-3.34a4 4 0 0 0-1.17-2.83L19 9h-5%22/%3E%3Cpath d=%22M14 17h1%22/%3E%3Ccircle cx=%227.5%22 cy=%2217.5%22 r=%222.5%22/%3E%3Ccircle cx=%2217.5%22 cy=%2217.5%22 r=%222.5%22/%3E%3C/svg%3E"); }

/* audio-instructions button for screen readers: small and neutral */
.captcha-image .ai1ic_screenreader {
  align-items: center;
  background: transparent !important;
  border: 0;
  border-radius: 50%;
  color: var(--ahorn-ink-soft, #3a4640);
  cursor: pointer;
  display: inline-flex !important;
  height: 28px;
  justify-content: center;
  margin-left: 4px;
  opacity: .7;
  padding: 0;
  transition: opacity .2s ease, background-color .2s ease;
  vertical-align: middle;
  width: 28px;
}

.captcha-image .ai1ic_screenreader:hover,
.captcha-image .ai1ic_screenreader:focus-visible {
  background: rgba(15, 40, 25, .06) !important;
  opacity: 1;
}

.captcha-image .ai1ic_screenreader svg {
  height: 18px;
  width: 18px;
}

.captcha-image .ai1ic_screenreader svg path {
  fill: currentColor;
}

/* the wrapper was a fixed-height white strip; let it fit the tiles */
.c-form .kc_captcha .captcha-image {
  align-items: center;
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  height: auto !important;
  padding: 8px 12px !important;
}

/* captcha honeypot fields: must stay in the form but out of sight
   (they were rendered off to the right and widened the Kontakt page) */
.captcha-image .ai1ic-fields {
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ---------- Contact / customer-card / application forms ---------- */

html:not(.js-ia-accessibility-active) .wpcf7-form input[type=submit]:not(:disabled) {
  background: var(--ahorn-green-700, #0f6e37);
  border: 1px solid var(--ahorn-green-700, #0f6e37);
  box-shadow: 0 8px 18px -10px rgba(15, 110, 55, .7);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  transition: background-color .2s ease, transform .2s ease;
}

html:not(.js-ia-accessibility-active) .wpcf7-form input[type=submit]:not(:disabled):hover {
  background: var(--ahorn-green-900, #0a4a26);
  transform: translateY(-1px);
}

html:not(.js-ia-accessibility-active) .wpcf7-form :is(input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select) {
  transition: border-color .2s ease, box-shadow .2s ease;
}

html:not(.js-ia-accessibility-active) .wpcf7-form :is(input[type=text], input[type=email], input[type=tel], input[type=date], textarea, select):focus {
  border-color: var(--ahorn-green-600, #138043);
  box-shadow: 0 0 0 4px rgba(19, 128, 67, .15);
  outline: none;
}
