/* ==========================================================================
   Kontakt – seitenspezifische Styles (nur unter .p-kontakt)
   ========================================================================== */

/* Hauptsektion: Ablauf + Formular oben ausrichten statt vertikal zentrieren */
.p-kontakt .p-kontakt__grid { align-items: start; }

/* Formular-Karte */
.p-kontakt .p-kontakt__card { padding: clamp(26px, 3.2vw, 44px); }
.p-kontakt .p-kontakt__card-head { display: grid; gap: 8px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.p-kontakt .p-kontakt__card-head h3 { margin: 0; }
.p-kontakt .p-kontakt__card-head p { margin: 0; color: var(--fg-2); }
.p-kontakt .form .btn { justify-self: start; }
.p-kontakt .field--check label a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.p-kontakt .field--check label a:hover { color: var(--accent-2); }

/* Kontaktdaten-Block */
.p-kontakt .p-kontakt__info { display: grid; gap: 14px; font-style: normal; margin: 0; }
.p-kontakt .p-kontakt__row { display: grid; grid-template-columns: 46px 1fr; gap: 16px; align-items: center; }
.p-kontakt .p-kontakt__row .ico {
  width: 46px; height: 46px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: var(--accent-2);
}
.p-kontakt .p-kontakt__row .ico svg { width: 20px; height: 20px; }
.p-kontakt .p-kontakt__row small { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
.p-kontakt .p-kontakt__row a { color: var(--fg); text-decoration: none; }
.p-kontakt .p-kontakt__row a:hover { color: var(--accent-2); }

/* Pills-Reihe */
.p-kontakt .p-kontakt__pills { display: flex; flex-wrap: wrap; gap: 10px; }

/* Band mit zwei Buttons: Buttons untereinander auf schmalen Screens */
.p-kontakt .band .btn-group { flex-direction: column; align-items: stretch; }
.p-kontakt .band .btn-group .btn { justify-content: center; }
@media (max-width: 720px) {
  .p-kontakt .band .btn-group { align-items: flex-start; }
  .p-kontakt .band .btn-group .btn { width: 100%; }
}