:root {
	--inactiveBG-color: #fff8ea;
	--activeBG-color: white;
	--link-color: rgb(255, 60, 0);
	--visitedLink-color: rgb(180, 106, 84);
	--tabWith: 100px;
	--tabBorderColor: rgb(146, 166, 185);
	--paddingTiny: 7px;
	--paddingNorm: 15px;
	--paddingBig: 20px;
	--darkColor: #333;
}

html,
body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}

.content {
	max-width: 100%;
}

.bigImg {
	display: block;
	width: 100%;
	max-width: 100%;
}

.menue {
	border: 1px solid grey;
	padding: 0px 15px 20px 15px;
	margin: 10px;
	max-width: 400px;
	min-width: 150px;
	background-color: rgb(255, 255, 255);
}

/* Blog Layout ___________________________*/

.blogContainer {
	display: flex;
	align-items: flex-start;
	padding: 0;
	margin: 0;

	margin-bottom: var(--paddingNorm);
	border-bottom: 1px solid var(--tabBorderColor);
}

.blogInnerDiv {
	width: 100%;
	text-align: left;
	flex: 1; /* Allows text to take up remaining space */
	word-wrap: break-word;
	padding: 0;
	margin: 0;
}

.trainerImg {
	width: 350px;
	height: 455px;
	max-width: 100%; /* Ensures it never overflows */
	padding-left: 0;
	padding-top: var(--paddingTiny);
	padding-right: var(--paddingBig);
	padding-bottom: var(--paddingNorm);
	margin: 0;
}

@media (max-width: 700px) {
	.blogContainer {
		flex-direction: column;
		align-items: flex-start;
	}

	.trainerImg {
		padding: 0;
		padding-top: var(--paddingBig);
	}

	img {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Blog Layout Ende___________________________*/



/*Typografie_______________________________*/

@font-face {
	font-family: 'Roboto Light';
	src: url('../fonts/roboto/RobotoLight.woff') format('woff2'),
		url('../fonts/roboto/RobotoLight.woff') format('woff');
}

@font-face {
	font-family: 'Roboto Slab';
	src: url('../fonts/robotoSlab/RobotoSlab-Medium.woff2') format('woff2'),
		url('../fonts/robotoSlab/RobotoSlab-Medium.woff') format('woff');
}

ul,
li,
a,
td,
th,
p {
	font-family: 'Roboto Light';
	color: var(--darkColor);
	line-height: 1.6;
}

td {
	border:1px solid var(--tabBorderColor);
	padding-left: var(--paddingBig);
	padding-right: var(--paddingBig);
	padding-top: 0;
	padding-bottom: 0;
	text-align: left;
}

p {
	text-align: justify;
	word-wrap: break-word;
}

a {
	color: var(--link-color);
	text-decoration: none;
}

a:visited {
	color: var(--visitedLink-color);
}

li {
	list-style: none;
	
}

hr {
	border-top: 1px solid var(--tabBorderColor);
	border-bottom: none;
}

h1 {
	font-family: 'Roboto Slab';
	font-weight: 600;
	color: var(--darkColor);
}

h2,
h3,
h4 {
	font-family: 'Roboto Slab';
	font-weight: 400;
	color: var(--darkColor);
}

.lead {
	font-size: larger;
	font-family: 'Roboto Regular';
	text-align: left;
}

ul {
	list-style-type: none;
	line-height: 1.4;
	margin: 0;
	padding: 0;
}

/* Gallery____________________________________________________*/

.galleryDiv {
	display: flex;
	align-items: center;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--paddingNorm); /* Adds space between items */	
}

.galleryDiv div {
	/* flex [grow ][shrink][basis]*/
	flex: 1 1 auto;
	height: 250px;
	border: 1px solid var(--tabBorderColor);
}

.galleryPic {	
	height: 250px;
	width: 100%;
	
	object-fit: cover; /* Ensures the image covers the space */
    object-position: center; /* Crops the image evenly on left and right */
}