/* CTA-Manager 1.9.0 (29.10.2026): Schnellvergleich/Top-Empfehlung .fa-top, Brücke .fa-bruecke, Karten-Check .fa-kc,
   Bonus-Alarm .fa-bonusalarm, verlinkte Logos/Namen in allen Kacheln.
   Farben nach CI-GUIDE: Text Navy-Grau, Merkmal Blau, Button Coral, Linien Grau. Kein Verlauf, kein border-left. */

/* ---- Logo und Name verlinkt: sieht aus wie vorher, nur klickbar ---- */
html body a.fa-cta-name,
html body a.fa-cta-name:visited {
	color: inherit !important;
	text-decoration: none !important;
	font: inherit;
}
html body a.fa-cta-name:hover {
	text-decoration: underline !important;
	text-underline-offset: 3px;
}
html body a.fa-cta-name::after,
html body a.fa-cta-logo::after {
	content: none !important;
}
html body .img-content > a.fa-cta-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none !important;
}
html body a.fa-st__name {
	display: block;
}
html body a.fa-kz__logo,
html body a.fa-st__logo {
	text-decoration: none !important;
}

/* ---- Mini-Karten: Schnellvergleich (Beitrag, nur Handy), Startseite, Kategorie ---- */
html body .fa-top {
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 0 18px;
	font-family: var(--font-body, inherit);
	color: var(--c-text, #1c2230);
}
html body .fa-top__titel {
	margin: 0 0 8px !important;
	padding: 0 2px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	color: #5d6675 !important;
}
html body .fa-top__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(212px, 74%);
	gap: 10px;
	margin: 0 -16px;
	padding: 2px 16px 6px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 0 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
html body .fa-top__track::-webkit-scrollbar {
	display: none;
}
html body .fa-top__karte {
	display: flex;
	flex-direction: column;
	gap: 6px;
	box-sizing: border-box;
	min-width: 0;
	padding: 12px;
	background: #fff;
	border: 1px solid var(--c-border, #e3e6ee);
	border-radius: var(--r-lg, 16px);
	scroll-snap-align: start;
}
html body .fa-top__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	box-sizing: border-box;
	height: 40px;
	text-decoration: none !important;
}
html body .fa-top__logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 120px !important;
	max-height: 40px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	object-fit: contain;
}
html body .fa-top__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-text, #1c2230);
}
html body .fa-top__merkmal {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	flex: 1 0 auto;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	color: #1750AE !important;
}
html body .fa-top__label {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: #5d6675;
}
html body a.fa-top__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 42px;
	margin: 4px 0 0;
	padding: 0 14px;
	background: #FF5A4F;
	border: 0;
	border-radius: var(--r-pill, 999px);
	color: #fff !important;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none !important;
	white-space: nowrap;
}
html body a.fa-top__btn:hover,
html body a.fa-top__btn:focus-visible {
	background: #E8442F;
	color: #fff !important;
}
html body a.fa-top__btn::after {
	content: none !important;
}
html body .fa-top .fa-ad-footnote {
	margin-top: 4px !important;
}

/* Beitrag: nur Handy, im ersten Bildschirm (Desktop zeigt die Kacheln ohnehin früh) */
html body .fa-top--top,
html body .fa-top--eins {
	margin: 4px 0 20px;
}
@media (min-width: 768px) {
	html body .fa-top--top,
	html body .fa-top--eins {
		display: none !important;
	}
}

/* Startseite und Kategorie: Handy wischbar, ab Tablet drei Spalten */
html body .fa-top-wrap {
	box-sizing: border-box;
	margin-top: 22px;
	margin-bottom: 8px;
}
/* Startseite: die Kategorie-Leiste zieht sich per negativem margin-top in den Hero und lag sonst über den Kacheln */
html body .fa-top-wrap:has(.fa-top--home) {
	margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
html body .fa-top-wrap:has(.fa-top--home) + .container .cat-strip-wrap {
	margin-top: 0;
}
html body .fa-top-wrap--kat {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding: 0 16px;
}
@media (min-width: 768px) {
	html body .fa-top--home .fa-top__track,
	html body .fa-top--kategorie .fa-top__track {
		grid-auto-flow: row;
		grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
		grid-auto-columns: auto;
		margin: 0;
		padding: 0;
		overflow: visible;
	}
	html body .fa-top__karte {
		padding: 16px;
	}
	html body .fa-top--home .fa-top__logo img,
	html body .fa-top--kategorie .fa-top__logo img {
		max-width: 150px !important;
		max-height: 44px !important;
	}
}

/* Startseite mobil: der Hero füllte allein den ersten Bildschirm (Angebote erst bei 860 px). Einleitung und Zahlenleiste
   nur auf dem Handy ausblenden und den Hero enger setzen, damit „Aktuell meistgeklickt“ im ersten Bildschirm beginnt. */
@media (max-width: 767px) {
	body:has(.fa-top--home) .hero .lead,
	body:has(.fa-top--home) .hero .hero-trust {
		display: none !important;
	}
	body:has(.fa-top--home) .hero .hero-inner {
		padding-block: 2rem 1.75rem !important;
	}
	html body .fa-top-wrap:has(.fa-top--home) {
		margin-top: 16px;
	}
}

/* /kreditkarte/ mobil: Angebote und Beiträge vor dem langen Einführungstext (Quickback 65 %) */
@media (max-width: 767px) {
	body.category-kreditkarte main.fa-archive {
		display: flex;
		flex-direction: column;
	}
	body.category-kreditkarte main.fa-archive > .fa-cat-intro {
		order: 5;
	}
}

/* ---- Brücke unter dem ersten Modul ---- */
html body .fa-bruecke {
	margin: 12px 0 24px !important;
	padding: 0 4px !important;
	font-size: 15px !important;
	line-height: 1.45 !important;
}
html body a.fa-bruecke__link {
	color: #1750AE !important;
	font-weight: 600;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* ---- Karten-Check ---- */
html body .fa-kc {
	box-sizing: border-box;
	margin: 28px 0;
	font-family: var(--font-body, inherit);
	color: var(--c-text, #1c2230);
}
html body #amex-card-models-kartencheck {
	padding: 18px 16px 16px;
	background: #fff;
	border: 1px solid var(--c-border, #e3e6ee);
	border-radius: var(--r-lg, 16px);
}
html body .fa-kc [hidden] {
	display: none !important;
}
html body .fa-kc__kicker {
	margin: 0 0 4px !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #1750AE !important;
}
html body .fa-kc__frage,
html body .fa-kc__titel {
	margin: 0 0 12px !important;
	font-size: 18px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: var(--c-text, #1c2230) !important;
}
html body .fa-kc__nr {
	display: inline-block;
	margin-right: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #5d6675;
}
html body .fa-kc__opts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
html body .fa-kc__opt {
	min-height: 44px;
	margin: 0;
	padding: 8px 16px;
	background: #fff;
	border: 1.5px solid #1750AE;
	border-radius: var(--r-pill, 999px);
	box-shadow: none;
	color: #1750AE;
	font: inherit;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}
html body .fa-kc__opt:hover,
html body .fa-kc__opt:focus-visible,
html body .fa-kc__opt[aria-pressed="true"] {
	background: #1750AE;
	color: #fff;
}
html body .fa-kc__liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
html body .fa-kc__karte {
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: 8px 12px;
	align-items: start;
	padding: 12px;
	border: 1px solid #eef0f4;
	border-radius: 12px;
}
html body .fa-kc__karte.ist-erste {
	border: 2px solid #1750AE;
}
html body .fa-kc__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 88px;
	aspect-ratio: 3 / 2;
	padding: 3px;
	background: #fff;
	border: 1px solid #eef0f4;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none !important;
}
html body .fa-kc__logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	object-fit: contain;
}
html body .fa-kc__text {
	min-width: 0;
}
html body .fa-kc__name {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}
html body .fa-kc__kern,
html body .fa-kc__geb,
html body .fa-kc__warum {
	margin: 3px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
}
html body .fa-kc__kern {
	color: #1750AE !important;
}
html body .fa-kc__geb,
html body .fa-kc__warum {
	color: #5d6675 !important;
}
html body .fa-kc__warum:empty {
	display: none;
}
html body a.fa-kc__btn {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 18px;
	background: #FF5A4F;
	border-radius: var(--r-pill, 999px);
	color: #fff !important;
	font-size: 14.5px;
	font-weight: 700;
	text-decoration: none !important;
}
html body a.fa-kc__btn:hover,
html body a.fa-kc__btn:focus-visible {
	background: #E8442F;
}
html body a.fa-kc__btn::after {
	content: none !important;
}
html body .fa-kc__neu {
	margin: 12px 0 0;
	padding: 6px 0;
	background: none;
	border: 0;
	box-shadow: none;
	color: #1750AE;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}
html body .fa-kc .fa-ad-footnote {
	margin-top: 8px !important;
}
@media (min-width: 768px) {
	html body .fa-kc__karte {
		grid-template-columns: 140px minmax(0, 1fr) auto;
		align-items: center;
	}
	html body .fa-kc__logo {
		width: 140px;
		aspect-ratio: 5 / 2;
	}
	html body a.fa-kc__btn {
		grid-column: auto;
	}
}

/* ---- Bonus-Alarm an der Kachel (fa-push.js gibt ihn frei) ---- */
html body .fa-bonusalarm[hidden] {
	display: none !important;
}
html body .fa-bonusalarm {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	box-sizing: border-box;
	width: calc(100% - 24px);
	min-height: 40px;
	margin: 10px 12px 4px;
	padding: 6px 12px;
	background: #fff;
	border: 1px solid #1750AE;
	border-radius: var(--r-pill, 999px);
	box-shadow: none;
	color: #1750AE;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	text-align: center;
	cursor: pointer;
}
html body .fa-bonusalarm:hover,
html body .fa-bonusalarm:focus-visible {
	background: #EAF1FD;
}
html body .fa-bonusalarm svg {
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}
html body .fa-mr__card .fa-bonusalarm {
	width: 100%;
	margin: 10px 0 0;
}