/*******************************************************/
/* definitions                                         */
/* Z-index levels                                      */
/* 0 - content delivered in iframe                     */
/* 1 - Header and Footer                               */
/* 2 - unused                                          */
/* 3 - wechselrahmen for zooming images                */
/* 4 - hamburger Menu                                  */
/*******************************************************/




/*******************************************************/
/* global settings                                     */
/*******************************************************/
@charset "UTF-8";

:root {
  --css-version: "14";
  --logo-green: #257126;
  --logo-blue: #009CB3;
  --header-grey: #e7e7e7;
  --border-blue: #00BBD7;
  --border-gap: #004E59;
  --link-hover: #eb6f4a;
  --link-blue: #0000ee;
}


html {
  /*height: 100%;*/				/* sticky footer */
  scroll-padding-top: 200px; /* height of sticky header */
  border: 0px solid red;
}


/* we leave the 8px body margin and account for it apropriately in media queries /*
/*
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*/
body {
  /*z-index: 0;*/
  min-height: 98.5vh;	  /* sticky footer, no scrollbar if main and footer fit in viewport */
  margin-bottom: 2px;	  /* sticky footer, footer lines up with bottom of viewport */
  margin-top: 4px;
  display: flex;          /* sticky footer, see flex property in <main> and <footer> elements */
  flex-direction: column; /* sticky footer */
  font-family: Trebuchet MS;
  font-style: normal;
  font-size: 16px;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
   overflow-y: scroll;
   background-image: url('img/logo-wallpaper.jpg');
   background-repeat: repeat;
   background-position: 0px 100px;
   background-size:100%; 
   background-attachment: fixed;
   border: 0px solid blue;
}

/* versioncheck */
body div.showversions {
	line-height: 8px;
	font-size: 10px;
	/* margin-bottom: -10px; */
}
body span.cssversion:after {
	content: var(--css-version);
}

/* larger text */
.Ltxt {
   font-size: 1.10em;
}

h1 {
	margin-top: 6px;
}

/*******************************************************/
/* drop down hamburger menu                            */
/* surrounding div.hmenu/menuframe is adjusted by      */
/* js function resizeMenu to not unnecesarily cover    */
/* menu and content below.                             */
/*******************************************************/
.menu-icon {
    display: inline-block;
    float: right;
    width: 60px; 
    height: 60px;
    border:0px #00BBD7 /*var(--border-blue)*/ solid;
    text-align: center;
    padding-top: 5px;
    color: #000000;
	cursor: pointer;
}

.menu-icon:before{
	display: inline-block;
	position: relative;
	height: 60px;
	top: 2px;
	left: -2px;
	background-image: url('img/ham.svg');
    background-size: 100% 100%;
    width: 44px; 
    height: 55px;
	content:" ";
    /*content:"\2630";*/ /* ☰ */
    font-size: 3.0em;
    font-style: normal;
	border: 0px solid red;
}

#checkbox:checked~nav.ham .menu-icon:before{
	background-image: none;
	top: 0px;
    content:"\2A09"; /* ╳ */
        /* possible diagonal cross symbols are:
           U+2573  ╳
           U+2715  ✕
           U+2A09  ⨉
           All look quite different on different systems and browsers          
        */
    font-size: 3.0em;
    font-style: normal;
}

nav.ham {
   position: fixed;
   display: block;
   z-index: 4;
   background:none transparent;
   top: 1px;
   right: 1vw;
   height: 65px;
   width: 65px;
   margin: 0px;
   padding: 0px;
   border: 0px solid red;
   overflow-Y:hidden;
   overflow-X:hidden;
}

#ham_menu {
    display: block;
    list-style-type: none;
    max-height: 0px;
    max-width: 0px;
    height: 1px;
    width: 1px;
    border: 0px solid black;
    overflow-x: hidden;
    overflow-y: hidden;
    text-align: center;
    /*transition: all 0.1s;*/
}

#ham_menu p {
	margin-top: 0em;
	margin-bottom: 0em;
}

#ham_menu p a {
    display: inline-block;
    width: 180px;
    padding: 9px 0px 11px 0px;
    /* Add your custom styles below to change appearance of links */
    color: #FFFFFF;
    font-size: 1.3em;
    font-style: normal;
    text-decoration: none;
    letter-spacing: 0.05em;
}

hr.hmenu{
  border: 1px #257126 /*var(--logo-green)*/ solid;
  height: 0px;
  width: 50%;
  margin: 0 auto;
}


#checkbox {
    display: none;
}

#checkbox:checked~nav.ham {
   height: 410px;
   width: 280px;
}

#checkbox:checked~nav.ham #ham_menu{
    max-height: 390px; /*give sufficient height for all items, match size with above rule */
    max-width: none;
    height: 80vh; /* fits ul to viewport, in case of overflow scrollbar appears */
    width: 200px;
    overflow-y: auto;
    overscroll-behavior-y: contain; 
    background-color: #009CB3 /*var(--logo-blue)*/;
    border:6px #257126 /*var(--logo-green)*/ ridge;
    border-radius: 16px;
    /*overide list defaults for margin and padding*/
    margin: 0;
    padding:5px 0px 0px 0px;
    opacity: 0.9;
    transition: all 0.5s;
}


#ham_menu p a:hover, span.menu-icon:hover {
    color: #eb6f4a; /* var(--link-hover) */
}

/*******************************************************/
/* header hiding  and noscript warning                 */
/*******************************************************/
header {
   height: 200px;
   position: fixed;
   z-index: 1;
   top:0;
   right:0;
   left:0;
   background: url('img/header-bg.png') left top no-repeat; 
   background-size: auto 100%;
   overflow-Y:hidden;
   overflow-X:hidden;
   font-size: 16px;
   transition: transform .25s .1s ease-in-out;
}

header :is(table, th, td) { 
   border-collapse: collapse;
   border: 0px solid green; /* set to 1px for testing */
}

nav.headmenu {
  display: inline-block;
}

/* Button to hide header when click on transparent area */
header .hidebutton {
   /*display: flex;*/
   position: absolute;
   height: 28%;
   width: 100%;
   bottom:0px;
   right:0px;
   left:00px;
   background: transparent;
   box-sizing: border-box;
   border: 0px solid red;
}


/* spacing and positioning of menu buttons */
nav#headmenu a{margin: 1px 7px 1px 3px;}

span.menubutton, input.menubutton {
  box-sizing: border-box;
  display: inline-block;
  width: auto; 
  height: 25px; 
  background: #009CB3 /*var(--logo-blue)*/;
  border-radius: 6px;
  border:4px #00BBD7 /*var(--border-blue)*/ outset;
  color: white;
  font-size:16px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 12px;
  padding: 2px 2px 0px 2px;
}

a span.menubutton:hover, input.menubutton:hover {
    color: #eb6f4a; /* var(--link-hover) */
}




/*******************************************************/
/* styles for content pages                            */
/*******************************************************/
main {
   flex: 1 0 auto; /* for sticky footer, <main> may grow and with fixed size <footer> completely fill container (body)*/
   max-width: 800px;
   width: 100%;
   margin: 192px auto 20px auto; /* top margin gives space for header layered above */
   padding: 0;
   box-sizing: border-box;
   border: 0px solid red;
   animation: fadeIn 2s forwards; /* when switching to a new page */
}



/* when switching content pages will fade in */
@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

main a:link{color: #0000ee; font-style: italic; font-weight: 400; text-decoration: none}
main a:visited{color: #0000ee; font-style: italic; font-weight: 400; text-decoration: none}
main a:hover{color: #0000ee; font-style: italic; font-weight: 400; text-decoration: none}
main a:active{color: #0000ee; font-style: italic; font-weight: 400; text-decoration: none}

.inlineLink {
  font-weight: 400;
  font-size: 0.9em;
}


/*
U+2192	→	e2 86 92
U+21D2	⇒	e2 87 92
U+21DD	⇝	e2 87 9d
U+21E8	⇨	e2 87 a8
U+25B6	▶	e2 96 b6
U+25BA	►	e2 96 ba
U+2BA9	⮩	e2 ae a9
U+27A5	➥	e2 9e a5
U+279E	➞	e2 9e 9e
U+2794	➔	e2 9e 94	
U+27A8	➨	e2 9e a8
U+27A0	➠	e2 9e a0
*/
.inlineLink::before {
  content: "\27A5\00a0";
  color: #0000ee;
  font-style: normal;
  /*font-weight: 200;*/
  font-size: 1em;
}

a.target {
	background-color: transparent;
}

.contactFormLink {
	display: inline-block;
}


/* the <h4> and <ul> default margins add up to a too big spacing (über-uns content)*/
h4+ul {
	margin-top: -0.8em;
}

.infoIcon {
	display: inline-block;
	height: 20px;
	width: 20px;
	font-size: 16px;
	padding-bottom: 1px;
	font-weight: 700;
	color: white;
	text-align: center;
	border: 0px solid black;
	border-radius: 10px;
	background: #257126;
	cursor: pointer;
}

div.notice {
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 50%;
  /* max-width: 40em; */
  min-width: 300px;
  margin: 25px auto 25px auto;
  padding: 0.6em;
  background: lightgoldenrodyellow;
  border-radius: 9px;
  border:3px red outset;
  color: red;
  font-size:14px;
  line-height: 14px;
  font-weight: normal;
  text-align: left;
  
}

/* hide backlink to Kontaktformular, only shown when coming from Kontaktformular with POST method */
.dsBackLink {
	display:none;
}


/* starter page image formatting with image autosizing to specified width*/
body div.imgcontainer {
	display: block;
	box-sizing: border-box;
	border-radius: 6px;
	margin-right: 20px;
	overflow: hidden;
	width: 150px;
	box-shadow: 10px 10px 10px gray;
}

body img.imgcontainer {
	display: block; 
	height: auto; 
	width: 100%;
}


/* styles for Kontakt page */

/*used in sharing options for copy to clipboard*/
textarea.homepageLink {  
	width: 15em;
	height: 1.1em;
	border: 0px solid #cccccc;
    margin: 0em 0em 0.0em 0em;
	padding: 0em 0em 0.2em 0em;
	font-family: Trebuchet MS;
	/* line-height: 20px; */
	font-size: 18px;
	color: #0000ee; 
	font-style: italic; 
	font-weight: 400; 
	text-decoration: none;
	resize: none;
	overflow: hidden;
	cursor: pointer;
}

/* formatting of download lists */

/* the child <p> elements of this <div> will have hanging indents */
div.downloadlist {
	position: absolut;
	margin-bottom: 1em;
	margin-top: 0.5em;
	padding-left: 1.6em;	/* pad the whole paragraph on the left */
	text-indent: -0.4em; 	/* shift first line of each paragraph to the left */
	border: 0px solid green;				 
}

div.downloadlist p{
  margin-top: 0em;
  margin-bottom: 0.2em;
}

span.file,a.file {
  display: inline-block;
  font-size:1em;
  font-weight: normal;
  /*white-space: pre;*/
}

/* in conjunction with the negativ indent above this will appear like a list marker */
a.file::before {
  display: inline-block;
  background-image: url('img/download.svg');
  background-size: 100% 100%;
  width: 24px; 
  height: 24px;
  /*content: "\2B73   ";*/
  content: "";
  vertical-align: middle;
  margin-right: 0.5em;
  border: 0px solid green;  
}

a.pdfdownload {
  display: inline-block;
  margin-left: 16px;
  font-weight: 400;
  font-size: 1em;
  white-space: nowrap;
}

a.pdfdownload::before {
  /*content: url('img/pdf32.png');*/
  display: inline-block;
  background-image: url('img/pdf32.png');
  background-size: 100% 100%;
  width: 32px; 
  height: 32px;
  content: "";
  margin-right: 4px;
  vertical-align: middle;
  border: 0px solid green;
}

a.docdownload {
  display: inline-block;
  margin-left: 16px;
  font-weight: 400;
  font-size: 1em;
  white-space: nowrap;
}

a.docdownload::before {
  /*content: url('img/doc32.png');*/
  display: inline-block;
  background-image: url('img/doc32.png');
  background-size: 100% 100%;
  width: 32px; 
  height: 32px;
  content: "";
  margin-right: 4px;
  vertical-align: middle;
  border: 0px solid green;
}

span.fileattr {
  font-size:0.8em;
  font-weight: lighter;
}

p.downloadNotice {
	display: block;
	margin: 0em 0em 0em -0.4em;
	padding-top: 0.4em;
	border: 0px solid green;
}

img.shareicon {
	width: 35px;
	height: 35px;
}




/*******************************************************/
/* footer                                               */
/*******************************************************/
footer.contentFooter {
	display: block;
	flex-shrink: 0; /*sticky footer may schrink*/
	max-width: 800px;
   position: static;
   width: 100%;
   margin: 0px auto 0px auto;
   padding: 0;
   box-sizing: border-box;
   border-radius: 20px;
   border: 0px solid red;
   background: url('img/footer.jpg') center top no-repeat;
   background-size: 100% 100%; 
   /* --logo-green: #257126; --logo-blue: #009CB3;  --header-grey: #e7e7e7; */
   background-color: #009CB3;
   color: black;
   justify-content: center;
   align-items: center;
   font-size: 14px;
}
footer.contentFooter nav a{margin: 0em; font-weight: 400;}
footer.contentFooter nav a:link{color: black; text-decoration: none}
footer.contentFooter nav a:visited{color: black; text-decoration: none}
footer.contentFooter nav a:hover{color: black; text-decoration: none}
footer.contentFooter nav a:active{color: black; text-decoration: none}
footer.contentFooter nav a::before {
  content: "\27A5  ";
  color: black;
  /*font-weight: 200;*/
  font-size: 1em;
}

footer.contentFooter div.infobox {
	display: block;
	box-sizing: border-box; 
	margin: 10px 10px 2px 10px; 
	border: 0px solid red;
}

footer.contentFooter div.infobox h3{
	margin-top: 0em;
	margin-bottom: 0.2em;
}


/*******************************************************/
/* rulers                                             */
/*******************************************************/

hr.sep {
/*
  border-top: 6px var(--logo-green) ridge;
  border-bottom: 1px white none;
  border-left: 1px white none;
  border-right 1px white none;
*/
  border: 1px #257126 /*var(--logo-green)*/ solid;
  border-radius: 1px;
  height: 2px;
}


.endofpage{
   display: block;
   overflow: hidden;
   border: 0px solid black;
   padding: 0;
   background-color: transparent;
   background-image: url("img/endofpage.png");
   background-repeat: no-repeat;   
   background-origin: padding-box;
   background-position: left top;
   background-size: 100% 100%;
   /* width and height should match aspect ratio of image */
   width: 20vw;
   height: 4vw;
   margin: 20px auto 10px auto;
}

/*******************************************************/
/* lists with (number)                        */
/*******************************************************/
ol.blist {
counter-reset: enumeration;
display: table;
margin: 0em;
padding: 0em;
}

ol.blist>li {
list-style: none;
counter-increment: enumeration;
display: table-row;
margin: 0em;
padding: 0em;
}

ol.blist>li::before {
content: "(" counter(enumeration) ")";
display: table-cell;
text-align: right;
padding-right: 0.5em;
}

/*******************************************************/
/* info ancher tags,                                   */
/* passes headroom for each page when sizing iframe    */
/* used by function autoResize                         */
/*******************************************************/
a.info {
   display: none;
}

/*******************************************************/
/* picture gallery with zooming                        */
/*******************************************************/

/* galleryPos is container for galleryImg to allow atomatic scaling of image 
   in this case by height and maintaining aspect ratio. 
*/
.flexElement{
   padding: 4px;
}

.galleryPos{
   display: block;
   overflow: hidden;
   height: 100px;
   box-shadow: 6px 6px 6px gray;
   margin: 4px;
}

.galleryImg {
   display: block;
   height: 100%;
   width: auto;
   cursor: pointer;
}

/***********************************************************************/
/* Popup system formatting                                             */
/***********************************************************************/

/* The wiki Modal target */
a.explain {
  display: inline-box;
  cursor: pointer;
  color: #0000ee;
  font-style: italic;
}

 /* The wiki Modal */
.txt-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 6; /* Sit on top */
  /* left and top are set by javascript
  left: 0px;
  top: 0px;
  */
  max-width: 90vw; /* stay inside screen width */
  width: 350px; /* limit width on wide screens*/
  overflow: hidden; /* scroll in child */
  background-color: rgb(255,255,255);
  border: 1px solid black;
}

/* wiki modal flex wrapper to allow scrolling in body */
.modal-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	max-height: 98vh;
}

/* wiki Modal header */
.modal-header {
  background-color: silver;
  width: 100%;
  height: 20px;
  box-sizing: border-box;
  border: 0px solid red;
}
.modal-hdrtxt {
	text-align: center;
	font-size: 16px;
}
/* wiki Modal body */
.modal-body {
	font-size: 0.9em;
	padding: 2px 6px 2px 6px;
	overflow-y: auto;
	/*white-space: pre-wrap;*/
}


/* the feedback target */
span.feedback {
  display: inline-box;
  cursor: pointer;
  /*color: #0000ee;*/
  font-style: italic;
}

/* The feedback Modal */
.fb-modal {
  display: none; /* Hidden by default for visibility: inline-block*/
  position: fixed; /* Stay in place */
  z-index: 6; /* Sit on top */
  /* left and top are set by javascript
  left: 0px;
  top: 0px;
  */
  padding: 1px 4px 1px 4px;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(200,200,200,0.9); /* Black w/ opacity */
  border: 1px solid black;
}

 /* The image Modal */
.img-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 6; /* Sit on top */
  /* following is set by javascript
  left: 0px;
  top: 0px;
  width: 0px;
  height: 0px;
  */
  background-image: url("none.gif");
  opacity: 1.0;
  background-size: cover;
  background-color: rgb(128,128,128); /* Fallback color */
   border:4px #257126 /*var(--logo-green)*/ outset;
  /*box-sizing: border-box;*/
   overflow-Y:hidden;
   overflow-X:hidden;
   cursor: pointer;
   transition: all 0.6s ease-in-out, 0.5s;
   /*transition: left 0.5s, height 0.5s, width 0.5s, 0.1s ease-in-out;*/
}

/* The Close Button */
.closeBtn {
  display: inline-block;
  position: relativ;
  margin-top: -8px;
  color: gray;
  mix-blend-mode: difference;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.closeBtn:hover,
.closeBtn:focus {
  color: green;
  text-decoration: none;
  cursor: pointer;
}


/*******************************************************/
/* screen size and functional adaption                 */
/*******************************************************/

div.starternotice {
  display: none;
}

/* hide menu on narrow screens and add notice in index page 
   adapt max-width to actual size of menu to avoid wrapping */
@media (max-width: 670px) {
  nav.headmenu {
    display: none;
  }
}
@media (max-width: 670px) {
  div.starternotice {
    display: block;
  }
}



/* reduce logo and title size if viewport width below 600px */
@media (max-width: 600px) {
  header {
    font-size: 14px;
  }
}

/* viewport width and or height below 400px */
@media (max-width: 400px), (max-height: 400px) {
  header {
    font-size: 11px;
  }
  h1 {
    font-size: 1.5rem;
  }
  h2 {
    font-size: 1.3rem;
  }
}

/* viewport width below 400px */
@media (max-width: 400px) {
  header {
    background: url('img/header-bg_mobile.png') left top no-repeat;
    background-size: auto 100%;
  }
  header {
   height: 150px;
  }
  main {
    margin-top: 150px;
  }
  html {
  scroll-padding-top: 150px; /* height of sticky header */
  }
}

/* viewport height below 400px */
@media (max-height: 400px) {

  header {
   height: 150px;
  }
  main {
    margin-top: 142px;
    margin-bottom: 10px;
  }
  html {
    scroll-padding-top: 150px; /* height of sticky header */
  }
}


/* adapt to javasript enabled/disabled*/

div.noscriptmessage {
   display: none; /* will be changed to inline-block if noscript*/
   font-size: 0.7em;
   line-height: 0.9em;
   color: #ff0000;
}

.hideOnNoscript {
	display: block; /* will be changed to none if noscript*/
}