@charset "UTF-8";

/* groesse vom Bildschirm (schein nicht mehr zu stimmen):
 600px  	Handy und kleiner
 600- 767	große Handys, Tablet hochformat
 768- 991	Tablet quer
 992-1199	Laptop/Desktop
1200    	grosse Laptops/Desktops 
2000    	groesste angenommene Groesse 

 < 480px  	Smartphones
768- 960	Tablets und Noteboks
 > 960    	Desktop

zwischen 700 und 720		Handy A40 quer
zwischen 820 und 840		Handy A72 quer

zwischen 316 und 326  	Handy A40 hoch
zwischen 364 und 374 		Handy A72 hoch

ich nehme  fuer die Index-Seiten (fuer meine Geraete teilt es sich so auf)
 < 1350px	Handy hoch- und querformat, Tablet hochformat
 > 1351  	Tablet, Notebook, Desktop alle querformat
 
ich nehme fuer die LU-Seiten (= 4-dim-Seiten) (fuer meine Geraete teilt es sich so auf)
und fuer das Foto auf der Index-Seite
 < 700px  	Handy hochformat
 701 - 840 	Handy querformat
 > 841px  	Tablet, Notebook, Desktop alle querformat
 
unsere Farben
-------------
#22338d   aus schluessel.jpg     Menueleiste Background  

#2878DC   aus blauer_himmel.jpg  hellblauer Hintergrund
#0000a0   dunkelblauer Text  		inhalt1_text
#0000ff   dunkler Linktext

#0033cd   dunkler Hintergrund
#C0E0FF   Text auf dunkleblauen Hintergrund 			bis 03.05.23 white
#60B0F0 	hellblauer Linkext 			Menuestriche		bis 19.03.23 #87ceeb skyblue
 
/* 

Infos aus Beispielseiten:

  #010d99;  schoenes dunkles blau
	#015999;  dunkles blau 
	#33322f;  dunkles grau, fast schwarz

	Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;   

*/
/* 
was mal interessant sein kann

	font-size:16px !important; 

*/

/* genutzt in: .kopf-titel */
h1 {
	margin: 0;
	padding: 12px 5px 10px 5px;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	text-align: center;
	font-weight: lighter; 
  text-transform: none;
	font-size: 17px; /* 18px; zuruecksetzen nach redesign der Kopfzeile */
}

/* genutzt in: .vier_dim_ueberschrift, register */
h2 {
  margin: 0;
	padding: 0px 0px 20px 0px; 
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-weight: normal; /*  lighter; */
	font-size: 20px; 
}

/* genutzt in: register */
table {
	background-color: #2878DC; /* aus himmelfoto; */}	

td {
	vertical-align:top;
}
#coll {
    border-collapse: collapse;
}


/* Gesamtseite - Verteilung der Bereiche  */
/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.main-grid {
	display: grid;
/*	grid-template-rows: 120px auto 80px;
	grid-template-columns: 240px 120px auto 130px; 
	grid-template-rows: 70px auto 80px;
	grid-template-columns: 140px 70px auto 90px;
	bis 12.11.2022:
	grid-template-rows: 70px auto 80px;
	grid-template-columns: 100px 70px auto 60px;
	bis 18.2.2023:
	grid-template-rows: 66px auto 60px; /* kopf inhalt fuss * /
	grid-template-columns: 96px 66px auto 50px; /* nur fuer Kopfzeile - 4-Satz Logo Tageswunsch Menue * /
	*/
	grid-template-rows: 66px auto 60px; /* kopf inhalt fuss */
	grid-template-columns: 66px 96px auto 45px; /* nur fuer Kopfzeile -  Logo 4-Satz Tageswunsch Menue */
/*	background-color: #0033cd; /* fuer die Seiten, die leere Flaechen lassen, z.B. in aovermans fuers Menue */

}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.kopf {
	background-color: #22338d; /* Farbe aus Schluesselfoto, bis 18.2.2023: #0000cd */ 				
	/* color: #000060; */  /* sehr dunkles blau */ 	
	color: white;
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten  */
.kopf-4satz{
	grid-row: 1 / 2;
	grid-column: 2 / 3;
	/* bis 18.2.2023: padding: 13px 17px 10px 13px;  bis 12.11.2022: 10px 20px 10px 10px */
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	text-align: center;
	font-size: 17px;  /* bis 12.11.2022: 20px */
}    

/* 18.2.2023: mit geaenderter Kopfzeile nicht mehr in gebrauch */
/* genutzt in: index, archiv, bzw. alle neuen Seiten */
/*.kopf-4satz-breiter{
 	letter-spacing: 0.11em; /* bis 31.12.2022: 0.15em * /
/* 	padding:0 0 0 1px * /
} */ 

*/ 

.kopf-4satz-bild{
	width: 66px;
	height: 96px;
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.kopf-logo{
	grid-row: 1 / 2;
	grid-column: 1 / 2;
/*	background-image:url(PIC/logo_dicker.jpg); */ /* 13.12.2022 wg Link hier rausgenommen und in jede Seite einzeln aufgenommen */
	background-repeat::no-repeat;
	background-size:cover;
	margin: 0px 0px 0px 0px; 
/*	padding: 5px 5px 5px 5px; */ /* 13.12.2022 war bedeutungslos und jezt wg Bild auf jeder Seite rausgenommen */
}

.kopf-logo-bild{
	width: 66px;
	height: 66px;
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.kopf-titel{
	grid-row: 1 / 2;
	grid-column: 3 / 4;
/*	padding: 12px 5px 10px 5px;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	text-align: center;
	font-size: 18px; */  /* bis 12.11.2022: 22px */ 
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.kopf-titel-klein{
	grid-row: 1 / 2;
	grid-column: 3 / 4;
/*	padding: 13px 5px 10px 5px; 
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	text-align: center;  /* in h2 enthalten */
	font-size: 14px;  
	line-height: 20px;
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.kopf-menue{
	grid-row: 1 / 2;
	grid-column: 4 / 5;
/*	padding: 10px 20px 10px 5px; */
}

/* genutzt in: index, archiv, bzw. alle neuen Seiten */
.fuss{
	grid-row: 3 / 4;
	grid-column: 1 / 5;
}

/* genutzt in: index, archiv */
.inhalt{
	grid-row: 2 / 3;
	grid-column: 1 / 5;	

	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: auto auto;

	background-color: #0033cd;	/* noetig, damit Flaechen, die rechts von inhalt2 liegen (entstehen, wenn Text kuerzer als maximale Breite) auch blau werden */
}



/* genutzt in: index, archiv */
/* nebeneinander groesser 300, z.B. Notebook */   
/* @media scren and min-width: 768px) { */
@media screen and (min-width: 1351px) {  /* 2 Spalten */
	.inhalt1{
		grid-row: 1 / 3;
		grid-column: 1 / 2;
	}
	
	.inhalt2{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
	}
} 

/* genutzt in: index, archiv */
/* untereinander kleiner 310, z.B. Handy */
@media screen and (max-width: 1350px) {  /* 1 Spalte */
	.inhalt1{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}
	
	.inhalt2{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}
} 


/* genutzt in: lu-bild-seite (z1_welt etc) */
/* nebeneinander - wenn genug Platz fuer Text neben LU-Bild */   
@media screen and (min-width: 981px) {  /* 2 Spalten */
	.inhalt1_lu_bild_seite{
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		width: 425px;
	}
	
	.inhalt2_lu_bild_seite{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
	}
} 

/* genutzt in: lu-bild-seite (z1_welt etc) */
/* untereinander - wenn zu wenig Platz fuer Text neben LU-Bild  */
@media screen and (max-width: 980px) {  /* 1 Spalte */
	.inhalt1_lu_bild_seite{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}
	
	.inhalt2_lu_bild_seite{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}
} 


/* ----------------------------------- */

/* genutzt in: zurPerson-Seiten */
/* nebeneinander - wenn genug Platz fuer Text neben LU-Bild */   
@media screen and (min-width: 981px) {  /* 2 Spalten */
	.inhalt1_zur_person{
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		width: 490px;
	}
	
	.inhalt2_zur_person{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
	}
} 

/* genutzt in: zurPerson-Seiten */
/* untereinander - wenn zu wenig Platz fuer Text neben LU-Bild  */
@media screen and (max-width: 980px) {  /* 1 Spalte */
	.inhalt1_zur_person{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}
	
	.inhalt2_zur_person{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}
} 


/* genutzt in: zurPerson-Seiten */
.inhalt_rechts_bild{
	grid-row: 2 / 3;
	grid-column: 1 / 5;	

	display: grid;
	grid-template-rows: auto auto auto auto auto auto auto auto auto  auto auto auto;
	grid-template-columns: auto auto;
	inline-size: fit-content;

}

/* genutzt in: zurPerson-Seiten */
/* nebeneinander groesser 700, z.B. Notebook, aber auch Handy quer */   
@media screen and (min-width: 1001px)  {  /* 2 Spalten, rechst blaue Flaeche fuer Menue */
	.inhalt_rechts_bild_1  {
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		/* max-width: 550px; 	/* damit der Text nicht so breit wird und damit die Seite hoch genug wird, dass das Menue ueber den roten Faden passt */ 
	}	
	.inhalt_rechts_bild_2{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
		min-width: 500px;
		/* die beiden folgenden Zeilen damit das Bild unten buendig ausgerichtet ist */
		display: grid;
		align-content: flex-end;		
	}
}  

@media screen and (max-width: 1000px)  and (min-width: 801px) {  /* 2 Spalten */
	.inhalt_rechts_bild_1  {
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		/* max-width: 550px; 	/* damit der Text nicht so breit wird und damit die Seite hoch genug wird, dass das Menue ueber den roten Faden passt */ 
	}	
	.inhalt_rechts_bild_2{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
		/* die beiden folgenden Zeilen damit das Bild unten buendig ausgerichtet ist */
		display: grid;
		align-content: flex-end;		
	}
}

/* untereinander kleiner 700, z.B. Handy hochformat */
@media screen and (max-width: 800px) {  /* 1 Spalte */
	.inhalt_rechts_bild_1{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}	
	.inhalt_rechts_bild_2{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}
} 

.dunkler_hintergrund_bild {
	background-color: #0033cd; 
	padding: 0px 40px 20px 0px; 
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height: 28px; 
	color:#C0E0FF;  /* bis 03.05.23 white */
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* sich 
.inhalt_rechts_bild{
	grid-row: 2 / 3;
	grid-column: 1 / 5;	

	display: grid;
	grid-template-rows: auto auto auto auto auto auto auto auto auto  auto auto auto;
	grid-template-columns: auto auto;
	inline-size: fit-content;

}

/* genutzt in: zurPerson-Seiten */
/* nebeneinander groesser 700, z.B. Notebook, aber auch Handy quer * /   
@media screen and (min-width: 901px)  {  /* 2 Spalten * /
	.inhalt_rechts_bild_1  {
		grid-row: 1 / 3;
		grid-column: 1 / 2;
		max-width: 550px; 	/* damit der Text nicht so breit wird und damit die Seite hoch genug wird, dass das Menue ueber den roten Faden passt * / 
	}	
	.inhalt_rechts_bild_2{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
		/* die beiden folgenden Zeilen damit das Bild unten buendig ausgerichtet ist * /
		.inhalt_rechts_bild_2{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
		/* die beiden folgenden Zeilen damit das Bild unten buendig ausgerichtet ist * /
		display: grid;
		align-content: flex-end;		
	}
}  

/* untereinander kleiner 700, z.B. Handy hochformat * /
@media screen and (max-width: 900px) {  /* 1 Spalte * /
	.inhalt_rechts_bild_1{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}	
	.inhalt_rechts_bild_2{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}
}  sich ende */

/* ----------------------------------- */


/* genutzt in: vier_dim-Seiten */
.inhalt_4dim{
	grid-row: 2 / 3;
	grid-column: 1 / 5;	

	display: grid;
	grid-template-rows: auto auto auto auto auto auto auto auto auto  auto auto auto;
	grid-template-columns: auto auto;

}


/* genutzt in: vier_dim-Seiten */
/* nebeneinander groesser 700, z.B. Notebook, aber auch Handy quer */   
@media screen and (min-width: 701px) {  /* 2 Spalten */
	.inhalt_4dim_bild1{
		grid-row: 1 / 3;
		grid-column: 1 / 2;
	}	
	.inhalt_4dim_text1{
		grid-row: 1 / 3;
		grid-column: 2 / 3;
	}

	.inhalt_4dim_bild2{
		grid-row: 3 / 5;
		grid-column: 1 / 2;
	}	
	.inhalt_4dim_text2{
		grid-row: 3 / 5;
		grid-column: 2 / 3;
	}

	.inhalt_4dim_bild3{
		grid-row: 5 / 7;
		grid-column: 1 / 2;
	}	
	.inhalt_4dim_text3{
		grid-row: 5 / 7;
		grid-column: 2 / 3;
	}

	.inhalt_4dim_bild4{
		grid-row: 7 / 9;
		grid-column: 1 / 2;
	}	
	.inhalt_4dim_text4{
		grid-row: 7 / 9;
		grid-column: 2 / 3;
	}

	.inhalt_4dim_bild5{
		grid-row: 9 / 11;
		grid-column: 1 / 2;
	}	
	.inhalt_4dim_text5{
		grid-row: 9 / 11;
		grid-column: 2 / 3;
	}
	.inhalt_4dim_link{
		grid-row: 11 / 13;
		grid-column: 1 / 2;
	}

	.inhalt_4dim_text_link{
		grid-row: 11 / 13;
		grid-column: 2 / 3;
	}
} 

/* genutzt in: vier_dim-Seiten */
/* untereinander kleiner 700, z.B. Handy hochformat */
@media screen and (max-width: 700px) {  /* 1 Spalte */
	.inhalt_4dim_bild1{
		grid-row: 1 / 2;
		grid-column: 1 / 3;
	}	
	.inhalt_4dim_text1{
		grid-row: 2 / 3;
		grid-column: 1 / 3;
	}

	.inhalt_4dim_bild2{
		grid-row: 3 / 4;
		grid-column: 1 / 3;
	}	
	.inhalt_4dim_text2{
		grid-row: 4 / 5;
		grid-column: 1 / 3;
	}

	.inhalt_4dim_bild3{
		grid-row: 5 / 6;
		grid-column: 1 / 3;
	}	
	.inhalt_4dim_text3{
		grid-row: 6 / 7;
		grid-column: 1 / 3;
	}

	.inhalt_4dim_bild4{
		grid-row: 7 / 8;
		grid-column: 1 / 3;
	}	
	.inhalt_4dim_text4{
		grid-row: 8 / 9;
		grid-column: 1 / 3;
	}
		
	.inhalt_4dim_bild5{
		grid-row: 9 / 10;
		grid-column: 1 / 3;
	}	
	.inhalt_4dim_text5{
		grid-row: 10 / 11;
		grid-column: 1 / 3;
	}

	.inhalt_4dim_link{
		grid-row: 11 / 12;
		grid-column: 1 / 3;
	}

	.inhalt_4dim_text_link{
		grid-row: 12 / 13;
		grid-column: 1 / 3;
	}
} 


.inhalt_register {
	grid-row: 2 / 3;
	grid-column: 1 / 5;	

	display: grid;
	grid-template-rows: auto auto auto auto auto  auto auto auto auto auto   
	                    auto auto auto auto auto  auto auto auto auto auto   
	                    auto auto auto auto auto  auto auto auto auto auto;
	grid-template-columns: auto;
}


/* ----------------------------------------------  Ende Grid Definitionen  ------------------------------------------ */


/* Formatierung der Bereiche  */
body {
	margin:0;
	padding:0;
}


/* Anfang Hamburger Menu */
/* --------------------- */
.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
	background-color: #22338d;
  height: 36px; 
  padding: 1em;
}

.menu {
  display: flex;
  list-style-type: none;
  font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
  padding: 0;
  position: absolute;
  top: 0;
  margin-top: 66px; 
  right: 0;  
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
  margin: 0;
  padding: 0.5em 0;
  text-align: right;	/* Ausrichtung der Menuepunkte */
  width: 220px; /* Breite des aufgeklappten Menus - bis 27.03.23: 200px */
  color: #60B0F0; /* bis 19.3.2023: #87ceeb; */ 
  background-color: #22338d; 
}
.menu > li:not(:last-child) {
  border-bottom: 1px solid #444;
 }

.menu > li a:link,
.menu > li a:visited {
	color: #60B0F0; /* bis 19.3.2023: #87ceeb; */
	text-decoration:none;
}

.menu-button-container {
  height: 100%; /* noetig, damit die ganze Flaeche vom Hamburger bzw x das Menue auf bzw zuklappt ... */ 
  width: 30px; /* ... ohne diese beiden Defs wuerden nur die Linien funktionieren */
  cursor: pointer;
/*  flex-direction: column; */
  justify-content: center;
/*  display: flex; */
  margin: 14px 0 0 -7px; /* bis 27.3.23, als bevor-Menu-Strich noch oben war:  30px 0 0 -7px; */
}

/* scheinen noetig fuer die 3 Striche vom Hamburger */
#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #60B0F0; /* bis 19.3.2023: #87ceeb; */ 
  position: absolute;
  height: 4px;
  width: 30px;
  border-radius: 2px;
}

/* fuer den Strich ueber dem mittleren Hamburger-Strich und fuer das halbe x 
ab 27.3.23 ist es der unterse Strich */
.menu-button::before {
  content: '';
  margin-top: 16px; /* bis 27.03.23, als der before-Strich noch der oberste war: -8px; */
} 

/* fuer den Strich unter dem mittleren Hamburger-Strich und fuer das andere halbe x */
.menu-button::after {
  content: '';
  margin-top: 8px;
} 

/* die folgenden 3 Formate sind fuer die Seite hinter/neben dem Menue, damit die erhalten bleibt (?)
  die Rotation ist fuer die Drehung der Striche zum x */
#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 8px; /* bis 27.03.23, als der before-Strich noch oben war: 0px */
  transform: rotate(405deg);  
}

#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 8px; /* bis 27.03.23, als der before-Strich noch oben war: 0px */
  transform: rotate(-405deg);
}

#menu-toggle ~ .menu li {
  height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}
#menu-toggle:checked ~ .menu li {
/*  border: 1px solid #333; */
  height: 1.0em;  /* Hoehe einer Menuzeile */
  padding: 0.5em;
  transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.untermenu {
/*	display: inline-block;
	margin-top: -10px;  / * Unter-Menuzeile nach oben verschieben, verkleinern geht so nicht, darum ist es nicht geeignet */
	font-size: 12px;
}

/* Ende Hamburger Menu */


/* genutzt in: index */
.zufaelligerText,
.zufaelligerText1,
.zufaelligerText2,
.zufaelligerText3,
.zufaelligerText4 {
	margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;  
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;  
	line-height: 22px; 
	color:#0000a0; 	
	font-weight:bold;   
}

/* genutzt in: zurPerson */
/* aehnlich archiv_spruch */
.text_hellblauer_hintergrund{
	background-image:url(PIC/blauer_himmel.jpg);
	background-size:cover;
	margin: 0px 0px 0px 0px; 
	padding: 35px 15px 35px 15px;  
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;  
	line-height: 22px; 
	color:#0000a0; 	
	font-weight:bold;   
	text-align: left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: zurPerson */
/* aehnlich archiv_spruch_klein */
.text_dunkelblauer_hintergrund {
	background-color: #0033cd; 
	padding: 33px 20px 10px 30px; 
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height: 22px; 
	color:#C0E0FF;  /* bis 03.05.23 white */ 
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */	
}

/* genutzt in: texte */
leseprobe {
	background-image:url(PIC/blauer_himmel.jpg);
	background-size:cover;
	margin: 0px 0px 0px 0px; 
	padding: 35px 15px 35px 15px;  
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;  
	line-height: 22px; 
	color:#0000a0; 	
	text-align: left;		
}


/* genutzt in: zurPerson */
.stuhlmouseover{
  width:181px;
  height: 303px;
  background-image:url(PIC/stuhl.jpg);
  background-repeat:no-repeat;
  padding: 15px 15px 15px 0;
  float:left;
}
.stuhlmouseover:hover{
  width:181px;
  height: 303px;
  background-image:url(PIC/stuhl2.jpg);
  background-repeat:no-repeat;
  padding: 15px 15px 15px 0;
  float:left;
}


/* genutzt in: index, archiv, roman_xx */
.archiv_spruch {
	background-image:url(PIC/blauer_himmel.jpg);
	background-repeat::no-repeat;
	background-size:cover;
	margin: 0px 0px 0px 0px; 
	padding: 35px 15px 35px 15px;  /* war 15px 25px 15px 25px; bis 13-11-2022(im p): 15px 15px 15px 15px;*/
	/* width: 660px; */
	/* height:333px; */
	float:center;
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
/*	font-family: 'Times New Roman', Times, serif; */
	font-size:18px;  /* war 30px, bis 2.11.2022 24px, bis 13.11.2022: 20px */
	line-height: 30px; /* war bis 2.11.22 42px, bis 13.11.2022: 32px */
/*	color:#806345; */
	/*color:white; */
	/* color:#800000;			/*maron; */ 
	/*color:#0000cd; */				/*mediumblue; */
	color:#0000a0; 	/* bis 12.11.2022: white  0000cd */
	font-weight:bold; /*ab 12.11.2022 - fuer Geraete, die Arial Rounded MT Bold nicht haben */  
	/* font-weight:lighter; */  
	text-align:center;
	/* bis 22.04.23: letter-spacing: 0.05em; */
	/*display:inline; */
}

/* genutzt in: index_archiv_alle (fast identisch mit archiv_spruch) */
.archiv_spruch_links,
.archiv_spruch_links a:link,
.archiv_spruch_links a:visited {
	padding: 5px 0px 5px 0px;
	line-height: 25px;  
	color:#0000a0; 	
	text-align:left;
}

/* genutzt in: index, archiv */
.archiv_spruch_klein {
	background-color: #0033cd; /* ab 12.11.2022 */ /* 0168b2 */
	padding: 33px 20px 10px 30px; /* bis 12.11.2022: margin: 45px 40px 20px 50px; */
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:17px; /* bis 22.04.23: 16px; */
	line-height: 22px; /* bis 12.11.22: 32px */
	color:#C0E0FF;  /* bis 12.11.2022: #000060 sehr dunkles blau, bis 03.05.23 white */ 
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}
.archiv_spruch_klein a:link,
.archiv_spruch_klein a:visited {
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height: 28px; /* bis 12.11.2022: 32px */
	color: #60B0F0; /* bis 19.3.2023: #87ceeb; skyblue; */ /* bis 12.11.2022: #000060 sehr dunkles blau */ 
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: index, archiv */
.absatz_unten {
	padding: 0 0 16px 0;
}


/* genutzt in: index, archiv */
.absatz_zentriert {
	padding: 0 0 16px 0;
	text-align: center;
}

/* genutzt in: index, archiv */
.randlose_zeile {
 	padding: 10px 0px 10px 0px;
	line-height:26px; /* bis 26.02.23 46px aber ohne padding */
}

/* genutzt in: index */
.dunkle_zeile_unsichtbar {
	line-height:1pt; 
	color:#0033cd;
}


/* genutzt in: archiv */
.datum_archiv {
	padding: 16px 0 10px 0;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:12px;
	line-height: 16px; 
	color: #60B0F0; /* bis 19.3.2023: #87ceeb; */  
	text-align:right;	
}

/* ungenutzt
.linkleiste {
 	margin: 40px 10px 10px 10px;	
	font-size:16px;
}

.linkleiste a:link {
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;
	color:navy; 
	text-decoration: underline;
	letter-spacing: 0.05em;
}
*/

/* genutzt in: index, archiv */
.linkleiste_klein {
 	margin: 10px 0px 10px 0px;	/* bis 12.11.2022: 40px 10px 10px 10px  */
	font-size:16px;
	line-height: 18px;
}


/* genutzt in: archiv */
.linkleiste_zentriert {
 	margin: 10px 30px 10px 20px;
 	text-align:center;
	font-size:16px;
	line-height: 18px;
}

.linkleiste_klein a:link,
.linkleiste_klein a:visited,
.linkleiste_zentriert a:link,
.linkleiste_zentriert a:visited {
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;
	color: #60B0F0; /* bis 19.3.2023: #87ceeb; skyblue; */ /* bis 12.11.2022: navy */
	text-decoration: underline;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: index, archiv */
.linkleiste_dunkel,
.linkleiste_dunkel a:link,
.linkleiste_dunkel a:visited {
  margin: 15px 0px 10px 10px;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	text-align:right;
	line-height: 18px;
	font-size:14px;
	/* color:#87ceeb;/* zu helle Linkfarbe fuer Hintergrund Himmel  */
/*	color:#3050e0; /* dunklere linkfarbe fuer himmelblauen Hintergrund * /
	text-decoration: underline;
	letter-spacing: 0.05em;  */
}

/* genutzt in: index, archiv, impressum */
.link_dunkel,
.link_dunkel a:link,
.link_dunkel a:visited {
	/* color:#87ceeb;/* zu helle Linkfarbe fuer Hintergrund Himmel  */
	color:#3050e0; /* dunklere linkfarbe fuer himmelblauen Hintergrund */
	text-decoration: underline;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}


/* genutzt in Index-Seite mit Foto */
/* Tablet, Notebook, Desktop alle querformat */
@media only screen and (min-width: 841px) {  	
	.foto_max_breite {
	 width: 780px;
	 height: 585px;
	 border: 0;	
	}
}    
/* Handy querformat */
@media only screen and (max-width: 840px) and (min-width: 701px)  {  	
	.foto_max_breite {
	 width: 400px;
	 height: 300px;
	 border: 0;	
	}
}
/* Handy hochformat */
@media only screen and (max-width: 700px) {  	
	.foto_max_breite {
	 width: 312px;
	 height: 234px;
	 border: 0;	
	}
}

/* genutzt in Index-Seite mit quadratiwchem Bild */
/* Tablet, Notebook, Desktop alle querformat */
@media only screen and (min-width: 841px) {  	
	.bild_quadrat_max_breite {
	 width: 780px;
	 height: 780px;
	 border: 0;	
	}
}    
/* Handy querformat */
@media only screen and (max-width: 840px) and (min-width: 701px)  {  	
	.bild_quadrat_max_breite {
	 width: 400px;
	 height: 400px;
	 border: 0;	
	}
}
/* Handy hochformat */
@media only screen and (max-width: 700px) {  	
	.bild_quadrat_max_breite {
	 width: 312px;
	 height: 312px;
	 border: 0;	
	}
}

/* genutzt in Index-Seite mit quadratiwchem Bild */
.bild_quadrat_schmal {
 width: 250px;
 height: 250px;
 border: 0;	
}

/* in index-Seite genutzt */
.link_gross,
.link_gross a:link,
.link_gross a:visited { 
 text-align: right;
 font-size: 40px;
 text-decoration: none;
}  



/* genutzt in Roman_xx */
.roman_ueberschrift {
	font-size: 1.5rem; /* 1,5 mal so gross, wie die umgebende Schrift */
	margin-bottom: 1.5rem; 
}


/* genutzt in Roman_xx */
.roman_text {
	text-align: left; 
}


/* genutzt in: karten */
/* kopiert aus archiv_spruch */
.karten {
	background-image:url(PIC/blauer_himmel.jpg);
	background-size:cover;
	padding: 35px 10px 35px 10px; 
	line-height: 30px; 
	color:#0000a0; 	
}


/* genutzt in: Karten */
.karte {
	width: 360px; 
	height: 240px; 
	margin: 10; 
}
/* Tablet, Notebook, Desktop alle querformat */
@media only screen and (min-width: 841px) {  	
	.karte {
		width: 600px; 
		height: 400px; 
		margin: 10;	
	}
}    
/* Handy querformat */
@media only screen and (max-width: 840px) and (min-width: 701px)  {  	
	.karte  {
		width: 450px; 
		height: 300px; 
		margin: 10;
	}
}
/* Handy hochformat */
@media only screen and (max-width: 700px) {  	
	.karte  {
		width: 360px; 
		height: 240px; 
		margin: 10;	
	}
}

.foto_hochformat {
	width: 240px; 
	height: 320px; 
	margin: 10; 
}
/* Tablet, Notebook, Desktop alle querformat */
@media only screen and (min-width: 841px) {  	
	.foto_hochformat {
		width: 450px; 
		height: 600px; 
		margin: 10;	
	}
}    
/* Handy querformat */
@media only screen and (max-width: 840px) and (min-width: 701px)  {  	
	.foto_hochformat {
		width: 270px; 
		height: 360px; 
		margin: 10;
	}
}
/* Handy hochformat */
@media only screen and (max-width: 700px) {  	
	.foto_hochformat {
		width: 195px; 
		height: 260px; 
		margin: 10;	
	}
}


/* genutzt in: LU-Bild-Seite - kopiert aus .archiv_spruch */
/* ist alles unten einzeln fuer die verschiedenen Bildschirmbreiten definiert */
/* .lu_bild_rahmen {
	background-image:url(PIC/blauer_himmel.jpg);
	background-repeat::no-repeat;
	background-size:cover;
	margin: 0px 0px 0px 0px; 
		padding: 35px 35px 35px 35px;  
		float: center;
}  */

/* genutzt in: LU-Bild-Seite */
.lu_bild {
/*	width: 100%; -- geht nicht weil die Link-Bereiche im Bild nicht mit angepasst werden
		height: auto; */  
		width: 420px;
		height: 420px;
	}


/* genutzt in: LU-Bild-Seite */
/* Tablet, Notebook, Desktop alle querformat */  
/* genutzt in: LU-Bild-Seite - kopiert aus .archiv_spruch */      
@media only screen and (min-width: 841px) {  	
	.lu_bild_rahmen {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		max-width: 500px;
		margin: 0px 0px 0px 0px; 
		padding: 35px 35px 35px 35px;  
		float: center;
	}
	
/* geht nicht, muss wg map-links statisch 420x420 sein		
	.lu_bild {
		width: 100%; -- geht nicht weil die link-Bereiche im Bild nicht mit angepasst werden
		height: auto; 
		width: 840px;
		height: 840px;
	} */
}   
   
/* Handy querformat */  
@media only screen and (max-width: 840px) and (min-width: 701px)  {  	
	.lu_bild_rahmen {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 15px 35px 35px 35px;  
		float: center;
	}

}

/* Handy hochformat */
@media only screen and (max-width: 700px) {  	
	.lu_bild_rahmen {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 15px 35px 15px 15px;  
		float: center;
	}

/* geht nicht, muss wg map-links statisch 420x420 sein
	.lu_bild {
		width: 370px;
		height: 370px;
	} */
}  


/* genutzt in inhalt 1 (hellblauer Untergrund): LU-Bild-Seite */
.inhalt1_text {
	padding: 30px 0px 0px 0px; 
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height: 28px; 
	color:#0000a0;  
	text-align:left;
}



/* genutzt in: vier_dim-Seiten */
/* groesser 841, Notebook etc. querformat (nebeneinander) */
@media screen and (min-width: 841px) {  
	.vier_dim_bild {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 35px 200px 35px 45px;  
		color:#0000a0; 
	}
}
/* kleiner 840, Handy hoch- (untereinander) und querformat (nebeneinander) */
@media screen and (max-width: 840px) {  
	.vier_dim_bild {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 35px 45px 35px 45px; 
		color:#0000a0; 
	}
}

/* genutzt in: texte  */	
	.buecher_bild {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 35px 45px 35px 45px; 
		font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
		font-size:14px;  
		line-height: 22px; 
		color:#0000a0; 	
		text-align: left;		
	}
}
/* genutzt in: vier_dim-Seiten, texte */ 
/* kleiner 840, Handy hoch- (untereinander) und querformat (nebeneinander) */
@media screen and (max-width: 840px) {  
	.vier_dim_bild, 
	.buecher_bild {
		background-image:url(PIC/blauer_himmel.jpg);
		background-repeat::no-repeat;
		background-size:cover;
		margin: 0px 0px 0px 0px; 
		padding: 35px 45px 35px 45px; 		
		font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
		font-size:14px;  
		line-height: 22px; 
		color:#0000a0; 	
		text-align: left;		
	}
}


/* genutzt in: vier_dim-Seiten */
.vier_dim_text {
	background-color: #0033cd; 
	padding: 25px 40px 20px 45px; 
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height: 28px; 
	color:#C0E0FF;  /* bis 03.05.23 white */ 
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: vier_dim-Seiten - jetzt h2 */
/* .vier_dim_ueberschrift {
	padding: 0px 0px 20px 0px; 
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
} */

/* genutzt in: vier_dim-Seiten */
.vier_dim_text_ueberschrift {
	background-color: #0033cd; 
	padding: 0px 20px 0px 30px; 
	float:left;
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	color:#C0E0FF;  /* bis 03.05.23 white */
	text-align:left:
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/*  R E G I S T E R  */

/* genutzt in: register-Seite */
.register_alphabet {
	background-color: #0033cd; 
	padding: 20px 40px 20px 45px; 
	float:left;
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:16px;
	line-height: 22px; 
	color:#C0E0FF;  /* bis 03.05.23 white */
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: register-Seite */
.register_alphabet a:link,
.register_alphabet a:visited,
.register_text a:link,
.register_text a:visited {
	color: #60B0F0; /* bis 19.3.2023: #87ceeb; skyblue; */
}
/* genutzt in: register-Seite */
.register_buchstabe {
	background-image:url(PIC/blauer_himmel.jpg);
	background-repeat::no-repeat;
	background-size:cover;
	margin: 0px 0px 0px 0px; 
	padding: 20px 15px 20px 15px;  
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:20px; 
	line-height: 26px;
	color:#0000a0; 	
	font-weight:bold; 
	text-align:center;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: register-Seite */
.register_begriff {
	background-image:url(PIC/blauer_himmel.jpg);
	background-repeat::no-repeat;
	background-size:cover;
	margin: 0px 0px 0px 0px; 
	padding: 20px 15px 20px 15px;  
	font-family: 'Arial Rounded MT Bold',Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px; 
	line-height: 28px;
	color:#0000a0; 	
	font-weight:bold; 
	text-align:center;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}

/* genutzt in: register-Seite */
.register_text {
	background-color: #0033cd; 
	margin: 0px 0px 0px 0px; 
	padding: 20px 40px 20px 45px; 
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:18px;
	line-height: 28px; 
	color: #60B0F0; /* bis 19.3.2023: #87ceeb;  skyblue; */  
	text-align:left;
	/* bis 22.04.23: letter-spacing: 0.05em; */
}




/* genutzt in index-Seite, aber fuer alle genauso zu gebrauchen */
.copyright {
	font-family: Thesis,Thesis Plus Kyrillic,Helvetica,Arial,sans-serif;
	font-size:10px;
	color:skyblue;  
	text-align:right;
}


/* genutzt in: alle Seiten */
#footer {
	margin: 10px 20px 10px 0; /* bis 12.11.2022: 0px 55px 0 0 */ 
/* bis 12-11-2022: padding: 0 0 30px 0; */
/*	width:600px;  */
	text-align: right;
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight:bolder;
	text-transform:uppercase;
	letter-spacing: 0.1em;
	/* color:#fff; */
	color:black;
}
/* damit es nicht mit dem defalt ueberschrieben wird, definiere ich es hier nochal so, wie es im #footer schon steht */
/*	a.footer:link 
a.footer:hover
a.footer:visited {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:10px;
        text-decoration: none;
        color:#fff;
}	*/
.footer {
	font-family: Tahoma, Arial, Helvetica, sans-serif;
	font-size:10px;
	text-decoration: none;
	/* color:#fff; */
	color:black;
}

a.footer:link {
        font-family: Tahoma, Arial, Helvetica, sans-serif;
        font-size:10px;
        text-decoration: none;
        color:black;
}




/* ----------------------------------------------  Animation  ------------------------------------------------------- */

.lu_bild_ani {
	width: 210px;
	height: 210px;
}

.ani_seite1 {
	float:left;
	height: 420px;
	width: 420px;
	animation: ani_seite1 10s; 
}

.ani_seite2 {
	float:left;
	margin: 0 0 0 -210px;
	animation: ani_seite2 10s;
}

.ani_seite3 {
	float:left;
	margin: 210px 0 0 -210px;
	animation: ani_seite3 10s;
}

.ani_seite4 {
	float:left;
	margin: 210px 0 0 -420px;
	animation: ani_seite4 10s;
}

.ani_seite5 {
	float:left;
	margin: -420px 0 0 0;
	animation: ani_seite5 10s;
}

/* fuer Bildschirme, in denen das Bild 2x nebeneinander passt */
@media only screen and (min-width: 841px) {  		
	.ani_seite1 {
		float:left;
		height: 420px;
		width: 840px;
		animation: ani_seite1 10s; 
	}
	
	.ani_seite2 {
		float:left;
		margin: 0 0 0 -630px;
		animation: ani_seite2 10s;
	}
	
	.ani_seite3 {
		float:left;
		margin: 210px 0 0 -630px;
		animation: ani_seite3 10s;
	}
	
	.ani_seite4 {
		float:left;
		margin: 210px 0 0 -840px;
		animation: ani_seite4 10s;
	}
	
	.ani_seite5 {
		float:left;
		margin: -420px 0 0 0;
		animation: ani_seite5 10s;
	}
}



@keyframes ani_seite1 {
	0%   {opacity: 1.0;}
	15%  {opacity: 1.0;}
	25%  {opacity: 0.0;}
	100% {opacity: 0.0;}
}

@keyframes ani_seite2 {
	0%   {opacity: 0.0;}
	15%  {opacity: 0.0;}
	25%  {opacity: 1.0;}
	35%  {opacity: 1.0;}
	45%  {opacity: 0.0;}
	100% {opacity: 0.0;}
}

@keyframes ani_seite3 {
	0%   {opacity: 0.0;}
	35%  {opacity: 0.0;}
	45%  {opacity: 1.0;}
	55%  {opacity: 1.0;}
	65%  {opacity: 0.0;}
	100% {opacity: 0.0;}
}

@keyframes ani_seite4 {
	0%   {opacity: 0.0;}
	55%  {opacity: 0.0;}
	65%  {opacity: 1.0;}
	75%  {opacity: 1.0;}
	85%  {opacity: 0.0;}
	100% {opacity: 0.0;}
}

@keyframes ani_seite5 {
	0%   {opacity: 0.0;}
	75%  {opacity: 0.0;}
	85%  {opacity: 1.0;}
	100% {opacity: 1.0;}
}


/* ------------------ */
/* Anfang roter Faden */

.ani_roter_faden {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
/*  float:right;  /* ab 26.3.23 linksbuendig wg Menue*/
  animation-iteration-count: infinite;
  animation-fill-mode: none
}

.ani_rf1 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  background-image:url("PIC/ANI/roter_faden_01.jpg");
  animation: ani_rf1 40s infinite;
}

@keyframes ani_rf1 {
  0%   {opacity: 1.0;}
  4%   {opacity: 1.0;}
  8%   {opacity: 0.0;}
  92%  {opacity: 0.0;}
  96%  {opacity: 1.0;}
  100% {opacity: 1.0;}
}

.ani_rf2 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_02.jpg");
  animation: ani_rf2 40s infinite;
}

@keyframes ani_rf2 {
  0%   {opacity: 0.0;}
  4%   {opacity: 0.0;}
  8%   {opacity: 1.0;}
  12%  {opacity: 0.0;}
  88%  {opacity: 0.0;}
  92%  {opacity: 1.0;}
  96%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}


.ani_rf3 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_03.jpg");
  animation: ani_rf3 40s infinite;
}

@keyframes ani_rf3 {
  0%   {opacity: 0.0;}
  8%   {opacity: 0.0;}
  12%  {opacity: 1.0;}
  16%  {opacity: 0.0;}
  84%  {opacity: 0.0;}
  88%  {opacity: 1.0;}
  92%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf4 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_04.jpg");

  animation: ani_rf4 40s infinite;
}

@keyframes ani_rf4 {
  0%   {opacity: 0.0;}
  12%  {opacity: 0.0;}
  16%  {opacity: 1.0;}
  20%  {opacity: 0.0;}
  80%  {opacity: 0.0;}
  84%  {opacity: 1.0;}
  88%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf5 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_05.jpg");
  animation: ani_rf5 40s infinite;
}

@keyframes ani_rf5 {
  0%   {opacity: 0.0;}
  16%  {opacity: 0.0;}
  20%  {opacity: 1.0;}
  24%  {opacity: 0.0;}
  76%  {opacity: 0.0;}
  80%  {opacity: 1.0;}
  84%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}


.ani_rf6 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_06.jpg");
  animation: ani_rf6 40s infinite;
}

@keyframes ani_rf6 {
  0%   {opacity: 0.0;}
  20%  {opacity: 0.0;}
  24%  {opacity: 1.0;}
  28%  {opacity: 0.0;}
  72%  {opacity: 0.0;}
  76%  {opacity: 1.0;}
  80%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf7 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_07.jpg");
  animation: ani_rf7 40s infinite;
}

@keyframes ani_rf7 {
  0%   {opacity: 0.0;}
  24%  {opacity: 0.0;}
  28%  {opacity: 1.0;}
  32%  {opacity: 0.0;}
  68%  {opacity: 0.0;}
  72%  {opacity: 1.0;}
  76%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf8 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_08.jpg");
  animation: ani_rf8 40s infinite;
  }

@keyframes ani_rf8 {
  0%   {opacity: 0.0;}
  28%  {opacity: 0.0;}
  32%  {opacity: 1.0;}
  36%  {opacity: 0.0;}
  64%  {opacity: 0.0;}
  68%  {opacity: 1.0;}
  72%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf9 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_09.jpg");
  animation: ani_rf9 40s infinite;
}

@keyframes ani_rf9 {
  0%   {opacity: 0.0;}
  32%  {opacity: 0.0;}
  36%  {opacity: 1.0;}
  40%  {opacity: 0.0;}
  60%  {opacity: 0.0;}
  64%  {opacity: 1.0;}
  68%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}


.ani_rf10 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_10.jpg");
  animation: ani_rf10 40s infinite;
}

@keyframes ani_rf10 {
  0%   {opacity: 0.0;}
  36%  {opacity: 0.0;}
  40%  {opacity: 1.0;}
  44%  {opacity: 0.0;}
  56%  {opacity: 0.0;}
  60%  {opacity: 1.0;}
  64%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf11 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_11.jpg");
  animation: ani_rf11 40s infinite;
}

@keyframes ani_rf11 {
  0%   {opacity: 0.0;}
  40%  {opacity: 0.0;}
  44%  {opacity: 1.0;}
  48%  {opacity: 0.0;}
  52%  {opacity: 0.0;}
  56%  {opacity: 1.0;}
  60%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

.ani_rf12 {
  width:272px; /* bis 27.03.2023 320px */ 
  height:204px; /* bis 27.03.2023 240px */
  float:right;
  margin:-204px 0 0 0; /* bis 27.03.2023 -240px */
  background-image:url("PIC/ANI/roter_faden_12.jpg");
  animation: ani_rf12 40s infinite;
}

@keyframes ani_rf12 {
  0%   {opacity: 0.0;}
  44%  {opacity: 0.0;}
  48%  {opacity: 1.0;}
  52%  {opacity: 1.0;}
  56%  {opacity: 0.0;}
  100% {opacity: 0.0;}
}

/* Ende roter Faden */
/* ---------------- */