/* ============================================================
   Herbano Ratgeber — Design Tokens
   Wird NUR auf Magefan-Blog-Routen geladen (siehe blog_default.xml).
   ============================================================ */
   @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap');

   :root {
     /* ---------- Markenfarben (siehe herbano_markenfarben.md) ---------- */
     --hb-accent: #467c48;          /* Primär: Buttons, Headings, TOC-Icon, FAQ-Plus, Links */
     --hb-accent-dark: #3a6b3c;     /* Hover/Press von accent */
     --hb-mist: #e5f0eb;            /* Sehr hell: Page-Tints, Callouts, Banner-Backgrounds */
     --hb-mint: #bfd4c4;            /* Mittel: Hover-Fills, sekundäre Akzente */
     --hb-sage: #9ab99e;            /* Dunkel: farbige Borders, dezente UI */
   
     /* ---------- Neutrals ---------- */
     --hb-ink: #1a1a1a;             /* Body text, nie reines Schwarz */
     --hb-ink-2: #333333;           /* Sekundärer Body */
     --hb-ink-3: #6b6b6b;           /* Captions, Meta */
     --hb-ink-4: #9b9b9b;           /* Placeholder */
     --hb-line: #e6e6e6;            /* Hairline-Divider */
     --hb-line-2: #f2f2f2;          /* Sehr feiner Divider */
     --hb-bg: #ffffff;
     --hb-bg-tint: #fbfbf9;         /* Off-white für Sektionen */
   
     /* ---------- Type Families ---------- */
     --hb-f-display: 'Poppins', system-ui, -apple-system, sans-serif;
     --hb-f-body: 'Open Sans', system-ui, -apple-system, sans-serif;
   
     /* ---------- Type-Skala (Desktop) ---------- */
     --hb-fs-display: 56px;         /* Hero-Hauptüberschrift */
     --hb-fs-h1: 40px;
     --hb-fs-h2: 32px;
     --hb-fs-h3: 24px;
     --hb-fs-h4: 20px;
     --hb-fs-lead: 20px;            /* Sub-Lead unter Hero-Titel */
     --hb-fs-body: 17px;
     --hb-fs-small: 15px;
     --hb-fs-caption: 13px;
     --hb-fs-eyebrow: 12px;         /* THEMENWELT, KATEGORIE-Label etc. */
   
     /* ---------- Line-Heights ---------- */
     --hb-lh-tight: 1.15;
     --hb-lh-snug: 1.3;
     --hb-lh-body: 1.6;
     --hb-lh-loose: 1.75;
   
     /* ---------- Letter-Spacing ---------- */
     --hb-tracking-tight: -0.01em;
     --hb-tracking-normal: 0;
     --hb-tracking-wide: 0.08em;
     --hb-tracking-eyebrow: 0.14em;
   
     /* ---------- Spacing-Skala (4px-Basis) ---------- */
     --hb-sp-1: 4px;
     --hb-sp-2: 8px;
     --hb-sp-3: 12px;
     --hb-sp-4: 16px;
     --hb-sp-5: 24px;
     --hb-sp-6: 32px;
     --hb-sp-7: 48px;
     --hb-sp-8: 64px;
     --hb-sp-9: 96px;
     --hb-sp-10: 128px;
   
     /* ---------- Border-Radii ---------- */
     --hb-r-xs: 4px;
     --hb-r-sm: 6px;
     --hb-r-md: 8px;
     --hb-r-lg: 12px;
     --hb-r-xl: 16px;
     --hb-r-2xl: 24px;
     --hb-r-pill: 999px;
   
     /* ---------- Shadows ---------- */
     --hb-shadow-card: 0 4px 16px rgba(0, 60, 30, 0.06);
     --hb-shadow-card-hover: 0 6px 20px rgba(0, 60, 30, 0.10);
     --hb-shadow-float: 0 8px 24px rgba(0, 60, 30, 0.10);
     --hb-shadow-modal: 0 24px 64px rgba(0, 40, 20, 0.18);
   
     /* ---------- Motion ---------- */
     --hb-ease: cubic-bezier(0.4, 0, 0.2, 1);
     --hb-ease-out: cubic-bezier(0, 0, 0.2, 1);
     --hb-dur-micro: 150ms;
     --hb-dur-base: 250ms;
     --hb-dur-reveal: 400ms;
   
     /* ---------- Container-Breiten ---------- */
     --hb-container-narrow: 720px;   /* Artikel-Body */
     --hb-container-base: 1080px;
     --hb-container-wide: 1280px;
   }