/*
 * CMAAG – Kontakt-Erweiterung
 * Diese Datei NACH cmaag.css laden.
 */

.cma-contact-hero {
  position: relative;
  min-height: clamp(28rem, 50vw, 38rem);
  overflow: hidden;
  color: var(--cma-white);
  background:
    linear-gradient(90deg, rgba(12,13,16,.92) 0%, rgba(12,13,16,.59) 48%, rgba(12,13,16,.16) 100%),
    url("../images/contact-hero.jpg") center / cover,
    var(--cma-ink);
}

.cma-contact-hero .cma-wrap {
  display: grid;
  align-content: center;
  min-height: inherit;
  padding-block: 4.8rem;
}

.cma-contact-hero .cma-eyebrow { color: #ff7982; }

.cma-contact-hero h1 {
  max-width: 44rem;
  margin: 0;
  font-size: clamp(2.65rem, 5.5vw, 4.85rem);
  line-height: .99;
  letter-spacing: -.052em;
}

.cma-contact-hero p:not(.cma-eyebrow) {
  max-width: 37rem;
  margin: 1.2rem 0 0;
  color: rgba(255,255,255,.9);
  font-size: clamp(1rem, 1.7vw, 1.18rem);
}

.cma-contact-quicklinks {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 2rem;
}

.cma-contact-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}

.cma-contact-card {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
  color: var(--cma-white);
  border-radius: var(--cma-radius);
  background: #2a2c30;
  box-shadow: var(--cma-shadow);
}

.cma-contact-card::before {
  position: absolute;
  inset: 0;
  content: "";
  background-position: center;
  background-size: cover;
  opacity: .55;
  transition: transform .45s ease;
}

.cma-contact-card:hover::before { transform: scale(1.05); }

.cma-contact-card--obernau::before {
  background-image: url("../images/location-obernau.jpg");
}

.cma-contact-card--emmenbruecke::before {
  background-image: url("../images/location-emmenbruecke.jpg");
}

.cma-contact-card::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(0deg, rgba(12,13,16,.95), rgba(12,13,16,.1) 75%),
    linear-gradient(90deg, rgba(12,13,16,.5), transparent 68%);
}

.cma-contact-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: inherit;
  padding: clamp(1.35rem, 3vw, 2rem);
}

.cma-contact-card .cma-eyebrow { color: #ff7d86; }

.cma-contact-card h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -.04em;
}

.cma-contact-card address {
  margin: .8rem 0 0;
  color: rgba(255,255,255,.84);
  font-style: normal;
}

.cma-contact-card-links {
  display: grid;
  gap: .35rem;
  margin-top: auto;
  padding-top: 1.35rem;
}

.cma-contact-card-links a {
  color: rgba(255,255,255,.95);
  font-size: .94rem;
  font-weight: 800;
}

.cma-contact-card-links a:hover { color: #ff7d86; }

.cma-contact-card-route {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: max-content;
  margin-top: 1.25rem;
  padding-bottom: .2rem;
  color: var(--cma-white);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.45);
}

.cma-contact-card-route::after {
  content: "→";
  color: #ff7d86;
  font-size: 1.1rem;
  transition: transform .18s ease;
}

.cma-contact-card-route:hover::after { transform: translateX(.25rem); }

/* Contact grid and form */

.cma-contact-grid {
  display: grid;
  grid-template-columns: minmax(17rem, .72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.cma-contact-aside {
  position: sticky;
  top: 1.5rem;
}

.cma-contact-aside h2 {
  margin: 0;
  color: var(--cma-ink);
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.06;
  letter-spacing: -.045em;
}

.cma-contact-aside p:not(.cma-eyebrow) {
  margin: 1rem 0 0;
  color: var(--cma-steel);
}

.cma-contact-aside-list {
  padding: 0;
  margin: 1.65rem 0 0;
  list-style: none;
  border-top: 1px solid var(--cma-line);
}

.cma-contact-aside-list li {
  padding: .86rem 0;
  color: var(--cma-steel);
  border-bottom: 1px solid var(--cma-line);
}

.cma-contact-aside-list strong {
  display: block;
  color: var(--cma-ink);
  font-size: .82rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.cma-contact-aside-list span {
  display: block;
  margin-top: .16rem;
}

.cma-contact-aside-list a {
  color: var(--cma-red);
  font-weight: 700;
}

.cma-contact-form-card {
  padding: clamp(1.45rem, 3vw, 2.35rem);
  border: 1px solid rgba(27,28,31,.09);
  border-radius: var(--cma-radius);
  background: var(--cma-white);
  box-shadow: var(--cma-shadow);
}

.cma-contact-form-card h2 {
  margin: 0;
  color: var(--cma-ink);
  font-size: clamp(1.55rem, 3vw, 2.15rem);
  line-height: 1.1;
  letter-spacing: -.035em;
}

.cma-contact-form-card > p {
  margin: .75rem 0 0;
  color: var(--cma-steel);
}

.cma-form-alert {
  margin: 1.4rem 0 0;
  padding: .9rem 1rem;
  border-radius: .45rem;
  font-size: .9rem;
}

.cma-form-alert--success {
  color: #155d36;
  border: 1px solid #9ec8ae;
  background: #edf8f1;
}

.cma-form-alert--error {
  color: #8c1821;
  border: 1px solid #e9b6bb;
  background: #fff1f2;
}

.cma-contact-form {
  margin-top: 1.5rem;
}

.cma-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .95rem 1rem;
}

.cma-form-field { min-width: 0; }

.cma-form-field--wide { grid-column: 1 / -1; }

.cma-form-label {
  display: block;
  margin-bottom: .38rem;
  color: #36383d;
  font-size: .81rem;
  font-weight: 800;
  letter-spacing: .025em;
}

.cma-form-label small {
  color: var(--cma-steel);
  font-weight: 400;
}

.cma-form-control {
  display: block;
  width: 100%;
  min-height: 2.95rem;
  padding: .67rem .75rem;
  color: var(--cma-ink);
  font: inherit;
  font-size: .95rem;
  border: 1px solid #cdd0d4;
  border-radius: .36rem;
  outline: none;
  background: var(--cma-white);
  transition: border-color .18s ease, box-shadow .18s ease;
}

textarea.cma-form-control {
  min-height: 9rem;
  resize: vertical;
}

.cma-form-control:focus {
  border-color: var(--cma-red);
  box-shadow: 0 0 0 3px rgba(177,15,27,.13);
}

.cma-form-control.is-invalid {
  border-color: #c9353f;
  box-shadow: 0 0 0 3px rgba(201,53,63,.1);
}

.cma-form-error {
  margin: .34rem 0 0;
  color: #aa1e28;
  font-size: .79rem;
}

.cma-form-consent {
  display: flex;
  align-items: flex-start;
  gap: .62rem;
  margin-top: 1.15rem;
  color: var(--cma-steel);
  font-size: .84rem;
  line-height: 1.45;
}

.cma-form-consent input {
  flex: 0 0 auto;
  width: 1rem;
  height: 1rem;
  margin: .18rem 0 0;
  accent-color: var(--cma-red);
}

.cma-form-consent a {
  color: var(--cma-red);
  text-decoration: underline;
  text-underline-offset: .12em;
}

.cma-contact-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.35rem;
}

.cma-contact-form-actions .cma-button { cursor: pointer; }

.cma-contact-form-note {
  margin: 0;
  color: var(--cma-steel);
  font-size: .76rem;
  line-height: 1.35;
}

.cma-contact-form-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Footer contact ribbon */

.cma-contact-ribbon {
  color: var(--cma-white);
  background: var(--cma-ink);
}

.cma-contact-ribbon .cma-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.2rem 2rem;
  padding-block: 1.45rem;
}

.cma-contact-ribbon p {
  margin: 0;
  color: rgba(255,255,255,.82);
}

.cma-contact-ribbon strong {
  color: var(--cma-white);
}

@media (max-width: 820px) {
  .cma-contact-grid { grid-template-columns: 1fr; }
  .cma-contact-aside { position: static; }
  .cma-contact-ribbon .cma-wrap { grid-template-columns: 1fr; }
}

@media (max-width: 610px) {
  .cma-contact-hero { min-height: 31rem; }
  .cma-contact-quicklinks { display: grid; grid-template-columns: 1fr; }
  .cma-contact-overview,
  .cma-form-grid { grid-template-columns: 1fr; }
  .cma-form-field--wide { grid-column: auto; }
  .cma-contact-form-actions { display: grid; grid-template-columns: 1fr; }
}
#kontaktformular {
  scroll-margin-top: 110px;
}
@media (max-width: 760px) {
  #kontaktformular {
    scroll-margin-top: 40px;
  }
}