/* R06.18 Matte Grain Lab
   A static material pass. It changes no layout, copy or interaction. */

:root {
  --grain-fine: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.48'/%3E%3C/svg%3E");
  --grain-coarse: url("data:image/svg+xml,%3Csvg viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.24' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.36'/%3E%3C/svg%3E");
  --grain-fiber: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='.018 .34' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.22'/%3E%3C/svg%3E");
}

/* The persistent navigation is a floating brand surface, not a hard browser bar. */
.site-header {
  top: clamp(0.55rem, 1vw, 0.9rem);
  border-radius: clamp(1.2rem, 2vw, 1.75rem);
  box-shadow:
    0 0.55rem 0 oklch(12% 0.035 225 / 16%),
    0 1.15rem 2.4rem oklch(12% 0.035 225 / 14%);
}

/* The matte coat is intentionally subtle. The grain carries the material. */
body::before {
  position: fixed;
  inset: 0;
  z-index: 998;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(oklch(94% 0.022 82 / 5%), oklch(89% 0.018 244 / 3%));
  mix-blend-mode: soft-light;
}

body::after {
  position: fixed;
  inset: -12%;
  z-index: 999;
  content: "";
  pointer-events: none;
  background-image: var(--grain-fine), var(--grain-coarse);
  background-position: 0 0, 4rem 7rem;
  background-size: 11rem 11rem, 31rem 31rem;
  mix-blend-mode: soft-light;
  opacity: 0.34;
  transform: rotate(0.001deg);
}

[data-sky-phase] {
  isolation: isolate;
}

.phase-grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image:
    linear-gradient(var(--phase-matte, transparent), var(--phase-matte, transparent)),
    var(--phase-grain-primary, var(--grain-fine)),
    var(--phase-grain-secondary, var(--grain-coarse));
  background-position: center, 0 0, 2.5rem 4rem;
  background-size: auto, var(--phase-grain-size, 12rem) var(--phase-grain-size, 12rem), 34rem 34rem;
  mix-blend-mode: var(--phase-blend, soft-light);
  opacity: var(--phase-opacity, 0.22);
}

[data-sky-phase="universe"] {
  --phase-matte: oklch(40% 0.055 258 / 5%);
  --phase-grain-primary: var(--grain-coarse);
  --phase-grain-secondary: var(--grain-fine);
  --phase-grain-size: 27rem;
  --phase-blend: screen;
  --phase-opacity: 0.28;
}

[data-sky-phase="sky"] {
  --phase-matte: oklch(91% 0.045 220 / 8%);
  --phase-grain-primary: var(--grain-fine);
  --phase-grain-secondary: var(--grain-fiber);
  --phase-grain-size: 10rem;
  --phase-blend: multiply;
  --phase-opacity: 0.18;
}

[data-sky-phase="day"] {
  --phase-matte: oklch(96% 0.025 82 / 7%);
  --phase-grain-primary: var(--grain-fiber);
  --phase-grain-secondary: var(--grain-fine);
  --phase-grain-size: 18rem;
  --phase-blend: multiply;
  --phase-opacity: 0.19;
}

[data-sky-phase="night"] {
  --phase-matte: oklch(43% 0.075 260 / 7%);
  --phase-grain-primary: var(--grain-coarse);
  --phase-grain-secondary: var(--grain-fine);
  --phase-grain-size: 25rem;
  --phase-blend: screen;
  --phase-opacity: 0.23;
}

[data-sky-phase="sunset"] {
  --phase-matte: oklch(82% 0.075 322 / 9%);
  --phase-grain-primary: var(--grain-fine);
  --phase-grain-secondary: var(--grain-fiber);
  --phase-grain-size: 13rem;
  --phase-blend: soft-light;
  --phase-opacity: 0.3;
}

[data-sky-phase="orange"] {
  --phase-matte: oklch(83% 0.12 52 / 8%);
  --phase-grain-primary: var(--grain-coarse);
  --phase-grain-secondary: var(--grain-fine);
  --phase-grain-size: 20rem;
  --phase-blend: multiply;
  --phase-opacity: 0.24;
}

[data-sky-phase="ground"] {
  --phase-matte: oklch(35% 0.035 225 / 4%);
  --phase-grain-primary: var(--grain-fine);
  --phase-grain-secondary: var(--grain-fiber);
  --phase-grain-size: 14rem;
  --phase-blend: screen;
  --phase-opacity: 0.16;
}

/* Product polish: the three offers arrive as physical printed objects. */
#produkte .product-app-icon {
  --product-rest-shadow:
    0.88rem 0.94rem 0 var(--product-shadow-hard),
    1.46rem 1.58rem 0 var(--product-shadow-soft),
    0 1.8rem 4.2rem var(--product-shadow-ambient),
    inset 0 1px 0 oklch(99% 0.008 82 / 88%);
  --product-lift-shadow:
    1.35rem 1.45rem 0 var(--product-shadow-hard),
    2rem 2.14rem 0 var(--product-shadow-soft),
    0 3.25rem 6.8rem oklch(16% 0.045 255 / 34%),
    inset 0 1px 0 oklch(99% 0.008 82 / 88%);
  --product-lift-transform: translate(-50%, -54%) scale(1.018) rotate(0deg);
  box-shadow: var(--product-rest-shadow);
  transition:
    transform 420ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

#produkte .product-stage.is-scroll-lifted .product-app-icon {
  box-shadow: var(--product-lift-shadow);
  transform: var(--product-lift-transform);
}

#produkte .product-stage.is-visible .product-app-icon {
  animation: none;
}

#produkte .product-stage .product-app-icon.is-scroll-blurring {
  animation: r0618ScrollBlurPulse 420ms cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes r0618ScrollBlurPulse {
  0% {
    filter: blur(7px);
  }

  55% {
    filter: blur(2px);
  }

  100% {
    filter: blur(0);
  }
}

/* Dark printed marker behind the short, practical explanation. */
#produkte .product-copy > p:not(.product-label) {
  width: fit-content;
  max-width: min(38rem, 100%);
  border-radius: 0.42rem;
  padding: 0.78em 0.92em 0.84em;
  color: var(--bk-cream);
  background:
    linear-gradient(178deg, oklch(20% 0.035 225), var(--bk-ink));
  box-shadow: 0.32rem 0.36rem 0 oklch(18% 0.025 225 / 20%);
  font-weight: 700;
  line-height: 1.5;
}

/* Cursor movement must not change the offer objects. Their depth is scroll-led. */
@media (hover: hover) and (pointer: fine) {
  #produkte .product-stage:hover .product-app-icon,
  #produkte .product-stage--calendar:hover .product-app-icon {
    box-shadow: var(--product-rest-shadow);
    transform: translate(-50%, -50%) scale(1) rotate(var(--product-rest-rotation));
  }

  #produkte .product-stage.is-scroll-lifted:hover .product-app-icon,
  #produkte .product-stage--calendar.is-scroll-lifted:hover .product-app-icon {
    box-shadow: var(--product-lift-shadow);
    transform: var(--product-lift-transform);
  }
}

@media (max-width: 700px) {
  .site-header {
    top: max(0.5rem, env(safe-area-inset-top));
    border-radius: 1.35rem;
    box-shadow:
      0 0.42rem 0 oklch(12% 0.035 225 / 18%),
      0 0.9rem 1.8rem oklch(12% 0.035 225 / 13%);
  }

  body::after {
    opacity: 0.28;
  }

  [data-sky-phase="sunset"] {
    --phase-opacity: 0.24;
  }

  #produkte .product-app-icon {
    --product-rest-shadow:
      0.58rem 0.64rem 0 var(--product-shadow-hard),
      0.95rem 1.04rem 0 var(--product-shadow-soft),
      0 1.2rem 2.8rem oklch(16% 0.045 255 / 22%),
      inset 0 1px 0 oklch(99% 0.008 82 / 88%);
    --product-lift-shadow:
      0.9rem 0.98rem 0 var(--product-shadow-hard),
      1.35rem 1.45rem 0 var(--product-shadow-soft),
      0 2.25rem 4.8rem oklch(16% 0.045 255 / 30%),
      inset 0 1px 0 oklch(99% 0.008 82 / 88%);
    --product-lift-transform: translate(-50%, -53%) scale(1.012) rotate(0deg);
  }

  #produkte .product-copy > p:not(.product-label) {
    margin-top: 1.35rem;
    padding: 0.72em 0.78em 0.78em;
    font-size: clamp(0.92rem, 4.1vw, 1.02rem);
    line-height: 1.48;
  }

  /* iOS/WebKit-safe flip: two opaque 2D halves instead of one leaking 3D backface. */
  .trust-card {
    perspective: none;
  }

  .trust-card__flip,
  .trust-card.is-flipped .trust-card__flip {
    transform: none;
    transform-style: flat;
    -webkit-transform-style: flat;
    transition: none;
  }

  .trust-card__face {
    opacity: 1;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    transform-origin: center;
    transition:
      transform 220ms cubic-bezier(0.77, 0, 0.175, 1),
      visibility 0s linear;
  }

  .trust-card__front {
    z-index: 2;
    visibility: visible;
    transform: translateZ(0) scaleX(1);
    transition-delay: 220ms, 0s;
  }

  .trust-card__back {
    z-index: 1;
    visibility: hidden;
    transform: translateZ(0) scaleX(0.04);
    transition-delay: 0s, 220ms;
  }

  .trust-card.is-flipped .trust-card__front {
    z-index: 1;
    visibility: hidden;
    transform: translateZ(0) scaleX(0.04);
    transition-delay: 0s, 220ms;
  }

  .trust-card.is-flipped .trust-card__back {
    z-index: 2;
    visibility: visible;
    transform: translateZ(0) scaleX(1);
    transition-delay: 220ms, 0s;
  }

  .trust-card__front > * {
    opacity: 1;
    transition: opacity 100ms ease-out 220ms;
  }

  .trust-card__back > * {
    opacity: 0;
    transition: opacity 80ms ease-out;
  }

  .trust-card.is-flipped .trust-card__front > * {
    opacity: 0;
    transition-delay: 0s;
  }

  .trust-card.is-flipped .trust-card__back > * {
    opacity: 1;
    transition-delay: 220ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  #produkte .product-stage.is-visible .product-app-icon,
  #produkte .product-app-icon {
    animation: none;
    filter: none;
    opacity: 1;
    transition: none;
    transform: translate(-50%, -50%) rotate(var(--product-rest-rotation));
  }

  #produkte .product-stage.is-scroll-lifted .product-app-icon {
    box-shadow: var(--product-rest-shadow);
    transform: translate(-50%, -50%) rotate(var(--product-rest-rotation));
  }

  .trust-card__face,
  .trust-card__front,
  .trust-card__back,
  .trust-card.is-flipped .trust-card__front,
  .trust-card.is-flipped .trust-card__back {
    transition: none;
  }

  .trust-card__front > *,
  .trust-card__back > *,
  .trust-card.is-flipped .trust-card__front > *,
  .trust-card.is-flipped .trust-card__back > * {
    transition: none;
  }
}

@media (forced-colors: active) {
  body::before,
  body::after,
  .phase-grain {
    display: none;
  }
}