/* =====================================================================
   COG — kontakt.css  ·  Kontaktseite: Layout + dezent abgesetztes Formular
   ===================================================================== */

/* Zweispaltiges Layout: Kontaktdaten schmaler, Formular breiter */
.contact-layout{display:grid;grid-template-columns:1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
@media(min-width:900px){.contact-layout{grid-template-columns:.8fr 1.2fr}}

/* Formular-Panel — dezent farblich abgesetzt */
.form-panel{background:var(--color-bg-2);border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:clamp(1.5rem,3vw,2.6rem);box-shadow:var(--shadow-sm)}
.form-panel .eyebrow{margin-bottom:var(--sp-4)}
.form-panel .contact-form{max-width:none}
/* Eingabefelder hell, damit sie sich vom getönten Panel abheben */
.form-panel .field input,.form-panel .field select,.form-panel .field textarea{background:var(--color-surface)}

/* Zweispaltige Feld-Anordnung ab Tablet */
@media(min-width:600px){
  .form-panel .contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.2rem;align-items:start}
  .form-panel .contact-form > .field{margin-bottom:0}
  .form-panel .contact-form > .checkbox-row{margin-bottom:0}
  .form-panel .contact-form > .field--full,
  .form-panel .contact-form > .checkbox-row,
  .form-panel .contact-form > .form-status,
  .form-panel .contact-form > .field__error{grid-column:1 / -1}
  .form-panel .contact-form > #cf-submit{grid-column:1 / -1;justify-self:start;margin-top:.3rem}
}