/* ==========================================================================
   Texturen — Holz, Filz, Messing, Papier & Rauschen
   Alles per CSS-Gradient + eingebettetem SVG-Filter erzeugt, keine Bilddateien.
   ========================================================================== */

/* Feines Korn-Rauschen als wiederverwendbarer Overlay-Layer */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 140px 140px;
}

.texture-surface {
  position: relative;
  isolation: isolate;
}

/* Walnussholz mit Maserung */
.texture-wood {
  background-color: var(--wood-700);
  background-image:
    repeating-linear-gradient(
      92deg,
      rgba(0, 0, 0, 0.12) 0px,
      transparent 2px,
      transparent 7px,
      rgba(0, 0, 0, 0.08) 9px,
      transparent 14px
    ),
    repeating-linear-gradient(
      92deg,
      rgba(255, 205, 140, 0.06) 0px,
      transparent 3px,
      transparent 22px,
      rgba(255, 205, 140, 0.05) 25px,
      transparent 40px
    ),
    linear-gradient(135deg, var(--wood-600), var(--wood-800) 60%, var(--wood-900));
}

.texture-wood-dark {
  background-color: var(--wood-900);
  background-image:
    repeating-linear-gradient(
      88deg,
      rgba(0, 0, 0, 0.28) 0px,
      transparent 2px,
      transparent 8px,
      rgba(0, 0, 0, 0.18) 10px,
      transparent 16px
    ),
    linear-gradient(135deg, var(--wood-800), var(--wood-950) 70%);
}

/* Grünes Filztuch */
.texture-felt {
  background-color: var(--felt-700);
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.05), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.2), transparent 55%),
    linear-gradient(160deg, var(--felt-600), var(--felt-800) 75%);
}

.texture-felt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='f'><feTurbulence type='turbulence' baseFrequency='0.7' numOctaves='3'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-size: 90px 90px;
}

/* Gebürstetes Messing */
.texture-brass {
  background-color: var(--brass-700);
  background-image:
    repeating-linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.18) 0px,
      transparent 1px,
      transparent 3px,
      rgba(0, 0, 0, 0.12) 4px,
      transparent 6px
    ),
    linear-gradient(155deg, var(--brass-500), var(--brass-800) 65%, var(--brass-900));
}

/* Pergament / Kartonpapier */
.texture-parchment {
  background-color: var(--parchment-200);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.5), transparent 55%),
    radial-gradient(circle at 75% 85%, rgba(120, 90, 40, 0.12), transparent 60%),
    linear-gradient(170deg, var(--parchment-100), var(--parchment-300));
}

.texture-parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23p)'/></svg>");
  background-size: 130px 130px;
}