.offcanvas-menu .offcanvas-inner .sp-module ul > li > a,
.offcanvas-menu .menu > li > a {
  color: #000000;
  font-weight: bold;
}
.offcanvas-menu .menu > li.active > a {
  color: #000000 !important;
  font-weight: bold;
}
.offcanvas-menu .close-offcanvas {
  color: #00008b;
  font-weight: bold;  
}
.p-typewriter {
    color: rgb(0 0 0 / 100%);
    font-size: 24px;
    width: 320px;
    height:37px;
    margin: 10px auto;
    border-right: 1px solid rgb(0 0 0 / 100%);
  overflow: hidden;
    white-space: nowrap;
     animation:
        control-width 5s steps(28) infinite,
        blink 0.5s infinite;
}

@keyframes control-width {
    0% {
        width: 0;
    }
    60% {
        width: 320px; /* 3 Sekunden Schreibeffekt */
    }
    100% {
        width: 320px; /* 2 Sekunden Pause */
    }
}

.led-box {
  height: 30px;
  width: 25%;
  margin: 10px 0;
  float: left;
}
.led-box p {
  font-size: 12px;
  text-align: center;
  margin: 0,2em;
}
.led-red {
  margin: 0 auto;
  width: 24px;
  height: 24px;
  background-color: #F00;
  border-radius: 50%;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 12px;
  -webkit-animation: blinkRed 1s infinite;
  -moz-animation: blinkRed 1s infinite;
  -ms-animation: blinkRed 1s infinite;
  -o-animation: blinkRed 1s infinite;
  animation: blinkRed 1s infinite;
}
@-webkit-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-moz-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-ms-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@-o-keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
@keyframes blinkRed {
    from { background-color: #F00; }
    50% { background-color: #A00; box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #441313 0 -1px 9px, rgba(255, 0, 0, 0.5) 0 2px 0;}
    to { background-color: #F00; }
}
.wlz {
  background-color: #ffffff;
  padding: 10px;
}
.fett {
  font-weight: bold;
}

sp-module.my-fett-module {
  font-weight: bold;
}

sp-module.fett {
  font-weight: bold;
}


.font-respon-plan{
   font-size: clamp(0.8em, 2.0vw, 1.1em);
}
.font-respon {
    font-size: clamp(1em, 2.8vw, 1.75em);
}
.sp-module.my-sticky-module {
position: fixed;
top: 40%;
right: 5vw;
z-index: 2;
}
.hbeitr {
  border-radius: 3px;
  text-align: center;
  margin: -1.1rem -1.1rem -1.2rem; -1.1rem;
}
.responsive_map { 
position: relative; overflow: hidden; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0;
}
.responsive_map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
}
img {
pointer-events: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
} 
.img-trans {
  width: 80%;
  height: auto;
  background: white;
  transition-property: width;
  transition-duration: 0.5s;
}
.img-trans:hover {
  width: 90%;
}
.img-scale {
  transition-property: scale;
  transition-duration: 0.5s;
}
.img-scale:hover {
  scale: 115%;
}
.img-scale-105 {
  transition-property: scale;
  transition-duration: 0.5s;
}
.img-scale-105:hover {
  scale: 105%;
}

.image-fader {
    position: relative;
    width: 100%;
    /* max-width: 1200px;  optional */
    /* margin: 0 auto; */
    overflow: hidden;
}


.photo-credit {
    position: absolute;
    bottom: 1vw;
    right: 10vw;

    /*writing-mode: vertical-lr;*/
    text-orientation: mixed;

    color: #000000;
    font-size: 1.2vw;
    letter-spacing: 1px;

    z-index: 2;

    /* Optional für bessere Lesbarkeit 
    text-shadow: 1px 1px 3px rgba(0,0,0,.8); */
}

.image-fader img {
    display: block;
    width: 100%;
    height: auto;
    
    position: absolute;
    top: 0;
    left: 0;

    opacity: 0;
    transition: opacity 2s ease-in-out;

    object-fit: cover;
}

.image-fader img.active {
    opacity: 1;
    position: relative;
}