/* Variablen */
:root {
	/* Farben: Orange */
	--orange-dark-80: #4b1800;
	--orange-dark-60: #a53500;
	--orange-dark-60-translucent: #a5350075;
	--orange-dark-40: #a5571a;
	--orange-main: #ed700e;
	--orange-main-translucent: #ed700e75;
	--orange-bright-40: #ff9745;
	--orange-bright-50: #ffac6b;
	/* Farben: Grau */
	--grey-dark-90: #0c0c0c;
	--grey-dark-90-translucent: #0c0c0cba;
	--grey-dark-60: #212222;
	--grey-dark-60-translucent: #212222ba;
	--grey-dark-30: #656565;
	--grey-dark-30-translucent: #656565;
	--grey-main: #606060;
	--grey-bright-40: #979797;
	--grey-bright-40-translucent: #979797ba;
	--grey-bright-50: #c3c3c3;
	--grey-bright-60: #e5e5e5;
	--grey-bright-60-translucent: #e5e5e5ba;
	--grey-bright-90: #f3f3f3;
	--grey-bright-90-translucent: #f3f3f3ba;
	/* Farben: Grün */
	--green-dark: #324300;
	--green-main: #628300;
	--green-bright: #beff00;
	/* Farben: Sonstige */
	--black: #000000;
	--black-translucent: #000000ba;
	--black-translucent-min: #000000fa;
	--white: #ffffff;
	--white-translucent: #ffffffba;
	--white-translucent-min: #ffffffde;
	--red: #bd0000;
	/* Anschauen !!! */
	--transparency: 20%;
	--color-with-transparency: color-mix(in srgb, var(--color) var(--transparency, 100%), transparent);
}

/* Fonts: Überschriften */
@font-face {
	font-family: 'secondary';
	src: url('/webfonts/archivo-semibold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'secondary';
	src: url('/webfonts/archivo-black.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
	font-stretch: normal;
}

/* Fonts: Fließtext */
@font-face {
	font-family: 'primary';
	src: url('/webfonts/archivo-regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-stretch: normal;
}

@font-face {
	font-family: 'primary';
	src: url('/webfonts/archivo-bold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-stretch: normal;
}

/* Common */
body {
	position: relative;
	font-family: "primary";
	font-weight: 400;
}

body, .large, .small {
	font-size: 16px;
}

strong {
	font-weight: 600;
}

p {
	/*line-height: 1.5em;*/
	text-align: justify;
}

img {
	width: 100%;
}

#blazor-error-ui {
	display: none;
}

.containment > .container {
	padding: 0;
	display: flex;
}

.col-sidebar {
	flex: 0 0 auto;
	display: none;
}

.col-content {
	flex: 0 0 auto;
	width: 100%;
}

nav a.button, footer {
	font-size: 14px;
}

.bordertop {
	border-top: 7px solid var(--orange-main);
}

.borderright {
	border-right: 7px solid var(--orange-main);
}

.borderbottom {
	border-bottom: 7px solid var(--orange-main);
}

.borderleft {
	border-left: 7px solid var(--orange-main);
}

.nowrap {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Links */

a, a:hover, a:focus, button, .nav-link {
	font-weight: 600;
	transition: all 0.3s ease;
	text-decoration: none;
}

main a i, footer a i {
	margin-right: 3px;
}

main a, .offcanvas a {
	color: var(--orange-main);
}

	main a:hover, main a:focus, .offcanvas a:hover, .offcanvas a:focus {
		color: var(--orange-bright-40);
	}

	main a:hover, main a:focus, footer a:hover, footer a:focus, .offcanvas a:hover, .offcanvas a:focus {
		/*text-decoration: underline;*/
	}

footer a:hover, footer a:focus {
	color: var(--orange-bright-50) !important;
}

nav#side {
	flex-direction: column;
}

	nav#side a {
		padding: 20px 0 !important;
		border-radius: 0;
	}

		nav#side a:hover, nav#side a:focus {
			color: var(--orange-bright-40) !important;
		}

nav#main a:not([class*="style"]):hover, nav#main .dropdown-menu a:hover /*, nav#main a:not([class*="style"]):focus, nav#main .dropdown-menu a:focus*/ {
	color: var(--orange-main);
	background-color: transparent;
}

nav#main a:not([class*="style"]).dropdown-toggle.show {
	color: var(--orange-main) !important;
}
nav#main a[class*="style"].dropdown-toggle.show {
	color: var(--white) !important;
}

nav#main .dropdown-toggle {
	white-space: inherit;
}

/* Headings */

h1, h2, h3, h4, h5, .misc-heading {
	font-family: "secondary";
	line-height: 1.0;
	letter-spacing: -1px;
}

h1, h2 {
	font-weight: 800;
}

	h1:not(.intro) span, h3, h4, h5, .misc-heading {
		font-weight: 700;
	}

h1 {
	text-transform: uppercase;
	font-size: 1.5rem;
}

section:not(.intro) h1 {
	background-color: var(--orange-main);
	color: var(--white);
	padding: 20px;
	border-top-left-radius: 25px;
}

h1:not(.intro) span {
}

section.intro h1 {
	font-size: 6.5vw;
	color: #ffffff;
	text-shadow: 0px 0px 20px rgba(0,0,0,0.35);
}

/*section:not(.intro) div:not(.infobox) > div > h2 {
	color: var(--orange-main);
}*/

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.25rem;
}

h4, h5, .misc-heading {
	font-size: 1.25rem;
}

.misc-heading {
	margin-bottom: .5rem
}

nav#main .navbar-toggler:focus, .btn-close:focus {
	box-shadow: none;
}

/* Loader */

#app > .loader {
	height: 100vh;
	font-size: 64px;
	text-align: center;
	background-size: cover;
	color: #ffffff;
	transition: all 1s;
}

#app > .loader img {
	margin-bottom: 50px;
}

main .loader {
	font-size: 48px;
	text-align: center;
	transition: all 1s;
	animation: loader 3s infinite;
}

/* Nav */

nav#main, nav#side {
	top: 0;
	position: sticky !important;
	position: -webkit-sticky !important;
	z-index: 1000;
}

nav#side {
	/*	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);*/
	height: 100vh;
	display: flex;
}

	nav#side ul {
		flex-direction: column;
		width: 100%;
		text-align: center;
		font-size: 16px;
		margin-bottom: 30px;
	}

	nav#side h4 {
		margin: 125px 10px 5px 0;
		writing-mode: vertical-rl;
		font-weight: 800;
		text-transform: uppercase;
		font-size: 25px;
	}

	nav#side ul li {
		padding: 10px 5px 10px 0;
		writing-mode: vertical-rl;
	}

		nav#side ul li.active a {
			color: var(--white) !important;
		}

nav#main, section .row.sticky[class*='heading'], section .row.sticky.translucent[class*='heading'] {
	transition: all .5s;
}

nav#main {
	height: inherit;
	/*border-bottom-right-radius: 25px;*/
}

	nav#main img {
		width: auto;
	}

		nav#main img.bow {
			height: 75px;
		}

		nav#main img.logo {
			height: 50px;
		}

	nav#main .dropdown-menu, section:not(.intro) .row[class*='heading'] {
		backdrop-filter: blur(15px);
		-webkit-backdrop-filter: blur(15px);
	}

	nav#main .navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' class='bi bi-list' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
	}

	nav#main .dropdown-menu {
		border-left: 10px solid var(--orange-main) !important;
		border-radius: 5px;
		padding-right: 20px;
		padding-left: 15px;
		margin-left: 10px;
		margin-bottom: 15px;
	}

		nav#main .dropdown-menu .dropdown-menu {
			position: relative;
			/*	background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;*/
			border-radius: 0px;
			padding-left: 10px;
			border: none;
		}

		nav#main .dropdown-menu .dropdown-item:focus {
			background-color: transparent;
		}

	nav#main #menu ul li a {
		width: 100%;
		margin-bottom: 5px;
	}

	nav#main .nav-link {
		padding-right: .5rem;
		padding-left: .5rem;
		height: 35px;
	}

	nav#main .nav-link img {
		height: 100%;
		width: auto;
	}

		nav#main .nav-link.active {
			/*color: x;*/
		}

.toprounding {
	position: fixed;
	/*z-index: 1025;*/
	z-index: 975;
}

	.toprounding::before {
		content: "";
		position: absolute;
		background-color: transparent;
		height: 50px;
		width: 25px;
		border-top-left-radius: 25px;
		top: 0px;
	}

.actionbox .nav-pills {
	gap: 5px;
}

.actionbox .nav-pills .nav-link {
	border: 1px solid var(--orange-main);
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
	background-color: var(--orange-main);
}

.nav-link {
	color: var(--orange-main);
}

	.nav-link:focus, .nav-link:hover {
		color: var(--orange-bright-40);
	}

/* Main */

main {
}

.row .row .row {
	/* Mehrfach nested Rows */
	padding: inherit !important;
	/*padding: 0 !important;*/
	/*	padding-left: inherit !important;
	padding-right: inherit !important;*/
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x));
}

section {
	margin-bottom: -50px;
}

section:not(.intro) {
	padding-bottom: 100px;
}

section.intro {
	background-size: cover;
	min-height: calc(100vh - 50px);
	display: flex;
	flex-direction: column;
}

section.intro .actionbox {
	align-self: end;
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	background-color: rgba(0, 0, 0, .5);
	color: #ffffff;
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

section.intro .actionbox .row > div, .row.infobox > div {
	display: flex;
	flex-direction: column;
}

section .row.infobox {
	margin: 0 0 3px 0;	
	padding-bottom: 0px;
}

section .row.infobox > div {
	padding: 40px 30px;
}

section .row:not(.squared).infobox:not(.squared):first-child > div:first-of-type {
	border-top-left-radius: 25px;
}

section .row.infobox:first-child {
	padding-top: 50px;
}
section .row.infobox:not(:first-child) {
	padding-top: 0px;
}

section .row.infobox .separatebottom {
	border-bottom: 3px solid !important;
}

section .infobox a {
	white-space: nowrap
}

	section .infobox :not(.button) > i {
		font-size: 64px;
	}

	section .infobox {
		color: var(--white);
	}

	section .row.infobox:nth-child(1) > div {
		background-color: var(--orange-main);
	}

	section .row:not([class*='heading']):not(.infobox), footer {
		padding-top: 25px;
		padding-bottom: 25px;
	}

	section .row[class*='heading'] {
		padding-top: 50px;
	}

	section .row.sticky[class*='heading'] {
		z-index: 900;
		top: 65px /* Anpassungen an diesem Wert müssen auch in scripts.js vorgenommen werden */;
		position: sticky !important;
		position: -webkit-sticky !important;
	}

	section:not(.intro) .row:last-child {
		/*margin-bottom: 50px;*/
	}

	section.style4 {
		background-size: cover;
	}


/* Cards */

.cards > div {
	padding-bottom: 50px;
}

.card:after {
	content: "";
	border-bottom: 1px solid var(--grey-bright-40);
}

.card-title, .card-footer, .card {
	background-color: transparent !important;
}

.card-footer, .card {
	border: none;
}

.card-header, .card-body, .card-footer {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Chat */

.chat {
	flex-direction: column;
}

.chat .clue {
	text-align: center;
	padding-top: 3rem;
	padding-bottom: 3rem;
	margin-top: auto;
	margin-bottom: auto;
}

.chat .clue i {
	display: block;
	font-size: 24px;
}

.chat .messages {
	overflow-y: auto;
	flex-direction: column-reverse;
	padding-right: 10px;
	margin-bottom: 10px;
}

.chat, .chat .messages {
	height: 100%;
	display: flex;
}
	/*.chat .scroller .messages .item {
		height: 20px;
		transform: translateZ(0);*/ /* fixes a bug in Safari iOS where the scroller doesn't update */
	/*}*/
	.chat .footer {
		margin-bottom: auto;
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
	}

.chat .message * {
	display: flex;
}

.chat .message {
	margin: 30px 0;
}

.chat .message .body {
	flex-direction: row;
}

.chat .message .metadata {
	font-size: 12px;
	color: var(--grey-bright-40);
}

.chat .message img {
	border-radius: 50%;
	width: 40px;
	height: 40px;
}

.chat .message.sent * {
	justify-content: left;
}

.chat .message.received * {
	justify-content: right;
}

.chat .message.sent img {
	margin-right: 20px;
}

.chat .message.received img {
	margin-left: 20px;
}

.chat .message .text {
	border-radius: 15px;
	color: #fff;
	padding: 20px;
	position: relative;
}

.chat .message.sent .text {
	color: var(--black);
}

.chat .message.received .text {
	background: var(--orange-main);
}

.chat .message .text:before {
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	top: 0px;
}

.chat .message.received .text:before {
	border-left: 15px solid var(--orange-main);
	border-right: 15px solid transparent;
	border-top: 15px solid var(--orange-main);
	border-bottom: 15px solid transparent;
	right: -16px;
}

.chat .message.sent .text:before {
	border-left: 15px solid transparent;
	border-bottom: 15px solid transparent;
	left: -16px;
}

/* Badge */

.badge {
	vertical-align: middle;
	padding: 3px 10px;
	margin-left: 5px;
	background-color: var(--orange-main);
	color: var(--white);
	letter-spacing: -0px;
}

:not(h1, h2, h3, h4, h5, h6) > .badge:first-child {
	margin-left: 0px;
}

.badge.small {
	font-size: .5em;
}

/* Offcanvas, Toast & Modal */

.offcanvas, .toast {
	border: none !important;
	background-color: transparent;
	color: #ffffff;
}

.offcanvas {
	z-index: 1100;
}

.toast-container {
	z-index: 900;
	padding: 110px 5px 5px 5px;
}

.offcanvas.offcanvas-start, .offcanvas.offcanvas-end {
	/*margin-top: 50px;*/
	margin-top: 35px;
}

.offcanvas .btn-close, .toast .btn-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z'/%3E%3C/svg%3E");
	background-size: cover;
	opacity: 0.9;
}

.offcanvas .btn-close:hover, .toast .btn-close:hover {
	opacity: 1;
}

.offcanvas#kontakt .btn-close, .offcanvas#chat .btn-close {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='%23ffffff' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z'/%3E%3C/svg%3E");
}

.offcanvas .offcanvas-header, .toast .toast-header {
	background-color: var(--orange-main);
	color: var(--white);
}

.offcanvas .offcanvas-body, .toast .toast-body, .modal-content {
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.offcanvas.offcanvas-start .offcanvas-header, .offcanvas.offcanvas-start .offcanvas-body {
	box-shadow: 10px 10px 30px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 10px 10px 30px 5px rgba(0,0,0,0.25);
	/*border-right: 1px solid #ffffff50;*/
}

.offcanvas.offcanvas-start .offcanvas-header {
	border-top-right-radius: 25px;
}

.offcanvas.offcanvas-start .offcanvas-body {
	border-bottom-right-radius: 25px;
}

.offcanvas.offcanvas-end .offcanvas-header, .offcanvas.offcanvas-end .offcanvas-body {
	box-shadow: -10px 10px 30px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: -10px 10px 30px 5px rgba(0,0,0,0.25);
	/*border-left: 1px solid #ffffff50;*/
}

.offcanvas.offcanvas-end .offcanvas-header {
	border-top-left-radius: 25px;
}

.offcanvas.offcanvas-end .offcanvas-body{
	border-bottom-left-radius: 25px;
}

.offcanvas.offcanvas-top .offcanvas-header, .offcanvas.offcanvas-top .offcanvas-body, .toast .toast-header, .toast .toast-body {
	box-shadow: 0px 10px 30px 5px rgba(0,0,0,0.25);
	-webkit-box-shadow: 0px 10px 30px 5px rgba(0,0,0,0.25);
	/*border-bottom: 1px solid #ffffff50;*/
}

.offcanvas.offcanvas-top .offcanvas-body, .toast .toast-body {
	border-bottom-left-radius: 25px;
	border-bottom-right-radius: 25px;
}

.offcanvas.offcanvas-bottom .offcanvas-header, .offcanvas.offcanvas-bottom .offcanvas-body {
	/*border-top: 1px solid #ffffff50;*/
}

.offcanvas.offcanvas-bottom .offcanvas-header {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

offcanvas.offcanvas-bottom .offcanvas-header, .toast .toast-header {
	border-top-left-radius: 25px;
	border-top-right-radius: 25px;
}

.offcanvas section, .offcanvas .row {
	/* Hintergründe und Ränder von Sections werden innherhalb Offcanvas nicht berücksichtigt */
	background-color: transparent !important;
	border: none !important;
	padding: 0;
}

.offcanvas .row > * {
	/* Innerhalb Offcanvas werden alle Spalten in voller Breite angezeigt */
	flex: 0 0 auto;
	width: 100%;
	margin: 0;
}

.offcanvas .row img {
	/* Innerhalb Offcanvas werden Bilder kleiner angezeigt */
	width: 50%;
	margin-left: auto;
	margin-right: auto;
	display: flex
}

.toast .toast-header {
	border-bottom: none;
}

.toast .toast-header .btn-close {
	margin-right: inherit;
}

.modal-content {
	border: 1px solid var(--grey-main);
}

.modal-header h4 {
	color: var(--orange-main);
}

.modal-footer {
	border-top: none;
}

/* Timeline */

ul.timeline {
	border-left: 10px solid var(--orange-main);
	position: relative;
	list-style: none;
	margin-left: 20px;
}

	ul.timeline h2 {
		font-family: "secondary";
		line-height: 1.0;
		letter-spacing: -1px;
		font-weight: 800;
		color: var(--orange-main) !important;
	}

	ul.timeline .item {
		position: relative;
		margin-bottom: 50px;
	}

	ul.timeline img {
		border-top-right-radius: 25px;
	}

	ul.timeline .item:after {
		position: absolute;
		display: block;
		top: 0;
	}

	ul.timeline i {
		position: absolute;
		left: -61px;
		border-radius: 50%;
		height: 50px;
		width: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0px;
		font-size: 24px
	}

/* Accordion */

.accordion-item {
	background-color: transparent;
	border-color: var(--orange-main);
}

.accordion-button {
	box-shadow: none !important;
}

	.accordion-button:not(.collapsed) {
		background-color: var(--orange-main);
		color: var(--white);
	}

	.accordion-button.collapsed {
		background-color: transparent;
	}

	.accordion-button::after {
		display: none;
	}

/* Breadcrumb */

section.intro .breadcrumb-item, section.intro .breadcrumb-item a {
	color: var(--white) !important;
}

/*section:not(.intro) ol.breadcrumb {
	justify-content: flex-start !important;
}*/

.breadcrumb-item + .breadcrumb-item::before {
	color: var(--grey-bright-60);
}

.breadcrumb-item + .breadcrumb-item::before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 700;
	/*content: "\f32b" !important;*/
	content: "\f0da" !important;
}

/* Footer */

footer {
	color: #ffffff;
}

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

	footer a {
		color: #ffffff;
	}

	footer a {
		display: block;
	}