@charset "UTF-8"; /* ### kohi20-main.css 18.06.20 -nicht identisch mit der lokal-Version,check it*/
/* 
### z-index
10 cookie-banner
30 #click-to-scroll-up
50 .no-js #noscript-warning

576px 	36em
600px 	37.5em
800px 	50em
1024px	64em 

//////////////////////////////////////
iphone 5 Portrait   B 320 
iphone 5 Landscape  B 568
iphone 7 Portrait   B 414 
iphone 7 Landscape  B 736
iPhone 11 375x635/749 
ipad P 843 
iPad L 1112
//////////////////////////////////////
// ### http://www.cssdrive.com/cssautoprefixer/ 20.05.20

// ### kohi-albatross-grid.css
https://codepen.io/snookca/pen/PoYVLRW


### http://www.farbtabelle.at/farbtabelle/grau/
### https://www.color-hex.com/color/8bc6dd
#8bc6dd color RGB value is (139,198,221).
#ABC432 dunkles kohigruen
#99cc00 kohigrün
#363b41 helleres grün

### suche nach :hover 
wenn
<script>document.addEventListener("touchstart", function(){}, true);</script>
dann
element:hover, 
element:active { 
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

### INFO aus tpl__ue-dark-light-mode-switch.php
ue-dark-light-mode-switch.css ist die full version mit allen CSS-Variablen und anderen CSS-Angaben (far too much!) 
aber dort sind nicht nur die CSS-Variablen für das light-theme, sondern auch die CSS-Variablen für [data-theme="dark"] 

### Durch die strukturelle Pseudoklasse root wird ein Gültigkeitsbereich für das gesamte HTML-Dokument festgelegt.
aus: D:\xampp\htdocs\WEB-DEV\css-variables\theme-changer-local-storage-classes.html
*/

/* /////////////////////////////////////////////////////////////////////////////// CSS-Variablen ////////////// */
:root {  
/* ### FARBEN -> light und dark definieren! Nicht hier! */

/* aus kohi20-switch.css, war google-style.css */
	/*color-scheme: dark light;  noch nicht implementiert */
	/*supported-color-schemes: dark light;  noch nicht implementiert*/
	--duration: 0.5s;
	--timing: ease; 
		
/* ki fonts */
	--fontFliesstext: -apple-system, BlinkMacSystemFont, Tahoma, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,Cantarell, Helvetica, 'Fira Sans',sans-serif; /* var(--fontFliesstext); */
	--fontHeading: 		"Oswald-Bold";	/* var(--fontHeading) */
	--fontHeadingSpan: 	"Oswald-Light"; /* var(--fontHeadingSpan) */
	--fontHeadingLight: "Oswald-Light";/* var(--fontHeadingLight) */
	--fontHandwriting: 	"Shadows Into Light Two"; /* var(--fontHandwriting) */
	--fontAnnouncement: "Lincoln"; /* var(--fontAnnouncement) */

	--space-unit:  1em;
	--space-xxxxs: calc(0.125*var(--space-unit));
	--space-xxxs:  calc(0.25*var(--space-unit));
	--space-xxs:   calc(0.375*var(--space-unit));
	--space-xs:    calc(0.5*var(--space-unit));
	--space-sm:    calc(0.75*var(--space-unit));
	--space-md:    calc(1.25*var(--space-unit));
	--space-lg:    calc(2*var(--space-unit));
	--space-xl:    calc(3.25*var(--space-unit));
	--space-xxl:   calc(5.25*var(--space-unit));
	--space-xxxl:  calc(8.5*var(--space-unit));
	--space-xxxxl: calc(13.75*var(--space-unit));
	--component-padding: var(--space-sm);
}

@supports (--css: variables) {
	@media (min-width: 64rem) {
		:root {
			--space-unit:  1.25em;
		}
	}
}


/* 
###theming via Classes/JS 
:root.light {}
:root.dark {}
*/

/* //////////////////////////////////////////////////////////////////////////////// fonts ////////////// */
/*
https://google-webfonts-helper.herokuapp.com/fonts/oswald?subsets=lati
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face 
*/
/* oswald-300 - latin */
@font-face {
  font-family: 'Oswald-Light';
  font-style: normal;
  font-weight: 300;
  src: local('Oswald Light'), local('Oswald-Light'),
       url('../fonts/oswald-v16-latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/oswald-v16-latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	  font-display: swap;
}
/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: local('Oswald Regular'), local('Oswald-Regular'),
       url('../fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/oswald-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	  font-display: swap;
}
/* oswald-600 - latin */
@font-face {
	font-family: 'Oswald-Bold';
	font-style: normal;
	font-weight: 600;
	src: local('Oswald SemiBold'), local('Oswald-SemiBold'),
       url('../fonts/oswald-v16-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/oswald-v16-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	  font-display: swap;
}

/* oswald-regular - latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/oswald-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Oswald Regular'), local('Oswald-Regular'),
		url('../fonts/oswald-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/oswald-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/oswald-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
       url('../fonts/oswald-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/oswald-v16-latin-regular.svg#Oswald') format('svg'); /* Legacy iOS */
	font-display: swap;
}
/* 
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/@font-face
https://www.1001fonts.com/shadows-into-light-two-font.html#character-map 
https://www.npmjs.com/package/typeface-shadows-into-light-two
*/
/* 
https://google-webfonts-helper.herokuapp.com/fonts/shadows-into-light-two?subsets=latin
shadows-into-light-two-regular - latin */
@font-face {
	font-family: 'Shadows Into Light Two';
	font-style: normal;
	font-weight: 400;
	src: local('Shadows Into Light Two'), local('ShadowsIntoLightTwo-Regular'),
       url('../fonts/shadows-into-light-two-v5-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/shadows-into-light-two-v5-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
	font-display: swap;
}

@font-face {
    font-family: 'lincoln';
    src: url('../fonts/lincolnmitre-lm5x7-webfont.woff2') format('woff2'),
         url('../fonts/lincolnmitre-lm5x7-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-display: swap;
}

.regular {
	font-family: 'Oswald', Arial, Helvetica, sans-serif;
	font-weight:normal;
}

.schmuck {
	font-family: var(--fontHandwriting), var(--fontFliesstext), sans-serif;
	font-size: 2em;
	line-height: 1.2;
	font-weight: 400;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////////////////// basic ///// */

* {
	box-sizing: border-box;
}

body, h1, h2, h3, figure, section {
	padding: 0; 
	margin: 0;
}


html, body {
	height: 100%;
	min-height: 100%;
}


body {
	background-color: hsl(0, 0%, 98%);
	background-color: var(--background-color);
	color: hsl(240, 4%, 20%);
	color: var(--color);

	font-family: var(--fontFliesstext);

	-webkit-transition: color var(--duration) var(--timing),
		background-color var(--duration) var(--timing);
	
	transition:
		color var(--duration) var(--timing),
		background-color var(--duration) var(--timing);   
}

/* https://css-tricks.com/downsides-of-smooth-scrolling/ */
html {
	scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

#wrap {
	max-width: 100vw; 
	padding:0; 
	border:0; 
	margin:0;
	/* -webkit-transform: translate3d(0,0,0); */
}

/*
#wrap,
#wrap.albatross,
main,
.albatross-content,
.albatross-grid,
.albatross-a {
	background-color:var(--background-color_wrap, #fff);
}

.albatross-grid {
	display: -ms-grid;
	display: grid;
}

.albatross-a {
	-ms-grid-columns: (minmax(min(calc(1024px * 999 - 100% * 999), 100%), 1fr))[auto-fit];
	    grid-template-columns: repeat(auto-fit, minmax(min(calc(1024px * 999 - 100% * 999), 100%), 1fr));  
}

.albatross-b {
	-ms-grid-columns: (minmax(min(calc(560px * 999 - 100% * 999), 100%), max-content))[auto-fit];
	    grid-template-columns: repeat(auto-fit, minmax(min(calc(560px * 999 - 100% * 999), 100%), max-content));  
}
	
.albatross-content {padding: 1em 0;}
*/

#wrap,
#wrap.albatross,
main,
.albatross-content,
.albatross-grid,
.albatross-a {
	background-color:var(--background-color_wrap, #fff);
}
/*
.albatross-grid {
	display: -ms-grid;
	display: grid;
}

.albatross-a {
	-ms-grid-columns: (minmax(min(calc(1024px * 999 - 100% * 999), 100%), 1fr))[auto-fit];
	    grid-template-columns: repeat(auto-fit, minmax(min(calc(1024px * 999 - 100% * 999), 100%), 1fr));  
}

.albatross-b {
	-ms-grid-columns: (minmax(min(calc(560px * 999 - 100% * 999), 100%), max-content))[auto-fit];
	    grid-template-columns: repeat(auto-fit, minmax(min(calc(560px * 999 - 100% * 999), 100%), max-content));  
}
*/	

#kunst main .albatross-content{padding: 1em 2em;} /* */



/* ////////////////////////////////////////////////////////////////////////////////////////// */

/* 37.5 = 600px */	
@media all and (min-width:37.5em) {
	body {
		width:100%
	}
	#wrap {
		padding:0 80px;
	}
	/*
	.albatross-grid {
		display: -ms-grid;
		display: grid;
	}
	.albatross-content {
		padding: 0; 
	}

	#kunst .albatross-content:not('#click-to-scroll-up') {padding-right: 80px;}
	*/
	#wrap .albatross-a img.logo{
	   width: 300px; /* ! */
	   margin-left: -16px; 
	}
}

/*64em 1024px*/
@media (min-width: 64em)
{
	#wrap {
		max-width: 940px;
		margin: 0 auto;
	}
	.albatross-grid {
		display: -ms-grid;
		display: grid;
	}
	.albatross-content {
		padding: 0; /* MQ */
	}

	#kunst .albatross-content:not('#click-to-scroll-up') {
		padding-right: 80px;
	}
	/* #wrap  */.albatross-a {
	   width: 100vmin; /* ! */
	   max-width: 940px;
	   margin-left: -80px;
	}
	
	#wrap .albatross-a img.logo{
	   margin-left: 64px; /* 80-16 */
	}

	footer .albatross-a {
		margin-left: -80px;
		padding-left: 96px; /* 80 + 16 */
	}
	
	article p {padding-right: 80px;}  /* ! */
	
	#events article p {padding-right: 16px;} 
}

/* //////////////////////////////////////////////////////////////////////////////////////// */

header {
	/*margin-bottom: 50px; 23.05. */
	margin-bottom: -16px;
}  

main {
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-word;
	/* 10:02 23.02.2025 -ms-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto; hyphens nicht bei LINKS!*/
} 

footer {
	padding-bottom: 4em;
}

img {
	max-width: 100%;
	height: auto;
}

h1,h2,h3,h4 {
	font-family: var(--fontHeading), Tahoma, sans-serif;
	text-transform: uppercase;
	color: #9c0; /* oldie - ja, Extra-Zeile! */
	color: var(--color-primary, #9c0);
	font-weight:bold;
	margin:0;
	/* padding:0; */
}
[data-theme="dark"] h1, 
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5 {
	font-family: var(--fontHeadingLight), Tahoma, sans-serif; 
	font-weight: normal;
	letter-spacing: 2px;
}
h1, h2 {
	margin-top: 0;
	padding: var(--component-padding) 0;
	font-size: 2.5em;
	line-height: 1.1
}

h2 {
	padding: var(--component-padding) 0; 
	font-size: 2em;
}

h2.solo,
h3.solo {
	padding: var(--component-padding) 16px var(--component-padding) 32px; 
}

h2.big {
	font-size: 3em; 
	margin: 1em 0
}

.teaser h1.gruen span,
h2.big span {
	text-transform:lowercase!important
}
#juris h1.gruen {font-size: 2em;}

h3.h2 {font-size: 2em; margin-top: 2em} 

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #links ///////////////// */
a, 
.link {
  color: #000;
  color: var(--link-color, #000);
  text-decoration: none;
  font-weight: 700;
}

a:hover, 
a:active {
  color: #000;
  color: var(--color-primary, #000);
  text-decoration: none;
  font-weight: 700;
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

 
 
h2.big a {
	color: #9c0; /* oldie - ja, Extra-Zeile! */
	color: var(--color-primary, #9c0);
}
h2.big a:hover {
	color: #000;
	color: var(--color-primary, #000)!important;
}

/* 
a[href^="mailto:"] {
	text-decoration:underline;
} 
:any-link {
	color: var(--link-color);
}
*/

/* 
https://css-tricks.com/the-current-state-of-telephone-links/ 
<a href="tel:+01-562-867-5309" rel="nofollow">1-562-867-5309</a>
<meta name="format-detection" content="telephone=no">
*/ 

a[href^="tel"] {
  color: inherit;
  text-decoration: none;
}
 
#kontakt a[href^="mailto:"] {
	text-decoration:underline;
}

/* aus goto-nav */ 
/* https://codepen.io/melnik909/pen/KGxdjY Link mit Unterstreichung */

a.link {font-weight:normal;}

.link{
	position: relative;
	z-index: 1;
	display: inline-flex;
	
	padding-left: 4px;
	padding-bottom: 4px;
	padding-right: 4px;
}

.link::before{
	content: "";
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to top, rgba(153, 204, 0, 0.5) 40%, rgba(0, 0, 0, 0) 40%);
	
	position: absolute;
	left: 0;
	bottom: 2px;
	z-index: -1;
	
	will-change: width;
	/* transform: rotate(-2deg);
	transform-origin: left bottom */
}

.link:hover::before{
	width: 0;
}

.link::before{
	transition: width .1s ease-out;
}

.link:hover::before {
	transition-duration: .15s;
} 

/* ### wg fixed header */ 
/* #todo: landscape */
:target {scroll-margin-top: 150px;}

#showtime:target {scroll-margin-top: 24px;}

@media all and (min-width:37.5em) 
{
	:target {scroll-margin-top: 300px;}
	#showtime:target {scroll-margin-top: 24px;}

}

/* ### https://codepen.io/wtrbit/pen/xZxONW */
#admin div:target {
	-webkit-animation: highlight 1.5s;
			animation: highlight 1.5s;
  }
  @-webkit-keyframes highlight {
	0% {
	  background: transparent;
	}
	25% {
	  background: #bbdd554f;
	}
	100% {
	  background: transparent;
	}
  }
  @keyframes highlight {
	0% {
	  background: transparent;
	}
	25% {
	  background: #bbdd554f;
	}
	100% {
	  background: transparent;
	}
  }
.solo,
.pad {
	padding-right: 16px; 
	padding-left: 32px;
}

@media all and (min-width:37.5em) 
{
	.pad,
	.solo {
		padding-left: 16px;
	}
}
/* @media all and (min-width:50em) 
{
	.solo {
		padding-left: 32px;
	}
} */

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx #section ////////////////////// */

section {
	/* padding: 0 16px; MQ wg albatross */
	margin: 32px 0;
	line-height: 1.4;
}

section#events {
	margin-top: 0
}

#events > h2 {
	padding-left: 32px; /* MQ */
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx article /////////////////// */

article {
	padding: 2em 32px; 
	line-height: 1.5em; 
	margin: 0 0 48px 0;
	border-radius: 3px;
}

article h2 {
	font-size: 2em; 
	line-height: 1.1; 
	/* padding: 1em 0; */
}

/*article.event {
	padding-left:32px;  #MQ 
	margin-left: -16px;
}*/
#aktuelles article {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	border-bottom: 1px dotted #ddd;
}
	
/*
.section_padding {
	padding: 0 32px;  / * padding-left sollte teaser entsprechen  * /
	line-height: 1.4;
}*/


/* 37.5 = 600px */	
@media all and (min-width:37.5em) {
	body {
		width:100%
	}
	#wrap {
		padding:0 80px;
	}
}

@media all and (min-width:64em) {
	#wrap {
		max-width: 940px;
		margin: 0 auto;
	}
	/* .section_padding {padding: 0 } */
}

h3.solo {
		font-size: 1.5em; line-height:1;
	}
/* ///////////////////////////////////////////////////////////////////////// MQ /////////////////////// */

@media all and (min-width:37.5em) 
{
	section {
		padding: 2em 0; 
		line-height: 1.4em; 
		margin: 50px 0;
	}
	
	/* article */.event {
		padding:16px; /* MQ */
	}
	
	#events > h2 {
		padding-left: 16px; /* MQ */
	}
	article {
		padding: 2em 16px; 
	}
	#aktuelles article {
		margin-bottom: 0;
		padding-top: 0;
		padding-bottom: 1em;
		border-bottom: 1px dotted #ddd;
	}
	[data-theme="dark"] #aktuelles article {
		border-bottom: 1px dotted var(--StayDark)
	}
	h2.solo,
	h3.solo {
		padding: var(--component-padding) 16px var(--component-padding) 16px; 
	}
	h3.solo {
		font-size: 2em; 
	}
}
/* @media all and (min-width:50em) 
{
	h2.solo,
	h3.solo  {
		padding-left: 32px;
	}
} */



/* ////////////////////////////////////////////////////////////////////// Listen //////////////// */

ul li {
	margin:0; 
	padding:0
}
li {
	list-style:none
}

ul.hinweise,
ul.dotted {
	margin-left:-16px;  /**/
	padding-right: 1em;
}
ul.hinweise li,
ul.dotted li  {
	padding: 8px 0;
	list-style: square;
}

/* //////////////////////////////////////////////////////////////////////////////////////// */
/** ### Kommentare in socialmedia-links.css
https://flexbox.ninja/demos/buttons-with-icons/
The container and the item are both into flex layout. to align items to each other.
#todo if supports
*/
.socialmedia-links,
.socialmedia-links li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 0;
	margin: 0;	
}

.socialmedia-links {
	width: 100%;
	list-style: none;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	margin: 2em 0;
}

.socialmedia-links li {
	-ms-flex-preferred-size: 100%;
	    flex-basis: 100%; /* MQ für die 25% */
	-ms-flex-negative: 0;
	    flex-shrink: 0;
	-webkit-box-flex: 1;
	    -ms-flex-positive: 1;
	        flex-grow: 1;
	margin-bottom: 4px;
}

.socialmedia-links a {
	background: #9c0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	width: 100%;
	padding: .5em 1em;
	font-weight: 700;
	text-decoration: none;
	color: #000;
	margin-bottom:3px;
}
.socialmedia-links a:hover,
.socialmedia-links a:active{
	background: #ddd;
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}
/* 800px */
@media all and (min-width: 50em) 
{	
	.socialmedia-links {
		margin: 0;
	}
	.socialmedia-links:last-of-type {
		margin: 0 0 3em 0;
	}
	.socialmedia-links li {
		-ms-flex-preferred-size: 20%;
		    flex-basis: 20%;	
		margin-right: 4px;
		margin-bottom: 0;
	}
}

/* reingeholt aus D:\xampp\htdocs\p-kohi-relaunch-duplikat\tpl__solo2705.php -check andere Versionen */
ul.social-set {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	  -ms-flex-direction: row;
		  flex-direction: row;
	-ms-flex-wrap: wrap;
	-webkit-flex-wrap:wrap;
	  flex-wrap: wrap;
	/* -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center; */
	list-style: none;
	margin: 0;
	padding: 0;
	height: auto;
	width: auto;
}
.social-set.solo {
	padding-left: 32px; /* MQ */
}
ul.social-set li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
	
a.social { 
  background: var(--color_social, #e1efba);
  color: #000; /* oldie */
  color: var(--StayDark, #000);
  margin-right:8px;
  margin-bottom: 8px;
  border-radius: 2px;
	padding: .5em 1em;
	text-decoration: none;
}

a.social:hover, 
a.social:focus {
	background: var(--color_social_hover, #6d8785);
  color: #fff;
}
a.social:active {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}
/*
[data-size="large"] {
	padding: 2rem;
	font-size: 125%;
  }

  button[data-type="download"] { }
  .card[data-pad="extra"] { }

*/

ul.nav_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
	  -ms-flex-direction: column;
		  flex-direction: column;
 /*  -ms-flex-wrap: wrap;
	  flex-wrap: wrap;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center; */
  list-style: none;
  margin: 2em 0;
  padding: 0;
  height: auto;
  width: 100%;
}

ul.nav_bottom li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
	  -ms-flex-pack: center;
		  justify-content: center;
  -webkit-box-align: center;
	  -ms-flex-align: center;
		  align-items: center;
}

footer a { 
  background: #bd5;
  margin-right:0;
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	width: 100%;
	padding: .5em 1em;
	font-weight: 700;
	text-decoration: none;
	color: #000;
	margin-bottom:3px;
}
footer a:hover, 
footer a:focus {
  background: #6d8785;
  color: #fff;
}
footer a:active {
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}
/* .ctcb = copy to clipboard-specials */
li.ctcb {
	background: #bd5;
  margin-right:0;
  display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
		-ms-flex-pack: center;
			justify-content: center;
	-webkit-box-align: center;
		-ms-flex-align: center;
			align-items: center;
	width: 100%;
	padding: .5em 1em;
	font-weight: 700;
	text-decoration: none;
	color: #000;
	margin-bottom:3px;
}

li.ctcb:hover,
li.ctcb:focus {
	background: #6d8785;
	color: #fff;
}

li.ctcb::active {
	-webkit-user-select: none;
	-webkit-touch-callout: none
}	

@media all and (min-width: 50em) 
{
	ul.social-set,
	ul.nav_bottom {
	  -webkit-box-orient: horizontal;
	  -webkit-box-direction: normal;
		  -ms-flex-direction: row;
			  flex-direction: row;
	  -ms-flex-wrap: wrap;
	  -webkit-flex-wrap:wrap;
		  flex-wrap: wrap;
	  list-style: none;
	  margin: 0;
	  margin-bottom: 1em;
	  padding: 0;
	  height: auto;
	  width: auto;
	}
	.social-set.solo {
		padding-left: 16px; /* MQ */
	}
	ul.social-set li,
	ul.nav_bottom li {
	  display: -webkit-box;
	  display: -ms-flexbox;
	  display: flex;
	  -webkit-box-pack: center;
		  -ms-flex-pack: center;
			  justify-content: center;
	  -webkit-box-align: center;
		  -ms-flex-align: center;
			  align-items: center;
	}
	/* a.social { 
	  padding: 4px 6px;
	  background: #bd5;
	  color: #000;
	  margin-right:8px;
	  margin-bottom: 8px;
	  border-radius: 2px;
	}
	a.social:hover, 
	a.social:focus {
	  background: #6d8785;
	  color: #fff;
	} */
	footer a,
	li.ctcb { 
		border-radius: 2px; 
		margin-right: 8px;
		margin-bottom: 8px;
		width: auto;
	}
}


.tooltip {
position: relative;
color: #fff;
}

.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 170%;
left: 20%;
background: #444;
padding: 0.5em ;
color: #ddd;
border-radius: 4px;
opacity: 0;
transition: all 0.3s;
min-width: 10em;
max-width: 15em;
font-weight:normal;
}

.tooltip::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 1em solid #444;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
transition: all 0.3s;
opacity: 0;
left: 30%;
bottom: 90%;
}

.tooltip:hover::after,
.tooltip:focus::after {
opacity: 1;
bottom: 100%;
z-index: 5
}

.tooltip:hover::before,
.tooltip:focus::after {
opacity: 1;
bottom: 70%;
}

/* Youtube */
.tooltip_wide {
	position: relative;
	color: #fff;
}
	
.tooltip_wide::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 170%;
	left: 3%;
	right: 3%;
	background: #444;
	padding: 1em;
	color: #fff;
	border-radius: 4px;
	opacity: 0;
	transition: all 0.3s;
	font-weight:normal;
	line-height: 1.3;
}
	
.tooltip_wide::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 1em solid #bd5;
	border-left: .5em solid transparent;
	border-right: .5em solid transparent;
	transition: all 0.3s;
	opacity: 0;
	left: 80%;
	bottom: 90%;
}
	
.tooltip_wide:hover::after,
.tooltip_wide:focus::after {
	opacity: .9;
	bottom: 100%;
	z-index: 5
}
	
.tooltip_wide:hover::before,
.tooltip_wide:focus::after {
	opacity: 1;
	bottom: 70%;
}
@media (min-width: 60em) /* 960 */
{
	.tooltip_wide::after {
		bottom: 170%;
		left: 50%;
		right: 3%;
		min-width: 10em;
		max-width: 90%;
		min-height: 100px;
		line-height: 1.5;
	}
		
	.tooltip_wide::before {
		left: 90%;
		bottom: 90%;
	}
}

/* //////////////////////////////////////////////////////////////// figure //// */

#kunst figure {
	margin: 2em 0
}
figure img {
	display: block;
	max-width: 100%
}

figcaption p {
	margin:0 0 1em 0; 
	padding-top: 8px;
	padding-right: 8px;
	padding-left: 8px;
	color: #000;  /* oldie */
	color:var(--figcaption, #000);
	font-size: .8em;
	text-align: right;
	line-height: 1.1;
}
@media (min-width: 60em) /* 960 */
{
	figure {
		/* flex 
		display: flex; 
		align-items: flex-end; 
		justify-content: center; 
		padding-top: 0;
		*/
		/* 
		margin-bottom: 2em; 
		width: 1024px;
		*/
		max-width: 100vw;
	}

	figure > figcaption {		
		padding-right: 1em;
		padding-bottom: 1em;
		/* max-width: 30ch; */
	}
} /* Ende MQ min width 60em */


/* 
	https://stackoverflow.com/questions/37119835/add-horizontal-lines-between-elements 
	https://developer.mozilla.org/en-US/docs/Web/CSS/calc
*/

/* / ! ///////////////////////////////////////////////////////////////////////////////////////// #flexbox / */
/* no flexbox */
.flexbox,
.flexbox__heading,
.flexbox__media,
.flexbox__content {
	display: block;
}

/* /////////////////////////////////////////////////////////////////////// */
/* no flexbox oder zu schmal d20-05-18 */
.parent {
	display: block; /* < ----------------------- MQ ------- */	
}
.child
{
	display: block;
	margin: 16px 0 ;
	padding-bottom: 1em;
}
.child--content 
{
	color: #444;  /* oldie */
	color:var(--dark-light, #444);
}

#helpus .parent {
	padding: 0 32px;
}
@media (min-width: 37.5em) /* 600 */
{
	/* .child
	{
		border-bottom: 1px solid #ddd; 
	}*/

	#helpus .parent {
		padding: 0 16px;
	}
}

/* 
.grid {
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
          flex-direction: row;
  margin: 1rem;
}
.grid > * {
  margin: 0 0.5rem;
}
.grid > *:nth-child(1) {
  width: calc(100% / 3 * 2);
}
.grid > *:nth-child(2) {
  width: calc(100% / 3 * 1);
}
*/

/* ///////////////////////////////////////////////////////////////////////////////////////////// */
/* für den "Dreispalter"-Teil bei kohi-unterstuetzen */
@media (min-width: 50em) /* 1024 */
{	
	@supports (display: flex) {
		.parent {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;	
		}
		.child
		{
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-orient:vertical;
			-webkit-box-direction:normal;
			    -ms-flex-direction:column;
			        flex-direction:column; /* < ------------------------------ */
			-webkit-box-flex: 1;
			    -ms-flex: 1;
			        flex: 1; /* Kurzschrift:  flex-shrink, flex-grow und flex-basis */		
			margin: 0 8px;/* Space between columns */
			border-right: 1px solid #ddd;
			border-bottom: 0;
		}
		.child:nth-child(1) { 
			-webkit-box-flex:1; 
			    -ms-flex-positive:1; 
			        flex-grow:1; 
			-ms-flex-preferred-size: 33%; 
			    flex-basis: 33%
		}
		.child:nth-child(2) { 
			-webkit-box-flex:1; 
			    -ms-flex-positive:1; 
			        flex-grow:1; 
			-ms-flex-preferred-size: 33%; 
			    flex-basis: 33%; 
		}
		.child:nth-child(3) { 
			-webkit-box-flex:1; 
			    -ms-flex-positive:1; 
			        flex-grow:1; 
			-ms-flex-preferred-size: 33%; 
			    flex-basis: 33%; 
		}
		
		.child--content 
		{		
			-webkit-box-flex: 1;		
			    -ms-flex: 1;		
			        flex: 1;/* Take available height */
			padding: 4px
		}	
		
		#helpus .parent {
			padding: 0 22px; /* ??? FF */
		}
		
		#aktuelles .child
		{
			border-right: 0;			
		}
		#aktuelles .child:nth-child(1)
		{
			-webkit-box-flex:1;
			    -ms-flex-positive:1;
			        flex-grow:1; 
			-ms-flex-preferred-size: 33%; 
			    flex-basis: 33%; 		
		}
		#aktuelles .child:nth-child(2)
		{
			-webkit-box-flex:1;
			    -ms-flex-positive:1;
			        flex-grow:1; 
			-ms-flex-preferred-size: 70%; 
			    flex-basis: 70%; 			
		}
	}
}	
/* ////////////////////////////////////////////////////////////// */

.flexbox__media img.logo {
	width: 250px; 
	border: 1px solid #ddd; 
	padding-top: 0;
} 
/* MQ flexbox */
.eventHeading { 	  
  width: 100%; 
  border-bottom: 8px solid #333; /* oldie */
  border-bottom: 8px solid var(--StayDark, #333);
  margin-bottom: .5em; 
}

.eventHeading--datum h3 {
	color: #333; /* oldie */
	color:var(--dark-light, #333);
	padding-left: 4px;
	padding-bottom: 3px;
	line-height: 1.1;
	font-size: 1.8em;
}
.upcoming .eventHeading--datum h3 {
	color: #ddd; /* oldie */
	color: var(--lm_hellgrau, #ddd);
}

.eventHeading--eKat{
	color: #9c0;  /* oldie */
	color: var(--color-primary, #9c0);
	/* text-transform: uppercase; */
	padding-bottom: 3px;
	padding-right: 8px;
}

.eventHeading--eKat h3 {
	line-height:1.1; 
	font-size: 1.7em; /* dirty*/
	padding-left: 4px;
}

/* todo check, ob das in besseren Browsern noch taugt */
.flexbox__headline {
	color: #000;
	padding-bottom: 8px;
	border-bottom: 20px solid #9c0;
	margin-bottom: 24px;
}
.flexbox__headline h2 {
	color: #000; /* oldie - kann kein flexbox, drum auch hier */
}

#archiv .flexbox__headline {
	border-bottom: 20px solid #333;  /* oldie */
	border-bottom: 20px solid var(--StayDark, #333);
}
#archiv .eventHeading--eKat h3 {
	color: #908f8f;  /* oldie */
	color: var(--mittelgrau, #908f8f);
}

.eventHerkunft {
	display:inline; 
	font-size: .7em;
	color: #666;   /*oldie */
	color: var(--c-ddd, #666);
}
[data-theme="dark"] .eventHerkunft { color: #d4d4d4;}
.eventOrt {
	/*display:inline; 
	font-size: .7em;*/
	color:#444;
	font-family:var(--fontHeadingLight);
	letter-spacing: 3px;
}
[data-theme="dark"] .eventOrt { color: #d4d4d4;}
/* //////////////////////////////////////////////////// @supports ////////// */
@supports (display: flex) 
{  
	.flexbox {
		display:-moz-flex;
		display:-ms-flex;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;		
		/* align-items: start; */
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		    -ms-flex-direction:column;
		        flex-direction:column; /* < ------------------------- MQ -------- */
	}
	.flexbox__headline {
		-webkit-box-ordinal-group:2;
		    -ms-flex-order:1;
		        order:1;
	}
	
	.flexbox__media,
	.flexbox__eventbild	{
		-webkit-box-ordinal-group:3;
		    -ms-flex-order:2;
		        order:2;
		padding-top: 3em;
	}
	.flexbox__content{
		-webkit-box-flex: 1;
		    -ms-flex: 1;
		        flex: 1;
		-webkit-box-ordinal-group:4;
		    -ms-flex-order:3;
		        order:3;
		padding-top: 1em;
	}
	
	.flexbox__headline {
		border-bottom: 20px solid var(--color-primary, #9c0);
		padding-left: 4px;
		padding-bottom: 10px;
		width: 100%;
	}
	
	.flexbox__headline h2 {
		margin: -.8em 0 -1.5em 0; 
		color: var(--color, #000);
	}
	.flexbox__headline h2.mb_minus1 {margin-bottom: -1em} /* unschön todo*/

	.eventHeading {		
		display:-moz-flex;
		display:-ms-flex;
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		-webkit-box-orient:vertical;
		-webkit-box-direction:normal;
		    -ms-flex-direction:column;
		        flex-direction:column; /* < ---------------- MQ ----------------- */
		-webkit-box-align: start;
		    -ms-flex-align: start;
		        align-items: flex-start;   
		width: 100%;   
		padding-bottom: 2px;
	}
	.eventHeading--eKat{
		text-align: right; /* so schlicht...*/
	}
	
	.flexbox__media img.logo {
		width: 80vw; 
		border: 1px solid #ddd; 
		padding-top: 0; 
	} 
	.eventInfos {
		padding-bottom: 1em; 
	}
	.webadresse { 
		display:-webkit-box; 
		display:-ms-flexbox; 
		display:flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		    -ms-flex-direction: column;
		        flex-direction: column;
		padding-top: 1em;
	}
	/* 
	.webadresse a:first-of-type {margin-top: 1em;} 
	.webadresse a:last-of-type {
		margin-bottom: 1em;
	}
	*/
	#home .flexbox.ais-center {
		-webkit-box-align:center;
		    -ms-flex-align:center;
		        align-items:center;
	}
	
	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */
	/* "heute-Button" // RAUS aus goto-nav
	/* https://codepen.io/tallys/pen/NOrpMO  "heute" https://flexbox.help/ */
	.flex-parent {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		/* -webkit-flex-wrap: row;
			-ms-flex-wrap: row;
				flex-wrap: row; */
		/*justify-content: flex-end;  -- MQ weil "heute" nur ein Element */	
		margin-bottom: 8px;
	}
	.heute,
	p.heute {
		padding: 16px;
		transform: rotate(-10deg);
		background-color: rgba(249, 249, 137, 0.5); /*#f9f989c2;*/ /*#f9f989;*/
		min-width:200px;
		max-width: 350px;
		/* margin: 0 16px -48px -8px; 
		2020-09-15 13:23:52 */ 
		margin: 0 16px 8px -24px; 
		

		/* display: flex; */
		/* flex-direction: row; default */
		/* flex-wrap: nowrap; default */
		/* align-items: stretch; default */
		
		/*align-content: flex-end;  -- spielt keine Rolle, weil nur ein Element */	
	}
	[data-theme="dark"] p.heute {
		color: #000;
		background-color: rgba(249, 249, 137, 0.7); 
	}
	@media (min-width: 50em) {
		.flex-parent {
			justify-content: flex-start; 	
			margin-bottom: 0;
		}
		.heute,
		p.heute {
			transform: rotate(-10deg);
			/* margin: 0 0 -32px -32px; 
			2020-09-15 13:21:14
			*/
			margin: 0 0 8px -32px;
		} 
	}

	/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx MQ ///////////// */
	@media all and (min-width:37.5em) 
	{
		/* .box {		
			flex-direction:row;
			justify-content: space-between;
		}
		.event--img {
			width: 200px
		}
		.event--text {
			
		}
		.flexbox--content{
			flex: 1; 
		} */
		
		/* //////////////////////////////////////////////////////////////// */
		.eventHeading {		
			-webkit-box-orient:horizontal;		
			-webkit-box-direction:normal;		
			    -ms-flex-direction:row;		
			        flex-direction:row; /* < ------------------------------ */
			-webkit-box-pack: justify;
			    -ms-flex-pack: justify;
			        justify-content: space-between;
		}	
		.flexbox {
			-webkit-box-orient:horizontal;
			-webkit-box-direction:normal;
			    -ms-flex-direction:row;
			        flex-direction:row; /* < ------------------------------ */
			-ms-flex-wrap: wrap;
			-webkit-flex-wrap:wrap;
			    flex-wrap: wrap; 	/* < ------------------------------ */
		}
		.flexbox__heading {
			-webkit-box-ordinal-group:2;
			    -ms-flex-order:1;
			        order:1; /* alle items gleich => wie im Quellcode */
		}
		/* .flexbox__headline h2 {
			margin: -1em 0 -1em 0;
		} */
		.flexbox__media	{
			-webkit-box-ordinal-group:2;
			    -ms-flex-order:1;
			        order:1; /* alle items gleich => wie im Quellcode */
			margin-right: 32px; 
			width: 250px; /* ohne width keine Anzeige des Logos, Eventbilder sind aber da ? Wg svg? */
			padding-top: 2em;
		}
		.flexbox__eventbild	{
			-webkit-box-ordinal-group:3;
			    -ms-flex-order:2;
			        order:2; /* alle items gleich => wie im Quellcode */
			/* margin-right: 32px;  */
			width: 100%; /* ohne width keine Anzeige des Logos, Eventbilder sind aber da ? Wg svg? */
			padding-top: 2em;
		}
		.flexbox__content{
			-webkit-box-ordinal-group:4;
			    -ms-flex-order:3;
			        order:3; /* alle items gleich => wie im Quellcode */
			/* flex: 1; hab ich schon */
		}
		/* .home .flexbox__media a {border: 1px solid #ddd; } */
		.flexbox__media img.logo {
			width: 250px; 
			border: 1px solid #ddd; 
			padding-top: 0;
		} /* */
		
		
		

	} /* Ende MQ */
	
} /* Ende supports flex ////////////////////////////////////////////////////////////////////////////// */

/* /////////////////////////////////////////////////////////////////////////////////////////////////////// */


/* ///////////////////////////////////////////////////////////////////////// formular ///////////////// */
/* https://formvalidation.io/guide/getting-started/ */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button{ /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button{ /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
/* https://css-tricks.com/overriding-default-button-styles/ */
button {
    display: inline-block;
	border: none;
	border-radius: 4px;
    padding: 1rem 2rem;
    margin: 0;
	font-family: inherit;
    text-decoration: none;
    background: #bd5;
    color: #ffffff;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    -webkit-transition: background 250ms ease-in-out, 
                -webkit-transform 150ms ease;
    transition: background 250ms ease-in-out, 
                -webkit-transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

button:hover,
button:focus {
    background: #bd5;
}

button:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}

button:active {
    -webkit-transform: scale(0.99);
            transform: scale(0.99);
}
input {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}


button.fullwidth {
    cursor: pointer;
	width: 100%;
	border:0;
	margin-top:1rem;
    background-color: #bd5;
	font-weight: 700;
	text-transform: uppercase;
    border-radius: 0.25rem;
    padding: 16px;
    padding: 1rem;
	font-size: 1rem;
	color: #000;
}
button.fullwidth:hover, 
button.fullwidth:active
{
    color:#000;
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

/* https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features */
@supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

/* /////////////////////////////////////////////////////////////////////////////// BODY IDs //////////// */

/* #aktuelles article {padding: 1em 0}  */

#juris h2 {
	color:var(--dark-light); 
	padding: 0;
}

/* //////////////////////////////////////////////////////////////////////////////// div IDs //////////// */

/* // INFO es gibt eine kohi20-switch-mode-cookie-onscroll.css, die über kohi20__css.php aufgerufen wird
#colormode {
	position: absolute;
	top: 140px;
	right: 10vw;
}*/

#help {
	color: #444;
	font-size: .9em;
}

#main {
	min-height: 95vmin
} 

/* #todo CSS smallscreen... das passt nur für bigscreen:*/
#map { 
	width: 60vw; 
	height:50vh; 
	max-height: 400px; 
	margin:0; 
	padding:0 
}

#tickende_uhr {
	font-size: 3em; 
	color: #9c0;
	font-family: monospace
} 

/* //////////////////////////////////////////////////////////////////////////////// classes //////////// */

.accent {
	color: var(--color-accent);
}
.bold {
	font-weight: 700;
}

.datum {
	color: var(--color-contrast-high);
}

blockquote {
	margin-left: 0;
	margin-right: 0;
}
.editorial {
	color: var(--color);
	/* padding: 0 3em 0 0; */
	line-height: 1.6;
	font-family: monospace;
	font-size: 1.3em
}
@media (pointer: coarse) and (max-width: 37.5em) { 
	.editorial {
		padding: 0;
	} 
}

.eventExcerpt {
	margin-top: 2em;
}

.gattung {
	/* color: var(--color-primary);	 #accessibility: zu wenig Kontrast...*/
	color: #000; /* oldie */
	color: var(--color, #000); /* fast schwarz*/
	text-transform: uppercase;
	padding-top:8px;
	font-family: var(--fontHeading);
	letter-spacing: 2px;
	margin-top: 1em;
	margin-bottom: 2em;
	padding-left: 4px;
	border-top: 1px dotted #444; /* oldie */
	border-top: 1px dotted var(--dark-light, #444 );
	/* text-align:right; */
	/* padding-right: 4px; */
}
.gattung-mit-linie {
	color: var(--color-primary, #9c0);	
	text-transform: uppercase;
	padding-top:4px;
	font-family: var(--fontHeading);
	letter-spacing: 2px;
	margin-bottom: 2em;
	
	border-top: 1px dotted #444; /* oldie */
	border-top: 1px dotted var(--dark-light, #444);
	padding-top: 4px;
	margin-top: 2em;
}

.goback {
	padding: 2em 16px 1em 32px; /* MQ */
}

.indent {
	text-indent: -.5rem; /* ! ja rem oder: .3em */
}
.no-indent {
	text-indent:0;
}

.hinweis {
	color: #000; /* oldie */
	color: var(--color);
	font-size: .9em; 
	line-height: 1.1;
	font-weight:normal;
}

.kohigruen {
	color: var(--color-primary)
} 
.letterspaced1 {
	letter-spacing: 4px
}
.lh17 {
	line-height: 1.7
}
.logo {
	border: 1px solid #ddd; 
	padding:32px;
}
.marker {
	padding: 1px 4px;
	color: var(--color-contrast-high, #000);
	background: var(--lm_hellgrau, #bd5); /* bd5 hellgrün */
	border-radius: 3px;  
	text-transform:none;
	font-family: var(--fontFliesstext);
}

a.marker {
	color: var(--StayDark, #000);
	text-decoration: none;	
	letter-spacing: 2px;
	font-weight: 400;
}

.marker:hover,
.marker:active {
	background: var(--color-primary, #9c0);
	color: var(--StayDark, #000);
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

.no-filter {
	-webkit-filter: grayscale(0%);
	        filter: grayscale(0%); 
}

.mb50px {
	margin-bottom: 50px;
}
.mb2 {
	margin-bottom: 2em;
}
.mb5 {
	margin-bottom: 5em;
}
.mt2 {
	margin-top: 2em;
}

.smaller {
	font-size: smaller
}
.teaser {
	padding: 1em 32px 1em 32px; /* MQ auskommentiert 20-06-18 */
	font-weight:bold;
	line-height: 1.5;	
	color: #444; /* oldie */
	color: var(--dark-light, #444);
	font-size: 1.2em;
}
[data-theme="dark"] .teaser {
    font-weight:normal;
}

.webadresse a.marker {
	margin-bottom: .5em;
	padding-left: 6px;
}

@media all and (min-width:37.5em) {
	.teaser {
		padding-left: 16px;   
	}
	.goback {
		padding-left: 0; 
	}
}

@media all and (min-width:64em) {
	.teaser {
		padding-left: 16px;  
		padding-right: 80px;
	}
	#home .teaser,
	#archiv .teaser	{
		padding-right: 16px;
	}	
	.gattung {
		padding-left: 4px
	}	
}

/* ### https://wiki.selfhtml.org/wiki/CSS/Media_Queries //////////////////////////////////////////////////// */
/* ### fine: für Geräte mit Maus, Touchpad oder Eingabestift */
/* ### coarse: für Geräte mit Touch- oder Gestensteuerung */
/* ### none: nur Tastatureingabe möglich */
@media only screen and (pointer: coarse) and (-webkit-device-pixel-ratio : 2)
{
	/* 
	input {
		padding: 1em;
		font-size: 2em;
	} 
	*/
	.teaser {
		padding-left: 16px;   
	}
}
/* ### Bei Touchgeräten werden die Schriftgröße und der Innenabstand des Eingabefelds entsprechend vergrößert. */
/* ### Beachten Sie: Sie können mit pointer und any-pointer nicht 100% auf bestimmte Geräte schließen. 
Allerdings können Sie in Kombination mit der Displaybreite sehr gut erkennen, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. 
### iPhone X Resolution
Screen Width = 375px (CSS Pixels)
Screen Height = 812px (CSS Pixels)

Screen Width = 1125 (Actual Pixels)
Screen Height = 2436 (Actual Pixels)

=> Device-pixel-ratio: 3
 */

::-moz-selection {
	background: #bd5; /* #F34A4E */
	color: #000;
}
::selection {
	background: #bd5; /* #F34A4E */
	color: #000;
}

.sr-only {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.sondermeldung {
	background: var(--bg-sondermeldung); 
	color: var(--color-contrast-high);
	padding: 1em; 
	line-height: 1.5em;
	border-radius: 3px;
	margin: 3em 0;
	margin-left:-16px;
}
.sondermeldung h2 {
	font-family: var(--fontAnnouncement);  
	font-size: 3em;
	line-height: 1;
	margin: -.5em 0;
}
@media (pointer: coarse) and (max-width: 37.5em) { 
	.sondermeldung h2 {	
		font-size: 2em;
	}
}

.webadresse {
	padding-bottom: 4px
}
.webadresse.yt {
	border-bottom: 0;
	padding-bottom: 4px
}
.webadresse a {
	color: #000; /* oldie */
	color: var(--color, #000); /* fast schwarz*/	
	font-family: var(--fontHeadingLight);
	letter-spacing: 3px;
	font-weight:normal;
}

[data-theme="dark"] a.marker {
    background: #bd5;
}

[data-theme="light"] .webadresse a {
    font-family: var(--fontHeading); 
}
[data-theme="dark"].webadresse a {
    font-family: var(--fontHeadingLight);
}

.webadresse a.social {
	color: var(--StayDark, #000);
	font-weight:normal;
}
.webadresse a.social:hover {
	color: #ddd;
}

[data-theme="dark"] .webadresse a.marker {
	background: var(--lm_hellgrau, #444);
}
[data-theme="dark"] .webadresse a.marker:hover {
	color:#fff;
	background: #666;
}


.youtube {
    position: relative;
    padding-bottom: 56.25%; /* proportion value to aspect ratio 16:9 (9 / 16 = 0.5625 or 56.25%) */
    height: 0;
	margin: 4em 0 6em 0;
	border: 1px solid var(--darkOnDark, #444);	 	
	border-radius: 1px; 

}
.youtube > div {
	border-radius: 3px; 
	font-size: .9em;
	line-height:1.1;
	text-align: right
}
.youtube iframe,
.youtube object,
.youtube embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border:none;
}
.yt_overlay {
	color:#fff;
	padding:16px;
	position:absolute;
	bottom:0;
	z-index:5; 
	background-color: rgba(68, 68, 68, 0.4);
}
.yt_overlay--start {
	cursor:pointer; 
	background: #ddd; 
	padding: 6px; 
	border-radius: 3px; 
	color:black; 
	text-decoration:none;
}
/* 
-> für functions/fct_embed_youtube.php
*/ 
.yt_info_zf {
	color:#fff;
	padding:16px;
	position:absolute;
	bottom:0;
	z-index:5; 
	background-color: rgba(68, 68, 68, 0.4);
	width: 100%
}
.yt_info_zf > p {
	margin-bottom: 2em;
	text-align: right;
}
/*button für "Video starten" = vs */
.yt_button-vs {
	cursor:pointer; 
	background: #ddd; 
	padding: 6px;
	border-radius: 3px; 
	color:black; 
	text-decoration:none
}
.yt_button-vs:hover {
	background: #bd5; 
}

/* /////////////////////////////////////////////////////////////// icons ////////////////// */

svg.icons {
	/* wg SVG-gap beim Einbinden */
	height:0; 
	/* font-weight:0; ungültige Eigenschaft(?) */
	display:block
}
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  padding-top: 8px;
}

.icon.icon-search  {
  /* fill: #606468; */
  fill: #bd5;
  font-size: 2em;  
  vertical-align: middle;
  padding-top:0;
}

.icon.icon-checkmark {
	font-size: 3em; 
		/* padding-top: 0; */
	padding: 2px;
	fill: black;
}

/* svg E:\downloads\icons\zondicons\zondicons\arrow-thin-left.svg */
.icon-arrow-up {width: 1.5em; height:1.5em; padding-left: 6px}
.icon-arrow-left,
.icon-arrow-right {width: 3em; height:3em}

.icon-location {
	width: 1.3em; 
	height: 1.3em;
	margin-left: -24px; 
	margin-right: 4px;
	padding-top:0;
}
.icon-location:hover {
	fill: #9c0;
}
.hoverit:hover {background: #9c0;  }

/* xxxxxxxxxxxxxxxxxxxx JS /////// click-to-scroll-up /////////////////// */
#click-to-scroll-up {
	display:none;	
	right: 5%;
	bottom:1em;
	background-color: #000;
    color:#fff;
	text-align:center;
	cursor:pointer;
	width: 40px;
	height: 40px;
	padding:0;
	-webkit-transition: background 1s;
	transition: background 1s;
    font-size: 2em;
	z-index:5;
	position:fixed;
	border-radius: 2px;
}

@media (min-width: 25em) /* 400px */
{
	#click-to-scroll-up {
		right: 5%;
		bottom: 3%;
	}
}
#click-to-scroll-up:hover,
#click-to-scroll-up:active  {
    background-color: #444;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}
.js_to-top {
	outline:none;
}

/* ////////////////////////////////////////////////////////////////////////////////////////////  */


/* 18.06. aus D:\xampp\htdocs\p-kohi-relaunch\tpl__standard-test2205.php  geholt */
/* filter */
.filterDiv,
article .filterDiv {
  /* float: left;
  background-color: #2196F3;
  color: #ffffff;
  width: 100px;
  line-height: 100px;
  text-align: center;
  margin: 2px; */
  display: none; /* ------------------ */
}

.show,
article .show {
  display: block;/* ------------------ */
}
.btn {
    display: inline-block;
    padding: 0.5em 1.5em;
    border-radius: 3px;
    cursor: pointer;
}

.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #444;
  color: #bd5;
   outline: none;
}

.cool {color: red;}
.monat_jahr {
	display:block; 
	/*visibility:visible;*/
}
.monat_jahr.hidden {
	display:none;
	/*visibility:hidden;*/ /* Platz bleibt erhalten -> kein Hüpfen aber mehr Abstand - natürlich */
}

/* ///////////////////////////////////////////////////////////////////////////////////////////// nice  /////////// */

/* https://css-tricks.com/styling-underlines-web/ text-decoration-skip*/
/*
text-decoration: none;                
text-decoration: underline red;   
.ink {
  text-decoration-skip: ink;
}    
*/


/* ////////////////////////////////////////////////////////////////////// accessibility //////////////////////// */

.visually-hidden,
.byline {
  /* Remove the item from normal flow */
  position: absolute;
  /* Workaround for falsely pronounced, smushed text */
  white-space: nowrap;
  /* Set it to the smallest possible size (some screen readers ignore elements with zero height and width) */
  width: 1px;
  height: 1px;
  /* Hide overflowing content after resizing */
  overflow: hidden;
  /* Reset any property that may change the elements size */
  border: 0;
  padding: 0;
  /* Clipping defines what part of an element should be displayed. */
  /* Deprecated clip property for older browsers */
  clip: rect(0 0 0 0);
  /* clip-path for newer browsers. inset(50%) defines an inset rectangle that makes the content disappear.  */
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%); 
   /* It seems like at the moment nobody is quite sure why margin: -1px is there. On top of that it seems to cause issues (see: https://github.com/h5bp/html5-boilerplate/issues/1985). */
  margin: -1px;
  /*
  Save this class somewhere and use it whenever you want to hide content visually and 
  still make is accessible to assistive technology and search engines.
  */
}

/* ////////////////////////////////////////////////////////////////////////////////// print //////////// */

.only-print{display:none}
@media print  { .noprint  { display: none; } }
@media screen { .noscreen { display: none; } }

/* ////////////////////////////////////////////////////////////////////////////////// no-js //////////// */

#noscript-warning a {
	color:#000
}
.js .no-js {
	display: none;
}
.no-js .js {
	display:none;
}
.no-js #noscript-warning {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack:center;
	    -ms-flex-pack:center;
	        justify-content:center;
	-webkit-box-align:center;
	    -ms-flex-align:center;
	        align-items:center; 
	background:red;
	
	position:absolute;
	top: 300px;
	
	padding: 0!important;
	margin: 0!important;
	z-index:50;
}

.no-js #noscript-warning div {
	padding: 1em; 
	color: #fff!important;
	max-width: 100vw;
}

.no-js img {
	width: auto;/* + Angabe von width und height im HTML */
} 

/* ////////////////////////////////////////////////////////////////////////////////// responsive //////////// */
/* https://almostinevitable.com/css-responsive-line-breaks/ 
#use <br class="ssc-br" /> linebreak nur on smallscreen
*/
/* MQ 34em 550px / 37.5 - 600px */
/* @media all and (max-width:37.5em) { */

.ssc {display:block}
	
.bsc,
.lsc,
.desktop-br {
	display: none;
}

.ssc-br {display: inline;}

@media all and (max-width:37.4em) 
{
	/* todo weil HACK 2020-08-08 */
	li.bsc {
		display:none!important; /* ja, leider */
	}
}

@media all and (min-width:37.5em) 
{
	.ssc:not(li) {
		/* display: none!important; */
		position: absolute;
		white-space: nowrap;
		width: 1px;
		height: 1px;
		overflow: hidden;
		border: 0;
		padding: 0;
		clip: rect(0 0 0 0);
		-webkit-clip-path: inset(50%);
		        clip-path: inset(50%); 
		margin: -1px;
	}
	
    .desktop-br {display: inline;}
	.bsc {display:inline-block;}
	.ssc-br {display: none;}
	
}


@media all and (min-width:50em) 
{
	.lsc {display:inline-block;} /* lsc largescreen*/
	.ssc {
		/* display: none!important; */
		position: absolute;
		white-space: nowrap;
		width: 1px;
		height: 1px;
		overflow: hidden;
		border: 0;
		padding: 0;
		clip: rect(0 0 0 0);
		-webkit-clip-path: inset(50%);
		        clip-path: inset(50%); 
		margin: -1px;
	}
}



/* ////////////////////////////////////////////////////////////////////////////////////// dev //////// */
/*halleluja*/
pre {
	white-space:pre-wrap;
	word-wrap: break-word;	
	word-break: break-word;
	-webkit-hyphens: auto;
	    -ms-hyphens: auto;
	        hyphens: auto;
	hyphenate-limit-chars: 6 3 2; /* FF: Unbekannte Eigenschaft 'hyphenate-limit-chars'.  Deklaration ignoriert. */
}
pre code {
  display: block;
  padding: 1em; }

code {
  padding: 0.2em;
  font-family: 'Source Code Pro', Courier, monospace;
  border-radius: 3px; }
.dev {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
} 
s,.hinweis {
	color: FIREBRICK
} 
.todo {
	color: darkorange
} 
/*
https://csslayout.io/
https://flexbox.help/
https://codingcompiler.com/regular-expressions-web-developers/
https://www.mediaevent.de/css/supports.html
*/


.parent {
	display: block; /* < ----------------------- MQ ------- */	
}
.child
{
	display: block;
	margin: 16px 0 ;
	padding-bottom: 1em;
	/* border-bottom: 1px solid #ddd; */
	border-right:0;
}
/* 
.child--content 
{
	color: green; 
}
*/
#helpus .parent {
	padding: 0 32px;
}
@media (min-width: 37.5em) /* 600 */
{
	#helpus .parent {
		padding: 0 16px;
	}
	.child--content 
	{		
		padding: 4px 0;
	}	
}


/* ############################################################################## */
/* für den "Dreispalter"-Teil bei kohi-unterstuetzen */
@media (min-width: 50em) /* 40em=640 50em=800 */
{	
	@supports (display: flex) {
		.parent {
			display: flex;	
		}
		.child               {
			display: flex;
			flex-direction:column; /* < ------------------------------ */
			flex: 1; /* Kurzschrift für:  flex-shrink, flex-grow und flex-basis */		
			margin: 0 48px 0 0;/* Space between columns */
			border-right: 0;
			border-bottom: 0;
			
		}
		.child:nth-child(1) { 
			flex-grow:1; 
			flex-basis: 33%
		}
		.child:nth-child(2) { 
			flex-grow:1; 
			flex-basis: 33%; 
		}
		.child:nth-child(3) { 
			flex-grow:1; 
			flex-basis: 33%; 
		}
		
		.child--content 
		{		
			flex: 1;/* Take available height */
			padding: 4px 0;
			/*color: blue*/
		}	
		/* #helpus .parent {
			padding: 0 22px; ??? FF
		} */
		#aktuelles .child
		{
			border-right: 0;			
		}
	}
}	


.marker.highlighted {color:white;} .copyMessage {font-style:italic; font-size: .8rem; padding-top: .5em; opacity: 0;visibility: hidden;transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s; } .copyMessage.show {opacity: 1;visibility: visible;transition: opacity 0.3s ease-in-out, visibility 0s linear;} /* @charset "UTF-8"; bringt beim Zusammenführen in FF diesen Fehler: Regelsatz wegen ungültigem Selektor ignoriert. */

/* https://www.mediaevent.de/tutorial/css-transform.html */
 .hamburg {
     display: block;
     background: #555;
     width: 75px;
     /* height: 48px; */
     position: relative;
     margin: 0 auto;
 }

 .line {
     position: absolute;
     left:32px;
     height: 3px;
     width: 48px; 
	 /* width: calc(100% - 20px);*/
     background: #9c0;
     border-radius: 2px;
     display: block;
     transition: 0.5s;
     transform-origin: center;
	 
	 /* flicker*/
	 transform-style: preserve-3d;
	 backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
 }

 .line:nth-child(1) { top: 10px; }
 .line:nth-child(2) { top: 22px; }
 .line:nth-child(3) { top: 34px; }

 .hamburg.checked .line:nth-child(1){
    transform: translateY(12px) rotate(-45deg);
 }

 .hamburg.checked .line:nth-child(2){
    opacity:0;
 }

 .hamburg.checked .line:nth-child(3){
    transform: translateY(-12px) rotate(45deg);
 }

#js_menutoggle {
	width: 100%;
	margin: 0;
	color: #555;
	height: 48px;
	text-align: left;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .5s linear 0s;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	position: relative;	
	
	border-bottom: 1px solid #555;
	
	/* flicker*/
	transform-style: preserve-3d;
	backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
}
#js_menutoggle {
	display: block
}
#js_menutoggle span {
	display: none
}
#js_menutoggle:before {
	margin-left: 0;
	height: 48px;	 
	content: "Menu"; /*Text auf Navigationbalken */
	/* content: ""; ersetzt mit hamburg-Balken 100% */
	padding: 0 0 0 100px;
}
#js_menutoggle.js_menu-is-open:after, 
#js_menutoggle:before {
	display: inline-block;
	color: inherit;
	line-height: 48px;
	text-align: center;
	font-size: 24px
}
/* */
#js_menutoggle.js_menu-is-open:after {
	content: "\00A0schliessen";
	vertical-align: top 
}

#js_menutoggle.js_menu-is-open, 
#js_menutoggle:active, 
#js_menutoggle:hover {
	color: #bd5
}


#js_menutoggle.js_menu-is-open+ul {
	max-height: 100vh;
	opacity: 1;
	transition: max-height .9s ease-in-out, opacity .5s ease-in-out
}

#js_io-helper {
	/* TEST
	height: 10px;
	background-color: red;  */
	height: 0;
	background-color: #000;/* transparent; => weiß */ 
}

body.js_nav-fixed #nav {
	position: fixed;
	width: 100%;/* */	
	top: 0;
	/* width: calc(100% - 20px);  */
}

#nav {
	z-index: 10;
	background-color: #000;
	width: 100%;
	/* width: calc(100% - 20px); */
	font-family: var(--fontHeading), Tahoma, sans-serif;
	/*border-top: 1px solid #000;  Ziel: Ausgleich fuer js_io-helper mit 1px => MQ */
}

#nav ul {
	margin: 0;
	padding-left:0;
	width: 100%;
	opacity: 0;
	max-height: 0;
	background: #fff;
	transition: max-height .5s cubic-bezier(0, .7, 0, 1), opacity .5s ease-in-out;
	position: relative;
	top: 1px
}

#nav li, 
#nav ul {
	display: block;
	overflow: hidden;
	border: 0
}

#nav li {
	height: auto;
	border-bottom: 10px solid #9c0;
	/* padding-left: 0 */
}

/* 
#nav li:first-child, 
li.js_li-is-active {
	
} 
#nav li:last-child{
	border-bottom: 10px solid #9c0;
}
*/

/* class current via php */
#nav li.current  {
	background: #9c0; /* var(--kohigruen) <- dkl gruen */
	/* background: #233a40; 
	color:#fff;
	padding-top: 8px;  
	padding-bottom: 8px; */
	padding-left: 48px;
	border-bottom:10px solid #9c0; 
	text-transform: uppercase;
	letter-spacing: 1px;
}

#nav li.first,
#nav li.current.first {
	border-top: 10px solid #9c0;

} 

/* 576 px */
@media (min-width:36em) 
{
	#js_menutoggle span {
		display: inline-block
	}
	/*body.js_nav-fixed #nav {margin-left:-80px; MQ}*/
}

/* 
#nav [class^=js_menu-is-open] {
	background: #ffdf19 
}
*/

/* LVHA-Reihenfolge einhalten: :link — :visited — :hover — :active. */
#nav a {
	display: block;
	color: #000;
	text-decoration: none;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	transition: background .2s linear 0s;
	cursor: pointer;
	margin: 0;
	padding: 8px 48px;
	height: auto;
	/* line-height: 1.6; */
	text-align: left;
	border: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	
	/* flicker*/
	transform-style: preserve-3d;
	backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
}
#nav a:visited {
	color: #9c0;
	/*background: #ddd; 2020-07-07 17:19:38*/
	text-decoration: none
}

#nav a:visited:hover,
#nav a:hover  {
	/* background: #ddd; => auf das li setzen */
	color: #000
}
nav li:hover {
	background: #bd5
}

/* hmm. Violation reflow wegen reveal?*/
#nav li.reveal {
	/* display:none */
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
} 


/* ######################################################################### MQ ### */
/* 800px */
@media (min-width:50em) 
{
	#js_menutoggle,
	.line {
		display: none
	}
	#nav {
		left: 0;
		border-bottom: 30px solid #9c0;
	}
	
	body.js_nav-fixed #nav {
		width: 100%;
		margin-left:0 /*MQ*/
	}	
	#nav ul {
		display: flex;
		margin: 0;
		padding-left: 32px;
		opacity: 1;
		max-height: none;
		border-top: 0;
		top: 0
	}
	#nav li {
		width: auto;
		border: 0;
		padding: 0 8px;
		background: #fff;
	}
	/* 2020-07-07 17:22:15*/
	#nav li:hover,
	#nav li:active	{
		background:#bd5;
		-webkit-user-select: none; 
		-webkit-touch-callout: none
	}
	
	#nav li:first-child {
		border-left: 0
	}
	#nav a {
		padding: 8px 8px
	}
	#nav li.current,
	div.current {
		color: indianred;
		border-bottom:0;
		padding-left: 16px;
	} 
	#nav li.current {
		background: #fff;
		padding-top: 12px;
		padding-bottom: 8px
	}
	div.current:hover {
		background:#bd5
	}

	#nav li.first {
		border-top: 0;
	} 
	#nav li.current.first {
		border-top: 0; 
		padding-left:8px;
	} 
	
	.flex-center {
		justify-content: center;
		align-items:center;
	}
	
	li.reveal a {
	  color:black;
	}
	#nav li.reveal {
		position: relative;
		/* neeein! display:block; */ 
		width: auto; 
		height: auto; 
		max-width: 100px; 
		font-size: 1em;		
		padding-top: 1em; 
	} 
	#nav li.reveal img {
	  display: none;
	}

	#nav li.reveal::before {
		content:"KOHI ";
	}
	#nav li.reveal:hover {
		background:transparent;
	}
	
	.js_nav-fixed #nav li.reveal::before {
		content: "";
	}
	
	.js_nav-fixed #nav li.reveal {
		/* clip: rect(1px, 1px, 1px, 1px); overflow: hidden; */
		position: relative;
		height: auto;
		width: auto;
	}
	.js_nav-fixed #nav li.reveal {
		/*max-width: 0;  weil: width kann nicht animiert werden */
		overflow: hidden;
		background: white;
		transition: all 1s;
		font-size: 48px; /* wirkt sich auf die Höhe aller lis aus (???) */
		padding-top: 0;
		max-width: 300px; 
		/* flicker */
		transform-style: preserve-3d;
		backface-visibility: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	.js_nav-fixed #nav li.reveal img {
		max-width:100%;
		display: block;
	}	
} /* Ende MQ min-width 50em */

/* bis 9820
@media screen and (max-height: 634px)  {
	ul.flex-center {
		display:block!important
	}
	/* #nav li { */
		/* display:inline-block; */
		/* margin-right: 8px */
	/* } */
}  /*Ende MQ max-height: 640px */


/* DROPDOWN on BIGSCREEN /////////////////////////////////////////////////// 2020-07-07 16:10:35 */
header > nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
}

	header > nav > ul > li {
		flex: 0 1 auto;
		margin: 0;
		padding: 0;
		position: relative;
		transition: all linear 0.1s;	
	}

	header > nav > ul > li > a {
		max-width: 500px;
		/*font-size: 1.3rem;*/
		line-height: 2rem;
		display: flex;
		align-items: flex-start;
		transition: all linear 0.5s;
		color: #fff;
	}

	header > nav > ul > li > a > div > span {
		margin: 4px 0 0;  
		/*color: black;*/
		display: block;					
		font-size: .9rem;	
		line-height: 1rem;
		max-width: 260px;
	}

		header > nav > ul > li a + div {
			display: none;
			position: absolute;
			width: 195px;
			/*margin-left: -8px;*/
			visibility: hidden;
			opacity: 0;
			transition: all 0.5s ease;
			margin-top: 0;
			left: 0;
		}
		
			header > nav > ul > li:hover a + div,
			header > nav > ul > li:focus-within a + div {
				display: block;
						visibility: visible;
						opacity: 1;
			}
			
			header > nav > ul > li a + div > ul {
				list-style-type: none;	
				z-index:20;
				
			}
			
				header > nav > ul > li a + div > ul > li {
					margin: 0;
					padding: 0;
				}
				
					header > nav > ul > li a + div > ul > li > a 
					{
						color:black;
						display: block;	

						visibility: visible;
						opacity: 1;
					}

	

@media (min-width: 50em) 
{
	#nav {
		background: #fff;
	}
	/* ja, beides, ja, unset - ich überschreibe meine eigenen Sachen */
	#nav ul,
	#nav li {
		overflow: unset;
	}
	.flex-center {
		align-items:unset
	}
	#nav li.reveal {padding-top: 12px;}
	
	#nav ul {
		padding-left: 0;
	}
	#nav li {
		background: transparent
	}
	#nav a:visited {
		color:unset
	}
	#nav li:focus-within {
		background:#bd5;
	}
	#nav li:focus-within a {
		outline: none;
		color:#000;
	}
	#nav ul ul {
		padding-left:0;
		display:flex;
		flex-direction: column;
	}
	#nav ul ul li{
		border-top: 4px solid #bd5
	}
	#nav ul ul:hover li:first-of-type{
		border-top: 4px solid #fff
	}
	#nav ul ul li:last-of-type{
		border-bottom: 4px solid #bd5
	}

} /* Ende MQ *//* 19.06. // 23.05. */
.toggle {
    margin: 1em 0 0 calc(100% - 100px);
    position: relative;
    display: inline-block;
    width: 6rem;
    height: 3.4rem;
}
@media (min-width: 37.5em) { 
	.toggle {
		margin:1em 0 0 calc(100% - 2rem);
	}
}
.toggle input {    	
	opacity: 0;
	transition: opacity 0.3s;
}

.roundbutton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
	background-color: var(--button-initial,#ddd);
    display: block;
    transition: all 0.3s;
    border-radius: 3.4rem;
    cursor: pointer;
}

.roundbutton:before {
    position: absolute;
    content: "";
    height: 2.4rem;
    width: 2.5rem;
    border-radius: 100%;
    display: block;
    left: 0.5rem;
    bottom: 0.5rem;
	background-color: var(--user-switchOff, #fff);
    transition: all 0.3s;
	/* NEIN, sonst gar nicht da!  opacity: 0; transition*/
}

.toggle input:checked + .roundbutton {
	opacity: 1; 
}

/* user switched, Farbe des Kreises */
.toggle input:checked + .roundbutton:before  {
    transform: translate(2.6rem, 0);
	opacity: 1; 
	background: black;
	background-color: var(--background-color);
}	

#the-cookie-box {
	transition: all .5s ease-in-out  
}
#the-cookie-box.is-visible  {
	display: flex; /* <------ nicht block! */
	align-items: center;
    justify-content: center;	
	flex:1;

	opacity: 1;	
	z-index:10;  
	
	padding:24px;	
	margin-top: 1em;
	width: 100%;	
	height: auto;
	background: #ddd;
	color: black;		
	/* border-radius: 3px; MQ */
	
	transition: opacity .7s ease-in-out; 
	
	overflow: auto;	
	-webkit-overflow-scrolling: touch;
}
#the-cookie-box.hidden {
	max-height: 0;
	padding:0;
	visibility: hidden; /* unabdingbar für iOS */
	opacity: 0;
	transition: all .2s ease-in-out;
	position: absolute;
	bottom:0;
}
#the-cookie-box div  {
	padding-right: 16px
}

#the-cookie-box.is-visible a {
	color:#000;
}

@media all and (min-width:37.5em) {
	#the-cookie-box.is-visible  {
		border-radius: 3px;
	}
}

/* //////////////////////////////////////////////////////////// cookie-banner x ///////////// */

/* ### based on https://csslayout.io/patterns/close-button */
.close-button {
	background-color: white;
    border-color: transparent;
	padding: 4px;
    cursor: pointer;
    /* Used to position the inner */
    position: relative;
}
.close-button:hover,
.close-button:active {
	background: var(--color-primary);
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}

.backslash{
	background:black;
	background-color: rgba(0, 0, 0, 0.8);

	left: 0px;
	position: absolute;
	top: 50%;
	transform: translate(0%, -50%) rotate(45deg);

	height: 3px;/* Size - Breite des Strichs */
	width: 100%;
}	
.slash{
	background:black;
	background-color: rgba(0, 0, 0, 0.8);

	left: 50%;
	position: absolute;
	top: 0;
	transform: translate(-50%, 0%) rotate(45deg);

	height: 100%;
	width: 3px; /* Size - Breite des Strichs */
}	

.no-js #the-cookie-box {position:relative; }

#buttonResetCookie:hover,
#buttonResetCookie:active{
	background: indianred;
	-webkit-user-select: none; 
	-webkit-touch-callout: none
}