:root {
  --am-content-width: 1200px;
  --am-gutter: clamp(20px, 3vw, 36px);

  --am-orange: #ff7b00;
  --am-orange-hover: #e66f00;
  --am-orange-soft: #ffe1c2;
  --am-ink: #1c2833;
  --am-slate: #34434f;
  --am-muted: #66737c;
  --am-paper: #f6f3ed;
  --am-surface: #ece8e0;
  --am-line: #d7d2c8;

  --am-radius-sm: 10px;
  --am-radius-md: 18px;
  --am-radius-lg: 30px;
  --am-shadow: 0 18px 50px rgb(28 40 51 / 12%);
  --am-section-space: clamp(64px, 9vw, 128px);
}

.am-section,
.am-section * {
  box-sizing: border-box;
}

.am-section {
  width: 100%;
}

.am-container {
  width: 100%;
  max-width: var(--am-content-width);
  margin-inline: auto;
  padding-inline: var(--am-gutter);
}

.am-section-inner {
  padding-block: var(--am-section-space);
}

.am-surface-light {
  color: var(--am-ink);
  background: var(--am-paper);
}

.am-surface-dark {
  color: var(--am-paper);
  background: var(--am-ink);
}

.am-accent {
  color: var(--am-orange);
}

.am-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.9em 1.25em;
  border: 1px solid var(--am-orange);
  border-radius: var(--am-radius-sm);
  color: var(--am-ink);
  background: var(--am-orange);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.am-button-primary:hover,
.am-button-primary:focus-visible {
  border-color: var(--am-orange-hover);
  background: var(--am-orange-hover);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .am-button-primary {
    transition: none;
  }
}



/*          EFFEKTE       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */



Simple Glass Effect

Advanced Glass Effect

There are two ways to make glass effect. First is simple, it's when you use backdrop-filter with blur + background with partial opacity. You can add it in Effect panel



Second is more advanced with distortion. For this, you will need to have special SVG Image, so copy next block on page, you can put it in footer or in any place, it's just must be somewhere on page


Now, you will need next code to be added in Custom css of block

{CURRENT}::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  padding: 1px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.25),
    rgba(255, 255, 255, 0.02)
  );
  -webkit-mask:
  linear-gradient(#fff 0 0) content-box,
  linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none; 
}
{CURRENT}{
  border-radius:10px;
}
{CURRENT}:after{
 content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  filter: url(#glass-distortion);
  isolation: isolate;
}



This code includes not only blur effect but also partial transparent border. If you need only blur, then use 



{CURRENT}:after{
 content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  backdrop-filter: blur(8px);
  filter: url(#glass-distortion);
  isolation: isolate;
}



If you add border radius, make sure that you added it the same across whole code