/* b01a30 rot */
/* 143b3f blau */

/* font-size: xx-small, x-small, small, medium, large, x-large, xx-large*/
/* font-size: 0.1em ... 1em (Standard size) ... 3.1em etc. */

/* Schrift importieren */
@font-face
{
	font-family:'M';
	src:url('fonts/wetzuis.woff2'),
		url('fonts/xz234s.woff');
}

@font-face
{
	font-family:'TH';
	src:url('fonts/9e1c3b1f-ffe0-4687-9aa8-80f78f720cc6.woff2'),
		url('fonts/bc4e671f-f293-425d-824d-a2ff266d124f.woff');
}
		

/* Globale variablen definieren */

:root
{
	/* FARBEN */
	--mdj_Rot:#b01a30;
	/* --mdj_Blau:rgb(27,29,44); Blau für Cupcakes Webseite */
	--mdj_Blau:#113d3c;
	
	/* CONTAINER */
	--mdj_CMargeOben: 50px;
	--mdj_CHoehe: 1900px;
	--mdj_CBreite: 1600px;
	
/* KREISE */
		/* Grösse */
	--mdj_Logo: 400px;
	--mdj_GrossesBild: 800px; 
	--mdj_KleinesBild: 500px;
	--mdj_KreisInhalt: 1000px;
	--mdj_KreisBibelvers: 375px;
		/* Position */
	--mdj_LogoLinks: calc(var(--mdj_CBreite) /2 - var(--mdj_Logo) * 0.35);
	--mdj_GrossesBildRechts: 0px;
	--mdj_GrossesBildOben: 100px;
	--mdj_KreisInhaltLinks: 100px;
	--mdj_KreisInhaltOben: 450px;
	--mdj_KleinesBildLinks: 0px;
	--mdj_KleinesBildOben: 900px;
	--mdj_KreisBibelversLinks: calc(var(--mdj_CBreite) /2 - var(--mdj_KreisBibelvers) / 2);
	--mdj_KreisBibelversOben: 1300px;
		/* Textparametern */
	--mdj_KreisInhaltPaddingOben: calc(0.13 * var(--mdj_KreisInhalt));
	--mdj_KreisInhaltZwischenabstand1: calc(0.15 * var(--mdj_KreisInhalt));
	--mdj_KreisInhaltZwischenabstand2: calc(0.07 * var(--mdj_KreisInhalt));
	--mdj_KreisInhaltZwischenabstand3: calc(0.02 * var(--mdj_KreisInhalt));
	--mdj_KreisInhaltPaddingUnten: 0;
	--mdj_KreisBibelversPaddingOben: 0;
	--mdj_KreisBibelversZwischenabstand1: calc(0.04 * var(--mdj_KreisBibelvers));
	--mdj_KreisBibelversPaddingUnten: calc(0.01 * var(--mdj_KreisBibelvers));
	
	
	/* SCHMETTERLINGE */
		/* Grösse */
	--mdj_SchmetterlingGroesse:80px;
		/* Position */
	--mdj_Schmetterling1Links: calc(var(--mdj_KreisInhaltLinks) + var(--mdj_KreisInhalt) / 2);
	--mdj_Schmetterling1Oben: calc(var(--mdj_KreisInhaltOben) - 1.5 * var(--mdj_SchmetterlingGroesse));
	--mdj_Schmetterling2Links: calc(var(--mdj_KreisBibelversLinks) + 1.1 * var(--mdj_KreisBibelvers));
	--mdj_Schmetterling2Oben: calc(var(--mdj_KreisBibelversOben) + var(--mdj_SchmetterlingGroesse));
	--mdj_Schmetterling3Links: calc(var(--mdj_KreisBibelversLinks) - 0.5 * var(--mdj_SchmetterlingGroesse));
	--mdj_Schmetterling3Oben: calc(var(--mdj_KreisBibelversOben) + var(--mdj_KreisBibelvers));
	
	/* WEITERE VARIABLEN */
	--mdj_GrundGroesseSchrift: 1.2em;
	
	/* VARIABLE, WELCHE MIT JS DEKLARIERT WERDEN */
	/* --mdj_ScrollbarWidth : ergibt die Breite der Scrollbar */
	
}


/* Grundeinstellungen =========== */

*
{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box; /* Tells to account for border and padding */	
	font-family:'TH', Arial;
}

body
{
	background: white;
	font-size: 100%;
	color: white;
}

a
{
	text-decoration: none;
	color: white;
}

h2
{
	font-family: 'M', Arial;
	font-weight: normal;
	font-size: calc(2.1 * var(--mdj_GrundGroesseSchrift));
}

/* Container ================================ */

#container
{
	margin: auto;
	margin-top: var(--mdj_CMargeOben);
	height: var(--mdj_CHoehe);
	width: var(--mdj_CBreite);
	position: relative;
}

/* Kreise ==================================== */

body img
{
	border-radius: 50%;
}


#logo
{
	width: var(--mdj_Logo);
	height: var(--mdj_Logo);
	position: absolute;
	left: var(--mdj_LogoLinks);
	z-index: 100;
}


#GrossesBild
{
	width: var(--mdj_GrossesBild);
	height: var(--mdj_GrossesBild);
	position: absolute;
	right: var(--mdj_GrossesBildRechts);
	top: var(--mdj_GrossesBildOben);
	z-index: 50;
}

#KleinesBild
{
	width: var(--mdj_KleinesBild);
	height: var(--mdj_KleinesBild);
	position: absolute;
	left: var(--mdj_KleinesBildLinks);
	top: var(--mdj_KleinesBildOben);
}

#Haupttext
{
	text-align: center;
	display:flex;
	flex-direction: column;
	width: var(--mdj_KreisInhalt);
	height: var(--mdj_KreisInhalt);
	background: var(--mdj_Blau);
	border-radius: 50%;
	position: absolute;
	left: var(--mdj_KreisInhaltLinks);
	top: var(--mdj_KreisInhaltOben);
	padding-top: var(--mdj_KreisInhaltPaddingOben);
	padding-bottom: var(--mdj_KreisInhaltPaddingUnten);
}

	#Haupttext .Zwischenabstand1
	{
		margin-top: var(--mdj_KreisInhaltZwischenabstand1);
	}

	#Haupttext .Zwischenabstand2
	{
		margin-top: var(--mdj_KreisInhaltZwischenabstand2);
	}

	#Haupttext .Zwischenabstand3
	{
		margin-top: var(--mdj_KreisInhaltZwischenabstand3);
	}

#Bibelvers
{
	background-color: var(--mdj_Rot);
	border-radius: 50%;
	width: var(--mdj_KreisBibelvers);
	height: var(--mdj_KreisBibelvers);
	position: absolute;
	left: var(--mdj_KreisBibelversLinks);
	top: var(--mdj_KreisBibelversOben);
	text-align: center;
	display:flex;
	flex-direction: column;
	justify-content: center;
	padding-top: var(--mdj_KreisBibelversPaddingOben);
	padding-bottom: var(--mdj_KreisBibelversPaddingUnten);
}

	#Bibelvers .Zwischenabstand1
	{
		margin-top: var(--mdj_KreisBibelversZwischenabstand1);
	}

/* Texteinstellungen =================================== */

#Bibelvers p.Referenz
{
	font-size: calc(1.4 * var(--mdj_GrundGroesseSchrift));
}

.HT_spacing1
{
	font-size: calc(2 * var(--mdj_GrundGroesseSchrift));
	line-height: calc(1.35 * var(--mdj_GrundGroesseSchrift));
}

.HT_spacing2
{
	font-size: calc(2 * var(--mdj_GrundGroesseSchrift));
	line-height: calc(1.5 * var(--mdj_GrundGroesseSchrift));
}

.BV_spacing
{
	font-size: calc(2 * var(--mdj_GrundGroesseSchrift));
	line-height: calc(1.2 * var(--mdj_GrundGroesseSchrift));
	padding-top: calc(0.05 * var(--mdj_KreisBibelvers));
}

.right
{
	align-self: flex-end;
	width: calc(var(--mdj_KreisInhalt) / 1.5);
}

.left
{
	align-self: flex-start;
	width: calc(var(--mdj_KreisInhalt) / 1.15);
}

.BR_Haekelwunsch
	{
		display:none;
	}
	
.BR_Verraten
	{
		display:inline;
	}

/* Links ========================== */

.right a
{
	font-family:M;
	line-height:70px;
}

.right a:hover
{
	color: var(--mdj_Rot);
}

/* Schmetterlinge ========================== */

.schmetterling
{
	height: var(--mdj_SchmetterlingGroesse);
	border-radius: 0px;
	position: absolute;
	transform: scaleX(-1);
}

#Schmetterling1
{
	left: var(--mdj_Schmetterling1Links);
	top: var(--mdj_Schmetterling1Oben);
	transform: scaleX(-1);
}

#Schmetterling2
{
	left: var(--mdj_Schmetterling2Links);
	top: var(--mdj_Schmetterling2Oben);
}

#Schmetterling3
{
	left: var(--mdj_Schmetterling3Links);
	top: var(--mdj_Schmetterling3Oben);
}

footer
{
	position: absolute;
	height: 30px;
	width: var(--mdj_CBreite);
	bottom: 10px;
	text-align: center;
	color: grey;
	font-size: calc(1.2 * var(--mdj_GrundGroesseSchrift));
}

/* RESPONSIVE ====================== */
@media screen and (max-width:1650px) and (min-width:1251px)
{
	:root
	{
		/* CONTAINER */
		--mdj_CBreite: 1200px;
		--mdj_CHoehe: 1600px;
		
		/* KREISE */
			/* Grösse */
		--mdj_Logo: 350px;
		--mdj_GrossesBild: 600px; 
		--mdj_KleinesBild: 400px;
		--mdj_KreisInhalt: 800px;
		--mdj_KreisBibelvers: 300px;
			/* Position */
		--mdj_LogoLinks: calc(var(--mdj_CBreite) /2 - var(--mdj_Logo) * 0.40);
		--mdj_GrossesBildOben: 125px;
		--mdj_KreisInhaltLinks: 100px;
		--mdj_KleinesBildOben: 800px;
		--mdj_KreisBibelversOben:1100px;
			/* Textparametern */
		--mdj_KreisInhaltZwischenabstand1: calc(0.125 * var(--mdj_KreisInhalt));
		--mdj_KreisInhaltZwischenabstand2: calc(0.053 * var(--mdj_KreisInhalt));
		
		/* SCHMETTERLINGE */
			/* Grösse */
		--mdj_SchmetterlingGroesse:70px;
			/* Position */
		--mdj_Schmetterling1Links: calc(var(--mdj_KreisInhaltLinks) + var(--mdj_KreisInhalt) / 2.5);
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
	}
	
	.HT_spacing1
	{
		line-height: calc(1.5 * var(--mdj_GrundGroesseSchrift));
	}

	.HT_spacing2
	{
		line-height: calc(1.2 * var(--mdj_GrundGroesseSchrift));
	}

	.BV_spacing
	{
		line-height: calc(1.4 * var(--mdj_GrundGroesseSchrift));
	}
	
	.right a
	{
		line-height:60px;
	}
	
}

@media only screen and (max-width:1250px) and (min-width:951px)
{
	:root
	{
		/* CONTAINER */
		--mdj_CBreite: 900px;
		--mdj_CHoehe: 1550px;
		
		/* KREISE */
			/* Grösse */
		--mdj_Logo: 275px;
		--mdj_GrossesBild: 500px; 
		--mdj_KleinesBild: 350px;
		--mdj_KreisInhalt: 750px;
		--mdj_KreisBibelvers: 300px;
			/* Position */
		--mdj_GrossesBildOben: 125px;
		--mdj_KreisInhaltLinks: 50px;
		--mdj_KleinesBildOben: 800px;
		--mdj_KreisBibelversOben: 1075px;
			/* Abstände */
		--mdj_KreisInhaltPaddingOben: calc(0.19 * var(--mdj_KreisInhalt));
		--mdj_KreisInhaltZwischenabstand1: calc(0.12 * var(--mdj_KreisInhalt));
		--mdj_KreisInhaltZwischenabstand2: calc(0.036 * var(--mdj_KreisInhalt));

		
		/* SCHMETTERLINGE */
			/* Grösse */
		--mdj_SchmetterlingGroesse:60px;
			/* Position */
		--mdj_Schmetterling1Links: calc(var(--mdj_KreisInhaltLinks) + var(--mdj_KreisInhalt) / 3);
		--mdj_Schmetterling2Links: calc(var(--mdj_KreisBibelversLinks) + 1.3 * var(--mdj_KreisBibelvers));
		--mdj_Schmetterling2Oben: calc(var(--mdj_KreisBibelversOben) + 1.1 * var(--mdj_SchmetterlingGroesse));
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
	}
	
		.right a
	{
		line-height:50px;
	}
	
		.BV_spacing
	{
		line-height: calc(1.35 * var(--mdj_GrundGroesseSchrift));
	}

}

@media only screen and (max-width:950px) and (min-width:651px)
{
	:root
	{
		/* CONTAINER */
		--mdj_CBreite: 600px;
		--mdj_CHoehe: 1775px;
		
		/* KREISE */
			/* Grösse */
		--mdj_Logo: 275px;
		--mdj_GrossesBild: 475px; 
		--mdj_KleinesBild: 350px;
		--mdj_KreisInhalt: 600px;
		--mdj_KreisBibelvers: 300px;
			/* Position */
		--mdj_LogoLinks: 23px;
		--mdj_KreisInhaltLinks: 0px;
		--mdj_KreisInhaltOben: 500px;
		--mdj_KleinesBildOben: 1025px;
		--mdj_KreisBibelversOben: 1325px;
			/* Textparametern */
		--mdj_KreisInhaltPaddingOben: 0;
		--mdj_KreisInhaltZwischenabstand1: calc(0.08 * var(--mdj_KreisInhalt));
		--mdj_KreisInhaltZwischenabstand2: calc(0.03 * var(--mdj_KreisInhalt));
		
		/* SCHMETTERLINGE */
			/* Grösse */
		--mdj_SchmetterlingGroesse:60px;
			/* Position */
		--mdj_Schmetterling1Links: 50px;
		--mdj_Schmetterling2Oben: calc(var(--mdj_KreisBibelversOben) - 2 * var(--mdj_SchmetterlingGroesse));
		--mdj_Schmetterling2Links: calc(var(--mdj_KreisBibelversLinks) + 0.90 * var(--mdj_KreisBibelvers));
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
		
	}
	
	#Haupttext
	{
		justify-content: center;
	}

	.right, .left
	{
		width: var(--mdj_KreisInhalt);
	}
	
	.HT_spacing1
	{
		line-height: calc(1.40 * var(--mdj_GrundGroesseSchrift));
	}

	.HT_spacing2
	{
		line-height: calc(1.2 * var(--mdj_GrundGroesseSchrift));
	}

	.BV_spacing
	{
		line-height: calc(1.3 * var(--mdj_GrundGroesseSchrift)); /*MOD*/
	}

	#KleinesBild
	{
		z-index: 100;
	}

	.BR_Verraten
	{
		display:none;
	}
	
	.right a
	{
		line-height:50px;
	}
}


@media only screen and (max-width:650px)
{
	:root
	{
		/* CONTAINER */
		--mdj_CBreite: calc(100vw - var(--mdj_ScrollbarWidth));
		--mdj_CHoehe: calc(350px + 3.48 * var(--mdj_CBreite)); /*MOD*/
		--mdj_CMargeOben: calc(0.1 * var(--mdj_CBreite));
		--mdj_CMargeMin: calc(0.05 * var(--mdj_CBreite));
		
		/* KREISE */
			/* Grösse */
		--mdj_Logo: calc(0.5 * var(--mdj_CBreite));
		--mdj_GrossesBild: calc(0.9 * var(--mdj_CBreite)); 
		--mdj_KleinesBild: calc(0.75 * var(--mdj_CBreite)); 
		--mdj_KreisInhalt: calc(350px + 0.85 * var(--mdj_CBreite)); /*MOD*/
		--mdj_KreisBibelvers: calc(0.75 * var(--mdj_CBreite));
			/* Position */
		--mdj_LogoLinks: calc(0.1 * var(--mdj_CBreite));
		--mdj_GrossesBildRechts: var(--mdj_CMargeMin);
		--mdj_GrossesBildOben: calc(0.28 * var(--mdj_CBreite)); /*MOD*/
		--mdj_KreisInhaltLinks: calc((var(--mdj_CBreite) - var(--mdj_KreisInhalt)) / 2);
		--mdj_KreisInhaltOben: calc(1.08 * var(--mdj_CBreite)); /*MOD*/
		--mdj_KleinesBildLinks: var(--mdj_CMargeMin);
		--mdj_KleinesBildOben: calc(var(--mdj_KreisInhalt) + 0.93 * var(--mdj_CBreite)); /*MOD*/
		--mdj_KreisBibelversLinks: calc(0.20 * var(--mdj_CBreite));
		--mdj_KreisBibelversOben: calc(var(--mdj_KreisInhalt) + 1.58 * var(--mdj_CBreite)); /*MOD*/
				/* Textparametern */
		--mdj_KreisInhaltPaddingOben: calc(0.10 * var(--mdj_CBreite));
		--mdj_KreisInhaltZwischenabstand1: calc(50px + 0.01 * var(--mdj_CBreite));
		--mdj_KreisInhaltZwischenabstand2: calc(0.1 * var(--mdj_CBreite)); /*MOD*/
		--mdj_KreisInhaltZwischenabstand3: calc(0.05 * var(--mdj_CBreite));
		--mdj_KreisInhaltPaddingUnten: calc(0.15 * var(--mdj_CBreite));
		--mdj_KreisBibelversZwischenabstand1: calc(0.04 * var(--mdj_KreisBibelvers));
		--mdj_KreisBibelversPaddingOben: calc(0.06 * var(--mdj_KreisBibelvers));
		--mdj_KreisBibelversPaddingUnten: 0;
		
		/* SCHMETTERLINGE */
			/* Grösse */
		--mdj_SchmetterlingGroesse:calc(0.105 * var(--mdj_CBreite));
			/* Position */
		--mdj_Schmetterling1Links: calc(0.75 * var(--mdj_CBreite));
		--mdj_Schmetterling1Oben: var(--mdj_CMargeMin);
		--mdj_Schmetterling2Oben: calc(var(--mdj_KreisBibelversOben) - 4 * var(--mdj_SchmetterlingGroesse));
		--mdj_Schmetterling2Links: calc(var(--mdj_KreisBibelversLinks) + 0.86 * var(--mdj_KreisBibelvers));
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
		
	}

	#Haupttext
	{
		justify-content: center;
	}

	.right, .left
	{
		width: var(--mdj_CBreite);
		align-self: center;
		padding-left: var(--mdj_CMargeMin);
		padding-right: var(--mdj_CMargeMin);
	}
	
	.HT_spacing1
	{
		line-height: calc(1.5 * var(--mdj_GrundGroesseSchrift));
	}

	.HT_spacing2
	{
		line-height: calc(1.2 * var(--mdj_GrundGroesseSchrift));
	}

	.BV_spacing
	{
		line-height: calc(1.5 * var(--mdj_GrundGroesseSchrift));
	}

	#KleinesBild
	{
		z-index: 100;
	}

	#container
	{
		overflow-x: hidden;
	}
	
	.BR_Haekelwunsch
	{
		display:inline;
	}

}

@media only screen and (max-width:439px)
{
	:root
	{
		--mdj_GrundGroesseSchrift: 0.96em;
	}
	
}

@media only screen and (max-width:379px)
{
	:root
	{
		--mdj_GrundGroesseSchrift: 0.92em;
	}
	
	.HT_spacing2
	{
		font-size: calc(1.8 * var(--mdj_GrundGroesseSchrift));
		line-height: calc(1.3 * var(--mdj_GrundGroesseSchrift));
	}
	
	.NewLine
	{
		display: none;
	}
}

@media only screen and (max-width:339px)
{
	:root
	{
		--mdj_GrundGroesseSchrift: 0.89em;
	}

	.BV_spacing
	{
		line-height: calc(1.3 * var(--mdj_GrundGroesseSchrift));
		font-size: 1.7em;
	}

}

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

	:root
	{
		/* CONTAINER */
		--mdj_CBreite: calc(319px - var(--mdj_ScrollbarWidth));
	}

	#container
	{
		min-width: calc(319px - var(--mdj_ScrollbarWidth));
	}

}

@media only screen and (max-width:650px) and (orientation:landscape)
{
	:root
	{
		/* CONTAINER */
		--mdj_CBreite: calc(110vh - var(--mdj_ScrollbarWidth));
	}
	
	#container
	{
		overflow-x: visible;
	}
	
		#bodyForMobiles
	{
		width: calc(100vw - var(--mdj_ScrollbarWidth));
		overflow-x: hidden;
	}
	
	.NewLine
	{
		display: inline;
	}
}

		/*
		
        This CSS resource incorporates links to font software which is 
		the valuable copyrighted property of Monotype and/or its suppliers. 
		You may not attempt to copy, install, redistribute, convert, modify or 
		reverse engineer this font software. Please contact Monotype with any questions 
		regarding Web Fonts:  https://www.linotype.com
		
        */