html {
	font-feature-settings: normal;
	font-variation-settings: normal;
}

body {
	background-color: #eee;
	max-width: 1920px;

	font-family: " OpenSans-Regular",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;

	--screen-margin: 2rem;
	--body-content-max: 80rem;

	--footer-bgc: 200 15% 20%;
	--footer-col: 45 30% 98%;

	--color-theme: #829c79;
	--color-white: hsl(0, 0%, 100%);
	--color-gray-800: hsl(220, 15%, 18%);
	--color-text-primary: var(--color-gray-800);
	--color-bg-primary: var(--color-white);

	--font-size-xs: 0.75rem;
	--font-size-sm: 0.875rem;
	--font-size-base: 1rem;
	--font-size-lg: 1.125rem;
	--font-size-xl: 1.25rem;
	--font-size-2xl: 1.5rem;
	--font-size-3xl: 1.875rem;
	--font-size-4xl: 2.25rem;
	--font-size-5xl: 3rem;
	--font-size-6xl: 3.75rem;

	--font-weight-medium: 500;
	--line-height-normal: 1.5;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-6: 1.5rem;
	--radius-lg: 0.75rem;
	--transition-base: 250ms ease;

	scrollbar-gutter: stable;
}

body > h1 {
	position: absolute;
}

#logo > a {
	display: block;
	background-image: url(../img/ottosliebe-logo.svg);
	background-size: 100%;
	width: 12rem;
	height: 6rem;
	left: 2rem;
	transition-property: width, height;
	transition: .2s ease-in-out;
}
@media screen and (max-width: 90rem) {
	header #logo {
		width: 12rem;
		height: 4rem;
		left: 2rem;
	}
	.sticky header #logo {
		top: -1px;
		width: 10rem;
		height: 4rem;
	}
}
@media screen and (max-width: 78rem) {
	#logo > a {
		top: 0;
		left: 0;
	}
}

#footer {
	background-color: #f7f3e8;
	color: #454647;
	text-shadow: unset;
}

#footer .menus a {
	color: #829c79;
}
#footer .menus a:hover {
	color: inherit;
	text-decoration: underline;
}

#footer h4 {
	font-size: var(--step-0);
}

#footer .links .img img {
	box-shadow: 0 0 8px #0002;
}
#footer .links a[href*="flower"] img {
	border-radius: 50%;
}

#footer .bottom {
	font-size: unset;
	color: #fff;
}

#footer .bottom .center {
	grid-template-columns: 1fr 1fr;
  	grid-template-areas:
	"copy legal";
}
#footer .copy {
	justify-self: end;
	padding-inline: .5rem;
}
#footer .legal {
	justify-self: start;
	padding-inline: .5rem;
}
#footer .menus .center > :nth-child(1),
#footer .menus .center > :nth-child(3) {
	text-align: center;
}

.sticky #header,
.sticky #header .header {
	height: 4rem;
	border-bottom: 1px solid hsl( var(--footer-bgc) / .1);
}

.sticky #logo > a {
	height: 4rem;
	width: 8rem;
}

.sticky #nav .primary {
	line-height: 4rem;
}




.img {
	display: grid;
}

.layout-row .txt {
	margin: 0;
	padding: 0 0 0 2rem;
}

.column-screen.layout-row .txt {
	padding: 5vw;
}



#nav .primary {
	justify-content: end;
	line-height: 6rem;
	padding-inline: 3rem;
	gap: 1rem;
}

menu a {
	padding: 0 .5rem;
}


section.header {
	text-align: center;
}

.custom-bg {
	background-color: #f7f3e8;
}


div[class*="col-"] {
	align-items: start;
}


menu a[href="/anfahrt"]:after {
	content: "!";
	padding: .25rem;
	color: #fff;
	background-color: #a00;
	border-radius: 50%;
	display: inline-block;
	text-align: center;
	line-height: .9;
	width: 1rem;
	height: 1rem;
	font-size: .6rem;
	font-weight: 900;
	transform: translate(.1rem, -.33rem);
}


.contenttable {
	width: 100%;
}

#c28 img {
	min-height: 350px;
}



/* newsletter section */

section.cta {
	border-top: 1px solid #deddd9;
	padding-block-start: var(--space-2xl);
	text-align: center;
}

section.cta p + p {
	margin-block-start: 1.25rem;
}
section.cta p a  {
	border-radius: 3rem;
	border: 1px solid;
	text-decoration: none;
	padding: .5rem 3rem;
	line-height: 2rem;
	transition: all .1s ease-in-out;
	border-color: #829c79;
	background-color: #829c79;
	color: #fff;
}
section.cta p a:hover {
	background-color: #fff;
	color: #829c79;
}


#c4 h2 { margin-bottom: 0; }
#c4 h3 { margin-top: 0; color: inherit; }


#c15 .imgs.col-2 {
	grid-template-columns: repeat(2, 100px);
	justify-content: center;
	gap: 2rem;
}


.hero {
}



#mainMenuOpen {
	top: 1rem;
	left: calc(-4.5rem + 100vw);
	font-size: 3rem;
	transition: top .1s ease-in-out;
}
.sticky #mainMenuOpen {
	top: -1px;
	font-size: 3rem;
}





/* newsletter form */

.tx-fp-newsletter .grouped {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.tx-fp-newsletter .inline.field {
	width: calc(33.333% - .666rem);
}

.tx-fp-newsletter .field:not(.inline) {
	width: 100%;
	flex: 1 1 100%;
}

.tx-fp-newsletter .submit {
	margin-top: 1rem;
}


/* News */

.news-list-view {
	display: flex;
	flex-flow: column;
	gap: 4rem;
}

.news-list-view h3 {
	margin-top: var(--space-3xs);
	margin-bottom: var(--space-3xs);
}
.news-list-view h3 a {
	text-decoration: none;
}

.news-list-view.startlist a {
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.news-list-view .media-element {
	overflow: hidden;
}
.news-list-view a img {
  transition: .4s ease-in-out;
}

.news-list-view a:hover img {
  transform: scale(1.1);
}

.news-list-view.startlist a .title {
	text-decoration: none;
}


/* Newsevents */

.newsevents-menu-view {
	display: flex;
	flex-flow: column;
	gap: 1rem;
	align-items: center;
	margin: 0 auto;
}

.newsevents-menu-view .year {
	margin-block-start: var(--space-3xs);
	margin-block-end: var(--space-3xs);
}

.newsevents-menu-view .month {
	font-family: "Oswald";
	font-size: 1.1rem;
}

.newsevents-menu-view .date {
	font-family: "Oswald";
	font-size: 1.05rem;
	color: #181818;
}

.newsevents-menu-view .item + .year,
.newsevents-menu-view .item + .month {
	margin-block-start: 1rem;
}


.news-single {
	margin-block-start: 0;
	margin-block-end: var(--space-xl);
}

.news-single img {
	width: 100%;
	height: auto;
}

.news-single h1 {
	margin-block: 0 var(--space-xs);
}