/* ── Result Screen ── */
    #screen-result {
      padding: 1rem 0 2rem;
      animation: fadeUp .4s cubic-bezier(.16,1,.3,1);
    }

    #screen-result.screen.active { display: block; }

    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Hero */
    .hero-wrap {
      position: relative;
      margin: 1rem .75rem 1.25rem;
      transform: rotate(var(--hero-rot, 1.5deg));
      transform-origin: center center;
      filter: drop-shadow(0 12px 32px rgba(0,0,0,.55));
      -webkit-tap-highlight-color: transparent;
      user-select: none;
      -webkit-user-select: none;
      pointer-events: none;
    }


    .gallery-stack.single { cursor: default; }
    .gallery-stack.single .gallery-card[data-pos="1"],
    .gallery-stack.single .gallery-card[data-pos="2"] { display: none; }

    /* Papierrand-Overlay sitzt auf jeder Karte, bewegt sich mit beim Blättern */
    .gallery-card::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 3;
      background: url('/assets/img/paper-border.png') center / 100% 100% no-repeat;
      pointer-events: none;
    }

    .tape {
      position: absolute;
      /* left/top/transform immer via JS inline gesetzt */
      z-index: 4;
      width: 76px;
      height: 24px;
      border-radius: 2px;
      transform-origin: center center;
      background:
        repeating-linear-gradient(
          90deg,
          rgba(255,255,255,.09) 0px,
          rgba(255,255,255,.09) 1px,
          transparent 1px,
          transparent 7px
        ),
        linear-gradient(180deg, rgba(230,210,155,.78) 0%, rgba(198,176,120,.62) 100%);
      box-shadow: 0 2px 6px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);
      opacity: .88;
      pointer-events: none;
    }

.hero-shape {
      width: 100%;
      aspect-ratio: 3 / 2;
      min-height: 220px;
      overflow: hidden;
      position: relative;
      -webkit-mask-image: url('/assets/img/paper-tear-alpha.png');
      -webkit-mask-size: 100% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-image: url('/assets/img/paper-tear-alpha.png');
      mask-size: 100% 100%;
      mask-repeat: no-repeat;
      background: var(--surface);
      z-index: 1;
    }

    .hero-img {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      object-position: center 50%;
      display: block;
      filter: saturate(.92) contrast(1.03);
    }

    .hero-shape::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom, transparent 52%, rgba(0,0,0,.25)),
        radial-gradient(circle at 8% 8%, rgba(255,255,255,.12), transparent 22%);
      pointer-events: none;
    }

    .hero-img-placeholder {
      width: 100%;
      aspect-ratio: 3 / 2;
      min-height: 220px;
      background: var(--surface);
      clip-path: url(#hero-clip);
    }