/* ===========================================================
   RE:CODED — Layout
   Uebernimmt die Vorlage RECODED_Website in der Wirkung und
   ergaenzt, was WordPress zusaetzlich ausgibt (Newsletter,
   Kontakt, DJ-Profile, Rechtstexte, Einwilligung).
   =========================================================== */

/* --- Schriften, lokal gehostet ------------------------------
   Beide sind variable Schriften: je eine Datei deckt alle
   benutzten Schnitte ab. Keine Anfrage an Google. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800 900; font-stretch: 125%; font-display: swap;
  src: url("../fonts/archivo-wide-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 800 900; font-stretch: 125%; font-display: swap;
  src: url("../fonts/archivo-wide-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Grundgerüst -------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
}
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}
/* height:auto ist hier nicht Kosmetik: WordPress schreibt width und height
   ins Markup. Ohne diese Zeile behaelt ein Bild seine gespeicherte Hoehe,
   waehrend die Breite auf 100% geht — es wird gestaucht. */
img, video, svg { max-width: 100%; height: auto; }
picture { display: block; }

/* Lange, ununterbrochene Woerter (Clubnamen, URLs) brechen statt
   das Layout zu sprengen. */
h1, h2, h3, p, li, dd, dt { overflow-wrap: break-word; }

/* Ankerziele: Die klebende Kopfzeile wuerde sonst die Ueberschrift
   verdecken, auf die gerade gesprungen wurde. */
[id] { scroll-margin-top: 76px; }

.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* Die breite Grotesk der Wortmarke. */
.wide, .head, .tier .price, .dj h3, .ev .date, .rules dt, .profile__name, .entry__title {
  font-family: var(--wide);
  font-stretch: 125%;
  font-weight: 900;
  text-transform: uppercase;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--white); color: var(--black);
  padding: 12px 20px; z-index: 100; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.skip-link:focus { left: var(--gut); top: 8px; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* --- Schluesselfarbe ----------------------------------------
   Die Seite ist schwarz-weiss. Das Eisblau gehoert allein der
   Kaufaktion — dadurch findet der Blick den Ticket-Knopf sofort.
   Unter der Farbe liegt das Negativ als Muster: Es schimmert wie Frost
   durch, bleibt aber so zart, dass die schwarze Schrift klar lesbar ist.
   Der Ausschnitt wandert langsam. */
.btn.acc,
.top nav a.buy {
  background-color: var(--key);
  background-image:
    linear-gradient(rgba(214, 238, 255, .74), rgba(214, 238, 255, .74)),
    url("../img/neg.jpg");
  background-size: auto, 420px auto;
  background-position: 0 0, 30% 40%;
  border-color: var(--key);
  color: var(--black);
  animation: ice-drift 16s ease-in-out infinite alternate;
}
.btn.acc:hover,
.top nav a.buy:hover {
  background: #fff;
  border-color: #fff;
  color: var(--black);
  animation: none;
}
@keyframes ice-drift { to { background-position: 0 0, 70% 60%; } }

/* --- Knoepfe -------------------------------------------------- */
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--mono); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: 14px;
  padding: 14px 22px;
  border: 1px solid var(--white); background: transparent; color: var(--white);
  cursor: pointer;
}
.btn:hover { background: var(--white); color: var(--black); }

/* --- Kopfbereich -------------------------------------------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: rgba(6, 6, 6, .92);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px 24px; flex-wrap: wrap; padding-block: 12px;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.brand { display: flex; align-items: center; text-decoration: none; }
.brand img { height: 18px; width: auto; display: block; }
.top nav {
  display: flex; gap: 4px 22px; flex-wrap: wrap; align-items: center;
  margin-left: auto;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.top nav a { text-decoration: none; color: var(--grey); padding-block: 4px; }
.top nav a:hover { color: var(--white); }
.top nav a.sub { color: var(--white); font-weight: 700; }
.top nav a.buy { padding: 4px 12px; font-weight: 700; border: 1px solid var(--key); }
/* Dresscode-Link zum Partner: weiss, mit Logo, und er pulsiert. */
.top nav a.dress {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border: 1px solid var(--white);
  color: var(--white); font-weight: 700;
  animation: dress-pulse 1.4s ease-in-out infinite;
}
.top nav a.dress img { display: block; height: 11px; width: auto; }
.top nav a.dress:hover { animation: none; background: var(--white); color: var(--black); }
.top nav a.dress:hover img { filter: invert(1); }
@keyframes dress-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .top nav a.dress { animation: none; } }

/* --- Partnerband ---------------------------------------------
   Schmale Leiste direkt unter der Navigation, laeuft von rechts nach
   links. Die Liste steht viermal im Markup; verschoben wird genau um
   eine Listenbreite, dadurch ist der Uebergang nicht zu sehen. Die
   Logos sind nach Hoehe ausgeglichen, nicht nach Breite — sonst wirkt
   eine lange Wortmarke winzig neben einem kompakten Zeichen. */
.partners {
  --partner-gap: clamp(34px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(12px, 1.6vw, 18px);
  overflow: hidden;
}
.partners__head {
  margin: 0 0 clamp(8px, 1.1vw, 12px);
  text-align: center;
  font-family: var(--mono);
  font-size: 10px; font-weight: 400;
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--grey);
}
.partners__belt {
  overflow: hidden;
  /* Logos blenden an den Raendern aus, statt hart abgeschnitten zu werden. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.partners__track {
  display: flex; width: max-content;
  animation: partners-slide 24s linear infinite;
}
.partners__belt:hover .partners__track { animation-play-state: paused; }
.partners__list {
  list-style: none; margin: 0; padding: 0 var(--partner-gap) 0 0;
  display: flex; flex: none; align-items: center;
  gap: var(--partner-gap);
}
.partners__item { display: flex; flex: none; }
.partners__item a { display: flex; opacity: .85; transition: opacity .15s; }
.partners__item a:hover { opacity: 1; }
.partners__item img { display: block; width: auto; max-width: none; height: clamp(15px, 1.7vw, 20px); }
.partners__item--undone img { height: clamp(20px, 2.2vw, 27px); }
.partners__item--eventjet img { height: clamp(23px, 2.5vw, 30px); }
.partners__item--kuzu-records img { height: clamp(23px, 2.5vw, 30px); }
.partners__item--technosterone img { height: clamp(18px, 2vw, 24px); }
.partners__item--bimoni img { height: clamp(22px, 2.4vw, 29px); }
.partners__item--pkh-warehouse img { height: clamp(32px, 3.4vw, 42px); }

@keyframes partners-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

/* Wer Bewegung abgestellt hat, bekommt die Logos stehend und umbrochen. */
@media (prefers-reduced-motion: reduce) {
  .partners__belt { -webkit-mask-image: none; mask-image: none; padding-inline: var(--gut); }
  .partners__track { width: auto; animation: none; justify-content: center; }
  .partners__list { flex-wrap: wrap; justify-content: center; padding: 0; gap: 24px var(--partner-gap); }
  .partners__list[aria-hidden="true"] { display: none; }
}

/* --- Hero ----------------------------------------------------
   Das Key Visual liegt entsaettigt und abgedunkelt hinter dem Text.
   Darueber ein Hauch des Negativs, damit das Bild nicht tot wirkt. */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__bg { position: absolute; inset: 0; }
.hero__bg picture,
.hero__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.hero__bg img { filter: grayscale(1) contrast(1.1) brightness(.42); }
.hero__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: url("../img/neg.jpg") center / cover no-repeat;
  opacity: .1; mix-blend-mode: screen; pointer-events: none;
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(6, 6, 6, .35) 0%, rgba(6, 6, 6, .2) 40%, var(--black) 100%);
}
.hero .in {
  position: relative; z-index: 3;
  display: grid; gap: 28px;
  padding-block: clamp(56px, 10vw, 120px) clamp(40px, 6vw, 72px);
}

/* Die Wortmarke baut sich auf: Erst blinkt der Doppelpunkt, dann fahren
   "RE" und "CODED" aus ihm heraus. Drei Bilder, damit die Teile einzeln
   bewegt werden koennen; die Prozentwerte sind ihre Breitenanteile.
   Vektordateien, damit die Marke in jeder Groesse scharf bleibt. */
.wmx { display: flex; align-items: stretch; width: min(100%, 980px); margin: 0; }
.wmx img { display: block; height: auto; width: 100%; }
.wmx .l { flex: 0 0 26.44%; overflow: hidden; }
.wmx .c { flex: 0 0 5.18%; width: 5.18%; animation: wm-blink 1.9s steps(1) .3s both; }
.wmx .r { flex: 0 0 68.38%; overflow: hidden; }
.wmx .l img { transform: translateX(100%);  animation: wm-out .9s cubic-bezier(.16, 1, .3, 1) 2.3s forwards; }
.wmx .r img { transform: translateX(-100%); animation: wm-out .9s cubic-bezier(.16, 1, .3, 1) 2.3s forwards; }
@keyframes wm-blink {
  0% { opacity: 0; } 10% { opacity: 1; } 24% { opacity: 0; } 34% { opacity: 1; }
  46% { opacity: 0; } 55% { opacity: 1; } 65% { opacity: 0; } 72%, 100% { opacity: 1; }
}
@keyframes wm-out { to { transform: translateX(0); } }

/* Lesbar zuerst: "RE" faehrt mit richtig stehendem R aus, bleibt kurz
   stehen und springt dann in die gespiegelte Form der Marke. Zwei Bilder
   uebereinander, die sich im Takt des Doppelpunkts abwechseln. */
.wmx .l { position: relative; }
.wmx .l .plain { position: absolute; inset: 0; }
.wmx .l .plain {
  animation: wm-out .9s cubic-bezier(.16, 1, .3, 1) 2.3s forwards,
             wm-flip-off .7s steps(1) 4.5s forwards;
}
.wmx .l .mark {
  opacity: 0;
  animation: wm-out .9s cubic-bezier(.16, 1, .3, 1) 2.3s forwards,
             wm-flip-on .7s steps(1) 4.5s forwards;
}
@keyframes wm-flip-off {
  0% { opacity: 1; } 18% { opacity: 0; } 32% { opacity: 1; } 52% { opacity: 0; }
  64% { opacity: 1; } 80%, 100% { opacity: 0; }
}
@keyframes wm-flip-on {
  0% { opacity: 0; } 18% { opacity: 1; } 32% { opacity: 0; } 52% { opacity: 1; }
  64% { opacity: 0; } 80%, 100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .wmx .c { animation: none; }
  .wmx .l img, .wmx .r img { animation: none; transform: none; }
  .wmx .l .plain { display: none; }
  .wmx .l .mark { opacity: 1; }
}

.tag {
  margin: 0;
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: .32em; text-transform: uppercase;
}
.facts {
  display: flex; flex-wrap: wrap; gap: 6px 26px;
  margin: 0; padding: 0; list-style: none;
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: .08em; text-transform: uppercase; color: var(--grey);
}
.facts b { color: var(--white); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Negativstreifen und Regelzeile -------------------------- */
.static-line {
  height: 10px;
  background: url("../img/neg.jpg") center 45% / 100% auto;
  border-block: 1px solid var(--line);
}
.strip {
  list-style: none; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 14px;
  padding: 14px var(--gut);
  border-bottom: 1px solid var(--line);
  font-size: 13px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey);
}
.strip li + li::before { content: "·"; margin-right: 14px; color: #5a5a5a; }

/* --- Abschnitte ---------------------------------------------- */
section { padding-block: clamp(56px, 8vw, 100px); border-bottom: 1px solid var(--line); }
.head {
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-size: clamp(34px, 6.5vw, 76px);
  letter-spacing: -.01em; line-height: .95;
}
.head em { font-style: normal; color: var(--grey); }
.lede { max-width: 60ch; color: var(--grey); margin: -18px 0 36px; }

/* --- About ---------------------------------------------------- */
.about {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(24px, 5vw, 64px); align-items: start;
}
.about .head { margin-bottom: 0; }
.about p { margin: 0 0 14px; max-width: 58ch; }
.about p:last-child { margin-bottom: 0; }
.about .big { font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
@media (max-width: 800px) { .about { grid-template-columns: 1fr; } }

/* --- Newsletter-Leiste ----------------------------------------
   Schlank gehalten, damit sie den Ticketabschnitt nicht nach
   unten draengt. */
.newsbar {
  padding-block: clamp(18px, 2.5vw, 28px);
  border-bottom: 1px solid var(--line);
  background: var(--ink);
}
.newsbar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 14px 28px;
}
.newsbar__text {
  margin: 0; flex: 1 1 280px; min-width: 0;
  color: var(--grey); font-size: clamp(13px, 1.4vw, 15px);
}
.newsbar__btn {
  flex: 0 0 auto; font-size: 13px; padding: 12px 24px;
  min-height: 46px; display: inline-flex; align-items: center;
}

/* "Soon unlocked" — Platzhalter, solange kein Verteiler steht.
   Das Dreieck, das Browser vor ein <summary> setzen, muss weg. */
.soon { position: relative; flex: 0 0 auto; }
.soon > summary { list-style: none; cursor: pointer; }
.soon > summary::-webkit-details-marker { display: none; }
.soon > summary::marker { content: ""; }
.soon__note {
  position: absolute; top: calc(100% + 8px); right: 0; margin: 0;
  white-space: nowrap;
  background: var(--black); border: 1px solid var(--white); color: var(--white);
  font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  padding: 10px 14px; z-index: 20;
}
.soon[open] > summary { background: var(--white); color: var(--black); }

/* --- Tickets -------------------------------------------------- */
.tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border: 1px solid var(--line);
}
.tier {
  padding: 26px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 -1px -1px 0;
  display: grid; gap: 4px; min-width: 0; align-content: start;
}
.tier h3 {
  margin: 0; font-size: 12px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--grey); font-weight: 400;
}
.tier .price {
  font-size: clamp(40px, 5vw, 58px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.tier p { margin: 0; color: var(--grey); font-size: 13px; }

.shops { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* Der Preis, der gerade gilt, steht mit im Kaufknopf. */
.btn__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.btn__price::before { content: "·"; margin: 0 .35em 0 .1em; }

/* Stand der Stufen: Was im Verkauf ist, traegt die Schluesselfarbe;
   Abgelaufenes tritt zurueck, Kommendes bleibt ruhig. */
.tier--now { box-shadow: inset 0 0 0 1px var(--key); position: relative; z-index: 1; }
.tier h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tier__flag {
  display: inline-block; padding: 2px 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .16em; white-space: nowrap;
  background: var(--key); color: var(--black);
}
.tier--next .price { color: var(--grey); }
.tier--past { opacity: .5; }
.tier--past .price { text-decoration: line-through; text-decoration-thickness: 2px; }
.tier--past .tier__flag { background: none; color: var(--grey); box-shadow: inset 0 0 0 1px var(--line); }
.small { font-size: 13px; color: var(--grey); margin: 18px 0 0; max-width: 70ch; }

/* --- Line-up ---------------------------------------------------
   Das Foto fuellt die ganze Kachel, Name und Clubs liegen unten
   darauf. Oben links die laufende Nummer, in der Mitte faehrt beim
   Ueberfahren die Wortmarke auf — dieselbe Bewegung wie im Hero. */
.floor {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-weight: 400;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--grey); margin: 0 0 16px;
}
.floor::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.djs {
  list-style: none; margin: 0 0 48px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px;
}
.djs:last-of-type { margin-bottom: 0; }

.dj {
  position: relative; background: var(--ink);
  aspect-ratio: 4 / 5; overflow: hidden; min-width: 0;
}
.dj > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), filter .6s;
}
.dj:hover > img, .dj.on > img, .dj:focus-within > img {
  transform: scale(1.04);
  filter: grayscale(1) contrast(1.15) brightness(.85);
}
/* Ohne Foto steht der Anfangsbuchstabe als Platzhalter. */
.dj > .mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--wide); font-stretch: 125%; font-weight: 900;
  font-size: clamp(90px, 14vw, 150px); line-height: 1;
  color: var(--line); user-select: none;
}

.dj .cn {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.dj .cn i,
.dj .cap h3::before {
  background: var(--white);
  -webkit-mask: url("../img/wm_colon.svg") center / contain no-repeat;
          mask: url("../img/wm_colon.svg") center / contain no-repeat;
}
.dj .cn i { display: block; width: 10px; height: 19px; }

.dj .wmo {
  position: absolute; left: 6%; right: 6%; top: 42%; z-index: 1;
  display: flex; align-items: flex-start;
  mix-blend-mode: difference; pointer-events: none;
}
.dj .wmo span { display: block; overflow: hidden; }
.dj .wmo b {
  display: block; width: 100%; background: #fff;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1) .15s;
}
.dj .wmo .l { flex: 0 0 26.44%; }
.dj .wmo .c { flex: 0 0 5.18%; }
.dj .wmo .r { flex: 0 0 68.38%; }
.dj .wmo .l b {
  aspect-ratio: 508.5 / 204.41; transform: translateX(101%);
  -webkit-mask: url("../img/wm_re.svg") center / 100% 100% no-repeat;
          mask: url("../img/wm_re.svg") center / 100% 100% no-repeat;
}
.dj .wmo .r b {
  aspect-ratio: 1315.26 / 204.41; transform: translateX(-101%);
  -webkit-mask: url("../img/wm_coded.svg") center / 100% 100% no-repeat;
          mask: url("../img/wm_coded.svg") center / 100% 100% no-repeat;
}
.dj .wmo .c b {
  aspect-ratio: 99.55 / 204.41; opacity: 0; transition: opacity .15s;
  -webkit-mask: url("../img/wm_colon.svg") center / 100% 100% no-repeat;
          mask: url("../img/wm_colon.svg") center / 100% 100% no-repeat;
}
.dj:hover .wmo b, .dj.on .wmo b, .dj:focus-within .wmo b { transform: none; }
.dj:hover .wmo .c b, .dj.on .wmo .c b, .dj:focus-within .wmo .c b { opacity: 1; }
.dj:hover .cn i, .dj.on .cn i { animation: cn-blink .9s steps(1) 1; }
@keyframes cn-blink { 0%, 40% { opacity: 0; } 20%, 60%, 100% { opacity: 1; } }

.dj .cap {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: 60px 16px 16px;
  background: linear-gradient(transparent, rgba(6, 6, 6, .95));
}
.dj h3 { margin: 0; font-size: 22px; line-height: 1; overflow-wrap: anywhere; }
.dj .cap h3::before {
  content: ""; display: inline-block;
  width: .32em; height: .72em; margin-right: .35em; vertical-align: .04em;
}
.dj .cap p {
  margin: 8px 0 0; font-size: 11px; letter-spacing: .08em;
  color: var(--grey); text-transform: uppercase;
}

/* Verlinkte Kacheln: Die ganze Kachel ist anklickbar, nicht nur der Name.
   Statt einen zweiten Link um das Foto zu legen — Screenreader laesen dann
   denselben Namen zweimal vor — spannt der Namenslink eine unsichtbare
   Flaeche ueber die gesamte Kachel auf. */
.dj--linked { cursor: pointer; }
.dj--linked h3 a { text-decoration: none; }
.dj--linked h3 a::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.dj--linked:focus-within { outline: 2px solid var(--white); outline-offset: -2px; }
.dj--linked h3 a:focus-visible { outline: none; }

/* --- Events ---------------------------------------------------- */
.ev {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr) auto;
  gap: 16px 32px; align-items: center;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.ev:last-child { border-bottom: 1px solid var(--line); }
.ev .date { font-size: clamp(34px, 4vw, 48px); line-height: 1; font-variant-numeric: tabular-nums; }
.ev .date small {
  display: block; font-family: var(--mono); font-stretch: normal; font-weight: 400;
  font-size: 12px; letter-spacing: .24em; color: var(--grey); margin-top: 8px;
}
.ev h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: .06em; text-transform: uppercase; }
.ev p { margin: 0; color: var(--grey); font-size: 14px; }
.ev .tba, .ev-visual .tba {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); border: 1px solid var(--line);
  padding: 10px 14px; white-space: nowrap;
}
.ev--past { opacity: .6; }

/* Angekuendigtes Event mit Key Visual: das Bild spricht, darunter nur der
   Knopf oder der Hinweis. */
.ev-visual { margin: 0; padding: 28px 0; border-top: 1px solid var(--line); }
.ev-visual:last-child { border-bottom: 1px solid var(--line); }
.ev-visual .visual { margin: 0; }
.ev-visual figcaption { margin-top: 16px; display: flex; }

/* Ort und Anfahrt beim Ticketkauf. */
.where { margin: -18px 0 28px; font-size: 14px; letter-spacing: .04em; }

/* Key Visual eines angekuendigten Events, unter der Liste. */
.visual { display: block; width: 100%; height: auto; margin-top: clamp(24px, 4vw, 44px); }
@media (max-width: 720px) {
  .ev { grid-template-columns: 1fr; }
  .ev .btn, .ev .tba { justify-self: start; }
}

/* --- The code -------------------------------------------------- */
.rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px; margin: 0;
}
.rules div { background: var(--ink); padding: 26px; min-width: 0; }
.rules dt { font-size: 20px; line-height: 1.05; margin-bottom: 10px; }
.rules dd { margin: 0; color: var(--grey); font-size: 14px; }

/* --- Kontaktformular ------------------------------------------ */
.cform { max-width: 760px; }
.cform__row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0 20px;
}
.cform__field { margin: 0 0 18px; }
.cform label,
.cform__consent label {
  display: block; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey); margin-bottom: 7px;
}
.cform input[type="text"],
.cform input[type="email"],
.cform select,
.cform textarea {
  width: 100%;
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size: 16px; font-family: var(--mono);
  color: var(--white); background: var(--ink);
  border: 1px solid var(--line); border-radius: 0;
  padding: 13px 14px; min-height: 48px;
  -webkit-appearance: none; appearance: none;
}
.cform textarea { min-height: 150px; resize: vertical; line-height: 1.5; }
.cform select {
  /* Eigener Pfeil, weil appearance:none den systemeigenen entfernt. */
  background-image: linear-gradient(45deg, transparent 50%, var(--grey) 50%),
                    linear-gradient(135deg, var(--grey) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.cform input:focus,
.cform select:focus,
.cform textarea:focus { outline: none; border-color: var(--white); }
.cform input::placeholder,
.cform textarea::placeholder { color: rgba(154, 154, 154, .6); }

/* Einwilligung: Kasten und Text nebeneinander, Text normal gesetzt. */
.cform__consent {
  display: grid; grid-template-columns: auto 1fr;
  gap: 12px; align-items: start; margin: 4px 0 22px;
}
.cform__consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--white); }
.cform__consent label {
  margin: 0; text-transform: none; letter-spacing: 0;
  font-size: 13px; line-height: 1.5;
}
.cform__consent a { color: var(--white); }
.cform__submit { margin: 0; }
.cform__submit .btn { min-height: 50px; }

/* Koederfeld: fuer Besucher unerreichbar, fuer Bots sichtbar. */
.cform__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Anlaufstellen ueber dem Formular */
.clist { margin: 0 0 clamp(32px, 5vw, 52px); max-width: 760px; }
.clist__row {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 6px 32px; padding: 18px 0; border-top: 1px solid var(--line);
}
.clist__row:last-child { border-bottom: 1px solid var(--line); }
.clist dt {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--grey); padding-top: 3px;
}
.clist dd { margin: 0; }
.clist dd a { color: var(--white); font-weight: 700; overflow-wrap: anywhere; }

/* Rueckmeldung nach dem Absenden */
.formnote {
  border: 1px solid var(--line); border-left-width: 4px;
  padding: 14px 16px; margin: 0 0 24px; max-width: 760px; font-size: 14px;
}
.formnote--ok  { border-left-color: var(--white); }
.formnote--err { border-left-color: var(--red); }

/* --- Fußbereich ------------------------------------------------ */
footer { padding-block: 40px 56px; color: var(--grey); font-size: 12px; letter-spacing: .08em; }
footer .wrap {
  display: flex; flex-wrap: wrap; gap: 16px 32px;
  justify-content: space-between; align-items: center;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
footer img.colon { height: 40px; width: auto; display: block; }
footer a { text-decoration: none; }
footer a:hover { color: var(--white); }
.footer-legal {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 6px 20px; margin: 0; padding: 0;
}

/* --- Inhaltsseiten (Impressum, Datenschutz …) ------------------- */
.entry { padding-block: clamp(32px, 5vw, 64px); }
.entry__title {
  font-size: clamp(30px, 5.4vw, 60px); line-height: .95; letter-spacing: -.01em;
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.entry__content { max-width: 70ch; }
.entry__content a { color: var(--white); }
.entry__content h2, .entry__content h3 {
  text-transform: uppercase; letter-spacing: .08em; margin-top: 2em;
}
/* Tabellen und Codebloecke aus Rechtstexten duerfen scrollen,
   statt die Seite zu verbreitern. */
.entry__content table,
.entry__content pre { display: block; max-width: 100%; overflow-x: auto; }

/* --- DJ-Profil --------------------------------------------------
   Die Bildspalte ist bewusst fest und nicht flexibel: Sonst faellt das
   Portrait je nach verfuegbarem Platz unterschiedlich gross aus und die
   Profile sehen von DJ zu DJ anders aus. */
.profile { padding-block: clamp(32px, 5vw, 72px); }
.profile__grid {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
}
.profile__media {
  background: var(--ink);
  width: 360px; max-width: 100%;
  aspect-ratio: 4 / 5;   /* entspricht den 800x1000 der Portraits */
  overflow: hidden;
}
.profile__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1) contrast(1.05);
}
@media (max-width: 52rem) {
  .profile__grid { grid-template-columns: 1fr; }
  .profile__media { width: min(320px, 100%); }
}
.profile__floor {
  margin: 0 0 12px;
  font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--grey);
}
.profile__name {
  margin: 0; font-size: clamp(32px, 6vw, 64px); line-height: .95;
  letter-spacing: -.01em; overflow-wrap: anywhere;
}
.profile__origin {
  margin: 12px 0 0;
  font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--grey);
}
.profile__clubs {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.profile__clubs li {
  border: 1px solid var(--line); padding: 6px 12px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}
.profile__text { margin-top: clamp(20px, 3vw, 32px); max-width: 68ch; }
.profile__text p { margin: 0 0 1.1em; }
.profile__text a { color: var(--white); }
.profile__text blockquote { margin: 0 0 1.4em; padding-left: 16px; border-left: 2px solid var(--white); color: var(--white); font-weight: 700; }
.profile__text blockquote p { margin: 0; }
.profile__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3vw, 32px); }


/* ===========================================================
   Einwilligung (Complianz)
   Das Plugin bringt eigene Stile mit, die hell und rund sind.
   Hier bekommt es den Look der Seite: schwarz, kantig, Mono.
   Weiss gefuellt ist nur die Zustimmung.
   =========================================================== */

#cmplz-cookiebanner-container .cmplz-cookiebanner {
  font-family: var(--mono) !important;
  background: var(--black) !important;
  color: var(--white) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .7) !important;
}
.cmplz-cookiebanner .cmplz-title,
.cmplz-cookiebanner .cmplz-category-title {
  color: var(--white) !important;
  text-transform: uppercase; letter-spacing: .1em; font-weight: 700;
}
.cmplz-cookiebanner .cmplz-message,
.cmplz-cookiebanner .cmplz-description,
.cmplz-cookiebanner .cmplz-category .cmplz-description { color: var(--grey) !important; }
.cmplz-cookiebanner .cmplz-divider { border-color: var(--line) !important; }
.cmplz-cookiebanner .cmplz-category {
  background: var(--ink) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
}

.cmplz-cookiebanner .cmplz-btn,
#cmplz-manage-consent .cmplz-btn {
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  text-transform: uppercase; letter-spacing: .12em;
  border-radius: 0 !important;
  min-height: 44px;              /* fingerfreundlich */
  display: inline-flex !important;
  align-items: center; justify-content: center;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background: var(--white) !important;
  border: 1px solid var(--white) !important;
  color: var(--black) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background: transparent !important;
  color: var(--white) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--white) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-deny:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences:hover,
.cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences:hover { border-color: var(--white) !important; }

.cmplz-cookiebanner .cmplz-link,
.cmplz-cookiebanner a { color: var(--white) !important; }

.cmplz-cookiebanner .cmplz-category-toggle .cmplz-slider,
.cmplz-cookiebanner input:checked + .cmplz-slider { border-radius: 0 !important; }
.cmplz-cookiebanner input:checked + .cmplz-slider { background-color: var(--white) !important; }

/* Der dauerhafte Knopf „Manage consent“: dezent und kantig. */
#cmplz-manage-consent .cmplz-manage-consent {
  font-family: var(--mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--black) !important;
  color: var(--grey) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
}
#cmplz-manage-consent .cmplz-manage-consent:hover {
  color: var(--white) !important;
  border-color: var(--white) !important;
}


/* ===========================================================
   Ticketleiste (nur Telefon)
   Viele kaufen vom Handy. Der Kauf soll von jeder Stelle der
   Seite einen Fingertipp entfernt sein.
   =========================================================== */

.ticketbar { display: none; }

@media (max-width: 48rem) {
  .ticketbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: center; gap: 12px;
    padding: 10px var(--gut);
    /* Unterer Rand des iPhone-Home-Indikators */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(6, 6, 6, .94);
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  /* Solange ein grosser Kaufknopf der Seite zu sehen ist, bleibt die Leiste
     weg — sonst stuenden zwei Knoepfe fuer dasselbe uebereinander. */
  .ticketbar { transition: transform .25s ease, visibility 0s; }
  .ticketbar.is-off { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  @media (prefers-reduced-motion: reduce) { .ticketbar, .ticketbar.is-off { transition: none; } }

  .ticketbar__info {
    display: flex; flex-direction: column;
    min-width: 0;          /* damit der Name kuerzen darf */
    line-height: 1.25;
  }
  .ticketbar__date {
    font-weight: 700; font-size: 13px; letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
  }
  .ticketbar__name {
    color: var(--grey); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ticketbar__btn {
    margin-left: auto; flex: 0 0 auto;
    min-height: 48px; display: inline-flex; align-items: center;
    padding: 0 20px; font-size: 13px;
  }

  /* Platz schaffen, damit die Leiste nichts verdeckt. */
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }

  /* Der Einwilligungsknopf und das Banner duerfen nicht auf der Leiste liegen. */
  #cmplz-manage-consent { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    margin-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
  #cmplz-manage-consent .cmplz-manage-consent { padding: 8px 10px !important; opacity: .82; }
}

/* Auf sehr niedrigen Schirmen (Querformat) wuerde die Leiste zu viel
   wegnehmen — dort bleibt sie aus. */
@media (max-width: 48rem) and (max-height: 26rem) {
  .ticketbar { display: none; }
  body { padding-bottom: 0; }
}


/* ===========================================================
   Mobil
   =========================================================== */

@media (max-width: 48rem) {

  [id] { scroll-margin-top: 104px; }

  /* Kopfzeile: Wortmarke und Navigation untereinander, damit beides
     lesbar bleibt statt sich auf einer Zeile zu quetschen. */
  .top .wrap { padding-block: 10px; row-gap: 4px; }
  .brand img { height: 16px; }
  .top nav { width: 100%; margin-left: 0; gap: 2px 16px; font-size: 11px; letter-spacing: .1em; }
  .top nav a { display: inline-flex; align-items: center; min-height: 40px; padding-block: 0; }
  /* Am Telefon gibt es immer genau einen Kaufknopf im Bild: oben den grossen
     im Kopfbild, danach die feste Leiste unten. Der Knopf in der Navigation
     waere der dritte und entfaellt hier. */
  .top nav a.buy { display: none; }
  /* Der Dresscode-Link sitzt mobil oben rechts neben der Wortmarke. */
  .top .wrap { position: relative; }
  .top nav a.dress {
    position: absolute; top: 6px; right: max(var(--gut), env(safe-area-inset-right, 0px));
    min-height: 30px; padding: 0 8px; font-size: 10px;
  }
  .clist__row { grid-template-columns: 1fr; padding: 14px 0; }
  .clist dt { padding-top: 0; }
  .clist dd a { display: inline-flex; align-items: center; min-height: 40px; }

  section { padding-block: 48px; }
  .head { margin-bottom: 24px; }
  .lede { margin: -8px 0 26px; font-size: 14px; }

  /* Hero: Datum, Einlass und Ort untereinander statt in einer
     gequetschten Zeile; Knoepfe ueber die volle Breite. */
  .hero .in { gap: 20px; padding-block: 48px 32px; }
  .tag { letter-spacing: .2em; font-size: 12px; }
  .facts { flex-direction: column; gap: 2px 0; font-size: 13px; }
  .facts b { font-size: 16px; }
  .cta, .shops { gap: 10px; }
  .cta .btn, .shops .btn { flex: 1 1 auto; text-align: center; }

  /* Am Telefon bricht die Zeile um; ohne Trennpunkte steht dann kein
     verwaister Punkt am Zeilenanfang. */
  .strip { font-size: 11px; letter-spacing: .14em; gap: 4px 18px; padding-block: 12px; }
  .strip li + li::before { content: none; }

  .newsbar__inner { gap: 12px; }
  .newsbar__btn { width: 100%; justify-content: center; min-height: 50px; }
  .soon { width: 100%; }
  .soon > summary { width: 100%; justify-content: center; }
  .soon__note { position: static; margin-top: 8px; text-align: center; white-space: normal; }

  /* Ticket-Stufen: Name links, Preis rechts — der Preis ist die
     Information, die zaehlt. */
  .tiers { border: 0; gap: 2px; grid-template-columns: 1fr; }
  .tier {
    border: 0; margin: 0; background: var(--ink); padding: 16px 18px;
    grid-template-columns: 1fr auto;
    grid-template-areas: "name preis" "hinweis preis";
    align-items: center; gap: 2px 16px;
  }
  .tier h3     { grid-area: name; }
  .tier .price { grid-area: preis; font-size: 32px; }
  .tier p      { grid-area: hinweis; }
  .shops .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }

  /* DJ-Kacheln zweispaltig — acht Namen untereinander sind sonst
     eine sehr lange Strecke. */
  .djs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 36px; }
  .dj .cn { top: 10px; left: 10px; font-size: 10px; gap: 7px; }
  .dj .cn i { width: 8px; height: 15px; }
  .dj .cap { padding: 44px 10px 10px; }
  .dj h3 { font-size: 15px; }
  .dj .cap p { font-size: 9px; margin-top: 6px; line-height: 1.5; }

  .ev { padding: 22px 0; gap: 10px; }
  .ev .date { display: flex; align-items: baseline; gap: 12px; font-size: 30px; }
  .ev .date small { margin: 0; font-size: 11px; }
  .ev .btn, .ev .tba, .ev-visual .btn, .ev-visual .tba {
    width: 100%; min-height: 48px; text-align: center;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .rules { grid-template-columns: 1fr; }
  .rules div { padding: 20px 18px; }
  .rules dt { font-size: 17px; }

  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .cform__submit .btn { width: 100%; text-align: center; }
  .profile__links .btn { flex: 1 1 auto; text-align: center; min-height: 48px; }

  /* Fusszeile: untereinander statt auseinandergezogen. */
  footer .wrap { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-legal { gap: 0 18px; }
  .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 22rem) {
  /* Sehr schmale Geraete: Kacheln wieder einspaltig, sonst wird es gequetscht. */
  .djs { grid-template-columns: 1fr; }
  .btn { padding: 13px 16px; letter-spacing: .08em; }
}

@media (hover: none) and (pointer: coarse) {
  a, button { -webkit-tap-highlight-color: rgba(255, 255, 255, .18); }
}

/* Sehr schmale Handys: Navigation enger, Dresscode-Link ohne Logo. */
@media (max-width: 22.5rem) {
  .top nav { gap: 2px 11px; letter-spacing: .05em; }
  .top nav a.dress img { display: none; }
}