#main
{
	background-image:url('../images/hintergrund-musterschule.svg');
	background-size:100% auto;
	background-repeat:no-repeat;
	background-position:center;
}

h1
{
	background-image:url('../images/ueberschrift-musterschule.svg');
	background-size:129px 30px;
	background-repeat:no-repeat;
	background-position:0px 0px;
	font-size:2.4rem;
	font-weight: 400;
	margin-bottom: 1.0rem;
	padding: 0.5rem 0 0.5rem 45px;
}

h2 
{
	color:#414141;
	font-size:1.5rem;
	font-weight: 400;
	text-transform:none;
	margin-bottom: 0.5em;
}

body.layout-Start h2
{
	background-image:url('../images/ueberschrift-musterschule.svg');
	background-size:129px 30px;
	background-repeat:no-repeat;
	background-position:0px 0px;
	font-size:2.4rem;
	font-weight: 400;
	margin-bottom: 1.0rem;
	padding: 0.5rem 0 0.5rem 45px;
}

h3 
{
	font-size:1.5rem;
	font-weight: 400;
	text-transform:none;
}
h3 > a
{
	font-size:1.5rem;
	color:#414141;
	text-decoration:underline;
}

.text-headline,
p.text-headline, 
span.text-headline 
{
	font-size:2.4rem;
}

a.link-external, 
a.link-external-blank,
a.link-external:focus, a.link-external:hover, 
a.link-external-blank:focus, a.link-external-blank:hover 
{
	text-decoration:underline;
}

a.link-download, a.link-download:link, a.link-download:visited, a.link-download:active, 
p a.link-download, p a.link-download:link, p a.link-download:visited, p a.link-download:active, 
a.link-download:focus, a.link-download:hover, 
p a.link-download:focus, p a.link-download:hover 
{
	text-decoration:underline;
}

input.btn, input.btn:hover, input.btn:focus,
p > a.btn, 
a.btn, a.btn:hover, a.btn:focus
{
	text-decoration:underline;
}

input.btn-outline,
input.btn-outline:hover,
input.btn-outline:focus,
p > a.btn-outline, 
a.btn-outline, 
a.btn-outline:hover,
a.btn-outline:focus, 
section a.btn-outline, 
section a.btn-outline:hover,
section a.btn-outline:focus
{
	background-color:#FFFFFF;
	color:#414141;
	font-size:1.1rem;
	font-weight:400;
	padding:6px 18px;
	border-radius:0px;
	border: 3px solid #E2001A;
	text-decoration:underline;
}
input.btn-outline:hover,
input.btn-outline:focus,
a.btn-outline:hover,
a.btn-outline:focus, 
section a.btn-outline:hover,
section a.btn-outline:focus
{
	background-color:#FFFFFF;
	color:#000000;
	border: 3px solid #B60016;
	text-decoration:none;
}

blockquote
{
	border-left: 5px solid #B60016;
}

/* trenner */
.frame-type-div > .ce-div
{
	display:block;
	width:80%;
	height:5px;
	margin: 15px auto 15px auto;
	padding:0px;
	background-color:#E2001A;
}


#footer
{
	background-color: #E8E8E8;
	background-image:url('../images/hg-welle-eppingen-weiss-verlauf.svg');
	background-repeat:no-repeat;
	background-position:right bottom; 
	color: #414141;
	border-top: 5px solid #E2001A;
}



/* ----------------------------------------------------------------
	Header image Startseite
-----------------------------------------------------------------*/

#top .imagetext
{
	background-image:url('../images/hg-welle-eppingen-weiss-verlauf.svg');
	background-repeat:no-repeat;
	background-size:1920px 416px;
	background-position: 20% 100%; 
}

body.layout-Start #top .imagetext .imagetext-body h1 
{
	background-image:none;
	font-size:2.4rem;
	font-weight: 400;
	margin-bottom: 1.0rem;
	padding: 0.5rem 0 0.5rem 0px;
}

@media (min-width: 1500px) {

	#top .imagetext .imagetext-body 
	{
		font-size: 150%;
	}
	#top .imagetext .imagetext-body h1, 
	body.layout-Start #top .imagetext .imagetext-body h1
	{
		font-size: 3.0rem;
	}

}




/* ----------------------------------------------------------------
	Logo
-----------------------------------------------------------------*/

#logo
{
	padding: 44px 16px;
	background-color:#FFFFFF;
	border:6px solid #E2001A;
	border-radius:0;
}

@media (max-width: 1199.98px) {

	#logo 
	{
		padding: 37px 13px;
	}

	#logo > img
	{
		width:126px;
		height:auto;
	}

}

@media (max-width: 479.98px) {

	#logo 
	{
		padding: 29px 8px;
	}

	#logo > img
	{
		width:110px;
		height:auto;
	}

}

@media (max-width: 419.98px) {

	#logo 
	{
		margin-left: 5px;
		padding: 20px 5px;
	}
	#logo, 
	#header.isfixed.scrolled #logo, 
	#header.isfixed.skipfocus #logo, 
	#header.isfixed.scrolled.skipfocus #logo 
	{
		top: 5px;
	}
	#logo > img
	{
		width: 80px;
		height:auto;
	}

}



/* ----------------------------------------------------------------
	Startseite in Navigation aktiv
-----------------------------------------------------------------*/

body.layout-Start #mainnav.collapse.navbar-collapse > ul.navbar-nav > li#menu-2.nav-item.root > a.nav-link:after
{
	width: calc(100% - 2rem);
}


/* ----------------------------------------------------------------
	Hauptmenu erste Ebene
-----------------------------------------------------------------*/

@media (min-width: 1200px) {

	#mainnav ul.navbar-nav > li.nav-item > a.nav-link:after, 
	#mainnav.collapse.navbar-collapse ul.navbar-nav > li.nav-item.dropdown > a.nav-link.dropdown-toggle:after
	{
		background: #E2001A;
	}

	#mainnav > ul.navbar-nav > li.nav-item.active > a.nav-link:after, 
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.active > a.nav-link:after,
	#mainnav > ul.navbar-nav > li.nav-item.active.dropdown > a.nav-link:after, 
	#mainnav > ul.navbar-nav > li.nav-item.active.dropdown > a.nav-link.dropdown-toggle:after, 
	#mainnav.collapse.navbar-collapse ul.navbar-nav li.nav-item.active.dropdown a.nav-link.dropdown-toggle::after,
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.active.dropdown > a.nav-link.dropdown-toggle:after
	{
		background: #E2001A;
	}

}



/* ----------------------------------------------------------------
	Hauptmenu zweite Ebene dropdown
-----------------------------------------------------------------*/

@media (min-width: 1200px) {

	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.dropdown > .submenu.dropdown-menu > ul.submenu-container,
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.dropdown > .submenu.dropdown-menu.sub1.show > ul.submenu-container
	{
		border-radius:0;
		background-color:#E2001A;
		color:#FFFFFF;
	}

	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.dropdown > .submenu.dropdown-menu.sub1.show > ul.submenu-container::before 
	{
		right: 46%;
		top: -32px;
		border: 16px solid transparent;
		border-bottom: 16px solid #E2001A;
	}

	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li#menu-4.nav-item.dropdown > .submenu.dropdown-menu,
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li#menu-4.nav-item.dropdown > .submenu.dropdown-menu.sub1.show
	{
		left:-66px;
	}

	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li#menu-6.nav-item.dropdown > .submenu.dropdown-menu,
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li#menu-6.nav-item.dropdown > .submenu.dropdown-menu.sub1.show
	{
		left:-82px;
	}

	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.dropdown > .submenu.dropdown-menu.sub1.show > ul.submenu-container > li.nav-item.active > a.nav-link,
	#mainnav.collapse.navbar-collapse > ul.navbar-nav > li.nav-item.active.dropdown > .submenu.dropdown-menu.sub1.show > ul.submenu-container > li.nav-item.active > a.nav-link
	{
		font-weight: 700;
		color:#000000;
	}

}


/* ----------------------------------------------------------------
	Mobile Navigaion aus-- und einklappen
-----------------------------------------------------------------*/

.navbar-toggler,
#header .navbar-toggler 
{
	background-color: #E2001A;
	padding: .25rem .5rem;
	border-radius:0px;
	border: 2px solid #FFFFFF;
}


/* ----------------------------------------------------------------
	Mobile navigation
-----------------------------------------------------------------*/

@media (max-width: 1199.98px) {

	#mainnav 
	{
		background-color: #E2001A;
		padding:5px;
	}

}



/* ----------------------------------------------------------------
	Breadcrumb
-----------------------------------------------------------------*/

#breadcrumbnav ol.breadcrumb > li.breadcrumb-item > a,
#breadcrumbnav ol.breadcrumb > li.breadcrumb-item.active > a,
#breadcrumbnav ol.breadcrumb > li.breadcrumb-item > a > span,
#breadcrumbnav ol.breadcrumb > li.breadcrumb-item.active > a > span
{
	color: #414141;
	text-decoration:underline;
}

#breadcrumbnav ol.breadcrumb > li.breadcrumb-item.current > a,
#breadcrumbnav ol.breadcrumb > li.breadcrumb-item.current > a > span
{
	color: #E2001A;
}



/* ----------------------------------------------------------------
	Quicklinks Startseite
-----------------------------------------------------------------*/

#quicklinks.contentbox > .contentbox-content figure.image picture > img.image-embed-item.img-fluid,
#quicklinks.contentbox > .contentbox-content figure.image a > picture > img.image-embed-item.img-fluid
{
	width:185px;
	height:185px;
	padding: 25px;
	border-radius:0;
	background-color:#E2001A;
}

@media (max-width: 1199.98px) {

	#quicklinks.contentbox > .contentbox-content figure.image picture > img.image-embed-item.img-fluid,
	#quicklinks.contentbox > .contentbox-content figure.image a > picture > img.image-embed-item.img-fluid
	{
		width: 120px;
		height:120px;
		padding: 20px;
	}

}


@media (max-width: 479.98px) {

	#quicklinks.contentbox > .contentbox-content figure.image picture > img.image-embed-item.img-fluid,
	#quicklinks.contentbox > .contentbox-content figure.image a > picture > img.image-embed-item.img-fluid
	{
		width: 130px;
		height:130px;
		padding: 20px;
	}

}


/* ----------------------------------------------------------------
	Contentbox
-----------------------------------------------------------------*/

.contentbox.border-primary 
{
	border: 1px solid #E2001A !important;
}
.contentbox.border-secondary 
{
	border: 1px solid #414141 !important;
}



/* ----------------------------------------------------------------
	Go To Top
-----------------------------------------------------------------*/

#totop
{
	background-color: #E2001A;
}

#totop:hover 
{
	background-color: #E2001A;
}


/* ----------------------------------------------------------------
	selection
-----------------------------------------------------------------*/

::selection 
{
	background: #E2001A;
	color: #FFFFFF;
	text-shadow: none;
}

::-moz-selection 
{
	background: #E2001A;
	color: #FFFFFF;
	text-shadow: none;
}

::-webkit-selection 
{
	background: #E2001A;
	color: #FFFFFF;
	text-shadow: none;
}


/* ----------------------------------------------------------------
	News
-----------------------------------------------------------------*/

a.btn-read-more
{
	background-color:#FFFFFF;
	color:#414141;
	font-size:1.1rem;
	font-weight:400;
	padding:6px 18px;
	border-radius:0px;
	border: 3px solid #E2001A;
	text-decoration:underline;
}

a.btn-read-more:hover, 
a.btn-read-more:focus 
{
	background-color:#FFFFFF;
	color:#000000;
	border: 3px solid #E2001A;
	text-decoration:underline;
}

/* --- pagebrowser --- */

.news > .news-list-view > nav.pagebrowser > ul.pagination > li.page-item > a.page-link,
.news > div.news-list-view > .pagebrowser > ul.pagination > li.page-item > a
{
	color: #414141;
	background-color: #FFFFFF;
	border: 1px solid #E2001A;
}

.news > .news-list-view > nav.pagebrowser > ul.pagination > li.page-item > a.page-link:hover,
.news > div.news-list-view > .pagebrowser > ul.pagination > li.page-item > a:hover
{
	color: #000000;
	background-color: #F7F7F7;
	border-color: #E2001A;
}

.news > .news-list-view > nav.pagebrowser > ul.pagination > li.page-item.active > span.page-link,
.news > div.news-list-view > .pagebrowser span.current 
{
	color: #414141;
	background-color: #F7F7F7;
	border-color: #414141;
}

.news > .news-list-view > nav.pagebrowser > ul.pagination > li.page-item.active > span.page-link:hover,
.news > div.news-list-view > .pagebrowser span.current:hover 
{
	color: #000000;
	background-color: #F7F7F7;
	border-color: #000000;
}


/* ----------------------------------------------------------------
	Responsive landscape
-----------------------------------------------------------------*/

/* ------ ipad querformat -------- */
@media only screen 
 and (min-width: 768px) 
 and (max-height: 1024px) 
 and (orientation: landscape) 
 and (-webkit-min-device-pixel-ratio: 1.5) {

	#logo 
	{
		padding: 37px 13px;
	}
	#logo, 
	#header.isfixed.scrolled #logo, 
	#header.isfixed.skipfocus #logo,
	#header.isfixed.scrolled.skipfocus #logo
	{
		top:13px;
	}

	#logo > img
	{
		width:126px;
		height:auto;
	}

}


/* ------ ipad hochformat -------- */
@media only screen 
 and (min-width: 768px) 
 and (max-height: 1024px) 
 and (orientation: portrait) 
 and (-webkit-min-device-pixel-ratio: 1.5) {

	#logo 
	{
		margin-left: 5px;
		padding: 20px 5px;
	}
	#logo, 
	#header.isfixed.scrolled #logo, 
	#header.isfixed.skipfocus #logo, 
	#header.isfixed.scrolled.skipfocus #logo 
	{
		top: 5px;
	}
	#logo > img
	{
		width: 80px;
		height:auto;
	}
	#topnav.navbar #mainnav > ul.nav.navbar-nav, 
	#nav.navbar #mainnav > ul.nav.navbar-nav 
	{
		/* max-height: none; */
	}


}


/* ------ iphone querformat -------- */
@media only screen 
 and (min-width: 375px) 
 and (max-height: 812px) 
 and (orientation: landscape) 
 and (-webkit-min-device-pixel-ratio: 1.5) {

	#logo 
	{
		margin-left: 5px;
		padding: 20px 5px;
	}
	#logo, 
	#header.isfixed.scrolled #logo, 
	#header.isfixed.skipfocus #logo, 
	#header.isfixed.scrolled.skipfocus #logo 
	{
		top: 5px;
	}
	#logo > img
	{
		width: 80px;
		height:auto;
	}

}



/* ------ allgemeine smartphones querformat -------- */
@media only screen 
 and (min-width: 360px) 
 and (max-height: 760px) 
 and (orientation: landscape) {

	#logo 
	{
		margin-left: 5px;
		padding: 20px 5px;
	}
	#logo, 
	#header.isfixed.scrolled #logo, 
	#header.isfixed.skipfocus #logo, 
	#header.isfixed.scrolled.skipfocus #logo 
	{
		top: 5px;
	}
	#logo > img
	{
		width: 80px;
		height:auto;
	}

	#topnav.navbar #mainnav > ul.nav.navbar-nav, 
	#nav.navbar #mainnav > ul.nav.navbar-nav 
	{
		max-height: calc(100vh - 140px);
	}


}