/*
Theme Name: Radioaktiv 19
Theme URI: http://radioaktiv.org
Author: Froschgift Team
Author URI: http://www.froschgift.de
Description: Radioaktiv Website 2019
Version: 1.0

License: Private
License URI: http://www.froschgift.de
Text Domain: Froschgift
*/


/* BASIC */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
html,body,h1,h2,h3,h4,h5,h6,ul,li,p,img{margin:0px; padding:0px;}
img{border:none;}
body{font-family:'Josefin Sans', sans-serif; width:100%; min-height:calc(100vh + 10px); -webkit-tap-highlight-color: #44444420;}
body.modal-open{position: fixed; overflow-y:scroll;}
main{display:block; padding-bottom:80px;}
input, textarea, select{font-family:'Josefin Sans', sans-serif;}
h1,h2,h3,h4,h5,h6{color:#444; font-weight:700; box-sizing:border-box;}
h1{font-size:30px; text-transform:uppercase; width:100%; letter-spacing:0.025em; margin-top:75px; text-align:center; border-bottom:2px #e6e6e6 solid; padding-bottom:20px; margin-bottom:50px;}
h2{font-size:18px; line-height:24px; text-transform:uppercase; width:100%; text-align:center; padding-bottom:10px; border-bottom:2px #ccc dotted; margin:80px 15px 20px 15px; letter-spacing:0.1em;}
h3{font-size:18px; line-height:24px; text-align:center;}
h4{font-size:16px; line-height:18px; text-align:center;}
a, a:hover{text-decoration:none;}
p{font-family:'Open Sans', sans-serif; font-size:16px; flex-shrink: 0; flex-basis: 100%;line-height:26px; letter-spacing:0.005em; padding:10px; max-width:800px; color:#444;}
p a{text-decoration:underline; color:#f40;}
strong{font-weight:700;}
.clear{clear:both;}
.grid.mobile-only{display:none;}
.button{font-weight:700; display:inline-block; font-size:16px; letter-spacing:0.05em; text-transform:uppercase; height:40px; line-height:45px; padding:0 20px 0 45px; border:1px solid #444; color:#444; border-radius:20px; background-size:20px; background-repeat:no-repeat; background-position:15px center; background-image:url(img/button.svg); cursor:pointer; transition:.2s;}
.button:hover{text-decoration:none; padding:0 25px 0 50px; margin-left:-5px; margin-right:-5px;}
::selection{background-color:#ff4400; color:#fff;}

/* RASTER */
.rapper{max-width:1140px; margin:0 auto; display:flex; flex-wrap:wrap; box-sizing:border-box; justify-content:center;}
.rundeecken{border-radius:18px;}
.flexBreaker{flex-basis: 100%; text-align:center;}
.drag-mobile-rapper .drag-mobile .flexBreaker { display: none; }
.grid{margin:0 10px; display:block; margin-bottom:35px; position:relative;}
.grid-1{width:75px;}
.grid-2{width:170px;}
.grid-3{flex-basis:265px;}
.grid-4{flex-basis:360px;}
.grid-6{flex-basis:360px; flex-grow:1;}
.grid-8{flex-basis:360px; flex-grow:1;}

/* MENU */
#nav-button {position:fixed; z-index:104; right:60px; top:30px; width:40px; height:40px; cursor:pointer; box-shadow:5px 5px 15px 0px rgba(0,0,0,0.2); border-radius:50%; background-color:#fff; transition:right .4s;}
.burger-menu-piece {display:block; position:absolute; width:16px; height:3px; left:12px; background-color:#f40; transform-origin:50% 50%; transition:transform 400ms ease-out; border-radius:1px;}
.burger-menu-piece:nth-child(1) {top:12px;}
.burger-menu-piece:nth-child(2) {top:18px; opacity:1; transition:transform 400ms ease-out, opacity 0ms linear 200ms;}
.burger-menu-piece:nth-child(3) {top:24px;}
.active .burger-menu-piece:nth-child(1) {animation:burger-open-top 400ms ease-out forwards;}
.active .burger-menu-piece:nth-child(2) {opacity:0; transition:transform 400ms ease-out, opacity 0ms linear 200ms;}
.active .burger-menu-piece:nth-child(3) {animation:burger-open-bot 400ms ease-out forwards;}
.closing .burger-menu-piece:nth-child(1) {animation: burger-close-top 400ms ease-out forwards;}
.closing .burger-menu-piece:nth-child(2) {opacity:1;}
.closing .burger-menu-piece:nth-child(3) {animation: burger-close-bot 400ms ease-out forwards;}
nav{top:-100%; width:100%; height:100%; position:fixed; z-index:101; background:#ff7200; background:linear-gradient(45deg, #ff7200 0%,#ff4400 100%); transition:top cubic-bezier(.7,0,.3,1) .4s;}
nav.open{top:0;}
nav .logo{position:relative; z-index:103; left:60px; top:30px; width:240px;}
nav ul.menu{text-align:center; margin-top:15%; margin-top:15vh; list-style:none;}
nav ul.menu li{list-style:none;}
nav ul.menu li a{color:#ffa07d; font-size:42px; line-height:72px; letter-spacing:0.05em; font-weight:700; text-transform:uppercase; transition:.1s;}
nav ul.menu li a:hover{color:#ffbea7;}
nav ul.menu li.current_page_item a{color:#fff;}
nav .frequenzen{margin:0 auto; float:none; text-align:center; position:absolute; bottom:150px; width:100%;}
nav .frequenzen img{display:block; margin:0 auto 15px auto;}
nav .frequenzen .frequenz{float:none;}
nav .frequenzen .socialbutton{display:inline-block; float:none; margin-top:40px;}
nav .loadingOverlay {position:absolute; width:100%; height:100%; background:linear-gradient(45deg, #ff7200 0%,#ff4400 100%); z-index:102; box-sizing:border-box; display:block; top:0; left:0; text-align:center; color:#fff; padding-top:20%; text-transform:uppercase; font-size:24px; letter-spacing:0.05em; font-weight:700;}
nav .loadingOverlay img{margin-bottom:20px;}
body.loading nav{top:0;}


/* HEADER */
header{background:#ff4400; width:100%; padding-top:30px;}
header .rapper.top{height:40px; margin-bottom:40px;}
header .rapper.top img.logo{width:240px;}
.frequenzen{color:#fff; float:left; font-size:14px; line-height:24px;}
.frequenz{float:left; font-size:22px;}
header.hintergrund.hg-party{padding-bottom:30px;}
header.hintergrund.hg-party-bw .frequenzen{color:#444;}
header.hintergrund.hg-party-bw h1{color:#444; border:none; text-align:left; font-size:46px; letter-spacing:0.025em; line-height:56px; padding:0 5px; margin-bottom:0px;}
header.hintergrund.hg-party-bw .grid-6 .scrollbereich{max-height:360px; overflow-y:auto;}

/* SOCIAL */
.socialbutton{position:relative; margin-left:12px; cursor:pointer;float:right; width:40px; height:40px; border-radius:50%; z-index:1;}
.socialbutton img{width:100%; height:100%;}
.socialbutton:after{position:absolute; width:100%; height:100%; border-radius:50%; content:''; top:-1px; left:-1px; padding:1px; box-shadow:0 0 0 2px #fff; transition:0.4s; opacity:0; transform:scale(1.2);}
header.hintergrund.hg-party-bw .socialbutton:after{box-shadow:0 0 0 2px #444;}
.socialbutton:hover:after{transform:scale(1); opacity:1;}

/* PLAYER */
.player{position:fixed; z-index:103; bottom:0px; display:block; background:#fff; width:100%; height:40px; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15); padding:20px; margin-left:-20px;}
.player .rapper{padding:0 10px; justify-content:space-between;}
.player .play{display:inline-block; cursor:pointer; width:40px; height:40px; background:url("img/Play_grau.svg"); background-size:100%; background-position:center; background-repeat:no-repeat;}
.player .play.loading{box-sizing: border-box; -webkit-animation: spin 1s infinite; -moz-animation: spin 1s infinite; -o-animation: spin 1s infinite; animation: spin 1s infinite; background:none !important; background-image: none !important; border: solid 2px #444; border-top-color: transparent; border-bottom-color: transparent; border-radius: 40px;}
.player .volume-icon{display:inline-block; width:20px; height:20px; margin:10px 5px 10px 20px; background:url("img/volume.svg"); background-size:100%; background-position:center; background-repeat:no-repeat;}
.player .volume-slider-con {top:-5px; cursor: pointer; display:inline-block; height:30px; width:100px; padding-right:12px; position:relative; overflow: hidden;}
.player .volume-slider-con::before {content: ''; display:inline-block; height:2px; width:100px; padding-right:12px; position: absolute; background-color: #ccc; top: 50%; margin-top: -1px;}
.player .volume-slider-con .volume-slider{overflow: hidden; display: flex; align-items: center; cursor: pointer; height:30px; width:12px; position:relative; left: 100%}
.player .volume-slider-con .volume-slider::after{content: ''; transition: .2s; display: inline-block; width: 12px; height: 6px; background: #444; border-radius:3px;}
.player .volume-slider-con:hover .volume-slider::after,
.player .volume-slider-con.active .volume-slider::after{width: 12px; height: 12px; border-radius: 12px;}
.player .cover{display:inline-block; width:40px; height:40px; box-shadow:0px 2px 10px 0px rgba(0,0,0,0.15); margin-left:30px; margin-right:20px; border-radius:2px; background-size:cover;}
.player .aktuellerTrack{display:inline-block; max-width:450px; color:#444; position:relative; top:-10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.player .aktuellerTrack .title {font-size:16px; line-height:18px; font-weight:700;}
.player .aktuellerTrack .artist{font-size:12px; line-height:14px;}
.player .quality{position:relative; top:-14px; margin-right:10px;}
.player #switch {background:#f40; background:linear-gradient(150deg, #ff7200 0%,#ff4400 100%); margin:5px 0; cursor:pointer; display:inline-block; position:relative; width:52px; padding:4px; border-radius:30px;}
.player #switch.low {background:#fff; border:2px solid #ccc; padding:2px;}
.player #switch .handle {display:block; background:#fff; height:22px; width:22px; border-radius:11px; left:30px;}
.player #switch.low .handle {background:#ccc;}
.player a.button{background-image:url(img/button_playlist_grau.svg); display:inline-block; top:-14px; position:relative; margin-right:40px; text-transform:initial;}
.player a.button:hover{margin-right:35px;}


/* PLAYLIST & BEITRAG HEADER */
.playlist .header,
.modal .header {height:150px; position:relative; width:100%; color:#fff; letter-spacing:0.025em; margin-bottom:29px; overflow:hidden; transition:height .2s;}
.playlist .header .background,
.modal .header .background {display:block; width:120%; height:120%; position:absolute; transform:translate(-50%,-50%); top:50%; left:50%; filter:blur(8px); -webkit-filter: blur(8px); background-size:cover; background-position:center;}
.playlist .header .background::after,
.modal .header .background::after {content:""; background-color:rgba(68, 68, 68, 0.8); width:100%; height:100%; display:block;}
.playlist .header span.aktuellerTrack{position:absolute; z-index:1; left:210px; max-width:300px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:font-size .2s, left .2s, top .2s; width:calc(100% - 160px);}
.playlist .header span.aktuellerTrack.title{top:60px; font-size:36px; line-height:40px; font-weight:700;}
.playlist .header span.aktuellerTrack.artist{top:105px; font-size:24px; line-height:26px;}

/* PLAYLIST */
.playlist{background:#fff; position:relative; overflow:hidden; box-shadow:0px 20px 70px 0px rgba(0,0,0,0.15);}
.playlist .header span.onAir{position:absolute; z-index:1; right:20px; top:20px; font-weight:700; font-size:14px; letter-spacing:0.05em; text-transform:uppercase;}
.playlist .header span.onAir::before{content:""; display:inline-block; width:10px; height:10px; background-color:#ff4400; margin-right:8px; border-radius:50%;}
.playlist .header a.button{position:absolute; z-index:1; right:20px; bottom:20px; border-color:#fff; color:#fff; background-image:url(img/button_playlist.svg); text-transform:none;}
.playlist .playlistSong{display:block; width:100%; height:62px; color:#444; font-size:12px; position:relative;}
.playlist .playlistSong:nth-child(even){background-color:#f7f7f7;}
.playlist .playlistSong .startZeit{height:40px; width:80px; position:absolute; top:13px; text-align:right; line-height:40px;}
.playlist .playlistSong .cover{width:40px; height:40px; display:inline-block; position:absolute; left:95px; top:11px; background-size:cover; border-radius:2px; background-color:#444; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);}
.playlist .playlistSong .cover::before{content:""; display:block; height:12px; width:2px; margin:-16px 0 0 19px; background:url(img/playlistPunkte.svg) no-repeat;}
.playlist .playlistSong .track{height:40px; position:absolute; top:13px; left:150px; line-height:40px; width:calc(100% - 200px); max-width:415px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.playlist .playlistSong .title{font-size:16px; font-weight:700;}
.playlist .playlistSong a{display:block; height:24px; color:#444; overflow:hidden; line-height:24px; text-align:right; position:absolute; top:22px; right:22px; background:no-repeat center right; background-size:24px; text-align:right; padding-right:35px; text-indent:35px;}
.playlist .playlistSong a.spotify{background-image:url(img/spotify.svg);}
.playlist .playlistSong a.youtube{background-image:url(img/youtube.svg);}
.playlist .playlistSong a span{transition:.2s ease-out; transform: scaleX(0); display:block; transform-origin:right; opacity:0;}
.playlist .playlistSong:hover a span{transform: scaleX(1); opacity:1;}
.page-template-page-playlist .playlist .header span.aktuellerTrack{max-width:calc(100% - 230px);}
.page-template-page-playlist .playlist .playlistSong .track{max-width:calc(100% - 350px);}

/* MAIN */
.hintergrund {background-position:center top; background-repeat:no-repeat; background-size:cover;}
.hintergrund.hg-party{background-image:url(img/hg-party.jpg);}
.hintergrund.hg-party-bw{background-image:url(img/hg-party-bw.jpg); height:500px; margin-bottom:75px;}
.hintergrund.hg-palmen{background-image:url(img/hg-palmen.jpg); height:630px; margin-bottom:220px;}
.hintergrund.hg-flach{background-image:url(img/hg-flach.jpg); height:70px;}
.hintergrund h1,
.hintergrund h3{color:#fff; border-color:#fff;}
main .button{margin:40px auto 100px auto;}
main .button.leer{transform: rotate(180deg); padding:0 20px 0 30px}
.rapper>p{box-sizing:border-box;}

/* FILTER*/
.filterButton{height:40px; margin-bottom:10px; display:block; position:relative; background:#fff; border:2px solid #ccc; letter-spacing:0.025em; border-radius:20px; color:#ccc; text-align:center; line-height:40px; cursor:pointer; text-transform:uppercase; box-sizing:border-box;}
.filterButton.active{background:#f40; background:linear-gradient(170deg, #ff7200 0%,#ff4400 100%); color:#fff; border:none; line-height:44px;}
.filterButton span{width:12px; height:12px; display:block; position:absolute; right:12px; top:12px; transition:transform .2s; line-height:0px; transform-origin:50% 50%;}
.filterButton.active span{transform:rotate(45deg); top:14px;}
.filterButton:hover span .farbe{fill:#999;}
.filterButton.active span .farbe{fill:#fff;}
.filterButton.active:hover span .farbe{fill:#fdc;}


/* SHOW */
.show{transition:transform .3s;}
.show:hover {transform:scale(1.02);}
.show .karte{overflow:hidden; height:500px; width:100%; position:relative; box-shadow:0px 20px 70px 0px rgba(0,0,0,0.15);-webkit-backface-visibility: hidden; transition:box-shadow .3s;}
.show .karte:hover{box-shadow: 0px 30px 70px 0px rgba(0,0,0,0.3);}
.show .karte div{position:absolute; background-position:center center; background-size:cover; width:560px; height:700px; margin-left:-100px; margin-top:-100px; left:0px; top:0px;}
.show.grid-3 .karte{height:370px; width:100%; box-shadow:0px 10px 30px 0px rgba(0,0,0,0.15);}
.show.grid-3 .karte:hover{box-shadow:0px 20px 50px 0px rgba(0,0,0,0.3);}
.show.grid-3 .karte div{width:420px; height:525px; margin-left:-75px; margin-top:-75px;}
.show aside{z-index:1; position:relative; width:100%; height:100%; box-sizing:border-box; padding:20px;}
.show aside .teaser{color:#fff; font-weight:700; letter-spacing:0.05em; text-align:center; font-size:24px; text-transform:uppercase; display:block;}
.show aside a.button{background-image:url(img/button_kalender.svg); display:inline-block; right:20px; bottom:20px; position:absolute; color:#fff; border-color:#fff; font-size:14px; text-transform:none;}
.show aside .zeitansage{left:20px; bottom:16px; position:absolute; color:#fff; text-transform:uppercase; font-weight:700;}
.show aside .zeitansage .tag{display:block; font-size:14px; letter-spacing:0.05em}
.show aside .zeitansage .uhr{display:block; font-size:30px; letter-spacing:0.01em}
 

/* KACHELN */
.beitrag .bild,
.event .bild,
.moderator .bild{height:185px; border-radius:12px; box-shadow:0px 10px 30px 0px rgba(0,0,0,0.15); background-size:cover; background-repeat:no-repeat; background-position:center center; transition:.2s}
.event .bild{height:265px; color:#fff; text-align:center; font-weight:700; letter-spacing:.05em; font-size:36px; text-transform:uppercase; padding-top:90px; box-sizing:border-box; text-shadow:0px 0px 6px rgba(0,0,0,0.4);}
.moderator .bild{height:170px; box-shadow:0px 10px 30px 0px rgba(0,0,0,0.35); border-radius:50%;}
.beitrag .text,
.event .text{margin:15px 5px;}
.moderator .text{text-align:center; margin-top:20px;}
.beitrag .text .datum,
.event .text .ort{color:#777; font-size:14px; letter-spacing:0.05em; padding-top:5px; display:block;}
.beitrag,
.event,
.moderator{cursor:pointer;}
.beitrag:hover .bild,
.event:hover .bild{box-shadow:0px 20px 40px 0px rgba(0,0,0,0.2); transform:translateY(-5px);}
.moderator:hover .bild{box-shadow:0px 20px 40px 0px rgba(0,0,0,0.5); transform:translateY(-5px);}
.text h3{text-align:left;}

/* COVER */
.headlineCover{height:145px; width:145px; border-radius:6px; background:#444; overflow:hidden; position:absolute; background-size:cover; top:25px; left:40px; z-index:1; box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2); transition:width .2s, height .2s, left .2s, top .2s;}
.headlineCover .play{width:100%; height:100%; background:url("img/Play.svg"); background-size:70px; background-position:center; background-repeat:no-repeat; opacity:0; transition: opacity .4s}
.headlineCover:hover .play{opacity:1; cursor:pointer; height:100%; width:100%; background-color:rgba(0, 0, 0, 0.7);}
.headlineCover .play.loading{height:100%; width:100%; display: flex; justify-content: center; align-items: center; background-size: 70px; background-size: cover; background:none !important; background-color: rgba(0, 0, 0, 0.7) !important; opacity: 1;}
.headlineCover .play.loading::before{content: ''; -webkit-animation: spin 1s infinite; -moz-animation: spin 1s infinite; -o-animation: spin 1s infinite; animation: spin 1s infinite; border: solid 3px #fff; border-top-color: transparent; border-bottom-color: transparent; width: 60px; height: 60px; border-radius: 60px;}

/* REITER */
#serienwahl{width:455px; height:40px; background-image:url(img/reiter.svg); position:absolute; bottom:80px; box-sizing:border-box; padding:13px 0 0 34px; cursor:pointer; opacity:0.8; transition:opacity .2s; font-size:18px; letter-spacing:.05em; color:#444; font-weight:700;}
#serienwahl:hover, #serienwahl.offen{opacity:1;}
#serienwahl .aktiv{display:block;}
#serienwahl .icon{width:12px; height:12px; display:block; position:absolute; right:35px; top:14px; transition:transform .2s; line-height:0px; transform-origin:50% 50%;}
#serienwahl.offen .icon{transform:rotate(180deg);}
#serienwahl ul{display:none; list-style:none; position:absolute; width:100%; top:40px; left:0; background:#fff; border-radius:0px 0px 10px 10px; box-shadow:0px 10px 20px 0px rgba(0,0,0,0.1); overflow:hidden;}
#serienwahl ul li a{color:#444; padding:15px 34px 12px 35px; display:block; border-top:1px solid #e5e5e5; background:#fff; transition:background .2s;}
#serienwahl ul li a:hover{background:#f2f2f2;}

/* MODAL */
#modal, #modal-event, #modal-moderator{display:none; position: relative; z-index:101;}
.abblender{display:block; position:fixed; z-index:50; height:100%; width:100%; top:0; left:0; background-color:rgba(30, 30, 30, 0.96); cursor:pointer;}
.modal-rapper{width:930px; padding:0 50px; position:fixed; z-index:52; left:50%; top:46%; top:calc(50% - 40px); transform:translate(-50%, -50%);}
#modal .pfeil{display:block; position:absolute; height:50px; width:30px; top:50%; cursor:pointer; background-image:url(img/pfeil.svg); background-repeat:no-repeat; background-position:center; background-size:50px 50px;}
#modal .pfeil.next{margin:-25px 0 0 -60px; transform:rotate(180deg);}
#modal .pfeil.prev{margin:-25px 0 0 0; right:0;}
#modal .loading{position:fixed; pointer-events:none; width:100%; height:100%; z-index:51; box-sizing:border-box; top:0; left:0; text-align:center; color:#fff; padding-top:25%; padding-top:calc(50vh - 90px); text-transform:uppercase; font-size:24px; letter-spacing:0.05em; font-weight:700;}
#modal .loading img{margin-bottom:20px;}
.modal{display:block; overflow:hidden; box-shadow:0px 20px 70px 0px rgba(0,0,0,0.15); position:relative;}
.modal .header {height:220px; margin-bottom:0;}
.modal .headlineCover{height:265px; width:265px; border-radius:12px; top:45px;}
.modal .headlineCover .play{background-size:140px;}
.modal .headlineCover:hover .play{height:110%; width:110%; transform:translate(-50%, -50%); position:absolute; top:50%; left:50%;}
.modal .headlineCover.hasNoAudio .play{display:none;}
.modal .header .aktuellerBeitrag{width:560px; left:340px; top:80px; position:relative; z-index:1;}
.modal .header .aktuellerBeitrag .title{font-size:32px; line-height:38px; margin-bottom:10px; display:block;}
.modal .header .aktuellerBeitrag .date{font-size:14px; line-height:26px; display:block;}
.modal .close {width:40px; height:40px; display:block; background:url(img/close.svg); background-repeat:no-repeat; background-position:center; background-size:40px; z-index:2; cursor:pointer; position:absolute; top:20px; right:20px;}
.modal .scroll-rapper{max-height:calc(100vh - 400px); overflow-y:auto;}
.modal .content,
.modal .moderatorText .redakteur{background:#fff; display:flex; box-sizing:border-box; justify-content:space-between; padding:20px 40px;}
#modal-event .content, #modal-moderator .content{display:block; padding-left:330px; min-height:240px;}
.modal .content .taxonomien,
.modal .moderatorText .redakteur .moderatorLinks{flex-basis:265px; flex-shrink:0; flex-grow:0; max-height:210px; overflow:auto; margin-right:25px; margin-top:90px;}
.modal .moderatorText .redakteur .moderatorLinks{overflow:hidden; margin:0;}
.modal .content .taxonomien .button{background-image:none; text-transform:initial; height:auto; margin-bottom:5px; margin-left:5px; line-height:22px; padding:10px 20px 6px 20px; display:inline-block; width:min-content;}
.modal .content .taxonomien .button:hover{margin-right:0px;}
.modal .content .taxonomien .tax_show .button::before{content:"Show:\00a0";}
.modal .content .taxonomien .tax_serie .button::before{content:"Serie:\00a0";}
.modal .content .taxonomien .tax_show,
.modal .content .taxonomien .tax_serie{display:inline-block;}
.modal .content .taxonomien .tax_mod {padding:20px 5px 0px 25px;}
.modal .content .taxonomien .tax_mod span{display:block; margin-bottom:10px;}
.modal .content .taxonomien .tax_mod .redakteure{font-size:16px; text-transform:uppercase; font-weight:700; letter-spacing:0.05em; color:#444;}
.modal .content .taxonomien .tax_mod .redakteur{font-size:14px; font-weight:700; cursor:pointer;}
.modal .content .taxonomien .tax_mod .redakteur.aktiv,
.modal .content .taxonomien .tax_mod .redakteur:hover{color:#ff4400;}
.modal .content .beitragsText,
.modal .moderatorText .redakteur .text{max-height:300px; overflow:auto; width:100%;}
.modal .moderatorText .redakteur .text{max-height:200px;}
.modal .moderatorText .redakteur{display:none; border-top:2px solid #e6e6e6;}
.modal .moderatorText .redakteur .moderatorLinks .bild{height:170px; width:170px; margin:0 auto; box-shadow:0px 10px 30px 0px rgba(0,0,0,0.35); background-size:cover; background-repeat:no-repeat; background-position:center center; transition:.2s; border-radius:50%;}
.modal .moderatorText .redakteur .moderatorLinks .name{margin:20px 5px 0px 5px; text-align:center; margin-top:20px}


/* Modal player */
#modal .beitragsPlayer {display:flex; height:40px; padding:20px; border-top:2px solid #e6e6e6; background:#fff; justify-content:center;}
#modal .beitragsPlayer > div {flex-shrink:0;}
#modal .beitragsPlayer audio {display:none;}
#modal .beitragsPlayer .play {cursor:pointer; width:40px; height:40px; background:url("img/Play_grau.svg"); background-size:100%; background-position:center; background-repeat:no-repeat;}
#modal .beitragsPlayer .play.loading{box-sizing: border-box; -webkit-animation: spin 1s infinite; -moz-animation: spin 1s infinite; -o-animation: spin 1s infinite; animation: spin 1s infinite; background:none !important; background-image: none !important; border: solid 2px #444; border-top-color: transparent; border-bottom-color: transparent; border-radius: 40px;}
#modal .beitragsPlayer .progress {display:flex; align-items: center; margin: 0 10px;}
#modal .beitragsPlayer .progress .current {min-width: 40px; text-align: right; }
#modal .beitragsPlayer .progress .bar {flex-shrink: 0; width: 200px; height: 50px; margin: 0 10px; display: flex; align-items: center; position: relative; }
#modal .beitragsPlayer .progress .bar .empty-slide {position: absolute; left: 0; width: 100%; height: 2px; background: #ccc; z-index: 1; }
#modal .beitragsPlayer .progress .bar .slide {display: inline-block; height: 2px; background: #f40; opacity: .6; width: 0%; position: relative; z-index: 2; }
#modal .beitragsPlayer .progress .bar .slider {display: inline-flex; align-items: center; justify-content: center; margin-left: -19px; margin-right: -19px; width: 50px; height: 50px; cursor: pointer; position: relative; z-index: 3; }
#modal .beitragsPlayer .progress .bar .slider::before {content: ''; display: inline-block; height: 6px; width: 12px; border-radius: 12px; background: #f40; transition: .2s; }
#modal .beitragsPlayer .progress .bar .slider.active::before,
#modal .beitragsPlayer .progress .bar:hover .slider::before {height: 12px; }
#modal .beitragsPlayer .vol {margin-right:50px;}
#modal .beitragsPlayer .volume-icon{ display:inline-block; width:20px; height:20px; margin:10px 5px 10px 20px; background:url("img/volume.svg"); background-size:100%; background-position:center; background-repeat:no-repeat;}
#modal .beitragsPlayer .volume-slider-con {top:-5px; cursor: pointer; display:inline-block; height:30px; width:100px; padding-right:12px; position:relative; overflow: hidden;}
#modal .beitragsPlayer .volume-slider-con::before {content: ''; display:inline-block; height:2px; width:100px; padding-right:12px; position: absolute; background-color: #ccc; top: 50%; margin-top: -1px;}
#modal .beitragsPlayer .volume-slider-con .volume-slider{overflow: hidden; display: flex; align-items: center; cursor: pointer; height:30px; width:12px; position:relative; left: 100%}
#modal .beitragsPlayer .volume-slider-con .volume-slider::after{content: ''; transition: .2s; display: inline-block; width: 12px; height: 6px; background: #444; border-radius:3px;}
#modal .beitragsPlayer .volume-slider-con:hover .volume-slider::after,
#modal .beitragsPlayer .volume-slider-con.active .volume-slider::after{width:12px; height:12px; border-radius:12px; }

/* FOOTER */
footer{width:100%; background-color:#222; padding:50px 0 220px 0; text-align:center; color:#fff; font-weight:700; font-size:16px; letter-spacing:.1em; text-transform:uppercase;}
footer .rapper{padding:0 20px; line-height:26px;}
footer .socialbutton {opacity:.4; float:none;}
footer a{color:#fff;}
footer .copyright{color:#777; margin-top:40px; flex-basis:100%;}


/* Scrolling */
.modal ::-webkit-scrollbar,
.drag-mobile-rapper ::-webkit-scrollbar,
.scrollbereich::-webkit-scrollbar,
.scroll-rapper ::-webkit-scrollbar {width:4px; height:4px; border-radius:4px;}
.modal ::-webkit-scrollbar-track,
.drag-mobile-rapper ::-webkit-scrollbar-track,
.scrollbereich::-webkit-scrollbar-track,
.scroll-rapper ::-webkit-scrollbar-track {border-radius:4px; background:#ccc;}
.modal ::-webkit-scrollbar-thumb,
.drag-mobile-rapper ::-webkit-scrollbar-thumb,
.scrollbereich::-webkit-scrollbar-thumb,
.scroll-rapper ::-webkit-scrollbar-thumb {border-radius:4px; background:#444;}



/* KEYFRAMES */
/* Player Loading */
@-webkit-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } }
@-moz-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } }
@-o-keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg) } }

/* Burger Menu */
@keyframes burger-open-top {50% {transform: translate3d(0, 6px, 0);} 100% {transform: translate3d(0, 6px, 0) rotate(135deg);}}
@keyframes burger-open-bot {50% {transform: translate3d(0, -6px, 0);} 100% {transform: translate3d(0, -6px, 0) rotate(-135deg);}}
@keyframes burger-close-top {0% {transform: translate3d(0, 6px, 0) rotate(135deg);} 50% {transform: translate3d(0, 6px, 0) rotate(0deg);} 100% {transform: translate3d(0, 0, 0);}}
@keyframes burger-close-bot {0% {transform: translate3d(0, -6px, 0) rotate(-135deg);} 50% {transform: translate3d(0, -6px, 0) rotate(0deg);} 100% {transform: translate3d(0, 0, 0);}}







/* RESPONSIVE */

@media screen and (max-width:1156px) {
  h1{width:90%;}
}
@media screen and (max-width:1080px) {
  p{font-size:14px; line-height:24px;}
}


/* Header  */
@media screen and (max-width:1340px) {
  header .socialbutton{display:none;}
  #nav-button{right:20px;}
}
@media screen and (max-width:776px) {
  header {padding:0;}
  header .frequenzen{display:none;}
  header img.logo {left:10px; top:16px; position:relative;}
  #nav-button {right:30px; top:18px;}
}
@media screen and (max-width:400px) {
  header img.logo {left:0px;}
  #nav-button {right:10px;;}
}

/* Player */
@media screen and (max-width:1156px) {
  .player .aktuellerTrack{max-width:340px;}
}
@media screen and (max-width:1080px) {
  .player{padding:10px 20px;}
  .player .aktuellerTrack{max-width:calc(100% - 240px); left:95px; top:22px; position:absolute; }
  .player .volume-icon,
  .player .volume-slider-con,
  #modal .beitragsPlayer > .vol{display:none;}
  .player .player-controls .play{position:absolute; right:40px; bottom:10px; z-index:1;}
  .player .player-controls .cover{position:absolute; left:10px;}
  .player .player-controls .options.mobile-only{position:absolute; right:90px; bottom:10px; z-index:1; display:block; display:inline-block; cursor:pointer; width:40px; height:40px; background-image:url("img/settings_grau.svg"); background-size:70%; background-position:center; background-repeat:no-repeat;}
  .player .player-controls .options.mobile-only.active{background-image:url("img/settings_orange.svg");}
  .player .player-options{display:none; position:fixed; z-index:103; bottom:60px; background:#fff; width:100%; height:40px; box-shadow:0px 0px 20px 0px rgba(0,0,0,0.15); padding:10px 20px; margin-left:-20px;}
  .player .player-options.active{display:block;}
  .player .player-options a.button{left:30px; top:10px; position:absolute;}
  .player .player-options #switch{position:absolute; right:50px;}
  .player .player-options .quality {right:110px; top:23px; position:absolute;}
}
@media screen and (max-width:360px) {
  .player .player-options a.button{text-indent:-999px; padding:0px 25px;}
}

/* Playlist */
@media screen and (max-width:1156px) {
  .playlist .playlistSong:hover a span{display:none;}
  .playlist .header {height:115px;}
  .playlist .headlineCover {height:115px; width:115px; top:15px; left:15px;}
  .playlist .header span.aktuellerTrack{left:150px;}
  .playlist .header span.aktuellerTrack.title{top:45px; font-size:24px;}
  .playlist .header span.aktuellerTrack.artist{top:80px; font-size:16px;}
  .playlist .playlistSong .cover{left:90px;}
  .page-template-page-playlist .playlist .header span.aktuellerTrack{max-width:calc(100% - 180px);}
  .page-template-page-playlist .playlist .playlistSong .track{max-width:calc(100% - 220px);}
}
@media screen and (max-width:1080px) and (min-width:776px), (max-width:700px) {
  .playlist .header .onAir,
  .playlist .header a.button {display:none;}
}

/* Navi */
@media screen and (max-width:1340px) {
  nav .logo {left:20px; top:16px;}
}
@media screen and (max-width:420px) {
  nav ul.menu li a {font-size:32px; line-height:52px;}
  nav .frequenzen {font-size:12px;}
  nav .frequenzen .frequenz {font-size:16px;}
}
@media screen and (max-width:420px) {
  nav ul.menu li a {font-size:32px; line-height:52px;}
  nav .frequenzen {font-size:12px;}
  nav .frequenzen .frequenz {font-size:16px;}
}
@media screen and (max-height:920px) {
  nav ul.menu {margin-top:8%; margin-top:13vh;}
  nav ul.menu li a {font-size:36px; line-height:62px;}
}
@media screen and (max-height:800px) {
  nav ul.menu {margin-top:6%; margin-top:10vh;}
  nav ul.menu li a {font-size:32px; line-height:42px;}
  nav .nav .frequenzen{bottom:110px;}
}
@media screen and (max-height:680px) {
  nav .frequenzen {display:none;}
}
@media screen and (max-height:380px) {
  nav ul.menu {margin-top:2%; margin-top:6vh;}
  nav ul.menu li a {font-size:24px; line-height:36px;}
}

/* Shows */
@media screen and (max-width:1156px) {
  .hintergrund.hg-palmen {height:500px;}
  .hintergrund.hg-palmen .show.grid-4{flex-basis:265px; width:265px;}
  .hintergrund.hg-palmen .show.grid-4 .karte{height:370px; width:100%; box-shadow:0px 10px 30px 0px rgba(0,0,0,0.15);}
  .hintergrund.hg-palmen .show.grid-4 .karte:hover{box-shadow:0px 20px 50px 0px rgba(0,0,0,0.3);}
  .hintergrund.hg-palmen .show.grid-4 .karte div{width:420px; height:525px; margin-left:-75px; margin-top:-75px;}
  header .grid-1{display:none;}
}
@media screen and (max-width:940px) {
  .hintergrund.hg-palmen {margin-bottom:180px;}
  .hintergrund.hg-palmen .flexBreaker{margin-top:400px;}
  .hintergrund.hg-palmen .show.mobile-only {display:block;}
  .hintergrund.hg-palmen .show.grid-4{position:absolute;}
  .hintergrund.hg-palmen .show.grid-4 .karte{box-shadow:0px 0px 30px 0px rgba(0,0,0,0.30);}
  .hintergrund.hg-palmen .show.grid-4:nth-child(2){transform: rotate(5deg) translate(0px, 0px);}
  .hintergrund.hg-palmen .show.grid-4:nth-child(3){transform: rotate(-10deg) translate(0px, 0px);}
  .hintergrund.hg-palmen .show.grid-4:nth-child(4){transform: rotate(8deg) translate(0px, 0px);}
  .hintergrund.hg-palmen .show.grid-4:nth-child(5){transform: rotate(-7deg) translate(0px, 0px);}
  .hintergrund.hintergrund.hg-palmen .show.grid-4.swiping{transition:none;}
  #serienwahl{border-radius:10px 10px 0px 0px; background-image:none; background-color:#fff; width:100%;}
}
@media screen and (max-width:860px) {
  header.hintergrund.hg-party-bw {height:auto;}
  header.hintergrund.hg-party-bw .grid-6{flex-basis:100%; width:100%;}
  header.hintergrund.hg-party-bw .grid-6 .scrollbereich{max-height:initial;}
  header.hintergrund.hg-party-bw .grid-6 .scrollbereich h1{font-size:36px; margin-top:30px; line-height:46px;}
  header.hintergrund.hg-party-bw .grid-4{display:none;}
  #serienwahl{bottom:-35px;}
}
@media screen and (max-width:400px) {
  .show {flex-shrink:1;}
  .show aside a.button{display:none;}
  .show aside .zeitansage {bottom:10px;}
}


/* Beitraege, Events */
@media screen and (max-width:1156px) and (min-width:600px) {
  body.home .beitrag:nth-last-of-type(-n+2){display:none;}
}
@media screen and (max-width:1156px) and (min-width:870px) {
  body.home .event:nth-last-of-type(2){display:none;}
}
@media screen and (max-width:600px) {
  .drag-mobile-rapper {position: relative;}
  .drag-mobile-rapper .flexBreaker { display: block; }
  .drag-mobile-rapper .drag-mobile .flexBreaker { display: none; }
  .drag-mobile-rapper::after {content: ''; height: 100%; width: 140px; position: absolute; pointer-events:none; right:0; top:-15px; background:linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,.9) 80%,rgba(255,255,255,1) 100%);}
  .drag-mobile{flex-wrap:nowrap; justify-content:flex-start; width:100%; position:relative; overflow-x:scroll; padding-top:15px;}
  .drag-mobile .grid{flex-shrink:0;}
}


/* Modalfenster */
@media screen and (max-width:1080px) {
  .modal-rapper {width:800px;}
  .modal .header .aktuellerBeitrag {width:440px; left:330px; top:60px; width:calc(100% - 350px);}
  .modal .header .aktuellerBeitrag .title {font-size:28px;}
  .modal .content .taxonomien {max-height:200px; margin-right:15px; margin-top:100px;}
}
@media screen and (max-width:960px) {
  .modal-rapper {width: 80%;}
  .modal .header .aktuellerBeitrag {left:225px; width:calc(100% - 250px);}
  .modal .header .aktuellerBeitrag .title {font-size:24px;}
  .modal .headlineCover {height:185px; width:185px; left:15px; top:15px;}
  .modal .content {padding:5px 15px;}
  #modal-event .content, #modal-moderator .content{padding-left:0px;}
  .modal .content .taxonomien {flex-basis:185px; margin-top:15px;}
  .modal .content .taxonomien .tax_mod {padding:15px 5px 0px 15px;}
  .modal .content .taxonomien .tax_show .button::before,
  .modal .content .taxonomien .tax_serie .button::before {content:none;}
  .modal .content .taxonomien .button {font-size:12px; padding:0 10px; height:30px; line-height:32px; width:auto;}
  .modal .content .taxonomien .button:hover{padding:0 15px;}
}
@media screen and (max-width:680px) {
  #modal .pfeil {background-size:30px 30px;}
  #modal .pfeil.next {margin-left:-30px;}
  #modal .pfeil.prev {margin-right:20px;}
  .modal .headlineCover {height:110px; width:240px; left:50%; margin-left:-120px;}
  .modal .headlineCover .play {background-size:80px;}
  .modal .header{height:auto;}
  .modal .header .aktuellerBeitrag {left:0; width:100%; text-align:center; top:0; margin-top:140px; margin-bottom:10px;}
  .modal .header .aktuellerBeitrag .title {font-size:22px; line-height:28px; margin-bottom:2px; padding:0 10px;}
  .modal .header .aktuellerBeitrag .date {font-size:12px; line-height: 16px;}
  .modal .content,
  .modal .moderatorText .redakteur {flex-wrap:wrap; padding:0;}
  .modal .content .beitragsText{order:1;}
  .modal .content .taxonomien{order:2; flex-basis:100%; padding:10px; margin:0; border-top:2px solid #e6e6e6; box-sizing:border-box; text-align:center;}
  .modal .moderatorText .redakteur .moderatorLinks{display:none;}
}
@media screen and (max-width:520px) {
  #modal .beitragsPlayer .progress .bar {width:100px; height:6px; border-radius:3px;}
  .modal .header .aktuellerBeitrag .title {font-size:18px; line-height:24px;}
}
@media screen and (max-width:400px) {
  .modal .headlineCover {height:125px; width:100%; left:0; margin-left:0; top:0; border-radius:0;}
  #modal .beitragsPlayer .progress .current,
  #modal .beitragsPlayer .progress .total{display:none;}
}






/* Alles von Google Spreadsheets ausblenden
body.home #main header.hintergrund.hg-party .rapper .show,
body.home #main .hintergrund.hg-palmen,
body.home #main .hintergrund.hg-palmen + .rapper,
body.home #main .hintergrund.hg-palmen + .rapper + .drag-mobile-rapper {display:none}
.playlist .header span.aktuellerTrack,
.playlist .playlistSong .track{max-width:initial;}
.menu-hauptmenue-container ul#menu-hauptmenue li#menu-item-50716{display:none}
.menu-hauptmenue-container ul#menu-hauptmenue li#menu-item-50717{display:none}
*/