/* Hero (Variante „Titel“): orange, Bekifft wordmark + „Halloween 2026“ as SVG artwork
   (assets/img/hero-*.svg, from the design). Rows share one width so both lines align. */
.hero-title { box-sizing: border-box; position: relative; min-height: 100svh; background: var(--bk-accent); display: grid; place-items: center; padding: var(--bk-space-9) var(--bk-gutter); overflow: clip; }
.hero-title__lockup { margin: 0; width: min(780px, 100%); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--bk-space-6); }
.hero-title__word { display: block; width: 100%; max-width: 100%; height: auto; }
.hero-title__sub { display: flex; align-items: center; gap: 3%; }
.hero-title__sub img { display: block; height: auto; min-width: 0; max-width: 100%; }
.hero-title__sub img:first-child { flex: 678.6 1 0; }
.hero-title__sub img:last-child { flex: 287.9 1 0; }
.hero-title__mask { display: block; overflow: hidden; }   /* mask for the reveal (assets/js/hero-title.js) */
[data-hero-line] { visibility: hidden; }                  /* shown by JS right before the animation (no flash) */

/* Stickers around the title: decorative, pushed by the mouse (InertiaPlugin), see assets/js/hero-title.js */
.hero-title__stage { position: relative; width: min(780px, 100%); }
.hero-title__stage .hero-title__lockup { width: 100%; }
.hero-title__stickers { position: absolute; inset: 0; pointer-events: none; }
.hero-title__sticker { position: absolute; left: var(--x); top: var(--y); height: clamp(29px, 5.2vw, 42px); pointer-events: auto; z-index: 1; visibility: hidden; }
.hero-title__sticker img { display: block; height: 100%; width: auto; pointer-events: none; will-change: transform; }
@media (max-width: 600px) {
  .hero-title__sticker { left: clamp(0px, var(--x), calc(100% - 100px)); }   /* keep stickers inside the screen */
}
.hero-title__sticker--icon { height: clamp(39px, 7.2vw, 57px); }   /* icon-only stickers are bigger than the text pills */

/* Info pills (date, location): green with black text, so they stand out from the yellow-orange icon stickers */
.hero-title__pill { display: flex; align-items: center; gap: 0.45em; height: 100%; padding: 0 1.3em; border-radius: var(--bk-radius-pill); background: var(--bk-green); color: var(--bk-black); font-family: var(--bk-font-body); font-weight: 800; font-size: clamp(12px, 2.1vw, 17px); line-height: 1; white-space: nowrap; will-change: transform; }
.hero-title__pill svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .hero-title__sticker--info { left: clamp(0px, var(--x), calc(100% - 190px)); } }

/* 18+ notice at the bottom of the hero (the navbar is fixed on top, so there is no room for a bar above it) */
.hero-title__notice { position: absolute; z-index: 2; left: 0; right: 0; bottom: var(--bk-space-6); margin: 0; padding: 0 var(--bk-gutter); text-align: center; color: var(--bk-brown-800); font-size: var(--bk-text-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }

/* Phones: fewer stickers, so the title stays readable (icons + date + location remain) */
@media (max-width: 600px) {
  .hero-title__sticker:not(.hero-title__sticker--icon):not(.hero-title__sticker--info) { display: none; }
  .hero-title__notice { font-size: 11px; bottom: var(--bk-space-5); }
}