.faecher {
	position: relative;
	width: 230px;
	height: 160px;
	margin: 0 auto 28px;
}
.fan-card {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 90px;
	height: 135px;
	margin-left: -45px;
	border-radius: 12px;
	background: linear-gradient(135deg, #3b2465, #d9b96e);
	border: 2px solid rgba(255,255,255,0.45);
	box-shadow: 0 14px 35px rgba(0,0,0,0.55);
	transform-origin: bottom center;
}
.f1 {
	transform: rotate(-34deg) translateX(-38px);
}
.f2 {
	transform: rotate(-17deg) translateX(-18px);
}
.f3 {
	transform: rotate(0deg);
	z-index: 3;
}
.f4 {
	transform: rotate(17deg) translateX(18px);
}
.f5 {
	transform: rotate(34deg) translateX(38px);
}
.faecher-aktiv .fan-card {
	animation: faecherPulse 1.4s infinite alternate;
}
 @keyframes faecherPulse {
 from {
 filter: brightness(1);
 box-shadow: 0 14px 35px rgba(0,0,0,0.55);
}
to {
	filter: brightness(1.25);
	box-shadow: 0 18px 45px rgba(243,210,122,0.55);
}
}
.kartenplatz {
	opacity: 0;
	transform: rotateY(90deg) scale(0.85);
	animation: aufdecken 0.9s ease forwards;
}
.position-0 {
	animation-delay: 0.5s;
}
.position-1 {
	animation-delay: 1s;
}
.position-2 {
	animation-delay: 1.5s;
}
.position-3 {
	animation-delay: 2s;
}
.karte {
	width: var(--karten-breite);
	max-width: 100%;
	height: auto;
	border-radius: var(--karten-radius);
	box-shadow: 0 14px 34px rgba(0,0,0,0.5);
}
.kartenname {
	margin-top: 10px;
	font-weight: bold;
}
 @keyframes aufdecken {
 from {
 opacity: 0;
 transform: rotateY(90deg) scale(0.85);
}
to {
	opacity: 1;
	transform: rotateY(0deg) scale(1);
}
}
.positiong-0 {
	animation-delay: 0.0s;
}
.positiong-1 {
	animation-delay: 0.1s;
}
.positiong-2 {
	animation-delay: 0.2s;
}
.positiong-3 {
	animation-delay: 0.3s;
}
.positiong-4 {
	animation-delay: 0.4s;
}
.positiong-5 {
	animation-delay: 0.5s;
}
.positiong-6 {
	animation-delay: 0.6s;
}
.positiong-7 {
	animation-delay: 0.7s;
}
.positiong-8 {
	animation-delay: 0.8s;
}
.positiong-9 {
	animation-delay: 0.9s;
}
.positiong-10 {
	animation-delay: 1.0s;
}
.positiong-11 {
	animation-delay: 1.1s;
}
.positiong-12 {
	animation-delay: 1.2s;
}
.positiong-13 {
	animation-delay: 1.3s;
}
.positiong-14 {
	animation-delay: 1.4s;
}
.positiong-15 {
	animation-delay: 1.5s;
}
.positiong-16 {
	animation-delay: 1.6s;
}
.positiong-17 {
	animation-delay: 1.7s;
}
.positiong-18 {
	animation-delay: 1.8s;
}
.positiong-19 {
	animation-delay: 1.9s;
}
.positiong-20 {
	animation-delay: 2s;
}
.positiong-21 {
	animation-delay: 2.1s;
}
.positiong-22 {
	animation-delay: 2.2s;
}
.noshow {
	visibility : hidden;
}
.container {
	width: 100%;
	display: flex;         /* Aktiviert Flexbox */
	flex-direction: row;   /* Erzwingt eine horizontale Reihe */
	justify-content: space-between; /* Verteilt die Boxen gleichmäßig */
}
.box3 {
	/* Entferne float: left; */
	flex: 0 0 31.33%;      /* Lässt die Box genau 31.33% breit sein, kein Schrumpfen/Wachsen */
	margin: 1%;
	box-sizing: border-box;
	padding: 10px;
	background: color-mix(in srgb, var(--farbemittel), white 90%);
	border: 1px dotted var(--farbemittel);
	min-height: 50px;      /* Optional: Damit leere Boxen nicht kollabieren */
	font-weight: bold;
}
/* Der Clearfix wird bei Flexbox nicht mehr benötigt */
.container::after {
	display: none;
}
@media (max-width: 480px) {
.box3 {
	padding: 1px; /* Weniger Padding schafft Platz für die Karte */
	font-size: 0.8rem; /* Kleinere Schrift */
}
}
@media only screen and (min-width: 769px) {
.box .limg {
	width: 20%;
}

}
