/*Stylesheet für die Klimabewegung Basel*/
/*test-version nach dem desktop-first-system gecodet*/

* {
	box-sizing:border-box;
	margin:0;
	padding:0;
	border:0;
	color:black;
	font-size: 100%;
	list-style-type:none;
}

body {
	position:relative;
  background-color:#f2931f;
	font-family: Helvetica, Verdana, sans-serif;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}

/*Kopf*/
header {
	position:relative;
  padding:20px;
  background-color:#FF4F00;
}

nav {
  position:absolute;
  left:370px;
  top:20px;
}

/*der button um später das menu wieder hervorholen zu können ist versteckt*/
label {
  display: none;
}

#toggle {
  display: none;
}

nav ul {
	position: relative;
}

nav li {
	margin: 5px 0px 5px 0px;
}

nav a {
	padding: 5px;
  font-size: 120%;
  text-decoration:none;
}

nav a:hover, nav a:active, nav a:focus {
  background-color:#f2931f;
}

/*Hauptteil*/
main {
  position:relative;
  background-color:white;
  padding:20px;
	text-align: justify;
}

main h2 {
  font-size:200%;
}

main p{
  margin:10px 0px 10px 0px;
}

/*Fusszeile*/
footer {
	position:relative;
	background-color:#FF4F00;
	width:1000px;
  padding:10px 20px 10px 20px;
}

@media only screen and (max-width: 1000px) {
  body {
  	width:100%;
  }

  footer {
  	width:100%;
  }
}

@media only screen and (max-width: 650px) {
  /*Kopf*/
  header {
		position: fixed;
    top: 0;
    width: 100%;
		height: 90px;
		z-index: 1;
		padding: 0px;
		text-align: left;
  }

	main {
		padding-top: 120px;
	}

	nav {
	  position: relative;
		top: 0px;
		left: 0px;
		width: 100%;
		text-align: center;
		background-color: #FF4F00;
	  display: none;
	}

  label {
    display: block;
    cursor: pointer;
		position: fixed;
		right: 10px;
		top: 5px;
		font-size: 50px;
		padding: 10px 0 10px 0;
		background-color: #FF4F00;
  }

	label div#eins {
		display: block;
	}


	label div#zwei {
		display: none;
	}

	#toggle:checked + label > div#eins {
		display: none;
	}


	#toggle:checked + label > div#zwei {
		display: block;
	}

  img {
    position: fixed;
		top: 10px;
		left: 10px;
    height: 70px;
  }

	nav ul {
		margin-top: 90px;
	}

  nav li {
		width: 100%;
		margin: 0;
  }

	nav a {
		width: 100%;
		display:inline-block;
	}

  #toggle:checked + label + nav {
    display: block;
  }
}

@media only screen and (max-width: 250px) {
	main {
		text-align: left;
	}
}