/*
 * theme-maisterwerk.css — heller Hintergrund von maisterwerk.ai zum Vergleich:
 * Creme #F7F1E6 (= rgb(247 241 230) aus [data-theme=light] der Live-Seite), feines 34-px-Raster
 * (rgba(51,39,28,.05), radial zur Mitte eingeblendet) und ein warmer, weichgezeichneter Lichtfleck
 * (rgba(154,97,28,.10)). Nur der Hintergrund – Text und Buttons bleiben wie in den Varianten.
 * Nach style.css (und carousel.css) einbinden.
 */
:root {
  --color-bg: #F7F1E6;
  --mw-grid-line: rgba(51, 39, 28, .05);
  --mw-glow: rgba(154, 97, 24, .10);
}

/* Flächen durchsichtig, damit Raster und Lichtfleck durchscheinen (Menü-Overlay bleibt deckend) */
html, body, .hero {
  background: transparent;
}

body {
  position: relative;
  background: var(--color-bg);
}

/* Raster wie .grid-texture auf maisterwerk.ai */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--mw-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--mw-grid-line) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 75%);
}

/* Warmer Lichtfleck wie .glow auf maisterwerk.ai, hinter Headline und Band */
body::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 38%;
  width: 70vw;
  height: 55vh;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(closest-side, var(--mw-glow), transparent 70%);
  filter: blur(40px);
}