<div class="picture">
  		<div class="tabs">
  			<div id="tab1">
  				<a href="#tab1">Teil 1</a>
   				<div><p> Hier steht jetzt mal was </p></div>
  			</div>
			<div id="tab2">
   				<a href="#tab2">Teil 2</a>
   				<div><p> Und hier was anderes </p></div>
  			</div>
 		</div>
	</div>

div.tabs { 
  height: 370px;        /* No height: can grow if :target doesn't work */
  position: relative;		/* Establish a containing block */
  line-height: 1;		/* Easier to calculate with */
  z-index: 0}			/* So that we can put other things behind */
div.tabs > div {
  display: inline}		/* We want the buttons all on one line */
div.tabs > div > a {
  color: white;			/* Looks more like a button than a link */
  background: #B3B3B3;		/* Active tabs are light gray */
  padding: 0.2em;		/* Some breathing space */
  border: 0.1em outset #B1B1B1;	/* Make it look like a button */
  border-bottom: 0.1em solid #B3B3B3} /* Visually connect tab and tab body */
div.tabs > div:not(:target) > a {
  border-bottom: none;		/* Make the bottom border disappear */
  background: #999}		/* Inactive tabs are dark gray */
div.tabs > div:target > a,	/* Apply to the targeted item or... */
:target #default2 > a {		/* ... to the default item */
  border-bottom: 0.1em solid #B3B3B3; /* Visually connect tab and tab body */
  background: #B3B3B3;}		/* Active tab is light gray */
div.tabs > div > div {
  background: #B3B3B3;		/* Light gray */
  width: 410px;
  z-index: -2;			/* Behind, because the borders overlap */
  left: 0; top: 1.3em;		/* The top needs some calculation... */
  bottom: 0; right: 0;		/* Other sides flush with containing block */
  border: 0.1em right #B1B1B1;}	/* 3D look */
div.tabs > div:not(:target) > div { /* Protect CSS1 & CSS2 browsers */
  position: absolute }		/* All these DIVs overlap */
div.tabs > div:target > div, :target #default2 > div {
  position: absolute;		/* All these DIVs overlap */
  z-index: -1}			/* Raise it above the others */