@charset "utf-8";

/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(/fonts/OpenSans-Italic-400-latin-ext) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(/fonts/OpenSans-Italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/OpenSans-Regular-400-latin-ext) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(/fonts/OpenSans-Regular-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/fonts/OpenSans-SemiBold-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(/fonts/OpenSans-SemiBold-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOXOhpOqc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* latin */
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Oswald-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 300;
  src: url(/fonts/Oswald-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Oswald-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Oswald-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@-webkit-keyframes menu-animation{
0% {-webkit-transform:scale3d(0.0, 0.0, 0.0); transform:scale3d(0.0, 0.0, 0.0); opacity:0; }
100% {-webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1); opacity:1;}
}
@-webkit-keyframes slide-animation {
0% {-webkit-transform:scale3d(1, 1, 1); transform:scale3d(1, 1, 1);}
90% {-webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1);}
100% {-webkit-transform:scale3d(1.1, 1.1, 1.1); transform:scale3d(1.1, 1.1, 1.1);}
}
@-webkit-keyframes slide-circle-1421px {
0% {left:-280px; opacity:0;}
100% {left:14%; opacity:1; }
}
@-webkit-keyframes slide-circle-normal {
0% {left:-220px; opacity:0; }
100% {left:10%; opacity:1;}
}
@-webkit-keyframes slide-circle-1040px {
0% {left:-180px; opacity:0;}
100% {left:5%; opacity:1; }
}
@-webkit-keyframes slide-circle-600px {
0% {left:5px; opacity:0; width:50px; height:50px;}
100% {left:5px; opacity:1; width:150px; height:150px;}
}
@-webkit-keyframes slide-circle-360px {
0% {left:5px; opacity:0; width:20px; height:20px;}
100% {left:5px; opacity:1; width:130px; height:130px;}
}

@media all {
.full-width {width:100%;}
#skip-to-content {display:none;}	
	
* {margin:0; padding:0; border:0; box-sizing:border-box;}
img {border:0; width:100%; height:auto;}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video, main 
{font:inherit; vertical-align:baseline;}
/* HTML5 display-role reset for older browsers */
article, address, aside, details, main, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse:collapse; border-spacing: 0;}

html, body {width:100%; height:100%; hyphens:auto;}

body {background:#fff; font: normal 1.05em/1.6em 'Open Sans', sans-serif, Calibri, Arial, Verdana, Helvetic; font-weight:400; color:#000;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Allgemein ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ Schrift Oswald ~~~ */
h1, h2, h3, #menu ul li a, #menu ul li a:link, #menu ul li.akt a, #menu ul li.akt a:link, .box h2, .box h2 a, .box h2 a:link, #footer-menu li a, #footer-menu li a:link, .fancybox-caption, .bannerbild h2, #back-link a:link, .paginator li a {font-family: 'Oswald', Arial Narrow, Arial, Verdana, sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.03em;}


/* ~~~ Ausnahmen für Schrift Open Sans ~~~ */
#menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {font-family:'Open Sans'; }

h1 {font-size:220%; line-height:130%; margin:20px 0 10px 0; text-transform:none;}
h2, h3 {font-size:140%; line-height:120%; margin:7px 0 15px 0;}
h1, h2, h3 {text-align:center; color:#4a822d;}
h3 {font-size:120%; color:#000;}

p {margin-bottom:7px;}

strong, b {font-weight:600;}
em {font-style:italic;}

.blocksatz {text-align:justify;}
.zentriert {text-align:center; }
sup {vertical-align: 20%; font-size:80%}

/* ~~~ "Schriftfarbe DUNKELGRÜN" ~~~*/
a, a:link, a:visited, #footer-main-menu li a, .alsDetail ul.linkliste li::before {color:#628e23;}

/* ~~~ "Links" ~~~*/
a, a:link, a:visited {text-decoration:none;}
a:hover, a:focus, a:active {color:#000; text-decoration:underline; }

/* ~~~ Zusammengefasste allgemeine Definitionen   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ FLEX-Boxen  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~ row nowrap ~~~ */
#header-oben, #menu-cont, #menu ul, #menu-smart #but-cont, #icon-wrapper, .bannerbild li .message-circle, #footer-social-buttons, #pfeil-top, .flex-control-nav {display:-webkit-flex; display:flex; -webkit-flex-flow:row nowrap; flex-flow:row nowrap;}
/* ~~~ row wrap ~~~ */
.listen-cont, .listen-cont.logos, .icons-zielarten, .galerie-cont, #footer-menu ul, #footer-menu a, #footer-menu a:link, #footer-logo-wrapper, .paginator ul, .box.alsListe.ohneBild {display:-webkit-flex; display:flex; -webkit-flex-flow:row wrap; flex-flow:row wrap; }
/* ~~~ column ~~~ */
header {display:-webkit-flex; display:flex; -webkit-flex-flow:column; flex-flow:column; }
/* ~~~ justify-content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ flex-start ~~~ */
.xxxx {-webkit-justify-content:flex-start; justify-content:flex-start; }
/* ~~~ flex-end ~~~ */
#pfeil-nach-oben, #icon-wrapper {-webkit-justify-content:flex-end; justify-content:flex-end; }
/* ~~~ center ~~~ */
header, #header-oben, #menu-cont, #menu-smart #but-cont, #footer-menu ul, #menu ul, .bannerbild li .message-circle, .listen-cont.logos, .icons-zielarten, #footer-unten, #pfeil-top, #footer-social-buttons, #footer-logo-wrapper, #pfeil-top, .galerie-cont, .flex-control-nav, .paginator ul, .box.alsListe.ohneBild {-webkit-justify-content:center; justify-content:center;}
/* ~~~ space-between ~~~ */
.listen-cont {-webkit-justify-content:space-between; justify-content:space-between; }
/* ~~~ space-evenly ~~~ */
.xxxx {-webkit-justify-content:space-evenly; justify-content:space-evenly; }
/* ~~~ align-items  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~ flex-start ~~~ */
.xxx {-webkit-align-items:flex-start; align-items:flex-start; }
/* ~~~ flex-end ~~~ */
.xxx {-webkit-align-items:flex-end; align-items:flex-end; }
/* ~~~ flex-center ~~~ */
#menu-cont, #menu-smart #but-cont, #icon-wrapper, .bannerbild li .message-circle, #footer-social-buttons, #footer-logo-wrapper, #pfeil-top, .flex-control-nav, .paginator ul, .box.alsListe.ohneBild, .listen-cont.logos {-webkit-align-items:center; align-items:center; }
/* ~~~ strech ~~~ */
.xxx {-webkit-align-items:stretch; align-items:stretch; }

/* ~~~ Breite + Position + Eigenschaften ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~ Breite max 1240px ~~~*/
#footer-social-wrapper, #footer-logo-wrapper {max-width:1240px; margin:0 auto;}
/* ~~~ Breite 100% ~~~*/
header, #header-oben, #menu-cont, main, #menu ul li, footer, #footer-illu, #footer-menu, #menu, #menu ul, #menu ul li ul, #menu ul li ul li, .beitrag .bild.ganze-breite, hr, .form-field table, .flex-control-nav, .buorg, footer, #footer-unten, #footer-social-header, #footer-logo-header, #pfeil-top, .paginator {width:100%;} 
/* ~~~ Position "relative" ~~~*/
header, #header-mitte, #menu-smart #but-cont, #icon-wrapper, #search-toggle, .sprachwahl, #menu-cont, #content, #menu ul li, #menu ul li ul, #content-wrapper, .bannerbild, .box, .beitrag, .beitrag .bild, .beitrag .bild figure, .alsListe, .alsListe-klassisch, .alsListe-klassisch figure, .quickbut, footer, .paginator, .paginator li a, .paginator li a:link {position:relative;}
/* ~~~ Position "absolute" ~~~*/
#logo, #logo a, #logo a:link, .logo-eu, .logo-eu a, .logo-eu a:link, #search-toggle a, #search-toggle a:link, #search-field, .sprachwahl a, .sprachwahl a:link, #menu-smart,#menu-smart .but, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, #menu, p.mehrlink a, p.mehrlink a:link, .box.uebersicht.icon-zielflaeche p.mehrlink a:link::after, .bannerbild li figcaption, .social-button a, .social-button a:link {position:absolute;}
/* ~~~ "overflow:hidden" ~~~*/
#logo, .logo-eu, main, #content-wrapper, .bannerbild, .bannerbild li, .bannerbild li .message-circle, .alsDetail, .bodydiv, .alsListe, .box, .box figure, .alsListe figure, .alsListe-klassisch, .alsListe-klassisch figure, #close-wrapper, .footer-logo {overflow:hidden;}
/* ~~~ "display:block" ~~~*/
#menu ul li a, #menu ul li a:link, #menu ul li.akt ul, #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, #menu-smart, #menu-smart .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3, p.mehrlink a, p.mehrlink a:link, #warenkorb a, #warenkorb a:link, .sprachwahl a, .sprachwahl a:link, p.mehrlink a, p.mehrlink a:link, .bannerbild li p.morelink a, .bannerbild li p.morelink a:link, .paginator li a, .paginator li a:link {display:block;}
/* ~~~ "text-decoration:none" ~~~*/
#menu ul li a, #menu ul li a:link {text-decoration:none;}
/* ~~~ "text-transform:none" ~~~*/
#menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, .paginator li a:hover, .paginator li a:focus, .paginator li.akt a, .paginator li.pas a, .paginator li.pas a:hover, .paginator li.pas a:focus {text-transform:none;}
/* ~~~ "transition:all 0.5s ease" ~~~*/
#logo figure a, #logo figure a:link, #logo figure a:focus, #logo figure a:hover, .logo-eu figure a, .logo-eu figure a:link, .logo-eu figure a:hover, .logo-eu figure a:focus, #menu-smart #but-cont a, #menu-smart #but-cont a:link, #menu-smart #but-cont a:hover, #menu-smart #but-cont a:focus, .sprachwahl a, .sprachwahl a:link, .sprachwahl.akt, .sprachwahl a:hover, .sprachwahl a:focus, .sprachwahl.de a, .sprachwahl.de a:link, .sprachwahl.de a:focus, .sprachwahl.de a:hover, .sprachwahl.de.akt a, .sprachwahl.de.akt a:link, .sprachwahl.de.akt a:hover, .sprachwahl.de.akt a:focus, .sprachwahl.sk a, .sprachwahl.sk a:link, .sprachwahl.sk a:focus, .sprachwahl.sk a:hover, .sprachwahl.sk.akt a, .sprachwahl.sk.akt a:link, .sprachwahl.sk.akt a:hover, .sprachwahl.sk.akt a:focus, .sprachwahl.en a, .sprachwahl.en a:link, .sprachwahl.en a:focus, .sprachwahl.en a:hover, .sprachwahl.en.akt a, .sprachwahl.en.akt a:link, .sprachwahl.en.akt a:hover, .sprachwahl.en.akt a:focus, p.mehrlink a, p.mehrlink a:link, p.mehrlink a:hover, p.mehrlink a:focus, .bannerbild li .message-circle, .bannerbild li .morelink a, .bannerbild li .morelink a:link, .box, .box:hover, .box:hover.hellgruen, .box:hover.dunkelgruen, .box:hover.start, .box.start figure, .box.uebersicht.icon-zielflaeche p.mehrlink a:link::after, .box.uebersicht.icon-zielflaeche p.mehrlink a:hover::after, .box.uebersicht.icon-zielflaeche p.mehrlink a:focus::after, .icon-zielart figure a, .icon-zielart figure a:link, .icon-zielart figure a:hover, .icon-zielart figure a:focus, .icon-zielart .symbol a, .icon-zielart .symbol a:link, .icon-zielart .symbol a:hover, .icon-zielart .symbol a:focus, #close-wrapper a, #close-wrapper a:link, #close-wrapper a:hover, #close-wrapper a:focus, #footer-menu li a, #footer-menu li a:link, #footer-menu li a:visited, #footer-menu li a:active, #footer-menu li a:focus, #footer-menu li a:hover, #footer-menu li.akt a, .social-button.fb a, .social-button.fb a:link, .social-button.fb a:focus, .social-button.fb a:hover, .social-button.tw a, .social-button.tw a:link, .social-button.tw a:focus, .social-button.tw a:hover, .social-button.yt a, .social-button.yt a:link, .social-button.yt a:focus, .social-button.yt a:hover, #pfeil-nach-oben a, #pfeil-nach-oben a:link, #pfeil-nach-oben a:hover, #pfeil-nach-oben a:focus, #back-link a, #back-link a:link, #back-link a:hover, #back-link a:focus, .paginator li a, .paginator li a:link, .paginator li a:hover, .paginator li a:focus {transition:all 0.5s ease;}
/* ~~~ "transition:all 0.3s ease" ~~~*/
#search-toggle a, #search-toggle a:link, #search-toggle a:focus, #search-toggle a:hover, #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, #menu ul li ul li a:hover, #menu ul li.akt ul li a:hover, #menu ul li ul li a:focus, #menu ul li.akt ul li a:focus, #menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link, .bannerbild li .message-circle:hover, .bannerbild li .message-circle h2, .bannerbild li .morelink a:hover, .bannerbild li p.morelink a:focus, .figure-copyright, #pfeil-top a, #pfeil-top a:link, #pfeil-top a:focus, #pfeil-top a:hover, .flex-control-paging li a:link, .flex-control-paging li a:hover,.faq-aufklapp a, .faq-aufklapp a:link, .faq-aufklapp a:hover, .faq-aufklapp a:focus {transition:all 0.3s ease;}

/* ~~~ "white-space:nowrap" ~~~*/
.umbruch, #menu ul li a, #menu ul li a:link {white-space:nowrap;}
/* ~~~ "cursor:pointer" ~~~*/
.searchbut, #menu ul li a:hover, #menu ul li a:focus, #menu ul li.akt a, #mobilp-menu ul li.akt a:hover, #menu ul li.akt a:focus, #menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link, p.mehrlink a, p.mehrlink a:link, #pfeil-top a:focus, #pfeil-top a:hover, .paginator li a, .paginator li a:link {cursor:pointer;}
/* ~~~ "border-radius:50%" ~~~*/
#logo, .logo-eu, body.service #logo, body.facts #logo, #menu-smart #but-cont a, #menu-smart #but-cont a:link, #search-toggle, .sprachwahl a, .sprachwahl a:link, .sprachwahl.akt, #search-toggle a, #search-toggle a:link, sprachwahl a, sprachwahl a:link, .bannerbild li .message-circle, .box figure, .box.uebersicht.icon-zielflaeche p.mehrlink a:link::after, .icon-zielart figure, #popupwindow-innen .icon-zielart, #close-wrapper, .social-button.fb a, .social-button.fb a:link, .social-button.fb a:focus, .social-button.fb a:hover, .social-button.tw a, .social-button.tw a:link, .social-button.tw a:focus, .social-button.tw a:hover, .social-button.yt a, .social-button.yt a:link, .social-button.yt a:focus, .social-button.yt a:hover, #pfeil-top a, #pfeil-top a:link {border-radius:50%;}
/* ~~~ "40px x 40px" ~~~*/
#search-toggle, .sprachwahl, #search-toggle a, #search-toggle a:link, sprachwahl a, sprachwahl a:link, #search-toggle a, #search-toggle a:link, .sprachwahl a, .sprachwahl a:link, .sprachwahl.akt, .sprachwahl a:hover, .sprachwahl a:focus, .social-button, .social-button a, .social-button a:link {width:40px; height:40px;}
/* ~~~ hover-Effekt ZOOMEN ~~~~~~*/	
.box figure img, .alsListe figure img, .footer-logo figure a img, .footer-logo figure a:link img {transition:transform 2s cubic-bezier(.19, 1, .22, 1)0ms; }
.box:hover figure img, .box:focus figure img {-webkit-transform:scale(1.075, 1.075) rotate(5deg); transform:scale(1.075, 1.075) rotate(5deg);}
.alsListe:hover figure img, .alsListe:focus figure img, .footer-logo figure a:hover img, .footer-logo figure a:focus img {-webkit-transform:scale(1.075, 1.075); transform:scale(1.075, 1.075);}
.box:hover figure img.notransform {transform:none;}
/* ~~~ hover-Effekt 0 Grad DREHEN ~~~~~~*/
.icon-zielart figure a, .icon-zielart figure a:link, .icon-zielart .symbol a, .icon-zielart .symbol a:link {-webkit-transform:rotate(0deg); transform:rotate(0deg);}
/* ~~~ hover-Effekt 15 Grad DREHEN ~~~~~~*/
#logo figure a:focus, #logo figure a:hover, .logo-eu figure a:hover, .logo-eu figure a:focus, .social-button a:focus, .social-button a:hover, .sprachwahl a:hover, .sprachwahl a:focus, #search-toggle a:focus, #search-toggle a:hover, .icon-zielart figure a:hover, .icon-zielart figure a:focus, .icon-zielart .symbol a:hover, .icon-zielart .symbol a:focus {-webkit-transform:rotate(15deg); transform:rotate(15deg);}
.sprachwahl.akt a, .sprachwahl.akt a:link, .sprachwahl.akt:hover, .sprachwahl.akt:focus {-webkit-transform:none; transform:none;}

/* ~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
header {z-index:400; padding:0; margin:0; background:#fff; }

#header-oben, #header-mitte {margin:0 auto; width:1240px; height:100px; }
#header-oben {display:none;}
#header-oben figure {width:370px; margin-top:10px;}
body.home #header-oben {display:flex;}

/* ~~~ Logo ~~~~~~~~~~~~~~~~~ */
#logo, body.service #logo, body.facts #logo {left:0; top:10px; width:125px; height:125px; z-index:1600; box-shadow:0px 7px 7px rgba(0,0,0,0.4); }
	#logo figure a, #logo figure a:link {width:100%; height:100%; z-index:1000; background:#a2c748 url(../images/logo-city-nature.svg) 0 0 no-repeat; background-size:contain; }
	#logo figure a:focus, #logo figure a:hover {background:#fae03d url(../images/logo-city-nature.svg) 0 0 no-repeat; background-size:contain;}
	/* ~~~ Logo Servicebereich~~~~~~~~~~~~~~~~~ */
	body.service #logo figure a, body.service #logo figure a:link {background:#a2c748 url(../images/logo-city-nature-service.svg) 0 0 no-repeat; background-size:contain; }
	body.service #logo figure a:focus, body.service #logo figure a:hover {background:#fae03d url(../images/logo-city-nature-service.svg) 0 0 no-repeat; background-size:contain;}
	/* ~~~ Logo Facts-bereich~~~~~~~~~~~~~~~~~ */
	body.facts #logo figure a, body.facts #logo figure a:link {background:#a2c748 url(../images/logo-city-nature-facts.svg) 0 0 no-repeat; background-size:contain; }
	body.facts #logo figure a:focus, body.facts #logo figure a:hover {background:#fae03d url(../images/logo-city-nature-facts.svg) 0 0 no-repeat; background-size:contain;}
		
/* ~~~ Lupe + Warenkorb ~~~ */
#icon-wrapper {top:0; right:0; width:auto; height:100px; z-index:50; }
	#search-toggle, .sprachwahl {margin-right:5px;}
		
		/* ~~~ Button-Suche-Einblender~~~ */	
	#search-toggle a, #search-toggle a:link {background:#a2c748 url(../images/icon-lupe.svg) center center no-repeat; background-size:30px 30px; }
	#search-toggle a:focus, #search-toggle a:hover {background:#fae03d url(../images/icon-lupe.svg) center center no-repeat; background-size:35px 35px;}
	.searchbut {width:40px; height:40px; vertical-align:middle;}
	/* ~~~ eingeblendetes Suchefeld~~~ */
	#search-field {display:none; right:7%; top:90px; z-index:50; width:320px; height:auto; padding:30px 10px 30px 30px; background:rgba(250,224,61,0.90); border-radius:10px;}
		#suchediv {width:320px;}
		#suchstr, #volltextsuche {display:inline-block; width:200px; height:35px; color:#000; font-size:90%; padding:0 5px; vertical-align:middle; border:1px solid #bbb; }
		#gobutton, #suchbutton {width:40px; margin-left:10px; padding:0; border:none; box-shadow:none; vertical-align:top; background:none;}
		#suchbutton {margin-top:10px;}	
		#volltextsuche {margin:10px 0 0 7px; font-size:100%;}
	
/* ~~~ Buttons-Spracheauswahl~~~ */	
	.sprachwahl a, .sprachwahl a:link {background:#a2c748; border:1px solid #a2c748;}
	.sprachwahl a:hover, .sprachwahl a:focus {background:#fae03d;}
	.sprachwahl.akt a, .sprachwahl.akt a:link {background:#fff;}
	.sprachwahl.de a, .sprachwahl.de a:link {background:#a2c748 url(../images/icon-sprachwahl-de.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.de a:hover, .sprachwahl.de a:focus {background:#fae03d url(../images/icon-sprachwahl-de.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.de.akt a, .sprachwahl.de.akt a:link, .sprachwahl.de.akt a:hover, .sprachwahl.de.akt a:focus {background:#fff url(../images/icon-sprachwahl-de.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.sk a, .sprachwahl.sk a:link {background:#a2c748 url(../images/icon-sprachwahl-sk.svg) 0 0 no-repeat; background-size:40px 40px; }
	.sprachwahl.sk a:hover, .sprachwahl.sk a:focus {background:#fae03d url(../images/icon-sprachwahl-sk.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.sk.akt a, .sprachwahl.sk.akt a:link, .sprachwahl.sk.akt a:hover, .sprachwahl.sk.akt a:focus {background:#fff url(../images/icon-sprachwahl-sk.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.en a, .sprachwahl.en a:link {background:#a2c748 url(../images/icon-sprachwahl-en.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.en a:hover, .sprachwahl.en a:focus {background:#fae03d url(../images/icon-sprachwahl-en.svg) 0 0 no-repeat; background-size:40px 40px;}
	.sprachwahl.en.akt a, .sprachwahl.en.akt a:link, .sprachwahl.en.akt a:hover, .sprachwahl.en.akt a:focus {background:#fff url(../images/icon-sprachwahl-en.svg) 0 0 no-repeat; background-size:40px 40px;}

/* ~~~~~~~~~~~~ MENU ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ Menu Container ~~~~~~ */
#menu-cont {height:auto; margin:0 auto; }
/* ~~~ Hamburger ~~~ */
#menu-smart {z-index:1600; width:auto; top:20px; right:50%; margin-right:-30px;} 
body.home #menu-smart {top:120px;}
#menu-smart #but-cont a, #menu-smart #but-cont a:link {z-index:49000; width:60px; height:60px; background:#a2c748; display:block; }
#menu-smart #but-cont a:hover, #menu-smart #but-cont a:focus {background:#fae03d;}
#menu-smart #but-cont a:visit {background:#a2c748;}

#menu-smart #but-cont a:link .but {position:absolute; width:50px; height:50px; margin:3px 0 0 0px; cursor:pointer; left:5px; bottom:12px;}
#menu-smart #but-cont a:link .but span.menu1, #menu-smart .but span.menu2, #menu-smart .but span.menu3 {z-index:50000; width:40px; height:3px; left:5px; background:#254d35; transition:all 0.30s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart #but-cont a:link .but span.menu1 {top: 23px;}
#menu-smart #but-cont a:link .but span.menu2 {top: 31px;}
#menu-smart #but-cont a:link .but span.menu3 {top: 39px;}
#menu-smart #but-cont a:link .but.move span.menu1 { top:31px; -webkit-transform: rotate(45deg); transform: rotate(45deg); transition:all 0.50s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart #but-cont a:link .but.move span.menu2 {-webkit-transform: rotate(-45deg); transform: rotate(-45deg); transition:all 0.50s cubic-bezier(0.75, 0.25, 0.10, 0.95); }
#menu-smart #but-cont a:link .but.move span.menu3 { opacity:0; transition:opacity 0.20s cubic-bezier(0.75, 0.25, 0.10, 0.95); }		
#menu-smart #but-cont a:hover .but span.menu1, #menu-smart #but-cont a:focus .but span.menu1 {top: 20px;}
#menu-smart #but-cont a:hover .but span.menu2, #menu-smart #but-cont a:focus .but span.menu2 {top: 31px;}
#menu-smart #but-cont a:hover .but span.menu3, #menu-smart #but-cont a:focus .but span.menu3 {top: 42px;}

/* ~~~ Menu Container ~~~ */
#menu {display:none; position:absolute; top:0; left:0; z-index:1500; background:#fff; box-shadow:0px 15px 15px rgba(0,0,0,0.2); padding:150px 0 40px 0;}
/* ~~~ Startseite mit Interreg Logo ~~~ */
body.home #menu {padding:240px 0 40px 0;}
/* ~~~ für den schrägen Footer ~~~ */
#menu-wrapper {position:relative; z-index:600; width:100%; height:auto; background:#fff; padding:0 1%;}
#menu-footer {position:absolute; left:0; bottom:-2px; display:table; width:100%; height:30px; background:url(../images/footer-menu.svg) bottom center no-repeat; background-size:cover;}

/* ~~~ Menu 1. Ebene ~~~ */
#menu ul {padding:0 1% 10px 0%; animation:menu-animation 0.9s 1;}
#menu ul li {width:21%; margin:0 2%; }
#menu ul li a, #menu ul li a:link {padding:0.6em 10px 25px 0px; background:none; text-align:left; font-size:150%; font-weight:400; color:#000; }
#menu ul li a:hover, #menu ul li.akt a, #menu ul li a:focus, #menu ul li.akt a:link, #menu ul li.akt a:hover, #menu ul li.akt a:focus {color:#628e23; text-decoration:none; }
	
	/* ~~~ Menu 1. Ebene: Pfeile ~~~ */
	#menu ul li a.menu-but::after {background:transparent url("../images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }	
	#menu ul li a.menu-pfeil::after {background:transparent url("../images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
	#menu ul li.akt a.menu-but::after {background:transparent url("../images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }	
	#menu ul li.akt a.menu-pfeil::after {background:transparent url("../images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
	/* ~~~ Menu 1. + 2. Ebene: Pfeile ~~~ */
	#menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {content:""; position:relative; display:inline-block; width:15px; height:15px; margin-left:7px; margin-bottom:0px;}
	#menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {content:""; position:relative; display:inline-block; width:15px; height:15px; margin-left:7px; margin-bottom:0px;}

/* ~~~ Menu 2. Ebene ~~~ */
#menu ul li ul {display:block; top:0; left:0; animation:none;}
#menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {padding:0 0 7px 0; white-space:pre-wrap; color:#000; font-weight:300; font-size:100%; line-height:1.3em; letter-spacing:0; text-decoration:none; }
#menu ul li ul li a:hover, #menu ul li.akt ul li a:hover, #menu ul li ul li a:focus, #menu ul li.akt ul li a:focus, #menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {color:#628e23; text-decoration:none; padding:0 0 7px 10px; font-weight:400;}
#menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {color:#2f6443; padding:0 0 7px 0; margin-left:10px; font-weight:600;}
	
	/* ~~~ Menu 2. Ebene: Pfeile ~~~ */
	#menu ul li ul li a.menu-but-sub::after {background:transparent url("../images/pfeil-menu-zu-sub.svg") 0 0 no-repeat; background-size:contain; }
	#menu ul li ul li a.menu-pfeil-sub::after {background:transparent url("../images/pfeil-menu-auf-sub.svg") 0 0 no-repeat; background-size:contain; }
	
/* ~~~ Menu 3. Ebene ~~~ */
#menu ul li ul li ul, #menu ul li.akt ul li ul {display:block; }
#menu ul li.akt ul li.akt ul {display:block; }
#menu ul li ul li ul li a, #menu ul li ul li ul li a:link, #menu ul li.akt ul li.akt ul li a, #menu ul li.akt ul li.akt ul li a:link {font-weight:normal; padding:0.3em 0em 0.3em 25px; font-size:95%;}
#menu ul li.akt ul li.akt ul li a::before {content:"";}
#menu ul li ul li ul li a:hover, #menu ul li.akt ul li.akt ul li a:hover, #menu ul li.akt ul li.akt ul li a:focus, #menu ul li.akt ul li.akt ul li.akt a,#menu ul li.akt ul li.akt ul li.akt a:link {color:#ec691f; }
#menu ul li.akt ul li.akt ul li.akt a::before {color:#ec691f; content: "> ";}

/* ~~~ Animation des Pfeiles 
.pfeildown {-webkit-transition:-webkit-transform .03s ease-out; transition:transform .0s ease; -webkit-transform:rotate(0); transform:rotate(0);}
.pfeilup {-webkit-transition:-webkit-transform .03s ease-out; transition:transform .0s ease; -webkit-transform:rotate(-180deg); transform:rotate(-180deg);} ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~ Bereich "main" >  Beiträge  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
main {z-index:50;}

/* ~~~ "conten-wrapper" = Rahmen für "content"  + "Container für Beiträge" > Definition siehe oben Zeile 71 + 73 ~~~~~~~~~~~~~~~~~~~~*/
#content-wrapper {width:96%; margin:0 auto;}
#content {max-width:2000px; margin:0 auto;} 

/* ~~~ Bannerbild - Sider ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.bannerbild {margin:0 auto; max-width:2000px; border-radius:40px 40px 0 40px; }
/* ~~~ Bannerbild - mit Icon der Zielflächen ~~~~~~~~~~~~~~~*/
.bannerbild.icon-zielflaeche {display:none;}
.bannerbild.icon-zielflaeche::after {content:""; width:300px; height:300px; position:absolute; left:50%; margin-left:-125px; bottom:-55px; z-index:200;}
.bannerbild.icon-zielflaeche.balkon::after {background:transparent url("../images/icon-ziel-balkon.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.balkon::after {background:transparent url("../images/icon-ziel-balkon.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.hausgarten::after {background:transparent url("../images/icon-ziel-hausgarten.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.gemeinschaftsgarten::after {background:transparent url("../images/icon-ziel-gemeinschaftsgarten.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.betrieb::after {background:transparent url("../images/icon-ziel-betrieb.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.fassade::after {background:transparent url("../images/icon-ziel-fassade.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.dach::after {background:transparent url("../images/icon-ziel-dach.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.oeffentlich::after {background:transparent url("../images/icon-ziel-oeffentlich.svg") 0 0 no-repeat; background-size:contain;}
.bannerbild.icon-zielflaeche.kindergarten::after {background:transparent url("../images/icon-ziel-kindergarten.svg") 0 0 no-repeat; background-size:contain;}

.bannerbild li .message-circle {width:220px; height:220px; position:absolute; left:13%; bottom:5%; padding:1.3%; background:rgba(250,224,61,0.8); border:3px solid #fff; box-shadow:0 5px 10px 5px rgba(0,0,0,0.6); -webkit-transform:rotate(-15deg); transform:rotate(-15deg); animation:slide-circle-normal 0.5s 1;}
.bannerbild li .message-circle h2 {text-align:center; font-size:130%; font-weight:400; color:#254d35;}
.bannerbild li .message-circle:hover h2 {color:#254d35;}
.bannerbild li .message-circle:hover {transition: all 0.3s ease-out; -webkit-transform: rotate(0deg); transform: rotate(0deg); background:rgba(162,199,72,1); }

.bannerbild.slider-bild-animation .slides img {animation:slide-animation 18s 1;}

/* ~~~ BODYKLASSEN für Slider ~~~~~~~~~~~~~~~*/
body.service .bannerbild li .message-circle {animation:none; border:none;}
body.service .bannerbild li .message-circle h2, body.service .bannerbild li .message-circle:hover h2 {color:#fff;}
body.service .bannerbild li .message-circle, body.service .bannerbild li .message-circle:hover {transition:none; -webkit-transform:rotate(-15deg); transform:rotate(-15deg); background:rgba(162,199,72,0.9); cursor:auto;}
body.service .bannerbild.icon-zielflaeche {display:block;}

/* ~~~ Beitrag Standard allgemein~~~*/
.beitrag {max-width:1240px; margin:0 auto; }
.beitrag li {margin:0 0 7px 0; }
.beitrag li {line-height:120%; }
/* ~~~ Bilder ~~~*/
.beitrag figure {width:100%; margin:0; }
.beitrag figure img {border-radius:15px; overflow:hidden;}
.beitrag figure a::before {content:"";}
.beitrag figure.halbe-breite {width:48%;}
.beitrag figure.halbe-breite.links {float:left; margin-right:15px;}
.beitrag figure.hochformat {width:30%;}
.beitrag figure.halbe-breite.rechts {float:right; margin-left:15px;}

/* ~~~ Container für Message-Circle, Boxen, Galerie etc. ~~~~~~~~~~~~~*/
.listen-cont, .listen-cont.logos {max-width:1240px; margin:25px auto; }
body.service .listen-cont {-webkit-justify-content:center; justify-content:center; padding-top:15px;}

.listen-cont.logos .einleitung {min-width:300px; margin:25px 0;}
.listen-cont.logos .muss-logo {width:300px; padding:1%;}

/* ~~~ mehrlink~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
p.mehrlink a, p.mehrlink a:link {width:200%; height:100%; min-height:300px; top:0; left:-100%; z-index:200; text-align:left; line-height:0; text-decoration:none; font-size:10%; margin:0;}
p.mehrlink a:hover, p.mehrlink a:focus {text-decoration:none;} 

.bannerbild li p.mehrlink a, .bannerbild li p.mehrlink a:link {width:100%; left:0; padding-top:90%; z-index:1500; text-align:center; font-size:100%; font-weight:normal; color:#254d35;}
.bannerbild li p.mehrlink a:link::after {content:" >"; font-weight:normal;}
.bannerbild li p.mehrlink a:hover, .bannerbild li p.mehrlink a:hover::after {color:#000; font-weight:600; }
.bannerbild li p.mehrlink a:focus, .bannerbild li p.mehrlink a:focus::after {color:#000; font-weight:600; font-size:150%;}

/* ~~~~~~~~~~~~~~~~ BOXEN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* ~~~ Boxen Allgemein + Farben ~~~~~~~~~~~~~~~*/	
.box {min-height:200px; text-align:center; border-radius:15px; padding:10px; margin-bottom:20px; color:#254d35;}
	.box.ein-drittel-breite, .box.alsListe {width:31.5%;}
	.box.zwei-drittel-breite {width:65.75%;}
	.box.halbe-breite {width:48.75%;}
	.box.hellgruen {background:#a2c748;}
	.box.dunkelgruen {background:#355c3f; color:#fff;}
	
	/* ~~~ Boxen Übersicht-Zielflächen ICONS  ~~~~~~~~~~~~~~~*/
	.box.uebersicht {width:270px; background:#fff; margin:0 10px 10px 0; padding:0; }
	.box.uebersicht.icon-zielflaeche p.mehrlink a:link::after {opacity:0; content:""; left:54.5%; top:18px; z-index:200; width:222px; height:222px;}
	.box.uebersicht.icon-zielflaeche h2, .box.uebersicht.icon-zielflaeche h2 a, .box.uebersicht.icon-zielflaeche h2 a:link {text-transform:uppercase;}
	.box.uebersicht.icon-zielflaeche p.mehrlink a:hover::after, .box.uebersicht.icon-zielflaeche p.mehrlink a:focus::after {opacity:1;}
	.box.uebersicht.icon-zielflaeche.balkon p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-balkon.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.hausgarten p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-hausgarten.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.gemeinschaftsgarten p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-gemeinschaftsgarten.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.betrieb p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-betrieb.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.fassade p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-fassade.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.dach p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-dach.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.oeffentlich p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-oeffentlich.svg") 0 0 no-repeat; background-size:contain;}
	.box.uebersicht.icon-zielflaeche.kindergarten p.mehrlink a:link::after {background:rgba(162,199,72,0.6) url("../images/icon-ziel-kindergarten.svg") 0 0 no-repeat; background-size:contain;}
	
	/* ~~~ Boxen Sartseite weiße Variante  ~~~~~~~~~~~~~~~*/
	.box.start {background:#fff; border:1px solid #a2c748;}
	
	/* ~~~ Boxen hover aller Varianten  ~~~~~~~~~~~~~~~*/
	.box:hover, .box:hover.hellgruen, .box:hover.dunkelgruen {background:#fff; border:1px solid #a2c748;}
	.box:hover.video.dunkelgruen {background:#355c3f; border:none;}
	.box:hover.video.hellgruen, .box:hover.uebersicht, .box:hover.start {background:#a2c748; border:none;}
	.box:hover.video.start {background:#fff; border:1px solid #a2c748;}
	
/* ~~~ Boxen Bilder/Fotos/Icons  ~~~~~~~~~~~~~~~*/
.box figure, .box.uebersicht figure {width:96%; margin:0 auto; line-height:0;}
.box.uebersicht figure, .box.start figure {border:10px solid #a2c748;}
.box:hover.start figure, .box.video figure {border:none;}
.box.zwei-drittel-breite figure {width:44.75%;}	
.box.halbe-breite figure {width:60.75%;}
.box.video.zwei-drittel-breite figure, .box.video.ein-drittel-breite figure, .box.video.halbe-breite figure {border-radius:10px; width:96%;}

/* ~~~ Boxen h2  ~~~~~~~~~~~~~~~*/
.box h2, .box h2 a, .box h2 a:link, .box.hellgruen h2, .box.hellgruen h2 a, .box.hellgruen h2 a:link {margin:0 auto; text-align:center; font-size:115%; line-height:130%; padding:0; color:#254d35;}
.box.uebersicht h2, .box.uebersicht h2 a, .box.uebersicht h2 a:link {font-size:105%; text-transform:none;}
.box.zwei-drittel-breite h2 {padding:7px 23%;}
.box.halbe-breite h2 {padding:7px 15%;}
.box.dunkelgruen h2, .box.dunkelgruen h2 a, .box.dunkelgruen h2 a:link {color:#fff; font-weight:300;}
.box:hover h2, .box h2 a:hover, .box.dunkelgruen h2 a:hover, .box.dunkelgruen:hover h2 a, .box.dunkelgruen:hover h2 a.link, .box.hellgruen h2 a:hover, .box.hellgruen:hover h2 a:link {color:#254d35; text-decoration:none; font-weight:400;}
.box.dunkelgruen h2 a:focus, .box.hellgruen h2 a:focus, .box.uebersicht h2 a:focus {text-decoration:underline;}
.box.hellgruen h2 a:focus {color:#000;}
.box.dunkelgruen h2 a:focus {color:#fff;}

/* ~~~ Boxen-mehrlink hover-Effekt ~~~~~~*/
.box p.mehrlink a, .box p.mehrlink a:link, .box p.mehrlink a:hover {background:rgba(162,199,72,0.00);}
.box.uebersicht p.mehrlink a:hover, .box.alsListe p.mehrlink a:hover, .alsListe-klassisch p.mehrlink a:hover {background:rgba(162,199,72,0.4); transition:all 0.5s ease;}
.box p.mehrlink a:focus, .alsListe-klassisch p.mehrlink a:focus {background:rgba(162,199,72,0.4); transition:all 0.5s ease;}

/* ~~~ ZUSATZ-Menu "SORTIMENT" Container ~~~ */
#back-link {width:290px; position:relative; margin:0 auto; font-size:120%;}
	#back-link a, #back-link a:link  {color:#628e23; text-align:center; margin:20px auto; padding:15px 0; border-radius:15px; border:2px solid #a2c748; display:block;}
	#back-link a:hover, #back-link a:focus  {color:#000; background:#fae03d; border:2px solid #fae03d; box-shadow:0px 5px 7px rgba(0,0,0,0.4); text-decoration:none;}
	#back-link a::before {background:transparent url("../images/pfeil-back-link.svg") 0 0 no-repeat; background-size:contain; display:inline-block; width:20px; height:20px; content:""; margin-right:7px;}

/* ~~~ Galerie ~~~ */
.box.galerie {width:180px; margin:0 5px 10px 5px; padding:5px; border:1px solid #a2c748; overflow:hidden;}
.box.galerie figure {border:2px solid #a2c748;}
.box.galerie figure a img, .box.galerie figure a:link img {transition:transform 1000ms cubic-bezier(.19,1,.22,1)0ms; }
.box.galerie:hover figure img, .box.galerie figure a:hover img, .box.galerie figure a:focus img { -webkit-transform:scale(1.085,1.085); transform:scale(1.085,1.085); cursor:pointer; transition:all 0.5s ease-out;}
.box.galerie figcaption h2 {font-size:100%; padding:0 3px; margin:0; text-transform:none;}

/* ~~~ Video ~~~ */
.videorahmen {max-width:100%; height:auto; margin-bottom:20px; padding:10px 15%; background:#1f1f1d; }
.videobox {width:100%; height:auto; margin:0; padding:0;}
.responsive-video {position:relative; padding-bottom:55%; padding-top:5px; height:0; overflow:hidden; }
.responsive-video iframe, .responsive-video object, .responsive-video embed, .responsive-video video {position:absolute; top:0; left:0; width:100%; height:100%;}

/* ~~~.video-banner {-o-object-fit:cover; object-fit:cover; width:100%; height:100%; opacity:1; }  ~~~ */

.js-body2klapp {display:none; width:100%; padding:15px 0 20px 0; margin-bottom:15px; border-bottom:1px solid #808737;}

/* ~~~ FAQs~~~ */
.faq-wrapper {max-width:1240px; margin:0 auto 15px auto; padding:5% 7%; border:1px solid #a2c748; border-radius:15px; display:block;}
	.faq-header {width:100%; margin:0 0 15px 0; text-align:left; border:none; background:none;}
	.faq-header h1 {margin:0em 0 0.3em 0; text-align:center;}

	.beitrag.faq {width:100%; margin-bottom:25px;}
	.beitrag.faq:last-child {margin-bottom:10px;}
	
		.faq-aufklapp {width:100%; margin:0 auto; position:relative; height:auto;}
		.faq-aufklapp a {width:100%; height:100%; text-decoration:none;}
		.faq-aufklapp h2 {color:#fff; padding:15px 40px 15px 15px; margin:0; font-size:120%; linheight:100%;}
		.faq-aufklapp a, .faq-aufklapp a:link { display:block; background:rgba(98,142,35,0.85); text-decoration:none; border-radius:10px;}
		.faq-aufklapp a:hover, .faq-aufklapp a:focus {background:rgba(53,92,63,1.0); text-decoration:none;}
		/* ~~~ FAQ: Pfeile ~~~ */
		.faq-aufklapp a.menu-but::after, .faq-aufklapp a:link.menu-but::after {position:absolute; right:15px; top:15px; z-index:1000; background:transparent url("../images/pfeil-faq-auf.svg") 0 0 no-repeat; background-size:contain; display:inline-block; width:20px; height:20px; content:"";}	
		.faq-aufklapp a.menu-pfeil::after, .faq-aufklapp a:link.menu-pfeil::after {background:transparent url("../images/pfeil-faq-zu.svg") 0 0 no-repeat; background-size:contain; display:inline-block; width:20px; height:20px; content:"";}

		.faq-content {display:none; width:100%; height:auto; padding:20px; border:1px solid #a2c748; border-radius:10px; overflow:hidden;}
			.faq-content h2 {width:100%; margin-bottom:10px; font-size:130%; color:#000; background:none; padding:0;}
			.faq-content a, .faq-content a:link, .faq-content a:hover, .faq-content a:focus {background:none; display:inline;}
			.faq-content ul {margin:7px 0;}
			.faq-content li {background:transparent url('../images/bullet.svg') 0 5px no-repeat; text-indent:0; padding-left:0.8em; margin-bottom:0.3em;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
	
/* ~~~ Bildtext und copyright ~~~*/
.beitrag figcaption p.bildtext {margin:0 0 15px 0; font-size:90%; font-style:italic;}
.beitrag figcaption p.copyright {font-size:70%; margin:0 0 3px 0; color:#737373; font-style:normal; line-height:100%;}
.beitrag figcaption p.copyright:hover {color:#000;}
.beitrag figcaption p.copyright::before, .bannerbild li figcaption p.copyright::before {content:'© ';}

	/* ~~~ Galerie ~~~*/
	.box figcaption {margin:5px 0;}
	.box.uebersicht figcaption {margin:7px 0;}
	.box figcaption p.bildtext {display:none;}
	.box figcaption p.copyright {padding:0 3px; margin:5px 0; }
	.box:hover figcaption p.copyright {color:#000;}
	.box.galerie figcaption p.copyright::before {content:'© ';}
	/* ~~~ Banner ~~~*/
.bannerbild li figcaption {z-index:300; right:5px; bottom:5px; }
.bannerbild li figcaption p.copyright {margin:0; background:rgba(255,255,255,0.6);font-size:70%; padding:5px 7px; color:#000; text-align:right; line-height:100%;}

/* ~~~ Copyright EINBLENDEN bei Bildern
.figure-copyright {position:absolute; z-index:300; right:0; bottom:0; font-size:70%; padding:5px 7px; color:#fff; text-align:right; line-height:100%;}
.figure-copyright-content {opacity:0;}
.figure-copyright:hover {background:rgba(255,255,255,0.8); color:#000; border-top-left-radius:10px;}
.figure-copyright:hover .figure-copyright-content {opacity:1;}
.figure-copyright::after {content:' ©';}
.bannerbild li .figure-copyright, .box .figure-copyright, .box.uebersicht .figure-copyright {bottom:-7px;}~~~*/

/* ~~~ Table ~~~*/
.beitrag table {margin:15px 0; padding:15px 0; }
.beitrag td, .beitrag th {width:auto;  padding: 0.25em; text-align: left; vertical-align:top;}
	.beitrag th {margin:7px 0 7px 0; padding:10px 7px 10px 7px; border:none; } 

hr {border:0; border-bottom:2px dotted #a2c747; margin:15px 0; }

/* ~~~ Einleitung zentriert ~~~*/
.einleitung, .beitrag .einleitung p {font-size:108%; margin-bottom:10px; text-align:center; border-top:none; font-style:italic;}
.einleitung h1, .einleitung h2, .beitrag .einleitung h1, .beitrag .einleitung h2 {font-style:normal;}

.intro, .bodydiv {margin-bottom:20px;}

.intro, .bodydiv {overflow:hidden; margin:0 0 10px 0;}

.intro h2 {margin:0 0 10px 0; }
	
.alsDetail ul.linkliste {list-style:none;}
.alsDetail ul.linkliste li:first-child {border-top:2px dotted #c1c1c1;}
.alsDetail ul.linkliste li {background:none; padding-left:0; margin:0; padding: 10px 0 10px 22px; list-style: none; }
.alsDetail ul.linkliste li {background:transparent url("../images/pfeil-linkliste.svg") 0 12px no-repeat; background-size: 15px;}

/* ~~~ beitrag Detailansicht ~~~*/
.alsDetail {padding:0 5%; margin-bottom:20px;}	
.alsDetail h2 {font-size:160%;}	
.alsDetail ul {margin:1% 0; }
.alsDetail li {background:transparent url('../images/bullet.svg') 0 7px no-repeat; background-size:10px; text-indent:0; padding-left:17px; margin-bottom:15px; line-height:170%;}
.alsDetail.nopadding {padding:0 0; margin-bottom:0;}	

.alsDetail a, .alsDetail a:link {font-weight:600; color:#628e23;}
.alsDetail a::before {content:"> "; color:#eb6d09;}
.alsDetail figure a::before, .alsDetail .icon-zielart a::before, .alsDetail .paginator li a::before {content:"";}
.alsDetail a:hover, .alsDetail a:focus {font-weight:600; color:#eb6d09;}	

.info-container {width:100%; padding:20px; color:#254d35; border-radius:15px; background:#a2c748; font-weight:600; margin:20px 0 50px 0;}
.info-container h2 {color:#fff; }
.info-container li {position:relative; margin-bottom:20px; padding-left:27px; background:none; }
.info-container li.plus::before {position:absolute; left:0; top:0; content:""; width:20px; height:30px; margin-right:7px; margin-top:-1px; background:transparent url('../images/bullet-plus.svg') 0 5px no-repeat; background-size:20px;}
.info-container li.minus:before {position:absolute; left:0; top:0; content:""; width:20px; height:30px; margin-right:7px; margin-top:-1px; background:transparent url('../images/bullet-minus.svg') 0 5px no-repeat; background-size:20px;}

.beispiel-container {width:100%; padding:20px; color:#254d35; text-align:center; text-transform:uppercase; font-weight:600; margin:20px 0; border-radius:15px; border:1px solid #a2c748;}

/* ~~~ KLASSISCHE Listen Beiträge ~~~~~~~~~~~~~~~*/
.alsListe-klassisch {text-align:left; padding:15px 0; margin:0 15%; border-bottom:2px dotted #a2c748;}
.alsListe-klassisch:first-child {margin-top:20px; }
.alsListe-klassisch a {text-decoration:none; }
.alsListe-klassisch a:hover {text-decoration:none;}
.alsListe-klassisch h1, .alsListe-klassisch h2 {font-size:140%; line-height:1.3em; text-align:left; padding:0; margin:0;}
.alsListe-klassisch p {margin:0;}
.alsListe-klassisch figure {width:35%; float:left; margin:0; padding:0; }
.alsListe-klassisch figure img {border-radius:7px;}
.alsListe-klassisch .listentext {margin-left:37%; width:63%; vertical-align:top; padding:0 5px 10px 0;}
.alsListe-klassisch.ohneBild .listentext {margin-left:0; }

/* ~~~ paginator ~~~*/
.paginator {margin:40px 0;}
	.paginator ul {list-style:none !important; margin:0; }
	.paginator li {background:none !important; text-indent:0; padding-left:0; margin-bottom:0; }
	.paginator li a, .paginator li a:link {color:#628e23; width:40px; height:40px; padding:10px; text-align:center; text-decoration:none; line-height:110%; border:1px solid #a2c748; border-radius:5px;}
	.paginator li a:hover, .paginator li a:focus {background:#ffffa6; border:1px solid #355c3f;}
	.paginator li.akt a {background:#628e23; color:#fff; border:1px solid #355c3f;}
	.paginator li.pas a, .paginator li.pas a:hover, .paginator li.pas a:focus {color:#c1c1c1; background:#fff;}
	.paginator img {width:256px;}
	
.paginator .pagesize {margin-top:10px; padding:10px; text-align:center;}
.paginator select {width:100px; border:1px solid #a2c748;}

/* ~~~ Listen Beiträge ALS BOXEN ~~~~~~~~~~~~~~~*/
.box.alsListe {padding:10px 10px 20px 10px; margin-bottom:25px; border:1px solid #a2c748;}
.box.alsListe figure {width:70%; margin:10px auto; line-height:0;}
.box.alsListe figure {border:10px solid #a2c748;}
.box.alsListe h2 {margin:0; padding:0 0 7px 0; font-size:100%;}



/* ~~~ Zielarten ICONS  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.icons-zielarten {width:100%; }
/* ~~~ .icon-zielart {width:140px; background:#fff; margin:0 5px 10px 5px;}
.icon-zielart figure {width:120px; height:120px; margin:0 auto; border:4px solid #a2c748; overflow:hidden;}
.icon-zielart figure a, .icon-zielart figure a:link {display:block; width:120px; height:120px; margin:-4px 0 0 -4px;}
.icon-zielart figure a:hover, .icon-zielart figure a:focus {background:#fae03d;}
.icon-zielart figcaption p {font-size:80%; padding:0; text-align:center; margin-top:5px; line-height:120%;}  ~~~~~~~~~~~~~~~*/

.icon-zielart {width:140px; background:#fff; margin:0 5px 10px 5px;}
.icon-zielart .symbol {width:120px; height:120px; margin:0 auto; border:4px solid #a2c748; border-radius:50%; overflow:hidden;}
.icon-zielart .symbol a, .icon-zielart .symbol a:link {display:block; width:120px; height:120px; margin:-4px 0 0 -4px; background:#fff url("../images/icons-zielarten/mauersegler.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart .symbol a:hover, .icon-zielart .symbol a:focus {background:#fae03d url("../images/icons-zielarten/mauersegler.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart p {font-size:80%; padding:0; text-align:center; margin-top:5px; line-height:120%; font-style:normal;}

/* ~~~ Zielarten ICONS die spezifischen Symbole TIERE ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.icon-zielart.ackerhummel .symbol a:link, #popupwindow-innen.ackerhummel .icon-zielart {background:#fff url("../images/icons-zielarten/ackerhummel.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.ackerhummel .symbol a:hover, .icon-zielart.ackerhummel .symbol a:focus {background:#fae03d url("../images/icons-zielarten/ackerhummel.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.gehoernte-mauerbiene .symbol a:link, #popupwindow-innen.gehoernte-mauerbiene .icon-zielart {background:#fff url("../images/icons-zielarten/gehoernte-mauerbiene.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.gehoernte-mauerbiene .symbol a:hover, .icon-zielart.gehoernte-mauerbiene .symbol a:focus {background:#fae03d url("../images/icons-zielarten/gehoernte-mauerbiene.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.graues-langohr .symbol a:link, #popupwindow-innen.graues-langohr .icon-zielart {background:#fff url("../images/icons-zielarten/graues-langohr.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.graues-langohr .symbol a:hover, .icon-zielart.graues-langohr .symbol a:focus {background:#fae03d url("../images/icons-zielarten/graues-langohr.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.grosse-holzbiene .symbol a:link, #popupwindow-innen.grosse-holzbiene .icon-zielart {background:#fff url("../images/icons-zielarten/grosse-holzbiene.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.grosse-holzbiene .symbol a:hover, .icon-zielart.grosse-holzbiene .symbol a:focus {background:#fae03d url("../images/icons-zielarten/grosse-holzbiene.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.grosses-gluehwuermchen .symbol a:link, #popupwindow-innen.grosses-gluehwuermchen .icon-zielart {background:#fff url("../images/icons-zielarten/grosses-gluehwuermchen.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.grosses-gluehwuermchen .symbol a:hover, .icon-zielart.grosses-gluehwuermchen .symbol a:focus {background:#fae03d url("../images/icons-zielarten/grosses-gluehwuermchen.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.hauhechelblaeuling .symbol a:link, #popupwindow-innen.hauhechelblaeuling .icon-zielart {background:#fff url("../images/icons-zielarten/hauhechelblaeuling.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.hauhechelblaeuling .symbol a:hover, .icon-zielart.hauhechelblaeuling .symbol a:focus {background:#fae03d url("../images/icons-zielarten/hauhechelblaeuling.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.hirschkaefer .symbol a:link, #popupwindow-innen.hirschkaefer .icon-zielart {background:#fff url("../images/icons-zielarten/hirschkaefer.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.hirschkaefer .symbol a:hover, .icon-zielart.hirschkaefer .symbol a:focus {background:#fae03d url("../images/icons-zielarten/hirschkaefer.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.kleiner-fuchs .symbol a:link, #popupwindow-innen.kleiner-fuchs .icon-zielart {background:#fff url("../images/icons-zielarten/kleiner-fuchs.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.kleiner-fuchs .symbol a:hover, .icon-zielart.kleiner-fuchs .symbol a:focus {background:#fae03d url("../images/icons-zielarten/kleiner-fuchs.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.kurzfuehlschrecke .symbol a:link, #popupwindow-innen.kurzfuehlschrecke .icon-zielart {background:#fff url("../images/icons-zielarten/kurzfuehlschrecke.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.kurzfuehlschrecke .symbol a:hover, .icon-zielart.kurzfuehlschrecke .symbol a:focus {background:#fae03d url("../images/icons-zielarten/kurzfuehlschrecke.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.laufkaefer .symbol a:link, #popupwindow-innen.laufkaefer .icon-zielart {background:#fff url("../images/icons-zielarten/laufkaefer.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.laufkaefer .symbol a:hover, .icon-zielart.laufkaefer .symbol a:focus {background:#fae03d url("../images/icons-zielarten/laufkaefer.svg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.mauersegler .symbol a:link, #popupwindow-innen.mauersegler .icon-zielart {background:#fff url("../images/icons-zielarten/mauersegler.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.mauersegler .symbol a:hover, .icon-zielart.mauersegler .symbol a:focus {background:#fae03d url("../images/icons-zielarten/mauersegler.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.mehlschwalbe .symbol a:link, #popupwindow-innen.mehlschwalbe .icon-zielart {background:#fff url("../images/icons-zielarten/mehlschwalbe.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.mehlschwalbe .symbol a:hover, .icon-zielart.mehlschwalbe .symbol a:focus {background:#fae03d url("../images/icons-zielarten/mehlschwalbe.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.nachtigallgrashuepfer .symbol a:link, #popupwindow-innen.nachtigallgrashuepfer .icon-zielart {background:#fff url("../images/icons-zielarten/nachtigallgrashuepfer.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.nachtigallgrashuepfer .symbol a:hover, .icon-zielart.nachtigallgrashuepfer .symbol a:focus {background:#fae03d url("../images/icons-zielarten/nachtigallgrashuepfer.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.rotpelzige-sandbiene .symbol a:link, #popupwindow-innen.rotpelzige-sandbiene .icon-zielart {background:#fff url("../images/icons-zielarten/rotpelzige-sandbiene.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.rotpelzige-sandbiene .symbol a:hover, .icon-zielart.rotpelzige-sandbiene .symbol a:focus {background:#fae03d url("../images/icons-zielarten/rotpelzige-sandbiene.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.segelfalter .symbol a:link, #popupwindow-innen.segelfalter .icon-zielart {background:#fff url("../images/icons-zielarten/segelfalter.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.segelfalter .symbol a:hover, .icon-zielart.segelfalter .symbol a:focus {background:#fae03d url("../images/icons-zielarten/segelfalter.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.stieglitz .symbol a:link, #popupwindow-innen.stieglitz .icon-zielart {background:#fff url("../images/icons-zielarten/stieglitz.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.stieglitz .symbol a:hover, .icon-zielart.stieglitz .symbol a:focus {background:#fae03d url("../images/icons-zielarten/stieglitz.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.wechselkroete .symbol a:link, #popupwindow-innen.wechselkroete .icon-zielart {background:#fff url("../images/icons-zielarten/wechselkroete.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.wechselkroete .symbol a:hover, .icon-zielart.wechselkroete .symbol a:focus {background:#fae03d url("../images/icons-zielarten/wechselkroete.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.weinhaehnchen .symbol a:link, #popupwindow-innen.weinhaehnchen .icon-zielart {background:#fff url("../images/icons-zielarten/weinhaehnchen.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.weinhaehnchen .symbol a:hover, .icon-zielart.weinhaehnchen .symbol a:focus {background:#fae03d url("../images/icons-zielarten/weinhaehnchen.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.weissbrustigel .symbol a:link, #popupwindow-innen.weissbrustigel .icon-zielart {background:#fff url("../images/icons-zielarten/weissbrustigel.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.weissbrustigel .symbol a:hover, .icon-zielart.weissbrustigel .symbol a:focus {background:#fae03d url("../images/icons-zielarten/weissbrustigel.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.weissrandfledermaus .symbol a:link, #popupwindow-innen.weissrandfledermaus .icon-zielart {background:#fff url("../images/icons-zielarten/weissrandfledermaus.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.weissrandfledermaus .symbol a:hover, .icon-zielart.weissrandfledermaus .symbol a:focus {background:#fae03d url("../images/icons-zielarten/weissrandfledermaus.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.wiener-schnirkelschnecke .symbol a:link, #popupwindow-innen.wiener-schnirkelschnecke .icon-zielart {background:#fff url("../images/icons-zielarten/wiener-schnirkelschnecke.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.wiener-schnirkelschnecke .symbol a:hover, .icon-zielart.wiener-schnirkelschnecke .symbol a:focus {background:#fae03d url("../images/icons-zielarten/wiener-schnirkelschnecke.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.zauneidechse .symbol a:link, #popupwindow-innen.zauneidechse .icon-zielart {background:#fff url("../images/icons-zielarten/zauneidechse.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.zauneidechse .symbol a:hover, .icon-zielart.zauneidechse .symbol a:focus {background:#fae03d url("../images/icons-zielarten/zauneidechse.jpg") 0 0 no-repeat; background-size:contain;}

/* ~~~ Zielarten ICONS die spezifischen Symbole PFLANZEN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.icon-zielart.echter-lavendel .symbol a:link, #popupwindow-innen.echter-lavendel .icon-zielart {background:#fff url("../images/icons-zielarten/echter-lavendel.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.echter-lavendel .symbol a:hover, .icon-zielart.echter-lavendel .symbol a:focus {background:#fae03d url("../images/icons-zielarten/echter-lavendel.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.echtes-geissblatt .symbol a:link, #popupwindow-innen.echtes-geissblatt .icon-zielart {background:#fff url("../images/icons-zielarten/echtes-geissblatt.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.echtes-geissblatt .symbol a:hover, .icon-zielart.echtes-geissblatt .symbol a:focus {background:#fae03d url("../images/icons-zielarten/echtes-geissblatt.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.efeu .symbol a:link, #popupwindow-innen.efeu .icon-zielart {background:#fff url("../images/icons-zielarten/efeu.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.efeu .symbol a:hover, .icon-zielart.efeu .symbol a:focus {background:#fae03d url("../images/icons-zielarten/efeu.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.gemeine-nachtkerze .symbol a:link, #popupwindow-innen.gemeine-nachtkerze .icon-zielart {background:#fff url("../images/icons-zielarten/gemeine-nachtkerze.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.gemeine-nachtkerze .symbol a:hover, .icon-zielart.gemeine-nachtkerze .symbol a:focus {background:#fae03d url("../images/icons-zielarten/gemeine-nachtkerze.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.gundelrebe .symbol a:link, #popupwindow-innen.gundelrebe .icon-zielart {background:#fff url("../images/icons-zielarten/gundelrebe.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.gundelrebe .symbol a:hover, .icon-zielart.gundelrebe .symbol a:focus {background:#fae03d url("../images/icons-zielarten/gundelrebe.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.johannisbeere .symbol a:link, #popupwindow-innen.johannisbeere .icon-zielart {background:#fff url("../images/icons-zielarten/johannisbeere.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.johannisbeere .symbol a:hover, .icon-zielart.johannisbeere .symbol a:focus {background:#fae03d url("../images/icons-zielarten/johannisbeere.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.kriecherl .symbol a:link, #popupwindow-innen.kriecherl .icon-zielart {background:#fff url("../images/icons-zielarten/kriecherl.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.kriecherl .symbol a:hover, .icon-zielart.kriecherl .symbol a:focus {background:#fae03d url("../images/icons-zielarten/kriecherl.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.kugeldistel .symbol a:link, #popupwindow-innen.kugeldistel .icon-zielart {background:#fff url("../images/icons-zielarten/kugeldistel.svg") 0 0 no-repeat; background-size:contain; }
.icon-zielart.kugeldistel .symbol a:hover, .icon-zielart.kugeldistel .symbol a:focus {background:#fae03d url("../images/icons-zielarten/kugeldistel.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.natternkopf .symbol a:link, #popupwindow-innen.natternkopf .icon-zielart {background:#fff url("../images/icons-zielarten/natternkopf.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.natternkopf .symbol a:hover, .icon-zielart.natternkopf .symbol a:focus {background:#fae03d url("../images/icons-zielarten/natternkopf.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.salweide .symbol a:link, #popupwindow-innen.salweide .icon-zielart {background:#fff url("../images/icons-zielarten/salweide.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.salweide .symbol a:hover, .icon-zielart.salweide .symbol a:focus {background:#fae03d url("../images/icons-zielarten/salweide.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.scharfer-mauerpfeffer .symbol a:link, #popupwindow-innen.scharfer-mauerpfeffer .icon-zielart {background:#fff url("../images/icons-zielarten/scharfer-mauerpfeffer.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.scharfer-mauerpfeffer .symbol a:hover, .icon-zielart.scharfer-mauerpfeffer .symbol a:focus {background:#fae03d url("../images/icons-zielarten/scharfer-mauerpfeffer.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.schnittlauch .symbol a:link, #popupwindow-innen.schnittlauch .icon-zielart {background:#fff url("../images/icons-zielarten/schnittlauch.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.schnittlauch .symbol a:hover, .icon-zielart.schnittlauch .symbol a:focus {background:#fae03d url("../images/icons-zielarten/schnittlauch.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.steppensalbei .symbol a:link, #popupwindow-innen.steppensalbei .icon-zielart {background:#fff url("../images/icons-zielarten/steppensalbei.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.steppensalbei .symbol a:hover, .icon-zielart.steppensalbei .symbol a:focus {background:#fae03d url("../images/icons-zielarten/steppensalbei.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.traubenhyazinthe .symbol a:link, #popupwindow-innen.traubenhyazinthe .icon-zielart {background:#fff url("../images/icons-zielarten/traubenhyazinthe.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.traubenhyazinthe .symbol a:hover, .icon-zielart.traubenhyazinthe .symbol a:focus {background:#fae03d url("../images/icons-zielarten/traubenhyazinthe.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.walnuss .symbol a:link, #popupwindow-innen.walnuss .icon-zielart {background:#fff url("../images/icons-zielarten/walnuss.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.walnuss .symbol a:hover, .icon-zielart.walnuss .symbol a:focus {background:#fae03d url("../images/icons-zielarten/walnuss.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.wegwarte .symbol a:link, #popupwindow-innen.wegwarte .icon-zielart {background:#fff url("../images/icons-zielarten/wegwarte.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.wegwarte .symbol a:hover, .icon-zielart.wegwarte .symbol a:focus {background:#fae03d url("../images/icons-zielarten/wegwarte.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.wilde-karotte .symbol a:link, #popupwindow-innen.wilde-karotte .icon-zielart {background:#fff url("../images/icons-zielarten/wilde-karotte.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.wilde-karotte .symbol a:hover, .icon-zielart.wilde-karotte .symbol a:focus {background:#fae03d url("../images/icons-zielarten/wilde-karotte.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.zimbelkraut .symbol a:link, #popupwindow-innen.zimbelkraut .icon-zielart {background:#fff url("../images/icons-zielarten/zimbelkraut.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.zimbelkraut .symbol a:hover, .icon-zielart.zimbelkraut .symbol a:focus {background:#fae03d url("../images/icons-zielarten/zimbelkraut.jpg") 0 0 no-repeat; background-size:contain;}

.icon-zielart.zwergmandel .symbol a:link, #popupwindow-innen.zwergmandel .icon-zielart {background:#fff url("../images/icons-zielarten/zwergmandel.svg") 0 0 no-repeat; background-size:contain;}
.icon-zielart.zwergmandel .symbol a:hover, .icon-zielart.zwergmandel .symbol a:focus {background:#fae03d url("../images/icons-zielarten/zwergmandel.jpg") 0 0 no-repeat; background-size:contain;}
	
	/* ~~~ Popup für Zielarten ~~~*/
#popupwindow {display:none; position:absolute; left:50%; top:0; margin-left:-510px; z-index:300; max-width:1020px; min-height:300px;}	
	#popupwindow-innen {position:relative; width:100%; padding:40px 20px 20px 20px; background:#fff; box-shadow:rgba(0,0,0,0.4) 0px 7px 7px 7px; border-radius:15px;}
		#popupwindow-innen .icon-zielart {position:absolute; top:10px; left:10px; width:80px; height:80px; border:2px solid #a2c748; }
			
	#close-wrapper {position:absolute; top:10px; right:10px; width:40px; height:40px; color:#ec7204;}
		#close-wrapper img {width:40px; height:40px;}
		#close-wrapper a, #close-wrapper a:link  {display:block; width:40px; height:40px; background:#355c3f;}
		#close-wrapper a:hover, #close-wrapper a:focus {background:#a2c748;}
	
/* ~~~ Footer ~~~*/
footer {margin-top:40px;}
	#footer-illu {display:table; width:100%; height:131px; background:url(../images/footer-back.svg) bottom center no-repeat; background-size:cover; }
	
	/* ~~~ Footer Unten~~~ */
	#footer-unten {background:#a2c748; margin-top:-1px;}

		/* ~~~ Footer Menü~~~ */
		#footer-menu {padding-bottom:20px;}
			#footer-menu li a, #footer-menu li a:link, #footer-menu li a:visited {color:#254d35; padding:5px 7px 7px 7px; margin:0 5px; text-decoration:none; display:block; font-size:135%; font-weight:400;}
			#footer-menu li a:active, #footer-menu li a:focus, #footer-menu li a:hover, #footer-menu li.akt a {color:#fff;}
			#footer-menu li.rahmen a {border:1px solid #fff; border-radius:5px;}
			
		/* ~~~ Footer social-buttons ~~~ */
		#footer-social-wrapper {padding:10px 0 30px 0; border-top:2px dotted #fff;}
			#footer-social-header, #footer-logo-header p {margin-bottom:20px; text-align:center; font-style:italic;}
			#footer-social-buttons {height:40px;}
				.social-button {position:relative; margin:0 10px;}
				.social-button.fb a, .social-button.fb a:link {background:#fff url(../images/icon-social-facebook.svg) 0 0 no-repeat; background-size:40px 40px; }
				.social-button.fb a:focus, .social-button.fb a:hover {background:#355c3f url(../images/icon-social-facebook.svg) 0 0 no-repeat; background-size:40px 40px; }
				.social-button.tw a, .social-button.tw a:link {background:#fff url(../images/icon-social-twitter.svg) 0 0 no-repeat; background-size:40px 40px; }
				.social-button.tw a:focus, .social-button.tw a:hover {background:#355c3f url(../images/icon-social-twitter.svg) 0 0 no-repeat; background-size:40px 40px; }
				.social-button.yt a, .social-button.yt a:link {background:#fff url(../images/icon-social-youtube.svg) 0 0 no-repeat; background-size:40px 40px; }
				.social-button.yt a:focus, .social-button.yt a:hover {background:#355c3f url(../images/icon-social-youtube.svg) 0 0 no-repeat; background-size:40px 40px;}

		/* ~~~ Footer Logos ~~~ */
		#footer-logo-wrapper {padding:10px 0; }	
			.footer-logo {width:20%; padding:1%;}
	
		/* ~~~ Footer Pfeil nach oben ~~~ */
		#pfeil-top {height:70px; background:#a2c748; } 	
			#pfeil-top a, #pfeil-top a:link {width:50px; height:50px; border:1px solid #a2c748; background:#fff url(../images/pfeil-top.svg) 0 0 no-repeat; background-size:cover;}
			#pfeil-top a:focus, #pfeil-top a:hover {background:#fff url(../images/pfeil-topr.svg) 0 0 no-repeat; background-size:cover;}
			

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FLEX SLIDER~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* Browser Resets */
.flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline:none;}
.slides, .flex-control-nav, .flex-direction-nav {margin:0; padding:0; list-style: none;} 
/* FlexSlider wichtige Styles
*********************************/ 
.flexslider {margin:0; padding:0; border:0; position:relative;}
.flexslider .slides > li {display: none; } /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; margin:0; padding:0; display: block;}
.flex-pauseplay {display:none;}
/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear:both; visibility:hidden; line-height:0;height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}
.no-js .slides > li:first-child {display: none;}
.flex-viewport {max-height:600px; transition: all 0.5s ease; }
.loading .flex-viewport {max-height: 600px;}
.carousel li {margin-right:0;}
/* Direction Nav */
.flex-direction-nav {height:0; display:block;}
.flex-direction-nav a {width: 45px; height:110px; margin:-35px 0 0; display:block; background:url(../images/bg-direction-nav.svg) no-repeat 0 0; position:absolute; top:45%; z-index:1400; cursor:pointer; text-indent:-9999px; opacity:0.0; transition:all .3s ease;}
.flex-direction-nav .flex-next {background-position:100% 0; right:0px; }
.flex-direction-nav .flex-prev {left:0px;}
.flexslider:hover .flex-next {opacity:0.6; right:5px;}
.flexslider:hover .flex-prev {opacity:0.6; left:5px;}
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity:1; cursor:pointer;}
.flex-direction-nav .flex-disabled {opacity:0.7; cursor: default;}
/* Control Nav */
.flex-control-nav {position:absolute; bottom:5px; z-index:50; text-align:left; font-size:0px;}
.flex-control-nav li {display: inline-block; zoom:1; vertical-align:middle;}
.flex-control-paging li a {width:15px; height:15px; margin:0 3px; display:block; background:#fff; cursor:pointer; text-indent:-9999px; border-radius:50%; border:1px solid #2f6443;}
.flex-control-paging li a:hover {width:20px; height:20px; }
.flex-control-paging li a.flex-active {background:#fae03d; width:20px; height:20px; }
.flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;}
.flex-control-thumbs li {width: 25%; float: left; margin: 0;}
.flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
.flex-control-thumbs img:hover {opacity: 1;}
.flex-control-thumbs .flex-active {opacity: 1; cursor: default;}
	
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Formularelemente ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
form { max-width: 100%; margin:0;}
fieldset { padding:0.5em 1em; border-bottom:2px solid #fff; margin:0.5em 0;}
fieldset:last-child {border-bottom:none; margin:0.5em 0 0 0;}
fieldset.auswahl {padding-left:26%;}
legend { font-size:1.2em; font-weight:400; margin:0 0.75em 10px 0.75em;}
.form-field {background:rgba(162,199,72,0.8); padding:0.75em 0em; border-radius:15px;}
/* Labels */
label { display: inline-block;}
label { margin: .2em 0;}
#myname {display:none;}
/* remove standard-styles */
input, select, textarea {-webkit-appearance:none; -moz-appearance:none; appearance:none; border:none; border-radius: 0; font-size:1em; width:85%; position:relative;} 
input.kalendertisch, input.uhrzeit, select.klein {width:50%; position:relative;}
/* .Zebra_DatePicker_Icon_Wrapper {width:60%} */
.Zebra_DatePicker_Icon_Wrapper {position:relative; width:60%;}
.Zebra_DatePicker_Icon, .Zebra_DatePicker_Icon_Inside_Right {position:absolute; right:5px; top:7px;}
/* Input & Textarea */
input, textarea {background:#fff; border:1px solid #628e23; border-radius:5px; padding:.75em 1em .5em 1em; box-shadow:inset 0 3px 2px 0 rgba(0,0,0,0.2);}
input, select, textarea {font: normal 0.85em/1.4em 'Open San', sans-serif, Arial, Verdana, Helvetic; font-weight:300; color:#000; }
textarea {resize:vertical;}
input:hover, input:active, input:hover, input:focus, textarea:hover, textarea:active, textarea:focus {border:1px solid #355c3f; box-shadow:inset 0 2px 1px 0 rgba(0,0,0,0.2); background:#ffffa6; transition: all 0.4s ease-out;}
/* speziell für hlw19 Zeitablauffeld für login */
#login-box input.ablauf {width:33%; text-align:center;}
/* Select */
select {width:50%; border: 1px solid #628e23; padding:.75em 1em .5em .5em; box-shadow:0 3px 3px 0 rgba(0,0,0,0.25); border-radius:5px; background:#fff url('../images/pfeil-menu-auf.svg') 95% 47% no-repeat; background-size: auto 15px;}
select:hover, select:focus {box-shadow: 0 3px 2px 0 rgba(0,0,0,0.3); background:#ffffa6 url('../images/pfeil-menu-zu.svg') 95% 47% no-repeat; background-size:auto 15px; border:1px solid #355c3f; transition:all 0.4s ease-out; cursor:pointer;}
select .opt-abstand {padding-left:20px; }
/* Hide browser-styling in IE10 */
select::-ms-expand {display:none;}
/* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
.lt-ie10 select {  background-image: none; }
/* graceful degradation for ie8 */
input[type='checkbox'], input[type='radio'] { width:auto; float:left; margin-right:0.75em; background:transparent; border:none;}
/* better styling only for modern browsers. To identify them, check for pseudoclass (:checked, :not(:checked)) */
/* hide standard inputs */
input[type='checkbox']:checked, input[type='checkbox']:not(:checked), input[type='radio']:checked, input[type='radio']:not(:checked) {background: transparent; position: relative; margin:0; padding:0; }
input[type='checkbox'] + label,input[type='radio'] + label {cursor: pointer; position:relative;}
/* add custom inputs with ::before */
input[type='checkbox']:checked + label::before, input[type='checkbox']:not(:checked) + label::before,
input[type='radio']:checked + label::before, input[type='radio']:not(:checked) + label::before {
content:' '; display:inline-block; width:20px;  height:20px;  position: relative; top:4px;  border:1px solid #949494; background:#fff; margin-right:0.75em; border-radius:3px; overflow:hidden;}
input[type='checkbox'] + label::after, input[type='radio'] + label::after {position:absolute; display:none; content:''; }
input[type=radio]:checked + label::before, input[type=radio]:not(:checked) + label::before {border-radius: 50%;}
input[type='checkbox']:hover  + label::before, input[type='checkbox']:focus  + label::before, input[type='radio']:hover  + label::before, input[type='radio']:focus  + label::before  {background:#ffffa6; border:1px solid #355c3f; transition: all 0.4s ease-out; }
input[type='checkbox']:checked  + label::before, input[type='radio']:checked  + label::before {background:#355c3f; border:1px solid #355c3f; overflow:hidden;}
input[type='checkbox']:checked  + label::after {display:block; top: 7px; left: 7px; width:5px; height:11px; -webkit-transform:rotate(45deg); transform:rotate(45deg); border:2px solid #fff; border-top:0; border-left:0; transition: all 0.4s ease-out; }
input[type='radio']:checked + label::after {display:block; top: 13px; left:9px; width:4px; height:4px; background:#fff; border-radius:50%; transition: all 0.4s ease-out; }

/* Tabelle */
.form-field table {margin-top:0.5em;}
.form-field td, .form-field td:first-child .col2, th {width:100%; padding: 0.2em; margin-bottom:5px; text-align: left; vertical-align:top;}
.form-field th {margin:7px 0 7px 0; padding:10px 7px; border:none; width:100%;} 
.form-field td:first-child {text-align:right; width:30%; border:none; padding-top:9px;}
.form-field td.col2:first-child, th {text-align: left; padding-left:30px;}
#hinweis {padding-bottom:15px; border-bottom:2px solid #fff;}
.mini {font-size:0.8em; font-style:italic; margin-left:1em;}

/* Buttons */
.submit {width:auto; max-width:100%; margin:0.75em 0 0.75em 0; padding:0.5em 1.5em; cursor:pointer; box-shadow:0px 2px 2px 0px rgba(0,0,0,0.45); border-radius:5px; text-align:center; font-size:1em; overflow:hidden; border:1px solid #355c3f; background:#355c3f; color:#fff; transition:all 0.5s ease-out;}
.submit:hover {color:#254d35; box-shadow:1px 1px 2px 0px rgba(0,0,0,0.45); transition:all 0.5s ease-out; border:1px solid #a2c748; background:#fae03d;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ FANCYBOX~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
.fancybox-button, .fancybox-infobar__body {background:rgba(162,199,72,0.7);}
.fancybox-button:hover {background:rgba(53,92,63,1);}
.fancybox-caption-wrap {background:rgba(37,77,53,1.0);}
.fancybox-caption {padding:30px 0; font-size:120%; line-height:100%; text-align:center; border-top:none; color:#fff;}
.fancybox-infobar__body { display:inline-block; width:70px; line-height:44px; font-size: 1em; }
.fancybox-button {width:60px; height:60px; line-height:60px;} 
.fancybox-placeholder {box-sizing:content-box; }
.fancybox-button--play::before, .fancybox-button--fullscreen::before {top:23px; left:25px; }
.fancybox-button--thumbs::before {top:27px; left:27px; }
.fancybox-placeholder::before {content: ''; background:#fff; position:absolute; top:0; left:0; right:0; bottom:0;}
.fancybox-controls {position:static; }
.fancybox-button--left, .fancybox-button--right {position:absolute; top:50%; transform:translateY(-50%); height:88px; width:88px; line-height:88px;}
.fancybox-button--left::after, .fancybox-button--right::after {width:18px; height:18px; margin:18px;}
.fancybox-button--left {left:0;}
.fancybox-button--right {right:0;}
.fancybox-infobar__body {position: absolute; top: 0;}
.fancybox-infobar__body, .fancybox-button--left, .fancybox-button--right, .fancybox-buttons {z-index:99994;}
.fancybox-bg {background:#355c3f; }
.fancybox-infobar {display:block;}
.fancybox-caption-wrap {padding:0; background:linear-gradient(180deg,transparent 0,rgba(0,0,0,.1) 20%,rgba(0,0,0,.2) 40%,rgba(0,0,0,.6) 80%,rgba(0,0,0,.8)); opacity:1; transition:opacity .2s;}
.fancybox-container--ready .fancybox-bg {opacity:0.95;}
.fancybox-image, .fancybox-spaceball {width:100%; height:100%; top:0%; left:0%;}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Browser UPDATE~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.buorg {position:absolute; top:0px; left:0px; border-bottom:1px solid #A29330; background:#FDF2AB no-repeat 1em 0.55em url(../images/dialog-warning.gif); text-align:left; cursor:pointer; font-family: Arial,Helvetica,sans-serif; color:#000; font-size: 16px;}
.buorg div {padding:5px 36px 5px 40px;}
.buorg a {color:#E25600;}
#buorgclose {position: absolute; right: .5em; top:.2em; height: 20px; width: 12px; font-weight: bold; font-size:14px; padding:0;}
}
@media only screen and (min-width: 1041px) {
.alsDetail {padding:0 10%;}
.alsDetail.nopadding {padding:0 0;;}
.flex-control-paging li a {width:20px; height:20px; }
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active {width:25px; height:25px;}
}
@media screen and (min-width: 1241px)  {
.alsListe-klassisch {margin:0 25%;}
}
@media only screen and (min-width: 1421px) {
.bannerbild {border-radius:60px 60px 0 60px;}
.bannerbild li .message-circle {width:280px; height:280px; left:14%; bottom:5%; padding:1.5%; animation:none; animation:slide-circle-1421px 0.5s 1;}
.bannerbild li .message-circle h2 {font-size:180%;}
}
@media only screen and (min-width: 1921px) {
#menu-wrapper {padding:0 7%;}
.alsListe-klassisch {margin:0 30%;}
}
@media only screen and (min-width: 2100px) {
#menu-wrapper {padding:0 10%;}
}
@media only screen and (min-width: 2001px) {
.bannerbild {margin:0 auto;}
}
@media only screen and (max-width: 1920px) {
#footer-illu {max-height:123px;}
}
@media only screen and (max-width: 1360px) {
.logo-eu {left:130px; top:80px; }
}
@media screen and (max-width: 1240px)  {
header {width:100%; }
#header-oben, #header-mitte {width:100%;}
#logo, body.service #logo, body.facts #logo {left:10px;width:100px; height:100px;}
.logo-eu {left:0px; top:120px;}

.listen-cont, .galerie-cont {margin:20px auto;}
.box, .box.alsListe {margin-bottom:20px;}

#footer-unten {padding:0 10px;}
#footer-logo-wrapper  {padding:10px;}
}
@media screen and (max-width: 1040px)  {

#menu {width:50%; border-right:1px solid #cecece; }	
#menu {display:none; top:0; left:0; padding:0; max-width:560px; width:100%; padding-top:140px; box-shadow:0px 10px 10px rgba(0,0,0,0.6);}
#menu-footer {display:none;}

#menu ul {width:100%; padding:0; -webkit-flex-flow:column; animation:none; border-top:1px solid #cecece;}
#menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {position:absolute; margin:0; top:15px; right:7px; display:inline-block; width:20px; height:20px; content:"";}
#menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {right:22px; top:7px;}
/* ~~~ Menu 1. Ebene ~~~ */
	#menu ul li {width:100%; margin:0 0 0 5px; }
	#menu ul li a, #menu ul li a:link {padding:0.6em 10px 0.6em 0; border-bottom:1px solid #cecece; font-size:110%;}
/* ~~~ #menu ul li a.menu-but::after {top:15px; right:15px; background: url("../images/pfeil-menu-auf.svg"); }
	#menu ul li a.menu-pfeil::after {background:url("../images/pfeil-menu-zu.svg"); } ~~~ */
	#menu ul li a.menu-but::after {background:transparent url("../images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }
	#menu ul li a.menu-pfeil::after {background:transparent url("../images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }
		#menu ul li.akt a.menu-but::after {background:transparent url("../images/pfeil-menu-auf.svg") 0 0 no-repeat; background-size:contain; }	
	#menu ul li.akt a.menu-pfeil::after {background:transparent url("../images/pfeil-menu-zu.svg") 0 0 no-repeat; background-size:contain; }

	/* ~~~ Menu 2. Ebene ~~~ */
	#menu ul li ul, #menu ul li.akt ul {display:none; border-top:none;}
	#menu ul li.akt ul {display:block; border-top:none;}
	#menu ul li ul li {padding-right:20px;}
	#menu ul li ul li a, #menu ul li ul li a:link, #menu ul li.akt ul li a, #menu ul li.akt ul li a:link {padding:0.3em 15px 0.3em 15px; line-height:1.5em; font-size:100%;}
	#menu ul li ul li a.menu-but-sub::after {background:transparent url("../images/pfeil-menu-auf-sub.svg") 0 0 no-repeat; background-size:contain;  }
	#menu ul li ul li a.menu-pfeil-sub::after {background:transparent url("../images/pfeil-menu-zu-sub.svg") 0 0 no-repeat; background-size:contain;  }
	#menu ul li.akt ul li.akt a, #menu ul li.akt ul li.akt a:link {margin-left:0;}
	
	/* ~~~ Menu 3. Ebene ~~~ */
	#menu ul li ul li ul, #menu ul li.akt ul li ul {display:none; border-bottom:none;}
	#menu ul li ul li ul li a, #menu ul li ul li ul li a:link, #menu ul li.akt ul li.akt ul li a, #menu ul li.akt ul li.akt ul li a:link {border:none; padding:0.15em 0em 0.25em 30px; font-size:100%;}
	#menu ul li.akt ul li.akt ul li a::before {content: "";}
	
body.slider-bild-animation .bannerbild .slides img {animation:none;}
.bannerbild {border-radius:15px 15px 0 15px;}
.bannerbild li .message-circle {width:180px; height:180px; left:5%; bottom:3%; padding:1.5%; animation:slide-circle-1040px 0.5s 1;}
.bannerbild li .message-circle h2 {font-size:120%;}
.bannerbild li p.mehrlink a, .bannerbild li p.mehrlink a:link {font-size:90%;}

.box.uebersicht {width:250px;}
.box.uebersicht.icon-zielflaeche p.mehrlink a:link::after {left:54.0%; top:16px; width:208px; height:208px;}
.box.uebersicht figure {border:7px solid #a2c748;}
.box.alsListe figure {width:80%;}

.bannerbild.icon-zielflaeche::after {width:200px; height:200px; margin-left:-100px; bottom:-37px;}
.alsListe-klassisch {margin:0 10%;}
#popupwindow {width:92%; left:4%; margin-left:0;}

.listen-cont.logos .muss-logo {width:250px; padding:1%;}

#footer-illu {max-height:100px;} 
}
@media screen and (max-width: 900px)  {
#menu {max-width:55%;}
.box.uebersicht {width:200px;}
.box.uebersicht.icon-zielflaeche p.mehrlink a:link::after {left:55.0%; width:160px; height:160px;}
.fancybox-button--left, .fancybox-button--right {width:74px; }
.fancybox-placeholder::before {top:-15px; left:-15px; right:-15px; bottom:-15px;}
.fancybox-placeholder {width:96%; margin:0 auto;}

.listen-cont.logos {display:-webkit-flex; display:flex; -webkit-flex-flow:column; flex-flow:column; }
.listen-cont.logos .muss-logo {width:250px; padding:1%;}
}
@media screen and (max-width: 800px)  {

.listen-cont {margin:15px auto;}
body.service .listen-cont, .listen-cont {padding-top:0;}
.alsDetail {padding:0 2%;}
.alsListe-klassisch {margin:0 0 0 0;}
.box {margin-bottom:10px;}
.box.ein-drittel-breite, .box.zwei-drittel-breite, .box.halbe-breite {width:48.75%;}
.box.video.ein-drittel-breite, .box.video.zwei-drittel-breite, .box.video.halbe-breite {width:100%;}
.box figure, .box.zwei-drittel-breite figure, .box.halbe-breite figure {width:90%;}	
.box.zwei-drittel-breite h2, .box.halbe-breite h2 {padding:7px;}
.box.alsListe {width:47%; margin:0 5px 10px 5px;}

.faq-wrapper {padding:10px; }

#footer-menu {font-size:90%;}
.footer-logo {width:50%; padding:3%;}
}
@media screen and (max-width: 750px)  {
#popupwindow-innen #icon-zielart {width:50px; height:50px; border:2px solid #a2c748; border-radius:50%; }
}
@media screen and (max-width: 640px)  {
#footer-menu li a, #footer-menu li a:link {padding:10px;}
}
@media screen and (max-width: 600px)  {
body {font-size:105%; }

#header-oben {height:80px;}
#header-mitte, #icon-wrapper {height:70px;}
#header-oben figure {width:300px;}
#menu-smart {top:5px; margin-right:-20px;}
body.home #menu-smart {top:85px;}
#menu {min-width:320px; padding-top:100px; }
body.home #menu {padding:170px 0 0 0;}
#search-field {top:80px;}

#logo, body.service #logo, body.facts #logo {width:70px; height:70px; top:5px; left:5px;}
.logo-eu {left:0px; top:80px; width:35px; height:35px;}

#content-wrapper {width:94%;}

.bannerbild {border-radius:15px 0 15px 15px; }
.bannerbild li .message-circle {width:150px; height:150px; left:5px; bottom:5px; padding:5px; animation:slide-circle-600px 0.5s 1;}
.bannerbild li .message-circle h2 {font-size:100%;}
.bannerbild li p.mehrlink a, .bannerbild li p.mehrlink a:link {font-size:80%; }

.bannerbild li .figure-copyright {font-size:100%; bottom:97%;}

.bannerbild li figcaption {position:absolute; z-index:300; right:5px; bottom:93%; top:5px;}
.bannerbild.icon-zielflaeche::after {width:150px; height:150px; left:35%; margin-left:0; bottom:-28px;}

.alsDetail {padding:0; margin-bottom:10px;}
.alsListe, .alsListe-klassich {margin:0; }

.alsListe-klassisch figure {width:45%;}
.alsListe-klassisch .listentext {margin-left:47%; width:53%; }

h1 {font-size:180%;}
h2 {font-size:140%;}

#popupwindow-innen .icon-zielart {width:50px; height:50px; left:5px;}
.form-field {padding:10px; }
.beitrag table, .beitrag thead, .beitrag tbody, .beitrag tfoot, .beitrag th, .beitrag td, .beitrag tr, #angaben-cont table, #angaben-cont tbody, #angaben-cont tr, #angaben-cont td, #angaben-cont th {display:block; width: 100%;}
.beitrag th {padding:3px 5px 3px 5px; }
.beitrag thead tr {position: absolute; top: -9999px; left: -9999px; padding-bottom:10px;}
.beitrag td {position:relative; padding:5px 0 0 0; }
.beitrag td:first-child { width:95%; text-align:left; padding:0; margin-bottom:0.0em;}
.submit, input, select, textarea {width:100%;}

.fancybox-image, .fancybox-spaceball {width:86%; height:86%; top:7%; left:7%;}
.fancybox-caption {padding: 10px 0 10px 0; font-size: 100%; line-height:100%;}
.flex-direction-nav {display:none;}

#footer-illu {max-height:70px;} 
}
@media screen and (max-width: 550px)  {
.beitrag figure, .beitrag figure.hochformat {width:100%; float:none; clear:both;}
.alsListe-klassisch figure {width:100%; float:none;}
.alsListe-klassisch .listentext {margin-left:0; width:100%; }

.box {margin-bottom:15px;}
.box.ein-drittel-breite, .box.zwei-drittel-breite, .box.halbe-breite {width:100%;}
.box figure, .box.zwei-drittel-breite figure, .box.halbe-breite figure {width:60%;}
.box.galerie figure {width:100%;}

}
@media screen and (max-width: 500px)  {

#menu, #menu-wrapper {max-width:100%; border-right:none; }

#icon-wrapper {-webkit-justify-content:center; justify-content:center;  }

#menu-smart {right:0%; margin-right:15px;}
#menu-cont {-webkit-align-items:flex-end; align-items:flex-end;}

.beitrag .bild.hochformat, .beitrag .bild.links, .beitrag .bild.rechts, .js-faq-content figure {width:100%; float:none; margin:0 0 7px 0;}
.bannerbild li .figure-copyright {bottom:90%;}

.box.uebersicht {width:270px;}
.box.uebersicht.icon-zielflaeche p.mehrlink a:link::after {left:54.5%; top:20px; width:221px; height:221px;}
.box.uebersicht figure {border:10px solid #a2c748;}
.box.alsListe {width:100%; margin:0 0 10px 0;}
.box.alsListe figure {width:60%; }
.box.galerie {width:46%;}

.footer-logo {width:80%; padding:3%;}

.flex-control-nav {bottom:1px;}
.flex-control-paging li a {width:15px; height:15px;}
.flex-control-paging li a:hover, .flex-control-paging li a.flex-active {width:18px; height:18px;}
}
@media screen and (max-width: 430px)  {
.box.galerie .figure-copyright {font-size:65%;}
}
@media screen and (max-width: 400px)  {
.bannerbild li .figure-copyright {bottom:87%;}
.box figure, .box.zwei-drittel-breite figure, .box.halbe-breite figure {width:80%;}
}
@media screen and (max-width: 360px)  {
#menu-smart {margin-right:5px;}
#icon-wrapper {padding-left:7px;}
#search-toggle, .sprachwahl {margin:0 1px;}
#search-field {width:98%; right:1%;}

#menu ul li a, #menu ul li a:link {padding:0.3em 10px 0.3em 0; }
#menu ul li a.menu-pfeil::after, #menu ul li a.menu-but::after, #menu ul li ul li a.menu-pfeil-sub::after, #menu ul li ul li a.menu-but-sub::after {top:10px; }

.bannerbild li .message-circle {width:130px; height:130px; bottom:23px; border:1px solid #fff; box-shadow:0 3px 7px 3px rgba(0,0,0,0.6);}
.bannerbild li .message-circle h2 {font-size:90%;}

.box.alsListe figure {width:70%; }
}
@media print {
body, a:after {background:#fff; color:#000; font: normal 0.85em/1.4em Open Sans, Sans-Serif, Calibri, Arial, Verdana, Helvetica; }
header {margin-bottom:50px; }
a:after {content:" (" attr(href) ") "; color:#008bcb;}
#anker a::after, menu a::after, #logo figure a::after, .box p.mehrlink a::after, .box h2 a::after, .beitrag figure a::after, .icon-zielart a::after {display:none;}
h1, h2, h3, .box h2 {font-family: 'Arial Narrow', Calibri, Arial, Verdana, sans-serif; }
h1 {font-size:24pt;}
h1, h2, h3 {page-break-after:avoid;}
table, figure, .box.uebersicht, .bodydiv.info-container, .icon-zielart {page-break-inside:avoid;}
#menu-smart, #icon-wrapper, #footer-social-wrapper, #footer-menu, #pfeil-top {display:none;}
.bannerbild li .message-circle {width:150px; height:150px; left:1%;}
.bannerbild.icon-zielflaeche::after {width:150px; height:150px; margin-left:-75px; bottom:-30px;}
.box.uebersicht {width:195px;}
.listen-cont {width:100%; margin:0; padding:0;}
}

span.editLink_user {
	font-size:13px;
	font-weight:normal;
	text-decoration:none;
	color:#F00;
}
a.editLink_user:before {
	content:none;	
}
img.editLink_user {
	width:auto;
}
.vh {display:none;}