/* =========================================================
   Smith Visuals — Kontakt-Section
   Mobile-first ab 375px. Nutzt globale Tokens aus tokens.css.
   Lokale Custom Properties nur fuer Maße ohne passenden Token
   (Figma-Spezifikation), analog zum folder-component-Referenzstil.
   ========================================================= */

.kontakt {
  --k-radius: var(--radius-xs);                        /* Inputs/Buttons/Boxen */
  --k-gap-summary: 1.25rem;                             /* 20px */
  --k-gap-info: clamp(1.75rem, 1.3rem + 1.6vw, 3rem);   /* 28px -> 48px */
  --k-gap-stack: 0.25rem;                               /* 4px, Label/Wert-Abstand */
  --k-icon-box: 3rem;                                   /* 48px */
  --k-social-box: 2.75rem;                              /* 44px */
  --k-field-gap: 1.25rem;                               /* 20px */
  --k-input-h: 3.375rem;                                /* 54px */
  --k-submit-h: 3.625rem;                                /* 58px */
  --k-form-max: 40rem;                                   /* 640px */

  padding-block: var(--space-8);
  background: var(--c-bg);
}

.kontakt__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

/* ---------- Heading ---------- */

.kontakt__heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.kontakt__eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label-btn);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-on-dark);
}

.kontakt__title {
  text-align: center;
}

.kontakt__lead {
  max-width: 40rem;
  color: var(--c-text-dim);
  font-size: var(--fs-body-lg);
}

/* ---------- Kompakter Prozess-Ablauf (ex "How We Operate") ----------
   Eigener Gruppen-Wrapper mit engem internem Abstand (Titel <-> Liste),
   damit das Label sichtbar zur Liste gehoert statt durch den gleichmaessigen
   .kontakt__container-Gap von ihr getrennt zu wirken. Visuell bewusst
   untergeordnet (kleines Label, kleinere Nummern-Kreise) -- das Formular
   bleibt die primaere Aktion der Section. */

.kontakt__process-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
}

.kontakt__process-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--c-text-dim);
}

.kontakt__process {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4) var(--space-6);
  width: fit-content;
  max-width: 60rem;
  margin-inline: auto;
  padding: 0;
  position: relative;
}

.kontakt__process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  text-align: center;
  max-width: 8rem;
  flex: 1 1 0;
  min-width: 6rem;
  position: relative;
  z-index: 1;
}

.kontakt__process-line {
  display: none;
}

@media (min-width: 60em) {
  .kontakt__process-line {
    display: block;
    position: absolute;
    top: calc(1.75rem / 2);
    left: 4rem;
    right: 4rem;
    height: 2px;
    background: var(--c-accent);
    z-index: 0;
  }
  .kontakt__process-line.reveal {
    opacity: 1;
    transform: scaleX(0);
    transform-origin: left center;
  }
  .kontakt__process-line.reveal.is-visible {
    transform: scaleX(1);
    transition: transform 1.5s ease-in-out 0.2s;
  }
}

.kontakt__process-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body-sm);
}

.kontakt__process-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body-sm);
  color: var(--c-text-dim);
}

@media (max-width: 40em) {
  .kontakt__process {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4) var(--space-3);
  }

  .kontakt__process-step {
    max-width: none;
  }
}

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

.kontakt__split {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  align-items: stretch;
}

@media (min-width: 60em) {
  .kontakt__split {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-8);
  }
}

/* ---------- Info-Spalte ---------- */

.kontakt__info {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap-info);
  flex: 1 1 0;
  min-width: 0;
}

.kontakt__summary {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap-summary);
}

/* Wiederholt das Navbar-Logo (Icon + "Smith Visuals"-Wortmarke) statt einer
   eigenen Punkt+Text-Variante — visuelle Konsistenz mit der Navigation. */
.kontakt__logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  color: var(--c-text);
  font-size: 1.6rem; /* steuert die Icon-Größe (1.5em, siehe .logo-icon) */
}

.kontakt__text {
  color: var(--c-text-dim);
  font-size: var(--fs-body);
}

.kontakt__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}

.kontakt__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.kontakt__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--k-icon-box);
  height: var(--k-icon-box);
  border-radius: var(--k-radius);
  background: var(--c-accent);
  color: var(--c-white);
}

.kontakt__item-body {
  display: flex;
  flex-direction: column;
  gap: var(--k-gap-stack);
}

.kontakt__item-label {
  font-weight: 700;
  font-size: var(--fs-label-sm);
  letter-spacing: 1px;
  color: var(--c-text-dim);
}

.kontakt__item-value {
  font-weight: 500;
  font-size: var(--fs-body-md);
  color: var(--c-text);
}

a.kontakt__item-value:hover,
a.kontakt__item-value:focus-visible {
  color: var(--c-accent-on-dark);
}

.kontakt__quick {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kontakt__quick-label {
  font-weight: 700;
  font-size: var(--fs-label-sm);
  letter-spacing: 1px;
  color: var(--c-text-dim);
}

.kontakt__quick-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.kontakt__quick-link svg {
  flex-shrink: 0;
}

.kontakt__social {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.kontakt__social-label {
  font-weight: 700;
  font-size: var(--fs-label-sm);
  letter-spacing: 1px;
  color: var(--c-text-dim);
}

.kontakt__social-links {
  display: flex;
  gap: var(--space-2);
}

.kontakt__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--k-social-box);
  height: var(--k-social-box);
  border-radius: var(--k-radius);
  border: 1px solid var(--c-border-hair);
  color: var(--c-text);
  transition: border-color var(--dur-fast) var(--ease-soft),
              color var(--dur-fast) var(--ease-soft);
}

.kontakt__social-link:hover,
.kontakt__social-link:focus-visible {
  border-color: var(--c-accent);
  color: var(--c-accent-on-dark);
}

/* ---------- Formular-Spalte ---------- */

.kontakt__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  max-width: var(--k-form-max);
  padding: var(--space-card-pad);
  background: var(--c-white);
  border: 1px solid var(--c-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

@media (min-width: 60em) {
  .kontakt__form {
    align-self: flex-start;
  }
}

.kontakt__fields {
  display: flex;
  flex-direction: column;
  gap: var(--k-field-gap);
  width: 100%;
}

.kontakt__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
}

.kontakt__field label {
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.5px;
  color: var(--c-text-dim-on-light);
}

.kontakt__input {
  width: 100%;
  padding: var(--space-3);
  background: var(--c-white);
  border: 1px solid var(--c-bg);
  border-radius: var(--k-radius);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--c-text-dark);
}

.kontakt__input::placeholder {
  color: var(--c-text-dim-on-light);
}

.kontakt__input {
  height: var(--k-input-h);
}

.kontakt__field--checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-2);
}

.kontakt__checkbox {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  cursor: pointer;
  accent-color: var(--c-accent);
}

.kontakt__field--checkbox label {
  font-weight: 400;
  font-size: var(--fs-body-sm);
  color: var(--c-text-dim-on-light);
  cursor: pointer;
}

.kontakt__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--k-submit-h);
  border: none;
  border-radius: var(--k-radius);
  background: var(--c-accent);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-display-btn);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-soft),
              transform var(--dur-fast) var(--ease-soft);
}

.kontakt__submit:hover {
  background: var(--c-accent-hover);
  transform: translateY(-2px);
}

.kontakt__submit:active {
  transform: translateY(0);
}

.kontakt__note {
  font-weight: 600;
  font-size: var(--fs-body-sm);
  letter-spacing: 0.5px;
  color: var(--c-text-dim-on-light);
}

.kontakt__feedback {
  padding: var(--space-3);
  border-radius: var(--k-radius);
  font-size: var(--fs-body-sm);
  font-weight: 600;
}

.kontakt__feedback[data-state="success"] {
  background: rgba(161, 25, 25, 0.08);
  color: var(--c-accent-on-dark);
  border: 1px solid var(--c-accent);
}

.kontakt__feedback[data-state="error"] {
  background: rgba(161, 25, 25, 0.08);
  color: var(--c-accent-on-dark);
  border: 1px solid var(--c-accent);
}

@media (prefers-reduced-motion: reduce) {
  .kontakt__submit,
  .kontakt__quick-link,
  .kontakt__social-link {
    transition-duration: 0.001ms;
  }
}