@charset 'utf-8';

/* ¡Renormasaniset */
*, ::before, ::after {background-repeat: no-repeat; box-sizing: border-box;} html {-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -ms-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 3; -ms-hyphenate-limit-lines: 3; hyphenate-limit-lines: 3; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll;} body {background-color: transparent;} a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,label,legend,li,main,mark,menu,nav,object,ol,option,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video {margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} input {overflow: visible;} button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;} [type="checkbox"], [type="radio"] {padding: 0;} [type="search"] {-webkit-appearance: textfield; outline-offset: -2px;} textarea {overflow: auto; resize: vertical;} ::-webkit-input-placeholder {color: inherit; opacity: 0.1;} :-webkit-search-decoration {-webkit-appearance: none;} [hidden] {display: none;} audio, video {display: inline-block;} a {background-color: transparent; text-decoration:none } a, area, button, input, label, select, summary, textarea, [tabindex] {-ms-touch-action: manipulation; touch-action: manipulation;} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:'';content:none} table{border-collapse:collapse;border-spacing:0} b,strong{font-weight:bold} em,i{font-style:italic} h1,h2,h3,h4,h5,h6{font-weight:400} button, input, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit;} abbr[title]{text-decoration: underline; text-decoration: underline dotted; cursor:help;} img {border-style: none; -moz-user-select: text; -webkit-user-select: text; user-select: text; -moz-user-drag: none; -webkit-user-drag: none; user-drag: none;} svg {fill: currentColor;} svg:not(:root) {overflow: hidden;} article p, article > ul:not(.downloads):not(.audio):not(.index):not(.filter), article > ol, article > * > li {margin: 0 0 .5em 0;} article:not(.kurse) > *:not(.downloads):not(.audio):not(.news):not(.index):not(.filter) > li {padding-left: 1.5em; text-indent: -1.5em;} article:not(.kurse) > ul:not(.downloads):not(.audio):not(.news):not(.index):not(.filter) > li:before {content: '» '; display: block; float: left; width: 1.5em;} article > ol {counter-reset: liste; list-style-type: none;} article > ol > li:before {counter-increment: liste; content: counter(liste) "."; display: block; float: left; width: 1.5em;}
/* Renormasaniset! */

@font-face {
font-family: 'AveriaSansLibre';
src: url("../fonts/AveriaSansLibre-Bold.woff2") format("woff2"),
		 url("../fonts/AveriaSansLibre-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'AveriaSansLibre';
src: url("../fonts/AveriaSansLibre-Light.woff2") format("woff2"),
		 url("../fonts/AveriaSansLibre-Light.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'AveriaSansLibre';
src: url("../fonts/AveriaSansLibre-LightItalic.woff2") format("woff2"),
		 url("../fonts/AveriaSansLibre-LightItalic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}

body {
font-family: 'AveriaSansLibre', sansserif;
font-size: 20px;
line-height: 1.5em;
background: FloralWhite;
position: relative;
}

body > svg {
width: 100%;
position: absolute;
top: 0;
fill: beige;
z-index: 1;
}

body > * {
position: static;
z-index: 100;
}

a, 
a * {
transition: all 250ms ease-in;
}

a {
color: MediumVioletRed;
border-bottom: 1px solid transparent;
}

a:hover {
color: DeepSkyBlue;
border-bottom-color: MediumVioletRed;
}

a.knopf {
display: inline-block;
padding: .5em;
margin: 0 0 1.5em 0;
background: rgba(0,100,180,.1);
}

a.knopf:hover {
color: white;
background: DeepSkyBlue;
border-bottom-color: transparent;
}

::selection {
background: rgba(0,100,180,.1);
color: DeepSkyBlue;
}

body {
display: flex;
flex-flow: row wrap;
}

nav {
width: 100%;
padding: 8px 32px;
background: DeepSkyBlue;
}

nav ul,
ul.pagination {
display: flex;
flex-flow: row wrap;
justify-content: center;
}

nav > ul > li:not(:last-child):after {
content: ' · ';
color: white;
}

nav ul a,
nav ul span,
nav ul a:hover {
display: inline-block;
color: SeaShell;
font-weight: bold;
padding: 0;
margin: 0;
border-bottom: 3px solid transparent;
}

nav ul a:hover,
nav ul li.aktiv > a,
nav ul li.aktiv > span {
color: white;
border-bottom-color: white;
}

nav ul li.sub {
position: relative;
display: block;
}

nav ul li.sub span:after {
content: ' ▾';
}

nav ul li.sub ul {
display: none;
position: absolute;
top: 1.5em;
left: -1em;
background: DeepSkyBlue;
padding: 0.5em 1em 0 1em;
z-index: 100;
}

nav ul li.sub:hover ul {
display: block;
}

nav ul li.sub li {
padding: 0 0 .5em 0;
}

header {
width: 100%;
}

h1 {
margin: .5em;
text-align: center;
font-weight: bold;
font-size: 48px;
}

header h1 a {
color: DeepSkyBlue;
display: inline-block;
position: relative;
border-bottom: none;
}

header h1 a span {
display: none;
}

h1 a:hover {
color: MediumVioletRed;
border-bottom: none;
}

h1 a img {
display: block;
width: 100%;
max-width: 360px;
height: auto;
filter: hue-rotate(0deg);
}

h1 a:hover img {
filter: hue-rotate(90deg);
}

section {
padding: 32px;
position: relative;
width: 100%;
}

section.start {

}

section.spielplatz {
width: 60%;
overflow-x: hidden;
}

section.artikel,
section.kurse {
margin: 0 auto;
}

section.start article,
section.artikel article,
section.kurse article,
section.dozenten article {
max-width: 36em;
}

section.zeigmal article {
max-width: 100%;
}

article {
margin: 0 auto;
z-index: 50;
}

.blog article:not(:first-of-type) {
background: White;
padding: .01em 1em;
}

.blog article.index {
background: transparent;
padding: 0;
}


hr.hand {
border: none;
background: transparent;
}

hr.hand:after {
content: '☟';
color: MediumVioletRed;
font-size: 2em;
display: block;
text-align: center;
padding: .5em 0;
}

article em,
article i {
color: rgb(120,160,0);
background: rgba(150,190,0,.1);
padding: 0 .25em;
}

article strong,
article b {
display: inline-block;
box-decoration-break: clone;
color: MediumVioletRed;
background: rgba(255,0,255,.1);
padding: 0 .25em;
}

article h2 {
color: MediumVioletRed;
margin: 0 0 1em 0;
max-width: 100%;
overflow-x: hidden;
font-weight: bold;
text-transform: uppercase;
letter-spacing: .5em;
}

.blog article h2 {
margin: 0 0 1em 0;
}

article h2:after {
content: '——————————————————————————————————————————————————————————————————————————————————————————————————';
letter-spacing: 0;
}

article h3 {
color: DeepSkyBlue;
padding: 0 0 .3em 0;
margin: 1em 0 .75em 0;
border-bottom: 1px solid DeepSkyBlue;
font-weight: bold;
line-height: 1.2em;
}

.blog article h3 {
border-bottom: none;
text-transform: uppercase;
}

.blog article.index h3 {
padding: 0;
}

.blog article.index a {
display: block;
padding: 1em;
border-bottom: none;
background: White;
}

.blog article.index a:hover {
color: white;
background: MediumVioletRed;
border-bottom: none;
}

.blog article.index a h3 {
color: MediumVioletRed;
margin: 0;
}

.blog article.index a:hover h3 {
color: white;
}

.kurse article a {
display: block;
border-bottom: none;
}

.kurse article h3 {
position: relative;
padding: .5em 5.5em .5em .5em;
margin: 1em 0;
color: white;
background: Orange;
border-bottom: none;
}

.kurse article h3 svg {
position: absolute;
top: 0;
right: 0;
height: 100%;
max-height: 4em;
}

.kurse article h3 span {
text-transform: uppercase;
letter-spacing: .1em;
}

article h4 {
font-weight: bold;
color: black;
padding: 0 0 .5em 0;
margin: .7em 0 .7em 0;
border-bottom: 2px dotted rgb(255,200,0);
}

article h4:before {
content: '# ';
color: rgb(255,200,0);
float: left;
}

article h4:after {
content: ' #';
color: rgb(255,200,0);
float: right;
}

article h5 {
color: rgb(150,190,0);
margin: .7em 0 .35em 0;
}

article h5:after {
content: ' #';
}

article h6 {
color: rgb(150,190,0);
}

article p.datum {
color: DeepSkyBlue;
padding: .5em 0;
margin: 0;
}

article span.datum {
color: DeepSkyBlue;
text-transform: none;
letter-spacing: 0;
}

article a:hover span.datum {
color: HotPink;
}

article img.single {
margin: 1em 0;
max-width: 100%;
}

article ul.galerie {
margin: 2em 0 4em 0;
}

div.leitung + ul.galerie {
margin-top: 1em;
}

article hr {
border: none;
height: 1px;
background: rgb(150,190,0);
margin: 1em 0;
}

div.leitung {
color: rgb(230,180,0);
}

div.leitung a {
color: rgb(230,180,0);
}

div.termine {
margin: .8em 0 0 0;
padding: .4em .5em .001em .5em;
color: darkblue;
background: White;
}

h3 + div.termine {
margin-top: -1em;
}

ul.kurse li {
margin: 2em 0;
}

span.dok {
display: inline-block;
color: white;
background: rgb(255,200,0);
font-size: .75em;
text-transform: uppercase;
letter-spacing: .1em;
padding: 0 .4em 0 .5em;
margin: 0 .5em 0 0;
}

ul.downloads li {
display: block;
padding: .5em .5em .25em .5em;
background: rgba(150,190,0,.1);
}

audio {
width: 100%;
}

div.anmeldung {
color: white;
background: DeepSkyBlue;
padding: .1em 1em .1em 1em;
margin: 1em 0 0 0;
}

article div.anmeldung h4 {
color: white;
}

.anmeldung input[type='submit'] {
font-weight: bold;
color: White;
background: MediumVioletRed;
display: inline-block;
padding: .5em 1em;
margin: 1.5em 0 1em 0;
cursor: pointer;
}

.anmeldung input[type='submit']:hover {
background: Orange;
}

div.anmeldung .hinweis {
color: rgba(255,255,255,.75);
}

fieldset {
display: flex;
flex-flow: row wrap;
width: 100%;
}

fieldset label {
flex: 1 1 100%;
}

fieldset label.halb {
flex: 1 1 50%;
}

fieldset label.error span:after {
content: '!';
display: inline-block;
font-weight: bold;
font-style: normal;
width: 1.25em;
height: 1.25em;
line-height: 1.25em;
margin: 0 0 0 .5em;
text-align: center;
color: white;
background: MediumVioletRed;
border-radius: 50%;
}

fieldset label span {
display: block;
width: 100%;
font-style: italic;
}

fieldset label span + input {
display: block;
width: 100%;
font-weight: bold;
color: white;
background: transparent;
border-bottom: 2px solid white;
margin: 0 0 1em 0;
}

fieldset input:focus {
color: darkblue;
background: Yellow;
padding: 0 .5em;
}

div.error,
div.error b {
color: white;
background: Orange;
}

div.error {
display: inline-block;
padding: .5em .75em .001em .5em;
margin: 0 0 1em 0;
}

p.success {
display: inline-block;
padding: .5em .75em .5em .5em;
background: LightGreen;
}


ul.pagination {
padding: 2em 0;
margin: 2em 0 0 0;
border-top: 2px dotted darkblue;
}

ul.pagination li {
font-size: 2em;
padding: 0 .5em;
}

ul.pagination li a {
text-align: center;
line-height: 1.1em;
display: block;
width: 1.25em;
height: 1.25em;
padding-left: .05em;
border: 2px solid transparent;
border-radius: 50%;
}

ul.pagination li a:hover {
color: white;
background: DeepSkyBlue;
}

ul.pagination li a.disabled {
opacity: .2;
pointer-events: none;
}

ul.pagination li a.selected {
color: MediumVioletRed;
border-color: MediumVioletRed;
position: relative;
pointer-events: none;
}

ul.kurse a:hover * {
border-color: transparent;
}

ul.kurse a:hover h3 {
color: white;
background: DeepSkyBlue;
}

article h3.news {
margin-bottom: .1em;
border-bottom: none;
}

article > ul.news {
margin: 0 0 2em 0;
}

.start article > ul.news {
margin: 0 0 2em 0 !important;
}

ul.news li {
margin: 0;
}

ul.news li a {
display: block;
color: MediumVioletRed;
font-size: .75em;
line-height: 1.25em;
padding: .25em .5em;
margin: 0 0 1px 0;
background: white;
}

ul.news li a span {
color: black;
}

ul.news li a:hover {
color: white;
background: DeepSkyBlue;
}

ul.news li a:hover span {
color: white;
}

img.rahmen {
border: 16px solid white;
}

ul.filter,
.zeigmal ul.index {
display: flex;
flex-flow: row wrap;
margin-right: -.5em;
}

ul.filter li {
flex: 1 1 calc(100% / 4);
padding-right: .5em;
line-height: 1.25em;
}

.zeigmal ul.index li {
flex: 0 0 20%;
padding-right: .5em;
line-height: 1.25em;
text-align: center;
}

.zeigmal ul.index li a {
display: block;
height: 100%;
}

.zeigmal ul.index li h3 {
margin: 0;
}

ul.filter li a {
display: block;
width: 100%;
height: 100%;
font-weight: bold;
text-align: center;
color: white;
background: MediumVioletRed;
padding: .25em .5em .5em .5em;
border-bottom: none;
}

ul.filter li a:hover {
background: DeepSkyBlue;
}

ul.filter li.aktiv a {
background: Orange;
}

ul.filter li a svg {
padding: .5em .5em 0 .5em;
max-height: 6em;
}

.zeigmal ul.index li a svg {
padding: 0 1em;
height: auto;
}

/* Video */
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
margin: 10px 0 16px 0;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/*! Flickity v2.0.10
http://flickity.metafizzy.co
---------------------------------------------- */

.flickity-enabled {
  position: relative;
  background: rgba(0,100,180,.1);
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.flickity-slider {
  position: absolute;
  width: 100%;
  height: 100%;
}

.flickity-slider li img,
.blog .text .flickity-slider li img {
display: block;
max-width: none;
height: 400px;
width: auto;
opacity: .2;
transition: opacity 500ms ease-in;
margin: 0;
}

.flickity-slider li.is-selected img,
.blog .text .flickity-slider li.is-selected img {
/* max-width: 100%; */
opacity: 1;
}

/* draggable */

.flickity-enabled.is-draggable {
  -webkit-tap-highlight-color: transparent;
          tap-highlight-color: transparent;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
  cursor: move;
  cursor: -webkit-grab;
  cursor: grab;
  border-radius: 3px;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  border: none;
  background: rgba(255,255,255,.2);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.flickity-prev-next-button:hover { background: white; }

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  opacity: 0.6;
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
  
}

.flickity-prev-next-button .arrow {
  fill: white;
}

.flickity-prev-next-button:hover .arrow {
  fill: rgb(130,160,190);
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: -20px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 2px;
  background: rgb(255,200,0);
  border-radius: 0;
  cursor: pointer;
}

.flickity-page-dots .dot.is-selected {
	border-radius: 50%;
  background: rgb(255,0,0);
  transform: translateY(-.2em);
}


/* ############# Screens bis 1280px ############# */
@media only screen and (max-width: 1280px) {

	.zeigmal ul.index li {
	flex: 0 0 25%;
	}

}





/* ############# Screens bis 1024px ############# */
@media only screen and (max-width: 1024px) {

	section.spielplatz > div {
	transform-origin: top left;
	transform: scale(.8);
	}
	
	article {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	}

	.zeigmal ul.index li {
	flex: 0 0 calc(100% / 3);
	}

}



/* ############# Screens bis 800px ############# */
@media only screen and (max-width: 800px) {

	section.spielplatz > div {
	transform-origin: top left;
	transform: scale(.5);
	}
	
	.zeigmal ul.index li {
	flex: 0 0 50%;
	}
	
	ul.filter li {
	flex: 0 0 50%;
	}
	
	ul.filter li a {
	text-align: left;
	padding: .1em .25em;
	}
	
	ul.filter li a svg {
	display: inline-block;
	vertical-align: middle;
	height: 4em;
	width: 4em;
	padding-top: 0;
	}
	
	ul.filter li a svg + span {
	display: inline;
	}

}



/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {
  
  nav {
	padding: 8px 16px;
	}
	
	section {
	padding: 16px;
	}
	
	.flickity-slider li img,
	.blog .text .flickity-slider li img {
	height: 320px;
	}
	
	ul.filter li {
	flex: 0 0 100%;
	margin: 0 0 .25em 0;
	}
	
	ul.filter li a {
	padding: .25em .5em;
	}
	
	ul.filter li a svg {
	display: none;
	}

  .zeigmal ul.index li {
  flex: 0 0 100%;
  }

	.zeigmal ul.index li a svg {
	max-height: 6em;
	}

}



/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {

  section.start, section.spielplatz {
	width: 100%;
	}
	
	.flickity-slider li img,
	.blog .text .flickity-slider li img {
	height: calc(75vw - 32px);
	}
	
	fieldset label.halb {
	flex: 1 1 100%;
	}

}