/*==============================================================================

stylesheet für Visualisierung Schreiben-Sprechen-Text

==============================================================================*/
@font-face {font-family: Helvetica; src: url("../fonts/FreeSans.otf");
}
@font-face {font-family: Helvetica; font-weight: bold; src: url("../fonts/FreeSansBold.otf");}

@font-face {font-family: Helvetica; font-style:oblique; src: url("../fonts/FreeSansOblique.otf");}

@font-face {font-family: Helvetica; font-weight: bold; font-style:oblique; src: url("../fonts/FreeSansBoldOblique.otf");}


@media screen{

  * {
    font-family: Helvetica, Arial, sans-serif;
    color: white;
    }

    .span_untertitel{
      color: black;
    }
.span_untertitel_neu{
  color: black;
}
  body {
    margin:0;
    background-color: black;
  }


  .page-wrapper {

    width: 100%;

    margin: auto;

    }


/* Header */

    header {
      display:grid;
      grid-template-columns: 25% 25% 25% 25%;
      margin-bottom: 3vw;
    }

    .headerbild {
      grid-column: 1/5;
      position: relative;
      object-fit:cover;




    }
    .img_aare {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;







    }

    .img_länggass {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content:flex-end;


    }
    .img_weg {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_wald {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .img_ausgang {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_ball {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .blumen {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_bantiger {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .img_chico {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_jj {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .img_demo {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .img_kuchen {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .img_grisu {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_member {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .img_miro {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_schatten {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_spruch {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .img_zz {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_zeit {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .img_zeitneu {
      grid-column: 0/5;
      position:relative;
      max-width: 90%;
      align-content: flex-start;


    }

    .img_yannis {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_see {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .img_wartsaal {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_top {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_turm {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }
    .img_cleo {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }
    .img_niniass {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;


    }

    .img_grab {
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .fliegenundkonzert {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_fliegen {

      position:relative;
      max-width: 100%;



    }
    .img_konzert {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }


    .img_kübban{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .barundrahelfabio {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_bar {

      position:relative;
      max-width: 100%;



    }
    .img_rahelfabio {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_schaf{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .kücheundraulraphy {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_küche {

      position:relative;
      max-width: 100%;



    }
    .img_raulraphy {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_eggerfam{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }


    .loveundcocktail {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_love {

      position:relative;
      max-width: 100%;



    }
    .img_cocktail {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_zmorge{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .rahelkaffeundrahelsofie {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_rahelkaffee {

      position:relative;
      max-width: 100%;



    }
    .img_rahelsofie {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_fam{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }


    .selbstundschule {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_selbst {

      position:relative;
      max-width: 100%;



    }
    .img_schule {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_juicy{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }

    .ausflugunddieni {
      grid-column: 4/5;
      position:relative;
      max-width: 100%;
      align-content: flex-End;
      margin-right: 3vw;
    }


    .img_ausflug {

      position:relative;
      max-width: 100%;



    }
    .img_dieni {

      position:relative;
      max-width: 100%;
      margin-bottom: 5vw;



    }

    .img_carina{
      grid-column: 0/5;
      position:relative;
      max-width: 100%;
      align-content: flex-start;


    }




    div.icons {
  width: 100%;
  text-align: left;
  color: white;
}

.icons a {
  color: white;
}

.icons a:hover {
  color: #24282e;
}




    #graf{
      width:100%;
      object-fit:cover;
      height: 77%;
      max-width: 100%;


    }
    #brass{
      width:100%;
      object-fit:cover;
      height: 77%;
      max-width: 100%;
}
    #weg{
    max-width: 200%;


    }
    #länggass{

    max-width: 200%;



    }
    #aare{
    max-width: 200%;


    }
    #wald{
    max-width: 200%;


    }

    #ausgang{
    max-width: 200%;
    margin-left: 2.5vw;


    }

    #ball{
    max-width: 88%;



    }
    #blumen{
    max-width: 200%;
    margin-left: 2.5vw;


    }
    #bantiger{
    max-width: 88%;


    }
    #chico{
    max-width: 200%;
    margin-left: 2.5vw;

    }
    #jj{
    max-width: 88%;


    }
  }
  #demo{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #kuchen{
  max-width: 88%;


  }
  #grisu{
  max-width: 200%;
  margin-left: 2.5vw;

  }
  #member{
  max-width: 88%;


  }
  #miro{
  max-width: 200%;
  margin-left: 2.5vw;

  }
  #schatten{
  max-width: 88%;


  }

  #spruch{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #zz{
  max-width: 88%;


  }

  #zeit{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #zeitneu{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #yannis{
  max-width: 88%;


  }

  #see{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #wartsaal{
  max-width: 88%;


  }

  #top{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #turm{
  max-width: 88%;

  }
  #cleo{
  max-width: 200%;
  margin-left: 2.5vw;

  }
  #niniass{
  max-width: 88%;

  }
  #grab{
  max-width: 200%;
  margin-left: 2.5vw;


  }

  #fliegen{
  max-width: 100%;


  }
  #konzert{
  max-width: 100%;


  }

  #kübban{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #bar{
  max-width: 100%;


  }
  #rahelfabio{
  max-width: 100%;


  }

  #schaf{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #küche{
  max-width: 100%;


  }
  #raulraphy{
  max-width: 100%;


  }

  #eggerfam{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #love{
  max-width: 100%;


  }
  #cocktail{
  max-width: 100%;


  }

  #zmorge{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #rahelkaffee{
  max-width: 100%;


  }
  #rahelsofie{
  max-width: 100%;


  }

  #fam{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #selbst{
  max-width: 100%;


  }
  #schule{
  max-width: 100%;


  }
  #juicy{
  max-width: 200%;
  margin-left: 2.5vw;

  }

  #ausflug{
  max-width: 100%;


  }
  #dieni{
  max-width: 100%;


  }

  #carina{
  max-width: 140%;
  margin-left: 2.5vw;

  }



    .headerbild h1 {

  	position: absolute;
  	top: 0px;
    background-color: white;

    margin-top: 0;
  	padding-left: 0;
  	padding-right: 1.4vw;
  	padding-top: 0vw;
  	padding-bottom: 0vw;

  	text-align: left;
  	font-size: 5vw;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    }

    .headerbild h2 {

      position: absolute;
    	bottom: 0px;

      margin-bottom: 16vw;
    	padding-left: 0;
    	padding-right: 0.5vw;
    	padding-top: 0.5vw;
    	padding-bottom: 0;


    	text-align: left;
    	font-size: 5vw;
      text-transform:uppercase;
      font-style:normal;
      font-weight:bold;
      }

    .span_untertitel {
      background-color: white;
      padding: 0;
      padding-right: 1.4vw;
      padding-bottom: 1vw;
    }

/*
  ** Grid-main
  */
  /* Add a black background color to the top navigation */
  .topnav {
    background-color: black;
    overflow: hidden;
    text-align: center;
  }

  /* Style the links inside the navigation bar */
  .topnav a {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  /* Change the color of links on hover */
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Add a color to the active/current link */
  .topnav a.active {
    background-color: #white;
    color: white;
  }
main {
      display:grid;
      grid-template-columns: 25% 25% 25% 25%;
      margin-bottom: 3vw;
    }

/*
  **
  Absatz anfang
   */


    /* p anfang */

      .p_anfang {
        grid-column:3/5;
        margin-left: 1.5vw;
        height: 90vh;
      }

          .p_anfang h3 {

            grid-column:3/5;

            text-align: left;
          	font-size: 2.2vw;
            text-transform:uppercase;
            font-style:normal;
            font-weight:bold;
            margin: 0;
            margin-bottom: 2vw;
            line-height: 1;
           }


           #p1{
             font-size: 1.2vw;
           }

           #p-left{
             font-size: 1.2vw;
             float: left;
  max-width: 50vw;

  font-weight: bold;


           }

  /*
    **Absatz mitte
    */

    /* p mitte */

      .p_mitte {
        grid-column: 3/5;
        margin-left: 1.5vw;
        height: 90vh;
      }

          .p_mitte h3 {

            grid-column:3/5;

            text-align: left;
            font-size: 1.8vw;
            text-transform:uppercase;
            font-style:normal;
            font-weight:bold;
            margin: 0;
            margin-bottom: 0vh;
            line-height: 1;
          }

          #p2 {
            font-size: 1.2vw;
            margin-bottom: 6vh;
          }

  /*
  **Absatz ende
  */


  /* p ende */

        .p_ende {
          grid-column: 3/5;
          margin-left: 1.5vw;
          height: 90vh;
        }

            .p_ende h3 {

              grid-column:3/5;

              text-align: left;
              font-size: 2.4vw;
              text-transform:uppercase;
              font-style:normal;
              font-weight:bold;
              margin: 0;
              margin-bottom: 2vw;
              line-height: 1;
            }

            #p3 {
              font-size: 1.2vw;
              margin-top:0;

            }

            .p_ende h4 {
              grid-column:3/5;

              text-align: left;
              font-size: 3.5vw;
              text-transform:uppercase;
              font-style:normal;
              font-weight:bold;
              margin: 0;
              margin-bottom: 9vh;
              line-height: 1;
            }





/* p schluss */

                    .p_schluss {
                      grid-column: 3/5;
                      margin-left: 1.5vw;
                      height: 90vh;
                    }

                        .p_schluss h3 {

                          grid-column:3/5;

                          text-align: left;
                          font-size: 2.5vw;
                          text-transform:uppercase;
                          font-style:normal;
                          font-weight:bold;
                          margin: 0;
                          margin-bottom: 2vw;
                          line-height: 1;
                        }

                        #p3 {
                          font-size: 1.2vw;
                          margin-top:0;

                        }

                        .p_schluss h4 {
                          grid-column:3/5;

                          text-align: left;
                          font-size: 3.5vw;
                          text-transform:uppercase;
                          font-style:normal;
                          font-weight:bold;
                          margin: 0;
                          margin-bottom: 9vh;
                          line-height: 0.9;
                        }


/*
  **Abschluss-Absatz
  */

  /* End-Paragraph */


        .abschlussbox h3 {
          text-align: left;
          font-size: 4vw;
          text-transform:uppercase;
          font-style:normal;
          font-weight:bold;
          margin: 0;
          margin-bottom: 3vw;
          line-height: 0.9;
        }

        #p-end {
          grid-column: 2/5;
          grid-row: 4/5;
          z-index: 1;

          background-color: white;

          font-size: 1.2vw;

          padding-left: 3vw;
          padding-bottom: 3vw;
          margin-top:0;
          margin-left: 18.2vw;
          height: 27vw;
        }



/* Grid */

footer{

  width: 80%;
  margin:auto;
  padding-bottom: 30px;
}


/*Ende @media screen */

/*****************Ende Desktop-Version ******************/



@media screen and (max-width: 900px) {

  main {

    display: block;

     }
     img{
       max-width: 100% !important;
     }
     .p_anfang{
       height: auto;
       width: 100%;
     }
    p{
      font-size: 18px !important;

    }

    .p_mitte{
      height: auto;
      width: 100%;
    }
   p{
     font-size: 18px !important;

   }
   .p_ende{
     height: auto;
     width: 100%;
   }
  p{
    font-size: 18px !important;

  }

  .p_schluss{
    height: auto;
    width: 100%;
  }

 li{
   font-size: 18px !important;

 }

 .p_anfang {
   height: auto;
   width: 100%;
 }
h3{
  font-size: 20px !important;

}


}


}

/*
  ** footer
  */
  .footer {
    padding:40px 0;
    color: white;
    text-align: center;
  }


  .footer-basic .copyright {
    margin-top:15px;
    text-align:center;
    font-size:13px;
    color: white;
    margin-bottom:0;
  }



}



} /*Ende @media screen 900px */