.kontakt-page {
  overflow-x: clip;
}

.kontakt-page .container {
  width: min(100% - 2rem, var(--container-max));
}

.kontakt-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--color-night-navy);
}

.kontakt-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-pixel-line);
  content: "";
}

.kontakt-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(20rem, 5fr);
  align-items: center;
  gap: var(--space-6);
}

.kontakt-hero__copy,
.kontakt-hero__map,
.kontakt-topics__heading,
.kontakt-topic-card,
.kontakt-details__identity,
.kontakt-details__route,
.kontakt-detail,
.kontakt-transparency__panel,
.kontakt-form-panel,
.kontakt-form-aside,
.kontakt-shortcuts__heading,
.kontakt-shortcut-cluster,
.kontakt-shortcut {
  min-width: 0;
}

.kontakt-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-hero__copy h1,
.kontakt-hero__copy p {
  margin: 0;
}

.kontakt-hero__copy h1 {
  max-width: 12ch;
  font-size: clamp(2.25rem, 6vw, 4rem);
}

.kontakt-hero__lead {
  max-width: 60ch;
  font-size: var(--font-size-18);
  line-height: 1.5;
}

.kontakt-hero__support {
  max-width: 60ch;
  color: var(--color-muted-blue);
}

.kontakt-hero__anchor {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-neon-lime);
  font-family: var(--font-heading);
  font-size: var(--font-size-14);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kontakt-hero__map {
  position: relative;
  width: 100%;
  min-height: 20rem;
  overflow: hidden;
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  background: var(--color-deep-navy);
}

.kontakt-hero__road,
.kontakt-hero__building,
.kontakt-hero__crossing,
.kontakt-hero__goal {
  position: absolute;
  display: block;
}

.kontakt-hero__road--one {
  top: 43%;
  left: -8%;
  width: 116%;
  height: 4.25rem;
  transform: rotate(-11deg);
  background: var(--color-ink-blue);
  box-shadow: inset 0 1px 0 var(--color-pixel-line), inset 0 -1px 0 var(--color-pixel-line);
}

.kontakt-hero__road--two {
  top: -8%;
  left: 48%;
  width: 4.25rem;
  height: 116%;
  transform: rotate(17deg);
  background: var(--color-ink-blue);
  box-shadow: inset 1px 0 0 var(--color-pixel-line), inset -1px 0 0 var(--color-pixel-line);
}

.kontakt-hero__crossing {
  top: 45%;
  left: 46%;
  width: 5rem;
  height: 3.75rem;
  transform: rotate(-11deg);
  background: repeating-linear-gradient(90deg, var(--color-paper-light) 0 0.55rem, transparent 0.55rem 1rem);
}

.kontakt-hero__building {
  border: 1px solid var(--color-pixel-line);
  background: var(--color-night-navy);
}

.kontakt-hero__building--one {
  top: 1.75rem;
  left: 1.5rem;
  width: 5.5rem;
  height: 4rem;
  box-shadow: 0.7rem 0.7rem 0 var(--color-lavender-purple);
}

.kontakt-hero__building--two {
  right: 1.5rem;
  bottom: 1.5rem;
  width: 6.25rem;
  height: 4.75rem;
  box-shadow: -0.65rem -0.65rem 0 var(--color-pixel-turquoise);
}

.kontakt-hero__building--three {
  top: 4rem;
  right: 2.75rem;
  width: 3.5rem;
  height: 3rem;
  background: var(--color-ink-blue);
}

.kontakt-hero__goal {
  top: 48%;
  left: 54%;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--color-night-navy);
  background: var(--color-neon-lime);
  box-shadow: 0 0 0 4px rgba(199, 243, 74, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .kontakt-hero__goal {
    animation: kontakt-goal-pulse 1.8s ease-in-out infinite;
  }
}

@keyframes kontakt-goal-pulse {
  50% { transform: scale(1.16); }
}

.kontakt-topics {
  background: var(--color-deep-navy);
}

.kontakt-topics__heading {
  display: flex;
  max-width: 68ch;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kontakt-topics__heading h2,
.kontakt-topics__heading p {
  margin: 0;
}

.kontakt-topics__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.kontakt-topic-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-height: 100%;
  padding: var(--space-6);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.kontakt-topic-card > * {
  margin: 0;
}

.kontakt-topic-card h3 {
  max-width: 18ch;
}

.kontakt-topic-card p:not(.meta) {
  max-width: 34ch;
}

.kontakt-topic-card .meta {
  max-width: 34ch;
  margin-top: auto;
}

.kontakt-topic-card:hover {
  box-shadow: var(--shadow-block);
  transform: translateY(-2px);
}

.kontakt-details {
  position: relative;
  background: var(--color-night-navy);
}

.kontakt-details__grid {
  display: grid;
  grid-template-columns: minmax(14.375rem, 3fr) minmax(26.25rem, 9fr);
  align-items: start;
  gap: var(--space-6);
}

.kontakt-details__identity {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-deep-navy);
}

.kontakt-details__identity h2,
.kontakt-details__identity p {
  margin: 0;
}

.kontakt-details__identity p:not(.kontakt-details__brand) {
  max-width: 48ch;
}

.kontakt-details__brand {
  color: var(--color-neon-lime);
  font-family: var(--font-heading);
  font-size: var(--font-size-24);
  font-weight: 800;
  line-height: 1.2;
}

.kontakt-details__route {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.kontakt-detail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 0.72fr);
  align-items: start;
  gap: var(--space-3) var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--border-dark);
  border-radius: var(--radius-card);
  background: var(--color-ink-blue);
}

.kontakt-detail::before {
  position: absolute;
  top: 1.7rem;
  left: -0.45rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--color-night-navy);
  background: var(--color-neon-lime);
  content: "";
}

.kontakt-detail--phone::before { background: var(--color-coral-orange); }
.kontakt-detail--email::before { background: var(--color-pixel-turquoise); }

.kontakt-detail__label {
  grid-column: 1;
  color: var(--color-muted-blue);
  font-family: var(--font-heading);
  font-size: var(--font-size-12);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.kontakt-detail h3,
.kontakt-detail p,
.kontakt-detail a {
  grid-column: 2;
  margin: 0;
}

.kontakt-detail h3 {
  max-width: 24ch;
  margin-top: calc(var(--space-3) * -1);
}

.kontakt-detail p:not(.kontakt-detail__value) {
  max-width: 52ch;
}

.kontakt-detail__value {
  display: inline-flex;
  width: fit-content;
  min-height: 2.75rem;
  align-items: center;
  color: var(--color-paper-light);
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kontakt-detail__contact-link {
  color: var(--color-pixel-turquoise);
}

.kontakt-detail__contact-link:hover {
  color: var(--color-neon-lime);
}

.kontakt-transparency {
  padding-block: var(--space-7);
  background: var(--color-deep-navy);
}

.kontakt-transparency__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-light);
  border-inline-start: 6px solid var(--color-coral-orange);
  border-radius: var(--radius-card);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
}

.kontakt-transparency__panel h2,
.kontakt-transparency__panel p {
  margin: 0;
}

.kontakt-transparency__panel p {
  max-width: 66ch;
}

.kontakt-form-section {
  position: relative;
  background: var(--color-night-navy);
}

.kontakt-form-section__grid {
  display: grid;
  grid-template-columns: minmax(38.75rem, 8fr) minmax(15rem, 4fr);
  align-items: stretch;
  gap: var(--space-6);
}

.kontakt-form-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  padding: var(--space-6);
  border: var(--border-light);
  border-radius: var(--radius-panel);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
}

.kontakt-form-panel h2 {
  margin: 0;
}

.kontakt-form-panel__intro {
  display: flex;
  max-width: 62ch;
  flex-direction: column;
  gap: var(--space-4);
}

.kontakt-form-panel__intro p {
  margin: 0;
}

.kontakt-form {
  width: 100%;
}

.kontakt-form__summary {
  min-height: 0;
  margin-bottom: var(--space-4);
  color: #9b2c1b;
  font-weight: 700;
}

.kontakt-form__summary:not(:empty) {
  min-height: 2.75rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-coral-orange);
  border-radius: var(--radius-control);
  background: #fff0ec;
}

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

.kontakt-field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.kontakt-field--half { grid-column: span 1; }
.kontakt-field--full { grid-column: 1 / -1; }

.kontakt-field label {
  margin: 0;
}

.kontakt-field input,
.kontakt-field textarea {
  min-height: 3rem;
  border-color: var(--color-light-line);
  background: #ffffff;
  color: var(--color-night-navy);
}

.kontakt-field textarea {
  min-height: 10rem;
}

.kontakt-field input[aria-invalid="true"],
.kontakt-field textarea[aria-invalid="true"] {
  border-color: var(--color-coral-orange);
}

.kontakt-field__hint,
.kontakt-field__error {
  max-width: 48ch;
  margin: 0;
  font-size: var(--font-size-14);
  line-height: 1.43;
}

.kontakt-field__hint { color: #4e5a82; }
.kontakt-field__error { min-height: 1.25rem; color: #9b2c1b; font-weight: 700; }

.kontakt-form__actions {
  display: flex;
  max-width: 48ch;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.kontakt-form__actions p {
  margin: 0;
  color: #4e5a82;
  font-size: var(--font-size-14);
}

.kontakt-form__actions button {
  min-height: 3rem;
}

.kontakt-form-aside {
  position: relative;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-6);
  overflow: hidden;
  border: var(--border-dark);
  border-radius: var(--radius-panel);
  background: var(--color-deep-navy);
}

.kontakt-form-aside::before,
.kontakt-form-aside::after {
  position: absolute;
  background: var(--color-ink-blue);
  content: "";
}

.kontakt-form-aside::before {
  right: -4rem;
  bottom: 2rem;
  width: 12rem;
  height: 4rem;
  transform: rotate(-25deg);
}

.kontakt-form-aside::after {
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  box-shadow: 0.75rem 0.75rem 0 var(--color-lavender-purple);
}

.kontakt-form-aside > * {
  position: relative;
  z-index: 1;
  margin: 0;
}

.kontakt-form-aside h3 { max-width: 14ch; }
.kontakt-form-aside p:not(.meta) { max-width: 28ch; }
.kontakt-form-aside .meta { max-width: 28ch; }

.kontakt-form-aside__marker {
  width: 1rem;
  height: 1rem;
  border: 3px solid var(--color-night-navy);
  background: var(--color-neon-lime);
}

.kontakt-shortcuts {
  background: var(--color-deep-navy);
}

.kontakt-shortcuts__heading {
  display: flex;
  max-width: 58ch;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kontakt-shortcuts__heading h2,
.kontakt-shortcuts__heading p {
  margin: 0;
}

.kontakt-shortcuts__clusters {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
  gap: var(--space-5);
}

.kontakt-shortcut-cluster {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.kontakt-shortcut-cluster h3,
.kontakt-shortcut-cluster > p {
  margin: 0;
}

.kontakt-shortcut-cluster > p {
  max-width: 42ch;
}

.kontakt-shortcut-cluster__links {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

.kontakt-shortcut-cluster__links--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kontakt-shortcut {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-light);
  border-radius: var(--radius-card);
  background: var(--color-paper-light);
  color: var(--color-night-navy);
  text-decoration: none;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.kontakt-shortcut strong {
  max-width: 22ch;
  font-family: var(--font-heading);
  font-size: var(--font-size-16);
  line-height: 1.25;
}

.kontakt-shortcut > span:last-child {
  max-width: 36ch;
  color: #4e5a82;
  font-size: var(--font-size-14);
  line-height: 1.43;
}

.kontakt-shortcut:hover {
  box-shadow: var(--shadow-block);
  color: var(--color-night-navy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  transform: translateY(-2px);
}

@media (max-width: 61.25rem) {
  .kontakt-form-section__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-form-aside {
    display: none;
  }
}

@media (max-width: 57.5rem) {
  .kontakt-topics__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kontakt-details__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-details__identity {
    max-width: 48ch;
  }

  .kontakt-shortcut-cluster__links--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 50rem) {
  .kontakt-hero__grid,
  .kontakt-shortcuts__clusters {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-hero__map {
    min-height: 9.375rem;
  }

  .kontakt-hero__building--two,
  .kontakt-hero__building--three {
    display: none;
  }

  .kontakt-hero__building--one {
    top: 1rem;
    left: 1rem;
    width: 3.5rem;
    height: 2.5rem;
  }
}

@media (max-width: 42.5rem) {
  .kontakt-topics__cards,
  .kontakt-form__fields,
  .kontakt-shortcut-cluster__links,
  .kontakt-shortcut-cluster__links--three {
    grid-template-columns: minmax(0, 1fr);
  }

  .kontakt-field--half,
  .kontakt-field--full {
    grid-column: 1;
  }

  .kontakt-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-5);
  }

  .kontakt-detail__label,
  .kontakt-detail h3,
  .kontakt-detail p,
  .kontakt-detail a {
    grid-column: 1;
  }

  .kontakt-detail h3 {
    margin-top: 0;
  }

  .kontakt-detail::before {
    top: 1.25rem;
    right: 1.25rem;
    left: auto;
  }

  .kontakt-transparency__panel {
    padding: var(--space-5);
    border-block-start: 6px solid var(--color-coral-orange);
    border-inline-start-width: 1px;
  }
}

@media (max-width: 47.5rem) {
  .kontakt-hero__copy h1 {
    max-width: 11ch;
  }
}

@media (max-width: 30rem) {
  .kontakt-form-panel,
  .kontakt-topic-card,
  .kontakt-details__identity {
    padding: var(--space-5);
  }

  .kontakt-detail__value {
    font-size: var(--font-size-18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-topic-card:hover,
  .kontakt-shortcut:hover {
    transform: none;
  }
}