/* ============================================================
   18_ DESKTOP-FORMULAR-OPTIMIERUNG  (>=900px)
   Mobile <=640px bleibt unberuehrt. Klassen/IDs werden generisch
   ueber alle Screens hinweg genutzt; keine JS-/PHP-Aenderungen.
   ============================================================ */

@media (min-width: 900px) {
  /* Breiter Bildbereich, ruhige Mittenfuehrung */
  .stage { min-height: calc(100svh - 88px); }
  .stage-inner {
    max-width: 1240px;
    padding: 36px 32px 144px;
  }

  /* Aktiver Screen als zentrierte Form-Schale mit Tiefe */
  .screen.is-active {
    max-width: 1180px;
    margin: 0 auto;
    padding: 36px 40px 40px;
    background: var(--concrete, #F5F1EC);
    border: 1px solid var(--steel-soft, rgba(58, 74, 92, .14));
    border-radius: 18px;
    box-shadow:
      0 24px 48px rgba(31, 36, 42, .08),
      0 4px 12px rgba(31, 36, 42, .05);
  }

  /* Header-Rhythmus: zweispaltig (Num/Titel | Meta) */
  .screen.is-active .module-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--steel-soft, rgba(58, 74, 92, .14));
    margin-bottom: 22px;
  }
  .screen.is-active .module-head .meta { justify-self: end; }
  .screen.is-active .h-display { max-width: 30ch; }

  /* Step 1 – Bausteine: vier Spalten, ruhige Kartenhoehen */
  #screen-1.is-active .bausteine {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
  #screen-1.is-active .baustein { aspect-ratio: 9 / 5; }
  #screen-1.is-active .baustein-custom { aspect-ratio: 8 / 1; }

  /* Step 2 – Details / Upload: zweispaltig, mehr Atmungsraum */
  #screen-2.is-active .form.details-form {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    column-gap: 28px;
    row-gap: 24px;
  }
  #screen-2.is-active .form.details-form > .field { grid-column: auto; }
  #screen-2.is-active .form.details-form .field-textarea { min-height: 220px; }

  /* Step 3 – Budget: vierspaltig auf voller Breite */
  #screen-3.is-active .budget {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }
  #screen-3.is-active .budget-card { padding: 22px 20px; }

  /* Step 4 – Kontakt: 2-spaltiges Form-Grid, Consent/Pflichtfeld voll */
  #screen-4.is-active .form {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    padding-top: 24px;
  }
  #screen-4.is-active .form > .honeypot,
  #screen-4.is-active .form > .consent-field,
  #screen-4.is-active .form > .required-note,
  #screen-4.is-active .form > .privacy,
  #screen-4.is-active .form > #field-channels { grid-column: 1 / -1; }

  /* Generische Form-Affordance auf Desktop */
  .screen.is-active .form,
  .screen.is-active .details-form { padding-top: 22px; }
  .screen.is-active .field-input,
  .screen.is-active .field-textarea { font-size: 16px; }

  /* Erreichbare Navigation am Form-Fuss; nur auf hohen Desktop-Viewports sticky,
     damit kurze Browserfenster keine leeren Kartenflaechen erzeugen. */
  .screen.is-active .nav.is-floating {
    position: static;
    bottom: auto;
    margin-top: 32px;
    padding: 16px 20px;
    background: var(--concrete, #F5F1EC);
    border: 1px solid var(--steel-soft, rgba(58, 74, 92, .12));
    border-radius: 14px;
    box-shadow: 0 12px 24px rgba(31, 36, 42, .08);
  }
  @media (min-height: 760px) {
    .screen.is-active .nav.is-floating {
      position: sticky;
      bottom: 16px;
    }
  }

  /* Step 5 – Bestaetigung: ruhig zentriert */
  #screen-5.is-active .confirm {
    max-width: 820px;
    margin: 0 auto;
  }
}

@media (min-width: 1180px) {
  .stage-inner { max-width: 1280px; }
  .screen.is-active { max-width: 1220px; padding: 40px 48px 48px; }
  #screen-2.is-active .form.details-form { column-gap: 36px; }
}