/*   Farben
	
	#b1c800 	Grόn im Logo 	100-50

	
	*/


/* ––––––––––––––––––––––––––––––––––––––––––––––
                     - Layout  - 
 ––––––––––––––––––––––––––––––––––––––––––––––––*/

* {    
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}



html  {
	
}

 

body {
  margin: 0;     
  padding: 0;      
}    


/* 
Hintergrundbild in den einzelnen HTML-Dateien

body {
	background-image: url(../img-back/kaefer1_1680-1050.jpg);
	background-attachment: fixed;
	background-size:cover;      
}    */




div#gesamt {
  margin: 0 auto;     
  padding: 0;
  width: 70%;
  max-width: 900px;      /* frόher 960 */
  /* background: white; */
  /* box-shadow: 0px 0px 20px #999;  */
}




/* ––––––––––––––––––––––––––––––––––––––––––––––
                    - Header - 
 ––––––––––––––––––––––––––––––––––––––––––––––––*/


  
  header {
	background:rgba(255, 255, 255, 0.8);               /*  weiί  */
	padding: 0em 0em 0em 0em;
  }
   
  


/* ––––––––––––––––––––––––––––––––––––––––––––––
              - Der Hauptinhaltsteil - 
 ––––––––––––––––––––––––––––––––––––––––––––––––*/




div.oben {
	text-align:left;
	float:none;
	width: 100%;
	padding: 1.5em 6em 0 6em; 
	margin: 0 0 20em 0;
	background:rgba(255, 255, 255, 0.95);	
}



div.obenschwarz {
	text-align:left;
	float:none;
	width: 100%;	
	padding: 2em 6em 1em 6em;
	margin: 0em 0em 0em 0em;
	background: #434343;
}



div.mitterot {
	text-align:left;
	float:none;
	width: 100%;	
	padding: 2em 6em 1em 6em;
	margin: 0em 0em 0em 0em;
	background:rgba(219,104,104,0.80);
}


div.mitte {
	text-align:left;
	float:none;
	width: 100%;
	padding: 1.5em 6em 0 6em; 
	margin: 0 0 0em 0;
	background:rgba(255, 255, 255, 0.95);	
}



div.fuss {
	text-align:left;
	float:none;
	width: 100%;	
	padding: 2em 6em 1em 6em;
	margin: 0em 0em 20em 0em;
	background: #434343;
}



img.aktuellimg {       /* Bild auf Seite aktuell – ganze Breite, max. 800px  */
    width:100%;
    margin: 0em 0em 0em 0em;
}

img.aktuell2img {       /* Bild auf Seite aktuell – ganze Breite, max. 800px  */
    width:70%;
    
  margin: 0 auto; 
}




div.divfleft50 {          /* Bildunterschrift unter Video  */
  float: left;
  margin: 0 0em 0em 0; 
  width:46%;
}



div.divright50 {  /* Bildunterschrift unter Haar-Bild auf Startseite  */
  float: right;
  margin: 0 0em 0em 0; 
  width:46%;
}



#startseite1 {       /* dynamischer Bild-Kontainer auf Seite aktuell   */
	float:left;
	width:46%;
	padding: 0em 1em 0em 0em;
	margin: 0em 0em 0em 0em;
	text-align:right;
	overflow:hidden;
	/* 
	background-image: url(../video/Ratibor.mp4);  url(../video/Ratibor.mp4)   */
    background-size: 101%;
	background-position: top;
    background-repeat: no-repeat;
	-webkit-transition: all 0.25s ease-in;
	transition: ease-in-out 2.4s;
}





#startseite2 {       /* dynamischer Bild-Kontainer auf Seite aktuell   */
	float:right;
	width:46%;
	padding: 0em 1em 0em 0em;
	margin: 0em 0em 0em 0em;
	text-align:right;
	overflow:hidden;
	background-image: url("../img/grafik-suendenbock-1.jpg");  /* url(../video/kloster-banz_708-1200.jpg   */
    background-size: 115%;
	background-position: top;
    background-repeat: no-repeat;
	-webkit-transition: all 0.25s ease-in;
	transition: ease-in-out 2.4s;
}


#startseite-quer {       /* dynamischer Bild-Kontainer auf Seite aktuell   */
	float:left;
	width:100%;
	padding: 2em 0em 0em 0em;
	margin: 0em 0em 0em 0em;
	
	overflow:hidden;
	
}



#startseite2:after {
    padding-top: 178%;        /* macht das Seitenverhδltnis  */
    content: '';
    display: block;
}

#startseite2:hover{
    background-size: 180%;
	background-position: top;
}




div.vorschaubild2 {              /*   Vorschaubild 1/2    */
	float:left;
	width:49.9%;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0.5em 0em 0.5em 0em;
	/*      background-color:#FF0033;  */
}


div.vorschaubild2_nv {              /*   Vorschaubild 1/3 nicht sichtbar    */
	float:left;
	width:49.9%;
	padding: 0.2em 0.2em 0.2em 0.2em;
	margin: 0em 0em 0em 0em;
	display: none;
	/*      background-color:#FF0033;  */
}





div.vorschaubild3 {              /*   Vorschaubild 1/3    */
	float:left;
	width:33.2%;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0em 0em 0em 0em;
	/*      background-color:#FF0033;  */
}


div.vorschaubild3_nv {              /*   Vorschaubild 1/3 nicht sichtbar    */
	float:left;
	width:33.2%;
	padding: 0.2em 0.2em 0.2em 0.2em;
	margin: 0em 0em 0em 0em;
	display: none;
	/*      background-color:#FF0033;  */
}





div.vorschaubild33 {              /*   Vorschaubild 2/3    */
	float:left;
	width:66.05%;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0em 0em 0em 0em;
	/*      background-color:#FF0033;  */
}


div.vorschaubild4 {              /*   Vorschaubild 1/4    */
	float:left;
	width:24.9%;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0em 0em 0em 0em;
	/*      background-color:#FF0033;  */
}



div.vorschaubild4_nv {              /*   Vorschaubild 1/4 nicht sichtbar    */
	float:left;
	width:24.9%;
	padding: 0.2em 0.2em 0.2em 0.2em;
	margin: 0em 0em 0em 0em;
	display: none;
	/*      background-color:#FF0033;  */
}


#masken1 {       /* dynamischer Bild-Kontainer auf Seite aktuell   */
	float:left;
	width:38%;
	padding: 0em 1em 0em 0em;
	margin: 0em 0em 0em 0em;
	text-align:right;
	overflow:hidden;
	/* 
	background-image: url(../video/Ratibor.mp4);  url(../video/Ratibor.mp4)   */
    background-size: 101%;
	background-position: top;
    background-repeat: no-repeat;
	-webkit-transition: all 0.25s ease-in;
	transition: ease-in-out 2.4s;
}


div.vorschaubildm3 {              /*   Vorschaubild 2/3    */
	float:left;
	width:61.05%;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 1em 0em;
	/*      background-color:#FF0033;  */
}


div.vorschaubildm3_nv {              /*   Vorschaubild 2/3    */
	float:left;
	width:61.05%;
	padding: 0em 0em 0em 0em;
	margin: 0em 0em 1em 0em;
	display: none;
	/*      background-color:#FF0033;  */
}




	
img.bildportrait {     /* z.B. Wicky Reindl auf Seite „Vita“ */
	float:right;
    width:30%;
    margin: 1em 0 1.3em 2em;
}
	
	
	
.fleft100 { /* Sachen, an denen der Text vorbeiflieίen soll, werden diese Klassen zugewiesen. */
  float: left;
  margin: 0 0em 0em 0em; 
  width:100%;
}

.fleft40 { 
  float: left;
  margin: 0 2em 0.2em 0; 
  width:40%;
}


.fright25 { 
  float: right;
  margin: 0 0em 0.2em 1em; 
  width:25%;
}



.fright10 { 
  float: right;
  margin: 0 0em 0.2em 1em; 
  width:9%;
}


.fleft50 { 
  float: left;
  margin: 0 0em 0em 0; 
  width:46%;
}

.fright50 { 
  float:right;
  margin: 0 0em 0em 0; 
  width:46%;
}


.fleft { 
  float: left;
  margin: 0 2em 0.2em 0; 
  width:40%;
}

.fright {
  float: right;
  margin: 0em 0em 0em 2em;
  width:10%;
}





/* ––––––––––––––––––––––––––––––––––––––––––––––
 - Footer - 
 ––––––––––––––––––––––––––––––––––––––––––––––––*/

/* 
  
footer.footerneu {   
	clear: both; 
	height:auto;
	margin: 0; 
	padding: 0.8em 0em 2em 7em;
	background-color:rgba(199, 216, 224, 0.5);
	font-family: verdana, arial, sans-serif;
	font-size: 0.9em;     
	/* background: 255,255,255, 0.6;    Angabe mit Opazitδt */
	
	
	
 
  


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


/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
                - MITTEL - TABLET -                
––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––  */



/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
             - MITTEL - TABLET  -  Header - 
 –––––––––––––––––––––––––––––––––––––––––––––––––
 ––––––––––––––––––––––––––––––––––––––––––––––––*/
 
 
 
 
/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
       - MITTEL - TABLET -      Hauptteil –           
–––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––– */




div#gesamt {
  margin: 0 auto;     
  padding: 0;
  width: 80%;
}  

 
  
div.oben {
	text-align:left;
	float:none;
	width: 100%;
	margin: 0em 0em 20em 0em;	
	padding: 1.5em 4em 0 4em;
}



div.obenschwarz {
	text-align:left;
	float:none;
	width: 100%;
	margin: 0em 0em 0em 0em;	
	padding: 2em 4em 1em 4em;
	background: #434343;
 
}
	
	


div.mitte {
	text-align:left;
	float:none;
	width: 100%;
	padding: 1.5em 4em 0 4em; 
	margin: 0 0 0em 0;
	background:rgba(255, 255, 255, 0.95);	
}
	
	


div.mitterot {
	text-align:left;
	float:none;
	width: 100%;	
	padding: 2em 4em 1em 4em;
	margin: 0em 0em 0em 0em;
	background:rgba(219,104,104,0.80);
}
	
	
	



}






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

/* ––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
                       - Schmal -           
–––––––––––––––––––––––––––––––––––––––––––––––––
–––––––––––––––––––––––––––––––––––––––––––––––––
––––––––––––––––––––––––––––––––––––––––––––––––– */



div#gesamt {
  margin: 0 auto;     
  padding:  0em 0em 0em 0em;
  width: 100%;
}

  


 
  
div.oben {
	text-align:left;
	float:none;
	width: 100%;
	margin: 0em 0em 20em 0em;	
	padding: 1.5em 2em 0em 2em;
}



div.obenschwarz {
	text-align:left;
	float:none;
	width: 100%;
	margin: 0em 0em 0em 0em;	
	padding: 2em 2em 1em 2em;
	background: #434343;
 
}
	
	

div.mitte {
	text-align:left;
	float:none;
	width: 100%;
	padding: 1.5em 2em 0 2em; 
	margin: 0 0 0em 0;
	background:rgba(255, 255, 255, 0.95);	
}
	
	


div.mitterot {
	text-align:left;
	float:none;
	width: 100%;	
	padding: 2em 2em 1em 2em;
	margin: 0em 0em 0em 0em;
	background:rgba(219,104,104,0.80);
}
	

	
img.bildportrait {     /* z.B. Wicky Reindl auf Seite „Vita“ */
	float:right;
    width:40%;
    margin: 1em 0 1.3em 2em;
}








}