/* ================================
   Alltagsfuchs Darkmode Styles – unified backgrounds
   ================================ */

html.dark-mode {
  --af-primary: #ff7518;        /* Orange Akzent */
  --af-bg-main: #1c1c1c;        /* Globaler Hintergrund */
  --af-bg-card: #2a2a2a;        /* Boxen, Widgets */
  --af-text-dark: #ffffff;      /* Überschriften */
  --af-text-body: #e5e5e5;      /* Fließtext */
  --af-text-light: #aaaaaa;     /* Meta, kleine Infos */
  --af-border-color: #333333;   /* Rahmen */
}

/* Globale Hintergründe – alles einheitlich */
html.dark-mode,
html.dark-mode body,
html.dark-mode .site,
html.dark-mode .site-content,
html.dark-mode .site-main,
html.dark-mode .site-header,
html.dark-mode .main-navigation,
html.dark-mode #site-navigation,
html.dark-mode .inside-navigation {
  background-color: var(--af-bg-main) !important;
  color: var(--af-text-body);
}

/* Typografie */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode .entry-title,
html.dark-mode .af-post-title {
  color: var(--af-text-dark);
}

html.dark-mode a {
  color: var(--af-primary);
}
html.dark-mode a:hover {
  color: #ffa366;
}

/* Navigation Links */
html.dark-mode .main-navigation .menu a {
  color: var(--af-text-body);
}
html.dark-mode .main-navigation .menu a:hover {
  color: var(--af-primary);
}

/* Footer */
html.dark-mode .site-footer {
  background-color: var(--af-bg-main);
  color: var(--af-text-light);
}
html.dark-mode .site-footer a {
  color: var(--af-primary);
}
html.dark-mode .site-footer a:hover {
  color: #ffa366;
}

/* Boxen & Widgets – abgesetzt */
html.dark-mode .widget,
html.dark-mode .af-note,
html.dark-mode .af-praxisbox-gm,
html.dark-mode .foxdisclaimer-gm,
html.dark-mode .af-infobox-gm,
html.dark-mode .final-feature-post,
html.dark-mode .final-teaser-card,
html.dark-mode .final-horizontal-card,
html.dark-mode .atkp-container,
html.dark-mode .atkp-box,
html.dark-mode .atkp-smallbox,
html.dark-mode .atkp-producttable-wrapper {
  background-color: var(--af-bg-card);
  border: 1px solid var(--af-border-color);
  color: var(--af-text-body);
}

html.dark-mode .widget-title,
html.dark-mode .af-note-title,
html.dark-mode .af-praxisbox-gm-title,
html.dark-mode .atkp-title {
  color: var(--af-text-dark);
}

/* Suchfeld */
html.dark-mode .search-form input[type="search"] {
  background-color: var(--af-bg-card);
  border: 1px solid var(--af-border-color);
  color: var(--af-text-dark);
}
html.dark-mode .search-form input::placeholder {
  color: var(--af-text-light);
}
html.dark-mode .search-form button {
  background-color: var(--af-primary);
  color: #fff;
}

/* Buttons */
html.dark-mode .btn,
html.dark-mode .af-btn,
html.dark-mode .btn-contact {
  background-color: var(--af-primary);
  color: #fff;
  border: none;
}
html.dark-mode .btn:hover,
html.dark-mode .af-btn:hover,
html.dark-mode .btn-contact:hover {
  background-color: #ffa366;
}

/* Social Icons (Topbar bleibt dunkel) */
html.dark-mode .af-social-icons a {
  color: #ffffff;
}
html.dark-mode .af-social-icons a:hover {
  color: var(--af-primary);
}

/* Headlines extra hell */
html.dark-mode h1,
html.dark-mode .entry-title {
  color: #f8f8f8 !important; /* fast weiß */
}

/* Navigation-Links im Darkmode hell */
@media (min-width:1025px) {
  html.dark-mode nav#site-navigation .main-nav > ul > li > a,
  html.dark-mode .main-navigation .main-nav > ul > li > a,
  html.dark-mode .main-navigation .menu > li > a {
    color: var(--af-text-body) !important; /* hell */
  }

  /* Hover/Focus etwas akzentuieren */
  html.dark-mode nav#site-navigation .main-nav > ul > li:hover > a,
  html.dark-mode nav#site-navigation .main-nav > ul > li:focus > a,
  html.dark-mode .main-navigation .menu > li:hover > a,
  html.dark-mode .main-navigation .menu > li:focus > a {
    color: var(--af-primary) !important;
  }

  /* Aktiver Menüpunkt leicht heller */
  html.dark-mode .main-navigation .current-menu-item > a,
  html.dark-mode .main-navigation .current-menu-ancestor > a {
    color: #f0f0f0 !important;
  }
}

/* Submenu-Links ebenfalls aufhellen */
html.dark-mode .main-navigation .sub-menu a {
  color: var(--af-text-body) !important;
}
html.dark-mode .main-navigation .sub-menu a:hover {
  color: var(--af-primary) !important;
}

/* Aktiver Menüpunkt soll im Darkmode keinen abgesetzten Hintergrund haben */
html.dark-mode .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background: var(--af-bg-main) !important; /* gleiche Farbe wie Site-Hintergrund */
  color: var(--af-text-body) !important;   /* Text bleibt hell */
}

/* optional: beim Hover trotzdem Orange */
html.dark-mode .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
  color: var(--af-primary) !important;
}

/* Dropdown-Menüs im Darkmode */
html.dark-mode .main-navigation ul ul,
html.dark-mode .main-navigation .sub-menu,
html.dark-mode #site-navigation .sub-menu {
  background-color: var(--af-bg-card) !important; /* dunkler Hintergrund */
  border: 1px solid var(--af-border-color);
}

html.dark-mode .main-navigation ul ul li a,
html.dark-mode .main-navigation .sub-menu li a {
  color: var(--af-text-body) !important;   /* helle Schrift */
}

html.dark-mode .main-navigation ul ul li a:hover,
html.dark-mode .main-navigation .sub-menu li a:hover {
  background-color: var(--af-bg-main) !important; /* etwas dunkler beim Hover */
  color: var(--af-primary) !important;           /* orange beim Hover */
}

/* Fix: Dropdown Hover im Darkmode */
html.dark-mode .main-navigation ul ul li:hover > a,
html.dark-mode .main-navigation .sub-menu li:hover > a {
  background-color: var(--af-bg-main) !important; /* kein weiß mehr */
  color: var(--af-primary) !important;            /* orange text beim hover */
}

/* Metabox */
html.dark-mode .article-meta {
  background: #2a2a2a;
}

/* Fix: About-Section im Darkmode */
html.dark-mode .af-home .about {
  background: var(--af-bg-card) !important; /* gleich wie Boxen */
  color: var(--af-text-body);
}

/* Fix: Hintergrund latest posts */
html.dark-mode .af-latest-posts-widget {
background-color: #6c757d;
}

/* Wichtigste in Kürze – Darkmode Fix */
html.dark-mode .af-tldr-box,
html.dark-mode .af-tldr-box li {
  background-color: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
}

html.dark-mode .af-tldr-box li b,
html.dark-mode .af-tldr-box li strong {
  color: var(--af-text-dark) !important;
}


/*TOC*/
html.dark-mode .entry-content .alltoc {
  background:#2a2a2a;
}

/* ================================
   Spezielle Boxen im Darkmode
   ================================ */

/* Inhaltsverzeichnis (TOC) */
html.dark-mode .toc,
html.dark-mode .toc_container {
  background-color: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
}
html.dark-mode .toc a {
  color: var(--af-text-body) !important;
}
html.dark-mode .toc a:hover {
  color: var(--af-primary) !important;
}

/* Disclaimer Box */
html.dark-mode .foxdisclaimer-gm,
html.dark-mode .foxdisclaimer {
  background-color: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}
html.dark-mode .foxdisclaimer-gm-title {
  color: var(--af-text-dark) !important;
}

/* Wichtigste in Kürze */
html.dark-mode .af-note {
  background-color: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}
html.dark-mode .af-note-title {
  color: var(--af-text-dark) !important;
}

/* Infobox */
html.dark-mode .af-infobox-gm {
  background-color: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}
html.dark-mode .af-infobox-gm-title {
  color: var(--af-text-dark) !important;
}

/* FAQ Boxen */
html.dark-mode .schema-faq,
html.dark-mode .schema-faq-section,
html.dark-mode .faq,
html.dark-mode .faq-section {
  background-color: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}
html.dark-mode .schema-faq-question,
html.dark-mode .faq-question {
  color: var(--af-text-dark) !important;
}
html.dark-mode .schema-faq-answer,
html.dark-mode .faq-answer {
  color: var(--af-text-body) !important;
}

/* ===================================
   Fix: Texte in Boxen und TOC auf fast weiß
   =================================== */

/* Disclaimer-Box Texte */
html.dark-mode .foxdisclaimer-gm-text p,
html.dark-mode .foxdisclaimer-gm-text strong,
html.dark-mode .foxdisclaimer-gm-text b {
  color: var(--af-text-body) !important;
}

/* Praxisbox Texte */
html.dark-mode .af-praxisbox-gm-body p,
html.dark-mode .af-praxisbox-gm-body strong,
html.dark-mode .af-praxisbox-gm-body b {
  color: var(--af-text-body) !important;
}

/* Inhaltsverzeichnis (TOC) Links + Text */
html.dark-mode .entry-content .alltoc,
html.dark-mode .entry-content .alltoc a {
  color: var(--af-text-body) !important;
}

/* Generell: <b> und <strong> überall im Darkmode */
html.dark-mode b,
html.dark-mode strong {
  color: var(--af-text-dark) !important; /* fast weiß */
}
/* ===================================
   FAQ-Boxen im Darkmode
   =================================== */
html.dark-mode .faqblock {
  background: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}

html.dark-mode .faqblock h2,
html.dark-mode .faqblock h3,
html.dark-mode .faqblock h4 {
  color: var(--af-text-dark) !important; /* fast weiß für Fragen */
}

html.dark-mode .faqblock p,
html.dark-mode .faqblock li {
  color: var(--af-text-body) !important; /* heller Fließtext */
}

html.dark-mode .faqblock strong,
html.dark-mode .faqblock b {
  color: var(--af-text-dark) !important; /* für Hervorhebungen */
}

/* ===================================
   Infobox im Darkmode
   =================================== */
html.dark-mode .af-infobox-gm,
html.dark-mode .af-infobox-gm-body {
  background: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}

html.dark-mode .af-infobox-gm-body p {
  color: var(--af-text-body) !important;
}

html.dark-mode .af-infobox-gm-body strong,
html.dark-mode .af-infobox-gm-body b {
  color: var(--af-text-dark) !important;
}

/* ===================================
   Feedback Container Darkmode
   =================================== */
html.dark-mode .af-feedback-container {
  background: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
  box-shadow: none !important; /* die helle Box-Shadow weg */
}

html.dark-mode .af-feedback-container h2,
html.dark-mode .af-feedback-container h3,
html.dark-mode .af-feedback-container h4 {
  color: var(--af-text-dark) !important;
}

html.dark-mode .af-feedback-container p,
html.dark-mode .af-feedback-message {
  color: var(--af-text-body) !important;
}

html.dark-mode .af-feedback-container strong,
html.dark-mode .af-feedback-container b {
  color: var(--af-text-dark) !important;
}

/* ===================================
   Feedback Container Darkmode
   =================================== */
html.dark-mode .af-feedback-container {
  background: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
  box-shadow: none !important; /* die helle Box-Shadow weg */
}

html.dark-mode .af-feedback-container h2,
html.dark-mode .af-feedback-container h3,
html.dark-mode .af-feedback-container h4 {
  color: var(--af-text-dark) !important;
}

html.dark-mode .af-feedback-container p,
html.dark-mode .af-feedback-message {
  color: var(--af-text-body) !important;
}

html.dark-mode .af-feedback-container strong,
html.dark-mode .af-feedback-container b {
  color: var(--af-text-dark) !important;
}

/* ================================
   Affiliate-Hinweis – Darkmode
   ================================ */
html.dark-mode .affiliate-hinweis-bestenliste {
  background: var(--af-bg-card) !important;
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
}

html.dark-mode .affiliate-hinweis-bestenliste .affiliate-title {
  color: var(--af-text-dark) !important;
}

html.dark-mode .affiliate-hinweis-bestenliste .affiliate-text {
  color: var(--af-text-body) !important;
}

/* ================================
   Back Button – Darkmode
   ================================ */
html.dark-mode .back-btn {
  background: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
}

html.dark-mode .back-btn:hover {
  background: var(--af-primary) !important;
  color: #fff !important;
}

/* ================================
   Share Button – Darkmode
   ================================ */
html.dark-mode .share-toggle {
  background: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
  box-shadow: none !important;
}

html.dark-mode .share-toggle:hover {
  background: var(--af-primary) !important;
  color: #fff !important;
}

/* ================================
   Article Meta – Darkmode
   ================================ */
html.dark-mode .article-meta,
html.dark-mode .article-meta span,
html.dark-mode .article-meta time,
html.dark-mode .article-meta a,
html.dark-mode .article-meta svg {
  color: var(--af-text-light) !important; /* hellgrau */
  stroke: var(--af-text-light) !important; /* für Icons */
}

html.dark-mode .article-meta a {
  color: var(--af-primary) !important; /* Links in Orange */
}

html.dark-mode .article-meta a:hover {
  color: #ffa366 !important;
}

/* ================================
   Generelle Textfarben im Darkmode
   ================================ */

/* Basis-Texte überall hell machen */
html.dark-mode,
html.dark-mode p,
html.dark-mode li,
html.dark-mode span,
html.dark-mode div,
html.dark-mode section,
html.dark-mode article {
  color: var(--af-text-body) !important; /* fast weiß #e5e5e5 */
}

/* Überschriften extra noch heller */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
  color: var(--af-text-dark) !important; /* weiß #ffffff */
}

/* Starke Hervorhebungen */
html.dark-mode b,
html.dark-mode strong {
  color: var(--af-text-dark) !important;
}

/* Werbung-Label im Darkmode lesbar machen */
html.dark-mode .code-block-label {
  color: var(--af-text-light) !important;  /* hellgrau */
  background: transparent !important;     /* kein weißer Hintergrund */
}

/* Affiliate Hinweis im Darkmode */
html.dark-mode .affiliate-hinweis {
  background: var(--af-bg-card) !important;   /* dunkles Grau */
  border: 1px solid var(--af-border-color);   /* dezente Linie */
  color: var(--af-text-body) !important;      /* fast weißer Text */
}

html.dark-mode .affiliate-hinweis .affiliate-title {
  color: var(--af-text-dark) !important;      /* Überschrift heller */
  font-weight: 600;
}

html.dark-mode .affiliate-hinweis .affiliate-text {
  color: var(--af-text-body) !important;      /* Fließtext in fast weiß */
}

/* Darkmode – Cards im Magazin/Übersicht: Hintergrund = Seitenhintergrund */
html.dark-mode .af-home .mag .card,
html.dark-mode .af-home .tests .card,
html.dark-mode .af-home .featured .card,
html.dark-mode .af-home .authors .card,
html.dark-mode section.af-section.mag .card,
html.dark-mode section.af-section.tests .card,
html.dark-mode section.af-section.featured .card,
html.dark-mode section.af-section.authors .card {
  background-color: var(--af-bg-main) !important;
  border: 1px solid var(--af-border-color) !important;
  box-shadow: none !important;
}

/* Falls ein innerer Wrapper/Excerpt noch Weiß setzt, gleich mit abdunkeln */
html.dark-mode .af-home .mag .card .card-content,
html.dark-mode .af-home .mag .card .entry-summary,
html.dark-mode .af-home .mag .card .excerpt,
html.dark-mode .af-home .mag .card .post-meta,
html.dark-mode .af-home .tests .card .card-content,
html.dark-mode .af-home .tests .card .entry-summary,
html.dark-mode .af-home .featured .card .card-content,
html.dark-mode .af-home .authors .card .card-content {
  background-color: var(--af-bg-main) !important;
}

/* Texte in den Cards gut lesbar */
html.dark-mode .af-home .mag .card h2,
html.dark-mode .af-home .mag .card h3,
html.dark-mode .af-home .mag .card p,
html.dark-mode .af-home .tests .card h2,
html.dark-mode .af-home .tests .card p,
html.dark-mode .af-home .featured .card h2,
html.dark-mode .af-home .featured .card p,
html.dark-mode .af-home .authors .card h2,
html.dark-mode .af-home .authors .card p {
  color: var(--af-text-body) !important;
}

/* Darkmode – ATKP Produkt-Karussell */
html.dark-mode .atkp-product-carousel-unit,
html.dark-mode .atkp-product-carousel-unit .atkp-pc-wrapper,
html.dark-mode .atkp-product-carousel-unit .atkp-pc-product-container,
html.dark-mode .atkp-product-carousel-unit .atkp-pc-product-list li {
  background-color: var(--af-bg-card) !important;
  border-color: var(--af-border-color) !important;
}

/* Texte im Karussell anpassen */
html.dark-mode .atkp-product-carousel-unit,
html.dark-mode .atkp-product-carousel-unit * {
  color: var(--af-text-body) !important;
}

/* Darkmode – Community Section */
html.dark-mode .af-home .community {
  background: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color);
}

/* Texte in der Community-Section */
html.dark-mode .af-home .community h2,
html.dark-mode .af-home .community p {
  color: var(--af-text-dark) !important;
}

/* Darkmode – ATKP Produkttabellen */
html.dark-mode .atkp-producttable,
html.dark-mode .atkp-producttable td,
html.dark-mode .atkp-producttable th {
  background-color: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border-color: var(--af-border-color) !important;
}

/* Titel & Header in den Tabellen */
html.dark-mode .atkp-producttable th {
  color: var(--af-text-dark) !important;
  background-color: var(--af-bg-main) !important;
}

/* Links in den Tabellen */
html.dark-mode .atkp-producttable a {
  color: var(--af-primary) !important;
}
html.dark-mode .atkp-producttable a:hover {
  color: #ffa366 !important;
}

/* Buttons im Darkmode lesbar machen */
html.dark-mode button,
html.dark-mode .back-btn,
html.dark-mode .share-toggle,
html.dark-mode .community .item a {
  background-color: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
}

html.dark-mode button:hover,
html.dark-mode .back-btn:hover,
html.dark-mode .share-toggle:hover,
html.dark-mode .community .item a:hover {
  background-color: var(--af-primary) !important;
  color: #fff !important;
}

/* Community-Text heller */
html.dark-mode .community p,
html.dark-mode .community h2,
html.dark-mode .community h3 {
  color: var(--af-text-body) !important;
}

html.dark-mode .community .item {
  background-color: #2a2a2a !important; /* etwas heller als Haupt-Hintergrund */
  border: 1px solid var(--af-border-color) !important;
  color: var(--af-text-body) !important;
  border-radius: 8px;
  transition: background 0.3s ease;
}

html.dark-mode .community .item:hover {
  background-color: #3a3a3a !important; /* leicht aufgehellt beim Hover */
}

/* Hero-Boxen (Kategorie-Einleitungen) im Darkmode */
html.dark-mode .sec.cat-hero .hero-grid,
html.dark-mode .sec.cat-hero .conv,
html.dark-mode .sec.cat-hero .copy {
  background-color: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
  border-radius: 8px;
}

/* Titel in den Hero-Boxen */
html.dark-mode .sec.cat-hero .hero-grid h1,
html.dark-mode .sec.cat-hero .hero-grid h2,
html.dark-mode .sec.cat-hero .hero-grid h3 {
  color: var(--af-text-dark) !important;
}

/* Buttons / Tags */
html.dark-mode .sec.cat-hero .hero-grid a {
  color: var(--af-primary) !important;
  border-color: var(--af-primary) !important;
}
html.dark-mode .sec.cat-hero .hero-grid a:hover {
  background-color: var(--af-primary) !important;
  color: #fff !important;
}

/* Globale Box-Hintergründe im Darkmode */
html.dark-mode 
.sec.cat-hero .hero-grid,
html.dark-mode 
.sec.cat-hero .conv,
html.dark-mode 
.sec.cat-hero .copy,
html.dark-mode 
.split-hero,
html.dark-mode 
.split-hero-grid,
html.dark-mode 
.final-container,
html.dark-mode 
.af-home .mag .card,
html.dark-mode 
.af-home .community,
html.dark-mode 
.af-home .community .item,
html.dark-mode 
.af-tldr-box,
html.dark-mode 
.af-praxisbox-gm-body,
html.dark-mode 
.af-infobox-gm-body,
html.dark-mode 
.af-disclaimer-gm-text,
html.dark-mode 
.faqblock,
html.dark-mode 
.atkp-producttable-wrapper,
html.dark-mode 
.atkp-product-carousel-unit {
  background: var(--af-bg-card) !important;
  color: var(--af-text-body) !important;
  border: 1px solid var(--af-border-color) !important;
  border-radius: 6px;
}

/* Titel in diesen Boxen */
html.dark-mode 
.sec.cat-hero .hero-grid h1,
html.dark-mode 
.sec.cat-hero .hero-grid h2,
html.dark-mode 
.sec.cat-hero .hero-grid h3,
html.dark-mode 
.split-hero h1,
html.dark-mode 
.split-hero h2,
html.dark-mode 
.split-hero h3,
html.dark-mode 
.faqblock h2,
html.dark-mode 
.af-home .community h2,
html.dark-mode 
.af-home .mag .card h2 {
  color: var(--af-text-dark) !important;
}