@charset "UTF-8";
/* rockonbooking.dk. Design fra Rock On-prototypen (Claude Design, 10-09-2026), porteret til
   statisk CSS. Ingen inline-styles i HTML'en: CSP'en tillader kun styles fra denne fil. */

@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/karla-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/karla-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/karla-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/karla-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('../fonts/oswald-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ----------
   Farverne er næsten neutrale med et strejf af varme (rød minus blå højst 5), så siden står i
   plakatens sort, rød og hvid i stedet for crème. Tekstfarverne holder mindst 4,5:1 på bg, alt,
   tile og felter i begge temaer. */
:root {
  /* Begge temaers baggrund står her, så tema-skiftets cirkel og browserens theme-color kan hente dem */
  --bg-lys: #F5F4F1; --bg-moerk: #161514;
  --bg: var(--bg-lys); --alt: #EAE9E5; --ink: #1E1D1B; --ink2: #3D3B37; --muted: #5C5A55;
  --rule: rgba(30,29,27,.14); --rule2: rgba(30,29,27,.12); --ruleStrong: rgba(30,29,27,.28);
  --field: #FFFFFF; --tile: #D8D6D2; --deep: #1A1917;
  /* Pladsholdertekst viser fx telefonnummerets format: mindst 4,5:1 på --field i begge temaer */
  --pladsholder: #77746E;
  --roed: #C4161C; --roed-hover: #A5121A; --lys: #F5F4F1;
  /* Lys tekst og streger på de altid mørke flader (hero, mobilmenu, CTA, sidefod): toner af --lys */
  --lys-85: color-mix(in srgb, var(--lys) 85%, transparent); --lys-75: color-mix(in srgb, var(--lys) 75%, transparent);
  --lys-60: color-mix(in srgb, var(--lys) 60%, transparent); --lys-12: color-mix(in srgb, var(--lys) 12%, transparent);
  /* Bund bag billeder, til de er hentet: mørk i begge temaer */
  --billedbund: #2A2927;
  /* Rød som tekst: mindst 4,5:1 på bg, alt, tile og felter i hvert tema. --roed-lys er til tekst på de altid mørke flader */
  --roed-tekst: #B01319; --roed-tekst-hover: #8A0E13; --roed-lys: #FF5A5F;
  /* Afstande i tre trin (telefon, tablet, skærm): sidemargin, sektioner, listerækker, ydelser */
  --pad: 20px; --sektion: 72px; --sektion-taet: 64px; --raekke: 20px; --blok: 28px;
  /* Tekst i fire trin (overskrifter og indledninger skalerer med clamp): småt, knapper og mærker, brødtekst, stor */
  --tekst-lille: 14px; --tekst-ui: 16px; --tekst: 18px; --tekst-stor: 20px;
  --display: Oswald, 'Arial Narrow', sans-serif;
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: light;
}
@media (min-width: 700px) {
  :root { --pad: 36px; --sektion: 96px; --sektion-taet: 84px; --raekke: 24px; --blok: 36px; }
}
@media (min-width: 1100px) {
  :root { --pad: 56px; --sektion: 120px; --sektion-taet: 104px; --raekke: 30px; --blok: 44px; }
}
:root[data-theme="dark"] {
  --bg: var(--bg-moerk); --alt: #201F1D; --ink: #F5F4F1; --ink2: #DAD8D3; --muted: #A3A09A;
  --rule: rgba(245,244,241,.14); --rule2: rgba(245,244,241,.14); --ruleStrong: rgba(245,244,241,.3);
  --field: #292826; --tile: #2A2927; --deep: #0E0E0D; --pladsholder: #96938D;
  --roed-tekst: #FF5A5F; --roed-tekst-hover: #FF8A8E;
  color-scheme: dark;
}

/* ---------- Grundlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* hidden skal skjule, også når en klasse sætter display (formularen er flex og skjules efter afsendelse) */
[hidden] { display: none !important; }
/* scroll-padding: den klæbende header (77 px) må ikke dække det, man hopper eller tabber til (WCAG 2.4.11) */
html { scrollbar-color: var(--roed) var(--alt); -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Karla, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { font-size: var(--tekst); line-height: 1.55; }
img, video, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--roed-tekst); }
::selection { background: var(--roed); color: var(--lys); }
:focus-visible { outline: 2px solid var(--roed); outline-offset: 3px; }
:root[data-theme="dark"] :focus-visible, .sektion--moerk :focus-visible, .bund :focus-visible, .mobilmenu :focus-visible, .takboks :focus-visible { outline-color: var(--roed-lys); }
input, select, textarea { caret-color: var(--roed-tekst); }
input, select, button, textarea { font: inherit; }
input::placeholder, textarea::placeholder { color: var(--pladsholder); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
.skjult { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.spring-til { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--roed); color: var(--lys); padding: 10px 16px; border-radius: 4px; font-family: var(--display); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.spring-til:focus { top: 12px; }
.spring-til:hover, .spring-til:focus { color: var(--lys); }

.ramme { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }
.sektion { padding: var(--sektion) 0; }
.sektion--taet { padding: var(--sektion-taet) 0; }
.sektion--alt { background: var(--alt); }
.sektion--moerk { background: var(--deep); color: var(--lys); }
main { animation: roEnter .55s var(--ease) both; }
/* Med sideskift (View Transitions) toner hele siden allerede ind; så glider <main> ikke også (tema.js) */
:root[data-sideskift] main { animation: none; }

/* Typografi */
.display-1 { font-family: var(--display); font-weight: 700; font-size: clamp(48px, 7vw, 112px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; overflow-wrap: break-word; }
.display-2 { font-family: var(--display); font-weight: 600; font-size: clamp(40px, 5vw, 76px); line-height: .95; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; overflow-wrap: break-word; }
/* Lange ord (ROCKONBOOKING., ELECTRODANCE) må ikke gøre siden bredere end 320 px */
@media (max-width: 420px) {
  .display-1, .bandhoved h1 { font-size: clamp(32px, 10.5vw, 48px); }
  .display-2 { font-size: clamp(32px, 10vw, 40px); }
}
.display-3 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 4.5vw, 64px); line-height: .95; text-transform: uppercase; letter-spacing: .005em; }
.bred-14 { max-width: 14ch; }
.bred-12 { max-width: 12ch; }
.lead { font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; }
.ink2 { color: var(--ink2); }
.hoved { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.hoved--luft { margin-bottom: clamp(28px, 4vw, 48px); }
.hoved p { max-width: 42ch; font-size: var(--tekst); line-height: 1.45; color: var(--muted); }

/* Knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: var(--tekst-ui); letter-spacing: .08em; text-transform: uppercase; padding: 16px 24px; border-radius: 4px; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, scale .12s var(--ease); line-height: 1.2; }
.knap--roed { background: var(--roed); color: var(--lys); }
.knap--roed:hover { background: var(--roed-hover); color: var(--lys); }
.knap--kant { background: transparent; color: var(--ink); border-color: var(--ink); }
.knap--kant:hover { background: var(--ink); color: var(--bg); }
.knap--kant-lys { background: transparent; color: var(--lys); border-color: var(--lys-75); }
.knap--kant-lys:hover { background: var(--lys); color: var(--deep); }
.knap--lille { font-size: var(--tekst-ui); padding: 14px 22px; }
.knap--mini { font-size: var(--tekst-lille); padding: 11px 16px; }
.knap svg { flex: none; }
.knapper { display: flex; flex-wrap: wrap; gap: 12px; }
/* Tryk: knapperne giver lidt efter i det øjeblik, man trykker (også på touch). Kortene kun med mus: på en
   telefon starter en scroll ofte på et kort, og så ville det skrumpe hver gang */
.knap:active, .ikon:active { scale: .97; }
@media (hover: hover) { .plakat:active, .andre-bands a:active { scale: .985; } }

.pil-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--roed-tekst); transition: gap .25s, color .2s; }
.pil-link:hover { color: var(--roed-tekst-hover); }
/* Løft, zoom og pil der glider: kun med mus. På touch bliver en hover-tilstand hængende efter et tryk */
@media (hover: hover) { .pil-link:hover { gap: 16px; } }
.pil-link--tilbage { font-size: var(--tekst-ui); letter-spacing: .08em; gap: 8px; color: var(--muted); padding: 6px 0; }
.pil-link--tilbage:hover { color: var(--roed-tekst); gap: 8px; }

/* Billedbokse */
.boks { position: relative; overflow: hidden; overflow: clip; border-radius: 12px; background: var(--tile); }
.boks > picture, .boks > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.boks img { width: 100%; height: 100%; object-fit: cover; }
.boks--16-9 { aspect-ratio: 16 / 9; }
.boks--4-5 { aspect-ratio: 4 / 5; }
.boks--2-3 { aspect-ratio: 2 / 3; }
.boks--1-1 { aspect-ratio: 1 / 1; }
.fokus-top img { object-position: 50% 22%; }
.fokus-40 img { object-position: 50% 40%; }
.fokus-hoved img { object-position: 50% 6%; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule2); }
.top .ramme { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.top__logo { display: flex; align-items: center; flex: none; }
.top__logo img { height: 50px; width: auto; }
.top__hoejre { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); }
.menu { display: flex; align-items: center; gap: clamp(18px, 2.6vw, 36px); }
.menu a { position: relative; font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 8px 0; border-bottom: 2px solid transparent; transition: color .2s; }
.menu a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform-origin: 0 50%; scale: 0 1; pointer-events: none; }
.menu a:hover { color: var(--roed-tekst); }
@media (hover: hover) { .menu a:hover::after { scale: 1 1; } }
.menu a[aria-current="page"] { color: var(--roed-tekst); border-bottom-color: var(--roed); }
.ikoner { display: flex; align-items: center; gap: 10px; }
.ikon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 4px; flex: none; background: transparent; border: 1.5px solid var(--rule2); color: var(--ink); cursor: pointer; padding: 0; transition: border-color .2s, background .2s, color .2s, scale .12s var(--ease); }
.ikon:hover { border-color: var(--ink); color: var(--ink); }
.ikon--roed { background: var(--roed); border-color: var(--roed); color: var(--lys); }
.ikon--roed:hover { background: var(--roed-hover); border-color: var(--roed-hover); color: var(--lys); }
.ikon--kant { border-color: var(--ink); }
.ikon--kant:hover { background: var(--ink); color: var(--bg); }
.ikon--menu { display: none; border-color: var(--ink); }

@media (max-width: 979px) {
  .menu { display: none; }
  .ikon { width: 46px; height: 46px; }
  .ikon--menu { display: inline-flex; }
}

/* Mobilmenu (dialog) */
.mobilmenu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; background: var(--deep); color: var(--lys); padding: 15px clamp(20px, 6vw, 40px) 32px; overflow: auto; }
.mobilmenu[open] { display: flex; flex-direction: column; animation: roFade .25s ease-out both; }
.mobilmenu::backdrop { background: var(--deep); }
.mobilmenu__top { display: flex; align-items: center; justify-content: space-between; height: 46px; }
.mobilmenu__top img { height: 46px; width: auto; }
.mobilmenu .ikon { border-color: var(--lys-60); color: var(--lys); }
.mobilmenu nav { display: flex; flex-direction: column; gap: 6px; margin-top: 40px; }
.mobilmenu nav a { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; color: var(--lys); padding: 6px 0; border-bottom: 1px solid var(--lys-12); }
.mobilmenu nav a[aria-current="page"], .mobilmenu nav a:hover { color: var(--roed-lys); }
.mobilmenu__bund { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 14px; }
.mobilmenu__bund .knap { font-size: var(--tekst); }
.mobilmenu__bund a:not(.knap) { color: var(--lys-85); font-size: var(--tekst-ui); text-align: center; }

/* ---------- Forside: hero ---------- */
.hero { position: relative; min-height: min(88vh, 920px); min-height: min(88svh, 920px); display: flex; align-items: flex-start; background: var(--deep); color: var(--lys); overflow: hidden; }
.hero__foto { position: absolute; inset: 0; }
/* Billedet er 14 % bredere end heroen og skubbet til venstre, så Nicki står i venstre side og teksten har plads til højre */
.hero__foto img { width: 114%; max-width: none; height: 100%; margin-left: -14%; object-fit: cover; animation: roKen 18s ease-out both; }
.hero__skygge { position: absolute; inset: 0; background: linear-gradient(250deg, color-mix(in srgb, var(--deep) 82%, transparent) 0%, color-mix(in srgb, var(--deep) 34%, transparent) 42%, transparent 66%), linear-gradient(180deg, transparent 72%, color-mix(in srgb, var(--deep) 45%, transparent) 100%); pointer-events: none; }
.hero__indhold { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(36px, 6vw, 80px) var(--pad) clamp(40px, 6vw, 72px); display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(58px, 9.5vw, 150px); line-height: .9; text-transform: uppercase; letter-spacing: .005em; max-width: 11ch; text-wrap: balance; }
.hero__under { display: flex; flex-direction: column; align-items: flex-end; gap: 24px; margin-top: clamp(24px, 3vw, 40px); }
.hero__under p { max-width: 46ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.5; color: color-mix(in srgb, var(--lys) 92%, transparent); }
.hero .knapper { justify-content: flex-end; }
.hero [data-kryptisk] { position: relative; }
.hero [data-kryptisk].blandes { color: transparent; }
/* line-height: normal: ordets boks har skriftens fulde højde, så overlayets grundlinje kun flugter med den */
.hero [data-kryptisk].blandes::after { content: attr(data-glyffer); content: attr(data-glyffer) / ""; position: absolute; left: 0; right: 0; top: 0; display: flex; justify-content: center; overflow: hidden; line-height: normal; color: var(--lys); white-space: nowrap; }

/* Bandplakater */
.plakater { display: grid; grid-template-columns: 1fr; gap: 24px 20px; }
.plakat { display: block; color: var(--ink); transition: transform .3s var(--ease), scale .12s var(--ease); }
.plakat:hover { color: var(--roed-tekst); }
@media (hover: hover) { .plakat:hover { transform: translateY(-4px); } }
.plakat .boks { aspect-ratio: 16 / 9; background: var(--billedbund); }
.plakat__tekst { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 14px; }
.plakat__navn { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.6vw, 40px); line-height: 1; text-transform: uppercase; }
.plakat__tag { font-size: var(--tekst-ui); color: var(--muted); }
.plakat-cta { border-radius: 12px; background: var(--deep); color: var(--lys); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; min-height: 260px; position: relative; overflow: hidden; }
.plakat-cta__maerke { position: absolute; right: -6%; top: -18%; width: 34%; max-width: 260px; height: auto; opacity: .16; filter: grayscale(1) brightness(1.9); transform: rotate(14deg); pointer-events: none; }
.plakat-cta h3 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; text-transform: uppercase; text-wrap: balance; position: relative; }
.plakat-cta p { font-size: var(--tekst-ui); line-height: 1.5; color: var(--lys-85); max-width: 48ch; position: relative; }
.plakat-cta .knap { align-self: flex-start; position: relative; }
@media (min-width: 1040px) {
  .plakater { grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; align-items: start; }
  .plakat--bred { grid-column: span 2; }
  .plakat--smal .boks { aspect-ratio: 6 / 7; }
  .plakat-cta { grid-column: 1 / -1; min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
  .plakat-cta__tekst { display: flex; flex-direction: column; gap: 10px; }
  /* Ulige antal plakater: kortet står ved siden af den sidste brede plakat, i plakatens højde */
  .plakat-cta--ved-siden { grid-column: auto; align-self: stretch; flex-direction: column; flex-wrap: nowrap; align-items: flex-start; justify-content: flex-end; gap: 14px; }
}

/* Delt afsnit: billede + tekst */
.split { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: center; }
.split--top { align-items: flex-start; }
.split__billede { flex: 1 1 300px; max-width: 480px; }
.split__billede--bred { max-width: 520px; }
.split__tekst { flex: 1.2 1 380px; }
.split__tekst > p { margin-top: 28px; max-width: 60ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink2); }
.split__tekst > .pil-link { margin-top: 32px; }

/* Cases */
.case-rulle { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 16px; overflow-x: auto; padding-bottom: 14px; scroll-snap-type: x mandatory; }
.case-rulle > * { scroll-snap-align: start; }
.case-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.case { position: relative; min-height: 150px; border-radius: 12px; background: var(--tile); padding: 24px; display: flex; flex-direction: column; justify-content: flex-end; color: var(--ink); }
.case__navn { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.case__sted { margin-top: 8px; font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* Spillesteder. Uden bevægelse (»reducér bevægelse« eller »Stop bevægelse«) en ombrudt liste med alle
   steder; ellers en række, der kører af sig selv gennem dem alle (se »Bevægelse«). */
.rulleband { margin-top: clamp(28px, 4vw, 48px); padding: 18px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.rulleband__saet { display: flex; flex-wrap: wrap; row-gap: 6px; margin: 0; padding: 0; list-style: none; }
.rulleband__kopi { display: none; }

.prikliste { display: flex; flex-wrap: wrap; gap: 6px 0; margin: clamp(20px, 3vw, 32px) 0 0; padding: 0; list-style: none; }
.prikliste li { flex: none; white-space: nowrap; font-family: var(--display); font-weight: 500; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.5; text-transform: uppercase; letter-spacing: .02em; color: var(--ink2); margin-right: 22px; }
.prikliste li::after { content: '·'; margin-left: 22px; color: var(--roed); }

/* Afslutning (CTA) og sidefod */
.afslut .ramme { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: flex-end; justify-content: space-between; }
.afslut__tekst { flex: 1.2 1 380px; }
.afslut h2 { font-family: var(--display); font-weight: 700; font-size: clamp(44px, 6vw, 96px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; max-width: 12ch; text-wrap: balance; }
.afslut__tekst p { margin-top: 24px; max-width: 52ch; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--lys-85); }
.afslut__kontakt { flex: 1 1 320px; display: flex; flex-direction: column; gap: 8px; }
.afslut__tlf { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.1; color: var(--lys); font-variant-numeric: tabular-nums; }
.afslut__tlf:hover { color: var(--roed-lys); }
.afslut__mail { font-size: var(--tekst-stor); color: var(--lys-85); }
.afslut__mail:hover { color: var(--lys); }
.afslut__kontakt .knap { margin-top: 20px; align-self: flex-start; }

.bund { background: var(--deep); color: var(--lys); border-top: 1px solid var(--lys-12); padding: clamp(40px, 5vw, 64px) 0 32px; overflow: hidden; overflow: clip; }
.bund__stort { max-width: 1280px; margin: 0 auto clamp(28px, 4vw, 56px); padding: 0 var(--pad); font-family: var(--display); font-weight: 700; font-size: clamp(54px, 10.5vw, 180px); line-height: .9; text-transform: uppercase; letter-spacing: .01em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--lys) 30%, transparent); white-space: nowrap; }
/* Ordet er ren dekoration: det står i data-ord og tegnes her, så det hverken læses op, kopieres eller tæller som tekst */
.bund__stort::before { content: attr(data-ord); }
.bund__raekke { display: flex; flex-wrap: wrap; gap: 40px clamp(40px, 6vw, 96px); justify-content: space-between; }
.bund__maerke { flex: 1 1 260px; display: flex; flex-direction: column; gap: 16px; }
.bund__maerke img { height: 64px; width: auto; align-self: flex-start; }
.bund__maerke p { max-width: 34ch; color: var(--lys-85); }
.bund nav, .bund__kontakt { display: flex; flex-direction: column; gap: 8px; }
.bund nav a { font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--lys-85); }
.bund a:hover { color: var(--lys); }
.bund__tlf { color: var(--lys); font-family: var(--display); font-weight: 500; font-size: var(--tekst-stor); font-variant-numeric: tabular-nums; }
.bund__tlf:hover { color: var(--roed-lys) !important; }
.bund__kontakt a:not(.bund__tlf) { color: var(--lys-85); }
.bund__linje { max-width: 1280px; margin: 40px auto 0; padding: 20px var(--pad) 0; border-top: 1px solid var(--lys-12); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: var(--tekst-lille); color: var(--lys-60); }
.bund__linje a { display: inline-block; padding: 4px 0; color: var(--lys-75); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Bands (liste) ---------- */
.bandliste { margin-top: clamp(36px, 5vw, 64px); border-top: 1px solid var(--rule); }
.bandliste a { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(24px, 4vw, 56px); padding: var(--raekke) 0; border-bottom: 1px solid var(--rule); color: var(--ink); transition: color .2s; }
.bandliste a:hover { color: var(--roed-tekst); }
.bandliste .boks { flex: 0 1 340px; min-width: min(100%, 220px); aspect-ratio: 16 / 9; background: var(--billedbund); }
.bandliste__tekst { flex: 1 1 260px; }
.bandliste__navn { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4vw, 64px); line-height: .95; text-transform: uppercase; }
.bandliste__tag { margin-top: 8px; font-size: var(--tekst); color: var(--muted); }
.bandliste__se { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--roed-tekst); }

/* ---------- Bandside ---------- */
.bandhero { position: relative; width: 100%; height: clamp(280px, 52vw, 720px); max-height: 74vh; max-height: 74svh; background: var(--deep); overflow: hidden; overflow: clip; }
.bandhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Plakat med tekst (Dirty Guns): vises hel i sit eget format (1734 × 907); kun meget brede skærme får mørk kant */
.bandhero--passe { height: auto; aspect-ratio: 1734 / 907; }
.bandhero--passe img { object-fit: contain; }
.bandindhold__foto { margin-top: clamp(28px, 3.5vw, 44px); }
.bandhoved { padding: clamp(28px, 4vw, 56px) 0 0; }
.bandhoved h1 { margin-top: 14px; font-family: var(--display); font-weight: 700; font-size: clamp(48px, 7.5vw, 120px); line-height: .9; text-transform: uppercase; letter-spacing: .005em; max-width: 12ch; text-wrap: balance; overflow-wrap: break-word; }
.bandhoved__raekke { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; margin-top: clamp(18px, 2.5vw, 28px); }
.bandhoved__raekke p { max-width: 44ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink2); }
.knap .ingen-brud { white-space: nowrap; }
.bandindhold { padding: clamp(40px, 5vw, 72px) 0 0; }
.bandindhold .ramme { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); align-items: flex-start; }
.bandindhold__tekst { flex: 1.2 1 380px; }
.bandindhold__tekst > p:first-child { max-width: 60ch; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.5; }
.bandafsnit { margin-top: clamp(28px, 3.5vw, 44px); max-width: 62ch; }
.bandafsnit h2 { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; text-transform: uppercase; }
.bandafsnit p { margin-top: 12px; font-size: var(--tekst); line-height: 1.6; color: var(--ink2); }
.bandindhold__note { margin-top: clamp(28px, 3.5vw, 44px); max-width: 60ch; font-size: var(--tekst-ui); color: var(--muted); }
.bandindhold__side { flex: 1 1 320px; }
.bandindhold__side .boks + .boks { margin-top: 16px; }
/* Bryllup og firmafest: billede ved siden af indledningen, pris og lyd og lys */
.segment { margin-top: clamp(32px, 4vw, 56px); }
.segment .split__tekst > :first-child { margin-top: 0; }
.bandindhold__side .knapper { margin-top: 14px; gap: 10px; }

.repertoire { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(32px, 5vw, 80px); margin: clamp(24px, 3vw, 40px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.repertoire li { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.repertoire__nr { flex: none; width: 28px; font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); color: var(--roed-tekst); font-variant-numeric: tabular-nums; }
.repertoire__sang { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); text-transform: uppercase; letter-spacing: .01em; line-height: 1.15; }
.repertoire__kunstner { margin-left: auto; font-size: var(--tekst-ui); color: var(--muted); text-align: right; }

.andre-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin-top: clamp(24px, 3vw, 40px); }
.andre-bands a { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; overflow: clip; background: var(--billedbund); color: var(--lys); transition: transform .3s var(--ease), box-shadow .3s var(--ease), scale .12s var(--ease); }
.andre-bands a:hover { color: var(--lys); }
@media (hover: hover) { .andre-bands a:hover { transform: translateY(-4px); box-shadow: 0 26px 48px -22px color-mix(in srgb, var(--deep) 60%, transparent); } }
.andre-bands img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.andre-bands__tekst { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--deep) 90%, transparent) 100%); pointer-events: none; }
.andre-bands__navn { font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 32px); line-height: .95; text-transform: uppercase; }
.andre-bands__tag { margin-top: 6px; font-size: var(--tekst-ui); color: var(--lys-85); }

/* ---------- Om / Ydelser ---------- */
.fakta { margin-top: clamp(32px, 4vw, 48px); border-top: 2px solid var(--ink); padding: 0; list-style: none; }
.fakta li { padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: var(--tekst); line-height: 1.5; color: var(--ink2); }
/* Første del af udsagnet i versaler, resten i almindelig tekst: én sætning, to niveauer */
.fakta__noegle { display: block; margin-bottom: 2px; font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.ydelser { margin-top: clamp(48px, 6vw, 88px); border-top: 2px solid var(--ink); }
.ydelse { display: flex; flex-wrap: wrap; gap: 16px clamp(32px, 5vw, 80px); padding: var(--blok) 0; border-bottom: 1px solid var(--rule); }
.ydelse h2 { flex: 1 1 280px; font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1; text-transform: uppercase; letter-spacing: .005em; }
.ydelse p { flex: 2 1 380px; max-width: 64ch; font-size: var(--tekst); line-height: 1.55; color: var(--ink2); }
.spiller-til { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 22px; margin-top: clamp(32px, 4vw, 48px); }
.spiller-til > span:first-child { font-size: var(--tekst-ui); color: var(--muted); margin-right: 8px; }
.spiller-til ul { display: contents; }
.spiller-til li { list-style: none; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.6vw, 24px); text-transform: uppercase; letter-spacing: .02em; }
.spiller-til li:not(:last-child)::after { content: '·'; margin-left: 22px; color: var(--roed); }
.spiller-til li a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.spiller-til li a:hover { color: var(--roed-tekst); }
/* Spørgsmål og svar på /ydelser/: samme rækker som ydelserne */
.faq { margin-top: clamp(56px, 7vw, 104px); }
.faq .ydelser { margin-top: clamp(20px, 2.5vw, 28px); }
.ydelse h3 { flex: 1 1 280px; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; text-transform: uppercase; letter-spacing: .005em; }
.ydelse h2 a { color: inherit; }
.ydelse h2 a:hover { color: var(--roed-tekst); }

/* ---------- Spillejobs ---------- */
.jobliste { margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; border-top: 2px solid var(--ink); }
.job { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px clamp(24px, 4vw, 56px); padding: var(--raekke) 0; border-bottom: 1px solid var(--rule); }
.job__dato { flex: 0 0 auto; min-width: 9ch; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.4vw, 34px); line-height: 1; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.job__dato span { display: block; margin-top: 6px; font-weight: 500; font-size: var(--tekst-lille); letter-spacing: .08em; color: var(--muted); }
.job__sted { flex: 1 1 280px; }
.job__sted strong { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 30px); line-height: 1.05; text-transform: uppercase; }
.job__sted span { color: var(--muted); }
.job__band { font-family: var(--display); font-weight: 500; font-size: var(--tekst-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--roed-tekst); }
/* Kalenderen på /spillejobs/ (spillejobs_kalender): antal og strimmel øverst, måneder med årstal, kompakte rækker */
.hoved--kalender { align-items: end; }
.kal-intro { max-width: 520px; }
.kal-intro p { color: var(--ink2); }
.hoved .kal-antal, .kal-antal { text-wrap: balance; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; text-transform: uppercase; color: var(--ink) !important; margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.kal-strimmel { margin-top: clamp(36px, 5vw, 56px); border-top: 2px solid var(--ink); padding-top: 18px; overflow-x: auto; }
.kal-strimmel__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(24px, 1fr); gap: 2px; }
@media (min-width: 700px) { .kal-strimmel__liste { gap: 4px; } }
.kal-strimmel__md { display: grid; grid-template-rows: 56px auto auto auto; justify-items: center; gap: 4px; padding: 6px 0 8px; border-radius: 4px; color: var(--ink); }
a.kal-strimmel__md:hover { background: var(--alt); }
.kal-strimmel__soejle { align-self: end; width: min(100%, 22px); height: 3px; background: var(--roed); border-radius: 2px 2px 0 0; transition: height .3s var(--ease); }
.kal-strimmel__soejle[data-h="1"] { height: 10%; } .kal-strimmel__soejle[data-h="2"] { height: 20%; } .kal-strimmel__soejle[data-h="3"] { height: 30%; }
.kal-strimmel__soejle[data-h="4"] { height: 40%; } .kal-strimmel__soejle[data-h="5"] { height: 50%; } .kal-strimmel__soejle[data-h="6"] { height: 60%; }
.kal-strimmel__soejle[data-h="7"] { height: 70%; } .kal-strimmel__soejle[data-h="8"] { height: 80%; } .kal-strimmel__soejle[data-h="9"] { height: 90%; }
.kal-strimmel__soejle[data-h="10"] { height: 100%; }
.kal-strimmel__md.tom .kal-strimmel__soejle { background: var(--tile); height: 2px; }
.kal-strimmel__antal { font-family: var(--display); font-weight: 600; font-size: clamp(16px, 2vw, 22px); line-height: 1; font-variant-numeric: tabular-nums; }
.kal-strimmel__md.tom .kal-strimmel__antal { color: var(--muted); }
.kal-strimmel__navn { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kal-strimmel__aar { font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.kal-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.kal-chip { font: 500 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); background: transparent; border: 1.5px solid var(--ruleStrong); border-radius: 999px; padding: 11px 15px; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; transition: background .2s, color .2s, border-color .2s; }
.kal-chip span { color: var(--muted); font-variant-numeric: tabular-nums; }
.kal-chip:hover { border-color: var(--ink); }
.kal-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.kal-chip[aria-pressed="true"] span { color: inherit; opacity: .7; }
.kal-liste { margin-top: clamp(28px, 4vw, 48px); }
.kal-maaned + .kal-maaned { margin-top: clamp(28px, 4vw, 44px); }
/* Månedens overskrift bliver stående under den klæbende menu (76 px), mens man scroller måneden igennem */
.kal-maaned__titel { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 2px solid var(--ink);
  font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1; text-transform: uppercase; position: sticky; top: 76px; background: var(--bg); z-index: 2; }
.kal-maaned__antal { font-size: var(--tekst-lille); font-weight: 500; letter-spacing: .08em; color: var(--muted); font-variant-numeric: tabular-nums; }
.kal-raekker { list-style: none; margin: 0; padding: 0; }
.kal-raekke { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 2px 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.kal-raekke:focus { outline: none; }
.kal-raekke:focus-visible { outline: 2px solid var(--roed-tekst); outline-offset: 2px; }
.kal-dato { grid-row: span 2; display: grid; justify-items: center; line-height: 1; }
.kal-dato__dag { font-family: var(--display); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.kal-dato__tal { font-family: var(--display); font-weight: 700; font-size: 32px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kal-sted { min-width: 0; line-height: 1.25; font-size: var(--tekst); }
.kal-sted strong { font-weight: 700; }
.kal-sted strong a { text-decoration: underline; text-underline-offset: 3px; }
.kal-sted span { color: var(--muted); }
.kal-band { font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); justify-self: start; }
a.kal-band { text-decoration: underline; text-decoration-color: var(--ruleStrong); text-underline-offset: 4px; }
a.kal-band:hover { color: var(--roed-tekst); text-decoration-color: currentColor; }
.kal-band--uden { color: var(--muted); }
/* Privatfest og firmafest: står uden stedet, i samme række som de offentlige, bare lidt stillere */
.kal-raekke--lukket .kal-sted strong, .job--lukket .job__sted strong { font-weight: 600; color: var(--ink2); }
.kal-flere { margin-top: 24px; display: flex; justify-content: center; }
@media (min-width: 760px) {
  .kal-raekke { grid-template-columns: 72px minmax(0, 1fr) 240px; gap: 24px; padding: 16px 0; }
  .kal-dato { grid-row: auto; }
  .kal-sted { font-size: 20px; }
  .kal-band { justify-self: end; text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .kal-strimmel__soejle { transition: none; } }

.tom { margin-top: clamp(36px, 5vw, 64px); padding-top: 24px; border-top: 2px solid var(--ink); max-width: 720px; }
.tom h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; text-transform: uppercase; }
.tom p { margin-top: 12px; font-size: var(--tekst); color: var(--ink2); }
.tom .knapper { margin-top: 24px; }

/* ---------- Kontakt ---------- */
.kontakt .ramme { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
.kontakt__info { flex: 1 1 340px; }
.kontakt__info > p { margin-top: 24px; max-width: 46ch; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--ink2); }
.kontakt__linjer { display: flex; flex-direction: column; gap: 6px; margin-top: clamp(28px, 4vw, 44px); padding-top: 24px; border-top: 2px solid var(--ink); }
.kontakt__tlf { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.15; color: var(--ink); font-variant-numeric: tabular-nums; }
.kontakt__mail { margin-top: 10px; font-size: var(--tekst-stor); color: var(--roed-tekst); }
.kontakt__mail:hover { color: var(--roed-tekst-hover); }
.kontakt__side { flex: 1.1 1 380px; max-width: 640px; }
.formular { display: flex; flex-direction: column; gap: 20px; padding-top: 24px; border-top: 2px solid var(--ink); }
.formular h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; text-transform: uppercase; }
.formular__intro p { margin-top: 8px; font-size: var(--tekst-ui); color: var(--muted); }
.felter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.felt { display: flex; flex-direction: column; gap: 8px; }
.felt--hel { grid-column: 1 / -1; }
.felt__navn { font-family: var(--display); font-weight: 500; font-size: var(--tekst-lille); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.felt input, .felt select, .felt textarea { width: 100%; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--ruleStrong); background: var(--field); font-size: var(--tekst); color: var(--ink); min-height: 52px; }
.felt textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.felt [aria-invalid="true"] { border-color: var(--roed-tekst); }
.felt__fejl { font-size: var(--tekst-lille); color: var(--roed-tekst); min-height: 0; }
.felt__fejl:empty { display: none; }
.felt__hjaelp { font-size: var(--tekst-lille); color: var(--muted); }
.formular__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 4px; }
.formular__send span { font-size: var(--tekst-lille); color: var(--muted); }
.formular__samtykke { font-size: var(--tekst-lille); color: var(--muted); }
.formular__samtykke a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.formular__fejl { padding: 14px 16px; border-radius: 6px; border: 1px solid var(--roed-tekst); color: var(--ink); background: var(--field); }
/* Tom er fejlboksen usynlig, men står i tilgængelighedstræet, så role="alert" læses op, når teksten kommer */
.formular__fejl:empty { position: absolute; padding: 0; border: 0; }
/* Mens formularen sender: knappen siger »Sender …« og kan ikke trykkes igen (site.js) */
.knap[aria-disabled="true"] { cursor: progress; }
.knap--roed[aria-disabled="true"], .knap--roed[aria-disabled="true"]:hover { background: var(--roed-hover); }
.honning { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tak { padding-top: 24px; border-top: 2px solid var(--ink); animation: roEnter .5s var(--ease) both; }
.tak h2 { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4vw, 56px); line-height: .95; text-transform: uppercase; }
.tak p { margin-top: 18px; max-width: 48ch; font-size: var(--tekst-stor); line-height: 1.5; color: var(--ink2); }
.tak .knapper { margin-top: 28px; }
/* Tak for forespørgslen: dialogen efter formularen (site.js) på den altid mørke flade, som afslutningen
   og mobilmenuen, med én vej videre til forsiden */
.takboks {
  width: min(560px, calc(100% - 2 * var(--pad))); max-width: none; margin: auto; padding: clamp(28px, 5vw, 48px);
  border: 1px solid var(--lys-12); border-radius: 4px; background: var(--deep); color: var(--lys);
}
.takboks[open] { animation: roEnter .5s var(--ease) both; }
.takboks::backdrop { background: rgba(14, 14, 13, .78); }
.takboks h2 { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 4vw, 52px); line-height: .92; text-transform: uppercase; letter-spacing: .005em; text-wrap: balance; }
.takboks p { margin-top: 18px; font-size: var(--tekst-stor); line-height: 1.5; color: var(--lys-85); overflow-wrap: break-word; }
.takboks .knapper { margin-top: 28px; }

/* ---------- Video ----------
   Stillbillede og afspilknap, til man trykker; site.js skifter så til en <video> i samme boks.
   »Video på vej« er pladsholderen, indtil videoen er komprimeret (videoer.py). */
.video { position: relative; margin: 0; overflow: hidden; overflow: clip; border-radius: 12px; background: var(--deep); color: var(--lys); }
.video--staaende { aspect-ratio: 9 / 16; max-width: 360px; }
.video--liggende { aspect-ratio: 16 / 9; }
.video img, .video video, .video__start { display: block; width: 100%; height: 100%; }
.video img, .video video { object-fit: cover; }
.video__start { color: var(--lys); }
.video__start:focus-visible { outline: 3px solid var(--lys); outline-offset: -8px; }
.video__knap { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--roed); color: var(--lys); box-shadow: 0 12px 32px rgba(0,0,0,.35); pointer-events: none; }
.video__knap svg { margin-left: 4px; }
.video--snart .video__knap { background: color-mix(in srgb, var(--deep) 75%, transparent); color: var(--lys-85); }
.video__tid, .video__maerke { position: absolute; right: 12px; bottom: 12px; margin: 0; padding: 3px 10px; border-radius: 4px; background: rgba(0,0,0,.72); color: var(--lys); font-size: var(--tekst-lille); line-height: 1.4; font-variant-numeric: tabular-nums; }
.bandindhold__side .video { margin-bottom: 16px; }
.om .video { margin-top: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .video__knap { transition: scale .25s var(--ease); }
  @media (hover: hover) { a.video__start:hover .video__knap { scale: 1.08; } }
}

/* Lange tekster (privatlivspolitik) */
.tekstside { max-width: 70ch; }
.tekstside h2 { margin-top: 44px; font-family: var(--display); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; text-transform: uppercase; }
.tekstside p, .tekstside ul { margin-top: 14px; font-size: var(--tekst); line-height: 1.6; color: var(--ink2); }
.tekstside ul { padding-left: 1.2em; }
.tekstside li + li { margin-top: 6px; }
.tekstside a { color: var(--roed-tekst); text-decoration: underline; text-underline-offset: 3px; }
.tekstside .dato { margin-top: 44px; font-size: var(--tekst-ui); color: var(--muted); }

/* ---------- Tema-skift (logoet flyver ind, cirklen dækker, temaet skifter under) ---------- */
.tema-skift { position: fixed; inset: 0; z-index: 120; pointer-events: none; overflow: hidden; animation: roWipeFade 1.4s linear both; }
.tema-skift__cirkel { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); animation: roBurst .62s cubic-bezier(.45,0,.2,1) .46s both; }
.tema-skift--light .tema-skift__cirkel { background: var(--bg-lys); }
.tema-skift--dark .tema-skift__cirkel { background: var(--bg-moerk); }
.tema-skift__logo { position: absolute; top: 50%; left: 50%; width: min(260px, 44vw, 50vh); height: auto; transform: translate(-50%, -50%); animation: roLogoIn 1.4s cubic-bezier(.2,.8,.2,1) both; filter: drop-shadow(0 30px 50px rgba(0,0,0,.45)); }

/* ---------- Animationer ---------- */
@keyframes roEnter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes roFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes roKen { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes roBurst { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(74% at 50% 50%); } }
@keyframes roLogoIn { 0% { transform: translate(-50%,-50%) translateX(-130vw) rotate(-560deg) scale(.5); } 33% { transform: translate(-50%,-50%) translateX(0) rotate(0) scale(1); } 41% { transform: translate(-50%,-50%) scale(1.12); } 56% { transform: translate(-50%,-50%) scale(1); } 100% { transform: translate(-50%,-50%) scale(1); } }
@keyframes roWipeFade { 0%, 78% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Tilføjelser til generatorens klasser ---------- */
.hoved__hoejre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 28px; }
.hoved__hoejre p { max-width: 38ch; }
.hoved .rep-label { font-size: var(--tekst-ui); }
.split__afsnit { margin-top: 28px; max-width: 60ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.5; color: var(--ink2); }
.split__link { margin-top: 32px; }
.split__links { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 32px; }
.spillejobs__mere { margin-top: clamp(40px, 5vw, 64px); }
.spillejobs__bands { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 18px 0 0; padding: 0; list-style: none; }
.om { margin-top: clamp(40px, 5vw, 72px); }
.om__afsnit { margin-top: 22px; max-width: 60ch; color: var(--ink2); }
.ydelser__lead { margin-top: 28px; max-width: 56ch; }
.side404__tekst { margin-top: 24px; max-width: 46ch; }
.side404__knapper { margin-top: 32px; }
.case-rulle, .case-gitter { margin: 0; padding: 0; list-style: none; }
.case-gitter { margin-top: clamp(36px, 5vw, 64px); }
.rulleband li { flex: 0 1 auto; font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.7vw, 26px); line-height: 1.4; text-transform: uppercase; letter-spacing: .02em; color: var(--ink2); margin-right: 26px; }
.rulleband li:last-child { margin-right: 0; }
.rulleband li:not(:last-child)::after { content: '·'; margin-left: 26px; color: var(--roed); }
.bandhoved .pil-link--tilbage svg { width: 18px; height: 18px; }

/* Kun i forhåndsvisningen (NJ_DEMO=1) */
.demo-bjaelke { margin: 0; padding: 8px var(--pad); background: var(--deep); color: var(--lys); font-size: var(--tekst-lille); line-height: 1.4; text-align: center; }

/* ---------- Bevægelse ----------
   NB: scroll-animationer følger nærmeste scroll-container, og overflow: hidden er én. Derfor har
   .boks, .andre-bands a, .bandhero og .bund »overflow: clip« efter hidden (clip er ikke scroll-container).
   Lidt liv, når man bevæger sig rundt: sideskift, hvor bandbilledet glider fra kort til bandside,
   indhold der glider ind første gang, det kommer til syne, dybde i fotos og små svar på hover.
   Alt er synligt som udgangspunkt: site.js skjuler kun det, der ligger under folden, og viser det,
   når det når ind i billedet (og så bliver det). Browsere uden scroll-animationer eller View
   Transitions viser siden som før. Ved »reducér bevægelse« er det hele slået fra. Positionen animeres
   med translate/scale, så det ikke støder sammen med transform, som hover bruger. */
.top { view-transition-name: top; }
.plakat .boks img, .bandliste .boks img, .andre-bands img { scale: 1; }
@media (hover: hover) { .plakat:hover .boks img, .bandliste a:hover .boks img, .andre-bands a:hover img { scale: 1.05; } }

@media (prefers-reduced-motion: no-preference) {
  /* Sideskift: headeren står stille, resten toner over, bandbilledet glider (navne genereres i build.mjs) */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .2s ease-out both vtUd; }
  ::view-transition-new(root) { animation: .3s ease-out both vtInd; }
  ::view-transition-group(*) { animation-duration: .55s; animation-timing-function: var(--ease); }

  .menu a::after { transition: scale .35s var(--ease); }
  .plakat .boks img, .bandliste .boks img, .andre-bands img { transition: scale .4s var(--ease); }

  /* Forsidens overskrift ord for ord, derefter tekst og knapper */
  .hero h1 .ord { display: inline-block; animation: ordOp .9s var(--ease) both; }
  .hero h1 .ord:nth-child(2) { animation-delay: .06s; }
  .hero h1 .ord:nth-child(3) { animation-delay: .12s; }
  .hero h1 .ord:nth-child(4) { animation-delay: .18s; }
  .hero h1 .ord:nth-child(5) { animation-delay: .24s; }
  .hero h1 .ord:nth-child(6) { animation-delay: .30s; }
  .hero__under p { animation: roEnter .8s var(--ease) .45s both; }
  .hero__under .knapper { animation: roEnter .8s var(--ease) .6s both; }

  /* Spillestederne kører af sig selv gennem alle steder. To ens sæt, så løkken ingen søm har; pause
     ved hover. Det er et bevidst fravalg af Impeccables marquee-regel (Rasmus 25-09, .impeccable/config.json) */
  .rulleband { overflow: hidden; overflow: clip;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .rulleband__spor { display: flex; width: max-content; animation: rulleLoeb 70s linear infinite; }
  .rulleband:hover .rulleband__spor { animation-play-state: paused; }
  .rulleband__saet { flex: none; flex-wrap: nowrap; }
  .rulleband__kopi { display: flex; }
  .rulleband li { flex: none; white-space: nowrap; }
  .rulleband li:last-child { margin-right: 26px; }
  .rulleband li:last-child::after { content: '·'; margin-left: 26px; color: var(--roed); }

  /* Indhold glider ind første gang, det kommer til syne (klasserne sættes og fjernes af site.js) */
  .vis-ind { opacity: 0; translate: 0 32px; }
  .plakat.vis-ind, .andre-bands a.vis-ind, .case.vis-ind { translate: 0 24px; scale: .96; }
  .repertoire > .vis-ind { translate: -24px 0; }
  .vis-ind.vist { opacity: 1; translate: none; scale: none; transition: opacity .7s var(--ease), translate .9s var(--ease), scale .9s var(--ease); }
  /* Kolonne to og tre kommer lidt efter, så en række ikke kommer som én blok */
  .plakater > .vist:nth-child(2n), .case-gitter > .vist:nth-child(3n+2), .andre-bands > .vist:nth-child(3n+2), .case-rulle > .vist:nth-child(2), .repertoire > .vist:nth-child(2n) { transition-delay: .08s; }
  .case-gitter > .vist:nth-child(3n), .andre-bands > .vist:nth-child(3n), .case-rulle > .vist:nth-child(3) { transition-delay: .16s; }
  .case-rulle > .vist:nth-child(4) { transition-delay: .24s; }

  @supports (animation-timeline: view()) {
    /* Indryk 0: ellers følger synsfeltet html's scroll-padding (til headeren) og flytter bevægelsen */
    /* Dybde: fotos bevæger sig lidt langsommere end siden */
    .split__billede .boks img, .plakat .boks img, .bandliste .boks img, .andre-bands img {
      animation: parallakse linear both; animation-timeline: view(block 0px); animation-range: cover 0% cover 100%;
    }
    /* Hero på forsiden og bandsiderne: foto synker, tekst letter, når man scroller forbi */
    .hero { view-timeline: --hero block; view-timeline-inset: 0px; }
    .hero__foto { animation: heroFotoUd linear both; animation-timeline: --hero; animation-range: exit 0% exit 100%; }
    .hero__indhold { animation: heroTekstUd linear both; animation-timeline: --hero; animation-range: exit 0% exit 70%; }
    .bandhero > picture img, .bandhero > img { animation: heroFotoUd linear both; animation-timeline: view(block 0px); animation-range: exit 0% exit 100%; }

  }

  @supports (animation-timeline: scroll()) {
    /* Headeren får skygge, når siden er scrollet, og en tynd rød streg viser, hvor langt man er. Skyggen
       ligger på et lag, der kun tones ind: opacity kan animeres uden at tegne headeren om ved hver scroll */
    .top::before { content: ''; position: absolute; inset: 0; z-index: -1; box-shadow: 0 14px 28px -22px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
      animation: topSkygge linear both; animation-timeline: scroll(root); animation-range: 0px 140px; }
    .top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--roed); transform-origin: 0 50%; scale: 0 1; pointer-events: none; animation: fremdrift linear both; animation-timeline: scroll(root); }
  }
}

@keyframes vtUd { to { opacity: 0; } }
@keyframes vtInd { from { opacity: 0; } }
@keyframes ordOp { from { opacity: 0; translate: 0 .35em; } }
@keyframes parallakse { from { transform: translateY(-5%) scale(1.12); } to { transform: translateY(5%) scale(1.12); } }
@keyframes heroFotoUd { to { translate: 0 18%; } }
@keyframes heroTekstUd { to { opacity: 0; translate: 0 -56px; } }
@keyframes rulleLoeb { to { translate: -50% 0; } }
@keyframes topSkygge { to { opacity: 1; } }
@keyframes fremdrift { to { scale: 1 1; } }

/* ---------- Stop bevægelse (WCAG 2.2.2) ----------
   Rullebåndet og »music«-effekten i forsidens overskrift kører i det uendelige. Knappen i sidefoden
   stopper al bevægelse på siden og huskes (tema.js sætter data-bevaegelse="stop" før siden tegnes). */
.bevaegelse-knap { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; background: none; border: 0; color: var(--lys-75); font: inherit; font-size: var(--tekst-lille); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bevaegelse-knap:hover { color: var(--lys); }
.bevaegelse-knap::before { content: ''; width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; }
.bevaegelse-knap[aria-pressed="true"]::before { background: var(--roed-lys); border-color: var(--roed-lys); box-shadow: inset 0 0 0 2px var(--deep); }
@media (prefers-reduced-motion: reduce) { .bevaegelse-del { display: none; } }
:root[data-bevaegelse="stop"] *, :root[data-bevaegelse="stop"] *::before, :root[data-bevaegelse="stop"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}
:root[data-bevaegelse="stop"] .rulleband { -webkit-mask-image: none; mask-image: none; }
:root[data-bevaegelse="stop"] .rulleband__spor { display: block; width: auto; }
:root[data-bevaegelse="stop"] .rulleband__saet { flex-wrap: wrap; }
:root[data-bevaegelse="stop"] .rulleband__kopi { display: none; }
:root[data-bevaegelse="stop"] .rulleband li { flex: 0 1 auto; white-space: normal; }
:root[data-bevaegelse="stop"] .rulleband li:last-child { margin-right: 0; }
:root[data-bevaegelse="stop"] .rulleband li:last-child::after { content: none; }
:root[data-bevaegelse="stop"] .vis-ind { opacity: 1; translate: none; scale: none; }

/* ---------- Uden color-mix (Safari før 16.2, Chrome før 111, Firefox før 113) ----------
   Samme toner som faste værdier. En rgba-linje foran color-mix hjælper ikke: en erklæring med var() vinder
   altid kaskaden og bliver først ugyldig, når den regnes ud, og så falder den tilbage til ingenting. */
@supports not (color: color-mix(in srgb, red, red)) {
  :root { --lys-85: rgba(245,244,241,.85); --lys-75: rgba(245,244,241,.75); --lys-60: rgba(245,244,241,.6); --lys-12: rgba(245,244,241,.12); }
  .hero__skygge { background: linear-gradient(250deg, rgba(26,25,23,.82) 0%, rgba(26,25,23,.34) 42%, rgba(26,25,23,0) 66%), linear-gradient(180deg, rgba(26,25,23,0) 72%, rgba(26,25,23,.45) 100%); }
  .hero__under p { color: rgba(245,244,241,.92); }
  .bund__stort { -webkit-text-stroke: 1px rgba(245,244,241,.3); }
  .andre-bands__tekst { background: linear-gradient(180deg, rgba(26,25,23,0) 0%, rgba(26,25,23,.9) 100%); }
  .video--snart .video__knap { background: rgba(26,25,23,.75); }
  @media (hover: hover) { .andre-bands a:hover { box-shadow: 0 26px 48px -22px rgba(26,25,23,.6); } }
}

/* ---------- Trykflader på touch ----------
   Med finger (pointer: coarse) er links og knapper uden for en sætning mindst 44 px høje. Teksten står
   som før; det er kun fladen omkring den, der vokser. Med mus er siden uændret. */
@media (pointer: coarse) {
  .pil-link, .knap--mini, .bevaegelse-knap { min-height: 44px; }
  .bund nav, .bund__kontakt, .afslut__kontakt, .kontakt__linjer { gap: 0; }
  .bund nav a, .bund__kontakt a, .afslut__tlf, .afslut__mail, .kontakt__tlf, .kontakt__mail { display: flex; align-items: center; min-height: 44px; }
  .bund__linje a, .spiller-til li a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------- Udskrift ----------
   Sidst i filen, så det vinder over bevægelsen: alt indhold kommer med på papiret, også det, der
   endnu ikke er glidet ind, og spillestederne står som liste. Browsere udskriver normalt ikke
   flader, så de mørke flader med lys tekst tager deres farve med. */
@media print {
  .top, .mobilmenu, .afslut, .tema-skift, .bund__stort, .bevaegelse-del { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vis-ind { opacity: 1 !important; translate: none !important; scale: none !important; }
  .hero [data-kryptisk].blandes { color: inherit; }
  .hero [data-kryptisk].blandes::after { content: none; }
  .hero, .plakat-cta, .andre-bands a, .knap--roed, .video, .bund { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .boks, .video, .plakat, .plakat-cta, .andre-bands a, .case, .job, .kal-raekke, .ydelse, .fakta li, .repertoire li, .bandafsnit, .bund { break-inside: avoid; }
  .rulleband { -webkit-mask-image: none; mask-image: none; }
  .rulleband__spor { display: block; width: auto; }
  .rulleband__saet { flex-wrap: wrap; }
  .rulleband__kopi { display: none; }
  .rulleband li { flex: 0 1 auto; white-space: normal; }
  .rulleband li:last-child { margin-right: 0; }
  .rulleband li:last-child::after { content: none; }
}

/* Genereret af build.mjs */
.vt-dirty-guns { view-transition-name: band-dirty-guns; }
.vt-electrodance-all-stars { view-transition-name: band-electrodance-all-stars; }
.vt-nicki-jack-all-stars { view-transition-name: band-nicki-jack-all-stars; }
.vt-nicki-jack-solo { view-transition-name: band-nicki-jack-solo; }