/**
 * MENTOVATE Forms — Frontend Styles
 *
 * Mirrors the landing-page-energievertrieb.html aesthetic:
 *  - Floating-label inputs with gold focus ring
 *  - Conic-gradient animated border on the form wrapper
 *  - Sweep effect on submit button
 *  - WCAG-AA contrast (dark text on gold buttons, not white)
 *  - Mobile-first, touch-targets >= 64px
 *  - prefers-reduced-motion respected
 *
 * Uses design-tokens.css (registered globally since v5.65.0).
 */

.mv-form-wrap {
  position: relative;
  max-width: 640px;
  margin: 40px auto;
  padding: 1.5px;
  border-radius: 24px;
  overflow: hidden;
  font-family: var(--mv-font-body, 'Montserrat', system-ui, sans-serif);
}

.mv-form-border {
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from var(--mv-form-ang, 0deg),
    var(--mv-gold-dark, #62451E),
    var(--mv-gold-bright, #F4D03F),
    var(--mv-gold-light, #C9A96E),
    var(--mv-gold, #AB936D),
    var(--mv-gold-dark, #62451E)
  );
  animation: mv-form-rotate 8s linear infinite;
  border-radius: 24px;
  z-index: 0;
}

@property --mv-form-ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes mv-form-rotate {
  to { --mv-form-ang: 360deg; }
}

.mv-form-glow {
  position: absolute;
  inset: -30px;
  background: radial-gradient(circle, rgba(171, 147, 109, 0.3), transparent 60%);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
  z-index: 0;
}
.mv-form-wrap.is-focused .mv-form-glow { opacity: 0.6; }

.mv-form-inner {
  position: relative;
  background: var(--mv-bg, #06070A);
  border-radius: 22.5px;
  padding: clamp(28px, 4vw, 48px);
  z-index: 1;
}

.mv-form-eyebrow {
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--mv-gold, #AB936D);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.mv-form-title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0 0 8px 0;
  color: var(--mv-text, #F0EDE8);
  line-height: 1.2;
}

.mv-form-sub {
  font-size: 14px;
  color: var(--mv-text-dim, #8A8A95);
  margin: 0 0 28px 0;
  line-height: 1.6;
}

/* Honeypot — visually hidden but bots fill it */
.mv-form-hp {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------- Float field */

.mv-form-field {
  margin-bottom: 14px;
  position: relative;
}

.mv-form-float {
  position: relative;
}

.mv-form-float input,
.mv-form-float select,
.mv-form-float textarea {
  width: 100%;
  min-height: 64px;          /* touch target */
  padding: 26px 18px 12px;
  background: var(--mv-bg-card, #0D0E12);
  border: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  border-radius: 12px;
  color: var(--mv-text, #F0EDE8);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.3s, background 0.3s;
  box-sizing: border-box;
}

.mv-form-float textarea {
  min-height: 120px;
  padding-top: 30px;
  resize: vertical;
}

.mv-form-float select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23AB936D' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}

.mv-form-float input:focus,
.mv-form-float select:focus,
.mv-form-float textarea:focus {
  border-color: var(--mv-gold, #AB936D);
  background: var(--mv-bg-elevated, #1A1B22);
  box-shadow: 0 0 0 3px rgba(171, 147, 109, 0.15);
}

.mv-form-float label {
  position: absolute;
  left: 18px;
  top: 22px;
  font-size: 14px;
  color: var(--mv-text-dim, #8A8A95);
  pointer-events: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s;
  transform-origin: left top;
  background: transparent;
  padding: 0;
  max-width: calc(100% - 36px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mv-form-float input:focus + label,
.mv-form-float input:not(:placeholder-shown) + label,
.mv-form-float select:focus + label,
.mv-form-float select.has-value + label,
.mv-form-float textarea:focus + label,
.mv-form-float textarea:not(:placeholder-shown) + label {
  transform: translateY(-12px) scale(0.78);
  color: var(--mv-gold, #AB936D);
}

/* For a select that always has a value (preselected), keep label up. */
.mv-form-float select + label { transform: translateY(-12px) scale(0.78); color: var(--mv-gold, #AB936D); }
.mv-form-float select:invalid + label { transform: none; color: var(--mv-text-dim, #8A8A95); }

.mv-form-float input::placeholder,
.mv-form-float textarea::placeholder {
  color: transparent;
}

.mv-form-help {
  display: block;
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--mv-text-dim, #8A8A95);
  letter-spacing: 0.5px;
  margin-top: 8px;
  padding-left: 4px;
}

/* v5.72.33 — Datenschutz-Hinweis bei Datei-Upload (72h Auto-Loeschung). */
.mv-form-retention-note {
  display: block;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(171, 147, 109, 0.06);
  border-left: 2px solid rgba(171, 147, 109, 0.4);
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.2px;
  line-height: 1.5;
  text-transform: none;
  color: var(--mv-text-dim, #8A8A95);
}

.mv-form-required {
  color: var(--mv-gold, #AB936D);
  margin-left: 2px;
  font-weight: 700;
}

/* ---------------------------------------------------------- File / Dropzone */

.mv-form-file {
  margin-bottom: 18px;
}

.mv-form-file-label {
  display: block;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--mv-text-dim, #8A8A95);
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
}

.mv-form-dropzone {
  position: relative;
  border: 2px dashed var(--mv-border-hover, rgba(171, 147, 109, 0.3));
  border-radius: 14px;
  padding: 28px 20px;
  text-align: center;
  background: var(--mv-bg-card, #0D0E12);
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}

.mv-form-dropzone.is-dragover {
  border-color: var(--mv-gold, #AB936D);
  background: var(--mv-bg-elevated, #1A1B22);
}

.mv-form-dropzone input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.mv-form-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--mv-text, #F0EDE8);
  font-size: 13px;
}

.mv-form-dropzone-text strong {
  color: var(--mv-gold, #AB936D);
  font-size: 14px;
  font-weight: 700;
}

.mv-form-dropzone-icon {
  font-size: 28px;
  line-height: 1;
  color: var(--mv-gold, #AB936D);
  margin-bottom: 6px;
}

.mv-form-file-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mv-form-file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--mv-bg-card, #0D0E12);
  border: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  border-radius: 10px;
  font-size: 13px;
  color: var(--mv-text, #F0EDE8);
}

.mv-form-file-item-icon {
  color: var(--mv-gold, #AB936D);
  font-size: 16px;
}

.mv-form-file-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mv-form-file-item-size {
  color: var(--mv-text-dim, #8A8A95);
  font-size: 11px;
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
}

.mv-form-file-item-remove {
  background: transparent;
  border: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  color: var(--mv-text-dim, #8A8A95);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: color 0.2s, border-color 0.2s;
}

.mv-form-file-item.is-error {
  border-color: rgba(231, 76, 60, 0.5);
}
.mv-form-file-item.is-error .mv-form-file-item-icon { color: var(--mv-danger, #E74C3C); }

/* ---------------------------------------------------------- Checkbox / Consents */

.mv-form-consents {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mv-form-consent-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--mv-bg-card, #0D0E12);
  border: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  border-radius: 12px;
  transition: border-color 0.2s;
}

.mv-form-consent-block:focus-within {
  border-color: var(--mv-border-hover, rgba(171, 147, 109, 0.3));
}

.mv-form-consent-block.is-error {
  border-color: var(--mv-danger, #E74C3C);
  background: rgba(231, 76, 60, 0.04);
}

.mv-form-consent-heading {
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--mv-gold, #AB936D);
}

.mv-form-consent-heading .mv-form-required {
  color: var(--mv-gold-light, #C9A96E);
  margin-left: 4px;
}

.mv-form-consent-block .mv-form-checkbox {
  padding: 0;
  margin: 0;
}

.mv-form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mv-bg-card, #0D0E12);
  border: 1px solid var(--mv-border, rgba(171, 147, 109, 0.12));
  border-radius: 12px;
}

.mv-form-checkbox-group .mv-form-group-label {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--mv-text-dim, #8A8A95);
  margin-bottom: 6px;
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
  text-transform: uppercase;
}

.mv-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  font-size: 14px;
  color: var(--mv-text, #F0EDE8);
  line-height: 1.55;
  user-select: none;
  min-height: 44px;
  padding: 4px 0;
}

.mv-form-checkbox input[type=checkbox] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.mv-form-checkmark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--mv-border-hover, rgba(171, 147, 109, 0.3));
  border-radius: 6px;
  background: var(--mv-bg-card, #0D0E12);
  position: relative;
  transition: background 0.2s, border-color 0.2s;
  margin-top: 1px;
}

.mv-form-checkbox input:focus-visible + .mv-form-checkmark {
  box-shadow: 0 0 0 3px rgba(171, 147, 109, 0.3);
  border-color: var(--mv-gold, #AB936D);
}

.mv-form-checkbox input:checked + .mv-form-checkmark {
  background: linear-gradient(135deg, var(--mv-gold-dark, #62451E), var(--mv-gold, #AB936D));
  border-color: var(--mv-gold, #AB936D);
}

.mv-form-checkbox input:checked + .mv-form-checkmark::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid var(--mv-brown-deep, #1a1208);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.mv-form-cb-text {
  flex: 1;
}

.mv-form-cb-text a {
  color: var(--mv-gold, #AB936D);
  text-decoration: underline;
  text-decoration-color: rgba(171, 147, 109, 0.4);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s;
}

.mv-form-checkbox.is-error .mv-form-checkmark {
  border-color: var(--mv-danger, #E74C3C);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.18);
}
.mv-form-checkbox.is-error .mv-form-cb-text {
  color: var(--mv-danger, #E74C3C);
}

/* Error highlighting for invalid required fields — set by JS on validation fail. */
.mv-form-field.is-error input,
.mv-form-field.is-error select,
.mv-form-field.is-error textarea {
  border-color: var(--mv-danger, #E74C3C);
  background: rgba(231, 76, 60, 0.06);
  box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.15);
}
.mv-form-field.is-error label,
.mv-form-field.mv-form-checkbox-group.is-error .mv-form-group-label,
.mv-form-field.mv-form-file.is-error .mv-form-file-label {
  color: var(--mv-danger, #E74C3C);
}
.mv-form-field.mv-form-file.is-error .mv-form-dropzone {
  border-color: var(--mv-danger, #E74C3C);
  background: rgba(231, 76, 60, 0.04);
}

/* ---------------------------------------------------------- Submit button */

/* v5.72.29 — Spezifitaets-Boost gegen Elementor-Global-Link-Color
   `button.mv-form-btn` matcht die Spezifitaet von `.elementor-kit-X a`.
   `!important` auf color/opacity ist unvermeidbar weil Elementor sein eigenes
   `!important` auf Inline-Vars setzt — sonst wird Brown-Deep auf Gold zu Gold-auf-Gold. */
.mv-form-btn,
button.mv-form-btn,
a.mv-form-btn {
  width: 100%;
  min-height: 64px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #E8C589, #C9A96E);
  color: var(--mv-brown-deep, #1a1208) !important;
  opacity: 1 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-top: 18px;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s;
  box-shadow: 0 8px 32px rgba(171, 147, 109, 0.25);
}

.mv-form-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.25) 50%, transparent 80%);
  transform: skewX(-20deg);
  transition: left 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.mv-form-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.mv-form-btn:focus-visible {
  outline: 3px solid var(--mv-brown-deep, #1a1208);
  outline-offset: 3px;
}

.mv-form-helper {
  font-family: var(--mv-font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  color: var(--mv-text-dim, #8A8A95);
  margin-top: 16px;
  text-align: center;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------- Status messages */

.mv-form-message {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  display: none;
}

.mv-form-message.is-error {
  display: block;
  background: rgba(231, 76, 60, 0.08);
  border: 1px solid rgba(231, 76, 60, 0.4);
  color: #FFB3AC;
}

.mv-form-message.is-info {
  display: block;
  background: rgba(171, 147, 109, 0.08);
  border: 1px solid rgba(171, 147, 109, 0.3);
  color: var(--mv-gold-light, #C9A96E);
}

/* ---------------------------------------------------------- Success state */

.mv-form-success {
  text-align: center;
  padding: 30px 20px;
}

.mv-form-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mv-gold-dark, #62451E), var(--mv-gold, #AB936D));
  color: var(--mv-brown-deep, #1a1208);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  margin: 0 auto 22px;
  font-weight: 800;
  box-shadow: 0 8px 32px rgba(171, 147, 109, 0.25);
}

.mv-form-success-title {
  font-size: 22px;
  letter-spacing: -0.5px;
  margin: 0 0 12px 0;
  color: var(--mv-text, #F0EDE8);
}

.mv-form-success-text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mv-text-dim, #8A8A95);
  max-width: 420px;
  margin: 0 auto;
}

/* Legal notice block — Art. 13 DSGVO information notice (no consent, just info). */
.mv-form-legal-notice {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(171, 147, 109, 0.04);
  border-left: 3px solid var(--mv-gold, #AB936D);
  border-radius: 8px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mv-text-dim, #8A8A95);
}
.mv-form-legal-notice p {
  margin: 0 0 8px 0;
}
.mv-form-legal-notice p:last-child { margin-bottom: 0; }
.mv-form-legal-notice strong {
  color: var(--mv-text, #F0EDE8);
  font-weight: 600;
}
.mv-form-legal-notice a {
  color: var(--mv-gold, #AB936D);
  text-decoration: underline;
  text-decoration-color: rgba(171, 147, 109, 0.4);
  text-underline-offset: 3px;
}

/* Hover-effects gated to pointer:fine — bare :hover sticks on touch and breaks UX. */
@media (hover: hover) and (pointer: fine) {
  .mv-form-btn:hover,
  button.mv-form-btn:hover,
  a.mv-form-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 42px rgba(171, 147, 109, 0.4);
    color: var(--mv-brown-deep, #1a1208) !important;
  }
  .mv-form-btn:hover::after { left: 175%; }
  .mv-form-checkbox:hover .mv-form-checkmark {
    border-color: var(--mv-gold, #AB936D);
  }
  .mv-form-wrap:hover .mv-form-glow { opacity: 0.6; }
  .mv-form-dropzone:hover {
    border-color: var(--mv-gold, #AB936D);
    background: var(--mv-bg-elevated, #1A1B22);
  }
  .mv-form-file-item-remove:hover {
    color: var(--mv-text, #F0EDE8);
    border-color: var(--mv-gold, #AB936D);
  }
  .mv-form-cb-text a:hover {
    text-decoration-color: var(--mv-gold, #AB936D);
  }
}

/* ---------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .mv-form-border { animation: none; }
  .mv-form-glow,
  .mv-form-btn,
  .mv-form-btn::after,
  .mv-form-float input,
  .mv-form-float select,
  .mv-form-float textarea,
  .mv-form-float label,
  .mv-form-checkmark,
  .mv-form-dropzone {
    transition: none !important;
  }
}

/* ---------------------------------------------------------- Mobile */

@media (max-width: 640px) {
  .mv-form-wrap { margin: 24px 0; border-radius: 18px; }
  .mv-form-inner { padding: 24px 18px; border-radius: 16.5px; }
  /* .mv-form-title font-size already covered by clamp() — no override */
  .mv-form-btn { font-size: 13px; letter-spacing: 1px; padding: 16px 20px; }
}

/* ---------------------------------------------------------- Draft notice */

.mv-form-draft-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin: 0 0 18px;
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: 10px;
  background: rgba(201, 169, 110, 0.08);
  color: var(--mv-text, #F0EDE8);
  font-size: 13px;
  line-height: 1.4;
}
.mv-form-draft-notice button.mv-form-draft-discard {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(201, 169, 110, 0.5);
  color: var(--mv-gold-bright, #C9A96E);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .mv-form-draft-notice button.mv-form-draft-discard:hover {
    background: var(--mv-gold-bright, #C9A96E);
    color: var(--mv-brown-deep, #1a1208);
  }
}

/* ─── Anchor for CTA-button scroll-targeting (v5.72.0) ────────────────── */
/* Ein leerer <span class="mv-form-anchor" id="kontakt"> sitzt direkt vor   */
/* jedem Form. CTA-Buttons mit href="#kontakt" scrollen smooth (siehe       */
/* globalen `html { scroll-behavior: smooth }` aus v4.98.0). scroll-margin  */
/* haelt das Form unter sticky-Headern frei.                                */
.mv-form-anchor {
  display: block;
  position: relative;
  scroll-margin-top: 100px;
  height: 0;
  overflow: hidden;
}
.mv-form-wrap {
  scroll-margin-top: 100px;
}

/* ─── Conditional Logic: hidden field/consent blocks (v5.72.51) ───────── */
/* Gesteuert durch mv-forms.js (data-mv-visible-if). Inputs innerhalb sind  */
/* zusaetzlich `disabled` damit FormData die Werte nicht mitsendet.         */
.mv-form-hidden {
  display: none !important;
}