@import url('https://fonts.googleapis.com/css?family=Italianno');
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Freckle+Face');
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni&display=swap');

/* ************************************************************************************************************************************** */

/*
		px in pt: pt = px * 0.75
		pt in px: px = pt * 1.333
		px in em = pixel / 16
		em in px = em * 16
		pt in em = pt / 12
		em in pt = em * 12
*/


body{
background-image: url('https://christerer.de/000-admin-blog-old-man/03-images/01-global/back-sand.jpg');
max-width:1200px;
height:100%;
margin:0px auto;
font-family:'Open Sans';

font-size: 1em; /* 12 pt */

text-align:left;
color:rgb(80,100,120);

/* ***********Silbentrennung******************** */
hyphens: auto;
hyphenate-limit-chars: auto 4;
hyphenate-limit-lines: 2;
-webkit-hyphens: auto;
-webkit-hyphenate-limit-chars: auto 4;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphens: auto;
-ms-hyphenate-limit-chars: auto 4;
-ms-hyphenate-limit-lines: 2;
-moz-hyphens: auto;
-moz-hyphenate-limit-chars: auto 4;
-moz-hyphenate-limit-lines: 2;
}

/* ***********href******************** */
a:link, a:active {
font-family:Open Sans;
color:#000080;
text-decoration:none;
line-height:1.5em;
font-size: 1rem;
}

a:visited{
background-color:#;
color:#000080;
text-decoration:none ;
}
a:hover{
font-weight:normal;
text-decoration:none;
background-color:rgba(230,245,255, 0.65);
}

#index-inhalt{
background-color:rgba(245, 225, 205, 0.88); 
width:100%;
margin-top:20px;
padding-left:1rem;
padding-right:1rem;
min-height:1200px;
text-align:left;
/*color:rgb(80,100,120);*/
color:rgb(0,0,0);
}

#index-kopfbereich{
min-height:260px;
max-height:260px;
}

#index-logo-baeda{
min-width:8%;
max-width:8%;
min-height:230px;
max-height:230px;
margin-top:20px;
padding-left:10px;
display: flex;
align-items:center;
justify-content:center;
float:left;
}

#index-logo-baeda img{
max-height:200px;
}

#index-header{
min-width:82%;
max-width:82%;
min-height:240px;
max-height:240px;
margin-top:-20px;
text-align:center;
padding-left:1%;
padding-right:1%;
float:left;
}

.index-header-name{
font-family:italianno;
font-size:2.2rem;
color:rgb(255,0,0);
}

.index-header-motto{
margin-top:-30px;
margin-bottom:20px;
color:rgb(255,0,0);
font-size:1rem;
text-align:center;
}

.index-header-spruch{
font-size:1rem;
color:rgb(0,0,0);
text-align:left;
padding-left:6%;
font-size: 0.9rem;
}

.index-header-besucherzahl{
font-size:1rem;
text-align:left;
color:rgb(80,80,80);
padding-left:6%;
font-size: 0.9rem;
}

.index-navigation-oben{
/*background-color:rgba(255,210,170, 0.60);*/
background-color:rgba(245,245,245, 0.35);
width:90%;
text-align:center;
color:rgb(0,0,0);
font-size: 1rem;
}

.index-fusszeile-text{
margin-top:25px;
padding-bottom:10px;
font-family:Italianno;
font-size:30pt;
color:rgb(255,36,0);
text-align:center;
}

.index-navigation-unten{
background-color:rgba(245,245,245, 0.35);
width:100%;
text-align:center;
color:rgb(0,0,0);
}

.index-haupttext{
font-size:14pt;
padding-left:1%;
padding-right:1%;
line-height:1.5em;
color:rgb(0,0,0);
}

#WhatsApp{
background-image: url('https://christerer.de/000-admin-blog-old-man/03-images/01-global/pixelweiss.png');
color:rgb(80,100,120);
}

.blinking {
animation:	blinkingtext	3s	3;
font-size:14pt;
}

@keyframes	blinkingtext{
	from	{
	opacity:	1;
	}
	to	{
	opacity:	0;
	}
	0%	{
	opacity:	0;
	}
	50%	{
	opacity:	.5;
	}
	100%	{
	opacity:	1;
	}
}

del { 
    border-radius: 0.2em;
    padding: 0.2em;

    animation-name: animation_blink_5s;
    animation-timing-function: ease-in;
    animation-duration: 2s; 
    animation-iteration-count: 2.5;   
    animation-fill-mode: both;
}

@keyframes animation_blink_5s {
    0% {  
        background-color: white;
    }
    50% {  
        background-color: red;
    }
    100% {  
        background-color: white;
    }
}

.vorlesen {
font-size:14pt;
}
.vorlesen img{
	max-height:35px;
}
.vorlesen a:link, a:active{
font-size:1.0em;
}
.vorlesen a:hover{
background-color:rgba(230,245,255, 0.65);
}


/* ****************************** Erinnerungen ****************************** */

#erinnerungen-inhalt-2604{
background-color:rgba(240, 240, 240, 0.88);
padding-right:1.5%;
padding-left:1.5%;
font-family:Open Sans;
font-size:40pt;
line-height:1.5em;
color:rgb(0,0,0);
}

#erinnerungen-header{
width:100%;
}

#erinnerungen-logo-baedalinks{
min-width:8%;
max-width:8%;
min-height:220px;
max-height:220px;
margin-top:20px;
margin-left:1%;
display: flex;
align-items:center;
justify-content:center;
float:left;
}

#erinnerungen-logo-baedarechts{
min-width:8%;
max-width:8%;
min-height:220px;
max-height:220px;
margin-top:20px;
margin-right:1%;
display: flex;
align-items:center;
justify-content:center;
float:right;
}
#erinnerungen-logo-baeda img{
max-height:200px;
}

.erinnerungen-home img{
height:70px;
}

.erinnerungen-zuletzt{
margin-top:30px;
text-align:center;
}

.erinnerungen-header-name{
font-family:italianno;
font-size:48pt;
color:rgb(255,0,0);
line-height:1.5em;
text-align:center;
}

.erinnerungen-header-titel{
margin-top:-30px;
font-family:Freckle Face;
font-size:64pt;
color:rgb(255,0,0);
text-align:center;
}

.erinnerungen-header-untertitel{
margin-top:-50px;
font-family:Open Sans;
line-height:1.2em;
font-size:0.9em;
color:rgb(255,0,0);
text-align:center;
}

.erinnerungen-text-beginn{
margin-top:40px;
text-align:center;
}

.erinnerungen-kapitel{
font-family:Open Sans;
font-size:1.6em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
}

.erinnerungen-kapitel-seite{
font-family:Open Sans;
font-size:1.3em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
page-break-before: always;
}

.erinnerungen-kapitel-unterseite{
font-family:Open Sans;
font-size:1.1em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
page-break-before: always;
}

.erinnerungen-peter-freut{
margin-top:20px;
margin-top:50px;
font-family:Open Sans;
font-size:1.8em;
font-style:italic;
color:rgb(0,0,0);
text-align:center;
page-break-before: always;
}

.erinnerungen-inhalt{
font-size:40pt;
padding-left:1%;
padding-right:1%;
line-height:1.5em;
}

.erinnerungen-navigation-oben{
background-color:rgba(255,255,245, 0.65);
margin-left:1%;
width:98%;
text-align:center;
color:rgb(0,0,0);
}

.erinnerungen-fusszeile{
background-color:rgba(245,245,245, 0.6);
width:100%;
margin-top:20px;
margin-bottom:20px;
text-align:center;
}

#erinnerungen-inhalt-2604 a:link, a:active {
font-family:Open Sans;
color:#000080;
text-decoration:none;
line-height:1.5em;
font-size:0.9em;
}

#erinnerungen-inhalt-2604 a:hover{
background-color:rgba(230,245,255, 0.80);
}

#erinnerungen-inhalt-2604 table{
border-collapse: collapse;
width: 100%;
}

#erinnerungen-inhalt-2604 tr{
font-family: Open Sans;
padding-bottom:10px;
width:100%;
}

#erinnerungen-inhalt-2604 th{
font-family: Open Sans;
padding-left:3%;
padding-bottom:10px;
border-bottom: 1px solid black;
width:32.6%;
}

#erinnerungen-inhalt-2604 td{
vertical-align: top;
padding-bottom:10px;
font-family: Open Sans;
text-align: left;
width:32.6%;
}


/* ****************************** Gedanken ****************************** */

#gedanken-inhalt-2604{
/*background-color:rgba(237, 246, 253, 0.50);*/
background-color:rgba(240, 240, 240, 0.66);
margin-top:-20px;
padding-right:1.5%;
padding-left:1.5%;
font-family:Open Sans;
font-size:40pt;
line-height:1.5em;
color:rgb(0,0,0);
}

#gedanken-zentriert-root{
margin-top:0px;
margin-bottom:20px;

display: flex;
align-items: center;
justify-content: center;
}

#gedanken-header{
width:100%;
}

#gedanken-logo-baedalinks{
min-width:8%;
max-width:8%;
min-height:220px;
max-height:240px;
margin-top:20px;
margin-left:1%;
float:left;
}

#gedanken-logo-baeda img{
max-height:220px;
}

.gedanken-home img{
height:70px;
}

.gedanken-header-name{
font-family:italianno;
font-size:48pt;
color:rgb(255,0,0);
line-height:1.5em;
text-align:center;
}

.gedanken-header-titel{
margin-top:-60px;
font-family:Garamond;
font-size:42pt;
color:rgb(100,100,100);
text-align:center;
}

.gedanken-header-untertitel{
margin-top:-50px;
font-family:Open Sans;
line-height:1.2em;
font-size:0.9em;
color:rgb(100,100,100);
text-align:center;
}

.gedanken-zuletzt{
/*background-color:rgba(245,245,245, 0.65);*/
background-color:rgba(240, 240, 240, 0.40);
margin-top:30px;
text-align:center;
}

.gedanken-text-beginn{
margin-top:40px;
text-align:center;
}

.gedanken-kapitel{
font-family:Open Sans;
font-size:1.6em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
}

.gedanken-kapitel-seite{
font-family:Open Sans;
font-size:1.3em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
page-break-before: always;
}

.gedanken-kapitel-unterseite{
font-family:Open Sans;
font-size:1.1em;
font-weight:bolder;
color:rgb(0,0,0);
text-align:center;
page-break-before: always;
}


.gedanken-fusszeile{
/*background-color:rgba(245,245,245, 0.65);*/
background-color:rgba(240, 240, 240, 0.40);
width:100%;
margin-top:20px;
margin-bottom:20px;
text-align:center;
}

.gedanken-navigation-oben{
background-color:rgba(230,245,255, 0.50);
width:100%;
text-align:center;
}

.gedanken-inhalt{
font-size:40pt;
padding-left:1%;
padding-right:1%;
line-height:1.5em;
}

#gedanken-inhalt-2604 a:link, a:active {
font-family:Open Sans;
color:#000080;
text-decoration:none;
line-height:1.5em;
font-size:0.9em;
}

#gedanken-inhalt-2604 a:hover{
background-color:rgba(230,245,255, 0.80);
}

#gedanken-inhalt-2604 table{
border-collapse: collapse;
width: 100%;
}

#gedanken-inhalt-2604 tr{
font-family: Open Sans;
padding-bottom:10px;
width:100%;
}

#gedanken-inhalt-2604 th{
font-family: Open Sans;
padding-left:3%;
padding-bottom:10px;
border-bottom: 1px solid black;
width:32.6%;
}

#gedanken-inhalt-2604 td{
vertical-align: top;
padding-bottom:10px;
font-family: Open Sans;
text-align: left;
width:32.6%;
}


/* **************nochmal genauer lernen; ersetzt evt. float in div************************************ */
.flex-container {
display: flex;
background-color: rgb(255,255,255);
flex-direction: row;
}

.flex-container > div {
background-color: rgb(252,252,252);
margin: 10px;
padding: 1%;
width:21%;
}

/* ****************************** Allgemein gültig****************************************************************************** */
.zoom {
  transition: transform .5s; /* Animation */
}
.zoom:hover {
  transform: scale(2.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.zoom2 {
  transition: transform .5s; /* Animation */
}
.zoom2:hover {
  transform: scale(2.0);
}

.zoom3 {
  transition: transform .5s; /* Animation */
}
.zoom3:hover {
  transform: scale(1.5);
}

#whatsapp-inhalt a:link, a:active {
font-family:'Ubuntu';
font-size:12pt;
color:#000080;
text-decoration:none;
line-height:1.5em;
}

#whatsapp-inhalt a:visited{
background-color:#;
color:#000080;
text-decoration:none ;
}
#whatsapp-inhalt a:hover {
font-weight:normal;
text-decoration:none ;
background-color:rgb(225,200,225);/* lila */
}

#whatsapp-kopfz{
width:100%;
background-color:rgb(255,255,255); /* weiss */
margin-top:20px;
margin-bottom:20px;
/* border-radius: 9%;
border-bottom:3px double rgb(175,80,150);   lila */
}
#whatsapp-fussz{
width:100%;
margin-top:20px;
margin-bottom:20px;
background-color:rgb(230,230,230);
height:25px;
text-align:center;
}

#whatsapp-fussz a:link, a:active {
font-family:Ubuntu;
font-size:8pt;
color:#000080;
text-decoration:none;
line-height:1.5em;
}

/* ****** wird für zentrierte images verwendet, in div einbinden************ */
#zentriert-root{
margin-top:15px;
margin-bottom:15px;
display: flex;
align-items: center;
justify-content: center;
}

#zentriert{
margin-top:30px;
margin-bottom:30px;
display: flex;
align-items: center;
justify-content: center;
}

.clearance:after {
	content: "";
	display: block;
	clear: both;
}

/* ****************************** blinkender Text****************************** */
.blinking {
	animation:	blinkingText	5s	3;
	color:rgb(80,100,120);
	font-size:	12pt;
/*	font-family:	futura;
	font-style:	italic;
	width:	100%;
	margin:	0	auto;
	text-align:	left;
	color:	white;
	font-size:	12pt;
	background-color:	#fc030b;
*/
}
@keyframes	blinkingText	{
	from	{
	opacity:	1;
	color	:	black;
	}
	to	{
	opacity:	0;
	color	:	rgb(255,36,0);
	}
	0%	{
	opacity:	0;
	}
	50%	{
	opacity:	.5;
	}
	100%	{
	opacity:	1;
	}
}

.blinkspecial {
	animation:	blinkspecialtext	3s	3;
	color:rgb(255,255,255);
	font-size:	12pt;
/*	font-family:	futura;
	font-style:	italic;
	width:	100%;
	margin:	0	auto;
	text-align:	left;
	color:	white;
	font-size:	12pt;
	background-color:	#fc030b;
*/
}
@keyframes	blinkspecialtext	{
	from	{
	opacity:	1;
	color	:	yellow;
	}
	to	{
	opacity:	0;
	color	:	rgb(255,255,255);
	}
	0%	{
	opacity:	0;
	}
	50%	{
	opacity:	.5;
	}
	100%	{
	opacity:	1;
	}
}





/* ****************************** Fonts, Größen, Stile ****************************** */

.italianno{
font-family: 'Italianno', cursive;
}
.ubuntu{
font-family: 'Ubuntu', Arial, sans-serif;
}
.oswald{
font-family: 'Oswald', Arial, sans-serif;
}
.opensans{
font-family: 'Open Sans', Arial, sans-serif;
}
.sourcesanspro{
font-family: 'Source Sans Pro', Arial, sans-serif;
}

.gabriela{
font-family: 'Gabriela', cursive;
}
.courgette{
font-family:'Courgette', cursive;
}
.herrvonmuellerhoff{
font-family: 'Herr Von Muellerhoff', cursive;
}
.berkshire{
font-family:'Berkshire Swash', cursive;
}
.freckleface{
font-family: 'Freckle Face', cursive;
}

/* ****************************** schriftart schwarz und rot fett und kursiv ****************************** */
schwarz{
color:rgb(0,0,0);
}
schwarzkursiv{
color:rgb(0,0,0);
font-style:italic;
}
schwarzfett{
color:rgb(0,0,0);
font-weight:bolder;
}
schwarzfettkursiv{
color:rgb(0,0,0);
font-weight:bolder;
font-style:italic;
}
/* ****************************** schriftart blau ****************************** */
blau{
color:rgb(0,0,160);
}
blaukursiv{
color:rgb(0,0,160);
font-style:italic;
}
blaufett{
color:rgb(0,0,160);
font-weight:bolder;
}
blaufettkursiv{
color:rgb(0,0,160);
font-weight:bolder;
font-style:italic;
}
/* ****************************** schriftart rot und rot fett und kursiv ****************************** */
rot{
color:rgb(255,36,0);  /* Scharlach */
}
rotkursiv{
color:rgb(255,36,0);  /* Scharlach */
font-style:italic;
}
rotfett{
color:rgb(255,36,0);  /* Scharlach */
font-weight:bolder;
}
rotfettkursiv{
color:rgb(255,36,0);  /* Scharlach */
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart himbeere ****************************** */
himbeere{
color:rgb(210,30,60);
}
himbeerekursiv{
color:rgb(210,30,60);
font-style:italic;
}
himbeerefett{
color:rgb(210,30,60);
font-weight:bold;
}
himbeerefettkursiv{
color:rgb(210,30,60);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart rotbraun ****************************** */
rotbraun{
color:rgb(160,40,65);
}
rotbraunkursiv{
color:rgb(160,40,65);
font-style:italic;
}
rotbraunfett{
color:rgb(160,40,65);
font-weight:bold;
}
rotbraunfettkursiv{
color:rgb(160,40,65);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart purpur ****************************** */
purpur{
color:rgb(184,15,10);
}
purpurkursiv{
color:rgb(184,15,10);
font-style:italic;
}
purpurfett{
color:rgb(184,15,10);
font-weight:bold;
}
purpurfettkursiv{
color:rgb(184,15,10);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart sanddunkel ****************************** */
sanddunkel{
color:rgb(180,160,140);
}
sanddunkelkursiv{
color:rgb(180,160,140);
font-style:italic;
}
sanddunkelfett{
color:rgb(180,160,140);
font-weight:bold;
}
sanddunkelfettkursiv{
color:rgb(180,160,140);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart sandhell ****************************** */
sandhell{
color:rgb(209,183,146);
}
sandhellkursiv{
color:rgb(209,183,146);
font-style:italic;
}
sandhellfett{
color:rgb(209,183,146);
font-weight:bold;
}
sandhellfettkursiv{
color:rgb(209,183,146);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart grau und grau fett und kursiv ****************************** */
grau{
color:rgb(80,80,80);
}
graukursiv{
color:rgb(80,80,80);
font-style:italic;
}
graufett{
color:rgb(80,80,80);
font-weight:bold;
}
graufettkursiv{
color:rgb(80,80,80);
font-weight:bolder;
font-style:italic;
}

/* ****************************** schriftart braun ****************************** */
braun{
color:rgb(128,0,0);
}
braunkursiv{
color:rgb(128,0,0);
font-style:italic;
}
braunfett{
color:rgb(128,0,0);
font-weight:bold;
}
braunfettkursiv{
color:rgb(128,0,0);
font-weight:bolder;
font-style:italic;
}

/* ****************************** farbe creme nur in boerse ****************************** */
creme{
color:rgb(255,255,220);
}
cremekursiv{
color:rgb(255,255,220);
font-style:italic;
}
cremefett{
color:rgb(255,255,220);
font-weight:bolder;
}
cremefettkursiv{
color:rgb(255,255,220);
font-weight:bolder;
font-style:italic;
}