/*   ----------------       banner       ------------- */


@media (min-width:601px) {
	.banner {
		height:300px;
		background-size: 400px, cover;
	}
}

@media (min-width:993px) {
	.banner {
		height:400px;
		background-size: 41%, cover;
	}
}

@media (min-width:1846px) { /* 1200/0,65  */
	.banner {
		height:400px;
		background-size: 41%, cover;
	}
}



/*   ----------------       navigation       ------------- */
#topnav .topnav-left {
  float: left;
}


#topnav .topnav-right {
  float: right;
}


/*  search box  */
#topnav input[type=text] {
  padding: 3px;
  margin: 8px;
  font-size: 14px;
  border: 1px solid #999;
  border-radius: 5px;
  width:300px;
}


/* source: https://www.w3schools.com/howto/howto_js_navbar_sticky.asp */
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
  overflow:visible;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 40px;
}


nav ul {
	padding:0;
	margin:0;
	
}

nav ul li {
	display:inline-block;
	padding: 0 10px;
	margin:0;
}

nav #xs-nav ul li  {
	display:block;
}

nav .w3-button.active  {
	background-color:#666;
	color:white;
}


/*   ----------------       fontawesome icon modifier       ------------- */

.icon--fill {
  background-color: currentColor;
  fill:#fff;
}
.icon--border, .icon--circle, .icon--round {
  border:1px solid currentColor;
  padding:1px;
}

.icon--round {
  border-radius: 4px;
}

.icon--circle{
  border-radius: 50%;
}

.icon-tennislucky {
  width: 3.6em;
  line-height:1em;
  padding-top: -0.1em;
  display:inline-block;
  text-align:left;
  /* background-color:yellow; */
}

.icon--2x  {font-size:200%;}
.icon--3x  {font-size:300%;}
.icon--4x  {font-size:400%;}
.icon--5x  {font-size:500%;}
.icon--6x  {font-size:600%;}

.text--05  {font-size: 0.5em}
.text--06  {font-size: 0.6em}
.text--07  {font-size: 0.7em}
.text--08  {font-size: 0.8em}
.text--09  {font-size: 0.9em}

a:not(.w3-button):not(.w3-btn) {
	text-decoration:none;
	color:#2196F3;
}
a:not(.w3-button):not(.w3-btn):hover {
	border-bottom:1px solid #2196F3;
}

footer a {
	text-decoration:none !important;
	color:white !important;
}

footer a:hover {
	border-bottom:1px solid white !important;
}



.inline-button  {
  display: inline-block;
  margin-left: 0.1em;
  margin-right: 0.1em;
  position: relative;
  top: -0.2em;
}

.content ul li {padding-bottom:0.5em;}



/*   ----------------       svg-color       ------------- */

.svg-fill-blue svg path {
	fill:#3f51b5 !important;
}

/*   ----------------       layout       ------------- */
@media (min-width:993px)  {
	.fixed-sidebar-right .wrapper {
		margin-right: 350px;
	}

	.fixed-sidebar-right .main  {
		float:left;
		width:100%;
	}

	.fixed-sidebar-right .sidebar  {
		width: 350px;
		float: right;
		margin-right: -350px;
	}
}


@media (max-width:601px)  {
	div.content p,
	div.content li {
  		-webkit-hyphens: auto;
  		-ms-hyphens: auto;
  		hyphens: auto;
  		text-align:justify;
	}
}

.content ul  {
	padding-left:1em;

}
/*   ----------------       forms       ------------- */
/* Placeholder Textcolors  source: https://stackoverflow.com/a/30827689 */
::-webkit-input-placeholder {color: #0006 !important;}  /* Edge */
::-ms-input-placeholder     {color: #0006 !important;}
 :-ms-input-placeholder     {color: #0006 !important;} /* Internet Explorer */
::-moz-placeholder          {color: #0006 !important;}
 :-moz-placeholder          {color: #0006 !important;}
::placeholder               {color: #0006 !important;}

select:invalid             {color: #0006 !important;} /* Quasi-Placeholder in dropdown-menues (funktioniert nur, wenn Field ist required)  */