/* Funktionsseiten (Angebote & Verträge, Rechnungen, Fragebögen, E-Mail, Workflows, Kontakte-Sync, Dienstleister-Netzwerk) */

.fx {
	--fx-ground: #FBF8F3;
	--fx-ink: #14213D;
	--fx-text: #3B4660;
	--fx-muted: #55607A;
	--fx-line: #ECE5DA;
	--fx-line-strong: #E2D9CB;
	--fx-frame: #E6DED2;
	--fx-accent: #F0642A;
	--fx-accent-soft: #FFE9DC;
	--fx-tint: #FFF1E6;
	--fx-tint-line: #F6D5BF;
	--fx-sand: #F3EEE6;
	--fx-link: #1D5191;
	--fx-dark-line: #33415F;
	--fx-dark-text: #D3DAE6;
	--fx-dark-muted: #C3CBDA;
	--fx-dark-label: #AEB8CC;
	--fx-display: 'Nunito Sans', sans-serif;
	--fx-display-weight: 800;

	font-family: 'Nunito Sans', sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: var(--fx-ink);
	background: var(--fx-ground);
}

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

.fx img {
	display: block;
	max-width: 100%;
	height: auto;
}

.fx a {
	color: var(--fx-ink);
}

.fx a:hover {
	color: var(--fx-link);
	font-weight: inherit;
}

.fx p,
.fx ul,
.fx ol,
.fx figure,
.fx blockquote {
	margin: 0;
}

.fx ul,
.fx ol {
	padding: 0;
	list-style: none;
}

.fx-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding-left: 24px;
	padding-right: 24px;
}

/* Typografie */

/* .fx-Präfix, damit die Elementor-Kit-Regeln (.elementor-kit-4 h1–h3) nicht greifen */
.fx h1,
.fx h2,
.fx h3 {
	margin: 0;
	color: inherit;
	font-family: inherit;
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: auto;
}

.fx .fx-h1 {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: clamp(40px, 5.2vw, 64px);
	line-height: 1.04;
	letter-spacing: -0.02em;
}

.fx .fx-h2 {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.fx .fx-h3 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.35;
}

.fx-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.fx-lead {
	font-size: 19px;
	color: var(--fx-text);
	max-width: 540px;
}

.fx-body {
	color: var(--fx-text);
}

.fx-small {
	font-size: 15px;
	color: var(--fx-text);
}

.fx-stack {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Buttons */

.fx-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 16px 26px;
	border-radius: 999px;
	background: var(--fx-ink);
	color: #FFFFFF !important;
	font-weight: 700;
	text-decoration: none;
}

.fx-btn:hover {
	background: var(--fx-link);
}

.fx-btn svg,
.fx-more svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.fx-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	padding-top: 6px;
}

.fx-note {
	font-size: 14px;
	color: var(--fx-muted);
}

.fx-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	font-weight: 700;
	color: var(--fx-link) !important;
}

/* Hero */

.fx-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding-top: 56px;
	padding-bottom: 72px;
}

.fx-hero__text {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.fx-hero__media {
	flex: 1.25 1 520px;
	min-width: 0;
	position: relative;
	padding-bottom: 36px;
}

.fx-col--center {
	display: flex;
	justify-content: center;
}

.fx-hero__media--narrow {
	flex: 1 1 360px;
	display: flex;
	justify-content: center;
	padding-bottom: 0;
}

.fx-crumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 14px;
	color: var(--fx-muted);
}

.fx-crumbs a {
	color: var(--fx-muted);
}

.fx-checks {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-weight: 600;
}

.fx-checks li {
	display: flex;
	align-items: center;
	gap: 12px;
}

.fx-check {
	width: 28px;
	height: 28px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-check svg {
	width: 16px;
	height: 16px;
}

.fx-window {
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 16px;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.35);
}

.fx-window__bar {
	display: flex;
	gap: 6px;
	padding: 12px 14px;
	background: #F7F3EC;
	border-bottom: 1px solid #EFE9DF;
}

.fx-window__bar span {
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: #E3DACC;
}

.fx-window img {
	width: 100%;
}

.fx-toast {
	position: absolute;
	left: -20px;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(20, 33, 61, 0.4);
	line-height: 1.3;
}

.fx-toast__icon {
	width: 36px;
	height: 36px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #E3F5E5;
	color: #1F7A2A;
}

.fx-toast__icon svg {
	width: 18px;
	height: 18px;
}

.fx-toast__title {
	font-size: 15px;
	font-weight: 700;
}

.fx-toast__meta {
	font-size: 13px;
	color: var(--fx-muted);
}

.fx-figure {
	width: 100%;
	max-width: 440px;
	border-radius: 22px;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.45);
}

.fx-figure--plain {
	max-width: 440px;
	border-radius: 0;
	box-shadow: none;
}

/* Prozess-Leiste */

.fx-strip {
	background: #FFFFFF;
	border-top: 1px solid var(--fx-line);
	border-bottom: 1px solid var(--fx-line);
}

.fx-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	padding-top: 28px;
	padding-bottom: 28px;
}

.fx-strip__title {
	flex: 1 1 100%;
	font-family: var(--fx-display);
	font-weight: 700;
	font-size: 18px;
}

.fx-strip__list {
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
}

.fx-strip__list li {
	flex: 1 1 auto;
}

.fx-strip__list .fx-step {
	white-space: nowrap;
}

.fx-step {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid var(--fx-line);
	border-radius: 12px;
	color: var(--fx-text) !important;
	text-decoration: none;
}

.fx-step:hover {
	border-color: var(--fx-ink);
}

.fx-step__num {
	font-size: 12px;
	color: var(--fx-muted);
}

.fx-step--current {
	background: var(--fx-ink);
	border-color: var(--fx-ink);
	color: #FFFFFF !important;
}

.fx-step--related {
	border: 2px solid var(--fx-ink);
	color: var(--fx-ink) !important;
}

.fx-step--current .fx-step__num,
.fx-step--related .fx-step__num {
	color: var(--fx-accent);
}

.fx-strip__link {
	font-size: 14px;
	font-weight: 600;
	color: var(--fx-link) !important;
}

.fx-strip__tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--fx-ink);
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 700;
}

.fx-strip__tag::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--fx-accent);
}

/* Abschnitte */

.fx-section {
	padding-top: 104px;
	padding-bottom: 96px;
}

.fx-section--tail {
	padding-bottom: 40px;
}

.fx-split {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 56px;
}

.fx-split--top {
	align-items: flex-start;
}

.fx-col {
	flex: 1 1 400px;
	min-width: 0;
}

.fx-col--wide {
	flex: 1.25 1 500px;
	min-width: 0;
}

.fx-col--media {
	flex: 0 1 420px;
	min-width: 0;
	margin: 0 auto;
}

.fx-col--phone {
	flex: 0 1 340px;
	min-width: 0;
	margin: 0 auto;
}

.fx-intro {
	max-width: 720px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 48px;
}

.fx-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 16px 40px;
	margin-bottom: 40px;
}

.fx-head .fx-intro {
	margin-bottom: 0;
}

/* Nummerierte Karten */

.fx-cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.fx-card {
	display: flex;
	gap: 22px;
	padding: 26px 28px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 18px;
}

.fx-card > div {
	min-width: 0;
}

.fx .fx-card .fx-h3 {
	margin-bottom: 6px;
}

.fx-card p {
	font-size: 16px;
	color: var(--fx-text);
}

.fx-card__num {
	flex: none;
	width: 40px;
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 28px;
	line-height: 1;
	color: var(--fx-accent);
}

.fx-cards--compact {
	gap: 14px;
}

.fx-cards--compact .fx-card {
	gap: 16px;
	padding: 18px 20px;
	border-radius: 16px;
}

.fx-cards--compact .fx-card__num {
	width: 32px;
	font-size: 22px;
	line-height: 1.2;
}

.fx .fx-cards--compact .fx-h3 {
	font-size: 18px;
	margin-bottom: 4px;
}

.fx-cards--compact p {
	font-size: 15px;
}

.fx-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 600;
}

.fx-chip {
	padding: 4px 10px;
	background: var(--fx-sand);
	border: 1px dashed #D8CDBC;
	border-radius: 8px;
}

.fx-dark .fx-chip {
	background: #22304F;
	border-color: #4A5A7E;
}

/* Kachel-Raster */

.fx-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.fx-grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}

.fx-tile {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 18px;
}

.fx-tile p {
	font-size: 15px;
	color: var(--fx-text);
}

.fx-tile--dark {
	background: var(--fx-ink);
	border-color: var(--fx-ink);
	color: #FFFFFF;
}

.fx-tile--span {
	grid-column: 1 / -1;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.fx-tile--dark p {
	color: var(--fx-dark-muted);
}

.fx-tile--dark a {
	color: #FFFFFF !important;
	font-weight: 700;
}

.fx-icon {
	width: 48px;
	height: 48px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 14px;
	background: var(--fx-tint);
	color: var(--fx-accent);
}

.fx-tile--dark .fx-icon {
	background: #22304F;
}

.fx-icon svg {
	width: 24px;
	height: 24px;
}

.fx-step-label {
	font-size: 13px;
	font-weight: 700;
	color: var(--fx-muted);
}

.fx-tile--dark .fx-step-label {
	color: var(--fx-dark-label);
}

.fx-shotcard {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0;
	border-radius: 22px;
}

.fx-shotcard img {
	width: 100%;
}

.fx-shotcard__body {
	display: flex;
	gap: 14px;
	padding: 0 24px 24px;
}

.fx-shotcard__body .fx-card__num {
	width: auto;
	font-size: 22px;
	line-height: 1.2;
}

.fx-actions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	font-weight: 700;
}

.fx-actions li {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 16px;
}

.fx-actions svg {
	width: 22px;
	height: 22px;
	flex: none;
	color: var(--fx-accent);
}

.fx-actions .fx-actions__more {
	background: var(--fx-sand);
	border-style: dashed;
	border-color: #D8CDBC;
	color: var(--fx-muted);
	font-weight: 600;
}

/* Bilder */

.fx-shot {
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 22px;
	box-shadow: 0 30px 60px -36px rgba(20, 33, 61, 0.35);
}

.fx-shot img {
	width: 100%;
	border-radius: 8px;
}

.fx-shot--tight {
	padding: 10px;
}

.fx-paper {
	overflow: hidden;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 6px;
	box-shadow: 0 40px 70px -35px rgba(20, 33, 61, 0.45);
	transform: rotate(-1.5deg);
}

.fx-paper img {
	width: 100%;
}

.fx-phone {
	padding: 12px;
	background: #0B1428;
	border: 1px solid #2A3756;
	border-radius: 44px;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.fx-phone img {
	width: 100%;
	border-radius: 34px;
}

/* Nachgebaute Vermittlungs-Oberflächen */

.fx-vm,
.fx-pick,
.fx-mail {
	--fx-vm-blue: #1D5191;
	--fx-vm-grey: #F0F0F1;
	line-height: 1.35;
	color: #222A36;
	text-align: left;
}

.fx-vm svg,
.fx-pick svg {
	flex: none;
}

.fx-vm {
	width: 100%;
	max-width: 340px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 18px 16px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 18px;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.35);
	font-size: 14px;
}

.fx-vm__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.fx-vm__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 22px;
	font-weight: 800;
}

.fx-vm__help {
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #C9CDD3;
	color: #FFFFFF;
	font-size: 12px;
}

.fx-vm__add {
	width: 30px;
	height: 30px;
	padding: 5px;
	border-radius: 7px;
	background: var(--fx-vm-blue);
	color: #FFFFFF;
}

.fx-vm__add svg {
	width: 20px;
	height: 20px;
}

.fx-vm__bar {
	display: flex;
	justify-content: center;
	gap: 22px;
	padding: 8px 12px;
	border-radius: 10px;
	background: #D9E8F7;
	color: var(--fx-vm-blue);
	font-weight: 600;
}

.fx-vm__bar span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.fx-vm__bar svg {
	width: 16px;
	height: 16px;
}

.fx-vm__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 12px 12px;
	border-radius: 14px;
	background: var(--fx-vm-grey);
}

.fx-vm__grouphead {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	font-size: 16px;
}

.fx-vm__grouphead svg {
	width: 20px;
	height: 20px;
	color: #8A8F98;
}

.fx-vm__route,
.fx-pick__route {
	display: flex;
	align-items: center;
	gap: 5px;
	color: var(--fx-vm-blue);
	white-space: nowrap;
}

.fx-vm__route svg,
.fx-pick__route svg {
	width: 17px;
	height: 17px;
	margin-right: 2px;
}

.fx-vm__route b,
.fx-pick__route b {
	font-weight: 800;
}

.fx-vm__steps {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 10px;
}

.fx-vm__steps::before {
	content: "";
	position: absolute;
	top: 18px;
	bottom: 18px;
	left: 18px;
	width: 2px;
	background: #FFFFFF;
}

.fx-vm__steps li {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 9px 12px 9px 13px;
	border-radius: 10px;
	background: #FFFFFF;
	font-weight: 700;
}

.fx-vm__steps li > svg {
	width: 16px;
	height: 16px;
	margin-left: auto;
	margin-top: 1px;
}

.fx-vm__steplabel small {
	display: block;
	margin-top: 2px;
	font-style: italic;
	font-weight: 500;
	color: #8A8F98;
}

.fx-vm__dot {
	width: 10px;
	height: 10px;
	flex: none;
	margin-top: 4px;
	border-radius: 999px;
	background: #9AA0A8;
}

.fx-vm__dot--green {
	background: #5CB85C;
	box-shadow: 0 0 6px rgba(92, 184, 92, 0.6);
}

.fx-vm__dot--red {
	background: #E5533D;
	box-shadow: 0 0 6px rgba(229, 83, 61, 0.6);
}

.fx-vm__dot--blue {
	background: var(--fx-vm-blue);
	box-shadow: 0 0 6px rgba(29, 81, 145, 0.6);
}

.fx-pick {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 20px 22px;
	overflow: hidden;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	font-size: 14px;
}

.fx-pick::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 6px;
	background: linear-gradient(90deg, #FDA632, #FF5C5A);
}

.fx-pick__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fx-pick__head svg {
	width: 18px;
	height: 18px;
	color: #A0A4AB;
}

.fx-pick__title {
	font-size: 21px;
	font-weight: 800;
}

.fx-pick__intro {
	font-size: 15px;
}

.fx-pick__search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	background: #E8E9EB;
	color: #8A8F98;
}

.fx-pick__search svg {
	width: 17px;
	height: 17px;
	color: #222A36;
}

.fx-pick__label {
	margin-top: 4px;
	font-size: 15px;
}

.fx-pick__track {
	position: relative;
	height: 6px;
	margin: 0 14px 0 0;
	border-radius: 999px;
	background: var(--fx-vm-blue);
}

.fx-pick__knob {
	position: absolute;
	top: 50%;
	right: -14px;
	width: 28px;
	height: 28px;
	padding: 5px;
	border: 2px solid var(--fx-vm-blue);
	border-radius: 999px;
	background: #FFFFFF;
	color: var(--fx-vm-blue);
	transform: translateY(-50%);
}

.fx-pick__knob svg {
	width: 14px;
	height: 14px;
}

.fx-pick__ticks {
	display: flex;
	justify-content: space-between;
	padding: 14px 0 0 12%;
	font-size: 11px;
	font-weight: 600;
	color: #3B4250;
}

.fx-pick__group {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 14px 14px 16px;
	border-radius: 8px;
	background: var(--fx-vm-grey);
}

.fx-pick__grouphead {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
}

.fx-pick__grouphead svg {
	width: 16px;
	height: 16px;
}

.fx-pick__grouphead small {
	font-size: 12px;
	font-weight: 600;
}

.fx-pick__grouphead span {
	margin-left: auto;
	font-size: 12px;
	color: var(--fx-vm-blue);
}

.fx-pick__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-pick__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fx-pick__list .fx-vm__dot {
	margin-top: 0;
	box-shadow: none;
}

.fx-pick__box {
	width: 18px;
	height: 18px;
	flex: none;
	border: 1px solid #C6CAD1;
	border-radius: 4px;
	background: #FFFFFF;
}

.fx-pick__box.is-on {
	border-color: var(--fx-vm-blue);
	background: var(--fx-vm-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.fx-pick__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 700;
}

.fx-pick__route {
	margin-left: auto;
	font-size: 12px;
	font-weight: 700;
}

.fx-pick__addlink {
	font-size: 13px;
	color: var(--fx-vm-blue);
}

.fx-pick__foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	text-align: center;
}

.fx-pick__btn {
	padding: 10px 26px;
	border-radius: 6px;
	background: var(--fx-vm-blue);
	color: #FFFFFF;
	font-weight: 700;
}

.fx-pick__foot small {
	font-size: 12px;
	color: #6B717C;
}

.fx-mail {
	font-size: 15px;
}

.fx-mail__meta {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 22px 32px 18px;
	border-bottom: 1px solid #EEF0F4;
}

.fx-mail__subject {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 20px;
	line-height: 1.25;
	color: var(--fx-ink);
}

.fx-mail__from {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: var(--fx-text);
}

.fx-mail__from b {
	color: var(--fx-ink);
}

.fx-mail__from small {
	display: block;
	font-size: 12px;
	color: var(--fx-muted);
}

.fx-window .fx-mail__avatar {
	object-fit: cover;
	width: 38px;
	height: 38px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #6B2D5C;
	color: #FFFFFF;
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 700;
}

.fx-mail__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 32px 28px;
	color: var(--fx-text);
}

.fx-mail__body b {
	color: var(--fx-ink);
}

.fx-mail__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 36px;
	margin: 0;
	padding: 14px 18px;
	border-radius: 10px;
	background: #F6F7F9;
}

.fx-mail__facts dt {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.fx-mail__facts dd {
	margin: 0;
	font-weight: 700;
	color: var(--fx-ink);
}

.fx-mail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 2px;
}

.fx-mail__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 7px 14px;
	border-radius: 6px;
	background: #F2F2F2;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	line-height: 1.3;
	color: #4A4F57;
}

.fx-mail__btn--yes {
	background: #6FAE6F;
	color: #FFFFFF;
}

.fx-mail__btn--no {
	background: #E0716C;
	color: #FFFFFF;
}

.fx-mail__sig {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid #EEF0F4;
}

.fx-mail__agency {
	display: flex;
	align-items: center;
	gap: 14px;
}

.fx-window .fx-mail__photo {
	width: 60px;
	height: 60px;
	flex: none;
	object-fit: cover;
	border-radius: 999px;
	box-shadow: 0 0 0 3px #FFFFFF, 0 0 0 4px #E4D3EA;
}

.fx-mail__agency .fx-mail__role {
	color: #6B2D5C;
	font-weight: 700;
}

.fx-mail__agency b {
	display: block;
	font-size: 16px;
}

.fx-mail__agency small {
	display: block;
	font-size: 13px;
	color: var(--fx-muted);
}

@media (max-width: 600px) {
	.fx-mail__meta,
	.fx-mail__body {
		padding-left: 18px;
		padding-right: 18px;
	}

	.fx-pick__route svg,
	.fx-pick__grouphead span {
		display: none;
	}

	.fx-pick__ticks {
		padding-left: 4%;
		font-size: 10px;
		white-space: nowrap;
	}
}

.fx-ov {
	font-size: 13px;
	line-height: 1.35;
	color: #222A36;
	text-align: left;
}

.fx-ov svg {
	flex: none;
}

.fx-ov__app {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
}

.fx-ov__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px 16px;
	border-right: 1px solid #EEF0F4;
}

.fx-ov__apptitle {
	margin-bottom: 4px;
	font-size: 20px;
	font-weight: 800;
}

.fx-ov__field {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 10px;
	border-radius: 6px;
	background: #ECEDEF;
	color: #8A8F98;
}

.fx-ov__field svg {
	width: 15px;
	height: 15px;
}

.fx-ov .fx-ov__field input,
.fx-ov .fx-ov__field select {
	width: 100%;
	min-width: 0;
	padding: 9px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	color: #222A36;
	outline: none;
}

.fx-ov .fx-ov__field input::placeholder {
	color: #8A8F98;
}

.fx-ov__field:focus-within {
	box-shadow: 0 0 0 2px #1D5191;
}

.fx-ov__group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-top: 8px;
}

.fx-ov__label {
	font-size: 14px;
	font-weight: 600;
}

.fx-ov__filters {
	display: flex;
	flex-direction: column;
}

.fx-ov .fx-ov__filters button {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: calc(100% + 32px);
	margin: 0 -16px;
	padding: 5px 16px 5px 44px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	color: #222A36;
	text-align: left;
	white-space: normal;
	cursor: pointer;
	transition: background-color 0.15s;
}

.fx-ov .fx-ov__filters button i {
	margin-left: auto;
	font-style: normal;
	font-size: 15px;
}

.fx-ov .fx-ov__filters button::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 22px;
	width: 5px;
	height: 18px;
	border-radius: 999px;
	background: var(--fx-ov-c, #222A36);
	transform: translateY(-50%);
	opacity: 0;
}

.fx-ov .fx-ov__filters button[aria-pressed="true"] {
	background: var(--fx-ov-bg, transparent);
	color: var(--fx-ov-c, #222A36);
	font-weight: 800;
}

.fx-ov .fx-ov__filters button[aria-pressed="true"]::before {
	opacity: 1;
}

.fx-ov .fx-ov__filters button,
.fx-ov .fx-ov__filters button:hover,
.fx-ov .fx-ov__filters button:active {
	box-shadow: none;
}

.fx-ov .fx-ov__filters button:hover {
	background: #EDEEF0;
}

.fx-ov .fx-ov__filters button:focus,
.fx-ov .fx-ov__greet button:focus {
	outline: none;
	box-shadow: none;
}

.fx-ov .fx-ov__filters button:focus-visible {
	outline: 2px solid #1D5191;
	outline-offset: -2px;
}

.fx-ov__filters .is-blue {
	--fx-ov-c: #2C4F8F;
	--fx-ov-bg: #E9EEF4;
}

.fx-ov__filters .is-orange {
	--fx-ov-c: #F2A541;
	--fx-ov-bg: #FFF4E9;
}

.fx-ov__filters .is-green {
	--fx-ov-c: #67BC57;
	--fx-ov-bg: #EFF8EC;
}

.fx-ov__filters .is-brown {
	--fx-ov-c: #7A574A;
	--fx-ov-bg: #F0EAE7;
}

.fx-ov__filters .is-plain,
.fx-ov__filters .is-black {
	--fx-ov-c: #222A36;
	--fx-ov-bg: transparent;
}

.fx-ov__check {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-weight: 600;
	cursor: pointer;
}

.fx-ov__check input {
	width: 16px;
	height: 16px;
	accent-color: #1D5191;
}

.fx-ov__toggle {
	display: flex;
	align-self: center;
	margin-top: 18px;
	padding: 4px;
	border-radius: 8px;
	background: #ECEDEF;
	color: #8A8F98;
}

.fx-ov__toggle span {
	padding: 6px 14px;
	border-radius: 6px;
}

.fx-ov__toggle .is-on {
	background: #1D5191;
	color: #FFFFFF;
	font-weight: 700;
}

.fx-ov__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
	padding: 22px 26px 26px;
	background: #FAFAFA;
}

.fx-ov__greet {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 19px;
	font-weight: 800;
}

.fx-ov .fx-ov__greet button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #222A36;
	text-decoration: underline;
	cursor: pointer;
}

.fx-ov .fx-ov__greet button,
.fx-ov .fx-ov__greet button:hover,
.fx-ov .fx-ov__greet button:focus,
.fx-ov .fx-ov__greet button:active {
	box-shadow: none;
}

.fx-ov .fx-ov__greet button:hover,
.fx-ov .fx-ov__greet button:focus {
	background: transparent;
	color: #1D5191;
}

.fx-ov [hidden] {
	display: none !important;
}

.fx-ov__none,
.fx-ov__nothing {
	padding: 10px 12px;
	border: 1px dashed #DADDE2;
	border-radius: 8px;
	color: #6B717C;
}

.fx-ov__nothing {
	padding: 28px;
	text-align: center;
	background: #FFFFFF;
}

.fx-ov__bar--blue {
	background: #1D5191;
}

.fx-ov__pill--grey {
	background: #ECEDEF;
	color: #6B717C;
}

.fx-ov__pill--dark {
	background: #DADDE2;
	color: #3B4250;
}

.fx-ov__month {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	background: #EFEFF1;
}

.fx-ov__month b {
	font-size: 17px;
}

.fx-ov__month small {
	color: #6B717C;
}

.fx-ov__event {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.08);
}

.fx-ov__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 2px 6px;
}

.fx-ov__head > svg {
	width: 17px;
	height: 17px;
	margin-left: auto;
	color: #222A36;
}

.fx-ov__bar {
	align-self: stretch;
	width: 4px;
	border-radius: 999px;
}

.fx-ov__bar--green {
	background: #5CB85C;
}

.fx-ov__bar--orange {
	background: #F2A33A;
}

.fx-ov__date {
	display: flex;
	align-items: center;
	gap: 6px;
	padding-right: 14px;
	border-right: 1px solid #EEF0F4;
}

.fx-ov__date b {
	font-size: 26px;
	line-height: 1;
}

.fx-ov__date small {
	font-size: 11px;
	color: #6B717C;
}

.fx-ov__title {
	min-width: 0;
}

.fx-ov__title small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #8A8F98;
}

.fx-ov__title b {
	font-size: 15px;
}

.fx-ov__rows {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.fx-ov__rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 9px 12px;
	border: 1px solid #EEF0F4;
	border-radius: 8px;
}

.fx-ov__who {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

.fx-ov__who b {
	white-space: nowrap;
	font-weight: 600;
}

.fx-ov__slot {
	padding: 1px 7px;
	border: 1px solid #DADDE2;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
	color: #4A4F57;
}

.fx-ov__who small {
	font-size: 11px;
	color: #6B717C;
}

.fx-ov__pills {
	display: flex;
	flex: none;
	gap: 6px;
}

.fx-ov__pill {
	padding: 3px 10px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.fx-ov__pill--green {
	background: #DFF3DF;
	color: #2F7D32;
}

.fx-ov__pill--lightgreen {
	background: #EEF8EE;
	color: #3E9A3E;
}

.fx-ov__pill--orange {
	background: #FFF0DD;
	color: #C26A06;
}

.fx-ov__pill--blue {
	background: #E8EFF8;
	color: #1D5191;
}

.fx-ov__pill--red {
	background: #FDE8E6;
	color: #C0392B;
}

@media (max-width: 800px) {
	.fx-ov__app {
		grid-template-columns: 1fr;
	}

	.fx-ov__side {
		border-right: 0;
		border-bottom: 1px solid #EEF0F4;
	}

	.fx-ov__filters {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 6px;
	}

	.fx-ov .fx-ov__filters button {
		width: auto;
		margin: 0;
		padding: 6px 10px 6px 22px;
		border-radius: 6px;
		background: #F3F4F6;
		font-size: 13px;
	}

	.fx-ov .fx-ov__filters button::before {
		left: 9px;
		height: 14px;
	}

	.fx-ov .fx-ov__filters button i {
		margin-left: 2px;
	}

	.fx-ov__apptitle,
	.fx-ov__toggle {
		display: none;
	}

	.fx-ov__main {
		padding: 16px;
	}

	.fx-ov__rows li {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

}

/* Gutschrift */

.fx-gs {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 26px 26px 22px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	color: #222A36;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.fx-gs__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--fx-ink);
}

.fx-gs__kind {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 26px;
	color: var(--fx-ink);
}

.fx-gs__no {
	font-size: 13px;
	font-weight: 700;
	color: #6B717C;
}

.fx-gs__parties {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fx-gs__parties small,
.fx-gs__tr small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #6B717C;
}

.fx-gs__th,
.fx-gs__tr,
.fx-gs__total {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.fx-gs__th > :last-child,
.fx-gs__tr > :last-child,
.fx-gs__total > :last-child {
	white-space: nowrap;
	text-align: right;
}

.fx-gs__th {
	padding-bottom: 8px;
	border-bottom: 1px solid #EEF0F4;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B717C;
}

.fx-gs__tr {
	padding: 10px 0;
	border-bottom: 1px solid #EEF0F4;
}

.fx-gs__total {
	padding-top: 12px;
	font-size: 16px;
	font-weight: 800;
	color: var(--fx-ink);
}

.fx-gs__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.fx-gs__paid,
.fx-gs__doc {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}

.fx-gs__paid {
	background: #E3F5E5;
	color: #1F7A2A;
}

.fx-gs__doc {
	background: #F3F4F6;
	color: #4A4F57;
}

.fx-gs svg {
	width: 14px;
	height: 14px;
	flex: none;
}

/* Infosheet */

.fx-info {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 24px;
	border: 1px solid var(--fx-frame);
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.35);
	color: #222A36;
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
}

.fx-info svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.fx-info__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.fx-info__head small {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-accent);
}

.fx-info__head b {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 22px;
	color: var(--fx-ink);
}

.fx-info__head span {
	color: #6B717C;
}

.fx-info__slot {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--fx-ink);
	color: #FFFFFF;
}

.fx-info__slot svg {
	width: 22px;
	height: 22px;
	color: #F48A5C;
}

.fx-info__slot small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-dark-label);
}

.fx-info__slot b {
	font-size: 16px;
}

.fx-info__block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-info__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-weight: 800;
}

.fx-info__src {
	padding: 2px 8px;
	border-radius: 999px;
	background: #E8EFF8;
	color: #1D5191;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.fx-info__src--custom {
	background: var(--fx-accent-soft);
	color: #B5481B;
}

.fx-info__plan {
	display: flex;
	flex-direction: column;
	border: 1px solid #EEF0F4;
	border-radius: 8px;
	overflow: hidden;
}

.fx-info__plan li {
	display: flex;
	gap: 14px;
	padding: 6px 12px;
	border-top: 1px solid #EEF0F4;
}

.fx-info__plan li:first-child {
	border-top: 0;
}

.fx-info__plan span {
	width: 44px;
	flex: none;
	font-weight: 700;
	color: #6B717C;
}

.fx-info__plan .is-mine {
	background: #FFF4EE;
	font-weight: 700;
}

.fx-info__plan .is-mine span {
	color: var(--fx-accent);
}

.fx-info__fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 16px;
	margin: 0;
}

.fx-info__fields dt {
	font-size: 12px;
	font-weight: 600;
	color: #6B717C;
}

.fx-info__fields dd {
	margin: 0;
	font-weight: 700;
}

.fx-info__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-top: 14px;
	border-top: 1px solid #EEF0F4;
}

.fx-info__foot span {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 6px;
	background: #F3F4F6;
	font-size: 13px;
	font-weight: 700;
	color: #1D5191;
}

/* Kompakte Agenturansicht im Header */

.fx-ov--compact {
	width: 100%;
	max-width: 440px;
}

.fx-ov--compact .fx-ov__app {
	grid-template-columns: minmax(0, 1fr);
}

.fx-ov--compact .fx-ov__side {
	display: none;
}

.fx-ov--compact .fx-ov__main {
	max-height: 580px;
	overflow-y: auto;
	padding: 18px 16px;
	scrollbar-width: thin;
}

.fx-ov--compact .fx-ov__greet {
	font-size: 17px;
}

.fx-ov--compact .fx-ov__month {
	padding: 10px 14px;
}

.fx-ov--compact .fx-ov__rows li {
	gap: 8px;
}

.fx-ov--compact .fx-ov__who b {
	overflow: hidden;
	text-overflow: ellipsis;
}

.fx-ov--compact .fx-ov__who {
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
}

.fx-ov--compact .fx-ov__slot,
.fx-ov--compact .fx-ov__who small,
.fx-ov--compact .fx-ov__greet button {
	display: none;
}

/* E-Mail-Verlauf eines Events */

.fx-inbox {
	font-size: 13px;
	line-height: 1.35;
	color: #222A36;
	text-align: left;
}

.fx-inbox svg {
	flex: none;
}

.fx-inbox__head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 12px;
	padding: 18px 22px 0;
}

.fx-inbox__head b {
	font-size: 18px;
	font-weight: 800;
}

.fx-inbox__head span {
	color: #6B717C;
}

.fx-inbox__tabs {
	display: flex;
	gap: 18px;
	padding: 12px 22px 0;
	border-bottom: 1px solid #EEF0F4;
	color: #6B717C;
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
}

.fx-inbox__tabs span {
	padding-bottom: 10px;
}

.fx-inbox__tabs .is-on {
	border-bottom: 2px solid #1D5191;
	color: #1D5191;
	font-weight: 800;
}

.fx-inbox__tabs i {
	margin-left: 4px;
	padding: 0 6px;
	border-radius: 999px;
	background: #1D5191;
	color: #FFFFFF;
	font-size: 11px;
	font-style: normal;
}

.fx-inbox__list {
	display: flex;
	flex-direction: column;
	padding: 6px 12px 12px;
}

.fx-inbox__msg {
	display: flex;
	gap: 12px;
	padding: 12px 10px;
	border-bottom: 1px solid #F1F2F4;
}

.fx-inbox__msg:last-child {
	border-bottom: 0;
}

.fx-inbox__msg:first-child {
	border-radius: 8px;
	background: #F4F8FD;
}

.fx-inbox__avatar {
	width: 34px;
	height: 34px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--fx-accent-soft);
	color: #B5481B;
	font-size: 12px;
	font-weight: 800;
}

.fx-inbox__msg--out .fx-inbox__avatar {
	background: #E8EFF8;
	color: #1D5191;
}

.fx-inbox__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.fx-inbox__line {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-inbox__line small {
	margin-left: auto;
	font-size: 12px;
	color: #8A8F98;
	white-space: nowrap;
}

.fx-inbox__new {
	padding: 1px 7px;
	border-radius: 999px;
	background: #1D5191;
	color: #FFFFFF;
	font-size: 10px;
	font-weight: 800;
}

.fx-inbox__subj {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
}

.fx-inbox__subj svg {
	width: 13px;
	height: 13px;
	color: #8A8F98;
}

.fx-inbox__prev {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6B717C;
}

.fx-inbox__toast {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 16px 16px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--fx-ink);
	color: #FFFFFF;
	font-weight: 700;
}

.fx-inbox__toast span {
	width: 22px;
	height: 22px;
	flex: none;
	padding: 4px;
	border-radius: 999px;
	background: #30A46C;
}

.fx-inbox__toast svg {
	width: 14px;
	height: 14px;
}

/* Eingangsbestätigung */

.fx-ack {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px 48px;
	margin-top: 24px;
	padding: 32px;
	border: 1px solid var(--fx-tint-line);
	border-radius: 18px;
	background: var(--fx-tint);
}

.fx-ack__text {
	flex: 1 1 360px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fx-ack__text .fx-h3 {
	font-size: 24px;
	line-height: 1.25;
}

.fx-ack__text p {
	font-size: 16px;
	color: var(--fx-text);
}

.fx-ack__mail {
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 24px 50px -28px rgba(20, 33, 61, 0.4);
	font-size: 14px;
	line-height: 1.5;
	color: var(--fx-text);
}

.fx-ack__mail b {
	color: var(--fx-ink);
}

.fx-ack__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #EEF0F4;
}

.fx-ack__meta svg {
	width: 34px;
	height: 34px;
	flex: none;
	padding: 8px;
	border-radius: 999px;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-ack__meta small {
	display: block;
	font-size: 12px;
	color: var(--fx-muted);
}

@media (max-width: 600px) {
	.fx-ack {
		padding: 20px;
	}
}

/* Kontaktformular-Designs */

.fx-cf {
	--cf-bg: #FFFFFF;
	--cf-text: #14213D;
	--cf-muted: #6B717C;
	--cf-field: #F6F7F9;
	--cf-border: #DDE2EA;
	--cf-accent: #1D5191;
	--cf-btn: #1D5191;
	--cf-btn-text: #FFFFFF;
	--cf-radius: 10px;
	--cf-title: 'Nunito Sans', sans-serif;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	padding: 26px;
	border-radius: 16px;
	background: var(--cf-bg);
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.35);
	color: var(--cf-text);
	font-size: 14px;
	line-height: 1.4;
	text-align: left;
	transition: background-color 0.3s, color 0.3s;
}

.fx-cf svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.fx-cf--night {
	--cf-bg: #0E1A3A;
	--cf-text: #F3F5FA;
	--cf-muted: #A9B4CC;
	--cf-field: #16244A;
	--cf-border: #2A3B66;
	--cf-accent: #7DB8FF;
	--cf-btn: #FFFFFF;
	--cf-btn-text: #0E1A3A;
	--cf-radius: 10px;
}

.fx-cf__logo {
	align-self: center;
	font-size: 17px;
	font-weight: 900;
	letter-spacing: 0.22em;
}

.fx-cf__logo span {
	color: var(--cf-accent);
}

.fx-cf__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	text-align: center;
}

.fx-cf__stats span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	font-size: 11px;
	color: var(--cf-muted);
}

.fx-cf__stats svg {
	width: 18px;
	height: 18px;
	color: var(--cf-accent);
}

.fx-cf__stats b {
	font-size: 17px;
	color: var(--cf-text);
}

.fx-cf__hint {
	font-size: 11px;
	color: var(--cf-muted);
}

.fx-cf__legal {
	font-size: 11px;
	text-align: center;
	color: var(--cf-muted);
}

.fx-cf--nature {
	--cf-bg: #F6EFE6;
	--cf-text: #3E3A33;
	--cf-muted: #857B6E;
	--cf-field: #FFFFFF;
	--cf-border: #E2D6C6;
	--cf-accent: #8B6A4F;
	--cf-btn: #8B6A4F;
	--cf-btn-text: #FFFFFF;
	--cf-radius: 18px;
	--cf-title: Georgia, 'Times New Roman', serif;
}

.fx-cf--elegant {
	--cf-bg: #FFFFFF;
	--cf-text: #1B2238;
	--cf-muted: #6B7080;
	--cf-field: #FFFFFF;
	--cf-border: #D9DCE3;
	--cf-accent: #1B2238;
	--cf-btn: #1B2238;
	--cf-btn-text: #FFFFFF;
	--cf-radius: 2px;
	--cf-title: Georgia, 'Times New Roman', serif;
	border-top: 4px solid #1B2238;
}

.fx-cf__brand {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cf-accent);
}

.fx-cf__title {
	font-family: var(--cf-title);
	font-size: 22px;
	font-weight: 800;
	line-height: 1.2;
}

.fx-cf--night .fx-cf__title {
	text-align: center;
}

.fx-cf--night .fx-cf__intro {
	margin-top: -8px;
	text-align: center;
}

.fx-cf--night .fx-cf__intro b {
	color: var(--cf-text);
}

.fx-cf--nature .fx-cf__title,
.fx-cf--elegant .fx-cf__title {
	font-weight: 400;
}

.fx-cf__intro {
	margin-top: -6px;
	color: var(--cf-muted);
}

.fx-cf__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.fx-cf__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.fx-cf__label {
	font-size: 12px;
	font-weight: 700;
	color: var(--cf-muted);
}

.fx-cf__label i {
	margin-left: 2px;
	font-style: normal;
	color: var(--cf-accent);
}

.fx-cf__input {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 40px;
	padding: 9px 12px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-field);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fx-cf--elegant .fx-cf__input {
	border-width: 0 0 1px;
	padding-left: 0;
	padding-right: 0;
}

.fx-cf__input.is-empty {
	color: var(--cf-muted);
}

.fx-cf__input--area {
	min-height: 70px;
	align-items: flex-start;
	white-space: normal;
}

.fx-cf__chips,
.fx-cf__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fx-cf__chip {
	padding: 6px 12px;
	border: 1px solid var(--cf-border);
	border-radius: 999px;
	font-weight: 700;
	color: var(--cf-muted);
}

.fx-cf__chip.is-on {
	border-color: var(--cf-accent);
	background: var(--cf-accent);
	color: var(--cf-btn-text);
}

.fx-cf__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
}

.fx-cf__card {
	padding: 12px 6px;
	border: 1px solid var(--cf-border);
	border-radius: var(--cf-radius);
	background: var(--cf-field);
	font-weight: 700;
	text-align: center;
}

.fx-cf__card.is-on {
	border: 2px solid var(--cf-accent);
	color: var(--cf-accent);
}

.fx-cf__checks {
	flex-direction: column;
	gap: 8px;
}

.fx-cf__checkbox {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
}

.fx-cf__checkbox::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	border: 1.5px solid var(--cf-border);
	border-radius: 3px;
}

.fx-cf__checkbox.is-on::before {
	border-color: var(--cf-accent);
	background: var(--cf-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.fx-cf__progress {
	display: flex;
	justify-content: center;
	gap: 22px;
}

.fx-cf__dot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: var(--cf-muted);
}

.fx-cf__dot b {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--cf-border);
	border-radius: 999px;
	font-size: 12px;
}

.fx-cf__dot small {
	font-size: 11px;
	font-weight: 700;
}

.fx-cf__dot.is-on b,
.fx-cf__dot.is-done b {
	border-color: var(--cf-accent);
	background: var(--cf-accent);
	color: var(--cf-btn-text);
}

.fx-cf__dot.is-on small {
	color: var(--cf-text);
}

.fx-cf__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: center;
	gap: 8px;
	margin-top: 4px;
	padding: 11px 24px;
	border-radius: var(--cf-radius);
	background: var(--cf-btn);
	color: var(--cf-btn-text);
	font-weight: 800;
}

.fx-cf--elegant .fx-cf__btn {
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 12px;
}

.fx-cf__btn--ghost {
	border: 1px solid var(--cf-border);
	background: transparent;
	color: var(--cf-text);
}

.fx-cf__nav {
	display: flex;
	justify-content: space-between;
}

.fx-cf__nav .fx-cf__btn {
	align-self: auto;
}

.fx-cfdemo {
	position: relative;
	width: 100%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-bottom: 40px;
}

.fx-cfdemo__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fx-muted);
}

.fx-cfdemo .fx-cfdemo__bar button {
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var(--fx-line-strong);
	border-radius: 999px;
	background: #FFFFFF;
	font: inherit;
	color: var(--fx-ink);
	cursor: pointer;
	box-shadow: none;
}

.fx-cfdemo .fx-cfdemo__bar button:hover,
.fx-cfdemo .fx-cfdemo__bar button:focus {
	border-color: var(--fx-ink);
	background: #FFFFFF;
	color: var(--fx-ink);
	outline: none;
	box-shadow: none;
}

.fx-cfdemo .fx-cfdemo__bar button:focus-visible {
	outline: 2px solid var(--fx-link);
	outline-offset: 2px;
}

.fx-cfdemo .fx-cfdemo__bar button[aria-pressed="true"] {
	border-color: var(--fx-ink);
	background: var(--fx-ink);
	color: #FFFFFF;
}

.fx-code {
	color: #222A36;
	text-align: left;
}

.fx-code__tabs {
	display: flex;
	gap: 18px;
	padding: 12px 20px 0;
	border-bottom: 1px solid #EEF0F4;
	font-size: 13px;
	font-weight: 600;
	color: #6B717C;
	white-space: nowrap;
	overflow: hidden;
}

.fx-code__tabs span {
	padding-bottom: 10px;
}

.fx-code__tabs .is-on {
	border-bottom: 2px solid #1D5191;
	color: #1D5191;
	font-weight: 800;
}

.fx .fx-code__pre {
	margin: 16px 20px 0;
	padding: 16px;
	border: 0;
	border-radius: 8px;
	background: #F3F4F6;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	line-height: 1.7;
	color: #3B4250;
	white-space: pre-wrap;
	word-break: break-all;
}

.fx-code__pre .t {
	color: #1D5191;
}

.fx-code__pre .a {
	color: #9A3412;
}

.fx-code__pre .s {
	color: #2F7D32;
}

.fx-code__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	padding: 14px 20px 18px;
	font-size: 13px;
}

.fx-code__foot span {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 12px;
	border-radius: 6px;
	background: #1D5191;
	color: #FFFFFF;
	font-weight: 700;
}

.fx-code__foot svg {
	width: 14px;
	height: 14px;
}

.fx-code__foot small {
	color: #6B717C;
}

.fx-fact h3 svg {
	width: 20px;
	height: 20px;
	margin-right: 8px;
	vertical-align: -4px;
	color: #F48A5C;
}

.fx-mini {
	width: 290px;
	max-width: 100%;
}

.fx-mini__screen {
	overflow: hidden;
	border-radius: 34px;
	background: #FBF6F2;
}

.fx-cf--blush {
	--cf-bg: #FBF6F2;
	--cf-text: #4A3530;
	--cf-muted: #8C746C;
	--cf-field: #FFFFFF;
	--cf-border: #EBDCD3;
	--cf-accent: #B9705C;
	--cf-btn: #B9705C;
	--cf-btn-text: #FFFFFF;
	--cf-radius: 14px;
}

.fx-mini__hero {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 56px 20px 22px;
	min-height: 320px;
	justify-content: flex-end;
	background: linear-gradient(to top, rgba(45, 28, 22, 0.85), rgba(45, 28, 22, 0) 60%), url('/wp-content/uploads/2026/10/mini-webseite-newborn.jpg') center 30% / cover;
	color: #FFFFFF;
	text-align: center;
}

.fx-mini__hero b {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 22px;
	font-weight: 400;
}

.fx-mini__hero span:last-child {
	font-size: 13px;
	opacity: 0.85;
}

.fx-mini__hero .fx-mini__tag {
	margin-top: 8px;
	font-size: 11px;
	opacity: 1;
	align-self: center;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.22);
	font-size: 11px;
	font-weight: 700;
}

.fx-cf--mini {
	padding: 18px 18px 26px;
	border-radius: 0;
	box-shadow: none;
	font-size: 13px;
}

.fx-cf--mini .fx-cf__btn {
	align-self: stretch;
}

@media (max-width: 600px) {
	.fx-cf {
		padding: 20px;
	}

	.fx-cf__grid {
		grid-template-columns: 1fr;
	}
}

/* E-Mail-Vorlage */

.fx-compose {
	width: 100%;
	max-width: 460px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 16px 16px;
	border-radius: 12px;
	background: #FFFFFF;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	color: #222A36;
	font-size: 13.5px;
	line-height: 1.5;
	text-align: left;
}

.fx-compose svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.fx-compose__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -16px;
	padding: 12px 16px;
	border-bottom: 1px solid #EEF0F4;
	border-radius: 12px 12px 0 0;
	background: #F7F8FA;
	font-size: 13px;
}

.fx-compose__top svg {
	color: #8A8F98;
}

.fx-compose__to {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fx-compose__tag {
	padding: 6px 12px;
	border-radius: 6px;
	background: #1D5191;
	color: #FFFFFF;
	font-weight: 800;
}

.fx-compose__rcpt {
	flex: 1;
	min-width: 0;
	padding: 6px 10px;
	border: 1px solid #DDE2EA;
	border-radius: 6px;
	line-height: 1.25;
}

.fx-compose__rcpt small {
	display: block;
	font-size: 11px;
	color: #6B717C;
}

.fx-compose__cc {
	font-size: 12px;
	font-weight: 600;
	color: #1D5191;
	white-space: nowrap;
}

.fx-compose__subject {
	padding: 8px 12px;
	border: 1px solid #DDE2EA;
	border-radius: 6px;
}

.fx-compose__editor {
	border: 1px solid #DDE2EA;
	border-radius: 8px;
}

.fx-compose__tools {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid #EEF0F4;
	color: #4A4F57;
}

.fx-compose__tools b,
.fx-compose__tools i,
.fx-compose__tools u {
	width: 16px;
	text-align: center;
	font-family: Georgia, serif;
}

.fx-compose__sep {
	width: 1px;
	height: 16px;
	background: #DDE2EA;
}

.fx-compose__portal {
	margin-left: auto;
	padding: 3px 8px;
	border: 1px solid #DDE2EA;
	border-radius: 4px;
	font-size: 11.5px;
	white-space: nowrap;
}

.fx-compose__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px 14px 16px;
}

.fx-compose__ph {
	padding: 1px 7px;
	border-radius: 5px;
	background: #FFE9DC;
	box-shadow: inset 0 0 0 1px #F6D5BF;
	color: #9A3412;
	font-weight: 700;
	white-space: nowrap;
}

.fx-compose__link {
	color: #1D5191 !important;
	font-weight: 800;
	text-decoration: none;
}

.fx-compose__foot {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-compose__send {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 6px;
	background: #1D5191;
	color: #FFFFFF;
	font-weight: 800;
}

.fx-compose__icon {
	padding: 7px;
	border-radius: 6px;
	background: #E8EFF8;
	color: #1D5191;
}

.fx-compose__attach {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #6B717C;
	font-weight: 700;
}

.fx-compose__trash {
	margin-left: auto;
	color: #8A8F98;
}

/* Postfach verbinden */

.fx-connect {
	width: 100%;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--fx-frame);
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.35);
	color: #222A36;
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
}

.fx-connect svg {
	width: 16px;
	height: 16px;
	flex: none;
}

.fx-connect__title {
	font-size: 19px;
	font-weight: 800;
}

.fx-connect__intro {
	margin-top: -8px;
	color: #6B717C;
}

.fx-connect__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fx-connect__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #E6E9EF;
	border-radius: 10px;
}

.fx-connect__list li > svg {
	margin-left: auto;
	color: #8A8F98;
}

.fx-connect__list small,
.fx-connect__done small {
	display: block;
	font-size: 12px;
	color: #6B717C;
}

.fx-connect__logo {
	width: 34px;
	height: 34px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #F3F4F6;
	color: #4A4F57;
	font-weight: 900;
	font-size: 17px;
}

.fx-connect__logo--g {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px #E6E9EF;
	color: #4285F4;
}

.fx-connect__logo--ms {
	display: grid;
	grid-template-columns: 9px 9px;
	gap: 2px;
	align-content: center;
	justify-content: center;
}

.fx-connect__logo--ms i {
	width: 9px;
	height: 9px;
	background: #F25022;
}

.fx-connect__logo--ms i:nth-child(2) {
	background: #7FBA00;
}

.fx-connect__logo--ms i:nth-child(3) {
	background: #00A4EF;
}

.fx-connect__logo--ms i:nth-child(4) {
	background: #FFB900;
}

.fx-connect__done {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #EAF7EA;
}

.fx-connect__done > svg {
	margin-left: auto;
	color: #2F7D32;
}

.fx-connect__ok {
	width: 28px;
	height: 28px;
	flex: none;
	padding: 6px;
	border-radius: 999px;
	background: #30A46C;
	color: #FFFFFF;
}

/* Ressourcen-Verwaltung */

.fx-rs,
.fx-rl,
.fx-rd,
.fx-tm {
	color: #222A36;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
}

.fx-rs svg,
.fx-rl svg,
.fx-rd svg,
.fx-stock svg,
.fx-tm svg {
	flex: none;
}

.fx-rs__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	background: #F4F5F7;
}

.fx-rs__head,
.fx-stock__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fx-rs__head small,
.fx-stock__head small {
	display: block;
	font-size: 12px;
	color: #6B717C;
}

.fx-rs__head b,
.fx-stock__head b {
	font-size: 18px;
	font-weight: 800;
}

.fx-rs__add {
	width: 26px;
	height: 26px;
	flex: none;
	padding: 5px;
	border-radius: 6px;
	background: #1D5191;
	color: #FFFFFF;
}

.fx-rs__add svg {
	width: 16px;
	height: 16px;
}

.fx-rs__group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.08);
}

.fx-rs__ghead b {
	display: block;
	font-size: 15px;
}

.fx-rs__ghead small {
	color: #8A8F98;
}

.fx-rs__cols,
.fx-rs__rows li {
	display: grid;
	grid-template-columns: 22px minmax(0, 2.2fr) minmax(0, 1.2fr) 44px 92px;
	align-items: center;
	gap: 10px;
}

.fx-rs__cols {
	padding-bottom: 8px;
	border-bottom: 1px solid #E6E9EF;
	font-weight: 700;
}

.fx-rs__rows li {
	padding: 9px 0;
	border-bottom: 1px solid #F1F2F4;
}

.fx-rs__rows li:last-child {
	border-bottom: 0;
}

.fx-rs__ok {
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	background: #5CB85C;
	color: #FFFFFF;
}

.fx-rs__ok svg {
	width: 12px;
	height: 12px;
}

.fx-rs__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 600;
}

.fx-rs__muted {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6B717C;
}

.fx-rs__qty {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border: 1px solid #DDE2EA;
	border-radius: 6px;
}

.fx-rs__qty i {
	display: flex;
	align-items: center;
	padding: 5px;
	background: #E8E9EB;
	color: #6B717C;
}

.fx-rs__qty i.is-plus {
	background: #1D5191;
	color: #FFFFFF;
}

.fx-rs__qty svg {
	width: 13px;
	height: 13px;
}

.fx-rs__qty b {
	flex: 1;
	display: flex;
	align-items: center;
	padding: 0 8px;
	font-weight: 600;
}

.fx-rl__filter {
	display: flex;
	gap: 6px;
	padding: 14px 18px 4px;
}

.fx-rl .fx-rl__filter button {
	margin: 0;
	padding: 5px 14px;
	border: 1px solid #DDE2EA;
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: none;
	font: inherit;
	font-weight: 700;
	color: #222A36;
	cursor: pointer;
}

.fx-rl .fx-rl__filter button:hover,
.fx-rl .fx-rl__filter button:focus {
	border-color: #1D5191;
	background: #FFFFFF;
	box-shadow: none;
	color: #1D5191;
	outline: none;
}

.fx-rl .fx-rl__filter button:focus-visible {
	outline: 2px solid #1D5191;
	outline-offset: 2px;
}

.fx-rl .fx-rl__filter button[aria-pressed="true"] {
	border-color: #1D5191;
	background: #1D5191;
	color: #FFFFFF;
}

.fx-rl__table {
	padding: 8px 18px 18px;
}

.fx-rl__th,
.fx-rl__tr {
	display: grid;
	grid-template-columns: 70px minmax(0, 1.6fr) minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
}

.fx-rl__th {
	border-bottom: 1px solid #E6E9EF;
	font-weight: 700;
}

.fx-rl__tr:nth-child(odd) {
	background: #F6F7F9;
}

.fx-rl__tr b {
	font-weight: 600;
}

.fx-rl__tr[hidden] {
	display: none;
}

.fx-rl__type {
	justify-self: start;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 800;
}

.fx-rl__type--item {
	background: #E8EFF8;
	color: #1D5191;
}

.fx-rl__type--case {
	background: #FFF0DD;
	color: #C26A06;
}

.fx-rl__type--set {
	background: #DFF3DF;
	color: #2F7D32;
}

.fx-stock {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
	color: #222A36;
	font-size: 13px;
	text-align: left;
}

.fx-stock__kpis {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px;
}

.fx-stock__kpis span {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	border-radius: 8px;
	background: #F4F5F7;
	font-size: 11px;
	color: #6B717C;
}

.fx-stock__kpis b {
	font-size: 20px;
	color: #222A36;
}

.fx-stock__label {
	font-weight: 800;
}

.fx-stock__list li {
	display: grid;
	grid-template-columns: 16px 32px 90px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid #F1F2F4;
}

.fx-stock__list svg {
	width: 16px;
	height: 16px;
	color: #3E9A3E;
}

.fx-stock__list small {
	color: #6B717C;
}

.fx-rd__body {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 14px;
	padding: 18px;
	background: #F4F5F7;
}

.fx-rd__main,
.fx-rd__side {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fx-rd__img {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 150px;
	border-radius: 10px;
	background: linear-gradient(160deg, #FFFFFF, #E9ECF1);
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.08);
	color: #8A8F98;
}

.fx-rd__img svg {
	width: 44px;
	height: 44px;
}

.fx-rd__fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.08);
}

.fx-rd__fields span {
	padding: 6px 10px;
	border: 1px solid #E6E9EF;
	border-radius: 6px;
}

.fx-rd__fields small {
	display: block;
	font-size: 11px;
	color: #6B717C;
}

.fx-rd__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 14px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 1px 4px rgba(20, 33, 61, 0.08);
}

.fx-rd__card b {
	font-size: 14px;
	font-weight: 800;
}

.fx-rd__card span {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #F4F5F7;
	font-weight: 600;
}

.fx-rd__card em {
	font-style: normal;
	color: #1D5191;
	white-space: nowrap;
}

/* Event-Liste mit Ressourcen */

.fx-ov--res .fx-ov__app {
	grid-template-columns: minmax(0, 1fr);
}

.fx-pl {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 6px 2px 28px;
	padding: 10px 14px;
	border: 1px solid #EEF0F4;
	border-radius: 10px;
}

.fx-pl__head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-pl__head > svg {
	width: 14px;
	height: 14px;
	color: #4A4F57;
}

.fx-pl__head b {
	font-size: 14px;
	font-weight: 600;
}

.fx-pl__head small {
	margin-left: auto;
	font-size: 12px;
	color: #8A8F98;
	white-space: nowrap;
}

.fx-pl__list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-left: 22px;
}

.fx-pl__list li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fx-pl__st {
	width: 18px;
	height: 18px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 999px;
	color: #FFFFFF;
}

.fx-pl__st svg {
	width: 10px;
	height: 10px;
}

.fx-pl__st--ok {
	background: #5CB85C;
}

.fx-pl__st--bad {
	background: #E5533D;
}

.fx-pl__list li:has(.fx-pl__st--bad) {
	color: #C0392B;
	font-weight: 700;
}

/* Packliste, Lieferschein, Mobile App */

.fx-dark .fx-more,
.fx-dark a.fx-more {
	color: #FFFFFF !important;
}

.fx-pkls {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 16px;
}

.fx-pkls .fx-app {
	width: 268px;
}

.fx-pkls .fx-ls {
	width: 290px;
}

.fx-ls {
	width: 320px;
	max-width: 100%;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 40px;
	padding: 24px;
	border-radius: 6px;
	background: #FFFFFF;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.45);
	transform: rotate(1.5deg);
	color: #222A36;
	font-size: 12.5px;
	line-height: 1.4;
	text-align: left;
}

.fx-ls__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--fx-ink);
	color: #6B717C;
	font-weight: 700;
}

.fx-ls__kind {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 22px;
	color: var(--fx-ink);
}

.fx-ls__meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.fx-ls__meta small {
	display: block;
	font-size: 11px;
	font-weight: 700;
	color: #6B717C;
}

.fx-ls__meta b,
.fx-ls__meta span {
	display: block;
}

.fx-ls__rows > div {
	display: grid;
	grid-template-columns: 50px 1fr;
	padding: 7px 0;
	border-bottom: 1px solid #EEF0F4;
}

.fx-ls__rows .fx-ls__th {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #6B717C;
}

.fx-ls__rows > div:not(.fx-ls__th) span:first-child {
	font-weight: 800;
}

.fx-ls__sign {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-top: 10px;
}

.fx-ls__line {
	height: 28px;
	border-bottom: 1px solid #8A8F98;
}

.fx-ls__sign small {
	font-size: 11px;
	color: #6B717C;
}

/* Team & Zugänge */

.fx-tm {
	width: 100%;
	max-width: 480px;
}

.fx-tm__body {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px 20px 20px;
}

.fx-tm__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}

.fx-tm__top b {
	font-size: 18px;
	font-weight: 800;
}

.fx-tm__top span {
	font-weight: 700;
	color: #1D5191;
}

.fx-tm__people {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fx-tm__people span {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 6px;
	border: 1px solid #E6E9EF;
	border-radius: 999px;
	font-weight: 700;
}

.fx-tm__people span.is-on {
	border-color: #1D5191;
	color: #1D5191;
}

.fx-tm__people i {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #E8EFF8;
	color: #1D5191;
	font-size: 11px;
	font-style: normal;
	font-weight: 800;
}

.fx-tm__people small {
	font-size: 11px;
	font-weight: 600;
	color: #6B717C;
}

.fx-tm__tabs {
	display: flex;
	gap: 18px;
	border-bottom: 1px solid #E6E9EF;
}

.fx-tm .fx-tm__tabs button {
	margin: 0 0 -1px;
	padding: 6px 0 10px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	font-weight: 600;
	color: #6B717C;
	cursor: pointer;
}

.fx-tm .fx-tm__tabs button:hover,
.fx-tm .fx-tm__tabs button:focus {
	background: transparent;
	box-shadow: none;
	color: #1D5191;
	outline: none;
}

.fx-tm .fx-tm__tabs button:focus-visible {
	outline: 2px solid #1D5191;
	outline-offset: 2px;
}

.fx-tm .fx-tm__tabs button[aria-selected="true"] {
	border-bottom-color: #1D5191;
	color: #1D5191;
	font-weight: 800;
}

.fx-tm__list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #F1F2F4;
}

.fx-tm__list li:last-child {
	border-bottom: 0;
}

.fx-tm__list b {
	display: block;
	font-weight: 800;
}

.fx-tm__list small {
	font-size: 12px;
	color: #6B717C;
}

.fx-tm .fx-tm__switch {
	position: relative;
	width: 40px;
	height: 22px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #DADDE2;
	box-shadow: none;
	cursor: pointer;
	transition: background-color 0.2s;
}

.fx-tm .fx-tm__switch::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #FFFFFF;
	transition: transform 0.2s;
}

.fx-tm .fx-tm__switch:hover,
.fx-tm .fx-tm__switch:focus {
	background: #C9CDD3;
	box-shadow: none;
	outline: none;
}

.fx-tm .fx-tm__switch:focus-visible {
	outline: 2px solid #1D5191;
	outline-offset: 2px;
}

.fx-tm .fx-tm__switch[aria-checked="true"] {
	background: #1D5191;
}

.fx-tm .fx-tm__switch[aria-checked="true"]::after {
	transform: translateX(18px);
}

.fx-tm [hidden] {
	display: none !important;
}

.fx-tm__mail {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.fx-tm__field small {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: #6B717C;
}

.fx-tm__field span {
	display: block;
	padding: 9px 12px;
	border: 1px solid #DDE2EA;
	border-radius: 8px;
}

.fx-tm__sig {
	line-height: 1.5;
}

@media (max-width: 600px) {
	.fx-rs__cols,
	.fx-rs__rows li {
		grid-template-columns: 22px minmax(0, 1fr) 92px;
	}

	.fx-rs__cols span:nth-child(3),
	.fx-rs__cols span:nth-child(4),
	.fx-rs__rows .fx-rs__muted {
		display: none;
	}

	.fx-rd__body {
		grid-template-columns: 1fr;
	}
}

/* Grafik Kontakte-Sync */

.fx-sync {
	position: relative;
	width: 100%;
	max-width: 520px;
	height: 530px;
	line-height: 1.35;
	container-type: inline-size;
}

.fx-sync svg {
	width: 100%;
	height: 100%;
}

.fx-sync__card {
	position: absolute;
	top: 70px;
	left: 0;
	z-index: 2;
	width: 272px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 18px;
	box-shadow: 0 30px 60px -28px rgba(20, 33, 61, 0.4);
}

.fx-sync__head {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 800;
}

.fx-sync__head small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-muted);
}

.fx-sync__appicon {
	width: 36px;
	height: 36px;
	flex: none;
	padding: 9px;
	border-radius: 10px;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
}

.fx-sync__name {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 22px;
	line-height: 1.15;
}

.fx-sync__rows {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
	color: var(--fx-text);
}

.fx-sync__rows li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.fx-sync__rows svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: var(--fx-muted);
}

.fx-sync__pill {
	position: absolute;
	top: 360px;
	left: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px 10px 10px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 999px;
	box-shadow: 0 18px 40px -18px rgba(20, 33, 61, 0.4);
	font-size: 13px;
	font-weight: 700;
}

.fx-sync__pillicon {
	width: 30px;
	height: 30px;
	flex: none;
	padding: 7px;
	border-radius: 999px;
	background: #E3F5E5;
	color: #1F7A2A;
}

.fx-sync__phone {
	position: absolute;
	top: 0;
	right: 0;
	width: 246px;
	height: 510px;
	transform: rotate(3deg);
}

.fx-sync__screen {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 64px 22px 30px;
	border-radius: 34px;
	background: linear-gradient(170deg, #3A4C72 0%, #1D2A47 55%, #14213D 100%);
	color: #FFFFFF;
}

.fx-sync__island {
	position: absolute;
	top: 12px;
	width: 84px;
	height: 24px;
	border-radius: 999px;
	background: #0B1428;
}

.fx-sync__caller {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.fx-sync__avatar {
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, #F48A5C, var(--fx-accent));
	font-size: 26px;
	font-weight: 800;
}

.fx-sync__callname {
	font-size: 25px;
	font-weight: 700;
	line-height: 1.15;
}

.fx-sync__callmeta {
	font-size: 14px;
	color: var(--fx-dark-muted);
}

.fx-sync__buttons {
	display: flex;
	gap: 64px;
	margin-top: auto;
}

.fx-sync__btn {
	position: relative;
	width: 58px;
	height: 58px;
	padding: 17px;
	border-radius: 999px;
	color: #FFFFFF;
}

.fx-sync__btn svg {
	fill: currentColor;
	stroke: none;
}

.fx-sync__btn--decline {
	background: #E5484D;
}

.fx-sync__btn--decline svg {
	transform: rotate(135deg);
}

.fx-sync__btn--accept {
	background: #30A46C;
}

.fx-sync__btn--accept::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(48, 164, 108, 0.6);
	animation: fx-sync-ring 1.6s ease-out infinite;
}

@keyframes fx-sync-ring {
	to {
		box-shadow: 0 0 0 16px rgba(48, 164, 108, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.fx-sync__btn--accept::after {
		animation: none;
	}
}

@container (max-width: 519px) {
	.fx-sync__card {
		top: 70px;
		width: 218px;
		padding: 16px;
	}

	.fx-sync__rows {
		font-size: 12.5px;
	}

	.fx-sync__name {
		font-size: 20px;
	}

	.fx-sync__pill {
		top: 290px;
		padding-right: 12px;
		font-size: 12px;
	}

	.fx-sync__phone {
		width: 214px;
		height: 470px;
	}

	.fx-sync__callname {
		font-size: 22px;
	}

	.fx-sync__buttons {
		gap: 44px;
	}
}

@media (max-width: 600px) {
	.fx-sync {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}

	.fx-sync__card,
	.fx-sync__pill,
	.fx-sync__phone {
		position: relative;
		top: auto;
		left: auto;
		right: auto;
	}

	.fx-sync__card {
		width: 100%;
	}

	.fx-sync__phone {
		width: 240px;
		height: 480px;
		margin-top: 8px;
		transform: none;
	}
}

/* Nachgebauter Fragebogen im Kundenportal */

.fx-q {
	--fx-q-blue: #1D5191;
	--fx-q-field: #E3E7EE;
	font-size: 14px;
	line-height: 1.4;
	color: var(--fx-ink);
	text-align: left;
}

.fx-q__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 24px;
	border-bottom: 1px solid #EEF0F4;
}

.fx-q__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
}

.fx-q__logo {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: var(--fx-ink);
	color: #FFFFFF;
	font-size: 14px;
}

.fx-q__saved {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #1F7A2A;
}

.fx-q__saved svg {
	width: 13px;
	height: 13px;
}

.fx-q__body {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px 24px 26px;
	min-width: 0;
}

.fx-q__kicker {
	margin-bottom: -12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.fx-q__title {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 22px;
	line-height: 1.2;
}

.fx-q__progress {
	height: 6px;
	margin-top: -6px;
	border-radius: 999px;
	background: #EEF0F4;
}

.fx-q__progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--fx-q-blue);
}

.fx-q__titlerow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.fx-q__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.fx-q__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.fx-q__label {
	font-weight: 700;
}

.fx-q__hint {
	margin-top: -4px;
	font-size: 12px;
	color: var(--fx-muted);
}

.fx-q__input {
	padding: 9px 12px;
	background: #FFFFFF;
	border: 1px solid var(--fx-q-field);
	border-radius: 8px;
}

.fx-q__input--link {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--fx-q-blue);
	font-weight: 600;
}

.fx-q__input--link svg {
	width: 15px;
	height: 15px;
	flex: none;
	color: #1DB954;
}

.fx-q__input--link span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.fx-q__input--area {
	min-height: 64px;
}

.fx-q__input.is-focus {
	border-color: var(--fx-q-blue);
	box-shadow: 0 0 0 3px rgba(29, 81, 145, 0.14);
}

.fx-q__caret {
	display: inline-block;
	width: 1.5px;
	height: 1.1em;
	margin-left: 1px;
	vertical-align: text-bottom;
	background: var(--fx-q-blue);
	animation: fx-q-blink 1.1s steps(1) infinite;
}

@keyframes fx-q-blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fx-q__caret {
		animation: none;
	}
}

.fx-q__options,
.fx-q__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.fx-q__option,
.fx-q__checkbox {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--fx-q-field);
	border-radius: 999px;
	font-weight: 600;
	color: var(--fx-text);
}

.fx-q__option::before,
.fx-q__checkbox::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	border: 1.5px solid #B9C1CF;
	border-radius: 999px;
}

.fx-q__checkbox {
	border-radius: 8px;
}

.fx-q__checkbox::before {
	border-radius: 4px;
}

.fx-q__option.is-on,
.fx-q__checkbox.is-on {
	border-color: var(--fx-q-blue);
	background: #EEF3FA;
	color: var(--fx-q-blue);
}

.fx-q__option.is-on::before {
	border: 4px solid var(--fx-q-blue);
	background: #FFFFFF;
}

.fx-q__checkbox.is-on::before {
	border-color: var(--fx-q-blue);
	background: var(--fx-q-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.fx-q__file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px dashed #C9D0DC;
	border-radius: 8px;
	font-weight: 600;
}

.fx-q__file small,
.fx-q__navitem small {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--fx-muted);
}

.fx-q__fileicon {
	padding: 6px 7px;
	border-radius: 6px;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
	font-size: 11px;
	font-weight: 800;
}

.fx-q__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin-top: 4px;
}

.fx-q__btn {
	padding: 9px 16px;
	border-radius: 8px;
	background: var(--fx-q-blue);
	color: #FFFFFF;
	font-weight: 700;
}

.fx-q--portal {
	display: grid;
	grid-template-columns: 190px 1fr;
}

.fx-q__nav {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 12px;
	background: #F6F7F9;
	border-right: 1px solid #EEF0F4;
}

.fx-q__navtitle {
	padding: 0 10px 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--fx-muted);
}

.fx-q__navitem {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	font-weight: 700;
}

.fx-q__navitem.is-active {
	background: #FFFFFF;
	box-shadow: 0 1px 3px rgba(20, 33, 61, 0.1);
}

.fx-q__status {
	width: 18px;
	height: 18px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 1px;
	border: 1.5px solid #B9C1CF;
	border-radius: 999px;
}

.fx-q__status.is-done {
	border-color: #1F7A2A;
	background: #1F7A2A;
	color: #FFFFFF;
}

.fx-q__status.is-done svg {
	width: 11px;
	height: 11px;
}

.fx-q__status.is-active {
	border: 5px solid var(--fx-q-blue);
}

.fx-q--compact {
	font-size: 13px;
}

.fx-q--compact .fx-q__body {
	gap: 14px;
	padding: 18px 18px 22px;
}

.fx-q--compact .fx-q__title {
	font-size: 18px;
}

.fx-q__checks--stack {
	flex-direction: column;
	align-items: flex-start;
}

.fx-q__matrix {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
	border: 1px solid var(--fx-q-field);
	border-radius: 8px;
	overflow: hidden;
}

.fx-q__matrix > * {
	min-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 6px 4px;
	border-top: 1px solid #EEF0F4;
}

.fx-q__matrix > :nth-child(-n + 4) {
	border-top: 0;
	background: #F6F7F9;
}

.fx-q__mhead {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--fx-muted);
}

.fx-q__mrow {
	justify-content: flex-start !important;
	padding-left: 10px !important;
	font-weight: 600;
}

.fx-q__dot::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 1.5px solid #B9C1CF;
	border-radius: 999px;
}

.fx-q__dot.is-on::before {
	border: 4.5px solid var(--fx-q-blue);
}

.fx-q__badge {
	align-self: flex-start;
	margin-top: -6px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--fx-accent-soft);
	color: var(--fx-accent);
	font-size: 11px;
	font-weight: 800;
}

.fx-q__sign {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 10px 14px 12px;
	border: 1px solid var(--fx-q-field);
	border-radius: 8px;
}

.fx-q__signature {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--fx-q-field);
	font-family: 'Snell Roundhand', 'Segoe Script', 'Brush Script MT', cursive;
	font-size: 26px;
	line-height: 1.2;
	color: #1B2B5C;
}

.fx-q__signmeta {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #1F7A2A;
}

.fx-q__signmeta svg {
	width: 13px;
	height: 13px;
}

.fx-qx {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px 32px;
}

.fx-qx__item {
	display: grid;
	grid-row: span 2;
	grid-template-rows: subgrid;
	gap: 20px;
}

.fx-qx__item figcaption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-style: normal;
}

.fx .fx-qx__item .fx-qx__title {
	font-size: 26px;
	line-height: 1.2;
}

.fx-qx--top .fx-qx__item figcaption {
	order: -1;
}

.fx-qx__item figcaption p {
	font-size: 15px;
	color: var(--fx-text);
}

@media (max-width: 600px) {
	.fx-q__top,
	.fx-q__body {
		padding-left: 16px;
		padding-right: 16px;
	}

	.fx-q__row,
	.fx-q--portal {
		grid-template-columns: 1fr;
	}

	.fx-q__nav {
		flex-direction: row;
		overflow: hidden;
		padding: 12px;
		border-right: 0;
		border-bottom: 1px solid #EEF0F4;
		-webkit-mask-image: linear-gradient(90deg, #000 80%, transparent);
		mask-image: linear-gradient(90deg, #000 80%, transparent);
	}

	.fx-q__navtitle,
	.fx-q__navitem small {
		display: none;
	}

	.fx-q__navitem {
		flex: none;
		align-items: center;
		font-size: 13px;
	}
}

/* Dunkler Abschnitt */

.fx-dark {
	background: var(--fx-ink);
	color: #FFFFFF;
}

.fx-dark a {
	color: #FFFFFF;
}

.fx-dark .fx-section {
	padding-bottom: 104px;
}

.fx-dark .fx-eyebrow {
	color: var(--fx-dark-label);
}

.fx-dark .fx-body,
.fx-dark .fx-lead {
	color: var(--fx-dark-text);
}

.fx-dark .fx-shot {
	border: 0;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.fx-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 26px 32px;
	padding-top: 10px;
}

.fx-fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 16px;
	border-top: 1px solid var(--fx-dark-line);
}

.fx-fact h3 {
	font-size: 17px;
	font-weight: 700;
}

.fx-fact p {
	font-size: 15px;
	color: var(--fx-dark-muted);
}

.fx-facts--light .fx-fact {
	border-top-color: var(--fx-line-strong);
}

.fx-facts--light .fx-fact p {
	color: var(--fx-text);
}

.fx-facts--large .fx-fact {
	gap: 10px;
	padding-top: 20px;
}

.fx-facts--large .fx-fact h3 {
	font-family: var(--fx-display);
	font-size: 24px;
}

.fx-facts--large .fx-fact p {
	font-size: 16px;
}

.fx-tip {
	display: flex;
	gap: 14px;
	padding: 20px 22px;
	background: #1C2A48;
	border: 1px solid var(--fx-dark-line);
	border-radius: 16px;
	font-size: 15px;
	color: var(--fx-dark-text);
}

.fx-tip svg {
	width: 20px;
	height: 20px;
	flex: none;
	margin-top: 2px;
	color: var(--fx-accent);
}

.fx-tip strong {
	color: #FFFFFF;
}

.fx-steps-dark {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.fx-steps-dark li {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 22px;
	border: 1px solid var(--fx-dark-line);
	border-radius: 18px;
}

.fx-steps-dark .fx-step-label {
	color: var(--fx-dark-label);
}

.fx-steps-dark strong {
	font-family: var(--fx-display);
	font-size: 21px;
	line-height: 1.2;
}

.fx-steps-dark p {
	font-size: 15px;
	color: var(--fx-dark-muted);
}

/* Beispiel: Fragebogen → Angebot */

.fx-example {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fx-example__card {
	padding: 22px 24px;
	background: #FFFFFF;
	border-radius: 18px;
	color: var(--fx-ink);
}

.fx-example__label {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fx-muted);
}

.fx-example__answer {
	padding: 10px 14px;
	background: var(--fx-sand);
	border-radius: 10px;
}

.fx-example__arrow {
	display: flex;
	justify-content: center;
	color: var(--fx-accent);
}

.fx-example__arrow svg {
	width: 28px;
	height: 28px;
}

.fx-mark {
	padding: 1px 6px;
	background: var(--fx-tint);
	border-radius: 6px;
}

/* Automationen */

.fx-flow {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
}

.fx-flow li {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 18px;
}

.fx-flow strong {
	font-family: var(--fx-display);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.25;
}

.fx-flow p {
	font-size: 15px;
	color: var(--fx-text);
}

.fx-flow .fx-flow__action {
	background: var(--fx-tint);
	border-color: var(--fx-tint-line);
}

.fx-flow .fx-flow__action .fx-step-label {
	color: #9A3412;
}

/* Kundenstimme */

.fx-quote {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 24px 32px;
	padding-top: 56px;
	border-top: 1px solid var(--fx-line-strong);
}

/* Initialen statt Foto: Google-Bewertungen von /rezensionen/ */
.fx-quote__avatar {
	width: 88px;
	height: 88px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: var(--fx-tint);
	color: #9A3412;
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 30px;
	letter-spacing: 0.02em;
}

/* Profilbild aus der Google-Bewertung (lokal in /img/bewertungen/) */
.fx-quote .fx-quote__photo {
	width: 88px;
	height: 88px;
	flex: none;
	border-radius: 999px;
	object-fit: cover;
}

.fx-quote .fx-quote__photo--logo {
	border-radius: 20px;
	border: 1px solid var(--fx-line);
}

.fx-quote > div {
	flex: 1 1 480px;
	min-width: 0;
}

.fx-quote__stars {
	margin-bottom: 10px;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 2px;
	color: #E8A317;
}

.fx-quote blockquote {
	margin-bottom: 14px;
	padding: 0;
	border: 0;
	font-family: var(--fx-display);
	font-weight: 600;
	font-size: clamp(20px, 2.1vw, 26px);
	line-height: 1.4;
	letter-spacing: -0.01em;
	font-style: normal;
	color: var(--fx-ink);
}

.fx-quote figcaption {
	font-size: 15px;
	font-style: normal;
	color: var(--fx-muted);
}

.fx-quote figcaption strong {
	color: var(--fx-ink);
}

.fx-quote-section {
	padding-top: 64px;
	padding-bottom: 104px;
}

/* Weitere Funktionen */

.fx-related {
	background: var(--fx-sand);
}

.fx-related .fx-wrap {
	padding-top: 88px;
	padding-bottom: 88px;
}

.fx-related h2 {
	margin-bottom: 32px;
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 32px;
	letter-spacing: -0.01em;
}

.fx-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.fx-related__grid a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
	background: #FFFFFF;
	border: 1px solid transparent;
	border-radius: 18px;
	color: var(--fx-ink) !important;
	text-decoration: none;
}

.fx-related__grid a:hover {
	border-color: var(--fx-ink);
}

.fx-related__grid strong {
	font-size: 18px;
}

.fx-related__grid span {
	font-size: 15px;
	color: var(--fx-muted);
}

/* Abschluss */

.fx-final {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 22px;
	padding-top: 104px;
	padding-bottom: 104px;
	text-align: center;
}

.fx-final h2 {
	max-width: 860px;
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: clamp(36px, 4.6vw, 60px);
	line-height: 1.06;
	letter-spacing: -0.02em;
}

@media (max-width: 767px) {
	.fx-hero {
		padding-top: 32px;
		padding-bottom: 48px;
	}

	.fx-section {
		padding-top: 72px;
		padding-bottom: 64px;
	}

	.fx-dark .fx-section {
		padding-bottom: 72px;
	}

	.fx-toast {
		left: 0;
	}

	.fx-card {
		padding: 20px;
		gap: 16px;
	}
}

/* Mobile App: nachgebaute App-Ansichten im Smartphone-Rahmen.
   Alle Maße in em, die Schriftgröße skaliert über cqw mit der Rahmenbreite. */

.fx-app {
	container-type: inline-size;
	width: 100%;
	overflow: hidden;
	border: 6px solid var(--fx-ink);
	border-radius: 30px;
	background: #FFFFFF;
	box-shadow: 0 30px 60px -30px rgba(20, 33, 61, 0.45);
}

.fx-app__screen {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 9 / 18.6;
	overflow: hidden;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 11px;
	font-size: 4.1cqw;
	line-height: 1.3;
	color: #222A36;
	background: #F5F6F8;
	text-align: left;
}

.fx-app__screen svg {
	width: 1.15em;
	height: 1.15em;
	flex: none;
}

.fx-app__top {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.8em 1.1em;
	background: #FFFFFF;
	box-shadow: 0 1px 0 #E6E8EC;
}

.fx-app__top svg {
	width: 1.6em;
	height: 1.6em;
}

.fx-app__icons {
	display: flex;
	gap: 0.9em;
}

.fx .fx-app__logo {
	width: 2.3em;
	height: 2.3em;
	display: block;
}

.fx-app__sub {
	flex: none;
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.6em 1.1em;
	background: #FFFFFF;
	border-bottom: 1px solid #E6E8EC;
	line-height: 1.15;
}

.fx-app__sub svg {
	width: 1.4em;
	height: 1.4em;
}

.fx-app__sub small {
	display: block;
	font-size: 0.75em;
}

.fx-app__sub strong {
	font-size: 1.2em;
	font-weight: 800;
}

.fx-app__body {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	padding: 0.9em;
}

.fx-app__card {
	flex: none;
	padding: 0.9em 1em;
	background: #FFFFFF;
	border: 1px solid #E6E8EC;
	border-radius: 0.9em;
}

.fx-app__cardhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	font-size: 1.1em;
	font-weight: 800;
}

.fx-app__plus {
	width: 1.45em;
	height: 1.45em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.3em;
	background: #2C4F86;
	color: #FFFFFF;
}

.fx-app__plus svg {
	width: 0.9em;
	height: 0.9em;
}

.fx-app__empty {
	margin-top: 0.35em;
	font-size: 0.78em;
	font-style: italic;
	color: #9AA1AC;
}

.fx-app__label {
	margin: 0.7em 0 0.25em;
	font-size: 0.7em;
	color: #8A919C;
}

.fx-app__field {
	min-height: 2.3em;
	display: flex;
	align-items: center;
	gap: 0.45em;
	padding: 0.4em 0.6em;
	background: #FFFFFF;
	border: 1px solid #D9DCE1;
	border-radius: 0.45em;
	font-size: 0.85em;
}

.fx-app__field--muted {
	color: #A3A9B3;
}

.fx-app__field em {
	margin-left: auto;
	font-style: normal;
	color: #8A919C;
}

.fx-app__dot {
	width: 0.55em;
	height: 0.55em;
	flex: none;
	border-radius: 999px;
	background: #2C4F86;
}

.fx-app__dot--green {
	background: #3DAA4E;
}

.fx-app__dot--orange {
	background: #F4A12C;
}

.fx-app__link {
	font-size: 0.78em;
	color: #2C4F86;
	text-decoration: underline;
}

.fx-app__tabs {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: space-around;
	padding: 0.5em 0.3em 0.9em;
	background: #FFFFFF;
	border-top: 1px solid #E6E8EC;
}

.fx-app__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25em;
	min-width: 3.4em;
	font-size: 0.68em;
	color: #3A4250;
}

.fx-app__tab svg {
	width: 2em;
	height: 2em;
}

.fx-app__tab.is-active {
	color: #2C4F86;
	font-weight: 800;
}

.fx-app__fab {
	width: 3em;
	height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #2C4F86;
	color: #FFFFFF;
}

.fx-app__fab svg {
	width: 1.3em;
	height: 1.3em;
}

.fx-app__headicons {
	display: flex;
	gap: 0.4em;
}

.fx-app__video {
	width: 1.45em;
	height: 1.45em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0.3em;
	background: #7F8B9B;
	color: #FFFFFF;
}

.fx-app__video svg {
	width: 0.95em;
	height: 0.95em;
}

.fx-app__slot {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
	margin-top: 0.8em;
}

.fx-app__slot > div {
	flex: 1;
	min-width: 0;
}

.fx-app__slot strong {
	display: block;
	font-size: 1.1em;
	font-weight: 800;
}

.fx-app__slot .fx-app__stepicon {
	width: 2.1em;
	height: 2.1em;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #2C4F86;
	color: #FFFFFF;
}

.fx-app__slot > svg {
	width: 1.2em;
	height: 1.2em;
	margin-top: 0.3em;
}

.fx-app__more {
	font-size: 0.75em;
	color: #2C4F86;
}

.fx-app__range {
	display: flex;
	flex-direction: column;
	gap: 0.45em;
	margin: 0.4em 0 0 2.8em;
	padding: 0.6em;
	background: #EFF0F2;
	border-radius: 0.5em;
}

.fx-app__primary {
	align-self: flex-start;
	padding: 0.15em 0.6em;
	background: #4A4F57;
	border-radius: 0.25em;
	color: #FFFFFF;
	font-size: 0.68em;
	letter-spacing: 0.05em;
}

.fx-app__times {
	display: flex;
	gap: 0.45em;
}

.fx-app__times .fx-app__field {
	flex: 1;
}

.fx-app__times em {
	font-weight: 700;
	color: #222A36;
}

.fx-app__note {
	margin-top: 0.6em;
	padding: 0.6em 0.7em;
	background: #F1F2F5;
	border-radius: 0.45em;
	font-size: 0.8em;
}

.fx-app__note small {
	display: block;
	margin-bottom: 0.25em;
	color: #8A919C;
}

.fx-app__progress {
	height: 0.45em;
	margin-top: 0.6em;
	overflow: hidden;
	background: #E6E8EC;
	border-radius: 999px;
}

.fx-app__progress span {
	display: block;
	height: 100%;
	background: #3DAA4E;
}

.fx-app__checkrow {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.45em 0;
	border-top: 1px solid #EEF0F3;
	font-size: 0.85em;
}

.fx-app__checkrow:first-of-type {
	border-top: 0;
}

.fx-app__checkrow span:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.fx-app__checkrow.is-done span:nth-child(2) {
	color: #8A919C;
	text-decoration: line-through;
}

.fx-app__box {
	width: 1.3em;
	height: 1.3em;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #B9BEC7;
	border-radius: 0.3em;
}

.fx-app__box.is-done {
	background: #2C4F86;
	border-color: #2C4F86;
	color: #FFFFFF;
}

.fx-app__box svg {
	width: 0.8em;
	height: 0.8em;
}

/* Events */

.fx-app__hello {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	font-size: 1.15em;
	font-weight: 800;
}

.fx-app__hello .fx-app__link {
	font-size: 0.65em;
	font-weight: 400;
	color: #222A36;
}

.fx-app__month {
	padding: 0.6em 0.8em;
	background: #E9ECF1;
	border-radius: 0.6em;
	font-weight: 800;
}

.fx-app__month small {
	margin-left: 0.5em;
	font-weight: 400;
	color: #8A919C;
}

.fx-app__event {
	display: flex;
	align-items: center;
	gap: 0.9em;
	padding: 1.1em 0.9em;
	background: #FFFFFF;
	border: 1px solid #E6E8EC;
	border-radius: 0.9em;
}

.fx-app__date {
	flex: none;
	width: 3.5em;
	padding-left: 0.55em;
	border-left: 0.28em solid #3DAA4E;
	text-align: center;
	line-height: 1.05;
}

.fx-app__date small {
	display: block;
	font-size: 0.7em;
	color: #8A919C;
}

.fx-app__date b {
	display: block;
	font-size: 1.8em;
	line-height: 1.05;
}

.fx-app__date--option {
	border-color: #F4A12C;
}

.fx-app__date--request {
	border-color: #2C4F86;
}

.fx-app__event > div:last-child {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
}

.fx-app__event > div:last-child b {
	font-size: 1.02em;
}

.fx-app__meta {
	display: flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.7em;
	color: #6B7380;
}

/* Tabellen & Chips */

.fx-app__thead,
.fx-app__trow {
	display: grid;
	grid-template-columns: 1.6em 1fr 1.6fr;
	align-items: center;
	gap: 0.5em;
	font-size: 0.78em;
}

.fx-app__thead {
	margin-top: 0.6em;
	padding-bottom: 0.45em;
	border-bottom: 2px solid #E6E8EC;
}

.fx-app__group {
	margin: 0.7em 0 0.35em;
	font-size: 0.8em;
	font-weight: 800;
}

.fx-app__trow {
	padding: 0.45em 0.4em;
	background: #F1F2F5;
	border-radius: 0.3em;
}

.fx-app__status {
	width: 1.5em;
	height: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	background: #2C4F86;
	color: #FFFFFF;
}

.fx-app__status svg {
	width: 0.9em;
	height: 0.9em;
}

.fx-app__chip {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	background: #E9ECF1;
	border-radius: 999px;
	font-size: 0.85em;
}

/* Angebot */

.fx-app__seg {
	display: inline-flex;
	margin-top: 0.6em;
	padding: 0.2em;
	background: #E9ECF1;
	border-radius: 0.45em;
	font-size: 0.8em;
}

.fx-app__seg span {
	padding: 0.3em 0.9em;
	color: #8A919C;
}

.fx-app__seg .is-active {
	background: #2C4F86;
	border-radius: 0.35em;
	color: #FFFFFF;
}

.fx-app__bar {
	padding: 0.45em 0.8em;
	background: #4A4F57;
	border-radius: 0.35em;
	color: #FFFFFF;
	font-size: 0.75em;
}

.fx-app__pos {
	padding: 0.7em 0.8em;
	background: #FFFFFF;
	border: 1px solid #E6E8EC;
	border-radius: 0.6em;
	font-size: 0.85em;
}

.fx-app__pos b {
	display: block;
}

.fx-app__pos p {
	margin: 0.2em 0 0.45em;
	color: #6B7380;
	font-size: 0.85em;
}

.fx-app__pos dl {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.9em;
	margin: 0;
	font-size: 0.8em;
}

.fx-app__pos dt {
	display: inline;
	color: #6B7380;
}

.fx-app__pos dd {
	display: inline;
	margin: 0 0 0 0.25em;
	font-weight: 700;
}

.fx-app__actions {
	display: flex;
	gap: 0.9em;
	font-size: 0.72em;
	color: #2C4F86;
}

.fx-app__sum {
	display: flex;
	justify-content: space-between;
	font-size: 0.85em;
}

.fx-app__sum--total {
	padding-top: 0.5em;
	border-top: 1px solid #E6E8EC;
	font-weight: 800;
}

/* Vertrag */

.fx-app__editor {
	margin-top: 0.3em;
	padding: 0.6em 0.7em;
	border: 1px solid #D9DCE1;
	border-radius: 0.45em;
	font-size: 0.82em;
	line-height: 1.6;
}

.fx-app__ph {
	padding: 0.05em 0.35em;
	background: #ECEEF2;
	border-radius: 0.3em;
}

.fx-app__toolbar {
	display: flex;
	gap: 0.9em;
	margin-top: 0.5em;
	padding-top: 0.4em;
	border-top: 1px solid #EEF0F3;
	color: #A3A9B3;
	font-weight: 700;
}

.fx-app__collapsed {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.7em 0.8em;
	background: #ECEEF2;
	border-radius: 0.6em;
	font-size: 0.85em;
}

.fx-app__collapsed svg {
	width: 1.2em;
	height: 1.2em;
}

/* Aufgaben */

.fx-app__task {
	display: flex;
	gap: 0.7em;
	padding: 0.8em 0.4em;
	border-bottom: 1px solid #E6E8EC;
}

.fx-app__circle {
	width: 1.4em;
	height: 1.4em;
	flex: none;
	border: 2px solid #B9BEC7;
	border-radius: 999px;
}

.fx-app__task > div {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.35em;
}

.fx-app__task b {
	font-size: 0.92em;
}

.fx-app__tag {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 0.15em 0.55em;
	background: #ECEEF2;
	border-radius: 999px;
	font-size: 0.7em;
}

/* Platzierung: Kopfbereich und Raster */

.fx-mobshots {
	position: relative;
	width: 100%;
	max-width: 440px;
	height: 560px;
}

.fx-mobshots .fx-app {
	position: absolute;
	width: 250px;
}

.fx-mobshots__back {
	top: 0;
	left: 0;
	transform: rotate(-4deg);
}

.fx-mobshots__front {
	top: 40px;
	right: 0;
}

.fx-mobgroups {
	display: flex;
	flex-direction: column;
	gap: 96px;
}

.fx-mobgroup {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	align-items: center;
	gap: 40px 64px;
	margin: 0;
}

.fx-mobgroup--reverse {
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.fx-mobgroup--reverse .fx-mobgroup__text {
	order: 2;
}

.fx-mobgroup__text {
	display: flex;
	flex-direction: column;
	gap: 14px;
	font-size: 17px;
	font-style: normal;
	color: var(--fx-text);
}

.fx-mobgroup__num {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 15px;
	letter-spacing: 0.12em;
	color: var(--fx-accent);
}

.fx-mobgroup__text strong {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: clamp(26px, 2.6vw, 34px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--fx-ink);
}

.fx .fx-mobgroup__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.fx-mobgroup__chips li {
	padding: 6px 12px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	color: var(--fx-ink);
}

.fx-mobgroup__phones {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 28px;
	padding: 48px 40px;
	background: var(--fx-accent-soft);
	border-radius: 32px;
}

.fx-mobgroup__phones .fx-app {
	flex: 1 1 0;
	max-width: 250px;
}

.fx-mobgroup__phones .fx-app + .fx-app {
	margin-top: 56px;
}

@media (max-width: 767px) {
	.fx-mobshots {
		height: 470px;
		max-width: 340px;
		margin: 0 auto;
	}

	.fx-mobshots .fx-app {
		width: 200px;
	}

	.fx-mobgroups {
		gap: 64px;
	}

	.fx-mobgroup,
	.fx-mobgroup--reverse {
		grid-template-columns: minmax(0, 1fr);
	}

	.fx-mobgroup--reverse .fx-mobgroup__text {
		order: 0;
	}

	.fx-mobgroup__phones {
		gap: 14px;
		padding: 24px 16px 28px;
		border-radius: 24px;
	}

	.fx-mobgroup__phones .fx-app {
		border-width: 4px;
		border-radius: 20px;
	}

	.fx-mobgroup__phones .fx-app + .fx-app {
		margin-top: 32px;
	}
}

/* Funktionen-Übersicht (/funktionen/) */

.fx-steps5 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

.fx-steps5::before {
	content: "";
	position: absolute;
	top: 34px;
	left: 10%;
	right: 10%;
	height: 2px;
	background: var(--fx-line-strong);
}

.fx-steps5 a {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 20px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 18px;
	color: var(--fx-ink) !important;
	text-decoration: none;
}

.fx-steps5 a:hover {
	border-color: var(--fx-ink);
}

.fx-steps5 .fx-icon {
	position: relative;
	z-index: 1;
}

.fx-steps5__num {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--fx-accent);
}

.fx-steps5 strong {
	font-size: 18px;
	line-height: 1.25;
}

.fx-steps5 span:last-child {
	font-size: 15px;
	color: var(--fx-text);
}

.fx-bigcards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
	margin-top: 48px;
}

.fx-bigcard {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	background: #1C2A48;
	border: 1px solid var(--fx-dark-line);
	border-radius: 24px;
	color: #FFFFFF !important;
	text-decoration: none;
}

.fx-bigcard:hover {
	border-color: #6B7FA8;
}

.fx-bigcard .fx-icon {
	background: #22304F;
}

.fx-bigcard strong {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 26px;
	line-height: 1.2;
}

.fx-bigcard p {
	color: var(--fx-dark-text);
}

.fx-bigcard .fx-more {
	margin-top: auto;
	color: #FFFFFF !important;
}

.fx-features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
}

.fx-feature {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 26px;
	background: #FFFFFF;
	border: 1px solid var(--fx-line);
	border-radius: 20px;
	color: var(--fx-ink) !important;
	text-decoration: none;
}

.fx-feature:hover {
	border-color: var(--fx-ink);
}

.fx-feature strong {
	font-size: 19px;
	line-height: 1.3;
}

.fx-feature p {
	font-size: 15px;
	color: var(--fx-text);
}

.fx-feature .fx-more {
	margin-top: auto;
	padding-bottom: 0;
	font-size: 15px;
}

.fx-steps5 li {
	display: flex;
}

.fx-steps5 li > a {
	flex: 1;
}

@media (max-width: 900px) {
	.fx-steps5 {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}

	.fx-steps5::before {
		top: 30px;
		bottom: 30px;
		left: 43px;
		right: auto;
		width: 2px;
		height: auto;
	}

	.fx-steps5 a {
		display: grid;
		grid-template-columns: 48px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 4px;
	}

	.fx-steps5 .fx-icon {
		grid-row: span 3;
	}
}

/* Rechnungen: nachgebaute Dokumentenliste (Kopfbereich) */

.fx-docs {
	container-type: inline-size;
}

.fx-docs__body {
	padding: 22px 24px 26px;
	font-size: 13px;
	color: #222A36;
}

.fx-docs__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}

.fx-docs__head strong {
	font-size: 18px;
	font-weight: 800;
}

.fx-docs__plus {
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	background: #2C4F86;
	color: #FFFFFF;
}

.fx-docs__plus svg {
	width: 14px;
	height: 14px;
}

.fx-docs__row {
	display: grid;
	grid-template-columns: 42px 60px minmax(0, 1fr) 44px 74px 100px 92px 10px;
	align-items: center;
	gap: 8px;
	padding: 7px 0;
}

.fx-docs__row--th {
	padding-bottom: 10px;
	border-bottom: 2px solid #E6E8EC;
	font-size: 12px;
	color: #6B7380;
}

.fx-docs__group {
	margin-top: 12px;
	font-size: 14px;
	font-weight: 800;
}

.fx-docs__amt {
	text-align: right;
	white-space: nowrap;
}

.fx-docs__status {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	color: #FFFFFF;
}

.fx-docs__status svg {
	width: 12px;
	height: 12px;
}

.fx-docs__status--draft {
	background: #A3A9B3;
}

.fx-docs__status--paid {
	background: #3DAA4E;
}

.fx-docs__status--done {
	background: #2C4F86;
}

.fx-docs__chip {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	background: #E9ECF1;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.fx-docs__chip--due {
	background: #F7A440;
	color: #FFFFFF;
}

.fx-docs__chip--paid {
	background: #DDF2E0;
	color: #1F7A2A;
}

.fx-docs__dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: #3DAA4E;
}

.fx-docs__link {
	font-size: 11px;
	color: #2C4F86;
	text-decoration: underline;
}

.fx-docs__more {
	color: #8A919C;
	font-weight: 800;
	line-height: 1;
}

@container (max-width: 560px) {
	.fx-docs__row {
		grid-template-columns: 24px 60px 70px minmax(0, 1fr) 10px;
	}

	.fx-docs__name,
	.fx-docs__date,
	.fx-docs__portal {
		display: none !important;
	}
}

/* Rechnungen: Statistik „Erhaltene Zahlungen“ */

.fx-chart {
	container-type: inline-size;
	padding: 28px;
	background: #FFFFFF;
	border: 1px solid var(--fx-frame);
	border-radius: 22px;
	box-shadow: 0 30px 60px -36px rgba(20, 33, 61, 0.35);
}

.fx-chart__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px 24px;
}

.fx-chart__head strong {
	display: block;
	font-size: 18px;
	font-weight: 800;
}

.fx-chart__head small {
	font-size: 13px;
	color: var(--fx-muted);
}

.fx-chart__legend {
	display: flex;
	gap: 14px;
	font-size: 13px;
	color: var(--fx-text);
}

.fx-chart__legend span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.fx-chart__legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.fx-chart__kpis {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 20px 0 24px;
}

.fx-chart__kpi {
	padding: 12px 14px;
	background: #F5F6F8;
	border-radius: 14px;
}

.fx-chart__kpi small {
	display: block;
	font-size: 12px;
	color: var(--fx-muted);
}

.fx-chart__kpi b {
	font-family: var(--fx-display);
	font-weight: var(--fx-display-weight);
	font-size: 24px;
	line-height: 1.2;
}

.fx-chart__plot {
	position: relative;
	height: 220px;
	margin-left: 44px;
}

.fx-chart__grid {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
}

.fx-chart__grid span {
	position: relative;
	border-top: 1px dashed #E6E8EC;
}

.fx-chart__grid span::before {
	content: attr(data-v);
	position: absolute;
	right: calc(100% + 8px);
	top: -8px;
	font-size: 11px;
	color: #A3A9B3;
	white-space: nowrap;
}

.fx-chart__bars {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
	align-items: end;
}

.fx-chart__bar {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	height: 100%;
}

.fx-chart__bar i {
	position: relative;
	display: block;
	width: 100%;
}

.fx-chart__paid {
	background: #3DAA4E;
	border-radius: 6px 6px 0 0;
}

.fx-chart__open {
	background: #F4A12C;
	border-radius: 6px 6px 0 0;
}

.fx-chart__paid + .fx-chart__open {
	margin-bottom: 2px;
}

.fx-chart__bar:has(.fx-chart__open) .fx-chart__paid {
	border-radius: 0;
}

.fx-chart__tip {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, calc(-100% - 8px));
	padding: 4px 8px;
	background: var(--fx-ink);
	border-radius: 8px;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

.fx-chart__months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 8px;
	margin: 8px 0 0 44px;
	font-size: 11px;
	color: #8A919C;
	text-align: center;
}

@container (max-width: 420px) {
	.fx-chart__bars,
	.fx-chart__months {
		gap: 4px;
	}

	.fx-chart__months span:nth-child(even) {
		visibility: hidden;
	}

	.fx-chart__kpi b {
		font-size: 20px;
	}
}