/* ============================================================
   TradeUpX — Site Theme (Paper / Ink)
   ------------------------------------------------------------
   Übernimmt die Designsprache der Startseite (home_v3.html +
   home-data.css) für alle Content-Seiten:
   blog, blog_post, collections, landing, tools, skin,
   skin_index, skin_wear, collection_detail, weapon_detail,
   best_tradeups_today, legal, 404.

   Wird zusammen mit components.css + home-data.css geladen und
   ersetzt styles.css / custom.css / blog.css / landing.css /
   skin.css / experience.css auf diesen Seiten.

   Scanner, Calculator, Inventory-Lock, Gold-Scanner und Admin
   behalten ihre eigenen App-Layouts.
   ============================================================ */

:root {
  --tx3-paper: #e7e1d3;
  --tx3-paper-soft: #f0ebdf;
  --tx3-ink: #171510;
  --tx3-ink-soft: #242119;
  --tx3-accent: #f0a500;
  --tx3-accent-deep: #b67600;
  --tx3-muted: #686154;
  --tx3-quiet: #7e7667;
  --tx3-line: rgba(23, 21, 16, 0.23);
  --tx3-line-soft: rgba(23, 21, 16, 0.12);
  --tx3-dark-line: #3a3730;
  --tx3-mono: "IBM Plex Mono", ui-monospace, monospace;
  --tx3-sans: "DM Sans", system-ui, sans-serif;
  --tx3-display: "Archivo Black", sans-serif;
  --tx3-serif: "Instrument Serif", Georgia, serif;
}

/* ── Kompatibilität ──────────────────────────────────────────
   Einige Templates bringen eigene <style>-Blöcke und Inline-
   Styles mit, die noch auf die Tokens des alten Dark-Themes
   (styles.css/custom.css) zeigen. Die Dateien werden hier nicht
   mehr geladen — also werden die Tokennamen auf Paper/Ink
   umgebogen, statt jede Regel einzeln zu überschreiben. */
body.tx3-page {
  --bg: var(--tx3-paper);
  --bg-app: var(--tx3-paper);
  --bg-base: var(--tx3-paper);
  --bg-surface: rgba(23, 21, 16, .05);
  --bg-card: rgba(23, 21, 16, .05);
  --bg-elevated: rgba(23, 21, 16, .08);
  --bg-input: var(--tx3-paper-soft);
  --border: var(--tx3-line);
  --border-strong: var(--tx3-ink);
  --line: var(--tx3-line);
  --text: var(--tx3-ink);
  --text-primary: var(--tx3-ink);
  --text-secondary: #4a453c;
  --text-muted: var(--tx3-muted);
  --text-faint: var(--tx3-quiet);
  --muted: var(--tx3-muted);
  --amber: var(--tx3-accent);
  --amber-soft: var(--tx3-accent-deep);
  --green: #2f7a45;
  --red: #a33b2c;
  --blue: #2f5d8c;
  --font-sans: var(--tx3-sans);
  --font-mono: var(--tx3-mono);
}

/* ── Grundgerüst ─────────────────────────────────────────── */
body.tx3-page {
  min-width: 320px;
  margin: 0;
  color: var(--tx3-ink);
  background: var(--tx3-paper);
  font-family: var(--tx3-sans);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.tx3-page img { max-width: 100%; height: auto; }

body.tx3-page ::selection {
  color: var(--tx3-ink);
  background: var(--tx3-accent);
}

body.tx3-page :focus-visible {
  outline: 2px solid var(--tx3-ink);
  outline-offset: 2px;
}

/* Skip-Link der Content-Seiten auf das Startseiten-Muster */
body.tx3-page .skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--tx3-paper) !important;
  background: var(--tx3-ink);
  font: 600 10px/1 var(--tx3-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-160%);
}
body.tx3-page .skip-link:focus { transform: translateY(0); }

/* ── Seitenbreiten ───────────────────────────────────────── */
.tx3-wrap,
body.tx3-page .blog-main,
body.tx3-page .skin-main,
body.tx3-page .landing-main,
body.tx3-page .live-wrap,
body.tx3-page .legal-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 5vw 110px;
}

/* Lesespalten (Artikel, Guides) schmaler */
body.tx3-page .post-wrap,
body.tx3-page .landing-body,
body.tx3-page .coll-seo-text,
body.tx3-page .skin-editorial {
  max-width: 760px;
}

/* ── Seitenkopf: Kicker + Serifen-Headline + Lead ────────── */
body.tx3-page .blog-hero,
body.tx3-page .landing-hero,
body.tx3-page .tools-hero,
body.tx3-page .post-header,
body.tx3-page .skin-hero,
body.tx3-page .live-hero {
  position: relative;
  padding: clamp(56px, 7vw, 96px) 0 clamp(38px, 4vw, 58px);
  margin-bottom: clamp(38px, 4vw, 60px);
  border-bottom: 1px solid var(--tx3-ink);
}

body.tx3-page .blog-hero-label,
body.tx3-page .landing-eyebrow,
body.tx3-page .tools-hero-label,
body.tx3-page .skin-kicker,
body.tx3-page .live-hero .eyebrow,
body.tx3-page .post-breadcrumb,
body.tx3-page .skin-breadcrumb,
body.tx3-page .content-breadcrumb {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-wrap: wrap;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tx3-muted);
  font: 500 9px/1.5 var(--tx3-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.tx3-page .blog-hero-label::before,
body.tx3-page .landing-eyebrow::before,
body.tx3-page .tools-hero-label::before,
body.tx3-page .skin-kicker::before,
body.tx3-page .live-hero .eyebrow::before {
  content: "TX";
  padding: 7px 8px;
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
}

/* Breadcrumbs behalten Linkfarbe, Trenner werden ruhig */
body.tx3-page .post-breadcrumb a,
body.tx3-page .skin-breadcrumb a,
body.tx3-page .content-breadcrumb a {
  color: var(--tx3-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.tx3-page .post-breadcrumb a:hover,
body.tx3-page .skin-breadcrumb a:hover,
body.tx3-page .content-breadcrumb a:hover {
  color: var(--tx3-ink);
  border-bottom-color: var(--tx3-ink);
}
body.tx3-page .bc-sep,
body.tx3-page .post-dot { color: var(--tx3-quiet); }

body.tx3-page .blog-hero-title,
body.tx3-page .landing-h1,
body.tx3-page .post-title,
body.tx3-page .skin-h1,
body.tx3-page .tools-hero h1,
body.tx3-page .live-hero h1,
body.tx3-page h1.blog-hero-title {
  max-width: 16ch;
  margin: 0;
  color: var(--tx3-ink);
  font: 400 clamp(46px, 6vw, 92px)/0.94 var(--tx3-serif);
  letter-spacing: -.04em;
  text-transform: none;
}

body.tx3-page .blog-hero-sub,
body.tx3-page .landing-sub,
body.tx3-page .post-intro,
body.tx3-page .tools-hero p,
body.tx3-page .live-hero .sub,
body.tx3-page .skin-lead,
body.tx3-page .skin-editorial-lead {
  max-width: 630px;
  margin: 26px 0 0;
  color: #5e584d;
  font-size: 17px;
  line-height: 1.68;
}

/* ── Fließtext ───────────────────────────────────────────── */
body.tx3-page .post-body,
body.tx3-page .landing-section,
body.tx3-page .skin-section,
body.tx3-page .coll-seo-text,
body.tx3-page .skin-editorial-body,
body.tx3-page .legal-card article {
  color: #4a453c;
  font-size: 16px;
  line-height: 1.72;
}

body.tx3-page .post-body h2,
body.tx3-page .landing-section h2,
body.tx3-page .skin-section h2,
body.tx3-page .coll-seo-text h2,
body.tx3-page .tools-grid-section h2,
body.tx3-page .post-related h2,
body.tx3-page .landing-related h2,
body.tx3-page .skin-editorial h2 {
  margin: 64px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--tx3-ink);
  color: var(--tx3-ink);
  font: 400 clamp(30px, 3.4vw, 46px)/1.02 var(--tx3-serif);
  letter-spacing: -.03em;
}

/* Überschriften ohne eigene Wrapper-Klasse (z. B. skin_index, live-Seite) */
body.tx3-page main h2 {
  margin: 46px 0 16px;
  color: var(--tx3-ink);
  font: 400 clamp(26px, 3vw, 38px)/1.05 var(--tx3-serif);
  letter-spacing: -.03em;
}
body.tx3-page main h3 {
  margin: 32px 0 12px;
  color: var(--tx3-ink);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.02em;
}

body.tx3-page .post-body h3,
body.tx3-page .landing-section h3,
body.tx3-page .skin-sub-h3,
body.tx3-page .post-related h3,
body.tx3-page .landing-related h3,
body.tx3-page .skin-section h3 {
  margin: 38px 0 12px;
  color: var(--tx3-ink);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
}

body.tx3-page .post-body p,
body.tx3-page .landing-section p,
body.tx3-page .skin-section p,
body.tx3-page .coll-seo-text p,
body.tx3-page .post-body li,
body.tx3-page .landing-section li,
body.tx3-page .skin-section li { margin: 0 0 18px; }

body.tx3-page .post-body ul,
body.tx3-page .post-body ol,
body.tx3-page .landing-section ul,
body.tx3-page .landing-section ol { padding-left: 20px; }

body.tx3-page .post-body strong,
body.tx3-page .landing-section strong,
body.tx3-page .skin-section strong { color: var(--tx3-ink); font-weight: 600; }

body.tx3-page .post-body em,
body.tx3-page .landing-section em {
  color: var(--tx3-accent-deep);
  font-family: var(--tx3-serif);
  font-size: 1.08em;
}

body.tx3-page .post-body a,
body.tx3-page .landing-section a,
body.tx3-page .skin-section a,
body.tx3-page .coll-seo-text a,
body.tx3-page .legal-card a,
body.tx3-page .skin-editorial-body a {
  color: var(--tx3-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--tx3-accent);
  transition: background 180ms ease;
}
body.tx3-page .post-body a:hover,
body.tx3-page .landing-section a:hover,
body.tx3-page .skin-section a:hover,
body.tx3-page .coll-seo-text a:hover { background: rgba(240, 165, 0, .22); }

body.tx3-page code,
body.tx3-page .formula-box,
body.tx3-page .num,
body.tx3-page .fc-num,
body.tx3-page .float-value,
body.tx3-page .skin-contract-cost,
body.tx3-page .metric .num,
body.tx3-page .wt-range,
body.tx3-page .wt-mid {
  font-family: var(--tx3-mono);
  font-variant-numeric: tabular-nums;
}

body.tx3-page code {
  padding: 2px 6px;
  color: var(--tx3-ink);
  background: rgba(23, 21, 16, .08);
  font-size: .88em;
}

body.tx3-page .formula-box,
body.tx3-page pre {
  padding: 20px 22px;
  margin: 22px 0;
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

body.tx3-page blockquote {
  margin: 26px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--tx3-accent);
  color: var(--tx3-muted);
  font-family: var(--tx3-serif);
  font-size: 22px;
  line-height: 1.45;
}

body.tx3-page .muted,
body.tx3-page .wear-note,
body.tx3-page .market-links-note,
body.tx3-page .skin-float-note,
body.tx3-page .landing-market-note,
body.tx3-page .no-data,
body.tx3-page .legal-note {
  color: var(--tx3-muted);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Meta-Zeilen ─────────────────────────────────────────── */
body.tx3-page .post-meta,
body.tx3-page .post-date,
body.tx3-page .post-reading,
body.tx3-page .post-author,
body.tx3-page .blog-card-meta,
body.tx3-page .related-meta,
body.tx3-page .si-meta,
body.tx3-page .sc-meta,
body.tx3-page .coll-card-skins,
body.tx3-page .skin-meta-row,
body.tx3-page .status-meta,
body.tx3-page .opp-sub {
  color: var(--tx3-muted);
  font: 500 9px/1.5 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tx3-page .post-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ── Buttons ─────────────────────────────────────────────── */
body.tx3-page .blog-cta-btn,
body.tx3-page .post-cta-btn,
body.tx3-page .landing-hero-btn,
body.tx3-page .showcase-btn,
body.tx3-page .tool-calc-btn,
body.tx3-page .coll-card-btn,
body.tx3-page .skin-cta,
body.tx3-page .btn-primary,
body.tx3-page .btn.primary,
body.tx3-page .tx3-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  color: var(--tx3-paper-soft) !important;
  background: var(--tx3-ink);
  border: 1px solid var(--tx3-ink);
  border-radius: 0;
  font: 500 10px/1 var(--tx3-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease, background 180ms ease, transform 180ms ease;
}
body.tx3-page .blog-cta-btn:hover,
body.tx3-page .post-cta-btn:hover,
body.tx3-page .landing-hero-btn:hover,
body.tx3-page .showcase-btn:hover,
body.tx3-page .tool-calc-btn:hover,
body.tx3-page .coll-card-btn:hover,
body.tx3-page .skin-cta:hover,
body.tx3-page .btn-primary:hover,
body.tx3-page .btn.primary:hover,
body.tx3-page .tx3-cta:hover {
  color: var(--tx3-ink) !important;
  background: var(--tx3-accent);
  transform: translateY(-2px);
}

body.tx3-page .btn-secondary,
body.tx3-page .btn.secondary,
body.tx3-page .tx3-cta-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  color: var(--tx3-ink) !important;
  background: transparent;
  border: 1px solid var(--tx3-ink);
  border-radius: 0;
  font: 500 10px/1 var(--tx3-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
body.tx3-page .btn-secondary:hover,
body.tx3-page .btn.secondary:hover,
body.tx3-page .tx3-cta-ghost:hover { background: rgba(240, 165, 0, .22); transform: translateY(-2px); }

body.tx3-page .blog-card-cta,
body.tx3-page .guide-link,
body.tx3-page .tool-hub-link,
body.tx3-page .skin-link,
body.tx3-page .tx3-textlink {
  color: var(--tx3-ink);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}
body.tx3-page .guide-link-arrow { color: var(--tx3-accent-deep); }

/* ── Kartenraster: Haarlinien-Gitter wie auf der Startseite ─ */
body.tx3-page .blog-grid,
body.tx3-page .coll-grid,
body.tx3-page .related-grid,
body.tx3-page .resources-grid,
body.tx3-page .tools-grid,
body.tx3-page .skin-related-grid,
body.tx3-page .skin-index-grid,
body.tx3-page .market-links-grid,
body.tx3-page .showcase-tiers,
body.tx3-page .opp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 0;
  margin-top: 44px;
  border-top: 1px solid var(--tx3-ink);
  border-left: 1px solid var(--tx3-ink);
}

body.tx3-page .blog-card,
body.tx3-page .coll-card,
body.tx3-page .related-card,
body.tx3-page .resource-card,
body.tx3-page .tool-card,
body.tx3-page .tool-hub-card,
body.tx3-page .skin-card,
body.tx3-page .si-card,
body.tx3-page .market-link-card,
body.tx3-page .showcase-card,
body.tx3-page .showcase-tier,
body.tx3-page .opp-card,
body.tx3-page .edu-card {
  display: flex;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 26px;
  color: inherit;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--tx3-ink);
  border-bottom: 1px solid var(--tx3-ink);
  border-radius: 0;
  box-shadow: none;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

/* Verlinkte Karten füllen sich beim Hover mit Tinte (Startseite) */
body.tx3-page a.blog-card,
body.tx3-page a.related-card,
body.tx3-page a.resource-card,
body.tx3-page a.tool-hub-card,
body.tx3-page a.skin-card,
body.tx3-page a.si-card,
body.tx3-page a.market-link-card,
body.tx3-page a.showcase-tier,
body.tx3-page .blog-card:has(.blog-card-link):hover,
body.tx3-page a.opp-card { cursor: pointer; }

body.tx3-page a.blog-card:hover,
body.tx3-page a.related-card:hover,
body.tx3-page a.resource-card:hover,
body.tx3-page a.tool-hub-card:hover,
body.tx3-page a.skin-card:hover,
body.tx3-page a.si-card:hover,
body.tx3-page a.market-link-card:hover,
body.tx3-page a.showcase-tier:hover,
body.tx3-page a.opp-card:hover {
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
}
body.tx3-page a.blog-card:hover .blog-card-intro,
body.tx3-page a.related-card:hover .related-meta,
body.tx3-page a.skin-card:hover .sc-meta,
body.tx3-page a.si-card:hover .si-meta,
body.tx3-page a.tool-hub-card:hover .tool-hub-desc,
body.tx3-page a.resource-card:hover .resource-desc { color: #9d9990; }

/* Karten, die selbst ein <a> enthalten (blog.html) */
body.tx3-page .blog-card-link {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0;
  color: inherit;
  text-decoration: none;
}
body.tx3-page .blog-card:hover { color: var(--tx3-paper-soft); background: var(--tx3-ink); }
body.tx3-page .blog-card:hover .blog-card-intro { color: #9d9990; }

body.tx3-page .blog-card-title,
body.tx3-page .related-title,
body.tx3-page .coll-card-name,
body.tx3-page .si-name,
body.tx3-page .sc-name,
body.tx3-page .tool-title,
body.tx3-page .tool-hub-title,
body.tx3-page .resource-title,
body.tx3-page .showcase-title,
body.tx3-page .opp-title,
body.tx3-page .ml-name {
  display: block;
  margin: 34px 0 0;
  font: 400 clamp(23px, 2.2vw, 31px)/1.05 var(--tx3-serif);
  font-weight: 400;
  letter-spacing: -.02em;
}
body.tx3-page .blog-card-meta,
body.tx3-page .coll-card-meta { margin: 0; }

body.tx3-page .blog-card-intro,
body.tx3-page .tool-desc,
body.tx3-page .tool-hub-desc,
body.tx3-page .resource-desc,
body.tx3-page .showcase-desc,
body.tx3-page .ml-desc,
body.tx3-page .opp-body {
  margin: 16px 0 0;
  color: var(--tx3-muted);
  font-size: 14px;
  line-height: 1.58;
}

body.tx3-page .blog-card-cta,
body.tx3-page .coll-card-btn,
body.tx3-page .tool-hub-link,
body.tx3-page .ml-arrow { margin-top: auto; padding-top: 26px; }

body.tx3-page .coll-card-btn {
  min-height: 0;
  padding: 26px 0 0;
  color: var(--tx3-ink) !important;
  background: none;
  border: 0;
}
body.tx3-page .coll-card:hover .coll-card-btn { color: var(--tx3-paper-soft) !important; }
body.tx3-page .coll-card:hover { color: var(--tx3-paper-soft); background: var(--tx3-ink); }
body.tx3-page .coll-card:hover .coll-card-skins { color: #9d9990; }

body.tx3-page .tool-hub-icon,
body.tx3-page .resource-icon { font-size: 22px; }

/* Skin-Index: kompaktere Kacheln */
body.tx3-page .skin-index-grid { grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
body.tx3-page .si-card { flex-direction: row; align-items: center; gap: 12px; padding: 18px 20px; min-width: 0; max-width: 100%; }
body.tx3-page .si-card-info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
body.tx3-page .si-card-info > * { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
body.tx3-page .si-name { margin: 0; font: 600 15px/1.25 var(--tx3-sans); letter-spacing: -.01em; }
body.tx3-page .si-rarity-dot,
body.tx3-page .rarity-dot,
body.tx3-page .demo-dot,
body.tx3-page .trust-dot {
  width: 8px; height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
}

body.tx3-page .skin-related-grid { grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); }
body.tx3-page .skin-card { gap: 6px; padding: 20px; }
body.tx3-page .sc-name { margin: 0; font: 600 15px/1.3 var(--tx3-sans); letter-spacing: -.01em; }

/* ── Statistikband (Landing) — Goldband wie die Startseite ── */
body.tx3-page .landing-stats,
body.tx3-page .showcase-stats,
body.tx3-page .skin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
  gap: 0;
  margin: 0 0 clamp(38px, 4vw, 58px);
  padding: 0;
  color: var(--tx3-ink);
  background: var(--tx3-accent);
  border: 0;
  border-radius: 0;
}
body.tx3-page .ls-item,
body.tx3-page .showcase-stat,
body.tx3-page .skin-stat {
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  padding: 28px 26px;
  border: 0;
  border-right: 1px solid rgba(23, 21, 16, .3);
  background: none;
}
body.tx3-page .ls-item:last-child,
body.tx3-page .showcase-stat:last-child,
body.tx3-page .skin-stat:last-child { border-right: 0; }

body.tx3-page .ls-num,
body.tx3-page .showcase-stat-num,
body.tx3-page .skin-stat strong {
  display: block;
  color: var(--tx3-ink);
  font: 400 clamp(28px, 3vw, 44px)/1 var(--tx3-serif);
  letter-spacing: -.02em;
}
body.tx3-page .ls-lbl,
body.tx3-page .showcase-stat-lbl,
body.tx3-page .skin-stat span {
  display: block;
  color: rgba(23, 21, 16, .7);
  font: 600 8px/1.4 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Chip-Zeile der Live-Seite: eckig statt Pillen */
body.tx3-page .summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 16px; }
body.tx3-page .summary span {
  padding: 9px 12px;
  color: var(--tx3-muted);
  background: rgba(23, 21, 16, .04);
  border: 1px solid var(--tx3-line);
  border-radius: 0;
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Kennzahlen innerhalb von Karten bleiben kompakt */
body.tx3-page .metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 1px;
  margin: 18px 0 0;
  background: var(--tx3-line);
  border: 1px solid var(--tx3-line);
}
body.tx3-page .metric {
  padding: 12px 14px;
  background: var(--tx3-paper);
  border: 0;
}
body.tx3-page .metric small {
  display: block;
  margin-bottom: 5px;
  color: var(--tx3-muted);
  font: 500 8px/1.4 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tx3-page .metric b {
  color: var(--tx3-ink);
  font-family: var(--tx3-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

/* ── CTA-Banner ──────────────────────────────────────────── */
body.tx3-page .blog-cta-banner,
body.tx3-page .post-cta,
body.tx3-page .post-cta-top,
body.tx3-page .landing-cta-block,
body.tx3-page .skin-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  margin: clamp(48px, 5vw, 76px) 0 0;
  padding: clamp(34px, 4vw, 52px) clamp(26px, 3vw, 44px);
  color: #eee9dd;
  background: var(--tx3-ink);
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.tx3-page .blog-cta-text,
body.tx3-page .post-cta-text { display: flex; flex-direction: column; gap: 12px; }
body.tx3-page .blog-cta-text strong,
body.tx3-page .post-cta-text strong {
  color: var(--tx3-paper-soft);
  font: 400 clamp(26px, 2.6vw, 38px)/1.05 var(--tx3-serif);
  letter-spacing: -.03em;
}
body.tx3-page .blog-cta-text span,
body.tx3-page .post-cta-text span { color: #918d84; font-size: 15px; line-height: 1.6; }
body.tx3-page .blog-cta-banner .blog-cta-btn,
body.tx3-page .post-cta .post-cta-btn,
body.tx3-page .post-cta-top .post-cta-btn,
body.tx3-page .landing-cta-block .post-cta-btn {
  color: var(--tx3-ink) !important;
  background: var(--tx3-accent);
  border-color: var(--tx3-accent);
}
body.tx3-page .blog-cta-banner .blog-cta-btn:hover,
body.tx3-page .post-cta .post-cta-btn:hover,
body.tx3-page .landing-cta-block .post-cta-btn:hover {
  color: var(--tx3-paper-soft) !important;
  background: transparent;
  border-color: var(--tx3-paper-soft);
}

/* ── FAQ ─────────────────────────────────────────────────── */
body.tx3-page .faq-list { margin-top: 34px; border-top: 1px solid var(--tx3-ink); }
body.tx3-page .faq-item {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--tx3-line);
  border-radius: 0;
}
body.tx3-page .faq-q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 25px 48px 25px 2px;
  color: var(--tx3-ink);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.01em;
  cursor: pointer;
  list-style: none;
}
body.tx3-page .faq-q::-webkit-details-marker { display: none; }
body.tx3-page .faq-q::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--tx3-accent-deep);
  font: 400 26px/1 var(--tx3-serif);
  transform: translateY(-50%);
  transition: transform 180ms ease;
}
body.tx3-page .faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }
body.tx3-page .faq-a {
  max-width: 820px;
  margin: 0;
  padding: 0 48px 25px 2px;
  color: var(--tx3-muted);
  font-size: 15px;
  line-height: 1.68;
}

/* ── Inhaltsverzeichnis ──────────────────────────────────── */
body.tx3-page .post-toc {
  margin: 40px 0;
  padding: 26px 28px;
  background: rgba(23, 21, 16, .045);
  border: 0;
  border-left: 2px solid var(--tx3-ink);
  border-radius: 0;
}
body.tx3-page .post-toc-title {
  margin: 0 0 16px;
  color: var(--tx3-muted);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.tx3-page .post-toc-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
body.tx3-page .post-toc-list a {
  color: var(--tx3-ink);
  font-size: 15px;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
body.tx3-page .post-toc-list a:hover { border-bottom-color: var(--tx3-accent); }

/* ── Filter-Chips ────────────────────────────────────────── */
body.tx3-page .coll-filters,
body.tx3-page .si-filter-bar,
body.tx3-page .si-chip-grid,
body.tx3-page .filters,
body.tx3-page .tools-hub-quicklinks,
body.tx3-page .guide-links,
body.tx3-page .market-links-note { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
body.tx3-page .coll-filters,
body.tx3-page .si-filter-bar { margin-bottom: 30px; }

body.tx3-page .coll-filter,
body.tx3-page .si-chip,
body.tx3-page .tools-quicklink,
body.tx3-page .tag {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  color: var(--tx3-ink);
  background: transparent;
  border: 1px solid var(--tx3-line);
  border-radius: 0;
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
body.tx3-page .coll-filter:hover,
body.tx3-page .si-chip:hover,
body.tx3-page .tools-quicklink:hover { border-color: var(--tx3-ink); background: rgba(240, 165, 0, .22); }
body.tx3-page .coll-filter.active,
body.tx3-page .si-chip.active,
body.tx3-page .tag.active {
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
  border-color: var(--tx3-ink);
}

/* Rarity-/Wear-Marker */
body.tx3-page .coll-rarity-tag,
body.tx3-page .skin-rarity-badge,
body.tx3-page .wear-badge,
body.tx3-page .skin-float-badge,
body.tx3-page .ml-badge,
body.tx3-page .showcase-badge,
body.tx3-page .tp-rarity,
body.tx3-page .calc-badge,
body.tx3-page .skin-stattrak {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  color: var(--tx3-ink);
  background: rgba(23, 21, 16, .07);
  border: 1px solid var(--tx3-line);
  border-radius: 0;
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ── Tabellen ────────────────────────────────────────────── */
body.tx3-page .skin-price-table-wrap,
body.tx3-page .skin-table-wrap,
body.tx3-page .wear-table { overflow-x: auto; }
body.tx3-page table,
body.tx3-page .skin-price-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
body.tx3-page th,
body.tx3-page .wt-header {
  padding: 14px 16px;
  color: var(--tx3-muted);
  background: none;
  border-bottom: 1px solid var(--tx3-ink);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .1em;
  text-align: left;
  text-transform: uppercase;
}
body.tx3-page td {
  padding: 15px 16px;
  color: #4a453c;
  border-bottom: 1px solid var(--tx3-line);
}
body.tx3-page tbody tr:hover td { background: rgba(240, 165, 0, .12); }
body.tx3-page td.num,
body.tx3-page th.num { text-align: right; }

body.tx3-page .wt-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 12px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--tx3-line);
  font-size: 14px;
}
body.tx3-page .wt-header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 12px;
  padding: 12px 4px;
}
body.tx3-page .wt-name { font-weight: 600; }
body.tx3-page .wt-note { color: var(--tx3-muted); font-size: 13px; }

/* ── Formulare / Rechner (Tools) ─────────────────────────── */
body.tx3-page .tool-card,
body.tx3-page .tool-body,
body.tx3-page .demo-mockup,
body.tx3-page .filter-card,
body.tx3-page .status-card {
  background: rgba(23, 21, 16, .035);
  border: 1px solid var(--tx3-line);
  border-radius: 0;
  box-shadow: none;
}
body.tx3-page .tool-card { display: block; padding: 0; border-right: 1px solid var(--tx3-ink); border-bottom: 1px solid var(--tx3-ink); background: none; }
body.tx3-page .tool-header { padding: 24px 26px 0; }
body.tx3-page .tool-title { margin: 0; }
body.tx3-page .tool-desc { padding: 0 26px; }
body.tx3-page .tool-body,
body.tx3-page .tool-body-2col { padding: 22px 26px 26px; background: none; border: 0; }
body.tx3-page .tool-body-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; }

body.tx3-page input[type="text"],
body.tx3-page input[type="number"],
body.tx3-page input[type="search"],
body.tx3-page select,
body.tx3-page textarea,
body.tx3-page .fc-input,
body.tx3-page .input {
  width: 100%;
  padding: 11px 13px;
  color: var(--tx3-ink);
  background: var(--tx3-paper-soft);
  border: 1px solid var(--tx3-line);
  border-radius: 0;
  font-family: var(--tx3-mono);
  font-size: 14px;
}
body.tx3-page input:focus,
body.tx3-page select:focus,
body.tx3-page textarea:focus {
  outline: none;
  border-color: var(--tx3-ink);
  box-shadow: inset 0 -2px 0 var(--tx3-accent);
}
body.tx3-page label,
body.tx3-page .fco-label,
body.tx3-page .fc-header,
body.tx3-page .fee-col,
body.tx3-page .roi-field label,
body.tx3-page .fco-field label {
  display: block;
  margin-bottom: 7px;
  color: var(--tx3-muted);
  font: 500 9px/1.4 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tx3-page .float-calc-grid,
body.tx3-page .fco-inputs,
body.tx3-page .roi-fields,
body.tx3-page .fee-field,
body.tx3-page .inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
body.tx3-page .fc-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
body.tx3-page .float-calc-output-section { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--tx3-line); }
body.tx3-page .tool-calc-btn { margin-top: 18px; width: 100%; }

body.tx3-page .tool-result,
body.tx3-page .roi-result,
body.tx3-page .fee-result-row,
body.tx3-page .roi-res-row {
  margin-top: 18px;
  padding: 20px 22px;
  color: #eee9dd;
  background: var(--tx3-ink);
  border: 0;
  border-radius: 0;
}
body.tx3-page .tr-main,
body.tx3-page .roi-pct,
body.tx3-page .fee-result-val {
  color: var(--tx3-accent);
  font: 400 clamp(26px, 2.6vw, 38px)/1 var(--tx3-serif);
}
body.tx3-page .tr-wear,
body.tx3-page .roi-verdict {
  margin-top: 10px;
  color: var(--tx3-paper-soft);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.tx3-page .tr-detail,
body.tx3-page .roi-net,
body.tx3-page .roi-ev { margin-top: 10px; color: #918d84; font-size: 13px; }
body.tx3-page .fee-divider { border: 0; border-top: 1px solid var(--tx3-line); margin: 16px 0; }

/* Demo-Mockup der Tools-Seite */
body.tx3-page .demo-mockup { margin-top: 26px; overflow: hidden; }
body.tx3-page .demo-toolbar {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 16px;
  background: var(--tx3-ink);
  color: var(--tx3-paper-soft);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .08em;
}
body.tx3-page .demo-url { color: #918d84; }
body.tx3-page .demo-body { padding: 18px; }
body.tx3-page .demo-result,
body.tx3-page .demo-skin {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--tx3-line);
  font-size: 14px;
}
body.tx3-page .demo-roi,
body.tx3-page .demo-ev { font-family: var(--tx3-mono); font-variant-numeric: tabular-nums; }
body.tx3-page .demo-roi.high { color: #2f7a45; }
body.tx3-page .demo-roi.mid { color: var(--tx3-accent-deep); }

/* ── Skin-Seiten ─────────────────────────────────────────── */
body.tx3-page .skin-hero {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
body.tx3-page .skin-hero-img {
  display: flex; align-items: center; justify-content: center;
  padding: 26px;
  background: rgba(23, 21, 16, .05);
  border: 1px solid var(--tx3-line);
}
body.tx3-page .skin-hero-info { min-width: 0; }
body.tx3-page .skin-h1 { margin: 18px 0 0; }
body.tx3-page .skin-meta-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
body.tx3-page .skin-float-badge { margin-top: 18px; }
body.tx3-page .float-label { color: var(--tx3-muted); }
body.tx3-page .float-value { color: var(--tx3-ink); font-weight: 600; }

body.tx3-page .skin-section { margin-top: 8px; }
body.tx3-page .skin-section h2 svg { display: none; }

body.tx3-page .skin-float-bar-wrap { margin: 22px 0; }
body.tx3-page .skin-float-bar {
  position: relative;
  height: 10px;
  background: linear-gradient(90deg, #4c7f57, #b6a032, var(--tx3-accent-deep), #a35a25, #8c3a2c);
  border: 1px solid var(--tx3-ink);
}
body.tx3-page .fb-scale { display: flex; justify-content: space-between; margin-top: 8px; }
body.tx3-page .fb-label,
body.tx3-page .fb-label-right,
body.tx3-page .fb-range { color: var(--tx3-muted); font: 500 9px/1 var(--tx3-mono); letter-spacing: .08em; text-transform: uppercase; }

body.tx3-page .skin-tradeup-path,
body.tx3-page .tp-box {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 20px;
  border: 1px solid var(--tx3-line);
}
body.tx3-page .tp-label,
body.tx3-page .tp-count { color: var(--tx3-muted); font: 500 9px/1.4 var(--tx3-mono); letter-spacing: .1em; text-transform: uppercase; }
body.tx3-page .tp-name { font-weight: 600; }
body.tx3-page .tp-arrow { color: var(--tx3-accent-deep); font-size: 20px; }
body.tx3-page .skin-no-tradeup-notice,
body.tx3-page .sc-no-tradeup {
  padding: 18px 20px;
  color: var(--tx3-muted);
  background: rgba(23, 21, 16, .05);
  border-left: 2px solid var(--tx3-accent);
  font-size: 14px;
}

/* ── /best-cs2-trade-ups-today ───────────────────────────── */
body.live-page.tx3-page { background: var(--tx3-paper); }
body.tx3-page .opp-list { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
body.tx3-page .opp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
body.tx3-page .opp-title { margin: 0; font-size: 24px; }
body.tx3-page .filter-card,
body.tx3-page .status-card { padding: 22px 24px; margin-bottom: 26px; }
body.tx3-page .empty,
body.tx3-page .warn {
  padding: 18px 20px;
  color: var(--tx3-muted);
  background: rgba(23, 21, 16, .05);
  border-left: 2px solid var(--tx3-accent);
  font-size: 14px;
}
body.tx3-page .actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Legal ───────────────────────────────────────────────── */
body.legal-page.tx3-page .legal-wrap { max-width: 860px; padding-top: clamp(48px, 6vw, 84px); }
body.tx3-page .legal-card {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.tx3-page .legal-card h1 {
  margin: 0 0 34px;
  font: 400 clamp(42px, 5.6vw, 82px)/0.96 var(--tx3-serif);
  letter-spacing: -.04em;
}
body.tx3-page .legal-card h2 {
  margin: 46px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--tx3-ink);
  font: 400 clamp(24px, 2.6vw, 34px)/1.05 var(--tx3-serif);
  letter-spacing: -.03em;
}
body.tx3-page .legal-card p { color: #4a453c; font-size: 16px; line-height: 1.72; }
body.tx3-page .legal-eyebrow {
  display: flex; align-items: center; gap: 13px;
  margin: 0 0 28px;
  color: var(--tx3-muted);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.tx3-page .legal-eyebrow::before {
  content: "TX";
  padding: 7px 8px;
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
}
body.tx3-page .legal-nav { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 40px; }
body.tx3-page .legal-nav a {
  color: var(--tx3-muted);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .09em;
  text-decoration: none;
  text-transform: uppercase;
}
body.tx3-page .legal-nav a:hover { color: var(--tx3-ink); }

/* ── 404 ─────────────────────────────────────────────────── */
body.tx3-page .nf-wrap {
  min-height: 68vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(60px, 8vw, 120px) 5vw;
}
body.tx3-page .nf-code {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 28px;
  color: var(--tx3-muted);
  font: 500 9px/1 var(--tx3-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
body.tx3-page .nf-code::before {
  content: "404";
  padding: 7px 8px;
  color: var(--tx3-paper-soft);
  background: var(--tx3-ink);
}
body.tx3-page .nf-title {
  margin: 0;
  font: 400 clamp(52px, 8vw, 118px)/0.92 var(--tx3-serif);
  letter-spacing: -.04em;
}
body.tx3-page .nf-copy { max-width: 520px; margin: 26px 0 0; color: #5e584d; font-size: 17px; line-height: 1.68; }
body.tx3-page .nf-btns { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; }

/* ── Related / Resources ─────────────────────────────────── */
body.tx3-page .post-related,
body.tx3-page .landing-related,
body.tx3-page .post-resources,
body.tx3-page .skin-market-links { margin-top: clamp(56px, 6vw, 88px); }
body.tx3-page .resource-card--primary { background: rgba(240, 165, 0, .16); }

/* ── Bewegungsreduktion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.tx3-page *,
  body.tx3-page *::before,
  body.tx3-page *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Responsive (Breakpoints wie Startseite) ─────────────── */
@media (max-width: 1080px) {
  body.tx3-page .skin-hero { grid-template-columns: minmax(0, 1fr); }
  body.tx3-page .blog-grid,
  body.tx3-page .coll-grid,
  body.tx3-page .related-grid,
  body.tx3-page .resources-grid,
  body.tx3-page .tools-grid,
  body.tx3-page .skin-related-grid,
  body.tx3-page .market-links-grid,
  body.tx3-page .showcase-tiers,
  body.tx3-page .opp-list { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
}

@media (max-width: 860px) {
  body.tx3-page .blog-grid,
  body.tx3-page .coll-grid,
  body.tx3-page .related-grid,
  body.tx3-page .resources-grid,
  body.tx3-page .tools-grid,
  body.tx3-page .skin-related-grid,
  body.tx3-page .skin-index-grid,
  body.tx3-page .market-links-grid,
  body.tx3-page .showcase-tiers,
  body.tx3-page .opp-list { grid-template-columns: minmax(0, 1fr); }
  body.tx3-page .landing-stats,
  body.tx3-page .showcase-stats,
  body.tx3-page .skin-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tx3-page .ls-item:nth-child(2n),
  body.tx3-page .showcase-stat:nth-child(2n) { border-right: 0; }
  body.tx3-page .blog-cta-banner,
  body.tx3-page .post-cta,
  body.tx3-page .post-cta-top,
  body.tx3-page .landing-cta-block { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  body.tx3-page .blog-main,
  body.tx3-page .skin-main,
  body.tx3-page .landing-main,
  body.tx3-page .live-wrap,
  body.tx3-page .legal-wrap { padding-bottom: 76px; }
  body.tx3-page .landing-stats,
  body.tx3-page .showcase-stats,
  body.tx3-page .skin-stat-grid { grid-template-columns: minmax(0, 1fr); }
  body.tx3-page .ls-item,
  body.tx3-page .showcase-stat {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 21, 16, .3);
  }
  body.tx3-page .faq-q { font-size: 16px; gap: 16px; }
  body.tx3-page .blog-card,
  body.tx3-page .coll-card,
  body.tx3-page .related-card,
  body.tx3-page .tool-hub-card,
  body.tx3-page .skin-card { padding: 22px 20px; }
}