/**
 * H&C Sticky Sidebar – Frontend
 *
 * Der Ausfahr-Effekt läuft vollständig über CSS. Kein JavaScript nötig,
 * dadurch funktioniert er auch bei strenger Content Security Policy.
 */

.hc-sb {
	--hc-sb-size: 52px;
	--hc-sb-gap: 10px;
	--hc-sb-offset: 0px;
	--hc-sb-edge: 16px;
	--hc-sb-label-max: 16rem;
	--hc-sb-shadow: 0 6px 18px rgb(8 20 24 / 22%);
	--hc-sb-duration: 260ms;
	--hc-sb-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	position: fixed;
	z-index: 90;
	pointer-events: none;
}

.hc-sb *,
.hc-sb *::before,
.hc-sb *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------
   Lage am Bildschirm
   ------------------------------------------------- */

.hc-sb--right {
	right: var(--hc-sb-edge);
}

.hc-sb--left {
	left: var(--hc-sb-edge);
}

.hc-sb--pos-center {
	top: 50%;
	transform: translateY(calc(-50% + var(--hc-sb-offset)));
}

.hc-sb--pos-top {
	top: calc(120px + var(--hc-sb-offset));
}

.hc-sb--pos-bottom {
	bottom: calc(24px - var(--hc-sb-offset));
}

/* -------------------------------------------------
   Liste
   ------------------------------------------------- */

.hc-sb__list {
	display: flex;
	flex-direction: column;
	gap: var(--hc-sb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-sb__item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Rechts angeschlagen wächst die Pille nach links, links andersherum. */
.hc-sb--right .hc-sb__item {
	justify-content: flex-end;
}

.hc-sb--left .hc-sb__item {
	justify-content: flex-start;
}

/* -------------------------------------------------
   Button
   ------------------------------------------------- */

.hc-sb__link {
	display: inline-flex;
	align-items: center;
	height: var(--hc-sb-size);
	border-radius: 999px;
	background-color: var(--hc-sb-bg, #12232a);
	color: var(--hc-sb-fg, #fff);
	box-shadow: var(--hc-sb-shadow);
	text-decoration: none;
	pointer-events: auto;
	transition: box-shadow var(--hc-sb-duration) var(--hc-sb-ease);
}

.hc-sb--left .hc-sb__link {
	flex-direction: row-reverse;
}

.hc-sb__link:hover,
.hc-sb__link:focus-visible {
	box-shadow: 0 10px 26px rgb(8 20 24 / 32%);
	color: var(--hc-sb-fg, #fff);
	text-decoration: none;
}

.hc-sb__link:focus-visible {
	outline: 2px solid var(--hc-sb-bg, #12232a);
	outline-offset: 3px;
}

.hc-sb__circle {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: var(--hc-sb-size);
	height: var(--hc-sb-size);
}

.hc-sb__icon {
	display: block;
	width: calc(var(--hc-sb-size) * 0.42);
	height: calc(var(--hc-sb-size) * 0.42);
}

/* -------------------------------------------------
   Beschriftung: fährt beim Überfahren aus
   ------------------------------------------------- */

.hc-sb__label {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	transition:
		max-width var(--hc-sb-duration) var(--hc-sb-ease),
		opacity 180ms ease,
		padding var(--hc-sb-duration) var(--hc-sb-ease);
}

.hc-sb__link:hover .hc-sb__label,
.hc-sb__link:focus-visible .hc-sb__label {
	max-width: var(--hc-sb-label-max);
	padding-inline-end: 1.35em;
	opacity: 1;
}

/* Bei linker Anordnung sitzt der Text vor dem Icon. */
.hc-sb--left .hc-sb__link:hover .hc-sb__label,
.hc-sb--left .hc-sb__link:focus-visible .hc-sb__label {
	padding-inline: 1.35em 0;
}

/* -------------------------------------------------
   Bewegung reduzieren
   ------------------------------------------------- */

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

	.hc-sb__label,
	.hc-sb__link {
		transition: none;
	}
}

/* -------------------------------------------------
   Druckansicht
   ------------------------------------------------- */

@media print {

	.hc-sb {
		display: none;
	}
}

/* -------------------------------------------------
   Mobil
   ------------------------------------------------- */

@media (max-width: 782px) {

	/* Ausblenden */
	.hc-sb--mobile-hide {
		display: none;
	}

	/* Seitlich beibehalten, aber kleiner */
	.hc-sb--mobile-keep {
		--hc-sb-size: 44px;
		--hc-sb-edge: 10px;
	}

	/* Als waagerechte Leiste am unteren Rand.
	   Dort ist kein Hover möglich, deshalb stehen die Beschriftungen fest. */
	.hc-sb--mobile-bottom {
		top: auto;
		right: 0;
		bottom: 0;
		left: 0;
		padding: 0.5rem;
		background-color: rgb(255 255 255 / 92%);
		box-shadow: 0 -2px 12px rgb(8 20 24 / 12%);
		backdrop-filter: blur(6px);
		transform: none;
	}

	.hc-sb--mobile-bottom .hc-sb__list {
		flex-direction: row;
		justify-content: center;
		gap: 0.5rem;
	}

	.hc-sb--mobile-bottom .hc-sb__item {
		flex: 1 1 0;
		justify-content: center;
		min-width: 0;
	}

	.hc-sb--mobile-bottom .hc-sb__link {
		--hc-sb-size: 46px;

		width: 100%;
		justify-content: center;
		box-shadow: none;
	}

	.hc-sb--mobile-bottom .hc-sb__label {
		display: none;
	}
}