.infographic {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100% !important;
    min-height: fit-content;
    background-image: url('/fileadmin/templates/images/background-map.png');
    background-repeat: no-repeat;
    margin: 29px auto 12px auto !important;
    padding: 40px 0;
    overflow-x: hidden;
}

.infographic .infographic-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.infographic .bottom {
    margin-top: 30px;
}

.infographic. legend {
    max-width: 451px;
}

.infographic.three-js-model {
    justify-content: flex-end;
    background-size: 100% 100%;
}

.infographic .imagedescription-big {
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
}

.infographic .imagedescription-big p {
    width: 100%;
}

.infographic img {
    width: 100%;
    height: auto;
}

.infographic.ludgerusburg img{
    width: 587px;
}

.infographic ul {
    display: flex;
    row-gap: 18px;
    padding: 0;
    margin-top: 13px;
}

.infographic.legend ul {
    flex-direction: column;
}

.infographic ul li {
    list-style-type: none;
    box-sizing: border-box;
}

.infographic ul li .number, .infographic ul li .map-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    box-sizing: border-box;
    background-color: transparent;
}

.infographic ul li .number {
    border: 2px solid black;
    border-radius: 100%;
    background-color: white;
}

.infographic ul li .map-legend img {
    min-width: auto;
    height: 100%;
}

.infographic ul li {
    display: flex;
    align-items: center;
    column-gap: 10px;
}

.infographic ul li .number p, .infographic ul li .map-legend p {
    width: fit-content;
}

.infographic ul li p {
  font-family: 'oxygen-regular', Verdana, sans-serif;
  font-size: 16px;
  font-weight: 500;
  width: 100%;
}

.infographic .audiofile-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 0 30px 0 !important;
}

.infographic .mapimage {
  width: 100%;
  height: 100%;
  position: relative;
}

.infographic .mapimage .clickable-point {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  width: 22px;
  height: 23px;
  background-color: white;
  border: 1px solid black;
  cursor: pointer;
  position: absolute;
  border-radius: 100%;
}

.infographic .mapimage .clickable-point.clicked {
  font-family: 'oxygen-regular', Verdana, sans-serif;
  background-color: red;
}

.infographic .mapimage .clickable-point p {
  color: black;
}

.infographic .mapimage .clickable-point.clicked p {
  color: white;
}

.infographic .mapimage .clickable-point:nth-child(2) {
  left: calc(23200%/375);
  top: calc(28600%/369);
}

.infographic .mapimage .clickable-point:nth-child(3) {
  left: calc(22000%/369);
  top: calc(22300%/375);
}

.infographic .mapimage .clickable-point:nth-child(4) {
  left: calc(18600%/375);
  top: calc(19619%/369);
}

.infographic .mapimage .clickable-point:nth-child(5) {
  left: calc(31000%/375);
  top: calc(21869%/369);
}

.infographic .mapimage .clickable-point:nth-child(6) {
  left: calc(32600%/375);
  top: calc(10567%/369);
}

.infographic .mapimage .clickable-point:nth-child(7) {
  left: calc(27700%/375);
  top: calc(13677%/369);
}

.infographic .mapimage .clickable-point:nth-child(8) {
  left: calc(16000%/375);
  top: calc(5337%/369);
}

.infographic .mapimage .clickable-point:nth-child(9) {
  left: calc(11200%/375);
  top: calc(9442%/369);
}

.infographic .mapimage .clickable-point:nth-child(10) {
  left: calc(6000%/375);
  top: calc(15755%/375);
}

.infographic .mapimage .clickable-point:nth-child(11) {
  left: calc(8300%/375);
  top: calc(27700%/369);
}

.infographic .explanationtext {
  margin-top: 8px;
}

.infographic .explanationtext p {
  text-align: center;
}

.infographic .slider {
  background-image: none !important;
}

.infographic .slider .slider-inner {
  padding-top: 0 !important;
}

.infographic .slider .slider-controls img {
  min-width: 100%;
}

.textblock.infographic .imagedescription {
  width: 100%;
}

.textblock.infographic.wege .top {
  width: 100%;
  max-width: 375px;
}

.textblock.infographic.wege .slider .slide-image {
  max-width: 100%;
}

.textblock.infographic.wege ul {
  flex-direction: row;
  margin: 0 0 10px 0;
}

.textblock.infographic.wege ul li {
  width: fit-content;
  max-width: 302px;
}

.textblock.infographic.eisenbahn .mapimage {
  max-width: 550px;
}

.textblock.infographic.eisenbahn ul {
  width: 100%;
}

.textblock.infographic.eisenbahn ul li {
  padding: 0;
}

.textblock.infographic.eisenbahn ul li img {
  width: 2px;
}

.textblock.infographic.eisenbahn ul li:last-child p {
  font-size: 16px;
  font-weight: normal;
}

.textblock.infographic.eisenbahn.spaeter {
  background-image: none !important;
}

.textblock.infographic.eisenbahn.spaeter ul li:last-child p {
  text-align: left;
}

.textblock.umgestaltung-erster-block img {
  min-width: 100%;
}

.textblock.infographic.umgestaltung .mapimage {
  max-width: 378px;
}

.textblock.infographic.umgestaltung.kriege .mapimage {
  max-width: 100%;
}

.textblock.infographic.umgestaltung ul {
  flex-direction: column;
}

.textblock.infographic.umgestaltung ul li {
  width: 100%;
}

.textblock.infographic.umgestaltung ul li .imgcont {
  display: flex;
  justify-content: center;
  width: 35px;
  height: fit-content;
}

.red-square, .white-square {
  width: 20px;
  height: 20px;
  margin-right: 18px;
}

.red-square {
  background-color: #E6382D;
}

.white-square {
  background-color: #FFFFFF;
}

p.country {
  width: 35px !important;
}

.textblock.infographic .mapimageheadline {
    width: fit-content;
    margin: 0 auto 10px auto;
    text-align: center;
}

.infographic .audiofile-player {
  margin: 4px 0 30px 0 !important;
}

.infographic.video {
  margin: 0px auto 12px auto !important;
}

.infographic.video .infographic-inner {
  position: relative;
  width: 100%;
}

.infographic.video .video-block {
  display: flex;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}

.infographic.video .video-block video {
  min-width: 1139px;
}

.infographic.video .video-block .brown-boxes {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 1px);
  height: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
}

.infographic.video .videoinfo {
  width: 100%;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.infographic.video .videoinfo p {
  width: 100%;
  text-align: center;
}

.infographic.video .infographic-video-play, .infographic.video .infographic-video-pause {
  min-width: 35px;
  width: 35px;
  height: auto;
  position: absolute;
  bottom: -8%;
  left: 50%;
  transform: translateX(-50%);
}

.infographic.video .video-block .brown-boxes .brown-box {
  min-width: calc((100% - 375px)/2);
  height: 100%;
  background-color: #b59a76;
}

.infographic.alle-stationen .mapimage {
  position: relative;
}

.infographic.alle-stationen .mapimage a {
  width: calc(3200%/375);
  text-decoration: none;
  height: calc(3200%/412);
  border-radius: 100%;
  position: absolute;
}

.infographic.alle-stationen .mapimage a[station-number="1"] {
  top: calc(32940%/375);
  left: calc(27500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="2"] {
  top: calc(25450%/375);
  left: calc(28500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="3"] {
  top: calc(22000%/375);
  left: calc(22540%/412);
}

.infographic.alle-stationen .mapimage a[station-number="4"] {
  top: calc(20000%/375);
  left: calc(17500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="5"] {
  top: calc(15500%/375);
  left: calc(37250%/412);
}

.infographic.alle-stationen .mapimage a[station-number="6"] {
  top: calc(11000%/375);
  left: calc(29500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="7"] {
  top: calc(750%/375);
  left: calc(26000%/412);
}

.infographic.alle-stationen .mapimage a[station-number="8"] {
  top: calc(6100%/375);
  left: calc(17500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="9"] {
  top: calc(3200%/375);
  left: calc(16500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="10"] {
  top: calc(8000%/375);
  left: calc(11500%/412);
}

.infographic.alle-stationen .mapimage a[station-number="11"] {
  top: calc(13900%/375);
  left: calc(3000%/412);
}

.infographic.alle-stationen .mapimage a[station-number="12"] {
  top: calc(18000%/375);
  left: calc(2600%/412);
}

.infographic.alle-stationen .mapimage a[station-number="13"] {
  top: calc(28500%/375);
  left: calc(9000%/412);
}

.infographic.alle-stationen .mapimage a[station-number="14"] {
  top: calc(29000%/375);
  left: calc(21250%/412);
}

.infographic.wege.damals {
  margin: -32px auto 12px auto !important;
}

@media only screen and (min-width: 320px) {
    .page-cont.attentat {
        width: 100%;
        max-width: 320px;
    }
  
    .infographic {
        justify-content: flex-start;
        background-size: 100% 100%;
    }

  
    .textblock.infographic.eisenbahn ul {
        padding-left: 15px;
    }

    .infographic.legend {
        justify-content: flex-start;
    }

    .infographic .infographic-inner {
        width: 100%;
        margin-top: 40px;
    }

    .infographic .infographic-inner:has(.brown-boxes) {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .infographic ul {
        flex-direction: column;
        width: fit-content;
    }

    .infographic ul li {
        padding: 0 0 0 15px;
    }

    .infographic.legend ul {
        align-self: center;
    }

    .infographic.legend ul li {
        width: 100%;
    }

    .infographic .slider {
      min-width: 320px;
    }

    .infographic .slides .slide .slide-image {
      background-color: transparent;
    }

    .textblock.infographic.wege .bottom .imagedescription {
      padding: 0 10px;
    }

    .textblock.infographic.wege {
      background-size: auto 100%;
    }

    .textblock.infographic.eisenbahn ul {
        flex-direction: column;
    }

    .textblock.infographic.umgestaltung .mapimage {
      max-width: 100%;
    }

    .textblock.infographic.umgestaltung .mapimageheadline {
      padding: 0 25px;
    }
  
    .infographic.white.video {
      margin: -141px auto 12px auto !important;
      position: relative;
      z-index: 0;
    }

    .infographic.ludgerusburg ul {
        align-self: flex-start;
    }

    .infographic .bottom.verkehrswege {
      max-width: 375px;
      align-items: center;
    }
}

@media only screen and (min-width: 768px) {    
    .infographic {
        justify-content: center;
    }
    
    .page-cont.attentat {
        max-width: 768px;
    }

    .page-cont.attentat .infographic.white {
        padding: 0;
    }

    .infographic .infographic-inner {
        width: 587px;
    }

    .infographic.legend {
        justify-content: center;
    }

    .infographic ul {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .infographic.legend .infographic-inner {
        max-width: 451px;
    }

    .infographic.legend ul {
        align-self: flex-start;
    }

    .infographic ul li {
        width: 50%;
        padding: 0 15px 0 0;
    }

    .infographic .slides .slide .slide-image {
      background-color: #87755B;
    }

    .textblock.infographic.wege .bottom .imagedescription {
      padding: 0;
    }

    .textblock.infographic.wege {
      background-size: 100% 100%;
    }

    .textblock.infographic.eisenbahn ul {
        flex-direction: row;
        justify-content: space-between;
        padding-left: 0px;
    }

    .textblock.infographic.eisenbahn.spaeter ul {
      flex-direction: column;
    }

    .textblock.infographic.eisenbahn.spaeter ul li {
      max-width: 100%;
    }

    .textblock.infographic.umgestaltung .mapimageheadline {
      padding-left: 0;
    }

    .infographic .mapimage .clickable-point {
      min-width: calc(22px*587/375);
      width: calc(22px*587/375);
      height: calc(23px*587/375);
    }

    .infographic .mapimage .clickable-point p {
      font-size: calc(16px*587/375);
    }

    .infographic .mapimage .clickable-point:nth-child(2) {
      left: calc(587/375*23200%/587);
      top: calc(58159/36900*28600%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(3) {
      left: calc(587/375*22000%/587);
      top: calc(58159/36900*22300%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(4) {
      left: calc(587/375*18600%/587);
      top: calc(58159/36900*19619%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(5) {
      left: calc(587/375*31000%/587);
      top: calc(58159/36900*21869%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(6) {
      left: calc(587/375*32600%/587);
      top: calc(58159/36900*10567%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(7) {
      left: calc(587/375*27700%/587);
      top: calc(58159/36900*13677%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(8) {
      left: calc(587/375*16000%/587);
      top: calc(58159/36900*5337%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(9) {
      left: calc(587/375*11200%/587);
      top: calc(58159/36900*9442%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(10) {
      left: calc(587/375*6000%/587);
      top: calc(58159/36900*15755%/578);
    }
    
    .infographic .mapimage .clickable-point:nth-child(11) {
      left: calc(587/375*8300%/587);
      top: calc(58159/36900*27700%/578);
    }
  
    .infographic.white.video .video-block {
      width: 1641px;
    }

    .infographic.ludgerusburg ul {
        align-self: center;
    }

    .infographic .bottom.verkehrswege {
      max-width: 550px;
      align-items: center;
    }
}