@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-400-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-400-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-500-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-normal-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;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/inter-normal-400-600-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:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/inter-normal-400-600-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:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('/assets/fonts/newsreader-italic-400-500-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:'Newsreader';font-style:italic;font-weight:400 500;font-display:swap;src:url('/assets/fonts/newsreader-italic-400-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;}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-normal-400-600-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:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/newsreader-normal-400-600-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;}
/* ============================================================
   LeadershipAnd.AI — det delte lag
   Brandretning 04, Manuskriptet.
   Alt visuelt styres herfra. Sidetyperne indeholder kun indhold.
   ============================================================ */

:root{
  /* Farve. Messing er eneste accent og bruges aldrig som flade. */
  --brass:#8A6D3B; --brass-deep:#6B5329; --brass-soft:#F2EAD8;
  --ink:#191817; --ink-deep:#12100E; --ink-soft:#57534E; --ink-faint:#736C63; --brass-light:#C9A66B;
  --paper:#FCFBF7; --paper-2:#F2EFE6; --surface:#FFFFFF;
  --line:#DDD8CC; --line-strong:#C7C0B0;

  /* Skrift. Serif til tanken, sans til betjeningen, mono til numre. */
  --serif:'Newsreader',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;

  --t-h1:clamp(1.9rem,4.1vw,2.85rem);
  --t-h2:clamp(1.5rem,3.2vw,2.1rem);
  --t-h3:1.35rem;
  --t-lead:1.0625rem; --t-small:.875rem; --t-label:.75rem;

  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --radius:4px; --maxw:1080px; --measure:66ch; --dur:200ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);padding:14px 22px;z-index:100;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em}
.skip:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--s3)}
.label{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;font-weight:500;color:var(--brass);margin:0 0 var(--s2);display:flex;align-items:center;gap:12px}
.label::after{content:"";flex:1;height:1px;background:var(--line);max-width:120px}

/* ── Header ────────────────────────────────────────────────── */
header{position:sticky;top:0;z-index:50;background:rgba(252,251,247,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;min-height:76px;gap:var(--s3)}
/* Alle tre var under 44 px hoeje. Padding i stedet for hoejde, saa de
   bevarer deres plads i linjen, og en negativ margen saa layoutet ikke
   flytter sig. */
.brand{font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ink);text-decoration:none;
       display:inline-flex;align-items:center;min-height:44px}
.brand span{color:var(--brass)}
.nav nav > ul{display:none;list-style:none;margin:0;padding:0;gap:var(--s3)}
.nav nav > ul > li > a{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-soft);text-decoration:none;padding:14px 4px;display:inline-block;border-bottom:1px solid transparent;transition:color var(--dur),border-color var(--dur)}
.nav nav > ul > li > a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.nav nav > ul > li > a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--brass)}

/* ── Foldemenu under et menupunkt ──────────────────────────────
   Acceleratoren har tre niveauer, hvoraf de to ligger paa egne sider.
   Uden det her var den eneste vej derhen et lille link nede i et kort,
   og siderne var i praksis ikke til at finde.
   Paa desktop aabner den paa hover OG paa fokus, saa den ogsaa kan naas
   med tastatur. Knappen findes, fordi hover ikke er en indgang paa en
   touchskaerm, og fordi aria-expanded skal have noget at haenge paa. */
.has-sub{position:relative;display:flex;align-items:center;gap:2px}
.sub-toggle{display:inline-flex;align-items:center;justify-content:center;
            width:32px;min-height:44px;padding:0;background:none;border:0;
            color:var(--ink-faint);cursor:pointer}
.sub-toggle:hover{color:var(--ink)}
.sub-toggle svg{transition:transform var(--dur)}
.sub-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.sub{list-style:none;margin:0;padding:0}
.sub a{display:flex;flex-direction:column;gap:2px;text-decoration:none}
.sub .sn{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--brass-deep)}
.sub .st{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}

@media(min-width:940px){
  .sub{position:absolute;top:100%;left:-14px;z-index:60;min-width:240px;
       background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
       box-shadow:0 14px 34px -16px rgba(18,16,14,.35);padding:6px 0;
       opacity:0;visibility:hidden;transform:translateY(-6px);
       transition:opacity var(--dur),transform var(--dur),visibility var(--dur)}
  /* Ingen :focus-within her. Med den blev klappen ved med at staa aaben,
     naar Escape gav fokus tilbage til knappen, saa aria-expanded sagde
     "false", mens menuen stod synlig. Tastaturbrugere aabner med knappen,
     som er naeste tabstop efter linket, og JS lukker igen naar fokus
     forlader punktet. */
  .has-sub:hover > .sub,
  .has-sub.open > .sub{opacity:1;visibility:visible;transform:none}
  .sub li + li{border-top:1px solid var(--line)}
  .sub a{padding:12px 18px;min-height:44px;justify-content:center;
         border-left:2px solid transparent;transition:background var(--dur)}
  .sub a:hover{background:var(--paper-2)}
  .sub a[aria-current="page"]{border-left-color:var(--brass);background:var(--paper-2)}
  /* Punktet beholder sin messingstreg, ogsaa naar man staar paa en af
     underssiderne. Ellers ser menuen ud, som om man er et helt andet sted. */
  .nav nav .has-sub.aktiv > a{color:var(--ink);border-bottom-color:var(--brass)}
}
@media(max-width:939px){
  .has-sub{flex-wrap:wrap}
  .has-sub > a{flex:1 1 auto}
  .sub{display:none;width:100%;border-left:2px solid var(--line);margin-bottom:var(--s2)}
  .has-sub.open > .sub{display:block}
  .sub a{padding:12px 0 12px 14px;min-height:48px;justify-content:center}
  .sub a[aria-current="page"] .st{color:var(--brass-deep)}
}

.nav-right{display:flex;align-items:center;gap:var(--s2)}
.lang{font-family:var(--mono);font-size:var(--t-label);color:var(--ink-faint);letter-spacing:.08em;
       display:inline-flex;align-items:center;gap:2px;margin:-12px 0}
.lang strong{color:var(--ink);font-weight:500}
.lang a{color:var(--ink-faint);text-decoration:none;padding:12px 10px;min-width:44px;min-height:44px;
        display:inline-flex;align-items:center;justify-content:center;border-bottom:1px solid transparent}
.lang a:hover{color:var(--ink);border-bottom-color:var(--brass)}

/* Mobilmenu. Knappen har 48px hoejde og synlig etiket for skaermlaesere. */
.nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:auto;background:none;border:1px solid var(--line-strong);border-radius:var(--radius);cursor:pointer;color:var(--ink)}
.nav-toggle-bars{display:block;width:18px}
.nav-toggle-bars i{display:block;height:1.5px;background:currentColor;margin:4px 0;transition:transform var(--dur),opacity var(--dur)}
.nav-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media(max-width:939px){
  .nav{flex-wrap:wrap}
  .nav nav{order:3;width:100%}
  .nav nav > ul{display:none;flex-direction:column;gap:0;border-top:1px solid var(--line);padding-bottom:var(--s2)}
  .nav nav > ul > li > a{display:block;padding:16px 0;border-bottom:1px solid var(--line);border-left:2px solid transparent}
  .nav nav > ul > li > a[aria-current="page"]{border-left-color:var(--brass);padding-left:12px}
  .nav.open nav > ul{display:flex}
  /* Sprogvaelger og CTA hoerer med i klappen. Laa de udenfor, stod de paa
     en raekke for sig selv, og headeren blev to raekker hoej, foer man
     havde set en eneste linje af siden. display:none skal staa HER og ikke
     paa .nav-cta alene, for .btn kommer senere i filen med samme
     specificitet og vinder ellers paa raekkefoelgen. */
  .nav-right{order:4;width:100%;display:none;flex-wrap:wrap;align-items:center;
             gap:var(--s2);padding:0 0 var(--s3)}
  .nav.open .nav-right{display:flex}
  .nav .nav-cta{display:inline-flex;flex:1 1 100%;justify-content:center}

  /* Uden JavaScript kan klappen ikke aabnes, og saa var logoet det eneste
     synlige i sidehovedet. Derfor staar menuen aaben fra start, og
     knappen skjules. En menu, der altid er foldet ud, er ringere end en
     klap, men uendeligt meget bedre end ingen navigation. */
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .nav nav > ul{display:flex}
  html:not(.js) .nav-right{display:flex}
}
@media(min-width:940px){
  .nav nav > ul{display:flex}
  .nav-toggle{display:none}
}

/* ── Knapper. Minimum 48px hoejde, aldrig kun ikon. ────────── */
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:13px 22px;border-radius:var(--radius);
     font-family:var(--mono);font-size:.8125rem;letter-spacing:.06em;font-weight:500;text-decoration:none;
     border:1px solid transparent;cursor:pointer;transition:background var(--dur),border-color var(--dur),transform var(--dur)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:var(--brass-deep);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-light{background:var(--paper);color:var(--ink-deep)}
.btn-light:hover{background:var(--brass);color:var(--paper);transform:translateY(-1px)}
/* Knappen er slaaet fra, indtil bookinglinket er sat. aria-disabled alene
   er ikke nok: linket bliver i tab-raekkefoelgen og kan stadig aktiveres,
   og et klik hopper til toppen. Derfor ogsaa tabindex="-1" i skabelonen
   og pointer-events her. */
.btn[aria-disabled="true"]{opacity:.75;cursor:not-allowed;pointer-events:none}
.btn[aria-disabled="true"]:hover{transform:none}

/* ── Typografi ─────────────────────────────────────────────── */
section{padding:var(--s6) 0}
@media(min-width:800px){section{padding:var(--s7) 0}}
/* Maalet paa overskrifterne var 26ch. Det er en pæn tommelfingerregel,
   men det passede ikke til DENNE tekst: naesten hver eneste overskrift
   paa sitet faldt ned paa to linjer, hvor den anden kun bar et ord
   eller to. 44ch samler dem paa én linje paa alt over 600 px.
   text-wrap:balance tager resten: skal en overskrift alligevel bryde,
   fx paa en telefon, fordeles ordene jaevnt over linjerne i stedet for
   at efterlade en enke. Browsere uden balance falder tilbage til
   almindeligt ombrud, og saa ser det ud som foer. */
h1{font-family:var(--serif);font-weight:500;font-size:var(--t-h1);line-height:1.18;margin:0 0 var(--s3);
   max-width:30ch;text-wrap:balance}
h1 em{font-style:italic;color:var(--brass)}
h2{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.25;margin:0 0 var(--s2);
   max-width:44ch;text-wrap:balance}
h2 em{font-style:italic;color:var(--brass)}
h3{font-family:var(--serif);font-weight:500;font-size:var(--t-h3);margin:0 0 6px}
.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:var(--measure);margin:0 0 var(--s4)}
.sec-intro{color:var(--ink-soft);max-width:var(--measure);margin:0 0 var(--s5)}
.prose p{color:var(--ink-soft);max-width:var(--measure);margin:0 0 var(--s2)}

/* ── Udkast-bånd. Vises kun paa sprog uden godkendt tekst. ─── */
.draft{background:var(--brass-soft);border-bottom:1px solid var(--line-strong);color:var(--brass-deep);
       font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;padding:10px 0;text-align:center}

/* ── Hero, forside ─────────────────────────────────────────── */
/* Guilloche. Den graverede rosette fra pengesedler og aktiebreve,
   tegnet som 36 roterede ellipser i ren SVG. Ingen billedfil, saa den
   er skarp i enhver oploesning og koster ingen ekstra hentning.
   Blaekdaekning 5 %. Derfor bruger etiketten --brass-deep i heroen:
   messing paa 12 px ligger paa 4,68:1 mod rent papir, og 5 % moenster
   ville skubbe den til 4,2:1, altsaa under kravet paa 4,5:1.
   Rosetten er placeret ude i hoejre side, hvor teksten aldrig naar hen. */
.hero{padding-top:var(--s7);position:relative;isolation:isolate;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22400%22%20height%3D%22400%22%20fill%3D%22none%22%20stroke%3D%22%23191817%22%20stroke-width%3D%220.6%22%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%280%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%285%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2810%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2815%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2820%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2825%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2830%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2835%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2840%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2845%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2850%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2855%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2860%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2865%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2870%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2875%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2880%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2885%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2890%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%2895%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28100%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28105%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28110%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28115%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28120%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28125%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28130%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28135%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28140%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28145%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28150%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28155%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28160%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28165%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28170%20200%20200%29%22%2F%3E%3Cellipse%20cx%3D%22200%22%20cy%3D%22200%22%20rx%3D%22185%22%20ry%3D%2272%22%20transform%3D%22rotate%28175%20200%20200%29%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:right -180px center;
  background-size:760px 760px;
}
.hero > .wrap{position:relative;z-index:1}
.hero .label{color:var(--brass-deep)}
@media(min-width:1400px){.hero::before{background-position:right -80px center;background-size:840px 840px}}
/* Paa telefon er der ingen tom hoejre side at laegge rosetten i.
   Derfor skubbes den ud, saa kun buen oeverst til hoejre er tilbage,
   og teksten staar paa rent papir. */
@media(max-width:899px){.hero::before{background-position:right -430px top -300px;background-size:600px 600px;opacity:.05}}
/* Slaa moenstret fra for dem der beder om hoej kontrast. */
@media (prefers-contrast:more){.hero::before{display:none}}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.hero-meta{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);font-size:var(--t-small);line-height:1.55;color:var(--ink-soft);max-width:var(--measure)}

/* ── Hero, undersider ──────────────────────────────────────────
   Undersidernes hero staar paa den moerke flade. Forsiden goer det
   ikke: dér er heroen papir med guillochen, saa forsiden bliver ved
   med at vaere den eneste side, der aabner lyst.
   Alle vaerdier herunder er maalt mod #12100E:
   #8E877D 5,3:1 · #A8A199 7,4:1 · brass-light 8,3:1 · papir 18,3:1.
   Kanten paa den sekundaere knap er ink-faint, 3,67:1, altsaa over
   kravet paa 3:1 til en komponentkant. */
.page-hero{background:var(--ink-deep);color:var(--paper);
           padding-top:var(--s6);padding-bottom:var(--s6);border-bottom:0}
.page-hero h1{color:var(--paper)}
.page-hero h1 em{color:var(--brass-light)}
.page-hero .label{color:var(--brass-light)}
.page-hero .label::after{background:#3A342C}
.page-hero .lead{color:#A8A199}
/* Messingknappen forsvinder paa moerk bund, fordi den selv er naesten
   sort. Byttet om: lys flade, moerk tekst. */
.page-hero .btn-primary{background:var(--paper);color:var(--ink-deep)}
.page-hero .btn-primary:hover{background:var(--brass);color:var(--paper)}
.page-hero .btn-secondary{color:var(--paper);border-color:var(--ink-faint)}
.page-hero .btn-secondary:hover{border-color:var(--paper)}

.crumbs{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-faint);
        margin:-12px 0 calc(var(--s3) - 12px);display:flex;align-items:center;flex-wrap:wrap}
.crumbs a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent;
          display:inline-flex;align-items:center;justify-content:center;
          min-height:44px;min-width:44px;padding:0 2px}
.crumbs a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.crumbs span{margin:0 8px}
.page-hero .crumbs,.page-hero .crumbs a{color:#8E877D}
.page-hero .crumbs a:hover{color:var(--paper);border-bottom-color:var(--brass-light)}

/* ── Moerk sektion ─────────────────────────────────────────── */
/* --brass giver kun 3,9:1 paa ink-deep, og etiketten er 12 px. --brass-light
   giver 8,3. Maalt, ikke skoennet. */
.dark{background:var(--ink-deep);color:var(--paper)}
.dark .label{color:var(--brass-light)}
.dark .label::after{background:#3A342C}
.dark h2,.dark h3{color:var(--paper)}
.dark p{color:#A8A199}
.dark .sec-intro{color:#A8A199}

.q-grid{display:grid;gap:var(--s5);margin-top:var(--s5)}
@media(min-width:820px){.q-grid{grid-template-columns:1fr 1fr}}
.q{border-left:2px solid var(--brass);padding-left:var(--s3)}
/* Standardfarven er MOERK, saa blokken kan staa paa papir. Foer stod den lys
   som default, fordi den kun blev brugt i .dark, og en q-grid paa lys bund
   blev derfor usynlig (fanget paa acceleratorsiden 17/8). Lyse farver hoerer
   til under .dark og staar nedenfor. */
.q p{font-family:var(--serif);font-style:italic;font-size:1.35rem;line-height:1.4;margin:0;color:var(--ink)}
.q small{display:block;margin-top:12px;font-family:var(--sans);font-size:var(--t-small);color:var(--ink-soft)}
.dark .q p{color:var(--paper)}
.dark .q small{color:#A8A199}
/* En formular paa moerk bund. Etiketter og noter arver ellers de lyse
   graatoner fra papirbaggrunden og lander omkring 2:1. #A8A199 giver 7,5
   paa ink-deep, samme tone som broedteksten i sektionen. */
.dark .src{color:#A8A199}
.dark form.lead .flabel{color:#A8A199}
.dark .consent label{color:#A8A199}

/* ── Niveauer ──────────────────────────────────────────────── */
.levels{display:grid;gap:var(--s3)}
@media(min-width:900px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);position:relative;transition:border-color var(--dur),transform var(--dur)}
.level:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.level .n{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--brass);margin:0 0 var(--s3);font-weight:500}
.level .who{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-faint);margin:0 0 var(--s2)}
.level p{margin:0;color:var(--ink-soft);font-size:.9688rem}
.level.flagship{border-top:2px solid var(--brass)}
/* Maerkatet ligger oven paa fotoet, ikke paa kortets hvide bund. Med en
   gennemsigtig bund laa messing paa messingfarvet papir og forsvandt.
   Min revision fangede det ikke, fordi den maalte mod naermeste
   DOM-forfader med en farve, og det var kortet, ikke billedet.
   Nu en solid moerk plade: brass-light paa ink-deep er 8,3:1 uanset,
   hvad der ligger under. */
.tag{position:absolute;top:var(--s3);right:var(--s3);z-index:2;
     font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;
     color:var(--brass-light);background:var(--ink-deep);border:1px solid transparent;
     padding:5px 9px;border-radius:2px}

/* Hele kortet er klikbart. Linket er stadig ET link, saa en skaermlaeser
   hoerer "SE NIVEAU 02" og ikke hele kortets tekst. Fladen kommer fra et
   pseudoelement, der straekker sig ud over kortet. */
.level .more::after{content:"";position:absolute;inset:0;z-index:1}
.level:hover{border-color:var(--brass);transform:translateY(-2px)}
.level:has(.more:focus-visible){outline:3px solid var(--brass);outline-offset:3px}
.level .more{margin-top:auto;padding-top:var(--s3)}
.level:has(.more){display:flex;flex-direction:column}

/* Samme grund som i .check: teksten skal kunne indeholde links. */
.note{position:relative;margin-top:var(--s4);padding-left:26px;font-size:var(--t-small);
      color:var(--ink-faint);max-width:var(--measure)}
.note svg{position:absolute;left:0;top:3px}
.note a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass)}
.note a:hover{color:var(--brass-deep)}
.check a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass)}
.check a:hover{color:var(--brass-deep)}

/* ── Niveau-navigator ──────────────────────────────────────────
   Staar under heroen paa de to niveausider. Den loeser et konkret
   problem: en underside til niveau 02 fortaeller ikke af sig selv, at
   der findes et 01 og et 03, og broedkrummen viser kun vejen tilbage,
   ikke vejen til siden. Det aktuelle niveau er et span, saa der ikke
   er et link til den side, man staar paa. */
.niv-nav{background:var(--paper-2);border-bottom:1px solid var(--line)}
.niv-nav ol{list-style:none;margin:0 auto;padding:0;max-width:var(--maxw);display:grid}
@media(min-width:760px){.niv-nav ol{grid-template-columns:repeat(3,1fr)}}
.niv-nav li{border-top:1px solid var(--line)}
.niv-nav li:first-child{border-top:0}
@media(min-width:760px){
  .niv-nav li{border-top:0;border-left:1px solid var(--line)}
  .niv-nav li:first-child{border-left:0}
}
.niv-nav a,.niv-nav > ol > li > span{display:block;padding:var(--s3);text-decoration:none;min-height:44px}
.niv-nav a{color:var(--ink-soft);transition:background var(--dur),color var(--dur)}
.niv-nav a:hover{background:var(--surface);color:var(--ink)}
.niv-nav .n{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;
            color:var(--brass-deep);font-weight:500;margin-bottom:6px}
.niv-nav .t{display:block;font-family:var(--serif);font-size:1.05rem;line-height:1.3;color:inherit}
.niv-nav [aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:inset 3px 0 0 var(--brass)}

/* Statusmarkoer. Bruges hvor noget endnu ikke er aabent, saa datoen
   staar foer overskriften og ikke som en fodnote nedenunder. */
.status{display:inline-flex;align-items:center;gap:9px;margin:0 0 var(--s3);
        font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;font-weight:500;
        color:var(--brass-deep);border:1px solid var(--brass);border-radius:2px;padding:7px 11px}
.status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass);flex:none}
/* I heroen staar den paa moerk bund. brass-deep giver 1,8:1 dér. */
.page-hero .status{color:var(--brass-light);border-color:var(--brass)}
.page-hero .status::before{background:var(--brass-light)}

/* ── Forloeb, trin for trin ────────────────────────────────── */
.steps{list-style:none;margin:var(--s5) 0 0;padding:0;counter-reset:step;border-top:1px solid var(--line)}
/* Hver anden session har en tone, saa oejet kan se, hvor en session
   slutter og den naeste begynder, uden at taelle streger. Den negative
   margen traekker tonen ud til spaltens kant, saa den ser tilsigtet ud
   og ikke som et uheld i en tabel. */
.steps li{display:grid;gap:var(--s2) var(--s4);padding:var(--s4) var(--s3);
          margin:0 calc(var(--s3) * -1);border-bottom:1px solid var(--line);border-radius:2px}
.steps li:nth-child(even){background:var(--paper-2)}
/* Paa en tonet sektion er paper-2 den samme farve som bunden, saa
   striberne forsvandt helt. Hvid i stedet, samme spring den anden vej. */
.track .steps li:nth-child(even){background:var(--surface)}
@media(min-width:760px){.steps li{grid-template-columns:120px 1fr}}
/* brass-deep og ikke brass: paa den tonede baggrund giver brass 4,2:1 paa
   en lille monospace-etiket, og det er under 4,5. brass-deep giver 6,3. */
.steps .st{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--brass-deep);font-weight:500}
.steps h3{margin:0 0 6px}
.steps p{margin:0;color:var(--ink-soft);max-width:var(--measure)}

/* ── Stats ─────────────────────────────────────────────────── */
/* Paa den tonede bund falder --brass til 4,2:1. --brass-deep giver 6,3. */
.track{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.track .label{color:var(--brass-deep)}
/* .tag stod her ogsaa engang, dengang maerkatet laa paa den tonede
   flade. Nu har det sin egen moerke plade, og en brass-deep tekst
   dér giver 2,6:1. Reglen er fjernet, ikke glemt. */
.stats{display:grid;gap:var(--s4);margin-top:var(--s5)}
@media(min-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(min-width:940px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{border-top:2px solid var(--brass);padding-top:var(--s2)}
.stat b{display:block;font-family:var(--serif);font-weight:500;font-size:2.6rem;line-height:1;color:var(--ink)}
.stat span{display:block;font-size:var(--t-small);color:var(--ink-soft);margin-top:8px}
.stat.todo b{color:var(--ink-faint)}
.src{margin-top:var(--s4);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-faint)}

/* ── To kolonner med tjekliste ─────────────────────────────── */
.cols2{display:grid;gap:var(--s5)}
@media(min-width:900px){.cols2{grid-template-columns:1.05fr .95fr;gap:var(--s6);align-items:start}}
.check{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
/* Ikonet ligger absolut og ikke som flex-element. I en flex-beholder
   bliver ET LINK i teksten sit eget flex-element og faar luft omkring sig,
   saa "deltagere paa Acceleratoren, der..." braekker i tre klodser.
   Med absolut ikon floder teksten som tekst, ogsaa naar der er links i. */
.check li{position:relative;padding:0 0 var(--s3) 30px;font-size:.9688rem;
          color:var(--ink-soft);border-bottom:1px solid var(--line)}
.check li:last-child{border-bottom:0;padding-bottom:0}
.check li svg{position:absolute;left:0;top:4px}

/* ── Kort ──────────────────────────────────────────────────── */
.cards{display:grid;gap:var(--s3)}
@media(min-width:820px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);transition:border-color var(--dur),transform var(--dur);display:flex;flex-direction:column;gap:10px}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--brass);margin:0}
.card h3{font-size:1.125rem;line-height:1.3;margin:0}
.card p{font-size:var(--t-small);color:var(--ink-soft);margin:0}
.more{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s3);
      font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink);
      text-decoration:underline;text-decoration-color:var(--brass);text-decoration-thickness:1px;
      text-underline-offset:6px;gap:8px}
.more:hover{color:var(--brass-deep)}
.more svg{flex:none}

/* ── Sporgsmaal og svar ────────────────────────────────────── */
.faq{margin-top:var(--s5);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:var(--s3) 0;font-family:var(--serif);font-size:1.15rem;display:flex;justify-content:space-between;gap:var(--s3);align-items:baseline;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--brass);font-size:1.2rem;flex:none}
.faq details[open] summary::after{content:"–"}
.faq p{margin:0 0 var(--s3);color:var(--ink-soft);max-width:var(--measure)}

/* ── Billeder ──────────────────────────────────────────────────
   Fire slags. Baandet er fuld bredde og deler siden i kapitler.
   Kortbilledet sidder oeverst i et kort. Portraetbilledet er staaende.
   Alle har eksplicit width og height fra manifestet, saa der aldrig
   sker layoutskift naar de lander. */

.band{position:relative;width:100%;overflow:hidden;background:var(--ink-deep);line-height:0}
.band img{width:100%;height:auto;display:block}
/* Baandene er 3:1. Paa telefon bliver det en stribe paa under 130px,
   saa dér beskaerer vi til noget hoejere med object-fit. */
@media(max-width:700px){
  .band picture,.band img{height:200px;object-fit:cover}
  .band picture{display:block}
}
/* Etiketten skal kunne laeses over BAADE et naesten sort og et naesten hvidt
   billede. Derfor en egen maerkat med fast baggrund, ikke bare en gradient. */
.band-cap{position:absolute;left:0;bottom:0;margin:0;padding:9px var(--s3) 9px var(--s3);
          font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--paper);
          background:rgba(18,16,14,.82);line-height:1.4;border-top-right-radius:2px}

/* ── Split: billedet faar sin EGEN soejle ─────────────────────
   Fejlen var ikke billedet, men at det laa i samme soejle som listen
   og derfor skubbede de fire punkter ned. Her er billedet en soejle
   for sig, der straekker sig over hele sektionens hoejde. Det kan
   ikke skubbe noget, og teksten faar en ubrudt spalte. */
.split-section{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.split{display:grid}
.split-img{line-height:0;background:var(--paper-2);overflow:hidden}
.split-img picture{display:block;width:100%;height:100%}
.split-img img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}
.split-txt{padding:var(--s6) var(--s3)}
.split-inner{max-width:56ch}
.split-txt .sec-intro{margin-bottom:var(--s4)}
.split-txt .check{margin-bottom:var(--s5)}
@media(max-width:899px){.split-img{aspect-ratio:16/10}}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,42fr) minmax(0,58fr);align-items:stretch}
  .split-txt{padding:var(--s7) var(--s5);display:flex;align-items:center}
}
@media(min-width:1240px){
  .split-txt{padding-left:var(--s6);padding-right:calc((100vw - var(--maxw)) / 2 + var(--s3))}
}

/* Billedet er staaende, 3:4, og teksten ved siden af fylder kun godt 190 px.
   Foer stod billedet med sin egen hoejde, og saa hang der over 200 px tomt
   felt under teksten. Nu straekker billedsoejlen sig til raekkens hoejde og
   beskaerer billedet, saa de to soejler begynder OG slutter samme sted.
   Billedteksten er flyttet ind som en maerkat i hjoernet i stedet for at
   ligge som en stribe under billedet og goere soejlen endnu hoejere. */
.shot{position:relative;margin:0;border:1px solid var(--line);border-radius:var(--radius);
      overflow:hidden;background:var(--paper-2);line-height:0;aspect-ratio:1/1}
.shot picture{position:absolute;inset:0;display:block}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
.shot figcaption{position:absolute;left:0;bottom:0;margin:0;padding:9px var(--s3);
  font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--paper);
  background:rgba(18,16,14,.82);line-height:1.4;border-top-right-radius:2px}

/* Billede oeverst i et kort. Teksten ligger UNDER, aldrig ovenpaa. */
.card-img,.level-img{display:block;margin:calc(var(--s3) * -1) calc(var(--s3) * -1) var(--s3);line-height:0;overflow:hidden;background:var(--paper-2)}
.card-img img,.level-img img{width:100%;height:auto;display:block;transition:transform 400ms ease}
.level-img{margin:calc(var(--s4) * -1) calc(var(--s4) * -1) var(--s4)}
.card:hover .card-img img,.level:hover .level-img img{transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.card-img img,.level-img img{transition:none}.card:hover .card-img img,.level:hover .level-img img{transform:none}}

/* To kolonner hvor den ene er et staaende billede. */
.with-shot{display:grid;gap:var(--s4)}
@media(min-width:860px){
  .with-shot{grid-template-columns:minmax(0,1fr) minmax(0,340px);gap:var(--s6);align-items:stretch}
  /* Billedet skal IKKE vaere med til at bestemme raekkens hoejde. Saa laenge
     picture ligger i flowet, tvinger dets egen hoejde, 453 px ved 340 px
     bredde, hele raekken derned, og saa er vi tilbage ved det tomme felt.
     Absolut placering tager det ud af flowet: raekken bestemmes af teksten,
     og billedet fylder bagefter praecis den hoejde ud. */
  /* Billedet er 3:4 og hoejden er hele pointen. Rammen foelger det nu,
     og raekken toppes i stedet for at strække billedsoejlen. */
  .with-shot{align-items:start}
  .with-shot .shot{aspect-ratio:3/4}
}

/* ── Citater ───────────────────────────────────────────────── */
.quotes-head{margin-bottom:var(--s5)}
.quotes{display:grid;gap:var(--s3)}
@media(min-width:800px){.quotes{grid-template-columns:1fr 1fr;gap:var(--s4)}}
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
       padding:var(--s4);position:relative;display:flex;flex-direction:column;gap:var(--s3)}
.quote::before{content:"";position:absolute;left:0;top:var(--s4);bottom:var(--s4);width:2px;background:var(--brass)}
.quote blockquote{margin:0}
.quote blockquote p{margin:0;font-family:var(--serif);font-size:1.15rem;line-height:1.5;color:var(--ink)}
.quote figcaption{margin-top:auto;padding-top:var(--s2);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.quote .role{font-family:var(--sans);font-size:.9375rem;font-weight:500;color:var(--ink)}
.quote .org{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-faint)}

/* Pladsholder-maerkat. Skal vaere umulig at overse. */
.ph{position:absolute;top:0;right:0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;
    background:var(--brass-soft);color:var(--brass-deep);border-left:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);padding:4px 8px;border-radius:0 var(--radius) 0 2px}

/* ── Bogen ─────────────────────────────────────────────────── */
/* Bogen staar paa LYST papir. Foer var den tonet ligesom sektionen ovenover,
   og to tonede felter i traek laeses som ét langt felt. */
.book{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Messing falder til 4,2:1 paa den tonede flade, praecis som i .track. */
.book .label,.book-facts .k{color:var(--brass-deep)}
.book-grid{display:grid;gap:var(--s5);align-items:start}
@media(min-width:900px){.book-grid{grid-template-columns:380px 1fr;gap:var(--s6);align-items:center}}
/* Omslaget. Sort flade med messingkanten som bogryg, og fem baelter fra
   hvidt til sort: Acceleratorens egen trappe brugt som ornament, saa bog
   og forloeb haenger sammen uden at der skal staa noget om det. */
.book-cover{position:relative;aspect-ratio:2/3;background:var(--ink-deep);color:var(--paper);
            border-left:6px solid var(--brass-deep);border-radius:2px;
            box-shadow:0 18px 40px -18px rgba(18,16,14,.55);
            display:flex;flex-direction:column;gap:var(--s2);
            padding:var(--s5) var(--s4) var(--s4)}
.book-cover .bc-kicker{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.18em;color:var(--brass-light)}
.book-cover .bc-title{font-family:var(--serif);font-size:1.95rem;line-height:1.14;color:var(--paper)}
.book-cover .bc-authors{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;line-height:1.8;color:#A8A199;margin-top:auto}
.book-cover .ph{border-color:#3A342C}
/* Baelterne bliver LAENGERE efterhaanden som de bliver moerkere. Paa en
   sort flade forsvinder det sorte baelte, hvis trappen kun baeres af
   farven, og saa slutter den ved brunt. Naar laengden baerer den, er den
   sorte streg den bredeste og dermed den tydeligste. Messingkanten
   sikrer, at den stadig kan ses som en streg. */
.bc-baelter{display:grid;gap:8px;margin:0 0 var(--s3)}
.bc-baelter i{display:block;height:8px;border-radius:1px;box-shadow:inset 0 0 0 1px rgba(201,166,107,.72)}
.bc-baelter .b1{background:#FFFFFF;width:38%}
.bc-baelter .b2{background:#E2D3B4;width:54%}
.bc-baelter .b3{background:#C9A66B;width:70%}
.bc-baelter .b4{background:#8A6D3B;width:86%}
.bc-baelter .b5{background:#12100E;width:100%}

/* ── Imens du venter ───────────────────────────────────────────
   Bogen er ikke udkommet, saa der er ikke noget at koebe endnu. Den
   tidligere bog staar derfor som det, man KAN faa fat i i dag. */
/* Afsnittene i bogsektionen hoerer sammen og staar derfor taet. Med
   sektionens normale s5 imellem laeste hvert afsnit som et nyt emne, og
   der var 80 px ned til formularen. */
.book .sec-intro{margin-bottom:var(--s2)}
.book .sec-intro:last-of-type{margin-bottom:0}
/* Feltet og knappen skal staa paa samme linje. Med 500 px kunne de ikke
   vaere der, fordi knapteksten er lang, og knappen faldt ned under.
   Kolonnen er bredere end det, saa formularen faar lov at fylde den. */
.book form.lead{margin-top:var(--s4);max-width:640px}
.book form.lead input[type=email]{flex:1 1 180px}
.bog-imens{margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--line-strong)}
.bog-imens .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--brass-deep);display:block;margin-bottom:8px}
.bog-imens .titel{font-family:var(--serif);font-size:1.1rem;line-height:1.3;color:var(--ink);margin:0 0 6px}
.bog-imens p{font-size:.9rem;color:var(--ink-soft);margin:0 0 12px;max-width:52ch}

.book-facts{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:10px;border-top:1px solid var(--line-strong);padding-top:var(--s3)}
.book-facts li{font-size:.9rem;color:var(--ink-soft);display:flex;flex-wrap:wrap;gap:10px}
.book-facts .k{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--brass);min-width:110px}

/* ── Formular. Én raekke, ingen kasse.
   Etiketten er synlig, ikke kun en pladsholder. Det er reglen
   "Input Labels" i UX-databasen, alvorlighed hoej. ───────────── */
form.lead{margin:var(--s4) 0 0;max-width:500px}
form.lead .flabel{display:block;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.12em;color:var(--ink-soft);margin-bottom:8px}
form.lead .row{display:flex;flex-wrap:wrap;gap:10px}
form.lead input[type=email]{flex:1 1 210px;min-width:0;font:400 1rem/1.5 var(--sans);color:var(--ink);
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px 14px;min-height:48px}
form.lead input[type=email]::placeholder{color:var(--ink-faint)}
form.lead input[type=email]:focus-visible{border-color:var(--brass);outline-offset:1px}
form.lead .row .btn{flex:0 0 auto}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--brass)}
.consent label{font-size:.8125rem;color:var(--ink-faint);line-height:1.5}
form.lead .src{margin-top:14px}

/* ── Om ────────────────────────────────────────────────────── */
.about-grid{display:grid;gap:var(--s5);align-items:start}
@media(min-width:900px){.about-grid{grid-template-columns:340px 1fr;gap:var(--s6)}}
.portrait{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.08em;color:var(--ink-faint);text-align:center;padding:var(--s3);overflow:hidden}
.portrait.has-img{padding:0;background:var(--ink-deep);border-color:var(--line-strong)}
.portrait picture{display:block;width:100%;height:100%}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%}
figure.portrait-fig{margin:0}
figure.portrait-fig figcaption{margin-top:12px;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.1em;color:var(--ink-faint)}

/* ── Afsluttende CTA ───────────────────────────────────────── */
.final{background:var(--ink-deep);color:var(--paper);text-align:center}
.final .label{justify-content:center;color:var(--brass-light)}
.final .label::after{display:none}
.final h2{color:var(--paper);margin:0 auto var(--s2);max-width:22ch}
.final p{color:#A8A199;max-width:52ch;margin:0 auto var(--s4)}
/* #7D766C giver 4,2:1 paa ink-deep. #A8A199 giver 7,5, samme tone som
   broedteksten i sektionen. Og 12 px i stedet for 11. */
.final .quiet{margin-top:var(--s3);font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:#A8A199}

footer{padding:var(--s5) 0;font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;color:var(--ink-faint)}
footer .cols{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:space-between}

/* ── Bevaegelse. Betyder noget, pynter ikke. ───────────────── */
/* Kun naar det lille script i head har sat .js paa html-elementet, maa
   en blok starte usynlig. Naar app.js ikke naar frem, staar hele siden
   der som almindelig HTML. Foer denne regel skjulte et blokeret script
   op til 75 procent af teksten paa Ressourcer. */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity 400ms ease,transform 400ms ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}}

/* ── Tavlen som baand ─────────────────────────────────────────
   Baandet ligger praecis hvor band-fibre laa, i fuld bredde efter
   heroen. Forskellen fra .band er, at billedet ikke maa
   object-fit:cover'es: diagrammet ligger i en absolut placeret kasse
   oven paa fotoet, og et beskaaret foto ville flytte tavlen ud af den.
   Derfor skaleres HELE .tavle i stedet, saa foto og diagram foelges ad.

   Over 900 px staar fotoet i sin fulde 21:9-ramme uden noget indgreb.
   Under 900 px ville 21:9 give en stribe paa under 200 px, hvor tavlen
   bliver 137 px bred og ordene ulaeselige. Dér faar baandet en fast
   hoejde, og billedet skaleres op til den, saa tavlen bliver over
   300 px bred. Baggrunden er fotoets egne kantfarver som reserve. */
.tavle-baand{position:relative;overflow:hidden;line-height:0;
             height:52vw;min-height:380px;
             background:linear-gradient(180deg,#2c231b 0%,#221b14 100%)}
.tavle-baand .tavle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
                    width:auto;height:100%;min-width:100%}
.tavle-baand .tavle picture{display:block;height:100%}
.tavle-baand .tavle img{width:auto;height:100%;max-width:none;display:block}
@media(min-width:900px){
  .tavle-baand{height:auto;min-height:0}
  .tavle-baand .tavle{position:static;transform:none;width:100%;height:auto;min-width:0}
  .tavle-baand .tavle picture{height:auto}
  .tavle-baand .tavle img{width:100%;height:auto;max-width:100%}
}

/* ── Tavlen ───────────────────────────────────────────────────
   Tavlens indre flade er maalt paa den ubeskaarne fil: 32,9 % til
   68,1 % vandret og 31,5 % til 74,5 % lodret. Diagramkassen ligger
   lidt inden for, saa stregen aldrig roerer rammen. */
.tavle{position:relative;width:100%;background:var(--ink-deep);line-height:0}
.tavle picture{display:block}
.tavle img{width:100%;height:auto;display:block}
.tavle-paa{position:absolute;left:33.65%;top:32.81%;width:33.71%;height:40.36%}
.tavle-paa svg{width:100%;height:100%;display:block}

/* ── Tegnede diagrammer ───────────────────────────────────────
   Stregen tegner sig selv, naar diagrammet kommer i syne. Laengden
   paa hver enkelt streg saettes af app.js med getTotalLength, saa
   farten er den samme uanset om stregen er lang eller kort.
   Reglerne haenger paa [data-klar], som KUN app.js saetter. Uden JS
   staar diagrammet faerdigtegnet i stedet for at vaere usynligt. */
.tegn[data-klar] [data-len]{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1500ms cubic-bezier(.4,0,.2,1)}
.tegn[data-klar].in [data-len]{stroke-dashoffset:0}
.tegn[data-klar] text{opacity:0;transition:opacity 700ms ease 700ms}
.tegn[data-klar].in text{opacity:1}
@media (prefers-reduced-motion:reduce){
  .tegn[data-klar] [data-len]{stroke-dashoffset:0;transition:none}
  .tegn[data-klar] text{opacity:1;transition:none}
}

/* ── Logovaeg (kundeliste paa forsiden) ───────────────────── */
.logowall{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:1px;
          background:var(--line);border:1px solid var(--line)}
.logowall li{background:var(--paper);padding:var(--s3) var(--s2);min-height:72px;
             display:flex;align-items:center;justify-content:center;text-align:center;
             font-family:var(--serif);font-size:1.08rem;color:var(--ink-soft)}
@media(min-width:520px){.logowall{grid-template-columns:repeat(2,1fr)}}
@media(min-width:820px){.logowall{grid-template-columns:repeat(4,1fr)}}
.logowall-note{margin-top:var(--s3);font-size:var(--t-small);color:var(--ink-faint);max-width:var(--measure)}

/* ── Fire kort paa en raekke (resultattyper) ──────────────── */
@media(min-width:820px){.cards.cards4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.cards.cards4{grid-template-columns:repeat(4,1fr)}}

/* ── Blogliste ────────────────────────────────────────────── */
.blogliste{min-height:96px}
.blog-tom{margin:var(--s4) 0 0;font-size:var(--t-lead);color:var(--ink-soft);max-width:var(--measure)}

/* ── Levende netvaerksmoenster i heroen ────────────────────── */
/* Masken er ikke pynt: uden den ligger stregerne under broedteksten, og
   saa konkurrerer moensteret med det, der skal laeses. Paa telefon fylder
   teksten hele bredden, saa der fader moensteret nedefra i stedet. */
.page-hero{position:relative;overflow:hidden}
.page-hero > .wrap{position:relative;z-index:1}
.hero-moenster{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 34%,#000 62%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0%,transparent 34%,#000 62%,#000 100%)}
@media(max-width:820px){
  .hero-moenster{opacity:.55;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 58%,#000 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,transparent 58%,#000 100%)}
}

/* ── Notesbogslinjer, kollegieblok (PROEVE paa forsiden) ───── */
/* Kun paa de TONEDE sektioner (--paper-2). Laa de paa alle lyse flader,
   blev det for meget, og kortene med egen baggrund skar linjerne over.
   Nu skifter siden mellem rene og linjerede felter, og det giver rytme. */
/* Linjerne ligger som background-image direkte paa sektionen. Ingen
   ekstra element og ingen blend-mode: farverne er rgba i forvejen.
   Takten 26,4 px er broedtekstens faktiske linjehoejde (16 px gange 1,65).
   Margenlinjen foelger tekstkanten: wrap er 1080 bred med 24 px polstring,
   saa teksten begynder ved 50% minus 516 px. Margenen laegges 12 px til
   venstre for den, og under 1080 px viewport falder den til 12 px fra kanten. */
body[data-page="forside"] main section.track{
  --takt:26.4px;
  --margenx:max(12px, calc(50% - 528px));
  background-image:
    linear-gradient(rgba(87,83,78,.085) 1px, transparent 1px),
    linear-gradient(90deg, transparent var(--margenx),
                    rgba(138,109,59,.26) var(--margenx),
                    rgba(138,109,59,.26) calc(var(--margenx) + 1px),
                    transparent calc(var(--margenx) + 1px));
  background-size:100% var(--takt), 100% 100%;
  background-position:0 calc(var(--takt) - 1px), 0 0;
  background-repeat:repeat, no-repeat;
}
/* .track har sin egen farve. background-image tegner ovenpaa farven, saa
   den skal saettes eksplicit her, ellers vinder den korteste hand. */


/* ── Blogindlaeg ───────────────────────────────────────────────
   Indlaeggets krop. Indholdet kommer fra Wix' rich content og maa ikke
   slaebe editorens formatering med sig: alt arver sitets typografi. */
.post-krop{max-width:var(--measure);margin:0 auto}
article{padding:var(--s6) 0}
@media(min-width:800px){article{padding:var(--s7) 0}}
.post-krop p{color:var(--ink-soft);margin:0 0 var(--s3)}
.post-krop h2,.post-krop h3,.post-krop h4{margin-top:var(--s5)}
.post-krop ul,.post-krop ol{color:var(--ink-soft);margin:0 0 var(--s3);padding-left:1.4em}
.post-krop li{margin-bottom:var(--s1)}
.post-krop li p{margin:0}
.post-krop blockquote{margin:var(--s4) 0;padding:0 0 0 var(--s3);border-left:3px solid var(--brass);
                      font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.post-krop a{color:var(--brass-deep);text-underline-offset:3px}
.post-fig{margin:var(--s5) 0}
.post-fig img{width:100%;height:auto;border-radius:var(--radius)}
.post-fig figcaption{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;
                     color:var(--ink-faint);margin-top:10px}
.post-kode{background:var(--ink-deep);color:var(--paper);border-radius:var(--radius);
           padding:var(--s3);overflow-x:auto;margin:var(--s4) 0;
           font-family:var(--mono);font-size:.85rem;line-height:1.6}
.post-kode code{white-space:pre}
.post-tabel{overflow-x:auto;margin:var(--s4) 0}
.post-tabel table{border-collapse:collapse;width:100%}
.post-tabel td{border:1px solid var(--line-strong);padding:10px 14px;color:var(--ink-soft);
               font-size:.92rem;vertical-align:top}
.post-lyd{margin:var(--s4) 0}
.post-lyd audio{width:100%}
.post-lyd figcaption{font-family:var(--mono);font-size:var(--t-label);letter-spacing:.06em;
                     color:var(--ink-faint);margin-bottom:8px}
.post-fil a{color:var(--brass-deep)}
.post-tilbage{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}

/* ── samtykke til maaling ─────────────────────────────────────
   Ligger nederst og daekker ikke indholdet. Vises kun, naar der er et
   maalescript at give samtykke til, og kun til der er svaret én gang. */
.samtykke{position:fixed;left:var(--s3);right:var(--s3);bottom:var(--s3);z-index:60;
          max-width:560px;margin-left:auto;background:var(--surface);
          border:1px solid var(--line-strong);border-radius:var(--radius);
          padding:var(--s3);box-shadow:0 18px 40px -18px rgba(18,16,14,.4)}
.samtykke[hidden]{display:none}
.samtykke p{margin:0;font-size:.94rem;color:var(--ink-soft);max-width:none}
.samtykke .samtykke-knapper{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3)}
.samtykke .btn{min-height:44px;padding:11px 18px;font-size:.8rem}
@media (max-width:520px){.samtykke .btn{flex:1 1 auto;justify-content:center}}

/* fejlsiden: den engelske linje under den danske */
.fejl-en{color:var(--ink-faint);font-size:.95rem;margin-top:calc(var(--s2) * -1 + 4px)}

/* ── footeren ─────────────────────────────────────────────────
   Foer stod her ét stykke tekst og et tomt span. Nu baerer den kontakt,
   profil og de lovpligtige oplysninger. Punkterne staar paa én linje paa
   bred skaerm og brydes naturligt paa telefon. */
footer .foot{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);
             justify-content:space-between;align-items:baseline}
.foot-navn{margin:0}
.foot-links{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:0;padding:0}
.foot-links a{color:var(--ink-faint);text-decoration:none;border-bottom:1px solid transparent;
              padding:6px 0;display:inline-block}
.foot-links a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.foot-jura{flex:1 1 100%;margin:0;color:var(--ink-faint);opacity:.85}

/* Mailvejen under booking-knappen. En anbefalet laeser vil ofte stille ét
   spoergsmaal foer han booker tredive minutter med en fremmed, og en
   kalender er et stoerre skridt end en mail. Linjen staar daempet, saa
   den ikke konkurrerer med den primaere handling. */
.final .mailvej{margin:var(--s3) auto 0;max-width:52ch;font-size:.94rem;color:#A8A199}
.final .mailvej a{color:var(--paper);text-underline-offset:3px}
.final .mailvej a:hover{color:var(--brass-light,#C9A66B)}

/* ── Baeltestigen ─────────────────────────────────────────────
   Bael­terne er produktets rygrad og stod som fem ens raekker i samme
   messingfarve: en tabel-konvention, der signalerer lige vaegt. Her
   faar de en stigning, saa rejsen kan ses frem for laeses.

   To ting baerer den. Nummeret siger, hvor i forloebet man er, og
   baandet bliver baade bredere og moerkere. Farverne er de faktiske
   baeltefarver, men daempet ind i sitets jordtone: en ren gul og en ren
   groen ville se ud som et andet site. Baandet er lille nok til at
   farven laeses som et maerke og ikke som en flade. */
.steps.baeltestige li{position:relative}
@media(min-width:760px){
  .steps.baeltestige li{grid-template-columns:150px 1fr}
}
.baeltestige .st{display:flex;flex-direction:column;gap:8px}
.baeltestige .st .nr{font-family:var(--mono);font-size:1.5rem;line-height:1;
                     color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.baeltestige .baand{display:block;height:9px;border-radius:1px;
                    box-shadow:inset 0 0 0 1px rgba(87,83,78,.28)}
.baeltestige li:nth-child(1) .baand{width:40%;background:#FFFFFF}
.baeltestige li:nth-child(2) .baand{width:55%;background:#D9B44A}
.baeltestige li:nth-child(3) .baand{width:70%;background:#C1793C}
.baeltestige li:nth-child(4) .baand{width:85%;background:#5E7A54}
.baeltestige li:nth-child(5) .baand{width:100%;background:#12100E}

/* ── Bookingbjaelken paa mobil ────────────────────────────────
   Kun under 940 px, hvor knappen i sidehovedet ligger inde i klappen.
   Bjaelken ligger over indholdet og faar sin egen plads i bunden af
   siden, saa den aldrig daekker den sidste linje tekst. */
.mobilbar{display:none}
@media(max-width:939px){
  .mobilbar{display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
            padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));
            background:color-mix(in srgb, var(--paper) 92%, transparent);
            backdrop-filter:blur(8px);border-top:1px solid var(--line-strong);
            transition:transform var(--dur) ease,opacity var(--dur) ease}
  .mobilbar .btn{width:100%;justify-content:center}
  /* Skjult, naar slutafsnittets egen knap er i syne. */
  .mobilbar[hidden]{display:block;transform:translateY(110%);opacity:0;pointer-events:none}
  body{padding-bottom:76px}
}
@media(max-width:939px) and (prefers-reduced-motion:reduce){
  .mobilbar{transition:none}
}

/* kategorikort: hele kortet er klikbart (stretched link) */
.katkort{position:relative;padding-bottom:calc(var(--s3) + 18px)}
.katkort h3 a{color:inherit;text-decoration:none;background:none}
.katkort h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.katkort:hover h3 a,.katkort:focus-within h3 a{color:var(--brass)}
.katkort h3 a:focus-visible::after{outline:2px solid var(--brass);outline-offset:3px}
.katkort h3 a:focus{outline:none}
.katkort::after{content:"↓";pointer-events:none;position:absolute;right:var(--s3);bottom:var(--s3);font-family:var(--mono);font-size:var(--t-label);color:var(--brass);opacity:.55;transition:transform var(--dur),opacity var(--dur)}
.katkort:hover::after,.katkort:focus-within::after{opacity:1;transform:translateY(3px)}

/* ── Tryk-kvittering ───────────────────────────────────────── */
/* Ingen knap kvitterede for et tryk. Paa touch er det den eneste
   tilbagemelding, brugeren faar, foer siden skifter. */
.btn:active{transform:translateY(1px)}
.btn-primary:active{background:var(--ink-deep)}
.btn-secondary:active{border-color:var(--ink);background:var(--brass-soft)}
.btn-light:active{background:var(--brass-deep);color:var(--paper)}
.btn[aria-disabled="true"]:active{transform:none}
.more:active,.crumbs a:active,.foot-links a:active,.lang a:active{color:var(--brass-deep)}
.card:active{border-color:var(--line-strong)}
.katkort:active{transform:translateY(0)}
.nav-toggle:active{background:var(--brass-soft)}
.faq summary:active{color:var(--brass-deep)}
@media (prefers-reduced-motion:reduce){.btn:active{transform:none}}

/* ── Print ─────────────────────────────────────────────────── */
/* Siden blev maalt til kontrast 1,04 paa print: hvid tekst paa hvidt
   papir. Her tvinges alt til sort paa hvidt, navigation og bookingbar
   ryger ud, og adressen paa et link skrives ud, saa papiret kan bruges. */
@media print{
  html,body{background:#fff !important;color:#000 !important}
  *,*::before,*::after{
    background:transparent !important;background-image:none !important;
    box-shadow:none !important;text-shadow:none !important;color:#000 !important}
  .dark,.dark *,.page-hero,.page-hero *{background:#fff !important;color:#000 !important}
  .skip,.nav nav,.nav-right,.nav-toggle,.lang,.mobilbar,.samtykke,.band,.draft,
  .cta-row .btn-secondary,footer .btn{display:none !important}
  header{border-bottom:1px solid #000}
  .brand{font-weight:600}
  main{padding-top:0 !important}
  a{text-decoration:underline}
  main a[href^="http"]:not(.btn)::after{content:" (" attr(href) ")";font-size:.85em;word-break:break-all}
  .btn{border:1px solid #000 !important;padding:6px 10px}
  .card,.level,.stat,.q,figure,li,blockquote,.quote{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  section{break-inside:auto}
  .shot,.portrait{aspect-ratio:auto !important;height:auto !important}
  .shot picture{position:static !important}
  .shot img,.portrait img{height:auto !important;object-fit:contain !important}
  img{max-width:100% !important}
  .reveal,.js .reveal{opacity:1 !important;transform:none !important}
  .faq details > *{display:block}
  .foot-jura,.foot-navn{color:#000 !important}
  @page{margin:18mm}
}