body {
	font: 1em/1.4 Source Sans Pro, Calibri, sans-serif;
	background: #D3D3D3;
	color: black;
}

.info {
	max-width: 40em;
	margin: 2em auto;
}

/*.info img {
	float: right;
	width: 15em;
	margin-left: 0em;
}*/

.info img {max-width: 640px}

@media (min-width: 40em) {
	.info {
		max-width: 60em;
		padding-inline: 2em;
		display: grid;
		grid-template-columns: [info-header-start] 3fr [info-header-end info-body-start] 5fr [info-body-end];
		grid-template-rows: auto auto;
		gap: 0 2em;
	}
}

.info header {
	grid-column: info-header;
	grid-row: 1 / -1;
	font-family: Futura;
	text-transform: uppercase;
}

.info h2 {
	font-size: 1em;
	font-weight: normal;
	color: hsl(0, 0%, 60%)
}

.info header p {
	font-size: 1.62em;
	line-height: 1.2;
	color: hsl(0, 0%, 40%);
	margin: 1em 0;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: none;
}

.info footer {
	grid-column: info-header;
	grid-row: 3 / 4;
	font-family: Futura;
	text-transform: uppercase;
}

.info > * {
	grid-column: info-body;
}

.info h2,
.info p {
	margin: 0 0 0.7em;
}

h1 {
	text-align: center;
}
/*h3 {
	color: darkorange;
    font-size: 1em;
}

button { width: 120px; height: 30px; background-color: blue; color: white; border: 0;  font-size: 16px; }*/

.ueberschrift2 {
   font-weight: bold;
   font-size: larger;    
}

.ueberschrift3 {
   font-style: italic;
   font-size: larger;    
}

summary {
    color: green
}

.container1 {
                background-color: #D3D3D3;
                height: 5px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
            }
            .centered-element {
                background-color: #D3D3D3;
                width: 100%;
                height: 5px;
                border: none;
                background-image: linear-gradient(to right, #D3D3D3, #FFEBCD, #F5FFFA);
            }

/*.container2 {
                background-color: #D3D3D3;
                height: 5px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
            }
            .centered-element {
                background-color: #D3D3D3;
                width: 100%;
                height: 5px;
                border: none;
                background-image: linear-gradient(to right, #FFEBCD, #F5FFFA, #D3D3D3);
            }

.container3 {
                background-color: #D3D3D3;
                height: 5px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
            }
            .centered-element {
                background-color: #D3D3D3;
                width: 100%;
                height: 5px;
                border: none;
                background-image: linear-gradient(to right, #B5F4FD, #D3D3D3, #FFEBCD);
            }

.container4 {
                background-color: #D3D3D3;
                height: 5px;
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: none;
            }
            .centered-element {
                background-color: #D3D3D3;
                width: 100%;
                height: 5px;
                border: none;
                background-image: linear-gradient(to right, #B5F4FD, #D3D3D3, #FFEBCD);
            }*/