/* Grundstruktur für alle LazyBlocks */
.lazyblock-section {
    flex: 1;                    /* Content wächst und füllt den Rest */
    padding: calc(1*var(--para-offset)) var(--block-margin) calc(1.5*var(--para-offset)); /* evtl Abstand oben unten vergrößern, wenn horizontales scrollen aktiv */
    display: flex;
    flex-direction: column; /* Elemente untereinander */
    align-items: center;    /* horizontale Zentrierung */
    text-align: left;     /* Text innerhalb von Elementen zentrieren */
    justify-content: center;
    width: 100%;
    margin-top: calc(-1 * var(--para-offset) - 5px);
    clip-path: polygon(
    0 var(--para-offset),
    100% 0,
    100% calc(100% - var(--para-offset)),
    0 100%
  );
  background-color: var(--secondary-color);
}


/* Innen-Container für Content */
.lazyblock-inner {
    max-width: var(--content-max-width);
    width: 100%;
    min-height: 70vh;
}
/* Innen-Container für Content */
.lazyblock-inner-big {
    min-height: 100vh;
    padding: 10vh 0;
}


.lazyblock-first-section{
    padding-top: calc(1 * var(--para-offset));
    margin-top: -210px;
    clip-path: polygon(
        0 0,
         100% 0,
          100% calc(100% - var(--para-offset)),
           0 100%);
}

.lazyblock-first-section .lazyblock-titel{
  margin-top: var(--block-margin);
}

/* H2 oben links positionieren */
.lazyblock-section h2 {
    text-align: left;
    overflow: hidden;
    word-wrap: break-word;     /* ältere Browser */
    overflow-wrap: break-word; /* moderne Browser – empfohlen */
}


.lazyblock-titel{
  width: 100%;
  text-align: left;
  /*margin-top: var(--block-margin);*/
  margin-bottom: calc(2*var(--block-margin)); /* evtl bei horizontalem Scvrollen vergrößern */
  rotate: calc(-1 * var(--rotation)); /* falls du Rotation willst */
}

.lazyblock-titel h2{
margin: 0 0 0 -10px;
}
.gsap-anim-title{
  padding-left: 10px;
}

/* Erstes Kind oben ausrichten */
.lazyblock-inner > :first-child {
    align-self: flex-start; /* oben */
}

/* Alle weiteren Kinder vertikal zentrieren */
.lazyblock-inner > :not(:first-child) {
    margin-top: auto;
    margin-bottom: auto;
}

.fade {
  padding: 0 var(--fade-width);
  margin: 0 calc(-1*var(--fade-width));
  /* Gradient von links nach rechts: vollständig sichtbar bis 20px vor dem Rand, dann ausblenden */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 5px, rgba(0,0,0,1) var(--fade-width), rgba(0,0,0,1) calc(100% - var(--fade-width)), rgba(0,0,0,0) calc(100% - 5px));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(to right, rgba(0,0,0,0) 5px, rgba(0,0,0,1) var(--fade-width), rgba(0,0,0,1) calc(100% - var(--fade-width)), rgba(0,0,0,0) calc(100% - 5px));
  mask-repeat: no-repeat;
  mask-size: cover;

}




@media (min-width: 1600px) { /* ab Desktop */

}
@media (min-width: 1800px) { /* ab Desktop */
  .lazyblock-titel {
    margin-left: -100px;
  }
}


@media (min-width: 2000px) { /* ab Desktop */
  .lazyblock-titel {
    margin-left: -200px;
  }
}


@media (max-width: 768px) { /* ab Desktop */
.lazyblock-section {                /* Content wächst und füllt den Rest */
    padding: calc(2 * var(--para-offset)) calc(var(--block-margin)/1.5);
}

.lazyblock-section.lazyblock-first-section {                /* Content wächst und füllt den Rest */
    padding: max(150px, calc(4 * var(--para-offset))) calc(var(--block-margin)/1.5);
}

.lazyblock-titel{

  /*margin-top: var(--block-margin);*/
  margin-bottom: var(--block-margin);

}
}