@font-face{font-family:"Playfair Display";font-style:normal;font-weight:400 900;font-display:swap;src:url(/assets/fonts/playfair-display.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/montserrat.woff2) format("woff2")}
/* Idé: et julekort i koksgrå, bordeaux og guld. Toppen er en bordeaux plade med en stjerne over overskriften og en tynd guldstreg forneden. */
/* Farver: koksgrå er grunden. Mørk bordeaux er de store plader: sidens top, båndene, kortene, båndet med opfordringen og formularen. Guld er knapper, tal, streger og det fremhævede ord. Der er ingen hvide flader. */
/* Former: billeder er almindelige billeder med runde hjørner, knapper er runde i enderne, og ikoner og trin står i en tynd guldring uden fyld. Skrifterne er de samme som på Festoplevelser.dk. */
:root{
  color-scheme:dark;
  --coal:#242528; --coal-2:#2d2e33; --coal-3:#141517; --plate:#551423; --raise:var(--plate);
  --text:#f5f0e6; --soft:#e0d9cb; --muted:#b9b6b1; --muted-warm:#d8c6c1; --line:rgba(245,240,230,.14);
  --red:#8c2437; --red-glow:#7b1f30; --red-deep:#66182a; --red-ink:#46101c;
  --gold:#cfae66; --gold-hi:#e6cf98; --accent:var(--gold); --rule:var(--gold);
  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --body:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px;
  --gut:clamp(20px,5vw,56px);
  --sec:clamp(40px,5.6vw,80px);
}
*,*::before,*::after{box-sizing:border-box;font-variant-numeric:lining-nums!important}
body{margin:0;background:var(--coal);color:var(--text);font:400 16px/1.65 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--coal)}
img{max-width:100%}
[hidden]{display:none!important}
.wrap{max-width:1296px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
h1,h2,h3,h4,p,figure{margin:0}
h1,h2{font-family:var(--display);text-wrap:balance}
h1{font-weight:600;font-size:clamp(2.2rem,5vw,3.9rem);line-height:1.1;letter-spacing:-.02em}
h2{font-weight:500;font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.18;letter-spacing:-.01em}
h1 em,h2 em{font-style:normal;color:var(--accent)}
h3{font:600 1rem/1.45 var(--body)}
h3.h3{font:500 1.3rem/1.22 var(--display);text-wrap:balance}
a{color:inherit}
a[href^="tel:"],a[href^="mailto:"]{text-decoration:none}
a[href^="tel:"]:hover,a[href^="mailto:"]:hover{color:var(--accent)}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--gold);color:var(--coal-3);font:600 .9rem/1 var(--body);text-decoration:none}
.skip:focus{left:8px;top:8px}
.nf-links{justify-content:center;gap:10px;max-width:760px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eyebrow{font:600 .7rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.sel{user-select:all}
.lead{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.65;color:var(--muted);max-width:56ch}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;border:0;border-radius:2px;background:var(--gold);color:var(--coal-3);font:600 .92rem/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .2s}
.btn:hover{background:var(--gold-hi)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;padding:13px 24px;border:1px solid var(--accent);border-radius:2px;color:var(--text);font:600 .88rem/1 var(--body);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.btn-line:hover{background:var(--gold);color:var(--coal-3)}
.link{font-weight:600;font-size:.92rem;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:var(--accent)}
.link:hover{color:var(--accent)}
.link.small{font-size:.86rem}
.go{margin-top:auto;padding-top:6px;font:600 .7rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.go::after{content:"\2192";display:inline-block;margin-left:8px;transition:transform .2s}
a:hover>.go::after{transform:translateX(4px)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.tel-inline{font-size:.9rem;color:var(--muted)}
.tel-inline strong{color:var(--text);font-weight:600;font-feature-settings:"tnum";white-space:nowrap}
.more{display:flex;justify-content:center;margin-top:clamp(26px,3.2vw,40px)}
#tilbud,[id^="guide-"]{scroll-margin-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* masthead */
.mast{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--coal);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:28px;height:72px}
.logo{font:600 1.5rem/1 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.logo span{color:var(--accent)}
.mast .logo{margin-right:auto}
.nav{display:flex;align-items:center;gap:30px}
.nav>a,.nav-top{padding:10px 0;border:0;background:none;color:var(--text);font:500 .86rem/1 var(--body);letter-spacing:.02em;text-decoration:none;cursor:pointer;transition:color .2s}
.nav>a:hover,.nav>a[aria-current],.nav-top:hover,.nav-top.cur,.nav-group.open .nav-top{color:var(--accent)}
.nav .nav-x,.nav-label{display:none}
.nav-group{position:relative}
.nav-top{display:inline-flex;align-items:center;gap:8px}
.nav-top svg{width:9px;height:9px;transition:transform .2s}
.nav-group.open .nav-top svg{transform:rotate(180deg)}
.nav-sub{display:none;position:absolute;left:-22px;top:calc(100% + 12px);width:330px;padding:8px;background:var(--coal-2);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 28px 56px rgba(0,0,0,.4)}
.nav-sub::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-group.open .nav-sub{display:grid}
.nav-sub a{display:grid;gap:2px;padding:11px 14px;border-radius:3px;text-decoration:none}
.nav-sub a:hover,.nav-sub a[aria-current]{background:rgba(245,240,230,.07)}
.nav-sub b{font:500 1.08rem/1.2 var(--display)}
.nav-sub a[aria-current] b{color:var(--accent)}
.nav-sub i{font:400 .78rem/1.4 var(--body);color:var(--muted)}
.nav-sub a.nav-all{display:block;margin-top:4px;padding:12px 14px;border-top:1px solid var(--line);border-radius:0 0 3px 3px;font:600 .7rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.mast-tel{font-weight:600;font-size:.9rem;font-feature-settings:"tnum";white-space:nowrap}
.mast .btn{padding:12px 18px;font-size:.84rem}
.burger{display:none;position:relative;flex:none;width:44px;height:44px;border:1px solid var(--line);border-radius:2px;background:transparent;cursor:pointer}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;height:1.5px;background:var(--text)}
.burger span{left:12px;right:12px;top:21px}
.burger span::before{left:0;right:0;top:-6px}
.burger span::after{left:0;right:0;top:6px}
@media (hover:hover) and (min-width:1021px){.nav-group:hover .nav-sub{display:grid}.nav-group.shut .nav-sub{display:none}}
@media (max-width:1180px){.mast-tel{display:none}}
@media (max-width:1020px){
  .burger{display:block}
  .mast .wrap{gap:12px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;background:var(--coal-2);border-bottom:1px solid var(--line);padding-top:6px;padding-bottom:20px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px));max-height:calc(100vh - 62px);overflow-y:auto}
  .mast.open .nav{display:flex}
  .nav-top{display:none}
  .nav-label{display:block;padding:14px 0 4px;font:600 .68rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .nav-group{display:grid;padding-bottom:8px;border-bottom:1px solid var(--line)}
  .nav-sub,.nav-group.open .nav-sub{display:grid;position:static;width:auto;padding:0;background:none;border:0;box-shadow:none}
  .nav-sub::before{display:none}
  .nav-sub a{padding:7px 0}
  .nav-sub a:hover,.nav-sub a[aria-current]{background:none}
  .nav-sub b{font-size:1.35rem}
  .nav-sub i{display:none}
  .nav-sub a.nav-all{display:none}
  a.nav-label{text-decoration:none}
  .nav>a,.nav>a:hover{font:500 1.35rem/1.2 var(--display);letter-spacing:0;padding:12px 0;border-bottom:1px solid var(--line)}
  .nav .nav-x{display:block}
}
@media (max-width:520px){.mast .wrap{height:62px}.logo{font-size:1.36rem}.mast .btn{padding:11px 14px}}

/* heroes */
.hero-home .wrap{padding-block:clamp(30px,4.6vw,64px) var(--sec)}
.hh-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px clamp(28px,5vw,80px);align-items:end}
.hh-top h1{margin-top:16px}
.hh-side{display:grid;gap:22px;padding-bottom:8px}
.money{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:clamp(28px,4vw,52px)}
.sec .money{margin-top:0}
.money a{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;background:var(--coal-2);color:#fff;text-decoration:none}
.money img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.money a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,20,16,.92),rgba(11,20,16,.42) 38%,rgba(11,20,16,0) 68%)}
.money span{position:absolute;z-index:1;left:20px;right:20px;bottom:18px;display:grid;gap:4px}
.money b{font:500 clamp(1.3rem,2.1vw,1.75rem)/1.1 var(--display)}
.money i{font:400 .82rem/1.4 var(--body);color:rgba(255,255,255,.86)}
@media (prefers-reduced-motion:no-preference){.money img,.act img,.venue img,.gcard img,.gfeat img,.occ img{transition:transform .7s ease}.money a:hover img,.act:hover img,.venue:hover img,.gcard:hover img,.gfeat:hover img,.occ a:hover img{transform:scale(1.04)}}
@media (max-width:900px){.hh-top{grid-template-columns:1fr}}
@media (max-width:860px){.money{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.money span{left:14px;right:14px;bottom:12px}.money i{font-size:.76rem}}

.hero-split .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;padding-block:clamp(26px,4vw,56px) var(--sec)}
.hs-txt{display:grid;gap:18px;justify-items:start}
.hs-txt h1{font-size:clamp(2.1rem,4.3vw,3.4rem)}
.hs-img img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r)}
.usps{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px;font-size:.9rem;color:var(--soft)}
.usps li,.ticks li{position:relative;padding-left:28px}
.usps li::before,.ticks li::before{content:"";position:absolute;left:0;top:.82em;width:14px;height:1px;background:var(--accent)}
@media (max-width:900px){.hero-split .wrap{grid-template-columns:1fr}}

.hero-plain .wrap,.hero-center .wrap{display:grid;gap:18px;justify-items:center;text-align:center;padding-block:clamp(36px,5.4vw,72px) clamp(4px,1vw,12px)}
.hero-plain h1,.hero-center h1{max-width:18ch}
.hero-plain .lead,.hero-center .lead{max-width:62ch}
.hero-plain .cta-row{justify-content:center}
.crumbs{display:flex;flex-wrap:wrap;gap:10px;font-size:.78rem;letter-spacing:.02em;color:var(--muted)}
.hero-plain .crumbs,.hero-center .crumbs{justify-content:center}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--accent)}

/* photo hero, icon rows, photo band and gallery: the shared build of the pages under Firmaarrangementer */
.phero,.pband{position:relative;isolation:isolate;overflow:hidden}
.phero-bg,.pband-bg{position:absolute;inset:0;z-index:-1}
.phero-bg img,.pband-bg img{display:block;width:100%;height:100%;object-fit:cover}
.phero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(14,26,20,.46),rgba(14,26,20,.5) 58%,var(--coal))}
.pband-bg::after{content:"";position:absolute;inset:0;background:rgba(14,24,19,.6)}
.phero .wrap{display:grid;gap:18px;justify-items:center;text-align:center;padding-block:clamp(52px,8vw,120px) clamp(60px,9vw,128px)}
.phero.slim .wrap{padding-block:clamp(40px,6vw,84px) clamp(36px,5vw,68px)}
.phero.slim h1{max-width:20ch}
.phero .wrap,.pband .wrap{text-shadow:0 1px 2px rgba(0,0,0,.5),0 2px 22px rgba(0,0,0,.55)}
.phero .btn,.pband .btn{text-shadow:none}
.phero h1{max-width:17ch}
.phero .lead{max-width:56ch;color:var(--soft)}
.phero .crumbs{justify-content:center}
.phero .cta-row{justify-content:center;margin-top:8px}
.usps-row{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;font-size:.84rem;color:var(--soft)}
.usps-row li{position:relative;padding-left:20px}
.usps-row li::before{content:"";position:absolute;left:0;top:.8em;width:10px;height:1px;background:var(--accent)}
.icons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(26px,3.4vw,44px) clamp(18px,2.6vw,36px)}
.icons.n3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1040px;margin-inline:auto}
.icons.n5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(26px,3.4vw,44px) clamp(14px,2vw,28px)}
.icons>div{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r)}
.ico svg{width:26px;height:26px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icons p{font-size:.9rem;line-height:1.6;color:var(--muted);max-width:30ch}
.icons .go{text-decoration:none}
@media (max-width:1100px){.icons.n5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.icons,.icons.n3,.icons.n5{grid-template-columns:repeat(2,minmax(0,1fr))}.icons.n3>div:last-child,.icons.n5>div:last-child{grid-column:1 / -1}}
.pband .wrap{display:grid;gap:16px;justify-items:center;text-align:center;padding-block:clamp(52px,7.6vw,108px)}
.pband .eyebrow{color:var(--soft)}
.pband h2{max-width:22ch;font-size:clamp(1.7rem,3.2vw,2.5rem)}
.pband p{color:var(--soft);max-width:54ch}
.pband .btn{margin-top:8px}
.gal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.gal a{position:relative;display:block;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:var(--coal-2)}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gal a.gal-more{display:grid;place-content:center;gap:6px;padding:12px;background:var(--gold);color:var(--coal-3);text-align:center;text-decoration:none;transition:background .2s}
.gal a.gal-more:hover{background:var(--gold-hi)}
.gal-more b{font:600 clamp(.95rem,1.7vw,1.35rem)/1.2 var(--display)}
.gal-more i{font:500 .74rem/1.3 var(--body)}
@media (prefers-reduced-motion:no-preference){.gal img{transition:transform .7s ease}.gal a:hover img{transform:scale(1.05)}}
@media (max-width:860px){.gal{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gal-more i{display:none}}
[id^="billeder-"]{scroll-margin-top:72px}

/* cases: album mosaic */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:clamp(20px,2.8vw,32px)}
.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--text);font:500 .84rem/1 var(--body);cursor:pointer;transition:border-color .2s}
.chip span{color:var(--muted);font-feature-settings:"tnum"}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--coal-3);font-weight:600}
.chip[aria-pressed="true"] span{color:var(--coal-3)}
.cases-wrap{container-type:inline-size}
.cases{--g:14px;--col:calc((100cqw - 5*var(--g))/6);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:calc((var(--col)*2 + var(--g))*.72);grid-auto-flow:dense;gap:var(--g)}
.case{position:relative;grid-column:span 2;min-width:0;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:var(--coal-2);color:#fff;text-align:left;cursor:pointer;font:inherit}
.case img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.case::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(9,17,13,.94),rgba(9,17,13,.62) 34%,rgba(9,17,13,.12) 62%,rgba(9,17,13,0) 80%)}
.case span{position:absolute;z-index:1;left:20px;right:20px;bottom:16px;display:grid;gap:4px}
.case b{font:500 clamp(1.15rem,1.7vw,1.4rem)/1.15 var(--display);text-wrap:balance}
.case.big b{font-size:clamp(1.5rem,2.8vw,2.2rem)}
.case i{font:400 .8rem/1.3 var(--body);color:rgba(255,255,255,.86);font-feature-settings:"tnum"}
.case i.cat{font:600 .64rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
@media (prefers-reduced-motion:no-preference){.case img{transition:transform .7s ease}.case:hover img{transform:scale(1.04)}}
.cases-note{margin-top:18px;text-align:center;font-size:.84rem;color:var(--muted);font-feature-settings:"tnum"}
@media (max-width:860px){
  .cases{--g:10px;--col:calc((100cqw - var(--g))/2);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:calc(var(--col)*.82)}
  .case{grid-column:auto}
  .case span{left:12px;right:12px;bottom:12px}
  .case b{font-size:1.02rem}
  .case.big b{font-size:1.4rem}
  .case:not(.big) i:not(.cat){font-size:.74rem}
  .case:not(.big) i.cat{display:none}
  .chips{justify-content:flex-start}
}

/* cases: customer statements */
.refs{columns:3 300px;column-gap:20px}
.ref{break-inside:avoid;display:grid;gap:10px;justify-items:start;margin-bottom:20px;padding:24px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r)}
.ref h3.h3{font-size:1.25rem}
.ref-who{font-size:.82rem;font-weight:500;color:var(--muted)}
.facts-row{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.facts-row li{padding:5px 10px;border-radius:2px;background:rgba(245,240,230,.08);font:500 .74rem/1.2 var(--body);font-feature-settings:"tnum"}
.ref-q{position:relative;margin:4px 0 0;display:grid;gap:.7em;font:400 1rem/1.55 var(--display);color:var(--soft)}
.ref.long .ref-q{max-height:10.8em;overflow:hidden}
.ref.long .ref-q::after{content:"";position:absolute;inset:auto 0 0;height:3.4em;background:linear-gradient(to top,var(--raise),transparent)}
.ref.long.open .ref-q{max-height:none}
.ref.long.open .ref-q::after{display:none}
.ref-more{padding:0;border:0;background:none;color:var(--accent);font:600 .7rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.refs-more{margin-top:10px}
.refs-more summary{display:flex;justify-content:center;list-style:none;cursor:pointer;margin-bottom:24px}
.refs-more summary::-webkit-details-marker{display:none}
.refs-more[open] summary{display:none}

/* cases: album viewer */
.album{position:fixed;inset:0;z-index:50;overflow-y:auto;background:var(--coal-3);color:var(--text);padding-bottom:env(safe-area-inset-bottom,0px)}
.album-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:18px;background:var(--coal-3);border-bottom:1px solid var(--line);padding-block:14px;padding-top:calc(14px + env(safe-area-inset-top,0px));padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.album-head{display:grid;gap:5px;margin-right:auto;min-width:0}
.album-head h2{font-size:clamp(1.25rem,2.8vw,1.8rem)}
.album-count{font-size:.84rem;color:var(--muted);white-space:nowrap;font-feature-settings:"tnum"}
.album-x,.album-view-bar button{padding:11px 16px;border:1px solid var(--line);border-radius:2px;background:transparent;color:var(--text);font:600 .84rem/1 var(--body);cursor:pointer;white-space:nowrap}
.album-x:hover,.album-view-bar button:hover{border-color:var(--accent);color:var(--accent)}
.album-grid{columns:3 280px;column-gap:10px;padding-block:18px 40px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.album-th{display:block;width:100%;margin:0 0 10px;padding:0;border:0;border-radius:var(--r);overflow:hidden;background:rgba(245,240,230,.06);cursor:zoom-in;break-inside:avoid}
.album-th img{display:block;width:100%;height:auto}
.album-view{position:fixed;inset:0;z-index:3;display:grid;grid-template-rows:minmax(0,1fr) auto;place-items:center;background:#0a130f;padding-top:env(safe-area-inset-top,0px)}
#album-img{max-width:min(94vw,1280px);max-height:calc(100vh - 110px);width:auto;height:auto;border-radius:var(--r)}
.album-nav{position:absolute;top:calc(50% - 50px);width:48px;height:56px;border:0;border-radius:2px;background:rgba(245,240,230,.12);color:var(--text);font:400 2rem/1 var(--body);cursor:pointer}
.album-nav:hover{background:rgba(245,240,230,.24)}
.album-nav.prev{left:max(10px,env(safe-area-inset-left,0px))}
.album-nav.next{right:max(10px,env(safe-area-inset-right,0px))}
.album-view-bar{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))}
#album-pos{min-width:5.5em;text-align:center;font-size:.86rem;color:var(--muted);font-feature-settings:"tnum"}
@media (max-width:640px){.album-count{display:none}.album-nav{width:40px;height:48px;font-size:1.6rem}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.facts div{display:grid;gap:6px;align-content:start;justify-items:center;text-align:center;padding:4px 20px;border-right:1px solid var(--line)}
.facts div:last-child{border-right:0}
.facts strong{font:500 clamp(1.8rem,3.4vw,2.6rem)/1 var(--display);letter-spacing:-.01em;color:var(--accent)}
.facts span{font-size:.84rem;line-height:1.45;color:var(--muted);max-width:22ch}
@media (max-width:760px){
  .facts{grid-template-columns:1fr 1fr;row-gap:26px}
  .facts div{padding:0 10px}
  .facts div:nth-child(2){border-right:0}
}

/* sections: one charcoal ground; a section that continues on the same ground as the one before sits closer to it */
.sec{background:var(--coal)}
.sec.lift{background:var(--coal-2);--raise:var(--coal)}
.sec>.wrap{padding-block:var(--sec)}
.sec.flow>.wrap{padding-top:calc(var(--sec)*.5)}
.sec.ruled{border-top:1px solid var(--line)}
.facts-sec>.wrap{padding-block:clamp(24px,3vw,36px)}
.sec-head{display:grid;gap:14px;justify-items:center;text-align:center;max-width:66ch;margin:0 auto clamp(26px,3.4vw,44px)}
.sec-head p{color:var(--muted);max-width:58ch}
.sec-head h2::after,.center-block>h2::after,.label-head h2::after{content:"";display:block;width:48px;height:2px;margin:16px auto 0;background:var(--rule)}
.side>h2::after,.m-txt>h2::after,.feature .txt>h2::after,.info>h2::after{content:"";display:block;width:48px;height:2px;margin-top:16px;background:var(--rule)}
.label-head{margin-bottom:clamp(26px,3.4vw,44px);text-align:center}
.label-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem)}

.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cols>div{display:grid;grid-template-rows:auto 1fr auto;gap:10px;justify-items:start;padding:clamp(22px,2.4vw,30px);border:1px solid var(--line);border-radius:var(--r)}
.cols p{font-size:.92rem;color:var(--muted)}
.cols .link{margin-top:6px}
@media (max-width:860px){.cols{grid-template-columns:1fr;gap:12px}}

/* catalogue cards */
.acts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 22px}
.act,.venue,.gcard{display:flex;flex-direction:column;gap:6px;min-width:0;text-decoration:none}
.ph{border-radius:var(--r);overflow:hidden;background:var(--coal-2);margin-bottom:8px}
.ph img{display:block;width:100%;height:100%;object-fit:cover}
.act .ph{aspect-ratio:4/5}
.act p,.venue p,.gcard p{font-size:.88rem;line-height:1.55;color:var(--muted)}
.venues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 22px}
.venues.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.venue .ph{aspect-ratio:4/3}
.venue .meta{font-size:.8rem;color:var(--accent)}
.venue .price{margin-top:auto;padding-top:4px;font-size:.86rem;font-weight:600;font-feature-settings:"tnum"}
@media (max-width:860px){
  .acts,.venues,.venues.three{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 14px}
  .acts h3.h3,.venues h3.h3{font-size:1.1rem}
  .act p,.venue p{font-size:.82rem;line-height:1.5}
  .ph{margin-bottom:6px}
}

.vitem{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:clamp(22px,4vw,60px);align-items:center;padding-block:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.vitem:last-child{border-bottom:1px solid var(--line)}
.vitem .ph{aspect-ratio:4/3;margin:0}
.vitem .txt{display:grid;gap:10px;justify-items:start;max-width:62ch}
.vitem .txt>p:not(.meta){color:var(--soft)}
.vitem h3.h3{font-size:clamp(1.45rem,2.4vw,1.8rem)}
.vitem .meta{font-size:.86rem;color:var(--muted)}
.vitem .meta strong{color:var(--text);font-weight:600;font-feature-settings:"tnum"}
.vitem .ticks{gap:6px;font-size:.9rem;color:var(--soft)}
.vitem .link{margin-top:6px}
.tag{font:600 .64rem/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:7px 11px;border:1px solid var(--line);border-radius:999px}
@media (max-width:760px){.vitem{grid-template-columns:1fr}}

.occ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.occ a{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--coal-2);color:#fff;text-decoration:none}
.occ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.occ a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,20,16,.92),rgba(11,20,16,.55) 34%,rgba(11,20,16,.05) 72%)}
.occ span{position:absolute;z-index:1;left:18px;right:18px;bottom:16px;display:grid;gap:5px}
.occ b{font:500 1.35rem/1.15 var(--display)}
.occ i{font:600 .66rem/1.3 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
@media (max-width:860px){.occ{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.occ a{aspect-ratio:1/1}.occ b{font-size:1.15rem}.occ span{left:14px;right:14px;bottom:12px}}

.feature{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center}
.feature img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r)}
.feature .txt{display:grid;gap:16px;justify-items:start}
.feature .txt>p{color:var(--soft)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ticks.big{gap:0;font-size:.98rem}
.ticks.big li{padding-block:13px;border-top:1px solid var(--line)}
.ticks.big li:last-child{border-bottom:1px solid var(--line)}
.ticks.big li::before{top:calc(13px + .82em)}
@media (max-width:860px){.feature{grid-template-columns:1fr}}

.program{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.program li{display:grid;gap:6px;align-content:start;padding:22px 24px 0;border-right:1px solid var(--line)}
.program li:first-child{padding-left:0}
.program li:last-child{border-right:0;padding-right:0}
.program time{font:500 1.9rem/1 var(--display);font-feature-settings:"tnum";color:var(--accent)}
.program p{font-size:.88rem;line-height:1.55;color:var(--muted)}
@media (max-width:860px){
  .program{grid-template-columns:1fr}
  .program li{grid-template-columns:84px minmax(0,1fr);column-gap:8px;padding:16px 0;border-right:0;border-bottom:1px solid var(--line)}
  .program time{grid-row:1 / span 2;font-size:1.55rem}
  .program h3,.program p{grid-column:2}
}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,4vw,56px);counter-reset:s}
.steps li{counter-increment:s;display:grid;gap:8px;align-content:start;justify-items:center;text-align:center}
.steps li::before{content:counter(s);display:grid;place-items:center;width:52px;height:52px;margin-bottom:6px;border:1px solid var(--accent);border-radius:50%;font:500 1.25rem/1 var(--display);color:var(--accent)}
.steps p{font-size:.9rem;color:var(--muted);max-width:34ch}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:28px}}

.split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5.5vw,84px);align-items:center}
.split>.side{display:grid;gap:18px;justify-items:start}
.rows>div{display:grid;gap:5px;justify-items:start;padding-block:17px;border-top:1px solid var(--line)}
.rows>div:last-child{border-bottom:1px solid var(--line)}
.rows p{font-size:.92rem;color:var(--muted)}
.rows .link{margin-top:4px}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.center-block{display:grid;gap:18px;justify-items:center;max-width:64ch;margin-inline:auto;text-align:center}
.center-block .prose{max-width:none}
.media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,76px);align-items:center}
.m-img{display:grid;gap:10px}
.m-img img{display:block;width:100%;height:auto;aspect-ratio:var(--ar,5/4);object-fit:cover;border-radius:var(--r)}
.m-img figcaption{font-size:.8rem;color:var(--muted)}
.m-txt{display:grid;gap:18px;justify-items:start;min-width:0}
.m-txt>.rows,.m-txt>.ticks,.m-txt>.prose{width:100%}
.m-txt .muted{max-width:52ch}
@media (max-width:860px){.media{grid-template-columns:1fr}}
/* zigzag: every other two-column section swaps sides on wide screens; on phones the heading always comes first */
@media (min-width:861px){
  .split.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .split.flip>.side{order:2}
  .feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
  .feature.flip>img{order:2}
  .media.flip>.m-img{order:2}
}
@media (min-width:761px){
  .vitem:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .vitem:nth-child(even) .ph{order:2}
}

.prose{display:grid;gap:14px;max-width:64ch;font-size:.98rem;line-height:1.75;color:var(--soft)}
.prose a,.seealso a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1px}
.prose a:hover,.seealso a:hover{color:var(--accent)}
.seealso{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.92rem}

/* quotes and clients */
.bigquote{margin:0 auto;display:grid;gap:20px;justify-items:center;max-width:900px;text-align:center}
.bigquote::before{content:"";width:48px;height:2px;background:var(--rule)}
.bigquote p{font:400 clamp(1.25rem,2.4vw,1.8rem)/1.45 var(--display);text-wrap:balance}
.bigquote footer{font:500 .84rem/1.4 var(--body);color:var(--muted)}
.clients{font:400 clamp(1.05rem,1.7vw,1.28rem)/1.55 var(--display);color:var(--soft);max-width:46ch}
.qcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.qcards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.qcard{margin:0;display:grid;grid-template-rows:1fr auto;gap:14px;padding:clamp(22px,2.4vw,30px);background:var(--raise);border:1px solid var(--line);border-radius:var(--r)}
.qcard p{font:400 1.04rem/1.55 var(--display);color:var(--soft)}
.qcard footer{font:500 .8rem/1.4 var(--body);color:var(--accent)}
@media (max-width:860px){.qcards,.qcards.two{grid-template-columns:1fr;gap:12px}}

/* guides */
.gcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 22px}
.gcard .ph,.gfeat .ph{aspect-ratio:3/2}
.gcard .meta,.gfeat .meta,.g-meta{font:600 .68rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.gfeat{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;text-decoration:none;margin-bottom:clamp(30px,4vw,52px)}
.gfeat .ph{margin:0}
.gfeat .txt{display:grid;gap:14px;justify-items:start}
.gfeat h3.h3{font-size:clamp(1.55rem,2.7vw,2.1rem)}
.gfeat p{color:var(--muted)}
@media (max-width:860px){.gcards{grid-template-columns:1fr;gap:30px}.gfeat{grid-template-columns:1fr}}

.g-head .wrap{display:grid;gap:16px;justify-items:start;padding-block:clamp(26px,4vw,56px) clamp(22px,3vw,34px)}
.g-head h1{max-width:20ch;font-size:clamp(2.05rem,4.4vw,3.3rem)}
.stand{font:400 clamp(1.08rem,1.7vw,1.28rem)/1.55 var(--display);color:var(--soft);max-width:60ch}
.g-fig img{display:block;width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;border-radius:var(--r)}
.g-body{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:clamp(28px,5.5vw,84px);align-items:start;padding-block:clamp(12px,2vw,28px) var(--sec)}
.g-aside{position:sticky;top:96px;display:grid;gap:24px}
.kort{display:grid;gap:12px;padding:22px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r)}
.kort .ticks{font-size:.88rem;line-height:1.55;color:var(--soft)}
.toc{display:grid;gap:9px;font-size:.84rem;line-height:1.45}
.toc a{color:var(--muted);text-decoration:none}
.toc a:hover{color:var(--accent)}
.g-prose{max-width:68ch;min-width:0;font-size:1.01rem;line-height:1.8;color:var(--soft)}
.g-prose>*+*{margin-top:1em}
.g-prose h2{font-size:clamp(1.4rem,2.3vw,1.75rem);color:var(--text);margin-top:1.8em}
.g-prose h3{color:var(--text);margin-top:1.7em}
.g-prose h2+*,.g-prose h3+*{margin-top:.6em}
.g-prose ul,.g-prose ol{margin-bottom:0;padding-left:1.3em;display:grid;gap:.5em}
.g-prose li::marker{color:var(--accent)}
.g-prose strong{font-weight:600;color:var(--text)}
.g-prose a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:5px;text-decoration-thickness:1px}
.g-prose a:hover{color:var(--accent)}
.g-prose ul.check{list-style:none;padding-left:0}
.check li{position:relative;padding-left:34px}
.check li::before{content:"";position:absolute;left:0;top:.4em;width:16px;height:16px;border:1px solid var(--accent);border-radius:2px}
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font:400 .92rem/1.5 var(--body)}
.tbl th{padding:0 16px 10px 0;border-bottom:1px solid var(--accent);text-align:left;font:600 .66rem/1.3 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tbl td{padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.tbl td:last-child,.tbl th:last-child{padding-right:0;text-align:right;white-space:nowrap;font-feature-settings:"tnum"}
.band{display:grid;gap:18px;justify-items:start;margin-top:2.4em;padding:clamp(22px,2.8vw,34px);background:var(--coal-2);border:1px solid var(--line);border-radius:var(--r);line-height:1.6}
.band>p{font:500 clamp(1.3rem,2.1vw,1.55rem)/1.2 var(--display);color:var(--text)}
.g-prose .band a{text-decoration:none}
.g-prose .band a.btn:hover{color:var(--coal-3)}
@media (max-width:900px){.g-body{grid-template-columns:1fr}.g-aside{position:static}}
@media (max-width:760px){.g-fig img{aspect-ratio:3/2}}

/* faq */
.faq{max-width:860px;margin-inline:auto}
.faq details{padding-block:15px;border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;font:500 1rem/1.5 var(--body)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:300 1.4rem/1.1 var(--body);color:var(--accent)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin-top:8px;max-width:62ch;font-size:.92rem;color:var(--muted)}

/* about and contact */
.team{display:grid;gap:10px;max-width:760px}
.team img{display:block;width:100%;height:auto;border-radius:var(--r)}
.team figcaption{font-size:.8rem;color:var(--muted)}
.cdetails{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 36px;margin-bottom:clamp(26px,4vw,44px)}
.cdetails>div{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:1px solid var(--line)}
.cdetails p{color:var(--soft)}
.cdetails .big{font:500 clamp(1.4rem,2.6vw,1.95rem)/1.15 var(--display);color:var(--text);overflow-wrap:anywhere}
.m-txt>.cdetails{width:100%;margin-bottom:0;gap:24px 32px}
.m-txt>.cdetails .big{font-size:clamp(1.1rem,1.5vw,1.32rem)}
@media (max-width:640px){.cdetails{grid-template-columns:1fr}}

.contact>.wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,5.5vw,84px);align-items:center}
.contact .info{display:grid;gap:16px;justify-items:start}
.crow{margin:6px 0 0;display:grid;width:100%;max-width:460px}
.crow>div{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:baseline;gap:12px;padding-block:13px;border-top:1px solid var(--line)}
.crow>div:last-child{border-bottom:1px solid var(--line)}
.crow dt{font:600 .68rem/1.3 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.crow dd{margin:0;font:400 1.08rem/1.3 var(--display);color:var(--text);overflow-wrap:anywhere}
/* the offer form: no panel of its own, only a fine brass frame; the fields are the lighter charcoal against the dark ground, and the brass button is the one filled shape */
form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:clamp(20px,3vw,36px);border:1px solid var(--gold);border-radius:var(--r)}
label{display:grid;gap:7px;min-width:0;font-size:.78rem;font-weight:500;letter-spacing:.02em;color:var(--soft)}
.full{grid-column:1 / -1}
.fend{display:grid;gap:12px;margin-top:4px}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:2px;background:var(--coal-2);color:var(--text);font:400 1rem/1.3 var(--body);transition:border-color .2s}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
::placeholder{color:var(--muted);opacity:.75}
option,optgroup{background:var(--coal-2);color:var(--text)}
textarea{min-height:104px;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
form .btn{width:100%;padding-block:17px}
.note{font-size:.78rem;color:var(--muted)}
.msg{padding:12px 14px;border:1px solid var(--line);border-radius:2px;font-size:.88rem;font-weight:500}
@media (max-width:860px){.contact>.wrap{grid-template-columns:1fr}}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* footer */
.contact{border-top:1px solid var(--line)}
.foot{background:var(--coal);border-top:1px solid var(--line)}
.foot .wrap{display:grid;grid-template-columns:1.2fr .95fr 1.15fr 1.4fr 1.15fr;gap:28px;padding-block:clamp(34px,4.4vw,56px);font-size:.84rem;line-height:1.65;color:var(--muted)}
.foot .logo{display:inline-block;margin-bottom:12px;color:var(--text)}
.foot strong{display:block;margin-bottom:10px;font:600 .66rem/1.3 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}
.foot div>p+ul{margin-top:10px}
.foot strong.sub{margin-top:20px}
@media (max-width:900px){.foot .wrap{grid-template-columns:1fr 1fr}.f-brand{grid-column:1 / -1}}

/* sidefodens nederste linje: cookiepolitik og genvej til at ændre cookievalget */
.foot .foot-legal{display:flex;flex-wrap:wrap;gap:6px 24px;padding-block:16px;border-top:1px solid var(--line);font-size:.78rem}
.foot-legal button{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
.foot-legal button:hover{color:var(--text)}

/* cookiebanner: en smal bjælke i bunden i den mørkeste koks med en tynd guldstreg. De to svar er lige store og ens, så nej er lige så let som ja */
.ck{position:fixed;inset:auto 0 0;z-index:60;background:var(--coal-3);border-top:1px solid var(--gold);box-shadow:0 -14px 44px rgba(0,0,0,.4);padding-bottom:env(safe-area-inset-bottom,0px)}
.ck .wrap{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px clamp(24px,4vw,64px);padding-block:18px}
.ck-txt{display:grid;gap:5px;max-width:92ch;font-size:.84rem;line-height:1.6;color:var(--muted)}
.ck-h{font:500 1.14rem/1.3 var(--display);color:var(--text)}
.ck-txt a{color:var(--text);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.ck-txt a:hover{color:var(--gold)}
.ck-cur{color:var(--soft)}
.ck-cur b,.ck-opt b{font-weight:600;color:var(--text)}
.ck-btn{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:10px}
.ck-btn button{padding:14px 22px;border:1px solid var(--gold);border-radius:2px;background:none;color:var(--text);font:600 .86rem/1 var(--body);letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.ck-btn button:hover{background:var(--gold);color:var(--coal-3)}
.ck-opt{display:grid;gap:8px;margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}
.ck-opt label{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;font:inherit;letter-spacing:0;color:inherit;cursor:pointer}
.ck-opt input{width:18px;height:18px;margin:2px 0 0;padding:0;accent-color:var(--gold)}
.ck-x{position:absolute;top:6px;right:max(calc(var(--gut) - 14px),6px);width:36px;height:36px;padding:0;border:0;background:none;color:var(--muted);font:400 1.5rem/1 var(--body);cursor:pointer}
.ck-x:hover{color:var(--text)}
.ck .wrap:has(.ck-x) .ck-txt{padding-right:28px}
@media (max-width:860px){.ck .wrap{grid-template-columns:minmax(0,1fr);padding-block:16px}.ck-txt{font-size:.8rem;line-height:1.55}.ck-h{font-size:1.06rem}.ck-btn{grid-auto-flow:row;grid-template-columns:1fr 1fr}.ck-btn button{padding:13px 10px}.ck-btn button:nth-child(3){grid-column:1 / -1}}

/* cookiepolitik: tekst i én rolig spalte, tabellen bliver til kort på telefon */
.legal{max-width:760px;margin-inline:auto}
.legal>h2:first-child{margin-top:0}
.ck-tbl td:first-child,.ck-tbl td[data-l]{white-space:nowrap}
.ck-tbl td b{display:block;font-weight:600;color:var(--text)}
.ck-tbl td i{display:block;font-style:normal;font-size:.8rem;color:var(--muted)}
.ck-tbl td{vertical-align:top}
.ck-now{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px 20px;border:1px solid var(--line);border-radius:var(--r)}
.ck-now p{color:var(--text);font-weight:500}
button.btn-line{background:none}
.g-prose button.btn-line:hover{background:var(--gold)}
.legal-date{font-size:.84rem;color:var(--muted)}
@media (max-width:640px){
  .ck-tbl thead{display:none}
  .ck-tbl tr{display:grid;gap:4px;padding-block:14px;border-bottom:1px solid var(--line)}
  .ck-tbl tr:first-child{padding-top:0}
  .ck-tbl td,.ck-tbl td:last-child{padding:0;border:0;text-align:left;white-space:normal}
  .ck-tbl td[data-l]{font-size:.84rem;color:var(--muted)}
  .ck-tbl td[data-l]::before{content:attr(data-l) ": "}
}

/* de smalleste telefoner (320 px): sidefoden i én spalte, så de lange overskrifter ikke skubber siden ud til højre */
@media (max-width:350px){.foot .wrap{grid-template-columns:minmax(0,1fr)}}

/* ================= Julefrokostoplevelser: sidens eget udtryk ================= */
/* stjernen med fire takker er sidens lille kendemærke: i logoet, over overskriften i toppen, i punktlister og under overskrifterne */
:root{--star:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}

/* typografi: samme skrifter, vægte og størrelser som Festoplevelser.dk. Playfair Display til overskrifter og Montserrat til tekst.
   Reglerne står i grundlaget øverst i filen. Her er kun det, der er særligt for julesiden: det fremhævede ord står i lyst guld */
h1,h2{overflow-wrap:anywhere}
h1 em,h2 em{font-style:normal;color:var(--gold-hi)}
@media (max-width:420px){h1{font-size:clamp(1.84rem,9.4vw,2.2rem)}}

/* knapper: runde i enderne */
.btn{padding:16px 30px;border-radius:999px;background:linear-gradient(180deg,#dcc07e,#c8a75d);color:#1d150b;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.btn:hover{background:linear-gradient(180deg,#ead39a,#d4b56a)}
.btn-line{padding:15px 28px;border-radius:999px}

/* linjen øverst: nedtælling til juleaften i sæsonen og en genvej til formularen */
.jbar{background:var(--coal-3);color:var(--soft);font:400 .8rem/1.3 var(--body)}
.jbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 22px;padding-block:9px;text-align:center}
.jb-c{font:500 1rem/1.2 var(--display);color:var(--gold-hi)}
.jbar a{color:var(--text);font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:1px}
.jbar a:hover{color:var(--gold-hi)}
@media (max-width:700px){.jbar.on .jb-t{display:none}}

/* sidehoved og logo */
.mast{border-bottom:0}
.mast .wrap{height:76px}
.logo{display:inline-flex;align-items:center;gap:10px}
.logo .star{flex:none;width:14px;height:14px;fill:var(--gold)}
.logo b{font-weight:inherit}
.logo span{color:var(--gold-hi)}
.nav-sub{padding:10px;background:var(--coal-3);border-color:rgba(230,207,152,.22);border-radius:18px}
.nav-sub a{border-radius:10px}
.mast .btn{padding:12px 20px;font-size:.84rem}
.burger{border-radius:50%;border-color:rgba(230,207,152,.4)}
@media (max-width:1180px){.mast .logo{font-size:1.36rem}.nav{gap:24px}}
@media (max-width:520px){.mast .wrap{height:64px}.mast .logo{gap:8px;font-size:1.14rem;line-height:1.08}.mast .logo b span{display:block}.mast .btn{padding:11px 15px}}

/* sidens top: en bordeaux plade med julelys ude af fokus og en tynd guldstreg forneden */
.jhero{position:relative;isolation:isolate;background:radial-gradient(62% 96% at 50% 30%,var(--red-glow) 0%,rgba(123,31,48,0) 72%),linear-gradient(180deg,var(--red-deep) 0%,var(--red-ink) 100%)}
.jhero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(circle 56px at 4% 18%,rgba(230,207,152,.17),rgba(230,207,152,0)),
  radial-gradient(circle 30px at 12% 74%,rgba(230,207,152,.14),rgba(230,207,152,0)),
  radial-gradient(circle 84px at 30% 98%,rgba(255,214,170,.08),rgba(255,214,170,0)),
  radial-gradient(circle 22px at 43% 10%,rgba(230,207,152,.18),rgba(230,207,152,0)),
  radial-gradient(circle 44px at 55% 90%,rgba(230,207,152,.1),rgba(230,207,152,0)),
  radial-gradient(circle 26px at 92% 8%,rgba(230,207,152,.17),rgba(230,207,152,0)),
  radial-gradient(circle 66px at 98% 72%,rgba(255,214,170,.1),rgba(255,214,170,0))}
.jhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;background:var(--gold);opacity:.8}
.jhero .wrap{display:grid;grid-template-columns:minmax(0,1fr);padding-block:clamp(40px,5.4vw,72px) clamp(44px,5.4vw,72px)}
.jh-txt{display:grid;gap:18px;justify-items:center;text-align:center;min-width:0}
.jhero h1{max-width:20ch}
.jhero .eyebrow{color:var(--gold-hi)}
.jhero .eyebrow::before{content:"";display:block;width:16px;height:16px;margin:0 auto 12px;background:var(--gold-hi);clip-path:var(--star)}
.jhero .lead{max-width:60ch;color:#f4e7da}
.jhero .crumbs{justify-content:center;color:rgba(245,240,230,.74)}
.jhero .cta-row{justify-content:center;margin-top:8px}
.jhero .btn-line{border-color:rgba(245,240,230,.5)}
.jhero .usps-row{justify-content:center;margin-top:10px;color:#f4e7da}
.usps-row li{padding-left:22px}
.usps-row li::before{top:.42em;width:11px;height:11px;background:var(--gold-hi);clip-path:var(--star)}
.nf-links .btn-line{padding:11px 18px;font-size:.84rem}

/* overskrifter: guldstjernen mellem to streger */
.sec-head h2::after,.center-block>h2::after,.label-head h2::after{
  width:132px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 13'%3E%3Cpath d='M0 6.5h50M82 6.5h50' stroke='%23cfae66' stroke-width='1' opacity='.75'/%3E%3Cpath d='M66 0l1.8 4.7 4.700 1.800-4.700 1.800-1.800 4.700-1.800-4.700-4.700-1.800 4.700-1.800z' fill='%23cfae66'/%3E%3C/svg%3E") center/contain no-repeat}

/* pladerne: koksgrå er grunden. Båndene med kundernes ord, eksempelaftenen og de tre trin er mørk bordeaux,
   og det samme er kortene, når de står på den koksgrå grund. På bordeaux er den dæmpede tekst varm i stedet for grå */
.sec.lift{background:var(--plate);--raise:var(--coal);--muted:var(--muted-warm)}
.kort,.qcard,.ref,.g-prose blockquote.tpl{--muted:var(--muted-warm)}

/* de fire indgange på forsiden: billede med teksten under */
.money{gap:clamp(14px,2.4vw,30px)}
.money a{aspect-ratio:auto;overflow:visible;border-radius:0;background:none;display:grid;gap:16px;justify-items:center;align-content:start;text-align:center;color:var(--text)}
.money a::after{display:none}
.money img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/5;border-radius:16px;outline:1px solid rgba(230,207,152,0);outline-offset:7px;transition:outline-color .25s,transform .5s ease}
.money a:hover img{transform:translateY(-4px);outline-color:rgba(230,207,152,.7)}
.money span{position:static;display:grid;gap:4px;justify-items:center}
.money b{font:500 clamp(1.12rem,1.7vw,1.45rem)/1.18 var(--display)}
.money i{font:400 .86rem/1.45 var(--body);color:var(--muted)}
@media (max-width:860px){.money i{font-size:.8rem}}

/* runde mærker ved ikoner og trin: kun en tynd guldring, så pladens egen farve ses igennem */
.ico{width:62px;height:62px;margin-bottom:10px;border:1px solid rgba(230,207,152,.5);border-radius:50%;background:none}
.ico svg{stroke:var(--gold-hi);stroke-width:1.4}
.steps li::before{width:62px;height:62px;border:1px solid rgba(230,207,152,.5);background:none;font:500 1.4rem/1 var(--display);color:var(--gold-hi)}

/* tal og tider i guld */
.facts strong{color:var(--gold-hi)}
.facts div{border-right-color:rgba(230,207,152,.2)}
.program{border-top-color:rgba(230,207,152,.4)}
.program time{color:var(--gold-hi)}
@media (min-width:861px){
  .program li{position:relative;padding:28px 22px 0 0;border-right:0}
  .program li::before{content:"";position:absolute;left:0;top:-6px;width:11px;height:11px;background:var(--gold-hi);clip-path:var(--star)}
}

/* billeder ved teksten: almindelige billeder med runde hjørner */
.m-img img{border-radius:16px}

/* båndet med opfordringen: bordeaux hen over billedet og en fin guldramme som på et kort */
.pband-bg::after{background:linear-gradient(180deg,rgba(102,24,42,.86),rgba(70,16,28,.93))}
.pband::after{content:"";position:absolute;inset:14px;border:1px solid rgba(230,207,152,.34);border-radius:18px;pointer-events:none}
.pband .wrap{padding-block:clamp(60px,8vw,116px)}
.pband .eyebrow{color:var(--gold-hi)}

/* citater */
.bigquote{gap:16px}
.bigquote::before{content:"\201D";width:auto;height:.46em;background:none;font:500 5rem/1 var(--display);color:var(--gold)}
.qcard{border-radius:18px;border-color:rgba(230,207,152,.2)}

/* mærkater og kort */
.tag{border-color:rgba(230,207,152,.4);color:var(--gold-hi)}
.ph.ill{position:relative;display:grid;place-items:center;background:radial-gradient(120% 95% at 50% 0%,var(--red-glow) 0%,var(--red-deep) 60%,var(--red-ink) 100%)}
.sec.lift .ph.ill{background:radial-gradient(120% 95% at 50% 0%,#34353b 0%,var(--coal) 70%)}
.ph.ill::after{content:"";position:absolute;inset:10px;border:1px solid rgba(230,207,152,.32);border-radius:8px}
.ph.ill svg{width:26%;max-width:96px;height:auto;fill:none;stroke:var(--gold-hi);stroke-width:1.05;stroke-linecap:round;stroke-linejoin:round}
.gcards.n4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1020px){.gcards.n4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.gcards.n4{grid-template-columns:minmax(0,1fr)}}
.gal a.gal-more{background:linear-gradient(180deg,var(--red-deep),var(--red-ink));color:var(--text)}
.gal a.gal-more:hover{background:linear-gradient(180deg,var(--red-glow),var(--red-deep))}
.gal-more b{font:500 clamp(.95rem,1.7vw,1.35rem)/1.2 var(--display);color:var(--gold-hi)}

/* guides */
.kort{border-color:rgba(230,207,152,.25);border-radius:18px}
.check li::before{border-radius:5px}
.band{position:relative;background:linear-gradient(180deg,var(--red-deep),var(--red-ink));border:0;border-radius:20px}
.band::after{content:"";position:absolute;inset:8px;border:1px solid rgba(230,207,152,.3);border-radius:13px;pointer-events:none}
.band>*{position:relative;z-index:1}
.band .tel-inline{color:#f0dccd}
.g-prose blockquote.tpl{margin-inline:0;padding:18px 22px;background:var(--raise);border:1px dashed rgba(207,174,102,.5);border-radius:var(--r);color:var(--text);font-size:.98rem;line-height:1.75}
.g-prose h3+blockquote.tpl{margin-top:.5em}

/* spørgsmål og svar */
.faq summary{align-items:center}
.faq summary::after{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(230,207,152,.45);border-radius:50%;font:400 1.1rem/1 var(--body);color:var(--gold-hi)}
.faq details[open] summary::after{background:var(--gold);border-color:transparent;color:#1d150b}

/* formularen: et bordeaux kort med guldkant */
form{border:1px solid rgba(230,207,152,.55);border-radius:22px;background:linear-gradient(180deg,var(--red-deep),var(--red-ink));box-shadow:0 30px 60px rgba(0,0,0,.28)}
label{color:#f4e7da}
input,select,textarea{border-radius:10px;border-color:rgba(245,240,230,.22);background:rgba(20,6,10,.36)}
input:hover,select:hover,textarea:hover{border-color:rgba(245,240,230,.5)}
::placeholder{color:#e9cdc8;opacity:.7}
option,optgroup{background:#3c0e18;color:var(--text)}
form .note{color:#ecd3ce}
.msg{border-color:rgba(245,240,230,.3);border-radius:10px}
/* på de smalleste telefoner står mailadressen under sin etiket, så den ikke deles midt i ordet */
@media (max-width:360px){.crow>div{grid-template-columns:minmax(0,1fr);gap:4px}}

/* sidefod: den mørkeste koks med en tynd guldstreg øverst */
.foot{background:var(--coal-3);border-top:1px solid rgba(207,174,102,.6)}
.foot .logo{display:inline-flex}

/* cookiebanner og øvrige knapper følger de runde former */
.ck-btn button{border-radius:999px}
.album-x,.album-view-bar button,.album-nav{border-radius:999px}
.chip[aria-pressed="true"]{background:var(--gold)}

/* sne: bløde fnug, der daler ned bag teksten i de røde felter. Hvert fnug falder (i) og vugger fra side til side (::before).
   Fnuggene har bløde kanter, så de ikke ligner prikker i teksten. Der flyttes kun med transform og opacity, så det koster
   næsten ingenting, og sneen slås fra for dem, der har bedt om mindre bevægelse */
.snow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;container-type:size}
.snow i{position:absolute;top:-30px;left:var(--x);opacity:0;animation:snow-fall var(--d) linear var(--dl) infinite}
.snow i::before{content:"";display:block;width:var(--s);height:var(--s);border-radius:50%;background:var(--f,radial-gradient(circle,#fff 0,rgba(255,255,255,.9) 34%,rgba(255,255,255,0) 72%));opacity:var(--o);animation:snow-sway var(--p) ease-in-out var(--dl) infinite alternate}
@keyframes snow-fall{0%{opacity:0;transform:translate3d(0,0,0)}7%{opacity:1}84%{opacity:1}100%{opacity:0;transform:translate3d(0,104vh,0);transform:translate3d(0,calc(100cqh + 44px),0)}}
@keyframes snow-sway{from{transform:translateX(calc(var(--w)*-1))}to{transform:translateX(var(--w))}}
.snow i:nth-child(1){--x:33.5%;--s:8.0px;--o:0.61;--d:12.1s;--dl:-4.7s;--w:16px;--p:3.7s}
.snow i:nth-child(2){--x:63.6%;--s:6.1px;--o:0.82;--d:21.3s;--dl:-14.2s;--w:11px;--p:4.7s}
.snow i:nth-child(3){--x:47.0%;--s:4.7px;--o:0.75;--d:24.4s;--dl:-16.7s;--w:14px;--p:3.5s}
.snow i:nth-child(4){--x:94.9%;--s:9.4px;--o:0.57;--d:16.5s;--dl:-10.3s;--w:15px;--p:3.0s}
.snow i:nth-child(5){--x:56.1%;--s:8.1px;--o:0.78;--d:16.5s;--dl:-7.0s;--w:17px;--p:3.4s}
.snow i:nth-child(6){--x:21.8%;--s:10.6px;--o:0.68;--d:16.4s;--dl:-1.9s;--w:11px;--p:4.4s}
.snow i:nth-child(7){--x:81.8%;--s:5.5px;--o:0.86;--d:23.3s;--dl:-13.8s;--w:14px;--p:4.0s}
.snow i:nth-child(8){--x:15.3%;--s:18.5px;--o:0.31;--d:11.8s;--dl:-9.9s;--w:20px;--p:4.3s;--f:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.snow i:nth-child(9){--x:29.9%;--s:6.2px;--o:0.72;--d:19.2s;--dl:-15.4s;--w:11px;--p:3.2s}
.snow i:nth-child(10){--x:40.6%;--s:10.4px;--o:0.55;--d:12.7s;--dl:-4.3s;--w:21px;--p:4.5s}
.snow i:nth-child(11){--x:53.8%;--s:4.9px;--o:0.89;--d:23.6s;--dl:-4.1s;--w:9px;--p:3.0s}
.snow i:nth-child(12){--x:77.3%;--s:5.9px;--o:0.91;--d:21.5s;--dl:-6.8s;--w:9px;--p:4.1s}
.snow i:nth-child(13){--x:69.2%;--s:8.9px;--o:0.70;--d:12.4s;--dl:-9.3s;--w:10px;--p:4.2s}
.snow i:nth-child(14){--x:8.6%;--s:25.3px;--o:0.36;--d:9.6s;--dl:-6.6s;--w:24px;--p:3.8s;--f:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.snow i:nth-child(15){--x:87.4%;--s:6.5px;--o:0.72;--d:18.6s;--dl:-9.5s;--w:12px;--p:3.7s}
.snow i:nth-child(16){--x:3.9%;--s:6.3px;--o:0.84;--d:17.0s;--dl:-7.8s;--w:7px;--p:3.9s}
.snow i:nth-child(17){--x:23.9%;--s:5.7px;--o:0.85;--d:21.5s;--dl:-14.5s;--w:6px;--p:3.4s}
.snow i:nth-child(18){--x:84.1%;--s:5.5px;--o:0.71;--d:22.3s;--dl:-0.4s;--w:12px;--p:4.2s}
.snow i:nth-child(19){--x:72.7%;--s:9.7px;--o:0.58;--d:14.4s;--dl:-3.1s;--w:11px;--p:3.8s}
.snow i:nth-child(20){--x:56.0%;--s:24.7px;--o:0.35;--d:10.5s;--dl:-0.2s;--w:29px;--p:5.0s;--f:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.snow i:nth-child(21){--x:37.4%;--s:5.1px;--o:0.85;--d:20.0s;--dl:-9.9s;--w:14px;--p:3.8s}
.snow i:nth-child(22){--x:4.8%;--s:8.5px;--o:0.73;--d:16.9s;--dl:-4.7s;--w:18px;--p:3.7s}
.snow i:nth-child(23){--x:81.6%;--s:9.5px;--o:0.77;--d:15.7s;--dl:-14.9s;--w:20px;--p:5.3s}
.snow i:nth-child(24){--x:66.3%;--s:8.1px;--o:0.68;--d:17.8s;--dl:-15.5s;--w:20px;--p:4.1s}
.snow i:nth-child(25){--x:37.3%;--s:6.2px;--o:0.79;--d:24.4s;--dl:-20.8s;--w:13px;--p:5.1s}
.snow i:nth-child(26){--x:74.0%;--s:8.1px;--o:0.64;--d:12.7s;--dl:-8.6s;--w:10px;--p:5.0s}
.snow i:nth-child(27){--x:18.9%;--s:10.8px;--o:0.63;--d:14.9s;--dl:-4.8s;--w:11px;--p:4.0s}
.snow i:nth-child(28){--x:13.6%;--s:5.9px;--o:0.72;--d:19.5s;--dl:-0.2s;--w:9px;--p:3.6s}
.snow i:nth-child(29){--x:5.9%;--s:5.8px;--o:0.84;--d:21.7s;--dl:-21.2s;--w:12px;--p:4.4s}
.snow i:nth-child(30){--x:33.4%;--s:19.5px;--o:0.33;--d:9.4s;--dl:-5.8s;--w:19px;--p:4.0s;--f:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.snow i:nth-child(31){--x:44.8%;--s:5.5px;--o:0.84;--d:19.5s;--dl:-9.4s;--w:11px;--p:3.4s}
.snow i:nth-child(32){--x:94.5%;--s:4.7px;--o:0.87;--d:22.2s;--dl:-1.3s;--w:8px;--p:4.2s}
.snow i:nth-child(33){--x:53.3%;--s:5.2px;--o:0.93;--d:16.2s;--dl:-8.9s;--w:13px;--p:4.0s}
.snow i:nth-child(34){--x:24.4%;--s:9.3px;--o:0.61;--d:13.1s;--dl:-2.6s;--w:11px;--p:5.1s}
.snow i:nth-child(35){--x:84.8%;--s:5.8px;--o:0.93;--d:22.0s;--dl:-13.9s;--w:10px;--p:5.0s}
.snow i:nth-child(36){--x:60.5%;--s:25.2px;--o:0.31;--d:10.7s;--dl:-1.0s;--w:21px;--p:4.2s;--f:radial-gradient(circle,#fff 0,rgba(255,255,255,0) 68%)}
.pband .snow i:nth-child(n+17){display:none}
@media (max-width:700px){.snow i:nth-child(n+23){display:none}}
@media (prefers-reduced-motion:reduce){.snow{display:none}}
@media print{.snow{display:none}}

/* ================= Designsystem for Julefrokostoplevelser.dk =================
   Idéen er et julekort i koksgrå, bordeaux og guld: bordeaux plader på en koksgrå grund, med guld som tryk.
   Denne fil samler systemets faste værdier (farver, afstande, hjørner, skygger og bevægelse) og de regler,
   der får knapper, kort, felter, billeder og bevægelser til at opføre sig ens på hele siden.
   Rækkefølge: site.css (grundlag og sidens eget udtryk) læses først, derefter denne fil. */

/* ---------- 1. Faste værdier ---------- */
:root{
  /* koks: grunden */
  --charcoal-950:#141517; --charcoal-900:#242528; --charcoal-800:#2d2e33; --charcoal-700:#45464d;
  /* bordeaux: de store plader */
  --red-500:#8c2437; --red-600:#7b1f30; --red-700:#66182a; --red-800:#551423; --red-900:#46101c;
  /* guld: trykket */
  --gold-200:#ead39a; --gold-300:#e6cf98; --gold-400:#dcc07e; --gold-500:#cfae66; --gold-600:#c8a75d; --gold-ink:#1d150b;
  /* papir: teksten */
  --cream-50:#f5f0e6; --cream-100:#f4e7da; --cream-200:#e0d9cb; --stone-400:#b9b6b1; --rose-300:#d8c6c1;
  /* roller: det er dem, komponenterne bruger */
  --surface:var(--charcoal-900); --surface-raised:var(--red-800); --surface-sunken:var(--charcoal-950);
  --on-red:var(--cream-100); --hair:rgba(245,240,230,.14); --hair-gold:rgba(230,207,152,.3); --hair-gold-strong:rgba(230,207,152,.6); --ring:var(--gold-300);
  /* de ældre navne i site.css peger på trinene, så der kun er ét sæt farver */
  --coal:var(--charcoal-900); --coal-2:var(--charcoal-800); --coal-3:var(--charcoal-950); --plate:var(--red-800);
  --red:var(--red-500); --red-glow:var(--red-600); --red-deep:var(--red-700); --red-ink:var(--red-900);
  --gold:var(--gold-500); --gold-hi:var(--gold-300);
  --text:var(--cream-50); --soft:var(--cream-200); --muted:var(--stone-400); --muted-warm:var(--rose-300); --line:var(--hair);
  /* afstande: en skala i trin af 4 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --sec:clamp(48px,6.2vw,92px);
  /* hjørner */
  --r-s:10px; --r-m:16px; --r-l:22px; --r-pill:999px; --r:var(--r-m);
  /* skygger: tre højder */
  --e-1:0 8px 20px -8px rgba(0,0,0,.42); --e-2:0 18px 40px -14px rgba(0,0,0,.5); --e-3:0 30px 60px -18px rgba(0,0,0,.56);
  /* bevægelse: fire varigheder og tre kurver */
  --dur-1:.15s; --dur-2:.26s; --dur-3:.5s; --dur-4:.9s;
  --ease:cubic-bezier(.22,.8,.26,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease-pop:cubic-bezier(.34,1.5,.64,1);
  /* fint gråt korn, der lægges på de bordeaux plader med blødt lys. Det giver stoflighed som karton uden at ændre farven */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.34 .33 .33 0 0 .34 .33 .33 0 0 .34 .33 .33 0 0 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  /* det samme korn i halv styrke til de flade bånd, hvor det ellers ville virke for groft */
  --grain-soft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.17 .165 .165 0 .25 .17 .165 .165 0 .25 .17 .165 .165 0 .25 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 2. Grundtone ---------- */
html{scrollbar-color:var(--charcoal-700) var(--charcoal-950);accent-color:var(--gold-500)}
::selection{background:rgba(207,174,102,.42);color:#fff}
p,li{text-wrap:pretty}
a{transition:color var(--dur-1)}
:focus-visible{outline:2px solid var(--ring);outline-offset:3px}
.btn:focus-visible{outline-color:var(--cream-50)}
/* lyset i toppen ligger i midten bag overskriften. Kornet ligger på alle bordeaux plader */
.jhero{background:var(--grain),radial-gradient(62% 96% at 50% 30%,var(--red-600) 0%,rgba(123,31,48,0) 72%),linear-gradient(180deg,var(--red-700) 0%,var(--red-900) 100%);background-blend-mode:soft-light,normal,normal}
.sec.lift{background:var(--grain-soft),var(--red-800);background-blend-mode:soft-light,normal}
.pband{overflow:clip}

/* ---------- 3. Sidehoved ---------- */
/* linjen øverst har fast højde, så den ikke vokser, når nedtællingen sættes ind */
.jbar .wrap{min-height:40px}
/* sidehovedet er en anelse gennemsigtigt, så siden anes bag det, når man ruller */
.mast{background:rgba(36,37,40,.93);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 1px 0 rgba(230,207,152,.14)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.mast{background:var(--charcoal-900)}}
@media (min-width:1021px){
  /* en tynd guldstreg vokser frem under menupunktet */
  .nav>a,.nav-top{position:relative}
  .nav>a::after,.nav-top::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--gold-300);transform:scaleX(0);transition:transform var(--dur-2) var(--ease)}
  .nav-top::after{right:17px}
  .nav>a:hover::after,.nav>a[aria-current]::after,.nav-top:hover::after,.nav-top.cur::after,.nav-group.open .nav-top::after{transform:scaleX(1)}
  /* undermenuen glider blødt ned */
  .nav-sub{opacity:0;transform:translateY(-6px);transition:opacity var(--dur-1) ease,transform var(--dur-2) var(--ease),display var(--dur-2) allow-discrete;box-shadow:var(--e-3)}
  .nav-group.open .nav-sub{opacity:1;transform:none}
  @starting-style{.nav-group.open .nav-sub{opacity:0;transform:translateY(-6px)}}
  .nav-sub a{transition:background-color var(--dur-1)}
}
@media (hover:hover) and (min-width:1021px){
  .nav-group:hover .nav-sub{opacity:1;transform:none}
  .nav-group.shut .nav-sub{opacity:0}
  @starting-style{.nav-group:hover .nav-sub{opacity:0;transform:translateY(-6px)}}
}
.burger{transition:border-color var(--dur-1),background-color var(--dur-1)}
.burger:hover{border-color:var(--gold-300);background:rgba(230,207,152,.08)}

/* ---------- 4. Knapper ---------- */
/* den vigtigste handling er guld. Den løfter sig en anelse, og et lysstrejf glider hen over den */
.btn,.btn-line{min-height:48px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1)}
.btn{position:relative;overflow:hidden;overflow:clip;isolation:isolate;background:linear-gradient(180deg,var(--gold-400),var(--gold-600));color:var(--gold-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 1px 0 rgba(0,0,0,.25),0 12px 24px -12px rgba(0,0,0,.6)}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,rgba(255,255,255,0) 36%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 64%);transform:translateX(-130%)}
.btn:hover{background:linear-gradient(180deg,var(--gold-200),#d4b56a);transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 1px 0 rgba(0,0,0,.25),0 18px 30px -14px rgba(0,0,0,.66)}
.btn:hover::after{transform:translateX(130%);transition:transform .75s var(--ease)}
.btn:active{transform:translateY(0) scale(.985);box-shadow:inset 0 2px 5px rgba(0,0,0,.22)}
.btn[disabled]{pointer-events:none}
.btn.is-loading{color:transparent}
.btn.is-loading::before{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(29,21,11,.28);border-top-color:var(--gold-ink);border-radius:50%;animation:spin .7s linear infinite}
.mast .btn{min-height:42px}
/* på smalle telefoner må en lang knaptekst gå på to linjer, så den aldrig bliver skåret af */
@media (max-width:400px){.btn,.btn-line{white-space:normal;text-align:center;line-height:1.25;padding-inline:22px}.mast .btn{white-space:nowrap;padding-inline:15px}}
/* den næstvigtigste handling er en streg. Den fyldes kun let, så guldknappen stadig er den tydeligste */
.btn-line{border-color:var(--hair-gold-strong);background:rgba(230,207,152,0)}
.btn-line:hover,.g-prose button.btn-line:hover{background:rgba(230,207,152,.14);border-color:var(--gold-300);color:var(--gold-200);transform:translateY(-1px)}
.btn-line:active{transform:none}
.jhero .btn-line{border-color:rgba(245,240,230,.55)}
.jhero .btn-line:hover{border-color:var(--gold-300)}
/* tekstlinks */
.link{transition:color var(--dur-1),text-decoration-color var(--dur-1),text-underline-offset var(--dur-2) var(--ease)}
.link:hover{color:var(--gold-300);text-decoration-color:var(--gold-300);text-underline-offset:8px}
.go::after{transition:transform var(--dur-2) var(--ease)}
a:hover>.go::after{transform:translateX(5px)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- 5. Kort og billeder ---------- */
/* billeder får en hårfin kant, så de står skarpt mod den mørke grund. Kanten bliver guld, når kortet kan klikkes */
.ph{position:relative}
.ph:not(.ill)::after{box-shadow:inset 0 0 0 1px rgba(245,240,230,.1)}
.m-img img{outline:1px solid rgba(245,240,230,.1);outline-offset:-1px}
.ph:not(.ill)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:box-shadow var(--dur-2)}
a:hover>.ph:not(.ill)::after{box-shadow:inset 0 0 0 1px var(--hair-gold-strong)}
.act h3,.venue h3,.gcard h3,.gfeat h3,.money b{transition:color var(--dur-1)}
a.act:hover h3,a.venue:hover h3,a.gcard:hover h3,a.gfeat:hover h3,.money a:hover b{color:var(--gold-300)}
.ph.ill svg{transition:transform var(--dur-3) var(--ease)}
a:hover>.ph.ill svg{transform:scale(1.1) rotate(-4deg)}
@media (prefers-reduced-motion:no-preference){
  .act img,.venue img,.gcard img,.gfeat img,.gal img,.case img{transition:transform var(--dur-4) var(--ease)}
  .gal a:hover img,.case:hover img{transform:scale(1.05)}
}
/* alle billeder er almindelige billeder med de samme runde hjørner. Der er ingen buer eller skæve hjørner */
.money img,.m-img img,.media.flip .m-img img{border-radius:var(--r-m)}
.money img{transition:outline-color var(--dur-2),transform var(--dur-3) var(--ease)}
/* de tre trin bindes sammen af en stiplet guldlinje, som går fra ring til ring, så den ikke ses inde i ringene */
@media (min-width:761px){
  .steps{--g:clamp(22px,4vw,56px)}
  .steps li{position:relative}
  .steps li:not(:last-child)::after{content:"";position:absolute;top:31px;left:calc(50% + 43px);width:calc(100% + var(--g) - 86px);height:1px;background:repeating-linear-gradient(90deg,var(--hair-gold-strong) 0 6px,rgba(230,207,152,0) 6px 13px)}
}
.qcard{box-shadow:var(--e-1)}
.kort{box-shadow:var(--e-1)}
.tbl tbody tr{transition:background-color var(--dur-1)}
.tbl tbody tr:hover td{background:rgba(245,240,230,.04)}
.foot a{transition:color var(--dur-1)}

/* ---------- 6. Spørgsmål og svar ---------- */
/* plusset drejer og bliver til et kryds, og svaret folder sig roligt ud */
.faq summary{transition:color var(--dur-1)}
.faq summary:hover{color:var(--gold-300)}
.faq summary::after{content:"+";transition:transform var(--dur-2) var(--ease),background-color var(--dur-1),border-color var(--dur-1)}
.faq details[open] summary::after{content:"+";transform:rotate(45deg)}
@supports (interpolate-size:allow-keywords){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-3) var(--ease),content-visibility var(--dur-3) allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---------- 7. Formular ---------- */
form{background:var(--grain),linear-gradient(180deg,var(--red-700),var(--red-900));background-blend-mode:soft-light,normal;box-shadow:var(--e-3)}
label{transition:color var(--dur-1)}
label:focus-within{color:var(--gold-200)}
input,select,textarea{min-height:50px;border-radius:var(--r-s);transition:border-color var(--dur-1),box-shadow var(--dur-2),background-color var(--dur-1)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:0;border-color:var(--gold-300);background-color:rgba(20,6,10,.54);box-shadow:0 0 0 4px rgba(230,207,152,.2)}
select{-webkit-appearance:none;appearance:none;padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e6cf98' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;background-size:12px 8px}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:var(--cream-50);caret-color:var(--cream-50);box-shadow:0 0 0 100px #3c0e18 inset;transition:background-color 9999s}
[aria-invalid="true"]{border-color:#ffcabd;box-shadow:0 0 0 3px rgba(255,202,189,.2)}
.msg{border-radius:var(--r-s);line-height:1.5}
.msg[data-state="ok"]{background:var(--charcoal-900);border-color:var(--gold-500);color:var(--cream-50)}
.msg[data-state="err"]{background:var(--cream-50);border-color:transparent;color:var(--red-900)}
.msg a{text-underline-offset:3px;text-decoration-thickness:1px}
/* knappen, der kopierer forespørgslen, hvis mailprogrammet ikke åbner */
.f-kopi{justify-self:start;min-height:40px;padding:10px 18px;font-size:.82rem}

/* ---------- 8. Guides: tjeklister, der kan krydses af, og tekster, der kan kopieres ---------- */
.g-prose ul.check{gap:2px}
.check li{padding-left:0}
.check li::before{display:none}
.check label{display:grid;grid-template-columns:22px minmax(0,1fr);gap:12px;align-items:start;margin-inline:-10px;padding:7px 10px;border-radius:var(--r-s);font:inherit;letter-spacing:0;color:inherit;cursor:pointer;transition:background-color var(--dur-1)}
.check label:hover{background:rgba(245,240,230,.05)}
.check input{-webkit-appearance:none;appearance:none;width:22px;height:22px;min-height:0;margin:.2em 0 0;padding:0;border:1px solid var(--gold-500);border-radius:6px;background:transparent center/14px 14px no-repeat;cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),transform var(--dur-2) var(--ease-pop)}
.check input:hover{border-color:var(--gold-200)}
.check input:active{transform:scale(.86)}
.check input:checked{background-color:var(--gold-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.4l3 3 6-6.4' fill='none' stroke='%231d150b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.check span{transition:color var(--dur-2)}
.check input:checked+span{color:var(--stone-400);text-decoration:line-through;text-decoration-color:rgba(185,182,177,.5)}
.tpl-copy{display:block;margin:14px 0 0 auto;min-height:36px;padding:8px 16px;border:1px solid var(--hair-gold-strong);border-radius:var(--r-pill);background:transparent;color:var(--cream-50);font:600 .84rem/1 var(--body);cursor:pointer;transition:background-color var(--dur-1),border-color var(--dur-1),color var(--dur-1),transform var(--dur-2) var(--ease-pop)}
.tpl-copy:hover{background:rgba(230,207,152,.14);border-color:var(--gold-300);color:var(--gold-200)}
.tpl-copy:active{transform:scale(.96)}
.tpl-copy.ok{background:var(--gold-500);border-color:var(--gold-500);color:var(--gold-ink)}
/* læselinje: en tynd guldstreg i sidehovedet viser, hvor langt man er nået i en guide */
@supports (animation-timeline:scroll()){
  .is-guide .mast::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--gold-600),var(--gold-200));transform:scaleX(0);transform-origin:0 50%;animation:progress 1ms linear both;animation-timeline:scroll(root)}
}
@keyframes progress{to{transform:scaleX(1)}}

/* ---------- 9. Bevægelse ---------- */
/* Rolig og kort: højst 24 px vandring, kun transform og opacity, og alt er slået fra for besøgende,
   der har bedt deres enhed om mindre bevægelse. Der er ét iscenesat øjeblik: sidens top, der samler sig, når siden åbner. */
@media (prefers-reduced-motion:no-preference){
  .jh-txt>*{animation:rise .8s var(--ease) both}
  .jh-txt>:nth-child(2){animation-delay:.06s}
  .jh-txt>:nth-child(3){animation-delay:.12s}
  .jh-txt>:nth-child(4){animation-delay:.2s}
  .jh-txt>:nth-child(5){animation-delay:.28s}
  .jh-txt>:nth-child(n+6){animation-delay:.36s}
  /* stjernen over overskriften tændes til sidst og blinker roligt */
  .jhero.solo .eyebrow::before{animation:star-in .8s var(--ease-pop) both .5s,twinkle 5s ease-in-out 1.8s infinite}
  /* sektionerne glider de sidste 24 px på plads, mens man ruller ned. Det styres af rulningen selv, så intet venter på et script.
     Der tones ikke, for så kan tekst ved skærmens kant stå halvt gennemsigtig og være svær at læse */
  @supports (animation-timeline:view()){
    .sec-head,.center-block,.money a,.icons>div,.steps li,.acts>*,.venues>*,.gcards>*,.gfeat,.qcards>*,.bigquote,.m-img,.m-txt,.facts>div,.program li,.faq details,.pband .wrap,.contact .info,#f,.gal a,.cases .case,.band,.more{
      animation:reveal 1ms linear both;animation-timeline:view();animation-range:cover 0% cover 18%}
    :is(.money a,.icons>div,.steps li,.acts>*,.venues>*,.gcards>*,.qcards>*,.facts>div):nth-child(4n+2){animation-range:cover 2% cover 21%}
    :is(.money a,.icons>div,.steps li,.acts>*,.venues>*,.gcards>*,.qcards>*,.facts>div):nth-child(4n+3){animation-range:cover 4% cover 24%}
    :is(.money a,.icons>div,.acts>*,.venues>*,.gcards>*,.facts>div):nth-child(4n){animation-range:cover 6% cover 27%}
  }
  /* sideskift: den gamle side toner ud, den nye toner ind */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
  .mast{view-transition-name:mast}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes star-in{from{opacity:0;transform:scale(.2) rotate(-60deg)}}
@keyframes twinkle{50%{opacity:.75;transform:scale(1.28) rotate(10deg)}}
@keyframes reveal{from{transform:translateY(24px)}}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}