/* Download-Seite (Blaupause B4, Spur P19 Downloads, 10.10.2026). Nur auf Downloads mit neuer Vorlage geladen.
   Nutzt die Facelift-Grundwerte (--sf-*) mit Rückfallwerten, falls der Facelift aus ist. */

.snf-dl {
	--dl-rot: var(--sf-rot, #8b0d14);
	--dl-tanne: var(--sf-tanne, #0f3d2e);
	--dl-schwarz: var(--sf-schwarz, #111);
	--dl-hell: var(--sf-hell, #f7f7f5);
	--dl-rand: var(--sf-rand, rgba(17, 17, 17, .07));
	--dl-hebung: var(--sf-hebung, 0 1px 1px rgba(17, 17, 17, .04), 0 2px 4px -2px rgba(17, 17, 17, .06), 0 14px 26px -18px rgba(17, 17, 17, .22));
	--dl-hebung-hoch: var(--sf-hebung-hoch, 0 1px 1px rgba(17, 17, 17, .04), 0 6px 10px -6px rgba(17, 17, 17, .10), 0 26px 38px -22px rgba(17, 17, 17, .30));
	--dl-kante: var(--sf-kante, inset 0 1px 0 rgba(255, 255, 255, .95));
	--dl-kurve: var(--sf-kurve, cubic-bezier(.2, .7, .2, 1));
	color: var(--dl-schwarz);
}

.snf-dl-rahmen {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

.snf-dl h1,
.snf-dl h2,
.snf-dl h3 {
	font-family: "Space Grotesk", sans-serif;
	color: var(--dl-schwarz);
	letter-spacing: -.01em;
}

/* ---------- Kopf ---------- */

.snf-dl-kopf {
	background: var(--dl-hell);
	padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px);
	border-bottom: 1px solid var(--dl-rand);
}

.snf-dl-kopf-raster {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
	gap: clamp(28px, 5vw, 72px);
	align-items: center;
}

.snf-dl-eyebrow {
	display: inline-block;
	margin: 0 0 14px;
	padding: 6px 12px;
	border-radius: 999px;
	background: #fff;
	box-shadow: var(--dl-hebung);
	color: var(--dl-tanne);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

.snf-dl-kopf h1 {
	margin: 0 0 16px;
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.08;
	font-weight: 700;
}

.snf-dl-subline {
	margin: 0 0 22px;
	max-width: 36em;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.55;
}

.snf-dl-fakten {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.snf-dl-fakten li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 600;
}

.snf-dl-fakten li::before {
	content: none;
}

.snf-dl-fakten svg {
	flex: none;
	color: var(--dl-tanne);
}

.snf-dl-aktion {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 18px;
}

.snf-dl-knopf,
.snf-dl-knopf:visited {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 28px;
	border-radius: var(--sf-r-m, 12px);
	background: var(--dl-rot);
	color: #fff !important;
	font-family: "Space Grotesk", sans-serif;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none !important;
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 14px 26px -12px rgba(139, 13, 20, .55);
	transition: transform var(--sf-t-mittel, 220ms) var(--dl-kurve), box-shadow var(--sf-t-mittel, 220ms) var(--dl-kurve), background-color var(--sf-t-mittel, 220ms);
}

.snf-dl-knopf:hover {
	background: #6f0a10;
	transform: translateY(-2px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 20px 30px -14px rgba(139, 13, 20, .6);
}

.snf-dl-knopf:focus-visible {
	outline: 3px solid var(--dl-tanne);
	outline-offset: 3px;
}

.snf-dl-knopf.hell,
.snf-dl-knopf.hell:visited {
	background: #fff;
	color: var(--dl-rot) !important;
	box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .5);
}

.snf-dl-knopf.hell:hover {
	background: #fff;
	color: #6f0a10 !important;
}

.snf-dl-meta {
	font-size: 14px;
	color: #55554f;
}

.snf-dl-sprung {
	display: inline-block;
	margin-top: 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--dl-schwarz) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-color: rgba(17, 17, 17, .3);
}

.snf-dl-sprung::after {
	content: " \2193";
}

/* Vorschaubild als Blatt Papier */
.snf-dl-blatt {
	position: relative;
	display: block;
	justify-self: center;
	width: 100%;
	max-width: 400px;
	transform: rotate(2deg);
	transition: transform var(--sf-t-ein, 520ms) var(--dl-kurve);
	text-decoration: none !important;
}

.snf-dl-blatt img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .08), 0 30px 50px -24px rgba(17, 17, 17, .45), 0 0 0 1px rgba(17, 17, 17, .06);
}

.snf-dl-blatt:hover {
	transform: rotate(0deg) translateY(-4px);
}

.snf-dl-blatt-marke {
	position: absolute;
	top: -12px;
	right: -12px;
	padding: 8px 12px;
	border-radius: 10px;
	background: var(--dl-rot);
	color: #fff;
	font: 700 14px/1 "Space Grotesk", sans-serif;
	box-shadow: 0 10px 18px -10px rgba(139, 13, 20, .7);
	transform: rotate(-2deg);
}

/* ---------- Prüfpunkte ---------- */

.snf-dl-punkte {
	padding: clamp(48px, 7vw, 88px) 0 clamp(36px, 5vw, 56px);
}

.snf-dl-punkte h2,
.snf-dl-schritte h2 {
	margin: 0 0 14px;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.15;
}

.snf-dl-einleitung {
	max-width: 46em;
	margin-bottom: 32px;
	font-size: 18px;
	line-height: 1.6;
}

.snf-dl-einleitung p {
	margin: 0 0 10px;
}

.snf-dl-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	counter-reset: none;
}

.snf-dl-punkt {
	position: relative;
	margin: 0;
	padding: 22px 24px 20px 74px;
	border-radius: var(--sf-r-l, 16px);
	background: #fff;
	border: 1px solid var(--dl-rand);
	box-shadow: var(--dl-kante), var(--dl-hebung);
}

.snf-dl-punkt::before {
	content: none;
}

.snf-dl-nr {
	position: absolute;
	left: 22px;
	top: 20px;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	border: 2px solid var(--dl-rot);
	color: var(--dl-rot);
	font: 700 16px/1 "Space Grotesk", sans-serif;
	background: #fff;
}

.snf-dl-punkt h3 {
	margin: 4px 0 8px;
	font-size: 19px;
	line-height: 1.3;
	font-weight: 700;
}

.snf-dl-punkt p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.snf-dl-punkt a,
.snf-dl-einleitung a,
.snf-dl-ratgeber a,
.snf-dl-schritte a {
	color: var(--dl-rot);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Download-Band ---------- */

.snf-dl-band {
	padding: 8px 0 clamp(40px, 6vw, 72px);
}

.snf-dl-band-innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px 32px;
	max-width: 1100px;
	padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 48px);
	border-radius: 20px;
	background: var(--dl-tanne);
	color: #fff;
	box-shadow: var(--dl-hebung-hoch);
}

.snf-dl-band-text {
	margin: 0;
	max-width: 36em;
	font-size: 19px;
	line-height: 1.5;
	color: #fff;
}

.snf-dl-band-text strong {
	display: block;
	font: 700 clamp(22px, 2.4vw, 28px)/1.2 "Space Grotesk", sans-serif;
	margin-bottom: 4px;
}

/* ---------- Arbeitsschritte ---------- */

.snf-dl-schritte {
	padding: clamp(40px, 6vw, 72px) 0;
	background: var(--dl-hell);
	border-top: 1px solid var(--dl-rand);
	border-bottom: 1px solid var(--dl-rand);
}

.snf-dl-schrittliste {
	list-style: none;
	margin: 28px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	position: relative;
}

.snf-dl-schrittliste::before {
	content: "";
	position: absolute;
	left: 22px;
	right: 22px;
	top: 22px;
	height: 2px;
	background: linear-gradient(90deg, var(--dl-rot), rgba(139, 13, 20, .15));
}

.snf-dl-schrittliste li {
	position: relative;
	margin: 0;
	padding: 0;
}

.snf-dl-schrittliste li::before {
	content: none;
}

.snf-dl-schritt-nr {
	position: relative;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--dl-rot);
	color: #fff;
	font: 700 18px/1 "Space Grotesk", sans-serif;
	box-shadow: 0 0 0 6px var(--dl-hell);
}

.snf-dl-schrittliste h3 {
	margin: 0 0 6px;
	font-size: 19px;
	line-height: 1.3;
}

.snf-dl-schrittliste p {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

/* ---------- Weiter: Ratgeber, Checklisten, Kasten ---------- */

.snf-dl-weiter {
	padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.snf-dl-weiter h2 {
	margin: 0 0 12px;
	font-size: clamp(24px, 2.6vw, 30px);
	line-height: 1.2;
}

.snf-dl-ratgeber {
	max-width: 46em;
	margin: 0 0 22px;
	font-size: 18px;
	line-height: 1.6;
}

.snf-dl-karten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
	margin-bottom: clamp(36px, 5vw, 56px);
}

.snf-dl-karte {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px;
	border-radius: var(--sf-r-l, 16px);
	background: #fff;
	border: 1px solid var(--dl-rand);
	box-shadow: var(--dl-kante), var(--dl-hebung);
	color: var(--dl-schwarz) !important;
	text-decoration: none !important;
	transition: transform var(--sf-t-mittel, 220ms) var(--dl-kurve), box-shadow var(--sf-t-mittel, 220ms) var(--dl-kurve);
}

.snf-dl-karte:hover {
	transform: translateY(-3px);
	box-shadow: var(--dl-kante), var(--dl-hebung-hoch);
}

.snf-dl-karte-art {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dl-tanne);
}

.snf-dl-karte-titel {
	font: 700 19px/1.3 "Space Grotesk", sans-serif;
}

.snf-dl-karte-mehr {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	color: var(--dl-rot);
}

.snf-dl-karte-mehr::after {
	content: " \2192";
}

.snf-dl-kasten {
	max-width: 760px;
	padding: clamp(22px, 3vw, 32px);
	border-radius: var(--sf-r-l, 16px);
	border: 1px solid var(--dl-rand);
	background: var(--dl-hell);
}

.snf-dl-kasten h3 {
	margin: 0 0 8px;
	font-size: 22px;
}

.snf-dl-kasten p {
	margin: 0 0 14px;
}

.snf-dl-kasten p:last-child {
	margin-bottom: 0;
}

/* ---------- Download-Leiste am Handy ---------- */

.snf-dl-leiste {
	display: none;
}

@media (max-width: 899px) {
	.snf-dl-kopf-raster {
		grid-template-columns: 1fr;
	}

	.snf-dl-blatt {
		max-width: 280px;
		order: 2;
	}

	.snf-dl-liste,
	.snf-dl-schrittliste {
		grid-template-columns: 1fr;
	}

	.snf-dl-schrittliste::before {
		left: 21px;
		right: auto;
		top: 22px;
		bottom: 22px;
		width: 2px;
		height: auto;
		background: linear-gradient(180deg, var(--dl-rot), rgba(139, 13, 20, .15));
	}

	.snf-dl-schrittliste li {
		padding-left: 64px;
	}

	.snf-dl-schritt-nr {
		position: absolute;
		left: 0;
		top: 0;
	}

	.snf-dl-punkt {
		padding: 18px 18px 16px 64px;
	}

	.snf-dl-nr {
		left: 16px;
		top: 16px;
	}

	.snf-dl-knopf {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	body.snf-dl-b4 {
		padding-bottom: 72px;
	}

	.snf-dl-leiste {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 900;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96);
		border-top: 1px solid var(--dl-rand);
		box-shadow: 0 -10px 24px -16px rgba(17, 17, 17, .35);
		transform: translateY(110%);
		visibility: hidden;
		transition: transform var(--sf-t-mittel, 220ms) var(--dl-kurve), visibility 0s linear var(--sf-t-mittel, 220ms);
	}

	.snf-dl-leiste.sichtbar {
		transform: none;
		visibility: visible;
		transition: transform var(--sf-t-mittel, 220ms) var(--dl-kurve);
	}

	.snf-dl-leiste-text {
		flex: 1;
		font-size: 14px;
		font-weight: 600;
		line-height: 1.3;
	}

	.snf-dl-leiste .snf-dl-knopf {
		width: auto;
		padding: 12px 16px;
		font-size: 16px;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.snf-dl-blatt,
	.snf-dl-knopf,
	.snf-dl-karte,
	.snf-dl-leiste {
		transition: none;
	}

	.snf-dl-blatt {
		transform: none;
	}
}

@media print {
	.snf-dl-leiste,
	.snf-dl-band,
	.snf-dl-blatt {
		display: none;
	}
}

/* ---------- Checklisten-Übersicht (Seite /wissen/checklisten/) ---------- */

.snf-dlu-kopf h1 {
	max-width: 18em;
}

.snf-dlu-sprung {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.snf-dlu-sprung a {
	padding: 8px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--dl-rand);
	box-shadow: var(--dl-hebung);
	color: var(--dl-schwarz) !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: border-color var(--sf-t-schnell, 160ms), color var(--sf-t-schnell, 160ms);
}

.snf-dlu-sprung a:hover {
	border-color: var(--dl-rot);
	color: var(--dl-rot) !important;
}

.snf-dlu-einleitung {
	padding: clamp(36px, 5vw, 56px) 0 0;
}

.snf-dlu-gruppe {
	padding: clamp(36px, 5vw, 56px) 0 8px;
	scroll-margin-top: 90px;
}

.snf-dlu-gruppe h2 {
	margin: 0 0 6px;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.15;
}

.snf-dlu-hub {
	margin: 0 0 22px;
	font-size: 16px;
}

.snf-dlu-hub a {
	color: var(--dl-rot);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.snf-dlu-raster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 18px;
}

.snf-dlu-karte {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 18px;
	margin: 0;
	padding: 18px;
	border-radius: var(--sf-r-l, 16px);
	background: #fff;
	border: 1px solid var(--dl-rand);
	box-shadow: var(--dl-kante), var(--dl-hebung);
	transition: transform var(--sf-t-mittel, 220ms) var(--dl-kurve), box-shadow var(--sf-t-mittel, 220ms) var(--dl-kurve);
}

.snf-dlu-karte::before {
	content: none;
}

.snf-dlu-karte:hover {
	transform: translateY(-3px);
	box-shadow: var(--dl-kante), var(--dl-hebung-hoch);
}

.snf-dlu-bild img {
	display: block;
	width: 96px;
	height: auto;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(17, 17, 17, .1), 0 10px 18px -10px rgba(17, 17, 17, .35), 0 0 0 1px rgba(17, 17, 17, .06);
	transform: rotate(-2deg);
}

.snf-dlu-text {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.snf-dlu-art {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--dl-tanne);
}

.snf-dlu-text h3 {
	margin: 0;
	font-size: 18px;
	line-height: 1.3;
}

.snf-dlu-text h3 a {
	color: var(--dl-schwarz) !important;
	text-decoration: none !important;
}

.snf-dlu-text h3 a:hover {
	color: var(--dl-rot) !important;
}

.snf-dlu-text p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: #3a3a36;
}

.snf-dlu-pdf,
.snf-dlu-pdf:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: var(--dl-rot) !important;
	font-weight: 700;
	font-size: 15px;
	text-decoration: none !important;
}

.snf-dlu-pdf:hover {
	text-decoration: underline !important;
}

.snf-dlu .snf-dl-weiter {
	padding-top: clamp(40px, 6vw, 72px);
}

@media (max-width: 599px) {
	.snf-dlu-raster {
		grid-template-columns: 1fr;
	}

	.snf-dlu-karte {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 14px;
		padding: 16px;
	}

	.snf-dlu-bild img {
		width: 72px;
	}
}

/* Chat 37, 13.10.2026: lange Woerter im Kopf (z. B. Branchenverzeichnisse) am Handy trennen statt ueberstehen. Rueckbau: diesen Block loeschen. */
@media (max-width: 480px) {
	.snf-dl-kopf h1 {
		-webkit-hyphens: auto;
		hyphens: auto;
		overflow-wrap: break-word;
	}
}