/* Falko Price Switcher – Frontend Styles */

:root {
	--fps-accent: #1C61E7;
	--fps-radius: 4px;      /* per Einstellung überschreibbar; 0 = komplett eckig */
	--fps-border: #d5d8dd;
	--fps-muted: #5a6270;
	--fps-fg: #22262c;
}

/* ---------------------------------------------------------------------------
   Live-Umschaltung der doppelt gerenderten Preise / Hinweise (reines CSS).
   Die aktive Variante hängt an der Body-Klasse .fps-mode-business|private.
   display:contents = Wrapper verschwindet aus dem Layout -> Theme-Styles der
   .price-/.amount-Elemente bleiben unangetastet.
--------------------------------------------------------------------------- */
.fps-swap,
.fps-swap > .fps-incl,
.fps-swap > .fps-excl {
	display: contents;
}
.fps-swap > .fps-excl {
	display: none;
}
.fps-mode-business .fps-swap > .fps-incl {
	display: none;
}
.fps-mode-business .fps-swap > .fps-excl {
	display: contents;
}

/* ---------------------------------------------------------------------------
   Umschalter – Basis
--------------------------------------------------------------------------- */
.fps-switch {
	display: inline-flex;
	align-items: stretch;
	font-size: 13px;
	line-height: 1.1;
	font-family: inherit;
	vertical-align: middle;
	-webkit-user-select: none;
	user-select: none;
}
.fps-switch .fps-opt {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--fps-muted);
	font: inherit;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	line-height: 1.15;
	transition: color .12s ease, background-color .12s ease;
}
.fps-switch .fps-opt__label {
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}
.fps-switch .fps-opt__sub {
	font-size: 10px;
	font-weight: 400;
	opacity: .8;
	white-space: nowrap;
}
.fps-switch .fps-opt:focus-visible {
	outline: 2px solid var(--fps-accent);
	outline-offset: -2px;
}

/* ---------------------------------------------------------------------------
   Style "toggle" – eckiges Segmented Control (wie das Suchfeld oben)
--------------------------------------------------------------------------- */
.fps-style-toggle {
	background: #fff;
	border: 1px solid var(--fps-border);
	border-radius: var(--fps-radius);
	overflow: hidden;           /* klippt die inneren Ecken sauber eckig */
}
.fps-style-toggle .fps-opt {
	padding: 7px 18px;
	border-radius: 0;
}
.fps-style-toggle .fps-opt + .fps-opt {
	border-left: 1px solid var(--fps-border);
}
.fps-style-toggle .fps-opt:hover {
	background: rgba(0, 0, 0, .035);
}
.fps-mode-business .fps-style-toggle .fps-opt-business,
.fps-mode-private  .fps-style-toggle .fps-opt-private {
	background: var(--fps-accent);
	color: #fff;
}
.fps-mode-business .fps-style-toggle .fps-opt-business:hover,
.fps-mode-private  .fps-style-toggle .fps-opt-private:hover {
	background: var(--fps-accent);
}

/* ---------------------------------------------------------------------------
   Style "buttons" – einzelne eckige Buttons
--------------------------------------------------------------------------- */
.fps-style-buttons {
	gap: 6px;
}
.fps-style-buttons .fps-opt {
	border: 1px solid var(--fps-border);
	border-radius: var(--fps-radius);
	padding: 7px 18px;
	background: #fff;
}
.fps-style-buttons .fps-opt:hover {
	border-color: var(--fps-accent);
	color: var(--fps-accent);
}
.fps-mode-business .fps-style-buttons .fps-opt-business,
.fps-mode-private  .fps-style-buttons .fps-opt-private {
	background: var(--fps-accent);
	border-color: var(--fps-accent);
	color: #fff;
}

/* Footer-Hinweis */
.fps-tax-notice {
	font-size: inherit;
	color: inherit;
}