/* sm4rtevent.dk (testsag, runde 3: historien med faderen). Varm mørk bund, creme tekst og én signalrød, som
   på det nuværende site. Archivo Black til titler, Archivo til tekst, JetBrains Mono kun til reponavne.
   Faderen i højre side er sidens eneste fysiske objekt. Ingen tekst under 16 px. Streng CSP: ingen inline
   styles; det, site.js ændrer, sker med klasser (og faderens kasket med CSSOM). */

/* ---------- Skrifter (fontsource, OFL, selvhostet) ---------- */
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/archivo-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: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(/assets/fonts/archivo-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: 'Archivo Black'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/archivo-black-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: 'Archivo Black'; font-style: normal; font-display: swap; font-weight: 400; src: url(/assets/fonts/archivo-black-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: 'JetBrains Mono'; font-style: normal; font-display: swap; font-weight: 500; src: url(/assets/fonts/jetbrains-mono-500-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; }

/* ---------- Farver og mål ---------- */
:root {
  --bund: #14120F;          /* det nuværende sites mørke (#131418), gjort lidt varmere */
  --bund-2: #1C1916;        /* felter */
  --bund-3: #0E0D0B;        /* sidefod og demobjælke */
  --creme: #F0ECE2;         /* tekst, som på det nuværende site */
  --creme-2: #BEB9AF;       /* brødtekst, 9,6:1 */
  --creme-3: #948F85;       /* dæmpede etiketter og tal, 5,8:1 */
  --streg: rgba(240, 236, 226, .12);
  --streg-2: rgba(240, 236, 226, .22);
  --roed: #C4463C;          /* streger, prikker og faderens midterstreg */
  --roed-tekst: #DC5E53;    /* rød tekst på mørk bund, 5,1:1 */
  --roed-knap: #AD3C33;     /* knapflader (teksten er --lys, 5,6:1), afkrydset samtykke og markeret tekst */
  --roed-knap-2: #9A342C;   /* knappen under musen (mørkere, så kontrasten stiger) */
  --lys: #FAF7F0;           /* tekst på rød: en tak lysere end cremen, så den ikke læses grå på farve, 5,6:1 */
  --display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --tekst: 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --ud: cubic-bezier(.16, 1, .3, 1);
  --g: 20px;                /* sidens kant */
  --g-h: 20px;              /* højre kant; på store skærme er faderen dér */
  --ramme: 1320px;
  --top-h: 64px;
}
@media (min-width: 700px) { :root { --g: 40px; --g-h: 40px; } }
@media (min-width: 1000px) {
  /* Højre kant: indholdet slutter altid mindst 236 px fra skærmkanten, så faderen og kapitlets navn på kasketten
     aldrig står over tekst (100 % er forælderens bredde, der hvor variablen bruges som padding) */
  :root { --g: 64px; --g-h: max(var(--g), calc(236px - max(0px, (100% - var(--ramme)) / 2))); --top-h: 76px; }
}
@media (min-width: 1600px) { :root { --ramme: 1480px; } }

/* ---------- Grundlag ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bund); color: var(--creme); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bund); font: 400 18px/1.6 var(--tekst); -webkit-font-smoothing: antialiased; }
@media (min-width: 1000px) { body { font-size: 19px; } }
h1, h2, h3, h4, p, figure, blockquote, ul, ol { margin: 0; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
strong { font-weight: 700; }
/* Linjeskift (Rasmus 30-09: teksten skal ikke bare løbe, til boksen er fuld): løbende tekst undgår enlige ord på
   sidste linje, overskrifter og citater balanceres, og tal står sammen med deres enhed (hårde mellemrum fra build.mjs) */
p, li, dd, figcaption, .spor__under { text-wrap: pretty; }
/* Korte beskrivelser på to til tre linjer balanceres, så sidste linje ikke er to ord */
.trin__tekst, .repo__tekst { text-wrap: balance; }
h1, h2, h3, h4, summary { text-wrap: balance; }
.ubrudt { white-space: nowrap; }
/* Korte indledninger: én sætning pr. linje (build.mjs sætter .saetning om hver sætning) */
.saetning { display: block; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--creme); outline-offset: 3px; }
::selection { background: var(--roed-knap); color: var(--creme); }

.spring { position: absolute; z-index: 100; left: 16px; top: -120px; padding: 12px 18px; border-radius: 3px; background: var(--creme); color: var(--bund); font-weight: 700; text-decoration: none; }
.spring:focus { top: 16px; }
.demo { padding: 10px var(--g); background: var(--bund-3); color: var(--creme-2); font-size: 16px; line-height: 1.4; text-align: center; box-shadow: inset 0 -1px 0 var(--streg); }

.ramme { width: 100%; max-width: var(--ramme); margin-inline: auto; padding-inline: var(--g) var(--g-h); }

/* ---------- Knapper ---------- */
.knap { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 22px; border: 0; border-radius: 3px; font: 700 16px/1.2 var(--tekst); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .2s, box-shadow .2s; }
.knap--stor { min-height: 56px; padding: 6px 28px; }
.knap--lille { min-height: 44px; padding: 6px 18px; }
.knap--roed { background: var(--roed-knap); color: var(--lys); }
.knap--roed:hover { background: var(--roed-knap-2); }
.knap--ramme { background: rgba(20, 18, 15, .25); color: var(--creme); box-shadow: inset 0 0 0 1.5px rgba(240, 236, 226, .55); }
.knap--ramme:hover { background: rgba(240, 236, 226, .07); box-shadow: inset 0 0 0 1.5px var(--creme); }
.ikon { flex: none; }
@media (max-width: 499px) {
  /* Smalle skærme: knapperne fylder bredden, og »Send forespørgsel« skal kunne stå på én linje ved 320 px */
  .knap--stor { padding: 6px 16px; letter-spacing: .04em; }
  .formular__send { justify-self: stretch; }
}
.ikon-pil { transition: translate .3s var(--ud); }
.knap:hover .ikon-pil, a:hover > .ikon-pil { translate: 4px 0; }

/* ---------- Skrift ---------- */
.titel-2 { --titel-2: clamp(32px, 10vw, 44px); margin-bottom: 28px; font: 400 var(--titel-2)/1 var(--display); letter-spacing: -.005em; text-transform: uppercase; text-wrap: balance; }
@media (min-width: 700px) { .titel-2 { --titel-2: 6vw; } }
/* Fra 1000 px står teksten i en halv kolonne ved siden af et foto: »UNDERVISNING« (8,63 em) skal kunne stå på én linje */
@media (min-width: 1000px) { .titel-2 { --titel-2: clamp(34px, 3.4vw, 58px); } }
@media (min-width: 1200px) { .titel-2 { --titel-2: clamp(40px, 3.9vw, 58px); } }
.titel-3 { font: 400 30px/1.1 var(--display); text-transform: uppercase; }
.broed { max-width: 34em; color: var(--creme-2); line-height: 1.6; }
.broed + .broed { margin-top: 16px; }
.broed--stor { color: var(--creme); font-size: clamp(20px, 1.6vw, 23px); line-height: 1.5; }
.broed strong { color: var(--creme); }
.etiket { font: 700 16px/1.3 var(--tekst); letter-spacing: .1em; text-transform: uppercase; color: var(--creme-3); }
.citat p, .citat--lille { font: 400 clamp(24px, 2.2vw, 32px)/1.32 var(--display); text-wrap: balance; }
.citat footer { display: flex; align-items: center; gap: 14px; margin-top: 24px; color: var(--creme-2); font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.citat footer::before { content: ""; flex: none; width: 32px; height: 2px; background: var(--roed); }

/* ---------- Toppen: gennemsigtig over heroen, fast bund, når siden rulles ---------- */
.top { position: sticky; z-index: 30; top: 0; display: flex; align-items: center; gap: 24px; height: var(--top-h); padding: 0 var(--g); transition: background-color .35s, box-shadow .35s; }
@media (min-width: 1000px) {
  /* Venstre kant flugter med indholdet; højre kant med faderen */
  .top { padding: 0 20px 0 max(var(--g), calc((100% - var(--ramme)) / 2 + var(--g))); }
}
.top--fast { background: rgba(20, 18, 15, .92); box-shadow: 0 1px 0 var(--streg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.top__navn { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; font: 400 20px/1 var(--display); letter-spacing: .02em; text-decoration: none; white-space: nowrap; }
.top__prik { margin: 0 .32em; color: var(--roed-tekst); }
.top__tlf { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px; justify-content: center; font-size: 17px; font-weight: 700; letter-spacing: .04em; text-decoration: none; white-space: nowrap; }
.top__tlf .ikon { color: var(--roed-tekst); }
.top__tlf:hover span { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 559px) {
  .top { gap: 8px; }
  .top__navn { font-size: 17px; }
  .top__tlf span { display: none; }
}
@media (min-width: 360px) and (max-width: 559px) { .top__tlf { display: none; } }
@media (max-width: 359px) { .top .knap { display: none; } }

/* ---------- Faderen ---------- */
/* En lodret kanalfader på en røget frontplade: en forsænket rille, der lyser rødt op til kasketten (så langt er
   man i historien), fin gradering med et mærke pr. kapitel og én kasket i creme med riller og rød midterstreg.
   Kasketten bærer det aktive kapitels navn. Skalaens navne vises, når faderen bruges: hover, fokus, træk og
   et øjeblik, når siden åbner på en stor skærm */
/* svh: højden følger ikke adresselinjen på mobil, så faderen står stille under et træk */
.fader { position: fixed; z-index: 20; right: 20px; top: 50%; width: 46px; height: min(56svh, 520px); translate: 0 -50%; opacity: .9; transition: opacity .3s; }
.fader:focus-within, .fader.traek, .fader.hilsen { opacity: 1; }
.fader__skala { position: absolute; top: 0; bottom: 0; right: 28px; margin: 0; padding: 0; list-style: none; }
.fader__maerke { position: absolute; right: 0; display: flex; align-items: center; translate: 0 -50%; }
.fader__maerke::after { content: ""; flex: none; width: 18px; height: 2px; margin-left: 10px; background: rgba(240, 236, 226, .78); scale: 1 .5; transition: background-color .3s, scale .3s; }
.fader__maerke.aktiv::after { scale: 1 1; background: var(--roed); }
.fader__maerke a { display: flex; align-items: center; min-height: 44px; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.fader__maerke a:focus-visible { outline: none; }
.fader__navn { padding: 5px 10px; border-radius: 3px; background: rgba(20, 18, 15, .88); box-shadow: 0 0 0 1px var(--streg-2); font: 700 16px/1.2 var(--tekst); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--creme); opacity: 0; translate: 8px 0; pointer-events: none; transition: opacity .25s, translate .4s var(--ud); }
.fader__maerke.aktiv .fader__navn { box-shadow: 0 0 0 1px var(--roed); }
.fader:focus-within .fader__navn, .fader.traek .fader__navn, .fader.hilsen .fader__navn { opacity: 1; translate: 0 0; pointer-events: auto; }
.fader__maerke a:focus-visible .fader__navn { box-shadow: 0 0 0 2px var(--creme); }
@media (hover: hover) {
  .fader:hover { opacity: 1; }
  .fader:hover .fader__navn { opacity: 1; translate: 0 0; pointer-events: auto; }
  .fader__maerke a:hover .fader__navn { background: var(--bund); box-shadow: 0 0 0 1px var(--creme); }
}
.fader__spor { position: absolute; inset: 0; touch-action: none; cursor: pointer; }
/* Frontpladen: røget og gennemsigtig, så faderen læses som én ting og skalaen kan ses over et foto */
.fader__spor::before { content: ""; position: absolute; inset: -34px -8px; border-radius: 12px; background: linear-gradient(180deg, rgba(36, 32, 28, .62), rgba(12, 11, 9, .62)); box-shadow: inset 0 0 0 1px rgba(240, 236, 226, .08), inset 0 1px 0 rgba(240, 236, 226, .08), 0 14px 32px rgba(0, 0, 0, .35); }
.fader__grad { position: absolute; left: 0; top: 0; width: 12px; height: 100%; overflow: visible; fill: none; stroke: rgba(240, 236, 226, .3); stroke-width: 1; }
/* Rillen er forsænket: mørk bund, skygge fra kanten foroven og en lys læbe forneden */
.fader__rille { position: absolute; left: 50%; top: -18px; bottom: -18px; width: 8px; margin-left: -4px; border-radius: 4px; background: #040303; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .95), inset 0 -1px 0 rgba(240, 236, 226, .06), 0 1px 0 rgba(240, 236, 226, .14), 0 -1px 0 rgba(0, 0, 0, .6); }
.fader__fyld { position: absolute; left: 3px; top: 18px; width: 2px; height: calc(100% - 36px); border-radius: 1px; background: var(--roed); transform-origin: 50% 0; transform: scaleY(0); }
/* Kasketten findes kun, når site.js flytter den */
.fader__kasket { display: none; position: absolute; left: 50%; top: 0; width: 44px; height: 26px; margin: -13px 0 0 -22px; border-radius: 4px; background: linear-gradient(180deg, #FBF9F3 0, #EEEAE0 8%, #E3DED2 46%, #CBC5B7 54%, #D9D3C6 92%, #C4BEB0 100%); box-shadow: 0 10px 18px -6px rgba(0, 0, 0, .8), 0 3px 5px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .4); cursor: grab; will-change: transform; }
.fader.koerer .fader__kasket { display: block; }
.fader.traek .fader__kasket { cursor: grabbing; }
.fader__kasket::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--roed); }
/* Grebets riller: to over og to under midterstregen, hver en mørk streg med en lys kant under */
.fader__greb { position: absolute; left: 8px; top: 4px; width: calc(100% - 16px); height: calc(100% - 8px); overflow: visible; fill: none; stroke-width: 1; stroke: rgba(0, 0, 0, .22); }
.fader__greb .fader__greb-lys { stroke: rgba(255, 255, 255, .7); }
/* Kapitlets navn rider på kasketten, i samme kolonne som skalaens navne; det skjules, når alle navne står fremme */
.fader__etiket { position: absolute; top: 50%; right: calc(100% + 11px); translate: 0 -50%; padding: 5px 10px; border-radius: 3px; background: rgba(20, 18, 15, .88); box-shadow: 0 0 0 1px var(--streg-2); color: var(--creme); font: 700 16px/1.2 var(--tekst); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: opacity .25s; }
.fader:focus-within .fader__etiket, .fader.traek .fader__etiket, .fader.hilsen .fader__etiket { opacity: 0; }
@media (hover: hover) { .fader:hover .fader__etiket { opacity: 0; } }

@media (max-width: 999px) {
  /* Telefon og tablet: faderen viser sig kun, mens siden ruller, og kan trækkes imens */
  .fader { right: 6px; width: 40px; height: 50svh; opacity: 0; pointer-events: none; transition: opacity .45s; }
  .fader.ruller, .fader.traek, .fader:focus-within { opacity: 1; pointer-events: auto; }
  .fader__skala { right: 24px; }
  .fader__grad { display: none; }
  .fader__maerke::after { width: 10px; margin-left: 6px; }
  .fader__spor::before { inset: -30px -5px; }
  .fader__kasket { width: 36px; height: 24px; margin: -12px 0 0 -18px; }
  .fader__greb { left: 7px; width: calc(100% - 14px); }
}

/* ---------- Kapitel 1: heroen ---------- */
/* Delt hero: Rasmus' nyeste foto (søen, stående 2:3) står i fuld højde til højre i sit eget format og toner ind
   fra venstre; titlen står nede til venstre på den mørke side. Er skærmen for smal til hele fotoet, beskæres det i
   sin tonede venstre kant, så det altid holder afstand til teksten (max-width nedenfor). Bunden toner også ned, så
   bordet og græsset glider over i den mørke bund. Tasken under bordet i fotoets nederste højre hjørne er tonet ned i
   selve udsnittet (billeder.py, TONET), for en maske her rammer ikke samme sted, når fotoet beskæres i venstre kant */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(640px, 100svh); margin-top: calc(-1 * var(--top-h)); padding: calc(var(--top-h) + 64px) 0 clamp(56px, 10vh, 112px); overflow: hidden; }
.hero__foto img { position: absolute; z-index: -2; top: 0; right: 0; width: auto; height: 100%; max-width: calc(100% - max(var(--g), (100% - var(--ramme)) / 2 + var(--g)) - 5.95 * clamp(56px, 7.6vw, 128px) - 64px); aspect-ratio: auto; object-fit: cover; object-position: 100% 50%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, #000 72%, transparent 90%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 30%), linear-gradient(180deg, #000 72%, transparent 90%); mask-composite: intersect; }
.hero::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background:
  linear-gradient(180deg, rgba(20, 18, 15, .75) 0, rgba(20, 18, 15, 0) 200px),
  radial-gradient(ellipse 220px 46% at 100% 50%, rgba(20, 18, 15, .78), rgba(20, 18, 15, 0)),
  radial-gradient(ellipse 80% 70% at 0% 100%, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .55) 50%, rgba(20, 18, 15, 0) 100%),
  linear-gradient(90deg, rgba(20, 18, 15, .88) 0%, rgba(20, 18, 15, .5) 36%, rgba(20, 18, 15, 0) 60%); }
.hero__titel { margin: 0 0 28px; font: 400 clamp(56px, 7.6vw, 128px)/.88 var(--display); letter-spacing: -.015em; text-transform: uppercase; }
.hero__linje { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero__linje > span { display: block; }
.hero__loefte { max-width: 30em; margin: 0 0 32px; color: var(--creme); font-size: clamp(19px, 1.45vw, 22px); line-height: 1.5; }
.hero__handling { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__tillid { display: flex; flex-wrap: wrap; gap: 10px 30px; max-width: 40em; margin: 34px 0 0; padding: 0; list-style: none; color: var(--creme-2); font-size: 16px; }
.hero__tillid li { position: relative; padding-left: 16px; }
.hero__tillid li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--roed); }
.hero__tillid strong { color: var(--creme); }
/* Side om side med fotoet: løftet og fakta er aldrig bredere end titlen (5,95 em af dens størrelse). Fotoet
   holder 64 px fra titlen, så der er mindst 48 px til alt i teksten, også knapperækken ved 1024 px */
@media (min-width: 700px) and (orientation: landscape), (min-width: 1100px) {
  .hero__loefte { max-width: min(30em, calc(5.95 * clamp(56px, 7.6vw, 128px))); }
  .hero__tillid { max-width: calc(5.95 * clamp(56px, 7.6vw, 128px)); }
}

/* Telefon og stående tablet: fotoet øverst i fuld bredde, teksten under */
@media (max-width: 699px), (orientation: portrait) and (max-width: 1099px) {
  .hero { display: block; min-height: 0; padding: 0 0 56px; }
  .hero::before { display: none; }
  .hero__foto { position: relative; }
  .hero__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 18, 15, .72) 0, rgba(20, 18, 15, 0) 140px); }
  .hero__foto img { position: static; z-index: auto; width: 100%; height: auto; max-width: 100%; aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); -webkit-mask-composite: source-over; mask-image: linear-gradient(180deg, #000 82%, transparent); mask-composite: add; }
  .hero__indhold { padding-top: 32px; }
  .hero__titel { font-size: clamp(40px, 14vw, 104px); }
}
@media (max-width: 499px) {
  .hero__foto img { aspect-ratio: 1 / 1; }
  .hero__handling { flex-direction: column; align-items: stretch; }
  .hero__tillid { flex-direction: column; }
}

@media (max-width: 359px) { .hero__foto img { aspect-ratio: 4 / 3; } }
/* Vandrette skærme mellem 1000 og 1200 px: fotoet er smallest her og beskåret i venstre kant. Skyggen går
   længere ind, så kanten falder roligt ned i bunden, og løftet står smallere */
@media (min-width: 1000px) and (max-width: 1199px) and (orientation: landscape) {
  .hero::before { background:
    linear-gradient(180deg, rgba(20, 18, 15, .75) 0, rgba(20, 18, 15, 0) 200px),
    radial-gradient(ellipse 220px 46% at 100% 50%, rgba(20, 18, 15, .78), rgba(20, 18, 15, 0)),
    radial-gradient(ellipse 90% 75% at 0% 100%, rgba(20, 18, 15, .94) 0%, rgba(20, 18, 15, .62) 55%, rgba(20, 18, 15, 0) 100%),
    linear-gradient(90deg, rgba(20, 18, 15, .92) 0%, rgba(20, 18, 15, .74) 44%, rgba(20, 18, 15, 0) 70%); }
  .hero__loefte { max-width: 24em; }
}

/* ---------- Kapitlerne ---------- */
.kapitel { position: relative; padding: clamp(64px, 5.6vw, 104px) 0; scroll-margin-top: var(--top-h); }
.kapitel__hoved { max-width: 46rem; margin-bottom: clamp(40px, 5vw, 64px); }
.foto { position: relative; overflow: hidden; border-radius: 2px; background: var(--bund-2); }
.foto img { width: 100%; }
@media (max-width: 699px) {
  /* Fotos går helt ud til kanten på telefonen */
  .foto { margin-inline: calc(-1 * var(--g)); border-radius: 0; }
}
@media (min-width: 1000px) {
  .rasmus__gitter, .fest__gitter, .undervisning__gitter, .book__gitter, .faq__gitter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
}

/* Kapitel 2: Rasmus. Fotoet bag pulten og hans egne ord ved siden af */
@media (max-width: 999px) { .rasmus__gitter { display: flex; flex-direction: column; gap: 40px; } }
@media (min-width: 1000px) {
  .rasmus__gitter { align-items: center; row-gap: clamp(56px, 6vw, 96px); }
  .rasmus__foto { grid-column: 1 / 8; grid-row: 1; }
  .rasmus__tekst { grid-column: 8 / 13; grid-row: 1; padding-left: clamp(16px, 2.4vw, 40px); }
  .rasmus__polaroid { grid-column: 2 / 6; grid-row: 2; }
  .rasmus__citat { grid-column: 7 / 12; grid-row: 2; }
}

/* Kapitel 3: fest. Båndet i fuld bredde, derefter ydelsen og forløbet */
.baand { position: relative; height: clamp(380px, 76vh, 820px); margin-bottom: clamp(56px, 6vw, 96px); overflow: hidden; background: var(--bund-2); }
.baand__foto img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.baand::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(20, 18, 15, .8) 0%, rgba(20, 18, 15, 0) 58%), linear-gradient(180deg, var(--bund) 0, rgba(20, 18, 15, 0) 96px); }
.baand__tekst { position: absolute; z-index: 1; left: 0; bottom: clamp(28px, 5vw, 72px); padding-inline: var(--g) var(--g-h); font: 400 clamp(32px, 10.6vw, 64px)/.9 var(--display); letter-spacing: -.015em; text-transform: uppercase; }
@media (min-width: 700px) { .baand__tekst { font-size: min(8.2vw, 150px); } }
@media (min-width: 1000px) { .baand__tekst { padding-left: max(var(--g), calc((100% - var(--ramme)) / 2 + var(--g))); } }
.baand__tekst span { display: block; }
.fest__ydelse .knap { margin-top: 8px; }
.pris { margin-top: 28px; color: var(--creme-2); font-size: 20px; }
.pris strong { margin: 0 .08em; font: 400 1.5em/1 var(--display); color: var(--creme); }
/* Hvad fra-prisen dækker (Rasmus 30-09), lige under beløbet, så ingen bliver overrasket over udstyret */
/* Noten er løbende tekst og står i brødtekstens størrelse (Rasmus 23-04: brødtekst mindst 18 px) */
.pris__note { max-width: 30em; margin-top: 10px; color: var(--creme-2); }
.anledninger { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 30em; margin: 32px 0 36px; padding: 0; list-style: none; color: var(--creme-2); font-size: 17px; }
.anledninger li { position: relative; padding-left: 15px; }
.anledninger li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--roed); }
.forloeb { margin-top: 88px; }
.forloeb__bro { max-width: 20em; margin-bottom: 56px; }
.forloeb .titel-3 { margin-bottom: 40px; }
.trin { position: relative; margin: 0; padding: 0 0 0 76px; list-style: none; view-timeline: --trin block; view-timeline-inset: 0% 30%; }
.trin::before, .trin::after { content: ""; position: absolute; left: 21px; top: 15px; bottom: 15px; width: 2px; background: var(--streg-2); }
.trin::after { background: var(--roed); transform-origin: 50% 0; }
.trin__punkt { position: relative; padding-bottom: 44px; }
.trin__punkt:last-child { padding-bottom: 0; }
.trin__nr { position: absolute; z-index: 1; left: -76px; top: 0; display: grid; place-items: center; width: 44px; height: 32px; background: var(--bund); color: var(--roed-tekst); font: 400 18px/1 var(--display); letter-spacing: .02em; }
.trin__navn { margin: 2px 0 8px; font: 400 24px/1.2 var(--display); text-transform: uppercase; }
.trin__tekst { max-width: 32em; color: var(--creme-2); font-size: 18px; line-height: 1.55; }
@media (max-width: 499px) {
  /* »Forespørgsel« skal kunne stå på én linje ved 320 px */
  .trin { padding-left: 60px; }
  .trin__nr { left: -60px; }
  .trin__navn { font-size: 21px; }
}
@media (min-width: 1000px) {
  .fest__gitter { align-items: start; }
  .fest__ydelse { grid-column: 1 / 6; }
  .forloeb { grid-column: 7 / 13; margin-top: 0; }
}
@media (min-width: 1000px) and (min-height: 720px) {
  /* Ydelsen bliver stående, mens forløbet ruller forbi */
  .fest__ydelse { position: sticky; top: calc(var(--top-h) + 56px); }
}

/* Kapitel 4: undervisning */
@media (max-width: 999px) { .undervisning__gitter { display: flex; flex-direction: column; gap: 48px; } }
.undervisning__tekst { container-type: inline-size; }
.undervisning__tekst .titel-2 { font-size: min(var(--titel-2), 9.4cqi); }
.undervisning__tekst .knap { margin-top: 36px; }
@media (min-width: 1000px) {
  .undervisning__gitter { align-items: center; }
  .undervisning__tekst { grid-column: 1 / 8; padding-right: 24px; }
  .undervisning__foto { grid-column: 8 / 13; }
}

/* Kapitel 5 og 6: musik og nørden, hver med et foto ved siden af overskriften (på skift venstre og højre) */
.musik__gitter { margin-bottom: clamp(48px, 5vw, 72px); }
.musik__gitter .kapitel__hoved { margin-bottom: 0; }
@media (max-width: 999px) { .musik__gitter { display: flex; flex-direction: column; gap: 40px; } }
@media (min-width: 1000px) {
  .musik__gitter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: center; }
  .musik__foto { grid-column: 1 / 7; grid-row: 1; }
  .musik__gitter .kapitel__hoved { grid-column: 8 / 13; grid-row: 1; }
}

/* Musiklisten */
.sporliste { margin: 0; padding: 0; list-style: none; box-shadow: 0 -1px 0 var(--streg-2); }
.spor__link { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr) 12rem; align-items: center; gap: 6px 32px; padding: 24px 0; box-shadow: inset 0 -1px 0 var(--streg-2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.spor__navn { font: 400 clamp(20px, 1.9vw, 28px)/1.15 var(--display); text-transform: uppercase; transition: translate .4s var(--ud), color .25s; }
.spor__under { color: var(--creme-2); font-size: 16px; line-height: 1.45; letter-spacing: .03em; }
.spor__aabn { display: inline-flex; align-items: center; justify-self: end; gap: 8px; min-height: 44px; color: var(--roed-tekst); font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.spor__aabn .ikon-ud { transition: translate .3s var(--ud); }
.spor__link:hover .spor__navn { translate: 10px 0; }
.spor__link:hover .ikon-ud, .repo__link:hover .ikon-ud, .noerd__mere a:hover .ikon-ud { translate: 3px -3px; }
@media (max-width: 999px) {
  .spor__link { grid-template-columns: minmax(0, 1fr); padding: 22px 0 14px; }
  .spor__aabn { justify-self: start; }
}

/* Kapitel 6: nørden som teaser. Tre fliser med reposenes egne billeder, navnet i mono, og et link videre */
.repos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(20px, 2.4vw, 36px); margin: 0; padding: 0; list-style: none; }
.repo__link { display: flex; flex-direction: column; gap: 14px; height: 100%; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.repo__billede { position: relative; overflow: hidden; border-radius: 2px; background: var(--bund-2); box-shadow: inset 0 0 0 1px var(--streg); }
.repo__billede img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; transition: scale .6s var(--ud); }
.repo__link:hover .repo__billede img { scale: 1.035; }
.repo__hoved { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.repo__navn { font: 500 clamp(22px, 1.8vw, 26px)/1.2 var(--mono); letter-spacing: -.01em; color: var(--creme); }
.repo__sprog { color: var(--creme-3); font-size: 16px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.repo__hoved .ikon-ud { align-self: center; margin-left: auto; color: var(--roed-tekst); transition: translate .3s var(--ud); }
.repo__tekst { color: var(--creme-2); font-size: 18px; line-height: 1.55; }
.noerd__mere { margin-top: clamp(40px, 4vw, 56px); }
.noerd__mere .ikon-ud { transition: translate .3s var(--ud); }
@media (max-width: 999px) { .repos { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Kapitel 7: book. Afsenderen til venstre, formularen til højre */
@media (max-width: 999px) { .book__gitter { display: flex; flex-direction: column; gap: 56px; } }
.book__portraet { width: 160px; aspect-ratio: 1; margin-bottom: 32px; overflow: hidden; border-radius: 50%; box-shadow: 0 0 0 1px var(--streg-2); }
.book__portraet img { width: 100%; height: 100%; object-fit: cover; }
.book__direkte { display: grid; justify-items: start; gap: 2px; margin-top: 36px; }
.book__linje { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 20px; font-weight: 700; text-decoration: none; }
.book__linje .ikon { color: var(--roed-tekst); }
.book__linje:hover span { text-decoration: underline; text-underline-offset: 4px; }
.book__omraade { margin-top: 8px; color: var(--creme-2); font-size: 17px; }
@media (min-width: 1000px) {
  .book__gitter { align-items: start; }
  .book__afsender { grid-column: 1 / 6; }
  .formular { grid-column: 7 / 13; }
}
@media (min-width: 1000px) and (min-height: 720px) { .book__afsender { position: sticky; top: calc(var(--top-h) + 56px); } }

/* Formularen */
.formular { position: relative; }
.formular__felter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.felt--anledning, .felt--besked, .oplysning, .felt--samtykke, .formular__opsummering, .formular__send { grid-column: 1 / -1; }
@media (max-width: 559px) { .formular__felter { grid-template-columns: minmax(0, 1fr); } }
.honning { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.felt__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; letter-spacing: .02em; }
.felt__krav { color: var(--roed-tekst); }
.felt__input { display: block; width: 100%; min-height: 54px; padding: 13px 15px; border: 1px solid rgba(240, 236, 226, .26); border-radius: 3px; background: var(--bund-2); color: var(--creme); font: 400 18px/1.4 var(--tekst); -webkit-appearance: none; appearance: none; transition: border-color .2s; }
textarea.felt__input { min-height: 136px; resize: vertical; }
.felt__input::placeholder { color: var(--creme-3); opacity: 1; }
.felt__input:hover { border-color: rgba(240, 236, 226, .44); }
.felt__input:focus-visible { outline: 2px solid var(--creme); outline-offset: 2px; border-color: var(--creme); }
.felt.har-fejl .felt__input { border-color: var(--roed-tekst); }
.felt__input--dato { color-scheme: dark; }
.felt__valg { position: relative; }
.felt__valg::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border: solid var(--creme-2); border-width: 0 2px 2px 0; rotate: 45deg; pointer-events: none; }
.felt__valg select { padding-right: 48px; cursor: pointer; }
.felt__valg option { background: var(--bund-2); color: var(--creme); }
.felt__fejl { display: flex; align-items: flex-start; gap: 8px; margin-top: 8px; color: var(--roed-tekst); font-size: 16px; line-height: 1.4; }
.felt__fejl[hidden] { display: none; }
.ikon-fejl { flex: none; margin-top: 1px; }
.oplysning { color: var(--creme-2); font-size: 16px; line-height: 1.55; }
.oplysning a, .sp__a a { color: var(--creme); text-underline-offset: 3px; }
.samtykke { position: relative; display: flex; align-items: flex-start; gap: 14px; color: var(--creme); font-size: 16px; line-height: 1.5; cursor: pointer; }
.samtykke input { position: absolute; z-index: 1; left: 0; top: 0; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.samtykke__boks { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border: 1.5px solid rgba(240, 236, 226, .55); border-radius: 3px; background: var(--bund-2); color: var(--creme); transition: background-color .2s, border-color .2s; }
.samtykke__boks .ikon-tjek { opacity: 0; transition: opacity .15s; }
.samtykke input:checked + .samtykke__boks { border-color: var(--roed-knap); background: var(--roed-knap); }
.samtykke input:checked + .samtykke__boks .ikon-tjek { opacity: 1; }
.samtykke input:focus-visible + .samtykke__boks { outline: 2px solid var(--creme); outline-offset: 3px; }
.har-fejl .samtykke__boks { border-color: var(--roed-tekst); }
.formular__opsummering { padding: 14px 18px; border-radius: 3px; background: rgba(196, 70, 60, .12); box-shadow: inset 0 0 0 1px rgba(220, 94, 83, .55); color: var(--creme); font-size: 16px; font-weight: 600; }
.formular__opsummering[hidden] { display: none; }
.formular__send { justify-self: start; }
.formular.sendt .formular__felter { display: none; }
.formular__tak { padding: 32px; border-radius: 3px; background: var(--bund-2); box-shadow: inset 0 0 0 1px var(--streg-2); }
.formular__tak .titel-3 { margin-bottom: 12px; }

/* Ofte stillede spørgsmål */
.faq { padding-top: 0; scroll-margin-top: calc(var(--top-h) + 24px); }
.faq__liste { box-shadow: 0 -1px 0 var(--streg-2); }
@media (min-width: 1000px) {
  .faq__titel { grid-column: 1 / 6; font-size: clamp(34px, 3.4vw, 50px); }
  .faq__liste { grid-column: 6 / 13; }
}
.sp { box-shadow: inset 0 -1px 0 var(--streg-2); }
.sp__q { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; padding: 16px 0; font-size: 19px; font-weight: 700; line-height: 1.4; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp__q::-webkit-details-marker { display: none; }
.sp__q .ikon-plus { color: var(--roed-tekst); transition: rotate .3s var(--ud); }
.sp[open] .ikon-plus { rotate: 45deg; }
.sp__a { max-width: 44em; padding: 0 48px 26px 0; color: var(--creme-2); }

/* ---------- Sidefoden ---------- */
.bund { padding: 72px 0 36px; background: var(--bund-3); box-shadow: inset 0 1px 0 var(--streg); }
.bund__gitter { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.bund__navn { margin-bottom: 14px; font: 400 22px/1 var(--display); letter-spacing: .02em; white-space: nowrap; }
.bund__firma p + p { max-width: 22em; color: var(--creme-2); font-size: 16px; }
.bund__kolonne ul { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.bund__kolonne li { color: var(--creme-2); font-size: 16px; line-height: 1.5; }
.bund__kolonne li:not(:has(a)) { padding: 10px 0; }
.bund__kolonne a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--creme); text-decoration: none; }
.bund__kolonne a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bund__skilt { margin-top: 56px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--streg); color: var(--creme-3); font-size: 16px; }
@media (min-width: 1000px) and (max-width: 1199px) { .bund__gitter { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bund__firma { grid-column: 1 / -1; } }
@media (max-width: 999px) { .bund__gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bund__firma { grid-column: 1 / -1; } }
@media (max-width: 399px) { .bund__gitter { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Bevægelse (et sundt mål: intet kører i det uendelige) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Heroen: fotoet falder på plads, titlen rejser sig, resten følger; faderen tones ind */
  .hero__foto img { transform-origin: 100% 100%; animation: hero-foto 2.2s var(--ud) both; }
  .hero__linje > span { animation: linje-op 1.2s var(--ud) .1s both; }
  .hero__linje + .hero__linje > span { animation-delay: .2s; }
  .hero__loefte { animation: frem 1s var(--ud) .4s both; }
  .hero__handling { animation: frem 1s var(--ud) .52s both; }
  .hero__tillid { animation: frem 1s var(--ud) .64s both; }
  .fader { animation: toning 1.2s var(--ud) .7s backwards; }

  /* Afsløringer: site.js sætter .vist én gang; intet skjules, før scriptet kører (.klar) */
  .klar [data-afsloer] { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ud), translate 1.1s var(--ud); }
  .klar [data-afsloer].vist { opacity: 1; translate: none; }
  .klar .foto[data-afsloer] { opacity: 1; translate: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--ud); }
  .klar .foto[data-afsloer].vist { clip-path: inset(0); }

}
@keyframes hero-foto { from { scale: 1.07; opacity: .35; } }
@keyframes linje-op { from { translate: 0 108%; } }
@keyframes frem { from { opacity: 0; translate: 0 24px; } }
@keyframes toning { from { opacity: 0; } }

/* Scroll-drevet: fotos uden mærker glider svagt, båndets tekst driver, og forløbets røde linje tegnes, mens
   listen passerer en linje 70 % nede på skærmen. Browsere uden understøttelse viser det hele stille */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .foto--glid img { scale: 1.1; animation: glid linear both; animation-timeline: view(block 0px 0px); animation-range: cover; }
    .baand__foto img { top: -9%; height: 118%; }
    .baand__foto img { animation: glid linear both; animation-timeline: view(block 0px 0px); animation-range: cover; }
    .baand__tekst span { animation: drift linear both; animation-timeline: view(block 0px 0px); animation-range: cover; }
    .trin::after { animation: tegn linear both; animation-timeline: --trin; animation-range: entry-crossing 0% entry-crossing 100%; }
    .trin__nr { animation: taend linear both; animation-timeline: view(block 0% 30%); animation-range: entry-crossing 0% entry-crossing 40%; }
  }
}
@keyframes glid { from { translate: 0 -4%; } to { translate: 0 4%; } }
@keyframes drift { from { translate: 4% 0; } to { translate: -3% 0; } }
@keyframes tegn { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes taend { from { color: var(--creme-3); } to { color: var(--roed-tekst); } }

/* Reduceret bevægelse: alt står stille og synligt (også overgange, så intet toner) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Genereret af build.mjs: faderens mærker og reponavnenes længde */
.fader__maerke:nth-child(1){top:0.0000%}
.fader__maerke:nth-child(2){top:16.6667%}
.fader__maerke:nth-child(3){top:33.3333%}
.fader__maerke:nth-child(4){top:50.0000%}
.fader__maerke:nth-child(5){top:66.6667%}
.fader__maerke:nth-child(6){top:83.3333%}
.fader__maerke:nth-child(7){top:100.0000%}
@media (max-width: 699px), (orientation: portrait) and (max-width: 1099px) { .hero__foto img{object-position:50% 45%} }

/* ---------- Tilføjet 16/10-2026: logopakken i top og bund, og formularens sendetilstand ---------- */
.top__navn img { height: 38px; width: auto; }
@media (max-width: 559px) { .top__navn img { height: 32px; } }
.bund__navn img { height: 96px; width: auto; }
.formular__send[aria-busy="true"] { opacity: .6; cursor: progress; }