/*
Theme Name:   Shift Happens
Theme URI:    https://www.shifthappensevent.com/
Author:       Ysooslow GmbH
Description:  Modernes, zweisprachiges Event-Theme für «Shift Happens» im JungfrauPark Interlaken. Benötigt das Plugin «Shift Happens Core» für Inhalte, Partner, Galerie, Instagram-Feed, Formulare und Cookie-Consent.
Version:      1.6.4
Requires at least: 6.2
Tested up to: 6.6
Requires PHP: 7.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  shift-happens
Tags:         event, one-column, custom-menu, custom-colors, translation-ready
*/

/* ============================================================
   SHIFT HAPPENS — Design system "Bergluft"
   Committed single-theme editorial identity.
   granite / basalt ground · stone / chalk paper
   glacier (cold alpine cyan) = atmosphere · flare (brake glow) = action
   ============================================================ */

:root{
  --carbon:#0B0F11;
  --granite:#12171A;
  --basalt:#1B2226;
  --basalt-2:#242C31;
  --stone:#E4E3DD;
  --chalk:#F5F4F0;
  --paper-line:#CFCEC6;
  --glacier:#93A6AD;
  --glacier-deep:#55666D;
  --flare:#F2E502;
  --flare-deep:#D9CE00;
  --flare-ink:#0B0F11;
  --flare-dim:#655F00;   /* dunkler als die CI-Farbe: erst so trägt sie kleine Schrift auf hellem Grund */
  --accent:#655F00;
  --ink:#12171A;
  --ink-2:#3E474C;
  --muted:#5A6367;
  --muted-dark:#8D989E;
  --line-dark:#2C353A;

  --maxw:1240px;
  --gutter:clamp(1.35rem, 5vw, 4.5rem);

  --f-display:"Archivo","Archivo Expanded","Helvetica Neue",Arial,sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"Chivo Mono","SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;

  --e:cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--stone);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(1rem,.95rem + .22vw,1.09rem);
  line-height:1.68;
  font-feature-settings:"kern","liga";
  overflow-x:hidden;
}
/* height:auto gehört zu max-width dazu: Bilder bringen ihre Masse als Attribute
   mit, ohne diese Zeile würde die Attributhöhe stehen bleiben und das Bild
   verzerren. Regeln mit eigener Höhe (object-fit) gewinnen weiterhin. */
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px;}

/* ---------- type ---------- */
.display{
  font-family:var(--f-display);
  font-weight:800;
  font-stretch:125%;
  text-transform:uppercase;
  line-height:.9;
  letter-spacing:-.018em;
  text-wrap:balance;
  margin:0;
}
h1.display{font-size:clamp(2.6rem,1.1rem + 6.6vw,6.6rem);}
h2.display{font-size:clamp(1.65rem,1rem + 2.1vw,2.7rem);}
h3.display{font-size:clamp(1.22rem,1rem + .9vw,1.65rem);line-height:1;}
.serif-note{
  font-family:var(--f-display);font-stretch:87%;font-weight:400;
  text-transform:none;letter-spacing:.005em;line-height:1.62;
  text-wrap:pretty;
}
/* eyebrow */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.66rem;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);
  display:flex;align-items:center;gap:.8rem;
  margin:0 0 1.6rem;
}
.eyebrow::before{content:"";width:1.9rem;height:1px;background:currentColor;flex:none;opacity:.75;}

.lead{font-size:clamp(1.06rem,1rem + .38vw,1.28rem);line-height:1.58;color:var(--ink-2);}
.dark .lead,.carbon .lead{color:#C2CBD0;}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;}
.measure{max-width:52ch;}
p{margin:0 0 1.15em;}
p:last-child{margin-bottom:0;}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(4.4rem,2.4rem + 8vw,11rem);}
.section.tight{padding-block:clamp(3rem,1.8rem + 4.5vw,6rem);}
.dark{background:var(--granite);color:var(--chalk);--accent:var(--flare);--glacier-deep:var(--glacier);}
.carbon{background:var(--carbon);color:var(--chalk);--accent:var(--flare);--glacier-deep:var(--glacier);}
.paper{background:var(--chalk);color:var(--ink);--accent:var(--flare-dim);}
.stone{background:var(--stone);color:var(--ink);--accent:var(--flare-dim);}
.grid{display:grid;gap:clamp(1.8rem,1.2rem + 2.4vw,4rem);}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));}
.split{display:grid;gap:clamp(2.2rem,1.4rem + 3.6vw,5.5rem);grid-template-columns:minmax(0,1fr);}
@media(min-width:62rem){.split{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;}
.split.text-right{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);}}

/* ---------- rail (top telemetry bar) ---------- */
.rail{
  position:fixed;inset:0 0 auto 0;z-index:70;
  background:var(--carbon);color:#9AA6AB;
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1px solid rgba(242,229,2,.18);
}
.rail .wrap{display:flex;align-items:center;gap:1.4rem;height:34px;justify-content:space-between;}
.rail-left{display:flex;gap:1.4rem;align-items:center;min-width:0;}
.rail-item{display:flex;gap:.55rem;align-items:center;white-space:nowrap;}
.rail-item b{color:var(--chalk);font-weight:500;}
.rail-dot{width:5px;height:5px;border-radius:50%;background:var(--flare);flex:none;
  box-shadow:0 0 0 0 rgba(242,229,2,.6);animation:pulse 2.6s var(--e) infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(242,229,2,.5)}70%{box-shadow:0 0 0 9px rgba(242,229,2,0)}100%{box-shadow:0 0 0 0 rgba(242,229,2,0)}}
@media(max-width:60rem){.rail-hide-sm{display:none;}}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:34px 0 auto 0;z-index:60;
  background:var(--flare);
  border-bottom:1px solid rgba(11,15,17,.14);
  color:var(--flare-ink);
}
.nav .wrap{display:flex;align-items:center;gap:1.5rem;height:66px;}
.brand{display:flex;align-items:baseline;gap:.55rem;text-decoration:none;flex:none;}
.brand .bm{font-family:var(--f-display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:1.08rem;letter-spacing:-.01em;color:var(--flare-ink);line-height:1;}
.brand .bs{font-family:var(--f-mono);font-size:.56rem;letter-spacing:.24em;color:rgba(11,15,17,.6);text-transform:uppercase;}
.menu{display:flex;align-items:center;gap:0;margin-left:auto;}
.menu > li{position:relative;list-style:none;}
.menu a,.menu button.mi{
  position:relative;
  display:flex;align-items:center;gap:.4rem;
  padding:.6rem .74rem;border:0;background:none;cursor:pointer;text-decoration:none;
  font-size:.775rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--flare-ink);transition:opacity .2s var(--e);
}
.menu a::after,.menu button.mi::after{content:"";position:absolute;left:.74rem;right:.74rem;bottom:.42rem;
  height:2px;background:var(--flare-ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--e);}
.menu a:hover::after,.menu button.mi:hover::after,.menu li.open > button.mi::after{transform:scaleX(1);}
.menu a.active::after{transform:scaleX(1);}
.caret{width:7px;height:7px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--e);opacity:.8;}
.menu li.open .caret{transform:rotate(225deg) translate(-2px,-2px);}
.menu .submenu{
  position:absolute;top:100%;left:0;min-width:16rem;
  background:var(--carbon);border:0;
  padding:.4rem;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.75);
}
.menu li.open > .submenu{opacity:1;visibility:visible;transform:none;}
.menu .submenu a{padding:.7rem .85rem;font-size:.75rem;font-weight:500;letter-spacing:.06em;color:#C9D2D6;}
.menu .submenu a::after{background:var(--flare);left:.85rem;right:.85rem;bottom:.5rem;}
.menu .submenu a:hover{color:var(--flare);}
.nav-actions{display:flex;align-items:center;gap:.75rem;flex:none;}

.lang{display:flex;align-items:stretch;border:1.5px solid var(--flare-ink);border-radius:2px;overflow:hidden;}
.lang button,.lang a{
  display:flex;align-items:center;border:0;background:none;cursor:pointer;
  padding:.5rem .85rem;line-height:1;text-decoration:none;
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;letter-spacing:.14em;
  color:rgba(11,15,17,.42);transition:background .22s var(--e),color .22s var(--e);
}
.lang button + button,.lang a + a{border-left:1.5px solid var(--flare-ink);}
/* Die aktive Sprache ist ein gefüllter Block, die andere nur angedeutet. */
.lang button[aria-pressed="true"],.lang a[aria-pressed="true"]{
  background:var(--flare-ink);color:var(--flare);font-weight:700;letter-spacing:.16em;
}
.lang button[aria-pressed="false"]:hover,.lang a[aria-pressed="false"]:hover{
  background:rgba(11,15,17,.09);color:var(--flare-ink);
}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.78rem 1.35rem;border:1px solid transparent;border-radius:2px;cursor:pointer;
  background:transparent;-webkit-appearance:none;appearance:none;
  font-family:var(--f-mono);font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;
  transition:background .3s var(--e),color .3s var(--e),border-color .3s var(--e),transform .3s var(--e);
}
.btn .arw{transition:transform .35s var(--e);}
.btn:hover .arw{transform:translateX(4px);}
.btn-flare{background:var(--flare);color:var(--flare-ink);font-weight:500;}
.btn-flare:hover{background:var(--flare-deep);color:var(--flare-ink);}
.btn-ghost{border-color:currentColor;color:inherit;}
.btn-ghost:hover{background:currentColor;}
.btn-ghost:hover span{color:var(--granite);}
.dark .btn-ghost:hover span,.carbon .btn-ghost:hover span{color:var(--granite);}
.btn-sm{padding:.55rem 1rem;font-size:.65rem;}
.btn-ink{background:var(--ink);color:var(--chalk);}
.btn-ink:hover{background:var(--basalt-2);}

.burger{display:none;flex-direction:column;gap:5px;border:0;background:none;cursor:pointer;padding:.5rem;}
.burger span{width:24px;height:2px;background:var(--flare-ink);transition:.3s var(--e);}
body.mobopen .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.mobopen .burger span:nth-child(2){opacity:0;}
body.mobopen .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media(max-width:71rem){
  .menu{display:none;}
  .burger{display:flex;}
  .nav-actions .btn-tickets{display:none;}
  /* Das Menü trug bisher den automatischen Abstand, der alles nach rechts
     schob. Auf dem Handy ist es ausgeblendet — ohne diese Zeile kleben
     Sprachumschalter und Burger am Logo statt am rechten Rand. */
  .nav-actions{margin-left:auto;}
}
.mobnav{
  position:fixed;inset:100px 0 0 0;z-index:55;background:var(--flare);color:var(--flare-ink);
  overflow-y:auto;padding:1.6rem var(--gutter) 4rem;
  transform:translateY(-104%);transition:transform .55s var(--e);
}
body.mobopen .mobnav{transform:none;}
body.mobopen{overflow:hidden;}
.mobnav ul{list-style:none;margin:0;padding:0;}
.mobnav > ul > li{border-bottom:1.5px solid rgba(11,15,17,.22);}
.mobnav a{display:block;padding:.9rem 0;text-decoration:none;color:var(--flare-ink);
  font-family:var(--f-display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:clamp(1.15rem,.8rem + 1.6vw,1.5rem);line-height:1.02;overflow-wrap:break-word;hyphens:manual;}
.mobnav .submob a{font-family:var(--f-body);font-size:.88rem;font-weight:500;letter-spacing:.06em;
  text-transform:none;color:rgba(11,15,17,.72);}
.mobnav .btn-flare{background:var(--flare-ink);color:var(--flare);}
.mobnav .btn-flare:hover{background:#000;color:var(--flare);}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  background:var(--carbon);color:var(--chalk);overflow:hidden;padding-top:100px;}
.hero-media{position:absolute;inset:0;}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover;}
.hero-media img{animation:kb 26s ease-in-out infinite alternate;}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.13) translate3d(-1.5%,-1%,0)}}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,15,17,.72) 0%,rgba(11,15,17,.28) 34%,rgba(11,15,17,.55) 66%,rgba(11,15,17,.96) 100%);}
.hero-inner{position:relative;padding-bottom:clamp(2rem,1rem + 4vw,4.5rem);width:100%;}
.hero h1{color:#fff;}

/* Titel als Logo-Schriftzug */
.hero-logo{margin:0;line-height:0;}
.hero-logo img{
  display:block;width:min(88vw,44rem);height:auto;
  opacity:0;transform:translateY(14px);
  animation:sh-logo-in 1.1s var(--e) .12s forwards;
}
/* Einfarbiges Logo aus dem Design-Tab wird für den dunklen Hero weiss gesetzt. */
.hero-logo.is-inverted img{filter:brightness(0) invert(1);}
@keyframes sh-logo-in{to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  .hero-logo img{animation:none;opacity:1;transform:none;}
}
@media (max-width:700px){
  .hero-logo img{width:min(92vw,22rem);}
}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln > span{display:block;transform:translateY(110%);animation:rise 1.1s var(--e) forwards;}
.hero h1 .ln:nth-child(2) > span{animation-delay:.12s;}
@keyframes rise{to{transform:none;}}
.hero-sub{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(1rem,3vw,3rem);
  margin-top:clamp(1.4rem,1rem + 1.5vw,2.4rem);opacity:0;animation:fade 1s var(--e) .5s forwards;}
@keyframes fade{to{opacity:1;}}
.hero-tag{font-family:var(--f-display);font-stretch:87%;font-weight:400;font-size:clamp(1.05rem,.95rem + .7vw,1.6rem);
  line-height:1.2;max-width:24ch;color:#DFE6E9;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;}
.hero-meta{display:flex;flex-wrap:wrap;gap:1.6rem 2.6rem;margin-bottom:clamp(1.4rem,1vw + 1rem,2.2rem);
  opacity:0;animation:fade 1s var(--e) .3s forwards;}
.hero-meta .k{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flare);display:block;margin-bottom:.3rem;}
.hero-meta .v{font-family:var(--f-display);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:clamp(.95rem,.85rem + .4vw,1.2rem);letter-spacing:.01em;}
.scrollcue{position:absolute;right:var(--gutter);bottom:1.4rem;font-family:var(--f-mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:#8D989E;display:flex;align-items:center;gap:.6rem;}
.scrollcue i{display:block;width:1px;height:2.4rem;background:linear-gradient(var(--flare),transparent);}
@media(max-width:44rem){.scrollcue{display:none;}}

/* countdown */
.cd{display:flex;gap:clamp(.7rem,2vw,1.6rem);}
.cd div{text-align:center;}
.cd .n{font-family:var(--f-display);font-weight:800;font-stretch:118%;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.6rem);line-height:1;color:#fff;}
.cd .l{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flare);margin-top:.35rem;}

/* ---------- facts strip ---------- */
.facts{background:var(--carbon);color:var(--chalk);border-block:1px solid var(--line-dark);}
.facts .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));}
.fact{padding:clamp(1.4rem,1rem + 1.5vw,2.4rem) 0;border-right:1px solid var(--line-dark);padding-right:1.2rem;}
.fact:last-child{border-right:0;}
.fact .n{font-family:var(--f-display);font-weight:800;font-stretch:118%;font-size:clamp(1.7rem,1.2rem + 1.8vw,2.9rem);line-height:1;}
.fact .n .u{font-size:.42em;color:var(--flare);vertical-align:.45em;margin-left:.15em;}
.fact .l{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-dark);margin-top:.6rem;}
@media(max-width:52rem){.fact{border-right:0;border-bottom:1px solid var(--line-dark);}
.facts .wrap{grid-template-columns:1fr 1fr;} .fact:nth-child(odd){border-right:1px solid var(--line-dark);}}

/* ---------- media / figures ---------- */
.fig{position:relative;overflow:hidden;background:var(--basalt);}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e);}
.fig:hover img{transform:scale(1.045);}
.fig-cap{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-top:.7rem;}
.dark .fig-cap,.carbon .fig-cap{color:var(--muted-dark);}
.ar-4-5{aspect-ratio:4/5;} .ar-3-2{aspect-ratio:3/2;} .ar-16-9{aspect-ratio:16/9;} .ar-1-1{aspect-ratio:1/1;}

/* ---------- program ---------- */
.prog{border-top:1px solid var(--line-dark);}
.prog-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem clamp(1rem,3vw,2.5rem);
  padding:1.65rem 0;border-bottom:1px solid var(--line-dark);align-items:baseline;}
@media(min-width:52rem){.prog-row{grid-template-columns:9rem minmax(0,14rem) minmax(0,1fr);}}
.prog-t{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92rem;color:var(--accent);letter-spacing:.04em;white-space:nowrap;}
.prog-h{font-family:var(--f-display);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:1.02rem;line-height:1.08;}
.prog-d{color:#A9B4B9;font-size:.93rem;line-height:1.62;}
/* Die erste Zeile der Beschreibung ist die Kurzfassung, danach folgen Stichpunkte. */
.prog-d br + *{margin-top:.2rem;}

/* ---------- cards ---------- */
.card{background:var(--chalk);border:1px solid var(--paper-line);padding:clamp(1.6rem,1.1rem + 1.4vw,2.5rem);
  display:flex;flex-direction:column;gap:.85rem;transition:border-color .3s var(--e),transform .4s var(--e);}
.card:hover{border-color:var(--ink);}
.dark .card,.carbon .card{background:var(--basalt);border-color:var(--line-dark);}
.dark .card:hover,.carbon .card:hover{border-color:var(--flare);}
.card .kicker{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);}

.card p{font-size:.94rem;color:var(--ink-2);}
.dark .card p,.carbon .card p{color:#A9B4B9;}

/* ---------- partners ---------- */
.ptier{border-top:1px solid var(--paper-line);padding-top:1.8rem;margin-top:clamp(2.6rem,1.4rem + 2.6vw,4.4rem);}
.ptier:first-of-type{margin-top:0;}
.ptier-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem;}
.ptier-head h3{font-family:var(--f-display);font-weight:800;font-stretch:118%;text-transform:uppercase;
  font-size:clamp(1.1rem,.95rem + .7vw,1.55rem);margin:0;letter-spacing:-.005em;}
.ptier-head .cnt{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;color:var(--muted);}
.plist,.tilegrid{display:grid;gap:1px;background:transparent;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));}
.tilegrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr));}
.tilegrid > *{box-shadow:0 0 0 1px var(--paper-line);}
/* Die Linien kommen von den Kacheln selbst — leere Rasterfelder bleiben so unsichtbar. */
/* Partner-Logos stehen auf Weiss — so wie sie gestaltet sind. Auch im Hover. */
.plogo{background:#fff;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:6.4rem;padding:1.1rem .9rem;text-decoration:none;position:relative;
  box-shadow:0 0 0 1px var(--paper-line);
  transition:box-shadow .3s var(--e),transform .3s var(--e);}
.plogo span{font-family:var(--f-display);font-weight:700;font-stretch:100%;text-transform:uppercase;
  font-size:.83rem;letter-spacing:.02em;line-height:1.1;color:var(--ink);transition:color .3s var(--e);}
.plogo img{transition:transform .45s var(--e);}
.plogo:hover{
  z-index:2;transform:translateY(-2px);
  box-shadow:0 0 0 1.5px var(--flare), 0 14px 30px -18px rgba(11,15,17,.55);
}
.plogo:hover span{color:var(--flare-dim);}
.plogo:hover img{transform:scale(1.045);}
.plogo::after{content:"↗";position:absolute;top:.55rem;right:.7rem;font-size:.7rem;
  color:var(--flare-dim);opacity:0;transition:opacity .3s var(--e);}
.plogo:hover::after{opacity:1;}
.plogo:focus-visible{outline:2px solid var(--flare-dim);outline-offset:-2px;}
.ptier.premium .plogo{min-height:8.6rem;}
.ptier.premium .plogo span{font-size:1.05rem;font-stretch:112%;}

/* ---------- gallery ---------- */
/* Ohne JavaScript bleibt es beim Mehrspaltensatz. Grosse Alben, die beim
   Scrollen nachlegen, stellt das JavaScript auf feste Spalten um (.is-cols):
   Der Mehrspaltensatz verteilt bei jedem Nachschub den ganzen Bestand neu,
   und dabei wandern bereits gesehene Bilder an eine andere Stelle. In festen
   Spalten bleibt jedes Bild, wo es einmal gelandet ist. */
.gal{--gal-cols:3;--gal-gap:clamp(.6rem,1.4vw,1.1rem);
  columns:var(--gal-cols);column-gap:var(--gal-gap);}
@media(max-width:64rem){.gal{--gal-cols:2;}}
@media(max-width:18rem){.gal{--gal-cols:1;}}

.gal.is-cols{columns:auto;display:flex;align-items:flex-start;gap:var(--gal-gap);}
.gal.is-cols > .galcol{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--gal-gap);}
.gal.is-cols .gi{margin:0;break-inside:auto;}
.gal .gi{break-inside:avoid;margin:0 0 clamp(.6rem,1.4vw,1.1rem);position:relative;cursor:zoom-in;
  background:var(--basalt);overflow:hidden;}
/* height:auto ist Pflicht, seit die Bilder ihre echten Masse als Attribute
   mitbringen — sonst zieht die Attributhöhe das Bild in die Breite. */
.gal .gi img{width:100%;height:auto;display:block;transition:transform .9s var(--e),filter .5s var(--e);}
.gal .gi:hover img{transform:scale(1.05);}
.gal .gi .gt{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .8rem;
  background:linear-gradient(transparent,rgba(11,15,17,.85));
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#DDE5E8;
  opacity:0;transform:translateY(8px);transition:.35s var(--e);}
.gal .gi:hover .gt{opacity:1;transform:none;}
.gi.video::before{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(circle at 50% 50%,rgba(242,229,2,.95) 0 1.55rem,transparent 1.56rem);
  opacity:.92;}
.gi.video::after{content:"";position:absolute;top:50%;left:50%;z-index:3;transform:translate(-40%,-50%);
  border-left:.62rem solid #0B0F11;border-top:.42rem solid transparent;border-bottom:.42rem solid transparent;}
.galfilter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:clamp(1.4rem,1rem + 1.5vw,2.4rem);}
.galfilter button{border:1px solid var(--line-dark);background:none;color:#A9B4B9;cursor:pointer;
  padding:.5rem .95rem;border-radius:2px;font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  transition:.25s var(--e);}
.galfilter button[aria-pressed="true"]{background:var(--flare);border-color:var(--flare);color:var(--flare-ink);}
.galfilter button:hover[aria-pressed="false"]{color:var(--chalk);border-color:var(--glacier-deep);}

/* lightbox */
.lb{position:fixed;inset:0;z-index:120;background:rgba(6,9,11,.96);display:none;
  align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);padding-bottom:clamp(7rem,9vh,9rem);}
.lb.on{display:flex;}
.lb img{max-width:100%;max-height:72vh;object-fit:contain;}
.lb-close,.lb-nav{position:absolute;border:1px solid var(--line-dark);background:rgba(27,34,38,.8);
  color:var(--chalk);cursor:pointer;width:2.9rem;height:2.9rem;display:grid;place-items:center;font-size:1.1rem;}
.lb-close{top:1.2rem;right:1.2rem;}
.lb-nav.prev{left:1.2rem;top:50%;transform:translateY(-50%);}
.lb-nav.next{right:1.2rem;top:50%;transform:translateY(-50%);}
.lb-cap{position:absolute;bottom:1.4rem;left:0;right:0;text-align:center;
  font-family:var(--f-mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;color:#8D989E;}

/* Bühne: 16:9 im Querformat, 9:16 wenn eine Hochkant-Fassung hinterlegt ist. */
.lb-stage{display:flex;align-items:center;justify-content:center;max-width:100%;}
.lb-stage.video{width:100%;max-width:min(100%,calc(72vh * 16 / 9));}
.lb-stage.video iframe,.lb-stage.video video{width:100%;aspect-ratio:16/9;max-height:72vh;border:0;background:#000;display:block;}
.lb-stage.video.portrait{max-width:min(100%,calc(70vh * 9 / 16));}
.lb-stage.video.portrait iframe,.lb-stage.video.portrait video{aspect-ratio:9/16;max-height:70vh;}
/* Instagram-Originalbeitrag: eigene Bühne, die Karte kommt von Instagram. */
.lb-stage.igpost{width:min(26rem,92vw);max-width:min(26rem,92vw);}
.lb-stage.igpost iframe{width:100%;height:min(70vh,44rem);border:0;background:#fff;border-radius:4px;display:block;}

/* ---------- instagram ---------- */
.igwrap{display:grid;gap:clamp(.7rem,1.6vw,1.15rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));}
.igcard{background:var(--basalt);border:1px solid var(--line-dark);display:flex;flex-direction:column;
  text-decoration:none;transition:border-color .3s var(--e),transform .4s var(--e);overflow:hidden;}
.igcard:hover{border-color:var(--flare);transform:translateY(-3px);}
.igcard .igimg{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--carbon);}
.igcard .igimg img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--e);}
.igcard:hover .igimg img{transform:scale(1.06);}
/* Marker: dieser Beitrag öffnet sich im Original. */
.igcard .igmark{position:absolute;right:.6rem;top:.6rem;width:1.55rem;height:1.55rem;border-radius:6px;
  border:1.5px solid rgba(245,244,240,.72);background:rgba(11,15,17,.4);backdrop-filter:blur(4px);
  transition:.3s var(--e);}
.igcard .igmark::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:.52rem;height:.52rem;border-radius:50%;border:1.5px solid rgba(245,244,240,.85);}
.igcard .igmark::after{content:"";position:absolute;right:.24rem;top:.24rem;width:2.5px;height:2.5px;
  border-radius:50%;background:rgba(245,244,240,.85);}
.igcard:hover .igmark{border-color:var(--flare);background:rgba(242,229,2,.16);}
.igcard:hover .igmark::before,.igcard:hover .igmark::after{border-color:var(--flare);background-color:var(--flare);}
.igcard:hover .igmark::before{background:transparent;}
.igmeta{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.ighandle{display:flex;align-items:center;gap:.5rem;font-family:var(--f-mono);font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--flare);}
.igtext{font-size:.85rem;line-height:1.5;color:#B3BEC3;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.igstats{margin-top:auto;display:flex;gap:1rem;font-family:var(--f-mono);font-size:.62rem;color:var(--muted-dark);letter-spacing:.1em;}

/* consent-blocked embed */
.blocked{border:1px dashed var(--line-dark);background:var(--basalt);padding:clamp(1.6rem,1rem + 2vw,3rem);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem;}
.blocked p{color:#A9B4B9;font-size:.9rem;max-width:44ch;}
.paper .blocked,.stone .blocked{background:var(--chalk);border-color:var(--paper-line);}
.paper .blocked p,.stone .blocked p{color:var(--ink-2);}

/* ---------- forms ---------- */
.form{display:grid;gap:1.3rem;}
.frow{display:grid;gap:1.3rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));}
.field{display:flex;flex-direction:column;gap:.4rem;}
.field label{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);}
.dark .field label,.carbon .field label{color:var(--muted-dark);}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--paper-line);
  padding:.6rem 0;font:inherit;font-size:.95rem;color:inherit;border-radius:0;
  transition:border-color .3s var(--e);}
.dark .field input,.dark .field select,.dark .field textarea,.carbon .field input,.carbon .field select,.carbon .field textarea{border-bottom-color:var(--line-dark);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--accent);}
.field textarea{resize:vertical;min-height:6.5rem;}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 11px) 55%,calc(100% - 6px) 55%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem;}
.dark .field select option,.carbon .field select option{background:var(--basalt);color:var(--chalk);}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;line-height:1.5;color:var(--ink-2);}
.dark .check,.carbon .check{color:#A9B4B9;}
.check input{margin-top:.28rem;accent-color:var(--flare-dim);width:1rem;height:1rem;flex:none;}
.formnote{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;color:var(--muted);}
.dark .formnote,.carbon .formnote{color:var(--muted-dark);}
.okmsg{border-left:2px solid var(--accent);padding:.85rem 1rem;background:rgba(242,229,2,.13);font-size:.9rem;display:none;}
.okmsg.on{display:block;}

/* ---------- press ---------- */
.presslist{border-top:1px solid var(--paper-line);}
.pressrow{display:grid;grid-template-columns:minmax(0,1fr);gap:.55rem 1.8rem;
  padding:1.7rem 0;border-bottom:1px solid var(--paper-line);text-decoration:none;
  transition:background .3s var(--e),padding .3s var(--e);align-items:center;}
@media(min-width:52rem){.pressrow{grid-template-columns:7rem 9.5rem minmax(0,1fr) 2rem;}}
.pressrow:hover{background:var(--chalk);padding-inline:1rem;}
.pressrow .pd{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;color:var(--muted);}
.pressrow .po{font-family:var(--f-display);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:.87rem;}
.pressrow .pt{font-size:.98rem;color:var(--ink-2);}
.pressrow .pa{font-size:1rem;color:var(--accent);justify-self:end;transition:transform .3s var(--e);}
.pressrow:hover .pa{transform:translateX(4px);}

/* ---------- team ---------- */
/* Vier Porträts nebeneinander, sobald der Platz reicht. Die Maximalbreite
   deckelt das Raster bei vier Spalten — ohne sie würden auf sehr breiten
   Bildschirmen fünf oder sechs Tracks entstehen. */
.team{
  display:grid;gap:clamp(1.2rem,2.4vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));
  max-width:76rem;
}
.tm .fig{margin-bottom:.85rem;}
.tm .tn{font-family:var(--f-display);font-weight:700;font-stretch:112%;text-transform:uppercase;font-size:1rem;line-height:1.1;}
.tm .tr{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-top:.35rem;}

/* ---------- legal / prose ---------- */
.prose h3{font-family:var(--f-display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:1.1rem;margin:2.4rem 0 .7rem;letter-spacing:-.005em;}
.prose h3:first-child{margin-top:0;}
.prose ul{padding-left:1.1rem;margin:0 0 1.05em;}
.prose li{margin-bottom:.4em;}
.prose a{color:var(--accent);text-underline-offset:3px;}

.prose .num{font-family:var(--f-mono);color:var(--accent);margin-right:.6rem;font-size:.85em;}

/* ---------- footer ---------- */
.foot{background:var(--carbon);color:#A9B4B9;padding-top:clamp(3.6rem,2.2rem + 3.6vw,6rem);}
.foot-top{display:grid;gap:clamp(2.4rem,1.2rem + 3.4vw,4rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,10.5rem),1fr));
  padding-bottom:clamp(2.4rem,2rem + 2vw,3.6rem);border-bottom:1px solid var(--line-dark);}
@media(min-width:64rem){.foot-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;}}
.foot h4{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flare);margin:0 0 1.1rem;font-weight:400;}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.foot a{text-decoration:none;font-size:.9rem;transition:color .25s var(--e);}
.foot a:hover{color:var(--chalk);}
.foot-bottom{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;
  padding-block:1.6rem 2.4rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;}
.foot-brand .bm{font-family:var(--f-display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.9rem,1.2rem + 3vw,3.4rem);color:var(--chalk);line-height:.9;letter-spacing:-.015em;}

/* ---------- cookie ---------- */
.cookie{position:fixed;left:0;right:0;bottom:0;z-index:110;background:var(--carbon);
  border-top:2px solid var(--flare);color:#B3BEC3;transform:translateY(110%);
  transition:transform .6s var(--e);}
.cookie.on{transform:none;}
.cookie .wrap{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;justify-content:space-between;padding-block:1.2rem;}
.cookie p{font-size:.85rem;max-width:52ch;margin:0;}
.cookie .cbtns{display:flex;flex-wrap:wrap;gap:.55rem;}
.modal{position:fixed;inset:0;z-index:130;background:rgba(6,9,11,.86);display:none;align-items:center;justify-content:center;padding:1.2rem;}
.modal.on{display:flex;}
.modal-inner{background:var(--granite);border:1px solid var(--line-dark);max-width:34rem;width:100%;
  max-height:88vh;overflow-y:auto;padding:clamp(1.4rem,1rem + 2vw,2.4rem);color:var(--chalk);}
.ctog{display:flex;gap:1rem;align-items:flex-start;padding:1rem 0;border-bottom:1px solid var(--line-dark);}
.ctog:last-of-type{border-bottom:0;}
.ctog .cinfo{flex:1;}
.ctog .cinfo b{display:block;font-family:var(--f-display);font-weight:700;font-stretch:112%;
  text-transform:uppercase;font-size:.9rem;margin-bottom:.25rem;}
.ctog .cinfo span{font-size:.83rem;color:#A9B4B9;line-height:1.5;}
.sw{position:relative;width:2.8rem;height:1.5rem;flex:none;margin-top:.15rem;}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:2;}
.sw i{position:absolute;inset:0;background:var(--basalt-2);border:1px solid var(--line-dark);border-radius:99px;transition:.3s var(--e);}
.sw i::after{content:"";position:absolute;top:2px;left:2px;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--muted-dark);transition:.3s var(--e);}
.sw input:checked + i{background:#4A4700;border-color:var(--flare);}
.sw input:checked + i::after{transform:translateX(1.25rem);background:var(--flare);}
.sw input:disabled + i{opacity:.55;}
.sw input:focus-visible + i{outline:2px solid var(--flare);outline-offset:2px;}

/* ---------- map ---------- */
.mapbox{position:relative;aspect-ratio:16/10;background:var(--basalt);overflow:hidden;
  border:1px solid var(--line-dark);display:grid;place-items:center;}
.mapgrid{position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(var(--line-dark) 1px,transparent 1px),linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:44px 44px;}
.mappin{position:relative;text-align:center;}
.mappin .dot{width:14px;height:14px;border-radius:50%;background:var(--flare);margin:0 auto .8rem;
  box-shadow:0 0 0 0 rgba(242,229,2,.5);animation:pulse 2.4s var(--e) infinite;}
.mappin .lbl{font-family:var(--f-mono);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk);}

/* ---------- scroll reveal ---------- */
/* Inhalte sind grundsätzlich sichtbar. Erst wenn das Skript selbst die Klasse
   .sh-anim setzt, werden noch nicht eingeblendete Blöcke ausgeblendet — so kann
   kein blockiertes, verzögertes oder wegoptimiertes JavaScript Inhalte verstecken. */
.rv{transition:opacity .85s var(--e),transform .85s var(--e);}
html.sh-anim .rv:not(.in){opacity:0;transform:translateY(18px);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  html.sh-anim .rv:not(.in){opacity:1;transform:none;}
  .hero h1 .ln > span{transform:none;}
  .hero-sub,.hero-meta{opacity:1;}
}

/* ---------- Seitenkopf ---------- */
.page-head{padding-top:calc(100px + clamp(3.4rem,2.2rem + 5vw,7.5rem));padding-bottom:clamp(2.8rem,1.8rem + 3.6vw,5rem);
  background:var(--carbon);color:var(--chalk);position:relative;overflow:hidden;}
.page-head .crumb{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:var(--flare);margin-bottom:1.5rem;}
.page-head .lead{max-width:48ch;margin-top:1.7rem;}
.badge{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--flare);padding:.4rem .8rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flare);}
.notice{border-left:2px solid var(--accent);background:rgba(242,229,2,.10);padding:.9rem 1.1rem;font-size:.87rem;color:var(--ink-2);}
.dark .notice,.carbon .notice{color:#A9B4B9;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--flare);color:var(--flare-ink);padding:.7rem 1rem;}
.skip:focus{left:0;}

/* ============================================================
   Logos in Partner-Kacheln, Premium deutlich grösser
   ============================================================ */
.plogo img{max-height:3.1rem;width:auto;max-width:100%;object-fit:contain;}
.plogo span{overflow-wrap:break-word;}
.ptier.premium .plist{grid-template-columns:repeat(auto-fill,minmax(min(100%,17.5rem),1fr));}
.ptier.premium .plogo{min-height:11.5rem;padding:2.1rem 1.5rem;}
.ptier.premium .plogo span{font-size:clamp(1.05rem,.9rem + .55vw,1.45rem);font-stretch:118%;letter-spacing:-.01em;}
.ptier.premium .plogo img{max-height:5.4rem;}
.ptier.premium .ptier-head h3{font-size:clamp(1.2rem,1rem + .9vw,1.9rem);}
.ptier.premium .ptier-head{padding-bottom:.2rem;}
.ptier.premium{border-top-width:2px;border-top-color:var(--accent);}

/* ============================================================
   Statement / Idee hinter dem Namen
   ============================================================ */
.statement{position:relative;overflow:hidden;}
.statement .big{
  font-family:var(--f-display);font-weight:800;font-stretch:125%;text-transform:uppercase;
  font-size:clamp(1.6rem,.9rem + 2.9vw,3.3rem);line-height:1.02;letter-spacing:-.022em;
  max-width:20ch;margin:0;overflow-wrap:break-word;hyphens:manual;
}
.statement .big em{font-style:normal;color:var(--flare);}
.statement .cols{display:grid;gap:clamp(1.8rem,1.2rem + 2.4vw,3.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));margin-top:clamp(3rem,1.6rem + 4vw,5rem);}
.statement .cols p{color:#B3BEC3;font-size:.98rem;}
.statement .cols h4{font-family:var(--f-mono);font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--flare);margin:0 0 .8rem;font-weight:400;}

/* ============================================================
   Countdown-Karte (Termin-Ankündigung)
   ============================================================ */
.announce{display:inline-flex;flex-direction:column;gap:.9rem;
  border:1.5px solid var(--flare);padding:clamp(1rem,.8rem + 1vw,1.5rem) clamp(1.1rem,.9rem + 1.2vw,1.8rem);
  background:rgba(11,15,17,.5);backdrop-filter:blur(6px);max-width:100%;}
.announce .ah{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--flare);}
.announce .as{font-size:.88rem;color:#C2CBD0;max-width:34ch;}

/* ============================================================
   Responsive-Feinschliff
   ============================================================ */
h1,h2,h3,h4{overflow-wrap:break-word;}
.display{overflow-wrap:normal;}
@media(max-width:40rem){.display{overflow-wrap:break-word;}}
.display{hyphens:manual;}
h1.display{font-size:clamp(2.35rem,.85rem + 6.2vw,6.6rem);}
.prose,.lead,p,li,.igtext,.prog-d{overflow-wrap:anywhere;}
.prose{hyphens:auto;}

.prog-row{grid-template-columns:6.4rem minmax(0,1fr);gap:.3rem 1rem;}
.prog-row .prog-t{grid-row:1 / span 2;}
@media(min-width:52rem){
  .prog-row{grid-template-columns:9rem minmax(0,14rem) minmax(0,1fr);gap:1rem 2.5rem;}
  .prog-row .prog-t{grid-row:auto;}
}

@media(max-width:52rem){
  .pressrow .pa{display:none;}
  .pressrow{grid-template-columns:minmax(0,1fr);}
  .pressrow:hover{padding-inline:0;}
  .hero-meta{gap:1rem 1.6rem;}
  .hero-sub{gap:1.2rem;}
  .cd{gap:1rem;}
  .lb-close,.lb-nav{width:2.4rem;height:2.4rem;}
  .lb-nav.prev{left:.5rem;} .lb-nav.next{right:.5rem;}
  .ptier.premium .plogo{min-height:8.5rem;}
}

@media(max-width:26rem){
  .hero-meta{gap:.85rem 1.2rem;}
  .hero-meta .v{font-size:.92rem;}
  .cd .n{font-size:1.45rem;}
  .btn{padding:.7rem 1.05rem;font-size:.66rem;letter-spacing:.14em;}
  .facts .wrap{grid-template-columns:1fr 1fr;}
  .fact:nth-child(odd){border-right:0;}
}

/* nichts darf horizontal überlaufen */
.wrap,.section{max-width:100%;}
table{max-width:100%;}


/* ============================================================
   Nav-Korrekturen auf gelbem Grund + Hero-Höhe
   ============================================================ */
.nav .btn-tickets{background:var(--flare-ink);color:var(--flare);border-color:var(--flare-ink);}
.nav .btn-tickets:hover{background:#000;color:var(--flare);}
.nav .btn-tickets span{color:inherit;}

.cookie .btn-ghost{color:var(--chalk);border-color:#5B676D;}
.cookie .btn-ghost:hover{background:var(--chalk);}
.cookie .btn-ghost:hover span{color:var(--carbon);}

.hero{padding-top:calc(100px + clamp(1.2rem,4vh,3rem));}
.hero-inner{padding-bottom:clamp(2.4rem,1rem + 5vw,5rem);}
.announce{align-items:flex-start;}
.announce .cd{margin:.1rem 0;}
.announce .cd .n{font-size:clamp(1.35rem,1rem + 1.4vw,2.3rem);}
.hero-sub{align-items:stretch;}
@media(min-width:62rem){.hero-sub{align-items:flex-end;}}
@media(max-width:38rem){
  .hero-tag{font-size:1.05rem;}
  .announce{width:100%;}
  .hero-cta .btn{flex:1 1 auto;justify-content:center;}
}

.announce{max-width:24rem;align-self:flex-end;}
@media(max-width:62rem){.announce{max-width:100%;align-self:stretch;}}

/* Textseiten: linksbündig zum Seitentitel, nicht zentriert */
.wrap.narrow > *{max-width:62ch;}
.wrap.narrow > .form,.wrap.narrow > form{max-width:46rem;}


/* ============================================================
   Hero mit Video-Hintergrund
   ============================================================ */
.hero-media video{width:100%;height:100%;object-fit:cover;}
.hero-media video + .hero-fallback{display:none;}
@media(prefers-reduced-motion:reduce){
  .hero-media video{display:none;}
  .hero-media video + .hero-fallback{display:block;width:100%;height:100%;object-fit:cover;}
}

/* ============================================================
   Zahlen-Balken in CI-Gelb
   ============================================================ */
.facts{background:var(--flare);color:var(--flare-ink);border-block:0;}
.facts .wrap{padding-inline:max(0px, calc(var(--gutter) - clamp(1.2rem,2.2vw,2.4rem)));}
.fact{
  padding:clamp(1.8rem,1.2rem + 2vw,3.2rem) clamp(1.2rem,2.2vw,2.4rem);
  border-right:1px solid rgba(11,15,17,.2);
}
.fact:last-child{border-right:0;}
.fact .n{color:var(--flare-ink);}
.fact .n .u{color:rgba(11,15,17,.5);}
.fact .l{color:rgba(11,15,17,.72);margin-top:.7rem;}
@media(max-width:52rem){
  .fact{border-right:0;border-bottom:1px solid rgba(11,15,17,.2);}
  .fact:nth-child(odd){border-right:1px solid rgba(11,15,17,.2);}
  .fact:last-child{border-bottom:0;}
}
@media(max-width:21rem){
  .fact,.fact:nth-child(odd){border-right:0;}
  .fact:last-child{border-bottom:0;}
}

/* Überschriften brechen notfalls im Wort, statt aus der Spalte zu laufen. */
.display{overflow-wrap:break-word;}


/* ============================================================
   Fliesstext-Skalierung (im CMS wählbar)
   ============================================================ */
body{font-size:calc(clamp(1rem,.95rem + .22vw,1.09rem) * var(--sh-text-scale,1));}

/* ============================================================
   Aftermovie-Vorschau mit Play-Overlay
   ============================================================ */
.sh-playcard{
  position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;
  background:var(--basalt);overflow:hidden;color:inherit;-webkit-appearance:none;appearance:none;
}
.sh-playcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e),filter .4s var(--e);}
.sh-playcard:hover img{transform:scale(1.04);filter:brightness(.82);}
.sh-playcard::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(11,15,17,.72));}
.sh-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
  width:clamp(3.6rem,7vw,5.2rem);aspect-ratio:1;border-radius:50%;
  background:var(--flare);display:grid;place-items:center;
  transition:transform .35s var(--e),box-shadow .35s var(--e);
  box-shadow:0 0 0 0 rgba(242,229,2,.45);
}
.sh-playcard:hover .sh-play{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 0 14px rgba(242,229,2,.14);}
.sh-play-dot{
  width:0;height:0;margin-left:.22em;
  border-left:clamp(.85rem,1.6vw,1.15rem) solid var(--flare-ink);
  border-top:clamp(.58rem,1.1vw,.78rem) solid transparent;
  border-bottom:clamp(.58rem,1.1vw,.78rem) solid transparent;
}
.sh-playlabel{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.4rem clamp(1rem,2vw,1.6rem);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chalk);text-align:left;
}

/* ============================================================
   Galerie-Kopf mit laufendem Aftermovie
   ============================================================ */
.galhero{
  position:relative;min-height:78vh;min-height:78svh;display:flex;align-items:flex-end;
  background:var(--carbon);color:var(--chalk);overflow:hidden;
  padding-top:calc(100px + clamp(1.2rem,4vh,3rem));
  border-bottom:1px solid var(--line-dark);
}
.galhero-media{position:absolute;inset:0;}
.galhero-media video,.galhero-media iframe{width:100%;height:100%;object-fit:cover;border:0;}
.galhero-frame{position:absolute;inset:0;}
.galhero-frame iframe{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:100vw;height:56.25vw;min-height:100%;min-width:177.77vh;pointer-events:none;
}

/* Overlay: Vignette + Verlauf von unten, damit die Typo immer sitzt. */
.galhero-scrim{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,15,17,.6) 0%,rgba(11,15,17,.12) 24%,rgba(11,15,17,0) 44%,rgba(11,15,17,.55) 78%,rgba(11,15,17,.94) 100%),
    radial-gradient(125% 90% at 50% 42%,transparent 45%,rgba(11,15,17,.42) 100%);
}
/* Feines Raster in CI-Gelb — dieselbe Handschrift wie die Sektions-Kanten. */
.galhero-grid{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.22;
  background-image:linear-gradient(var(--flare) 1px,transparent 1px),linear-gradient(90deg,var(--flare) 1px,transparent 1px);
  background-size:clamp(4rem,9vw,7.5rem) clamp(4rem,9vw,7.5rem);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 0%,transparent 72%);
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 0%,transparent 72%);
}

/* Kopfzeile: Aftermovie-Signal links, Ton-Schalter rechts. */
.galhero-top{
  position:absolute;left:0;right:0;top:calc(100px + clamp(.8rem,2.4vh,1.6rem));z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.galhero-live{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chalk);background:rgba(11,15,17,.5);border:1px solid rgba(242,229,2,.35);
  padding:.42rem .8rem;border-radius:2px;backdrop-filter:blur(6px);
}
.galhero-dot{
  width:.42rem;height:.42rem;border-radius:50%;background:var(--flare);flex:none;
  box-shadow:0 0 0 0 rgba(242,229,2,.6);animation:sh-pulse 2.4s var(--e) infinite;
}
@keyframes sh-pulse{
  0%{box-shadow:0 0 0 0 rgba(242,229,2,.55);}
  70%{box-shadow:0 0 0 .55rem rgba(242,229,2,0);}
  100%{box-shadow:0 0 0 0 rgba(242,229,2,0);}
}
/* Ton-Schalter: schwebende Pille mittig unten, wie ein Player-Control. */
.galhero-sound{
  position:absolute;left:50%;bottom:clamp(1rem,2.2vh,1.7rem);transform:translateX(-50%);z-index:4;
  display:inline-flex;gap:.15rem;padding:.28rem;border-radius:999px;
  background:rgba(11,15,17,.42);border:1px solid rgba(245,244,240,.22);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 30px -10px rgba(0,0,0,.6);
}
.galhero-sound .ghs{
  display:grid;place-items:center;width:2.5rem;height:2.1rem;padding:0;cursor:pointer;
  border:0;border-radius:999px;background:transparent;color:rgba(245,244,240,.72);
  -webkit-appearance:none;appearance:none;transition:.25s var(--e);
}
.galhero-sound .ghs svg{width:1.15rem;height:1.15rem;fill:currentColor;}
.galhero-sound .ghs svg .ln{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;}
.galhero-sound .ghs:hover{color:var(--chalk);}
.galhero-sound .ghs[aria-pressed="true"]{background:rgba(245,244,240,.9);color:var(--flare-ink);}
.galhero.sound-on .ghs[aria-pressed="true"]{background:var(--flare);color:var(--flare-ink);}
.galhero-sound .ghs:focus-visible{outline:2px solid var(--flare);outline-offset:2px;}

.galhero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(4.2rem,2.6rem + 4.5vw,6.4rem);}
.galhero-eyebrow{
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.1rem;
  font-family:var(--f-mono);font-size:.63rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--flare);
}
.galhero-rule{display:block;width:clamp(1.6rem,4vw,3.2rem);height:1px;background:var(--flare);flex:none;}
.galhero-title{
  font-size:clamp(2.4rem,1.2rem + 5.2vw,5.4rem);line-height:.94;margin:0;
  text-shadow:0 2px 40px rgba(11,15,17,.55);
}
.galhero-inner .lead{color:#C9D2D6;max-width:46ch;margin-top:1.2rem;}
.galhero-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:clamp(1.6rem,1rem + 1.5vw,2.4rem);}
.galhero-ghost{color:#E7EEF0;border-color:rgba(231,238,240,.4);background:rgba(11,15,17,.35);backdrop-filter:blur(6px);}
.galhero-ghost:hover{border-color:var(--flare);color:var(--flare);}


@media (max-width:700px){
  .galhero{min-height:68vh;min-height:68svh;}
  .galhero-top{top:calc(100px + .7rem);}
  .galhero-live span:not(.galhero-dot){display:none;}
  .galhero-live{padding:.42rem .55rem;}
}
@media (prefers-reduced-motion:reduce){
  .galhero-dot{animation:none;}
}

/* ============================================================
   Fotograf-Credit auf Galeriebildern
   ============================================================ */
.gal .gi .gcredit{
  position:absolute;top:.7rem;right:.7rem;z-index:3;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.32rem .55rem;border-radius:2px;
  background:rgba(11,15,17,.68);backdrop-filter:blur(6px);
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;
  color:#E3E9EB;text-decoration:none;
  opacity:0;transform:translateY(-4px);transition:.3s var(--e);
}
.gal .gi:hover .gcredit,.gal .gi:focus-within .gcredit{opacity:1;transform:none;}
.gal .gi .gcredit a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;}
.gal .gi .gcredit a:hover{color:var(--flare);}
/* Instagram-Glyphe vor dem Handle. */
.sh-cam{
  width:.66rem;height:.66rem;border:1px solid currentColor;border-radius:3px;
  position:relative;flex:none;
}
.sh-cam::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:.28rem;height:.28rem;border:1px solid currentColor;border-radius:50%;}
.sh-cam::after{content:"";position:absolute;right:.07rem;top:.07rem;
  width:1.5px;height:1.5px;border-radius:50%;background:currentColor;}
/* Auf Touchgeräten dauerhaft sichtbar, dort gibt es kein Hover. */
@media(hover:none){.gal .gi .gcredit{opacity:1;transform:none;}}

/* Instagram-Widget eines Fremddienstes bekommt denselben Rahmen. */
.igwrap-embed{display:block;}
.igwrap-embed iframe{width:100%!important;border:0;}

/* Volle Breite für Sektionen, die in einem Seiteninhalt stehen. */
.sh-bleed{margin-inline:calc(50% - 50vw);width:100vw;}

/* ============================================================
   Bilder herunterladen
   ============================================================ */
.sh-dlicon{
  display:inline-block;width:.95rem;height:.95rem;flex:none;position:relative;
}
.sh-dlicon::before{
  content:"";position:absolute;left:50%;top:0;width:1.5px;height:.58rem;background:currentColor;transform:translateX(-50%);
}
.sh-dlicon::after{
  content:"";position:absolute;left:50%;top:.3rem;width:.34rem;height:.34rem;
  border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateX(-50%) rotate(-45deg);
}
.gal .gi .gdl{
  position:absolute;right:.6rem;top:.6rem;z-index:3;
  display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;
  background:rgba(11,15,17,.52);border:1px solid rgba(245,244,240,.26);color:var(--chalk);
  backdrop-filter:blur(6px);text-decoration:none;
  opacity:0;transform:translateY(-4px);transition:.28s var(--e);
}
.gal .gi:hover .gdl,.gal .gi:focus-within .gdl{opacity:1;transform:none;}
.gal .gi .gdl:hover{background:var(--flare);border-color:var(--flare);color:var(--flare-ink);}
@media (hover:none){ .gal .gi .gdl{opacity:1;transform:none;} }

.lb-foot{position:absolute;bottom:1.2rem;left:0;right:0;display:flex;flex-direction:column;
  align-items:center;gap:.7rem;padding:0 1rem;}
.lb-foot .lb-cap{position:static;}
/* Ein eigenes display: überstimmt sonst das hidden-Attribut des Browsers. */
[hidden]{display:none!important;}
.lb-dl{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.5rem .95rem;border:1px solid var(--line-dark);border-radius:2px;
  background:rgba(27,34,38,.7);color:var(--chalk);
  font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;transition:.25s var(--e);
}
.lb-dl:hover{background:var(--flare);border-color:var(--flare);color:var(--flare-ink);}

/* Filterreihen (Typ und Jahrgang) */
.galfilters{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:center;
  margin-bottom:clamp(1.4rem,1rem + 1.5vw,2.4rem);}
.galfilters .galfilter{margin-bottom:0;}
.galfilters .galfilter[data-key="year"] button[aria-pressed="true"]{background:var(--chalk);border-color:var(--chalk);color:var(--carbon);}

/* WordPress-Standardklasse für rein akustische Beschriftungen. */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ============================================================
   Zwei Formulare nebeneinander: jedes als eigene Karte,
   damit klar ist, dass es zwei getrennte Angebote sind.
   ============================================================ */
.formpair{align-items:start;}
.panel{
  position:relative;background:var(--chalk);border:1px solid var(--paper-line);
  padding:clamp(1.6rem,1.1rem + 1.6vw,2.6rem);
}
.dark .panel,.carbon .panel{background:var(--basalt);border-color:var(--line-dark);}
.panel-step{
  position:absolute;top:clamp(1.2rem,1rem + .6vw,1.7rem);right:clamp(1.2rem,1rem + .6vw,1.7rem);
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.18em;
  color:var(--flare-dim);margin:0;
}
.dark .panel-step,.carbon .panel-step{color:var(--flare);}
.panel-lead{margin:1rem 0 0;color:var(--ink-2);max-width:44ch;font-size:.95rem;line-height:1.62;}
.dark .panel-lead,.carbon .panel-lead{color:#B3BEC3;}
.panel-body{margin-top:clamp(1.4rem,1rem + 1vw,2rem);padding-top:clamp(1.4rem,1rem + 1vw,2rem);
  border-top:1px solid var(--paper-line);}
.dark .panel-body,.carbon .panel-body{border-top-color:var(--line-dark);}
@media(max-width:52rem){
  .panel{padding:1.4rem 1.2rem;}
}

/* ============================================================
   Eingebettete Instagram-Beiträge (Link eingefügt, Rest kommt von Instagram)
   ============================================================ */
.igwrap-posts{
  display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr));
  align-items:start;
}
.igembed{
  background:#fff;border-radius:3px;overflow:hidden;min-width:0;
  box-shadow:0 0 0 1px rgba(245,244,240,.12), 0 18px 40px -26px rgba(0,0,0,.8);
  transition:box-shadow .3s var(--e),transform .3s var(--e);
}
.igembed:hover{
  transform:translateY(-3px);
  box-shadow:0 0 0 1.5px var(--flare), 0 22px 46px -24px rgba(0,0,0,.85);
}
/* Instagram setzt eigene Breiten — die müssen ins Raster passen. */
.igembed .instagram-media{
  margin:0!important;min-width:0!important;width:100%!important;max-width:100%!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
}
.igembed > blockquote:not([data-instgrm-payload-id]){
  display:block;padding:2.4rem 1.4rem;text-align:center;
}
.igembed > blockquote:not([data-instgrm-payload-id]) a{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--carbon);text-decoration:none;border-bottom:1.5px solid var(--flare);padding-bottom:.2rem;
}
@media(max-width:32rem){
  .igwrap-posts{grid-template-columns:1fr;}
}

/* ============================================================
   Mobile-Feinschliff: Dichte, Abstände, Tap-Targets
   ============================================================ */
@media(max-width:40rem){

  /* Sektionen dürfen enger stehen — auf dem Handy wirkt Weissraum doppelt. */
  .section{padding-block:clamp(3.2rem,2rem + 5vw,4.6rem);}
  .section.tight{padding-block:clamp(2.4rem,1.6rem + 3vw,3.4rem);}

  /* Überschriften brauchen beim Umbrechen etwas mehr Durchschuss. */
  h2.display,h3.display{line-height:1.04;}
  h1.display{line-height:.98;}
  .page-head .lead,.lead{max-width:100%;}

  /* Buttons: lieber umbrechen als aus dem Bild laufen. */
  .btn{white-space:normal;text-align:center;line-height:1.25;}
  .hero-cta .btn,.announce .btn{width:100%;justify-content:center;}

  /* Partner: zwei Kacheln pro Zeile statt einer endlosen Spalte. */
  .plist{grid-template-columns:1fr 1fr;}
  .plogo{min-height:5.2rem;padding:.85rem .6rem;}
  .plogo img{max-height:2.4rem;}
  .plogo span{font-size:.72rem;}
  .ptier.premium .plist{grid-template-columns:1fr;}
  .ptier.premium .plogo{min-height:7.5rem;}
  .ptier.premium .plogo img{max-height:3.8rem;}
  .ptier{margin-top:clamp(1.8rem,1.2rem + 2vw,2.6rem);padding-top:1.4rem;}
  .ptier-head{margin-bottom:1.1rem;}

  /* Tagesplan: Uhrzeit als eigene Zeile, Titel und Text bekommen die volle Breite. */
  .prog-row{grid-template-columns:1fr;gap:.35rem;padding-block:1.1rem;}
  .prog-row .prog-t{grid-row:auto;font-size:.8rem;letter-spacing:.12em;}
  .prog-h{font-size:.98rem;}

  /* Footer: Linklisten nebeneinander. */
  .foot-top{grid-template-columns:1fr 1fr;gap:2rem 1.4rem;}
  .foot-top > :first-child{grid-column:1 / -1;}

  /* Formulare: zwei Felder nebeneinander sind auf dem Handy zu eng. */
  .frow{grid-template-columns:1fr;}
}

@media(max-width:26rem){
  .plogo{min-height:4.6rem;}
  .plogo img{max-height:2rem;}
}

/* Genug Fläche für den Daumen — überall dort, wo getippt wird. */
@media(hover:none){
  .mobnav .submob a{min-height:44px;display:flex;align-items:center;}
  .lang a,.lang button{min-height:44px;}
  .galfilter button{min-height:40px;}
}

/* ============================================================
   Mobiles Menü: Untermenüs als aufklappbare Ebene
   ============================================================ */
.mobnav > ul > li{position:relative;}
.mobnav .mob-toggle{
  position:absolute;top:0;right:0;width:3.4rem;height:3.4rem;
  display:grid;place-items:center;border:0;background:none;cursor:pointer;
  color:var(--flare-ink);-webkit-appearance:none;appearance:none;
}
.mobnav .mob-toggle .caret{
  width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .3s var(--e);opacity:.75;
}
.mobnav > ul > li.open > .mob-toggle .caret{transform:rotate(225deg) translate(-2px,-2px);opacity:1;}
.mobnav > ul > li > a > .caret{display:none;}   /* der Pfeil sitzt jetzt im Schalter */

/* Eingeklappt, bis jemand tippt. Die Höhe darf grosszügig sein — sie begrenzt
   nur die Animation, nicht den Inhalt, solange sie über der echten Höhe liegt. */
.mobnav .submob{
  overflow:hidden;max-height:0;
  transition:max-height .34s var(--e);
  padding:0;margin-left:.9rem;border-left:2px solid rgba(11,15,17,.28);
}
.mobnav > ul > li.open > .submob{max-height:34rem;}
.mobnav .submob > li{margin:0;}
.mobnav .submob a{padding:.6rem 0 .6rem .9rem;}
.mobnav .submob > li:first-child a{padding-top:.85rem;}
.mobnav .submob > li:last-child a{padding-bottom:.95rem;}

@media(prefers-reduced-motion:reduce){
  .mobnav .submob{transition:none;}
}

/* Sehr schmale Geräte (iPhone SE & Co.): Kopfzeile muss in eine Zeile passen. */
@media(max-width:23.5rem){
  .nav .wrap{gap:.7rem;}
  .brand .bm{font-size:.95rem;}
  .brand .bs{display:none;}
  .brand img{max-height:28px!important;}
  .nav-actions{gap:.45rem;}
  .lang a,.lang button{padding:.5rem .55rem;font-size:.7rem;letter-spacing:.1em;}
  .burger{padding:.5rem .25rem;}
  .rail{font-size:.6rem;}
}

/* ============================================================
   Sichtbarer Fokus — wer mit der Tastatur navigiert, muss sehen, wo er ist.
   ============================================================ */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--flare);
  outline-offset:2px;
  border-radius:2px;
}
.paper :where(a,button):focus-visible,.stone :where(a,button):focus-visible,
.nav :where(a,button):focus-visible,.mobnav :where(a,button):focus-visible{
  outline-color:var(--flare-dim);
}
.btn-flare:focus-visible{outline-color:var(--flare-ink);outline-offset:3px;}

/* Lightbox offen: die Seite dahinter bleibt stehen. */
body.lb-open{overflow:hidden;}

/* ============================================================
   Nach oben
   ============================================================ */
.totop{
  position:fixed;right:clamp(.9rem,2.5vw,1.8rem);bottom:clamp(.9rem,2.5vw,1.8rem);z-index:90;
  width:2.9rem;height:2.9rem;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--line-dark);border-radius:50%;
  background:rgba(11,15,17,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  -webkit-appearance:none;appearance:none;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .3s var(--e),transform .3s var(--e),visibility .3s,background .25s var(--e),border-color .25s var(--e);
}
.totop.on{opacity:1;visibility:visible;transform:none;}
.totop:hover{background:var(--flare);border-color:var(--flare);}
.totop-arrow{
  width:.62rem;height:.62rem;border-left:2px solid var(--chalk);border-top:2px solid var(--chalk);
  transform:rotate(45deg) translate(1px,1px);transition:border-color .25s var(--e);
}
.totop:hover .totop-arrow{border-color:var(--flare-ink);}
@media print{ .totop{display:none;} }

/* ============================================================
   Schaltschema im Footer — das kleine Geheimnis
   ============================================================ */
.shifter-wrap{display:inline-flex;align-items:center;gap:.8rem;flex-wrap:wrap;min-width:0;}
.shifter{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:0;background:none;padding:.3rem .1rem;-webkit-appearance:none;appearance:none;
  color:var(--muted-dark);transition:color .25s var(--e);
}
.shifter:hover{color:var(--chalk);}
.shifter svg{width:2.5rem;height:1.7rem;overflow:visible;}
.shifter-h{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;opacity:.5;
}
.shifter-knob{
  fill:currentColor;
  transition:cx .34s cubic-bezier(.34,1.3,.5,1), cy .34s cubic-bezier(.34,1.3,.5,1), fill .25s var(--e);
}
.shifter:hover .shifter-knob,.shifter.top-gear .shifter-knob{fill:var(--flare);}
.shifter-gear{
  font-size:.68rem;letter-spacing:.14em;min-width:1.1em;text-align:left;
  transition:color .25s var(--e);
}
.shifter.top-gear .shifter-gear{color:var(--flare);}

.shifter-word{
  display:block;max-width:34ch;
  font-family:var(--f-display);font-stretch:87%;font-weight:400;
  font-size:.92rem;line-height:1.5;color:var(--chalk);
  opacity:0;transform:translateY(4px);
  transition:opacity .45s var(--e),transform .45s var(--e);
}
.shifter-word.on{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .shifter-knob,.shifter-word,.totop{transition:none;}
}
@media(max-width:40rem){
  .shifter-word{font-size:.86rem;max-width:100%;}
  .totop{width:2.6rem;height:2.6rem;}
}

/* ============================================================
   Galerie: nachladen statt alles auf einmal
   ============================================================ */
.gal .gi.is-filtered,.gal .gi.is-beyond{display:none;}
.galmore{display:flex;justify-content:center;margin-top:clamp(1.6rem,1rem + 1.6vw,2.6rem);}
.galmore .btn{color:var(--chalk);border-color:var(--line-dark);}
.galmore .btn:hover{background:var(--flare);border-color:var(--flare);}
.galmore .btn:hover span{color:var(--flare-ink);}
.galmore-rest{
  font-size:.62rem;letter-spacing:.1em;opacity:.6;
}
.paper .galmore .btn,.stone .galmore .btn{color:var(--ink);border-color:var(--paper-line);}

/* ============================================================
   Team: Kurzbio unter der Funktion
   ============================================================ */
.tm .tb{
  margin:.7rem 0 0;font-size:.88rem;line-height:1.6;color:var(--ink-2);
  max-width:32ch;
}
.dark .tm .tb,.carbon .tm .tb{color:#A9B4B9;}

/* ============================================================
   «Und dann gibt es noch euch» — die Helfer:innen
   ============================================================ */
.crew{
  display:grid;gap:clamp(1.4rem,1rem + 2.4vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1fr);
  margin-top:clamp(2.2rem,1.4rem + 2.6vw,3.6rem);
  padding-top:clamp(2rem,1.2rem + 2.4vw,3.2rem);
  border-top:1px solid var(--paper-line);
}
.dark .crew,.carbon .crew{border-top-color:var(--line-dark);}
@media(min-width:46rem){
  /* Das Bild bleibt so breit wie eine Teamkarte — der Abschnitt liest sich
     dadurch als «und dann noch alle anderen», nicht als fünfte Person. */
  .crew{grid-template-columns:minmax(0,12.5rem) minmax(0,1fr);}
}
.crew-media .fig{background:var(--basalt);}
.crew-media img{width:100%;height:100%;object-fit:cover;}
.crew-title{
  font-size:clamp(1.35rem,1.05rem + 1.2vw,2rem);line-height:1.06;margin:.7rem 0 0;
}
.crew-text{margin-top:1rem;max-width:52ch;line-height:1.68;}
.crew-text p{margin:0 0 .8em;}
.crew-text p:last-child{margin-bottom:0;}
.crew-notext{grid-template-columns:minmax(0,1fr);}
@media(max-width:46rem){
  .crew-media{max-width:11rem;}
}

/* ============================================================
   Feinschliff nach dem Live-Test
   ============================================================ */

/* Keine automatische Worttrennung — lieber eine kurze Zeile als ein
   zerschnittenes Wort. Umbrochen wird nur, wenn es sonst aus dem Bild läuft. */
html{hyphens:manual;-webkit-hyphens:manual;}
body,p,li,h1,h2,h3,h4,.display,.lead,.prose,.measure{hyphens:manual;-webkit-hyphens:manual;}
.display{overflow-wrap:normal;word-break:normal;}
.prose,.lead,p,li,.igtext,.prog-d,.crew-text,.tm .tb{overflow-wrap:break-word;word-break:normal;}
/* text-wrap:pretty vermeidet Schusterjungen ohne zu trennen. */
p,.lead,.measure,.crew-text,.panel-lead,.tm .tb{text-wrap:pretty;}
h1,h2,h3,.display{text-wrap:balance;}

/* Sprachschalter: auf dem Handy deutlich kompakter. */
@media(max-width:40rem){
  .lang a,.lang button{padding:.42rem .6rem;font-size:.66rem;letter-spacing:.1em;}
  .lang{border-width:1px;}
  .lang button + button,.lang a + a{border-left-width:1px;}
}
@media(max-width:23.5rem){
  .lang a,.lang button{padding:.38rem .5rem;font-size:.62rem;}
}
/* Der 44px-Mindestwert galt bisher auch für den Schalter und machte ihn klobig. */
@media(hover:none){
  .lang a,.lang button{min-height:0;}
}

/* Buttons brechen sauber: gleichmässige Zeilen, Pfeil bleibt am Text. */
.btn{text-wrap:balance;}
@media(max-width:26rem){
  .btn{white-space:normal;justify-content:center;text-align:center;line-height:1.35;}
  .btn .arw{flex:none;}
}
@media(max-width:30rem){
  .btn{padding:.78rem 1.1rem;}
  .hero-cta,.announce .btn,.galhero-actions{width:100%;}
  .hero-cta .btn{width:100%;}
}

/* Karte: Absprung in die App steht immer darunter. */
.mapwrap{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;}
.mapwrap .mapbox{width:100%;}
.mapbtn{color:inherit;}
.dark .mapbtn,.carbon .mapbtn{color:#E7EEF0;border-color:var(--line-dark);}
.dark .mapbtn:hover,.carbon .mapbtn:hover{background:var(--flare);border-color:var(--flare);}
.dark .mapbtn:hover span,.carbon .mapbtn:hover span{color:var(--flare-ink);}

/* Team im Seiteninhalt: klar vom Text darüber getrennt. */
.entry-content .team{
  margin-top:clamp(2.4rem,1.6rem + 3vw,4rem);
  padding-top:clamp(1.8rem,1.2rem + 2.4vw,2.8rem);
  border-top:1px solid var(--paper-line);
}
.dark .entry-content .team,.carbon .entry-content .team{border-top-color:var(--line-dark);}
.entry-content .crew{
  margin-top:clamp(2.4rem,1.6rem + 3vw,4rem);
  padding-top:clamp(1.8rem,1.2rem + 2.4vw,2.8rem);
  border-top:1px solid var(--paper-line);
}
.dark .entry-content .crew,.carbon .entry-content .crew{border-top-color:var(--line-dark);}

/* Partner: Aufruf zum Mitmachen unter den Logos. */
.partner-cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.6rem;
  margin-top:clamp(1.8rem,1.2rem + 2vw,2.8rem);
  padding-top:clamp(1.6rem,1rem + 1.8vw,2.4rem);
  border-top:1px solid var(--paper-line);
}
.partner-cta-text{
  margin:0;font-family:var(--f-display);font-stretch:87%;
  font-size:clamp(1.05rem,.95rem + .6vw,1.35rem);line-height:1.3;max-width:32ch;
}

/* Logo im Footer */
.foot-logo{line-height:0;}
.foot-logo img{display:block;width:auto;max-width:min(100%,15rem);max-height:3.4rem;}
.foot-logo.is-inverted img{filter:brightness(0) invert(1);}

/* Instagram: Karten oben bündig, keine harten Kanten um hochkant laufende Reels. */
.igembed{align-self:start;}
.igembed .instagram-media{background:#fff!important;}

/* ============================================================
   Nach der Durchsicht der fertigen Seite
   ============================================================ */

/* Footer-Links: auf dem Handy genug Fläche für den Daumen, ohne dass die
   Spalten optisch auseinanderfallen. */
@media(hover:none){
  .foot ul{gap:.2rem;}
  .foot ul a{display:inline-flex;align-items:center;min-height:40px;}
}

/* Instagram auf hellem Grund: die Beiträge sind selbst weiss, deshalb bekommen
   sie hier einen ruhigen Rahmen statt im Nichts zu schweben. */
.paper .igembed,.stone .igembed{
  background:var(--chalk);border:1px solid var(--paper-line);border-radius:2px;
  padding:.4rem;
}
.paper .igembed .instagram-media,.stone .igembed .instagram-media{
  box-shadow:none!important;border:0!important;margin:0!important;
}

/* Team-Seite: Abstand zwischen Team, Helfer:innen und dem restlichen Inhalt. */
.team-after-intro,
.crew-after-team{margin-top:clamp(2.6rem,1.6rem + 3.4vw,4.4rem);padding-top:clamp(2rem,1.2rem + 2.6vw,3rem);border-top:1px solid var(--paper-line);}
.dark .team-after-intro,.carbon .team-after-intro,
.dark .crew-after-team,.carbon .crew-after-team{border-top-color:var(--line-dark);}
.about-rest{margin-top:clamp(2rem,1.4rem + 2.4vw,3.2rem);max-width:56rem;}

/* ============================================================
   Galerie: Nachladen beim Scrollen
   ============================================================ */
.galmore.is-auto{min-height:2.4rem;align-items:center;}

/* Der Knopf bleibt für die Tastatur da — beim Fokus wird er wieder sichtbar. */
.galmore .btn.screen-reader-text:focus,
.galmore .btn.screen-reader-text:focus-visible{
  position:static!important;width:auto;height:auto;margin:0;
  padding:.78rem 1.35rem;border-width:1px;border-style:solid;
  overflow:visible;clip:auto;clip-path:none;white-space:nowrap;
}

.galmore-auto{
  display:inline-flex;align-items:center;gap:.7rem;margin:0;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3,#8D989E);
}
.paper .galmore-auto,.stone .galmore-auto{color:var(--ink-2);}

.galmore-dots{display:inline-flex;gap:.3rem;}
.galmore-dots i{
  width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;
  animation:sh-dots 1.25s var(--e) infinite;
}
.galmore-dots i:nth-child(2){animation-delay:.16s;}
.galmore-dots i:nth-child(3){animation-delay:.32s;}
@keyframes sh-dots{0%,70%,100%{opacity:.25;transform:translateY(0);}35%{opacity:1;transform:translateY(-3px);}}
@media(prefers-reduced-motion:reduce){.galmore-dots i{animation:none;opacity:.45;}}

/* ============================================================
   Dunkler Seitenkopf: eigene Farbwerte
   ============================================================ */
/* Der Seitenkopf ist schwarz, trägt aber weder .dark noch .carbon — die
   Grautöne für hellen Grund blieben deshalb stehen und «Ohne sie kein Event.»
   stand in Dunkelgrau auf Schwarz. Statt jede Regel einzeln zu verdoppeln,
   werden hier die Farbwerte selbst umdefiniert: Alles, was sie benutzt,
   stimmt damit auf einen Schlag. */
.page-head{
  --ink:var(--chalk);
  --ink-2:#C2CBD0;
  --muted:#9AA6AC;
  --muted-dark:#9AA6AC;
  --accent:var(--flare);
  --paper-line:var(--line-dark);
}

/* ============================================================
   «Das Event»: Zitat als Band unter dem Zweispalter
   ============================================================ */
/* Das Zitat ist zu lang für die schmale Textspalte — dort wurde daraus eine
   acht Zeilen hohe Schlucht, die aussah wie versehentlich eingerückter
   Fliesstext. Über die ganze Breite bekommt es Luft, links davon eine
   Mono-Zeile als Anlauf. */
.ev-band{
  margin-top:clamp(2.6rem,1.6rem + 3.4vw,4.4rem);
  padding-top:clamp(2rem,1.3rem + 2.4vw,3rem);
  border-top:1px solid var(--paper-line);
  display:grid;gap:.4rem 3rem;
}
@media(min-width:62rem){.ev-band{grid-template-columns:minmax(0,14rem) minmax(0,1fr);}}
.dark .ev-band,.carbon .ev-band{border-top-color:var(--line-dark);}

.ev-kicker{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);margin:.5rem 0 0;
}
/* Rand und Einzug ausdrücklich setzen: sonst hängt das Aussehen an der
   allgemeinen blockquote-Regel und ändert sich, sobald jemand die anfasst. */
.ev-quote{margin:0;max-width:46ch;padding-left:1.4rem;border-left:2px solid var(--accent);}
.ev-quote p{
  font-family:var(--f-display);font-weight:400;font-stretch:87%;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.85rem);line-height:1.3;letter-spacing:-.008em;
  margin:0;color:var(--ink);text-wrap:balance;
}
.dark .ev-quote p,.carbon .ev-quote p{color:var(--chalk);}

/* Sanfte Tiefe beim Scrollen. Der Versatz kommt aus dem JavaScript; ohne
   JavaScript, auf dem Handy und bei «Bewegung reduzieren» bleibt alles ruhig. */
.parallax{will-change:transform;}
@media(prefers-reduced-motion:reduce){.parallax{transform:none!important;}}

/* Hinweis zur Location: derselbe gelbe Anstrich wie .notice, nur mit mehr
   Gewicht — er steht ganz oben auf der Seite und soll gelesen werden. */
.notice-lg{
  font-size:clamp(.98rem,.94rem + .25vw,1.1rem);line-height:1.6;
  padding:clamp(1rem,.8rem + .8vw,1.4rem) clamp(1.1rem,.9rem + .9vw,1.6rem);
  border-left-width:3px;color:var(--ink);
  margin:0 0 clamp(1.8rem,1.2rem + 2vw,2.8rem);max-width:56rem;
}
.notice-lg p{margin:0 0 .7em;}
.notice-lg p:last-child{margin-bottom:0;}
.dark .notice-lg,.carbon .notice-lg{color:var(--chalk);background:rgba(242,229,2,.13);}

/* ============================================================
   WordPress-spezifische Ergänzungen
   ============================================================ */
.menu .sub-menu{
  position:absolute;top:100%;left:0;min-width:16rem;
  background:var(--carbon);border:0;padding:.4rem;margin:0;list-style:none;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .28s var(--e),transform .28s var(--e),visibility .28s;
  box-shadow:0 24px 50px -18px rgba(0,0,0,.75);z-index:5;
}
.menu li.open > .sub-menu{opacity:1;visibility:visible;transform:none;}
.menu .sub-menu a{padding:.7rem .85rem;font-size:.75rem;font-weight:500;letter-spacing:.06em;color:#C9D2D6;}
.menu .sub-menu a::after{background:var(--flare);left:.85rem;right:.85rem;bottom:.5rem;}
.menu .sub-menu a:hover{color:var(--flare);}
.menu > li.menu-item-has-children > a > .caret{margin-left:.15rem;}
.menu li.current-menu-item > a::after,.menu li.current_page_item > a::after{transform:scaleX(1);}

/* Aussehen und Aufklappen der mobilen Untermenüs steht in style.css (.submob) —
   hier nur, was WordPress' eigene Klasse braucht. */
.mobnav .sub-menu{list-style:none;margin:0;}
.mobnav .sub-menu a{font-family:var(--f-body);font-size:.88rem;font-weight:500;letter-spacing:.06em;
  text-transform:none;color:rgba(11,15,17,.72);}
.mobnav > ul{list-style:none;margin:0;padding:0;}

.galindex{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,19rem),1fr));}
.galindex .gname{font-family:var(--f-display);font-weight:800;font-stretch:112%;text-transform:uppercase;
  font-size:1.05rem;line-height:1.05;color:var(--chalk);}

.entry-content > *{margin-bottom:1.15em;}
.entry-content img,.wp-caption img{height:auto;}
.alignleft{float:left;margin:0 1.4rem 1rem 0;}
.alignright{float:right;margin:0 0 1rem 1.4rem;}
.aligncenter{margin-inline:auto;}
.wp-block-image figcaption{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-top:.6rem;}
blockquote{border-left:2px solid var(--accent);padding-left:1.4rem;margin:2.6rem 0;font-family:var(--f-display);
  font-stretch:87%;font-size:clamp(1.1rem,1rem + .5vw,1.35rem);line-height:1.3;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.pagination{display:flex;gap:.4rem;margin-top:2.8rem;font-family:var(--f-mono);font-size:.7rem;}
.pagination .page-numbers{padding:.5rem .8rem;border:1px solid var(--paper-line);text-decoration:none;}
.pagination .current{background:var(--flare);border-color:var(--flare);color:var(--flare-ink);}

.admin-bar .rail{top:32px;}
.admin-bar .nav{top:calc(32px + 34px);}
@media(max-width:782px){.admin-bar .rail{top:46px;}.admin-bar .nav{top:calc(46px + 34px);}}