body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", sans-serif;
  font-weight: 200;
  
}

@font-face {
  font-family: "Confidential Regular";
  src: url('fonts/Confidential-Regular.eot');
  src: url('fonts/Confidential-Regular.eot') format('embedded-opentype'),
       url('fonts/Confidential-Regular.woff2') format('woff2'),
       url('fonts/Confidential-Regular.ttf') format('truetype');
  font-style: normal;
}

*,
::after,
::before {
	box-sizing: border-box
}


h1 {
		font-size: 2.25rem
	}


h2 {
		font-size: 2rem;
	}


h3 {
		font-size: 1.75rem;
	}


h4 {
		font-size: 1.5rem;
	}

h5 {
	font-size: 1.25rem;
}

h6 {
	font-size: 1rem;
}

p {
	margin-top: 0;
	margin-bottom: 1rem;
}

.price {
	font-size:1.3rem;
}


.caption {
	font-size: 1rem;
	line-height:1.6rem;
}

.small,
small {
	font-size: .875em;
}

.strong,
strong {
	font-weight: 600;
}

img {
	vertical-align: middle
}

#head {
	max-width:850px;
	margin:1rem auto 0 auto;
	height:3rem;
}

#logo {
	float:left;
	height:3rem;
	width:6%;
}
#merkliste {
	float:right;
	margin:0.2rem 0 0 1rem;
	background-image: url("img/list.png");
	background-size:contain;
	background-repeat:no-repeat;
	height:30px;
	width:30px;
}
.count{
	text-align:center;
	font-size:1rem;
	font-weight:600;
	margin:0.4rem 0.3rem 0 0rem;
	color: red !important;
}	
.count a {
	color: red !important;
	text-decoration:none;	
}

.landing {
	max-width:880px;
	margin: 0 auto;
}

.landing_image {
	width:100%;
}

.title {
  font-family: "Confidential Regular";
  font-size:1.6rem;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  margin-top:0.2rem;
  width:60%;
}


@media (max-width:768px) {

#head {
	margin:1rem 1rem 0.3rem 1rem;
}
#logo {
	height:3rem;
	width:10%;
}
#merkliste {
	float:right;
}
.post-list {
	margin:0 0.8rem;
}
.result {
	width:80% !important;
	margin:2rem 10%  !important;
	text-align: center;
	font-size: 14px  !important;
	font-weight: 100;
}	
.title {
  font-family: "Confidential Regular";
  font-size: 0.85rem;
  font-weight: normal;
  text-align: center;
  display: inline-block;
  margin-top: 0.7rem;
  width: 70%;
}

.landing_image {
	padding: 0 0.8rem;
}
}


.container,
.container-lg,
.container-md {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-right: auto;
	margin-left: auto
}

@media (min-width:576px) {
	.container {
		max-width: 540px
	}
}

@media (min-width:768px) {

	.container,
	.container-md {
		max-width: 720px
	}
}

@media (min-width:992px) {

	.container,
	.container-lg,
	.container-md {
		max-width: 902px
	}
}

@media (min-width:1200px) {

	.container,
	.container-lg,
	.container-md {
		max-width: 902px
	}
}

@media (min-width:1400px) {

	.container,
	.container-lg,
	.container-md {
		max-width: 902px
	}
}

.row {
	--bs-gutter-x: 1.5rem;
	--bs-gutter-y: 0;
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1 * var(--bs-gutter-y));
	margin-right: calc(-.5 * var(--bs-gutter-x));
	margin-left: calc(-.5 * var(--bs-gutter-x))
}

.row>* {
	flex-shrink: 0;
	width: 100%;
	max-width: 100%;
	padding-right: calc(var(--bs-gutter-x) * .5);
	padding-left: calc(var(--bs-gutter-x) * .5);
	margin-top: var(--bs-gutter-y)
}


@media (min-width:768px) {
	.col-md-6 {
		flex: 0 0 auto;
		width: 50%
	}	
}




.btn {
	color: #fff;
	background-color: #999;
	border: none;
	padding:1rem;
	border-radius:0.3rem;
}

.btn:hover {
	color: #FFF;
	background-color: #333;
}

.image {
	width: 100%
}

.align-top {
	vertical-align: top !important
}

.align-text-top {
	vertical-align: text-top !important
}

.d-flex {
	display: flex !important
}

.top-0 {
	top: 0 !important
}

.top-50 {
	top: 50% !important
}

.top-100 {
	top: 100% !important
}

.h-25 {
	height: 25% !important
}

.h-50 {
	height: 50% !important
}

.h-75 {
	height: 75% !important
}

.h-100 {
	height: 100% !important
}

.flex-fill {
	flex: 1 1 auto !important
}

.flex-row {
	flex-direction: row !important
}

.flex-shrink-0 {
	flex-shrink: 0 !important
}

.flex-shrink-1 {
	flex-shrink: 1 !important
}

.align-items-center {
	align-items: center !important
}

.align-content-center {
	align-content: center !important
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important
}

.my-1 {
	margin-top: .25rem !important;
	margin-bottom: .25rem !important
}

.my-2 {
	margin-top: .5rem !important;
	margin-bottom: .5rem !important
}

.my-3 {
	margin-top: 1rem !important;
	margin-bottom: 1rem !important
}

.my-4 {
	margin-top: 1.5rem !important;
	margin-bottom: 1.5rem !important
}

.my-5 {
	margin-top: 3rem !important;
	margin-bottom: 3rem !important
}

.me-0 {
	margin-right: 0 !important
}

.me-1 {
	margin-right: .25rem !important
}

.me-2 {
	margin-right: .5rem !important
}

.me-3 {
	margin-right: 1rem !important
}

.me-4 {
	margin-right: 1.5rem !important
}

.me-5 {
	margin-right: 3rem !important
}

.mb-0 {
	margin-bottom: 0 !important
}

.mb-1 {
	margin-bottom: .25rem !important
}

.mb-2 {
	margin-bottom: .5rem !important
}

.mb-3 {
	margin-bottom: 1rem !important
}

.mb-4 {
	margin-bottom: 1.5rem !important
}

.mb-5 {
	margin-bottom: 3rem !important
}

.p-0 {
	padding: 0 !important
}

.p-1 {
	padding: .25rem !important
}

.p-2 {
	padding: .5rem !important
}

.p-3 {
	padding: 1rem !important
}

.p-4 {
	padding: 1.5rem !important
}

.p-5 {
	padding: 3rem !important
}

.px-0 {
	padding-right: 0 !important;
	padding-left: 0 !important
}

.px-1 {
	padding-right: .25rem !important;
	padding-left: .25rem !important
}

.px-2 {
	padding-right: .5rem !important;
	padding-left: .5rem !important
}

.px-3 {
	padding-right: 1rem !important;
	padding-left: 1rem !important
}

.px-4 {
	padding-right: 1.5rem !important;
	padding-left: 1.5rem !important
}

.px-5 {
	padding-right: 3rem !important;
	padding-left: 3rem !important
}

.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important
}

.py-1 {
	padding-top: .25rem !important;
	padding-bottom: .25rem !important
}

.py-2 {
	padding-top: .5rem !important;
	padding-bottom: .5rem !important
}

.py-3 {
	padding-top: 1rem !important;
	padding-bottom: 1rem !important
}

.py-4 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important
}

.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important
}

.fs-1 {
	font-size: calc(1.375rem + 1.5vw) !important
}

.fs-2 {
	font-size: calc(1.325rem + .9vw) !important
}

.fs-3 {
	font-size: calc(1.3rem + .6vw) !important
}

.fs-4 {
	font-size: calc(1.275rem + .3vw) !important
}

.fs-5 {
	font-size: 1.25rem !important
}

.fs-6 {
	font-size: 1rem !important
}

.fw-bolder {
	font-weight: bolder !important
}

.text-center {
	text-align: center !important
}

.text-decoration-line-through {
	text-decoration: line-through !important
}

.text-dark {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important
}

.text-body {
	--bs-text-opacity: 1;
	color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important
}

@media (min-width:768px) {
	.d-md-flex {
		display: flex !important
	}

	.flex-md-fill {
		flex: 1 1 auto !important
	}

	.flex-md-row {
		flex-direction: row !important
	}

	.flex-md-shrink-0 {
		flex-shrink: 0 !important
	}

	.flex-md-shrink-1 {
		flex-shrink: 1 !important
	}

	.align-items-md-center {
		align-items: center !important
	}

	.align-content-md-center {
		align-content: center !important
	}

	.my-md-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important
	}

	.my-md-1 {
		margin-top: .25rem !important;
		margin-bottom: .25rem !important
	}

	.my-md-2 {
		margin-top: .5rem !important;
		margin-bottom: .5rem !important
	}

	.my-md-3 {
		margin-top: 1rem !important;
		margin-bottom: 1rem !important
	}

	.my-md-4 {
		margin-top: 1.5rem !important;
		margin-bottom: 1.5rem !important
	}

	.my-md-5 {
		margin-top: 3rem !important;
		margin-bottom: 3rem !important
	}

	.me-md-0 {
		margin-right: 0 !important
	}

	.me-md-1 {
		margin-right: .25rem !important
	}

	.me-md-2 {
		margin-right: .5rem !important
	}

	.me-md-3 {
		margin-right: 1rem !important
	}

	.me-md-4 {
		margin-right: 1.5rem !important
	}

	.me-md-5 {
		margin-right: 3rem !important
	}

	.mb-md-0 {
		margin-bottom: 0 !important
	}

	.mb-md-1 {
		margin-bottom: .25rem !important
	}

	.mb-md-2 {
		margin-bottom: .5rem !important
	}

	.mb-md-3 {
		margin-bottom: 1rem !important
	}

	.mb-md-4 {
		margin-bottom: 1.5rem !important
	}

	.mb-md-5 {
		margin-bottom: 3rem !important
	}

	.p-md-0 {
		padding: 0 !important
	}

	.p-md-1 {
		padding: .25rem !important
	}

	.p-md-2 {
		padding: .5rem !important
	}

	.p-md-3 {
		padding: 1rem !important
	}

	.p-md-4 {
		padding: 1.5rem !important
	}

	.p-md-5 {
		padding: 3rem !important
	}

	.px-md-0 {
		padding-right: 0 !important;
		padding-left: 0 !important
	}

	.px-md-1 {
		padding-right: .25rem !important;
		padding-left: .25rem !important
	}

	.px-md-2 {
		padding-right: .5rem !important;
		padding-left: .5rem !important
	}

	.px-md-3 {
		padding-right: 1rem !important;
		padding-left: 1rem !important
	}

	.px-md-4 {
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important
	}

	.px-md-5 {
		padding-right: 3rem !important;
		padding-left: 3rem !important
	}

	.py-md-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important
	}

	.py-md-1 {
		padding-top: .25rem !important;
		padding-bottom: .25rem !important
	}

	.py-md-2 {
		padding-top: .5rem !important;
		padding-bottom: .5rem !important
	}

	.py-md-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important
	}

	.py-md-4 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important
	}

	.py-md-5 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important
	}

	.text-md-center {
		text-align: center !important
	}
}

@media (min-width:992px) {
	.d-lg-flex {
		display: flex !important
	}

	.flex-lg-fill {
		flex: 1 1 auto !important
	}

	.flex-lg-row {
		flex-direction: row !important
	}

	.flex-lg-shrink-0 {
		flex-shrink: 0 !important
	}

	.flex-lg-shrink-1 {
		flex-shrink: 1 !important
	}

	.align-items-lg-center {
		align-items: center !important
	}

	.align-content-lg-center {
		align-content: center !important
	}

	.my-lg-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important
	}

	.my-lg-1 {
		margin-top: .25rem !important;
		margin-bottom: .25rem !important
	}

	.my-lg-2 {
		margin-top: .5rem !important;
		margin-bottom: .5rem !important
	}

	.my-lg-3 {
		margin-top: 1rem !important;
		margin-bottom: 1rem !important
	}

	.my-lg-4 {
		margin-top: 1.5rem !important;
		margin-bottom: 1.5rem !important
	}

	.my-lg-5 {
		margin-top: 3rem !important;
		margin-bottom: 3rem !important
	}

	.me-lg-0 {
		margin-right: 0 !important
	}

	.me-lg-1 {
		margin-right: .25rem !important
	}

	.me-lg-2 {
		margin-right: .5rem !important
	}

	.me-lg-3 {
		margin-right: 1rem !important
	}

	.me-lg-4 {
		margin-right: 1.5rem !important
	}

	.me-lg-5 {
		margin-right: 3rem !important
	}

	.mb-lg-0 {
		margin-bottom: 0 !important
	}

	.mb-lg-1 {
		margin-bottom: .25rem !important
	}

	.mb-lg-2 {
		margin-bottom: .5rem !important
	}

	.mb-lg-3 {
		margin-bottom: 1rem !important
	}

	.mb-lg-4 {
		margin-bottom: 1.5rem !important
	}

	.mb-lg-5 {
		margin-bottom: 3rem !important
	}

	.p-lg-0 {
		padding: 0 !important
	}

	.p-lg-1 {
		padding: .25rem !important
	}

	.p-lg-2 {
		padding: .5rem !important
	}

	.p-lg-3 {
		padding: 1rem !important
	}

	.p-lg-4 {
		padding: 1.5rem !important
	}

	.p-lg-5 {
		padding: 3rem !important
	}

	.px-lg-0 {
		padding-right: 0 !important;
		padding-left: 0 !important
	}

	.px-lg-1 {
		padding-right: .25rem !important;
		padding-left: .25rem !important
	}

	.px-lg-2 {
		padding-right: .5rem !important;
		padding-left: .5rem !important
	}

	.px-lg-3 {
		padding-right: 1rem !important;
		padding-left: 1rem !important
	}

	.px-lg-4 {
		padding-right: 1.5rem !important;
		padding-left: 1.5rem !important
	}

	.px-lg-5 {
		padding-right: 3rem !important;
		padding-left: 3rem !important
	}

	.py-lg-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important
	}

	.py-lg-1 {
		padding-top: .25rem !important;
		padding-bottom: .25rem !important
	}

	.py-lg-2 {
		padding-top: .5rem !important;
		padding-bottom: .5rem !important
	}

	.py-lg-3 {
		padding-top: 1rem !important;
		padding-bottom: 1rem !important
	}

	.py-lg-4 {
		padding-top: 1.5rem !important;
		padding-bottom: 1.5rem !important
	}

	.py-lg-5 {
		padding-top: 3rem !important;
		padding-bottom: 3rem !important
	}

	.text-lg-center {
		text-align: center !important
	}
}

@media (min-width:1200px) {
	.fs-1 {
		font-size: 2.5rem !important
	}

	.fs-2 {
		font-size: 2rem !important
	}

	.fs-3 {
		font-size: 1.75rem !important
	}

	.fs-4 {
		font-size: 1.5rem !important
	}
}

/*--------------------------------------------------------------
# Übersichtsseite
--------------------------------------------------------------*/
.post-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 293px));
  justify-content: center;
  grid-gap: 1px;
}
.post {
  cursor: pointer;
  position: relative;
  display: block;
}
.post-image {
  margin: 0;
}
.post-image img {
  width: 100%;
  vertical-align: top;
}
.post-overlay {
  background: rgba(0,0,0, .4);
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
}
.post:hover .post-overlay{
			display: flex;
}

.post-date,
.post-number {
  font-family: "Confidential Regular";
  width: 100%;
  margin: 5px;
  font-size:2rem;
  font-weight: normal;
  text-align: center;
  display: inline-block;
}

.post-date {
	float:left;
}

/*--------------------------------------------------------------
# Detailseite
--------------------------------------------------------------*/


@media screen and (max-width: 768px) {
  .post-date,
  .post-number {
  	font-size:1.2rem;
}
}

/*--------------------------------------------------------------
# Suche
--------------------------------------------------------------*/


#suche {
  margin: 0;
  display: inline-block;
  position: relative;
  height: 40px;
  float: right;
  padding: 0;
  position: relative;
}

input[type="text"] {
  height: 40px;
  font-size: 23px;
  display: inline-block;
  font-weight: 100;
  border: none;
  outline: none;
  color: #555;
  padding: 0px 60px 10px 0;
  width: 0px;
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  z-index: 3;
  transition: width .4s cubic-bezier(0.000, 0.795, 0.000, 1.000);
  cursor: pointer;
}

input[type="text"]:focus:hover {
  border-bottom: 1px solid #BBB;
}

input[type="text"]:focus {
  width: 17rem;
  z-index: 1;
  border-bottom: 1px solid #BBB;
  cursor: text;
}
input[type="submit"] {
  height: 37px;
  width: 33px;
  display: inline-block;
  color:red;
  float: right;
  background: url(img/search.png) center center no-repeat;
  background-size: contain;
  text-indent: -10000px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  cursor: pointer;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity .4s ease;
}

input[type="submit"]:hover {
  opacity: 0.8;
}

/*--------------------------------------------------------------
# Suchergebnis
--------------------------------------------------------------*/

.result {
	width:50%;
	margin:2rem 25%;
	text-align: center;
	font-size: 18px;
	font-weight: 100;
}