/**
 * VisitME – Frontend-Styles für die Visitenkarte.
 * Farben und Schriften kommen als CSS-Custom-Properties aus den Einstellungen.
 */

.visitme-card,
.visitme-team,
.visitme-card * {
	box-sizing: border-box;
}

/* Eigenständige Seite (ohne Theme-Header/-Footer) */
body.visitme-standalone {
	margin: 0;
	padding: 0;
	background: var(--visitme-bg, #faf8f4);
	font-family: var(--visitme-font-body, Georgia, serif);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.visitme-topbar {
	background: var(--visitme-primary, #1a2b4a);
	padding: 16px 24px;
	text-align: center;
}

.visitme-topbar__home {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 0;
}

.visitme-topbar__logo {
	max-height: 44px;
	width: auto;
}

.visitme-topbar__name {
	color: #fff;
	font-family: var(--visitme-font-heading, serif);
	font-size: 22px;
	letter-spacing: .04em;
	line-height: 1.2;
}

.visitme-sitefooter {
	margin-top: auto;
	background: var(--visitme-primary, #1a2b4a);
	color: rgba(255, 255, 255, .85);
	padding: 22px 24px;
	text-align: center;
}

.visitme-sitefooter__list {
	list-style: none;
	margin: 0 0 8px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: center;
}

.visitme-sitefooter__list a {
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	opacity: .9;
}

.visitme-sitefooter__list a:hover {
	opacity: 1;
	text-decoration: underline;
}

.visitme-sitefooter__note {
	margin: 6px 0 0;
	font-size: 13px;
	color: rgba(255, 255, 255, .6);
}

/* Bühne / Hintergrund */
.visitme-main.visitme-main {
	background:
		radial-gradient(120% 80% at 50% -10%, color-mix(in srgb, var(--visitme-primary) 12%, transparent) 0%, transparent 60%),
		var(--visitme-bg, #faf8f4);
	min-height: 70vh;
	padding: clamp(24px, 6vw, 80px) 16px;
}

.visitme-stage {
	max-width: 520px;
	margin: 0 auto;
}

/* Karte */
.visitme-card {
	position: relative;
	background: #fff;
	color: var(--visitme-text, #242018);
	border-radius: 22px;
	padding: clamp(24px, 5vw, 44px);
	box-shadow:
		0 1px 2px rgba(20, 20, 20, .04),
		0 24px 60px -24px color-mix(in srgb, var(--visitme-primary) 45%, transparent);
	font-family: var(--visitme-font-body, Georgia, serif);
	font-size: 17px;
	line-height: 1.6;
	overflow: hidden;
}

.visitme-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--visitme-primary), var(--visitme-accent));
}

/* Kopf */
.visitme-card__header {
	text-align: center;
	margin-bottom: 24px;
}

.visitme-card__brand {
	margin-bottom: 22px;
}

.visitme-card__logo {
	max-height: 46px;
	width: auto;
	margin: 0 auto;
	display: inline-block;
}

.visitme-card__photo {
	width: 148px;
	height: 148px;
	margin: 6px auto 20px;
	border-radius: 50%;
	overflow: hidden;
	padding: 5px;
	background: linear-gradient(135deg, var(--visitme-primary), var(--visitme-accent));
	box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--visitme-primary) 60%, transparent);
}

.visitme-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background: #fff;
}

.visitme-card__name {
	font-family: var(--visitme-font-heading, Georgia, serif);
	font-weight: 600;
	font-size: clamp(28px, 6vw, 38px);
	line-height: 1.1;
	letter-spacing: .01em;
	margin: 0 0 4px;
	color: var(--visitme-primary);
}

.visitme-card__position {
	font-size: 18px;
	font-style: italic;
	margin: 0 0 2px;
	color: color-mix(in srgb, var(--visitme-text) 82%, transparent);
}

.visitme-card__company {
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 8px 0 0;
	color: var(--visitme-accent);
}

/* Kontakt-Aktionen */
.visitme-card__actions {
	display: grid;
	gap: 10px;
	margin: 26px 0;
}

.visitme-action {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 18px;
	border-radius: 14px;
	border: 1px solid color-mix(in srgb, var(--visitme-primary) 14%, transparent);
	background: color-mix(in srgb, var(--visitme-primary) 4%, #fff);
	color: var(--visitme-text);
	text-decoration: none;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.visitme-action:hover,
.visitme-action:focus-visible {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--visitme-primary) 8%, #fff);
	box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--visitme-primary) 70%, transparent);
}

.visitme-action--is-primary {
	background: linear-gradient(135deg, var(--visitme-primary), color-mix(in srgb, var(--visitme-primary) 70%, var(--visitme-accent)));
	color: #fff;
	border-color: transparent;
}

.visitme-action--is-primary .visitme-action__value {
	color: rgba(255, 255, 255, .8);
}

.visitme-action .visitme-icon {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var(--visitme-accent);
}

.visitme-action--is-primary .visitme-icon {
	color: #fff;
}

.visitme-action__label {
	font-weight: 600;
	font-family: var(--visitme-font-heading, serif);
	letter-spacing: .02em;
}

.visitme-action__value {
	margin-left: auto;
	font-size: 14px;
	color: color-mix(in srgb, var(--visitme-text) 60%, transparent);
	text-align: right;
	word-break: break-word;
}

/* Bio */
.visitme-card__bio {
	margin: 24px 0;
	padding-top: 22px;
	border-top: 1px solid color-mix(in srgb, var(--visitme-primary) 12%, transparent);
	font-size: 16.5px;
}

.visitme-card__bio p {
	margin: 0 0 .8em;
}

/* Eigene Blöcke */
.visitme-card__blocks {
	display: grid;
	gap: 20px;
	margin: 24px 0;
}

.visitme-block__title,
.visitme-block__heading {
	font-family: var(--visitme-font-heading, serif);
	color: var(--visitme-primary);
	font-size: 20px;
	margin: 0 0 6px;
}

.visitme-block__heading {
	text-align: center;
	font-size: 24px;
	border-bottom: 1px solid color-mix(in srgb, var(--visitme-accent) 40%, transparent);
	padding-bottom: 8px;
}

.visitme-block__button {
	justify-content: center;
	text-align: center;
}

.visitme-block__button .visitme-action__value {
	display: none;
}

/* Social */
.visitme-card__social {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin: 26px 0 6px;
}

.visitme-social {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, var(--visitme-primary) 18%, transparent);
	color: var(--visitme-primary);
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.visitme-social:hover,
.visitme-social:focus-visible {
	background: var(--visitme-primary);
	color: #fff;
	transform: translateY(-2px);
}

.visitme-social .visitme-icon {
	width: 20px;
	height: 20px;
}

/* Footer / QR */
.visitme-card__footer {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--visitme-primary) 12%, transparent);
	text-align: center;
}

.visitme-card__qr {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.visitme-card__qr svg {
	width: 116px;
	height: 116px;
}

.visitme-card__qr-hint {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--visitme-text) 55%, transparent);
}

.visitme-card__note {
	margin: 16px 0 0;
	font-size: 13px;
	color: color-mix(in srgb, var(--visitme-text) 55%, transparent);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Team-Grid */
.visitme-team {
	display: grid;
	grid-template-columns: repeat(var(--visitme-cols, 3), minmax(0, 1fr));
	gap: 24px;
	font-family: var(--visitme-font-body, serif);
}

.visitme-team__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	text-decoration: none;
	color: var(--visitme-text, #242018);
	padding: 22px 16px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .06);
	transition: transform .15s ease, box-shadow .15s ease;
}

.visitme-team__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--visitme-primary) 60%, transparent);
}

.visitme-team__photo {
	width: 110px;
	height: 110px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 14px;
	padding: 4px;
	background: linear-gradient(135deg, var(--visitme-primary), var(--visitme-accent));
}

.visitme-team__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.visitme-team__name {
	font-family: var(--visitme-font-heading, serif);
	font-size: 20px;
	color: var(--visitme-primary);
}

.visitme-team__position {
	font-style: italic;
	font-size: 15px;
	color: color-mix(in srgb, var(--visitme-text) 70%, transparent);
}

@media (max-width: 680px) {
	.visitme-team {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	}

	.visitme-action__value {
		font-size: 13px;
	}
}

/* Sanftes Einblenden */
.visitme-card {
	animation: visitme-in .5s ease both;
}

@keyframes visitme-in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.visitme-card,
	.visitme-action,
	.visitme-social,
	.visitme-team__item {
		animation: none;
		transition: none;
	}
}

/* Druck: echte Visitenkarte mit QR */
@media print {
	.visitme-main {
		background: #fff;
		padding: 0;
	}

	.visitme-card {
		box-shadow: none;
		border: 1px solid #ddd;
	}

	.visitme-card__actions,
	.visitme-card__social {
		break-inside: avoid;
	}
}