/* Hovedbrud. Mobile first. Breakpoints 640px and 960px.
   Look: squared notebook paper, a green frame, ballpoint blue for everything handwritten,
   gold only on buttons, and a scalloped tablecloth edge between sections.
   Colour roles and contrast are documented in prototyper/farvetjek.html (all text pairs pass WCAG AA). */
@font-face{font-family:"Gabarito";font-weight:400 900;font-style:normal;font-display:swap;src:url("/assets/fonts/Gabarito.ttf") format("truetype")}
@font-face{font-family:"Caveat";font-weight:400;font-style:normal;font-display:swap;src:url("/assets/fonts/Caveat-Regular.ttf") format("truetype")}

:root{
  --creme:#FFF7EA;--hvid:#fff;--flade:#FFF1E2;--fersken:#FFE3D2;--fersken-moerk:#F3C7AE;
  --groen:#0F7B5A;--groen-moerk:#0B5E45;--groen-lys:#E4F2EB;
  --blaa:#2747C9;--blaa-moerk:#1B2F86;
  --guld:#F2B544;--guld-tekst:#FFD98A;--tusch:rgba(255,222,80,.75);
  --tomat:#B8331F;--sennep:#F2B544;--gran:#0B5E45;
  --blaek:#1C1B19;--blaek-blid:#5A5650;--kant:#EADFD0;
  --haand:"Caveat","Comic Sans MS",cursive;
  --ok:#0F7B5A;--fejl:#B8331F;--advarsel-bg:#FFF1C2;
  --skrift:"Gabarito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --rund:999px;--hjoerne:28px;--streg:2.5px solid var(--blaek);
  --q-lys:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 800'%3E%3Cg transform='translate%28300 400%29 rotate%2812%29 translate%28-4709 -451%29'%3E%3Cpath fill='rgba%28255%2C255%2C255%2C0.07%29' d='M4618.636354 572.1750600000001 4559.025566 424.55535600000013 4639.285498 388.4534120000001Q4682.068746 369.9440720000001 4706.0404020000005 358.17078200000014Q4730.012058 346.3974920000001 4740.4361420000005 335.8339380000001Q4750.860226 325.2703840000001 4753.978906 310.5981640000001Q4756.47385 298.8603880000001 4749.4377700000005 288.67492200000015Q4742.40169 278.48945600000013 4726.751322 275.1628640000001Q4708.16651 271.2125360000001 4682.29997 277.47135000000014Q4656.43343 283.7301640000001 4601.165846 312.8763080000001L4548.478294 339.5038320000001L4469.72037 185.7695920000001L4504.11611 163.43274800000006Q4566.97729 122.61024000000009 4632.985634000001 105.45935800000012Q4698.993978 88.30847600000016 4763.551746 102.0306680000001Q4832.022106 116.58450800000014 4874.0565719999995 152.10008800000014Q4916.091038 187.61566800000014 4931.98964 235.46686200000013Q4947.888242 283.3180560000001 4937.076818 334.18175200000013Q4925.6416580000005 387.9798920000001 4898.740366 423.1554840000001Q4871.8390739999995 458.3310760000001 4828.297428 482.8132600000001Q4784.755782 507.2954440000001 4722.28675 531.8438480000001ZM4593.66841 805.0734320000001Q4550.629898 795.9253040000001 4526.648626 759.6465180000001Q4502.667354 723.3677320000002 4512.023394 679.3510720000002Q4521.379434 635.3344120000002 4558.043338 611.9461700000002Q4594.707242 588.5579280000002 4637.745754 597.7060560000001Q4680.784266 606.8541840000001 4705.254612 643.236926Q4729.724958 679.619668 4720.368918 723.6363280000002Q4711.012878 767.6529880000002 4674.3489739999995 791.0412300000002Q4637.6850699999995 814.4294720000001 4593.66841 805.0734320000001Z'/%3E%3C/g%3E%3C/svg%3E");
  --cirkler:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23F2BFA2' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M38 30c10-12 30-9 31 6 1 13-16 21-28 15-9-5-8-16-1-21'/%3E%3Cpath d='M128 112c9-11 27-7 28 7 1 12-15 19-26 14-9-5-7-15 0-20'/%3E%3Cpath d='M120 30c5-6 15-4 15 3 0 6-8 10-13 7-4-3-3-8 0-10'/%3E%3Cpath d='M40 130c5-6 15-4 15 3 0 6-8 10-13 7-4-3-3-8 0-10'/%3E%3C/svg%3E");
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--blaek);font-family:var(--skrift);font-size:clamp(17px,16.6px + .15vw,18px);line-height:1.55;overflow-wrap:break-word;
  background-color:var(--creme);background-image:linear-gradient(rgba(39,71,201,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(39,71,201,.08) 1px,transparent 1px);background-size:28px 28px}
img,svg,picture{max-width:100%;height:auto}
img{display:block}
a{color:var(--groen-moerk);text-underline-offset:4px;text-decoration-thickness:2px}
a:hover{color:var(--blaa)}
/* focus shows on every background: dark ring with a light halo */
:focus-visible{outline:3px solid var(--blaek);outline-offset:3px;box-shadow:0 0 0 6px var(--creme)}
h1,h2,h3{font-family:var(--skrift);font-weight:900;letter-spacing:-.035em;line-height:1.02;margin:0 0 .5em;color:var(--blaek)}
h1{font-size:clamp(44px,5vw + 14px,80px)}
h2{font-size:clamp(32px,3vw + 18px,56px)}
h3{font-size:clamp(21px,.6vw + 18px,24px);letter-spacing:-.02em}
h2 em,h3 em{font-style:normal;color:var(--groen);background:linear-gradient(transparent 55%,var(--tusch) 55%,var(--tusch) 92%,transparent 92%);padding:0 .06em}
p{margin:0 0 1em;max-width:65ch}
ul{padding-left:1.2em}
small,.lille{font-size:.88rem;color:var(--blaek-blid)}
.skip{position:absolute;left:-999px;top:0;background:var(--blaek);color:#fff;padding:12px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
.skjult{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ikon{flex:none}

.indhold{max-width:1180px;margin:0 auto;padding:0 24px;position:relative}
.sektion{padding:64px 0;position:relative}
@media(min-width:960px){.sektion{padding:96px 0}}
.sektion.moerk{background-color:var(--flade);background-image:none}
.centrer{text-align:center}.centrer p{margin-left:auto;margin-right:auto}
/* small tracked line above a heading */
.overlinje{font-size:13px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--groen-moerk);margin:0 0 14px}
/* handwriting, always in ballpoint blue and never for prices, buttons or instructions */
.haand{font-family:var(--haand);font-size:clamp(26px,1vw + 21px,32px);line-height:1.15;color:var(--blaa);display:inline-block;transform:rotate(-1.5deg)}

/* the scalloped tablecloth edge between sections; --fra is the colour it hangs from */
.dug{height:26px;background:radial-gradient(circle at 50% 0,var(--fra,var(--creme)) 0 19px,transparent 19.5px) 0 0/40px 26px repeat-x;position:relative;z-index:2;margin-bottom:-26px}
.dug::before{content:"";position:absolute;left:0;right:0;top:-12px;border-top:2.5px dashed var(--soem,rgba(15,123,90,.45))}

/* test banner */
.testbaand{background:var(--advarsel-bg);text-align:center;padding:6px 12px;font-size:.9rem;font-weight:600;border-bottom:var(--streg)}
.udkast{background:var(--advarsel-bg);border:var(--streg);border-radius:14px;padding:14px 18px;margin:0 0 24px}

/* header */
.top{position:sticky;top:0;z-index:25;background:var(--creme);border-bottom:var(--streg)}
.top .indhold{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.ordmaerke{font-weight:900;font-size:26px;letter-spacing:-.03em;color:var(--blaek);text-decoration:none}
.ordmaerke:hover{color:var(--blaek)}
.ordmaerke img{display:block;height:28px;width:auto}
.nav-desktop{display:none}
.nav-desktop ul,.nav-mobil ul{list-style:none;margin:0;padding:0}
.nav-desktop a,.nav-mobil a{color:var(--blaek);text-decoration:none;font-weight:700}
.nav-desktop a:hover,.nav-mobil a:hover{color:var(--groen)}
.nav-mobil{position:relative}
.nav-mobil summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 18px;border:var(--streg);border-radius:14px;background:#fff;color:var(--blaek);font-weight:800}
.nav-mobil summary::-webkit-details-marker{display:none}
.nav-mobil ul{position:absolute;right:0;top:56px;background:#fff;border:var(--streg);border-radius:18px;box-shadow:6px 8px 0 var(--blaek);padding:8px;min-width:230px;z-index:20}
.nav-mobil li a{display:block;padding:12px 14px;border-radius:12px}
.nav-mobil li a:hover{background:var(--flade)}
.knap.top-knap{display:none}
@media(min-width:960px){
  .top .indhold{min-height:76px}.ordmaerke img{height:32px}
  .nav-desktop{display:block;margin-left:auto}.nav-desktop ul{display:flex;gap:28px}
  .nav-mobil{display:none}.knap.top-knap{display:inline-flex}
}

/* buttons: gold means "do something"; the black edge carries the contrast */
.knap{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 24px;border-radius:14px;border:var(--streg);
  background:var(--guld);color:var(--blaek);font:800 1rem/1.2 var(--skrift);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:0 4px 0 var(--blaek);transition:transform .12s,box-shadow .12s,background-color .15s}
.knap:hover{color:var(--blaek);transform:translateY(2px);box-shadow:0 2px 0 var(--blaek)}
.knap.sekundaer{background:transparent;box-shadow:none}
.knap.sekundaer:hover{background:#fff;transform:none}
.knap.lys{border-color:var(--creme);box-shadow:0 4px 0 var(--creme)}
.knap.lille-knap{padding:9px 16px;min-height:44px;font-size:.95rem;box-shadow:0 3px 0 var(--blaek)}
.knap.fare{background:var(--fejl);color:#fff}
.knap[disabled]{opacity:.5;cursor:not-allowed}
.knaprk{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}

/* cards */
.kort{background:#fff;border:var(--streg);border-radius:var(--hjoerne);padding:28px}
.kort.nedtonet{opacity:.6}
.kortgitter{display:grid;gap:28px}
@media(min-width:640px){.kortgitter.to{grid-template-columns:1fr 1fr}.kortgitter.tre{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.kortgitter.tre{grid-template-columns:repeat(3,1fr)}}
.priskort{display:flex;flex-direction:column;gap:6px;padding:34px;position:relative;overflow:hidden}
.priskort .navn{font-weight:900;font-size:26px;margin:0}
.priskort .pris{font-weight:900;font-size:64px;letter-spacing:-.04em;line-height:1;color:var(--blaek);margin:12px 0 12px}
.priskort .pris span{letter-spacing:0;font-weight:700;color:var(--blaek-blid)}
.priskort p{margin:0;color:var(--blaek-blid)}
.priskort .knap{margin-top:22px;align-self:flex-start}
.priskort .knap-plads{margin-top:22px}
/* the first price card is green with question marks, the second a sheet of squared paper */
.kortgitter.to > .priskort:first-child{background-color:var(--groen-moerk);background-image:var(--q-lys);background-size:150px 200px;color:var(--creme)}
.kortgitter.to > .priskort:first-child .navn,.kortgitter.to > .priskort:first-child .pris,.kortgitter.to > .priskort:first-child .pris span,.kortgitter.to > .priskort:first-child p{color:var(--creme)}
.kortgitter.to > .priskort:first-child .knap{border-color:var(--creme);box-shadow:0 4px 0 var(--creme)}
.kortgitter.to > .priskort:last-child{background-image:linear-gradient(rgba(39,71,201,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(39,71,201,.1) 1px,transparent 1px);background-size:22px 22px;box-shadow:6px 8px 0 var(--blaa)}
.kortgitter.to > .priskort:last-child .knap{background:transparent;box-shadow:none}
.kortgitter.to > .priskort:last-child .knap:hover{background:#fff;transform:none}

/* hero */
.hero{padding:48px 0 72px}
.hero .indhold{display:grid;gap:52px;align-items:center}
.hero h1{margin-bottom:.32em}
.hero p.indled{font-size:1.15em;color:var(--blaek-blid);max-width:32em;margin-bottom:1.6em}
.hero-billede img{border-radius:var(--hjoerne)}
@media(min-width:960px){.hero .indhold{grid-template-columns:1.02fr 1fr;gap:64px}.hero{padding:64px 0 104px}}
/* the coloured word in the headline gets a ballpoint scribble underneath */
.marker{color:var(--groen);position:relative;white-space:nowrap}
.marker svg{position:absolute;left:-2%;bottom:-.16em;width:104%;height:.3em;overflow:visible;pointer-events:none}
.marker svg path{fill:none;stroke:var(--blaa);stroke-width:5;stroke-linecap:round}
.hero .aside{display:flex;align-items:center;gap:6px;margin:22px 0 0;font:400 30px/1 var(--haand);color:var(--blaa);transform:rotate(-2deg)}
.hero .aside svg{width:54px;height:34px;flex:none}
.hero-fakta{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0;padding:0;list-style:none}
.hero-fakta li{background:#fff;border:2px solid var(--blaek);border-radius:var(--rund);padding:5px 13px;font-size:.85rem;font-weight:700}

/* a drawing in a tilted card with a hard shadow; used in the hero and on the game page */
.scenekort{position:relative;background:var(--fersken);border:var(--streg);border-radius:30px;padding:clamp(14px,2.4vw,26px);transform:rotate(1.5deg);box-shadow:8px 10px 0 var(--blaek)}
.klistermaerke{position:absolute;left:-22px;bottom:-24px;width:118px;height:118px;border-radius:50%;background:#fff;border:var(--streg);
  display:grid;place-items:center;text-align:center;font:400 25px/.95 var(--haand);color:var(--blaa);transform:rotate(-12deg)}
.klistermaerke svg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:drej 22s linear infinite}
@keyframes drej{to{transform:rotate(360deg)}}
@media(max-width:640px){.klistermaerke{left:-6px;width:96px;height:96px;font-size:20px}}

/* game cover: the title set large on the game's colour, used when a game has neither photo nor drawing */
.omslag{position:relative;overflow:hidden;background:var(--spil,var(--groen-moerk));color:#fff;border-radius:var(--hjoerne);padding:28px;min-height:260px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.omslag .maerke{align-self:flex-start;font-weight:700;font-size:.82rem;background:rgba(255,255,255,.16);border-radius:var(--rund);padding:5px 13px}
.omslag .omslag-titel{position:relative;z-index:1;font-weight:900;font-size:clamp(36px,3vw + 22px,64px);letter-spacing:-.04em;line-height:.95;max-width:9ch}
.omslag .bag{position:absolute;right:-24px;bottom:-56px;font-weight:900;font-size:300px;line-height:1;color:rgba(255,255,255,.1);transform:rotate(12deg)}
.spil-kort-billede .omslag{min-height:420px;padding:40px}
.spil-kort-billede .tegning-boks{border:var(--streg);transform:rotate(-1.2deg);box-shadow:-8px 10px 0 var(--spil,var(--blaa))}

/* fact pills */
.faktabjaelke{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.faktabjaelke li{display:flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--blaek);border-radius:var(--rund);padding:8px 15px;font-size:.95rem;font-weight:700;line-height:1.2}
.faktabjaelke .ikon{color:var(--groen)}
.faktaliste{list-style:none;margin:0 0 28px;padding:0;border-top:2px dashed var(--fersken-moerk)}
.faktaliste li{display:flex;gap:12px;padding:9px 0;border-bottom:2px dashed var(--fersken-moerk)}
.faktaliste .k{flex:0 0 38%;color:var(--blaek-blid);font-weight:600}
.faktaliste .v{font-weight:700}

/* how it works: the deep green band with large question marks */
.groen-baand{background-color:var(--groen-moerk);background-image:var(--q-lys);background-size:210px 280px;color:var(--creme);overflow:hidden}
.groen-baand h2,.groen-baand h3{color:var(--creme)}
.groen-baand h2 em{color:var(--guld-tekst);background:none;padding:0}
.groen-baand .overlinje{color:var(--guld-tekst)}
.trin{display:grid;gap:40px;list-style:none;margin:36px 0 0;padding:0}
.trin li{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative}
.trin-ikon{width:150px;height:150px;border-radius:50%;background:var(--creme);border:var(--streg);display:grid;place-items:center;margin-bottom:22px;box-shadow:0 6px 0 var(--blaek);transition:transform .3s}
.trin li:hover .trin-ikon{transform:rotate(-8deg)}
.trin-ikon .tegning{width:104px}
.trin-tekst{display:flex;flex-direction:column;align-items:center}
.trin .nr{font:400 32px/1 var(--haand);color:var(--guld-tekst);margin-bottom:6px}
.trin .nr::after{content:"."}
.trin h3{margin-bottom:.4em}
.trin p{margin:0 auto;max-width:24em;font-size:16px;color:var(--creme)}
/* a dotted, hand-drawn arrow between the steps on wide screens */
@media(min-width:960px){
  .trin{grid-template-columns:repeat(3,1fr);gap:64px}
  .trin li:not(:last-child)::after{content:"";position:absolute;right:-58px;top:56px;width:54px;height:32px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 40' fill='none' stroke='%23FFD98A' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M4 24C24 4 46 6 64 20' stroke-dasharray='1 7'/%3E%3Cpath d='M56 12l8 8-10 4'/%3E%3C/svg%3E") center/contain no-repeat}
}
/* outside the green band (the page about how it works) the steps sit on paper */
.sektion:not(.groen-baand) .trin h3{color:var(--blaek)}
.sektion:not(.groen-baand) .trin p{color:var(--blaek-blid)}
.sektion:not(.groen-baand) .trin .nr{color:var(--blaa)}
.sektion:not(.groen-baand) .trin li::after{filter:brightness(.4)}

/* phone frame */
.opkald-gitter{display:grid;gap:40px;align-items:center}
.telefon{border:12px solid var(--blaek);border-radius:44px;overflow:hidden;max-width:290px;margin:0 auto;background:var(--blaek);box-shadow:10px 12px 0 var(--blaa);transform:rotate(3deg)}
.telefon img{width:100%;border-radius:32px}
@media(min-width:960px){.opkald-gitter{grid-template-columns:1.2fr .8fr;gap:64px}}

/* checklist */
.tjekliste{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:12px}
@media(min-width:640px){.tjekliste{grid-template-columns:1fr 1fr;gap:14px 24px}}
.tjekliste li{display:flex;gap:12px;align-items:flex-start;background:#fff;border:2px solid var(--blaek);border-radius:16px;padding:14px 18px;font-weight:600}
.tjekliste .ikon{color:var(--groen);margin-top:3px}

/* quotes: handwritten on lined notebook paper */
.sedler{display:grid;gap:24px}
@media(min-width:640px){.sedler{grid-template-columns:1fr 1fr}}
.seddel,.noter .note{font-family:var(--haand);color:var(--blaa);background-color:#fff;border:var(--streg);border-radius:6px 24px 24px 24px;margin:0;
  background-image:linear-gradient(90deg,transparent 18px,rgba(184,51,31,.5) 18px 20px,transparent 20px),repeating-linear-gradient(0deg,rgba(39,71,201,.16) 0 1.5px,transparent 1.5px 30px);background-position:0 0,0 10px}
.seddel{padding:22px 26px 18px 36px;font-size:28px;line-height:1.2;transform:rotate(-1deg)}
.seddel:nth-child(even){transform:rotate(1deg)}
.seddel footer{font-size:23px;margin-top:10px;color:var(--blaek-blid)}

/* faq */
details.sp{border-bottom:2px dashed var(--fersken-moerk)}
details.sp summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:800;font-size:1.15rem;position:relative;min-height:48px}
details.sp summary::-webkit-details-marker{display:none}
details.sp summary::after{content:"+";position:absolute;right:4px;top:14px;font-size:1.8rem;font-weight:700;color:var(--groen)}
details.sp[open] summary::after{content:"\2212"}
details.sp .svar{padding:0 0 20px;color:var(--blaek-blid)}
.kom-snart{opacity:.7}

/* forms */
.formular{display:grid;gap:16px}
.formular.kort{padding:28px;box-shadow:8px 10px 0 var(--blaek)}
.felt label,.felt .etiket{display:block;font-weight:700;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=search],select{width:100%;min-height:50px;padding:10px 14px;border:2px solid var(--blaek);border-radius:12px;background:#fff;font:inherit;color:var(--blaek)}
input:focus,select:focus{border-color:var(--blaa);box-shadow:0 0 0 3px rgba(39,71,201,.25);outline:0}
input[type=checkbox],input[type=radio]{width:22px;height:22px;flex:none;accent-color:var(--groen);margin:2px 0 0}
.valg{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:2px solid var(--blaek);border-radius:16px;background:#fff;cursor:pointer}
.valg:has(input:checked){background:var(--groen-lys);box-shadow:4px 5px 0 var(--groen)}
.valg strong{display:block}
.afkryds{display:flex;gap:12px;align-items:flex-start}
.afkryds label{font-weight:400;margin:0}
.hjaelp{font-size:.9rem;color:var(--blaek-blid);margin:6px 0 0}
.fejlboks{background:#FCE9E4;color:#7A2414;padding:14px 18px;border:2px solid var(--fejl);border-radius:14px}
.fejlboks ul{margin:6px 0 0}
.besked{background:var(--advarsel-bg);padding:14px 18px;border:2px solid var(--blaek);border-radius:14px;margin-bottom:16px}
.besked.ok{background:var(--groen-lys)}
.total{font-weight:900;font-size:28px;letter-spacing:-.02em;margin:0}
.js .kun-uden-js{display:none}
.fortryd-felt[hidden]{display:none}
.hp{position:absolute;left:-9999px}

/* buy bar (mobile) */
.koebbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--creme);border-top:var(--streg);padding:10px 20px;display:none;align-items:center;justify-content:space-between;gap:16px}
.koebbar.synlig{display:flex}
.koebbar .p{font-weight:900;font-size:24px;letter-spacing:-.02em}
@media(min-width:960px){.koebbar.synlig{display:none}}

/* game page */
.broedkrumme{font-size:.9rem;margin:24px 0 0;color:var(--blaek-blid)}
.broedkrumme a{color:var(--blaek-blid)}
.spil-gitter{display:grid;gap:44px;padding:24px 0 56px}
@media(min-width:960px){.spil-gitter{grid-template-columns:1fr 1fr;gap:64px}.spil-kort-billede{position:sticky;top:110px;align-self:start}}
.spil-kort-billede img{border-radius:var(--hjoerne);border:var(--streg)}
.spil-gitter .haand{margin-bottom:1em}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter button{min-height:44px;padding:8px 18px;border:2px solid var(--blaek);background:#fff;color:var(--blaek);border-radius:var(--rund);font:700 1rem var(--skrift);cursor:pointer}
.filter button[aria-pressed=true]{background:var(--groen-moerk);color:#fff}

/* game card. Each game may set its own colour (--spil) in the catalogue; it shows in the shadow, the line and the overline */
.spilkort{--spil:var(--groen);display:flex;flex-direction:column;padding:0;overflow:hidden;box-shadow:7px 9px 0 var(--spil);transition:transform .2s}
.spilkort:hover{transform:translateY(-3px)}
.spilkort[hidden]{display:none}
.spilkort-omslag{display:block;text-decoration:none;color:#fff}
.spilkort .tegning-boks{border-radius:0;border-bottom:var(--streg);padding:20px 20px 12px}
.spilkort .omslag{border-radius:0}
.spilkort-info{display:flex;flex-direction:column;gap:10px;padding:26px 28px 30px;flex:1}
.spilkort-info .overlinje{color:var(--spil);margin:0;filter:brightness(.85)}
.spilkort-info h2,.spilkort-info h3{margin:0}
.spilkort-info h3{font-size:clamp(30px,1.6vw + 22px,52px);letter-spacing:-.035em}
.spilkort-info h3 a{color:var(--blaek);text-decoration:none}
.spilkort-info .undertitel{font:400 clamp(26px,1vw + 20px,32px)/1.1 var(--haand);color:var(--blaa);margin:0 0 4px}
.spilkort-info .fakta{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:4px 0 8px;padding:14px 0;border-top:2px dashed var(--fersken-moerk);border-bottom:2px dashed var(--fersken-moerk)}
.spilkort-info .fakta li{display:flex;align-items:center;gap:7px;font-weight:700;font-size:15px}
.spilkort-info .fakta .ikon{color:var(--groen)}
.spilkort-info .pris-lille{font-size:2rem;font-weight:900;letter-spacing:-.03em;margin:4px 0 6px}
.spilkort-info .knaprk{margin-top:auto}
/* a single game gets the wide card */
@media(min-width:760px){
  .kortgitter > .spilkort:only-child{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1fr;border-radius:32px}
  .kortgitter > .spilkort:only-child .tegning-boks{border-bottom:0;border-right:var(--streg);height:100%;display:grid;align-items:center;padding:26px}
  .kortgitter > .spilkort:only-child .omslag{min-height:420px;padding:44px;height:100%}
  .kortgitter > .spilkort:only-child .spilkort-info{padding:44px}
}
.tak-kode{font-weight:900;font-size:clamp(34px,8vw,56px);color:var(--groen-moerk);letter-spacing:.02em;margin:8px 0 16px;word-break:break-all;background:linear-gradient(transparent 55%,var(--tusch) 55%,var(--tusch) 92%,transparent 92%);display:inline-block}
.raad{background:#fff;border:var(--streg);border-radius:18px;padding:18px 22px;margin:24px 0;box-shadow:5px 6px 0 var(--groen)}

/* Oldemor speaks: portrait on peach with hand-drawn circles, remarks on notebook paper */
.oldemor-sektion{background-color:var(--fersken);background-image:var(--cirkler);background-size:180px 180px}
.oldemor-sektion .overlinje{color:var(--tomat)}
.oldemor-gitter{display:grid;gap:40px;align-items:center}
.oldemor-figur{max-width:340px;width:100%;margin:0 auto;background:var(--groen-lys);border:var(--streg);border-radius:32px;padding:24px 24px 0;overflow:hidden;transform:rotate(-2.5deg);box-shadow:8px 10px 0 var(--blaek)}
.oldemor-figur .tegning{max-width:100%}
.noter{display:grid;gap:18px;margin-top:8px}
.noter .note{font-size:clamp(28px,1vw + 24px,36px);line-height:1.15;padding:16px 24px 12px 36px;max-width:none;transform:rotate(-.6deg)}
.noter .note:nth-child(2){transform:rotate(.7deg);margin-left:clamp(0px,3vw,36px)}
@media(min-width:960px){.oldemor-gitter{grid-template-columns:.62fr 1fr;gap:72px}}

/* closing call: blue night with question marks, the words in a gold-edged box */
.sektion.cta{background-color:var(--blaa-moerk);background-image:var(--q-lys);background-size:300px 400px;color:var(--creme);overflow:hidden;padding:110px 0 120px}
.sektion.cta .indre{display:inline-block;background:var(--blaa-moerk);border:2.5px solid var(--guld);border-radius:32px;padding:44px 52px 50px}
.sektion.cta h2{color:var(--creme);font-size:clamp(38px,4.6vw + 14px,76px);margin-bottom:.55em}
.sektion.cta h2 em{color:var(--guld-tekst);background:none;padding:0}
.sektion.cta .knap{border-color:var(--creme);box-shadow:0 4px 0 var(--creme)}
@media(max-width:640px){.sektion.cta .indre{padding:32px 22px 36px}}

/* footer */
.bund{background:var(--blaek);color:rgba(255,247,234,.75);padding:56px 0 40px;margin-top:0;font-size:.95rem}
.bund a{color:var(--creme);text-decoration:none;font-weight:700}
.bund a:hover{color:var(--guld-tekst);text-decoration:underline}
.bund strong{color:#fff}
.bund .logo-hvid{height:28px;width:auto;margin-bottom:16px}
.bund .gitter{display:grid;gap:32px}
.bund ul{list-style:none;margin:0;padding:0}.bund li{margin:8px 0}
.bund p{margin:0 0 .6em}
.bund .lille{color:rgba(255,247,234,.7)}
@media(min-width:960px){.bund .gitter{grid-template-columns:1.4fr 1fr 1fr}}

/* legal */
.tekst h2{margin-top:1.4em;font-size:clamp(26px,1.6vw + 18px,36px)}
.tekst h3{margin-top:1.2em}
.tekst p,.tekst li{max-width:70ch}

/* admin */
.admin{padding:24px 0 56px}
.admin table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff}
.admin th,.admin td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--kant);vertical-align:top}
.admin th{background:var(--flade)}
.tabelbox{overflow-x:auto}
.admin .raekke{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 16px}
.admin form.inline{display:inline}
.admin dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px}
.admin dt{color:var(--blaek-blid)}.admin dd{margin:0;word-break:break-all}
.pille{display:inline-block;padding:2px 10px;border-radius:99px;background:var(--flade);font-size:.85rem}
.pille.fejl{background:#FCE9E4;color:var(--fejl)}.pille.ok{background:var(--groen-lys);color:var(--groen-moerk)}
.ok-t{color:var(--groen-moerk)}.fejl-t{color:var(--fejl)}

/* component sheet */
.stil-blok{margin:24px 0}

/* Hand drawings: lib/sider/_tegning-bord.php, lib/sider/_oldemor.php, the step icons in _trin.php and katalog/<slug>/scene.svg.
   Classes are prefixed t-. The front page drawing draws itself once (assets/js/site.js). */
.tegning-boks{background:var(--fersken);border-radius:var(--hjoerne);padding:clamp(14px,3vw,32px)}
.tegning{display:block;width:100%;height:auto;max-width:640px;margin:0 auto}
.tegning .t-s{fill:none;stroke:var(--blaek);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tegning .t-tynd{stroke-width:1.5}
.tegning .t-rod{stroke:var(--tomat)}
.tegning .t-papir{fill:#fff}
.tegning .t-fyldrod{fill:var(--tomat)}
.tegning .t-messing{fill:var(--sennep)}
.tegning .t-haand{font-family:var(--haand);fill:var(--blaa)}
.tegning .t-fade{opacity:0;animation:t-frem .8s 1.4s ease-out forwards}
@keyframes t-frem{to{opacity:1}}
.tegning .t-sving{animation:t-sving 6s ease-in-out infinite}
@keyframes t-sving{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg)}}
.tegning .t-damp path{animation:t-damp 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom}
.tegning .t-damp path:nth-child(2){animation-delay:1s}.tegning .t-damp path:nth-child(3){animation-delay:2s}
@keyframes t-damp{0%{opacity:0;transform:translateY(8px) scaleY(.8)}40%{opacity:.8}100%{opacity:0;transform:translateY(-14px) scaleY(1.1)}}
.tegning .t-telefon{transform-box:fill-box;transform-origin:center;animation:t-ring 2.8s ease-in-out infinite}
@keyframes t-ring{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-5deg)}70%{transform:rotate(5deg)}74%{transform:rotate(-4deg)}78%{transform:rotate(3deg)}82%{transform:rotate(0)}}
.tegning .t-ringe{animation:t-ringe 2.8s ease-out infinite}
@keyframes t-ringe{0%,60%{opacity:0}70%{opacity:1}95%,100%{opacity:0}}
.tegning .t-flamme{transform-box:fill-box;transform-origin:bottom;animation:t-flamme 1.4s ease-in-out infinite alternate}
@keyframes t-flamme{from{transform:scale(1,1) rotate(-2deg)}to{transform:scale(.92,1.08) rotate(2deg)}}
.tegning .t-sne circle{fill:#fff;stroke:var(--blaek-blid);stroke-width:.8;animation:t-sne 7s linear infinite}
@keyframes t-sne{from{transform:translateY(-40px)}to{transform:translateY(200px)}}
.tegning .t-seddel{transform-box:fill-box;transform-origin:left bottom;animation:t-blafre 5s ease-in-out infinite}
@keyframes t-blafre{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(-6deg) skewX(-2deg)}}
.tegning .t-stjerne{fill:var(--sennep);animation:t-blink 3s ease-in-out infinite}
.tegning .t-stjerne:nth-of-type(2){animation-delay:-1s}.tegning .t-stjerne:nth-of-type(3){animation-delay:-2s}
@keyframes t-blink{0%,100%{opacity:.25}50%{opacity:1}}
.tegning .t-lup{transform-box:fill-box;transform-origin:center;animation:t-lup 5s ease-in-out infinite}
@keyframes t-lup{0%,100%{transform:rotate(0)}50%{transform:rotate(-6deg) translateX(-2px)}}
/* on game cards the drawing stands still */
.spilkort .tegning *{animation:none!important}
.spilkort .tegning .t-fade{opacity:1}
.faktabjaelke + .priskort,.faktabjaelke + *{margin-top:32px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;scroll-behavior:auto!important}
  .tegning *,.klistermaerke svg{animation:none!important}.tegning .t-fade{opacity:1}
  .knap:hover,.spilkort:hover{transform:none}
}

/* Admin: a team's conversation on the code page */
.admin .samtale{background:var(--flade);border:var(--streg);border-radius:14px;padding:12px;max-height:480px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.admin .samtale .b{max-width:75%;padding:7px 12px;border-radius:16px;background:#fff;font-size:15px}
.admin .samtale .b.hold{align-self:flex-end;background:var(--blaa);color:#fff}
.admin .samtale .t{font-size:11px;opacity:.7;margin-right:6px}