/**
 * f+p Tarife
 *
 * Keine eigenen Farb- und Schriftwerte, alles ueber die Avada-Variablen.
 * --fp-farbe wird pro Karte im Template gesetzt.
 *
 * Zur Preishierarchie: Rate und Gesamtpreis sind beide deutlich gesetzt. Der
 * Gesamtpreis ist bewusst kein Kleingedrucktes, sondern eine eigene, gut
 * lesbare Zeile mit hervorgehobenem Betrag. Die endgueltige Gewichtung ist
 * vor Livegang juristisch zu klaeren.
 */

.fp-tarife,
.fp-finder {
	--fp-farbe: var(--awb-color4);
	--fp-rahmen: rgba(255, 255, 255, .18);
	--fp-abstand: 32px;
	--fp-radius: 14px;
	--fp-radius-klein: 999px;

	color: var(--awb-color1);
	font-family: var(--awb-typography5-font-family);
	font-size: var(--awb-typography5-font-size);
	line-height: var(--awb-typography5-line-height);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ------------------------------------------------------------- Schalter */

.fp-schalter {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 40px;
}

.fp-schalter__knopf {
	appearance: none;
	border-radius: var(--fp-radius-klein);
	border-radius: 999px;
	background: transparent;
	border: 2px solid var(--awb-color4);
	color: var(--awb-color1);
	cursor: pointer;
	font: inherit;
	padding: 14px 28px;
	transition: background-color .2s ease, color .2s ease;
}

.fp-schalter__knopf[aria-pressed="true"] {
	background: var(--awb-color4);
	color: var(--awb-color8);
}

/* --------------------------------------------------------------- Karten */

.fp-karten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: start;
}

.fp-karte {
	/* Der helle Bereich endet frueh: darunter steht heller Text auf Dunkel.
	   Ueber die ganze Karte verlaufend waere er im oberen Drittel unlesbar. */
	background: linear-gradient(180deg, var(--awb-color2) 0%, var(--awb-color8) 24%);
	border: 1px solid var(--fp-rahmen);
	position: relative;
}

.fp-karte--hervor {
	background: var(--awb-color8);
	border: 2px solid var(--awb-color4);
	z-index: 1;
}

.fp-karte__badge {
	position: relative;
	z-index: 1;
	background: var(--awb-color4);
	color: var(--awb-color8);
	font-family: var(--awb-custom_typography_6-font-family);
	font-size: var(--awb-custom_typography_6-font-size);
	letter-spacing: var(--awb-custom_typography_6-letter-spacing);
	text-transform: var(--awb-custom_typography_6-text-transform);
	padding: 7px 12px 6px;
	text-align: center;
}

.fp-karte__inhalt {
	padding: var(--fp-abstand);
}

.fp-karte__logo {
	display: block;
	max-width: 100%;
	height: auto;
	margin-bottom: 25px;
}

.fp-karte__titel {
	font-family: var(--awb-typography1-font-family);
	font-size: 40px;
	color: var(--fp-farbe);
	margin-bottom: 25px;
}

/* -------------------------------------------------------------- Preise */

.fp-block[hidden] {
	display: none;
}

.fp-block[hidden] {
	/* Avada setzt auf manchen Elementen display, deshalb hier bewusst hart. */
	display: none !important;
}

.fp-block__leer {
	color: var(--awb-color6);
	border: 1px dashed var(--fp-rahmen);
	border-radius: var(--fp-radius);
	padding: 16px;
	margin: 0 0 20px;
}

.fp-preis {
	font-family: var(--awb-typography1-font-family);
	letter-spacing: var(--awb-typography1-letter-spacing);
	text-transform: var(--awb-typography1-text-transform);
	color: var(--fp-farbe);
	line-height: 1;
}

.fp-preis__ab {
	font-size: 28px;
}

.fp-preis__wert {
	font-size: 58px;
}

.fp-preis__einheit {
	font-size: 26px;
}

/* Gesamtpreis: eigene Zeile, klar lesbar, kein Kleingedrucktes. */
/*
 * Gesamtpreis: die Zahl bleibt in der Zusammenfassung immer sichtbar, die
 * Aufschluesselung oeffnet sich erst auf Klick. Ganz ausblenden waere bei
 * einer Preisangabe heikel.
 */
.fp-gesamt {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
}

.fp-gesamt > summary {
	cursor: pointer;
	list-style: none;
	color: var(--awb-color6);
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
}

.fp-gesamt > summary::-webkit-details-marker {
	display: none;
}

.fp-gesamt > summary::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}

.fp-gesamt[open] > summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.fp-gesamt__wert {
	font-weight: 700;
	color: var(--awb-color1);
}

.fp-gesamt__inhalt {
	margin-top: 8px;
	padding: 10px 14px;
	border-left: 2px solid var(--fp-rahmen);
	border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
	color: var(--awb-color6);
}

.fp-gesamt__inhalt ul {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
}

.fp-gesamt__zusatz {
	display: block;
}

.fp-details {
	margin-top: 10px;
	font-size: 13px;
	color: var(--awb-color6);
}

.fp-details summary {
	cursor: pointer;
}

.fp-details ul {
	margin: 8px 0 0 18px;
	padding: 0;
}

.fp-fussnote {
	font-size: 12px;
	color: var(--awb-color6);
	margin: 8px 0 0;
}

.fp-trenner {
	border: 0;
	border-top: 2px solid var(--fp-farbe);
	margin: 24px 0 30px;
}

.fp-karte__ueberschrift {
	font-family: var(--awb-custom_typography_5-font-family);
	font-size: var(--awb-custom_typography_5-font-size);
	letter-spacing: var(--awb-custom_typography_5-letter-spacing);
	text-transform: var(--awb-custom_typography_5-text-transform);
	color: var(--awb-color1);
	margin: 30px 0 12px;
}

.fp-karte__text {
	margin: 0 0 32px;
}

.fp-karte__bild {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--fp-radius);
	margin-top: 20px;
}

/* ---------------------------------------------------------------- Knopf */

.fp-knopf {
	display: block;
	border-radius: var(--fp-radius-klein);
	font-weight: 700;
	background: var(--fp-farbe);
	color: var(--awb-color8);
	text-align: center;
	text-decoration: none;
	padding: 22px 20px 24px;
	border: 2px solid var(--fp-farbe);
	transition: background-color .2s ease, color .2s ease;
}

.fp-knopf:hover,
.fp-knopf:focus {
	background: transparent;
	color: var(--fp-farbe);
}

.fp-knopf--aus {
	background: transparent;
	border-color: var(--awb-color6);
	color: var(--awb-color6);
	cursor: default;
}

/* --------------------------------------------------------------- Listen */

.fp-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.fp-liste__zeile {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 3px 0;
}

.fp-icon {
	flex: 0 0 auto;
	position: relative;
	top: 2px;
}

.fp-liste__zeile--ja {
	color: var(--awb-color1);
}

.fp-liste__zeile--ja .fp-icon,
.fp-liste__zeile--ja i {
	color: var(--awb-color4);
}

.fp-liste__zeile--nein {
	opacity: .55;
}

/* -------------------------------------------------------------- Aktion */

/* Aktions-Badge sitzt ueber dem redaktionellen Badge und ist invertiert,
   damit es sich vom Komplettpaket-Badge unterscheidet. */
.fp-karte__badge--aktion {
	background: var(--awb-color8);
	color: var(--fp-farbe);
	border-bottom: 2px solid var(--fp-farbe);
	letter-spacing: .1em;
}

.fp-karte--aktion {
	border-color: var(--fp-farbe);
}

.fp-schalter__knopf--aktion[aria-pressed="true"] {
	background: var(--awb-color1);
	color: var(--awb-color8);
	border-color: var(--awb-color1);
}

.fp-aktion__name {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--awb-color6);
}

.fp-aktion__rabatt {
	display: inline-block;
	margin: 10px 0 0;
	padding: 4px 10px;
	background: var(--fp-farbe);
	color: var(--awb-color8);
	font-size: 13px;
	font-weight: 700;
}

.fp-block--aktion .fp-gesamt {
	border-left-color: var(--fp-farbe);
}

/* --------------------------------------------------------------- Finder */

/*
 * Kein eigener Rahmen: Der Finder sitzt in einem Avada-Container, der Abstand
 * und Hintergrund bereits mitbringt. Ein zweiter Rahmen wirkt doppelt.
 */
.fp-finder {
	border: 0;
	border-radius: 0;
	background: transparent;
	padding: 0;
}

.fp-finder__titel {
	font-family: var(--awb-typography1-font-family);
	font-size: 40px;
	line-height: 1.1;
	text-transform: var(--awb-typography1-text-transform);
	margin: 0 0 10px;
}

.fp-finder__untertitel {
	max-width: 46em;
	margin: 0 0 32px;
	color: var(--awb-color6);
}

/* Filter links, Ergebnisse rechts. */
.fp-finder__layout {
	display: grid;
	grid-template-columns: minmax(230px, 300px) 1fr;
	gap: 36px;
	align-items: start;
}

.fp-finder__frage {
	margin-bottom: 30px;
}

.fp-finder__label {
	display: block;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--awb-color1);
	margin-bottom: 14px;
}

/*
 * Chips fliessen nebeneinander und wachsen so, dass jede Zeile bis zum Rand
 * gefuellt ist. Damit gibt es weder einen ausgefransten rechten Rand noch die
 * unterschiedlich hohen Zeilen eines festen Rasters.
 */
.fp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.fp-chip {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: transparent;
	border: 1px solid var(--fp-rahmen);
	border-radius: var(--fp-radius-klein);
	color: var(--awb-color1);
	cursor: pointer;
	font: inherit;
	flex: 1 1 auto;
	justify-content: center;
	text-align: center;
	white-space: nowrap;
	font-size: 12.5px;
	line-height: 1.25;

	/*
	 * Ohne Haken mehr Innenabstand, mit Haken weniger. Die Breite bleibt damit
	 * identisch, sonst wuerde beim Auswaehlen die ganze Zeile neu umbrechen.
	 */
	padding: 9px 24px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.fp-chip[hidden] {
	display: none;
}

.fp-chip:hover {
	border-color: var(--awb-color4);
}

.fp-chip[aria-pressed="true"] {
	background: transparent;
	border-color: var(--awb-color4);
	color: var(--awb-color4);
	gap: 6px;
	padding-left: 14px;
	padding-right: 14px;
}

.fp-chip[aria-pressed="true"] .fp-chip__haken {
	color: var(--awb-color4);
}

/*
 * Ohne Auswahl nimmt der Haken keinen Platz ein, sonst bleibt vorne ein Loch.
 *
 * Die Breite wechselt bewusst ohne Uebergang: Der Innenabstand springt sofort
 * um, und eine mitlaufende Breitenanimation liesse den Chip kurz schmaler
 * werden und dann wieder wachsen. Nur die Deckkraft blendet weich ein.
 */
.fp-chip__haken {
	flex: 0 0 auto;
	width: 0;
	opacity: 0;
	transition: opacity .15s ease;
}

.fp-chip[aria-pressed="true"] .fp-chip__haken {
	width: 14px;
	opacity: 1;
}

/*
 * display: flex wuerde das hidden-Attribut aushebeln, deshalb die eigene
 * Regel dafuer. Sonst stehen beide Hinweise dauerhaft da.
 */
.fp-finder__hinweis[hidden] {
	display: none;
}

.fp-finder__hinweis {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--awb-color1);

	/* Padding statt Margin: Absatzregeln des Themes greifen hier nicht. */
	margin: 0;
	padding-top: 28px;
}

.fp-finder__hinweis svg {
	flex: 0 0 auto;
	color: var(--awb-color4);
	position: relative;
	top: 1px;
}

.fp-finder__fest {
	margin: 0 0 24px;
	padding: 10px 16px;
	border-left: 3px solid var(--awb-color4);
	border-radius: 0 var(--fp-radius) var(--fp-radius) 0;
	background: rgba(255, 255, 255, .05);
	font-size: 15px;
}

/* --------------------------------------------------------- Trefferkarten */

.fp-finder__ergebnis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	align-items: stretch;
}

/*
 * Alle Kacheln sehen gleich aus. Ein Angebot unterscheidet sich nur durch
 * das Badge - sonst wirkten die uebrigen Tarife nicht buchbar.
 */
.fp-treffer {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--fp-rahmen);
	border-radius: var(--fp-radius);
	background: rgba(255, 255, 255, .03);
	padding: 24px 22px;
	display: flex;
	flex-direction: column;
}

/* Beide Badges nebeneinander, sie brechen bei Bedarf um. */
.fp-treffer__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

/* Marke der Produktlinie: Umriss, wie die Filter-Chips. */
.fp-treffer__marke {
	background: transparent;
	border: 1px solid var(--awb-color4);
	border-radius: var(--fp-radius-klein);
	color: var(--awb-color4);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	padding: 5px 12px;
	white-space: nowrap;
}

/*
 * Angebot als schraeges Band in der oberen rechten Ecke. Es liegt ausserhalb
 * des Textflusses, damit es die Kachelhoehe nicht veraendert.
 */
/*
 * Das Band wird an den Kartenecken beschnitten. Sichtbar bleibt nur das
 * mittlere Stueck, deshalb liegt der Text ueber das seitliche Padding weit
 * genug innen - sonst schneiden die Kanten die ersten und letzten Buchstaben ab.
 */
.fp-treffer__ecke {
	position: absolute;
	top: 22px;
	right: -62px;
	width: 190px;
	transform: rotate(45deg);
	background: var(--awb-color4);
	color: var(--awb-color8);
	text-align: center;
	padding: 4px 42px 5px;
	pointer-events: none;
	line-height: 1.1;
}

/* Zwei Zeilen: Wort oben, Datum kleiner darunter. */
.fp-treffer__ecke-wort,
.fp-treffer__ecke-datum {
	display: block;
	text-transform: uppercase;
}

.fp-treffer__ecke-wort {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .05em;
}

.fp-treffer__ecke-datum {
	font-size: 9px;
	font-weight: 600;
}

/* Platz fuer das Band, damit die Marke nicht darunter laeuft. */
.fp-treffer--angebot .fp-treffer__marken {
	padding-right: 54px;
}

.fp-treffer__name {
	font-family: var(--awb-typography1-font-family);
	font-size: 24px;
	line-height: 1.15;
	margin-bottom: 4px;
}

/* Leistungen als Checkliste. */
.fp-treffer__liste {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	font-size: 14px;
	line-height: 1.5;
}

.fp-treffer__liste li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 2px 0;
}

.fp-treffer__liste li svg {
	flex: 0 0 auto;
	color: var(--awb-color4);
}

/* Ein Satz zu den Trainingsorten, bewusst klein. */
.fp-treffer__training {
	margin: 14px 0 16px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--awb-color6);
}

/* Info-Symbol neben dem Tarifnamen. */
.fp-treffer__name {
	display: flex;
	align-items: center;
	gap: 8px;
}

.fp-treffer__i {
	appearance: none;
	background: none;
	border: 0;
	padding: 2px;
	margin: 0;
	display: inline-flex;
	color: var(--awb-color4);
	cursor: pointer;
	line-height: 0;
}

.fp-treffer__i:hover,
.fp-treffer__i[aria-expanded="true"] {
	color: var(--awb-color1);
}

.fp-treffer__hinweis {
	margin: 6px 0 4px;
	padding: 8px 12px;
	border-left: 2px solid var(--awb-color4);
	background: rgba(255, 255, 255, .05);
	font-size: 13px;
	line-height: 1.45;
}

.fp-treffer__hinweis[hidden] {
	display: none;
}

.fp-popup__hinweis {
	margin-top: 10px;
	padding: 8px 12px;
	border-left: 2px solid var(--awb-color4);
	background: rgba(255, 255, 255, .05);
	font-size: 13px;
	line-height: 1.45;
}

/* Vertragsstandort: bestimmt den Buchungslink, deshalb deutlich gesetzt. */
.fp-treffer__ort {
	font-size: 15px;
	font-weight: 700;
	margin-top: 2px;
}

.fp-treffer__laufzeit {
	font-size: 13px;
	color: var(--awb-color6);
	margin-bottom: 16px;
}

/* Leistungen als Punktliste, das spart gegenueber einer Aufzaehlung Platz. */
.fp-treffer__punkte {
	font-size: 13px;
	line-height: 1.6;
	margin-bottom: 16px;
	color: var(--awb-color6);
}

.fp-treffer__punkt {
	margin: 0 5px;
	opacity: .5;
}

.fp-treffer__preis {
	line-height: 1.05;
	margin-bottom: 16px;
}

.fp-treffer__betrag {
	font-family: var(--awb-typography1-font-family);
	font-size: 34px;
	color: var(--awb-color4);
}

.fp-treffer__einheit {
	font-size: 17px;
	margin-left: 4px;
	color: var(--awb-color6);
}

/* Gesamtpreis: eigener kleiner Kasten, ruhig aber lesbar. */
.fp-treffer__gesamt {
	background: rgba(255, 255, 255, .07);
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--awb-color6);
	margin-bottom: 14px;
}

.fp-treffer__gesamt-label {
	text-transform: uppercase;
	letter-spacing: .06em;
}

.fp-treffer__label {
	font-size: 15px;
	font-weight: 700;
	color: var(--awb-color1);
	margin: 18px 0 7px;
}

.fp-treffer__label:first-of-type {
	margin-top: 0;
}

.fp-treffer__label + .fp-treffer__punkte {
	margin-top: 2px;
}

.fp-treffer__label + /* Der Hinweis ueber den Ausweichstandorten ist ein ganzer Satz. */
.fp-treffer__label {
	line-height: 1.45;
}

.fp-treffer__orte {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	font-size: 14px;
}

.fp-treffer__orte li {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 2px 0;
}

.fp-treffer__orte li svg {
	flex: 0 0 auto;
	color: var(--awb-color4);
}

.fp-pin {
	flex: 0 0 auto;
	color: var(--awb-color4);
}

.fp-treffer .fp-knopf {
	margin-top: auto;
	padding: 12px 18px;
	font-size: 14px;
}

/* --------------------------------------------------- Info und Popup */

.fp-treffer__info {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--awb-color6);
	color: var(--awb-color1);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	padding: 0 0 2px;
	margin: 0 0 20px;
	align-self: flex-start;
}

.fp-treffer__info:hover {
	border-color: var(--awb-color1);
}

.fp-popup {
	/*
	 * Position ausdruecklich setzen. Die Voreinstellung des Browsers fuer
	 * dialog wird von Theme-Regeln ueberschrieben, dann erscheint das Popup
	 * am Seitenanfang statt im Fenster.
	 */
	position: fixed;
	inset: 0;
	margin: auto;
	z-index: 100000;

	/* Breit genug fuer zwei Spalten, damit nicht gescrollt werden muss. */
	width: min(820px, calc(100vw - 32px));
	max-width: min(820px, calc(100vw - 32px));
	height: fit-content;
	max-height: min(90vh, calc(100dvh - 32px));
	overflow: auto;
	border: 1px solid var(--fp-rahmen);
	border-radius: var(--fp-radius);
	background: var(--awb-color8);
	color: var(--awb-color1);
	padding: 26px 28px;
}

/* Nur ein geoeffneter Dialog ist sichtbar. */
.fp-popup:not([open]) {
	display: none;
}

.fp-popup::backdrop {
	background: rgba(0, 0, 0, .75);
}

/* Ersatzhintergrund, falls der Dialog nicht in die oberste Ebene kommt. */
.fp-popup--ersatz::before {
	content: "";
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .75);
	z-index: -1;
}

.fp-popup__inhalt {
	position: relative;
}

.fp-popup__zu {
	position: absolute;
	top: 10px;
	right: 12px;
	appearance: none;
	background: none;
	border: 0;
	color: var(--awb-color6);
	cursor: pointer;
	font-size: 26px;
	line-height: 1;
	padding: 4px 8px;
}

.fp-popup__zu:hover {
	color: var(--awb-color1);
}

.fp-popup__kopf {
	padding-right: 36px;
	margin-bottom: 18px;
}

.fp-popup__name {
	font-family: var(--awb-typography1-font-family);
	font-size: 24px;
	line-height: 1.15;
}

.fp-popup__laufzeit {
	font-size: 13px;
	color: var(--awb-color6);
	margin-top: 3px;
}

/* Zwei Spalten: Standorte links, Leistungen und Kosten rechts. */
.fp-popup__raster {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 26px;
}

/*
 * Deutlich mehr Abstand nach oben als nach unten. Sonst wirkt eine
 * Zwischenueberschrift wie der Schluss des Blocks darueber statt wie der
 * Anfang des naechsten.
 */
.fp-popup__titel {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--awb-color6);
	margin: 28px 0 8px;
}

.fp-popup__titel:first-child {
	margin-top: 0;
}

.fp-popup__orte,
.fp-popup__liste,
.fp-popup__kosten {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13px;
	line-height: 1.45;
}

.fp-popup__orte li {
	padding: 0 0 8px;
}

.fp-popup__orte strong {
	display: block;
}

.fp-popup__orte span {
	color: var(--awb-color6);
	font-size: 12px;
}

/* Leistungsliste zweispaltig, damit acht Zeilen wenig Hoehe brauchen. */
.fp-popup__liste {
	columns: 2;
	column-gap: 16px;
}

.fp-popup__liste li {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 1px 0;
	break-inside: avoid;
}

.fp-popup__liste li svg {
	flex: 0 0 auto;
	position: relative;
	top: 2px;
}

.fp-popup__liste .ist-ja svg {
	color: var(--awb-color4);
}

.fp-popup__liste .ist-nein {
	opacity: .45;
}

.fp-popup__kosten li {
	padding: 1px 0;
}

.fp-popup__kosten .ist-summe {
	margin-top: 6px;
	padding-top: 6px;
	border-top: 1px solid var(--fp-rahmen);
	font-weight: 700;
	color: var(--awb-color1);
}

.fp-popup__fuss {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--fp-rahmen);
}

.fp-popup__folge {
	font-size: 12px;
	color: var(--awb-color6);
}

.fp-popup .fp-knopf {
	display: inline-block;
	margin: 0;
	padding: 13px 26px;
	font-size: 15px;
}


/* Rechte Spalte: Kacheln und darunter der Beratungshinweis. */
.fp-finder__rechts {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.fp-finder__beratung {
	margin: 0;
	text-align: center;
	font-size: 15px;
	line-height: 1.5;
	color: var(--awb-color6);
}

.fp-finder__beratung[hidden] {
	display: none;
}

.fp-finder__beratung a {
	color: var(--awb-color4);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.fp-finder__beratung a:hover {
	text-decoration: none;
}

/* Steht anstelle der Kacheln, deshalb ueber die volle Breite des Rasters. */
.fp-hinweis {
	grid-column: 1 / -1;
	margin: 0 auto;
	max-width: 34em;
	padding: 12px 0;
	text-align: center;
	line-height: 1.5;
	color: var(--awb-color1);
}

.fp-hinweis__titel {
	font-size: 19px;
	font-weight: 700;
	margin-bottom: 6px;
}

.fp-hinweis__text {
	margin: 0;
	font-size: 15px;
	color: var(--awb-color6);
}

.fp-hinweis__link {
	color: var(--awb-color4);
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.fp-hinweis__link:hover {
	text-decoration: none;
}

/* ------------------------------------------------------- Farbabsicherung */

/*
 * Das Element liegt immer auf dunklem Grund. Avada setzt fuer Ueberschriften
 * und Textbausteine eigene, teils dunkle Farben - deshalb hier ausdruecklich
 * hell. Es werden nur Elemente innerhalb der beiden Container angefasst.
 */

.fp-tarife,
.fp-tarife p,
.fp-tarife li,
.fp-tarife span,
.fp-tarife div,
.fp-finder,
.fp-finder p,
.fp-finder li,
.fp-finder div {
	color: var(--awb-color1);
}

.fp-karte__ueberschrift,
.fp-finder__titel,
.fp-treffer__name {
	color: var(--awb-color1);
}

/* Bewusst gedaempft. */
.fp-preis__gesamt,
.fp-gesamt__label,
.fp-gesamt__zusatz,
.fp-details,
.fp-details li,
.fp-fussnote,
.fp-block__leer,
.fp-finder__hinweis,
.fp-treffer__gesamt,
.fp-treffer__gesamt-label,
.fp-treffer__laufzeit,
.fp-popup__laufzeit,
.fp-popup__titel,
.fp-popup__kosten,
.fp-aktion__name,
.fp-aktion span {
	color: var(--awb-color6);
}

/* Bewusst in der Akzentfarbe. */
.fp-preis,
.fp-karte__titel {
	color: var(--fp-farbe);
}

.fp-finder .fp-treffer__betrag,
.fp-finder .fp-treffer__i {
	color: var(--awb-color4);
}

.fp-finder .fp-treffer__i:hover,
.fp-finder .fp-treffer__i[aria-expanded="true"],
.fp-finder .fp-treffer__hinweis,
.fp-finder .fp-popup__hinweis {
	color: var(--awb-color1);
}

.fp-finder .fp-treffer__ort {
	color: var(--awb-color1);
}

.fp-finder .fp-treffer__punkte,
.fp-finder .fp-treffer__training {
	color: var(--awb-color6);
}

.fp-finder .fp-treffer__label {
	color: var(--awb-color1);
}

.fp-finder .fp-treffer__einheit {
	color: var(--awb-color6);
}

.fp-finder .fp-popup__name {
	color: var(--awb-color1);
}

.fp-finder .fp-treffer__marke {
	color: var(--awb-color4);
}

.fp-finder .fp-chip[aria-pressed="true"],
.fp-finder .fp-chip[aria-pressed="true"] span {
	color: var(--awb-color4);
}

.fp-finder .fp-finder__label,
.fp-finder .fp-hinweis,
.fp-finder .fp-hinweis__titel {
	color: var(--awb-color1);
}

.fp-finder .fp-hinweis__text {
	color: var(--awb-color6);
}

.fp-finder .fp-hinweis__link,
.fp-finder .fp-finder__beratung a {
	color: var(--awb-color4);
}

.fp-finder .fp-finder__beratung {
	color: var(--awb-color6);
}

/*
 * Auf farbigem Grund muss der Text dunkel bleiben.
 *
 * Die Auswahl ist bewusst mit dem Container davor geschrieben. Ohne ihn
 * gewinnt die allgemeine Regel .fp-finder div, und das Badge bekaeme weisse
 * Schrift auf gelbem Grund.
 */
.fp-tarife .fp-schalter__knopf[aria-pressed="true"],
.fp-tarife .fp-karte__badge,
.fp-tarife .fp-treffer__ecke,
.fp-tarife .fp-treffer__ecke span,
.fp-tarife .fp-aktion__rabatt,
.fp-tarife .fp-knopf,
.fp-finder .fp-schalter__knopf[aria-pressed="true"],
.fp-finder .fp-karte__badge,
.fp-finder .fp-treffer__ecke,
.fp-finder .fp-treffer__ecke span,
.fp-finder .fp-aktion__rabatt,
.fp-finder .fp-knopf {
	color: var(--awb-color8);
}

.fp-tarife .fp-knopf:hover,
.fp-tarife .fp-knopf:focus,
.fp-finder .fp-knopf:hover,
.fp-finder .fp-knopf:focus {
	color: var(--fp-farbe);
}

.fp-tarife .fp-karte__badge--aktion,
.fp-finder .fp-karte__badge--aktion {
	color: var(--fp-farbe);
}

.fp-tarife .fp-gesamt__wert,
.fp-tarife .fp-treffer__gesamt strong,
.fp-tarife .fp-treffer__name,
.fp-finder .fp-gesamt__wert,
.fp-finder .fp-treffer__gesamt strong,
.fp-finder .fp-treffer__name,
.fp-finder .fp-finder__titel {
	color: var(--awb-color1);
}

/* Nur fuer Screenreader. Die Haken und Kreuze sind aria-hidden, deshalb
   muss der Unterschied als Text mitkommen. */
.fp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------- Standort-Checkliste */

/*
 * Schrift bewusst geerbt: Das Element steht mitten im Fliesstext einer Seite
 * und soll aussehen wie der Text darum herum. Eine eigene Groesse gibt es nur
 * ueber den Parameter schrift.
 */
.fp-standort {
	--fp-farbe: var(--awb-color4);
	color: var(--awb-color1);
	font: inherit;
	line-height: 1.4;
}

.fp-standort__liste .fp-liste__zeile span {
	font-size: inherit;
}

.fp-standort__titel {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 12px;
}

/* Kein fester Abstand: Die Zeilenhoehe von 1.4 traegt den Abstand und
   skaliert mit der Schriftgroesse. */
.fp-standort__liste .fp-liste__zeile {
	padding: 0;
}

.fp-standort__liste .fp-liste__zeile--ja .fp-icon,
.fp-standort__liste .fp-liste__zeile--ja i {
	color: var(--awb-color4);
}

.fp-standort__liste .fp-liste__zeile--nein {
	opacity: .55;
}

.fp-standort .fp-liste__zeile,
.fp-standort .fp-liste__zeile span,
.fp-standort__titel {
	color: var(--awb-color1);
}

/*
 * Auf hellem Grund: dunkle Schrift, dunkle Haken. Gelb auf Weiss ist nicht
 * lesbar, deshalb hier bewusst keine Akzentfarbe.
 */
.fp-standort--hell,
.fp-standort--hell .fp-liste__zeile,
.fp-standort--hell .fp-liste__zeile span,
.fp-standort--hell .fp-standort__titel {
	color: var(--awb-color8);
}

.fp-standort--hell .fp-liste__zeile--ja .fp-icon,
.fp-standort--hell .fp-liste__zeile--ja i {
	color: var(--awb-color8);
}

.fp-standort--hell .fp-liste__zeile--nein {
	opacity: .45;
}

/* ------------------------------------------------------------ Umbrueche */

/* Tablet: Filter wandern nach oben, Ergebnisse zweispaltig. */
@media (max-width: 1100px) {
	.fp-finder__layout {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	/* Filter liegt ueber die volle Breite, die Chips verteilen sich darauf. */
	.fp-chips {
		gap: 8px;
	}

	.fp-karten,
	.fp-finder__ergebnis {
		grid-template-columns: repeat(2, 1fr);
	}

	.fp-finder__titel {
		font-size: 32px;
	}
}

/* Handy: alles untereinander und kleinere Schriften. */
@media (max-width: 700px) {
	.fp-tarife,
	.fp-finder {
		--fp-abstand: 20px;
	}

	.fp-finder__layout {
		gap: 22px;
	}

	.fp-karten,
	.fp-finder__ergebnis {
		grid-template-columns: 1fr;
	}

	/*
	 * Filter kleiner halten. Bei voller Groesse braucht eine Chipreihe auf
	 * schmalen Bildschirmen drei Zeilen.
	 */
	.fp-finder__label {
		font-size: 15px;
		margin-bottom: 10px;
	}

	.fp-finder__frage {
		margin-bottom: 22px;
	}

	.fp-chip {
		font-size: 12px;
		padding: 7px 12px;
	}

	.fp-chip[aria-pressed="true"] .fp-chip__haken {
		width: 12px;
	}

	.fp-finder__hinweis {
		font-size: 13px;
		padding-top: 20px;
	}

	.fp-finder__titel {
		font-size: 26px;
	}

	.fp-hinweis__titel {
		font-size: 17px;
	}

	.fp-hinweis__text,
	.fp-finder__beratung {
		font-size: 14px;
	}

	.fp-treffer {
		padding: 20px 18px;
	}

	.fp-treffer__name {
		font-size: 21px;
	}

	.fp-treffer__betrag {
		font-size: 30px;
	}

	.fp-treffer__einheit {
		font-size: 15px;
	}

	.fp-treffer .fp-knopf {
		font-size: 13px;
		padding: 11px 16px;
	}

	.fp-chip {
		font-size: 12px;
		padding: 8px 18px;
	}

	.fp-chip[aria-pressed="true"] {
		padding-left: 10px;
		padding-right: 10px;
	}

	.fp-preis__wert {
		font-size: 44px;
	}

	.fp-gesamt__wert {
		font-size: 21px;
	}

	.fp-karten {
		display: flex;
		flex-direction: column;
	}

	.fp-karte--hervor {
		order: -1;
	}

	.fp-popup {
		padding: 22px 20px;
	}

	.fp-popup__raster {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.fp-popup__liste {
		columns: 1;
	}
}