* {
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
body {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #ffffff;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-family: Arial;
    font-size: 100%;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}
#body {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #dddddd;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-family: Arial;
    font-size: 100%;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}
a, a:visited {
    color: #0000ee;
}

#wrapper {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #dddddd;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 1em;
    max-width: 1200px;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
}
#header {
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 0;
	height: auto;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#headerin {
    height: auto;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 100%;
	}
#headerin img {
	display:block;
	border-radius: 0px;
    box-shadow: 0 45px 20px -50px #000000;
	}
#header h1 {
    clear: right;
    color: #0080C0;
    float: right;
    font-size: 24px;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1.2em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    text-align: right;
    width: auto;
}
#slogan {
    clear: right;
    color: #000000;
    float: right;
    font-size: 120%;
    font-weight: 100;
    letter-spacing: 1px;
    line-height: 1.2em;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
    text-align: right;
    width: auto;
}
#content, #boxs {
    float: left;
    min-height: 300px;
    overflow-x: auto;
    overflow-y: auto;
}
#navi {
    float: left;
    width: 30%;
	margin-top: 3px;
}
#locator {
    -moz-font-feature-settings: normal;
    -moz-font-language-override: normal;
    -x-system-font: none;
    color: #000000;
    font-family: Arial;
    font-size: 70%;
    font-size-adjust: none;
    font-stretch: normal;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: normal;
}
#content {
 /*   box-shadow: 0 45px 50px -50px #000000; */
    overflow-x: hidden;
    overflow-y: hidden;
    width: 70%;
}
.content_in {
    padding-bottom: 1em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
}
.content_in textarea {
    width: 90%;
}
table.edit {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #004080;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    font-size: 100%;
    line-height: 1.2em;
    margin-bottom: 1px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1px;
}
table.edit td {
    padding-bottom: 3px;
    padding-left: 13px;
    padding-right: 3px;
    padding-top: 3px;
}
table.edit a:link, table.edit a {
    color: #FFFFFF;
}
.table_with_shadow {
	border-color: #000000;    
	border-style: solid;
    border-width: 1px;
    font-size: 100%;
	box-shadow: 2px 5px 10px 0px #303030;
}
.table_with_shadow p {
    padding-left: 5px;
    padding-right: 5px;
}
#boxs {
    box-shadow: 0 45px 50px -50px #000000;
    clear: both;
    margin-top: -10px;
    width: 100%;
}
.news {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #eee;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
	border-color: #000000;    
	border-style: solid;
    border-width: 2px;	
	border-radius: 6px;	
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    box-shadow: 0 45px 50px -50px #000000;
    font-size: 80%;
    margin-top: 1em;
    padding-bottom: 0.6em;
    padding-left: 0.6em;
    padding-right: 0.6em;
    padding-top: 0.6em;
}
#footer {
    border-bottom-color: #000000;
    border-bottom-style: solid;
    border-bottom-width: 5px;
    box-shadow: 0 45px 50px -50px #000000;
    clear: both;
    color: #666666;
    margin-bottom: 2em;
    margin-left: 2em;
    margin-right: 2em;
    margin-top: 2em;
}
.footer_in {
    clear: both;
    min-height: 3em;
    padding-bottom: 1em;
    padding-left: 0;
    padding-right: 0;
    padding-top: 1em;
    text-align: center;
    width: 100%;
}
.copyright {
    font-size: 80%;
}
h1, h2, h3 {
    color: #000000;
    font-size: 130%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-top: 0.5em;
    text-shadow: 0 1px 1px #808080;
}
h4 {
    color: #000000;
    font-size: 110%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-shadow: 0 1px 1px #808080;
}
h5 {
    color: #000000;
    font-size: 110%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-shadow: 0 1px 1px #808080;
}
h6 {
    color: #000000;
    font-size: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    text-shadow: 0 1px 1px #808080;
}
input[type="submit"] {
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #4D4D4D;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
	border-radius: 6px;
    color: #FFFFFF;
    display: inline-block;
    font-size: 90%;
    font-variant: normal;
    font-weight: normal;
    height: 22px;
    margin-left: 4px;
    margin-top: 5px;
    padding-bottom: 10px;
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 0px;
    position: relative;
    text-align: center;
}
input[type="text"], input[type="text"]:focus, input[type="password"]:focus {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: #006432;
	border-radius: 6px;
    border-bottom-style: inset;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #006432;
    border-top-style: inset;
    border-top-width: 1px;
    font-size: 90%;
}
#search {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #000000;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #4D4D4D;
	border-radius: 6px;	
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #4D4D4D;
    border-top-style: solid;
    border-top-width: 1px;
    height: 20px;
    margin-bottom: 2px;
    padding-top: 2px;
	padding-bottom: 12px;
    padding-left: 1.0em;
    margin-right: 42px;
}
#search form {
        margin: 0;
        padding: 5px 20px 0 0;
    }
    #searchfield {
        width: 90px;
		height: 18px;
    }
    #searchform input {
        background-color: #F8F8F8;
        background-image: url("images/search_15x16.gif");
        background-position: 0px;
        background-repeat: no-repeat;
        border: 1px solid #C0C0C0;
        cursor: text;
        padding-left: 18px;
    }
    #searchform input:hover {
        border: 1px solid #FF7900;
    }
    #searchform input:focus {
        background-color: #FFFFFF;
        border: 1px solid #FF7900;
    }
#menu .langmenu a {
	border-width: 0;
	float: right;
    margin-top: -35px;
    padding-right: 0px;
	height: 0px;
	width: 40px;
}
#iconmenu {
    float: right;
    margin-top: -34px;
    padding-right: 40px;
}
blockquote {
    background: #ffffff;
	color: #707070;
	font-style: italic;
	border-left: 4px solid;
	padding: 1px 0 1px 6px;
	margin: 0 0 0 6px;
}
blockquote p:before { 
content: ' „ ' ' '; 
}
blockquote p:after { 
content: ' ' ' “ ';
}
img {
   height: auto;
   max-width: 100%;
   width: auto;
   border-radius: 0px; 
/* -webkit-box-shadow: 2px 5px 10px 0px #303030; WebKit */
/* -moz-box-shadow: 2px 5px 10px 0px #303030; Firefox */
/* box-shadow: 2px 6px 10px 0px #303030; Standard */ 
}
.video {
    height: 0;
    overflow-x: hidden;
    overflow-y: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.video iframe, .video object, .video embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.elastic-video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	box-shadow: 2px 5px 10px 0px #303030;
}
.elastic-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: 2px 5px 10px 0px #303030;
}	
.youtube_privacy {
    cursor: pointer;
}


p {
    line-height: 1.3;
    margin-bottom: .5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: .5em;
}
ol {
    margin-bottom: 6px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 6px;
}
ol li {
    list-style-type:decimal-leading-zero;
	-moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 22px;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
ul {
    list-style-position: inside;
    margin-bottom: 6px;
    margin-left: 10px;
    margin-right: 0;
    margin-top: 6px;
}
ul li {
	list-style-type: disc;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: -moz-use-text-color;
    border-bottom-style: none;
    border-bottom-width: 0;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: -moz-use-text-color;
    border-top-style: none;
    border-top-width: 0;
    line-height: 1.2;
    margin-bottom: 0;
    margin-left: 17px;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 5px;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
}
#menu li.sdocs > a {
background-color: #707070;	 
}
#menu li.sdoc > a {
background-color: #707070;
}

#menu li.sdocs > span {
background-color: #707070;	 
}
#menu li.sdoc > span {
background-color: #707070;
}

#menu li, #menu ul {
    list-style-type: none;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#menu a {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #000000;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #dddddd;
	border-radius: 6px;	
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #dddddd;
    border-top-style: solid;
    border-top-width: 0px;
    color: #FFFFFF;
    display: block;
    line-height: 200%;
    padding-left: 1em;
    padding-right: 1em;
	margin-top: 2px;
}

#menu ul.menulevel1 li.abgesetzt {
	margin-top: 10px;
	border-top-color: #cc0000;
    border-top-style: solid;
    border-top-width: 2px;
    clear: both;
    color: #666666;
    padding-top: 8px;
 }

#menu span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #000000;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #dddddd;
	border-radius: 6px;	
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #dddddd;
    border-top-style: solid;
    border-top-width: 0px;
    color: #FFFFFF;
    display: block;
    line-height: 200%;
    padding-left: 1em;
    padding-right: 1em;
	margin-top: 2px;
}

#menu a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}

#menu span:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}

#menu span:visited {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}

#menu {
    box-shadow: 0 45px 50px -50px #000000;
    color: #FFFFFF;
    float: left;
    font-size: 90%;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
    width: 100%;
}
#menu li {
    list-style-image: none;
    list-style-type: none;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
#menu ul.menulevel1 li {
    line-height: 1em;
    margin-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0px;
}
#menu ul.menulevel2 {
    margin-bottom: 0px;
    margin-left: 14px;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul.menulevel2 li {
    line-height: 1em;
    margin-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul.menulevel2 li a {
    background-attachment: scroll;
    background-clip: border-box;
   /* background-color: #4A4A4A; */
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
#menu ul.menulevel2 li a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}
#menu ul.menulevel3 {
    margin-bottom: 0px;
    margin-left: 14px;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul ul.menulevel3 li {
    margin-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul.menulevel3 li a {
    background-attachment: scroll;
    background-clip: border-box;
   /* background-color: #4A4A4A; */
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
#menu ul.menulevel3 li a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}	
#menu ul.menulevel4 {
    margin-bottom: 0px;
    margin-left: 14px;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul ul.menulevel4 li {
    margin-bottom: 0px;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1px;
}
#menu ul.menulevel4 li a {
    background-attachment: scroll;
    background-clip: border-box;
   /* background-color: #4A4A4A; */
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
}
#menu ul.menulevel4 li a:hover {
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #8B8B8B;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    color: #000000;
}


/* #menu2 {
    box-shadow: 0 45px 50px -50px #000000;
    font-size: 90%;
    margin-top: -6px;
    padding-bottom: 3px;
    padding-top: 0;
    width: 100%;
}
#menu2 li {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #000000;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: #FFFFFF;
	border-radius: 6px;	
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-image-outset: 0 0 0 0;
    border-image-repeat: stretch stretch;
    border-image-slice: 100% 100% 100% 100%;
    border-image-source: none;
    border-image-width: 1 1 1 1;
    border-top-color: #FFFFFF;
    border-top-style: solid;
    border-top-width: 1px;
    display: block;
    font-size: 100%;
    line-height: 200%;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin-bottom: 1px;
    margin-left: -10px;
    padding-bottom: 0;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
}
#menu2, #menu2 a {
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    color: #FFFFFF;
    display: block;
    font-family: arial,sans-serif;
    line-height: 200%;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
}
#menu2 li a:hover {
    color: #80FFFF;
} */

.block {
    background-color: #dddddd;
    box-shadow: 0 8px 6px -6px #000000;
    float: left;
    margin-left: 1%;
    margin-right: 1%;
    width: 48%;
}
.blockin {
	border-color: #000000;    
	border-style: solid;
    border-width: 2px;
    font-size: 80%;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
}
.lastupdate {
    border-top-color: #000000;
    border-top-style: solid;
    border-top-width: 2px;
    color: #000000;
    font-size: 90%;
    padding-bottom: 0.5em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0.5em;
}

.button a {
    -moz-text-decoration-color: -moz-use-text-color;
    -moz-text-decoration-line: none;
    -moz-text-decoration-style: solid;
    background-attachment: scroll;
    background-clip: border-box;
    background-color: #000000;
    background-image: none;
    background-origin: padding-box;
    background-position: 0 0;
    background-repeat: repeat;
    background-size: auto auto;
    border-bottom-color: rgba(0, 0, 0, 0.25);
	border-radius: 6px;	
    border-bottom-style: solid;
    border-bottom-width: 1px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    padding-bottom: 6px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    position: relative;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
}
.button a:after {
    content: " ";
    display: inline;
    font-weight: bold;
}
.slideshow {
-webkit-box-shadow: 2px 5px 10px 0px #303030; /* WebKit */
-moz-box-shadow: 2px 5px 10px 0px #303030; /* Firefox */
box-shadow: 2px 5px 10px 0px #303030; /* Standard */
}
.header_slideshow .slideshow {
        box-shadow: 0 45px 20px -50px #000000;
    }
	
.fotorama {
-webkit-box-shadow: 2px 5px 10px 0px #303030; /* WebKit */
-moz-box-shadow: 2px 5px 10px 0px #303030; /* Firefox */
box-shadow: 2px 5px 10px 0px #303030; /* Standard */
}

.google-rezensionen .fotorama {
	background-color: #fff;
	border-color: #000000;    
	border-style: solid;
    border-width: 2px;	
	border-radius: 6px;	
    box-shadow: 0 45px 20px -50px #000;
}

.google-rezensionen .fotorama__img {
    top: 0 !important;
}


@media screen and (max-width: 768px) {
#iconmenu {
    visibility: hidden;
}
#navi {
    width: 100%;
}
#content {
    width: 100%;
}
#boxs {
    clear: none;
    overflow-x: auto;
    overflow-y: auto;
    width: 100%;
}
.news {
    overflow-x: auto;
    overflow-y: auto;
    visibility: visible;
}
.block {
    height: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
    visibility: hidden;
}

}

@media screen and (min-width: 769px) and (max-width: 979px) {
#navi {
    width: 30%;
}
#content {
    width: 70%;
}
.news {
    height: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
    visibility: hidden;
}
.block {
    visibility: visible;
	    margin-top: -10em;
		margin-bottom: 11em;
}
#iconmenu {
    visibility: hidden;
}
#boxs {
    clear: none;
    width: 100%;
}
}
@media screen and (min-width: 980px) {
#iconmenu {
    visibility: hidden;
}
#navi {
    width: 20%;
}
#content {
    width: 60%;
}
#boxs {
    clear: none;
    overflow-x: auto;
    overflow-y: auto;
    width: 20%;
}
.news {
    overflow-x: auto;
    overflow-y: auto;
    visibility: visible;
}
.block {
    height: 1px;
    overflow-x: hidden;
    overflow-y: hidden;
    visibility: hidden;
}

}

/* =====================================================================
   HORIZONTALES MENÜ mit Aufklappen beim Darüberfahren (Hover)
   Dieser Block steht absichtlich GANZ AM ENDE der Datei, damit er
   die älteren Menü-Regeln oben überschreibt. Zum Rückgängig machen
   einfach den kompletten Block bis zum Ende-Kommentar löschen.
   ===================================================================== */

/* Menü-Leiste über die volle Breite, nicht mehr in der 20-30%-Spalte */
#navi,
#navi #menu {
    float: none !important;
    clear: both;
    width: 100% !important;
}
#navi #menu {
    position: relative;
    z-index: 1000;
}

/* Obere Ebene: Einträge nebeneinander */
#menu ul.menulevel1 {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0;
    padding: 0;
}
#menu ul.menulevel1 > li {
    position: relative;
    float: none;
    width: auto;
}
#menu ul.menulevel1 > li > a,
#menu ul.menulevel1 > li > span {
    margin-top: 2px;
    white-space: nowrap;
}

/* Untermenüs: unsichtbar, klappen beim Darüberfahren darunter auf */
#menu ul.menulevel2 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14em;
    margin: 0;
    padding: 2px 0 0 0;
    z-index: 1001;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
#menu ul.menulevel1 > li:hover > ul.menulevel2,
#menu ul.menulevel1 > li:focus-within > ul.menulevel2 {
    display: block;
}
#menu ul.menulevel2 li {
    position: relative;
    width: 100%;
}
#menu ul.menulevel2 li a,
#menu ul.menulevel2 li span {
    white-space: nowrap;
}

/* Dritte und vierte Ebene: klappen nach rechts auf */
#menu ul.menulevel3,
#menu ul.menulevel4 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 14em;
    margin: 0;
    padding: 0 0 0 2px;
    z-index: 1002;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
#menu ul.menulevel2 li:hover > ul.menulevel3,
#menu ul.menulevel2 li:focus-within > ul.menulevel3,
#menu ul.menulevel3 li:hover > ul.menulevel4,
#menu ul.menulevel3 li:focus-within > ul.menulevel4 {
    display: block;
}

/* Such- und Sprachfeld in der Leiste: Suche rechts neben dem Menü */
#navi #menu #search {
    float: right;
}

/* Auf allen Bildschirmbreiten gleich: das Menü bleibt horizontal.
   Das alte Handy-Menüsymbol wird nicht gebraucht. */
#iconmenu {
    display: none !important;
}

/* Bei sehr schmalen Bildschirmen: Einträge dürfen umbrechen,
   Untermenüs klappen dann untereinander auf statt zur Seite. */
@media screen and (max-width: 600px) {
    #menu ul.menulevel1 > li > a,
    #menu ul.menulevel1 > li > span {
        white-space: normal;
        padding-left: 0.6em;
        padding-right: 0.6em;
    }
    #menu ul.menulevel2 {
        min-width: 12em;
    }
    #menu ul.menulevel3,
    #menu ul.menulevel4 {
        position: static;
        box-shadow: none;
        padding-left: 14px;
    }
}

/* Berührungsbildschirme: Untermenü bleibt offen, solange man antippt */
@media (hover: none) {
    #menu ul.menulevel1 > li:active > ul.menulevel2,
    #menu ul.menulevel2 li:active > ul.menulevel3 {
        display: block;
    }
}
/* ======================= ENDE horizontales Menü ======================= */

/* ---------------------------------------------------------------------
   Korrektur: Einträge mit der Menüklasse "abgesetzt" (z. B. Willkommen,
   Home) standen durch Rand, Abstand oben und Innenabstand tiefer als
   die anderen Einträge. In der horizontalen Leiste sollen alle Einträge
   der ersten Ebene auf gleicher Höhe stehen.
   Der frühere rote Strich ist entfernt.
   --------------------------------------------------------------------- */
#menu ul.menulevel1 li.abgesetzt {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
    clear: none;
}
/* ---------------------------- Ende Korrektur ---------------------------- */

/* ---------------------------------------------------------------------
   Menü der ersten Ebene sitzt direkt unter dem Headerbild, mit genau
   2 Pixeln Abstand dazwischen. Vorher kamen 1em Abstand unter dem
   Header und 3 Pixel über dem Menü zusammen.
   Zum Rückgängig machen diesen Block bis zum Ende-Kommentar löschen.
   --------------------------------------------------------------------- */
#header {
    margin-bottom: 0;
}
#navi {
    margin-top: 0;
}
/* ------------------- Ende: Menü direkt unter dem Headerbild ------------------- */

/* ---------------------------------------------------------------------
   Willkommen, Kontakt (alle Einträge mit Klasse "abgesetzt") und das
   Suchfeld stehen in der Menüzeile UNTER dem Headerbild, ganz rechts,
   in dieser Reihenfolge. Alle anderen Einträge bleiben links.
   Technik: Die drei Felder liegen absolut am rechten Rand der Menüzeile
   (je 8.5em breit, 4px Abstand). Die normalen Einträge lassen rechts
   den dafür nötigen Platz frei (padding-right der Liste), damit nichts
   überlappt. Ganz schmale Fenster: siehe Media Query am Ende.
   Zum Rückgängig machen diesen Block bis zum Ende-Kommentar löschen.
   --------------------------------------------------------------------- */
#wrapper {
    position: static;
    padding-top: 5px;
}
#navi #menu {
    position: relative;                       /* Bezugsfläche für die rechten Felder */
    min-height: calc(2em + 4px);
}
#menu ul.menulevel1 {
    padding-right: calc(3 * 8.5em + 3 * 4px); /* Platz für die drei rechten Felder */
}
#menu ul.menulevel1 > li.abgesetzt {
    position: absolute;
    top: 0;
    width: 8.5em;
    z-index: 1100;
}
/* Von rechts gezählt: Suche ganz rechts, davor Kontakt, davor Willkommen */
#menu ul.menulevel1 > li.abgesetzt {
    right: calc(8.5em + 4px);                 /* zweiter von rechts (Kontakt) */
}
#menu ul.menulevel1 > li.abgesetzt:first-of-type,
#menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
    right: calc(2 * (8.5em + 4px));           /* dritter von rechts (Willkommen) */
}
#menu ul.menulevel1 > li.abgesetzt > a,
#menu ul.menulevel1 > li.abgesetzt > span {
    display: block;
    text-align: center;
    margin-top: 2px;
}

/* Suchfeld: gleiche Form und Höhe wie ein Menüeintrag, innen weiß mit
   schwarzem Rahmen, ganz rechts in der Zeile. */
#navi #menu #search {
    position: absolute;
    top: 2px;
    right: 0;
    left: auto;
    float: none;
    width: 8.5em;
    height: 2em;
    font-size: 100%;
    margin: 0;
    padding: 2px;               /* Dicke des schwarzen Rahmens */
    box-sizing: border-box;
    background-color: #000000;
    border: 0;
    border-radius: 6px;
    z-index: 1100;
}
#navi #menu #search form {
    margin: 0;
    padding: 0;
    height: 100%;
}
#navi #menu #search #searchfield {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0 0.5em 0 24px;       /* links Platz für die Lupe */
    background-color: #FFFFFF;
    background-position: 6px center;
    border: 0;
    border-radius: 3px;
    color: #000000;
    font-size: inherit;
}
#navi #menu #search #searchfield:hover,
#navi #menu #search #searchfield:focus {
    background-color: #FFFFFF;
    border: 0;
    outline: 0;
}

/* Schmale Fenster und Smartphones (unter 760 px): Willkommen, Kontakt
   und Suche stehen als eigene Zeile ÜBER dem Menü (direkt unter dem
   Headerbild) und teilen sich die volle Breite gleichmäßig: je ein
   Drittel, 4 Pixel Abstand, gleiche Höhe. Reihenfolge: Willkommen,
   Kontakt, Suche. Das eigentliche Menü beginnt darunter. */
@media screen and (max-width: 759px) {
    #navi #menu {
        padding-top: calc(2em + 6px);
    }
    #menu ul.menulevel1 {
        padding-right: 0;
    }
    #menu ul.menulevel1 > li.abgesetzt,
    #navi #menu #search {
        top: 0;
        bottom: auto;
        left: auto;
        right: auto;
        width: calc((100% - 8px) / 3);
        font-size: 100%;
    }
    #menu ul.menulevel1 > li.abgesetzt {
        left: 0;
    }
    #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt {
        left: calc((100% - 8px) / 3 + 4px);
    }
    #navi #menu #search {
        left: calc(2 * ((100% - 8px) / 3 + 4px));
        top: 2px;
    }
    #menu ul.menulevel1 > li.abgesetzt > a,
    #menu ul.menulevel1 > li.abgesetzt > span {
        white-space: nowrap;
        padding-left: 0.3em;
        padding-right: 0.3em;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 100%;
    }
}
/* ------------- Ende: Willkommen, Kontakt, Suche rechts ------------- */

/* ---------------------------------------------------------------------
   Layout: Inhalt links, Boxen (Google Business Review, Trainingsvideos,
   News ...) ganz rechts. Das Menü liegt nicht mehr links in einer
   Spalte, deshalb gab es links eine leere Lücke. Jetzt nimmt der
   Inhalt die gesamte freie Breite links neben den Boxen ein.
   Gilt ab 980 Pixel Fensterbreite; darunter bleibt alles wie vorher
   (Inhalt volle Breite, Boxen darunter).
   Zum Rückgängig machen diesen Block bis zum Ende-Kommentar löschen.
   --------------------------------------------------------------------- */
@media screen and (min-width: 980px) {
    #content {
        float: left;
        width: 75%;
        box-sizing: border-box;
    }
    #boxs {
        float: right;
        clear: none;
        width: 25%;
        box-sizing: border-box;
        padding-left: 0.5em;
    }
}
/* ------------- Ende: Layout Inhalt links / Boxen rechts ------------- */

/* ---------------------------------------------------------------------
   ICONS statt Text für Willkommen, Kontakt und Suche (weiße Symbole auf
   dem schwarzen Feld): Haus = Willkommen, Brief + Telefon = Kontakt,
   Lupe = Suche. Der Text bleibt für Suchmaschinen und Screenreader im
   Code, wird nur ausgeblendet; beim Darüberfahren erscheint er als Tipp.
   Die Suche ist ein Icon und klappt beim Anklicken/Antippen zu einem
   Eingabefeld nach links auf (ohne JavaScript, per :focus-within).
   Zugeordnet wird über die Reihenfolge der "abgesetzt"-Einträge: der
   erste ist Willkommen, der zweite Kontakt.
   Zum Rückgängig machen diesen Block bis zum Ende-Kommentar löschen.
   --------------------------------------------------------------------- */
/* Felder werden schmal und quadratisch-rechteckig */
#menu ul.menulevel1 {
    padding-right: calc(3 * 2.6em + 3 * 4px);   /* Platz für Haus, Brief/Telefon, Lupe */
}
#menu ul.menulevel1 > li.abgesetzt {
    width: 2.6em;
    right: calc(2.6em + 4px);                   /* Kontakt: zweiter von rechts */
}
#menu ul.menulevel1 > li.abgesetzt:first-of-type,
#menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
    right: calc(2 * (2.6em + 4px));             /* Willkommen: dritter von rechts */
}
/* Kontakt hat zwei Symbole nebeneinander und ist deshalb breiter */
#menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt {
    width: 4.6em;
    right: calc(2.6em + 4px);
}
#menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
    right: calc(4.6em + 2.6em + 8px);
}
#menu ul.menulevel1 {
    padding-right: calc(2.6em + 4.6em + 2.6em + 12px);
}

/* Text ausblenden, Symbol als Hintergrund zentrieren */
#menu ul.menulevel1 > li.abgesetzt > a,
#menu ul.menulevel1 > li.abgesetzt > span {
    height: 2em;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    text-indent: -999em;                        /* Text unsichtbar, bleibt im Code */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25em 1.25em;
}
#menu ul.menulevel1 > li.abgesetzt:first-of-type > a,
#menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E");
}
#menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%275%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M2 7 L12 14 L22 7%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 3 H9 L11 8 L8.5 9.5 A12 12 0 0 0 14.5 15.5 L16 13 L21 15 V19 A2 2 0 0 1 19 21 A16 16 0 0 1 3 5 A2 2 0 0 1 5 3 Z%27/%3E%3C/svg%3E");
    background-position: calc(50% - 0.85em) center, calc(50% + 0.85em) center;
    background-size: 1.25em 1.25em, 1.25em 1.25em;
}
/* Zustände der drei Icon-Felder.
   WICHTIG: CMSimple_XH zeigt die Seite, auf der man gerade ist, oft als
   <span> statt als Link <a>. Deshalb gelten alle Regeln hier für BEIDE
   (a und span). Die alten Menüregeln machen aktive (#707070) und
   überfahrene (#8B8B8B) Einträge hellgrau und entfernen das Symbol.
   Mit !important bleiben die Felder in jedem Zustand wie vorgesehen.

   Normal und besucht: schwarzes Feld, weißes Symbol (Maus darüber: dunkelgrau).
   Aktive Seite: durchsichtig mit schwarzem Rand (2 px), schwarzes Symbol.
   Symbole: erster "abgesetzt"-Eintrag = Haus; jeder weitere = Brief + Telefon. */
#navi #menu ul.menulevel1 > li.abgesetzt > a,
#navi #menu ul.menulevel1 > li.abgesetzt > span {
    background-color: #000000 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 1.25em 1.25em !important;
    color: #FFFFFF !important;
}
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > a,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > span {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%275%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M2 7 L12 14 L22 7%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 3 H9 L11 8 L8.5 9.5 A12 12 0 0 0 14.5 15.5 L16 13 L21 15 V19 A2 2 0 0 1 19 21 A16 16 0 0 1 3 5 A2 2 0 0 1 5 3 Z%27/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: calc(50% - 0.85em) center, calc(50% + 0.85em) center !important;
    background-size: 1.25em 1.25em, 1.25em 1.25em !important;
}
/* Maus darüber / Tastatur-Fokus: etwas heller, Symbole bleiben */
#navi #menu ul.menulevel1 > li.abgesetzt > a:hover,
#navi #menu ul.menulevel1 > li.abgesetzt > a:focus,
#navi #menu ul.menulevel1 > li.abgesetzt > span:hover {
    background-color: #444444 !important;
}
/* Aktuelle Seite (hier befindet man sich gerade): durchsichtig, schwarzer
   Rand von 2 Pixeln innen, Symbol schwarz. Bleibt auch bei Maus darüber so. */
#navi #menu ul.menulevel1 > li.sdoc.abgesetzt > a,
#navi #menu ul.menulevel1 > li.sdocs.abgesetzt > a,
#navi #menu ul.menulevel1 > li.sdoc.abgesetzt > span,
#navi #menu ul.menulevel1 > li.sdocs.abgesetzt > span,
#navi #menu ul.menulevel1 > li.sdoc.abgesetzt > a:hover,
#navi #menu ul.menulevel1 > li.sdocs.abgesetzt > a:hover,
#navi #menu ul.menulevel1 > li.sdoc.abgesetzt > span:hover,
#navi #menu ul.menulevel1 > li.sdocs.abgesetzt > span:hover,
#navi #menu ul.menulevel1 > li.sdoc.abgesetzt > a:focus,
#navi #menu ul.menulevel1 > li.sdocs.abgesetzt > a:focus {
    background-color: transparent !important;
    box-shadow: inset 0 0 0 2px #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E") !important;
}
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > a,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > a,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > span,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > span,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > a:hover,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > a:hover,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > span:hover,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > span:hover,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > a:focus,
#navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > a:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Crect x=%272%27 y=%275%27 width=%2720%27 height=%2714%27 rx=%272%27/%3E%3Cpath d=%27M2 7 L12 14 L22 7%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M5 3 H9 L11 8 L8.5 9.5 A12 12 0 0 0 14.5 15.5 L16 13 L21 15 V19 A2 2 0 0 1 19 21 A16 16 0 0 1 3 5 A2 2 0 0 1 5 3 Z%27/%3E%3C/svg%3E") !important;
}

/* Suche: Lupe als Feld ganz rechts, klappt nach links zu einem Eingabefeld auf */
#navi #menu #search {
    width: 2.6em;
    padding: 0;
    overflow: visible;
    transition: none;
}
#navi #menu #search::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E") center / 1.25em 1.25em no-repeat;
    pointer-events: none;
    z-index: 2;
}
#navi #menu #search form {
    position: absolute;
    top: 0;
    right: 0;
    width: 2.6em;
    height: 100%;
    overflow: hidden;
    background: #000000;
    border-radius: 6px;
}
#navi #menu #search #searchfield {
    position: absolute;
    top: 2px;
    right: 2px;
    bottom: 2px;
    width: 100%;
    height: auto;
    opacity: 0;
    cursor: pointer;
    padding: 0 2.6em 0 0.6em;                   /* rechts Platz für die Lupe */
    background: #FFFFFF;
    color: #000000;
    border-radius: 3px;
}
/* Aufgeklappt: Feld wird breit, Lupe bleibt rechts */
#navi #menu #search:focus-within form,
#navi #menu #search:hover form {
    width: 12em;
}
#navi #menu #search:focus-within,
#navi #menu #search:hover {
    z-index: 1200;
}
#navi #menu #search:focus-within #searchfield,
#navi #menu #search:hover #searchfield {
    opacity: 1;
    width: calc(100% - 4px);
    cursor: text;
}
#navi #menu #search:focus-within::before,
#navi #menu #search:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E");
}

/* Smartphone (unter 760 px): Haus, Brief/Telefon und Lupe sind nur noch
   kleine Symbole OHNE schwarze Füllung, aber mit dünnem Rahmen. Sie stehen
   ganz LINKS in einer schmalen Zeile über dem Menü (Reihenfolge von links:
   Haus, Brief/Telefon, Lupe). Die Symbole sind dunkel, damit man sie auf
   dem hellen Seitenhintergrund sieht. Kontakt ist EIN Symbol (Kopf und Schultern, wie im Adressbuch). Es gibt keine Rahmen um die Symbole.
   Die aktuelle Seite ist umgekehrt: innen schwarz gefüllt, Symbol weiß.
   Die Suche klappt nach RECHTS auf (über freie Fläche in derselben Zeile),
   es gibt keine zusätzliche Zeile und nichts wird verschoben. */
@media screen and (max-width: 759px) {
    #navi #menu {
        padding-top: calc(2em + 6px);
        transition: none;
    }
    #menu ul.menulevel1 {
        padding-right: 0;
    }

    /* Haus: ganz links */
    #menu ul.menulevel1 > li.abgesetzt,
    #menu ul.menulevel1 > li.abgesetzt:first-of-type,
    #menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
        top: 0;
        right: auto;
        left: 0;
        width: 2.4em;
    }
    /* Kontakt (Kopf und Schultern als EIN Symbol): rechts neben dem Haus */
    #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt {
        top: 0;
        right: auto;
        left: calc(2.4em + 4px);
        width: 2.4em;
    }

    /* kein Kasten: Hintergrund durchsichtig, Symbole dunkel */
    #navi #menu ul.menulevel1 > li.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt > a:focus,
    #navi #menu ul.menulevel1 > li.abgesetzt > span:hover {
        background-color: transparent !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E") !important;
        background-size: 1.4em 1.4em !important;
        box-shadow: none;
        border-radius: 6px;
    }
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > a:focus,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt > span:hover {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%278%27%20r=%274.2%27/%3E%3Cpath%20d=%27M3.8%2021%20V19.5%20A6.5%206.5%200%200%201%2010.3%2013.6%20H13.7%20A6.5%206.5%200%200%201%2020.2%2019.5%20V21%20Z%27/%3E%3C/svg%3E") !important;
        background-size: 1.4em 1.4em !important;
        background-position: center !important;
    }
    /* Antippen/Maus darüber: ganz leichter Schatten, damit man die Fläche sieht */
    #navi #menu ul.menulevel1 > li.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt > a:focus {
        background-color: rgba(0, 0, 0, 0.12) !important;
    }
    /* aktuelle Seite: umgekehrt wie die anderen - innen schwarz gefüllt, Symbol weiß.
       (Zum Zurückwechseln auf die graue Variante: unten den Block "ALTERNATIVE GRAU"
       statt dieses Blocks verwenden.) */
    #navi #menu ul.menulevel1 > li.sdoc.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.sdocs.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.sdoc.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.sdocs.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.sdoc.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.sdocs.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.sdoc.abgesetzt > span:hover,
    #navi #menu ul.menulevel1 > li.sdocs.abgesetzt > span:hover {
        background-color: #000000 !important;
        box-shadow: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E") !important;
    }
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > a,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > span,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdoc.abgesetzt > span:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > a:hover,
    #navi #menu ul.menulevel1 > li.abgesetzt ~ li.sdocs.abgesetzt > span:hover {
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27white%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Ccircle%20cx=%2712%27%20cy=%278%27%20r=%274.2%27/%3E%3Cpath%20d=%27M3.8%2021%20V19.5%20A6.5%206.5%200%200%201%2010.3%2013.6%20H13.7%20A6.5%206.5%200%200%201%2020.2%2019.5%20V21%20Z%27/%3E%3C/svg%3E") !important;
    }
    /* ALTERNATIVE GRAU (nicht aktiv): im Block oben "background-color: #000000" durch
       "background-color: #b4b4b4" ersetzen und die background-image-Zeilen entfernen.
       Dann bleiben die schwarzen Symbole und der Button ist nur grau gefüllt. */

    /* Lupe: ebenfalls mit dünnem Rahmen, rechts neben Kontakt */
    #navi #menu #search {
        top: 2px;
        right: auto;
        left: calc(2.4em + 4px + 2.4em + 4px);
        width: 2.4em;
        height: 2em;
        background: transparent;
        border-radius: 6px;
    }
    #navi #menu #search::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E");
        background-size: 1.4em 1.4em;
    }
    #navi #menu #search form {
        background: transparent;
        left: 0;
        right: auto;
        width: 2.4em;
        overflow: visible;
    }

    /* Aufgeklappt: Feld wächst von der Lupe aus nach RECHTS (gleiche Zeile) */
    #navi #menu #search:focus-within form,
    #navi #menu #search:hover form {
        width: min(12em, calc(100vw - 2.4em - 4px - 2.4em - 4px - 10px));
        height: 100%;
        background: #000000;
        overflow: hidden;
        border-radius: 6px;
    }
    #navi #menu #search:focus-within #searchfield,
    #navi #menu #search:hover #searchfield {
        left: 2px;
        right: auto;
        width: calc(100% - 4px);
        padding: 0 2.6em 0 0.6em;               /* rechts Platz für die Lupe */
    }
    /* Die Lupe bleibt links am Feld stehen und wandert nicht mit */
    #navi #menu #search:focus-within::before,
    #navi #menu #search:hover::before {
        left: auto;
        right: auto;
        width: 2.4em;
        z-index: 2;
    }
}
/* ------------- Ende: ICONS Willkommen, Kontakt, Suche ------------- */

/* =====================================================================
   Ebene 5 (z. B. Konditionierung 01 / 02): verhält sich wie Ebene 4,
   klappt beim Darüberfahren nach rechts auf. Nötig, weil das eigene
   Menü in der Template ALLE Ebenen ausgibt.
   ===================================================================== */
#menu ul.menulevel5 {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 14em;
    margin: 0;
    padding: 0 0 0 2px;
    z-index: 1003;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35);
}
#menu ul.menulevel4 li:hover > ul.menulevel5,
#menu ul.menulevel4 li:focus-within > ul.menulevel5 {
    display: block;
}
#menu ul.menulevel4 li {
    position: relative;
}
#menu ul.menulevel5 li {
    position: relative;
    width: 100%;
}
#menu ul.menulevel5 li a,
#menu ul.menulevel5 li span {
    white-space: nowrap;
}
@media screen and (max-width: 600px) {
    #menu ul.menulevel5 {
        position: static;
        box-shadow: none;
        padding-left: 14px;
    }
}

/* =====================================================================
   Menü ohne Unterstreichung (auch in Chrome, Edge, Safari).
   Vorher stand nur die alte Firefox-Schreibweise im CSS.
   ===================================================================== */
#menu a,
#menu a:link,
#menu a:visited,
#menu a:hover,
#menu a:focus,
#menu a:active,
#menu span {
    text-decoration: none !important;
}

/* =====================================================================
   Touch-Geräte (Smartphone/Tablet): Untermenü bleibt nach dem ersten
   Antippen offen (die Klasse "touch-offen" setzt ein kleines Skript am
   Ende der Template). Zweites Antippen öffnet die Seite.
   ===================================================================== */
#menu li.touch-offen > ul.menulevel2,
#menu li.touch-offen > ul.menulevel3,
#menu li.touch-offen > ul.menulevel4,
#menu li.touch-offen > ul.menulevel5 {
    display: block;
}

/* =====================================================================
   Kein Schatten mehr um die Menüleiste und hinter den Menütexten
   (der graue Schimmer hinter den Menüpunkten). Die Aufklapp-Untermenüs
   behalten ihren Schatten, damit sie sich vom Inhalt abheben.
   Zum Rückgängig machen diesen Block löschen.
   ===================================================================== */
#navi #menu {
    box-shadow: none !important;
}
#menu ul.menulevel1,
#menu ul.menulevel1 li,
#menu a,
#menu span {
    text-shadow: none !important;
}

/* =====================================================================
   Kein Schatten mehr bei ALLEN Menüebenen: Menüleiste, Suchfeld und alle
   aufklappenden Untermenüs (Ebene 2 bis 5) sowie die Menütexte.
   Ausnahme: der schwarze Rahmen um das aktive Icon (Haus/Kontakt) sitzt
   auf dem Link bzw. Span und bleibt bewusst erhalten.
   Zum Rückgängig machen diesen Block löschen.
   ===================================================================== */
#navi #menu,
#navi #menu * {
    text-shadow: none !important;
}
#navi #menu,
#navi #menu ul,
#navi #menu li {
    box-shadow: none !important;
}


/* =====================================================================
   Smartphone (unter 760 px): Haus, Kontakt und Lupe stehen wieder
   RECHTS in der Menüzeile, das Menü sitzt direkt unter dem Header.
   Reihenfolge von rechts: Lupe, Kontakt, Haus.
   Zum Rückgängig machen diesen Block löschen.
   ===================================================================== */
@media screen and (max-width: 759px) {
    #navi #menu { padding-top: 0; }
    #menu ul.menulevel1 { padding-right: calc(3 * 2.4em + 12px); }
    #menu ul.menulevel1 > li.abgesetzt,
    #menu ul.menulevel1 > li.abgesetzt:first-of-type,
    #menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
        top: 0; left: auto; right: calc(2 * (2.4em + 4px)); width: 2.4em;
    }
    #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt {
        top: 0; left: auto; right: calc(2.4em + 4px); width: 2.4em;
    }
    #navi #menu #search { top: 2px; left: auto; right: 0; }
    #navi #menu #search form { left: auto; right: 0; }
    #navi #menu #search:focus-within form,
    #navi #menu #search:hover form { width: min(12em, calc(100vw - 20px)); }
    #navi #menu #search:focus-within #searchfield,
    #navi #menu #search:hover #searchfield { left: auto; right: 2px; }
}
/* ------------- Ende: Smartphone-Icons rechts ------------- */


/* =====================================================================
   ICON-ZEILE OBEN (nur Smartphone, unter 760 px).
   Eigene Zeile #topicons vor dem Headerbild mit drei kleinen Symbolen:
   Haus (Willkommen), Person (Kontakt), Lupe (Suche). Kein Kasten.
   Aktuelle Seite: Symbol weiß auf schwarzem Grund.
   Das Menü wird NICHT verändert; nur die alten Icons darin werden auf
   dem Smartphone ausgeblendet, weil sie jetzt oben stehen.
   Auf Tablet und Desktop ist die Zeile unsichtbar, dort bleibt alles
   wie im Original.
   Zum Rückgängig machen den Block bis zum Ende-Kommentar löschen.
   ===================================================================== */
#topicons { display: none; }

@media screen and (max-width: 759px) {
    #topicons {
        display: flex;
        justify-content: flex-start;
        gap: 4px;
        padding: 2px 0 4px 0;
    }
    #topicons a.ti {
        display: block;
        width: 1.9em;
        height: 1.9em;
        box-sizing: border-box;
        border-radius: 6px;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.15em 1.15em;
        overflow: hidden;
        text-indent: -999em;
        white-space: nowrap;
        text-decoration: none;
    }
    #topicons a.ti span { display: none; }
    #topicons a.ti-haus { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E"); }
    #topicons a.ti-kontakt { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274.2%27/%3E%3Cpath d=%27M3.8 21 V19.5 A6.5 6.5 0 0 1 10.3 13.6 H13.7 A6.5 6.5 0 0 1 20.2 19.5 V21 Z%27/%3E%3C/svg%3E"); }
    #topicons a.ti-suche { background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E"); }
    #topicons a.ti:hover, #topicons a.ti:focus { background-color: rgba(0, 0, 0, 0.12); }
    #topicons a.ti-haus.ti-aktiv { background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M3 11 L12 3 L21 11%27/%3E%3Cpath d=%27M5 10 V20 H10 V14 H14 V20 H19 V10%27/%3E%3C/svg%3E"); }
    #topicons a.ti-kontakt.ti-aktiv { background-color: #000000; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2712%27 cy=%278%27 r=%274.2%27/%3E%3Cpath d=%27M3.8 21 V19.5 A6.5 6.5 0 0 1 10.3 13.6 H13.7 A6.5 6.5 0 0 1 20.2 19.5 V21 Z%27/%3E%3C/svg%3E"); }

    /* Alte Icons und altes Suchfeld im Menü auf dem Smartphone ausblenden,
       alles andere im Menü bleibt unverändert. */
    #navi #menu ul.menulevel1 > li.abgesetzt { display: none; }
    #navi #menu #search { display: none; }
    #navi #menu { padding-top: 0; }
    #menu ul.menulevel1 { padding-right: 0; padding-left: 0; }
}
/* ------------- Ende: Icon-Zeile oben ------------- */

/* Suchfeld in der Icon-Zeile oben: nur Lupe, klappt beim Antippen auf */
@media screen and (max-width: 759px) {
    #topicons form#topsearch { margin: 0; padding: 0; display: flex; align-items: center; }
    #topicons label.ti-suche {
        display: block; flex: 0 0 auto; width: 1.9em; height: 1.9em; box-sizing: border-box;
        border-radius: 6px; cursor: pointer; overflow: hidden; text-indent: -999em; white-space: nowrap;
        background-color: transparent; background-repeat: no-repeat; background-position: center;
        background-size: 1.15em 1.15em; background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E");
    }
    #topicons label.ti-suche span { display: none; }
    #topicons input#topsearchfield {
        width: 0; padding: 0; margin: 0; border: 0; opacity: 0; height: 1.9em; box-sizing: border-box;
        background: #FFFFFF; border-radius: 6px; font-size: 100%;
    }
    #topicons form#topsearch:focus-within input#topsearchfield {
        width: min(11em, calc(100vw - 9em)); opacity: 1; padding: 0 0.6em;
        border: 1px solid #000000; margin-left: 4px;
    }
}
/* ------------- Ende: Suchfeld oben ------------- */

/* Suchfeld dauerhaft sichtbar, direkt neben dem Kontakt-Symbol (Smartphone).
   Überschreibt die Aufklapp-Regeln oben. Zum Rückgängig machen den Block
   bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #topicons form#topsearch {
        flex: 1 1 auto;
        min-width: 0;
        max-width: 14em;
        position: relative;
        height: 1.9em;
        margin: 0;
        padding: 0;
        display: block;
    }
    #topicons label.ti-suche {
        position: absolute;
        left: 0; top: 0;
        width: 1.9em; height: 1.9em;
        z-index: 1;
        pointer-events: none;
    }
    #topicons input#topsearchfield,
    #topicons form#topsearch:focus-within input#topsearchfield {
        display: block;
        width: 100%;
        height: 1.9em;
        margin: 0;
        opacity: 1;
        box-sizing: border-box;
        padding: 0 0.6em 0 1.9em;
        border: 1px solid #000000;
        border-radius: 6px;
        background: #FFFFFF;
        font-size: 100%;
    }
}
/* ------------- Ende: Suchfeld dauerhaft ------------- */

/* Suchfeld schmaler (zwei Drittel) und ohne dicken blauen Fokusrahmen.
   Zum Rückgängig machen den Block bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #topicons form#topsearch {
        flex: 0 1 auto;
        width: 150px;
        max-width: calc(100vw - 9em);
    }
    #topicons input#topsearchfield,
    #topicons input#topsearchfield:hover,
    #topicons input#topsearchfield:focus,
    #topicons form#topsearch:focus-within input#topsearchfield {
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        box-shadow: none;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid #000000;
    }
}
/* ------------- Ende: Suchfeld schmaler ------------- */

/* Kontakt oben: wie am Desktop zwei Symbole nebeneinander (Brief und
   Telefon). Das Feld ist dafür breiter. Zum Rückgängig machen den Block
   bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #topicons a.ti-kontakt {
        width: 3.4em;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%272%27%20y=%275%27%20width=%2720%27%20height=%2714%27%20rx=%272%27/%3E%3Cpath%20d=%27M2%207%20L12%2014%20L22%207%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27black%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%203%20H9%20L11%208%20L8.5%209.5%20A12%2012%200%200%200%2014.5%2015.5%20L16%2013%20L21%2015%20V19%20A2%202%200%200%201%2019%2021%20A16%2016%200%200%201%203%205%20A2%202%200%200%201%205%203%20Z%27/%3E%3C/svg%3E");
        background-size: 1.1em 1.1em, 1.1em 1.1em;
        background-position: calc(50% - 0.65em) center, calc(50% + 0.65em) center;
    }
    #topicons a.ti-kontakt.ti-aktiv {
        background-color: #000000;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27white%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Crect%20x=%272%27%20y=%275%27%20width=%2720%27%20height=%2714%27%20rx=%272%27/%3E%3Cpath%20d=%27M2%207%20L12%2014%20L22%207%27/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27white%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M5%203%20H9%20L11%208%20L8.5%209.5%20A12%2012%200%200%200%2014.5%2015.5%20L16%2013%20L21%2015%20V19%20A2%202%200%200%201%2019%2021%20A16%2016%200%200%201%203%205%20A2%202%200%200%201%205%203%20Z%27/%3E%3C/svg%3E");
    }
}
/* ------------- Ende: Kontakt mit zwei Symbolen ------------- */

/* Oberer Rand auf dem Smartphone: höchstens 2 Pixel grauer Bereich über
   den Icons. Zum Rückgängig machen den Block bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #wrapper {
        margin-top: 0;
        padding-top: 0;
    }
    #topicons {
        padding-top: 2px;
    }
}
/* ------------- Ende: Rand oben ------------- */

/* Abstand zwischen Icon-Zeile und Headerbild: wie zwischen Headerbild und
   Menü (0 Pixel, das Bild schließt direkt an). Zum Rückgängig machen den
   Block bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #topicons {
        padding-bottom: 0;
        margin-bottom: 0;
    }
}
/* ------------- Ende: Abstand Icons zu Header ------------- */

/* Abstand 2 Pixel zwischen Icon-Zeile und Headerbild. Der Abstand zwischen
   Headerbild und Menü bleibt wie im Original. Nur Smartphone. Zum
   Rückgängig machen den Block bis zum Ende-Kommentar löschen. */
@media screen and (max-width: 759px) {
    #topicons {
        padding-bottom: 2px;
    }
}
/* ------------- Ende: Abstand Icons zu Header ------------- */

/* Desktop und Tablet (ab 760 px): Headerbild bis auf 2 Pixel an den oberen
   Rand. Zum Rückgängig machen den Block bis zum Ende-Kommentar löschen. */
@media screen and (min-width: 760px) {
    #wrapper {
        margin-top: 0;
        padding-top: 2px;
    }
}
/* ------------- Ende: Header oben Desktop ------------- */

/* Desktop und Tablet (ab 760 px): Suchfeld dauerhaft breit sichtbar, kein
   Aufklappen mehr. Zum Rückgängigmachen den Block bis zum Ende-Kommentar löschen. */
@media screen and (min-width: 760px) {
    #navi #menu #search {
        width: 12em;
        padding: 2px;
        background-color: #000000;
        border-radius: 6px;
    }
    #navi #menu #search form,
    #navi #menu #search:focus-within form,
    #navi #menu #search:hover form {
        position: absolute;
        top: 0;
        left: 0;
        right: auto;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: #000000;
        border-radius: 6px;
    }
    #navi #menu #search #searchfield,
    #navi #menu #search:focus-within #searchfield,
    #navi #menu #search:hover #searchfield {
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 2px;
        right: auto;
        width: calc(100% - 4px);
        height: auto;
        opacity: 1;
        cursor: text;
        padding: 0 0.6em 0 2.4em;
        background: #FFFFFF;
        color: #000000;
        border: 0;
        border-radius: 3px;
        outline: 0;
        box-shadow: none;
    }
    #navi #menu #search::before,
    #navi #menu #search:focus-within::before,
    #navi #menu #search:hover::before {
        left: 2px;
        right: auto;
        width: 2.4em;
        background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27black%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Ccircle cx=%2710%27 cy=%2710%27 r=%276.5%27/%3E%3Cpath d=%27M15 15 L21 21%27/%3E%3C/svg%3E");
        background-size: 1.25em 1.25em;
        z-index: 3;
    }
}
/* ------------- Ende: Suchfeld Desktop breit ------------- */

/* Desktop und Tablet (ab 760 px): Willkommen und Kontakt rücken links neben das
   breite Suchfeld (12 em). Zum Rückgängigmachen den Block bis zum Ende-Kommentar löschen. */
@media screen and (min-width: 760px) {
    #menu ul.menulevel1 > li.abgesetzt ~ li.abgesetzt {
        right: calc(12em + 4px);
    }
    #menu ul.menulevel1 > li.abgesetzt:has(~ li.abgesetzt) {
        right: calc(12em + 4.6em + 8px);
    }
}
/* ------------- Ende: Icons neben breitem Suchfeld ------------- */