/* ==========================================================
   Kontaktseite – nur Panel der MODX-Ressource mit ID 5
   Im Contact-Template wird daraus:
   <section id="panel-5">
   ========================================================== */

/* Der Container der Kontaktseite darf über seine Begrenzung hinaus sichtbar sein */
#panel-5 .container {
  overflow: visible;
}

/* Allgemeiner Inhaltsbereich der Kontaktseite */
#panel-5 .panel-content {
  max-width: 100%;
}

/* Adressangaben: einzelne Zeilen als Block anzeigen */
#panel-5 address span {
  display: block;
  margin-bottom: 0.5em;
}

/* Kontaktformular vollständig ausblenden */
#panel-5 form,
#panel-5 #contact-form {
  display: none !important;
}

/* Die beiden Adress-Textfelder */
#panel-5 #address1,
#panel-5 #address2 {
  padding: 1rem;
  margin-bottom: 0;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

/* Nur relevant, falls das Formular künftig wieder eingeblendet wird */
#panel-5 #contact-form .btn-primary {
  background-color: var(--fg-personaris);
  border-color: transparent;
}

/* Eine gegebenenfalls vorhandene dritte Spalte ausblenden */
#panel-5 .row.g-4.fs-6.fs-md-5.fs-lg-4.mb-4
  > .col-12.col-lg-4.align-self-start {
  display: none !important;
}

/* Desktop ab 768 px:
   Überschrift „Kontakt“ und Adressboxen gemeinsam links ausrichten
   und insgesamt ungefähr 3,5 cm weiter nach unten schieben */
@media (min-width: 768px) {
  #panel-5 .panel-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 2rem;
    margin-top: 412px;
  }

  #panel-5 .panel-content > h1 {
    flex-basis: 100%;
    margin-bottom: 0;
  }

  #panel-5 .panel-content > .row {
    flex-basis: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Hohe Desktop-Fenster ab 900 px */
@media (min-width: 768px) and (min-height: 900px) {
  #panel-5 .panel-content {
    margin-top: 512px;
  }
}