/* =========================================================================
   KONTAKT-SEITE (.ct-*)
   Aufbau nach Ansage Alexander 24.07.2026: KEIN Hero-Bild. Oben ein
   Textkopf mit Ueberschrift und Subheadline (Takt wie .ov-head auf den
   Uebersichtsseiten), darunter zwei Spalten: LINKS das Formular, RECHTS das
   Hochkantfoto von Alexander mit Direktkontakt darunter.
   Das Formular selbst wird in lp.css gestylt (ein Layout fuer alle
   Kontaktformulare der Site, Vorlage alexander-renner.com/kontakt).
   Additiv zu style.css und lp.css, aendert keine bestehende Seite.
   ========================================================================= */

/* ---------- Textkopf (kein Bild) ---------- */
.ct-head { padding: calc(var(--sec-s) * 0.9) 0 clamp(40px, 5vw, 72px); }
.ct-head .shell { max-width: 1040px; }
.ct-head h1 {
  font-size: var(--fs-d2);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0.35rem 0 0;
  max-width: 22ch;
}
.ct-head__lede {
  margin: 1.1rem 0 0;
  max-width: 56ch;
  color: var(--ink-soft);
  font-size: var(--fs-lede);
  line-height: 1.5;
}

/* ---------- Portrait links, Formular rechts ---------- */
.ct-contact { background: var(--paper); padding-block: var(--sec-s) var(--sec); }
.ct-contact__grid {
  display: grid;
  grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

/* Linke Spalte: Hochkantfoto plus Direktkontakt */
.ct-aside__portrait {
  width: 100%;
  max-width: 360px;
  /* height:auto ist Pflicht: die width/height-Attribute am img wuerden sonst
     die Hoehe festnageln und aspect-ratio ausschalten. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 16px;
}
.ct-aside__direct {
  max-width: 360px;
  margin-top: clamp(24px, 2.6vw, 34px);
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}
.ct-aside__direct p { color: var(--ink-soft); font-size: var(--fs-small); margin-bottom: 10px; }
.ct-aside__direct a { color: var(--bordeaux); font-weight: 700; text-decoration: none; }
.ct-aside__direct a:hover { color: var(--gold-deep); }
.ct-aside__micro { max-width: 360px; margin-top: 18px; font-size: var(--fs-small); color: var(--ink); }

/* Fussnote unter dem Button */
.ct-form__note { margin-top: 14px; font-size: var(--fs-small); color: var(--ink-soft); text-align: center; }
.ct-form__note a { color: var(--bordeaux); }

@media (max-width: 900px) {
  /* Einspaltig; das Portrait steht durch die DOM-Reihenfolge schon oben. */
  .ct-contact__grid { grid-template-columns: 1fr; }
  .ct-aside__portrait { max-width: 280px; }
}
@media (max-width: 560px) {
  .ct-form .fld--row { grid-template-columns: 1fr; }
}