/* MwSt24 v2 – Startseite: Hero, Banner, Karten-Raster */

/* Hero */
.hero {
	background:
		linear-gradient(100deg, rgba(6, 78, 59, 0.92) 0%, rgba(6, 78, 59, 0.55) 45%, rgba(6, 78, 59, 0.25) 100%),
		url('../img/hero-bg.webp') center 30% / cover no-repeat,
		linear-gradient(120deg, #064e3b 0%, #065f46 45%, #047857 100%);
	padding: 64px 0 72px;
	position: relative;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(255, 255, 255, 0.13) 1.5px, transparent 1.5px);
	background-size: 26px 26px;
	mask-image: radial-gradient(700px 420px at 70% 20%, #000 0%, transparent 75%);
	pointer-events: none;
}
.hero-grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 48px;
	align-items: center;
	position: relative;
	z-index: 1;
}
.hero-copy .kicker {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #064e3b;
	background: #fef3c7;
	border-radius: 999px;
	padding: 7px 16px;
	margin-bottom: 16px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.hero-copy h1 { color: #fff; margin-bottom: 14px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18); }
.hero-copy h1 .hl { color: #fde68a; }
.hero-copy .lead {
	font-size: 1.1rem;
	color: #d1fae5;
	margin-bottom: 26px;
	max-width: 34rem;
	line-height: 1.7;
}
.trust-badges {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
}
.trust-badges li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.88rem;
	font-weight: 700;
	color: #fff;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	padding: 8px 16px;
	backdrop-filter: blur(4px);
}
.trust-badges svg { color: #fde68a; flex-shrink: 0; }

/* Karten-Raster (beliebte Rechner) */
.card-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.tool-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	box-shadow: var(--shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
	color: var(--body);
	position: relative;
	overflow: hidden;
}
.tool-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%, #FFCE00 100%);
	opacity: 0;
	transition: opacity 0.18s ease;
}
.tool-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--card), var(--card)) padding-box,
		linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%, #FFCE00 100%) border-box;
	text-decoration: none;
}
.tool-card:hover::before { opacity: 1; }
.tool-card .tool-icon {
	width: 52px;
	height: 52px;
	border-radius: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 4px;
	box-shadow: var(--shadow-sm);
}
.tool-card:nth-child(4n+1) .tool-icon { background: linear-gradient(135deg, #d1fae5, #a7f3d0); color: #065f46; }
.tool-card:nth-child(4n+2) .tool-icon { background: linear-gradient(135deg, #fef3c7, #fde68a); color: #92400e; }
.tool-card:nth-child(4n+3) .tool-icon { background: linear-gradient(135deg, #dbeafe, #bfdbfe); color: #1e40af; }
.tool-card:nth-child(4n+4) .tool-icon { background: linear-gradient(135deg, #e0e7ff, #c7d2fe); color: #3730a3; }
.tool-card h3 { font-size: 1.02rem; margin: 0; color: var(--navy-900); }
.tool-card p { font-size: 0.89rem; color: var(--muted); margin: 0; flex-grow: 1; line-height: 1.6; }
.tool-card .tool-link {
	font-size: 0.9rem;
	font-weight: 800;
	color: var(--green-700);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.tool-card .tool-link::after { content: "→"; transition: transform 0.15s ease; }
.tool-card:hover .tool-link::after { transform: translateX(4px); }
.section-head-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 6px;
}
.link-more { font-weight: 800; font-size: 0.94rem; white-space: nowrap; }

/* News-Banner (7 % Gastronomie) */
.news-banner {
	background:
		radial-gradient(500px 260px at 90% 0%, rgba(245, 158, 11, 0.25) 0%, rgba(245, 158, 11, 0) 60%),
		linear-gradient(115deg, #0b2545 0%, #12315e 55%, #065f46 130%);
	border-radius: var(--radius-lg);
	color: #fff;
	padding: 40px 44px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 28px;
	align-items: center;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}
.news-banner::before {
	content: "7 %";
	position: absolute;
	right: 28px;
	top: 50%;
	transform: translateY(-50%) rotate(-6deg);
	font-size: 6rem;
	font-weight: 800;
	color: rgba(255, 255, 255, 0.07);
	pointer-events: none;
	letter-spacing: -0.04em;
}
.news-kicker {
	display: inline-block;
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #064e3b;
	background: #fde68a;
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 12px;
}
.news-banner h2 { color: #fff; margin: 0 0 10px; font-size: clamp(1.35rem, 1.05rem + 1.8vw, 1.85rem); }
.news-banner p { color: #d5e0f0; margin-bottom: 20px; max-width: 42rem; }
.news-banner .btn { background: #fff; color: var(--navy-900); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.news-banner .btn:hover { background: var(--green-50); color: var(--navy-900); }

/* Steuersatz-Karten */
.rate-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.rate-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 28px 24px;
	box-shadow: var(--shadow-card);
	position: relative;
	overflow: hidden;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rate-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border: 1px solid transparent;
	background:
		linear-gradient(var(--card), var(--card)) padding-box,
		linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%, #FFCE00 100%) border-box;
}
.rate-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
}
.rate-card--green::before { background: linear-gradient(90deg, var(--green-500), var(--teal-600)); }
.rate-card--amber::before { background: linear-gradient(90deg, #fbbf24, var(--amber-500)); }
.rate-card--blue::before { background: linear-gradient(90deg, #60a5fa, var(--blue-600)); }
.rate-card .rate-value {
	font-size: 2.6rem;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
}
.rate-card--green .rate-value { color: var(--green-700); }
.rate-card--amber .rate-value { color: #b45309; }
.rate-card--blue .rate-value { color: var(--blue-600); }
.rate-card h3 { margin: 12px 0 6px; font-size: 1.06rem; }
.rate-card p { font-size: 0.92rem; color: var(--muted); margin: 0; line-height: 1.65; }
.rate-card .rate-link { display: inline-block; margin-top: 14px; font-size: 0.9rem; font-weight: 800; }

/* Themen-Karten */
.topic-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.topic-card {
	background: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px 20px;
	box-shadow: var(--shadow-card);
	color: var(--body);
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.topic-card:hover { text-decoration: none; border: 1px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, linear-gradient(to bottom, #000 0%, #000 33.33%, #DD0000 33.33%, #DD0000 66.66%, #FFCE00 66.66%, #FFCE00 100%) border-box; transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.topic-card .tool-icon {
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(135deg, #eef2ff, #e0e7ff);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--navy-800);
}
.topic-card h3 { font-size: 1rem; margin: 0; }
.topic-card p { font-size: 0.88rem; color: var(--muted); margin: 0; line-height: 1.6; }

/* Homepage content sections */
.content-narrow { max-width: 800px; margin: 0 auto; }
.content-narrow p { margin-bottom: 16px; line-height: 1.75; color: #334155; }
.content-narrow h3 { margin: 28px 0 12px; font-size: 1.25rem; color: #0f172a; }
.content-narrow a { color: #047857; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.content-narrow a:hover { color: #065f46; }

/* EU comparison table */
.eu-table .hl-de { background: linear-gradient(90deg, #ecfdf5, #d1fae5); }
.eu-table .hl-de td { border-top: 2px solid #059669; border-bottom: 2px solid #059669; }
.table-source { font-size: 0.8rem; color: #94a3b8; margin-top: 10px; }