/* main heading styling */

*:focus {
	outline-color: invert;
	outline-style: solid;
	outline-width: thin;
	outline-offset: -2px;
}

body > h1 {
	position: relative;
	top: 0;
	text-align: center;
	margin-block-start: var(--header-height);
	padding-block: var(--space-2xl);
	padding-inline: var(--screen-margin);
	font-size: var(--step-3);
}

@media screen and (max-width: 70rem) {
	body > h1 {
		margin-block-start: var(--sticky-header-height);
		padding-block: var(--space-l);
	}
}
@media screen and (max-width: 46rem) {
	body > h1 {
		font-size: var(--step-1);
	}
}


/* accessible skip link */
.skiplink {
	position: absolute;
	left: -9999px;
	z-index: 999;
	padding: 1em;
	background-color: black;
	color: white;
	opacity: 0;
}
.skiplink:focus {
	left: 50%;
	transform: translateX(-50%);
	opacity: 1;
}









/* --- */

#header {
	padding: 0;
	z-index: 1234;
}

#header .header {
	grid-column: screen;
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-rows:    1fr;
	/* width: 100%; */
}

@media screen and (max-width: 90rem) {
	#header .header {
		grid-column: screen-start/screen-end;
		grid-template-columns: 1fr 4rem;
		grid-template-rows   : 1fr;
		height: 4rem;
	}
}

.sticky #header {
	box-shadow: 0 0 32px rgba(0,0,0,.067);
}


/* logo */

#logo {
	background-color: var(--head-bgc);
	grid-area: 1 / 1 / 1 / 1;
	z-index: 123;
}

#logo > a {
	position   : relative;
	top        : 1.5rem;
	left       : 2rem;
	display    : inline-block;
	/*background: transparent url(../img/logo.svg) center center / 100% auto no-repeat; /* https://logoipsum.com/artwork/221 */
	border     : none;
	width      : 12rem;
	height     : 3rem;
	/*text-indent: -1000%; */
	text-decoration: none;
	color      : #000;
	font-size: 1.566rem;
	overflow   : hidden;
	/*transition : all .2s ease-in-out; */
	translate  : 0; /* adjust here for visual pairing with the menu button */
}

#logo > a em:after {
	content: "Brinkmann-Weinkauf";
	display: block;
	background-color: #fff;
	position: absolute;
	bottom: -0.1rem;
	left: .5rem;
	width: 8rem;
	height: 1.25rem;
	background: url(../img/brinkmann_weinkauf_black.svg) left center / 100% auto no-repeat ;
	overflow: hidden;
	text-indent: 100%;
}
#logo a em {
	font-style: normal;
}

#logo a span {
	display: none;
}


@media screen and (min-width: 90.001rem) {
	.sticky #logo a {
		line-height: 3rem;
		top   : .5rem;
	}
	.sticky #logo > a em:after {
		display: none;
	}
	.sticky #header .center {
		height: 4rem;
		grid-template-rows: 4rem 1fr;
	}
	.sticky #menu {
		height: 4rem;
		margin-top: 0;
	}
	.sticky #nav {
		grid-template-rows: 3.75em 1fr;
	}
}
@media screen and (max-width: 90rem) {
	#logo {
		width: 100%;
		height: 4rem;
	}
	#logo a {
		top: .333rem;
		height: 3rem;
		translate: 0;
		background-size: auto 2rem;
		line-height: 2.25rem;
	}
}

#menu {
  grid-row-start   : 1;
  grid-row-end     : 1;
  grid-column-start: 2;
  grid-column-end  : 5;
  background-color : var(--menu-bgc);
  height           : 6rem;
}
@media screen and (max-width: 70rem) {
	#menu {
		height: 4rem;
	}
}


/* hero */
.hero {
	order: 22;
	display: block;
	margin: 0 auto;
	aspect-ratio: 3.75/1;
	width: 100%;
	max-width: 1920px;
	min-height: 120px;
	background: var(--bgimg) center center / cover no-repeat;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	position: relative;
}

#date {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
	background-color: #fff8;
}
#date p {
	margin: 0;
	padding: 0.25rem;
	font-size: .8rem;
}




/* header nav layout */

#nav {
	--nav-gap: .25rem;
	display: grid;
	grid-template-rows   : 6rem;
	grid-template-columns: 4fr 1fr;
	grid-template-areas  :
		"primary secondary utilities";
	grid-row-gap: var(--nav-gap);
	padding: 0;
}
@media screen and (max-width: 70rem) {
	#nav {
		display: none;
	}
}

#nav ul {
	margin: 0;
	padding: 0;
	width: auto;
}

#nav .primary {
	grid-area: primary;
	justify-self: center;
	align-content: end;
	/* margin-top: 1.5rem; */
	/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
	/* width: 100%; */
	min-width: 20rem;
}
.sticky #nav .primary {
}

#nav .secondary {
	grid-area: secondary;
	justify-self: end;
	/* margin-right: 2.5rem; */
	/* background: linear-gradient(to bottom,#888 0%,#888 2px,#fff 2px,#fff 100%) */
}

#nav .utilities {
	grid-area: utilities;
	justify-self: end;
	list-style: none;
	margin-right: 1.5rem;
}
.sticky #nav .utilities {
}
#nav .utilities li {
	display: inline;
}

#nav .utilities li a {
	display: inline-block;
	padding: 1rem 0;
	text-decoration: none;
	font-size: 0.8rem;
}
#nav .utilities li a:hover {
	color: #009de4;
}

#nav menu > li {
	line-height: 4rem;
}
#nav menu .dropdown > li {
	line-height: 1.5rem;
}
#nav menu .dropdown > li:last-child {
  margin-bottom: .66rem;
}
.sticky #nav menu > li {
	line-height: 2rem;
}
#nav menu.dd li > [aria-haspopup="true"] + button {
	top: 2.6rem;
}
.sticky #nav menu.dd li > [aria-haspopup="true"] + button {
	top: 1.6rem;
}




/* above header message area */
@media (min-width:60rem) {
	body > aside {
		z-index: 23;
	}
}






#footer {
	bottom : 0;
	padding: 0;
	background-color: var(--foot-bgc);
	color           : var(--foot-col);
}

#footer .center {
	grid-column: screen;
	width: 100%;
	/* max-width: 1600px; */
	margin: 0 auto;
	padding: 0 .5rem;
}

/* footer menus */

#footer .menus {
	font-size: 1rem;
}

#footer .menus .center {
}

#footer .menus .center > :nth-child(1){
	text-align: left;
}
#footer .menus .center > :nth-child(2){
	text-align: center;
}
#footer .menus .center > :nth-child(3){
	text-align: right;
}


#footer .menus h2,
#footer .menus h3 {
	/* margin-block-end: .5rem; */
	font-family: var(--font);
	font-size: 1rem;
	font-weight: 300;
	color: inherit;
}
#footer .menus h2 {
	font-size: var(--step-1);
}
#footer .menus p + p {
	margin-block-start:  var(--space-3xs);
}

#footer .menus ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .menus li {
	margin: 0;
}

#footer .menus a {
	text-decoration: none;
	color: inherit;
}
#footer .menus a:hover {
	color: #fff;
	color: var(--footer-menus-a-hover);
}

#footer .contact {
	display: flex;
	justify-content: space-between;
	padding: var(--space-l) 0;
	border-block-start: 1px solid var(--border-col);
}

#footer .contact h5 {
	margin-block-start: var(--space-3xs);
	font-size: 1rem;
}

@media screen and (max-width: 40rem) {
	#footer .menus .center > div:empty {
		display: none;
	}
	#footer .menus .center > div:nth-child(1),
	#footer .menus .center > div:nth-child(2),
	#footer .menus .center > div:nth-child(3) {
		text-align: center;
	}

	#footer .contact {
		flex-flow: column;
		gap: 2rem;
		padding: var(--space-2xl) 0;
	}
}


#footer:before {
	content: "";
	display: block;
	width: 8rem;
	height: 8rem;
	background-color: #fff;
	background: #fff url(../img/icon-notare.png) center center / 64% auto no-repeat ;
	margin: -4rem auto 0;
	border-radius: 50%;
	border: 1rem solid var(--main-bgc);
	translate: 0 4rem;
}
@media screen and (max-width: 40rem) {
	#footer:before {
		width: 5rem;
		height: 5rem;
		translate: 0 2.5rem;
		border-width: .5rem;
		margin: -2rem auto 0;
	}
}





/* footer bottom */

#footer .bottom {
	font-family     : var(--font);
	font-size       : var(--step--0);
	font-weight     : var(--font-weight-regular);
	padding         : 1rem var(--screen-margin);
	background-color: var(--footer-bottom-bgc);
	color           : var(--footer-bottom-col);
	text-shadow     : 0 0 1px #0008;
	position        : relative;
	/*top: 2.5rem;*/
}
#footer .bottom a {
	text-decoration: none;
	color: inherit;
}
#footer .bottom a:hover {
	color: #fff;
}

#footer .bottom .center {
	display: grid;
	grid-template-columns: 4fr 1fr 4fr;
	grid-template-areas:
		"copy social legal";
}

#footer .legal {
	grid-area: legal;
	justify-self: end;
}
#footer .social {
	grid-area: social;
}
#footer .copy {
	grid-area: copy;
}

#footer .copy em {
	font-style: normal;
}

@media screen and (max-width: 70rem) {
	#footer .bottom {
		padding: 1.5rem 1rem;
		font-size: .95rem;
		font-weight: 500;
	}
	#footer .bottom .center {
		grid-template-columns: 1fr;
		grid-template-areas:
			"legal"
			"social"
			"copy";
	}
	#footer .legal,
	#footer .copy {
		justify-self: center;
	}
	#footer .copy {
		margin-block-start: var(--space-s);
	}
	#footer .social {
		margin-block: 2rem;
	}
	#footer .bottom {
		font-size: 1rem;
	}
}



#footer .bottom ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .8rem;
}
#footer .bottom li {
	margin: 0;
}
#footer .bottom li a {
	position: relative;
	display: inline-block;
	transition: color .1s ease-in-out;
}

#footer .bottom li a:after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	opacity: 0;
	bottom: 0;
	height: 1px;
	background-color: #fff;
	transition: 0.3s ease;
}
#footer .bottom li a:hover:after {
	left: 0;
	right: 0;
	opacity: 1;
}

#footer .bottom li + li:before {
	content: "";
	position: relative;
	display: inline-block;
	vertical-align: middle;
	width: 1px;
	height: 1rem;
	background-color: #fff;
	opacity: 0.4;
	margin-inline-end: .5rem;
}
@media screen and (max-width: 40rem) {
#footer .bottom li:last-child:before {
	display: none;
}





/* social icons */

#social {
	display: flex;
	justify-content: center;
	/*padding: 2em 0;*/
}

#social.logolist ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
}
#social.logolist li {
	display: inline-block;
	padding: 0 .01rem;
	margin: 0;
}
#social.logolist li a {
	display: block;
	width: 20px;
	height:20px;
	opacity: 0.66;
	transition: all 0.1s ease-out;
	overflow: hidden;
	text-indent: 30px;
	background-repeat: no-repeat;
	background-position: center center;
}
#social.logolist li a:hover {
	opacity: 1;
}

/* icons from here: https://simpleicons.org/ */
#social a[href*="facebook"]  { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path style="fill:%23ffffff;" d="M23.9981 11.9991C23.9981 5.37216 18.626 0 11.9991 0C5.37216 0 0 5.37216 0 11.9991C0 17.9882 4.38789 22.9522 10.1242 23.8524V15.4676H7.07758V11.9991H10.1242V9.35553C10.1242 6.34826 11.9156 4.68714 14.6564 4.68714C15.9692 4.68714 17.3424 4.92149 17.3424 4.92149V7.87439H15.8294C14.3388 7.87439 13.8739 8.79933 13.8739 9.74824V11.9991H17.2018L16.6698 15.4676H13.8739V23.8524C19.6103 22.9522 23.9981 17.9882 23.9981 11.9991Z"/></svg>'); }
#social a[href*="instagram"] { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Instagram</title><path style="fill:%23ffffff;" d="M12 0C8.74 0 8.333.015 7.053.072 5.775.132 4.905.333 4.14.63c-.789.306-1.459.717-2.126 1.384S.935 3.35.63 4.14C.333 4.905.131 5.775.072 7.053.012 8.333 0 8.74 0 12s.015 3.667.072 4.947c.06 1.277.261 2.148.558 2.913.306.788.717 1.459 1.384 2.126.667.666 1.336 1.079 2.126 1.384.766.296 1.636.499 2.913.558C8.333 23.988 8.74 24 12 24s3.667-.015 4.947-.072c1.277-.06 2.148-.262 2.913-.558.788-.306 1.459-.718 2.126-1.384.666-.667 1.079-1.335 1.384-2.126.296-.765.499-1.636.558-2.913.06-1.28.072-1.687.072-4.947s-.015-3.667-.072-4.947c-.06-1.277-.262-2.149-.558-2.913-.306-.789-.718-1.459-1.384-2.126C21.319 1.347 20.651.935 19.86.63c-.765-.297-1.636-.499-2.913-.558C15.667.012 15.26 0 12 0zm0 2.16c3.203 0 3.585.016 4.85.071 1.17.055 1.805.249 2.227.415.562.217.96.477 1.382.896.419.42.679.819.896 1.381.164.422.36 1.057.413 2.227.057 1.266.07 1.646.07 4.85s-.015 3.585-.074 4.85c-.061 1.17-.256 1.805-.421 2.227-.224.562-.479.96-.899 1.382-.419.419-.824.679-1.38.896-.42.164-1.065.36-2.235.413-1.274.057-1.649.07-4.859.07-3.211 0-3.586-.015-4.859-.074-1.171-.061-1.816-.256-2.236-.421-.569-.224-.96-.479-1.379-.899-.421-.419-.69-.824-.9-1.38-.165-.42-.359-1.065-.42-2.235-.045-1.26-.061-1.649-.061-4.844 0-3.196.016-3.586.061-4.861.061-1.17.255-1.814.42-2.234.21-.57.479-.96.9-1.381.419-.419.81-.689 1.379-.898.42-.166 1.051-.361 2.221-.421 1.275-.045 1.65-.06 4.859-.06l.045.03zm0 3.678c-3.405 0-6.162 2.76-6.162 6.162 0 3.405 2.76 6.162 6.162 6.162 3.405 0 6.162-2.76 6.162-6.162 0-3.405-2.76-6.162-6.162-6.162zM12 16c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm7.846-10.405c0 .795-.646 1.44-1.44 1.44-.795 0-1.44-.646-1.44-1.44 0-.794.646-1.439 1.44-1.439.793-.001 1.44.645 1.44 1.439z"/></svg>'); }
#social a[href*="linkedin"]  { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>LinkedIn icon</title><path style="fill:%23ffffff;" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>'); }
#social a[href*="twitter"]   { height: 20px; background-size: 18px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path style="fill:%23ffffff;"     d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>'); }
#social a[href*="youtube"]   { height: 20px; background-size: 20px auto; background-image: url('data:image/svg+xml;charset=utf-8,<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>YouTube icon</title><path style="fill:%23ffffff;" d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/></svg>'); }



@media screen and (max-width: 70rem) {
	footer .logos li a {
		margin: 0 auto !important;
		transform: scale(1.2);
	}
}