@font-face{font-family:"Gochi Hand";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/gochi-hand-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/figtree-latin-400-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:italic;font-weight:400;font-display:swap;src:url("fonts/figtree-latin-400-italic.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/figtree-latin-600-normal.woff2") format("woff2");}
@font-face{font-family:"Figtree";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/figtree-latin-800-normal.woff2") format("woff2");}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;}
img{max-width:100%;}
[hidden]{display:none!important;}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);}
/* Layout: a white sheet drawn on with a felt marker. Each section is anchored by one colour from the logo and one of its stick figures. */
:root{
  color-scheme: light;
  --paper:#ffffff;
  --ink:#1d1b1c;
  --ink-soft:#575154;
  --line:#d9d3d6;
  --cyan:#0bd6de;
  --lilac:#d683cc;
  --gelb:#e3d80b;
  --pink:#e3006d;
  --gruen:#6cd024;
  --wash-cyan:#e2f9fa;
  --wash-gelb:#fbf8d4;
  --wash-pink:#fde7f1;
  --wash-gruen:#ebf8e0;
  --f-hand:"Gochi Hand","Comic Neue","Segoe Print","Bradley Hand",cursive;
  --f-body:"Figtree","Segoe UI",system-ui,-apple-system,sans-serif;
  --wobble:255px 18px 225px 18px / 18px 225px 18px 255px;
  --wobble-2:18px 225px 18px 255px / 255px 18px 225px 18px;
  --stroke:3px solid var(--ink);
}
body{background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:18px;line-height:1.6;}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));}
h1,h2,h3{font-family:var(--f-hand);font-weight:400;line-height:1.05;text-wrap:balance;margin:0;}
h2{font-size:clamp(2.4rem,5vw,3.6rem);}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:3px dashed var(--pink);outline-offset:4px;}
.eyebrow{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
section{padding-block:clamp(44px,5.5vw,68px);}

/* top bar */
.top{padding-block:18px;}
.top .wrap{display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;}
.brand{font-family:var(--f-hand);font-size:1.7rem;text-decoration:none;line-height:1;}
.brand span{color:var(--pink);}
.nav{display:flex;gap:6px 22px;flex-wrap:wrap;font-weight:600;font-size:.95rem;}
.nav a{text-decoration:none;border-bottom:2px solid transparent;}
.nav a:hover{border-color:var(--pink);}

/* hero */
.hero{padding-block:clamp(24px,4vw,48px) clamp(48px,7vw,80px);}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,5vw,72px);align-items:center;}
.hero-logo{width:100%;max-width:480px;justify-self:center;}
.hero-logo img{display:block;width:100%;height:auto;}
.hero-text{display:grid;gap:22px;min-width:0;}
.hero h1{font-size:clamp(2.8rem,6.4vw,5rem);}
.hero h1 em{font-style:normal;position:relative;white-space:nowrap;isolation:isolate;}
.hero h1 em::after{content:"";position:absolute;left:-4px;right:-6px;bottom:.04em;height:.32em;background:var(--cyan);z-index:-1;border-radius:var(--wobble);transform:rotate(-1.2deg);}
.lede{font-size:1.15rem;max-width:34em;color:var(--ink);}
.actions{display:flex;flex-wrap:wrap;gap:14px;}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-hand);font-size:1.45rem;line-height:1;padding:.55em 1em .5em;border:var(--stroke);border-radius:var(--wobble);text-decoration:none;background:var(--paper);transition:transform .15s ease;}
.btn.primary{background:var(--gelb);}
.btn:hover{transform:rotate(-1.5deg) translateY(-2px);}
.facts{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none;}
.facts li{font-weight:600;font-size:.95rem;padding:.3em .85em;border:2px solid var(--ink);border-radius:var(--wobble-2);}

/* photo band */
.band{padding-block:0;}
.photo{margin:0;}
.photo img{display:block;width:100%;height:auto;border:var(--stroke);border-radius:var(--wobble);}
.photo figcaption{font-family:var(--f-hand);font-size:1.25rem;color:var(--ink-soft);margin-top:10px;}
.band .photo img{aspect-ratio:16/9;object-fit:cover;object-position:50% 40%;}

/* about */
.about .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:start;}
.about-text{display:grid;gap:20px;min-width:0;}
.about-text p{max-width:36em;}
.names{display:grid;gap:10px;margin:6px 0 0;padding:0;list-style:none;}
.names li{display:flex;align-items:center;gap:14px;font-family:var(--f-hand);font-size:1.8rem;line-height:1.1;}
.names li::before{content:"";flex:none;width:22px;height:22px;border:3px solid var(--ink);border-radius:50% 45% 55% 48%;background:var(--dot);}
.instruments{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:0;list-style:none;}
.instruments li{padding:.25em .9em;border-radius:var(--wobble);background:var(--wash-cyan);font-weight:600;font-size:.95rem;}
.about .photo{transform:rotate(1.2deg);}
.about .photo img{aspect-ratio:5/4;object-fit:cover;}

/* section heading with figure */
.head{display:flex;align-items:flex-end;gap:18px;margin-bottom:clamp(28px,4vw,44px);}
.head img{width:clamp(64px,9vw,96px);height:auto;flex:none;mix-blend-mode:multiply;}
.head-text{display:grid;gap:8px;min-width:0;}

/* songs */
.songs{background:var(--wash-pink);}
.songlist{display:flex;flex-wrap:wrap;gap:16px 18px;padding:0;margin:0;list-style:none;}
.songlist li{font-family:var(--f-hand);font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1;padding:.45em .8em .4em;border:var(--stroke);border-radius:var(--wobble);background:var(--paper);transition:transform .2s ease;}
.songlist li:nth-child(5n+1){background:var(--gelb);transform:rotate(-2deg);}
.songlist li:nth-child(5n+2){background:var(--paper);transform:rotate(1.5deg);}
.songlist li:nth-child(5n+3){background:var(--cyan);transform:rotate(-1deg);}
.songlist li:nth-child(5n+4){background:var(--gruen);transform:rotate(2deg);}
.songlist li:nth-child(5n+5){background:var(--lilac);transform:rotate(-1.5deg);}
.songlist li.more{background:transparent;border-style:dashed;transform:none;color:var(--ink-soft);}
.songlist li:not(.more):hover{transform:rotate(0) scale(1.05);}
.songs .note{margin-top:28px;max-width:40em;color:var(--ink-soft);}

/* story */
.story .wrap{display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;}
.story-card{max-width:760px;width:100%;min-width:0;box-sizing:border-box;display:grid;gap:18px;padding:clamp(28px,5vw,56px);border:var(--stroke);border-radius:var(--wobble-2);background:repeating-linear-gradient(to bottom,transparent 0,transparent 35px,var(--wash-cyan) 35px,var(--wash-cyan) 37px);position:relative;}
.story-card h2{font-size:clamp(2.2rem,4.6vw,3.2rem);}
.story-card p{font-size:1.08rem;line-height:1.7;overflow-wrap:break-word;hyphens:auto;}
.story-card .caps{font-weight:800;letter-spacing:.03em;color:var(--pink);}
.story-card .rio{font-family:var(--f-hand);font-size:clamp(2.6rem,6vw,4rem);line-height:1;text-align:center;padding-block:6px;}
.story-card .rio span{background:var(--gelb);padding:0 .25em;border-radius:var(--wobble);}
.story-card .aside{font-style:italic;color:var(--ink-soft);}

/* organisers */
.orga{background:var(--wash-gelb);}
.orga-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;}
.rider{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:0;list-style:none;}
.rider li{display:grid;gap:4px;align-content:start;padding:18px 18px 20px;background:var(--paper);border:var(--stroke);border-radius:var(--wobble);min-width:0;}
.rider li:nth-child(even){border-radius:var(--wobble-2);}
.rider .big{font-family:var(--f-hand);font-size:clamp(2rem,3.6vw,2.7rem);line-height:1;font-variant-numeric:tabular-nums;}
.rider .big::after{content:"";display:block;width:2.2em;height:6px;margin-top:6px;border-radius:6px;background:var(--c);}
.rider .lbl{font-weight:800;font-size:.95rem;}
.rider .sub{font-size:.9rem;color:var(--ink-soft);line-height:1.45;}
.plan{display:grid;gap:12px;min-width:0;}
.plan-box{background:var(--paper);border:var(--stroke);border-radius:var(--wobble-2);padding:16px;}
.plan svg{display:block;width:100%;height:auto;}
.plan p{font-size:.92rem;color:var(--ink-soft);}
.orga .intro{max-width:40em;margin-bottom:28px;}

/* press */
.faq dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 48px;margin:0;}
.faq dl div{display:grid;gap:6px;min-width:0;padding-top:14px;border-top:2px dashed var(--line);}
.faq dt{font-weight:800;}
.faq dd{margin:0;color:var(--ink-soft);}
@media (max-width:860px){.faq dl{grid-template-columns:minmax(0,1fr);}}
.gigs{padding-block:clamp(48px,7vw,80px) 0;}
.giglist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:0;margin:0;list-style:none;}
.gig{display:flex;gap:20px;align-items:center;padding:18px 20px;border:var(--stroke);border-radius:var(--wobble);min-width:0;}
.gig:nth-child(even){border-radius:var(--wobble-2);}
.gig-date{flex:none;display:grid;justify-items:center;width:92px;padding:10px 6px 8px;background:var(--c);border:3px solid var(--ink);border-radius:var(--wobble-2);line-height:1;}
.gig-date .d{font-family:var(--f-hand);font-size:2.6rem;font-variant-numeric:tabular-nums;}
.gig-date .m{font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-top:4px;}
.gig-info{display:grid;gap:2px;min-width:0;}
.gig-venue{font-family:var(--f-hand);font-size:1.7rem;line-height:1.1;}
.gig-meta{font-weight:700;}
.gig-addr{color:var(--ink-soft);font-size:.95rem;}
.gig-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px;font-weight:700;font-size:.92rem;}
.gig-links a{text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px;}
.contact{display:grid;gap:8px;padding:0;margin:0;list-style:none;}
.contact li{display:grid;grid-template-columns:5.5em minmax(0,1fr);gap:12px;align-items:baseline;}
.contact .k{font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);}
.contact a{font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere;}
.contact .who{color:var(--ink-soft);font-size:.92rem;}
@media (max-width:860px){.giglist{grid-template-columns:minmax(0,1fr);}}
@media (max-width:420px){.gig{gap:14px;padding:14px;}.gig-date{width:76px;}.gig-date .d{font-size:2.1rem;}}
.press-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;}
.press-card{display:grid;gap:14px;padding:24px;border:var(--stroke);border-radius:var(--wobble);min-width:0;}
.press-card:nth-child(2){border-radius:var(--wobble-2);}
.press-card header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.press-card h3{font-size:1.9rem;}
.press-body{font-size:.98rem;line-height:1.6;display:grid;gap:12px;overflow-wrap:break-word;hyphens:auto;}
.copy{font-family:var(--f-body);font-weight:700;font-size:.9rem;padding:.45em 1em;border:2px solid var(--ink);border-radius:var(--wobble-2);background:var(--wash-gruen);color:var(--ink);cursor:pointer;}
.copy:hover{background:var(--gruen);}
.copy[data-done]{background:var(--gruen);}
.press .note{margin-top:22px;color:var(--ink-soft);font-size:.95rem;max-width:44em;}

/* closing */
.closing{padding-bottom:clamp(40px,6vw,64px);}
.closing .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;}
.closing h2{font-size:clamp(2.4rem,5vw,3.6rem);}
.closing-text{display:grid;gap:18px;min-width:0;}
.closing .photo{transform:rotate(-1.2deg);}
.closing .photo img{aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;}
.sign{font-family:var(--f-hand);font-size:1.6rem;line-height:1.25;}

footer{border-top:2px dashed var(--line);padding-block:24px 32px;font-size:.88rem;color:var(--ink-soft);}
footer .wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

@media (max-width:860px){
  .hero .wrap,.about .wrap,.orga-grid,.press-grid,.closing .wrap{grid-template-columns:minmax(0,1fr);}
  .hero-logo{max-width:340px;}
  .rider{grid-template-columns:repeat(2,minmax(0,1fr));}
  .band .photo img{aspect-ratio:4/3;}
}
@media (max-width:420px){
  body{font-size:17px;}
  .rider{grid-template-columns:minmax(0,1fr);}
  .nav{font-size:.85rem;gap:4px 14px;}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;}
}

/* views */
[data-view][hidden]{display:none!important;}
.backlink{font-weight:700;}
.org-hero{padding-block:clamp(24px,4vw,48px) clamp(40px,6vw,64px);}
.org-hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,64px);align-items:center;}
.org-hero h1{font-size:clamp(2.6rem,6vw,4.4rem);}
.org-hero .letter{display:grid;gap:16px;min-width:0;}
.org-hero .letter p{max-width:38em;}
.org-hero .hero-logo{max-width:320px;}
.toc{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.teaser{background:var(--wash-gelb);}
.teaser .wrap{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,4vw,48px);align-items:center;}
.teaser img{width:clamp(80px,10vw,120px);height:auto;mix-blend-mode:multiply;}
.teaser-text{display:grid;gap:12px;min-width:0;}
.teaser-text p{max-width:40em;}
@media (max-width:860px){
  .org-hero .wrap,.teaser .wrap{grid-template-columns:minmax(0,1fr);}
  .org-hero .hero-logo{display:none;}
  .teaser img{display:none;}
}
.legal{padding-block:clamp(40px,6vw,72px);}
.legal .wrap{max-width:760px;display:grid;gap:18px;}
.legal h1{font-size:clamp(2.4rem,5vw,3.4rem);}
.legal h2{font-size:1.8rem;margin-top:12px;}
.todo{background:var(--wash-gelb);border:2px dashed var(--ink);padding:.1em .4em;border-radius:6px;font-weight:600;}
.video{padding-block:0 clamp(8px,2vw,24px);}
.video-box{position:relative;aspect-ratio:16/9;max-width:100%;border:var(--stroke);border-radius:var(--wobble);overflow:hidden;background:var(--ink);}
.video-box img{width:100%;height:100%;object-fit:cover;opacity:.75;display:block;}
.video-box button{position:absolute;inset:0;display:grid;place-content:center;gap:10px;justify-items:center;background:transparent;border:0;cursor:pointer;color:#fff;font-family:var(--f-hand);font-size:1.6rem;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 12px rgba(0,0,0,.6);padding:16px;text-align:center;}
.video-box .play{width:84px;height:84px;border-radius:50% 46% 52% 48%;background:var(--pink);border:3px solid var(--ink);display:grid;place-content:center;}
.video-box .play::after{content:"";border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;margin-left:6px;}
.video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.video-note{font-size:.88rem;color:var(--ink-soft);margin-top:10px;}
.downloads{margin-top:36px;display:grid;gap:16px;}
.downloads h3{font-size:1.9rem;}
.dl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:0;margin:0;list-style:none;}
.dl-grid a{display:grid;gap:8px;text-decoration:none;padding:12px;border:2px solid var(--ink);border-radius:var(--wobble-2);background:var(--paper);}
.dl-grid a:hover{background:var(--wash-gruen);}
.dl-grid img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:6px;background:#fff;}
.dl-grid li:last-child img{object-fit:contain;}
.dl-grid .t{font-weight:800;}
.dl-grid .m{font-size:.85rem;color:var(--ink-soft);}
.direct{font-size:.95rem;color:var(--ink-soft);}
.direct a{color:var(--ink);font-weight:700;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap;}
.ask{display:grid;gap:14px;justify-items:start;padding:clamp(20px,3vw,32px);border:var(--stroke);border-radius:var(--wobble);background:var(--wash-gelb);min-width:0;}
.ask h3{font-size:1.8rem;}
.ask ul{margin:0;padding-left:1.2em;display:grid;gap:4px;}
.ask .hint{font-size:.88rem;color:var(--ink-soft);}
.form-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start;}
@media (max-width:860px){.form-wrap,.dl-grid{grid-template-columns:minmax(0,1fr);}}
footer nav{display:flex;gap:16px;flex-wrap:wrap;}
footer a{color:inherit;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* buttons: wiggle on press too (touch screens have no hover) */
.btn{cursor:pointer;color:var(--ink);}
.btn:active{transform:rotate(1.5deg) scale(.96);}
.btn.small{font-size:1.15rem;padding:.45em .8em .4em;}
.gig-links{gap:10px;margin-top:10px;}
.gig{align-items:flex-start;}

/* three dots: menu on every page */
.top .wrap{padding-right:max(140px,env(safe-area-inset-right,0px));}
.dotmenu{position:fixed;top:max(20px,calc(env(safe-area-inset-top,0px) + 12px));right:max(16px,env(safe-area-inset-right,0px));z-index:50;}
.dotbtn{display:flex;gap:10px;align-items:center;margin:0;padding:9px 14px 9px 12px;background:var(--paper);color:var(--ink);border:var(--stroke);border-radius:var(--wobble);cursor:pointer;transition:transform .15s ease;font-family:var(--f-hand);font-size:1.3rem;line-height:1;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;}
.dotbtn:hover{transform:rotate(-3deg);}
.dotmenu .dots{display:flex;gap:4px;transition:transform .35s ease;}
.dotmenu .dots i{width:13px;height:13px;border:2.5px solid var(--ink);border-radius:50% 45% 55% 48%;background:var(--c);}
.dotbtn[aria-expanded="true"] .dots{transform:rotate(180deg);}
.dotmenu nav{position:absolute;right:0;top:calc(100% + 10px);display:grid;min-width:220px;padding:10px;background:var(--paper);border:var(--stroke);border-radius:var(--wobble-2);box-shadow:0 8px 24px rgba(0,0,0,.12);}
.dotmenu nav a{font-family:var(--f-hand);font-size:1.45rem;line-height:1.1;padding:.35em .5em;text-decoration:none;border-radius:8px;}
.dotmenu nav a:hover,.dotmenu nav a:focus-visible{background:var(--wash-pink);}

/* songs as links */
.songlist li a{display:block;text-decoration:none;color:inherit;}
.songlist li:has(a){cursor:pointer;}

/* Jogi on the story card */
.story-card{margin-top:40px;}
.story-fig{position:absolute;top:-46px;right:clamp(12px,4vw,36px);width:clamp(64px,10vw,96px);height:auto;transform:rotate(6deg);}
.story-card h2{padding-right:clamp(60px,10vw,100px);}

/* thanks after booking mail */
.thanks{font-family:var(--f-hand);font-size:1.6rem;line-height:1.2;padding:.5em .8em;background:var(--wash-gruen);border:var(--stroke);border-radius:var(--wobble);}
.thanks:focus{outline:none;}

/* reservation */
.reserve{padding-block:clamp(24px,4vw,48px) clamp(56px,8vw,96px);}
.reserve .wrap{max-width:760px;display:grid;gap:22px;}
.reserve h1{font-size:clamp(2.6rem,6vw,4.2rem);}
.reserve .gig{margin:0;}
.seats{display:flex;align-items:center;gap:18px;padding:18px 22px;border:var(--stroke);border-radius:var(--wobble-2);background:var(--wash-gelb);}
.seats .n{font-family:var(--f-hand);font-size:clamp(3rem,8vw,4.4rem);line-height:1;font-variant-numeric:tabular-nums;color:var(--pink);}
.seats .l{font-weight:800;line-height:1.3;}
.seats .l small{display:block;font-weight:400;color:var(--ink-soft);font-size:.9rem;}
.seatbar{height:14px;border:2.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper);margin-top:8px;}
.seatbar i{display:block;height:100%;background:var(--gruen);transition:width .4s ease;}
.rform{position:relative;display:grid;gap:18px;padding:clamp(20px,3vw,32px);border:var(--stroke);border-radius:var(--wobble);}
.rform label{display:grid;gap:6px;font-weight:800;}
.rform input{font:inherit;font-weight:400;padding:.55em .7em;border:2.5px solid var(--ink);border-radius:10px;background:var(--paper);color:var(--ink);min-width:0;}
.rform .count{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--f-hand);font-size:1.6rem;font-weight:400;}
.rform .stepper{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;}
.rform .count input{width:3.2em;font-family:var(--f-hand);font-size:1.6rem;text-align:center;padding:.2em .3em;}
.rform .step{font-family:var(--f-hand);font-size:1.6rem;width:1.8em;height:1.8em;line-height:1;border:2.5px solid var(--ink);border-radius:50% 45% 55% 48%;background:var(--wash-cyan);cursor:pointer;color:var(--ink);}
.rform .hint,.rmsg{font-size:.92rem;color:var(--ink-soft);}
.rmsg[data-ok]{font-family:var(--f-hand);font-size:1.6rem;color:var(--ink);padding:.5em .8em;background:var(--wash-gruen);border:var(--stroke);border-radius:var(--wobble);}
.rform button[disabled]{opacity:.5;cursor:not-allowed;transform:none;}

/* admin */
.adm{max-width:900px!important;}
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.adm-list{display:grid;gap:22px;}
.adm-gig{display:grid;gap:14px;padding:clamp(16px,3vw,24px);border:var(--stroke);border-radius:var(--wobble);}
.adm-gig:nth-child(even){border-radius:var(--wobble-2);}
.adm-gig .gig{border:0;padding:0;}
.adm-stats{display:flex;flex-wrap:wrap;gap:8px;}
.adm-stats span{font-weight:700;font-size:.9rem;padding:.25em .8em;border-radius:var(--wobble);background:var(--wash-cyan);}
.adm-stats span.full{background:var(--wash-pink);}
.adm-actions{display:flex;flex-wrap:wrap;gap:10px;}
.adm table{width:100%;border-collapse:collapse;font-size:.95rem;}
.adm th,.adm td{text-align:left;padding:.45em .5em;border-bottom:2px dashed var(--line);vertical-align:middle;}
.adm th{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.adm td.n,.adm th.n{text-align:right;font-variant-numeric:tabular-nums;}
.adm tfoot td{font-weight:800;border-bottom:0;}
.adm .x{font:inherit;font-size:.85rem;font-weight:700;padding:.2em .7em;border:2px solid var(--ink);border-radius:var(--wobble-2);background:var(--paper);color:var(--ink);cursor:pointer;}
.adm .x:hover{background:var(--wash-pink);}
.adm-add{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.adm-add input{font:inherit;padding:.4em .6em;border:2.5px solid var(--ink);border-radius:10px;min-width:0;}
.adm-add input[name=name]{flex:1 1 180px;}
.adm-add input[name=personen]{width:5em;}
.adm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.adm details summary{cursor:pointer;font-family:var(--f-hand);font-size:1.6rem;margin:28px 0 16px;}
.adm .hint{font-size:.9rem;color:var(--ink-soft);}
#gig-dialog{border:0;padding:0;background:transparent;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);}
#gig-dialog::backdrop{background:rgba(29,27,28,.45);}
#gig-dialog .rform{background:var(--paper);}
#gig-dialog h2{font-size:2.2rem;}
@media (max-width:520px){.adm-grid{grid-template-columns:minmax(0,1fr);}}
.adm-seats{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:10px 12px;border:2px dashed var(--line);border-radius:12px;font-weight:700;font-size:.92rem;}
.adm-seats label{display:flex;align-items:center;gap:8px;}
.adm-seats input{font:inherit;width:5em;padding:.3em .5em;border:2.5px solid var(--ink);border-radius:10px;}

/* home has no top bar: keep the hero clear of the fixed menu */
.home .hero{padding-top:clamp(72px,8vw,88px);}
picture{display:contents;}
picture > source{display:none;}
/* admin: more air between rows */
.adm{gap:32px!important;}
.adm-head{row-gap:18px;}
.adm-list{gap:32px;}
.adm-gig{gap:22px;padding:clamp(20px,3.5vw,30px);}
.adm-stats{gap:10px;}
.adm-actions{gap:14px;}
.adm-seats{gap:14px 18px;padding:14px 16px;}
.adm table{margin-block:4px;}
.adm-add{gap:12px;}
#gig-dialog .rform{gap:20px;}
#app{display:grid;gap:28px;}
.rmsg:empty{display:none;}
/* small or short screens (e.g. a phone's cover display): keep the open menu inside the viewport */
.dotmenu nav{max-height:calc(100vh - 100px);max-height:calc(100dvh - 100px);max-width:calc(100vw - 32px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
@media (max-height:520px), (max-width:340px){
  .dotmenu{top:max(10px,env(safe-area-inset-top,0px));right:max(10px,env(safe-area-inset-right,0px));}
  .dotbtn{padding:7px 10px;font-size:1.1rem;gap:7px;}
  .dotmenu .dots i{width:11px;height:11px;}
  .dotmenu nav{min-width:0;width:max-content;max-height:calc(100dvh - 70px);padding:6px;}
  .dotmenu nav a{font-size:1.2rem;padding:.3em .45em;}
}

/* very narrow screens (cover displays, small phones): nothing may be wider than the viewport */
html,body{overflow-x:clip;}
h1,h2,h3,.gig-venue{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
@media (max-width:360px){
  .wrap{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));}
  .gig{flex-direction:column;align-items:flex-start;gap:12px;padding:14px;}
  .gig-date{display:flex;align-items:baseline;gap:8px;width:auto;padding:6px 12px;}
  .gig-date .m{margin-top:0;}
  .gig-venue{overflow-wrap:anywhere;}
  .head{gap:10px;}
  .head img{width:52px;}
  .press-card{padding:16px;}
  .rform{padding:16px;}
  .rform .stepper{white-space:normal;flex-wrap:wrap;}
  .rform .count,.rform .count input,.rform .step{font-size:1.35rem;}
  .seats{padding:14px;gap:12px;}
  .dl-grid a{padding:10px;}
  .gig-venue{font-size:1.4rem;}
  .head{flex-wrap:wrap;align-items:flex-start;}
  .story-card{padding:22px 16px;}
  .story-card h2{padding-right:56px;}
  .story-fig{width:56px;top:-36px;right:8px;}
  .press-card header{display:grid;justify-items:start;}
  p,dd,li{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;}
}
/* grid children may shrink below their longest word, so the wrapping above can apply */
.story-card,.press-card,.press-body,.legal .wrap,.org-hero .letter,.about-text,.hero-text,.head-text,.closing-text,.teaser-text,.ask,.rform,.reserve .wrap,.adm-gig{grid-template-columns:minmax(0,1fr);}
.video-box .yt-note{position:absolute;left:12px;right:12px;bottom:12px;margin:0 auto;width:max-content;max-width:calc(100% - 24px);font-family:var(--f-body);font-size:.8rem;font-weight:600;line-height:1.3;padding:.35em .9em;border-radius:999px;background:rgba(29,27,28,.65);text-shadow:none;}
@media (max-width:600px){
  .video-box button{font-size:1.2rem;gap:6px;padding:12px 12px 44px;}
  .video-box .play{width:56px;height:56px;}
  .video-box .play::after{border-left-width:18px;border-top-width:11px;border-bottom-width:11px;margin-left:4px;}
  .video-box .yt-note{font-size:.7rem;bottom:8px;}
}
/* section heads without eyebrow: heading centred on its figure; songs block centred */
.head{align-items:center;}
.songs .head{justify-content:center;}
.songs .songlist{justify-content:center;max-width:900px;margin-inline:auto;}
.rider .big{white-space:nowrap;}
.rider .big small{font-size:.55em;}
/* top bar on sub pages: links start left, clear of the fixed menu button on the right */
.top .wrap{justify-content:flex-start;padding-right:max(176px,calc(env(safe-area-inset-right,0px) + 176px));}
@media (max-height:520px), (max-width:340px){ .top .wrap{padding-right:140px;} }
/* reservation page: keep the footer below the fold while the concert loads (no layout shift) */
.reserve{min-height:calc(100vh - 80px);min-height:calc(100svh - 80px);}

/* song chips: hover shows a silent preview, click opens the clip with sound */
.songlist .song{all:unset;display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.songlist .song::before{content:"▶";display:inline-block;font-size:.55em;vertical-align:.25em;margin-right:.45em;}
.songlist .song:focus-visible{outline:3px dashed var(--pink);outline-offset:6px;}
.song-preview{position:fixed;z-index:40;pointer-events:none;border:var(--stroke);border-radius:var(--wobble-2);overflow:hidden;background:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(6px) rotate(-1.5deg);transition:opacity .18s ease,transform .18s ease;}
.song-preview.on{opacity:1;transform:translateY(0) rotate(-1.5deg);}
.song-preview video{display:block;width:100%;height:100%;object-fit:cover;}
.song-preview[data-orient="v"]{width:170px;height:302px;}
.song-preview[data-orient="h"]{width:300px;height:169px;}
.song-dialog{border:0;padding:0;background:transparent;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);}
.song-dialog::backdrop{background:rgba(29,27,28,.7);}
.song-dialog-inner{display:grid;gap:10px;padding:12px;background:var(--paper);border:var(--stroke);border-radius:var(--wobble-2);}
.song-dialog-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.song-dialog h3{font-size:1.8rem;}
.song-dialog video{display:block;border-radius:8px;background:var(--ink);max-width:min(92vw,900px);max-height:calc(100dvh - 120px);width:auto;height:auto;}
.song-dialog[data-orient="v"] video{height:min(calc(100dvh - 120px),720px);}
.song-dialog[data-orient="h"] video{width:min(92vw,854px);}
@media (prefers-reduced-motion:reduce){.song-preview{transition:none;transform:none;}}
/* clip dialog: the video is the whole dialog, title and close float on top of it */
.song-dialog{max-width:none;max-height:none;overflow:visible;}
.song-dialog-inner{position:relative;display:block;padding:0;gap:0;overflow:hidden;background:var(--ink);}
.song-dialog-head{position:absolute;top:0;left:0;right:0;z-index:1;padding:12px 12px 36px 18px;background:linear-gradient(rgba(29,27,28,.7),rgba(29,27,28,0));pointer-events:none;}
.song-dialog h3{color:#fff;font-size:1.7rem;text-shadow:0 1px 4px rgba(0,0,0,.6);}
.song-dialog .song-close{pointer-events:auto;flex:none;width:40px;height:40px;padding:0;display:grid;place-items:center;font-size:1.1rem;border-radius:50% 46% 52% 48%;background:var(--paper);}
.song-dialog video{border-radius:0;max-width:none;max-height:none;object-fit:cover;}
.song-dialog[data-orient="v"] video{aspect-ratio:9/16;width:auto;height:min(calc(100dvh - 24px),780px,calc((100vw - 24px) * 16 / 9));}
.song-dialog[data-orient="h"] video{aspect-ratio:16/9;height:auto;width:min(calc(100vw - 24px),980px,calc((100dvh - 24px) * 16 / 9));}
/* close button in the site's own button style */
.song-dialog .song-close{width:auto;height:auto;padding:.45em .9em .4em;font-size:1.25rem;border-radius:var(--wobble);background:var(--gelb);transform:rotate(2deg);box-shadow:0 2px 0 rgba(0,0,0,.25);}
.song-dialog .song-close:hover{transform:rotate(-1.5deg) translateY(-2px);}
.song-dialog .song-close:active{transform:rotate(1.5deg) scale(.96);}
/* play marker drawn like the coloured dots elsewhere on the site (replaces the ▶ glyph) */
.songlist .song::before{content:"";width:.78em;height:.78em;margin-right:.45em;vertical-align:-.08em;font-size:inherit;border:2.5px solid var(--ink);border-radius:50% 45% 55% 48%;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.2 5.4 L14.6 10.1 L7 14.7 Z' fill='%231d1b1c' stroke='%231d1b1c' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;transition:transform .2s ease;}
.songlist li:hover .song::before,.songlist .song:focus-visible::before{transform:rotate(-12deg) scale(1.1);}

/* printable guest list (admin): hidden on screen, the only thing printed */
.print-sheet{display:none;}
@media print{
  @page{size:A4;margin:14mm 14mm 16mm;}
  body.printing > *:not(.print-sheet){display:none!important;}
  body.printing .print-sheet{display:block;color:#000;font-size:11pt;line-height:1.35;}
  .print-sheet header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:10px;}
  .print-sheet h1{font-size:24pt;margin:2px 0;}
  .print-sheet .eyebrow{color:#000;}
  .print-sheet .meta{font-weight:700;}
  .print-sheet header img{width:90px;height:auto;}
  .print-sheet .sum{display:flex;flex-wrap:wrap;gap:4px 18px;list-style:none;padding:0;margin:0 0 12px;font-size:10.5pt;}
  .print-sheet table{width:100%;border-collapse:collapse;}
  .print-sheet th,.print-sheet td{border-bottom:1px solid #999;padding:7px 6px;text-align:left;vertical-align:middle;}
  .print-sheet th{font-size:9pt;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid #000;}
  .print-sheet tr{break-inside:avoid;}
  .print-sheet thead{display:table-header-group;}
  .print-sheet .ck{width:34px;}
  .print-sheet .ck span{display:block;width:16px;height:16px;border:1.5px solid #000;border-radius:3px;}
  .print-sheet .nr{width:28px;color:#555;}
  .print-sheet .n{width:70px;text-align:right;font-variant-numeric:tabular-nums;}
  .print-sheet .note{width:34%;}
  .print-sheet tr.blank td{height:26px;}
  .print-sheet tfoot td{font-weight:800;border-bottom:0;border-top:2px solid #000;}
  .print-sheet .printed{margin-top:12px;font-size:8.5pt;color:#555;}
}
/* teaser figure: fixed size (a % max-width collapses to 0 in the auto grid column), also shown on phones */
.teaser img{max-width:none;}
@media (max-width:860px){ .teaser img{display:block;width:72px;} }