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

/*
 * Basis-Auszeichnung für Contao-Inhaltselemente.
 *
 * Zweck: Eine frische Installation sieht sofort ordentlich aus – Überschriften-
 * Abstände, Listen, Tabellen, Bilder, Downloads, Formulare. Es geht NICHT darum,
 * ein Theme zu ersetzen.
 *
 * Zwei Regeln machen das konfliktfrei:
 *   1. Alle Selektoren stecken in :where() → Spezifität 0. Jede Theme-Regel
 *      gewinnt automatisch, egal wie die Ladereihenfolge ist.
 *   2. Jeder Wert kommt aus einer CSS-Variablen mit Fallback. Ein Theme kann
 *      also allein durch Setzen der Tokens alles umstellen.
 *
 * Abschaltbar über Verein → Vereins-Einstellungen → „Basis-Styles laden".
 */

:root {
    --club-space-1: 0.25rem;
    --club-space-2: 0.5rem;
    --club-space-3: 0.75rem;
    --club-space-4: 1rem;
    --club-space-5: 1.5rem;
    --club-space-6: 2rem;
    --club-space-8: 3rem;

    --club-text: var(--color-text, #1c2b28);
    --club-muted: var(--color-text-muted, #56655f);
    --club-border: var(--color-border, #dde5e2);
    --club-surface: var(--color-surface, #f5f7f6);
    --club-link: var(--color-primary, #0f766e);

    --club-radius: var(--radius-md, 8px);
    --club-line: var(--line-height, 1.6);
    --club-measure: 72ch;
}

/* ------------------------------------------------------------ Grundrhythmus */

/* Abstand ZWISCHEN Inhaltselementen – der häufigste Grund für „klebt alles aneinander". */
:where(.ce_text, .ce_headline, .ce_list, .ce_table, .ce_image, .ce_gallery,
       .ce_download, .ce_downloads, .ce_hyperlink, .ce_toplink, .ce_html,
       .ce_accordionSingle, .ce_player, .ce_youtube, .ce_vimeo, .ce_code,
       .content-text, .content-headline, .content-list, .content-table,
       .content-image, .content-gallery, .content-downloads, .content-code,
       .content-accordion, .content-description-list, .content-markdown) {
    margin-block: 0 var(--club-space-5);
}

:where(.mod_article > *:last-child, .ce_text:last-child) {
    margin-bottom: 0;
}

/* ------------------------------------------------------------- Überschriften */

:where(.ce_text, .ce_headline, .content-text, .content-headline, .rte)
    :where(h1, h2, h3, h4, h5, h6) {
    margin-block: var(--club-space-6) var(--club-space-3);
    line-height: var(--heading-line-height, 1.25);
    text-wrap: balance;
}

/* Die erste Überschrift eines Elements braucht oben keinen Extra-Abstand. */
:where(.ce_text, .ce_headline, .content-text, .content-headline, .rte)
    :where(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

/* Überschrift direkt nach einer Überschrift: enger zusammen. */
:where(.rte, .ce_text, .content-text) :where(h1, h2, h3, h4, h5, h6)
    + :where(h1, h2, h3, h4, h5, h6) {
    margin-top: var(--club-space-2);
}

/* ------------------------------------------------------------------- Fließtext */

:where(.ce_text, .content-text, .rte) :where(p) {
    margin-block: 0 var(--club-space-4);
    line-height: var(--club-line);
}

:where(.ce_text, .content-text, .rte) :where(p:last-child) {
    margin-bottom: 0;
}

:where(.ce_text, .content-text, .rte) :where(a) {
    color: var(--club-link);
    text-underline-offset: 0.15em;
}

:where(.ce_text, .content-text, .rte) :where(strong, b) {
    font-weight: 600;
}

:where(.ce_text, .content-text, .rte) :where(small) {
    color: var(--club-muted);
}

/* --------------------------------------------------------------------- Listen */

:where(.ce_text, .content-text, .rte, .ce_list, .content-list) :where(ul, ol) {
    margin-block: 0 var(--club-space-4);
    padding-left: var(--club-space-5);
}

:where(.ce_text, .content-text, .rte, .ce_list, .content-list) :where(ul) {
    list-style: disc;
}

:where(.ce_text, .content-text, .rte, .ce_list, .content-list) :where(ol) {
    list-style: decimal;
}

:where(.ce_text, .content-text, .rte, .ce_list, .content-list) :where(li) {
    margin-bottom: var(--club-space-2);
    line-height: var(--club-line);
}

/* Verschachtelte Listen enger und ohne doppelten Abstand. */
:where(.ce_text, .content-text, .rte, .ce_list, .content-list) :where(li > ul, li > ol) {
    margin-block: var(--club-space-2) 0;
}

/* Definitionslisten */
:where(.ce_description_list, .content-description-list) :where(dt) {
    font-weight: 600;
    margin-top: var(--club-space-3);
}

:where(.ce_description_list, .content-description-list) :where(dd) {
    margin: 0 0 var(--club-space-2);
    color: var(--club-muted);
}

/* -------------------------------------------------------------------- Zitate */

:where(.ce_text, .content-text, .rte) :where(blockquote) {
    margin: var(--club-space-5) 0;
    padding: var(--club-space-2) 0 var(--club-space-2) var(--club-space-4);
    border-left: 3px solid var(--club-link);
    color: var(--club-muted);
    font-style: italic;
}

:where(.ce_text, .content-text, .rte) :where(blockquote > :last-child) {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------ Tabellen */

:where(.ce_table, .content-table) :where(table) {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
}

:where(.ce_table, .content-table) :where(th, td) {
    padding: var(--club-space-2) var(--club-space-3);
    border-bottom: 1px solid var(--club-border);
    text-align: left;
    vertical-align: top;
}

:where(.ce_table, .content-table) :where(thead th) {
    background: var(--club-surface);
    font-weight: 600;
}

:where(.ce_table, .content-table) :where(tbody tr:hover) {
    background: color-mix(in srgb, var(--club-surface) 60%, transparent);
}

/* Breite Tabellen sollen scrollen statt das Layout zu sprengen. */
:where(.ce_table, .content-table) {
    overflow-x: auto;
}

/* ------------------------------------------------------------ Bilder & Figuren */

:where(figure, .image_container) :where(img) {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--club-radius);
}

:where(figure) {
    margin: 0;
}

:where(figcaption, .caption) {
    margin-top: var(--club-space-2);
    color: var(--club-muted);
    font-size: 0.9em;
    line-height: 1.45;
}

/* Text umfließt Bilder mit Abstand statt zu kleben. */
:where(.float_left) {
    float: left;
    margin: 0 var(--club-space-4) var(--club-space-3) 0;
    max-width: 50%;
}

:where(.float_right) {
    float: right;
    margin: 0 0 var(--club-space-3) var(--club-space-4);
    max-width: 50%;
}

:where(.ce_text::after, .content-text::after) {
    content: '';
    display: table;
    clear: both;
}

/* --------------------------------------------------------------- Downloads */

:where(.ce_download, .ce_downloads, .content-downloads) :where(ul) {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

:where(.ce_download, .ce_downloads, .content-downloads) :where(li) {
    margin-bottom: var(--club-space-2);
}

:where(.ce_download, .ce_downloads, .content-downloads) :where(a) {
    display: inline-flex;
    align-items: center;
    gap: var(--club-space-2);
    padding: var(--club-space-2) var(--club-space-3);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    text-decoration: none;
    color: var(--club-text);
}

:where(.ce_download, .ce_downloads, .content-downloads) :where(a:hover) {
    border-color: var(--club-link);
    color: var(--club-link);
}

:where(.ce_download, .ce_downloads, .content-downloads) :where(.size) {
    color: var(--club-muted);
    font-size: 0.85em;
}

/* ------------------------------------------------------------------ Sonstiges */

:where(.ce_hyperlink, .content-hyperlink) :where(a) {
    color: var(--club-link);
}

:where(hr) {
    border: 0;
    border-top: 1px solid var(--club-border);
    margin: var(--club-space-6) 0;
}

:where(.ce_code, .content-code) :where(pre) {
    overflow-x: auto;
    padding: var(--club-space-4);
    background: var(--club-surface);
    border-radius: var(--club-radius);
    font-size: 0.9em;
    line-height: 1.5;
}

:where(code) {
    font-size: 0.92em;
}

/* Akkordeon (Core-Element) – nur das Nötigste, damit es bedienbar aussieht. */
:where(.content-accordion) :where(.handorgel__header__button) {
    width: 100%;
    text-align: left;
    padding: var(--club-space-3) var(--club-space-4);
    background: var(--club-surface);
    border: 0;
    border-radius: var(--club-radius);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
}

:where(.content-accordion) :where(.handorgel__content__inner) {
    padding: var(--club-space-4);
}

/* --------------------------------------------------------------- Formulare */

:where(.ce_form, .content-form) :where(.widget) {
    margin-bottom: var(--club-space-4);
}

:where(.ce_form, .content-form) :where(label) {
    display: block;
    margin-bottom: var(--club-space-1);
    font-weight: 600;
}

:where(.ce_form, .content-form) :where(input[type="text"], input[type="email"],
    input[type="tel"], input[type="url"], input[type="number"], input[type="date"],
    input[type="password"], select, textarea) {
    width: 100%;
    padding: var(--club-space-2) var(--club-space-3);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    background: #fff;
    font: inherit;
    color: var(--club-text);
}

:where(.ce_form, .content-form) :where(textarea) {
    min-height: 8rem;
    resize: vertical;
}

:where(.ce_form, .content-form) :where(.mandatory .invisible) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

:where(.ce_form, .content-form) :where(p.error) {
    margin: var(--club-space-1) 0 0;
    color: #b91c1c;
    font-size: 0.9em;
}

:where(.ce_form, .content-form) :where(.checkbox_container, .radio_container) :where(label) {
    display: inline-flex;
    align-items: baseline;
    gap: var(--club-space-2);
    font-weight: 400;
}

/* ---------------------------------------------------------- Barrierefreiheit */

:where(.invisible) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    :where(*) {
        scroll-behavior: auto;
    }
}

/*
 * Artikel-Layout-Einstellungen (Breite, Abstände, Hintergrund, Vollbild, Overlay).
 *
 * Die Werte kommen als Custom-Properties vom ArticleLayoutListener; hier stehen
 * nur die Regeln. Bewusst OHNE :where(), damit die gewählten Einstellungen
 * gegenüber allgemeinen Theme-Regeln auch greifen – es sind ja explizite
 * Redakteurs-Entscheidungen.
 */

.club-article {
    position: relative;
}

/* ------------------------------------------------------------------ Breite
 *
 * Wichtig: Der Artikel selbst bleibt IMMER über die volle Breite – nur so
 * reichen Hintergrundfarbe und -bild bis zum Bildschirmrand. Begrenzt wird
 * der INHALT (die direkten Kindelemente).
 *
 *   Standard    – keine Klasse, das Theme bestimmt alles wie bisher
 *   Volle Breite – Inhalt geht bis zum Rand
 *   Zentriert    – Inhalt mittig begrenzt, Hintergrund bis zum Rand
 *   Schmal       – wie zentriert, nur schmaler (Lesebreite)
 */

.club-article.club-w-full,
.club-article.club-w-boxed,
.club-article.club-w-narrow {
    width: 100%;
    max-width: none;
    margin-inline: 0;
}

.club-article.club-w-full > * {
    max-width: none;
    margin-inline: 0;
}

.club-article.club-w-boxed > * {
    max-width: var(--club-a-boxed, var(--container-width, 1200px));
    margin-inline: auto;
    padding-inline: var(--club-a-gutter, var(--space-4, 1rem));
}

.club-article.club-w-narrow > * {
    max-width: var(--club-a-narrow, 780px);
    margin-inline: auto;
    padding-inline: var(--club-a-gutter, var(--space-4, 1rem));
}

/* Das Overlay-Pseudoelement darf nicht mitbegrenzt werden. */
.club-article.club-w-boxed::before,
.club-article.club-w-narrow::before {
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
}

/* ------------------------------------------------------------------ Abstände */

.club-article.club-pt-none { padding-top: 0; }
.club-article.club-pt-sm { padding-top: var(--club-a-pt-sm, 1rem); }
.club-article.club-pt-md { padding-top: var(--club-a-pt-md, 2rem); }
.club-article.club-pt-lg { padding-top: var(--club-a-pt-lg, 4rem); }
.club-article.club-pt-xl { padding-top: var(--club-a-pt-xl, 6rem); }

.club-article.club-pb-none { padding-bottom: 0; }
.club-article.club-pb-sm { padding-bottom: var(--club-a-pb-sm, 1rem); }
.club-article.club-pb-md { padding-bottom: var(--club-a-pb-md, 2rem); }
.club-article.club-pb-lg { padding-bottom: var(--club-a-pb-lg, 4rem); }
.club-article.club-pb-xl { padding-bottom: var(--club-a-pb-xl, 6rem); }

/* --------------------------------------------------------------- Hintergrund */

.club-article.club-has-bg {
    background-color: var(--club-a-bg);
}

.club-article.club-has-bg-image {
    background-image: var(--club-a-bg-image);
    background-position: var(--club-a-bg-position, center center);
    background-repeat: var(--club-a-bg-repeat, no-repeat);
    background-size: var(--club-a-bg-size, cover);
}

/* Vordefinierte Hintergrundfarben (nutzen die Theme-Tokens, wenn vorhanden). */
.club-article.club-bg-primary { background-color: var(--color-primary, #0f766e); }
.club-article.club-bg-accent { background-color: var(--color-accent, #e08a2e); }
.club-article.club-bg-surface { background-color: var(--color-surface, #f5f7f6); }
.club-article.club-bg-dark { background-color: var(--color-dark, #1c2b28); }

/* -------------------------------------------------------------- Textfarbe */

.club-article.club-text-light,
.club-article.club-text-light :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd) {
    color: var(--club-a-text-light, #fff);
}

.club-article.club-text-dark,
.club-article.club-text-dark :where(h1, h2, h3, h4, h5, h6, p, li, td, th, dt, dd) {
    color: var(--club-a-text-dark, #1c2b28);
}

/* --------------------------------------------------------------- Vollbild */

.club-article.club-fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* --club-a-offset setzt das Theme oder ein Skript (z. B. Headerhöhe). */
    min-height: calc(100svh - var(--club-a-offset, 0px));
}

/* Ältere Browser ohne svh-Einheit. */
@supports not (height: 100svh) {
    .club-article.club-fullscreen {
        min-height: calc(100vh - var(--club-a-offset, 0px));
    }
}

/* ---------------------------------------------------------------- Overlay */

.club-article.club-has-overlay::before {
    content: '';
    position: absolute;
    left: 0;
    width: var(--club-a-overlay-width, 100%);
    height: var(--club-a-overlay-height, 100%);
    background: var(--club-a-overlay, #000);
    opacity: var(--club-a-overlay-opacity, 0.4);
    pointer-events: none;
    z-index: 0;
}

.club-article.club-has-overlay.club-overlay-top::before { top: 0; }
.club-article.club-has-overlay.club-overlay-bottom::before { bottom: 0; }

.club-article.club-has-overlay.club-overlay-center::before {
    top: 50%;
    transform: translateY(-50%);
}

/* Ohne Positionsangabe deckt das Overlay den ganzen Artikel ab. */
.club-article.club-has-overlay:not(.club-overlay-top):not(.club-overlay-center):not(.club-overlay-bottom)::before {
    inset: 0;
    width: auto;
    height: auto;
}

/* Inhalte liegen über dem Overlay. */
.club-article.club-has-overlay > * {
    position: relative;
    z-index: 1;
}

/*
 * Element-Styles des Vereins-Bundles: Seitenkopf (club_page_header) und
 * Teams-Filterleiste (club_team_teaser).
 *
 * Wird vom AssetsListener automatisch geladen, damit die Elemente auch OHNE
 * installierte Theme-Dateien korrekt aussehen. Liegt die Datei (nach
 * "Theme-Dateien installieren") unter files/theme/, gewinnt diese Fassung –
 * dort ist sie im Backend-Dateimanager bearbeitbar.
 */

.page-header { position: relative; overflow: hidden; }
.page-header__inner { position: relative; z-index: 1; padding-block: var(--space-8, 3rem); }
.page-header--h-compact .page-header__inner { padding-block: var(--space-5, 1.5rem); }
.page-header--h-large .page-header__inner { padding-block: var(--space-9, 6rem); }
.page-header--center .page-header__inner { text-align: center; }
.page-header--center .page-header__subline { margin-inline: auto; }

.page-header__eyebrow { display: inline-block; margin-bottom: var(--space-2, .5rem); }
.page-header__title { margin: 0 0 var(--space-3, .75rem); line-height: 1.15; text-wrap: balance; }
.page-header__subline { max-width: 52ch; margin: 0; font-size: 1.06rem; line-height: 1.55; }

/* Variante: Farbfläche (Vereinsfarbe) */
.page-header--color { background: var(--color-primary, #0f766e); }
.page-header--color .page-header__title { color: #fff; }
.page-header--color .page-header__subline { color: rgba(255, 255, 255, .85); }
.page-header--color .page-header__eyebrow { color: var(--color-accent, #e08a2e); }

/* Variante: Hintergrundbild + Overlay */
.page-header--image { background: var(--color-dark, #1c2b28); }
.page-header--image .page-header__bg,
.page-header--image .page-header__bg picture,
.page-header--image .page-header__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-header--image .page-header__bg img { object-fit: cover; }
.page-header__overlay { position: absolute; inset: 0; background: var(--color-dark, #10201c); }
.page-header--image .page-header__title { color: #fff; }
.page-header--image .page-header__subline { color: rgba(255, 255, 255, .88); }
.page-header--image .page-header__eyebrow { color: var(--color-accent, #e08a2e); }

/* Variante: Kompakt (hell) */
.page-header--compact { background: var(--color-surface, #f5f7f6); border-bottom: 1px solid var(--color-border, #dde5e2); }
.page-header--compact .page-header__title { color: var(--color-text, #1c2b28); }
.page-header--compact .page-header__subline { color: var(--color-text-muted, #56655f); }
.page-header--compact .page-header__eyebrow { color: var(--color-primary, #0f766e); }

/* Brotkrümel */
.page-header__crumbs { margin-top: var(--space-4, 1rem); font-size: .88rem; }
.page-header__crumbs ol { display: flex; flex-wrap: wrap; gap: .35em; list-style: none; margin: 0; padding: 0; }
.page-header__crumbs li + li::before { content: '›'; margin-right: .35em; opacity: .55; }
.page-header--color .page-header__crumbs, .page-header--image .page-header__crumbs { color: rgba(255, 255, 255, .7); }
.page-header--color .page-header__crumbs a, .page-header--image .page-header__crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.page-header--color .page-header__crumbs a:hover, .page-header--image .page-header__crumbs a:hover { color: #fff; text-decoration: underline; }
.page-header--color .page-header__crumbs [aria-current], .page-header--image .page-header__crumbs [aria-current] { color: #fff; }
.page-header--compact .page-header__crumbs { color: var(--color-text-muted, #56655f); }
.page-header--compact .page-header__crumbs a { color: var(--color-primary, #0f766e); text-decoration: none; }


.team-filter {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: var(--space-6, 2rem);
}
.team-filter__btn {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border, #dde5e2); background: #fff;
  color: var(--color-text-muted, #56655f);
  font: inherit; font-size: var(--fs-sm, .9rem); font-weight: var(--fw-medium, 500);
}
.team-filter__btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-primary, #0f766e); }
.team-filter__btn.is-active {
  background: var(--color-primary, #0f766e); border-color: var(--color-primary, #0f766e); color: #fff;
}

/* Ausgefilterte Karten wirklich ausblenden.
   ⚠ Das hidden-Attribut setzt nur display:none mit Spezifität 0 – jede eigene
   display-Regel (hier .card{display:flex}) gewinnt dagegen. Deshalb explizit. */
.card[hidden],
[data-abteilung][hidden] { display: none !important; }

/*
 * Element-Styles des Vereins-Bundles: Seitenkopf (club_page_header) und
 * Teams-Filterleiste (club_team_teaser).
 *
 * Wird vom AssetsListener automatisch geladen, damit die Elemente auch OHNE
 * installierte Theme-Dateien korrekt aussehen. Liegt die Datei (nach
 * "Theme-Dateien installieren") unter files/theme/, gewinnt diese Fassung –
 * dort ist sie im Backend-Dateimanager bearbeitbar.
 */

.page-header { position: relative; overflow: hidden; }
.page-header__inner { position: relative; z-index: 1; padding-block: var(--space-8, 3rem); }
.page-header--h-compact .page-header__inner { padding-block: var(--space-5, 1.5rem); }
.page-header--h-large .page-header__inner { padding-block: var(--space-9, 6rem); }
.page-header--center .page-header__inner { text-align: center; }
.page-header--center .page-header__subline { margin-inline: auto; }

.page-header__eyebrow { display: inline-block; margin-bottom: var(--space-2, .5rem); }
.page-header__title { margin: 0 0 var(--space-3, .75rem); line-height: 1.15; text-wrap: balance; }
.page-header__subline { max-width: 52ch; margin: 0; font-size: 1.06rem; line-height: 1.55; }

/* Variante: Farbfläche (Vereinsfarbe) */
.page-header--color { background: var(--color-primary, #0f766e); }
.page-header--color .page-header__title { color: #fff; }
.page-header--color .page-header__subline { color: rgba(255, 255, 255, .85); }
.page-header--color .page-header__eyebrow { color: var(--color-accent, #e08a2e); }

/* Variante: Hintergrundbild + Overlay */
.page-header--image { background: var(--color-dark, #1c2b28); }
.page-header--image .page-header__bg,
.page-header--image .page-header__bg picture,
.page-header--image .page-header__bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.page-header--image .page-header__bg img { object-fit: cover; }
.page-header__overlay { position: absolute; inset: 0; background: var(--color-dark, #10201c); }
.page-header--image .page-header__title { color: #fff; }
.page-header--image .page-header__subline { color: rgba(255, 255, 255, .88); }
.page-header--image .page-header__eyebrow { color: var(--color-accent, #e08a2e); }

/* Variante: Kompakt (hell) */
.page-header--compact { background: var(--color-surface, #f5f7f6); border-bottom: 1px solid var(--color-border, #dde5e2); }
.page-header--compact .page-header__title { color: var(--color-text, #1c2b28); }
.page-header--compact .page-header__subline { color: var(--color-text-muted, #56655f); }
.page-header--compact .page-header__eyebrow { color: var(--color-primary, #0f766e); }

/* Brotkrümel */
.page-header__crumbs { margin-top: var(--space-4, 1rem); font-size: .88rem; }
.page-header__crumbs ol { display: flex; flex-wrap: wrap; gap: .35em; list-style: none; margin: 0; padding: 0; }
.page-header__crumbs li + li::before { content: '›'; margin-right: .35em; opacity: .55; }
.page-header--color .page-header__crumbs, .page-header--image .page-header__crumbs { color: rgba(255, 255, 255, .7); }
.page-header--color .page-header__crumbs a, .page-header--image .page-header__crumbs a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.page-header--color .page-header__crumbs a:hover, .page-header--image .page-header__crumbs a:hover { color: #fff; text-decoration: underline; }
.page-header--color .page-header__crumbs [aria-current], .page-header--image .page-header__crumbs [aria-current] { color: #fff; }
.page-header--compact .page-header__crumbs { color: var(--color-text-muted, #56655f); }
.page-header--compact .page-header__crumbs a { color: var(--color-primary, #0f766e); text-decoration: none; }


.team-filter {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-bottom: var(--space-6, 2rem);
}
.team-filter__btn {
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border, #dde5e2); background: #fff;
  color: var(--color-text-muted, #56655f);
  font: inherit; font-size: var(--fs-sm, .9rem); font-weight: var(--fw-medium, 500);
}
.team-filter__btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-primary, #0f766e); }
.team-filter__btn.is-active {
  background: var(--color-primary, #0f766e); border-color: var(--color-primary, #0f766e); color: #fff;
}

/*
 * Buchung & Angebote — Grundlayout (Default-CSS der Extension).
 * Nutzt die Theme-Design-Tokens (--color-*, --space-* …) mit Fallbacks, damit die
 * Inhaltselemente auch OHNE Theme sauber aussehen. Das Projekt-Theme kann jede Regel
 * überschreiben (z. B. in public/theme/css/components.css).
 */

.angebot-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5, 32px); }
.angebot-filter__btn { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: .15s; }
.angebot-filter__btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-text, #1c2b28); }
.angebot-filter__btn.is-active { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.angebot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 32px); }
@media (max-width: 900px) { .angebot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .angebot-grid { grid-template-columns: 1fr; } }
.angebot { display: flex; flex-direction: column; background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); overflow: hidden; transition: .16s; }
.angebot:hover { box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); transform: translateY(-3px); }
.angebot--highlight { border-color: var(--color-accent, #e08a2e); box-shadow: 0 0 0 1px var(--color-accent, #e08a2e); }
.angebot__media { position: relative; aspect-ratio: 3/2; }
.angebot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.angebot__cat { position: absolute; top: 10px; left: 10px; background: var(--color-primary, #0f766e); color: #fff; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); padding: 4px 10px; border-radius: 8px; }
.angebot__body { display: flex; flex-direction: column; gap: var(--space-2, 8px); padding: var(--space-4, 24px); flex: 1; }
.angebot__title { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); margin: 0; }
.angebot__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__meta span { display: inline-block; min-width: 62px; color: var(--color-text-subtle, #85938d); }
.angebot__foot { margin-top: auto; padding-top: var(--space-3, 16px); }

/* Angebot: Interesse / Anmeldung / Zähler */
.angebot__signup { margin-top: auto; padding-top: var(--space-3, 16px); display: flex; flex-direction: column; gap: 8px; }
.angebot__free { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__free b { color: var(--color-text, #1c2b28); }
.angebot__meter-tx { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.angebot__meter-tx b { color: var(--color-accent, #e08a2e); }
.angebot__bar { height: 6px; border-radius: 999px; background: var(--color-surface-sunken, #e7edeb); overflow: hidden; margin-top: 4px; }
.angebot__bar i { display: block; height: 100%; background: var(--color-accent, #e08a2e); border-radius: 999px; transition: width .3s; }
.angebot__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.js-interest.is-done { color: var(--color-primary, #0f766e); border-color: var(--color-primary, #0f766e); }

/* Anmelde-Dialog */
.angebot-modal { position: fixed; inset: 0; background: rgba(20,28,25,.55); display: flex; align-items: center; justify-content: center; padding: var(--space-4, 24px); z-index: 100; }
.angebot-modal[hidden] { display: none; }
.angebot-modal__box { background: var(--color-surface, #ffffff); border-radius: var(--radius-lg, 16px); padding: var(--space-5, 32px); width: 100%; max-width: 460px; position: relative; box-shadow: 0 20px 60px rgba(0,0,0,.25); max-height: 90vh; overflow-y: auto; }
.angebot-modal__close { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: var(--color-text-muted, #56655f); cursor: pointer; }
.angebot-modal__h { margin: 0 0 4px; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); }
.angebot-modal__for { margin: 0 0 var(--space-3, 16px); }
.angebot-form .field { margin-bottom: var(--space-3, 16px); }
.angebot-form .field label { display: block; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); margin-bottom: 4px; }
.angebot-form .input { width: 100%; padding: 10px 12px; border: 1px solid var(--color-border, #dde5e2); border-radius: 8px; background: var(--color-surface, #ffffff); color: var(--color-text, #1c2b28); font: inherit; }
.angebot-form .input:focus { outline: 2px solid var(--color-primary, #0f766e); outline-offset: 1px; border-color: var(--color-primary, #0f766e); }
.angebot-consent { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); margin: 4px 0 var(--space-3, 16px); }
.angebot-form__msg { padding: 10px 12px; border-radius: 8px; font-size: var(--fs-caption, 0.8125rem); margin-bottom: var(--space-3, 16px); }
.angebot-form__msg.is-ok { background: color-mix(in srgb, #16a34a 14%, var(--color-surface, #ffffff)); color: #15803d; }
.angebot-form__msg.is-error { background: color-mix(in srgb, #dc2626 12%, var(--color-surface, #ffffff)); color: #dc2626; }
.angebot-form__msg.is-warn { background: color-mix(in srgb, #e08a2e 16%, var(--color-surface, #ffffff)); color: #b45309; }
.angebot-form__pay { margin: 0 0 var(--space-3, 16px); }

/* Anmeldung/Buchung im Termin-Reader */
.event-booking { margin-top: var(--space-6, 48px); padding: var(--space-5, 32px); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); background: var(--color-surface-alt, #eef3f1); }
.event-booking__h { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.2rem; margin: 0 0 var(--space-2, 8px); }
.event-booking__info { color: var(--color-text-muted, #56655f); margin: 0 0 var(--space-3, 16px); }
.event-booking__status { font-size: 1rem; color: var(--color-text, #1c2b28); margin: 0 0 var(--space-4, 24px); }
.event-booking__form { max-width: 560px; }
.event-booking .beleg-pair { margin-bottom: 12px; }
.event-booking__flash { margin-bottom: var(--space-4, 24px); }

/* Rücksprung-Banner nach der PayPal-Zahlung */
.angebot-flash { padding: 14px 18px; border-radius: 12px; font-weight: 600; margin-bottom: var(--space-4, 24px); border: 1px solid transparent; }
.angebot-flash.is-ok { background: color-mix(in srgb, #16a34a 12%, var(--color-surface, #ffffff)); color: #15803d; border-color: color-mix(in srgb, #16a34a 35%, transparent); }
.angebot-flash.is-info { background: color-mix(in srgb, var(--color-primary, #0f766e) 10%, var(--color-surface, #ffffff)); color: var(--color-primary, #0f766e); border-color: color-mix(in srgb, var(--color-primary, #0f766e) 30%, transparent); }
.angebot-flash.is-error { background: color-mix(in srgb, #dc2626 10%, var(--color-surface, #ffffff)); color: #dc2626; border-color: color-mix(in srgb, #dc2626 30%, transparent); }

/* ===== Belegungsplan (Wochenraster) ===== */
.belegung__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-4, 24px); }
.belegung__tab { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; padding: 7px 16px; cursor: pointer; transition: .15s; }
.belegung__tab:hover { border-color: var(--color-primary, #0f766e); color: var(--color-text, #1c2b28); }
.belegung__tab.is-active { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.belegung__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.belegung__grid { display: grid; grid-template-columns: 52px repeat(7, minmax(84px, 1fr)); min-width: 640px; border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); overflow: hidden; background: var(--color-surface, #ffffff); }
.bg-col { border-left: 1px solid var(--color-border, #dde5e2); }
.bg-hline { border-top: 1px solid var(--color-border, #dde5e2); pointer-events: none; }
.bg-day { display: flex; align-items: center; justify-content: center; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); background: var(--color-surface-alt, #eef3f1); border-left: 1px solid var(--color-border, #dde5e2); border-bottom: 1px solid var(--color-border-strong, #c4d0cb); z-index: 3; }
.bg-hour { display: flex; align-items: flex-start; justify-content: flex-end; padding-right: 6px; font-size: 11px; color: var(--color-text-subtle, #85938d); transform: translateY(-7px); z-index: 3; }
.bg-block { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 5px; margin: 1px 2px; padding: 2px 6px; overflow: hidden; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.bg-block b { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: 12px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-block span { font-size: 10.5px; color: var(--color-text-muted, #56655f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.belegung__head { display: flex; align-items: center; gap: var(--space-4, 24px); margin-bottom: var(--space-4, 24px); flex-wrap: wrap; }
.belegung__foto { width: 96px; height: 62px; border-radius: var(--radius-lg, 16px); overflow: hidden; flex: 0 0 auto; border: 1px solid var(--color-border, #dde5e2); }
.belegung__foto img { width: 100%; height: 100%; object-fit: cover; }
.belegung__headinfo { flex: 1; min-width: 140px; }
.belegung__headinfo strong { display: block; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.1rem; }
.belegung__headinfo span { font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.beleg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .beleg-pair { grid-template-columns: 1fr; } }

/* Selbstbuchung (club_buchung) */
.buchung__controls { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4, 24px); max-width: 640px; margin-bottom: var(--space-4, 24px); }
@media (max-width: 520px) { .buchung__controls { grid-template-columns: 1fr; } }
.buchung__flash { margin-bottom: var(--space-4, 24px); }
.buchung__slots { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var(--space-2, 8px); }
.buchung__slot { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--color-primary, #0f766e) 8%, var(--color-surface, #ffffff)); border: 1px solid color-mix(in srgb, var(--color-primary, #0f766e) 35%, transparent); border-radius: 10px; padding: 10px 16px; cursor: pointer; transition: .15s; }
.buchung__slot:hover { background: var(--color-primary, #0f766e); color: #fff; border-color: var(--color-primary, #0f766e); }
.buchung__mine-box { padding: var(--space-4, 24px); border: 1px solid var(--color-border, #dde5e2); border-radius: var(--radius-lg, 16px); background: var(--color-surface-alt, #eef3f1); margin-bottom: var(--space-5, 32px); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.buchung__mine-box strong { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); }
.buchung__mine-note { color: var(--color-text-muted, #56655f); margin: 0; }
.bg-day.is-today { background: color-mix(in srgb, var(--color-primary, #0f766e) 16%, var(--color-surface-alt, #eef3f1)); color: var(--color-primary, #0f766e); }
/* Aus einer bestätigten Belegungsanfrage entstandene Belegung (gestrichelter Rand) */
.bg-block.is-booked, .cal-chip.is-booked, .cal-mchip.is-booked { border-left-style: dashed; border-left-width: 3px; }

/* ===== Belegungs-Kalender (Woche / Monat / Jahr) ===== */
.cal-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 16px); margin-bottom: var(--space-4, 24px); }
.cal-views { display: inline-flex; border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; overflow: hidden; }
.cal-view { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); background: var(--color-surface, #ffffff); border: 0; padding: 7px 16px; cursor: pointer; transition: .15s; }
.cal-view:hover { color: var(--color-text, #1c2b28); }
.cal-view.is-active { background: var(--color-primary, #0f766e); color: #fff; }
.cal-nav { display: inline-flex; align-items: center; gap: 6px; }
.cal-btn { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text, #1c2b28); background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, #dde5e2); border-radius: 999px; min-width: 34px; padding: 6px 12px; cursor: pointer; line-height: 1; transition: .15s; }
.cal-btn:hover { border-color: var(--color-primary, #0f766e); color: var(--color-primary, #0f766e); }
.cal-label { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-size: 1.05rem; margin-left: auto; }

/* Ganztägig-Leiste über dem Wochenraster */
.cal-allday { display: grid; min-width: 640px; border: 1px solid var(--color-border, #dde5e2); border-bottom: 0; border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; background: var(--color-surface, #ffffff); }
.cal-allday__lbl { grid-column: 1; display: flex; align-items: center; justify-content: flex-end; padding: 6px 6px; font-size: 10.5px; color: var(--color-text-subtle, #85938d); }
.cal-allday__day { border-left: 1px solid var(--color-border, #dde5e2); padding: 5px 4px; display: flex; flex-direction: column; gap: 3px; }
.cal-chip { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 5px; padding: 2px 6px; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-allday + .belegung__grid { border-radius: 0 0 var(--radius-lg, 16px) var(--radius-lg, 16px); }

/* Monatsansicht */
.cal-month__head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-month__head > div { text-align: center; font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); color: var(--color-text-muted, #56655f); }
.cal-month__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mday { min-height: 84px; border: 1px solid var(--color-border, #dde5e2); border-radius: 8px; background: var(--color-surface, #ffffff); padding: 4px; display: flex; flex-direction: column; gap: 2px; cursor: pointer; transition: .12s; }
.cal-mday:hover { border-color: var(--color-primary, #0f766e); }
.cal-mday.is-out { background: var(--color-surface-alt, #eef3f1); opacity: .5; }
.cal-mday.is-today { border-color: var(--color-primary, #0f766e); box-shadow: inset 0 0 0 1px var(--color-primary, #0f766e); }
.cal-mday__n { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: 12px; align-self: flex-end; color: var(--color-text-muted, #56655f); }
.cal-mday.is-today .cal-mday__n { color: var(--color-primary, #0f766e); }
.cal-mchip { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 15%, var(--color-surface, #ffffff)); border-left: 3px solid var(--bg-block); border-radius: 4px; padding: 1px 5px; font-size: 10.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--color-text-subtle, #85938d); padding-left: 4px; }
@media (max-width: 560px) { .cal-mday { min-height: 58px; } .cal-mchip { font-size: 9.5px; padding: 1px 3px; } }

/* Jahresansicht */
.cal-year { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3, 16px); }
.cal-ym { border: 1px solid var(--color-border, #dde5e2); border-radius: 10px; background: var(--color-surface, #ffffff); padding: 10px; cursor: pointer; transition: .12s; }
.cal-ym:hover { border-color: var(--color-primary, #0f766e); }
.cal-ym__h { font-family: var(--font-heading, "Plus Jakarta Sans", system-ui, sans-serif); font-weight: 700; font-size: var(--fs-caption, 0.8125rem); margin-bottom: 6px; text-align: center; }
.cal-ym__g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-ym__dow { text-align: center; font-size: 9px; color: var(--color-text-subtle, #85938d); }
.cal-ym__d { text-align: center; font-size: 10px; padding: 2px 0; border-radius: 4px; color: var(--color-text-muted, #56655f); }
.cal-ym__d.is-out { color: transparent; }
.cal-ym__d.has { --bg-block: var(--color-primary, #0f766e); background: color-mix(in srgb, var(--bg-block) 26%, var(--color-surface, #ffffff)); color: var(--color-text, #1c2b28); font-weight: 700; }
.cal-ym__d.is-today { outline: 2px solid var(--color-primary, #0f766e); outline-offset: -2px; color: var(--color-primary, #0f766e); font-weight: 700; }

/* Check-in (QR) auf der Selbstverwaltungsseite */
.buchung__qr { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0; text-align: center; }
.buchung__qr img { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.buchung__checkedin { display: inline-block; margin: 10px 0; padding: 8px 14px; border-radius: 999px; font-weight: 600; background: var(--color-success-soft, #d1fae5); color: var(--color-success, #047857); }