.drumherum {
    position: relative;
    background-color: #b2c2e9;
    margin: 0;
    color: #000;
    display: flex;
    justify-content: center;
    align-items: center;

  background-color:#121200;
  background-image:url('../../bilder/sfn/cawo4-back2.jpg');
  background-position: -1em -1em;
  background-size: 120%;

  border: 2px solid #280100;
  }


.drumherum-small {
  background-image:url('../../bilder/sfn/slider-small-back.jpg')!important;
}



/* ************ folgendes wird noch je nach Bildschirmaufloesung unterschiedlich gehandelt ***************************************** */
/* ************ .content-slider Breite bei MOB voll, STAT 55%  *************************************************** */

  .content-slider {
    overflow:hidden;
    visibility:hidden;
    position:relative;
    padding: 1.8em;
    margin: 0.5em;
    background-image:url('../../bilder/sfn/SFN-Hintergrund-02.jpg');
    background-position: 0 0;
    background-size: 100%;
    border: 1px solid #000000;
  }

  @media screen and (min-width: 1561px) { /* wenn mindestens 661 pix, dann Navi nebeneinander - scrollt nicht mit ... (## STAT ##) */
    .content-slider {width: 65%;}
  }

  @media screen and (max-width: 1560px) {  /* ... ansonsten wenn mehr, dann Klappmenue welches mitscrollt ("position") (## MOB ##)*/
    .content-slider {width: 100%;}
  }

  .slider-wrapper {
    overflow:hidden;
    position:relative;
    /* top: -0.75vh; */
    margin-bottom: -2.5em;
  }
  .slider-wrapper>*{float:left;width:100%;position:relative}

  .slider-control {
    height:1em;
    position: relative;
    /*border: 3px solid magenta;*/
    font-family: 'Work Sans', sans-serif;

  }

  .slider-control a,.slider-control .slider-menu{
    position:absolute;
    font-size: 2em;
    display:inline-block;
    /* text-shadow:  1px  1px 1px #333333, 1px -1px 1px #333333, -1px  1px 1px #333333, -1px -1px 1px #333333; */
    color:rgb(255, 255, 255);
  }

  .slider-control .slider-prev{
    font-size:9em;
    text-shadow:  1px  1px 1px #333333, 1px -1px 1px #333333, -1px  1px 1px #333333, -1px -1px 1px #333333;
    opacity: 0.3;
    left:0;
  }

  .slider-control .slider-next{
    font-size:9em;
    text-shadow:  1px  1px 1px #333333, 1px -1px 1px #333333, -1px  1px 1px #333333, -1px -1px 1px #333333;
    opacity: 0.3;
    right:0
  }

  @media screen and (min-width: 1361px) {.slider-control a,.slider-control .slider-prev .slider-next{margin-top:-12vh; color:rgb(255, 255, 255);}}
  @media screen and (max-width: 1360px) {.slider-control a,.slider-control .slider-prev .slider-next{margin-top:-9vh; color:rgb(255, 255, 255);}}
  @media screen and (max-width: 960px) {.slider-control a,.slider-control .slider-prev .slider-next{margin-top:-6vh; color:rgb(255, 255, 255)}}

  .slider-prev:hover, .slider-next:hover {
    color: white;
    font-size:9em;
    opacity: 1;
  }

  .slider-control .slider-menu{
    position: relative;
    opacity: 0.4;
    left: 42%;
    margin-left: -25%;
    /*font-family:"wingdings 3";*/
    font-size:4em;
    text-align:center;
    text-shadow:  1px  1px 1px #333333, 1px -1px 1px #333333, -1px  1px 1px #333333, -1px -1px 1px #333333;
    /*visibility: hidden;*/
  }

  @media screen and (min-width: 1361px) {
      .slider-menu {
        /*border: 6px solid yellow;*/
        margin-top: -12vh;
        letter-spacing: 0.41em;
      }

  }

  @media screen and (max-width: 1360px) {
      .slider-menu {
        /*border: 6px solid rgb(234, 50, 213);*/
        /* margin-top: calc(100px + 7%); */
        margin-top: -12vh;
        letter-spacing: 0.75em;
      }
  }
 
  @media screen and (max-width: 960px) {
    .slider-menu {
      /*border: 6px solid rgb(50, 234, 118);*/
      margin-top: calc(100px + 12%);
      margin-top: -12vh;
      /* letter-spacing: 0.35em; */
      letter-spacing: 0.5em;
    }
  }
  .slider-control .slider-menu b{color:#555555;cursor:pointer}
  .slider-control .slider-menu b.active{color:#b2c2e9;}

   .sliddie {
    border: 2px solid #555555;
    width: 98%;
   }

   .sliddie-txt {
    color: #ffffff;
    position: absolute;
    top: 0px;
    left: 12em;
    padding:0.6em;
    text-shadow:  1px  1px 1px black, 1px -1px 1px black, -1px  1px 1px black, -1px -1px 1px black;
   }
   .sliddie-button {
     position: absolute;
     top: 0px;
     color:white;
     font-size:1.5em;
     left: 1px;
     text-shadow:  1px  1px 1px black, 1px -1px 1px black, -1px  1px 1px black, -1px -1px 1px black;
   }

   h1, h2, h3 {
     color:white;
     font-size:1.7em;
     text-shadow:  1px  1px 1px black, 1px -1px 1px black, -1px  1px 1px black, -1px -1px 1px black;
     /* background-color: yellow; */
     margin: 0;
     padding: 0;
   }

   h2 a {
     color:white;
     /* background-color: cyan; */
   }

   h3 a {
     color:white;
     /* background-color: green; */
   }

   h4 {
     color:white;
     font-size:1.2em;
     text-shadow:  1px  1px 1px black, 1px -1px 1px black, -1px  1px 1px black, -1px -1px 1px black;

     margin: 0;
     padding: 0;
     /* background-color: white; */
   }

   h4 a {
     color:white;
   }


/*   input:valid {
    color: green; */
}
   input:invalid {
  background-color: #e00;
}