/* Fixierte Buttons unten rechts (Nach oben) und unten links (WhatsApp), auf jeder Seite gleich. */

.sk-nach-oben,
.sk-whatsapp {
	position: fixed;
	bottom: 24px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border: none;
	border-radius: 50%;
	box-shadow: 0 8px 24px rgba(10, 31, 68, 0.25);
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s;
}

.sk-nach-oben:hover,
.sk-whatsapp:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(10, 31, 68, 0.3);
}

.sk-nach-oben:focus-visible,
.sk-whatsapp:focus-visible {
	outline: 2px solid var(--sk-gold);
	outline-offset: 3px;
}

/* Nach oben: Navy-Kreis, Gold-Pfeil. Erst sichtbar, wenn scroll-buttons.js die Klasse setzt,
   ohne JS bleibt der Button unsichtbar statt mitten auf der Seite aufzutauchen */
.sk-nach-oben {
	right: 24px;
	background: var(--sk-navy);
	color: var(--sk-gold);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
}

.sk-nach-oben svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	stroke: var(--sk-gold);
}

.sk-nach-oben.ist-sichtbar {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

/* WhatsApp: bekanntes Grün, immer sichtbar, damit die Nummer ohne Umweg erreichbar ist */
.sk-whatsapp {
	left: 24px;
	background: #25D366;
	color: #fff;
}

.sk-whatsapp svg {
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.sk-nach-oben,
	.sk-whatsapp {
		transition: none;
	}
}

/* Handy: kleiner und näher am Rand, damit sie den Inhalt nicht verdecken */
@media (max-width: 600px) {
	.sk-nach-oben,
	.sk-whatsapp {
		width: 46px;
		height: 46px;
		bottom: 16px;
	}

	.sk-nach-oben { right: 16px; }
	.sk-whatsapp { left: 16px; }
}