/* herbstlichter — site-weite Theme-Overrides. Wird nach style.min.css geladen
   (gewinnt bei gleicher Spezifitaet). Korrigiert die Akzent-Variablen, die
   style.css im .site-weloveurlaub-Scope hart auf die alte wl-Amber-Palette
   (#b86f1c) setzt, und stylt den (vom Layout auf jeder Seite gerenderten)
   Newsletter dunkel — passend zum Senioren-Design-Handoff. */

body.site-herbstlichter {
  /* Flächen */
  --bg-page: #FFF8E6; --bg-soft: #FBE6D2; --bg-card: #FFFFFF; --bg-inverse: #111111; --bg-primary: #111111;
  /* Text */
  --text-primary: #111111; --text-secondary: #37342C; --text-muted: #6E6A60;
  --text-on-dark: #FFFFFF; --text-on-primary: #FFFFFF; --text-on-accent: #FFFFFF;
  /* Akzent (Herbst-Orange) */
  --action-primary: #E9740B; --action-primary-hover: #CF6309; --action-primary-active: #B5560A;
  --action-accent: #E9740B; --action-accent-hover: #CF6309;
  --bg-accent: #E9740B; --breaking-accent: #E9740B; --focus-ring: #E9740B;
  /* Links (Beere-Rot auf hell) */
  --text-link: #B71C4C; --text-link-hover: #111111; --link: #B71C4C; --link-hover: #111111;
  /* Rahmen (weiche warme Linien) */
  --border-subtle: #E6E1D4; --border-default: #D8D2C2; --border-strong: #C8C4BA;
}

/* Newsletter-Band dunkel statt orange (Design-Vorgabe) */
body.site-herbstlichter .newsletter,
body.site-herbstlichter .newsletter-section { background: var(--ink, #111); color: #fff; }
body.site-herbstlichter .newsletter h2,
body.site-herbstlichter .newsletter-section h2,
body.site-herbstlichter .newsletter__title { color: #fff; }
body.site-herbstlichter .newsletter__subtitle { color: rgba(255,255,255,.85); }
body.site-herbstlichter .newsletter__input { background: #fff; color: var(--ink, #111); border: none; }
body.site-herbstlichter .newsletter .btn--primary,
body.site-herbstlichter .newsletter__form button { background: #E9740B !important; color: #fff !important; border: none; }
body.site-herbstlichter .newsletter__hint { color: rgba(255,255,255,.6); }
body.site-herbstlichter .newsletter__hint a { color: #E9740B; }

/* Footer hell/creme (Design-Vorgabe) statt dunkel. style.css setzt ihn im
   .site-weloveurlaub-Scope per !important dunkel -> hier ebenfalls !important. */
body.site-herbstlichter .footer,
body.site-herbstlichter .site-footer {
  background: var(--bg-page, #FFF8E6) !important;
  color: var(--text-primary, #111) !important;
  border-top: 1.5px solid var(--border-subtle, #E6E1D4) !important;
}
body.site-herbstlichter .footer__col-title { color: var(--action-accent, #E9740B) !important; }
body.site-herbstlichter .footer__link { color: var(--gray-800, #23211C) !important; }
body.site-herbstlichter .footer__link:hover { color: var(--link, #B71C4C) !important; }
body.site-herbstlichter .footer__logo { color: var(--text-primary, #111) !important; }
body.site-herbstlichter .footer__divider { background: var(--border-subtle, #E6E1D4) !important; border-color: var(--border-subtle, #E6E1D4) !important; }
body.site-herbstlichter .footer__bottom,
body.site-herbstlichter .footer__bottom * { color: var(--text-muted, #6E6A60) !important; }
body.site-herbstlichter .footer__bottom { border-top-color: var(--border-subtle, #E6E1D4) !important; }

/* Kommentar-Login: auf hl ist --yellow == --action-primary (Orange), wodurch
   Box UND Buttons orange-auf-orange unsichtbar wurden (style.css setzt
   .comment-login bg:var(--yellow) und body.site-weloveurlaub .btn ueberschreibt
   die Login-Button-Farben auf den Akzent). Box auf weiches Creme + Buttons mit
   eigenem Branding (Apple ink / Google weiss / E-Mail orange) wiederherstellen. */
body.site-herbstlichter .comment-login { background: var(--bg-soft, #FBE6D2) !important; }
body.site-herbstlichter .comment-login__text { color: var(--text-secondary, #37342C) !important; }
body.site-herbstlichter .comment-login .btn--login-apple { background: var(--ink, #111) !important; color: #fff !important; border-color: var(--ink, #111) !important; }
body.site-herbstlichter .comment-login .btn--login-google { background: #fff !important; color: var(--ink, #111) !important; border: 1px solid var(--border-default, #D8D2C2) !important; }
body.site-herbstlichter .comment-login .btn--login-email { background: var(--action-primary, #E9740B) !important; color: #fff !important; border-color: var(--action-primary, #E9740B) !important; }
body.site-herbstlichter .comment-login .btn--login-apple:hover { background: var(--ink, #111) !important; }
body.site-herbstlichter .comment-login .btn--login-google:hover { background: #fff !important; }
body.site-herbstlichter .comment-login .btn--login-email:hover { background: var(--action-primary-hover, #CF6309) !important; }

/* ============================================================
   Mobile-Navigation: hell/seriös statt dunkel (passt zum hl-Look).
   style.css setzt den Drawer hart auf var(--ink) (schwarz) — hier
   body-scoped auf Creme/Weiss mit dunklem Text umgestellt.
   ============================================================ */
body.site-herbstlichter .mobile-nav {
  background: var(--bg-page, #FFF8E6) !important;
  box-shadow: -8px 0 32px rgba(60,50,30,0.18);
}
body.site-herbstlichter .mobile-nav__logo { color: var(--action-accent, #E9740B); }
body.site-herbstlichter .mobile-nav__close { background: var(--action-accent, #E9740B); color: #fff; }
body.site-herbstlichter .mobile-nav__search { background: #fff; border: 1px solid var(--border-default, #D8D2C2); }
body.site-herbstlichter .mobile-nav__search-dot { background: var(--action-accent, #E9740B); }
body.site-herbstlichter .mobile-nav__search input { color: var(--text-primary, #111); }
body.site-herbstlichter .mobile-nav__search input::placeholder { color: var(--text-muted, #6E6A60); }
body.site-herbstlichter .mobile-nav__link { color: var(--text-primary, #111); border-bottom: 1px solid var(--border-subtle, #E6E1D4); }
body.site-herbstlichter .mobile-nav__link--secondary { border-bottom: 1px solid var(--border-subtle, #E6E1D4); }
body.site-herbstlichter .mobile-nav__sublink { color: var(--text-secondary, #37342C); border-bottom: 1px solid var(--border-subtle, #E6E1D4); }
body.site-herbstlichter .mobile-nav__sublink:hover,
body.site-herbstlichter .mobile-nav__link:hover { color: var(--text-link, #B71C4C); }
body.site-herbstlichter .mobile-nav__link.is-active,
body.site-herbstlichter .mobile-nav__sublink.is-active { color: var(--text-link, #B71C4C); background: var(--bg-soft, #FBE6D2); }
body.site-herbstlichter .mobile-nav__toggle { color: var(--text-secondary, #37342C); }
body.site-herbstlichter .mobile-nav__group.is-open .mobile-nav__link-arrow { color: var(--action-accent, #E9740B); }
/* Bunte Kategorie-Punkte (Pop-Art) auf einen ruhigen Akzent vereinheitlichen */
body.site-herbstlichter .mobile-nav__link-dot,
body.site-herbstlichter .mobile-nav__sublink-dot { background: var(--action-accent, #E9740B) !important; }
body.site-herbstlichter .mobile-nav__login { background: var(--action-accent, #E9740B); color: #fff; }
body.site-herbstlichter .mobile-nav__login--logout { background: var(--ink, #111); color: #fff; }
body.site-herbstlichter .mobile-nav__social { border: 1.5px solid var(--border-default, #D8D2C2); color: var(--text-secondary, #37342C); }

/* ============================================================
   data-compare: seriös statt Pop-Art. Warmer Charcoal-Header statt
   reinem Schwarz, gedämpftes Creme-Label statt Grell-Orange, dezenter
   Schatten/Radius. hl ist ein seriöses Senioren-Magazin.
   ============================================================ */
body.site-herbstlichter .data-compare {
  border: 1px solid var(--border-default, #D8D2C2);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(60,50,30,0.08);
}
body.site-herbstlichter .data-compare__head,
body.site-herbstlichter .data-compare__topic { background: #2B2622; }
body.site-herbstlichter .data-compare__topic { color: #E8DFC9; }
body.site-herbstlichter .data-compare__metric { background: var(--bg-soft, #FBE6D2); color: var(--text-primary, #111); }
/* Spalten-Werte nicht durch die Pop-Art-Rotation (gelb/mint/pink/blau/lila)
   einfärben — einheitlich dunkel, das Header-Label trägt die Farbe. */
body.site-herbstlichter .data-compare__value-num { color: var(--text-primary, #111); }
body.site-herbstlichter .data-compare__value-desc { color: var(--text-muted, #6E6A60); }
body.site-herbstlichter .data-compare-wrap > .data-compare__expand {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.3); color: #E8DFC9;
}