Stage @stage

In development

Default @stage

<!-- Default -->
<!-- Add class .stage -->
<div class="stage stage--hasimage stage--hasheadline" id="stage">
  <div class="stage__spacer">
    <picture>
      <source class="lazy" media="(min-width:1600px)" sizes="100vw" srcset="https://placehold.co/1920x768 1920w" />
      <source class="lazy" sizes="100vw" srcset="https://placehold.co/1200x1200 480w" /><img class="lazy lazy--loaded" src="https://placehold.co/1920x768" width="1920" height="768" alt="Junges Paar umarmt sich in der Abendsonne" title="Vorsorge" data-da-img="true" data-da-id="23" data-da-next="24" data-da-prev="22" data-da-focused="false" /></picture>
    <div class="stage__titlewrapper">
      <h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
      <div class="subheadline-h1 text-center">Vorsorge</div>
    </div>
    <div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
        <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
      </svg></div>
  </div>
</div>

Without gradient @stage--without-gradient

<!-- Without gradient -->
<!-- Add class .stage -->
<!-- Modifier class: stage--no-gradient -->
<div class="stage stage--hasimage stage--hasheadline stage--no-gradient" id="stage">
  <div class="stage__spacer">
    <picture>
      <source class="lazy" media="(min-width:1600px)" sizes="100vw" srcset="https://placehold.co/1920x768 1920w" />
      <source class="lazy" sizes="100vw" srcset="https://placehold.co/1200x1200 480w" /><img class="lazy lazy--loaded" src="https://placehold.co/1920x768" width="1920" height="768" alt="Junges Paar umarmt sich in der Abendsonne" title="Vorsorge" data-da-img="true" data-da-id="23" data-da-next="24" data-da-prev="22" data-da-focused="false" /></picture>
    <div class="stage__titlewrapper">
      <h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
      <div class="subheadline-h1 text-center">Vorsorge</div>
    </div>
    <div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
        <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
      </svg></div>
  </div>
</div>

Without gradient and image @stage--without-gradient-and-image

<!-- Without gradient and image -->
<!-- Add class .stage -->
<!-- Modifier class: stage--no-gradient -->
<!-- For stage without imgage, remove picture-tag -->
<div class="stage stage--hasimage stage--hasheadline stage--no-gradient" id="stage">
  <div class="stage__spacer">
    <div class="stage__titlewrapper">
      <h1 class="text-center h2" data-da-header="true" data-da-id="24" data-da-next="25" data-da-prev="23" data-da-focused="false" data-da-down="14" data-da-up="455">Weil Ihre Gesundheit<br />im Mittelpunkt steht</h1>
      <div class="subheadline-h1 text-center">Vorsorge</div>
    </div>
    <div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73" data-da-img="true" data-da-id="25" data-da-next="26" data-da-prev="24" data-da-focused="false">
        <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
      </svg></div>
  </div>
</div>

Search @stage--search

<!-- Search -->
<!-- Add class .stage -->
<div class="stage stage--hasicon stage--hasheadline">
  <div class="stage__spacer">
    <div class="stage__titlewrapper">
      <h1 class="text-center h2 mb-4">
        <div class="header__svg">
          <div class="header__svg-spacer header__svg-spacer--smile icon-animation icon-animation--smile"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 74.39 84.87">
              <path class="lighten" d="M38.77 71.24A35.62 35.62 0 103.16 35.62a35.62 35.62 0 0035.61 35.62"></path>
              <path class="darken" d="M18.77 84.87l1.9-1.75a38.11 38.11 0 006.42-8.28A36.88 36.88 0 1173.78 39.3a36.87 36.87 0 01-35.95 36.86c-5.92 8.12-16 8.59-16.48 8.61zM36.89 4.31a35 35 0 00-8.16 69l1.19.29-.57 1.08a41.25 41.25 0 01-5.46 7.84c3.32-.68 9-2.58 12.67-7.83l.28-.4h.48a35 35 0 00-.43-70zm0 50.24A16.94 16.94 0 0120 37.63h1.89a15 15 0 0030.05 0h1.86a16.94 16.94 0 01-16.91 16.92zM42 35h-1.9v-7.17H42zm-8.32 0h-1.9v-7.17h1.89z"></path>
            </svg></div>
        </div>Ihre Suche
      </h1>
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="search-bar" data-source="/data/search-bar.json">
              <div class="search-bar__inner">
                <form class="search-bar__form" autocomplete="off" method="get" action="/suchergebnisse" _lpchecked="1"><label class="search-bar__input-label" for="search-term">Suchbegriff</label><input class="search-bar__input" autocomplete="off" type="text" placeholder="Suchbegriff" required="required" name="tx_solr[q]" />
                  <div class="search-bar__buttons-right"><button class="search-bar__reset" type="reset" value="Zur├╝cksetzen" aria-hidden="true"></button><button class="search-bar__button" type="submit" value="Suchen"></button></div>
                </form>
                <div class="search-bar__suggestions" aria-hidden="true">
                  <div class="search-bar__suggestions-inner">
                    <div class="search-bar__list-title">Oft gesucht</div>
                    <div class="search-bar__list"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="image__mask"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1402" height="73" viewbox="0 0 1402 73">
        <path d="M715.1 70.73C1048.4 70.73 1402 1 1402 1C1402 5.8 1402 29.8 1402 73L0 73L0 1C232.6 47.49 470.97 70.73 715.1 70.73Z"></path>
      </svg></div>
  </div>
</div>