html, body {
height								: 100%;
margin								: 0px;
padding								: 0px;
}

body {
background-image					: url('../images/background.jpg');
background-image					: linear-gradient(to bottom, #3a6ea5 0px,#3a6ea5 135px, #777777 135px, #777777 137px, #cccccc 137px, #ffffff 600px);
background-repeat					: repeat-x;
height								: 100%;
font-size							: 11pt;
font-family							: Arial, Helvetica;
text-align							: center;
margin-left							: 10px;
margin-right						: 10px;
}

a {
text-decoration						: none;
color								: #0033cc;
}

a:hover {
color								: #000000;
}

input[type=text]:focus,
textarea:focus {
border-color						: #3a6ea5;
}

.header {
position							: relative;
z-index								: 1;
}

.header h1 {
text-align							: center;
margin								: 5px 0 0 0;
padding								: 0px;
font-size							: 1.6em;
font-weight							: 600;
line-height							: 50px;
text-align							: center;
text-shadow							: black 0.1em 0.1em 0.2em,
										0 1px 0 #444444,
										0 -1px 0 #444444,
										1px 0 0 #444444,
										-1px 0 0 #444444;
color								: #ffffff;
}

.header h1 img {
vertical-align						: middle;
margin-right						: 10px;
}

.header .btn_menu {
position							: absolute;
left								: 15px;
top									: 10px;
border-width						: 0px;
width								: 22px;
height								: 22px;
background							: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiI+Cgk8cGF0aCBkPSJNMiA0VjdIMjBWNEgyIE0yIDEwVjEzSDIwVjEwSDIgTTIgMTZWMTlIMjBWMTZIMiIgZmlsbD0iI2ZmZmZmZiIgLz4KPC9zdmc+");
display								: block;
}

.page {
width								: 100%;
max-width							: 1200px;
margin								: auto;
margin-top							: 5px;
background							: #ffffff;
border								: 1px solid #777777;
border-top							: 4px solid #222222;
border-radius						: 8px;
text-align							: left;
display								: flex;
flex-direction						: column;
position							: relative;
}

.breadcrumps {
font-size							: 9pt;
margin-left							: 5px;
margin-right						: 5px;
margin-top							: 5px;
}

.breadcrumps .icon_compass {
width								: 16px;
height								: 16px;
margin-right						: 4px;
margin-top							: -2px;
vertical-align						: middle;
}

.menu_top,
.menu_left,
.menu_right {
margin-top							: 5px;
margin-left							: 5px;
margin-right						: 5px;
padding								: 0px 0px;
}

.menu_top .splitter,
.menu_left .splitter,
.menu_right .splitter {
height								: 10px;
display								: block;
}

.menu_top .section,
.menu_left .section,
.menu_right .section {
padding								: 0 0 0 2px;
margin								: 0px 0px 3px 0px;
font-size							: 12pt;
font-weight							: 600;
color								: #000000;
border-bottom						: 1px solid #3a6ea5;
font-size							: 11pt;
display								: block;
}

.menu_top ul,
.menu_left ul,
.menu_right ul {
padding								: 0px;
margin								: 0px;
list-style							: none;
}

.menu_top li,
.menu_left li,
.menu_right li {
padding								: 0px;
margin								: 0px;
}

.menu_top a,
.menu_left a,
.menu_right a {
display								: block;
position							: relative;
line-height							: 24px;
min-height							: 24px;
text-decoration						: none;
color								: #000000;
font-size							: 11pt;
margin-bottom						: 2px;
}

.menu_top a,
.menu_left a,
.menu_right a  {
padding								: 0px 0px 0px 20px;
border-right						: 8px solid #cccccc;
}

.menu_left .level2 a,
.menu_right .level2 a {
margin-left							: 8px;
}

.menu_left .level3 a,
.menu_right .level3 a  {
padding-left						: 25px;
}

.menu_top a:hover,
.menu_left a:hover,
.menu_right a:hover {
background							: #dddddd;
background-repeat					: no-repeat;
border-left-color					: #3a6ea5;
border-right-color					: #3a6ea5;
}

.menu_top a:hover,
.menu_left a:hover,
.menu_right a:hover {
background-image					: url('images/kartoffel.png');
background-position					: 0px 4px;
}

.menu_top a.active,
.menu_left a.active,
.menu_right a.active  {
background							: #dddddd;
background-image					: url('images/kartoffel.png');
background-position					: 0px 4px;
background-repeat					: no-repeat;
border-right-color					: #3a6ea5;
}

.menu_left a.active_parent,
.menu_right a.active_parent  {
background							: #3a6ea5;
color								: #ffffff;
border-left-width					: 0px;
border-right-width					: 0px;
padding-left						: 13px;
}

.menu_left a.active_parent:after,
.menu_right a.active_parent:after {
content								: '';
position							: absolute;
right								: 4px;
top									: 7px;
border-color						: transparent;
border-top-color					: #ffffff;
border-style						: solid;    
width								: 0px;
height								: 0px;
border-width						: 10px 5px 0px 5px;
}

.linebreak:after {
content								:"\a";
white-space							: pre;
}

.content {
margin-top							: 5px;
padding-left						: 5px;
padding-right						: 5px;
}

.content h2 {
font-size							: 12pt;
font-weight							: 600;
margin								: 0px;
margin-bottom						: 5px;
padding								: 0px;
display								: block;
width								: 100%;
border-bottom						: 1px solid #3a6ea5;
}

.content h3 {
font-size							: 11pt;
font-weight							: 600;
margin								: 0px;
margin-bottom						: 5px;
padding								: 0px;
}

.footer {
border-top							: 1px solid #777777;
font-size							: 0.75em;
margin								: 15px 0px 0px 0px;
padding-top							: 3px;
}

.footer .copyright {
text-align							: center;
margin-bottom						: 10px;
}

.footer .links {
text-align							: center;
margin-bottom						: 10px;
}

.footer .links a {
color								: #000000;
text-decoration						: none;
}

.footer .links a:hover {
color								: #0033cc;
}

.footer .links a.active {
color								: #0033cc;
}

.clear {
clear								: both;
}

.modal {
display								: none;
position							: fixed;
z-index								: 10;
left								: 0;
top									: 0;
width								: 100%;
height								: 100%;
overflow							: hidden;
background-color					: rgb(0,0,0);
background-color					: rgba(0,0,0,0.9);
-webkit-user-select					: none;
user-select							: none;
-webkit-user-drag					: none;
user-drag							: none;
}

.modal .modal-content {
margin								: auto;
display								: block;
text-align							: center;
position							: absolute;
top									: 50%;
left								: 50%;
-ms-transform						: translate(-50%, -50%);
transform							: translate(-50%, -50%);
}

.modal .modal-content img {
border								: 1px solid #cccccc;
max-width							: calc(100vw - 100px);
max-height							: calc(100vh - 100px);
background							: #ffffff;
-webkit-user-drag					: none;
user-drag							: none;
}

.modal .modal-content video {
max-width							: 90vw;
max-height							: 90vh;
}

.modal .caption {
margin								: auto;
margin-top							: 5px;
width								: 90%;
max-width							: 800px;
text-align							: center;
color								: #000000;
background							: #ffffff;
border-radius						: 5px;
padding								: 10px 2px;
}

.modal .caption:empty {
display								: none !important;
}

.modal .close {
position							: absolute;
top									: 10px;
right								: 10px;
color								: #f1f1f1;
font-size							: 40px;
font-weight							: bold;
transition							: 0.3s;
}

.modal .close:hover,
.modal .close:focus {
color								: #bbb;
text-decoration						: none;
cursor								: pointer;
}


.modal .prev,
.modal .next {
cursor								: pointer;
position							: absolute;
top									: 50%;
width								: auto;
padding								: 16px;
margin-top							: -50px;
color								: white;
font-weight							: bold;
font-size							: 20px;
transition							: 0.6s ease;
border-radius						: 0 3px 3px 0;
z-index								: 10;
}

.modal .prev {
left								: 0;
border-radius						: 0 3px 3px 0;
}

.modal .next {
right								: 0;
border-radius						: 3px 0 0 3px;
}

.modal .prev:hover,
.modal .next:hover {
color								: #000000;
background-color					: rgba(222, 222, 222, 0.8);
}

.ankuendigung {
width								: 225px;
border								: 2px solid #3a6ea5;
border-radius						: 5px;
background							: #eeeeee;
box-shadow							: 0px 0px 15px 1px rgba(150,150,150,0.9);
position							: fixed;
right								: 10px;
top									: 10px;
z-index								: 1;
padding-bottom						: 20px;
margin-bottom						: 25px;
}

.ankuendigung:hover {
background							: #cceeff;
cursor								: hand;
cursor								: pointer;
}

.ankuendigung .foto {
max-width							: 225px;
}

.ankuendigung .text {
padding								: 0px 5px;
}

.ankuendigung .titel {
background							: #3a6ea5;
box-shadow							: 0px 0px 15px 1px rgba(150,150,150,0.9);
border-radius						: 6px;
width								: 100px;
text-align							: center;
color								: #ffffff;
padding								: 3px 2px;
position							: absolute;
bottom								: -10px;
left								: 0;
right								: 0;
margin								: 0 auto;
}

@media all and (min-width: 630px)
{
.menu_top .section {
display								: none !important;
}
	
.header .btn_menu {
display								: none;
}
	
.page {
display								: grid;
grid-template-rows					: auto auto auto 1fr 42px;
grid-template-columns				: 205px auto;
grid-template-areas					: "menu_top main_content" "breadcrumps main_content" "menu_side1 main_content" "menu_side2 main_content" "menu_side2 main_content" "footer footer";
}

.breadcrumps {
grid-area							: breadcrumps;
margin-top							: 0px !important;
}

.menu_top {
grid-area							: menu_top;
}

.menu_left {
grid-area							: menu_side1;
}

.menu_right {
grid-area							: menu_side2;
}

.content {
grid-area							: main_content;
}

.footer {
display								: block;
margin-left							: 10px;
margin-right						: 10px;
grid-area							: footer;
}

.footer .copyright {
float								: left;
margin-left							: 10px;
margin-bottom						: 10px;
text-align							: left;
}

.footer .links {
float								: right;
margin-right						: 10px;
text-align							: left;
}

}

@media all and (min-width: 630px)
{
.page {
grid-template-rows					: 30px auto auto 1fr 42px;
grid-template-columns				: 205px auto;
grid-template-areas					: "menu_top menu_top" "breadcrumps breadcrumps" "menu_side1 main_content" "menu_side2 main_content" "menu_side2 main_content" "footer footer";
}

.menu_top {
padding								: 0px 10px 3px 10px;
margin								: 0px 0px 3px 0px;
display								: block;
background							: #dddddd;
border-top-left-radius				: 7px;
border-top-right-radius				: 7px;
}

.menu_top ul {
padding								: 0px;
margin								: 0px;
list-style							: none;
}

.menu_top li  {
padding								: 0px;
margin								: 0px;
display								: inline;
}

.menu_top a {
display								: inline;
padding								: 3px 5px 3px 5px;
border-bottom						: 3px solid #dddddd;
border-right-width					: 0px;
font-size							: 11pt;
text-decoration						: none;
color								: #000000;
}

.menu_top a:hover,
.menu_top a.active {
border-color						: #3a6ea5;
background-image					: none;
}

}

@media all and (min-width: 1250px)
{
.page {
display								: grid;
grid-template-rows					: 30px auto minmax(50px, 1fr) 42px;
grid-template-columns				: 215px auto 215px;
grid-template-areas					: "menu_top menu_top menu_top" "breadcrumps breadcrumps breadcrumps" "menu_side1 main_content menu_side2" "footer footer footer";
}

.menu_right a {
border-left							: 8px solid #cccccc;
border-right-width					: 0px;
padding								: 0px 20px 0px 7px;
}

.menu_right a:hover {
background-image					: url('images/kartoffel.png');
background-position					: 178px 4px;
}

.menu_right a.active {
background							: #dddddd;
background-image					: url('images/kartoffel.png');
background-position					: 178px 4px;
background-repeat					: no-repeat;
border-left-color					: #3a6ea5;
}

}