.hoverontouch--aktiv .cover {
    opacity: 0;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    top: 0;
    left: 0;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: calc(100vw * (16 / 9));
    overflow: hidden;
    color: silver;
    background-color: black;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    z-index: 0;
}
h1 {
    font-family: Poppins, Arial, Helvetica, sans-serif;
}
h3 {
    font-size: 5vw;
    text-align: center;
}
h4 {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    padding-left: 0;
    margin-top: -2%;
    font-size: 220% !important;
    letter-spacing: 0.95em !important;
    margin-bottom: 0;
}
h5 {
    margin-bottom: 0;
}
.pagewrap {
    margin-top: 0;
    width: 100vw;
}
.center {
    margin: 0;
    position: relative;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.wrapper {
    display: flex;
    justify-content: center;
    inset: 0;
    width: 100%;
}
.row {
    text-align: center;
}
.hidden {
    top: 0;
    left: 40%;
    display: none;
}
div.a {
    text-transform: uppercase;
}
.smartBanner {
    bottom: 0 !important;
    left: 50%;
    height: auto;
    margin: auto 0;
}
.centerButton {
    left: 50%;
}
.infoicon {
    background-image: url("img/icons/info-solid-circle-color.svg");
    background-position: 0%;
    background-repeat: no-repeat;
    background-size: contain;
    bottom: 10%;
    right: 4vw;
    width: 11.5vw;
    height: 11.5vw;
    aspect-ratio: 1;
    cursor: pointer;
    position: absolute;
    z-index: 200000;
}
.infoicon:hover {
    background-image: url("img/icons/info-solid-circle-black.svg");
}
.home:hover,
.film:hover,
.scream:hover,
.location:hover,
.info:hover,
.speech:hover {
    background: black !important;
    transform: scale(1.15);
}
.speech {
    background-image: url("img/assets/speech-white.svg");
    background-repeat: no-repeat;
    background-size: 10px;
}
.fact,
.plus,
.minus {
    width: 12.1% !important;
    height: auto !important;
    padding: 0;
    position: absolute;
    opacity: 1 !important;
    z-index: 100000;
}
.size {
    width: 12.1vw !important;
    height: 12.1vw !important;
    aspect-ratio: 1;
    margin: 0;
    padding: 2.5vw !important;
}
.fact,
.plus,
.info,
.size,
.film,
.scream,
.location,
.info {
    border-radius: 50%;
}
.fact {
    top: 72vh !important;
    right: 4% !important;
}
.plus {
    top: 0;
    left: 0;
}
.minus {
    top: 0;
    left: 0;
}
.fact:hover,
.info:hover,
.plus:hover,
.minus:hover,
.icons:hover {
    transform: scale(1.15);
}
.size:hover,
.film:hover,
.scream:hover,
.location:hover,
.info:hover {
    background: black;
}
.icons {
    padding: 5% 5% 10% 5%;
}
.pointer {
    cursor: pointer;
}
.filter-orange {
    filter: invert(67%) sepia(81%) saturate(3132%) hue-rotate(0deg) brightness(103%) contrast(105%);
}
.filter-purple {
    filter: invert(42%) sepia(11%) saturate(1585%) hue-rotate(201deg) brightness(94%) contrast(87%);
}
.filter-red {
    filter: invert(51%) sepia(92%) saturate(5044%) hue-rotate(340deg) brightness(99%) contrast(104%);
}
.filter-blue {
    filter: invert(49%) sepia(58%) saturate(5591%) hue-rotate(168deg) brightness(97%) contrast(101%);
}
.filter-indigo {
    filter: invert(13%) sepia(80%) saturate(6584%) hue-rotate(268deg) brightness(68%) contrast(122%);
}
.frame-container {
    display: inline-block;
    position: absolute;
}
.container {
    background-size: cover;
    padding-top: 8%;
    padding-bottom: 4%;
    display: inline-block;
    overflow: visible;
    border-radius: 10px;
    box-shadow: 2px 3px 11px rgba(0, 0, 0, 0.2);
    max-width: 100vw !important;
    width: 95% !important;
    height: auto;
    position: relative;
    top: 0;
    justify-items: end;
    z-index: 1;
}
.clear {
    clear: both;
}
.item {
    padding: 13% 35%;
    border-radius: 8px;
    display: block;
    margin-bottom: 2%;
    margin-right: 5%;
    font-family: Helvetica;
    font-size: 2.5vh;
    color: #fff;
    cursor: pointer;
    width: 78vw;
    text-align: center;
}
.container-3 .item {
    display: inline-block;
    width: auto;
    padding: 2% 5%;
    margin-right: 1%;
}
.itembox {
    width: 100% !important;
    height: fit-content;
    padding-right: 5% !important;
    margin-bottom: 0vh !important;
    transform: scale(1);
}
.lila {
    background-color: #ff00c8;
}
.white {
    background-color: #f5f4f5;
    color: #333;
}
/* swiper gallery */
.swiper {
    width: 100%;
    height: 100%;
    z-index: 0;
    position: fixed;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background-size: cover;
    background-repeat: no-repeat;
    background: transparent;
    display: block;
    justify-content: center;
    align-items: center;
    z-index: 1;
}
.swiper-slide img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    -webkit-filter: brightness(1.1) contrast(1.2);
    filter: brightness(1.1) contrast(1.2);
    z-index: 2;
}
.swiper-pagination-progressbar-bg-color {
    background: rgba(255, 255, 255, 0.5) !important;
}
.swiper-pagination,
.swiper-button-prev,
.swiper-button-next {
    z-index: 10 !important;
}
.swiper-pagination {
    margin-bottom: 12vh !important;
    position: absolute;
    text-align: center;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
    opacity: 0 !important;
    cursor: auto;
    pointer-events: none;
}
.headerbox {
    text-align: center;
    position: absolute;
    display: block;
    top: 0%;
    width: 100%;
    z-index: 100000 !important;
}
.wallpaper {
    min-width: 130%;
    top: 0;
    left: -10% !important;
    position: relative !important;
}
.name {
    margin-top: 5% ;
    padding-left: 10% ;
    padding-right: 10% ;
    position: relative;
    font-family: "Creepster", system-ui;
    font-size: 22vw;
    font-weight: 700;
    font-style: normal;
    text-align: center;
    color: #ffffff !important;
    line-height: 100%;
    width: 100%;
    z-index: 100010 !important;
}
.latin {
    margin-top: 0%;
    position: relative;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8vw ;
    font-weight: 700;
    font-style: normal;
    font-stretch: condensed;
    font-style: oblique;
    text-align: center !important;
    color: #ffffff !important;
    z-index: 10;
    -webkit-filter: drop-shadow(1vw 1vw 1vw black);
    filter: drop-shadow(1vw 1vw 1vw black);
    z-index: 100010 !important;
}
.overflowbothsides {
    vertical-align: middle !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: hidden !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
    -ms-transform: translateX(-50%) !important;
    -o-transform: translateX(-50%) !important;
    transform: translateX(-50%) !important;
}
/* nav buttons */
#mySidenav a {
    position: absolute;
    right: -100px;
    transition: 0.3s;
    padding: 15px;
    width: 100px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 4vw;
    font-weight: bold;
    color: white !important;
    border-radius: 5% 0 0 5%;
    border-color: white !important;
    border-width: 0.2rem !important;
    z-index: 1000000 !important;
}
#mySidenav a:hover {
    transform: scale(1.1);
    transition: ease-in-out;
    transition-duration: 0.2s;
    right: 0;
}
#next {
    top: 46%;
    background-color: #ff00c8;
}
.isolated-component {
    all: revert;
}
 /* Share Donation Buttons */
 #support {
    position: fixed;
    top: 11%;
    right: 0;
    z-index: 0;
}
#support .supportButton {
    background-color: indigo;
    opacity: 1;
    padding: 0px !important;
    /* padding: 8px 20px !important; */
    width: fit-content;
    text-decoration: none;
    font-size: 4vw;
    font-weight: bold;
    color: white !important;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    z-index: 0 !important;
}
#support .supportButton:hover {
    opacity: 1;
}
#support a {
    position: relative;
    top: 0;
    right: 0;
    padding: 0;
    width: auto;
    font-size: inherit;
    color: inherit !important;
    z-index: auto !important;
}
.outlined-image {
    position: relative;
    display: inline-block; /* Ensures the box-shadow is applied correctly */
}
.outlined-image img {
    display: block; /* Removes bottom space */
    border-radius: 8px; /* Optional: adds rounded corners */
    filter: drop-shadow(0 0 0 black) drop-shadow(0 0 5px black); /* Creates the outline effect */
}
#myShareSidenav img,
#mySupportSidenav img {
    display: block;
    border-radius: 8px;
    filter: drop-shadow(0 0 0 black) drop-shadow(0 0 5px black);
}
.cladobox {
    justify-content: flex-start;
    margin-top: -15%;
    height: 100vh !important;
    overflow: scroll;
}
.wikibox {
    justify-content: flex-start;
    padding-top: 0 !important;
    background-color: #fff;
    color: #808080;
    text-align: left;
    height: 100vh !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
    overflow: scroll;
}
.tbox {
    margin-top: 15%;
    margin-left: 12%;
    margin-right: 12%;
    margin-bottom: 10%;
    z-index: 1000 !important;
}
a {
    color: #0060df !important;
}
.modal a.close-modal {
    position: fixed !important;
}
.modalimage {
    margin-left: 0;
    width: 100vw;
    height: auto;
}
.modalmap {
    margin-left: 0 !important;
    width: 100vw !important;
    height: auto !important;
    mix-blend-mode: overlay;
}
.map {
    color: white !important;
    position: fixed !important;
    bottom: 22vh !important;
    margin-left: 0 !important;
    width: 100vw !important;
    height: auto !important;
}
p {
    justify-content: left;
    margin: 3%;
    color: #36454f;
    line-height: 110%;
}
.t {
    justify-content: left;
    font-weight: bold;
    margin-top: 10% !important;
    margin-left: 8vw !important;
    margin-right: 8vw !important;
    color: white;
    line-height: 110%;
}
a:link {
    color: #ff00c8 !important;
}
.facthd {
    color: #fff;
    font-family: "Poppins", Arial, Helvetica, sans-serif;
    font-size: 7vw;
    text-align: center;
    margin-bottom: -1em;
}
.factbox {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 10000;
}
.cladogram {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1000000;
}
.donate {
    max-width: 250px;
}
.donate:hover {
    transform: scale(1.05);
    transition: ease-in-out 0.1s;
}
.contact {
    width: 100%;
    height: auto;
}
.scale-human {
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    max-width: 100%;
    max-height: 100vh;
}
.scale-cat {
    position: absolute;
    bottom: 0 !important;
    left: 0 !important;
    overflow: hidden;
}
.weight-human {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    color: white !important;
    position: fixed;
    font-stretch: ultra-condensed;
    font-weight: 900;
    left: 3% !important;
    top: 25vh !important;
    font-size: 9vw !important;
    z-index: 1000;
    opacity: 0.5;
}
.weight-cat {
    font-family: Poppins, Arial, Helvetica, sans-serif;
    color: white !important;
    position: fixed;
    font-weight: 900;
    right: 10% !important;
    top: 50vh !important;
    font-size: 9vw !important;
    z-index: 1000;
    opacity: 1;
}
.bmc-btn svg {
    margin-left: -1em !important;
}
.bmc-btn-text {
    color: #fff !important;
    margin-left: 1em !important;
    display: flex !important;
}
.listbox {
    position: absolute;
    transform: scale(1);
    justify-content: top;
    top: 0;
    width: 97%;
    min-height: 66vh;
    color: #ffffff; 
    font-style: oblique;
    text-align: left; 
    margin-top: 5%; 
    margin-right: 2%; 
    margin-bottom: 2%; 
    margin-left: 2% ;
    padding-left: 2% ;
    padding-right: 8% ;
}
.list-type5 {
    width: 100%;
    margin: 0 auto;
}
.list-type5 ol {
    list-style-type: none;
    margin: 0;
    margin-left: 5%;
    padding: 0;
    counter-reset: li-counter;
    display: flex;
    height: 65vh;
    flex-wrap: wrap;
    justify-content: first baseline;
    flex-direction: column;
}
.list-type5 ol li {
    position: relative;
    margin-bottom: 3%;
    padding: 1%;
    background-color: indigo;
    padding-left: 10%;
    border-radius: 25% 10%;
}
.list-type5 a {
    text-decoration: none;
    color: #fff ;
    font-size: 5vw ;
    font-weight: 500 ;
    font-family: sans-serif;
}
.list-type5 ol li:before {
    position: absolute;
    top: -0%;
    left: -5%;
    width: 5vw;
    height: 8vw;
    font-size: 10vw;
    line-height: 1;
    font-weight: bold;
    text-align: center;
    color: white;
    background-color: #ff00c8;
    opacity: 1;
    transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -webkit-transform: rotate(-20deg);
    z-index: 99;
    overflow: visible;
    content: counter(li-counter);
    counter-increment: li-counter;
    border-radius: 25% 10%;
}
.glow {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
}
/* audio player  */
        .container-audio {
            width: 80%;
            height: auto;
            padding: 0px;
            border-radius: 5px;
            margin: 0px auto;
            overflow: hidden;
        }
        .containerMinaudio {
            margin-left: auto;
            margin-right: auto;
            width: 30%;
        }
        .ytaudiocontainer {
            display: block;
            margin-left: auto;
            margin-right: auto;
            width: 30%;
        }
        audio {
            width: 100%;
        }
        /* animated speaker icon */
            svg {
                width: 50vw;
                height: 50vh;
                max-width: 100px;
                color: #fff;
            }
            .xs-alert-btn {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            }
            /* Add new style for magnifying glass cursor */
        .cladogram-image-wrapper {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-width="1.5"><circle cx="10.5" cy="10.5" r="7"/><path d="M16 16l4.5 4.5"/></svg>'), auto;
        }
        .cladogram-image-wrapper:hover {
            cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-width="1.5"><circle cx="10.5" cy="10.5" r="6" transform="scale(4)"/><path d="M4 4l4.5 4.5" transform="scale(4)"/></svg>') 24 24, zoom-in;
        }
         /* Sternchen-Effekt für alle Buttons */
         .catheadBtn, .cladoBtn, .closeiframe, .button, .size, .film, .scream, .location, .info, .infoicon, .sparkle {
            /* position: relative;  */
            overflow: visible; /* Verhindert, dass Sternchen außerhalb des Buttons abgeschnitten werden */
        }
        /* Sternchen-Effekt mit ::before, ::after und zwei zusätzlichen Pseudo-Elementen */
        .catheadBtn:active::before, .cladoBtn:active::before, .closeiframe:active::before, .button:active::before,
        .size:active::before, .film:active::before, .scream:active::before, .location:active::before, .info:active::before, .infoicon:active::before, .sparkle:active::before,
        .catheadBtn:active::after, .cladoBtn:active::after, .closeiframe:active::after, .button:active::after,
        .size:active::after, .film:active::after, .scream:active::after, .location:active::after, .info:active::after, .infoicon:active::after, .sparkle:active::after,
        .catheadBtn.sparkle-3:active::before, .cladoBtn.sparkle-3:active::before, .closeiframe.sparkle-3:active::before, .button.sparkle-3:active::before,
        .size.sparkle-3:active::before, .film.sparkle-3:active::before, .scream.sparkle-3:active::before, .location.sparkle-3:active::before, .info.sparkle-3:active::before, .infoicon.sparkle-3:active::before, .sparkle.sparkle-3:active::before,
        .catheadBtn.sparkle-4:active::after, .cladoBtn.sparkle-4:active::after, .closeiframe.sparkle-4:active::after, .button.sparkle-4:active::after,
        .size.sparkle-4:active::after, .film.sparkle-4:active::after, .scream.sparkle-4:active::after, .location.sparkle-4:active::after, .info.sparkle-4:active::after, .infoicon.sparkle-4:active::after, .sparkle.sparkle-4:active::after {
            content: "✦"; /* Sternchen-Symbol */
            position: absolute;
            color: #fff; /* Goldene Farbe, passend zu deinem Design */
            font-size: 24px; /* Größe der Sternchen */
            opacity: 1;
            z-index: 1000; /* Über bestehenden Inhalten, aber unter Modals */
        }
        /* Erstes Sternchen */
        .catheadBtn:active::before, .cladoBtn:active::before, .closeiframe:active::before, .button:active::before,
        .size:active::before, .film:active::before, .scream:active::before, .location:active::before, .info:active::before, .infoicon:active::before, .sparkle:active::before {
            left: 20%;
            top: 50%;
            animation: star-sparkle 0.5s ease-out forwards;
        }
        /* Zweites Sternchen */
        .catheadBtn:active::after, .cladoBtn:active::after, .closeiframe:active::after, .button:active::after,
        .size:active::after, .film:active::after, .scream:active::after, .location:active::after, .info:active::after, .infoicon:active::after, .sparkle:active::after {
            left: 80%;
            top: 50%;
            animation: star-sparkle 0.7s ease-out 0.1s forwards; /* Leichte Verzögerung */
        }
        /* Drittes Sternchen */
        .catheadBtn.sparkle-3:active::before, .cladoBtn.sparkle-3:active::before, .closeiframe.sparkle-3:active::before, .button.sparkle-3:active::before,
        .size.sparkle-3:active::before, .film.sparkle-3:active::before, .scream.sparkle-3:active::before, .location.sparkle-3:active::before, .info.sparkle-3:active::before, .infoicon.sparkle-3:active::before, .sparkle.sparkle-3:active::before {
            left: 40%;
            top: 30%;
            animation: star-sparkle 0.6s ease-out 0.05s forwards; /* Leichte Verzögerung */
        }
        /* Viertes Sternchen */
        .catheadBtn.sparkle-4:active::after, .cladoBtn.sparkle-4:active::after, .closeiframe.sparkle-4:active::after, .button.sparkle-4:active::after,
        .size.sparkle-4:active::after, .film.sparkle-4:active::after, .scream.sparkle-4:active::after, .location.sparkle-4:active::after, .info.sparkle-4:active::after, .infoicon.sparkle-4:active::after, .sparkle.sparkle-4:active::after {
            left: 60%;
            top: 70%;
            animation: star-sparkle 0.8s ease-out 0.15s forwards; /* Leichte Verzögerung */
        }
        /* Animation für die Sternchen */
        @keyframes star-sparkle {
            0% {
                opacity: 1;
                transform: translateY(0) scale(1.5);
            }
            100% {
                opacity: 0;
                transform: translateY(-30px) scale(2.2); /* Bewegt sich nach oben und wird größer */
            }
        }