/* =================================================== */
/* Das rote HuHo Farb-Thema wird auf der Kräuterseite 
/* in ein grünes "Kräuter-Universum" geändert          */
/* =================================================== */


/* #region 🌿 KRÄUTER-THEME – BASIS & GLOBALER FARBZUSTAND */
/* ============================================================
   Grundzustand des Kräuter-Themes:
   - Basis-Hintergrund
   - globale Farbvariablen
   - globale Textfarben
   ============================================================ */

body.kraeuter-theme {
    background-color: #f7f9f5;

    --text-color: #2f3b2c;
    --text-color-soft: #3a4a34;
    --accent-color: #6f8f5f;
    --border-color: #8fae82;
    --menu-bg: #e7ece4;
    --menu-text: #2f3b2c;
    --link-color: #4f6f3f;
    --link-hover: #2f3b2c;
    --button-bg: #8fae82;
    --button-text: #263322;
    --shadow-color: rgba(60,80,60,0.25);

    color: var(--text-color);
}

body.kraeuter-theme p,
body.kraeuter-theme h1,
body.kraeuter-theme h2,
body.kraeuter-theme h3,
body.kraeuter-theme h4,
body.kraeuter-theme h5,
body.kraeuter-theme li {
    color: var(--text-color);
}

body.kraeuter-theme a {
    color: var(--link-color);
}
body.kraeuter-theme a:hover {
    color: var(--link-hover);
}

body.kraeuter-theme a.dezent {
    color: #2f3b2c;                 /* Kräuter-Dunkelgrün */
    border-bottom-color: #b4c6ad;   /* dezentes Kräuter-Beigegrün */
}

body.kraeuter-theme a.dezent:hover {
    color: #4f6f3f;                 /* kräftigeres Kräutergrün */
    border-bottom-color: #6f8f5f;   /* sattes Kräutergrün */
}




/* #endregion */


/* #region 🌿 BODY-HINTERGRUND */
/* ============================================================
   Kräuter-Body-Hintergrund – optimierter 3-Stufen-Gradient
   ============================================================ */

body.kraeuter-theme {
    background-color: #e7ece4;
    background-image: linear-gradient(
        to bottom,
        #f7faf5 0px,     /* oben: minimal heller */
        #f5f8f3 170px,   /* mitte: sanfter Übergang */
        #dfe6dd 170px,   /* unten: minimal dunkler */
        #dfe6dd 100%
    );
    background-repeat: no-repeat;
}

/* #endregion */


/* #region 🟥 QUERSTREIFEN (Kräuter-Gradient – dunkler, weniger 3D) */
/* ============================================================
   Kräuter-Version des roten Querstreifens
   3-Stufen-Gradient, aber ruhiger und dunkler
   ============================================================ */

body.kraeuter-theme .huho-red-left,
body.kraeuter-theme .huho-red-right {
    background: linear-gradient(
        to bottom,
        #e3e7e0 0%,   /* oben: leicht hell */
        #a8bfa0 50%,  /* mitte: kräutergrün */
        #7f9b72 100%  /* unten: dunkler, erdig */
    );
}

/* #endregion */


/* #region 🌿 HEADLINE - GROßE ÜBERSCHRIFT */
/* ============================================================
   Überschriftenfarben
   ============================================================ */

body.kraeuter-theme .huho-headline .hl-back {
    color: #e8f0e6AA;   /* HEX mit etwas transparenz, da Farbe zu stark */
}

body.kraeuter-theme .huho-headline .hl-front {
    color: #4a5e45;         /* 4a5e45  Farbe etwas heller als Schrift (#2f3b2c) */
}

/* #endregion */


/* #region 🌿 NAVIGATION (Desktop) */
/* ============================================================
   Hauptnavigation oben
   ============================================================ */

body.kraeuter-theme nav {
    background: var(--menu-bg);
    color: var(--menu-text);
}

body.kraeuter-theme nav a.active,
body.kraeuter-theme nav a.current {
    color: #2f3b2c !important;
    border-bottom: 2px solid #6f8f5f !important;
}

body.kraeuter-theme nav a:hover {
    color: #4f6f3f;
}

/* #endregion */


/* #region 🟫 QUERMENÜ (Desktop) */
/* ============================================================
   Horizontalmenü unter dem Header – echter Kräuter-Gradient
   ============================================================ */

body.kraeuter-theme .huho-quermenu {
    background: linear-gradient(
        to bottom,
        #e0e5dc 0%,
        #c9d7c3 50%,
        #b4c6ad 100%
    );
}

body.kraeuter-theme .huho-quermenu a {
    color: #2f3b2c;
}

body.kraeuter-theme .huho-quermenu a:hover {
    background: #6f8f5f;
    color: #fff;
    border-radius: 4px;
}

body.kraeuter-theme .huho-quermenu a.active {
    background: #fff;
    color: #2f3b2c;
    border: 1px solid #6f8f5f;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

/* #endregion */


/* #region 🌿 SIDEBAR (rechte Menüleiste) */
/* ============================================================
   Sidebar-Links, Active-Lasche, Boxen
   ============================================================ */

body.kraeuter-theme .sidebar-links {
    color: #2f3b2c;
}

body.kraeuter-theme .sidebar-links a {
    color: #2f3b2c;
}

body.kraeuter-theme .sidebar-links a:hover {
    background: #6f8f5f;
    color: #fff;
}

body.kraeuter-theme .sidebar-links a.active {
    background: #fff;
    color: #2f3b2c;
    border: 1px solid #6f8f5f;
    border-left: none;
    border-radius: 0 5px 5px 0;
    left: -9px;
    padding-left: 31px;
}

/* Sidebar-Boxen */
body.kraeuter-theme .sidebar-head {
    background: #c9d7c3;
}

body.kraeuter-theme .sidebar-body {
    background: #e7ece4;
}

body.kraeuter-theme .sidebar-body p {
    color: #2f3b2c;
}


/* ============================================================
   Bio-Logos im Kräuter-Theme
   ============================================================ */

body.kraeuter-theme .sidebar-logo {
    filter:
        saturate(0.6)
        hue-rotate(2deg)
        brightness(0.95);
}

body.kraeuter-theme .sidebar-logo:hover {
    filter:
        saturate(0.85)
        brightness(1.0);
}


/* #endregion */


/* #region 🌿 WRAPPER & BANNER */
/* ============================================================
   Site-Wrapper + Bannerbox
   ============================================================ */


body.kraeuter-theme .huho-banner-box {
    border-color: #6f8f5f;
}

body.kraeuter-theme .site-wrapper {
    border-color: #6f8f5f;
}

/* #endregion */


/* #region 🌿 BUTTONS, BOXEN, KARTEN */
/* ============================================================
   Buttons, Cards, Filterboxen
   ============================================================ */

body.kraeuter-theme .button,
body.kraeuter-theme button {
    background: var(--button-bg);
    color: var(--button-text);
    border-color: var(--border-color);
}

body.kraeuter-theme .box,
body.kraeuter-theme .card,
body.kraeuter-theme .filter-info {
    border-color: var(--border-color);
    box-shadow: 2px 2px 12px var(--shadow-color);
}

/* #endregion */


/* #region 🌿 LISTEN-BULLETS */
/* ============================================================
   Listenpunkte in Grün
   ============================================================ */

body.kraeuter-theme .bullets-edel li::before {
    color: #6f8f5f;
}

body.kraeuter-theme .bullets-rot88 li::before {
    color: #4f6f3f;
}

body.kraeuter-theme .bullets-rot99 li::before {
    color: #2f3b2c;
}

/* #endregion */


/* #region 🍔 HAMBURGER MENÜ (Mobile) */
/* ============================================================
   Hamburger, Menüpanel, Links, Close-Button
   ============================================================ */

/* Hamburger-Icon */
body.kraeuter-theme #hamburger {
    color: #4a6d41;
    background: rgba(255,255,255,0.65);
}

body.kraeuter-theme #hamburger:hover {
    background: rgba(255,255,255,0.9);
}

/* Menüpanel */
body.kraeuter-theme .menu-box {
    background: rgba(235,240,233,0.95);
    border-left: 1px solid #6f8f5f;
}

/* Grundzustand der Links + Icons */
body.kraeuter-theme .menu-box a {
    color: #2f3b2c;
}

body.kraeuter-theme .menu-box a i {       /* ICON Farbe etwas heller als Schrift (?) */
    color: #4a5e45;
}

/* Hover – Text + Icon weiß, Hintergrund Kräutergrün */
body.kraeuter-theme .menu-box a:hover {
    background: #6f8f5f;
    color: #fff !important;
}

body.kraeuter-theme .menu-box a:hover i {
    color: #fff !important;
}

/* Active – Text + Icon weiß, Hintergrund Kräutergrün */
body.kraeuter-theme .menu-box a.active {
    background: #6f8f5f;
    color: #fff !important;
}

body.kraeuter-theme .menu-box a.active i {
    color: #fff !important;
}

/* Close-Button */
body.kraeuter-theme #close-nav {
    color: #2f3b2c;
    border: 2px solid #6f8f5f;
}

body.kraeuter-theme #close-nav:hover {
    background: #6f8f5f;
    color: #fff;
}

/* #endregion */


/* #region 🟡 HuHo LOGO */
/* ============================================================
   HuHo-Logo im Kräuter-Theme
   ============================================================ */

body.kraeuter-theme .huho-logo {
    filter:
        saturate(0.6)
        hue-rotate(2deg)
        brightness(0.95);
}

body.kraeuter-theme .huho-logo:hover {
    filter:
        saturate(0.85)
        brightness(1.0);
}

/* #endregion */



/* ========================================================================== */
/* #region 🔼 BACK-TO-TOP BUTTON – Kräuter-Theme                               */
/* ========================================================================== */

body.kraeuter-theme .backtotop-float {
    background: rgba(80,120,70,0.85);
    color: white;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 1px 1px 8px rgba(0,0,0,0.45);
}

body.kraeuter-theme .backtotop-float:hover {
    background: rgba(90,150,90,0.95);
    color: white;
}

/* #endregion */
/* ========================================================================== */


/* ========================================================================== */
/* #region 🌿 FOOTER – Kräuter-Theme                                          */
/* ========================================================================== */

/* Haupt-Footer */
body.kraeuter-theme .huho-footer {
    background: linear-gradient(
        to bottom,
        #8aa77c 0%,     /* oben: etwas dunkler, weniger "hellgrün" */
        #6f8f63 50%,    /* mitte: ruhiges, sattes Kräutergrün */
        #4f6b4a 100%    /* unten: eine Stufe dunkler, erdig, stabil */
    );
    color: #fff;
}

/* Footer-Links */
body.kraeuter-theme .huho-footer a {
    color: #fff;
    text-decoration: none;
}

body.kraeuter-theme .huho-footer a:hover {
    text-decoration: underline;
}

/* Nach-oben-Pfeil im Footer */
body.kraeuter-theme a.nachoben {
    color: white;
    background: rgba(255,255,255,0.10);
    border-radius: 5px;
}

body.kraeuter-theme a.nachoben:hover {
    background: rgba(255,255,255,0.18);
}

/* #endregion */
/* ========================================================================== */