/* CSS Document */
@charset "UTF-8";
body {
	margin: 0 auto;
	padding: 5px;
	max-width: 60em;
}
.cl_kopf, footer{
	background: #4E5869;
}


/*------------------------------------- Details und Summary -----------------------------*/
details {
	padding: 0.5em;
	border-bottom: thin solid #EEEEEE;
}
summary label {
	font-weight: bold;
}
summary::-webkit-details-marker {
  display: none;
}
summary:focus {
	outline-style: none;
}
details[open] {
	background:#eeeeee;
	margin-bottom: 1em;
}
/*details[open]>summary{
	box-shadow: 10px 10px 10px 20px #999;
}*/
.cl_uebung_kopf {
	display: flex;
	flex-direction: row;
}
.cl_icon_img {
	flex: 0.7;
}
.cl_uebung_kopf_text {
	flex: 5;
	padding-left: 1em;
	padding-right: 1em;
	border: thick;
}
.cl_uebung {
	display: flex;
	flex-direction: column;
	margin-top: 5px;
}
/* große Viewports */
@media all and (min-width: 40em) {
.cl_uebung {
    flex-direction: row;
  }
}

.cl_svg {
	flex: 2;
	max-width: 30em;
	min-height: 30em;
	padding: 0.5em;
}
.cl_textkram {
	flex: 1;
	padding-left: 1em;
}
small {
	font-size: 0.7em;
	color: darkgrey;
}
iframe {
	border: none;
}

.cl_button_zeile {
	padding: 0.2em;
}
.cl_ueb_liste {
	margin-block-start: 0px;
	margin-block-end: 0px;
}

h3 {
	font-size: 0.7em;
	margin-block-end: 0px;
}
.cl_reihe_btn {
	width: 4em;
	height: 2em;
	font-size: 1.5em;
	font-weight: bold;
}
.cl_versteckt {
	display:none;
}
.cl_standard_btn {
	font-size: 0.9em;
}
.cl_standard_cb {
	font-size: 0.9em;
	margin-top: 0.5em;
}
/*Verschiebbare Elemente */
.cl_blauer_rahmen {
	border-top: 4px solid lightblue;
}
.cl_roter_rahmen {
	border: 2px solid red;
	/*border-radius: 5px;*/
}