/* ============================================================
   residency.css – Jazzwerkstatt Peitz 2026
   ============================================================ */

*,*:before,*:after{box-sizing:border-box}*{margin:0}
html,body{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;font-weight:400;width:100%;overscroll-behavior:none}
html{overflow-x:hidden}
img,picture,video,canvas,svg{display:block;width:100%;height:auto}
input,button,textarea,select{background:none;color:inherit;border:none;padding:0;font:inherit;cursor:pointer;outline:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
*::-webkit-scrollbar{display:none}
*{-ms-overflow-style:none;scrollbar-width:none}
a{color:#000}
ul{list-style-type:none;padding:0;margin:0}
li{padding:0;margin:0}
p{margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}
h1,h2,h3,h4,h5,h6{font-weight:400}
@-moz-document url-prefix(){body{font-weight:lighter!important}}

/* ── Fonts — Pfad relativ zu assets/ ───────────────────── */
@font-face{font-family:NewEdge666-UltraLightRounded;font-style:normal;font-display:swap;
  src:url(../font/NewEdge666-UltraLightRounded.woff2) format("woff2"),
      url(../font/NewEdge666-UltraLightRounded.woff) format("woff")}
@font-face{font-family:NewEdge666-UltraLightRoundedSlanted;font-style:normal;font-display:swap;
  src:url(../font/NewEdge666-UltraLightRoundedSlanted.woff2) format("woff2"),
      url(../font/NewEdge666-UltraLightRoundedSlanted.woff) format("woff")}
@font-face{font-family:NewEdge6666-Regular;font-style:normal;font-display:swap;
  src:url(../font/NewEdge6666-Regular.woff2) format("woff2"),
      url(../font/NewEdge6666-Regular.woff) format("woff")}
html{font-family:NewEdge6666-Regular,sans-serif}
em{margin-left:-.2rem;margin-right:.1rem}

/* ── Font scale (1:1 Hauptseite) ────────────────────────── */
@media (min-width:1727px) and (max-width:5000px){html{font-size:80px}}
@media (min-width:1080px) and (max-width:1727px){html{font-size:80px}}
@media (min-width:500px)  and (max-width:1080px){html{font-size:80px}}
@media (min-width:0px)    and (max-width:500px) {html{font-size:38.25px}}

h1,.text--xxl{font-size:calc(1rem * 1.3066 * 1.3066);line-height:.843;margin:0;overflow-wrap:break-word;word-wrap:break-word;hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual}
h2,.text--xl {font-size:1.3066rem;line-height:.843;margin:0;overflow-wrap:break-word;word-wrap:break-word;hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual}
h3,.text--lg {font-size:.8rem;line-height:.843;margin:0;overflow-wrap:break-word;word-wrap:break-word;hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual}
h4,.text--md {font-size:calc(1rem / 1.3066 / 1.3066 / 1.3066 / 1.3066 / 1.3066 / (1.3066 / 1.45));line-height:1.15}
.safari h4,.safari .text--md{line-height:27.369709px!important}
h5,.text--sm {font-size:calc(1rem / 1.3066 / 1.3066 / 1.3066 / 1.3066 / 1.3066 / (1.3066 / 1.3));line-height:1}
h6,.text--xs {font-size:calc(1rem / (1.3066 / 1.3066 * 1.3066 * 1.3066))}
h1,h2,h3,h4,h5,h6,p{font-weight:400}

@media (min-width:0px) and (max-width:500px){
  .safari h4,.safari .text--md{line-height:12px!important}
  .firefox h4,.firefox .text--md{line-height:1.14!important}
  h4,.text--md{line-height:1.15}
  .text--md{font-size:calc(1rem / 1.3066 / 1.3066 / 1.3066 / 1.3066 / 1.3066 / (1.3066 / 2))!important}
}

/* ── Page ───────────────────────────────────────────────── */
body{background:#a9acb6;color:#000;display:flex;flex-direction:column;min-height:100vh}

/* ── Main / section system (1:1 Hauptseite) ─────────────── */
main{display:flex;flex-direction:column;width:100vw;overflow-x:hidden}
main .empty{height:15.51px}
main section{padding:0 10px;position:relative}
main section>div:last-child{margin-bottom:-15.51px}

@media (min-width:0px) and (max-width:500px){
  main .empty{height:7px}
  main section{padding:0 6px}
  main section>div:last-child{margin-bottom:-7.2px!important}
  .safari main .empty{height:6.72px}
  .safari main section{padding:0 6px}
  .safari main section>div:last-child{margin-bottom:-6.3px!important}
}

/* ── Column system (1:1) ────────────────────────────────── */
.column__2{width:100%;display:flex;position:relative}
.column__3{display:flex;position:relative}
.nested_column{position:relative;top:-8.5px;width:100%;flex:1}
@media (min-width:0px) and (max-width:500px){.nested_column{top:-4px}}

/* ── Block types (1:1) ──────────────────────────────────── */
.block__text{position:relative;width:fit-content;word-break:break-word;hyphens:manual;-webkit-hyphens:manual;-ms-hyphens:manual;box-sizing:border-box;flex-shrink:0;flex-grow:0;flex-basis:auto;top:-.11rem}
.block__text a{text-decoration:none}
.block__text a:hover{text-decoration:underline}
.block__heading{position:relative}
.block__heading a{text-decoration:none}
.block__heading a:hover{text-decoration:underline}
.block__image{position:relative;top:-.1rem}
.block__image img{width:100%;height:auto;position:relative;margin:0;padding:0;object-fit:contain}

@media (min-width:0px) and (max-width:500px){
  .safari .block__text{top:-.15rem}
  .block__text{top:-.09rem}
}

/* sup für Instrumente — gleiche Größe wie Name (text--md), leicht kleiner */
.block__heading sup,
.block__text sup{
  font-size:.7em;
  font-family:NewEdge6666-Regular,sans-serif;
  opacity:.55;
  margin-left:.25em;
  vertical-align:super;
  font-weight:400;
}

/* Ticket link */
.link-7{text-decoration:underline;color:#000}

/* ════════════════════════════════════════════════════════
   HERO — 1:1 wie Hauptseite
   height:100% + min-height = Summe aller Buttons (540px)
   ════════════════════════════════════════════════════════ */
#fullHeightSection{
  height:100%;
  position:relative;
  min-height:540px;
  background:#a9acb6;
  overflow:hidden;
  width:100%;
}

/* ── Menu (1:1 Hauptseite) ──────────────────────────────── */
#menu{display:flex;flex-direction:column;position:absolute;right:0;bottom:0;z-index:3}
.menu-item{display:flex;justify-content:center;align-items:center}
.menu__button{position:relative}
.sticky{position:fixed;bottom:auto;top:0;z-index:100}

#ticket-btn   {background:#D6EBE2;width:288px;height:115px;align-self:flex-end;z-index:4}
#ticket-btn .btn span{margin-top:5.5%}
#trommelparty-btn     {background:#00A4B7;width:328px;height:125px;right:0;align-self:flex-end;z-index:3}
#trommelparty-btn .btn span{margin-top:3%}
#anreise-btn{background:#A893B3;width:368px;height:135px;right:0;align-self:flex-end;z-index:3}
#anreise-btn .btn span{margin-top:4%}
#festival-btn {background:#FBBC43;width:448px;height:165px;align-self:flex-end;display:flex;justify-content:flex-end}
#festival-btn .btn{margin-right:105px}
#festival-btn .btn span{margin-top:5%}

.btn{display:flex;justify-content:center;align-items:center;width:fit-content;height:fit-content;cursor:pointer}
.btn span{display:block;text-align:center;line-height:1;padding:0 .25rem}
.rounded{border:solid black 2px;border-radius:20px}

/* Menu-Einfahranimation (1:1) */
#ticket-btn   {animation:menuIn .5s cubic-bezier(.25,.46,.45,.94) .1s both}
#trommelparty-btn     {animation:menuIn .5s cubic-bezier(.25,.46,.45,.94) .2s both}
#anreise-btn{animation:menuIn .5s cubic-bezier(.25,.46,.45,.94) .3s both}
#festival-btn {animation:menuIn .5s cubic-bezier(.25,.46,.45,.94) .4s both}
@keyframes menuIn{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}

@media (min-width:0px) and (max-width:500px){
  #fullHeightSection{min-height:0}
  #ticket-btn   {width:30vw;height:50px;display:none}
  #festival-btn {width:35vw;height:55px;display:none;justify-content:center}
  #festival-btn .btn{margin-right:0}
  #ticket-btn.sticky  {display:flex}
  #festival-btn.sticky{display:flex}
  #trommelparty-btn,#anreise-btn{display:none}
  .rounded{border:solid black 1px}
  .safari .btn span{margin-top:3.7px!important}
}

/* ════════════════════════════════════════════════════════
   CONTENT
   ════════════════════════════════════════════════════════ */
#residency-content{background:#a9acb6;padding:0}
.residency-inner{width:100%}

/* SVG + Intro-Text innerhalb fullHeightSection.
   padding-right verhindert dass Menü (448px breit) den Inhalt verdeckt. */
#residency-intro{
  padding: 0 460px 2rem 10px;
}

@media (max-width:500px){
  #residency-intro{
    padding: 0 6px 1rem;
  }
}

/* ── Foto-Variablen ─────────────────────────────────────── */
:root{
  --gap:  20px;   /* Abstand zwischen / um Fotos */
  --rad:  8px;    /* Abrundung                   */
  --side: 10px;   /* Seitenabstand (wie section) */
}

/* ── Full-bleed Einzelfoto ──────────────────────────────── */
.residency-photo-full{
  position:relative;
  margin: var(--gap) var(--side);
  overflow:hidden;
  border-radius:var(--rad);
}
.residency-photo-full img{
  width:100%;
  height:52vw;
  max-height:680px;
  object-fit:cover;
  object-position:center 18%;
  display:block;
}

/* ── Foto-Paar ──────────────────────────────────────────── */
.residency-photo-pair{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--gap);
  margin: var(--gap) var(--side);
}
.residency-photo-pair-cell{
  overflow:hidden;
  background:#888b96;
  border-radius:var(--rad);
}
.residency-photo-pair-cell img{
  width:100%;
  height:28vw;
  max-height:360px;
  object-fit:cover;
  display:block;
  transition:transform .85s cubic-bezier(.25,.46,.45,.94);
}
.residency-photo-pair-cell:hover img{transform:scale(1.04)}

/* ── Foto-Grid (6 Bilder) ───────────────────────────────── */
.residency-photo-grid{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap);
  margin: var(--gap) var(--side);
}
.residency-photo-grid-cell{
  overflow:hidden;
  aspect-ratio:4/3;
  background:#888b96;
  border-radius:var(--rad);
}
.residency-photo-grid-cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .85s cubic-bezier(.25,.46,.45,.94);
}
.residency-photo-grid-cell:hover img{transform:scale(1.04)}
.residency-photo-grid-cell--large{grid-column:span 2;aspect-ratio:16/9}

/* ── Scroll reveal ──────────────────────────────────────── */
/* Nur Textsektionen faden ein — Fotos sofort sichtbar */
.scroll-reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease;will-change:opacity,transform}
.scroll-reveal.visible{opacity:1;transform:translateY(0);will-change:auto}

/* Foto-Container: immer sichtbar, nur leicht hochschieben */
.residency-photo-full,
.residency-photo-pair,
.residency-photo-grid{
  opacity:1;
  transform:none;
  transition:none;
}

/* GPU-Layer für Hover-Zoom-Animationen */
.residency-photo-pair-cell,
.residency-photo-grid-cell{
  contain: layout style;
}
.residency-photo-pair-cell img,
.residency-photo-grid-cell img{
  will-change:transform;
}

/* ── Footer ─────────────────────────────────────────────── */
.site-footer{border-top:2px solid #000;padding:1rem 1.2rem;font-size:calc(1rem / (1.3066 / 1.3066 * 1.3066 * 1.3066));display:flex;gap:1.5rem;flex-wrap:wrap;background:#a9acb6}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* ── Mobile ─────────────────────────────────────────────── */
@media (min-width:0px) and (max-width:500px){
  :root{--gap:12px;--rad:5px;--side:6px}
  .residency-photo-full img{height:70vw;max-height:none}
  .residency-photo-grid{grid-template-columns:1fr 1fr}
  .residency-photo-grid-cell--large{grid-column:span 2}
  .residency-photo-pair{grid-template-columns:1fr}
  .residency-photo-pair-cell img{height:55vw;max-height:none}
}