/* 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_CBreite: calc(100vw - var(--mdj_ScrollbarWidth));
	
	/* KREISE */
		/* Grösse */
	--mdj_Logo: 400px;
		/* Position */
	--mdj_LogoLinks: calc(var(--mdj_CBreite) /2 - var(--mdj_Logo) * 0.35);
	
	/* WEITERE VARIABLEN */
	--mdj_GrundGroesseSchrift: 1.2em;
	--mdj_PaddingMin : 15px;
	--mdj_Padding: calc(max(
						max(0px, (var(--mdj_CBreite) - 1200px)/2),
						0.05 * var(--mdj_CBreite),
						var(--mdj_PaddingMin))); /* rendre dynamique avec minimum 15 px */
	
	/* 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: var(--mdj_Rot);
}

a.white
{
	color: white;
}

a:hover
{
	text-decoration: underline;
}

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);
	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;
}


#Hauptteil
{
	position: relative;
	top: calc(0.60* var(--mdj_Logo));
}

#Haupttext2
{
	text-align: left;
	width: var(--mdj_CBreite);
	background: var(--mdj_Blau);
	padding: 0px var(--mdj_Padding);
}

#Haupttext2 p, ul
{
	font-size: calc(2 * var(--mdj_GrundGroesseSchrift));
	padding-bottom: calc(1 * var(--mdj_GrundGroesseSchrift));
}

#Haupttext2 p.before_ul
{
	padding-bottom: calc(0.4 * var(--mdj_GrundGroesseSchrift));
}

#Haupttext2 ul
{
	padding-left: calc(1 * var(--mdj_GrundGroesseSchrift));
}

#Haupttext2 li
{
	display: list-item;
	padding-bottom: calc(0.4 * var(--mdj_GrundGroesseSchrift));
}

#Haupttext2 li.last_li
{
	padding-bottom: 0px;
}

#Haupttext2 h2
{
	padding-top: calc(0.9 * var(--mdj_GrundGroesseSchrift));
	padding-bottom: calc(0.7 * var(--mdj_GrundGroesseSchrift));
}

#Haupttext2 .tabstop1
{
	display: inline-block;
	width: calc(4.5 * var(--mdj_GrundGroesseSchrift));
	float: left;
}

#Haupttext2 .tabstop2
{
	display: inline-block;
	width: calc(6 * var(--mdj_GrundGroesseSchrift));
	float: left;
}

#Haupttext2 #widescreen
{
	display:flex;
}

#Haupttext2 #widescreen .preise
{
	width: calc(var(--mdj_CBreite)/2 - var(--mdj_Padding));
}

/* Pseudo-Kreise ================== */

.pseudo-circle
{
	background-color:var(--mdj_Blau);
	border-radius: 50%;
	height: calc(2.5 * var(--mdj_CBreite));
	width: calc(2.5 * var(--mdj_CBreite));
	position:relative;
	left: calc(-.75 * var(--mdj_CBreite));	
}

.pseudo-circle.bottom
{
	top: calc(-2.39 * var(--mdj_CBreite));	
}

#pseudo-circle-top
{
	overflow: hidden;
	height: calc(0.11 * var(--mdj_CBreite));
}

#pseudo-circle-bottom
{
	overflow: hidden;
	height: calc(0.11 * var(--mdj_CBreite));
}

/* Footer ========================== */

footer
{
	width: var(--mdj_CBreite);
	padding-top: 80px;
	padding-bottom: 15px;
	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
	{
		/* KREISE */
		--mdj_Logo: 350px;
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
	}
	
}

@media only screen and (max-width:1250px) and (min-width:951px)
{
	:root
	{
		/* KREISE */
		--mdj_Logo: 275px;
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
	}
	
	#pseudo-circle-top
	{
		height: calc(0.12 *var(--mdj_CBreite));
	}

	#pseudo-circle-bottom
	{
		height: calc(0.12 *var(--mdj_CBreite));
	}
	
	.pseudo-circle.bottom
	{
		top: calc(-2.38 * var(--mdj_CBreite));	
	}

}

@media only screen and (max-width:950px) and (min-width:651px)
{
	:root
	{
		/* KREISE */
		--mdj_Logo: 275px;

		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
		
	}
	
	#pseudo-circle-top
	{
		height: calc(0.15 *var(--mdj_CBreite));
	}

	#pseudo-circle-bottom
	{
		height: calc(0.15 *var(--mdj_CBreite));
	}
	
	.pseudo-circle.bottom
	{
		top: calc(-2.35 * var(--mdj_CBreite));	
	}
	
	#Haupttext2 #widescreen
	{
	display:block;
	}
	
	#Haupttext2 #widescreen .preise
	{
		width: 100%;
	}

}


@media only screen and (max-width:650px)
{
	:root
	{
		/* KREISE */
			/* Grösse */
		--mdj_Logo: min(calc(0.5 * var(--mdj_CBreite)), 275px);

			/* Position */
		--mdj_LogoLinks: calc(0.1 * var(--mdj_CBreite));
		
		/* WEITERE VARIABLEN */
		--mdj_GrundGroesseSchrift: 1em;
		
	}
	
	#pseudo-circle-top
	{
		height: calc(0.25 * var(--mdj_CBreite));
	}

	#pseudo-circle-bottom
	{
		height: calc(0.25 * var(--mdj_CBreite));
	}
	
	.pseudo-circle.bottom
	{
		top: calc(-2.25 * var(--mdj_CBreite));	
	}
	
	#Haupttext2 #widescreen
	{
		display:block;
	}

	#Haupttext2 #widescreen .preise
	{
		width: 100%;
	}

}

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

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

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

}

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

	:root
	{
		--mdj_CBreite: calc(110vh - var(--mdj_ScrollbarWidth));
	}
	
	#container
	{
		overflow-x: visible;
	}
	
		#bodyForMobiles
	{
		width: calc(100vw - var(--mdj_ScrollbarWidth));
		overflow-x: hidden;
	}

}*/

		/*
		
        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
		
        */