/* Globaler Seitenbanner */
#iaaeu-page-banner {
   position: relative;
   width: 100vw;
   margin-left: calc(50% - 50vw);
   min-height: 150px;

   display: flex;
   align-items: flex-end;

   overflow: hidden;
   background-color: #004b82;
}

/*
 * Einheitlicher, kompakter Abstand zwischen Banner und Seiteninhalt.
 * Vorhandenes oberes Seiten-Padding wird hier ersetzt; die seitlichen
 * und unteren Abstände der jeweiligen Ansicht bleiben unverändert.
 */
#iaaeu-page-banner + .astroid-component-section .astroid-component-area {
   padding-top: 1.5rem;
}

#iaaeu-page-banner + .astroid-component-section .astroid-component-area > .py-5,
#iaaeu-page-banner + .astroid-component-section .astroid-component-area > .pt-5,
#iaaeu-page-banner + .astroid-component-section .astroid-component-area > .staff-article {
   padding-top: 0 !important;
}

@media (max-width: 600px) {

   #iaaeu-page-banner + .astroid-component-section .astroid-component-area {
      padding-top: 1rem;
   }

}

/*
 * Hintergrundbild als eigene Ebene.
 * Dadurch kann es auf kleinen Displays unabhängig vom Banner
 * stärker herangezoomt werden.
 */
#iaaeu-page-banner::before {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 0;

   background-image: url('../../../../../images/headerimg3.jpg');
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;

   transform: scale(1.08);
   transform-origin: center center;

   pointer-events: none;
}

/*
 * Deutlich bläuliche Farbfläche über dem Bild.
 */
#iaaeu-page-banner::after {
   content: "";
   position: absolute;
   inset: 0;
   z-index: 1;

   background: linear-gradient(
      to right,
      #00386f 0%,
      #00386f 18%,
      rgba(0, 56, 111, 0.82) 48%,
      rgba(0, 56, 111, 0.62) 70%,
      rgba(0, 56, 111, 0.16) 100%
   );

   pointer-events: none;
}

/* Startseite: 1,5-mal so hoch wie der bisherige 300px-Banner */
#iaaeu-page-banner.is-home {
   min-height: 450px;
}

#iaaeu-page-banner .iaaeu-page-banner-inner {
   position: relative;
   z-index: 2;

   width: 100%;
   max-width: 1400px;
   margin: 0 auto;
   padding: 40px 60px;
}

/*
 * Seitentitel
 */
#iaaeu-page-banner .iaaeu-page-banner-title {
   margin: 0 0 12px 0;
   padding: 0;

   color: #ffffff;
   font-size: clamp(2.2rem, 4vw, 4rem);
   line-height: 1.1;
}

#iaaeu-page-banner.is-staff-workgroup .iaaeu-page-banner-title {
   font-size: clamp(1.7rem, 3vw, 3rem);
}

/*
 * Breadcrumbs im Banner
 */
#iaaeu-page-banner .iaaeu-page-banner-breadcrumbs {
   color: #ffffff;
   margin: 0;
   padding: 0;
   background: transparent !important;
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
}

/*
 * Alle Breadcrumb-Texte und Links
 */
#iaaeu-page-banner .iaaeu-page-banner-breadcrumbs a,
#iaaeu-page-banner .iaaeu-page-banner-breadcrumbs span,
#iaaeu-page-banner .iaaeu-page-banner-breadcrumbs li {
   color: #ffffff !important;
}

/*
 * "Aktuelle Seite:" ausblenden
 */
#iaaeu-page-banner .mod-breadcrumbs__here,
#iaaeu-page-banner .showHere {
   display: none !important;
}

/*
 * Alten Hintergrund / gestrichelte Rahmen
 * des Breadcrumb-Moduls entfernen.
 */
#iaaeu-page-banner .iaaeu-page-banner-breadcrumbs *,
#iaaeu-page-banner .breadcrumb,
#iaaeu-page-banner .breadcrumbs,
#iaaeu-page-banner .mod-breadcrumbs,
#iaaeu-page-banner .moduletable,
#iaaeu-page-banner .module,
#iaaeu-page-banner nav {
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
}

#iaaeu-page-banner .breadcrumb,
#iaaeu-page-banner .breadcrumbs,
#iaaeu-page-banner .mod-breadcrumbs,
#iaaeu-page-banner nav {
   margin: 0 !important;
   padding: 0 !important;
   background: transparent !important;
}

#iaaeu-page-banner .breadcrumb-item,
#iaaeu-page-banner .breadcrumb-item::before {
   color: #ffffff !important;
}


/*
 * Kleinere Desktop-/Tablet-Breiten:
 * Bild bereits sichtbar stärker heranzoomen.
 */
@media (max-width: 1100px) {

   #iaaeu-page-banner::before {
      transform: scale(1.28);
   }

}


/*
 * Smartphone:
 * deutlich stärkerer Zoom, damit weniger Details sichtbar sind.
 */
@media (max-width: 768px) {

   #iaaeu-page-banner {
      min-height: 110px;
   }

   #iaaeu-page-banner.is-home {
      min-height: 330px;
   }

   #iaaeu-page-banner::before {
      transform: scale(1.6);
      background-position: center center;
   }

   #iaaeu-page-banner::after {
      background: linear-gradient(
         to right,
         #00386f 0%,
         #00386f 22%,
         rgba(0, 56, 111, 0.84) 55%,
         rgba(0, 56, 111, 0.64) 75%,
         rgba(0, 56, 111, 0.2) 100%
      );
   }

   #iaaeu-page-banner .iaaeu-page-banner-inner {
      padding: 30px 20px;
   }

}


/*
 * Sehr kleine Smartphones:
 * noch etwas stärker heranzoomen.
 */
@media (max-width: 480px) {

   #iaaeu-page-banner::before {
      transform: scale(1.85);
   }

}