/* FeraCare Hilfe: Startseite, Kategorien und Artikel. Farben wie feracare.de. */

@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-normal-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-normal-700.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Regular.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Medium.ttf") format("truetype"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Bold.ttf") format("truetype"); }

:root {
	--hc-kopf: 68px;
	--hc-oben: calc(var(--hc-kopf) + 28px);
	--hc-tinte: #10211e;
	--hc-text: #3b4a46;
	--hc-leise: #6b7a76;
	--hc-akzent: #0f766e;
	--hc-akzent-dunkel: #0b5c56;
	--hc-akzent-hell: #e3f2ee;
	--hc-mint: #eef6f3;
	--hc-sand: #f8f4ee;
	--hc-linie: #e2ebe8;
	--hc-rund: 20px;
	--hc-schatten: 0 1px 2px rgba(16, 33, 30, 0.04), 0 12px 32px rgba(16, 33, 30, 0.07);
	--hc-kopfschrift: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hc-schrift: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
	scroll-padding-top: var(--hc-oben);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #fff;
	color: var(--hc-text);
	font-family: var(--hc-schrift);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--hc-akzent); }
img { max-width: 100%; height: auto; }

.hc-sprung {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 300;
	padding: 10px 16px;
	border-radius: 10px;
	background: var(--hc-akzent);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}
.hc-sprung:focus { top: 12px; }

.hc-innen {
	width: min(1200px, calc(100% - 64px));
	margin: 0 auto;
}

:focus-visible {
	outline: 3px solid rgba(15, 118, 110, 0.45);
	outline-offset: 2px;
}

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

.hc-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--hc-linie);
}

.hc-kopf__innen {
	display: flex;
	align-items: center;
	gap: 28px;
	width: min(1400px, 100%);
	min-height: var(--hc-kopf);
	margin: 0 auto;
	padding: 10px 32px;
}

.hc-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	min-height: 44px;
	text-decoration: none;
}

.hc-logo__marke {
	font: 700 1.3rem/1 var(--hc-kopfschrift);
	letter-spacing: -0.03em;
	color: var(--hc-tinte);
}

.hc-logo__zusatz {
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--hc-akzent-hell);
	font: 700 0.72rem/1 var(--hc-kopfschrift);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hc-akzent);
}

.hc-suche--kopf {
	flex: 1 1 auto;
	max-width: 520px;
}

.hc-kopf__nav {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}

.hc-kopf__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 12px;
	font: 600 0.92rem/1 var(--hc-kopfschrift);
	color: var(--hc-tinte);
	text-decoration: none;
}
.hc-kopf__link:hover { background: var(--hc-mint); }

.hc-knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 20px;
	border-radius: 999px;
	background: var(--hc-akzent);
	font: 700 0.92rem/1 var(--hc-kopfschrift);
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, transform 0.15s ease;
}
.hc-knopf:hover { background: var(--hc-akzent-dunkel); }

.hc-knopf--hell {
	background: #fff;
	color: var(--hc-akzent-dunkel);
}
.hc-knopf--hell:hover { background: var(--hc-mint); }

/* ------------------------------------------------------------ Suche */

.hc-suche {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 46px;
	border: 1px solid var(--hc-linie);
	border-radius: 14px;
	background: #fff;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hc-suche:focus-within {
	border-color: var(--hc-akzent);
	box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.12);
}

.hc-suche > .bi-search {
	position: absolute;
	left: 16px;
	color: var(--hc-leise);
	pointer-events: none;
}

.hc-suche input[type="search"] {
	flex: 1;
	width: 100%;
	min-height: 44px;
	padding: 0 44px;
	border: 0;
	border-radius: 14px;
	background: transparent;
	font: 400 0.98rem/1.2 var(--hc-schrift);
	color: var(--hc-tinte);
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.hc-suche input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.hc-suche input::placeholder { color: var(--hc-leise); opacity: 1; }

.hc-suche kbd {
	position: absolute;
	right: 12px;
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	border: 1px solid var(--hc-linie);
	border-radius: 7px;
	background: var(--hc-mint);
	font: 600 0.75rem/1 var(--hc-schrift);
	color: var(--hc-leise);
}
.hc-suche:focus-within kbd { display: none; }

.hc-suche__treffer {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 120;
	max-height: min(440px, 64vh);
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--hc-linie);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 4px rgba(16, 33, 30, 0.05), 0 24px 56px rgba(16, 33, 30, 0.14);
	text-align: left;
}
.hc-suche__treffer[hidden] { display: none; }

.hc-suche__treffer a {
	display: block;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 10px;
	color: var(--hc-tinte);
	text-decoration: none;
}
.hc-suche__treffer a:hover,
.hc-suche__treffer a.is-wahl { background: var(--hc-akzent-hell); }

.hc-suche__bereich {
	display: block;
	margin-bottom: 2px;
	font: 700 0.68rem/1.2 var(--hc-kopfschrift);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-akzent);
}

.hc-suche__titel {
	display: block;
	font: 700 0.95rem/1.35 var(--hc-kopfschrift);
}

.hc-suche__text {
	display: -webkit-box;
	margin-top: 2px;
	font-size: 0.85rem;
	line-height: 1.45;
	color: var(--hc-leise);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-suche__treffer mark {
	padding: 0 1px;
	border-radius: 3px;
	background: rgba(15, 118, 110, 0.16);
	color: inherit;
}

.hc-suche__leer {
	margin: 0;
	padding: 14px 12px;
	font-size: 0.9rem;
	color: var(--hc-leise);
}
.hc-suche__leer a { font-weight: 600; }

/* ------------------------------------------------------------ Startseite */

.hc-held {
	position: relative;
	padding: 88px 0 72px;
	background:
		radial-gradient(circle at 12% 18%, rgba(15, 118, 110, 0.10), transparent 42%),
		radial-gradient(circle at 88% 0%, rgba(15, 118, 110, 0.08), transparent 38%),
		linear-gradient(180deg, var(--hc-mint) 0%, #fff 100%);
	border-bottom: 1px solid var(--hc-linie);
	text-align: center;
}

.hc-held::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(15, 118, 110, 0.12) 1px, transparent 1px);
	background-size: 22px 22px;
	mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
	pointer-events: none;
}

.hc-held__innen {
	position: relative;
	width: min(760px, calc(100% - 48px));
	margin: 0 auto;
}

.hc-kicker {
	display: inline-block;
	margin: 0 0 18px;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(15, 118, 110, 0.1);
	font: 700 0.74rem/1 var(--hc-kopfschrift);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-akzent);
}

.hc-held h1 {
	margin: 0 0 16px;
	font: 700 clamp(2rem, 4vw, 3rem)/1.12 var(--hc-kopfschrift);
	letter-spacing: -0.025em;
	color: var(--hc-tinte);
}

.hc-held__lead {
	max-width: 40rem;
	margin: 0 auto 32px;
	font-size: 1.1rem;
	line-height: 1.65;
	color: var(--hc-leise);
}

.hc-suche--gross {
	max-width: 640px;
	min-height: 60px;
	margin: 0 auto;
	border-radius: 18px;
	box-shadow: 0 2px 4px rgba(16, 33, 30, 0.04), 0 16px 40px rgba(16, 33, 30, 0.08);
}
.hc-suche--gross input[type="search"] { min-height: 58px; padding-left: 54px; font-size: 1.05rem; }
.hc-suche--gross > .bi-search { left: 20px; font-size: 1.15rem; color: var(--hc-akzent); }
.hc-suche--gross kbd { right: 16px; }

.hc-held__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 22px;
}

.hc-held__chips > span {
	margin-right: 4px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hc-leise);
}

.hc-chip {
	display: inline-flex;
	align-items: center;
	min-height: 38px;
	padding: 0 14px;
	border: 1px solid var(--hc-linie);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.85);
	font: 600 0.85rem/1 var(--hc-kopfschrift);
	color: var(--hc-tinte);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}
.hc-chip:hover { border-color: var(--hc-akzent); color: var(--hc-akzent); }

.hc-gruppe { padding: 72px 0 8px; }
.hc-gruppe--app { padding-top: 56px; padding-bottom: 72px; }
.hc-gruppe--app .hc-innen { padding-top: 48px; border-top: 1px solid var(--hc-linie); }

.hc-gruppe__kopf { margin-bottom: 28px; }

.hc-gruppe__kopf h2 {
	margin: 0 0 6px;
	font: 700 1.6rem/1.25 var(--hc-kopfschrift);
	letter-spacing: -0.015em;
	color: var(--hc-tinte);
}

.hc-gruppe__kopf p {
	margin: 0;
	color: var(--hc-leise);
}

.hc-raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.hc-kachel {
	display: flex;
	flex-direction: column;
	padding: 26px 26px 18px;
	border: 1px solid var(--hc-linie);
	border-radius: var(--hc-rund);
	background: #fff;
	scroll-margin-top: var(--hc-oben);
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.hc-kachel:hover { border-color: rgba(15, 118, 110, 0.35); box-shadow: var(--hc-schatten); }
.hc-kachel[hidden] { display: none; }

.hc-kachel__kopf {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.hc-kachel__kopf h3 {
	margin: 0;
	font: 700 1.1rem/1.3 var(--hc-kopfschrift);
}
.hc-kachel__kopf h3 a { color: var(--hc-tinte); text-decoration: none; }
.hc-kachel__kopf h3 a:hover { color: var(--hc-akzent); }

.hc-kachel__zahl {
	margin: 2px 0 0;
	font-size: 0.82rem;
	color: var(--hc-leise);
}

.hc-kachel__text {
	margin: 0 0 14px;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--hc-leise);
}

.hc-symbol {
	display: inline-grid;
	flex: 0 0 auto;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--hc-akzent-hell);
	color: var(--hc-akzent);
	font-size: 1.35rem;
}

.hc-symbol--hell { background: rgba(255, 255, 255, 0.16); color: #fff; }
.hc-symbol--gross { width: 60px; height: 60px; border-radius: 18px; font-size: 1.6rem; }

.hc-kachel__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hc-linie);
}

.hc-kachel__liste li { border-bottom: 1px solid var(--hc-linie); }
.hc-kachel__liste li:last-child { border-bottom: 0; }
.hc-kachel__liste li[hidden],
.hc-kachel__liste li.is-mehr { display: none; }
.hc-uebersicht.is-gefiltert .hc-kachel__liste li.is-mehr:not([hidden]) { display: block; }

.hc-kachel__liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 44px;
	padding: 10px 4px;
	font: 600 0.94rem/1.35 var(--hc-schrift);
	color: var(--hc-tinte);
	text-decoration: none;
	transition: color 0.15s ease, padding 0.15s ease;
}

.hc-kachel__liste a i {
	font-size: 0.75rem;
	color: var(--hc-leise);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.hc-kachel__liste a:hover { padding-left: 8px; color: var(--hc-akzent); }
.hc-kachel__liste a:hover i { opacity: 1; color: var(--hc-akzent); }

.hc-kachel__alle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin-top: auto;
	padding-top: 6px;
	font: 700 0.88rem/1 var(--hc-kopfschrift);
	text-decoration: none;
}
.hc-uebersicht.is-gefiltert .hc-kachel__alle { display: none; }

.hc-keiner {
	margin: 24px 0 0;
	padding: 20px 24px;
	border: 1px dashed var(--hc-linie);
	border-radius: 16px;
	text-align: center;
	color: var(--hc-leise);
}
.hc-keiner[hidden] { display: none; }
.hc-keiner a { font-weight: 600; }

.hc-kontakt { padding: 24px 0 96px; }

.hc-kontakt__karte {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 32px 36px;
	border-radius: var(--hc-rund);
	background: linear-gradient(135deg, var(--hc-akzent) 0%, var(--hc-akzent-dunkel) 100%);
	color: #fff;
	box-shadow: 0 18px 44px rgba(15, 118, 110, 0.25);
}

.hc-kontakt__karte > div { flex: 1; }

.hc-kontakt__karte h2 {
	margin: 0 0 4px;
	font: 700 1.3rem/1.3 var(--hc-kopfschrift);
	color: #fff;
}

.hc-kontakt__karte p {
	margin: 0;
	color: rgba(255, 255, 255, 0.86);
}

/* ------------------------------------------------------------ Doku-Raster */

.hc-doku {
	display: grid;
	grid-template-columns: 280px minmax(0, 720px) 224px;
	justify-content: center;
	gap: 56px;
	width: min(1400px, 100%);
	margin: 0 auto;
	padding: 40px 32px 72px;
}

.hc-doku--kategorie { grid-template-columns: 280px minmax(0, 1000px); }

/* Seitenleiste */

.hc-leiste { position: relative; }

.hc-leiste__innen {
	position: sticky;
	top: var(--hc-oben);
	max-height: calc(100vh - var(--hc-oben) - 16px);
	overflow-y: auto;
	padding: 0 8px 24px 0;
	scrollbar-width: thin;
	scrollbar-color: var(--hc-linie) transparent;
}

.hc-leiste__knopf { display: none; }

.hc-leiste__start {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin-bottom: 6px;
	padding: 0 12px;
	border-radius: 12px;
	font: 700 0.92rem/1.2 var(--hc-kopfschrift);
	color: var(--hc-tinte);
	text-decoration: none;
}
.hc-leiste__start i { color: var(--hc-akzent); }
.hc-leiste__start:hover { background: var(--hc-mint); }

.hc-leiste__gruppe {
	margin: 18px 0 6px;
	padding: 0 12px;
	font: 700 0.72rem/1.3 var(--hc-kopfschrift);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-leise);
}

.hc-nav { margin: 0 0 2px; }

.hc-nav summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 12px;
	list-style: none;
	cursor: pointer;
	font: 700 0.9rem/1.25 var(--hc-kopfschrift);
	color: var(--hc-tinte);
	user-select: none;
}
.hc-nav summary::-webkit-details-marker { display: none; }
.hc-nav summary:hover { background: var(--hc-mint); }
.hc-nav summary > span { display: flex; align-items: center; gap: 10px; }
.hc-nav summary > span i { font-size: 1rem; color: var(--hc-akzent); }

.hc-nav summary > i {
	font-size: 0.75rem;
	color: var(--hc-leise);
	transition: transform 0.2s ease;
}
.hc-nav:not([open]) summary > i { transform: rotate(-90deg); }

.hc-nav ul {
	margin: 2px 0 10px;
	padding: 0 0 0 20px;
	list-style: none;
}

.hc-nav li { border-left: 1px solid var(--hc-linie); }

.hc-nav li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin: 1px 0 1px 8px;
	padding: 8px 12px;
	border-radius: 10px;
	font-size: 0.91rem;
	line-height: 1.35;
	color: var(--hc-text);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.hc-nav li a:hover { background: var(--hc-mint); color: var(--hc-tinte); }

.hc-nav li a.is-aktiv {
	background: var(--hc-akzent);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 6px 16px rgba(15, 118, 110, 0.22);
}

/* Artikel: Kopf */

.hc-artikel {
	min-width: 0;
	font-size: 1.02rem;
	line-height: 1.75;
}

.hc-krumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0 0 18px;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--hc-leise);
}
.hc-krumen a { color: var(--hc-leise); font-weight: 500; text-decoration: none; }
.hc-krumen a:hover { color: var(--hc-akzent); }
.hc-krumen i { font-size: 0.68rem; opacity: 0.7; }
.hc-krumen span { color: var(--hc-tinte); font-weight: 600; }

.hc-artikel__titel {
	margin: 0 0 16px;
	font: 700 clamp(1.9rem, 3.2vw, 2.6rem)/1.15 var(--hc-kopfschrift);
	letter-spacing: -0.025em;
	color: var(--hc-tinte);
}

.hc-artikel__lead {
	margin: 0 0 32px;
	padding-bottom: 32px;
	border-bottom: 1px solid var(--hc-linie);
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--hc-leise);
}

/* Artikel: Inhalt */

.hc-inhalt > :first-child { margin-top: 0; }

.hc-inhalt h2,
.hc-weitere h2 {
	margin: 56px 0 18px;
	padding-top: 40px;
	border-top: 1px solid var(--hc-linie);
	font: 700 1.55rem/1.25 var(--hc-kopfschrift);
	letter-spacing: -0.015em;
	color: var(--hc-tinte);
}

.hc-inhalt > h2:first-child { padding-top: 0; border-top: 0; }

.hc-inhalt h3 {
	margin: 32px 0 10px;
	font: 700 1.15rem/1.35 var(--hc-kopfschrift);
	color: var(--hc-tinte);
}

.hc-inhalt p { margin: 0 0 16px; }

.hc-inhalt a {
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: rgba(15, 118, 110, 0.35);
	text-underline-offset: 3px;
}
.hc-inhalt a:hover { text-decoration-color: currentColor; }

.hc-inhalt strong { color: var(--hc-tinte); font-weight: 700; }

.hc-inhalt ul:not([class]),
.hc-inhalt ol:not([class]) {
	margin: 0 0 20px;
	padding-left: 1.3em;
}
.hc-inhalt ul:not([class]) li,
.hc-inhalt ol:not([class]) li { margin: 0 0 8px; padding-left: 4px; }
.hc-inhalt ul:not([class]) li::marker,
.hc-inhalt ol:not([class]) li::marker { color: var(--hc-akzent); font-weight: 700; }

.hc-inhalt code {
	padding: 2px 6px;
	border-radius: 6px;
	background: var(--hc-mint);
	font-size: 0.88em;
	color: var(--hc-tinte);
}

.hc-inhalt blockquote {
	margin: 24px 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--hc-akzent);
	color: var(--hc-leise);
}

.hc-inhalt img {
	display: block;
	margin: 24px 0;
	border: 1px solid var(--hc-linie);
	border-radius: 14px;
}

.fc-doku-pfad {
	padding: 2px 8px;
	border: 1px solid var(--hc-linie);
	border-radius: 8px;
	background: #fff;
	font-size: 0.9em;
	font-weight: 600;
	line-height: 1.6;
	color: var(--hc-tinte);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Baustein: Karten */

.fc-doku-karten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 24px;
}

.fc-doku-karte {
	padding: 22px 22px 20px;
	border: 1px solid var(--hc-linie);
	border-radius: 18px;
	background: #fff;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fc-doku-karte:hover { border-color: rgba(15, 118, 110, 0.3); box-shadow: var(--hc-schatten); }

.fc-doku-karte > i.bi {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 12px;
	background: var(--hc-akzent-hell);
	color: var(--hc-akzent);
	font-size: 1.15rem;
}
.fc-doku-karte:nth-child(4n + 2) > i.bi { background: #e8f0fb; color: #2f5d9a; }
.fc-doku-karte:nth-child(4n + 3) > i.bi { background: #fbf1e3; color: #a1621a; }
.fc-doku-karte:nth-child(4n + 4) > i.bi { background: #f1ecf9; color: #6a4aa3; }

.hc-inhalt .fc-doku-karte h3 { margin: 0 0 6px; font-size: 1.04rem; }
.hc-inhalt .fc-doku-karte p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--hc-leise); }

/* Baustein: Schritte */

.hc-inhalt ol.fc-doku-schritte {
	margin: 8px 0 24px;
	padding: 0;
	list-style: none;
	counter-reset: hc-schritt;
}

.fc-doku-schritte > li {
	position: relative;
	padding: 0 0 22px 56px;
	counter-increment: hc-schritt;
}

.fc-doku-schritte > li::before {
	content: counter(hc-schritt);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--hc-akzent);
	color: #fff;
	font: 700 0.92rem/1 var(--hc-kopfschrift);
	box-shadow: 0 0 0 5px var(--hc-akzent-hell);
}

.fc-doku-schritte > li::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 42px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: var(--hc-linie);
}

.fc-doku-schritte > li:last-child { padding-bottom: 4px; }
.fc-doku-schritte > li:last-child::after { display: none; }

.fc-doku-schritte > li > strong:first-child {
	display: block;
	padding-top: 4px;
	margin-bottom: 4px;
	font: 700 1.02rem/1.4 var(--hc-kopfschrift);
	color: var(--hc-tinte);
}

.hc-inhalt .fc-doku-schritte > li p { margin: 0 0 6px; }
.hc-inhalt .fc-doku-schritte > li p:last-child { margin-bottom: 0; }

/* Baustein: Tipp */

.fc-doku-tipp {
	position: relative;
	margin: 24px 0;
	padding: 18px 20px 18px 56px;
	border: 1px solid rgba(15, 118, 110, 0.22);
	border-radius: 16px;
	background: var(--hc-mint);
}

.fc-doku-tipp::before {
	content: "\f46b";
	position: absolute;
	left: 20px;
	top: 18px;
	font-family: bootstrap-icons;
	font-size: 1.15rem;
	line-height: 1.4;
	color: var(--hc-akzent);
}

.fc-doku-tipp > strong:first-child {
	display: block;
	margin-bottom: 4px;
	font: 700 0.98rem/1.4 var(--hc-kopfschrift);
	color: var(--hc-akzent-dunkel);
}

.hc-inhalt .fc-doku-tipp p { margin: 0 0 8px; font-size: 0.98rem; line-height: 1.65; }
.hc-inhalt .fc-doku-tipp p:last-child { margin-bottom: 0; }

.fc-doku-tipp--hinweis { border-color: rgba(47, 93, 154, 0.22); background: #eef4fc; }
.fc-doku-tipp--hinweis::before { content: "\f431"; color: #2f5d9a; }
.fc-doku-tipp--hinweis > strong:first-child { color: #234a7d; }

.fc-doku-tipp--achtung { border-color: rgba(176, 108, 20, 0.28); background: #fdf5e8; }
.fc-doku-tipp--achtung::before { content: "\f33b"; color: #a1621a; }
.fc-doku-tipp--achtung > strong:first-child { color: #82500f; }

/* Baustein: Reiter */

.fc-doku-reiter { margin: 8px 0 28px; }

.fc-doku-reiter__leiste {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
	padding: 5px;
	border-radius: 14px;
	background: var(--hc-mint);
	overflow-x: auto;
}

.fc-doku-reiter__knopf {
	flex: 1 0 auto;
	min-height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 10px;
	background: transparent;
	font: 700 0.92rem/1 var(--hc-kopfschrift);
	color: var(--hc-text);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}
.fc-doku-reiter__knopf:hover { background: rgba(255, 255, 255, 0.7); color: var(--hc-tinte); }

.fc-doku-reiter__knopf[aria-selected="true"] {
	background: var(--hc-akzent);
	color: #fff;
	box-shadow: 0 6px 16px rgba(15, 118, 110, 0.22);
}

.fc-doku-reiter__blaetter { display: grid; }
.fc-doku-reiter__blaetter > section { grid-area: 1 / 1; }
.fc-doku-reiter__blaetter > section.is-aus { visibility: hidden; pointer-events: none; }

.fc-doku-reiter:not(.is-bereit) > section + section { margin-top: 20px; }
.fc-doku-reiter:not(.is-bereit) > section::before {
	content: attr(data-titel);
	display: block;
	margin-bottom: 8px;
	font: 700 0.95rem/1.3 var(--hc-kopfschrift);
	color: var(--hc-akzent);
}

/* Baustein: Tabellen */

.hc-tabelle {
	margin: 8px 0 24px;
	border: 1px solid var(--hc-linie);
	border-radius: 16px;
	overflow-x: auto;
}

.hc-inhalt table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.95rem;
	line-height: 1.5;
}

.hc-inhalt th {
	padding: 12px 16px;
	background: var(--hc-mint);
	border-bottom: 1px solid var(--hc-linie);
	font: 700 0.85rem/1.3 var(--hc-kopfschrift);
	text-align: left;
	color: var(--hc-tinte);
}

.hc-inhalt td {
	padding: 12px 16px;
	vertical-align: top;
	border-bottom: 1px solid var(--hc-linie);
}

.hc-inhalt tr:last-child td { border-bottom: 0; }
.hc-inhalt td:first-child { font-weight: 600; color: var(--hc-tinte); }

/* Artikel: Fuß */

.hc-weitere ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-weitere a {
	display: block;
	height: 100%;
	padding: 16px 18px;
	border: 1px solid var(--hc-linie);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hc-weitere a:hover { border-color: rgba(15, 118, 110, 0.35); box-shadow: var(--hc-schatten); }

.hc-weitere__bereich {
	display: block;
	margin-bottom: 4px;
	font: 700 0.68rem/1.2 var(--hc-kopfschrift);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-leise);
}

.hc-weitere__titel {
	display: block;
	margin-bottom: 4px;
	font: 700 0.98rem/1.35 var(--hc-kopfschrift);
	color: var(--hc-akzent);
}

.hc-weitere__text {
	display: -webkit-box;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--hc-leise);
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-blaettern {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 48px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--hc-linie);
}

.hc-blatt {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-height: 72px;
	padding: 14px 18px;
	border: 1px solid var(--hc-linie);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.hc-blatt:hover { border-color: var(--hc-akzent); background: var(--hc-mint); }
.hc-blatt span { font-size: 0.8rem; color: var(--hc-leise); }

.hc-blatt strong {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 0.98rem/1.35 var(--hc-kopfschrift);
	color: var(--hc-tinte);
}
.hc-blatt i { color: var(--hc-akzent); }
.hc-blatt--nach { align-items: flex-end; text-align: right; }

.hc-frage {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 0;
	font-size: 0.92rem;
	color: var(--hc-leise);
}
.hc-frage i { color: var(--hc-akzent); }
.hc-frage a { font-weight: 600; }

/* Kategorie */

.hc-kategorie__kopf {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--hc-linie);
}
.hc-kategorie__kopf .hc-artikel__titel { margin-bottom: 6px; }

.hc-kategorie__text { margin: 0; color: var(--hc-leise); }

.hc-kategorie__text span {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--hc-mint);
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--hc-akzent);
}

.hc-liste {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hc-liste a {
	position: relative;
	display: block;
	height: 100%;
	padding: 18px 44px 18px 20px;
	border: 1px solid var(--hc-linie);
	border-radius: 16px;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.hc-liste a:hover { border-color: rgba(15, 118, 110, 0.35); box-shadow: var(--hc-schatten); }

.hc-liste__titel {
	display: block;
	margin-bottom: 4px;
	font: 700 1rem/1.35 var(--hc-kopfschrift);
	color: var(--hc-tinte);
}

.hc-liste__text {
	display: -webkit-box;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--hc-leise);
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.hc-liste a > i {
	position: absolute;
	right: 18px;
	top: 20px;
	color: var(--hc-akzent);
}

/* Inhaltsverzeichnis */

.hc-toc {
	position: sticky;
	top: var(--hc-oben);
	align-self: start;
	max-height: calc(100vh - var(--hc-oben) - 16px);
	overflow-y: auto;
	padding-left: 18px;
	border-left: 1px solid var(--hc-linie);
}
.hc-toc:empty { border-left: 0; }

.hc-toc__titel {
	margin: 0 0 10px;
	font: 700 0.76rem/1.3 var(--hc-kopfschrift);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hc-tinte);
}

.hc-toc ul,
.hc-toc-mobil ul { margin: 0; padding: 0; list-style: none; }

.hc-toc a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var(--hc-leise);
	text-decoration: none;
	transition: color 0.15s ease;
}

.hc-toc a::before {
	content: "";
	position: absolute;
	left: -19px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	border-radius: 2px;
	background: transparent;
	transition: background 0.15s ease;
}

.hc-toc a:hover { color: var(--hc-tinte); }
.hc-toc a.is-aktiv { color: var(--hc-akzent); font-weight: 600; }
.hc-toc a.is-aktiv::before { background: var(--hc-akzent); }

.hc-toc-mobil {
	display: none;
	margin: 0 0 28px;
	border: 1px solid var(--hc-linie);
	border-radius: 14px;
	background: #fff;
}

.hc-toc-mobil summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 48px;
	padding: 0 16px;
	list-style: none;
	cursor: pointer;
	font: 700 0.92rem/1 var(--hc-kopfschrift);
	color: var(--hc-tinte);
}
.hc-toc-mobil summary::-webkit-details-marker { display: none; }
.hc-toc-mobil summary i { transition: transform 0.2s ease; }
.hc-toc-mobil[open] summary i { transform: rotate(180deg); }
.hc-toc-mobil ul { padding: 0 8px 10px; }

.hc-toc-mobil a {
	display: flex;
	align-items: center;
	min-height: 40px;
	padding: 0 10px;
	border-radius: 10px;
	font-size: 0.92rem;
	color: var(--hc-text);
	text-decoration: none;
}
.hc-toc-mobil a:hover { background: var(--hc-mint); }

/* ------------------------------------------------------------ Fuß */

.hc-fuss {
	background: #10211e;
	color: rgba(255, 255, 255, 0.72);
}

.hc-fuss__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 40px;
	width: min(1200px, calc(100% - 64px));
	margin: 0 auto;
	padding: 40px 0;
}

.hc-fuss__marke {
	margin: 0 0 4px;
	font: 700 1.1rem/1.2 var(--hc-kopfschrift);
	color: #fff;
}

.hc-fuss__satz { margin: 0; font-size: 0.9rem; }

.hc-fuss__nav { display: flex; flex-wrap: wrap; gap: 4px 8px; }

.hc-fuss__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}
.hc-fuss__nav a:hover { color: #fff; }

/* ------------------------------------------------------------ Schmal */

@media (max-width: 1240px) {
	.hc-doku {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: 48px;
		max-width: 1100px;
	}
	.hc-doku--kategorie { max-width: 1240px; }
	.hc-toc { display: none; }
	.hc-toc-mobil { display: block; }
}

@media (max-width: 1000px) {
	.hc-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.hc-kopf__innen {
		flex-wrap: wrap;
		gap: 10px 16px;
		padding: 10px 20px 12px;
	}
	.hc-suche--kopf { order: 3; flex-basis: 100%; max-width: none; }
	.hc-suche--kopf kbd { display: none; }
	.hc-seite--start .hc-suche--kopf { display: none; }

	.hc-doku,
	.hc-doku--kategorie {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		padding: 16px 20px 48px;
	}

	.hc-leiste {
		position: sticky;
		top: var(--hc-kopf);
		z-index: 30;
		margin: -16px -20px 24px;
		padding: 10px 20px;
		background: rgba(255, 255, 255, 0.96);
		backdrop-filter: blur(12px);
		-webkit-backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--hc-linie);
	}

	.hc-leiste__knopf {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		min-height: 46px;
		padding: 0 16px;
		border: 1px solid var(--hc-linie);
		border-radius: 14px;
		background: #fff;
		font: 700 0.95rem/1 var(--hc-kopfschrift);
		color: var(--hc-tinte);
		cursor: pointer;
	}
	.hc-leiste__knopf .bi-list { font-size: 1.2rem; color: var(--hc-akzent); }
	.hc-leiste__knopf span { flex: 1; text-align: left; }
	.hc-leiste__knopf .bi-chevron-down { transition: transform 0.2s ease; }
	.hc-leiste.is-offen .hc-leiste__knopf .bi-chevron-down { transform: rotate(180deg); }

	.hc-leiste__innen {
		position: static;
		display: none;
		max-height: calc(100vh - var(--hc-kopf) - 120px);
		margin-top: 10px;
		padding: 4px 8px 12px 0;
	}
	.hc-leiste.is-offen .hc-leiste__innen { display: block; }

	.fc-doku-karten,
	.hc-weitere ul,
	.hc-liste { grid-template-columns: 1fr; }

	.hc-inhalt h2,
	.hc-weitere h2 { margin-top: 40px; padding-top: 32px; font-size: 1.35rem; }

	.hc-kontakt__karte { flex-direction: column; align-items: flex-start; padding: 28px; }
}

@media (max-width: 680px) {
	.hc-innen { width: calc(100% - 40px); }
	.hc-raster { grid-template-columns: 1fr; gap: 16px; }
	.hc-held { padding: 56px 0 48px; }
	.hc-gruppe { padding-top: 48px; }
	.hc-kopf__link { display: none; }
	.hc-blaettern { grid-template-columns: 1fr; }
	.hc-blatt--nach { align-items: flex-start; text-align: left; }
	.fc-doku-tipp { padding-left: 48px; }
	.fc-doku-tipp::before { left: 16px; }
	.hc-kategorie__kopf { align-items: flex-start; }
	.hc-fuss__innen { width: calc(100% - 40px); }
}

@media print {
	.hc-kopf, .hc-fuss, .hc-leiste, .hc-toc, .hc-toc-mobil, .hc-blaettern, .hc-frage, .hc-sprung { display: none !important; }
	.hc-doku { display: block; padding: 0; }
	.fc-doku-reiter__leiste { display: none; }
	.fc-doku-reiter__blaetter > section.is-aus { visibility: visible; }
}