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;
}

body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* =============================================================================
   BASE.CSS – Grundgerüst für neue Projekte
   -----------------------------------------------------------------------------
   Aufbau:
     1. Layer-Reihenfolge
     2. Reset
     3. Tokens (Farben, Typo, Abstände, Radien, Schatten)
     4. Dark Mode
     5. Basis-Typografie (h1–h6, p, Listen, Links)
     6. Fließtext-Elemente (Zitate, Code, Tabellen, Figure, hr …)
     7. Layout-Helfer (Wrapper, Flow, Measure, Grid)
     8. Überschriften-Varianten (umschaltbar per Klasse)
     9. Formulare & Buttons
    10. Utilities
    11. Accessibility & Print
   -----------------------------------------------------------------------------
   Einbindung: base.css zuerst laden, danach das Projekt-Stylesheet.
   Projektanpassungen moeglichst als Token-Override in :root schreiben statt
   Regeln zu ueberschreiben.

   Zur Layer-Falle: CSS ausserhalb jedes @layer gewinnt gegen ALLE Layer,
   unabhaengig von der Ladereihenfolge. Eine ungelayerte body-Regel im
   Projekt-CSS setzt also die komplette Typo-Basis hier ausser Kraft.
   Eigene Regeln daher in @layer components bzw. @layer utilities schreiben.
   ============================================================================= */


/* 1. LAYER-REIHENFOLGE ------------------------------------------------------
   Muss als erstes stehen. Alles, was später ohne Layer geschrieben wird,
   gewinnt automatisch gegen alle Layer – praktisch für Projekt-CSS, das
   Fremd-CSS (CMS-Extensions, Plugins) überschreiben soll, ohne !important. */
@layer reset, tokens, base, layout, components, utilities;


/* 2. RESET ------------------------------------------------------------------ */
@layer reset {

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

  /* Abstände bewusst selbst vergeben statt Browser-Defaults korrigieren */
  :where(body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol, pre) {
    margin: 0;
  }

  :where(ul, ol)[role="list"] { list-style: none; padding-inline: 0; }

  html {
    -webkit-text-size-adjust: none;   /* kein Auto-Zoom in iOS Landscape */
    scroll-behavior: smooth;
    scroll-padding-block-start: var(--space-xl); /* Platz für Sticky-Header */
  }

  body { min-block-size: 100svb; }

  /* Medien sind standardmäßig responsiv */
  :where(img, picture, video, canvas, svg, iframe) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }

  :where(input, button, textarea, select) { font: inherit; color: inherit; }

  /* Lange Wörter/URLs brechen statt das Layout zu sprengen */
  :where(p, li, h1, h2, h3, h4, h5, h6, dd, figcaption) {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}


/* 3. TOKENS -----------------------------------------------------------------
   Alles Auswechselbare an einem Ort. Für ein neues Projekt reicht es meist,
   die Hues und zwei Schriftfamilien anzupassen. */
@layer tokens {
  :root {

    /* --- Farben ------------------------------------------------------------
       Aufbau in drei Stufen:
         a) Hue/Chroma als reine Zahlen  → ein Wert ändert die ganze Palette
         b) Palette (neutral-0 … brand-700)
         c) Semantische Tokens (--color-text, --color-surface …)
       Im CSS immer NUR die semantischen Tokens benutzen. */

    --hue-brand: 212;          /* 0–360: die Projektfarbe */
    --hue-accent: 28;          /* Kontrast-/Signalfarbe   */
    --hue-neutral: 215;        /* leichter Farbstich im Grau, wirkt weniger tot */
    --sat-neutral: 12%;

    /* Neutralstufen */
    --neutral-0:   hsl(var(--hue-neutral) 30% 99%);
    --neutral-50:  hsl(var(--hue-neutral) 24% 96%);
    --neutral-100: hsl(var(--hue-neutral) 20% 92%);
    --neutral-200: hsl(var(--hue-neutral) 16% 85%);
    --neutral-300: hsl(var(--hue-neutral) 14% 72%);
    --neutral-400: hsl(var(--hue-neutral) var(--sat-neutral) 58%);
    --neutral-500: hsl(var(--hue-neutral) var(--sat-neutral) 45%);
    --neutral-600: hsl(var(--hue-neutral) 14% 34%);
    --neutral-700: hsl(var(--hue-neutral) 18% 25%);
    --neutral-800: hsl(var(--hue-neutral) 22% 16%);
    --neutral-900: hsl(var(--hue-neutral) 26% 10%);

    /* Markenfarbe */
    --brand-100: hsl(var(--hue-brand) 78% 94%);
    --brand-300: hsl(var(--hue-brand) 70% 72%);
    --brand-500: hsl(var(--hue-brand) 66% 46%);
    --brand-600: hsl(var(--hue-brand) 70% 38%);
    --brand-700: hsl(var(--hue-brand) 72% 28%);

    --accent-300: hsl(var(--hue-accent) 90% 70%);
    --accent-500: hsl(var(--hue-accent) 84% 50%);
    --accent-700: hsl(var(--hue-accent) 80% 34%);

    /* Statusfarben */
    --color-success: hsl(145 55% 34%);
    --color-warning: hsl(38 92% 42%);
    --color-danger:  hsl(356 68% 46%);

    /* Semantische Tokens – nur diese im restlichen CSS verwenden */
    --color-text:        var(--neutral-800);
    --color-text-muted:  var(--neutral-500);
    --color-heading:     var(--neutral-900);
    --color-surface:     var(--neutral-0);
    --color-surface-alt: var(--neutral-50);
    --color-border:      var(--neutral-200);
    --color-link:        var(--brand-600);
    --color-link-hover:  var(--brand-700);
    --color-accent:      var(--accent-500);
    --color-mark-bg:     hsl(var(--hue-accent) 95% 88%);
    --color-selection:   var(--brand-100);
    --color-focus:       var(--accent-500);

    /* --- Typografie --------------------------------------------------------
       Zwei Familien reichen: eine für Überschriften, eine für Fließtext.
       Bei nur einer Familie einfach --font-heading auf --font-body setzen. */
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    --font-heading: var(--font-body);
    --font-mono:    ui-monospace, "SFMono-Regular", "Cascadia Code", "Source Code Pro", Menlo, monospace;

    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold:   700;
    /* Eigenes Token, damit ganze Bereiche das Ueberschriftengewicht per
       Klasse umstellen koennen, ohne h1-h6 einzeln zu ueberschreiben. */
    --font-heading-weight: var(--weight-bold);

    /* --- Typografische Skala ------------------------------------------------
       Abgeleitete Skala: alle Grade ergeben sich aus zwei Werten.

         --step-0  Basisgrad des Fließtextes, fluid per clamp()
         --ratio   Abstufungsverhältnis zwischen zwei benachbarten Graden

       Damit bleiben die Proportionen bei jeder Änderung erhalten: --step-0
       verschiebt die gesamte Skala, --ratio spreizt oder staucht sie.

       Gängige Verhältnisse:
         1.125  Große Sekunde – sehr ruhig, für textlastige Seiten
         1.200  Kleine Terz   – redaktionell, zurückhaltend
         1.250  Große Terz    – ausgewogener Standard
         1.333  Quarte        – deutlicher Kontrast
         1.414  Tritonus      – plakativ, h1 wird auf Mobil schnell zu groß
         1.500  Quinte        – sehr laut, nur für kurze Seiten

       Zuordnung: --step-5 h1 · --step-4 h2 · --step-3 h3 · --step-2 h4
                  --step-1 h5, .lead, blockquote · --step-0 Fließtext, h6
                  --step--1 small, figcaption, Tabellen · --step--2 Reserve

       Hinweis: --ratio ist bewusst NICHT per Media Query gestaffelt. Weil sich
       das Verhältnis bis --step-5 fünffach potenziert, erzeugt jeder Sprung im
       Verhältnis an der Breakpoint-Grenze einen sichtbaren Größensprung bei h1.
       Die Fluidität kommt allein aus dem clamp() in --step-0 und zieht sich
       durch alle Stufen durch. */
    --step-0: clamp(1.00rem, 0.94rem + 0.30vw, 1.19rem);
    --ratio: 1.25;

    --step--2: calc(var(--step--1) / var(--ratio));
    --step--1: calc(var(--step-0)  / var(--ratio));
    --step-1:  calc(var(--step-0)  * var(--ratio));
    --step-2:  calc(var(--step-1)  * var(--ratio));
    --step-3:  calc(var(--step-2)  * var(--ratio));
    --step-4:  calc(var(--step-3)  * var(--ratio));
    --step-5:  calc(var(--step-4)  * var(--ratio));

    --leading-tight: 1.15;   /* große Überschriften */
    --leading-snug:  1.3;    /* kleine Überschriften, Lead */
    --leading-body:  1.65;   /* Fließtext – bei Serifen eher 1.7 */

    --tracking-tight: -0.02em;  /* großen Grad leicht zusammenziehen */
    --tracking-wide:   0.04em;

    --measure: 68ch;         /* Zeilenlänge Fließtext */
    --measure-narrow: 48ch;

    /* --- Abstände ----------------------------------------------------------
       Eine Skala, fluid, überall verwendet. Kein „mal eben 17px“. */
    --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
    --space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.63rem);
    --space-xs:  clamp(0.75rem, 0.71rem + 0.23vw, 0.94rem);
    --space-s:   clamp(1.00rem, 0.94rem + 0.30vw, 1.25rem);
    --space-m:   clamp(1.50rem, 1.41rem + 0.45vw, 1.88rem);
    --space-l:   clamp(2.00rem, 1.88rem + 0.60vw, 2.50rem);
    --space-xl:  clamp(3.00rem, 2.81rem + 0.91vw, 3.75rem);
    --space-2xl: clamp(4.00rem, 3.75rem + 1.21vw, 5.00rem);
    --space-3xl: clamp(6.00rem, 5.63rem + 1.82vw, 7.50rem);

    /* Vertikaler Rhythmus im Fließtext (siehe .flow) */
    --flow-space: var(--space-s);

    /* --- Form & Tiefe ------------------------------------------------------ */
    --radius-xs: 0.125rem;
    --radius-s:  0.25rem;
    --radius-m:  0.5rem;
    --radius-l:  1rem;
    --radius-pill: 100vmax;

    --border-hairline: 1px solid var(--color-border);

    --shadow-s: 0 1px 2px hsl(var(--hue-neutral) 30% 10% / 0.08);
    --shadow-m: 0 2px 4px hsl(var(--hue-neutral) 30% 10% / 0.06),
                0 8px 16px -4px hsl(var(--hue-neutral) 30% 10% / 0.10);
    --shadow-l: 0 4px 8px hsl(var(--hue-neutral) 30% 10% / 0.06),
                0 20px 40px -8px hsl(var(--hue-neutral) 30% 10% / 0.14);

    /* --- Layout ------------------------------------------------------------ */
    --wrapper-max: 75rem;
    --gutter: var(--space-m);

    /* --- Motion ------------------------------------------------------------ */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --duration-fast: 120ms;
    --duration-base: 220ms;
  }
}


/* 4. DARK MODE --------------------------------------------------------------
   Nur die semantischen Tokens werden umdefiniert – sonst ändert sich nichts.
   Variante A: automatisch nach System.
   Variante B: manuell per <html data-theme="dark"> (z. B. Umschalter). */
@layer tokens {

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-text:        var(--neutral-200);
      --color-text-muted:  var(--neutral-400);
      --color-heading:     var(--neutral-50);
      --color-surface:     var(--neutral-900);
      --color-surface-alt: var(--neutral-800);
      --color-border:      var(--neutral-700);
      --color-link:        var(--brand-300);
      --color-link-hover:  hsl(var(--hue-brand) 80% 85%);
      --color-mark-bg:     hsl(var(--hue-accent) 70% 30%);
      --color-selection:   var(--brand-700);
      --shadow-s: 0 1px 2px hsl(0 0% 0% / 0.4);
      --shadow-m: 0 8px 16px -4px hsl(0 0% 0% / 0.5);
      --shadow-l: 0 20px 40px -8px hsl(0 0% 0% / 0.6);
    }
  }

  :root[data-theme="dark"] {
    --color-text:        var(--neutral-200);
    --color-text-muted:  var(--neutral-400);
    --color-heading:     var(--neutral-50);
    --color-surface:     var(--neutral-900);
    --color-surface-alt: var(--neutral-800);
    --color-border:      var(--neutral-700);
    --color-link:        var(--brand-300);
    --color-link-hover:  hsl(var(--hue-brand) 80% 85%);
    --color-mark-bg:     hsl(var(--hue-accent) 70% 30%);
    --color-selection:   var(--brand-700);
  }

  /* Formular-Widgets, Scrollbars etc. mitziehen */
  :root { color-scheme: light dark; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"]  { color-scheme: dark; }
}


/* 5. BASIS-TYPOGRAFIE ------------------------------------------------------- */
@layer base {

  body {
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-body);
    font-weight: var(--weight-normal);
    color: var(--color-text);
    background-color: var(--color-surface);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection {
    background-color: var(--color-selection);
    color: var(--color-heading);
  }

  /* Überschriften: gemeinsame Eigenschaften einmal, Größen einzeln.
     :is() fasst die Selektoren zusammen, ohne die Spezifität zu erhöhen. */
  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    line-height: var(--leading-snug);
    color: var(--color-heading);
    text-wrap: balance;               /* verhindert einsame Restwörter */
    margin-block-end: var(--space-2xs);
  }

  h1 { font-size: var(--step-5); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  h2 { font-size: var(--step-4); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  h3 { font-size: var(--step-3); }
  h4 { font-size: var(--step-2); }
  h5 { font-size: var(--step-1); }
  h6 { font-size: var(--step-0); }

  /* Abstand NACH OBEN statt nach unten – so kollidiert nichts am Sektionsanfang.
     Überschrift direkt nach Überschrift bekommt weniger Luft. */
  :is(h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: var(--space-l);
  }
  :is(h1, h2, h3, h4, h5) + :is(h2, h3, h4, h5, h6) {
    margin-block-start: var(--space-xs);
  }

  p { text-wrap: pretty; }

  /* Abstand zwischen aufeinanderfolgenden Fließtext-Elementen.
     Gilt ohne Zutun, also auch für CMS-Ausgabe ohne eigene Klassen.
     :where() haelt die Spezifitaet bei 0 – Elemente mit eigenem Abstand
     (blockquote, figure, hr) behalten ihren groesseren Wert, und .flow
     oder Komponenten ueberschreiben muehelos.
     Betrifft nur Textelemente, keine div-Container: Karten, Navigationen
     und Grid-Kinder bleiben unberuehrt. */
  :where(p, ul, ol, dl, pre, table, blockquote, figure, hr)
  + :where(p, ul, ol, dl, pre, table) {
    margin-block-start: var(--flow-space, var(--space-s));
  }

  /* Vorspann / Lead */
  .lead {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    max-inline-size: var(--measure-narrow);
  }

  small, .text-small { font-size: var(--step--1); }

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

  a {
    color: var(--color-link);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease-out);
  }
  a:hover { color: var(--color-link-hover); }

  /* Externe Links / Downloads optional markieren:
  a[href^="http"]:not([href*="DEINE-DOMAIN.de"])::after { content: " ↗"; } */

  /* Listen */
  :where(ul, ol):not([role="list"]) {
    padding-inline-start: var(--space-m);
  }
  :where(ul, ol) li + li { margin-block-start: var(--space-3xs); }
  :where(ul, ol) :where(ul, ol) { margin-block-start: var(--space-3xs); }

  dt { font-weight: var(--weight-bold); }
  dd { margin-inline-start: 0; }
  dd + dt { margin-block-start: var(--space-xs); }
}


/* 6. FLIESSTEXT-ELEMENTE ---------------------------------------------------- */
@layer base {

  /* --- Zitate --------------------------------------------------------------
     Default: ruhige Variante mit farbiger Kante.
     Varianten per Klasse: .quote-plain, .quote-pull, .quote-mark */
  blockquote {
    margin-block: var(--space-m);
    padding-inline-start: var(--space-s);
    border-inline-start: 3px solid var(--color-accent);
    font-size: var(--step-1);
    line-height: var(--leading-snug);
    color: var(--color-text);
  }
  blockquote p + p { margin-block-start: var(--space-xs); }

  blockquote cite,
  blockquote footer {
    display: block;
    margin-block-start: var(--space-2xs);
    font-size: var(--step--1);
    font-style: normal;
    color: var(--color-text-muted);
  }
  blockquote :is(cite, footer)::before { content: "— "; }

  /* Schlicht, ohne Kante */
  blockquote.quote-plain {
    border-inline-start: 0;
    padding-inline-start: 0;
    font-style: italic;
  }

  /* Pull Quote – gesetzt wie ein Gestaltungselement */
  blockquote.quote-pull {
    border-inline-start: 0;
    padding-inline: 0;
    margin-block: var(--space-l);
    font-size: var(--step-3);
    line-height: var(--leading-tight);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    max-inline-size: 22ch;
  }

  /* Mit großem Anführungszeichen */
  blockquote.quote-mark {
    position: relative;
    border-inline-start: 0;
    padding-inline-start: var(--space-l);
  }
  blockquote.quote-mark::before {
    content: "\201C";                 /* „ bzw. “ je nach Sprache anpassen */
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -0.15em;
    font-size: var(--step-5);
    line-height: 1;
    color: var(--color-accent);
  }

  /* Inline-Zitat */
  q { quotes: "\201E" "\201C" "\201A" "\2018"; }  /* deutsche Anführungszeichen */

  /* --- Code ---------------------------------------------------------------- */
  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }
  :not(pre) > code {
    padding: 0.15em 0.4em;
    background-color: var(--color-surface-alt);
    border: var(--border-hairline);
    border-radius: var(--radius-s);
    white-space: nowrap;
  }
  pre {
    padding: var(--space-s);
    background-color: var(--color-surface-alt);
    border: var(--border-hairline);
    border-radius: var(--radius-m);
    overflow-x: auto;
    line-height: 1.5;
    tab-size: 2;
  }
  kbd {
    padding: 0.1em 0.4em;
    border: var(--border-hairline);
    border-block-end-width: 2px;
    border-radius: var(--radius-s);
    background-color: var(--color-surface-alt);
  }

  /* --- Sonstige Inline-Elemente -------------------------------------------- */
  mark {
    background-color: var(--color-mark-bg);
    color: inherit;
    padding: 0.05em 0.2em;
    border-radius: var(--radius-xs);
  }
  abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
  }
  sub, sup { font-size: 0.7em; line-height: 0; }

  /* --- Trenner ------------------------------------------------------------- */
  hr {
    margin-block: var(--space-l);
    border: 0;
    border-block-start: var(--border-hairline);
  }

  /* --- Figure -------------------------------------------------------------- */
  figure { margin-block: var(--space-m); }
  figcaption {
    margin-block-start: var(--space-2xs);
    font-size: var(--step--1);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
  }

  /* --- Tabellen ------------------------------------------------------------ */
  table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
    font-variant-numeric: tabular-nums;   /* Zahlen bündig untereinander */
  }
  caption {
    caption-side: block-start;
    margin-block-end: var(--space-2xs);
    text-align: start;
    font-weight: var(--weight-bold);
  }
  :is(th, td) {
    padding: var(--space-2xs) var(--space-xs);
    text-align: start;
    border-block-end: var(--border-hairline);
    vertical-align: top;
  }
  thead th {
    border-block-end-width: 2px;
    font-weight: var(--weight-bold);
  }
  tbody tr:hover { background-color: var(--color-surface-alt); }

  /* Tabellen auf schmalen Screens scrollbar machen:
     <div class="table-scroll"><table>…</table></div> */
  .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* --- details/summary ----------------------------------------------------- */
  details {
    border-block-end: var(--border-hairline);
    padding-block: var(--space-xs);
  }
  summary {
    cursor: pointer;
    font-weight: var(--weight-medium);
  }
  details[open] summary { margin-block-end: var(--space-xs); }
}


/* 7. LAYOUT-HELFER ---------------------------------------------------------- */
@layer layout {

  /* Zentrierter Container mit Innenabstand */
  .wrapper {
    max-inline-size: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .wrapper-narrow { --wrapper-max: 48rem; }

  /* Vertikaler Rhythmus („Lobotomized Owl“): jedes Element bekommt Abstand
     zum Vorgänger. Einzelne Abweichung per --flow-space am Element selbst. */
  .flow > * + * { margin-block-start: var(--flow-space, var(--space-s)); }
  .flow-tight  { --flow-space: var(--space-2xs); }
  .flow-loose  { --flow-space: var(--space-l); }

  /* Lesbare Zeilenlänge */
  .measure { max-inline-size: var(--measure); }
  .measure-narrow { max-inline-size: var(--measure-narrow); }

  /* Sektions-Abstand */
  .section { padding-block: var(--space-2xl); }
  .section-tight { padding-block: var(--space-xl); }

  /* Auto-Grid ohne Media Queries: Spalten brechen ab Mindestbreite um */
  .grid-auto {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  }

  /* Flex-Reihe, die umbricht */
  .cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  /* Element an die Seite drücken (z. B. Footer nach unten) */
  .stack-end { margin-block-start: auto; }
}


/* 8. ÜBERSCHRIFTEN-VARIANTEN ------------------------------------------------
   Ganze Bereiche per Klasse umschalten, ohne einzeln zu überschreiben.
   Benennung frei wählbar (.var1, .var2 …) – ich nehme sprechende Namen. */
@layer components {

  /* Kompakt: kleinere Grade, engere Abstände – für Seitenleisten, Teaser */
  .headings-compact :is(h1, h2, h3, h4, h5, h6) {
    line-height: var(--leading-snug);
    letter-spacing: normal;
    margin-block-end: var(--space-3xs);
  }
  .headings-compact h1 { font-size: var(--step-3); }
  .headings-compact h2 { font-size: var(--step-2); }
  .headings-compact h3 { font-size: var(--step-1); }
  .headings-compact :is(h4, h5, h6) { font-size: var(--step-0); }
  .headings-compact :is(h2, h3, h4, h5, h6):not(:first-child) {
    margin-block-start: var(--space-m);
  }

  /* Display: größer, leichter, weiter – für Startseite/Hero */
  .headings-display :is(h1, h2, h3) {
    --font-heading-weight: var(--weight-medium);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }
  .headings-display h1 { font-size: var(--step-5); }
  .headings-display h2 { font-size: var(--step-4); }
  .headings-display h3 { font-size: var(--step-3); }

  /* Mit Linie darunter – für lange Textseiten, gliedert stark */
  .headings-ruled :is(h2, h3) {
    padding-block-end: var(--space-2xs);
    border-block-end: var(--border-hairline);
  }

  /* Farbig abgesetzt */
  .headings-accent :is(h1, h2, h3, h4, h5, h6) { color: var(--color-accent); }
}


/* 9. FORMULARE & BUTTONS ---------------------------------------------------- */
@layer components {

  label { display: block; font-weight: var(--weight-medium); margin-block-end: var(--space-3xs); }

  :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="submit"], [type="button"]) {
    inline-size: 100%;
    padding: var(--space-2xs) var(--space-xs);
    background-color: var(--color-surface);
    border: var(--border-hairline);
    border-radius: var(--radius-s);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  :is(input, select, textarea):hover { border-color: var(--neutral-300); }

  textarea { min-block-size: 8lh; resize: vertical; }

  :is(input, textarea)::placeholder { color: var(--color-text-muted); opacity: 1; }

  fieldset {
    border: var(--border-hairline);
    border-radius: var(--radius-m);
    padding: var(--space-s);
  }
  legend { padding-inline: var(--space-2xs); font-weight: var(--weight-bold); }

  :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-danger); }
  .form-error { color: var(--color-danger); font-size: var(--step--1); }
  .form-hint  { color: var(--color-text-muted); font-size: var(--step--1); }

  /* Button – als Klasse, damit auch <a> gleich aussieht */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-s);
    min-block-size: 2.75rem;            /* Touch-Zielgröße */
    background-color: var(--color-link);
    color: var(--neutral-0);
    border: 1px solid transparent;
    border-radius: var(--radius-s);
    font-weight: var(--weight-medium);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .btn:hover { background-color: var(--color-link-hover); color: var(--neutral-0); }

  .btn-outline {
    background-color: transparent;
    color: var(--color-link);
    border-color: currentColor;
  }
  .btn-outline:hover { background-color: var(--color-surface-alt); color: var(--color-link-hover); }

  .btn-ghost {
    background-color: transparent;
    color: var(--color-link);
    padding-inline: var(--space-2xs);
  }
  .btn-ghost:hover { background-color: var(--color-surface-alt); }

  .btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
  }
}


/* 10. UTILITIES -------------------------------------------------------------
    Sparsam halten – das hier ist kein Tailwind-Ersatz. */
@layer utilities {

  .visually-hidden:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .text-muted  { color: var(--color-text-muted); }
  .text-center { text-align: center; }
  .text-balance { text-wrap: balance; }

  .surface-alt {
    background-color: var(--color-surface-alt);
    padding: var(--space-m);
    border-radius: var(--radius-m);
  }

  .no-margin  { margin: 0; }
  .center-inline { margin-inline: auto; }

  /* Bild als Cover in fester Ratio */
  .media-cover {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ratio-16-9 { aspect-ratio: 16 / 9; }
  .ratio-4-3  { aspect-ratio: 4 / 3; }
  .ratio-1-1  { aspect-ratio: 1; }
}


/* 11. ACCESSIBILITY & PRINT ------------------------------------------------- */
@layer base {

  /* Sichtbarer Fokus – nur bei Tastaturbedienung, nie ganz entfernen */
  :focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
  }

  /* Skip-Link: erstes Element im <body>, springt zum Hauptinhalt */
  .skip-link {
    position: absolute;
    inset-block-start: var(--space-2xs);
    inset-inline-start: var(--space-2xs);
    z-index: 999;
    padding: var(--space-2xs) var(--space-xs);
    background-color: var(--color-surface);
    border: 2px solid var(--color-focus);
    border-radius: var(--radius-s);
  }
  .skip-link:not(:focus):not(:active) {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    white-space: nowrap;
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  @media (prefers-contrast: more) {
    :root { --color-text-muted: var(--color-text); --color-border: var(--color-text); }
  }
}

@media print {
  :root { --color-text: #000; --color-surface: #fff; }
  body { font-size: 11pt; }
  nav, .no-print, video, iframe { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  :is(h1, h2, h3, blockquote, figure, table) { break-inside: avoid; break-after: avoid; }
  p { orphans: 3; widows: 3; }
}


/* =============================================================================
   OPTIONAL: Contao-Anbindung
   -----------------------------------------------------------------------------
   Contao kapselt Inhalte in .ce_* / .mod_*. Damit greift der Fließtext-Rhythmus
   ohne zusätzliche Template-Anpassung:

   .ce_text, .ce_list, .ce_table { max-inline-size: var(--measure); }
   .mod_article                  { padding-block: var(--space-2xl); }
   .ce_text .image_container     { margin-block: var(--space-m); }
   .invisible                    { … Contao bringt eigene Regel mit, nicht überschreiben }

   Varianten aus Abschnitt 8 lassen sich in Contao direkt als CSS-Klasse
   am Artikel oder Inhaltselement eintragen (Experten-Einstellungen → CSS-ID/Klasse).

   combine_scripts fasst mehrere Stylesheets zu einer Datei zusammen und
   behaelt dabei die Reihenfolge bei – base.css und Projekt-CSS koennen also
   getrennt eingebunden bleiben.
   ============================================================================= */
/* =============================================================================
   STYLES.CSS – Projektspezifische Ebene
   -----------------------------------------------------------------------------
   Laedt NACH base.css. Enthaelt nur:
     1. Webfonts (@font-face)
     2. Token-Overrides – das Projekt-Erscheinungsbild
     3. Projektkomponenten
        3a. Varianten var1–var6 (Schriftpaar + Wellenform)
        3b. Wellen-Buehne: dunkel aussen, hell im #wrapper
        3c. Sinus-Baender .bg-sine / .band-sine
   Alles Generische (Reset, Typo-Basis, Abstaende, Komponenten) steckt in base.css
   und wird hier nicht wiederholt.

   WICHTIG: Eigene Regeln gehoeren in @layer components bzw. @layer utilities.
   Regeln ausserhalb jedes Layers schlagen saemtliche Layer von base.css – das
   ist als Notausgang gedacht, nicht als Normalfall.
   ============================================================================= */


/* 1. WEBFONTS ---------------------------------------------------------------
   Variable Fonts mit vollem Weight-Bereich. woff2 zuerst, alles weitere nur
   als Fallback fuer sehr alte Browser – bei Bedarf kuerzbar auf woff2 allein. */

@font-face {
  font-family: 'Switzer-Variable';
  src: url('../../files/css/fonts/Switzer-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Switzer-Variable.woff') format('woff'),
       url('../../files/css/fonts/Switzer-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Switzer-Variable';
  src: url('../../files/css/fonts/Switzer-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Switzer-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Switzer-VariableItalic.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Amulya-Variable';
  src: url('../../files/css/fonts/Amulya-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Amulya-Variable.woff') format('woff'),
       url('../../files/css/fonts/Amulya-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Amulya-Variable';
  src: url('../../files/css/fonts/Amulya-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Amulya-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Amulya-VariableItalic.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Synonym-Variable';
  src: url('../../files/css/fonts/Synonym-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Synonym-Variable.woff') format('woff'),
       url('../../files/css/fonts/Synonym-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Hind-Variable';
  src: url('../../files/css/fonts/Hind-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Hind-Variable.woff') format('woff'),
       url('../../files/css/fonts/Hind-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Erode-Variable';
  src: url('../../files/css/fonts/Erode-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Erode-Variable.woff') format('woff'),
       url('../../files/css/fonts/Erode-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Erode-Variable';
  src: url('../../files/css/fonts/Erode-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Erode-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Erode-VariableItalic.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Recia-Variable';
  src: url('../../files/css/fonts/Recia-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Recia-Variable.woff') format('woff'),
       url('../../files/css/fonts/Recia-Variable.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Recia-Variable';
  src: url('../../files/css/fonts/Recia-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Recia-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Recia-VariableItalic.ttf') format('truetype');
  font-weight: 300 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Boska-Variable';
  src: url('../../files/css/fonts/Boska-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Boska-Variable.woff') format('woff'),
       url('../../files/css/fonts/Boska-Variable.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Boska-Variable';
  src: url('../../files/css/fonts/Boska-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Boska-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Boska-VariableItalic.ttf') format('truetype');
  font-weight: 200 900;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('../../files/css/fonts/GeneralSans-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/GeneralSans-Variable.woff') format('woff'),
       url('../../files/css/fonts/GeneralSans-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'GeneralSans-Variable';
  src: url('../../files/css/fonts/GeneralSans-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/GeneralSans-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/GeneralSans-VariableItalic.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Plein-Variable';
  src: url('../../files/css/fonts/Plein-Variable.woff2') format('woff2'),
       url('../../files/css/fonts/Plein-Variable.woff') format('woff'),
       url('../../files/css/fonts/Plein-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Plein-Variable';
  src: url('../../files/css/fonts/Plein-VariableItalic.woff2') format('woff2'),
       url('../../files/css/fonts/Plein-VariableItalic.woff') format('woff'),
       url('../../files/css/fonts/Plein-VariableItalic.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: italic;
}


/* 2. TOKEN-OVERRIDES --------------------------------------------------------
   Nur Werte, die von base.css abweichen. Kein Reset, keine body-Regel,
   keine Wiederholung von Defaults. */
:root {

/* in :root */
--sine-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 0 12 5 T24 5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E");

  /* Feste Palette, deshalb kein Dark Mode. Sorgt zugleich dafuer, dass
     Formular-Widgets und Scrollbars hell bleiben. */
  color-scheme: light;

  /* --- Schrift ------------------------------------------------------------ */
  --font-body:      'Switzer-Variable', system-ui, sans-serif;
  --font-heading:   'Amulya-Variable', var(--font-body);
  --font-heading-weight: 600;

  /* Typografische Skala – die beiden einzigen Stellschrauben.
     --step-0 entspricht deinen bisherigen 15px, skaliert bis ca. 17px auf
     grossen Screens. --ratio bestimmt den Abstand zwischen h1 und Fliesstext;
     die vollstaendige Erlaeuterung steht in base.css.
     Zum Ausprobieren: 1.2 wirkt ruhiger, 1.333 deutlich plakativer. */
  --step-0: clamp(1rem, 0.923rem + 0.34vw, 1.1875rem);
  --ratio: 1.22;

  /* --- Flaechen und Text ---------------------------------------------------
     Achtung: --color-surface ist in base.css die Seitenflaeche (frueher
     --color-bg), --color-surface-alt die abgesetzte Flaeche. */
  --color-surface:     #f3f2f2;
  --color-surface-alt: #eae9e9;
  --color-text:        #201e1d;
  --color-heading:     #201e1d;
  --color-text-muted:  color-mix(in srgb, #201e1d 65%, transparent);
  --color-border:      color-mix(in srgb, #201e1d 40%, transparent);

  /* --- Akzent --------------------------------------------------------------
     Die Palettenstufen setzen, nicht nur --color-accent: Fokusring,
     Textmarkierung und Selektion greifen in base.css auf --accent-* zu. */
  --accent-100: #e7f8f6;
  --accent-300: #b8e3e0;
  --accent-500: #0a8681;
  --accent-600: #005551;
  --accent-700: #033633;
  --accent-800: #072523;

  --color-accent:     var(--accent-500);
  --color-link:       var(--accent-600);
  --color-link-hover: var(--accent-700);
  --color-focus:      var(--accent-500);
  --color-mark-bg:    var(--accent-100);
  --color-selection:  var(--accent-100);

  /* --- Layout --------------------------------------------------------------
     Ersetzt das bisherige --edge (dort war min groesser als max, der Wert
     stand faktisch konstant auf 20px). */
  --gutter: clamp(20px, 5vw, 60px);

  /* --- Wellen-Buehne (Abschnitt 3b) ----------------------------------------
     Flaechen aus dem Artefakt "Wellenform-Hintergruende". Die Kachelgroesse
     muss aussen und innen identisch sein, sonst reisst die Welle an der
     Wrapper-Kante ab. Die Kacheln selbst sind fuer 96x60 erzeugt.
     --wave-offset-y: nur setzen, falls #wrapper NICHT oben am Seitenrand
     beginnt (z. B. margin-top: 40px → hier 40px eintragen). */
  --wave-surface-dark:  #1c1a18;
  --wave-surface-light: #f3efe8;
  --wave-size:          96px 60px;
  --wave-offset-y:      0px;

  /* Maximale Breite des hellen Wrappers, links und rechts davon bleibt
     der dunkle Aussenbereich sichtbar. */
  --wrapper-max:        1200px;
  
  /* Textbox-Palette A · Messing  (B/C: Werte austauschen) */
  --box-1: #e9f2f1;
  --box-2: #cedfdd;
  --box-3: #aac4c2;
  --box-4: #54716f;
  --box-5: #39514f;
  --box-6: #1e2f2e;
  
  /* B · Salbei:  #e9f2f1 #cedfdd #aac4c2 #54716f #39514f #1e2f2e
   C · Mauve:   #f6edf1 #e5d6dc #cdb7c0 #7a636d #59454e #34272d */
   
   /* … --box-1 bis --box-6 … */
   --box-link:       #005551;   /* Salbei: #005551 · Mauve: #67344e */
   --box-link-hover: #033633;   /* Salbei: #033633 · Mauve: #412331 */
}


/* 3. PROJEKTKOMPONENTEN ----------------------------------------------------- */
@layer components {

  /* 3a. VARIANTEN -------------------------------------------------------------
     Klasse am <body> (Contao: Seite → Experten-Einstellungen → CSS-Klasse).
     Jede Variante setzt nur Tokens: Schriftpaar, Ueberschriftengewicht und
     die passende Wellenform aus dem Artefakt (Teal & Rosé).
       --wave-dark   aussen, Deckkraft 22 %
       --wave-light  im #wrapper, Deckkraft 8 %
     Groessen, Abstaende und Proportionen kommen weiter aus base.css bzw.
     --step-0 / --ratio oben. Die Grafiken erzeugt wellen_generator.py –
     andere Farben oder Deckkraft dort aendern und die Zeilen neu einfuegen.
     Reihenfolge = PNG 1–6. */

  /* var1 · Boska Medium + Switzer Regular · Welle: Sinus
     Boska ist eine Display-Antiqua mit hohem Kontrast – etwas engerer
       Satz der grossen Grade, damit h1 nicht auseinanderfaellt. */
  .var1 {
    --font-body:    'Switzer-Variable', system-ui, sans-serif;
    --font-heading: 'Boska-Variable', var(--font-body);
    --font-heading-weight: 600;
    --tracking-tight: -0.01em;
    --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,19.2 L 4.4,15.1 L 7.4,12.5 L 10.0,10.4 L 12.2,8.9 L 14.4,7.6 L 16.6,6.5 L 18.8,5.6 L 20.9,5.1 L 22.7,4.9 L 24.4,4.8 L 26.2,4.9 L 28.4,5.4 L 30.5,6.1 L 32.7,7.1 L 34.9,8.3 L 37.1,9.8 L 39.7,11.8 L 42.8,14.4 L 51.5,22.5 L 54.5,25.2 L 57.2,27.3 L 59.8,29.2 L 62.0,30.6 L 64.1,31.7 L 66.3,32.6 L 68.5,33.2 L 70.3,33.5 L 72.0,33.6 L 73.7,33.5 L 75.5,33.2 L 77.7,32.6 L 79.9,31.7 L 82.0,30.6 L 84.2,29.2 L 86.8,27.3 L 89.9,24.8 L 94.3,20.8 L 96.0,19.2' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,39.0 L 3.1,40.4 L 6.5,42.2 L 16.6,48.0 L 20.5,50.1 L 23.6,51.6 L 26.2,52.6 L 28.8,53.5 L 31.4,54.1 L 34.0,54.5 L 36.7,54.6 L 39.3,54.5 L 41.9,54.0 L 44.5,53.4 L 47.1,52.5 L 50.2,51.2 L 53.7,49.5 L 58.9,46.5 L 65.0,43.0 L 68.5,41.1 L 71.6,39.6 L 74.2,38.6 L 76.8,37.7 L 79.4,37.1 L 82.0,36.7 L 84.7,36.6 L 87.3,36.7 L 89.9,37.2 L 92.5,37.8 L 95.1,38.7 L 96.0,39.0' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,19.2 L 4.4,15.1 L 7.4,12.5 L 10.0,10.4 L 12.2,8.9 L 14.4,7.6 L 16.6,6.5 L 18.8,5.6 L 20.9,5.1 L 22.7,4.9 L 24.4,4.8 L 26.2,4.9 L 28.4,5.4 L 30.5,6.1 L 32.7,7.1 L 34.9,8.3 L 37.1,9.8 L 39.7,11.8 L 42.8,14.4 L 51.5,22.5 L 54.5,25.2 L 57.2,27.3 L 59.8,29.2 L 62.0,30.6 L 64.1,31.7 L 66.3,32.6 L 68.5,33.2 L 70.3,33.5 L 72.0,33.6 L 73.7,33.5 L 75.5,33.2 L 77.7,32.6 L 79.9,31.7 L 82.0,30.6 L 84.2,29.2 L 86.8,27.3 L 89.9,24.8 L 94.3,20.8 L 96.0,19.2' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,39.0 L 3.1,40.4 L 6.5,42.2 L 16.6,48.0 L 20.5,50.1 L 23.6,51.6 L 26.2,52.6 L 28.8,53.5 L 31.4,54.1 L 34.0,54.5 L 36.7,54.6 L 39.3,54.5 L 41.9,54.0 L 44.5,53.4 L 47.1,52.5 L 50.2,51.2 L 53.7,49.5 L 58.9,46.5 L 65.0,43.0 L 68.5,41.1 L 71.6,39.6 L 74.2,38.6 L 76.8,37.7 L 79.4,37.1 L 82.0,36.7 L 84.7,36.6 L 87.3,36.7 L 89.9,37.2 L 92.5,37.8 L 95.1,38.7 L 96.0,39.0' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E");
    font-family: var(--font-body);
  }

  /* var2 · Hind Bold + Amulya Regular · Welle: Dreieck */
  .var2 {
    --font-body:    'Switzer-Variable', system-ui, sans-serif;
  --font-heading: 'Plein-Variable', var(--font-body);
  --font-heading-weight: 700;
    --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,19.2 L 24.0,4.8 L 72.0,33.6 L 96.0,19.2' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,40.9 L 36.2,54.5 L 36.7,54.5 L 84.2,36.7 L 84.7,36.7 L 96.0,40.9' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,19.2 L 24.0,4.8 L 72.0,33.6 L 96.0,19.2' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,40.9 L 36.2,54.5 L 36.7,54.5 L 84.2,36.7 L 84.7,36.7 L 96.0,40.9' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E");
    font-family: var(--font-body);
  }

  /* var3 · General Sans Medium + Recia Regular · Welle: Rechteck
     Recia ist eine Serifenschrift – etwas mehr Durchschuss. */
  .var3 {
    --font-body:    'Recia-Variable', system-ui, serif;
    --font-heading: 'GeneralSans-Variable', var(--font-body);
    --font-heading-weight: 500;
    --leading-body: 1.7;
    --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,4.8 L 47.6,4.8 L 48.0,33.6 L 95.6,33.6 L 96.0,4.8' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,36.6 L 12.2,36.6 L 12.7,54.6 L 60.2,54.6 L 60.7,36.6 L 96.0,36.6' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,4.8 L 47.6,4.8 L 48.0,33.6 L 95.6,33.6 L 96.0,4.8' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,36.6 L 12.2,36.6 L 12.7,54.6 L 60.2,54.6 L 60.7,36.6 L 96.0,36.6' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E");
    font-family: var(--font-body);
  }

  /* var4 · Plein Bold + Switzer Regular · Welle: Pulse */
  .var4 {
    --font-body:    'Switzer-Variable', system-ui, sans-serif;
    --font-heading: 'Plein-Variable', var(--font-body);
    --font-heading-weight: 700;
   /* --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,4.8 L 26.6,4.8 L 27.1,33.6 L 95.6,33.6 L 96.0,4.8' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,54.6 L 60.2,54.6 L 60.7,36.6 L 87.3,36.6 L 87.7,54.6 L 96.0,54.6' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,4.8 L 26.6,4.8 L 27.1,33.6 L 95.6,33.6 L 96.0,4.8' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,54.6 L 60.2,54.6 L 60.7,36.6 L 87.3,36.6 L 87.7,54.6 L 96.0,54.6' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E"); */
    font-family: var(--font-body);
  }
  
  .var4 em {
    --font-body:    'Switzer-Variable', system-ui, sans-serif;
    --font-heading: 'Plein-Variable', var(--font-body);
    font-style: italic;
  }

  /* var5 · Erode Semibold + Recia Regular · Welle: Saegezahn
     Serif auf Serif – mehr Durchschuss fuer den Fliesstext. */
  .var5 {
    --font-body:    'Recia-Variable', system-ui, serif;
    --font-heading: 'Erode-Variable', var(--font-body);
    --font-heading-weight: 600;
    --leading-body: 1.7;
    --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,33.6 L 95.6,4.9 L 96.0,33.6' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,47.9 L 60.2,36.6 L 60.7,54.6 L 96.0,47.9' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,33.6 L 95.6,4.9 L 96.0,33.6' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,47.9 L 60.2,36.6 L 60.7,54.6 L 96.0,47.9' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E");
    font-family: var(--font-body);
  }

  /* var6 · Amulya Bold + Synonym Regular · Welle: Rauschen */
  .var6 {
    --font-body:    'Synonym-Variable', system-ui, sans-serif;
    --font-heading: 'Amulya-Variable', var(--font-body);
    --font-heading-weight: 700;
    --wave-dark:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,33.3 L 8.7,31.8 L 17.5,5.5 L 26.2,13.5 L 34.9,18.6 L 43.6,21.9 L 52.4,20.2 L 61.1,26.7 L 69.8,17.7 L 78.5,12.6 L 87.3,26.2 L 96.0,33.3' fill='none' stroke='%236fb6ae' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.330'/%3E%3Cpath d='M 0.0,51.8 L 8.7,43.3 L 17.5,49.2 L 26.2,42.1 L 34.9,44.1 L 43.6,46.5 L 52.4,39.9 L 61.1,50.3 L 69.8,45.5 L 78.5,53.5 L 87.3,45.3 L 96.0,51.8' fill='none' stroke='%23cf94ac' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.187'/%3E%3C/svg%3E");
    --wave-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 60'%3E%3Cpath d='M 0.0,33.3 L 8.7,31.8 L 17.5,5.5 L 26.2,13.5 L 34.9,18.6 L 43.6,21.9 L 52.4,20.2 L 61.1,26.7 L 69.8,17.7 L 78.5,12.6 L 87.3,26.2 L 96.0,33.3' fill='none' stroke='%232f7d7a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.120'/%3E%3Cpath d='M 0.0,51.8 L 8.7,43.3 L 17.5,49.2 L 26.2,42.1 L 34.9,44.1 L 43.6,46.5 L 52.4,39.9 L 61.1,50.3 L 69.8,45.5 L 78.5,53.5 L 87.3,45.3 L 96.0,51.8' fill='none' stroke='%239c4f6c' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' opacity='0.068'/%3E%3C/svg%3E");
    font-family: var(--font-body);
  }


  /* 3b. WELLEN-BUEHNE ---------------------------------------------------------
     Aussen dunkel, im #wrapper hell – dieselbe Kachel, derselbe Rapport.
     Nahtlos wird der Uebergang, weil beide Ebenen ihr Muster am selben Punkt
     verankern: horizontal an der Mitte (Wrapper ist zentriert, teilt also die
     Mittelachse mit der Seite), vertikal an der Oberkante. Die Welle laeuft
     dadurch ueber die Kante hinweg und wechselt dort nur Farbe und Deckkraft.

     Greift nur, wenn eine der Varianten am <body> steht – Seiten ohne
     Variantenklasse bleiben unberuehrt. */
  body:is(.var1, .var2, .var3, .var4, .var5, .var6) {
    background-color: var(--wave-surface-dark);
    background-image: var(--wave-dark);
    background-repeat: repeat;
    background-size: var(--wave-size);
    background-position: center top;
  }

  body:is(.var4) .mod_article {
    /* Breite: der Wrapper ist in Contao sonst randlos, dann bliebe vom
       dunklen Aussenbereich nichts sichtbar. */
    max-width: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);

    /* Textfarben fuer hellen Grund zuruecksetzen. Noetig, weil der Aussen-
       bereich (bzw. .bg-sine am body) helle Schrift vererbt. */


    background-image: var(--wave-light);
    background-repeat: repeat;
    background-size: var(--wave-size);
    background-position: center calc(0px - var(--wave-offset-y));
    margin-bottom: 100px;
    padding-bottom: 50px;
    padding-top: 30px;
  }
  
  body:is(.var1, .var2, .var3, .var5, .var6) #wrapper {
    /* Breite: der Wrapper ist in Contao sonst randlos, dann bliebe vom
       dunklen Aussenbereich nichts sichtbar. */
    max-width: var(--wrapper-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
  
    /* Textfarben fuer hellen Grund zuruecksetzen. Noetig, weil der Aussen-
       bereich (bzw. .bg-sine am body) helle Schrift vererbt. */
    --color-text:       #201e1d;
    --color-heading:    #201e1d;
    --color-text-muted: color-mix(in srgb, #201e1d 65%, transparent);
    --color-border:     color-mix(in srgb, #201e1d 40%, transparent);
    --color-link:       var(--accent-600);
    --color-link-hover: var(--accent-700);
    color: var(--color-text);
  
    background-color: var(--wave-surface-light);
    background-image: var(--wave-light);
    background-repeat: repeat;
    background-size: var(--wave-size);
    background-position: center calc(0px - var(--wave-offset-y));
  }


  /* 3c. SINUS-BAENDER -------------------------------------------------------
     Zwei Wellen unterschiedlicher Frequenz und Farbe, 124x77px gekachelt.
     Die Strichfarben stecken fest in der Grafik, deshalb je eine Fassung
     fuer dunklen und hellen Untergrund. */
  .bg-sine,
  .band-sine {
    background-repeat: repeat;
    background-size: 124px 77px;
  }

  .bg-sine {
    background-color: #1c1a18;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20124%2077'%3E%3Cpath%20d%3D'M%200.0%2C24.6%20L%200.6%2C24.1%20L%201.1%2C23.6%20L%201.7%2C23.1%20L%202.3%2C22.5%20L%202.8%2C22.0%20L%203.4%2C21.5%20L%203.9%2C21.0%20L%204.5%2C20.5%20L%205.1%2C20.0%20L%205.6%2C19.5%20L%206.2%2C18.9%20L%206.8%2C18.4%20L%207.3%2C18.0%20L%207.9%2C17.5%20L%208.5%2C17.0%20L%209.0%2C16.5%20L%209.6%2C16.0%20L%2010.1%2C15.6%20L%2010.7%2C15.1%20L%2011.3%2C14.7%20L%2011.8%2C14.2%20L%2012.4%2C13.8%20L%2013.0%2C13.4%20L%2013.5%2C13.0%20L%2014.1%2C12.6%20L%2014.7%2C12.2%20L%2015.2%2C11.8%20L%2015.8%2C11.4%20L%2016.3%2C11.1%20L%2016.9%2C10.7%20L%2017.5%2C10.4%20L%2018.0%2C10.0%20L%2018.6%2C9.7%20L%2019.2%2C9.4%20L%2019.7%2C9.1%20L%2020.3%2C8.9%20L%2020.9%2C8.6%20L%2021.4%2C8.3%20L%2022.0%2C8.1%20L%2022.5%2C7.9%20L%2023.1%2C7.7%20L%2023.7%2C7.5%20L%2024.2%2C7.3%20L%2024.8%2C7.1%20L%2025.4%2C6.9%20L%2025.9%2C6.8%20L%2026.5%2C6.7%20L%2027.1%2C6.6%20L%2027.6%2C6.5%20L%2028.2%2C6.4%20L%2028.7%2C6.3%20L%2029.3%2C6.3%20L%2029.9%2C6.2%20L%2030.4%2C6.2%20L%2031.0%2C6.2%20L%2031.6%2C6.2%20L%2032.1%2C6.2%20L%2032.7%2C6.3%20L%2033.3%2C6.3%20L%2033.8%2C6.4%20L%2034.4%2C6.5%20L%2034.9%2C6.6%20L%2035.5%2C6.7%20L%2036.1%2C6.8%20L%2036.6%2C6.9%20L%2037.2%2C7.1%20L%2037.8%2C7.3%20L%2038.3%2C7.5%20L%2038.9%2C7.7%20L%2039.5%2C7.9%20L%2040.0%2C8.1%20L%2040.6%2C8.3%20L%2041.1%2C8.6%20L%2041.7%2C8.9%20L%2042.3%2C9.1%20L%2042.8%2C9.4%20L%2043.4%2C9.7%20L%2044.0%2C10.0%20L%2044.5%2C10.4%20L%2045.1%2C10.7%20L%2045.7%2C11.1%20L%2046.2%2C11.4%20L%2046.8%2C11.8%20L%2047.3%2C12.2%20L%2047.9%2C12.6%20L%2048.5%2C13.0%20L%2049.0%2C13.4%20L%2049.6%2C13.8%20L%2050.2%2C14.2%20L%2050.7%2C14.7%20L%2051.3%2C15.1%20L%2051.9%2C15.6%20L%2052.4%2C16.0%20L%2053.0%2C16.5%20L%2053.5%2C17.0%20L%2054.1%2C17.5%20L%2054.7%2C18.0%20L%2055.2%2C18.4%20L%2055.8%2C18.9%20L%2056.4%2C19.5%20L%2056.9%2C20.0%20L%2057.5%2C20.5%20L%2058.1%2C21.0%20L%2058.6%2C21.5%20L%2059.2%2C22.0%20L%2059.7%2C22.5%20L%2060.3%2C23.1%20L%2060.9%2C23.6%20L%2061.4%2C24.1%20L%2062.0%2C24.6%20L%2062.6%2C25.2%20L%2063.1%2C25.7%20L%2063.7%2C26.2%20L%2064.3%2C26.8%20L%2064.8%2C27.3%20L%2065.4%2C27.8%20L%2065.9%2C28.3%20L%2066.5%2C28.8%20L%2067.1%2C29.3%20L%2067.6%2C29.8%20L%2068.2%2C30.4%20L%2068.8%2C30.9%20L%2069.3%2C31.3%20L%2069.9%2C31.8%20L%2070.5%2C32.3%20L%2071.0%2C32.8%20L%2071.6%2C33.3%20L%2072.1%2C33.7%20L%2072.7%2C34.2%20L%2073.3%2C34.6%20L%2073.8%2C35.1%20L%2074.4%2C35.5%20L%2075.0%2C35.9%20L%2075.5%2C36.3%20L%2076.1%2C36.7%20L%2076.7%2C37.1%20L%2077.2%2C37.5%20L%2077.8%2C37.9%20L%2078.3%2C38.2%20L%2078.9%2C38.6%20L%2079.5%2C38.9%20L%2080.0%2C39.3%20L%2080.6%2C39.6%20L%2081.2%2C39.9%20L%2081.7%2C40.2%20L%2082.3%2C40.4%20L%2082.9%2C40.7%20L%2083.4%2C41.0%20L%2084.0%2C41.2%20L%2084.5%2C41.4%20L%2085.1%2C41.6%20L%2085.7%2C41.8%20L%2086.2%2C42.0%20L%2086.8%2C42.2%20L%2087.4%2C42.4%20L%2087.9%2C42.5%20L%2088.5%2C42.6%20L%2089.1%2C42.7%20L%2089.6%2C42.8%20L%2090.2%2C42.9%20L%2090.7%2C43.0%20L%2091.3%2C43.0%20L%2091.9%2C43.1%20L%2092.4%2C43.1%20L%2093.0%2C43.1%20L%2093.6%2C43.1%20L%2094.1%2C43.1%20L%2094.7%2C43.0%20L%2095.3%2C43.0%20L%2095.8%2C42.9%20L%2096.4%2C42.8%20L%2096.9%2C42.7%20L%2097.5%2C42.6%20L%2098.1%2C42.5%20L%2098.6%2C42.4%20L%2099.2%2C42.2%20L%2099.8%2C42.0%20L%20100.3%2C41.8%20L%20100.9%2C41.6%20L%20101.5%2C41.4%20L%20102.0%2C41.2%20L%20102.6%2C41.0%20L%20103.1%2C40.7%20L%20103.7%2C40.4%20L%20104.3%2C40.2%20L%20104.8%2C39.9%20L%20105.4%2C39.6%20L%20106.0%2C39.3%20L%20106.5%2C38.9%20L%20107.1%2C38.6%20L%20107.7%2C38.2%20L%20108.2%2C37.9%20L%20108.8%2C37.5%20L%20109.3%2C37.1%20L%20109.9%2C36.7%20L%20110.5%2C36.3%20L%20111.0%2C35.9%20L%20111.6%2C35.5%20L%20112.2%2C35.1%20L%20112.7%2C34.6%20L%20113.3%2C34.2%20L%20113.9%2C33.7%20L%20114.4%2C33.3%20L%20115.0%2C32.8%20L%20115.5%2C32.3%20L%20116.1%2C31.8%20L%20116.7%2C31.3%20L%20117.2%2C30.9%20L%20117.8%2C30.4%20L%20118.4%2C29.8%20L%20118.9%2C29.3%20L%20119.5%2C28.8%20L%20120.1%2C28.3%20L%20120.6%2C27.8%20L%20121.2%2C27.3%20L%20121.7%2C26.8%20L%20122.3%2C26.2%20L%20122.9%2C25.7%20L%20123.4%2C25.2%20L%20124.0%2C24.7'%20fill%3D'none'%20stroke%3D'%23cda86b'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20opacity%3D'0.375'%2F%3E%3Cpath%20d%3D'M%200.0%2C50.1%20L%200.6%2C50.3%20L%201.1%2C50.6%20L%201.7%2C50.8%20L%202.3%2C51.1%20L%202.8%2C51.3%20L%203.4%2C51.6%20L%203.9%2C51.9%20L%204.5%2C52.1%20L%205.1%2C52.4%20L%205.6%2C52.7%20L%206.2%2C53.0%20L%206.8%2C53.3%20L%207.3%2C53.6%20L%207.9%2C53.9%20L%208.5%2C54.2%20L%209.0%2C54.5%20L%209.6%2C54.8%20L%2010.1%2C55.1%20L%2010.7%2C55.4%20L%2011.3%2C55.7%20L%2011.8%2C56.1%20L%2012.4%2C56.4%20L%2013.0%2C56.7%20L%2013.5%2C57.0%20L%2014.1%2C57.4%20L%2014.7%2C57.7%20L%2015.2%2C58.0%20L%2015.8%2C58.3%20L%2016.3%2C58.7%20L%2016.9%2C59.0%20L%2017.5%2C59.3%20L%2018.0%2C59.7%20L%2018.6%2C60.0%20L%2019.2%2C60.3%20L%2019.7%2C60.6%20L%2020.3%2C61.0%20L%2020.9%2C61.3%20L%2021.4%2C61.6%20L%2022.0%2C61.9%20L%2022.5%2C62.2%20L%2023.1%2C62.5%20L%2023.7%2C62.9%20L%2024.2%2C63.2%20L%2024.8%2C63.5%20L%2025.4%2C63.8%20L%2025.9%2C64.0%20L%2026.5%2C64.3%20L%2027.1%2C64.6%20L%2027.6%2C64.9%20L%2028.2%2C65.2%20L%2028.7%2C65.4%20L%2029.3%2C65.7%20L%2029.9%2C65.9%20L%2030.4%2C66.2%20L%2031.0%2C66.4%20L%2031.6%2C66.7%20L%2032.1%2C66.9%20L%2032.7%2C67.1%20L%2033.3%2C67.3%20L%2033.8%2C67.5%20L%2034.4%2C67.8%20L%2034.9%2C67.9%20L%2035.5%2C68.1%20L%2036.1%2C68.3%20L%2036.6%2C68.5%20L%2037.2%2C68.6%20L%2037.8%2C68.8%20L%2038.3%2C68.9%20L%2038.9%2C69.1%20L%2039.5%2C69.2%20L%2040.0%2C69.3%20L%2040.6%2C69.4%20L%2041.1%2C69.5%20L%2041.7%2C69.6%20L%2042.3%2C69.7%20L%2042.8%2C69.8%20L%2043.4%2C69.9%20L%2044.0%2C69.9%20L%2044.5%2C70.0%20L%2045.1%2C70.0%20L%2045.7%2C70.0%20L%2046.2%2C70.0%20L%2046.8%2C70.0%20L%2047.3%2C70.0%20L%2047.9%2C70.0%20L%2048.5%2C70.0%20L%2049.0%2C70.0%20L%2049.6%2C70.0%20L%2050.2%2C69.9%20L%2050.7%2C69.9%20L%2051.3%2C69.8%20L%2051.9%2C69.7%20L%2052.4%2C69.6%20L%2053.0%2C69.5%20L%2053.5%2C69.4%20L%2054.1%2C69.3%20L%2054.7%2C69.2%20L%2055.2%2C69.1%20L%2055.8%2C68.9%20L%2056.4%2C68.8%20L%2056.9%2C68.6%20L%2057.5%2C68.5%20L%2058.1%2C68.3%20L%2058.6%2C68.1%20L%2059.2%2C67.9%20L%2059.7%2C67.7%20L%2060.3%2C67.5%20L%2060.9%2C67.3%20L%2061.4%2C67.1%20L%2062.0%2C66.9%20L%2062.6%2C66.7%20L%2063.1%2C66.4%20L%2063.7%2C66.2%20L%2064.3%2C65.9%20L%2064.8%2C65.7%20L%2065.4%2C65.4%20L%2065.9%2C65.1%20L%2066.5%2C64.9%20L%2067.1%2C64.6%20L%2067.6%2C64.3%20L%2068.2%2C64.0%20L%2068.8%2C63.7%20L%2069.3%2C63.4%20L%2069.9%2C63.1%20L%2070.5%2C62.8%20L%2071.0%2C62.5%20L%2071.6%2C62.2%20L%2072.1%2C61.9%20L%2072.7%2C61.6%20L%2073.3%2C61.3%20L%2073.8%2C60.9%20L%2074.4%2C60.6%20L%2075.0%2C60.3%20L%2075.5%2C60.0%20L%2076.1%2C59.6%20L%2076.7%2C59.3%20L%2077.2%2C59.0%20L%2077.8%2C58.7%20L%2078.3%2C58.3%20L%2078.9%2C58.0%20L%2079.5%2C57.7%20L%2080.0%2C57.3%20L%2080.6%2C57.0%20L%2081.2%2C56.7%20L%2081.7%2C56.4%20L%2082.3%2C56.0%20L%2082.9%2C55.7%20L%2083.4%2C55.4%20L%2084.0%2C55.1%20L%2084.5%2C54.8%20L%2085.1%2C54.5%20L%2085.7%2C54.1%20L%2086.2%2C53.8%20L%2086.8%2C53.5%20L%2087.4%2C53.2%20L%2087.9%2C53.0%20L%2088.5%2C52.7%20L%2089.1%2C52.4%20L%2089.6%2C52.1%20L%2090.2%2C51.8%20L%2090.7%2C51.6%20L%2091.3%2C51.3%20L%2091.9%2C51.1%20L%2092.4%2C50.8%20L%2093.0%2C50.6%20L%2093.6%2C50.3%20L%2094.1%2C50.1%20L%2094.7%2C49.9%20L%2095.3%2C49.7%20L%2095.8%2C49.5%20L%2096.4%2C49.2%20L%2096.9%2C49.1%20L%2097.5%2C48.9%20L%2098.1%2C48.7%20L%2098.6%2C48.5%20L%2099.2%2C48.4%20L%2099.8%2C48.2%20L%20100.3%2C48.1%20L%20100.9%2C47.9%20L%20101.5%2C47.8%20L%20102.0%2C47.7%20L%20102.6%2C47.6%20L%20103.1%2C47.5%20L%20103.7%2C47.4%20L%20104.3%2C47.3%20L%20104.8%2C47.2%20L%20105.4%2C47.1%20L%20106.0%2C47.1%20L%20106.5%2C47.0%20L%20107.1%2C47.0%20L%20107.7%2C47.0%20L%20108.2%2C47.0%20L%20108.8%2C47.0%20L%20109.3%2C47.0%20L%20109.9%2C47.0%20L%20110.5%2C47.0%20L%20111.0%2C47.0%20L%20111.6%2C47.0%20L%20112.2%2C47.1%20L%20112.7%2C47.1%20L%20113.3%2C47.2%20L%20113.9%2C47.3%20L%20114.4%2C47.4%20L%20115.0%2C47.5%20L%20115.5%2C47.6%20L%20116.1%2C47.7%20L%20116.7%2C47.8%20L%20117.2%2C47.9%20L%20117.8%2C48.1%20L%20118.4%2C48.2%20L%20118.9%2C48.4%20L%20119.5%2C48.5%20L%20120.1%2C48.7%20L%20120.6%2C48.9%20L%20121.2%2C49.1%20L%20121.7%2C49.3%20L%20122.3%2C49.5%20L%20122.9%2C49.7%20L%20123.4%2C49.9%20L%20124.0%2C50.1'%20fill%3D'none'%20stroke%3D'%237f92b3'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20opacity%3D'0.212'%2F%3E%3C%2Fsvg%3E");
    --color-text: #f3f2f2;
    --color-heading: #f3f2f2;
    --color-text-muted: color-mix(in srgb, #f3f2f2 65%, transparent);
    --color-border: color-mix(in srgb, #f3f2f2 30%, transparent);
    --color-link: var(--accent-300);
    --color-link-hover: #ffffff;
    color: var(--color-text);
  }

  .band-sine {
    background-color: #f3efe8;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20124%2077'%3E%3Cpath%20d%3D'M%200.0%2C24.6%20L%200.6%2C24.1%20L%201.1%2C23.6%20L%201.7%2C23.1%20L%202.3%2C22.5%20L%202.8%2C22.0%20L%203.4%2C21.5%20L%203.9%2C21.0%20L%204.5%2C20.5%20L%205.1%2C20.0%20L%205.6%2C19.5%20L%206.2%2C18.9%20L%206.8%2C18.4%20L%207.3%2C18.0%20L%207.9%2C17.5%20L%208.5%2C17.0%20L%209.0%2C16.5%20L%209.6%2C16.0%20L%2010.1%2C15.6%20L%2010.7%2C15.1%20L%2011.3%2C14.7%20L%2011.8%2C14.2%20L%2012.4%2C13.8%20L%2013.0%2C13.4%20L%2013.5%2C13.0%20L%2014.1%2C12.6%20L%2014.7%2C12.2%20L%2015.2%2C11.8%20L%2015.8%2C11.4%20L%2016.3%2C11.1%20L%2016.9%2C10.7%20L%2017.5%2C10.4%20L%2018.0%2C10.0%20L%2018.6%2C9.7%20L%2019.2%2C9.4%20L%2019.7%2C9.1%20L%2020.3%2C8.9%20L%2020.9%2C8.6%20L%2021.4%2C8.3%20L%2022.0%2C8.1%20L%2022.5%2C7.9%20L%2023.1%2C7.7%20L%2023.7%2C7.5%20L%2024.2%2C7.3%20L%2024.8%2C7.1%20L%2025.4%2C6.9%20L%2025.9%2C6.8%20L%2026.5%2C6.7%20L%2027.1%2C6.6%20L%2027.6%2C6.5%20L%2028.2%2C6.4%20L%2028.7%2C6.3%20L%2029.3%2C6.3%20L%2029.9%2C6.2%20L%2030.4%2C6.2%20L%2031.0%2C6.2%20L%2031.6%2C6.2%20L%2032.1%2C6.2%20L%2032.7%2C6.3%20L%2033.3%2C6.3%20L%2033.8%2C6.4%20L%2034.4%2C6.5%20L%2034.9%2C6.6%20L%2035.5%2C6.7%20L%2036.1%2C6.8%20L%2036.6%2C6.9%20L%2037.2%2C7.1%20L%2037.8%2C7.3%20L%2038.3%2C7.5%20L%2038.9%2C7.7%20L%2039.5%2C7.9%20L%2040.0%2C8.1%20L%2040.6%2C8.3%20L%2041.1%2C8.6%20L%2041.7%2C8.9%20L%2042.3%2C9.1%20L%2042.8%2C9.4%20L%2043.4%2C9.7%20L%2044.0%2C10.0%20L%2044.5%2C10.4%20L%2045.1%2C10.7%20L%2045.7%2C11.1%20L%2046.2%2C11.4%20L%2046.8%2C11.8%20L%2047.3%2C12.2%20L%2047.9%2C12.6%20L%2048.5%2C13.0%20L%2049.0%2C13.4%20L%2049.6%2C13.8%20L%2050.2%2C14.2%20L%2050.7%2C14.7%20L%2051.3%2C15.1%20L%2051.9%2C15.6%20L%2052.4%2C16.0%20L%2053.0%2C16.5%20L%2053.5%2C17.0%20L%2054.1%2C17.5%20L%2054.7%2C18.0%20L%2055.2%2C18.4%20L%2055.8%2C18.9%20L%2056.4%2C19.5%20L%2056.9%2C20.0%20L%2057.5%2C20.5%20L%2058.1%2C21.0%20L%2058.6%2C21.5%20L%2059.2%2C22.0%20L%2059.7%2C22.5%20L%2060.3%2C23.1%20L%2060.9%2C23.6%20L%2061.4%2C24.1%20L%2062.0%2C24.6%20L%2062.6%2C25.2%20L%2063.1%2C25.7%20L%2063.7%2C26.2%20L%2064.3%2C26.8%20L%2064.8%2C27.3%20L%2065.4%2C27.8%20L%2065.9%2C28.3%20L%2066.5%2C28.8%20L%2067.1%2C29.3%20L%2067.6%2C29.8%20L%2068.2%2C30.4%20L%2068.8%2C30.9%20L%2069.3%2C31.3%20L%2069.9%2C31.8%20L%2070.5%2C32.3%20L%2071.0%2C32.8%20L%2071.6%2C33.3%20L%2072.1%2C33.7%20L%2072.7%2C34.2%20L%2073.3%2C34.6%20L%2073.8%2C35.1%20L%2074.4%2C35.5%20L%2075.0%2C35.9%20L%2075.5%2C36.3%20L%2076.1%2C36.7%20L%2076.7%2C37.1%20L%2077.2%2C37.5%20L%2077.8%2C37.9%20L%2078.3%2C38.2%20L%2078.9%2C38.6%20L%2079.5%2C38.9%20L%2080.0%2C39.3%20L%2080.6%2C39.6%20L%2081.2%2C39.9%20L%2081.7%2C40.2%20L%2082.3%2C40.4%20L%2082.9%2C40.7%20L%2083.4%2C41.0%20L%2084.0%2C41.2%20L%2084.5%2C41.4%20L%2085.1%2C41.6%20L%2085.7%2C41.8%20L%2086.2%2C42.0%20L%2086.8%2C42.2%20L%2087.4%2C42.4%20L%2087.9%2C42.5%20L%2088.5%2C42.6%20L%2089.1%2C42.7%20L%2089.6%2C42.8%20L%2090.2%2C42.9%20L%2090.7%2C43.0%20L%2091.3%2C43.0%20L%2091.9%2C43.1%20L%2092.4%2C43.1%20L%2093.0%2C43.1%20L%2093.6%2C43.1%20L%2094.1%2C43.1%20L%2094.7%2C43.0%20L%2095.3%2C43.0%20L%2095.8%2C42.9%20L%2096.4%2C42.8%20L%2096.9%2C42.7%20L%2097.5%2C42.6%20L%2098.1%2C42.5%20L%2098.6%2C42.4%20L%2099.2%2C42.2%20L%2099.8%2C42.0%20L%20100.3%2C41.8%20L%20100.9%2C41.6%20L%20101.5%2C41.4%20L%20102.0%2C41.2%20L%20102.6%2C41.0%20L%20103.1%2C40.7%20L%20103.7%2C40.4%20L%20104.3%2C40.2%20L%20104.8%2C39.9%20L%20105.4%2C39.6%20L%20106.0%2C39.3%20L%20106.5%2C38.9%20L%20107.1%2C38.6%20L%20107.7%2C38.2%20L%20108.2%2C37.9%20L%20108.8%2C37.5%20L%20109.3%2C37.1%20L%20109.9%2C36.7%20L%20110.5%2C36.3%20L%20111.0%2C35.9%20L%20111.6%2C35.5%20L%20112.2%2C35.1%20L%20112.7%2C34.6%20L%20113.3%2C34.2%20L%20113.9%2C33.7%20L%20114.4%2C33.3%20L%20115.0%2C32.8%20L%20115.5%2C32.3%20L%20116.1%2C31.8%20L%20116.7%2C31.3%20L%20117.2%2C30.9%20L%20117.8%2C30.4%20L%20118.4%2C29.8%20L%20118.9%2C29.3%20L%20119.5%2C28.8%20L%20120.1%2C28.3%20L%20120.6%2C27.8%20L%20121.2%2C27.3%20L%20121.7%2C26.8%20L%20122.3%2C26.2%20L%20122.9%2C25.7%20L%20123.4%2C25.2%20L%20124.0%2C24.7'%20fill%3D'none'%20stroke%3D'%238f6a34'%20stroke-width%3D'1.6'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20opacity%3D'0.375'%2F%3E%3Cpath%20d%3D'M%200.0%2C50.1%20L%200.6%2C50.3%20L%201.1%2C50.6%20L%201.7%2C50.8%20L%202.3%2C51.1%20L%202.8%2C51.3%20L%203.4%2C51.6%20L%203.9%2C51.9%20L%204.5%2C52.1%20L%205.1%2C52.4%20L%205.6%2C52.7%20L%206.2%2C53.0%20L%206.8%2C53.3%20L%207.3%2C53.6%20L%207.9%2C53.9%20L%208.5%2C54.2%20L%209.0%2C54.5%20L%209.6%2C54.8%20L%2010.1%2C55.1%20L%2010.7%2C55.4%20L%2011.3%2C55.7%20L%2011.8%2C56.1%20L%2012.4%2C56.4%20L%2013.0%2C56.7%20L%2013.5%2C57.0%20L%2014.1%2C57.4%20L%2014.7%2C57.7%20L%2015.2%2C58.0%20L%2015.8%2C58.3%20L%2016.3%2C58.7%20L%2016.9%2C59.0%20L%2017.5%2C59.3%20L%2018.0%2C59.7%20L%2018.6%2C60.0%20L%2019.2%2C60.3%20L%2019.7%2C60.6%20L%2020.3%2C61.0%20L%2020.9%2C61.3%20L%2021.4%2C61.6%20L%2022.0%2C61.9%20L%2022.5%2C62.2%20L%2023.1%2C62.5%20L%2023.7%2C62.9%20L%2024.2%2C63.2%20L%2024.8%2C63.5%20L%2025.4%2C63.8%20L%2025.9%2C64.0%20L%2026.5%2C64.3%20L%2027.1%2C64.6%20L%2027.6%2C64.9%20L%2028.2%2C65.2%20L%2028.7%2C65.4%20L%2029.3%2C65.7%20L%2029.9%2C65.9%20L%2030.4%2C66.2%20L%2031.0%2C66.4%20L%2031.6%2C66.7%20L%2032.1%2C66.9%20L%2032.7%2C67.1%20L%2033.3%2C67.3%20L%2033.8%2C67.5%20L%2034.4%2C67.8%20L%2034.9%2C67.9%20L%2035.5%2C68.1%20L%2036.1%2C68.3%20L%2036.6%2C68.5%20L%2037.2%2C68.6%20L%2037.8%2C68.8%20L%2038.3%2C68.9%20L%2038.9%2C69.1%20L%2039.5%2C69.2%20L%2040.0%2C69.3%20L%2040.6%2C69.4%20L%2041.1%2C69.5%20L%2041.7%2C69.6%20L%2042.3%2C69.7%20L%2042.8%2C69.8%20L%2043.4%2C69.9%20L%2044.0%2C69.9%20L%2044.5%2C70.0%20L%2045.1%2C70.0%20L%2045.7%2C70.0%20L%2046.2%2C70.0%20L%2046.8%2C70.0%20L%2047.3%2C70.0%20L%2047.9%2C70.0%20L%2048.5%2C70.0%20L%2049.0%2C70.0%20L%2049.6%2C70.0%20L%2050.2%2C69.9%20L%2050.7%2C69.9%20L%2051.3%2C69.8%20L%2051.9%2C69.7%20L%2052.4%2C69.6%20L%2053.0%2C69.5%20L%2053.5%2C69.4%20L%2054.1%2C69.3%20L%2054.7%2C69.2%20L%2055.2%2C69.1%20L%2055.8%2C68.9%20L%2056.4%2C68.8%20L%2056.9%2C68.6%20L%2057.5%2C68.5%20L%2058.1%2C68.3%20L%2058.6%2C68.1%20L%2059.2%2C67.9%20L%2059.7%2C67.7%20L%2060.3%2C67.5%20L%2060.9%2C67.3%20L%2061.4%2C67.1%20L%2062.0%2C66.9%20L%2062.6%2C66.7%20L%2063.1%2C66.4%20L%2063.7%2C66.2%20L%2064.3%2C65.9%20L%2064.8%2C65.7%20L%2065.4%2C65.4%20L%2065.9%2C65.1%20L%2066.5%2C64.9%20L%2067.1%2C64.6%20L%2067.6%2C64.3%20L%2068.2%2C64.0%20L%2068.8%2C63.7%20L%2069.3%2C63.4%20L%2069.9%2C63.1%20L%2070.5%2C62.8%20L%2071.0%2C62.5%20L%2071.6%2C62.2%20L%2072.1%2C61.9%20L%2072.7%2C61.6%20L%2073.3%2C61.3%20L%2073.8%2C60.9%20L%2074.4%2C60.6%20L%2075.0%2C60.3%20L%2075.5%2C60.0%20L%2076.1%2C59.6%20L%2076.7%2C59.3%20L%2077.2%2C59.0%20L%2077.8%2C58.7%20L%2078.3%2C58.3%20L%2078.9%2C58.0%20L%2079.5%2C57.7%20L%2080.0%2C57.3%20L%2080.6%2C57.0%20L%2081.2%2C56.7%20L%2081.7%2C56.4%20L%2082.3%2C56.0%20L%2082.9%2C55.7%20L%2083.4%2C55.4%20L%2084.0%2C55.1%20L%2084.5%2C54.8%20L%2085.1%2C54.5%20L%2085.7%2C54.1%20L%2086.2%2C53.8%20L%2086.8%2C53.5%20L%2087.4%2C53.2%20L%2087.9%2C53.0%20L%2088.5%2C52.7%20L%2089.1%2C52.4%20L%2089.6%2C52.1%20L%2090.2%2C51.8%20L%2090.7%2C51.6%20L%2091.3%2C51.3%20L%2091.9%2C51.1%20L%2092.4%2C50.8%20L%2093.0%2C50.6%20L%2093.6%2C50.3%20L%2094.1%2C50.1%20L%2094.7%2C49.9%20L%2095.3%2C49.7%20L%2095.8%2C49.5%20L%2096.4%2C49.2%20L%2096.9%2C49.1%20L%2097.5%2C48.9%20L%2098.1%2C48.7%20L%2098.6%2C48.5%20L%2099.2%2C48.4%20L%2099.8%2C48.2%20L%20100.3%2C48.1%20L%20100.9%2C47.9%20L%20101.5%2C47.8%20L%20102.0%2C47.7%20L%20102.6%2C47.6%20L%20103.1%2C47.5%20L%20103.7%2C47.4%20L%20104.3%2C47.3%20L%20104.8%2C47.2%20L%20105.4%2C47.1%20L%20106.0%2C47.1%20L%20106.5%2C47.0%20L%20107.1%2C47.0%20L%20107.7%2C47.0%20L%20108.2%2C47.0%20L%20108.8%2C47.0%20L%20109.3%2C47.0%20L%20109.9%2C47.0%20L%20110.5%2C47.0%20L%20111.0%2C47.0%20L%20111.6%2C47.0%20L%20112.2%2C47.1%20L%20112.7%2C47.1%20L%20113.3%2C47.2%20L%20113.9%2C47.3%20L%20114.4%2C47.4%20L%20115.0%2C47.5%20L%20115.5%2C47.6%20L%20116.1%2C47.7%20L%20116.7%2C47.8%20L%20117.2%2C47.9%20L%20117.8%2C48.1%20L%20118.4%2C48.2%20L%20118.9%2C48.4%20L%20119.5%2C48.5%20L%20120.1%2C48.7%20L%20120.6%2C48.9%20L%20121.2%2C49.1%20L%20121.7%2C49.3%20L%20122.3%2C49.5%20L%20122.9%2C49.7%20L%20123.4%2C49.9%20L%20124.0%2C50.1'%20fill%3D'none'%20stroke%3D'%233c4a63'%20stroke-width%3D'1.3'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%20opacity%3D'0.212'%2F%3E%3C%2Fsvg%3E");
  }
  
  .box-1, .box-2, .box-3 {
    --color-text:       #201e1d;
    --color-heading:    #201e1d;
    --color-text-muted: color-mix(in srgb, #201e1d 65%, transparent);
    --color-border:     color-mix(in srgb, #201e1d 40%, transparent);
    --color-link:       var(--box-link);
    --color-link-hover: var(--box-link-hover);
  }
  
  .box-4, .box-5, .box-6 {
    --color-text:       #f3efe8;
    --color-heading:    #f3efe8;
    --color-text-muted: color-mix(in srgb, #f3efe8 65%, transparent);
    --color-border:     color-mix(in srgb, #f3efe8 30%, transparent);
    --color-link:       var(--accent-100);
    --color-link-hover: #ffffff;
  }
  
  .box-1 { background-color: var(--box-1); }
  .box-2 { background-color: var(--box-2); }
  .box-3 { background-color: var(--box-3); }
  .box-4 { background-color: var(--box-4); }
  .box-5 { background-color: var(--box-5); }
  .box-6 { background-color: var(--box-6); }
  
  [class*="box-"] { color: var(--color-text); }
  
  :is(.box-1, .box-2, .box-3) a {
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  }
  :is(.box-1, .box-2, .box-3) a:hover {
    text-decoration-color: currentColor;
  }
  
  /* Formular: Absenden-Button */
  .widget-submit .submit {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;                 /* = Hoehe der Eingabefelder */
    padding: 0.75em 1.75em;
    font: inherit;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    color: var(--box-1);
    background-color: var(--box-link);
    border: 1px solid var(--box-link);
    border-radius: var(--radius-s);   /* = Radius der Eingabefelder */
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  }
  
  .widget-submit .submit:hover {
    background-color: var(--box-link-hover);
    border-color: var(--box-link-hover);
  }
  
  .widget-submit .submit:active {
    transform: translateY(1px);
  }
  
  .widget-submit .submit:focus-visible {
    outline: 2px solid var(--box-link);
    outline-offset: 3px;
  }
  
  [class*="box-"] {
    position: relative;
    border-radius: 10px;
    padding: var(--space-l) var(--space-m);
    border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  }
  
  [class*="box-"] {
    --screw: radial-gradient(circle,
               color-mix(in srgb, currentColor 28%, transparent) 2px,
               transparent 2.5px);
    background-image: var(--screw), var(--screw), var(--screw), var(--screw);
    background-size: 10px 10px;
    background-repeat: no-repeat;
    background-position: 8px 8px, calc(100% - 8px) 8px,
                         8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
  }
  
  [class*="box-"]::before {
    content: "";
    position: absolute;
    top: 10px;
    left: var(--space-m);
    right: var(--space-m);
    height: 8px;
    background-color: currentColor;
    opacity: 0.25;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 -1 12 4 T24 4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center / 24px 8px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 8'%3E%3Cpath d='M0 4 Q6 -1 12 4 T24 4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left center / 24px 8px;
    pointer-events: none;
  }
  
  /* HERO ------------------------------------------------------------------ */
  .herotext h1 {
    text-wrap: balance;
    max-width: 20ch;
    margin-bottom: var(--space-m);
    hyphens: none;
  }
  
  .herotext .rte p {
    max-width: 38em;
    hyphens: none;
  }
  
  .herotext .rte p:first-child {
    position: relative;
    padding-left: 1.1em;
    margin-bottom: var(--space-m);
    font-family: var(--font-heading);
    font-weight: 500;
    color: var(--box-link);
  }
  .herotext .rte p:first-child em { font-style: normal; }
  .herotext .rte p:first-child::before {
    content: "";
    position: absolute;
    left: 0; top: 0.2em; bottom: 0.2em;
    width: 3px;
    border-radius: 3px;
    background: var(--box-link);
  }
  
  .herotext strong {
    font-weight: 600;
    color: var(--box-link);
  }
  
  /* JAHRES-KARTEN --------------------------------------------------------- */
  .year-then,
  .year-now {
    box-sizing: border-box;
    height: 100%;
    padding: var(--space-m);
    border-radius: 8px;
    background-color: var(--box-2);
    border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
  }
  
  :is(.year-then, .year-now) h4 {
    position: relative;
    margin: 0 0 var(--space-s);
    padding-bottom: 18px;
    font-size: clamp(3.5rem, 2.6rem + 3.5vw, 6rem);
    line-height: 0.95;
    letter-spacing: -0.02em;
    font-variant-numeric: lining-nums;
  }
  
  .year-then h4 {
    --stroke: 1.5px;
    --stroke-color: var(--color-heading);
    color: var(--box-2);   /* = Kartenfarbe, deckt die Ueberlappungen ab */
    text-shadow:
      calc(var(--stroke) * -1) calc(var(--stroke) * -1) 0 var(--stroke-color),
      0                        calc(var(--stroke) * -1) 0 var(--stroke-color),
      var(--stroke)            calc(var(--stroke) * -1) 0 var(--stroke-color),
      var(--stroke)            0                        0 var(--stroke-color),
      var(--stroke)            var(--stroke)            0 var(--stroke-color),
      0                        var(--stroke)            0 var(--stroke-color),
      calc(var(--stroke) * -1) var(--stroke)            0 var(--stroke-color),
      calc(var(--stroke) * -1) 0                        0 var(--stroke-color);
  }
  
  .year-now h4 {
    color: var(--box-link);
  }
  
  :is(.year-then, .year-now) h4::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: min(100%, 9rem);
    height: 10px;
    background-color: currentColor;
    -webkit-mask: var(--year-wave) repeat-x left center / var(--year-wave-size);
            mask: var(--year-wave) repeat-x left center / var(--year-wave-size);
  }
  .year-then h4::after {
    background-color: var(--color-heading);
    opacity: 0.45;
    --year-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 10'%3E%3Cpath d='M0 5 Q9 -1 18 5 T36 5' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E");
    --year-wave-size: 36px 10px;
  }
  .year-now h4::after {
    --year-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M0 9 L12 1 L12 9' fill='none' stroke='black' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E");
    --year-wave-size: 12px 10px;
  }
  
  /* Formular: Bestaetigungsnachricht */
  .form-confirmation {
    --check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    position: relative;
    margin: 0 0 var(--space-m);
    padding: var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) + 2.75rem);
    border-radius: 8px;
    background-color: var(--box-link);
    color: var(--box-1);
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: 500;
    line-height: 1.35;
    animation: confirm-in .45s ease-out both;
  }
  .form-confirmation p {
    margin: 0;
    color: inherit;
  }
  .form-confirmation::before,
  .form-confirmation::after {
    content: "";
    position: absolute;
    left: var(--space-m);
    top: 50%;
    width: 2rem;
    height: 2rem;
    margin-top: -1rem;
  }
  .form-confirmation::before {
    border-radius: 50%;
    background-color: var(--box-1);
  }
  .form-confirmation::after {
    background-color: var(--box-link);
    -webkit-mask: var(--check) center / 1.1rem no-repeat;
            mask: var(--check) center / 1.1rem no-repeat;
  }
  @keyframes confirm-in {
    from { opacity: 0; transform: translateY(6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-confirmation { animation: none; }
  }
  
  /* Einladung: Fragen + "Schreibe uns!" */
  .cta-invite {
    position: relative;
    text-align: center;
    padding-top: calc(var(--space-m) + 14px);
  }
  
  .cta-invite::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 72px;
    height: 12px;
    margin-left: -36px;
    background-color: var(--box-link);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='M0 6 Q6 0 12 6 T24 6' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x center / 24px 12px;
  }
  
  .cta-invite p {
    margin: 0 auto;
    max-width: 34em;
    font-family: var(--font-heading);
    font-size: var(--step-1);
    line-height: 1.55;
    text-wrap: balance;
  }
  
  .cta-invite em {
    font-style: normal;
  }
  
  .cta-invite strong {
    font-weight: 500;
  }
  
  .cta-invite a {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    margin-top: var(--space-m);
    min-height: 48px;
    padding: 0.7em 1.6em;
    border-radius: 999px;
    background-color: var(--box-link);
    color: var(--box-1);
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background-color .15s ease;
  }
  .cta-invite a::after {
    content: "→";
    transition: transform .15s ease;
  }
  .cta-invite a:hover {
    background-color: var(--box-link-hover);
    color: var(--box-1);
  }
  .cta-invite a:hover::after {
    transform: translateX(3px);
  }
  .cta-invite a:focus-visible {
    outline: 2px solid var(--box-link);
    outline-offset: 3px;
  }
  
  /* LINK-CHIPS nur fuer Events ------------------------------------------- */
  .events .rte a {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    margin: 0.3em 0.3em 0 0;
    padding: 0.2em 0.8em;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: 999px;
    font-size: var(--step--1);
    font-weight: 500;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .events .rte a:hover {
    border-color: currentColor;
    background-color: color-mix(in srgb, currentColor 10%, transparent);
  }
  
  /* Pfeil fuer externe Links in Workshops und Events */
  :is(.workshops, .events) .rte a[href^="http"]::after {
    content: "↗";
    margin-left: 0.3em;
    font-size: 0.9em;
    display: inline-block;
  }
  
  /* WORKSHOPS ------------------------------------------------------------- */
  .workshops .content-image figure {
    overflow: hidden;
    border-radius: 8px;
    margin: 0;
  }
  .workshops .content-image img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .5s ease;
  }
  .workshops .content-image a:hover img {
    transform: scale(1.04);
  }
  .workshops .content-text h3 {
    position: relative;
    padding-top: 22px;
    text-wrap: balance;
  }
  .workshops .content-text h3::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 48px; height: 10px;
    background-color: var(--box-link);
    -webkit-mask: var(--sine-mask) repeat-x left center / 24px 10px;
            mask: var(--sine-mask) repeat-x left center / 24px 10px;
  }
  
  /* EVENTS ALS ZEITLEISTE -------------------------------------------------- */
  .events .rte {
    position: relative;
    padding-left: 2.25rem;
  }
  .events .rte::before {
    content: "";
    position: absolute;
    left: 0.5rem; top: 0.6em; bottom: 0;
    width: 1px;
    background: linear-gradient(color-mix(in srgb, currentColor 35%, transparent) 85%, transparent);
  }
  .events h4 {
    position: relative;
    margin: var(--space-l) 0 var(--space-2xs);
    font-size: var(--step-1);
    line-height: 1.3;
    text-wrap: balance;
  }

  /* Datum = Absatz direkt vor der h4 */
  .events p:has(+ h4) {
    position: relative;
    margin: var(--space-l) 0 0.3em;
    font-size: var(--step-0);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent-300);
    margin: var(--space-l) 0 0.15em;   /* vorher 0.3em */
    line-height: 1.3;                  /* neu: enger als Fliesstext */
  }
  
  .events h4 {
    margin-top: 0;
    margin-bottom: 0.15em;             /* neu: dichter an den Text */
  }
  
  .events p:has(+ h4):first-child { margin-top: 0; }
  
  /* Punkt der Zeitleiste, mittig auf der ersten Datumszeile */
  .events p:has(+ h4)::before {
    content: "";
    position: absolute;
    left: calc(-2.25rem + 0.5rem - 6px);
    top: 0.3em;                      /* Fallback fuer aeltere Browser */
    top: calc(0.5lh - 6.5px);        /* halbe Zeilenhoehe minus halber Punkt */
    width: 13px; height: 13px;
    border-radius: 50%;
    background-color: var(--accent-300);
    box-shadow: 0 0 0 4px var(--box-4);
  }
  
  .events h4 {
    margin-top: 0;
  }
  .events h4 strong { font-weight: inherit; }
  
  /* JAHRES-TRENNER in der Zeitleiste */
  .events h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin: calc(var(--space-l) * 1.6) 0 0;
    font-size: var(--step-3);
    line-height: 1.1;
    letter-spacing: -0.01em;
    font-variant-numeric: lining-nums;
    color: var(--accent-300);
  }
  .events h3:first-child { margin-top: 0; }
  
  /* Linie hinter der Jahreszahl */
  .events h3::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: color-mix(in srgb, currentColor 35%, transparent);
  }
  
  /* Ring auf der Zeitleiste */
  .events h3::before {
    content: "";
    position: absolute;
    left: calc(-2.25rem + 0.5rem - 10px);
    top: calc(0.5lh - 10px);
    width: 20px; height: 20px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 2px solid var(--accent-300);
    background-color: var(--box-4);
  }
  
  /* erstes Datum direkt unter der Jahreszahl etwas naeher */
  .events h3 + p:has(+ h4) { margin-top: var(--space-s); }
  
}

  /* Footer-Navigation: Punkte nebeneinander, zentriert, ohne Aufzählungszeichen */
#footernavi ul {
  list-style: none;
  margin: 50px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s) var(--space-l);
}

#footernavi li {
  margin: 0;
  padding: 0;
}

.gp-full-bg__slide.is-active {
  opacity: 0.3;
}

.textlogo {
  font-family: 'Plein-Variable';
  font-size: 4em;
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  color: transparent;
  line-height: 1em;
}

.var2 .textlogo {
  color: transparent;
}

.var2 .textlogo a {
  color: transparent;
  text-decoration: none;
}

.ce_form .widget {
  margin-bottom: 20px;
}

.herotext {
  font-size: 1.4em;
}