/* ==========================================================================
   NERDMAN v3 — Complete Stylesheet
   Light-mode AI news magazine redesign
   Design System: DM Sans + Space Mono, warm whites, rubrik-colored accents
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. CSS Variables — v3 Design System
   -------------------------------------------------------------------------- */
:root {
  /* Rubrik colors */
  --nm-hot: #E24B4A;
  --nm-tools: #2D7DD2;
  --nm-agents: #1D9E75;
  --nm-founder: #7F77DD;
  --nm-geld: #D4910E;
  --nm-exp: #C44D80;
  --nm-bs: #7A7972;
  --nm-crime: #A32D2D;
  --nm-skills: #B040D0;

  /* Backgrounds */
  --bg: #FFFFFF;
  --bg2: #F6F5F2;
  --bg3: #EEEDEA;

  /* Text */
  --tx: #1A1A1A;
  --tx2: #6B6B6B;
  --tx3: #9B9B9B;

  /* Borders */
  --bd: rgba(0,0,0,0.08);
  --bd2: rgba(0,0,0,0.14);

  /* Radius */
  --rad: 12px;

  /* Fonts */
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', 'JetBrains Mono', monospace;

  /* Dynamic rubrik color (overridden inline per section/article) */
  --rubrik-color: var(--nm-hot);
}

/* --------------------------------------------------------------------------
   A. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video, svg {
  max-width: 100%;
  display: block;
}

ul, ol {
  list-style: none;
}

a {
  color: var(--tx);
  text-decoration: none;
  transition: color .2s;
}

a:hover {
  color: var(--rubrik-color);
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

strong { color: var(--tx); }

p {
  margin-bottom: 1em;
}

/* Fade-in animation */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn .4s ease both;
}

/* --------------------------------------------------------------------------
   A. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tx);
}

.mono {
  font-family: var(--mono);
  font-size: .85em;
}

/* --------------------------------------------------------------------------
   A. Utility — .wrap container
   -------------------------------------------------------------------------- */
.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* --------------------------------------------------------------------------
   Ticker
   -------------------------------------------------------------------------- */
.ticker { background: var(--bg2); border-bottom: 1px solid var(--bd); overflow: hidden; position: relative; }
.ticker .wrap { padding-top: 0; padding-bottom: 0; }
.ticker-inner { display: flex; align-items: center; padding: 8px 0; }
.ticker-tag { font-size: 11px; font-weight: 500; color: #fff; background: var(--nm-hot); padding: 3px 10px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; letter-spacing: 0.04em; text-transform: uppercase; margin-right: 16px; }
.ticker-track { display: flex; gap: 32px; animation: ticker-scroll 40s linear infinite; white-space: nowrap; }
.ticker-item { font-size: 13px; color: var(--tx2); white-space: nowrap; flex-shrink: 0; }
.ticker-item a { color: var(--tx); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.ticker-item a:hover { color: var(--nm-hot); }
.ticker-item::after { content: '·'; margin-left: 32px; color: var(--tx3); }
.ticker-item:last-child::after { display: none; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header { padding: 20px 0; border-bottom: 1px solid var(--bd); }
.header .wrap { padding-top: 0; padding-bottom: 0; }
.header-inner { display: flex; align-items: center; justify-content: space-between; }
.logo { font-family: var(--mono); font-size: 32px; font-weight: 700; letter-spacing: -0.02em; color: var(--tx); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.logo em { font-style: normal; font-weight: 400; color: var(--tx2); }
.logo-icon { width: 36px; height: auto; image-rendering: pixelated; flex-shrink: 0; }
.tagline { font-size: 12px; color: var(--tx3); margin-top: 2px; letter-spacing: 0.02em; }
.hd-meta { font-size: 12px; color: var(--tx3); text-align: right; }
.hd-live { display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-agents); animation: pulse 2s ease infinite; display: inline-block; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

/* --------------------------------------------------------------------------
   Sticky Nav — pill-style tabs
   -------------------------------------------------------------------------- */
.nav-wrap { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--bd); transition: box-shadow 0.3s; }
.nav-wrap .wrap { padding-top: 0; padding-bottom: 0; }
.nav-wrap.scrolled { box-shadow: 0 1px 8px rgba(0,0,0,0.06); }
.nav-bar { display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.nav { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex: 1; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a { font-size: 13px; font-weight: 500; padding: 7px 16px; border-radius: 20px; border: 1px solid var(--bd2); color: var(--tx2); cursor: pointer; transition: all 0.2s; background: transparent; text-decoration: none; white-space: nowrap; flex-shrink: 0; }
.nav a:hover { background: var(--bg2); color: var(--tx); border-color: var(--bd2); }
.nav a.on { background: var(--tx); color: var(--bg); border-color: var(--tx); }

.nav-search { position: relative; flex-shrink: 0; }
.nav-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--tx3); }
.nav-search input { font-family: var(--font); font-size: 13px; padding: 7px 14px 7px 34px; border-radius: 20px; border: 1px solid var(--bd2); background: var(--bg); color: var(--tx); width: 180px; outline: none; transition: all 0.25s; }
.nav-search input:focus { border-color: var(--tx); width: 240px; box-shadow: 0 0 0 3px rgba(0,0,0,0.04); }
.nav-search input::placeholder { color: var(--tx3); }

.hamburger { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--bd2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.hamburger:hover { background: var(--bg2); }
.hamburger svg { color: var(--tx2); transition: color 0.2s; }
.hamburger:hover svg { color: var(--tx); }

/* --------------------------------------------------------------------------
   Menu overlay + slide-in drawer
   -------------------------------------------------------------------------- */
.menu-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.3); z-index: 999; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 85vw; background: var(--bg); z-index: 1000; transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.4,0,0.2,1); box-shadow: -4px 0 24px rgba(0,0,0,0.08); overflow-y: auto; }
.menu-overlay.open + .menu-drawer { transform: translateX(0); }
.menu-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid var(--bd); }
.menu-header-brand { font-family: var(--mono); font-size: 20px; font-weight: 700; }
.menu-header-brand em { font-style: normal; font-weight: 400; color: var(--tx2); }
.menu-close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--bd2); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.menu-close:hover { background: var(--bg2); }
.menu-section { padding: 16px 24px 8px; }
.menu-section-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tx3); margin-bottom: 8px; }
.menu-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--tx); font-size: 14px; font-weight: 500; transition: background 0.15s; }
.menu-link:hover { background: var(--bg2); }
.menu-link-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.menu-link-sub { font-size: 12px; color: var(--tx3); font-weight: 400; margin-left: auto; }
.menu-divider { height: 1px; background: var(--bd); margin: 8px 24px; }

/* --------------------------------------------------------------------------
   A. Sections — .sec, .sh (section + header with line)
   -------------------------------------------------------------------------- */
.section {
  border-top: 2px solid var(--rubrik-color);
  margin-bottom: 48px;
  padding-top: 0;
}

.sec {
  margin-bottom: 48px;
}

.sh {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bd);
}

.sh-t {
  font-size: 20px;
  font-weight: 500;
}

.sh-s {
  font-size: 13px;
  color: var(--tx3);
}

.sh-line {
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* Legacy section header (.sd) */
.sd {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 16px 0 14px;
}

.sd h2,
.sd .sn {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--rubrik-color);
}

.sd .sd-sub,
.sd .ss {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sd .sd-emoji {
  font-size: 18px;
}

/* --------------------------------------------------------------------------
   A. Section body — .sb (2fr + 1fr grid)
   -------------------------------------------------------------------------- */
.sl {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   A. Hero grid + cards — .hg, .hc, .hc.feat
   -------------------------------------------------------------------------- */
.hg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.hc {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
  display: flex;
  flex-direction: column;
}

.hc:hover {
  border-color: var(--bd2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.hc.feat {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.25rem;
}

.hc:not(.feat) {
  padding: 1.25rem;
}

.hi {
  height: 260px;
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hiw {
  font-family: var(--font);
  font-size: 100px;
  font-weight: 900;
  color: rgba(0,0,0,.03);
  text-transform: uppercase;
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.hit {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--rubrik-color);
  padding: 3px 10px;
  border-radius: 6px;
}

.hia {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  padding: 3px 10px;
  border-radius: 6px;
}

.hb {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.hk {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.hh {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.15;
  color: var(--tx);
  margin-bottom: 10px;
  transition: color .2s;
}

.hh:hover,
.hc:hover .hh {
  color: var(--rubrik-color);
}

.hl {
  font-size: 14px;
  color: var(--tx2);
  line-height: 1.6;
  margin-bottom: 12px;
  flex: 1;
}

.hs {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
}

.hv {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--rubrik-color);
  display: flex;
  align-items: center;
  gap: 6px;
}

.hv .score-num {
  background: var(--rubrik-color);
  color: #fff;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   A. Badge
   -------------------------------------------------------------------------- */
.badge {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 8px;
  color: #fff;
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   A. Card components — .c-src, .c-ttl, .c-desc, .c-meta, .c-vis
   -------------------------------------------------------------------------- */
.c-src {
  font-size: 11px;
  color: var(--tx3);
  margin-bottom: 4px;
  margin-bottom: 6px;
}

.c-ttl {
  font-size: 16px;
  font-weight: 500;
  color: var(--tx);
  line-height: 1.35;
  margin-bottom: 6px;
  transition: color .2s;
}

.c-desc {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-meta {
  font-size: 11px;
  color: var(--tx3);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-read { font-size: 11px; color: var(--tx3); }

.feat .c-ttl { font-size: 22px; line-height: 1.3;
  margin-top: auto;
}

.c-vis {
  border-radius: 10px;
  height: 100%;
  min-height: 160px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 160px;
  transition: transform 0.4s;
}

.hc:hover .c-vis img {
  transform: scale(1.03);
}

.c-vis svg {
  width: 100%;
  height: 100%;
  min-height: 160px;
}

.c-vis-fallback {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 14px;
  color: #fff;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   A. Score — color-coded
   -------------------------------------------------------------------------- */
.score {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

.score-h {
  background: rgba(29,158,117,.12);
  color: #1D9E75;
}

.score-m {
  background: rgba(212,145,14,.12);
  color: #D4910E;
}

.score-l {
  background: rgba(226,75,74,.12);
  color: #E24B4A;
}

/* --------------------------------------------------------------------------
   A. Article grid + cards — .arts, .art, .art-img, .art-body (index cards)
   -------------------------------------------------------------------------- */
.arts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* Scroll-box inside arts grid — fill remaining columns */
.arts > .scroll-box {
  grid-column: span 1;
  max-height: 234px;
  align-self: stretch;
}

/* Article grid (legacy .ag) */
.ag {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.ac,
.art {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.ac:hover,
.art:hover {
  border-color: var(--bd2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

.ai,
.art-img {
  height: 110px;
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.art:hover .art-img img {
  transform: scale(1.05);
}

.art-img-fb {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}

.aiw {
  font-family: var(--font);
  font-size: 48px;
  font-weight: 900;
  color: rgba(0,0,0,.03);
  text-transform: uppercase;
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.aib {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--rubrik-color);
  padding: 2px 8px;
  border-radius: 6px;
}

.asc {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--rubrik-color);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  padding: 2px 7px;
  border-radius: 6px;
}

.abo {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.ak {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.ah {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tx);
  margin-bottom: 8px;
  transition: color .2s;
}

.ac:hover .ah,
.art:hover .c-ttl {
  color: var(--rubrik-color);
}

/* Art card body (index grid cards) */
.art > .art-body {
  padding: 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.art .c-ttl {
  font-size: 14px;
  margin-bottom: 4px;
}

.art .c-desc {
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
}

.art .c-meta {
  margin-top: auto;
  padding-top: 8px;
}

.al {
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.5;
  flex: 1;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.am {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.am .am-dot {
  width: 3px;
  height: 3px;
  background: var(--tx3);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   A. Sidebar — Top 5 lists (.sb, .sbt, .ri)
   -------------------------------------------------------------------------- */
.sb {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 28px;
}

.sbx {
  margin-bottom: 18px;
}

.sbt {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx2);
  letter-spacing: .02em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}

.sbt em {
  font-style: normal;
  color: var(--rubrik-color);
}

.t5 { margin-bottom: 16px; }
.t5-t, .t5-head { font-size: 14px; font-weight: 500; margin-bottom: 10px; color: var(--tx2); }
.t5-list { display: flex; flex-direction: column; gap: 2px; }
.t5-i, .ri {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--tx);
}
.t5-i:hover, .ri:hover { background: var(--bg2); }
.t5-n, .rn {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--tx3);
  min-width: 24px;
  text-align: center;
  line-height: 1;
  flex-shrink: 0;
}

.rn.hi2 {
  color: var(--rubrik-color);
}

.ri-body {
  flex: 1;
  min-width: 0;
}

.t5-txt, .ri-title, .rh {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

.t5-src, .rs {
  font-size: 11px;
  color: var(--tx3);
  transition: color .2s;
}

.ri:hover .ri-title,
.ri:hover .rh {
  color: var(--rubrik-color);
}

.ri-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* --------------------------------------------------------------------------
   A. Scrollable table — .scroll-box, .stbl
   -------------------------------------------------------------------------- */
.scroll-box {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 16px 0;
}

.stbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.stbl th {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx3);
  padding: 8px 12px;
  border-bottom: 2px solid var(--bd2);
  text-align: left;
  white-space: nowrap;
}

.stbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bd);
  color: var(--tx2);
}

.stbl tr:hover td {
  background: var(--bg2);
}

.s-ttl { font-weight: 500; font-size: 13px; }
.s-src { font-size: 11px; color: var(--tx3); margin-top: 1px; }
.s-sc { font-weight: 500; text-align: right; white-space: nowrap; }

/* --------------------------------------------------------------------------
   A. MEHR / More button (pill style)
   -------------------------------------------------------------------------- */
.mehr-wrap,
.more-wrap {
  text-align: center;
  margin-bottom: 20px;
}

.mehr-btn,
.more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--tx2);
  padding: 8px 18px;
  border: 1px solid var(--bd2);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  background: transparent;
  text-decoration: none;
  margin-top: 14px;
}

.mehr-btn:hover,
.more:hover {
  background: var(--rubrik-color);
  color: #fff;
}

.ag .ac.hidden-card { display: none; }
.ag .ac.hidden-card.show { display: flex; }

/* --------------------------------------------------------------------------
   A. Duo — 2-column layout
   -------------------------------------------------------------------------- */
.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

/* --------------------------------------------------------------------------
   A. CTA strip
   -------------------------------------------------------------------------- */
.cta-strip {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 24px 32px;
  text-align: center;
  margin: 32px 0;
}

.cta-btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--rubrik-color);
  padding: 10px 28px;
  border-radius: 20px;
  transition: opacity .2s;
}

.cta-btn:hover {
  opacity: .85;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Inline Newsletter (between sections)
   -------------------------------------------------------------------------- */
.nl-inline {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 32px 0;
}
.nl-inline-icon { font-size: 32px; flex-shrink: 0; }
.nl-inline-body { flex: 1; }
.nl-inline-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.nl-inline-sub { font-size: 13px; color: var(--tx2); }
.nl-inline-form { display: flex; gap: 8px; flex-shrink: 0; }
.nl-inline-input {
  font-family: var(--font); font-size: 13px; padding: 8px 14px;
  border-radius: 8px; border: 1px solid var(--bd2); background: var(--bg);
  color: var(--tx); width: 200px; outline: none;
}
.nl-inline-input:focus { border-color: var(--tx); }
.nl-inline-input::placeholder { color: var(--tx3); }
.nl-inline-btn {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 8px 18px; border-radius: 8px; border: none;
  background: var(--tx); color: #fff; cursor: pointer; transition: opacity 0.2s;
}
.nl-inline-btn:hover { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Business CTA banner (juunit)
   -------------------------------------------------------------------------- */
.biz-cta {
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #fff;
  border-radius: var(--rad);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 32px 0;
}
.biz-cta-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
.biz-cta-body { flex: 1; }
.biz-cta-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.biz-cta-sub { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.biz-cta-btn {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 10px 22px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2); background: none;
  color: #fff; cursor: pointer; white-space: nowrap;
  transition: all 0.2s; text-decoration: none;
}
.biz-cta-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.3); color: #fff; }

/* --------------------------------------------------------------------------
   Footer CTA line
   -------------------------------------------------------------------------- */
.ft-cta {
  border-top: 1px solid var(--bd);
  padding-top: 16px;
  margin-top: 16px;
  text-align: center;
}
.ft-cta-txt { font-size: 12px; color: var(--tx3); }
.ft-cta-txt a { color: var(--nm-agents); font-weight: 500; text-decoration: none; }
.ft-cta-txt a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Sidebar Newsletter widget (article page)
   -------------------------------------------------------------------------- */
.nl-sidebar {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.nl-sidebar-emoji { font-size: 24px; margin-bottom: 8px; }
.nl-sidebar-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.nl-sidebar-sub { font-size: 12px; color: var(--tx2); margin-bottom: 14px; line-height: 1.5; }
.nl-sidebar-input {
  font-family: var(--font); font-size: 13px; padding: 8px 12px;
  border-radius: 8px; border: 1px solid var(--bd2); background: var(--bg);
  color: var(--tx); width: 100%; margin-bottom: 8px; outline: none;
}
.nl-sidebar-input:focus { border-color: var(--tx); }
.nl-sidebar-input::placeholder { color: var(--tx3); }
.nl-sidebar-btn {
  font-family: var(--font); font-size: 13px; font-weight: 600;
  padding: 8px 0; border-radius: 8px; border: none;
  background: var(--tx); color: #fff; width: 100%; cursor: pointer;
  transition: opacity 0.2s;
}
.nl-sidebar-btn:hover { opacity: 0.85; }

/* --------------------------------------------------------------------------
   Voting — Article page (Variante A: Box)
   -------------------------------------------------------------------------- */
.vote-box {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 24px;
  text-align: center;
  margin: 32px 0;
}
.vote-question { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.vote-sub { font-size: 13px; color: var(--tx3); margin-bottom: 16px; }
.vote-buttons { display: flex; justify-content: center; gap: 12px; }
.vote-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 10px;
  border: 1.5px solid var(--bd2); background: var(--bg);
  cursor: pointer; font-family: var(--font); font-size: 14px;
  font-weight: 500; color: var(--tx2); transition: all 0.2s;
}
.vote-btn:hover { border-color: var(--tx3); color: var(--tx); }
.vote-btn svg { width: 20px; height: 20px; transition: transform 0.2s; }
.vote-btn.up:hover { border-color: var(--nm-agents); color: var(--nm-agents); }
.vote-btn.up:hover svg { transform: translateY(-2px); }
.vote-btn.up.voted { background: #E1F5EE; border-color: var(--nm-agents); color: var(--nm-agents); }
.vote-btn.down:hover { border-color: var(--nm-hot); color: var(--nm-hot); }
.vote-btn.down:hover svg { transform: translateY(2px); }
.vote-btn.down.voted { background: #FCEBEB; border-color: var(--nm-hot); color: var(--nm-hot); }
.vote-count { font-family: var(--mono); font-weight: 700; font-size: 14px; }
.vote-result { margin-top: 14px; font-size: 12px; color: var(--tx3); display: none; }
.vote-result.show { display: block; }
.vote-bar-wrap { height: 4px; background: var(--bg3); border-radius: 2px; margin: 8px auto; max-width: 200px; overflow: hidden; }
.vote-bar-fill { height: 100%; background: var(--nm-agents); border-radius: 2px; transition: width 0.5s ease; }

/* Voting Mini — Card badges in Übersicht */
.vote-mini {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11px; color: var(--tx3);
}
.vote-mini svg { width: 13px; height: 13px; }
.vote-mini .vm-up { color: var(--nm-agents); }
.vote-mini .vm-down { color: var(--nm-hot); }
.vote-mini .vm-pct { font-weight: 700; }
.vote-mini .vm-pct.positive { color: var(--nm-agents); }
.vote-mini .vm-pct.negative { color: var(--nm-hot); }

/* --------------------------------------------------------------------------
   Sticky bottom newsletter bar
   -------------------------------------------------------------------------- */
.nl-sticky {
  position: fixed; bottom: -80px; left: 0; right: 0;
  background: var(--bg); border-top: 1px solid var(--bd);
  box-shadow: 0 -2px 12px rgba(0,0,0,0.06);
  padding: 12px 20px; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  transition: bottom 0.4s cubic-bezier(0.4,0,0.2,1);
}
.nl-sticky.show { bottom: 0; }
.nl-sticky-txt { font-size: 13px; color: var(--tx2); }
.nl-sticky-txt strong { color: var(--tx); }
.nl-sticky-btn {
  font-family: var(--font); font-size: 12px; font-weight: 600;
  padding: 7px 18px; border-radius: 20px; border: none;
  background: var(--nm-hot); color: #fff; cursor: pointer;
  transition: opacity 0.2s;
}
.nl-sticky-btn:hover { opacity: 0.9; }
.nl-sticky-close {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--bd2); background: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--tx3);
}

@media (max-width: 768px) {
  .nl-inline { flex-direction: column; text-align: center; gap: 12px; }
  .nl-inline-form { width: 100%; }
  .nl-inline-input { flex: 1; width: auto; }
  .biz-cta { flex-direction: column; text-align: center; gap: 16px; }
  .nl-sticky { flex-wrap: wrap; gap: 8px; padding: 10px 16px; }
  .nl-sticky-txt { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   A. New badge
   -------------------------------------------------------------------------- */
.new-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
  background: var(--nm-hot);
  padding: 1px 6px;
  border-radius: 4px;
}

.archive-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  color: var(--tx3);
  background: var(--bg3);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  margin-left: 6px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   A. Footer
   -------------------------------------------------------------------------- */
footer,
.ft {
  border-top: 1px solid var(--bd);
  padding: 32px 0;
  background: var(--bg2);
}

.footer-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.ft-brand, .ftl {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ft-brand em, .ftl em {
  font-style: normal;
  font-weight: 400;
  color: var(--tx2);
}

.ft-desc, .ftt {
  font-size: 12px;
  color: var(--tx3);
  margin-bottom: 14px;
  line-height: 1.7;
}

.ft-links {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.ft-links a, .ftt a {
  font-size: 12px;
  color: var(--tx2);
  text-decoration: none;
  transition: color .2s;
}

.ftt a:hover {
  color: var(--rubrik-color);
}

.footer-copy {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  margin-top: 12px;
}

/* ==========================================================================
   B. Article Detail Page (LIGHT MODE)
   ========================================================================== */

/* Breadcrumb */
.breadcrumb {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg2);
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--bd);
}

.breadcrumb a {
  color: var(--tx3);
  transition: color .2s;
}

.breadcrumb a:hover {
  color: var(--rubrik-color);
}

.breadcrumb .bc-sep {
  color: var(--bd2);
}

/* Article layout — 2-column grid */
.art-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

.art-main {
  min-width: 0;
}

.art-sidebar {
  position: sticky;
  top: 80px;
  align-self: start;
}

/* Article rubrik badge */
.art-rubrik {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--rubrik-color);
  padding: 3px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Article title */
.art-title {
  font-family: var(--font);
  font-size: 36px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--tx);
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

/* Article lead / excerpt */
.art-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--tx2);
  border-left: 3px solid var(--rubrik-color);
  padding-left: 20px;
  margin-bottom: 24px;
}

/* Meta bar */
.art-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 14px 0;
  border-top: 1px solid var(--bd);
  border-bottom: 1px solid var(--bd);
  margin-bottom: 24px;
}

.art-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.art-meta .meta-dot {
  width: 3px;
  height: 3px;
  background: var(--tx3);
  border-radius: 50%;
}

/* Article score badge */
.art-score {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--rubrik-color);
  padding: 3px 10px;
  border-radius: 6px;
  margin-left: auto;
}

.art-score-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
}

/* Share bar */
.share-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
}

.share-btn {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--bd);
  padding: 6px 14px;
  border-radius: 20px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}

.share-btn:hover {
  color: var(--rubrik-color);
  border-color: var(--rubrik-color);
  background: var(--bg);
}

/* Hero image */
.art-hero-img {
  width: 100%;
  height: 300px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.art-hero-img .art-hero-watermark {
  font-family: var(--font);
  font-size: 80px;
  font-weight: 900;
  color: rgba(0,0,0,.03);
  text-transform: uppercase;
  position: absolute;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.art-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-hero-img svg {
  width: 120px;
  height: 120px;
  opacity: .08;
}

/* Article body */
.art-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--tx2);
}

.art-body p {
  margin-bottom: 1.4em;
}

.art-body h2 {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  color: var(--tx);
  margin: 2em 0 .8em;
  padding-left: 16px;
  border-left: 3px solid var(--rubrik-color);
}

.art-body h3 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  margin: 1.6em 0 .6em;
}

.art-body ul,
.art-body ol {
  margin: 0 0 1.4em 1.4em;
}

.art-body ul { list-style: disc; }
.art-body ol { list-style: decimal; }

.art-body li {
  margin-bottom: .4em;
  color: var(--tx2);
}

.art-body a {
  color: var(--rubrik-color);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(0,0,0,.15);
}

.art-body a:hover {
  text-decoration-color: var(--rubrik-color);
}

.art-body strong {
  color: var(--tx);
  font-weight: 700;
}

.art-body blockquote {
  border-left: 3px solid var(--rubrik-color);
  padding: 12px 20px;
  margin: 1.4em 0;
  background: var(--bg2);
  border-radius: 0 var(--rad) var(--rad) 0;
  font-style: italic;
  color: var(--tx2);
}

.art-body code {
  font-family: var(--mono);
  font-size: .85em;
  background: var(--bg2);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--tx);
}

.art-body pre {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 16px 20px;
  overflow-x: auto;
  margin: 1.4em 0;
}

.art-body pre code {
  background: none;
  padding: 0;
  font-size: 14px;
}

.art-body hr {
  border: none;
  border-top: 1px solid var(--bd);
  margin: 32px 0;
}

/* Back link — pill button style */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--bd);
  padding: 8px 20px;
  border-radius: 20px;
  transition: color .2s, border-color .2s;
  margin-top: 32px;
}

.back-link:hover {
  color: var(--rubrik-color);
  border-color: var(--rubrik-color);
}

/* ==========================================================================
   C. Article Content Modules (LIGHT MODE)
   ========================================================================== */

/* Verdict */
.mod-verdict {
  border-left: 4px solid var(--rubrik-color);
  background: var(--bg2);
  padding: 20px 24px;
  margin: 2em 0;
  border-radius: 0 var(--rad) var(--rad) 0;
}

.mod-verdict h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--rubrik-color);
  margin-bottom: 10px;
}

.mod-verdict p {
  font-size: 15px;
  color: var(--tx2);
  margin-bottom: 0;
}

/* Source */
.mod-source {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 14px 18px;
  margin: 1.6em 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mod-source .src-label {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--tx3);
  letter-spacing: .08em;
}

.mod-source a {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--rubrik-color);
  word-break: break-all;
}

/* Quote — large opening quote mark */
.mod-quote {
  position: relative;
  padding: 24px 28px 24px 60px;
  margin: 2em 0;
  background: var(--bg2);
  border-radius: var(--rad);
  border: 1px solid var(--bd);
}

.mod-quote::before {
  content: '\201C';
  position: absolute;
  top: 10px;
  left: 18px;
  font-family: Georgia, serif;
  font-size: 72px;
  color: var(--rubrik-color);
  line-height: 1;
  opacity: .3;
}

.mod-quote p {
  font-size: 17px;
  font-style: italic;
  color: var(--tx);
  line-height: 1.6;
  margin-bottom: 8px;
}

.mod-quote cite {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-style: normal;
}

/* Facts list — colored bullets */
.mod-facts {
  margin: 1.6em 0;
  padding: 20px 24px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
}

.mod-facts h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--tx);
  margin-bottom: 14px;
}

.mod-facts ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-facts li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--tx2);
}

.mod-facts li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: var(--rubrik-color);
  border-radius: 50%;
}

/* Pro/Con/Timeline/Compare module headings */
h3.mod-pro {
  color: #0F6E56;
  border-left: 3px solid #1D9E75;
  padding-left: 12px;
  margin: 1.2em 0 .4em;
}

h3.mod-con {
  color: #A32D2D;
  border-left: 3px solid #E24B4A;
  padding-left: 12px;
  margin: 1.2em 0 .4em;
}

h3.mod-timeline {
  color: var(--rubrik-color, var(--tx));
  border-left: 3px solid var(--rubrik-color, var(--bd2));
  padding-left: 12px;
  margin: 1.2em 0 .4em;
}

h3.mod-compare {
  color: var(--tx);
  background: var(--bg2);
  padding: 8px 14px;
  border-radius: 6px;
  margin: 1.2em 0 .4em;
}

h3.mod-meaning {
  color: var(--rubrik-color, var(--tx));
  font-size: 16px;
  margin: 1.4em 0 .4em;
}

/* Pro list items get green bullets */
h3.mod-pro + .mod-facts li::before {
  background: #1D9E75;
}

/* Con list items get red bullets */
h3.mod-con + .mod-facts li::before {
  background: #E24B4A;
}

/* Timeline list items get left border */
h3.mod-timeline + .mod-facts {
  border-left: 2px solid var(--rubrik-color, var(--bd2));
  padding-left: 16px;
  margin-left: 8px;
}

h3.mod-timeline + .mod-facts li {
  padding-left: 0;
}

h3.mod-timeline + .mod-facts li::before {
  display: none;
}

/* Info box */
.mod-info {
  background: var(--bg2);
  border: 1px solid var(--rubrik-color);
  border-left: 4px solid var(--rubrik-color);
  border-radius: 0 var(--rad) var(--rad) 0;
  padding: 18px 22px;
  margin: 1.6em 0;
}

.mod-info h3 {
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  color: var(--rubrik-color);
  margin-bottom: 8px;
}

.mod-info p {
  font-size: 14px;
  color: var(--tx2);
  margin-bottom: 0;
}

/* Pro/Con — 2-column grid */
.mod-procon {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 2em 0;
}

.mod-procon .pro,
.mod-procon .con {
  background: var(--bg2);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 18px 20px;
}

.mod-procon .pro {
  border-top: 3px solid var(--nm-agents);
}

.mod-procon .con {
  border-top: 3px solid var(--nm-hot);
}

.mod-procon h4 {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 10px;
}

.mod-procon .pro h4 { color: var(--nm-agents); }
.mod-procon .con h4 { color: var(--nm-hot); }

.mod-procon ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mod-procon li {
  font-size: 14px;
  color: var(--tx2);
  padding: 4px 0;
  padding-left: 14px;
  position: relative;
}

.mod-procon .pro li::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--nm-agents);
  font-weight: 700;
}

.mod-procon .con li::before {
  content: '\2212';
  position: absolute;
  left: 0;
  color: var(--nm-hot);
  font-weight: 700;
}

/* Tags — pill-style */
.mod-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2em 0;
  padding-top: 20px;
  border-top: 1px solid var(--bd);
}

.mod-tags a {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--bd);
  padding: 4px 14px;
  border-radius: 20px;
  text-transform: lowercase;
  transition: color .2s, border-color .2s, background .2s;
}

.mod-tags a:hover {
  color: var(--rubrik-color);
  border-color: var(--rubrik-color);
  background: var(--bg);
}

/* Related articles */
.related-section {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--bd);
}

.related-section h2 {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 20px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rel-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  overflow: hidden;
  transition: border-color .3s, transform .2s, box-shadow .3s;
}

.rel-card:hover {
  border-color: var(--bd2);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.rel-img {
  height: 120px;
  background: var(--bg2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.rel-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rel-img .rel-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--rubrik-color);
  padding: 2px 7px;
  border-radius: 6px;
}

.rel-body {
  padding: 14px;
}

.rel-rubrik {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}

.rel-hl,
.rel-title {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.25;
  margin-bottom: 8px;
  transition: color .2s;
}

.rel-card:hover .rel-hl,
.rel-card:hover .rel-title {
  color: var(--rubrik-color);
}

.rel-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ==========================================================================
   D. Company / Product Info-Box (LIGHT MODE)
   ========================================================================== */
.ci-box {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.ci-head {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  padding: 20px 20px 12px;
  border-bottom: 1px solid var(--bd);
}

.ci-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--bd);
}

.ci-logo {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  object-fit: contain;
  background: #fff;
  padding: 8px;
  border: 1px solid var(--bd);
  flex-shrink: 0;
}

.ci-logo-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.ci-identity {
  flex: 1;
  min-width: 0;
}

.ci-name {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  color: var(--tx);
  line-height: 1.15;
  margin-bottom: 5px;
}

.ci-type {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--tx3);
}

.ci-desc {
  padding: 14px 20px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tx2);
  border-bottom: 1px solid var(--bd);
}

/* Gallery (horizontal scroll-snap) */
.ci-gallery-wrap {
  position: relative;
  border-bottom: 1px solid var(--bd);
}

.ci-gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ci-gallery::-webkit-scrollbar {
  display: none;
}

.ci-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
}

.ci-slide img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.ci-slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 16px 10px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(255,255,255,.85);
  letter-spacing: .03em;
}

.ci-slide-caption em {
  color: #fff;
  font-style: normal;
  font-weight: 600;
}

/* Prev/Next arrows (light mode: white bg, dark text) */
.ci-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--bd2);
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(4px);
  color: var(--tx);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s, background .2s;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.ci-gallery-wrap:hover .ci-arrow {
  opacity: 1;
}

.ci-arrow:hover {
  background: #fff;
  border-color: var(--rubrik-color);
  color: var(--rubrik-color);
}

.ci-arrow--prev { left: 8px; }
.ci-arrow--next { right: 8px; }

/* Counter badge */
.ci-counter {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx2);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  padding: 2px 8px;
  border-radius: 10px;
  z-index: 2;
  letter-spacing: .04em;
}

.ci-gallery-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--bd);
}

.ci-gallery-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--bd2);
  display: inline-block;
}

.ci-gallery-dot:first-child {
  background: var(--rubrik-color, var(--tx3));
}

/* Facts grid */
.ci-facts {
  padding: 4px 20px;
}

.ci-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}

.ci-row:last-child {
  border-bottom: none;
}

.ci-k {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  flex-shrink: 0;
}

.ci-v {
  color: var(--tx);
  font-weight: 500;
  text-align: right;
}

.ci-section-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 12px 20px 6px;
}

/* Founders list */
.ci-founders {
  padding: 0 20px 12px;
  font-size: 13px;
  color: var(--tx2);
  line-height: 1.5;
  border-bottom: 1px solid var(--bd);
}

/* Product tags (pill style) */
.ci-products {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 20px 14px;
  border-bottom: 1px solid var(--bd);
}

.ci-product-tag {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--bg2);
  border: 1px solid var(--bd);
  color: var(--tx2);
  transition: border-color .2s, color .2s;
}

.ci-product-tag:hover {
  border-color: var(--rubrik-color);
  color: var(--tx);
}

/* Rating visualization */
.ci-rating {
  padding: 14px 20px;
  border-bottom: 1px solid var(--bd);
}

.ci-rating-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.ci-rating-bar {
  height: 6px;
  background: var(--bg3);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 6px;
}

.ci-rating-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--rubrik-color, var(--nm-geld));
  transition: width .6s ease;
}

.ci-rating-value {
  font-family: var(--font);
  font-size: 22px;
  font-weight: 800;
  color: var(--tx);
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ci-rating-value small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tx3);
  font-weight: 400;
}

/* Wikipedia / website buttons */
.ci-links {
  display: flex;
  gap: 8px;
  padding: 14px 20px;
}

.ci-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 0;
  border-radius: 20px;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tx2);
  background: var(--bg2);
  border: 1px solid var(--bd);
  text-decoration: none;
  transition: border-color .2s, color .2s;
}

.ci-link:hover {
  border-color: var(--rubrik-color);
  color: var(--rubrik-color);
}

/* ==========================================================================
   E. Sidebar Boxes (article page, LIGHT MODE)
   ========================================================================== */
.s-box {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.s-head {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: .02em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--bd);
}

.s-facts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--bd);
  font-size: 13px;
}

.s-facts-row:last-child {
  border-bottom: none;
}

.s-facts-k,
.s-facts-row .s-label {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.s-facts-v,
.s-facts-row .s-value {
  color: var(--tx);
  font-weight: 500;
}

.s-art {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd);
  transition: background .2s;
  border-radius: 6px;
}

.s-art:last-child {
  border-bottom: none;
}

.s-art:hover {
  background: var(--bg2);
}

.s-art-img {
  width: 60px;
  height: 50px;
  background: var(--bg2);
  border-radius: 6px;
  flex-shrink: 0;
  overflow: hidden;
}

.s-art-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.s-art-body {
  flex: 1;
  min-width: 0;
}

.s-art-title {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--tx);
  line-height: 1.25;
  margin-bottom: 3px;
  transition: color .2s;
}

.s-art:hover .s-art-title {
  color: var(--rubrik-color);
}

.s-art-rubrik {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--rubrik-color);
  margin-bottom: 2px;
}

.s-art-time,
.s-art-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ==========================================================================
   F. Search Page (LIGHT MODE)
   ========================================================================== */
.search-hero {
  text-align: center;
  padding: 60px 20px 40px;
  max-width: 700px;
  margin: 0 auto;
}

.search-hero h1 {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 24px;
}

.search-hero-form {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}

.search-hero-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--tx);
  background: var(--bg);
  border: 2px solid var(--bd2);
  border-radius: var(--rad);
  padding: 14px 20px 14px 48px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.search-hero-input::placeholder {
  color: var(--tx3);
}

.search-hero-input:focus {
  border-color: var(--rubrik-color);
  box-shadow: 0 0 0 4px rgba(226,75,74,.08);
}

.search-hero-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: var(--tx3);
  pointer-events: none;
}

.search-hero-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.search-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
  max-width: 1040px;
  margin: 0 auto 24px;
  padding: 0 20px;
}

.search-meta strong {
  color: var(--tx);
}

.search-results {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-result-card {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--rad);
  padding: 20px 24px;
  display: flex;
  gap: 20px;
  transition: border-color .3s, box-shadow .3s;
}

.search-result-card:hover {
  border-color: var(--bd2);
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.sr-img {
  width: 120px;
  height: 90px;
  background: var(--bg2);
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sr-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sr-body {
  flex: 1;
  min-width: 0;
}

.sr-rubrik {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #fff;
  background: var(--rubrik-color);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.sr-title {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  color: var(--tx);
  line-height: 1.2;
  margin-bottom: 8px;
  transition: color .2s;
}

.search-result-card:hover .sr-title {
  color: var(--rubrik-color);
}

.sr-excerpt {
  font-size: 14px;
  color: var(--tx2);
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sr-excerpt mark {
  background: rgba(226,75,74,.1);
  color: var(--tx);
  padding: 0 2px;
  border-radius: 2px;
}

.sr-meta {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  max-width: 500px;
  margin: 0 auto;
}

.no-results h2 {
  font-family: var(--font);
  font-size: 24px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 12px;
}

.no-results p {
  font-size: 15px;
  color: var(--tx3);
}

/* ==========================================================================
   G. Legal Pages
   ========================================================================== */
.legal-page {
  max-width: 740px;
  margin: 0 auto;
  padding: 40px 20px 80px;
}

.legal-page h1 {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  color: var(--tx);
  margin-bottom: 32px;
}

.legal-page h2 {
  font-family: var(--font);
  font-size: 20px;
  font-weight: 700;
  color: var(--rubrik-color);
  margin: 2em 0 .8em;
}

.legal-page h3 {
  font-family: var(--font);
  font-size: 17px;
  font-weight: 700;
  color: var(--tx);
  margin: 1.6em 0 .6em;
}

.legal-page p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--tx2);
  margin-bottom: 1em;
}

.legal-page a {
  color: var(--rubrik-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-page ul, .legal-page ol {
  margin: 0 0 1.2em 1.4em;
  list-style: disc;
}

.legal-page ol { list-style: decimal; }

.legal-page li {
  font-size: 15px;
  color: var(--tx2);
  margin-bottom: .4em;
}

/* ==========================================================================
   Rubrik page
   ========================================================================== */
.rubrik-hero {
  padding: 36px 0 28px;
  margin-bottom: 32px;
  border-bottom: 2px solid var(--rubrik-color);
}

.rubrik-hero h1 {
  font-family: var(--font);
  font-size: 32px;
  font-weight: 800;
  color: var(--rubrik-color);
  margin-bottom: 6px;
}

.rubrik-hero .rubrik-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--tx3);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.rubrik-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 40px;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 20px 0 60px;
}

.pagination a,
.pagination span {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pagination a {
  color: var(--rubrik-color);
  border: 1px solid var(--rubrik-color);
  padding: 8px 18px;
  border-radius: 20px;
  transition: background .2s, color .2s;
}

.pagination a:hover {
  background: var(--rubrik-color);
  color: #fff;
}

.pagination .pg-current {
  color: var(--tx3);
}

.pagination .pg-disabled {
  color: var(--bd2);
  border: 1px solid var(--bd);
  padding: 8px 18px;
  border-radius: 20px;
  cursor: not-allowed;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--tx3);
}

.empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
}

.empty-state h2 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--tx2);
}

/* --------------------------------------------------------------------------
   Rubrik-specific section color overrides
   -------------------------------------------------------------------------- */
.section.hot { --rubrik-color: var(--nm-hot); }
.section.tools { --rubrik-color: var(--nm-tools); }
.section.agents { --rubrik-color: var(--nm-agents); }
.section.founder { --rubrik-color: var(--nm-founder); }
.section.geld { --rubrik-color: var(--nm-geld); }
.section.bullshit { --rubrik-color: var(--nm-bs); }
.section.ki-crime { --rubrik-color: var(--nm-crime); }
.section.experimental { --rubrik-color: var(--nm-exp); }
.section.skills { --rubrik-color: var(--nm-skills); }

/* ==========================================================================
   H. Responsive Breakpoints
   ========================================================================== */

/* ---------- Tablet (max 1024px) ---------- */
@media (max-width: 1024px) {
  .sl {
    grid-template-columns: 1fr;
  }

  .sb {
    grid-template-columns: 1fr;
  }

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

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

  .hg {
    grid-template-columns: 1fr;
  }

  .duo {
    grid-template-columns: 1fr;
  }

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

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

  .art-layout {
    grid-template-columns: 1fr;
  }

  .art-sidebar {
    position: static;
  }

  .hh {
    font-size: 20px;
  }

  .art-title {
    font-size: 28px;
  }

  .mod-procon {
    grid-template-columns: 1fr;
  }
}

/* ---------- Mobile (max 768px) ---------- */
@media (max-width: 768px) {
  /* Nav: hide desktop items, show hamburger */
  .nav > a:not(.nav-more-btn) {
    display: none;
  }

  .nav-search {
    display: none;
  }

  .hdr {
    padding: 8px 16px;
  }

  .wrap {
    padding: 0 12px 40px;
  }

  .ag {
    grid-template-columns: 1fr;
  }

  .arts {
    grid-template-columns: 1fr;
  }

  .logo {
    font-size: 22px;
  }

  .hh {
    font-size: 18px;
  }

  .hi {
    height: 180px;
  }

  .art-title {
    font-size: 24px;
  }

  .art-hero-img {
    height: 200px;
  }

  .related-grid {
    grid-template-columns: 1fr 1fr;
  }

  .rubrik-grid {
    grid-template-columns: 1fr;
  }

  .rubrik-hero h1 {
    font-size: 24px;
  }

  .search-hero h1 {
    font-size: 24px;
  }

  .search-result-card {
    flex-direction: column;
  }

  .sr-img {
    width: 100%;
    height: 140px;
  }

  .share-bar {
    flex-wrap: wrap;
  }

  .sb {
    display: block;
  }

  .art-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .art-score {
    margin-left: 0;
  }

  .breadcrumb {
    font-size: 10px;
    padding: 8px 12px;
  }

  .footer-inner {
    text-align: center;
  }

  .ftt {
    justify-content: center;
  }

  .ci-slide img {
    height: 160px;
  }

  .ticker .tl {
    font-size: 10px;
  }
}

/* ---------- Small mobile (max 480px) ---------- */
@media (max-width: 480px) {
  nav a {
    padding: 4px 8px;
    font-size: 10px;
  }

  .abo {
    padding: 12px;
  }

  .ah {
    font-size: 14px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .art-title {
    font-size: 22px;
  }

  .legal-page h1 {
    font-size: 24px;
  }

  .mod-procon {
    grid-template-columns: 1fr;
  }
}