@font-face {
    font-family: 'Roboto-bold-italic';
    src: url('../font/Roboto_Condensed/RobotoCondensed-BoldItalic.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-light-italic';
    src: url('../font/Roboto_Condensed/RobotoCondensed-LightItalic.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-bold';
    src: url('../font/Roboto_Condensed/RobotoCondensed-Bold.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-light';
    src: url('../font/Roboto_Condensed/RobotoCondensed-Light.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-italic';
    src: url('../font/Roboto_Condensed/RobotoCondensed-Italic.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto-regular';
    src: url('../font/Roboto_Condensed/RobotoCondensed-Regular.woff2') format('woff2'),
        url('../font/Roboto_Condensed/RobotoCondensed-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
  font-family: 'FontAwesome-Solid';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../font/fontAwesome/fa-solid-900.woff2") format("woff2") }

  @font-face {
  font-family: 'FontAwesome-Brands';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("../font/fontAwesome/fa-brands-400.woff2") format("woff2") }



/* ##################################################*/
* {
         margin                          : 0;
         padding                         : 0;
         }
/* Fuer Sticky Menue */
html {
         scroll-behavior: smooth;
}

html, body {
        height: 100vh;
        }

html {
        /* scrollbar fix (prevent ugly left pull for lower content sites) */

}

article,
.termine {
         padding-bottom          : 3em;
         }



/* ---------------------- ENDE --------------------- */


/* ##################################################*/
/*           Generelle Layout-Einstellung            */
/* ##################################################*/

.unseen {
         position        : absolute;
         height          : 1px;
         width           : 1px;
         overflow        : hidden;
         clip            : rect(0 0 0 0);
         clip-path       : inset(100%);
         white-space     : nowrap;
}




:root {
  --schrift-hell : white;
  --schrift      : #133A7C;
  --linkdkl      : #2A6BAC;
  --link         : #4F4F4F;
  --link-hover   : #C6C6C6;
  --link-hover-text:#133A7C;
  --link-focus   : #47A8E5;
  --link-rahmen  : #0050A0;
  --h-rahmen     : #BFBFBF;
  --linkdownloads: #4F4F4F;
  --escort-hellblau   : #47A8E5;  /*logofarbe */
  --escort-dklblau    : #2A6BAC;  /*logofarbe */
  --table-border : #5F5F5F;
  --th-back      : #008AD1;  /*logofarbe */
  --tr-back      : #EFEFEF; }






         /* Definition Skiplink */
.skiplinks,
.skiplink a,
.skiplink a:hover,
.skiplink a:visited {
        position: absolute;
        overflow: hidden;
        top: -1000px;
        left: -1000px;
        font-size: 1.25rem;
}

.skiplink a:focus,
.skiplink a:active {
        position: absolute;
        top: 0;
        left: 0;
}

.skiplink a:focus,
.skiplink a:active {
         position: absolute;
         top: 1em;
         left: 0;
         border-right: 3px solid #000000!important;
         border-top: 3px solid #000000!important;
         border-bottom: 3px solid #000000!important;
         padding: 0.5em 0.75em;
         color: #000000;
         background-color: white;
         z-index:1000;
}


/* Ende Skiplink */
.counter h3 {
    font-size: 180%;
    text-align: center;
    margin: 0.75em 0em 1em 0;
}

.termine h3 {
    font-size: 180%;
    margin: 0.75em 0em 0.35em 0;
}

.termine .djev_item_content h3 {
    font-size: 130%;
    margin: 0em 0em 0.35em 0;
}

.djev_mod_items {
    margin: 0em 0;
}

.termine .djev_mod_items .djev_item_content {
    padding: 0.5em 0;
}

.termine .djev_mod_items .djev_item {
    position: relative;
    margin: 0;
    border-bottom: 0px solid #FFBF00;
}
.djev_mod_items .djev_time {
         text-align      : left;
         color: #1F1F1F!important;     }

.termine h4{
         font-size       : 120%;
}


.djev_mod_items .djev_item {
         font-family: 'Roboto-bold', sans-serif;

    position     : relative;
    padding      : 0.5em;
    background   : #d3efed;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 3em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-bottom: 0px solid white;
box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}


.djev_mod_items .djev_item_title{
font-family: 'Roboto-light', sans-serif;
font-weight:300
 }

.djev_mod_items .djev_intro{
font-family: 'Roboto-light-italic', sans-serif;
font-weight:300 ;
font-size: 80%
 }

.eventtime {
         font-weight     : bold;
         font-size       : 120%;
         background: #d3efed;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 3em;
    border-bottom-left-radius: 0.5em;
    border-bottom-right-radius: 0.5em;
    border-bottom: 0px solid white;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
    padding: 0.25em 1em;
}

.djev_list .djev_item {
    padding: 15px 20px;
    border: 0px solid #f5f5f5;
    margin-bottom: 15px;
}

.event-text {
padding: 0.25em 1em;
}

.dj-categories {
         display         : flex;
         flex-wrap       : wrap;
         justify-content : space-between;
         }



#djmediatools a.dj-category-escort {
    background: transparent;
    border: 0px solid #ccc;
    padding: 8px;
    margin: 10px;
    box-shadow: 0 0 5px #aaa;
    border-radius: 3px;
    -webkit-transition: all 200ms ease 50ms;
    transition: all 200ms ease 50ms;
}




#djmediatools a.dj-category-escort {
         width   : 45%;
         }

.dj-category-in          {
         height: 300px;
         }
















@supports not (display: grid) {
  /* at least space them out a bit */

.sticky-menu {
         width   : 95%;
         margin  : 0 auto;
}

.logo {
       width   : 60%;
         float   : left;
         }
.menu-top {
       width   : 25%;
         float   : right;
         }

header,
.startseite,
.themen,
article,
footer {
         width   : 100%;
         float   : left;}




.component {
  width: 85%;
  margin: 0 auto; }

}








.ls-tabelle {
         display         : flex;
         flex-wrap       : wrap;
         width           : 100%;
         justify-content : space-between}

.ls-spalte-text {
         width           : 60%;
         }
.ls-spalte-bild {
         width           : 38%;
         align-self      : end;}