/**
 * Spezielles Layout für die Unterseiten zum Thema "Digitaler Zwilling Sennestadt"
 */
:root {
  /*--lila-hintergrund: #911e83;*/
  /*--lila-dunkel: #36003b; !* dunkle Schrift *!*/
  /*--lila-text: #871a7b; !* (z.B. pinker-text auf dunklem Hintergrund) *!*/
}


#content {
  /*background-color: var(--pink-m);*/
  --primary: var(--lila);
  --primary-d: var(--lila-d);
}
.contrast-mode #content {
  --pink: var(--hellgrau);
}

#content .layout .layout__region--main {
  background-color: inherit;
}

/*.contrast-mode .sidebar-box-red,*/
/*.contrast-mode .bg-lila {*/
/*  --pink: white;*/
/*}*/

.contrast-mode .sidebar-box-red .text-pink,
.contrast-mode .bg-lila .text-pink {
  color: var(--hellgrau) !important;
}

.block.bg-lila,
.text-inner.bg-lila,
#content .sidebar-box-red {
  /*border-radius: 2rem;*/
  /*box-shadow: 0.25rem 0.25rem 0.5rem var(--lila-d);*/
}

.sidebar-box-red,
.block.bg-lila, .text-inner.bg-lila {
  background-color: var(--lila-d);
}

/*#content img {*/
/*  border-radius: 2rem;*/
/*}*/
.generic-button {
  background-color: var(--pink);
}
.contrast-mode .sidebar-box-red .generic-button,
.contrast-mode .bg-lila .generic-button {
  background-color: var(--hellgrau);
  color: black;
}

.block .meta-subline {
  display: inline-block;
  border: 1px solid var(--pink);
  color: var(--pink);
  border-radius: 1.5rem;
  letter-spacing: initial;
  text-transform: inherit;
  padding: 0.5rem 1rem;
  font-size: inherit;
}
@media (min-width : 768px) {
  .block .meta-subline {
    float: right;
    margin: 1rem;
  }
}


.swiper .block .text-huge {
  position: absolute;
  font-size: 8rem;
  font-weight: bold;
  top: -0.25rem;
  line-height: 60%;
  z-index: -1;
  display: block;
  opacity: 0.5;
  left: 0.75rem;
}
.swiper .block h3 {
  font-size: 2.2rem;
}
.swiper .sidebar-box > .content > .without-picture,
.swiper.layout__region--main .sidebar-box div.text,
.swiper.layout__region--main .sidebar-box div.picture-bottom-text {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}


.swiper-timeline {
  --bs-primary: var(--lila);
  --primary-d: var(--lila-d);
  --swiper-timeline-line-color: white;
}
/*.contrast-mode .swiper-timeline {*/
/*  --primary-d: var(--hellgrau);*/
/*}*/
.swiper-timeline .block h3 {
  margin-top : 2.5rem;
}
.swiper-timeline .block .meta-subline {
  position: absolute;
  top: -2rem;
  background-color: white;
  color: var(--lila);
  width: 5rem;
  text-align: center;
  display: block;
  padding: 0.3rem;
  border-radius: 50%;
  aspect-ratio: 1/1;
  right: 1rem;
  align-content: center;
  text-transform: none;
  letter-spacing: initial;
  font-size: inherit;
  line-height: 120%;
  transform: rotate(-10deg);
}

.contrast-mode .swiper-timeline .swiper-slide {
  outline: 2px solid var(--hellgrau);
}
.contrast-mode .swiper-timeline .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: var(--hellgrau);
}
.contrast-mode .swiper-timeline .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet-active::after {
  border-color: var(--hellgrau);
}
.swiper-timeline .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  border-width: 0;
}