/*
* {margin:0; padding:0; border:0; }
*/
body {font-family: sans-serif, Verdana, Arial, Helvetica; font-size: 18px; padding: 20px;}

.trigger {display: none;}

.hamburger {cursor: pointer; margin-right: 10px; float: left; } /* damit 'Menu' hinter dem Hamburger steht */
/* einzelner Strich des Hamburger-Icons: */
.hamburger span {height: 3px; width: 30px; background: black; display: block; margin-bottom: 5px; position: relative;
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, opacity 0.3s ease-in-out;}

/* 3 Balken drehen bzw. ausblenden: */
.trigger:checked ~ .hamburger span:first-child {transform: rotate(45deg); top: 8px;}
.trigger:checked ~ .hamburger span:last-child {transform: rotate(-45deg); top: -8px;}
.trigger:checked ~ .hamburger span:nth-child(2) {opacity: 0;}

.menu {cursor: pointer;}

nav {background: #eee; box-sizing: border-box; transition: left 0.3s ease-in-out;
  width: 300px; padding: 30px 30px; margin-top: 10px; position: absolute; left: -300px;}
  
.trigger:checked ~ nav {left: 0;} /* alle siblings */

nav ul {list-style-type: none; margin: 0; padding: 0;}
nav ul li {padding:0 10px;}
nav ul li a {text-decoration: none; color: black; display:block;line-height:40px;}
nav ul li:hover {background:rgb(205, 237, 252);}

/* ab hier style für alles außer Menu */

.flag {text-decoration:none;margin: 0.3rem;}

#main {padding: 1rem; margin-top:36px;}
h3 {color: #22b; margin: 1rem 0; font-size:20px;}
h4 {color:#22b; margin-top:0.6rem;}
#main ul {margin-left:1rem; list-style-type:disc; list-style-position: outside;}
#main ul > li {margin-top: 1rem;}
#main ul ul {list-style-type:square;list-style-position:outside;}
.blue {color:#22b;}
.foto {width:100%;height:auto;max-width:600px;vertical-align:top;margin-bottom:3px;}

@media screen and (min-width: 1240px) {
    .foto {width:50%; max-width:600px;}
    
}