/* ========================================================================
   Externe Banner-Kurve
   ------------------------------------------------------------------------
   Diese Datei ist bewusst NICHT Bestandteil des Banner-Moduls.
   Nur dort einbinden, wo die geschwungene Unterkante gewünscht ist.

   Die Form orientiert sich an der eingezeichneten Linie:
   links sehr tief und lange fast waagerecht, ab der Mitte zunehmend
   ansteigend und rechts deutlich nach oben gezogen.

   Aufbau:
   ::before = weisse Flaeche, exakt die Kurve, bis zur Bannerunterkante
   ::after  = gelbes Band, gleiche Kurve, um die Bandbreite nach oben
              versetzt und nach unten durchgehend aufgefuellt
   ======================================================================== */

#page-banner {
  /* Kurvenfarben */
  --external-banner-curve-bg: #fff;
  --external-banner-curve-band: #f7c121;
  --external-banner-curve-band-size: 35px;

  /* Kurvenform als wiederverwendbare Maske (Desktop).
     Wird von ::before und ::after gemeinsam genutzt, damit beide Formen
     nicht auseinanderlaufen koennen. */
  --external-banner-curve-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 950 C160 978 385 982 575 918 C790 858 925 600 1035 410 C1098 302 1150 252 1200 230 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
}

/*
 * Die eigentliche Kurve wird als skalierbare SVG-Maske erzeugt.
 * Dadurch bleibt sie auch bei unterschiedlichen Bildschirmbreiten weich
 * und bekommt keinen "Ellipse-/Kreis-Look".
 */
#page-banner.banner-hero::before {
  content: "";
  position: absolute;
  z-index: 5;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  background: var(--external-banner-curve-bg);

  -webkit-mask-image: var(--external-banner-curve-mask);
  mask-image: var(--external-banner-curve-mask);

  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}


/*
 * Farbiges Band: gleiche Kurvenform wie die weisse Flaeche, nur nach oben
 * versetzt. Es liegt direkt unter #page-banner::before und damit oberhalb
 * der dunklen Banner-Overlays. So bleibt #f7c121 unverfaelscht.
 *
 * WICHTIG: Der Versatz erfolgt NICHT ueber transform, sondern ueber die
 * Maskenposition. Ein verschobenes Element wuerde am unteren Rand
 * abgeschnitten; da die Kurve links bis auf rund 3 % an die Unterkante
 * heranreicht, entstand dort eine Luecke zwischen Band und weisser Flaeche.
 *
 * Ebene 1: die um die Bandbreite nach oben versetzte Kurve.
 * Ebene 2: ein durchgehender Balken, der genau die unteren
 *          --external-banner-curve-band-size Pixel wieder auffuellt.
 * Beide Ebenen werden additiv verrechnet, das Gelb reicht dadurch immer
 * bis zur Bannerunterkante und wird dort von der weissen Flaeche verdeckt.
 */
#page-banner.banner-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: var(--external-banner-curve-band) !important;

  -webkit-mask-image: var(--external-banner-curve-mask), linear-gradient(#000, #000);
  mask-image: var(--external-banner-curve-mask), linear-gradient(#000, #000);

  -webkit-mask-size: 100% 100%, 100% var(--external-banner-curve-band-size);
  mask-size: 100% 100%, 100% var(--external-banner-curve-band-size);

  -webkit-mask-position: 0 calc(-1 * var(--external-banner-curve-band-size)), 0 100%;
  mask-position: 0 calc(-1 * var(--external-banner-curve-band-size)), 0 100%;

  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;

  -webkit-mask-composite: source-over, source-over;
  mask-composite: add, add;
}


/* Die Intro-Grafik muss vor der Kurvenflaeche liegen. */
#page-banner .banner-hero-intro-image {
  z-index: 6;
}

/* Inhalt oberhalb der Kurve halten. */
#page-banner.banner-hero {
  padding-bottom: 86px;
}

/* Titelbereich bei aktiver externer Kurve weiter nach oben setzen. */
#page-banner .banner-hero-content {
  transform: translateY(-82px);
}

/* Scroll-Hinweis im Banner vollstaendig ausblenden. */
#scrollHint {
  display: none !important;
}

@media (max-width: 768px) {
  #page-banner {
    --external-banner-curve-band-size: 24px;

    /* Auf schmalen Displays die Kurve weniger extrem hochziehen.
       Da beide Pseudoelemente die Variable nutzen, genuegt diese
       eine Ueberschreibung. */
    --external-banner-curve-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 1000' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 940 C165 970 355 968 520 914 C705 872 835 748 935 620 C1030 500 1110 410 1200 360 L1200 1000 L0 1000 Z'/%3E%3C/svg%3E");
  }

  #page-banner.banner-hero {
    padding-bottom: 46px;
  }

  #page-banner .banner-hero-content {
    transform: translateY(-38px);
  }
}