@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;} :-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;} 
/* Renormasaniset! */

.printonly {
display: none;
}


.text p,
ul.aktuell li p,
.text > ul:not(.obj), 
.text > ol:not(.obj),
article dd {
margin: 0 0 .5em 0;
}

.text p.ort {
margin: 0;
}

blockquote {
padding: 0 0 0 .5em;
margin: 0 0 1em .1em;
border-left: .1em solid rgba(var(--white),.5);
}

blockquote p {
font-size: 1.2em;
line-height: 1.25em;
font-style: italic;
}

blockquote cite {
display: inline-block;
font-size: initial;
font-style: normal;
margin-top: .333em;
}

.text > *:not(.obj) > li {
margin: 0 0 .35em 0;
}

.text > *:not(.obj) > li {
padding-left: 1em;
text-indent: -1em;
}

.text > ol:not(.obj) > li {
padding-left: 1.5em;
text-indent: -1.5em;
}

.text > ul:not(.obj) > li:before {
content: '» ';
display: block;
float: left;
width: 1em;
}

.text > ol:not(.obj) {
counter-reset: liste;
list-style-type: none;
}

.text > ol:not(.obj) > li:before {
counter-increment: liste;
content: counter(liste) ".";
display: block;
float: left;
width: 1.5em;
}


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

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

@font-face {
font-family: 'Vollkorn-Source';
src: url("../fonts/SourceSans3-It.ttf.woff2") format("woff2");
font-weight: normal;
font-style: italic;
font-display: swap;
}

/* colors */
:root {
--body: 0,0,0;
--white: 255,255,255;
}


body {
position: relative;
font-family: 'Vollkorn-Source', 'Georgia', serif;
font-size: 20px;
line-height: 1.25em;
color: rgb(var(--white));
background-color: rgb(var(--body));
}

body.start {
height: 100vh;
overflow: hidden;
}

body.start * {
z-index: 100;
}

body.start:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 110%;
height: 110%;
background-image: var(--bild);
background-size: cover;
background-position: 50% 50%;
background-origin: 50% 50%;
z-index: 1;
opacity: .4;
filter: blur(4px);
pointer-events: none;
}

body.start.monochrom:after {
filter: blur(4px) grayscale(1);
}

body.vorschau header a,
body.vorschau header li:after,
body.vorschau footer a,
body.vorschau footer a svg,
body.vorschau div.text a.back {
opacity: .2;
pointer-events: none;
}

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

::selection {
background: rgb(var(--white));
color: rgb(var(--body));
}

::-webkit-scrollbar {
width: 1em;
background: rgba(0,0,0,0);
}

::-webkit-scrollbar-thumb {
width: .6em;
background: rgb(var(--white));
border: .2em solid rgb(var(--body));
border-radius: .6em;
}

img {
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
-moz-user-drag: none;
-webkit-user-drag: none;
user-drag: none;
}

.monochrom img,
.monochrom svg,
.monochrom svg image {
filter: grayscale(1);
}

header {
display: flex;
flex-flow: row nowrap;
padding: 2em 0;
}

.start header {
padding: 2em 0 0 0;
}

h1 {
flex: 0 0 19em;
}

h1 a {
display: flex;
flex-flow: row nowrap;
position: relative;
padding: 1em 2em 1.5em 2vw;
margin: 0 2em 0 0;
color: rgb(var(--body));
background: transparent;
cursor: pointer;
}

h1 a svg#malschule {
position: relative;
width: 14em;
height: 4em;
z-index: 100;
}

h1 a:hover svg#malschule #leinwand {
animation: leinwand 1s 0s ease-in-out infinite both;
filter: hue-rotate(0deg);
}
@keyframes leinwand {
  0% {filter: hue-rotate(0deg);}
  100% {filter: hue-rotate(360deg);}
}

h1 a svg#wisch {
fill: rgb(var(--white));
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
}

h1 a:hover svg#wisch {
fill: rgba(var(--white),.75);
}

h1 a span {
display: none;
}

header nav {
flex: 0 1 100%;
display: flex;
flex-flow: column nowrap;
}

nav ul {
display: flex;
flex-flow: row wrap;
}

nav ul.main {
font-size: 1.3em;
line-height: 1.25em;
margin: auto 0 0 0;
}

nav ul.main + ul.sub  {
margin: .5em 0 0 0;
}

nav ul.main li,
nav ul.main + ul.sub li {
line-height: 1.5em;
}

nav ul.main li:not(:last-child):after,
nav ul.main + ul.sub li:not(:last-child):after {
content: '·';
margin: 0 .5em;
}

nav ul.sub a {
border-bottom: .1em solid transparent;
}

nav ul.main + ul.sub a {
color: rgba(var(--white),.7);
}

nav ul.main a,
nav ul.site > li > a {
font-weight: bold;
border-bottom: .2em solid transparent;
padding: 0;
display: inline-block;
line-height: 1.2em;
}

nav ul .aktiv > a {
border-bottom-color: inherit;
}

nav ul.main + ul.sub .aktiv > a {
border-bottom-color: rgba(var(--white),.7);
}

nav ul li a:hover {
border-bottom-color: rgba(var(--white),.25);
}

a.menu {
display: block;
}

a.menu.auf {
font-size: 2em;
margin: 0 2vw;
}

a.menu.auf:hover {
color: rgba(var(--white),.75);
}

.flieger a.menu.zu {
font-size: 2.8em;
font-weight: normal;
margin: .4em 0 0 0;
transform: translateY(-.0375em);
}

a.menu span,
header:target a.menu.auf,
.flieger a.menu.zu {
display: none;
}

header:target a.menu.zu,
p:target + div.flieger a.menu.zu {
display: block;
flex: 0 0 auto;
color: rgb(var(--body));
border: none;
}

p:target + div.flieger a.menu.zu {
color: white;
margin: 0 0 0 4vw;
}

header:target a.menu.zu:hover {
color: rgba(var(--body),.5);
}

p:target + div.flieger a.menu.zu:hover {
color: rgba(var(--white),.5);
}

div.flieger {
position: fixed;
top: 6vh;
left: 5vw;
display: none;
flex-flow: row nowrap;
background: rgb(var(--white));
padding: .5em 1.5em 1.5em 1.5em;
width: 90vw;
height: 86vh;
border-radius: .2em;
box-shadow: 0 0 6vw 6vw rgb(var(--body));
overflow-y: scroll;
z-index: 1000;
}

header:target div.flieger,
p:target + div.flieger {
display: flex;
}

nav ul.site {
display: flex;
flex-flow: row wrap;
flex: 0 1 100%;
color: rgb(var(--body));
}

nav ul.site > li {
flex: 1 1 auto;
padding: 1em 2em 0 0;
}

nav ul.site ul.sub {
display: flex;
flex-flow: column nowrap;
padding: 0 0 0 .5em;
border-left: .1em solid rgba(var(--body),.25);
}

nav ul.site > li > a,
nav ul.site ul.sub li {
display: flex;
padding: 0 0 .25em 0;
}

nav ul.site ul.sub li:last-child {
padding: 0;
}

.flieger.iframe {
padding: 0;
background: rgb(var(--body));
}

.flieger iframe {
display: flex;
flex-flow: row nowrap;
flex: 0 1 100%;
height: 100%;
margin: 0;
border-radius: .2em;
}

div.flieger img {
flex: 0 0 100%;
}

section {
padding: 0 0 3em 0;
box-shadow: 0 0 2em 0 rgba(0,0,0,.15);
}

section.kursindex,
section.schulprojekttage,
section.fruehkindliche-foerderung {
background: rgba(255,255,255,.2);
box-shadow: none;
}

section.anmeldung,
.start section.artikel,
.start section.viernullvier {
box-shadow: none;
}

.artikel article.start {
position: relative;
padding: 0;
z-index: 10;
}

svg#figur {
display: block;
margin: 0 auto;
height: 60vw;
max-height: 80vh;
z-index: 10;
overflow: visible;
}

article.start > svg,
body > svg {
pointer-events: none;
}

nav.start a {
position: fixed;
display: block;
font-size: 1.5em;
line-height: 5.7em;
font-weight: bold;
text-align: center;
height: 7em;
width: 7em;
padding: .55em .6em .5em .6em;
color: rgb(var(--body));
fill: rgb(var(--body));
background: radial-gradient(ellipse at top left, rgb(var(--white)) 20%, rgb(210,210,210) 100%);
z-index: 10;
border-radius: 50%;
border: .1em solid rgb(var(--body));
box-shadow: 0 0 0 .1em rgb(var(--white)), .1em .1em .3em 0 rgba(0,0,0,.33);
text-shadow: -.05em -.05em 0 rgba(255,255,255,.9), .05em .05em 0 rgb(210,210,210);
}

.monochrom nav.start a {
background: black;
text-shadow: none;
}

nav.start a:hover {
color: white;
background: rgba(var(--body),.7);
border-color: white;
box-shadow: 0 0 0 .1em rgb(var(--body)), .05em .05em .1em 0 rgba(0,0,0,.33);
text-shadow: none;
}

.monochrom nav.start a:hover {
color: black;
background: white;
}

nav.start a.kurse {
top: calc(50vh - 105px);
right: calc(50% + 192px);
}

nav.start a.projekttage {
top: calc(50vh - 105px);
left: calc(50% - 105px);
}

nav.start a.aktuell {
top: calc(50vh - 105px);
left: calc(50% + 192px);
}

ul.galerie {
width: 100%;
}

article div.text,
article ul.galerie li,
article > figure,
article aside {
margin: 0 auto;
max-width: 40em;
padding: 0 2em 1em 2em;
hyphens: auto;
-webkit-hyphens: auto;
}

article div.text.projektkopf {
columns: auto;
column-width: 20em;
padding: 2em;
max-width: 100%;
}

article .aktuell aside {
padding: 0 0 1em 0;
}

.aktuell article > div.text:first-child,
.dozenten article > div.text:first-child {
padding-bottom: 1.5em;
}

.artikel article {
padding-top: 2em;
}

article h2 {
font-weight: bold;
font-size: 1.2em;
line-height: 1.5em;
margin: 0 0 .75em 0;
}

article h2 {
font-weight: bold;
font-size: 1.3em;
line-height: 1.25em;
margin: 0 0 .75em 0;
}

article div.text.projektkopf h2 {
column-span: all;
}

article * + h2,
.anmeldung article h2 {
margin-top: 2em;
}

article h3 {
font-weight: bold;
margin: 2em 0 .5em 0;
}

.aktuell article h3,
.dozenten article h3 {
font-size: 1.2em;
line-height: 1.25em;
margin: 1em 0 .25em 0;
}

ul.dozenten h3 {
font-size: 1.2em;
line-height: 1.25em;
margin: 0 0 .25em 0;
}

.aktuell article ul.aktuell h3 {
margin: 0 0 .5em 0;
}

article h4 {
font-style: italic;
margin: 1.5em 0 .25em 0;
color: rgba(var(--white),.8);
}

.aktuell article ul.aktuell h4 {
font-weight: bold;
font-style: normal;
color: rgb(var(--body));
margin-top: 0;
}

article fieldset.teilnehmer h4 {
color: rgb(var(--white));
font-style: normal;
width: 100%;
margin: 1em 0 .25em 0;
}

article .text.kurs .halb h4 {
font-weight: bold;
font-style: normal;
margin: 1em 0 .25em 0;
color: rgb(var(--white));
}

article h5 {
margin: 1em 0 .25em 0;
color: rgba(var(--white),.8);
}

div.text a {
color: rgb(var(--white));
border-bottom: 1px solid rgba(var(--white),.7);
}

div.text a:hover {
color: rgba(var(--white),.7);
border-bottom-color: rgb(var(--white));
}

article dt {
color: rgba(var(--white),.8);
font-weight: bold;
font-size: .75em;
text-transform: uppercase;
letter-spacing: .15em;
}


hr {
height: .1em;
border: none;
background: white;
margin: 1.5em 0;
}

article figure {
display: block;
width: 100%;
}

article p + figure,
article ul + figure,
article ol + figure,
article h2 + figure,
article h3 + figure,
article h4 + figure {
margin: 1em 0;
}

article figure img {
display: block;
max-width: 100%;
max-height: 80vh;
object-fit: contain;
object-position: top left;
}

div.video {
position: relative;
padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
height: 0;
overflow: hidden;
width: 100%;
}

div.video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

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

ul.downloads li {
flex: 0 1 100%;
}

ul.downloads li a {
display: flex;
flex-flow: row nowrap;
color: rgb(var(--body));
background: rgb(var(--white));
height: 100%;
padding: .5em 0 .5em .5em;
margin: 0 .5em .5em 0;
}

ul.downloads li:nth-child(even) a {
background: rgba(var(--white),.9);
}

ul.downloads li a:hover {
background: rgba(var(--white),.7);
}

span.dok {
flex: 0 0 3em;
display: block;
height: 3.5em;
width: 3em;
line-height: 3.75em;
margin: 0 1em 0 0;
background: rgb(var(--body));
clip-path: polygon(80% 0, 100% 20%, 100% 100%, 0 100%, 0 0);
font-size: .8em;
font-weight: bold;
text-transform: uppercase;
text-align: center;
color: rgb(var(--white));
}

ul.downloads li a span {
margin: auto 1em auto 0;
}

/* Kurse */
ul.kurse {
display: flex;
flex-flow: row wrap;
padding: 0 .5em;
}

ul.kurse:after {
content: '';
flex: 1 1 20em;
margin: .5em;
}

ul.kurse li {
flex: 1 1 20em;
margin: .5em;
max-height: 24em;
overflow: visible;
transition: max-height 200ms ease-out;
}

ul.kurse li#filter {
display: flex;
flex-flow: row wrap;
flex: 0 0 calc(100% - 1em);
}

li#filter {
margin: 1.25em .5em .5em .5em;
font-size: .85em;
}

ul.kurse li.aus {
flex: 0 1 0;
max-height: 0;
margin: 0;
overflow: hidden;
}

ul.kurse li.tag {
flex: 0 0 calc(100% - 1em);
}

ul.kurse li.tag h3 {
font-size: 1.6em;
margin: 1em 0 0 0;
}

ul.kurse li a {
display: block;
height: 100%;
padding: .75em;
border-radius: 0;
z-index: 10;
cursor: pointer;
color: rgb(var(--white));
background-color: rgba(var(--c),.8);
background-size: cover;
background-position: 50% 50%;
background-origin: 50% 50%;
background-blend-mode: soft-light;
}

.monochrom ul.kurse li a {
background-color: rgba(0,0,0,.1);
}

ul.kurse li.stoerer a {
color: black;
background-color: rgb(255,255,0);
background-blend-mode: luminosity;
}

ul.kurse li.stoerer a * {
text-shadow: 0 0 1.5em white;
}

li#nix a {
background-color: rgba(var(--white),.2);
}

ul.kurse li a * {
position: relative;
z-index: 100;
transition: none;
}

ul.kurse li a:hover,
ul.kurse li.stoerer a:hover {
color: rgb(var(--c));
background-color: white;
border-radius: .1em;
box-shadow: 0 0 0 .1em rgb(var(--c)), 0 0 2vw 1vw rgb(var(--body));
opacity: 1;
z-index: 100;
}

ul.kurse li.stoerer a:hover {
color: rgb(var(--body));
background-image: none !important;
}

li#nix a:hover {
color: rgb(var(--body));
background: white;
}

.monochrom ul.kurse li a:hover {
color: black;
box-shadow: 0 0 0 .1em black, 0 0 2vw 1vw rgb(var(--body));
}

.monochrom ul.kurse a:hover p.nr span, 
.monochrom ul.kurse a:hover p.age {
color: black;
}

ul.kurse:hover li a p {
margin: 0;
}

ul.kurse li.stoerer a p {
padding: 0 0 .5em 0;
}

div.kurs p.nr,
.aktuell article a + h3 {
padding: 1em 0 0 0;
margin: 1em 0;
border-top: .1em solid rgba(var(--white),.7);
}

ul.kurse p.nr {
display: flex;
flex-flow: row wrap;
padding: 0 0 .5em 0;
}

ul.kurse p.nr > * {
flex: 0 0 auto;
}

ul.kurse p.nr span {
margin-left: auto;
}

ul.kurse p.nr span,
ul.kurse p.age {
color: rgba(var(--white),.7);
}

ul.kurse a:hover p.nr span,
ul.kurse a:hover p.age {
color: rgba(var(--c),.7);
}

.kurs p.age {
color: rgba(var(--white),.7);
}

p.dozent {
display: flex;
flex-flow: row wrap;
gap: 1em;
font-style: italic;
margin: 0;
}

p.dozent * {
font-style: normal;
}

ul.kurse h3,
.kurs h3 {
font-size: 1.3em;
line-height: 1.25em;
margin: 0 0 .5em 0;
}

.kurs p.dozent + h3 {
margin-top: 1em
}

.kurs p.dozent a {
display: flex;
flex-flow: row wrap;
border-bottom: none;
cursor: pointer;
}

.kurs p.dozent a img {
display: inline-block;
width: 48px;
height: auto;
border-radius: 50%;
margin: 0 1em 0 -.1em;
opacity: 1;
}

.kurs p.dozent a:hover img {
opacity: .7;
}

.kurs p.dozent a span {
margin: auto 0;
}

.kurs p.dozent a span.info {
opacity: 0;
}

.kurs p.dozent a:hover span.info {
opacity: 1;
color: rgb(var(--white));
}

.text a.back {
margin-left: -.1em;
border-bottom: none;
}

.text a.back span,
.text a.anmeldung span {
display: inline-block;
font-size: 2em;
transform: translateY(.1em);
}

.aktuell .text a.back,
.dozenten .text a.back,
.kursindex .text a.back,
.schulprojekttage .text a.back,
.fruehkindliche-foerderung .text a.back {
display: inline-block;
margin: 1em 0 .5em 0;
}

.kursindex .text a.back,
.aktuell .text a.back {
margin-bottom: .25em;
}

div.text a.anmeldung {
display: inline-block;
color: rgb(var(--body));
background: rgb(var(--white));
padding: .5em .75em .75em .75em;
border-bottom: none;
margin: .5em 0 0 0;
}

div.text a.anmeldung:hover {
color: rgb(var(--white));
background: rgba(var(--white),.2);
}

div.info {
display: flex;
flex-flow: row wrap;
}

div.halb {
flex: 0 0 50%;
padding: 0 .5em 0 0;
}

div.halb + div.halb {
padding: 0 0 0 .5em;
}

div.voll {
width: 100%;
}

ul.termine {
margin: 0 0 1em 0;
}

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

ul.termine li span {
padding: 0 .5em 0 0;
}

ul.termine li span.tag {
flex: 0 0 2em;
}

ul.termine li span.datum {
flex: 0 0 5.5em;
}

ul.termine li span.zeile {
font-style: italic;
width: 100%;
}

ul.gebuehren {
margin: 0 0 1em 0;
}

/* Projekte */
ul.projekte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
padding: 0 .5em;
}

ul.projekte li {
min-width: 180px;
overflow: visible;
margin: .5em;
transition: all 200ms ease-out;
}

ul.projekte li#nix h3 {
font-size: 1.3em;
line-height: 1.25em;
margin-top: 0;
}

ul.projekte li#nix p {
font-weight: normal;
}

ul.projekte li a {
display: flex;
flex-flow: column nowrap;
padding: .5em;
background: rgb(var(--c));
height: 100%;
}

.monochrom ul.projekte li a {
background: rgba(192,192,192);
}

ul.projekte li a:hover {
box-shadow: 0 0 0 .5em rgb(var(--c));
}

.monochrom ul.projekte li a:hover {
box-shadow: 0 0 0 .5em rgba(192,192,192);
}

ul.projekte li img {
display: block;
max-width: 100%;
width: 480px;
height: auto;
mix-blend-mode: luminosity;
}

ul.projekte li a:hover img {
/* filter: invert(1); */
mix-blend-mode: multiply;
}

.schulprojekttage li:first-child figure,
.fruehkindliche-foerderung li:first-child figure {
background-image: linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,.2)), linear-gradient(rgb(var(--body)),rgb(var(--body)));
}

.schulprojekttage li:first-child figure img,
.fruehkindliche-foerderung li:first-child figure img {
mix-blend-mode: luminosity;
}

ul.projekte li p {
font-weight: bold;
padding: .6em 0 0 0;
margin: auto 0 0 0;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

ul.projekte li#filter {
grid-column: 1/-1;
}

ul.projekte li.aus {
position: absolute;
max-height: 0;
margin: 0;
overflow: hidden;
}

/* Aktuell */
ul.aktuell {
display: flex;
flex-flow: row wrap;
padding: .5em .25em 2em .5em;
}

ul.aktuell:after {
content: '';
flex: 1 1 20em;
margin: .5em;
}

ul.aktuell li {
flex: 1 1 100%;
margin: .5em;
}

ul.aktuell li a {
display: flex;
flex-flow: row nowrap;
width: 100%;
height: 100%;
color: rgb(var(--body));
background-color: rgba(var(--white),.9);
background-size: cover;
background-position: 50% 50%;
background-origin: 50% 50%;
background-blend-mode: lighten;
}

ul.aktuell:hover li a {
background-color: rgba(var(--white),.8);
}

ul.aktuell li:first-child a {
background-color: rgb(var(--white));
}

ul.aktuell li a:hover {
box-shadow: 0 0 0 .1em white, 0 0 2vw 1vw rgb(var(--body));
background-color: rgb(var(--white));
border-radius: .1em;
}

ul.aktuell li a img {
flex: 0 0 256px;
margin: 0 0 auto 0;
max-width: 50%;
}

ul.aktuell li a div.text {
flex: 0 1 auto;
margin: 0 auto 0 0;
padding: .9em 1em .85em 1em;
}

div.text.aktuell p.datum {
color: rgba(var(--white),.5);
}

ul.aktuell li p.datum {
color: rgba(var(--body),.5);
margin: 0;
}

/* Pagina */
ul.pagination {
display: flex;
flex-flow: row wrap;
font-size: 1.5em;
padding: 0 1em 1em 1em;
}

ul.pagination a {
padding: 0 .333em;
}

ul.pagination a.selected {
border-bottom: .1em solid white;
}

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

/* Dozenten */
ul.dozenten {
display: flex;
flex-flow: row wrap;
padding: .5em .25em 2em .5em;
}

ul.dozenten li {
flex: 1 1 20em;
margin: .5em;
}

ul.dozenten:after {
content: '';
flex: 1 1 20em;
margin: .5em;
}

ul.dozenten li a {
display: block;
width: 100%;
height: 100%;
min-height: 14em;
padding: .9em 1em .85em 1em;
color: rgb(var(--white));
background-color: rgba(var(--c),.8);
background-size: cover;
background-position: 50% 50%;
background-origin: 50% 50%;
background-blend-mode: soft-light;
}

.monochrom ul.dozenten li a {
color: white;
background-color: black;
background-blend-mode: luminosity;
text-shadow: 0 0 .5em rgba(0,0,0,.3);
}

ul.dozenten:hover li a {
opacity: .5;
}

ul.dozenten li a:hover {
background-color: rgba(var(--c),.5);
border-radius: .1em;
box-shadow: 0 0 0 .1em rgb(var(--c)), 0 0 2vw 1vw rgb(var(--body));
opacity: 1;
}

.monochrom ul.dozenten li a:hover {
background-color: black;
box-shadow: 0 0 0 .1em black, 0 0 2vw 1vw rgb(var(--body));
}

/* Formular */
form fieldset,
form fieldset.teilnehmer div {
display: flex;
flex-flow: row wrap;
}

fieldset.verdecktes {
display: none;
}

fieldset label {
flex: 0 0 100%;
}

fieldset h3 {
flex: 0 0 100%;
padding: 0 0 .5em 0;
margin: 2em 0 1em 0;
border-bottom: .1em dashed rgba(var(--white),.3);
}

fieldset label {
display: flex;
flex-flow: column nowrap;
padding: 0 0 1em 0;
}

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

fieldset label.drittel {
flex: 0 0 calc(100% / 3);
}

fieldset label.sechstel {
flex: 0 0 calc(100% / 6);
}

fieldset label.neuntel {
flex: 0 0 calc(100% / 9);
}

fieldset label.zweidrittel {
flex: 0 0 calc(100% / 3 * 2);
}

fieldset label.links {
padding-right: .5em;
}

fieldset label.rechts {
padding-left: .5em;
}

fieldset label.mitte {
padding-left: .5em;
padding-right: .5em;
}

fieldset label span {
display: block;
font-style: italic;
margin-top: auto;
color: rgba(var(--white),.7);
}

fieldset label span.required:after {
content: '*';
}

form label input {
width: 100%;
padding: 0;
font-weight: bold;
color: rgb(var(--white));
background: transparent;
border-bottom: .1em solid rgb(var(--white));
transition: all 200ms ease-out;
}

form label input:placeholder-shown {
max-height: 1px;
}

form label input:focus,
form label input:placeholder-shown:focus {
max-height: 2em;
padding: 0 .25em;
outline: none;
border-radius: 0;
-webkit-tap-highlight-color: transparent;
background: rgba(var(--white),.3);
}

form label.checkbox {
display: flex;
flex-flow: row nowrap;
}

form label.checkbox input[type="checkbox"] {
flex: 0 0 auto;
width: 1em;
height: 1em;
margin: auto .75em auto 0;
border: .1em solid rgba(var(--white),.7);
border-radius: .2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
}

form label.checkbox input[type="checkbox"]:checked {
background: rgb(var(--white));
border: .3em solid rgba(var(--body),.7);
}

form label.checkbox span {
flex: 0 1 auto;
margin: .1em 0 0 0;
transition: all 200ms ease-out;
}

form label.checkbox input[type="checkbox"]:focus + span,
form label.checkbox:focus input[type="checkbox"] + span {
padding: 0 .25em;
background: rgba(var(--white),.3);
border-radius: .1em;
}

form label.select {
position: relative;
}

form label select {
display: block;
width: 100%;
padding: 0 2em 0 0;
font-weight: bold;
color: rgb(var(--white));
background: transparent;
border: none;
border-bottom: .1em solid rgb(var(--white));
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-ms-appearance: none;
transition: all 200ms ease-out;
}

li#filter form label select {
display: inline-block;
width: auto;
color: rgb(var(--body));
padding-top: .2em;
}

form label select option,
.monochrom li#filter form label,
.monochrom li#filter form label select {
color: black;
}

form label select:focus {
padding: .2em 2.1em 0 .25em;
outline: none;
-webkit-tap-highlight-color: transparent;
background: rgba(var(--white),.3);
}

li#filter form label select:focus {
background: rgba(var(--body),.2);
margin-left: -.25em;
margin-right: -.1em;
}

form label select[value=''] {
max-height: 0;
}

form label.select span {
margin: 0 0 .25em 0;
}

li#filter form label.select span {
margin: 0 .5em 0 0;
}

li#filter form label {
display: inline-block;
margin: 0 .5em .5em 0;
padding: .25em .5em;
color: rgb(var(--body));
background: white;
white-space: nowrap;
}

form label.select:after {
content: '↓';
font-size: 1.5em;
line-height: 0;
display: block;
position: absolute;
bottom: 1.175em;
right: .05em;
pointer-events: none;
}

form label.select.links:after,
form label.select.mitte:after {
right: .35em;
}

li#filter form label.select:after {
top: .7em;
right: .35em;
}

ul.kurse li a.kpdf {
flex: 0 0 auto;
line-height: 1;
padding: .7em .5em .5em .5em;
margin: 0 0 auto 0;
height: auto;
}

ul.kurse li a.kpdf:hover {
color: rgb(var(--body));
}

a.kpdf:after {
content: '↓';
font-size: 1.5em;
line-height: 0;
margin: 0 0 0 .333em;
}

div#kontoform,
div#ueberweisung {
width: 100%;
margin: .5em 0;
max-height: 16em;
overflow: hidden;
transition: all 333ms ease-out;
}

div#kontoform span:after {
content: '*';
}

form label.submit {
position: relative;
flex: 0 0 auto;
width: auto;
padding: 0;
}

form label input[type="submit"] {
display: inline-block;
font-weight: normal;
color: rgb(var(--body));
background: rgb(var(--white));
padding: .75em 2.5em .75em .75em;
border-bottom: none;
margin: .5em 0 0 0;
cursor: pointer;
width: auto;
}

form input[type="submit"]:hover {
color: rgb(var(--white));
background: rgba(var(--white),.2);
}

form label.submit:after {
content: '→';
color: rgb(var(--body));
font-size: 2em;
line-height: 0;
display: block;
position: absolute;
bottom: 0.725em;
right: .35em;
pointer-events: none;
}

form label.submit:hover:after {
color: rgb(var(--white));
}

div.success {
font-weight: bold;
color: rgb(var(--body));
background: rgb(var(--white));
padding: .7em 2.5em .01em .75em;
margin: 0 0 2em 0;
}

div.error {
font-weight: bold;
color: rgb(var(--body));
background: rgb(var(--white));
padding: .7em 2.5em .01em .75em;
}

.success:before,
.error:before {
display: inline-block;
float: left;
color: rgb(var(--white));
background: rgb(var(--body));
margin: 0 .5em 0 0;
height: 1.4em;
width: 1.4em;
line-height: 1.3em;
text-align: center;
border-radius: 50%;
}

label.error:before {
color: rgb(var(--body));
font-weight: bold;
background: rgb(var(--white));
margin: 0 .25em .25em 0;
}

.success:before {
content: '✓';
line-height: 1.5em;
transform: translateY(-.2em);
}

.error:before {
content: '!';
line-height: 1.5em;
padding-left: .07em;
transform: translateY(-.2em);
}

label.error {
padding: .5em;
margin: 0 0 .5em 0;
background: rgba(var(--white),.3);
}

footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: .5em 1em;
background: rgb(var(--body));
box-shadow: 0 0 2em 0 rgba(0,0,0,.3);
z-index: 1500;
}

.start footer {
background: rgba(var(--body),.5);
box-shadow: none;
}

/* Kursvorschau Nav */
.kursindex nav ul {
display: flex;
flex-flow: row wrap;
gap: .5em;
margin: 0 0 2em 0;
}

.kursindex nav ul li a,
.kursindex nav ul li span {
display: block;
padding: .25em .5em;
}

.kursindex nav ul li a {
color: white;
background: rgba(0,0,0,.1);
}

.kursindex nav ul li a:hover,
.kursindex nav ul li span {
color: white;
background: black;
}

.kursindex nav ul li span.label {
color: white;
background: transparent;
}

footer ul {
display: flex;
flex-flow: row wrap;
}

footer ul li:not(:last-of-type):not(.trenner):not(.social):after {
content: '|';
color: rgba(255,255,255,.5);
margin: 0 .5em;
}

footer ul li.trenner {
margin-right: auto;
padding-right: .5em;
}

footer a {
border-bottom: .1em solid transparent;
}

footer a:hover {
border-bottom-color: white;
}

footer a:active {
border-bottom-color: rgba(255,255,255,.25);
}

footer ul li.social span {
display: none;
}

footer ul li.social svg {
display: block;
width: 1em;
height: 1em;
margin: .1em .5em 0 0;
}

footer ul li.social a:hover svg * {
fill: rgba(var(--white),.8);
}





/*! Flickity v2.0.2 flickity.metafizzy.com */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:visible;position:static;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.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}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-prev-next-button{position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button:hover{background:#fff}.flickity-prev-next-button:focus{outline:0;box-shadow:0 0 0 5px #09F}.flickity-prev-next-button:active{opacity:.6}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.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:.3;cursor:auto;pointer-events:none;}.flickity-prev-next-button svg{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-prev-next-button .arrow{fill:#333}.flickity-page-dots{position:absolute;width:100%;padding:0;margin:0;list-style:none;text-align:center;line-height:1;top:-2.35em}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:12px;height:12px;margin:0 4px;padding:0;background:white;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}
/* / Flickity */

ul.galerie .flickity-viewport {
transition: height 200ms ease-out;
}

ul.flickity-enabled {
overflow: hidden;
}

ul.flickity-enabled li {
width: 100%;
opacity: .2;
transition: opacity 333ms ease-out;
padding: 0;
}

ul.flickity-enabled li.is-selected  {
opacity: 1;
}

figure figcaption {
font-size: .8em;
margin: .5em 0 1em 0;
}

.flickity-page-dots .dot:first-child:last-child {
display: none;
}

.flickity-prev-next-button:hover{
background: rgba(255,255,255,.2);
}

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

.flickity-prev-next-button {
top: calc(50% - 22px);
}

/* Flickity fullscreen v1.0.1
------------------------- */

section article > ul.galerie.flickity-enabled.is-fullscreen,
.flickity-enabled.is-fullscreen {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(var(--body),.95);
padding-bottom: 36px;
z-index: 1000;
}

.flickity-enabled.is-fullscreen .flickity-page-dots {
bottom: 10px;
}

.flickity-enabled.is-fullscreen .flickity-page-dots .dot {
background: rgba(var(--white),.5);
} 

.flickity-enabled.is-fullscreen .flickity-page-dots .dot.is-selected {
background: rgb(var(--white));
} 

html.is-flickity-fullscreen {
overflow: hidden;
}

html.is-flickity-fullscreen .flickity-viewport figure {
margin: 0 auto;
padding: 1em 1em 3em 1em;
}

html.is-flickity-fullscreen .flickity-viewport figcaption {
margin: 1em auto;
max-width: 42em;
text-align: center;
color: rgb(var(--white));
}

.flickity-fullscreen-button {
position: absolute;
display: block;
top: 2vw;
right: 2vw;
width: 32px;
height: 32px;
border-radius: 4px;
background: transparent;
cursor: pointer;
opacity: 1;
}

.flickity-fullscreen-button:hover {
opacity: .8;
}

.flickity-fullscreen-button-exit {
display: none;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit {
display: block;
}

.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view {
display: none;
}

.flickity-fullscreen-button .flickity-button-icon {
position: absolute;
width: 32px;
height: 32px;
left: 0;
top: 0;
fill: rgb(var(--white)); 
}

body .flickity-enabled.is-fullscreen {
background: rgb(var(--white));
}

body ul.galerie.flickity-enabled.is-fullscreen .flickity-slider li {
display: flex;
width: 100vw;
height: 100%;
max-width: 100%;
max-height: 100%;
margin: 0;
}

body ul.galerie.flickity-enabled.is-fullscreen li img {
margin: auto;
width: 100%;
height: 90%;
max-width: 100%;
max-height: 90%;
object-fit: contain;
}

.flickity-button {
background: transparent;
}

/* Kalender */
body .fc-toolbar h2 {
font-size: 1.2em;
line-height: 1.25em;
}

body .fc-button,
body .fc-button-primary:disabled {
color: rgb(var(--white));
background-color: transparent;
border: none;
padding: 0;
}

body .fc-button:hover,
body .fc-button:active {
color: rgb(var(--white));
background-color: transparent !important;
border: none;
opacity: .7;
}

.fc-button:disabled,
.fc-button-primary:disabled {
opacity: 0.65;
background-color: transparent;
}

body .fc-prev-button,
body .fc-next-button,
body .fc-prev-button:hover,
body .fc-next-button:hover,
body .fc-prev-button:active,
body .fc-next-button:active {
display: block;
/* width: 0; */
color: transparent !important;
background-color: transparent;
}


body .fc-prev-button:before {
content: '←';
font-size: 2em;
line-height: 1em;
color: rgb(var(--white));
}

body .fc-next-button:before {
content: '→';
font-size: 2em;
line-height: 1em;
color: rgb(var(--white));
}

body .fc-view-container {
margin: 0 0 2em 0;
}
	
body .fc-unthemed tbody,
body .fc-unthemed th,
body .fc-unthemed thead,
body .fc-unthemed thead td {
background: transparent;
border-color: transparent;
}	

body .fc th {
border: none;
}

body .fc td {
background: rgba(var(--white),.1);
border-width: .2em;
border-color: rgb(var(--body));
}

body .fc td .fc-day.fc-other-month {
background: transparent;
}

body .fc-unthemed td.fc-today {
color: rgb(var(--body));
background: rgba(var(--white),.6);
border-style: solid;
}

body .fc-dayGrid-view .fc-day-number {
padding: .2em .3em;
}

body .fc-unthemed .fc-content {
border: none;
color: rgb(var(--body));
background: rgb(var(--white));
}

body .fc-event, 
body .fc-event-dot {
border: none;
background-color: rgb(var(--white));
font-weight: bold;
padding: .2em 0 0 .5em;
}




/* ############# große Screens ab 1600px ############# */
@media only screen and (min-width: 1600px) {

  
  ul.aktuell li {
	flex: 0 1 calc(50% - 1em);
  }

}



/* ############# große Screens ab 1280px ############# */
@media only screen and (min-width: 1280px) {
  
  
  nav ul.main {
	font-size: 1.5em;
	}
  
  a.menu.auf {
	font-size: 3em;
	}
	
	li#filter form label {
	margin: 0 1em 1em 0;
	}
	
	ul.kurse li a.kpdf {
	margin: 0 0 auto auto;
	}

  .artikel article {
  display: flex;
  flex-flow: row wrap;
  }
  
  .artikel article div.text {
  flex: 0 2 40em;
  }
  
/* 
  .artikel article aside {
  flex: 0 1 30em;
  margin-left: 0;
  }
 */


}







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

  li#filter form label {
	padding: .2em .4em;
	max-width: calc(100vw - 2em);
	overflow: hidden;
	}
	
	nav.start a.kurse {
	right: auto;
	left: 1em;
	}
	
	nav.start a.aktuell {
	left: auto;
	right: 1em;
	}

}







/* ############# Screens bis 800px ############# */
@media only screen and (max-width: 800px) {
  
  header {
  /* flex-wrap: wrap; */
  justify-content: space-between;
	padding: .8em 1em 1em 1em;
	}
	
	.start header {
	padding: 1em;
	}
	
	h1 {
	flex: 0 1 14em;
	/* order: 1; */
	}
  
  h1 a {
	color: rgb(var(--white));
  padding: 0 1em 1em 0;
  margin: 0;
  }
  
  h1 a svg#wisch {
  display: none;
  }
  
  h1 a svg#malschule {
  max-width: 100%;
  }
  
  a.menu.auf {
  /* order: 2; */
  margin-right: 0;
  }
  
  header nav {
	flex: 0 1 calc(100% - 4em);
  }
  
  .artikel article {
	padding-top: .5em;
	}
	
	article div.text, article ul.galerie li, article > figure, article aside {
	padding: 1em;
	}
	
	.aktuell .text a.back, .dozenten .text a.back, .kursindex .text a.back {
	margin-top: 0;
	}
	
	ul.projekte {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
  
}






/* ############# Screens bis 768px ############# */
@media only screen and (max-width: 768px) {
  
  .artikel article.start {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  }
  
  nav.start,
  nav.start ul {
  height: 100%;
  }
  
  nav.start ul {
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  gap: 1em;
	}

  nav.start a {
  position: static;
  line-height: 1.35em;
  height: auto;
  width: 100%;
  border-radius: .25em;
  }

}






/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {
  
	body {
  font-size: 16px;
  }
    
  header {
  flex-wrap: nowrap;
  }
  
  h1 a {
  padding: 0 1em 0 0;
  }
  
  header nav {
  flex-basis: 0;
  }
  
  header nav > ul.main,
  header nav > ul.sub {
  display: none;
  }

	nav ul.site > li {
	flex-basis: 100%;
	}
	
	nav ul.site > li:last-of-type {
	padding-bottom: 6em;
	}
	
	article {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
	}
  
  div.flieger {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	border-radius: 0;
	}
  
  p:target + div.flieger a.menu.zu {
  flex: 0 0 100%;
  text-align: center;
	line-height: 48px;
  height: 48px;
  margin: auto;
  order: 1;
  }
  
  .flieger iframe {
  height: calc(100% - 48px);
  padding-right: 0;
  order: 2;
  }
  
  ul.kurse li {
  flex: 0 1 calc(100vw - 2em);
  max-height: 1000%;
  }
  
  .flickity-prev-next-button {
  display: none;
  }

}




/* ############# Screens bis 480px ############# */
@media only screen and (max-width: 480px) {
  
  fieldset label.halb,
  fieldset label.drittel,
	fieldset label.sechstel,
	fieldset label.neuntel,
	fieldset label.zweidrittel {
	flex-basis: 100%;
	}
	
	fieldset label.rechts,
	fieldset label.mitte,
	fieldset label.links {
	padding-left: 0;
	padding-right: 0;
	}

	article fieldset.teilnehmer h4 {
	margin-top: 1.5em;
	}
	
	form label.select.rechts::after,
	form label.select.mitte::after,
	form label.select.links::after {
  right: .05em;
  }
  
  ul.aktuell li a {
	display: block;
	}
  
  ul.aktuell li a img {
	width: 100%;
	max-width: 100%;
	margin: 0;
	}

	ul.aktuell li a div.text {
	flex: 1 0 100%;
	margin: 0;
	padding: .9em 1em .85em 1em;
	}
  
	li#filter form label {
  width: 100%;
  margin: 0 .25em .25em 0;
  }
  
	.artikel article.start {
	position: static;
	height: auto;
	}
  
  body footer {
  position: static;
  box-shadow: none;
  }
  
  footer ul {
  display: block;
  }
  
  footer li.social {
  display: inline-block;
  font-size: 1.75em;
  }
  
  footer li {
  padding: 0 .5em .5em 0;
  }
  
  footer ul li:not(:last-of-type):not(.trenner):not(.social):after {
	content: '';
	}
  
}