/* Herzwerk Startseite */
:root{
  /* Herzwerk CI */
  --hw-gruen:#294e3c;
  --hw-gruen-dunkel:#1b2c22;
  --hw-gold:#c19f62;
  --hw-gold-dunkel:#a68332;
  --hw-creme:#eee8dc;
  --hw-creme-dunkel:#e1d7b3;
  --hw-hellcreme:#f8f3ed;
  --hw-text:#294e3c;
  --hw-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --hw-caps:'Oswald','Arial Narrow',Arial,sans-serif;
}
html,body.herzwerk-startseite{margin:0;padding:0}
body.herzwerk-startseite{
  background-color:var(--hw-creme);
  background-image:var(--hw-papier);
  background-size:1672px auto;
  background-repeat:repeat;
  color:var(--hw-text);
  font-family:var(--hw-serif);
  -webkit-font-smoothing:antialiased;
}
.herzwerk-startseite .wp-site-blocks{padding:0}
.hw-page{position:relative;min-height:100vh;padding:0 20px 72px;box-sizing:border-box}
.hw-page *,.hw-page *::before,.hw-page *::after{box-sizing:border-box}

/* Login – fast unsichtbar */
.hw-login{
  position:absolute;top:18px;right:22px;z-index:5;
  font:400 14px/1 var(--hw-caps);
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(166,131,50,.34);text-decoration:none;
  padding:8px 4px;transition:color .2s ease;
}
.hw-login:hover,.hw-login:focus-visible{color:var(--hw-gruen);outline:none}

/* Kopf: Logo + Shop-Button */
.hw-hero{display:flex;flex-direction:column;align-items:center;padding-top:clamp(56px,9vw,110px)}
.hw-logo{margin:0;line-height:0;width:min(680px,88vw)}
.hw-logo img{width:100%;height:auto;display:block}
.hw-shop{display:block;margin-top:clamp(28px,4.5vw,52px);width:min(300px,68vw);line-height:0;
  border-radius:50%;transition:transform .25s ease,filter .25s ease;filter:drop-shadow(0 8px 14px rgba(27,44,34,.18))}
.hw-shop img{width:100%;height:auto;display:block}
.hw-shop:hover,.hw-shop:focus-visible{transform:translateY(-2px) scale(1.02);filter:drop-shadow(0 12px 20px rgba(27,44,34,.26));outline:none}

/* Produktstreifen */
.hw-products{
  margin:clamp(44px,6vw,72px) -20px 0;
  padding:clamp(26px,3.5vw,40px) 0;
  border-top:1px solid rgba(193,159,98,.5);
  border-bottom:1px solid rgba(193,159,98,.5);
  background:rgba(255,255,255,.22);
}
.hw-strip{
  display:flex;justify-content:flex-start;gap:clamp(18px,4vw,56px);
  max-width:1200px;margin:0 auto;padding:0 20px;
  overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.hw-strip::-webkit-scrollbar{display:none}
.hw-product{margin:0;flex:0 0 auto;scroll-snap-align:center}
.hw-product:first-child{margin-left:auto}.hw-product:last-child{margin-right:auto}
.hw-product a{display:block;line-height:0}
.hw-product img{height:clamp(170px,20vw,250px);width:auto;display:block;
  filter:drop-shadow(0 10px 12px rgba(40,30,10,.16));transition:transform .25s ease}
.hw-product a:hover img{transform:translateY(-4px)}

/* Zwei Textfelder */
.hw-boxes{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,36px);
  max-width:1100px;margin:clamp(44px,6vw,72px) auto 0;
}
.hw-box{
  background:rgba(248,243,237,.62);
  border:1px solid rgba(193,159,98,.55);
  border-radius:16px;
  padding:clamp(24px,3.4vw,40px);
  box-shadow:0 6px 24px rgba(60,45,20,.06);
}
.hw-box h2{
  margin:0 0 18px;color:var(--hw-gruen);
  font:700 clamp(26px,3vw,34px)/1.15 var(--hw-serif);
  padding-bottom:14px;position:relative;
}
.hw-box h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;background:var(--hw-gold);border-radius:2px}
.hw-text{font-size:17px;line-height:1.7;font-weight:400}
.hw-text em,.hw-text i{font-style:italic}
.hw-text p{margin:0 0 1em}
.hw-text p:last-child{margin-bottom:0}
.hw-text a{color:var(--hw-gruen)}

/* Abschnitts-Kopf */
.hw-section-head{text-align:center;margin:0 auto clamp(22px,3vw,34px);max-width:720px}
.hw-eyebrow{display:block;font:400 13px/1 var(--hw-caps);letter-spacing:.22em;text-transform:uppercase;color:var(--hw-gold-dunkel);margin-bottom:10px}
.hw-section-head h2{margin:0;color:var(--hw-gruen);font:700 clamp(28px,3.6vw,40px)/1.15 var(--hw-serif)}
.hw-section-head h2::after{content:"";display:block;width:56px;height:2px;background:var(--hw-gold);margin:16px auto 0;border-radius:2px}

/* Aktuelles & Angebote */
.hw-news{max-width:1100px;margin:clamp(56px,7vw,90px) auto 0}
.hw-news-grid{display:grid;gap:clamp(18px,2.6vw,30px);grid-template-columns:repeat(3,1fr)}
.hw-news-grid.hw-count-1{grid-template-columns:minmax(0,560px);justify-content:center}
.hw-news-grid.hw-count-2{grid-template-columns:repeat(2,1fr)}
.hw-card-news{display:flex;flex-direction:column;background:rgba(248,243,237,.78);border:1px solid rgba(193,159,98,.55);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(60,45,20,.07)}
.hw-card-img{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--hw-creme-dunkel)}
.hw-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.hw-card-news:hover .hw-card-img img{transform:scale(1.03)}
.hw-card-body{padding:clamp(18px,2.4vw,26px);display:flex;flex-direction:column;flex:1}
.hw-card-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;font:400 12px/1 var(--hw-caps);letter-spacing:.14em;text-transform:uppercase;color:rgba(41,78,60,.62)}
.hw-badge{display:inline-block;background:var(--hw-gold);color:#fff;padding:6px 10px 5px;border-radius:999px;letter-spacing:.16em}
.hw-card-news h3{margin:0 0 10px;color:var(--hw-gruen);font:700 clamp(21px,2.1vw,24px)/1.25 var(--hw-serif)}
.hw-card-news .hw-text{font-size:16px;line-height:1.65}
.hw-until{margin:14px 0 0;font-style:italic;color:var(--hw-gold-dunkel)}
.hw-more-link{margin-top:auto;padding-top:16px;align-self:flex-start;color:var(--hw-gruen);font:400 14px/1 var(--hw-caps);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--hw-gold);padding-bottom:4px}
.hw-more-link:hover{color:var(--hw-gold-dunkel)}

/* Instagram-Bilderrahmen */
.hw-insta{max-width:1100px;margin:clamp(56px,7vw,90px) auto 0;text-align:center}
.hw-frame{display:inline-block;width:min(420px,86vw);background:var(--hw-hellcreme);padding:clamp(12px,1.8vw,18px) clamp(12px,1.8vw,18px) 0;
  border:1px solid rgba(193,159,98,.6);border-radius:4px;box-shadow:0 2px 0 rgba(193,159,98,.25),0 18px 40px rgba(40,30,10,.16);
  transform:rotate(-1.6deg);transition:transform .3s ease;text-decoration:none;color:var(--hw-text)}
.hw-frame:hover,.hw-frame:focus-visible{transform:rotate(0) translateY(-3px);outline:none}
.hw-frame-inner{display:block;aspect-ratio:1/1;overflow:hidden;outline:1px solid rgba(193,159,98,.45);outline-offset:-1px}
.hw-frame-inner img{width:100%;height:100%;object-fit:cover;display:block}
.hw-frame-caption{display:block;padding:14px 6px 18px;font:italic 400 15px/1.5 var(--hw-serif)}
.hw-frame-inner + .hw-frame-caption{min-height:0}
.hw-frame-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%;padding:24px;
  background:linear-gradient(145deg,rgba(225,215,179,.55),rgba(238,232,220,.9));text-align:center;font:italic 400 16px/1.5 var(--hw-serif);color:rgba(41,78,60,.75)}
.hw-frame-placeholder img{width:96px;height:96px;opacity:.9;border-radius:50%;box-shadow:0 6px 16px rgba(27,44,34,.2)}
.hw-frame.is-empty{cursor:default}
.hw-insta-follow{margin:22px 0 0}
.hw-insta-follow a{color:var(--hw-gruen);font:400 14px/1 var(--hw-caps);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--hw-gold);padding-bottom:4px}

/* ---------- Tablet ---------- */
@media (max-width:1024px){
  .hw-news-grid,.hw-news-grid.hw-count-2{grid-template-columns:repeat(2,1fr)}
  .hw-news-grid.hw-count-1{grid-template-columns:minmax(0,560px)}
  .hw-page{padding-left:28px;padding-right:28px}
  .hw-products{margin-left:-28px;margin-right:-28px}
}

/* ---------- Handy ---------- */
@media (max-width:760px){
  .hw-page{padding:0 16px calc(56px + env(safe-area-inset-bottom))}
  .hw-products{margin-left:-16px;margin-right:-16px}
  .hw-strip{padding:0 16px}
  .hw-hero{padding-top:64px}
  .hw-logo{width:min(560px,90vw)}
  .hw-boxes{grid-template-columns:1fr}
  .hw-news-grid,.hw-news-grid.hw-count-2,.hw-news-grid.hw-count-1{grid-template-columns:1fr}
  .hw-login{top:calc(6px + env(safe-area-inset-top));right:8px;padding:12px 10px}
  .hw-text{font-size:16px}
  .hw-frame{transform:rotate(-1deg)}
}

@media (prefers-reduced-motion:reduce){
  .hw-shop,.hw-product img,.hw-card-img img,.hw-frame{transition:none}
  .hw-frame{transform:none}
}