/* =====================================================================
   KONTAKTSIDEN · utkast 3 (lyst og midtstilt)
   Midtstilt tittel, og under den samme oppsettet som kontaktdelen på
   forsiden: et mørkt kort med e-post og telefon til venstre (sidens ene
   mørke flate), skjemaet i et hvitt kort til høyre.
   Adresse og org.nr står i bunnteksten, resten av fakta på om-oss.html.
   Ingen egen JavaScript: skjemaet styres av felles.js, som legger
   feilmeldingen (.felt-feil) rett under feltet som er feil.
   ===================================================================== */

/* ---------- Sidehodet med skjemaet ---------- */
.kk-intro { margin-inline: auto; margin-bottom: clamp(2.75rem, 2rem + 2.4vw, 4.5rem); }
.kk-intro .display { max-width: none; }

/* Det mørke kortet til venstre og skjemaet til høyre. Kortet er bare så
   høyt som innholdet (strukket til skjemaets høyde ble det en tom, svart
   flate), og blir stående under toppen mens man fyller ut skjemaet. */
.kk-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1.25rem, .5rem + 2vw, 2rem); align-items: start; }
.kk-direkte { position: sticky; top: calc(var(--topp-hoyde) + 1.5rem); }

/* Hjelpetekstene i skjemaet */
.valg legend { padding: 0; }
.valg .hjelp { flex-basis: 100%; margin-bottom: .2rem; }
.felt label .hjelp { display: block; margin-top: .15rem; font-weight: 400; }
/* Når feltet ved siden av får en feilmelding, blir raden høyere: feltene
   skal da bli stående øverst, ikke strekkes */
/* Feilmeldingen rett under feltet: litt luft og en liten markør foran */
.felt .felt-feil { display: flex; gap: .45rem; align-items: baseline; font-weight: 500; }
.felt .felt-feil::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; transform: translateY(-1px); }

/* Send-knappen med personvernlenken ved siden av */
.kk-send-rad { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .4rem; }
.kk-hode .kontakt-kort .knapp { justify-self: auto; }
/* .kk-personvern står i stil.css (brukes også på forsiden) */

@media (max-width: 900px) {
  .kk-grid { grid-template-columns: minmax(0, 1fr); }
  .kk-direkte { position: static; }
}