/* Sprudel-Knopf (nur dev, Test seit 29.09.2026) — Mechanik in files/layout/js/sprudel.js.
   Das Skript setzt .hs-sprudel-knopf an jeden grünen Knopf und legt als erstes Kind
   span.hs-sprudel > canvas hinein. Die Farben liest es aus den Variablen unten. */
.hs-sprudel-knopf {
  /* Füllung nur eine Stufe dunkler als die Fläche (Wunsch Niels 29.09.: nicht so dunkel);
     feste Werte statt color-mix — der Canvas bekommt sonst oklab(). Weiß darauf 5,96:1 */
  --hs-sprudel-fuellung: #4a6e00;
  --hs-sprudel-ruhe: rgb(255 255 255 / .5);
  --hs-sprudel-voll: rgb(255 255 255 / .7);
  position: relative;
  isolation: isolate;       /* Canvas (z-index -1) liegt über der Fläche, unter der Schrift */
}
/* Die Füllung übernimmt den Hover-Zustand: die Fläche selbst bleibt beim Überfahren gleich,
   sonst sprünge sie sofort um, während die Füllung noch steigt. */
html[data-theme="dark"] .hs-sprudel-knopf { --hs-sprudel-fuellung: #466900; }   /* Fläche dort #557d00; Weiß 6,40:1 */
.hs-sprudel-knopf.hs-sprudel-knopf:is(:hover, :focus-visible) {
  background: var(--c-brand-area) !important;
}
/* Das alte Skew-System (utilities.css) wischt bei button.submit ein grünes ::after auf
   derselben Ebene (z-index -1) herein und deckte die Bläschen zu — die Füllung ersetzt es.
   Ausnahme: externe Knöpfe (target=_blank) — ihr ::after IST das Symbol --hs-icon-extern
   (components.css, „Knopf Webseite ansehen“); ohne die Ausnahme fehlte es an den Case-Study-Köpfen. */
.hs-sprudel-knopf.hs-sprudel-knopf:not([target="_blank"])::after { display: none !important; }
.hs-sprudel {
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.hs-sprudel canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* heller Haarstrich, sobald die Füllung steht — wie im Vorbild, damit der dunkle Knopf
   sich auch auf dunklem Grund absetzt */
.hs-sprudel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .75);
  opacity: 0;
  transition: opacity .25s;
}
.is-sprudel-voll > .hs-sprudel::after { opacity: 1; }