/*
 * /kontakt – demo-formular og kontaktinfo.
 * Bygger på site.css; kun det, siden har ud over de fælles klasser.
 */

/* ---------- Layout ---------- */

.kt-section { padding-top: 88px; }

.kt-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
}

.kt-intro {
  flex: 1 1 400px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kt-title { font-size: 56px; line-height: 1.04; }

.kt-lead { font-size: 19px; line-height: 1.6; max-width: none; }

/* ---------- Trin 1-2-3 ---------- */

.kt-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kt-step { display: flex; gap: 16px; align-items: flex-start; }
.kt-step__n {
  flex: 0 0 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.kt-step__text { font-size: 17px; line-height: 1.5; padding-top: 6px; }

/* ---------- Kontaktkort ---------- */

.kt-address {
  font-style: normal;
  background: var(--white);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
}
.kt-address__name { font-family: var(--font-display); font-weight: 800; font-size: 20px; }

.kt-login { font-size: 16px; color: var(--muted); }
.kt-login a { font-weight: 700; }

/* ---------- Formularkort ---------- */

.kt-card {
  flex: 1 1 480px;
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 40px;
  box-shadow: 0 20px 48px rgba(14, 59, 67, 0.1);
}

.kt-form { gap: 20px; }
.kt-form__title { font-family: var(--font-display); font-weight: 800; font-size: 26px; }
.kt-form .form__row { gap: 20px; }
.kt-form .field { gap: 8px; font-size: 15px; }
.kt-form .field input,
.kt-form .field select,
.kt-form .field textarea { font-size: 17px; }
.kt-form .field input { height: 52px; padding: 0 16px; }
.kt-form .field select { height: 52px; padding: 0 12px; }
.kt-form .field textarea { padding: 14px 16px; }
.kt-form .field input:hover,
.kt-form .field select:hover,
.kt-form .field textarea:hover { border-color: var(--link); }
.kt-form .form__note { font-size: 14px; line-height: 1.5; text-align: left; }
.kt-form .form__note a { color: var(--navy); }
.kt-form .btn { min-height: 56px; font-size: 18px; }

/* ---------- Kvittering ---------- */

.kt-done {
  background: transparent;
  border-radius: 0;
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.kt-done[hidden] { display: none; }
.kt-done:focus { outline: none; }
.kt-done__mascot { width: 88px; height: auto; }
.kt-done__title { font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1.1; }
.kt-done__text { font-size: 18px; line-height: 1.6; color: var(--muted); }
.kt-done__again {
  min-height: 48px;
  padding: 0 24px;
  font-size: 16px;
  background: var(--white);
  color: var(--navy);
  border-color: var(--navy);
}
.kt-done__again:hover { color: var(--navy); }

/* ---------- Mobil ---------- */

@media (max-width: 720px) {
  .kt-section { padding-top: 56px; }
  .kt-title { font-size: 40px; line-height: 1.08; }
  .kt-card { padding: 24px; }
  .kt-address { padding: 24px; }
  .kt-form .form__row { grid-template-columns: minmax(0, 1fr); }
  .kt-done__title { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .kt-form .field input,
  .kt-form .field select,
  .kt-form .field textarea,
  .kt-done__again { transition: none; }
}