* {box-sizing: border-box;}
body{
    margin:0;
    font-family: "Gogh";
    min-height:100vh;
    height: auto;
    background: rgb(98,98,98);
    background: linear-gradient(0deg, rgba(98,98,98,1) 0%, rgb(131, 131, 131) 100%);
    color:#FFF1EF;
    display:block;
}
/* SCHRIFTART */
@font-face {
    font-family: "Gogh";
    src: url("fonts/Gogh-ExtraBold.ttf");
}
/* Schrift */
.main2 h1{
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
    font-size: 33px;
}
.main2 h2{
    text-align: center;
    margin-top:50px;
    margin-bottom: 50px;
    font-size:33px;
}
.main2 h3{
    text-align:center;
    font-size: 30px;
}
.main2 form{
    position:relative;
    text-align:center;
}
/* HEADER */
.header{
    background-color: #bc0000;
    overflow:hidden;
    padding: 20px 10px;
    height:120px;
    position:sticky;
    width:100%;
    z-index:3;
    top:0;
}
.header a{
    float:left;
    color:#FFF1EF;
    text-align:center;
    padding:12px;
    padding-top:20px;
    text-decoration:none;
    font-size:25px;
    line-height:25px;
    border-radius: 4px;
    margin-right:70px;
}
.header form{
    float:left;
    color:#FFF1EF;
    text-align:center;
    padding:12px;
    padding-top:20px;
    text-decoration:none;
    font-size:18px;
    line-height:25px;
    border-radius: 4px;
}
.header img{
    height:75px;
    position:relative;
}
.header a.logo{
    position:relative;
    top:0px;
    font-size: 25px;
    padding-top:0px;
}
.header a.active{
    text-decoration: underline solid 4px #bc0000;
    text-decoration-skip: none;
}
.header input#suche{
    position:relative;
    top: -5px;
    padding: 5px 2px;
    font-family: "Gogh";
}
.header input#suchbutton{
    position:relative;
    height:25px;
    left:10px;
    margin-right:70px;
}
/* SIDEBAR */
#openmenu{
    float:right;
    width:35px;
    margin-right:20px;
    position:absolute;
    top:5px;
    right:5px;
}
.sidebar{
    float:right;
    height:100%;
    position:fixed;
    z-index:4;
    top:0;
    right:0;
    background-color: #bc0000;
    overflow-x:hidden;
    padding-top:60px;
    transition:0.5s;
}
.sidebar .closebtn{
    position:absolute;
    top:0;
    right:25px;
    font-size:36px;
    margin-right:0px;
    transition:0.5s;
}
.sidebar a{
    margin-bottom:40px;
}
form#suche{
    white-space: nowrap;
}
/* SEITENMENÜ */
.sidemenu{
    width:200px;
    position:fixed;
    z-index:1;
    top:130px;
    left:10px;
    background-color: #414141;
    border:#adadad 4px solid;
    border-radius: 10px;
}
.sidemenu a{
    text-decoration: none;
    color:#FFF1EF;
}
.sidemenutext{
    padding:5px 8px;
}
.sidemenu input{
    width:170px;
}
.sidemenu label{
    color:#FFF1EF;
}
/* SEITENINHALT */
.main{
    position:cover;
    margin-left:220px;
    margin-top:130px;
    transition:0.5s;
}
.main2{
    position:cover;
    margin-left:5%;
    margin-top:0px;
    transition:0.5s;
}
.main2 a{
    color: #FFF1EF;
    background-color: #414141;
    border:none;
    font-size: 20px;
    border-radius: 5px;
    text-decoration:none;
    padding: 0px 10px;
}
.main2 .channel{
    background: none;
}
.main2 .channel:hover{
    background: none;
}
.main2 a:hover{
    background-color: #5a5a5a;
}
/* Grid */
.categories{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content:center;
    row-gap: 30px ;
}
.category{
    display:grid;
    grid-template-columns: 280px;
    justify-content:center;
    align-items:center;
}
.category img{
    height:40px;
    position:relative;
    top: 5px;
    left:5px;
}
.category a{
    font-size:40px;
    background-color: #969494;
    text-align:center;
}
/* Programm */
#programme{
    display: inline-block;
    background-color: #414141;
    border: 4px solid #adadad;
    border-radius: 10px;
    width:350px;
    margin:40px 20px;
    padding:10px;
}
#programme h2{
    margin-top:0;
    color:#FFF1EF;
}
#programme a{
    text-decoration:none;
}
/* Slider */
.slide-container{
    overflow:auto;
    white-space: nowrap;
    height: 450px;
}
.slide-container img{
    height:400px;
    padding:0 10px;
    border-radius: 50px;
}
/*KANALAUSWAHL*/
select{
    background-color: #414141;
    color:#FFF1EF;
    padding:5px;
    font-family: "Gogh";
    font-size:25px;
    padding-right:30px;
}
.auswahl{
    text-align: center;
    position: relative;
  min-width: 200px;
  margin: 50px 33%;
}
.channels::-webkit-scrollbar{
    width:15px;
    background-color: #2e2e2e;
}
.channels::-webkit-scrollbar-thumb{
    background-color: #dfbeb9;
    -webkit-box-shadow: inset 0 0 6px #00000021;
}
.auswahl:after{
    content: '>';
    color:#FFF1EF;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    right: 25px;
    top: -5px;
    padding: 0 0 2px;
    border-bottom: 1px solid #999;
    position: relative;
    pointer-events:none;
}
.auswahl select{
    -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
/*FORMS*/
div[id="anmeldeFormular"]{
    position:fixed;
    background-color: #5e5e5e;
    padding:50px;
    border: solid 5px #4b4b4b;
    z-index:7;
    top:30%; left:40%;
}
div[id="anmelden"]{
    position: fixed;
    top:0; bottom:0; left:0; right:0;
    background: #00000071;
    z-index:7;
    transition: visibility 0s, opacity 0.2s linear;
}
input[name="schliessen"]{
    position:absolute;
    top:5px; right:10px;
    font-size: 15px;
    margin:0;
    width:20px;
    background: none;
    border: none;
    color:#FFF1EF;
    cursor: pointer;
}
.button1{
    color: #FFF1EF;
    background-color: #414141;
    border:none;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: "Gogh";
}
.button2{
    color: #FFF1EF;
    background-color: #414141;
    border:none;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: "Gogh";
}
.button1:hover{
    background-color: #5a5a5a;
}
.button2:hover{
    background-color: #5a5a5a;
}
.newuser{
    margin-top:165px;
}
.newuser input{
    margin-bottom:10px;
}
/* Mobile */
@media only screen and (max-device-width: 600px){
    .header img{
        width:80%;
        height:auto;
    }
    a.logo{
        margin-right:0;
        text-align: left;
    }
    .categories{
        grid-template-columns: repeat(2, 1fr);
        row-gap: 30px ;
    }
    .categories a{
        font-size: 20px;
    }
    .category {
        grid-template-columns: 180px;
    }
    .categories img{
        height:30px;
    }
    .sidemenu{
        position:relative;
        margin-left:auto; margin-right: auto;
        left:0px;
        width:95%;
    }
    .sidemenu input{
        width:240px;
    }
    .main{
        margin-left:0;
        min-width: 100%;
    }
    .main2{
        margin:none;
        min-width:90%;
    }
    .main h1{
        margin-left:5%;
        margin-right:5%;
    }
    .sidebar{
        max-width: 200px;
    }
    form#suche{
        white-space:initial;
    }
    #suchbutton{
        display:block;
    }
    #programme{
        width:90%;
        margin-left:5%; margin-right:5%;
    }
    .slide-container{
        height: 100px;
    }
    .slide-container img{
        height:90px;
        padding:0 5px;
        margin-left:-15px;
        border-radius: 0px;
    }
    div[id="anmeldeFormular"]{
        padding:50px;
        left:20px; right:20px;
    }
}