/* latin-ext */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-latin-ext.e66dfabd.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;
}
/* latin */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-latin.2e308a05.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/spectral-latin-ext-italic.1f5a1f76.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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/spectral-latin-italic.839c9455.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spectral-latin-ext-italic.1f5a1f76.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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spectral-latin-italic.839c9455.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/spectral-latin-ext.8e851d59.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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(/fonts/spectral-latin.38929e98.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spectral-latin-ext.8e851d59.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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/spectral-latin.38929e98.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;
}
/* latin-ext */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spectral-latin-ext.8e851d59.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;
}
/* latin */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/spectral-latin.38929e98.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;
}

:root{
  --ink:#0B0B0B; --ink-2:#141414; --paper:#FFFFFF; --red:#E40000; --red-dim:#B70000;
  --dim:#9C9C9C; --red-txt:#F5443A; --line:rgba(255,255,255,.16);
  --disp:Anton,Impact,"Haettenschweiler",sans-serif;
  --body:Spectral,Georgia,"Times New Roman",serif;
  --e:cubic-bezier(.2,.7,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);
  font-size:18px;line-height:1.62;font-weight:300;-webkit-font-smoothing:antialiased}
img,picture{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(100% - 2.5rem,76rem);margin-inline:auto}
.skip{position:absolute;left:-999px;z-index:99;padding:.7rem 1rem;background:var(--red);
  color:#fff;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;
  box-shadow:0 0 0 4px rgba(255,255,255,.35)}

/* ---- header ---- */
.hd{position:fixed;inset-inline:0;top:0;z-index:40;transition:background .4s var(--e)}
.hd::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:1;
  transition:opacity .4s var(--e)}
.hd::before{opacity:1}
.hd.solid::before{opacity:1;backdrop-filter:blur(10px)}
.hd{border-bottom:1px solid var(--line)}
.bar{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;padding:.9rem 0}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.logo img{width:34px;height:34px}
.logo b{font-family:var(--disp);font-size:1.05rem;letter-spacing:.16em}
.nav{display:flex;gap:1.35rem;font-family:var(--disp);font-size:.78rem;letter-spacing:.13em;
  text-transform:uppercase}
.nav a{text-decoration:none;color:rgba(255,255,255,.68);position:relative;padding:.3rem 0}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--red);transition:right .32s var(--e)}
.nav a:hover::after,.nav a[aria-current]::after{right:0}
.nav a[aria-current]{color:#fff}
.burger{display:none;width:44px;height:44px;border:0;background:none;padding:8px 6px;
  cursor:pointer;color:#fff;flex:none}
.burger span{display:block;height:2px;background:currentColor;margin:5px 0;
  transition:transform .34s var(--e),opacity .2s}
.burger[aria-expanded="true"]{position:relative;z-index:60}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  .js .burger{display:block}
  /* the burger is script-driven, so without JS the nav must stay in the flow
     rather than being parked off-screen with no way to bring it back */
  .js .nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;
    justify-content:center;gap:.1rem;padding:2rem;font-size:1.5rem;letter-spacing:.04em;
    transform:translateY(-100%);transition:transform .5s var(--e)}
  .nav a{color:rgba(255,255,255,.9);padding:.55rem 0}
  .js .nav.open{transform:translateY(0)}
  .nav{flex-wrap:wrap;gap:.35rem 1.1rem;padding:.4rem 0 0}
}

/* ---- hero ---- */

/* Never crop the photograph. A fixed-height hero sliced the top and bottom
   off on an ultra-wide screen and the left and right off on a phone, so the
   image keeps its own aspect ratio and the frame follows it. */







.kick{font-family:var(--disp);font-size:clamp(.72rem,2vw,.86rem);letter-spacing:.3em;
  text-transform:uppercase;color:var(--red-txt);margin:0 0 .55rem}
h1{font-family:var(--disp);font-size:clamp(2.4rem,13vw,12rem);line-height:1.16;
  letter-spacing:-.01em;margin:0;text-transform:uppercase;overflow-wrap:break-word}
h1 em{font-style:normal;color:var(--red)}
.hero-sub{font-size:clamp(1.02rem,2.5vw,1.45rem);margin:1.4rem 0 0;max-width:min(100%,62ch);
  color:rgba(255,255,255,.9)}

/* ---- sections ---- */
section{padding-block:clamp(3.5rem,9vw,7rem)}
section + section{padding-top:0}
.eyebrow{font-family:var(--disp);font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--red-txt);margin:0 0 1.4rem;line-height:1.4}
h2,.h2{font-family:var(--disp);font-size:clamp(1.7rem,6vw,4.4rem);line-height:.94;
  margin:0 0 1.5rem;text-transform:uppercase;overflow-wrap:break-word}
h3{font-family:var(--disp);text-transform:uppercase;line-height:1;margin:0}
p{max-width:38rem}
.body{max-width:38rem;color:rgba(255,255,255,.82)}
.body p{margin:0 0 1.15rem}
.lead{font-size:clamp(1.1rem,2.6vw,1.5rem);color:#fff;
  max-width:min(100%,62ch);margin:0 0 1.6rem}
.press{margin:2.6rem 0 0;max-width:42rem;border-left:3px solid var(--red);
  padding-left:clamp(1rem,3vw,1.8rem)}
.press p{font-style:italic;font-size:clamp(1.05rem,2.4vw,1.28rem);margin:0}
.press cite{display:block;font-family:var(--disp);font-style:normal;font-size:.74rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:.9rem}

/* ---- photo strip ---- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.strip picture{position:relative;overflow:hidden;aspect-ratio:1}
.strip picture{display:block;overflow:hidden;aspect-ratio:1}
.strip img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);
  transition:filter .6s var(--e),transform .8s var(--e)}
.strip picture:hover img{transform:scale(1.05)}
@media(max-width:700px){.strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  /* a tall slot on a narrow screen crops a portrait to a torso */
  
  
}


/* ---- hero ------------------------------------------------------------- */
/* Full-bleed, with the crop anchored on the subject rather than the centre of
   the frame: FOCUS records where the person actually is in each photograph. */
.hero{position:relative;overflow:hidden;background:var(--ink);
  height:min(72svh,700px)}
.hero-shot{position:absolute;inset:0}
.hero-shot picture{display:block;height:100%}
.hero-shot img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 32%);filter:grayscale(1) contrast(1.14)}
.hero-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding-block:clamp(4rem,10vw,7rem) clamp(1.8rem,4vw,3rem);
  background:linear-gradient(to bottom,rgba(11,11,11,0),rgba(11,11,11,.6) 45%,
    rgba(11,11,11,.94))}
@media(max-width:719px){
  /* a shorter frame on a phone crops far less off the sides */
  .hero{height:min(56svh,460px)}
}

/* ---- events, set like a bill ---- */
.ev{border-top:1px solid var(--line);padding:clamp(2rem,5vw,3.4rem) 0;
  max-width:62rem;margin-inline:auto}
.ev .pres{font-family:var(--disp);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin:1.2rem 0 .3rem}
.ev .koop{margin:1.8rem 0 .6rem}
.ev-h{max-width:38rem}

/* price, door time and venue — the three things a visitor decides on, set
   the way the old page set them: an icon each, side by side */
.ev-facts{list-style:none;display:flex;flex-wrap:wrap;gap:1.6rem 3.2rem;
  margin:1.7rem 0 0;padding:1.3rem 0 0;border-top:1px solid var(--line)}
.ev-facts li{display:flex;flex-direction:column;gap:.45rem;min-width:0}
.ev-facts svg{width:20px;height:20px;color:var(--red-txt);flex:none}
.ev-facts b{font-family:var(--body);font-weight:400;font-size:1.02rem;line-height:1.4;
  color:#fff}
.ev-facts small{display:block;font-size:.8rem;color:var(--dim);margin-top:.2rem;
  max-width:22ch}
/* the icon says what it is; the words stay for screen readers */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);
  white-space:nowrap}
.ev-note{font-size:.85rem;color:var(--dim);margin:.9rem 0 0;max-width:38rem}

/* the ticket link is the one thing that must look like a button */
.tix{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.5rem}
.tk{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.3rem;
  background:var(--red);color:#fff;text-decoration:none;border-radius:2px;
  font-family:var(--disp);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .25s var(--e),transform .25s var(--e)}
.tk svg{width:15px;height:15px;flex:none}
.tk:hover,.tk:focus-visible{background:#fff;color:var(--ink);transform:translateY(-1px)}
/* every concert here has already happened; only the one the page calls the
   next gets a solid button, the archive gets an outline */
/* the provisional marker rides beside the section label where there is room,
   and drops onto its own line where there is not */
.ev.ph .sec{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.ev.ph .sec::after{content:"Angaben folgen";font-size:.66rem;letter-spacing:.18em;
  color:var(--ink);background:var(--red-txt);padding:.3rem .55rem;border-radius:2px}
.ev.ph .evh,.ev.ph .band,.ev.ph .lu li,.ev.ph .ev-facts b{opacity:.55}
.ev.past .tk{background:none;border:1px solid #3A3A3A;color:var(--dim)}
.ev.past .tk:hover,.ev.past .tk:focus-visible{border-color:#fff;color:#fff;
  background:none}

.ev-body{margin-top:1.9rem;max-width:40rem}
.ev-body p{margin:0 0 1rem}
/* Partner emblems arrive three ways: opaque with their own white ground,
   transparent with dark ink, and transparent with white ink. One filter cannot
   serve all three, so each sits on a light chip and only the white-ink ones
   are flipped. */
/* Emblems sit straight on the page — no panel behind them. Most arrive as
   dark ink (some on their own white ground), so inverting turns that ground
   black, where it disappears into the page, and lifts the ink to white. The
   two that are already white ink are left alone. `brightness(0)` was the old
   mistake: it crushed every pixel to black first, so invert produced a solid
   white slab. */
.partner{display:flex;flex-wrap:wrap;align-items:center;gap:1.8rem;margin:1.2rem 0 0}
.partner .chip{display:inline-flex;align-items:center}
.partner img{width:auto;height:auto;min-width:0;min-height:0;
  max-width:150px;max-height:46px;
  filter:grayscale(1) invert(1) brightness(var(--lb,1)) opacity(.9);
  transition:opacity .3s var(--e)}
.partner .chip.lit img{filter:grayscale(1) brightness(var(--lb,1)) opacity(.9)}
.partner a.chip:hover img,.partner a.chip:focus-visible img{opacity:1}
/* the first block and the concert's main image sit side by side */
.ev-top{display:grid;gap:1.6rem}
@media(min-width:900px){
  .ev-top{grid-template-columns:minmax(0,1fr) minmax(0,20rem);
    gap:2.4rem;align-items:start}
  /* a concert with no artwork keeps the full measure rather than a void */
  .ev-top:not(:has(.ev-main)){grid-template-columns:minmax(0,1fr)}
}
.ev-main{margin:0;position:relative;overflow:hidden}
.ev-main picture{display:block}
.ev-main img{display:block;width:100%;height:auto;
  filter:grayscale(1) contrast(1.04)}
.ev-main picture{display:block;max-width:calc(var(--ar,1.5) * min(22rem,34svh));
  margin-inline:auto}
/* it fades into the page instead of sitting in a hard box */
.ev-main::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 55%,var(--ink) 99%)}

/* the remaining artwork: two across, or one at full width */
.art{display:grid;gap:1rem;margin:1.8rem 0 0}
.art picture{display:block}
/* a poster is shown whole; its height is capped through its own ratio so a
   tall one cannot run away, and nothing is letterboxed onto a panel */
.art .shot{display:block;width:100%;
  max-width:calc(var(--ar,1.5) * min(26rem,44svh));margin-inline:auto}
.art picture{display:block;width:100%;
  max-width:calc(var(--ar,1.5) * min(26rem,44svh));margin-inline:auto}
.art img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.04)}
@media(min-width:720px){.art.two{grid-template-columns:1fr 1fr}}
.ev > *:last-child{margin-bottom:0}
.ev .d{font-family:var(--disp);font-size:.86rem;letter-spacing:.2em;color:var(--red-txt);
  margin:0 0 .6rem;text-transform:uppercase}
.ev h3,.ev .evh{font-family:var(--disp);text-transform:uppercase;line-height:1.16;
  font-size:clamp(1.35rem,4.6vw,2.9rem);margin:1.6rem 0 .9rem;max-width:22ch}
.ev .band{font-size:1.02rem;color:#fff;margin:0 0 1rem}
.ev .evq{font-style:italic;font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.35;
  color:#fff;margin:0 0 1rem;max-width:30ch}
.lu{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-wrap:wrap;gap:.35rem 1.5rem;
  font-family:var(--disp);font-size:.8rem;letter-spacing:.1em;color:var(--dim)}
.js .lu li{opacity:0;transform:translateY(8px)}
.js .rv.in .lu li{opacity:1;transform:none;
  transition:opacity .5s var(--e) calc(var(--i) * 70ms),
             transform .5s var(--e) calc(var(--i) * 70ms)}
.fine{font-size:.82rem;color:var(--dim);margin:0}
/* the next concert sits beside the introduction rather than below it */
.split{display:grid;gap:clamp(2rem,5vw,3.5rem)}
@media(min-width:900px){
  .split{grid-template-columns:1fr 1fr;align-items:start}
  .split-b{position:sticky;top:6rem}
}
.split-b{border-top:2px solid var(--red-txt);padding-top:1.6rem}
.split-b .h2{margin:.2rem 0 0}
.meta-line{font-family:var(--disp);font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);margin:.9rem 0 1.4rem}
.attrib{font-family:var(--disp);font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:.7rem 0 0}
.ev .fact{font-family:var(--disp);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin:.15rem 0}
.ev .sec{font-family:var(--disp);font-size:clamp(1rem,2.6vw,1.4rem);
  letter-spacing:.2em;text-transform:uppercase;color:var(--red-txt);
  margin:0 0 1.4rem}
.ev:has(.sec){border-top-width:2px;border-top-color:var(--red-txt)}


/* ---- people ---- */
.p{display:grid;grid-template-columns:1fr 1.25fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  border-top:1px solid var(--line);padding:clamp(2rem,5vw,3.2rem) 0}
.p picture{display:block;overflow:hidden;aspect-ratio:1}
.shot-wide{margin:0}
.shot-wide picture{display:block;overflow:hidden;aspect-ratio:16/9;
  max-height:min(56svh,540px)}
.shot-wide img{width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 30%);filter:grayscale(1) contrast(1.08)}
.p img{width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 22%);filter:grayscale(1) contrast(1.1)}
.role{font-family:var(--disp);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red-txt);margin:0}
.p h3{font-size:clamp(1.5rem,4.6vw,3rem);margin:.35rem 0 .9rem}
.q{font-style:italic;font-size:clamp(1.05rem,2.4vw,1.25rem);margin:0 0 .9rem;color:#fff}
.bio{margin:0;color:rgba(255,255,255,.78);font-size:.99rem}
@media(max-width:760px){.p{grid-template-columns:1fr}}

/* ---- links ---- */
.ll{list-style:none;padding:0;margin:0;columns:2;column-gap:2.5rem;max-width:44rem}
.ll li{break-inside:avoid;border-bottom:1px solid var(--line)}
.ll a{display:block;padding:.8rem 0;text-decoration:none;font-family:var(--disp);
  font-size:.95rem;letter-spacing:.06em;transition:padding-left .3s var(--e),color .3s var(--e)}
.ll a:hover{padding-left:.6rem;color:var(--red-txt)}
@media(max-width:620px){.ll{columns:1}}

/* ---- contact + legal prose ---- */
.big{font-family:var(--disp);font-size:clamp(1.5rem,6vw,3.6rem);line-height:1.02;
  color:var(--red);text-decoration:none;text-transform:uppercase;display:inline-block}
.big:hover{color:#fff}
.meta{margin:1.8rem 0 0;color:var(--dim);display:flex;flex-wrap:wrap;gap:.35rem 2rem;
  font-size:.95rem}
.meta a{text-decoration:none} .meta a:hover{color:#fff}
.legal{max-width:46rem;overflow-wrap:anywhere}
.legal-note{font-size:.85rem;opacity:.7;margin:0 0 1.4rem}
.legal p{margin:0 0 1.05rem;color:rgba(255,255,255,.8);font-size:1rem;line-height:1.7;max-width:none}
.legal h2,.legal h3{font-family:var(--disp);font-size:1.1rem;letter-spacing:.02em;
  margin:2.2rem 0 .7rem;color:var(--red-txt);text-transform:uppercase}
.legal ul,.legal ol{margin:0 0 1.2rem 1.1rem;color:rgba(255,255,255,.8)}
.legal a{color:var(--red-txt);word-break:break-word}

.cta{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--disp);font-size:.84rem;
  letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--red-txt);
  border-bottom:2px solid currentColor;padding-bottom:.25rem;margin-top:1.4rem;
  transition:gap .3s var(--e)}
.cta:hover{gap:1rem;color:#fff}

/* ---- reveal ---- */
.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity .8s var(--e),transform .8s var(--e)}
.js .rv.in{opacity:1;transform:none}
footer{border-top:1px solid var(--line);padding:2.2rem 0 3.2rem;font-family:var(--disp);
  font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.foot{display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot a{text-decoration:none} .foot a:hover{color:#fff}


/* ---- touch targets ------------------------------------------------------ */
/* these read as text or as a logo, so the height comes from padding rather
   than from a box that would show. WCAG 2.2 AA asks for 24px; a coarse
   pointer gets the full 44 where there is room. */
.foot nav a{display:inline-block;padding:.44rem 0;}
.ll a{padding:.9rem 0;}
.cta{padding-block:.5rem;}
.meta a,.legal a{padding:.1rem 0;}
.partner a{display:inline-flex;align-items:center;min-height:44px;}
@media(hover:none){
  .foot nav a{padding:.62rem 0;}
}

@media print{
  /* white-on-black prints as white-on-white, and unrevealed sections print
     blank — the Impressum and Datenschutz are exactly what gets printed */
  html,body{background:#fff!important;color:#000!important}
  .js .rv,.js .rv .lu li,.js .lu li{opacity:1!important;transform:none!important}
  .hero,.strip,.art,.partner,.burger,.nav,footer nav,.cta,.tix{display:none!important}
  a{color:#000!important;text-decoration:underline}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  .ev,.p{break-inside:avoid;border-color:#bbb!important}
  h1,h2,h3{color:#000!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .js .rv,.js .lu li{opacity:1;transform:none}
}