﻿/* -- Page -- */
body {
	display: flex; flex-direction: column;
	min-height: 100vh;
	background-color: #faf9f7;
}

/* -- Layout-Varianten -- */
body.pageLayout-3 main.section { padding-top: 0;}
body.pageLayout-4 main { background-image: none !important;}

/* -- Header -- */
#header.hero { position: relative; border-bottom: 10px #005164 solid;}
/* #pageUid-10 #header, .parentPage-70 header { display: flex;} */
#header.hero .navbar-menu { background-color: transparent;}

#header > div { margin-bottom: 0;}
#header.hero .hero-body { padding: 1rem 0;}

#header .logo div { margin: 0;}
#header .logo .image img { width: 75px; transition: all 0.5s ease-in-out;}


/* -- Top -- */
section#topcontent { border-bottom: 10px #005164 solid;}


/* -- Navigation -- */
.navbar-start, .navbar-end, .navbar-center { transition: all 0.2s ease-out;}

.navbar-item { border-width: 0 0 0 2px; border-color: #79d5f1; border-style: solid;}
.navbar-item svg.icon { fill: #005164;}
a.navbar-item, .navbar-link { padding-left: 0.33rem; padding-right: 0.33rem; /* mobile only */}
a.navbar-item:hover, .navbar-link:hover, .navbar-item.has-dropdown:hover, a.navbar-item.is-active, .navbar-link.is-active { color: white;}
a.navbar-item:hover svg.icon, .navbar-link:hover svg.icon, a.navbar-item.is-active svg.icon, .navbar-link.is-active svg.icon, .navbar-item.has-dropdown:hover svg.icon { fill: white;}
.navbar-item.has-dropdown:hover { position: static; /* mobile only */}

.navbar-item .icon-text > span { display: none; /* mobile only */}

.navbar-dropdown { 
	padding-top: 0; padding-bottom: 0;
	border-left: 2px solid white; box-shadow: none;
	font-size: 1rem; color: #005164;
	left: -2px; right:  -2px;
}
.navbar-dropdown .navbar-item {
	display: block; margin-right: 0; /* mobile only */
	padding-left: 1rem; 
	background-color: #79d5f1;
	border-color: white; border-left-width: 0; border-bottom-width: 1px;
	font-weight: 400; color: #005164; text-transform: none;
}
.navbar-dropdown .navbar-item:first-child { border-top-width: 2px;}
.navbar-dropdown .navbar-item.is-last { border-bottom-width: 2px;}

.navbar-dropdown a.navbar-item:focus, .navbar-dropdown a.navbar-item:hover { color: white; background-color: #005164 !important;}

.navbar-item .button { border-radius: 0; padding-left: 0.33em; padding-right: 0.33em;}
.navbar-item .button .icon:first-child { margin-left: 0;}

.navbar-brand .navbar-item { 
	width: auto; /* mobile only */
	max-width: 80px;
	padding: 0.25rem 0 0; 
	border-width: 0 !important; background-color: rgba(255,255,255,0);
}
.navbar-brand .navbar-item figure.image { margin: 0;}
.navbar-brand .navbar-item figure img { max-width: 125px; max-height: 40px; transition: all 0.5s ease-in-out;}


/* -- Headernav -- */ 
#header .navbar { font-size: 18px; font-family: "Sen", sans-serif; font-weight: 700;}
#header .navbar-center { padding: 0 0.5rem;}

#header .navbar-item:hover, #header .navbar-link:hover, 
#header .navbar-item.is-active, #header .navbar-link.is-active { color: white; background-color: transparent;}


/* -- Aktionsnav -- */ 
#header .navbar-aktion { z-index: 50; position: absolute; right: 0; top: calc(50% - 18px); min-height: 1.5rem; font-size: 15px; transition: all 0.2s ease-out;}
#header .navbar-aktion .navbar-item { background-color: white; padding: 0.5rem;}
#header .navbar-aktion .navbar-item:hover { background-color: #005164;}


/* -- Mainnav -- */
section.mainnav {
	padding-top: 0; padding-bottom: 0;
	background-color: #79d5f1; border-bottom: 10px #005164 solid;
	font-family: "Sen", sans-serif; font-weight: 700; text-transform: uppercase;
	font-size: 125%;
}
section.mainnav { border-bottom: 2px #005164 solid;}

#my-navbar-menu>div { flex: 1;}



/* -- Content -- */
main { flex: 1;}

/* fuerth.bluepingu.de */
.pageTree-200 .section:not(.is-highlight) { 
	padding-left: 3rem;
	background-image: url(/fileadmin/Illustrationen/fue/Fuerth_links.png), url(/fileadmin/Illustrationen/fue/Fuerth_rechts.png);
	background-position: left top, right top;
	background-repeat: no-repeat; 
	background-size: 20%;
}


/* -- Social Nav -- */
.nav-social { text-align: center !important; padding: 1rem 0 0 0;}

.nav-social > a { color: #363636; margin-right: 1rem;}
.nav-social > a:hover svg { fill: black;}
.nav-social > a:hover { color: black;}
.nav-social .icon-text { align-items: center;}
.nav-social .icon-text > span { display: none; /* mobile only */}
.nav-social svg { fill: #363636;}


/* -- Footer -- */
#footer {
	margin-top: auto; padding-top: 0.5rem;
	border-top: 10px #1db8e7 solid;
}
#footer .container { margin: 0 2% 0 0; max-width: none;}

#footer .nav-social a { color: #faf9f7;}
#footer .nav-social svg { fill: #faf9f7;}

#footer #footer-sitemap {
	display: flex; flex-direction: row; justify-content: flex-start;
	align-items: flex-start; align-content: flex-start;
	flex-wrap: wrap;
	padding: 1.5rem 0 0 0;
}
#footer #footer-sitemap > div { margin-right: 2rem; margin-bottom: 1rem;}

#footer .content { margin-bottom: 0;}
#footer .logo figure.image img { width: 75px;}
#footer h4, #footer h5, #footer h6, #footer p { color: white;}



/* ## Tablet ## */
@media screen and ( min-width: 769px ) {

	/* -- Header -- */
	#header .logo .image img { width: 125px;}
	#header.is-scrolled .logo .image img { width: 75px;}
	#header.is-scrolled .hero-body { padding-top: 3rem; padding-bottom: 0.5rem;}

	/* -- Headernav -- */ 
	#header .navbar-start, #header .navbar-end { padding: 1.5rem 0;}
	#header .navbar-center { padding: 0 1rem;}

	/* -- Navigation -- */
	.navbar-brand .navbar-item { width: 0; opacity: 0;}
	.navbar-center img { width: 125px;}
	a.navbar-item, .navbar-link { padding-left: 0.75rem; padding-right: 0.75rem;}

	.navbar-item.has-dropdown:hover { position: relative; border-left-color: white;}
	.navbar-dropdown .navbar-item { display: inline-block; margin-right: 50%;}

	.navbar-item .button { padding-left: 0.5em; padding-right: 0.66em;}
	.navbar-item .button:hover svg { fill: white;}
	.navbar-item .icon-text > span { display: inline-flex;}
	.navbar-link { padding-top: 0.5rem; padding-bottom: 0.5rem;}
	.navbar-dropdown .navbar-item { padding-left: 1rem; padding-top: 0.5rem; font-weight: 400;}

	#header .navbar-aktion { top: 0;}
	

	/* -- Footer -- */
	footer .breadcrumb ul { flex-direction: row;}
	footer .breadcrumb ul li a { padding-left: 1em; padding-right: 1em;}

	/* -- Social Nav -- */
	.nav-social .icon-text > span { display: inline;}

}



/* ## Desktop ## */
@media screen and ( min-width: 1056px ) {

	/* -- Header -- */

	/* -- Headernav -- */
	#header .navbar-aktion { z-index: 50; position: absolute; right: 0; top: calc(50% - 18px); min-height: 1.5rem; font-size: 15px;}

	/* -- Mainnav -- */
	.navbar-brand .navbar-item figure img { max-height: 40px;}

	/* -- Footer -- */

}


/* ## Widescreen ## */
@media screen and ( min-width: 1248px ) {


}


/* ## Fullhh ## */
@media screen and ( min-width: 1344px ) {


}