<style>

div#summ details {
	top: 1em;
	left: 0em;
	height: -moz-available;
	width: -moz-available;
	border: 2px double brown;
	display: inline-block;
	padding: 2em 2em;
		background-image: url(./../Bilder/sidebutton.png);
}

div#summ details[open] summary:after {
  	content: "-";
  	color: grey;
  	display: inline-block;

}

div#summ details summary::-webkit-details-marker {
  	color: #fff;
  	font-size: 500%;
}

div#summ details summary {

	top: 2em;
	left: 1em;
	display: block;
}

div#summ details summary::-webkit-details-marker {  display: none;}
div#summ details summary::-moz-details-marker { display:none; }
div#summ details summary::-ms-details-marker { display:none; }
div#summ details summary::-o-details-marker { display:none; }

div#summ details summary::after {
  	content: "+";
  	color: black;
  	float: left;
  	font-size: 1em;
  	font-weight: bold;
  	margin: -5px 10px 0 0;
  	padding: 0;
}

div#summ details summary strong {
	position: relative;
	left: 1em;
	top: 0em;
}

div#summ details[open] p#pos {
	position: relative;
	left: 2em;
	top: 0em;
	display: -webkit-box;
	padding: 0em 3.5em 0em 0em;
}
</style



<div id="summ">
	<details id="Linux">

		<summary>
			<strong><u>die Überschrift</u></strong>

		</summary>
		<p id="pos">mein langer text 1 </p>
	</details>

	<details id="die nächste überschrift">

		<summary>
			<strong>Details</strong>
		</summary>
		<p id="pos">Text Text Text,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,</p>

	</details>
</div>