@media (orientation: portrait) {
	
	html, body {
		font-family: 'Muli';
		display: flex !important;
		flex-flow: column-reverse !important;
		justify-content: center !important;
		text-align: center;
		font-size: 29px !important;
	}
	
	body {
		min-height: 97vh !important;
	}
	
	body::after {
		font-family: 'Muli';
		font-weight: bold;
		content: 'Bitte Handy drehen!';
		font-size: 29px !important;
		margin: auto;
		height: 50vh;
		display: flex;
		justify-self:center;
		align-content: center;
		flex-wrap: wrap;
	}
	
	.menu {
		display: none !important;
	}
	
	
	.impressum_wrapper {
		justify-content: center !important;
	}
	
}





* {
	box-sizing: border-box;
}

img {
	max-width: 100%;
}

body {
  background: #d99123;
  
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  padding: 5% 5% 0 5%;
  margin: 0;
  min-height: 100vh;
  align-items: center;
}

body > div {
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: auto;
}

.menu {
	display: flex;
	flex-flow: row;
	flex-wrap: wrap;
	justify-content: space-around;
    width: 115vh;
	height: 73vh;
}

.menu_group {
	display: flex;
	flex-flow: column;
	flex-wrap: nowrap;
	width: 40%;
	justify-content: space-around;
	gap: 1vh;
	margin-bottom: 30px;
}

.menu_group:nth-child(2n) {
	text-align: end;
}

.menu_head {
	margin: auto;
}

.menu_head > img {
	height: calc(1.1vmax + 1.1vmin);
}

.menu_body {
	margin: auto;
}

.menu_body > a > img {
	max-height: 250px;
}




.impressum_wrapper {
	position: relative;
	display: flex;
	flex-flow: column;
	justify-content: flex-start;
}


.impressum_wrapper  > a > img {
	height: 5vh;
}

/* Standard: Hamburger ausblenden */
.hamburger {
    display: none;
}


/* Nur bei breitem Seitenverhaeltnis anzeigen */
@media (min-aspect-ratio: 16/9) {
    .hamburger {
        display: block;
        position: fixed;
        bottom: 6vh;
        right: 6vh;
        width: 40px;
        height: 24px;
        z-index: 10000;
        cursor: pointer;

        /* 3 Linien mit einem Element zeichnen */
        background:
            linear-gradient(#000 0 0) 0 0/100% 3px no-repeat,      /* oben  */
            linear-gradient(#000 0 0) 0 50%/100% 3px no-repeat,    /* mitte */
            linear-gradient(#000 0 0) 0 100%/100% 3px no-repeat;   /* unten */
    }
	
	.impressum_wrapper {
		display:none;
	}
}