/*
 * Tactile print details
 *
 * Deliberately scoped to content after the hero. The Odenwald terrain and all
 * of its hero layers remain untouched and retain their own clean stacking
 * context. Decorative marks are pseudo-elements and never receive input.
 */
main > .section,
main > .process-outer,
main > .cta-outer,
.footer-outer {
  background-image: url("../images/paper-grain.svg");
  background-repeat: repeat;
  background-size: 180px 180px;
  background-blend-mode: soft-light;
}

/* Neutral registration targets: sparse, offset and tied to existing rules. */
:where(#beispiele, #ueber-mich, #ratgeber, #anfahrt) > .sec-head {
  position: relative;
}

:where(#beispiele, #ueber-mich, #ratgeber, #anfahrt) > .sec-head::before {
  content: "";
  position: absolute;
  top: -10px;
  right: var(--td-register-inset, 4%);
  width: 19px;
  height: 19px;
  background:
    linear-gradient(90deg, transparent 9px, var(--text-3) 9px 10px, transparent 10px),
    linear-gradient(transparent 9px, var(--text-3) 9px 10px, transparent 10px),
    radial-gradient(circle, transparent 0 3px, var(--text-3) 3.5px 4.5px, transparent 5px);
  opacity: .42;
  pointer-events: none;
  user-select: none;
}

#beispiele { --td-register-inset: 7%; }
#ueber-mich { --td-register-inset: 24%; }
#ratgeber { --td-register-inset: 13%; }
#anfahrt { --td-register-inset: 36%; }

/* Three orange crosshairs punctuate the long scroll without becoming a motif
   in every chapter. They sit directly on the section's existing top rule. */
:where(#unterschied, #warum, #faq) > .sec-head {
  position: relative;
}

:where(#unterschied, #warum, #faq) > .sec-head::after {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--td-cross-position, 72%);
  width: 15px;
  height: 15px;
  background:
    linear-gradient(90deg, transparent 7px, var(--accent) 7px 8px, transparent 8px),
    linear-gradient(transparent 7px, var(--accent) 7px 8px, transparent 8px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent);
  opacity: .68;
  pointer-events: none;
  user-select: none;
}

#unterschied { --td-cross-position: 78%; }
#warum { --td-cross-position: 61%; }
#faq { --td-cross-position: 84%; }

/* Tiny crop corners add a physical proof-sheet cue to three anchor surfaces. */
.buehne,
.pricing-grid,
.contact-card {
  position: relative;
}

.buehne::after,
.pricing-grid::after,
.contact-card::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 8px;
  --td-crop-color: color-mix(in srgb, var(--accent) 58%, transparent);
  background-image:
    linear-gradient(var(--td-crop-color), var(--td-crop-color)),
    linear-gradient(var(--td-crop-color), var(--td-crop-color)),
    linear-gradient(var(--td-crop-color), var(--td-crop-color)),
    linear-gradient(var(--td-crop-color), var(--td-crop-color));
  background-repeat: no-repeat;
  background-position: left top, left top, right bottom, right bottom;
  background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 768px) {
  :where(#beispiele, #ueber-mich, #ratgeber, #anfahrt) > .sec-head::before,
  :where(#unterschied, #warum, #faq) > .sec-head::after {
    display: none;
  }

  .buehne::after,
  .pricing-grid::after,
  .contact-card::after {
    display: none;
  }
}

@media (forced-colors: active) {
  main > .section,
  main > .process-outer,
  main > .cta-outer,
  .footer-outer,
  .buehne::after,
  .pricing-grid::after,
  .contact-card::after {
    background-image: none;
  }
}