/* Bootstrap 3 leftovers + Canvas container, Frontend only.
   Admin bleibt bei Bootstrap 3. */

.img-responsive {
	max-width: 100%;
	height: auto;
	display: block;
}

.form-group {
	margin-bottom: 1rem;
}

.pull-left { float: left !important; }
.pull-right { float: right !important; }

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

.hidden-xs {
	display: inherit !important;
}
.visible-xs {
	display: none !important;
}
@media (max-width: 767.98px) {
	.hidden-xs { display: none !important; }
	.visible-xs { display: block !important; }
}

.col-xs-1 { flex: 0 0 auto; width: 8.33333333%; }
.col-xs-2 { flex: 0 0 auto; width: 16.66666667%; }
.col-xs-3 { flex: 0 0 auto; width: 25%; }
.col-xs-4 { flex: 0 0 auto; width: 33.33333333%; }
.col-xs-5 { flex: 0 0 auto; width: 41.66666667%; }
.col-xs-6 { flex: 0 0 auto; width: 50%; }
.col-xs-7 { flex: 0 0 auto; width: 58.33333333%; }
.col-xs-8 { flex: 0 0 auto; width: 66.66666667%; }
.col-xs-9 { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.33333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.66666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

.row {
	--bs-gutter-x: 30px;
	--bs-gutter-y: 0;
}

@media (min-width: 1200px) {
	.container,
	.container-lg,
	.container-md,
	.container-sm,
	.container-xl,
	.container-xxl {
		max-width: 1170px;
	}
}

.panel {
	margin-bottom: 1rem;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
}
.panel-heading {
	padding: 10px 15px;
	border-bottom: 1px solid #ddd;
}
.panel-title {
	margin: 0;
	font-size: 1rem;
}
.panel-body {
	padding: 15px;
}
.panel-collapse.collapse:not(.show):not(.in) {
	display: none;
}
.panel-collapse.collapse.show,
.panel-collapse.collapse.in {
	display: block;
}

.accordion-item {
	margin-bottom: .5rem;
	background: #fff;
}
.accordion-button {
	width: 100%;
	text-align: left;
	background: transparent;
	border: 0;
	box-shadow: none;
	font: inherit;
	color: inherit;
}
.accordion-button:not(.collapsed) {
	background: transparent;
	box-shadow: none;
	color: inherit;
}
.accordion-button::after {
	background-image: none !important;
	width: auto;
	height: auto;
	margin-left: auto;
}

button.close {
	padding: 0;
	background: transparent;
	border: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	opacity: .5;
}
button.close:hover {
	opacity: 1;
}

.modal.in {
	display: block;
}
.modal.fade.in {
	opacity: 1;
}

#copyrights ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
#copyrights p {
	margin-bottom: 0;
}

.container-full {
	width: 100%;
}

.padl0 {
	padding-left: 0 !important;
}

#breadcrumb {
	padding: 12px 0 8px;
}
#breadcrumb ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
#breadcrumb ul li {
	float: none;
}
#breadcrumb ul li a {
	color: #000;
	text-transform: none;
}
#content {
	clear: both;
	width: 100%;
}

/* Verschachtelte Templates (tref 1 ohne Schluss) nicht in der halben Spalte lassen */
#content .row > [class*="col-"]:not(:has(*)),
#content .row > [class*="col-"]:has(> p:only-child:empty) {
	display: none;
}
#content .row > section ~ [class*="col-"]:has(form.frmContact),
#content .row .row > [class*="col-"]:has(form.frmContact) ~ [class*="col-"]:has(form.frmContact),
#content .row > section:has(form.frmContact) ~ section:has(form.frmContact) {
	display: none !important;
}
#content .row > section {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
#content .row > section > .container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.row.clowns,
.row.events {
	--bs-gutter-x: 24px;
	--bs-gutter-y: 24px;
	overflow-x: clip;
}
.row.clowns .item,
.row.events .item {
	min-width: 0;
	display: flex;
}
.clowns .rahmen,
.events .rahmen {
	margin-right: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.events .rahmen:not([ref]) {
	cursor: default;
}
.clownImg {
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #eee;
}
.clowns .inner_news {
	padding: 16px 18px 18px;
	margin-top: auto;
	text-align: center;
	background: #fff;
}
.clowns .inner_news p {
	margin: 0;
}
.clowns .inner_news p a {
	display: block;
	padding: 0;
	color: #2c4491;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}
.clowns .rahmen:hover .inner_news a {
	color: #c4122f;
}
.img_event {
	aspect-ratio: 5 / 3;
	overflow: hidden;
	background: #eee;
}
.clownImg img,
.img_event img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

#copyrights .row {
	align-items: flex-start;
}
#copyrights .row > .clear {
	display: none;
}
#copyrights img {
	max-width: 100%;
	height: auto;
}
#copyrights .feature-box {
	margin-bottom: 1.5rem;
}

#kontaktformular input[type="checkbox"],
#kontaktformular input[type="radio"],
.form-control[type="checkbox"],
.form-control[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	margin: 4px 10px 0 0;
	display: inline-block;
	vertical-align: top;
	padding: 0 !important;
	appearance: auto;
	-webkit-appearance: auto;
	background-image: none;
	border: 1px solid #767676;
	box-shadow: none;
	accent-color: #2c4491;
}
#kontaktformular input,
#kontaktformular textarea {
	box-sizing: border-box;
	padding: 6px 10px;
}
#kontaktformular textarea {
	min-height: 8em;
	margin-bottom: 1em;
}
#kontaktformular .state-normal {
	margin-bottom: 1rem;
}
#kontaktformular .rightFORM input {
	width: 120px !important;
	display: inline-block;
}
#content .row > [class*="col-"]:has(form.frmContact) {
	flex: 0 0 auto;
	width: 100%;
	max-width: 640px;
}

.accordion-button {
	padding: 12px 15px;
}
.accordion-body {
	padding: 0 15px 15px;
}