/* UI/CRO V4 - Anfrage-Seite (de/Service/_anfrage_v4.php) - 2026-09-30
   Nur geladen, wenn der Bereich "Service-Seiten" im Admin (/admin/ui_v4.php) aktiv ist. */

.v4-anfrage { padding: 0; color: var(--ink, #142437); }

/* Kopf: Hero-Baustein der Service-Seiten (_einstieg_hero_v4.php, Styles in ui_v4_service.css) */

/* Raster: Formular + Kontaktspalte */
.v4-anfrage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }

/* Formular-Karte */
.v4-anfrage-form-card { padding: 32px; border-radius: 16px; background: #fff; box-shadow: 0 12px 36px rgba(6, 38, 64, .08); }
.v4-anfrage-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.v4-field--full { grid-column: 1 / -1; }
.v4-anfrage .v4-field label {
  display: block;
  float: none;
  width: auto;
  margin: 0 0 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #062640);
}
.v4-anfrage .v4-field input,
.v4-anfrage .v4-field textarea {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 10px 14px;
  box-sizing: border-box;
  border: 1px solid #cfd5da;
  border-radius: 8px;
  background: #fff;
  box-shadow: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink, #142437);
}
.v4-anfrage .v4-field textarea { height: auto; min-height: 180px; resize: vertical; line-height: 1.5; }
.v4-anfrage .v4-field input:focus,
.v4-anfrage .v4-field textarea:focus { outline: 0; border-color: var(--pink, #ed0b87); box-shadow: 0 0 0 3px rgba(237, 11, 135, .15); }
.v4-anfrage .v4-field ::placeholder { color: #9aa4ad; }
.v4-req { color: var(--pink, #ed0b87); }
.v4-opt { font-weight: 400; color: var(--muted, #5e6976); }

.v4-anfrage-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink, #142437);
  cursor: pointer;
}
.v4-anfrage-consent input { flex: 0 0 20px; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pink, #ed0b87); }
.v4-anfrage-consent a { color: var(--pink, #ed0b87); font-weight: 600; }

.v4-anfrage-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 40px;
  border: 0;
  border-radius: 8px;
  background: var(--pink, #ed0b87);
  color: #fff;
  font: 700 19px/1 "Barlow Condensed", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
}
.v4-anfrage-submit:hover { background: var(--pink-dark, #c90070); }
.v4-anfrage-submit[disabled] { opacity: .6; cursor: default; }
.v4-anfrage-note { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted, #5e6976); }

.v4-anfrage-feedback { margin: 0 0 20px; padding: 14px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.v4-anfrage-feedback.is-success { background: #eaf7ee; color: #1f6f3a; }
.v4-anfrage-feedback.is-error { background: #fdecef; color: #a3162c; }

/* Kontaktspalte */
.v4-anfrage-side { display: flex; flex-direction: column; gap: 20px; }
.v4-anfrage-card { padding: 24px; border-radius: 16px; background: #fff; }
.v4-anfrage-card h2 { margin: 0 0 16px; font-size: 24px; line-height: 1; color: var(--navy, #062640); }
.v4-anfrage-contact,
.v4-anfrage-links { list-style: none; margin: 0; padding: 0; }
.v4-anfrage-contact li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; }
.v4-anfrage-contact svg { flex: 0 0 auto; margin-top: 2px; font-size: 20px; color: var(--pink, #ed0b87); }
.v4-anfrage .v4-anfrage-contact a { font-size: 15px; font-weight: 700; color: var(--navy, #062640); text-decoration: none; }
.v4-anfrage .v4-anfrage-contact a:hover { color: var(--pink, #ed0b87); }
.v4-anfrage-contact small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted, #5e6976); }
.v4-anfrage-links li + li { border-top: 1px solid var(--line, #dfe4e8); }
.v4-anfrage-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy, #062640);
  text-decoration: none;
}
.v4-anfrage-links a:hover { color: var(--pink, #ed0b87); }
.v4-anfrage-links svg { flex: 0 0 auto; font-size: 18px; color: var(--turquoise, #10b8c7); }

/* Tablet/Mobil: untereinander, Formular zuerst; mobil randlos wie die uebrigen Seiten */
@media (max-width: 900px) {
  .v4-anfrage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .v4-anfrage .v4-lp-hero { margin-bottom: 8px; }
  .v4-anfrage-form-card,
  .v4-anfrage-card { border-radius: 0; box-shadow: none; padding: 22px 16px; }
  .v4-anfrage-grid,
  .v4-anfrage-side { gap: 8px; }
  .v4-anfrage-fields { grid-template-columns: 1fr; gap: 16px; }
  .v4-anfrage-submit { width: 100%; }
}