/* Anfrage-Overlay ("Projekt anfragen").
   Eigene Datei, weil das Overlay auf zwei sehr unterschiedlichen
   Seitenfamilien laeuft: den nativen Solutions-Seiten (landing-page.css)
   und den Projektseiten (project-template.css). Eine gemeinsame Quelle
   statt zweier Kopien, die auseinanderlaufen.
   Markup + Verhalten: scripts/landing_common.py::request_modal_html(). */

/* ---------------------------------------------------------------------------
   Anfrage-Overlay: Formular direkt, ohne Zwischenschritt (User-Wunsch).
   Das Formular steht als normales Markup in der Seite, damit contact-form.js
   es bei DOMContentLoaded findet und an /api/contact haengt.
   --------------------------------------------------------------------------- */
body.sfx-req-open { overflow: hidden; }
.sfx-req { position: fixed; inset: 0; z-index: 2147483000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 2.5rem); }
.sfx-req[hidden] { display: none; }
.sfx-req-backdrop { position: absolute; inset: 0; background: rgba(8,9,12,.86); cursor: pointer; }
.sfx-req-panel {
  position: relative; width: min(34rem, 100%); max-height: 92vh; overflow-y: auto;
  padding: clamp(1.7rem, 4vw, 2.4rem);
  border-radius: 1.25rem; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(165deg, #22242b 0%, #191b21 100%);
  box-shadow: 0 2rem 5rem rgba(0,0,0,.55);
}
.sfx-req-close {
  position: absolute; top: .9rem; right: .9rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.2rem !important; height: 2.2rem !important; padding: 0 !important;
  border-radius: 50% !important; background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.18); color: #fff !important;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.sfx-req-close:hover { background: rgba(255,255,255,.18) !important; }
.sfx-req-kicker {
  margin: 0 0 .5rem; font-size: .72rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #FF8585;
}
.sfx-req-panel h2 { margin: 0 0 .6rem; font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 500; color: #fff; letter-spacing: -.01em; }
.sfx-req-lead { margin: 0 0 1.6rem; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.66); }
.sfx-req-form { display: flex; flex-direction: column; gap: 1rem; }
.sfx-req-field { display: flex; flex-direction: column; gap: .4rem; }
.sfx-req-field > span { font-size: .78rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.sfx-req-field > span i { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,.35); }
.sfx-req-field input, .sfx-req-field textarea {
  width: 100%; padding: .7rem .2rem; border: 0; border-bottom: 1px solid rgba(255,255,255,.2);
  background: transparent; color: #fff; font: inherit; font-size: 1rem; border-radius: 0;
  transition: border-color 200ms ease;
}
.sfx-req-field input:focus, .sfx-req-field textarea:focus { outline: 0; border-bottom-color: #FF8585; }
.sfx-req-field textarea { resize: vertical; }
.sfx-req-consent {
  display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start;
  color: rgba(255,255,255,.62); font-size: .78rem; line-height: 1.5;
}
.sfx-req-consent input[type="checkbox"] {
  appearance: auto !important; -webkit-appearance: checkbox !important;
  width: 1rem !important; height: 1rem !important; min-width: 1rem;
  margin: .12rem 0 0; padding: 0 !important; accent-color: #FF8585; cursor: pointer;
}
.sfx-req-consent a { color: #FF9A9A; text-underline-offset: 2px; }
.sfx-req-submit {
  align-self: flex-start; margin-top: .6rem;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .9rem 1.6rem !important; border-radius: 999px !important;
  background: #FF8585 !important; color: #191b1f !important; border: 0;
  font-weight: 500; font-size: 1rem; cursor: pointer;
  transition: transform 200ms ease, background 200ms ease;
}
.sfx-req-submit:hover { transform: translateY(-2px); background: #ff9a9a !important; }
.sfx-req-alt { margin: 1.4rem 0 0; font-size: .88rem; color: rgba(255,255,255,.5); }
.sfx-req-alt a { color: #FF8585; }