@import url(http://fonts.googleapis.com/css?family=Roboto:400,300);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);

div
{
    display: block;
}

*
{
    font-family: 'Roboto', sans-serif;
}

* a
{
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    cursor: pointer !important;
}

*:focus
{
    outline: 0;
}

hr
{
	margin-left: 20px;
	margin-right: 20px;
}

/* Ersatz fuer align="center", das im Inhalt der Beitraege an den
   Download-Knoepfen steht. Das Attribut ist abgekuendigt; die Klasse
   macht genau dasselbe. Ergaenzt am 16.09.2026. */
.mitte
{
    text-align: center;
}

.copyright
{
clear:both;
    text-align:center;

    /* Gleicher Abstand nach oben wie nach unten. Vorher kam der Abstand
       aus dem Polster der beiden Behaelter darueber - 160 Pixel oben,
       nichts darunter.

       Beides als Innenabstand, nicht als Aussenrand. Nach oben, weil
       'clear:both' einen oberen Aussenrand aufbraucht, um den Kasten
       unter den umflossenen Beitrag zu schieben - es blieben 10 Pixel.
       Nach unten, weil der Aussenrand des letzten Elements aus dem
       Koerper herausfaellt und die Fusszeile am Fensterrand klebte.
       Oben 16 statt 26: Der letzte Beitrag bringt 10 Pixel eigenen
       Rand mit. */
    margin:0 auto;
    padding-top:16px;
    padding-bottom:26px;

    font-size:7pt;
    color:#555;
}

* a:hover
{
    color: #abaee8 !important;
}

.smallme
{
    font-size:11pt;
}

html
{
    /* Nur das Dokument scrollt. Bis zum 15.09.2026 stand overflow-y auf
       html UND body - dann legt der Browser zwei Leisten nebeneinander,
       eine fuer jedes Element. */
    overflow-y: scroll;
}

html, body
{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;

    outline: 0;

    /* Die Kachel hat keine Farbe unter sich. Ueberall, wo sie nicht
       gezeichnet wird - beim Drehen des Geraets waehrend des Neuaufbaus,
       in den Randbereichen und beim Ueberziehen am Seitenende - kam
       sonst das Weiss des Browsers durch. #dedede ist der Mittelwert
       der Kachel, der Uebergang faellt also nicht auf.
       Ergaenzt am 16.09.2026. */
    background-color: #dedede;
    background-image: url(../img/bg_rep.png?v=1403798894);
}

body
{
    /* Genau 100 Prozent heisst: so hoch wie das Fenster, nicht so hoch
       wie die Seite. Der Hintergrund des Koerpers endete damit am
       unteren Fensterrand, und darunter zeichnete nur noch die
       Arbeitsflaeche. Als Mindesthoehe deckt er die ganze Seite. */
    height: auto;
    min-height: 100%;
}

nav
{
    width: 100%;
    height: 128px;
}

.nav_wrapper
{
    width: 900px;
    height: 128px;
    margin: auto;
}

/* Kein Unterstrich an Logo und Symbolen - Browser unterstreichen
   Verweise sonst beim Anklicken. Ergaenzt am 15.09.2026. */
#nav_top a
{
    text-decoration: none;
}

#nav_top
{
    overflow: hidden;

    width: 100%;
    height: 76px;

    background: #2e2e2e;
    background-image: url(../img/header_top.png?v=1403798901);
}

.active
{
    color:#fff !important;
}

.login_btn
{
    float: right;

    margin-top: 15px;
    margin-right:5px;
    color:#aaa;
    cursor: pointer !important;
    
}

.login_btn a:hover
{
    color: #ddd !important;
}

.login_btn a
{
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
    cursor: pointer !important;
    text-decoration: none;

    color: #aaa;
}

#login_full
{
    position: absolute;
    top: 188px;
    bottom: 0;

    width: 100%;

    background: #222;
}

#login_container
{
    width: 400px;
    height: 300px;
    margin: auto;
    margin-top: 80px;
}

#login_container ul
{
    margin: auto;
}

#impressum
{
    margin:20px;
    color:#444;
}

#impressum p
{
    font-weight:100;
}

#about
{
    color:#333;
}

#about p
{
    font-weight:100;
}

#about h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    font-weight: 100;
    line-height: 40px;

    float: left;

    margin: 0;
    padding-left: 10px;

    color: #fff;
}

#admin_container
{
    width:325px;
    padding-left:10px;
    padding-right:10px;
    height:auto;
    padding-bottom:20px;

    margin:auto;
    margin-top:100px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
    border-radius:3px;
}

#ainput_container, #ainput_container *
{
    list-style:none;
    margin:0;
}

#ainput_container ul
{
    margin-left:-30px;
    margin-top:20px;
}

.admin_input
{
    width:96%;
    height:40px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
    margin-top:10px;
}

.admin_submit
{
    width:96%;
    height:40px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
    margin-top:10px;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.admin_submit:hover
{
    width:96%;
    height:40px;
    background:#ddd;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
    margin-top:10px;
}

.admin_input2
{
    position:absolute;
    width:800px;
    top:0;
    height:40px;
    border:0;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
}

.admin_file
{
    width:95%;
    height:40px;
    background:#fff;
    position:relative;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
    margin-top:10px;
}

.newtable
{
    background:#fff;
    width:800px;
    margin:10px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #ccc;
    padding:0;
}

.newtable tr
{
    margin:0;
    border-bottom:1px solid #ccc;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.center
{
    margin:auto;
}

.admin_file2
{
    -webkit-opacity:0.0;
    -moz-opacity:0.0;
    opacity:0.0;
    position:absolute;
    width:800px;
    top:0;
    height:40px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    font-size:12pt;
    color:#333;
}

.admin_text
{
    width:96%;
    height:160px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    padding:4px;
    resize:none;
    font-size:12pt;
    color:#333;
    margin-top:10px;
}

.admin_post *
{
    list-style:none;
}

.admin_sub
{
    width:150px;
    height:40px;
    background:#fff;
    border:1px solid #aaa;
    -webkit-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
    padding:4px;
    font-size:12pt;
    color:#333;
    margin-top:10px;
}

.admin_sub:hover
{
    background:#eee;
}

#admin_container h2
{
    line-height:50px;
    margin:0;
    margin-left:10px;
    margin-top:50px;
}

.aboutimg
{
    height:auto !important;
    min-height:400px !important;
    background:#fff;
    border:1px solid #666;
    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.74);
    -moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.74);
    box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.74);
}

.justifyabout
{
    float:left;
    text-align:justify;
    text-justify:inter-word;
}

#login_container li
{
    margin: 0;

    list-style: none;
}

#login_container2
{
    width: 880px;
    height: auto;
    margin: auto;
    margin-top: 30px;
    overflow:hidden;
    padding-bottom:60px;
}

/* Meldungen aus dem Adminbereich - siehe adminmeldungen() in
   inc/functions.php. Ergaenzt am 16.09.2026. */
/* Eine gelungene Aenderung ist gruen, ein Befund rot - man soll den
   Unterschied sehen, ohne zu lesen. Ergaenzt am 17.09.2026. */
.adminmeldung.gut
{
    background: #2f7d32;
}

.adminmeldung a
{
    color: #fff;
    text-decoration: underline;
}

.adminmeldung
{
    font-family: 'Roboto', sans-serif;
    font-size: 12pt;

    max-width: 880px;
    margin: 10px auto;
    padding: 10px;

    text-align: center;

    color: #fff;
    background: #a33;
}

/* Im Adminbereich sind die Ueberschriften der grauen Balken und die
   Eintraege der Listen Verweise. Der Browser unterstreicht sie sonst -
   im Rest der Seite tut er das nirgends. Ergaenzt am 16.09.2026. */
.newsheader a,
.newtable a
{
    text-decoration: none;
}

.adminpage
{
    background:#222;
    height:auto;
    min-height:300px;
}

/* Die 160 Pixel Mindesthoehe von .news halten auf der Startseite die
   Beitragskaesten auf der Hoehe des Logofelds daneben. Ueber dem
   Kontaktformular steht kein Logofeld - dort blieb nur leerer Boden
   unter dem Einleitungstext. Ergaenzt am 16.09.2026. */
#login_container2 .news
{
    min-height: 0 !important;

    /* Der Kasten schwimmt, die Feldliste beginnt deshalb neben ihm und
       nicht unter ihm: Der obere Aussenrand der Liste (.topme) zaehlt ab
       der Oberkante des Behaelters und verpufft. Was den sichtbaren
       Abstand macht, ist der untere Rand des Kastens selbst - der stand
       auf den 10 Pixeln aus .grid3. Ergaenzt am 16.09.2026. */
    margin-bottom: 40px;
}

#login_container2 ul
{
    margin: auto;
}

#login_container2 li
{
    margin-left:-30px;
    width:880px;

    list-style: none;
}

.linput
{
    font-family: 'Roboto', sans-serif;
    font-size: 18pt;
    line-height: 50px;

    width: 300px;
    height: 50px;
    padding-right: 10px;
    padding-left: 10px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.linput:focus
{
    outline: 0;
    background: #333;
}

.linput
{
    font-family: 'Roboto', sans-serif;
    font-size: 18pt;
    line-height: 50px;

    width: 300px;
    height: 50px;
    padding-right: 10px;
    padding-left: 10px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.linput:focus
{
    outline: 0;
    background: #333;
}

.linput3
{
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    line-height: 40px;

    width: 860px !important;
    height: 40px;
    padding-right: 10px;
    padding-left: 10px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.linput3:focus
{
    outline: 0;
    background: #333;
}

.linput2
{
    font-family: 'Roboto', sans-serif;
    font-size: 13pt;
    line-height: 30px;

    width: 850px;

    /* 200 Pixel waren gut ein Drittel des Telefonschirms und auch am
       Rechner der groesste Block der Seite. 140 sind rund vier Zeilen -
       laengere Nachrichten rollen im Feld. Geaendert am 16.09.2026. */
    height:140px;
    resize:none;
    padding-right: 10px;
    padding-left: 10px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.linput2:focus
{
    outline: 0;
    background: #333;
}

.lsubmit
{
    font-family: 'Roboto', sans-serif;
    font-size: 18pt;
    font-weight: 100;

    width: 150px;
    height: 50px;
    margin-top: 40px;
    margin-left: 75px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.lsubmit:hover
{
    color: #fff;
    background: #333;
}

.lsubmit2
{
    font-family: 'Roboto', sans-serif;
    font-size: 17pt;
    font-weight: 100;

    width: 130px;
    height: 40px;
    margin-top: 40px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    color: #fff;
    border: 1px solid #fff;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
    background: #444;
}

.lsubmit2:hover
{
    color: #fff;
    background: #333;
}

.llabel
{
    font-size: 14pt;

    color: #444;
}

.spaceli
{
    width: 300px;
    height: 25px;
}


h1
{
    font-family: 'Oswald', sans-serif;
    font-size: 25pt;
    line-height: 76px;

    float: left;

    margin: 0;
    padding-top: 7px;

    text-transform: uppercase;

    color: #fff;
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .18);
}

.social_buttons
{
    float: right;

    width: auto;
    height: 64px;
}

.social_btn
{
    float: left;

    width: 48px;
    height: 48px;
    margin-top: 16px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 100% !important;
}

.facebook
{
    background: url(../img/facebook.png?v=1403798897);
}

.youtube
{
    background: url(../img/youtube.png?v=1403859785);
}

.soundcloud
{
    background: url(../img/soundcloud.png?v=1403798965);
}

.facebook:hover
{
    background: url(../img/facebook_hover.png?v=1403798900);
}

.youtube:hover
{
    background: url(../img/youtube_h.png?v=1403864186);
}

.soundcloud:hover
{
    background: url(../img/soundcloud_hover.png?v=1403798966);
}

.darkblue
{
    font-family: 'Oswald', sans-serif;

    color: #455def;
}

#nav_bot
{
    /* Faengt das schwimmende #main_menu ein - dieselbe Zeile steht seit
       jeher in #nav_top, hier fehlte sie.

       Ohne sie ragt das Menue aus der Leiste heraus und draengt die
       Textzeilen aller folgenden Bloecke zur Seite. Sichtbar wurde das
       im Adminbereich: Dort folgt #pagetitle unmittelbar auf die
       Navigation, und der Titel ADMIN stand um die Breite des Menues
       eingerueckt. Auf der Startseite liegen header und player
       dazwischen, dort fiel es nie auf.
       Ergaenzt am 16.09.2026. */
    overflow: hidden;

    width: 100%;
    height: 52px;

    border-top: 1px solid #222;
    background: #383838;
    background-image: url(../img/header_bot.png?v=1403798900);
    background-repeat: repeat-x;
}

#main_menu
{
    float: left;

    height: 52px;
    margin: 0;
    padding: 0;

    list-style: none;

    text-decoration: none;
}

#main_menu li
{
    float: left;

    height: 52px;

    list-style: none;

    text-decoration: none;
}

#main_menu li:not(:first-child)
{
    margin-left: 15px;
}

#main_menu li a.active,
#main_menu li a:hover
{
    color: #455def !important;
}

#main_menu li a
{
    font-family: 'Oswald', sans-serif;
    line-height: 52px;

    text-decoration: none;
    text-transform: uppercase;

    color: #fff;
}

header
{
    width: 100%;
    height: 272px;

    border-top: 1px solid #222;
}

#player
{
    cursor: pointer;

    width: 100%;
    height: 100px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    background: #383838;
    background-image: url(../img/pu.png?v=1403798905);
    background-repeat: no-repeat;
    background-position: center center;
}

#player:hover
{
    background: #515151;
    background-image: url(../img/pu_h.png?v=1403798905);
    background-repeat: no-repeat;
    background-position: center center;
}

.newplayer
{
    background: #515151;
    background-image: url(../img/pd.png?v=1403798903) !important;
    background-repeat: no-repeat;
    background-position: center center;
}

.newplayer:hover
{
    background: #515151;
    background-image: url(../img/pd_h.png?v=1403798903) !important;
    background-repeat: no-repeat;
    background-position: center center;
}

#content
{
    width: 900px;
    height: auto;
    min-height: 400px;
    margin: auto;
    padding-top: 20px;
    padding-bottom: 0;
}

#track_container
{
    /* Flex nur fuer die senkrechte Mitte: Die Kacheln sind 166 Pixel
       hoch, der Streifen 272 - vorher blieben unten 46 Pixel uebrig,
       weil inline-block auf der Grundlinie sitzt. */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-align: center;
       -ms-flex-align: center;
          align-items: center;

    /* auto statt scroll: Die Leiste erscheint nur, wenn die Titelliste
       tatsaechlich breiter ist als das Fenster. */
    overflow-x: auto;
    overflow-y: hidden;

    width: 100%;
    height: 272px;

    white-space: nowrap;
}

/* Breite und Rand der SoundCloud-Rahmen. Bis zum 16.09.2026 standen
   beide als Attribut am iframe: width="100%" ist dort nicht erlaubt
   (der Pruefer erwartet eine Pixelzahl), frameborder ist abgekuendigt.
   Gleiche Werte, gleiche Darstellung. */
.track iframe
{
    width: 100%;
    height: 166px;
    border: 0;
}

.track
{
    display: inline-block;

    /* Nicht schrumpfen: #track_container ist eine Flexbox, sonst
       quetschen sich alle Kacheln in die Fensterbreite. */
    -webkit-box-flex: 0;
       -ms-flex: 0 0 auto;
            flex: 0 0 auto;

    width: 400px;
    height: 166px;
    margin: 30px;
    margin-top: 30px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    background: white;

    -webkit-tap-highlight-color: transparent;
}

/* Die Unschaerfe gibt es nur, wo man mit einem Zeiger darauffahren kann.
   Auf einem Telefon blieben sonst ALLE Titel dauerhaft verschwommen -
   dort tritt der Hover-Zustand nie ein. */
@media (hover: hover)
{
    .track
    {
        -webkit-filter: blur(2px);
           -moz-filter: blur(2px);
            -ms-filter: blur(2px);
                filter: blur(2px);
    }
}

.track:hover
{
    -webkit-filter: blur(0px);
       -moz-filter: blur(0px);
        -ms-filter: blur(0px);
            filter: blur(0px);
}

.news
{
    min-height: 160px !important;

    border: 1px solid #fff;
    background: #f5f5f5;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}

.newse
{
    height:auto;

    border: 1px solid #fff;
    background: #f5f5f5;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}

.news8
{
    height:auto !important;

    border: 1px solid #fff;
    background: #f5f5f5;
    -webkit-background-clip: padding-box;
       -moz-background-clip: padding-box;
            background-clip: padding-box;
}

.newsheader a
{
    
}

.newsheader a:hover h2
{
    color:#888;
}

.news:hover > .newsheader
{
    background:#333333 !important;
}

.news:hover
{
    /* Hier stand bis zum 16.09.2026 hinter der Farbangabe noch ein
       abgetrenntes Vorrang-Schluesselwort. Der Strichpunkt beendet die
       Angabe, das Wort danach ist eine eigene, ungueltige Angabe - der
       Pruefer meldet sie, gewirkt hat sie nie. Entfernt,
       nicht repariert: Mit !important wuerde die Regel den Ruecksetzer
       fuer Geraete ohne Zeiger ueberstimmen. */
    background: #fafafa;
}

.newsheader
{
    width: 100%;
    height: 40px;

    background: #444;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.news_titlelinput
{
    width:860px;
    margin:0;
    height:40px;
    background:#444;
    border:none;
    color:#fff;
    font-size:16pt;
    padding-left:10px;
    padding-right:10px;
}

.news_titlelinput5
{
    width:420px;
    margin:0;
    height:40px;
    background:#444;
    float:left;
    border:none;
    color:#fff;
    font-size:16pt;
    padding-left:10px;
    padding-right:10px;
}

.news_titlelinput6
{
    width:629px;
    border-right:1px solid #444 !important;
    margin:0;
    height:40px;
    background:#fff;
    float:left;
    border:none;
    color:#333;
    font-size:16pt;
    padding-left:10px;
    padding-right:10px;
}

.news_titlelinput7
{
    width:210px;
    margin:0;
    height:40px;
    background:#fff;
    float:left;
    border:none;
    color:#333;
    font-size:16pt;
    padding-left:10px;
    padding-right:10px;
}

.news_titlelinput2
{
    width:880px;
    margin:0;
    height:40px;
    background:#444;
    border:none;
    color:#fff;
    font-size:12pt;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.sp
{
    color:#333;
}

.sp:hover
{
    color:#777;
}

.news_titlelinput2:hover
{
    background:#888;
}

.news_textinput
{
    color:#444;
    background:none;
    border:0;
    width:860px;
    min-height:200px;
    resize:none;
    height:auto;
    padding:10px;
    font-size:10pt;
}

.newsheader h2
{
    float:left;
     -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.prettysubmit1
{
    height:40px;
    width:100px;
    background:#555;
    float:right;
    border:none;
    color:#fff;
    font-size:11pt;
    position:relative;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.prettysubmit1 input
{
    width:100px;
    height:40px;
    z-index:101;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
}

.prettysubmit1 p
{
    width:100px;
    line-height:10px;
    padding-left:10px;
    position:absolute;
    top:0;
    left:0;
}

.prettysubmit1:hover
{
    background:#333;
}

.prettysubmit
{
    height:40px;
    background:#555;
    float:right;
    border:none;
    color:#fff;
    font-size:11pt;
    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
}

.prettysubmit:hover
{
    background:#333;
}

.rightme
{
    font-size:9pt;
    color:#aaa;
}

.news h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    font-weight: 100;
    line-height: 40px;

    float: left;

    margin: 0;
    padding-left: 10px;

    color: #fff;
}

.newse h2
{
    font-family: 'Roboto', sans-serif;
    font-size: 16pt;
    font-weight: 100;
    line-height: 40px;

    float: left;

    margin: 0;
    padding-left: 10px;

    color: #fff;
}


.news p
{
    font-family: 'Roboto', sans-serif;
    font-size: 11pt;
    font-weight: 100;

    width: 97%;
    padding-left: 10px;

    color: #333;
}

#pagetitle
{
    width: 100%;
    height: 60px;
    margin-top: 0;

    background: url(../img/bgtile.png?v=1403798894);
}

#page_loader
{
    /* Kein Polster mehr: Den Abstand zur Fusszeile setzt die Fusszeile
       selbst, damit er oben und unten gleich ist. */
    padding-bottom:0;
    height:auto;
}

.seperator
{
    width: 97%;
    height: 1px;
    margin-left: 10px;

    background: #555;
}

#pagetitle h2
{
    font-family: 'Roboto', sans-serif;
    line-height: 60px;

    float: left;

    margin: 0;
    margin-left: 10px;

    text-transform: uppercase;

    color: #fff;
}

#pagetitle p
{
    line-height: 60px;

    float: right;

    color: #777;
}

#pagesub
{
    width: 880px;
    margin: auto;
}

#pagesub h2
{
    font-size:15pt;
}

.topme
{
    /* Waren 200 Pixel - eine leere Bildschirmhoehe zwischen dem
       Einleitungskasten und dem ersten Feld. Auf 40 gesetzt am
       16.09.2026. */
    margin-top:40px !important;
}

.newspic
{
    width: 160px;
    height: 160px;

    background: url(../img/logo.png?v=1421584204);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border:1px solid #eee;

    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.74);
    -moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.74);
    box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.74);
}

.relimg
{
    height:150px;
    width:150px;
}

/* Zwischen den Kacheln steht im Quelltext Leerraum. Der Browser
   unterstreicht ihn als Teil des Verweises - sichtbar als kleine
   Striche zwischen den Reihen, sobald die Kacheln nicht mehr schwimmen.
   Ergaenzt am 16.09.2026. */
#releaseliste a
{
    text-decoration: none;
}

.release
{
    overflow:hidden;
    float: left;

    width: 120px;
    height: 120px;
    margin: 20px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
    text-align: center;

    border: 1px solid #aaa;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background: #eee;
    opacity:0.8;
}

.release:hover
{
    opacity:1;

    border: 1px solid #aaa;
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
    background: #eee;
}

.release p
{
    font-size: 8pt;
    line-height: 20px;

    margin: 0;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;
    text-align: center;
    text-decoration: none;
    font-family:'Roboto',sans-serif;
}

.artist
{
    color:#666;
}

.songtitle
{
    color:#444;
    font-size:6pt;
}

.release img
{
    width: 108px;
    height: 108px;
    margin: 5px;

    -webkit-transition: all .150s ease-in;
       -moz-transition: all .150s ease-in;
            transition: all .150s ease-in;

    border: 1px solid #eee;
    background: #eee;
}

.release:hover > img
{
    width:40px;
    height:40px;
    border: 1px solid #eee;
    background: #eee;
}

.bigone
{
    width:900px;
    margin:auto;
    height:auto;
    min-height:160px;
    clear:both;
}


/* Grid */
.grid05
{
    float: left;

    width: 160px;
    min-height: 50px;
    margin: 10px;
}

.grid1
{
    float: left;

    width: 260px;
    min-height: 50px;
    margin: 10px;
}

.grid2
{
    float: left;

    width: 580px;
    min-height: 50px;
    margin: 10px;
}

.grids
{
    float: left;

    width: 560px;
    min-height: 50px;
    margin: 10px;
}

.grid25
{
    float: left;

    width: 600px;
    min-height: 50px;
    margin: 10px;
}

.grid3
{
    float: left;

    width: 880px;
    min-height: 50px;
    margin: 10px;
}

@media screen and (max-width: 1024px) {
    .hidden-mobile {
      display: none;
}
}

@media screen and (min-width: 1025px) {
    .hidden-desktop {
      display: none;
}  
}


/* ==========================================================
   Touchgeraete kennen kein Hover -- ergaenzt am 15.09.2026

   Tippt man auf einem Telefon einen Verweis an, bleibt der
   Hover-Zustand haengen, bis man woandershin tippt. Farben und
   Symbole "kleben" dann. Hier bekommen die betroffenen Regeln ihr
   normales Aussehen zurueck, sobald das Geraet keinen Zeiger hat.
   ========================================================== */
@media (hover: none)
{
    * a:hover
    {
        color: inherit !important;
    }

    .login_btn a:hover
    {
        color: #aaa !important;
    }

    .facebook:hover
    {
        background: url(../img/facebook.png?v=1403798897);
    }

    .youtube:hover
    {
        background: url(../img/youtube.png?v=1403859785);
    }

    .soundcloud:hover
    {
        background: url(../img/soundcloud.png?v=1403798965);
    }

    /* Der aktive Menuepunkt bleibt hervorgehoben - nur das Hover faellt weg. */
    #main_menu li a:hover
    {
        color: #fff !important;
    }

    #main_menu li a.active
    {
        color: #455def !important;
    }

    #player:hover
    {
        background: #383838;
        background-image: url(../img/pu.png?v=1403798905);
        background-repeat: no-repeat;
        background-position: center center;
    }

    .newplayer:hover
    {
        background: #515151;
        background-image: url(../img/pd.png?v=1403798903) !important;
        background-repeat: no-repeat;
        background-position: center center;
    }

    .news:hover
    {
        background: #f5f5f5;
    }

    .news:hover > .newsheader
    {
        background: #444 !important;
    }

    .sp:hover
    {
        color: inherit;
    }

    /* Kein graues Kaestchen beim Antippen */
    a,
    .social_btn,
    #player,
    .track,
    #main_menu li a
    {
        -webkit-tap-highlight-color: transparent;
    }
}