@media (max-width: 767px) {
body {
	font-size: 16px;
	line-height: 1.4;
	}
}

@media (max-width: 1023px) {
    .section_preview {
        flex: 1 1 calc(50% - 20px); /* Zwei Elemente pro Zeile */
    }
}

@media (max-width: 767px) {
	.section_preview {
		flex: 1 1 100%; /* Ein Element pro Zeile */
	}
}

body {
	margin: 0;
	font-family: Calibri;
	font-size: 18px;
	line-height: 1.5;
	padding-top: 8em;
	display: flex;
	justify-content: center; /* Zentriert den Inhalt horizontal */
	align-items: flex-start; /* Optional: Zentrierung vertikal, falls gewünscht */
	min-height: 100vh; /* Stellt sicher, dass der Inhalt die gesamte Höhe abdeckt */
	background-color: #F5F8FA; /* Hintergrundfarbe der leeren Spalten */
}

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #F5F8FA;
	display: flex;
	flex-direction: column;
	height: 110pt; /* Ausgangshöhe des Headers */
	transition: height 0.3s ease;
	z-index: 1000;
}

.logo-container {
	transition: opacity 0.3s ease, transform 0.3s ease;
	text-align: center;
	padding-top: 10pt;
}

img.logo {
	max-width: 100%;
}

.text-container {
	text-align: center;
	transition: transform 0.3s ease, font-size 0.3s ease;
}

p.header-text {
	margin: 0;
	white-space: nowrap; /* Verhindert Zeilenumbrüche */
	overflow-x: auto; /* Fügt einen horizontalen Scrollbalken hinzu */
	max-width: 100%; /* Begrenzung auf die Breite des Containers */
}

header.scrolled {
	height: 55pt; /* Verkleinerte Höhe des Headers */
}

header.scrolled .logo-container {
	opacity: 0; /* Logo ausblenden */
	transform: translateY(-70px); /* Nach oben schieben, um Platz freizugeben */
}

header.scrolled .text-container {
	transform: translateY(-80px); /* Text nach oben schieben, um Logo-Platz einzunehmen */
}

article {
	text-align: justify;
	width: 100%;
	max-width: 44em; /* Maximale Breite der mittleren Spalte */
	background-color: #FFFFFF; /* Hintergrundfarbe der mittleren Spalte */
	box-shadow: 0 0 0.555em rgba(0, 0, 0, 0.1); /* Schattierung für besseren Fokus */
	padding: 1.1em;
	box-sizing: border-box; /* Berücksichtigt die Padding-Werte innerhalb der Breite */
	margin-bottom: 0.56em;
}

article.startpage {
	max-width: 60em; /* Maximale Breite der mittleren Spalte */
}

footer {
	font-size: 0.67em;
	text-align: center;
	padding-bottom: 0.56em;
}

section {
	display: flex; /* Aktiviert CSS Grid */
	flex-wrap: wrap; /* Ermöglicht Zeilenumbruch, falls der Platz nicht ausreicht */
	gap: 0.89em; /* Abstand zwischen den Elementen */
	padding: 0.67em; /* Optional: Innenabstand */
}

.section_title {
	
}

.section_preview {
	float: none;
	width: 32%;
	border: 1px solid #ddd; /* Rahmen für visuelle Trennung */
	padding: 0.67em; /* Innenabstand für Lesbarkeit */
	box-sizing: border-box;
	background-color: #f9f9f9; /* Hintergrund bleibt für Sichtbarkeit */
}

/* Verbergen des Standard-Dreiecks */
details summary {
	list-style: none;
    cursor: pointer;
    position: relative;
    padding-left: 1.67em; /* Platz für das Icon */
}

/* Hinzufügen eines geschlossenen Icons */
details summary::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.111em; /* Breite des Icons */
    height: 1.111em; /* Höhe des Icons */
    background-image: url('_img/arrow_closed.png'); /* Pfad zur Bilddatei */
    background-size: contain; /* Bild skaliert sich passend */
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
}

/* Geöffnetes Icon */
details[open] summary::before {
    background-image: url('_img/arrow_open.png'); /* Pfad zum geöffneten Icon */
}

details.closed {
	font-size: 1em;
}

p {
	margin-top: 0.5em;
	margin-bottom: 1em;
}

p.section {
	margin-top: 0em;
	margin-bottom: 0.3em;
}

p.creationline {
	color: #323232;
	font-size: 0.67em;
	margin-top: 0em;
	margin-bottom: 0.67em;
}

a {
	color: #000000 ;
	text-decoration: none;
	border: none;
}

a:hover {
	color: #787878;
}

a:visited {
	color: #000000;
}

a:visited:hover	{
	color: #787878;
}

a.author {
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

a.author:hover {
	color: #787878;
}

a.author:visited {
	color: #000000;
}

a.author:visited:hover {
	color: #787878;
}

h1 {
	font-size: 1.8em;
	font-weight: normal;
	margin-top: 0em;
	margin-bottom: 0em;
}

summary	{
	font-size: 1.3em;
	font-weight: normal;
	margin-bottom: 0em;
	text-align: left;
}

h3 {
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0em;
}

img {
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

img.article {
	width: 60%;
	margin-bottom: 0.89em;
}

img.startpage {
	width: 100%;
	margin-bottom: 0.3em;
}

.definition_container {
    width: 80%;
    margin: 0 auto;
}

.definition_header {
    font-weight: bold;
}

.definition_text {
    font-weight: bold;
    border-top: 2px solid #8898BF;
    border-bottom: 2px solid #8898BF;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}

ul {
	list-style-type: square;
	margin-top: 0.56em;
	padding-left: 1.2em;
}

ul.strong {
	font-weight: bold;
	list-style-type: square;
	margin-top: 0.56em;
	padding-left: 1.2em;
}

ul.source {
	font-size: 0.89em;
	list-style-type: square;
	margin-top: 0.56em;
	padding-left: 1.2em;
}

ul.furtherarticles {
	font-size: 0.89em;
	list-style-type: square;
	margin-top: 0.56em;
	padding-left: 1.2em;
}

blockquote {
	color: #666666;
	margin-left: 3em;
	margin-right: 3em;
	margin-bottom: 0em;
	font-style: italic;
}

p.quotesource {
	font-size: 0.67em;
	margin-right: 4em;
	text-align: right;
}







.profile_container {
    width: 95%;
    margin: 0 auto;
}

.profile_row {
    display: flex;
    gap: 0.67em;
    margin-bottom: 1em;
}

.profile_details {
    padding: 0em;
    flex: 1;
}

.profile_image {
	float: none;
	width: auto;
	padding: 0.4em; /* Innenabstand für Lesbarkeit */
	box-sizing: border-box;
}