html {
  --grid__columns: 12;
  --grid__gutter: 1.875rem;
}
.row {
  display: grid;
  grid-template-columns: repeat(var(--grid__columns), minmax(0, 1fr));
  grid-gap: var(--grid__gutter);
  grid-auto-columns: 1fr;
}

.row--show {
  position: relative;
  background: #f9f9f9;
  z-index: 0;
  padding-top: 0.9375rem;
}

.row--show:before {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 100%;
  background: repeating-linear-gradient(to right, #f0f0f0 0%, #f0f0f0 calc((100% - (1.875rem * 11)) / 12), #f9f9f9 calc((100% - (1.875rem * 11)) / 12), #f9f9f9 calc(((100% - (1.875rem * 11)) / 12) + 1.875rem) );
}


/* ----- */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 {
  grid-column: 1 / -1;
}

.row-span-xs-1, .row-span-xs-2, .row-span-xs-3, .row-span-xs-4, .row-span-xs-5, .row-span-xs-6, .row-span-xs-7, .row-span-xs-8, .row-span-xs-9, .row-span-xs-10, .row-span-xs-11, .row-span-xs-12, .row-span-sm-1, .row-span-sm-2, .row-span-sm-3, .row-span-sm-4, .row-span-sm-5, .row-span-sm-6, .row-span-sm-7, .row-span-sm-8, .row-span-sm-9, .row-span-sm-10, .row-span-sm-11, .row-span-sm-12, .row-span-md-1, .row-span-md-2, .row-span-md-3, .row-span-md-4, .row-span-md-5, .row-span-md-6, .row-span-md-7, .row-span-md-8, .row-span-md-9, .row-span-md-10, .row-span-md-11, .row-span-md-12, .row-span-lg-1, .row-span-lg-2, .row-span-lg-3, .row-span-lg-4, .row-span-lg-5, .row-span-lg-6, .row-span-lg-7, .row-span-lg-8, .row-span-lg-9, .row-span-lg-10, .row-span-lg-11, .row-span-lg-12, .row-span-xl-1, .row-span-xl-2, .row-span-xl-3, .row-span-xl-4, .row-span-xl-5, .row-span-xl-6, .row-span-xl-7, .row-span-xl-8, .row-span-xl-9, .row-span-xl-10, .row-span-xl-11, .row-span-xl-12 {
  grid-row: 1;
}

.justify-start {
  justify-self: start;
}

.justify-center {
  justify-self: center;
}

.justify-end {
  justify-self: end;
}

.justify-stretch {
  justify-self: stretch;
}

.align-start {
  align-self: start;
}

.align-center {
  align-self: center;
}

.align-end {
  align-self: end;
}

.align-stretch {
  align-self: stretch;
}

.col-1 {
  grid-column: span 1 / span 1;
}

.col-2 {
  grid-column: span 2 / span 2;
}

.col-3 {
  grid-column: span 3 / span 3;
}

.col-4 {
  grid-column: span 4 / span 4;
}

.col-5 {
  grid-column: span 5 / span 5;
}

.col-6 {
  grid-column: span 6 / span 6;
}

.col-7 {
  grid-column: span 7 / span 7;
}

.col-8 {
  grid-column: span 8 / span 8;
}

.col-9 {
  grid-column: span 9 / span 9;
}

.col-10 {
  grid-column: span 10 / span 10;
}

.col-11 {
  grid-column: span 11 / span 11;
}

.col-12 {
  grid-column: span 12 / span 12;
}

@media screen and (min-width: 0) {
  .col-xs-1 {
    grid-column: span 1 / span 1;
  }

  .col-xs-2 {
    grid-column: span 2 / span 2;
  }

  .col-xs-3 {
    grid-column: span 3 / span 3;
  }

  .col-xs-4 {
    grid-column: span 4 / span 4;
  }

  .col-xs-5 {
    grid-column: span 5 / span 5;
  }

  .col-xs-6 {
    grid-column: span 6 / span 6;
  }

  .col-xs-7 {
    grid-column: span 7 / span 7;
  }

  .col-xs-8 {
    grid-column: span 8 / span 8;
  }

  .col-xs-9 {
    grid-column: span 9 / span 9;
  }

  .col-xs-10 {
    grid-column: span 10 / span 10;
  }

  .col-xs-11 {
    grid-column: span 11 / span 11;
  }

  .col-xs-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 0) {
  .col-start-xs-1 {
    grid-column-start: 1;
  }

  .row-start-xs-1 {
    grid-row-start: 1;
  }

  .col-start-xs-2 {
    grid-column-start: 2;
  }

  .row-start-xs-2 {
    grid-row-start: 2;
  }

  .col-start-xs-3 {
    grid-column-start: 3;
  }

  .row-start-xs-3 {
    grid-row-start: 3;
  }

  .col-start-xs-4 {
    grid-column-start: 4;
  }

  .row-start-xs-4 {
    grid-row-start: 4;
  }

  .col-start-xs-5 {
    grid-column-start: 5;
  }

  .row-start-xs-5 {
    grid-row-start: 5;
  }

  .col-start-xs-6 {
    grid-column-start: 6;
  }

  .row-start-xs-6 {
    grid-row-start: 6;
  }

  .col-start-xs-7 {
    grid-column-start: 7;
  }

  .row-start-xs-7 {
    grid-row-start: 7;
  }

  .col-start-xs-8 {
    grid-column-start: 8;
  }

  .row-start-xs-8 {
    grid-row-start: 8;
  }

  .col-start-xs-9 {
    grid-column-start: 9;
  }

  .row-start-xs-9 {
    grid-row-start: 9;
  }

  .col-start-xs-10 {
    grid-column-start: 10;
  }
  .row-start-xs-10 {
    grid-row-start: 10;
  }

  .col-start-xs-11 {
    grid-column-start: 11;
  }

  .row-start-xs-11 {
    grid-row-start: 11;
  }

  .col-start-xs-12 {
    grid-column-start: 12;
  }

  .row-start-xs-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 0) {
  .pull-right-xs {
    grid-column-end: -1;
  }

  .pull-left-xs {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 0) {
  .justify-xs-start {
    justify-self: start;
  }

  .justify-xs-center {
    justify-self: center;
  }

  .justify-xs-end {
    justify-self: end;
  }

  .justify-xs-stretch {
    justify-self: stretch;
  }

  .align-xs-start {
    align-self: start;
  }

  .align-xs-center {
    align-self: center;
  }

  .align-xs-end {
    align-self: end;
  }

  .align-xs-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 0) {
  .row-span-xs-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-xs-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-xs-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-xs-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-xs-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-xs-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-xs-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-xs-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-xs-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-xs-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-xs-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-xs-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 34.375em) {
  .col-sm-1 {
    grid-column: span 1 / span 1;
  }

  .col-sm-2 {
    grid-column: span 2 / span 2;
  }

  .col-sm-3 {
    grid-column: span 3 / span 3;
  }

  .col-sm-4 {
    grid-column: span 4 / span 4;
  }

  .col-sm-5 {
    grid-column: span 5 / span 5;
  }

  .col-sm-6 {
    grid-column: span 6 / span 6;
  }

  .col-sm-7 {
    grid-column: span 7 / span 7;
  }

  .col-sm-8 {
    grid-column: span 8 / span 8;
  }

  .col-sm-9 {
    grid-column: span 9 / span 9;
  }

  .col-sm-10 {
    grid-column: span 10 / span 10;
  }

  .col-sm-11 {
    grid-column: span 11 / span 11;
  }

  .col-sm-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 34.375em) {
  .col-start-sm-1 {
    grid-column-start: 1;
  }

  .row-start-sm-1 {
    grid-row-start: 1;
  }

  .col-start-sm-2 {
    grid-column-start: 2;
  }

  .row-start-sm-2 {
    grid-row-start: 2;
  }

  .col-start-sm-3 {
    grid-column-start: 3;
  }

  .row-start-sm-3 {
    grid-row-start: 3;
  }

  .col-start-sm-4 {
    grid-column-start: 4;
  }

  .row-start-sm-4 {
    grid-row-start: 4;
  }

  .col-start-sm-5 {
    grid-column-start: 5;
  }

  .row-start-sm-5 {
    grid-row-start: 5;
  }

  .col-start-sm-6 {
    grid-column-start: 6;
  }

  .row-start-sm-6 {
    grid-row-start: 6;
  }

  .col-start-sm-7 {
    grid-column-start: 7;
  }

  .row-start-sm-7 {
    grid-row-start: 7;
  }

  .col-start-sm-8 {
    grid-column-start: 8;
  }

  .row-start-sm-8 {
    grid-row-start: 8;
  }

  .col-start-sm-9 {
    grid-column-start: 9;
  }

  .row-start-sm-9 {
    grid-row-start: 9;
  }

  .col-start-sm-10 {
    grid-column-start: 10;
  }

  .row-start-sm-10 {
    grid-row-start: 10;
  }

  .col-start-sm-11 {
    grid-column-start: 11;
  }

  .row-start-sm-11 {
    grid-row-start: 11;
  }

  .col-start-sm-12 {
    grid-column-start: 12;
  }

  .row-start-sm-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 34.375em) {
  .pull-right-sm {
    grid-column-end: -1;
  }

  .pull-left-sm {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 34.375em) {
  .justify-sm-start {
    justify-self: start;
  }

  .justify-sm-center {
    justify-self: center;
  }

  .justify-sm-end {
    justify-self: end;
  }

  .justify-sm-stretch {
    justify-self: stretch;
  }

  .align-sm-start {
    align-self: start;
  }

  .align-sm-center {
    align-self: center;
  }

  .align-sm-end {
    align-self: end;
  }

  .align-sm-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 34.375em) {
  .row-span-sm-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-sm-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-sm-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-sm-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-sm-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-sm-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-sm-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-sm-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-sm-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-sm-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-sm-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-sm-12 {
    grid-row: span 12 / span 12;
  }
}


@media screen and (min-width: 48em) {
  .col-md-1 {
    grid-column: span 1 / span 1;
  }

  .col-md-2 {
    grid-column: span 2 / span 2;
  }

  .col-md-3 {
    grid-column: span 3 / span 3;
  }

  .col-md-4 {
    grid-column: span 4 / span 4;
  }

  .col-md-5 {
    grid-column: span 5 / span 5;
  }

  .col-md-6 {
    grid-column: span 6 / span 6;
  }

  .col-md-7 {
    grid-column: span 7 / span 7;
  }

  .col-md-8 {
    grid-column: span 8 / span 8;
  }

  .col-md-9 {
    grid-column: span 9 / span 9;
  }

  .col-md-10 {
    grid-column: span 10 / span 10;
  }

  .col-md-11 {
    grid-column: span 11 / span 11;
  }

  .col-md-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 48em) {
  .col-start-md-1 {
    grid-column-start: 1;
  }

  .row-start-md-1 {
    grid-row-start: 1;
  }

  .col-start-md-2 {
    grid-column-start: 2;
  }

  .row-start-md-2 {
    grid-row-start: 2;
  }

  .col-start-md-3 {
    grid-column-start: 3;
  }

  .row-start-md-3 {
    grid-row-start: 3;
  }

  .col-start-md-4 {
    grid-column-start: 4;
  }

  .row-start-md-4 {
    grid-row-start: 4;
  }

  .col-start-md-5 {
    grid-column-start: 5;
  }

  .row-start-md-5 {
    grid-row-start: 5;
  }

  .col-start-md-6 {
    grid-column-start: 6;
  }

  .row-start-md-6 {
     grid-row-start: 6;
  }

  .col-start-md-7 {
    grid-column-start: 7;
  }

  .row-start-md-7 {
    grid-row-start: 7;
  }

  .col-start-md-8 {
    grid-column-start: 8;
  }

  .row-start-md-8 {
    grid-row-start: 8;
  }

  .col-start-md-9 {
    grid-column-start: 9;
  }

  .row-start-md-9 {
    grid-row-start: 9;
  }

  .col-start-md-10 {
    grid-column-start: 10;
  }

  .row-start-md-10 {
    grid-row-start: 10;
  }

  .col-start-md-11 {
    grid-column-start: 11;
  }
  
  .row-start-md-11 {
    grid-row-start: 11;
  }
  
  .col-start-md-12 {
    grid-column-start: 12;
  }
  
  .row-start-md-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 48em) {
  .pull-right-md {
    grid-column-end: -1;
  }
  
  .pull-left-md {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 48em) {
  .justify-md-start {
    justify-self: start;
  }

  .justify-md-center {
    justify-self: center;
  }

  .justify-md-end {
    justify-self: end;
  }

  .justify-md-stretch {
    justify-self: stretch;
  }

  .align-md-start {
    align-self: start;
  }

  .align-md-center {
    align-self: center;
  }

  .align-md-end {
    align-self: end;
  }

  .align-md-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 48em) {
  .row-span-md-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-md-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-md-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-md-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-md-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-md-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-md-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-md-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-md-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-md-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-md-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-md-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 58.75em) {
  .col-lg-1 {
    grid-column: span 1 / span 1;
  }
  
  .col-lg-2 {
    grid-column: span 2 / span 2;
  }
  
  .col-lg-3 {
    grid-column: span 3 / span 3;
  }
  
  .col-lg-4 {
    grid-column: span 4 / span 4;
  }
  
  .col-lg-5 {
    grid-column: span 5 / span 5;
  }
  
  .col-lg-6 {
    grid-column: span 6 / span 6;
  }
  
  .col-lg-7 {
    grid-column: span 7 / span 7;
  }
  
  .col-lg-8 {
    grid-column: span 8 / span 8;
  }
  
  .col-lg-9 {
    grid-column: span 9 / span 9;
  }
  
  .col-lg-10 {
    grid-column: span 10 / span 10;
  }
  
  .col-lg-11 {
    grid-column: span 11 / span 11;
  }
  
  .col-lg-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 58.75em) {
  .col-start-lg-1 {
    grid-column-start: 1;
  }
  
  .row-start-lg-1 {
    grid-row-start: 1;
  }
  
  .col-start-lg-2 {
    grid-column-start: 2;
  }
  
  .row-start-lg-2 {
    grid-row-start: 2;
  }
  
  .col-start-lg-3 {
    grid-column-start: 3;
  }
  
  .row-start-lg-3 {
    grid-row-start: 3;
  }
  
  .col-start-lg-4 {
    grid-column-start: 4;
  }
  
  .row-start-lg-4 {
    grid-row-start: 4;
  }
  
  .col-start-lg-5 {
    grid-column-start: 5;
  }
  
  .row-start-lg-5 {
    grid-row-start: 5;
  }
  
  .col-start-lg-6 {
    grid-column-start: 6;
  }
  
  .row-start-lg-6 {
    grid-row-start: 6;
  }
  
  .col-start-lg-7 {
    grid-column-start: 7;
  }
  
  .row-start-lg-7 {
    grid-row-start: 7;
  }
  
  .col-start-lg-8 {
    grid-column-start: 8;
  }
  
  .row-start-lg-8 {
    grid-row-start: 8;
  }
  
  .col-start-lg-9 {
    grid-column-start: 9;
  }
  
  .row-start-lg-9 {
    grid-row-start: 9;
  }
  
  .col-start-lg-10 {
    grid-column-start: 10;
  }
  
  .row-start-lg-10 {
    grid-row-start: 10;
  }
  
  .col-start-lg-11 {
    grid-column-start: 11;
  }
  
  .row-start-lg-11 {
    grid-row-start: 11;
  }
  
  .col-start-lg-12 {
    grid-column-start: 12;
  }
  
  .row-start-lg-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 58.75em) {
  .pull-right-lg {
    grid-column-end: -1;
  }
  
  .pull-left-lg {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 58.75em) {
  .justify-lg-start {
    justify-self: start;
  }

  .justify-lg-center {
    justify-self: center;
  }

  .justify-lg-end {
    justify-self: end;
  }

  .justify-lg-stretch {
    justify-self: stretch;
  }

  .align-lg-start {
    align-self: start;
  }

  .align-lg-center {
    align-self: center;
  }

  .align-lg-end {
    align-self: end;
  }

  .align-lg-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 58.75em) {
  .row-span-lg-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-lg-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-lg-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-lg-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-lg-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-lg-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-lg-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-lg-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-lg-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-lg-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-lg-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-lg-12 {
    grid-row: span 12 / span 12;
  }
}

@media screen and (min-width: 68.75em) {
  .col-xl-1 {
    grid-column: span 1 / span 1;
  }
  
  .col-xl-2 {
    grid-column: span 2 / span 2;
  }
  
  .col-xl-3 {
    grid-column: span 3 / span 3;
  }
  
  .col-xl-4 {
    grid-column: span 4 / span 4;
  }
  
  .col-xl-5 {
    grid-column: span 5 / span 5;
  }
  
  .col-xl-6 {
    grid-column: span 6 / span 6;
  }
  
  .col-xl-7 {
    grid-column: span 7 / span 7;
  }
  
  .col-xl-8 {
    grid-column: span 8 / span 8;
  }
  
  .col-xl-9 {
    grid-column: span 9 / span 9;
  }
  
  .col-xl-10 {
    grid-column: span 10 / span 10;
  }
  
  .col-xl-11 {
    grid-column: span 11 / span 11;
  }
  
  .col-xl-12 {
    grid-column: span 12 / span 12;
  }
}

@media screen and (min-width: 68.75em) {
  .col-start-xl-1 {
     grid-column-start: 1;
  }
  
  .row-start-xl-1 {
    grid-row-start: 1;
  }
  
  .col-start-xl-2 {
    grid-column-start: 2;
  }
  
  .row-start-xl-2 {
    grid-row-start: 2;
  }
  
  .col-start-xl-3 {
    grid-column-start: 3;
  }
  
  .row-start-xl-3 {
    grid-row-start: 3;
  }
  
  .col-start-xl-4 {
    grid-column-start: 4;
  }
  
  .row-start-xl-4 {
    grid-row-start: 4;
  }
  
  .col-start-xl-5 {
    grid-column-start: 5;
  }
  
  .row-start-xl-5 {
    grid-row-start: 5;
  }
  
  .col-start-xl-6 {
    grid-column-start: 6;
  }
  
  .row-start-xl-6 {
    grid-row-start: 6;
  }
  
  .col-start-xl-7 {
    grid-column-start: 7;
  }
  
  .row-start-xl-7 {
    grid-row-start: 7;
  }
  
  .col-start-xl-8 {
    grid-column-start: 8;
  }
  
  .row-start-xl-8 {
    grid-row-start: 8;
  }
  
  .col-start-xl-9 {
    grid-column-start: 9;
  }
  
  .row-start-xl-9 {
    grid-row-start: 9;
  }
  
  .col-start-xl-10 {
    grid-column-start: 10;
  }
  
  .row-start-xl-10 {
    grid-row-start: 10;
  }
  
  .col-start-xl-11 {
    grid-column-start: 11;
  }
  
  .row-start-xl-11 {
    grid-row-start: 11;
  }
  
  .col-start-xl-12 {
    grid-column-start: 12;
  }
  
  .row-start-xl-12 {
    grid-row-start: 12;
  }
}

@media screen and (min-width: 68.75em) {
  .pull-right-xl {
    grid-column-end: -1;
  }
  
  .pull-left-xl {
    grid-row-start: 1;
    grid-column-end: inherit;
  }
}

@media screen and (min-width: 68.75em) {
  .justify-xl-start {
    justify-self: start;
  }

  .justify-xl-center {
    justify-self: center;
  }

  .justify-xl-end {
    justify-self: end;
  }

  .justify-xl-stretch {
    justify-self: stretch;
  }

  .align-xl-start {
    align-self: start;
  }

  .align-xl-center {
    align-self: center;
  }

  .align-xl-end {
    align-self: end;
  }

  .align-xl-stretch {
    align-self: stretch;
  }
}

@media screen and (min-width: 68.75em) {
  .row-span-xl-1 {
    grid-row: span 1 / span 1;
  }

  .row-span-xl-2 {
    grid-row: span 2 / span 2;
  }

  .row-span-xl-3 {
    grid-row: span 3 / span 3;
  }

  .row-span-xl-4 {
    grid-row: span 4 / span 4;
  }

  .row-span-xl-5 {
    grid-row: span 5 / span 5;
  }

  .row-span-xl-6 {
    grid-row: span 6 / span 6;
  }

  .row-span-xl-7 {
    grid-row: span 7 / span 7;
  }

  .row-span-xl-8 {
    grid-row: span 8 / span 8;
  }

  .row-span-xl-9 {
    grid-row: span 9 / span 9;
  }

  .row-span-xl-10 {
    grid-row: span 10 / span 10;
  }

  .row-span-xl-11 {
    grid-row: span 11 / span 11;
  }

  .row-span-xl-12 {
    grid-row: span 12 / span 12;
  }
}

.col-start-1 {
  grid-column-start: 1;
}

.row-start-1 {
  grid-row-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.row-start-2 {
  grid-row-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.row-start-3 {
  grid-row-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.row-start-4 {
  grid-row-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.row-start-5 {
  grid-row-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.row-start-6 {
  grid-row-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.row-start-7 {
  grid-row-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.row-start-8 {
  grid-row-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.row-start-9 {
  grid-row-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}
.row-start-10 {
  grid-row-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.row-start-11 {
  grid-row-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.row-start-12 {
  grid-row-start: 12;
}

.row-span-1 {
  grid-row: span 1 / span 1;
}

.row-span-2 {
  grid-row: span 2 / span 2;
}

.row-span-3 {
  grid-row: span 3 / span 3;
}

.row-span-4 {
  grid-row: span 4 / span 4;
}

.row-span-5 {
  grid-row: span 5 / span 5;
}

.row-span-6 {
  grid-row: span 6 / span 6;
}

.row-span-7 {
  grid-row: span 7 / span 7;
}

.row-span-8 {
  grid-row: span 8 / span 8;
}

.row-span-9 {
  grid-row: span 9 / span 9;
}

.row-span-10 {
  grid-row: span 10 / span 10;
}

.row-span-11 {
  grid-row: span 11 / span 11;
}

.row-span-12 {
  grid-row: span 12 / span 12;
}

.content-slider{overflow:hidden;visibility:hidden;position:relative}.slider-wrapper{overflow:hidden;position:relative}.slider-wrapper>*{float:left;width:100%;position:relative}.slider-control{height:30px;position:relative}.slider-control a,.slider-control .slider-menu{position:absolute;top:9px;display:inline-block}.slider-control .slider-prev{left:0}.slider-control .slider-next{right:0}.slider-control .slider-menu{top:0;width:50%;left:50%;margin-left:-25%;font-size:27px;text-align:center}.slider-control .slider-menu b{color:#bbb;cursor:pointer}.slider-control .slider-menu b.active{color:#666}
@font-face {
    font-family: 'Exo2';
    src: url('../../files/theme-machdeinwerk/fonts/Exo2.ttf') format("truetype-variations");
    font-weight: 100 900;
    font-display: swap;
}
/*!
 * This file is part of Contao.
 *
 * (c) Leo Feyer
 *
 * @license LGPL-3.0-or-later
 */

:root{
	
    --fw-thin: 100;
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;
    --fw-black: 900;

	--fs-h1: 3rem;
	--fs-h2: 2rem;
	--fs-h3: 1.4rem;
	--fs-h4: 1.2rem;

	--c-fontcolor: #434343;
    --c-red: #D52727;
	--c-green: #94B639;
	--c-blue: #38AEB2;
	--c-yellow: #E68530;
	--c-gray: #F3F3F3;
	--c-violet: #A96060;


    --br:.65rem;

	--shadow: 0 5px 6px -10px #000;

	--tt: .3s;
	--grid__gutter: .7rem;
}

@media screen and (max-width:939px){
	:root{
		--grid__gutter: 3rem;
	}
	.row{
		column-gap:0;
	}

	.mod_article.full .row:has(.ce_text){
		row-gap:0;
	}
}


/**
 * Fix rendering HTML5 elements in IE
 */
header,footer,nav,section,aside,main,article,figure,figcaption {
	display:block;
}

/**
 * Reset the margin and padding of the block elements
 */
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,code,ol,ul,li,dl,dt,dd,figure,table,th,td,form,fieldset,legend,input,textarea {
	margin:0;
	padding:0;
}

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}



/**
 * Basic element formatting
 */
table {
	border-spacing:0;
	border-collapse:collapse;
}
caption,th,td {
	text-align:left;
	text-align:start; /* see #4596 */
	vertical-align:top;
}
abbr,acronym {
	font-variant:normal;
	border-bottom:1px dotted #666;
	cursor:help;
}
blockquote,q {
	quotes:none;
}
fieldset,img,iframe {
	border:0;
    display:block;
}
img{
	display:block;
	width:100%;
	height:auto;
}
ul {
	list-style-type:none;
}
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
del {
	text-decoration:line-through;
}
ins {
	text-decoration:none;
}

@media (prefers-reduced-motion: no-preference) {
    :has(:target) {
        scroll-behavior: smooth;
        scroll-padding-top: 12rem;
    }
}
/**
 * Default font settings
 */

html {
	font-size:clamp(15px, 2.5vw, 23px);
	font-family: "Exo2";
	color:var(--c-fontcolor);
	font-weight:var(--fw-regular);
	line-height:1.48;
	letter-spacing: .05rem;
}

input,button,textarea,select {
	font-family:inherit;
	font-size:99%;
	font-weight:inherit;
}
pre,code {
	font-family:Monaco,monospace;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:var(--fw-bold);
	line-height:1em;
}
h1 {
	font-size:var(--fs-h1);
}

@media screen and (max-width:450px){
	h1{
		font-size:2.5rem;
	}
}

h2 {
	font-size:var(--fs-h2);
}
h3 {
	font-size:var(--fs-h3);
}
h4 {
	font-size:1.3333em; /* 16px */
}
table {
	font-size:inherit;
}
caption,th {
	font-weight:bold;
}
a {
	color:inherit;
	text-decoration: none;
}

/**
 * Default margins
 */
h1,h2,h3,h4,h5,h6 {
	margin-bottom:1em;
}

.ce_text h1:not(:first-child),
.ce_text h2:not(:first-child),
.ce_text h3:not(:first-child),
.ce_text h4:not(:first-child){
	margin-top:2rem;
}

p:not(:last-child),
ul:not(:last-child),
ol:not(:last-child),
table:not(:last-child){
	margin-bottom:1rem;
}

strong{
	font-weight:var(--fw-bold);
}


/**
 * Hide invisible elements
 */
.invisible {
	border:0;
	clip:rect(0 0 0 0);
	height:1px;
	margin:-1px;
	overflow:hidden;
	padding:0;
	position:absolute;
	width:1px;
}

/**
 * Custom layout sections
 */
.custom {
	display:block;
}
#container:after,.custom:after {
	content:"";
	display:table;
	clear:both;
}
/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
    padding: .65rem .65rem .45rem .65rem;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    border-radius:var(--br);
}

.hamburger:where(:hover, :focus) {
    opacity: 0.7;
    background-color:var(--c-gray);
}

.hamburger.is-active:where(:hover, :focus) {
    opacity: 0.7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #000;
}

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative;
}

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px;
}

.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--c-red);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.hamburger-inner::before,
.hamburger-inner::after {
    content: "";
    display: block;
}

.hamburger-inner::before {
    top: -10px;
    background-color:var(--c-green);
}

.hamburger-inner::after {
    bottom: -10px;
    background-color:var(--c-blue);
}

.hamburger--elastic .hamburger-inner {
    top: 2px;
    transition-duration: 0.275s;
    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic .hamburger-inner::before {
    top: 10px;
    transition: opacity 0.125s 0.275s ease;
}

.hamburger--elastic .hamburger-inner::after {
    top: 20px;
    transition: transform 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger--elastic.is-active .hamburger-inner {
    transform: translate3d(0, 10px, 0) rotate(135deg);
    transition-delay: 0.075s;
}

.hamburger--elastic.is-active .hamburger-inner::before {
    transition-delay: 0s;
    opacity: 0;
}

.hamburger--elastic.is-active .hamburger-inner::after {
    transform: translate3d(0, -20px, 0) rotate(-270deg);
    transition-delay: 0.075s;
}
/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*------------------------------------------------------------------< Dimensionen >---*/

header > .inside,
footer > .inside,
#attachment > .inside,
#container .mod_article:not(.full) > .inside,
.slide > .inside{
    width:100%;
    max-width:calc(1640px + 2rem);
    padding:0 1rem;
    margin:0 auto;
}

/*------------------------------------------------------------------< Kopfzeile >---*/

#wrapper:not(:has(.custom)) #container,
#wrapper > .custom{
    padding-top:5.5rem;
}



header{
    position:fixed;
    left:0;
    right:0;
    height:5.5rem;

    transition:height var(--tt);

    background-color:#fff;
    border-bottom: 1rem solid var(--c-red);

    z-index:999;
}

header > .inside{
    position:relative;
    height:100%;
}

@media screen and (max-width:1399px){

    body.open header{
        height:100%;
    }

}

@media screen and (min-width:1400px){}

/*------------------------------------------------------------------< Menü >---*/



header nav ul{
    display:flex;
    justify-content: flex-end;
    gap:2rem;

    margin:1rem 0;
}

header nav :where(a, strong){
    display:block;
    font-weight:var(--fw-bold);
    text-transform:uppercase;
}

header #logo{
    position:absolute;
    left:1rem;
    top:.8rem;

    aspect-ratio: 1;
    height:3rem;

    background-image:url(../../files/theme-machdeinwerk/img/logo.svg);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: left center;
    z-index:1;
}

header #logoGo{
    position:absolute;
    left:5rem;
    top:.8rem;

    aspect-ratio: 1/.8;
    height:3rem;

    background-image:url(../../files/theme-machdeinwerk/img/goLogo.svg);
    background-repeat: no-repeat;
    background-size:contain;
    background-position: left center;
    z-index:1;
}

@media screen and (max-width:1399px){
    
    .hamburger{
        position:absolute;
        top:1rem;
        right:1rem;
    }

    header nav{
        position:absolute;
        transform: translate(-50%, -50%);
        top:-50vh;
        left:50%;
        transition:top var(--tt);
    }

    body.open header nav{
        top:50%;
    }

    header nav ul{
        flex-direction: column;
        text-align: center;
    }

    header nav li.active strong{
        background-color:var(--c-red);
        color:#fff;
        padding:.5rem 1rem;
        border-radius: var(--br);
    }


}

@media screen and (min-width:1400px){

    .hamburger{
        display:none;
    }

    header nav{
        position:absolute;
        transform:translateY(-50%);
        top:50%;
        left:1rem;
        right:1rem;
    }

    header nav :where(a, strong){
        border:2px solid var(--c-red);
        border-radius:var(--br);
        padding:.2rem .5rem;
        transition:color var(--tt), background-color var(--tt);
    }

    header nav a:where(:hover, :focus){
        background-color:var(--c-fontcolor);
        color:#fff;
    }

    header nav strong{
        background-color:var(--c-red);
        color:#fff;
    }


}

/*------------------------------------------------------------------< Bühne >---*/

#stage{
    position:relative;
}

#stageSlider{
    position:relative;
    height:calc(100svh - 5.5rem);
    overflow:hidden;
}

/* #stage:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:33vw;
    z-index:1;
    background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
}

#stage:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:1rem;

    height:33.33vh;
    aspect-ratio: 1;
    z-index:2;
    background-image:url(../../files/theme-machdeinwerk/img/logo.svg);
    background-size:contain;
    background-repeat: no-repeat;
    background-position:center;
} */

/*------------------------------------------------------------------< Sider >---*/

.slick-list,
.slick-track,
.slick-slide,
.slick-slide > div,
.slide,
.slide > figure.content-image{
  height:100%;
}


.slide{
    position:relative;
    overflow:hidden;
}

.slide .background-image img{
    position:absolute;
    transform:translateX(-50%);
    top:0;
    left:50%;

    width:auto;
    height:auto;
}

.slide > .inside{
    position:absolute;
    inset:0;
}

#stageSlider .slide .slideContent{
    position:absolute;
    transform:translateY(-50%);
    width:calc(100% - 2rem);
    top:50%;
    right:1rem;
    color:#fff;

    text-align:right;

    background:linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .5) 100%);
    padding:2rem;
    border-right:1rem solid var(--c-red);
    border-radius:var(--br);
}

@media screen and (min-width:768px){
    #stageSlider .slide .slideContent{
        width:60%;
    }
}

@media screen and (min-width:1920px){
    #stageSlider .slide .slideContent{
        width:40%;
    }
}

#stageSlider .slide .slideContent.left{
    right:inherit;
    left:2rem;
    text-align:left;
    background:linear-gradient(90deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, 0) 100%);
    border-right:none;
    border-left:1rem solid var(--c-red);
}

#stageSlider .slideHeadline{
    font-size:var(--fs-h2);
    line-height: 1.3em;
}
#stageSlider.font-small .slideHeadline{
    font-size:calc(var(--fs-h2) * .8 );
}

#stageSlider .slideText{
    margin:1rem 0;
}

main .slick-slider{
    padding-bottom:3rem;
}

#stageSlider .slick-dots{
    bottom:1rem;
}

/* @media screen and (max-width:1300px){
    #stageSlider .slideHeadline{
        font-size:var(--f_s_h1);
    }
}

@media screen and (max-width:650px){

    #stageSlider .slideContent{
        width:75%;
    }

    #stageSlider .slideHeadline{
        font-size:var(--f_s_h2);
    }
} */

/*------------------------------------------------------------------< Slider-Dots >---*/

.slick-dots{
    position:absolute;
    transform:translateX(-50%);
    left:50%;
    bottom: 0rem;
    display:flex;
    gap:.5rem;
    justify-content: center;
    list-style-type:none !important;
}

.slick-dots button{
    font-size:0;
    color:transparent;
    display:block;
    height:1.15rem;
    width:1.15rem;
    border:2px solid var(--c-red);
    border-radius:50%;
    background-color:transparent;
    cursor:pointer;
    padding:0 !important;
    box-shadow:0 .5rem .5rem -.3rem #000;
}

.slick-dots .slick-active button{
    background-color:var(--c-red);
}

/*------------------------------------------------------------------< Schaltflächen / Links >---*/

.more > a,
.btn a,
.puzzleBox a{
    display:inline-block;
    padding:.5rem 2rem;

    border-radius:var(--br);
    color:#fff;
    font-weight:var(--fw-bold);
    text-transform: uppercase;
    text-decoration:none;
    background-color:var(--c-fontcolor);

    transition:background-color var(--tt);
}

.more > a:where(:hover, :focus),
.btn a:where(:hover, :focus){
    background-color: var(--c-red);
}

.ce_text.btn a{
    margin-top:1rem;
}



.ce_text:not(.btn) a,
.ce_hyperlink:not(.btn) a{
    position:relative;
}

.ce_text:not(.btn) a:before,
.ce_text:not(.btn) a:after,
.ce_hyperlink:not(.btn) a:before,
.ce_hyperlink:not(.btn) a:after{
    content:"";

    position:absolute;
    bottom:-3px;
    left:0;
    height:2px;
}

.ce_text:not(.btn) a:before,
.ce_hyperlink:not(.btn) a:before{
    transition:left var(--tt) .1s;
    right:0;
    left:0;
    background-color:var(--c-fontcolor);
}

.ce_text:not(.btn) a:is(:hover, :focus):before,
.ce_hyperlink:not(.btn) a:is(:hover, :focus):before{
    transition:left var(--tt) 0s;
    left:100%;
}

.ce_text:not(.btn) a:after,
.ce_hyperlink:not(.btn) a:after{
    transition: width var(--tt) 0s;
    width:0;
    background-color:var(--c-red);
}

.ce_text:not(.btn) a:is(:hover, :focus):after,
.ce_hyperlink:not(.btn) a:is(:hover, :focus):after{
    transition: width var(--tt) .1s;
    width:100%;
}

/*------------------------------------------------------------------< Footer >---*/

footer{
    background-color: var(--c-red);
    padding:5rem 0;
    color:#fff;
    background-image:url(../../files/theme-machdeinwerk/img/Wasserzeichen.svg);
    background-size:7rem;

}

@media screen and (max-width:1199px){
    footer > .inside > *:not(:last-child){
        margin-bottom: 3rem;
    }

    footer .ce_image img{
        max-width:150px;
        height:auto;
    }
}

@media screen and (min-width:1200px){
    footer > .inside{
        display:grid;
        grid-template-columns: .4fr .4fr 1fr .3fr;
        gap:var(--grid__gutter);
    }

    footer nav{
        border-right:2px solid #fff;
    }
}



/*------------------------------------------------------------------< Zitate >---*/

.zitat{
    position: relative;
    padding:1rem 15vw;
    text-align:center;
}

.zitat:before,
.zitat:after{
    content:"";
    position:absolute;
    transform:translateY(-50%);
    right:calc(10vw - 2rem);
    top:50%;

    height:3rem;
    width:2rem;

    background-image:url(../../files/theme-machdeinwerk/img/zitat.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;
}

.zitat:after{
    left: calc(10vw - 2rem);
    right:auto;
    transform: translateY(-50%) rotate(180deg);
}

.ce_sliderStart :where(.slider-prev, .slider-next){
    display:none !important;
}

.ce_sliderStart:before{
    content:"";
    background-image:url(../../files/theme-machdeinwerk/img/books.svg);
    background-repeat:no-repeat;
    background-size:contain;
    background-position: center;

    display:block;
    height:4rem;
}



/*------------------------------------------------------------------< Puzzlebox >---*/

.mod_article.pb > .inside{
    display:grid;
    gap:var(--grid__gutter);
}

@media screen and (min-width:768px){
    .mod_article.pb > .inside{
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width:1250px){
    .mod_article.pb > .inside{
        grid-template-columns: repeat(3, 1fr);
    }
}

.puzzleBox{
    margin-bottom:0 !important;
    display:flex;
    flex-direction:column;
}

.puzzleHeadline{
    position:relative;
    aspect-ratio: 1/.5;
}

.puzzleHeadline :where(h2, h3){
    position:absolute;
    transform:translate(-50%, -50%);
    top:50%;
    left:50%;

    width:100%;
    text-align:center;

    margin:0;
    transition:font-size var(--tt);
}

.puzzleBox:where(:hover, :focus) .puzzleHeadline :where(h2, h3){
    font-size:calc(var(--fs-h2) + .2rem);
}

.puzzleHeadline:before{
    content:"";
    position:absolute;
    transform:translate(-50%, -50%) rotate(0deg) scale(1);
    top:50%;
    left:50%;

    width:33%;
    aspect-ratio: 1;

    z-index:-1;

    mask-image:url(../../files/theme-machdeinwerk/img/puzzle.svg);
    mask-position:center;
    mask-repeat:no-repeat;
    mask-size:contain;

    opacity:.3;

    transition:transform var(--tt), opacity var(--tt);
}

.puzzleBox.deg_45 .puzzleHeadline:before{ transform:translate(-50%, -50%) rotate(45deg) scale(1); }
.puzzleBox.deg_135 .puzzleHeadline:before{ transform:translate(-50%, -50%) rotate(135deg) scale(1); }
.puzzleBox.deg_225 .puzzleHeadline:before{ transform:translate(-50%, -50%) rotate(225deg) scale(1); }


.puzzleBox:where(:hover, :focus) .puzzleHeadline:before{
    transform:translate(-50%, -50%) rotate(0deg) scale(1.2) !important;
    opacity:.5;
}



.puzzleBox .boxText{
    position:relative;
    color:#fff;
    border-radius:var(--br);
    padding:2rem 2rem 7rem;
    flex-grow:1;
}

.puzzleBox.red .boxText,
.puzzleBox.red .puzzleHeadline:before{
    background-color: var(--c-red);
}

.puzzleBox.violet .boxText,
.puzzleBox.violet .puzzleHeadline:before{
    background-color: var(--c-violet);
}

.puzzleBox.yellow .boxText,
.puzzleBox.yellow .puzzleHeadline:before{
    background-color: var(--c-yellow);
}

.puzzleBox a{
    position:absolute;
    bottom:2rem;
    left:2rem;
    right:2rem;
    display:block;
    text-align:center;
    border:2px solid #fff;
    background-color:transparent;
    transition:background-color var(--tt);
    padding:.5rem !important;
}

.puzzleBox a:where(:hover, :focus){
    background-color:var(--c-fontcolor);
}


/*------------------------------------------------------------------< div. Elemente >---*/

main .mod_article:not(.full){
    padding:5rem 0;
}

main .mod_article.full .ce_text{
    padding:3rem;
}

@media screen and (max-width:939px){
    main .mod_article.full .ce_text{
        padding:5rem 1rem;
    }
}

main .mod_article > .inside > *:not(:last-child),
main .mod_article > .inside > .row > .ce_columns > *:not(:last-child){
    margin-bottom:2rem;
}







.mod_article.gray{
    background-color:var(--c-gray);
}











main ol li:not(:last-child){
    margin-bottom:1rem;
}

main ul{
    list-style-type: disc;
    margin-left:2rem;
}

main ol{
    list-style:none;
    counter-reset: li-counter;
}

main ol li{
    position:relative;
    padding:0 0 0 3rem;
    counter-increment: li-counter;
}

main ol li:before{
    position:absolute;
    transform:translateY(-50%);
    top:50%;
    left:0;
    content:counter(li-counter)'.';
    display:inline-block;
    background-color:var(--c-red);
    color:#fff;
    width:2rem;
    aspect-ratio: 1;
    line-height:2rem;
    border-radius: var(--br);
    text-align:center;
    font-weight: var(--fw-bold);
}

/*------------------------------------------------------------------< Tabelle >---*/

table{
    border-collapse: separate;
    border-spacing:.5rem;
    border:0;
    width:100%;
}

#pricing tr:first-child td:not(:last-child){
    background-color:var(--c-red);
    color:#fff;
    font-weight:var(--fw-bold);
    font-size: var(--fs-h3);
}

#pricing td{
    background-color:#fff;
    border-radius:var(--br);
    -moz-border-radius: var(--br);
    padding:.5rem;
    vertical-align: middle;
    box-shadow:0 3px 5px -5px rgba(0,0,0,.5)
}

#pricing tr.head td:last-child,
#pricing table :where(tr:nth-child(1), tr:nth-child(2)) td:last-child{
    box-shadow: none;
}

#pricing tr.head td:not(:last-child){
    text-align:center;
    color:#fff;
    background-color:var(--c-yellow);
}

#pricing td:last-child{
    width:7rem;
    font-size:.7rem;
    border:0;
    background-color:transparent;
}


#performance{
    display: block;
    overflow-x:auto;
}

#performance tr:nth-child(even) td{
    background-color:var(--c-gray);
}

#performance tr:nth-child(even) td:first-child{ border-radius: .65rem 0 0 .65rem; }
#performance tr:nth-child(even) td:last-child{ border-radius: 0 .65rem .65rem 0; }



#performance td{
    padding:1rem;
    vertical-align: middle;
    text-align:center;
}

#performance td:nth-child(2),
#performance td:nth-child(3){
    border-left:5px dotted #fff;
}




#performance img{
    width:50px;
    aspect-ratio: 1;
    margin:0 auto;
}

/*------------------------------------------------------------------< Akkordeon >---*/

.ce_accordion{
    background-color:var(--c-red);
    color:#fff;
    border-radius:var(--br);
    border:2px solid var(--c-red);
}

.ce_accordion:not(:last-child){
    margin-bottom:1rem !important;
}

.ce_accordion > .toggler{
    padding:1rem;
    cursor:pointer;
}

.ce_accordion > .accordion{
    background-color:#fff;
    color:var(--c-fontcolor);
    border-radius:0 0 var(--br) var(--br);
    padding:1rem;
}

/*------------------------------------------------------------------< Förderer >---*/

#attachment > .inside{
    padding: 5rem 1rem;
}

@media screen and (max-width:767px){
    /* #attachment div[class^='col-']:first-child{
        padding-bottom:2rem;
    } */
    #attachment img{
        padding:2rem;
    }
}

/*------------------------------------------------------------------< Copyright >---*/

.mod_image_copyright_list{
    display:flex;
    flex-direction: column;
    gap:var(--grid__gutter);
}

.mod_image_copyright_list > div{
    display:flex;
    gap:var(--grid__gutter);
}

.mod_image_copyright_list img{
    width:auto;
    height:auto;
}