:root {
  --bg-pattern-opacity: 0.075;
  --bg-pattern-size: min(50vw, 760px) auto;
}

html {
  background: #ffffff;
}

body.has-bg-pattern {
  position: relative;
  isolation: isolate;
  background-color: transparent;
}

body.has-bg-pattern::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("https://bausteine-medienbildung.de/wp-content/uploads/2026/06/Bausteine-bunt.png");
  background-size: var(--bg-pattern-size, min(50vw, 760px) auto);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-attachment: fixed;
  opacity: var(--bg-pattern-opacity, 0.075);
  z-index: -1;
  pointer-events: none;
}

@media (max-width: 768px) {
  body.has-bg-pattern::before {
    background-attachment: scroll;
    background-size: 82vw auto;
  }
}