/* FiBu Produktseite
   Layout: schmale Textspalte + große Bildschirmfotos im Wechsel, Grafit-Grau mit FiBu-Rot als einzigem Akzent.
   Schriften liegen lokal in assets/fonts (kein Abruf bei Google, DSGVO). */

@font-face {
	font-family: 'IBM Plex Sans';
	src: url('fonts/plex-sans-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('fonts/plex-sans-500.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('fonts/plex-sans-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Sans';
	src: url('fonts/plex-sans-700.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}

:root {
	--bg: #f3f5f5;
	--surface: #ffffff;
	--ink: #23262a;
	--muted: #5d646b;
	--line: #d9dfe0;
	--graphite: #2b2f33;
	--on-graphite: #eef1f1;
	--red: #c4161c;
	--red-soft: #fbe9e9;
	--ok: #1d7a46;
	--display: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--body: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	--radius: 10px;
	--wrap: 1160px;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--bg: #17191b;
		--surface: #212427;
		--ink: #e9ecec;
		--muted: #a3abb1;
		--line: #353a3e;
		--graphite: #0f1112;
		--on-graphite: #e9ecec;
		--red: #ec4a4f;
		--red-soft: #3a1d1e;
		--ok: #4fbf80;
		color-scheme: dark;
	}
}
:root[data-theme='dark'] {
	--bg: #17191b;
	--surface: #212427;
	--ink: #e9ecec;
	--muted: #a3abb1;
	--line: #353a3e;
	--graphite: #0f1112;
	--on-graphite: #e9ecec;
	--red: #ec4a4f;
	--red-soft: #3a1d1e;
	--ok: #4fbf80;
	color-scheme: dark;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
	scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: var(--red);
}
a:focus-visible,
button:focus-visible,
summary:focus-visible {
	outline: 3px solid var(--red);
	outline-offset: 3px;
	border-radius: 4px;
}
h1,
h2,
h3 {
	font-family: var(--display);
	line-height: 1.12;
	letter-spacing: -0.015em;
	text-wrap: balance;
	margin: 0;
}
h1 {
	font-size: clamp(2.1rem, 4.2vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -0.025em;
}
h2 {
	font-size: clamp(1.6rem, 2.8vw, 2.2rem);
	font-weight: 600;
	letter-spacing: -0.02em;
}
h3 {
	font-size: 1.2rem;
	font-weight: 600;
}
p {
	margin: 0;
}
.wrap {
	max-width: var(--wrap);
	margin: 0 auto;
	padding-left: max(20px, env(safe-area-inset-left, 0px));
	padding-right: max(20px, env(safe-area-inset-right, 0px));
}
.eyebrow {
	font-family: var(--body);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--red);
}
.lead {
	font-size: 1.25rem;
	color: var(--muted);
	max-width: 58ch;
}
.muted {
	color: var(--muted);
}

/* Kopf */
.top {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--bg) 88%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.top .wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 66px;
}
.logo {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.02em;
}
.logo span {
	color: var(--red);
}
.nav {
	display: flex;
	gap: 22px;
	margin-right: auto;
}
.nav a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
}
.nav a:hover {
	color: var(--red);
}
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	border: 2px solid var(--red);
	background: var(--red);
	color: #fff;
	transition: filter 0.15s ease;
}
.btn:hover {
	filter: brightness(1.08);
}
.btn.ghost {
	background: transparent;
	color: var(--red);
}
.top .btn {
	padding: 9px 16px;
}
@media (max-width: 860px) {
	.nav {
		display: none;
	}
	.top .btn {
		margin-left: auto;
	}
}

/* Einstieg */
.hero {
	padding-block: 64px 40px;
}
.hero .wrap {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 48px;
	align-items: center;
}
.hero-text {
	display: grid;
	gap: 22px;
	min-width: 0;
}
.hero h1 em {
	font-style: normal;
	color: var(--red);
}
.cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.stamp {
	font-size: 0.95rem;
	color: var(--muted);
	border-left: 3px solid var(--red);
	padding: 2px 0 2px 12px;
}
.stamp code {
	font-family: var(--mono);
	font-size: 0.85rem;
	color: var(--ink);
}
@media (max-width: 900px) {
	.hero .wrap {
		grid-template-columns: minmax(0, 1fr);
	}
	.hero {
		padding-block: 36px 24px;
	}
}

/* Bildschirmfoto im Browser-Rahmen */
.shot {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: 0 24px 60px -30px rgb(20 24 28 / 45%);
}
.shot .bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 12px;
	border-bottom: 1px solid var(--line);
	background: color-mix(in srgb, var(--surface) 92%, var(--ink));
}
.shot .bar i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--line);
}
.shot .bar span {
	margin-left: 10px;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.phone {
	margin: 0;
	border: 8px solid var(--graphite);
	border-radius: 30px;
	overflow: hidden;
	background: var(--graphite);
	max-width: 260px;
	box-shadow: 0 24px 50px -28px rgb(20 24 28 / 55%);
}
.phone img {
	border-radius: 22px;
}
figcaption.note {
	font-size: 0.9rem;
	color: var(--muted);
	margin-top: 10px;
}

/* Kleinunternehmer-Leiste */
.ku {
	background: var(--graphite);
	color: var(--on-graphite);
	padding-block: 44px;
}
.ku .wrap {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: 40px;
	align-items: center;
}
.ku h2 {
	font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.ku-facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}
.ku-facts div {
	display: grid;
	gap: 6px;
	align-content: start;
	border-top: 2px solid var(--red);
	padding-top: 14px;
}
.ku-facts b {
	font-family: var(--display);
	font-size: 1.5rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.ku-facts span {
	font-size: 0.98rem;
	opacity: 0.85;
}
@media (max-width: 900px) {
	.ku .wrap,
	.ku-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Funktionsabschnitte */
section.block {
	padding-block: 84px;
}
section.block + section.block {
	border-top: 1px solid var(--line);
}
.section-head {
	display: grid;
	gap: 14px;
	margin-bottom: 44px;
	max-width: 760px;
}
.feature {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: center;
}
.feature + .feature {
	margin-top: 96px;
}
.feature.flip .feature-text {
	order: 2;
}
.feature-text {
	display: grid;
	gap: 16px;
	min-width: 0;
}
.feature-media {
	min-width: 0;
	display: flex;
	gap: 24px;
	align-items: flex-end;
}
.feature-media .shot {
	flex: 1 1 auto;
	min-width: 0;
}
.feature-media .phone {
	flex: 0 0 34%;
}
.checks {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 10px;
}
.checks li {
	position: relative;
	padding-left: 30px;
}
.checks li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 14px;
	height: 8px;
	border-left: 3px solid var(--red);
	border-bottom: 3px solid var(--red);
	transform: rotate(-45deg);
}
@media (max-width: 900px) {
	.feature {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.feature.flip .feature-text {
		order: 0;
	}
	.feature + .feature {
		margin-top: 64px;
	}
	section.block {
		padding-block: 56px;
	}
}
@media (max-width: 520px) {
	.feature-media .phone {
		display: none;
	}
}

/* Weitere Funktionen */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 0;
	border-top: 1px solid var(--line);
	border-left: 1px solid var(--line);
}
.grid article {
	padding: 26px 24px 28px;
	border-right: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	display: grid;
	gap: 8px;
	align-content: start;
	background: var(--surface);
}
.grid article p {
	color: var(--muted);
	font-size: 1rem;
}
.grid .tag {
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--red);
}

/* Sicherheit */
.secure {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
}
.secure dl {
	margin: 0;
	display: grid;
	gap: 22px;
}
.secure dt {
	font-weight: 700;
	font-size: 1.1rem;
}
.secure dd {
	margin: 4px 0 0;
	color: var(--muted);
}
.who {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	display: grid;
	gap: 16px;
	align-content: start;
}
.who table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}
.who th,
.who td {
	text-align: left;
	padding: 9px 6px;
	border-bottom: 1px solid var(--line);
}
.who th {
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.who td:not(:first-child),
.who th:not(:first-child) {
	text-align: center;
	width: 90px;
}
.yes {
	color: var(--ok);
	font-weight: 700;
}
.no {
	color: var(--red);
	font-weight: 700;
}
@media (max-width: 900px) {
	.secure {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Ablauf */
.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	counter-reset: step;
}
.steps li {
	counter-increment: step;
	display: grid;
	gap: 8px;
	align-content: start;
}
.steps li::before {
	content: counter(step);
	font-family: var(--display);
	font-weight: 600;
	font-size: 1rem;
	width: 36px;
	height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--red);
	color: var(--red);
}
.steps p {
	color: var(--muted);
	font-size: 1rem;
}
@media (max-width: 900px) {
	.steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 520px) {
	.steps {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Grenzen */
.limits {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
}
.limits > div {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 26px;
	display: grid;
	gap: 12px;
	align-content: start;
}
.limits ul {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 6px;
}
@media (max-width: 800px) {
	.limits {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Fragen */
.faq {
	display: grid;
	gap: 0;
	max-width: 820px;
	border-top: 1px solid var(--line);
}
.faq details {
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
}
.faq summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.15rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.faq summary::-webkit-details-marker {
	display: none;
}
.faq summary::after {
	content: '+';
	color: var(--red);
	font-size: 1.5rem;
	line-height: 1;
}
.faq details[open] summary::after {
	content: '–';
}
.faq details p {
	margin-top: 10px;
	color: var(--muted);
	max-width: 68ch;
}

/* Abschluss */
.closing {
	background: var(--graphite);
	color: var(--on-graphite);
	padding-block: 72px;
}
.closing .wrap {
	display: grid;
	gap: 20px;
	justify-items: start;
}
.closing p {
	max-width: 58ch;
	opacity: 0.88;
}
.closing .mail {
	font-family: var(--mono);
	font-size: 1rem;
	user-select: all;
}

footer {
	padding-block: 28px;
	font-size: 0.95rem;
	color: var(--muted);
}
footer .wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	align-items: center;
}
footer nav {
	display: flex;
	gap: 20px;
	margin-left: auto;
}
footer a {
	color: var(--muted);
}

/* Rechtstexte */
.legal {
	padding-block: 56px 80px;
}
.legal .wrap {
	max-width: 780px;
	display: grid;
	gap: 18px;
}
.legal h2 {
	font-size: 1.4rem;
	margin-top: 18px;
}
.legal .hint {
	background: var(--red-soft);
	border-left: 3px solid var(--red);
	padding: 12px 16px;
	border-radius: 4px;
	font-size: 1rem;
}
.closing .eyebrow {
	color: color-mix(in srgb, var(--red) 55%, #ffffff);
}

.hero-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	font-size: 0.95rem;
	color: var(--muted);
}
.hero-points li {
	display: flex;
	align-items: center;
	gap: 8px;
}
.hero-points li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
}

/* Ablaufkarte (Serviceverträge, Belegeingang) */
.flow {
	width: 100%;
	max-width: 520px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}
.flow-head {
	padding: 12px 20px;
	font-weight: 600;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.flow ol {
	list-style: none;
	margin: 0;
	padding: 20px;
	display: grid;
	gap: 18px;
	counter-reset: flow;
}
.flow li {
	counter-increment: flow;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: 14px;
	row-gap: 2px;
}
.flow li::before {
	content: counter(flow);
	grid-row: 1 / span 2;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 2px solid var(--red);
	color: var(--red);
	font-family: var(--display);
	font-weight: 600;
	font-size: 0.9rem;
}
.flow li span {
	color: var(--muted);
	font-size: 0.95rem;
}