/* Helper to selectively force default text flow */
.text-flow-start {
	text-align: left;
	text-align: start;
}

/* Helper to avoid line-breaks within text span, the whole text is moved to
 * a new line instead before the text contents are considered for breaking
 *
 * For only breaking at specific breakpoints use `d-*-inline-block` instead. */
.avoid-break {
	display: inline-block;
	text-decoration: inherit;  /* Prevent hyperlinks containing this from looking off */
}

/* Custom colors used in templates */
.bg-light-yellow {
	color: #000;
	background-color: #FFF7E7;
}

.bg-dark-red {
	color: #FFF;
	background-color: #5F0013;
}

/* Generic language switcher icon */
.language-switcher-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A//www.w3.org/2000/svg'%20width%3D'20'%20height%3D'20'%20viewBox%3D'0%200%2020%2020'%3E%3Cpath%20fill%3D'rgba%28255,255,255,0.55%29'%20d%3D'M20%2018h-1.44a.61.61%200%200%201-.4-.12.81.81%200%200%201-.23-.31L17%2015h-5l-1%202.54a.77.77%200%200%201-.22.3.59.59%200%200%201-.4.14H9l4.55-11.47h1.89zm-3.53-4.31L14.89%209.5a11.62%2011.62%200%200%201-.39-1.24q-.09.37-.19.69l-.19.56-1.58%204.19zm-6.3-1.58a13.43%2013.43%200%200%201-2.91-1.41%2011.46%2011.46%200%200%200%202.81-5.37H12V4H7.31a4%204%200%200%200-.2-.56C6.87%202.79%206.6%202%206.6%202l-1.47.5s.4.89.6%201.5H0v1.33h2.15A11.23%2011.23%200%200%200%205%2010.7a17.19%2017.19%200%200%201-5%202.1q.56.82.87%201.38a23.28%2023.28%200%200%200%205.22-2.51%2015.64%2015.64%200%200%200%203.56%201.77zM3.63%205.33h4.91a8.11%208.11%200%200%201-2.45%204.45%209.11%209.11%200%200%201-2.46-4.45z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100%;
}

/* Force navbar menu button to always be displayed in the top-right corner */
#navbar {
	display: block;
}
#navbar > .container-fluid {
	width: auto;
}

/* Clear space obscured by collapsed navigation bar */
:root {
	--navbar-min-height: 3.5rem;
}

#navbar-container {
	min-height: var(--navbar-min-height);
}

main > * {
	padding-top: calc(1rem);
	padding-bottom: calc(var(--navbar-min-height) + 1rem);
}

footer {
	padding: calc(var(--navbar-min-height) + 1rem) 1.5rem 1.5rem 1.5rem;
}

/* Desktop-mode customizations */
@media (min-width: 992px) {
	/* Make navbar taller and somewhat transparent */
	#navbar {
		--bs-navbar-padding-y: 1.5rem;
		opacity: 0.9;
	}
	
	#navbar .navbar-brand {
		font-size: 1.75em;
	}
	
	:root {
		--navbar-min-height: 6.25rem;
	}
	
	/* Move language picker to the right of the menu item list */
	#language-switcher {
		order: 3;
	}
}

/* 1) Make each start page section at least one viewport in height, larger if necessary
 * 2) Add extra space above each section, so that the visible content of each
 *    section only starts below the navbar
 * 3) Add extra space below each section that is bridged by JS auto-scrolling */
:root[data-model="startpage"] main > * {
	min-height: 100vh;
	padding-top: calc(var(--navbar-min-height) + 1rem);
	padding-bottom: calc(var(--navbar-min-height) + 1rem);
}

/* Prevent doubling-spacing before first section due to space otherwise added
 * globally by #navbar-container */
:root[data-model="startpage"] #navbar-container {
	min-height: 0;
}

/* Intro/keyword section on start page */
:root[data-model="startpage"] main .startpage-intro {
	/* Align content elements in centered column */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
}

:root[data-model="startpage"] main .startpage-intro > .intro-bot {
	/* Teaser detailed services */
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2em;
}

/* Tablet+-mode customizations */
@media (min-width: 768px) {
	:root[data-model="startpage"] main .startpage-intro > .intro-bot {
		flex-flow: row wrap;
	}
}

:root[data-model="startpage"] main .startpage-main,
:root[data-model="page"] main {
	/* Lots of inline soft-hyphens (U+00AD) on less common words and customized
	 * word-break-points (<wbr/>) are required to make to make the justified and
	 * hyphened German content actually look good on narrow screens – don’t
	 * forget to add those and test, test, test, …! */
	text-align: justify;
	-ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

@media (min-width: 992px) {
	/* Limit width of main text blob in desktop mode */
	:root[data-model="startpage"] main .startpage-main > * {
		width: 960px;
	}
}

/* Make separation between section and subsection headers more prominent */
:root[data-model="startpage"] main .startpage-main h3 {
	font-size: 1.25rem;
}

:root[data-model="startpage"] main .startpage-main h4 {
	font-size: 1.1rem;
}

:root[data-model="startpage"] main .startpage-main h5,
:root[data-model="startpage"] main .startpage-main h6 {
	font-size: 1rem;
}

/* Hard-code expected size of contact form <iframe> */
#contact-form {
	width: 100%;
	height: 31rem;
}

/* Make contact links easier to see */
footer a {
	color: #ffffffbf;
}

footer a:focus, footer a:hover {
	color: #ffffffff;
}