/* ==========================================================================
   Wurzel Umzüge — eigenständiges Glasmorphismus-Theme
   Gleiche Corporate Identity (Lila #342B74 · Grün #45B82E · Schrift "Golos
   Text" · Logo · "seit 1930"), aber frosted-glass Optik, damit sich das
   Umzugsprojekt klar vom Logistik-Hauptsite abhebt.
   Nur aktiv auf body.wz-umzuege (gesetzt durch build-umzuege.mjs).
   Wird NACH modern-overrides.css geladen.
   ========================================================================== */

/* ---- Farbiger Mesh-Hintergrund: Refraktionsfläche, auf der das Glas wirkt ---- */
body.wz-umzuege { background: #e9ebf4; }
body.wz-umzuege::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(36rem 36rem at 10% 2%,  rgba(69,184,46,.34), transparent 60%),
    radial-gradient(34rem 34rem at 93% 10%, rgba(52,43,116,.36), transparent 60%),
    radial-gradient(44rem 44rem at 80% 76%, rgba(69,184,46,.26), transparent 62%),
    radial-gradient(40rem 40rem at 6% 94%,  rgba(52,43,116,.30), transparent 62%);
}
/* Inhalts-Container transparent + über den Mesh heben */
body.wz-umzuege .con-kit-site,
body.wz-umzuege .con-kit-page,
body.wz-umzuege main { position: relative; z-index: 1; background: transparent !important; }

/* ---- Sektionen: gefüllte Flächen weg, Mesh durchscheinen lassen ---- */
body.wz-umzuege .wz-section { background: transparent !important; }
/* Sanfte Glas-Bänder für Rhythmus (statt grauer Vollfläche), ohne Doppel-Blur */
body.wz-umzuege .wz-section--soft {
  background: rgba(255,255,255,.26) !important;
  border-block: 1px solid rgba(255,255,255,.5);
}

/* ---- Frosted-Glass-Karten (das zentrale Designmerkmal) ---- */
body.wz-umzuege .wz-usp,
body.wz-umzuege .wz-step__card,
body.wz-umzuege .wz-review,
body.wz-umzuege .wz-faq details,
body.wz-umzuege .wz-chip {
  background: rgba(255,255,255,.55) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255,255,255,.65) !important;
  box-shadow: 0 8px 30px rgba(31,38,90,.14), inset 0 1px 0 rgba(255,255,255,.6) !important;
}
body.wz-umzuege .wz-usp:hover,
body.wz-umzuege .wz-step:hover .wz-step__card,
body.wz-umzuege .wz-review:hover {
  background: rgba(255,255,255,.7) !important;
  border-color: rgba(255,255,255,.85) !important;
  box-shadow: 0 18px 48px rgba(31,38,90,.22), inset 0 1px 0 rgba(255,255,255,.75) !important;
}
/* FAQ-Inhalt liegt im selben Glas wie das <details> -> kein Extra-Hintergrund */
body.wz-umzuege .wz-faq summary { color: var(--wz-purple); }

/* Glas-Icon-Badges in den USP-Karten */
body.wz-umzuege .wz-usp__icon {
  background: rgba(69,184,46,.16);
  border: 1px solid rgba(69,184,46,.4);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Region-Foto als Glasrahmen */
body.wz-umzuege .wz-media__img {
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 18px 48px rgba(31,38,90,.2);
}

/* ---- CTA-Band als Glas-Panel statt Vollfläche ---- */
body.wz-umzuege .wz-cta {
  background: linear-gradient(120deg, rgba(52,43,116,.82), rgba(69,184,46,.5)) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.42);
  box-shadow: 0 26px 64px rgba(31,38,90,.3), inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---- Hero: dezenter Glas-Touch an Eyebrow + Badge-Leiste ---- */
body.wz-umzuege .wz-hero__eyebrow { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
body.wz-umzuege .wz-hero__badges {
  border-top: 1px solid rgba(255,255,255,.22);
}

/* ---- Buttons: Primär-CTA als grünes Glas, "on-dark" als helles Glas ---- */
body.wz-umzuege .wz-btn--on-dark {
  background: rgba(255,255,255,.16) !important; color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body.wz-umzuege .wz-btn--on-dark:hover { background: rgba(255,255,255,.28) !important; }

/* Reduced-Motion / sehr alte Browser ohne backdrop-filter: solide Fallback-Flächen
   sind bereits durch die rgba-Backgrounds gedeckt (Lesbarkeit bleibt erhalten). */

/* ==========================================================================
   Umzugs-Anfrageformular (#anfrage) — Glas-Panel
   ========================================================================== */
.wz-anfrage {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px);
  align-items: start; font-family: var(--wz-font);
}
.wz-anfrage__intro { padding-top: 6px; }
.wz-anfrage__intro .wz-h2 { margin: 6px 0 12px; }
.wz-anfrage__phone { margin-top: 16px; color: var(--wz-ink); font-weight: 600; }
.wz-anfrage__phone a { color: var(--wz-green-dark); text-decoration: none; }
.wz-anfrage__phone a:hover { text-decoration: underline; }

/* Glas-Panel um das Formular */
body.wz-umzuege .wz-form {
  display: flex; flex-direction: column; gap: 16px;
  background: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 18px 52px rgba(31,38,90,.2), inset 0 1px 0 rgba(255,255,255,.7);
  border-radius: var(--wz-radius); padding: clamp(22px, 3vw, 36px);
}
.wz-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wz-form__field { display: flex; flex-direction: column; gap: 6px; }
.wz-form__field > span { font-weight: 600; font-size: .9rem; color: var(--wz-ink); }
.wz-form__field input, .wz-form__field select, .wz-form__field textarea {
  font: inherit; color: var(--wz-ink); width: 100%; box-sizing: border-box;
  padding: 12px 14px; border-radius: var(--wz-radius-sm);
  background: rgba(255,255,255,.8); border: 1px solid rgba(52,43,116,.18);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.wz-form__field input:focus, .wz-form__field select:focus, .wz-form__field textarea:focus {
  outline: none; background: #fff; border-color: var(--wz-green);
  box-shadow: 0 0 0 3px rgba(69,184,46,.18);
}
.wz-form__consent { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--wz-ink-soft); line-height: 1.5; }
.wz-form__consent input { margin-top: 3px; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--wz-green); }
.wz-form__consent a { color: var(--wz-green-dark); }
.wz-form button[type=submit] { align-self: flex-start; border: 0; cursor: pointer; }
.wz-form button[type=submit][disabled] { opacity: .6; pointer-events: none; }
.wz-form__status { margin: 0; font-size: .92rem; font-weight: 600; min-height: 1.2em; }
.wz-form__status--error { color: #b3261e; }
.wz-form__done { text-align: center; padding: 18px 4px; }
.wz-form__done strong { display: block; color: var(--wz-purple); font-size: 1.15rem; margin-bottom: 6px; }
.wz-form__done span { color: var(--wz-ink-soft); }

@media (max-width: 860px) {
  .wz-anfrage { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wz-form__row { grid-template-columns: 1fr; }
}