/* =========================================================
   BUSINESS CARD MODULE
   ========================================================= */

.business-card-module {
	position: relative;
	width: 100%;
}


/* =========================================================
   ZWEISPALTIGER AUFBAU
   ========================================================= */

.business-card-module__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

	gap: 4rem;

	align-items: center;

	width: 100%;
}


/* =========================================================
   LINKER TEXTBEREICH
   ========================================================= */

.business-card-module__content {
	min-width: 0;
}


.business-card-module__headline {
	margin: 0 0 1.5rem;
}


.business-card-module__text {
	width: 100%;

	font-size: 1.1rem;
	line-height: 1.7;
}


.business-card-module__text > :first-child {
	margin-top: 0;
}


.business-card-module__text > :last-child {
	margin-bottom: 0;
}


/* =========================================================
   RECHTER KARTENBEREICH
   ========================================================= */

.business-card-module__card-area {
	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 0;

	padding: 2rem 1rem;

	perspective: 1200px;
}


/* =========================================================
   VISITENKARTE
   ========================================================= */

.business-card {
	position: relative;

	display: grid;
	grid-template-columns: 47% 53%;

	align-items: center;

	width: 100%;
	max-width: 620px;
	min-height: 310px;

	overflow: hidden;

	border-radius: 3px;

	background-color: #ffffff;
	color: var(--font-color);

	box-shadow:
		0 18px 35px rgba(0, 0, 0, 0.18),
		0 5px 12px rgba(0, 0, 0, 0.10);

	transform-origin: center center;
	transform-style: preserve-3d;

	animation: business-card-turn 6s ease-in-out infinite;

	will-change: transform;
}


/* =========================================================
   DAUERHAFTE LINKS-/RECHTS-DREHUNG
   ========================================================= */

@keyframes business-card-turn {

	0% {
		transform:
			rotateY(-5deg)
			translateX(-3px);
	}

	25% {
		transform:
			rotateY(-2deg)
			translateX(-1px);
	}

	50% {
		transform:
			rotateY(5deg)
			translateX(3px);
	}

	75% {
		transform:
			rotateY(2deg)
			translateX(1px);
	}

	100% {
		transform:
			rotateY(-5deg)
			translateX(-3px);
	}

}


/* =========================================================
   BILD
   ========================================================= */

.business-card__media {
	position: relative;

	align-self: center;

	min-width: 0;
	min-height: 0;

	margin:
		0
		0
		0
		2rem;

	overflow: hidden;

	border-radius: 8px;

	background-color: rgba(255, 255, 255, 0.25);
}


.business-card__image {
	display: block;

	width: 100%;
	height: auto;

	object-fit: contain;
}


/* =========================================================
   KARTEN-TEXT
   ========================================================= */

.business-card__content {
	position: relative;

	z-index: 2;

	display: flex;
	align-items: center;

	align-self: center;

	min-width: 0;

	padding: 0 2rem;

	box-sizing: border-box;
}


.business-card__text {
	width: 100%;

	color: inherit;

	font-size: 0.85rem;
	line-height: 1.45;
}


.business-card__text > :first-child {
	margin-top: 0;
}


.business-card__text > :last-child {
	margin-bottom: 0;
}


.business-card__text p {
	margin: 0.5rem 0;
}


.business-card__text h1,
.business-card__text h2,
.business-card__text h3,
.business-card__text h4,
.business-card__text h5,
.business-card__text h6,
.business-card__text p,
.business-card__text li,
.business-card__text a,
.business-card__text strong,
.business-card__text em,
.business-card__text span {
	color: inherit;
}


/* =========================================================
   DEKORATIVE ECKE
   ========================================================= */

.business-card::after {
	content: "";

	position: absolute;

	top: 0;
	right: 0;

	z-index: 3;

	width: 58px;
	height: 58px;

	background-color: var(--logo-color-1);

	border-radius: 0 0 0 100%;
}


/* =========================================================
   FARBEN
   ========================================================= */

.business-card--white {
	background-color: #ffffff;
	color: var(--font-color-dark, #222222);
}


.business-card--logo-color-1 {
	background-color: var(--logo-color-1);
	color: #ffffff;
}


.business-card--logo-color-1-light {
	background-color: var(--logo-color-1-light);
	color: #ffffff;
}


.business-card--logo-color-1-dark {
	background-color: var(--logo-color-1-dark);
	color: #ffffff;
}


.business-card--logo-color-2 {
	background-color: var(--logo-color-2);
	color: #ffffff;
}


.business-card--neutral-color-light {
	background-color: var(--neutral-color-light);
	color: var(--font-color-dark, #222222);
}


.business-card--neutral-color-dark {
	background-color: var(--neutral-color-dark);
	color: #ffffff;
}


/* =========================================================
   AI OVERLAY
   ========================================================= */

.business-card .ai-generated-overlay {
	z-index: 5;

	transform: scale(0.68);
	transform-origin: top left;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

	.business-card-module__inner {
		gap: 2.5rem;
	}


	.business-card {
		grid-template-columns: 44% 56%;
	}


	.business-card__media {
		margin-left: 1.25rem;
	}


	.business-card__content {
		padding: 0 1.5rem;
	}

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 750px) {

	.business-card-module__inner {
		grid-template-columns: 1fr;

		gap: 2.5rem;
	}


	.business-card-module__card-area {
		padding: 1rem;
	}


	.business-card {
		width: min(100%, 620px);
	}


	.business-card-module__text {
		font-size: 1rem;
	}

}


@media (max-width: 500px) {

	.business-card {
		grid-template-columns: 1fr;

		min-height: 0;
	}


	.business-card__media {
		margin:
			1.25rem
			1.25rem
			0;
	}


	.business-card__content {
		padding: 1.5rem;
	}


	.business-card::after {
		width: 50px;
		height: 50px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.business-card {
		animation: none;

		transform: none;
	}

}