#bsfbfoot {
	--color-gray-1: #f0f0f0;
	--color-gray-2: #666666;
	--color-gray-3: #1e1e1e;

	--font-generic: system-ui, -apple-system, system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	--font-size-xs: 12px;
	--font-size-sm: 14px;

	--spacer-sm: 10px;
	--spacer-md: 20px;
	--spacer-lg: 30px;
	--spacer-xl: 50px;

	color: var(--color-gray-3);
	background-color: var(--color-gray-1);
	padding: var(--spacer-lg);
	position: relative;
	* {
		all: revert;
		font-family: var(--font-generic) !important;
	}
	.bsfbfoot-container {
		margin: 0 auto;
		max-width: 1180px;
		container-type: inline-size;
		container-name: bsfbfooter;
	}
	.bsfbfoot-logo-section {
		display: grid;
		grid-template-areas: 
			"a b c";
		grid-template-columns: auto max-content max-content;
		gap: var(--spacer-xl) var(--spacer-lg);
	}
	.bsfbfoot-logo {
		
	}
	.bsfbfoot-title {
		margin: 0;
		font-size: var(--font-size-xs) !important;
		color: var(--color-gray-3) !important;
		font-weight: 300;
		white-space: nowrap;
	}
	.bsfbfoot-logos {
		display: grid;
		grid-auto-flow: column;
		gap: var(--spacer-lg);
		padding-top: var(--spacer-md);
	}
	.bsfbfoot-logos-operators  { grid-area: a; }
	.bsfbfoot-logos-polyplanet { grid-area: b; }
	.bsfbfoot-logos-schulcms   { grid-area: c; }
	.bsfbfoot-logo-link {
		display: grid;
		gap: var(--spacer-sm);
		color: var(--color-gray-2);
		&:has(.bsfbfoot-logo-byline) {
			grid-template-areas: "a b";
			grid-template-columns: min-content max-content;
		}
		img {
			transition: all 0.2s linear;
			display: block;
			filter: grayscale(1);
			max-width: 100%;
			
		}
		&:hover,
		&:focus {
			color: var(--color-gray-3);
			img {
				filter: grayscale(0);
			}
			.bsfbfoot-logo-byline {
				text-decoration: underline;
			}
		}
		&:focus-visible {
			border-radius: 1px;
			outline: 3px solid var(--color-gray-2);
			outline-offset: 2px;
		}
	}
	
	.bsfbfoot-logos-operators img { max-width: 210px; width: 100%; }
	.bsfbfoot-logo-polyplanet img { max-width: 100px; }
	.bsfbfoot-logo-schulcms   img { max-width: 170px; }

	.bsfbfoot-logos-operators .bsfbfoot-logo-link { justify-self: center; }
	.bsfbfoot-logos-operators .bsfbfoot-logo-link:first-child { justify-self: start; }
	.bsfbfoot-logos-operators .bsfbfoot-logo-link:last-child { justify-self: end; }

	.bsfbfoot-logo-byline {
		font-size: var(--font-size-xs);
		font-weight: 600;
		line-height: 1.2;
	}
	.bsfbfoot-logo-link {
		text-decoration: none;
		em {
			text-decoration: underline;
			font-style: normal;
		}
	}
	
	.bsfbfoot-legals-nav {
		margin-top: var(--spacer-lg);
		border-top: 1px solid var(--color-gray-3);
		
		a {
			font-size: var(--font-size-xs);
			color: var(--color-gray-3) !important;
			text-decoration: underline !important;
			font-weight: 600;
			&:hover {
				text-decoration-thickness: 2px !important;
			}
			&:focus-visible {
				border-radius: 1px;
				outline: 3px solid var(--color-gray-2);
				outline-offset: 2px;
			}
		}
	}
	.bsfbfoot-legals-menu {
		display: grid;
		grid-template-columns: max-content max-content max-content;
		gap: var(--spacer-md) var(--spacer-xl);
		padding: var(--spacer-lg);
		list-style: none;
		line-height: 1;
		width: max-content;
		margin: 0 auto;
	}
}

@container bsfbfooter (width < 1040px) { /* logos in two lines */
	#bsfbfoot {
		.bsfbfoot-logo-section {
			grid-template-areas: 
				"a a" "b c";
			grid-template-columns: 1fr 2fr;
		}
	}
}
@container bsfbfooter (width < 894px) { /* legals menu break I */
	#bsfbfoot {
		.bsfbfoot-legals-menu {
			gap: var(--spacer-md);
		}
	}
}
@container bsfbfooter (width < 833px) { /* legals menu break II */
	#bsfbfoot {
		.bsfbfoot-legals-menu {
			grid-template-columns: 1fr !important;
			text-align: center;
		}
	}
}
@container bsfbfooter (width < 600px) { /* maker logos break  */
	#bsfbfoot {
		.bsfbfoot-logo-section {
			grid-template-areas: 
				"a" "b" "c";
			grid-template-columns: 1fr;
		}
		.bsfbfoot-title {
			text-align: center;
		}
		.bsfbfoot-logo {
			justify-self: center;
		}
	}
}
@container bsfbfooter (width < 520px) { /* maker logos break  */
	#bsfbfoot {
		.bsfbfoot-logos-operators .bsfbfoot-logos {
			grid-auto-flow: row;
		}
	}
}
@container bsfbfooter (width < 380px) { /* schulcms logo  */
	#bsfbfoot {
		.bsfbfoot-logo-schulcms .bsfbfoot-logo-link:has(.bsfbfoot-logo-byline) {
			grid-template-areas: "a" "b";
			grid-template-columns: 1fr;
		}
	}
}