.legend { margin-top: 32px; max-width: 30rem; background: var(--felt); color: var(--blaek); border-radius: 6px; padding: 20px; box-shadow: 0 2px 0 rgba(4,30,70,.35); }
.legend :focus-visible { outline-color: var(--rod); }
.legend button:focus-visible { outline-color: var(--blaek); }
.field + .field { margin-top: 14px; }
.field label { display: block; font: 500 .9375rem var(--sans); margin-bottom: 6px; }
.field label span { font-weight: 400; color: var(--blaek2); }
input[type=email], input[type=text], input[type=url], input[type=number], select, textarea {
  width: 100%; height: 48px; padding: 0 14px;
  font: 400 1.0625rem var(--sans); color: var(--blaek);
  background: #fff; border: 1.5px solid var(--blaek2); border-radius: 4px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--rod); outline-offset: 1px; border-color: var(--blaek); }
input:user-invalid, select:user-invalid, textarea:user-invalid { border-color: var(--rod); }
textarea { height: auto; min-height: 96px; padding: 10px 14px; line-height: 1.45; resize: vertical; }
.hint { margin: -2px 0 6px; font: 400 .875rem/1.4 var(--sans); color: var(--blaek2); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset legend { padding: 0; margin-bottom: 6px; font: 500 .9375rem var(--sans); }
fieldset legend span { font-weight: 400; color: var(--blaek2); }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks label, .consent { display: flex; gap: 8px; align-items: flex-start; font: 400 1rem/1.4 var(--sans); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--rod); }
.pop { padding: 0; border: 0; background: none; color: var(--blaek); width: min(36rem, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; }
.pop::backdrop { background: rgba(4, 30, 70, .62); }
.pop .legend { position: relative; margin: 0; max-width: none; padding: 24px; }
.pop h2 { margin-right: 48px; font-size: 1.75rem; line-height: 1.1; }
.sub { margin-top: 8px; font: 400 1rem/1.5 var(--sans); color: var(--blaek2); }
.stack :is(.field, .row, fieldset, .consent) { margin-top: 16px; }
.stack .row .field, .stack input[type=hidden] + .field { margin-top: 0; }
.luk { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: 0; border-radius: 4px; background: none; color: var(--blaek); font: 400 1.75rem/1 var(--sans); cursor: pointer; }
.luk:hover { background: var(--papir); }
.row { display: grid; gap: 14px; }
@media (min-width: 520px) { .row { grid-template-columns: 1.3fr 1fr; } .row .field + .field { margin-top: 0; } }
.btn, button[type=submit] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  margin-top: 16px; padding: 0 24px; border: 0; border-radius: 4px; cursor: pointer;
  font: 600 1.0625rem/1 var(--sans); color: #fff; background: var(--rod); text-decoration: none;
}
.btn:hover, button[type=submit]:hover { background: #A00E16; }
.btn:focus-visible, button[type=submit]:focus-visible { outline: 3px solid var(--blaek); outline-offset: 3px; }
.next { margin: 14px 0 0; font: 400 .9375rem/1.5 var(--sans); color: var(--blaek2); }
.ok { margin: 14px 0 0; font: 600 1rem/1.45 var(--sans); color: var(--blaek); }
.ok:not(:target) { display: none; }