<style type="text/css">/*<![CDATA[*/@charset "utf-8";
@media only screen and (min-width: 1024px) {
    body {
        font-size:1.5vw;
        font-size: calc(16pt + .5vw);
        line-height: 1.15;
        line-height: calc(1.1em + .5vw)
    }

    #wrapper {
        margin: 2vw auto;
	    display: grid;
	    grid-template-columns: auto auto;
	    grid-template-rows: auto auto auto;
    }

    header {
        height: calc(100px + 2vw);
		grid-column-start: 1;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
    }

    #toggle-menu~#content {
        min-height: calc(99vh - 100px);
        right: 0;
    }

    h1.header {
        font: normal normal bold 33pt/140% "Marck Script",cursive;
        float: left
    }

    #toggle-menu:checked~#content {
        margin-top: 0;
        /* width: calc(67%); */
        width: 100%;
        transition: all .3s ease-in-out;
		grid-column-start: 1;
		grid-column-end: 2;
		grid-row-start: 2;
		grid-row-end: 3;
    }

    #toggle-menu:checked~aside#right {
        animation: max-width-transform 6s ease-in-out forwards;
        border-bottom: solid #444 1px;
        border-left: solid #fff 1px;
        /* max-width: 33%; */
        width: 100%;
        max-height: 100%;
        position: relative;
        top: 0em!important;
        left: 0;
        float: right;
		grid-column-start: 2;
	    grid-column-end: 3;
	    grid-row-start: 2;
	    grid-row-end: 3;
    }

    #toggle-menu:checked~div#map {
        margin-top: 0;
        max-width: 100%;
	    grid-column-start: 1;
	    grid-column-end: 3;
	    grid-row-start: 2;
	    grid-row-end: 3;
    }
    footer {
	    grid-column-start: 1;
	    grid-column-end: 3;
	    grid-row-start: 3;
	    grid-row-end: 4;
	}
}
/*]]>*/</style>
<div id="wrapper">
	<input name="Menu" id="toggle-menu" type="checkbox" class="radio" />
	<header>
		<h1 class="header" lang="de"><span class="h2-style">Bergmannsverein Menteroda</span></h1>
		<div class="header">

			<label for="toggle-menu" class="button_icon" draggable="false" id="menu-toggle" onclick="document.getElementById('toggle-menu').checked;">
				<span id="x" class="x noselect">&#x2630;</span>
				<span id="y" class="y noselect">&#x2692;</span>
			   <br/>
				<span class="z noselect">Menü</span>
			</label>
		</div>
	</header>
	<div id="map">Map</div>
	<aside id="right" class="column">Navigation</aside>
	<div id="content">content</div>
	<footer>footer</footer>
</div>