/* header.css: Tulln2016 */

header { line-height: 1; margin: 3em 0 0 0; } /* was: 5em */
header h1, header .logotop { /*_float: left;*/
  display: inline-block;
  margin: 0; padding: 0; margin-top: -1.9em; /* was: -2.6em */
}
header h1 .logo img {
  box-sizing: content-box;
  width: 4.875em;/*9.75rem; / 164px;*/
  height: 1.6875em;/* 3.375rem; - height needed by IE+Edge ??? XXX */
  padding: .8em 0.5em 0.3em 0.35em; /*was: 1em 0.5em 0.8em 0.35em;*/
}
header .green {
  padding: 0;
  /* overflow-x: hidden; // XXX beeinflusst y => leider nein
  /* ^- added js2016-09-15 (teilw. Grund fuer horz. Scrollbalken), wichtig nur horizontal */
	overflow-y: visible;
	box-shadow: 0px 4px 6px 2px #000;
	-webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
	position: relative;
	z-index: 999;
}
/*header { overflow: hidden; }*/

header a.logo:focus, header a.logo:focus img { /*background-color: #fef;*/ outline: 0 none; }


.mmenu {
	width: 9em;
}
header .green nav .mitte {
	width: 23em;
	padding: 0;
	margin: 0;
	text-align: right;
}
.tab-erleben, 
.tab-wirtschaft {
	width: 14em;
	padding: 0 1px;
	box-sizing: border-box;
}
.tab-erleben > a, 
.tab-wirtschaft > a {
	width: 100%;
}
@media (max-width: 42em) {
	.mmenu {
		width: auto;
	}
	header .green nav .mitte {
		width: 100%;
		padding-left: 1em; 
		margin: 0 -1em 0 -1em;
		text-align: left;
	}
}


.mmenu { display: inline-block; }
.mmenu-btn {
  font-size: 1em;/*1rem;*/
  display: inline-block;
  text-transform: uppercase;
  text-decoration: none;
}
.mmenu-btn img.hamburger {
  background-color: white;
  width: 2em;/*32px;outer=48px;*/ height: 1.625em; /*~26px, needed by IE & Edge TODO. find out why&when XXX */
  padding: .5em;/*8px;*/ margin: 0;
}
/*.mmenu-btn img.hamburger2 {
  background-color: #93BF20;
  color: white;
  width: 2.5em;
  height: 2.125em;
  border: .25em solid white;
  padding: 0; margin: 0;
}*/
.mmenu-btn img.cheeseburger {
  background-color: #93BF20;
  color: white;
  width: 2em;/*32px;outer=48px;*/ height: 1.625em; /*~26px, needed by IE & Edge TODO. find out why&when XXX */
  border: .5em solid white;
  padding: 0;/*8px;*/ margin: 0;
}

.mmenu-btn > span {
   font-size: 1.1em;/*was 1.2em*/ color: white;
   text-align: left; padding-right: 0.5em;
   display: inline-block; box-sizing: border-box;
   /*width: 6em;*/
   width: 4em;
   /*margin-left: -6em;*/
   margin-left: .5em;
   font-weight: bold;
}

.mmenu-btn > * { vertical-align: middle; }

.mmenu-btn:focus { outline: 0 none; }
.mmenu-btn:focus img.cheeseburger {
  /*background-color: #c756a0;*//*red;*/
  /*-webkit-animation: bgcolor-mulberry2green 5s 1 forwards;
  animation: bgcolor-mulberry2green 5s 1 forwards;*/
}
.mmenu-btn:focus:not(:-moz-focusring) img.cheeseburger { background-color: #93BF20; animation: none; }

@media (max-width: 74em) { /* 62+12 */
   .mmenu-btn > span { text-align: left; /*_float: right;*/ /*margin-left: 3em;*/ /*margin-right: -9em;*/ margin-left: 1em; margin-right:-5em;
   /*_color: yellow;*/ position: relative; z-index: 1;
	}
  .mmenu + * { margin-left: 4em; } /* place for the following sibling (=MySitu: => was: header .green .mitte) */
}
@media (max-width: 25em) {
  .mmenu-btn > span { display: none; }
}


/* Meine Situation js2016-08-18 */
header .green .mitte { display: inline-block; padding-left: 1em; vertical-align: middle; }
select#mysituation {
  max-width: 15em; height: 2.2222em; /* 2/.9[font-size]=2.222222 */
  border: none;
  /*_border-left: .3em solid transparent;*/
  border-radius: 0;
  font-family: inherit;
  font-size: .9em; line-height: 1.1;
  margin: 0; padding: 0; padding-left: .3em;
  list-style-type: none;
  outline: 0 none;
  /*outline: 1px none;*/
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  /*outline-offset: -1em;*/
  padding-bottom: .1em;
  text-indent: .25em;
}
@-moz-document url-prefix() {
  select#mysituation { padding-left: 0; }
}
@media screen and (min-width:0\0) {
  /* IE bugs: so simpler view (edge&others fine, other solution for safari&webkit) */
  select#mysituation { width: 15em; }
}

/*select#mysituation option { outline: 1px none #fef; }*/
/*select#mysituation::-moz-focus-inner { padding: 0; border: 0 none; outline: 1px none #fef; }*/
select#mysituation option {
  background-color: white;
  border: 0 none;
  border-top: .1em solid transparent;
  font-size: 1.2em; /* hoehere Fontgroesse explizit gewuenscht von Rikki 2016-10-03 */
}
select#mysituation option:checked { font-weight: bold; }
select#mysituation:focus {
  background-color: #fef;
  outline: 1px none;
}
select#mysituation:focus:not(:-moz-focusring) { background-color: white; }

.mysituation {
  display: -webkit-inline-flex; display: inline-flex;
  -webkit-align-items: center;
  align-items: center;
  position: relative;    /* Positionsanker */
  /*_display: inline-block; // wegen voller Hoehe, für ::after
    _overflow: hidden;      // bfc wegen float
    _white-space: nowrap;*/
    vertical-align: top;
    height: 2em;
    margin: .25em 0;
}
.mysituation .label-text {
  -webkit-order: -1; order: -1; /*_float: left;*/
  line-height: 1.73em; /* 2*.9=1.8, Rundungsfehler? besser kleiner als zu gross */

  padding-right: .5em;
  text-transform: uppercase; /* 2016-09-12 */
  font-size: 1.1em; /* 2016-09-12 */
}
.mysituation .go {
	position: relative; z-index: -3;
	font-size: .9em; line-height: 2em;
	height: 2em; width: 2em;
	background-color: green;
	-webkit-appearance: none; -moz-appearance: none; appearance: none;
	text-align: center;
	vertical-align: middle;
	font-family: inherit;
	font-weight: bold;
	color: white;
	border-radius: 0; border: none;
	display: none; /*inline-block;*/
	padding: 0; margin: 0 -2em 0 0; /* so right: 0 is ... */
}
._mysituation::after {
  /*content: "v";_font-size: 60%;*/
  content: url('../Images/symbols/pfeil_unten.svg');
  text-align: center;
  display: inline-block;
  vertical-align: middle; line-height: 1.8em;
  position: absolute; z-index: 2;
  margin: 0; padding: 0; /*0 .5em;*/
  right: 0; top: 0; bottom: 0;
  width: 1.8em;
  background-color: #ccc;
  color: white;

  pointer-events: none;
}


/* SELECT ARROW CHANGE
/*#mysituation:focus + .mysituation .down::after {
	-webkit-transform: scaleY(-1); transform: scaleY(-1);
}*/


.mysituation .down::before {
	content: '';
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	height: 2em;
	width: 2em;
	background-color: #ccc;
	pointer-events: none;
}
.mysituation .down::after {
	content: url('../Images/symbols/pfeil-unten_inv3ccc.svg'); /*pfeil_unten_inv_t2ccc/-size.svg*/
	display: block;
	line-height: 0; /* box exakt bild */
	vertical-align: middle;
	position: absolute;
	z-index: 2;
	margin: 0;
	padding: 0;
	top: .6em;
	right: .2em;/*.4em*/ 
	width: 1.6em; /*22/16*/
	height: 0.875em; /* für edge? */
	background-color: white;
	background-clip: content-box;
	pointer-events: none;
}

select#mysituation:focus ~ .down::after {
  /*background-color: #c756a0;*//*red;*/
  /*-webkit-animation: bgcolor-mulberry2white 5s 1 forwards;
  animation: bgcolor-mulberry2white 5s 1 forwards;*/
}
select#mysituation:focus ~ .go, .mysituation .go:focus { display: inline-block; z-index: 3; }
.mysituation .go:focus {
  /*margin: 0 0 0 -2em;*/
  background-color: #c756a0;/*red;*/
  outline: 0 none;
}
.mysituation .go::-moz-focus-inner { border: none; padding: 0; }

/*header .mitte label > * { vertical-align: middle; }*/
.mysituation > * { vertical-align: middle; }

@media (max-width: 50em) and (min-width: 42em) {
	header .green nav .mitte {
		width: 14em;
	}
}

@media (max-width: 50em) and (min-width: 42em), /* see "double line" below*/
       (max-width: 27em) {
  /* 50em was: 47em, chgd js2016-09-16, wegen GROSSSCHREIBUNG */
  /* extended for "double line" js2016-09-16 */
  /*header .mitte label > span:first-child { display: none; }*/
  .mysituation .label-text {
    position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 1;
    color: #93BF20; background-color: white;
    line-height: 1.8em; padding-left: .3em; margin-right: 1.8em;
    pointer-events: none;
  }
  .mysituation:focus .label-text, .label-text:focus,
  .mysituation select:focus ~ .label-text,
  .mysituation .go:focus + .label-text { display: none; }
  _select#mysituation > option:first-child { display: none; } /* As Preselect, but not as Option */
}
@media (max-width: 27em) { .mysituation .label-text { color: #999; } } /* sync with prev */
/*@media (max-width: 42em) {
  header .green .mitte { display: none; }
}*/
@media (max-width: 42em) { /* "double line" */
  header .green .inner { padding-right: 0; }
  header .green nav {
    display: -webkit-flex; display: flex;
    -webkit-justify-content: space-between; justify-content: space-between;
    -webkit-flex-flow: row wrap; flex-flow: row wrap;
  }
  header .green .on-the-right-side {
    -webkit-align-self: flex-end; align-self: flex-end;
    padding-right: 1em; /* from .inner */
  }
  header .green .mitte {
    /*display: none;*/
    background-color: #999; width: 100%; /* padding: 0; border: 0 none; */
    -webkit-order: 3; order: 3;
    height: 2.5em; line-height: 2.5em; /* XXX */
    margin: 0 -1em 0 -1em;
  }
}

/* Bildbereich */ /*Changed*/
#pid1 .header-img {
	background-image:url('/fileadmin/user_upload/herbst-t-4007.jpg');
	/*background-size: cover;
	background-position: center;
	-webkit-transition: all 0.9s ease;
	-moz-transition: all 0.9s ease;
	-ms-transition: all 0.9s ease;
	-o-transition: all 0.9s ease;
	transition: all 0.9s ease;*/
}
/*#pid1 .header-img:hover::before {
	content: url(/typo3conf/ext/tulln/Resources/Public/Images/symbols/pfeil-linksgruen.svg);
}*/
/*#pid1 .header-img::before {
	content: url(/typo3conf/ext/tulln/Resources/Public/Images/symbols/pfeil-linksgruen.svg);
	position:absolute;
	margin-top:10em;
	margin-left:20%;
}

#pid1 .header-img::after {
	content: url(/typo3conf/ext/tulln/Resources/Public/Images/symbols/pfeil-linksgruen.svg);
}*/
.slide-left, .slide-right {
	position: absolute;
	width: 100%;
	max-width: 2em;
	margin-top: 21em;
	margin-left: 47em;
}
/*#pid1 .header-img:hover::after {
	content: url(/typo3conf/ext/tulln/Resources/Public/Images/symbols/pfeil-rechtsgruen.svg);
}*/
.header-img { padding: 1px 0; background-size: cover; background-position: center; min-height: 275px; /*_overflow: hidden;*/ }
.header-img .welcome {
  /*display: inline-block;
  background-color: rgba(255,255,255,.7);
  margin: 3em 2em 2em 1em; padding: 1em 2em 1em 1em;*/
  /*_max-width: 6em;
  _min-height: 50%;*/
  display: inline-block; margin: 0; padding: 0;
}
.header-img .welcome .tilt {
  display: inline-block;
  background-color: rgba(255,255,255,.7);
  margin: 3em .2em 2em 1em; padding: 1em 2em 1em 1em;
}

.header-img .welcome .tilt::after { /* 2nd kitsch (T) */
  display: block; _float: right;
  text-align: right;
  content: url('../Images/r/icon_tulln.svg');
  width: 1.15em; height: 1.15em; /* 2.3em/2 */
  margin: 0 -2em -1em auto; /* see padding of .tilt */
  transform: scale(2); transform-origin: top left;
}
@media (max-width: 40em) {
	.header-img .welcome {
		display: none;
	}
}

@media (min-width: 62em)
{ .header-img .welcome { margin-left: calc(50% - 31em); /* meist-mitten-ins-gesicht,
        aber expliziter wunsch^Hbefehl von rikki, added js2016-09-12 */
  } /* see also news.css XXX */
}
/*@media (min-width: 95em)
{ .header-img .welcome { position: relative; } /- anchor -/
  .header-img .welcome .tilt { position: relative; left: calc(-100% + 3em); }
  /- ob das das ganze entschaerft? -/
}*/
/* decision against: ossi+rikki 2016-09-?? (before 2016-09-12)
   actually would conflict with adaption (anyway) (see news.css) */


.header-img .welcome /*> div*/ .align-me { display: inline-block; vertical-align: bottom; }
.header-img .welcome .tilt::before { content: ''; min-height: 11em; display: inline-block; vertical-align: bottom; }
/* ^- one layer above .align-me (was: .header-img .welcome::before) */
.header-img .welcome h2, .header-img .welcome .h2 {
  font-size: 1.5em; font-weight: normal;
  margin: 0 0 .5em 0; padding: 0;
  /*_max-width: 6em;*/
  text-transform: uppercase; letter-spacing: 0.03em; line-height: 1.3em;
  color: #666;
}
.header-img .welcome p { margin: 0; padding: 0; letter-spacing: 0.03em; color: #666; }

@media (max-width: 27em) {
  .header-img .welcome h2, .header-img .welcome .h2 { font-size: 5.5vw; }
  .header-img .welcome p { font-size: 3.7vw; }
}
@media (max-width: 20em) {
  .header-img .welcome h2, .header-img .welcome .h2 { font-size: 5vw; }
  .header-img .welcome p { font-size: 3.3vw; }
}

.quick.btn-orgie { /*changed*/
  list-style-type: none;
  float: right; clear: right;
  border-radius: .7em 0 0 .7em;
  background-color: rgba(255,255,255,.9);
  padding: 0;
  /*margin: 1.7em 0;*/
  /*margin: 6em 0;*/
  margin: 5% 0;
}

/** NOT NEEDED IF USING MARGIN % */
/*@media (max-width: 40em) {
	.quick.btn-orgie {
		margin: 1em 0;
	}
}*/


.quick.btn-orgie li { position: relative; margin: 0; }
.header-img::after { content: ''; display: block; clear: right; } /* clearfix */

.quick.btn-orgie [name^="collapse-"]:focus + label img,
.quick.btn-orgie label:focus img {
  border-radius: 50%;
  /*box-shadow: inset 0 0 1em 0 #c756a0;*//*red;*/
  /*-webkit-animation: insetshadow-mulberry2trans1em 5s 1 forwards;
  animation: insetshadow-mulberry2trans1em 5s 1 forwards;*/
}


.quick.btn-orgie img { /* Annahme in den Ausklappmenues sind keine (anderen) Bilder */
  width: 3em; height: 3em; display: block; padding: .3em; max-width: none;
}
/*._btn-orgie .show { // margin-right: 100%; margin-left: -100%; margin-top: -200%;
  position: absolute; right: 3.6rem; top: 0em; // _vertical-align: middle;
  background-color: white; padding: .1em 1em; min-width: 10em; min-height: 3.6rem; z-index: 10;
}*/
/*.btn-orgie .show > div {
  display: table-cell; vertical-align: middle;
  padding: .1em 1em; min-width: 10em; min-height: 3.6rem;
}*/
.btn-orgie [name^="collapse-"] + * + * + .show  { display: none; }
.btn-orgie li:first-of-type [name^="collapse-"] + * + [for="q-none"]  {
   z-index: -1;
   background: linear-gradient(to bottom right, rgba(255,255,255,.95) 8%, rgba(255,255,255,.9), rgba(255,255,255,0) 20%, rgba(255,255,255,0));
}
.btn-orgie li:last-of-type [name^="collapse-"] + * + [for="q-none"]  {
   z-index: -1;
   background: linear-gradient(to top right, rgba(255,255,255,.95) 8%, rgba(255,255,255,.9), rgba(255,255,255,0) 20%, rgba(255,255,255,0));
}
.btn-orgie li:hover .show,
.btn-orgie [name^="collapse-"]:checked + * + * + .show { display: block; /*display: inline-block; display: table-cell; table;*/ }
.btn-orgie.btn-orgie li [name^="collapse-"]:checked + * + [for="q-none"]  { z-index: 1; }
.btn-orgie .show { /*margin-right: 100%; margin-left: -100%; margin-top: -200%;*/
  position: absolute; right: 3.6em;/*3.6rem;*/ top: 0em; z-index: 1;
  _vertical-align: middle;
  padding: .1em 1em;
  min-width: 13em; /*was: 10em; XXX ungefaehre Laenge Suchfeld */
  min-height: 3.6em;/*3.6rem;*/ /*z-index: 10;*/
  background-color: white; /* default, wegen newsletter */
}

#q-search + * + * + .show { background-color: #EE7D00; text-align: center; white-space: nowrap; }
/*#q-search + * + ._show::after {
  display: block; content: '';
  position: absolute; right: -2em; top: 0em; z-index: -10000;
  _background-color: green; #EE7D00;
  //1/ width: 0; height: 0; border-top: 1em solid #EE7D00; border-right: 1em solid transparent; /
  //2/ width: 1em; height: 1em; border-radius: 1em 0 0 0; border-left: 1em solid transparent; /
  //3/ width: 2em; height: 2em; overflow: hidden; border-radius: 1em 0 0 0; box-sizing: content-box;
  _box-shadow: -15px 0 1px -1px #EE7D00, -12px 0 1px -1px #EE7D00,
               -6px 0 1px -1px #EE7D00, -3px 0 1px -1px #EE7D00, -1px 0 1px -1px #EE7D00;
  border-left: 1.5em solid #EE7D00; _border-top: 1px solid #c756a0;// was: red;
}*/

#q-contact + * + * + .show { background-color: #E94B93; text-align: center; white-space: nowrap; }
#q-contact + * + * + .show .h3 { /*2016-10-03*/
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  /* v- just because uppercase shit */
  font-size: 1.06em; /* instead of 1.17em */
  transform: scaleY(1.1);
  line-height: 1.1;
  display: inline-block;
}
#q-contact + * + * + .show a { line-height: 1.3; }

#q-newsletter + * + * + .show {
  padding: 0;
  margin: 0;
  box-shadow: -2px 2px 0 3px rgba(128, 128, 128, 0.2);
  min-width: 15em; /* +2em wegen fehlenden padding */
}
#q-newsletter + * + * + .show > div > * { padding: 0 1em; } /* XXX */
#q-newsletter + * + * + .show  h3 {
  background-color: #93C01F;
  margin: 0; /*padding: 0.3em;*/ white-space: nowrap;
  color: white;
  font-weight: 600;
}
#q-newsletter + * + * + .show  button {
   background-color: #93C01F;
   box-shadow: none; border: none;
   padding: 0.1em 1em; margin: 0.4em 0 0.4em auto;
   display: block;
   color: white;
}
#q-asocmedia  + * + * + .show {
   background-color: #66b0e5;
   background-color: rgba(255,255,255,.95); /*white;*/
   /* chgd js2016-09-12, following a design change^Hfixation */
   /*min-width: 0; // wieder weg damit auch 13em oder was auch immer lang */
   white-space: nowrap; padding: 0 .5em; 
   /*min-width: 14em;*/ /* +1em */
   min-width: 1em; /* +1em */
   box-shadow: -4px 2px 4px -2px rgba(128, 128, 128, 0.3);
   /*^- added js2016-09-12: wegen heller Bilder <= because of design dec. towards white
        (eclusivly here vs. intense colors elsewhere) */
   border-right: 1px solid #eee;

}
.protocol-page #q-asocmedia  + * + * + .show {
   background-color: #20A4D6; /*#66b0e5;  XXX Demo only */
}

#q-asocmedia  + * + * + .show > div { vertical-align: bottom; }

#q-asocmedia  + * + * + .show ul {
  display: -webkit-flex; display: flex; /* give up: misuse flex against extra whitespace at the end */
  list-style-type: none;
  padding: 0; margin: 0;
  text-align: right;
  float: right;
  /*vertical-align: bottom; /* whatever, except baseline */
}
#q-asocmedia  + * + * + .show li { display: inline-block; padding: 0; }
#q-asocmedia  + * + * + .show a { line-height: 0; }
#q-asocmedia  + * + * + .show img { width: 2.8em; height: 2.8em; padding: .4em .3em; }
.btn-orgie .show fieldset { border: 1px solid/*dotted*/ #CCC; margin: 0.5em 0; font-size: .9em; }
.btn-orgie .show legend {
  color: #999;
  /*overflow: hidden; text-overflow: ellipsis;*/ /* IE+Edge: whether wrap nor follow overflow XXX */
}
.btn-orgie .show input[type="email"] { width: 100%; box-sizing: border-box; }

/*.btn-orgie .show::before { display: inline-block; vertical-align: middle; content: ''; height: 100%; min-height: 3.6em; }
.btn-orgie .show > div { display: inline-block;  vertical-align: middle; }*/

.va36 { padding-top: 0; padding-bottom: 0; }
.va36::before {
  display: inline-block;
  vertical-align: middle; content: '';
  height: 100%; min-height: 3.6em;/*3.6rem;*/
}

.va36 a {
	color: #fff;
}

h3.va36 { text-align: center; }
h3.va36::before { min-height: 3.08em; } /* 3.6/1.17=3.076923 */
.va36 > div, .va36 > span { display: inline-block;  vertical-align: middle; }

.btn-orgie .show strong { white-space: nowrap; }

#q-newsletter + * + * + .show label::after { white-space: pre; content: '\A'; }

.btn-orgie [for="q-none"] { position: absolute; z-index: -1; top: 0; }

.parallel { display: block; list-style-type: none; float: right; padding: 0; margin: 0 0 0 0;  } /* XXX */
.parallel li {
  display: inline-block; _vertical-align: bottom;
  /*border: 1px solid #ccc; border-bottom: none;*/
  white-space: nowrap;
}
.parallel li.tab-erleben {
	margin-right: 1em;
}
.parallel li a {
  display: inline-block; /* damit background vollflaechig */
  border: 1px solid #ccc; border-bottom: none; /* border hierher damit veraenderbar */
  background-clip: border-box;
  text-decoration: none;
}
.parallel li a:focus {
  background-color: #fef;
  border-color: #c756a0;
  outline: 0 none;
}
.parallel li a:focus:not(:-moz-focusring) { background: none; border-color: #ccc; }

.parallel li img[src$=".svg"] {
  /*padding: .3em .5em .35em .5em; height: 24px;*/
  height: 1.44em;/*height: 23px;*/
  padding: 0.4em 0.5em 0.35em; vertical-align: middle;
}
.tab-wirtschaft a::before, .tab-erleben a::before {
  display: inline-block;
  /*padding: 0.3em .3em .0em 0.4em;
    content: url('../Images/symbols/weiter-grau.svg');*/
  margin: 0.3em 0 .0em 0.3em; padding: 0;
  /*content: url('../Images/symbols/weiter-grau-qu.svg');*/
  content: ''; width: 1.1em; height: 1.1em;
  /* background-image: url('../Images/symbols/weiter-grau-qu.svg'); // that way because of border-radius
     background-color: white; */
  background-image: url('../Images/symbols/raus-grau-qu.svg'); /* that way because of border-radius */
  background-color: white;
  background-size: 1.1em;
  border-radius: 50%;
  vertical-align: middle;
}
.parallel > li > a::before { margin: 0; margin-left: .5em; }
/*.tab-erleben a::before { margin-right: 0.2em; margin-left: .7em; }
  .tab-erleben a { padding-right: .38em; }*/
.tab-erleben a::before { margin-right: 0.2em; margin-left: .3em; } /* chgd 2016-09-12 */
/*.tab-erleben a { padding-right: .78em; }*/

.parallel li a:focus::before { background-color: #c756a0; }
.icontulln.icontulln.icontulln {
   /*border: 0 none;*/
   vertical-align: top; /*_float: right;*/
   margin: 0; padding: 0;
   position: absolute; top: .4em; right: .4em;
}
.icontulln.icontulln.icontulln a { border: 0 none; }
.icontulln.icontulln.icontulln img {
  border-radius: 50%; /* for :focus */
  padding: 0.3em; /* focus inset border */
  width: 2.3em; height: 2.3em; /* h needed by IE+Edge XXX */
}

.icontulln.icontulln a:focus { background: none; }
.icontulln a:focus img {
  /*box-shadow: inset 0 0 1em 0 #c756a0;*//*red;*/
 /* -webkit-animation: insetshadow-mulberry2white1em 5s 1 forwards;
  animation: insetshadow-mulberry2white1em 5s 1 forwards;*/
}
.icontulln a:focus:not(:-moz-focusring) img { box-shadow: none; background: none; animation: none; }

header .on-the-right-side {
  float: right; display: -webkit-flex; display: flex; font-size: 1.5em;
  -webkit-justify-content: space-between; justify-content: space-between;
  -webkit-align-items: center; align-items: center;
  height: 1.625em;
}
header .on-the-right-side > * {
  -webkit-flex: auto; flex: auto;
  position: relative;
  _line-height: 1.625em;
  margin: 0; padding-left: 1em;
}
header .on-the-right-side > :first-child { padding-left: 0; }

header .green { color: white; } /* XXX */
/* Lang Switch */
.lang-btn {
  /*_color: white; _position: relative; _height: 1.625em;
  _font-size: 1.5em; _line-height: 1.625em;
  _vertical-align: middle;
  _display: block;
  _margin: 0;
  _padding: 0 1em;*/
  /* 1.1/1.5em */
  font-size: 0.7333em;
  text-transform: uppercase;  /* 2016-09-12 */
}
.lang-btn a { color: inherit; text-decoration: none; }
.lang-btn label { font-weight: bold; font-size: 1.2em; }

header .green label { white-space: nowrap; }
/*#switch-lang + label::after*/
[id^="switch-"] + label::after {
  display: inline-table;/*inline-block;*/
  /*margin-left: .3em;*/
  margin-left: .1em;
  /*content: url('../Images/symbols/pfeil_unten.svg'); //XXX*/
  background: linear-gradient(#93bf20,#93bf20) bottom/100% 2px no-repeat border-box content-box,
              linear-gradient(#93bf20,#93bf20) right/2px 100% no-repeat border-box content-box,
              url('../Images/symbols/pfeil-unten_inv3green.svg') top/100% auto no-repeat white;
  background-color: white; /* left top/1.375rem 0.875rem */
  /*_content: url('../Images/symbols/pfeil-unten_inv3green.svg');*/ /* pfeil_unten_inv_t2/-size.svg */
  content: '';
  width: 1.375rem;/* 22/16=1.375 .65em;*//*1em;1rem;*/ /*_height: 0.65rem;*/
  height: 0.875rem; /* for edge? */
  vertical-align: middle; line-height: 0;
  _transform-origin: bottom;
}
.login-btn [id^="switch-"] + label::after {
  margin-left: 0;
}

[id^="switch-"]:focus + label::after {
  /*content: url('../Images/symbols/pfeil_unten_rot.svg');*/
  /*background-color: #c756a0;*//*red;*/
 /* -webkit-animation: bgcolor-mulberry2white 5s 1 forwards;
  animation: bgcolor-mulberry2white 5s 1 forwards;*/
} /*XXX*/
[id^="switch-"]:focus:not(:-moz-focusring) + label::after { background-color: white; animation: none; }
[id^="switch-"]:checked + label::after { -webkit-transform: scaleY(-1) translateY(29%); transform: scaleY(-1) translateY(29%); }
[id^="switch-"] + label + .overlay {
  position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: -1;
}
[id^="switch-"]:checked + label + .overlay {
  z-index: 1;
}
[id^="switch-"] + label + .overlay + * {
  position: absolute;
  right: 0; z-index: 2; /* wegen login */
  display: none; list-style-type: none;
  margin: 0;
  /*padding: 0.1em 0.4em;
    border: 1px solid white; // moved to single btn */
}

/* v- switch-lang + switch-login */
#q-none:focus ~ * label[for="switch-lang"]::after,
[id^="switch-"] + label:focus::after, /* (sometimes) fine in FF, ... */
[id^="switch-"]:focus + label::after {
  color: #c756a0;/*mulberry, was: red;*/
  /*-webkit-animation: color-mulberry2white 5s 1 forwards;
  animation: color-mulberry2white 5s 1 forwards;*/
}
#q-none:focus:not(:-moz-focusring) ~ * label[for="switch-lang"],
[id^="switch-"] + label:focus:not(:-moz-focusring), /* fine in FF, ... */
[id^="switch-"]:focus:not(:-moz-focusring) + label { color: white; animation: none; }

.lang-btn ul {
  /*background-color: #93BF20; border: 1px solid white;*/
  background-color: white; color: black; border: 1px solid #ccc; /* design change: 2016-09-12 */
  padding: 0.1em 0.4em;
}
.lang-btn li { margin: 0; padding: 0; }
.login-btn div {
  background-color: white; color: black;
  font-size: .67em; /* 1/1.5 */
  line-height: 1.8;
  border: 1px solid #ccc;
  padding: .1em .6em 1em .6em;
  min-width: 13em; /* 2016-09-12 */
}
.login-btn div.tx-felogin-pi1 {
	display: none;
}
.login-btn div button {
  background-color: #93BF20; border: none; color: white;
  /*float: right;*/
  text-transform: uppercase;
  padding: .2em 1em .1em 1em;
}

.login-btn div a {
   display: block;
   font-size: .88em; /* chgd 2016-10-03 was: .9em design change: 2016-09-12 */
   text-transform: uppercase; /* added 2016-09-12 */
   line-height: 1.2;
   white-space: nowrap;
}
.login-btn div a:first-of-type { margin-top: 1em; }

.login-btn form strong:first-child { text-transform: uppercase; } /* 2016-09-12 */

.login-btn form input {
  width: 100%; box-sizing: border-box;
  margin: 0 0 .3em 0; /* 2016-10-03 */
} /* + */

[id^="switch-"]:checked + label + .overlay + * { display: block; }
[lang="de"] .lang-btn li[data-lang="de"] { display: none; }
[lang="en"] .lang-btn li[data-lang="en"] { display: none; }
.lang-btn li[data-selected] { display: none; }

.login-btn { max-width: 2em; } /* noetig wegen Edge */
.login-btn img { _width: .77em/*.875em*/; height: .875em;/*1.31em;/*b 1.31rem;*/ }

/* --- */

.font-size {
  display: -webkit-inline-flex; /*XXX*/
  display: inline-flex; /*inline-table;*/
  /*display: none; // turn on by javascript, now done through removing of needs-javascript class */
  align-items: center;
  justify-content: space-around;
  border-spacing: .1em; border-collapse: separate; /* XXX */
  /*font-size: .67em;*/
  font-size: 16px;
   /*vertical-align: middle;*/
  width: 4em;
}
@media (max-width: 25em)
{ .font-size { display: none; }
}

.font-size button { /* falls <button> verwendet ... */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0 none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  margin: 0; padding: 0;
  background: none;
}
.font-size button::-moz-focus-inner { margin: 0; padding: 0; border: 0 none; }
.font-size a { text-decoration: none; color: inherit; }

.font-size > * {
  -webkit-flex: 1 0 33%; flex: 1 0 33%;
  list-style-type: none;
  /*display: table-cell; - old, fallback but interfer */
  /*_height: 0; _width: 0;   _border-radius: 50%;*/
  text-align: center; vertical-align: bottom;
  cursor: pointer;
  /*padding: 0 .1em;padding: 0.5em; padding: calc(.1em + 1px); */
  padding: 0; margin: 0;
  /*-moz-user-select: none;*/
  caret-color: #93BF20;
}
.font-size > *::before {
  display: inline-block; content: ''; /*_z-index: -1;*/
  border-radius: 50%;
  background: transparent;
  width: 0; height: 0;
  vertical-align: middle; /*padding: .6em;*/ margin: -.7em -.95em -.5em -.25em;
  padding: .63em;
}

.font-size.font-size.font-size > *:focus {
  /*_border-radius: 50%;
  _box-shadow: 0 0 0 1em  yellow;
  _outline: 1px solid red;*/
  outline: none;
  color: #c756a0;/*mulberry was: red;*/
  /*-webkit-animation: color-mulberry2white 5s 1 forwards;*/ /*2white*/
  /*animation: color-mulberry2white 5s 1 forwards;*/
}
.font-size.font-size.font-size > *:focus:not(:-moz-focusring) { _color: white; animation: none; }

.font-size[data-zoomlevel^="+"] .bigger:focus,
.font-size[data-zoomlevel="0"] .to-default:focus,
.font-size[data-zoomlevel^="-"] .smaller:focus  {
  color: #93bf20; /* XXX */
  /*-webkit-animation: color-mulberry2green  5s 1 forwards; // 2green XXX, not working 2curr
  animation: color-mulberry2green  5s 1 forwards; */
  animation: none;
  /*_-webkit-animation_: bgcolor-mulberry2white  5s 1 forwards;*/ /*2green XXX, not working 2curr */
  /*_animation_: bgcolor-mulberry2white 5s 1 forwards;*/
}
.font-size[data-zoomlevel^="+"] .bigger:focus:not(:-moz-focusring),
.font-size[data-zoomlevel="0"] .to-default:focus:not(:-moz-focusring),
.font-size[data-zoomlevel^="-"] .smaller:focus :not(:-moz-focusring) { color: #93BF20; animation: none; }

.font-size[data-zoomlevel^="+"] .bigger:focus::before,
.font-size[data-zoomlevel="0"] .to-default:focus::before,
.font-size[data-zoomlevel^="-"] .smaller:focus::before  {
  /*-webkit-animation: bgcolor-mulberry2white  5s 1 forwards;*/ /* XXX */
 /* animation: bgcolor-mulberry2white 5s 1 forwards;*/
}
/*
.font-size[data-zoomlevel^="+"] .bigger:focus:not(:-moz-focusring)::before,
.font-size[data-zoomlevel="0"] .to-default:focus:not(:-moz-focusring)::before,
.font-size[data-zoomlevel^="-"] .smaller:focus :not(:-moz-focusring)::before { background: transparent; animation: none; }
*/
.font-size .bigger { font-size: 1.2em; }
.font-size .smaller { font-size: .83em; }
.font-size[data-zoomlevel^="+"] .to-default { font-size: .9em; }
.font-size[data-zoomlevel^="+"] .smaller { font-size: .75em; }

.font-size[data-zoomlevel="0"] .to-default::before { background: white; }
.font-size[data-zoomlevel="0"] .to-default { /*border: 1px solid white;*/ color: #93BF20; }
.font-size[data-zoomlevel^="+"] .bigger::before { background: white; }
.font-size[data-zoomlevel^="+"] .bigger { /*border: .4em solid white;*/ color: black; }
.font-size[data-zoomlevel="+1"] .bigger { /*border: .1em solid white;*/ color: #93BF20; }
.font-size[data-zoomlevel="+2"] .bigger { /*border: .2em solid white;*/ color: #6b8b17; }
.font-size[data-zoomlevel="+3"] .bigger { /*border: .3em solid white;*/ color: #3b4d0d; }
.font-size[data-zoomlevel^="-"] .smaller::before { background: white; }
.font-size[data-zoomlevel^="-"] .smaller { /*border: 4px solid white;*/ color: black; }
.font-size[data-zoomlevel="-1"] .smaller { /*border: 1px solid white;*/ color: #93BF20; }
.font-size[data-zoomlevel="-2"] .smaller { /*border: 2px solid white;*/ color: #6b8b17; }
.font-size[data-zoomlevel="-3"] .smaller { /*border: 3px solid white;*/ color: #3b4d0d; }

/* --- */