@media (max-width: 30em )
{

body { background-image: url(../../../pages/images/logo_gross.png); background-repeat: no-repeat; background-attachment: fixed; background-size: auto 50%; background-position: left bottom; }

.para { background-image: url(../../../pages/images/profil-start.jpg); background-repeat: no-repeat; background-size: cover; height: 100% }

header#header { display: flex; flex-direction: row; justify-content: space-around }

ul#large-nav { display: none }
div#mobile-nav { width: 50%; text-align: right }

h1#floating { position: absolute; color: white; font-size: 3em; font-weight: 700 }
h1#solid { font-size: 3em; font-weight: 700 }
h1.verstecke-gross { text-align: center; font: 2.4em 'Oregano', sans-serif }
.balastart > h1 { color: white; font-size: 3.4em; margin: 0; padding: 0; text-align: center; text-shadow: 0 0 0.5em white; font-family: 'Oregano', sans-serif }
.balastart > h2 { padding: 0; margin: 0.3em 0; text-align: center; color: white; font: 2.3em 'Caveat Brush', serif }
.balastart > h3 { padding: 0; margin: 0.6em 0; text-align: center; color: white; font: 1.5em 'Oregano', sans-serif }
.balastart p { color: white; font: 1.1em 'Caveat Brush', serif; padding: 0.1em 1em }
#start1, #start2, #start3, #start4 { font-weight: 600; }

.sliders { height: 15em; text-align: center; padding: 0.8em }
.sliders > h2 { font: 2em 'Caveat Brush', serif; text-shadow: 0.05em 0.05em 0 white }
.shows { border-top: 2px solid grey; background-image: url(../../../pages/images/strich-rot.png); background-repeat: no-repeat; background-position: top center; background-size: 66% }
.masken { border-top: 2px solid grey; background-image: url(../../../pages/images/strich-blau.png); background-repeat: no-repeat; background-position: top center; background-size: 66% }
.figuren { border-top: 2px solid grey; background-image: url(../../../pages/images/strich-gelb.png); background-repeat: no-repeat; background-position: top center; background-size: 66% }

article.event-eintrag { padding-bottom: 2em; border-bottom: 2px solid gray }
article.event-eintrag > h2 { font: 2em 'Oregano', sans-serif; margin: 0 }
article.event-eintrag > h3 { font: 1.4em 'Caveat Brush', serif; margin: 0 }
article.event-eintrag > h4 { font: 1em 'Oregano', sans-serif; margin: 0 }

#events h3 { font: 2em 'Oregano', sans-serif }
#events h4 { font: 2em 'Caveat Brush', serif }
#events p { margin: 0; padding: 0 }

.uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-visible):not(:has(:focus-visible)), .uk-visible-toggle:not(:hover):not(:focus) .uk-hidden-hover:not(:focus-within) { width: 1em !important; height: 1.5em !important }
.custom-slide-width { width: 60vw; margin: 0 auto }
.custom-slider-bg { background: radial-gradient(circle, rgba(230,10,30,1) 30%, rgba(230,10,30,0) 60%); padding: 1em; border-radius: 1em }
p.custom-slide-text { display: none }
.ui-tabs .ui-tabs-nav { display: flex; flex-direction: column }
.flex-column h2 { color: white; font-weight: 700 }

body.uebermich main#content, body.kontakt main#content { display: flex; flex-direction: column }
body.uebermich main#content section#text-left, body.kontakt main#content section.workshop-right { order: 2 }
body.uebermich main#content section#text-right, body.kontakt main#content section.workshop-left { order: 1 }
body.uebermich main#content section#text-right div#text p { font: 1.1em 'Caveat Brush', serif; padding: 0.1em 1em } 
#historie { display: flex; flex-direction: row; flex-wrap: wrap }
#historie article { width: 45vw; padding: 0.1em; border: 1px solid black }
#historie article h3 { font: 1.2em 'Oregano', sans-serif; font-weight: 800 }

#tanz-workshop > h2, #social-media h2, #events > h2, body.events div.modular-content > h2 { padding: 0; margin: 0 1em; border: 2px solid rgb(150,150,150); border-radius: 1em; font: 2em 'Caveat Brush', serif }
#tanz-workshop, #social-media, #events, body.events div.modular-content { text-align: center; padding-bottom: 1em; }

#social-media img.logo { max-width: 3em }
#social-links { display: flex; flex-direction: row }
#social-links dl { margin: 0 0.5em; padding: 0 }
#events h3, #events h4, #tanz-workshop h3 { margin: 0.4em 0 }
#events img.flyer, #tanz-workshop img.flyer { max-width: 66% }
}