html{
background: #9CB5C2;
background: linear-gradient(180deg,rgba(156, 181, 194, 1) 10%, rgba(210, 220, 227, 1) 15%);
}
.topTitle{
        font-size: 1.9rem;
        margin-top: 6px;
}
.topbar{
    position: relative;
}
.navbar{
align-items: flex-start;
}
.navbar h1, .navbar h2{
    font-size: 1.9rem;
}
.exhibtitle{
    font-weight: 500;
    margin-top: 0;
    margin-bottom: 0;
    font-size: 1.9rem;
}
.walktitle{
    color: var(--keyvizf);
    font-weight: bold;
        margin-top: 0;
    margin-bottom: 0;
    font-weight: 100;
    font-size: 1.9rem;
    letter-spacing: normal;
}

.ausstellung{
    color: black;
    margin-bottom: 0;
    margin-top: 0;
    font-weight: 500;
    font-size: 1.9rem;
    
}
    .menuNlang{
        margin-top: 13px;
    }
.menuButton{
    display: block;
    margin: auto;
    margin-bottom: 0.8rem;
    padding: 0;
    margin-top: 0;
}
.langlink{
    display: block;
    margin: auto;
}
.topbar .langlink img{
    width: 5rem;
        display: block;
    margin: auto;
}
#content{
    padding: 0 7vw 0 7vw;
    margin-top: 4rem;
}
.aboutTxt{
    font-family: newsreader;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.4;
    width: 60vw;
    margin: auto;
    margin-bottom: 4rem;

}
.aboutTxt h1{
    font-family: funnelsans;
    color: var(--highlight);
}
.maptainer{
    padding: 0.7rem 2.5% 0 2.5%;
    background-color: var(--fontlight);
    margin-bottom: 4rem;
}
#mapLoader{
    width: 100%;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
.maploadingAnim{
    width: 8rem;
    height: 8rem;
    border-radius: 200px;
        background: linear-gradient(270deg, #ffe800 0%, rgba(255, 232, 0, 0.3) 25%,rgba(255, 232, 0, 0) 50%,rgba(255, 232, 0, 0.3) 75%, #ffe800 100%);
    background-size: 500% 500%;
  animation: spinaudio 1s linear infinite;
   -webkit-animation: mapLoadingGrad 10s ease infinite;
    -moz-animation: mapLoadingGrad 10s ease infinite;
    animation: mapLoadingGrad 10s ease infinite;
}

@-webkit-keyframes mapLoadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes mapLoadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes mapLoadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.mapTitle{
    font-weight: 600;
    margin-bottom: 0.5rem;
}
#map { 
    height: 80vh; 
    margin: auto;
    border: solid;
    width: 100%;
    background-color: #4e5b62;
    z-index: 1;
    border-color: var(--fontlight) !important;
}
.walkPin{
    z-index: 1000!important;
    transition-duration: 500ms;
}
.furtherPin{ 
    transition-duration: 500ms;
}
.leaflet-control-zoom {
    background: transparent;
    border-radius: 0px!important;
    border:none !important;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
    background: white;
font-size: 3rem !important;
border-width: 4px!important;
border: solid;
border-color:black;
border-bottom-color:  black!important;
margin-bottom: 0.5rem;
padding: 2px;
width: 35px!important;
height: 35px!important;

}
.leaflet-control-zoom-in span, .leaflet-control-zoom-out span{
font-family: 'funnelsans';
font-weight: 300;
position: relative;
left: -1.5px;
top:-2px;
}
.leaflet-control-zoom-out {
    margin-bottom: 0;
}
.leaflet-right{
 margin-right: 10px;
}
.leaflet-bottom{
 margin-bottom: 10px;
}
.leaflet-popup-content{
        margin: 3px!important;
        border-radius: 0;
        /*display: flex;*/
        align-items: center;
        width: auto !important;
        padding: 0.2rem;
        display: flex;
        justify-content: end;
  white-space: normal !important; 
  max-width: 1000px !important;   

}

.leaflet-popup-content-wrapper {
  width: 280px !important; /* or whatever fits your design */
}
.leaflet-popup-content{

}
.popup-content {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.6rem 0.4rem 0.6rem;
    background: var(--highlight)!important;
    color: var(--keyvizf)!important;
    justify-content: end;
    box-shadow: 0 3px 14px rgba(0,0,0,0.7);
    font-size: 1.4rem!important;
}
.subPop{
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
   
    padding: 0.6rem 1rem 0.3rem 0.6rem;
    background: var(--detailsC)!important;
    color: white!important;
    justify-content: end;
    box-shadow: 0 3px 14px rgba(0,0,0,0.7);
}
.subPop .popup-close{
    color: black;
}
.popupStreet{
    color: black;
    font-size: 1rem;
}
.doublePop{
    display: block;
    white-space: pre;
    color: var(--detailsA);
    margin-right: 0.5rem;
    line-height: 1.2;
}
.popup-title {
    line-height: 1.2em;
    
    white-space: normal;

    flex: 1 1 auto;
}
.siblingWrapper{
    display: flex;
    justify-content: space-between;
}
.maplink {
  flex-shrink: 0;           /* button won’t shrink */
}
.leaflet-popup-content-wrapper{
    background: transparent!important;
    font-family: 'newsreader';
    font-weight: 500;
    font-size: 1.2rem;
    border-radius: 0!important;
    padding-left: 1.5rem !important;
   /* max-width: 400px !important;  */
    padding: 0!important;
    box-shadow: none!important;
    
     

}
.custom-marker {
  position: relative;
  background: #ffde00; /* yellow */
  color: black;
  padding: 8px 12px;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: bold;
  border-radius: 2px;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  display: inline-block;
}

.leaflet-popup-tip-container {
 /*       width: 40px;
    height: 5px;
    position: absolute;
    left: 117%!important;
    top: -1%!important;
    margin-top: -1px;
    margin-left: -21px;
    overflow: hidden;
    pointer-events: none;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 63px 28.5px 62px 15.5px;
    border-color: transparent transparent var(--highlight) transparent;
    transform: rotate(134deg);
    z-index: -1;*/
    display: none!important;
  
  width: 20px;
  height: 20px;
  background: white;
  transform: rotate(45deg);
  margin: -10px 0 0 -10px; /* centers the rotated square */

}
.popup-content::after {
  content: "";
  position: absolute;
  bottom: -11px;     /* how far below the box */
  right: -44px;      /* how far right from corner */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 70px; /* makes a long right-angled triangle */
  border-color: transparent transparent transparent var(--highlight);
  transform: rotate(25deg);    /* adjust to aim at the pin */
  z-index: -1;       
}


.subPop::after {
  content: "";
  position: absolute;
  bottom: -11px;     
  right: -44px;      
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 40px 0 0 70px; 
  border-color: transparent transparent transparent var(--detailsC);
  transform: rotate(25deg);    
  z-index: -1;       
  
}
.leaflet-touch, .leaflet-bar a{
    line-height: 26px !important;
    border: solid !important;
    border-color: black !important;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out{
    text-indent: 0px !important;
}
.popup-close{
    right: unset !important;
    left: 0!important;
    font-size: 1.9rem !important;
    font-weight: bold !important;
    height: 1.3rem !important;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--detailsA);
    margin-bottom: 0.2rem;
    padding: 0;
}
.popup-close,
.maplink {
  flex: 0 0 auto;
}
a.leaflet-popup-close-button span{
    vertical-align: middle;
    top: 24%;
    left: 0;

}
.maplink{

    border: none;
    background: transparent;
}
.maplink img{
    height: 1.2rem;
    margin-bottom: 2px;
}

#audiooverlay{
      box-sizing: border-box;
    color: white;
    display: none;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    
    padding-bottom: 15rem;
    z-index: 10;
background:  rgba(0, 0, 0, 0.5);
}
.overlayWrapper{
      box-sizing: border-box;
    color: white;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100vw;
    background: #000000;
    padding-bottom: 15rem;
    z-index: 10;
background: linear-gradient(180deg,rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0.78) 84%, rgba(0, 0, 0, 0.53) 91%, rgba(0, 0, 0, 0) 100%);}
.langlinkOverlay img{
    width: 5rem;

}
.langlinkOverlay{

}
.overlayHead{
    display: flex;
    justify-content: space-between;
    padding: 1.5rem;
    margin-bottom: 3rem;
    width: 100vw;
    position: relative;
    top: -5%;
}
.overlayHead #topLogo{
    margin-left: 0;
}
.headbuttons{
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}
.overlayClose{
    display: block;
    width: 1.5rem;
    height: 1.5rem;
cursor: pointer;
}
.overlayClose img{
    width: 1.5rem;
}
.changestopCont{
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100vw;
    left: 0;
    padding: 0 1.5rem 0 1.5rem;
}
#nextStop{
    position: absolute;
    right: 1.5rem;
    font-family: 'funnelsans';
    font-size: 1.2rem;
    width: 7rem;
    text-align: right;
    text-transform: uppercase;
    color: var(--detailsC);
    font-weight: 400;
  /*  margin-right: 1.7rem;*/
    cursor: pointer;
    flex-direction: column;
}
#prevStop{
    position: absolute;
    font-weight: 400;
    left: 1.5rem;
    font-family: 'funnelsans';
    font-size: 1.2rem;
    width: 7rem;
    text-transform: uppercase;
        color: var(--detailsC);
        cursor: pointer;
        flex-direction: column;

}
#nextone, #prevone{
    display: block;
    color: var(--backer);
    font-weight: 600;
}
.stationContent{
    width: 60%;
    margin: auto;
    margin-top: ;
}
#stationLetter{
    text-transform: uppercase;
    font-size: 1.4rem;
}
#strasse, #stationTitle {
    color: var(--highlight);
}
#stationTitle{
    font-size: 1.8rem;
    margin-bottom: 3px;
}
#strasse{
    font-weight: normal;
    margin-top: 3px;
    font-size: 1.8rem;
}
#stationDesc{
    font-family: newsreader;
    font-size: 1.8rem;
    line-height: 1.2;
}

#audioPlayer{
    display: flex;
    height: 7vh;
    width: 100%;
    align-items: center;
    margin-top: 2rem;
    position: relative;
    color: var(--detailsC)
}
#overlayLoader{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 120%;
    background: rgba(0,0,0,0.5);
}
/*
#overlayLoader img {
    height: 90%;
   
    display: block;
    margin: auto;
     margin-top: 5px;
    animation: spin 1s linear infinite;

}

@keyframes spin {
  to { transform: rotate(360deg); }
}*/
.loadingAnim {
    width: 4rem;
    height: 4rem;
    
    border-radius: 50px;
    background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0.3) 25%,rgba(255, 255, 255, 0) 50%,rgba(255, 255, 255, 0.3) 75%, #ffffff 100%);
    background-size: 500% 500%;
    -webkit-animation: loadingGrad 10s ease infinite;
    -moz-animation: loadingGrad 10s ease infinite;
    animation: loadingGrad 10s ease infinite;
}

@-webkit-keyframes loadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes loadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes loadingGrad {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes spinaudio {
  to { transform: rotate(360deg); }
}
#playPause{
    color: white;
    background: black;
    border: none;
}
#playPause img{
    vertical-align: middle;
    height: 7vh;
    width: 7vh;

}
.playerline{
    position: absolute;
    height: 2px;
    border-bottom: solid;
    width: 100%;
    border-width: 1px;
    z-index: -1;
    margin-top: 4px;
}
#playHeadCont{
        text-align: right;
    transition-duration: 0.5s;
}
#playHead{
    text-align: right;
    padding: 0 0.5rem 0 0.5rem;
    background-color: #000000;
}
#progressDiv{
    flex-grow: 1;
    height: 100%;
    display: flex;
    align-items: center;

}

#duration{
    position: absolute;
    right: -2.7rem;
    background-color: #000000;

}
#progress{
    flex-grow: 1;
    height: 100%;
    border-left: solid;
    border-width: 1px;
    background: #FFE800;
    float: right;
background: linear-gradient(-90deg,rgba(255, 232, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);transition-duration: 0.2s;

}
.gallery{
    width:100%;
    height: 60vh;
    margin-top: 3rem;
}
#slide{
   
    display: block;
    margin: auto;
    width: 100%;
}
.caption{
    display: flex;
    justify-content: space-between;
    margin: auto;
    transition: 0.2s;
    margin-top: 0.5rem;
}
.arrow{
    height: 2.5rem;
    width: 2.5rem;
    border: none;
    background-color: transparent;
}
.capNsrc{
    text-align: center;

}
#picsub{
    font-size: 1.2rem;
    font-family: funnelsans;
    font-weight: 500;
}
#picsrc{
    font-size: 0.6rem;
    color: var(--detailsC);
    margin-top: 5px;
}

.legende{
        position: relative;
        padding: 0 0 1.5rem 0rem;
        display: flex;
        margin-bottom: 0;
}
.layerbutton{
    background-color: transparent;
    border: none;
    vertical-align: middle;
    opacity: 1!important;
}
.layerbutton img{
    height: 1.2rem;
    margin-left: 0.4rem;
    vertical-align: baseline;
    opacity: 1!important;

}

.audiolist h2, .substations h2{
    margin-left: 0;
    font-size: 1.4rem;
    font-weight: 500;
    padding-top: 1.5rem;
}
.audiolist{
    width: 40%;
    transition-duration: 0.5s;
}
.audiolist ul{
    width: 100%;
    list-style: none;
    font-size: clamp(0.5rem, 3.4vw, 1.2rem);
    padding: 0;
    font-family: newsreader;
    font-weight: 600;
    vertical-align: center;
}
.station-btn{
    border: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    background-color: transparent;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.audiolist li{
    margin-bottom:0.3rem;
    font-size: ;
}
.stationT{
    vertical-align: super;
    margin-left: 0.8rem;
    text-align: left;
    margin-top: 5px;
}
    .stationT em{
        font-weight: 500;
    }
.legendot{
    /*background-color: var(--highlight);
    text-transform: uppercase;
    border: solid;
    border-radius: 50%;
    font-weight: bold;
    font-family: funnelsans;
    display: inline-block;
    width: 1.8rem;
    height: 1.8rem;
    text-align: center;
    line-height: 1.5rem;
    margin-right: 1rem;
    font-size: 1.2rem;*/
    width: 2rem;
    height: 2rem;
}
.substations{
    width: 60%;
        transition-duration: 0.5s;


}
.substations ul{
    list-style: none;
    font-family: newsreader;
    display: flex;
    height: calc( 17 * 48px );
    flex-direction: column;
    flex-wrap: wrap;
    font-size: clamp(0.5rem, 3.4vw, 1.2rem);
    font-weight: 600;
    padding-left: 0;
}
.substations img{
    vertical-align: top;

}
.substations li{
    width: 45%;
    margin-bottom: 0.3rem;
    line-height: 1.6;
}
.substations span{
    vertical-align: top;
        display: inline-block;
    width: 80%;
    margin-left: 0.8rem;
    margin-top: 3px;
}
.glosrc{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    flex-grow: 1;
    padding: 0 0 2rem 0;
}
.glosrc button{
    border: none;
    background: transparent;
    font-family: funnelsans;
    font-size: 1rem;
    color: var(--detailsA);
    cursor: pointer;
}
.glosrc span{
    border-bottom: solid;
    flex-grow: 1;
    border-width: 2px;
}

.overlay{
    color: white;
    z-index: 2;
    padding: 2rem 20% 15% 20%;
    display: none;
    width: 100vw;
    height: 100%;
    overflow: scroll;
    position: fixed;
    top: 0;
    left: 0;
    font-size: 1.5rem;
    line-height: 1.3;
    font-family: newsreader;
    background: linear-gradient(180deg, rgba(25, 25, 20, 0.98) 75%, rgba(0, 0, 0, 0) 100%);
}
.overlay a{
    color: white;
}
.overlay h1, h2{
    font-family: funnelsans;
}
.overlay h2{
    color: var(--highlight);
    font-size: 1.5rem;
}  
@media (max-width: 1088px) {
.substations ul{
    height: calc( 30 * 48px );
}
.substations li{
    width: 53%;
}
}
@media (max-width: 768px) {
    .topbar{
        padding: 0;
    }
    .topbar .langlink img{
        width:3rem;
    }
    .topTitle{
        padding: 0;
        margin-top: -3px;
    }
    .navbar h1 ,.navbar h2{
    font-size: 0.9rem;
}
.crumbutton{
    margin-top: 0;
}
    .menuNlang{
        margin-top: -1px;
    }
    .menuButton{
    margin-top: -3px;
    margin-bottom: 0;
}
    #content{
        margin: 0;
        font-size:  clamp(0.7rem, 2vw, 2.0rem);
        padding: 0;
        

    }
    .aboutTxt{
        width: 100%;
        font-size:  clamp(0.5rem, 4vw, 2.0rem);
    }
    .maptainer{
        width: 100%;
    }
    .legende{
        flex-direction: column;
    }
    .audiolist{
        width: 100%;
    }
    .audiolist h2{
        margin-left: 0;
    }

    .substations{
        width: 100%;
    }
    .doublePop{
font-size: 1rem;
line-height: 1.2;
}
    .popup-title{
        font-size: 0.8rem;
    }
    .maplink img{
        height: 0.8rem;
    }
    .popup-close{
        font-weight:normal !important;
    }
    .overlay {
            font-size: clamp(0.5rem, 4vw, 1.3rem);

    }
    .overlay h2{
            font-size: clamp(0.5rem, 5vw, 1.5rem);

    }
    .overlayHead{
    }
    .substations ul{
        padding: 0;
        height: auto;
    }
    .substations h2{
        margin-left: 0;
    }
    .substations li{
        width: 100%;
    }
.stationContent{
    width: 90%;
}
    .stationContent h1, #stationLetter {
    font-size: clamp(0.8rem, 4vw, 2rem);
}
 #stationTitle{
    font-size: clamp(0.5rem, 4vw, 2rem);
}
 #strasse{
    font-size: clamp(0.5rem, 4vw, 2rem);
}
#stationDesc{
    font-size: 1rem;
}
 .changestopCont{
position: relative;
width:103vw;
left: -1.5rem;
padding: 0;
margin-bottom: 0;
    }
#nextStop, #prevStop{
    font-size: 0.6rem;
}
#nextone, #prevone{
    white-space: nowrap;
}
#nextStop {
    flex-direction: row;
    margin-right: 0;
}
#playHead{
    padding: 0.2rem
}
#picsub{
        font-size: clamp(0.5rem, 3vw, 1.5rem);
        font-weight: 300;
}
#picsrc{
        font-size: clamp(0.5rem, 2vw, 1rem);
        font-weight: 300;
}
.arrow{
    width: 1.5rem;
    height: 1.5rem;
}
.arrow img{
    max-width: 0.9rem;
}
.glosrc button{
    font-size: 0.8rem;
}
.glosrc{
    padding: 0 0 1rem 0;
}
.legende{
    padding: 0 0 0.5rem 0;
}

}
@media (orientation: portrait) {
    .overlayHead{
        margin-bottom: 0.5rem;
        padding: 0.8rem;
        
    }
    .langlinkOverlay img{
        width: 3rem;
    }
    .headbuttons{
        gap: 5px;
    }
    .overlayClose{
        width: auto;
        height: auto;
    }
    .overlayClose img{
        width: 1rem;
    }
    .changestopCont{

    }
    #slide{
        width: 100%;
        height: auto;
    }
    #nextStop, #prevStop{
    display: flex;
    position: relative;
    gap: 3px;
    flex-direction: column;
}
#prevStop{
    align-items: flex-start;
}
#nextStop{
    align-items: flex-end;
}
#playPause img{
    height: 7vh;
}
#duration{
    right:-1.5rem;
}
#audioPlayer{
    width: calc(100% - 2rem);
}
.substations{
        width: 100%;
    }
}