/* Affiliato Semantic: Footer-Recirculation + Smart Up-Next. */
.tba-recirc { margin: 2.6rem 0 1rem; padding: 1.4rem 1.5rem 1.6rem; border-radius: 22px;
  border: 2px solid transparent;
  background-image: linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.97)), linear-gradient(135deg, #6366f1, #06b6d4);
  background-origin: border-box; background-clip: padding-box, border-box;
  box-shadow: 0 14px 40px rgba(16,24,40,.12), 0 4px 10px rgba(99,102,241,.08); }
/* Überschrift im Foxiz-Sektions-Stil: Punkt + Text + kurze dicke Unterstreichung. */
.tba-recirc-label { position: relative; display: inline-block; font-size: 1.35rem; font-weight: 800;
  letter-spacing: .01em; color: inherit; margin-bottom: 1.4rem; padding-bottom: .55rem; }
.tba-recirc-label::before { content: ""; display: inline-block; width: .52em; height: .52em; border-radius: 50%;
  background: var(--g-color, #5e2ced); margin-right: .55em; vertical-align: .08em; }
.tba-recirc-label::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 4px;
  border-radius: 99px; background: var(--g-color, #5e2ced); }
.tba-recirc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 700px) { .tba-recirc-grid { grid-template-columns: 1fr; } }
/* Karten schlicht — der Gradient-Rahmen sitzt am Container (wie Up-Next-Box). */
.tba-recirc-card { display: block; text-decoration: none !important; border-radius: 16px; overflow: hidden;
  background: #fff; border: 1px solid rgba(17,24,39,.07);
  box-shadow: 0 5px 18px rgba(16,24,40,.07); transition: transform .15s, box-shadow .15s; }
.tba-recirc-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16,24,40,.14); }
.tba-recirc-thumb { display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.tba-recirc-body { display: block; padding: .85rem 1rem 1rem; }
.tba-recirc-title { display: block; font-size: 1.06rem; font-weight: 700; line-height: 1.4;
  color: #1d2230 !important; text-decoration: none !important; }
.tba-recirc-card:hover .tba-recirc-title { color: #4f46e5 !important; }
.tba-recirc-meta { display: block; margin-top: .4rem; font-size: .76rem; font-weight: 600; color: #6b7280; }
[data-theme="dark"] .tba-recirc-label::before, [data-theme="dark"] .tba-recirc-label::after { background: #66fcf1; }
[data-theme="dark"] .tba-recirc-meta { color: #9aa3b5; }
[data-theme="dark"] .tba-recirc { background-image: linear-gradient(rgba(24,28,40,.97), rgba(24,28,40,.97)), linear-gradient(135deg, #818cf8, #66fcf1); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
[data-theme="dark"] .tba-recirc-card { background: rgba(34,39,55,.92); border-color: rgba(255,255,255,.08); box-shadow: 0 5px 18px rgba(0,0,0,.35); }
[data-theme="dark"] .tba-recirc-title { color: #e7e9f2 !important; }
[data-theme="dark"] .tba-recirc-card:hover .tba-recirc-title { color: #66fcf1 !important; }

.tba-upnext { position: fixed; right: 24px; bottom: 24px; z-index: 9000; display: flex; align-items: center; gap: 16px;
  max-width: 520px; padding: 16px 20px 16px 16px; border-radius: 20px; text-decoration: none;
  border: 2px solid transparent;
  background-image: linear-gradient(rgba(255,255,255,.97), rgba(255,255,255,.97)), linear-gradient(135deg, #6366f1, #06b6d4);
  background-origin: border-box; background-clip: padding-box, border-box;
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 20px 56px rgba(16,24,40,.28), 0 5px 14px rgba(99,102,241,.2);
  transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.2,.9,.3,1.2), opacity .3s; }
.tba-upnext.is-in { transform: none; opacity: 1; }
.tba-upnext:hover { box-shadow: 0 24px 64px rgba(16,24,40,.34), 0 8px 18px rgba(99,102,241,.28); }
.tba-upnext-thumb { width: 104px; height: 104px; flex: 0 0 auto; border-radius: 14px; background-size: cover; background-position: center; }
.tba-upnext-body { min-width: 0; }
.tba-upnext-kicker { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  background: linear-gradient(90deg, #4338ca, #0891b2); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 5px; }
.tba-upnext-title { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.35; color: inherit;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tba-upnext-go { flex: 0 0 auto; font-size: 1.5rem; font-weight: 800; color: #4f46e5; transition: transform .15s; }
.tba-upnext:hover .tba-upnext-go { transform: translateX(5px); }
.tba-upnext-x { position: absolute; top: -11px; right: -11px; width: 28px; height: 28px; border-radius: 50%; border: 0;
  background: #1d2230; color: #fff; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.3); }
@media (max-width: 600px) { .tba-upnext { left: 14px; right: 14px; max-width: none; gap: 12px; }
  .tba-upnext-thumb { width: 72px; height: 72px; }
  .tba-upnext-title { font-size: .95rem; } }
[data-theme="dark"] .tba-upnext { background-image: linear-gradient(rgba(24,28,40,.97), rgba(24,28,40,.97)), linear-gradient(135deg, #818cf8, #66fcf1); }
[data-theme="dark"] .tba-upnext-kicker { background: linear-gradient(90deg, #a5b4fc, #66fcf1); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="dark"] .tba-upnext-go { color: #66fcf1; }

/* ════════════════════════════════════════════════════════════════════
   Verwandte Artikel — gemeinsame Basis + 3 Darstellungs-Stile
   (auto „Mehr zum Thema" + Gutenberg-Block „Verwandte Artikel")
   ════════════════════════════════════════════════════════════════════ */
.tba-related {
	margin: 2.4rem 0;
	padding: 1.4rem 1.5rem 1.6rem;
	border-radius: 20px;
	/* Gradient-Rahmen über zwei Hintergrund-Ebenen — respektiert (anders als
	   border-image) die abgerundeten Ecken. */
	border: 1.5px solid transparent;
	background:
		linear-gradient(180deg, #f7f8fe, #f3f8fc) padding-box,
		linear-gradient(135deg, #6366f1, #06b6d4) border-box;
}
.tba-related-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.tba-related-label {
	position: relative; font-size: 1.25rem; font-weight: 800; letter-spacing: .01em;
	color: inherit; padding-bottom: .5rem;
}
.tba-related-label::before {
	content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%;
	background: var(--g-color, #5e2ced); margin-right: .5em; vertical-align: .08em;
}
.tba-related-label::after {
	content: ""; position: absolute; left: 0; bottom: 0; width: 58px; height: 4px;
	border-radius: 99px; background: var(--g-color, #5e2ced);
}
.tba-related-ai {
	display: inline-flex; align-items: center; gap: .3em; flex-shrink: 0;
	font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
	padding: .3rem .7rem; border-radius: 999px;
	background: linear-gradient(135deg, rgba(99,102,241,.14), rgba(6,182,212,.12));
	color: #4338ca;
}
.tba-related-item { text-decoration: none !important; color: inherit; }
.tba-related-title { color: #1d2230 !important; text-decoration: none !important; font-weight: 700; line-height: 1.35; }
.tba-related-item:hover .tba-related-title { color: #4f46e5 !important; }
.tba-related-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: .76rem; font-weight: 600; color: #6b7280; }
.tba-related-match {
	display: inline-block; padding: .12rem .5rem; border-radius: 6px;
	background: rgba(99,102,241,.12); color: #4338ca; font-weight: 700;
}

/* ── Stil: Bild-Karten (groß) ───────────────────────────────────────── */
.tba-related--cards .tba-related-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tba-related--cards .tba-related-item { display: block; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid rgba(17,24,39,.06); box-shadow: 0 4px 14px rgba(40,40,80,.06); transition: transform .15s, box-shadow .15s; }
.tba-related--cards .tba-related-item:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(40,40,80,.13); }
.tba-related--cards .tba-related-thumb { display: block; aspect-ratio: 16/9; background-size: cover; background-position: center; }
.tba-related--cards .tba-related-body { display: block; padding: .8rem .95rem 1rem; }
.tba-related--cards .tba-related-title { display: block; font-size: 1.04rem; }
.tba-related--cards .tba-related-excerpt { display: block; margin: .4rem 0 .6rem; font-size: .85rem; line-height: 1.5; color: #4b5563; }

/* ── Stil: Kompakt-Liste (Thumbnail + Titel + Meta) ─────────────────── */
.tba-related--list .tba-related-items { display: flex; flex-direction: column; gap: 4px; }
.tba-related--list .tba-related-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 12px; transition: background .15s; }
.tba-related--list .tba-related-item:hover { background: rgba(99,102,241,.06); }
.tba-related--list .tba-related-thumb { flex: 0 0 auto; width: 84px; height: 60px; border-radius: 9px; background-size: cover; background-position: center; }
.tba-related--list .tba-related-body { min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.tba-related--list .tba-related-title { font-size: .98rem; }

/* ── Stil: Mini-Raster (klein, ohne Text) ───────────────────────────── */
.tba-related--compact .tba-related-items { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tba-related--compact .tba-related-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; background: rgba(255,255,255,.6); border: 1px solid rgba(17,24,39,.06); transition: background .15s; }
.tba-related--compact .tba-related-item:hover { background: #fff; }
.tba-related--compact .tba-related-thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 8px; background-size: cover; background-position: center; }
.tba-related--compact .tba-related-title { font-size: .9rem; }

@media ( max-width: 600px ) {
	.tba-related--cards .tba-related-items,
	.tba-related--compact .tba-related-items { grid-template-columns: 1fr; }
}

/* Dark mode (Foxiz data-theme) */
[data-theme="dark"] .tba-related { background: linear-gradient(180deg, #161a26, #141620) padding-box, linear-gradient(135deg, #818cf8, #66fcf1) border-box; }
[data-theme="dark"] .tba-related-label::before,
[data-theme="dark"] .tba-related-label::after { background: #66fcf1; }
[data-theme="dark"] .tba-related-ai { color: #a5b4fc; }
[data-theme="dark"] .tba-related-title { color: #e7e9f2 !important; }
[data-theme="dark"] .tba-related-item:hover .tba-related-title { color: #66fcf1 !important; }
[data-theme="dark"] .tba-related-meta { color: #9aa3b5; }
[data-theme="dark"] .tba-related-match { background: rgba(102,252,241,.14); color: #66fcf1; }
[data-theme="dark"] .tba-related--cards .tba-related-item { background: rgba(28,32,46,.9); border-color: rgba(255,255,255,.08); }
[data-theme="dark"] .tba-related--cards .tba-related-excerpt { color: #9aa3b5; }
[data-theme="dark"] .tba-related--compact .tba-related-item { background: rgba(28,32,46,.6); border-color: rgba(255,255,255,.07); }