/*!
 * WG 2026 Mobile Nuclear Override (10.05.2026 v3)
 * UCSS-safe: KEIN @media-Wrapper fuer Color-Regeln (sonst entfernt WP-Rocket UCSS sie!)
 * Layout-Regeln (Sticky/Padding) bleiben in @media — nur Mobile.
 */

/* ============================================================
   COLOR-OVERRIDES (sitewide, UCSS-safe)
   Diese Regeln gelten Desktop + Mobile — kein Konflikt weil
   2026-Templates ohnehin Charcoal-BG mit weisser Schrift sind
   ============================================================ */

/* Background sitewide */
html body.wg-2026,
html body.wg-2026 main,
html body.wg-2026 #content,
html body.wg-2026 .grid-container,
html body.wg-2026 article,
html body.wg-2026 .entry-content,
html body.wg-2026 .wg-section,
html body.wg-2026 section {
  background: #14141a !important;
  color: #ffffff !important;
}

/* Alle Text-Elemente weiss */
html body.wg-2026 p,
html body.wg-2026 li,
html body.wg-2026 span:not(.wg-genre-tag):not(.wg-tag-meta):not(.wg-cd-num):not(.wg-cd-label):not(.wg-pcm-av):not(.wg-av):not(.wg-av-big):not(.wg-kn-av-big),
html body.wg-2026 article p,
html body.wg-2026 article li,
html body.wg-2026 .wg-article-body p,
html body.wg-2026 .wg-article-body li,
html body.wg-2026 .wg-article-body span,
html body.wg-2026 .entry-content p,
html body.wg-2026 .entry-content li,
html body.wg-2026 .wg-section p,
html body.wg-2026 .wg-section li,
html body.wg-2026 .wg-author-section p,
html body.wg-2026 .wg-author-section span,
html body.wg-2026 .wg-related-section p,
html body.wg-2026 .wg-related-card h5,
html body.wg-2026 .wg-related-card span,
html body.wg-2026 .wg-toc-card,
html body.wg-2026 .wg-toc-card a,
html body.wg-2026 .wg-toc-card li,
html body.wg-2026 .wg-cta-card p {
  color: #ffffff !important;
}

/* Strong/Bold extra hell */
html body.wg-2026 strong,
html body.wg-2026 b {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Headlines Orange */
html body.wg-2026 .wg-article-body h2,
html body.wg-2026 .wg-article-body h3,
html body.wg-2026 .wg-section h2,
html body.wg-2026 .wg-section h3,
html body.wg-2026 .wg-related-section h2,
html body.wg-2026 .wg-comments-section h3,
html body.wg-2026 .wg-reactions-section h3,
html body.wg-2026 .wg-toc-card h4 {
  color: #ff6b00 !important;
}

/* Hero h1 weiss */
html body.wg-2026 .wg-hero h1,
html body.wg-2026 .wg-cat-hero h1,
html body.wg-2026 .wg-kn-hero h1 {
  color: #ffffff !important;
}

/* Links Orange */
html body.wg-2026 article a,
html body.wg-2026 .wg-article-body a,
html body.wg-2026 .entry-content a,
html body.wg-2026 .wg-author-section a,
html body.wg-2026 .wg-related-section a,
html body.wg-2026 .wg-section a {
  color: #ff6b00 !important;
}
html body.wg-2026 article a:hover,
html body.wg-2026 .wg-article-body a:hover {
  color: #ff8533 !important;
}

/* Avatare schwarzer Text auf hellen Akzenten */
html body.wg-2026 .wg-av,
html body.wg-2026 .wg-av-big,
html body.wg-2026 .wg-pcm-av,
html body.wg-2026 .wg-kn-av-big,
html body.wg-2026 .wg-kn-rank {
  color: #000 !important;
  font-weight: 800 !important;
}

/* Plugin-Override: wg-bewertung Box (sonst zu dunkel auf Mobile) */
html body.wg-2026 .wg-bewertung-box,
html body.wg-2026 .wg-bewertung-box p,
html body.wg-2026 .wg-bewertung-box li,
html body.wg-2026 .wg-bewertung-box span {
  color: #ffffff !important;
}
html body.wg-2026 .wg-bewertung-box strong {
  color: #ff6b00 !important;
}

/* ============================================================
   MOBILE-NUR LAYOUT (in @media, da nur Mobile gebraucht)
   ============================================================ */
@media (max-width: 1024px) {
  html body.wg-2026 .wg-article-body,
  html body.wg-2026 .wg-article-body p,
  html body.wg-2026 .wg-article-body li {
    font-size: 17px !important;
    line-height: 1.7 !important;
  }
  html body.wg-2026 .wg-article-body h2 {
    font-size: 26px !important;
    line-height: 1.25 !important;
  }
  html body.wg-2026 .wg-article-body h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
  }

  /* Sidebar in Flow auf Mobile */
  html body.wg-2026 .wg-toc-sidebar,
  html body.wg-2026 .wg-cta-card,
  html body.wg-2026 .wg-persona-card-mini,
  html body.wg-2026 .wg-article-grid > aside {
    position: static !important;
    width: 100% !important;
    margin-top: 24px !important;
  }
  html body.wg-2026 .wg-article-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Container Padding Mobile */
  html body.wg-2026 .wg-article-wrap,
  html body.wg-2026 .wg-section,
  html body.wg-2026 .wg-s-inner {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Breadcrumb-Marker raus (sitewide) */
html body.wg-2026 .wg-breadcrumbs ol,
html body.wg-2026 nav.wg-breadcrumbs ol,
html body.wg-2026 .wg-breadcrumbs ol li {
  list-style: none !important;
  list-style-type: none !important;
}
html body.wg-2026 .wg-breadcrumbs ol li::marker {
  content: "" !important;
  display: none !important;
}