/* ==================================================================
 * project.css - t3sb_sitepackage / Alfeld - 08.26
 * ------------------------------------------------------------------
 * Inhalt
 *   1. Utilities
 *   2. Basis-Layout & Typo
 *   3. Header & Hauptnavigation (Desktop)
 *   4. Mobiles Mehrebenen-Menue (mnav)
 *   5. Subnavigation (Aside) & Sidebar
 *   6. Carousel
 *   7. News
 *   8. Accordion
 *   9. Infobox / Tabellen
 *  10. Formulare
 *  11. Einzelfaelle (Content-Element-IDs)
 *  12. SVG
 *  13. Indexed search
 *  14. Mobiles Menue scrollbar machen
 * ================================================================== */


/* ==================================================================
 * 1. Utilities
 * ================================================================== */

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* ==================================================================
 * 2. Basis-Layout & Typo
 * ================================================================== */

header,
.subheader {
	margin-bottom: 1rem;
}

figure .image-caption.text-start {
	padding-top: 0.5rem;
	font-size: 0.85rem;
	word-wrap: break-word;
	opacity: 0.8;
	text-align: center !important;
}

.frame-background-none:not(:first-child) {
	margin-top: 4rem;
}

#page-footer {
	padding-top: 0 !important;
}

#page-1 .breadcrumb-section {
	display: none !important;
}


/* ==================================================================
 * 3. Header & Hauptnavigation (Desktop)
 * ================================================================== */

.navbar-mainnavigation.navbar-fixed-top {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 1030;
}

/* Ausgleich fuer den fixierten Header */
.body-bg-top {
	padding-top: 70px;
}

/* Header schrumpft beim Scrollen (.is-shrunk wird per JS gesetzt) */
#page-header.is-shrunk {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

@media (min-width: 992px) {

	.body-bg-top {
		padding-top: 130px;
	}

	#page-header {
		height: 130px;
		overflow: hidden;
		transition: height .25s ease;
	}

	#page-header.is-shrunk {
		height: 70px;
		transition-duration: .4s;
	}

	#page-header .navbar-brand img {
		max-height: 52px;
		width: auto;
		transition: max-height .25s ease;
	}

	#page-header.is-shrunk .navbar-brand img {
		max-height: 40px;
	}

}


/* ==================================================================
 * 4. Mobiles Mehrebenen-Menue (mnav)
 * Unabhaengig von Bootstraps Dropdown-Komponente.
 *
 * Der geschlossene Zustand kommt von Bootstraps .collapse:not(.show).
 * Deshalb hier ausschliesslich Regeln mit .show - eine Regel auf
 * #mainnavigation ohne .show wuerde das Menue dauerhaft offen halten.
 * ================================================================== */

@media (max-width: 991.98px) {

	#mainnavigation.show,
	#mainnavigation.collapsing {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#mainnavigation > form {
		width: 100%;
		margin: 0 0 1rem 0;
	}

	/* --- Toggler ohne Rahmen und Fokus-Kasten ------------------- */

	.navbar-toggler {
		border: 0;
		padding: 0;
	}

	.navbar-toggler:focus {
		box-shadow: none;
	}

	.navbar-toggler:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: 2px;
	}

	/* --- Listen ------------------------------------------------- */

	.mnav {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mnav-level-0 {
		padding-top: 20px;
	}

	/* Alle Unterebenen sind zu, bis das Elternitem geoeffnet wird.
	   Tiefenunabhaengig - gilt fuer Level 1 bis n. */
	.mnav .mnav {
		display: none;
	}

	.mnav-item.is-open > .mnav {
		display: block;
	}

	/* --- Zeile -------------------------------------------------- */

	/* Link waechst, Toggle-Button sitzt rechts. Da die Zeile auf jeder
	   Ebene die volle Breite hat, liegen alle Pfeile auf einer Linie. */
	.mnav-row {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.mnav-link {
		display: flex;
		align-items: center;
		gap: .75rem;
		flex: 1 1 auto;
		min-width: 0;
		padding: .6rem 0;
		text-decoration: none;
		color: inherit;
	}

	.mnav-link:hover,
	.mnav-link:focus-visible {
		text-decoration: underline;
	}

	.mnav-icon {
		display: inline-flex;
		flex: 0 0 auto;
	}

	.mnav-icon img {
		display: block;
		height: auto;
	}

	.mnav-text {
		min-width: 0;
	}

	.mnav-external {
		flex: 0 0 auto;
		font-size: .8em;
		opacity: .7;
	}

	/* Einrueckung pro Ebene ueber den Link, nicht ueber die Liste -
	   sonst wandern die Pfeile mit nach innen. */
	.mnav-level-1 > .mnav-item > .mnav-row > .mnav-link { padding-left: 1.5rem; }
	.mnav-level-2 > .mnav-item > .mnav-row > .mnav-link { padding-left: 3rem; }
	.mnav-level-3 > .mnav-item > .mnav-row > .mnav-link { padding-left: 4.5rem; }
	.mnav-level-4 > .mnav-item > .mnav-row > .mnav-link { padding-left: 6rem; }

	/* --- Toggle-Button mit Dreieck ------------------------------ */

	.mnav-toggle {
		flex: 0 0 auto;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		cursor: pointer;
	}

	.mnav-toggle::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		margin: 0 auto;
		border-top: .35em solid currentColor;
		border-right: .35em solid transparent;
		border-left: .35em solid transparent;
		transition: transform .2s ease;
	}

	.mnav-item.is-open > .mnav-row > .mnav-toggle::after {
		transform: rotate(180deg);
	}

	.mnav-toggle:focus {
		outline: none;
	}

	.mnav-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	/* --- Aktiver Pfad und aktuelle Seite ------------------------ */

	.mnav-item.is-active > .mnav-row > .mnav-link {
		font-weight: 600;
	}

	.mnav-item.is-current > .mnav-row > .mnav-link {
		text-decoration: underline;
	}
	
	
	.maincontent-wrap {
		margin-bottom: 30px;
	}

}


/* ==================================================================
 * 5. Subnavigation (Aside) & Sidebar
 * ================================================================== */

.subnav-nav .subnav-item .subnav-nav {
	display: none;
}

.subnav-nav .subnav-item.active .subnav-nav {
	display: block;
}

.add_sidebar {
	margin-top: 30px;
}


/* ==================================================================
 * 6. Carousel
 * ================================================================== */

/* Deaktiviert - bei Bedarf wieder aktivieren
.carousel-item .carousel-split-content {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 1rem 1.5rem;
	overflow: hidden;
}
*/

@media (max-width: 991.98px) {

	.carousel-item .carousel-split-content p {
		font-size: 0.9rem;
		line-height: 1.4;
	}

	#page-1 .carousel-container.layout-1 .carousel-inner {
		min-height: 300px;
	}

	.carousel-split-media,
	.carousel-control-prev,
	.carousel-control-next,
	.carousel-indicators {
		display: none;
	}

	.carousel-caption {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	#carousel-2 {
		max-height: 300px !important;
	}

}


/* ==================================================================
 * 7. News
 * ================================================================== */

.news-list-view .card-img-top,
.news-list-view .news-img-wrap img {
	aspect-ratio: 3 / 2;
	width: 100%;
	object-fit: cover;
}

.news-list-view .row > [class*="col"] {
	display: flex;
}

.news-list-view .card {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.news-single figure.image a {
  height: auto;
}

@media (min-width: 992px) {

	.news .col {
		max-width: 330px;
	}

}


/* ==================================================================
 * 8. Accordion
 * Alfeld-Layout: weiss, duenner Rahmen, schwarze Schrift, Chevron
 * ================================================================== */

.accordion {
	--bs-accordion-bg: #fff;
	--bs-accordion-color: var(--bs-body-color);
	--bs-accordion-border-color: #dee2e6;
	--bs-accordion-border-radius: 0;
	--bs-accordion-inner-border-radius: 0;

	--bs-accordion-btn-color: var(--bs-body-color);
	--bs-accordion-btn-bg: #fff;
	--bs-accordion-active-color: var(--bs-body-color);
	--bs-accordion-active-bg: #fff;
	--bs-accordion-btn-focus-box-shadow: none;

	--bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A9D9C'%3e%3cpath d='M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2z'/%3e%3c/svg%3e");
	--bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232A9D9C'%3e%3cpath d='M2.75 7.25h10.5a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5z'/%3e%3c/svg%3e");
	--bs-accordion-btn-icon-transform: rotate(180deg);
	--bs-accordion-btn-icon-transition: transform .3s ease-in-out;
}

.accordion-item {
	border: 1px solid #dee2e6;
	margin-bottom: .3rem;
}

/* Achtung: ueberschreibt die Variablen --bs-accordion-btn-color /
   --bs-accordion-btn-bg oben durch !important. */
.accordion-button {
	color: #009999 !important;
	background-color: #f7f7f7 !important;
}


/* ==================================================================
 * 9. Infobox / Tabellen
 * ================================================================== */

.infobox .table {
	--bs-table-border-color: #ddd;
}

.infobox table > :not(caption) > * > * {
	padding: 0.5rem 0.5rem;
	color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
	background-color: #f2f2f3;
}


/* ==================================================================
 * 10. Formulare
 * ================================================================== */

.form-check-input {
	margin-right: 8px;
}


/* ==================================================================
 * 11. Einzelfaelle (Content-Element-IDs)
 * Besser mittelfristig durch eine Frame-Klasse ersetzen.
 * ================================================================== */

#c2815 {
	background-color: #f2f2f3;
	padding-top: 30px;
}

/* ==================================================================
 * 12. SVG
 * ================================================================== */

.teilnavContainer svg {
	overflow: hidden;
}

/* ==================================================================
 * 13. Indexed search
 * ================================================================== */

#tx_indexedsearch, 
.tx-indexedsearch-info-sword, 
.tx-indexedsearch-browsebox {
	padding: 15px;
}

@media (max-width: 991.98px) {
	#searchbox.desktop,
	.subnav-wrap {
		display: none !important;
	}
}

@media (min-width: 992px) {
	#searchbox.mobile {
		display: none !important;
	}
}


/* ------------------------------------------------------------------
 * 14. Mobiles Menue scrollbar machen
 * ---------------------------------------------------------------- */

@media (max-width: 991.98px) {
	.navbar-mainnavigation.navbar-fixed-top {
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}