/* General Style & Bootstrap Overrides: */

::selection {

	background: #F8B2A7;

	color: #851B0B;

}

body {

	background: #ff000004;

	font-family: "Open Sans", "Verdana", sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

.btn.focus,

.btn:focus {

	box-shadow: 0 1px 8px rgba(2, 0, 0, 0.3) !important;

}

.btn {

	padding: 0.438rem 0.8rem;

	border: none;

	border-radius: 0.3rem;

	line-height: 1.5;

	font-size: 0.95rem;

	text-align: center;

	vertical-align: middle;

}

.btn-primary {

	background-color: #B8250F;

}

.btn-primary:hover,

.btn-primary:focus {

	background-color: #8f1c0a;

}

.btn-primary:not(:disabled):not(.disabled):active {

	background-color: #721608;

}

h1, h2, h3, h4, h5, h6,

header {

	font-family: "Alice", "Georgia", Cambria, "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}

header ~ * {

	filter: blur(0px);  /* This fixes some weird behavior where the backdrop filter wouldn't apply */

}

a {

	color: #B8250F;

}

a:hover,

a:focus {

	color: #8f1c0a;

}

a:active {

	color: #721608;

}

p {

	font-family: unset;

}

p > br {

	margin-bottom: 20px;

	height: 20px;

}

hr {

	border-color: #E7E5DE;

}

label {

	user-select: none;

}

input[type="checkbox"] {

	filter: hue-rotate(173deg);

}

.bg-blured {

	background: #FFFDFDcc;

	-webkit-backdrop-filter: blur(15px);

	backdrop-filter: blur(15px);

}



/* Main Style: */

header.navbar {

	text-align: center;

	font-size: 1.1rem;

	border-bottom: 1px solid rgba(2,0,0,0.1);

}

header.navbar-light .navbar-nav .nav-link {

	color: #514949;

}

header.navbar-light .navbar-nav .nav-link:hover,

header.navbar-light .navbar-nav .nav-link:focus {

	color: black;

}

header .nav-link.active {

	font-weight: bold;

}

.times-bubble {

	color: #514949;

	border-radius: 70% 30% 60% 40%/45% 36% 64% 55%;

	width: 300px;

}

.hero {

	position: relative;

	background-color: #B8250F;

	background-repeat: no-repeat;

	background-position: center;

	background-size: cover;

	border-radius: 0;

}

.hero > * {

	position: relative;

}

.hero::before {

	content: "";

	position: absolute;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: #02000066;

}

.hero h2 {

	text-shadow: 0 1px 10px #02000044;

}

.content {

	min-height: 50vh;

}

.iconbox > img {

	height: 65px;

	margin-bottom: 1rem;

}

.card-fancy {

	position: relative;

	background: none;

	border-width: 20px;

	border-style: solid;

	-o-border-image: url(../images/Kartenecke.png) 31 stretch;

	-moz-border-image: url(../images/Kartenecke.png) 31 stretch;

	-webkit-border-image: url(../images/Kartenecke.png) 31 stretch;

	border-image: url(../images/Kartenecke.png) 31 stretch;

	mix-blend-mode: darken;

}

.card-fancy-transparent {

	-o-border-image: url(../images/Kartenecke-transparent.png) 31 stretch;

	-moz-border-image: url(../images/Kartenecke-transparent.png) 31 stretch;

	-webkit-border-image: url(../images/Kartenecke-transparent.png) 31 stretch;

	border-image: url(../images/Kartenecke-transparent.png) 31 stretch;

}

.card-fancy::before {

	content: "";

	position: absolute;

	z-index: -1;

	top: -4px;

	left: -4px;

	width: calc(100% + 8px);

	height: calc(100% + 8px);

	background: #F9F9F9;

}

.card-fancy-transparent::before {

	content: unset;

	display: none;

}

.card-fancy > p:last-child {

	margin-bottom: 0;

}

.card-link:hover {

	filter: brightness(0.9);

}

.card-link > h5 {

	color: black;

}

.card-link:hover > h5 {

	text-decoration: underline;

}

.card-link > p {

	color: #686666;

}

.card-link:hover > p {

	color: #444242;

}

.card-map {

	position: relative;

	height: 600px;

	max-height: 50vw;

	min-height: 400px;

	overflow: hidden;

}

.card-map-storemap {

	height: calc(100% + 60px);

	margin-top: -60px;

}

.map-info {

	position: absolute;

	z-index: 1000;

	display: flex;

	top: 0;

	right: 0;

	bottom: 0;

	left: 0;

	background: #FFFDFDaa;

	justify-content: center;

	align-items: center;

	opacity: 1;

	transition: opacity 0.3s ease-in-out;

}

.map-info--hidden {

	opacity: 0;

	pointer-events: none;

}

.leaflet-marker-pane > img {

	filter: hue-rotate(-205deg) brightness(0.95);

}

#found_stores {

	display: flex;

	justify-content: center;

	flex-flow: wrap;

}

.store_address_highlight {

	background: #b8250f26;

}

.blockquote-info {

	position: relative;

	padding-left: 45px;

	font-size: 0.95em;

	font-family: "Georgia", Cambria, "Alice", "Times New Roman", Times, serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

	color: #707579;

}

.blockquote-info::before {

	content: "i";

	position: absolute;

	font-size: 500%;

	line-height: 0;

	color: #e7e7e7;

	top: 50%;

	left: 0;

}

.event-box hr {

	margin-top: -0.2rem;

	margin-bottom: 0.5rem;

	border-top: 2px solid rgba(200,200,200,0.25);

}

.gallery-box {

	--margin: 8px;

	--images-per-row: 2;

	/*display: flex;

	justify-content: space-between;

	flex-wrap: wrap;*/

	margin: 0 calc(0px - var(--margin));

	font-size: 0;

}

.gallery-box > a {

	display: inline-block;

	position: relative;

	/*width: calc(calc(100% / var(--images-per-row)) - calc(calc(calc(var(--images-per-row) + 1) / var(--images-per-row)) * var(--margin)));*/

	--width: calc(100% / var(--images-per-row) - var(--margin));

	width: var(--width);

	margin: 0 calc(var(--margin) / 2);

	margin-bottom: var(--margin);

}

.gallery-img {

	width: 100%;

	height: 100%;

	border-radius: 3px;

}

.gallery-img:hover {

	filter: brightness(0.7);

}

#plz-inputbox {

	position: relative;

}

#plz-inputbox::after {

	content: "";

	position: absolute;

	display: block;

	z-index: -1;

	width: calc(100% - 20px);

	top: 0px;

	left: 10px;

	background-color: transparent;

	color: transparent;

	border: 1px solid transparent;

	border-radius: 0 0 4px 4px;

	font-size: 80%;

	padding: 6px 9px 4px 9px;

	transition: top 0.4s ease-out,

				background-color 0.2s ease,

				color 0.2s ease,

				border-color 0.2s ease;

}

#plz-inputbox.plz-invalid::after,

#plz-inputbox.plz-valid::after {

	top: calc(100% - 4px);

}

#plz-inputbox.plz-invalid::after {

	content: "✗ Keine gültige Postleitzahl";

	background-color: #F8DFDE;

	color: #96474b;

	border-color: #EFD5D8;

}

#plz-inputbox.plz-valid::after {

	content: "✓ Gültige Postleitzahl";

	background-color: #DDF3DE;

	color: #537a50;

	border-color: #D9EDCA;

}

#plz-input {

	width: 100%;

}

.edit-box h3 {

	font-size: 1.5945rem;

}

#edithook-poster {

	user-select: none;

}

#edithook-poster img {

	max-height: 300px;

	width: auto;

	max-width: 100%;

}

#edit-wrapper #edithook-poster::after {

	content: "Hier klicken \A um das Poster \A auszutauschen";

	position: absolute;

	display: flex;

	top: 0;

	right: 15px;

	bottom: 0;

	left: 15px;

	align-items: center;

	justify-content: center;

	white-space: pre;

	background: #00000088;

	color: #FFF;

	font-size: 1.5em;

	text-align: center;

	line-height: 1.25;

	cursor: pointer;

	backdrop-filter: blur(5px);

	opacity: 0;

}

#edithook-poster:hover::after {

	opacity: 1;

}

footer {

	background: #B8250F;

}

footer hr {

	margin-top: 0.25rem;

	margin-bottom: 0.15rem;

	border-top: 2px solid rgba(200,200,200,0.25);

}

.footer-copyright {

	background: #00000022;

}



/* Small devices (landscape phones, 576px and up): */

@media (max-width: 576px) {

	.jumbotron.hero img {

		height: unset !important;

	}

}

@media (min-width: 576px) {

	/* noting here yet */

}

/* Medium devices (tablets, 768px and up): */

@media (min-width: 768px) {

	.gallery-box {

		--images-per-row: 3;

	}

	.gallery-box > a {

		height: 151.55px;

	}

}

/* Large devices (desktops, 992px and up): */

@media (min-width: 992px) {

	header .navbar-nav {

		width: 100%;

		justify-content: center;

	}

	header.navbar-expand-lg .navbar-nav .nav-link {

		padding-right: 1.25rem;

		padding-left: 1.25rem;

	}

	.gallery-box {

		--images-per-row: 4;

	}

	.gallery-box > a {

		height: 152.33px;

	}

}

/* Extra large devices (large desktops, 1200px and up): */

@media (min-width: 1200px) {

	.gallery-box {

		--images-per-row: 5;

	}

	.gallery-box > a {

		height: 144.8px;

	}

}

/* Custom Breakpoints: */

@media (min-width: 1250px) {

	.times-bubble {

		position: absolute;

		top: -55px;

		right: calc(10vw - 140px);

	}

}