/* =====================================================================
   Bühne & Bummel — Nachtflohmarkt
   Same brand DNA as the main page (teal ground, gold + pink, Archivo
   Black / Manrope, scalloped ticket edges) pushed toward night:
   a deeper ground, warm market light, a garland of bulbs and price
   tags instead of poster cards.
   ===================================================================== */

.page-flohmarkt {
  --night: #041F26;
}

/* ---------- shared bits this page adds ---------- */
.eyebrow {
  font-weight: 800; font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 1rem;
}
.eyebrow--pink { color: var(--pink-light); }
.eyebrow--dark { color: var(--plum); }

/* ---------- hero: the market after dark ---------- */
.fm-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(9rem, 17vw, 13rem) 0 clamp(4rem, 8vw, 7rem);
  background: linear-gradient(180deg, var(--night) 0%, var(--teal-deep) 58%, var(--teal) 100%);
}

.fm-hero__inner { position: relative; text-align: center; }

.fm-hero__kicker {
  font-weight: 800; font-size: .8rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
}
/* the poster lockup: two tight lines with the ampersand leading the
   second, then the word mark set solid underneath. The three lines are
   ranged left against each other, but the block sits on the centre line
   with the rest of the hero. */
.fm-hero__lockup {
  width: fit-content; max-width: 100%;
  margin-inline: auto; text-align: left;
}
.fm-hero__title {
  margin-top: 1.1rem;
  font-size: clamp(2.9rem, 11vw, 8.6rem);
  line-height: .82; letter-spacing: -.035em;
}
.fm-hero__title span { display: block; }
.fm-hero__title em { font-style: normal; color: var(--pink); }
.fm-hero__sub {
  margin-top: .08em;
  font-family: var(--display); text-transform: uppercase;
  font-size: clamp(1.26rem, 4.8vw, 3.75rem);
  line-height: 1; letter-spacing: -.02em;
  color: var(--paper);
}

.fm-hero__facts {
  --fact-gap: clamp(1.2rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .6rem var(--fact-gap); margin-top: 2.2rem;
}
.fm-hero__facts li { position: relative; }
/* the dot sits on the centre of the gap, so it reads as a separator, not a bullet */
.fm-hero__facts li + li::before {
  content: ""; position: absolute; top: 50%; left: calc(var(--fact-gap) / -2);
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
  transform: translate(-50%, -50%);
}
.fm-hero__facts b {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.05rem, 2.2vw, 1.55rem); letter-spacing: .01em;
}

.fm-hero__actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .9rem; margin-top: 2.6rem;
}

/* rubber-stamp badge for the best news on the page */
.stamp {
  display: inline-flex; flex-direction: column; align-items: center; gap: .1em;
  margin-top: 3rem; padding: .8em 1.4em;
  border: 3px double var(--gold); border-radius: 8px;
  color: var(--gold); transform: rotate(-4deg);
  font-family: var(--display); text-transform: uppercase; line-height: 1;
}
.stamp span { font-size: .72rem; letter-spacing: .28em; text-indent: .28em; }
.stamp b { font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.4rem); letter-spacing: .04em; }

/* ---------- garland of bulbs ---------- */
.garland {
  position: absolute; left: 0; right: 0; top: clamp(66px, 8vw, 86px); height: 90px;
  z-index: 1; pointer-events: none;
}
.garland__svg { width: 100%; height: 90px; }
.garland__wire { stroke: rgba(239, 246, 254, .28); stroke-width: 2; }
.garland__bulbs {
  position: absolute; inset: 0;
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-inline: -5.5px; /* centre the end bulbs on the wire's endpoints */
}
.garland__bulbs i {
  flex: none; width: 11px; height: 15px; border-radius: 0 0 50% 50% / 0 0 62% 62%;
  background: var(--gold); box-shadow: 0 0 14px 4px rgba(246, 190, 35, .5);
  animation: bulb 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .21s);
}
/* the bulbs ride the four swags of the wire (see path in the markup) */
.garland__bulbs i:nth-child(4n + 1) { margin-top: 5px; }
.garland__bulbs i:nth-child(4n + 2) { margin-top: 29px; }
.garland__bulbs i:nth-child(4n + 3) { margin-top: 37px; }
.garland__bulbs i:nth-child(4n + 4) { margin-top: 29px; }
@keyframes bulb {
  0%, 100% { opacity: 1; box-shadow: 0 0 14px 4px rgba(246, 190, 35, .5); }
  50%      { opacity: .82; box-shadow: 0 0 9px 2px rgba(246, 190, 35, .32); }
}

/* ---------- für gäste: price tags ---------- */
.gaeste { padding: clamp(4.5rem, 9vw, 7.5rem) 0 clamp(3rem, 6vw, 5rem); }
.gaeste .sec-head .display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }

.tags {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1.4rem, 3vw, 2rem);
}
.tag {
  position: relative; padding: 1.8rem 1.5rem 1.7rem;
  background: rgba(239, 246, 254, .055);
  border: 1.5px solid var(--line); border-radius: 14px;
  transition: transform .5s var(--ease-out), background .35s, border-color .35s;
}
.tag:nth-child(odd)  { transform: rotate(-1.2deg); }
.tag:nth-child(even) { transform: rotate(.9deg); }
.tag:hover { transform: translateY(-6px) rotate(0deg); background: rgba(239, 246, 254, .09); border-color: rgba(239, 246, 254, .3); }
.tag__q {
  font-family: var(--display); text-transform: uppercase;
  font-size: .82rem; letter-spacing: .16em; color: var(--gold);
}
.tag__a { margin-top: .7rem; }
.tag__a b {
  display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.05; letter-spacing: -.01em;
}
.tag__a span { display: block; margin-top: .45rem; color: rgba(239, 246, 254, .7); font-size: .98rem; }

.tag--gold { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.tag--gold:hover { background: var(--gold-light); border-color: var(--gold-light); }
.tag--gold .tag__q { color: var(--pink-deep); }
.tag--gold .tag__a span { color: rgba(42, 50, 61, .78); }

/* ---------- für standbetreibende ---------- */
.stand { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 6rem); }
.stand .sec-head { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }
.stand .sec-head .display { font-size: clamp(2.4rem, 5.4vw, 4.4rem); }

.hinweis {
  display: flex; gap: 1rem; align-items: flex-start;
  max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem);
  padding: 1.1rem 1.3rem; border-left: 3px solid var(--pink);
  background: rgba(211, 128, 198, .09); border-radius: 0 12px 12px 0;
  color: var(--paper-dim); font-size: 1rem;
}
.hinweis__icon {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: var(--pink); color: var(--ink);
  font-family: var(--display); font-size: .8rem; line-height: 1;
}

/* stand info — everything on the page at once, question left, answer right */
.stand__blocks { display: grid; }
.stand__block {
  display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: .8rem clamp(1.5rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.2rem) 0;
  border-top: 1px solid var(--line);
}
.stand__block:last-child { border-bottom: 1px solid var(--line); }
.stand__q {
  font-family: var(--display); text-transform: uppercase; letter-spacing: -.005em;
  font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.1; color: var(--gold);
}
.stand__a { max-width: 68ch; }
.stand__a p { font-size: 1.06rem; font-weight: 300; }
.stand__a p + p { margin-top: .8rem; }
.stand__note { color: var(--paper-dim); font-size: .96rem; }
.timeline + .stand__note { margin-top: 1.1rem; }

.callout {
  margin-top: 1rem; padding: .9rem 1.1rem;
  border: 1.5px dashed rgba(246, 190, 35, .55); border-radius: 10px;
  background: rgba(246, 190, 35, .07); color: var(--paper);
}
.callout b { font-weight: 800; color: var(--gold); }

/* schedule */
.timeline { display: grid; gap: .1rem; }
.timeline li {
  display: grid; grid-template-columns: minmax(0, 12.5rem) 1fr; gap: 1.2rem;
  align-items: baseline; padding: .8rem 0 .8rem 1.4rem;
  border-left: 2px solid var(--line); position: relative;
}
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 1.25rem;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--teal); border: 2px solid var(--paper-dim);
}
.timeline b {
  font-family: var(--display); font-weight: 400; letter-spacing: .01em;
  font-size: 1.02rem; white-space: nowrap;
}
.timeline span { color: var(--paper-dim); }
.timeline--peak { border-left-color: var(--gold); }
.timeline--peak::before { background: var(--gold); border-color: var(--gold); }
.timeline--peak b { color: var(--gold); }
.timeline--peak span { color: var(--paper); }

/* plain lists — what may / may not be sold */
.plainlist { display: grid; gap: .4rem; }
.plainlist li { font-size: 1.06rem; font-weight: 300; line-height: 1.45; }
.plainlist + .stand__note { margin-top: 1.1rem; }

/* bring-along checklist */
.checklist { display: grid; gap: .55rem; }
.checklist li { display: flex; align-items: flex-start; gap: .8rem; font-size: 1.04rem; font-weight: 300; }
.checklist li::before {
  content: ""; flex: none; margin-top: .18em; width: 19px; height: 19px;
  border-radius: 5px; border: 2px solid var(--gold);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 13l4 4 10-10' fill='none' stroke='%23F6BE23' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat 50% 50% / 13px;
}

/* ---------- standticket: the gold band, as on the main page ---------- */
.standticket {
  position: relative; color: var(--ink); background: var(--gold);
  padding: clamp(4rem, 8vw, 6.5rem) 0; margin-block: 2.6rem;
}
.standticket__band {
  position: absolute; left: 0; right: 0; top: -26px; height: 28px;
  background: radial-gradient(circle at 50% 100%, var(--gold) 27px, transparent 28px) 0 0 / 56px 28px repeat-x;
}
.standticket__band--bottom { top: auto; bottom: -26px; transform: scaleY(-1); }

.standticket__grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: clamp(2.5rem, 6vw, 5rem); align-items: center;
}
.standticket__text .display { font-size: clamp(2.3rem, 5vw, 4rem); color: var(--ink); }
.standticket__lede { margin-top: 1.2rem; font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 40ch; }

/* the stub itself — notched sides, like a torn ticket */
.stub {
  position: relative; padding: 2.2rem 2rem 1.8rem;
  background: var(--ink); color: var(--paper); border-radius: 16px;
  transform: rotate(1.4deg);
  box-shadow: 0 40px 60px -34px rgba(0, 0, 0, .75);
  transition: transform .5s var(--ease-out);
}
.stub:hover { transform: rotate(0deg) translateY(-6px); }
.stub::before, .stub::after {
  content: ""; position: absolute; top: 50%; width: 26px; height: 26px;
  margin-top: -13px; border-radius: 50%; background: var(--gold);
}
.stub::before { left: -13px; }
.stub::after { right: -13px; }
.stub__label {
  font-family: var(--display); text-transform: uppercase;
  font-size: .8rem; letter-spacing: .18em; color: var(--pink);
}
.stub__price { display: flex; align-items: baseline; gap: .12em; margin: .35rem 0 1.1rem; font-family: var(--display); line-height: 1; }
.stub__price b { font-weight: 400; font-size: clamp(3.4rem, 6.5vw, 4.8rem); letter-spacing: -.03em; }
.stub__price span { font-size: 1.7rem; color: var(--gold); }
.stub__list { display: grid; gap: .5rem; margin-bottom: 1.5rem; padding-top: 1.1rem; border-top: 1px dashed rgba(239, 246, 254, .25); }
.stub__list li { display: flex; align-items: center; gap: .6rem; font-size: 1rem; font-weight: 300; }
.stub__list li::before {
  content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.stub .btn { background: var(--gold); color: var(--ink); }
.stub .btn:hover { background: var(--gold-light); }
.stub__pfand { margin-top: .9rem; font-size: .88rem; color: var(--paper-dim); }

/* ---------- and then: maifeld live ---------- */
.next { padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 9vw, 7rem); }
.next__inner {
  position: relative; display: grid; grid-template-columns: 1fr auto;
  gap: 2rem 3rem; align-items: center;
  padding: clamp(2rem, 5vw, 3.2rem); border-radius: 20px;
  background: rgba(239, 246, 254, .055);
  border: 1.5px solid var(--line);
}
.next__inner .display { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.next__lede { margin-top: 1.1rem; color: var(--paper-dim); max-width: 44ch; }
.next__btn { justify-self: end; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .standticket__grid { grid-template-columns: 1fr; }
  .stub { max-width: 420px; }
}
@media (max-width: 800px) {
  .fm-hero { padding-top: clamp(7.5rem, 22vw, 10rem); }
  .timeline li { grid-template-columns: 1fr; gap: .15rem; }
  .stand__block { grid-template-columns: 1fr; }
  .next__inner { grid-template-columns: 1fr; }
  .next__btn { justify-self: start; }
  .hinweis { font-size: .96rem; }
}
@media (max-width: 560px) {
  .garland { height: 64px; }
  .garland__svg { height: 64px; }
  .garland__bulbs i { width: 9px; height: 12px; }
  .garland__bulbs i:nth-child(4n + 1) { margin-top: 4px; }
  .garland__bulbs i:nth-child(4n + 2) { margin-top: 21px; }
  .garland__bulbs i:nth-child(4n + 3) { margin-top: 27px; }
  .garland__bulbs i:nth-child(4n + 4) { margin-top: 21px; }
  .fm-hero__facts li + li::before { display: none; }
  .tags { grid-template-columns: 1fr; }
  .tag:nth-child(odd), .tag:nth-child(even) { transform: none; }
}