#fh-hero-stage{--fh-cream:#f3e9d9;--fh-ink:#302519;--fh-clay:#a56339;--fh-sage:#64764e;width:100%;color:var(--fh-ink);font-family:Arial,Helvetica,sans-serif}
#fh-hero-stage *{box-sizing:border-box}
#fh-hero-stage .fh-window{background:var(--fh-cream);width:100%;margin:auto;overflow:hidden;container-type:inline-size}
#fh-hero-stage .fh-hero{position:relative;min-height:610px;overflow:hidden;isolation:isolate;background:var(--fh-cream)}
#fh-hero-stage .fh-landscape{position:absolute;z-index:-3;max-width:none;width:90%;height:auto;left:40%;top:-20px;filter:sepia(.25) saturate(.73) brightness(.99);display:block}
#fh-hero-stage .fh-blend{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,#f3e9d9 0%,#f3e9d9 30%,#f3e9d9f7 41%,#f3e9d9b3 50%,#f3e9d92b 62%,#f3e9d900 74%),linear-gradient(0deg,#f3e9d9 0%,#f3e9d9 15%,#f3e9d9fa 22%,#f3e9d9ce 29%,#f3e9d930 35%,#f3e9d900 41%),linear-gradient(180deg,#f3e9d970 0%,#f3e9d900 20%)}
#fh-hero-stage .fh-copy{position:relative;width:51%;padding:65px 0 105px 44px}
#fh-hero-stage .fh-eyebrow{font:700 11px Arial,sans-serif;letter-spacing:2px;color:var(--fh-clay);margin:0 0 24px}
#fh-hero-stage h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(44px,5.65cqw,62px);font-weight:500;line-height:1.06;letter-spacing:-2px;margin:0 0 25px;color:var(--fh-ink)}
#fh-hero-stage .fh-intro{font-size:16px;line-height:1.65;color:#655747;margin:0;max-width:360px}
#fh-hero-stage .fh-actions{display:flex;align-items:center;gap:23px;margin-top:28px;font-size:13px;font-weight:700;white-space:nowrap}
#fh-hero-stage .fh-primary{display:inline-block;border-radius:30px;padding:17px 22px;background:var(--fh-clay);color:#fffaf3;box-shadow:0 10px 25px #965a3426}
#fh-hero-stage .fh-secondary{border-bottom:1px solid #8b765b70;padding:10px 0;color:var(--fh-ink)}
#fh-hero-stage .fh-secondary span{margin-left:7px}
#fh-hero-stage .fh-trust{position:absolute;left:44px;right:30px;bottom:28px;display:flex;gap:25px;flex-wrap:wrap;color:#5c634d;font-size:12px;font-weight:700}
#fh-hero-stage .fh-window[data-unused-preview-layout="mobile"]{max-width:390px}
@container (max-width:650px){
 #fh-hero-stage .fh-hero{min-height:825px}
 #fh-hero-stage .fh-landscape{width:210%;left:-25%;top:250px}
 #fh-hero-stage .fh-blend{background:linear-gradient(180deg,#f3e9d9 0%,#f3e9d9 32%,#f3e9d9ef 39%,#f3e9d940 49%,#f3e9d900 59%),linear-gradient(0deg,#f3e9d9 0%,#f3e9d9 13%,#f3e9d9f5 19%,#f3e9d9b0 25%,#f3e9d925 30%,#f3e9d900 34%),linear-gradient(90deg,#f3e9d920,#f3e9d900 40%)}
 #fh-hero-stage .fh-copy{width:100%;padding:32px 26px 0}
 #fh-hero-stage .fh-eyebrow{font-size:10px;letter-spacing:1.4px;margin-bottom:20px}
 #fh-hero-stage h1{font-size:43px;line-height:1.08;letter-spacing:-1.6px;margin-bottom:20px}
 #fh-hero-stage .fh-intro{font-size:15px;line-height:1.6;max-width:340px}
 #fh-hero-stage .fh-actions{margin-top:23px;gap:19px;font-size:12px}
 #fh-hero-stage .fh-primary{padding:16px 18px}
 #fh-hero-stage .fh-trust{left:26px;right:22px;bottom:24px;font-size:11px;gap:10px 16px}
}
@container (min-width:651px) and (max-width:850px){
 #fh-hero-stage .fh-hero{min-height:560px}
 #fh-hero-stage .fh-copy{padding:48px 0 95px 30px;width:53%}
 #fh-hero-stage h1{font-size:46px}
 #fh-hero-stage .fh-intro{max-width:305px;font-size:14px}
 #fh-hero-stage .fh-actions{gap:16px;font-size:11px}
 #fh-hero-stage .fh-primary{padding:15px 16px}
 #fh-hero-stage .fh-landscape{width:105%;left:37%;top:0}
 #fh-hero-stage .fh-trust{left:30px}
}
@container (max-width:350px){
 #fh-hero-stage .fh-copy{padding-left:20px;padding-right:20px}
 #fh-hero-stage h1{font-size:38px}
 #fh-hero-stage .fh-actions{gap:12px;font-size:11px}
 #fh-hero-stage .fh-primary{padding:15px 14px}
 #fh-hero-stage .fh-landscape{top:295px}
}

/* Zusammenhängende Bildfläche und kompakte Gruppierung der Aktionen */
#fh-hero-stage .fh-hero{min-height:550px;background:#eee0cc}
#fh-hero-stage .fh-landscape{width:98%;left:28%;top:-48px;filter:sepia(.35) saturate(.62) brightness(1.03)}
#fh-hero-stage .fh-blend{background:linear-gradient(90deg,#f3e9d9 0%,#f3e9d9f5 21%,#f3e9d9ce 32%,#f3e9d98c 43%,#f3e9d945 53%,#f3e9d900 68%),linear-gradient(0deg,#f3e9d9 0%,#f3e9d9 13%,#f3e9d9f5 20%,#f3e9d9b0 28%,#f3e9d925 35%,#f3e9d900 42%),linear-gradient(180deg,#f3e9d970 0%,#f3e9d900 22%)}
#fh-hero-stage .fh-copy{width:58%;padding:52px 0 36px 44px}
#fh-hero-stage .fh-intro{max-width:365px;color:#514535}
#fh-hero-stage .fh-trust{position:static;margin-top:24px;gap:10px 18px;font-size:11px;max-width:460px;line-height:1.5}
@container (min-width:651px) and (max-width:850px){
 #fh-hero-stage .fh-hero{min-height:520px}
 #fh-hero-stage .fh-copy{width:59%;padding:42px 0 30px 30px}
 #fh-hero-stage .fh-landscape{width:108%;left:24%;top:-20px}
 #fh-hero-stage .fh-intro{max-width:325px}
 #fh-hero-stage .fh-trust{max-width:320px;gap:8px 14px}
}
@container (max-width:650px){
 #fh-hero-stage .fh-hero{min-height:770px}
 #fh-hero-stage .fh-copy{width:100%;padding:30px 26px 0}
 #fh-hero-stage .fh-landscape{width:210%;left:-25%;top:215px}
 #fh-hero-stage .fh-blend{background:linear-gradient(180deg,#f3e9d9 0%,#f3e9d9f5 23%,#f3e9d9cc 34%,#f3e9d980 43%,#f3e9d925 53%,#f3e9d900 62%),linear-gradient(0deg,#f3e9d9 0%,#f3e9d9 10%,#f3e9d9ef 17%,#f3e9d9a6 24%,#f3e9d925 30%,#f3e9d900 35%)}
 #fh-hero-stage .fh-trust{margin-top:20px;max-width:330px;font-size:11px;gap:8px 14px}
}
@container (max-width:350px){
 #fh-hero-stage .fh-copy{padding-left:20px;padding-right:20px}
 #fh-hero-stage .fh-landscape{top:250px}
 #fh-hero-stage .fh-hero{min-height:760px}
}

/* Bildränder selbst ausblenden, damit keine rechteckige Fotokante bleibt. */
#fh-hero-stage .fh-landscape{
 -webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.38) 7%,rgba(0,0,0,.8) 12%,#000 18%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 3%,rgba(0,0,0,.48) 7%,rgba(0,0,0,.86) 11%,#000 15%);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.08) 3%,rgba(0,0,0,.38) 7%,rgba(0,0,0,.8) 12%,#000 18%),linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.12) 3%,rgba(0,0,0,.48) 7%,rgba(0,0,0,.86) 11%,#000 15%);
 mask-composite:intersect;
 -webkit-mask-repeat:no-repeat;
 mask-repeat:no-repeat;
}

/* Klarer sekundärer Button; mobil eigene Bildzone innerhalb des gemeinsamen Hintergrunds. */
#fh-hero-stage .fh-secondary{display:inline-flex;align-items:center;justify-content:center;border:1px solid #c9b69d;border-radius:28px;padding:16px 19px;background:#faf4e9;color:#302519;text-decoration:none}
@container (min-width:651px) and (max-width:850px){
 #fh-hero-stage .fh-secondary{padding:14px 15px}
}
@container (max-width:650px){
 #fh-hero-stage .fh-hero{min-height:0;padding-bottom:0;display:flex;flex-direction:column;overflow:hidden}
 #fh-hero-stage .fh-copy{order:0;position:relative;width:100%;padding:30px 26px 0;background:#f3e9d9;z-index:2}
 #fh-hero-stage .fh-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:23px;font-size:12px;white-space:normal}
 #fh-hero-stage .fh-primary,#fh-hero-stage .fh-secondary{display:flex;align-items:center;justify-content:center;text-align:center;min-height:49px;padding:13px 10px;line-height:1.35}
 #fh-hero-stage .fh-secondary{background:#faf4e9;border:1px solid #c9b69d}
 #fh-hero-stage .fh-secondary span{margin-left:5px}
 #fh-hero-stage .fh-trust{margin-top:19px;padding-bottom:0;display:flex;flex-wrap:wrap;gap:8px 14px;position:static;font-size:11px;line-height:1.5}
 #fh-hero-stage .fh-landscape{order:1;position:relative;top:auto;left:auto;z-index:0;display:block;width:210%;max-width:none;height:auto;margin-left:-25%;margin-top:-6px;margin-bottom:0;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 3%,rgba(0,0,0,.7) 7%,#000 12%,#000 36%,rgba(0,0,0,.85) 42%,rgba(0,0,0,.3) 49%,transparent 57%);
 mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.2) 3%,rgba(0,0,0,.7) 7%,#000 12%,#000 36%,rgba(0,0,0,.85) 42%,rgba(0,0,0,.3) 49%,transparent 57%);
 -webkit-mask-composite:source-over;mask-composite:add}
 #fh-hero-stage .fh-blend{display:none}
 #fh-hero-stage .fh-hero{background:#f3e9d9}
}

#fh-hero-stage .fh-photo-layer{display:contents}
@container (max-width:650px){
 #fh-hero-stage .fh-photo-layer{display:block;order:1;position:relative;height:118cqw;max-height:470px;overflow:hidden;background:#f3e9d9}
}

/* Mobiler Übergang: deckungsgleicher Hintergrund und weicher Verlauf über dem Bild. */
@container (max-width:650px){
 #fh-hero-stage .fh-photo-layer{background:#f3e9d9;isolation:isolate}
 #fh-hero-stage .fh-photo-layer .fh-landscape{margin-top:0}
 #fh-hero-stage .fh-photo-layer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:100px;z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,#f3e9d9 0%,#f3e9d9 12%,rgba(243,233,217,.98) 22%,rgba(243,233,217,.85) 38%,rgba(243,233,217,.58) 56%,rgba(243,233,217,.25) 76%,rgba(243,233,217,0) 100%);
 }
}

/* Production links and wide desktop composition. */
#fh-hero-stage a.fh-primary,#fh-hero-stage a.fh-secondary{text-decoration:none}
#fh-hero-stage a.fh-primary:hover{background:#91532d}
#fh-hero-stage a.fh-secondary:hover{background:#f0e4d2}
#fh-hero-stage a:focus-visible{outline:3px solid #567743;outline-offset:4px}
@container (min-width:1101px){
 #fh-hero-stage .fh-copy{width:638px;margin-left:calc((100% - 1100px)/2)}
 #fh-hero-stage .fh-landscape{width:1078px;left:calc(50% - 242px)}
 #fh-hero-stage .fh-blend{background:linear-gradient(90deg,#f3e9d9 0%,#f3e9d9ed 28%,#f3e9d9a6 42%,#f3e9d938 54%,#f3e9d900 64%,#f3e9d900 80%,#f3e9d9 100%),linear-gradient(0deg,#f3e9d9 0%,#f3e9d9 13%,#f3e9d9f5 20%,#f3e9d9b0 28%,#f3e9d925 35%,#f3e9d900 42%)}
}