/* assets/css/contact.css — Kontaktseite, Kachel-Stil nach Colabs */

/* ─── Page Layout ─────────────────────────────────────── */
.contact-page {
  min-height: 100vh;
  background: var(--page-bg, #f9f8f6);
  padding: 60px 20px 80px;
}

/* ─── Featured Image ──────────────────────────────────── */
.contact-featured-image {
  max-width: var(--metro-max-width, 1496px);
  width: 100%;
  margin: 0 auto 40px;
  padding: 0 20px;
  box-sizing: border-box;
}

.contact-featured-image__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 30px;
}

/* Parallax-Modus: feste Höhe, overflow hidden, Bild wird von JS erzeugt */
.contact-featured-image--parallax {
  position: relative;
  overflow: hidden;
  height: 520px;
  border-radius: 30px;
}

/* ─── Tile Container ──────────────────────────────────── */
.contact-container {
  max-width: 1100px;
  margin: 0 auto;
  background: #eae9dc;
  border-radius: 20px;
  padding: 60px 60px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  position: relative;
}

/* ─── Intro / Heading ─────────────────────────────────── */
.contact-intro {
  text-align: center;
  max-width: 700px;
}

.contact-heading {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: #2a2c2d;
  margin: 0 0 16px;
}

.contact-subheading {
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 300;
  line-height: 1.4;
  margin: 0 0 16px 0;
  color: rgba(0, 0, 0, 0.6);
}

.contact-lead {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.6);
  line-height: 1.6;
}

.contact-lead p { margin: 0; }

/* ─── CF7 Wrapper ─────────────────────────────────────── */
.contact-page .wpcf7 {
  width: 100%;
  max-width: 700px;
}

/* ─── CF7 Form Structure ──────────────────────────────── */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.cf7-row {
  display: flex;
  flex-direction: column;
}

.cf7-row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* CF7 wraps each field in a span */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* ─── Inputs & Textarea ───────────────────────────────── */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 16px;
  font-family: inherit;
  color: #2a2c2d;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 10px;
  box-shadow: inset 1px 1px 1px 0 rgba(0, 0, 0, 0.055);
  outline: none;
  transition: border-color 0.2s ease;
  box-sizing: border-box;
  -webkit-appearance: none;
}

.wpcf7-form textarea {
  min-height: 160px;
  resize: vertical;
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
  color: #aaa;
  opacity: 1;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus {
  border-color: #2a2c2d;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
  border-color: #e05252;
  background: #fff8f8;
}

/* ─── Validation Tips ─────────────────────────────────── */
.wpcf7-not-valid-tip {
  display: block;
  font-size: 13px;
  color: #e05252;
  margin-top: 6px;
}

/* ─── Acceptance / Datenschutz ────────────────────────── */
.cf7-row--acceptance {
  font-size: 0.85rem;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.5;
  max-width: 700px;
}

.cf7-row--acceptance label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
}

.cf7-row--acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  appearance: auto;
  accent-color: #2a2c2d;
}

.cf7-row--acceptance a {
  color: #2a2c2d;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cf7-row--acceptance a:hover {
  opacity: 0.7;
}

/* ─── Submit Row ──────────────────────────────────────── */
/* Absolute zu .contact-container (position: relative).
   bottom/right negativ = durch den Padding hindurch an die visuelle
   Container-Kante. Die -10px Margin des Wrappers (grid.css) sorgt
   dafür, dass der schwarze Kreis bündig in der Ecke sitzt. */
.cf7-submit-row {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* ─── Tile Submit Button ──────────────────────────────── */
/* Reuses .tile__button-wrapper + .tile__curve from grid.css.
   No overrides — button inherits grid.css defaults fully. */

.wpcf7-form .tile__link-button {
  pointer-events: auto;
  cursor: pointer;
}

.wpcf7-form .tile__link-button:hover {
  transform: rotate(-45deg);
}

.wpcf7-form .tile__link-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

/* ─── Response Messages ───────────────────────────────── */
.wpcf7-response-output {
  margin: 0 !important;
  padding: 14px 20px !important;
  border-radius: 10px !important;
  font-size: 15px;
  border: none !important;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: #e8f8f0;
  color: #1a7a4a;
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: #fff0f0;
  color: #c0392b;
}

.wpcf7 .ajax-loader {
  display: none !important;
}

/* ─── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-page {
    padding: 40px 10px 60px;
  }

  .contact-container {
    padding: 40px 24px 72px;
    border-radius: 16px;
    gap: 30px;
  }

  .cf7-row--split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .contact-featured-image {
    margin-bottom: 24px;
    padding: 0 10px;
  }
  .contact-featured-image__img {
    border-radius: 20px;
  }
  .contact-featured-image--parallax {
    height: 320px;
    border-radius: 20px;
  }
}