/* ============================================
   Modern CSS Grid Klingel-System für Magnolia.ch
   WORDPRESS VERSION - Basiert auf der funktionierenden standalone Version
   CSS Grid + Custom Properties + Moderne Features
   ============================================ */

/* CSS Custom Properties (Variables) */
:root {
	/* Farben mit modernen oklch() Werten für bessere Farbwahrnehmung */
	--color-bg: oklch(0% 0 0); /* Schwarz */
	--color-text: oklch(100% 0 0); /* Weiß */
	--color-primary: oklch(35% 0.1 250); /* Navy/Dunkelblau */
	--color-accent-member: oklch(80% 0.15 140 / 0.4); /* Grün für Mitglieder */
	--color-accent-friend: oklch(75% 0.18 50 / 0.4); /* Orange für Freunde */
	--color-label-bg: oklch(100% 0 0 / 0.22); /* Halbtransparentes Weiß */

	/* Abstände und Größen mit clamp() für responsive Werte */
	--space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
	--space-sm: clamp(0.5rem, 1vw, 1rem);
	--space-md: clamp(1rem, 2vw, 1.5rem);
	--space-lg: clamp(1.5rem, 3vw, 2rem);
	--space-xl: clamp(2rem, 4vw, 3rem);

	/* Klingel-Dimensionen */
	--klingel-size: 120px;
	--klingel-gap: 0;
	--info-panel-width: 160px;
	--info-panel-image-size: 150px;

	/* Typografie */
	--font-family: system-ui, -apple-system, 'Segoe UI', 'Roboto Condensed', sans-serif;
	--font-family-labels: 'Inter', sans-serif; /* Inter für Klingel-Labels */
	--font-size-label: clamp(0.7rem, 1.2vw, 0.95rem);
	--font-size-info: clamp(0.75rem, 1.1vw, 0.9rem);

	/* Übergänge */
	--transition-fast: 150ms ease-out;
	--transition-medium: 300ms ease-out;

	/* Border Radius */
	--radius-sm: 4px;
	--radius-circle: 50%;
}

/* Modern CSS Reset - nur für Klingel-Elemente */
.klingel-space-wrapper *,
.klingel-space-wrapper *::before,
.klingel-space-wrapper *::after {
	box-sizing: border-box;
}

/* WordPress Body Override - WICHTIG für Space Background */
.klingel-space-wrapper {
	min-block-size: 100vh !important;
	background: radial-gradient(ellipse at center, #0b1426 0%, #050812 100%) !important;
	color: var(--color-text);
	font-family: var(--font-family);
	display: grid !important;
	place-items: center;
	padding: var(--space-md);
	position: relative;

	/* Fullscreen in WordPress */
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	overflow: hidden;
}

/* Stern-Gruppe 1: Langsam, verschiedene Größen */
.klingel-space-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		/* Große helle Sterne */
		radial-gradient(3px 3px at 20% 28%, white, transparent),
		radial-gradient(2.5px 2.5px at 52% 45%, white, transparent),
		radial-gradient(2px 2px at 82% 35%, white, transparent),
		radial-gradient(2.5px 2.5px at 45% 22%, white, transparent),
		radial-gradient(3px 3px at 88% 68%, white, transparent),
		/* Mittlere Sterne */
		radial-gradient(1.5px 1.5px at 35% 75%, rgba(255,255,255,0.9), transparent),
		radial-gradient(1.5px 1.5px at 15% 85%, rgba(255,255,255,0.85), transparent),
		radial-gradient(1.5px 1.5px at 68% 58%, rgba(255,255,255,0.9), transparent),
		radial-gradient(1.5px 1.5px at 38% 8%, rgba(255,255,255,0.85), transparent),
		radial-gradient(1.5px 1.5px at 92% 18%, white, transparent),
		/* Kleine schwache Sterne */
		radial-gradient(0.8px 0.8px at 8% 12%, rgba(255,255,255,0.7), transparent),
		radial-gradient(0.8px 0.8px at 25% 48%, rgba(255,255,255,0.75), transparent),
		radial-gradient(0.8px 0.8px at 12% 38%, rgba(255,255,255,0.65), transparent),
		radial-gradient(0.8px 0.8px at 72% 88%, rgba(255,255,255,0.7), transparent),
		radial-gradient(0.8px 0.8px at 58% 78%, rgba(255,255,255,0.75), transparent);
	background-size: 620px 620px;
	background-position: 0 0;
	animation: stars-twinkle-slow 8s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

/* Stern-Gruppe 2: Schneller, andere Größen und Timing */
.klingel-space-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		/* Große Sterne */
		radial-gradient(2.5px 2.5px at 42% 55%, white, transparent),
		radial-gradient(3px 3px at 55% 32%, white, transparent),
		radial-gradient(2.5px 2.5px at 48% 92%, white, transparent),
		radial-gradient(2px 2px at 62% 5%, white, transparent),
		radial-gradient(3px 3px at 28% 65%, white, transparent),
		/* Mittlere Sterne */
		radial-gradient(1.5px 1.5px at 65% 70%, rgba(255,255,255,0.85), transparent),
		radial-gradient(1.5px 1.5px at 78% 15%, rgba(255,255,255,0.9), transparent),
		radial-gradient(1.5px 1.5px at 18% 62%, rgba(255,255,255,0.85), transparent),
		radial-gradient(1.5px 1.5px at 75% 25%, white, transparent),
		/* Kleine Sterne */
		radial-gradient(0.8px 0.8px at 32% 18%, rgba(255,255,255,0.7), transparent),
		radial-gradient(0.8px 0.8px at 85% 48%, rgba(255,255,255,0.65), transparent),
		radial-gradient(0.8px 0.8px at 5% 52%, rgba(255,255,255,0.75), transparent),
		radial-gradient(0.8px 0.8px at 95% 82%, rgba(255,255,255,0.7), transparent),
		radial-gradient(0.8px 0.8px at 22% 95%, rgba(255,255,255,0.65), transparent),
		radial-gradient(0.8px 0.8px at 88% 95%, rgba(255,255,255,0.7), transparent);
	background-size: 620px 620px;
	background-position: 80px 100px;
	animation: stars-twinkle-fast 5.5s ease-in infinite;
	pointer-events: none;
	z-index: 0;
}

/* Langsame Animation: Sanft ein und aus */
@keyframes stars-twinkle-slow {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}

/* Schnelle Animation: Schneller Rhythmus, andere Kurve */
@keyframes stars-twinkle-fast {
	0%, 100% { opacity: 0.3; }
	50% { opacity: 1; }
}

/* Links - WordPress "extern" entfernen */
.klingel-space-wrapper a {
	color: var(--color-primary);
	text-decoration: none;
}

.klingel-space-wrapper a:hover,
.klingel-space-wrapper a:focus-visible {
	text-decoration: none;
}

/* WordPress fügt "extern" hinzu - entfernen! */
.klingel-space-wrapper a[target="_blank"]::after {
	content: none !important;
	display: none !important;
}

/* Main Container mit Grid Layout */
.klingel-space-wrapper .container {
	display: grid;
	grid-template-columns: var(--info-panel-width) auto;
	grid-template-rows: 1fr auto;
	gap: var(--space-lg);
	inline-size: min(100%, 100%);
	max-inline-size: 680px;
	block-size: min(100%, 500px);
	position: relative;
	z-index: 1; /* Über den Sternen */
	background: transparent !important;
}

/* Satellit 1: SOFORT beim Load, horizontal oben */
.klingel-space-wrapper .container::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-1 20s linear infinite;
}

/* Satellit 2: Schnell diagonal */
.klingel-space-wrapper .container::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-2 18s linear infinite;
	animation-delay: 8s;
}

/* Satelliten-Animationen */
@keyframes satellite-1 {
	0% { top: 5%; left: -8%; opacity: 0; }
	3% { opacity: 0.9; }
	97% { opacity: 0.9; }
	100% { top: 8%; left: 108%; opacity: 0; }
}

@keyframes satellite-2 {
	0% { top: -8%; left: 10%; opacity: 0; }
	3% { opacity: 0.85; }
	97% { opacity: 0.85; }
	100% { top: 108%; left: 90%; opacity: 0; }
}

@keyframes satellite-3 {
	0% { top: -3%; left: -8%; opacity: 0; }
	4% { opacity: 0.9; }
	96% { opacity: 0.9; }
	100% { top: 0%; left: 108%; opacity: 0; }
}

@keyframes satellite-4 {
	0% { top: 108%; left: -8%; opacity: 0; }
	3% { opacity: 0.8; }
	97% { opacity: 0.8; }
	100% { top: -8%; left: 108%; opacity: 0; }
}

@keyframes satellite-5 {
	0% { top: 108%; left: 90%; opacity: 0; }
	2% { opacity: 0.75; }
	98% { opacity: 0.75; }
	100% { top: -8%; left: 10%; opacity: 0; }
}

@keyframes satellite-6 {
	0% { top: 3%; left: 108%; opacity: 0; }
	4% { opacity: 0.85; }
	96% { opacity: 0.85; }
	100% { top: 6%; left: -8%; opacity: 0; }
}

/* Klingel Grid (rechts, aber kommt zuerst im DOM) */
.klingel-grid {
	grid-column: 2;
	grid-row: 1;
	container-type: inline-size;
	container-name: klingel-grid;

	/* CSS Grid für Klingel-Layout */
	display: grid;
	grid-template-columns: repeat(4, var(--klingel-size));
	grid-auto-rows: var(--klingel-size);
	gap: var(--klingel-gap);
	justify-content: start;
	align-content: start;
	position: relative;
}

/* Satellit 3 + 4 auf Grid */
.klingel-grid::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-3 12s linear infinite;
	animation-delay: 4s;
}

.klingel-grid::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-4 22s linear infinite;
	animation-delay: 15s;
}

/* Info Panel (links) */
.info-panel {
	grid-column: 1;
	grid-row: 1 / -1;
	display: grid;
	grid-template-rows: var(--info-panel-image-size) 1fr;
	gap: var(--space-sm);
	align-content: start;
	position: relative;
	background: transparent !important;
}

/* Satellit 5 + 6 auf Info Panel */
.info-panel::before {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-5 28s linear infinite;
	animation-delay: 10s;
}

.info-panel::after {
	content: '';
	position: absolute;
	width: 2px;
	height: 2px;
	background: white;
	border-radius: 50%;
	box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.8);
	opacity: 0;
	z-index: -1;
	animation: satellite-6 15s linear infinite;
	animation-delay: 20s;
}

.info-image {
	inline-size: var(--info-panel-image-size);
	block-size: var(--info-panel-image-size);
	border-radius: var(--radius-circle);
	background-image: url('../img/members/magnolia-home-150x150.jpg');
	background-size: cover;
	background-position: center;
	transition: background-image var(--transition-medium);
}

.info-text {
	inline-size: var(--info-panel-width);
	padding: var(--space-sm);
	background: transparent;
	font-size: var(--font-size-info);
	font-weight: 600;
	line-height: 1.4;
	text-transform: uppercase;
	text-shadow:
		3px 3px 3px #050812,
		3px -3px 3px #050812,
		-3px 3px 3px #050812,
		-3px -3px 3px #050812;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--color-primary) transparent;
	position: relative;
}

.info-text p {
	margin: 0;
	position: absolute;
	inset: 0;
	padding: var(--space-sm);
	opacity: 0;
	transition: opacity var(--transition-fast);
	pointer-events: none;
}

.info-text p.info-default {
	opacity: 1;
}

/* Einzelne Klingel */
.klingel {
	inline-size: var(--klingel-size);
	block-size: var(--klingel-size);
	aspect-ratio: 1;
	position: relative;
	background-image: url('../img/klingel-bg-black.png');
	background-repeat: no-repeat;
	background-size: contain;
	container-type: normal;
	transition: filter var(--transition-fast);
}

.klingel:focus-within {
	filter: brightness(1.1);
}

.klingel.klingel--friend {
	background-image: url('../img/klingel-vacant2.png');
}

@media (hover: hover) {
	.klingel:hover {
		filter: brightness(1.1);
	}
}

/* Klingel Link (gesamte Fläche klickbar) */
.klingel-link {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	position: relative;
}

.klingel-link:focus-visible {
	outline: 2px solid var(--color-accent-member);
	outline-offset: 2px;
}

/* Klingel Label (Namensschild) - WICHTIG: Absolute Positionierung! */
.klingel-label {
	position: absolute;
	inset-block-start: 59px;
	inset-inline-start: 21px;
	inline-size: 80px;
	block-size: 37px;

	display: grid;
	place-content: center;
	text-align: center;

	font-size: var(--font-size-label);
	font-weight: 600;
	line-height: 1em;
	font-family: var(--font-family-labels);
	font-feature-settings: 'liga' 1, 'calt' 1;

	background-color: var(--color-label-bg);
	color: var(--color-primary);
	border-radius: var(--radius-sm);

	overflow: hidden;
	text-overflow: ellipsis;

	transition: background-color var(--transition-fast);
}

.klingel:focus-within .klingel-label {
	background-color: var(--color-accent-member);
}

.klingel--friend:focus-within .klingel-label {
	background-color: var(--color-accent-friend);
}

@media (hover: hover) {
	.klingel:hover .klingel-label {
		background-color: var(--color-accent-member);
	}

	.klingel--friend:hover .klingel-label {
		background-color: var(--color-accent-friend);
	}
}

/* Klingel Info (versteckte Beschreibung) */
.klingel-info {
	display: none;
}

/* ============================================
   Hover Effekt: Info Panel updaten mit :has()
   ============================================ */

@media (hover: hover) {
	.klingel-grid:has(.klingel:hover) ~ .info-panel .info-text .info-default {
		opacity: 0;
	}
}

.klingel-grid:has(.klingel:focus-within) ~ .info-panel .info-text .info-default {
	opacity: 0;
}

/* Alle Member-Hover-States */
@media (hover: hover) {
	.klingel-grid:has([data-member="magnolia"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/magnolia-150x150.jpg'); }
	.klingel-grid:has([data-member="magnolia"]:hover) ~ .info-panel .info-text [data-for="magnolia"] { opacity: 1; }

	.klingel-grid:has([data-member="nic"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/nic-150x150.jpg'); }
	.klingel-grid:has([data-member="nic"]:hover) ~ .info-panel .info-text [data-for="nic"] { opacity: 1; }

	.klingel-grid:has([data-member="klampen"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/klampen-150x150.jpg'); }
	.klingel-grid:has([data-member="klampen"]:hover) ~ .info-panel .info-text [data-for="klampen"] { opacity: 1; }

	.klingel-grid:has([data-member="dirk"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/dirk2-150x150.jpg'); }
	.klingel-grid:has([data-member="dirk"]:hover) ~ .info-panel .info-text [data-for="dirk"] { opacity: 1; }

	.klingel-grid:has([data-member="grillgang"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/grillgang-150x150.jpg'); }
	.klingel-grid:has([data-member="grillgang"]:hover) ~ .info-panel .info-text [data-for="grillgang"] { opacity: 1; }

	.klingel-grid:has([data-member="silky"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/silky-150x150.jpg'); }
	.klingel-grid:has([data-member="silky"]:hover) ~ .info-panel .info-text [data-for="silky"] { opacity: 1; }

	.klingel-grid:has([data-member="tiki"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/tiki-150x150.png'); }
	.klingel-grid:has([data-member="tiki"]:hover) ~ .info-panel .info-text [data-for="tiki"] { opacity: 1; }

	.klingel-grid:has([data-member="foundation"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/ffff-150x150.jpg'); }
	.klingel-grid:has([data-member="foundation"]:hover) ~ .info-panel .info-text [data-for="foundation"] { opacity: 1; }

	.klingel-grid:has([data-member="kinder-karate"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/kinderkarate-150x150.jpg'); }
	.klingel-grid:has([data-member="kinder-karate"]:hover) ~ .info-panel .info-text [data-for="kinder-karate"] { opacity: 1; }

	.klingel-grid:has([data-member="wuzzbuzzin"]:hover) ~ .info-panel .info-image { background-image: url('../img/members/buzz-150x150.jpg'); }
	.klingel-grid:has([data-member="wuzzbuzzin"]:hover) ~ .info-panel .info-text [data-for="wuzzbuzzin"] { opacity: 1; }

	/* Friends - nur Text */
	.klingel-grid:has([data-member="vacant"]:hover) ~ .info-panel .info-text [data-for="vacant"] { opacity: 1; }
	.klingel-grid:has([data-member="riffraff"]:hover) ~ .info-panel .info-text [data-for="riffraff"] { opacity: 1; }
	.klingel-grid:has([data-member="andrea"]:hover) ~ .info-panel .info-text [data-for="andrea"] { opacity: 1; }
	.klingel-grid:has([data-member="sonicnightmares"]:hover) ~ .info-panel .info-text [data-for="sonicnightmares"] { opacity: 1; }
	.klingel-grid:has([data-member="roydmc"]:hover) ~ .info-panel .info-text [data-for="roydmc"] { opacity: 1; }
	.klingel-grid:has([data-member="zeno"]:hover) ~ .info-panel .info-text [data-for="zeno"] { opacity: 1; }
}

/* Focus-within (Keyboard) - gleiche Rules */
.klingel-grid:has([data-member="magnolia"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/magnolia-150x150.jpg'); }
.klingel-grid:has([data-member="magnolia"]:focus-within) ~ .info-panel .info-text [data-for="magnolia"] { opacity: 1; }
.klingel-grid:has([data-member="nic"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/nic-150x150.jpg'); }
.klingel-grid:has([data-member="nic"]:focus-within) ~ .info-panel .info-text [data-for="nic"] { opacity: 1; }
.klingel-grid:has([data-member="klampen"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/klampen-150x150.jpg'); }
.klingel-grid:has([data-member="klampen"]:focus-within) ~ .info-panel .info-text [data-for="klampen"] { opacity: 1; }
.klingel-grid:has([data-member="dirk"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/dirk2-150x150.jpg'); }
.klingel-grid:has([data-member="dirk"]:focus-within) ~ .info-panel .info-text [data-for="dirk"] { opacity: 1; }
.klingel-grid:has([data-member="grillgang"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/grillgang-150x150.jpg'); }
.klingel-grid:has([data-member="grillgang"]:focus-within) ~ .info-panel .info-text [data-for="grillgang"] { opacity: 1; }
.klingel-grid:has([data-member="silky"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/silky-150x150.jpg'); }
.klingel-grid:has([data-member="silky"]:focus-within) ~ .info-panel .info-text [data-for="silky"] { opacity: 1; }
.klingel-grid:has([data-member="tiki"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/tiki-150x150.png'); }
.klingel-grid:has([data-member="tiki"]:focus-within) ~ .info-panel .info-text [data-for="tiki"] { opacity: 1; }
.klingel-grid:has([data-member="foundation"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/ffff-150x150.jpg'); }
.klingel-grid:has([data-member="foundation"]:focus-within) ~ .info-panel .info-text [data-for="foundation"] { opacity: 1; }
.klingel-grid:has([data-member="kinder-karate"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/kinderkarate-150x150.jpg'); }
.klingel-grid:has([data-member="kinder-karate"]:focus-within) ~ .info-panel .info-text [data-for="kinder-karate"] { opacity: 1; }
.klingel-grid:has([data-member="wuzzbuzzin"]:focus-within) ~ .info-panel .info-image { background-image: url('../img/members/buzz-150x150.jpg'); }
.klingel-grid:has([data-member="wuzzbuzzin"]:focus-within) ~ .info-panel .info-text [data-for="wuzzbuzzin"] { opacity: 1; }
.klingel-grid:has([data-member="vacant"]:focus-within) ~ .info-panel .info-text [data-for="vacant"] { opacity: 1; }
.klingel-grid:has([data-member="riffraff"]:focus-within) ~ .info-panel .info-text [data-for="riffraff"] { opacity: 1; }
.klingel-grid:has([data-member="andrea"]:focus-within) ~ .info-panel .info-text [data-for="andrea"] { opacity: 1; }
.klingel-grid:has([data-member="sonicnightmares"]:focus-within) ~ .info-panel .info-text [data-for="sonicnightmares"] { opacity: 1; }
.klingel-grid:has([data-member="roydmc"]:focus-within) ~ .info-panel .info-text [data-for="roydmc"] { opacity: 1; }
.klingel-grid:has([data-member="zeno"]:focus-within) ~ .info-panel .info-text [data-for="zeno"] { opacity: 1; }

/* Footer */
.footer {
	grid-column: 1 / -1;
	grid-row: 2;
	text-align: center;
	font-size: clamp(0.75rem, 1vw, 0.875rem);
	font-weight: 500;
	padding-block-start: var(--space-md);
	opacity: 0.6;
}

.footer p {
	margin: 0;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Container Queries */
@container klingel-grid (max-width: 400px) {
	.klingel-grid {
		grid-template-columns: repeat(3, var(--klingel-size));
	}
}

@container klingel-grid (max-width: 300px) {
	.klingel-grid {
		grid-template-columns: repeat(2, var(--klingel-size));
	}
}

/* Tablet Layout (500px - 700px) */
@media (max-width: 700px) and (min-width: 500px) {
	.klingel-space-wrapper {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		min-block-size: 100vh;
		padding: var(--space-md);
	}

	.klingel-space-wrapper .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-lg);
		inline-size: 100%;
		max-inline-size: 100%;
		block-size: auto;
	}

	.info-panel {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-md);
		inline-size: 100%;
		max-inline-size: 500px;
		order: 1;
	}

	.info-image {
		inline-size: var(--info-panel-image-size);
		block-size: var(--info-panel-image-size);
	}

	.info-text {
		inline-size: 100%;
		max-inline-size: 400px;
		min-block-size: 150px;
		text-align: center;
	}

	.klingel-grid {
		display: grid;
		grid-template-columns: repeat(4, var(--klingel-size));
		gap: var(--klingel-gap);
		justify-content: center;
		order: 2;
	}

	.footer {
		order: 3;
		inline-size: 100%;
		text-align: center;
	}
}

/* Mobile Layout (< 500px) */
@media (max-width: 500px) {
	.klingel-space-wrapper {
		padding: var(--space-sm) !important;
		min-height: 100vh !important;
		background: radial-gradient(ellipse at center, #0b1426 0%, #050812 100%) !important;
	}

	.klingel-space-wrapper .container {
		display: block;
		inline-size: 100%;
		block-size: auto;
		min-block-size: auto;
	}

	.info-panel {
		display: none;
	}

	.klingel-grid {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-xs);
		padding: var(--space-md) 0;
	}

	.klingel {
		inline-size: min(100%, 200px);
		block-size: 50px;
		background-image: url('../img/transpi-so.png') !important;
		background-size: 200px 50px !important;
		background-repeat: no-repeat !important;
		background-position: center !important;
		aspect-ratio: auto;
	}

	.klingel--friend {
		background-image: url('../img/transpi-vacant.png') !important;
		background-size: 200px 50px !important;
	}

	.klingel-label {
		position: static;
		inline-size: 100%;
		max-inline-size: 200px;
		block-size: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-inline-start: 50px;
		padding-inline-end: var(--space-sm);
		font-size: 0.8rem;
		font-weight: 500;
		line-height: 1.2;
		background-color: transparent !important;
		color: var(--color-primary) !important;
		text-align: center;
	}

	.klingel:hover,
	.klingel:focus-within {
		filter: none;
	}

	.klingel:hover .klingel-label,
	.klingel:focus-within .klingel-label,
	.klingel--friend:hover .klingel-label,
	.klingel--friend:focus-within .klingel-label {
		background-color: transparent !important;
	}

	.footer {
		display: none;
	}
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	:root {
		--color-label-bg: oklch(100% 0 0 / 0.4);
		--color-accent-member: oklch(80% 0.2 140 / 0.6);
		--color-accent-friend: oklch(75% 0.25 50 / 0.6);
	}
}

/* Focus Visible für bessere Accessibility */
.klingel-space-wrapper :focus-visible {
	outline: 2px solid var(--color-accent-member);
	outline-offset: 2px;
}