/* ========= Basis ========= */
body {
	background: #f8f9fa
}
#Angelpunkt::after {
	content: "";
	display: block;
	clear: both;
}
/* Bereich nach Bedarf anpassen: .article-body ist nur ein Beispiel-Container */
.article-body ul,
.article-body ol {
	/* Einrückung der ersten Ebene */
	padding-inline-start: 1.75rem !important;
	margin: 0 0 1rem 0;
	list-style-position: outside;
	list-style-type: disc;
}

	.article-body ul ul,
	.article-body ol ol {
		/* Einrückung der zweiten (und tieferen) Ebenen */
		padding-inline-start: 1.5rem !important;
		margin-top: .35rem;
		list-style-type: disc;
	}

/* Optional: etwas vertikaler Abstand zwischen Punkten */
.article-body li + li {
	margin-top: .25rem;
}

header {
	padding: 5px;
	margin: 0
}

main {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important
}

.text-justify {
	text-align: justify;
	hyphens: auto
}

figure figcaption {
	border: 0;
	margin-top: .25rem;
	font-size: .8rem;
	color: #6c757d
}

/* Bilder */
.article img {
	display: block
}
/* 1) kein Baseline-Gap */
.step-img {
	width: 100%;
	max-width: 100%;
	height: auto
}

@media (min-width:768px) {
	.step-img {
		width: auto;
		max-width: 480px
	}
}

/* Artikel-Container/Typo */
.article-shell {
	max-width: 100%;
	margin-inline: auto
}

.article {
}

	.article p {
		line-height: 1.7
	}

	.article::after {
		content: "";
		display: block;
		clear: both
	}

	.article ul,
	.article ol {
		padding: 1rem;
		margin: 0;
		list-style-position: outside;
		text-align: left
	}

/* Artikelbild/Figur */
.article-img {
	max-width: 300px;
	height: auto
}

	.article-img figcaption {
		margin-bottom: 0;
		line-height: 1.2
	}

.article-figure {
	width: 100%;
	margin: 0 0 1rem 0
}

@media (min-width:768px) {
	.article p {
		text-align: justify;
		hyphens: auto
	}

	.article-figure {
		float: left;
		width: clamp(220px,30%,360px);
		margin: .25rem 1rem 1rem 0
	}
}

@media (min-width:992px) {
	.article-figure {
		width: clamp(240px,28%,380px)
	}
}

@media (min-width:1200px) {
	.article-figure {
		width: clamp(260px,26%,400px)
	}
}

/* Sonstiges/Utilities */
.article-fixed {
	height: 300px;
	overflow: hidden
}

.article-shell a:has(> img)::before,
.article-shell a:has(> img)::after {
	content: none !important;
	background: none !important
}

.fullwidth-article img {
	width: 100% !important;
	height: auto;
	display: block
}

.hr-1px {
	border: 0;
	border-top: 1px solid rgba(0,0,0,.15);
	margin: 1.25rem 0
}

.byline {
	font-size: .95rem;
	color: #6c757d
}

.pullquote {
	font-size: 1.1rem;
	font-style: italic;
	border-left: 3px solid #dee2e6;
	padding-left: .75rem
}

.law-box {
	border-left: 4px solid #dc3545;
	background: #fff
}

	.law-box h3 {
		color: #dc3545;
		font-size: 1.1rem;
		margin-bottom: .25rem
	}

/* Mobile Feinheiten */
@media (max-width:767.98px) {
	.article-img {
		float: none;
		display: block;
		max-width: 100%;
		margin: 0 auto 1rem
	}
}

@media (max-width:575.98px) {
	.container, .container-fluid {
		padding-left: 2px !important;
		padding-right: 2px !important
	}

	.article {
		padding-left: 2px !important;
		padding-right: 2px !important
	}

	.article-figure {
		width: 100%;
		margin: 0 0 1rem 0
	}
}



/* Überschriften-Feinjustierung im Artikel */
main.article-shell h2 {
	margin-top: 0 !important;
	line-height: 1.15
}

main.article-shell .article > header {
	padding-top: 0 !important;
	margin-top: 0 !important
}

main.article-shell > *:first-child h2:first-child {
	margin-top: -6px !important
}

/* Meta-Zeile entkernen + Borders neutralisieren */
.article header p.small,
.article header p.small.text-muted {
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	padding-bottom: 0 !important;
	margin-bottom: .25rem !important
}

.article header p {
	border: 0 !important
}

.article header {
	border-bottom: 0 !important
}

@media (min-width:768px) {
	.article header::after {
		content: "";
		display: block;
		clear: both
	}
}

/* ========= Karten & Footer ========= */
/* Einheitliche Höhe für alle Artikel-Karten (deine 4 Boxen) */
article.p-2.border.bg-light {
	min-height: 420px;
	display: flex;
	flex-direction: column;
}

	/* Footer-Button: unten andocken, vertikal zentriert zwischen Linie und Kartenende */
	article.p-2.border.bg-light .article-footer {
		margin-top: auto !important; /* ersetzt mt-auto im Markup */
		flex-grow: 1;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		border-top: 1px solid var(--bs-border-color, #dee2e6);
		min-height: 3.5rem; /* Raum für „Mitte“ */
		padding-block: .5rem;
	}

		article.p-2.border.bg-light .article-footer .btn {
			margin-left: 0 !important
		}
.article-criteria {
	font-size: 0.95rem; /* etwas kleiner als Grundtext */
	line-height: 1.5;
	margin: 1rem 0;
	padding-left: 1.2rem;
}

	.article-criteria ul {
		list-style-type: disc; /* klassische Punkte */
		margin: 0.3rem 0 0.6rem 1.2rem;
		padding: 0;
	}

	.article-criteria li {
		margin-bottom: 0.3rem;
	}

	.article-criteria strong {
		font-weight: 600; /* halbfett, aber nicht zu schwer */
		font-size: 1rem;
	}
.legal-quote {
	font-family: "Georgia", "Times New Roman", serif; /* klassische Zeitungsschrift */
	font-size: 0.85rem; /* kleiner als Haupttext */
	line-height: 1.5;
	color: #555; /* dezentes Grau */
	border-left: 3px solid #999; /* graue Linie links */
	padding-left: 1rem;
	margin: 1rem 0;
	background: #f8f9fa; /* leicht abgesetzter Hintergrund */
}

	.legal-quote p {
		margin: 0.4rem 0;
	}

	.legal-quote strong {
		color: #000; /* wichtige Stellen schwarz hervorheben */
		font-weight: 600;
	}
figure-small {
	max-width: 400px; /* Bild kleiner */
	margin: 1rem auto; /* zentriert mit Abstand */
	text-align: center; /* Bildunterschrift mittig */
}

.figure-small img {
	width: 100%; /* passt sich dem Container an */
	height: auto;
	border: 1px solid #ccc; /* dezenter Rahmen */
	border-radius: .25rem; /* leicht abgerundet */
}

.figure-small figcaption {
	font-size: 0.85rem; /* kleinere Schrift */
	color: #555; /* grauer Text */
	margin-top: 0.4rem;
}
/*
.article {
	display: flow-root;
}*/