*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:var(--weight-regular);color:var(--text-strong);letter-spacing:var(--tracking-display)}
p{margin:0}
a{color:var(--text-strong);text-decoration:none;border-bottom:1px solid var(--line-hairline);transition:var(--transition-color)}
a:hover{color:var(--text-accent);border-bottom-color:var(--action-secondary)}
img{display:block;max-width:100%}
button{font:inherit}
::selection{background:var(--gold-200);color:var(--ink-900)}
:focus-visible{outline:none;box-shadow:var(--ring-focus)}
.wf-eyebrow{font-family:var(--font-sans);font-weight:var(--weight-regular);font-size:var(--size-micro);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.wf-gradient-text{background:var(--gradient-headline);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
@keyframes wfActiveLine{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wf-active-line{position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--taupe-500);transform-origin:left;animation:wfActiveLine var(--dur-slow) var(--ease-soft) forwards}
/* Shimmer-Text-Effekt (übernommen von weiterfunkeln.ferme-piccand.ch), Farben aus --gradient-headline */
.wf-stage{position:relative;display:inline-block}
.wf-target-text{position:relative;display:inline-block;background-image:var(--gradient-headline);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:wf-target-shimmer 6s linear infinite}
@keyframes wf-target-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.wf-spark{position:absolute;color:var(--gold-500);-webkit-text-fill-color:var(--gold-500);background:none;opacity:0;pointer-events:none;text-shadow:0 0 6px #fff,0 0 14px var(--gold-500),0 0 22px var(--gold-300),0 1px 2px rgba(0,0,0,.15);animation-name:wf-sparkle-pop;animation-timing-function:ease-in-out;animation-fill-mode:forwards;z-index:10;font-size:16px}
@keyframes wf-sparkle-pop{0%{opacity:0;transform:scale(0) rotate(0deg)}50%{opacity:1;transform:scale(1) rotate(90deg)}100%{opacity:0;transform:scale(.3) rotate(180deg)}}
/* Gold-Button Glanzeffekt (Vorlage von ChatGPT übernommen) */
.wf-btn-gold{
  box-shadow: 0 2px 8px rgba(143,96,20,.2);
  transition:box-shadow 180ms ease;
}
.wf-btn-gold:hover{
  box-shadow: 0 3px 10px rgba(143,96,20,.28);
}
.wf-btn-gold:hover .wf-btn-gold-arrow{transform:translateX(4px)}
/* Kategorie-Kacheln: goldene Pille mit Glanz-Sweep beim Hover (wie .wf-btn-gold) */
.wf-cat-pill{
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 4px rgba(112,70,10,.2),
    0 4px 12px rgba(143,96,20,.28);
  transition:transform 220ms ease, box-shadow 220ms ease;
}
.wf-cat-pill::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  transform:translateX(-130%);
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  transition:transform 650ms ease;
}
.wf-cat-pill-arrow{transition:transform 180ms ease}
.wf-cat:hover .wf-cat-pill{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 #fff,
    0 7px 18px rgba(143,96,20,.35),
    0 0 24px rgba(238,198,99,.38);
}
.wf-cat:hover .wf-cat-pill::before{transform:translateX(130%)}
.wf-cat:hover .wf-cat-pill-arrow{transform:translateX(4px)}
/* Preisregler: dünnere Leiste als der Browser-Default */
.wf-price-range{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}
.wf-price-range::-webkit-slider-runnable-track{height:2px;background:var(--line-hairline);border-radius:2px}
.wf-price-range::-moz-range-track{height:2px;background:var(--line-hairline);border-radius:2px}
.wf-price-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold-300);margin-top:-5px;box-shadow:0 1px 3px rgba(36,29,24,.25)}
.wf-price-range::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--gold-300);box-shadow:0 1px 3px rgba(36,29,24,.25)}
/* Footer-Links: eigene Hover-Farbe statt der geerbten (per Inline-Style sonst blockierten) globalen a:hover-Regel */
.wf-footer-link{color:var(--ink-700);transition:var(--transition-color)}
.wf-footer-link:hover{color:var(--gold-700)}