
/* _____ Schriften __________________________________________________ */

tt		{	letter-spacing: -0.4rem;	}


/* _____ Allgemein __________________________________________________ */


html		{	font-size: 100%;
			margin: 1.5625rem;
		}


body		{	
			padding: 0px; 
			height: 100%;	
			font-family: sans-serif;

		}


section		{	box-sizing: border-box;
			width: 100%;


		}

p		{	hyphens: auto;
			-webkit-hyphens: auto;
		}

a		{	color: rgb(245,202,0);
			text-decoration: none;
			underline: none;
		}

a		{	color: rgb(0,0,0);
			text-decoration: none;
			underline: none;
			border-bottom: 1px solid rgb(245,202,0);
			background-color: rgba(245,202,0,0.1);
		}

a.ext::after	{	content: "";
			width: 1rem;
			height: 1rem;
			margin-left: 0.4rem;
			background-image: url("../img/external_link.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
		}

a.ext:hover	{	color: rgb(0,0,0);
			background-color: rgb(245,202,0);
		}

a.ext:hover::after	{	background-image: url("../img/external_link_hover.svg");	}


a.download	{	color: rgb(0,0,0);	}


a.download:hover	{	color: rgb(245,202,0);
			background-color: rgb(0,0,0);
		}




.left		{	text-align: left;	}
.right		{	text-align: right;	}
.center		{	text-align: center;	}
.y		{	color: rgb(245,202,0);
			border: none;
			background-color: transparent;
		}
.red		{	color: rgb(229,53,23);	}

.break::after	{	content: "\A";
			white-space: pre;
		}

#content-teaser	{	width: 0px !important;
			height: 0px !important;
			overflow: hidden;
			text-indent: -2500px;
		}






/* _____ Header __________________________________________________ */

#header		{	height: 9.375rem; 
			margin-bottom: 1.5625rem;
			position: fixed;
			top: 0;
			left: 1.5625rem;
			background-color: rgb(255,255,255);
			width: calc(100% - 3.125rem);
			padding-top: 1.5625rem;
			z-index: 10000;
		}

#header-flex	{	display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

#logo img	{		width: 6.25rem;
			height: 6.25rem;
		}


#name h1	{	line-height: 100%;
			letter-spacing: 1.2px !important;
			padding-left: 2px;
		}



/* _____ Section Aboutme __________________________________________________ */

#aboutme 	{	background-color: rgb(245,202,0);
			padding: 6rem;
			margin-top: 7.8125rem;
		}

#aboutme .wrapper	{	display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			column-gap: 0px;
			/*height: 100%;*/
			width: 100%;
			padding: 0px;
			margin: 0px;
	 	}

#hello		{	flex-grow: 1;
			order: 1;
			box-sizing: border-box;
			width: 50%;
			margin-right: 0px;
			margin-top: 6.9375rem;
		}

#container-right	{	margin-right: 0px;
			margin-left: auto;
			text-align: right;
		}

#inner-container	{	display: inline-block;
			box-sizing: border-box;
			margin-right: 6.25rem;
		}

#hello h2		{	text-align: center;
			font-size: 2.1875rem;
			line-height: 2.1875rem;
			margin: 0px;
			padding: 0px;
		}

#hello h1		{	text-align: center;
			font-size: 4.6875rem;
			line-height: 4.6875rem;
			margin: 1.5625rem 0px 1.25rem 0px;
			padding: 0px;

		}

#hello ul		{	height: 2.8125rem; text-align: center; padding: 0px; margin-top: 3.125rem; text-indent: 0px;}

#hello li		{	display: inline-block;
			list-style-type: none;
			padding-right: 0.75rem;
			padding-left: 0.75rem;
			margin-left: 0px;
		}

#hello li:first-child	{	padding-right: 0.75rem;
			padding-left: 0px;
		}

#hello li:last-child	{	padding-right: 0px;
			padding-left: 0.75rem;
		}

#hello a.sociallink	{	display: inline-block;
			width: 2.8125rem;
			height: 2.8125rem;
			overflow: hidden;
			color: rgba(255,255,255,0);
			font-size: 0.5rem;
			text-indent: -1000px;
		}

.email		{	background-image: url('../img/icon_email.svg'); }
.facebook	{	background-image: url('../img/icon_facebook.svg'); }
.instagram	{	background-image: url('../img/icon_instagram.svg'); }
.twitter		{	background-image: url('../img/icon_twitter.svg'); }
.website		{	background-image: url('../img/icon_website.svg'); }




#avatar		{	flex-grow: 1;
			order: 2;
			box-sizing: border-box;
			width: 50%;
			padding-left: 0.625rem;
		}

#container-left	{	width: 100%;
			max-width: 23.4375rem;
			padding: 0;
			margin: 0;
			border: 0.625rem solid rgb(255,255,255);
			border-radius: 50%;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
		}

#avatar-ak	{	display: block;
			box-sizing: border-box;
			width: 100%;
			height: 0;
			padding-bottom: /*calc(100% - 1.250rem)*/ 100%;
			margin: 0;
			background-image: url("../img/alexander_j_kleinjung_avatar.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: cover;
		}



/* _____ Boxen __________________________________________________ */

.box		{	padding: 4.0625rem 0;	}

.inner-box	{	max-width: 1150px;
			margin-left: auto;
			margin-right: auto;
			padding: 0 1.5625rem;
		}


.flexbox		{	display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			column-gap: 0px;
			height: 100%;
			width: 100%;
			padding: 0px;
			margin: 0px;
	 	}

.flexbox2		{	display: flex;
			flex-direction: row;
			flex-grow:1;
			justify-content: space-between;
			align-items: flex-start;
			column-gap: 3.125rem;
			height: 100%;
			width: 100%;
			padding: 0px;
			margin: 0px;
	 	}

.row1		{	flex-shrink: 0;
			width: 350px !important;
		}

.teaserbox	{	width: calc(50% - 1.5625rem);
			flex-shrink: 0;
		}

.teaserbild	{	padding-bottom: 66%;
			background-size: cover;
			background-repeat: no-repeat;
			margin-bottom: 1.5625rem !important;	/* ggf. für Mobil anpassen */
		}

.andre		{	background-image: url('../img/andre_papp_kleinjung.jpg');	}
.moritz		{	background-image: url('../img/stolperstein_moritz_leibsohn.jpg');	}
.ns_gedenken	{	background-image: url('../img/kerze_wir_vergessen_euch_nicht.jpg');	}
.cfl		{	background-image: url('../img/cities_for_life.jpg');	}



/* _____ Weitere Sections __________________________________________________ */
	
#profession	{		}

#passion		{	background-color: rgb(253,243,163);	}

#milestones	{		}


.rbg		{	float:right;
			height: 12.5rem;
			width: 12.5rem;
			margin: 0rem -5rem 1rem 1rem;
			background-image: url("../img/ruth_bader_ginsburg.png");
			background-position: center center;
			background-size: calc(100% - 0.8rem);
			background-repeat: no-repeat;
			border-radius: 50%;
			border: 0.1875rem dotted rgb(240,201,0);
			shape-outside: circle(50%);
}


#opinions		{	background-color: rgb(238,238,238);	margin-bottom: 25px;	}

#memberships	{		}



.m-items		{	width: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			gap: 0;
		}

.m-item-box1	{	box-sizing: border-box;
			width: 17%;
			margin-bottom: 2.166666666%;
			overflow: hidden;
		}

.m-item-box2	{	box-sizing: border-box;
			width: 25.5%;
			margin-bottom: 2.166666666%;
			overflow: hidden;
		}

.m-last-item		{	margin-right: 8.333333334%;	}

.m-items p	{	font-family: 'Fira Sans', sans-serif;
			font-weight: 400;
			font-size: 0.8rem;
			line-height: 1rem;
			text-align: left !important;
			hyphens: none;
			-webkit-hyphens: none;
			color: rgb(100,100,100);
			margin: 0.6rem 0 0 0 !important;
			display: none;
		}

.m-single-item1	{	box-sizing: border-box;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: cover;
			padding-bottom: 100%;
			border: 1px solid rgb(200,200,200);
		}

.m-single-item2	{	box-sizing: border-box;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: cover;
			padding-bottom: 66.66667%;
			border: 1px solid rgb(200,200,200);
		}

.american-civil-liberties-union		{	background-image: url("../img/logos/logo_american_civil_liberties_union.svg");	}
.amnesty-international		{	background-image: url("../img/logos/logo_amnesty_international.svg");	}
.cargo-human-care			{	background-image: url("../img/logos/logo_cargo_human_care.svg");	}
.deutsche-knochenmarkspenderdatei	{	background-image: url("../img/logos/logo_deutsche_knochenmarkspenderdatei.svg");	}
.drk-blutspendedienst		{	background-image: url("../img/logos/logo_deutsches_rotes_kreuz_blutspendedienst.svg");	}
.eintracht-frankfurt			{	background-image: url("../img/logos/logo_eintracht_frankfurt.svg");			}
.fv-fritz-bauer-institut		{	background-image: url("../img/logos/logo_foerderverein_fritz_bauer_institut.svg");	}
.frankfurter-domkonzerte		{	background-image: url("../img/logos/logo_frankfurter_domkonzerte.svg");	}
.gesellschaft-f-freiheitsrechte		{	background-image: url("../img/logos/logo_gesellschaft_fuer_freiheitsrechte.svg");	}
.katholische-kirche			{	background-image: url("../img/logos/logo_katholische_kirche_bistum_limburg.svg");	}
.pulse-of-europe			{	background-image: url("../img/logos/logo_pulse_of_europe.svg");			}
.spd				{	background-image: url("../img/logos/logo_sozialdemokratische_partei_deutschlands.svg");	}


.last-item		{	padding-right: 15%;	}


#charity		{		}

#charity p	{	margin-bottom: 40px;	}


.charity-items	{	width: 100%;
			overflow: hidden;
			display: flex;
			flex-wrap: wrap;
			flex-direction: row;
			justify-content: space-between;
			gap: 0;
		}

.carity-item-box	{	box-sizing: border-box;
			width: 23%;
			margin-bottom: 2%;
			overflow: hidden;
		}

.carity-item-box p	{	font-family: 'Fira Sans', sans-serif;
			font-weight: 400;
			font-size: 0.8rem;
			line-height: 1rem;
			text-align: left !important;
			hyphens: none;
			-webkit-hyphens: none;
			color: rgb(100,100,100);
			margin: 0.6rem 0 0 0 !important;
		}

.carity-single-item	{	box-sizing: border-box;
			background-repeat: no-repeat;
			background-position: left top;
			background-size: cover;
			padding-bottom: 66.66667%;
			border: 1px solid rgb(200,200,200);
		}


.adveniat				{	background-image: url("../img/logos/charity/logo_bischoefliche_aktion_adveniat.svg");	}
.aerzte-ohne-grenzen		{	background-image: url("../img/logos/charity/logo_aerzte-ohne-grenzen.svg");		}
.baerenherz			{	background-image: url("../img/logos/charity/logo_baerenherz_stiftung.svg");		}
.brot-fuer-die-welt			{	background-image: url("../img/logos/charity/logo_brot_fuer_die_welt.svg");		}
.christoffel-blindenmission		{	background-image: url("../img/logos/charity/logo_christoffel_blindenmission.svg");	}
.deutsche-aidshilfe			{	background-image: url("../img/logos/charity/logo_deutsche_aidshilfe.svg");		}
.deutsche-hirntumorhilfe		{	background-image: url("../img/logos/charity/logo_deutsche_hirntumorhilfe.svg");	}
.deutsche-krebsgesellschaft		{	background-image: url("../img/logos/charity/logo_deutsche_krebsgesellschaft.svg");	}
.deutsche-krebshilfe		{	background-image: url("../img/logos/charity/logo_deutsche_krebshilfe.svg");		}
.diakonie-frankfurt-offenbach		{	background-image: url("../img/logos/charity/logo_diakonie_frankfurt_offenbach.svg");	}
.kinderbuero-ffm			{	background-image: url("../img/logos/charity/logo_frankfurter_kinderbuero.svg");	}
.frankfurter-tafel			{	background-image: url("../img/logos/charity/logo_frankfurter_tafel.svg");		}
.franziskustreff			{	background-image: url("../img/logos/charity/logo_franziskustreff_stiftung.svg");	}
.eisenbahnfreunde			{	background-image: url("../img/logos/charity/logo_gehoerlose_eisenbahnfreunde_hunsrueck.png");	}
.krebskranke-kinder		{	background-image: url("../img/logos/charity/logo_hilfe_fuer_krebskranke_kinder_frankfurt.svg");	}
.lukas14				{	background-image: url("../img/logos/charity/logo_lukas_14.png");			}
.malteser-hilfsdienst		{	background-image: url("../img/logos/charity/logo_malteser_hilfsdienst.svg");		}
.margit-horvath-stiftung		{	background-image: url("../img/logos/charity/logo_margit_horvath_stiftung.png");	}
.maximilian-kolbe-werk		{	background-image: url("../img/logos/charity/logo_maximilian_kolbe_werk.png");		}
.misereor				{	background-image: url("../img/logos/charity/logo_bischoefliches_hilfswerk_misereor.svg");	}
.oeziv-vorarlberg			{	background-image: url("../img/logos/charity/logo_oeziv_vorarlberg.svg");		}
.renovabis			{	background-image: url("../img/logos/charity/logo_renovabis.svg");			}
.sos-kinderdorf			{	background-image: url("../img/logos/charity/logo_sos_kinderdorf.svg");		}
.sos-kinderdoerfer-weltweit		{	background-image: url("../img/logos/charity/logo_sos_kinderdoerfer_weltweit.svg");	}
.save-the-children			{	background-image: url("../img/logos/charity/logo_save_the_children.svg");		}
.unicef				{	background-image: url("../img/logos/charity/logo_deutsches_komitee_fuer_unicef.svg");		}
.kinderschutzambulanz		{	background-image: url("../img/logos/charity/logo_uniklinik_frankfurt_kinderschutzambulanz.svg");	}
.uno-fluechtlingshilfe		{	background-image: url("../img/logos/charity/logo_uno_fluechtlingshilfe.svg");		}
.yehudi-menuhin-live-music-now	{	background-image: url("../img/logos/charity/logo_yehudi_menuhin_live_music_now.svg");		}
	

#inmemoriam	{	background-color: rgb(60,60,60);	}

#projects		{	background-color: rgb(245,202,0);	}










h1, h2, h3, p	{	color: rgb(0,0,0); 	}

h1		{	line-height: 100%;
			margin: 0px;
			padding: 30px;
			font-family: 'Fira Sans', sans-serif;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 0.5px;
		}

h2		{	font-family: 'EB Garamond', serif;
			font-weight: 600;
			font-style:italic;
		}

h3		{	font-family: 'Fira Sans', sans-serif;
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 2px;
			font-size: 1.5625rem;
			line-height: 1.5625rem;
			margin: 0px;
			padding: 0.375rem 0 0 0;
		}

p		{	font-family: 'EB Garamond', serif;
			font-weight: 400;
			font-style: normal;
			font-size: 1.375rem;
			line-height: 2.0625rem;
			margin: 0px 0px 22px 0px;
			text-align: justify;			
		}

p:last-child	{	margin-bottom: 0px;	}

.docs p		{	text-align: left;	}

#opinions h3,
#inmemoriam h3,
#projects h3	{	font-family: 'EB Garamond', serif;
			font-weight: 600;
			text-transform: none;
			font-style: italic;
			letter-spacing: 0px !important;
			font-size: 2.25rem;
			line-height: 2.25rem;
			color: rgb(0,0,0);
			text-align: center;
			margin: 0px 0px 40px 0px;
		}


span.highlight	{	box-shadow: inset 0px -.8rem 0px -0.25rem rgb(245,202,0);
			padding: 0 2rem 0.25rem 2rem;
			margin-bottom: 1.25rem;
		}

#opinions p,
#inmemoriam p,
.copyright	{	font-family: 'Fira Sans', sans-serif;
			font-weight: 400;
			font-size: 1.1875rem;
			line-height: 1.75rem;
			margin: 0px;
			padding: 0px;
		}

#inmemoriam h3	{	color: rgb(255,255,255);
			text-shadow: 1px 1px 2px rgb(25,25,25);
		}

#inmemoriam p	{	color: rgb(255,255,255);
			margin-top: 25px;
		}

.docs		{	
			padding: 0;
		}

.docs li		{	list-style-type: none;	}

.docs li p		{	padding-left: 1.5rem;
			text-indent: -1.5rem;
		}

.docs li p::before	{	content: "";
			width: 1rem;
			height: 1rem;
			margin-right: 0.5rem;
			background-image: url("../img/download.svg");
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
		}



.copyright	{	padding: 50px 0px 50px; 0px;
			font-size: 1rem;
			color: rgb(120,105,97);
		}





/* _____ Carousel __________________________________________________ */

.divider					{	position: relative;	}

.divider hr				{	width: 23rem;
						height: 0.125rem;
						margin:2.5rem auto 0 auto;
						background-color: rgb(100,100,100);
						border: none;
						opacity: 1;
					}

.divider div				{	position: absolute;
						height: 2.1875rem;
						top: -2.1875rem;
						width: 100%;
						text-align: center;
					}

.divider span				{	background-color: rgb(238,238,238);
						padding: 0 1rem;
						font-family: 'EB Garamond', serif;
						font-weight: 600;
						font-size: 4.375rem;
					}





#myCarousel				{	margin: 0 0 1rem 0;	}

.carousel-indicators			{	height: 0;
						margin: 0;
						padding: 0;
					}


.carousel-indicators button[type=button]	{	background-color: rgba(100,100,100,0.5);
						margin: 0px 10px;
						opacity: 1;
						width: 0.75rem;
						height: 0.75rem;
						border-radius: 50%;
						aspect-ratio: 1;
					}

.carousel-indicators .active			{	background-color: rgb(245,202,0) !important;
						height: 0.75rem !important;
						width: 0.75rem !important;
					}

.carousel-item 				{
						width: 100%;
						min-height: 17.1875rem;
					}

.carousel-caption 				{
						left: 0;
						right: 0;
						width: 100%;
						margin: 0;
						padding: 0;
						z-index: 10;
					}
.carousel-caption h1,
.carousel-caption p				{	font-family: 'EB Garamond', serif !important;
						font-style: normal;
						text-transform: none;
						text-align: center;
					}

.carousel-caption h1			{	font-weight: 500;
						line-height: 133%;	}


.carousel-caption p				{	font-weight: 400;
						font-style: italic;
						line-height: 100%;
						margin-bottom: 1.5625rem !important;
					}

.quote					{	height: 12.5rem;
						display: flex;
						justify-content: center;
						align-items: center;
					}




/* _____ Mobile Devices __________________________________________________ */



@media only screen

	and (max-device-width: 767px), (max-width: 767px) {

	html		{		}

	#header		{	box-sizing: border-box;
				position: fixed;
				width: 100%;
				height: 6.71875rem;
				margin-left: -1.5625rem;
				margin-right: -1.5625rem;
				padding: 0.78125rem 1.5625rem 1.5625rem 1.5625rem;
				background-color: rgb(255,255,255);
				z-index: 10000;
			}

	#logo img		{	width: 4.375rem;
				height: 4.375rem;
			}

	#name h1	{	font-size: 1.5625rem;		}


	#aboutme		{	margin-top: 5.9375rem;
				padding: 4rem 4rem 3rem 4rem;
			}
	#aboutme .wrapper	{	display: block;	}

	#hello		{	width: 100%; margin-top: 0px; 	}

	#avatar		{	width: 100%; }
	#container-left	{	margin: 0 auto; text-align: center;	}
	

	#container-right	{	margin: 0px; text-align: center ;	}
	.location		{	display: inline-block;
				line-height: 2.1875rem !important;
			}
	#inner-container	{	margin: 40px auto 0px auto; }


	section		{		}

	#passion,
	#opinions,
	#inmemoriam,
	#projects		{	width: calc(100% + 3.125rem);
				padding: 4rem 1.5rem;	
				margin-left: -1.5625rem;
				margin-right: -1.5625rem;	
			}

	.box		{	margin: 4rem 0rem;
				padding: 0;	
			}

	.flexbox		{	display: block;  	}

	.flexbox2		{	display: block;  	}

	.row1		{	max-width: 250px;	}

	.teaserbox	{	width: 100%;	}

	.box-before	{	margin-top: 3rem;	}

	.teaserbild	{	padding-bottom: 58%;
				background-position: center center;
			}

	h3		{	margin-bottom: 1.5rem;	}

	span.highlight	{	box-shadow: inset 0px -.7rem 0px -0.25rem rgb(245,202,0);
				padding: 0;
				margin-bottom: 1.25rem;
			}

	#memberships h3	{	margin-bottom: 2.5rem;	}
	#inmemoriam h3	{	margin-bottom: 2rem;	}

	.second-line	{	display: inline-block;
				line-height: 133% !important;
			}

	p.left, p.right,
	#opinions .center	{	text-align: justify;	}

	.carousel-item 	{	min-height: 18.75rem;	}



	.carity-item-box	{	width: 31%;
				margin-bottom: 3%;
			}

	.carity-item-box p	{	display: none;	}


	.break::after	{	content: "";
				white-space: pre;
			}

	#projects		{	margin-bottom: 1.5rem;	}

	.copyright	{	padding: 0 0 1.5rem 0;	}

	.rbg		{	margin: -2.25rem -2.25rem 0.5rem 1.75rem !important;	}


}

@media only screen

	and (max-width: 1275px) {

	.rbg		{	margin: 0.5rem 0 1rem 1.5rem;
				height: 10rem;
				width: 10rem;
			}

}

@media only screen

	and (max-width: 1100px) {

	.carity-item-box	{	width: 32%;		}
	.carity-item-box p	{	font-size: 0.7rem;		}

}




@media only screen

	and (orientation: portrait) {




}

