@charset 'utf-8';

body.pat {
background-color: rgb(0,100,160);
}

.pat header {
position: relative;
}

.pat header a.kvt svg {
border-right-color: rgb(0,100,180);
}

.pat header a.kvt p span:first-of-type,
.pat header a.kvt p span:last-of-type  {
color: rgb(0,100,180);
}

.pat header a.kvt svg #links, 
.pat header a.kvt svg #unten,
.pat header a.kvt svg #rechts,
.pat header a.kvt:hover svg polygon {
fill: rgb(0,100,180) !important;
}

.pat header div.head {
background: rgb(255,180,0);
flex-flow: row nowrap;
}

.pat header div.head a {
display: flex;
flex-flow: row nowrap;
width: 100%;
}

.pat header div.head a > span {
font-size: 2em;
font-weight: bold;
color: rgb(0,100,180);
margin: auto auto auto 0;
}

.pat header a.kvt:hover > span {
color: rgba(0,100,180,.6);
}

.pat header a.kvt svg {
margin-left: auto;
}

.pat.start header > nav.main {
position: absolute;
}

.pat header > nav.main {
background: rgba(227,234,240,.8);
width: 100%;
}

.pat nav.main li a {
color: rgb(0,100,180) !important;
border-color: rgb(0,100,180) !important;
}

.pat nav.main li a:hover {
color: rgb(0,80,140) !important;
}

.pat.start nav.sub ul {
padding-top: 96px;
}

.pat nav.sub ul {
height: auto;
box-shadow: none;
}

.pat main article.voll {
margin-top: 0;
}

.pat.start main {
/* 
display: flex;
flex-flow: row nowrap;
 */
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

/* 
.pat.start main > div {
width: calc(100% / 3);
margin: 0 16px;
}

.pat.start main > div:first-child {
margin-left: 0;
}

.pat.start main > div:last-child {
margin-right: 0;
}
 */

.pat.start article > h2 {
font-size: 1em;
border-bottom: 1px solid rgb(0,100,180);
padding-bottom: .25em;
}

ul.banner {
display: flex;
flex-flow: row nowrap;
border-bottom: 1px solid rgb(0,100,180);
padding-bottom: .5em;
overflow: scroll;
}

ul.banner li + li {
padding-left: 1em;
}

ul.banner li img {
display: block;
height: 128px;
}

ul.banner li a:hover img {
box-shadow: 0 0 12px rgba(0,0,0,.2);
}

.pat section {
padding-top: 12px;
}

.pat.start main article > * {
flex: 0 0 50%;
box-sizing: border-box;
}

.pat.start main h3 {
color: rgb(0,100,180);
font-size: 1.33em;
line-height: 1.25em;
font-weight: bold;
margin: 0 0 8px 0;
padding: 0;
border-bottom: none;
}

.pat.start .dreier div.achtung {
border: none;
background: rgba(200,0,0,.1);
margin-right: 0;
}

/*ul.einstiege li {width: 100%;}*/
ul.einstiege li:nth-child(even) a {background-color: rgb(245,249,252);}
ul.einstiege li:nth-child(4n-1) a {background-color: rgb(235,243,249);}
ul.einstiege li a h3 {border: 0;}

/* ############# Screens bis 768px ############# */
@media only screen and (max-width: 768px) {
  
  

}




/* ############# Screens bis 680px ############# */
@media only screen and (max-width: 680px) {
  
  .pat.start header > nav.main,
  .pat header > nav.main {
  position: static;
	padding: 6px 8px 2px 8px;
	}
	
	.pat.start nav.sub ul {
	padding-top: 12px;
	}
  
	.pat header div.head a > span {
	font-size: 1.5em;
	}
	
	.pat.start main article {
	flex-flow: row wrap;
	}

	.pat.start main article div:first-child,
	.pat.start main article ul.einstiege,
	.pat.start main article > * {
	width: 100%;
	flex: 0 0 100%;
	margin-right: 0;
	margin-left: 0;
	}
	
	.pat.start main article div + div {
	margin-top: 2em;
	}

}






/* ############# Screens bis 400px ############# */
@media only screen and (max-width: 400px) {

	.pat header div.head a > span {
	font-size: 1em;
	}
	
}