/* Auswahl: „Eure Bühne." aus Variante 1 (Tourplakat), auf die Angebots-Sektion reduziert. */
body {
  --tp-wall: linear-gradient(#0004, #0004), #121211 var(--black-paper) repeat 0 0 / 620px 620px;
  --tp-paper-tex: url("angebot/paper-cream.webp") 0 0 / 460px 460px;
  --tp-red-tex: linear-gradient(#c81016e6, #c81016e6), var(--black-paper) center / 420px;
  --tp-sheen: linear-gradient(118deg, #fffbef55, #fffbef00 38%, #3a2a0a00 62%, #3a2a0a1c);
  --tp-hot: #ef443b;
  --tp-ease: cubic-bezier(0.2, 0.9, 0.25, 1.15);
  --tp-wear: url("angebot/stamp-wear.png") 0 0 / 220px 220px;
}

/* ---------- Shared: wall, paper, tape ---------- */
.tp-wall {
  position: relative;
  padding: 110px max(var(--gutter), 24px);
  background: var(--tp-wall);
  overflow-x: clip;
}
.tp-wall h2 {
  font-size: clamp(48px, 5.2vw, 76px);
  line-height: 1.02;
}
.tp-wall h2 .brush {
  color: var(--tp-hot);
}
.tp-paper {
  position: relative;
  isolation: isolate;
  color: var(--ink);
  filter: drop-shadow(0 16px 18px #000a) drop-shadow(0 2px 2px #000c);
}
.tp-paper::before,
.tp-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  -webkit-mask: var(--tp-rim, none) 0 0 / 100% 100% no-repeat;
  mask: var(--tp-rim, none) 0 0 / 100% 100% no-repeat;
}
.tp-paper::before {
  background: #fbf6ea;
}
.tp-paper::after {
  background: var(--tp-sheen), var(--tp-paper-tex), var(--paper);
  -webkit-mask: var(--tp-face, none) 0 0 / 100% 100% no-repeat;
  mask: var(--tp-face, none) 0 0 / 100% 100% no-repeat;
}
.tp-tape {
  position: absolute;
  z-index: 3;
  top: -17px;
  left: 50%;
  width: 124px;
  height: 36px;
  translate: -50% 0;
  rotate: -4deg;
  background:
    linear-gradient(#f4ecd6c2, #e2d5b4c9),
    var(--tp-paper-tex);
  background-blend-mode: normal, multiply;
  opacity: 0.92;
  clip-path: polygon(
    0 8%, 4% 0, 8% 10%, 12% 2%, 88% 0, 92% 9%, 96% 1%, 100% 10%,
    98% 34%, 100% 52%, 97% 74%, 100% 92%, 95% 100%, 90% 91%, 85% 100%,
    14% 100%, 9% 92%, 5% 100%, 0 90%, 3% 70%, 0 50%, 2% 28%
  );
}

/* ---------- Eure Bühne. Unser Taiko. ---------- */
.tp-offer {
  padding-block: 120px 130px;
}
.tp-offer__head,
.tp-posters,
.tp-offer__foot {
  max-width: 1320px;
  margin-inline: auto;
}
.tp-offer__head {
  margin-bottom: 70px;
}
.tp-posters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-block: 0;
  padding: 0;
  list-style: none;
}
.tp-posters__item {
  display: flex;
}
.tp-posters__item:nth-child(1) { --rot: -3deg; --y: 0px; --z: 1; }
.tp-posters__item:nth-child(2) { --rot: 2deg; --y: 58px; --z: 2; margin-inline: -10px; }
.tp-posters__item:nth-child(3) { --rot: -1.3deg; --y: 16px; --z: 1; }
.tp-poster {
  z-index: var(--z);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  padding: 26px 28px 30px;
  text-decoration: none;
  transform: translateY(var(--y)) rotate(var(--rot));
  transition:
    transform 0.45s var(--tp-ease),
    filter 0.45s;
}
.tp-poster__photo {
  display: block;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #1b1a18;
  box-shadow: inset 0 0 0 1px #0002;
}
.tp-poster__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tp-poster__title {
  margin-top: 8px;
  font-size: clamp(30px, 2.7vw, 42px);
  line-height: 1;
  letter-spacing: -0.045em;
  hyphens: manual;
}
.tp-poster__line {
  font-size: 18px;
  line-height: 1.45;
}
.tp-poster__go {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 4px solid currentColor;
  font-size: 18px;
  font-weight: 700;
}
.tp-poster__go svg {
  transition: transform 0.35s var(--tp-ease);
}
.tp-poster--red {
  color: var(--paper);
}
.tp-poster--red::before {
  background: #f3dccf;
}
.tp-poster--red::after {
  background: var(--tp-sheen), var(--tp-red-tex);
}
/* The hanko seal is pressed onto a poster as it is picked up. */
.tp-seal {
  position: absolute;
  z-index: 4;
  top: 8px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 94px;
  height: 94px;
  border-radius: 7px;
  background: var(--red);
  box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 6px var(--paper);
  color: var(--paper);
  opacity: 0;
  transform: scale(1.6) rotate(-18deg);
  transition:
    opacity 0.12s,
    transform 0.28s cubic-bezier(0.3, 1.7, 0.5, 1);
  -webkit-mask: var(--tp-wear);
  mask: var(--tp-wear);
}
.tp-seal span {
  writing-mode: vertical-rl;
  font: 700 34px/1 "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
}
.tp-poster--red .tp-seal {
  background: var(--ink);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--paper);
}
.tp-poster:focus-visible {
  outline: 3px solid var(--paper);
  outline-offset: 10px;
}
.tp-poster:is(:hover, :focus-visible) {
  z-index: 5;
  transform: translateY(calc(var(--y) - 16px)) rotate(0deg) scale(1.025);
  filter: drop-shadow(0 34px 30px #000c) drop-shadow(0 3px 3px #000c);
}
.tp-poster:is(:hover, :focus-visible) .tp-seal {
  opacity: 1;
  transform: scale(1) rotate(-8deg);
}
.tp-poster:is(:hover, :focus-visible) .tp-poster__go svg {
  transform: translateX(6px);
}
.tp-armed .tp-poster {
  opacity: 0;
}
.tp-armed.is-pasted .tp-poster {
  opacity: 1;
  animation: tp-paste 0.62s var(--tp-ease) backwards;
}
.tp-armed.is-pasted .tp-posters__item:nth-child(2) .tp-poster { animation-delay: 0.14s; }
.tp-armed.is-pasted .tp-posters__item:nth-child(3) .tp-poster { animation-delay: 0.28s; }
@keyframes tp-paste {
  from {
    opacity: 0;
    transform: translateY(calc(var(--y) - 46px)) rotate(calc(var(--rot) * -1.6)) scale(1.07);
  }
  40% {
    opacity: 1;
  }
}
.tp-offer__foot {
  display: flex;
  justify-content: center;
  margin-top: 96px;
}
.tp-cta {
  flex: 0 0 auto;
}

/* ---------- Lasst uns planen. ---------- */
@keyframes tp-thunk {
  from {
    opacity: 0;
    transform: scale(1.7);
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1000px) {
  .tp-posters {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 560px;
  }
  .tp-posters__item:nth-child(n) {
    margin: 0;
    --y: 0px;
  }
  .tp-posters__item:nth-child(1) { --rot: -1.8deg; }
  .tp-posters__item:nth-child(2) { --rot: 1.6deg; margin-top: -10px; }
  .tp-posters__item:nth-child(3) { --rot: -1deg; margin-top: -10px; }
  .tp-poster {
    margin-bottom: 0;
  }
  .tp-offer__foot {
    justify-content: center;
    max-width: 560px;
    margin-top: 64px;
  }
}

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .tp-wall {
    padding: 72px 18px;
  }
  .tp-wall h2 {
    font-size: clamp(44px, 13vw, 54px);
  }
  .tp-offer {
    padding-block: 70px 84px;
  }
  .tp-offer__head {
    margin-bottom: 40px;
  }
  .tp-poster {
    gap: 14px;
    padding: 20px 20px 24px;
  }
  .tp-poster__title {
    font-size: 32px;
  }
  .tp-seal {
    width: 70px;
    height: 70px;
  }
  .tp-seal span {
    font-size: 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-poster,
  .tp-poster__go svg,
  .tp-seal {
    transition: none;
  }
  .tp-armed .tp-poster {
    opacity: 1;
    animation: none;
  }
}

/* The reference strip tears into this textured wall, so its torn fill must be the same material, not flat grey. */
.references > .edge-bottom::after {
  background: var(--tp-wall);
}

/* One black paper from Angebot to the footer: "Wir sind LION", the tear into the dates band and the footer
   use the same wall material, so no section switches from paper to a flat fill of the same colour. */
.team-focus,
.team-focus-frame {
  background: var(--tp-wall); /* the pinned frame carries its own paper, so the texture stands still with it */
}
.v3-tear {
  --tear-fill: var(--tp-wall);
}
footer {
  background: linear-gradient(#0006, #0006), var(--tp-wall);
}