/* ==========================================================================
   Kontaktfenster (template-parts/kontakt.php, assets/js/kontakt.js)
   Natives <dialog>, sitzt am Kontakt-Knopf unten rechts, auf dem Handy als Blatt von unten.
   Alles in Avenir; Hover-Verhalten wie auf der übrigen Seite (Buttons, Megamenü-Karten).
   ========================================================================== */

/* ---------- Fenster und Abdunkelung ---------- */

.kd {
  --kd-pad: 28px;
  --kd-move: 420ms cubic-bezier(.25, .9, .25, 1);
  position: fixed;
  inset: auto 4.8rem 2.8rem auto;
  width: min(580px, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100dvh - 5.6rem);
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: var(--honify-dunkelgruen);
  /* Schließen: zügig weg */
  opacity: 0;
  translate: 0 12px;
  scale: .97;
  transform-origin: 100% 100%;
  transition: opacity 180ms var(--ease-in), translate 180ms var(--ease-in), scale 180ms var(--ease-in),
    overlay 180ms allow-discrete, display 180ms allow-discrete;
}

/* Öffnen: steigt vom Kontakt-Knopf auf */
.kd[open] {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity 240ms var(--ease-out), translate var(--kd-move), scale var(--kd-move),
    overlay var(--kd-move) allow-discrete, display var(--kd-move) allow-discrete;
}

@starting-style {
  .kd[open] {
    opacity: 0;
    translate: 0 12px;
    scale: .97;
  }
}

/* Gleiche Abdunkelung wie hinter Mobilmenü und Suche */
.kd::backdrop {
  background-color: rgba(15, 45, 25, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 180ms var(--ease-in), backdrop-filter 180ms var(--ease-in),
    overlay 180ms allow-discrete, display 180ms allow-discrete;
}

.kd[open]::backdrop {
  background-color: rgba(15, 45, 25, .2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 320ms var(--ease-out), backdrop-filter 320ms var(--ease-out),
    overlay 320ms allow-discrete, display 320ms allow-discrete;
}

@starting-style {
  .kd[open]::backdrop {
    background-color: rgba(15, 45, 25, 0);
    -webkit-backdrop-filter: blur(0);
    backdrop-filter: blur(0);
  }
}

/* Seite steht still; der Platz der Scrollleiste bleibt, damit nichts springt */
html:has(.kd[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.kd-panel {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--kd-pad);
  border-radius: 44px;
  background-color: var(--honify-weiss);
  box-shadow: var(--shadow-4);
  font-family: 'Avenir Next', Avenir, -apple-system, sans-serif;
}

.kd :is(h2, h3, p, ul) {
  margin: 0;
  padding: 0;
}

.kd li {
  list-style: none;
}

.kd svg {
  display: block;
  flex: none;
}

/* ---------- Schließen ---------- */

.kd-close-form {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  margin: 0;
}

.kd-panel:focus {
  outline: none;
}

/* Nur das Kreuz: keine Fläche, kein Kreis, kein Farbwechsel (Theme-Regeln für button neutralisiert) */
.kd .kd-x,
.kd .kd-x:hover,
.kd .kd-x:active {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--honify-dunkelgruen);
  text-shadow: none;
  translate: none;
  cursor: pointer;
}

.kd-x svg {
  width: 24px;
  height: 24px;
}

/* ---------- Kopf ---------- */

.kd .kd-h {
  padding-right: 52px;
  font-family: inherit;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--honify-dunkelgruen);
  text-wrap: balance;
}

.kd .kd-lead {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.5;
  color: var(--honify-dunkelgrau);
  text-wrap: pretty;
}

.kd .kd-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
}

.kd-facts li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.kd-facts svg {
  width: 19px;
  height: 19px;
}

/* ---------- Hauptknopf: Limetten-Pille wie .honify-btn--primary ---------- */

#contactModal .kd-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  margin-top: 24px;
  padding: 0 28px;
  border-radius: 30px;
  background-color: var(--honify-hellgruen);
  color: var(--honify-hellgruen-1);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: text-shadow var(--dur-fast) var(--ease-out), translate var(--dur-fast) var(--ease-out);
}

#contactModal .kd-cta:hover {
  color: var(--honify-hellgruen-1);
  text-shadow: 0 0 1px var(--honify-hellgruen-1);
}

#contactModal .kd-cta:active {
  translate: 0 1px;
}

.kd-arr {
  width: 20px;
  height: 20px;
}

/* ---------- Themen: wie die Spalten-Karten im Megamenü ---------- */

.kd .kd-label {
  margin: 38px 0 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--honify-dunkelgruen) 75%, white);
}

.kd .kd-list {
  display: grid;
  gap: 6px;
}

#contactModal .kd-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 10px;
  border-radius: 20px;
  background-color: color-mix(in srgb, var(--honify-blassgruen-0) 45%, transparent);
  color: var(--honify-dunkelgruen);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-base) var(--ease-out);
}

#contactModal .kd-row:hover {
  background-color: var(--honify-blassgruen-0);
  color: var(--honify-dunkelgruen);
}

.kd-row img {
  display: block;
  width: 64px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  background-color: var(--honify-blassgruen-0);
}

.kd-txt {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.kd-t {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
}

.kd-s {
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--honify-dunkelgrau);
}

/* ---------- Mail und Telefon: blassgrüne Pillen wie .honify-btn--secondary ---------- */

.kd .kd-direct {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--honify-blassgruen-0);
  font-size: 15px;
}


#contactModal .kd-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 30px;
  background-color: var(--honify-blassgruen-0);
  color: var(--honify-dunkelgruen);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: text-shadow var(--dur-fast) var(--ease-out);
}

#contactModal .kd-chip:hover {
  color: var(--honify-dunkelgruen);
  text-shadow: 0 0 1px var(--honify-dunkelgruen);
}

.kd-chip svg {
  width: 18px;
  height: 18px;
}

/* ---------- Tastatur ---------- */

.kd :is(a, button):focus-visible {
  outline: 3px solid var(--honify-hellgruen);
  outline-offset: 3px;
}

/* ---------- Handy: Blatt von unten ---------- */

@media (max-width: 882px) {
  .kd {
    --kd-pad: 22px;
    inset: auto 12px calc(12px + env(safe-area-inset-bottom)) auto;
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px - env(safe-area-inset-bottom));
    translate: 0 24px;
    scale: 1;
    transform-origin: 50% 100%;
  }

  @starting-style {
    .kd[open] {
      translate: 0 24px;
      scale: 1;
    }
  }

  .kd-panel {
    border-radius: 36px;
  }

  .kd-close-form {
    top: 14px;
    right: 14px;
  }

  .kd .kd-h {
    font-size: 27px;
  }

  .kd .kd-lead {
    font-size: 16.5px;
  }

  .kd-row img {
    width: 52px;
    height: 42px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .kd,
  .kd[open] {
    translate: none;
    scale: none;
  }

  @starting-style {
    .kd[open] {
      translate: none;
      scale: none;
    }
  }
}