 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Bold.ttf');
 	font-weight: 700;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Bold_Italic.ttf');
 	font-weight: 700;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_ExtraBold.ttf');
 	font-weight: 800;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_ExtraBold_Italic.ttf');
 	font-weight: 800;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Italic.ttf');
 	font-weight: 500;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Light.ttf');
 	font-weight: 300;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Light_Italic.ttf');
 	font-weight: 300;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Medium_Italic.ttf');
 	font-weight: 500;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Regular.ttf');
 	font-weight: 400;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_SemiBold_Italic.ttf');
 	font-weight: 600;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Black.ttf');
 	font-weight: 900;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Black_Italic.ttf');
 	font-weight: 900;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_ExtraLight.ttf');
 	font-weight: 200;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_ExtraLight_Italic.ttf');
 	font-weight: 200;
 	font-style: italic;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Medium.ttf');
 	font-weight: 500;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_SemiBold.ttf');
 	font-weight: 600;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Thin.ttf');
 	font-weight: 100;
 	font-style: normal;
 }

 @font-face {
 	font-family: 'Poppins';
 	src: url('../fonts/Poppins_Thin_Italic.ttf');
 	font-weight: 100;
 	font-style: italic;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	/* breaks and hyphens in long headings, especially on mobile */
 	/*word-break: break-word;*/
 	overflow-wrap: break-word;
	word-wrap: break-word;
 	hyphens: auto;
	-webkit-hyphens: auto; /* for Chrome & Safari */
    -ms-hyphens: auto; /* for older IE */
 }

 h1 {
 	/*display: inline;*/
 	display: inline-block;
	max-width: 100%;
 	background-color: rgba(0, 193, 212, 0.15);
 	box-sizing: border-box;
 	color: #006a81;
 	font-family: "Poppins", "Times New Roman", Times, serif;
 	font-size: 40px;
 	font-weight: 400;
 	letter-spacing: normal;
 	line-height: 66px;
 	text-decoration-line: underline;
 	text-decoration-color: rgb(0, 106, 129);
 	text-decoration-style: solid;
 	text-decoration-thickness: auto;
 	margin: 1.2em 0 0.6em;
 }

 h2 {
 	box-sizing: border-box;
 	color: #005e73;
 	font-family: "Poppins", "Times New Roman", Times, serif;
 	font-size: 40px;
 	font-weight: 400;
 	letter-spacing: normal;
 	line-height: 56px;
 	margin: 1em 0 0.5em;

 }

 h3 {
 	box-sizing: border-box;
 	color: rgb(72, 72, 72);
 	font-family: "Poppins", "Times New Roman", Times, serif;
 	font-size: 21.06px;
 	line-height: 32.65px;
 	margin: 0.8em 0 0.4em;
 }

 h4,
 h5,
 h6 {
 	box-sizing: border-box;
 	color: rgb(72, 72, 72);
 	font-family: "Poppins", "Times New Roman", Times, serif;
 	font-size: 18px;
 	line-height: 27.9px;
 	margin: 0.6em 0 0.3em;
 }

 h5 {
 	color: rgb(0, 94, 115);
 }


 p,
 div {
 	font-family: "Poppins", "Times New Roman", Times, serif;
 	color: #484848;
 	/*margin-bottom: 1em;*/
 	margin-top: 0;
 }

 p {
 	margin-bottom: 1em;
 }

 /* unvisited link */
 a:link {
 	color: #009eac;
 	text-decoration: none;
 }

 /* mouse over link */
 a:hover {
 	color: #009eac;
 }

 /* selected link */
 a:active {
 	color: #009eac;
 }

 /* visited link */
 a:visited {
 	color: #009eac;
 }

 /* diagonal arrow after external links */
 a[href]:not(:where(

 		/* exclude hash only links */
 		[href^="#"],
 		/* exclude javascript only links */
 		[href^="javascript:" i],
 		/* exclude relative but not double slash only links */
 		[href^="/"]:not([href^="//"]),
 		/* domains to exclude */
 		[href*="//dual.tuhh.de"],
 	)):after {
 	content: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8%0A' fill='%23009eac' viewBox='-488 -488 1000 1000'%3E%3Cpath d='M428.668 512c-46.062 0-83.336-37.273-83.336-83.332v-632.164l-691.078 691.082c-32.555 32.551-85.289 32.551-117.84 0s-32.551-85.285 0-117.84l691.082-691.078h-632.164c-46.02 0-83.332-37.312-83.332-83.336 0-46.02 37.312-83.332 83.332-83.332h833.336C474.727-488 512-450.688 512-404.668v833.336C512 474.727 474.727 512 428.668 512z'%3E%3C/path%3E%3C/svg%3E");
 	position: relative;
 	font-size: 8px;
 	width: 8px;
 	top: -2px;
 	margin-left: 4px;

 }


 /*button,*/
 a.button {
 	color: #fff;
 	background-color: #006a81;
 	display: block;
 	box-sizing: border-box;
 	box-shadow: none;
 	font-size: 13px;
 	line-height: 1.38;
 	outline: 0 none;
 	padding: 11px 21px;
 	text-decoration: none;
 	font-weight: 700;
 	text-align: center;
 	text-transform: uppercase;
 	letter-spacing: 2px;
 	border: 1px solid transparent;
 	transition: .25s all ease;
 	max-width: 325px;
 }

 /*button:hover,*/
 a.button:hover {
 	border-color: #006a81;
 	background-color: #fff;
 	color: #006a81;
 }

 /* Strich nach dem eigentlichen Buttontext */
 /*button::after,*/
 a.button::after {
 	content: '';
 	display: inline-block;
 	vertical-align: middle;
 	margin-left: 7px;
 	width: 40px;
 	height: 1px;
 	background-color: currentColor;
 	box-sizing: border-box;
 }

 /* Table */
 table {
 	display: block;
 	max-width: 100%;
 	margin: 0 auto;
 	overflow-x: auto;
 	white-space: nowrap;
 	border: none;
 }

 th,
 td {
 	padding: 8px;
 }

 th {
 	font-weight: bold;
 	color: #006a81;
 	border: 1px solid #009eac;
 }

 td {
 	border: 1px dashed #009eac;
 }

 #sp-main-body {
 	/*Adjust padding at the top and bottom of the main body*/
 	padding-top: 40px;
 	padding-bottom: 40px;
 }

 /*footer background independent of Helix settings/presets*/
 #sp-footer {
 	background-color: #006a81;
 }

 /*Text in Footer always white*/
 #sp-footer,
 #sp-footer * {
 	color: white !important;
 }

 /* BEGIN Override styles for the accordion component */

 /* Remove rounded corners */
 [data-rlta-element=button],
 [data-rlta-element=panel] {
 	border-radius: 0 !important;
 }

 /* Change border and lines color */
 [data-rlta-element=button] {
 	border: 1px solid #009eac !important;
 	position: relative;
 	/* Ensure proper positioning for the ::after element */
 }

 /* When the accordion is opened, make the bottom border of the button dashed */
 [data-rlta-element=button][data-rlta-state="open"] {
 	border-bottom: 1px dashed #009eac !important;
 }

 /* Change the background color for the title to white */
 [data-rlta-element=button] {
 	background-color: white !important;
 	color: black !important;
 	/* Ensure text visibility */
 	padding-right: 2rem;
 	/* Make space for the SVG */
 }

 /* Add an SVG arrow */
 [data-rlta-element=button][data-rlta-state="closed"]::after,
 [data-rlta-element=button][data-rlta-state="open"]::after {
 	content: "";
 	display: inline-block;
 	width: 24px;
 	height: 24px;
 	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%2324B6CE" d="M12 16a.997.997 0 01-.707-.293l-6-6a.999.999 0 111.414-1.414L12 13.586l5.293-5.293a.999.999 0 111.414 1.414l-6 6A.997.997 0 0112 16z"/></svg>');
 	background-repeat: no-repeat;
 	background-position: center;
 	background-size: contain;
 	position: absolute;
 	right: 1rem;
 	top: 50%;
 	transform: translateY(-50%);
 }

 /* Rotate the SVG when the accordion is open */
 [data-rlta-element=button][data-rlta-state="open"]::after {
 	transform: translateY(-50%) rotate(180deg);
 }

 /* Remove the background color for the content */
 [data-rlta-element=panel] {
 	background-color: transparent !important;
 	border: 1px solid #009eac !important;
 }

 /* When opening: animate slide down 
 [data-rlta-element=button][data-rlta-state="open"]+[data-rlta-element=panel] {
 	animation: slideDown 0.8s ease-in-out forwards;
 }

  Keyframes for sliding down (open)
 @keyframes slideDown {
 	from {
 		max-height: 0;
 		opacity: 0;
 	}

 	to {
 		max-height: 100000px;
 		 TODO Adjust as needed
 		opacity: 1;
 	}
 }
 */

 /* TODO Closing Animation for accordion elements...  */
 /* END Override styles for the accordion component */


 /* BEGIN (Main-)Menu & Header Styling. Not valid for mobile menu */

 .sp-dropdown-mega {
 	width: 100vw !important;
 	position: fixed !important;
 	top: 96px !important;
 	/* Set this to header size  */
 	left: 0 !important;

 	box-sizing: border-box;
 	/*
	
	padding-left: 25%;
	padding-right: 25%;
	*/

 	border-bottom-style: solid;
 	border-bottom-width: 1px;
 	border-bottom-color: #009eac;
 	/*
	border-top-style: solid;
 	border-top-width: 1px;
 	border-top-color: #009eac;
	*/

 	background-color: white;
 	/*
    left: 0 !important;
    right: 0 !important;
	
	*/
 }

 .sp-dropdown-inner {
 	margin: auto;
 	/*center this element*/
 	max-width: 1300px;
 	/* Set the same as Container Max Width */
 	box-shadow: none !important;
 	/* Commented out for dev purposes to see where the box ends...*/
 }


 .sp-menu-item>a {
 	color: #005e73 !important;
 }

 .sp-megamenu-parent>.sp-menu-item>a {
 	text-transform: uppercase !important;
 }

 /*Top Level Menu Items*/
 .sp-menu-item>a,
 .menu_item>a {
 	text-transform: none !important;
 	font-size: 13px;
 	font-weight: 600;
 	/*TUHH-Value: 700*/
 }


 /*Active Menu Element*/
 .sp-megamenu-parent>li.active {
 	box-shadow: inset 0px -4px 0px #009eac;
 	text-transform: none !important;
 	font-size: 13px;
 	font-weight: 600;
 	/*TUHH-Value: 700*/
 	/*TODO: active element appear to have a different font weight compared to inactive item*/
 }


 #sp-header {
 	box-shadow: none !important;
 	border-bottom-style: solid;
 	border-bottom-width: 1px;
 	border-bottom-color: #009eac;
 	min-height: max-content;
	height: auto;
    display: block;
    overflow: visible;
 }
 
 #sp-logo {
 	border-right-style: solid;
 	border-right-width: 1px;
 	border-right-color: #009eac;
 	/*same padding as #sp-menu:padding-left*/
 	padding-right: 30px !important;
 }

 #sp-menu {
 	/*same padding as #sp-logo:padding-right*/
 	padding-left: 30px !important;
 }

 .sp-dropdown {
 	border-top-style: solid;
 	border-top-width: 1px;
 	border-top-color: #009eac;
 }

 a.subnav-link3 {
 	/*Workaround, third-level menu items need to manually get Link Type -> Link Class -> subnav-link3*/
 	padding-left: 20px !important;
 }

 .sp-megamenu-parent li.sp-has-child:hover>.sp-dropdown {
 	display: none !important;
 	/* ensures hover won’t trigger dropdown */
 }

 .sp-megamenu-parent li.sp-menu-item.sp-has-child.open>.sp-dropdown {
 	display: block !important;
 	/* force it to override any remaining CSS */
 }

 /* END (Main-)Menu & Header Styling. Not valid for mobile menu */

 /* BEGIN Mobile Menu */

 .offcanvas-menu {
 	width: 350px;
 }

 body.ltr.offcanvs-position-right .offcanvas-menu {
 	right: -350px;
 }

 .menu-deeper.menu-parent>a {
 	position: relative;
 }

 /* Make the entire <a> clickable layout-wise */
 .menu-deeper.menu-parent>a .menu-toggler {
 	position: absolute;
 	inset: 0;
 	/* full clickable area */
 	cursor: pointer;
 }

 /* Restore the visible icon position */
 .menu-deeper.menu-parent>a .menu-toggler i,
 .menu-deeper.menu-parent>a .menu-toggler::before,
 .menu-deeper.menu-parent>a .menu-toggler::after {
 	position: absolute;
 	right: 10px;
 	top: 50%;
 	transform: translateY(-50%);
 	pointer-events: none;
 	/* don't block clicks */
 }

 /* END Mobile Menu */

 /*  BEGIN Base style for all custom dual badges and icons */
 /*
.badge[class*="badge-dual-"] {
  color: #fff;
  border: none;
  font-size: 0.85rem;
  padding: 0.5em 0.65em;
  border-radius: 0.375rem;
  font-weight: 500;
}
*/
 /* Custom color variants */
 .badge-dual-nein {
 	background-color: #dc3545;
 	/* Bootstrap 'danger' red */
 }

 .badge-dual-ja {
 	background-color: #198754;
 	/* Bootstrap 'success' green */
 }

 .badge-dual-sofort {
 	background-color: #fd7e14;
 	/* Bootstrap 'orange' */
 }

 .badge-dual-folgt {
 	background-color: #808080;
 	/* gray */
 }

 .badge-dual-unbekannt {
 	background-color: #808080;
 	/* gray */
 }

 .badge-dual-bachelor {
 	background-color: #fff;
 	color: #000;
 	border: 1px solid #00c1d4;
 	/* TUHH cyan */
 }

 .badge-dual-master {
 	background-color: #fff;
 	color: #000;
 	border: 1px solid #7200fe;
 	/* TUHH lila */
 }

 /* Optional hover effect */
 .badge[class*="badge-dual-"]:hover {
 	opacity: 0.75;
 	cursor: default;
 	transition: opacity 0.2s ease-in-out;
 }

 .icon-dual-bachelor {
 	color: #00c1d4;
 	/* TUHH cyan */
 }

 .icon-dual-master {
 	color: #7200fe;
 	/* TUHH lila */
 }

 /* END Base style for all custom dual badges and icons */

 /*  BEGIN newsflash (legacy) */

 .mod-articlesnews.newsflash {
 	border: 1px solid #00c1d4;
 }

 .mod-articlesnews__item {
 	border-bottom: 1px solid #00c1d4;
 	margin: 10px;
 	padding-left: 10px;
 	padding-right: 10px;
 }

 .mod-articlesnews__item:last-child {
 	border-bottom: none;
 	margin-bottom: 0;
 	/* remove spacing for the last item */
 }

 .mod-articlesnews__item .newsflash-title {
 	border-bottom: 1px dashed #00c1d4;
 	margin-bottom: 10px;
 	padding-bottom: 10px;
 }

 /*  END newsflash (legacy) */

 /*  BEGIN kooperationsunternehmens search */
 .dropdown-item {
 	white-space: nowrap;
 	/* prevent wrapping */
 	overflow: hidden;
 	/* hide overflow */
 	text-overflow: ellipsis;
 	/* show "..." for long text */
 }

 /*  END kooperationsunternehmens search */