/*ohne clip-path/shape-outside*/

/*s. min(), max) css zur kombinierten angabe von min-height und height bzw. width
z.b width: min(500px, 60%) je nach situation, wird das die min. breite aus beiden verwendet.
*/

.altern-karte {
	container-type: inline-size;
	border-color: var(--bs-border-color-translucent);
	border-width: var(--bs-border-width);
	border-style: solid;
	transition: box-shadow 0.5s ease, width 0.5s ease;
	margin-bottom: 2rem;
}



.altern-karte.bild-rechts {
	 flex-direction: row-reverse;
}


@media (max-width: 992px) {
	.altern-karte.bild-rechts,
	.altern-karte {
		flex-direction: column;
	}
	
	.altern-karte.bild-rechts .bild,
	.bild {
		align-self: center !important;
	}
}


.altern-karte:hover{
	box-shadow: 0 4px 8px rgba(0,0,0,0.25),0 2px 2px rgba(0,0,0,0.22);
	z-index: 101;
	transition: box-shadow 0.5s ease, width 0.5s ease;
	
	
}

/*
@container (max-width 991px) {
	.bild {
		flex-basis: 60%;	
		min-width: 60%;
	}
}	
*/	


@media (min-width: 992px) {
	.altern-karte.bild-rechts .bild, 
	.bild {
		position: relative;
		flex-basis: 40%;	
		min-width: 40%;
		flex-grow: 0;
		flex-shrink: 0;
		overflow: hidden;

	}	


	.altern-karte:hover .bild::after,
	.altern-karte.bild-rechts:hover .bild::after 	{
		transform: rotate(0deg);
		transition: transform 0.5s ease-in-out;
	}
/* bildkante rechst abschrägen durch überlagertes und gedrehtes rechteck*/
	.bild::after {
		position: absolute;
		content: "";
		width: 75px;
		height: 110%;
		background-color: white;
		top: -5%;
		bottom: 5%;
		right: -15px ;
		transform: rotate(3deg);
		transition: transform 0.5s ease-in-out;
	}


	.altern-karte.bild-rechts .bild::after {
		position: absolute;
		content: "";
		width: 75px;
		height: 110%;
		background-color: white;
		top: -5%;
		bottom: 5%;
		left: -15px ;
		transform: rotate(3deg);
		transition: transform 0.5s ease-in-out;
	}

}

.header-wrapper {
	position: relative;
	margin-bottom: 3rem;
}

.header-wrapper::after {
	content:"";
	position: absolute;
	background-color: #f8f9fa;
	background-color: yellow;
	clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
	height: 140%;
	width: calc(100% + 4rem);
	margin-top: -0.5rem;
	margin-left: -2rem;
	padding-bottom:3rem;
	margin-bottom: 3rem;
	top:0;
	z-index:-1;
}

.text {
	padding-top : 0.5rem;
	padding-left: 2rem;
	padding-right: 2rem;
	text-align: justify;
	  position: relative;
	
	
	

}
/*.ueberschrift  aus eigem, allgem. headerfeld*/
.text  .ueberschrift {
	color: orange !important;
	font-size:  2rem !important;
	font-variant: small-caps;
}

.text .bodytext {

	/*zw. 960 u. 1200*/
	/*font-size: clamp(0.75rem, -1rem + 3.3333vw, 1.5rem) !important;*/
}

/*clamp (min, bevorzugter wert, max)
bevorz. wert ist sozus. der default wert via online-ckamp-calculator oder css-tricks zur berechnung
https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/
bem.: 1rem bei fast allen browsern 16px u. bei bs u.a. --bs-body-font-size = 1rem 

*/


/* -webkit-line-clamp fkt. zwar, hat aber ziemliche einschränkungen, daher nur im notfall verwenden*/
/*
.text .bodytext {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 8;
	overflow: hidden;
}
*/


/*
.footerzeug { 
position:relative;
}

.footerzeug::after { 
content:"";
position:absolute;
top:-60%;
left:0;
height: 160%;
margin-bottom: 10%;
width: 100%;
clip-path: polygon(0 0, 100% 46%, 100% 100%, 0% 100%);
background-color: beige;
z-index: -1;

}
*/