/*!
 * dreiraum Sitepackage (https://www.bluestarsoftware.de)
 * Website-Styles auf Basis bootstrap_package 16 / Bootstrap 5
 * (übernommen aus site_template_bs/Resources/Public/Css/site.css und an das BP-16-Markup angepasst)
 */

/*
 * Webfonts
 * Eina03 (Textaxis) – MyFonts Webfont Build ID 3806550, Lizenz: https://www.myfonts.com/viewlicense?type=web&buildid=3806550
 * EB Garamond – SIL Open Font License (lokal eingebunden statt Google Fonts)
 */
@font-face { font-family: 'Eina03-Regular'; src: url('../Fonts/Eina03-Regular.woff2') format('woff2'), url('../Fonts/Eina03-Regular.woff') format('woff'); }
@font-face { font-family: 'Eina03-Bold'; src: url('../Fonts/Eina03-Bold.woff2') format('woff2'), url('../Fonts/Eina03-Bold.woff') format('woff'); }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Fonts/EBGaramond-Regular-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'EB Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url('../Fonts/EBGaramond-Regular-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ==========================================================================
   Basis
   ========================================================================== */
body {
	font-family: 'Eina03-Regular';
	color: #495162;
}

/* Listen-Einzug wie bisher (Bootstrap 4: Browser-Standard 40px, Bootstrap 5: 2rem) */
ol, ul { padding-left: 40px; }

h1, h2, h3, h4, h5, h6 {
	font-family: 'EB Garamond', serif;
	color: #495162;
}

a, .frame-container a { color: #a64c57; font-weight: bold; }
a:hover, .frame-container a:hover { color: #495162; text-decoration: none; }

/* BP 16 färbt Links in Frames über CSS-Variablen – Werte wie bisher (BP 11 + site.css) */
.frame-background-none { --frame-link-color: #a64c57; --frame-link-hover-color: #495162; }
.frame-background-light { --frame-link-color: #809491; --frame-link-hover-color: #5b6c6a; }
.frame-background-secondary { --frame-link-color: #fff; --frame-link-hover-color: #d9d9d9; }


/* Überschriften: Schriftgrößen je Breakpoint wie bisher (BP 11 statt Bootstrap-5-RFS) */
h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.25rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.85rem; }
@media (min-width: 768px) {
	h1, .h1 { font-size: 2.2rem; }
	h2, .h2 { font-size: 1.925rem; }
	h3, .h3 { font-size: 1.65rem; }
	h4, .h4 { font-size: 1.375rem; }
	h5, .h5 { font-size: 1.1rem; }
	h6, .h6 { font-size: 0.935rem; }
}
@media (min-width: 992px) {
	h1, .h1 { font-size: 2.4rem; }
	h2, .h2 { font-size: 2.1rem; }
	h3, .h3 { font-size: 1.8rem; }
	h4, .h4 { font-size: 1.5rem; }
	h5, .h5 { font-size: 1.2rem; }
	h6, .h6 { font-size: 1.02rem; }
}
@media (min-width: 1200px) {
	h1, .h1 { font-size: 2.6rem; }
	h2, .h2 { font-size: 2.275rem; }
	h3, .h3 { font-size: 1.95rem; }
	h4, .h4 { font-size: 1.625rem; }
	h5, .h5 { font-size: 1.3rem; }
	h6, .h6 { font-size: 1.105rem; }
}


/* ==========================================================================
   Überschriften der Inhaltselemente: Abstand wie unter BP 11
   (steht vor den Layout-Regeln, damit z. B. frame-layout-2 wie bisher gewinnt;
   BP 11: letztes Element im Header mit margin-bottom 1rem, Header selbst ohne Abstand;
   BP 16 setzt den Abstand am Header und entfernt ihn als letztes Kind im frame-inner)
   ========================================================================== */
.frame-header { margin-bottom: 0; }
.frame-header *:last-child { margin-bottom: 1rem; }
.frame-type-header .frame-header *:last-child { margin-bottom: 0; }

/* ==========================================================================
   Sections / Frames
   ========================================================================== */
.frame-background-light {
	color: #495162;
}

.section-after {
	background: #EBF0F1;
	border-bottom: 1px solid transparent;
}

/* section-light gibt es in BP 16 nicht mehr – Werte aus BP 11 */
.section-light {
	background-color: #f8f9fa;
}
.section-light a:not(.btn),
.section-light a:not(.btn):hover,
.section-light a:not(.btn):focus { color: #2b2b2b; }

.frame-container,
.section-light {
	color: #495162;
}

.frame-background-light {
	--frame-background: #EBF0F1;
	background-color: #EBF0F1;
}

.frame-layout-1 .frame-inner {
	text-align: center;
	max-width: 70%;
	margin: 0 auto;
}

.frame-layout-0 .frame-inner h1,
.frame-layout-0 .frame-inner h2,
.frame-layout-2 .frame-inner h1,
.frame-layout-2 .frame-inner h2 { text-align: center; }
.frame-layout-0 .frame-inner,
.frame-layout-2 .frame-inner {
	text-align: left;
	max-width: 70%;
	margin: 0 auto;
}

.frame-layout-2 .frame-header { margin-bottom: 0; }
.frame-layout-2 .frame-header :last-child {
	margin-bottom: 3rem;
}

.section-color-green {
	background: #E2EAEB;
}
.section-color-blue {
	background: #EBF0F1;
}

.section-default h3 {
	font-family: 'Eina03-Regular';
}

.frame-container { max-width: 100% !important; }
@media (min-width: 300px) {
	.frame-layout-0 .frame-inner,
	.frame-layout-2 .frame-inner {
		max-width: 85%;
	}
}
@media (min-width: 1200px) {
	.frame-layout-0 .frame-inner,
	.frame-layout-2 .frame-inner {
		max-width: 70%;
	}
	.frame-container { max-width: 1200px !important; }
}


/* ==========================================================================
   Kopfbereich / Navigation (Markup: BP 16 Partials/Page/Navigation/Main.html)
   ========================================================================== */
.navbar-mainnavigation {
	padding-top: 0;
	padding-bottom: 0;
}
.navbar-mainnavigation .container-mainnavigation {
	flex-wrap: nowrap;
	align-items: center !important;
	gap: 0;
}

.headNavi {
	display: flex; flex-direction: column; flex: 1; align-content: flex-end; justify-content: space-between; align-items: flex-end;
	height: 130px;
	padding-top: 1rem; padding-bottom: 0.7rem;
}
.headNavi .navbar-toggler { color: rgba(0, 0, 0, 0.5); align-self: flex-end; width: 22px; margin-bottom: 1.5rem; }
.navbar-mainnavigation .navbar-collapse { flex-grow: unset !important; flex-basis: auto; }

.mySocialLink { margin-left: 0.5rem; }
#mySocialLinks { text-align: right; }

header .navbar-nav { flex-direction: row; }
.navbar-mainnavigation .navbar-nav { gap: 0; line-height: 1.5; width: auto; }
.navbar-mainnavigation .navbar-nav:before { display: none; }
header .navbar-nav > .nav-item { padding-left: 1.0rem; }
.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link-main { padding: 0.5rem 0; }
.navbar-mainnavigation .nav-link:before { display: none !important; }

.nav-link-text { text-transform: uppercase; font-weight: 600; color: #809491; }
.nav-link:hover .nav-link-text, .nav-link.active .nav-link-text { color: #495162; text-decoration: none; }
.navbar-mainnavigation .nav-link-main .nav-link-text { font-size: 95%; }

/* Dropdown */
.navbar-mainnavigation .dropdown-menu { border: none; border-radius: 0; box-shadow: none; padding: 0.7rem 20px 0 20px; margin: 0; min-width: 10rem; font-size: 1rem; }
.navbar-mainnavigation .dropdown-nav { display: block; }
.navbar-mainnavigation .dropdown-nav > .nav-item { display: block; border-top: 1px solid #495162; padding: 5px 0; }
.navbar-mainnavigation .dropdown-nav > .nav-item:first-child { border-top: 1px solid transparent; }
.navbar-mainnavigation .nav-link-dropdown { padding: 0.25rem 1rem; white-space: nowrap; background: none; }
.navbar-mainnavigation .nav-link-dropdown:hover,
.navbar-mainnavigation .nav-link-dropdown:focus { background: none; }

@media (min-width: 992px) {
	/* Untermenü öffnet wie bisher bei Hover, der BP-16-Toggle-Button wird nur mobil benötigt */
	.navbar-mainnavigation .nav-link-toggle { display: none; }
	.navbar-mainnavigation .nav-style-simple:hover > .dropdown-menu,
	.navbar-mainnavigation .nav-style-simple:focus-within > .dropdown-menu { display: block; }
	.navbar-mainnavigation .nav-style-simple > .dropdown-menu { top: 100%; left: 0; }
}

@media (max-width: 475px) {
	header .navbar-nav > .nav-item {
		width: 93vw;
	}
}
@media (max-width: 991.98px) {
	#mainnavigation {
		position: absolute;
		top: 130px;
		z-index: 100;
	}
	header .navbar-nav > .nav-item {
		padding: 0 1rem;
	}
	.navbar-mainnavigation .navbar-nav > .nav-item > .nav-link-main {
		margin-left: -20px;
		margin-right: -20px;
		padding-left: 20px;
		padding-right: 20px;
	}
	header .navbar-nav {
		flex-direction: column;
		background: #809B98;
	}
	header .nav-link-text,
	header .nav-link-toggle {
		color: #fff;
	}
	/* Untermenü-Indikator wie bisher: kleines Dreieck (Bootstrap-4-Caret), ohne Drehung */
	.navbar-mainnavigation .nav-link-indicator:before,
	.navbar-mainnavigation .show > .nav-link-indicator:before {
		border: 0;
		border-top: 0.3em solid;
		border-right: 0.3em solid transparent;
		border-left: 0.3em solid transparent;
		padding: 0;
		transform: none;
		position: relative;
		left: 12px; /* am rechten Rand wie bisher */
		color: rgba(0, 0, 0, 0.7);
	}
	.headNavi .navbar-toggler:focus:not(:focus-visible) { box-shadow: none; }
	.navbar-mainnavigation .dropdown-menu {
		position: static;
		width: calc(100% + 40px);
		margin-left: -20px;
		margin-right: -20px;
		background: transparent;
		border-left: 4px solid #809491;
	}
}


/* Logo */
.navbar-mainnavigation .navbar-brand { height: var(--mainnavigation-nav-height); margin-right: 40px; }
.navbar-mainnavigation .navbar-brand-image img { position: initial; top: unset; transform: unset; width: auto; max-height: 45px; }
.navbar-mainnavigation .navbar-brand-image { display: flex; align-items: flex-end; padding: 0; padding-bottom: 1.5rem; }
@media (max-width: 766px) {
	.navbar-mainnavigation .navbar-brand-image { padding-bottom: 0.5rem; }
}
@media (max-width: 1200px) {
	.navbar-mainnavigation .navbar-brand-image img {
		max-height: 30px;
	}
}


/* ==========================================================================
   Breadcrumb (Werte aus BP 11)
   ========================================================================== */
.breadcrumb-section { background-color: #f2f2f2; }
.breadcrumb-section .breadcrumb { --bs-breadcrumb-divider-color: #6c757d; --bs-breadcrumb-item-active-color: #6c757d; padding-top: 0.75rem; padding-bottom: 0.75rem; }


/* ==========================================================================
   Footer
   ========================================================================== */
.footer-section { background: #809491; color: #fff; font-size: 0.9rem; }
.footer-section a { color: #fff !important; font-weight: normal; }
.footer-section a:hover { color: #eee !important; }
.footerInfos { display: flex; justify-content: space-between; margin-top: 2rem; }
.footer-nav-item { text-transform: uppercase; display: block; }
.footerMenu { display: flex; flex-direction: column; margin-bottom: 2rem; align-items: flex-end; }

/* Social-Links im Meta-Footer: kleine Icons ohne Hintergrund wie bisher */
.footer-sociallinks .sociallinks-list { gap: 1rem; }
.footer-sociallinks .sociallinks-item { height: 1.5rem; width: 1.5rem; }
.footer-sociallinks .sociallinks-link { width: 1.5rem; height: 1.5rem; opacity: 1; background: none; border-radius: 0; }
.footer-sociallinks .sociallinks-link:hover { background: none; }

@media (max-width: 766px) {
	.footerInfos {
		flex-direction: column-reverse;
	}

	.footer-nav-item {
		display: flex;
		margin: 0;
	}
}


/* ==========================================================================
   Runde Bilder (dreiraum_roundimage)
   ========================================================================== */
.roundImages { display:flex; justify-content: space-between; }
.roundImage { position: relative; }
.roundImages .overlay { background-color: #495162; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .8s ease; }
.roundImages .roundImage:hover .overlay { opacity: 1; }
.roundImage .text { line-height: 1em; color: #98B6BC; font-size: 1.2rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.roundImage .text h2 { line-height: 1em; color: #fff; font-size: 1.2rem; }

.roundImage img { width: 60px; }
@media (min-width: 300px) {
	.roundImage img { width: 80px; }
	.roundImage .text, .roundImage .text h2 { font-size: 0.8rem; }
}
@media (min-width: 380px) {
	.roundImage img { width: 100px; }
	.roundImage .text, .roundImage .text h2 { font-size: 0.8rem; }
}
@media (min-width: 576px) {
	.roundImage img { width: 140px; }
	.roundImage .text, .roundImage .text h2 { font-size: 1.0rem; }
}
@media (min-width: 768px) {
	.roundImage img { width: 180px; }
	.roundImage .text, .roundImage .text h2 { font-size: 1.2rem; }
}
@media (min-width: 992px) {
	.roundImage img { width: 200px; }
}
@media (min-width: 1200px) {
	.roundImage img { width: 220px; }
}


/* ==========================================================================
   Kursleitungen (dreiraum_trainer)
   ========================================================================== */
.courseImages { display: flex; flex-wrap: wrap; justify-content: flex-start; }
.courseImage { position: relative; margin: 0.5rem; width: 230px; background: #495162; height: 300px; overflow: hidden; }
.courseImage img { width: 100%; height: auto; }
.courseImages .courseIS { padding-bottom: 2rem; }
.courseImages .text { color: #789591; padding: 0 1rem; line-height: 1.1rem; font-weight: normal; }
.courseImages .text .n { font-family: 'Eina03-Bold'; }

@media (max-width: 1199px) {
	.courseImage { width: 190px; height: 250px; }
}
@media (max-width: 766px) {
	.courseImage { width: 100%; height: auto; }
}


/* ==========================================================================
   Accordion (dreiraum_accordion)
   ========================================================================== */
.bssAccordion.frame { padding-top: 0; padding-bottom: 0.5rem; }
.bssAccordion .frame { padding-top: 0.5rem; padding-bottom: 0; }

.accordionHeader h4 {
	font-family: 'Eina03-Bold';
	font-size: 1.2rem;
}
.accordionHeaderLink { display: flex; line-height: 1.2rem; align-items: center; }
.accordionIcon { display: inline-block; color: #495162; width: 24px; height: 24px; min-width: 24px; border: 0; position: relative; }
.accordionIcon span { position: absolute; transition: .5s; background: #495162; border-radius: 2px; }
.accordionIcon span:first-of-type { top: 25%; bottom: 25%; width: 10%; left: 45%; }
.accordionIcon span:last-of-type { left: 25%; right: 25%; height: 10%; top: 45%; }
.accordionHeader .accordionIcon span:last-of-type { left: 50%; right: 50%; }
.accordionHeader .accordionIcon span:first-of-type { transform: rotate(90deg); }
.accordionHeader .collapsed .accordionIcon span:last-of-type { left: 25%; right: 25%; }
.accordionHeader .collapsed .accordionIcon span:first-of-type { transform: rotate(0deg); }
.accordionText { font-family: 'Eina03-Bold'; font-size: 1.2rem; color: #495162; font-weight: normal; }
.accordionHeader { padding-top: 1.5rem; }
.accordionContent { background-color: #EBF0F1; padding: 1rem 0; }


/* ==========================================================================
   Zeitplan (timetable)
   ========================================================================== */
.timetablefe { display: flex; flex-direction: row; }
.timetablefe h2 { text-align: center; padding: 0; font-size: 1.2rem; font-family: 'Eina03-Regular'; }
.timetablefebox, .timetablefeboxFirst {
	background: #EBF0F1;
	width: 110px;
	height: 20px;
	align-items: center;
	justify-content: center;
	display: flex;
	border-right: 1px solid #B4BDCA;
	border-bottom: 1px solid #B4BDCA;
	margin: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 1px;
}

.timetablefeboxCol { display: block; flex-direction: column; }
.timetablefebox.extend, .timetablefeboxFirst.extend { height: 20px; line-height: 1.2rem; }
.timetablefebox.used { color: #445262; background-color: #fff; }
.timetablefebox a { font-weight: normal; }
.timetablefeboxFirst, .timetablefeboxFirstRow { border-right: 1px solid #B3BCCA; border-bottom: 1px solid #B3BCCA; font-weight: bold; background: #CDD1DB; }
.timetablefeboxHour { display: none; }

.timetableDBoxT { text-align: center; font-weight: bold; color: #142232; }
.timetableDBoxI { text-align: center; }

.timetablefeboxFirstRow { display: flex; align-items: center; justify-content: center; }
.timetablefeboxFirsBox h2, .timetablefeboxFirstRow h2 { padding: 0; margin: 0; }
.timetablefeboxFirsBox { border-right: 1px solid #B3BCCA; border-bottom: 1px solid #B3BCCA; background: #CDD1DB; }

.timetablefeboxFirstCol .timetablefeboxFirst:nth-child(even) {
	border-bottom: 1px solid #CDD1DB;
}

@media (max-width: 767px) {
	.timetablefe { flex-direction: column; flex-wrap: wrap; }
	.timetablefeboxFirst { display: none; }
	.timetablefeboxFirstCol { display: none; }
	.timetablefe h2 { text-align: left; font-size: 1.8rem; font-weight: bold; margin-top: 2rem; }
	.timetablefeboxHour { display: inherit; text-align: left; }

	.timetablefeboxCol { margin-bottom: 2rem; }
	.timetablefeboxFirstRow { height: 50px; }
	.timetablefeboxFirsBox h2, .timetablefeboxFirstRow h2 { padding: 0; margin: 0; }

	.timetableDBoxT, .timetableDBoxI { text-align: right; }
	.timetablefebox {
		padding: 0 1rem;
		height: 30px;
		width: 100%;
		justify-content: space-between;
		border-left: 1px solid #B3BCCA;
	}

	.unused { display: none; }
}

.timetablefe2 {
	display: grid;
	grid-template-columns: repeat(6, auto);
	grid-template-rows: repeat(32, 20px);
	grid-auto-flow: column;
}


/* ==========================================================================
   Termine (dreiraum_termin)
   ========================================================================== */
.drdate { border-top: 1px solid; margin-bottom: 1rem; }
.drdate h2 { font-family: 'Eina03-Bold'; font-size: 1.0rem; font-weight: normal; text-transform: uppercase; margin-bottom: 2rem; margin-top: 1.5rem; text-align: left !important; }
.drdate .iline { color: #779591; font-weight: bold; }
.drdate .tinfo { margin-top: 3rem; }


/* ==========================================================================
   Formulare
   ========================================================================== */
/* Hinweistext vor dem Absenden (bisher Klasse form-element-statictext-1; das Bootstrap-5-Template
   von EXT:form gibt nur noch form-element-statictext aus, Text in <div> statt <p>) */
.form-element-statictext-1,
.form-element-statictext {
	margin-top: 4rem;
}
.form-element-statictext > div { margin-bottom: 1rem; }
/* Formularelemente als Flex-Spalte wie bisher (BP 11), dadurch keine Margin-Zusammenfassung */
.form-element { display: flex; flex-direction: column; }
.form-element > .form-label { align-self: flex-start; }
/* Fokus-Darstellung der Felder wie bisher (BP 16 ergänzt einen zusätzlichen schwarz/weißen Fokusring) */
.form-control:focus-visible,
.form-select:focus-visible,
.form-check-input:focus-visible { box-shadow: 0 0 0 0.2rem rgba(128, 148, 145, 0.25); }
/* Mehrzeiliges Textfeld wie bisher (BP 11: min-height 90px) */
.form-element-textarea textarea.form-control { min-height: 90px; }


/* ==========================================================================
   Deko-Bilder (dreiraum_decoimages)
   ========================================================================== */
.decimages {
	display: flex;
	justify-content: center;
}
.decimage-off { flex: 1; flex-grow: 1; }

@media (min-width: 300px) {
	.decimages {
		flex-direction: column;
	}
}
@media (min-width: 576px) {
	.decimages {
		flex-direction: row;
	}
}


/* ==========================================================================
   Sprechblasen im Header-Slider (carousel_small, Inhalt HTML)
   ========================================================================== */
.bubble {
	position: relative;
	display: flex;
	top: 10%;
	left: 10%;
	align-items: center;
}
.bubbleA { width: 451px; height: 301px; background: url(../Images/Bubbles_A_l.png) no-repeat; }
.bubbleB { width: 430px; height: 311px; background: url(../Images/Bubbles_B_l.png) no-repeat; }
.bubbleC { width: 417px; height: 325px; background: url(../Images/Bubbles_C_l.png) no-repeat; }
.bubbleD { width: 378px; height: 322px; background: url(../Images/Bubbles_D_l.png) no-repeat; }
.bubbleE { width: 430px; height: 333px; background: url(../Images/Bubbles_E_l.png) no-repeat; }
.bubble p {
	text-align: center;
	position: relative;
	margin: auto;
	padding: 0 1.5rem;
	color: #fff;
	font-size: 1.8rem;
	line-height: 120%;
	font-weight: 300;
}
.bubbleE p {
	color: #495162;
}

@media (max-width: 767px) {
	.bubble {
		top: 10%;
		left: 10%;
	}
	.bubbleA { width: 309px; height: 206px; background: url(../Images/Bubbles_A.png) no-repeat; }
	.bubbleB { width: 295px; height: 213px; background: url(../Images/Bubbles_B.png) no-repeat; }
	.bubbleC { width: 286px; height: 223px; background: url(../Images/Bubbles_C.png) no-repeat; }
	.bubbleD { width: 259px; height: 221px; background: url(../Images/Bubbles_D.png) no-repeat; }
	.bubbleE { width: 290px; height: 225px; background: url(../Images/Bubbles_E.png) no-repeat; }
	.bubble p {
		font-size: 1.2rem;
	}
}


/* ==========================================================================
   Slider (carousel_small): Pfeile und Indikatoren erst bei Hover wie bisher (BP 11)
   ========================================================================== */
.carousel .carousel-control,
.carousel .carousel-indicators { transition: opacity .4s ease-in-out 0s; opacity: 0; }
.carousel:hover .carousel-control,
.carousel:hover .carousel-indicators,
.carousel:focus-within .carousel-control,
.carousel:focus-within .carousel-indicators { opacity: 1; }
.carousel .carousel-control { width: 50px; filter: none; }
@media (min-width: 576px) { .carousel .carousel-control { width: 75px; } }
@media (min-width: 768px) { .carousel .carousel-control { width: 100px; } }
.carousel .carousel-control-icon { position: absolute; top: 50%; transform: translate(0, -50%); width: auto; height: auto; max-width: none; padding: 1em; color: #809491; background: #fff none; border-radius: 0; transition: all .4s ease-in-out 0s; }
.carousel .carousel-control-icon:before { content: ''; display: block; width: .5em; height: .5em; border-top: 1px solid #809491; border-right: 1px solid #809491; transform: rotate(45deg); }
.carousel .carousel-control-prev .carousel-control-icon { left: -100%; }
.carousel .carousel-control-prev .carousel-control-icon:before { transform: rotate(225deg); }
.carousel .carousel-control-next .carousel-control-icon { right: -100%; }
.carousel:hover .carousel-control-prev .carousel-control-icon,
.carousel .carousel-control-prev:focus-visible .carousel-control-icon { left: 0; }
.carousel:hover .carousel-control-next .carousel-control-icon,
.carousel .carousel-control-next:focus-visible .carousel-control-icon { right: 0; }
@media (prefers-reduced-motion: reduce) {
	.carousel .carousel-control,
	.carousel .carousel-indicators,
	.carousel .carousel-control-icon { transition: none; }
}


/* ==========================================================================
   Cookie-Hinweis: Abstände wie bisher (BP 11: mobil 20px Innenabstand, Text-Abstand per margin)
   ========================================================================== */
.cc-window .cc-container { gap: 0; }
.cc-window .cc-message { margin-bottom: 1rem; }
@media screen and (max-width: 480px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
	.cc-window.cc-floating { padding: 20px; }
}


/* ==========================================================================
   Social-Links im Footer: Icon-Glyphen wie bisher (Icon-Font aus bootstrap_package 11:
   eckiges Facebook-"f", Instagram-Kamera), BP 16 verwendet runde Varianten
   ========================================================================== */
@font-face { font-family: 'BootstrapPackageIcon11'; src: url('../Fonts/bootstrappackageicon-bp11.woff') format('woff'); font-weight: 400; font-style: normal; }
.sociallinks .sociallinks-link-icon.bootstrappackageicon::before { font-family: 'BootstrapPackageIcon11' !important; }
/* Position der Icons wie bisher: oben bündig (BP 11 inline-block/vertical-align), mobil linksbündig */
.footer-sociallinks .sociallinks-link { align-items: flex-start; }
.footer-sociallinks .sociallinks-link-icon { line-height: 1; margin-top: 0.4px; }
@media (max-width: 575.98px) {
	.footer-sociallinks .sociallinks-link { justify-content: flex-start; }
}


/* ==========================================================================
   Text & Bild (textpic/textmedia): Spaltenabstände wie unter BP 11
   (Gutter über Innenabstand statt gap: 40px; untereinander 1rem Abstand)
   ========================================================================== */
.textmedia, .textpic { gap: 0; margin-left: -20px; margin-right: -20px; }
.textmedia-item, .textpic-item { padding-left: 20px; padding-right: 20px; }
.textmedia-gallery, .textpic-gallery { margin-bottom: 1rem; }
.textmedia-below .textmedia-text, .textmedia-below .textpic-text,
.textpic-below .textmedia-text, .textpic-below .textpic-text { margin-bottom: 1rem; }
.textmedia-below .textmedia-gallery, .textmedia-below .textpic-gallery,
.textpic-below .textmedia-gallery, .textpic-below .textpic-gallery { margin-bottom: 0; }
@media (min-width: 768px) {
	.textmedia-right .textmedia-item, .textmedia-right .textpic-item,
	.textmedia-left .textmedia-item, .textmedia-left .textpic-item,
	.textpic-right .textmedia-item, .textpic-right .textpic-item,
	.textpic-left .textmedia-item, .textpic-left .textpic-item { margin-bottom: 0; width: 50%; }
}


/* ==========================================================================
   Buttons (Primärfarbe): Hover-/Fokus-/Aktiv-Farben wie unter Bootstrap 4 / BP 11
   (BS 5 berechnet die Zustandsfarben anders und ergänzt einen schwarz/weißen Fokusring)
   ========================================================================== */
.btn-primary, .cc-btn {
	--bs-btn-hover-bg: #6d817e;
	--bs-btn-hover-border-color: #677a77;
	--bs-btn-active-bg: #677a77;
	--bs-btn-active-border-color: #617370;
	--bs-btn-focus-shadow-rgb: 147, 164, 162;
}
.btn-primary:focus, .btn-primary:focus-visible,
.cc-btn:focus, .cc-btn:focus-visible {
	color: #fff;
	background-color: #6d817e;
	border-color: #677a77;
	outline: 0;
	box-shadow: 0 0 0 0.2rem rgba(147, 164, 162, 0.5);
}
.btn-primary:not(:disabled):not(.disabled):active,
.cc-btn:not(:disabled):not(.disabled):active { background-color: #677a77; border-color: #617370; }