html { box-sizing: border-box; height: 100%; font-family: sans-serif; font-size: 18px; font-weight: 400; line-height: 1.8; color: #ffffff; background-color: #6d3776; -webkit-text-size-adjust: 100%; }
html * { box-sizing: inherit; }
body, header, main, footer, section, article, ul, button { display: block; margin: 0; padding: 0; border: 0; outline: 0; }
.cf:before, .cf:after { content: ""; display: table; }
.cf:after { clear: both; }
.wrap { position: relative; margin: 0 auto; }
.visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px) !important; padding: 0 !important; border: 0 !important; height: 1px !important; width: 1px !important; overflow: hidden !important; }
.dark-background { background-color: #2e0e33; margin-top: 100px; }

/****************
** alle Größen **
****************/

#hamburger { position: absolute; width: 35px; height: 35px; overflow: hidden; text-indent: -1000em; cursor: pointer; background-color: transparent; }
#hamburger:before, #hamburger:after { content: ""; }
#hamburger:before, #hamburger:after, #hamburger span { position: absolute;  left: 15px; display: block; width: 5px; height: 5px; border-radius: 50%; background-color: #ffffff; }
#hamburger:before { top: 3px; } 
#hamburger span { top: 13px; } 
#hamburger:after { top: 23px; } 

h1 { position: absolute; left: 0; top: -300px; }
ul { list-style-type: none; }
ol { list-style-position: inside; }
a { color: #b0a0c0; text-decoration: none; }
a:hover { color: #ffffff; text-decoration: underline; }
img { border: none; outline: none; display: block; }
h2, h3, h4, th { font-weight: 400; }
nav span { color: #b0a0c0; }
#sprachwahl [tabindex="-1"]:before { content: "\2713"; }
#est1995 { display: block; font-size: 0.8em; }
.featured { font-size: 1.25em; font-style: italic; }

main h2 { letter-spacing: 0.01em; margin-top: 2em; line-height: 1.5; }
main h2 .subtitle { display: block; font-size: 0.5em; line-height: 2; }
#einfuehrung h2 { margin-top: 10px; }
main h2:after { content: ""; display: block; width: 22.5px; height: 23px; margin: 35px auto; background: url(img/aum.png) no-repeat center / 22.5px 23px; }
/*main h3:before, main h3:after { content: "~"; margin: 0 7px; }*/

details summary { cursor: pointer; color: #b0a0c0; outline: none; }
details summary:hover { color: #ffffff; }

.diashow { position: relative; display: block; background-color: #000000; }
.diashow li { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.5s linear 0s; }
.diashow li.show { opacity: 1; transition-delay: 0.5s; transition-duration: 1s; }
.diashow img { width: 100%; }
#preise dt, #preise dd { float: left; margin: 5px 0; line-height: 1.5em; }
#preise dt { text-align: left; }
#preise dd { text-align: right; }
#preise dt.sternchen:after { content: "*"; position: relative; margin-left: 4px; bottom: 4px; }
#preise p.sternchen { margin-top: 50px; }
#preise p.sternchen:before { content: "*"; position: relative; margin-right: 4px; bottom: 4px; }
#meister { display: table; margin: 100px auto 0px; }
#meister figure { float: left; }
#yogapfade { text-align: center; font-style: italic; margin: 50px 0px; }
#yogapfade li:not(:last-child):after { content: "\2638"; display: block; font-style: normal; }
.philosophie { font-style: italic; }

/***********
** footer **
***********/

footer { font-size: 0.75em; line-height: 1.5; background-color: #2e0e33; }
address { font-style: normal; }

/******************
** kleine Geräte **
******************/

@media only screen and (max-width: 959px) {

/***********
** header **
***********/

header { text-align: center; }
#logo, #handstand { display: block; margin: 35px auto 0px; }
#logo { width: 260px; margin-top: 50px; }
#handstand { width: 51px; }
#hamburger { position: fixed; z-index: 9; right: 5px; top: 15px; }
#menu { position: fixed; z-index: 8; left: 100%; top: 0; width: 100%; height: 100%; background-color: #2e0e33; transition: left 0.2s linear; }
#menu a { display: block; padding: 2px 10px; }
#menu.show { left: 0px; }
#menu li { float: left; width: 220px; }
#menu li ul { padding-left: 10px; }
#sprachwahl { margin-top: 12px; }
#sprachwahl a { display: inline-block; }
#est1995 { margin-top: 21px; }

/*********
** main **
*********/

section { padding: 25px 0px; }
h2, h3 { text-align: center; }
h2 { font-size: 1.3333em; }
h3 { font-size: 1.125em; }
h4 { font-size: 1.125em; margin: 2.5em 0 0.5em; }
main h3 { margin-top: 1.5em; }
main img { width: 100%; }
table { width: 100%; }
.rand { padding: 0px 3.125%; }
#img-raphael-5 { margin: 75px 0; }
.stundenplan tr, .stundenplan td { display: block; text-align: center; }
.stundenplan tr { margin-bottom: 25px; }
.wochentag { border: 1px solid #ffffff; margin: 25px 0 15px; }
#preise article { width: 300px; }
#preise dt { width: 200px; }
#preise dd { width: 100px; }

.diashow { position: relative; display: block; width: 100%; height: 0px; padding-bottom: 66.6666%; margin: 60px auto; }
#diashow-chisao { padding-bottom: 150%; }

.wcfx:first-child { margin: 10px 0 25px; }
.wcfx ul { margin-top: 10px; }

#asanas { display: block; width: 98%; margin: 50px auto; }
#zertifikate { text-align: center; }
#portrait { display: block; margin: 70px auto; }
}

/*****************
** große Geräte **
*****************/

@media only screen and (min-width: 960px) {

/***********
** header **
***********/

header { position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 240px; padding-top: 50px; background: url(img/muster-header.png) repeat center #461f4c; transition: height 0.2s linear 0s, padding-top 0.2s linear, background-color 0.2s linear 0s; text-align: right; }
header.scrolled { height: 60px; padding-top: 15px; background-color: #2e0e33; transition-delay: 0s, 0s, 0.4s; transition-duration: 0.2s, 0.2s, 0.4s; }
#est1995 { margin: -18px 50px 0 0; }
header.scrolled #est1995 { display: none; }
.wrap { width: 900px; }
#hamburger { right: 0px; top: -110px; transition: top 0.25s ease 0s; }
.scrolled #hamburger { top: 0px; transition-delay: 0.5s; }
#menu { position: absolute; left: 0; bottom: -40px; width: 100%; height: 40px; background-color: #2e0e33; line-height: 2.2; }
#menu > ul { width: 900px; margin: 0 auto; }
#menu > ul > li { float: left; }
#menu li { margin: 0 15px; }
#menu li ul { position: absolute; margin-left: -15px; display: none; background-color: #331838; }
#menu li:hover ul, #menu li:focus-within ul { display: block; }
#menu li li { margin: 0px 15px; }
.scrolled #menu { opacity: 0; transition: opacity 0.2s linear; }
#menu.show { opacity: 1; }
#handstand { display: block; position: absolute; left: -140px; top: 5px; width: 102px; transition: all 0.2s linear; }
.scrolled #handstand { width: 34px; left: -72px; top: -5px; }
#sprachwahl:before { content: "|"; color: #a0b0c0; margin-right: 15px; }
#sprachwahl a:not(:last-child) { margin-right: 5px; }

/*********
** main **
*********/

main { padding-top: 300px; text-align: center; font-size: 22px; }
section { padding: 50px 0 100px; }
#einfuehrung { padding-bottom: 0; }
#sri-yantra { width: 600px; margin: 125px auto; }
main section:not(:last-child) { border-bottom: 2px solid #2e0e33; }
main article { width: 900px; margin: 0 auto; }
main details .wrap { padding-left: 50px; border-left: 1px solid #ffffff; }
h2 { font-size: 2em; }
h3 { font-size: 1.33em; }
main h3 { margin-top: 3em; }
h2 + h3 { margin-top: 1em; }
h4 { font-size: 1.125em; margin: 2.5em 0 0.5em; }
p { margin: 1.5em 0; }
table { margin: 20px auto; border-collapse: collapse; border-spacing: 0; }
.stundenplan { margin-top: 35px; }
.stundenplan col:first-child { width: 240px; }
.stundenplan col:last-child { width: 280px; }
th, td { padding: 15px 20px; line-height: 1.5; vertical-align: top; }
.stundenplan .spacer { height: 15px; border-bottom: 1px solid #2e0e33; }

#logo { display: block; width: 850px; transition: all 0.2s ease-out; }
.scrolled #logo { width: 212.5px; }

.diashow { width: 900px; height: 600px; margin: 120px auto 100px; }

#img-raphael-5 { margin: 100px 0; }
#preise article { width: 480px; }
#preise dt { width: 380px; }
#preise dd { width: 100px; }

#unterricht { padding-bottom: 0; }

#asanas { display: block; width: 80%; max-width: 1800px; margin: 100px auto; }

#portrait { display: block; margin: 10px 0 40px 70px; float: right; }

#zertifikate { display: table; margin: 0 auto; }
#zertifikate li { float: left; display: block; padding: 20px; }

.philosophie { padding: 0 90px; }

.chisao { margin: 120px 0; }
/*.chisao div { width: 400px; }*/
.chisao h3 { margin-top: 2em; }
/*.chisao .diashow { width: 320px; height: 480px; float: right; margin: 0; }*/

.wcfx { float: left; width: 360px; }
.wcfx:first-child { margin-left: 90px; }
.wcfx ul:before { content: "\262f"; display: block; margin: 10px 0px; }

/***********
** footer **
***********/

footer section { max-width: 900px; margin: 0 auto; }
footer article { float: left; width: 33.3333%; }
#kontakt, #impressum { padding-right: 20px; }
}