/* this file contains the global layout of page */

/* globals */
html, body { background: #FFF; }
html { font-size: 14px; }
a { transition: all .2s ease; }

/* selection */
::selection { background: #444; color: #FFF; }
a::selection, a span::selection { color: #000; }
::-moz-selection { background: #444; color: #FFF; }
a::-moz-selection, a span::-moz-selection { color: #000; }

/* root */
#inner-wrapper, body > #root { background: #FFF; margin: 0 auto; position: relative; min-height: 100%; width: 100%; }
#inner-wrapper {}
#root { margin: 0 auto; min-height: 100vh; position: relative; }
/* page width */
#content-area, #mainHeader, #mainFooter .outer-wrapper { clear: both; margin: 0 auto; padding: 0 20px; max-width: 1240px; }

/* animation */
.header #logo, .navbar-toggler, .navbar-toggler-icon, .toggleSubNav span { transition: .25s ease-out; }


/** scroll to top */
#ScrollToTop { border-color: #0062a1; }
#ScrollToTop .scroll-top-icon::before { border-color: #0062a1; }
#ScrollToTop .scroll-top-icon::after,
#ScrollToTop.scroll-top-fixed .scroll-top-icon::after { background: #0062a1; }
#ScrollToTop.scroll-top-fixed { background: none; border-color: #0062a1; margin-bottom: -60px; }
#ScrollToTop.scroll-top-fixed .scroll-top-icon::before { border-color: #0062a1; }
#ScrollToTop:hover { border-color: #0062a1; }
#ScrollToTop:hover .scroll-top-icon::before { border-color: #FFF; }
#ScrollToTop.scroll-top-fixed:hover { border-color: #FFF; }
#ScrollToTop.scroll-top-fixed:hover .scroll-top-icon::before { border-color: #FFF; }


/** header */
#mainHeader .inner { padding-top: 0; }

#mainHeader .header-top { display: flex; }
#logo { font-size: 0; background: url("../img/logo-landkreis-stade.png") no-repeat; background-size: contain; width: 360px; height: 80px; margin: auto auto auto 0; }
#logo > a { display:block; width: 100%; height: 100%; }
#headerSearch { max-width: 255px; margin: auto 0 auto auto; }

#mainHeader .header-menu { margin: 2.25rem 0; }
#mainNav { clear: both; padding: 0.75rem 0; }

/* main nav */
#mainNav .main-navigation a { font-family: Roboto, sans-serif; color: #333; font-size: 16px; text-decoration: none; }

#mainNav .main-navigation ul.menu-level-1 { display: flex; flex-direction: row; justify-content: space-between; flex-flow: wrap; }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item { }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item > a { border-bottom: 4px solid transparent; padding: 0 10px 10px; }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item.active > a { border-color: rgba(255, 213, 0, 1);  }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item > a:hover { border-color: rgba(255, 213, 0, 0.25); color: #0062a1; }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item.hasChild > a::after { display: inline-block; content: "\f0d7"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #333; position: relative; left: 3px; }
#mainNav .main-navigation ul.menu-level-1 > li.menu-item.hasChild > a:hover::after { color: #0062a1; }


#mainNav .main-navigation ul.menu-level-2 { position: absolute; background: #fff; padding: 10px 0; top: 16px; border: 1px solid rgba(0,0,0,0.15); z-index: 999; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.175); }
#mainNav .main-navigation ul.menu-level-2 > li.menu-item { display: block; }
#mainNav .main-navigation ul.menu-level-2 > li.menu-item > a { padding: 4px 21px; display: block; white-space: nowrap;  }
#mainNav .main-navigation ul.menu-level-2 > li.menu-item > a:hover { background: #f8f9fa; }
#mainNav .main-navigation ul.menu-level-2 > li.menu-item.active > a { color: #0062a1; }



#mainNav .main-navigation .submenu-wrapper { display: none; position: relative; }
#mainNav .main-navigation a.subMenuOpen ~ .submenu-wrapper { display: block;  }




/** footer */
#mainFooter { background: #eaeaea; }
#mainFooter .inner-wrapper { display: flex; padding: 40px 0; }
#mainFooter .footer-links { margin: auto 0;  }
#mainFooter .footer-menu { margin: auto 0; text-align: center; }
#mainFooter .footer-menu ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 4px;
	justify-content: center;
}
#mainFooter .footer-menu li { display: inline-block; }
#mainFooter .footer-menu li > a { padding: 5px 10px; text-decoration: none; color: #333; }
#mainFooter .footer-menu li > a:hover,
#mainFooter .footer-menu li > a:focus-visible { color: #0062a1; text-decoration: underline; }
#mainFooter .footer-menu a[data-page-id="191"] {
	background: #0062a1;
	border: 2px solid #0062a1;
	border-radius: 999px;
	color: #fff;
	display: inline-block;
	font-weight: 700;
	padding: 7px 16px;
	text-decoration: none;
}
#mainFooter .footer-menu a[data-page-id="191"]:hover {
	background: #004b7c;
	border-color: #004b7c;
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
#mainFooter .footer-menu a[data-page-id="191"]:focus-visible {
	background: #004b7c;
	border-color: #fff;
	box-shadow: 0 0 0 3px #004b7c;
	color: #fff;
	outline: 2px solid #fff;
	outline-offset: 2px;
	text-decoration: none;
}

@media screen and (max-width: 767px) { /* smaller than ipad - portrait */
	#mainFooter .footer-links { margin-bottom: 15px; }
	#mainFooter .footer-menu { text-align: center; }
}/* 767px */





/** content area */
#content-area {}
#content-area:after,
#content-area #content:after { content: ""; clear: both; display: block; width: 100%; }


/** breadcrumbs */
#breadcrumbList {}
#breadcrumbList .breadcrumb-item[data-page-id="1"] .breadcrumb-link::before {}
#breadcrumbList .breadcrumb-item .breadcrumb-text {}
#breadcrumbList .breadcrumb-item.active .breadcrumb-text {}
#breadcrumbList span.separator {}


/* main content */
#content-area #content { margin-top: 60px; }
#mainContent { display: block; }



/* * * screen width */
@media screen and (max-width: 1300px) { /* before full width of design */
}/* design */

@media screen and (max-width: 1200px) { /* width of design */
}/* design */

@media screen and (max-width: 1024px) { /* ipad - landscape */
}/* 1024px */

@media screen and (max-width: 1023px) { /* smaller than ipad - landscape */
}/* 1023px */

@media screen and (max-width: 992px) {
}/* 992px */

/* main navi - as sidebar */
@media screen and (max-width: 991px), (min-width: 992px) and (max-width: 1024px) and (pointer: coarse) {
	html { overflow-x: hidden; overflow-y: auto; }
	#nav-toggle:checked ~ #outer-wrapper #inner-wrapper { position: fixed; transform: translateX(-40%); }
	.main-navigation { background: #eaeaea; border-top: 40px solid #eaeaea; clear: both; display: block; height: 100vh; width: 40%; margin: 0; padding: 20px 0; text-align: left; overflow: hidden; overflow-y: scroll; position: absolute; top: 0; right: 0; bottom: auto; transform: translateX(100%); touch-action: none; -webkit-overflow-scrolling: touch; }

	.navbar-toggler { display: block; top: 40px; }
	.navbar-toggler-icon, .navbar-toggler-icon::before, .navbar-toggler-icon::after { background: #0062a1; }
	#nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::before, #nav-toggle:checked ~ #outer-wrapper .navbar-toggler-icon::after { background: #0062a1; }


	#mainNav .main-navigation ul.menu-level-1 > li.menu-item { display: block; width: 100%; text-align: center; margin-bottom: 1.2rem; }
	#mainNav .main-navigation ul.menu-level-1 > li.menu-item > a { padding-bottom: 2px; }
	#mainNav .main-navigation ul.menu-level-2 { position: relative; margin-bottom: 1rem; }
	#mainNav .main-navigation ul.menu-level-2 > li.menu-item > a { white-space: pre-wrap; }

	/* header */
	#mainHeader .header-top { flex-direction: column; }
	#headerSearch { max-width: none; width: 100%; margin-top: 1rem; }
}

@media screen and (max-width: 900px) {
}/* 900px */

@media screen and (max-width: 812px) { /* iphone X - landscape  */
}

@media screen and (max-width: 800px) {
}/* 800px */

@media screen and (max-width: 768px) { /* ipad - portrait */
}/* 768px */

@media screen and (max-width: 767px) { /* smaller than ipad - portrait */
	#nav-toggle:checked ~ #outer-wrapper #inner-wrapper { transform: translateX(-60%); }
	.main-navigation { width: 60%; }
}/* 767px */

@media screen and (max-width: 736px) { /* iphone 6+ - landscape */
}/* 736px */

@media screen and (max-width: 667px) { /* iphone 6 - landscape */
}/* 667px */

@media screen and (max-width: 666px) { /* smaller than iphone 6 - landscape */
}/* 666px */

@media screen and (max-width: 568px) { /* iPhone5 - landscape */
}/* 568px */

@media screen and (max-width: 567px) { /* smaller than iPhone5 - landscape */
}/* 567px */

@media screen and (max-width: 480px) { /* iPhone4 - landscape */
	#logo { width: 75%; }
}/* 480px */

@media screen and (max-width: 479px) { /* smaller than iPhone4 - landscape */
}/* 479px */

@media screen and (max-width: 414px) { /* iPhone6+ - portrait */
}/* 414px */

@media screen and (max-width: 375px) { /* iPhone6 - portrait */
}/* 375px */

@media screen and (max-width: 374px) { /* smaller than iPhone6 - portrait */
}/* 374px */

@media screen and (max-width: 320px) { /* iPhone4/5 - portrait */
}

@media screen and (max-width: 319px) { /* smaller devices */
}/* smaller */


/* eof */