/* ==========================================================================
   kontakt.css — Contact Page Specific Styles
   Contact grid layout, contact info typography, and page-specific
   responsive overrides.
   ========================================================================== */

/* ===== CONTACT GRID ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* ===== CONTACT FORM ===== */
.contact-form { display: flex; flex-direction: column; gap: 1.2rem; }

/* ===== CONTACT INFO (typography) ===== */
.contact-info { display: flex; flex-direction: column; gap: 2.8rem; padding-top: 1rem; }

.contact-label {
  font-family: var(--font-head); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2.5px; color: var(--gray-400);
  margin-bottom: .6rem;
}

.contact-value {
  font-family: var(--font-head); font-size: 1.5rem; font-weight: 800;
  color: var(--gray-900); letter-spacing: -.5px; line-height: 1.3;
}
.contact-value a {
  color: var(--gray-900); text-decoration: none;
  background-image: linear-gradient(135deg, var(--primary), var(--secondary));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .4s var(--ease-out-expo), color .3s;
}
.contact-value a:hover {
  color: var(--primary); background-size: 100% 2px;
}

.contact-detail {
  font-size: .92rem; color: var(--gray-500); line-height: 1.7; margin-top: .3rem;
}

.contact-separator {
  width: 40px; height: 3px; border-radius: 2px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  opacity: .3;
}

.contact-note {
  font-size: .82rem; color: var(--gray-400); line-height: 1.6;
  font-style: italic;
}

/* ===== RESPONSIVE — KONTAKT ===== */
@media (max-width: 1024px) {
  .contact-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}