/* Stylesheets für die Seite "Lernbereich Praktische Informatik" */

html {
	font-size: 100%;
	scroll-behavior: smooth;
}

/* Hintergrund- und Schriftfarbe für den Body*/
body {
	background-color: floralwhite;
	color: black;
	font-family: arial;
}

/* Hintergrund- und Schriftfabe für den Header (Klasse) */
header {
	background-color: blue;
	color: white;
	/* Abstand zwischen Text und Rand */
	padding: 1.0rem;
}

section {
	display: block;
	background-color: floralwhite;
}

/* Ãœberschrift h1 */
h1 {
	display: block;
	font-size: 2.5rem;
	font-weight: bold;
}

#ohne {
	list-style: none;
}


.site-nav {
	background-color: steelblue;
	color: white;
	padding: 0.5rem;
	margin-top: 0.5rem;
}

/* Listenelemente in der Navigation nebeneinander */
.site-nav li {
	display: inline;
	margin-right: 0.5rem
}

/* Gestaltung der Navigationsliste */
.site-nav ul {
	padding. 0;
	margin: 0;
}

/* Gestaltung der Navigationslinks */
.site-nav a {
	color: white;
	text-decoration: none;
}

/* Gestaltung des Fußbereichs (Klassen) */
.site-footer {
	background-color: steelblue;
	color: white;
	text-align: right;
	padding: 0.5rem;
	margin-top: 1.0rem;
}
.meta-nav ul {
	margin: 0;
}
.meta-nav li {
	display: inline;
	margin-right: 0.5rem;
}

.site-footer a {
	color: white;
	text-decoration: none;
}

/* Kopfbereich mit der Klasse "site-header" gestalten (Klassen) */
.site-header h1 {
	margin-bottom: 0;
}
.site-header p {
	margin-top: 0;
}

/* Gestaltung des Infoboxen (Klassen) */
.infoboxen {
	background-color: whitesmoke;
	padding: 1.0rem;
	margin-bottom: 1.0rem;
}
.infobox {
	text-align: center;
	background-color: white;
	padding: 1.0rem;
	margin-top: 1.0rem;
}

/* Gestaltung für ein Zitat */
blockquote {
	background-color: #faeeee; /*gainsboro;*/ /* hellgrau */
	padding: 1.0rem;
	/* border-left: 1.0rem;*/
	margin: 1.0rem;
}

/* Gestaltung für Kontaktadressen */
address {
	font-style: normal;
	background-color: whitesmoke;
	padding: 0.5rem;
}

/* Gestaltung ausklappbarer Inhalte */
details {
	background-color: whitesmoke;
	padding: 1.0rem;
	border: 1.0px solid lightgrey;
	margin: 1.0rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
	font-size: 1.3rem; /*x-large;*/
}

/* aktuellen Menüpunkt unterstreichen */
.current a {
	text-decoration: underline;
}

/* Bilder einbinden */
#bildlinks {
	float: left;
	clear: left;
}

figure {
	/*text-align: center;*/
	margin-left: 0;
	margin-right: 0;
}

/* CLASS Bilder ---------------------------------------------------- */
.bild1 {
	width: 450px;
	height: auto;
}

.bild2 {
	width: auto;
	height: 150px;
	float: left;
	clear: left;
}
.bild3 {
	width: auto;
	height: 125px;
	float: left;
	clear: left;
}

.bild4 {
	width: 400px;
	height: auto;
	float: left;
	clear: left;	
}

/* ------------------------------------------------------------ */

ul {
	margin-top: 0.5rem;
	margin-bottom:  0.5rem;
}

li {
	margin-top: 0.2rem;
	margin-bottom:  0.2rem;
}

#ohne {
	list-style:none;
}

/* Beschreibungsliste */
dl.erlaeuterung {
	text-indent: 2.5rem;
 	display: grid; 
 	grid-template-columns: auto 1fr; 
  	margin-top: 1.0rem;
  	grid-gap: 0rem;   
}

/* Beschreibungsliste */
dl.algorithmus {
	text-indent: 0rem;
 	display: grid; 
 	grid-template-columns: auto 1fr; 
  	margin-top: 1.0rem;
  	grid-gap: 0rem;   
}

dd.algorithmus {
	padding-left: 0rem;
	margin-top: 0.2rem;
	margin-bottom:  0.2rem;
	text-decoration: none;
}

dl.erlaeuterung {
	text-indent: 2.5rem;
 	display: grid; 
 	grid-template-columns: auto 1fr; 
  	margin-top: 1.0rem;
  	grid-gap: 0rem;   
}

dt {
	font-weight: bold;
	margin-top: 0.2rem;
	margin-bottom:  0.2rem;
}

dd.erlaeterung {
	text-indent: -2.5rem;
	margin-top: 0.2rem;
	margin-bottom:  0.2rem;
	text-decoration: none;
	padding-left: -2.0rem;
}

/* Tabelle */
table {
	border: 0;
	margin: 1.0rem;
}

thead {
	background-color: lightgrey;
}

/* ClASS tabellenkoerper2 ------------------------ */
.tabellenkoerper2{
	background-color: white;	
}

tbody {
	background-color: whitesmoke;
}

th, td {
	padding: 0.5rem 1.0rem;
	text-align: center;
	vertical-align: top;
}

/* Header der Seite "Algorithmus" */
#header {
	width: 1060px;
		vertical-align: middle;
	overflow: auto;
}
#headerschrift {
	float: right;
	width: 850px; 		/* Abstand vom Rechten Rand aus */
}

#bild {
	float: left;
	width: 0px;
}