@charset "UTF-8";
:root {
  /* FIX: Das finale Rechteck (am Ende der SVG) füllt sich jetzt korrekt mit dem kachelbaren Pattern (url(%23p)) */
  --noise-mask-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.4" numOctaves="4" stitchTiles="stitch" result="noise"/><feColorMatrix in="noise" type="saturate" values="0" result="gray"/><feColorMatrix in="gray" type="luminanceToAlpha" result="alpha"/><feComponentTransfer in="alpha"><feFuncA type="discrete" tableValues="0 0.22 0.88 1"/></feComponentTransfer></filter><pattern id="p" width="128" height="128" patternUnits="userSpaceOnUse"><rect width="128" height="128" filter="url(%23n)"/></pattern><rect width="100%" height="100%" fill="url(%23p)"/></svg>');
  /* Optional: Farben für Basis und Overlay zentral steuerbar */
  --noise-base-color: var(--primary-semi-light);
  --noise-overlay-color: var(--primary-light);
  /* Globaler statischer Fallback für die Masken-URL */
  --icon-url-default: url("/wp-content/uploads/trust-icon_sichere-bestellung.svg");
}
/* Basis für Block-Hintergrund & Icon-Wrapper */
.bg-primary-noise, .img-primary-noise {
  position: relative;
  isolation: isolate;
  /* verhindert Mischen mit Seitenhintergrund */
}
/* Gemeinsames Overlay (Noise-Maske + Overlay-Farbe) für alle Varianten */
.bg-primary-noise::before, .img-primary-noise::before, .h-primary-noise::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--noise-overlay-color);
  /* Noise-Maske zentral aus Variable */
  -webkit-mask-image: var(--noise-mask-url);
  mask-image: var(--noise-mask-url);
  /* FIX: Von "no-repeat" auf "repeat" geändert, damit die Kachel unendlich läuft */
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
  /* FIX: Ausrichtung auf oben links gesetzt für den Kachel-Start */
  -webkit-mask-position: top left;
  mask-position: top left;
  /* FIX: Auf auto gesetzt, damit die Kachel 128x128px groß bleibt und nicht gezerrt wird */
  -webkit-mask-size: auto;
  mask-size: auto;
}
/* Stacking: Noise-Overlay liegt hinter dem Inhalt bei Block/Icon */
.bg-primary-noise::before, .img-primary-noise::before {
  z-index: -1;
}
/* Spezifisch: Container-Hintergrund mit Basisfarbe + Inhalt über dem Noise */
.bg-primary-noise {
  background-color: var(--noise-base-color);
}
.bg-primary-noise > * {
  position: relative;
  z-index: 1;
}
/* Spezifisch: Icon-Silhouette + Größe/Positionierung */
.img-primary-noise {
  display: inline-block;
  background-color: var(--noise-base-color);
  /* Silhouetten-Maske aus Variable (Fallback-Kette):
       1) --icon-url (element-spezifisch: manuell gesetzt)
       2) --post-featured-image-url (dynamisch pro Post/Loop setzen)
       3) --icon-url-default (globaler statischer Fallback)
    */
  -webkit-mask-image: var(--icon-url, var(--post-featured-image-url, var(--icon-url-default)));
  mask-image: var(--icon-url, var(--post-featured-image-url, var(--icon-url-default)));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* Größenlieferanten (img oder svg) innerhalb des Icon-Wrapper */
.img-primary-noise > img, .img-primary-noise > svg {
  display: block;
  width: 100%;
  height: auto;
  visibility: hidden;
  /* unsichtbar, liefert aber Größe/Aspect-Ratio */
  pointer-events: none;
}
/* Überschrift: Basis-Schrift in Grundfarbe */
.h-primary-noise {
  position: relative;
  color: var(--noise-base-color);
  line-height: 1.1;
  /* je nach Font anpassen */
}
/* Überschrift: Overlay innerhalb der Buchstaben (Clip + Transparenz) */
.h-primary-noise::after {
  content: attr(data-text);
  /* überschreibt das leere content aus der gemeinsamen Regel */
  /* Clip Overlay in die Text-Glyphen */
  -webkit-background-clip: text;
  background-clip: text;
  /* Text transparent, damit nur der geclippte Hintergrund sichtbar ist */
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* für Safari */
}
/* Spezifischer Fix für Firefox */
@-moz-document url-prefix() {
  .bg-primary-noise::before, .img-primary-noise::before, .h-primary-noise::after {
    -moz-mask-size: cover !important;
    mask-size: cover !important;
  }
}