/**
 * Seite Firmengeschenke (Vikunja #2). Wird nur auf /firmengeschenke/ geladen.
 * Gestaltung nach Holzzauberei Brand Identity v1.0, Klassen mit Präfix hzfg-.
 */
/* Farben und Schriften nach Holzzauberei Brand Identity v1.0 (Pitaya Agentur):
   #23322a Dunkelgrün · #9fa671 Oliv · #ffd15f Gelb · #000000 · #FFFFFF
   Überschriften: Surgena Semi Bold · Fließtext: Outfit (Extralight/Regular)
   DEV: Surgena und Outfit lokal hosten (DSGVO, kein Google-Fonts-CDN). */
.hzfg{
  --green:#23322a; --olive:#9fa671; --amber:#ffd15f; --black:#000000; --white:#ffffff;
  --olive-soft:rgba(159,166,113,.16); --olive-line:rgba(159,166,113,.55); --muted:rgba(35,50,42,.72);
  --head:"Surgena","Outfit",system-ui,sans-serif; --body:"Outfit",system-ui,sans-serif;
  font-family:var(--body); font-weight:400; color:var(--green); line-height:1.6; font-size:17px;
}
.hzfg *{box-sizing:border-box;}
.hzfg img{max-width:100%; height:auto; display:block;}
.hzfg h1,.hzfg h2,.hzfg h3{font-family:var(--head); font-weight:600; line-height:1.2; margin:0 0 .5em; color:inherit;}
.hzfg h1{font-size:clamp(30px,4.4vw,48px);}
.hzfg h2{font-size:clamp(25px,3.2vw,36px);}
.hzfg h3{font-size:19px;}
.hzfg p{margin:0 0 1em;}
.hzfg a{color:inherit;}
.hzfg-wrap{max-width:1140px; margin:0 auto; padding:0 20px;}
.hzfg-sec{padding:72px 0;}
.hzfg-lead{font-size:19px; max-width:62ch;}

/* Astors Stimme: Sprechblase mit gestrichelter "Naht" aus dem Brand Manual */
.hzfg-voice{
  font-family:var(--body); font-weight:200; font-size:19px; line-height:1.6;
  background:var(--white); border:2px dashed var(--olive); border-radius:22px;
  padding:20px 24px; position:relative; color:var(--green); max-width:46ch;
}
.hzfg-voice::after{
  content:""; position:absolute; width:18px; height:18px; background:var(--white);
  border-right:2px dashed var(--olive); border-bottom:2px dashed var(--olive);
  right:-11px; bottom:34px; transform:rotate(-45deg);
}
.hzfg-voice--left::after{right:auto; left:-11px; transform:rotate(135deg);}
.hzfg-voice--quote::after{display:none;}
.hzfg-voice p:last-child{margin:0;}
.hzfg-voice b{font-weight:400;}
.hzfg-sign{display:block; margin-top:8px; font-size:14px; font-weight:400; color:var(--green);}

.hzfg-btn{display:inline-block; padding:14px 26px; border-radius:999px; font-family:var(--head); font-weight:600; text-decoration:none; font-size:16px; border:2px solid transparent;}
.hzfg .hzfg-btn--amber{background:var(--amber); color:var(--green);}
.hzfg .hzfg-btn--amber:hover{background:var(--white); border-color:var(--amber);}
.hzfg-btn--line{border-color:currentColor; color:inherit;}
.hzfg-btn:focus-visible,.hzfg a:focus-visible,.hzfg summary:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
.hzfg-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}

/* 1 HERO */
.hzfg-hero{background:var(--white); padding:64px 0 48px; overflow:hidden;}
.hzfg-hero .hzfg-wrap{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; align-items:center;}
.hzfg-hero__astor{display:flex; align-items:flex-end; justify-content:flex-end;}
.hzfg-hero__astor .hzfg-voice{margin-bottom:120px; margin-right:-8px; font-size:18px;}
.hzfg-astor{width:230px; flex:0 0 auto; animation:hzfg-float 5s ease-in-out infinite;}
@keyframes hzfg-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
.hzfg-trust{list-style:none; padding:0; margin:28px 0 0; display:flex; flex-wrap:wrap; gap:8px 10px;}
.hzfg-trust li{background:var(--olive-soft); border-radius:999px; padding:6px 14px; font-size:14px;}

/* 2 KEINE TASSE */
.hzfg-mug{background:var(--green); color:var(--white);}
.hzfg-mug .hzfg-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.hzfg-compare{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
.hzfg-compare div{border-radius:16px; padding:18px 20px;}
.hzfg-compare .is-old{border:2px dashed rgba(255,255,255,.35); color:rgba(255,255,255,.8);}
.hzfg-compare .is-new{background:var(--olive); color:var(--green);}
.hzfg-compare h3{font-size:16px; margin-bottom:10px;}
.hzfg-compare ul{margin:0; padding-left:18px; font-size:15px;}
.hzfg-compare li{margin-bottom:6px;}

/* 3 WARUM */
.hzfg-why{background:var(--white);}
.hzfg-why__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:32px;}
.hzfg-why__item{border-top:3px dashed var(--olive); padding-top:18px;}
.hzfg-why__item p{font-size:16px;}

/* 4 PRODUKTE */
.hzfg-shop{background:var(--olive-soft);}
.hzfg-shop__head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.hzfg-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:32px;}
.hzfg-card{background:var(--white); border-radius:18px; overflow:hidden; display:flex; flex-direction:column; text-decoration:none; color:var(--green); border:1px solid var(--olive-line); transition:transform .2s;}
.hzfg-card:hover{transform:translateY(-3px);}
.hzfg-card img{aspect-ratio:1/1; object-fit:cover; width:100%; background:var(--white);}
.hzfg-card__body{padding:14px 16px 18px; display:flex; flex-direction:column; gap:4px; flex:1;}
.hzfg-card__name{font-family:var(--head); font-weight:600; font-size:16px; line-height:1.3;}
.hzfg-card__meta{font-size:13px; color:var(--muted);}
.hzfg-card__price{margin-top:auto; padding-top:8px; font-family:var(--head); font-weight:600; font-size:18px; color:var(--green);}
.hzfg-card__price s{font-weight:400; font-size:14px; color:var(--muted); margin-right:6px;}
.hzfg-card__for{font-size:13px; font-weight:200; color:var(--green);}
.hzfg-note{font-size:14px; color:var(--muted); margin-top:20px;}

/* 5 ANLÄSSE */
.hzfg-occ{background:var(--white);}
.hzfg-occ .hzfg-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center;}
.hzfg-occ__list{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.hzfg-occ__list div{background:var(--olive-soft); border-radius:16px; padding:18px;}
.hzfg-occ__list h3{font-size:17px; margin-bottom:6px;}
.hzfg-occ__list p{font-size:15px; margin:0;}
.hzfg-occ__astor{display:flex; align-items:flex-end;}
.hzfg-occ__astor .hzfg-astor{width:190px;}
.hzfg-occ__astor .hzfg-voice{margin-bottom:90px; margin-left:-6px;}

/* 6 BESONDERE MOMENTE */
.hzfg-big{background:var(--olive); color:var(--green);}
.hzfg-big__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:32px;}
.hzfg-big__item{background:var(--white); border-radius:18px; padding:22px;}
.hzfg-big__item .price{font-family:var(--head); font-weight:600; font-size:22px;}
.hzfg-big__item p{font-size:15px; margin:6px 0 0;}
.hzfg-big .hzfg-btns{margin-top:32px;}
.hzfg-big .hzfg-btn--amber{background:var(--green); color:var(--white);}
.hzfg-big .hzfg-btn--amber:hover{background:var(--black); border-color:var(--black);}

/* 7 RECHNUNG */
.hzfg-invoice{background:var(--amber); color:var(--green);}
.hzfg-invoice .hzfg-wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.hzfg-steps{list-style:none; counter-reset:s; padding:0; margin:0; display:grid; gap:14px;}
.hzfg-steps li{counter-increment:s; background:var(--white); border-radius:16px; padding:16px 18px 16px 64px; position:relative;}
.hzfg-steps li::before{content:counter(s); position:absolute; left:18px; top:14px; width:32px; height:32px; border-radius:50%; background:var(--green); color:var(--amber); font-family:var(--head); font-weight:600; display:grid; place-items:center;}
.hzfg-steps strong{display:block; font-family:var(--head); font-weight:600;}
.hzfg-key{width:220px; margin-top:24px;}

/* 8 FAQ */
.hzfg-faq{background:var(--white);}
.hzfg-faq .hzfg-wrap{max-width:820px;}
.hzfg-faq details{border-bottom:2px dashed var(--olive-line); padding:18px 0;}
.hzfg-faq summary{cursor:pointer; font-family:var(--head); font-weight:600; font-size:18px; list-style:none; display:flex; justify-content:space-between; gap:16px;}
.hzfg-faq summary::-webkit-details-marker{display:none;}
.hzfg-faq summary::after{content:"+"; color:var(--olive); font-size:22px; line-height:1;}
.hzfg-faq details[open] summary::after{content:"–";}
.hzfg-faq details p{margin:12px 0 0; font-size:16px;}

/* 9 ABSCHLUSS */
.hzfg-end{background:var(--green); color:var(--white); text-align:center;}
.hzfg-end .hzfg-astor{width:170px; margin:0 auto 20px;}
.hzfg-end .hzfg-voice{margin:0 auto 8px; text-align:left;}
.hzfg-end .hzfg-voice::after{display:none;}
.hzfg-slogan{font-family:var(--head); font-weight:600; font-size:24px; color:var(--amber); margin:32px 0 0;}
.hzfg-end .hzfg-btns{justify-content:center;}

/* RESPONSIVE */
@media (max-width:980px){
  .hzfg-grid{grid-template-columns:repeat(2,1fr);}
  .hzfg-hero .hzfg-wrap,.hzfg-mug .hzfg-wrap,.hzfg-occ .hzfg-wrap,.hzfg-invoice .hzfg-wrap{grid-template-columns:1fr;}
  .hzfg-hero__astor{justify-content:center;}
  .hzfg-why__grid,.hzfg-big__grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .hzfg{font-size:16px;}
  .hzfg-sec{padding:52px 0;}
  .hzfg-compare,.hzfg-occ__list{grid-template-columns:1fr;}
  .hzfg-hero__astor{flex-direction:column; align-items:center;}
  .hzfg-occ__astor{flex-direction:column-reverse; align-items:center;}
  .hzfg-hero__astor .hzfg-voice,.hzfg-occ__astor .hzfg-voice{margin:0 0 10px;}
  .hzfg-voice::after{right:auto; left:50%; bottom:-11px; transform:translateX(-50%) rotate(45deg);}
  .hzfg-astor{width:170px;}
  .hzfg-grid{gap:12px;}
  .hzfg-card__body{padding:12px;}
}
@media (prefers-reduced-motion:reduce){
  .hzfg-astor{animation:none;}
  .hzfg-card{transition:none;}
}

/* Einbau in Elementor (Sektionen/Spalten): Abstände von Elementor neutralisieren */
.hzfg{--kit-widget-spacing:0px;}
/* Botiga legt den Inhalt in eine Flex-Zeile; ohne breites Element (z. B. Produktraster) schrumpft er auf 1140 px */
.main-row>.elementor{width:100%;}
.hzfg .elementor-widget{margin-bottom:0;}
.hzfg .elementor-column-gap-no>.elementor-column>.elementor-element-populated{padding:0;}
.hzfg .hzfg-shop.elementor-section{padding:72px 0;}
.hzfg .hzfg-shop>.elementor-container>.elementor-column>.elementor-element-populated{padding:0 20px;}

/* Produktraster aus [products]: Karten im Stil der Seite */
.hzfg-shop ul.products{margin:32px 0 0;}
.hzfg-shop ul.products li.product{background:var(--white); border-radius:18px; overflow:hidden; border:1px solid var(--olive-line); padding:0 0 16px; display:flex; flex-direction:column;}
.hzfg-shop ul.products li.product img{aspect-ratio:1/1; object-fit:cover;}
.hzfg-shop ul.products li.product .woocommerce-loop-product__title{font-family:var(--head); font-weight:600; font-size:16px; line-height:1.3; margin:0; padding:0 16px;}
.hzfg-shop ul.products li.product .price{font-family:var(--head); font-weight:600; color:var(--green); padding:0 16px;}
/* Teile-Infos, Sterne und Button mit demselben Einzug wie Titel und Preis; Button unten bündig */
.hzfg-shop ul.products li.product .botiga-child-product-specs{margin-left:16px; margin-right:16px;}
body .hzfg-shop ul.products li.product .star-rating{margin-left:16px !important; margin-right:16px;} /* style.css setzt margin-left:0 !important */
.hzfg-shop ul.products li.product .loop-button-wrap{margin:auto 16px 0; padding-top:12px; width:auto;}
.hzfg-shop ul.products li.product .button{margin:0; width:100%; text-align:center; border-radius:999px;}
/* Wie im Entwurf: Tablet und Handy zweispaltig (Shop-Einstellung ist mobil einspaltig) */
@media (max-width:980px){
  body .hzfg-shop ul.products{grid-template-columns:repeat(2,1fr); gap:12px;}
}
@media (max-width:600px){
  .hzfg .hzfg-shop.elementor-section{padding:52px 0;}
  .hzfg-shop ul.products li.product .woocommerce-loop-product__title,
  .hzfg-shop ul.products li.product .price{padding:0 10px; font-size:14px;}
  .hzfg-shop ul.products li.product .botiga-child-product-specs{margin-left:10px; margin-right:10px;}
  body .hzfg-shop ul.products li.product .star-rating{margin-left:10px !important; margin-right:10px;}
  .hzfg-shop ul.products li.product .loop-button-wrap{margin:auto 10px 0;}
  .hzfg-shop ul.products li.product .button{padding-left:6px; padding-right:6px; font-size:11px;}
}