/* =========================================================
   GRÜNE POWER — Chrome (Header, Nav, Footer)
   ========================================================= */

/* ---------------- Brand ---------------- */
.gbrand { display: inline-flex; align-items: center; gap: 12px; }
.gbrand__mark { width: 46px; height: 46px; border-radius: 16px 16px 16px 6px; background: var(--grass); color: var(--forest); display: grid; place-items: center; font-size: 26px; flex: none; transform: rotate(-3deg); transition: transform .25s; }
.gbrand:hover .gbrand__mark { transform: rotate(3deg) scale(1.05); }
.gbrand__txt { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1; color: var(--forest); }
.gbrand__txt b { color: var(--leaf); }
.gbrand__txt i { display: block; font-style: normal; font-weight: 700; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--slate); margin-top: 3px; }
.gbrand--light .gbrand__txt { color: #fff; }
.gbrand--light .gbrand__txt i { color: var(--mist); }

/* ---------------- Header ---------------- */
.ghdr { position: fixed; inset: 0 0 auto 0; z-index: 100; transition: background .35s, box-shadow .35s; }
.ghdr--scr { background: rgba(241,246,231,.86); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 2px 0 var(--line); }
.ghdr__bar { display: flex; align-items: center; justify-content: space-between; height: 82px; gap: 24px; }
.ghdr__nav { display: flex; align-items: center; gap: 2px; }
.gnav__item { display: inline-flex; align-items: center; gap: 5px; font-family: var(--display); font-weight: 700; font-size: 16.5px; color: var(--forest); padding: 10px 15px; border-radius: 100px; transition: background .2s, color .2s; }
.gnav__item:hover { background: var(--mint); }
.gnav__item.on { background: var(--grass); }
.ghdr__cta { display: flex; align-items: center; gap: 16px; }
.ghdr__phone { display: inline-flex; align-items: center; gap: 7px; font-family: var(--display); font-weight: 700; font-size: 14.5px; }
.ghdr__phone svg { width: 16px; height: 16px; color: var(--leaf); }
.ghdr__burger { display: none; width: 48px; height: 48px; border-radius: 14px; background: var(--forest); color: var(--cream); font-size: 23px; place-items: center; }
@media (max-width: 980px) { .ghdr__nav, .ghdr__cta { display: none; } .ghdr__burger { display: grid; } }

/* ---------------- Mega ---------------- */
.gmega { position: absolute; top: 82px; left: 0; right: 0; background: rgba(241,246,231,.97); backdrop-filter: blur(18px); border-top: 2px solid var(--line); box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(-12px); transition: opacity .3s, transform .3s, visibility .3s; }
.gmega.open { opacity: 1; visibility: visible; transform: none; }
.gmega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-block: 24px; }
.gmega__card { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-md); border: 2px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.gmega__card:hover { background: #fff; border-color: var(--forest); transform: translateY(-3px) rotate(-1deg); }
.gmega__ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 25px; color: var(--forest); flex: none; }
.gmega__card strong { display: block; font-family: var(--display); font-size: 17px; font-weight: 800; margin-bottom: 3px; }
.gmega__card span span { font-size: 13.5px; color: var(--slate); line-height: 1.4; }
@media (max-width: 980px) { .gmega { display: none; } }

/* ---------------- Drawer ---------------- */
.gdrawer { position: fixed; inset: 82px 0 0 0; z-index: 99; background: var(--cream); transform: translateX(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1); overflow-y: auto; padding: 24px var(--gut) 60px; }
.gdrawer.open { transform: none; }
.gdrawer__in { display: flex; flex-direction: column; }
.gdrawer__h { font-family: var(--display); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin: 22px 0 8px; }
.gdrawer__svc { display: flex; align-items: center; gap: 14px; padding: 14px 0; font-family: var(--display); font-size: 23px; font-weight: 800; border-bottom: 2px solid var(--line); }
.gdrawer__svc span { font-size: 25px; }
.gdrawer__link { padding: 14px 0; font-family: var(--display); font-size: 23px; font-weight: 800; border-bottom: 2px solid var(--line); }
.gdrawer__foot { display: grid; gap: 12px; margin-top: 28px; }
.gdrawer__foot .gbtn { justify-content: center; }

/* ---------------- Footer ---------------- */
.gftr { position: relative; padding-bottom: 32px; }
.gftr__wave { color: var(--forest); margin-top: -1px; }
.gftr__inner { padding-top: 20px; }
.gftr__top { display: grid; grid-template-columns: 1.3fr 2fr; gap: 48px; padding-bottom: 44px; border-bottom: 1px solid var(--line-dark); }
.gftr__brandcol .gbrand__mark { background: var(--forest-2); color: var(--grass); }
.gftr__soc { display: flex; gap: 10px; margin-top: 22px; }
.gftr__socbtn { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line-dark); display: grid; place-items: center; font-family: var(--display); font-weight: 700; color: var(--mist); transition: background .2s, color .2s; }
.gftr__socbtn:hover { background: var(--grass); color: var(--forest); border-color: var(--grass); }
.gftr__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.gftr__links h4 { font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--grass); margin-bottom: 14px; }
.gftr__links a, .gftr__addr { display: block; color: #BFD6BC; font-weight: 500; font-size: 15px; padding: 6px 0; transition: color .2s; }
.gftr__links a:hover { color: #fff; }
.gftr__addr { color: var(--mist); }
.gftr__bot { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 26px; font-size: 14px; color: var(--mist); }
.gftr__legal { display: flex; gap: 20px; }
.gftr__legal a:hover { color: #fff; }
.gftr__co2 { display: inline-flex; align-items: center; gap: 7px; color: var(--grass); font-weight: 700; }
.gftr__co2 svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .gftr__top { grid-template-columns: 1fr; gap: 32px; } .gftr__links { grid-template-columns: 1fr 1fr; } }