/*
 * Karastamatis – Custom CSS
 * Tiefer atmosphärischer Hintergrund, moderne Typografie & garantierter Bodenabstand
 */

/* =============================================
   1. FARBSYSTEM & THEME TOKENS
   ============================================= */

:root {
	/* Dark Mode (Standard) */
	--bg:                #09090c;
	--surface:           #131318;
	--text:              #f8fafc;
	--muted:             #8e8e9c;
	--accent:            #a78bfa;
	--accent-hover:      #c4b5fd;
	--divider:           rgba(167, 139, 250, 0.35);
	--icon-bg:           #141418;
	--icon-border:       rgba(255, 255, 255, 0.08);
	--icon-fill:         #a0a0b2;
	--icon-hover-bg:     #1e1a2e;
	--icon-hover-border: rgba(167, 139, 250, 0.55);
	--copy:              #444452;
	--glow:              rgba(167, 139, 250, 0.28);
	--glow-subtle:       rgba(124, 58, 237, 0.14);
}

:root.light-mode,
html.light-mode,
body.light-mode {
	/* Light Mode */
	--bg:                #fafafa;
	--surface:           #ffffff;
	--text:              #0f172a;
	--muted:             #64748b;
	--accent:            #7c3aed;
	--accent-hover:      #6d28d9;
	--divider:           rgba(124, 58, 237, 0.25);
	--icon-bg:           #f4f4f6;
	--icon-border:       #e2e8f0;
	--icon-fill:         #64748b;
	--icon-hover-bg:     #ede9fe;
	--icon-hover-border: rgba(124, 58, 237, 0.5);
	--copy:              #94a3b8;
	--glow:              rgba(124, 58, 237, 0.18);
	--glow-subtle:       rgba(124, 58, 237, 0.08);
}

/* =============================================
   2. RESET & VIEWPORT (KEIN SCROLLEN)
   ============================================= */

*,
*::before,
*::after {
	box-sizing: border-box !important;
}

html {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	overflow-x: hidden !important;
	background-color: var(--bg) !important;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	transition: background-color 0.35s ease;
}

body {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	overflow: hidden !important;
	overflow-x: hidden !important;
	overscroll-behavior: none !important;
	background-color: var(--bg) !important;
	color: var(--text) !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transition: background-color 0.35s ease, color 0.35s ease;
}

/* Reicher, atmosphärischer Hintergrund-Glow */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	background-image:
		radial-gradient(circle at 50% 38%, rgba(167, 139, 250, 0.14) 0%, rgba(139, 92, 246, 0.06) 42%, transparent 72%),
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(167, 139, 250, 0.08) 0%, transparent 65%);
	transition: background-image 0.35s ease;
}

body.light-mode::before,
html.light-mode body::before {
	background-image:
		radial-gradient(circle at 50% 38%, rgba(124, 58, 237, 0.08) 0%, rgba(124, 58, 237, 0.03) 42%, transparent 72%),
		radial-gradient(ellipse 90% 70% at 50% 0%, rgba(124, 58, 237, 0.05) 0%, transparent 65%) !important;
}

/* Skip-Links & Admin-Bar */
.skip-link,
a.skip-link {
	display: none !important;
}

body.admin-bar #wpadminbar {
	display: block !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 32px !important;
	min-height: 32px !important;
	max-height: 32px !important;
	z-index: 99999 !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar #wpadminbar {
		height: 46px !important;
		min-height: 46px !important;
		max-height: 46px !important;
	}
}

body:not(.admin-bar) #wpadminbar {
	display: none !important;
}

/* =============================================
   3. HAUPT-WRAPPER (MIT GARANTIERTEM BODENABSTAND)
   ============================================= */

.wp-site-blocks {
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: transparent !important;
	overflow: hidden !important;
}

/* Vollbild-Container: zentriert mit garantiertem Bodenpuffer */
main.card-wrapper-fixed,
.card-wrapper-fixed,
main.wp-block-group {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 100% !important;
	height: 100dvh !important;
	margin: 0 !important;
	/* Mindestabstand vom Boden: 3.5rem (Desktop) / 4rem (Mobile) */
	padding-top: 2rem !important;
	padding-left: 1.5rem !important;
	padding-right: 1.5rem !important;
	padding-bottom: max(3.5rem, 6vh) !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	background: transparent !important;
	background-color: transparent !important;
	z-index: 10 !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
}

body.admin-bar main.card-wrapper-fixed,
body.admin-bar .card-wrapper-fixed,
body.admin-bar main.wp-block-group {
	top: 32px !important;
	height: calc(100vh - 32px) !important;
	height: calc(100dvh - 32px) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar main.card-wrapper-fixed,
	body.admin-bar .card-wrapper-fixed,
	body.admin-bar main.wp-block-group {
		top: 46px !important;
		height: calc(100vh - 46px) !important;
		height: calc(100dvh - 46px) !important;
	}
}

/* Innere Visitenkarte */
.card-inner,
div.card-inner {
	width: 100% !important;
	max-width: 440px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	background: transparent !important;
	background-color: transparent !important;
	position: relative !important;
	box-sizing: border-box !important;
	animation: fadeInUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* =============================================
   4. PROFILFOTO (LEUCHTENDER HALO)
   ============================================= */

.card-avatar,
.profile-image,
figure.wp-block-image {
	margin: 0 auto 1.25rem auto !important;
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	background: transparent !important;
	width: 100% !important;
}

.card-avatar img,
.profile-image img,
figure.wp-block-image img {
	width: 144px !important;
	height: 144px !important;
	object-fit: cover !important;
	border-radius: 50% !important;
	border: 3px solid var(--accent) !important;
	box-shadow:
		0 0 30px var(--glow),
		0 0 60px var(--glow-subtle) !important;
	display: block !important;
	margin: 0 auto !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.card-avatar img:hover,
.profile-image img:hover {
	transform: scale(1.04) !important;
	box-shadow:
		0 0 45px var(--glow),
		0 0 80px var(--glow-subtle) !important;
}

/* =============================================
   5. MODERNE TYPOGRAFIE (INTER FONT FAMILY)
   ============================================= */

/* Name (H1) */
.card-name,
h1.card-name,
h1.wp-block-heading,
h1 {
	width: 100% !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif !important;
	font-size: 2.25rem !important;
	font-weight: 700 !important;
	letter-spacing: -0.035em !important;
	line-height: 1.15 !important;
	color: var(--text) !important;
	margin: 0 auto 0.35rem auto !important;
	padding: 0 !important;
	text-align: center !important;
	cursor: default;
	text-shadow: 0 0 35px var(--glow) !important;
	transition: text-shadow 0.3s ease, color 0.35s ease !important;
}

.card-name:hover,
h1:hover {
	text-shadow: 0 0 50px var(--glow) !important;
}

/* Berufsbezeichnung */
.card-title,
p.card-title {
	width: 100% !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--accent) !important;
	margin: 0 auto 0.95rem auto !important;
	padding: 0 !important;
	text-align: center !important;
	transition: color 0.35s ease !important;
}

/* Bio Text */
.card-bio,
p.card-bio,
p.has-text-align-center {
	width: 100% !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 0.98rem !important;
	font-weight: 400 !important;
	line-height: 1.75 !important;
	color: var(--muted) !important;
	letter-spacing: -0.01em !important;
	max-width: 340px !important;
	margin: 0 auto 1.4rem auto !important;
	padding: 0 !important;
	text-align: center !important;
	transition: color 0.35s ease !important;
}

/* =============================================
   6. TRENNLINIE (SUBTIL & ELEGANT)
   ============================================= */

.card-divider,
hr.card-divider,
hr.wp-block-separator,
hr {
	max-width: 140px !important;
	width: 45% !important;
	height: 1px !important;
	border: none !important;
	background: linear-gradient(90deg, transparent, var(--divider), transparent) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 1.4rem !important;
	display: block !important;
	opacity: 1 !important;
	transition: background 0.35s ease !important;
}

/* =============================================
   7. SOCIAL MEDIA ICONS
   ============================================= */

.card-socials,
ul.wp-block-social-links,
ul.wp-block-social-links.is-style-logos-only {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	justify-content: center !important;
	align-items: center !important;
	gap: 1.25rem !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 1.4rem !important;
	padding: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	padding-inline-start: 0 !important;
	padding-inline-end: 0 !important;
	list-style: none !important;
	background: transparent !important;
	box-sizing: border-box !important;
}

.wp-block-social-links .wp-social-link,
.card-socials .wp-social-link,
.wp-block-social-links li,
.card-socials li {
	margin: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	list-style: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: transform 0.25s ease !important;
}

.wp-block-social-links .wp-social-link:hover,
.card-socials .wp-social-link:hover {
	transform: translateY(-4px) !important;
}

/* Runde Buttons */
.wp-block-social-links .wp-social-link a,
.card-socials .wp-social-link a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;
	background: var(--icon-bg) !important;
	border: 1px solid var(--icon-border) !important;
	text-decoration: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.wp-block-social-links .wp-social-link a:hover,
.card-socials .wp-social-link a:hover {
	background: var(--icon-hover-bg) !important;
	border-color: var(--icon-hover-border) !important;
	box-shadow: 0 0 20px var(--glow) !important;
}

/* SVG Icons */
.wp-block-social-links .wp-social-link svg,
.card-socials .wp-social-link svg {
	width: 20px !important;
	height: 20px !important;
	fill: var(--icon-fill) !important;
	display: block !important;
	margin: auto !important;
	transition: fill 0.25s ease !important;
}

.wp-block-social-links .wp-social-link a:hover svg,
.card-socials .wp-social-link a:hover svg {
	fill: var(--accent) !important;
}

/* =============================================
   8. COPYRIGHT
   ============================================= */

.card-copy,
p.card-copy {
	width: 100% !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
	font-size: 0.74rem !important;
	color: var(--copy) !important;
	margin-left: auto !important;
	margin-right: auto !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding: 0 !important;
	text-align: center !important;
	letter-spacing: 0.03em !important;
	transition: color 0.35s ease !important;
}

/* =============================================
   9. DARK / LIGHT TOGGLE BUTTON
   ============================================= */

.theme-toggle-btn {
	position: fixed !important;
	top: 1.25rem !important;
	right: 1.25rem !important;
	z-index: 9999 !important;
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	border: 1px solid var(--icon-border) !important;
	background: var(--surface) !important;
	color: var(--muted) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	outline: none !important;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
	padding: 0 !important;
}

body.admin-bar .theme-toggle-btn {
	top: calc(32px + 1rem) !important;
}

@media screen and (max-width: 782px) {
	body.admin-bar .theme-toggle-btn {
		top: calc(46px + 0.75rem) !important;
	}
}

.theme-toggle-btn:hover {
	transform: scale(1.08) rotate(12deg) !important;
	border-color: var(--accent) !important;
	box-shadow: 0 0 18px var(--glow) !important;
	color: var(--accent) !important;
}

.theme-toggle-btn .icon-moon {
	display: block !important;
}
.theme-toggle-btn .icon-sun {
	display: none !important;
}

:root.light-mode .theme-toggle-btn .icon-moon,
html.light-mode .theme-toggle-btn .icon-moon,
body.light-mode .theme-toggle-btn .icon-moon {
	display: none !important;
}

:root.light-mode .theme-toggle-btn .icon-sun,
html.light-mode .theme-toggle-btn .icon-sun,
body.light-mode .theme-toggle-btn .icon-sun {
	display: block !important;
}

/* =============================================
   10. MOBILE OPTIMIERUNG (GARANTIERTER BODENABSTAND)
   ============================================= */

@media (max-width: 480px) {
	main.card-wrapper-fixed,
	.card-wrapper-fixed,
	main.wp-block-group {
		/* Garantierter, großzügiger Bodenabstand auf allen Handys */
		padding-top: max(1.5rem, env(safe-area-inset-top, 1.5rem)) !important;
		padding-bottom: max(3.5rem, env(safe-area-inset-bottom, 3.2rem)) !important;
		padding-left: 1rem !important;
		padding-right: 1rem !important;
	}

	.card-inner,
	div.card-inner {
		max-width: 100% !important;
		width: 100% !important;
	}

	.card-avatar,
	.profile-image,
	figure.wp-block-image {
		margin-bottom: 1rem !important;
	}

	.card-avatar img,
	.profile-image img,
	figure.wp-block-image img {
		width: 118px !important;
		height: 118px !important;
	}

	.card-name,
	h1.card-name,
	h1 {
		font-size: 1.85rem !important;
		margin-bottom: 0.25rem !important;
	}

	.card-title,
	p.card-title {
		font-size: 0.74rem !important;
		margin-bottom: 0.8rem !important;
	}

	.card-bio,
	p.card-bio,
	p.has-text-align-center {
		font-size: 0.92rem !important;
		line-height: 1.65 !important;
		max-width: 280px !important;
		margin-bottom: 1.2rem !important;
	}

	.card-divider,
	hr.card-divider,
	hr.wp-block-separator,
	hr {
		max-width: 100px !important;
		width: 35% !important;
		margin-bottom: 1.2rem !important;
	}

	.card-socials,
	ul.wp-block-social-links,
	ul.wp-block-social-links.is-style-logos-only {
		gap: 0.9rem !important;
		margin-bottom: 1.2rem !important;
	}

	.wp-block-social-links .wp-social-link a,
	.card-socials .wp-social-link a {
		width: 42px !important;
		height: 42px !important;
	}

	.wp-block-social-links .wp-social-link svg,
	.card-socials .wp-social-link svg {
		width: 18px !important;
		height: 18px !important;
	}

	.card-copy,
	p.card-copy {
		font-size: 0.7rem !important;
	}

	body:not(.admin-bar) .theme-toggle-btn {
		top: max(1rem, env(safe-area-inset-top, 1rem)) !important;
		right: 1rem !important;
		width: 40px !important;
		height: 40px !important;
	}
}

/* =============================================
   11. SCROLLBARS DEAKTIVIEREN
   ============================================= */

::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	height: 0 !important;
}