.kontakt-page {
  background: var(--color-white);
}

.contact.kontakt-standalone {
  padding-top: calc(var(--space-3xl) + 2rem);
  padding-bottom: var(--space-3xl);
  min-height: calc(100vh - 80px);
}

@media (max-width: 768px) {
  .contact.kontakt-standalone {
    padding-top: calc(var(--space-2xl) + 1rem);
    padding-bottom: var(--space-2xl);
  }
}

/* Formularspalte auf der Kontaktseite breiter, damit u. a. das
   "Leistung"-Dropdown seinen längsten Wert ("First Class Service")
   vollständig zeigt. Nur Desktop; mobil bleibt einspaltig. */
@media (min-width: 769px) {
  .contact.kontakt-standalone .contact__inner {
    grid-template-columns: 0.82fr 1.18fr;
    gap: var(--space-xl);
  }
}


.kontakt-page .header,
.kontakt-page .header.header--init {
  background: rgba(248, 246, 243, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 30px rgba(37, 44, 55, 0.08) !important;
  padding-block: 0 !important;
}

.kontakt-page .header__inner,
.kontakt-page .header.header--init .header__inner {
  height: 68px !important;
}

.kontakt-page .header__logo-img,
.kontakt-page .header.header--init .header__logo-img {
  height: 56px !important;
}

.kontakt-page .nav__link,
.kontakt-page .nav__dropdown-trigger,
.kontakt-page .header.header--init .nav__link,
.kontakt-page .header.header--init .nav__dropdown-trigger {
  color: var(--color-shark-70) !important;
}

@media (hover: hover) { .kontakt-page .nav__link:hover, .kontakt-page .nav__dropdown-trigger:hover {
  color: var(--color-cobalt) !important;
  background: var(--color-cobalt-10) !important;
} }

.kontakt-page .header__cta .btn--outline,
.kontakt-page .header.header--init .header__cta .btn--outline {
  color: var(--color-shark) !important;
  border-color: var(--color-shark-20) !important;
}

.kontakt-page .header__toggle span,
.kontakt-page .header.header--init .header__toggle span {
  background: var(--color-shark) !important;
}


.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.contact-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-shark-20);
  background: var(--color-white);
  color: var(--color-shark);
  text-decoration: none;
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
@media (hover: hover) { .contact-chip:hover {
  border-color: var(--color-cobalt);
  color: var(--color-cobalt);
  background: var(--color-cobalt-10);
} }
.contact-chip.is-copied {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-white);
}


.kontakt-page--retreat .contact__detail-icon {
  background: rgba(172, 221, 209, 0.45);
  color: var(--color-cobalt);
}
.kontakt-page--retreat .form__select-icon {
  background: rgba(172, 221, 209, 0.55);
  color: var(--color-cobalt);
}
@media (hover: hover) { .kontakt-page--retreat .form__select-wrap:hover .form__select-icon {
  background: rgba(172, 221, 209, 0.55);
  color: var(--color-cobalt);
} }

.kontakt-page--corporate .contact__detail-icon {
  background: rgba(193, 203, 184, 0.5);
  color: var(--color-cobalt);
}
.kontakt-page--corporate .form__select-icon {
  background: rgba(193, 203, 184, 0.6);
  color: var(--color-cobalt);
}
@media (hover: hover) { .kontakt-page--corporate .form__select-wrap:hover .form__select-icon {
  background: rgba(193, 203, 184, 0.6);
  color: var(--color-cobalt);
} }

.kontakt-page--signature .section-label,
.kontakt-page--signature .section-label::before {
  color: #b08e8c;
}
.kontakt-page--signature .section-label::before {
  background: #c1a4a2;
}
.kontakt-page--signature .contact__detail-icon {
  background: rgba(193, 164, 162, 0.28);
  color: #192341;
}
@media (hover: hover) { .kontakt-page--signature .contact__detail-value a:hover {
  color: #b08e8c;
} }
@media (hover: hover) { .kontakt-page--signature .form__input:hover, .kontakt-page--signature .form__select:hover, .kontakt-page--signature .form__textarea:hover {
  border-color: rgba(193, 164, 162, 0.7);
} }
.kontakt-page--signature .form__input:focus,
.kontakt-page--signature .form__select:focus,
.kontakt-page--signature .form__textarea:focus {
  border-color: #c1a4a2;
  box-shadow: 0 0 0 3px rgba(193, 164, 162, 0.35);
}
.kontakt-page--signature .form__select-icon {
  background: rgba(193, 164, 162, 0.3);
  color: #192341;
}
@media (hover: hover) { .kontakt-page--signature .form__select-wrap:hover .form__select-icon {
  background: rgba(193, 164, 162, 0.3);
  color: #192341;
} }
.kontakt-page--signature .form__select:focus + .form__select-icon {
  background: #c1a4a2;
  color: #192341;
}
@media (hover: hover) { .kontakt-page--signature .contact-chip:hover {
  border-color: #c1a4a2;
  color: #b08e8c;
  background: rgba(193, 164, 162, 0.14);
} }
.kontakt-page--signature .contact-chip.is-copied {
  background: #c1a4a2;
  border-color: #c1a4a2;
  color: #192341;
}
.kontakt-page--signature .form__submit .btn--primary {
  background: #c1a4a2;
  border-color: #c1a4a2;
  color: #192341;
}
@media (hover: hover) { .kontakt-page--signature .form__submit .btn--primary:hover {
  background: var(--color-cobalt);
  border-color: var(--color-cobalt);
  color: var(--color-white);
  box-shadow: 0 8px 32px rgba(41, 51, 186, 0.35);
} }
@media (hover: hover) { .kontakt-page--signature .nav__link:hover, .kontakt-page--signature .nav__dropdown-trigger:hover {
  color: #b08e8c !important;
  background: rgba(193, 164, 162, 0.12) !important;
} }