body {
	font: 300 20px/1.6 -apple-system, BlinkMacSystemFont, "Lexend", Futura, "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
	padding: 50px;
	max-width: 500px;
}

body.larger{
	max-width: 600px;
}

p {
	margin: 5px 0 15px 0;
}

a, a:link, a:visited{
	color: #4646ff;
	text-decoration: none;
	border-bottom: 1px solid #4646ff;
}

a:hover{
	color: #000000;
	border-bottom-color: #000000;
}

ul{
	padding-inline-start: 20px;
}

/* FAQ */

.faq-item {
	scroll-margin-top: 40px; 
	padding: 10px 0;
}

.faq-question {
	cursor: pointer;
	display: flex;
	align-items: center;
	font-weight: bold;
}

.faq-answer {
	display: none;
	margin-top: 10px;
	padding-left: 20px; /* Gleiche Einrückung wie das Triangle */
}

.triangle {
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 10px solid #333; /* Triangle zeigt standardmäßig nach rechts */
	margin-right: 10px; /* Abstand zwischen Triangle und Text */
	transition: transform 0.2s;
}

.triangle.open {
	transform: rotate(90deg); /* Geöffnetes Triangle zeigt nach unten */
}

@media (max-width: 600px) {
	body{
		padding: 50px 25px;
	}
}

@media (prefers-color-scheme: dark) {
	body, html{
		background-color: #121212;
		color: #FFFFFF;
	}
	
	a, a:link, a:visited{
		color: #FFFFFF;
		border-bottom-color: #FFFFFF;
	}
	
	a:hover{
		color: #4646ff;
		border-bottom-color: #4646ff;
	}
}