*{
    margin: 1px;
    font-family: Arial, Helvetica, sans-serif;
}
.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 1px;
}


 /* --- navigation menu mit  H A M B U R G E R  ------ */
 .topnav {
    overflow: hidden;
    background-color: #333;
    position: relative;  /* ursprünglich */
    /* position: absolute; */
    width:100%;
  }
  /* Hide the links inside the navigation menu (except for logo/home) */
  .topnav #myLinks {
    display: none;
  }
/* Style navigation menu links */
  .topnav a {
    color:#000;
    padding: 10px 16px;
    text-align: center;
    text-decoration: none;
    font-size: 26px;
    display: block;
    font-weight: 600;
  }
    .topnav a.ueberschrift {
        height: 70px;
        background-image: url("Bilder1/Rosen_Abend_2kl.jpg");
        color: #000;
        margin:auto;
        padding: 0px 75px 0px 150px;
        text-align: center;
        vertical-align: middle;
        /*align-items: center;*/
        align-content:center;
        text-decoration: none;
        font-size: 20px;
        display: block;
        font-weight: 600;
    }
  .topnav #myLinks a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }

  /* Style the hamburger menu und Icon */
  .topnav a.icon1 {
    background: black;
    padding: 10px 7px 0px 10px;
    display: block;
    position: absolute;
    left: -10px;
    top: -20px;
  }

  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0px;
  }
  /* Add a grey background color on mouse-over */
  .topnav a:hover {
    background-color: #aaa;
    color: black;
  }
  .topnav #myLinks a:hover {
    background-color: #ccc;
    color: black;
  }

  /* Style the active link (or home/logo) */
  .active {
    /*background-color: #04BB6D;*/
    height:50px;
    background-image: url("bi-webs2024/Bilder1/Rosen_Abend_2kl.jpg");
    color: white;
  } 
 /* --- ENDE  H A M B U R G E R  ------ */


/*  -- O r i e n t i e r u n g  -  Z e i l e   */

.g-area-heading{position:absolute;left:-5000px;}
.g-clear{clear:both !important;}


.mod-bc{background-color:#fff;clear:both;color:#666;font-size:.833em;line-height:1.3em;padding:9px 10px 10px 0px;text-align:left;}
/* .mod-bc{background-color:#fff;background-position:0 -179px;clear:both;color:#666;font-size:.833em;line-height:1.3em;padding:9px 10px 10px 11px;text-align:left;} */
/* .mod-bc .m-item{background:url(//cms-static.uni-muenchen.de/default/lmu/img/sprite-bullets.png) no-repeat -2000px 4px;float:left;margin-right:5px;padding-left:8px;white-space:nowrap;}  */
.mod-bc .m-item{float:left;margin-right:25px;padding-left:0px;white-space:nowrap;} 
.mod-bc .m-item.m-first{background:none;padding-left:0;}
.mod-bc .m-link{color:#666;text-decoration:underline;}



/*  -- ENDE   O r i e n t i e r u n g  -  Z e i l e   */





/* ------ 2  S P A L T E N ------------- */
#wrapper {
	background-color: white;
	width: 100%;

    max-width: 1260px; /* maximalen Breite (Eigenschaft max-width) */
	/* min-width: 360px; */ /* minimalen Breite  vorher 720*/
}
#steuerung {
	background-color: white;
    width: 180px;
    float:left;
    display:flex;

}
 #inhalt {
    background-color:white;
	margin-left: 200px;
	/*width: 800px;*/
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    margin-top: 10px;
}
 

 /* S I D E B A R  Style the navigation menu */
.sidebar{
    width: 175px;
    height: 100%;
    background-color:white;  /* background-color:#eeeeee; */ 
    color: #000;
    display: flex;
    align-items:baseline;
    flex-direction: column;
    /* border-right: 1px solid #aaaaaa; */
}
.sidebar-top,
.sidebar-center,
.sidebar-bottom{
    width: 98%;
    background-color: white;
    padding: 8px 0px;
    margin-bottom: 1px;
    display: flex;
    align-items:center;
}
.sidebar-top, 
.sidebar-bottom{
   /* border: none;*/
    justify-content: center;
    border-bottom: 1px solid #AAAAAA; 
}
.topText {
    font-size: 14px;
    font-weight: 700;
}
.list{
    list-style: none;
    padding: 0px;
    width: 100%;
}
.list-item{
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    /* background-color:burlywood; */
    padding: 30px 5px 30px 15px;
   /* border-radius: 5px; */
    border-bottom: 1px solid #AAAAAA; 
}
.list-item:hover,
.list-item.active{
    background-color:lightblue;
}
/* ENDE  S I D E B A R   */




/* ---- I n h a l t   mit  T e a s e r  +  T e x t  ----------------- */
.eineSpalte{
    padding: 10px 10px;
	width: 100%;
	float: left;
	/* background-color:#EEEEEE; */
	overflow: auto;
}
.nur_eineSpalte{
    padding: 10px 10px;
	width: 100%;
	float: left;
	/* background-color:#EEEEEE; */
	overflow: auto;
}
.beschreibung {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color:#000;
    text-align:left;
}
.eineSpalte img {
    border: 1;
    width: 80%;
}
.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }
.center90 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 92%;
  }
.center_voll {
    margin-left: auto;
    margin-right: auto;
  }
.eineSpalte .center_voll img {
    border: 1;
    width: auto;
}

.eineSpalte .list-item{
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 500;
    /* cursor: pointer; */
    /* background-color:burlywood; */
    padding: 4px;
   /* border-radius: 5px; */
    border-bottom: 0px solid #AAAAAA; 
}
.eineSpalte .liste_video{
    list-style:circle;
    padding: 5px 0px 0px 45px;
    width: 80%;
}
.eineSpalte .list-videoitem{
    margin-bottom: 1px;
    font-size: 16px;
    font-weight: 500;
     padding: 8px;
     border-bottom: 0px solid #AAAAAA; 
}

.teaserSpalte {
	padding: 10px 10px;
	width:200px;
	float:left;
	overflow:hidden;
    /*background-color:#EEFFFF;*/
}
.teaserSpalte img {
    border: 0;
    width: 100%;
}
.textSpalte {
	padding: 10px 10px;
	 width:55%; 
	/*width:400px;*/
	float:right;
	background-color:#FFFFFF; /*:#FFE;*/
    /*margin-left: 0px; */
    overflow:auto; 
}
.textSpalte .list{
    list-style:circle;
    padding: 0px 0px 0px 35px;
    width: 80%;
}
.textSpalte .liste_video{
    list-style:circle;
    padding: 0px 0px 0px 35px;
    width: 80%;
}
.textSpalte .list-item{
    margin-bottom: 1px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer; 
    /* background-color:burlywood; */
    padding: 4px;
   /* border-radius: 5px; */
    border-bottom: 0px solid #AAAAAA; 
}
.textSpalte .list-videoitem{
    margin-bottom: 1px;
    font-size: 16px;
    font-weight: 500;
    padding: 0px 0px 22px 10px;
    border-bottom: 0px solid #AAAAAA; 
}
.kurzbeschreibung {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color:#000;
    text-align:left;
}

h2{
    font-size: 18px;
    font-weight: 800;
    text-align: center;
}
h3{
    font-size: 18px;
    font-weight: 700;
    text-align:left;
}
h4{
    font-size: 14px;
    font-weight: 600;
    text-align:left;
}
h5{
    font-size: 13px;
    font-weight: 500;
    text-align: left;
}
.bild{
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}
.bildunterschrift{
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

 /* ----------- ABOUT US SECTION ---------------  */
 #about-us {
    width: 100%;
    /* background-image: url("bi-webs2024/Bilder1/k_B_Tiefenschaerfe_kl.jpg"); */
    /* background-image: url("Fehmarn_KueLin_2.jpg"); */
    /* background-image: url("bi-webs2024/Bilder1/Rosen_Abend_2kl.jpg"); */
     /* background-image: url("bi-webs2024/Bilder1/Gieshuegel_5kl_hell.jpg"); */
    background-repeat: no-repeat;
    background-size: cover; 
    padding: 15px 0px;
    background-color: #eee;
    color:#000; 
}
#about-us .container {
    display: flex;
    vertical-align: top;
}
.about-us-title {
    width: 40%;
}
.about-us-title h3 {
    font-family: 'built_titling', Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0;
    text-align:center;
}
.about-us-desc {
    width: 50%;
    flex-direction: column;
}
.about-us-desc h4 {
    font-family: 'built_titling', Helvetica, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 1px;
    margin: 0;
}
/* Small Mobile Styles */
@media only screen and (max-width: 400px) {
    #about-us .container {
        flex-direction: column;
    }
    .about-us-desc {
        width: 100%;
        margin-top: 10px;
    }
}
/* ---- E N D   ABOUT US SECTION  -----    */









/* ____  M E D I A  _____________________________________ */
@media only screen and (min-width: 1260px) {
    #wrapper {
        width: 1260px;
    }

    .topnav {
        width: 1260px;
    }

    #about-us {
        width: 1260px;
    }
}


@media only screen and (max-width: 768px){
     .topnav a.ueberschrift {
        height: 70px;
        padding: 0px 80px 0px 170px;
        font-size: 14px;
        display: block;
        font-weight: 500;
    }

    #steuerung {
        background-color: yellow;
        width: 1px;
        float:left;
    }
    #inhalt {
        margin-left: 1px;
    }
    .sidebar{
        width:10px;
        display: none;
    }
    .topText,.list-item-text{
        display: none;
    }
    #about-us {
        padding: 2px 0px;
    }
 
}

@media only screen and (max-width:400px) {
    .topnav a.ueberschrift {
        height: 70px;
        padding: 0px 80px 0px 170px;
        font-size: 14px;
        display: block;
        font-weight: 500;
        /*text-align: center;*/
    }
    .topnav a.icon1 {
        max-width: 150px;
        background: black;
        padding: 10px 7px 0px 10px;
        display: block;
        position: absolute;
        left: -10px;
        top: -20px;
    }

    .teaserSpalte {
        padding: 10px 0;
        width: 100%;
        float: left;
        background-color: #EEFFFF;
        overflow: hidden;
    }

    .textSpalte {
        padding: 10px 0px;
        width: 100%;
        float: left;
        background-color: #FFE;
    }

}