/* main heading styling */

body > h1 { 
	position: relative;
	top: calc( -3.55rem - 1px);
	text-align: center;
	font-size: .8rem;
	line-height: 2.5rem;
	background-color: #fff;
	border-top: 0;
	margin: 0;
}
@media screen and (max-width: 60rem) {
	body > h1 {
		display: none;
	}
}


/* 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;
}


/* content_slugs */
div:has(.headline-anchor) {
	position: relative;
}
.headline-anchor {
	position: absolute;
	left: -1.5rem;
	opacity: 0;
	text-decoration: none;
}
.headline-anchor:hover {
	opacity: 1;
}





/* --- */

#header {
	padding: 0;
	display: flex;
	flex-flow: column;
	/*align-items: center;*/
	z-index: 3;
}

/* logo */

#logo {
	position: absolute;
	z-index: 123;
}

#logo > a {
	position: relative;
	top: 0;
	display: inline-block;
	background: transparent url(../img/RehaMedia-logo.svg) center center / 100% auto no-repeat;
	border: none;
	width: 11rem;
	height: 3.75rem;
	text-indent: -1000%;
	overflow: hidden;
	transition: all .2s ease-in-out;
	translate: .5rem;
}
.sticky #logo a {
	/* width: 10rem; */
	background-image: url(../img/RehaMedia-logo.svg);
}

@media screen and (max-width: 60rem) {
	#logo {
		width: calc( 100% - 3.75rem);
		height: 100%;
		max-height: 4rem;
		background: #fff;
	}
}


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

#u31 .hero, .p31 .hero  { background-position: center top -4rem; }
#u50 .hero, .p50 .hero  { background-position: center top; }
#u56 .hero, .p56 .hero  { background-position: center top; }


/* header nav layout */

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

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

#nav .primary {
	grid-area: primary;
	justify-self: start;
}
#nav .secondary {
	grid-area: secondary;
	justify-self: end;
	min-width: 10rem;
}
#nav .utilities {
	grid-area: utilities;
	justify-self: end;
	list-style: none;
}
#nav .utilities li {
	display: inline;
}

#nav .utilities li a {
	display: inline-block;
	padding: .6rem 1rem;
	text-decoration: none;
	transition: .1s color ease-in-out;
}
#nav .utilities li a:hover {
	color: #999;
}

#nav .secondary .shop a:hover {
	color: #fff;
	background-color: #2E247A;
}
#nav .secondary .shop a::after {
	content: " ";
	background-image: url('../img/icon-arrow-right-lined.svg'); /* found here: https://iconmonstr.com/arrow-right-lined-svg/ */
	filter: invert(11%) sepia(100%) saturate(2120%) hue-rotate(240deg) brightness(97%) contrast(97%); /* generated here: https://codepen.io/sosuke/pen/Pjoqqp */
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 1rem;
	display: inline-block;
	width: 1.33rem;
	height: 1rem;
	transform: translateY(20%);
	right: 0;
	cursor: pointer;
}
#nav .secondary .shop a:hover::after {
	filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(280deg) brightness(112%) contrast(101%);
}


#nav .utilities a::before {
	content: " ";
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 1.1rem;
	display: inline-block;
	width: 1.75rem;
	height: 1.1rem;
	transform: translateY(25%);
	right: 0;
	cursor: pointer;
	transition: .1s opacity ease-in-out;

}
#nav .utilities a:hover::before {
	opacity: 0.5;
}

#nav .utilities a[href*="account"]::before {
	background-image: url('../img/icon-profile.svg'); /* found here: https://iconmonstr.com/user-circle-thin-svg/ */
}
#nav .utilities a[href*="login"]::before {
	background-image: url('../img/icon-login.svg'); /* found here: https://iconmonstr.com/door-7-svg/ */
}
#nav .utilities a[href*="cart"]::before {
	background-image: url('../img/icon-warenkorb.svg');
	background-size: 1.85rem;
}
#nav .utilities a[href*="suche"]::before {
	background-image: url('../img/icon-search.svg'); /* found here: https://iconmonstr.com/magnifier-lined-svg/ */
	background-size: 1.1rem;
}







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




#topics *:focus-visible,
ul.dd *:focus-visible {
	outline: calc(var(--border-width) * 2) solid var(--color-primary, var(--color-text));
	outline-offset: calc(var(--border-width) * -2);
}





/* topics nav */

#topics {
	order: 22;
	position: sticky;
	top: 6.15rem;
	z-index: 2;

	width: 100%;
	background-color: #fff;
	--speak-img  : url(../img/topic-icon-sprechen.svg);
	--work-img   : url(../img/topic-icon-arbeiten.svg);
	--live-img   : url(../img/topic-icon-leben.svg)   ;
	--learn-img  : url(../img/topic-icon-lernen.svg)  ;
}
#topics ul {
	max-width: 1920px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 1px;
	list-style: none;
	margin: 0 auto;
	padding: 1px;
	background-color: #fff;
}

@media screen and (min-width: 30rem) and (max-width: 70rem) {
	#topics {
		top: 3.8rem;
	}
}

@media screen and (max-width: 30rem) {
	#topics {
		position: static;
	}
	#topics ul {
			grid-template-columns: 1fr 1fr;
	}
}

#topics li {
	margin: 0;
	padding: 0;
}
#topics li a {
	position: relative;
	display: block;
	font-family: "gotham rounded";
	font-weight: 350;
	font-size: 1.25rem;
	color: #fff;
	text-align: center;
	padding: .75rem 1rem;
	text-decoration: none;
	transition: .1s all ease-in-out;
}
#topics li a:hover {
	text-decoration: none;
	background-color: #fff;
	color: #333;
}
/* 
#topics li a:after {
	content: ">";
	position: relative;
	top: .05rem;
	padding-left: .25rem;
}
 */
#speak a { background-color: var(--speak-color); }
#work a  { background-color: var(--work-color) ; }
#live a  { background-color: var(--live-color) ; }
#learn a { background-color: var(--learn-color); }

li#speak a:hover { color: var(--speak-color); }
li#work a:hover  { color: var(--work-color) ; }
li#live a:hover  { color: var(--live-color) ; }
li#learn a:hover { color: var(--learn-color); }

#topics li a span {
	position: relative;
	left: 1.5rem;
}

#topics li a span:before {
	content: "";
	position: absolute;
	translate: -3rem -.25rem;
	display: inline-block;
	width: 2.5rem;
	height: 2.5rem;
	-webkit-mask: no-repeat 50% 50% / auto 120%;
	mask: no-repeat 50% 50% / auto 120%;
	background-color: #fff;
}

li#speak a span:before { -webkit-mask: var(--speak-img); mask-image: var(--speak-img); }
li#work a span:before  { -webkit-mask: var(--work-img) ; mask-image: var(--work-img) ; }
li#live a span:before  { -webkit-mask: var(--live-img) ; mask-image: var(--live-img) ; }
li#learn a span:before { -webkit-mask: var(--learn-img); mask-image: var(--learn-img); }

li#speak:hover a span:before { background-color: var(--speak-color); }
li#work:hover a span:before  { background-color: var(--work-color) ; }
li#live:hover a span:before  { background-color: var(--live-color) ; }
li#learn:hover a span:before { background-color: var(--learn-color); }

#footer {
	bottom:0;
	padding: 0;
}

/* footer menus */

#footer .menus {
	padding: 0 1rem 1rem;
	background-color: #fff;
	/* color: var(--color-bg); */
	font-size: 0.95rem;
}
@media screen and (max-width: 60rem) {
	#footer .menus .links a {
		display: inline-block;
		padding: .5rem 1rem;
	}
}


#footer .menus .center {
	display: flex;
	justify-content: space-evenly;
	gap: 5rem;
}

#footer .menus h3 {
	margin-block-end: .5rem;
	font-size: 1.125rem;
}

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

#footer .menus li {
	margin: 0;
}

#footer .menus a {
	text-decoration: none;
	color: inherit;
	transition: .2s color ease-in-out;
}
#footer .menus a:hover {
	color: var(--color-text-hover);
}


@media screen and (max-width: 40rem) {
	#footer .menus .center {
		flex-flow: column;
		gap: 2rem;
		text-align: center;
	}
}


/* footer affiliates */

#footer .affiliates {
	background-color: #fff;
	padding: 2rem 1rem 3rem;
}

#footer .affiliates .center {
	display: flex;
	justify-content: space-evenly;
	gap: 5rem;
}
@media screen and (max-width: 40rem) {
	#footer .affiliates .center {
		flex-flow: column;
		align-items: center;
		gap: 2rem;
	}
}

#footer .affiliates ul {
	list-style: none;
	display: flex;
	gap: 3rem;
	margin: 0;
	padding: 0;
}

#footer .affiliates li {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

#footer .affiliates a,
#footer .affiliates span {
	text-decoration: none;
	display: inline-block;
	background: transparent center center / auto 100% no-repeat;
	border: none;
	text-indent: -1000%;
	overflow: hidden;
	transition: all .1s ease-in-out;
}

#footer .affiliates .memberships    li a { margin-block-start: .5rem; }

#footer .affiliates .memberships    li a.reh    { width:  7rem;    height: 4.5rem; background-image: url(../img/logo-rehakind.png); }
#footer .affiliates .memberships    li a.dat    { width: 11rem;    height: 4.5rem; background-image: url(../img/logo-dateurope.png); }
#footer .affiliates .memberships    li a.ark    { width:  7rem;    height: 4.5rem; background-image: url(../img/logo-arkom.png); }
#footer .affiliates .certifications li a.mdc    { width:  5rem;    height: 4.5rem; background-image: url(../img/logo-mdc.png); }
#footer .affiliates .certifications li span.idf { width:  5.25rem; height: 4.5rem; background-image: url(../img/logo-inno.png); }
#footer .affiliates .certifications li a.beh    { width:  5rem;    height: 4.5rem; background-image: url(../img/logo-beh.png); }

@media screen and (max-width: 60rem) {
	#footer .affiliates .memberships ul {
		gap: 1rem;
	}
}
@media screen and (max-width: 40rem) {
	#footer .affiliates .memberships ul {
		flex-flow: column;
		gap: 0;
	}
}

/* footer bottom */

#footer .bottom {
	font-family: var(--font);
	font-size: 0.75rem;
	font-weight: var(--font-weight-regular);
	padding: 1rem;
	background-color: #000;
	color: var(--color-dim);
	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";
}
@media screen and (min-width: 60rem) and (max-width: 80rem) and (orientation: portrait) {
	#footer .bottom .center {
		grid-template-columns: 1.5fr 1fr 3fr;
	}
}


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

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



#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 {
	display: inline-block;
	transition: color .1s ease-in-out;
}


/* 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: 60rem) {
	footer .logos li a {
		margin: 0 auto !important;
		transform: scale(1.2);
	}
}




/* newsletter section */

section.cta {
	margin-block-start: 3rem;
	padding-block: 2rem 2.5rem;
	text-align: center;
	background-color: #585095;
}

section.cta p + p {
	margin-block-start: 1.25rem;
}
section.cta p a  {
	border-radius: 3rem;
	border: 1px solid;
	text-decoration: none;
	padding: .5rem 2rem;
	line-height: 3rem;
	font-family: "gotham rounded";
	font-weight: 350;
	font-size: .9rem;
	transition: all .1s ease-in-out;
	color: #585095;
}
section.cta p a:hover {
	background-color: #585095;
	color: #fff;
}

.deepblue-bg p a {
	background-color: #f6f6f6;
	border-color: #f6f6f6;
	color: #2E247A;
}
.deepblue-bg p a:hover  {
	background-color: #2E247A;
	color: #fff;
}

.grey-bg p a {
	background-color: #fcfcfc;
	border-color: #fcfcfc;
	color: #7f7f7f;
}
.grey-bg p a:hover  {
	background-color: #7f7f7f;
	border-color: #fff;
	color: #fff;
}




/* content */

.userstories {
	background-color: #FAFBF6;
	text-align: center;
	padding: 1rem;
}




.cta {
	background-color: #2E247A;
	text-align: center;
	padding: 1rem;
	color: var(--color-text-invert);
}

.cta button {
	margin-top: 1.5rem;
	padding-block: 0;
	padding-inline: 0;
	background-color: var(--color-text-invert);
	transition: .1s opacity ease-in-out;
}
	
.cta button a {
	display: block;
	color: #2E247A;
	text-decoration: none;
	padding-block: calc(var(--stack) / 1.5 );
	padding-inline: calc(var(--gutter) * 2.5 );
}

.cta button:hover {
	opacity: 0.75
}