.contact-main {
  max-width: 1050px;
}

.contact-hero-text {
  max-width: 690px;

  margin:
    22px
    0
    0;

  color:
    rgba(255, 255, 255, .82);

  font-size:
    clamp(1rem, 1.6vw, 1.2rem);

  line-height: 1.55;
}


.contact-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 24px;

  margin-bottom: 26px;
}


.contact-card {
  min-width: 0;

  padding:
    clamp(26px, 4vw, 38px);

  background: #FFFFFF;

  border:
    1px solid
    #D7E2EF;

  border-radius: 28px;
}


.contact-icon {
  width: 46px;
  height: 46px;

  margin-bottom: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #0B2547;

  border-radius: 50%;

  color: #FFFFFF;

  font-size: 21px;
  font-weight: 800;
}


.contact-kicker {
  margin:
    0
    0
    8px;

  color: #68778A;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .045em;

  text-transform: uppercase;
}


.contact-card h2,
.support-info h2 {
  margin:
    0
    0
    14px;

  color: #0B2547;

  font-size:
    clamp(1.45rem, 2.5vw, 2rem);

  line-height: 1.15;
}


.contact-card > p:not(.contact-kicker),
.support-info-heading > p:not(.contact-kicker) {
  margin:
    0
    0
    22px;

  color: #52657D;

  line-height: 1.6;
}


.contact-email {
  display: inline-block;

  margin-bottom: 24px;

  color: #0B2547;

  font-size: 17px;
  font-weight: 800;

  text-decoration: none;
}


.contact-email:hover {
  text-decoration: underline;
}


.contact-button {
  width: fit-content;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    0
    20px;

  background: #0B2547;

  border-radius: 13px;

  color: #FFFFFF;

  font-size: 15px;
  font-weight: 800;

  text-decoration: none;
}


.contact-button:hover {
  opacity: .92;
}


.support-info {
  padding:
    clamp(26px, 4vw, 40px);

  background: #FFFFFF;

  border:
    1px solid
    #D7E2EF;

  border-radius: 28px;
}


.support-info-heading {
  max-width: 680px;

  margin-bottom: 26px;
}


.support-topics {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    12px
    24px;
}


.support-topic {
  display: flex;

  gap: 11px;

  align-items: flex-start;

  color: #3C4D63;

  line-height: 1.5;
}


.support-topic span {
  flex: 0 0 auto;

  width: 24px;
  height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    2px solid
    #0B2547;

  border-radius: 50%;

  color: #0B2547;

  font-size: 12px;
  font-weight: 900;
}


.support-note {
  margin-top: 30px;

  padding:
    18px
    20px;

  background: #F5F8FC;

  border:
    1px solid
    #DCE6F1;

  border-radius: 16px;

  color: #52657D;

  line-height: 1.55;
}


.support-note strong {
  color: #0B2547;
}


@media (max-width: 760px) {

  .contact-grid {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .contact-card,
  .support-info {
    border-radius: 22px;
  }

  .support-topics {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 390px) {

  .contact-card,
  .support-info {
    padding:
      22px
      18px;
  }

  .contact-icon {
    width: 42px;
    height: 42px;

    margin-bottom: 20px;
  }

  .contact-button {
    width: 100%;
  }

}

/* === MAGLANO CONTACT SUPPORT COMBINED 2026-08-08 START === */

/*
  Kontakt und Support bewusst in einer gemeinsamen,
  ruhigeren Kachel zusammengeführt.
*/

.contact-grid--combined {
  grid-template-columns: 1fr !important;

  width: 100%;
  max-width: 860px;

  margin:
    0
    auto
    26px;
}


.contact-card--combined {
  position: relative;

  padding:
    clamp(28px, 4vw, 42px) !important;
}


.contact-card--combined h2 {
  max-width: 680px;
}


.contact-combined-text {
  max-width: 720px;
}


/*
  Unsichtbarer Anker für den bestehenden
  Footer-Link kontakt.html#support.
*/
.contact-anchor {
  position: absolute;

  top: 0;
  left: 0;

  width: 1px;
  height: 1px;

  overflow: hidden;

  pointer-events: none;
}


.contact-icon--mail svg {
  display: block;
}


/*
  E-Mail und Button kompakt untereinander.
*/
.contact-card--combined .contact-email {
  display: block;

  width: fit-content;

  margin-top: 4px;
  margin-bottom: 22px;
}


.contact-card--combined .contact-button {
  margin-top: 0;
}


/* Tablet / Smartphone */

@media (max-width: 760px) {

  .contact-grid--combined {
    max-width: none;

    margin-bottom: 18px;
  }

  .contact-card--combined {
    padding:
      26px
      22px !important;
  }
}


@media (max-width: 390px) {

  .contact-card--combined {
    padding:
      22px
      18px !important;
  }

}

/* === MAGLANO CONTACT SUPPORT COMBINED 2026-08-08 END === */

/* === MAGLANO CONTACT ADDRESS OPERATOR 2026-08-08 START === */

/*
  Kontakt & Support + Adresse & Betreiber
  als zwei gleichwertige Maglano-Kacheln.
*/

.contact-grid--combined {
  width: 100% !important;
  max-width: none !important;

  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 24px !important;

  margin:
    0
    auto
    26px !important;

  align-items: stretch;
}


.contact-grid--combined .contact-card {
  height: 100%;

  padding:
    clamp(28px, 4vw, 42px) !important;
}


/*
  Beide Kacheln bekommen dieselbe inhaltliche Hierarchie.
*/
.contact-card--combined h2 {
  margin-bottom: 18px;
}


.contact-card--address {
  display: flex;
  flex-direction: column;
}


/* Standort-Pin */

.contact-icon--location svg {
  display: block;
}


/* Adressblöcke */

.address-details {
  display: grid;

  gap: 22px;

  margin-top: 4px;
}


.address-group {
  min-width: 0;
}


.address-label {
  margin:
    0
    0
    6px;

  color: #68778A;

  font-size: 13px;
  font-weight: 800;

  letter-spacing: .045em;

  text-transform: uppercase;
}


.address-group address,
.address-lines {
  margin: 0;

  color: #3C4D63;

  font-size: 16px;
  font-style: normal;

  line-height: 1.6;
}


.address-lines strong {
  color: #0B2547;

  font-weight: 800;
}


.address-lines a {
  color: #0B2547;

  font-weight: 700;

  text-decoration: none;
}


.address-lines a:hover {
  text-decoration: underline;
}


/*
  Die Kontakt-Kachel darf ihren Inhalt natürlich verteilen,
  soll aber nicht künstlich höher werden.
*/
.contact-card--combined {
  min-height: 0 !important;
}


/* Tablet */

@media (max-width: 900px) {

  .contact-grid--combined {
    grid-template-columns: 1fr !important;

    gap: 18px !important;
  }

}


/* Smartphone */

@media (max-width: 760px) {

  .contact-grid--combined {
    margin-bottom: 18px !important;
  }

  .contact-grid--combined .contact-card {
    padding:
      26px
      22px !important;
  }

  .address-details {
    gap: 20px;
  }

}


/* iPhone SE */

@media (max-width: 390px) {

  .contact-grid--combined .contact-card {
    padding:
      22px
      18px !important;
  }

  .address-group address,
  .address-lines {
    font-size: 15px;
  }

}

/* === MAGLANO CONTACT ADDRESS OPERATOR 2026-08-08 END === */