@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.001;} :-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;
}

@font-face {
font-family: 'RubikDirt';
src: url("../fonts/RubikDirt-Regular.subset.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap;
}

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

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

a {
color: rgb(79,106,125);
border-bottom: 1px solid transparent;
}

a:hover {
color: rgb(60,141,168);
border-bottom-color: rgb(79,106,125);
}

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

a.knopf + a.knopf {
margin-left: .75em;
}

a.knopf:hover {
color: white;
background: rgb(60,141,168);
border-bottom-color: transparent;
}

::selection {
background: rgba(0,100,180,.8);
color: white;
}

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

div.bachstuben {
/* position: absolute; */
position: fixed;
top: -1.5em;
font-family: 'RubikDirt';
font-size: 6vw;
line-height: 0;
color: rgb(232,124,52);
width: 100%;
text-align: center;
z-index: 1000;
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}

div.bachstuben span {
display: inline-block;
transform: translate(0,0);
--random: var(--random); 
animation: 6s ease-in var(--delay) 1 forwards plumps;
}

@keyframes plumps {
	0% {
	transform: translate(0,0) rotate(0deg);
	opacity: 1;
	}
	100% {
	/* transform: translate(0,calc(250vh * var(--random))) rotate(calc(720deg * (var(--random) - .5))); */
	transform: translate(0,calc(100vh + 1.5em - (1em * var(--random)))) rotate(calc(720deg * (var(--random) - .5)));
	opacity: .333;
	}
}

nav {
width: 100%;
padding: 8px 32px;
background: rgb(60,141,168);
}

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;
white-space: nowrap;
}

nav ul a:hover,
nav ul li.aktiv > a,
nav ul li.aktiv > span {
color: white;
border-bottom-color: rgb(255, 192, 0);
}

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: rgb(60,141,168);
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%;
background: url('../img/muster.svg') repeat Linen;
}

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

header h1 a {
color: rgb(232,124,52);
display: inline-block;
position: relative;
border-bottom: none;
}

header h1 a span {
display: none;
}

h1 a:hover {
color: rgb(60,141,168);
border-bottom: none;
}

h1 a svg:not(:root) {
max-width: 100%;
overflow: visible;
}

h1 a svg path {
filter: hue-rotate(0deg);
transform: translate(0,0);
}

h1 a:hover svg g.typo path:nth-child(even) {
filter: hue-rotate(90deg);
transform: translate(-.025em,-.025em);
}

h1 a svg g#wolf {
transform: translateX(0em);
}

.start h1 a svg g#wolf {
animation: hurz 3s ease-in-out 0s 1 forwards;
}

@keyframes hurz {
  0% { transform: translate(20em,0) }
  25% { transform: translate(15em,-.15em) }
  50% { transform: translate(10em,.25em) }
  80% { transform: translate(3em,-.25em) }
  90% { transform: translate(2em,.1em) }
  100% { transform: translate(0,0) }
}

section {
padding: 2em 2em 6em 2em;
position: relative;
width: 100%;
}

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: rgba(255,255,255,.5);
padding: .01em 1em;
}

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


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

hr.hand:after {
content: '☟';
color: rgb(79,106,125);
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: rgb(79,106,125);
background: rgba(255,0,255,.1);
padding: 0 .25em;
}

article h2 {
color: rgb(79,106,125);
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: rgb(232,124,52);
padding: 0 0 .3em 0;
margin: 1em 0 .75em 0;
border-bottom: 1px solid rgb(232,124,52);
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: rgb(79,106,125);
border-bottom: none;
border-radius: 2em;
}

.blog article.index a h3 {
color: rgb(79,106,125);
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: rgb(232,124,52);
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(232,124,52);
}

article h4:before {
content: '# ';
color: rgb(232,124,52);
float: left;
}

article h4:after {
content: ' #';
color: rgb(232,124,52);
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: rgb(60,141,168);
padding: .5em 0;
margin: 0;
}

article span.datum {
color: rgb(60,141,168);
text-transform: none;
letter-spacing: 0;
}

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

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: rgb(60,141,168);
background: White;
}

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

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

span.dok {
display: inline-block;
color: white;
background: rgb(232,124,52);
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);
}

ul.audio li {
position: relative;
padding: 0;
border-radius: .75em;
border: .2em solid rgb(79,106,125);
background: rgba(150,190,0,.1);
height: auto;
transition: height 250ms ease-out;
overflow: visible;
margin: 4em 0 2em 0;
}

ul.audio li:before {
position: absolute;
top: -3em;
right: 1.5em;
content: '';
display: block;
width: 3em;
height: 3em;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="64px" height="64px" viewBox="0 0 64 64" preserveAspectRatio="none"><polyline fill="none" stroke="rgb(79,106,125)" stroke-width=".2em" stroke-linecap="round" points="0,0 32,64 64,0"/></svg>');
background-size: cover;
overflow: visible;
}

ul.audio li:after {
position: absolute;
bottom: -.4em;
left: 0;
content: '';
display: block;
width: 100%;
height: .4em;
background-image: url('data:image/svg+xml;charset=UTF-8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="640px" height="8px" viewBox="0 0 640 8" preserveAspectRatio="none"><g fill="rgb(79,106,125)"><rect x="32" width="32" height="8"/><rect x="576" width="32" height="8"/></g></svg>');
background-size: cover;
}

ul.audio li canvas {
width: 100%;
height: 10em;
animation: canvasH .5s ease-out 0s 1 forwards;
}

@keyframes canvasH {
  0% { height: 0; }
  100% { height: 10em; }
}

audio {
display: block;
width: calc(100% - 1em);
border-radius: .25em;
margin: 0 .5em .5em .5em;
}

ul.audio li p {
color: rgb(79,106,125);
margin: 0;
padding: .5em;
text-align: center;
}

.anmeldung input[type='submit'] {
font-weight: bold;
color: White;
background: rgb(79,106,125);
display: inline-block;
padding: .5em 1em;
margin: 1.5em 0 1em auto;
cursor: pointer;
}

.anmeldung input[type='submit']:hover {
background: rgb(232,124,52);
}

div.anmeldung .hinweis {
font-size: .8em;
line-height: 1.35em;
color: rgba(255,255,255,.75);
margin: 1em 0 0 0;
}

fieldset {
display: flex;
flex-flow: row wrap;
width: 100%;
margin: 0 0 .5em 0;
}

div.anmeldung fieldset:not(.submit) {
color: white;
background: rgb(60,141,168);
padding: 1em 1em 1em 1em;
margin: 1em 0 0 0;
}

fieldset.hidden {
display: none;
}

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: rgb(79,106,125);
border-radius: 50%;
}

fieldset label span {
display: block;
font-style: italic;
line-height: 1.2em;
width: 100%;
margin: 0 0 .25em 0;
}

fieldset label span + input {
display: block;
width: 100%;
font-weight: bold;
color: white;
background: rgba(255,255,255,.1);
border-bottom: 2px solid white;
padding: 0 .25em;
margin: 0 0 1em 0;
}

fieldset label span + input[type="date"] {
line-height: 1em;
padding: .2em 0 .2em 0;
}

fieldset label.select.inline,
fieldset label.checkbox {
display: flex;
flex-flow: row wrap;
gap: .5em;
}

fieldset label.select.inline > span {
flex: 0 0 calc(80% - .25em);
}

fieldset label.select.inline > select {
flex: 0 0 calc(20% - .25em);
width: calc(20% - .25em);
margin: 0 0 auto 0;
}

fieldset label.checkbox + label:not(.checkbox) {
margin-top: 1em;
}

fieldset label.checkbox input {
flex: 0 0 auto;
transform: translateY(.35em);
margin: 0 0 auto 0;
}

fieldset label.checkbox span {
flex: 1;
}

fieldset input:focus {
color: rgb(60,141,168);
background: white;
}

fieldset h5 {
font-weight: bold;
text-align: center;
color: lightyellow;
width: 100%;
margin: 0 0 1em 0;
}

fieldset * + h5 {
margin-top: 1.5em;
}

article fieldset h5::before,
article fieldset h5::after {
content: ' — ☟ — ';
}

div.anmeldung fieldset p i {
display: inline-block;
color: white;
background: rgb(120,160,0);
margin: 0 0 .5em 0;
}

div.anmeldung fieldset b {
display: inline;
color: white;
}

div.anmeldung fieldset a {
display: inline;
color: white;
font-weight: bold;
}

div.anmeldung fieldset a:hover {
color: yellow;
}

fieldset ol {
margin: 0 0 .5em 0;
counter-reset: liste;
list-style-type: none;
} 

fieldset ol > li {
padding-left: 1.5em;
text-indent: -1.5em;
}

fieldset ol > li p + p {
padding-left: 0;
text-indent: 0;
}

fieldset ol > li:before {
counter-increment: liste;
content: counter(liste) ".";
font-weight: bold;
display: block;
float: left;
width: 1.5em;
}

div.error,
div.error b {
color: white;
background: rgb(232,124,52);
}

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 rgb(60,141,168);
}

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: rgb(60,141,168);
}

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

ul.pagination li a.selected {
color: rgb(79,106,125);
border-color: rgb(79,106,125);
position: relative;
pointer-events: none;
}

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

ul.kurse a:hover h3 {
color: white;
background: rgb(60,141,168);
}

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: rgb(79,106,125);
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: rgb(60,141,168);
}

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;
max-height: 24em;
overflow: hidden;
transition: max-height 500ms ease-out;
}

.zeigmal ul.index li.limit ~ li {
max-height: 0;
}

.zeigmal ul.index li.limit h3 span.titel {
font-size: 12em;
line-height: .575em;
}

.zeigmal ul.index li a {
display: block;
height: 100%;
border-radius: 1em;
}

.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: rgb(232,124,52);
padding: .25em .5em .5em .5em;
border-bottom: none;
border-radius: 1em;
}

ul.filter li a:hover {
background: rgb(79,106,125);
border-radius: 2em;
}

ul.filter li.aktiv a {
background: rgb(60,141,168);
}

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

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

/* Video */
.tv {
position: relative;
padding: 1.5em 6em 1.5em 1.5em;
margin: .75em 0 1.5em 0;
background-color: bisque;
background-image: url('../img/wood/wood_pattern.png'), linear-gradient(to bottom, rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 33%);
background-blend-mode: multiply;
background-repeat: repeat;
box-shadow: .5em .5em 2em 0 rgba(0,0,0,.5);
border: .15em solid rgba(50,0,0,.2);
border-radius: 1em;
}

.video {
position: relative;
padding-bottom: 53.3%;
height: 0;
overflow: hidden;
max-width: 100%;
border: .75em solid rgba(0,0,0,.8);
border-radius: 1em;
background: black;
}

.video iframe,
.video object,
.video embed,
.video img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

.video img {
z-index: 500;
}

div.sender {
display: flex;
flex-flow: column wrap;
position: absolute;
bottom: 1.5em;
right: 1.25em;
padding: .5em;
border: .15em solid rgba(255,255,255,.2);
border-radius: .6em;
box-shadow: .05em .05em .2em 0 rgba(0,0,0,.5), inset .1em .1em .75em 0 rgba(0,0,0,.5);
background-color: rgba(240,240,255,.4);
}

.sender a {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
display: block;
color: silver;
background-color: rgba(0,0,0,.6);
margin: .2em;
height: 2em;
width: 2em;
padding-left: .1em;
text-align: center;
line-height: 1.8em;
border: .15em solid rgb(240,240,240);
border-radius: 1em;
text-shadow: .05em .05em 0 rgba(0,0,0,1);
box-shadow: .05em .05em .3em 0 rgba(0,0,0,.5), inset .05em .05em .5em 0 rgba(0,0,0,.5);
}

.sender a:hover,
.sender a:active {
color: white;
border-color: white;
box-shadow: 0 0 .2em 0 rgba(0,0,0,1);
}

.sender a.aktiv {
color: white;
border-color: rgba(80,0,0,.8);
background-color: rgba(200,0,0,.6);
text-shadow: .01em .01em 0 rgba(0,0,0,.5);
}

ul.logos {
display: flex;
flex-flow: row wrap;
}

ul.logos li {
display: flex;
flex: 0 1 calc(100% / 3);
max-width: 240px;
padding: 1em;
margin: 0;
background: white;
}

ul.logos li img {
margin: auto;
max-width: 100%;
}

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

.flickity-enabled {
  position: relative;
}

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

.flickity-viewport {
  overflow: hidden;
  position: relative;
  height: 100%;
  background: rgba(0,100,180,.1);
}

.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: static;
  width: 100%;
  padding: .5em 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(232,124,52);
  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%;
	}
	
	.tv {
	padding: .5em;
	}
	
	div.sender {
	flex-flow: row wrap;
	position: static;
	margin: .5em 0 0 0;
	}
	
	.sender a {
	padding-left: 0;
	}
	
	ul.logos li {
	flex: 1 1 100%;
	max-width: 100%;
	}

}