html {    
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    padding:0;margin:0;height:100%;
}

body {
    background-color:#272727;
    padding:0;margin:0;height:100%;
}

#logopic {
    height:120px;
}

h1 {margin-top:0;padding-top:20px;}
h1.blue {color:#336ECC;}
#logocell {width:30%;background-color:#FFFFFF;   };
#menucell {width:70%;background-color:#FFFFFF;   };

span.menuitem {}

ul.programlist {
    border-style:solid;
    border-width:0 0 0 4px;    
    border-color:#272727;
    font-size:1em;

}
ul.programlist li {

    margin-bottom:10px;
}

@media screen and (max-width: 1200px) {   
    .forsmallscreens {
        display:block;
    }
    .forbigscreens {
        display:none;
    }
    #headline {
        position:relative;
        background-color:#272727;
        background-image:url('dashboard.jpg');
        background-size:cover;
        background-position:bottom right;        
        height:300px; 
        display:flex;
        flex-direction:column;
        justify-content: center;
        margin:0;
        padding:0;
        border-top:solid 5px #336ecc;
        border-bottom:solid 5px #336ecc;
    }
    #headtxt {   
        padding:5%;
        font-size:1.8em;
        color:#FFFFFF;
	text-shadow: 1px 0 0 #272727, 0 -1px 0 #272727, 0 1px 0 #272727, -1px 0 0 #272727;
    }
    #menutable_desktop{display:none;width:100%;background-color:#FFFFFF; }
    #menutable_mobile{display:table;width:100%;background-color:#FFFFFF; }
    a.menulink {
        font-size:1.4em;
        text-decoration:none;
        color:#000000;
        margin:10px;
    }
    #wrapper {
        background-color:#FFFFFF;   
        padding-left:5%;
        padding-right:5%;
        font-size:1.1em;
        padding-bottom:50px;
    }
    footer {    
        background-color:#272727;
        color:#FFFFFF;
        padding-top:20px;
        padding-bottom:20px;
        padding-left:5%;
        padding-right:5%;
        font-size:1.2em;    
    }
    #inlogo {width:100px;}
    #logopic {width:100%;object-fit: contain;}
    #partenariat {
        display:none;
    }
}

@media screen and (min-width: 1200px) {    
    .forsmallscreens {
        display:none;
    }
    .forbigscreens {
        display:block;
    }

    #partenariat {
        position:absolute;
        overflow:hidden;
        right:-380px;
        top:20px;
        background-color:#FFFFFF;
        border-style:solid none solid solid;
        border-color:#FFFFFF;
        border-bottom-left-radius:10px;
        padding:20px;
        font-size:1.1em;
        width:404px;
        opacity:0.2;
    }
    #partenariat:hover{
	right:0px;
        opacity:1;
    }
    #partenariat img {
        width:300px;
    }
    #headline {
        position:relative;
        background-color:#272727;
        background-image:url('dashboard.jpg');
        background-size:cover;
        background-position:bottom right;
        height:400px; 
        display:flex;
        flex-direction:column;
        justify-content: center;
        margin:0;
        padding:0;
        border-top:solid 5px #336ecc;
        border-bottom:solid 5px #336ecc;
    }
    #headtxt {
        padding-left:20%;
        font-size:3em;
        color:#FFFFFF;
	text-shadow: 1px 0 0 #272727, 0 -1px 0 #272727, 0 1px 0 #272727, -1px 0 0 #272727;
    }
    #menutable_desktop{display:table;width:100%;background-color:#FFFFFF; }
    #menutable_mobile{display:none;width:100%;background-color:#FFFFFF; }
    a.menulink {
        font-size:1.5em;
        text-decoration:none;
        color:#000000;
        margin-right:40px;
    }
    #wrapper {
        background-color:#FFFFFF;   
        padding-left:20%;
        padding-right:20%;
        font-size:1.2em;
        padding-bottom:100px;
    }
    footer {    
        background-color:#272727;
        color:#FFFFFF;
        padding-top:20px;
        padding-bottom:20px;
        padding-left:20%;
        padding-right:20%;
        font-size:1.2em;    
    }
    #inlogo {width:200px;}
    #logopic {width:400px;object-fit: contain;}
}


#wrapper p {
    text-align:justify;
}

a.actionbutton {
    background-color: #AAAAAA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    border-radius:5px;
    cursor:pointer;
    -webkit-appearance: none;
}

a.actionbutton:hover {
    background-color: #ff8c00;
}

a.footlink{
    color:#FFFFFF;
    text-decoration:none;
}

input.actionbutton {
    background-color: #AAAAAA;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.2em;
    border-radius:5px;
    cursor:pointer;
    -webkit-appearance: none;
}

input.actionbutton:hover {
    background-color: #008CBA;
}

form input {
    font-size:1.2em;
    border:0;
    border-radius:10px;
    padding:10px;
    margin:5px;
}

form label {
    display:inline-block;
    width:200px;
    text-align:right;    
}

hr {
    border-style:solid;
    border-color:#272727;
    border-width:2px;  
    margin-top:40px;
    margin-bottom:40px;
}

table.tcompare {
    border:0;
}

table.tcompare th {
    background-color:#272727;
    color:white;
    font-size:1.2em;
    padding:10px;
}
table.tcompare td.price {
    background-color:#FFFFFF;
    color:black;
    text-align: center;
    padding:5px;
}

img.cpicon {
    position:relative;
    height:20px; 
    top:2px;
}


.image-container {
    position: relative;
    display: inline-block; /* Damit die Bilder nebeneinander stehen können */
}

.main-image {
    display: block; /* Zeigt das Hauptbild an */
}

.hover-image {
    position: absolute; /* Macht das Hover-Bild über dem Hauptbild sichtbar */
    top: 0;
    left: 0;
    display: none; /* Standardmäßig nicht sichtbar */
}

.image-container:hover .hover-image {
    display: block; /* Zeigt das Hover-Bild an, wenn die Maus darüber ist */
}

.image-container:hover .main-image {
    display: none; /* Versteckt das Hauptbild, wenn die Maus darüber ist */
}