/* =============================================================================
   sa-marken: Markenuebersicht (/marken/), Marken-Hubs (/marken/<marke>/),
   Rueckverweis auf der Einzelanzeige (.sa-mk-back) und sitewide Fussleiste
   (.sa-mk-hubs).

   Farb-Tokens bewusst als feste Hex-Werte und 1:1 aus
   sa-moderation/frontend/seo/seo.css uebernommen (Gold #eab11a, Tinte #14213d,
   Linie #e5e7ec, gedaempft #6b7280). Keine var(--sa-*): der Archiv-Skin von
   sa-moderation hat einen eigenen Kill-Switch und darf diese Datei nicht
   mitreissen, wenn er separat abgeschaltet wird.

   Kontrast geprueft: #14213d auf #fff und #6b7280 auf #fff erfuellen beide
   WCAG AA fuer Fliesstext; die Preis-Pille nutzt #1a1a1a auf #eab11a.
   ============================================================================= */

.sa-mk-wrap {
	background: #f7f8f9;
}

.sa-mk {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 56px;
	color: #14213d;
	font-size: 16px;
	line-height: 1.6;
}

.sa-mk-crumbs {
	font-size: 13.5px;
	color: #6b7280;
	margin-bottom: 10px;
}

.sa-mk-crumbs a {
	color: #6b7280;
	text-decoration: none;
}

.sa-mk-crumbs a:hover {
	color: #14213d;
	text-decoration: underline;
}

.sa-mk-h1 {
	font-size: clamp(24px, 4.2vw, 34px);
	line-height: 1.22;
	font-weight: 800;
	margin: 0 0 12px;
	color: #14213d;
}

.sa-mk-intro {
	max-width: 76ch;
	margin: 0 0 26px;
	color: #3d4759;
	font-size: 15.5px;
}

/* Ohne eigene Regel erbt der Link im Einleitungstext die Theme-Linkfarbe
   (Magenta) und faellt aus der Farbwelt der Seite — live beobachtet. */
.sa-mk-intro a {
	color: #14213d;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: #eab11a;
}

.sa-mk-intro a:hover {
	color: #c8920a;
}

.sa-mk-empty {
	padding: 22px;
	background: #fff;
	border: 1px solid #e5e7ec;
	border-radius: 14px;
}

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

.sa-mk-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
	gap: 14px;
	margin: 0 0 28px;
}

.sa-mk-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e5e7ec;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sa-mk-card:hover {
	border-color: #eab11a;
	box-shadow: 0 6px 18px rgba(20, 33, 61, .08);
	transform: translateY(-2px);
}

.sa-mk-card__thumb {
	display: block;
	aspect-ratio: 4 / 3;
	background: #eef0f3;
	overflow: hidden;
}

.sa-mk-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sa-mk-card__body {
	display: block;
	padding: 10px 12px 13px;
}

.sa-mk-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	color: #14213d;
	margin-bottom: 6px;
}

.sa-mk-card__price {
	display: inline-block;
	background: #eab11a;
	color: #1a1a1a;
	font-weight: 700;
	font-size: 13.5px;
	border-radius: 999px;
	padding: 2px 10px;
	margin-right: 6px;
}

.sa-mk-card__meta {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: #6b7280;
}

/* ---------- Seitenleiste ---------- */

.sa-mk-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 0 0 36px;
}

.sa-mk-pager a,
.sa-mk-pager__cur {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: 10px;
	border: 1px solid #e5e7ec;
	background: #fff;
	text-decoration: none;
	font-size: 14.5px;
	font-weight: 600;
	color: #14213d;
}

.sa-mk-pager a:hover {
	border-color: #eab11a;
	background: #fff8e6;
}

.sa-mk-pager__cur {
	background: #eab11a;
	border-color: #eab11a;
	color: #1a1a1a;
	font-weight: 700;
}

/* ---------- Markenverzeichnis ---------- */

.sa-mk-index {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.sa-mk-index a {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: #fff;
	border: 1px solid #e5e7ec;
	border-radius: 14px;
	padding: 14px 16px;
	text-decoration: none;
	color: #14213d;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sa-mk-index a:hover {
	border-color: #eab11a;
	box-shadow: 0 6px 18px rgba(20, 33, 61, .08);
}

.sa-mk-index__name {
	font-weight: 700;
	font-size: 16px;
}

.sa-mk-index__n {
	font-size: 13.5px;
	color: #6b7280;
}

.sa-mk-index__p {
	font-size: 13px;
	color: #6b7280;
}

/* ---------- Querverweise am Seitenende ---------- */

.sa-mk-other {
	border-top: 1px solid #e5e7ec;
	padding-top: 22px;
}

.sa-mk-other h2 {
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #14213d;
}

.sa-mk-other ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sa-mk-other li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #e5e7ec;
	border-radius: 999px;
	padding: 6px 13px;
	font-size: 13.5px;
	font-weight: 600;
	color: #14213d;
	text-decoration: none;
}

.sa-mk-other li a:hover {
	border-color: #eab11a;
	background: #fff8e6;
}

.sa-mk-other li span {
	color: #6b7280;
	font-weight: 500;
}

/* ---------- Rueckverweis auf der Einzelanzeige ---------- */

.sa-mk-back {
	max-width: 1200px;
	margin: 0 auto 26px;
	padding: 0 20px;
}

.sa-mk-back a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #e5e7ec;
	border-left: 3px solid #eab11a;
	border-radius: 12px;
	padding: 12px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: #14213d;
	text-decoration: none;
}

.sa-mk-back a:hover {
	border-color: #eab11a;
	background: #fff8e6;
}

/* ---------- Sitewide Fussleiste ---------- */

.sa-mk-hubs {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px 26px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	border-top: 1px solid #e5e7ec;
	font-size: 12.5px;
	line-height: 1.5;
}

.sa-mk-hubs__lbl {
	font-weight: 700;
	color: #14213d;
	margin-right: 2px;
}

@media (max-width: 767px) {
	.sa-mk-hubs { padding: 16px 14px 20px; font-size: 12px; }
}

/* Farben exakt wie .sa-seo-hubs aus sa-moderation/frontend/seo/seo.css: beide
   Leisten stehen im Fussbereich direkt uebereinander, sobald sa_seo_hublinks
   aktiv ist, und duerfen dort nicht wie zwei verschiedene Bausteine wirken. */
.sa-mk-hubs a {
	color: #667085;
	text-decoration: none;
}

.sa-mk-hubs a:hover {
	color: #c8920a;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.sa-mk {
		padding: 20px 14px 40px;
	}

	.sa-mk-grid {
		grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
		gap: 10px;
	}

	.sa-mk-back {
		padding: 0 14px;
	}
}