@charset "UTF-8";

/* CSS für alle Blöcke */
@media all {
	.block {
		margin-bottom: 60px;
	}

	.round {
		border-radius: 50%;
	}

	.all-items {
		font-weight: 300;
	}

	.all-announcements {
		margin-bottom: 0;
	}

	.carousel-control-next,
	.carousel-control-prev {
		width: 5% !important;
	}

	.header-link {
		color: #0092bc !important;
		text-decoration: none !important;
	}

	.header-link:hover {
		text-decoration: underline !important;
	}

	/* Accordion */
	.accordion_block .accordion_img {
		overflow: hidden;
		height: 200px;
		width: 200px;
		background-size: cover;
		border-radius: 50%;
		margin: 0 auto 20px;
		box-shadow: 0 1px 16px #00000029;
	}

	.topic_link .topic_opening > div:hover strong {
		color: #ffffff !important;
		cursor: pointer !important;
	}

	.topic_link:hover {
		cursor: default !important;
	}

	.accordion_block .accordion-body p {
		color: #707070;
	}

	.accordion-body .big .text {
		font-weight: 700;
		font-size: 15px;
		color: #707070;
		text-align: center !important;
		padding-left: 0 !important;
	}

	.accordion-body .big {
		width: 100%;
	}

	.accordion-body .big * {
		text-align: center;
	}

	.accordion_block .accordion-body {
		margin: 0;
		padding-top: 30px;
		padding-bottom: 20px;
	}

	.accordion_block .accordion-item {
		box-shadow: 0 3px 6px #00000029;
	}

	.accordion_block .accordion-body.small {
		width: 100%;
		padding: 0;
	}

	.accordion-container {
		padding: 0;
		width: 100%;
		margin: 0;
	}

	.accordion_block .accordion-body.small .text:first-of-type {
		margin-top: 44px;
		margin-bottom: 5px;
	}

	.accordion_block .accordion-item {
		margin-bottom: 10px;
	}

	.accordion_block .accordion-body .round {
		background-color: #87888A;
		height: 55px;
		width: 55px;
		margin: 42px 0 42px 30px;
		color: #ffffff;
	}

	.accordion_block .accordion-body .round i {
		position: relative;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.accordion_block .accordion-button {
		font-size: 20px;
		font-weight: 500;
	}

	.accordion_block .accordion-body .text {
		font-size: 15px;
		font-weight: 300;
		color: #535B63;
		text-align: left;
		word-break: break-all;
	}

	.accordion_block .accordion-body .text.accordion_name {
		color: #0092BC;
		font-size: 20px;
		font-weight: 500;
	}

	.accordion_block .accordion-body .text.accordion_function {
		color: #707070;
	}

	.accordion_block .accordion-body.col-2 {
		margin-left: 20px;
	}

	.accordion_block .accordion-item:first-of-type .accordion-button,
	.accordion_block .accordion-item:last-of-type .accordion-button,
	.accordion_block .accordion-item:last-of-type,
	.accordion_block .accordion-item:first-of-type {
		border-radius: 0 !important;
	}

	.accordion_block .accordion-button:not(.collapsed) {
		color: #ffffff;
		background-color: #009898;
	}

	.accordion_block .accordion-button.collapsed {
		color: #535B63;
		background-color: #CFCDCD;
	}

	.accordion_block .accordion-button:focus {
		z-index: 3;
		border-color: transparent;
		outline: 0;
		box-shadow: none;
	}

	/* Tabellenblock */
	.table-block table {
		width: 100%;
		table-layout: fixed;
		word-break: break-word;
	}

	.table-block table p,
	.table-block table th,
	.table-block table td {
		font-size: 15px;
		font-weight: 300;
		color: #535B63;
		padding: 3px 5px;
		vertical-align: top;
		line-height: 18px;
	}

	.table-block table th {
		font-weight: 700;
	}

	.table-block table tr:nth-of-type(0) td,
	.table-block table tr:nth-of-type(0) th,
	.table-block table thead,
	.table-block table tr:nth-of-type(even) td {
		background-color: #CACACA87;
	}

	.table-block.standard table {
		border-collapse: separate;
	}

	.table-block.blackborder table tr th,
	.table-block.blackborder table tr td {
		border-collapse: collapse;
		border: 1px solid #535B63;
	}

	.table-block.blackborderextra table {
		border-style: hidden;
		border-collapse: collapse;
	}

	.table-block.blackborderextra table td,
	.table-block.blackborderextra table th {
		border: 1px solid #535B63;
	}

	.table-block a {
		text-decoration: underline #535B63;
		color: #535B63;
	}

	.table-block a:hover {
		color: #0092bc;
		text-decoration: underline #535B63;
	}

	/* Beginn Notifications und Events Block */
	.notification-event-container {
		margin-top: 20px;
	}

	.notification-event-container h2 {
		margin-left: 0 !important;
		margin-bottom: 22px;
	}

	.notification-event-container .position-absolute,
	.notification-event-container .position-absolute:hover {
		bottom: -10px;
		right: calc(var(--bs-gutter-x)/ 2);
		color: #535B63;
		text-decoration: none;
	}

	.notification-event-container .position-absolute:hover {
		text-decoration: underline;
	}

	.notification-event-left p {
		width: 100px;
		font-size: 15px;
		font-weight: 300;
	}

	.notification-event-left a {
		width: calc(100% - 100px);
		color: #535B63;
		text-decoration: none;
		margin-bottom: 22px;
		font-size: 15px;
		font-weight: 300;
	}

	.notification-event-left a:hover {
		text-decoration: underline;
	}

	.notification-event-right {
		margin-bottom: 15px;
	}

	.notification-event-right .img {
		height: 130px;
	}

	.notification-event-right .img {
		background-repeat: no-repeat;
		background-position: 50% 50%;
		background-size: cover;
	}

	.notification-event-right .img.default-image {
		background-size: contain;
	}

	.notification-event-right h3 a {
		margin: 0 0 15px 0;
		font-weight: 500;
		font-size: 22px;
		color: #0092bc;
	}

	.notification-event-right a {
		color: #535B63;
		text-decoration: none;
		font-size: 15px;
		font-weight: 300;
	}

	.notification-event-right a:hover {
		text-decoration: underline;
	}

	.notification-event-right > div:first-of-type {
		background-position: 50% 50%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.notification-event-right p {
		margin-bottom: 0;
		line-height: 22px;
		font-weight: 300;
	}

	/* Beginn Announcement-slider Block */
	#announcement-slider {
		background-color: #E5E5E5;
	}

	#announcement-slider div.carousel-item > div,
	#announcement-slider > div,
	#announcement-slider > div > div,
	.announcement-slider-area {
		height: 100%;
	}

	.announcement-slider-textarea a {
		color: #535B63;
		text-decoration: underline;
		font-size: 14px;
	}

	.announcement-slider-all {
		margin-top: -27px;
		text-align: right;
		vertical-align: center;
	}

	#announcement-slider .carousel-control-prev-icon {
		background-image: url("../assets/icon/Chevron-left.svg");
	}

	#announcement-slider .carousel-control-next-icon {
		background-image: url("../assets/icon/Chevron-right.svg");
	}

	.announcement-slider-all a:hover {
		text-decoration: underline;
	}

	.announcement-slider-all a {
		color: #535B63;
		text-decoration: none;
		font-weight: 300;
		font-size: 14px;
	}

	.announcement-slider-img {
		height: 250px;
		margin: 20px auto;
		background-position: 50% 50%;
		background-size: cover;
		background-repeat: no-repeat;
	}

	/* Beginn Announcement-Block (Startseite) */
	.announcement {
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.announcement > div > h2 {
		color: #535B63;
	}

	#accordion .accordion-body p:first-of-type {
		color: #0092BC;
		font-size: 20px;
		margin-top: 10px;
		margin-bottom: 0;
	}

	.accordion_block .accordion-button::after,
	#accordion .accordion-button::after {
		background-image: url("../assets/icon/tag-bottom-black.svg") !important;
	}

	.accordion_block .accordion-button:not(.collapsed)::after,
	#accordion .accordion-button:not(.collapsed)::after {
		background-image: url("../assets/icon/tag-bottom-white.svg") !important;
	}

	.announcement-img img {
		width: 100%;
		height: auto;
	}

	.announcement-img {
		max-height: 400px;
		overflow: hidden;
	}

	/* Opening */
	.opening {
		padding: 15px;
		background-color: #E5E5E5;
		letter-spacing: 0.25px;
	}

	.opening strong {
		color: #0092BC;
	}

	.opening a, .opening p {
		color: #535B63;
		margin: 0;
		text-decoration: none;
	}

	.opening a:hover {
		text-decoration: underline;
		color: #0092BC;
	}

	/* Beginn Topic_Opening-Block */
	.topic_link {
		display: block;
		text-decoration: none;
		margin: 0;
		padding: 0;
	}

	.topic_header_above {
		margin-bottom: 10px;
	}

	.topic_header {
		color: #535B63;
		font-size: 30px;
	}

	.topic_opening {
		color: #535B63;
		margin: 0;
		padding: 0;
	}

	.topic_opening > div {
		height: 80px;
		background: #FFFFFF 0 0 no-repeat padding-box;
		box-shadow: 0 1px 16px #00000029;
		text-align: center;
	}

	.topic_opening > div > .topicname {
		margin: auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* Kontaktblock */
	.contact-block > div {
		margin-bottom: 30px;
	}

	.contact-block .contact-body > p {
		letter-spacing: 0.3px;
		color: #34393E;
		margin: 0;
	}

	.contact-block .contact-body > p:first-child {
		color: #0092BC;
		letter-spacing: 0.4px;
	}

	/* Beginn Carousel-Block */
	#carousel > .carousel-indicators {
		margin-bottom: -40px;
		height: 30px;
		margin-right: 18%;
		justify-content: right;
		padding-right: 15px;
	}

	#carousel > .carousel-indicators button.active {
		background-color: #009898;
	}

	#carousel > .carousel-indicators button:not(.active) {
		background-color: #535B63;
	}
	#carousel > .carousel-indicators button {
		height: 10px;
		width: 10px;
		border-radius: 50%;
		margin-right: 10px;
	}

	#carousel > .carousel-indicators > div {
		padding-top: 3px;
		margin-left: 3px;
	}

	#carousel > .carousel-indicators > div:hover {
		cursor: pointer;
	}

	.carousel-caption {
		background-color: #6A747E80;
		height: auto;
		text-align: left;
		padding: 50px;
		font-size: 20px;
		right: 0 !important;
		left: 0 !important;
	}

	.carousel-caption > p {
		font-weight: 300;
		color: #ffffff !important;
	}

	.carousel-caption > div {
		text-align: right;
		font-size: 16px;
	}

	.carousel-caption > div > a, .carousel-caption > div > a:hover {
		color: #ffffff;
	}

	.carousel-caption > div > a {
		text-decoration: none;
	}

	.carousel-caption > div > a:hover {
		text-decoration: underline;
	}

	.text-image-block .image-left,
	.audio-block .image-left {
		margin: 0 20px 0 0 !important;
	}

	.text-image-block .image-right {
		margin: 0 0 0 20px !important;
	}
}

/* Desktop */
@media (min-width:1200px) {
	/* Beginn Carousel-Block */
	.carousel-caption > p {
		margin-top: 25px;
	}

	/* Beginn Topic_Opening-Block */
	.topic_opening > div:hover {
		cursor: pointer;
		background-color: #0092BC;
		color: #ffffff;
	}

	.topic_opening strong {
		font-size: 18px !important;
	}

	.topic_opening > div:hover strong {
		color: #ffffff;
	}

	.topic_img {
		padding: 0 !important;
		height: 56px;
		width: 56px;
		border-radius: 28px;
		margin-top: 13px !important;
		margin-left: 14px !important;
		margin-bottom: 12px !important;
		overflow: hidden;
	}

	.topic_img img {
		width: 100%;
		height: auto;
	}

	.display-active,
	.topic_opening > div:hover .display-inactive {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #88898B;
	}

	.display-inactive,
	.topic_opening > div:hover .display-active {
		display: none;
	}

	.display-inactive {
		background-color: #fff !important;
	}

	.display-active > i {
		font-size: 40px;
		color: #FFF;
	}

	.display-inactive > i {
		font-size: 40px;
		color: #0092BC;
	}

	.topic_opening > div {
		margin: 10px;
	}

	/* Opening */
	.opening {
		margin-left: 10px;
		margin-bottom: 10px;
	}

	/* Beginn Announcement-Block (Startseite) */
	.announcement > div > h2 {
		font-size: 30px;
		margin-bottom: 23px;
	}

	.announcement-area p:nth-of-type(2) {
		font-weight: 300;
	}

	#announcement-slider {
		height: 380px;
	}

	#announcement-slider div.carousel-item > div,
	#announcement-slider > div,
	#announcement-slider > div > div,
	.announcement-slider-area {
		height: 100%;
	}


	.announcement-slider-img {
		margin: 65px auto;
	}

	.announcement-slider-textarea {
		margin-top: 65px;
	}

	.announcement-slider-textarea h3 {
		font-size: 22px !important;
	}

	.announcement-slider-textarea p {
		font-size: 15px;
		font-weight: 300;
		color: #535B63;
		letter-spacing: 0.33px;
		text-align: left;
	}

	.carousel-control-prev {
		margin-left: 40px;
	}

	.carousel-control-next {
		margin-right: 40px;
	}

	.row.announcement-slider-area {
		margin: 0 40px;
	}

	.announcement-slider-all {
		margin-right: 40px;
	}
}

/* Tablet 1 */
@media (min-width:992px) and (max-width:1199px) {
	.accordion_block .accordion-body .text {
		text-align: left;
		padding-left: 12px;
	}

	/* Beginn Carousel-Block */
	.carousel-caption {
		padding: 10px !important;
		font-size: 16px;
	}

	.carousel-caption > p {
		margin: 0 0 4px 0;
		font-size: 16px;
	}

	.carousel-caption > h5 {
		margin-bottom: 4px !important;
	}

	/* Beginn Topic_Opening-Block */
	.topic_opening div.col-xl-9 strong {
		font-size: 16px;
		word-break: break-word;
	}

	.topic_link .topic_opening > div:hover {
		color: #ffffff !important;
		cursor: pointer !important;
		background-color: #0092BC;
	}

	.topic_img {
		display: none !important;
	}

	.topic_img img {
		display: none;
	}

	.topic_opening > div {
		margin: 10px;
	}

	/* Opening */
	.opening {
		margin-left: 12px;
		margin-right: 12px;
		margin-bottom: 19px;
	}

	/* Beginn Announcement-Block (Startseite) */
	.announcement > div > h2 {
		font-size: 26px;
		margin-bottom: 18px;
	}

	.announcement-area h3 {
		font-size: 18px !important;
	}

	.announcement-area p {
		font-size: 14px;
	}

	.announcement-area p:nth-of-type(2) {
		font-weight: 300;
	}

	/* Beginn Announcement-slider Block */
	#announcement-slider {
		height: 580px;
	}

	.announcement-slider-textarea {
		margin-top: 20px;
	}

	.announcement-slider-textarea p {
		font-size: 15px;
		font-weight: 300;
		color: #535B63;
		letter-spacing: 0.33px;
		text-align: left;
	}

	.notification-event-container > div > div:first-of-type {
		margin-bottom: 60px;
	}

	.text-image-block .image-right {
		margin: 0 !important;
	}

	.container.block .text-image-block .text_image_20 {
		margin-top: 20px;
	}

	.container.block .text-image-block .float-sm-end,
	.container.block .text-image-block .float-sm-start {
		float: unset !important;
	}

	.carousel-control-prev {
		margin-left: 40px;
	}

	.carousel-control-next {
		margin-right: 40px;
	}

	.row.announcement-slider-area {
		margin: 0 40px;
	}

	.announcement-slider-all {
		margin-right: 40px;
	}
}

/* Tablet 2 */
@media (min-width:768px) and (max-width:991px) {
	.accordion_block .accordion-body .text {
		text-align: left;
	}

	/* Hörpfad */
	.audio-block .audio-main audio {
		width: 100% !important;
	}

	/* Beginn Carousel-Block */
	.carousel-caption {
		padding: 10px !important;
		font-size: 16px;
	}

	.carousel-caption > p {
		margin: 0 0 4px 0;
		font-size: 16px;
	}

	.carousel-caption > h5 {
		margin-bottom: 4px !important;
	}

	/* Beginn Topic_Opening-Block */
	.topic_opening.odd > div {
		margin: 10px 10px 10px 0;
	}

	.topic_opening:not(.odd) > div {
		margin: 10px 0 10px 10px;
	}

	.topic_opening div.col-sm-12 {
		font-size: 16px;
		font-weight: 700;
		word-break: break-word;
	}

	.topic_link .topic_opening > div:hover {
		color: #ffffff !important;
		cursor: pointer !important;
		background-color: #0092BC;
	}

	.topic_img {
		display: none !important;
	}

	.topic_img img {
		display: none;
	}

	.topic-opening-container {
		margin-right: 0;
		margin-left: 0;
	}

	.topic-opening-container > div:first-of-type{
		margin: 0;
		padding: 0;
	}

	.topic-opening-container > div:first-of-type > div:first-of-type {
		padding: 0;
	}

	/* Beginn Announcement-Block (Startseite) */
	.announcement > div > h2 {
		font-size: 26px;
		margin-bottom: 18px;
	}

	.announcement-area h3 {
		font-size: 18px !important;
	}

	.announcement-area p {
		font-size: 14px;
	}

	.announcement-area p:nth-of-type(2) {
		font-weight: 300;
	}

	/* Beginn Announcement-slider Block */
	#announcement-slider {
		height: 760px;
	}

	.announcement-slider-textarea {
		margin-top: 0;
	}

	.announcement-slider-textarea p {
		display: none;
	}

	/* Beginn Notifications und Events Block */
	.notification-event-container > div > div:first-of-type {
		margin-bottom: 60px;
	}

	.text-image-block .image-right {
		margin: 0 !important;
	}

	.container.block .text-image-block .text_image_20 {
		margin-top: 20px;
	}

	.container.block .text-image-block .float-sm-end,
	.container.block .text-image-block .float-sm-start {
		float: unset !important;
	}
}

/* Mobile */
@media (max-width:767px) {
	.accordion_block .accordion-body .text:not(.accordion_name):not(.accordion_function) {
		text-align: left;
		margin-left: -20px;
	}

	.accordion-body .round {
		margin: 25px auto !important;
	}

	.accordion_block .accordion-body.small .text:first-of-type {
		margin-top: 29px;
	}

	/* Hörpfad */
	.audio-block .audio-main audio {
		width: 100% !important;
	}

	/* Beginn Carousel-Block */
	.carousel-caption {
		padding: 10px !important;
		font-size: 16px;
	}

	.carousel-caption > p {
		margin: 0 0 4px 0;
		font-size: 16px;
	}

	.carousel-caption > h5 {
		margin-bottom: 4px !important;
	}

	/* Beginn Topic_Opening-Block */
	.topic_opening div.col-xl-9 {
		font-size: 16px;
		font-weight: 700;
		word-break: break-word;
	}

	.topic_link .topic_opening > div:hover {
		color: #ffffff !important;
		cursor: pointer !important;
		background-color: #0092BC;
	}

	.topic_img {
		display: none !important;
	}

	.topic_img img {
		display: none;
	}

	.topic-opening-container {
		margin-right: calc(var(--bs-gutter-x)/ 2);
	}

	.topic-opening-container > div:first-of-type {
		margin-left: calc(var(--bs-gutter-x)/ 2) !important;
		padding: 0;
	}

	.topic_header_above {
		padding-left: 0;
		padding-right: 0;
	}

	.topic_opening > div {
		margin: 10px auto;
		font-weight: 700;
	}

	/* Opening */
	.opening {
		margin-left: 10px;
	}

	/* Beginn Announcement-Block (Startseite) */
	.announcement > div > h2 {
		font-size: 20px;
		margin-bottom: 23px;
	}

	.announcement-area h3 {
		font-size: 18px !important;
	}

	.announcement-area p {
		font-size: 12px;
	}

	/* Beginn Announcement-slider Block */
	#announcement-slider {
		height: 800px;
	}

	#announcement-slider .carousel-control-prev-icon,
	#announcement-slider .carousel-control-next-icon {
		margin-top: 40px;
	}

	#announcement-slider .mobile-view {
		margin-top: 60px;
	}

	.announcement-slider-textarea {
		margin-top: 0;
	}

	.announcement-slider-textarea p {
		display: none;
	}

	/* Beginn Notifications und Events Block */
	.notification-event-container > div > div:first-of-type {
		margin-bottom: 60px;
	}

	.text-image-block .image-right {
		margin: 0 !important;
	}

	.container.block .text-image-block .text_image_20 {
		margin-top: 20px;
	}
}