/* ===========================================================
   Revolver — Layout
   Übernimmt die Vorlage REVOLVER_Website unverändert in der
   Wirkung; ergänzt nur, was WordPress zusätzlich ausgibt.
   =========================================================== */

/* --- Schriften, lokal gehostet ------------------------------ */
@font-face {
  font-family: "Cousine"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cousine-400-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: "Cousine"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/cousine-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cousine"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cousine-700-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: "Cousine"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cousine-700-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Grundgerüst -------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
}
a { color: inherit; }
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--neon);
  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; }

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

.skip-link {
  position: absolute; left: -9999px;
  background: var(--neon); 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;
}

/* --- Kopfbereich -------------------------------------------- */
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--black);
  border-bottom: 1px solid var(--line);
}
.top .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap; padding-block: 14px;
}
.top img { height: 22px; width: auto; display: block; }
.top nav {
  display: flex; gap: 6px 22px; flex-wrap: wrap;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
}
.top nav a { text-decoration: none; padding-block: 4px; }
.top nav a:hover { color: var(--neon); }
.top nav a.buy {
  background: var(--neon); color: var(--black);
  font-weight: 700; padding: 4px 12px;
}

/* Subscribe traegt das Rot, Tickets das Neon — zwei Handlungen, zwei
   Farben, damit sie sich nicht gegenseitig entwerten. */
.top nav a.sub {
  background: var(--red);
  color: var(--white);
  font-weight: 700;
  padding: 4px 12px;
}
.top nav a.sub:hover { background: var(--white); color: var(--black); }
.top nav a.buy:hover { background: var(--white); color: var(--black); }

/* --- Hero ---------------------------------------------------- */
/* Das Key Visual ist hochformatig (1600x1986). Telefone bekommen einen
   quadratischen Ausschnitt, breite Schirme ein Querformat. Die Hoehe ist
   gedeckelt, damit Titel und Ticket-Knopf ohne Scrollen sichtbar bleiben.
   object-position haelt die Spitze der Pyramide im Bild. */
.hero { position: relative; border-bottom: 1px solid var(--line); }
.hero__media { position: relative; overflow: hidden; }

.hero .pic {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  max-height: 52vh;
  max-height: 52svh;
  min-height: 280px;
  object-fit: cover;
  object-position: 50% 28%;
}
@media (min-width: 40rem) {
  .hero .pic { aspect-ratio: 3 / 2; max-height: 68vh; max-height: 68svh; object-position: 50% 30%; }
}
@media (min-width: 64rem) {
  .hero .pic { aspect-ratio: 16 / 7; max-height: 78vh; max-height: 78svh; object-position: 50% 34%; }
}

.hero .fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(5,5,5,.38) 0%, rgba(5,5,5,.10) 36%, rgba(5,5,5,.70) 80%, var(--black) 100%);
}

/* Die Wortmarke liegt mittig ueber dem Bild, nicht darunter. */
.hero__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-inline: var(--gut);
  pointer-events: none;
}
/* Die Huelle traegt die Breite und den Schatten, damit alle Ebenen
   deckungsgleich uebereinander liegen. */
.hero__mark .glitch {
  position: relative;
  display: block;
  width: min(82%, 620px);
  filter: drop-shadow(0 3px 22px rgba(0, 0, 0, .9));
  animation: rev-tear 4.5s steps(1, end) infinite;
}
.hero__mark .logo {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
}
@media (min-width: 64rem) {
  .hero__mark .glitch { width: min(58%, 820px); }
}

/* Zwei Farbkanaele, aus derselben PNG als Maske geschnitten. Sie laufen
   gegenlaeufig auseinander — das ist der Effekt, den ein gestoertes
   Videosignal erzeugt. Kein zusaetzlicher Download. */
.hero__mark .glitch__a,
.hero__mark .glitch__b {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat;
  mask: var(--logo) center / 100% 100% no-repeat;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 3;
}
.hero__mark .glitch__a {
  background: var(--neon);
  animation: rev-chan-a 4.5s steps(1, end) infinite;
}
.hero__mark .glitch__b {
  /* Kein zweiter Farbton: Diese Ebene schneidet dunkle Streifen heraus,
     wie weggebrochene Bilddaten. Deshalb normal statt screen. */
  background: var(--black);
  mix-blend-mode: normal;
  animation: rev-chan-b 4.5s steps(1, end) infinite;
}

/* Scanlines und ein heller Riss, nur waehrend des Ausbruchs. */
.hero__mark .glitch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, .55) 0 2px,
    transparent 2px 4px
  );
  animation: rev-scan 4.5s steps(1, end) infinite;
}
.hero__mark .glitch::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  height: 10%;
  top: 44%;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  background: var(--white);
  mix-blend-mode: overlay;
  animation: rev-slice 4.5s steps(1, end) infinite;
}

/* --- Ablauf ---------------------------------------------------
   Rund vier Sekunden Ruhe, dann ein halbsekuendiger Ausbruch.
   steps(1, end) sorgt fuer harte Schnitte statt weicher Uebergaenge —
   ein echter Signalfehler blendet nicht auf. */

@keyframes rev-tear {
  0%, 87%, 100% { transform: translate3d(0, 0, 0) skewX(0deg); }
  88%   { transform: translate3d(-9px, 0, 0) skewX(-1.2deg); }
  89.5% { transform: translate3d(7px, 1px, 0) skewX(.8deg); }
  91%   { transform: translate3d(-4px, -1px, 0) skewX(0deg); }
  92.5% { transform: translate3d(5px, 0, 0) skewX(1.4deg); }
  94%   { transform: translate3d(0, 0, 0) skewX(0deg); }
}

@keyframes rev-chan-a {
  0%, 87%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  88%   { opacity: 1; transform: translate3d(-14px, -3px, 0); clip-path: inset(4% 0 72% 0); }
  89.5% { opacity: 1; transform: translate3d(11px, 2px, 0);   clip-path: inset(36% 0 40% 0); }
  91%   { opacity: 1; transform: translate3d(-16px, 1px, 0);  clip-path: inset(62% 0 14% 0); }
  92.5% { opacity: 1; transform: translate3d(9px, -2px, 0);   clip-path: inset(18% 0 58% 0); }
  94%   { opacity: 0; }
}

@keyframes rev-chan-b {
  0%, 87%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  88%   { opacity: 1; transform: translate3d(13px, 3px, 0);   clip-path: inset(22% 0 56% 0); }
  89.5% { opacity: 1; transform: translate3d(-12px, -2px, 0); clip-path: inset(54% 0 24% 0); }
  91%   { opacity: 1; transform: translate3d(15px, -1px, 0);  clip-path: inset(8% 0 76% 0); }
  92.5% { opacity: 1; transform: translate3d(-8px, 2px, 0);   clip-path: inset(70% 0 6% 0); }
  94%   { opacity: 0; }
}

@keyframes rev-scan {
  0%, 87%, 100% { opacity: 0; }
  88%   { opacity: .45; }
  90%   { opacity: .18; }
  92%   { opacity: .4; }
  94%   { opacity: 0; }
}

@keyframes rev-slice {
  0%, 87%, 100% { opacity: 0; }
  88.5% { opacity: .85; top: 30%; height: 7%; }
  90%   { opacity: 0; }
  91.5% { opacity: .7; top: 58%; height: 5%; }
  93%   { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark .glitch,
  .hero__mark .glitch__a,
  .hero__mark .glitch__b,
  .hero__mark .glitch::before,
  .hero__mark .glitch::after { animation: none; opacity: 0; }
  .hero__mark .glitch { opacity: 1; }
}

.hero .in {
  position: relative;
  padding-top: clamp(18px, 2.5vw, 30px);
  padding-bottom: clamp(26px, 4vw, 48px);
}
.hero h1 {
  font-size: clamp(26px, 5.2vw, 58px); line-height: 1.05;
  margin: 0;
  letter-spacing: .02em; text-wrap: balance;
}
.hero h1 span { color: var(--neon); }

.facts {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin: 14px 0 0; padding: 0; list-style: none;
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: .08em; text-transform: uppercase;
}
.facts li b { color: var(--neon); font-weight: 700; }

.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }


.btn {
  display: inline-block; text-decoration: none; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; font-size: 15px;
  padding: 14px 22px;
  border: 2px solid var(--neon); background: var(--neon); color: var(--black);
  cursor: pointer; font-family: inherit;
}
.btn:hover { background: var(--white); border-color: var(--white); }
.btn.ghost { background: transparent; color: var(--white); border-color: var(--white); }
.btn.ghost:hover { background: var(--white); color: var(--black); }

/* Rote Variante — bislang nur fuer den Newsletter, damit sie sich vom
   Ticket-Knopf unterscheidet und nicht mit ihm konkurriert. */
.btn.red {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn.red:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* --- Regelband ----------------------------------------------- */
.strip {
  background: var(--neon); color: var(--black);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  font-size: clamp(12px, 1.5vw, 15px);
}
.strip .wrap {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 4px 26px; padding-block: 12px; text-align: center;
}

/* --- Abschnitte ---------------------------------------------- */
section { padding-block: clamp(48px, 7vw, 88px); border-bottom: 1px solid var(--line); }
.head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin: 0 0 clamp(24px, 4vw, 40px);
  font-size: clamp(26px, 4.6vw, 48px); line-height: 1.1;
  letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
}
.head .box { background: var(--neon); color: var(--black); padding: .04em .28em; }
.lede {
  max-width: 62ch; color: var(--grey);
  margin: -12px 0 clamp(24px, 4vw, 36px);
}

/* --- Tickets -------------------------------------------------- */
.tiers {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0; border: 1px solid var(--line);
}
.tier {
  padding: 24px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 -1px -1px 0;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
}
.tier h3 {
  margin: 0; font-size: 14px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grey); font-weight: 400;
}
.tier .price {
  font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1;
  color: var(--neon); font-variant-numeric: tabular-nums;
}
.tier p { margin: 0; font-size: 14px; color: var(--grey); }
.tier--sold .price { color: var(--grey); text-decoration: line-through; }

.shops { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.small { font-size: 13px; color: var(--grey); margin: 16px 0 0; max-width: 70ch; }

/* --- Line-up --------------------------------------------------- */
.floor {
  font-size: 14px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey); margin: 0 0 14px;
  display: flex; align-items: center; gap: 14px;
}
.floor::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.djs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px; margin: 0 0 clamp(32px, 5vw, 52px); padding: 0; list-style: none;
}
.djs:last-of-type { margin-bottom: 0; }

.dj {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--ink); border: 1px solid var(--line);
}
.dj .ph {
  aspect-ratio: 4 / 5; background: var(--black);
  position: relative; overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.dj .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dj .ph .mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: clamp(90px, 14vw, 150px); font-weight: 700;
  color: var(--line); line-height: 1; user-select: none;
}
.dj .tx { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.dj h3 {
  margin: 0; font-size: 22px; line-height: 1.1;
  color: var(--neon); letter-spacing: .02em; overflow-wrap: anywhere;
}
.dj .from {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); margin: 0;
}
.dj ul { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 1.5; color: var(--white); }
.dj ul li::before { content: "· "; color: var(--neon); }

/* --- Events ---------------------------------------------------- */
.events { display: grid; gap: 16px; }
.ev {
  display: grid;
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto;
  gap: 16px 28px; align-items: center;
  padding: 24px; border: 1px solid var(--line); background: var(--ink);
}
.ev .date {
  font-size: clamp(30px, 4vw, 44px); font-weight: 700; line-height: 1;
  color: var(--neon); font-variant-numeric: tabular-nums;
}
.ev .date small {
  display: block; font-size: 13px; letter-spacing: .2em;
  color: var(--grey); font-weight: 400; margin-top: 8px;
}
.ev h3 {
  margin: 0 0 6px; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.15;
  text-transform: uppercase; letter-spacing: .04em;
}
.ev p { margin: 0; color: var(--grey); font-size: 14px; }
.ev .tba {
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 10px 14px;
  color: var(--grey); white-space: nowrap;
}
.ev--past { opacity: .62; }
.ev--past .date { color: var(--grey); }

.xmas {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 16px;
  border: 1px solid var(--line);
}

@media (max-width: 720px) {
  .ev { grid-template-columns: 1fr; }
  .ev .btn, .ev .tba { justify-self: start; }
}

/* --- Info ------------------------------------------------------ */
.rules {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px 40px; margin: 0;
}
.rules div { min-width: 0; }
.rules dt {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--neon); margin-bottom: 6px;
}
.rules dd { margin: 0; color: var(--grey); font-size: 15px; }

/* --- Fußbereich ------------------------------------------------ */
footer { padding-block: 36px 48px; color: var(--grey); font-size: 13px; }
footer .wrap {
  display: flex; flex-wrap: wrap; gap: 12px 32px;
  justify-content: space-between; align-items: center;
}
footer img { height: 16px; width: auto; opacity: .8; }
footer a { text-decoration: none; }
footer a:hover { color: var(--neon); }
.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(26px, 4.6vw, 48px); line-height: 1.1;
  letter-spacing: .12em; text-transform: uppercase;
  margin: 0 0 clamp(20px, 3vw, 32px);
}
.entry__content { max-width: 70ch; }
.entry__content a { color: var(--neon); }
.entry__content h2, .entry__content h3 {
  text-transform: uppercase; letter-spacing: .08em; margin-top: 2em;
}


/* ===========================================================
   Mobil
   Getrennter Block, damit die Regeln nachvollziehbar bleiben.
   =========================================================== */

/* Nichts darf die Seite seitlich aufziehen. Das Hero bleibt ausgenommen,
   weil es bewusst ueber die volle Breite laeuft. */
html, body { overflow-x: clip; }

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

/* 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;
}

@media (max-width: 48rem) {

  /* Fingerfreundliche Ziele: mindestens 44 px hoch.
     Die Navigation war mit 4 px Innenabstand kaum zu treffen. */
  .top nav { gap: 2px 18px; width: 100%; }
  .top nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: 2px;
  }
  .top nav a.buy { padding: 0 14px; }

  .site-footer__legal a,
  .footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Kopfzeile: Logo und Navigation untereinander, damit beides
     lesbar bleibt statt sich auf einer Zeile zu quetschen. */
  .top .wrap { padding-block: 10px; row-gap: 2px; }
  .top img { height: 20px; }

  /* Das Regelband wird auf schmalen Schirmen schnell unruhig. */
  .strip .wrap { gap: 2px 18px; padding-block: 10px; }

  /* Ticket-Stufen: volle Breite, keine doppelten Trennlinien. */
  .tier { padding: 18px; }

  /* Event-Zeilen stehen bereits einspaltig; hier nur die Luft. */
  .ev { padding: 18px; gap: 10px; }
  .ev .date small { margin-top: 5px; }

  /* Knoepfe sollen auf dem Telefon die volle Breite nutzen duerfen,
     aber nicht ueber den Rand hinausragen. */
  .cta, .shops { gap: 10px; }
  .cta .btn, .shops .btn { flex: 1 1 auto; text-align: center; }
}

@media (max-width: 26rem) {
  /* Sehr schmale Geraete (iPhone SE und aehnliche). */
  .btn { padding: 13px 16px; letter-spacing: .08em; }
  .head { letter-spacing: .06em; }
  .tier .price { font-size: 38px; }
}

/* Geraete ohne praezisen Zeiger bekommen durchgehend groessere Ziele. */
@media (hover: none) and (pointer: coarse) {
  .dj h3, .ev h3 { -webkit-tap-highlight-color: rgba(225, 249, 2, .25); }
  a, button { -webkit-tap-highlight-color: rgba(225, 249, 2, .25); }
}


/* ===========================================================
   Einwilligung (Complianz)
   Das Plugin bringt eigene Stile mit, die hell und rund sind.
   Hier bekommt es den Revolver-Look: schwarz, kantig, Cousine,
   Neon nur fuer die Zustimmung.
   =========================================================== */

/* --- Das Banner selbst --------------------------------------- */
#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;
}

/* --- Knoepfe -------------------------------------------------- */
.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;
}

/* Zustimmen traegt als einziges das Neon. */
.cmplz-cookiebanner .cmplz-btn.cmplz-accept {
  background: var(--neon) !important;
  border: 2px solid var(--neon) !important;
  color: var(--black) !important;
}
.cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover {
  background: var(--white) !important;
  border-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: 2px 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(--neon) !important;
  color: var(--neon) !important;
}

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

/* --- Schalter der Kategorien ---------------------------------- */
.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(--neon) !important;
}

/* --- Der dauerhafte Knopf „Manage consent“ -------------------- */
/* Lag als weisser Kasten ueber dem Ticket-Knopf. Jetzt dezent,
   kantig und im Markenbild. */
#cmplz-manage-consent .cmplz-manage-consent {
  font-family: var(--mono) !important;
  font-size: 12px !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(--neon) !important;
  border-color: var(--neon) !important;
}

@media (max-width: 48rem) {
  /* Auf dem Telefon sass der Knopf auf dem Ticket-Knopf.
     Er rutscht an den Rand und wird kleiner. */
  #cmplz-manage-consent .cmplz-manage-consent {
    font-size: 11px !important;
    padding: 8px 10px !important;
    opacity: .82;
  }
}


/* ===========================================================
   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: #050505;   /* Rueckfall fuer Browser ohne color-mix */
    background: color-mix(in srgb, var(--black) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  .ticketbar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* damit der Name kuerzen darf */
    line-height: 1.2;
  }
  .ticketbar__date {
    color: var(--neon);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
  }
  .ticketbar__name {
    color: var(--grey);
    font-size: 12px;
    letter-spacing: .06em;
    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: 14px;
  }

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

  /* Der Einwilligungsknopf darf nicht auf der Leiste liegen. */
  #cmplz-manage-consent {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Das Einwilligungsbanner ebenfalls daruebersetzen. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    margin-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 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, zweiter Durchgang
   =========================================================== */

/* Ankerziele: Die klebende Kopfzeile wuerde sonst die Ueberschrift
   verdecken, auf die gerade gesprungen wurde. */
[id] { scroll-margin-top: 84px; }
@media (max-width: 48rem) { [id] { scroll-margin-top: 108px; } }

/* Randbereiche moderner Telefone (Notch im Querformat, Home-Indikator). */
.top .wrap {
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
footer .wrap {
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}

/* Kein Zoomsprung beim Drehen des Geraets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Fluessiges Scrollen auf Beruehrungsgeraeten. */
@media (hover: none) {
  body { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 48rem) {

  /* Die Ticket-Knoepfe im Abschnitt sollen nebeneinander passen,
     statt dass einer alleine umbricht. */
  .shops .btn { flex: 1 1 46%; min-height: 48px; }

  /* Preisstufen: Der Preis ist die Information, die zaehlt. */
  .tier .price { font-size: 44px; }
  .tier h3 { font-size: 13px; }

  /* Event-Zeile: Datum und Titel enger zusammen, Knopf volle Breite. */
  .ev { gap: 12px; }
  .ev .btn, .ev .tba {
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* DJ-Kacheln zweispaltig statt einspaltig — acht Namen untereinander
     sind sonst eine sehr lange Strecke. */
  .djs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dj .tx { padding: 12px; gap: 6px; }
  .dj h3 { font-size: 17px; }
  .dj ul { font-size: 12px; }
  .dj .ph .mark { font-size: clamp(60px, 18vw, 110px); }
}

@media (max-width: 26rem) {
  /* Auf sehr schmalen Geraeten wieder einspaltig, sonst wird es gequetscht. */
  .djs { grid-template-columns: 1fr; }
  .shops .btn { flex: 1 1 100%; }
}


/* ===========================================================
   DJ-Profil
   =========================================================== */

.profile { padding-block: clamp(32px, 5vw, 72px); }

/* 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__grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 52rem) {
  .profile__grid { grid-template-columns: 1fr; }
}

.profile__media {
  border: 1px solid var(--line);
  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;
}
@media (max-width: 52rem) {
  .profile__media { width: min(320px, 100%); }
}

.profile__floor {
  margin: 0 0 10px;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey);
}
.profile__name {
  margin: 0;
  font-size: clamp(30px, 6vw, 60px); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--neon);
  overflow-wrap: anywhere;
}
.profile__origin {
  margin: 10px 0 0;
  font-size: 13px; letter-spacing: .2em; 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: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
}

.profile__text {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 68ch;
  color: var(--white);
}
.profile__text p { margin: 0 0 1.1em; }
.profile__text a { color: var(--neon); }

.profile__links {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}
@media (max-width: 48rem) {
  .profile__links .btn { flex: 1 1 auto; text-align: center; min-height: 48px; }
}

/* Verlinkte Kacheln im Line-up */
.dj--linked h3 a { text-decoration: none; }
.dj--linked:hover { border-color: var(--neon); }
.dj--linked h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dj--linked .ph { cursor: pointer; }


/* ===========================================================
   Newsletter-Leiste
   Sitzt direkt unter dem Regelband. Schlank gehalten, damit sie
   den Ticketabschnitt nicht nach unten druengt.
   =========================================================== */

.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: 14px;
  padding: 12px 24px;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
}

@media (max-width: 48rem) {
  .newsbar__inner { gap: 12px; }
  .newsbar__btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
}

/* ===========================================================
   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: #050505;   /* Rueckfall fuer Browser ohne color-mix */
    background: color-mix(in srgb, var(--black) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }

  .ticketbar__info {
    display: flex;
    flex-direction: column;
    min-width: 0;          /* damit der Name kuerzen darf */
    line-height: 1.2;
  }
  .ticketbar__date {
    color: var(--neon);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    font-variant-numeric: tabular-nums;
  }
  .ticketbar__name {
    color: var(--grey);
    font-size: 12px;
    letter-spacing: .06em;
    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: 14px;
  }

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

  /* Der Einwilligungsknopf darf nicht auf der Leiste liegen. */
  #cmplz-manage-consent {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Das Einwilligungsbanner ebenfalls daruebersetzen. */
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    margin-bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* 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, zweiter Durchgang
   =========================================================== */

/* Ankerziele: Die klebende Kopfzeile wuerde sonst die Ueberschrift
   verdecken, auf die gerade gesprungen wurde. */
[id] { scroll-margin-top: 84px; }
@media (max-width: 48rem) { [id] { scroll-margin-top: 108px; } }

/* Randbereiche moderner Telefone (Notch im Querformat, Home-Indikator). */
.top .wrap {
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
footer .wrap {
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}

/* Kein Zoomsprung beim Drehen des Geraets. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Fluessiges Scrollen auf Beruehrungsgeraeten. */
@media (hover: none) {
  body { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 48rem) {

  /* Die Ticket-Knoepfe im Abschnitt sollen nebeneinander passen,
     statt dass einer alleine umbricht. */
  .shops .btn { flex: 1 1 46%; min-height: 48px; }

  /* Preisstufen: Der Preis ist die Information, die zaehlt. */
  .tier .price { font-size: 44px; }
  .tier h3 { font-size: 13px; }

  /* Event-Zeile: Datum und Titel enger zusammen, Knopf volle Breite. */
  .ev { gap: 12px; }
  .ev .btn, .ev .tba {
    width: 100%;
    text-align: center;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* DJ-Kacheln zweispaltig statt einspaltig — acht Namen untereinander
     sind sonst eine sehr lange Strecke. */
  .djs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .dj .tx { padding: 12px; gap: 6px; }
  .dj h3 { font-size: 17px; }
  .dj ul { font-size: 12px; }
  .dj .ph .mark { font-size: clamp(60px, 18vw, 110px); }
}

@media (max-width: 26rem) {
  /* Auf sehr schmalen Geraeten wieder einspaltig, sonst wird es gequetscht. */
  .djs { grid-template-columns: 1fr; }
  .shops .btn { flex: 1 1 100%; }
}


/* ===========================================================
   DJ-Profil
   =========================================================== */

.profile { padding-block: clamp(32px, 5vw, 72px); }

/* 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__grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 52rem) {
  .profile__grid { grid-template-columns: 1fr; }
}

.profile__media {
  border: 1px solid var(--line);
  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;
}
@media (max-width: 52rem) {
  .profile__media { width: min(320px, 100%); }
}

.profile__floor {
  margin: 0 0 10px;
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--grey);
}
.profile__name {
  margin: 0;
  font-size: clamp(30px, 6vw, 60px); line-height: 1;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--neon);
  overflow-wrap: anywhere;
}
.profile__origin {
  margin: 10px 0 0;
  font-size: 13px; letter-spacing: .2em; 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: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--white);
}

.profile__text {
  margin-top: clamp(20px, 3vw, 32px);
  max-width: 68ch;
  color: var(--white);
}
.profile__text p { margin: 0 0 1.1em; }
.profile__text a { color: var(--neon); }

.profile__links {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: clamp(20px, 3vw, 32px);
}
@media (max-width: 48rem) {
  .profile__links .btn { flex: 1 1 auto; text-align: center; min-height: 48px; }
}

/* Verlinkte Kacheln im Line-up */
.dj--linked h3 a { text-decoration: none; }
.dj--linked:hover { border-color: var(--neon); }
.dj--linked h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.dj--linked .ph { cursor: pointer; }


/* ===========================================================
   Newsletter
   =========================================================== */

.newsletter__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 40px);
}
.newsletter__text { flex: 1 1 320px; min-width: 0; }
.newsletter__text .head { margin-bottom: 14px; }
.newsletter__text .lede { margin: 0; }

.newsletter__btn { flex: 0 0 auto; }

@media (max-width: 48rem) {
  .newsletter__inner { gap: 20px; }
  .newsletter__btn {
    width: 100%;
    text-align: center;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ===========================================================
   Glitch auf den DJ-Kacheln
   Dieselbe Handschrift wie bei der Wortmarke: harte Schnitte,
   versetzte Streifen, getrennte Farbkanaele.
   =========================================================== */

.dj .ph { position: relative; isolation: isolate; }

/* Zwei Farbebenen ueber dem Foto. Sie zeigen dasselbe Bild, nur
   eingefaerbt und versetzt — der Kanalversatz eines gestoerten Signals. */
.dj .ph::before,
.dj .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  mix-blend-mode: screen;
}
.dj .ph::before { background: var(--neon); }
.dj .ph::after  {
  /* Dunkle Abrisse statt zweitem Farbton. */
  background: var(--black);
  mix-blend-mode: normal;
}

/* Scanlines liegen auf der Kachel selbst, damit sie ueber beiden liegen. */
.dj .ph > .scan {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.6) 0 2px, transparent 2px 4px
  );
}

@keyframes dj-img {
  0%   { transform: translate3d(0,0,0) scale(1.05); clip-path: inset(0 0 0 0); filter: none; }
  12%  { transform: translate3d(-16px,0,0) scale(1.05); clip-path: inset(10% 0 64% 0); filter: contrast(1.5) brightness(1.2); }
  24%  { transform: translate3d(14px,-2px,0) scale(1.05); clip-path: inset(44% 0 32% 0); }
  36%  { transform: translate3d(-11px,2px,0) scale(1.05); clip-path: inset(70% 0 10% 0); filter: contrast(1.4); }
  48%  { transform: translate3d(18px,0,0) scale(1.05);  clip-path: inset(2% 0 82% 0); }
  60%  { transform: translate3d(-7px,-1px,0) scale(1.05); clip-path: inset(56% 0 22% 0); }
  72%  { transform: translate3d(0,0,0) scale(1.05); clip-path: inset(0 0 0 0); filter: none; }
  100% { transform: translate3d(0,0,0) scale(1.05); clip-path: inset(0 0 0 0); }
}

@keyframes dj-chan-a {
  0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  12% { opacity: .9; transform: translate3d(-13px,0,0); clip-path: inset(12% 0 62% 0); }
  28% { opacity: .75; transform: translate3d(10px,0,0); clip-path: inset(48% 0 28% 0); }
  44% { opacity: .9; transform: translate3d(-15px,0,0); clip-path: inset(4% 0 80% 0); }
  60% { opacity: .7; transform: translate3d(8px,0,0);   clip-path: inset(66% 0 12% 0); }
  74% { opacity: 0; }
}

@keyframes dj-chan-b {
  0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); }
  16% { opacity: .7; transform: translate3d(12px,0,0);  clip-path: inset(30% 0 48% 0); }
  32% { opacity: .65; transform: translate3d(-14px,0,0); clip-path: inset(60% 0 18% 0); }
  50% { opacity: .7; transform: translate3d(16px,0,0);  clip-path: inset(8% 0 74% 0); }
  66% { opacity: 0; }
}

@keyframes dj-scan {
  0%, 100% { opacity: 0; }
  14% { opacity: .5; }
  34% { opacity: .2; }
  52% { opacity: .45; }
  70% { opacity: 0; }
}

/* Zeigergeraete: beim Ueberfahren */
@media (hover: hover) and (pointer: fine) {
  .dj:hover .ph img      { animation: dj-img    .62s steps(1, end) 1; }
  .dj:hover .ph::before  { animation: dj-chan-a .62s steps(1, end) 1; }
  .dj:hover .ph::after   { animation: dj-chan-b .62s steps(1, end) 1; }
  .dj:hover .ph > .scan  { animation: dj-scan   .62s steps(1, end) 1; }
}

/* Beruehrungsgeraete: beim Antippen */
@media (hover: none) {
  .dj:active .ph img     { animation: dj-img    .5s steps(1, end) 1; }
  .dj:active .ph::before { animation: dj-chan-a .5s steps(1, end) 1; }
  .dj:active .ph::after  { animation: dj-chan-b .5s steps(1, end) 1; }
  .dj:active .ph > .scan { animation: dj-scan   .5s steps(1, end) 1; }
}

/* Tastaturbedienung bekommt dieselbe Rueckmeldung. */
.dj:focus-within .ph img     { animation: dj-img    .62s steps(1, end) 1; }
.dj:focus-within .ph::before { animation: dj-chan-a .62s steps(1, end) 1; }
.dj:focus-within .ph::after  { animation: dj-chan-b .62s steps(1, end) 1; }

@media (prefers-reduced-motion: reduce) {
  .dj .ph img, .dj .ph::before, .dj .ph::after, .dj .ph > .scan {
    animation: none !important;
  }
}


/* ===========================================================
   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(--neon);
}
.cform input::placeholder,
.cform textarea::placeholder { color: rgba(163, 165, 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(--neon);
}
.cform__consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  line-height: 1.5;
}
.cform__consent a { color: var(--neon); }

.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;
}

/* 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(--neon); color: var(--white); }
.formnote--err { border-left-color: var(--red);  color: var(--white); }

@media (max-width: 48rem) {
  .cform__row { grid-template-columns: 1fr; gap: 0; }
  .cform__submit .btn { width: 100%; text-align: center; }
}


/* ===========================================================
   "Soon unlocked" — Platzhalter, solange kein Verteiler steht
   =========================================================== */

.soon { position: relative; flex: 0 0 auto; }

/* Das Dreieck, das Browser vor ein <summary> setzen, muss weg —
   der Knopf soll wie ein Knopf aussehen. */
.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(--red);
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 10px 14px;
  z-index: 20;
}

/* Offener Zustand: Der Knopf tritt zurueck, der Hinweis uebernimmt. */
.soon[open] > summary {
  background: transparent;
  border-color: var(--red);
  color: var(--red);
}

@media (max-width: 48rem) {
  .soon { width: 100%; }
  .soon > summary { width: 100%; justify-content: center; }
  .soon__note {
    position: static;
    margin-top: 8px;
    text-align: center;
    white-space: normal;
  }
}