/* ==========================================================================
   Holz Feuer Rauch – Navigation r7 (Mega-Panel Desktop + Off-Canvas mobil)
   Basis: Amberbijou nav.css (v2), portiert in HFR-CI. Ersetzt in hfr.css den
   kompletten NAV-Block (nav#nav, .nav-links, .burger, .nav-dropdown, .nav-open).
   Breakpoint einheitlich mit allen Seiten-CSS: Desktop ≥ 901 px, mobil ≤ 900 px.
   ========================================================================== */

/* ---------- Header-Grundaufbau (Bestand: transparent über dem Hero, kompakt beim Scrollen) ---------- */
.head{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;gap:24px;padding:24px 52px;
  border-bottom:1px solid transparent;transition:background-color .35s,padding .35s,border-color .35s,box-shadow .35s}
.head.scrolled,.head.mega-open{background:rgba(31,25,19,.97);border-bottom-color:rgba(237,227,210,.08);box-shadow:0 12px 30px -20px rgba(0,0,0,.6)}
.head.scrolled{padding-top:10px;padding-bottom:10px}
/* Unterseiten (body.nav-solid): Endzustand schon vor nav.js, sonst springt der Kopf 101 → 73 px (CLS) */
body.nav-solid .head{background:rgba(31,25,19,.97);border-bottom-color:rgba(237,227,210,.08);box-shadow:0 12px 30px -20px rgba(0,0,0,.6);padding-top:10px;padding-bottom:10px}
.head.mega-open,body.nav-solid .head.mega-open{background:var(--coal-3)}

.nav-mark{display:flex;align-items:center;min-height:44px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.nav-mark img{height:52px;width:auto}
.head.scrolled .nav-mark,.head.mega-open .nav-mark,body.nav-solid .nav-mark{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s}
.nav-mark:focus-visible{outline:2px solid var(--fire);outline-offset:4px;border-radius:4px}

.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.burger span{display:block;width:24px;height:2px;border-radius:1px;background:var(--cream)}
.burger:focus-visible{outline:2px solid var(--fire);outline-offset:2px;border-radius:4px}
.nav-ig{display:none}
.drawer{display:none}
.mega-scrim{display:none}

/* ==========================================================================
   DESKTOP ≥ 901 px
   ========================================================================== */
@media (min-width:901px){
  .nav{margin-left:auto}
  .nav__list{display:flex;align-items:center;gap:34px;list-style:none;margin:0;padding:0}
  /* Kein position:relative auf li: das Panel richtet sich am Header aus */
  .nav__list>li{position:static}

  .nav__link{position:relative;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0;margin:0;background:none;border:0;border-radius:0;
    font:500 13px/1 var(--osw);letter-spacing:.16em;text-transform:uppercase;color:rgba(237,227,210,.8);text-decoration:none;cursor:pointer;transition:color .2s}
  .nav__link::after{content:"";position:absolute;left:0;right:.16em;bottom:7px;height:1.5px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform .4s var(--ease)}
  .nav__link:hover,.nav__link[aria-current],.nav__trigger.is-current,.nav__trigger[aria-expanded="true"]{color:var(--cream)}
  .nav__link[aria-current]::after,.nav__trigger.is-current::after,.nav__trigger[aria-expanded="true"]::after{transform:scaleX(1)}
  .nav__trigger[aria-expanded="true"]::after{background:var(--fire)}
  @media (hover:hover){.nav__link:hover::after{transform:scaleX(1)}}
  .nav__link--cta{color:var(--fire)}
  .nav__link--cta:hover,.nav__link--cta[aria-current]{color:#ffb24a}
  .nav__link--ig{color:var(--ember)}
  .nav__link--ig:hover{color:var(--fire)}
  .nav__link:focus-visible{outline:2px solid var(--fire);outline-offset:4px;border-radius:2px}
  .nav__chev{width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .35s var(--ease),opacity .25s}
  .nav__trigger[aria-expanded="true"] .nav__chev{transform:translateY(1px) rotate(225deg);opacity:1}

  /* ---------- Mega-Panel ---------- */
  .mega{position:absolute;left:0;right:0;top:100%;z-index:2;display:none;
    max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain;
    background:var(--coal-3);color:var(--cream);border-top:1px solid rgba(237,227,210,.1);border-bottom:2px solid var(--ember);
    box-shadow:0 50px 70px -40px rgba(0,0,0,.75);
    opacity:0;transform:translate3d(0,-6px,0);transition:opacity .3s var(--ease),transform .38s var(--ease)}
  .mega::before{content:"";position:absolute;inset:0;background:url(/img/korn.png);opacity:.35;mix-blend-mode:overlay;pointer-events:none}
  .nav__item--mega.is-mounted>.mega{display:block}
  .nav__item--mega.is-open>.mega{opacity:1;transform:none}
  html:not(.nav-js) .nav__item--mega:is(:hover,:focus-within)>.mega{display:block;opacity:1;transform:none}
  .mega img:not([src]){visibility:hidden}

  .mega__in{position:relative;display:grid;grid-template-columns:minmax(330px,1.3fr) minmax(0,.95fr) minmax(0,1fr);gap:clamp(36px,4.4vw,80px);align-items:start;
    padding-top:clamp(34px,3vw,50px);padding-bottom:clamp(38px,3.4vw,54px)}
  .mega__kicker{display:flex;align-items:center;gap:12px;margin:0 0 16px;font:600 15px/1 var(--osw);letter-spacing:.12em;text-transform:uppercase;color:var(--fire)}
  .mega__kicker::after{content:"";width:28px;height:2px;background:var(--ember)}

  /* Kategorien */
  .mega__list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(237,227,210,.12)}
  .mega__cat{display:grid;grid-template-columns:minmax(0,1fr) 22px;grid-template-rows:auto auto;column-gap:16px;row-gap:5px;align-items:center;min-height:76px;padding:13px 0 12px;
    border-bottom:1px solid rgba(237,227,210,.12);color:var(--cream);text-decoration:none}
  .mega__cat .mega__arr{grid-column:2;grid-row:1/3}
  .mega__name{font:400 26px/1.1 var(--slab);white-space:nowrap;transition:color .25s}
  .mega__sub{grid-column:1;font:400 15px/1.3 var(--osw);letter-spacing:.04em;color:rgba(237,227,210,.66);transition:color .25s}
  .mega__arr{width:20px;height:20px;fill:none;stroke:var(--fire);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .35s var(--ease)}
  .mega__cat.is-active .mega__name,.mega__cat:focus-visible .mega__name{color:var(--fire)}
  .mega__cat.is-active .mega__sub,.mega__cat[aria-current] .mega__sub{color:rgba(237,227,210,.9)}
  .mega__cat.is-active .mega__arr,.mega__cat:focus-visible .mega__arr{opacity:1;transform:none}
  .mega__cat[aria-current] .mega__name::after{content:"";display:inline-block;width:7px;height:7px;margin-left:12px;border-radius:50%;background:var(--ember);vertical-align:middle;transform:translateY(-3px)}
  .mega__cat:focus-visible{outline:2px solid var(--fire);outline-offset:2px}

  .mega__all{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:18px;font:600 15px/1.2 var(--sans);color:var(--cream);text-decoration:none;
    background:linear-gradient(currentColor,currentColor) 0 calc(100% - 8px)/100% 1.5px no-repeat;transition:background-size .45s var(--ease),color .2s}
  .mega__all svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .mega__all:hover{color:var(--fire);background-size:0 1.5px;background-position:100% calc(100% - 8px)}
  .mega__all:hover svg{transform:translateX(4px)}

  /* Vorschau – Passepartout wie die Packshots der Startseite */
  .mega__preview{display:block;width:100%;max-width:360px;justify-self:center;margin-top:31px;color:var(--cream);text-decoration:none} /* 31px = Kicker-Zeile */
  .mega__mat{position:relative;display:block;aspect-ratio:4/5;margin:0 auto;background:#fbf8f2;border-radius:3px;
    box-shadow:0 0 0 1px rgba(138,106,74,.55),0 26px 44px -22px rgba(0,0,0,.8);outline:1px solid rgba(138,106,74,.35);outline-offset:-12px;
    transition:outline-color .4s,outline-offset .4s var(--ease)}
  .mega__mat img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 64px);max-height:calc(100% - 64px);opacity:0;transition:opacity .45s var(--ease)}
  .mega__mat img.is-active{opacity:1}
  .mega__preview:hover .mega__mat{outline-color:var(--ember);outline-offset:-16px}
  .mega__pcap{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
  .mega__pname{font:400 21px/1.15 var(--slab)}
  .mega__pgo{font:600 14px/1 var(--sans);color:var(--fire);white-space:nowrap}

  /* Beliebt */
  .mega__pick{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center;padding:0 0 16px;margin-bottom:16px;border-bottom:1px solid rgba(237,227,210,.12);color:var(--cream);text-decoration:none}
  .mega__pmat{position:relative;display:block;aspect-ratio:4/5;background:#fbf8f2;border-radius:3px;box-shadow:0 0 0 1px rgba(138,106,74,.55);transition:box-shadow .4s}
  .mega__pmat img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:calc(100% - 16px);max-height:calc(100% - 16px)}
  .mega__pmat .ki-tag{top:4px;right:4px;font-size:9.5px;padding:3px 5px}
  .mega__pick:hover .mega__pmat{box-shadow:0 0 0 2px var(--ember)}
  .mega__ptext{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
  .mega__pno{font:400 14px/1.2 var(--osw);letter-spacing:.05em;color:rgba(237,227,210,.66)}
  .mega__ptitle{font:400 22px/1.1 var(--slab);transition:color .25s}
  .mega__pprice{font:600 15px/1.2 var(--sans);color:var(--cream);font-variant-numeric:tabular-nums}
  .mega__pmore{margin-top:2px;font:600 14px/1 var(--sans);color:var(--fire)}
  .mega__pick:hover .mega__ptitle{color:var(--fire)}
  .mega__pick:focus-visible{outline:2px solid var(--fire);outline-offset:4px}
  .mega__fn{margin:-4px 0 18px;font:400 12.5px/1.45 var(--sans);color:rgba(237,227,210,.62)}
  .mega__fn--cats{display:none;margin:14px 0 0} /* PAngV: Fußnote unter den Kategorien, wenn die Beliebt-Spalte fehlt */
  .mega__help{display:flex;flex-direction:column;align-items:flex-start;font:400 14px/1.4 var(--sans);color:rgba(237,227,210,.7)}
  .mega__help a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--cream);text-decoration:none;white-space:nowrap;transition:color .2s}
  .mega__help .mega__tel{font:400 22px/1.2 var(--slab)}
  .mega__help a:hover{color:var(--fire)}
  .mega__help svg{width:18px;height:18px;flex:none}

  /* Ruhige Staffel beim Öffnen (nur Kategorien) */
  .nav__item--mega .mega__list>li{opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s var(--ease),transform .45s var(--ease)}
  .nav__item--mega.is-open .mega__list>li{opacity:1;transform:none}
  .nav__item--mega.is-open .mega__list>li:nth-child(2){transition-delay:.035s}
  .nav__item--mega.is-open .mega__list>li:nth-child(3){transition-delay:.07s}
  .nav__item--mega.is-open .mega__list>li:nth-child(4){transition-delay:.105s}
  html:not(.nav-js) .nav__item--mega .mega__list>li{opacity:1;transform:none}

  /* Dezente Abdunklung der Seite */
  .mega-scrim{position:absolute;left:0;right:0;top:100%;z-index:1;height:100vh;background:rgba(20,15,11,.42);opacity:0;transition:opacity .3s var(--ease)}
  .head.mega-mounted .mega-scrim{display:block}
  .head.mega-open .mega-scrim{opacity:1}
  .nav-mega-open .wa-float{opacity:0;visibility:hidden}

  @media (max-width:1199.98px){
    .mega__in{grid-template-columns:minmax(300px,1.15fr) minmax(0,1fr)}
    .mega__col--picks{display:none}
    .mega__fn--cats{display:block}
  }
  @media (max-width:1100px){.head{padding-left:32px;padding-right:32px}}
  /* Großbildschirme: Nav und Panel wachsen mit dem Satzspiegel */
  @media (min-width:1900px){
    .nav__link{font-size:14.5px}
    .nav__list{gap:42px}
    .mega__name{font-size:30px}
    .mega__sub{font-size:16px}
    .mega__preview{max-width:400px}
    .mega__ptitle{font-size:24px}
    .mega__pick{grid-template-columns:110px 1fr}
  }
}

/* ==========================================================================
   MOBIL ≤ 900 px
   ========================================================================== */
@media (max-width:900px){
  .head{padding:14px 16px 14px 20px}
  .head.scrolled,body.nav-solid .head{padding:8px 16px 8px 20px}
  .nav-mark img{height:44px}
  .nav{display:none}
  .burger{display:flex;margin-left:auto}
  .nav-ig+.burger{margin-left:-8px}
  .nav-ig{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;border-radius:50%;
    color:var(--cream);text-decoration:none;transition:color .2s,background-color .2s;-webkit-tap-highlight-color:transparent}
  .nav-ig:hover,.nav-ig:active{color:var(--fire)}
  .nav-ig:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
  .head.drawer-on{z-index:1000}
  .head.drawer-on .burger{opacity:0}
  .nav-locked .wa-float{opacity:0;visibility:hidden}

  .drawer{display:block;position:fixed;inset:0;z-index:1000}
  .drawer[hidden]{display:none}
  .drawer img:not([src]){visibility:hidden}
  .drawer__scrim{position:absolute;inset:0;background:rgba(15,11,8,.62);opacity:0;transition:opacity .38s var(--ease)}
  /* Panel lässt rechts mind. 72 px frei: dort liegt das × exakt auf der Burger-Position */
  .drawer__panel{position:absolute;top:0;bottom:0;left:0;width:min(440px,calc(100% - 72px));display:flex;flex-direction:column;
    background:var(--coal);color:var(--cream);box-shadow:24px 0 60px -24px rgba(0,0,0,.7);transform:translate3d(-100%,0,0);transition:transform .42s var(--ease);
    padding-left:env(safe-area-inset-left)}
  .drawer__panel::before{content:"";position:absolute;inset:0;background:url(/img/korn.png);opacity:.3;mix-blend-mode:overlay;pointer-events:none}
  .drawer__panel>*{position:relative}
  .drawer.is-open .drawer__scrim{opacity:1}
  .drawer.is-open .drawer__panel{transform:none}

  /* × : per JS exakt auf die Burger-Koordinaten gesetzt (--bx/--by), Fallback = Header-Maße */
  .drawer__close{position:absolute;z-index:2;top:var(--by,calc(14px + env(safe-area-inset-top)));left:var(--bx,auto);right:auto;width:44px;height:44px;display:grid;place-items:center;
    padding:0;background:none;border:0;border-radius:50%;color:var(--cream);cursor:pointer;-webkit-tap-highlight-color:transparent;opacity:0;transform:rotate(-90deg);transition:opacity .3s var(--ease),transform .42s var(--ease)}
  .drawer.is-open .drawer__close{opacity:1;transform:none}
  .drawer__close svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
  .drawer__close:focus-visible{outline:2px solid var(--fire);outline-offset:2px}

  .drawer__top{flex:none;display:flex;align-items:center;gap:14px;min-height:calc(72px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 20px 0;border-bottom:1px solid rgba(237,227,210,.1)}
  .drawer__logo{display:flex;align-items:center;min-height:44px}
  .drawer__logo img{height:46px;width:auto}
  .drawer__title{font:600 14px/1 var(--osw);letter-spacing:.14em;text-transform:uppercase;color:var(--fire)}

  .drawer__body{flex:1;min-height:0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .drawer__body>nav{padding:6px 20px 10px}
  .drawer__main,.drawer__cats,.drawer__sec{list-style:none;margin:0;padding:0}
  .drawer__big{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:66px;margin:0;padding:6px 0;background:none;border:0;border-bottom:1px solid rgba(237,227,210,.12);border-radius:0;
    font:400 29px/1.1 var(--slab);color:var(--cream);text-align:left;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .drawer__big[aria-current]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ember);flex:none;margin-right:4px}
  .drawer__big:focus-visible,.drawer a:focus-visible{outline:2px solid var(--fire);outline-offset:2px}

  .drawer__plus{position:relative;width:18px;height:18px;flex:none;margin-right:2px}
  .drawer__plus::before,.drawer__plus::after{content:"";position:absolute;left:0;top:50%;width:18px;height:2px;margin-top:-1px;border-radius:1px;background:var(--fire);transition:transform .35s var(--ease)}
  .drawer__plus::after{transform:rotate(90deg)}
  .drawer__acc[aria-expanded="true"] .drawer__plus::after{transform:rotate(0)}

  /* Akkordeon: grid-rows 0fr→1fr, zugeklappt nicht fokussierbar */
  .drawer__fold{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .4s var(--ease),visibility 0s linear .4s}
  .drawer__acc[aria-expanded="true"]+.drawer__fold{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .4s var(--ease),visibility 0s}
  .drawer__fold-in{min-height:0;overflow:hidden}
  .drawer__cats{padding:8px 0 0 6px}
  .drawer__cat{display:grid;grid-template-columns:56px minmax(0,1fr);gap:14px;align-items:center;min-height:70px;padding:7px 0;color:var(--cream);text-decoration:none;-webkit-tap-highlight-color:transparent}
  .drawer__thumb{position:relative;display:block;width:56px;height:56px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgba(138,106,74,.7),0 0 0 4px var(--coal),0 0 0 5px rgba(201,176,143,.35);overflow:hidden}
  .drawer__thumb img{position:absolute;inset:0;margin:auto;width:auto;height:auto;max-width:72%;max-height:80%}
  .drawer__ct{display:flex;flex-direction:column;gap:3px;min-width:0}
  .drawer__cn{font:400 20px/1.15 var(--slab)}
  .drawer__cs{font:400 14.5px/1.3 var(--osw);letter-spacing:.04em;color:rgba(237,227,210,.68);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .drawer__cat[aria-current] .drawer__cn{color:var(--fire)}
  .drawer__cat:active .drawer__cn{color:var(--fire)}
  .drawer__fn{margin:4px 0 12px 76px;font:400 12.5px/1.45 var(--sans);color:rgba(237,227,210,.6)}

  /* Sekundär */
  .drawer__sec{margin-top:14px}
  .drawer__sec a{display:flex;align-items:center;gap:12px;min-height:54px;border-bottom:1px solid rgba(237,227,210,.12);font:500 17px/1.2 var(--osw);letter-spacing:.1em;text-transform:uppercase;color:rgba(237,227,210,.88);text-decoration:none}
  .drawer__sec a[aria-current]{color:var(--cream)}
  .drawer__sec .drawer__ig{color:#f2a15e}
  .drawer__sec .drawer__ig svg{width:18px;height:18px;flex:none}
  .drawer__sec .drawer__cta{justify-content:center;gap:12px;min-height:54px;margin:14px 0;border:0;border-radius:50px;background:var(--grad-fire);color:#1d140c;
    font:600 16.5px/1 var(--sans);letter-spacing:.01em;text-transform:none;box-shadow:0 12px 28px -14px rgba(232,93,4,.8)}
  .drawer__sec .drawer__cta:focus-visible{outline-color:var(--cream)}

  /* Service-Zeile: unten, scrollt bei wenig Platz mit */
  .drawer__service{margin-top:auto;display:flex;flex-direction:column;padding:10px 20px calc(14px + env(safe-area-inset-bottom));background:var(--coal-3);border-top:1px solid rgba(237,227,210,.1)}
  .drawer__service a{display:flex;align-items:center;gap:12px;min-height:48px;min-width:0;font:400 15px/1.2 var(--sans);color:var(--cream);text-decoration:none;white-space:nowrap}
  .drawer__service svg{width:20px;height:20px;flex:none;color:var(--fire)}
}
@media (max-width:359.98px){
  .drawer__big{font-size:25px}
  .drawer__cn{font-size:18px}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .mega,.mega-scrim,.mega__list>li,.mega__mat img,.drawer__scrim,.drawer__panel,.drawer__close,.drawer__fold,.drawer__plus::after,.nav__chev,.nav__link::after{transition:none!important}
  .mega,.nav__item--mega .mega__list>li,.drawer__panel,.drawer__close{transform:none}
  .drawer__scrim{opacity:1}
}