#kapcsolat-main {
  background: var(--color-cream);
}

#kapcsolat-main .kapcsolat-hero {
  position: relative;
  overflow: hidden;
}

#kapcsolat-main .kapcsolat-hero::before {
  position: absolute;
  top: 3.5rem;
  right: max(2rem, calc((100vw - var(--container-max)) / 2));
  width: 4rem;
  height: 4rem;
  background: var(--color-tangerine);
  clip-path: polygon(50% 0%, 61% 35%, 100% 28%, 68% 50%, 100% 72%, 61% 65%, 50% 100%, 39% 65%, 0% 72%, 32% 50%, 0% 28%, 39% 35%);
  content: "";
  transform: rotate(12deg);
}

#kapcsolat-main .kapcsolat-hero::after {
  position: absolute;
  right: 7%;
  bottom: 3rem;
  width: 7rem;
  height: 1.25rem;
  border-top: 3px solid var(--color-cobalt);
  border-bottom: 3px solid var(--color-cobalt);
  content: "";
  transform: rotate(-4deg);
}

#kapcsolat-main .kapcsolat-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(18.75rem, 5fr);
  align-items: start;
  gap: var(--space-8);
}

#kapcsolat-main .kapcsolat-hero__grid > * {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-hero__copy {
  display: flex;
  width: min(100%, 47.5rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-hero__copy h1 {
  width: min(100%, 46rem);
  margin: 0;
  font-size: clamp(2.625rem, 5.4vw, 4rem);
}

#kapcsolat-main .kapcsolat-hero__copy p {
  width: min(100%, 35rem);
  margin: 0;
}

#kapcsolat-main .kapcsolat-hero__cta {
  margin-top: var(--space-2);
}

#kapcsolat-main .kapcsolat-assurance {
  display: flex;
  width: min(100%, 23.75rem);
  min-width: 0;
  justify-self: end;
  flex-direction: column;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-assurance h2,
#kapcsolat-main .kapcsolat-assurance p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-assurance__badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#kapcsolat-main .kapcsolat-topics {
  background: color-mix(in srgb, var(--color-white) 55%, var(--color-cream));
}

#kapcsolat-main .kapcsolat-topics__intro,
#kapcsolat-main .kapcsolat-form-section__intro,
#kapcsolat-main .kapcsolat-details__intro,
#kapcsolat-main .kapcsolat-faq__intro,
#kapcsolat-main .kapcsolat-next__intro {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-topics__intro {
  width: min(100%, 40rem);
  margin-bottom: var(--space-7);
}

#kapcsolat-main .kapcsolat-topics__intro h2,
#kapcsolat-main .kapcsolat-topics__intro p,
#kapcsolat-main .kapcsolat-form-section__intro h2,
#kapcsolat-main .kapcsolat-form-section__intro p,
#kapcsolat-main .kapcsolat-details__intro h2,
#kapcsolat-main .kapcsolat-details__intro p,
#kapcsolat-main .kapcsolat-faq__intro h2,
#kapcsolat-main .kapcsolat-faq__intro p,
#kapcsolat-main .kapcsolat-next__intro h2,
#kapcsolat-main .kapcsolat-next__intro p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-topic-group {
  display: grid;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

#kapcsolat-main .kapcsolat-topic-card {
  display: grid;
  min-width: 0;
  min-height: 15.5rem;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--color-white);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}

#kapcsolat-main .kapcsolat-topic-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#kapcsolat-main .kapcsolat-topic-card__number {
  color: var(--color-cobalt);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

#kapcsolat-main .kapcsolat-topic-card__content {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
}

#kapcsolat-main .kapcsolat-topic-card__label {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.16;
}

#kapcsolat-main .kapcsolat-topic-card__text {
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

#kapcsolat-main .kapcsolat-topic-card__state {
  display: inline-flex;
  width: fit-content;
  min-height: 2rem;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 2px solid currentColor;
  border-radius: var(--radius-badge);
  color: var(--color-blueberry);
  font-size: var(--text-sm);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-topic-card:has(input:checked),
#kapcsolat-main .kapcsolat-topic-card.is-selected {
  background: var(--color-cobalt);
  color: var(--color-white);
}

#kapcsolat-main .kapcsolat-topic-card:has(input:checked) .kapcsolat-topic-card__number,
#kapcsolat-main .kapcsolat-topic-card.is-selected .kapcsolat-topic-card__number {
  color: var(--color-yellow);
}

#kapcsolat-main .kapcsolat-topic-card:has(input:checked) .kapcsolat-topic-card__state,
#kapcsolat-main .kapcsolat-topic-card.is-selected .kapcsolat-topic-card__state {
  background: var(--color-yellow);
  color: var(--color-blueberry);
}

#kapcsolat-main .kapcsolat-topic-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--color-blueberry);
}

#kapcsolat-main .kapcsolat-topic-card:has(input:focus-visible) {
  outline: 3px solid var(--color-tangerine);
  outline-offset: 3px;
}

#kapcsolat-main .kapcsolat-topic-help {
  width: min(100%, 48rem);
  margin: var(--space-6) 0 0;
  padding: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--color-yellow);
  box-shadow: var(--shadow-hard);
}

#kapcsolat-main .kapcsolat-form-section {
  background: var(--color-cream);
}

#kapcsolat-main .kapcsolat-form-section__intro {
  width: min(100%, 40.625rem);
  margin-bottom: var(--space-7);
}

#kapcsolat-main .kapcsolat-form {
  display: flex;
  width: min(100%, 56.25rem);
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-6);
  margin: 0;
}

#kapcsolat-main .kapcsolat-form__summary,
#kapcsolat-main .kapcsolat-form__status {
  padding: var(--space-4);
  border: var(--border-strong);
  border-radius: var(--radius-control);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-form__summary {
  background: var(--color-tangerine);
}

#kapcsolat-main .kapcsolat-form__status {
  background: var(--color-yellow);
}

#kapcsolat-main .kapcsolat-form__fields {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

#kapcsolat-main .kapcsolat-form__fields > *,
#kapcsolat-main .kapcsolat-form__message,
#kapcsolat-main .kapcsolat-confirmations,
#kapcsolat-main .kapcsolat-form__actions {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-form__field {
  align-content: start;
}

#kapcsolat-main .kapcsolat-form input,
#kapcsolat-main .kapcsolat-form select,
#kapcsolat-main .kapcsolat-form textarea {
  min-height: 3rem;
  font-size: var(--text-base);
}

#kapcsolat-main .kapcsolat-form textarea {
  min-height: 9rem;
}

#kapcsolat-main .kapcsolat-field-help,
#kapcsolat-main .kapcsolat-field-error {
  font-size: var(--text-sm);
  line-height: 1.43;
}

#kapcsolat-main .kapcsolat-field-error {
  display: block;
  color: var(--color-blueberry);
  font-weight: 700;
}

#kapcsolat-main .has-error :is(input, select, textarea),
#kapcsolat-main input[aria-invalid="true"],
#kapcsolat-main select[aria-invalid="true"],
#kapcsolat-main textarea[aria-invalid="true"] {
  border: 3px solid var(--color-tangerine);
}

#kapcsolat-main .kapcsolat-message-tips {
  display: grid;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: 4px solid var(--color-yellow);
  background: color-mix(in srgb, var(--color-yellow) 18%, var(--color-white));
}

#kapcsolat-main .kapcsolat-message-tips p {
  margin: 0;
  font-size: var(--text-sm);
}

#kapcsolat-main .kapcsolat-confirmations {
  display: grid;
  min-width: 0;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5);
  border: var(--border-strong);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-cream) 65%, var(--color-white));
}

#kapcsolat-main .kapcsolat-confirmations legend {
  padding: 0 var(--space-2);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-check {
  display: grid;
  min-width: 0;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  cursor: pointer;
}

#kapcsolat-main .kapcsolat-check input {
  margin-top: 0.25rem;
}

#kapcsolat-main .kapcsolat-form__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-form__actions .form-note {
  width: min(100%, 38.75rem);
  margin: 0;
}

#kapcsolat-main .kapcsolat-booking {
  background: color-mix(in srgb, var(--color-white) 50%, var(--color-cream));
}

#kapcsolat-main .kapcsolat-booking__grid {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 7fr) minmax(21.25rem, 5fr);
  align-items: start;
  gap: var(--space-8);
}

#kapcsolat-main .kapcsolat-booking__grid > * {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-booking__copy {
  display: flex;
  width: min(100%, 38.75rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-booking__copy h2,
#kapcsolat-main .kapcsolat-booking__copy p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-booking-steps {
  display: grid;
  width: min(100%, 30rem);
  min-width: 0;
  gap: var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}

#kapcsolat-main .kapcsolat-booking-steps li {
  display: grid;
  min-width: 0;
  grid-template-columns: 3rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}

#kapcsolat-main .kapcsolat-booking-steps li > span {
  color: var(--color-cobalt);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

#kapcsolat-main .kapcsolat-booking-steps li > div {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-booking-steps p {
  margin-top: var(--space-1);
}

#kapcsolat-main .kapcsolat-booking__card {
  display: flex;
  width: min(100%, 25rem);
  min-width: 0;
  justify-self: end;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-booking__card h3,
#kapcsolat-main .kapcsolat-booking__card p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-details__intro {
  width: min(100%, 42.5rem);
  margin-bottom: var(--space-7);
}

#kapcsolat-main .kapcsolat-detail-cards,
#kapcsolat-main .kapcsolat-next-cards {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

#kapcsolat-main .kapcsolat-detail-cards > *,
#kapcsolat-main .kapcsolat-next-cards > * {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-detail-card,
#kapcsolat-main .kapcsolat-next-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-detail-card h3,
#kapcsolat-main .kapcsolat-detail-card p,
#kapcsolat-main .kapcsolat-next-card h3,
#kapcsolat-main .kapcsolat-next-card p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-detail-card a,
#kapcsolat-main .kapcsolat-next-card a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  margin-top: auto;
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-detail-card__marker {
  display: inline-flex;
  min-height: 1.875rem;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: var(--border-strong);
  border-radius: var(--radius-badge);
  font-size: var(--text-sm);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-detail-card__marker--cobalt {
  background: var(--color-cobalt);
  color: var(--color-white);
}

#kapcsolat-main .kapcsolat-detail-card__marker--yellow {
  background: var(--color-yellow);
}

#kapcsolat-main .kapcsolat-detail-card__marker--tangerine {
  background: var(--color-tangerine);
}

#kapcsolat-main .kapcsolat-detail-card__badges {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--space-2);
}

#kapcsolat-main .kapcsolat-faq {
  background: color-mix(in srgb, var(--color-white) 48%, var(--color-cream));
}

#kapcsolat-main .kapcsolat-faq__layout {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 48.75rem) minmax(0, 1fr);
  gap: var(--space-7);
}

#kapcsolat-main .kapcsolat-faq__content,
#kapcsolat-main .kapcsolat-faq__zigzag {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-faq__intro {
  width: min(100%, 40.625rem);
  margin-bottom: var(--space-6);
}

#kapcsolat-main .kapcsolat-faq-list {
  display: grid;
  width: min(100%, 48.75rem);
  min-width: 0;
  gap: var(--space-3);
}

#kapcsolat-main .kapcsolat-faq-list details {
  min-width: 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-control);
  background: var(--color-white);
}

#kapcsolat-main .kapcsolat-faq-list details[open] {
  border: var(--border-strong);
  border-left: 6px solid var(--color-yellow);
}

#kapcsolat-main .kapcsolat-faq-list summary {
  display: flex;
  min-height: 3rem;
  align-items: center;
  padding: var(--space-4);
  color: var(--color-blueberry);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-faq-answer {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}

#kapcsolat-main .kapcsolat-faq-answer p {
  width: min(100%, 38.75rem);
  margin: 0;
}

#kapcsolat-main .kapcsolat-faq__zigzag {
  width: 6rem;
  height: 8rem;
  align-self: center;
  justify-self: center;
  background: repeating-linear-gradient(135deg, transparent 0 11px, var(--color-tangerine) 12px 16px, transparent 17px 28px);
  transform: rotate(10deg);
}

#kapcsolat-main .kapcsolat-next__intro {
  width: min(100%, 38.75rem);
  margin-bottom: var(--space-7);
}

#kapcsolat-main .kapcsolat-closing {
  padding-top: var(--space-7);
}

#kapcsolat-main .kapcsolat-closing__panel {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: var(--space-7);
  padding: var(--space-7);
}

#kapcsolat-main .kapcsolat-closing__panel > * {
  min-width: 0;
}

#kapcsolat-main .kapcsolat-closing__copy {
  display: flex;
  width: min(100%, 35rem);
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

#kapcsolat-main .kapcsolat-closing__copy h2,
#kapcsolat-main .kapcsolat-closing__copy p {
  margin: 0;
}

#kapcsolat-main .kapcsolat-closing__assurance {
  color: var(--color-yellow);
  font-weight: 700;
}

#kapcsolat-main .kapcsolat-closing__actions {
  display: flex;
  min-width: 0;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-3);
}

#kapcsolat-main .kapcsolat-closing__actions > a {
  min-width: 10.625rem;
}

@media (max-width: 61.1875rem) {
  #kapcsolat-main .kapcsolat-hero__grid,
  #kapcsolat-main .kapcsolat-booking__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }

  #kapcsolat-main .kapcsolat-topic-group,
  #kapcsolat-main .kapcsolat-detail-cards,
  #kapcsolat-main .kapcsolat-next-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #kapcsolat-main .kapcsolat-topic-card:last-child,
  #kapcsolat-main .kapcsolat-detail-card:last-child,
  #kapcsolat-main .kapcsolat-next-card:last-child {
    grid-column: 1 / -1;
  }

  #kapcsolat-main .kapcsolat-closing__panel {
    grid-template-columns: 1fr;
  }

  #kapcsolat-main .kapcsolat-closing__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 56.1875rem) {
  #kapcsolat-main .kapcsolat-booking__grid {
    grid-template-columns: 1fr;
  }

  #kapcsolat-main .kapcsolat-booking__card {
    width: min(100%, 32.5rem);
    justify-self: start;
  }

  #kapcsolat-main .kapcsolat-faq__layout {
    grid-template-columns: 1fr;
  }

  #kapcsolat-main .kapcsolat-faq__zigzag {
    display: none;
  }
}

@media (max-width: 51.1875rem) {
  #kapcsolat-main .kapcsolat-hero__grid {
    grid-template-columns: 1fr;
  }

  #kapcsolat-main .kapcsolat-assurance {
    width: min(100%, 35rem);
    justify-self: start;
  }

  #kapcsolat-main .kapcsolat-form__fields {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 44.9375rem) {
  #kapcsolat-main .kapcsolat-hero::before,
  #kapcsolat-main .kapcsolat-hero::after {
    display: none;
  }

  #kapcsolat-main .kapcsolat-hero__grid,
  #kapcsolat-main .kapcsolat-booking__grid,
  #kapcsolat-main .kapcsolat-closing__panel {
    gap: var(--space-5);
  }

  #kapcsolat-main .kapcsolat-hero__copy h1 {
    font-size: 2rem;
    line-height: 1.09;
  }

  #kapcsolat-main .kapcsolat-hero__cta,
  #kapcsolat-main .kapcsolat-booking__card .button,
  #kapcsolat-main .kapcsolat-form__actions .button,
  #kapcsolat-main .kapcsolat-closing__actions > a {
    width: min(100%, 30rem);
  }

  #kapcsolat-main .kapcsolat-topic-group,
  #kapcsolat-main .kapcsolat-detail-cards,
  #kapcsolat-main .kapcsolat-next-cards {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  #kapcsolat-main .kapcsolat-topic-card:last-child,
  #kapcsolat-main .kapcsolat-detail-card:last-child,
  #kapcsolat-main .kapcsolat-next-card:last-child {
    grid-column: auto;
  }

  #kapcsolat-main .kapcsolat-topic-card {
    min-height: 0;
    padding: var(--space-5);
  }

  #kapcsolat-main .kapcsolat-form,
  #kapcsolat-main .kapcsolat-booking__card {
    width: 100%;
  }

  #kapcsolat-main .kapcsolat-confirmations,
  #kapcsolat-main .kapcsolat-closing__panel {
    padding: var(--space-5);
  }

  #kapcsolat-main .kapcsolat-closing__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  #kapcsolat-main .kapcsolat-closing__actions > a {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #kapcsolat-main .kapcsolat-hero::before,
  #kapcsolat-main .kapcsolat-hero::after,
  #kapcsolat-main .kapcsolat-faq__zigzag {
    transform: none;
  }

  #kapcsolat-main .kapcsolat-topic-card:hover {
    transform: none;
  }
}