body {font-family: Arial, Helvetica, Sans Serif;}
#container {width: 800px ; margin: auto;}  /* zoom: 1   hat eher nichts bewirkt */
.thanx {font-size: 20px; font-weight: bold; color: orange; text-align: center;}
#headline, #legende { position: relative; width: 810px; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; margin: auto; }
#headline { height: 5em; }
#headline h1 {font-size: 24px; margin-top: 10px; text-align: center;}
#headline h1 span {color: #999;}

#legende { margin-top: 3px; height: 60px;}
#legende #imgtext { position: absolute; left: 120px;}
#legende #imgtext span { position: absolute; left: 40px; top: 8px; width: 200px;}
#legende #text  { position: absolute; left: 320px;}

/* MM März 25: Stil für Popup Fenster  */
.landscape-message {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}
/* Das Popup */
.landscape-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding-top: 10%;
    z-index: 1000; /* Sorgt dafür, dass es oben bleibt */
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Zentriert den Inhalt */
}

.landscape-popup p {
    margin-bottom: 20px;
}

.landscape-popup button {
    background-color: #3486b8;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
}

.landscape-popup button:hover {
    background-color: #3486b8;
}
/* MM März 25: Stil für Popup Fenster Ende */

#kommentar { position: relative; top: 0px; left: 211px; height: 60px; width: 598px; margin-bottom: -5px; box-shadow: 0 0 5px #ccc; border: none; }

.slidelineelem {position: absolute; top: 0; border: 1px solid #ccc; box-shadow: 0 0 5px #ccc; }

.slideline { position: relative; width: 800px; min-height: 60px; margin: 10px auto;}
.tooltip { width: 20px; height: 20px; position: absolute; top: 2px; left: 6px; text-align: center; z-index: 100 !important; color: #aaa;}
.tt-on {background: #fefefe !important; }
.tt-off {background: none  !important;}


.answer { width: 200px; height: 100%; overflow-y: auto;}
.answer p {padding-left: 20px; }
.fett {font-weight: bold; }

.slider-container {width: 600px; left: 210px; height: 100%; position: relative; height: 60px;}
.slidehover:hover {border: 1px solid #bbb; box-shadow: 0 0 5px #bbb;}

.slider {position: relative; width: 500px; top: 50%; margin: auto; margin-top: -9px;}

#boxcontainer {position: absolute; top: 20px; left: 76px; width: 492px; height: 32px; background: url(../img/verlauf-headline.jpg) no-repeat;box-shadow: 0 0 5px #666;}
.colorbox { color: #666; position: absolute; top: 6px;}


.submit {
    width: 810px; height: 50px; margin: auto; font-size: 30px; margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
}
.submit:hover {
    background: #eee;
    cursor: pointer;
}

.cstm-label { position: absolute; font-size: 10px; left: -2px;}
.cstm-text { position: absolute; top: 25px; left: 16px; width: 160px;}

#no-choice { position: absolute; top: 17px; left: 31px;}
#no0 { left: 15px;}
#no1 { left: 60px;}
#no2 { left: 105px;}
#no3 { left: 150px;}
#no4 { left: 195px;}
#no5 { left: 243px;}
#no6 { left: 290px;}
#no7 { left: 335px;}
#no8 { left: 380px;}
#no9 { left: 425px;}
#no10 { left: 463px;}

.grad-grey {
    /*
       background: #ffffff;
       background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNWU1ZTUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

       background: -moz-linear-gradient(top,  #ffffff 0%, #e5e5e5 100%);

       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
       background: -webkit-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
       background: -o-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
       background: -ms-linear-gradient(top,  #ffffff 0%,#e5e5e5 100%);
       background: linear-gradient(to bottom,  #ffffff 0%,#e5e5e5 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
    */
}
    /* Auswahl der Parteien   */
    .party-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .party-item {
        background-color: #f0f0f0;
        padding: 10px;
        border-radius: 5px;
        width: calc(33.33% - 10px);
    }
    @media (max-width: 768px) {
        .party-item {
            width: calc(50% - 10px);
        }
    }
    @media (max-width: 480px) {
        .party-item {
            width: 100%;
        }
    }