/* ===================================================================
   Malle am Meer — Ballermann-Style
   Trashy. Knallig. Bunt. Tagsüber.
   =================================================================== */

:root{
  --pink:        #FF2D87;
  --pink-deep:   #C71585;
  --yellow:      #FFE600;
  --cyan:        #00D4FF;
  --black:       #0A0A0A;
  --black-2:     #161616;
  --white:       #FFFFFF;
  --text:        #FFFFFF;
  --text-muted:  rgba(255,255,255,0.7);

  --display:    "Boldonse", Impact, "Anton", sans-serif;
  --headline:   "Bricolage Grotesque", "Anton", Impact, sans-serif;
  --body:       "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --instr-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --container: 1200px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-sticker: 8px 8px 0 var(--black);
  --shadow-sticker-pink: 8px 8px 0 var(--pink);
  --shadow-sticker-yellow: 8px 8px 0 var(--yellow);
}

/* ---------- reset + base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,svg { display:block; max-width:100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: 0; }

/* ---------- typography helpers ---------- */
.kicker{
  display: inline-block;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .25em; font-size: .8rem;
  text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: .4em 1em;
  margin-bottom: 1.4rem;
  transform: rotate(-2deg);
}
.kicker--light{ background: var(--cyan); color: var(--black); }
.kicker--pink{ background: var(--pink); color: var(--white); }

.display{
  font-family: var(--headline);
  font-weight: 800;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--white);
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.display em{
  font-style: normal;
  font-family: var(--headline);
  font-weight: 800;
  color: var(--yellow);
}
.display--dark{ color: var(--black); }
.display--dark em{ color: var(--pink); }

.section__head{ margin-bottom: 2.4rem; }
.section__head--center{ text-align:center; }
.section__head--center .kicker{ display: inline-block; }
.section__lead{ max-width: 56ch; margin: 0 auto; opacity: .85; font-size: 1.05rem; }

/* ---------- buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .08em; font-size: .95rem;
  padding: 1em 1.8em;
  border: 3px solid var(--black);
  border-radius: var(--r-pill);
  text-transform: uppercase;
  transition: transform .15s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn--primary{
  background: var(--yellow); color: var(--black);
  box-shadow: 4px 4px 0 var(--black);
}
.btn--primary:hover{
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--black);
}
.btn--solid{
  background: var(--pink); color: var(--white);
  box-shadow: 4px 4px 0 var(--black);
  border-color: var(--black);
}
.btn--solid:hover{
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 var(--black);
}
.btn--xl{ padding: 1.2em 2.4em; font-size: 1.05rem; }
.btn--block{ display: flex; width: 100%; }

/* ====================================================================
   NAV
   ==================================================================== */
.nav{
  position: sticky; top:0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem clamp(1rem, 4vw, 2.5rem);
  background: var(--black);
  border-bottom: 3px solid var(--pink);
}
.nav__brand{
  font-family: var(--display); font-size: 1.4rem;
  letter-spacing: 0; color: var(--white);
  display: inline-flex; align-items: baseline; gap: .15ch;
  text-transform: uppercase;
}
.nav__brand-meer{ color: var(--yellow); }
.nav__brand-am{
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--pink);
  font-size: .85em;
  margin: 0 .25ch;
  letter-spacing: -.01em;
}

.nav__links{ display: flex; gap: 1.6rem; justify-self: center; }
.nav__links a{
  font-family: var(--instr-sans); font-size: .92rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  position: relative; padding: .35rem 0;
  color: var(--white);
}
.nav__links a:hover{ color: var(--yellow); }
.nav__cta{ justify-self: end; padding: .7em 1.4em; font-size: .85rem; }

.nav__burger{
  display: none; width: 42px; height: 42px;
  flex-direction: column; gap: 5px; align-items:center; justify-content:center;
}
.nav__burger span{
  display: block; width: 24px; height: 3px; background: var(--white);
  transition: transform .25s ease, opacity .2s ease;
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

.mobile-nav{
  display: none; flex-direction: column; gap: .35rem;
  padding: 1rem clamp(1rem, 4vw, 2.5rem) 1.6rem;
  background: var(--black);
  border-bottom: 3px solid var(--pink);
}
.mobile-nav.is-open{
  display: flex;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  z-index: 49;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
.mobile-nav a{
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .8rem 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--white);
}
.mobile-nav .btn{ margin-top: .8rem; align-self: start; }

/* ====================================================================
   HERO — Hot Pink, fettes Yellow, schwarze Outlines
   ==================================================================== */
.hero{
  position: relative;
  background: var(--pink);
  padding: 3rem clamp(1rem, 4vw, 2.5rem) 0;
  overflow: hidden;
  border-bottom: 6px solid var(--black);
}
.hero__corner{
  position: absolute; top: 1.6rem;
  display: flex; flex-direction: column; gap: .15rem;
  font-family: var(--instr-sans);
  z-index: 4;
  background: var(--black); color: var(--white);
  padding: .5em 1em;
  font-size: .68rem;
  border-radius: var(--r-pill);
}
.hero__corner--tl{ left: clamp(1rem, 4vw, 2.5rem); transform: rotate(-2deg); }
.hero__corner--tr{ right: clamp(1rem, 4vw, 2.5rem); transform: rotate(2deg); background: var(--yellow); color: var(--black); }
.hero__cornerLabel{ font-weight: 700; letter-spacing: .25em; }
.hero__cornerSub{ display: none; }
.hero__cornerYear{ font-weight: 700; letter-spacing: .2em; font-size: .82rem; }

.hero__stage{
  position: relative;
  margin: 2rem auto 0;
  max-width: var(--container);
  height: clamp(360px, 52vh, 540px);
  display: grid; place-items: center;
}
.hero__sun{
  position: absolute;
  inset: 50% auto auto 50%;
  width: clamp(300px, 46vw, 540px);
  aspect-ratio: 1/1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  pointer-events: none;
  animation: sunBreathe 10s ease-in-out infinite;
}
.hero__sun .ring{ position: absolute; border-radius: 50%; inset: 0; }
.ring-1{ background: #FFE066; transform: scale(1.00); }
.ring-2{ background: #FFC93C; transform: scale(.86); }
.ring-3{ background: #FFA600; transform: scale(.74); }
.ring-4{ background: #FF6F00; transform: scale(.62); }
.ring-5{ background: var(--cyan); transform: scale(.51); }
.ring-6{ background: var(--white); transform: scale(.41); }
.ring-7{ background: var(--pink); transform: scale(.32); }
.ring-8{ background: var(--yellow); transform: scale(.23); }
.ring-9{ background: var(--black);  transform: scale(.15); }

@keyframes sunBreathe{
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  50%      { transform: translate(-50%, -50%) scale(1.04) rotate(8deg); }
}

.hero__wordmark{
  position: relative; z-index: 3;
  margin: 0; text-align: center;
  display: grid;
  gap: clamp(.5rem, 3vw, 2rem);
  pointer-events: none;
}
.hero__malle{
  font-family: var(--display);
  font-size: clamp(4rem, 14vw, 12rem);
  line-height: .78;
  color: var(--yellow);
  letter-spacing: -.01em;
  text-shadow:
    -3px -3px 0 var(--black),
    3px -3px 0 var(--black),
    -3px 3px 0 var(--black),
    3px 3px 0 var(--black),
    0 8px 0 var(--black);
}
.hero__am{
  font-family: var(--display);
  font-size: clamp(2.5rem, 9vw, 7rem);
  line-height: .82;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: -.4rem;
  text-shadow:
    -3px -3px 0 var(--black),
    3px -3px 0 var(--black),
    -3px 3px 0 var(--black),
    3px 3px 0 var(--black),
    0 8px 0 var(--black);
}
.hero__meer{
  font-family: var(--display);
  font-size: clamp(3rem, 11vw, 8.5rem);
  line-height: .82;
  color: var(--white);
  letter-spacing: -.01em;
  margin-top: -.4rem;
  text-shadow:
    -3px -3px 0 var(--black),
    3px -3px 0 var(--black),
    -3px 3px 0 var(--black),
    3px 3px 0 var(--black),
    0 8px 0 var(--black);
}

.hero__waves{
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; height: clamp(110px, 16vw, 200px);
  z-index: 2;
}

.hero__meta{
  position: relative;
  z-index: 5;
  text-align: center;
  padding: 2.4rem 0 4rem;
  display: flex; flex-direction: column; align-items: center;
  gap: 1rem;
}
.hero__premiere{
  display: inline-block;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .25em; font-size: .8rem; text-transform: uppercase;
  color: var(--black);
  background: var(--yellow);
  padding: .55em 1.4em;
  border: 3px solid var(--black);
  border-radius: var(--r-pill);
  transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--black);
}
.hero__date{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: var(--r-md);
  padding: .8rem 1.4rem;
  box-shadow: 6px 6px 0 var(--black);
  flex-wrap: nowrap;
}
.hero__dateChunk{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 .9rem;
}
.hero__dateChunk strong{
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1;
  color: var(--black);
  letter-spacing: -.005em;
}
.hero__dateChunk small{
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .22em; font-size: .55rem;
  text-transform: uppercase;
  color: var(--pink);
  margin-top: .3rem;
}
.hero__dateSep{
  font-family: var(--display);
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--pink);
  display: flex; align-items: center;
  line-height: 1;
}
.hero__location{
  font-family: var(--display);
  font-size: clamp(1.1rem, 1.9vw, 1.5rem);
  margin: 0;
  color: var(--white);
  letter-spacing: 0;
  text-transform: uppercase;
}
.hero__tagline{
  font-family: var(--instr-sans);
  font-weight: 700;
  font-size: clamp(.9rem, 1.3vw, 1.05rem);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin: 0 0 .4rem;
  color: var(--white);
  opacity: .9;
}

/* ====================================================================
   SECTIONS — base
   ==================================================================== */
section{ padding: clamp(3.5rem, 7vw, 6rem) clamp(1rem, 4vw, 2.5rem); }
section > *{ max-width: var(--container); margin-inline: auto; }

/* ====================================================================
   LINEUP
   ==================================================================== */
.lineup{
  background: var(--black);
  position: relative;
}
.lineup .display{
  color: var(--white);
  font-size: clamp(2.2rem, 7.5vw, 6.4rem);
}
.lineup .display em{ color: var(--yellow); }

/* Lineup-Banner: groß, prominent, mit Border + Hard-Shadow */
.lineup__bannerWrap{
  display: block;
  margin: 2.5rem auto 1.6rem;
  max-width: 1400px;
}
.lineup__banner{
  width: 100%;
  height: auto;
  display: block;
  border: 4px solid var(--white);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--pink);
}
.lineup__more{
  text-align: center;
  font-family: var(--instr-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .85rem;
  color: var(--yellow);
  margin: 0;
}

/* Einzelne Künstler-Cards — quadratisch, Crop ab Hüfte aufwärts */
.lineup__cards{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.2rem;
  margin-top: 2.5rem;
}
.artistCard{
  position: relative;
  aspect-ratio: 1/1;
  border: 4px solid var(--white);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 8px 8px 0 var(--white);
  transition: transform .25s ease, box-shadow .25s ease;
}
.artistCard:hover{
  transform: translate(-3px,-3px);
  box-shadow: 11px 11px 0 var(--white);
}
.artistCard--pink   { background: var(--pink); }
.artistCard--cyan   { background: var(--cyan); }
.artistCard--yellow { background: var(--yellow); }
.artistCard__photo{
  position: absolute;
  inset: 0;
}
.artistCard__photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.artistCard__name{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: .65em .5em;
  font-family: var(--display);
  font-size: clamp(.85rem, 1.15vw, 1.1rem);
  text-align: center;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  letter-spacing: .02em;
  line-height: 1;
}

.lineup__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem;
  margin-top: 2.5rem;
}
.lineup__tile{
  background: var(--pink);
  color: var(--white);
  border: 4px solid var(--white);
  border-radius: var(--r-md);
  min-height: 180px;
  display: grid; place-items: center; text-align: center;
  padding: 1.4rem 1.2rem;
  transition: transform .25s ease, box-shadow .2s ease;
  box-shadow: 6px 6px 0 var(--white);
  position: relative;
}
.lineup__tile:nth-child(odd){ transform: rotate(-1deg); }
.lineup__tile:nth-child(even){ transform: rotate(1deg); }
.lineup__tile:hover{ transform: rotate(0) translate(-2px,-2px); box-shadow: 8px 8px 0 var(--white); }
.lineup__tile--alt{ background: var(--cyan); color: var(--black); }
.lineup__tile--reveal{
  background: var(--yellow); color: var(--black);
}
.lineup__name{
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.9vw, 1.7rem);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

/* ====================================================================
   TICKETS
   ==================================================================== */
.tickets{
  background: var(--pink);
  color: var(--white);
}
.tickets .kicker{ background: var(--black); color: var(--yellow); }
.tickets .display{ color: var(--white); }
.tickets .display em{ color: var(--yellow); }
.tickets .section__lead{ color: var(--white); opacity: .9; }

.tickets__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  margin-top: 2rem;
}

/* Aktive Phase — groß, mittig */
.tickets__featured{
  display: flex; flex-direction: column; align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
}
.tickets__featured .ticketCard--featured{
  width: 100%; max-width: 460px;
  transform: rotate(0);
}
.tickets__featured .ticketCard--featured:hover{
  transform: translate(-3px,-3px);
}
.tickets__featured--two{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
  max-width: 920px;
  margin: 2rem auto 0;
  align-items: stretch;
}
.tickets__featured--two .ticketCard--featured{
  max-width: none;
  width: 100%;
}

/* Ausverkaufte Phase oben — kompakt, deutlich */
.tickets__soldOut{
  max-width: 460px;
  margin: 1.4rem auto 0;
}
.tickets__soldOut .ticketCard--mini{
  width: 100%;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.25);
  box-shadow: 4px 4px 0 rgba(255,255,255,.15);
  color: var(--white);
  opacity: .8;
}
.tickets__soldOut .ticketCard--mini h4{
  color: var(--white);
}
.tickets__soldOut .ticketCard__phase{
  color: rgba(255,255,255,.55);
}
.tickets__soldOut .ticketCard__price-mini{
  color: rgba(255,255,255,.5);
  text-decoration: line-through;
}
.ticketCard__lock--soldout{
  background: var(--pink);
  color: var(--white);
}

/* Label zwischen aktiv und Folgephasen */
.tickets__upcomingLabel{
  text-align: center;
  font-family: var(--instr-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .78rem;
  color: rgba(255,255,255,.6);
  margin: 2.4rem 0 1rem;
}

/* Folgephasen — kompakt nebeneinander */
.tickets__upcoming{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
  max-width: 720px;
  margin: 0 auto;
}
.tickets__upcoming--four{
  grid-template-columns: repeat(4, 1fr);
  max-width: 920px;
}
.ticketCard--mini-group{
  border-color: var(--cyan);
  box-shadow: 4px 4px 0 var(--cyan);
}
.ticketCard--mini-group .ticketCard__phase{
  color: var(--pink);
}
.ticketCard--mini{
  background: rgba(255,255,255,.92);
  color: var(--black);
  border: 3px solid var(--black);
  border-radius: var(--r-md);
  padding: 1rem .8rem;
  box-shadow: 4px 4px 0 var(--black);
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  gap: .35rem;
  opacity: .82;
  transition: transform .2s ease, opacity .2s ease;
}
.ticketCard--mini:hover{
  transform: translate(-2px,-2px);
  opacity: 1;
}
.ticketCard--mini .ticketCard__phase{
  font-size: .62rem; letter-spacing: .2em;
  color: rgba(0,0,0,.55);
}
.ticketCard--mini h4{
  font-family: var(--display);
  font-size: 1rem; line-height: 1; margin: 0;
  text-transform: uppercase;
  color: var(--black);
}
.ticketCard__price-mini{
  font-family: var(--display);
  font-size: 1.4rem; line-height: 1; margin: 0;
  color: var(--pink);
}
.ticketCard__lock{
  font-family: var(--instr-sans); font-weight: 700;
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase;
  color: rgba(0,0,0,.5);
  background: rgba(0,0,0,.06);
  padding: .25em .8em; border-radius: var(--r-pill);
}
.ticketCard{
  background: var(--white);
  color: var(--black);
  border: 4px solid var(--black);
  border-radius: var(--r-lg);
  padding: 2rem 1.8rem 1.8rem;
  display: flex; flex-direction: column;
  gap: .8rem;
  position: relative;
  box-shadow: 8px 8px 0 var(--black);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ticketCard:hover{ transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--black); }
.ticketCard--featured{
  background: var(--yellow);
  transform: rotate(-1.5deg);
}
.ticketCard--featured:hover{ transform: rotate(-1.5deg) translate(-3px,-3px); }
.ticketCard--featured::before{
  content: "★ Jetzt aktiv";
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  background: var(--pink); color: var(--white);
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .15em; font-size: .72rem; text-transform: uppercase;
  padding: .4em 1.2em;
  border: 3px solid var(--black);
  border-radius: var(--r-pill);
  white-space: nowrap;
}

/* Gesperrte Featured-Karte — Badge & Look angepasst, aber attraktiv halten */
.ticketCard--featured.ticketCard--locked::before{
  content: "🔒 Coming soon · 28.05.";
  background: var(--black); color: var(--yellow);
}
.ticketCard--locked{
  /* attraktiv halten — nur dezent zurücknehmen */
  box-shadow: 6px 6px 0 var(--black);
}
.ticketCard--locked:hover{
  transform: none;
  box-shadow: 4px 4px 0 var(--black);
}
.ticketCard--locked .ticketCard__phase{ color: rgba(10,10,10,.5); }
.btn--locked{
  background: rgba(10,10,10,.08);
  color: rgba(10,10,10,.55);
  border-color: rgba(10,10,10,.25);
  box-shadow: 3px 3px 0 rgba(10,10,10,.25);
  cursor: not-allowed;
  pointer-events: none;
}
.btn--locked:hover{
  transform: none;
  box-shadow: 3px 3px 0 rgba(10,10,10,.25);
}
.ticketCard__phase{
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .2em; font-size: .72rem; text-transform: uppercase;
  color: var(--pink);
}
.ticketCard__title{
  font-family: var(--display);
  font-size: 1.6rem; margin: 0;
  line-height: 1;
  text-transform: uppercase;
}
.ticketCard__price{
  font-family: var(--display);
  font-size: 3rem; line-height: 1; margin: .4rem 0 .8rem;
  color: var(--black);
}
.ticketCard__price .from{
  font-family: var(--instr-sans); font-weight: 700;
  font-size: .9rem; color: var(--pink);
  letter-spacing: .1em; text-transform: uppercase;
  margin-right: .4em;
  vertical-align: middle;
}
.ticketCard ul{
  list-style: none; padding: 0; margin: 0 0 1rem;
  display: grid; gap: .45rem;
}
.ticketCard ul li{
  font-size: .95rem; padding-left: 1.6em; position: relative;
}
.ticketCard ul li::before{
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--pink); font-weight: 900; font-size: 1.1rem;
}
.ticketCard__hint{
  text-align: center; margin-top: .4rem;
  font-family: var(--instr-sans); font-weight: 700;
  font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  opacity: .65;
}
.tickets__legal{
  text-align: center; margin: 2rem auto 0;
  font-family: var(--instr-sans); font-weight: 600;
  font-size: .85rem; opacity: .85;
  text-transform: uppercase; letter-spacing: .1em;
}

/* ====================================================================
   ANREISE
   ==================================================================== */
.anreise{ background: var(--black); }
.anreise .display{ color: var(--white); }
.anreise .display em{ color: var(--cyan); }
.anreise__grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.anreise__card{
  background: var(--white);
  color: var(--black);
  border: 4px solid var(--white);
  border-radius: var(--r-md);
  padding: 1.8rem 1.6rem;
  box-shadow: 6px 6px 0 var(--pink);
  transition: transform .2s ease, box-shadow .2s ease;
}
.anreise__card:hover{ transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--pink); }
.anreise__card:nth-child(2){ box-shadow: 6px 6px 0 var(--cyan); }
.anreise__card:nth-child(2):hover{ box-shadow: 8px 8px 0 var(--cyan); }
.anreise__card:nth-child(3){ box-shadow: 6px 6px 0 var(--yellow); }
.anreise__card:nth-child(3):hover{ box-shadow: 8px 8px 0 var(--yellow); }
.anreise__card h3{
  font-family: var(--display);
  font-size: 1.4rem; margin: 0 0 .6rem;
  color: var(--black);
  text-transform: uppercase;
}
.anreise__card p{ margin: 0 0 .8rem; opacity: .85; }
.anreise__card p:last-child{ margin-bottom: 0; }
.anreise__cardLink{
  display: inline-block;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .08em; font-size: .82rem; text-transform: uppercase;
  color: var(--pink);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}
.anreise__cardLink:hover{ color: var(--sangria, #B43A3A); border-color: currentColor; }

.faq__download{
  display: inline-block;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .08em; font-size: .85rem; text-transform: uppercase;
  color: var(--pink);
  border-bottom: 2px solid var(--pink);
  padding-bottom: 2px;
}
.faq__download:hover{ color: var(--sangria, #B43A3A); border-color: currentColor; }

/* ====================================================================
   FAQ
   ==================================================================== */
.faq{ background: var(--yellow); color: var(--black); }
.faq .display{ color: var(--black); }
.faq .display em{ color: var(--pink); }
.faq .kicker{ background: var(--black); color: var(--yellow); }

.faq__list{
  display: grid; gap: 1rem;
  max-width: 820px; margin: 0 auto;
}
.faq details{
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--r-md);
  padding: 1rem 1.4rem;
  box-shadow: 4px 4px 0 var(--black);
  transition: transform .2s ease, box-shadow .2s ease;
}
.faq details[open]{ transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--black); }
.faq summary{
  list-style: none; cursor: pointer;
  font-family: var(--display);
  font-size: 1.15rem;
  text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  color: var(--black);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-family: var(--display); font-size: 1.8rem; line-height: 1;
  color: var(--pink); transition: transform .25s ease;
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ margin: .8rem 0 0; opacity: .85; max-width: 60ch; }

/* ====================================================================
   FOOTER
   ==================================================================== */
.footer{
  background: var(--black); color: var(--white);
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 4vw, 2.5rem) 1.6rem;
  border-top: 6px solid var(--pink);
}

/* Crew Werden Callout (Crewaro) */
.footer__crew{
  max-width: var(--container); margin: 0 auto 2.5rem;
  background: var(--pink);
  border: 3px solid var(--white);
  border-radius: var(--r-lg);
  padding: 1.6rem 1.8rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.6rem;
  align-items: center;
  box-shadow: 6px 6px 0 var(--yellow);
}
.footer__crewBrand{
  display: inline-flex; align-items: center; gap: .6rem;
  padding-right: 1.2rem;
  border-right: 1px solid rgba(255,255,255,.25);
}
.footer__crewLogo{ width: 56px; height: auto; display: block; }
.footer__crewWord{
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .25em; font-size: .92rem;
  color: var(--white);
}
.footer__crewText h3{
  font-family: var(--display);
  font-size: 1.4rem; line-height: 1.1; margin: 0 0 .2rem;
  color: var(--white);
  text-transform: uppercase;
}
.footer__crewText p{
  margin: 0; font-size: .92rem; opacity: .9; max-width: 56ch;
}
.footer__crewText strong{ color: var(--yellow); font-weight: 700; }

.footer__crewActions{
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.footer__crewLogin{
  font-family: var(--instr-sans); font-size: .8rem; font-weight: 700;
  color: var(--white); opacity: .85;
  letter-spacing: .1em; text-transform: uppercase;
  transition: opacity .2s ease, transform .2s ease;
}
.footer__crewLogin:hover{ opacity: 1; transform: translateX(2px); }

.footer__top{
  max-width: var(--container); margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 2fr; gap: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.footer__wordmark{
  font-family: var(--display); font-size: 2rem;
  display: inline-flex; align-items: baseline;
  text-transform: uppercase;
}
.footer__wordmark em{ font-style: normal; color: var(--yellow); margin-left: .25ch; }
.footer__am{
  font-family: var(--display);
  text-transform: uppercase;
  color: var(--pink);
  font-size: 1.3em;
  margin: 0 .2ch;
  letter-spacing: -.01em;
}
.footer__tag{
  font-family: var(--instr-sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; font-size: .8rem;
  margin-top: .6rem; opacity: .7;
}
.footer__socials{ display: flex; gap: .6rem; margin-top: 1.4rem; flex-wrap: wrap; }
.footer__socials a{
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .5em 1em;
  border: 2px solid var(--white);
  border-radius: var(--r-pill);
  font-size: .82rem;
  transition: background .2s ease, color .2s ease;
}
.footer__socials a:hover{ background: var(--yellow); color: var(--black); border-color: var(--yellow); }

.footer__cols{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
.footer__cols h4{
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--yellow); margin: 0 0 1rem;
}
.footer__cols a{
  display: block; padding: .25rem 0;
  font-size: .94rem; opacity: .85;
  transition: color .2s ease, transform .2s ease;
}
.footer__cols a:hover{ color: var(--pink); transform: translateX(3px); }

.footer__bottom{
  max-width: var(--container); margin: 1.4rem auto 0;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem;
  font-family: var(--instr-sans); font-size: .8rem; opacity: .65;
  text-transform: uppercase; letter-spacing: .05em;
}
.footer__by strong{ color: var(--yellow); }

/* ====================================================================
   TEAM PAGE
   ==================================================================== */
.teamHero{
  background: var(--pink); color: var(--white);
  text-align: center;
  padding: clamp(4rem, 9vw, 7rem) clamp(1rem, 4vw, 2.5rem);
  border-bottom: 6px solid var(--black);
}
.teamHero .display{ color: var(--white); margin-bottom: 1.4rem; }
.teamHero .display em{ color: var(--yellow); }
.teamHero__lead{
  max-width: 56ch; margin: 0 auto;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  opacity: .92;
}
.teamHero__lead strong{ color: var(--yellow); font-weight: 700; }

.teamRoles{ background: var(--black); }
.teamRoles__grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
}
.teamRoles__grid--three{ grid-template-columns: repeat(3, 1fr); }
.teamRole{
  background: var(--white); color: var(--black);
  border: 4px solid var(--white);
  border-radius: var(--r-lg);
  padding: 2.2rem 2rem;
  box-shadow: 8px 8px 0 var(--pink);
  display: flex; flex-direction: column; gap: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
}
.teamRole--volunteer:hover{ transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--pink); }
.teamRole--crew{ box-shadow: 8px 8px 0 var(--cyan); }
.teamRole--crew:hover{ transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--cyan); }
.teamRole--sponsor{ box-shadow: 8px 8px 0 var(--yellow); }
.teamRole--sponsor:hover{ transform: translate(-3px,-3px); box-shadow: 11px 11px 0 var(--yellow); }
.teamRole--sponsor h2 em{ color: var(--yellow); }
.teamRole--sponsor ul li::before{ color: var(--yellow); }
.teamRole__tag{
  display: inline-block;
  font-family: var(--instr-sans); font-weight: 700;
  letter-spacing: .2em; font-size: .75rem; text-transform: uppercase;
  color: var(--white); background: var(--black);
  padding: .4em 1em; border-radius: var(--r-pill);
  align-self: flex-start;
}
.teamRole h2{
  font-family: var(--headline);
  font-weight: 800;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -.01em;
  margin: 0;
  text-transform: uppercase;
  color: var(--black);
}
.teamRole h2 em{ font-style: normal; color: var(--pink); }
.teamRole--crew h2 em{ color: var(--cyan); }
.teamRole p{ margin: 0; opacity: .85; }
.teamRole ul{
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: .4rem;
}
.teamRole ul li{ padding-left: 1.4em; position: relative; }
.teamRole ul li::before{
  content: "✓"; position: absolute; left: 0;
  color: var(--pink); font-weight: 900;
}
.teamRole--crew ul li::before{ color: var(--cyan); }
.teamRole .btn{ align-self: flex-start; margin-top: auto; }

.teamWhy{ background: var(--cyan); color: var(--black); }
.teamWhy .display{ color: var(--black); }
.teamWhy .display em{ color: var(--pink); }
.teamWhy__grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.teamWhy__card{
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--r-md);
  padding: 1.4rem 1.4rem;
  box-shadow: 5px 5px 0 var(--black);
  transition: transform .2s ease, box-shadow .2s ease;
}
.teamWhy__card:hover{ transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--black); }
.teamWhy__card h3{
  font-family: var(--headline);
  font-weight: 800;
  font-size: 1.15rem; line-height: 1.05; margin: 0 0 .6rem;
  text-transform: uppercase; color: var(--black);
  letter-spacing: -.005em;
}
.teamWhy__card p{ margin: 0; font-size: .92rem; opacity: .85; }
.teamWhy__card strong{ color: var(--pink); font-weight: 700; }

.teamContact{ background: var(--yellow); color: var(--black); text-align: center; }
.teamContact .display{ color: var(--black); }
.teamContact .display em{ color: var(--pink); }
.teamContact__buttons{
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 2rem;
}

/* ====================================================================
   CAMPING PAGE
   ==================================================================== */
.campRules{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}
.campRule{
  background: var(--white); color: var(--black);
  border: 4px solid var(--white);
  border-radius: var(--r-lg);
  padding: 1.8rem 1.6rem;
  box-shadow: 8px 8px 0 var(--cyan);
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column; gap: .6rem;
}
.campRule:hover{ transform: translate(-3px,-3px); }
.campRule--cyan  { box-shadow: 8px 8px 0 var(--cyan); }
.campRule--cyan:hover  { box-shadow: 11px 11px 0 var(--cyan); }
.campRule--yellow{ box-shadow: 8px 8px 0 var(--yellow); }
.campRule--yellow:hover{ box-shadow: 11px 11px 0 var(--yellow); }
.campRule--pink  { box-shadow: 8px 8px 0 var(--pink); }
.campRule--pink:hover  { box-shadow: 11px 11px 0 var(--pink); }
.campRule__time{
  display: inline-block;
  align-self: flex-start;
  font-family: var(--display);
  font-size: 1.05rem;
  text-transform: uppercase;
  background: var(--black); color: var(--yellow);
  padding: .35em .8em; border-radius: var(--r-pill);
  letter-spacing: .04em;
}
.campRule h3{
  font-family: var(--display);
  font-size: 1.6rem; line-height: 1; margin: 0;
  text-transform: uppercase; color: var(--black);
}
.campRule p{ margin: 0; opacity: .9; }
.campRule strong{ color: var(--pink); }

.campBans{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.campBan{
  background: var(--white);
  border: 3px solid var(--black);
  border-radius: var(--r-md);
  padding: 1.4rem 1.2rem;
  box-shadow: 5px 5px 0 var(--black);
  text-align: center;
  display: flex; flex-direction: column; gap: .4rem;
}
.campBan__icon{
  font-size: 2.6rem; line-height: 1;
  margin-bottom: .3rem;
}
.campBan h3{
  font-family: var(--display);
  font-size: 1.05rem; line-height: 1;
  margin: 0; text-transform: uppercase;
  color: var(--pink);
}
.campBan p{ margin: 0; font-size: .88rem; opacity: .85; }

/* ====================================================================
   BALLERMANN-STICKER (Hero & verstreut)
   ==================================================================== */
.sticker{
  position: absolute;
  width: clamp(80px, 9vw, 130px);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(4px 4px 0 var(--black));
}
.sticker--palm-l{
  left: 1.5%; top: 20%;
  width: clamp(110px, 12vw, 170px);
  --rot: -10deg;
}
.sticker--cocktail{
  left: 2.5%; top: 62%;
  width: clamp(75px, 8vw, 115px);
  --rot: 12deg;
}
.sticker--eimer{
  right: 2%; top: 20%;
  width: clamp(70px, 7vw, 100px);
  --rot: -8deg;
}
.sticker--shades{
  right: 3%; top: 64%;
  width: clamp(90px, 9vw, 130px);
  --rot: 10deg;
}

@keyframes float{
  0%,100%{ transform: translateY(0) rotate(var(--rot,0deg)); }
  50%   { transform: translateY(-8px) rotate(var(--rot,0deg)); }
}
.sticker{ animation: float 5s ease-in-out infinite; }
.sticker--palm-l { animation-delay: 0s; }
.sticker--cocktail { animation-delay: .6s; }
.sticker--eimer { animation-delay: 2s; }
.sticker--shades { animation-delay: 1.5s; }

@media (max-width: 720px){
  .sticker--shades, .sticker--cocktail { display: none; }
  .sticker--palm-l { width: 80px; left: 2%; top: 14%; }
  .sticker--eimer { width: 60px; right: 4%; top: 62%; }
}

/* ====================================================================
   LEGAL (Impressum)
   ==================================================================== */
.legal{
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) clamp(1rem, 4vw, 2.5rem);
  color: var(--white);
}
.legal .display{ color: var(--white); margin-bottom: .5rem; }
.legal__grid{
  display: grid; gap: 1.2rem;
  margin-top: 2rem;
}
.legal__block{
  background: var(--black-2);
  border: 2px solid rgba(255,255,255,.15);
  border-radius: var(--r-md);
  padding: 1.4rem 1.6rem;
  border-left: 4px solid var(--pink);
}
.legal__block h2{
  font-family: var(--display);
  font-size: 1.15rem; line-height: 1.1;
  margin: 0 0 .6rem;
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0;
}
.legal__block p{ margin: 0; opacity: .9; }
.legal__block p + p{ margin-top: .6rem; }
.legal__block a{ color: var(--cyan); text-decoration: underline; }
.legal__block a:hover{ color: var(--yellow); }
.legal__block em{ font-style: italic; opacity: .55; }
.legal__back{ text-align: center; margin-top: 3rem; }

/* ====================================================================
   RESPONSIVE
   ==================================================================== */
@media (max-width: 980px){
  .nav__links{ display: none; }
  .nav__cta{ display: none; }
  .nav__burger{ display: inline-flex; }
  .nav{ grid-template-columns: 1fr auto; }

  .lineup__grid{ grid-template-columns: repeat(2, 1fr); }
  .lineup__cards{ grid-template-columns: repeat(3, 1fr); }
  .tickets__upcoming{ grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .tickets__upcoming--four{ grid-template-columns: repeat(2, 1fr); }
  .tickets__featured--two{ grid-template-columns: 1fr; max-width: 460px; }
  .campRules{ grid-template-columns: 1fr; }
  .campBans{ grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .campBan{ padding: 1rem .8rem; gap: .25rem; }
  .campBan__icon{ font-size: 2rem; margin-bottom: .15rem; }
  .campBan h3{ font-size: .92rem; line-height: 1.05; }
  .campBan p{ font-size: .78rem; line-height: 1.4; }
  .tickets__grid{ grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
  .ticketCard--featured{ transform: rotate(0); }
  .ticketCard--featured:hover{ transform: translate(-3px,-3px); }
  .anreise__grid{ grid-template-columns: 1fr; }
  .teamRoles__grid,
  .teamRoles__grid--three{ grid-template-columns: 1fr; }
  .teamWhy__grid{ grid-template-columns: repeat(2, 1fr); }
  .footer__top{ grid-template-columns: 1fr; }
  .footer__cols{ grid-template-columns: repeat(2, 1fr); }
  .footer__crew{ grid-template-columns: 1fr; text-align: center; gap: 1rem; }
  .footer__crewBrand{ border-right: 0; padding-right: 0; justify-content: center; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.18); }
}

@media (max-width: 540px){
  .legal{ padding: 2rem 1rem; }
  .legal .display{ font-size: 2rem; line-height: 1; }
  .legal__grid{ gap: .8rem; margin-top: 1.4rem; }
  .legal__block{ padding: 1.1rem 1.2rem; }
  .legal__block h2{ font-size: 1rem; }
  .legal__block p{ font-size: .92rem; }
  .legal__back{ margin-top: 2rem; }
  .legal__back .btn{ width: 100%; }
  .tickets__grid{ grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .ticketCard{ padding: 1.4rem 1rem 1.2rem; }
  .ticketCard__title{ font-size: 1.2rem; }
  .ticketCard__price{ font-size: 2rem; margin: .2rem 0 .5rem; }
  .ticketCard ul{ font-size: .85rem; }
  .ticketCard ul li{ font-size: .85rem; }
  .ticketCard__phase{ font-size: .62rem; }
  .ticketCard__hint{ font-size: .7rem; }
  .lineup__grid{ grid-template-columns: 1fr; }
  .lineup__cards{ grid-template-columns: repeat(2, 1fr); }
  .hero__corner{ font-size: .6rem; padding: .35em .8em; }
  .hero__date{ padding: .6rem .8rem; gap: .25rem; }
  .hero__dateChunk{ padding: 0 .35rem; }
  .hero__dateChunk strong{ font-size: 1.25rem; letter-spacing: -.02em; }
  .hero__dateChunk small{ font-size: .42rem; letter-spacing: .15em; }
  .hero__dateSep{ font-size: 1.25rem; }
  .footer__bottom{ flex-direction: column; }
  .footer__cols{ grid-template-columns: 1fr; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* reveal-on-scroll */
.reveal{ opacity: 0; transform: translateY(28px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity: 1; transform: none; }
.hero.reveal{ opacity: 1; transform: none; }

/* ============================================================
   HERO – CTA-Row (Pre-Sale primary + Tickets secondary)
   ============================================================ */
.hero__ctaRow{
  display: flex; flex-wrap: wrap; gap: .8rem;
  justify-content: center; margin-top: 1.2rem;
}
.hero__ctaHint{
  font-family: var(--instr-sans); font-size: .85rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--white); opacity: .85;
  margin-top: .8rem;
}
.btn--ghost-light{
  background: transparent; color: var(--white);
  border: 2px solid var(--white);
}
.btn--ghost-light:hover{ background: var(--white); color: var(--black); }

/* ============================================================
   COUNTDOWN
   ============================================================ */
.countdown{
  display: flex; align-items: center; justify-content: center;
  gap: .4rem; flex-wrap: wrap;
  margin: 1.5rem auto 2.4rem;
  font-family: var(--display);
  color: var(--yellow);
  text-shadow:
    -3px -3px 0 var(--black),
    3px -3px 0 var(--black),
    -3px 3px 0 var(--black),
    3px 3px 0 var(--black),
    0 6px 0 var(--black);
}
.countdown__cell{
  display: flex; flex-direction: column; align-items: center;
  background: var(--pink);
  border: 4px solid var(--black);
  border-radius: var(--r-md);
  padding: .9rem 1.1rem .7rem;
  min-width: 5.5rem;
  box-shadow: 6px 6px 0 var(--black);
}
.countdown__num{
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: .9;
  letter-spacing: -.02em;
  color: var(--white);
  text-shadow: none;
}
.countdown__label{
  font-family: var(--instr-sans);
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--black);
  text-shadow: none;
  margin-top: .35rem;
}
.countdown__sep{
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--yellow);
  margin: 0 .1rem;
}
.countdown--live .countdown__cell{ background: var(--cyan); }
@media (max-width: 520px){
  .countdown__sep{ display: none; }
  .countdown__cell{ min-width: 4.4rem; padding: .7rem .8rem .55rem; }
  .countdown__num{ font-size: 2rem; }
}

/* ============================================================
   TICKET CARD – Locked state
   ============================================================ */
.btn--locked{
  background: var(--black) !important;
  color: var(--yellow) !important;
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
  text-align: center;
  letter-spacing: .04em;
}
.ticketCard__presale{
  display: block;
  margin-top: .9rem;
  text-align: center;
  font-family: var(--instr-sans);
  font-size: .95rem; font-weight: 700;
  color: var(--pink);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: transform .2s ease, color .2s ease;
}
.ticketCard__presale:hover{ color: var(--cyan); transform: translateX(4px); }

/* ============================================================
   NEWSLETTER (Pre-Sale)
   ============================================================ */
.newsletter{
  margin: 3rem auto 2rem;
  max-width: 720px;
  padding: 0 1rem;
}
.newsletter__inner{
  background: var(--yellow);
  color: var(--black);
  border: 4px solid var(--black);
  border-radius: var(--r-lg);
  box-shadow: 10px 10px 0 var(--pink);
  padding: 2rem 1.6rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.newsletter__inner::before{
  content: '';
  position: absolute; inset: -40% -10% auto auto;
  width: 240px; height: 240px;
  background: radial-gradient(circle, var(--cyan) 0%, transparent 70%);
  opacity: .35;
  pointer-events: none;
}
.newsletter__badge{
  display: inline-block;
  background: var(--black); color: var(--yellow);
  font-family: var(--instr-sans);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  padding: .4rem .9rem;
  border-radius: var(--r-pill);
  margin-bottom: 1rem;
}
.newsletter__eyebrow{
  font-family: var(--instr-sans);
  font-weight: 700;
  font-size: clamp(.95rem, 1.6vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--black);
  margin: 0 0 1.2rem;
}
.newsletter__title{
  font-family: var(--display);
  font-size: clamp(1.6rem, 4.6vw, 2.7rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: -.01em;
}
.newsletter__title em{
  font-style: normal;
  color: var(--pink);
  background: var(--white);
  padding: .15em .4em .1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  box-shadow: 4px 4px 0 var(--black);
  display: inline-block;
}
.newsletter__lead{
  font-family: var(--instr-sans);
  font-size: 1rem; line-height: 1.5;
  margin: 0 auto 1.2rem;
  max-width: 540px;
}
.newsletter__perks{
  list-style: none;
  margin: 0 auto 1.6rem;
  padding: 0;
  max-width: 460px;
  display: grid; gap: .55rem;
  text-align: left;
}
.newsletter__perks li{
  font-family: var(--instr-sans);
  font-size: .95rem; font-weight: 600;
  display: flex; align-items: flex-start; gap: .65rem;
  line-height: 1.35;
}
.newsletter__check{
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem;
  background: var(--pink);
  color: var(--white);
  border: 2px solid var(--black);
  border-radius: 50%;
  font-weight: 900;
  font-size: .8rem;
  margin-top: .05rem;
}
.newsletter__form{
  display: flex; flex-direction: column; gap: .9rem;
  text-align: left;
  position: relative; z-index: 1;
}
.newsletter__field{ display: flex; flex-direction: column; gap: .35rem; }
.newsletter__fieldLabel{
  font-family: var(--instr-sans);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.newsletter__field input[type="email"]{
  font-family: var(--instr-sans);
  font-size: 1.05rem;
  padding: .9rem 1rem;
  border: 3px solid var(--black);
  border-radius: var(--r-md);
  background: var(--white);
  color: var(--black);
  outline: none;
}
.newsletter__field input[type="email"]:focus{
  box-shadow: 0 0 0 4px var(--pink);
}
.newsletter__consent{
  display: flex; gap: .65rem; align-items: flex-start;
  font-family: var(--instr-sans);
  font-size: .82rem; line-height: 1.45;
}
.newsletter__consent input[type="checkbox"]{
  flex-shrink: 0;
  width: 1.15rem; height: 1.15rem;
  margin-top: .15rem;
  accent-color: var(--pink);
  cursor: pointer;
}
.newsletter__consent a{ color: var(--pink); font-weight: 700; }
.newsletter__consent a:hover{ color: var(--black); }
.newsletter__submit{ width: 100%; margin-top: .3rem; }
.newsletter__status{
  font-family: var(--instr-sans);
  font-size: .95rem; font-weight: 600;
  margin: .6rem 0 0; min-height: 1.4em;
  text-align: center;
  line-height: 1.4;
}
.newsletter__status--ok{
  color: var(--black);
  background: #C8F2D2;
  border: 2px solid #0a7a2e;
  border-radius: var(--r-md);
  padding: .7rem .9rem;
}
.newsletter__status--error{
  color: var(--black);
  background: #FFD2D9;
  border: 2px solid #b00020;
  border-radius: var(--r-md);
  padding: .7rem .9rem;
}
.newsletter__legal{
  font-family: var(--instr-sans);
  font-size: .72rem; line-height: 1.4;
  opacity: .7;
  text-align: center;
  margin: .4rem 0 0;
}
@media (max-width: 520px){
  .newsletter{ margin-top: 2rem; }
  .newsletter__inner{ padding: 1.5rem 1.1rem; box-shadow: 6px 6px 0 var(--pink); }
  .newsletter__title{ font-size: 1.6rem; }
}