/* ysabeau-office-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 500;
  src: url('../vendor/fonts/ysabeau-office-v2-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ysabeau-office-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 600;
  src: url('../vendor/fonts/ysabeau-office-v2-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* ysabeau-office-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 700;
  src: url('../vendor/fonts/ysabeau-office-v2-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-office-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ysabeau Office';
  font-style: italic;
  font-weight: 400;
  src: url('../vendor/fonts/ysabeau-office-v2-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ysabeau-office-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Ysabeau Office';
  font-style: normal;
  font-weight: 400;
  src: url('../vendor/fonts/ysabeau-office-v2-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
/*	--color-primary: rgb(104, 129, 59, 1);*/
	--color-primary-rgb: 104, 129, 59;

	--color-primary-bright-rgb: 240, 248, 234;
	--color-primary-bright-subtle-rgb: 215, 228, 206;

	--color-primary-darker-rgb: 96, 120, 55;

	--color-secondary-rgb: 240, 248, 234;

	--color-tertiary-rgb: 251, 255, 247;

	--color-quartiary-rgb: 197, 216, 166;
	--color-danger-rgb: 255, 77, 103;

	--color-gradient-primary-start-rgb: 197, 216, 166;
	--color-gradient-primary-end-rgb: 240, 248, 234;

	--color-default-rgb: 33, 37, 41;

	--br-big: 40px;
	--br-big: clamp(20px, 2.5dvw, 40px);
	--br-main: 30px;
	--br-main: clamp(15px, 1.8dvw, 30px);
	--br-small: 20px;
	--br-small: clamp(10px, 1.2dvw, 20px);

	--p-big: 40px;
	--p-big: clamp(20px, 2.5dvw, 40px);
	--p-main: 20px;
	--p-main: clamp(10px, 1.2dvw, 20px);

	--fs-main: 24px;
	--fs-nav: 21px;
	--fs-nav: clamp(18px, calc(var(--fs-main) * .87), 21px);
	--fs-small: calc(var(--fs-main) * (2 / 3));
	--fs-big: calc(var(--fs-main) * (4 / 3) - 2px);
	--fs-btn: 26px;

	--fs-h1: calc(var(--fs-main) * 2.2);
	--fs-h2: calc(var(--fs-main) * 2);
	--fs-h3: calc(var(--fs-main) * 1.8);

	--bs-big-right: 0px 4px var(--p-big) 0px rgba(0, 0, 0, 0.25);
	--bs-big-bottom: -4px 0px var(--p-big) 0px rgba(0, 0, 0, 0.25);
	--bs-big-left: 0px -4px var(--p-big) 0px rgba(0, 0, 0, 0.25);

	--p-btn-x: 30px;
	--p-btn-x: clamp(15px, 1.8dvw, 30px);
	--p-btn-y: 10px;
	--p-btn-y: clamp(6px, .65dvw, 10px);

	/* bs overwrites */

	--bs-border-radius: var(--br-main);
	--bs-primary-rgb: var(--color-primary-rgb);
}

html {
	background: rgb(--color-gradient-primary-start-rgb);
	font-size: var(--fs-main);
}

body {
	background: linear-gradient(to bottom, rgb(var(--color-gradient-primary-start-rgb)), rgb(var(--color-gradient-primary-end-rgb))) no-repeat center top;
	background-size: 100% 80vh;
	background-color: rgba(var(--color-primary-bright-rgb), 1);
	font-family: 'Ysabeau Office';
	min-height: 100dvh;
}

body, 
p {
	font-size: var(--fs-main);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto;
	font-smooth: always;
	color: rgb(var(--color-default-rgb));
	line-height: 1.5;
}

p {
	margin-bottom: var(--p-main);
}

/* typography */

h1,
.h1 {
	line-height: 1.2;
	font-weight: 600;
	font-size: var(--fs-h1);
	margin-bottom: var(--p-main);
	color: rgb(var(--color-primary-rgb));
}

h2,
.h2 {
	line-height: 1.2;
	font-weight: 600;
	font-size: var(--fs-h2);
	margin-bottom: var(--p-main);
	color: rgb(var(--color-primary-rgb));
}

h3,
.h3 {
	line-height: 1.2;
	font-weight: 600;
	font-size: var(--fs-h3);
	margin-bottom: var(--p-main);
	color: rgb(var(--color-primary-rgb));
}

.t-p {
	font-size: var(--fs-main);
	margin-bottom: var(--p-main);
	color: rgb(var(--color-default-rgb));
	font-weight: 500;
}

.fs-small {
	font-size: var(--fs-small) !important;
}

.fs-main {
	font-size: var(--fs-main) !important;
}

.fs-big,
.lead {
	font-size: var(--fs-big) !important;
}

.fs-btn {
	font-size: var(--fs-btn) !important;
}

.list-unstyled {
	display: flex;
	flex-direction: column;
	gap: var(--p-main);
}

.list-pill {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: var(--p-main);
}

.list-pill > * {
	color: white;
	background: rgb(var(--color-primary-darker-rgb));
	border-radius: var(--br-small);
	padding: var(--p-btn-y) calc(var(--p-btn-x) * .7);
	line-height: 1.25;
}

.tel, 
.fax,
.mail {
	font-weight: bold;
	color: rgb(var(--color-default-rgb));
	text-decoration: none;
}

/* navigation */

#navbar-wrapper {
	background: rgba(var(--color-primary-bright-rgb), .9);
	border-radius: var(--br-main);
	padding: calc(var(--p-main) - 5px) calc(var(--p-main) - 5px) calc(var(--p-main) - 5px) calc(var(--p-main) + 5px);
}

#navbar-wrapper + * {
	margin-top: var(--p-main);
}

#navbar-wrapper .navbar-nav {
	gap: 10px;
}

.nav-fachbereiche {
	display: none;
	position: absolute;
	width: calc(100% + (calc(var(--p-main) * 2)));
	left: calc((var(--p-main) + 5px) * -1);
	right: calc((var(--p-main) - 5px) * -1);
	top: calc(100% - 5px);
	z-index: 5;
}

.nav-fachbereiche .fachbereiche-inner {
	border-radius: var(--br-main);
	padding: var(--p-main);
	background: rgb(var(--color-tertiary-rgb));
	margin-top: var(--p-main);
}

.nav-fachbereiche .fachbereich-wrapper {
	flex: 0 0 auto;
	width: calc((100% - (3 * 20px)) / 4);
}

.nav-fachbereiche .fachbereich {
	background: rgb(var(--color-primary-rgb));
	border-radius: var(--br-small);
	overflow: hidden;
	text-align: center;
}

.nav-fachbereiche .fachbereich a {
	text-align: center;
	order: 1;
	transition: opacity 120ms;
	display: block;
}

.nav-fachbereiche .fachbereich a:hover {
	opacity: .7;
}

.nav-fachbereiche .fachbereich-img {
	border-bottom-left-radius: var(--br-small);
	border-bottom-right-radius: var(--br-small);
	margin-bottom: 10px;
}

.nav-fachbereiche .fachbereich-logo {

}

.nav-item:hover .nav-fachbereiche {
	display: block;
}

.nav-item {
	padding: 0;
	margin: 0;
}

.nav-item .nav-link {
	border-radius: var(--br-small);
	padding: calc(var(--p-main) * .7) var(--p-main) !important;
	font-size: var(--fs-nav);
	text-transform: uppercase;
	color: rgba(var(--color-primary-rgb), 1);
	font-weight: 600;
	position: relative;
	cursor: pointer;
}

.nav-item:hover > .nav-link {
	background: rgb(var(--color-tertiary-rgb));
}

#navbarSupportedContent {
	margin-right: calc(var(--p-main) * 3);
}

.nav-link .indicator {
	position: absolute;
	background: rgb(var(--color-danger-rgb));
	color: white;
	padding: 2px 4px;
	font-size: var(--fs-small);
	border-radius: 6px;
	line-height: 1;
	transform: translateY(-50%);
	right: 0;
}

/* header */

#header {
	padding: var(--p-main) 0;
	padding-bottom: calc(var(--p-main) * 3);
}

/* main */

#main {
	display: block;
	padding: 0;
	margin-bottom: calc(var(--p-main) * 3);
}

/* footer */

#footer {
	display: block;
	margin: 0;
	background: rgb(var(--color-primary-rgb));
	padding: var(--p-big) var(--p-big) var(--p-main) var(--p-big);
	border-top-left-radius: var(--br-main);
	border-top-right-radius: var(--br-main);
}

#footer,
#footer a,
#footer p {
	color: white;
}

.footer-bottom,
.footer-bottom * {
	font-size: var(--fs-small);
}

#footer a {
	text-decoration: none;
	transition: all 120ms;
	opacity: 1;
}

#footer a:hover,
#footer :has(> .stretched-link):hover {
	opacity: .75;
}

/* grid */

@media (min-width: 1500px) {
	.container {
		max-width: calc(100dvw - 180px);
	}
}

@media (min-width: 1800px) {
	.container {
		max-width: 1620px;
	}
}

.row {
	--bs-gutter-x: var(--p-big);
}

.g-1, .gx-1 {
	--bs-gutter-x: var(--p-main) !important;
}

.p {
	padding: var(--p-main) !important;
}

.p-x {
	padding-left: var(--p-main) !important;
	padding-right: var(--p-main) !important;
}

.p-y {
	padding-top: var(--p-main) !important;
	padding-bottom: var(--p-main) !important;
}

.p-x-big {
	padding-left: var(--p-big) !important;
	padding-right: var(--p-big) !important;
}

.p-x-jumbo {
	padding-left: calc(var(--p-big) * 2) !important;
	padding-right: calc(var(--p-big) * 2) !important;
}

.pe-big {
	padding-right: var(--p-big) !important;
}

.pe {
	padding-right: var(--p-main) !important;
}

.pe-main {
	padding-right: var(--p-main) !important;
}

.ps-big {
	padding-left: var(--p-big) !important;
}

.me-n {
	margin-right: calc((var(--p-main) - 0px) * -1) !important;
}

.me-n-big {
	margin-right: calc((var(--p-big) - 0px) * -1) !important;
}

.ms-n {
	margin-left: calc((var(--p-main) - 0px) * -1) !important;
}

.me-1 {
	margin-right: var(--p-main) !important;
}

.ms-n-big {
	margin-left: calc((var(--p-big) - 0px) * -1) !important;
}

.g-0, .gx-0 {
  --bs-gutter-x: 0 !important;
}

.gap-1 {
	gap: var(--p-main) !important;
}

.gap-2 {
	gap: calc(var(--p-main) * 2) !important;
}

.gap-3 {
	gap: calc(var(--p-main) * 3) !important;
}

.mt-1 {
	margin-top: var(--p-main) !important;
}

.mt-2 {
	margin-top: calc(var(--p-main) * 2) !important;
}

.mb-1 {
	margin-bottom: var(--p-main) !important;
}

.mb-2 {
	margin-bottom: calc(var(--p-main) * 2) !important;
}

.mb-3 {
	margin-bottom: calc(var(--p-main) * 3) !important;
}

.rounded-big {
	border-radius: var(--br-big) !important;
}

.rounded-small {
	border-radius: var(--br-small) !important;
}

.w-fit {
	width: fit-content;
}

/* backgrounds, colors */

.bg-primary-darker {
	background: rgb(var(--color-primary-darker-rgb)) !important;
}

.bg-primary-bright-subtle {
	background: rgb(var(--color-primary-bright-subtle-rgb)) !important;
}

.bg-primary-bright {
	background: rgb(var(--color-primary-bright-rgb)) !important;
}

.bg-tertiary {
	background: rgb(var(--color-tertiary-rgb)) !important;
}

.bg-quartiary {
	background: rgb(var(--color-quartiary-rgb)) !important;
}

.bg-danger {
	background: rgb(var(--color-danger-rgb)) !important;
}

/* misc */

.bs-right {
	box-shadow: var(--bs-big-right);
}

.bs-bottom {
	box-shadow: var(--bs-big-bottom);
}

.bs-left {
	box-shadow: var(--bs-big-left);
}


/* buttons */

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: rgb(var(--color-primary-rgb));
  --bs-btn-border-color: rgb(var(--color-primary-rgb));
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: rgb(var(--color-gradient-primary-start-rgb));
  --bs-btn-hover-border-color: rgb(var(--color-primary-rgb));
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: rgb(var(--color-primary-rgb));
  --bs-btn-active-border-color: rgb(var(--color-primary-rgb));
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: rgb(var(--color-primary-rgb));
  --bs-btn-disabled-border-color: rgb(var(--color-primary-rgb));
}

.btn {
	--bs-btn-font-size: var(--fs-main);
	--bs-btn-padding-x: var(--p-btn-x);
  --bs-btn-padding-y: var(--p-btn-y);

	border: 0;
	border-radius: var(--br-small);
	font-weight: 600;
	font-size: var(--fs-btn);
	line-height: 1.3;
}

.btn-tertiary {
	background: rgb(var(--color-tertiary-rgb));
	color: rgb(var(--color-primary-rgb));
}

.btn-tertiary:hover {
	background: rgb(var(--color-tertiary-rgb));
	color: rgb(var(--color-primary-rgb));
}

.btn-primary-darker {
	background: rgb(var(--color-primary-darker-rgb));
	color: white;
}

.btn-primary-darker:hover {
	background: rgb(var(--color-primary-darker-rgb));
	color: white;
}

.btn-white {
	background: white;
	color: rgb(var(--color-primary-rgb));
}

.btn-white:hover {
	background: rgba(255, 255, 255, .8);
	color: rgb(var(--color-primary-rgb));
}

.btn-group .btn {
	position: relative;
	padding: calc(var(--p-btn-y) * 1.1)  calc(var(--p-btn-y) * 1.1);
}

.btn-group .btn:after {
	content: "";
	display: block;
	height: 100%;
	width: 1px;
	background: rgb(var(--color-secondary-rgb));
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	opacity: .2;
}

.btn-group .btn:last-child:after {
	display: none;
}

.btn-group > .btn-group:not(:first-child), 
.btn-group > :not(.btn-check:first-child) + .btn {
	margin-left: 0;
}

/* cards */

.card {
	--bs-card-spacer-y: var(--p-big);
	--bs-card-spacer-x: var(--p-big);
	border: 0;
	overflow: hidden;
	border-radius: var(--br-main);
}

.card-body.narrow {
	padding: calc(var(--bs-card-spacer-y) * .5) calc(var(--bs-card-spacer-x) * .5);
}

.card-body.big {
	padding: calc(var(--bs-card-spacer-y) * 2) calc(var(--bs-card-spacer-x) * 2);
}

/*.card-wrapper .card {
	overflow: hidden;
	border-radius: var(--br);
	height: 100%;
}*/

.card-wrapper .card .card-body {
	display: flex;
	align-items: end;
}

.card-wrapper .card .card-header {
	position: relative;
	border: 0;
	background: none;
	padding: calc(var(--p-big) * 1) 0 10px calc(var(--p-big) * .5);
	display: flex;
  width: 100%;
  justify-content: end;
  align-items: end;
  align-items: self-end;
  gap: 18px;
}

.card-wrapper .card .card-header:after {
	content: "";
	display: inline-block;
	height: calc(100% + 2px);
	width: 26px;
	background: rgb(var(--color-primary-rgb));
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	transform: translateY(1px);
}

.card .card-counter {
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: .95;
}

.card-wrapper picture,
.card-wrapper img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.card-wrapper .entry-1 {
	order: 1;
}

.card-wrapper .entry-2 {
	order: 2;
}

.card-wrapper .entry-3 {
	order: 3;
}

.card-wrapper .entry-4 {
	order: 4;
}

.card-wrapper .entry-5 {
	order: 5;
}

.card-wrapper .entry-6 {
	order: 6;
}

.card-wrapper .entry-7 {
	order: 7;
}

.card-wrapper .entry-8 {
	order: 8;
}

.card-wrapper .entry-9 {
	order: 9;
}

/* team quotes */

blockquote,
blockquote p {
	font-size: var(--fs-big) !important;
	line-height: 1.33;
}

blockquote p {
	font-style: italic;
}

blockquote footer {
	font-size: var(--fs-main);
}

blockquote .meta-wrapper {
	display: flex;
	gap: 30px;
}

blockquote .meta-col {
	flex-shrink: 1;
	flex-grow: 0;
	flex-basis: auto;
}

blockquote .avatar-col {
	flex-shrink: 0;
	flex-grow: 0;
	flex-basis: auto;
}

blockquote .avatar-col img {
	margin-top: 10px;
	width: 180px;
	max-width: 100%;
}

.quote-tags {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.quote-tags > * {
	display: inline-block;
	box-shadow: 0 0 0 1px white inset;
	border-radius: 8px;
	font-size: calc(var(--fs-small) + 2px);
	padding: 3px 12px;
	white-space: nowrap;
	margin: 0;
}

.quote-tags > * {
	box-shadow: 0 0 0 1px rgb(var(--color-default-rgb)) inset;
}

/* media queries */

@media (max-width: 1577px) {
	:root {
		--fs-main: 22px;
		--fs-main: clamp(16px, 1.65dvw, 22px);
		--fs-btn: calc(var(--fs-main) + 2px);
	}
}

@media (max-width: 1399px) {
	h1,
	.h1,
	h2,
	.h2,
	h3,
	.h3 {
		hyphens: auto;
	}
	
}

@media (max-width: 1199px) {
	#navbar-wrapper {
    padding: calc(var(--p-main) - 2px) calc(var(--p-main) - 2px) calc(var(--p-main) - 2px) calc(var(--p-main) + 2px);
	}

	.nav-fachbereiche {
		width: calc(100% + (calc(var(--p-main) * 2)));
    left: calc((var(--p-main) + 2px) * -1);
    right: calc((var(--p-main) - 2px) * -1);
	}

	#navbar-wrapper .navbar-nav {
		gap: clamp(3px, .66dvw, 10px);
	}

	.nav-item .nav-link {
		padding: calc(var(--p-main) * .7) calc(var(--p-main) * .7) !important
	}

	.navbar-brand img {
		max-width: 25dvw;
	}
}

@media (max-width: 991px) {
	:root {
		--fs-small: clamp(14px, 2dvw, calc(var(--fs-main) * (2 / 3)));
	}

	.navbar {
		--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28104, 129, 59, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	.navbar-toggler {
		padding: calc(var(--p-btn-y) * 1.1) calc(var(--p-btn-y) * 1.1);
		border-radius: var(--br-small);
		border: none;
		box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb)) inset;
		opacity: .7;
	}

	.navbar-toggler:hover {
		opacity: 1;
	}

	.navbar-toggler:focus {
		box-shadow: 0 0 0 2px rgb(var(--color-primary-rgb)) inset;
	}

	.navbar-inner {
		flex-wrap: wrap;
	}

	#navbarSupportedContent {
		order: 10;
		width: 100%;
		margin: 0;
		flex: 1 0 100%;
	}

	#navbar-wrapper .navbar-nav {
		text-align: center;
		margin: 15px auto 0;
		padding-top: 10px !important;
		border-top: solid 1px rgb(var(--color-primary-bright-subtle-rgb));
	}

	#navbar-wrapper .navbar-nav > li {
		text-align: center;
	}

	.nav-item .nav-link {
		margin: 0 auto;
    width: fit-content;
  }

  .nav-link .indicator {
  	right: -9px;
  	top: 7px;
  }

  .nav-item .nav-link {
    padding: calc(var(--p-main) * .2) calc(var(--p-main) * .5) !important;
	}

	.nav-fachbereiche {
		display: none !important;
	}

	.quote-tags > * {
		white-space: normal;
	}

	#footer .logo-nav {
		margin-top: calc(var(--p-main) * 2) !important;
		flex-direction: row;
	}

	#footer .logo-nav > * {
		flex: 0 0 auto;
		width: 18%;
	}

	#footer .logo-nav > * a {
		display: block;
		width: 100%;
	}

	#footer .logo {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 767px) {
	.img-card .img-col img {
		height: auto !important;
	}

	.img-card .text-col .card-body {
		margin: 0 !important;
	}

	.img-card .text-col .logo {
		max-width: 30dvw;
	}

	.img-card:has(.profile-img) .img-col {
		order: 1 !important;
	}

	.img-card:has(.profile-img) .text-col {
		order: 2 !important;
	}

	.profile-img {
		max-height: 350px;
		object-position: 50% 15%;
	}

	#footer .logo-nav {
		margin-top: calc(var(--p-main) * 3) !important;
		flex-direction: column;
		gap: 30px !important;
	}

	#footer .logo-nav > * {
		display: block;
		width: auto;
	}

	#footer .logo-nav > * a {
		display: block;
		width: 100%;
	}

	#footer .logo {
		width: 100%;
		max-width: 20dvw;
	}
}

@media (max-width: 675px) {
	.navbar-brand img {
		margin-top: 2px;
		max-width: 38dvw;
	}

	#footer .logo {
		width: 100%;
		max-width: 30dvw;
	}
}

@media (max-width: 509px) {
	.navbar-brand img {
		margin-top: 2px;
		max-width: 42dvw;
	}

	#footer .logo {
		max-width: 22dvw;
	}
}

@media (max-width: 457px) {
	#footer .footer-row > * {
		width: 100% !important;
	}

	#footer .logo-nav > * a {
		text-align: center;
	}

	#footer .logo {
		max-width: 39dvw;
	}
}