/* ==========================================================================
   Components — design.md §5
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0.875rem 1.75rem;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: var(--font-size-base);
	line-height: 1;
	text-decoration: none;
	transition: all var(--motion-duration-fast) var(--motion-ease-standard);
	cursor: pointer;
	border: none;
	white-space: nowrap;
}
.btn:active { transform: scale(0.97); transition-duration: var(--motion-duration-instant); }
.btn:focus-visible {
	outline: 2px solid var(--color-mustard);
	outline-offset: 2px;
}

.btn--primary { background: var(--color-ink); color: var(--color-cream); }
.btn--primary:hover {
	background: var(--color-ink);
	color: var(--color-cream);
	box-shadow: 0 0 0 4px var(--color-mustard-soft);
	transform: translateY(-1px);
}

.btn--secondary {
	background: transparent;
	color: var(--color-ink);
	border: 1.5px solid var(--color-ink);
}
.btn--secondary:hover { transform: translateY(-1px); background: rgba(20,33,61,0.04); }

/* Inverted variant — when a .btn--secondary lives inside a dark surface
   (.calculator__result, .vorlage-download-row), the default ink-on-ink
   rendering goes invisible. Force cream-on-transparent + cream border with
   a swap on hover. Affects all 12 vorlage download panels. */
.calculator__result .btn--secondary,
.vorlage-download-row .btn--secondary {
	color: var(--color-cream);
	border-color: var(--color-cream);
}
.calculator__result .btn--secondary:hover,
.vorlage-download-row .btn--secondary:hover {
	background: var(--color-cream);
	color: var(--color-ink);
	border-color: var(--color-cream);
}

.btn--ghost {
	background: var(--color-white);
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
}
.btn--ghost:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }

/* Calculator-internal buttons — rectangular per design.md §5.1 */
.btn--calc {
	border-radius: var(--radius-lg);
	padding: 0.75rem 1.25rem;
}

.btn--icon {
	width: 44px; height: 44px;
	padding: 0;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	color: var(--color-ink);
	box-shadow: var(--shadow-sm);
}

/* ---------- Card ----------
   Footer-rail rule (Pick3-Lessons §3): every card uses flex column + height:100% so
   it fills its grid cell. The terminal element (.card__cta or .card__footer) gets
   margin-top:auto + a hairline border, so prices/CTAs/badges align horizontally
   across a row regardless of variable title/excerpt length above them. */
.card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	box-shadow: var(--shadow-md);
	border: 1px solid transparent;
	transition: all var(--motion-duration-fast) var(--motion-ease-standard);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	color: var(--color-ink);
	text-decoration: none;
}
.card:hover {
	box-shadow: var(--shadow-lg);
	transform: translateY(-2px);
	border-color: var(--color-border);
}
.card:focus-visible {
	outline: 2px solid var(--color-mustard);
	outline-offset: 2px;
}

.card--tool { padding: var(--space-8); }
.card__icon {
	width: 56px; height: 56px;
	border-radius: 16px;
	background: var(--color-mustard-soft);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-ink);
}
.card__icon svg { width: 28px; height: 28px; }
.card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(1.125rem, 1.6vw + 0.5rem, 1.5rem); /* 18px → 24px fluid */
	letter-spacing: -0.02em;
	line-height: var(--line-height-tight);
	color: var(--color-ink);
	min-width: 0;
	flex: 1;
	overflow-wrap: break-word;       /* NOT `anywhere` — would break mid-syllable */
	word-break: normal;
	hyphens: manual;                  /* uses ­ entities from fwh_soft_hyphenate() */
	-webkit-hyphens: manual;
}
.card__lead {
	font-size: var(--font-size-base);
	color: var(--color-ink-soft);
	line-height: var(--line-height-normal);
	flex: 1 1 auto;                   /* pushes the footer/CTA to the bottom */
}
.card__body {
	flex: 1 1 auto;
}
.card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-3);
	margin-top: auto;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-divider);
}
.card__cta {
	margin-top: auto;
	font-weight: 600;
	font-size: var(--font-size-sm);
	color: var(--color-ink);
	display: inline-flex;
	gap: var(--space-2);
	align-items: center;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-divider);
}

/* Card variants */
.card--related { padding: var(--space-6); }
.card--ghost {
	background: var(--color-cream-soft);
	box-shadow: none;
	border: 1px solid var(--color-border);
}

/* Featured / inverted card — used for "highlighted" calculator or popular tool.
   Pick3-Lessons §4: inversion must extend to embedded chips and the footer-rail
   border, not just text colors. */
.card--featured {
	background: var(--color-ink);
	color: var(--color-cream);
}
.card--featured .card__title,
.card--featured .card__lead,
.card--featured .card__cta { color: var(--color-cream); }
.card--featured .card__icon {
	background: rgba(232,199,102,0.20);
	color: var(--color-mustard);
}
.card--featured .chip--verified {
	background: var(--color-cream);
	color: var(--color-ink);
	border-color: var(--color-cream);
}
.card--featured .card__cta,
.card--featured .card__footer {
	border-top-color: rgba(242,228,211,0.18);
}

/* ---------- Form inputs ---------- */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}
.field__label {
	font-weight: 500;
	font-size: var(--font-size-sm);
	color: var(--color-ink);
}
.field__hint {
	font-size: var(--font-size-xs);
	color: var(--color-ink-soft);
}
.field__error {
	font-size: var(--font-size-xs);
	color: var(--color-error);
	display: none;
}
.field.has-error .field__error { display: block; }
.field.has-error .input { border-color: var(--color-error); }
/* Radio-group <fieldset class="field"> reuses the .field flex layout — strip the
   UA fieldset/legend chrome so it renders identically to a div.field. */
fieldset.field { border: 0; min-inline-size: 0; padding: 0; margin-inline: 0; }
fieldset.field > legend.field__label { padding: 0; float: none; }

.input, .select, .textarea {
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 0.75rem 1rem;
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-ink);
	width: 100%;
	transition: border-color var(--motion-duration-fast),
	            box-shadow var(--motion-duration-fast);
	min-height: 44px;
}
.input:focus, .select:focus, .textarea:focus {
	outline: none;
	border-color: var(--color-ink);
	box-shadow: 0 0 0 3px var(--color-mustard-soft);
}

.textarea { min-height: 120px; resize: vertical; }

/* Number-with-suffix wrapper */
.input-wrap {
	position: relative;
}
.input-wrap .input { padding-right: 2.5rem; }
.input-wrap__suffix {
	position: absolute;
	right: 0.75rem; top: 50%;
	transform: translateY(-50%);
	color: var(--color-ink-soft);
	font-size: var(--font-size-sm);
	pointer-events: none;
}

.input[type="range"] {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	min-height: 24px;
	box-shadow: none;
}
.input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	background: var(--color-border);
	border-radius: 999px;
}
.input[type="range"]::-moz-range-track {
	height: 4px;
	background: var(--color-border);
	border-radius: 999px;
}
.input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px; height: 22px;
	background: var(--color-ink);
	border-radius: 999px;
	margin-top: -9px;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(20,33,61,0.2);
}
.input[type="range"]::-moz-range-thumb {
	width: 22px; height: 22px;
	background: var(--color-ink);
	border-radius: 999px;
	border: 0;
	cursor: pointer;
}

/* Radio + checkbox group */
.option-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.option-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-pill);
	border: 1.5px solid var(--color-border);
	background: var(--color-white);
	cursor: pointer;
	font-size: var(--font-size-sm);
	transition: border-color var(--motion-duration-fast), background var(--motion-duration-fast);
	/* WCAG 2.5.5 / iOS HIG: minimum 44 × 44 px touch target */
	min-height: 44px;
}
.option-chip input { position: absolute; opacity: 0; pointer-events: none; }
.option-chip:has(input:checked) {
	border-color: var(--color-ink);
	background: var(--color-ink);
	color: var(--color-cream);
}
.option-chip:focus-within {
	outline: 2px solid var(--color-mustard);
	outline-offset: 2px;
}

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-cream);
	border-bottom: 1px solid transparent;
	transition: border-color var(--motion-duration-fast), box-shadow var(--motion-duration-fast);
}
.site-header.is-scrolled {
	box-shadow: var(--shadow-sm);
	border-color: var(--color-divider);
}
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 56px;
	max-width: var(--max-width-full);
	margin-inline: auto;
	padding-inline: var(--space-4);
}
@media (min-width: 768px) {
	.site-header__inner { height: 72px; padding-inline: var(--space-6); }
}

.site-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--font-size-lg);
	letter-spacing: -0.02em;
	color: var(--color-ink);
	text-decoration: none;
}
.site-logo__dot {
	width: 18px; height: 18px;
	background: var(--color-mustard);
	border-radius: 4px;
}

.primary-nav { display: none; }
@media (min-width: 1024px) {
	.primary-nav { display: block; }
}
.primary-nav__list {
	list-style: none;
	display: flex;
	gap: var(--space-6);
	margin: 0;
	padding: 0;
}
.primary-nav__link {
	font-weight: 500;
	font-size: var(--font-size-base);
	color: var(--color-ink);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1.5px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--motion-duration-fast) var(--motion-ease-standard);
	padding-block: var(--space-2);
}
.primary-nav__link:hover { background-size: 100% 1.5px; color: var(--color-mustard); }

.site-header__cta { display: none; }
@media (min-width: 768px) { .site-header__cta { display: inline-flex; } }

/* Mobile drawer */
.nav-toggle {
	display: inline-flex;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--color-ink);
	padding: 0;
	align-items: center;
	justify-content: center;
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }
.nav-toggle svg { width: 28px; height: 28px; }

.drawer {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(80vw, 360px);
	background: var(--color-cream-soft);
	z-index: 200;
	padding: var(--space-8);
	transform: translateX(100%);
	transition: transform var(--motion-duration-slow) var(--motion-ease-entrance);
	overflow-y: auto;
}
.drawer.is-open { transform: translateX(0); }
.drawer__close {
	position: absolute;
	top: var(--space-4); right: var(--space-4);
	background: transparent; border: 0;
	width: 44px; height: 44px;
	cursor: pointer; color: var(--color-ink);
}
.drawer__list {
	list-style: none;
	margin-top: var(--space-12);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.drawer__list a {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--font-size-2xl);
	color: var(--color-ink);
	text-decoration: none;
}

.drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(20,33,61,0.4);
	z-index: 150;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-duration-base) var(--motion-ease-standard);
}
.drawer-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------- Footer ---------- */
.site-footer {
	background: var(--color-ink);
	color: var(--color-cream);
	padding-block: var(--space-16);
	margin-top: var(--space-24);
}
.site-footer a { color: var(--color-cream); text-decoration: none; }
/* The site-logo brand block has a hard-coded `color: var(--color-ink)` for
   the header (ink-on-cream). When the same block is reused inside the dark
   footer, the brand name becomes invisible — explicitly invert it. */
.site-footer .site-logo,
.site-footer .site-logo__text { color: var(--color-cream); }
/* Specificity gotcha (Pick3-Lessons §5): base.css has
   `a:not(.btn):not(.btn *):hover` at specificity (0,3,2). A naive
   `.site-footer a:hover` is only (0,2,1) and LOSES — link stays ink-on-ink
   (invisible) on the dark footer. Match the :not() chain to reach (0,4,2). */
.site-footer a:not(.btn):not(.btn *):hover,
.site-footer a:not(.btn):not(.btn *):focus-visible {
	color: var(--color-white);
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Same chain mandatory on every other dark surface. */
.card--featured a:not(.btn):not(.btn *):hover,
.card--featured a:not(.btn):not(.btn *):focus-visible { color: var(--color-white); }
.inverted-cta a:not(.btn):not(.btn *):hover,
.inverted-cta a:not(.btn):not(.btn *):focus-visible { color: var(--color-white); }
.site-footer__grid {
	display: grid;
	gap: var(--space-8);
	grid-template-columns: 1fr;
}
@media (min-width: 768px) {
	.site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}
.site-footer__pitch p { color: rgba(242,228,211,0.85); }
.site-footer__heading {
	font-family: var(--font-display);
	font-size: var(--font-size-lg);
	color: var(--color-cream);
	margin-bottom: var(--space-3);
}
.site-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
.site-footer__bottom {
	border-top: 1px solid rgba(242,228,211,0.15);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	color: rgba(242,228,211,0.7);
	font-size: var(--font-size-sm);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	text-align: center;
}
.site-footer__bottom span {
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	max-width: 100%;
	display: block;
}
@media (min-width: 768px) {
	.site-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	overflow: hidden;
	background: var(--color-cream);
	/* space-12 (3rem) on mobile brings primary CTA into the 640px viewport fold */
	padding-block: var(--space-12);
}
@media (min-width: 1024px) { .hero { padding-block: var(--space-24); } }

.hero__inner {
	position: relative;
	max-width: var(--max-width-wide);
	margin-inline: auto;
	padding-inline: var(--space-4);
	text-align: center;
}
@media (min-width: 1024px) {
	.hero__inner {
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		gap: var(--space-8);
		align-items: center;
		text-align: left;
		padding-inline: var(--space-8);
	}
}
.hero__copy { display: contents; }
@media (min-width: 1024px) { .hero__copy { display: block; grid-column: 2; text-align: center; } }

.hero__title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.05;
	font-size: var(--hero-display-size);   /* fluid clamp() — see tokens.css */
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: manual;
	margin-bottom: var(--space-6);
}
.hero__title em {
	font-style: italic;
	font-weight: 400;
	color: var(--color-ink-soft);
	display: block;
}
/* Title-split helper classes (Pick3-Lessons §1b/d): the hero H1 wraps the main
   title and any "(parenthetical)" suffix in two spans so the sub renders smaller
   and muted. Both spans are children of the same H1 so screen readers read the
   full title intact. */
.hero__title-main { display: block; }
.hero__title-sub {
	display: block;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: var(--hero-sub-size);
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--color-ink-soft);
	margin-top: var(--space-2);
}

.hero__subtitle {
	font-size: var(--font-size-lg);
	color: var(--color-ink-soft);
	margin-bottom: var(--space-8);
	max-width: 32rem;
	margin-inline: auto;
}

.hero__cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	align-items: center;
	margin-top: var(--space-6);
}

.hero__illustration {
	margin-block: var(--space-6);
	display: none;
}
@media (min-width: 1024px) {
	.hero__illustration { display: block; max-width: 320px; }
	.hero__illustration--left { grid-column: 1; }
	.hero__illustration--right { grid-column: 3; }
}

.hero__texture {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 30%, rgba(232,199,102,0.12) 0%, transparent 35%),
	                  radial-gradient(circle at 80% 70%, rgba(20,33,61,0.06) 0%, transparent 40%);
	pointer-events: none;
	z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* Search bar in hero */
.hero-search {
	display: flex;
	background: var(--color-white);
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-md);
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
	max-width: 28rem;
	margin: var(--space-6) auto 0;
	align-items: center;
	gap: var(--space-3);
}
.hero-search input {
	flex: 1;
	border: 0;
	background: transparent;
	font-size: var(--font-size-base);
	min-height: 44px;
	color: var(--color-ink);
}
.hero-search input:focus { outline: none; }
.hero-search button { padding: 0.625rem 1.25rem; font-size: var(--font-size-sm); }

/* ---------- Breadcrumbs ---------- */
.breadcrumb { padding-block: var(--space-4); font-size: var(--font-size-sm); }
.breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0; }
.breadcrumb__item { color: var(--color-ink-soft); }
.breadcrumb__item + .breadcrumb__item::before {
	content: "›";
	margin-right: var(--space-2);
	color: var(--color-ink-soft);
	opacity: 0.5;
}
.breadcrumb__item--current { color: var(--color-ink); font-weight: 500; }

/* ---------- Chips & badges ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 0.25rem 0.75rem;
	background: var(--color-mustard-soft);
	color: var(--color-ink);
	font-size: var(--font-size-xs);
	font-weight: 500;
	border-radius: var(--radius-pill);
	letter-spacing: 0.02em;
}
.chip--stand { background: var(--color-cream-soft); border: 1px solid var(--color-border); }
.chip--success { background: rgba(93,143,108,0.15); color: var(--color-success); }
.chip--warning { background: rgba(212,146,91,0.15); color: var(--color-warning); }
.chip--error   { background: rgba(184,84,80,0.15); color: var(--color-error); }
.chip--ad      { background: var(--color-cream-soft); border: 1px solid var(--color-border); font-size: 0.7rem; }
/* "Anwaltlich/steuerberater geprüft" — only allowed on tools that have actually been
   externally reviewed (legal-filter.php enforces the phrase elsewhere). On dark
   .card--featured the chip inverts via the rule in the Card section. */
.chip--verified {
	background: rgba(93,143,108,0.15);
	color: var(--color-success);
	border: 1px solid rgba(93,143,108,0.30);
	font-weight: 600;
}

/* ---------- Disclaimer ---------- */
.disclaimer {
	background: var(--color-cream-soft);
	border-left: 4px solid var(--color-warning);
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-md);
	margin-block: var(--space-8);
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}
.disclaimer p { color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.disclaimer p:last-child { margin-bottom: 0; }
.disclaimer__rdg {
	margin-top: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
	font-weight: 500;
}
.disclaimer--top {
	margin-block: var(--space-4) var(--space-6);
}
.disclaimer--top p { margin-bottom: 0; }

/* ---------- Sources block (collapsible) ---------- */
.sources-block {
	margin-block: var(--space-8);
	background: var(--color-cream-soft);
	border-radius: var(--radius-md);
	padding: var(--space-4) var(--space-6);
}
.sources-block summary {
	cursor: pointer;
	font-weight: 500;
	color: var(--color-ink);
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.sources-block summary::after {
	content: "+";
	font-size: 1.5rem;
	color: var(--color-ink-soft);
	transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.sources-block[open] summary::after { transform: rotate(45deg); }
.sources-block ul { margin-top: var(--space-4); }
.sources-block a { color: var(--color-ink); }

/* ---------- FAQ block ---------- */
.faq-block { margin-block: var(--space-12); }
.faq-block__heading { margin-bottom: var(--space-6); }
.faq-block__items { display: flex; flex-direction: column; gap: var(--space-3); }

.faq-item {
	background: var(--color-white);
	border-radius: var(--radius-lg);
	padding: var(--space-4) var(--space-6);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
}
.faq-item__q {
	cursor: pointer;
	list-style: none;
	font-weight: 500;
	font-size: var(--font-size-lg);
	color: var(--color-ink);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}
.faq-item__q::after {
	content: "+";
	font-size: 1.5rem;
	font-weight: 300;
	color: var(--color-ink-soft);
	transition: transform var(--motion-duration-base) var(--motion-ease-emphasis);
}
.faq-item[open] .faq-item__q::after { transform: rotate(45deg); }
.faq-item__a { padding-top: var(--space-3); color: var(--color-ink-soft); }

/* ---------- Related-tools list ---------- */
.related-tools { margin-block: var(--space-12); }
.related-tools__heading { margin-bottom: var(--space-6); }
.related-tools__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: var(--space-4);
	grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .related-tools__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Tool grid ---------- */
.tool-grid {
	display: grid;
	gap: var(--space-6);
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Category pills (homepage) ---------- */
.category-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-bottom: var(--space-12);
}
.category-list__item {
	padding: 0.5rem 1.25rem;
	border-radius: var(--radius-pill);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-ink);
	text-decoration: none;
	font-size: var(--font-size-sm);
	font-weight: 500;
	transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.category-list a.category-list__item:hover,
.category-list a.category-list__item.is-active {
	background: var(--color-ink);
	color: var(--color-cream);
	border-color: var(--color-ink);
	text-decoration-color: var(--color-cream);
}

/* ---------- Affiliate-link badge ---------- */
.aff-link__badge {
	color: var(--color-ink-soft);
	font-size: 0.85em;
	font-weight: 400;
	margin-left: 0.25em;
}

/* ---------- Section heading helper ---------- */
.section-heading {
	text-align: center;
	margin-bottom: var(--space-12);
}
.section-heading__eyebrow {
	display: inline-block;
	font-size: var(--font-size-sm);
	font-weight: 500;
	color: var(--color-ink-soft);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: var(--space-3);
}
.section-heading h2 { margin-bottom: var(--space-3); }
.section-heading p { margin-inline: auto; color: var(--color-ink-soft); }

/* ---------- Tables ---------- */
.data-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	margin-block: var(--space-6);
}
.data-table th, .data-table td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-divider);
}
.data-table th { font-weight: 600; background: var(--color-cream-soft); }
.data-table td.num, .data-table th.num { text-align: right; font-family: var(--font-mono); }

/* Responsive table → cards on mobile */
@media (max-width: 639px) {
	.data-table--stack thead { display: none; }
	.data-table--stack tr {
		display: block;
		background: var(--color-white);
		border-radius: var(--radius-lg);
		padding: var(--space-4);
		margin-bottom: var(--space-3);
		box-shadow: var(--shadow-sm);
	}
	.data-table--stack td { display: flex; justify-content: space-between; border: 0; padding: var(--space-2) 0; }
	.data-table--stack td::before { content: attr(data-label); font-weight: 500; color: var(--color-ink-soft); }
}

/* ---------- Cookie banner placeholder (Complianz takes over in production) ---------- */
.cookie-banner {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: var(--color-ink);
	color: var(--color-cream);
	padding: var(--space-4) var(--space-6);
	z-index: 200;
	box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
	display: none;
}
.cookie-banner.is-visible { display: block; }
.cookie-banner__inner {
	max-width: var(--max-width-wide);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
}

/* ==========================================================================
   Card-row responsive grid (Pick3-Lessons §6) — 1 → 2 → 3 → 4 cols
   ========================================================================== */
.card-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	max-width: var(--max-width-wide);
	margin-inline: auto;
	padding-inline: var(--space-6);
}
@media (min-width: 640px)  { .card-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1440px) { .card-row { grid-template-columns: repeat(4, 1fr); } }

/* Related-tools / "Passende Rechner" 3-column grid with explicit breathing room */
.grid--3col {
	max-width: var(--max-width-wide);
	margin-inline: auto;
	padding: 0 var(--space-6) var(--space-16);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}
@media (min-width: 768px) {
	.grid--3col {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-12);
	}
}

/* ==========================================================================
   Site-nav + mega-menu (Pick3-Lessons §7) — categories with icons + descriptions
   ========================================================================== */
.site-nav { display: none; }
@media (min-width: 1024px) {
	.site-nav { display: block; position: relative; }
}
.site-nav__list {
	list-style: none;
	display: flex;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
}
.site-nav__item { position: relative; }
.site-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-4);
	font-weight: 500;
	font-size: var(--font-size-base);
	color: var(--color-ink);
	text-decoration: none;
	border-radius: var(--radius-md);
	transition: background var(--motion-duration-fast) var(--motion-ease-standard);
	cursor: pointer;
	background: transparent;
	border: 0;
}
.site-nav__link:hover,
.site-nav__item.is-open .site-nav__link {
	background: var(--color-cream-soft);
}
.site-nav__chevron {
	width: 14px; height: 14px;
	transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.site-nav__item.is-open .site-nav__chevron { transform: rotate(180deg); }

.mega-panel {
	position: absolute;
	top: calc(100% + var(--space-2));
	left: 0;
	min-width: 640px;
	max-width: 90vw;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	padding: var(--space-6);
	z-index: 110;
	opacity: 0;
	transform: translateY(-8px);
	pointer-events: none;
	transition: opacity var(--motion-duration-base) var(--motion-ease-standard),
	            transform var(--motion-duration-base) var(--motion-ease-standard);
}
.site-nav__item.is-open .mega-panel,
.site-nav__item:hover .mega-panel,
.site-nav__item:focus-within .mega-panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.mega-panel__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-2);
}
.mega-link {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-3);
	border-radius: var(--radius-md);
	color: var(--color-ink);
	text-decoration: none;
	transition: background var(--motion-duration-fast) var(--motion-ease-standard);
}
.mega-link:hover, .mega-link:focus-visible {
	background: var(--color-cream-soft);
}
.mega-link__icon {
	flex-shrink: 0;
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-md);
	background: var(--color-mustard-soft);
	color: var(--color-ink);
}
.mega-link__icon svg { width: 20px; height: 20px; }
.mega-link__body { display: flex; flex-direction: column; gap: 2px; }
.mega-link__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--font-size-base);
	color: var(--color-ink);
	line-height: 1.2;
}
.mega-link__desc {
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	line-height: var(--line-height-normal);
}
.mega-panel__cta {
	margin-top: var(--space-4);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-divider);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-4);
}
.mega-panel__cta .btn { width: auto; }

/* Mobile drawer link variant — title + description rows */
.drawer-link {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--space-3) 0;
	color: var(--color-ink);
	text-decoration: none;
	border-bottom: 1px solid var(--color-divider);
}
.drawer-link__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: var(--font-size-lg);
	color: var(--color-ink);
}
.drawer-link__desc {
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
}

/* 2026-07-11: Gewerbesteuer city directory on the hub page.
   Linked list of the 87 kept city pages — fixes the orphan/internal-link gap
   flagged by the index-health audit. Mobile-first two-column grid. */
.fwh-city-directory {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.4rem;
}
@media (min-width: 640px) {
	.fwh-city-directory { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 960px) {
	.fwh-city-directory { grid-template-columns: 1fr 1fr 1fr; }
}
.fwh-city-directory li {
	padding: 0.25rem 0;
}
.fwh-city-directory li a {
	font-weight: 500;
}
.hebesatz-chip {
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	margin-left: 0.4rem;
}