/* ==========================================================================
   DOPPELHERTZ — doppelhertz.at
   Ported from the Claude Design canvas (DOPPELHERTZ.dc.html) to plain CSS.
   Everything is prefixed .dh- and scoped under .dh-page so it can live
   inside Elementor / hello-elementor without colliding with theme styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Element-Reset

   Das Theme-Stylesheet (hello-elementor reset.css) wird für diese Templates
   nicht mehr geladen: es brachte 208 KB unkomprimiertes, renderblockierendes
   CSS mit, das die Seite nirgends benutzt — und weil es NACH dieser Datei kam,
   haben seine Ein-Klassen-Selektoren die Gestaltung hier viermal überstimmt
   (sichtbarer Burger neben der Desktop-Navigation, 18 px Versatz am Panorama,
   Buttons mit 2,60:1 Kontrast, unsichtbare CTAs).

   Was der Reset an Nötigem beigetragen hat, steht deshalb hier — auf gleicher
   Spezifität wie dort, aber vor den Gestaltungsregeln. Bewusst NICHT
   übernommen: seine Button-Formatierung, die genau die Kollisionen erzeugt hat.
   -------------------------------------------------------------------------- */

html { line-height:1.15; -webkit-text-size-adjust:100%; }

body.dh-body {
  margin:0;
  overflow-x:clip;
  background:#0B0A09;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

h1, h2, h3, h4, h5, h6 {
  color:inherit;
  font-family:inherit;
  font-weight:500;
  line-height:1.2;
  margin-block-start:.5rem;
  margin-block-end:1rem;
}
h1 { font-size:2.5rem; }
h2 { font-size:2rem; }
h3 { font-size:1.75rem; }
h4 { font-size:1.5rem; }
h5 { font-size:1.25rem; }
h6 { font-size:1rem; }

p { margin-block-start:0; margin-block-end:.9rem; }
dd, dl, dt, li, ol, ul { margin-block-start:0; margin-block-end:0; }
img { border-style:none; height:auto; max-width:100%; }
button, input, optgroup, select, textarea { font-family:inherit; font-size:1rem; line-height:1.5; margin:0; }

.dh-page {
  --dh-ink:#0B0A09;
  --dh-paper:#FFF6E2;
  --dh-accent:#FF6F00;
  --dh-accent-hi:#FF8420;
  --dh-muted:#C6BFAE;
  --dh-dim:#8C8272;
  --dh-rule:rgba(255,246,226,.14);
  --dh-rule-soft:rgba(255,246,226,.08);

  --dh-pad:clamp(18px,4.5vw,72px);
  --dh-max:1560px;

  /* s4/s5 were self-referential in the design source (--s4:var(--s4)) and
     therefore invalid; resolved here to the intended rhythm. */
  --dh-s4:clamp(40px,6vh,80px);
  --dh-s5:clamp(52px,8vh,104px);
  --dh-s6:clamp(72px,10vh,128px);

  --dh-t-display:clamp(52px,17vw,286px);
  --dh-t-h1:clamp(36px,8vw,138px);
  --dh-t-h2:clamp(26px,4.6vw,64px);
  --dh-t-lead:clamp(20px,2.2vw,31px);
  --dh-t-body:clamp(15px,1.1vw,17px);
  --dh-t-label:10px;

  --dh-out:cubic-bezier(.22,1,.36,1);
  --dh-io:cubic-bezier(.76,0,.24,1);

  position:relative;
  background:var(--dh-ink);
  color:var(--dh-paper);
  font-family:'Archivo',Helvetica,Arial,sans-serif;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}

.dh-page *,
.dh-page *::before,
.dh-page *::after { box-sizing:border-box; }

.dh-page img { display:block; max-width:100%; }
/* <picture> steht zwischen Container und Bild. Alle Bildregeln sind
   Nachfahren-Selektoren (.dh-hero__media img), greifen also weiter - aber die
   Elternbox des <img> waere sonst die Auswahl statt des Containers, und
   width:100% bezoege sich auf eine inline-Box. display:contents nimmt sie
   vollstaendig aus dem Layout. */
.dh-page picture { display:contents; }

.dh-page a {
  color:var(--dh-paper);
  text-decoration:none;
  transition:color .18s var(--dh-out);
}
.dh-page a:hover { color:var(--dh-accent); }

.dh-page ::selection { background:var(--dh-accent); color:var(--dh-ink); }
.dh-page :focus-visible { outline:2px solid var(--dh-accent); outline-offset:3px; }

/* hello-elementor's reset.css is enqueued after this file and styles buttons
   through [type=button], which ties .dh-class on specificity and wins on order.
   Everything it sets is neutralised here at (0,1,1) so it cannot reach inside. */
.dh-page button {
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
  line-height:inherit;
  color:inherit;
  background:none;
  border:0;
  border-radius:0;
  padding:0;
  width:auto;
  white-space:normal;
  text-align:left;
  cursor:pointer;
  transition:none;
  -webkit-appearance:none;
  appearance:none;
}
.dh-page button:hover,
.dh-page button:focus { background:none; color:inherit; }

.dh-page p { margin:0; }

/* Body lock while the mobile nav overlay is open. */
body.dh-nav-open { overflow:hidden; }

/* --------------------------------------------------------------------------
   Type utilities
   -------------------------------------------------------------------------- */
.dh-label {
  display:block;
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-dim);
}
.dh-label--accent { color:var(--dh-accent); }
/* Auf der Archivseite tragen diese Etiketten jetzt h2/h3 — ohne die
   Gliederung bestand die Seite aus einer einzigen Überschrift. Optisch
   bleibt alles gleich, nur die Element-Margins muessen weg. */
.dh-page h2.dh-label,
.dh-page h3.dh-label,
.dh-page h2.dh-edition__no { margin:0; font-size:inherit; }
.dh-page h2.dh-edition__no { font-size:clamp(48px,11vw,150px); }
.dh-label--muted  { color:var(--dh-muted); }

.dh-meta {
  font-weight:600;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--dh-dim);
}

.dh-body {
  font-size:var(--dh-t-body);
  line-height:1.65;
  color:var(--dh-muted);
  text-wrap:pretty;
}
.dh-body + .dh-body { margin-top:20px; }

.dh-display {
  font-weight:900;
  font-variation-settings:'wdth' 66;
  letter-spacing:-.035em;
  line-height:.82;
}
.dh-headline {
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:var(--dh-t-h1);
  line-height:.86;
  letter-spacing:-.03em;
  margin:0;
}
.dh-sub {
  font-weight:700;
  font-variation-settings:'wdth' 84;
  line-height:1.15;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.dh-btn {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:16px 24px;
  border-radius:10px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.dh-btn--primary { background:var(--dh-accent); color:var(--dh-ink); }
.dh-btn--primary:hover { background:var(--dh-accent-hi); color:var(--dh-ink); }

.dh-btn--ghost { border:1px solid rgba(255,246,226,.26); }
.dh-btn--ghost:hover { border-color:var(--dh-accent); }

.dh-btn--sm { padding:11px 19px; font-size:13px; gap:7px; }
.dh-btn--block { display:flex; justify-content:space-between; gap:14px; padding:19px 22px; }

.dh-link-quiet { font-size:14px; font-weight:600; letter-spacing:.02em; color:var(--dh-muted); }
.dh-link-quiet:hover { color:var(--dh-accent); }

.dh-link-label { font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   Shell: preloader, cursor
   -------------------------------------------------------------------------- */
.dh-pre {
  position:fixed;
  inset:0;
  z-index:200;
  background:var(--dh-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .45s ease, visibility .45s;
}
.dh-pre__dots { display:flex; align-items:center; gap:13px; }
.dh-pre__dot { display:block; width:13px; height:13px; border-radius:50%; }
.dh-pre__dot--a { background:var(--dh-accent); animation:dhPulseA .58s ease-in-out infinite; }
.dh-pre__dot--b { background:var(--dh-paper);  animation:dhPulseB .79s ease-in-out infinite; }
.dh-pre.is-synced .dh-pre__dot { animation:dhSync .8s ease-in-out infinite; }
.dh-pre.is-hidden { opacity:0; visibility:hidden; }

.dh-cursor {
  position:fixed;
  top:0; left:0;
  z-index:120;
  pointer-events:none;
  opacity:0;
  padding:7px 11px;
  background:var(--dh-accent);
  font-weight:600;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--dh-ink);
  white-space:nowrap;
  transition:opacity .18s var(--dh-out);
}
.dh-cursor.is-on { opacity:1; }

/* --------------------------------------------------------------------------
   Header + navigation
   -------------------------------------------------------------------------- */
.dh-header {
  position:fixed;
  top:0; left:0; right:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px var(--dh-pad);
  border-bottom:1px solid transparent;
  background:transparent;
  transition:background .3s ease, border-color .3s ease, padding .3s ease;
}
.dh-header.is-stuck {
  background:var(--dh-ink);
  border-bottom-color:var(--dh-rule);
  padding-top:13px;
  padding-bottom:13px;
}

.dh-logo { display:flex; align-items:center; gap:9px; height:24px; }
.dh-logo img { height:20px; width:auto; }
/* Die Marke steht etwas hoeher als der Schriftzug: Ein hochformatiges Zeichen
   neben Versalien wirkt sonst zu klein, obwohl es dieselbe Hoehe hat. */
.dh-logo .dh-logo__mark { height:24px; }

.dh-footer__claim { display:inline-flex; align-items:center; gap:11px; }
.dh-footer__claim .dh-footer__mark { height:26px; width:auto; }
.dh-logo__text {
  display:none;
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:19px;
  letter-spacing:-.02em;
  line-height:1;
}
.dh-logo.is-fallback .dh-logo__text { display:block; }

.dh-nav-desk {
  display:none;
  align-items:center;
  gap:clamp(16px,2.2vw,34px);
  font-size:13px;
  font-weight:600;
  font-variation-settings:'wdth' 100;
  letter-spacing:.02em;
}
.dh-nav-desk a { color:var(--dh-muted); }
.dh-nav-desk a:hover { color:var(--dh-accent); }
.dh-nav-desk .dh-btn--primary { color:var(--dh-ink); }

.dh-page .dh-burger {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:12px;
  margin:-12px;
}
.dh-page .dh-burger span { display:block; width:26px; height:2px; background:var(--dh-paper); }

@media (min-width:901px) {
  .dh-nav-desk { display:flex; }
  .dh-page .dh-burger { display:none; }
}

/* Full-screen mobile nav */
.dh-nav-overlay {
  position:fixed;
  inset:0;
  z-index:130;
  background:var(--dh-ink);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px clamp(16px,6vw,40px) 30px;
  overflow-y:auto;
  animation:dhNavIn .28s ease both;
}
.dh-nav-overlay[hidden] { display:none; }
.dh-nav-overlay__top { display:flex; align-items:center; justify-content:space-between; }
.dh-nav-overlay__top img { height:18px; width:auto; }
/* Im Menue ist der Schriftzug kleiner; die Marke zieht mit, sonst
   ueberragt sie ihn. Muss nach der 18px-Regel stehen, gleiche Staerke. */
.dh-nav-overlay__top .dh-logo__mark { height:22px; }
.dh-page .dh-nav-close { font-size:13px; font-weight:600; letter-spacing:.02em; padding:12px; margin:-12px; }

.dh-nav-list { display:flex; flex-direction:column; margin:34px 0; }
.dh-nav-list a {
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(255,246,226,.1);
  font-weight:800;
  font-variation-settings:'wdth' 70;
  font-size:clamp(32px,9.5vw,54px);
  line-height:1;
}
.dh-nav-list a span {
  font-weight:400;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--dh-accent);
}

.dh-nav-actions { display:flex; flex-wrap:wrap; gap:9px; font-size:14px; font-weight:600; letter-spacing:.02em; }
.dh-nav-actions a {
  flex:1 1 130px;
  padding:17px;
  border-radius:10px;
  border:1px solid rgba(255,246,226,.2);
  text-align:center;
}
.dh-nav-actions .dh-nav-actions__tickets {
  flex:1 1 100%;
  background:var(--dh-accent);
  border-color:var(--dh-accent);
  color:var(--dh-ink);
}

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */
.dh-section { position:relative; padding:var(--dh-s6) var(--dh-pad); }
.dh-section--ruled { border-top:1px solid var(--dh-rule); }
.dh-shell { max-width:var(--dh-max); margin:0 auto; }
.dh-shell--narrow { max-width:1240px; margin:0 auto; }

/* --------------------------------------------------------------------------
   01 — Hero
   -------------------------------------------------------------------------- */
.dh-hero { position:relative; height:100svh; min-height:540px; overflow:hidden; }

.dh-hero__media { position:absolute; inset:-7% -3%; will-change:transform; }
.dh-hero__media img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 46%;
  filter:saturate(.78) contrast(1.08) brightness(.76);
}
.dh-hero__scrim {
  position:absolute; inset:0;
  background:linear-gradient(to bottom,
    rgba(11,10,9,.62) 0%,
    rgba(11,10,9,.14) 32%,
    rgba(11,10,9,.7) 76%,
    #0B0A09 100%);
}

.dh-ring {
  position:absolute;
  top:50%; left:50%;
  width:min(76vh,86vw);
  height:min(76vh,86vw);
  margin:calc(min(76vh,86vw) / -2) 0 0 calc(min(76vh,86vw) / -2);
  border:1px solid rgba(255,246,226,.12);
  border-radius:50%;
  animation:dhSpin 60s linear infinite;
}
.dh-ring__node {
  position:absolute;
  top:-4px; left:50%;
  width:7px; height:7px;
  margin-left:-3.5px;
  border-radius:50%;
  background:var(--dh-accent);
}

.dh-hero__title {
  position:absolute;
  inset:0;
  margin:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 var(--dh-pad);
  line-height:.82;
}
.dh-hero__word {
  display:block;
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:var(--dh-t-display);
  letter-spacing:-.025em;
  will-change:transform;
}
.dh-hero__word--l { text-align:left; }
.dh-hero__word--r {
  text-align:right;
  color:transparent;
  -webkit-text-stroke:1.5px var(--dh-paper);
}

.dh-hero__meta {
  position:absolute;
  left:0; right:0; bottom:0;
  padding:0 var(--dh-pad) clamp(22px,3.4vh,42px);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}
.dh-hero__where { display:flex; flex-direction:column; gap:10px; }
.dh-hero__claim {
  margin:0;
  font-weight:700;
  font-variation-settings:'wdth' 84;
  font-size:clamp(17px,2.4vw,28px);
  line-height:1.05;
  max-width:17ch;
}
.dh-hero__cta { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.dh-hero__cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:22px; }

/* --------------------------------------------------------------------------
   02 — Brand statement (scroll-driven)
   -------------------------------------------------------------------------- */
.dh-stmt { position:relative; height:165vh; background:var(--dh-ink); }
.dh-stmt__stage {
  position:sticky;
  top:0;
  height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.dh-stmt__ring {
  position:absolute;
  top:50%; left:50%;
  width:min(62vh,78vw);
  height:min(62vh,78vw);
  margin:calc(min(62vh,78vw) / -2) 0 0 calc(min(62vh,78vw) / -2);
  border:1px solid rgba(255,246,226,.08);
  border-radius:50%;
}
.dh-stmt__ring--b { border-color:rgba(255,111,0,.14); }

.dh-stmt__lines { position:relative; text-align:center; padding:0 var(--dh-pad); width:100%; }
.dh-stmt__line {
  position:absolute;
  left:0; right:0; top:50%;
  transform:translateY(-50%);
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:clamp(34px,8.4vw,142px);
  line-height:.92;
  letter-spacing:-.025em;
}
.dh-stmt__line:not(:first-child) { opacity:0; }
.dh-stmt__spacer { display:block; height:clamp(34px,8.4vw,142px); }

/* --------------------------------------------------------------------------
   03 — Event story
   -------------------------------------------------------------------------- */
.dh-story { display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,88px); align-items:flex-start; }
.dh-story__mark { flex:1 1 300px; min-width:0; }
.dh-story__mark .dh-label { margin-bottom:22px; }
/* Was "360°" — now a word, which needs a smaller ceiling to stay on one line. */
.dh-story__mark {
  display:block;
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:clamp(62px,15vw,252px);
  line-height:.8;
  letter-spacing:-.035em;
}
.dh-story__mark .dh-label--after { margin-top:16px; margin-bottom:0; }

.dh-story__text { flex:1 1 360px; min-width:0; max-width:640px; padding-top:clamp(0px,4vw,70px); }
.dh-story__lead {
  margin:0 0 24px;
  font-weight:500;
  font-variation-settings:'wdth' 100;
  font-size:clamp(20px,2.2vw,31px);
  line-height:1.28;
  text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   04 — Quote break
   -------------------------------------------------------------------------- */
.dh-quote {
  position:relative;
  min-height:min(100svh,780px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.dh-quote__media { position:absolute; inset:-6% 0; will-change:transform; }
.dh-quote__media img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 38%;
  filter:contrast(1.14) brightness(.62) saturate(.55);
}
.dh-quote__scrim {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(11,10,9,.94) 0%,
    rgba(11,10,9,.2) 55%,
    rgba(11,10,9,.5) 100%);
}
.dh-quote blockquote {
  position:relative;
  margin:0;
  padding:0 var(--dh-pad) clamp(44px,8vh,104px);
  max-width:24ch;
}
.dh-quote__mark { margin-bottom:20px; }
.dh-quote__text {
  display:block;
  font-weight:800;
  font-variation-settings:'wdth' 70;
  font-size:clamp(30px,5.4vw,86px);
  line-height:1;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* --------------------------------------------------------------------------
   05 — Line-up
   -------------------------------------------------------------------------- */
.dh-lineup__head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:30px;
  border-bottom:1px solid var(--dh-rule);
}
.dh-lineup__head .dh-label { margin-bottom:14px; }
.dh-lineup__title {
  margin:0;
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:clamp(40px,8.4vw,142px);
  line-height:.86;
  letter-spacing:-.03em;
}
.dh-lineup__when { max-width:34ch; line-height:1.7; text-align:right; }

.dh-lineup__soon {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:clamp(34px,4.6vw,62px) 0;
  border-bottom:1px solid var(--dh-rule);
}
.dh-lineup__soon-word {
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:clamp(36px,9.5vw,158px);
  line-height:.84;
  letter-spacing:-.03em;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,246,226,.45);
}

.dh-lineup__past {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:clamp(34px,4.6vw,60px) 0 6px;
}

.dh-artists { list-style:none; margin:0; padding:0; border-top:1px solid var(--dh-rule); }
.dh-artists li { border-bottom:1px solid var(--dh-rule); }
/* The archive lists the same rows as static spans — they are history, not
   links — so the row layout must not hang off the anchor. */
.dh-artists a,
.dh-artists > li > span {
  display:flex;
  align-items:baseline;
  gap:clamp(11px,2vw,30px);
  padding:clamp(11px,1.5vw,19px) 0;
  transition:transform .28s var(--dh-out), color .24s;
}
.dh-artists a:hover { transform:translateX(clamp(7px,1.3vw,24px)); color:var(--dh-accent); }
.dh-artists__no { font-weight:600; font-size:11px; color:var(--dh-dim); flex:0 0 auto; }
.dh-artists__name {
  font-weight:800;
  font-variation-settings:'wdth' 70;
  font-size:clamp(24px,5.2vw,80px);
  line-height:.99;
  letter-spacing:-.02em;
}
.dh-artists__name--b2b { font-size:clamp(20px,4.2vw,64px); }
.dh-artists__b2b { color:var(--dh-accent); }
.dh-artists__tag {
  font-weight:400;
  font-size:clamp(10px,1vw,14px);
  letter-spacing:.1em;
  color:var(--dh-dim);
}

/* --------------------------------------------------------------------------
   06 — Einblicke video (scroll-driven scale)
   -------------------------------------------------------------------------- */
.dh-vid { position:relative; height:170vh; }
.dh-vid__stage {
  position:sticky;
  top:0;
  height:100svh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.dh-vid__head { position:absolute; z-index:3; text-align:center; padding:0 var(--dh-pad); }
.dh-vid__head .dh-label { margin-bottom:16px; }
.dh-vid__head-title {
  display:block;
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:clamp(32px,7vw,116px);
  line-height:.9;
  letter-spacing:-.03em;
}
.dh-vid__box {
  position:relative;
  width:100vw;
  height:100svh;
  will-change:transform;
  transform:scale(.4);
}
.dh-vid__box video,
.dh-vid__box img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 46%;
  filter:contrast(1.06) brightness(.86) saturate(.84);
}
.dh-vid__plate {
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,10,9,.34) 0%,
    rgba(11,10,9,0) 34%,
    rgba(11,10,9,.52) 100%);
}
.dh-vid__meta {
  position:absolute;
  z-index:4;
  left:0; right:0; bottom:0;
  padding:0 var(--dh-pad) clamp(22px,4vh,44px);
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  opacity:0;
}
.dh-vid__meta-title {
  font-weight:800;
  font-variation-settings:'wdth' 84;
  font-size:clamp(20px,2.6vw,34px);
  line-height:1;
}
.dh-page .dh-vid__sound { font-weight:600; font-size:var(--dh-t-label); letter-spacing:.13em; color:var(--dh-muted); }
.dh-page .dh-vid__sound:hover { color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   07 — Gallery
   -------------------------------------------------------------------------- */
.dh-gallery { padding:var(--dh-s5) var(--dh-pad) var(--dh-s6); }
.dh-gallery__shell {
  max-width:var(--dh-max);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:clamp(28px,6vw,110px);
}
.dh-gallery__row { display:flex; flex-wrap:wrap; gap:clamp(16px,3vw,44px); align-items:flex-end; }
.dh-gallery__row--end { align-items:flex-start; justify-content:flex-end; }
.dh-gallery figure { margin:0; }
.dh-gallery figcaption {
  margin-top:11px;
  font-weight:600;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--dh-dim);
}
.dh-fig--wide { flex:1 1 min(100%,640px); }
.dh-fig--wide img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:52% 50%; filter:contrast(1.05) saturate(.82); }
.dh-fig--tall { flex:0 1 min(100%,300px); }
.dh-fig--tall img { width:100%; aspect-ratio:3/4; object-fit:cover; object-position:50% 42%; filter:contrast(1.1) saturate(.6) brightness(.9); }
.dh-page .dh-fig--bleed { width:100vw; margin-left:calc(50% - 50vw); }
.dh-page .dh-fig--bleed img {
  width:100%;
  height:clamp(300px,72vh,860px);
  object-fit:cover;
  object-position:50% 52%;
  filter:contrast(1.06) saturate(.85);
}
.dh-page .dh-fig--bleed figcaption { margin:11px var(--dh-pad) 0; }
.dh-fig--crowd { flex:1 1 min(100%,560px); }
.dh-fig--crowd img { width:100%; aspect-ratio:16/10; object-fit:cover; object-position:50% 58%; filter:contrast(1.05) saturate(.86); }
.dh-gallery__note { flex:1 1 260px; max-width:420px; }

/* --------------------------------------------------------------------------
   08 — Next frequency
   -------------------------------------------------------------------------- */
.dh-next__shell {
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,5vw,80px);
  align-items:flex-end;
  justify-content:space-between;
}
.dh-next__date { font-size:clamp(54px,13vw,220px); }
.dh-next__claim { margin-top:14px; font-size:clamp(17px,2.4vw,30px); max-width:22ch; display:block; }
.dh-next__facts { display:block; margin-top:12px; }
.dh-next__actions { display:flex; flex-direction:column; gap:9px; min-width:min(100%,280px); }

/* --------------------------------------------------------------------------
   09 — Info list
   -------------------------------------------------------------------------- */
.dh-info__head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px; }
.dh-facts { margin:clamp(32px,5vw,68px) 0 0; border-top:1px solid var(--dh-rule); }
.dh-fact {
  display:grid;
  grid-template-columns:minmax(110px,18%) 1fr;
  gap:clamp(12px,3vw,52px);
  align-items:baseline;
  padding:clamp(20px,2.7vw,38px) 0;
  border-bottom:1px solid var(--dh-rule);
}
.dh-fact--tall { padding:clamp(26px,3.6vw,52px) 0; }
.dh-fact dt {
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:clamp(30px,3.5vw,56px);
  line-height:.9;
  letter-spacing:-.02em;
}
.dh-fact dt.dh-fact__mark {
  font-variation-settings:'wdth' 66;
  font-size:clamp(30px,3.6vw,58px);
  line-height:.88;
  letter-spacing:-.02em;
  color:var(--dh-accent);
}
.dh-fact dt.dh-fact__word {
  font-weight:800;
  font-variation-settings:'wdth' 84;
  font-size:clamp(19px,2vw,29px);
  line-height:1.12;
  letter-spacing:normal;
}
.dh-fact dd { margin:0; display:flex; flex-wrap:wrap; gap:8px clamp(16px,3vw,48px); }
.dh-fact__key {
  flex:0 0 auto;
  min-width:130px;
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-dim);
  padding-top:.5em;
}
.dh-fact__val {
  flex:1 1 260px;
  max-width:54ch;
  font-size:var(--dh-t-body);
  line-height:1.62;
  color:var(--dh-muted);
  text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   10 — Location
   -------------------------------------------------------------------------- */
.dh-loc__title { margin:0 0 clamp(30px,5vw,64px); }
.dh-loc__cols { display:flex; flex-wrap:wrap; gap:clamp(24px,4vw,70px); }
.dh-loc__text { flex:1 1 min(100%,540px); display:flex; flex-direction:column; gap:26px; }
.dh-loc__text .dh-label { color:var(--dh-accent); margin-bottom:10px; }
.dh-loc__addr {
  display:block;
  font-weight:700;
  font-variation-settings:'wdth' 84;
  font-size:clamp(19px,1.8vw,25px);
  line-height:1.25;
}
.dh-loc__fig {
  margin:0;
  flex:1 1 min(100%,420px);
  align-self:stretch;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dh-loc__fig img {
  width:100%;
  flex:1 1 auto;
  min-height:330px;
  object-fit:cover;
  object-position:50% 52%;
  filter:contrast(1.04) brightness(.82);
}
.dh-loc__fig figcaption {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-dim);
}
.dh-loc__fig figcaption a { color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   11 — FAQ
   -------------------------------------------------------------------------- */
.dh-faq__head {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:clamp(28px,4vw,54px);
}
.dh-faq__head .dh-label { margin-bottom:16px; }
.dh-faq { border-top:1px solid var(--dh-rule); }
.dh-faq__item { border-bottom:1px solid var(--dh-rule); }
.dh-page .dh-faq__q {
  display:flex;
  align-items:baseline;
  gap:clamp(12px,2vw,26px);
  width:100%;
  padding:clamp(18px,2.2vw,26px) 0;
  transition:color .2s;
}
.dh-page .dh-faq__q:hover { color:var(--dh-accent); }
.dh-faq__no { font-weight:600; font-size:11px; color:var(--dh-dim); flex:0 0 auto; }
.dh-faq__label {
  flex:1;
  font-weight:700;
  font-variation-settings:'wdth' 84;
  font-size:clamp(17px,2.1vw,30px);
  line-height:1.18;
}
.dh-faq__ico {
  flex:0 0 auto;
  font-size:20px;
  line-height:1;
  color:var(--dh-accent);
  transition:transform .3s var(--dh-out);
}
.dh-page .dh-faq__q[aria-expanded="true"] .dh-faq__ico { transform:rotate(135deg); }
.dh-faq__panel { max-height:0; overflow:hidden; transition:max-height .42s var(--dh-out); }
.dh-faq__panel > * {
  margin:0 0 clamp(18px,2.2vw,26px);
  padding-left:clamp(28px,4vw,52px);
  max-width:70ch;
}
.dh-faq__panel a { color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   12 — Partner
   -------------------------------------------------------------------------- */
.dh-partner { padding:var(--dh-s5) var(--dh-pad); }
.dh-partner__head {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-bottom:clamp(26px,4vw,48px);
}
/* Continuously drifting logo band. The track holds the same group twice and
   travels exactly -50%, so the loop has no visible seam. */
.dh-marquee {
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.dh-marquee__track {
  display:flex;
  width:max-content;
  animation:dhMarquee 42s linear infinite;
}
.dh-marquee:hover .dh-marquee__track { animation-play-state:paused; }
.dh-marquee__group {
  display:flex;
  align-items:center;
  flex:0 0 auto;
  gap:clamp(38px,6vw,88px);
  padding-inline:clamp(19px,3vw,44px);
}
.dh-partner-slot {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  /* Feste Slot-Breite: sonst bestimmt das Seitenverhältnis die optische
     Größe und ein breiter Schriftzug wirkt neben einer Bildmarke winzig. */
  width:clamp(104px,13vw,158px);
  height:clamp(34px,4.4vw,54px);
  opacity:.62;
  transition:opacity .24s var(--dh-out);
}
.dh-marquee:hover .dh-partner-slot { opacity:.9; }
.dh-partner-slot img {
  height:100%;
  width:100%;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(1) brightness(0) invert(1);
}
/* Until a logo file lands, the partner's name holds the slot: the <img>
   removes itself on error and flags the slot, which reveals the wordmark. */
.dh-partner-slot__text { display:none; }
.dh-partner-slot.is-text .dh-partner-slot__text { display:block; }
.dh-partner-slot__text,
.dh-partner-slot.is-text .dh-partner-slot__text {
  font-weight:600;
  font-size:clamp(11px,1.2vw,14px);
  letter-spacing:.13em;
  white-space:nowrap;
  color:var(--dh-muted);
}
.dh-partner__note { display:block; margin-top:clamp(34px,5vw,60px); color:var(--dh-accent); }

@keyframes dhMarquee { from { transform:translate3d(0,0,0); } to { transform:translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .dh-marquee__track { animation:none; }
  .dh-marquee { -webkit-mask-image:none; mask-image:none; overflow-x:auto; }
}

/* --------------------------------------------------------------------------
   13 — Community
   -------------------------------------------------------------------------- */
.dh-community__shell {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:clamp(28px,5vw,80px);
}
/* The headline block used to shrink to min-content inside the flex row, which
   squeezed "FOLLOW THE / FREQUENCY" into a ~174px column on phones. */
.dh-community__intro { flex:1 1 min(100%,520px); min-width:0; }
.dh-community__shell .dh-label { margin-bottom:20px; }

.dh-socials {
  flex:1 1 min(100%,420px);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
}
.dh-social {
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 18px;
  min-height:64px;
  border:1px solid var(--dh-rule);
  border-radius:12px;
  transition:border-color .18s var(--dh-out), background .18s var(--dh-out);
}
.dh-social:hover { border-color:var(--dh-accent); background:rgba(255,111,0,.06); }
.dh-social__icon { flex:0 0 auto; width:24px; height:24px; color:var(--dh-accent); }
.dh-social__body { display:flex; flex-direction:column; gap:3px; min-width:0; }
.dh-social__name {
  font-weight:700;
  font-variation-settings:'wdth' 84;
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.1;
}
.dh-social__handle {
  font-weight:600;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--dh-dim);
  overflow-wrap:anywhere;
}
/* Der Rabattcode ist ein Angebot, kein Handle — er darf nicht wie eine
   Fussnote aussehen. */
.dh-social__handle--offer { color:var(--dh-accent); letter-spacing:.08em; }
.dh-social__go { margin-left:auto; flex:0 0 auto; color:var(--dh-muted); font-size:15px; }
.dh-social:hover .dh-social__go { color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   14 — Footer
   -------------------------------------------------------------------------- */
.dh-footer { position:relative; padding:var(--dh-s4) var(--dh-pad) 0; border-top:1px solid var(--dh-rule); }
.dh-footer__cols {
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,5vw,80px);
  justify-content:space-between;
  padding-bottom:clamp(40px,6vw,80px);
}
.dh-footer__col { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.dh-footer__col .dh-label { color:var(--dh-accent); font-size:10px; letter-spacing:.1em; }
.dh-footer__mail { font-weight:700; font-variation-settings:'wdth' 84; font-size:clamp(16px,1.5vw,21px); }
.dh-footer__col nav { display:flex; flex-direction:column; gap:9px; }
.dh-footer__col nav a,
.dh-footer__addr,
.dh-footer__ig { font-weight:600; font-size:11px; letter-spacing:.1em; color:var(--dh-muted); }
.dh-footer__addr { line-height:1.9; }

.dh-footer__wordmark { display:flex; align-items:flex-end; overflow:hidden; line-height:.72; }
.dh-footer__wordmark span {
  display:block;
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:clamp(48px,15.5vw,280px);
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,246,226,.28);
  white-space:nowrap;
}
.dh-footer__base {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:22px 0 26px;
}

/* --------------------------------------------------------------------------
   15 — Next-event sticker + mobile sticky CTA
   -------------------------------------------------------------------------- */
.dh-pop {
  position:fixed;
  left:clamp(16px,2.6vw,40px);
  bottom:clamp(16px,2.6vw,40px);
  z-index:79;
  width:min(330px,calc(100vw - 32px));
  transform-origin:0% 100%;
  transform:translateY(150%) rotate(-9deg);
  opacity:0;
  transition:transform .66s var(--dh-out), opacity .38s ease;
}
.dh-pop[hidden] { display:none; }
.dh-pop.is-in { transform:rotate(-2.5deg); opacity:1; }
.dh-pop.is-out { transform:translateY(20px) rotate(4deg); opacity:0; }

.dh-pop__card {
  position:relative;
  background:var(--dh-paper);
  color:var(--dh-ink);
  padding:18px 18px 0;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  transition:transform .3s var(--dh-out);
}
.dh-pop__card:hover { transform:scale(1.015); }
.dh-pop__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dh-pop__pulse { display:flex; align-items:center; gap:9px; }
.dh-pop__dots { display:flex; align-items:center; gap:5px; }
.dh-pop__dot { display:block; width:8px; height:8px; border-radius:50%; }
.dh-pop__dot--a { background:var(--dh-accent); animation:dhPulseA .58s ease-in-out infinite; }
.dh-pop__dot--b { background:var(--dh-ink);    animation:dhPulseB .79s ease-in-out infinite; }
.dh-pop__kicker { font-weight:600; font-size:10px; letter-spacing:.13em; color:rgba(11,10,9,.62); }
.dh-page .dh-pop__close { font-size:15px; line-height:1; padding:8px; margin:-8px -8px -8px 0; color:rgba(11,10,9,.5); }
.dh-page .dh-pop__close:hover { color:var(--dh-ink); }
.dh-pop__date { display:flex; align-items:flex-end; gap:9px; margin-top:14px; }
.dh-pop__date b {
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:66px;
  line-height:.8;
  letter-spacing:-.035em;
}
.dh-pop__year { font-weight:600; font-size:11px; letter-spacing:.13em; color:rgba(11,10,9,.55); padding-bottom:6px; }
.dh-pop__claim {
  margin:12px 0 18px;
  font-weight:700;
  font-variation-settings:'wdth' 84;
  font-size:16px;
  line-height:1.15;
}
.dh-pop__foot {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0 16px;
  border-top:1px dashed rgba(11,10,9,.32);
}
.dh-pop__count { font-weight:600; font-size:12px; letter-spacing:.02em; color:rgba(11,10,9,.62); }
.dh-pop__cta {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:10px;
  background:var(--dh-accent);
  color:var(--dh-ink);
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
}
.dh-pop__cta:hover { background:var(--dh-ink); color:var(--dh-paper); }
.dh-pop__notch {
  position:absolute;
  bottom:44px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--dh-ink);
}
.dh-pop__notch--l { left:-7px; }
.dh-pop__notch--r { right:-7px; }

.dh-sticky {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:78;
  padding:10px;
  background:linear-gradient(to top, rgba(11,10,9,.96), rgba(11,10,9,.6));
  transform:translateY(120%);
  transition:transform .32s var(--dh-out);
}
.dh-sticky[hidden] { display:none; }
.dh-sticky.is-in { transform:none; }
.dh-sticky a {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:17px;
  border-radius:10px;
  background:var(--dh-accent);
  color:var(--dh-ink);
  font-size:15px;
  font-weight:600;
  letter-spacing:.02em;
}

/* --------------------------------------------------------------------------
   Reveals + keyframes
   -------------------------------------------------------------------------- */
.dh-page [data-reveal].is-pending { opacity:0; transition:opacity 600ms var(--dh-out); }
.dh-page [data-reveal="media"].is-pending { opacity:1; clip-path:inset(0 0 100% 0); transition:clip-path 1200ms var(--dh-io); }
.dh-page [data-reveal].is-in { opacity:1; clip-path:inset(0 0 0% 0); }

@keyframes dhSpin   { to { transform:rotate(360deg); } }
@keyframes dhPulseA { 0%,100% { transform:scale(.68); opacity:.3; } 50% { transform:scale(1); opacity:1; } }
@keyframes dhPulseB { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(.68); opacity:.3; } }
@keyframes dhSync   { 0%,100% { transform:scale(.84); opacity:.65; } 50% { transform:scale(1); opacity:1; } }
@keyframes dhNavIn  { from { opacity:0; } to { opacity:1; } }

@media (prefers-reduced-motion: reduce) {
  .dh-page *,
  .dh-page *::before,
  .dh-page *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .dh-stmt__line { position:static; transform:none; opacity:1 !important; margin-bottom:.2em; }
  .dh-stmt__spacer { display:none; }
  .dh-stmt { height:auto; }
  .dh-stmt__stage { position:static; height:auto; padding:var(--dh-s6) 0; }
  .dh-vid { height:auto; }
  .dh-vid__stage { position:static; height:auto; display:block; }
  .dh-vid__box { transform:none !important; width:100%; height:auto; aspect-ratio:16/9; }
  .dh-vid__head { position:static; padding:0 var(--dh-pad) 24px; }
  .dh-vid__meta { position:static; opacity:1 !important; padding:16px var(--dh-pad); }
}

/* ==========================================================================
   MOBILE
   Most conversions happen on a phone, so the small screen gets explicit
   treatment rather than whatever the desktop clamps happen to collapse to.
   ========================================================================== */
@media (max-width: 768px) {
  .dh-page {
    /* 10px labels are legible on a 27" display and not on a phone. */
    --dh-t-label:11px;
    --dh-t-body:16px;
    --dh-t-h1:clamp(40px,11vw,72px);
  }

  .dh-meta { font-size:12px; }
  .dh-label { letter-spacing:.11em; }

  /* Every source photo is landscape (≈1.5:1). Dropped into a 0.43:1 phone
     viewport, `cover` throws away most of the frame, so the focal point is
     pulled to where the stage and lights actually are. */
  .dh-hero__media img { object-position:50% 38%; filter:saturate(.8) contrast(1.06) brightness(.82); }
  .dh-quote__media img { object-position:50% 30%; }

  /* A 2.33:1 panorama in a 0.64:1 box is a sliver. Capping the height keeps
     the crop close to the frame the photo was composed in. */
  .dh-page .dh-fig--bleed img { height:clamp(240px,46vh,380px); }
  .dh-fig--tall img { aspect-ratio:4/5; }
  .dh-fig--crowd img { aspect-ratio:4/3; }
  .dh-loc__fig img { min-height:240px; aspect-ratio:4/3; }

  /* Comfortable thumb targets on inline links that were 14–18px tall. */
  .dh-link-quiet,
  .dh-link-label,
  .dh-footer__col nav a,
  .dh-footer__mail,
  .dh-footer__ig,
  .dh-loc__fig figcaption a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
  }
  .dh-page .dh-vid__sound { min-height:44px; display:inline-flex; align-items:center; }
  .dh-artists a { padding:14px 0; }
  .dh-page .dh-faq__q { padding:20px 0; }

  /* The two-column definition grid collapses below ~560px anyway; stacking it
     deliberately keeps the big numeral and its label together. */
  .dh-fact { grid-template-columns:1fr; gap:12px; }
  .dh-fact__key { min-width:0; padding-top:0; }

  .dh-hero__meta { gap:18px; }
  .dh-hero__cta { width:100%; }
  .dh-hero__cta-row { width:100%; gap:14px; }
  .dh-hero__cta-row .dh-btn { flex:1 1 auto; justify-content:center; }

  .dh-next__actions { width:100%; }
  .dh-lineup__soon { gap:16px; }
  .dh-lineup__soon .dh-btn { width:100%; justify-content:center; }

  /* Room for the sticky ticket bar so it never covers the footer's last row. */
  .dh-footer__base { padding-bottom:96px; }
}

@media (max-width: 480px) {
  .dh-social { padding:14px 16px; gap:13px; }
  .dh-social__name { font-size:16px; }
  .dh-fig--wide img { aspect-ratio:4/3; }
}

/* --------------------------------------------------------------------------
   Next-event sticker on phones
   It used to be desktop-only. On mobile it sits above the sticky ticket bar
   and shrinks, so both can coexist without overlapping.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .dh-pop {
    left:10px;
    right:10px;
    bottom:84px;
    width:auto;
  }
  .dh-pop.is-in { transform:rotate(-1.2deg); }
  .dh-pop__card { padding:14px 14px 0; }
  .dh-pop__date b { font-size:52px; }
  .dh-pop__claim { margin:10px 0 14px; font-size:15px; }
  .dh-pop__foot { padding:12px 0 14px; }
  .dh-pop__notch { bottom:38px; }
}

/* --------------------------------------------------------------------------
   Legal pages (Impressum, Datenschutz)
   -------------------------------------------------------------------------- */
.dh-legal { padding:calc(var(--dh-s6) + 60px) var(--dh-pad) var(--dh-s6); }
.dh-legal__shell { max-width:940px; margin:0 auto; }
.dh-legal__title { margin:14px 0 clamp(34px,5vw,64px); }
.dh-legal__block { padding:clamp(22px,3vw,34px) 0; border-top:1px solid var(--dh-rule); }
.dh-legal__block:last-of-type { border-bottom:1px solid var(--dh-rule); }
.dh-legal h2 {
  margin:0 0 18px;
  font-weight:800;
  font-variation-settings:'wdth' 84;
  font-size:clamp(19px,2.2vw,28px);
  line-height:1.15;
}
.dh-legal h3 {
  margin:22px 0 8px;
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-accent);
  text-transform:uppercase;
}
.dh-legal p { font-size:var(--dh-t-body); line-height:1.65; color:var(--dh-muted); text-wrap:pretty; }
.dh-legal p + p { margin-top:14px; }
.dh-legal a { color:var(--dh-accent); }
.dh-legal a:hover { text-decoration:underline; }

.dh-legal__dl { display:grid; grid-template-columns:minmax(140px,26%) 1fr; gap:10px clamp(16px,3vw,40px); margin:0; }
.dh-legal__dl dt {
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-dim);
  padding-top:.25em;
}
.dh-legal__dl dd { margin:0; font-size:var(--dh-t-body); line-height:1.6; overflow-wrap:anywhere; }
@media (max-width:600px) { .dh-legal__dl { grid-template-columns:1fr; gap:4px 0; } .dh-legal__dl dd { margin-bottom:12px; } }

/* Deliberately loud: an unfilled field must never survive a review unnoticed. */
.dh-todo {
  display:inline-block;
  padding:2px 9px;
  border:1px dashed var(--dh-accent);
  border-radius:5px;
  font-weight:600;
  font-size:11px;
  letter-spacing:.09em;
  color:var(--dh-accent);
  text-transform:uppercase;
}
.dh-legal__back { display:inline-flex; align-items:center; min-height:44px; margin-top:clamp(30px,4vw,52px); }

/* Remaining sub-44px controls on touch screens. */
@media (max-width: 900px) {
  .dh-page .dh-burger { min-height:44px; justify-content:center; }
  .dh-page .dh-nav-close { min-height:44px; display:inline-flex; align-items:center; }
  .dh-page .dh-pop__close { min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; margin:-8px -12px -8px 0; }
  .dh-logo { min-height:44px; }
  .dh-nav-actions a { min-height:52px; display:flex; align-items:center; justify-content:center; }
  /* min-height allein greift bei inline-Elementen nicht — ohne inline-flex
     blieben Mail, Social- und Footer-Links bei 18 px Trefferfläche. */
  .dh-page .dh-footer__mail,
  .dh-page .dh-footer__ig,
  .dh-page .dh-footer__col a,
  .dh-page a.dh-meta,
  .dh-page a.dh-link-label {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

/* ==========================================================================
   DESKTOP
   The wide viewport had the opposite problem to the phone: sections ran two
   screens tall at barely a tenth ink coverage. These rules put content back
   into the width instead of stacking it down the page.
   ========================================================================== */
@media (min-width: 1100px) {
  /* The fact list ran 1.66 screens as a single column of short rows. */
  .dh-facts {
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:clamp(40px,5vw,88px);
    border-top:0;
  }
  .dh-fact { border-top:1px solid var(--dh-rule); }
  .dh-fact:nth-child(-n+2) { border-top:1px solid var(--dh-rule); }
  .dh-fact { grid-template-columns:minmax(92px,24%) 1fr; }

  /* Community: headline above, the three channels side by side underneath. */
  .dh-community__shell { display:block; }
  .dh-community__intro { margin-bottom:clamp(28px,3.5vw,48px); }
  .dh-socials {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(12px,1.4vw,20px);
  }
  .dh-social { min-height:88px; }

  /* A 34px logo in a 294px band read as an accident rather than a device. */
  .dh-partner-slot { height:clamp(46px,3.4vw,64px); }
  .dh-marquee__group { gap:clamp(56px,5vw,96px); }
}

@media (min-width: 1500px) {
  .dh-partner-slot { height:70px; }
}

/* --------------------------------------------------------------------------
   Countdown — real, useful density in the Next Frequency block
   -------------------------------------------------------------------------- */
.dh-countdown {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:clamp(20px,2.4vw,30px);
}
.dh-countdown__cell {
  flex:0 1 auto;
  min-width:92px;
  padding:14px 18px;
  border:1px solid var(--dh-rule);
  border-radius:10px;
  background:rgba(255,246,226,.02);
}
.dh-countdown__cell b {
  display:block;
  font-weight:900;
  font-variation-settings:'wdth' 70;
  font-size:clamp(28px,3.4vw,44px);
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.dh-countdown__cell span {
  display:block;
  margin-top:7px;
  font-weight:600;
  font-size:var(--dh-t-label);
  letter-spacing:.13em;
  color:var(--dh-muted);
  text-transform:uppercase;
}
.dh-countdown--past .dh-countdown__cell b { font-size:clamp(20px,2.2vw,28px); }
@media (max-width:480px) {
  .dh-countdown__cell { flex:1 1 0; min-width:0; padding:12px 10px; text-align:center; }
}

/* --------------------------------------------------------------------------
   Rückblick teaser — the bridge from the homepage to the archive
   -------------------------------------------------------------------------- */
.dh-recap {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(26px,4vw,72px);
}
.dh-recap__text {
  flex:1 1 min(100%,460px);
  min-width:0;
  /* Die Ueberschrift richtete sich nach der Viewport-Breite, nicht nach ihrer
     Spalte: bei 2000 px stand "DOPPELHERTZ" in 138 px und brauchte 775 px in
     einer 734 px breiten Spalte — das Z ragte hinaus. */
  container-type:inline-size;
}
.dh-recap__text .dh-headline { font-size:clamp(30px,5.4vw,104px); }
.dh-recap__text .dh-headline { font-size:clamp(30px,15cqi,138px); }
.dh-recap__text .dh-label { margin-bottom:18px; }
.dh-recap__text .dh-headline { margin-bottom:20px; }
.dh-recap__text .dh-body { max-width:46ch; margin-bottom:26px; }
.dh-recap__fig { margin:0; flex:1 1 min(100%,480px); }
.dh-recap__fig img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:50% 40%;
  filter:contrast(1.08) saturate(.6) brightness(.8);
}

/* --------------------------------------------------------------------------
   Archive page
   -------------------------------------------------------------------------- */
.dh-archive { padding:calc(var(--dh-s6) + 60px) var(--dh-pad) var(--dh-s6); }
.dh-archive__head { max-width:var(--dh-max); margin:0 auto clamp(40px,6vw,80px); }
.dh-archive__head .dh-headline { margin:14px 0 20px; }
.dh-archive__head .dh-body { max-width:56ch; }

.dh-edition { max-width:var(--dh-max); margin:0 auto; }
.dh-edition__bar {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:26px;
  border-bottom:1px solid var(--dh-rule);
}
.dh-edition__no {
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:clamp(48px,11vw,150px);
  line-height:.84;
  letter-spacing:-.035em;
}
.dh-edition__when { text-align:right; line-height:1.8; }
.dh-edition__grid {
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,70px);
  padding:clamp(30px,4vw,56px) 0;
}
.dh-edition__col { flex:1 1 min(100%,440px); min-width:0; }
.dh-edition__col .dh-label { margin-bottom:12px; }

/* --------------------------------------------------------------------------
   Semantics and utilities added in the 10/10 pass
   -------------------------------------------------------------------------- */

/* Headings now carry the display classes, so their UA margin has to go. */
.dh-page h2.dh-display,
.dh-page h2.dh-vid__head-title,
.dh-page h2.dh-headline { margin:0; }

/* Visible to screen readers, not on screen. */
.dh-sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Keyboard users should not have to walk the whole navigation. */
.dh-skip {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:300;
  padding:14px 20px;
  background:var(--dh-accent);
  color:var(--dh-ink);
  font-weight:600;
  font-size:14px;
  border-radius:0 0 10px 0;
}
.dh-page a.dh-skip,
.dh-page a.dh-skip:focus,
.dh-page a.dh-skip:hover {
  /* .dh-page a ist (0,1,1) und schlägt .dh-skip (0,1,0): ohne diese Regel
     stand Papier auf Orange — 2,60:1 und damit unter WCAG AA. */
  color:var(--dh-ink);
}
.dh-skip:focus {
  left:0;
}

.dh-alerts { display:flex; flex-wrap:wrap; gap:10px; }
.dh-alerts .dh-btn { white-space:normal; }



@media (max-width:768px) {
  .dh-alerts { width:100%; }
  .dh-alerts .dh-btn { flex:1 1 100%; justify-content:center; }
}

/* Server-rendered fallbacks: emitted only when the asset is missing, so they
   carry their own visibility instead of relying on the JS onerror path. */
.dh-logo__text--only { display:block; }

.dh-archive-video {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:contrast(1.06) brightness(.9) saturate(.85);
}

/* Calendar button — the .ics is handed to the OS, which opens the Calendar app
   on iOS and macOS. No `download` attribute: it would route the file to Files
   instead of the calendar. */
.dh-btn--cal { gap:12px; }
.dh-btn__cal-label { display:inline-flex; align-items:center; gap:10px; }
.dh-btn__cal-icon { flex:0 0 auto; width:18px; height:18px; color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   Icons
   One <symbol> sprite at the top of the page, referenced by <use>. Keeps the
   path data out of the markup where the same icon appears four times over.
   -------------------------------------------------------------------------- */
.dh-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Every icon holder shares the same internals; only the box size differs. */
.dh-btn__icon,
.dh-social__icon,
.dh-btn__cal-icon,
.dh-footer__icon {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
}
.dh-btn__icon svg,
.dh-social__icon svg,
.dh-btn__cal-icon svg,
.dh-footer__icon svg {
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

.dh-btn__icon { width:18px; height:18px; margin-right:9px; color:var(--dh-accent); }
/* On the orange button the icon takes the ink colour like the label. */
.dh-btn--primary .dh-btn__icon { color:currentColor; }
.dh-btn--ghost:hover .dh-btn__icon { color:var(--dh-accent-hi); }
.dh-btn--cal:hover .dh-btn__cal-icon { color:var(--dh-accent-hi); }

.dh-footer__icon { width:14px; height:14px; margin-right:8px; color:var(--dh-accent); }
.dh-footer__col nav a,
.dh-footer__ig { display:inline-flex; align-items:center; }
.dh-footer__ig:hover .dh-footer__icon { color:var(--dh-accent-hi); }

/* Mobile menu buttons centre their label, so the icon rides along. */
.dh-nav-actions a { gap:0; }
.dh-nav-actions .dh-btn__icon { width:17px; height:17px; margin-right:8px; }

@media (max-width:768px) {
  .dh-footer__icon { width:15px; height:15px; }
}

/* --------------------------------------------------------------------------
   Primary buttons: ink on accent
   `.dh-page a` (0,1,1) outranked `.dh-btn--primary` (0,1,0), so every orange
   button that was not additionally qualified rendered paper-on-orange —
   2.60:1, well under AA. Raised to (0,2,1) so the rule actually lands.
   Same trap as the burger menu and the full-bleed figure; new button rules
   belong under `.dh-page`.
   -------------------------------------------------------------------------- */
.dh-page .dh-btn--primary,
.dh-page .dh-pop__cta,
.dh-page .dh-sticky a,
.dh-page .dh-nav-actions__tickets { color:var(--dh-ink); }

.dh-page .dh-btn--primary:hover,
.dh-page .dh-nav-actions__tickets:hover { color:var(--dh-ink); }

/* The sticker inverts on hover, so it keeps its own pairing. */
.dh-page .dh-pop__cta:hover { background:var(--dh-ink); color:var(--dh-paper); }

/* --------------------------------------------------------------------------
   Tickets page + consent-gated embed
   -------------------------------------------------------------------------- */
.dh-tickets__facts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2px;
  margin:0 0 24px;
  background:var(--dh-rule-soft);
  border:1px solid var(--dh-rule-soft);
}
.dh-tickets__facts div { background:rgba(255,246,226,.02); padding:18px 16px; }
.dh-tickets__facts b {
  display:block;
  font-weight:900; font-variation-settings:'wdth' 70;
  font-size:clamp(24px,3vw,34px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.dh-tickets__facts span {
  display:block; margin-top:7px;
  font-weight:600; font-size:var(--dh-t-label); letter-spacing:.13em;
  color:var(--dh-dim); text-transform:uppercase;
}
.dh-tickets__where { max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }

/* --------------------------------------------------------------------------
   Ticketstufen

   Der Bühnenzutritt haengt an einem einzelnen, streng limitierten Ticket. Wer
   das erst im Shop erfaehrt, hat vorher etwas anderes erwartet — deshalb steht
   der Unterschied ueber dem iframe, in unserer eigenen Sprache.
   -------------------------------------------------------------------------- */
.dh-tiers { margin:clamp(28px,4vw,44px) 0 clamp(22px,3vw,34px); }
.dh-tiers__head {
  margin:0 0 18px;
  font-weight:800;
  font-variation-settings:'wdth' 84;
  font-size:clamp(19px,2.2vw,26px);
  line-height:1.15;
}
.dh-tiers__list { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.dh-tiers__list li {
  display:grid;
  gap:5px;
  padding:16px 18px;
  border:1px solid var(--dh-rule);
  border-radius:12px;
  background:rgba(255,246,226,.02);
}
.dh-tiers__list b {
  font-weight:700;
  font-size:clamp(15px,1.5vw,17px);
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.dh-tiers__list span { font-size:14px; line-height:1.6; color:var(--dh-muted); }
/* .dh-tiers__list span ist (0,1,1) und schlaegt .dh-tiers__flag (0,1,0) —
   ohne die Klasse davor stand hier Muted auf Orange, 1,52:1. Fuenftes Mal
   dieselbe Falle in diesem Projekt, diesmal hausgemacht. */
.dh-tiers__list .dh-tiers__flag {
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--dh-ink);
  background:var(--dh-accent);
  padding:3px 8px;
  border-radius:99px;
}
.dh-tiers__stage { border-color:var(--dh-accent); }

.dh-embed { position:relative; }
.dh-embed__gate {
  padding:clamp(24px,4vw,40px);
  border:1px solid var(--dh-rule);
  border-radius:14px;
  background:rgba(255,246,226,.02);
}
.dh-embed__title {
  margin:14px 0 14px;
  font-weight:800; font-variation-settings:'wdth' 84;
  font-size:clamp(20px,2.4vw,28px); line-height:1.15;
}
.dh-embed__gate .dh-body { max-width:64ch; }
.dh-embed__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.dh-embed__note { margin-top:16px; font-size:13px; line-height:1.6; color:var(--dh-dim); max-width:64ch; }
.dh-embed__note a { color:var(--dh-accent); }
.dh-embed iframe {
  width:100%;
  min-height:640px;
  border:0;
  border-radius:14px;
  background:var(--dh-paper);
  display:block;
}
@media (max-width:600px) {
  .dh-embed__actions .dh-btn { flex:1 1 100%; justify-content:center; }
  .dh-embed iframe { min-height:720px; }
}

/* --------------------------------------------------------------------------
   Rückblick teaser — the bridge from the homepage to the archive
   -------------------------------------------------------------------------- */
.dh-recap {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(26px,4vw,72px);
}
.dh-recap__text {
  flex:1 1 min(100%,460px);
  min-width:0;
  /* Die Ueberschrift richtete sich nach der Viewport-Breite, nicht nach ihrer
     Spalte: bei 2000 px stand "DOPPELHERTZ" in 138 px und brauchte 775 px in
     einer 734 px breiten Spalte — das Z ragte hinaus. */
  container-type:inline-size;
}
.dh-recap__text .dh-headline { font-size:clamp(30px,5.4vw,104px); }
.dh-recap__text .dh-headline { font-size:clamp(30px,15cqi,138px); }
.dh-recap__text .dh-label { margin-bottom:18px; }
.dh-recap__text .dh-headline { margin-bottom:20px; }
.dh-recap__text .dh-body { max-width:46ch; margin-bottom:26px; }
.dh-recap__fig { margin:0; flex:1 1 min(100%,480px); }
.dh-recap__fig img {
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:50% 40%;
  filter:contrast(1.08) saturate(.6) brightness(.8);
}

/* --------------------------------------------------------------------------
   Archive page
   -------------------------------------------------------------------------- */
.dh-archive { padding:calc(var(--dh-s6) + 60px) var(--dh-pad) var(--dh-s6); }
.dh-archive__head { max-width:var(--dh-max); margin:0 auto clamp(40px,6vw,80px); }
.dh-archive__head .dh-headline { margin:14px 0 20px; }
.dh-archive__head .dh-body { max-width:56ch; }

.dh-edition { max-width:var(--dh-max); margin:0 auto; }
.dh-edition__bar {
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:26px;
  border-bottom:1px solid var(--dh-rule);
}
.dh-edition__no {
  font-weight:900;
  font-variation-settings:'wdth' 66;
  font-size:clamp(48px,11vw,150px);
  line-height:.84;
  letter-spacing:-.035em;
}
.dh-edition__when { text-align:right; line-height:1.8; }
.dh-edition__grid {
  display:flex;
  flex-wrap:wrap;
  gap:clamp(24px,4vw,70px);
  padding:clamp(30px,4vw,56px) 0;
}
.dh-edition__col { flex:1 1 min(100%,440px); min-width:0; }
.dh-edition__col .dh-label { margin-bottom:12px; }

/* --------------------------------------------------------------------------
   Semantics and utilities added in the 10/10 pass
   -------------------------------------------------------------------------- */

/* Headings now carry the display classes, so their UA margin has to go. */
.dh-page h2.dh-display,
.dh-page h2.dh-vid__head-title,
.dh-page h2.dh-headline { margin:0; }

/* Visible to screen readers, not on screen. */
.dh-sr-only {
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* Keyboard users should not have to walk the whole navigation. */
.dh-skip {
  position:absolute;
  left:-9999px;
  top:0;
  z-index:300;
  padding:14px 20px;
  background:var(--dh-accent);
  color:var(--dh-ink);
  font-weight:600;
  font-size:14px;
  border-radius:0 0 10px 0;
}
.dh-skip:focus {
  left:0;
  color:var(--dh-ink);
}

.dh-alerts { display:flex; flex-wrap:wrap; gap:10px; }
.dh-alerts .dh-btn { white-space:normal; }



@media (max-width:768px) {
  .dh-alerts { width:100%; }
  .dh-alerts .dh-btn { flex:1 1 100%; justify-content:center; }
}

/* Server-rendered fallbacks: emitted only when the asset is missing, so they
   carry their own visibility instead of relying on the JS onerror path. */
.dh-logo__text--only { display:block; }

.dh-archive-video {
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  filter:contrast(1.06) brightness(.9) saturate(.85);
}

/* Calendar button — the .ics is handed to the OS, which opens the Calendar app
   on iOS and macOS. No `download` attribute: it would route the file to Files
   instead of the calendar. */
.dh-btn--cal { gap:12px; }
.dh-btn__cal-label { display:inline-flex; align-items:center; gap:10px; }
.dh-btn__cal-icon { flex:0 0 auto; width:18px; height:18px; color:var(--dh-accent); }

/* --------------------------------------------------------------------------
   Icons
   One <symbol> sprite at the top of the page, referenced by <use>. Keeps the
   path data out of the markup where the same icon appears four times over.
   -------------------------------------------------------------------------- */
.dh-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Every icon holder shares the same internals; only the box size differs. */
.dh-btn__icon,
.dh-social__icon,
.dh-btn__cal-icon,
.dh-footer__icon {
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
}
.dh-btn__icon svg,
.dh-social__icon svg,
.dh-btn__cal-icon svg,
.dh-footer__icon svg {
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

.dh-btn__icon { width:18px; height:18px; margin-right:9px; color:var(--dh-accent); }
/* On the orange button the icon takes the ink colour like the label. */
.dh-btn--primary .dh-btn__icon { color:currentColor; }
.dh-btn--ghost:hover .dh-btn__icon { color:var(--dh-accent-hi); }
.dh-btn--cal:hover .dh-btn__cal-icon { color:var(--dh-accent-hi); }

.dh-footer__icon { width:14px; height:14px; margin-right:8px; color:var(--dh-accent); }
.dh-footer__col nav a,
.dh-footer__ig { display:inline-flex; align-items:center; }
.dh-footer__ig:hover .dh-footer__icon { color:var(--dh-accent-hi); }

/* Mobile menu buttons centre their label, so the icon rides along. */
.dh-nav-actions a { gap:0; }
.dh-nav-actions .dh-btn__icon { width:17px; height:17px; margin-right:8px; }

@media (max-width:768px) {
  .dh-footer__icon { width:15px; height:15px; }
}

/* --------------------------------------------------------------------------
   Primary buttons: ink on accent
   `.dh-page a` (0,1,1) outranked `.dh-btn--primary` (0,1,0), so every orange
   button that was not additionally qualified rendered paper-on-orange —
   2.60:1, well under AA. Raised to (0,2,1) so the rule actually lands.
   Same trap as the burger menu and the full-bleed figure; new button rules
   belong under `.dh-page`.
   -------------------------------------------------------------------------- */
.dh-page .dh-btn--primary,
.dh-page .dh-pop__cta,
.dh-page .dh-sticky a,
.dh-page .dh-nav-actions__tickets { color:var(--dh-ink); }

.dh-page .dh-btn--primary:hover,
.dh-page .dh-nav-actions__tickets:hover { color:var(--dh-ink); }

/* The sticker inverts on hover, so it keeps its own pairing. */
.dh-page .dh-pop__cta:hover { background:var(--dh-ink); color:var(--dh-paper); }

/* --------------------------------------------------------------------------
   Tickets page + consent-gated embed
   -------------------------------------------------------------------------- */
.dh-tickets__facts {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:2px;
  margin:0 0 24px;
  background:var(--dh-rule-soft);
  border:1px solid var(--dh-rule-soft);
}
.dh-tickets__facts div { background:rgba(255,246,226,.02); padding:18px 16px; }
.dh-tickets__facts b {
  display:block;
  font-weight:900; font-variation-settings:'wdth' 70;
  font-size:clamp(24px,3vw,34px); line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.dh-tickets__facts span {
  display:block; margin-top:7px;
  font-weight:600; font-size:var(--dh-t-label); letter-spacing:.13em;
  color:var(--dh-dim); text-transform:uppercase;
}
.dh-tickets__where { max-width:62ch; margin-bottom:clamp(30px,4vw,48px); }

.dh-embed { position:relative; }
.dh-embed__gate {
  padding:clamp(24px,4vw,40px);
  border:1px solid var(--dh-rule);
  border-radius:14px;
  background:rgba(255,246,226,.02);
}
.dh-embed__title {
  margin:14px 0 14px;
  font-weight:800; font-variation-settings:'wdth' 84;
  font-size:clamp(20px,2.4vw,28px); line-height:1.15;
}
.dh-embed__gate .dh-body { max-width:64ch; }
.dh-embed__actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.dh-embed__note { margin-top:16px; font-size:13px; line-height:1.6; color:var(--dh-dim); max-width:64ch; }
.dh-embed__note a { color:var(--dh-accent); }
.dh-embed iframe {
  width:100%;
  min-height:640px;
  border:0;
  border-radius:14px;
  background:var(--dh-paper);
  display:block;
}
@media (max-width:600px) {
  .dh-embed__actions .dh-btn { flex:1 1 100%; justify-content:center; }
  .dh-embed iframe { min-height:720px; }
}

/* --------------------------------------------------------------------------
   Consent bar
   Two equally weighted choices, no pre-ticked anything, no dark pattern.
   -------------------------------------------------------------------------- */
.dh-consent {
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:140;
  padding:clamp(16px,2.4vw,22px) var(--dh-pad);
  background:var(--dh-ink);
  border-top:1px solid var(--dh-accent);
  box-shadow:0 -20px 50px rgba(0,0,0,.55);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:clamp(14px,2.4vw,32px);
  justify-content:space-between;
}
.dh-consent[hidden] { display:none; }
.dh-consent__text { flex:1 1 min(100%,560px); }
.dh-consent__text b {
  display:block;
  font-weight:700; font-variation-settings:'wdth' 84;
  font-size:clamp(15px,1.6vw,18px); line-height:1.2; margin-bottom:6px;
}
.dh-consent__text p { font-size:14px; line-height:1.55; color:var(--dh-muted); max-width:70ch; }
.dh-consent__text a { color:var(--dh-accent); }
.dh-consent__actions { display:flex; flex-wrap:wrap; gap:10px; flex:0 0 auto; }
.dh-consent__actions .dh-btn { min-width:150px; justify-content:center; }
@media (max-width:600px) {
  .dh-consent__actions { width:100%; }
  .dh-consent__actions .dh-btn { flex:1 1 0; min-width:0; }
}

/* The sticky ticket bar would sit under the consent bar. */
body.dh-consent-open .dh-sticky { bottom:132px; }
body.dh-consent-open .dh-pop { bottom:212px; }

/* --------------------------------------------------------------------------
   Button variants on <button> elements
   `.dh-page button` (0,1,1) strips background, border and padding so bare
   buttons look like text. It also outranked `.dh-btn--primary` (0,1,0), which
   left the consent "Akzeptieren" and the embed's "Ticketshop laden" as
   invisible dark-on-dark labels. Restored at (0,2,1).
   Fourth appearance of this trap — see README.
   -------------------------------------------------------------------------- */
.dh-page button.dh-btn {
  padding:16px 24px;
  border-radius:10px;
  text-align:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.dh-page button.dh-btn--sm { padding:11px 19px; }
.dh-page button.dh-btn--block { padding:19px 22px; }

.dh-page button.dh-btn--primary { background:var(--dh-accent); color:var(--dh-ink); }
.dh-page button.dh-btn--primary:hover { background:var(--dh-accent-hi); color:var(--dh-ink); }

.dh-page button.dh-btn--ghost { border:1px solid rgba(255,246,226,.26); color:var(--dh-paper); }
.dh-page button.dh-btn--ghost:hover { border-color:var(--dh-accent); color:var(--dh-paper); }