:root{
    --ink:#110D0A;
    --ink-2:#1B1512;
    --cloud:#F6F1E8;
    --cream:#EFE8DA;
    --cream-2:#E7DDC9;
    --sun:#E0913F;
    --sun-soft:#C97A33;
    --moss:#8C9A78;
    --line-on-dark:rgba(246,241,232,.32);
    --line-on-cream:rgba(17,13,10,.16);
    --font-display:'Montserrat',system-ui,sans-serif;
    --font-head:'Jost',system-ui,sans-serif;
    --font-script:'Great Vibes',cursive;
  }

  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{margin:0;}
  :root{
    --gap-eyebrow:14px;   /* Pre-Headline -> Headline */
    --gap-heading:20px;   /* Headline -> Fließtext */
    --gap-cta:28px;       /* Fließtext -> Button */
    --h2-size:clamp(2rem,4.4vw,2.9rem);
    --h2-leading:.98;     /* zweizeilige Headlines eng, analog Hero */
  }
  body{
    background:var(--ink);
    color:var(--cloud);
    font-family:var(--font-display);
    padding-inline:0;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2{text-wrap:balance;margin:0;}
  a{color:inherit;text-decoration:none;}
  img,svg{display:block;}
  .wrap{max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,4vw,48px);}

  .eyebrow{
    font-size:.72rem;
    font-weight:600;
    letter-spacing:.28em;
    text-transform:uppercase;
    line-height:1.7;
  }

  .btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid currentColor;
    padding:13px 22px;
    font-size:.74rem;
    font-weight:600;
    letter-spacing:.16em;
    text-transform:uppercase;
    transition:background .2s ease, color .2s ease;
  }
  .btn svg{width:14px;height:14px;flex:none;transition:transform .2s ease;}
  .btn-dark{color:var(--cloud);}
  .btn-dark:hover,.btn-dark:focus-visible{background:var(--cloud);border-color:var(--cloud);color:var(--ink);}
  .btn-dark:hover svg,.btn-dark:focus-visible svg{stroke:var(--ink);}
  .btn:hover svg{transform:translateX(3px);}
  .btn-anchor:hover svg{transform:translateY(3px);}

  /* ---------- Platzhalter-Landschaft (ersetzt später echte Fotografie) ---------- */
  .scenery{
    position:relative;
    overflow:hidden;
    background:linear-gradient(180deg,var(--sky-a),var(--sky-b) 60%,var(--sky-c) 100%);
  }
  .scenery .sun{
    position:absolute;
    z-index:0;
    top:16%;
    left:58%;
    width:min(34vw,300px);
    aspect-ratio:1;
    border-radius:50%;
    background:radial-gradient(circle,var(--sun-c) 0%,rgba(0,0,0,0) 72%);
    filter:blur(1px);
  }
  .scenery::before,
  .scenery::after{
    content:"";
    position:absolute;
    z-index:0;
    left:-2%;
    right:-2%;
    bottom:-2%;
  }
  .scenery::before{
    height:52%;
    background:var(--ridge-1);
    clip-path:polygon(0% 100%,0% 58%,9% 49%,21% 57%,33% 40%,46% 54%,58% 36%,70% 51%,83% 39%,93% 50%,100% 43%,100% 100%);
  }
  .scenery::after{
    height:38%;
    background:var(--ridge-2);
    clip-path:polygon(0% 100%,0% 74%,8% 66%,18% 80%,30% 58%,42% 78%,54% 53%,66% 74%,79% 56%,90% 72%,100% 61%,100% 100%);
  }
  .scenery > .wrap,
  .scenery > .gallery-caption{
    position:relative;
    z-index:1;
  }
  .hero{overflow:visible;}
  .scenery--sunset{--sky-a:#3B2A2E;--sky-b:#6C3F32;--sky-c:#B4633A;--sun-c:#F3C77E;--ridge-1:#2A2320;--ridge-2:#15100E;}
  .scenery--dusk{--sky-a:#20242F;--sky-b:#3B3244;--sky-c:#6E4C4C;--sun-c:#E7A96B;--ridge-1:#1B1B1E;--ridge-2:#0E0D0D;}
  .scenery--rose{--sky-a:#2C2130;--sky-b:#7A4653;--sky-c:#D98A6B;--sun-c:#F6D6A8;--ridge-1:#241C22;--ridge-2:#120E10;}
  .scenery--night{--sky-a:#141A26;--sky-b:#232B3B;--sky-c:#4B4356;--sun-c:#DCC79A;--ridge-1:#10131B;--ridge-2:#090B10;}
  .scenery--dawn{--sky-a:#2B2A3D;--sky-b:#5B5A72;--sky-c:#C9AEB0;--sun-c:#F1E4D6;--ridge-1:#232231;--ridge-2:#121220;}

  /* ---------- Header ---------- */
  .site-header{
    position:sticky;
    top:0;
    z-index:40;
    background:var(--ink);
    border-bottom:1px solid var(--line-on-dark);
  }
  .header-inner{
    display:flex;
    align-items:center;
    gap:28px;
    padding-block:16px;
  }
  .logo{
    display:flex;
    align-items:center;
    gap:16px;
    font-family:var(--font-head);
    font-weight:500;
    font-size:.92rem;
    letter-spacing:.1em;
    line-height:1.28;
  }
  .logo > span:not(.divider):not(.tag){white-space:nowrap;}
  @media (max-width:520px){
    .site-header .logo .divider,
    .site-header .logo .tag{display:none;}
  }
  .logo .divider{width:1px;height:34px;background:var(--line-on-dark);}
  .logo .tag{
    font-size:.62rem;
    font-weight:500;
    letter-spacing:.16em;
    color:var(--cloud);
    opacity:.7;
    line-height:1.5;
  }
  .logo-mark{flex:none;object-fit:contain;}
  .logo-mark--sm{width:34px;height:34px;}

  /* ============================================================
     TEMPORÄR – nur zur Visualisierung künftiger CMS-Bereiche.
     Dieser Block + alle class="cms-zone" fliegen vor dem Launch
     wieder raus, kein Teil der finalen Website.
     ============================================================ */
  /* Temporär deaktiviert auf Wunsch – Regel bleibt erhalten, um die Rahmen später mit einem Klick wieder einzuschalten. */
  .cms-zone{/* outline:1.5px dashed #ff2ea0; outline-offset:7px; */}

  .header-actions{display:flex;align-items:center;gap:16px;margin-left:auto;}
  .header-actions .btn span{white-space:nowrap;}

  /* Zurück zur Startseite: eigene Leiste direkt unter dem Kopfbereich, auf
     jeder Unterseite. Immer mit Beschriftung – ein Pfeil allein sagt nicht,
     wohin er führt. Auf dem Telefon über die volle Breite antippbar. */
  .page-back{border-bottom:1px solid var(--line-on-dark);background:var(--ink);}
  .page-back-link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px clamp(20px,4vw,48px);
    max-width:1240px;   /* gleiche Breite wie .wrap, damit der Link mit dem Logo fluchtet */
    margin-inline:auto;
    font-family:var(--font-head);
    font-size:.78rem;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    opacity:.78;
    transition:opacity .15s ease;
  }
  .page-back-link:hover,.page-back-link:focus-visible{opacity:1;}
  .page-back-link svg{width:17px;height:17px;flex:none;transition:transform .15s ease;}
  .page-back-link:hover svg{transform:translateX(-3px);}

  @media (max-width:760px){
    /* Großzügige Trefferfläche über die volle Breite. */
    .page-back-link{padding-block:16px;font-size:.8rem;}
  }
  .social{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;height:34px;
    border:1px solid var(--line-on-dark);
    border-radius:50%;
  }
  .social svg{width:15px;height:15px;}
  .social-row{display:flex;gap:8px;}

  /* "Be Part of It" behält auf jeder Breite seine Beschriftung: Ein Pfeil
     allein verrät nicht, dass er zur Kontaktseite führt. Auf schmalen
     Displays wird er stattdessen kompakter gesetzt. */
  @media (max-width:470px){
    .header-actions .btn{padding:11px 14px;font-size:.66rem;letter-spacing:.1em;gap:8px;}
    .header-actions .btn svg{width:12px;height:12px;}
  }

  /* Sehr schmale Geräte (320 Pixel, etwa ältere iPhone SE): Montserrat baut
     breiter als die vorige Grundschrift, deshalb hier noch eine Stufe enger –
     sonst ragt der Button über den rechten Rand hinaus. */
  @media (max-width:400px){
    .header-inner{gap:10px;}
    .header-actions .btn{padding:10px 11px;font-size:.6rem;letter-spacing:.07em;gap:6px;}
  }

  /* Ab hier wird es eng: Social-Icons stehen auch im Fußbereich, der
     Button nicht – also weichen die Icons zuerst. */
  @media (max-width:560px){
    .header-inner{gap:16px;}
    .header-actions .social-row{display:none;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;
    min-height:min(88vh,860px);
    display:flex;
    /* stretch statt flex-end: Die linke Spalte reicht damit vom Kopfbereich bis
       zum Textblock, nur so lässt sich die Bildmarke dazwischen mittig setzen.
       Oben kein Innenabstand, sonst säße die Mitte um dessen halbe Höhe zu tief. */
    align-items:stretch;
    padding-block:0 56px;
  }
  .hero-bg-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
  }
  .hero-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 42%;
    display:block;
  }
  .hero-overlay{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(17,13,10,.12) 0%, rgba(17,13,10,.5) 55%, rgba(17,13,10,.9) 100%),
      linear-gradient(90deg, rgba(17,13,10,.6) 0%, rgba(17,13,10,.1) 48%, rgba(17,13,10,.2) 100%);
  }
  .hero-grid{
    position:relative;
    z-index:1;
    width:100%;
    display:grid;
    grid-template-columns:1fr auto;
    gap:24px;
    align-items:end;
  }
  .hero-eyebrow{margin-bottom:var(--gap-eyebrow);opacity:.9;}
  /* Zwei Zeilen: oben der freie Raum mit der Bildmarke darin, unten der Text.
     Der Text bleibt dadurch unten, die Bildmarke sitzt mittig im Rest. */
  .hero-copy{
    align-self:stretch;
    display:grid;
    grid-template-rows:1fr auto;
  }
  .logo-mark--hero{
    /* Genau so breit wie die erste Zeile der Pre-Headline. Feste Größe, weil
       auch die Pre-Headline eine feste Schriftgröße hat – ihre Zeile ist auf
       jedem Gerät 162 Pixel breit, also passt eine mitwachsende Marke nicht. */
    width:164px;
    height:164px;
    flex:none;
    align-self:center;
    justify-self:start;
    margin:0;
  }
  .hero h1{
    font-family:var(--font-head);
    font-size:clamp(3rem,9vw,6.4rem);
    font-weight:300;
    line-height:.96;
    letter-spacing:0;
    text-transform:uppercase;
  }
  .hero-sub{
    max-width:38ch;
    margin:var(--gap-heading) 0 0;
    font-size:1.05rem;
    line-height:1.6;
    color:var(--cloud);
    opacity:.92;
  }
  .hero-side{
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:16px;
  }
  /* Freigestellte Schreibschrift. Die Neigung steckt schon im Bild, deshalb
     keine zusätzliche Drehung. Breite wächst mit dem Fenster, bleibt aber
     schmaler als die Spalte, damit rechts Luft bleibt. */
  .hero-script{
    display:block;
    width:clamp(240px,26vw,360px);
    height:auto;
    margin-right:4px;
  }
  .hero-rule{width:70px;height:1px;background:var(--line-on-dark);}
  .hero-list{
    font-size:.68rem;
    font-weight:600;
    letter-spacing:.18em;
    line-height:2;
    opacity:.75;
  }

  @media (max-width:760px){
    .hero{padding-block:44px 64px;align-items:flex-end;}
    .hero-grid{grid-template-columns:1fr;}
    /* Schmale Displays: kein freier Raum zum Verteilen – Marke steht wieder
       direkt über dem Text. */
    .hero-copy{display:block;}
    .logo-mark--hero{margin-bottom:clamp(20px,2.4vw,30px);}
    .hero-side{align-items:flex-start;text-align:left;margin-top:32px;}
    .hero-script{display:none;}  /* Schreibschrift mobil ausgeblendet */
  }

  /* ---------- Ticket-Band ---------- */
  .ticket-band{
    background:linear-gradient(90deg,#17110E 0%,#1F1612 55%,#17110E 100%);
    border-block:1px solid rgba(246,241,232,.12);
  }
  .ticket-band-inner{
    display:flex;align-items:center;gap:clamp(16px,2.4vw,28px);
    padding-block:26px;
  }
  .ticket-band-icon{
    width:52px;height:52px;flex:none;border-radius:50%;
    border:1.2px solid rgba(246,241,232,.85);
    display:flex;align-items:center;justify-content:center;
  }
  .ticket-band-icon svg{width:24px;height:24px;}
  .ticket-band-divider{width:1px;align-self:stretch;min-height:44px;background:rgba(246,241,232,.35);flex:none;}
  .ticket-band-copy{flex:1;min-width:0;}
  .ticket-band-copy h2{
    font-size:clamp(.92rem,1.5vw,1.1rem);font-weight:500;letter-spacing:.14em;
    text-transform:uppercase;margin:0 0 4px;
  }
  .ticket-band-copy p{margin:0;font-size:.84rem;opacity:.72;}
  .ticket-band .btn{flex:none;}
  @media (max-width:640px){
    .ticket-band-inner{flex-wrap:wrap;padding-block:22px;}
    .ticket-band-divider{display:none;}
    .ticket-band-copy{flex:1 1 calc(100% - 80px);}
    .ticket-band .btn{width:100%;justify-content:center;}
  }

  /* ---------- Feature-Strip ---------- */
  .features{background:var(--cream);color:var(--ink);}
  .feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding-block:56px;
  }
  .feature{
    padding:0 26px;
    border-left:1px solid var(--line-on-cream);
  }
  .feature:first-child{border-left:none;padding-left:0;}
  .feature-icon{width:58px;height:58px;margin-bottom:14px;display:block;}
  .feature h3{
    font-size:.82rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin:0 0 8px;
  }
  .feature p{margin:0;font-size:.88rem;color:var(--ink);opacity:.72;max-width:24ch;}

  @media (max-width:860px){
    .feature-grid{grid-template-columns:1fr 1fr;gap:32px 20px;}
    .feature{border-left:none;padding-left:0;}
  }
  @media (max-width:520px){
    .feature-grid{grid-template-columns:1fr;}
  }

  /* ---------- Einheitliche Abstände: Pre-Headline / Headline / Text / Button ---------- */
  .journey-copy h2,.philosophy h2,.section-head h2{
    font-family:var(--font-head);
    font-size:var(--h2-size);
    font-weight:300;
    text-transform:uppercase;
    line-height:var(--h2-leading);
    margin:0 0 var(--gap-heading);
  }
  .journey-copy .eyebrow,.philosophy .eyebrow,.section-head .eyebrow,.footer-news .eyebrow{
    margin:0 0 var(--gap-eyebrow);
  }

  /* ---------- Journey / Gallery ---------- */
  .journey{padding-block:96px;}
  .journey-grid{
    display:grid;
    grid-template-columns:.75fr 2.25fr;
    gap:48px;
    align-items:center;
  }
  .journey-copy p:not(.eyebrow){
    margin:0 0 var(--gap-cta);
    max-width:34ch;
    line-height:1.7;
    opacity:.85;
  }
  .gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
  }
  .gallery-card{}
  .gallery-photo-wrap{
    position:relative;
    aspect-ratio:3/4;
    border-radius:2px;
    overflow:hidden;
  }
  .gallery-photo{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
  }
  .gallery-caption{
    margin:16px 0 0;
  }
  .gallery-title{
    display:block;
    font-size:.82rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
  }
  .gallery-subtitle{
    display:block;
    margin-top:3px;
    font-size:.78rem;
    opacity:.65;
  }

  @media (max-width:900px){
    .journey-grid{grid-template-columns:1fr;}
    .journey-copy p{max-width:60ch;}
  }
  @media (max-width:620px){
    .gallery{grid-template-columns:repeat(2,1fr);}
  }

  /* ---------- Philosophie ---------- */
  .philosophy{
    position:relative;
    overflow:hidden;
    min-height:min(72vh,680px);
    display:flex;
    align-items:center;
    padding-block:72px;
  }
  .philosophy-bg-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
  }
  .philosophy-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 38%;
    display:block;
  }
  .philosophy-overlay{
    position:absolute;
    inset:0;
    background:
      linear-gradient(180deg, rgba(17,13,10,.28) 0%, rgba(17,13,10,.58) 55%, rgba(17,13,10,.86) 100%),
      linear-gradient(90deg, rgba(17,13,10,.55) 0%, rgba(17,13,10,.12) 45%, rgba(17,13,10,.4) 100%);
  }
  .philosophy-grid{
    position:relative;
    z-index:1;
    width:100%;
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:24px;
    align-items:end;
  }
  .philosophy p:not(.eyebrow){max-width:46ch;line-height:1.7;opacity:.9;margin:0 0 var(--gap-cta);}
  /* Rechtsbündig und unten bündig mit dem Button in der linken Spalte –
     dieselbe Grundlinie wie vorher, nur ohne Rechnerei im Browser. */
  .philosophy .philosophy-script{
    display:block;
    justify-self:end;
    align-self:end;
    width:clamp(240px,27vw,380px);
    height:auto;
    margin-bottom:6px;
  }
  @media (max-width:760px){
    .philosophy-grid{grid-template-columns:1fr;}
    .philosophy .philosophy-script{display:none;}  /* Schreibschrift mobil ausgeblendet */
  }

  /* ---------- Impressions ---------- */
  .impressions{padding-block:96px;}
  .section-head{max-width:600px;margin-bottom:40px;}
  .section-head p:not(.eyebrow){max-width:52ch;line-height:1.7;opacity:.8;margin:0;}

  .event-slider{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x proximity;
    padding:8px 8px 10px;
    margin:-8px -8px 40px;
    scrollbar-width:thin;
  }
  .event-card{
    scroll-snap-align:start;
    scroll-margin-left:8px;
    flex:0 0 220px;
    cursor:pointer;
    border:none;
    background:none;
    padding:0;
    text-align:left;
    font-family:var(--font-display);
    color:inherit;
  }
  .event-card .thumb{
    display:block;
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:2px;
    margin-bottom:10px;
    outline:1.5px solid transparent;
    outline-offset:4px;
    transition:outline-color .2s ease;
  }
  .event-card[aria-pressed="true"] .thumb{outline-color:var(--sun);}
  .event-card .ev-name{
    font-size:.8rem;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    display:block;
  }
  .event-card .ev-place{font-size:.76rem;opacity:.65;}

  .coverflow-wrap{position:relative;margin-bottom:6px;border-radius:4px;overflow:hidden;}
  .coverflow-bg{
    position:absolute;
    inset:0;
    background:url('assets/photos/backgrounds/coverflow-bg.jpg') center/cover no-repeat;
    opacity:.4;
    z-index:0;
    pointer-events:none;
  }
  .coverflow{
    position:relative;
    z-index:1;
    height:clamp(260px,38vw,420px);
    perspective:1300px;
  }
  .coverflow-track{
    position:absolute;
    inset:0;
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  .gallery-slide{
    position:absolute;
    top:50%;
    width:clamp(148px,22vw,270px);
    aspect-ratio:4/5;
    object-fit:cover;
    border-radius:3px;
    cursor:pointer;
    box-shadow:0 22px 46px -20px rgba(0,0,0,.7);
    transition:transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease, box-shadow .55s ease;
  }
  .gallery-slide[data-dist="0"]{cursor:default;}

  .coverflow-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:30;
  }
  .coverflow-nav.prev{left:2px;}
  .coverflow-nav.next{right:2px;}
  .gallery-nav-btn{
    width:44px;height:44px;
    border-radius:50%;
    border:1px solid var(--line-on-dark);
    display:flex;align-items:center;justify-content:center;
    flex:none;background:rgba(17,13,10,.5);color:var(--cloud);cursor:pointer;
    transition:background .2s ease;
    backdrop-filter:blur(2px);
  }
  .gallery-nav-btn:hover{background:rgba(246,241,232,.16);}
  .gallery-nav-btn svg{width:16px;height:16px;}
  .gallery-meta{
    display:flex;justify-content:space-between;align-items:baseline;
    margin-top:16px;font-size:.82rem;opacity:.75;
  }
  .gallery-meta .counter{font-variant-numeric:tabular-nums;}
  .gallery-slide[data-dist="0"]{cursor:zoom-in;}

  /* ---------- Lightbox ---------- */
  .lightbox{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(20px,5vw,64px);
    background:rgba(17,13,10,.94);
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease;
  }
  .lightbox.is-open{opacity:1;visibility:visible;}
  .lightbox-img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    border-radius:2px;
    box-shadow:0 40px 100px -24px rgba(0,0,0,.7);
  }
  .lightbox-close{
    position:absolute;
    top:clamp(14px,3vw,32px);
    right:clamp(14px,3vw,32px);
  }
  .lightbox-close svg{width:18px;height:18px;}

  @media (max-width:640px){
    .gallery-slide[data-dist="2"]{opacity:0 !important;pointer-events:none;}
    .coverflow-nav.prev{left:-4px;}
    .coverflow-nav.next{right:-4px;}
    .gallery-nav-btn{width:38px;height:38px;}
  }

  /* ---------- Artists ---------- */
  .artists{background:var(--cream);color:var(--ink);padding-block:64px;}
  .artists .eyebrow{color:var(--sun-soft);}
  .artists .section-head{margin-bottom:28px;}
  .artist-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px 18px;
  }
  .artist-photo{aspect-ratio:1;border-radius:3px;overflow:hidden;margin-bottom:12px;}
  .artist-card h3{font-size:.86rem;font-weight:700;letter-spacing:.02em;margin:0 0 2px;}
  .artist-genre{
    font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em;
    color:var(--sun-soft);margin-bottom:6px;display:block;
  }
  .artist-bio{font-size:.76rem;opacity:.72;line-height:1.5;margin:0 0 10px;}
  .artist-links{display:flex;gap:6px;}
  .artist-links .social{border-color:var(--line-on-cream);color:var(--ink);width:28px;height:28px;}
  .artist-links .social svg{width:13px;height:13px;}

  @media (max-width:900px){
    .artist-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:620px){
    .artist-grid{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:400px){
    .artist-grid{grid-template-columns:1fr;}
    .artist-photo{max-width:280px;}
  }

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line-on-dark);padding-block:44px;}
  .footer-grid{
    display:grid;
    grid-template-columns:1fr 1.4fr auto;
    gap:32px;
    align-items:start;
  }
  .footer-news .eyebrow{opacity:.85;}
  .footer-news p{margin:0 0 16px;opacity:.7;font-size:.9rem;}
  .news-form{
    display:flex;
    align-items:center;
    border-bottom:1px solid var(--line-on-dark);
    max-width:360px;
    padding-bottom:10px;
  }
  .news-form input{
    background:transparent;
    border:none;
    color:var(--cloud);
    font-family:var(--font-display);
    font-size:.9rem;
    flex:1;
    outline:none;
  }
  .news-form input::placeholder{color:var(--cloud);opacity:.55;}
  /* Honigtopf gegen automatische Eintragungen: für Menschen unsichtbar,
     automatische Programme füllen ihn trotzdem aus und verraten sich damit. */
  .news-trap{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none;}
  .news-form button{
    background:none;
    border:none;
    color:var(--cloud);
    cursor:pointer;
    display:flex;
  }
  .news-form svg{width:16px;height:16px;}
  .footer-legal{
    grid-column:1 / -1;
    margin-top:38px;
    padding-top:20px;
    border-top:1px solid var(--line-on-dark);
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    font-size:.72rem;
    letter-spacing:.06em;
    opacity:.6;
  }
  .footer-legal a{opacity:1;}
  @media (max-width:760px){
    .footer-grid{grid-template-columns:1fr;gap:28px;}
  }

  /* ============================================================
     UNTERSEITEN-MODULE (Leitplanke für alle Unterseiten)
     ============================================================ */
  :root{
    --mod-pad:clamp(22px,2.6vw,32px);   /* einheitlicher Abstand vor UND nach jedem Modul */
    --h3-size:clamp(1.5rem,2.6vw,2rem);
  }
  /* Review-Hilfe (nur Entwurfsphase): Schalter blendet die Modulnamen ein */
  .mod-toggle{
    position:fixed;left:16px;bottom:16px;z-index:60;
    display:flex;align-items:center;gap:9px;cursor:pointer;
    background:rgba(17,13,10,.92);border:1px solid var(--line-on-dark);border-radius:999px;padding:9px 15px;
    font-size:.64rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.7;
    transition:opacity .2s ease;
  }
  .mod-toggle:hover,.mod-toggle:has(input:checked){opacity:1;}
  .mod-toggle input{accent-color:var(--sun);width:14px;height:14px;margin:0;}

  /* --- Modul-Grundgerüst --- */
  /* Jedes Modul: gleicher Abstand vor und nach (im CMS später wählbar: Klein / Standard / Groß / Keiner) */
  .mod{position:relative;padding-block:var(--space,var(--mod-pad));}
  .mod[data-space="s"]{--space:calc(var(--mod-pad) * .5);}
  .mod[data-space="l"]{--space:calc(var(--mod-pad) * 1.6);}
  .mod[data-space="none"]{--space:0px;}
  .mod--cream{background:var(--cream);color:var(--ink);}
  /* Hintergrundbild statt Farbe (Text bleibt hell, abgedunkelte Bildfläche) */
  .mod--bg{color:var(--cloud);overflow:hidden;}
  .mod--bg > .wrap{position:relative;z-index:1;}
  .mod-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
  .mod-bg img{width:100%;height:100%;object-fit:cover;display:block;}
  .mod-bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(17,13,10,calc(var(--ov,.7) - .15)) 0%,rgba(17,13,10,var(--ov,.7)) 100%);
  }
  .mod--bg .eyebrow{color:var(--sun);}
  .mod .eyebrow{color:var(--sun);}
  .mod--cream .eyebrow{color:var(--sun-soft);}
  .mod--cream .btn-dark{color:var(--ink);}
  .mod--cream .btn-dark:hover,.mod--cream .btn-dark:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--cloud);}
  .mod--cream .btn-dark:hover svg,.mod--cream .btn-dark:focus-visible svg{stroke:var(--cloud);}
  .btn-out:hover svg{transform:translate(2px,-2px);}
  .btn--disabled{opacity:.4;pointer-events:none;}

  /* Review-Hilfe: Modulnamen einblenden (nur Entwurfsphase) */
  body.show-modules [data-module]{outline:1.5px dashed var(--sun);outline-offset:-1.5px;position:relative;}
  body.show-modules [data-module]::before{
    content:attr(data-module);position:absolute;top:0;left:0;z-index:4;
    background:var(--sun);color:var(--ink);font-size:.62rem;font-weight:700;letter-spacing:.1em;
    text-transform:uppercase;padding:4px 9px;
  }

  /* --- M01 Titelblock --- */
  .mod-head .eyebrow{margin:0 0 var(--gap-eyebrow);}
  .mod-head h1,.mod-head h2{
    font-family:var(--font-head);font-size:var(--h2-size);font-weight:300;text-transform:uppercase;
    line-height:var(--h2-leading);margin:0 0 var(--gap-heading);
  }
  .mod-head h1{font-size:clamp(2.4rem,6vw,4.4rem);}
  .mod-sub{margin:0;max-width:52ch;font-size:1.05rem;line-height:1.6;opacity:.88;}
  .mod-head--center{text-align:center;}
  .mod-head--center .mod-sub{margin-inline:auto;}
  .mod-head > :last-child{margin-bottom:0;}

  /* --- Text-Block (wird in mehreren Modulen genutzt) --- */
  .mod-copy .eyebrow{margin:0 0 var(--gap-eyebrow);}
  .mod-copy h3,.mod-news h2{
    font-family:var(--font-head);font-size:var(--h3-size);font-weight:300;text-transform:uppercase;
    line-height:var(--h2-leading);margin:0 0 var(--gap-heading);
  }
  .mod-copy p:not(.eyebrow){margin:0 0 1em;line-height:1.7;opacity:.85;max-width:56ch;}
  .mod-copy a:not(.btn){text-decoration:underline;text-underline-offset:3px;}
  .mod-copy .btn{margin-top:calc(var(--gap-cta) - 1em);}
  .mod-copy > :last-child{margin-bottom:0;}

  /* --- M02 Bild + Text --- */
  .mt{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
  /* Textposition wählbar: Standard = Text rechts, .mt--text-left = Text links */
  .mt--text-left .mt-media,.mt--text-left .mt-images{order:2;}
  .mt--text-left{grid-template-columns:1fr 1fr;}
  .mt--text-left.mt--2{grid-template-columns:1fr 1.9fr;}
  .mt--text-left.mt--3{grid-template-columns:1fr 2.3fr;}
  .mt-media{margin:0;}
  .mt-media img,.mt-images img{width:100%;height:100%;object-fit:cover;display:block;border-radius:2px;}
  .mt-media .frame{aspect-ratio:4/3;overflow:hidden;border-radius:2px;}
  .mt--2{grid-template-columns:1.9fr 1fr;}
  .mt--3{grid-template-columns:2.3fr 1fr;}
  .mt-images{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:18px;}
  .mt-images figure{margin:0;}
  .mt-images .frame{aspect-ratio:var(--ar,3/4);overflow:hidden;border-radius:2px;}

  /* --- M03 Bildreihe --- */
  .img-row{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:18px;}
  .img-row figure{margin:0;}
  .img-row .frame{overflow:hidden;border-radius:2px;aspect-ratio:var(--ar);}
  .img-row img{width:100%;height:100%;object-fit:cover;display:block;}
  .img-row--1{--ar:21/9;}
  .img-row--2{--ar:3/2;}
  .img-row--3{--ar:3/4;}
  .img-row--4{--ar:1/1;}
  .mod--bleed .img-row{gap:0;}
  /* Leere Beschreibungen nehmen keinen Platz ein */
  .gallery-caption:empty,.mod-cap:empty,.gallery-title:empty,.gallery-subtitle:empty{display:none;}
  .mod-cap{margin:0;}
  .mod-cap .wrap{padding-top:16px;}
  .img-row figcaption.gallery-caption{margin-top:16px;}
  .mod--bleed .img-row .frame{border-radius:0;max-height:72vh;}


  /* --- M03b Hero-Bild mit optionalem Text (Verlauf + Weichzeichner sichern die Lesbarkeit bei jedem Bild) --- */
  .hero-fig{position:relative;}
  .img-row .hero-fig .frame{aspect-ratio:auto;height:clamp(440px,44vw,660px);}
  .hero-scrim{
    position:absolute;inset:0;z-index:1;pointer-events:none;
    background:
      linear-gradient(var(--dir,90deg),rgba(17,13,10,.88) 0%,rgba(17,13,10,.62) 36%,rgba(17,13,10,0) 76%),
      linear-gradient(0deg,rgba(17,13,10,.6) 0%,rgba(17,13,10,0) 58%);
  }
  .hero-scrim::after{
    content:"";position:absolute;inset:0;
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(var(--dir,90deg),#000 0%,rgba(0,0,0,.7) 30%,transparent 64%);
    mask-image:linear-gradient(var(--dir,90deg),#000 0%,rgba(0,0,0,.7) 30%,transparent 64%);
  }
  .hero-over{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;}
  .hero-over-inner{width:100%;display:flex;padding-block:clamp(24px,4vw,56px);}
  .hero-over .mod-copy{max-width:min(500px,100%);color:var(--cloud);text-shadow:0 1px 20px rgba(17,13,10,.45);}
  .hero-over .mod-copy h3{font-size:var(--h2-size);}
  .hero-over .mod-copy p:not(.eyebrow){opacity:.92;}
  .hero-fig[data-text-pos="right"]{--dir:270deg;}
  .hero-fig[data-text-pos="right"] .hero-over-inner{justify-content:flex-end;}
  @media (max-width:640px){
    .hero-scrim{background:linear-gradient(0deg,rgba(17,13,10,.9) 0%,rgba(17,13,10,.7) 45%,rgba(17,13,10,.1) 100%);}
    .hero-scrim::after{-webkit-mask-image:linear-gradient(0deg,#000 0%,transparent 75%);mask-image:linear-gradient(0deg,#000 0%,transparent 75%);}
    .img-row .hero-fig .frame{height:clamp(460px,125vw,560px);}
  }

  /* --- M04 Textspalten --- */
  .cols{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:clamp(28px,4vw,48px);}
  .cols--1{max-width:62ch;}
  .col h3{font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 10px;line-height:1.4;}
  .col p{margin:0 0 1em;font-size:.95rem;line-height:1.7;opacity:.82;}
  .col p:last-child{margin-bottom:0;}
  .col a{text-decoration:underline;text-underline-offset:3px;}
  .mod--cream .col p{opacity:.78;}

  /* --- M05 Zitat --- */
  .mod-quote{text-align:center;}
  .mod-quote blockquote{
    margin:0 auto;font-family:var(--font-script);
    font-size:clamp(2.2rem,5vw,3.6rem);line-height:.98;color:var(--cloud);max-width:20ch;text-wrap:balance;
  }
  .mod-quote .hero-rule{display:block;margin:28px auto 18px;}
  .mod-quote cite{display:block;font-style:normal;font-size:.68rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.7;}

  /* --- M06 Eckdaten --- */
  /* So viele Spalten wie Eckdaten vorhanden sind, höchstens vier. */
  .facts{display:grid;grid-template-columns:repeat(var(--n,4),1fr);}
  .fact{padding:0 26px;border-left:1px solid var(--line-on-dark);}
  .fact:first-child{border-left:none;padding-left:0;}
  .fact .eyebrow{margin:0 0 10px;font-size:.66rem;}
  .fact strong{display:block;font-family:var(--font-head);font-weight:400;font-size:clamp(1.15rem,2vw,1.45rem);text-transform:uppercase;letter-spacing:.04em;line-height:1.2;}
  .fact span{display:block;margin-top:6px;font-size:.84rem;opacity:.65;}
  /* Trennlinien auf heller Fläche. */
  .mod--cream .fact{border-left-color:var(--line-on-cream);}

  /* --- M07 Tickets --- */
  .tickets{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(28px,4vw,40px);}
  .ticket{
    display:flex;flex-direction:column;padding:28px 26px 26px;
    border:1px solid var(--line-on-cream);background:rgba(255,255,255,.35);border-radius:2px;
  }
  .ticket--featured{border-color:var(--ink);background:rgba(255,255,255,.6);}
  .ticket-status{
    align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
    font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:18px;
  }
  .ticket-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#6d8a4f;}
  .ticket-status--soldout{opacity:.55;}
  .ticket-status--soldout::before{background:var(--ink);opacity:.5;}
  .ticket-status--few::before{background:var(--sun-soft);}
  .ticket h3{font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;}
  .ticket-price{font-family:var(--font-head);font-weight:300;font-size:clamp(2.2rem,4vw,2.9rem);line-height:1;margin:0 0 18px;}
  .ticket-price small{font-size:.8rem;letter-spacing:.1em;opacity:.6;margin-left:6px;font-family:var(--font-display);font-weight:500;}
  .ticket ul{list-style:none;margin:0 0 var(--gap-cta);padding:18px 0 0;border-top:1px solid var(--line-on-cream);font-size:.88rem;line-height:1.5;}
  .ticket li{padding-left:20px;position:relative;margin-bottom:8px;opacity:.82;}
  .ticket li::before{content:"";position:absolute;left:0;top:.6em;width:9px;height:1px;background:var(--ink);}
  .ticket .btn{margin-top:auto;align-self:flex-start;}
  .tickets-note{margin:22px 0 0;font-size:.78rem;opacity:.65;}

  /* --- M08 Line-up --- */
  .lineup{display:grid;grid-template-columns:repeat(4,1fr);gap:20px 18px;}
  .lineup .artist-card h3{font-size:.9rem;}
  .lineup-note{margin:26px 0 0;font-size:.82rem;opacity:.7;}

  /* --- M09 FAQ --- */
  .faq-grid{display:grid;grid-template-columns:.85fr 2fr;gap:clamp(28px,5vw,64px);align-items:start;}
  .faq-item{border-top:1px solid var(--line-on-dark);}
  .faq-item:last-child{border-bottom:1px solid var(--line-on-dark);}
  .faq-item summary{
    list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:20px 0;font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:"";flex:none;width:12px;height:12px;
    background:linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
               linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
    transition:transform .25s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item p{margin:0;padding:0 40px 22px 0;font-size:.95rem;line-height:1.7;opacity:.8;max-width:62ch;}

  /* --- M10 Video (2-Klick, datenschutzfreundlich) --- */
  .video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:2px;background:#000;}
  .video img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;}
  .video-ui{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px;}
  .video-play{width:68px;height:68px;border-radius:50%;border:1px solid var(--cloud);background:rgba(17,13,10,.45);color:var(--cloud);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;}
  .video-play:hover{background:var(--cloud);color:var(--ink);}
  .video-play svg{width:22px;height:22px;margin-left:3px;}
  .video-hint{margin:0;max-width:46ch;font-size:.78rem;line-height:1.55;opacity:.8;}

  /* --- M11 CTA-Band (nutzt das Ticket-Band der Startseite) --- */
  /* Gefüllter Button statt Rahmen – im CTA-Band der Unterseiten und im
     Ticket-Band der Startseite, beide nutzen dieselbe Bandfläche. Auf dem
     dunklen Band hebt sich eine cremefarbene Fläche deutlich stärker ab als
     eine Umrandung. Beim Überfahren dreht sich das Verhältnis um – so bleibt
     eine sichtbare Rückmeldung, ohne eine zweite Farbe einzuführen. */
  .ticket-band .btn-dark{
    background:var(--cloud);
    border-color:var(--cloud);
    color:var(--ink);
  }
  .ticket-band .btn-dark:hover,
  .ticket-band .btn-dark:focus-visible{
    background:transparent;
    border-color:var(--cloud);
    color:var(--cloud);
  }
  .mod--band .ticket-band{border:1px solid rgba(246,241,232,.12);}
  .mod--band .ticket-band-inner{padding-inline:clamp(20px,3vw,36px);}

  /* --- M12 Newsletter --- */
  .mod-news{border-top:1px solid var(--line-on-dark);}
  .mod-news-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,64px);align-items:center;}
  .mod-news .eyebrow{margin:0 0 var(--gap-eyebrow);opacity:.85;}
  .mod-news p:not(.eyebrow){margin:0;opacity:.7;font-size:.9rem;}
  .mod-news .news-form{max-width:none;}
  .mod-news p.privacy{margin-top:12px;font-size:.72rem;opacity:.55;line-height:1.5;}
  /* Auf cremefarbenem Grund sind helle Linien und helle Schrift unsichtbar –
     Trennlinie, Eingabe, Platzhalter und Pfeil wechseln deshalb auf Dunkel. */
  .mod--cream.mod-news{border-top-color:var(--line-on-cream);}
  .mod--cream .news-form{border-bottom-color:var(--line-on-cream);}
  .mod--cream .news-form input,
  .mod--cream .news-form button{color:var(--ink);}
  .mod--cream .news-form input::placeholder{color:var(--ink);opacity:.55;}


  @media (max-width:900px){
    .mt,.mt--2,.mt--3,.mt--text-left,.mt--text-left.mt--2,.mt--text-left.mt--3{grid-template-columns:1fr;}
    .mt--text-left .mt-media,.mt--text-left .mt-images{order:0;}
    .facts{grid-template-columns:repeat(min(var(--n,4),2),1fr);gap:28px 0;}
    .fact:nth-child(odd){border-left:none;padding-left:0;}
    .tickets{grid-template-columns:1fr;}
    .lineup{grid-template-columns:repeat(2,1fr);}
    .faq-grid,.mod-news-grid{grid-template-columns:1fr;}
    .cols--3,.cols--4{grid-template-columns:repeat(2,1fr);}
    .img-row--4{grid-template-columns:repeat(2,1fr);}
  }
  @media (max-width:640px){
    .mt-images{grid-template-columns:1fr;}
    .mt-images .frame{aspect-ratio:16/10 !important;}
    .img-row--2,.img-row--3{grid-template-columns:1fr;}
    .img-row--2 .frame,.img-row--3 .frame{aspect-ratio:16/10;}
    .img-row--1{--ar:4/3;}
    .cols--2,.cols--3,.cols--4{grid-template-columns:1fr;}
    .facts{grid-template-columns:1fr;}
    .fact{border-left:none;padding-left:0;}
  }

  /* ---------- Logo-Reihe (Partner) ---------- */
  .logo-row-title{text-align:center;margin:0 0 clamp(20px,2.4vw,30px);}
  .logo-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:clamp(18px,3.4vw,44px);
  }
  .logo-row img{
    display:block;
    max-width:170px;
    max-height:74px;
    width:auto;
    height:auto;
    object-fit:contain;
    opacity:.85;
  }
  .logo-row a{display:block;}
  .logo-row a:hover img{opacity:1;}
  @media (max-width:520px){
    .logo-row img{max-width:132px;max-height:58px;}
  }